/* ==========================================================================
   Pedagogía Vial · sistema de diseño (v5)
   Paleta: Manual de imagen visual Gobernación de Caldas 2024-2027.
   - Amarillo y naranja son acentos; el rojo solo para errores y alertas.
   - Nunca texto blanco sobre amarillo. Contraste mínimo AA (4,5:1) en todo texto.
   - Motivo gráfico: la señalización vial. Línea discontinua de carril (separador del
     encabezado y marca de los títulos) y esquina cortada tipo placa (logo, indicadores).
     Se usa solo en esos lugares para que conserve su significado.
   Puntos de corte (móvil primero): 480 · 768 · 1100 px.
   ========================================================================== */

/* ---------- 0. Tipografía de títulos (autoalojada, licencia OFL: fonts/OFL.txt) ----------
   Poppins: geométrica y de trazo suave, la más cercana a Isidora Soft / Gold Play del manual,
   que no están disponibles en el proyecto. Recortada a caracteres del español (≈7 KB por peso).
   font-display: swap muestra el texto de inmediato con la fuente del sistema mientras carga. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }

/* ---------- 1. Fichas de diseño (tokens) ---------- */
:root {
  /* Paleta oficial */
  --color-gris: #464444; --color-verde: #007880; --color-turquesa: #028B98;
  --color-amarillo: #FFBB00; --color-naranja: #FF7100; --color-rojo: #E70037;

  /* Modo claro (superficies derivadas del verde y el gris oficiales) */
  --bg: #eef3f3; --sf: #ffffff; --sf2: #e6efef; --sf3: #d8e6e7; --bd: #c9d9da; --bd-fuerte: #8fa9ab;
  --tx: #262525; --mut: #4f5454; --link: #006168; --foco: #00525a;
  --pri: var(--color-verde); --pri-tx: #ffffff; --pri-hov: #00636a; --pri-act: #00545a;
  --ok: #13703e; --ok-bg: #e0f2e8; --warn-tx: #5a3c00; --warn-bg: #fff2cc; --bad: #b5002b; --bad-bg: #fde5eb;
  --ico-acento: var(--color-naranja); --ico-alerta: var(--color-rojo);
  --asfalto: var(--color-gris);
  /* Gráficos del tablero */
  --g-linea: var(--color-verde); --g-ant: var(--bd-fuerte); --g-punto: var(--color-verde);
  --warn-ico: #b84f00; --mv-gris: var(--color-gris); --rk-estrella: #8a5c00;
  --sombra-1: 0 1px 0 rgba(38, 37, 37, .06);
  --sombra-2: 0 18px 40px -18px rgba(20, 40, 42, .45);
  --velo: rgba(30, 40, 41, .5);
  color-scheme: light;

  /* Espaciado (escala de 4 px) */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px;
  /* Radios con intención: pequeño para controles, medio para tarjetas, grande para capas flotantes */
  --radio-xs: 4px; --radio-s: 8px; --radio-m: 14px; --radio-l: 22px; --radio-pill: 999px;
  /* Tipografía fluida */
  --fs-xs: clamp(.75rem, .73rem + .1vw, .8125rem);
  --fs-s: clamp(.8125rem, .79rem + .15vw, .875rem);
  --fs-base: 1rem;
  --fs-m: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-l: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "Poppins", var(--fuente);
  --fuente-placa: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  /* Medidas de la estructura */
  --t: 44px;                         /* zona táctil mínima */
  --alto-top: 60px; --alto-nav: 64px;
  --ancho-rail: 252px;
  --dur: .18s; --curva: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Capas oscuras con tinte verde azulado: no es un gris plano */
    --bg: #111a1b; --sf: #172324; --sf2: #1e2d2f; --sf3: #26393b; --bd: #2f4547; --bd-fuerte: #4d6a6c;
    --tx: #eaf1f1; --mut: #a9babb; --link: #74d0d8; --foco: var(--color-amarillo);
    --pri: var(--color-verde); --pri-tx: #ffffff; --pri-hov: #00666d; --pri-act: #005a60;
    --ok: #6fd69b; --ok-bg: #12301f; --warn-tx: #ffd98a; --warn-bg: #352806; --bad: #ff8aa1; --bad-bg: #3b1320;
    --ico-acento: var(--color-amarillo); --ico-alerta: #ff5c7a;
    --asfalto: #0b1213;
    --g-linea: var(--color-turquesa); --g-ant: #6f8c8e; --g-punto: var(--color-amarillo);
    --warn-ico: var(--color-naranja); --mv-gris: #8e8a8a; --rk-estrella: var(--color-amarillo);
    --sombra-1: 0 1px 0 rgba(0, 0, 0, .3);
    --sombra-2: 0 22px 48px -20px rgba(0, 0, 0, .8);
    --velo: rgba(5, 10, 11, .62);
    color-scheme: dark;
  }
}
@media (min-width: 768px) { :root { --alto-top: 68px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-top) + env(safe-area-inset-top, 0px) + var(--esp-3)); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--tx);
  font: 400 var(--fs-base)/1.5 var(--fuente); overflow-x: hidden;
}
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--link); text-underline-offset: 3px; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--radio-xs); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Íconos: heredan el color del texto; el detalle de acento viene de --ico-acento */
.ico { width: 1.375rem; height: 1.375rem; flex: none; display: inline-block; vertical-align: middle; }

/* ---------- 3. Enlace "Saltar al contenido" ----------
   Fuera de pantalla hasta recibir foco con teclado. No se usa display:none ni visibility:hidden
   (lo harían inaccesible) y aparece por encima de todo sin empujar el diseño (posición absoluta). */
.saltar {
  position: absolute; z-index: 100; left: var(--esp-3); top: calc(var(--esp-2) + env(safe-area-inset-top, 0px));
  transform: translateY(calc(-100% - 40px));
  padding: 10px 18px; border-radius: var(--radio-pill);
  background: var(--color-amarillo); color: #1b1b1b; font-weight: 700; text-decoration: none;
  box-shadow: 0 0 0 3px var(--asfalto), var(--sombra-2);
}
.saltar:focus { transform: none; outline: none; }
.saltar:focus-visible { transform: none; outline: 3px solid var(--color-verde); outline-offset: 2px; }

/* Atajos de teclado: solo en equipos con mouse */
kbd { font: 600 .75rem/1 var(--fuente); border: 1px solid var(--bd); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; background: var(--sf); color: var(--mut); }
.kbd-hint { display: none; }
@media (hover: hover) and (pointer: fine) { .kbd-hint { display: inline; } kbd.kbd-hint { display: inline-block; } }

/* ---------- 4. Formularios ---------- */
label { display: block; font-weight: 600; font-size: var(--fs-s); margin: var(--esp-3) 0 6px; color: var(--mut); }
input:not([type=checkbox]), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font-size: max(16px, 1rem); /* 16 px o más: iOS no hace zoom automático */
  border: 1.5px solid var(--bd-fuerte); border-radius: var(--radio-s); background: var(--sf); color: var(--tx);
  transition: border-color var(--dur), box-shadow var(--dur);
}
input:not([type=checkbox]):hover, select:hover, textarea:hover { border-color: var(--link); }
input:focus, select:focus, textarea:focus { border-color: var(--pri); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 35%, transparent); }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
textarea { resize: vertical; min-height: 88px; }
/* Selector con flecha propia (SVG en data:, permitido por la política de seguridad) */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
@media (prefers-color-scheme: dark) {
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBB00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }
}
select option { background: var(--sf); color: var(--tx); }
input[type=date] { min-width: 0; }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--color-verde); vertical-align: middle; margin: 0; }
.chk { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--tx); font-weight: 500; font-size: var(--fs-s); min-height: var(--t); cursor: pointer; }
.ayuda { color: var(--mut); font-size: var(--fs-s); margin: 4px 0 8px; }
.cnt { text-align: right; color: var(--mut); font-size: var(--fs-xs); margin-top: 4px; }
.err { color: var(--bad); font-size: var(--fs-s); min-height: 1.3em; margin: 6px 0; }

