/* ══════════════════════════════════════════════════
   ASG-BRS — UI System v1.0
   ══════════════════════════════════════════════════ */

:root {
    --at-sidebar-width: 260px;
    --at-navbar-height: 56px;
    --at-sidebar-bg: #0d1b2a;
    --at-sidebar-text: #8a9ab5;
    --at-sidebar-text-active: #ffffff;
    --at-sidebar-accent: #3b82f6;
    --at-sidebar-hover: rgba(255,255,255,.06);
    /* Rotulos de seccion y version del pie. Se aclararon de #4a5568: sobre el navy
       ya estaban en 2.37:1 y al tenir el fondo con una marca clara bajaban a 1.79.
       Este tono los deja entre 3.87 y 4.88 sin alcanzar el de los enlaces, que
       tienen que seguir leyendose como lo primero del menu. */
    --at-sidebar-section: #7d8aa3;
    --at-body-bg: #f0f4f8;
    --at-card-bg: #ffffff;
    --at-border: #e2e8f0;
    --at-text-primary: #1a202c;
    --at-text-muted: #718096;
    --at-transition: 0.22s cubic-bezier(.4,0,.2,1);
    /* Curva de salida fuerte para entradas y feedback: arranca rapido y frena
       largo, por lo que a igual duracion se percibe mas veloz que la de arriba. */
    --at-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--at-navbar-height) + 1rem);
}

/* Evita desbordamiento horizontal de media embebida */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

body {
    background: var(--at-body-bg);
    color: var(--at-text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: .875rem;
    margin: 0;
}

/* ══════════════════════════════════════════════════
   Auth — Login Experience v2.0 (split-panel)
   Panel de marca oscuro + panel de formulario claro,
   alineado con el lenguaje visual del .ops-hero.
   ══════════════════════════════════════════════════ */
.auth-body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    /* Navy profundo con un único foco de luz detrás de la tarjeta, un leve halo de
       marca inferior y una retícula de puntos tenue: aporta textura y profundidad
       sin caer en el degradado genérico de dos manchas. */
    /* Fondo claro: el navy casi negro dominaba la pantalla entera. Se conserva
       la misma estructura —foco de luz de marca, halo inferior y reticula de
       puntos— invertida a tinta oscura sobre base clara. */
    /* La base ya no es un gris fijo: la calcula el servidor (App\Support\BrandPalette)
       tiñendo un claro neutro con la mezcla de los dos colores configurados, de modo
       que el fondo siga a la marca de cada instalacion. Los dos focos van uno por
       color —primario detras de la tarjeta, secundario en el halo inferior—, con lo
       que la pantalla completa se lee como un degradado del par elegido. */
    background-color: rgb(var(--auth-surface-rgb, 233, 239, 247));
    background-image:
        radial-gradient(ellipse 74% 58% at 50% 40%, rgba(var(--bs-primary-rgb), .16), transparent 62%),
        radial-gradient(circle at 50% 118%, rgba(var(--at-secondary-rgb, 21, 164, 217), .14), transparent 54%),
        radial-gradient(rgba(15, 39, 72, .07) 1px, transparent 1px);
    background-size: auto, auto, 24px 24px;
}

.auth-shell {
    width: 100%;
    max-width: 940px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    border-radius: 28px;
    overflow: hidden;
    background: var(--at-card-bg, #fff);
    /* Sombra contenida: sobre fondo claro la anterior (0 40px 90px al 55%)
       ensuciaba media pantalla. */
    box-shadow: 0 24px 56px rgba(15, 39, 72, .16), 0 2px 8px rgba(15, 39, 72, .06);
    /* Por encima de la banda fija del pie, que va en z-index 0. */
    position: relative;
    z-index: 1;
    /* Entrada al cargar: la tarjeta aterriza en vez de aparecer de golpe.
       Solo transform y opacity, y el estado inicial vive en @starting-style,
       de modo que un navegador que no lo soporte pinta el estado final. */
    transition: opacity 400ms var(--at-ease-out), transform 400ms var(--at-ease-out);
}

@starting-style {
    .auth-shell {
        opacity: 0;
        transform: translateY(10px) scale(.99);
    }
}

/* ── Panel de marca ──────────────────────────────────── */
.auth-aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.25rem;
    padding: 3rem 2.25rem;
    color: #fff;
    /* Panel de marca en tono de marca, no en navy casi negro. La capa de marca
       va a opacidad media sobre una base profunda: con un color de marca claro
       o muy saturado (el verde #22BF0D de esta instalacion lo es), una capa mas
       opaca deja el texto blanco por debajo de 3:1. Estas proporciones mantienen
       el blanco sobre 4.5:1 en los tres tramos del degradado.
       El degradado va ahora del primario al secundario configurados; el tercer
       tramo era un azul fijo que ignoraba el color elegido. Como el par lo elige
       cada instalacion, los tonos que entran aqui vienen ya rebajados por
       App\Support\BrandPalette hasta garantizar ese 4.5:1: con marcas normales no
       cambia nada, y con una muy clara evita que el texto blanco se pierda. */
    background:
        linear-gradient(160deg,
            rgba(var(--auth-aside-primary-rgb, var(--bs-primary-rgb)), .58) 0%,
            rgba(var(--auth-aside-primary-rgb, var(--bs-primary-rgb)), .40) 50%,
            rgba(var(--auth-aside-secondary-rgb, 56, 152, 214), .42) 100%),
        linear-gradient(160deg, #16324e 0%, #1b4068 55%, #21518a 100%);
}

/* Capa decorativa a cubierta completa: halos de marca + retícula tenue tipo radar
   que evoca el carácter operativo del sistema sin restar legibilidad. */
.auth-aside__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 80% 12%, rgba(125, 211, 252, .20), transparent 40%),
        radial-gradient(circle at 10% 92%, rgba(var(--bs-primary-rgb), .32), transparent 44%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 28px);
}

/* ── Banda transportadora del pie de pagina ──
   Motivo de dominio: cruza el ancho completo por debajo de la tarjeta. Es
   mobiliario de fondo, asi que vive a baja opacidad y en z-index 0.
   overflow:hidden recorta la franja de maletas, que sobresale por los lados. */
.auth-belt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: 94px;
    overflow: hidden;
    /* Tinta oscura: sobre el fondo claro el blanco seria invisible. */
    color: #14304d;
    opacity: .26;
    pointer-events: none;
    /* Aparece por opacidad en 1 s, ya asentada la tarjeta. */
    transition: opacity 1000ms var(--at-ease-out) 200ms;
}

@starting-style {
    .auth-belt { opacity: 0; }
}

/* Banda y rodillos: el soporte, quieto. */
.auth-belt__rail {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
}

/* Capa en movimiento. */
.auth-belt__bags {
    position: absolute;
    left: -880px;
    bottom: 30px;
    /* Sobresale un azulejo por la izquierda y dos por la derecha: al desplazarse
       un azulejo completo nunca queda un hueco en los bordes. */
    width: calc(100% + 2640px);
    height: 64px;
    /* Se desplaza exactamente un paso de patron y vuelve al origen: como el azulejo
       lleva los cuatro estilos, al volver al origen cae cada uno donde estaba el
       suyo y el salto es invisible. Con cuatro siluetas el azulejo mide 880px, asi
       que el ciclo sube a 32 s para conservar los ~28 px/s de antes: presencia sin
       robar atencion mientras se escribe la contrasena.
       Va en animation y no en transition a proposito: una animacion CSS corre
       fuera del hilo principal y no pierde cuadros mientras la pagina carga. */
    animation: auth-belt-run 32s linear infinite;
}

.auth-belt__bags svg {
    display: block;
    width: 100%;
    height: 64px;
}

@keyframes auth-belt-run {
    from { transform: translateX(0); }
    to   { transform: translateX(-880px); }
}

.auth-aside__top,
.auth-aside__body,
.auth-aside__foot {
    position: relative;
    z-index: 1;
}

.auth-aside__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
}

/* Logo destacado y centrado (anula el centrado/margen del módulo de branding). */
.auth-aside .auth-logo {
    width: 4.25rem;
    height: 4.25rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 16px 32px rgba(4, 12, 28, .42);
    flex-shrink: 0;
}

