/* ARGOS — "Control de misión".
   Inspirado en las pantallas de telemetría de los vuelos espaciales: líneas finas, mayúsculas espaciadas, números grandes,
   indicadores circulares y una línea de misión. Claro = manual técnico (blanco, tinta, rojo). Oscuro = sala de control (negro, blanco, rojo).
   Los colores vivos quedan para lo que importa: cada vehículo tiene el suyo, y los estados (nominal / atención / alerta). */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/static/vendor/fuentes/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/static/vendor/fuentes/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/static/vendor/fuentes/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("/static/vendor/fuentes/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("/static/vendor/fuentes/barlow-cond-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/static/vendor/fuentes/barlow-cond-600.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("/static/vendor/fuentes/dmmono-latin-400.woff2") format("woff2"); }

:root {
  --pavo: #f0412a;           /* rojo de misión: acción principal */
  --pavo-osc: #c42b16;       /* rojo legible para texto y enlaces */
  --sol: #ffb020;            /* ámbar: resaltes y foco */
  --azul: #2f7bff;
  --sobre-pavo: #ffffff;
  --fondo: #f6f6f4;
  --superficie: #ffffff;
  --superficie-2: #f1f1ee;
  --borde: #dedcd6;
  --linea-fuerte: #12151a;
  --texto: #0e1116;
  --texto-2: #4b5059;
  --texto-3: #8a8f98;
  --menta: #fdeae6; --agua: #e5eeff; --durazno: #fff2da; --lila: #efe9ff;
  --ok: #138a52; --ok-fondo: #dcf3e7;
  --pronto: #a35a00; --pronto-fondo: #fff0d0;
  --mal: #d0112b; --mal-fondo: #ffe0e4;
  --sombra: 0 1px 0 rgba(14, 17, 22, .04);
  --radio: 6px;
  --fuente: "Barlow", "Helvetica Neue", Arial, system-ui, sans-serif;
  --titulo: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --rotulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --dato: "DM Mono", ui-monospace, Consolas, monospace;
  --reticula: radial-gradient(circle, rgba(14, 17, 22, .09) 1px, transparent 1.2px);
  --filtro-mapa: saturate(.8) contrast(1.02);
  --velo: rgba(14, 17, 22, .45);
  --pista: rgba(14, 17, 22, .08);
  --plus: #b77900; --plus-vivo: #ffb020; --plus-fondo: #fff5dc; --plus-borde: #f0d48f;   /* Mantención+: el módulo plus, en oro */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pavo: #ff4b2f; --pavo-osc: #ff7a62; --sol: #ffbf3c; --azul: #5c9dff; --sobre-pavo: #ffffff;
    --fondo: #050607; --superficie: #0c0e11; --superficie-2: #12151a; --borde: #1f242c; --linea-fuerte: #e9ecef;
    --texto: #eef1f4; --texto-2: #a3abb5; --texto-3: #69717c;
    --menta: #2a1310; --agua: #0f1d36; --durazno: #2b1f08; --lila: #1d1636;
    --ok: #3ddc91; --ok-fondo: #0b2a1c; --pronto: #ffc24d; --pronto-fondo: #2e2208; --mal: #ff5a6e; --mal-fondo: #3a0d15;
    --sombra: none; --reticula: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.2px);
    --filtro-mapa: invert(1) hue-rotate(180deg) brightness(.85) contrast(.95) saturate(.4);
    --velo: rgba(0, 0, 0, .7); --pista: rgba(255, 255, 255, .09);
    --plus: #ffc94d; --plus-vivo: #ffb020; --plus-fondo: #1f1704; --plus-borde: #5a4310;
    color-scheme: dark;
  }
}
/* Gris: tonos medios, ni blanco ni negro; descansa la vista y mantiene los colores vivos */
:root[data-theme="gris"] {
  --fondo: #cfd3d9; --superficie: #e4e7eb; --superficie-2: #d7dbe0; --borde: #b6bcc5; --linea-fuerte: #1d2229;
  --texto: #11151a; --texto-2: #353b44; --texto-3: #59606a;
  --menta: #f4d9d3; --agua: #d3def0; --durazno: #f1e3c8; --lila: #ddd7ef;
  --ok-fondo: #c9e7d6; --pronto-fondo: #f1dfb8; --mal-fondo: #f0cdd2;
  --pista: rgba(17, 21, 26, .12); --velo: rgba(17, 21, 26, .5);
  --reticula: radial-gradient(circle, rgba(17, 21, 26, .12) 1px, transparent 1.2px);
  --filtro-mapa: saturate(.7) brightness(.95);
  --plus-fondo: #efe2bd; --plus-borde: #d4b46a;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --pavo: #ff4b2f; --pavo-osc: #ff7a62; --sol: #ffbf3c; --azul: #5c9dff; --sobre-pavo: #ffffff;
  --fondo: #050607; --superficie: #0c0e11; --superficie-2: #12151a; --borde: #1f242c; --linea-fuerte: #e9ecef;
  --texto: #eef1f4; --texto-2: #a3abb5; --texto-3: #69717c;
  --menta: #2a1310; --agua: #0f1d36; --durazno: #2b1f08; --lila: #1d1636;
  --ok: #3ddc91; --ok-fondo: #0b2a1c; --pronto: #ffc24d; --pronto-fondo: #2e2208; --mal: #ff5a6e; --mal-fondo: #3a0d15;
  --sombra: none; --reticula: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.2px);
  --filtro-mapa: invert(1) hue-rotate(180deg) brightness(.85) contrast(.95) saturate(.4);
  --velo: rgba(0, 0, 0, .7); --pista: rgba(255, 255, 255, .09);
    --plus: #ffc94d; --plus-vivo: #ffb020; --plus-fondo: #1f1704; --plus-borde: #5a4310;
  color-scheme: dark;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 15.5px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; }
a { color: var(--pavo-osc); }
::selection { background: var(--pavo); color: #fff; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.1; font-family: var(--titulo); text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -.01em; }
h2 { font: 600 .95rem/1.2 var(--rotulo); text-transform: uppercase; letter-spacing: .14em; color: var(--texto-2); }
h3 { font-size: 1.02rem; font-weight: 600; }
.oculto { display: none !important; }
.muted { color: var(--texto-2); } .tenue { color: var(--texto-3); font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }
code { font-family: var(--dato); background: var(--superficie-2); padding: 2px 6px; border-radius: 4px; font-size: .85em; }
:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
.rotulo { font: 600 .74rem/1 var(--rotulo); text-transform: uppercase; letter-spacing: .16em; color: var(--texto-3); }

/* ---------- estructura ---------- */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--superficie); border-right: 1px solid var(--borde); padding: 22px 12px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; }
.lateral .logo { display: flex; align-items: center; gap: 10px; padding: 2px 10px 26px; color: var(--texto); text-decoration: none; }
.lateral .logo img { width: 34px; height: 34px; }
.lateral .logo b { font: 600 1.3rem var(--rotulo); letter-spacing: .32em; }
.lateral .logo small { display: block; font: 500 .66rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.lateral a.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; color: var(--texto-2);
  text-decoration: none; font: 600 .88rem var(--rotulo); text-transform: uppercase; letter-spacing: .12em; border-left: 2px solid transparent; }
.lateral a.nav:hover { color: var(--texto); background: var(--superficie-2); }
.lateral a.nav.activo { color: var(--texto); border-left-color: var(--pavo); background: var(--superficie-2); }
.lateral a.nav.activo svg { color: var(--pavo); }
.lateral .pie { margin-top: auto; font-size: .78rem; color: var(--texto-3); padding: 8px 10px; display: grid; gap: 8px; }
.lateral svg, .abajo svg { width: 19px; height: 19px; flex: none; }
main { padding: 0 clamp(16px, 3vw, 40px) 90px; max-width: 1320px; width: 100%; min-width: 0; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.abajo { display: none; }

/* barra de control (arriba de cada pantalla) */
.control { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 22px;
  border-bottom: 1px solid var(--borde); font: 500 .78rem var(--rotulo); text-transform: uppercase; letter-spacing: .14em; color: var(--texto-3); }
.control b { font: 500 .95rem var(--dato); letter-spacing: .02em; color: var(--texto); text-transform: none; }
.control .estado { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--texto); }
.control .estado.alerta { color: var(--mal); }
.luz { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); display: inline-block; }
.alerta .luz { background: var(--mal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mal) 25%, transparent); animation: latido 1.6s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mal) 0%, transparent); } }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  main { padding: 0 16px 100px; }
  .control { gap: 6px 14px; }
  .control .reloj-utc { display: none; }
  .abajo { display: flex; position: fixed; inset: auto 0 0 0; background: var(--superficie); border-top: 1px solid var(--borde);
    justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 1000; }
  .abajo a { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 .66rem var(--rotulo); letter-spacing: .1em;
    text-transform: uppercase; color: var(--texto-3); text-decoration: none; padding: 6px 10px; border-top: 2px solid transparent; }
  .abajo a.activo { color: var(--texto); border-top-color: var(--pavo); }
}