/* ---------- 5. Botones: normal, hover, foco, activo, deshabilitado y cargando ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  width: 100%; min-height: 52px; padding: 12px 20px; margin-top: var(--esp-3);
  border: 0; border-radius: var(--radio-s); background: var(--pri); color: var(--pri-tx);
  font-weight: 700; font-size: 1.0625rem; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), transform var(--dur) var(--curva);
}
.btn:hover { background: var(--pri-hov); }
.btn:active { background: var(--pri-act); transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn .ico { width: 1.25rem; height: 1.25rem; }
.btn.sec {
  width: auto; min-height: var(--t); margin: 0; padding: 8px 16px; font-size: .9375rem;
  background: var(--sf2); color: var(--link); border: 1.5px solid var(--bd);
}
.btn.sec:hover { background: var(--sf3); border-color: var(--link); }
.btn.sec:active { background: var(--sf3); }
.btn.sec:disabled:hover { background: var(--sf2); border-color: var(--bd); }
.btn.peligro, .btn.sec.peligro { color: var(--bad); }
.btn.sec.peligro:hover { border-color: var(--bad); }
/* Cargando: el botón conserva su tamaño y muestra un indicador giratorio en lugar del texto */
.btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"] .ico { opacity: 0; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--pri-tx); border-right-color: transparent; animation: girar .7s linear infinite;
}
.btn.sec[aria-busy="true"]::after { border-color: var(--link); border-right-color: transparent; }
@keyframes girar { to { transform: rotate(360deg); } }

.back, .lnk {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--link);
  font-weight: 600; cursor: pointer; min-height: var(--t); padding: 6px 8px; border-radius: var(--radio-s);
  transition: background-color var(--dur);
}
.back { margin-top: var(--esp-2); margin-left: -8px; font-size: .9375rem; }
.back .ico { width: 1.125rem; height: 1.125rem; }
.back:hover, .lnk:hover { background: var(--sf2); }
.lnk { text-decoration: underline; text-underline-offset: 3px; min-width: var(--t); justify-content: center; }

/* ---------- 6. Acceso ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--esp-4); padding-top: calc(var(--esp-4) + env(safe-area-inset-top, 0px)); outline: none; }
.login-card { width: 100%; max-width: 420px; padding: var(--esp-5); border-top: 4px solid var(--color-amarillo); }
.marca-g { margin: 0 auto var(--esp-4); padding: 10px 16px; width: fit-content; }
.login-logo { height: 72px; width: auto; display: block; }
.login-t { text-align: center; font-size: var(--fs-l); }
.login-s { text-align: center; color: var(--mut); margin: 2px 0 var(--esp-2); font-size: var(--fs-s); }

/* ---------- 7. Encabezado ---------- */
/* El logo va sobre una placa blanca con esquinas cortadas (motivo placa); el logo no se altera. */
.marca {
  flex: none; background: #fff; padding: 5px 9px; line-height: 0;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--esp-2);
  min-height: calc(var(--alto-top) + env(safe-area-inset-top, 0px));
  padding: calc(var(--esp-2) + env(safe-area-inset-top, 0px)) max(var(--esp-3), env(safe-area-inset-right, 0px)) var(--esp-2) max(var(--esp-3), env(safe-area-inset-left, 0px));
  background: var(--sf);
}
/* Separador: franja de asfalto con línea discontinua amarilla de carril */
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--color-amarillo) 0 26px, transparent 26px 44px) center / 100% 2px no-repeat,
    var(--asfalto);
}
.logo { height: 38px; width: auto; display: block; }
.top-t { display: none; flex-direction: column; line-height: 1.15; min-width: 0; }
.top-t b { font-size: var(--fs-m); letter-spacing: -.01em; white-space: nowrap; }
.top-t span { color: var(--mut); font-size: var(--fs-xs); white-space: nowrap; }

/* Estado de conexión ("Modo local", "Sin conexión", "Todo sincronizado"…) */
.st-btn, .user-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--t); min-width: var(--t);
  border: 1.5px solid var(--bd); background: var(--sf2); color: var(--tx); border-radius: var(--radio-pill);
  padding: 6px 12px; cursor: pointer; font-size: var(--fs-s); font-weight: 600;
  transition: background-color var(--dur), border-color var(--dur);
}
.st-btn:hover, .user-btn:hover { border-color: var(--link); background: var(--sf3); }
.st-btn:active, .user-btn:active { transform: translateY(1px); }
.st-btn { margin-left: auto; min-width: 0; max-width: 56vw; }
.st-btn #st-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ico { display: inline-flex; }
.st-ico .ico { width: 1.25rem; height: 1.25rem; display: none; }
.st-btn[data-estado="ok"] .st-on, .st-btn[data-estado="sync"] .st-on, .st-btn[data-estado="bad"] .st-on,
.st-btn:not([data-estado]) .st-on, .st-btn[data-estado="off"] .st-off, .st-btn[data-estado="local"] .st-local { display: inline-block; }
.st-btn[data-estado="off"] { color: var(--mut); }
.dot { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--mut); }
.dot-ok { background: #2bb06a; } .dot-off { background: transparent; border: 2px solid var(--mut); }
.dot-sync { background: var(--color-turquesa); } .dot-bad { background: var(--color-rojo); } .dot-local { background: var(--color-naranja); }
/* Punto animado: pulso suave (desactivado si el equipo pide menos movimiento) */
.dot-ok::after, .dot-sync::after, .dot-local::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.dot-ok::after { color: #2bb06a; animation: pulso 2.4s ease-out infinite; }
.dot-local::after { color: var(--color-naranja); animation: pulso 3.2s ease-out infinite; }
.dot-sync::after { color: var(--color-turquesa); animation: pulso 1s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* Botón "Menú": hamburguesa hecha solo con CSS que se convierte en X al abrir */
.user-btn { padding: 6px 12px; }
.user-btn #user-cod { display: none; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hamb { position: relative; width: 20px; height: 14px; flex: none; }
.hamb i, .hamb::before, .hamb::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .22s var(--curva), opacity .15s, top .22s var(--curva), width .22s var(--curva);
}
.hamb::before { top: 0; } .hamb i { top: 6px; } .hamb::after { top: 12px; width: 65%; }
.user-btn[aria-expanded="true"] { border-color: var(--color-amarillo); }
.user-btn[aria-expanded="true"] .hamb::before { top: 6px; transform: rotate(45deg); }
.user-btn[aria-expanded="true"] .hamb i { opacity: 0; }
.user-btn[aria-expanded="true"] .hamb::after { top: 6px; width: 100%; transform: rotate(-45deg); }

@media (min-width: 480px) {
  .top-t { display: flex; }
  .top-t span { display: none; }
  .user-btn #user-cod { display: inline; }
}
@media (min-width: 768px) {
  .top { gap: var(--esp-3); padding-left: max(var(--esp-5), env(safe-area-inset-left, 0px)); padding-right: max(var(--esp-5), env(safe-area-inset-right, 0px)); }
  .logo { height: 46px; }
  .top-t { padding-left: var(--esp-3); border-left: 1px solid var(--bd); }
  .top-t span { display: block; }
  .st-btn { max-width: 340px; }
}

/* ---------- 8. Navegación principal ---------- */
/* Móvil: barra inferior fija, al alcance del pulgar */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 2px;
  background: var(--sf); border-top: 1px solid var(--bd);
  padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
}
.nav button {
  flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; color: var(--mut); cursor: pointer; border-radius: var(--radio-s); font-size: .6875rem; padding: 4px 2px;
  transition: color var(--dur), background-color var(--dur);
}
/* El ícono va dentro de una pastilla que se colorea en la sección activa */
.nav button .ico { width: 3rem; height: 1.75rem; padding: 2px 0; border-radius: var(--radio-pill); transition: background-color var(--dur), transform var(--dur) var(--curva); }
.nav button b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav button:hover { color: var(--tx); }
.nav button:active .ico { transform: scale(.94); }
.nav button[aria-current] { color: var(--tx); }
.nav button[aria-current] b { font-weight: 750; }
.nav button[aria-current] .ico { background: color-mix(in srgb, var(--color-verde) 30%, transparent); color: var(--link); }
/* En celular "Administrar" vive en el menú lateral: la barra inferior queda con las 5 secciones */
.nav [data-view="adm"] { display: none; }
.rail { display: contents; }

/* ---------- 9. Menú lateral (panel secundario) ---------- */
.panel {
  position: fixed; z-index: 40; top: calc(var(--alto-top) + env(safe-area-inset-top, 0px) + 6px); right: 0; bottom: 0;
  width: min(340px, 88vw); overflow-y: auto; overscroll-behavior: contain;
  background: var(--sf); border-left: 1px solid var(--bd); box-shadow: var(--sombra-2);
  border-radius: var(--radio-l) 0 0 0;
  padding: var(--esp-4) max(var(--esp-4), env(safe-area-inset-right, 0px)) calc(var(--esp-4) + env(safe-area-inset-bottom, 0px)) var(--esp-4);
  transform: translateX(105%); visibility: hidden;
  transition: transform .26s var(--curva), visibility 0s linear .26s;
}
.menu-abierto .panel { transform: none; visibility: visible; transition: transform .26s var(--curva), visibility 0s; }
/* El velo empieza bajo el encabezado: así el botón "Menú" (que ahora es una X) sigue al alcance para cerrar */
.velo { position: fixed; inset: calc(var(--alto-top) + env(safe-area-inset-top, 0px) + 6px) 0 0 0; z-index: 35; background: var(--velo); }
@media (prefers-reduced-motion: no-preference) { .velo:not([hidden]) { animation: aparecer .2s ease-out; } }
@keyframes aparecer { from { opacity: 0; } }
.panel-cab { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-3); border-radius: var(--radio-m); background: var(--sf2); margin-bottom: var(--esp-3); }
.panel-cab > .ico { width: 2.25rem; height: 2.25rem; padding: 6px; border-radius: 50%; background: var(--sf); color: var(--link); }
#panel-cuenta { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-s); }
#panel-cuenta b { font-size: var(--fs-base); overflow-wrap: anywhere; }
#panel-cuenta span { color: var(--mut); overflow-wrap: anywhere; }
.panel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.panel-lista button {
  display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: 48px; padding: 10px var(--esp-3);
  border: 0; border-radius: var(--radio-s); background: none; color: var(--tx); text-align: left; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur), color var(--dur);
}
.panel-lista button:hover { background: var(--sf2); }
.panel-lista button:active { background: var(--sf3); }
.panel-lista button .ico { color: var(--mut); }
.panel-lista .peligro, .panel-lista .peligro .ico { color: var(--bad); }
#panel-salir { margin-top: var(--esp-2); padding-top: var(--esp-2); border-top: 1px dashed var(--bd); }