.auth-logo-fallback { font-size: 2.1rem; color: #fff; }

.auth-aside__brand {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.auth-aside__body { width: 100%; }

.auth-aside__tagline {
    font-size: clamp(1.45rem, 2.4vw, 1.95rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0 auto;
    max-width: 18ch;
}

.auth-aside__foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .78rem;
    /* Texto pequeno sobre el panel: necesita mas peso que el 60 % original
       para acercarse a 4.5:1. */
    color: rgba(255, 255, 255, .9);
}

/* ── Panel de formulario ─────────────────────────────── */
.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: var(--at-card-bg, #fff);
}

.auth-main__inner {
    width: 100%;
    max-width: 350px;
    /* Resuelve despues de que la tarjeta aterriza: marca primero, formulario
       despues. Sin transform propio para no encadenar dos desplazamientos. */
    transition: opacity 260ms var(--at-ease-out) 120ms;
}

@starting-style {
    .auth-main__inner { opacity: 0; }
}

.auth-main__head { margin-bottom: 1.5rem; }

.auth-main__title {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--at-text-primary, #1a202c);
    margin: 0 0 .25rem;
}

.auth-main__subtitle {
    font-size: .88rem;
    color: var(--at-text-muted, #718096);
    margin: 0;
}

.auth-alert {
    border: none;
    border-radius: 12px;
    font-size: .85rem;
    padding: .7rem .85rem;
    margin-bottom: 1.25rem;
}

.auth-alert i { font-size: 1rem; line-height: 1.4; }

/* El POST recarga la pagina entera, asi que el error ya esta presente al pintar.
   Entrar al final de la secuencia es lo que lo devuelve a ser una senal. */
.auth-alert {
    transition: opacity 220ms var(--at-ease-out) 300ms,
                transform 220ms var(--at-ease-out) 300ms;
}

@starting-style {
    .auth-alert {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.auth-field { margin-bottom: 1.1rem; }

.auth-field .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--at-text-primary, #1a202c);
    margin-bottom: .4rem;
}

.auth-field__labelrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.auth-caps {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    color: #b45309;
    /* Aparece mientras el usuario escribe: con visibility en vez de [hidden]
       el aviso se atenua en su sitio y no da un tiron dentro del labelrow.
       visibility a 0s con retardo lo saca del arbol de accesibilidad al salir. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 150ms var(--at-ease-out),
                transform 150ms var(--at-ease-out),
                visibility 0s linear 150ms;
}

.auth-caps.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s, 0s, 0s;
}

/* Input-group unificado: un solo borde con anillo de foco de marca. */
.auth-input {
    border: 1px solid var(--at-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    /* 180ms con la curva fuerte: al tabular entre campos debe sentirse
       instantaneo, no suave. */
    transition: border-color 180ms var(--at-ease-out), box-shadow 180ms var(--at-ease-out);
    background: var(--at-card-bg, #fff);
}

.auth-input:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15);
}

.auth-input.is-invalid {
    border-color: #dc2626;
}

.auth-input.is-invalid:focus-within {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .15);
}

.auth-input .input-group-text {
    background: transparent;
    border: 0;
    color: var(--at-text-muted, #718096);
    padding-left: .9rem;
    padding-right: .35rem;
}

.auth-input .form-control {
    border: 0;
    box-shadow: none !important;
    padding: .62rem .5rem;
    background: transparent;
    color: var(--at-text-primary, #1a202c);
}

.auth-input .form-control::placeholder { color: #aab4c2; }
.auth-input .form-control.is-invalid { background-image: none; }

.auth-toggle {
    border: 0;
    background: transparent;
    color: var(--at-text-muted, #718096);
    padding: 0 .9rem;
    display: inline-flex;
    align-items: center;
    transition: color var(--at-transition, .2s ease);
}

.auth-toggle:hover,
.auth-toggle:focus-visible { color: var(--bs-primary); }

.auth-field__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.4rem;
}

.auth-field__row .form-check-label {
    font-size: .85rem;
    color: var(--at-text-primary, #1a202c);
    cursor: pointer;
}

.auth-submit {
    padding: .72rem 1rem;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 14px 26px rgba(var(--bs-primary-rgb), .26);
    /* Grid de una celda: "Iniciar sesion" y "Verificando..." se apilan, de modo
       que el ancho del boton lo fija la etiqueta mas larga y el cambio de estado
       no produce un salto de layout justo cuando se espera a la red. */
    display: grid;
    justify-items: center;
}

.auth-submit__label,
.auth-submit__loading {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: opacity 150ms var(--at-ease-out), visibility 0s;
}

.auth-submit__loading,
.auth-submit.is-loading .auth-submit__label {
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms var(--at-ease-out), visibility 0s linear 150ms;
}

.auth-submit.is-loading .auth-submit__loading {
    opacity: 1;
    visibility: visible;
    /* El retardo de visibility es solo para SALIR (espera a que el fade acabe).
       Al entrar debe ser 0s, o el spinner se revelaria recien terminado su
       propio fundido y apareceria de golpe. */
    transition-delay: 0s, 0s;
}

.auth-main__foot {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: .74rem;
    color: var(--at-text-muted, #94a3b8);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 991.98px) {
    .auth-shell {
        grid-template-columns: 1fr;
        max-width: 440px;
    }

    /* En móvil el panel de marca queda como cabecera compacta y centrada. */
    .auth-aside {
        gap: .75rem;
        padding: 2rem 1.5rem;
    }

    .auth-aside .auth-logo {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 16px;
    }

    .auth-logo-fallback { font-size: 1.75rem; }
    .auth-aside__tagline { font-size: 1.25rem; max-width: none; }
    .auth-aside__foot { display: none; }

    /* Con la tarjeta en una sola columna queda menos fondo a la vista: la banda
       se atenua para no pesar mas que el contenido. */
    .auth-belt { opacity: .14; }
}

@media (max-width: 575.98px) {
    .auth-body { padding: 0; }

    .auth-shell {
        border-radius: 0;
        min-height: 100dvh;
        max-width: none;
        box-shadow: none;
    }

    .auth-main { padding: 1.75rem 1.35rem 2.25rem; }
    .auth-aside { padding: 1.6rem 1.35rem; }

    /* En telefono la tarjeta ocupa la pantalla completa y taparia la banda por
       entero: se retira para no dejar una animacion invisible consumiendo
       trabajo de composicion en un dispositivo de rampa. */
    .auth-belt { display: none; }
}

/* ── Dark theme ──────────────────────────────────────── */
/* El modo oscuro conserva el fondo profundo original: aqui el navy no compite
   con nada, es el tema. Sin espacio entre selectores porque .auth-body vive en
   el propio <body>, junto a .at-theme-dark. */
body.at-theme-dark.auth-body {
    background-color: rgb(var(--auth-surface-dark-rgb, 9, 18, 33));
    background-image:
        radial-gradient(ellipse 72% 56% at 50% 42%, rgba(var(--bs-primary-rgb), .14), transparent 60%),
        radial-gradient(circle at 50% 116%, rgba(var(--at-secondary-rgb, 21, 164, 217), .12), transparent 52%),
        radial-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
}

/* Sobre fondo oscuro la banda vuelve a tinta blanca. */
body.at-theme-dark .auth-belt {
    color: #fff;
    opacity: .2;
}

body.at-theme-dark .auth-shell {
    background: #0f172a;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}

body.at-theme-dark .auth-main { background: #111827; }
body.at-theme-dark .auth-main__title { color: #f8fafc; }
body.at-theme-dark .auth-main__subtitle,
body.at-theme-dark .auth-main__foot { color: #94a3b8; }
body.at-theme-dark .auth-field .form-label,
body.at-theme-dark .auth-field__row .form-check-label { color: #e5edf7; }

body.at-theme-dark .auth-input {
    background: #0f172a;
    border-color: rgba(148, 163, 184, .26);
}

body.at-theme-dark .auth-input .form-control {
    color: #e5edf7;
    background: transparent;
}

body.at-theme-dark .auth-input .form-control::placeholder { color: #64748b; }

/* El ambar #b45309 sobre el panel oscuro no alcanza contraste legible; en dark
   el aviso sube a un tono claro sin dejar de leerse como advertencia. */
body.at-theme-dark .auth-caps { color: #fbbf24; }

/* ── Auth: degradacion para reduccion de movimiento ──
   Tres capas, en orden de autoridad:

   1. Por omision (at-motion-system) manda la preferencia del sistema operativo.
   2. at-motion-reduced la fuerza a reducida siempre, aunque el equipo no la pida:
      pensado para terminales de rampa con hardware limitado.
   3. at-motion-full la ignora deliberadamente. Es una decision explicita del
      administrador desde el modulo de configuracion, no un valor por omision, y
      existe porque en un parque de equipos gestionado los efectos suelen estar
      apagados por politica o rendimiento y no por necesidad de la persona.

   El bloque global (seccion 4a) deja toda transicion en .01ms; en la capa 3 hay
   que volver a declarar duraciones porque un comodin con !important solo se vence
   por especificidad. */

/* Capa 1 y 2: se conserva la opacidad y se retira el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    body:not(.at-motion-full) .auth-shell,
    body:not(.at-motion-full) .auth-alert,
    body:not(.at-motion-full) .auth-caps {
        transform: none !important;
    }

    /* La banda deja de correr: el movimiento perpetuo es justo lo que esta
       preferencia pide retirar. El motivo se conserva, quieto. */
    body:not(.at-motion-full) .auth-belt__bags {
        animation: none !important;
        transform: none !important;
    }

    body:not(.at-motion-full) .auth-shell { transition: opacity 200ms linear !important; }
    body:not(.at-motion-full) .auth-main__inner { transition: opacity 200ms linear 80ms !important; }
    body:not(.at-motion-full) .auth-alert { transition: opacity 200ms linear 160ms !important; }
    /* El fundido de entrada de la banda se conserva: es aparicion, no movimiento. */
    body:not(.at-motion-full) .auth-belt { transition: opacity 400ms linear 120ms !important; }

    /* El estado inicial tambien se neutraliza: sin transicion de transform,
       dejarlo pintaria un unico frame desplazado antes de saltar. */
    @starting-style {
        body:not(.at-motion-full) .auth-shell,
        body:not(.at-motion-full) .auth-alert {
            transform: none;
        }
    }

    /* Capa 3: la instalacion pidio movimiento completo de forma explicita. Se
       redeclaran las duraciones para vencer al comodin global de la seccion 4a. */
    body.at-motion-full .auth-shell {
        transition: opacity 400ms var(--at-ease-out), transform 400ms var(--at-ease-out) !important;
    }

    body.at-motion-full .auth-main__inner {
        transition: opacity 260ms var(--at-ease-out) 120ms !important;
    }

    body.at-motion-full .auth-alert {
        transition: opacity 220ms var(--at-ease-out) 300ms,
                    transform 220ms var(--at-ease-out) 300ms !important;
    }

    body.at-motion-full .auth-belt {
        transition: opacity 1000ms var(--at-ease-out) 200ms !important;
    }

    body.at-motion-full .auth-belt__bags {
        animation: auth-belt-run 32s linear infinite !important;
    }

    body.at-motion-full .auth-caps,
    body.at-motion-full .auth-submit__label,
    body.at-motion-full .auth-submit__loading {
        transition-duration: 150ms !important;
    }
}

/* Capa 2, fuera de la media query: la configuracion fuerza el modo reducido
   aunque el equipo no lo pida. */
body.at-motion-reduced .auth-shell,
body.at-motion-reduced .auth-alert,
body.at-motion-reduced .auth-caps,
body.at-motion-reduced .auth-belt__bags {
    transform: none !important;
}

body.at-motion-reduced .auth-belt__bags {
    animation: none !important;
}

body.at-motion-reduced .auth-shell { transition: opacity 200ms linear !important; }
body.at-motion-reduced .auth-main__inner { transition: opacity 200ms linear 80ms !important; }
body.at-motion-reduced .auth-alert { transition: opacity 200ms linear 160ms !important; }
body.at-motion-reduced .auth-belt { transition: opacity 400ms linear 120ms !important; }

@starting-style {
    body.at-motion-reduced .auth-shell,
    body.at-motion-reduced .auth-alert {
        transform: none;
    }
}

/* ── Sidebar ───────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--at-sidebar-width);
    /* dvh cubre la ventana real en Safari iOS sin reservar espacio para barras de chrome */
    height: 100dvh;
    /* Respeta la safe area en notch y esquinas redondeadas de iOS */
    padding-left: env(safe-area-inset-left, 0px);
    background: var(--at-sidebar-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1040;
    transition: transform var(--at-transition);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .3px;
}

.sidebar-brand-icon { font-size: 1.35rem; color: var(--at-sidebar-accent); }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.sidebar-user-avatar {
    width: 34px; height: 34px;
    /* Relleno opaco ajustado: la inicial va en blanco encima, y el color de marca
       crudo puede ser demasiado claro para sostenerla. */
    background: rgb(var(--at-accent-solid-rgb, 59, 130, 246));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
}

.sidebar-user-info { overflow: hidden; }
.sidebar-user-name { font-size: .8rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: .7rem; color: var(--at-sidebar-text); }

.sidebar-nav { list-style: none; padding: .5rem 0; margin: 0; flex: 1; }

.sidebar-section-title {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--at-sidebar-section);
    padding: .9rem 1.125rem .3rem;
    pointer-events: none;
}

.sidebar-item { position: relative; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .525rem 1.125rem;
    color: var(--at-sidebar-text);
    text-decoration: none;
    font-size: .835rem;
    transition: background var(--at-transition), color var(--at-transition);
    border-left: 3px solid transparent;
}

.sidebar-link i { font-size: .95rem; flex-shrink: 0; width: 16px; text-align: center; }

.sidebar-link:hover {
    color: var(--at-sidebar-text-active);
    background: var(--at-sidebar-hover);
}

.sidebar-item.active .sidebar-link {
    color: var(--at-sidebar-text-active);
    background: rgba(var(--bs-primary-rgb), .16);
    border-left-color: var(--at-sidebar-accent);
}

.sidebar-footer {
    padding: .65rem 1.125rem;
    border-top: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}

.sidebar-version { font-size: .68rem; color: var(--at-sidebar-section); }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1039;
}

/* ── Main Wrapper ──────────────────────────────────── */
.main-wrapper {
    margin-left: var(--at-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--at-transition);
}

/* ── Navbar ────────────────────────────────────────── */
.at-navbar {
    height: var(--at-navbar-height);
    background: var(--at-card-bg);
    border-bottom: 1px solid var(--at-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    gap: 1rem;
    box-shadow: 0 1px 0 var(--at-border);
}

.at-navbar-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    /* Mismo caso que el avatar del menu: texto blanco sobre relleno de marca. */
    background: rgb(var(--at-accent-solid-rgb, 59, 130, 246));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
}

/* ── Page ──────────────────────────────────────────── */
.main-content { flex: 1; }

/* La ruta va sobre el fondo, no en su propia franja: era la segunda linea del
   corte. No es sticky, asi que aqui si puede ser transparente del todo. */
.breadcrumb-wrapper {
    background: transparent;
    border-bottom: none;
    padding: .55rem 1.5rem;
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--at-text-muted); }
.breadcrumb-item a { color: var(--at-sidebar-accent); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

.page-header {
    padding: 1.125rem 1.5rem .75rem;
    background: var(--at-card-bg);
    border-bottom: 1px solid var(--at-border);
    margin-bottom: 1.25rem;
}

.page-title { font-size: 1.3rem; font-weight: 700; margin: 0; color: var(--at-text-primary); }
.page-subtitle { font-size: .8rem; margin-top: .2rem; }
.page-body { padding: 0 1.5rem 1.5rem; }

/* ── Cards ─────────────────────────────────────────── */
.card {
    border: 1px solid var(--at-border);
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    background: var(--at-card-bg);
}

.card-header {
    background: var(--at-card-bg);
    border-bottom: 1px solid var(--at-border);
    padding: .8rem 1.125rem;
    font-weight: 600;
    font-size: .855rem;
}

/* ── Stat Cards ────────────────────────────────────── */
.stat-card {
    background: var(--at-card-bg);
    border: 1px solid var(--at-border);
    border-radius: .5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: .875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow var(--at-transition), transform var(--at-transition);
}

.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }

.stat-card-icon {
    width: 44px; height: 44px;
    border-radius: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.stat-card-icon.blue   { background: #dbeafe; color: #2563eb; }
.stat-card-icon.green  { background: #d1fae5; color: #059669; }
.stat-card-icon.amber  { background: #fef3c7; color: #d97706; }
.stat-card-icon.red    { background: #fee2e2; color: #dc2626; }
.stat-card-icon.purple { background: #ede9fe; color: #7c3aed; }

.stat-card-value { font-size: 1.65rem; font-weight: 800; line-height: 1; color: var(--at-text-primary); }
.stat-card-label { font-size: .73rem; color: var(--at-text-muted); margin-top: .2rem; }

/* ── Tables ────────────────────────────────────────── */
.table { font-size: .835rem; }

.table th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--at-text-muted);
    border-bottom-width: 1px;
    white-space: nowrap;
    padding: .65rem .875rem;
}

.table td { padding: .65rem .875rem; vertical-align: middle; }

/* ── Badge Estado ──────────────────────────────────── */
.badge-estado {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .3px;
    padding: .28em .6em;
    border-radius: .3rem;
    text-transform: uppercase;
}

/* ── Timeline ──────────────────────────────────────── */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: '';
    position: absolute;
    left: .7rem;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--at-border);
}

.timeline-item { position: relative; margin-bottom: 1.25rem; }

.timeline-marker {
    position: absolute;
    left: -1.75rem;
    top: .1rem;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
}

.timeline-content {
    background: var(--at-card-bg);
    border: 1px solid var(--at-border);
    border-radius: .4rem;
    padding: .6rem .875rem;
}

/* ── Footer ────────────────────────────────────────── */
/* El pie se apoya en el fondo de la pagina, no lo interrumpe: abajo es donde el
   tono de marca llega pleno, y una franja blanca ahi cortaba el degradado igual
   que lo hacia la barra superior antes del velo.
   Su texto baja de tono por lo mismo que el subtitulo de pagina: en letra chica
   el gris anterior daba 2.7:1 sobre la superficie tenida -y solo 4.02 sobre el
   blanco que tenia antes, o sea que ya estaba corto-. */
.at-footer {
    background: transparent;
    border-top: none;
    padding: .65rem 1.5rem;
    font-size: .75rem;
    color: #4e5766;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(calc(-1 * var(--at-sidebar-width))); }
    .sidebar.show { transform: translateX(0); }
    .sidebar-overlay.show { display: block; }
    .main-wrapper { margin-left: 0; }
    .page-body { padding: 0 1rem 1rem; }
    .page-header { padding: 1rem; }
    .breadcrumb-wrapper { padding: .5rem 1rem; }
    .at-navbar { padding: 0 1rem; }
}

/* ══════════════════════════════════════════════════
   ASG-BRS — Dashboard Experience v2.0
   ══════════════════════════════════════════════════ */

:root {
    --at-ink-950: #09111f;
    --at-ink-900: #0f1b31;
    --at-ink-800: #172742;
    --at-surface-strong: #f7faff;
    --at-surface-soft: rgba(255,255,255,.72);
    --at-primary-500: #2d6cdf;
    --at-primary-600: #1f5bcc;
    --at-sky-500: #15a4d9;
    --at-emerald-500: #18a773;
    --at-amber-500: #f59e0b;
    --at-ruby-500: #df445c;
    --at-indigo-500: #5865f2;
    --at-steel-500: #64748b;
}

/* El mismo fondo del login, con la misma receta: base calculada por
   App\Support\BrandPalette tinendo un claro neutro con la mezcla de los dos
   colores configurados, un foco de primario detras del contenido y un halo de
   secundario abajo. Antes eran tres grises fijos y dos halos del azul por
   omision, que ignoraban la marca.
   Sin la reticula de puntos que si lleva el login: alli la pantalla esta casi
   vacia y la textura se agradece, pero aqui el fondo convive con tablas densas
   y la trama competia con ellas.
   La primera capa es un velo blanco que arranca opaco y se disuelve: arriba
   viven la barra superior y la ruta de navegacion, ambas blancas, y sin el velo
   la superficie tenida empezaba de golpe justo debajo. Asi el blanco del navbar
   se prolonga y entrega el color en vez de cortarlo.
   El blanco se sostiene los primeros 240 px -barra, ruta y encabezado de
   pagina- y baja en dos tramos, no en uno: con una sola parada la curva ya
   tenia color a la altura del titulo y el corte seguia viendose contra la
   barra. El tono pleno queda para el pie.
   Las tres capas van fijas al viewport: una pagina larga se desplaza sobre el
   fondo en vez de arrastrarlo, que es como se ve la pantalla de acceso. */
body.at-shell {
    background-color: rgb(var(--at-page-surface-rgb, 238, 244, 251));
    background-image:
        linear-gradient(180deg, #fff 0, #fff 240px, rgba(255, 255, 255, .55) 46vh, rgba(255, 255, 255, 0) 78vh),
        radial-gradient(ellipse 74% 58% at 50% 40%, rgba(var(--bs-primary-rgb), .16), transparent 62%),
        radial-gradient(circle at 50% 118%, rgba(var(--at-secondary-rgb, 21, 164, 217), .14), transparent 54%);
    background-attachment: fixed;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
}

/* La barra se apoya en el fondo como el pie: sin borde ni sombra, que eran las
   dos lineas que dibujaban el corte contra el velo blanco.
   El relleno traslucido se conserva a proposito. Sobre el velo -que va fijo al
   viewport, o sea siempre blanco detras de la barra- el 82 % de blanco da blanco
   exacto, asi que en reposo la barra y el fondo son el mismo color. Lo que ese
   relleno resuelve es el desplazamiento: la barra es sticky y por debajo pasan
   tarjetas, incluida la oscura del encabezado; con fondo transparente el texto
   de la barra quedaria sobre lo que sea que pase por ahi. */
.at-navbar {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(18px);
    border-bottom: none;
    box-shadow: none;
}

.page-header {
    background: transparent;
    border-bottom: none;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}

.page-title {
    font-size: 1.6rem;
    letter-spacing: -.04em;
}

.page-subtitle {
    max-width: 72ch;
    /* Unico texto que se apoya directo en el fondo de la pagina: el encabezado
       es transparente en tema claro. Al tenir ese fondo con la marca, el gris
       anterior (#64748b) caia a 3.2-3.8:1 segun el color; este tono aguanta
       4.95:1 con la superficie mas oscura que el tinte puede dar, y 6.59 sobre
       el fondo sin tenir. */
    color: #4e5766 !important;
}

.card,
.ops-section-card,
.ops-alert-card,
.dashboard-kpi-card,
.ops-flight-card,
.ops-panel-card,
.ops-flow-card {
    box-shadow: 0 20px 45px rgba(15, 23, 42, .08);
}

.ops-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, .9fr);
    gap: 1.2rem;
    padding: 1.4rem;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(var(--at-accent-solid-rgb, 56, 189, 248), .18), transparent 26%),
        radial-gradient(circle at left bottom, rgba(var(--at-accent-solid-rgb, 45, 108, 223), .22), transparent 24%),
        linear-gradient(135deg,
            rgb(var(--at-hero-top-rgb, 9, 17, 31)) 0%,
            rgb(var(--at-hero-mid-rgb, 15, 27, 49)) 56%,
            rgb(var(--at-hero-bottom-rgb, 23, 54, 92)) 100%);
    color: #fff;
}

.ops-hero::after {
    content: '';
    position: absolute;
    inset: auto -10% -38% auto;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 62%);
    pointer-events: none;
}

.ops-hero__content,
.ops-hero__panel {
    position: relative;
    z-index: 1;
}

.ops-eyebrow,
.ops-section-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ops-eyebrow { color: rgba(255,255,255,.72); }

.ops-hero__title {
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.05em;
    max-width: 14ch;
    margin: .75rem 0;
}

.ops-hero__text {
    max-width: 68ch;
    color: rgba(255,255,255,.76);
    line-height: 1.7;
    margin-bottom: 1.1rem;
}

.ops-hero__meta,
.ops-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.ops-hero__actions { margin-top: 1rem; }

.ops-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    color: #f8fbff;
    font-size: .8rem;
    font-weight: 600;
}

.ops-pill--live {
    background: rgba(37, 99, 235, .22);
    border-color: rgba(147, 197, 253, .24);
}

.ops-hero .btn-primary {
    background: linear-gradient(135deg, #3d82ff, #2563eb);
    border-color: transparent;
    box-shadow: 0 16px 28px rgba(37,99,235,.28);
}

.ops-hero .btn-outline-light {
    border-color: rgba(255,255,255,.22);
    color: #fff;
}

.ops-hero .btn-outline-light:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.30);
    color: #fff;
}

.ops-hero__panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ops-panel-card,
.ops-panel-kpi {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
}

.ops-panel-card { padding: 1.2rem; }
.ops-panel-card__label {
    color: rgba(255,255,255,.62);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    font-weight: 700;
}
.ops-panel-card__value {
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
    margin: .6rem 0 .35rem;
    letter-spacing: -.06em;
}
.ops-panel-card__hint { color: rgba(255,255,255,.72); font-size: .82rem; }

.ops-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.ops-panel-kpi {
    padding: 1rem;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ops-panel-kpi span {
    color: rgba(255,255,255,.65);
    font-size: .78rem;
}

.ops-panel-kpi strong {
    font-size: 1.5rem;
    font-weight: 800;
}

.ops-alert-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.ops-alert-card {
    display: flex;
    align-items: center;
    gap: .95rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(226, 232, 240, .92);
    color: var(--at-ink-900);
    transition: transform .22s ease, box-shadow .22s ease;
}

.ops-alert-card:hover { transform: translateY(-2px); }
.ops-alert-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}
.ops-alert-card__title { font-weight: 800; margin-bottom: .15rem; }
.ops-alert-card__text { color: #5b677b; font-size: .84rem; }
.ops-alert-card__arrow { margin-left: auto; color: #94a3b8; }
.ops-alert-card--danger .ops-alert-card__icon { background: rgba(223,68,92,.12); color: var(--at-ruby-500); }
.ops-alert-card--warning .ops-alert-card__icon { background: rgba(245,158,11,.14); color: var(--at-amber-500); }

.dashboard-kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(226,232,240,.92);
    min-height: 120px;
}

.dashboard-kpi-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.dashboard-kpi-card__content span,
.dashboard-kpi-card__content small {
    display: block;
}

.dashboard-kpi-card__content span {
    color: #6b7280;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
}

.dashboard-kpi-card__content strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -.05em;
    margin: .35rem 0;
}

.dashboard-kpi-card__content small { color: #64748b; }
.dashboard-kpi-card--blue .dashboard-kpi-card__icon { background: rgba(45,108,223,.12); color: var(--at-primary-500); }
.dashboard-kpi-card--emerald .dashboard-kpi-card__icon { background: rgba(24,167,115,.12); color: var(--at-emerald-500); }
.dashboard-kpi-card--amber .dashboard-kpi-card__icon { background: rgba(245,158,11,.14); color: var(--at-amber-500); }
.dashboard-kpi-card--ruby .dashboard-kpi-card__icon { background: rgba(223,68,92,.12); color: var(--at-ruby-500); }

.ops-section-card {
    height: 100%;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 28px;
    padding: 1.2rem;
    backdrop-filter: blur(14px);
}

.ops-section-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ops-section-card__eyebrow { color: #6b7280; }
.ops-section-card__title {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--at-ink-900);
}

.ops-flight-grid,
.ops-flow-grid {
    display: grid;
    gap: 1rem;
}

.ops-flight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ops-flow-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.ops-flight-card {
    padding: 1.05rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.88));
    border: 1px solid rgba(226,232,240,.92);
}

.ops-flight-card__top,
.ops-radar-row__head,
.ops-activity-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.ops-flight-card__code {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.ops-flight-card__route { color: #64748b; font-size: .85rem; }
.ops-flight-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin: .9rem 0 1rem;
    color: #5b677b;
    font-size: .82rem;
}
.ops-flight-card__meta span,
.ops-activity-item__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.ops-flight-card__link {
    color: var(--at-primary-600);
    font-weight: 700;
    text-decoration: none;
}
.ops-flight-card--warning { border-color: rgba(245,158,11,.28); }
.ops-flight-card--success { border-color: rgba(24,167,115,.25); }
.ops-flight-card--danger { border-color: rgba(223,68,92,.24); }

.ops-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Separa el icono del rotulo en las pastillas que lo llevan. En las que no,
       con un solo hijo, el hueco no existe. */
    gap: .3rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ops-status-pill--secondary { background: rgba(100,116,139,.12); color: #475569; }
.ops-status-pill--warning { background: rgba(245,158,11,.14); color: #b45309; }
.ops-status-pill--success { background: rgba(24,167,115,.13); color: #0f8f63; }
.ops-status-pill--danger { background: rgba(223,68,92,.12); color: #be2848; }

.ops-activity-list { display: grid; gap: .85rem; }
.ops-activity-item {
    align-items: center;
    padding: .95rem 1rem;
    border-radius: 18px;
    background: rgba(248,250,252,.86);
    border: 1px solid rgba(226,232,240,.92);
}
.ops-activity-item__marker {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(45,108,223,.10);
    color: var(--at-primary-500);
    flex-shrink: 0;
}
.ops-activity-item__body { flex: 1; }
.ops-activity-item__title { font-weight: 700; margin-bottom: .25rem; }
.ops-activity-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    color: #64748b;
    font-size: .79rem;
}
.ops-activity-item__time {
    color: #94a3b8;
    font-size: .76rem;
    white-space: nowrap;
}

.ops-radar-list { display: grid; gap: 1rem; }
.ops-radar-row__label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
}
.ops-radar-row__bar,
.ops-flow-card__progress {
    width: 100%;
    height: 11px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
    margin-top: .6rem;
}
.ops-radar-row__fill,
.ops-flow-card__progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}
.ops-radar-row__fill--steel,
.ops-flow-card__progress-fill--steel { background: var(--at-steel-500); }
.ops-radar-row__fill--amber,
.ops-flow-card__progress-fill--amber { background: var(--at-amber-500); }
.ops-radar-row__fill--emerald,
.ops-flow-card__progress-fill--emerald { background: var(--at-emerald-500); }
.ops-radar-row__fill--ruby,
.ops-flow-card__progress-fill--ruby { background: var(--at-ruby-500); }
.ops-radar-row__fill--sky,
.ops-flow-card__progress-fill--sky { background: var(--at-sky-500); }
.ops-radar-row__fill--indigo,
.ops-flow-card__progress-fill--indigo { background: var(--at-indigo-500); }
/* Bloque de clasificaciones del catalogo dentro del radar de equipaje. */
.ops-radar-group {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(148,163,184,.45);
}
.ops-radar-row--link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 12px;
    padding: .35rem .5rem;
    margin: -.35rem -.5rem;
    transition: background-color .15s ease;
}
.ops-radar-row--link:hover,
.ops-radar-row--link:focus-visible {
    background: rgba(148,163,184,.12);
    color: inherit;
}
.ops-radar-row--link.is-active {
    background: rgba(88,101,242,.10);
    box-shadow: inset 0 0 0 1px rgba(88,101,242,.28);
}

.text-steel { color: var(--at-steel-500); }
.text-amber { color: var(--at-amber-500); }
.text-emerald { color: var(--at-emerald-500); }
.text-ruby { color: var(--at-ruby-500); }
.text-sky { color: var(--at-sky-500); }
.text-indigo { color: var(--at-indigo-500); }

.ops-flow-card {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.88));
    border: 1px solid rgba(226,232,240,.92);
    border-radius: 20px;
    padding: 1rem;
}
.ops-flow-card__count {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}
.ops-flow-card__label { margin: .45rem 0 .6rem; font-weight: 700; }
.ops-flow-card__foot { color: #64748b; font-size: .78rem; margin-top: .55rem; }

.ops-table-wrap {
    border-radius: 20px;
    border: 1px solid rgba(226,232,240,.86);
    /* overflow-x permite scroll horizontal en tablas anchas; overflow-y: hidden
       mantiene el recorte visual de las esquinas redondeadas */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Scroll táctil también en los wrappers nativos de Bootstrap */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.ops-table thead th {
    background: #f8fbff;
    border-bottom-color: rgba(203, 213, 225, .75);
}

.ops-route-chip {
    display: inline-flex;
    align-items: center;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: #97a7b6;
    border: 1px solid #e2e8f0;
    font-size: .76rem;
    font-weight: 700;
}

.ops-empty-state {
    min-height: 220px;
    border: 1px dashed #cbd5e1;
    border-radius: 22px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
    color: #64748b;
    background: rgba(248,250,252,.7);
}

.ops-empty-state i {
    font-size: 1.8rem;
    color: #94a3b8;
    margin-bottom: .75rem;
}

.ops-empty-state strong,
.ops-empty-state span { display: block; }
.ops-empty-state strong { color: #334155; margin-bottom: .35rem; }
.ops-empty-state--compact { min-height: 180px; }
.ops-empty-state--inline { min-height: auto; border: none; background: transparent; padding: .5rem; }

@media (max-width: 1399.98px) {
    .ops-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199.98px) {
    .ops-hero { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    .ops-flight-grid,
    .ops-flow-grid,
    .ops-panel-grid { grid-template-columns: 1fr 1fr; }
    .ops-section-card__header { flex-direction: column; }
}

@media (max-width: 767.98px) {
    .ops-hero,
    .ops-section-card { border-radius: 22px; }
    .ops-flight-grid,
    .ops-flow-grid,
    .ops-panel-grid { grid-template-columns: 1fr; }
    .ops-hero__title { max-width: none; }
    .dashboard-kpi-card { min-height: 108px; }
    .ops-activity-item { flex-wrap: wrap; }
    .ops-activity-item__time { width: 100%; }
}

/* ══════════════════════════════════════════════════
   ASG-BRS — Flights Experience v2.0
   ══════════════════════════════════════════════════ */

.ops-page-hero,
.ops-flight-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 1.35rem;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(var(--at-accent-solid-rgb, 125, 211, 252), .16), transparent 26%),
        radial-gradient(circle at left bottom, rgba(var(--at-accent-solid-rgb, 59, 130, 246), .22), transparent 24%),
        linear-gradient(135deg,
            rgb(var(--at-hero-top-rgb, 11, 20, 37)) 0%,
            rgb(var(--at-hero-mid-rgb, 18, 34, 61)) 54%,
            rgb(var(--at-hero-bottom-rgb, 23, 54, 92)) 100%);
}

.ops-page-hero::after,
.ops-flight-hero::after {
    content: '';
    position: absolute;
    inset: auto -8% -38% auto;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 64%);
    pointer-events: none;
}

.ops-page-hero__content,
.ops-page-hero__stats,
.ops-flight-hero__main,
.ops-flight-hero__side {
    position: relative;
    z-index: 1;
}

.ops-page-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.ops-page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,.72);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ops-page-hero__title {
    margin: .75rem 0;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1.08;
    max-width: 19ch;
}

.ops-page-hero__text,
.ops-flight-hero__text {
    max-width: 68ch;
    color: rgba(255,255,255,.76);
    line-height: 1.7;
    margin-bottom: 0;
}

.ops-page-hero--narrative .ops-page-hero__content {
    max-width: 760px;
}

.ops-page-hero--narrative .ops-page-hero__title {
    max-width: 34ch;
}

.ops-page-hero--narrative .ops-page-hero__text {
    max-width: 62ch;
}

.ops-page-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
    align-items: stretch;
}

.ops-mini-stat {
    padding: 1rem 1.1rem;
    border-radius: 20px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
}

.ops-mini-stat span {
    display: block;
    /* .82 y no menos: es el valor con el que el rotulo aguanta 4.5:1 sobre el
       degradado tenido con la marca. BrandPalette::heroSurface() mide contra el. */
    color: rgba(255,255,255,.82);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.ops-mini-stat strong {
    display: block;
    margin-top: .35rem;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.05em;
}

/* Encabezado reducido a sus cifras: el titulo de la pagina lo pone el layout,
   asi que aqui solo queda lo que no se repite. */
.ops-page-hero--stats {
    gap: .75rem;
}

.ops-page-hero__topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.ops-hero-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.88);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* El filtro activo se pinta con el relleno opaco de la marca, que es el unico
   tono del que ya sabemos que sostiene texto blanco. */
.ops-hero-state.is-filtered {
    background: rgb(var(--at-accent-solid-rgb, 59, 130, 246));
    border-color: rgba(255,255,255,.32);
    color: #fff;
}

.ops-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
    gap: 1rem;
    align-items: end;
}

.ops-filter-grid__actions {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.ops-flight-list {
    display: grid;
    gap: 1rem;
}

.ops-flight-list-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1.1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.05rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.88));
    border: 1px solid rgba(226,232,240,.92);
    box-shadow: 0 16px 34px rgba(15,23,42,.06);
}

.ops-flight-list-card__main,
.ops-flight-list-card__meta {
    display: grid;
    gap: .75rem;
}

.ops-flight-list-card__main { grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 1fr); }
.ops-flight-list-card__code {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.04em;
}
.ops-flight-list-card__airline { color: #64748b; font-size: .84rem; }
.ops-flight-list-card__route,
.ops-flight-hero__route,
.ops-flight-hero__meta,
.ops-flight-list-card__schedule {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem .9rem;
}

.ops-flight-list-card__schedule,
.ops-flight-hero__meta {
    /* El encabezado del vuelo es oscuro en los dos temas, asi que aqui no hacia
       falta una variante sino un tono legible: el anterior daba 2.37:1 sobre el
       degradado, tambien en tema claro. */
    color: #94a3b8;
    font-size: .82rem;
}

.ops-flight-list-card__schedule span,
.ops-flight-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ops-flight-list-card__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ops-flight-list-card__meta-item span {
    display: block;
    color: #64748b;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    margin-bottom: .3rem;
}

.ops-flight-list-card__meta-item strong {
    font-size: .96rem;
    color: #0f172a;
}

.ops-flight-list-card__actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ops-status-pill--primary { background: rgba(88,101,242,.12); color: #454fdb; }
.ops-status-pill--info { background: rgba(21,164,217,.13); color: #0b93c5; }
.ops-status-pill--xl { padding: .65rem .95rem; font-size: .78rem; }

.ops-flight-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, .95fr);
    gap: 1rem;
}

.ops-flight-hero__code {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    letter-spacing: -.07em;
    font-weight: 800;
    margin: 0 0 .7rem;
}

.ops-flight-hero__side {
    padding: 1.1rem;
    border-radius: 22px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
}

.ops-flight-hero__metric span,
.ops-flight-hero__stats span {
    display: block;
    color: rgba(255,255,255,.67);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.ops-flight-hero__metric strong {
    display: block;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: -.06em;
    font-weight: 800;
    margin: .45rem 0 .3rem;
}

.ops-flight-hero__metric small { color: rgba(255,255,255,.72); }
.ops-flight-hero__bar {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    overflow: hidden;
    margin: 1rem 0;
}
.ops-flight-hero__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #60a5fa 0%, #22c55e 100%);
}
.ops-flight-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}
.ops-flight-hero__stats strong {
    display: block;
    margin-top: .25rem;
    font-size: 1.35rem;
    font-weight: 800;
}

.ops-inline-note {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .9rem 1rem;
    border-radius: 18px;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.18);
    color: #8a4b07;
}

.password-strength {
    padding: .95rem 1rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 8px;
    background: rgba(248, 250, 252, .74);
}

.password-strength__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
    color: #475569;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.password-strength__header strong {
    color: #0f172a;
    white-space: nowrap;
}

