/* ══════════════════════════════════════════════════════════════════════════
   iRuta — hoja de estilos.
   Colores tomados del logo: azul profundo #0049AF, azul del pin #004DB7,
   acento rosa/rojo de la onda #F12166. Tema claro, limpio y responsivo.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --azul:          #0049AF;
    --azul-claro:    #0B69E3;
    --azul-brillante:#1E8BFF;
    --azul-oscuro:   #00306F;
    --acento:        #F12166;
    --acento-suave:  #FFE9F0;

    --fondo:         #F2F6FC;
    --fondo-2:       #E8F0FA;
    --panel:         #FFFFFF;
    --borde:         #DCE6F4;
    --texto:         #16233A;
    --texto-suave:   #5C6E8A;

    --ok:            #0E9F6E;
    --alerta:        #E9860A;
    --peligro:       #E02424;

    --sombra:        0 1px 2px rgba(16,40,80,.06), 0 8px 24px rgba(16,40,80,.07);
    --sombra-alta:   0 4px 12px rgba(16,40,80,.10), 0 24px 48px rgba(16,40,80,.12);
    --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(--azul-claro); 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%, #1E8BFF 0%, transparent 55%),
        radial-gradient(900px 700px at 85% 90%, #F12166 0%, transparent 45%),
        linear-gradient(150deg, #0049AF 0%, #00306F 55%, #001F4A 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: #FBFDFF;
    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(--azul-claro);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(11,105,227,.12);
}

.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(--azul);
    color: #fff;
    cursor: pointer;
    transition: background .15s, transform .08s, box-shadow .15s;
    text-decoration: none;
}

.btn:hover { background: var(--azul-claro); 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(--azul) 0%, var(--azul-claro) 100%);
    box-shadow: 0 6px 18px rgba(0,73,175,.28);
}

.btn-grande:hover {
    background: linear-gradient(135deg, var(--azul-claro) 0%, var(--azul-brillante) 100%);
    box-shadow: 0 8px 24px rgba(0,73,175,.36);
}

.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: #C81E1E; }

.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, #00306F 0%, #0049AF 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: #F7FAFF; }

/* 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: #EEF2F7; color: #5C6E8A; }
.pill-alerta  { background: #FEF4E6; color: #8A4B04; }
.pill-peligro { background: #FEECEC; color: #97180C; }
.pill-azul    { background: #E7F0FE; color: var(--azul-oscuro); }
.pill-acento  { background: var(--acento-suave); color: #A50D40; }

.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(14,159,110,.18); }
.punto-fuera     { background: #B6C2D4; }

/* 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: #F7FAFF; }
.flota-item.activo { background: #EBF3FF; border-left: 3px solid var(--azul); }
.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: #0B1729;
    color: #C8E1FF;
    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: #6E8FB8; }
.consola .entra { color: #4ADE80; font-weight: 700; }
.consola .sale  { color: #F1A621; font-weight: 700; }
.consola .hex   { color: #E8F1FF; }
.consola .txt   { color: #7FB4E8; }
.consola .nota  { color: #9BB4D0; font-style: italic; }
.consola .desconocida { color: #FF8FA9; }

/* Modal */
.modal-fondo {
    position: fixed; inset: 0; background: rgba(11,23,41,.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: #FAFCFF;
}

.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,40,80,.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(11,23,41,.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; }
}