/* ---------- 10. Área de contenido ---------- */
.main {
  padding: var(--esp-5) max(var(--esp-3), env(safe-area-inset-right, 0px)) calc(var(--alto-nav) + var(--esp-6) + env(safe-area-inset-bottom, 0px)) max(var(--esp-3), env(safe-area-inset-left, 0px));
  max-width: 1180px; margin: 0 auto; outline: none; min-width: 0;
}
/* Título de sección con marca de carril (tres trazos amarillos) */
.vt { font-size: var(--fs-xl); font-weight: 800; margin: 0 2px var(--esp-4); padding-bottom: var(--esp-3); position: relative; }
.vt::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--color-amarillo) 0 16px, transparent 16px 24px);
}
.vt:focus, .vt:focus-visible { outline: none; }

/* Tableta: navegación superior horizontal bajo el encabezado */
@media (min-width: 768px) {
  .nav {
    position: sticky; top: calc(var(--alto-top) + env(safe-area-inset-top, 0px) + 6px); bottom: auto; z-index: 25;
    justify-content: center; gap: var(--esp-1); border-top: 0; border-bottom: 1px solid var(--bd);
    padding: var(--esp-2) var(--esp-5);
  }
  .nav [data-view="adm"]:not([hidden]) { display: flex; }
  .panel .p-adm { display: none; }
  .nav button { flex: 0 1 auto; flex-direction: row; gap: var(--esp-2); min-height: var(--t); padding: 6px 14px; font-size: .9375rem; }
  .nav button .ico { width: 1.375rem; height: 1.375rem; padding: 0; background: none !important; }
  .nav button:hover { background: var(--sf2); }
  .nav button[aria-current] { background: var(--sf2); box-shadow: inset 0 -3px 0 var(--color-amarillo); }
  .nav button[aria-current] .ico { color: var(--link); }
  .main { padding: var(--esp-6) var(--esp-5) var(--esp-7); }
}

/* PC: barra lateral fija con la navegación y el menú secundario; el botón "Menú" ya no hace falta */
@media (min-width: 1100px) {
  .shell { display: grid; grid-template-columns: var(--ancho-rail) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100dvh; }
  .top { grid-column: 1 / -1; }
  .user-btn { display: none; }
  .rail {
    display: flex; flex-direction: column; gap: var(--esp-4);
    position: sticky; top: calc(var(--alto-top) + 6px); align-self: start;
    height: calc(100vh - var(--alto-top) - 6px); height: calc(100dvh - var(--alto-top) - 6px);
    overflow-y: auto; padding: var(--esp-5) var(--esp-3) var(--esp-4); border-right: 1px solid var(--bd); background: var(--sf);
  }
  .nav { position: static; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; }
  .nav button { justify-content: flex-start; gap: var(--esp-3); min-height: 48px; padding: 8px 14px; }
  .nav button[aria-current] { background: var(--sf2); box-shadow: inset 4px 0 0 var(--color-amarillo); }
  .panel {
    position: static; transform: none; visibility: visible; transition: none; width: auto; margin-top: auto; overflow: visible;
    box-shadow: none; border: 0; border-radius: 0; padding: var(--esp-4) 0 0; border-top: 1px dashed var(--bd); background: none;
  }
  .panel-cab { padding: var(--esp-2) var(--esp-3); background: none; margin-bottom: var(--esp-1); }
  .panel-cab > .ico { width: 1.75rem; height: 1.75rem; padding: 4px; background: var(--sf2); }
  .panel-lista button { min-height: var(--t); font-size: var(--fs-s); color: var(--mut); }
  .panel-lista button:hover { color: var(--tx); }
  .velo { display: none !important; }
  .main { padding: var(--esp-6) clamp(24px, 3vw, 48px) var(--esp-7); margin: 0; width: 100%; max-width: 1240px; }
}