.password-strength__track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.password-strength__track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #94a3b8;
    transition: width .18s ease, background-color .18s ease;
}

.password-strength[data-level="weak"] .password-strength__track span {
    background: #ef4444;
}

.password-strength[data-level="medium"] .password-strength__track span {
    background: #f59e0b;
}

.password-strength[data-level="strong"] .password-strength__track span {
    background: #16a34a;
}

.password-strength__requirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem .9rem;
    margin-top: .85rem;
}

.password-strength__rule {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #64748b;
    font-size: .82rem;
}

.password-strength__rule i {
    font-size: .86rem;
}

.password-strength__rule.is-valid {
    color: #15803d;
}

.at-confirm-modal .modal-content {
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.at-confirm-modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    padding: 1.35rem 1.5rem .85rem;
    text-align: center;
}

.at-confirm-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    background: rgba(245, 158, 11, .14);
    color: #b45309;
    font-size: 1.3rem;
}

.at-confirm-modal__icon--danger {
    background: rgba(239, 68, 68, .12);
    color: #dc2626;
}

.at-confirm-modal__icon--success {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
}

.at-confirm-modal__icon--info {
    background: rgba(37, 99, 235, .12);
    color: #1d4ed8;
}

.at-confirm-modal__content p {
    margin: .35rem 0 0;
    color: #64748b;
    line-height: 1.45;
    max-width: 390px;
}

.at-confirm-modal .modal-footer {
    justify-content: center;
    border-top: 1px solid rgba(148, 163, 184, .18);
    padding: .85rem 1.25rem 1.15rem;
}

/* Aviso de sesion por vencer: el numero grande es lo primero que se lee. */
.at-session-modal__countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.at-session-modal__seconds {
    font-size: 3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #b45309;
}

.at-session-modal__unit {
    margin-top: .3rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}

.at-session-modal.is-urgent .at-session-modal__seconds {
    color: #dc2626;
}

.at-session-modal__body {
    max-width: 360px;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.45;
}

.at-session-modal__status {
    font-size: .88rem;
    font-weight: 600;
    color: #475569;
}

.ops-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .95rem;
}

.ops-detail-grid--manifest-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-detail-item {
    padding: .95rem 1rem;
    border-radius: 18px;
    background: rgba(248,250,252,.8);
    border: 1px solid rgba(226,232,240,.92);
}

.ops-detail-item span,
.ops-note-card__label {
    display: block;
    color: #64748b;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
}

.ops-detail-item strong {
    display: block;
    margin-top: .35rem;
    font-size: 1rem;
    color: #0f172a;
}

.ops-note-card {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: rgba(248,250,252,.86);
    border: 1px solid rgba(226,232,240,.92);
}

.ops-flight-summary-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.ops-flight-summary-card > div {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: rgba(248,250,252,.86);
    border: 1px solid rgba(226,232,240,.92);
}

.ops-flight-summary-card span {
    display: block;
    color: #64748b;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
}

.ops-flight-summary-card strong {
    display: block;
    margin-top: .35rem;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 800;
    color: #0f172a;
}

@media (max-width: 1199.98px) {
    .ops-page-hero,
    .ops-flight-hero { grid-template-columns: 1fr; }
    .ops-filter-grid { grid-template-columns: 1fr 1fr; }
    .ops-detail-grid--manifest-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-flight-list-card,
    .ops-flight-list-card__main,
    .ops-flight-list-card__meta { grid-template-columns: 1fr; }
    .ops-flight-list-card__actions { flex-direction: row; }
}

@media (max-width: 767.98px) {
    .ops-page-hero,
    .ops-flight-hero,
    .ops-flight-list-card,
    .ops-detail-item,
    .ops-mini-stat { border-radius: 22px; }
    .ops-filter-grid,
    .ops-detail-grid,
    .ops-flight-summary-card,
    .ops-flight-hero__stats { grid-template-columns: 1fr; }
    .ops-detail-grid--manifest-summary { grid-template-columns: 1fr; }
    .ops-page-hero__title { max-width: none; }
    .ops-flight-list-card__actions { flex-direction: column; }
}

/* ══════════════════════════════════════════════════
   ASG-BRS — Baggage & Traceability Experience v2.0
   ══════════════════════════════════════════════════ */

.ops-filter-grid--compact {
    grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
}

.ops-filter-grid--compact .ops-filter-grid__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.ops-filter-grid--trace {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) auto;
}

.ops-activity-list--tablelike .ops-activity-item {
    align-items: center;
}

.ops-activity-item__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 88px;
}

.ops-detail-grid--single {
    grid-template-columns: 1fr;
}

.ops-timeline {
    padding-left: 2.15rem;
}

.ops-timeline .timeline-content {
    background: rgba(248,250,252,.88);
    border: 1px solid rgba(226,232,240,.92);
    border-radius: 18px;
    padding: .9rem 1rem;
}

.ops-timeline .timeline-item:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199.98px) {
    .ops-filter-grid--compact,
    .ops-filter-grid--trace { grid-template-columns: 1fr 1fr; }

    .ops-filter-grid--compact .ops-filter-grid__actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .ops-filter-grid--compact,
    .ops-filter-grid--trace { grid-template-columns: 1fr; }

    .ops-filter-grid--compact .ops-filter-grid__actions {
        grid-column: auto;
        justify-content: flex-start;
    }

    .ops-activity-item__actions {
        align-items: flex-start;
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════
   ASG-BRS — Carts Experience v2.0
   ══════════════════════════════════════════════════ */

.ops-asset-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.ops-asset-card {
    padding: 1rem 1.05rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.88));
    border: 1px solid rgba(226,232,240,.92);
    box-shadow: 0 16px 34px rgba(15,23,42,.06);
}

.ops-asset-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .9rem;
    margin-bottom: .9rem;
}

.ops-asset-card__code {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.ops-asset-card__description {
    color: #64748b;
    font-size: .84rem;
    margin-top: .25rem;
}

.ops-asset-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: 1rem;
}

.ops-asset-card__meta span {
    display: block;
    color: #64748b;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    margin-bottom: .3rem;
}

.ops-asset-card__meta strong {
    display: block;
    font-size: .95rem;
    color: #0f172a;
}

.ops-asset-card__actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    .ops-asset-card__meta {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════
   ASG-BRS — Reports Experience v2.0
   ══════════════════════════════════════════════════ */

.ops-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.ops-report-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.88));
    border: 1px solid rgba(226,232,240,.92);
    box-shadow: 0 16px 34px rgba(15,23,42,.06);
    color: #0f172a;
}

.ops-report-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    background: rgba(226,232,240,.56);
}

.ops-report-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.04em;
    margin-bottom: .35rem;
}

.ops-report-card__text {
    color: #64748b;
    line-height: 1.65;
}

.ops-report-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    color: #1f5bcc;
}

.ops-danger-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(223,68,92,.12), rgba(255,237,213,.28));
    border: 1px solid rgba(223,68,92,.22);
    color: #7f1d1d;
}

.ops-danger-banner__title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: .2rem;
}

.ops-danger-banner__text {
    color: #991b1b;
    font-size: .84rem;
}

.ops-danger-banner i {
    font-size: 1.5rem;
    color: #dc2626;
}

.ops-report-selector__button {
    min-height: 48px;
    border-radius: 14px;
}

.ops-report-selector__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.ops-report-flight-board {
    border-radius: 8px;
}

.ops-report-toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(150px, 220px) auto;
    align-items: end;
    gap: .65rem;
    padding: .75rem 0;
    border-top: 1px solid #edf2f7;
}

.ops-report-toolbar .form-label {
    margin-bottom: .25rem;
    color: #475569;
}

.ops-report-toolbar__actions {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
}

.ops-report-flight-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .8rem;
}

.ops-report-flight-summary__chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 30px;
    padding: .32rem .55rem;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: .78rem;
    font-weight: 700;
}

.ops-report-flight-summary__chip span {
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: .68rem;
}

.ops-report-flight-summary__chip strong {
    color: #111827;
}

.ops-report-flight-table {
    table-layout: fixed;
    min-width: 760px;
}

.ops-report-flight-table th,
.ops-report-flight-table td {
    padding: .6rem .85rem;
}

.ops-report-flight-table__route {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.ops-quick-flight-list {
    display: grid;
    gap: .85rem;
}

.ops-quick-flight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, .9);
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.92));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ops-quick-flight:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, .28);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.ops-quick-flight__code {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.ops-quick-flight__meta,
.ops-quick-flight__bags {
    color: #64748b;
    font-size: .92rem;
}

@media (max-width: 767.98px) {
    .ops-report-selector__stats {
        grid-template-columns: 1fr;
    }

    .ops-report-toolbar {
        grid-template-columns: 1fr;
    }

    .ops-report-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ops-quick-flight {
        flex-direction: column;
        align-items: flex-start;
    }
}

.ops-hero--compact {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .95fr);
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    align-items: stretch;
}

.ops-hero--compact .ops-hero__content {
    display: flex;
    align-items: stretch;
}

.ops-hero__summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.ops-hero__summary-main {
    display: grid;
    gap: .7rem;
}

.ops-hero--compact .ops-hero__title {
    margin: 0;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    max-width: none;
}

.ops-hero--compact .ops-hero__meta {
    gap: .55rem;
}

.ops-hero--compact .ops-pill {
    padding: .5rem .75rem;
    font-size: .76rem;
}

.ops-hero--compact .ops-hero__actions {
    margin-top: 0;
    gap: .55rem;
    justify-content: flex-end;
    align-self: center;
}
.ops-hero__panel--compact {
    gap: .75rem;
}

.ops-panel-card--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem 1rem;
    align-items: end;
    padding: .95rem 1rem;
}

.ops-panel-card--compact .ops-panel-card__value {
    font-size: 2.4rem;
    margin: .3rem 0 0;
}

.ops-panel-card--compact .ops-panel-card__hint {
    text-align: right;
    font-size: .78rem;
    color: rgba(255,255,255,.72);
}

.ops-panel-grid--compact {
    gap: .65rem;
}

.ops-panel-grid--compact .ops-panel-kpi {
    min-height: 0;
    padding: .85rem .9rem;
}

.ops-panel-grid--compact .ops-panel-kpi span {
    font-size: .74rem;
}

.ops-panel-grid--compact .ops-panel-kpi strong {
    font-size: 1.3rem;
}

@media (max-width: 991.98px) {
    .ops-hero--compact {
        grid-template-columns: 1fr;
    }

    .ops-hero__summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .ops-hero--compact .ops-hero__actions {
        align-self: flex-start;
        justify-content: flex-start;
    }

    .ops-panel-card--compact {
        grid-template-columns: 1fr;
    }

    .ops-panel-card--compact .ops-panel-card__hint {
        text-align: left;
    }
}

/* ══════════════════════════════════════════════════
   Dense Layout Tuning
   Compacta altura y espaciado en componentes compartidos
   ══════════════════════════════════════════════════ */

.dashboard-kpi-card {
    gap: .8rem;
    padding: .82rem .9rem;
    border-radius: 20px;
    min-height: 96px;
}

.dashboard-kpi-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 1.15rem;
}

.dashboard-kpi-card__content span {
    font-size: .72rem;
    letter-spacing: .12em;
}

.dashboard-kpi-card__content strong {
    font-size: 1.7rem;
    margin: .2rem 0;
}

.dashboard-kpi-card__content small {
    font-size: .74rem;
    line-height: 1.35;
}

.ops-section-card {
    border-radius: 24px;
    padding: 1rem;
}

.ops-section-card__header {
    gap: .75rem;
    margin-bottom: .8rem;
}

.ops-section-card__title {
    font-size: 1.05rem;
}

.ops-section-card__eyebrow,
.ops-eyebrow {
    font-size: .68rem;
    letter-spacing: .16em;
}

.ops-page-hero,
.ops-flight-hero {
    gap: .85rem;
    padding: 1.05rem 1.1rem;
    border-radius: 24px;
}

.ops-page-hero__title {
    margin: .45rem 0;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    max-width: 17ch;
}

.ops-page-hero__text,
.ops-flight-hero__text {
    max-width: 58ch;
    font-size: .92rem;
    line-height: 1.5;
}

.ops-page-hero__stats {
    gap: .65rem;
}

.ops-mini-stat {
    padding: .8rem .9rem;
    border-radius: 18px;
}

.ops-mini-stat span {
    font-size: .72rem;
    letter-spacing: .12em;
}

.ops-mini-stat strong {
    margin-top: .25rem;
    font-size: 1.45rem;
}

.ops-alert-strip {
    gap: .85rem;
}

.ops-alert-card {
    gap: .75rem;
    padding: .85rem .9rem;
    border-radius: 18px;
}

