/**
 * PTV Certificate Validator — estilos locales (mínimos).
 *
 * Las primitivas de UI (botón, input, alert, badge, spinner) vienen del
 * UI Kit (.ptv-*). Este archivo solo aporta lo que el kit NO cubre:
 *   - El contenedor del shortcode.
 *   - Layout de la cert-card y su grid de datos.
 *   - Combo "loading" (spinner + label centrados).
 *   - Layout del form (campos lado a lado, error inline).
 *
 * Todas las clases locales llevan prefijo `ptvr-cv-*` para evitar
 * colisiones con el kit. Solo tokens `--ptv-*` — nunca valores hex
 * hardcodeados.
 */

/* ── Contenedor del shortcode ─────────────────────────────────────────── */
#ptv-cert-validator {
    max-width: 640px;
    margin-inline: auto;
}

/* ── Loading combo: spinner + texto centrados ──────────────────────────── */
.ptvr-cv-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-3);
    padding: var(--ptv-space-8);
    color: var(--ptv-color-text-secondary);
    font-size: var(--ptv-text-b4);
}
.ptvr-cv-loading p {
    margin: 0;
}

/* ── Card del certificado (modo público) ───────────────────────────────── */
/* Estructura: hero (badge + número) → dividers → secciones (Viaje, Producto,
   Titular) → footer (emisión). Cada sección tiene un título tipo eyebrow
   (uppercase, pequeño, secondary color) que aporta jerarquía sin recurrir
   a tablas. */
.ptvr-cv-card {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-5);
    padding: var(--ptv-space-8) var(--ptv-space-6);
    border: var(--ptv-border-width-sm) solid var(--ptv-color-border);
    border-radius: var(--ptv-radius-xl);
    background: var(--ptv-color-bg-surface);
}

.ptvr-cv-card__divider {
    margin: 0;
}

/* ── Hero: badge + número de certificado prominente ──────────────────── */
.ptvr-cv-card__hero {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
    align-items: flex-start;
}

.ptvr-cv-code {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-1);
}

.ptvr-cv-code__label {
    font-size: var(--ptv-text-c1);
    color: var(--ptv-color-text-secondary);
    font-weight: var(--ptv-font-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ptvr-cv-code__value {
    font-family: var(--ptv-font-mono);
    font-size: var(--ptv-text-h4);
    font-weight: var(--ptv-font-semibold);
    color: var(--ptv-color-text-primary);
    letter-spacing: var(--ptv-tracking-tight);
    word-break: break-all;
}

@media (max-width: 575.98px) {
    .ptvr-cv-code__value {
        font-size: var(--ptv-text-h4-xs);
    }
}

/* ── Status pill: grande, color saturado, alto contraste ──────────────── */
/* El .ptv-badge del kit usa fondos pastel (bg-success, bg-error) que no
   dan suficiente peso visual para señalar el estado del certificado.
   Esta clase local sustituye al badge solo en el hero — usa los acentos
   -700 del kit sobre texto inverso para máxima legibilidad. */
.ptvr-cv-status {
    display: inline-flex;
    align-items: center;
    padding: var(--ptv-space-2) var(--ptv-space-4);
    border-radius: var(--ptv-radius-full);
    font-family: var(--ptv-font-sans);
    font-size: var(--ptv-text-b4);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-tight);
    color: var(--ptv-color-text-inverse);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.ptvr-cv-status--success { background: var(--ptv-color-success-700); }
.ptvr-cv-status--neutral { background: var(--ptv-color-neutral-800); }
.ptvr-cv-status--error   { background: var(--ptv-color-error-700);   }

/* ── Plan pill: misma escala que .ptvr-cv-status pero en tono "soft" ───── */
/* La etiqueta de plan no es un estado — usa un tratamiento secundario
   (fondo tintado + borde + texto en el mismo acento) replicando el look
   de .ptv-badge--neutral --soft del kit, pero a mayor tamaño para que
   conviva visualmente con el status del hero. */
.ptvr-cv-plan {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--ptv-space-2) - var(--ptv-border-width-sm))
             calc(var(--ptv-space-4) - var(--ptv-border-width-sm));
    border: var(--ptv-border-width-sm) solid var(--ptv-color-neutral-800);
    border-radius: var(--ptv-radius-full);
    background: color-mix(in srgb, var(--ptv-color-neutral-800) 10%, var(--ptv-color-bg-surface));
    color: var(--ptv-color-neutral-800);
    font-family: var(--ptv-font-sans);
    font-size: var(--ptv-text-b4);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-tight);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ── Sección genérica con título tipo eyebrow ─────────────────────────── */
