/* ==========================================================================
   SERVYNET — sistema de diseño (SPRINT-02-INTERFAZ)
   Aprobado el 16/10/2026: claro, azul de telecomunicaciones, estilo macOS,
   con Dock. Sin fuentes ni CDN externos: el panel vive detrás de WireGuard.

   Los nombres de variable del tema anterior (--panel, --tinta, --critico…) se
   conservan con valores nuevos: las vistas hechas a mano cambian de tema sin
   reescribirse.
   ========================================================================== */

:root{
  --escritorio:#E3E9F2;
  --ventana:#F5F6F8;
  --fondo:#F5F6F8;
  --panel:#FFFFFF;
  --panel2:#F2F4F7;
  --borde:#E3E7EE;
  --borde-fuerte:#C9D2DF;
  --tinta:#1D1D1F;
  --tinta2:#3A3A3C;
  --tenue:#636368;
  --texto-critico:#B42318;
  --texto-aviso:#7A5A00;
  --acento:#0068E0;
  --acento2:#0058C2;
  --acento-suave:#E6F0FF;
  --ok:#1F9D55;
  --medio:#B58500;
  --alto:#C25E00;
  --critico:#D92D20;
  --sombra:0 1px 3px rgba(20,32,56,.06);
  --sombra-ventana:0 24px 70px rgba(20,32,56,.18),0 2px 6px rgba(20,32,56,.06);
  --radio:13px;
  --letra:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --letra-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Superficies y estados (tema oscuro, VISION §6): cada color que cambia de
     noche tiene su token; el blanco solo queda como texto sobre un color. */
  --vidrio:rgba(255,255,255,.62);
  --vidrio-opaco:rgba(255,255,255,.95);
  --vidrio-denso:rgba(255,255,255,.84);
  --vidrio-claro:rgba(255,255,255,.7);
  --vidrio-tenue:rgba(255,255,255,.55);
  --borde-vidrio:rgba(255,255,255,.75);
  --barra:rgba(246,247,249,.94);
  --campo:#FFFFFF;
  --campo-busqueda:#E3E5EA;
  --perilla:#FFFFFF;
  --linea:rgba(0,0,0,.08);
  --linea-fuerte:rgba(0,0,0,.12);
  --fondo-critico:#FDECEA;
  --borde-critico:#F3C2BC;
  --fondo-ok:#E8F6EE;
  --texto-ok:#1A7F45;
  --fondo-aviso:#FFF6D6;
  --fondo-alto:#FFF0DF;
  --texto-alto:#B25E00;
  --texto-acento:#004FAD;
  --fila-hover:#F2F6FD;
  --fondo-choque:#F3F8FF;
  --borde-choque:#CFE0FA;
  --puntos:#DCE3EE;
  --interruptor:#D9DCE3;
  color-scheme:light;
}

/* El tema oscuro sigue al sistema del telefono o la computadora. Mismos
   tokens, valores de noche: ninguna vista se reescribe. */
@media (prefers-color-scheme:dark){
  :root{
    --escritorio:#101216;
    --ventana:#17191E;
    --fondo:#17191E;
    --panel:#1F2228;
    --panel2:#262A31;
    --borde:#2E323A;
    --borde-fuerte:#3E434D;
    --tinta:#ECEDEF;
    --tinta2:#C7C9CE;
    --tenue:#9A9EA6;
    --texto-critico:#FF8A80;
    --texto-aviso:#F2C94C;
    --acento:#3D8BFF;
    --acento2:#5C9DFF;
    --acento-suave:rgba(61,139,255,.18);
    --ok:#34C46A;
    --medio:#E0B43A;
    --alto:#FF9F45;
    --critico:#FF5A4F;
    --sombra:0 1px 3px rgba(0,0,0,.4);
    --sombra-ventana:0 24px 70px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
    --vidrio:rgba(31,34,40,.66);
    --vidrio-opaco:rgba(31,34,40,.96);
    --vidrio-denso:rgba(31,34,40,.88);
    --vidrio-claro:rgba(255,255,255,.08);
    --vidrio-tenue:rgba(31,34,40,.5);
    --borde-vidrio:rgba(255,255,255,.08);
    --barra:rgba(28,30,36,.94);
    --campo:#121418;
    --campo-busqueda:#23262D;
    --perilla:#FFFFFF;
    --linea:rgba(255,255,255,.08);
    --linea-fuerte:rgba(255,255,255,.14);
    --fondo-critico:rgba(255,90,79,.16);
    --borde-critico:rgba(255,90,79,.35);
    --fondo-ok:rgba(52,196,106,.16);
    --texto-ok:#5AD38A;
    --fondo-aviso:rgba(242,201,76,.14);
    --fondo-alto:rgba(255,159,69,.16);
    --texto-alto:#FFB15C;
    --texto-acento:#8DB8FF;
    --fila-hover:#232831;
    --fondo-choque:rgba(61,139,255,.08);
    --borde-choque:rgba(61,139,255,.3);
    --puntos:#2A2F38;
    --interruptor:#3E434D;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--escritorio);color:var(--tinta);
  font:14.5px/1.5 var(--letra);-webkit-font-smoothing:antialiased}
code,.mono{font-family:var(--letra-mono);font-size:.92em}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
:focus-visible{outline:3px solid rgba(0,104,224,.45);outline-offset:2px;border-radius:6px}
/* Nombre accesible sin ocupar lugar en pantalla. `hidden` no sirve: oculta la
   etiqueta también a los lectores de pantalla. */
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Animaciones de los íconos (por clase: ver app/marco/iconos.py) ------- */
@keyframes ondas{0%,100%{opacity:.18}50%{opacity:1}}
@keyframes giro{to{transform:rotate(360deg)}}
@keyframes pulso{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.3}}
.anim-ondas{animation:ondas 1.8s ease-in-out infinite}
.anim-retraso-1{animation-delay:.2s}
.anim-retraso-2{animation-delay:.5s}
.anim-retraso-3{animation-delay:.8s}
.anim-orbita,.anim-barrido,.anim-giro-lento{transform-box:view-box;transform-origin:12px 12px}
.anim-orbita{animation:giro 3.2s linear infinite}
.anim-barrido{animation:giro 2.6s linear infinite}
.anim-giro-lento{animation:giro 14s linear infinite}
.anim-pulso{stroke-dasharray:4 14;animation:pulso 1.1s linear infinite}
.anim-latido{animation:latido 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  [class*="anim-"],.punto-vivo{animation:none!important}
  .dock-app{transition:none!important}
}