/* ---------- 11. Tarjetas, avisos e insignias ---------- */
.card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radio-m); padding: var(--esp-4); margin-bottom: var(--esp-4); box-shadow: var(--sombra-1); }
@media (min-width: 768px) { .card { padding: var(--esp-5); } }
/* Tarjeta de filtros: franja superior verde para separarla de los resultados */
.card-filtros { border-top: 3px solid var(--color-verde); padding-top: var(--esp-2); }
@media (min-width: 768px) { .card-filtros { padding-top: var(--esp-3); } }
.h2c { font-size: var(--fs-m); font-weight: 700; margin-bottom: var(--esp-3); }
.h3 { font-size: .9375rem; margin: var(--esp-4) 0 6px; color: var(--mut); }
.aviso { border-radius: var(--radio-s); padding: 10px 14px; margin: 0 0 var(--esp-3); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.aviso-warn { background: var(--warn-bg); color: var(--warn-tx); border-left: 4px solid var(--color-naranja); }
.aviso-bad { background: var(--bad-bg); color: var(--bad); border-left: 4px solid var(--color-rojo); }
.tag { display: inline-block; font-size: var(--fs-xs); padding: 2px 10px; border-radius: var(--radio-pill); font-weight: 700; white-space: nowrap; }
.t-ok { background: var(--ok-bg); color: var(--ok); } .t-pend { background: var(--warn-bg); color: var(--warn-tx); }
.t-bad { background: var(--bad-bg); color: var(--bad); } .t-anul { background: var(--sf2); color: var(--mut); text-decoration: line-through; }
.t-on { background: color-mix(in srgb, var(--color-verde) 22%, transparent); color: var(--link); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 0 0 12px; border-radius: var(--radio-pill); background: var(--sf2); border: 1px solid var(--bd); font-size: var(--fs-s); font-weight: 600; }
.chip button { display: grid; place-items: center; border: 0; background: none; cursor: pointer; width: var(--t); height: var(--t); border-radius: 50%; color: var(--mut); }
.chip button:hover { background: var(--sf3); color: var(--tx); }
.chip button .ico { width: 1.125rem; height: 1.125rem; }
.chip-warn { background: var(--sf); padding: 3px 10px; border: 1px solid currentColor; }
.mut { color: var(--mut); font-size: .9375rem; }

/* Estado vacío con ilustración (vía en perspectiva con un cono) */
.vacio { display: grid; justify-items: center; gap: var(--esp-3); text-align: center; color: var(--mut); padding: var(--esp-6) var(--esp-4); background: var(--sf); border: 1.5px dashed var(--bd); border-radius: var(--radio-m); }
.vacio p { max-width: 44ch; }
.vacio .il { width: 140px; height: 88px; color: var(--bd-fuerte); --ico-alerta: var(--color-naranja); }

/* ---------- 12. Barra de jornada ----------
   Tarjeta con jerarquía: estado de la jornada y de la conexión arriba, municipio grande,
   datos en rejilla y pie con la nota de conexión y la acción. La franja izquierda cambia según
   el estado: verde (abierta hoy), naranja discontinua tipo señal de obra (sin cerrar), gris (sin jornada). */
.jbar {
  position: relative; display: grid; gap: var(--esp-2); margin-bottom: var(--esp-4);
  padding: var(--esp-4) var(--esp-4) var(--esp-4) calc(var(--esp-4) + 6px);
  background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radio-m); box-shadow: var(--sombra-1); overflow: hidden;
}
.jbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--bd-fuerte); }
.jbar-hoy::before { background: var(--color-verde); }
.jbar-vieja { background: var(--warn-bg); border-color: color-mix(in srgb, var(--color-naranja) 45%, var(--bd)); }
.jbar-vieja::before { background: repeating-linear-gradient(180deg, var(--color-naranja) 0 12px, var(--color-gris) 12px 20px); }
.jbar-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.jbar-est { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); font-weight: 700; color: var(--mut); }
.jbar-est .ico { width: 1.125rem; height: 1.125rem; }
.jbar-hoy .jbar-est { color: var(--link); }
.jbar-vieja .jbar-est { color: var(--warn-tx); }
/* Insignia de conexión: icono + texto (el color nunca es la única señal) */
.jbar-red { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--radio-pill); font-size: var(--fs-xs); font-weight: 700; border: 1px solid currentColor; }
.jbar-red .ico { width: 1rem; height: 1rem; }
.red-ok { color: var(--ok); background: var(--ok-bg); }
.red-pend { color: var(--link); background: color-mix(in srgb, var(--color-verde) 14%, transparent); }
.red-off { color: var(--mut); background: var(--sf2); }
.red-local { color: var(--warn-tx); background: var(--warn-bg); }
.red-ses { color: var(--warn-tx); background: var(--warn-bg); }
.red-bad { color: var(--bad); background: var(--bad-bg); }
.jbar-mun { font-family: var(--fuente-titulo); font-weight: 700; font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; }
.jbar-guia { font-family: var(--fuente-titulo); font-weight: 500; font-size: var(--fs-m); line-height: 1.35; }
.jbar-aviso { color: var(--warn-tx); font-weight: 600; font-size: .9375rem; }
.jbar-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); margin: var(--esp-1) 0 0; }
.jbar-datos > div { background: var(--bg); border-radius: var(--radio-s); padding: 8px 12px; min-width: 0; }
.jbar-vieja .jbar-datos > div { background: var(--sf); }
.jbar-datos dt { font-size: var(--fs-xs); color: var(--mut); }
.jbar-datos dd { margin: 0; font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* El contador usa la fuente del sistema con cifras tabulares: Poppins tiene cifras proporcionales
   y el número "bailaría" al cambiar cada segundo. */
.jbar-tiempo dd { font-family: var(--fuente); font-size: 1.25rem; letter-spacing: .02em; }
.jbar-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); }
.jbar-nota { color: var(--mut); font-size: var(--fs-s); flex: 1 1 260px; }
.jbar-vieja .jbar-nota { color: var(--warn-tx); }
.jbar-pie .btn.sec { flex: none; }
@media (max-width: 479px) { .jbar-pie .btn.sec { width: 100%; } }
@media (min-width: 768px) { .jbar-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Jornadas bajo cada municipio y día (Registros, vista agrupada) */
.g-jor { list-style: none; margin: 0 0 var(--esp-2); padding: 0; display: grid; gap: 6px; }
.jor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--esp-4); padding: 8px 12px; border-radius: var(--radio-s);
  background: var(--sf); border: 1px dashed var(--bd-fuerte); font-size: var(--fs-s); }
.jor-abierta { border-style: solid; border-color: var(--color-verde); }
.jor-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--link); }
.jor-t .ico { width: 1rem; height: 1rem; }
.jor-d { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jor-d small { color: var(--mut); font-weight: 500; }
.jor-l { color: var(--mut); font-weight: 500; }
@media (max-width: 479px) { .jor { display: grid; grid-template-columns: 1fr 1fr; } .jor-t { grid-column: 1 / -1; } .jor-d { white-space: normal; } }

/* ---------- 13. Formulario por pasos ---------- */
.steps { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0 0 var(--esp-5); }
.sp { flex: 1; text-align: center; font-size: var(--fs-xs); color: var(--mut); position: relative; min-width: 0; }
.sp span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp > i, .sp > button { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 4px; border-radius: 50%; background: var(--sf2); font-style: normal; font-weight: 800; position: relative; z-index: 1; border: 2px solid var(--bd); color: var(--tx); }
/* El paso completado se puede tocar para volver: la zona táctil se amplía sin cambiar el dibujo */
.sp > button { background: var(--color-verde); border-color: var(--color-verde); color: #fff; cursor: pointer; }
.sp > button::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.sp > button:hover { background: var(--pri-hov); }
.sp > button .ico { width: 1.125rem; height: 1.125rem; }
/* Conector entre pasos: línea discontinua que se vuelve continua al avanzar */
.sp::before { content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--bd-fuerte) 0 6px, transparent 6px 10px); }
.sp:first-child::before { display: none; }
.sp.done::before, .sp.cur::before { background: var(--color-verde); }
.sp.cur { color: var(--tx); font-weight: 700; }
.sp.cur > i { background: var(--color-amarillo); border-color: var(--color-amarillo); color: #1b1b1b; }
.step { display: none; } .step.on { display: block; }
@media (prefers-reduced-motion: no-preference) { .step.on { animation: entrar .22s var(--curva); } }
@keyframes entrar { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.step h2 { font-size: var(--fs-l); font-weight: 750; }
/* Título de paso con carácter propio. Reutilizable: hoy solo lo usa el paso 1.
   Detalle gráfico: una señal de "pare" mínima — barra amarilla oficial a la izquierda. */
.step h2.titulo-paso {
  font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: -.015em; line-height: 1.15;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); color: var(--tx); text-wrap: balance;
  position: relative; padding-left: 18px; margin-top: var(--esp-1);
}
.step h2.titulo-paso::before {
  content: ""; position: absolute; left: 0; top: .14em; bottom: .14em; width: 6px; border-radius: 3px;
  background: linear-gradient(var(--color-amarillo) 0 62%, transparent 62% 72%, var(--color-amarillo) 72%);
}
.sub { color: var(--mut); font-size: .9375rem; margin: 4px 0 var(--esp-4); }

/* Dos columnas desde 300 px: en campo los 15 municipios caben con poco desplazamiento */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap: var(--esp-2); }
/* En celular: letra e insignia más compactas para que el nombre más largo ("Marquetalia") quepa
   entero en 2 columnas desde 320 px. Las palabras nunca se parten: solo se pasa de línea entre
   palabras ("San José", "La Merced"). */