.ptvr-cv-section {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

.ptvr-cv-section__title {
    margin: 0;
    font-size: var(--ptv-text-c1);
    font-weight: var(--ptv-font-semibold);
    color: var(--ptv-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Viaje: Origen → Destino en strip + línea de vigencia ─────────────── */
.ptvr-cv-trip {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-4);
}

.ptvr-cv-trip__node {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-1);
    flex: 1 1 0;
    min-width: 0;
}

.ptvr-cv-trip__label {
    font-size: var(--ptv-text-c1);
    color: var(--ptv-color-text-secondary);
    font-weight: var(--ptv-font-medium);
}

.ptvr-cv-trip__value {
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-semibold);
    color: var(--ptv-color-text-primary);
    line-height: var(--ptv-leading-tight);
}

.ptvr-cv-trip__arrow {
    color: var(--ptv-color-brand-600);
    font-size: var(--ptv-text-h4);
    font-weight: var(--ptv-font-bold);
    line-height: 1;
    flex-shrink: 0;
}

.ptvr-cv-trip__validity {
    margin: 0;
    font-size: var(--ptv-text-b4);
    color: var(--ptv-color-text-secondary);
    line-height: var(--ptv-leading-normal);
}
.ptvr-cv-trip__validity strong {
    color: var(--ptv-color-text-primary);
    font-weight: var(--ptv-font-semibold);
}

@media (max-width: 575.98px) {
    /* En móvil, el strip se apila vertical con la flecha rotada. */
    .ptvr-cv-trip {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ptv-space-2);
    }
    .ptvr-cv-trip__arrow {
        transform: rotate(90deg);
        font-size: var(--ptv-text-b1);
    }
}

/* ── Producto: nombre + plan badge alineados ───────────────────────────── */
.ptvr-cv-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ptv-space-3);
    flex-wrap: wrap;
}

.ptvr-cv-product__name {
    margin: 0;
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-semibold);
    color: var(--ptv-color-text-primary);
}

/* ── Titular: grid clave/valor compacto ───────────────────────────────── */
.ptvr-cv-holder {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ptv-space-2) var(--ptv-space-4);
    margin: 0;
}
.ptvr-cv-holder dt {
    margin: 0;
    font-weight: var(--ptv-font-medium);
    color: var(--ptv-color-text-secondary);
    font-size: var(--ptv-text-b4);
    white-space: nowrap;
}
.ptvr-cv-holder dd {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b4);
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-normal);
}

@media (max-width: 575.98px) {
    .ptvr-cv-holder {
        grid-template-columns: 1fr;
        gap: var(--ptv-space-1) 0;
    }
    .ptvr-cv-holder dt { white-space: normal; }
    .ptvr-cv-holder dd + dt { margin-top: var(--ptv-space-3); }
}

/* ── Footer: fecha de emisión sutil ────────────────────────────────────── */
.ptvr-cv-card__footer {
    margin: 0;
    font-size: var(--ptv-text-c1);
    color: var(--ptv-color-text-secondary);
    text-align: center;
}

/* ── Form layout (modo clásico: código + email) ────────────────────────── */
.ptvr-cv-form {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
}

/* Mensaje arriba del recaptcha en modo público */
.ptvr-cv-prompt {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b3);
}

/* Inputs apilados por defecto (mobile + tablet) y lado a lado desde
   `lg` (≥992px) — convención del 2026: "mobile" cubre hasta <lg.
   Cada campo es ahora `.ptv-field` (no `.ptv-input-wrap` directo). */
.ptvr-cv-fields {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

@media (min-width: 992px) {
    .ptvr-cv-fields {
        flex-direction: row;
        align-items: flex-start;
    }
    .ptvr-cv-fields > .ptv-field {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Botón "Consultar" — overrides finos sobre .ptv-btn--filled-brand del kit
   (ancho automático en desktop, full-width en móvil para ergonomía). */
.ptvr-cv-submit.ptv-btn {
    align-self: flex-start;
}
@media (max-width: 575.98px) {
    .ptvr-cv-submit.ptv-btn {
        align-self: stretch;
    }
}

/* Wrap del widget de reCAPTCHA — solo aire arriba */
.ptvr-cv-recaptcha {
    /* margin reset; el gap del form-flex maneja la separación */
}