.ops-alert-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 1rem;
}

.ops-alert-card__text {
    font-size: .8rem;
    line-height: 1.45;
}

.ops-flight-grid,
.ops-flow-grid {
    gap: .85rem;
}

.ops-flight-card {
    padding: .9rem;
    border-radius: 18px;
}

.ops-flight-card__code {
    font-size: 1.05rem;
}

.ops-flight-card__route {
    font-size: .8rem;
}

.ops-flight-card__meta {
    gap: .55rem .85rem;
    margin: .65rem 0 .75rem;
    font-size: .78rem;
}

.ops-flight-card__link {
    font-size: .88rem;
}

.ops-flow-card {
    padding: .85rem;
    border-radius: 18px;
}

.ops-flow-card__count {
    font-size: 1.45rem;
}

.ops-flow-card__label {
    margin: .3rem 0 .5rem;
    font-size: .92rem;
}

.ops-flow-card__progress {
    height: 9px;
    margin-top: .45rem;
}

.ops-flow-card__foot {
    font-size: .74rem;
    margin-top: .4rem;
}

.ops-report-card {
    gap: .8rem;
    padding: .95rem;
    border-radius: 20px;
}

.ops-report-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 1.2rem;
}

.ops-report-card__title {
    font-size: 1rem;
    margin-bottom: .2rem;
}

.ops-report-card__text {
    font-size: .86rem;
    line-height: 1.5;
}

.ops-route-chip {
    padding: .28rem .5rem;
    font-size: .72rem;
}

.ops-status-pill {
    padding: .38rem .65rem;
    font-size: .68rem;
}

.ops-empty-state {
    min-height: 180px;
    padding: 1.1rem;
}

.ops-empty-state--compact {
    min-height: 140px;
}

.ops-empty-state i {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

/* ══════════════════════════════════════════════════
   Visual Hierarchy Tuning
   Oculta texto secundario en vistas de lectura rápida
   ══════════════════════════════════════════════════ */

.ops-page-hero--terse .ops-page-hero__text,
.ops-report-card--terse .ops-report-card__text,
.dashboard-kpi-card--minimal .dashboard-kpi-card__content small,
.ops-empty-state--terse span {
    display: none;
}

.dashboard-kpi-card--minimal .dashboard-kpi-card__content strong {
    margin-bottom: 0;
}

.ops-page-hero--terse .ops-page-hero__title {
    max-width: 14ch;
    margin-bottom: 0;
}

.ops-report-card--terse {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.ops-report-card--terse .ops-report-card__body {
    flex: 1;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ops-empty-state--terse {
    min-height: 120px;
}





/* ══════════════════════════════════════════════════
   ASG-BRS — Adaptive Sidebar v2.0
   Sidebar colapsable en desktop y off-canvas en móvil.
   ══════════════════════════════════════════════════ */

:root {
    --at-sidebar-collapsed-width: 84px;
}

body {
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* El navy del menu se tine con el color de marca. El tinte lo calcula el servidor
   (App\Support\BrandPalette::sidebarSurface) y no se escribe aqui porque tiene una
   condicion que el CSS no puede comprobar: los enlaces del menu van en gris claro,
   asi que el fondo solo puede aclararse mientras ese gris conserve su contraste.
   Los respaldos son el navy original, por si la pagina se sirve sin las variables. */
.sidebar {
    border-right: 1px solid rgba(255,255,255,.06);
    box-shadow: 18px 0 45px rgba(6, 16, 32, .18);
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
        linear-gradient(180deg,
            rgb(var(--at-sidebar-bg-top, 12, 24, 40)) 0%,
            rgb(var(--at-sidebar-bg-bottom, 11, 23, 38)) 100%);
}

.sidebar-header,
.sidebar-user,
.sidebar-footer {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.sidebar-header {
    padding-top: 1.2rem;
    padding-bottom: 1rem;
}

.sidebar-brand {
    gap: .72rem;
    font-size: 1.16rem;
    font-weight: 800;
}

.sidebar-brand-icon {
    font-size: 1.45rem;
}

.sidebar-user {
    margin: .75rem .8rem 0;
    padding: .8rem .9rem;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    background: rgba(255,255,255,.03);
}

.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    box-shadow: 0 12px 25px rgba(var(--bs-primary-rgb), .24);
}

.sidebar-user-name {
    font-size: .86rem;
}

.sidebar-user-role {
    font-size: .72rem;
}

.sidebar-nav {
    padding: .9rem .8rem 1rem;
}

.sidebar-section-title {
    padding: 1rem .95rem .45rem;
    font-size: .66rem;
    letter-spacing: .18em;
}

.sidebar-link {
    gap: .72rem;
    padding: .74rem .95rem;
    margin-bottom: .22rem;
    border-left: 0;
    border-radius: 16px;
    font-size: .88rem;
}

.sidebar-link i {
    width: 18px;
    font-size: 1rem;
}

.sidebar-link span {
    white-space: nowrap;
}

.sidebar-link:hover {
    background: rgba(255,255,255,.08);
}

/* El item activo se tine con el color de marca en vez del azul por omision que
   estaba escrito a mano. Debajo del tinte va un lavado blanco fijo: una capa
   translucida de un color OSCURO sobre este navy no se distingue del fondo, y sin
   el lavado la seleccion desapareceria con marcas como Grafito. Asi el realce
   existe siempre y la marca lo colorea. */
.sidebar-item.active .sidebar-link {
    background:
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), .30), rgba(var(--bs-primary-rgb), .14)),
        linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .34);
}

.sidebar-item.active .sidebar-link::before {
    content: '';
    position: absolute;
    left: .55rem;
    top: .7rem;
    bottom: .7rem;
    width: 3px;
    border-radius: 999px;
    /* Mismo problema que el fondo del item: un color de marca muy oscuro sobre el
       navy no se ve. Se aclara la barra lo justo para que siempre lea como marca.
       La primera declaracion es el respaldo si color-mix no esta disponible. */
    background: var(--at-sidebar-accent);
    background: color-mix(in srgb, var(--at-sidebar-accent) 74%, #fff);
}

.sidebar-footer {
    margin: .35rem .8rem .8rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 18px;
    background: rgba(255,255,255,.02);
}

.sidebar-version {
    letter-spacing: .08em;
}

.main-wrapper {
    transition: margin-left var(--at-transition);
}

.at-navbar {
    backdrop-filter: blur(14px);
}

.at-navbar__leading {
    display: flex;
    align-items: center;
    gap: .65rem;
}

/* Fila del tema dentro del menu del usuario: rotulo a la izquierda, par a la
   derecha, alineado con el resto de las opciones del desplegable. */
.at-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* Par sol / luna. Va segmentado y sin borde, con el activo realzado por una
   pastilla y no por un canto. */
.at-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .15rem;
    border-radius: 999px;
    background: rgba(15, 39, 72, .05);
}

.at-theme-switch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #4e5766;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--at-transition), color var(--at-transition);
}

.at-theme-switch__btn:hover {
    color: #1a202c;
}

/* El icono activo toma el relleno opaco de la marca, que es el tono del que ya
   sabemos que contrasta; sobre blanco funciona igual de bien como texto. */
.at-theme-switch__btn.is-active {
    background: #fff;
    color: rgb(var(--at-accent-solid-rgb, 59, 130, 246));
    box-shadow: 0 1px 3px rgba(15, 39, 72, .12);
}

body.at-theme-dark .at-theme-switch {
    background: rgba(255, 255, 255, .08);
}

body.at-theme-dark .at-theme-switch__btn {
    color: #94a3b8;
}

body.at-theme-dark .at-theme-switch__btn:hover {
    color: #e5edf7;
}

body.at-theme-dark .at-theme-switch__btn.is-active {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: none;
}

.at-shell-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--at-border);
    border-radius: 14px;
    background: #fff;
    color: #334155;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    transition: transform var(--at-transition), box-shadow var(--at-transition), border-color var(--at-transition), background var(--at-transition);
}

/* El boton que pliega el menu vive pegado a el: si el menu se tine de marca y este
   sigue iluminandose de azul, el desajuste se nota. */
.at-shell-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--bs-primary-rgb), .28);
    background: #f8fbff;
    box-shadow: 0 14px 28px rgba(var(--bs-primary-rgb), .12);
}

.at-shell-toggle i {
    font-size: 1rem;
}

body.at-sidebar-collapsed .sidebar {
    width: var(--at-sidebar-collapsed-width);
}

body.at-sidebar-collapsed .main-wrapper {
    margin-left: var(--at-sidebar-collapsed-width);
}

body.at-sidebar-collapsed .sidebar-header,
body.at-sidebar-collapsed .sidebar-footer {
    padding-left: .75rem;
    padding-right: .75rem;
}

body.at-sidebar-collapsed .sidebar-header {
    justify-content: center;
}

body.at-sidebar-collapsed .sidebar-brand {
    justify-content: center;
}

body.at-sidebar-collapsed .sidebar-brand-text,
body.at-sidebar-collapsed .sidebar-user-info,
body.at-sidebar-collapsed .sidebar-section-title,
body.at-sidebar-collapsed .sidebar-version,
body.at-sidebar-collapsed .sidebar-link span {
    display: none;
}

body.at-sidebar-collapsed .sidebar-user {
    justify-content: center;
    margin-left: .55rem;
    margin-right: .55rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

body.at-sidebar-collapsed .sidebar-nav {
    padding-left: .55rem;
    padding-right: .55rem;
}

body.at-sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-left: .75rem;
    padding-right: .75rem;
}

body.at-sidebar-collapsed .sidebar-link i {
    width: auto;
}

body.at-sidebar-collapsed .sidebar-item.active .sidebar-link::before {
    left: .35rem;
}

body.at-sidebar-collapsed .sidebar-footer {
    display: flex;
    justify-content: center;
}

body.at-sidebar-collapsed .at-shell-toggle i {
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .sidebar {
        box-shadow: 22px 0 48px rgba(0, 0, 0, .28);
    }

    .at-navbar__leading {
        gap: .5rem;
    }
}

.at-sidebar-tooltip .tooltip-inner {
    background: rgba(9, 17, 31, .96);
    color: #f8fbff;
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 12px;
    padding: .48rem .68rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 12px 24px rgba(6, 16, 32, .22);
}

.at-sidebar-tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: rgba(9, 17, 31, .96);
}

.ops-diagnostic-card {
    padding: 1rem 1.1rem;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, .18);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.86));
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
}

.ops-diagnostic-card--compact {
    padding: .9rem 1rem;
    border-radius: 18px;
}

.ops-diagnostic-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}

.ops-diagnostic-list {
    display: grid;
    gap: .65rem;
}

.ops-diagnostic-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .78rem .88rem;
    border-radius: 16px;
    font-size: .88rem;
    line-height: 1.45;
}

.ops-diagnostic-item i {
    margin-top: .08rem;
    font-size: .95rem;
}

.ops-diagnostic-item--issue {
    background: rgba(239, 68, 68, .08);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, .14);
}

.ops-diagnostic-item--warning {
    background: rgba(245, 158, 11, .10);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, .18);
}

/* Branding settings module */
.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.75rem;
    height: 4.75rem;
    margin: 0 auto .75rem;
}

.auth-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.14));
}

.sidebar-brand-mark {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    background: rgba(59, 130, 246, 0.12);
    flex-shrink: 0;
}

.sidebar-brand-logo {
    width: 1.65rem;
    height: 1.65rem;
    object-fit: contain;
}

.sidebar-brand-logo--icon {
    width: 1.85rem;
    height: 1.85rem;
}

body.at-sidebar-collapsed .sidebar-brand-mark {
    margin-inline: auto;
}

.platform-logo-preview {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9));
}

.platform-logo-preview__label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}

.platform-logo-preview__frame {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.82);
    padding: 1.25rem;
}

.platform-logo-preview__frame img {
    max-width: 100%;
    max-height: 132px;
    object-fit: contain;
}

.platform-logo-preview__image {
    width: min(180px, 72%);
    height: 132px;
    object-fit: contain;
}

.platform-logo-preview__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    color: #64748b;
}

.platform-logo-preview__placeholder i {
    font-size: 2rem;
    color: #2563eb;
}

.platform-config-note-section {
    position: relative;
    z-index: 1;
    flex-basis: 100%;
    margin-top: 1.25rem;
    padding-top: 1.5rem;
}

.platform-config-note {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, .9), rgba(241, 245, 249, .78));
    border: 1px solid rgba(37, 99, 235, 0.16);
}

.platform-config-note i {
    font-size: 1.1rem;
    color: #2563eb;
}

.platform-config-note strong,
.platform-option-card h3 {
    display: block;
    margin-bottom: .2rem;
}

.platform-config-note span {
    display: block;
    color: #64748b;
    font-size: .92rem;
}

.platform-option-card {
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96));
}

.platform-option-card h3 {
    font-size: .96rem;
    font-weight: 700;
    margin: 0 0 .65rem;
}

.platform-option-card ul {
    margin: 0;
    padding-left: 1rem;
    color: #64748b;
    font-size: .92rem;
}

.platform-option-card li + li {
    margin-top: .35rem;
}

/* Branding settings module - visual extension */
.platform-color-picker {
    width: 3.5rem;
    min-width: 3.5rem;
    height: 3rem;
    padding: .25rem;
    border-radius: .85rem;
}

/* Combinaciones de color predefinidas.
   Cada muestra lleva el par completo: la eleccion se hace mirando los dos colores
   juntos, que es como se veran en el degradado del panel de marca, y no uno a uno.
   El boton expone su propio par en --preset-*, de modo que al quedar activo se
   marca con el color que acaba de elegir. */
.platform-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}

.platform-preset {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        'swatch nombre'
        'swatch codigos';
    align-items: center;
    column-gap: .75rem;
    padding: .7rem .85rem;
    text-align: left;
    border-radius: .9rem;
    border: 1px solid rgba(148, 163, 184, .28);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--at-transition), box-shadow var(--at-transition), transform var(--at-transition);
}

.platform-preset:hover {
    border-color: rgba(100, 116, 139, .55);
    transform: translateY(-1px);
}

/* El anillo va en box-shadow y no en un borde mas grueso: un borde que cambia de
   grosor mueve el contenido de la tarjeta al activarse. */
.platform-preset.is-active {
    border-color: var(--preset-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--preset-primary) 34%, transparent);
}

.platform-preset__swatch {
    grid-area: swatch;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .7rem;
    /* Corte diagonal: se lee como el degradado que produciran, no como dos fichas. */
    background: linear-gradient(135deg, var(--preset-primary) 0 48%, var(--preset-secondary) 52% 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .14);
}

.platform-preset__name {
    grid-area: nombre;
    font-weight: 600;
    font-size: .9rem;
    color: #0f172a;
}

.platform-preset__codes {
    grid-area: codigos;
    font-size: .72rem;
    letter-spacing: .02em;
    color: #64748b;
}

/* Aviso de contraste bajo un campo de color. Es informativo y a proposito NO se
   parece a .invalid-feedback: aquella marca un valor rechazado, esta solo advierte
   sobre uno que se va a guardar igual. De ahi el ambar y no el rojo. */
.platform-contrast-hint {
    margin-top: .45rem;
    padding: .5rem .7rem;
    border-radius: .6rem;
    border-left: 3px solid #d97706;
    background: rgba(217, 119, 6, .08);
    color: #92400e;
    font-size: .8rem;
    line-height: 1.35;
}

.platform-logo-preview__frame--favicon {
    min-height: 180px;
}

.platform-favicon-preview {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
}

.platform-theme-swatch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--platform-primary) 24%, white) 0%, color-mix(in srgb, var(--platform-secondary) 26%, white) 100%);
}

.platform-theme-swatch::before,
.platform-theme-swatch::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    inset: auto;
    opacity: .8;
}

.platform-theme-swatch::before {
    width: 74px;
    height: 74px;
    right: 20px;
    top: 16px;
    background: color-mix(in srgb, var(--platform-primary) 65%, white);
}

.platform-theme-swatch::after {
    width: 56px;
    height: 56px;
    right: 68px;
    bottom: 14px;
    background: color-mix(in srgb, var(--platform-secondary) 62%, white);
}

.platform-theme-swatch > div {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.platform-theme-swatch__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #475569;
}

/* Branding settings module - preview refresh */
.platform-theme-preview {
    --platform-primary: #3B82F6;
    --platform-secondary: #15A4D9;
    padding: 1.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(135deg, color-mix(in srgb, var(--platform-primary) 14%, #0f172a) 0%, color-mix(in srgb, var(--platform-secondary) 18%, #ffffff) 100%);
    color: #0f172a;
}

.platform-theme-preview__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.platform-theme-preview__eyebrow,
.platform-theme-preview__label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}

.platform-theme-preview h3 {
    font-size: 1.05rem;
    margin: .15rem 0 0;
}

.platform-theme-preview__chips {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.platform-theme-preview__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
}

.platform-theme-preview__chip--primary {
    background: var(--platform-primary);
}

.platform-theme-preview__chip--secondary {
    background: var(--platform-secondary);
}

.platform-theme-preview__body {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 1rem;
}

.platform-theme-preview__sidebar,
.platform-theme-preview__content {
    padding: 1rem;
    border-radius: .95rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.platform-theme-preview__menu-item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    margin-top: .75rem;
    border-radius: .85rem;
    background: rgba(15, 23, 42, 0.05);
    color: #475569;
    border-left: 4px solid transparent;
}

.platform-theme-preview__menu-item.is-active {
    background: color-mix(in srgb, var(--platform-primary) 18%, white);
    border-left-color: var(--platform-primary);
    color: #0f172a;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.platform-theme-preview__link {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: var(--platform-primary);
    text-decoration: none;
}

.platform-theme-preview__gradient {
    height: 72px;
    border-radius: .95rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--platform-primary) 70%, #0f172a) 0%, var(--platform-secondary) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

@media (max-width: 991.98px) {
    .platform-theme-preview__body {
        grid-template-columns: 1fr;
    }
}

.ops-carretas-board {
    border-radius: 8px;
}

.ops-carretas-board__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .85rem 1rem .4rem;
}

.ops-carretas-board__meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #6b7280;
    font-size: .82rem;
    white-space: nowrap;
}

.ops-carretas-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(130px, .7fr) minmax(145px, .8fr) auto;
    align-items: end;
    gap: .65rem;
    padding: .75rem 1rem;
    border-top: 1px solid #edf2f7;
    background: #fbfdff;
}

.ops-carretas-toolbar .form-label {
    margin-bottom: .25rem;
    color: #475569;
}

.ops-carretas-toolbar__actions {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    justify-content: flex-end;
}

.ops-carretas-table {
    table-layout: fixed;
    min-width: 1140px;
}

.ops-carretas-table th,
.ops-carretas-table td {
    padding: .55rem .85rem;
}

/* Con `table-layout: fixed` una palabra mas ancha que su columna no la ensancha:
   se desborda encima de la vecina. "Disponibilidad" es justo ese caso, asi que
   los encabezados parten la palabra antes que invadir la columna de al lado. */
.ops-carretas-table th {
    overflow-wrap: anywhere;
}

.ops-carretas-table__code {
    width: 10%;
}

.ops-carretas-table__description {
    width: 23%;
}

.ops-carretas-table__count {
    width: 9%;
}

.ops-carretas-table__status {
    width: 10%;
}

.ops-carretas-table__availability {
    width: 14%;
}

.ops-carretas-table__session {
    width: 26%;
}

.ops-carretas-table__actions {
    width: 8%;
}

/* El numero de vuelo no se parte: "N3 4210" en dos lineas se lee como dos datos. */
.ops-carretas-table__session-flight {
    white-space: nowrap;
}

.ops-carretas-table__description-text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

