/* =====================================================================
   Sistema de diseño — Portal de Facturación TAR
   Tokens compartidos por el portal público y el backend.

   DIRECCIÓN
   ---------
   El asunto no es un SaaS: es un trámite fiscal irreversible que el pasajero
   hace contra un reloj de 72 horas, muchas veces desde un teléfono. El
   lenguaje visual sale del vernáculo del boleto de avión —talón, código de
   reservación, ruta, folio— y su trabajo es que el trámite se sienta
   verificable, no vistoso.

   La metáfora estructural es "papel sobre mesa": superficies blancas de
   documento sobre un fondo gris frío. Por eso NO hay sombras: los documentos
   se separan del fondo por su blancura y una regla de un pixel, como una hoja
   sobre un escritorio. Una sombra idéntica bajo cada tarjeta es justo lo que
   hace que todo parezca la misma plantilla.

   COLOR
   -----
   La marca es bicroma y viene del logotipo: rojo #D30F2C sobre carbón
   #1C1D1C. El fondo es gris FRÍO deliberadamente: el carbón tira levemente a
   verde y un fondo cálido apagaría el rojo, que necesita conservar toda su
   fuerza porque tiene un solo trabajo.

   El rojo NO es color de acción. En una pantalla donde se capturan datos que
   después no se podrán corregir, el rojo queda reservado para "detente y lee":
   la marca y los errores. Si además pintara los botones, el aviso importante
   dejaría de destacar. La acción principal usa el carbón.
   ===================================================================== */

