/* =====================================================================
   Geolocalización — hoja de estilos
   ---------------------------------------------------------------------
   Estilo: "soft UI" moderno — sombras suaves de varias capas, esquinas de
   10-14 px, transiciones de 180-260 ms y foco siempre visible. Contraste
   verificado a AA (4.5:1) en texto normal.

   Todo sale de las variables de :root. Para cambiar la identidad visual
   se tocan esas variables, no las reglas de abajo.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');

:root {
    /* ---- Color: marca ------------------------------------------------
       El azul de Loto Real (#0000CC) es demasiado saturado para pintar
       superficies grandes, así que la barra usa un azul marino de la
       misma familia y el azul vivo queda para acentos y foco. */
    --navy-900: #0A1730;
    --navy-800: #12244A;
    --navy-700: #1E3566;

    --primary:        #2456C7;
    --primary-strong: #1B429E;
    --primary-soft:   #EDF2FE;
    --primary-border: #C9D9F8;
    --on-primary:     #FFFFFF;

    /* ---- Color: estado ---- */
    --success:      #047857;
    --success-soft: #E7F6EF;
    --warning:      #A15C07;
    --warning-soft: #FDF3E3;
    --danger:       #C81E2B;
    --danger-strong:#A4141F;
    --danger-soft:  #FDECEE;

    /* ---- Color: neutros ---- */
    --bg:            #EEF1F7;
    --surface:       #FFFFFF;
    --surface-muted: #F5F7FB;
    --surface-sunken:#EDF0F6;
    --fg:            #101828;
    --fg-muted:      #4A5568;
    --fg-subtle:     #6B7688;
    --border:        #DDE3ED;
    --border-strong: #C6CEDC;

    /* ---- Tipografía ---- */
    --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- Espaciado (ritmo de 4 px) ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* ---- Radios ---- */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* ---- Sombras: varias capas, suaves ---- */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
    --shadow-md: 0 2px 4px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .07);
    --shadow-lg: 0 4px 8px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .12);

    /* ---- Movimiento ---- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 140ms;
    --dur: 200ms;

    /* ---- Foco ---- */
    --ring: 0 0 0 3px rgba(36, 86, 199, .30);

    /* ---- Capas ---- */
    --z-dropdown: 900;
    --z-header: 1100;
    --z-modal: 2000;

    /* ---- Medidas ---- */
    --header-h: 60px;
    --content-pad: 20px;
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 19px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
h4 { font-size: 14px; font-weight: 650; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Números que se comparan en vertical (coordenadas, códigos, contadores) en
   monoespaciada y con cifras de ancho fijo: así las columnas no bailan.
   Se engancha a data-label, no a nth-child, para que añadir una columna no
   lo rompa. */
code, .popup-coords, .seq-cell,
td[data-label="Coordenadas"] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
td[data-label="Coordenadas"] { font-size: 13px; }
code {
    background: var(--surface-sunken); padding: 1px 6px;
    border-radius: var(--radius-sm); font-size: .92em;
}

img, table { max-width: 100%; }

/* Foco visible en todo lo que se puede enfocar. :focus-visible en vez de
   :focus para que el anillo no salte al hacer clic con el ratón. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Saltar al contenido: primer tabulador para quien navega con teclado. */
.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: calc(var(--z-header) + 1);
    background: var(--surface); color: var(--primary);
    padding: 10px 16px; border-radius: var(--radius);
    box-shadow: var(--shadow-lg); font-weight: 600;
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 8px; text-decoration: none; }

/* =====================================================================
   Barra superior
   ===================================================================== */
.topbar {
    position: sticky; top: 0; z-index: var(--z-header);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-h);
    padding: var(--space-2) var(--space-5);
    background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-md);
}
.topbar .brand a {
    display: flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none;
    font-weight: 700; font-size: 17px; letter-spacing: -.01em;
}
.topbar .brand a:hover { text-decoration: none; }
.brand-logo {
    height: 32px; width: auto; display: block;
    background: #fff; border-radius: var(--radius-sm);
    padding: 3px 7px; box-shadow: var(--shadow-xs);
}

.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav a {
    color: #C7D4EC; margin-right: 0;
    padding: 8px 12px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .10); text-decoration: none; }
/* Sección actual: el color solo no basta, se marca también con la barra. */
.nav a[aria-current="page"] {
    color: #fff; background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 -2px 0 #6E9BF2;
}
.nav .user {
    margin: 0 var(--space-2); font-size: 13px;
    color: #A9BAD8; white-space: nowrap;
}
/* Insignia con el nº de agencias geolocalizadas, junto a «Mapa». */
.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px; margin-left: 7px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 12px; font-weight: 650; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.nav a[aria-current="page"] .nav-badge { background: rgba(255, 255, 255, .30); }