/* ---------- componentes ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); }
.tarjeta > h2:first-child, .tarjeta .entre > h2 { margin-bottom: 12px; }
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.dos-col { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
@media (max-width: 860px) { .dos-col { grid-template-columns: minmax(0, 1fr); } }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pila > * + * { margin-top: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--pavo); border-radius: 4px;
  padding: 9px 18px; font: 600 .86rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  background: var(--pavo); color: var(--sobre-pavo); text-decoration: none; transition: filter .12s, background .12s; }
.btn:hover { filter: brightness(1.08); }
.btn.sec { background: transparent; color: var(--texto); border-color: var(--linea-fuerte); }
.btn.sec:hover { background: var(--superficie-2); filter: none; }
.btn.peligro { background: var(--mal); border-color: var(--mal); color: #fff; }
.btn.chico { padding: 6px 12px; font-size: .78rem; }
.btn:disabled { opacity: .45; cursor: default; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 4px; background: var(--superficie);
  color: var(--texto); font: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pavo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pavo) 18%, transparent); }
label { display: block; font: 600 .76rem var(--rotulo); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-2); margin-bottom: 5px; }
.campo { margin-bottom: 14px; }
.campos { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.chk { display: flex; gap: 8px; align-items: flex-start; font: 500 .9rem var(--fuente); text-transform: none; letter-spacing: 0; color: var(--texto); }
.chk input { width: auto; margin-top: 3px; accent-color: var(--pavo); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 3px; font: 600 .7rem var(--rotulo);
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--ok-fondo); color: var(--ok); }
.chip.pronto { background: var(--pronto-fondo); color: var(--pronto); }
.chip.vencido, .chip.mal { background: var(--mal-fondo); color: var(--mal); }
.chip.neutro { background: var(--superficie-2); color: var(--texto-2); }
.chip.neutro::before { display: none; }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--texto-3); }
.punto.vivo { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }

.barra { height: 4px; background: var(--pista); border-radius: 2px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--ok); }
.barra.pronto > i { background: var(--sol); } .barra.vencido > i { background: var(--mal); }

/* lecturas de telemetría */
.kpi { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); overflow: hidden; }
.kpi > div { padding: 16px 18px; border-right: 1px solid var(--borde); position: relative; min-width: 0; }
.kpi > div:last-child { border-right: 0; }
.kpi b { display: block; font: 500 2rem/1.1 var(--fuente); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 6px; }
.kpi span { font: 600 .72rem var(--rotulo); color: var(--texto-3); text-transform: uppercase; letter-spacing: .14em; }
.kpi > div svg { width: 18px; height: 18px; position: absolute; right: 14px; top: 14px; color: var(--k, var(--texto-3)); }
.kpi > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--k, transparent); }
.k-turquesa { --k: var(--pavo); } .k-azul { --k: var(--azul); } .k-coral { --k: var(--mal); } .k-ambar { --k: var(--sol); } .k-violeta { --k: #8b5cf6; }
.k-coral b { color: var(--mal); }
@media (max-width: 560px) { .kpi > div:nth-child(2n) { border-right: 0; } .kpi > div { border-bottom: 1px solid var(--borde); } }

/* indicadores circulares (como los de las transmisiones de lanzamiento) */
.medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.medidor { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; }
.medidor svg { width: 150px; max-width: 100%; height: auto; }
.medidor .valor { font: 500 30px var(--fuente); fill: var(--texto); }
.medidor .unidad { font: 600 10px var(--rotulo); letter-spacing: 2px; fill: var(--texto-3); text-transform: uppercase; }

/* línea de misión */
.mision { position: relative; padding: 78px 8px 70px; overflow-x: auto; }
.mision .pista { position: relative; height: 2px; background: var(--borde); margin: 0 10px; }
.mision .hecho { position: absolute; left: 0; top: 0; bottom: 0; background: var(--linea-fuerte); }
.hito { position: absolute; top: -6px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; width: 116px; }
.hito i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linea-fuerte); background: var(--superficie); }
.hito.pasado i { background: var(--linea-fuerte); }
.hito.pronto i { border-color: var(--sol); background: var(--sol); }
.hito.vencido i { border-color: var(--mal); background: var(--mal); }
.hito.hoy { top: -14px; }
.hito.hoy i { width: 3px; height: 30px; border-radius: 2px; border: 0; background: var(--pavo); }
.hito.hoy b { color: var(--pavo-osc); }
.hito b { font: 600 .68rem/1.15 var(--rotulo); text-transform: uppercase; letter-spacing: .1em; text-align: center; color: var(--texto); }
.hito small { font: 400 .72rem var(--dato); color: var(--texto-3); }
.hito.arriba { top: auto; bottom: -6px; }
.hito.arriba i { order: 3; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font: 600 .7rem var(--rotulo); text-transform: uppercase; letter-spacing: .14em; color: var(--texto-3); padding: 8px 10px;
  border-bottom: 1px solid var(--linea-fuerte); }
td { padding: 11px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.tabla { overflow-x: auto; }

.pestanas { display: flex; gap: 0; overflow-x: auto; margin-bottom: 22px; scrollbar-width: none; border-bottom: 1px solid var(--borde); }
.pestanas a { padding: 12px 16px; font: 600 .8rem var(--rotulo); text-transform: uppercase; letter-spacing: .14em; color: var(--texto-3);
  text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--texto); }
.pestanas a.activo { color: var(--texto); border-bottom-color: var(--pc, var(--pavo)); }

.aviso { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--borde); font-size: .92rem; }

/* tarjeta de vehículo */
.vehiculo { cursor: pointer; text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s; }
.vehiculo:hover { border-color: var(--vc, var(--linea-fuerte)); transform: translateY(-2px); }
.tarjeta.vehiculo { padding: 0; overflow: hidden; }
.portada-v { position: relative; height: 132px; display: flex; align-items: flex-end; justify-content: center; padding: 10px 14px 4px;
  background: var(--reticula) 0 0 / 14px 14px, linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--vc) 12%, transparent)); border-bottom: 1px solid var(--borde); }
.portada-v .ilus { width: 70%; max-width: 230px; transition: transform .3s; }
.vehiculo:hover .portada-v .ilus { transform: translateX(8px); }
.portada-v .chip { position: absolute; top: 12px; right: 12px; }
.patente { display: inline-block; font: 500 .76rem var(--dato); letter-spacing: .08em; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linea-fuerte); border-radius: 3px; padding: 1px 7px; }
.portada-v .patente { position: absolute; top: 12px; left: 12px; }
.cuerpo-v { padding: 14px 18px 16px; border-top: 3px solid var(--vc); }
.nombre-v { font: 600 1.15rem var(--fuente); }
.datos-v { margin: 10px 0 4px; font: 400 .86rem var(--dato); color: var(--texto-2); }
.datos-v svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--vc); }

/* cabecera del vehículo */
.banda-v { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 320px); gap: 16px; align-items: end; margin-bottom: 4px;
  padding: 18px 22px 0; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--reticula) 0 0 / 16px 16px, linear-gradient(120deg, var(--superficie) 40%, color-mix(in srgb, var(--vc) 14%, var(--superficie))); }
.banda-v > div:first-child { padding-bottom: 18px; display: grid; gap: 6px; justify-items: start; }
.banda-v h1 { margin: 0; }
.volver-v { font: 600 .74rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--texto-3); }
.banda-v .ilus { align-self: end; margin-bottom: -2px; }
@media (max-width: 560px) { .banda-v { grid-template-columns: minmax(0, 1fr); } .banda-v .ilus { max-width: 240px; justify-self: center; } }

/* mantención por categoría */
.plan { border-top: 3px solid var(--cc); }
.plan .cat { width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--cc) 14%, var(--superficie)); color: var(--cc); }
.plan .cat svg { width: 18px; height: 18px; }
.plan .barra.ok > i { background: var(--cc); }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--reticula) 0 0 / 18px 18px, var(--fondo); }
.acceso .caja { width: 100%; max-width: 420px; }
.acceso .marca { text-align: center; margin-bottom: 22px; }
.acceso .marca img { width: 64px; height: 64px; }
.acceso .marca h1 { margin: 12px 0 4px; font: 600 2rem var(--rotulo); letter-spacing: .4em; margin-right: -.4em; }
.acceso .marca .muted { font: 500 .78rem var(--rotulo); text-transform: uppercase; letter-spacing: .16em; }
.acceso .tarjeta { padding: 26px; }
.mensaje { padding: 10px 12px; border-radius: 4px; font-size: .9rem; margin-bottom: 14px; border-left: 3px solid currentColor; }
.mensaje.error { background: var(--mal-fondo); color: var(--mal); }
.mensaje.ok { background: var(--ok-fondo); color: var(--ok); }

/* ---------- mapa ---------- */
.mapa .leaflet-tile-pane { filter: var(--filtro-mapa); }
.mapa.es-imagen .leaflet-tile-pane { filter: none; }
.mapa { height: 62vh; min-height: 360px; border-radius: var(--radio); border: 1px solid var(--borde); overflow: hidden; z-index: 0; }
.mapa.chico { height: 320px; }
.marcador { width: 46px !important; height: 46px !important; background: var(--vc, var(--pavo)) !important; border: 2px solid #fff; border-radius: 50%;
  display: grid; place-items: center; padding: 6px 4px 4px; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.marcador svg { width: 100%; height: auto; }
.marcador.apagado { filter: saturate(.3); }
.marcador.mueve { box-shadow: 0 0 0 6px color-mix(in srgb, var(--vc) 30%, transparent), 0 3px 10px rgba(0, 0, 0, .3); }
.etiqueta-mapa { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); white-space: nowrap; background: #0e1116; color: #fff;
  font: 600 .7rem var(--rotulo); letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; }
.capa-gris { filter: grayscale(1) contrast(.95) brightness(1.05); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--superficie); color: var(--texto); border-bottom-color: var(--borde); }
.leaflet-bar { border: 1px solid var(--borde) !important; border-radius: 4px !important; overflow: hidden; }
.leaflet-control-attribution { background: var(--superficie) !important; color: var(--texto-3); }
.leaflet-control-attribution a { color: var(--texto-2); }
.leaflet-tooltip { background: var(--superficie); color: var(--texto); border-color: var(--borde); border-radius: 4px; }
.leaflet-control-layers { border-radius: 4px !important; border: 1px solid var(--borde) !important; background: var(--superficie) !important; color: var(--texto); }
.leaflet-control-layers-expanded { padding: 8px 12px !important; }
.leaflet-control-layers label { display: block; margin: 0; padding: 4px 2px; color: var(--texto); font: 600 .8rem var(--rotulo); letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; }
.leaflet-control-layers label > span, .leaflet-control-layers label > div { display: flex; align-items: center; gap: 8px; }
.leaflet-control-layers input { width: auto; margin: 0; accent-color: var(--pavo); }
.leaflet-control-layers-toggle { width: 40px !important; height: 40px !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--superficie); color: var(--texto); border-radius: 4px; }

.mapa-app { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; }
.mapa-app .mapa { height: 70vh; }
.mapa-lista { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; display: grid; gap: 10px;
  align-content: start; max-height: 70vh; overflow: auto; }
.filtros { display: flex; flex-wrap: wrap; gap: 4px; }
.filtros button { border: 1px solid var(--borde); background: transparent; color: var(--texto-2); border-radius: 3px; padding: 4px 8px;
  font: 600 .7rem var(--rotulo); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--linea-fuerte); border-color: var(--linea-fuerte); color: var(--fondo); }
.item-mapa { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; text-align: left; border: 0;
  border-left: 3px solid transparent; background: transparent; color: var(--texto); padding: 8px; border-radius: 0 4px 4px 0; cursor: pointer; font: inherit; }
.item-mapa:hover { background: var(--superficie-2); }
.item-mapa.activo { background: var(--superficie-2); border-left-color: var(--vc); }
.item-mapa .mini { padding: 2px; }
.item-mapa b { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-mapa small { font: 600 .68rem var(--rotulo); letter-spacing: .1em; text-transform: uppercase; }
.estado-mueve { color: var(--ok); } .estado-ralenti { color: var(--pronto); } .estado-detenido { color: var(--texto-2); } .estado-sin { color: var(--mal); }
@media (max-width: 860px) { .mapa-app { grid-template-columns: minmax(0, 1fr); } .mapa-lista { max-height: 260px; order: 2; } .mapa-app .mapa { height: 56vh; } }

/* ---------- neumáticos ---------- */
.chasis { display: grid; gap: 22px; justify-items: center; padding: 24px 12px; border: 1px solid var(--borde); border-radius: var(--radio); position: relative;
  background: var(--reticula) 0 0 / 14px 14px, var(--superficie); }
.chasis::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 50%; width: 10px; transform: translateX(-50%); background: var(--pista); border-radius: 2px; }
.eje { display: flex; gap: 10px; align-items: center; position: relative; z-index: 1; }
.eje .hueco { width: 48px; }
.rueda { width: 48px; height: 86px; border-radius: 8px; border: 2px solid var(--borde); background: var(--superficie); cursor: pointer;
  display: grid; place-items: center; font: 600 .72rem var(--dato); color: var(--texto-2); padding: 4px; text-align: center; }