:root {
    /* Base */
    --tinta:        #1C1D1C;   /* carbón del logotipo */
    --tinta-2:      #5E6663;   /* secundario, mismo matiz frío */
    --tinta-3:      #69736F;   /* terciario. Estuvo en #6E7875, que cumple AA
                                  sobre papel blanco (4.56:1) pero se queda en
                                  4.32:1 sobre --papel-2, que es justo donde
                                  caen los metadatos: filas alternas, pies de
                                  tabla y avisos suaves. En #69736F da 4.64 y
                                  4.90, con margen en las dos. */
    --rojo:         #D30F2C;   /* rojo del logotipo */
    --rojo-oscuro:  #A00B21;   /* texto rojo sobre claro, contraste AA */
    --papel:        #FFFFFF;   /* superficie de documento */
    --papel-2:      #F7F9FA;   /* superficie secundaria: fila alterna, pie de
                                  tabla, aviso sin color propio */
    --mesa:         #EBEFF1;   /* fondo sobre el que descansan */
    --regla:        #D5DCDE;   /* reglas y bordes */
    --regla-suave:  #E6EBEC;

    /* Superficies oscuras que NO se invierten con el tema.
       `--tinta` es color de TEXTO: en el tema oscuro se vuelve casi blanco. Estas
       superficies —el riel, la barra móvil, el tablero split-flap del PNR— tienen
       que seguir siendo oscuras en los dos temas, porque encima llevan veinte
       `rgba(255, 255, 255, …)` escritos a mano que dan por hecho un fondo oscuro.
       Sin separarlas, encender el tema oscuro las invertiría a la vez y su texto
       desaparecería: el mismo fallo del riel transparente, multiplicado por diez.
       Hoy vale exactamente lo mismo que `--tinta`, así que separarlas no cambia
       ni un pixel; es lo que hace posible la segunda paleta. */
    --carbon:       #1C1D1C;

    /* La acción principal SÍ se invierte: un botón oscuro sobre papel tiene que
       volverse claro sobre fondo oscuro. Por eso no puede ser `--carbon` ni
       quedarse en `--tinta`, que ahí es tinta de texto. */
    --accion:       #1C1D1C;
    --accion-texto: #F5F3EE;
    --accion-hover: #000000;

    /* En componentes: `rgba(var(--tinta-rgb), .15)`. Bootstrap 5.3 consume los
       enlaces así, y tenerlos como token deja el puente entero agnóstico al
       tema: voltear los tokens base voltea Bootstrap solo. Separados por comas,
       no `#hex`: es lo que espera `rgba()`. */
    --tinta-rgb:        28, 29, 28;
    --rojo-rgb:         211, 15, 44;
    --rojo-oscuro-rgb:  160, 11, 33;

    /* Funcionales: sólo en estados, nunca decorativos */
    --exito:        #1E6B4A;
    --exito-fondo:  #EAF3EE;
    --aviso:        #8A5A00;
    --aviso-fondo:  #FBF3E4;
    --rojo-fondo:   #FCEDEF;
    --neutro-fondo: #EDF0F1;   /* fondo de las etiquetas sin color propio */

    /* --- Escala nueva ---------------------------------------------------
       No es una progresión geométrica: son los tamaños que pide el diseño,
       cada uno con un trabajo. Los títulos van en Archivo con interletraje
       negativo; el cuerpo y los datos, sin él. */
    --t-rotulo:  0.625rem;   /* 10 — rótulo de dato, versalitas */
    --t-meta:    0.6875rem;  /* 11 — metadato de celda, mono */
    --t-fina:    0.71875rem; /* 11.5 — nota al pie */
    --t-etiq:    0.75rem;    /* 12 — etiqueta, botón, ficha de filtro */
    --t-nota:    0.78125rem; /* 12.5 — prosa de tarjeta */
    --t-cuerpo:  0.8125rem;  /* 13 — cuerpo del admin, celda de tabla */
    --t-lead:    0.84375rem; /* 13.5 — párrafo de entrada */
    --t-cuerpo2: 0.875rem;   /* 14 — cuerpo del portal, más aire */
    --t-h3:      1.125rem;   /* 18 */
    --t-h2:      1.375rem;   /* 22 */
    --t-h1:      1.875rem;   /* 30 */
    --t-h1-max:  2.125rem;   /* 34 — sólo el saludo del tablero */
    --t-cifra:   2.375rem;   /* 38 — cifra de tarjeta */
    --t-cifra-max: 3.25rem;  /* 52 — la cobertura */

    /* --- Rampas de gráfica ----------------------------------------------
       Dos, porque codifican cosas distintas.

       La **pastel** es semántica: verde lo hecho, ámbar lo pendiente, gris lo
       que nunca va a facturarse. Aquí el color sí significa, así que va con su
       tinta de alto contraste (`-tinta`) para las pastillas por umbral, medida
       en 5.6, 5.9 y 6.3 : 1.

       La **de series** es una rampa de rango, no de identidad: la barra más
       larga es la más oscura y de ahí baja. Un color por receptor rompería el
       bicromo de la marca y además sería el encoding equivocado — no son
       categorías, son puestos.

       Ninguno de los cuatro pasos de series llega a 3:1 sobre papel, así que
       **ninguno puede ser el único indicio de nada**: cada barra lleva su cifra
       escrita al lado. Queda prohibido usar esta rampa en una gráfica que
       dependa de una leyenda de color. */
    --pastel-ok:            #A8D5BA;
    --pastel-ok-tinta:      #14523A;
    --pastel-aviso:         #F2D9A0;
    --pastel-aviso-tinta:   #6E4700;
    --pastel-mal:           #F2B3BC;
    --pastel-mal-tinta:     #7A0A1C;
    --pastel-neutro:        #DCE3E6;

    --serie-1: #8FA9B8;
    --serie-2: #B0C4CF;
    --serie-3: #C9D8DF;
    --serie-4: #DFE7EA;

    /* Mostrar u ocultar por tema, sin JavaScript.
       Es lo que conmuta el sol y la luna del interruptor, y las dos versiones
       del logotipo. Con una clase haría falta saber el tema en el servidor —y
       en el estado «sin elegir» no se sabe—, así que va como token: la consulta
       de medios lo resuelve igual que resuelve los colores. */
    --si-claro:  block;
    --si-oscuro: none;

    --radio: 3px;         /* documento, no burbuja */
    --medida: 66ch;       /* longitud de línea máxima para prosa */

    /* Bootstrap 5.3 se configura por variables: se ajusta, no se pelea. */
    --bs-body-bg: var(--mesa);
    --bs-body-color: var(--tinta);
    --bs-border-color: var(--regla);
    --bs-border-radius: var(--radio);
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: var(--radio);
    --bs-font-sans-serif: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tar-titulos: "Archivo", var(--bs-font-sans-serif);
    --tar-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --bs-body-font-family: var(--bs-font-sans-serif);
    /* Bootstrap 5.3 pinta los enlaces con `rgba(var(--bs-link-color-rgb), …)`,
       **no** con `--bs-link-color`. Fijar sólo esa variable no hacía nada y
       todo el backend salía con el azul de fábrica. Se dejan las dos: la RGB
       es la que manda hoy, la otra la usan componentes que aún la leen. */
    --bs-link-color: var(--tinta);
    --bs-link-color-rgb: var(--tinta-rgb);
    --bs-link-hover-color: var(--rojo-oscuro);
    --bs-link-hover-color-rgb: var(--rojo-oscuro-rgb);
    --bs-emphasis-color: var(--tinta);
    --bs-secondary-color: var(--tinta-2);
}