/* Sólo para lectores de pantalla: un número suelto no dice qué cuenta. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Contenido y cabeceras de página
   ===================================================================== */
.content { padding: var(--content-pad); }

.page-header { margin-bottom: var(--space-4); }
.page-header h1 { margin: 0 0 var(--space-1); }
.page-header .hint { color: var(--fg-muted); margin-top: 0; max-width: 70ch; }

.hint { color: var(--fg-subtle); font-size: 13px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}
.card h2 { margin-top: 0; margin-bottom: var(--space-2); }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.row { display: flex; gap: var(--space-3); }
.row > * { flex: 1; }

/* =====================================================================
   Formularios
   ===================================================================== */
form label {
    display: block; margin: var(--space-3) 0;
    font-size: 13px; font-weight: 550; color: var(--fg-muted);
}
form input, form select, form textarea {
    display: block; width: 100%; margin-top: var(--space-1);
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    font-family: inherit; font-size: 14px; color: var(--fg);
    background: var(--surface);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
form input::placeholder, form textarea::placeholder { color: #9AA4B5; }
form input:hover, form select:hover, form textarea:hover { border-color: #AEB9CC; }
form input:focus, form select:focus, form textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
form input[type="file"] { padding: 8px 10px; background: var(--surface-muted); }
/* Las casillas y radios no heredan la altura de los campos de texto. */
form input[type="checkbox"], form input[type="radio"] {
    width: 18px; height: 18px; min-height: 0; margin: 0;
    accent-color: var(--primary); cursor: pointer;
}
form textarea { min-height: 80px; resize: vertical; }
form input:disabled, form select:disabled, form textarea:disabled {
    background: var(--surface-sunken); color: var(--fg-subtle);
    cursor: not-allowed; opacity: .7;
}
/* Las coordenadas y los números de agencia se leen mejor en monoespaciada. */
#coords-input, #terminal-input { font-family: var(--font-mono); letter-spacing: -.01em; }

/* =====================================================================
   Botones
   ===================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 9px 16px;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--fg);
    font-family: inherit; font-size: 14px; font-weight: 550;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
                color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-muted); border-color: #AEB9CC; text-decoration: none; }
/* Los iconos van en SVG y heredan el color del botón. */
.btn svg { flex: none; }
/* El botón baja 1 px al pulsarlo: confirma la pulsación sin mover el resto. */
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[disabled] {
    opacity: .45; cursor: not-allowed; transform: none;
    box-shadow: none; background: var(--surface-sunken);
}

.btn-primary {
    background: var(--primary); border-color: var(--primary); color: var(--on-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 2px 8px rgba(36, 86, 199, .22);
}
.btn-primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }

.btn-danger {
    background: var(--danger); border-color: var(--danger); color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 2px 8px rgba(200, 30, 43, .20);
}
.btn-danger:hover { background: var(--danger-strong); border-color: var(--danger-strong); }

.btn-ghost {
    background: rgba(255, 255, 255, .08); color: #fff;
    border-color: rgba(255, 255, 255, .28); box-shadow: none;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }

.btn-ghost-dark {
    background: var(--surface); border-color: var(--border-strong); color: var(--fg-muted);
}

.btn-mini { min-height: 32px; padding: 5px 11px; font-size: 13px; }

.btn-template {
    background: var(--success-soft); color: var(--success);
    border-color: #B9E0CE; box-shadow: none;
}
.btn-template:hover { background: #D9F0E5; border-color: #9BD3BC; }

.btn-report {
    background: var(--primary); border-color: var(--primary); color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 2px 8px rgba(36, 86, 199, .22);
}
.btn-report:hover { background: var(--primary-strong); border-color: var(--primary-strong); }

.link-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--primary); font-size: 14px; font-weight: 600; font-family: inherit;
}
.link-btn:hover { text-decoration: underline; }

/* =====================================================================
   Avisos (flash)
   ===================================================================== */
.flashes { padding: var(--space-3) var(--content-pad) 0; }
.flash {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--primary-border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    margin: 0 0 var(--space-2);
    background: var(--primary-soft); color: var(--fg);
    font-size: 14px; box-shadow: var(--shadow-xs);
}
/* El color no es la única señal: cada tipo lleva su marca antes del texto. */
.flash::before { font-weight: 700; }
.flash-error {
    background: var(--danger-soft); border-color: #F3C6CB; border-left-color: var(--danger);
}
.flash-error::before { content: "!"; color: var(--danger); }
.flash-success {
    background: var(--success-soft); border-color: #B9E0CE; border-left-color: var(--success);
}
.flash-success::before { content: "\2713"; color: var(--success); }

/* =====================================================================
   Tablas
   ===================================================================== */
.table-wrap {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--radius); border: 1px solid var(--border);
}
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    padding: 11px var(--space-3);
    border-bottom: 1px solid var(--border);
    text-align: left; font-size: 14px;
}
/* Sin position:sticky a propósito: la barra superior ya está fija y un
   encabezado pegajoso acabaría metiéndose debajo de ella. */