@media (max-width: 479px) { #muns .tile { padding: 10px 8px; gap: 7px; font-size: .875rem; } #muns .tile b { min-width: 26px; height: 26px; font-size: .6875rem; } }
@media (min-width: 480px) { #muns { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
#muns .t-nom { min-width: 0; overflow-wrap: normal; word-break: keep-all; hyphens: none; line-height: 1.25; }
.tile {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; position: relative;
  border: 1.5px solid var(--bd); border-radius: var(--radio-s); background: var(--sf); color: var(--tx);
  cursor: pointer; text-align: left; font-weight: 600; font-size: .9375rem;
  transition: border-color var(--dur), background-color var(--dur), transform var(--dur) var(--curva);
}
.tile:hover { border-color: var(--link); background: var(--sf2); }
.tile:active { transform: scale(.985); }
.tile:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.tile b { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: var(--radio-xs); background: var(--color-verde); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; }
.tile.on { border-color: var(--color-amarillo); background: var(--sf2); box-shadow: inset 0 0 0 1px var(--color-amarillo); }
.tile kbd { position: absolute; top: 6px; right: 6px; }
.big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.big .tile { flex-direction: column; justify-content: center; gap: var(--esp-2); padding: 18px 8px; text-align: center; font-size: 1.0625rem; min-height: 120px; }
.big .ico-tile { width: 3rem; height: 3rem; color: var(--link); }
.mot { display: grid; gap: var(--esp-2); }
.mot .tile { min-height: 60px; }
.t-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radio-s); background: var(--sf2); color: var(--link); transition: background-color var(--dur); }
.mot .tile:hover .t-ico { background: var(--sf); }
@media (min-width: 768px) { .mot { grid-template-columns: 1fr 1fr; } .big { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* La placa: amarillo oficial con texto negro, al estilo de la placa colombiana */
.plate { background: var(--color-amarillo); border: 4px solid #1a1a1a; border-radius: 12px; padding: 6px 10px 10px; max-width: 340px; margin: 6px auto 4px; text-align: center; box-shadow: 0 4px 0 #a87800; }
.plate small { display: block; color: #1a1a1a; font-weight: 800; letter-spacing: 4px; font-size: .625rem; }
.plate input { width: 100%; border: 0; background: transparent; text-align: center; text-transform: uppercase; font: 800 clamp(2.2rem, 1.8rem + 2vw, 2.75rem)/1.1 var(--fuente-placa); letter-spacing: 6px; color: #111; padding: 0; min-height: 0; box-shadow: none !important; }
.plate input:focus, .plate input:focus-visible { outline: none; }
.plate:focus-within { outline: 3px solid var(--foco); outline-offset: 4px; }
.plate input::placeholder { color: rgba(0, 0, 0, .32); }
.pmsg { text-align: center; font-size: .9375rem; min-height: 2.6em; margin: 6px 0; color: var(--mut); }
.pmsg.good { color: var(--ok); } .pmsg.bad { color: var(--bad); } .pmsg.warn { color: var(--warn-tx); background: var(--warn-bg); border-radius: var(--radio-s); padding: 6px; }
.okmsg { display: flex; align-items: center; gap: var(--esp-2); background: var(--ok-bg); color: var(--ok); border-radius: var(--radio-s); padding: 8px 12px; font-weight: 600; margin-bottom: var(--esp-2); }
.okmsg .ico { width: 1.25rem; height: 1.25rem; }
.rapido { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--t); margin-top: var(--esp-2); padding: 8px 12px; border: 1.5px dashed var(--bd-fuerte); border-radius: var(--radio-s); background: none; color: var(--tx); text-align: left; cursor: pointer; font-size: .875rem; transition: border-color var(--dur), background-color var(--dur); }
.rapido:hover { border-color: var(--link); }
.rapido .sw { flex: none; width: 38px; height: 22px; border-radius: var(--radio-pill); background: var(--bd); position: relative; transition: background-color var(--dur); }
.rapido .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sf); transition: left var(--dur) var(--curva); }
.rapido[aria-pressed="true"] { border-style: solid; border-color: var(--color-verde); background: var(--sf2); }
.rapido[aria-pressed="true"] .sw { background: var(--color-verde); }
.rapido[aria-pressed="true"] .sw::after { left: 19px; }
.rapido kbd { margin-left: auto; }

.sum { display: grid; gap: 6px; margin-bottom: 10px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg); border-radius: var(--radio-s); font-size: .9375rem; }
.sum span { color: var(--mut); } .sum b { text-align: right; overflow-wrap: anywhere; }

/* ---------- 14. Filtros ---------- */
/* Filtro principal de Registros: municipio → alcance de jornadas → resumen */
.f-bloque { margin-bottom: var(--esp-3); }
.f-tit { font-weight: 700; font-size: var(--fs-s); color: var(--mut); margin: var(--esp-2) 0 6px; }
/* Municipios: en celular una fila deslizable (no ensancha la página); desde 768 px, rejilla que envuelve */
.chips-mun { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: 3px 3px 8px; margin: 0 -3px; scrollbar-width: thin; }
@media (min-width: 768px) { .chips-mun { flex-wrap: wrap; overflow: visible; padding-bottom: 3px; } }
.chip-mun { flex: none; scroll-snap-align: start; min-height: var(--t); padding: 8px 14px; border-radius: var(--radio-pill);
  border: 1.5px solid var(--bd); background: var(--sf); color: var(--tx); font-weight: 600; font-size: .9375rem; cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur), background-color var(--dur); }
.chip-mun:hover { border-color: var(--link); background: var(--sf2); }
.chip-mun[aria-checked="true"] { background: var(--pri); border-color: var(--pri); color: var(--pri-tx); }
/* Control segmentado del alcance: 2×2 en celular, una fila desde 480 px */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radio-s); background: var(--sf2); border: 1px solid var(--bd); }
@media (min-width: 480px) { .seg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.seg button { min-height: var(--t); border: 0; border-radius: 6px; background: none; color: var(--tx); font-weight: 600; font-size: .9375rem; cursor: pointer; padding: 6px 8px; transition: background-color var(--dur); }
.seg button:hover { background: var(--sf3); }
.seg button[aria-checked="true"] { background: var(--sf); color: var(--link); box-shadow: inset 0 -3px 0 var(--color-amarillo), 0 1px 2px rgba(0, 0, 0, .15); }
/* Lista "Una jornada" */
.jlista { display: grid; gap: 6px; margin-top: var(--esp-2); max-height: min(320px, 50dvh); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
@media (min-width: 768px) { .jlista { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.jop { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; min-height: var(--t); padding: 8px 12px; border-radius: var(--radio-s);
  border: 1.5px solid var(--bd); background: var(--sf); color: var(--tx); cursor: pointer; font-size: var(--fs-s); transition: border-color var(--dur); }
.jop:hover { border-color: var(--link); }
.jop[aria-checked="true"] { border-color: var(--color-verde); box-shadow: inset 4px 0 0 var(--color-verde); background: var(--sf2); }
.jop-f { font-weight: 700; font-size: .9375rem; }
.jop-h { color: var(--mut); font-variant-numeric: tabular-nums; }
.jop-r { color: var(--mut); text-align: right; }
.jop-n { text-align: right; }
/* Resumen vivo del alcance */
.f-resumen { margin: var(--esp-2) 0 var(--esp-3); padding: 8px 12px; border-radius: var(--radio-s); background: var(--bg); font-weight: 600; font-size: .9375rem; border-left: 4px solid var(--color-amarillo); }
.mas .chk { margin-top: var(--esp-2); }
/* Jornadas: mes del informe PDF y botón (en celular, uno debajo del otro y a todo el ancho) */
.j-informe { display: grid; gap: var(--esp-2) var(--esp-3); align-items: end; margin-top: var(--esp-3); padding-top: var(--esp-3); border-top: 1px dashed var(--bd); }
.j-informe label { margin-top: 0; }
.j-informe .btn.sec { width: 100%; }
@media (min-width: 480px) { .j-informe { grid-template-columns: minmax(0, 220px) auto; justify-content: start; } .j-informe .btn.sec { width: auto; min-height: 48px; } }
input[type=month] { min-width: 0; }
.filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--esp-3); }
@media (min-width: 480px) { .filtros { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); } }
.f-placa input { text-transform: uppercase; }
.mas { margin: var(--esp-2) 0 0; }
.mas summary { cursor: pointer; min-height: var(--t); display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--link); border-radius: var(--radio-s); padding: 0 8px; margin-left: -8px; list-style: none; }
.mas summary::-webkit-details-marker { display: none; }
.mas summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur); }
.mas[open] summary::before { transform: rotate(45deg); }
.mas summary:hover { background: var(--sf2); }
.mas summary span { color: var(--warn-tx); font-weight: 600; }
.f-acc { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin: var(--esp-3) 0 0; }
.f-acc .sep { flex: 1; }
@media (max-width: 479px) { .f-acc .btn.sec { flex: 1 1 auto; } .f-acc .sep { display: none; } }
.l-info { margin: 0 2px var(--esp-2); font-size: var(--fs-s); }