/* Badge clicable: conserva el aspecto de la insignia sin el estilo nativo de boton. */
.ops-carretas-table__count-btn {
    cursor: pointer;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background-color: var(--bs-light, #f8f9fa);
}

.ops-carretas-table__count-btn:hover,
.ops-carretas-table__count-btn:focus {
    background-color: var(--bs-secondary-bg, #e9ecef);
}

/* Detalle de maletas por carreta: la lista scrollea dentro del modal en vez de
   cortarse, y la cabecera queda fija para no perder de vista las columnas. */
.ops-carretas-modal__scroll {
    max-height: min(55vh, 420px);
    overflow-y: auto;
}

.ops-carretas-modal__head th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

@media (max-width: 1199.98px) {
    .ops-carretas-toolbar {
        grid-template-columns: minmax(220px, 1fr) minmax(130px, 180px) minmax(145px, 190px);
    }

    .ops-carretas-toolbar__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .ops-carretas-board__header {
        flex-direction: column;
        gap: .4rem;
    }

    .ops-carretas-board__meta {
        white-space: normal;
    }

    .ops-carretas-toolbar {
        grid-template-columns: 1fr;
    }

    .ops-carretas-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.ops-aks-board {
    border-radius: 8px;
}

.ops-aks-board__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .85rem 1rem .4rem;
}

.ops-aks-board__meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #6b7280;
    font-size: .82rem;
    white-space: nowrap;
}

.ops-aks-toolbar {
    display: grid;
    grid-template-columns: minmax(200px, 1.8fr) minmax(120px, .6fr) minmax(160px, .9fr) minmax(130px, .7fr) minmax(145px, .8fr) auto;
    align-items: end;
    gap: .65rem;
    padding: .75rem 1rem;
    border-top: 1px solid #edf2f7;
    background: #fbfdff;
}

.ops-aks-toolbar .form-label {
    margin-bottom: .25rem;
    color: #475569;
}

.ops-aks-toolbar__actions {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    justify-content: flex-end;
}

.ops-aks-table {
    table-layout: fixed;
    min-width: 900px;
}

.ops-aks-table th,
.ops-aks-table td {
    padding: .55rem 1rem;
}

.ops-aks-table__code {
    width: 14%;
}

.ops-aks-table__type {
    width: 10%;
}

.ops-aks-table__description {
    width: 26%;
}

.ops-aks-table__airline {
    width: 20%;
}

.ops-aks-table__capacity {
    width: 11%;
}

.ops-aks-table__status {
    width: 11%;
}

.ops-aks-table__actions {
    width: 8%;
}

.ops-aks-table__description-text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

@media (max-width: 1399.98px) {
    .ops-aks-toolbar {
        grid-template-columns: minmax(200px, 1fr) minmax(120px, 160px) minmax(160px, 200px);
    }

    .ops-aks-toolbar__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .ops-aks-board__header {
        flex-direction: column;
        gap: .4rem;
    }

    .ops-aks-board__meta {
        white-space: normal;
    }

    .ops-aks-toolbar {
        grid-template-columns: 1fr;
    }

    .ops-aks-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.ops-vuelos-board {
    border-radius: 8px;
}

.ops-vuelos-board__meta {
    display: inline-flex;
    align-items: center;
    /* Ahora lleva tambien que universo se esta mirando y el enlace para cambiarlo:
       en una cabecera estrecha eso baja de linea en vez de empujar al titulo. */
    flex-wrap: wrap;
    gap: .5rem;
    color: #6b7280;
    font-size: .82rem;
}

/* Distintivo del universo visible: la operacion del dia o el historial entero.
   Sin el, un listado que abre filtrado no se distingue de uno que lo muestra
   todo, y el operador no sabe que le falta ver. */
.ops-vuelos-board__view {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem;
    border: 1px solid #dbe3ec;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    white-space: nowrap;
}

.ops-vuelos-board__view-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ops-vuelos-board__view-link:hover,
.ops-vuelos-board__view-link:focus {
    text-decoration: underline;
}

/* Siete celdas en una sola fila: buscar, operacion, estado, disponibilidad,
   fecha, registros y las acciones.

   La clave es `minmax(0, ...)` y no un minimo en pixeles. Un minimo duro es lo
   que antes desbordaba la barra fuera de la tarjeta: el ancho disponible no es
   el de la ventana —hay que descontarle el menu lateral y los rellenos, unos
   342px— asi que siete pistas con suelo propio no caben en un portatil. Con
   suelo cero las celdas se reparten lo que haya y los controles se recortan
   antes que salirse. Las proporciones dan mas aire a lo que lleva texto largo. */
.ops-vuelos-toolbar {
    display: grid;
    grid-template-columns:
        minmax(0, 2.1fr)
        minmax(0, 1.3fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.05fr)
        minmax(0, .95fr)
        auto;
    align-items: end;
    gap: .5rem;
    padding: .75rem 0;
    border-top: 1px solid #edf2f7;
}

/* `minmax(0, ...)` baja el suelo de la pista, no el del elemento que va dentro:
   sin esto un select sigue midiendo lo que mide su opcion mas larga y empuja la
   fila igual que antes. */
.ops-vuelos-toolbar > * {
    min-width: 0;
}

.ops-vuelos-toolbar .form-control,
.ops-vuelos-toolbar .form-select {
    width: 100%;
    min-width: 0;
}

/* Un rotulo que se parte en dos lineas descuadra la fila entera, porque las
   celdas se alinean por abajo. Mejor recortarlo. */
.ops-vuelos-toolbar .form-label {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ops-vuelos-toolbar .form-label {
    margin-bottom: .25rem;
    color: #475569;
}

/* Filtrar y Limpiar cierran la fila. Son la unica celda con ancho propio (`auto`):
   un boton recortado no se puede leer, asi que el sobrante lo ceden los filtros. */
.ops-vuelos-toolbar__actions {
    display: flex;
    gap: .45rem;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

/* Diez columnas de ancho porcentual fijo. Con 900px, Acciones se quedaba en 81px
   menos 27px de relleno: menos que los dos botones que lleva dentro, y con
   `table-layout: fixed` lo que no cabe no ensancha la columna, se desborda encima
   de la vecina. A 1150px cada columna cubre su contenido y el wrapper hace el
   scroll horizontal cuando no cabe, igual que en carretas. */
.ops-vuelos-table {
    table-layout: fixed;
    min-width: 1220px;
}

.ops-vuelos-table th,
.ops-vuelos-table td {
    padding: .6rem .85rem;
}

/* Los anchos se repartieron de nuevo al entrar operacion, matricula y posicion;
   siguen sumando 100 para que la tabla no dependa del ancho del contenido. */
.ops-vuelos-table__flight {
    width: 13%;
}

.ops-vuelos-table__route {
    width: 12%;
}

.ops-vuelos-table__operation {
    width: 14%;
}

.ops-vuelos-table__schedule {
    width: 9%;
}

.ops-vuelos-table__aircraft {
    width: 10%;
}

.ops-vuelos-table__registration {
    width: 9%;
}

.ops-vuelos-table__stand {
    width: 7%;
}

.ops-vuelos-table__bags {
    width: 6%;
}

.ops-vuelos-table__status {
    width: 11%;
}

.ops-vuelos-table__actions {
    width: 9%;
}

/* Distintivo del tipo de operacion. Deliberadamente distinto de .ops-status-pill:
   va en minusculas y sin el espaciado de letras de aquella, porque comparte fila
   con la columna de estado y dos pastillas iguales al lado se leerian como dos
   estados. Aqui el color dice que flujo admite el vuelo, no como va. */
/* Las dos pastillas de la celda de operacion, en una fila que no se parte.
   `min-width: 0` es lo que permite que el rotulo se recorte en vez de empujar a
   la marca de turnaround al renglon siguiente. */
.ops-op-chip-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

/* La marca de turnaround no se recorta nunca: es un icono y sin el no dice nada. */
.ops-op-chip-row > .ops-op-chip--icono {
    flex: 0 0 auto;
}

/* El rotulo cede primero: en un vuelo `ambos` («Llegada y salida») el texto es
   mas largo que la columna, y vale mas verlo cortado junto a su marca que
   completo en otro renglon. */
.ops-op-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-op-chip {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.ops-op-chip--icono {
    gap: 0;
    padding-left: .42rem;
    padding-right: .42rem;
}

.ops-op-chip--salida {
    background: rgba(88, 101, 242, .12);
    color: #454fdb;
}

.ops-op-chip--llegada {
    background: rgba(21, 164, 217, .13);
    color: #0a6d8f;
}

.ops-op-chip--ambos {
    background: rgba(109, 40, 217, .12);
    color: #6d28d9;
}

/* El tema oscuro necesita su propia version: el lavado claro con tinta oscura
   desaparece sobre la tarjeta oscura. */
body.at-theme-dark .ops-op-chip--salida {
    background: rgba(129, 140, 248, .18);
    color: #c7d2fe;
}

body.at-theme-dark .ops-op-chip--llegada {
    background: rgba(56, 189, 248, .18);
    color: #bae6fd;
}

body.at-theme-dark .ops-op-chip--ambos {
    background: rgba(167, 139, 250, .18);
    color: #ddd6fe;
}

.ops-vuelos-table__route-line {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Por debajo de 992px se va el menu lateral pero tambien el ancho: siete celdas
   en una fila dejarian cada filtro en unos 80px, que ya no se lee. La barra se
   parte, y la busqueda y las acciones toman su fila entera con `1 / -1`, que es
   seguro caiga en el numero de columnas que caiga. */
@media (max-width: 991.98px) {
    .ops-vuelos-board__meta {
        white-space: normal;
    }

    .ops-vuelos-toolbar {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .ops-vuelos-toolbar__search,
    .ops-vuelos-toolbar__actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .ops-vuelos-toolbar {
        grid-template-columns: 1fr;
    }

    .ops-vuelos-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.ops-maletas-board {
    border-radius: 8px;
}

.ops-maletas-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, .9fr) minmax(145px, .8fr) auto;
    align-items: end;
    gap: .65rem;
    padding: .75rem 0;
    border-top: 1px solid #edf2f7;
}

.ops-maletas-toolbar .form-label {
    margin-bottom: .25rem;
    color: #475569;
}

.ops-maletas-toolbar__actions {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    justify-content: flex-end;
}

.ops-maletas-radar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .8rem;
}

.ops-maletas-radar__chip,
.ops-maletas-radar__empty {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 30px;
    padding: .32rem .55rem;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: .78rem;
    font-weight: 700;
}

.ops-maletas-radar__chip strong {
    color: #111827;
}

.ops-maletas-radar__chip--steel {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.ops-maletas-radar__chip--sky {
    border-color: #bae6fd;
    background: #f0f9ff;
}

.ops-maletas-radar__chip--indigo {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.ops-maletas-radar__chip--emerald {
    border-color: #badbcc;
    background: #eefaf3;
}

.ops-maletas-radar__chip--ruby {
    border-color: #f4c2c2;
    background: #fff1f2;
}

/* La vista pinta de ambar las maletas en bodega y las de re-encolillar, pero la
   variante no existia: esos dos chips salian sin color en los dos temas. */
.ops-maletas-radar__chip--amber {
    border-color: #f3d98b;
    background: #fff8df;
}

.ops-maletas-table {
    table-layout: fixed;
    /* 840 y no 980: a 1200px de ventana, con el menu lateral abierto, la tarjeta
       deja 860px utiles. Con el minimo anterior el listado se leia con scroll
       lateral en cualquier portatil por debajo de 1400px, que es la mayoria. */
    min-width: 840px;
}

.ops-maletas-table th,
.ops-maletas-table td {
    padding: .6rem .85rem;
}

/* Los anchos suman 100%. Antes sumaban 86 y el resto lo repartia el navegador
   solo, asi que el reparto real no era el que declaraba la hoja. */
.ops-maletas-table__pick { width: 44px; }
.ops-maletas-table__code { width: 20%; }
.ops-maletas-table__flight { width: 16%; }
.ops-maletas-table__status { width: 22%; }
.ops-maletas-table__event { width: 30%; }
.ops-maletas-table__actions { width: 12%; }

.ops-maletas-table__text,
.ops-maletas-table__event-text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 1199.98px) {
    .ops-maletas-toolbar {
        grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) minmax(145px, 190px);
    }

    .ops-maletas-toolbar__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .ops-maletas-toolbar {
        grid-template-columns: 1fr;
    }

    .ops-maletas-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.ops-trace-board {
    border-radius: 8px;
}

.ops-trace-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(170px, .9fr) minmax(145px, .8fr) auto;
    align-items: end;
    gap: .65rem;
    padding: .75rem 0;
    border-top: 1px solid #edf2f7;
}

.ops-trace-toolbar .form-label {
    margin-bottom: .25rem;
    color: #475569;
}

.ops-trace-toolbar__actions {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    justify-content: flex-end;
}

.ops-trace-radar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .8rem;
}

.ops-trace-radar__chip,
.ops-trace-radar__empty {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 30px;
    padding: .32rem .55rem;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: .78rem;
    font-weight: 700;
}

.ops-trace-radar__chip strong {
    color: #111827;
}

.ops-trace-radar__chip--steel {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.ops-trace-radar__chip--emerald {
    border-color: #badbcc;
    background: #eefaf3;
}

.ops-trace-radar__chip--sky {
    border-color: #bae6fd;
    background: #f0f9ff;
}

.ops-trace-radar__chip--indigo {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.ops-trace-radar__chip--amber {
    border-color: #f3d98b;
    background: #fff8df;
}

.ops-trace-radar__chip--ruby {
    border-color: #f4c2c2;
    background: #fff1f2;
}

.ops-trace-table {
    table-layout: fixed;
    min-width: 1100px;
}

.ops-trace-table th,
.ops-trace-table td {
    padding: .6rem .85rem;
}

.ops-trace-table__event {
    width: 29%;
}

.ops-trace-table__type {
    width: 12%;
}

.ops-trace-table__flight {
    width: 10%;
}

.ops-trace-table__bag {
    width: 15%;
}

.ops-trace-table__user {
    width: 14%;
}

.ops-trace-table__device {
    width: 13%;
}

.ops-trace-table__time {
    width: 7%;
}

.ops-trace-table__event-text,
.ops-trace-table__text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 1199.98px) {
    .ops-trace-toolbar {
        grid-template-columns: minmax(220px, 1fr) minmax(170px, 190px) minmax(145px, 190px);
    }

    .ops-trace-toolbar__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .ops-trace-toolbar {
        grid-template-columns: 1fr;
    }

    .ops-trace-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.ops-dashboard-activity {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ops-dashboard-chip {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 30px;
    padding: .32rem .55rem;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.ops-dashboard-chip strong {
    color: #111827;
}

.ops-dashboard-chip small {
    color: #64748b;
    font-size: .7rem;
    font-weight: 800;
}

.ops-dashboard-chip--steel {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.ops-dashboard-chip--amber {
    border-color: #f3d98b;
    background: #fff8df;
}

.ops-dashboard-chip--emerald {
    border-color: #badbcc;
    background: #eefaf3;
}

.ops-dashboard-chip--ruby {
    border-color: #f4c2c2;
    background: #fff1f2;
}

.ops-dashboard-chip--sky {
    border-color: #bae6fd;
    background: #f0f9ff;
}

.ops-dashboard-chip--indigo {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.ops-dashboard-table {
    table-layout: fixed;
    /* Baja de 900 al retirarse la columna Horario: son seis columnas y la
       tarjeta ocupa el ancho de la pagina. */
    min-width: 820px;
}

.ops-dashboard-table th,
.ops-dashboard-table td {
    padding: .6rem .85rem;
}

/* Reparto de la tabla de la agenda. Vive a ancho completo de la pagina, asi
   que las siete columnas caben sin el scroll lateral que tenia cuando la
   tarjeta ocupaba dos tercios. */
.ops-dashboard-table__flight { width: 21%; }
.ops-dashboard-table__operation { width: 14%; }
.ops-dashboard-table__route { width: 19%; }
.ops-dashboard-table__status { width: 16%; }
.ops-dashboard-table__bags { width: 21%; }
.ops-dashboard-table__actions { width: 9%; }

.ops-dashboard-route {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.ops-dashboard-activity .ops-activity-list {
    gap: .65rem;
}

.ops-dashboard-activity .ops-activity-item {
    gap: .9rem;
    padding: .75rem 1rem;
}

.ops-dashboard-activity .ops-activity-item__body {
    min-width: 0;
}

.ops-dashboard-activity .ops-activity-item__meta {
    gap: .42rem 1rem;
}

.ops-dashboard-activity .ops-activity-item__time {
    margin-left: .25rem;
    padding-left: .25rem;
}

@media (max-width: 767.98px) {
    .ops-dashboard-chip {
        white-space: normal;
    }
}

/* Platform appearance preferences */
.platform-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.platform-choice-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-height: 88px;
    padding: .85rem;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: #fbfdff;
    color: #172033;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.platform-choice-card:hover {
    border-color: rgba(var(--bs-primary-rgb), .45);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.btn-check:checked + .platform-choice-card {
    border-color: var(--at-sidebar-accent);
    background: rgba(var(--bs-primary-rgb), .08);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .22);
}

.platform-choice-card__icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--at-sidebar-accent);
    flex-shrink: 0;
}

.platform-choice-card strong,
.platform-choice-card small {
    display: block;
}

.platform-choice-card small {
    margin-top: .2rem;
    color: #64748b;
    line-height: 1.35;
}

.platform-theme-preview__table {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 8px;
}

.platform-theme-preview__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .75rem;
    align-items: center;
    padding: .55rem .7rem;
    background: rgba(255, 255, 255, .72);
    border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.platform-theme-preview__row:last-child {
    border-bottom: 0;
}

.platform-theme-preview__row span {
    color: #64748b;
}

.platform-theme-preview__row em {
    min-width: 82px;
    padding: .18rem .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--platform-primary) 16%, white);
    color: color-mix(in srgb, var(--platform-primary) 70%, #0f172a);
    font-style: normal;
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
}

.platform-theme-preview--dark {
    background: linear-gradient(135deg, #111827 0%, color-mix(in srgb, var(--platform-primary) 26%, #020617) 58%, #0f172a 100%);
    color: #e5edf7;
}

.platform-theme-preview--dark .platform-theme-preview__eyebrow,
.platform-theme-preview--dark .platform-theme-preview__label,
.platform-theme-preview--dark .platform-theme-preview__row span {
    color: #93a4b8;
}

.platform-theme-preview--dark .platform-theme-preview__sidebar,
.platform-theme-preview--dark .platform-theme-preview__content,
.platform-theme-preview--dark .platform-theme-preview__row {
    background: rgba(15, 23, 42, .78);
    border-color: rgba(148, 163, 184, .2);
}

.platform-theme-preview--dark .platform-theme-preview__menu-item {
    background: rgba(255, 255, 255, .06);
    color: #cbd5e1;
}

.platform-theme-preview--dark .platform-theme-preview__menu-item.is-active {
    background: color-mix(in srgb, var(--platform-primary) 28%, #111827);
    color: #f8fafc;
}

.platform-theme-preview--compact {
    padding: .9rem;
}

.platform-theme-preview--compact .platform-theme-preview__body {
    gap: .65rem;
}

.platform-theme-preview--compact .platform-theme-preview__sidebar,
.platform-theme-preview--compact .platform-theme-preview__content {
    padding: .75rem;
}

.platform-theme-preview--compact .platform-theme-preview__menu-item,
.platform-theme-preview--compact .platform-theme-preview__row {
    padding-top: .4rem;
    padding-bottom: .4rem;
}

@media (max-width: 767.98px) {
    .platform-choice-grid {
        grid-template-columns: 1fr;
    }
}

body.at-theme-dark {
    --at-body-bg: #0f172a;
    --at-card-bg: #111827;
    --at-border: rgba(148, 163, 184, .22);
    --at-table-border: rgba(148, 163, 184, .22);
    --at-text-primary: #e5edf7;
    --at-text-muted: #94a3b8;
    --at-sidebar-bg: #020617;
    --at-sidebar-text: #9aa8bd;
    --at-sidebar-hover: rgba(255, 255, 255, .08);
    --at-sidebar-section: #64748b;
    --at-ink-950: #020617;
    --at-ink-900: #0f172a;
    --at-ink-800: #1e293b;
    --at-surface-strong: #111827;
    --at-surface-soft: rgba(15, 23, 42, .82);
    --bs-body-bg: #0f172a;
    --bs-body-color: #e5edf7;
    --bs-border-color: rgba(148, 163, 184, .22);
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-bg: #1e293b;
}

/* El modo oscuro repite el fondo del login oscuro: misma base y mismos focos,
   tambien sin la reticula. El velo de arriba va en el tono de la tarjeta, que es
   el que llevan la barra superior y la ruta en este tema. */
body.at-theme-dark.at-shell {
    background-color: rgb(var(--at-page-surface-dark-rgb, 15, 23, 42));
    background-image:
        linear-gradient(180deg, #111827 0, #111827 240px, rgba(17, 24, 39, .55) 46vh, rgba(17, 24, 39, 0) 78vh),
        radial-gradient(ellipse 72% 56% at 50% 42%, rgba(var(--bs-primary-rgb), .14), transparent 60%),
        radial-gradient(circle at 50% 116%, rgba(var(--at-secondary-rgb, 21, 164, 217), .12), transparent 52%);
    background-attachment: fixed;
}

/* En oscuro el encabezado si es una tarjeta, no el fondo, asi que el subtitulo
   no puede llevar el tono oscuro del tema claro: alli daria 2.4:1. Vuelve al
   gris claro del tema, que ademas corrige el 3.73:1 que tenia con #64748b. */
body.at-theme-dark .page-subtitle {
    color: #94a3b8 !important;
}

body.at-theme-dark .at-navbar,
body.at-theme-dark .breadcrumb-wrapper,
body.at-theme-dark .page-header,
body.at-theme-dark .at-footer,
body.at-theme-dark .card,
body.at-theme-dark .card-header,
body.at-theme-dark .ops-section-card,
body.at-theme-dark .ops-alert-card,
body.at-theme-dark .dashboard-kpi-card,
body.at-theme-dark .ops-flight-card,
body.at-theme-dark .ops-flow-card,
body.at-theme-dark .timeline-content {
    background: rgba(17, 24, 39, .92);
    border-color: rgba(148, 163, 184, .18);
    color: #e5edf7;
}

/* En oscuro el pie tampoco es una tarjeta: se apoya en el fondo como en claro,
   con el gris claro del tema, que sobre esa superficie da 6.74:1. */
body.at-theme-dark .at-footer {
    background: transparent;
    border-top: none;
    color: #94a3b8;
}

/* Y la ruta de navegacion, igual que en claro. La barra si conserva su relleno
   -el .92 sobre el velo #111827 da ese mismo tono, o sea que tampoco se ve- pero
   sin borde, que es lo que la separaba del fondo. */
body.at-theme-dark .breadcrumb-wrapper {
    background: transparent;
    border-bottom: none;
}

body.at-theme-dark .at-navbar {
    border-bottom: none;
    box-shadow: none;
}

/* --at-ink-900 es tinta en el tema claro y superficie en el oscuro, asi que el
   titulo de la tarjeta se pintaba del color de su propio fondo y desaparecia.
   Se corrige el color y no el token, que en oscuro lo usan como fondo otras
   piezas. Sale a la luz ahora que el tema oscuro es alcanzable desde la barra. */
body.at-theme-dark .ops-section-card__title {
    color: #e5edf7;
}

body.at-theme-dark .bg-white,
body.at-theme-dark .bg-light {
    background-color: #111827 !important;
}

body.at-theme-dark .text-dark,
body.at-theme-dark .page-title,
body.at-theme-dark .stat-card-value,
body.at-theme-dark .ops-dashboard-chip strong,
body.at-theme-dark .ops-trace-radar__chip strong,
body.at-theme-dark .ops-maletas-radar__chip strong {
    color: #f8fafc !important;
}

body.at-theme-dark .text-muted,
body.at-theme-dark .page-subtitle,
body.at-theme-dark .form-text,
body.at-theme-dark .platform-logo-preview__label,
body.at-theme-dark .platform-config-note span,
body.at-theme-dark .ops-carretas-board__meta,
body.at-theme-dark .ops-aks-board__meta,
body.at-theme-dark .ops-vuelos-board__meta {
    color: #94a3b8 !important;
}

body.at-theme-dark .form-control,
body.at-theme-dark .form-select,
body.at-theme-dark .input-group-text,
body.at-theme-dark .dropdown-menu,
body.at-theme-dark .pagination .page-link {
    background-color: #0f172a;
    border-color: rgba(148, 163, 184, .26);
    color: #e5edf7;
}

body.at-theme-dark .form-control::placeholder {
    color: #64748b;
}

body.at-theme-dark .table {
    --bs-table-bg: transparent;
    --bs-table-color: #dbe7f4;
    --bs-table-border-color: var(--at-table-border);
    --bs-table-hover-bg: rgba(59, 130, 246, .08);
    --bs-table-hover-color: #f8fafc;
    border-color: var(--at-table-border);
}

body.at-theme-dark .table-light {
    --bs-table-bg: #162033;
    --bs-table-color: #aebbd0;
    --bs-table-border-color: var(--at-table-border);
    --bs-table-striped-bg: #1a263a;
    --bs-table-striped-color: #dbe7f4;
    --bs-table-active-bg: #1e2b42;
    --bs-table-active-color: #f8fafc;
    --bs-table-hover-bg: #1d2a40;
    --bs-table-hover-color: #f8fafc;
}

body.at-theme-dark .table thead,
body.at-theme-dark .table thead tr,
body.at-theme-dark .table thead th,
body.at-theme-dark .ops-table thead th {
    background-color: #162033;
    color: #aebbd0;
    border-color: var(--at-table-border);
}

body.at-theme-dark .table > :not(caption) > * > *,
body.at-theme-dark .table tr,
body.at-theme-dark .table th,
body.at-theme-dark .table td,
body.at-theme-dark .ops-table-wrap {
    border-color: var(--at-table-border);
}

body.at-theme-dark .table th {
    color: #9fb0c5;
}

body.at-theme-dark .platform-choice-card,
body.at-theme-dark .platform-logo-preview,
body.at-theme-dark .platform-logo-preview__frame,
body.at-theme-dark .ops-carretas-toolbar,
body.at-theme-dark .ops-aks-toolbar,
body.at-theme-dark .ops-vuelos-toolbar,
body.at-theme-dark .ops-maletas-toolbar,
body.at-theme-dark .ops-trace-toolbar {
    background: rgba(15, 23, 42, .78);
    border-color: rgba(148, 163, 184, .2);
    color: #e5edf7;
}

body.at-theme-dark .platform-preset {
    background: rgba(15, 23, 42, .78);
    border-color: rgba(148, 163, 184, .2);
}

body.at-theme-dark .platform-contrast-hint {
    background: rgba(217, 119, 6, .16);
    color: #fcd34d;
}

body.at-theme-dark .platform-preset__name { color: #e5edf7; }
body.at-theme-dark .platform-preset__codes { color: #94a3b8; }

body.at-theme-dark .platform-config-note {
    background:
        linear-gradient(180deg, rgba(var(--bs-primary-rgb), .1), rgba(15, 23, 42, .82));
    border-color: rgba(var(--bs-primary-rgb), .24);
    color: #e5edf7;
}

body.at-theme-dark .platform-choice-card small,
body.at-theme-dark .platform-logo-preview__placeholder,
body.at-theme-dark .ops-vuelos-board__view,
body.at-theme-dark .ops-dashboard-chip,
body.at-theme-dark .ops-trace-radar__chip,
body.at-theme-dark .ops-trace-radar__empty,
body.at-theme-dark .ops-maletas-radar__chip,
body.at-theme-dark .ops-maletas-radar__empty,
body.at-theme-dark .ops-report-flight-summary__chip {
    color: #94a3b8;
}

body.at-theme-dark .ops-dashboard-chip,
body.at-theme-dark .ops-trace-radar__chip,
body.at-theme-dark .ops-trace-radar__empty,
body.at-theme-dark .ops-maletas-radar__chip,
body.at-theme-dark .ops-maletas-radar__empty,
body.at-theme-dark .ops-report-flight-summary__chip {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(148, 163, 184, .22);
}

body.at-theme-dark .ops-report-flight-summary__chip strong {
    color: #f8fafc;
}

body.at-theme-dark .ops-radar-row__bar,
body.at-theme-dark .ops-flow-card__progress {
    background: rgba(148, 163, 184, .16);
    border: 1px solid rgba(148, 163, 184, .12);
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(2, 6, 23, .42);
}

body.at-theme-dark .ops-radar-row__fill,
body.at-theme-dark .ops-flow-card__progress-fill {
    box-shadow: 0 0 14px rgba(255, 255, 255, .08);
}

body.at-theme-dark .ops-radar-group { border-top-color: rgba(148,163,184,.25); }
body.at-theme-dark .ops-radar-row--link:hover,
body.at-theme-dark .ops-radar-row--link:focus-visible { background: rgba(148,163,184,.16); }
body.at-theme-dark .ops-radar-row--link.is-active { background: rgba(129,140,248,.16); box-shadow: inset 0 0 0 1px rgba(129,140,248,.35); }
body.at-theme-dark .ops-radar-row__fill--steel,
body.at-theme-dark .ops-flow-card__progress-fill--steel {
    background: linear-gradient(90deg, #64748b, #94a3b8);
}

body.at-theme-dark .ops-radar-row__fill--amber,
body.at-theme-dark .ops-flow-card__progress-fill--amber {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

body.at-theme-dark .ops-radar-row__fill--emerald,
body.at-theme-dark .ops-flow-card__progress-fill--emerald {
    background: linear-gradient(90deg, #059669, #34d399);
}

body.at-theme-dark .ops-radar-row__fill--ruby,
body.at-theme-dark .ops-flow-card__progress-fill--ruby {
    background: linear-gradient(90deg, #e11d48, #fb7185);
}

body.at-theme-dark .ops-radar-row__fill--sky,
body.at-theme-dark .ops-flow-card__progress-fill--sky {
    background: linear-gradient(90deg, #0284c7, #38bdf8);
}

body.at-theme-dark .ops-radar-row__fill--indigo,
body.at-theme-dark .ops-flow-card__progress-fill--indigo {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

body.at-theme-dark .ops-route-chip {
    background: rgba(var(--bs-primary-rgb), .14);
    border-color: rgba(var(--bs-primary-rgb), .28);
    color: #dbeafe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.at-theme-dark .ops-report-flight-table__route i,
body.at-theme-dark .ops-dashboard-route i,
body.at-theme-dark .ops-vuelos-table__route-line i {
    color: #64748b;
}

body.at-theme-dark .ops-report-card {
    background:
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(15, 23, 42, .9));
    border-color: rgba(148, 163, 184, .2);
    color: #e5edf7;
    box-shadow: 0 18px 36px rgba(2, 6, 23, .28);
}

body.at-theme-dark .ops-report-card:hover {
    border-color: rgba(var(--bs-primary-rgb), .32);
    background:
        linear-gradient(180deg, rgba(24, 34, 51, .98), rgba(17, 24, 39, .94));
}

body.at-theme-dark .ops-report-card__icon {
    background: rgba(15, 23, 42, .82);
    border: 1px solid rgba(148, 163, 184, .18);
}

body.at-theme-dark .ops-report-card__title {
    color: #f8fafc;
}

body.at-theme-dark .ops-report-card__text {
    color: #94a3b8;
}

body.at-theme-dark .ops-report-card__cta {
    color: #93c5fd;
}

body.at-theme-dark .ops-detail-item {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(148, 163, 184, .2);
    color: #e5edf7;
}

body.at-theme-dark .ops-detail-item span {
    color: #93a4b8;
}

body.at-theme-dark .ops-detail-item strong {
    color: #f8fafc;
}

body.at-theme-dark .ops-detail-grid--manifest-summary .ops-detail-item {
    border-color: rgba(var(--bs-primary-rgb), .18);
}

body.at-theme-dark .ops-note-card {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(var(--bs-primary-rgb), .24);
    color: #cbd5e1;
}

body.at-theme-dark .ops-note-card__label {
    color: #93c5fd;
}

body.at-theme-dark .ops-note-card p,
body.at-theme-dark .ops-note-card span {
    color: #cbd5e1;
}

body.at-theme-dark .ops-inline-note {
    background: rgba(245, 158, 11, .1);
    border-color: rgba(245, 158, 11, .24);
    color: #facc15;
}

body.at-theme-dark .password-strength {
    background: rgba(15, 23, 42, .72);
    border-color: rgba(148, 163, 184, .22);
}

body.at-theme-dark .password-strength__header {
    color: #93a4ba;
}

body.at-theme-dark .password-strength__header strong {
    color: #e5edf7;
}

body.at-theme-dark .password-strength__track {
    background: rgba(148, 163, 184, .2);
}

body.at-theme-dark .password-strength__rule {
    color: #94a3b8;
}

body.at-theme-dark .password-strength__rule.is-valid {
    color: #86efac;
}

body.at-theme-dark .at-confirm-modal .modal-content {
    background: #0f172a;
    border-color: rgba(148, 163, 184, .24);
    color: #e5edf7;
}

body.at-theme-dark .at-confirm-modal__content p {
    color: #94a3b8;
}

body.at-theme-dark .at-confirm-modal .modal-footer {
    border-color: rgba(148, 163, 184, .18);
}

body.at-theme-dark .at-session-modal__seconds {
    color: #fbbf24;
}

body.at-theme-dark .at-session-modal.is-urgent .at-session-modal__seconds {
    color: #f87171;
}

body.at-theme-dark .at-session-modal__unit,
body.at-theme-dark .at-session-modal__body {
    color: #94a3b8;
}

body.at-theme-dark .at-session-modal__status {
    color: #cbd5e1;
}

body.at-theme-dark .at-confirm-modal__icon {
    background: rgba(245, 158, 11, .14);
    color: #fbbf24;
}

body.at-theme-dark .at-confirm-modal__icon--danger {
    background: rgba(239, 68, 68, .14);
    color: #f87171;
}

body.at-theme-dark .at-confirm-modal__icon--success {
    background: rgba(22, 163, 74, .16);
    color: #4ade80;
}

body.at-theme-dark .at-confirm-modal__icon--info {
    background: rgba(37, 99, 235, .16);
    color: #93c5fd;
}

body.at-theme-dark .ops-activity-item {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(148, 163, 184, .18);
}

/* ══════════════════════════════════════════════════
   Tema oscuro — tintas que faltaban
   Estas piezas llevaban su color escrito a mano y el tema oscuro no las
   reescribia, asi que sobre la tarjeta oscura se pintaban de un tono casi
   igual a su propio fondo. Se agrupan por el papel que cumple el texto y no
   por componente: tinta fuerte al tono del cuerpo del tema, gris apagado al
   gris del tema. Medido sobre la tarjeta oscura, rgb(17, 24, 40).
   ══════════════════════════════════════════════════ */

/* Tinta fuerte: el dato, no su rotulo. En claro iba en #0f172a o #111827, que
   en oscuro es el color del propio fondo (1.01:1). */
body.at-theme-dark .ops-flight-list-card__meta-item strong,
body.at-theme-dark .ops-flight-summary-card strong,
body.at-theme-dark .ops-asset-card__meta strong,
body.at-theme-dark .ops-report-flight-summary__chip strong,
body.at-theme-dark .ops-empty-state strong,
body.at-theme-dark .ops-quick-flight__code {
    color: #e5edf7;
}

/* Gris apagado: rotulos, notas y textos de apoyo. En claro iban entre #475569 y
   #6b7280, que en oscuro se quedan entre 2.3 y 3.7:1. */
body.at-theme-dark .dashboard-kpi-card__content span,
body.at-theme-dark .ops-flight-card__meta,
body.at-theme-dark .ops-activity-item__meta,
body.at-theme-dark .ops-empty-state,
body.at-theme-dark .ops-flight-list-card__meta-item span,
body.at-theme-dark .ops-flight-summary-card span,
body.at-theme-dark .ops-asset-card__description,
body.at-theme-dark .ops-asset-card__meta span,
body.at-theme-dark .ops-quick-flight__bags,
body.at-theme-dark .ops-report-flight-summary__chip,
body.at-theme-dark .platform-option-card ul,
body.at-theme-dark .platform-theme-swatch__label,
body.at-theme-dark .ops-section-card__eyebrow,
body.at-theme-dark .ops-alert-card__text,
body.at-theme-dark .dashboard-kpi-card__content small,
body.at-theme-dark .ops-flight-card__route,
body.at-theme-dark .ops-flow-card__foot,
body.at-theme-dark .ops-flight-list-card__airline,
body.at-theme-dark .ops-detail-item span,
body.at-theme-dark .ops-note-card__label,
body.at-theme-dark .ops-quick-flight__meta {
    color: #94a3b8;
}

/* Los rotulos de las barras de filtro. La regla oscura de la barra ya pone un
   color en el contenedor, pero cada `.form-label` trae el suyo propio y gana. */
body.at-theme-dark .ops-report-toolbar .form-label,
body.at-theme-dark .ops-carretas-toolbar .form-label,
body.at-theme-dark .ops-aks-toolbar .form-label,
body.at-theme-dark .ops-vuelos-toolbar .form-label,
body.at-theme-dark .ops-maletas-toolbar .form-label,
body.at-theme-dark .ops-trace-toolbar .form-label {
    color: #cbd5e1;
}

/* El boton que pliega el menu: en claro es una pastilla blanca con tinta
   pizarra, y en oscuro esa pastilla blanca era lo unico claro de la barra. */
body.at-theme-dark .at-shell-toggle {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(148, 163, 184, .22);
    color: #cbd5e1;
    box-shadow: none;
}

body.at-theme-dark .at-shell-toggle:hover {
    background: rgba(255, 255, 255, .12);
    color: #f1f5f9;
}

/* Avisos con lavado de color propio. El lavado es translucido, asi que sobre la
   tarjeta oscura se oscurece y la tinta oscura de cada uno deja de leerse: se
   sube el lavado y la tinta pasa al tono claro del mismo matiz. */
body.at-theme-dark .ops-danger-banner {
    background: linear-gradient(135deg, rgba(223, 68, 92, .22), rgba(245, 158, 11, .10));
    border-color: rgba(248, 113, 113, .3);
    color: #fecdd3;
}

body.at-theme-dark .ops-danger-banner__text {
    color: #fda4af;
}

body.at-theme-dark .ops-danger-banner i {
    color: #fb7185;
}

body.at-theme-dark .ops-diagnostic-item--issue {
    background: rgba(239, 68, 68, .16);
    border-color: rgba(239, 68, 68, .3);
    color: #fca5a5;
}

body.at-theme-dark .ops-diagnostic-item--warning {
    background: rgba(245, 158, 11, .16);
    border-color: rgba(245, 158, 11, .3);
    color: #fcd34d;
}

/* Los tres rezagados del barrido: dos iconos de la pantalla de configuracion y
   el pie de los chips del tablero. */
body.at-theme-dark .platform-logo-preview__placeholder i,
body.at-theme-dark .platform-config-note i {
    color: #93c5fd;
}

body.at-theme-dark .ops-dashboard-chip small {
    color: #94a3b8;
}

/* Las pastillas de estado son el mismo caso, y el mas visible: aparecen en cada
   fila de cada listado. Su lavado claro con tinta oscura sobre la tarjeta oscura
   dejaba el texto entre 1 y 3:1. Con estos tonos van de 7.18 a 9.46. */
body.at-theme-dark .ops-status-pill--secondary {
    background: rgba(148, 163, 184, .18);
    color: #cbd5e1;
}

body.at-theme-dark .ops-status-pill--warning {
    background: rgba(245, 158, 11, .18);
    color: #fcd34d;
}

body.at-theme-dark .ops-status-pill--success {
    background: rgba(52, 211, 153, .18);
    color: #6ee7b7;
}

body.at-theme-dark .ops-status-pill--danger {
    background: rgba(248, 113, 113, .18);
    color: #fca5a5;
}

body.at-theme-dark .ops-status-pill--primary {
    background: rgba(129, 140, 248, .18);
    color: #c7d2fe;
}

body.at-theme-dark .ops-status-pill--info {
    background: rgba(56, 189, 248, .18);
    color: #bae6fd;
}

/* Los chips de los radares codifican su familia con un lavado y un borde de
   color, y dejan la tinta en neutro. Las dos reglas oscuras de mas arriba ponen
   ese lavado en todos por igual y le ganan por especificidad a los
   modificadores, asi que en oscuro los seis salian del mismo gris pizarra: se
   leian bien, pero la codificacion por color se perdia. Aqui se repite ese
   codigo agrupado por familia y no por componente —una decision por matiz en vez
   de una por chip—, con la misma paleta que ya distingue las barras del radar.
   El lavado es translucido y sobre la tarjeta oscura se apaga, asi que se sube;
   la tinta no se toca, porque en claro tampoco lleva color. Medido sobre la
   tarjeta oscura, el rotulo gris queda entre 4.83 y 5.41:1. */
body.at-theme-dark .ops-dashboard-chip--steel,
body.at-theme-dark .ops-dashboard-chip--slate,
body.at-theme-dark .ops-trace-radar__chip--steel,
body.at-theme-dark .ops-maletas-radar__chip--steel {
    background: rgba(148, 163, 184, .16);
    border-color: rgba(148, 163, 184, .34);
}

body.at-theme-dark .ops-dashboard-chip--amber,
body.at-theme-dark .ops-trace-radar__chip--amber,
body.at-theme-dark .ops-maletas-radar__chip--amber {
    background: rgba(251, 191, 36, .16);
    border-color: rgba(251, 191, 36, .40);
}

body.at-theme-dark .ops-dashboard-chip--emerald,
body.at-theme-dark .ops-trace-radar__chip--emerald,
body.at-theme-dark .ops-maletas-radar__chip--emerald {
    background: rgba(52, 211, 153, .16);
    border-color: rgba(52, 211, 153, .40);
}

body.at-theme-dark .ops-dashboard-chip--ruby,
body.at-theme-dark .ops-trace-radar__chip--ruby,
body.at-theme-dark .ops-maletas-radar__chip--ruby {
    background: rgba(251, 113, 133, .16);
    border-color: rgba(251, 113, 133, .40);
}

body.at-theme-dark .ops-dashboard-chip--sky,
body.at-theme-dark .ops-trace-radar__chip--sky,
body.at-theme-dark .ops-maletas-radar__chip--sky {
    background: rgba(56, 189, 248, .16);
    border-color: rgba(56, 189, 248, .40);
}

body.at-theme-dark .ops-dashboard-chip--indigo,
body.at-theme-dark .ops-trace-radar__chip--indigo,
body.at-theme-dark .ops-maletas-radar__chip--indigo {
    background: rgba(129, 140, 248, .16);
    border-color: rgba(129, 140, 248, .40);
}

/* El estado vacio es un panel con lavado propio casi blanco —rgba(248,250,252,.7)—
   y la seccion oscura solo le reescribio la tinta: sobre la tarjeta oscura
   quedaba un panel claro con texto claro encima, 1.72:1 el titulo y 1.26:1 el
   texto de apoyo. El inventario de la sesion pasada midio tintas contra la
   tarjeta y no fondos propios, y por eso no lo vio. El panel toma aqui su propia
   superficie oscura y la tinta que ya tenia vuelve a leerse: 13.49 el titulo,
   6.21 el texto de apoyo y el icono. */
body.at-theme-dark .ops-empty-state {
    background: rgba(148, 163, 184, .07);
    border-color: rgba(148, 163, 184, .28);
}

/* La variante en linea no lleva panel —ni fondo ni borde— y la regla de arriba
   le gana por especificidad, asi que hay que reponerselos. */
body.at-theme-dark .ops-empty-state--inline {
    background: transparent;
    border: none;
}

/* Mismo caso en el resumen del vuelo: cada recuadro lleva su lavado casi blanco
   y solo se le reescribio la tinta, asi que el dato quedaba en 1.19:1 y su
   rotulo en 1.83:1 —el numero grande, practicamente invisible—. Con la
   superficie oscura vuelven a 13.33 y 6.14. */
body.at-theme-dark .ops-flight-summary-card > div {
    background: rgba(148, 163, 184, .08);
    border-color: rgba(148, 163, 184, .22);
}

/* ══════════════════════════════════════════════════
   Tema oscuro — las utilidades de color de Bootstrap
   Bootstrap 5.3 resuelve `text-*-emphasis`, `bg-*-subtle` y `border-*-subtle`
   con variables que solo reescribe bajo `[data-bs-theme=dark]`, y el tema de la
   casa va por `body.at-theme-dark`: las variables se quedaban en sus valores
   claros. Quedaba tinta oscura sobre la tarjeta oscura —el candado de las maletas
   RUSH, en 1.6:1— y lavados casi blancos donde deberia haber un fondo tenue.
   Se redefinen las tres familias de una vez y no utilidad por utilidad: son 56
   usos en las vistas y cualquiera que se agregue manana ya queda cubierto. Los
   tonos son los de las pastillas de estado, para que el candado rojo y la
   pastilla roja sean el mismo rojo. El primario sale del color de marca
   configurado, como ya hace el chip de ruta.
   Medido sobre la tarjeta oscura, cada tinta sobre su propio lavado: de 7.43
   —rojo— a 9.95 —informativo—.
   ══════════════════════════════════════════════════ */
body.at-theme-dark {
    --bs-danger-text-emphasis: #fca5a5;
    --bs-warning-text-emphasis: #fcd34d;
    --bs-success-text-emphasis: #6ee7b7;
    --bs-info-text-emphasis: #bae6fd;
    --bs-secondary-text-emphasis: #cbd5e1;
    --bs-primary-text-emphasis: #dbeafe;
    --bs-light-text-emphasis: #f8fafc;
    --bs-dark-text-emphasis: #e5edf7;

    --bs-danger-bg-subtle: rgba(248, 113, 113, .16);
    --bs-warning-bg-subtle: rgba(245, 158, 11, .16);
    --bs-success-bg-subtle: rgba(52, 211, 153, .16);
    --bs-info-bg-subtle: rgba(56, 189, 248, .16);
    --bs-secondary-bg-subtle: rgba(148, 163, 184, .16);
    --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), .16);
    --bs-light-bg-subtle: rgba(148, 163, 184, .10);
    --bs-dark-bg-subtle: rgba(2, 6, 23, .55);

    --bs-danger-border-subtle: rgba(248, 113, 113, .35);
    --bs-warning-border-subtle: rgba(245, 158, 11, .35);
    --bs-success-border-subtle: rgba(52, 211, 153, .35);
    --bs-info-border-subtle: rgba(56, 189, 248, .35);
    --bs-secondary-border-subtle: rgba(148, 163, 184, .30);
    --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), .30);
    --bs-light-border-subtle: rgba(148, 163, 184, .22);
    --bs-dark-border-subtle: rgba(148, 163, 184, .20);
}

/* El boton fantasma oscuro es el mismo problema con otra cara: su tinta y su
   borde son `#212529`, o sea el color del fondo del tema —1.09:1, invisible—.
   Lo usa el icono de trazabilidad en seis vistas. En oscuro invierte de papel y
   pasa a ser un fantasma claro, que es lo que significa ahi: el mismo contraste
   discreto que tiene en claro, pero al reves. Se reescriben sus variables de
   boton para conservar el relleno al pasar el raton. */
body.at-theme-dark .btn-outline-dark {
    --bs-btn-color: #cbd5e1;
    --bs-btn-border-color: rgba(148, 163, 184, .38);
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #cbd5e1;
    --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #cbd5e1;
    --bs-btn-active-border-color: #cbd5e1;
    --bs-btn-disabled-color: rgba(148, 163, 184, .45);
    --bs-btn-disabled-border-color: rgba(148, 163, 184, .18);
}

body.at-density-compact {
    --at-navbar-height: 50px;
    font-size: .82rem;
}

body.at-density-compact .page-header {
    padding: .8rem 1.25rem .45rem;
    margin-bottom: .85rem;
}

body.at-density-compact .page-body {
    padding: 0 1.25rem 1rem;
}

body.at-density-compact .card-header,
body.at-density-compact .card-body {
    padding: .7rem .9rem;
}

body.at-density-compact .table th,
body.at-density-compact .table td,
body.at-density-compact .ops-carretas-table th,
body.at-density-compact .ops-carretas-table td,
body.at-density-compact .ops-aks-table th,
body.at-density-compact .ops-aks-table td,
body.at-density-compact .ops-vuelos-table th,
body.at-density-compact .ops-vuelos-table td,
body.at-density-compact .ops-maletas-table th,
body.at-density-compact .ops-maletas-table td,
body.at-density-compact .ops-trace-table th,
body.at-density-compact .ops-trace-table td,
body.at-density-compact .ops-dashboard-table th,
body.at-density-compact .ops-dashboard-table td {
    padding: .42rem .65rem;
}

body.at-density-compact .form-control,
body.at-density-compact .form-select,
body.at-density-compact .btn {
    padding-top: .34rem;
    padding-bottom: .34rem;
}

/* Input de hora: icono del selector nativo mas grande y clickeable en toda
   la caja, para que abrir el reloj no dependa de acertarle al icono diminuto. */
input[type="time"] {
    cursor: pointer;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    padding: .35rem;
    margin-inline-start: .35rem;
    cursor: pointer;
    transform: scale(1.3);
}

body.at-density-compact .ops-hero,
body.at-density-compact .ops-page-hero,
body.at-density-compact .ops-section-card {
    padding: 1rem;
}

body.at-density-compact .ops-carretas-toolbar,
body.at-density-compact .ops-aks-toolbar,
body.at-density-compact .ops-vuelos-toolbar,
body.at-density-compact .ops-maletas-toolbar,
body.at-density-compact .ops-trace-toolbar {
    gap: .5rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

/* ══════════════════════════════════════════════════
   ASG-BRS — Accesibilidad & Responsive Refinements
   ══════════════════════════════════════════════════ */

/* ── 1. Input de búsqueda responsive ───────────────
   Reemplaza el style="width:240px" hardcodeado en
   trazabilidad/index con una clase manejable en CSS. */
.at-search-input {
    width: min(100%, 240px);
}

@media (max-width: 575.98px) {
    .at-search-input {
        width: 100%;
    }
}

/* ── 2. Touch targets — pointer:coarse (dispositivos táctiles) ──
   WCAG 2.5.5 exige 44×44 px de área mínima de toque.
   La media query pointer:coarse identifica dispositivos
   donde el puntero es impreciso (dedos), sin afectar escritorio. */
@media (pointer: coarse) {
    /* Botones pequeños — altura y ancho mínimos */
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Links del sidebar */
    .sidebar-link {
        min-height: 44px;
    }

    /* Botón toggle del sidebar */
    .at-shell-toggle {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ── 3. Legibilidad en móvil ───────────────────────
   14 px del body es correcto en escritorio pero algo
   ajustado en pantallas pequeñas de alta densidad.
   15 px mejora la legibilidad sin romper el diseño. */
@media (max-width: 767.98px) {
    body {
        font-size: .9375rem; /* 15px — +1px vs. 14px base */
    }

    .table {
        font-size: .8rem;
    }

    .table th {
        font-size: .7rem;
    }
}

/* ── 4a. Motion sensitivity — prefers-reduced-motion ──
   Usuarios que configuraron "reducir movimiento" en su SO
   ven transiciones instantáneas en vez de animaciones. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* Neutraliza los transforms decorativos de hover */
    .ops-alert-card:hover,
    .stat-card:hover,
    .ops-quick-flight:hover,
    .ops-report-card:hover {
        transform: none;
        box-shadow: none;
    }

    /* La barra de progreso de contraseña ya no hace fade */
    .password-strength__track span {
        transition: none;
    }
}

/* ── 4b. hover:none — dispositivos sin hover real ──
   En móviles y tablets los efectos :hover se disparan
   con el primer tap y quedan "pegados". Los desactivamos
   para que el look sea siempre el estado normal. */
@media (hover: none) {
    .ops-alert-card:hover,
    .stat-card:hover,
    .ops-quick-flight:hover,
    .ops-report-card:hover {
        transform: none;
        box-shadow: none;
        border-color: inherit;
    }
}

/* ══════════════════════════════════════════════════
   Botones primarios siguen el color de marca
   ──────────────────────────────────────────────────
   Bootstrap 5.3 fija los colores de .btn-primary y
   .btn-outline-primary con valores LITERALES en sus
   variables de componente (--bs-btn-bg, etc.), por lo
   que no reaccionan a --bs-primary. Las remapeamos a las
   variables de marca (--at-primary-*) para que la
   personalización de colores también alcance los botones.
   Esta hoja carga después de Bootstrap, así que gana.
   ══════════════════════════════════════════════════ */
.btn-primary {
    --bs-btn-bg: var(--at-primary-500);
    --bs-btn-border-color: var(--at-primary-500);
    --bs-btn-hover-bg: var(--at-primary-600);
    --bs-btn-hover-border-color: var(--at-primary-600);
    --bs-btn-active-bg: var(--at-primary-600);
    --bs-btn-active-border-color: var(--at-primary-600);
    --bs-btn-disabled-bg: var(--at-primary-500);
    --bs-btn-disabled-border-color: var(--at-primary-500);
}

.btn-outline-primary {
    --bs-btn-color: var(--at-primary-500);
    --bs-btn-border-color: var(--at-primary-500);
    --bs-btn-hover-bg: var(--at-primary-500);
    --bs-btn-hover-border-color: var(--at-primary-500);
    --bs-btn-active-bg: var(--at-primary-500);
    --bs-btn-active-border-color: var(--at-primary-500);
}

/* ══════════════════════════════════════════════════
   ASG-BRS — Motion operativo
   ──────────────────────────────────────────────────
   Movimiento con una sola funcion: acusar recibo de un
   cambio que hoy ocurre sin ninguna senal. Las vistas
   indice refrescan por polling cada 30 s y reemplazan
   tabla y contadores en silencio. Todo lo de aqui sale
   del token --at-transition; nada es decorativo.
   ══════════════════════════════════════════════════ */

/* ── Fila que cambio en un refresco silencioso ──
   La marca ENTRA instantanea (ninguna transicion declarada en
   el estado base) para no retrasar la lectura; solo el
   decaimiento se anima, y la transicion vive en su propia
   clase temporal para no contaminar el :hover de .table-hover,
   que quedaria lento si el td transicionara siempre. */
.table tbody tr.is-updated > td {
    background-color: rgba(var(--bs-primary-rgb), .14);
}

.table tbody tr.is-updated-out > td {
    transition: background-color 700ms cubic-bezier(.4, 0, .2, 1);
}

/* ── Contador cuyo valor cambio en el refresco ──
   inline-block es requisito para que el transform aplique
   sobre un <strong> o <span> de texto. */
.at-live-count {
    display: inline-block;
    transition: transform var(--at-transition), color var(--at-transition);
}

.at-live-count.is-bumped {
    transform: scale(1.18);
    color: var(--at-primary-500);
    transition-duration: 0ms;
}

/* ── Region AJAX mientras carga ──
   El retardo de 140 ms es lo importante: si el servidor responde
   rapido, el atenuado nunca alcanza a verse y no hay parpadeo.
   La recuperacion no lleva retardo: vuelve apenas llega la data. */
[data-refresh-url] {
    transition: opacity var(--at-transition) 140ms;
}

[data-refresh-url]:not(.opacity-50) {
    transition-delay: 0s;
}

/* El label "Actualizando..." comparte el retardo por la misma razon: con
   d-none parpadeaba en cada respuesta rapida. El espacio queda reservado
   para que aparecer no mueva la linea de meta del encabezado. */
[data-refresh-status] {
    opacity: 0;
    transition: opacity var(--at-transition) 140ms;
}

[data-refresh-status].is-visible {
    opacity: 1;
}

/* ── Feedback de pulsacion ──
   Bootstrap solo cambia color en :active, casi invisible en un
   boton oscuro de icono bajo sol. Se re-declara su lista completa
   de transiciones porque agregar transform de otro modo la pisaria. */
.btn {
    transition: color .15s ease-in-out, background-color .15s ease-in-out,
                border-color .15s ease-in-out, box-shadow .15s ease-in-out,
                transform 140ms cubic-bezier(.4, 0, .2, 1);
}

.btn:active {
    transform: scale(.97);
}

/* ── Aviso de carretas bloqueadas (bodegas/show) ──
   Con visibility en vez de d-none el espacio queda reservado:
   aparecer ya no empuja el formulario que el operador esta llenando. */
[data-carretas-aviso] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--at-transition), transform var(--at-transition),
                visibility 0s linear .22s;
}

[data-carretas-aviso].is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* ── Degradacion para reduccion de movimiento ──
   El bloque global de arriba deja toda transicion en .01ms. En
   estos casos el resaltado ES informacion, no adorno: se conserva
   el color (que sigue comunicando) y se retira el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .at-live-count.is-bumped { transform: none; }
    .btn:active { transform: none; }
    [data-carretas-aviso] { transform: none; }
}

/* ══════════════════════════════════════════════════
   Dashboard — Centro de Operaciones v2
   ──────────────────────────────────────────────────
   El tablero dejo de ser un encabezado decorativo con
   la informacion debajo. Ahora abre con cuatro cifras
   que se pueden abrir, la agenda del dia a ancho
   completo -donde antes se leia con scroll lateral- y
   el reparto de maletas como una sola barra.
   ══════════════════════════════════════════════════ */

/* ── Contexto de la jornada ──
   Vive en las acciones del encabezado, donde antes habia dos botones que
   repetian el menu lateral. Dice lo unico que no esta en ninguna otra parte
   de la pantalla: en que aeropuerto y a que hora se esta operando. */
.ops-daychip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .75rem;
    border: 1px solid var(--at-border);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #4e5766;
    font-size: .78rem;
    font-weight: 700;
}

.ops-daychip__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ops-daychip__item i { color: var(--at-primary-500); }

.ops-daychip__divider {
    width: 1px;
    height: 14px;
    background: var(--at-border);
}

.ops-daychip__item--live {
    color: var(--at-ink-900);
    /* Cifras de ancho fijo: el reloj avanza cada segundo y sin esto la pastilla
       se ensancha y encoge sola en cada tic. */
    font-variant-numeric: tabular-nums;
}

.ops-daychip__item--live i { color: var(--at-emerald-500); }

/* ── Cifras de cabecera ──
   Cuatro y no mas: con el menu lateral abierto, una quinta tarjeta baja de los
   200 px y el rotulo en versalitas empieza a partirse en tres renglones. */
.ops-kpi-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
    .ops-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .ops-kpi-grid { grid-template-columns: 1fr; }
}

.dashboard-kpi-card__content { min-width: 0; }

/* En cuatro columnas la tarjeta ronda los 230 px y el rotulo en versalitas se
   parte en dos renglones por el espaciado entre letras. Aqui va mas cerrado
   que en los informes, donde la tarjeta es mas ancha. */
.ops-kpi-grid .dashboard-kpi-card__content span { letter-spacing: .08em; }

/* La tarjeta de cifra ahora es un enlace al listado ya filtrado. */
.dashboard-kpi-card--link {
    color: var(--at-ink-900);
    text-decoration: none;
    transition: transform var(--at-transition), border-color var(--at-transition), box-shadow var(--at-transition);
}

.dashboard-kpi-card--link:hover {
    color: var(--at-ink-900);
    transform: translateY(-2px);
    border-color: rgba(var(--bs-primary-rgb), .35);
}

.dashboard-kpi-card--link:focus-visible {
    outline: 2px solid var(--at-primary-500);
    outline-offset: 2px;
}

.dashboard-kpi-card__go {
    margin-left: auto;
    align-self: center;
    color: #94a3b8;
    font-size: .9rem;
    transition: transform var(--at-transition), color var(--at-transition);
}

.dashboard-kpi-card--link:hover .dashboard-kpi-card__go {
    transform: translateX(2px);
    color: var(--at-primary-500);
}

/* ── Cabeceras de las tarjetas del tablero ──
   La cabecera compartida no envuelve, y aqui la fila de la derecha puede
   llevar hasta cinco pastillas de estado mas el enlace: sin esto le come el
   ancho al titulo en vez de bajarse a su propio renglon. */
.ops-dashboard-board .ops-section-card__header,
.ops-dashboard-flow .ops-section-card__header,
.ops-dashboard-activity .ops-section-card__header {
    flex-wrap: wrap;
}

.ops-dashboard-board__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex: 1 1 auto;
    gap: .4rem;
}

.ops-dashboard-board__count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #5b677b;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.ops-dashboard-board__link {
    display: inline-flex;
    align-items: center;
    color: var(--at-primary-500);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ops-dashboard-board__link:hover { text-decoration: underline; }

.ops-dashboard-board__link:focus-visible {
    outline: 2px solid var(--at-primary-500);
    outline-offset: 2px;
    border-radius: 6px;
}

/* El conteo por estado dejo de ser decorado: cada pastilla abre el listado de
   vuelos filtrado por ese estado. */
.ops-dashboard-chip--link {
    text-decoration: none;
    transition: transform var(--at-transition), border-color var(--at-transition);
}

.ops-dashboard-chip--link:hover {
    transform: translateY(-1px);
    border-color: #94a3b8;
}

.ops-dashboard-chip--link:focus-visible {
    outline: 2px solid var(--at-primary-500);
    outline-offset: 2px;
}

/* ── Agenda del dia ── */
.ops-dashboard-table tbody tr:hover {
    background: rgba(var(--bs-primary-rgb), .04);
}

.ops-dashboard-table__flight-link {
    color: var(--at-ink-900);
    font-weight: 700;
    text-decoration: none;
}

.ops-dashboard-table__flight-link:hover {
    color: var(--at-primary-500);
    text-decoration: underline;
}

.ops-dashboard-table__sub {
    display: flex;
    align-items: center;
    gap: .25rem .45rem;
    flex-wrap: wrap;
    margin-top: .12rem;
    color: #6b7280;
    font-size: .74rem;
    min-width: 0;
}

.ops-dashboard-table__sub > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Posicion de parqueo, en la linea de la aerolinea desde que se retiro la
   columna Horario que la llevaba. */
.ops-dashboard-table__stand {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    flex-shrink: 0;
    font-weight: 700;
    color: #4e5766;
}

/* Dato que el vuelo todavia no tiene. Se dice con palabras y en gris, no con un
   guion, para que se distinga de un cero. */
.ops-dashboard-table__void {
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 600;
}

/* El total de maletas solo no dice nada. Contra las que ya estan en estado
   final dice cuanto le falta al vuelo para poder cerrarse. */
.ops-bag-progress {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.ops-bag-progress__count {
    color: #6b7280;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.ops-bag-progress__count strong {
    margin-right: .15rem;
    color: var(--at-ink-900);
    font-size: 1rem;
}

.ops-bag-progress__track {
    height: 6px;
    border-radius: 999px;
    background: #e7edf5;
    overflow: hidden;
}

.ops-bag-progress__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--at-primary-500);
    transition: width var(--at-transition);
}

.ops-bag-progress__fill.is-complete { background: var(--at-emerald-500); }

/* ── Flujo de maletas ──
   Una sola barra con el reparto completo. Comparar longitudes es mas rapido
   que leer una fila de pastillas con su porcentaje impreso al lado. */
.ops-flow-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .75rem;
}

.ops-flow-summary__value {
    color: var(--at-ink-900);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}

.ops-flow-summary__hint {
    flex: 1 1 180px;
    min-width: 0;
    color: #5b677b;
    font-size: .8rem;
    line-height: 1.45;
}

.ops-flow-bar {
    display: flex;
    height: 12px;
    border-radius: 999px;
    background: #e7edf5;
    overflow: hidden;
}

.ops-flow-bar__segment {
    flex: 0 1 auto;
    min-width: 3px;
}

/* Dos estados vecinos pueden compartir tono (en carreta y descargada son los
   dos el azul del transito), asi que el corte lo marca esta linea. */
.ops-flow-bar__segment + .ops-flow-bar__segment {
    box-shadow: inset 1px 0 0 rgba(255,255,255,.75);
}

.ops-flow-legend {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: grid;
    gap: .1rem;
}

.ops-flow-legend__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem .4rem;
    border-radius: 10px;
    color: #475569;
    font-size: .82rem;
    text-decoration: none;
    transition: background var(--at-transition), color var(--at-transition);
}

.ops-flow-legend__item:hover {
    background: rgba(var(--bs-primary-rgb), .06);
    color: var(--at-ink-900);
}

.ops-flow-legend__item:focus-visible {
    outline: 2px solid var(--at-primary-500);
    outline-offset: 1px;
}

.ops-flow-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ops-flow-legend__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ops-flow-legend__count {
    color: var(--at-ink-900);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ops-flow-legend__pct {
    width: 3.2rem;
    text-align: right;
    color: #94a3b8;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Los tonos del flujo son los mismos que ya usan las pastillas de estado del
   tablero, para que la barra y los chips hablen del mismo color. */
.ops-flow-bar__segment--steel,
.ops-flow-legend__dot--steel { background: #94a3b8; }
.ops-flow-bar__segment--sky,
.ops-flow-legend__dot--sky { background: var(--at-sky-500); }
.ops-flow-bar__segment--indigo,
.ops-flow-legend__dot--indigo { background: var(--at-indigo-500); }
.ops-flow-bar__segment--emerald,
.ops-flow-legend__dot--emerald { background: var(--at-emerald-500); }
.ops-flow-bar__segment--amber,
.ops-flow-legend__dot--amber { background: var(--at-amber-500); }
.ops-flow-bar__segment--ruby,
.ops-flow-legend__dot--ruby { background: var(--at-ruby-500); }

/* ── Tema oscuro ── */
body.at-theme-dark .ops-daychip {
    background: rgba(17, 24, 39, .92);
    border-color: rgba(148, 163, 184, .18);
    color: #cbd5e1;
}

body.at-theme-dark .ops-daychip__divider { background: rgba(148, 163, 184, .25); }
body.at-theme-dark .ops-daychip__item--live { color: #e5edf7; }

body.at-theme-dark .dashboard-kpi-card--link:hover { border-color: rgba(147, 197, 253, .45); }
body.at-theme-dark .dashboard-kpi-card__go { color: #64748b; }
body.at-theme-dark .dashboard-kpi-card--link:hover .dashboard-kpi-card__go { color: #93c5fd; }

body.at-theme-dark .ops-dashboard-board__count { color: #94a3b8; }
body.at-theme-dark .ops-dashboard-board__link { color: #93c5fd; }

body.at-theme-dark .ops-dashboard-table tbody tr:hover { background: rgba(147, 197, 253, .07); }
body.at-theme-dark .ops-dashboard-table__flight-link { color: #e5edf7; }
body.at-theme-dark .ops-dashboard-table__flight-link:hover { color: #93c5fd; }
body.at-theme-dark .ops-dashboard-table__sub { color: #94a3b8; }
body.at-theme-dark .ops-dashboard-table__stand { color: #cbd5e1; }
body.at-theme-dark .ops-dashboard-table__void { color: #64748b; }

body.at-theme-dark .ops-bag-progress__count { color: #94a3b8; }
body.at-theme-dark .ops-bag-progress__count strong { color: #e5edf7; }

body.at-theme-dark .ops-bag-progress__track,
body.at-theme-dark .ops-flow-bar { background: rgba(148, 163, 184, .22); }

body.at-theme-dark .ops-flow-bar__segment + .ops-flow-bar__segment {
    box-shadow: inset 1px 0 0 rgba(17, 24, 39, .7);
}

body.at-theme-dark .ops-flow-summary__value { color: #f8fafc; }
body.at-theme-dark .ops-flow-summary__hint { color: #94a3b8; }
body.at-theme-dark .ops-flow-legend__item { color: #cbd5e1; }

body.at-theme-dark .ops-flow-legend__item:hover {
    background: rgba(147, 197, 253, .08);
    color: #f8fafc;
}

body.at-theme-dark .ops-flow-legend__count { color: #f8fafc; }
body.at-theme-dark .ops-flow-legend__pct { color: #64748b; }

/* ── Densidad compacta ── */
body.at-density-compact .ops-kpi-grid { gap: .55rem; }
body.at-density-compact .ops-flow-legend__item { padding: .25rem .35rem; }
body.at-density-compact .ops-flow-summary { margin-bottom: .6rem; }

/* ── Degradacion para reduccion de movimiento ──
   El realce de color se conserva, que es el que comunica; se retira solo el
   desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .dashboard-kpi-card--link:hover,
    .ops-dashboard-chip--link:hover { transform: none; }
    .dashboard-kpi-card--link:hover .dashboard-kpi-card__go { transform: none; }
}

/* ══════════════════════════════════════════════════
   Listado de maletas — legibilidad y apilado
   ──────────────────────────────────────────────────
   La tabla se leia con scroll lateral por debajo de
   los 980px, mezclaba vuelo y bodega en una columna
   sin decir cual era cual, y el estado era una
   palabra sin icono. Aqui se corrigen las tres.
   ══════════════════════════════════════════════════ */

/* ── Codigo y sus marcas ── */
.ops-maletas-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--at-ink-900);
}

/* Segunda linea de una celda: el RFID, la hora del evento, las marcas. Siempre
   en gris y un cuerpo menor, para que no compita con el dato principal. */
.ops-maletas-table__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    margin-top: .2rem;
    color: #6b7280;
    font-size: .74rem;
}

.ops-maletas-table__sub i { margin-right: .25rem; }

.ops-maletas-rfid {
    display: inline-flex;
    align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* La decomisada no se veia en la fila pese a poder filtrarse por ella. */
.ops-maletas-flag {
    display: inline-flex;
    align-items: center;
    padding: .1rem .4rem;
    border: 1px solid #f4c2c2;
    border-radius: 6px;
    background: #fff1f2;
    color: #be2848;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Ubicacion ──
   Vuelo y bodega compartian columna sin distintivo. El icono dice de que tipo
   de sitio se habla antes de leer el codigo. */
.ops-maletas-place {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: var(--at-ink-900);
    text-decoration: none;
}

.ops-maletas-place > i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex-shrink: 0;
    font-size: .9rem;
}

.ops-maletas-place__body {
    display: grid;
    min-width: 0;
}

.ops-maletas-place__kind {
    color: #6b7280;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ops-maletas-place__value {
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ops-maletas-place--vuelo > i {
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--at-primary-500);
}

.ops-maletas-place--bodega > i {
    background: rgba(245, 158, 11, .14);
    color: var(--at-amber-500);
}

.ops-maletas-place--void > i {
    background: rgba(100, 116, 139, .12);
    color: #94a3b8;
}

.ops-maletas-place--void { color: #94a3b8; }

a.ops-maletas-place:hover .ops-maletas-place__value {
    color: var(--at-primary-500);
    text-decoration: underline;
}

a.ops-maletas-place:focus-visible {
    outline: 2px solid var(--at-primary-500);
    outline-offset: 2px;
    border-radius: 10px;
}

/* ── Estado y clasificacion ──
   Son dos cosas distintas: el estado dice donde va la pieza dentro del flujo,
   la clasificacion es una etiqueta de la aerolinea. Antes se dibujaban con la
   misma pastilla y se leian como si fueran lo mismo. La clasificacion pasa a
   contorno, que la separa sin quitarle su color. */
.ops-maletas-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.ops-class-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Los seis tonos del catalogo `colores_estado_maleta`. */
.ops-class-pill--danger { color: #be2848; }
.ops-class-pill--warning { color: #b45309; }
.ops-class-pill--info { color: #0b93c5; }
.ops-class-pill--success { color: #0f8f63; }
.ops-class-pill--secondary { color: #475569; }
.ops-class-pill--primary { color: #454fdb; }

/* La celda de acciones va centrada solo mientras es una tabla. Se centra desde
   aqui y no con la utilidad .text-center del markup porque esa lleva
   !important y en el apilado habria que pelearla con otro !important. */
.ops-maletas-table__actions-cell { text-align: center; }

/* ── Ultimo evento ── */
.ops-maletas-event {
    color: var(--at-ink-900);
    font-size: .82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.ops-maletas-void {
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 600;
}

/* ── Realce de la fila que pide atencion ──
   Solo las de aviso y error llevan barra. Si la llevaran todas, la barra
   dejaria de significar «mira esta» y volveria a ser adorno. Va como sombra
   interior y no como borde para no correr las columnas tres pixeles. */
.ops-maletas-row--danger > td:first-child {
    box-shadow: inset 3px 0 0 var(--at-ruby-500);
}

.ops-maletas-row--warning > td:first-child {
    box-shadow: inset 3px 0 0 var(--at-amber-500);
}

/* ══════════════════════════════════════════════════
   Apilado en tarjetas por debajo de 1200px
   ──────────────────────────────────────────────────
   Una tabla de 840px en un telefono de 390 no es
   responsiva: es una tabla que hay que arrastrar. Y
   el corte va en 1200 y no en 992 porque entre 993 y
   1199 el menu lateral sigue abierto y deja 653px de
   contenido, menos que a 992 con el menu oculto. Cada
   fila pasa a tarjeta y cada celda se rotula con su
   data-label.
   ══════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
    .ops-maletas-table-wrap {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .ops-maletas-table {
        display: block;
        min-width: 0;
        table-layout: auto;
    }

    .ops-maletas-table thead {
        /* El encabezado se va porque cada celda ya lleva su rotulo. No se oculta
           con display:none a secas para no sacarlo del arbol de accesibilidad
           antes de tiempo: la tabla completa sigue siendo la del escritorio. */
        display: none;
    }

    .ops-maletas-table tbody {
        display: grid;
        gap: .6rem;
    }

    .ops-maletas-table tbody tr {
        display: block;
        padding: .75rem .9rem;
        border: 1px solid rgba(226, 232, 240, .92);
        border-radius: 16px;
        background: #fff;
    }

    .ops-maletas-table tbody td {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        align-items: start;
        gap: .25rem .75rem;
        width: auto;
        padding: .3rem 0;
        border-bottom: 0;
        text-align: left;
    }

    .ops-maletas-table tbody td::before {
        content: attr(data-label);
        color: #6b7280;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding-top: .2rem;
    }

    .ops-maletas-table__actions-cell { text-align: left; }

    /* Una tarjeta con el rotulo SELECCION y nada debajo no dice nada. */
    .ops-maletas-table tbody td.ops-maletas-table__pick--vacia { display: none; }

    /* En tarjeta la barra de atencion es el borde izquierdo de la tarjeta, no
       una sombra dentro de la primera celda. */
    .ops-maletas-row--danger > td:first-child,
    .ops-maletas-row--warning > td:first-child {
        box-shadow: none;
    }

    .ops-maletas-table tbody tr.ops-maletas-row--danger {
        border-left: 3px solid var(--at-ruby-500);
    }

    .ops-maletas-table tbody tr.ops-maletas-row--warning {
        border-left: 3px solid var(--at-amber-500);
    }

    /* La fila vacia no es una tarjeta de maleta: recupera su celda suelta. */
    .ops-maletas-table tbody tr.ops-maletas-row-empty {
        display: table-row;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .ops-maletas-table tbody tr.ops-maletas-row-empty td {
        display: block;
        padding: 1rem 0;
    }

    .ops-maletas-table tbody tr.ops-maletas-row-empty td::before {
        content: none;
    }

    body.at-density-compact .ops-maletas-table tbody td {
        padding: .25rem 0;
    }
}

@media (max-width: 575.98px) {
    .ops-maletas-table tbody td {
        grid-template-columns: 1fr;
        gap: .1rem;
    }

    .ops-maletas-table tbody td::before { padding-top: 0; }
}

/* ── Tema oscuro ── */
body.at-theme-dark .ops-maletas-code { color: #e5edf7; }
body.at-theme-dark .ops-maletas-table__sub { color: #94a3b8; }
body.at-theme-dark .ops-maletas-place { color: #e5edf7; }
body.at-theme-dark .ops-maletas-place__kind { color: #94a3b8; }
body.at-theme-dark .ops-maletas-place--void { color: #64748b; }
body.at-theme-dark .ops-maletas-place--void > i { color: #64748b; }
body.at-theme-dark a.ops-maletas-place:hover .ops-maletas-place__value { color: #93c5fd; }
body.at-theme-dark .ops-maletas-event { color: #e5edf7; }
body.at-theme-dark .ops-maletas-void { color: #64748b; }

body.at-theme-dark .ops-maletas-flag {
    border-color: rgba(248, 113, 113, .45);
    background: rgba(248, 113, 113, .12);
    color: #fca5a5;
}

/* Las pastillas de contorno en oscuro necesitan los tonos claros del tema: los
   oscuros del claro caen por debajo de 3:1 sobre la tarjeta. */
body.at-theme-dark .ops-class-pill--danger { color: #fca5a5; }
body.at-theme-dark .ops-class-pill--warning { color: #fcd34d; }
body.at-theme-dark .ops-class-pill--info { color: #7dd3fc; }
body.at-theme-dark .ops-class-pill--success { color: #6ee7b7; }
body.at-theme-dark .ops-class-pill--secondary { color: #cbd5e1; }
body.at-theme-dark .ops-class-pill--primary { color: #a5b4fc; }

@media (max-width: 1199.98px) {
    body.at-theme-dark .ops-maletas-table tbody tr {
        background: rgba(17, 24, 39, .92);
        border-color: rgba(148, 163, 184, .18);
    }

    body.at-theme-dark .ops-maletas-table tbody td::before { color: #94a3b8; }

    body.at-theme-dark .ops-maletas-table tbody tr:has(.ops-empty-state) {
        background: transparent;
    }
}

/* ── Densidad compacta ── */
body.at-density-compact .ops-maletas-table__sub { margin-top: .1rem; }
body.at-density-compact .ops-maletas-place > i { width: 26px; height: 26px; }

@media (max-width: 1199.98px) {
    body.at-density-compact .ops-maletas-table tbody { gap: .45rem; }
    body.at-density-compact .ops-maletas-table tbody tr { padding: .55rem .7rem; }
}

/* ══════════════════════════════════════════════════
   Firma del representante — vista previa
   ──────────────────────────────────────────────────
   Caja del formulario de aerolineas donde se ve la
   firma que hoy se imprime en el Bingo Sheet.
   ══════════════════════════════════════════════════ */
.ops-firma-preview {
    display: grid;
    place-items: center;
    min-height: 92px;
    padding: .75rem;
    border: 1px dashed var(--at-border);
    border-radius: 14px;
    /* Cuadricula tenue: una firma con fondo transparente sobre blanco liso no
       deja ver si el recorte trae halo, y eso si se nota al imprimir. */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%),
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
}

.ops-firma-preview img {
    max-height: 72px;
    max-width: 100%;
    object-fit: contain;
}

.ops-firma-preview__empty {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 600;
}

.ops-firma-preview__empty i { font-size: 1rem; }

body.at-theme-dark .ops-firma-preview {
    border-color: rgba(148, 163, 184, .25);
    background-color: #0f172a;
    background-image:
        linear-gradient(45deg, rgba(148, 163, 184, .10) 25%, transparent 25%, transparent 75%, rgba(148, 163, 184, .10) 75%),
        linear-gradient(45deg, rgba(148, 163, 184, .10) 25%, transparent 25%, transparent 75%, rgba(148, 163, 184, .10) 75%);
}

body.at-theme-dark .ops-firma-preview__empty { color: #64748b; }

/* ── Select con buscador (data-select-buscable, ver asg-brs.js) ── */
.select-buscable {
    position: relative;
}

/* El select real sigue en el formulario pero no se ve ni recibe foco. */
.select-buscable__nativo {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.select-buscable__boton {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.select-buscable__boton--vacio {
    color: var(--bs-secondary-color);
}

.select-buscable__panel {
    width: 100%;
    min-width: 16rem;
    margin-top: .25rem;
    z-index: 1060;
}

.select-buscable__lista {
    max-height: 18rem;
    overflow-y: auto;
}

.select-buscable__opcion {
    border-radius: .375rem;
    white-space: normal;
    font-size: .875rem;
}

.select-buscable__opcion--elegida {
    font-weight: 600;
}

.select-buscable__opcion.active,
.select-buscable__opcion:active {
    background-color: rgba(var(--bs-primary-rgb), .14);
    color: inherit;
}

body.at-theme-dark .select-buscable__opcion {
    color: #e5edf7;
}

body.at-theme-dark .select-buscable__opcion.active,
body.at-theme-dark .select-buscable__opcion:hover {
    background-color: rgba(59, 130, 246, .18);
    color: #f8fafc;
}