.table th {
    background: var(--surface-muted);
    font-size: 12px; font-weight: 650; color: var(--fg-muted);
    text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid var(--border-strong);
}
.table tbody tr { transition: background var(--dur-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-muted); }
.table tbody tr:last-child td { border-bottom: 0; }

.badge {
    display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600; color: #fff;
}
.status-pendiente  { background: #6B7688; }
.status-encamino   { background: #B45309; }
.status-enprogreso { background: var(--primary); }
.status-completado { background: var(--success); }
.status-fallido    { background: var(--danger); }
.status-reagendado { background: #6D47B8; }
.badge-start { background: var(--success); margin-left: 4px; font-size: 10px; letter-spacing: .5px; }
.badge-end   { background: var(--danger);  margin-left: 4px; font-size: 10px; letter-spacing: .5px; }

/* Tabla de ubicaciones dentro de una zona */
.table-locations td.seq-cell { white-space: nowrap; font-size: 16px; }
.table-locations td.actions-col,
.table-locations th.actions-col { white-space: nowrap; text-align: right; }
.table-locations .actions-col form { margin: 0; }
.table-locations .btn.btn-mini { padding: 4px 9px; font-size: 12px; }
.table-locations .btn[disabled] { opacity: .35; cursor: not-allowed; }

/* =====================================================================
   Modal
   ===================================================================== */
.modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
}
.modal[hidden] { display: none; }
/* El desenfoque señala que el fondo está inactivo, no es decoración. */
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 23, 48, .55); backdrop-filter: blur(3px);
    animation: fade-in var(--dur) var(--ease);
}
.modal-body {
    position: relative; width: min(560px, 92vw); max-height: 92vh; overflow: auto;
    margin: 0; z-index: 1; box-shadow: var(--shadow-lg);
    animation: modal-in 260ms var(--ease);
}
.modal-body h2 { margin-top: 0; }
.modal-actions {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    margin-top: var(--space-4);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.color-dot {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    vertical-align: middle; margin-right: 6px;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .12);
}

/* =====================================================================
   Login
   ===================================================================== */
.login-card {
    max-width: 400px; margin: 8vh auto;
    padding: var(--space-6); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.login-card h1 { text-align: center; margin-bottom: var(--space-5); font-size: 24px; }

/* =====================================================================
   Disposición con mapa (dashboard y buscador)
   ===================================================================== */
.dashboard-layout, .tech-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--space-4);
    /* dvh en vez de vh: en móvil la barra del navegador no recorta el mapa. */
    height: calc(100vh - var(--header-h) - var(--content-pad) * 2);
    height: calc(100dvh - var(--header-h) - var(--content-pad) * 2);
    min-height: 520px;
}
@media (max-width: 900px) {
    .dashboard-layout, .tech-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
}

.sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.sidebar::-webkit-scrollbar { width: 10px; }
.sidebar::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: var(--radius-pill);
    border: 3px solid var(--surface);
}
.sidebar h2 { margin-top: 0; }
/* Separador de sección: la línea agrupa mejor que el espacio en blanco solo. */
.sidebar h3 {
    margin: var(--space-5) 0 var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: 12px; font-weight: 650; text-transform: uppercase;
    color: var(--fg-subtle); letter-spacing: .6px;
}
/* La primera sección va pegada al título, sin línea encima. */
.sidebar h2 + h3, .sidebar h2 + .hint + h3, .sidebar > h3:first-child {
    border-top: 0; padding-top: 0; margin-top: var(--space-3);
}

.stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
    text-align: center; margin: var(--space-3) 0 var(--space-5);
}
.stats > div {
    background: var(--surface-muted); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--space-3) var(--space-1);
}
.stats span {
    display: block; font-size: 22px; font-weight: 700; color: var(--navy-800);
    font-variant-numeric: tabular-nums;
}
.stats small { color: var(--fg-subtle); font-size: 11px; }

.tech-list, .zone-list, .notif-list, .route-list { list-style: none; padding: 0; margin: 0; }
.tech-list li, .zone-list li, .notif-list li {
    padding: 10px var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-1);
    background: var(--surface-muted); border: 1px solid transparent;
    font-size: 14px; display: flex; align-items: center; gap: var(--space-2);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tech-list li:hover, .zone-list li:hover, .notif-list li:hover {
    background: var(--surface); border-color: var(--border);
}
.tech-list .status-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #C6CEDC; flex: none;
}
.tech-list .online .status-dot {
    background: var(--success); box-shadow: 0 0 0 3px rgba(4, 120, 87, .16);
}