.rueda.ok { border-color: var(--ok); color: var(--ok); }
.rueda.pronto { border-color: var(--sol); color: var(--pronto); background: var(--pronto-fondo); }
.rueda.vencido { border-color: var(--mal); background: var(--mal-fondo); color: var(--mal); }
.rueda.vacia { border-style: dashed; }

/* ---------- diálogo ---------- */
dialog { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
dialog::backdrop { background: var(--velo); backdrop-filter: blur(2px); }
dialog .cuerpo { padding: 24px; max-height: 80vh; overflow: auto; }
dialog .cuerpo h2 { font: 600 1.25rem var(--fuente); text-transform: none; letter-spacing: 0; color: var(--texto); }
dialog .acciones { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--borde); }

.aviso-flotante { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--linea-fuerte); color: var(--fondo); padding: 10px 18px;
  border-radius: 4px; z-index: 3000; font: 600 .82rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; max-width: calc(100vw - 32px); }
@media (max-width: 860px) { .aviso-flotante { bottom: 90px; } }
.vacio { text-align: center; padding: 44px 16px; color: var(--texto-2); }
.vacio img { width: 56px; }
.vacio h2 { font: 600 1.3rem var(--fuente); text-transform: none; letter-spacing: 0; color: var(--texto); }
.qr { background: #fff; padding: 10px; border-radius: 4px; display: inline-block; }
.qr img { display: block; width: 180px; height: 180px; image-rendering: pixelated; }

/* ---------- selector de apariencia ---------- */
.tema { display: inline-flex; border: 1px solid var(--borde); border-radius: 4px; overflow: hidden; }
.tema button { border: 0; background: transparent; color: var(--texto-3); padding: 5px 10px; font: 600 .7rem var(--rotulo); letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer; }
.tema button[aria-pressed="true"] { background: var(--linea-fuerte); color: var(--fondo); }


/* ---------- movimiento: corto, con salida suave, solo transform/opacity ---------- */
:root { --sale: cubic-bezier(.23, 1, .32, 1); --entra-sale: cubic-bezier(.77, 0, .175, 1); }
#contenido > * { animation: aparecer .28s var(--sale) both; }
#contenido > *:nth-child(2) { animation-delay: .03s; } #contenido > *:nth-child(3) { animation-delay: .06s; } #contenido > *:nth-child(n+4) { animation-delay: .09s; }
.rejilla > * , .pila > * { animation: aparecer .32s var(--sale) both; }
.rejilla > :nth-child(2), .pila > :nth-child(2) { animation-delay: .04s; } .rejilla > :nth-child(3), .pila > :nth-child(3) { animation-delay: .08s; }
.rejilla > :nth-child(n+4), .pila > :nth-child(n+4) { animation-delay: .12s; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }
dialog[open] { animation: dialogo-entra .22s var(--sale); }
dialog[open]::backdrop { animation: velo-entra .22s var(--sale); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes velo-entra { from { opacity: 0; } }
.aviso-flotante { animation: aviso-entra .24s var(--sale); }
.aviso-flotante.sale { opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s ease-in, transform .15s ease-in; }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 10px); } }
.btn { transition: filter .12s, background .12s, transform .16s var(--sale); }
.btn:active:not(:disabled) { transform: scale(.97); }
.medidor .arco { animation: llenar .9s var(--sale) .1s both; }
@keyframes llenar { from { stroke-dasharray: 0 calc(var(--c) * 1px); } }
.mision .hecho { transform-origin: left; animation: crecer .7s var(--entra-sale) .1s both; }
@keyframes crecer { from { transform: scaleX(0); } }
.mision .pista { margin-inline: 58px; }
.mision { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.rejilla.ajustada { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
/* el realce al pasar el mouse solo en equipos con mouse (en el teléfono queda pegado) */
@media (hover: none) { .vehiculo:hover { transform: none; } .vehiculo:hover .portada-v .ilus { transform: none; } }

/* ---------- sin GPS: un llamado claro en vez de medidores vacíos ---------- */
.sin-gps { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; }
.sin-gps-texto { display: grid; gap: 8px; justify-items: start; max-width: 52ch; }
.sin-gps-texto b { font: 600 1.15rem var(--fuente); }
@media (max-width: 560px) { .sin-gps { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .sin-gps-texto { justify-items: center; } }

/* ---------- ingreso: la marca a la izquierda, el formulario a la derecha ---------- */
.acceso { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); place-items: stretch; padding: 0; }
.acceso .caja { align-self: center; justify-self: center; padding: 32px 16px; }
.acceso-escena { background: #0e1116; color: #f6f6f4; display: grid; align-content: center; gap: 28px; padding: clamp(28px, 5vw, 64px); overflow: hidden; }
.acceso-escena img { width: 100%; max-width: 620px; justify-self: center; animation: aparecer .6s var(--sale) .1s both; }
.acceso-lema { display: grid; gap: 10px; max-width: 34ch; }
.acceso-lema .rotulo { color: #ff6a52; }
.acceso-lema p { font: 600 clamp(1.6rem, 2.6vw, 2.3rem)/1.1 var(--fuente); letter-spacing: -.01em; text-wrap: balance; }
.acceso-pasos { font: 400 .8rem var(--dato); color: #9aa1ab; }
@media (max-width: 900px) { .acceso { grid-template-columns: minmax(0, 1fr); } .acceso-escena { display: none; } }

/* ---------- informes ---------- */
.inf { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.inf-lista { display: grid; gap: 4px; position: sticky; top: 16px; }
.inf-lista a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 4px; text-decoration: none; color: var(--texto-2); border-left: 2px solid transparent; }
.inf-lista a b { font: 600 .95rem var(--fuente); color: var(--texto); }
.inf-lista a span { font-size: .8rem; color: var(--texto-3); line-height: 1.35; }
.inf-lista a:hover { background: var(--superficie-2); }
.inf-lista a.activo { background: var(--superficie); border-left-color: var(--pavo); box-shadow: var(--sombra); }
.inf-selector { display: none; }
.inf-cuerpo { display: grid; gap: 16px; min-width: 0; }
.inf-filtros { display: grid; gap: 14px; }
.inf-fila { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.inf-fila > label { margin: 0; }
.inf-fila .fechas { grid-column: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inf-fila .fechas input { width: auto; min-width: 0; }
.inf-fila.oculto { display: none; }
.segmentos { display: flex; flex-wrap: wrap; gap: 6px; }
.segmentos button { border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); border-radius: 4px; padding: 6px 10px;
  font: 600 .78rem var(--rotulo); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.segmentos button[aria-pressed="true"] { background: var(--linea-fuerte); color: var(--fondo); border-color: var(--linea-fuerte); }
.multi { position: relative; }
.multi summary { list-style: none; cursor: pointer; border: 1px solid var(--borde); border-radius: 4px; padding: 9px 12px; background: var(--superficie); }
.multi summary::-webkit-details-marker { display: none; }
.multi summary::after { content: "▾"; float: right; color: var(--texto-3); }
.multi-lista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 4px; box-shadow: var(--sombra); max-height: 280px; overflow: auto; padding: 6px; }
.check { display: flex; gap: 8px; align-items: center; padding: 6px 8px; margin: 0; font: 400 .95rem var(--fuente); text-transform: none; letter-spacing: 0; color: var(--texto); cursor: pointer; border-radius: 3px; }
.check:hover { background: var(--superficie-2); }
.check input { width: auto; }
.inf-acciones { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: 14px; }
.inf-titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.inf-titulo h2 { font: 600 1.4rem var(--fuente); text-transform: none; letter-spacing: 0; color: var(--texto); margin: 4px 0 2px; }
.inf-barras { display: grid; gap: 8px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.kpi b.kpi-texto { font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
#inf-resultado, #inf-resultado .pila > * { min-width: 0; }
.inf-barra { display: grid; grid-template-columns: minmax(90px, 180px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: .9rem; }
.inf-barra .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inf-barra .pista-b { height: 12px; background: var(--superficie-2); border-radius: 2px; overflow: hidden; }
.inf-barra .pista-b i { display: block; height: 100%; background: var(--pavo); border-radius: 2px; transform-origin: left; animation: crecer .6s var(--sale) both; }
.inf-barra b { font: 500 .9rem var(--dato); font-variant-numeric: tabular-nums; }
.tabla-inf { padding: 0; }
.tabla-inf > p { padding: 20px; }
.desliza { overflow-x: auto; }
.tabla-inf table { min-width: 640px; }
.tabla-inf th button { all: unset; cursor: pointer; }
.tabla-inf th button:focus-visible { outline: 2px solid var(--sol); }
.tabla-inf th, .tabla-inf td { padding: 10px 14px; }
.tabla-inf .der { text-align: right; }
.tabla-inf .num { font-variant-numeric: tabular-nums; }
.tabla-inf td { white-space: nowrap; }
.tabla-inf tfoot td { font-weight: 600; border-top: 2px solid var(--linea-fuerte); }
@media (max-width: 900px) { .inf { grid-template-columns: minmax(0, 1fr); } .inf-lista { display: none; } .inf-selector { display: block; } }
@media (max-width: 560px) { .inf-fila { grid-template-columns: minmax(0, 1fr); } .inf-fila .fechas { grid-column: 1; } .inf-barra { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; } }
@media print {
  .lateral, .abajo, .control, .inf-lista, .inf-selector, .inf-filtros, .cabecera { display: none !important; }
  .app { display: block; } main { padding: 0; max-width: none; }
  body { background: #fff; } .tarjeta, .kpi { box-shadow: none; break-inside: avoid; }
  .tabla-inf table { min-width: 0; font-size: 11px; } .desliza { overflow: visible; }
  * { animation: none !important; }
}

/* ---------- flotas ---------- */
.chips-flota { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips-flota button, .atajos-flota button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto); border-radius: 999px; padding: 6px 12px; font: 500 .9rem var(--fuente); cursor: pointer; }
.chips-flota button i, .atajos-flota button i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chips-flota button[aria-pressed="true"] { background: var(--linea-fuerte); color: var(--fondo); border-color: var(--linea-fuerte); }
.chips-flota button[aria-pressed="true"] .tenue { color: inherit; opacity: .7; }
.atajos-flota { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px 10px; border-bottom: 1px solid var(--borde); margin-bottom: 4px; }
.atajos-flota button { padding: 4px 10px; font-size: .85rem; }
.tarjeta.flota { border-top: 4px solid var(--fc); }
.cuenta-flota { display: grid; justify-items: end; font: 500 1.8rem/1 var(--fuente); color: var(--fc); }
.cuenta-flota small { font: 600 .66rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin-top: 4px; }
.miembros { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.miembro { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; align-items: center; text-decoration: none; color: var(--texto); font-size: .86rem; }
.miembro span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-check { max-height: 260px; overflow: auto; border: 1px solid var(--borde); border-radius: 4px; padding: 4px; margin-top: 6px; }
#f-buscar { margin-top: 2px; }
#m-flota { margin-bottom: 8px; }
/* ---------- geocercas ---------- */
.geo-app { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.geo-lista { display: grid; gap: 8px; align-content: start; min-width: 0; }
.geo-mapa { position: relative; min-width: 0; }
.geo-mapa .mapa { height: calc(100vh - 210px); min-height: 460px; }
.item-geo { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; width: 100%;
  border: 1px solid var(--borde); background: var(--superficie); border-radius: 4px; padding: 10px 12px; cursor: pointer; color: var(--texto); font: inherit; }
.item-geo i { width: 12px; height: 12px; border-radius: 3px; background: var(--gc); }
.item-geo b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-geo small { color: var(--texto-3); font-size: .78rem; }
.item-geo.activo { border-color: var(--gc); box-shadow: inset 3px 0 0 var(--gc); }
.detalle-geo { border-top: 4px solid var(--gc); }
.eventos-geo { display: grid; gap: 0; }
.evento-geo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--borde); font-size: .88rem; }
.barra-dibujo { position: absolute; z-index: 600; top: 12px; left: 56px; right: 56px; max-width: 520px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 14px; display: grid; gap: 8px; animation: aparecer .22s var(--sale); }
.barra-dibujo p { margin: 0; font-size: .92rem; }
.radio-geo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; }
.radio-geo input { width: 100%; accent-color: var(--pavo); }
.radio-geo b { font: 500 .9rem var(--dato); min-width: 64px; text-align: right; }
.dibujando { cursor: crosshair; }
.dibujando .leaflet-interactive { cursor: crosshair; }
.rotulo-geo { background: transparent; border: 0; box-shadow: none; font: 600 .74rem var(--rotulo); letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto); text-shadow: 0 0 3px var(--superficie), 0 0 3px var(--superficie), 0 0 3px var(--superficie); }
.rotulo-geo::before { display: none; }
/* ---------- más (teléfono) ---------- */
.lista-mas { display: grid; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.lista-mas a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 16px; text-decoration: none;
  color: var(--texto); border-top: 1px solid var(--borde); font-size: 1.02rem; }
.lista-mas a:first-child { border-top: 0; }
.lista-mas svg { width: 20px; height: 20px; color: var(--texto-2); }
@media (max-width: 900px) { .geo-app { grid-template-columns: minmax(0, 1fr); } .geo-mapa { order: -1; } .geo-mapa .mapa { height: 56vh; min-height: 320px; }
  .barra-dibujo { left: 10px; right: 10px; } }

/* ---------- rutas ---------- */
.tarjeta.viaje, .tarjeta.ruta { border-left: 4px solid var(--rc); text-decoration: none; color: inherit; display: block; }
.tarjeta.viaje:hover { border-color: var(--rc); }
.tarjeta.ruta { display: grid; gap: 6px; }
.pista-paradas { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 16px; position: relative; }
.pista-paradas::before { content: ""; position: absolute; top: 13px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; background: var(--borde); }
.pp { position: relative; display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; padding-inline: 4px; }
.pp i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 .78rem var(--dato); font-style: normal;
  background: var(--superficie); border: 2px solid var(--linea-fuerte); color: var(--texto); position: relative; }
.pp.cumplida i { background: var(--ok); border-color: var(--ok); color: #fff; }
.pp.en_parada i { background: var(--pavo); border-color: var(--pavo); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pavo) 25%, transparent); }
.pp.omitida i { background: var(--mal); border-color: var(--mal); color: #fff; }
.pp.pendiente i { border-color: var(--borde); color: var(--texto-3); }
.pp b { font: 600 .8rem var(--fuente); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pp small { font: 400 .72rem var(--dato); color: var(--texto-3); }
.pp small em { color: var(--mal); font-style: normal; }
.nav-fecha { display: flex; gap: 6px; align-items: center; }
.nav-fecha input { width: auto; }
.secuencia { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: .9rem; }
.secuencia i { color: var(--texto-3); font-style: normal; }
.viaje-detalle { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.viaje-detalle .mapa { height: 560px; position: sticky; top: 16px; }
.viaje-detalle td.der, .viaje-detalle th.der { text-align: right; }
.viaje-detalle .tarde { color: var(--mal); font-weight: 600; }
.marca-parada { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 .8rem var(--dato); color: #fff;
  background: var(--linea-fuerte); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); flex: none; }
.marca-parada.cumplida { background: var(--ok); } .marca-parada.en_parada { background: var(--pavo); } .marca-parada.omitida { background: var(--mal); }
.marca-parada.pendiente { background: #2f7bff; }
.editor-ruta { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
.editor-ruta .geo-mapa { position: sticky; top: 16px; }
.editor-ruta .mapa { height: calc(100vh - 160px); min-height: 480px; }
.fila-parada { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n nombre acc" ". tiempos tiempos"; gap: 6px 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borde); }
.fila-parada > .marca-parada { grid-area: n; } .fila-parada > input { grid-area: nombre; } .fila-parada > .acciones-parada { grid-area: acc; }
.fila-parada > .tiempos { grid-area: tiempos; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.fila-parada input { min-width: 0; }
.mini-campo { display: flex; align-items: center; gap: 4px; margin: 0; font: 400 .78rem var(--fuente); text-transform: none; letter-spacing: 0; color: var(--texto-3); white-space: nowrap; }
.mini-campo input { width: 64px; padding: 6px; }
.acciones-parada { display: flex; gap: 2px; }
.acciones-parada button { border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); border-radius: 3px; width: 26px; height: 26px; cursor: pointer; padding: 0; }
.acciones-parada button:disabled { opacity: .35; cursor: default; }
#r-geo { width: auto; flex: 1; min-width: 0; }
@media (max-width: 1000px) { .viaje-detalle, .editor-ruta { grid-template-columns: minmax(0, 1fr); } .viaje-detalle .mapa, .editor-ruta .geo-mapa { position: static; }
  .viaje-detalle .mapa { height: 50vh; } .editor-ruta .mapa { height: 55vh; min-height: 320px; } .editor-ruta .geo-mapa { order: -1; } }
@media (max-width: 560px) { .pp b { display: none; } }

/* ---------- notificaciones ---------- */
.campana { position: relative; margin-left: auto; background: none; border: 0; color: var(--texto-2); cursor: pointer; padding: 4px; display: grid; place-items: center; }
.campana svg { width: 20px; height: 20px; }
.campana:hover { color: var(--texto); }
.campana b { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--pavo); color: #fff;
  font: 600 .66rem/18px var(--dato); text-align: center; padding: 0 4px; letter-spacing: 0; }
.control .estado + .campana { margin-left: 14px; }
.panel-campana { position: fixed; z-index: 2500; top: 52px; right: max(16px, calc((100vw - 1320px) / 2 + 40px)); width: min(400px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 80px)); overflow: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18); padding: 14px; display: grid; gap: 10px; animation: dialogo-entra .2s var(--sale); }
.lista-notif { display: grid; }
.lista-notif.grande { padding: 4px 18px; }
.notif { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--borde); }
.lista-notif > .notif:first-child { border-top: 0; }
.notif > i { border-radius: 2px; background: var(--azul); }
.notif.alerta > i { background: var(--sol); } .notif.critico > i { background: var(--mal); }
.notif b { font-weight: 600; overflow-wrap: anywhere; }
.notif.nueva b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pavo); margin-right: 7px; vertical-align: middle; }
.notif .entre { align-items: baseline; flex-wrap: nowrap; }
.notif .entre .tenue { white-space: nowrap; font-size: .8rem; }
.detalle-notif { margin: -4px 0 8px 16px; font-size: .85rem; }
.detalle-notif summary { cursor: pointer; color: var(--texto-3); }
.detalle-notif pre { white-space: pre-wrap; font: 400 .85rem/1.5 var(--fuente); margin: 6px 0 0; color: var(--texto-2); overflow-wrap: anywhere; }
.pasos-notif { display: grid; gap: 10px; padding-left: 20px; text-align: left; max-width: 60ch; margin: 12px auto 0; color: var(--texto-2); }
.tarjeta.regla, .tarjeta.canal { display: grid; gap: 8px; align-content: start; }
.tarjeta.regla.pausada { opacity: .7; }
.chips-canal { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-canal { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--borde); border-radius: 999px; padding: 2px 9px; font-size: .8rem; white-space: nowrap; }
.chip-canal svg, .check svg { width: 14px; height: 14px; flex: none; }
.icono-canal { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--superficie-2); flex: none; }
.icono-canal svg { width: 20px; height: 20px; }
.canal.whatsapp .icono-canal { color: #1f9d55; } .canal.telegram .icono-canal { color: #2f7bff; } .canal.correo .icono-canal { color: var(--pavo); }
.canal.webhook .icono-canal { color: #8b5cf6; }
.destinos { display: flex; flex-wrap: wrap; gap: 6px; font-size: .86rem; }
.destinos span, .destinos code { background: var(--superficie-2); border-radius: 4px; padding: 2px 8px; overflow-wrap: anywhere; }
.error-canal { color: var(--mal); font-size: .85rem; margin: 0; overflow-wrap: anywhere; }
#n-tipo, #n-estado { width: auto; }
@media (max-width: 560px) { .panel-campana { top: 64px; } }

/* ---------- informes a medida ---------- */
.inf-seccion { display: block; padding: 10px 12px 4px; }
.inf-vacio { padding: 2px 12px 8px; font-size: .85rem; }
.constructor { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 18px; align-items: start; }
.vista-previa { position: sticky; top: 16px; display: grid; gap: 8px; min-width: 0; max-height: calc(100vh - 32px); overflow: auto; }
.paso { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.paso h2 { margin-bottom: 10px; }
.n-paso { width: 28px; height: 28px; border-radius: 50%; background: var(--linea-fuerte); color: var(--fondo); display: grid; place-items: center; font: 600 .85rem var(--dato); }
.lista-cols { display: grid; border: 1px solid var(--borde); border-radius: 4px; padding: 4px; max-height: 300px; overflow: auto; }
.col-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.col-item.apagada { opacity: .6; }
.col-item .check { flex: 1; }
.fila-filtro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 6px; margin-bottom: 8px; align-items: center; }
.fila-filtro select, .fila-filtro input { min-width: 0; }
.fila-filtro .quitar { border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); border-radius: 3px; height: 30px; cursor: pointer; }
@media (max-width: 1000px) { .constructor { grid-template-columns: minmax(0, 1fr); } .vista-previa { position: static; max-height: none; } }
@media (max-width: 560px) { .fila-filtro { grid-template-columns: minmax(0, 1fr) 30px; } .fila-filtro select, .fila-filtro input { grid-column: 1; } .fila-filtro .quitar { grid-column: 2; grid-row: 1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- seguimiento en vivo ---------- */
.seg { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.seg-mapa-caja { position: relative; }
.seg .mapa { height: calc(100vh - 150px); min-height: 420px; }
.seg-seguir { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: var(--superficie); border: 1px solid var(--borde);
  padding: 6px 10px; border-radius: 4px; margin: 0; }
.seg-panel { display: grid; gap: 14px; position: sticky; top: 12px; }
.seg-cab { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
.seg-cab b { font-size: 1.15rem; display: block; }
.mini { display: block; border-radius: 6px; background: var(--vc-claro, var(--superficie-2)); padding: 4px; }
.seg-panel .medidor { padding: 0; }
.seg-datos { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.seg-datos > div { padding: 10px 12px; border-bottom: 1px solid var(--borde); display: grid; gap: 4px; min-width: 0; }
.seg-datos > div:nth-child(odd) { border-right: 1px solid var(--borde); }
.seg-datos > div:nth-last-child(-n+2) { border-bottom: 0; }
.seg-datos b { font: 500 1.05rem var(--fuente); font-variant-numeric: tabular-nums; }
.seg-datos .dato-chico { font: 400 .78rem var(--dato); overflow-wrap: anywhere; }
.flecha { display: inline-block; color: var(--pavo); font-weight: 700; }
.compartido { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--borde); }
.compartido small { display: block; color: var(--texto-3); font-size: .78rem; }
.item-seg { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; color: inherit; border-left: 3px solid var(--vc); }
.item-seg b { display: block; }
.item-seg small { font: 600 .7rem var(--rotulo); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 960px) { .seg { grid-template-columns: minmax(0, 1fr); } .seg .mapa { height: 58vh; } .seg-panel { position: static; } }

/* ---------- compartir ---------- */
.selector-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.selector-tipo label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px;
  cursor: pointer; text-transform: none; letter-spacing: 0; font: 500 .9rem var(--fuente); color: var(--texto); margin: 0; }
.selector-tipo label:has(input:checked) { border-color: var(--pavo); box-shadow: inset 0 0 0 1px var(--pavo); }
.selector-tipo input { width: auto; margin-top: 3px; accent-color: var(--pavo); }
.selector-tipo small { display: block; color: var(--texto-3); font-size: .8rem; }
.enlace { display: flex; gap: 8px; }
.enlace input { font: 400 .85rem var(--dato); }
@media (max-width: 480px) { .selector-tipo { grid-template-columns: 1fr; } }

/* ---------- personalizar ícono y color ---------- */
.banda-v { position: relative; }
.banda-v .personalizar { position: absolute; top: 14px; right: 14px; }
.selector-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.opcion-icono { display: grid; justify-items: center; gap: 2px; border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px 4px 6px;
  cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; }
.opcion-icono input, .opcion-color input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.opcion-icono .muestra { width: 100%; }
.grupo-iconos { display: grid; gap: 6px; margin-top: 12px; }
.opcion-icono small { font: 600 .68rem var(--rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.opcion-icono:has(input:checked) { border-color: var(--pavo); box-shadow: inset 0 0 0 1px var(--pavo); background: var(--superficie-2); }
.opcion-icono:has(input:focus-visible), .opcion-color:has(input:focus-visible) { outline: 2px solid var(--sol); outline-offset: 2px; }
.selector-color { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.opcion-color { position: relative; margin: 0; cursor: pointer; }
.opcion-color span { display: block; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--borde); }
.opcion-color span.auto { width: auto; padding: 0 10px; border-radius: 16px; display: grid; place-items: center; font: 600 .7rem var(--rotulo);
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.opcion-color:has(input:checked) span, .opcion-color:has(input[type=radio]:checked) input[type=color] { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5px var(--texto); }
.opcion-color input[type=color] { width: 40px; height: 32px; padding: 0; border-radius: 8px; cursor: pointer; }


/* ====================================================================== Mantención+ (módulo plus) */
.k-plus { --k: var(--plus-vivo); } .k-plus b { color: var(--plus); }
.sello-plus { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 600 .66rem var(--rotulo);
  letter-spacing: .16em; text-transform: uppercase; color: var(--plus); background: var(--plus-fondo); border: 1px solid var(--plus-borde); }
.sello-plus::before { content: "✦"; font-size: .8em; }

/* menú lateral: el módulo va separado y en oro */
.nav-plus { margin: 14px 0 10px; padding: 10px 0 0; border-top: 1px solid var(--borde); display: grid; gap: 4px; }
.nav-plus > span { padding: 0 12px; font: 600 .62rem var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--plus); }
.lateral a.nav.plus { color: var(--texto); background: linear-gradient(90deg, var(--plus-fondo), transparent); border-left-color: var(--plus-vivo); }
.lateral a.nav.plus svg { color: var(--plus); }
.lateral a.nav.plus b, .plus-titulo h1 b, .pest-plus b { color: var(--plus-vivo); font-weight: 700; }
.lateral a.nav.plus.activo { background: var(--plus-fondo); border-left-color: var(--plus); }
.lista-mas a.plus { background: linear-gradient(90deg, var(--plus-fondo), transparent 70%); }
.lista-mas a.plus svg { color: var(--plus); }
.lista-mas a.plus .sello-plus { margin-left: 6px; vertical-align: 1px; }

/* cabecera del módulo */
.plus-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 22px; align-items: center; margin-bottom: 18px; padding: 22px 24px;
  border: 1px solid var(--plus-borde); border-radius: var(--radio); position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, var(--plus-fondo), var(--superficie) 60%); }
.plus-cab::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--plus-vivo), var(--pavo)); }
.plus-titulo h1 { margin: 10px 0 6px; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.01em; }
.plus-titulo p { margin: 0; color: var(--texto-2); max-width: 42ch; }
.plus-ventajas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.plus-ventajas li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.plus-ventajas svg { width: 34px; height: 34px; padding: 7px; border-radius: 8px; color: var(--plus); background: var(--plus-fondo); border: 1px solid var(--plus-borde); }
.plus-ventajas b { display: block; font-size: .92rem; }
.plus-ventajas span { font-size: .8rem; color: var(--texto-2); line-height: 1.35; }
@media (max-width: 860px) { .plus-cab { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .plus-ventajas { grid-template-columns: 1fr 1fr; gap: 10px; } .plus-ventajas span { display: none; } .plus-ventajas b { font-size: .8rem; } .plus-ventajas li { grid-template-columns: 28px minmax(0, 1fr); align-items: center; } .plus-ventajas svg { width: 28px; height: 28px; padding: 5px; } .plus-cab { padding: 18px 16px; } }

/* pestañas de la ficha del vehículo: el grupo plus */
.pest-plus { display: inline-flex; align-items: center; padding: 0 6px 0 18px; margin-left: 8px; border-left: 1px solid var(--borde); white-space: nowrap;
  font: 600 .66rem var(--rotulo); letter-spacing: .18em; text-transform: uppercase; color: var(--plus); }
.pestanas a.en-plus { background: linear-gradient(180deg, transparent 55%, var(--plus-fondo)); }

/* listas del panel */
.plus-agenda { display: grid; }
.plus-dos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.plus-dos > * { min-width: 0; }
.plus-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--borde);
  color: var(--texto); text-decoration: none; transition: background .15s; }
.plus-item:first-child { border-top: 0; }
.plus-item:hover { background: var(--superficie-2); }
.plus-item b { display: block; font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plus-item small { display: block; font-size: .78rem; }
.plus-item > svg { width: 20px; height: 20px; color: var(--plus); }
.plus-cuando { font: 500 .82rem var(--dato); color: var(--texto-2); white-space: nowrap; }
.plus-mm { min-width: 54px; text-align: center; padding: 4px 6px; border-radius: 4px; font: 500 1rem var(--dato); font-variant-numeric: tabular-nums; }
.plus-mm small { font-size: .65rem; margin-left: 2px; }
.plus-mm.ok { background: var(--ok-fondo); color: var(--ok); } .plus-mm.pronto { background: var(--pronto-fondo); color: var(--pronto); }
.plus-mm.vencido { background: var(--mal-fondo); color: var(--mal); }
.plus-veh { display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; min-width: 0; }
.plus-veh .mini { width: 38px; height: 30px; flex: none; display: grid; place-items: center; }
.plus-veh .mini svg { width: 100%; height: 100%; }
.plus-veh b { display: block; } .plus-veh small { display: block; font-size: .78rem; }
.plus-salud { height: 6px; border-radius: 3px; background: var(--pista); overflow: hidden; width: 120px; max-width: 100%; margin-bottom: 3px; }
.plus-salud i { display: block; height: 100%; background: var(--texto-3); }
.plus-salud i.ok { background: var(--ok); } .plus-salud i.pronto { background: var(--pronto); } .plus-salud i.vencido { background: var(--mal); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* gráfico de gasto */
.plus-grafico { width: 100%; height: auto; display: block; }
.plus-grafico text { font: 500 9px var(--rotulo); fill: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; }
.plus-grafico .g-eje { stroke: var(--borde); }
.g-prev { fill: var(--plus-vivo); background: var(--plus-vivo); } .g-corr { fill: var(--pavo); background: var(--pavo); }
.plus-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: .8rem; color: var(--texto-2); }
.plus-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* ====================================================================== teléfono: más compacto, más a mano */
.fab, .hoja { display: none; }
@media (max-width: 860px) {
  /* barra de control en una línea: flota, en línea, alertas y campana */
  .control { flex-wrap: nowrap; padding: 10px 0; margin-bottom: 16px; gap: 12px; font-size: .7rem; letter-spacing: .1em; }
  .control .c-org, .control .c-local { display: none; }
  .control .estado { white-space: nowrap; }
  /* barra inferior: Mantención+ al centro, en oro */
  .abajo a { padding: 6px 4px; min-width: 56px; }
  .abajo a.plus { color: var(--plus); position: relative; }
  .abajo a.plus svg { width: 22px; height: 22px; padding: 6px; box-sizing: content-box; margin-top: -16px; border-radius: 50%;
    background: var(--plus-fondo); border: 1px solid var(--plus-borde); box-shadow: 0 4px 14px color-mix(in srgb, var(--plus-vivo) 35%, transparent); }
  .abajo a.plus.activo { border-top-color: var(--plus-vivo); }
  .cabecera h1 { font-size: 1.6rem; }

  /* botón de acciones rápidas y hoja inferior */
  .fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 1001;
    width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--pavo); color: var(--sobre-pavo); font: 400 2rem/1 var(--fuente);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--pavo) 40%, transparent); cursor: pointer; }
  .fab:active { transform: scale(.94); }
  .hoja { display: block; position: fixed; inset: 0; z-index: 1100; background: var(--velo); animation: aparecer .18s var(--sale); }
  .hoja[hidden] { display: none; }
  .hoja-panel { position: absolute; inset: auto 0 0 0; background: var(--superficie); border-radius: 16px 16px 0 0; display: grid; gap: 2px;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px)); animation: subir .26s var(--sale); }
  .hoja-asa { width: 40px; height: 4px; border-radius: 2px; background: var(--borde); margin: 2px auto 8px; }
  .hoja-titulo { font: 600 .74rem var(--rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); padding: 0 8px 6px; }
  .hoja-panel > button, .hoja-panel > a { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 10px; border: 0; border-radius: 10px;
    background: none; color: var(--texto); font: 500 1rem var(--fuente); text-align: left; text-decoration: none; cursor: pointer; }
  .hoja-panel > button:active, .hoja-panel > a:active { background: var(--superficie-2); }
  .hoja-panel svg { width: 22px; height: 22px; color: var(--pavo); flex: none; }
  .hoja-panel .hoja-cerrar { justify-content: center; margin-top: 6px; background: var(--superficie-2); font-weight: 600; }
}
@keyframes subir { from { transform: translateY(100%); } }

