/* =====================================================================
   Portal público — sobre tar.css

   Toda la audacia del portal se gasta en UN lugar: el campo de la clave de
   reservación. Es la puerta de entrada, son seis caracteres y equivocarse ahí
   es el error más frecuente. Lo demás se mantiene callado a propósito.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. La clave de reservación, como un tablero de salidas

   Es el vocabulario más reconocible de un aeropuerto y aquí además hace
   trabajo: seis celdas dicen "van seis caracteres" —la fuente de error más
   común— y cada letra aterriza en su casilla con el mismo giro de las aletas.

   Sigue siendo UN input, no seis. Pegar la clave desde el correo de
   confirmación es como la mayoría la va a capturar, y seis campos separados
   rompen el pegado, el autocompletado y el lector de pantalla. Las celdas son
   un espejo visual; el control real es el input, que conserva su etiqueta.

   Sin JavaScript el input se ve tal cual y todo funciona: el tablero sólo
   aparece cuando el guion pudo construirlo.
   --------------------------------------------------------------------- */

.tar-pnr {
    position: relative;
}

.tar-pnr__campo {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--regla);
    background: transparent;
    padding: .6rem 0;
    font-family: var(--tar-mono);
    font-size: clamp(1.6rem, 8vw, 2.25rem);
    font-weight: 500;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--tinta);
}

.tar-pnr__campo:focus {
    outline: none;
    border-bottom-color: var(--tinta);
}

.tar-pnr__campo::placeholder {
    color: var(--tinta-3);
    opacity: .5;
}

/* --- Modo tablero: lo activa el guion --------------------------------- */

.tar-pnr--tablero .tar-pnr__campo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    color: transparent;
    caret-color: transparent;
    letter-spacing: 0;
    font-size: 1rem;
    z-index: 2;
    cursor: text;
}

.tar-pnr--tablero .tar-pnr__campo::placeholder { color: transparent; }
.tar-pnr--tablero .tar-pnr__campo::selection { background: transparent; }

.tar-tablero {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(.25rem, 1.4vw, .5rem);
    max-width: 26rem;
}

.tar-celda {
    position: relative;
    aspect-ratio: 3 / 4;
    background-color: var(--carbon);
    color: #F5F3EE;
    border-radius: 2px;
    overflow: hidden;
    font-family: var(--tar-mono);
    font-size: clamp(1.4rem, 6.5vw, 2rem);
    font-weight: 500;
    line-height: 1;
    user-select: none;

    /* Poca profundidad: mucha perspectiva exagera el giro y la aleta parece
       de papel en vez de una placa rígida. */
    perspective: 260px;
}

/* La celda es un split-flap de verdad, y eso son cuatro capas:

     · mitad--arriba   fija, ya muestra la mitad superior del carácter NUEVO,
                       tapada por la aleta que todavía no cae
     · mitad--abajo    fija, muestra la mitad inferior del carácter VIEJO
     · aleta--cae      mitad superior del VIEJO, gira hacia abajo (0 → −90°)
     · aleta--sube     mitad inferior del NUEVO, gira desde abajo (90° → 0)

   Los dos giros son consecutivos, no simultáneos: primero cae la vieja y
   sólo entonces sube la nueva. Hacerlos a la vez es el error que convierte
   el efecto en un parpadeo. */

.tar-mitad,
.tar-aleta {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    background-color: inherit;
}

.tar-mitad--arriba,
.tar-aleta--cae { top: 0; }

.tar-mitad--abajo,
.tar-aleta--sube { bottom: 0; }

/* El glifo mide la celda entera dentro de una mitad que sólo enseña la
   parte que le toca. Al quedar centrado en ambas, las dos mitades empalman
   exactamente y la ranura cae justo a media letra. */
