/* ══════════════════════════════════════════════════════════════════════════
   iRuta — hoja de estilos.

   Paleta GRIS / ROJO / NEGRO, estilo automotriz, a juego con nuestro partner
   AZ & Crazy Detail. El rojo NO es inventado: es #E80B2A, muestreado del
   triángulo de su emblema. Los grises y el negro dan la estructura; el rojo
   se reserva para acción y alerta, que es donde tiene que llamar la atención.

   ── Sobre el contraste (WCAG AA) ──────────────────────────────────────────
   El rojo de marca sobre blanco da 4.65:1, así que sirve para texto normal y
   para botones con letra blanca. Pero sobre NEGRO solo da 3.98:1, o sea que
   NO alcanza para texto corrido. Por eso hay dos rojos:

     --rojo        #E80B2A  → fondos de botón (blanco encima) y texto sobre claro
     --rojo-claro  #FF5A6E  → texto rojo sobre fondos OSCUROS (6.13:1)

   Si alguna vez pones rojo sobre la barra lateral o sobre negro, usa
   --rojo-claro. Con --rojo no se lee bien.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Acento: rojo de AZ & Crazy Detail ── */
    --rojo:          #E80B2A;   /* FONDO de botón, blanco encima: 4.65:1  AA */
    --rojo-texto:    #D00A26;   /* TEXTO rojo sobre claro: 5.13:1 sobre el gris
                                   de fondo. El --rojo puro se queda en 4.26 ahí,
                                   que no llega a AA: por eso hay uno más oscuro
                                   solo para letra. */
    --rojo-hover:    #C10820;
    --rojo-claro:    #FF5A6E;   /* SOLO texto sobre oscuro: 6.13:1  AA */
    --rojo-suave:    #FDECEE;
    --rojo-borde:    #F7C9CF;

    /* ── Estructura: negro y grafito ── */
    --negro:         #14161A;
    --grafito:       #1F2225;
    --grafito-2:     #2A2E33;
    --grafito-3:     #3A3F45;

    /* Alias de compatibilidad: quedaban usos sueltos de los nombres viejos.
       Apuntan a la paleta nueva para que no reaparezca ningún azul. */
    --azul:          #1F2225;
    --azul-claro:    #2A2E33;
    --azul-brillante:#3A3F45;
    --azul-oscuro:   #14161A;
    --acento:        #E80B2A;
    --acento-suave:  #FDECEE;

    /* ── Superficies: grises claros ── */
    --fondo:         #F4F5F6;
    --fondo-2:       #E9EBEC;
    --panel:         #FFFFFF;
    --borde:         #DADDE0;
    --texto:         #14161A;   /* sobre blanco: 18.5:1 */
    --texto-suave:   #5A6068;   /* sobre blanco:  6.35:1 */

    /* ── Estados (todos con letra blanca encima, ≥4.5:1) ── */
    --ok:            #0B7A54;   /* 5.35:1 */
    --alerta:        #B45309;   /* 5.02:1 */
    --peligro:       #8E1420;   /* 9.30:1 — más oscuro que --rojo a propósito:
                                   así el botón de borrar no se confunde con
                                   el botón de acción principal */

    --sombra:        0 1px 2px rgba(10,12,15,.07), 0 8px 24px rgba(10,12,15,.08);
    --sombra-alta:   0 4px 12px rgba(10,12,15,.12), 0 24px 48px rgba(10,12,15,.14);
    --radio:         14px;
    --radio-chico:   10px;
    --barra:         236px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

/* ═══════════════════ LOGIN ═══════════════════════════════════════════════ */
.login-pantalla {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: var(--panel);
}

.login-arte {
    position: relative;
    background:
        radial-gradient(1100px 700px at 15% 10%, #3A3F45 0%, transparent 55%),
        radial-gradient(900px 700px at 85% 90%, #E80B2A 0%, transparent 42%),
        linear-gradient(150deg, #24282D 0%, #17191D 55%, #0E1013 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 64px;
    overflow: hidden;
}

/* Trazo de ruta decorativo */
.login-arte::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 90px);
    opacity: .5;
}

.login-arte > * { position: relative; z-index: 1; }

.login-arte h2 {
    font-size: 2.5rem;
    line-height: 1.15;
    margin: 0 0 16px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.login-arte p {
    font-size: 1.06rem;
    opacity: .92;
    max-width: 30rem;
    margin: 0 0 34px;
}

.login-arte ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 13px;
    max-width: 30rem;
}

.login-arte li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .97rem;
    opacity: .95;
}