/* =====================================================================
   Tema oscuro
   =====================================================================

   Tres bloques y no uno, porque son tres estados:

     :root                          -> claro (arriba)
     @media + :root:not([claro])    -> sin eleccion, manda el sistema operativo
     :root[data-tema="oscuro"]      -> eleccion explicita

   El `:not([data-tema="claro"])` no es adorno: sin el, quien tiene el sistema
   en oscuro y pide claro no consigue nada, porque la consulta de medios sigue
   aplicando y no existe ningun bloque para «claro».

   Los tokens van escritos dos veces a proposito. No hay forma de unir una
   consulta de medios con un selector de atributo, y sin build step no hay quien
   lo haga por nosotros. Los genera un script desde una sola lista, asi que no
   pueden separarse en silencio; si editas uno, edita el otro.

   Fijate en lo que NO esta aqui: ninguna variable `--bs-*`. El puente a
   Bootstrap se escribio como `var(--token)`, asi que voltear estos tokens lo
   voltea entero. Tampoco estan `--carbon` ni `--rojo`: el riel y el tablero del
   PNR siguen siendo oscuros en los dos temas, y el rojo de la marca es el rojo
   de la marca.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        /* `color-scheme` le dice al navegador que pinte en oscuro lo que no
           controlamos: barras de desplazamiento y controles nativos. Con
           eleccion explicita lo pone Bootstrap via `data-bs-theme`; aqui no hay
           atributo, asi que lo ponemos nosotros. */
        color-scheme: dark;

        /* Base. `--carbon` y `--rojo` no aparecen: no se invierten. */
        --tinta:           #E9EDEB;
        --tinta-2:         #AEB6B3;
        --tinta-3:         #8E9693;
        --rojo-oscuro:     #FF8494;
        --papel:           #1A1E1C;
        --papel-2:         #161A18;
        --mesa:            #121513;
        --regla:           #2B302E;
        --regla-suave:     #232725;

        /* La accion se invierte: claro sobre oscuro. */
        --accion:          #E9EDEB;
        --accion-texto:    #121513;
        --accion-hover:    #FFFFFF;

        /* Funcionales: los de tema claro son oscuro-sobre-claro y aqui serian
       ilegibles. Medidos contra su propio fondo: 8.8, 8.5 y 7.5 : 1. */
        --exito:           #7FD3A6;
        --exito-fondo:     #12271D;
        --aviso:           #E0B860;
        --aviso-fondo:     #2A2113;
        --rojo-fondo:      #2A1215;
        --neutro-fondo:    #232725;

        /* Los pares -rgb siguen a su token: es lo que voltea Bootstrap solo. */
        --pastel-ok:          #3E7B5C;
        --pastel-ok-tinta:    #F2FBF6;
        --pastel-aviso:       #8A6A2E;
        --pastel-aviso-tinta: #FEFAF0;
        --pastel-mal:         #8A3A48;
        --pastel-mal-tinta:   #FFDCE1;
        --pastel-neutro:      #2B302E;

        --serie-1: #5C7D8F;
        --serie-2: #47606E;
        --serie-3: #374A54;
        --serie-4: #2A363D;

        --si-claro:        none;
        --si-oscuro:       block;

        --tinta-rgb:       233, 237, 235;
        --rojo-oscuro-rgb: 255, 132, 148;
    }
}