.tar-glifo {
    position: absolute;
    left: 0;
    right: 0;
    height: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tar-mitad--arriba .tar-glifo,
.tar-aleta--cae .tar-glifo { top: 0; }

.tar-mitad--abajo .tar-glifo,
.tar-aleta--sube .tar-glifo { bottom: 0; }

.tar-glifo--guia { color: rgba(245, 243, 238, .2); }

.tar-aleta {
    z-index: 2;
    backface-visibility: hidden;
    /* En reposo mandan las mitades fijas; las aletas sólo existen mientras
       dura el volteo. */
    visibility: hidden;
}

.tar-aleta--cae  { transform-origin: center bottom; }
.tar-aleta--sube { transform-origin: center top; }

.tar-celda--voltea .tar-aleta { visibility: visible; }

.tar-celda--voltea .tar-aleta--cae {
    animation: aleta-cae 55ms ease-in forwards;
}

.tar-celda--voltea .tar-aleta--sube {
    animation: aleta-sube 60ms 55ms ease-out forwards;
}

/* El oscurecido es lo que da volumen: una placa que gira recibe menos luz
   conforme se pone de canto. Sin él el giro se lee plano. */
@keyframes aleta-cae {
    from { transform: rotateX(0);     filter: brightness(1); }
    to   { transform: rotateX(-90deg); filter: brightness(.45); }
}

@keyframes aleta-sube {
    from { transform: rotateX(90deg); filter: brightness(.45); }
    to   { transform: rotateX(0);     filter: brightness(1); }
}

/* La ranura del eje y el anillo de la celda activa van sobre las capas.
   Las mitades son hijos absolutos con fondo opaco, así que se pintan encima
   del box-shadow de la celda: puesto ahí, el anillo simplemente no se ve. */

.tar-celda::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    margin-top: -1px;
    background: rgba(0, 0, 0, .55);
    z-index: 3;
}

.tar-celda--vacia { background-color: #262826; }

/* La celda que toca escribir. Sin cursor parpadeante: un tablero real no
   parpadea, y el anillo ya dice dónde va a caer la siguiente letra. */
.tar-pnr--enfocado .tar-celda--activa::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--rojo);
    border-radius: 2px;
    z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
    .tar-celda--voltea .tar-aleta { animation: none; }
}

/* --- El talón ---------------------------------------------------------
   Una muesca a cada lado y una línea de troquel: la señal mínima para que
   la tarjeta se lea como el desprendible de un boleto. No lleva más.
   --------------------------------------------------------------------- */

.tar-talon {
    position: relative;
}

.tar-talon__troquel {
    position: relative;
    border-top: 1px dashed var(--regla);
    /* Los negativos sacan la línea hasta el borde de la tarjeta, así que
       tienen que seguir al padding: p-4 (1.5rem) y p-lg-5 (3rem). */
    margin: 1.75rem -1.5rem 1.5rem;
}

@media (min-width: 992px) {
    .tar-talon__troquel { margin-inline: -3rem; }
}

.tar-talon__troquel::before,
.tar-talon__troquel::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: -.55rem;
    background: var(--mesa);
    border: 1px solid var(--regla);
    border-radius: 50%;
}

.tar-talon__troquel::before { left: -.55rem; }
.tar-talon__troquel::after  { right: -.55rem; }

/* ---------------------------------------------------------------------
   2. Progreso del trámite

   Es legítimamente una secuencia —buscar, elegir, capturar, revisar,
   generar— así que dibujarla como recorrido informa en vez de decorar: el
   avión ES la posición del trámite, no un adorno.

   La animación sólo corre cuando el paso cambió de verdad (el controlador lo
   sabe por la sesión), no en cada recarga. Es movimiento que responde a una
   acción de la persona y le muestra qué cambió; el que se repite solo acaba
   siendo ruido. Con prefers-reduced-motion el avión simplemente aparece en su
   estación.
   --------------------------------------------------------------------- */

.tar-ruta {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

/*
 * Con N estaciones hay N-1 tramos. Si los cinco pasos midieran lo mismo, la
 * última estación caería al 80% del ancho y sobraría un hueco a la derecha;
 * por eso el último no arrastra tramo y su marca se ancla al borde final.
 */
.tar-ruta__paso {
    flex: 1 1 0;
    position: relative;
    padding-top: 1.15rem;
    font-size: var(--t-meta);
    color: var(--tinta-3);
    min-width: 0;
}

.tar-ruta__paso:last-child {
    flex: 0 0 0;
}

/* El tramo que SALE de esta estación hacia la siguiente. */
.tar-ruta__paso::before {
    content: "";
    position: absolute;
    top: .29rem;
    left: .3rem;
    right: 0;
    height: 2px;
    background: var(--regla);
}

.tar-ruta__paso:last-child::before {
    display: none;
}

/* La estación. */
.tar-ruta__paso::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--papel);
    border: 2px solid var(--regla);
    box-sizing: border-box;
}