/* --- Procedencia de los datos: SIEMPRE antes que cualquier cifra --------- */
.modo-soporte{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 22px;
  background:#5856D6;color:#fff;font-size:13.5px}
.modo-soporte form{margin-left:auto}
.modo-soporte .boton{background:var(--panel);color:var(--tinta);border:0}
.semilla{background:var(--fondo-aviso);border-bottom:2px solid #E0B43A;padding:8px 22px;
  font-size:13px;color:#5C4400;display:flex;gap:10px;align-items:center;
  position:sticky;top:0;z-index:50}
.semilla b{color:#7A5A00;white-space:nowrap}
body.demo .ventana{box-shadow:0 0 0 3px #E0B43A,var(--sombra-ventana)}
body.demo main{background-image:repeating-linear-gradient(135deg,
  transparent 0 22px,rgba(224,180,58,.06) 22px 44px)}
.procedencia{padding:6px 22px;font-size:12.5px;color:var(--tenue);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.procedencia .punto{width:7px;height:7px;border-radius:50%;flex:none}
.procedencia .vivo{background:var(--ok)}
.procedencia .rancio{background:var(--critico)}
/* La version corta, solo en el telefono (ver el bloque de max-width:760px). */
.solo-movil{display:none}

/* --- La ventana ----------------------------------------------------------- */
.escritorio{padding:6px 18px 0}
.ventana{max-width:1480px;margin:0 auto;background:var(--ventana);border-radius:14px;
  border:1px solid var(--linea);box-shadow:var(--sombra-ventana)}
.ventana-barra{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 16px;
  background:var(--barra);border-bottom:1px solid var(--linea);
  border-radius:14px 14px 0 0}
.semaforo{display:flex;gap:8px}
.semaforo span{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.semaforo span:nth-child(1){background:#FF5F57}
.semaforo span:nth-child(2){background:#FEBC2E}
.semaforo span:nth-child(3){background:#28C840}
.ventana-titulo{min-width:0}
.ventana-titulo .titulo{font-weight:700;font-size:15px;line-height:1.2}
.ventana-titulo .subtitulo{font-size:12px;color:var(--tenue);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.buscador{margin-left:auto;flex:0 1 280px;min-width:170px;display:flex;align-items:center;
  gap:6px;height:32px;padding:0 10px;border-radius:8px;background:var(--campo-busqueda);color:var(--tenue)}
.buscador input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:inherit;
  font-size:13px;color:var(--tinta)}
.buscador input:focus{outline:none}
.buscador:focus-within{box-shadow:0 0 0 3px rgba(0,104,224,.35)}
.estado-red{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:600;white-space:nowrap}
.estado-red.vivo{background:var(--acento-suave);color:var(--texto-acento)}
.estado-red.rancio{background:var(--fondo-critico);color:var(--texto-critico)}
.punto-vivo{width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:latido 2s ease-in-out infinite}
.usuario{width:30px;height:30px;border-radius:50%;background:var(--acento);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* La cuenta: Aplicaciones y Salir, desde el circulo del usuario. */
.cuenta-menu{position:relative}
.cuenta-menu>summary{list-style:none;cursor:pointer}
.cuenta-menu>summary::-webkit-details-marker{display:none}
.cuenta-menu>summary:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.cuenta-panel{position:absolute;right:0;top:38px;z-index:55;min-width:210px;padding:6px;
  border-radius:12px;background:var(--panel);border:1px solid var(--borde);
  box-shadow:0 18px 44px rgba(20,32,56,.22)}
.cuenta-nombre{padding:8px 10px 6px;font-size:12px;font-weight:700;color:var(--tenue)}
.cuenta-panel a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  color:var(--tinta);font-size:13.5px}
/* Salir es un formulario (POST): se ve igual que los enlaces del menu. */
.cuenta-panel form{margin:0}
.cuenta-panel button{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  color:var(--tinta);font-size:13.5px}
.cuenta-panel a svg,.cuenta-panel button svg{color:var(--acento)}
.cuenta-panel a:hover,.cuenta-panel button:hover{background:var(--panel2);text-decoration:none}

.ventana-cuerpo{display:flex;align-items:stretch;min-height:72vh}
main{flex:1 1 auto;min-width:0;padding:22px 24px 120px}

/* --- El Dock --------------------------------------------------------------- */
.dock{position:sticky;bottom:14px;display:flex;justify-content:center;padding:0 0 14px;
  margin-top:-96px;pointer-events:none;z-index:40}
.dock-bandeja{pointer-events:auto;display:flex;align-items:flex-end;gap:10px;
  padding:8px 12px;border-radius:22px;background:var(--vidrio);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 12px 40px rgba(20,32,56,.22),inset 0 0 0 .5px rgba(0,0,0,.06)}
/* Sin desenfoque, el vidrio al 62 % deja ver el texto de abajo: opaco. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dock-bandeja{background:var(--vidrio-opaco)}
}
.dock-app{position:relative;display:flex;flex-direction:column;align-items:center;
  transition:transform .18s ease;transform-origin:50% 100%;text-decoration:none}
.dock-app:hover,.dock-app:focus-visible{transform:translateY(-10px) scale(1.22);
  text-decoration:none}
.dock-icono{width:52px;height:52px;border-radius:14px;color:#fff;display:flex;
  align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(20,40,90,.28)}
.tono-0{background:#0068E0}.tono-1{background:#5856D6}.tono-2{background:#0A84FF}
.tono-3{background:#0B1F4D}.tono-4{background:#AF52DE}.tono-5{background:#FF9500}
.tono-sistema{background:#8E8E93}
.dock-etiqueta{position:absolute;bottom:70px;padding:3px 9px;border-radius:6px;
  background:rgba(30,30,32,.88);color:#fff;font-size:12px;white-space:nowrap;
  opacity:0;transition:opacity .15s ease;pointer-events:none}
.dock-app:hover .dock-etiqueta,.dock-app:focus-visible .dock-etiqueta{opacity:1}
.insignia{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:#FF3B30;color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.dock-punto{width:4px;height:4px;border-radius:50%;margin-top:4px;background:transparent}
.dock-app.activa .dock-punto{background:var(--tinta2)}
.dock-separador{width:1px;height:46px;background:var(--linea-fuerte);margin:0 2px 10px}
/* La barra del telefono (base.html): solo existe en pantallas angostas. */
.dock-telefono{display:none}

/* Carpetas del Dock (app/marco/dock.py): cada app adicional abre su pila. */
.dock-carpeta{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.dock-carpeta:focus-visible{outline:none}
.dock-carpeta:focus-visible .dock-icono{outline:2px solid var(--acento);outline-offset:2px}
.icono-carpeta{background:var(--vidrio-claro);border:1px solid var(--linea);
  display:grid;grid-template-columns:repeat(2,18px);grid-auto-rows:18px;gap:4px;
  align-content:center;justify-content:center}
.icono-carpeta .mini{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;
  color:#fff}
.dock-carpeta:has(+ .pila:popover-open) .icono-carpeta{background:var(--panel)}
/* `popover`: en la capa superior. Sin JavaScript, centrada sobre el Dock; con
   JavaScript, encima de su carpeta (base.html). */
.pila{position:fixed;inset:auto;left:50%;bottom:110px;transform:translateX(-50%);margin:0;
  min-width:220px;max-width:calc(100vw - 24px);padding:14px 16px 16px;border-radius:20px;color:var(--tinta);
  background:var(--vidrio-denso);border:1px solid var(--borde-vidrio);
  box-shadow:0 18px 50px rgba(20,32,56,.28);animation:pila-abre .18s ease-out}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pila{-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}}
@keyframes pila-abre{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
.pila-titulo{font-size:12px;font-weight:700;color:var(--tenue);text-align:center;margin-bottom:10px}
.pila-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px 8px}
.pila-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--tinta);text-decoration:none;font-size:12px;text-align:center;line-height:1.25}
.pila-app:hover{text-decoration:none}
.pila-app:hover .dock-icono{filter:brightness(1.08)}
.pila-app .insignia{top:-4px;right:8px}
.pila-app.activa .pila-etiqueta{font-weight:700}

/* Donde estoy: regresar un nivel y la ruta, en la barra de la ventana. */
.boton-atras{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-size:24px;line-height:1;color:var(--acento);text-decoration:none}
.boton-atras:hover{background:var(--linea);text-decoration:none}
.migas a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Sin mouse no hay "pasar por encima": el nombre va siempre debajo. */
@media (hover:none){
  .dock-etiqueta{position:static;order:1;opacity:1;background:none;color:var(--tinta2);
    font-size:10px;padding:0;margin-top:3px;max-width:62px;overflow:hidden;
    text-overflow:ellipsis}
  .dock-icono{order:0}
  .dock-punto{order:2;margin-top:2px}
  .dock-app:hover,.dock-app:focus-visible{transform:none}
}

/* --- Componentes compartidos ---------------------------------------------- */
.rejilla{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:16px 18px;box-shadow:var(--sombra)}
.tarjeta h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tenue);margin-bottom:10px;font-weight:650}
.cifra{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.cifra small{font-size:14px;color:var(--tenue);font-weight:500}
.sub{color:var(--tinta2);font-size:13px;margin-top:3px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tenue);padding:8px 10px;border-bottom:1px solid var(--borde);font-weight:650}
td{padding:9px 10px;border-bottom:1px solid var(--borde)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--fila-hover)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.barra-prog{height:8px;background:var(--panel2);border-radius:4px;overflow:hidden;margin:9px 0 5px}
.barra-prog span{display:block;height:100%;border-radius:4px}
.barra-prog span.ok{background:var(--ok)}
.barra-prog span.medio{background:#E0B43A}
.barra-prog span.alto{background:#F08A24}
.barra-prog span.critico{background:var(--critico)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;
  font-weight:650;letter-spacing:.02em}
.p-ok{background:var(--fondo-ok);color:var(--texto-ok)}.p-medio{background:var(--fondo-aviso);color:var(--texto-aviso)}
.p-alto{background:var(--fondo-alto);color:var(--texto-alto)}.p-critico{background:var(--fondo-critico);color:var(--texto-critico)}
.p-neutro{background:var(--panel2);color:var(--tinta2)}
.choque{background:var(--fondo-choque);border:1px solid var(--borde-choque);border-radius:var(--radio);padding:18px}
.choque .dias{font-size:42px;font-weight:750;line-height:1;color:var(--acento);
  font-variant-numeric:tabular-nums}
.choque .dias.critico{color:var(--critico)}
.choque .dias.alto{color:var(--alto)}
.choque .dias.texto{font-size:28px}
.vacio{color:var(--tenue);padding:26px;text-align:center;border:1px dashed var(--borde-fuerte);
  border-radius:var(--radio);font-size:14px;background:var(--panel)}
.hallazgo{background:var(--fondo-critico);border:1px solid var(--borde-critico);border-radius:var(--radio);padding:16px 18px}
.hallazgo h3{color:#B42318}
.grafica{display:flex;align-items:flex-end;gap:3px;height:130px;padding-top:8px}
.grafica div{flex:1;background:#7FB2F0;border-radius:3px 3px 0 0;min-height:2px;position:relative}
.grafica div:hover{background:var(--acento)}
.leyenda{display:flex;justify-content:space-between;color:var(--tenue);font-size:11px;margin-top:6px}
.anomalo{color:#C4271E;font-weight:600}
.error{background:var(--fondo-critico);color:var(--texto-critico);padding:9px 11px;border-radius:8px;font-size:13px;margin-top:12px}
.aviso-texto{color:#7A5A00}

/* --- Componentes del marco: iguales en TODOS los módulos ------------------ */
.barra-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--borde)}
.barra-filtros input,.barra-filtros select{min-height:34px;padding:6px 10px;border-radius:8px;
  border:1px solid var(--borde-fuerte);background:var(--campo);color:var(--tinta);font:inherit;font-size:13px}
.barra-filtros button,.boton{min-height:34px;padding:6px 14px;border:0;border-radius:8px;
  background:var(--acento);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.barra-filtros button:hover,.boton:hover{background:var(--acento2)}
.boton.secundario{background:var(--panel);color:var(--tinta);border:1px solid var(--linea-fuerte)}
.boton.secundario:hover{background:var(--panel2)}
.barra-filtros .limpiar{font-size:13px;color:var(--tenue)}
.resumen-lista:not(:empty){margin-bottom:12px}
.lista-cabeza{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 12px;margin-bottom:8px}
.lista-cabeza h3{margin:0}
.lista-botones{display:flex;flex-wrap:wrap;gap:8px}
.tabla-envoltura{overflow-x:auto}
td.enf-critico{color:var(--texto-critico)}
td.enf-alto{color:var(--texto-alto)}
td.enf-bien{color:var(--texto-ok)}
.acciones{white-space:nowrap}
button.accion{min-height:30px;padding:4px 10px;margin-left:5px;border:1px solid var(--linea-fuerte);
  border-radius:7px;background:var(--panel);color:var(--tinta2);font:inherit;font-size:12px;cursor:pointer}
button.accion:hover{background:var(--acento);color:#fff;border-color:var(--acento)}
button.accion.enf-alto:hover{background:var(--alto);border-color:var(--alto)}
button.accion:disabled{opacity:.5;cursor:wait}

/* --- Aplicaciones (Launchpad) --------------------------------------------- */
.encabezado{margin-bottom:18px}
.encabezado h2{font-size:24px;font-weight:700}
.tienda{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.app{background:var(--panel);border:1px solid var(--borde);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;gap:10px;box-shadow:var(--sombra)}
.app.no-disponible{opacity:.6}
.app-icono{width:64px;height:64px;border-radius:17px;color:#fff;display:flex;
  align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px rgba(20,40,90,.25)}
.app h4{margin:0;font-size:16px}
.app p{margin:0;font-size:13px;color:var(--tinta2);flex:1;line-height:1.5}
.app .pie{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--tenue);margin-top:4px}
.app .pie form{margin-left:auto}
.app .pie button{min-height:32px;padding:5px 14px;border:0;border-radius:8px;font:inherit;
  font-size:13px;font-weight:600;cursor:pointer;background:var(--acento);color:#fff}
.app .pie button:hover{background:var(--acento2)}
.app .pie button.apagar{background:var(--panel);color:var(--tinta2);border:1px solid var(--linea-fuerte)}
.app .pie button.apagar:hover{background:var(--panel2)}
.candado{margin-left:auto;display:inline-flex;align-items:center;gap:5px}

/* --- Acceso ---------------------------------------------------------------- */
.acceso-fondo{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
form.acceso{width:100%;max-width:360px;background:var(--vidrio-opaco);
  border:1px solid var(--linea);border-radius:18px;padding:28px;box-shadow:var(--sombra-ventana)}
.acceso-logo{width:56px;height:56px;border-radius:16px;background:var(--acento);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  box-shadow:0 8px 20px rgba(0,104,224,.35)}
form.acceso h1{font-size:21px;font-weight:700}
form.acceso p.sub{margin:4px 0 16px}
form.acceso label{display:block;font-size:13px;color:var(--tinta2);margin:12px 0 5px;font-weight:600}
form.acceso input{width:100%;min-height:42px;padding:9px 12px;border-radius:9px;
  border:1px solid var(--borde-fuerte);background:var(--campo);color:var(--tinta);font:inherit}
form.acceso button{width:100%;margin-top:18px;min-height:44px;border:0;border-radius:10px;
  background:var(--acento);color:#fff;font:inherit;font-weight:650;cursor:pointer}
form.acceso button:hover{background:var(--acento2)}

/* --- Tablero: titular y tarjetas con ícono -------------------------------- */
.encabezado-tablero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px}
.titular{font-size:26px;font-weight:750;letter-spacing:-.015em}
.boton{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.boton:hover{text-decoration:none}
.tarjeta.con-icono{position:relative;padding-top:14px}
.icono-tarjeta{width:40px;height:40px;border-radius:11px;background:var(--acento-suave);
  color:var(--acento);display:flex;align-items:center;justify-content:center;margin-bottom:10px}

/* --- Tu red en vivo ------------------------------------------------------- */
@keyframes flujo{from{background-position:0 0}to{background-position:64px 0}}
@keyframes flujo-corto{from{background-position:0 0}to{background-position:16px 0}}
.fila-red{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;margin-bottom:16px}
.red-tarjeta{flex:3 1 640px;min-width:0}
.red-cabeza h2,.agente-cabeza h2,.linea-cabeza h2{font-size:16px;font-weight:700}
.red-marco{overflow-x:auto;margin-top:10px}
.red-pista{display:none;margin:8px 0 0;font-size:12px;color:var(--tenue)}
.red-escenario{position:relative;margin:0 auto;border-radius:10px;background-color:var(--panel);
  background-image:radial-gradient(var(--puntos) 1.1px,transparent 1.4px);background-size:22px 22px}
.red-linea{position:absolute;transform-origin:0 50%;border-radius:2px}
.red-linea.enlace{background:repeating-linear-gradient(90deg,#5AC8FA 0 6px,transparent 6px 16px);
  background-size:16px 2px;animation:flujo-corto .9s linear infinite}
.red-linea.enlace-espera{background:repeating-linear-gradient(90deg,#C7C7CC 0 3px,transparent 3px 9px);
  background-size:9px 2px}
.red-linea.rama{background:repeating-linear-gradient(90deg,rgba(0,104,224,.16) 0 26px,
  var(--acento) 26px 34px,rgba(0,104,224,.16) 34px 64px);background-size:64px 3px;
  box-shadow:0 0 6px rgba(0,104,224,.3);animation:flujo 1.6s linear infinite}
.red-linea.rama-caida{background:repeating-linear-gradient(90deg,#FF3B30 0 7px,transparent 7px 13px);
  background-size:13px 3px}
.red-nodo{position:absolute;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.red-nodo.salida{border-radius:15px;background:var(--panel);border:1px solid var(--borde-fuerte);color:var(--acento);
  box-shadow:0 6px 16px rgba(0,60,140,.14)}
.red-nodo.rama{border-radius:50%;background:conic-gradient(var(--acento) 0 var(--pct),var(--panel2) var(--pct) 100%);
  box-shadow:0 4px 12px rgba(0,60,140,.14)}
.red-nodo.rama.caida{background:conic-gradient(#FF3B30 0 100%)}
.red-nodo.rama span{width:44px;height:44px;border-radius:50%;background:var(--panel);display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:750;color:#004FAD}
.red-nodo.rama.caida span{color:var(--texto-critico)}
.red-centro{position:absolute;width:72px;height:72px;border-radius:19px;background:var(--acento);
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 9px rgba(0,104,224,.10),0 10px 24px rgba(0,60,140,.28)}
.red-etiqueta-salida{position:absolute;width:140px;font-size:12px;line-height:1.3}
.red-etiqueta-salida b{display:block;font-size:13px}
.red-etiqueta-salida span{color:var(--tenue)}
/* Dos renglones -- nombre y conteo --, cada uno recortado por su lado: así el
   conteo nunca se pierde detrás de un nombre largo. */
.red-etiqueta-rama{position:absolute;transform:translate(-50%,-50%);padding:3px 9px;border-radius:9px;
  background:var(--panel);border:1px solid var(--borde);font-size:11.5px;line-height:1.3;text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.red-etiqueta-rama > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.red-etiqueta-rama span{color:var(--tenue)}
.red-etiqueta-rama.caida span{color:var(--texto-critico)}
.red-etiqueta-rama.caida{border-color:var(--borde-critico);color:var(--texto-critico)}
.red-punto{position:absolute;display:block;width:14px;height:14px;border-radius:50%;box-sizing:border-box}
.red-punto.navegando{background:var(--acento);box-shadow:0 0 5px rgba(0,104,224,.45)}
.red-punto.sin_conexion{background:var(--panel);border:2px solid #A1A1A6}
.red-punto.no_recibe_lo_que_paga{background:#FF9500;border-radius:3px;transform:rotate(45deg)}
.red-punto:hover,.red-punto:focus-visible{outline:3px solid rgba(0,104,224,.4);outline-offset:2px}
.red-leyenda{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px;
  font-size:12.5px;color:var(--tinta2)}
.red-leyenda span{display:inline-flex;align-items:center;gap:6px}
.red-leyenda .red-punto{position:static;width:11px;height:11px}

/* --- Lo que vio tu agente -------------------------------------------------- */
.agente{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:10px}
.agente-cabeza{display:flex;align-items:center;gap:10px}
.agente-radar{width:32px;height:32px;border-radius:9px;background:#0B1F4D;color:#7CC4FA;
  display:flex;align-items:center;justify-content:center}
.agente-item{padding:10px 12px;border-radius:11px;background:var(--panel2);display:flex;
  flex-direction:column;gap:4px}
.agente-item .pill{align-self:flex-start}
.agente-texto{font-size:13.5px}

/* --- Línea de 24 horas ----------------------------------------------------- */
.linea{margin-bottom:16px}
.linea-cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.linea-eje{position:relative;height:22px;margin:12px 0 6px}
.linea-eje::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:var(--borde)}
.linea-marca{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--acento);
  border:2px solid #fff;box-shadow:0 0 0 1px currentColor;flex:none}
.linea-eje .linea-marca{position:absolute;top:4px;margin-left:-6px}
.linea-marca.critica{background:var(--critico);color:var(--critico)}
.linea-marca.alta{background:#FF9500;color:#FF9500}
.linea-marca.media{background:#E0B43A;color:#E0B43A}
.linea-marca.resuelta{background:var(--ok);color:var(--ok)}
.linea-ahora{position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--acento)}
.linea-eventos{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;
  font-size:13.5px}
.linea-eventos li{display:flex;align-items:baseline;gap:8px}
@media (prefers-reduced-motion:reduce){.red-linea{animation:none!important}}

/* -- Lista: columnas por usuario y acciones masivas (Fase B5) ---------------- */
.lista-herramientas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.barra-seleccion{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.barra-seleccion button.accion{margin-left:0}
.columnas-lista{margin-left:auto;position:relative}
.columnas-lista>summary{list-style:none;cursor:pointer;font-size:13px;font-weight:600;
  color:var(--acento);padding:6px 10px;border-radius:8px}
.columnas-lista>summary::-webkit-details-marker{display:none}
.columnas-lista>summary:hover{background:var(--panel2)}
.columnas-panel{position:absolute;right:0;top:36px;z-index:30;min-width:220px;padding:10px 12px;
  display:flex;flex-direction:column;gap:7px;border-radius:12px;background:var(--panel);
  border:1px solid var(--borde);box-shadow:0 18px 44px rgba(20,32,56,.22)}
.columnas-panel label{display:flex;align-items:center;gap:8px;font-size:13.5px}
.columnas-panel input{accent-color:var(--acento)}
.columnas-panel input:disabled{opacity:.5}
.columnas-panel .boton{align-self:flex-start;margin-top:4px}
th.seleccion,td.seleccion{width:34px;text-align:center}
th.seleccion input,td.seleccion input{width:17px;height:17px;accent-color:var(--acento)}

/* -- Mapa del marco (Fase B2): app/marco/plantillas/mapa.html ---------------- */
.mapa-cabeza{margin-bottom:12px}
.mapa-leyenda{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;
  font-size:13px;color:var(--tinta2)}
.mapa-leyenda li{display:flex;align-items:center;gap:6px}
.mapa-leyenda .cuenta{color:var(--tenue);font-variant-numeric:tabular-nums}
.mapa-marca{flex:none;width:12px;height:12px;border-radius:50%;background:var(--tenue);
  box-shadow:0 0 0 2px var(--panel)}
.mapa-marca.bien{background:var(--ok)}
.mapa-marca.aviso{background:var(--medio)}
.mapa-marca.falla{background:var(--critico)}
.mapa-marca.sin_dato{background:var(--borde-fuerte)}
/* Sin senal, el fondo liso es este; con senal lo tapan las calles. */
.mapa-lienzo{height:min(62vh,560px);padding:0;overflow:hidden;background:var(--panel2)}
.mapa-lienzo.leaflet-container{background:var(--panel2);font:inherit}
.mapa-sin-senal{margin:6px 2px 0}
.punto-mapa{stroke:var(--panel)}
.punto-mapa.chico{stroke-width:2px}
.punto-mapa.bien{fill:var(--ok)}
.punto-mapa.aviso{fill:var(--medio)}
.punto-mapa.falla{fill:var(--critico);animation:latido-mapa 1.6s ease-in-out infinite}
.punto-mapa.sin_dato{fill:var(--borde-fuerte)}
@keyframes latido-mapa{50%{stroke:var(--critico);stroke-opacity:.35;stroke-width:9px}}
@media (prefers-reduced-motion:reduce){.punto-mapa.falla{animation:none}}
.mapa-lienzo .leaflet-popup-content-wrapper,.mapa-lienzo .leaflet-popup-tip{
  background:var(--panel);color:var(--tinta);box-shadow:var(--sombra-ventana)}
.mapa-globo a,.mapa-globo strong{font-weight:600;font-size:14px}
.mapa-lienzo .leaflet-tooltip{background:var(--panel);color:var(--tinta);border-color:var(--borde)}
.mapa-lienzo .leaflet-bar{border-color:var(--linea-fuerte)}
.mapa-lienzo .leaflet-bar a{background:var(--panel);color:var(--tinta);border-bottom-color:var(--borde)}
.mapa-lienzo .leaflet-bar a:hover{background:var(--panel2)}
.mapa-lienzo .leaflet-control-attribution{background:var(--vidrio-denso);color:var(--tenue)}
/* Leaflet 1.9 mezcla las imagenes con `plus-lighter`; con la pagina en
   pixeles fraccionarios deja una raya clara entre filas (negra de noche).
   Sin la mezcla no hay raya: se comparo en PC y telefono, claro y oscuro. */
.mapa-lienzo img.leaflet-tile{mix-blend-mode:normal}
/* De noche, las calles tambien: el mismo mapa invertido, sin otro servidor. */
@media (prefers-color-scheme:dark){
  .mapa-lienzo .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88)}
}
.mapa-lista{margin-top:14px}
.mapa-lista h2{font-size:16px;margin-bottom:8px}
.mapa-lista ul{list-style:none;margin:0;padding:0}
.mapa-lista li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--borde)}
.mapa-lista li:first-child{border-top:0}
.mapa-dato{flex:1;min-width:0}
.mapa-dato a{font-weight:600}

/* -- Ficha del marco (Fase C1): app/marco/plantillas/ficha.html ------------- */
.ficha-cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:12px 20px;margin-bottom:16px}
.ficha-quien{min-width:0}
.ficha-volver{font-size:13px}
.ficha-quien .titular{margin:6px 0 2px;overflow-wrap:anywhere}
.ficha-acciones{display:flex;flex-wrap:wrap;gap:8px}
.ficha-acciones form{margin:0}
/* Lo que no tiene vuelta se ve distinto: cancelar, resolver. */
.ficha-acciones .boton.enf-critico{color:var(--texto-critico)}
.ficha-acciones .boton.enf-bien{color:var(--ok)}
/* El veredicto: lo que se lee primero cuando el cliente llama. */
.veredicto{margin-bottom:16px;padding:18px 20px;border-radius:var(--radio);
  border:1px solid var(--borde);border-left:6px solid var(--tenue);background:var(--panel)}
.veredicto h2{font-size:20px;margin:0 0 6px}
.veredicto p{margin:0;font-size:15px;line-height:1.45;color:var(--tinta2)}
.veredicto-bien{border-left-color:var(--ok)}
.veredicto-medio{border-left-color:var(--medio)}
.veredicto-alto{border-left-color:var(--alto)}
.veredicto-critico{border-left-color:var(--critico)}
.veredicto-critico h2{color:var(--texto-critico)}
.veredicto-hechos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px 20px;margin:14px 0 0}
.veredicto-hechos dt,.ficha-campos dt{font-size:12px;color:var(--tenue)}
.veredicto-hechos dd,.ficha-campos dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.ficha-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:14px;align-items:start}
.ficha-tarjeta h2{font-size:16px;margin:0 0 12px}
.ficha-campos{display:grid;gap:10px;margin:0}
.ficha-campos div{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;
  border-bottom:1px solid var(--borde)}
.ficha-campos div:last-child{border-bottom:0;padding-bottom:0}
.ficha-campos dd{text-align:right}
.ficha-campos div.largo{display:block}
.ficha-campos div.largo dd{text-align:left;font-weight:400;margin-top:4px;line-height:1.45}
.ficha-nota{margin:12px 0 0}
.falta{color:var(--tenue);font-weight:400}

/* -- Kanban del marco (Fase C3): app/marco/plantillas/kanban.html ----------- */
.kanban-columnas{display:grid;grid-template-columns:repeat(var(--columnas),minmax(220px,1fr));
  gap:12px;align-items:start;margin-top:12px}
.kanban-columna{background:var(--panel2);border:1px solid var(--borde);border-radius:var(--radio);
  padding:10px;min-height:120px}
.kanban-columna h2{display:flex;align-items:center;justify-content:space-between;
  font-size:14px;margin:2px 4px 10px;color:var(--tinta2)}
.kanban-cuenta{font-variant-numeric:tabular-nums;color:var(--tenue);font-weight:600}
.kanban-tarjeta{padding:10px 12px;margin-bottom:8px;border-left:4px solid var(--borde-fuerte)}
.kanban-tarjeta.tarjeta-critico{border-left-color:var(--critico)}
.kanban-tarjeta.tarjeta-alto{border-left-color:var(--alto)}
.kanban-tarjeta.tarjeta-medio{border-left-color:var(--medio)}
.kanban-tarjeta.tarjeta-bien{border-left-color:var(--ok)}
.kanban-titulo{display:block;font-weight:600;overflow-wrap:anywhere;margin-bottom:6px}
.kanban-campos{display:grid;gap:2px;margin:0 0 8px;font-size:12px}
.kanban-campos div{display:flex;justify-content:space-between;gap:8px}
.kanban-campos dt{color:var(--tenue)}
.kanban-campos dd{margin:0;text-align:right}
.kanban-mover{margin:0;display:flex;justify-content:flex-end}
.kanban-vacio{margin:6px 4px}
/* En el telefono las columnas van una al lado de otra y se deslizan. */
@media (max-width:767px){
  .kanban-columnas{grid-template-columns:repeat(var(--columnas),85%);overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:8px}
  .kanban-columna{scroll-snap-align:start}
}

/* -- "Tu dia" en el tablero (Fase C6): app/web/plantillas/_tablero_dia.html -- */
.tablero-dia{margin:14px 0}
.tablero-dia h2{font-size:18px;margin:0 0 8px}
.tablero-dia ul{list-style:none;margin:0;padding:0}
.tablero-dia li{display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-top:1px solid var(--borde)}
.tablero-dia li:first-child{border-top:0}
.dia-cuando{flex:none;width:44px;font-variant-numeric:tabular-nums;color:var(--tinta2);
  font-size:13px}
.dia-que{flex:1;min-width:0}
.dia-que a{font-weight:600}

/* -- Calendario del marco (Fase B3): app/marco/plantillas/calendario.html ---- */
.calendario{--hora:52px}
.cal-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:12px}
.cal-titulo{font-size:18px;margin:0;flex:1 1 220px}
.cal-ir{display:flex;gap:6px}
.cal-ir .boton{min-width:40px;justify-content:center;font-size:15px}
.cal-vistas{display:inline-flex;padding:3px;border-radius:10px;background:var(--panel2);
  border:1px solid var(--borde)}
.cal-vistas a{padding:5px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--tinta2);
  text-decoration:none}
.cal-vistas a[aria-current=page]{background:var(--panel);color:var(--tinta);box-shadow:var(--sombra)}
.cal-leyenda{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;
  font-size:13px;color:var(--tinta2)}
.cal-leyenda li{display:flex;align-items:center;gap:6px}
.cal-marca{flex:none;width:10px;height:10px;border-radius:3px}
.cal-rejilla{padding:0;overflow:hidden}
.cal-cabeza,.cal-cuerpo{display:grid;grid-template-columns:56px repeat(var(--columnas),minmax(0,1fr))}
.cal-cabeza{border-bottom:1px solid var(--borde);font-size:13px;font-weight:600;color:var(--tinta2)}
.cal-cabeza span{padding:10px 8px;text-align:center;border-left:1px solid var(--borde)}
.cal-cabeza span:first-child{border-left:0}
.cal-cabeza a{color:inherit;text-decoration:none}
.cal-cabeza .hoy,.cal-cabeza .hoy a{color:var(--acento)}
.cal-cuerpo{height:calc(var(--horas) * var(--hora))}
.cal-horas{display:grid;grid-auto-rows:var(--hora);font-size:11px;color:var(--tenue);
  font-variant-numeric:tabular-nums}
.cal-horas span{padding:3px 8px 0 0;text-align:right}
.cal-columna{position:relative;border-left:1px solid var(--borde);
  background-image:linear-gradient(var(--borde) 1px,transparent 1px);background-size:100% var(--hora)}
.cal-columna.hoy{background-color:var(--acento-suave)}
.cita{position:absolute;box-sizing:border-box;padding:4px 6px;border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.25;text-decoration:none;
  color:var(--tinta);background:var(--panel);border:1px solid var(--borde-fuerte);
  border-left:4px solid var(--tenue);box-shadow:var(--sombra)}
a.cita:hover{border-color:var(--acento);border-left-color:var(--acento)}
.cita-hora{font-variant-numeric:tabular-nums;color:var(--tinta2);font-size:11px}
.cita-titulo{font-weight:600;overflow-wrap:break-word;hyphens:auto}
.cita-lugar,.cita-carril{color:var(--tenue);font-size:11px}
.cita.cita-bien,.cal-marca.cita-bien{border-left-color:var(--ok)}
.cita.cita-medio,.cal-marca.cita-medio{border-left-color:var(--medio)}
.cita.cita-alto,.cal-marca.cita-alto{border-left-color:var(--alto)}
.cita.cita-critico,.cal-marca.cita-critico{border-left-color:var(--critico)}
.cal-marca{background:var(--tenue)}
.cal-marca.cita-bien{background:var(--ok)}
.cal-marca.cita-medio{background:var(--medio)}
.cal-marca.cita-alto{background:var(--alto)}
.cal-marca.cita-critico{background:var(--critico)}
.cal-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cal-lista h3{font-size:15px;margin:0 0 6px}
.cal-lista h3.hoy{color:var(--acento)}
.cal-lista ul{list-style:none;margin:0;padding:0}
.cita-fila{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--borde)}
.cita-fila:first-child{border-top:0}
.cita-fila .cita-hora{flex:none;width:76px;font-size:13px}
.cita-datos{flex:1;min-width:0}
.cita-datos a{font-weight:600}
/* En el telefono la rejilla no se lee: va la lista. En PC, la rejilla. */
@media (max-width:767px){.cal-rejilla{display:none}}
@media (min-width:768px){.cal-lista{display:none}}

/* -- Adjuntos del marco (Fase B4): app/marco/plantillas/adjuntos.html -------- */
.adjuntos{margin-top:14px}
.adjuntos h2{font-size:16px;margin-bottom:10px}
.adjuntos-lista{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.adjuntos-lista li{display:flex;align-items:center;gap:12px;padding:8px 0;
  border-top:1px solid var(--borde)}
.adjuntos-lista li:first-child{border-top:0}
.adjunto-vista{flex:none;width:56px;height:56px;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;background:var(--panel2);color:var(--acento)}
.adjunto-vista img{width:100%;height:100%;object-fit:cover}
.adjunto-datos{flex:1;min-width:0}
.adjunto-datos a{font-weight:600;overflow-wrap:anywhere}
.adjuntos-subir{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.adjuntos-subir input[type=file]{font:inherit;font-size:13px;max-width:100%}
.adjuntos-subir input[type=file]::file-selector-button{min-height:34px;margin-right:10px;
  padding:6px 14px;border-radius:8px;border:1px solid var(--linea-fuerte);background:var(--panel);
  color:var(--tinta);font:inherit;font-weight:600;cursor:pointer}
.adjuntos-subir input[type=file]::file-selector-button:hover{background:var(--panel2)}
.adjuntos-subir .sub{flex-basis:100%;margin:0}

/* -- Formulario del marco (Fase B1): app/marco/plantillas/formulario.html ---- */
.formulario-cabeza{margin-bottom:16px}
.formulario-cabeza .sub{max-width:720px;margin-top:6px;font-size:14px}
.aviso-ok{background:var(--fondo-ok);color:var(--texto-ok);padding:9px 12px;border-radius:8px;font-size:13.5px;
  margin-bottom:14px}
.formulario-notas{margin-bottom:14px}
.formulario-notas h2{font-size:15px;margin-bottom:8px}
.formulario-notas ul{margin:0;padding-left:18px;font-size:14px;line-height:1.7;color:var(--tinta2)}
form.formulario fieldset.seccion{border:0;margin:0 0 14px;min-width:0}
form.formulario legend{float:left;width:100%;font-size:16px;font-weight:700;margin-bottom:10px}
.seccion-ayuda{clear:both;margin:0 0 10px}
.rejilla-campos{clear:both;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 14px}
.campo{grid-column:span 6;display:flex;flex-direction:column;gap:5px;min-width:0}
.campo.ancho-medio{grid-column:span 3}
.campo.ancho-tercio{grid-column:span 2}
form.formulario label{font-size:12.5px;font-weight:600;color:var(--tinta2)}
form.formulario input,form.formulario select,form.formulario textarea{font:inherit;font-size:14px;
  padding:9px 11px;border-radius:8px;border:1px solid var(--borde-fuerte);background:var(--campo);
  color:var(--tinta);min-width:0;width:100%}
form.formulario input:focus,form.formulario select:focus,form.formulario textarea:focus{
  outline:2px solid var(--acento-suave);border-color:var(--acento)}
form.formulario label.casilla{display:flex;align-items:center;gap:8px;font-size:14px;
  color:var(--tinta);font-weight:500}
form.formulario label.casilla input{width:auto;accent-color:var(--acento)}
.campo.con-error input,.campo.con-error select,.campo.con-error textarea,
.campo:has(.campo-error) input,.campo:has(.campo-error) textarea{border-color:var(--critico)}
.campo-error{margin:0;font-size:12.5px;color:var(--texto-critico);font-weight:600}
.campo-ayuda{margin:0;font-size:12px;color:var(--tenue)}
.formulario-acciones{display:flex;gap:8px;justify-content:flex-end;margin:4px 0 30px}

/* --- Teléfono: la ventana ocupa todo y el Dock es la barra inferior -------- */

/* -- Asistentes de Configura (docs/DISENO-ASISTENTE-ROUTER-NUEVO.md) -------- */
.asistente-cabeza{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.asistente-cabeza .sub{max-width:640px;margin-top:6px;font-size:14px}
.asistente-icono{flex:none;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acento),var(--acento2));color:#fff;box-shadow:var(--sombra)}
.asistente-aviso{display:flex;gap:16px;align-items:flex-start;max-width:640px}
.asistente-aviso h2{font-size:18px;margin-bottom:6px}
.asistente-aviso .boton{margin-top:12px}
.asistente-error{margin:0 0 14px}
.asistente-formulario>summary.cambiar{cursor:pointer;color:var(--acento);font-weight:600;
  margin:4px 0 12px;font-size:14px}
.paso{margin-bottom:14px}
.paso header{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--acento)}
.paso header h2{font-size:16px;color:var(--tinta)}
.paso-numero,.bloque-numero{flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--acento-suave);color:var(--acento);display:grid;place-items:center;
  font-size:12px;font-weight:700}
.campos{display:grid;gap:12px}
.campos.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.campos.tres{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
form.asistente label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;
  font-weight:600;color:var(--tinta2)}
form.asistente label.corta{max-width:180px}
form.asistente input,form.asistente select{font:inherit;font-size:14px;font-weight:400;
  padding:9px 11px;border-radius:8px;border:1px solid var(--borde-fuerte);background:var(--campo);
  color:var(--tinta);min-width:0}
form.asistente input:focus,form.asistente select:focus{outline:2px solid var(--acento-suave);
  border-color:var(--acento)}
.ayuda{margin:6px 0 12px}
.opcional{font-weight:400;color:var(--tenue)}
fieldset.salida{border:1px solid var(--borde);border-radius:10px;padding:12px 14px;
  margin:10px 0 0;background:var(--panel2)}
fieldset.salida legend{font-size:12px;font-weight:700;color:var(--tenue);padding:0 6px}
details.ip-fija{margin-top:10px}
details.ip-fija summary{cursor:pointer;font-size:12.5px;color:var(--acento)}
details.ip-fija .campos{margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
form.asistente label.chip{flex-direction:row;align-items:center;gap:7px;padding:7px 13px;
  border-radius:999px;border:1px solid var(--borde-fuerte);background:var(--panel);cursor:pointer;
  color:var(--tinta)}
form.asistente label.chip input{padding:0;margin:0;accent-color:var(--acento)}
form.asistente label.chip:has(input:checked){background:var(--acento-suave);
  border-color:var(--acento);color:var(--acento)}
form.asistente label.chip:has(input:disabled){opacity:.55;cursor:not-allowed}
.planes{display:grid;gap:8px;margin-bottom:12px}
.plan,.plan-titulos{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
.plan[hidden]{display:none}
.plan-titulos span{font-size:12px;font-weight:600;color:var(--tenue)}
.asistente-enviar{margin:4px 0 30px}
.boton.grande{min-height:44px;padding:10px 22px;font-size:15px}
.asistente-resultado{margin-bottom:16px}
.resultado-cabeza{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.resultado-cabeza h2{font-size:18px}
.resumen{margin:10px 0 0;padding-left:18px;color:var(--tinta2);font-size:14px;line-height:1.6}
.resultado-acciones{display:flex;gap:8px;align-items:flex-start}
.como-aplicar{margin:16px 0;padding:12px 14px 12px 32px;border-radius:10px;
  background:var(--acento-suave);font-size:13.5px;line-height:1.6}
details.bloque{border-top:1px solid var(--borde);padding:11px 0}
details.bloque summary{cursor:pointer;display:flex;align-items:center;gap:10px;
  font-weight:650;list-style:none}
details.bloque summary::-webkit-details-marker{display:none}
details.bloque p{margin:8px 0;color:var(--tinta2);font-size:13.5px;max-width:720px}
pre.codigo{margin:0;padding:12px 14px;border-radius:10px;background:var(--panel2);
  border:1px solid var(--borde);color:var(--tinta);font-family:var(--letra-mono);
  font-size:12px;line-height:1.55;overflow-x:auto;white-space:pre}


/* -- Panel de control de equipos (docs/DISENO-PANEL-DE-CONTROL.md) --------- */
.control-cabeza{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.control-cabeza .sub{margin-top:4px}
.pastillas{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.control-nota{max-width:760px;margin:0 0 16px;font-size:13.5px}
.centro-control{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;margin-bottom:18px}
/* Los botones de un router llenan la fila: son pocos y se estiran. La lista
   de routers no: crece, y sus tarjetas guardan su tamano. */
.centro-control.llena{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.mosaico{position:relative;display:flex;flex-direction:column;gap:7px;padding:16px;
  border-radius:20px;background:var(--vidrio-denso);border:1px solid var(--borde);
  box-shadow:var(--sombra);color:var(--tinta);text-decoration:none;min-height:156px;
  transition:transform .15s ease,box-shadow .15s ease}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .mosaico{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}}
.mosaico:hover{transform:translateY(-2px);text-decoration:none;
  box-shadow:0 10px 28px rgba(20,32,56,.14)}
.mosaico b{font-size:15px}
.mosaico .sub{font-size:12.5px;line-height:1.4}
.mosaico .estado{margin-top:auto;font-size:12px;font-weight:600;color:var(--acento);line-height:1.35}
.mosaico.no-aplica{background:var(--vidrio-tenue)}
.mosaico.no-aplica .estado{color:var(--tenue);font-weight:500}
.mosaico-icono{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--acento);color:#fff}
.mosaico-icono.naranja{background:#F08A24}
.mosaico.no-aplica .mosaico-icono,.mosaico-icono.gris{background:#C3C8D1}
.mosaico.en-curso .mosaico-icono{background:var(--medio)}
.interruptor{position:absolute;top:18px;right:16px;width:42px;height:24px;border-radius:999px;
  background:var(--interruptor);transition:background .2s}
.interruptor::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:var(--perilla);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.mosaico.en-curso .interruptor{background:var(--medio)}
.mosaico.en-curso .interruptor::after{left:20px}
/* Hecho en el router, segun su configuracion leida: verde y encendido, como en
   el Centro de control de macOS. */
.interruptor.encendido{background:var(--ok)}
.interruptor.encendido::after{left:20px}
.mosaico.hecho .estado{color:var(--texto-ok)}
/* Que sabe SERVYNET del router, y cuando lo leyo. */
.lectura-config{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  margin:0 0 14px;font-size:13px;color:var(--tenue)}
.lectura-config form{margin:0}
.lectura-error{color:var(--critico)}
.boton.chico{min-height:28px;padding:3px 12px;font-size:12.5px}
.control-ordenes h2{font-size:16px;margin-bottom:10px}
.orden{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--borde)}
.orden:first-of-type{border-top:0}
.orden-icono{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--acento-suave);color:var(--acento)}
.hoja-fondo{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;
  align-items:flex-start;padding:7vh 16px;overflow-y:auto;background:rgba(20,32,56,.28)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hoja-fondo{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
.hoja{width:min(560px,100%);background:var(--panel);border-radius:18px;padding:22px;
  box-shadow:0 30px 80px rgba(20,32,56,.35);animation:hoja-entra .22s ease-out}
@keyframes hoja-entra{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.hoja-cabeza{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.hoja-cabeza h2{font-size:19px}
.hoja h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue);
  margin:16px 0 6px}
.hoja ul{margin:0;padding-left:18px;font-size:14px;line-height:1.55;color:var(--tinta2)}
.hoja ul.candados{list-style:none;padding-left:0}
.hoja ul.candados li{display:flex;gap:7px;align-items:baseline;margin-bottom:4px}
.hoja ul.candados svg{flex:none;color:var(--ok);position:relative;top:2px}
.hoja-motivo{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--acento-suave);
  font-size:13.5px;color:var(--tinta2)}
.hoja-comandos{margin-top:14px}
.hoja-comandos summary{cursor:pointer;font-size:13px;color:var(--acento);margin-bottom:8px}
.hoja-comandos .sub{margin:8px 0 6px}
.hoja-acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
@media (prefers-reduced-motion:reduce){.hoja,.pila{animation:none}.mosaico{transition:none}}

@media (max-width:760px){
  .escritorio{padding:0}
  .ventana{border-radius:0;border:0;box-shadow:none}
  .ventana-barra{border-radius:0;padding:10px 12px}
  .semaforo{display:none}
  .buscador{flex:1 1 100%;order:5;margin-left:0}
  /* Un renglon: [regresar] titulo ... punto de estado, cuenta. Abajo, buscar. */
  .ventana-titulo{flex:1 1 0}
  .estado-red.vivo,.estado-red.rancio{padding:0;background:none}
  .estado-red .punto-vivo{width:10px;height:10px}
  .estado-texto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* La procedencia, dicha corta y en un renglon. */
  .procedencia{flex-wrap:nowrap;white-space:nowrap}
  .procedencia-texto{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .solo-amplio{display:none}
  .solo-movil{display:inline}
  /* Aplicaciones se queda en el menu de la cuenta. */
  .dock-sistema{display:none}
  main{padding:14px 14px 120px}
  .semilla,.procedencia{padding-left:14px;padding-right:14px}
  .semilla{flex-wrap:wrap}
  .rejilla{gap:12px}
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tarjeta{padding:14px}
  .cifra{font-size:24px}
  .choque .dias{font-size:34px}
  .choque .dias.texto{font-size:23px}
  /* El Dock entero no cabe: va la barra fija con "Mas" (base.html). */
  .dock{display:none}
  .dock-telefono{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40}
  .dock-telefono .dock-bandeja{width:100%;border-radius:18px 18px 0 0;
    justify-content:space-around;gap:4px;padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
  .pila-mas{max-height:calc(100vh - 140px);overflow-y:auto}
  .pila-mas .pila-rejilla + .pila-titulo{margin-top:16px}
  .dock-icono{width:46px;height:46px;border-radius:12px}
  .dock-app:hover,.dock-app:focus-visible{transform:none}
  /* En el telefono la pila ocupa el ancho, justo encima del Dock. */
  .pila{left:12px;right:12px;bottom:96px;width:auto;max-width:none;transform:none;animation:none}
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .tabla-envoltura table{display:table;white-space:normal}
  /* El formulario, a una columna: un campo por renglon y el boton a lo ancho. */
  .campo.ancho-medio,.campo.ancho-tercio{grid-column:span 6}
  .formulario-acciones{flex-direction:column-reverse}
  .formulario-acciones .boton{width:100%;min-height:44px;justify-content:center;text-align:center}
  /* Las listas, como tarjetas: arriba lo que identifica la fila, abajo cada
     dato con su nombre. Nada se desliza de lado (app/marco/vistas.py, Movil). */
  .tabla-envoltura.lista-tarjetas{overflow:visible}
  .tabla-envoltura.lista-tarjetas table,.lista-tarjetas tbody{display:block}
  .lista-tarjetas thead{display:none}
  .lista-tarjetas tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;
    padding:14px 2px;border-bottom:1px solid var(--borde)}
  .lista-tarjetas tbody tr:hover{background:none}
  .lista-tarjetas td{display:block;min-width:0;padding:0;border:0;text-align:left;
    overflow-wrap:anywhere}
  /* El nombre arriba y el valor abajo: si un nombre ocupa dos lineas, los
     valores de esa fila siguen alineados. */
  .lista-tarjetas td:not(.acciones){display:flex;flex-direction:column;
    justify-content:space-between;gap:2px}
  .lista-tarjetas td::before{content:attr(data-etiqueta);font-size:11.5px;font-weight:600;
    line-height:1.25;color:var(--tenue)}
  .lista-tarjetas td.m-titulo{grid-column:1/-1;order:-1;font-size:15px;font-weight:600}
  .lista-tarjetas td.m-titulo::before,.lista-tarjetas td.acciones::before{content:none}
  .lista-tarjetas td.m-oculta{display:none}
  .lista-tarjetas td.acciones{grid-column:1/-1;white-space:normal}
  .lista-tarjetas td.seleccion{grid-column:1/-1;order:-2;width:auto;text-align:left}
  .lista-tarjetas td.seleccion::before{content:none}
  .lista-tarjetas button.accion{margin:0 6px 0 0}
  .red-pista{display:block}
  .campos.dos,.campos.tres{grid-template-columns:1fr}
  .plan,.plan-titulos{grid-template-columns:1.4fr 1fr 1fr}
  .asistente-icono{width:44px;height:44px;border-radius:12px}
  .centro-control{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .mosaico{min-height:140px;padding:14px;border-radius:18px}
  .hoja-fondo{padding:0;align-items:flex-end}
  .hoja{border-radius:18px 18px 0 0;max-height:92vh;overflow-y:auto}
}

/* --- La plataforma (app/plataforma): el superadministrador --------------- */
.modo-plataforma{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 22px;background:#0B1F4D;
  color:#fff;font-size:13.5px}
.plataforma-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-left:auto}
.plataforma-nav a{font-weight:600}
.plataforma-en-linea{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.clave-totp{display:block;font-size:18px;letter-spacing:.08em;padding:10px 12px;margin:6px 0 12px;
  border-radius:10px;background:var(--panel2);word-break:break-all;user-select:all}