.notif-list li.unread {
    background: var(--primary-soft); border-color: var(--primary-border); font-weight: 600;
}
.notif-list li small { display: block; color: var(--fg-subtle); font-weight: 400; font-size: 11px; }

.map-section {
    position: relative; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
#map { width: 100%; height: 100%; min-height: 500px; }
.map-small { width: 100%; height: 260px; border-radius: var(--radius); margin: var(--space-2) 0; }
.map-legend {
    position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 500;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 12px; box-shadow: var(--shadow-md);
    display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot-pendiente  { background: #6B7688; }
.dot-encamino   { background: #B45309; }
.dot-enprogreso { background: var(--primary); }
.dot-completado { background: var(--success); }
.dot-fallido    { background: var(--danger); }
.dot-tech       { background: #6D47B8; border: 2px solid #fff; box-shadow: 0 0 0 1px #6D47B8; }

/* Controles y ventanas de Leaflet, al mismo lenguaje visual que el resto. */
.leaflet-container { font-family: var(--font-sans); }
.leaflet-bar, .leaflet-control-layers {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}
.leaflet-bar a { color: var(--fg-muted) !important; }
.leaflet-bar a:hover { background: var(--surface-muted) !important; color: var(--primary) !important; }
.leaflet-popup-content-wrapper {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}
.leaflet-popup-content { margin: var(--space-3) var(--space-4); }

/* =====================================================================
   Ruta del técnico
   ===================================================================== */
.route-list li {
    padding: var(--space-3); border-radius: var(--radius);
    background: var(--surface-muted); margin-bottom: var(--space-2);
    border: 1px solid transparent;
}
.route-list li.current {
    background: var(--primary-soft); border-color: var(--primary-border);
    border-left: 4px solid var(--primary);
}
.route-list li h4 { margin: 0 0 var(--space-1); }
.route-list li small { color: var(--fg-muted); }
.route-actions { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tech-controls {
    margin: var(--space-3) 0; font-size: 14px;
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
}
.tech-controls label { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---------- Banner de navegación estilo Waze ---------- */
.nav-banner {
    position: absolute; top: var(--space-3); left: var(--space-3); right: var(--space-3);
    z-index: 500;
    background: rgba(10, 23, 48, .92); color: #fff;
    border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
    display: flex; align-items: center; gap: var(--space-4);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(6px);
}
.nav-banner[hidden] { display: none; }
.nav-banner-icon {
    font-size: 34px; line-height: 1; width: 48px; text-align: center;
    color: #7FB4FF; text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.nav-banner-main { flex: 1; min-width: 0; }
.nav-banner-distance {
    font-size: 26px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.nav-banner-street {
    font-size: 14px; opacity: .9; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-banner-eta {
    display: flex; gap: var(--space-3); padding-left: var(--space-3);
    border-left: 1px solid rgba(255, 255, 255, .2);
}
.nav-banner-eta > div {
    text-align: center; min-width: 46px;
    font-size: 18px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.nav-banner-eta small {
    display: block; font-size: 10px; font-weight: 400;
    opacity: .7; text-transform: uppercase; letter-spacing: .5px;
}
@media (max-width: 640px) {
    .nav-banner { flex-wrap: wrap; padding: var(--space-3); gap: var(--space-3); }
    .nav-banner-icon { font-size: 28px; width: 40px; }
    .nav-banner-distance { font-size: 22px; }
    .nav-banner-eta { border-left: 0; padding-left: 0; width: 100%; justify-content: space-between; }
}

/* Ocultar el panel por defecto de Leaflet Routing Machine
   (usamos nuestro propio banner). */
.leaflet-routing-container { display: none !important; }

/* Formulario inline para fijar la "base" del técnico */
.home-form { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.home-form select,
.home-form input { padding: 5px 8px; font-size: 12px; min-height: 32px; width: auto; margin: 0; }
.home-form input[type=number] { width: 90px; }

/* =====================================================================
   Buscador de agencias
   ===================================================================== */
.terminal-result {
    margin: var(--space-3) 0; padding: var(--space-4);
    border-radius: var(--radius);
    background: var(--surface-muted);
    border: 1px solid var(--border); border-left: 4px solid var(--primary);
    animation: result-in 220ms var(--ease);
}
@keyframes result-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.terminal-result.ok {
    background: var(--success-soft); border-color: #B9E0CE; border-left-color: var(--success);
}
.terminal-result.error {
    background: var(--danger-soft); border-color: #F3C6CB; border-left-color: var(--danger);
}
.terminal-result h3 {
    margin: 0 0 var(--space-2); font-size: 16px; text-transform: none;
    letter-spacing: -.01em; color: var(--navy-800);
    border: 0; padding: 0;
}
.terminal-result p { margin: 0; font-size: 14px; }
.terminal-result dl {
    margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px var(--space-3);
}
.terminal-result dt {
    font-size: 11px; text-transform: uppercase; color: var(--fg-subtle);
    letter-spacing: .5px; font-weight: 600; padding-top: 2px;
}
.terminal-result dd { margin: 0; font-size: 14px; word-break: break-word; }
.terminal-actions {
    display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3);
}
.terminal-actions .btn { text-decoration: none; }

.terminal-list { list-style: none; padding: 0; margin: 0; }
.terminal-list li {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: 9px var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-1);
    background: var(--surface-muted); border: 1px solid transparent;
    font-size: 14px;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.terminal-list li:hover { background: var(--surface); border-color: var(--border); }
.terminal-list li.empty {
    color: var(--fg-subtle); font-size: 13px; background: transparent;
    border: 1px dashed var(--border); justify-content: center;
    padding: var(--space-4); text-align: center;
}
.terminal-list li.empty:hover { background: transparent; border-color: var(--border); }
.terminal-list small { color: var(--fg-subtle); font-size: 12px; }
.terminal-list .link-btn { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.inline-check {
    display: flex !important; align-items: center; gap: var(--space-2);
    font-size: 13px; color: var(--fg-muted);
    /* Zona táctil cómoda: la etiqueta entera activa la casilla. */
    padding: 7px 0; cursor: pointer;
}
.inline-check input {
    width: 18px !important; height: 18px; flex: none;
    margin: 0 !important; display: inline-block !important;
    min-height: 0; accent-color: var(--primary); cursor: pointer;
}

/* Ventana emergente de una agencia */
.terminal-popup { min-width: 220px; font-size: 13px; }
.terminal-popup > strong { font-size: 14px; color: var(--navy-800); }
.popup-address {
    margin: var(--space-2) 0; padding: var(--space-2) 0; display: grid;
    grid-template-columns: auto 1fr; gap: 2px var(--space-2);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.popup-address dt {
    font-size: 10px; text-transform: uppercase; color: var(--fg-subtle);
    letter-spacing: .4px; font-weight: 600;
}
.popup-address dd { margin: 0; font-size: 13px; }
.popup-loading, .terminal-result dd.loading { color: var(--fg-subtle); font-style: italic; }
.popup-coords { margin-top: var(--space-2); color: var(--fg-muted); font-size: 12px; }
.address-error { color: var(--danger); font-size: 12px; margin: var(--space-2) 0 0; }

/* Búsqueda por coordenadas */
.popup-match { margin: var(--space-1) 0; font-size: 12px; color: var(--success); font-weight: 600; }
.popup-match.none { color: var(--warning); }
.terminal-result h4 {
    margin: var(--space-3) 0 var(--space-2); font-size: 11px; text-transform: uppercase;
    letter-spacing: .5px; color: var(--fg-subtle); font-weight: 650;
}
.terminal-result .loading { color: var(--fg-subtle); font-style: italic; }
.terminal-result .terminal-list li { background: var(--surface); }
#coords-form input { font-size: 13px; }

/* =====================================================================
   Gestión de agencias
   ===================================================================== */
.table-terminals td { vertical-align: middle; padding: 10px var(--space-3); }
.table-terminals td small { color: var(--fg-subtle); font-size: 11px; }
.table-terminals .pending {
    color: var(--warning); font-style: normal; font-size: 12px; font-weight: 550;
}
.table-terminals .actions-col,
.table-terminals th.actions-col { white-space: nowrap; text-align: right; }
.table-terminals .actions-col .btn { text-decoration: none; }
.table-terminals td:first-child strong {
    font-family: var(--font-mono); font-size: 14px; color: var(--navy-800);
}
.inline-form { display: inline; margin: 0; }
.filter-form .row { align-items: flex-end; }
.filter-form .btn { margin-top: var(--space-2); }

/* Paginador */
.list-header {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3);
}
.list-header h2 { margin: 0; }
.list-tools { display: flex; align-items: center; gap: var(--space-4); }
.per-page-form { display: flex; align-items: center; }
.per-page-form label {
    display: flex; align-items: center; gap: var(--space-2); margin: 0;
    font-size: 13px; color: var(--fg-subtle);
}
.per-page-form select { width: auto; margin: 0; padding: 5px 10px; min-height: 34px; font-size: 13px; }

.pager {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
    margin-top: var(--space-5); justify-content: center;
}
.pager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; min-height: 38px;
    padding: 6px 11px; border-radius: var(--radius); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--primary); text-decoration: none; font-size: 13px;
    font-weight: 550; font-variant-numeric: tabular-nums;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pager-btn:hover { background: var(--primary-soft); border-color: var(--primary-border); text-decoration: none; }
.pager-btn.current {
    background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 650;
}
.pager-btn.disabled {
    color: #A9B2C2; background: var(--surface-sunken);
    border-color: var(--border); cursor: default;
}
.pager-btn.disabled:hover { background: var(--surface-sunken); }
.pager-gap { padding: 6px 2px; color: var(--fg-subtle); }

.terminal-form .form-actions {
    display: flex; gap: var(--space-2); margin-top: var(--space-5);
    padding-top: var(--space-4); border-top: 1px solid var(--border);
}
.terminal-form .form-actions .btn { text-decoration: none; }

/* =====================================================================
   Usuarios y permisos
   ===================================================================== */
.table-users td { vertical-align: middle; }
.table-users .actions-col, .table-users th.actions-col { white-space: nowrap; text-align: right; }
.table-users .actions-col .btn { text-decoration: none; }
.row-inactive { opacity: .55; }
.perm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.perm-chips li {
    background: var(--primary-soft); color: var(--primary-strong);
    border: 1px solid var(--primary-border); border-radius: var(--radius-pill);
    padding: 2px 10px; font-size: 11px; font-weight: 550;
}
.perm-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.perm-list li {
    padding: var(--space-3); border-radius: var(--radius);
    background: var(--surface-muted); border: 1px solid var(--border);
    margin-bottom: var(--space-2);
    transition: border-color var(--dur-fast) var(--ease);
}
.perm-list li:hover { border-color: var(--border-strong); }
.perm-list .inline-check { align-items: flex-start; gap: var(--space-2); padding: 0; }
.perm-list .inline-check input { margin-top: 2px !important; }
.perm-list strong { display: block; font-size: 14px; color: var(--fg); }
.perm-list small { color: var(--fg-subtle); font-size: 12px; }

/* Barra de progreso (búsqueda de direcciones tras una importación) */
.progress {
    height: 8px; margin: var(--space-2) 0 var(--space-3);
    background: var(--surface-sunken); border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--primary), #4C7FE0);
    border-radius: var(--radius-pill);
    transition: width 600ms var(--ease);
}

/* Descarga de reporte */
.report-form { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.report-form label { flex: 1; min-width: 180px; margin: 0; }

/* =====================================================================
   Select con buscador
   ===================================================================== */
.ss-wrap { position: relative; }
.ss-native { display: none !important; }
.ss-input {
    display: block; width: 100%; margin-top: var(--space-1);
    min-height: 42px;
    padding: 9px 34px 9px 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    font-family: inherit; font-size: 14px; background: var(--surface); cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, #8A93A5 50%),
                      linear-gradient(135deg, #8A93A5 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ss-input:hover { border-color: #AEB9CC; }
.ss-input:focus {
    outline: none; border-color: var(--primary); cursor: text; box-shadow: var(--ring);
}
.ss-list {
    position: absolute; z-index: var(--z-dropdown); left: 0; right: 0; top: 100%;
    margin: var(--space-1) 0 0; padding: var(--space-1); list-style: none;
    max-height: 260px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: fade-in var(--dur-fast) var(--ease);
}
.ss-list[hidden] { display: none; }
.ss-option {
    padding: 9px var(--space-3); border-radius: var(--radius-sm); font-size: 14px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-option.active { background: var(--primary-soft); }
.ss-option.selected { font-weight: 650; color: var(--primary); }
.ss-option.selected.active { background: var(--primary); color: #fff; }
.ss-empty { padding: var(--space-3); font-size: 13px; color: var(--fg-subtle); font-style: italic; }

/* =====================================================================
   Enlace de retroceso
   ===================================================================== */
.back-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-2); padding: 6px 12px 6px 8px;
    border-radius: var(--radius-pill);
    color: var(--primary); text-decoration: none; font-size: 14px; font-weight: 600;
    transition: background var(--dur) var(--ease);
}
.back-link:hover { background: var(--primary-soft); text-decoration: none; }
.back-link span { font-size: 16px; line-height: 1; }

/* Barra de herramientas de Usuarios */
.users-toolbar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
}
.users-toolbar > .btn { text-decoration: none; white-space: nowrap; }
.user-search { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.user-search label { margin: 0; }
.user-search input { min-width: 220px; }
.user-search select { width: auto; }
.user-search .btn { white-space: nowrap; text-decoration: none; }

/* Botón hamburguesa (oculto en escritorio) */
.nav-toggle {
    display: none; background: transparent; border: 0; cursor: pointer;
    padding: 10px; margin-left: auto; border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: rgba(255, 255, 255, .10); }
.nav-toggle span {
    display: block; width: 24px; height: 2px; background: #fff;
    border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   Gestión de Rutas
   ===================================================================== */

/* Estados de la ruta. Los de cada parada reutilizan .status-pendiente y
   compañía, que ya existen más arriba: un solo lenguaje de color. */
.status-borrador   { background: #6B7688; }
.status-asignada   { background: var(--primary); }
.status-encurso    { background: #B45309; }
.status-completada { background: var(--success); }
.status-cancelada  { background: var(--danger); }

.table-routes td { vertical-align: middle; }
.table-routes td small { color: var(--fg-subtle); font-size: 11px; }
.table-routes .pending {
    color: var(--warning); font-style: normal; font-size: 12px; font-weight: 550;
}
.table-routes .actions-col,
.table-routes th.actions-col { white-space: nowrap; text-align: right; }
.table-routes .actions-col .btn { text-decoration: none; }
.table-routes a { color: var(--primary-strong); }

/* Barra de avance dentro de una celda: la misma de las importaciones, más
   estrecha y sin los márgenes que allí la separan del texto. */
.progress-mini { height: 6px; margin: 0 0 var(--space-1); max-width: 120px; }

.stats-route { grid-template-columns: repeat(4, 1fr); }
.stats-route span { font-size: 20px; }

/* ---------- Marcador numerado del mapa ---------- */
.route-pin { background: none; border: 0; }
.route-pin-body {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .45);
}

/* ---------- Lista de paradas (planificador y detalle) ---------- */
.route-picker li, .route-stops li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
}
.route-picker li.empty, .route-stops li.empty {
    display: block; color: var(--fg-subtle); font-size: 13px;
}
.route-pos {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary); color: var(--on-primary);
    font-size: 12px; font-weight: 700; font-family: var(--font-mono);
}
.route-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.route-body strong { font-family: var(--font-mono); font-size: 14px; }
.route-body small { color: var(--fg-muted); font-size: 11px; }
.route-body .badge { align-self: flex-start; }
.route-body .stop-note { font-style: italic; color: var(--fg-subtle); }

/* Los botones de cada parada son varios <form> sueltos (subir, bajar,
   quitar): sin esto cada uno aportaría su margen y romperían la fila. */
.route-picker .route-actions, .route-stops .route-actions {
    margin-top: 0; flex-wrap: nowrap; align-items: center;
}
.route-picker .route-actions form, .route-stops .route-actions form { margin: 0; }
.route-picker .btn.btn-mini, .route-stops .btn.btn-mini {
    padding: 3px 8px; font-size: 12px; line-height: 1.4;
}
.route-picker .btn[disabled], .route-stops .btn[disabled] {
    opacity: .35; cursor: not-allowed;
}

/* Los paneles desplegables ocupan la fila entera, debajo de los tres bloques. */
.stop-status, .stop-history { grid-column: 1 / -1; margin-top: var(--space-1); }
.stop-status summary, .stop-history summary {
    cursor: pointer; font-size: 12px; color: var(--fg-muted);
    padding: 2px 0; list-style-position: inside;
}
.stop-status summary:hover, .stop-history summary:hover { color: var(--primary-strong); }

/* ---------- Historial de una parada ---------- */
.history-list {
    list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-3);
    border-left: 2px solid var(--border);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.history-list li { display: flex; flex-direction: column; gap: 2px; }
.history-list li.empty, .history-list li.loading {
    color: var(--fg-subtle); font-size: 12px;
}
.history-list small { color: var(--fg-subtle); font-size: 11px; }
.history-line {
    display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
    font-size: 11px; color: var(--fg-subtle);
}
/* Las insignias dentro del historial son de referencia, no de acción: van
   más pequeñas para no competir con la del estado actual de la parada. */
.history-line .badge { font-size: 10px; padding: 2px 7px; }
.stop-status form { margin-top: var(--space-2); }
.stop-status .row { gap: var(--space-2); }
.stop-status select, .stop-status input { font-size: 13px; }

.route-inline-actions {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-3);
}
.route-inline-actions form { margin: 0; }
.route-inline-actions .btn { text-decoration: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    :root { --content-pad: 16px; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    #map { min-height: 60vh; }
    .map-section { min-height: 60vh; }
    .sidebar { max-height: none; overflow-y: visible; }
}

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
    :root { --header-h: 56px; --content-pad: 12px; }
    body { font-size: 15px; }
    .card { padding: var(--space-4); border-radius: var(--radius); }
    .sidebar { padding: var(--space-4); }
    .page-header h1 { font-size: 22px; }

    /* --- Menú --- */
    .topbar { flex-wrap: wrap; padding: var(--space-2) var(--space-4); }
    .topbar .brand a { font-size: 16px; }
    .brand-logo { height: 26px; }
    .nav-toggle { display: block; }
    .nav {
        display: none; width: 100%; order: 3;
        flex-direction: column; align-items: stretch; gap: 2px;
        margin-top: var(--space-2); padding-top: var(--space-2);
        border-top: 1px solid rgba(255, 255, 255, .15);
    }
    .nav.open { display: flex; animation: nav-in var(--dur) var(--ease); }
    @keyframes nav-in {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: none; }
    }
    .nav a { margin: 0; padding: 12px; }          /* zona táctil amplia */
    .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 #6E9BF2; }
    .nav .user { margin: var(--space-2) var(--space-3); font-size: 12px; }
    .nav .btn-ghost { text-align: center; padding: 12px; justify-content: center; }

    /* --- Formularios: campos apilados y sin zoom automático en iOS --- */
    /* align-items: stretch es imprescindible: al pasar la fila a columna, el
       eje transversal es el horizontal, así que un flex-end heredado dejaría
       los campos encogidos y pegados a la derecha. */
    .row { flex-direction: column; gap: 0; align-items: stretch; }
    .row > * { width: 100%; }
    .filter-form .row { align-items: stretch; }
    /* 16 px es el mínimo que evita que iOS haga zoom al enfocar un campo. */
    form input, form select, form textarea, .ss-input { font-size: 16px; min-height: 46px; }
    .btn { min-height: 46px; padding: 12px 18px; }
    .btn-mini { min-height: 38px; padding: 8px 14px; font-size: 13px; }

    .report-form, .filter-form { flex-direction: column; align-items: stretch; }
    .report-form label { min-width: 0; }
    .report-form .btn, .filter-form .btn { width: 100%; margin-top: var(--space-3); }

    /* --- Cabecera del listado y paginador --- */
    .list-header { flex-direction: column; align-items: stretch; }
    .list-tools { justify-content: space-between; }
    .pager-btn { min-width: 42px; min-height: 42px; }

    /* --- Tablas convertidas en tarjetas --- */
    .table-wrap { border: 0; overflow-x: visible; }
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
    .table-cards tr {
        border: 1px solid var(--border); border-radius: var(--radius);
        padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
        background: var(--surface); box-shadow: var(--shadow-xs);
    }
    .table-cards tr:hover { background: var(--surface); }
    /* Etiqueta encima del valor: en bloque, para que el contenido mixto
       (texto + <br> + <small>) fluya normal. Con flex cada trozo se
       convertiría en un elemento flex por separado y se descolocaría. */
    .table-cards td {
        border: 0; padding: var(--space-2) 0; font-size: 14px;
        border-bottom: 1px solid var(--surface-sunken);
    }
    .table-cards tr td:last-child { border-bottom: 0; }
    .table-cards td::before {
        content: attr(data-label);
        display: block; margin-bottom: 2px;
        font-size: 10px; text-transform: uppercase;
        letter-spacing: .5px; color: var(--fg-subtle); font-weight: 650;
    }
    .table-cards td.actions-col {
        display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2);
        margin-top: var(--space-2); padding-top: var(--space-3);
        border-top: 1px solid var(--border); border-bottom: 0;
    }
    .table-cards td.actions-col::before { display: none; }

    /* --- Mapa --- */
    .dashboard-layout, .tech-layout { gap: var(--space-3); }
    #map, .map-section { min-height: 65vh; }
    .map-legend { right: var(--space-2); bottom: var(--space-2); font-size: 11px; }

    /* --- Buscador de agencias --- */
    .terminal-result dl { grid-template-columns: 1fr; gap: 0; }
    .terminal-result dt { margin-top: var(--space-2); }
    .terminal-actions { flex-direction: column; }
    .terminal-actions .btn { width: 100%; }
    .ss-list { max-height: 45vh; }

    /* --- Usuarios / permisos --- */
    .login-card { margin: var(--space-6) auto; padding: var(--space-5); }
    .perm-list li { padding: var(--space-3); }
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }

    /* Botón de retroceso con zona táctil cómoda */
    .back-link {
        padding: 10px 16px; margin-bottom: var(--space-3);
        background: var(--primary-soft); border: 1px solid var(--primary-border);
    }

    .users-toolbar { flex-direction: column; align-items: stretch; }
    .users-toolbar > .btn { width: 100%; }
    .user-search { flex-direction: column; align-items: stretch; }
    .user-search input, .user-search select { min-width: 0; width: 100%; }
    .user-search .btn { width: 100%; }
}

/* Móviles muy estrechos */
@media (max-width: 380px) {
    :root { --content-pad: 10px; }
    .card { padding: var(--space-3); }
    .table-cards td.actions-col { flex-wrap: wrap; }
}

/* =====================================================================
   Quien pide menos movimiento, no lo recibe.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}