/* ---------- 15. Tablas (en celular y tableta se vuelven tarjetas apiladas) ---------- */
.tbl { max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { padding: 10px; border-bottom: 1px solid var(--bd); text-align: left; vertical-align: top; }
th { color: var(--mut); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; }
td.wrap { white-space: normal; overflow-wrap: anywhere; }
tr.anulada td { color: var(--mut); }
tr.anulada .pl { text-decoration: line-through; }
.pl { display: inline-block; background: var(--color-amarillo); color: #111; border: 2px solid #1a1a1a; border-radius: var(--radio-xs); padding: 0 6px; font: 800 .8125rem/1.5 var(--fuente-placa); letter-spacing: 1.5px; white-space: nowrap; }
.g-mun { font-size: var(--fs-m); font-weight: 750; margin: var(--esp-5) 0 var(--esp-1); padding-bottom: 4px; border-bottom: 3px solid var(--color-amarillo); display: inline-block; }
.g-mun:first-child { margin-top: 0; }
.g-dia { font-size: .875rem; color: var(--link); margin: var(--esp-3) 0 var(--esp-2); }
.pag { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--esp-4); }
.pag button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: var(--t); min-height: var(--t); border: 1.5px solid var(--bd); background: var(--sf); color: var(--tx); border-radius: var(--radio-s); cursor: pointer; padding: 0 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pag button:hover:not(:disabled) { border-color: var(--link); }
.pag button .ico { width: 1.125rem; height: 1.125rem; }
.pag button.on { background: var(--pri); color: var(--pri-tx); border-color: var(--pri); }
.pag button:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 479px) { .pag button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

@media (max-width: 899px) {
  table.resp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.resp, table.resp tbody { display: block; width: 100%; }
  table.resp tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; border: 1px solid var(--bd); border-radius: var(--radio-m); margin-bottom: var(--esp-2); padding: var(--esp-3) var(--esp-4); background: var(--sf); }
  table.resp td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; flex: 1 1 100%; min-width: 0; }
  table.resp td[data-l]::before { content: attr(data-l); color: var(--mut); font-size: var(--fs-xs); flex: none; }
  table.resp td.wrap { text-align: right; }
  table.resp td:not([data-l]) { justify-content: flex-end; border-top: 1px dashed var(--bd); margin-top: 6px; padding-top: 6px; }
  /* Registros: la placa y el estado encabezan la tarjeta */
  #lista table.resp td[data-l="Placa"], #lista table.resp td[data-l="Estado"] { order: -1; padding-bottom: 8px; }
  #lista table.resp td[data-l="Placa"] { flex: 1 1 auto; }
  #lista table.resp td[data-l="Estado"] { flex: 0 0 auto; }
  #lista table.resp td[data-l="Placa"]::before, #lista table.resp td[data-l="Estado"]::before { display: none; }
  #lista table.resp td[data-l="Placa"] .pl { font-size: 1rem; padding: 1px 10px; }
}
@media (min-width: 900px) {
  .tbl { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radio-m); overflow: hidden; }
  .tbl table th { background: var(--sf2); }
  .tbl tbody tr:last-child td { border-bottom: 0; }
  .tbl tbody tr:hover td { background: color-mix(in srgb, var(--sf2) 60%, transparent); }
  .card .tbl { border-radius: var(--radio-s); }
}

/* ---------- 16. Tablero y gráficos ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-4); }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
/* Indicador: esquina superior derecha cortada, como una placa */
.kpi {
  background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radio-m); padding: var(--esp-4); border-top: 4px solid var(--color-verde);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.kpi:nth-child(2) { border-top-color: var(--color-turquesa); } .kpi:nth-child(3) { border-top-color: var(--color-amarillo); } .kpi:nth-child(4) { border-top-color: var(--color-gris); } .kpi:nth-child(5) { border-top-color: var(--color-naranja); }
.kpi b { display: block; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--mut); font-size: var(--fs-s); }
.dash { display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tc.ancho { grid-column: 1 / -1; } }
.tc { margin: 0; min-width: 0; }
.alertas { display: flex; flex-wrap: wrap; gap: 6px; }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; gap: 3px 10px; font-size: .875rem; }
.b-l { grid-area: l; overflow-wrap: anywhere; } .b-v { grid-area: v; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .b-v small { color: var(--mut); font-weight: 500; }
.b-t { grid-area: t; height: 10px; background: var(--sf2); border-radius: var(--radio-pill); overflow: hidden; }
.b-f { display: block; height: 100%; background: var(--color-verde); border-radius: var(--radio-pill); }
.graf { width: 100%; height: auto; max-height: 280px; display: block; }
.g-grid { stroke: var(--bd); stroke-width: 1; } .g-tx { fill: var(--mut); font-size: 11px; }
.g-ln { fill: none; stroke: var(--color-verde); stroke-width: 2.5; stroke-linejoin: round; } .g-area { fill: var(--color-turquesa); opacity: .14; } .g-pt { fill: var(--color-verde); }
@media (prefers-color-scheme: dark) {
  .b-f { background: var(--color-turquesa); } .g-pt { fill: var(--color-amarillo); } .g-ln { stroke: var(--color-turquesa); } .g-area { opacity: .22; }
}
.metas { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.meta-t { display: flex; justify-content: space-between; gap: 10px; font-size: .875rem; margin-bottom: 4px; }
.prog { height: 12px; background: var(--sf2); border-radius: var(--radio-pill); overflow: hidden; }
.prog span { display: block; height: 100%; border-radius: var(--radio-pill); }
.prog-ok span { background: var(--color-verde); } .prog-med span { background: var(--color-amarillo); } .prog-bajo span { background: var(--color-naranja); }
.mini { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: .875rem; }
.mini li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--bd); padding: 4px 0; }

/* ---------- 16b. Tablero v4.4: indicadores, cobertura, tendencia y ranking ----------
   Jerarquía: la cifra manda (tipografía de títulos, números tabulares) y el resto acompaña en gris.
   Sin sombras pesadas; separación por borde fino y aire en escala de 4 px. */
/* Indicadores: microdato de contexto (variación frente al periodo equivalente anterior) */
.kpi-ctx { display: block; margin-top: var(--esp-2); padding-top: var(--esp-2); border-top: 1px solid var(--bd); color: var(--mut); font-size: var(--fs-xs); line-height: 1.35; font-variant-numeric: tabular-nums; }
.kpi-ctx [aria-hidden="true"] { color: var(--link); font-weight: 700; margin-right: 2px; }

/* Encabezado de tarjeta con controles a la derecha */
.tc-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-4); }
.tc-cab .h2c { margin: 0; }
.seg-mini { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radio-s); background: var(--sf2); border: 1px solid var(--bd); }
.seg-mini button { min-height: 38px; min-width: 44px; padding: 4px 14px; border: 0; border-radius: 6px; background: none; color: var(--tx); font-weight: 600; font-size: var(--fs-s); cursor: pointer; transition: background-color var(--dur); }
.seg-mini button:hover { background: var(--sf3); }
.seg-mini button[aria-pressed="true"] { background: var(--sf); color: var(--link); box-shadow: inset 0 -3px 0 var(--color-amarillo), 0 1px 2px rgba(0, 0, 0, .15); }

/* Cobertura de municipios (reemplaza la franja de alertas) */
.cob { border-left: 4px solid var(--color-verde); }
.cob-warn, .cob-bad { border-left-color: var(--color-naranja); }
.cob-cab { display: flex; gap: var(--esp-3); align-items: flex-start; }
.cob-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--sf2); }
.cob-t { font-size: var(--fs-m); font-weight: 700; }
.cob-sub { color: var(--mut); font-size: var(--fs-s); margin-top: 2px; }
.cob-barra { display: flex; gap: 2px; height: 10px; margin: var(--esp-4) 0 var(--esp-2); border-radius: var(--radio-pill); overflow: hidden; background: var(--sf2); }
.cob-seg { flex-basis: 0; min-width: 4px; }
.cob-s-activo { background: var(--g-linea); } .cob-s-inactivo { background: var(--color-naranja); } .cob-s-nunca { background: var(--color-rojo); }
.cob-ley { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-s); color: var(--mut); }
.cob-ley li { display: inline-flex; align-items: center; gap: 6px; }
.cob-ley b { color: var(--tx); font-variant-numeric: tabular-nums; }
.cob-ley .ico { width: 1.125rem; height: 1.125rem; }
.cob-i-activo .ico { color: var(--ok); } .cob-i-inactivo .ico { color: var(--warn-ico); } .cob-i-nunca .ico { color: var(--bad); --ico-acento: var(--bad); }
.cob-lista { display: grid; gap: var(--esp-4); }
.cob-lista:has(.cob-g:not([hidden])) { margin-top: var(--esp-4); }
.cob-gt { font-size: var(--fs-s); font-weight: 700; color: var(--mut); margin-bottom: var(--esp-2); }
.cob-gt span { font-weight: 500; }
.cob-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.cob-it { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--bd); border-radius: var(--radio-s); background: var(--sf); }
.cob-it > span { display: grid; min-width: 0; line-height: 1.3; }
.cob-it b { font-weight: 650; overflow-wrap: anywhere; }
.cob-it small { color: var(--mut); font-size: var(--fs-xs); }
.cob-it.cob-i-nunca { border-color: color-mix(in srgb, var(--color-rojo) 45%, var(--bd)); }
.cob-it.cob-i-nunca small { color: var(--bad); }
.cob-it.cob-i-inactivo { box-shadow: inset 3px 0 0 var(--color-naranja); }
.cob-mas { margin-top: var(--esp-3); }