@media (max-width: 600px) {
  /* tarjetas de vehículos: horizontales, una mirada basta */
  .rejilla:has(> .v-envoltura) { gap: 10px; }
  .tarjeta.vehiculo { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
  .tarjeta.vehiculo .portada-v { height: auto; min-height: 112px; align-items: center; padding: 30px 8px 30px; }
  .tarjeta.vehiculo .portada-v .ilus { width: 100%; }
  .tarjeta.vehiculo .portada-v .patente { top: 8px; left: 8px; font-size: .62rem; padding: 1px 5px; }
  .tarjeta.vehiculo .portada-v .chip { top: auto; bottom: 8px; right: auto; left: 8px; }
  .tarjeta.vehiculo .cuerpo-v { border-top: 0; border-left: 3px solid var(--vc); padding: 12px 14px; min-width: 0; }
  .tarjeta.vehiculo .nombre-v { font-size: 1.05rem; }
  .tarjeta.vehiculo .datos-v { margin: 6px 0 2px; font-size: .8rem; gap: 4px 10px; }
  .tarjeta.vehiculo .aviso { padding: 6px 0; font-size: .86rem; }
  .tarjeta.vehiculo .aviso ~ .aviso { display: none; }
  .tarjeta.vehiculo .aviso .chip { font-size: 0; padding: 0; gap: 0; background: none; }
  .tarjeta.vehiculo .aviso .chip::before { width: 8px; height: 8px; }

  /* pestañas de la ficha: todas a la vista, en dos grupos */
  .pestanas:not(.plus) { flex-wrap: wrap; gap: 6px; border-bottom: 0; overflow: visible; }
  .pestanas:not(.plus) a { padding: 8px 12px; border: 1px solid var(--borde); border-radius: 999px; letter-spacing: .08em; font-size: .74rem; background: var(--superficie); }
  .pestanas:not(.plus) a.activo { border-color: var(--pc); color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, var(--superficie)); }
  .pestanas:not(.plus) a.en-plus { background: var(--superficie); }
  .pestanas:not(.plus) a.en-plus.activo { background: var(--plus-fondo); color: var(--plus); border-color: var(--plus-borde); }
  .pest-plus { flex-basis: 100%; border-left: 0; margin: 6px 0 0; padding: 0 2px; }
  .banda-v .personalizar { top: 10px; right: 10px; padding: 6px 8px; font-size: .62rem; }
  .banda-v h1 { font-size: 1.6rem; padding-right: 0; }

  /* Mantención+: cabecera corta y listas que respiran */
  .plus-cab { padding: 16px; gap: 12px; margin-bottom: 12px; }
  .plus-titulo h1 { margin: 8px 0 0; font-size: 1.7rem; }
  .plus-titulo p { display: none; }
  .plus-ventajas { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .plus-ventajas li { flex: none; display: flex; gap: 8px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--superficie);
    border: 1px solid var(--plus-borde); }
  .plus-ventajas b { white-space: nowrap; }
  .kpi > div:nth-child(5):last-child { grid-column: 1 / -1; }
  .kpi b { font-size: 1.6rem; }
  .plus-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; }
  .plus-item > .chip { font-size: 0; padding: 0; gap: 0; background: none; }
  .plus-item > .chip::before { width: 10px; height: 10px; }
  .plus-item b { white-space: normal; }
  .plus-cuando { font-size: .76rem; }
  /* salud de la flota: tarjetas en vez de tabla */
  .plus-tabla { min-width: 0 !important; }
  .plus-tabla thead { display: none; }
  .plus-tabla tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 16px; border-top: 1px solid var(--borde); }
  .plus-tabla td { padding: 0; border: 0; text-align: left !important; }
  .plus-tabla td:first-child { grid-column: 1 / -1; }
  .plus-tabla td[data-et="Plan al día"] { order: 9; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .plus-tabla td[data-et="Plan al día"] .plus-salud { width: 100%; margin: 0; }
  .plus-tabla td[data-et]::before { content: attr(data-et); display: block; font: 600 .62rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
}

/* ====================================================================== combustible */
.comb-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 6px; }
.comb-barra .chips-flota { margin-bottom: 0; }
.comb-alerta { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radio);
  background: var(--mal-fondo); color: var(--texto); border: 1px solid color-mix(in srgb, var(--mal) 35%, transparent); text-decoration: none; }