.login-arte li .punto {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    display: grid; place-items: center;
    font-size: .8rem;
}

.login-caja {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
}

.login-form {
    width: 100%;
    max-width: 420px;
}

.login-logo {
    display: block;
    max-width: 280px;
    width: 100%;
    height: auto;
    margin: 0 auto 26px;
}

.login-form h1 {
    font-size: 2.15rem;
    margin: 0 0 8px;
    text-align: center;
    color: var(--azul);
    font-weight: 700;
    letter-spacing: -.02em;
}

.login-form .subtitulo {
    text-align: center;
    color: var(--texto-suave);
    margin: 0 0 30px;
    font-size: 1rem;
}

.campo { margin-bottom: 18px; }

.campo label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 7px;
    color: var(--texto);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 15px 16px;
    font-size: 1.02rem;
    border: 2px solid var(--borde);
    border-radius: var(--radio-chico);
    background: #FAFBFB;
    color: var(--texto);
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: inherit;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--rojo);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232,11,42,.15);
}

/* ── Campo de contraseña con ojito ────────────────────────────────────────
   El botón va DENTRO del campo, alineado a la derecha, con área táctil de
   44x44 px. El input reserva ese espacio con padding para que el texto nunca
   quede debajo del icono.
   ─────────────────────────────────────────────────────────────────────── */
.campo-con-ojo { position: relative; display: block; }

.campo-con-ojo input { padding-right: 54px; width: 100%; }

.boton-ojo {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    color: var(--texto-suave);
    transition: background .14s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.boton-ojo:hover { background: var(--fondo-2); }
.boton-ojo:focus-visible {
    outline: 3px solid var(--rojo);
    outline-offset: -2px;
    background: var(--fondo-2);
}
.boton-ojo[aria-pressed="true"] { background: var(--fondo-2); }

/* Quita el ojito nativo de Edge/IE para no tener dos */
.campo-con-ojo input::-ms-reveal,
.campo-con-ojo input::-ms-clear { display: none; }

/* ── Casilla "Recordarme" ─────────────────────────────────────────────── */
.casilla-recordarme {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: -4px 0 20px;
    min-height: 44px;
    cursor: pointer;
    font-size: .94rem;
    color: var(--texto);
    user-select: none;
}
.casilla-recordarme input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--azul);
    cursor: pointer;
    flex: 0 0 auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    font-size: .97rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: var(--radio-chico);
    background: var(--rojo);
    color: #fff;
    cursor: pointer;
    transition: background .15s, transform .08s, box-shadow .15s;
    text-decoration: none;
}

.btn:hover { background: var(--rojo-hover); text-decoration: none; box-shadow: var(--sombra); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-grande {
    width: 100%;
    padding: 17px 20px;
    font-size: 1.12rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-hover) 100%);
    box-shadow: 0 6px 18px rgba(232,11,42,.30);
}

.btn-grande:hover {
    background: linear-gradient(135deg, var(--rojo-hover) 0%, var(--rojo) 100%);
    box-shadow: 0 8px 24px rgba(232,11,42,.38);
}

.btn-fantasma {
    background: transparent;
    color: var(--azul);
    border: 2px solid var(--borde);
}
.btn-fantasma:hover { background: var(--fondo-2); color: var(--azul-oscuro); }