/* La última se ancla por su derecha para no salirse del contenedor. */
.tar-ruta__paso:last-child::after {
    left: auto;
    right: 0;
}

/*
 * Sólo los tramos YA recorridos van oscuros. El que sale de la estación
 * actual todavía no se ha volado, así que se queda claro: pintarlo daría a
 * entender que el paso siguiente ya está hecho.
 */
.tar-ruta__paso--hecho {
    color: var(--tinta-2);
}

.tar-ruta__paso--hecho::before {
    background: var(--tinta-3);
}

.tar-ruta__paso--hecho::after {
    background: var(--tinta-3);
    border-color: var(--tinta-3);
}

.tar-ruta__paso--actual {
    color: var(--tinta);
    font-weight: 600;
}

/* La estación actual no lleva punto: la ocupa el avión. */
.tar-ruta__paso--actual::after {
    display: none;
}

.tar-ruta__etiqueta {
    display: block;
    padding-right: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La última etiqueta crece hacia la izquierda desde el borde. */
.tar-ruta__paso:last-child .tar-ruta__etiqueta {
    position: absolute;
    top: 1.15rem;
    right: 0;
    padding-right: 0;
    text-align: right;
}

/* En teléfono sólo se nombra el paso actual; los demás quedan como marcas. */
@media (max-width: 575.98px) {
    .tar-ruta__paso:not(.tar-ruta__paso--actual) .tar-ruta__etiqueta {
        display: none;
    }
}

.tar-avion {
    position: absolute;
    top: -.26rem;
    left: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: -.28rem;
    color: var(--rojo);
    z-index: 1;
}

/* Si el trámite terminó, el avión aterriza en la última estación. */
.tar-ruta__paso:last-child .tar-avion {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: -.28rem;
}

/* Avanza desde la estación anterior: en `left`, el 100% es el ancho de un
   paso, así que -100% es exactamente la estación previa. */
.tar-avion--avanza {
    animation: avion-avanza .75s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes avion-avanza {
    from { left: -100%; opacity: .35; }
    60%  { opacity: 1; }
    to   { left: 0; opacity: 1; }
}

/* En la última estación el recorrido se mide desde la derecha. */
.tar-ruta__paso:last-child .tar-avion--avanza {
    animation-name: avion-avanza-final;
}

@keyframes avion-avanza-final {
    from { right: 100%; opacity: .35; }
    60%  { opacity: 1; }
    to   { right: 0; opacity: 1; }
}

/* Estela: se dibuja mientras el avión avanza y se apaga al llegar. */
.tar-avion--avanza::after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 2px;
    width: 1.4rem;
    margin-top: -1px;
    background: linear-gradient(to left, var(--rojo), transparent);
    animation: avion-estela .75s ease-out both;
}

@keyframes avion-estela {
    from, 70% { opacity: .8; }
    to        { opacity: 0; }
}

/* ---------------------------------------------------------------------
   3. Documentos

   En pantalla ancha, tabla: permite comparar importes de un vistazo.
   En teléfono cada documento se convierte en un talón, que es como se lee un
   boleto de todos modos.
   --------------------------------------------------------------------- */

/*
 * Proporciones: los códigos y los importes no se parten nunca; el nombre del
 * pasajero es lo único elástico. Sin esto un nombre de cuatro partes se
 * apilaba en cuatro líneas y triplicaba el alto de la fila.
 */
/* ---------------------------------------------------------------------
   Los documentos de la reservación, como el recibo de un boleto.

   La versión anterior era una tabla de siete columnas y fallaba en lo
   básico: no cabía. El importe —el dato por el que la persona entró—
   quedaba fuera del área visible y había que arrastrar la tabla para
   verlo. Y repetía el mismo itinerario y la misma fecha en cada renglón.

   Un PNR son pasajeros, cada uno con su boleto más sus extras, así que esa
   es la estructura. Lo que comparten todos los documentos sube al
   encabezado; lo que no, se queda en su renglón.
   --------------------------------------------------------------------- */

.tar-reserva { overflow: hidden; }

/* El encabezado usa el mismo carbón que las celdas del tablero de la
   pantalla anterior: ata las dos y hace de cabecera del boleto. */
.tar-reserva__cabecera {
    display: flex;
    flex-wrap: wrap;
    /* `flex-start`, no el `stretch` de fábrica: con las cajas estiradas a la
       misma altura, cada etiqueta quedaba a una altura distinta según lo alto
       que fuera su dato, y la fila se veía ondulada. */
    align-items: flex-start;
    gap: 1.15rem 2.5rem;
    padding: 1.15rem 1.5rem;
    background: var(--carbon);
    color: #F5F3EE;
}

.tar-dato {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

/* Todos los datos al mismo tamaño y con la misma altura de línea: el PNR va
   en monoespaciada y la ruta también, y basta con que una sea más chica para
   que la fila deje de leerse como una sola línea. */
.tar-dato__valor {
    font-size: var(--t-h3);
    font-weight: 500;
    line-height: 1.2;
}

.tar-reserva__cabecera .tar-ruta-vuelo,
.tar-reserva__cabecera .tar-codigo {
    font-size: var(--t-h3);
    line-height: 1.2;
}

/* Minúscula, no versalitas con letter-spacing: la etiqueta acompaña al dato,
   no compite con él. */
.tar-dato__etiqueta {
    font-size: var(--t-meta);
    color: rgba(245, 243, 238, .62);
}

.tar-reserva__cabecera .tar-ruta-vuelo__flecha { color: rgba(245, 243, 238, .62); }

/* --- Un pasajero ------------------------------------------------------ */

.tar-pax { padding: 1.1rem 1.5rem; }

/* Troquel entre pasajeros: la línea punteada del talón de la pantalla de
   búsqueda, sin las muescas —seis tarjetas perforadas serían ruido. */
.tar-pax + .tar-pax { border-top: 1px dashed var(--regla); }

.tar-pax__nombre {
    font-size: var(--t-nota);
    font-weight: 600;
    color: var(--tinta);
    margin: 0 0 .5rem;
}

/* --- Un documento ----------------------------------------------------- */

.tar-renglon {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
}

.tar-renglon__que {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .7rem;
    min-width: 0;
}

.tar-renglon__tipo { color: var(--tinta); }

.tar-renglon__folio {
    font-size: var(--t-nota);
    color: var(--tinta-3);
}

.tar-renglon__detalle {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .7rem;
    font-size: var(--t-nota);
    color: var(--tinta-2);
}

/* Alineados a la derecha y sin partirse: comparar importes de un vistazo es
   lo único que la tabla hacía bien, y eso se conserva. */
.tar-renglon__importe {
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
    flex: 0 0 auto;
}

.tar-renglon__descargas { display: flex; gap: .7rem; font-size: var(--t-nota); }

.tar-renglon.is-inactivo .tar-renglon__tipo,
.tar-renglon.is-inactivo .tar-renglon__importe { color: var(--tinta-3); }

.tar-renglon--subtotal {
    margin-top: .3rem;
    padding-top: .5rem;
    border-top: 1px solid var(--regla);
    font-size: var(--t-nota);
    color: var(--tinta-2);
}

/* El total del recibo: mismo renglón, misma columna de importes que todo lo
   que suma. Una cifra final que no se puede seguir con el dedo hacia arriba
   deja de ser comprobable, y ésta es la que la persona va a facturar. */
.tar-renglon--total {
    padding: .75rem 1.5rem .95rem;
    border-top: 1px solid var(--tinta);
    align-items: baseline;
}

.tar-renglon--total .tar-renglon__que {
    font-weight: 600;
    color: var(--tinta);
}

.tar-renglon--total .tar-renglon__importe {
    font-size: var(--t-h2);
    font-weight: 600;
    color: var(--tinta);
}

@media (max-width: 575.98px) {
    .tar-reserva__cabecera { gap: .9rem 1.75rem; padding-inline: 1.15rem; }
    .tar-pax,
    .tar-renglon--total { padding-inline: 1.15rem; }
}

/* La ruta del vuelo: la flecha aquí ES el dato, no un adorno del enlace. */
.tar-ruta-vuelo {
    font-family: var(--tar-mono);
    font-size: var(--t-nota);
    white-space: nowrap;
}

.tar-ruta-vuelo__flecha {
    color: var(--tinta-3);
    padding-inline: .15rem;
}

/* ---------------------------------------------------------------------
   4. Conceptos y totales de la vista previa

   Los conceptos NO van en tabla: cada uno es "qué se cobra" y "de qué
   documento viene", y meterlo todo en una celda produce líneas de 120
   caracteres que nadie lee. Con dos renglones y una jerarquía clara, la
   persona verifica de un vistazo.

   El margen lateral es el mismo del resto de la tarjeta (1.5rem): que el
   encabezado esté sangrado y las filas pegadas al borde era lo que hacía ver
   descuadrada la pantalla.
   --------------------------------------------------------------------- */

.tar-conceptos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tar-concepto {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: .35rem 1.25rem;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--regla-suave);
}

.tar-concepto__texto { min-width: 0; }

.tar-concepto__titulo {
    font-size: var(--t-nota);
    line-height: 1.4;
}

.tar-concepto__ref {
    font-family: var(--tar-mono);
    font-size: var(--t-meta);
    color: var(--tinta-2);
    margin-top: .15rem;
    overflow-wrap: anywhere;
}

.tar-concepto__tasa {
    font-size: var(--t-meta);
    color: var(--tinta-2);
    min-width: 2.5rem;
    text-align: right;
}

.tar-concepto__importe {
    min-width: 6.5rem;
    font-size: var(--t-nota);
}

/* Los totales se separan de los conceptos: son la conclusión, no un renglón
   más de la lista. */
.tar-totales {
    border-top: 2px solid var(--regla);
    padding: .9rem 1.5rem 1.25rem;
}

.tar-totales__fila {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 2rem;
    padding-block: .2rem;
    font-size: var(--t-nota);
    color: var(--tinta-2);
}

.tar-totales__fila .tar-importe { min-width: 7.5rem; }

.tar-totales__fila--final {
    margin-top: .5rem;
    padding-top: .7rem;
    border-top: 1px solid var(--regla-suave);
    font-size: var(--t-h3);
    font-weight: 600;
    color: var(--tinta);
}

/* Barra fija con el total seleccionado: en un trámite con reloj, el usuario
   no debería tener que desplazarse para saber qué lleva. */
.tar-barra {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--papel);
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    padding: 1rem 1.15rem;
    margin-top: 1.25rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Etiqueta e importe en la **misma línea base**, no apilados. Apilados, el
   número quedaba flotando sin nada con qué alinearse —el total del recibo ya
   vive arriba, en su columna—; aquí sólo confirma qué llevas al pulsar. */
.tar-barra__cifra {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .6rem;
}

.tar-barra__total {
    font-size: var(--t-h3);
    font-weight: 600;
    line-height: 1.2;
}

@media (max-width: 575.98px) {
    .tar-concepto {
        grid-template-columns: 1fr auto;
        padding-inline: 1rem;
    }

    .tar-concepto__tasa { grid-row: 2; grid-column: 1; text-align: left; }
    .tar-concepto__importe { grid-row: 2; grid-column: 2; }

    .tar-totales { padding-inline: 1rem; }
}

/* ---------------------------------------------------------------------
   5. Resultado
   --------------------------------------------------------------------- */

.tar-folio {
    font-family: var(--tar-mono);
    font-size: var(--t-nota);
    letter-spacing: .04em;
    word-break: break-all;
}

.tar-resultado__total {
    font-size: var(--t-cifra);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Datos del receptor: lista de definición, no una cadena unida por puntos.
   Un dato fiscal se verifica leyéndolo etiquetado. */
.tar-datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .3rem 1.25rem;
    margin: 0;
    font-size: var(--t-nota);
}

.tar-datos dt {
    color: var(--tinta-2);
    font-weight: 400;
}

.tar-datos dd {
    margin: 0;
    font-weight: 500;
}

/* Aviso de que el formulario se rellenó solo.

   Un formulario que se llena sin decir nada deja a la persona dudando de si
   esos datos son suyos. El aviso es texto, no un color: la información es
   "esto vino de una factura anterior, revísalo", no "atención". */
.tar-autollenado {
    margin-top: .4rem;
    font-size: var(--t-meta);
    color: var(--tinta-2);
    max-width: 46ch;
}