.comb-alerta svg { width: 22px; height: 22px; color: var(--mal); }
.comb-alerta b { display: block; color: var(--mal); }
.comb-alerta > span { min-width: 0; }
.comb-alerta .ca-ir { font: 600 .78rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--mal); white-space: nowrap; }
.comb-ayuda p { margin: 0; max-width: 75ch; }
.comb-grafico, .comb-nivel { width: 100%; height: auto; display: block; }
.comb-grafico text, .comb-nivel text { font: 500 9px var(--rotulo); fill: var(--texto-3); letter-spacing: .06em; }
.comb-grafico .g-eje { stroke: var(--borde); }
.g-cons { fill: var(--sol); background: var(--sol); }
.g-carga { fill: var(--ok); background: var(--ok); stroke: var(--superficie); stroke-width: 1.5; }
.g-desc { fill: var(--mal); background: var(--mal); }
.plus-leyenda i.redondo { border-radius: 50%; }
.comb-nivel .g-reja { stroke: var(--pista); }
.comb-nivel .g-area { fill: color-mix(in srgb, var(--vc, var(--sol)) 16%, transparent); }
.comb-nivel .g-linea { fill: none; stroke: var(--vc, var(--sol)); stroke-width: 2; stroke-linejoin: round; }
.comb-nivel .ev-carga line { stroke: var(--ok); stroke-dasharray: 3 3; } .comb-nivel .ev-carga circle { fill: var(--ok); stroke: var(--superficie); stroke-width: 2; }
.comb-nivel .ev-desc line { stroke: var(--mal); stroke-dasharray: 3 3; } .comb-nivel .ev-desc circle { fill: var(--mal); stroke: var(--superficie); stroke-width: 2; }