:root[data-tema="oscuro"] {
    /* Base. `--carbon` y `--rojo` no aparecen: no se invierten. */
    --tinta:           #E9EDEB;
    --tinta-2:         #AEB6B3;
    --tinta-3:         #8E9693;
    --rojo-oscuro:     #FF8494;
    --papel:           #1A1E1C;
    --papel-2:         #161A18;
    --mesa:            #121513;
    --regla:           #2B302E;
    --regla-suave:     #232725;

    /* La accion se invierte: claro sobre oscuro. */
    --accion:          #E9EDEB;
    --accion-texto:    #121513;
    --accion-hover:    #FFFFFF;

    /* Funcionales: los de tema claro son oscuro-sobre-claro y aqui serian
       ilegibles. Medidos contra su propio fondo: 8.8, 8.5 y 7.5 : 1. */
    --exito:           #7FD3A6;
    --exito-fondo:     #12271D;
    --aviso:           #E0B860;
    --aviso-fondo:     #2A2113;
    --rojo-fondo:      #2A1215;
    --neutro-fondo:    #232725;

    /* Los pares -rgb siguen a su token: es lo que voltea Bootstrap solo. */
    --pastel-ok:          #3E7B5C;
    --pastel-ok-tinta:    #F2FBF6;
    --pastel-aviso:       #8A6A2E;
    --pastel-aviso-tinta: #FEFAF0;
    --pastel-mal:         #8A3A48;
    --pastel-mal-tinta:   #FFDCE1;
    --pastel-neutro:      #2B302E;

    --serie-1: #5C7D8F;
    --serie-2: #47606E;
    --serie-3: #374A54;
    --serie-4: #2A363D;

    --si-claro:        none;
    --si-oscuro:       block;

    --tinta-rgb:       233, 237, 235;
    --rojo-oscuro-rgb: 255, 132, 148;
}

/* =====================================================================
   Tipografía: tres familias con tres trabajos
   =====================================================================

   **Archivo** para títulos y cifras grandes. Es una grotesca de caja alta y
   ancho estrecho que aguanta el interletraje negativo sin cerrarse, y ese
   apretado es lo que hace que un título se lea como título sin necesidad de
   crecer. Emparenta con el logotipo —que es una grotesca pesada e inclinada—
   pero sólo aparece en tamaños grandes, así que no compite con él: se turnan.

   **Manrope** para el cuerpo y toda la interfaz. Humanista y de formas
   abiertas, que es el contrapeso que pide un logotipo tan dinámico. En 12 y 13
   píxeles —que es donde vive el admin— conserva los ojos abiertos, y de eso
   depende que una tabla de sesenta filas no se vuelva un muro gris.

   **DM Mono** para todo dato: PNR, boleto de 13 dígitos, RFC, UUID, folio,
   importe, fecha. Son mucho texto monoespaciado y una mono mecánica los
   endurece; ésta es de trazo redondo y respira. Al ser monoespaciada, además,
   las cifras quedan tabulares por construcción y se pueden comparar en
   columna.

   ## Las clases de rol y por qué existen

   Había **132 `style="font-size: var(--t-…)"`** repartidos por las plantillas.
   Mientras el tamaño de letra viva en un atributo `style`, ningún cambio de
   escala se puede hacer desde el CSS: hay que abrir las treinta plantillas. Se
   sustituyen por estas clases, que dicen **el papel** del texto y no su
   medida. La próxima vez que cambie la escala será una sola edición aquí.
   ===================================================================== */

body {
    font-family: var(--bs-font-sans-serif);
    font-size: var(--t-cuerpo2);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Los encabezados llevan Archivo por defecto, así que un `<h2>` suelto ya sale
   bien sin acordarse de ninguna clase. Las clases de abajo fijan además la
   medida, que es lo que un encabezado desnudo no sabe. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tar-titulos);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* --- Clases de rol ---------------------------------------------------- */

.tar-titulo {
    font-family: var(--tar-titulos);
    font-size: var(--t-h1);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0;
}

/* Sólo el saludo del tablero. Es la primera línea del día y la única que
   puede permitirse este tamaño; si lo usaran también las pantallas de lista,
   dejaría de significar «estás en la portada». */
.tar-titulo--max { font-size: var(--t-h1-max); line-height: 1.06; }

