/* Aspecto de toda la aplicación, alineado al piloto (verde institucional; Inter / Barlow / JetBrains Mono, servidas desde /assets/fonts).
   Los colores y medidas están en variables: para rediseñar, basta cambiar este archivo. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/barlow-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }
:root {
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Barlow', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --fondo: #eef2ee; --superficie: #ffffff; --superficie-2: #f4f7f4; --superficie-3: #e8ede8;
  --texto: #15211b; --tenue: #5b6b60; --debil: #8b9a90; --borde: #d8e0d9;
  --primario: #12603b; --primario-2: #1f8a54; --primario-oscuro: #0c3f27; --sobre-primario: #ffffff;
  --ok: #17703f;      --ok-fondo: #e4f2ea;
  --error: #b3362c;   --error-fondo: #fae3e1;
  --info: #1b6a99;    --info-fondo: #e0eef6;
  --aviso: #8a5a00;   --aviso-fondo: #fbf0da;   --advertencia: #d99417;
  --radio: 10px; --radio-peq: 7px;
  --sombra: 0 1px 2px rgba(16, 40, 28, .06), 0 8px 24px rgba(16, 40, 28, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0d1512; --superficie: #141d18; --superficie-2: #18231d; --superficie-3: #1e2a23;
    --texto: #e6efe8; --tenue: #93a699; --debil: #6b7d72; --borde: #26332b;
    --primario: #2ba869; --primario-2: #35c07b; --primario-oscuro: #35c07b; --sobre-primario: #06210f;
    --ok: #35c07b; --ok-fondo: #123324; --error: #e2685c; --error-fondo: #361d1a;
    --info: #4d9fce; --info-fondo: #0f2836; --aviso: #e6ac3f; --aviso-fondo: #33280f; --advertencia: #e6ac3f;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--primario); }
a:hover { color: var(--primario-oscuro); }
h1, h2, h3, h4 { font-family: var(--disp); letter-spacing: -.01em; line-height: 1.15; }
h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
code, .mono { font-family: var(--mono); }
code { font-size: .9em; background: var(--superficie-2); padding: .1em .35em; border-radius: 4px; }
.tenue { color: var(--tenue); }
.nowrap { white-space: nowrap; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }

/* Estructura: barra superior + menú lateral por secciones (como el piloto). Sin JavaScript: el menú móvil usa una casilla oculta. */
.menu-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.app { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); grid-template-rows: 3.5rem 1fr; min-height: 100vh; min-height: 100dvh; }
.pie-legal { text-align: center; padding: .9rem 1rem; font-size: .9rem; line-height: 1.4; color: var(--texto); border-top: 1px solid var(--borde); }
.topbar { grid-column: 1 / 3; display: flex; align-items: center; gap: .9rem; padding: 0 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 30; }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--texto); }
.marca .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg, #1f8a54, #12603b); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--sombra); }
.marca b { font-family: var(--disp); font-weight: 800; font-size: 15px; display: block; line-height: 1.05; }
.marca small { font-size: 10.5px; color: var(--tenue); display: block; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.icono-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: var(--tenue); display: flex; align-items: center; justify-content: center; font: inherit; font-size: 15px; cursor: pointer; text-decoration: none; }
.icono-btn:hover { color: var(--texto); border-color: var(--primario-2); }
.menu-btn { display: none; }
.usuario-chip { display: flex; align-items: center; gap: .55rem; padding: 4px 12px 4px 4px; border: 1px solid var(--borde); border-radius: 22px; background: var(--superficie); text-decoration: none; color: var(--texto); }
.usuario-chip:hover { border-color: var(--primario-2); color: var(--texto); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primario); color: var(--sobre-primario); font-family: var(--disp); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.usuario-chip .un { font-family: var(--disp); font-weight: 600; font-size: 12.5px; line-height: 1.05; display: block; }
.usuario-chip .ur { font-size: 10px; color: var(--tenue); display: block; }
.sidebar { grid-row: 2; background: var(--superficie); border-right: 1px solid var(--borde); padding: .75rem .6rem; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 3.5rem; align-self: start; height: calc(100vh - 3.5rem); overflow: auto; }
.nav-sec { font-family: var(--disp); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--debil); padding: .8rem .7rem .3rem; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 8px; color: var(--tenue); font-weight: 500; font-size: 13.5px; text-decoration: none; }
.nav-item .ni { font-size: 16px; width: 20px; text-align: center; flex: 0 0 auto; }
.nav-item:hover { background: var(--superficie-2); color: var(--texto); }
.nav-item[aria-current="page"] { background: var(--ok-fondo); color: var(--primario); font-weight: 600; }
.nav-item .badge { margin-left: auto; background: var(--error); color: #fff; font: 700 10px var(--mono); padding: 1px 6px; border-radius: 10px; }
.sidebar-pie { margin-top: auto; padding: .6rem; font-size: 10.5px; color: var(--debil); border-top: 1px solid var(--borde); }
.main { grid-column: 2; grid-row: 2; min-width: 0; }
.velo { display: none; }
.en-linea { display: inline; margin: 0; }
.enlace { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; color: var(--primario); }

/* Pantalla de ingreso (como el piloto, sin el selector de perfil de demostración) */
.acceso-pagina { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(120% 90% at 10% 0%, #d7eadd 0%, var(--fondo) 55%); }
.login-card { width: 100%; max-width: 60rem; background: var(--superficie); border-radius: 16px; box-shadow: 0 12px 40px rgba(16, 40, 28, .18); display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden; border: 1px solid var(--borde); }
.login-hero { background: linear-gradient(160deg, #12603b 0%, #0c3f27 100%); color: #fff; padding: 2.2rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.login-hero .crest { width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.login-hero h1 { font-size: 1.7rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.1; }
.login-hero .sub { color: #bce9d0; font-size: 13px; margin-top: .4rem; }
.hero-feats { display: grid; gap: .6rem; margin-top: auto; font-size: 13px; color: #e6f4ec; }
.hero-feats .ic { display: inline-block; width: 1.6rem; }
.login-form { padding: 2.2rem 2rem; }
.login-form h2 { font-size: 1.5rem; margin: 0 0 .25rem; }
.login-form .pista { color: var(--tenue); margin: 0 0 1.25rem; font-size: 13px; }
.login-pie { margin-top: 1.5rem; font-size: 11px; color: var(--debil); }

/* Contenido */
.contenedor { max-width: 82rem; margin: 0 auto; padding: 1.25rem 1.25rem 2.5rem; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; box-shadow: var(--sombra); }
.tarjeta.angosta { max-width: 34rem; }
.tarjeta.acceso { max-width: 26rem; margin: 3rem auto; }
.encabezado-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.encabezado-pagina h1 { margin: 0; }

/* Avisos */
.aviso { border: 1px solid var(--borde); border-left-width: 5px; border-radius: var(--radio); padding: .65rem .9rem; margin: 0 0 1rem; background: var(--superficie); }
.aviso.ok { background: var(--ok-fondo); border-color: var(--ok); }
.aviso.error { background: var(--error-fondo); border-color: var(--error); }
.aviso.info { background: var(--info-fondo); border-color: var(--info); }
.aviso.aviso-fuerte { background: var(--aviso-fondo); border-color: var(--aviso); }
.clave-temporal { display: inline-block; margin: .35rem .5rem; padding: .3rem .7rem; font-size: 1.2rem; letter-spacing: .06em; user-select: all; }

/* Formularios */
.campo { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .25rem; }
label { font-weight: 600; }
input, select, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; padding: .5rem .65rem; min-height: 2.5rem; width: 100%; }
input[disabled] { background: var(--fondo); color: var(--tenue); }
.filtros { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin: 0 0 1rem; }
.filtros .campo { margin: 0; min-width: 11rem; flex: 1 1 11rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* Botones */
.btn { display: inline-block; font: inherit; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; min-height: 2.5rem; padding: .45rem 1rem;
       color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; }
.btn:hover { border-color: var(--primario); color: var(--texto); }
.btn.primario { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.btn.primario:hover { background: var(--primario-oscuro); color: var(--sobre-primario); }
.btn.peligro { color: var(--error); border-color: var(--error); }
.btn.peq { min-height: 2rem; padding: .2rem .65rem; font-size: .9rem; }

/* Tablas */
.tabla-scroll { overflow-x: auto; max-width: 100%; contain: paint; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: var(--fondo); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); }
.tabla tr:last-child td { border-bottom: 0; }
.insignia { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; margin: 0 .2rem .2rem 0; }
.insignia.ok { background: var(--ok-fondo); color: var(--ok); }
.insignia.apagada { background: var(--fondo); color: var(--tenue); border: 1px solid var(--borde); }
.insignia.alerta { background: var(--error-fondo); color: var(--error); }
.insignia.info { background: var(--info-fondo); color: var(--info); }
.paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }

/* Inicio: módulos */
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.modulo { display: block; text-decoration: none; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); }
a.modulo:hover { border-color: var(--primario); }
.modulo h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.modulo p { margin: 0; color: var(--tenue); font-size: .92rem; }
.modulo.pendiente { opacity: .65; }
.etiqueta { display: inline-block; margin-top: .5rem; font-size: .75rem; font-weight: 600; color: var(--tenue); border: 1px solid var(--borde); border-radius: 999px; padding: 0 .5rem; }

/* Datos y estado */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.datos dt { color: var(--tenue); }
.datos dd { margin: 0; }
.chequeos { list-style: none; padding: 0; margin: 0 0 1rem; }
.chequeos li { background: var(--superficie); border: 1px solid var(--borde); border-left-width: 5px; border-radius: var(--radio); padding: .6rem .9rem; margin: 0 0 .5rem; }
.chequeos li.ok { border-left-color: var(--ok); }
.chequeos li.falla { border-left-color: var(--error); background: var(--error-fondo); }

@media (max-width: 40rem) {
  .contenedor { padding: 1rem .75rem 2rem; }
  .pie-legal { font-size: .95rem; padding: 1rem .9rem; }
}

/* Módulo Flota */
.subnav { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--borde); }
.subnav a { padding: .45rem .9rem; text-decoration: none; color: var(--tenue); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--texto); }
.subnav a[aria-current="page"] { color: var(--primario); border-bottom-color: var(--primario); font-weight: 600; }
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.dato { display: flex; flex-direction: column; text-decoration: none; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .9rem; box-shadow: var(--sombra); }
a.dato:hover { border-color: var(--primario); }
.dato .cifra { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.dato .etq { color: var(--tenue); font-size: .85rem; }
.dato.ok .cifra { color: var(--ok); }
.dato.alerta .cifra { color: var(--error); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1rem; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.dos-columnas > section h2:first-child { margin-top: 0; }
.fila-form { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin: .75rem 0; }
.fila-form .campo { margin: 0; flex: 1 1 12rem; }
.campo.ancho { flex: 3 1 18rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
textarea { resize: vertical; }

/* Módulo Mapa en vivo */
[hidden] { display: none !important; }
.mapa-layout { display: grid; grid-template-columns: 21rem 1fr; gap: 1rem; height: calc(100vh - 11rem); height: calc(100dvh - 11rem); min-height: 34rem; }
.mapa-lateral { display: flex; flex-direction: column; min-height: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .75rem; }
.mapa-area { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#mapa { flex: 1 1 auto; min-height: 22rem; border: 1px solid var(--borde); border-radius: var(--radio); z-index: 0; }
.mapa-barra { padding: .35rem .25rem 0; color: var(--tenue); font-size: .85rem; }
.mini-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin-bottom: .75rem; }
.mini { display: flex; flex-direction: column; align-items: center; background: var(--fondo); border-radius: 6px; padding: .3rem .1rem; text-align: center; }
.mini b { font-size: 1.15rem; line-height: 1.1; }
.mini span { font-size: .68rem; color: var(--tenue); }
.casilla { display: flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0 0 .5rem; }
.casilla input { width: auto; min-height: 0; }
.lista-vehiculos { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1 1 auto; min-height: 6rem; }
.lista-vehiculos li.vacio { padding: .5rem 0; }
.veh { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; font: inherit; color: var(--texto); background: none; border: 0; border-bottom: 1px solid var(--borde); padding: .5rem .35rem; cursor: pointer; }
.veh:hover, .veh.sel { background: var(--fondo); }
.veh-texto { display: flex; flex-direction: column; min-width: 0; }
.veh-texto small { color: var(--tenue); }
.leyenda { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .5rem; font-size: .8rem; color: var(--tenue); }
.leyenda span { display: inline-flex; align-items: center; gap: .3rem; }

/* Marcadores: punto de color + placa + flecha de rumbo */
.mk-envoltorio { background: none; border: 0; }
.mk { position: relative; width: 0; height: 0; }
.mk-punto { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; background: #8a95a0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .35); flex: 0 0 auto; }
.mk .mk-punto { position: absolute; left: -9px; top: -9px; }
.mk-punto.movimiento { background: #1f9d55; }
.mk-punto.detenido { background: #1b6fb0; }
.mk-punto.sin_senal, .mk-punto.sin_posicion, .mk-punto.desconocido { background: #8a95a0; }
.mk-placa { position: absolute; left: 0; top: 13px; transform: translateX(-50%); background: #fff; color: #1c2733; font: 600 11px/1 system-ui, sans-serif; padding: 2px 5px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .35); white-space: nowrap; }
.mk-flecha { display: none; position: absolute; left: -5px; top: -20px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #1c2733; transform-origin: 5px 20px; }
.mk.sel .mk-punto { box-shadow: 0 0 0 3px var(--primario), 0 1px 4px rgba(0, 0, 0, .5); }
.mk.sel .mk-placa { background: var(--primario); color: #fff; border-color: var(--primario); }
.popup-veh h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.popup-veh .fila { display: flex; gap: .5rem; font-size: .85rem; line-height: 1.35; }
.popup-veh .k { color: #5b6875; flex: 0 0 6.5rem; }
.popup-veh .v { font-weight: 600; word-break: break-word; }

@media (max-width: 52rem) {
  .mapa-layout { grid-template-columns: 1fr; height: auto; }
  .mapa-area { order: -1; }                 /* en el móvil lo principal es el mapa: va primero */
  .mapa-lateral { max-height: none; }
  .lista-vehiculos { flex: 0 0 auto; max-height: 15rem; }
  #mapa { min-height: 24rem; height: 60vh; }
}

/* Módulo Panel general: gráficos en HTML/CSS. Anchos por clase (la CSP no permite estilos en línea). Colores validados con la guía de dataviz. */
:root { --g-serie: #2a78d6; --g-bueno: #0ca30c; --g-aviso: #fab219; --g-critico: #d03b3b; --g-neutro: #898781; }
@media (prefers-color-scheme: dark) { :root { --g-serie: #3987e5; } }
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}
.panel-cabeza { display: grid; grid-template-columns: minmax(14rem, 17rem) 1fr; gap: 1rem; margin: 0 0 1rem; align-items: stretch; }
.panel-cabeza .resumen { margin: 0; align-content: stretch; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.hero { display: flex; align-items: center; gap: 1rem; }
.hero-cifra { font-size: 3.75rem; font-weight: 700; line-height: 1; color: var(--ok); }
.tarjeta { margin-bottom: 1rem; }
.tarjeta h2:first-child { margin-top: 0; }
.tarjeta .sub { margin: -.25rem 0 .75rem; font-size: .85rem; }
.tarjeta h2.segunda { margin-top: 1.5rem; }
.graficos { align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
.graficos > .tarjeta { margin-bottom: 0; }

/* Barras finas, una sola serie: un color, longitud = cantidad, valor al final */
.barras { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .55rem; }
.barras li { display: grid; grid-template-columns: minmax(6.5rem, 38%) 1fr; align-items: center; gap: .75rem; }
.barras .etq { font-size: .92rem; overflow-wrap: anywhere; }
.barras .pista { display: flex; align-items: center; gap: .5rem; border-left: 1px solid var(--borde); min-height: 1.5rem; }
.barras .barra { display: block; height: 1.25rem; min-width: 2px; flex: 0 0 auto; background: var(--g-serie); border-radius: 0 4px 4px 0; }
.barras .val { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Barra apilada (reparto del total): 2 px de la superficie entre segmentos, extremos redondeados de 4 px */
.pila { display: flex; gap: 2px; height: 1.5rem; margin: .25rem 0 .9rem; }
.seg { flex: 0 1 auto; min-width: 4px; }
.seg:first-child { border-radius: 4px 0 0 4px; }
.seg:last-child { border-radius: 0 4px 4px 0; }
.seg:only-child { border-radius: 4px; }
.seg.g-bueno, .marca.g-bueno { background: var(--g-bueno); }
.seg.g-aviso, .marca.g-aviso { background: var(--g-aviso); }
.seg.g-critico, .marca.g-critico { background: var(--g-critico); }
.seg.g-neutro, .marca.g-neutro { background: var(--g-neutro); }
.leyenda-g { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .1rem; }
.leyenda-g li a, .leyenda-g li { color: var(--texto); text-decoration: none; }
.leyenda-g li { display: grid; grid-template-columns: .7rem 1.1rem 1fr auto; gap: .45rem; align-items: center; padding: .25rem 0; border-bottom: 1px solid var(--borde); }
.leyenda-g li:last-child { border-bottom: 0; }
.leyenda-g a { display: contents; }
.leyenda-g .marca { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
.leyenda-g .ico { text-align: center; color: var(--tenue); font-size: .85rem; }
.leyenda-g .v { font-variant-numeric: tabular-nums; color: var(--tenue); white-space: nowrap; }
.leyenda-g .v b { color: var(--texto); }
.vista-tabla { margin-top: .5rem; font-size: .9rem; }
.vista-tabla summary { cursor: pointer; color: var(--primario); }
.vista-tabla .tabla-scroll { margin-top: .5rem; }
.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Requiere atención: gravedad con icono + palabra (nunca solo color) */
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.item-alerta { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .5rem .9rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--borde); border-left-width: 5px; border-radius: var(--radio); }
.item-alerta.critico { border-left-color: var(--g-critico); background: var(--error-fondo); }
.item-alerta.atencion { border-left-color: var(--g-aviso); background: var(--aviso-fondo); }
.item-alerta.info { border-left-color: var(--primario); background: var(--info-fondo); }
.alerta-marca { white-space: nowrap; }
.alerta-marca .ico { display: inline-block; width: 1.1rem; text-align: center; }
.alerta-items { font-size: .9rem; margin-top: .15rem; }
.alerta-items .extra { color: var(--tenue); }
.sin-alertas { margin: 0; color: var(--ok); font-weight: 600; }
.sin-alertas .ico { margin-right: .3rem; }

@media (max-width: 52rem) {
  .panel-cabeza { grid-template-columns: 1fr; }
  .item-alerta { grid-template-columns: 1fr; }
  .barras li { grid-template-columns: 1fr; gap: .15rem; }
  .hero-cifra { font-size: 3.25rem; }
}

.insignia.prueba { background: var(--aviso-fondo); color: var(--aviso); border: 1px dashed var(--aviso); }

.acceso-contenido { width: 100%; max-width: 60rem; }
.acceso-contenido > .aviso { max-width: 28rem; margin: 0 auto 1rem; }

/* Módulo Planificación de movilización (tarjetas como el piloto: cabecera con el color del proyecto) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1rem; }
.plan-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; }
.plan-top { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; color: #fff; }
.plan-top .t { font-family: var(--disp); font-weight: 700; font-size: 1rem; line-height: 1.1; }
.plan-top .s { font-size: .8rem; opacity: .9; }
.plan-top .h { margin-left: auto; text-align: right; font: 700 1.05rem var(--mono); }
.plan-top .h small { display: block; font: 400 .65rem var(--sans); opacity: .85; }
.col-verde { background: #1f8a54; } .col-azul { background: #2277ab; } .col-rojo { background: #cf3f34; }
.col-dorado { background: #8f6d12; } .col-morado { background: #7a4bab; } .col-gris { background: #5b6b60; }
.col-naranja { background: #d0680a; } .col-turquesa { background: #00909c; } .col-rosa { background: #d1348c; } .col-cafe { background: #6b3f23; }
.col-lima { background: #6f8f00; } .col-indigo { background: #2f37b8; } .col-vino { background: #7a1236; }
/* Selector de color: 13 muestras; las que ya usa otro proyecto o área quedan apagadas */
.paleta { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.paleta legend { font-weight: 600; margin-bottom: .4rem; padding: 0; }
.paleta-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: .45rem; }
.muestra { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border: 2px solid var(--borde); border-radius: var(--radio-peq); cursor: pointer; font-weight: 500; }
.muestra input[type="radio"] { width: 1.05rem; height: 1.05rem; min-height: 0; padding: 0; margin: 0; flex: none; }
.muestra .cuadro { width: 1.5rem; height: 1.5rem; border-radius: 5px; flex: none; }
.muestra.ocupada { cursor: not-allowed; background: var(--superficie-2); }
.muestra.ocupada > span:last-child { opacity: .6; }
.muestra.ocupada small { display: block; font-weight: 400; font-size: .72rem; line-height: 1.1; }
.muestra:has(input:checked) { border-color: var(--primario); background: var(--superficie-2); }
.punto-color { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.plan-body { padding: .8rem .9rem; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .8rem; flex: 1; align-content: start; }
.plan-body .pb { display: flex; flex-direction: column; min-width: 0; }
.plan-body .pb.completo { grid-column: 1 / -1; }
.plan-body .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.plan-body .v { font-weight: 600; overflow-wrap: anywhere; }
.plan-pie { padding: .6rem .9rem; border-top: 1px solid var(--borde); display: flex; align-items: center; gap: .5rem; background: var(--superficie-2); }
.plan-pie .btn { margin-left: auto; }
.est { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.est-borrador, .est-cancelada { background: var(--superficie-2); color: var(--tenue); border-color: var(--borde); }
.est-en_revision, .est-en_autorizacion, .est-asignada, .est-armada { background: var(--info-fondo); color: var(--info); }
.est-devuelta { background: var(--aviso-fondo); color: var(--aviso); }
.est-revisada, .est-autorizada, .est-en_curso { background: var(--ok-fondo); color: var(--ok); }
.est-firmada { background: var(--ok); color: #fff; }
.est-cumplida { background: var(--superficie-3); color: var(--texto); border-color: var(--borde); }
.aviso.suave { border-left-color: var(--advertencia); background: var(--aviso-fondo); }
.encabezado-plan { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; padding: .9rem 1rem; color: #fff; border-radius: var(--radio) var(--radio) 0 0; }
.encabezado-plan h1 { color: #fff; margin: 0; font-size: 1.4rem; }
.encabezado-plan .sub { opacity: .9; font-size: .85rem; }
.encabezado-plan .est { margin-left: auto; }
.ficha { background: var(--superficie); border: 1px solid var(--borde); border-top: 0; border-radius: 0 0 var(--radio) var(--radio); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--sombra); }
.itinerario { list-style: none; margin: 0; padding: 0; }
.itinerario li { display: grid; grid-template-columns: 4rem 1fr; gap: .6rem; padding: .45rem 0; border-bottom: 1px dashed var(--borde); }
.itinerario li:last-child { border-bottom: 0; }
.itinerario .hora { font: 700 .95rem var(--mono); }
.itinerario .lugar { font-weight: 600; }
.itinerario .actividad, .itinerario .mov { color: var(--tenue); font-size: .85rem; }
.itinerario li.inicio .hora { color: var(--primario); }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 .5rem; border-left: 2px solid var(--borde); }
.linea-tiempo li { position: relative; padding: 0 0 .9rem 1.1rem; }
.linea-tiempo .punto { position: absolute; left: -1.05rem; top: .3rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--primario-2); border: 2px solid var(--superficie); }
.linea-tiempo .quien { font-size: .8rem; }
.linea-tiempo .coment { margin-top: .2rem; padding: .35rem .6rem; background: var(--superficie-2); border-left: 3px solid var(--borde); border-radius: 4px; font-size: .9rem; }
.acciones-flujo { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.acciones-flujo form.caja { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; padding: .6rem; border: 1px solid var(--borde); border-radius: var(--radio-peq); background: var(--superficie-2); }
.acciones-flujo form.caja .campo { margin: 0; min-width: 12rem; }
.firmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem; }
.firma { border: 1px solid var(--borde); border-radius: var(--radio-peq); padding: .7rem .8rem; background: var(--superficie); }
.firma.hecha { border-color: var(--ok); background: var(--ok-fondo); }
.firma .rol { font: 700 .8rem var(--disp); text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.firma .huella { font: .72rem var(--mono); color: var(--tenue); word-break: break-all; }
.fila-dinamica { display: grid; grid-template-columns: 1.8rem 6.5rem 1fr 1.3fr auto; gap: .5rem; align-items: start; margin-bottom: .5rem; }
.fila-dinamica.persona { grid-template-columns: 1.8rem 1.5fr 11rem 9rem auto; }
.fila-dinamica .fila-num { font: 700 .85rem var(--mono); color: var(--tenue); padding-top: .65rem; text-align: center; }
.fila-dinamica input, .fila-dinamica select { min-height: 2.3rem; }
.fila-dinamica .btn { min-height: 2.3rem; }
.lista-checks { display: grid; gap: .5rem; }
.lista-checks label { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-weight: 400; padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: var(--radio-peq); background: var(--superficie); cursor: pointer; }
.lista-checks input { width: auto; min-height: 0; margin-top: .25rem; }
.semana { display: grid; grid-template-columns: 11rem repeat(7, minmax(9rem, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; min-width: 0; }
.semana > div { background: var(--superficie); padding: .5rem .6rem; min-width: 0; }
.semana .cab { background: var(--superficie-2); font: 700 .8rem var(--disp); text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.semana .cab.hoy { color: var(--primario); background: var(--ok-fondo); }
.semana .fila-titulo { font-weight: 600; }
.semana .chip-orden { display: block; padding: .3rem .45rem; margin-bottom: .3rem; border-radius: 6px; background: var(--info-fondo); text-decoration: none; color: var(--texto); font-size: .8rem; border-left: 4px solid var(--info); }
.semana .chip-orden.firmada { border-left-color: var(--ok); background: var(--ok-fondo); }
.semana .chip-orden.cancelada { opacity: .5; }
.semana .chip-mov { display: block; padding: .3rem .45rem; margin-bottom: .3rem; border-radius: 6px; background: var(--superficie-2); text-decoration: none; color: var(--texto); font-size: .8rem; border-left: 4px solid var(--advertencia); }
.semana .vacio { color: var(--debil); font-size: .8rem; }
.semana-nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
@media (max-width: 52rem) {
  .fila-dinamica, .fila-dinamica.persona { grid-template-columns: 1fr; }
  .fila-dinamica .fila-num { text-align: left; padding: 0; }
  .semana { grid-template-columns: 8rem repeat(5, 9.5rem); }
}
@media print {
  .topbar, .sidebar, .subnav, .no-imprimir, .velo, .menu-btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .app { display: block; min-height: 0; }   /* si no, el min-height:100vh (pensado para la pantalla) deja una hoja casi vacía y empuja el resto a una 2ª */
  .contenedor { max-width: none; padding: 0; }
}
.hoja { background: #fff; color: #111; max-width: 52rem; margin: 1rem auto; padding: 2rem; border: 1px solid #ccc; }
.hoja h1 { font-size: 1.4rem; margin: 0 0 .2rem; color: #111; }
.hoja h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; margin: 1.3rem 0 .4rem; border-bottom: 2px solid #12603b; padding-bottom: .2rem; color: #111; }
.hoja table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hoja th, .hoja td { border: 1px solid #bbb; padding: .3rem .5rem; text-align: left; vertical-align: top; color: #111; }
.hoja .firmas-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.hoja .firma-h { border-top: 1px solid #111; padding-top: .3rem; font-size: .85rem; min-height: 5rem; }
.hoja .huella-h { font: .65rem var(--mono); color: #444; word-break: break-all; }
.hoja .qr-h { display: block; margin-top: .3rem; image-rendering: pixelated; }
.hoja .sello { display: inline-block; border: 2px solid #12603b; color: #12603b; padding: .1rem .5rem; font-weight: 700; border-radius: 4px; }
.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.acciones-form { margin-top: 1.25rem; }
.rejilla.ancha { grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); }
.tabla th.num { text-align: right; }
#resumen-capacidad.excede { color: var(--error); font-weight: 700; }

/* Ubicaciones en el mapa (formulario de movilización) */
.pin-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .35rem; }
.fila-dinamica .pin-fila { grid-column: 2 / -1; margin-top: 0; }
.pin-estado { font-size: .85rem; }
.pin-estado.pin-ok { color: var(--ok); font-weight: 600; }
.dlg-mapa { width: min(56rem, 94vw); max-height: 94vh; overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); padding: 1rem 1.25rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.dlg-mapa::backdrop { background: rgba(10, 25, 18, .55); }
.dlg-mapa h2 { margin-top: 0; }
#mapa-pin { height: min(50vh, 26rem); border: 1px solid var(--borde); border-radius: var(--radio-peq); margin-bottom: .75rem; }
.dlg-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.dlg-fila .campo { flex: 1 1 16rem; margin: 0; }
@media (max-width: 52rem) { .fila-dinamica .pin-fila { grid-column: 1 / -1; } }
.pin-ok { color: var(--ok); font-weight: 600; }

/* Cumplimiento de la circular */
.periodo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin: 0 0 1rem; }
.periodo .campo { margin: 0; min-width: 9rem; }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.disp-card { position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem .9rem .7rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .25rem; }
.disp-card .disp-n { position: absolute; top: .55rem; right: .7rem; font: 700 .8rem var(--mono); color: var(--tenue); }
.disp-card .disp-ic { font-size: 1.25rem; line-height: 1; }
.disp-card .disp-t { font-weight: 600; font-size: .9rem; line-height: 1.25; min-height: 2.2em; padding-right: 1.6rem; }
.disp-card .disp-m { font: 700 1.9rem/1.1 var(--disp); }
.disp-card .disp-m.m-cumple { color: var(--ok); } .disp-card .disp-m.m-obs { color: var(--error); } .disp-card .disp-m.m-parcial { color: var(--aviso); } .disp-card .disp-m.m-nulo { color: var(--debil); }
.disp-card .disp-sub { font-size: .8rem; color: var(--tenue); min-height: 2.1em; }
.meter { height: .4rem; background: var(--superficie-3); border-radius: 999px; overflow: hidden; margin: .15rem 0 .3rem; }
.meter > i { display: block; height: 100%; background: var(--g-bueno); border-radius: 999px; }
.meter.parcial > i { background: var(--g-aviso); }
.est-cumple { background: var(--ok-fondo); color: var(--ok); }
.est-obs, .est-observaciones { background: var(--error-fondo); color: var(--error); }
.est-parcial { background: var(--aviso-fondo); color: var(--aviso); }
.est-sin_datos, .est-pendiente { background: var(--superficie-2); color: var(--tenue); border-color: var(--borde); }
.est-abierta { background: var(--error-fondo); color: var(--error); }
.est-justificada { background: var(--ok-fondo); color: var(--ok); }
.est-descartada { background: var(--superficie-2); color: var(--tenue); border-color: var(--borde); }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.detalle-inc { max-width: 42rem; overflow-wrap: anywhere; }
.aviso.evaluador { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.encabezado-pagina > div { flex: 1 1 22rem; min-width: 0; }
.meter.obs > i { background: var(--g-critico); }

/* Órdenes de combustible */
.est-solicitada { background: var(--aviso-fondo); color: var(--aviso); }
.est-aprobada { background: var(--info-fondo); color: var(--info); }
.est-despachada { background: var(--ok); color: #fff; }
.est-rechazada { background: var(--error-fondo); color: var(--error); }

/* Niveles y consumo de combustible */
.est-critico { background: var(--error-fondo); color: var(--error); }
.est-bajo { background: var(--aviso-fondo); color: var(--aviso); }
.est-normal { background: var(--ok-fondo); color: var(--ok); }
.est-sin_base, .est-sin_rendimiento, .est-sin_gps, .est-sin_capacidad { background: var(--superficie-2); color: var(--tenue); border-color: var(--borde); }
.nivel-celda { min-width: 8.5rem; }
.nivel-celda .meter { margin: .25rem 0 0; }
.calculo { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.calculo li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .5rem; align-items: baseline; padding: .3rem 0; border-bottom: 1px dashed var(--borde); }
.calculo li:last-child { border-bottom: 0; font-weight: 700; }
.calculo .op { font: 700 1rem var(--mono); color: var(--tenue); text-align: center; }
.calculo .val { font: 600 .95rem var(--mono); text-align: right; white-space: nowrap; }
.nivel-grande { font: 700 2.6rem/1.05 var(--disp); }
.calculo + form { margin-top: .9rem; }

/* Mantenimiento y repuestos */
.est-programada { background: var(--info-fondo); color: var(--info); }
.est-en_taller { background: var(--aviso-fondo); color: var(--aviso); }
.est-finalizada { background: var(--ok); color: #fff; }
.est-vencido { background: var(--error-fondo); color: var(--error); }
.est-proximo { background: var(--aviso-fondo); color: var(--aviso); }
.est-al_dia { background: var(--ok-fondo); color: var(--ok); }
.est-sin_dato { background: var(--superficie-2); color: var(--tenue); border-color: var(--borde); }
.tabla td.dinero, .tabla th.dinero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tfoot td { font-weight: 700; border-top: 2px solid var(--borde); }
.lista-checks.compacta label { padding: .4rem .6rem; }

/* ---- Identidad de la institución: logo en el encabezado, inicio de sesión, documentos y aplicación instalable ---- */
.marca .logo-img { height: 34px; width: auto; max-width: 150px; object-fit: contain; border-radius: 6px; }
.login-hero .crest.con-logo { width: auto; min-width: 52px; height: 60px; padding: 6px 12px; background: #fff; }
.login-hero .crest.con-logo img { height: 100%; width: auto; max-width: 220px; object-fit: contain; display: block; }
.membrete { display: flex; align-items: center; gap: .8rem; margin: 0 0 .6rem; }
.membrete-logo { height: 52px; width: auto; max-width: 180px; object-fit: contain; }
.membrete strong { font-size: 1.05rem; }
.solo-impresion { display: none; }
@media print { .solo-impresion { display: block; margin-bottom: .8rem; } .pwa-banner { display: none !important; } }

/* Aviso para instalar la aplicación (celular) */
.pwa-banner { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 60; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-left: 5px solid var(--primario); border-radius: var(--radio); padding: .7rem .8rem;
  box-shadow: 0 8px 28px rgba(16, 40, 28, .28); max-width: 34rem; margin: 0 auto; }
.pwa-banner img { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.pwa-banner p { margin: 0; flex: 1 1 12rem; font-size: .92rem; line-height: 1.35; }
.pwa-banner .pwa-acciones { display: flex; gap: .4rem; flex: 1 1 100%; justify-content: flex-end; }

/* Pantalla «Datos de la institución» */
.inst-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1rem; }
.inst-rejilla .campo.completo { grid-column: 1 / -1; }
.inst-color { display: flex; gap: .5rem; align-items: center; }
.inst-color input[type="color"] { width: 3rem; height: 2.5rem; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio-peq); background: none; }
.inst-color input[type="text"] { max-width: 9rem; }
.logo-vistas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: .5rem 0 1rem; }
.logo-vista { display: flex; flex-direction: column; gap: .3rem; align-items: center; font-size: .78rem; color: var(--tenue); }
.logo-vista .caja { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--borde); border-radius: var(--radio-peq); padding: .4rem; background: repeating-conic-gradient(#f1f1f1 0% 25%, #fff 0% 50%) 50% / 12px 12px; }
.logo-vista .caja.oscura { background: var(--primario); }
.logo-vista img { display: block; object-fit: contain; }
.logo-vista .i-header { height: 36px; width: auto; max-width: 150px; }
.logo-vista .i-192 { width: 72px; height: 72px; border-radius: 16px; }
.logo-vista .i-32 { width: 32px; height: 32px; }
.estado-correo { margin: .3rem 0 1rem; }
.estado-correo.ok { color: var(--ok); } .estado-correo.mal { color: var(--error); }
.login-hero .crest.con-logo { align-self: flex-start; width: fit-content; }
.inst-rejilla input[type="color"] { width: 4rem; min-width: 4rem; height: 2.5rem; padding: 2px; cursor: pointer; }
.login-card.un-solo { grid-template-columns: 1fr; max-width: 28rem; }
.cola-resumen { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .3rem 0 .8rem; }
.cola-resumen div { display: flex; flex-direction: column; font-size: .8rem; color: var(--tenue); }
.cola-resumen b { font-size: 1.4rem; color: var(--texto); }
.cola-resumen .mal b { color: var(--error); }
.login-card.un-solo { margin: 0 auto; }
.login-form .pista a { display: inline-block; margin-top: .7rem; }
.campo[hidden] { display: none; }
/* Organización: organigrama y coordinaciones */
.org-direccion { border-left: 6px solid var(--primario); }
.org-nivel { margin: .8rem 0 0 1.4rem; padding-left: 1rem; border-left: 2px solid var(--borde); }
.org-coord h3 { margin: 0; }
.org-area { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; padding: .35rem 0; border-top: 1px dashed var(--borde); }
.org-area:first-of-type { border-top: 0; }
.org-personas { margin: .1rem 0 .3rem 1rem; font-size: .88rem; color: var(--tenue); }
.matriz-roles th.rol, .matriz-roles td.si, .matriz-roles td.no { text-align: center; }
.matriz-roles td.si { color: var(--ok); font-weight: 700; }
.matriz-roles td.no { color: var(--debil); }
.matriz-roles tr.grupo td { background: var(--superficie-2); font-weight: 700; }
.paleta-rejilla[hidden] { display: none; }
/* Permisos editables */
.celda-permiso { display: inline-flex; gap: .2rem; align-items: center; justify-content: center; cursor: pointer; min-width: 1.6rem; min-height: 1.6rem; }
.celda-permiso input { width: 1.05rem; height: 1.05rem; min-height: 0; padding: 0; margin: 0; }
.matriz-roles td.personalizado { background: var(--aviso-fondo); }
.marca-pers { color: var(--aviso); font-weight: 700; margin-left: .1rem; }

/* ---- Plan semanal (lunes a domingo): calendario con las rutas de cada día ---- */
.est-plan-vacio, .est-plan-borrador, .est-plan-cancelado, .est-sc-pendiente { background: var(--superficie-2); color: var(--tenue); border-color: var(--borde); }
.est-plan-devuelta, .est-sc-pendiente.fuerte { background: var(--aviso-fondo); color: var(--aviso); }
.est-plan-en_revision { background: var(--info-fondo); color: var(--info); }
.est-plan-revisada, .est-sc-aprobado { background: var(--ok-fondo); color: var(--ok); }
.est-plan-en_orden { background: var(--ok); color: var(--sobre-primario); }
.est-sc-rechazado { background: var(--error-fondo); color: var(--error); }
.est-sc-pendiente { background: var(--aviso-fondo); color: var(--aviso); }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(8.75rem, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; margin: 0 0 1rem; }
.cal-dia { background: var(--superficie); padding: .5rem; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.cal-dia.finde { background: var(--superficie-2); }
.cal-dia.hoy .cal-cab { color: var(--primario); }
.cal-cab { font: 700 .82rem var(--disp); text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
.cal-cab small { font: 500 .75rem var(--sans); text-transform: none; letter-spacing: 0; }
.cal-ruta { display: block; padding: .4rem .5rem; border-radius: 6px; background: var(--superficie-2); color: var(--texto); text-decoration: none; font-size: .82rem; border-left: 4px solid var(--advertencia); overflow-wrap: anywhere; }
.cal-dia.finde .cal-ruta { background: var(--superficie); }
.cal-ruta:hover { outline: 2px solid var(--primario-2); }
.cal-ruta .hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-ruta .ret { color: var(--tenue); font-size: .75rem; }
.cal-ruta .nombre { font-weight: 600; display: block; margin: .1rem 0; }
.cal-ruta .tramo { color: var(--tenue); font-size: .76rem; display: block; }
.cal-ruta .marcas { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.cal-vacio { color: var(--debil); font-size: .8rem; }
.cal-agregar { margin-top: auto; font-size: .78rem; }
.marca-sc { display: inline-block; padding: .05rem .4rem; border-radius: 999px; font-size: .7rem; font-weight: 700; background: var(--aviso-fondo); color: var(--aviso); }
.marca-sc.ok { background: var(--ok-fondo); color: var(--ok); }
.marca-sc.mal { background: var(--error-fondo); color: var(--error); }
.aviso-sc { border-left: 4px solid var(--advertencia); }
.ocupa { font-size: .85rem; color: var(--tenue); }
.filtros .ancho-completo { flex: 1 1 100%; margin: 0; }
.etiqueta-fija { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; } .valor-fijo { padding: .5rem 0; }

/* ---- Recorrido por carretera (motor de rutas) ---- */
.mini-mapa { height: min(40vh, 15rem); min-height: 11rem; border: 1px solid var(--borde); border-radius: var(--radio); margin: .5rem 0; background: var(--superficie-2); overflow: hidden; }
.mini-mapa.grande { height: min(48vh, 20rem); min-height: 13rem; }
.calculo h3 { margin: 0 0 .4rem; font-size: 1rem; }
.calculo p { margin: .2rem 0; }
.alerta-calculo { padding: .4rem .6rem; border-left: 4px solid var(--advertencia); background: var(--aviso-fondo); color: var(--aviso); border-radius: 6px; }
.km-ruta { font-size: .75rem; color: var(--tenue); display: block; }
@media print { .mini-mapa { height: 12rem; break-inside: avoid; } }

/* ---- Consolidado semanal ---- */
.est-cons-armado, .est-cons-cancelado { background: var(--superficie-2); color: var(--tenue); border-color: var(--borde); }
.est-cons-en_autorizacion { background: var(--info-fondo); color: var(--info); }
.est-cons-autorizado { background: var(--ok); color: var(--sobre-primario); }
.fila-muestra { background: var(--aviso-fondo); }
.marca-muestra { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--aviso-fondo); color: var(--aviso); border: 1px solid var(--advertencia); }
.marca-muestra.hecha { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok); }
.progreso-firmas { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .5rem 0; }
.progreso-firmas span { font-variant-numeric: tabular-nums; }

.fila-dinamica .persona-cuenta { grid-column: 1 / -1; font-size: .85rem; color: var(--tenue); display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.fila-dinamica .persona-cuenta select { flex: 1 1 16rem; }

/* ---- Mis viajes ---- */
.viajes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.viaje { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.viaje header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.viaje h3 { margin: .1rem 0; font-size: 1.05rem; }
.viaje .tramo { margin: 0; color: var(--tenue); font-size: .9rem; }
.viaje .datos { margin: .25rem 0; }
.img-ruta { width: 100%; height: auto; border: 1px solid var(--borde); border-radius: var(--radio-peq); background: var(--superficie-2); }
.est-viaje-autorizada { background: var(--info-fondo); color: var(--info); }
.est-viaje-firmada { background: var(--ok-fondo); color: var(--ok); }
.est-viaje-en_curso { background: var(--ok); color: var(--sobre-primario); }
.est-viaje-cumplida { background: var(--superficie-3); color: var(--texto); border-color: var(--borde); }

/* ---- Viaje en vivo y recorrido realizado ---- */
.mini-mapa.enorme { height: min(70vh, 34rem); min-height: 18rem; }
.leyenda-azul { color: #1b6a99; font-weight: 700; } .leyenda-rojo { color: #d03b3b; font-weight: 700; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; } .acciones-fila form { margin: 0; }
.est-enviada { background: var(--info-fondo); color: var(--info); }
.est-aprobada { background: var(--ok-fondo); color: var(--ok); }

/* Rutas de los usuarios: estados nuevos, chips que se ajustan en columnas angostas y tabla de «Mis rutas» legible en el celular */
.est-enviada { background: var(--info-fondo); color: var(--info); }
.est-aprobada { background: var(--ok-fondo); color: var(--ok); }
.cal-ruta .est, .cal-ruta .marca-sc { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.acciones-fila { min-width: 11rem; }
@media (max-width: 720px) {
  .tabla-scroll > table.tabla { min-width: 44rem; }
}

/* Vehículo: responsable buscable entre los usuarios registrados */
.rejilla .campo-ancho { grid-column: 1 / -1; }
select[data-buscable] { width: 100%; min-height: 7.5rem; }
select[data-buscable] optgroup[hidden], select[data-buscable] option[hidden] { display: none; }

/* ---- Adaptación a cada dispositivo ----
   CELULAR  (< 600 px)        menú lateral oculto con botón ☰ (cajón), una columna, tablas apilables, botones grandes.
   TABLET   (600 – 1023 px)   menú lateral en «riel» de íconos (4,25 rem) que se despliega con ☰; más columnas; mapa y formularios a dos columnas.
   PC       (≥ 1024 px)       menú lateral completo, contenido centrado (más ancho desde 1600 px).
   Cualquier pantalla táctil (pointer: coarse) recibe botones y campos de al menos 44 px y letra de 16 px en los campos (evita el zoom automático de iOS).
   dispositivo.js solo informa la clasificación en <html data-dispositivo>; el diseño no depende de él. */
@media (max-width: 599px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .topbar { grid-column: 1; }
  .menu-btn { display: flex; }
  .main { grid-column: 1; }
  .sidebar { position: fixed; top: 3.5rem; bottom: 0; left: 0; width: min(16rem, 86vw); height: auto; transform: translateX(-100%); transition: transform .2s; z-index: 40; box-shadow: var(--sombra); }
  .menu-check:checked + .app .sidebar { transform: none; }
  .menu-check:checked + .app .velo { display: block; position: fixed; inset: 3.5rem 0 0 0; background: rgba(0, 0, 0, .35); z-index: 35; }
}
@media (max-width: 860px) {
  .usuario-chip .textos { display: none; }
  .usuario-chip { padding-right: 4px; }
  .login-card { grid-template-columns: 1fr; max-width: 28rem; }
  .login-hero { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .app { grid-template-columns: 4.25rem minmax(0, 1fr); }
  .menu-btn { display: flex; }
  .sidebar { padding: .5rem .35rem; align-items: stretch; overflow-x: hidden; }
  .sidebar .nav-item { position: relative; justify-content: center; padding: .7rem 0; }
  .sidebar .nav-item .ni { font-size: 20px; width: auto; }
  .sidebar .nav-item .txt, .sidebar .nav-sec, .sidebar .sidebar-pie { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
  .sidebar .nav-item .badge { position: absolute; top: 2px; right: 6px; margin: 0; }
  .menu-check:checked + .app .sidebar { position: fixed; top: 3.5rem; bottom: 0; left: 0; width: 15rem; height: auto; z-index: 40; box-shadow: var(--sombra); padding: .75rem .6rem; }
  .menu-check:checked + .app .sidebar .nav-item { justify-content: flex-start; padding: .55rem .7rem; }
  .menu-check:checked + .app .sidebar .nav-item .ni { font-size: 16px; width: 20px; }
  .menu-check:checked + .app .sidebar .nav-item .txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .menu-check:checked + .app .sidebar .nav-sec { position: static; width: auto; height: auto; overflow: visible; clip: auto; padding: .8rem .7rem .3rem; }
  .menu-check:checked + .app .sidebar .sidebar-pie { position: static; width: auto; height: auto; overflow: visible; clip: auto; padding: .6rem; }
  .menu-check:checked + .app .sidebar .nav-item .badge { position: static; margin-left: auto; }
  .menu-check:checked + .app .velo { display: block; position: fixed; inset: 3.5rem 0 0 0; background: rgba(0, 0, 0, .3); z-index: 35; }
  .usuario-chip .textos { display: block; }
  .mapa-layout { grid-template-columns: 1fr; height: auto; }          /* tablet: mapa arriba y lista abajo */
  .mapa-area { order: -1; }
  .lista-vehiculos { flex: 0 0 auto; max-height: 16rem; }
  #mapa { min-height: 26rem; height: 55vh; height: 55dvh; }
}
.disp-info { display: block; margin-top: .25rem; opacity: .8; }
@media (min-width: 1600px) {
  body { font-size: 15px; }
  .contenedor { max-width: 96rem; }
  .modulos { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
}
/* Pantallas táctiles: blancos de toque de 44 px, letra de 16 px en los campos, más aire entre acciones */
@media (pointer: coarse) {
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px; min-height: 2.75rem; }
  .btn, .btn.peq { min-height: 2.75rem; padding: .5rem 1rem; }
  .icono-btn { width: 44px; height: 44px; }
  .nav-item { padding-top: .7rem; padding-bottom: .7rem; }
  .subnav a { padding: .7rem 1rem; }
  .acciones, .acciones-fila { gap: .6rem; }
  .tabla th, .tabla td { padding: .7rem .75rem; }
  .filtros .campo { min-width: 10rem; }
}
/* Celular: una columna, títulos más compactos, botones de formulario a todo el ancho, y letra más GRANDE que en escritorio
   (no más chica): en el celular se lee más cerca, pero el menú y los textos pequeños de la barra superior costaba distinguirlos. */
@media (max-width: 599px) {
  body { font-size: 16px; }
  h1 { font-size: 1.35rem; }
  .topbar { padding: 0 .75rem; gap: .6rem; }
  .marca small { display: none; }
  .marca b { font-size: 16px; }
  .usuario-chip .un { font-size: 14px; }
  .usuario-chip .ur { font-size: 11.5px; }
  .nav-item { font-size: 15px; }
  .nav-item .ni { font-size: 19px; }
  .nav-sec { font-size: 11.5px; }
  .sidebar-pie { font-size: 12px; }
  .login-pie { font-size: 12.5px; }
  .tabla th { font-size: .9rem; }
  .tabla.apilable td[data-etq]::before { font-size: .8rem; }
  #mapa-pin { height: min(32vh, 18rem); }   /* con la letra más grande, el mapa del diálogo «Fijar ubicación» se achica un poco para que el botón Cancelar quede visible sin desplazar */
  /* Calendarios semanales: en vez de una franja angosta de 7 (u 8) columnas, cada día ocupa casi toda la pantalla y se
     desliza con un «snap» limpio de una tarjeta a la vez (como un carrusel), en lugar de un scroll libre difícil de leer. */
  .cal-semana { grid-template-columns: repeat(7, minmax(82vw, 1fr)); scroll-snap-type: x mandatory; }
  .cal-dia { scroll-snap-align: start; }
  .semana { scroll-snap-type: x mandatory; }
  .semana > div { scroll-snap-align: start; }
  .encabezado-pagina { align-items: flex-start; }
  .filtros .campo { flex: 1 1 100%; }
  .filtros .btn { flex: 1 1 100%; }
  .acciones > .btn, .acciones > button { flex: 1 1 100%; }
  .rejilla, .dos-columnas { grid-template-columns: 1fr; }
  .modulos { grid-template-columns: 1fr; }
  .resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .dato { padding: .45rem .7rem; }
  .dato .cifra { font-size: 1.45rem; }
  .datos { grid-template-columns: 1fr; gap: 0; }
  .datos dt { margin-top: .5rem; font-size: .85rem; }
  .datos dd { margin-bottom: .1rem; }
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .subnav a { white-space: nowrap; }
}
/* Tablet: formularios y rejillas a dos columnas cómodas */
@media (min-width: 600px) and (max-width: 1023px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumen { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
}
/* Pantallas con muesca o barras del sistema (viewport-fit=cover) */
.topbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.contenedor { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }
@media (max-width: 599px) { .topbar { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); } }
/* Tablas apilables (celular): cada fila pasa a ser una tarjeta con «etiqueta: valor» (las celdas llevan data-etq) */
@media (max-width: 599px) {
  .tabla-scroll > table.tabla.apilable { min-width: 0; }
  .tabla.apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla.apilable, .tabla.apilable tbody, .tabla.apilable tr, .tabla.apilable td { display: block; width: 100%; }
  .tabla.apilable tr { padding: .6rem .75rem; border-bottom: 1px solid var(--borde); }
  .tabla.apilable tr:last-child { border-bottom: 0; }
  .tabla.apilable td { border: 0; padding: .2rem 0; text-align: left; }
  .tabla.apilable td[data-etq]::before { content: attr(data-etq); display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); }
  .tabla.apilable td.num { text-align: left; }
  .tabla.apilable td.acciones-fila { min-width: 0; padding-top: .5rem; }
  /* Filas de totales (tfoot, con colspan): una línea «etiqueta … valor» en vez de apilarse como una tarjeta más */
  .tabla.apilable tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .35rem .75rem; border-top: 1px solid var(--borde); border-bottom: 0; }
  .tabla.apilable tfoot td { display: inline; width: auto; padding: 0; }
}

/* Iniciar viaje: lista de personas a bordo (checklist) */
.lista-abordo { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.lista-abordo li { border: 1px solid var(--borde); border-radius: var(--radio-peq); padding: .45rem .7rem; background: var(--superficie); }
.lista-abordo label { display: flex; align-items: center; gap: .5rem; font-weight: 500; cursor: pointer; }
.lista-abordo input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-height: 0; flex: none; }

/* Mapa en vivo: al pasar el mouse por el punto se ve la misma información que al hacer clic */
.tooltip-veh { max-width: 300px; white-space: normal; padding: .55rem .7rem; }
.tooltip-veh::before { display: none; }
.tooltip-veh h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.tooltip-veh h3 a { pointer-events: none; color: inherit; text-decoration: none; }
.tooltip-veh .fila { display: flex; gap: .5rem; font-size: .85rem; line-height: 1.35; }
.tooltip-veh .k { color: #5b6875; flex: 0 0 6.5rem; }
.tooltip-veh .v { font-weight: 600; word-break: break-word; }

/* Usuarios: foto de perfil (formulario de edición y topbar) */
.foto-perfil-editar { display: flex; align-items: center; gap: 1rem; }
.foto-perfil-editar img { border-radius: 50%; object-fit: cover; border: 1px solid var(--borde); flex: none; }
.avatar-grande { width: 72px; height: 72px; font-size: 26px; flex: none; }
.usuario-chip img.avatar { object-fit: cover; }

/* Usuarios: columna del avatar en la lista */
.celda-avatar { width: 1%; white-space: nowrap; }