/* lista por vehículo */
.comb-lista { display: grid; }
.comb-veh { display: grid; grid-template-columns: 44px minmax(150px, 1.4fr) 14px repeat(5, minmax(0, 1fr)); gap: 14px; align-items: center;
  padding: 12px 20px; border-top: 1px solid var(--borde); color: var(--texto); text-decoration: none; }
.comb-veh:hover { background: var(--superficie-2); }
.comb-veh .mini { width: 44px; height: 34px; display: grid; place-items: center; }
.comb-veh .mini svg { width: 100%; height: 100%; }
.cv-nombre { min-width: 0; } .cv-nombre b, .cv-nombre small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-nombre small { font-size: .78rem; }
.cv-tanque { width: 12px; height: 34px; border: 1.5px solid var(--texto-3); border-radius: 3px; position: relative; overflow: hidden; }
.cv-tanque i { position: absolute; inset: auto 0 0 0; background: var(--sol); }
.cv-tanque i.bajo { background: var(--mal); }
.cv-tanque i.vacio { height: 100%; background: repeating-linear-gradient(45deg, transparent 0 3px, var(--pista) 3px 6px); }
.cv-dato { min-width: 0; font-variant-numeric: tabular-nums; }
.cv-dato b { display: block; font: 500 .95rem var(--dato); }
.cv-dato small { display: block; font-size: .72rem; }
.cv-dato::before { content: attr(data-et); display: block; font: 600 .6rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 2px; }

/* movimientos */
.comb-movs { display: grid; }
.mov { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--borde); }
.mov:first-child { border-top: 0; }
.mov-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 1.2rem/1 var(--dato); background: var(--ok-fondo); color: var(--ok); }
.mov.desc .mov-ic { background: var(--mal-fondo); color: var(--mal); }
.mov-txt { min-width: 0; } .mov-txt b { display: block; } .mov-txt small { display: block; font-size: .8rem; line-height: 1.4; }
.mov-der { display: grid; justify-items: end; gap: 3px; } .mov-der small { font: 400 .78rem var(--dato); }
.comb-cfg td .chip { margin: 2px 2px 2px 0; }

@media (max-width: 900px) {
  /* teléfono y tableta: nombre + estanque arriba; litros, rendimiento y descargas abajo */
  .comb-veh { grid-template-columns: 44px repeat(2, minmax(0, 1fr)) 14px; padding: 14px 16px; gap: 8px 12px; }
  .comb-veh .cv-nombre { grid-column: 2 / 4; }
  .comb-veh .cv-tanque { grid-column: 4; grid-row: 1; }
  .comb-veh > .cv-dato { display: none; }
  .comb-veh > .cv-dato[data-et="Litros"] { display: block; grid-column: 1 / 3; }
  .comb-veh > .cv-dato[data-et="Rendimiento"] { display: block; grid-column: 3 / 5; }
  .comb-veh > .cv-dato[data-et="Descargas"] { display: block; grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .comb-barra { flex-direction: column; align-items: stretch; }
  .mov { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .mov .mov-acc { grid-column: 2 / -1; justify-self: start; }
  .comb-alerta { grid-template-columns: 22px minmax(0, 1fr); } .comb-alerta .ca-ir { grid-column: 2; }
  .comb-cfg { min-width: 0 !important; } .comb-cfg thead { display: none; }
  .comb-cfg tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--borde); }
  .comb-cfg td { padding: 0; border: 0; text-align: left !important; }
  .comb-cfg td:first-child, .comb-cfg td:nth-child(2), .comb-cfg td:nth-child(3) { grid-column: 1 / -1; }
  .comb-cfg td[data-et]::before { content: attr(data-et); display: block; font: 600 .6rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
  .comb-cfg td:first-child::before { display: none; }
}

/* ====================================================================== menú por módulo y dashboards */
.lateral { overflow-y: auto; scrollbar-width: thin; }
.lateral .logo { padding-bottom: 14px; }
.nav-grupo { display: grid; gap: 1px; padding: 8px 0 6px; border-top: 1px solid var(--borde); }
.nav-grupo:first-of-type { border-top: 0; padding-top: 0; }
.ng-titulo { padding: 4px 12px 4px; font: 600 .62rem var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); }
.ng-titulo b { color: var(--plus-vivo); }
.ng-titulo .sello-plus { font-size: .52rem; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }
.lateral .nav-grupo a.nav { padding: 7px 12px; }
.nav-grupo.plus .ng-titulo { color: var(--plus); }
.nav-grupo.plus a.nav svg { color: var(--plus); }
.nav-grupo.plus a.nav.activo { background: var(--plus-fondo); border-left-color: var(--plus-vivo); }
.nav-grupo.comb a.nav svg { color: var(--sol); }
.rotulo-mod { display: block; font: 600 .7rem var(--rotulo); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 2px; }
.mas-titulo { font: 600 .74rem var(--rotulo); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); margin: 18px 0 8px; }
.mas-titulo.plus { color: var(--plus); }
.lista-mas.plus a svg { color: var(--plus); }

