/* Ajustes finos sobre Tailwind (cargado vía CDN en cada página). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Expanded:wght@600;700;800&display=swap');

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Scrollbar minimalista */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.transition-base { transition: all .15s ease; }

/* ============================================================
   Tooltips: rectángulo redondeado oscuro con texto blanco, en vez del
   tooltip nativo del navegador (que no se puede restylear con CSS). El
   texto va en data-tooltip, NO en title — si quedara title además, el
   navegador dibujaría su propio tooltip nativo encima/al lado del
   nuestro. La accesibilidad la cubre aria-label en el mismo elemento.
   Por defecto aparece arriba; .tooltip-abajo lo manda abajo (para
   controles pegados arriba de la pantalla, como el header). Se oculta en
   touch puro (@media hover:none) porque ahí no hay hover que lo dispare.
   ============================================================ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: var(--asfalto, #1B2430);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 60;
}
[data-tooltip].tooltip-abajo::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
    [data-tooltip]::after { display: none; }
}

/* En /admin el tooltip va en verde de marca en vez del asfalto oscuro
   por defecto (.app-bg es la clase del body de /admin, ver layout_top.php). */
.app-bg [data-tooltip]::after { background: var(--senal, #1E9750); }

/* ============================================================
   Toasts: reemplazan la caja de mensaje estática de Flash::render() por
   un aviso flotante arriba de la pantalla que se autodescarta (ver
   assets/js/toast.js). Vidrio adaptable a claro/oscuro para que se lea
   bien tanto en /portal como en el panel oscuro de /admin.
   ============================================================ */
.toast-container {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: calc(100% - 28px);
    max-width: 380px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    cursor: pointer;
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    background: var(--asfalto, #1B2430);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 10px 30px rgba(9, 13, 18, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
    animation: toast-entrar .25s cubic-bezier(.34, 1.56, .64, 1) both;
}
.toast-success { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 45%), var(--vigente, #12875A); }
.toast-error   { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 45%), var(--vencido, #CC3A1F); }
.toast-info    { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 45%), var(--exento, #1E6DAF); }
.toast-saliendo { animation: toast-salir .2s ease both; }

@keyframes toast-entrar {
    from { opacity: 0; transform: translateY(-14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-salir {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-10px) scale(.96); }
}

/* ============================================================
   Glassmorphism
   Fondo con "mesh" de color fijo + superficies traslúcidas con
   desenfoque. La densidad de datos (tablas, montos) se mantiene
   legible: el vidrio se usa en la estructura (tarjetas, cabeceras,
   sidebar), no en cada celda de una tabla.
   ============================================================ */

.app-bg {
    min-height: 100vh;
    background-color: #f4f6fb;
    background-image:
        radial-gradient(at 12% 18%, rgba(99, 102, 241, 0.20) 0px, transparent 52%),
        radial-gradient(at 88% 12%, rgba(56, 189, 248, 0.17) 0px, transparent 50%),
        radial-gradient(at 80% 88%, rgba(167, 139, 250, 0.17) 0px, transparent 52%),
        radial-gradient(at 15% 85%, rgba(52, 211, 153, 0.11) 0px, transparent 50%);
    background-attachment: fixed;
}

.glass-card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 30px rgba(30, 41, 59, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border-radius: 1.375rem;
}

.glass-card-dashed {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 2px dashed rgba(148, 163, 184, 0.55);
    border-radius: 1.375rem;
}

.glass-header {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.glass-sidebar {
    background: rgba(18, 26, 35, 0.78);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: width .22s ease, opacity .18s ease, border-color .18s ease;
    overflow: hidden;
}

/* Ocultar/mostrar el menú lateral (botón en el header, admin/includes/layout_top.php).
   La clase se aplica a <html> ANTES de pintar (script bloqueante en layout_top.php,
   mismo patrón que el tema oscuro) para que no haya parpadeo al cargar la página. */
html.sidebar-oculto .glass-sidebar {
    width: 0;
    min-width: 0;
    border-right-color: transparent;
    opacity: 0;
    pointer-events: none;
}

/* Barra inferior de /admin en pantallas chicas: reemplaza al sidebar (que no
   entra en mobile) por una fila de íconos con tooltip, distribuidos parejo
   en todo el ancho (justify-content: space-evenly). Los primeros ítems
   ($itemsPrimarios) van directo; el resto ($itemsMas) queda agrupado detrás
   del botón "Más" en .admin-mas-panel — 13 secciones no entran en una fila.
   Sin overflow/scroll a propósito: con el agrupado los 6 ítems entran
   siempre, y overflow:auto en el contenedor recortaba el tooltip (que se
   dibuja arriba del ícono, fuera de su caja) por la regla de CSS que
   convierte overflow-y en "auto" apenas overflow-x deja de ser "visible".
   Oculta por defecto — el media query de abajo la muestra bajo el
   breakpoint y esconde el sidebar/botón de colapsar (que en mobile no
   tienen sentido). */
.admin-tabbar {
    display: none;
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    justify-content: space-evenly;
    background: rgba(18, 26, 35, .92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    box-shadow: 0 10px 34px rgba(9, 13, 18, .35);
    padding: 6px;
}
.admin-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #A9B6C2;
    transition: color .15s ease, background-color .15s ease;
}
.admin-tab.activo { color: #fff; background: rgba(30, 151, 80, .22); }
.admin-tab:hover, .admin-tab:focus-visible { color: #fff; background: var(--senal, #1E9750); }

/* Hoja "Más": lista de las secciones que no entraron en la barra inferior,
   flota arriba del botón que la abre (#btn-admin-mas en layout_top.php). */
.admin-mas-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    max-width: 320px;
    margin: 0 auto;
    max-height: 55vh;
    overflow-y: auto;
    z-index: 41;
    background: rgba(18, 26, 35, .96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(9, 13, 18, .4);
    padding: 6px;
}
.admin-mas-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: #C9D2DA;
    font-size: .875rem;
    font-weight: 500;
    transition: color .15s ease, background-color .15s ease;
}
.admin-mas-item.activo { color: #fff; background: rgba(30, 151, 80, .22); }
.admin-mas-item:hover, .admin-mas-item:focus-visible { color: #fff; background: var(--senal, #1E9750); }

@media (max-width: 767px) {
    #sidebar.glass-sidebar { display: none; }
    #btn-sidebar-toggle { display: none; }
    .admin-tabbar { display: flex; }
    .admin-main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

.glass-pill {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

/* Tile "hero" de un bento grid: el bloque destacado de color sólido entre
   tiles de vidrio neutro (ver admin/index.php y portal/index.php). */
.glass-card-hero {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.78), rgba(99, 102, 241, 0.7) 55%, rgba(129, 140, 248, 0.66));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 34px rgba(67, 56, 202, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    border-radius: 1.375rem;
    color: #fff;
}

/* ============================================================
   Portal del conductor — sistema visual "señalética vial": asfalto,
   pintura ámbar de demarcación y semáforo funcional para estados de
   sesión. No lo comparte /admin (glassmorphism de arriba). Superficies
   planas y con borde fino, tipografía Archivo/Archivo Expanded, pensado
   para leerse a distancia de brazo bajo sol.
   ============================================================ */

/* Variables en :root (no scopeadas a .conductor-bg) para que también estén
   disponibles en las pantallas standalone sin ese wrapper (login, registro,
   recuperar, restablecer), que arman su propio fondo con gradiente. */
:root {
    --asfalto: #1B2430;
    --asfalto-alto: #121A23;
    --asfalto-medio: #2C3947;
    --asfalto-borde: #3C4B5C;
    --papel: #EFF2F1;
    --superficie: rgba(255, 255, 255, .55);
    --superficie-fuerte: rgba(255, 255, 255, .72);
    --vidrio-borde: rgba(255, 255, 255, .6);
    --linea: #D9DEDC;
    --linea-fuerte: #BCC4C2;
    --tinta: #141C25;
    --tinta-media: #54626E;
    --tinta-suave: #7C8994;
    /* Verde de marca (del logo SEMS), suavizado para uso prolongado sin
       perder la identidad. */
    --senal: #1E9750;
    --senal-oscuro: #0B7F47;
    --vigente: #12875A;
    --vigente-luz: #D8EFE4;
    --gracia: #C07400;
    --gracia-luz: #FAEACB;
    --vencido: #CC3A1F;
    --vencido-luz: #F9DCD5;
    --exento: #1E6DAF;
    --exento-luz: #DBEAF6;
    color-scheme: light;
}

/* Modo oscuro: se activa con la clase .dark en <html> (toggle persistido en
   localStorage, ver assets/js/tema.js) o automáticamente según el sistema si
   el conductor nunca lo tocó. Redefine los mismos tokens: el resto del CSS
   (conductor-card, btn-go, plate, etc.) no necesita saber en qué tema está. */
html.dark {
    --asfalto-alto: #090D12;
    --papel: #10161D;
    --superficie: rgba(27, 36, 48, .55);
    --superficie-fuerte: rgba(27, 36, 48, .78);
    --vidrio-borde: rgba(255, 255, 255, .1);
    --linea: #2C3947;
    --linea-fuerte: #3C4B5C;
    --tinta: #EEF1F3;
    --tinta-media: #A9B6C2;
    --tinta-suave: #7C8994;
    --vigente-luz: rgba(18, 135, 90, .22);
    --gracia-luz: rgba(192, 116, 0, .22);
    --vencido-luz: rgba(204, 58, 31, .22);
    --exento-luz: rgba(30, 109, 175, .25);
    color-scheme: dark;
}

/* Portal y admin usan bastantes utilidades de gris de Tailwind (text-slate-700,
   border-slate-300, etc.) directas en el HTML de cada página. En vez de tocar
   clase por clase en los ~45 archivos, se reasignan acá para ambos — el
   selector compuesto (html.dark + la clase) es más específico que la utilidad
   de Tailwind sola, así que gana sin necesitar !important. */
html.dark .text-slate-900, html.dark .text-slate-800 { color: var(--tinta); }
html.dark .text-slate-700, html.dark .text-slate-600 { color: var(--tinta-media); }
html.dark .text-slate-500, html.dark .text-slate-400 { color: var(--tinta-suave); }
html.dark .border-slate-300, html.dark .border-slate-200, html.dark .border-slate-100 { border-color: var(--linea); }
html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: var(--asfalto-medio); }
html.dark .bg-slate-800, html.dark .bg-slate-900 { background-color: var(--asfalto-alto); }
html.dark .bg-white { background-color: var(--superficie); }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--linea); }

/* /admin usa un segundo sistema de vidrio ("glass-*", ver más abajo) en vez
   del asfalto/ámbar del portal — mismos tokens de tema, distinta piel. El
   sidebar (glass-sidebar) queda igual en los dos temas a propósito: es un
   panel oscuro fijo, no una superficie que deba aclararse. */
html.dark .app-bg {
    background-color: var(--papel);
    background-image:
        radial-gradient(at 12% 18%, rgba(99, 102, 241, 0.14) 0px, transparent 52%),
        radial-gradient(at 88% 12%, rgba(56, 189, 248, 0.12) 0px, transparent 50%),
        radial-gradient(at 80% 88%, rgba(167, 139, 250, 0.12) 0px, transparent 52%),
        radial-gradient(at 15% 85%, rgba(0, 0, 0, 0.35) 0px, transparent 50%);
}
html.dark .glass-card {
    background: var(--superficie);
    border-color: var(--vidrio-borde);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
}
html.dark .glass-card-dashed {
    background: rgba(27, 36, 48, .3);
    border-color: var(--linea-fuerte);
}
html.dark .glass-header {
    background: var(--superficie-fuerte);
    border-bottom-color: var(--vidrio-borde);
}
html.dark .glass-pill {
    background: var(--superficie);
    border-color: var(--vidrio-borde);
}

.conductor-bg {
    min-height: 100vh;
    background-color: var(--papel);
    background-image:
        radial-gradient(at 15% 10%, rgba(30, 151, 80, .22) 0px, transparent 45%),
        radial-gradient(at 85% 0%, rgba(30, 109, 175, .16) 0px, transparent 45%),
        radial-gradient(at 90% 85%, rgba(18, 135, 90, .14) 0px, transparent 50%),
        radial-gradient(at 10% 90%, rgba(27, 36, 48, .10) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--tinta);
    font-family: 'Archivo', system-ui, sans-serif;
}
html.dark .conductor-bg, html.dark.conductor-bg {
    background-image:
        radial-gradient(at 15% 10%, rgba(30, 151, 80, .16) 0px, transparent 45%),
        radial-gradient(at 85% 0%, rgba(30, 109, 175, .18) 0px, transparent 45%),
        radial-gradient(at 90% 85%, rgba(18, 135, 90, .14) 0px, transparent 50%),
        radial-gradient(at 10% 90%, rgba(0, 0, 0, .3) 0px, transparent 50%);
}
.conductor-bg .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.conductor-bg h1.titulo-app, .conductor-bg h2.titulo-app { font-family: 'Archivo Expanded', 'Archivo', sans-serif; letter-spacing: -.015em; }

.conductor-header {
    background: var(--superficie-fuerte);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--vidrio-borde);
}

.conductor-card {
    background: var(--superficie);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--vidrio-borde);
    border-radius: 22px;
    box-shadow: 0 8px 28px rgba(20, 28, 37, .08), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.conductor-card-dashed {
    background: rgba(255, 255, 255, .25);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 2px dashed var(--linea-fuerte);
    border-radius: 22px;
}
html.dark .conductor-card-dashed { background: rgba(27, 36, 48, .3); }

/* Bloque de contexto (saldo, zona/sesión activa): vidrio oscuro tintado, con
   un guiño a la demarcación vial (anillo ámbar recortado en la esquina). */
.conductor-card-hero {
    background: linear-gradient(135deg, rgba(27, 36, 48, .92), rgba(44, 57, 71, .82));
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 26px;
    box-shadow: 0 14px 34px rgba(9, 13, 18, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
    position: relative;
    overflow: hidden;
}
.conductor-card-hero::after {
    content: '';
    position: absolute;
    right: -28px; top: -28px;
    width: 120px; height: 120px;
    border: 14px solid rgba(30, 151, 80, .16);
    border-radius: 50%;
}
.conductor-card-hero > * { position: relative; z-index: 1; }

.conductor-pill {
    background: var(--superficie);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--vidrio-borde);
}

/* Contenido: deja lugar a la barra inferior flotante (safe-area) y a la
   cabecera sticky. */
.conductor-main {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
}

/* Barra de navegación inferior: isla de vidrio flotante (no pegada a los
   bordes), Estacionar / Saldo / Vehículos / Movimientos — solo ícono, el
   nombre queda como tooltip (title), igual criterio que .admin-tabbar. */
.conductor-tabbar {
    position: fixed;
    left: 14px; right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: calc(32rem - 28px);
    margin: 0 auto;
    background: var(--superficie-fuerte);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--vidrio-borde);
    border-radius: 26px;
    box-shadow: 0 10px 34px rgba(20, 28, 37, .16), inset 0 1px 0 rgba(255, 255, 255, .35);
    padding: 2px 0;
}

.conductor-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 3px;
    padding: 11px 0;
    border-radius: 16px;
    color: var(--tinta-suave);
    transition: color .15s ease, background-color .15s ease;
}
.conductor-tab .conductor-tab-icono { line-height: 1; }
.conductor-tab.activo { color: var(--tinta); }
.conductor-tab.activo .conductor-tab-icono { color: var(--senal-oscuro); }
.conductor-tab:hover, .conductor-tab:focus-visible { color: #fff; background: var(--senal); }
.conductor-tab:hover .conductor-tab-icono, .conductor-tab:focus-visible .conductor-tab-icono { color: #fff; }

/* Sidebar izquierdo: mismos 4 accesos que .conductor-tabbar, con ícono +
   etiqueta, para pantallas de escritorio grandes (ver @media abajo). En
   mobile/tablet queda oculto y se usa la barra inferior en su lugar. */
.conductor-sidebar {
    display: none;
    width: 216px;
    flex-shrink: 0;
    padding: 22px 12px;
    background: var(--superficie-fuerte);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-right: 1px solid var(--vidrio-borde);
}
.conductor-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 2px 8px 20px;
}
.conductor-sidebar-logo-sems {
    font-family: 'Archivo Expanded', 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--senal-oscuro);
}
.conductor-sidebar-logo-tagline {
    display: block;
    font-size: 7.5px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--tinta-suave);
}
.conductor-sidebar-logo-municipio {
    display: block;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 800;
    color: var(--tinta-media);
}

/* Wordmark "sems" junto al ícono del header — visible desde sm hacia arriba
   (ver clase hidden sm:inline en el HTML); en mobile chico queda solo el
   ícono, como ya era, para no competir por espacio con título/saldo/campana. */
.conductor-header-sems {
    font-family: 'Archivo Expanded', 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.01em;
    color: var(--senal-oscuro);
}
.conductor-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--tinta-media);
    font-size: .875rem;
    font-weight: 500;
    transition: color .15s ease, background-color .15s ease;
}
.conductor-sidebar-item.activo { background: var(--superficie); color: var(--tinta); font-weight: 600; }
.conductor-sidebar-item.activo svg { color: var(--senal-oscuro); }
.conductor-sidebar-item:hover, .conductor-sidebar-item:focus-visible { background: var(--senal); color: #fff; }
.conductor-sidebar-item:hover svg, .conductor-sidebar-item:focus-visible svg { color: #fff; }

@media (min-width: 1024px) {
    .conductor-sidebar { display: flex; flex-direction: column; }
    .conductor-tabbar { display: none; }
    .conductor-main { padding-bottom: 2.5rem; }
}

/* Matrícula: chapa patente estilo cartel vial. */
.plate {
    font-family: 'Archivo Expanded', sans-serif;
    font-weight: 800;
    letter-spacing: .06em;
    background: var(--superficie-fuerte);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 2px solid var(--tinta);
    border-radius: 9px;
    padding: 5px 9px;
    color: var(--tinta);
    white-space: nowrap;
    display: inline-block;
}
.plate-sm { font-size: .75rem; padding: 3px 7px; border-width: 1.5px; border-radius: 6px; }
.plate-lg { font-size: 1.35rem; padding: 8px 16px; border-width: 2.5px; border-radius: 12px; }

/* Chip de tiempo (30 min / 1 h / 2 h / 3 h). */
.tiempo-chip {
    border: 1px solid var(--vidrio-borde);
    background: var(--superficie);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-radius: 16px;
    padding: 11px 4px;
    text-align: center;
    line-height: 1.15;
}
.tiempo-chip b { display: block; font-family: 'Archivo Expanded', sans-serif; font-size: 17px; font-weight: 700; }
.tiempo-chip span { font-size: 10.5px; color: var(--tinta-suave); font-weight: 500; }
.tiempo-chip.activo { background: var(--asfalto); border-color: var(--asfalto); color: #fff; }
.tiempo-chip.activo span { color: #A9B6C2; }

/* Fila seleccionable (vehículo, medio de pago). */
.fila-sel {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--superficie); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--vidrio-borde); border-radius: 16px; padding: 11px 14px;
}
.fila-sel.activo { border-color: var(--asfalto); box-shadow: 0 0 0 1px var(--asfalto); }

/* Cronómetro grande de sesión activa. */
.crono-grande {
    font-family: 'Archivo Expanded', sans-serif;
    font-weight: 800;
    font-size: 56px;
    line-height: .92;
    letter-spacing: -.03em;
    color: var(--senal);
    font-variant-numeric: tabular-nums;
}
.crono-grande.vencido { color: #FF8E73; }

.estado-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 100px;
}
.estado-pill.vigente { background: rgba(18, 135, 90, .22); color: #63D8A4; }
.estado-pill.gracia { background: rgba(192, 116, 0, .18); color: var(--gracia); }
.estado-pill.vencido { background: rgba(204, 58, 31, .22); color: #FF8E73; }
.estado-pill.finalizada { background: rgba(255, 255, 255, .12); color: #C9D2DA; }

.barra { height: 5px; background: var(--asfalto-medio); border-radius: 100px; overflow: hidden; width: 100%; }
.barra i { display: block; height: 100%; background: var(--senal); border-radius: 100px; transition: width 1s linear; }
.barra i.vencido { background: var(--vencido); }

.crono-datos {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 100%;
    background: var(--asfalto-borde); border-radius: 18px; overflow: hidden;
}
.crono-datos div { background: var(--asfalto); padding: 12px 14px; text-align: left; }
.crono-datos small { display: block; font-size: 10.5px; color: #8996A3; margin-bottom: 3px; }
.crono-datos b { font-size: 14px; font-weight: 600; }

/* Botones del portal (paleta señalética): .btn-go es la ÚNICA acción amber
   por pantalla — la que de verdad importa (estacionar, pagar, ingresar).
   El resto usa asfalto sólido. */
.btn-go {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 45%), var(--senal);
    color: var(--asfalto-alto);
    font-family: 'Archivo Expanded', sans-serif; font-weight: 800; letter-spacing: .01em;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 6px 18px rgba(185, 130, 26, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn-go:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 45%), var(--senal-oscuro); }
.btn-go:disabled { opacity: .45; cursor: not-allowed; }

.btn-asfalto {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%), var(--asfalto);
    color: #fff;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 6px 18px rgba(9, 13, 18, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn-asfalto:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 45%), var(--asfalto-alto); }

.link-senal { color: var(--senal-oscuro); }
.link-senal:hover { color: var(--asfalto); }

/* Comprobantes (Recibo::html) */
.recibo-tabla th { text-align: left; color: #64748b; font-weight: 500; padding: 6px 14px 6px 0; vertical-align: top; }
.recibo-tabla td { padding: 6px 0; font-weight: 600; color: #1e293b; }

/* Impresión: ocultar la "chrome" de la app (sidebar, header, controles) y
   dejar tarjetas de vidrio como cajas blancas simples y legibles en papel. */
@media print {
    .no-imprimir, .glass-sidebar, header.glass-header, header.conductor-header, .conductor-tabbar, .conductor-sidebar, .admin-tabbar, .toast-container { display: none !important; }
    body { background: #fff !important; }
    .glass-card, .glass-card-hero, .glass-card-dashed,
    .conductor-card, .conductor-card-hero, .conductor-card-dashed {
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
    }
    /* Tablas largas con scroll interno (p. ej. movimientos de cuenta): mostrar
       todo el contenido en el papel en vez de recortarlo a la altura visible. */
    .movimientos-imprimibles { max-height: none !important; overflow: visible !important; }
}

/* Campos de formulario: fondo translúcido consistente sobre cualquier tarjeta
   de vidrio, sin tener que anotar cada <input> del sitio uno por uno. */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="search"], input[type="url"], select, textarea {
    background-color: rgba(255, 255, 255, 0.7);
}

/* En el portal (paleta con variables), los campos siguen el tema activo en
   vez del blanco translúcido fijo de arriba — si no, quedan ilegibles en
   modo oscuro (texto claro sobre fondo claro). */
.conductor-bg input[type="text"], .conductor-bg input[type="email"], .conductor-bg input[type="password"],
.conductor-bg input[type="tel"], .conductor-bg input[type="number"], .conductor-bg input[type="date"],
.conductor-bg input[type="time"], .conductor-bg input[type="datetime-local"], .conductor-bg input[type="search"],
.conductor-bg input[type="url"], .conductor-bg select, .conductor-bg textarea {
    background-color: var(--superficie);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    color: var(--tinta);
    border-color: var(--vidrio-borde) !important;
    border-radius: 14px !important;
}

/* ============================================================
   Animaciones
   Entrada suave de la interfaz + micro-interacciones. Todo queda
   desactivado si el usuario prefiere menos movimiento.
   ============================================================ */

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pop-in {
    0%   { opacity: 0; transform: scale(.92); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes logo-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .35); }
    50%      { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
}

.animate-fade-in-up { animation: fade-in-up .5s ease both; }
.animate-fade-in     { animation: fade-in .4s ease both; }
.animate-pop-in       { animation: pop-in .4s cubic-bezier(.34, 1.56, .64, 1) both; }

header.glass-header, aside.glass-sidebar, header.conductor-header, aside.conductor-sidebar { animation: fade-in .45s ease both; }
main > * { animation: fade-in-up .45s ease both; }

.glass-card, .glass-card-hero, .glass-card-dashed {
    animation: fade-in-up .45s ease both;
    transition: transform .2s ease, box-shadow .2s ease;
}
.glass-card:hover, .glass-card-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(30, 41, 59, .16);
}

.conductor-card, .conductor-card-hero, .conductor-card-dashed {
    animation: fade-in-up .45s ease both;
    transition: transform .15s ease, box-shadow .15s ease;
}
.conductor-card:active, .conductor-card-hero:active { transform: scale(.985); }

.conductor-tabbar { animation: fade-in-up .4s ease both; }
.conductor-tab { transition: color .15s ease, background-color .15s ease, transform .15s ease; }
.conductor-tab:active { transform: scale(.92); }

.tiempo-chip, .fila-sel { transition: transform .1s ease, border-color .15s ease, background-color .15s ease; }
.tiempo-chip:active, .fila-sel:active { transform: scale(.97); }

/* Insignia del logo: zócalo con pulso suave + reacción al pasar el mouse. */
.logo-badge {
    display: inline-flex;
    border-radius: .85rem;
    animation: logo-pulse 2.6s ease-in-out infinite;
    transition: transform .25s ease;
}
.logo-badge:hover { transform: scale(1.08) rotate(-4deg); }
.conductor-header .logo-badge { animation-name: logo-pulse-senal; }
@keyframes logo-pulse-senal {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 151, 80, .4); }
    50%      { box-shadow: 0 0 0 8px rgba(30, 151, 80, 0); }
}

button, .btn {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
button:active, .btn:active { transform: scale(.97); }

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