/* Tendencia: mini resumen, gráfico interactivo y leyenda */
.t-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-4); margin: 0 0 var(--esp-4); }
@media (min-width: 768px) { .t-res { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.t-res > div { min-width: 0; padding-top: var(--esp-2); border-top: 1px solid var(--bd); }
.t-res dt { font-size: var(--fs-xs); color: var(--mut); }
.t-res dd { margin: 2px 0 0; display: grid; }
.t-res dd b { font: 700 var(--fs-l)/1.15 var(--fuente-titulo); font-variant-numeric: tabular-nums; }
.t-res dd small { color: var(--mut); font-size: var(--fs-xs); }
.t-var { font: 700 var(--fs-m)/1.25 var(--fuente-titulo); font-variant-numeric: tabular-nums; }
.t-var-sube { color: var(--ok); } .t-var-baja { color: var(--warn-tx); } .t-var-igual { color: var(--mut); font: 600 var(--fs-s)/1.3 var(--fuente); }
.t-nota { margin: 0 0 var(--esp-3); padding: 8px 12px; border-radius: var(--radio-s); background: var(--sf2); color: var(--mut); font-size: var(--fs-s); }
.t-graf { position: relative; }
.graf.g-tend { max-height: none; overflow: visible; }
.g-tend .g-tx { font-size: 12px; font-variant-numeric: tabular-nums; }
.g-tend .g-mes { fill: var(--tx); font-weight: 650; }
.g-tend .g-grid { stroke: var(--bd); opacity: .55; } .g-tend .g-base { opacity: 1; }
.g-tick { stroke: var(--bd-fuerte); stroke-width: 1; }
.g-st1 { stop-color: var(--color-turquesa); stop-opacity: .34; } .g-st2 { stop-color: var(--color-turquesa); stop-opacity: 0; }
.g-ln2 { fill: none; stroke: var(--g-linea); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.g-ant { fill: none; stroke: var(--g-ant); stroke-width: 1.5; stroke-dasharray: 4 5; }
.g-marca circle { fill: var(--sf); stroke: var(--g-linea); stroke-width: 2.5; }
.g-marca.g-ult circle { fill: var(--g-linea); stroke: var(--sf); }
.g-marca.g-max circle { stroke: var(--g-punto); }
.g-val { font: 700 12px var(--fuente); fill: var(--tx); paint-order: stroke; stroke: var(--sf); stroke-width: 4px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.g-guia { stroke: var(--mut); stroke-width: 1; stroke-dasharray: 2 3; }
.g-pt2 { fill: var(--g-linea); stroke: var(--sf); stroke-width: 2.5; } .g-pt-ant { fill: var(--g-ant); }
.t-foco { position: absolute; inset: 0; cursor: crosshair; touch-action: pan-y; border-radius: var(--radio-s); }
.t-foco:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }
.t-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none;
  display: grid; gap: 1px; min-width: 150px; max-width: 230px; padding: 8px 12px; border-radius: var(--radio-s);
  background: var(--sf); color: var(--tx); border: 1px solid var(--bd-fuerte); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); font-size: var(--fs-xs); line-height: 1.35; }
.t-tip.t-izq { transform: translate(-14px, calc(-100% - 14px)); } .t-tip.t-der { transform: translate(calc(-100% + 14px), calc(-100% - 14px)); }
.t-tip b { font-size: .9375rem; font-variant-numeric: tabular-nums; } .t-tip small { color: var(--mut); }
.t-tip-f::first-letter { text-transform: uppercase; }
.t-ley { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: var(--esp-2); font-size: var(--fs-xs); color: var(--mut); }
.t-ley span::before { content: ""; display: inline-block; width: 18px; vertical-align: middle; margin-right: 6px; border-top: 2.5px solid var(--g-linea); }
.t-ley .t-ley-b::before { border-top: 1.5px dashed var(--g-ant); }
.t-ley .t-ley-n::before { display: none; }
.t-ley-n { margin-left: auto; }
/* Entrada: la línea se dibuja y luego aparecen el área y las marcas. Solo si se acepta movimiento:
   el estado inicial (línea oculta) vive dentro de esta regla, así nunca queda invisible. */
@media (prefers-reduced-motion: no-preference) {
  .anim .g-ln2 { stroke-dasharray: 1; stroke-dashoffset: 1; animation: g-trazo 1s var(--curva) .05s forwards; }
  .anim .g-area2, .anim .g-marca, .anim .g-ant { opacity: 0; animation: g-aparecer .45s ease-out .75s forwards; }
}
@keyframes g-trazo { to { stroke-dashoffset: 0; } }
@keyframes g-aparecer { to { opacity: 1; } }

/* Ranking de motivos por municipio. Colores fijos por motivo (mv-1…mv-8); los que se parecen llevan
   trama. Siempre van con ícono y nombre, así la lectura no depende solo del color. */
.mv-1 { background: var(--color-verde); }
.mv-2 { background: var(--color-amarillo); }
.mv-3 { background: repeating-linear-gradient(135deg, var(--color-turquesa) 0 4px, #8fd3d9 4px 7px); }
.mv-4 { background: var(--mv-gris); }
.mv-5 { background: var(--color-rojo); }
.mv-6 { background: var(--color-naranja); }
.mv-7 { background: repeating-linear-gradient(135deg, var(--color-amarillo) 0 4px, var(--color-gris) 4px 6px); }
.mv-8 { background: repeating-linear-gradient(135deg, var(--color-naranja) 0 4px, #ffffff 4px 7px); }
.mv-0 { background: repeating-linear-gradient(135deg, var(--bd-fuerte) 0 3px, var(--sf2) 3px 6px); }
.rk-mu { width: 12px; height: 12px; flex: none; border-radius: 3px; }
.rk-ley { list-style: none; margin: 0 0 var(--esp-2); padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.rk-ley li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border: 1px solid var(--bd); border-radius: var(--radio-pill); background: var(--sf); font-size: var(--fs-xs); }
.rk-ley .ico, .rk-pil .ico { width: 1rem; height: 1rem; color: var(--mut); }
.rk-lider { color: var(--rk-estrella); font-size: .875rem; line-height: 1; }
.rk-nota { font-size: var(--fs-xs); color: var(--mut); margin-bottom: var(--esp-4); }
.rk-nota b { color: var(--tx); }
.rk-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
@media (min-width: 900px) { .rk-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-4); } }
.rk-item { display: grid; gap: var(--esp-3); align-content: start; min-width: 0; padding: var(--esp-4); border: 1px solid var(--bd); border-radius: var(--radio-m); background: var(--sf); }
.rk-top { border-color: var(--bd-fuerte); box-shadow: inset 0 3px 0 var(--color-amarillo); }
.rk-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-2); }
.rk-pos { min-width: 1.25em; color: var(--mut); font-size: var(--fs-s); font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-mun { font: 700 var(--fs-m)/1.2 var(--fuente-titulo); overflow-wrap: anywhere; }
.rk-tag { background: var(--warn-bg); color: var(--warn-tx); }
.rk-tot { margin-left: auto; display: flex; align-items: baseline; gap: 4px; }
.rk-tot b { font: 700 var(--fs-l)/1 var(--fuente-titulo); font-variant-numeric: tabular-nums; }
.rk-tot small { color: var(--mut); font-size: var(--fs-xs); }
.rk-pista { height: 24px; border-radius: var(--radio-xs); background: var(--sf2); overflow: hidden; }
.rk-barra { display: flex; gap: 2px; height: 100%; }
.rk-seg { display: grid; place-items: center; flex-basis: 0; min-width: 3px; overflow: hidden; }
.rk-n { padding: 2px 5px; border-radius: 4px; background: var(--sf); color: var(--tx); font: 700 .75rem/1.1 var(--fuente); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-pils { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rk-pil { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 12px 5px 10px; border-radius: var(--radio-pill); background: var(--sf2); font-size: var(--fs-s); }
.rk-pil.es-lider { box-shadow: inset 0 0 0 1px var(--rk-estrella); }
.rk-pn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pv { margin-left: auto; padding-left: var(--esp-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-pv small { color: var(--mut); }
.rk-mas { font-size: var(--fs-xs); color: var(--mut); }
/* En celular el color y el nombre bastan: se quita el ícono de la píldora para que el nombre quepa entero */
@media (max-width: 479px) { .rk-pil .ico { display: none; } .rk-pil { padding-left: 12px; } }
@media (prefers-color-scheme: dark) {
  /* En oscuro el verde y el gris tienen menos contraste con la pista: un filo claro separa cada parte */
  #tablero .rk-seg, #tablero .rk-mu { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
}
.errs { padding-left: 18px; font-size: .875rem; } .errs li { margin: 4px 0; overflow-wrap: anywhere; }

/* ---------- 17. Administración ---------- */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--esp-3); }
.subtabs button { min-height: var(--t); padding: 8px 16px; border: 1.5px solid var(--bd); border-radius: var(--radio-pill); background: var(--sf); cursor: pointer; font-weight: 600; color: var(--tx); transition: border-color var(--dur), background-color var(--dur); }
.subtabs button:hover { border-color: var(--link); }
.subtabs button[aria-selected="true"] { background: var(--pri); color: var(--pri-tx); border-color: var(--pri); }
.adm-sec { margin-bottom: 22px; }
.adm-add { align-items: end; background: var(--bg); border-radius: var(--radio-s); padding: 2px 12px 12px; margin-top: 10px; }
@media (min-width: 480px) { .adm-add .f-ancho { grid-column: span 2; } }
.f-btn { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.in-sm { min-height: var(--t) !important; padding: 6px 8px !important; min-width: 0; }
code { font-size: .75rem; overflow-wrap: anywhere; }

/* ---------- 18. Diálogos, avisos flotantes y actualización ---------- */
.dlg {
  border: 0; border-radius: var(--radio-l); padding: 0; width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  background: var(--sf); color: var(--tx); box-shadow: var(--sombra-2);
}
.dlg::backdrop { background: var(--velo); }
.dlg-in { padding: var(--esp-5) var(--esp-4) var(--esp-4); display: flex; flex-direction: column; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }
@media (min-width: 768px) { .dlg-in { padding: var(--esp-5); } }
.dlg-in h2 { font-size: var(--fs-m); font-weight: 750; margin-bottom: var(--esp-3); padding-bottom: var(--esp-2); border-bottom: 3px solid var(--color-amarillo); }
.dlg-body { overflow-y: auto; overscroll-behavior: contain; }
.dlg-body p + p { margin-top: var(--esp-2); }
.dlg-acc { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: flex-end; margin-top: var(--esp-4); }
.dlg-acc .btn { width: auto; margin: 0; min-height: var(--t); padding: 8px 16px; font-size: .9375rem; }
@media (max-width: 479px) { .dlg-acc .btn { flex: 1 1 auto; } }
.atajos { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .atajos li { display: flex; gap: 12px; align-items: center; } .atajos kbd { min-width: 120px; text-align: center; }
.toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--alto-nav) + var(--esp-3) + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; width: min(460px, calc(100vw - 24px)); }
.toast { background: var(--color-gris); color: #fff; padding: 12px 16px; border-radius: var(--radio-s); box-shadow: var(--sombra-2); font-size: .9375rem; border-left: 4px solid var(--color-amarillo); }
@media (prefers-reduced-motion: no-preference) { .toast { animation: subir .22s var(--curva); } }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } }
.toast-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok); border-left-width: 4px; }
.toast-error { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); border-left: 4px solid var(--color-rojo); }
@media (min-width: 768px) { .toasts { bottom: calc(var(--esp-5) + env(safe-area-inset-bottom, 0px)); } }
.upd { position: fixed; z-index: 45; left: 12px; right: 12px; top: calc(var(--alto-top) + 14px + env(safe-area-inset-top, 0px)); max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--sf); border: 2px solid var(--color-verde); border-radius: var(--radio-m); padding: 10px 14px; box-shadow: var(--sombra-2); font-weight: 600; }