.estados-gps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.estado-gps { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde);
  border-left: 4px solid var(--ec); color: var(--texto); text-decoration: none; }
.estado-gps b { font: 500 1.8rem/1.1 var(--fuente); font-variant-numeric: tabular-nums; }
.estado-gps span { font: 600 .68rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.estado-gps:hover { background: var(--superficie-2); }
.tablero-mapa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.tablero-mapa .mapa { height: 340px; border: 0; border-radius: 0; }
.dona-estados { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; align-items: center; }
.dona-estados svg { width: 130px; height: 130px; }
.dona-estados .d-total { font: 500 30px var(--fuente); fill: var(--texto); }
.dona-estados .d-rotulo { font: 600 10px var(--rotulo); letter-spacing: .14em; text-transform: uppercase; fill: var(--texto-3); }
.dona-estados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; }
.dona-estados li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.dona-estados li i { width: 10px; height: 10px; border-radius: 50%; }
.dona-estados li b { font: 500 .95rem var(--dato); }
.mini-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.mini-cifras > div { padding: 10px 12px; border-radius: var(--radio); background: var(--superficie-2); display: grid; gap: 2px; }
.mini-cifras b { font: 500 1.4rem var(--fuente); font-variant-numeric: tabular-nums; }
.mini-cifras span { font: 600 .62rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.mini-cifras .mal { background: var(--mal-fondo); } .mini-cifras .mal b { color: var(--mal); }
.mini-cifras .pronto { background: var(--pronto-fondo); } .mini-cifras .pronto b { color: var(--pronto); }
.punto-estado { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ec); margin-right: 7px; }
.g-km { fill: var(--azul); }
.uso-tiempo, .rend { display: grid; gap: 9px; }
.ut-fila, .rend-fila { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .86rem; }
.ut-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-barra { display: flex; height: 12px; border-radius: 3px; background: var(--pista); overflow: hidden; }
.ut-mov, .plus-leyenda i.ut-mov { background: var(--azul); } .ut-ral, .plus-leyenda i.ut-ral { background: var(--sol); }
.ut-dato { font: 500 .8rem var(--dato); color: var(--texto-2); white-space: nowrap; }
.destino { display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: var(--pista); margin-top: 4px; }
.destino-ley { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: .9rem; }
.destino-ley li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; }
.destino-ley i { width: 10px; height: 10px; border-radius: 2px; }
.destino-ley b { font: 500 .9rem var(--dato); } .destino-ley span { text-align: right; font-size: .8rem; }
.rend-barra { position: relative; height: 12px; border-radius: 3px; background: var(--pista); }
.rend-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; }
.rend-barra i.bueno { background: var(--ok); } .rend-barra i.malo { background: var(--mal); }
.rend-barra b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--texto); }
@media (max-width: 1000px) { .estados-gps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tablero-mapa { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .estados-gps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estado-gps:first-child { grid-column: 1 / -1; }
  .tablero-mapa .mapa { height: 260px; }
  .dona-estados { grid-template-columns: 110px minmax(0, 1fr); } .dona-estados svg { width: 110px; height: 110px; }
  .ut-fila, .rend-fila { grid-template-columns: 90px minmax(0, 1fr) auto; }
}

/* compartir ubicación desde las listas de vehículos */
.v-envoltura { position: relative; display: grid; min-width: 0; }
.compartir-v { position: absolute; z-index: 2; top: 146px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); cursor: pointer;
  font: 600 .66rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); transition: transform .15s var(--sale); }
.compartir-v svg, .compartir-mini svg, .leaflet-popup .btn svg { width: 15px; height: 15px; color: var(--pavo); }
.compartir-v:hover { transform: translateY(-1px); border-color: var(--pavo); }
.compartir-mini { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--borde);
  background: var(--superficie); cursor: pointer; padding: 0; }
.compartir-mini span { display: none; }
.compartir-mini:hover { border-color: var(--pavo); }
.compartir-mini.sobre { position: absolute; z-index: 2; right: 14px; top: 50%; transform: translateY(-50%); }
.item-mapa-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding-right: 8px; }
.item-seg { padding-right: 60px; }
.leaflet-popup .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 600px) {
  .compartir-v { top: 10px; right: 10px; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .compartir-v span { display: none; }
  .tarjeta.vehiculo .nombre-v { display: block; padding-right: 40px; }
}

/* acceso fijo para compartir la ubicación, en la barra de arriba de todas las pantallas */
.compartir-barra { margin-left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--pavo); color: var(--sobre-pavo); font: 600 .7rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--pavo) 30%, transparent); }
.compartir-barra svg { width: 15px; height: 15px; color: currentColor; }
.compartir-barra:hover { filter: brightness(1.06); }
.control .estado + .compartir-barra + .campana, .compartir-barra + .campana { margin-left: 10px; }
.cr-lista { display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; }
.cr-veh { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 10px 12px; text-align: left; width: 100%;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); cursor: pointer; font: inherit; }
.cr-veh:hover, .cr-veh:focus-visible { border-color: var(--pavo); background: var(--superficie-2); }
.cr-veh .mini { width: 52px; height: 38px; display: grid; place-items: center; } .cr-veh .mini svg { width: 100%; height: 100%; }
.cr-veh b, .cr-veh small { display: block; } .cr-veh small { font-size: .8rem; }
.cr-veh > svg { width: 18px; height: 18px; color: var(--pavo); }
@media (max-width: 860px) {
  .compartir-barra { margin-left: auto; padding: 7px 11px; }
  .compartir-barra span { display: none; }
  .control .estado { margin-left: 0; }
}