.btn-peligro { background: var(--peligro); }
.btn-peligro:hover { background: #6E0F19; }

.btn-chico { padding: 7px 13px; font-size: .85rem; }

.aviso {
    padding: 13px 16px;
    border-radius: var(--radio-chico);
    margin-bottom: 18px;
    font-size: .93rem;
    border-left: 4px solid;
}
.aviso-error { background: #FEF2F2; border-color: var(--peligro); color: #97180C; }
.aviso-ok    { background: #F0FDF4; border-color: var(--ok); color: #04543A; }
.aviso-info  { background: var(--fondo-2); border-color: var(--azul-claro); color: var(--azul-oscuro); }

.login-pie {
    margin-top: 26px;
    text-align: center;
    font-size: .85rem;
    color: var(--texto-suave);
}
/* El enlace de regreso, con área táctil suficiente */
.login-pie a {
    display: inline-block;
    padding: 11px 16px;
    min-height: 44px;
    line-height: 22px;
}

/* ═══════════════════ ESTRUCTURA DE LA APP ════════════════════════════════ */
.app { display: flex; min-height: 100vh; }

.barra-lateral {
    width: var(--barra);
    flex: 0 0 var(--barra);
    background: linear-gradient(180deg, #14161A 0%, #24282D 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
}

.barra-marca {
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.barra-marca img { width: 100%; max-width: 168px; display: block; }

.barra-menu { flex: 1; padding: 14px 10px; overflow-y: auto; }

.barra-menu .grupo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    opacity: .55;
    padding: 16px 12px 7px;
    font-weight: 700;
}

.barra-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: var(--radio-chico);
    color: rgba(255,255,255,.86);
    font-size: .93rem;
    font-weight: 500;
    margin-bottom: 3px;
    transition: background .14s, color .14s;
}
.barra-menu a:hover { background: rgba(255,255,255,.11); color: #fff; text-decoration: none; }
.barra-menu a.activo { background: rgba(255,255,255,.19); color: #fff; font-weight: 600; }
.barra-menu a .ic { font-size: 1.05rem; width: 20px; text-align: center; }

.barra-usuario {
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .86rem;
}
.barra-usuario .nombre { font-weight: 600; }
.barra-usuario .rol { opacity: .65; font-size: .78rem; text-transform: capitalize; }
.barra-usuario a { color: rgba(255,255,255,.8); font-size: .82rem; }

.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.encabezado {
    background: var(--panel);
    border-bottom: 1px solid var(--borde);
    padding: 15px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.encabezado h1 { font-size: 1.3rem; margin: 0; font-weight: 700; color: var(--texto); }
.encabezado .crece { flex: 1; }

.menu-movil {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--azul);
    cursor: pointer;
    padding: 4px 8px;
}

.cuerpo { padding: 22px 26px 40px; flex: 1; }

/* ═══════════════════ COMPONENTES ═════════════════════════════════════════ */
.panel {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.panel-titulo {
    padding: 15px 20px;
    border-bottom: 1px solid var(--borde);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #fff, #FAFCFF);
}
.panel-titulo .crece { flex: 1; }
.panel-cuerpo { padding: 18px 20px; }

.rejilla { display: grid; gap: 18px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.tarjeta-dato {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 17px 19px;
    box-shadow: var(--sombra);
}
.tarjeta-dato .etiqueta {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texto-suave);
    font-weight: 700;
    margin-bottom: 6px;
}
.tarjeta-dato .valor {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--azul);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.tarjeta-dato .pie { font-size: .82rem; color: var(--texto-suave); margin-top: 4px; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .91rem; }
table.tabla th {
    text-align: left;
    padding: 11px 14px;
    background: var(--fondo-2);
    color: var(--azul-oscuro);
    font-weight: 700;
    font-size: .79rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: 1px solid var(--borde);
}
table.tabla td { padding: 11px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table.tabla tr:last-child td { border-bottom: none; }
table.tabla tbody tr:hover { background: #F6F7F8; }

/* Etiquetas de estado */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
.pill-ok      { background: #E7F8F1; color: #04543A; }
.pill-gris    { background: #EDEEF0; color: #5A6068; }
.pill-alerta  { background: #FEF4E6; color: #8A4B04; }
.pill-peligro { background: #FDECEE; color: #8E1420; }
.pill-azul    { background: #E9EBEC; color: #24282D; }
.pill-acento  { background: var(--rojo-suave); color: #8E1420; }

.punto-estado {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; flex: 0 0 auto;
}
.punto-en-linea  { background: var(--ok); box-shadow: 0 0 0 3px rgba(16,18,21,.18); }
.punto-fuera     { background: #B4B8BD; }

/* Mapa */
.mapa-pantalla { display: flex; height: calc(100vh - 57px); }
#mapa { flex: 1; min-height: 320px; z-index: 1; }

.lista-flota {
    width: 320px;
    flex: 0 0 320px;
    background: var(--panel);
    border-right: 1px solid var(--borde);
    overflow-y: auto;
}

.flota-item {
    padding: 13px 16px;
    border-bottom: 1px solid var(--borde);
    cursor: pointer;
    transition: background .13s;
}
.flota-item:hover { background: #F6F7F8; }
.flota-item.activo { background: #FDECEE; border-left: 3px solid var(--rojo); }
.flota-item .nombre { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.flota-item .detalle { font-size: .82rem; color: var(--texto-suave); margin-top: 3px; }

.buscador {
    padding: 12px 14px;
    border-bottom: 1px solid var(--borde);
    position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.buscador input {
    width: 100%; padding: 9px 12px; border: 1px solid var(--borde);
    border-radius: var(--radio-chico); font-size: .9rem; font-family: inherit;
}
.buscador input:focus { outline: none; border-color: var(--azul-claro); }

/* Marcador propio del mapa */
.marcador-iruta {
    background: none !important;
    border: none !important;
}
.marcador-cuerpo {
    width: 34px; height: 34px; border-radius: 50% 50% 50% 6px;
    transform: rotate(-45deg);
    display: grid; place-items: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
    border: 2.5px solid #fff;
}
.marcador-cuerpo span { transform: rotate(45deg); font-size: 1rem; }

/* Consola de tramas */
.consola {
    background: #101215;
    color: #D6D9DC;
    font-family: "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: .8rem;
    line-height: 1.5;
    padding: 14px 16px;
    border-radius: var(--radio-chico);
    height: 460px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.consola .linea { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.consola .hora { color: #8A9099; }
.consola .entra { color: #4ADE80; font-weight: 700; }
.consola .sale  { color: #F0A63C; font-weight: 700; }
.consola .hex   { color: #E7E9EB; }
.consola .txt   { color: #A9B0B8; }
.consola .nota  { color: #9AA1A9; font-style: italic; }
.consola .desconocida { color: #FF5A6E; }

/* Modal */
.modal-fondo {
    position: fixed; inset: 0; background: rgba(16,18,21,.55);
    display: none; align-items: center; justify-content: center;
    z-index: 100; padding: 20px; backdrop-filter: blur(3px);
}
.modal-fondo.abierto { display: flex; }
.modal {
    background: var(--panel); border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
}
.modal .panel-titulo { position: sticky; top: 0; }
.modal-pie {
    padding: 14px 20px; border-top: 1px solid var(--borde);
    display: flex; gap: 10px; justify-content: flex-end;
    background: #FAFBFB;
}

.vacio {
    padding: 44px 20px; text-align: center; color: var(--texto-suave);
}
.vacio .icono { font-size: 2.6rem; opacity: .35; display: block; margin-bottom: 10px; }

.barra-herramientas {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px;
}
.barra-herramientas .crece { flex: 1; }
.barra-herramientas select,
.barra-herramientas input {
    padding: 9px 12px; border: 1px solid var(--borde);
    border-radius: var(--radio-chico); font-family: inherit; font-size: .9rem;
    background: #fff;
}

.mudo { color: var(--texto-suave); font-size: .85rem; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: .86rem; }
.nowrap { white-space: nowrap; }
.derecha { text-align: right; }
.centro { text-align: center; }

/* ═══════════════════ LAYOUT DE DOS COLUMNAS ══════════════════════════════
   Para pantallas tipo "mapa + panel lateral" (geocercas, ajustes).
   Se define AQUÍ, con su punto de quiebre, en vez de en un style= suelto:
   ese fue justo el error que dejaba el mapa de geocercas en 2 px de ancho.
   ═══════════════════════════════════════════════════════════════════════ */
.rejilla-lateral {
    display: grid;
    gap: 18px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
}
.rejilla-lateral-ancha {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
}

@media (max-width: 900px) {
    .rejilla-lateral,
    .rejilla-lateral-ancha {
        grid-template-columns: 1fr;   /* una sola columna: nada se aplasta */
    }
}

/* ═══════════════════ TABLAS APILABLES EN MÓVIL ═══════════════════════════
   En celular, una tabla de 8 columnas es ilegible. Estas se convierten en
   tarjetas: cada fila es un bloque y cada celda muestra su etiqueta.
   Requiere data-label="..." en los <td> (lo pone el JS que pinta las filas).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    table.tabla-apilable thead { display: none; }

    table.tabla-apilable,
    table.tabla-apilable tbody,
    table.tabla-apilable tr,
    table.tabla-apilable td { display: block; width: 100%; }

    table.tabla-apilable tr {
        border: 1px solid var(--borde);
        border-radius: var(--radio-chico);
        margin-bottom: 12px;
        padding: 6px 4px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16,18,21,.05);
    }
    table.tabla-apilable tbody tr:hover { background: #fff; }

    table.tabla-apilable td {
        border: none;
        border-bottom: 1px solid var(--fondo-2);
        padding: 9px 12px;
        text-align: left !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-height: 42px;
    }
    table.tabla-apilable td:last-child { border-bottom: none; }

    table.tabla-apilable td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--texto-suave);
        flex: 0 0 auto;
        max-width: 45%;
    }
    /* Celdas marcadas como "principal": el nombre de la fila, sin etiqueta */
    table.tabla-apilable td[data-label=""]::before,
    table.tabla-apilable td.principal::before { content: none; }
    table.tabla-apilable td.principal {
        background: var(--fondo-2);
        border-radius: 8px;
        font-size: 1rem;
        margin-bottom: 4px;
    }
    /* La celda de acciones ocupa todo el ancho, botones grandes */
    table.tabla-apilable td.acciones {
        justify-content: stretch;
        flex-wrap: wrap;
        padding-top: 12px;
    }
    table.tabla-apilable td.acciones .btn { flex: 1 1 auto; min-height: 42px; }
    table.tabla-apilable td.acciones::before { content: none; }

    /* Aviso visual de que una tabla NO apilada se desplaza a los lados */
    .tabla-envoltura {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .tabla-envoltura::after {
        content: "→ desliza para ver más";
        display: block;
        font-size: .74rem;
        color: var(--texto-suave);
        padding: 6px 14px 2px;
        font-style: italic;
    }
    table.tabla-apilable + .pista-scroll,
    .tabla-envoltura:has(table.tabla-apilable)::after { content: none; }
}

/* ═══════════════════ RESPONSIVO ══════════════════════════════════════════ */
@media (max-width: 980px) {
    .login-pantalla { grid-template-columns: 1fr; }
    .login-arte { display: none; }
    .login-caja { padding: 34px 20px; min-height: 100vh; }
}

@media (max-width: 860px) {
    .barra-lateral {
        position: fixed; left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--sombra-alta);
    }
    .barra-lateral.abierta { transform: translateX(0); }
    .menu-movil { display: block; }
    .cuerpo { padding: 16px 14px 32px; }
    .encabezado { padding: 12px 14px; }
    .encabezado h1 { font-size: 1.1rem; }

    .mapa-pantalla { flex-direction: column; height: auto; }
    .lista-flota {
        width: 100%; flex: none; max-height: 42vh;
        border-right: none; border-bottom: 1px solid var(--borde);
    }
    #mapa { height: 58vh; }

    .velo-fondo-movil {
        position: fixed; inset: 0; background: rgba(16,18,21,.45);
        z-index: 39; display: none;
    }
    .velo-fondo-movil.abierto { display: block; }
}

@media (max-width: 560px) {
    body { font-size: 14px; }
    .login-form h1 { font-size: 1.8rem; }
    .login-logo { max-width: 220px; }
    .rejilla-3, .rejilla-4 { grid-template-columns: 1fr 1fr; }
    .tarjeta-dato .valor { font-size: 1.5rem; }
    .modal-pie { flex-direction: column-reverse; }
    .modal-pie .btn { width: 100%; }
}

/* ═══════════════════ TÁCTIL: TODO ALCANZABLE CON EL PULGAR ═══════════════
   Recomendación de accesibilidad: 44x44 px mínimo para cualquier cosa que
   se toque. Aquí se aplica a botones, enlaces de menú, controles de formulario
   y a los controles del mapa (Leaflet los trae de 30 px, muy chicos).
   ═══════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 860px) {
    .btn { min-height: 44px; padding: 12px 20px; }
    .btn-chico { min-height: 40px; padding: 9px 15px; font-size: .88rem; }

    .barra-menu a { min-height: 46px; padding: 12px; }
    .barra-usuario a { display: block; padding: 10px 0; min-height: 40px; }
    .menu-movil { min-width: 44px; min-height: 44px; }

    .campo input, .campo select, .campo textarea { min-height: 46px; font-size: 16px; }
    .barra-herramientas select,
    .barra-herramientas input { min-height: 44px; font-size: 16px; }
    .buscador input { min-height: 44px; font-size: 16px; }

    /* Casillas y radios: 13 px es imposible de tocar */
    input[type="checkbox"], input[type="radio"] {
        width: 22px; height: 22px; accent-color: var(--azul);
    }

    .flota-item { padding: 15px 16px; min-height: 58px; }

    /* Evita el retardo de 300 ms y el zoom accidental al tocar dos veces */
    button, a, .btn, summary, .flota-item { touch-action: manipulation; }

    /* Controles de Leaflet a tamaño de dedo */
    .leaflet-touch .leaflet-bar a,
    .leaflet-bar a {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 1.35rem !important;
    }
    .leaflet-control-attribution { font-size: 10px; }
}

/* En móvil los modales ocupan la pantalla: nada de ventanitas que se salen */
@media (max-width: 640px) {
    .modal-fondo { padding: 0; align-items: flex-end; }
    .modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        animation: subir .2s ease-out;
    }
    @keyframes subir { from { transform: translateY(24px); opacity: .6 } }
    .modal .panel-cuerpo { padding: 16px 16px 22px; }
    .modal-pie { position: sticky; bottom: 0; }
}

/* Respeta a quien pidió menos animación en su sistema */
@media (prefers-reduced-motion: reduce) {
    .modal { animation: none; }
    * { transition: none !important; }
}

/* Impresión de reportes */
@media print {
    .barra-lateral, .encabezado, .barra-herramientas, .btn { display: none !important; }
    .cuerpo { padding: 0; }
    .panel { box-shadow: none; border: 1px solid #ccc; }
}

/* ═══════════════════ PIE DE LA APLICACIÓN ════════════════════════════════
   Va en TODAS las pantallas internas. Lleva la mención de la alianza con
   AZ & Crazy Detail, que también aparece en el pie de la landing pública.
   ────────────────────────────────────────────────────────────────────── */
.pie-app {
    margin: 30px 0 0;
    padding: 18px 4px 8px;
    border-top: 1px solid var(--borde);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: .84rem;
    color: var(--texto-suave);
}

.pie-app .pie-sep { opacity: .45; }

.pie-partner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* El emblema del socio viene sobre negro: se le pone un cuadro oscuro
   propio para que no parezca un recorte sucio sobre el fondo gris claro. */
.pie-partner-emblema {
    width: 22px;
    height: 22px;
    object-fit: contain;
    background: #101215;
    border-radius: 5px;
    padding: 2px;
    flex: 0 0 auto;
}

.pie-partner a {
    color: var(--rojo-texto);
    font-weight: 600;
    /* Area tactil de 44 px: un enlace de una linea se queda en ~21 px de alto,
       que en telefono es muy dificil de atinar. El padding vertical no separa
       visualmente porque el pie ya tiene aire. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
}

.pie-partner a:hover { color: var(--rojo-hover); }

/* En pantallas chicas el pie se apila para no apretujarse */
@media (max-width: 560px) {
    .pie-app { flex-direction: column; align-items: flex-start; gap: 6px; }
    .pie-app .pie-sep { display: none; }
}