.tar-titulo-2 {
    font-family: var(--tar-titulos);
    font-size: var(--t-h2);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.tar-titulo-3 {
    font-family: var(--tar-titulos);
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

/* El párrafo que va debajo de un título y explica la pantalla. Se acota a
   58ch: más ancho y la vista pierde el renglón al volver. */
.tar-entrada {
    font-size: var(--t-lead);
    line-height: 1.55;
    color: var(--tinta-2);
    max-width: 58ch;
}

/* Prosa dentro de una tarjeta: un punto menos que la entrada. */
.tar-nota {
    font-size: var(--t-nota);
    line-height: 1.5;
    color: var(--tinta-2);
}

/* Nota al pie, aclaración, letra chica. */
.tar-fina {
    font-size: var(--t-fina);
    line-height: 1.55;
    color: var(--tinta-2);
}

/* Metadato de celda: la segunda línea bajo un nombre, en mono y tenue. */
.tar-meta {
    font-family: var(--tar-mono);
    font-size: var(--t-meta);
    line-height: 1.3;
    color: var(--tinta-3);
}

/* Rótulo de dato: versalitas con interletraje, en mono.
   Es el patrón que el sistema tenía prohibido, y vuelve **acotado**: sólo
   nombra un dato concreto —«Último lote de CMAS», el encabezado de una
   columna, el rótulo de una cifra—, nunca como adorno encima de cada bloque.
   Ésa era la razón de la prohibición y sigue en pie. */
.tar-rotulo {
    font-family: var(--tar-mono);
    font-size: var(--t-rotulo);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinta-3);
    line-height: 1.3;
}

/* La cifra de una tarjeta. En Archivo y no en mono: es un titular, no un dato
   que se compare en columna. */
.tar-cifra-grande {
    font-family: var(--tar-titulos);
    font-size: var(--t-cifra);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
}

.tar-cifra-grande--max { font-size: var(--t-cifra-max); }

p, li {
    max-width: var(--medida);
}

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

/* Códigos: PNR, boletos, RFC, folios. Mono y con cifras tabulares. */
.tar-codigo {
    font-family: var(--tar-mono);
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.01em;
}

/* Importes: alineados a la derecha y tabulares para poder compararlos. */
.tar-importe {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: right;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Superficies: papel sobre mesa, sin sombras
   --------------------------------------------------------------------- */

.card,
.tar-papel {
    background: var(--papel);
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    box-shadow: none;
}

/* Bootstrap trae sombras en varias utilidades; aquí no se usan. */
.shadow, .shadow-sm, .shadow-lg {
    box-shadow: none !important;
}

/* El documento principal de cada pantalla lleva un filo superior de marca:
   es lo único que distingue jerarquía entre superficies. */
.tar-papel--principal {
    border-top: 3px solid var(--rojo);
}

/* ---------------------------------------------------------------------
   El conmutador de tema

   Un cuadro de 34 px con sol y luna superpuestos; sólo se ve el que
   corresponde, y lo decide la paleta con `--si-claro` / `--si-oscuro`. Es un
   enlace, así que hereda el foco de teclado y funciona sin JavaScript.
   --------------------------------------------------------------------- */

.tar-tema {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    background: var(--papel-2);
    color: var(--tinta-2);
    text-decoration: none;
}

.tar-tema:hover {
    color: var(--tinta);
    border-color: var(--tinta-3);
}

.tar-tema__luna { display: var(--si-claro); }
.tar-tema__sol  { display: var(--si-oscuro); }

/* Las tres monturas: barra del portal, pie del riel y pantalla de acceso. */
.tar-navbar__acciones {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.tar-riel__tema {
    padding: .75rem .75rem 0;
}

.tar-acceso-tema {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

/* ---------------------------------------------------------------------
   Acciones
   --------------------------------------------------------------------- */

.btn {
    --bs-btn-border-radius: var(--radio);
    --bs-btn-font-weight: 500;
    padding-inline: 1.25rem;
}

.btn-primary {
    /* El color del texto no lo traía este bloque, así que se quedaba con el
       `#fff` de Bootstrap. En claro no se notaba —blanco sobre carbón— pero en
       oscuro el botón se vuelve claro y el texto blanco desaparecía sobre él.
       Un token de acción sin su tinta no es un token de acción. */
    --bs-btn-color: var(--accion-texto);
    --bs-btn-hover-color: var(--accion-texto);
    --bs-btn-active-color: var(--accion-texto);
    --bs-btn-bg: var(--accion);
    --bs-btn-border-color: var(--accion);
    --bs-btn-hover-bg: var(--accion-hover);
    --bs-btn-hover-border-color: var(--accion-hover);
    --bs-btn-active-bg: var(--accion-hover);
    --bs-btn-disabled-bg: var(--tinta-3);
    --bs-btn-disabled-border-color: var(--tinta-3);
    --bs-btn-disabled-opacity: 1;
}

.btn-outline-primary {
    --bs-btn-color: var(--tinta);
    --bs-btn-border-color: var(--regla);
    --bs-btn-hover-bg: var(--accion);
    --bs-btn-hover-border-color: var(--accion);
    --bs-btn-hover-color: var(--papel);
}

.btn-link {
    --bs-btn-color: var(--tinta-2);
    --bs-btn-hover-color: var(--rojo-oscuro);
    text-decoration: none;
    text-underline-offset: .25em;
}

.btn-link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */

.form-label {
    font-size: var(--t-nota);
    font-weight: 500;
    margin-bottom: .35rem;
}

.form-text {
    color: var(--tinta-2);
    font-size: var(--t-meta);
}

.form-control,
.form-select {
    border-color: var(--regla);
    border-radius: var(--radio);
    color: var(--tinta);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
a:focus-visible {
    border-color: var(--tinta-2);
    box-shadow: 0 0 0 3px rgba(var(--tinta-rgb), .15);
    outline: none;
}

/* Bootstrap repinta el campo enfocado con `--bs-body-bg`, que aquí es el gris
   de la mesa: el único campo que se ensuciaba era justo el que se está
   tecleando. Se le devuelve el papel. */
.form-control:focus,
.form-select:focus {
    background-color: var(--papel);
}

/* Foco de teclado siempre visible, incluso donde Bootstrap lo suaviza. */
:focus-visible {
    outline: 2px solid var(--tinta);
    outline-offset: 2px;
}

.form-check-input:checked {
    background-color: var(--accion);
    border-color: var(--accion);
}

.form-control::placeholder {
    color: var(--tinta-3);
}

/* Campo inválido: aquí sí manda el rojo. El mensaje va junto al campo y no
   en una banda arriba, porque el problema está aquí y no en la pantalla. */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--rojo);
    background-image: none;   /* Bootstrap mete un icono que aquí sobra */
    padding-right: .75rem;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(var(--rojo-rgb), .14);
}

.tar-error:empty { display: none; }

.tar-error {
    color: var(--rojo-oscuro);
    font-size: var(--t-meta);
    margin-top: .3rem;
}

/* Los campos vacíos no deben verse deshabilitados. */
.form-control,
.form-select {
    background-color: var(--papel);
}

/* Las dos opciones de receptor son una decisión, no una lista de casillas:
   se les da superficie para que se lean y se pulsen sin apuntar. */
.tar-opciones {
    display: grid;
    gap: .5rem;
}

.tar-opcion {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .9rem;
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    cursor: pointer;
    font-size: var(--t-nota);
}

.tar-opcion:hover {
    border-color: var(--tinta-3);
}

.tar-opcion:has(input:checked) {
    border-color: var(--tinta);
    box-shadow: inset 0 0 0 1px var(--tinta);
}

.tar-opcion:has(input:focus-visible) {
    outline: 2px solid var(--tinta);
    outline-offset: 2px;
}

.tar-opcion .form-check-input {
    margin: 0;
    flex: none;
}

/* Separa la identificación fiscal del contacto sin poner un rótulo encima:
   la regla ya dice que son dos grupos. */
.tar-separador {
    border: 0;
    border-top: 1px solid var(--regla-suave);
    margin: 1.75rem 0 1.25rem;
    opacity: 1;
}

/* ---------------------------------------------------------------------
   Avisos. El rojo tiene un solo trabajo y éste es uno de ellos.
   --------------------------------------------------------------------- */

.alert {
    border-radius: var(--radio);
    border-width: 1px;
    border-left-width: 3px;
}

.alert-danger {
    --bs-alert-color: var(--rojo-oscuro);
    --bs-alert-bg: var(--rojo-fondo);
    --bs-alert-border-color: var(--rojo);
}

.alert-warning {
    --bs-alert-color: var(--aviso);
    --bs-alert-bg: var(--aviso-fondo);
    --bs-alert-border-color: #E0B860;
}

.alert-success {
    --bs-alert-color: var(--exito);
    --bs-alert-bg: var(--exito-fondo);
    --bs-alert-border-color: #8FC4A9;
}

.alert-info {
    --bs-alert-color: var(--tinta-2);
    --bs-alert-bg: var(--papel);
    --bs-alert-border-color: var(--regla);
    --bs-alert-border-color: var(--tinta-3);
}

/* ---------------------------------------------------------------------
   Estados. Texto legible, no pastillas de color saturado.
   --------------------------------------------------------------------- */

/* Etiquetas de estado.
 *
 * Llevan fondo, pero **teñido, no saturado**: en una tabla de sesenta filas
 * una pastilla de color pleno por renglón compite con los datos y termina
 * volviendo ilegible justo la pantalla que más filas tiene. El tinte da la
 * lectura de un vistazo —verde bien, ámbar en curso, rojo atención— sin que la
 * tabla se convierta en un semáforo.
 *
 * Los pares texto/fondo están medidos: 5.70, 5.37, 7.21, 14.76 y 5.16 : 1.
 * Todos cumplen AA. El gris del estado inactivo usa `--tinta-2` y no
 * `--tinta-3` porque ése se quedaba en 3.98 sobre el tinte. */
.tar-estado {
    display: inline-flex;
    align-items: center;
    font-size: var(--t-meta);
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    padding: .15rem .5rem;
    border-radius: 2px;
    background: var(--neutro-fondo);
    color: var(--tinta-2);
}

.tar-estado--listo    { color: var(--tinta);       background: var(--neutro-fondo); }
.tar-estado--hecho    { color: var(--exito);       background: var(--exito-fondo); }
.tar-estado--proceso  { color: var(--aviso);       background: var(--aviso-fondo); }
.tar-estado--inactivo { color: var(--tinta-2);     background: var(--neutro-fondo); }
.tar-estado--alerta   { color: var(--rojo-oscuro); background: var(--rojo-fondo); }

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--regla-suave);
    margin-bottom: 0;
}

/* El encabezado se separa del contenido con aire, no con un fondo gris: una
   franje de color por tabla convierte cada pantalla en la misma plantilla. */
.table > thead th {
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--tinta-2);
    border-bottom: 1px solid var(--regla);
    background: transparent;
    padding: .8rem 1rem;
}