/* ====================================================================== componentes y módulos animados */
.comp-svg, .mod-svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.comp-svg *, .mod-svg * { transform-box: view-box; }
.cm-gira, .cm-gira-inv, .cm-gira-lento, .cm-gira-rapido { transform-box: fill-box; transform-origin: center; }
/* se mueve al pasar el mouse, al enfocar o al tocar (.anima) */
:is(.comp, .mueve):hover .cm-gira, .anima .cm-gira, :is(.comp, .mueve):focus-visible .cm-gira { animation: cm-giro 2.4s linear infinite; }
:is(.comp, .mueve):hover .cm-gira-inv, .anima .cm-gira-inv { animation: cm-giro 1.65s linear infinite reverse; }
:is(.comp, .mueve):hover .cm-gira-lento, .anima .cm-gira-lento { animation: cm-giro 3.2s cubic-bezier(.2, .6, .4, 1) infinite; }
:is(.comp, .mueve):hover .cm-gira-rapido, .anima .cm-gira-rapido { animation: cm-giro .9s linear infinite; }
:is(.comp, .mueve):hover .cm-piston-a, .anima .cm-piston-a { animation: cm-piston .6s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-piston-b, .anima .cm-piston-b { animation: cm-piston .6s ease-in-out infinite alternate-reverse; }
:is(.comp, .mueve):hover .cm-chispa, .anima .cm-chispa { animation: cm-chispa .6s steps(1) infinite; }
.cm-chispa { opacity: 0; }
:is(.comp, .mueve):hover .cm-pinza, .anima .cm-pinza { animation: cm-pinza 1.6s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-calor, .anima .cm-calor { animation: cm-calor 1.6s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-volante, .anima .cm-volante { animation: cm-volante 2.2s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-cremallera, .anima .cm-cremallera { animation: cm-cremallera 2.2s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-banda, .anima .cm-banda { animation: cm-banda .8s linear infinite; }
:is(.comp, .mueve):hover .cm-flujo, .anima .cm-flujo { animation: cm-banda .7s linear infinite; }
.cm-particula { opacity: 0; }
:is(.comp, .mueve):hover .cm-particula, .anima .cm-particula { animation: cm-particula 1.8s ease-in infinite; }
:is(.comp, .mueve):hover .cm-resorte, .anima .cm-resorte { animation: cm-resorte .9s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-rayo, .anima .cm-rayo { animation: cm-pulso .8s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-carga, .anima .cm-carga { animation: cm-carga 2s ease-out infinite; }
.cm-carga { transform-box: fill-box; transform-origin: left center; }
:is(.comp, .mueve):hover .cm-vastago, .anima .cm-vastago { animation: cm-vastago 1.4s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-reflejo, .anima .cm-reflejo { animation: cm-reflejo 1.6s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-llave, .anima .cm-llave { animation: cm-volante 1.2s ease-in-out infinite; }
@keyframes cm-giro { to { transform: rotate(360deg); } }
@keyframes cm-piston { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes cm-chispa { 0% { opacity: 1; } 30% { opacity: 0; } }
@keyframes cm-pinza { 0%, 100% { transform: translateX(0); } 45%, 70% { transform: translateX(-4px); } }
@keyframes cm-calor { 0%, 100% { opacity: 0; } 55% { opacity: .45; } }
@keyframes cm-volante { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(35deg); } }
@keyframes cm-cremallera { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
@keyframes cm-banda { to { stroke-dashoffset: -20; } }
@keyframes cm-particula { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateY(32px); } 100% { opacity: 0; transform: translateY(34px); } }
@keyframes cm-resorte { from { transform: scaleY(1); } to { transform: scaleY(.86); } }
@keyframes cm-pulso { from { opacity: .4; } to { opacity: 1; } }
@keyframes cm-carga { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@keyframes cm-vastago { from { transform: translateX(-14px); } to { transform: translateX(4px); } }
@keyframes cm-reflejo { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(170px) skewX(-20deg); } }

/* módulos: se mueven solos, suave */
.md-onda { transform-box: fill-box; transform-origin: center; animation: md-onda 2.4s ease-out infinite; }
.md-onda.d2 { animation-delay: 1.2s; }
.md-orbita { animation: cm-giro 9s linear infinite; }
.md-pin { animation: md-salto 2.4s ease-in-out infinite; }
.md-llave { animation: cm-volante 3s ease-in-out infinite; }
.mod-svg .cm-gira { animation: cm-giro 6s linear infinite; } .mod-svg .cm-gira-inv { animation: cm-giro 4s linear infinite reverse; }
.md-nivel { transform-box: fill-box; transform-origin: left center; animation: cm-carga 3s ease-in-out infinite alternate; }
.md-gota { animation: md-gota 1.8s ease-in infinite; }
.md-campana { animation: md-campana 2.6s ease-in-out infinite; }
.md-punto { animation: cm-pulso .9s ease-in-out infinite alternate; }
.md-barra { transform-box: view-box; animation: md-barra 2.8s var(--sale) infinite; }
@keyframes md-onda { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes md-salto { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes md-gota { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(6px); opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes md-campana { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(14deg); } 74% { transform: rotate(-12deg); } 82% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
@keyframes md-barra { 0% { transform: scaleY(.2); } 40%, 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .comp-svg *, .mod-svg * { animation: none !important; } }

/* contenedores */
.comp { display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 35%, var(--superficie), var(--superficie-2)); cursor: default; }
.comp-mini { width: 54px; height: 54px; flex: none; padding: 4px; }
.mod-ilus { width: 74px; height: 74px; flex: none; }
.cab-mod { display: flex; align-items: center; gap: 16px; min-width: 0; }

/* ---------- mantenimiento por sistema */
.plan-cab { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.plan-cab b { display: block; line-height: 1.25; }
.spec-linea { display: block; margin-top: 3px; font-size: .78rem; }
.tarjeta.plan { border-top: 3px solid var(--cc); }
.sistema-grupo { margin-bottom: 26px; }
.sistema-titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 600 .95rem var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--cc); }
.sistema-titulo .tenue { font: 500 .8rem var(--dato); letter-spacing: 0; }
.comp-tit { width: 44px; height: 44px; padding: 3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 35%, transparent); }
.dlg-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .dlg-cab h2 { margin: 0; }
.dlg-sub { font: 600 .76rem var(--rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); margin: 18px 0 8px; }
.campo-chk { align-self: end; padding-bottom: 10px; }
.cat-mant { display: grid; gap: 14px; max-height: 58vh; overflow-y: auto; padding-right: 4px; }
.cat-sis { border-left: 3px solid var(--cc); padding-left: 12px; display: grid; gap: 6px; }
.cat-sis-cab { display: flex; align-items: center; gap: 10px; color: var(--cc); }
.cat-sis-cab .comp-mini { width: 44px; height: 44px; }
.cat-tarea { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; gap: 2px; align-items: center; text-align: left; padding: 9px 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie);
  color: var(--texto); font: inherit; cursor: pointer; }
.cat-tarea:hover:not(:disabled) { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 7%, var(--superficie)); }
.cat-tarea:disabled { opacity: .55; cursor: default; }
.cat-tarea small { font-size: .78rem; grid-column: 2; }
.cat-tarea .comp-xs { grid-row: span 2; }
.sis-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 12px; margin: 6px 0 4px; scrollbar-width: thin; }
.sis-chip { flex: none; width: 86px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border: 1.5px solid var(--borde); border-radius: 12px;
  background: var(--superficie); cursor: pointer; color: var(--texto-2); font: inherit; }
.sis-chip .comp { width: 52px; height: 52px; background: none; }
.sis-chip small { font: 600 .6rem var(--rotulo); letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.2; }
.sis-chip[aria-pressed="true"] { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 10%, var(--superficie)); color: var(--cc); }
.reps { display: grid; gap: 6px; }
.rep-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 64px 96px 30px; gap: 6px; }
.rep-fila input { min-width: 0; padding: 8px; }
.rp-x { border: 0; background: var(--superficie-2); border-radius: 6px; font-size: 1.1rem; cursor: pointer; color: var(--texto-2); }
.total-calc { display: block; padding: 10px 0; font: 600 1.1rem var(--dato); color: var(--texto); }
@media (max-width: 600px) { .rep-fila { grid-template-columns: 1fr 1fr; } .rep-fila .rp-d { grid-column: 1 / -1; } .rp-x { height: 36px; } }

.historial { display: grid; gap: 10px; }
.serv { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 14px 16px; background: var(--superficie); border: 1px solid var(--borde);
  border-left: 4px solid var(--cc); border-radius: var(--radio); }
.serv.tipo-correctivo { background: linear-gradient(90deg, color-mix(in srgb, var(--mal) 5%, var(--superficie)), var(--superficie) 40%); }
.serv-cuerpo { min-width: 0; display: grid; gap: 5px; }
.serv-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .85rem; }
.serv-det summary { cursor: pointer; font: 600 .74rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--cc); padding: 4px 0; }
.pares-spec { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px 16px; margin: 8px 0; }
.pares-spec div { display: grid; gap: 1px; } .pares-spec span { font: 600 .62rem var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.reps-tabla { font-size: .86rem; margin-top: 6px; }

/* ---------- colores por módulo: cada módulo tiene el suyo */
:root { --mod-gps: #2f7bff; --mod-mant: var(--plus-vivo); --mod-comb: #f59e0b; --mod-gen: #8b5cf6; --mod: var(--pavo); }
body[data-mod="gps"] { --mod: var(--mod-gps); } body[data-mod="mant"] { --mod: var(--mod-mant); }
body[data-mod="comb"] { --mod: var(--mod-comb); } body[data-mod="gen"] { --mod: var(--mod-gen); }
main::before { content: ""; display: block; height: 3px; margin: 0 calc(-1 * clamp(16px, 3vw, 40px)); background: linear-gradient(90deg, var(--mod), color-mix(in srgb, var(--mod) 20%, transparent)); }
.nav-grupo { --gc: var(--mod-gen); }
.nav-grupo:nth-of-type(1) { --gc: var(--mod-gps); } .nav-grupo.plus { --gc: var(--mod-mant); } .nav-grupo.comb { --gc: var(--mod-comb); }
.nav-grupo .ng-titulo { color: var(--gc); }
.nav-grupo a.nav svg { color: var(--gc); }
.lateral .nav-grupo a.nav.activo { border-left-color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, var(--superficie)); }
.lateral .nav-grupo a.nav:hover svg { transform: scale(1.15) rotate(-6deg); }
.lateral a.nav svg { transition: transform .2s var(--sale); }
.pestanas a.activo { border-bottom-color: var(--pc, var(--mod)); }
.cabecera h1 { position: relative; }
.cab-mod { padding: 14px 18px 14px 14px; border-radius: 16px; background: linear-gradient(110deg, color-mix(in srgb, var(--mod) 14%, var(--superficie)), var(--superficie) 70%);
  border: 1px solid color-mix(in srgb, var(--mod) 25%, var(--borde)); }
.cab-mod .rotulo-mod { color: var(--mod); }
.kpi > div { background: linear-gradient(180deg, color-mix(in srgb, var(--k, transparent) 6%, var(--superficie)), var(--superficie)); }
.tarjeta > h2:first-child, .tarjeta .entre > h2 { color: color-mix(in srgb, var(--mod) 55%, var(--texto)); }
.abajo a.activo { border-top-color: var(--mod); }

.comp-xs { width: 40px; height: 40px; padding: 2px; flex: none; }
.plus-item small .chip { margin-right: 4px; }

/* animaciones de los dibujos por tarea */
.cm-ola, .cm-termo, .cm-hoja, .cm-pastilla-a, .cm-pastilla-b, .cm-cambio, .cm-selector, .cm-medir, .cm-vastago-v, .cm-flechas, .cm-alinea, .cm-rotula, .cm-palanca, .cm-perilla { transform-box: view-box; }
.cm-termo { transform-box: fill-box; transform-origin: bottom center; }
.cm-check { stroke-dasharray: 22; stroke-dashoffset: 0; }
:is(.comp, .mueve):hover .cm-gota, .anima .cm-gota { animation: cm-gota 1.4s ease-in infinite; }
:is(.comp, .mueve):hover .cm-ola, .anima .cm-ola { animation: cm-ola 1.8s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-termo, .anima .cm-termo { animation: cm-termo 1.6s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-aire, .anima .cm-aire { animation: cm-aire 1s linear infinite; }
:is(.comp, .mueve):hover .cm-hoja, .anima .cm-hoja { animation: cm-hoja 1.6s ease-in-out infinite alternate; }
.cm-polen { opacity: .4; } :is(.comp, .mueve):hover .cm-polen, .anima .cm-polen { animation: cm-pulso .7s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-pastilla-a, .anima .cm-pastilla-a { animation: cm-apretar-a 1.3s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-pastilla-b, .anima .cm-pastilla-b { animation: cm-apretar-b 1.3s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-rotula, .anima .cm-rotula { animation: cm-rotula 1.6s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-alinea, .anima .cm-alinea { animation: cm-alinea 2s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-palanca, .anima .cm-palanca { animation: cm-palanca .8s ease-in-out infinite alternate; }
.cm-grasa { opacity: 0; } :is(.comp, .mueve):hover .cm-grasa, .anima .cm-grasa { animation: cm-gota 1.6s ease-in infinite; }
:is(.comp, .mueve):hover .cm-flechas, .anima .cm-flechas { animation: cm-pulso .9s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-cambio, .anima .cm-cambio { animation: cm-cambio 2.4s steps(1) infinite; }
:is(.comp, .mueve):hover .cm-selector, .anima .cm-selector { animation: cm-selector 2.6s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-medir, .anima .cm-medir { animation: cm-medir 1.4s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-check, .anima .cm-check { animation: cm-check 1.6s ease-out infinite; }
:is(.comp, .mueve):hover .cm-vastago-v, .anima .cm-vastago-v { animation: cm-vastago-v .8s ease-in-out infinite alternate; }
:is(.comp, .mueve):hover .cm-perilla, .anima .cm-perilla { animation: cm-volante 1.6s ease-in-out infinite; }
:is(.comp, .mueve):hover .cm-pantalla, .anima .cm-pantalla { animation: cm-pulso .5s steps(2) infinite; }
@keyframes cm-gota { 0% { transform: translateY(-8px); opacity: 0; } 20% { opacity: 1; } 85% { transform: translateY(10px); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes cm-ola { from { transform: translate(-6px, 2px); } to { transform: translate(6px, -3px); } }
@keyframes cm-termo { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
@keyframes cm-aire { from { transform: translateX(-10px); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(14px); opacity: 0; } }
@keyframes cm-hoja { from { transform: translateY(-3px) rotate(-6deg); } to { transform: translateY(3px) rotate(6deg); } }
@keyframes cm-apretar-a { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(2px); } }
@keyframes cm-apretar-b { 0%, 100% { transform: translateX(4px); } 50% { transform: translateX(-2px); } }
@keyframes cm-rotula { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes cm-alinea { 0%, 100% { transform: rotate(-6deg); } 50%, 70% { transform: rotate(0); } }
@keyframes cm-palanca { from { transform: rotate(0); } to { transform: rotate(-24deg); } }
@keyframes cm-cambio { 0% { transform: translate(-20px, -13px); } 25% { transform: translate(-20px, 13px); } 50% { transform: translate(0, -13px); } 75% { transform: translate(20px, 13px); } }
@keyframes cm-selector { 0%, 15% { transform: translateY(0); } 35%, 50% { transform: translateY(20px); } 70%, 100% { transform: translateY(60px); } }
@keyframes cm-medir { from { transform: translateX(6px); } to { transform: translateX(0); } }
@keyframes cm-check { 0% { stroke-dashoffset: 22; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes cm-vastago-v { from { transform: translateY(-8px); } to { transform: translateY(6px); } }

/* demostración pública */
.aviso-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mod, var(--pavo)) 16%, var(--superficie)), var(--superficie));
  border: 1px solid color-mix(in srgb, var(--mod, var(--pavo)) 35%, var(--borde)); font-size: .88rem; }
.aviso-demo b { font: 600 .72rem var(--rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--mod, var(--pavo)); }
.aviso-demo span { flex: 1 1 320px; color: var(--texto-2); }
.demo-entrar { display: block; width: 100%; margin-top: 16px; text-align: center; }
@media (max-width: 600px) { .aviso-demo span { font-size: .8rem; } .aviso-demo .btn { width: 100%; text-align: center; } }