/* ---------- 19. Informe imprimible (siempre claro, como papel) ---------- */
.reporte { background: #fff; color: #222; border: 1px solid var(--bd); border-radius: var(--radio-m); padding: clamp(16px, 3vw, 28px); color-scheme: light; }
/* Los componentes compartidos con el tablero (tendencia, ranking) leen variables: dentro del informe se
   fijan en claro para que se vea como papel aunque el equipo esté en modo oscuro. */
.reporte { --sf: #ffffff; --sf2: #eef4f4; --sf3: #e2ecec; --bd: #d2dfe0; --bd-fuerte: #8fa9ab; --tx: #222222; --mut: #555555; --link: #006168;
  --ok: #13703e; --warn-tx: #5a3c00; --warn-bg: #fff2cc; --bad: #b5002b; --bad-bg: #fde5eb; --ico-acento: var(--color-naranja);
  --g-linea: #007880; --g-ant: #8fa9ab; --g-punto: #007880; --warn-ico: #b84f00; --mv-gris: #464444; --rk-estrella: #8a5c00; }
.reporte .rk-item { padding: 12px 14px; } .reporte .rk-lista { gap: 10px 16px; }
.reporte .kpi { background: #fff; border-color: #d2dfe0; color: #222; } .reporte .kpi span, .reporte .mut { color: #555; }
.reporte .b-t { background: #e9f2f3; } .reporte .b-f { background: #007880; } .reporte .g-ln { stroke: #007880; } .reporte .g-pt { fill: #007880; } .reporte .g-area { fill: #028B98; opacity: .14; } .reporte .g-tx { fill: #555; } .reporte .g-grid { stroke: #d2dfe0; }
.reporte table th { color: #555; background: none; white-space: normal; } .reporte th, .reporte td { border-color: #d2dfe0; overflow-wrap: anywhere; }
.rp-h { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; border-bottom: 5px solid #FFBB00; padding-bottom: 12px; margin-bottom: 16px; box-shadow: 0 3px 0 #007880; }
.rp-h img { height: 70px; width: auto; }
.rp-ent { margin: 0; font-size: .8125rem; color: #464444; } .rp-t { font-size: 1.5rem; color: #007880; } .rp-m { margin: 2px 0 0; }
.rp-s { margin: 14px 0; break-inside: avoid; } .rp-s h3 { font-size: 1rem; margin-bottom: 8px; color: #464444; }
.rp-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; } @media (min-width: 760px) { .rp-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-f { margin-top: 20px; padding-top: 10px; border-top: 1px solid #d2dfe0; font-size: .75rem; color: #555; }

@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .top, .rail, .nav, .panel, .velo, .no-print, .upd, .toasts, .saltar, #ses-bar, #rol-bar, .vt, .view:not(#view-rep) { display: none !important; }
  .shell { display: block; } .main { padding: 0; max-width: none; }
  .reporte { border: 0; padding: 0; }
  .kpi { clip-path: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-2 { grid-template-columns: 1fr 1fr; }
  .rk-lista { grid-template-columns: 1fr 1fr; }
  .rk-item { break-inside: avoid; }
  .rp-s.rp-rk { break-inside: auto; } /* la sección es larga: puede seguir en la página anterior; cada tarjeta no se parte */
  .rp-rk h3, .rk-ley { break-after: avoid; }
  .t-foco, .t-tip, .g-cursor { display: none !important; }
}

/* ---------- 20. Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* El indicador de carga sigue siendo necesario para saber que algo ocurre, pero va lento */
  .btn[aria-busy="true"]::after { animation: girar 1.6s linear infinite !important; }
}