/* Renglones de ~48 px. Apretados caben más filas en pantalla, pero seguir una
   con la vista de un extremo al otro se vuelve trabajo, y estas tablas se leen
   de izquierda a derecha —boleto, reserva, pasajero, importe— no de un vistazo. */
.table > tbody td {
    padding: .95rem 1rem;
    vertical-align: middle;
}

/* El primer y el último dato se alinean con el borde de la tarjeta: sin esto
   el texto arranca despegado y la tabla parece flotar dentro del papel. */
.table > thead th:first-child,
.table > tbody td:first-child { padding-left: 1.25rem; }

.table > thead th:last-child,
.table > tbody td:last-child { padding-right: 1.25rem; }

/* Un realce apenas perceptible al pasar: en una tabla de sesenta filas es lo
   que evita saltar de renglón a media lectura. */
.table > tbody tr { transition: background-color .1s ease; }
.table > tbody tr:hover { background: var(--mesa); }

/* ---------------------------------------------------------------------
   Marca
   --------------------------------------------------------------------- */

/* El logotipo va como imagen: es una grotesca pesada e inclinada con una
   pluma, y ninguna fuente web lo reproduce. El texto de sección lo acompaña
   separado por una regla vertical en vez de un punto medio. */
.tar-marca {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: var(--tinta);
}

.tar-marca__logo {
    display: block;
    height: 28px;
    width: auto;
}

/* Las dos versiones del logotipo. Van después de la regla de arriba a
   propósito: `display: block` empata en especificidad y ganaría por orden. */
.tar-marca__logo--claro  { display: var(--si-claro); }
.tar-marca__logo--oscuro { display: var(--si-oscuro); }

.tar-marca__seccion {
    font-size: var(--t-nota);
    color: var(--tinta-2);
    padding-left: .7rem;
    border-left: 1px solid var(--regla);
    line-height: 1.1;
}

.navbar {
    background: var(--papel);
    border-bottom: 1px solid var(--regla);
    padding-block: .9rem;
}

footer {
    background: transparent;
    border-top: 1px solid var(--regla);
    color: var(--tinta-2);
    font-size: var(--t-meta);
}

/* ---------------------------------------------------------------------
   Movimiento: sólo el que responde a una acción de la persona.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}