/* SismoGuard · panel.css. Era el <style> de index.html; se partio el 16/09/2026 para que el navegador lo
   guarde (nginx lo sirve con cache larga y lleva marca de version ?v= que pone desplegar.py). Se edita aqui. */
:root{
  /* ---- LA ESCALA TIPOGRAFICA, la misma en el sitio y en el panel ----------------------------------
     Nueve pasos y ni uno mas. Antes habia 23 tamanos distintos en este fichero, con saltos de medio
     pixel: eso no se lee como jerarquia, se lee como descuido. Si hace falta un tamano que no esta,
     casi siempre lo que hace falta es otro peso o otro color, no otro tamano. */
  --t-micro:11px;
  --t-mini:12px;
  --t-peq:13px;
  --t-base:14px;
  --t-cuerpo:16px;
  --t-medio:18px;
  --t-grande:21px;
  --t-titulo:26px;
  --t-gordo:32px;
  --t-enorme:40px;

  /* ---- escala zinc de Tailwind: la que usa sismoguard.com ---- */
  --zinc950:#09090b; --zinc900:#18181b; --zinc850:#1f1f23; --zinc800:#27272a;
  --zinc700:#3f3f46; --zinc500:#71717a; --zinc400:#a1a1aa; --zinc300:#d4d4d8;

  --fondo:var(--zinc950);
  --sup:var(--zinc900);
  --sup2:var(--zinc850);
  --linea:#ffffff14;          /* borde a blanco 10-12 %, como shadcn */
  --linea2:#ffffff24;
  --texto:#fafafa;
  --suave:var(--zinc400);
  --tenue:var(--zinc500);

  /* ---- el ambar de la marca ---- */
  --marca:#fbbf24;            /* amber-400, el que mas sale en su web */
  --marca600:#f59e0b;         /* amber-500, el de los botones */
  --marca-f:#fbbf2418;
  --sobre-marca:#09090b;      /* texto sobre ambar: casi negro, como en su web */

  /* ---- estados: separados del ambar a proposito ---- */
  --bien:#4ade80;  --bien-f:#4ade8016;
 /* nombres que el panel del cliente ya usaba sin que existieran (bordes rojos, «Guardado.» en verde,
    la caja del codigo de Telegram): alias de los de arriba, para no tocar cien sitios */
 --rojo:var(--mal); --verde:var(--bien); --aviso:var(--ojo); --malo:var(--mal); --vivo:var(--bien);
 --fondo2:var(--sup2); --panel2:var(--sup2); --borde:var(--linea2);
  --ojo:#fb923c;   --ojo-f:#fb923c18;
  --mal:#f87171;   --mal-f:#f8717118;

  --r:12px; --r2:16px;
  --fuente:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sombra:0 1px 2px #00000040, 0 8px 28px #00000030;
}

*{box-sizing:border-box}

/* --- barras de desplazamiento: finas y discretas -----------------------------------------------
   Las del sistema son gruesas, grises y de otro siglo; rompen cualquier diseño oscuro. Estas solo
   se ven cuando hace falta y usan el mismo gris que las líneas del panel. */
*{scrollbar-width:thin;scrollbar-color:#ffffff1f transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#ffffff17;border-radius:99px;border:3px solid transparent;
  background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#ffffff33;background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:400 var(--t-base)/1.55 var(--fuente);-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01"}
a{color:var(--marca);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:8px}
.oculto{display:none!important}
.suave{color:var(--suave)}
.verde{color:var(--bien)} .ambar{color:var(--marca)} .rojo{color:var(--mal)}
.cian{color:var(--marca)} .morado{color:var(--ojo)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- la marca ---------- */
/* LA MARCA: el mismo escudo y la misma palabra que sismoguard.com (decision del dueno, 15/09/2026).
   Antes el panel llevaba una onda sobre un cuadrado ambar y la landing un escudo: dos logos para una
   empresa. El escudo va en vector dentro de la pagina (web-landing/img/escudo-simple.svg) y la palabra
   se escribe con Saira, como alli: en el dibujo original «GUARD» monta sobre «SISMO». */
.marca{display:flex;align-items:center;gap:9px}
.marca svg{flex:none;height:28px;width:auto;color:var(--ambar,#fbbf24)}
.marca .nombre{font-family:"Saira",var(--fuente,inherit);font-weight:900;font-style:italic;
  font-size:var(--t-grande);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.marca .nombre .s{color:#fff}
.marca .nombre .g{color:var(--ambar,#fbbf24)}
.eyebrow{font-size:var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:var(--tenue)}

/* ---------- acceso ---------- */
#arranque{min-height:100vh;min-height:100dvh;display:grid;place-items:center}
#arranque .marca{opacity:.55}
#acceso{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;
  background:var(--fondo)}
#acceso::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 400px at 50% -5%, #fbbf2412, transparent 70%)}
#acceso .tarjeta{width:min(390px,100%);position:relative;padding:32px;border-radius:var(--r2)}
label{display:block;margin:16px 0 7px;color:var(--suave);font-size:var(--t-peq);font-weight:500}
input,select,textarea{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--linea2);
  background:#0d0d0f;color:var(--texto);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marca);
  box-shadow:0 0 0 3px var(--marca-f)}
input[type=checkbox]{width:auto;accent-color:var(--marca600)}
button{cursor:pointer;border:0;border-radius:999px;padding:9px 18px;font:inherit;font-weight:600;
  font-size:var(--t-base);background:var(--marca600);color:var(--sobre-marca);transition:filter .12s}
button:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.4;cursor:default}
button.plano{background:transparent;color:var(--suave);border:1px solid var(--linea2)}
button.plano:hover:not(:disabled){color:var(--texto);border-color:var(--linea2);background:#ffffff0a}
button.plano.rojo{color:var(--mal);border-color:#f8717128}
button.plano.rojo:hover:not(:disabled){color:var(--mal);background:var(--mal-f);border-color:var(--mal)}
.error{color:var(--mal);margin-top:12px;font-size:var(--t-peq);min-height:18px}

/* ---------- estructura: panel lateral + contenido ---------- */
#app{display:grid;grid-template-columns:238px 1fr;height:100vh;overflow:hidden}

/* --- panel lateral --- */
aside.lado{background:var(--sup);border-right:1px solid var(--linea);display:flex;
  flex-direction:column;overflow:hidden}
aside.lado .cab{padding:18px 18px 14px;border-bottom:1px solid var(--linea)}
aside.lado nav{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
aside.lado .sep{color:var(--tenue);font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.18em;
  font-weight:700;margin:16px 10px 7px}
aside.lado nav a{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:10px;
  color:var(--suave);font-size:var(--t-base);font-weight:500;text-decoration:none;
  transition:background .12s,color .12s}
aside.lado nav a i{width:16px;height:16px;flex:none;opacity:.6;display:block}
aside.lado nav a:hover{background:#ffffff0a;color:var(--texto);text-decoration:none}
aside.lado nav a:hover i{opacity:.9}
aside.lado nav a.activo{background:var(--marca600);color:var(--sobre-marca);font-weight:600}
aside.lado nav a.activo i{opacity:1}
aside.lado .pie{padding:12px 14px;border-top:1px solid var(--linea);display:flex;
  align-items:center;gap:10px}
aside.lado .pie .quien{flex:1;min-width:0;color:var(--tenue);font-size:var(--t-micro);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis}

/* --- contenido --- */
main{display:flex;flex-direction:column;overflow:hidden;min-width:0}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 26px;border-bottom:1px solid var(--linea);flex:none}
h1{font-size:var(--t-grande);font-weight:800;letter-spacing:-.04em;margin:0}
#vista{padding:20px 26px 50px;overflow-y:auto;flex:1;min-width:0}
h2{font-size:var(--t-micro);letter-spacing:.17em;text-transform:uppercase;color:var(--tenue);
  font-weight:700;margin:26px 0 12px}

.buscar{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--linea2);background:#0d0d0f;color:var(--tenue);font-size:var(--t-peq);
  cursor:pointer;flex:none}
.buscar:hover{border-color:var(--marca);color:var(--suave)}
.buscar kbd{font-family:var(--mono);font-size:var(--t-micro);background:#ffffff12;padding:1px 5px;
  border-radius:4px}

/* --- el mapa a sangre --- */
main.sangre #vista{padding:0}
main.sangre #mapa{height:100%;border:0;border-radius:0;min-height:0}
main.sangre #vista{display:flex;flex-direction:column}

/* --- buscador de acciones (Ctrl+K) --- */
#paleta{position:fixed;inset:0;z-index:10001;background:#09090bd9;backdrop-filter:blur(8px);
  display:grid;place-items:start center;padding:12vh 20px}
#paleta .caja{width:min(560px,100%);background:var(--sup);border:1px solid var(--linea2);
  border-radius:18px;box-shadow:var(--sombra);overflow:hidden}
#paleta input{border:0;border-bottom:1px solid var(--linea);border-radius:0;background:transparent;
  padding:16px 18px;font-size:var(--t-cuerpo)}
#paleta input:focus{box-shadow:none;border-color:var(--linea)}
#paleta .lista{max-height:min(46vh,380px);overflow-y:auto;padding:6px}
#paleta .op{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  cursor:pointer;font-size:var(--t-base)}
#paleta .op .g{color:var(--tenue);font-size:var(--t-micro);margin-left:auto;text-transform:uppercase;
  letter-spacing:.1em}
#paleta .op.sel{background:var(--marca600);color:var(--sobre-marca)}
#paleta .op.sel .g{color:#09090b99}

/* ---------- cifras ---------- */
.rejilla{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.dato{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r2);padding:16px 17px;
  display:flex;flex-direction:column;gap:3px}
.dato .n{font-size:var(--t-titulo);font-weight:800;letter-spacing:-.045em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.dato .t{color:var(--suave);font-size:var(--t-peq);line-height:1.35}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;
  background:var(--sup);border:1px solid var(--linea);border-radius:var(--r2);overflow:hidden}
th,td{padding:11px 15px;text-align:left;font-size:var(--t-base);border-bottom:1px solid var(--linea)}
th{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);font-weight:700;
  background:var(--sup2)}
tbody tr:hover{background:#ffffff07}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- pastillas de estado: la forma que mas usa su web ---------- */
.eti{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:var(--t-mini);font-weight:600;white-space:nowrap;border:1px solid transparent}
.eti::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.e-vivo{background:var(--bien-f);color:var(--bien);border-color:#4ade8028}
.e-aviso{background:var(--ojo-f);color:var(--ojo);border-color:#fb923c28}
.e-malo{background:var(--mal-f);color:var(--mal);border-color:#f8717128}
.e-gris{background:#ffffff0d;color:var(--suave);border-color:var(--linea)}

/* ---------- bloques ---------- */
.tarjeta{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r2);padding:18px 20px}
.vacio{padding:46px 24px;text-align:center;color:var(--suave);background:var(--sup);
  border:1px dashed var(--linea2);border-radius:var(--r2)}
.fila{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* ---------- latencia real de las estaciones ---------- */
/* Fichas pequenas y en rejilla: son 180 y tienen que caber sin que la pagina se haga un kilometro. La
   anchura fija de la cifra es lo que evita que la ficha cambie de tamano cada segundo al pasar de
   «59 s» a «1 m 00 s» — con 180 fichas bailando no se puede leer ninguna. */
.latcaja{margin-top:12px;background:var(--sup);border:1px solid var(--linea);
  border-radius:var(--r2);padding:14px 16px}
.latcaja .tit{font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--tenue);
  margin-bottom:10px}
.latcaja .tit b{color:var(--texto);font-weight:700;letter-spacing:normal;text-transform:none;
  font-size:var(--t-peq)}
.latcaja .nota{color:var(--tenue);font-size:var(--t-mini);margin-top:12px;line-height:1.55}
/* Cerrada, la caja es una linea: el mapa se queda con la pantalla. Abierta, la rejilla aparece debajo
   y no encima —tapar el mapa con la lista de estaciones seria cambiar un problema por el otro—. */
.lat-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lat-cab .tit{margin:0;flex:1 1 320px}
.lat-cab button{flex:none;font-size:var(--t-mini)}
.latcaja[data-abierta="0"] #lat_lista{display:none}
.latcaja[data-abierta="0"] .nota{display:none}
.latcaja[data-abierta="1"] #lat_lista{margin-top:12px}
.lat-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px;
  max-height:min(46vh,340px);overflow:auto}
/* Sin numero: la ficha lleva el motivo, y en letra mas chica porque es texto y no una cifra. */
.lat-chip.sin>span[data-lat-cod]{font-size:var(--t-micro);opacity:.85;min-width:64px}
.lat-chip{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;cursor:pointer;
  background:var(--sup2);border:1px solid var(--linea);font-size:var(--t-mini);line-height:1.2}
.lat-chip:hover{border-color:var(--tenue)}
.lat-chip b{color:var(--suave);font-weight:600;font-size:var(--t-peq)}
.lat-chip>span[data-lat-cod]{margin-left:auto;font-variant-numeric:tabular-nums;
  min-width:56px;text-align:right}
.lat-chip i.vivo{color:#22c55e;font-style:normal;font-size:14px;line-height:0}

/* ---------- mapa ---------- */
/* El aspecto va en `.mapa-sg` y no en `#mapa`: hay dos mapas en el panel -la red y la cobertura- y
   tienen que parecer el mismo producto. Cuando esto colgaba del identificador, el segundo salia con el
   fondo claro de fabrica y los globos blancos. */
.mapa-sg{border-radius:var(--r2);border:1px solid var(--linea);background:#0d0d0f}
#mapa{height:calc(100vh - 200px);min-height:400px}
.mapa-sg .leaflet-control-attribution{background:#09090baa;color:var(--tenue);font-size:var(--t-micro);
  padding:2px 7px;border-radius:8px 0 0 0}
.mapa-sg .leaflet-control-attribution a{color:var(--tenue)}

/* --- leyenda del mapa --- */
.leyenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;
  margin-top:12px}
.leyenda .cuadro{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r2);
  padding:14px 16px}
.leyenda .tit{font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--tenue);
  font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:9px}
.leyenda .tit b{color:var(--texto);font-weight:700}
.leyenda .lista{display:flex;flex-wrap:wrap;gap:6px 14px}
.leyenda .it{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-peq);color:var(--suave)}
.leyenda .it .mk{width:9px;height:9px;border-radius:50%;flex:none}
.leyenda .it .mk.rombo{border-radius:2px;transform:rotate(45deg)}
/* Circulo hueco: la misma forma que en el mapa para las estaciones de archivo. La forma tiene que
   coincidir con la del mapa o la leyenda no explica nada. */
.leyenda .it .mk.hueco{background:transparent!important;border:2px solid;box-sizing:border-box}
.leyenda .it .mk.tenue{opacity:.5;width:7px;height:7px}
.leyenda .nota{color:var(--tenue);font-size:var(--t-mini);margin-top:10px;line-height:1.55}
.mapa-sg .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.72) contrast(.92)
  saturate(.7);opacity:.7}
.mapa-sg .leaflet-popup-content-wrapper,.mapa-sg .leaflet-popup-tip{background:var(--sup2);
  color:var(--texto);border-radius:12px}
.mapa-sg .leaflet-control-layers{background:var(--sup2);color:var(--texto);
  border:1px solid var(--linea2);border-radius:12px}
.mapa-sg .leaflet-bar a{background:var(--sup2);color:var(--texto);border-color:var(--linea)}

/* ---------- ventanas ---------- */
.capa,#visor{position:fixed;inset:0;background:#09090be6;backdrop-filter:blur(8px);
  display:grid;place-items:center;z-index:9999;padding:22px}
.capa>.caja,#visor .caja{background:var(--sup);border:1px solid var(--linea2);border-radius:20px;
  padding:0;width:min(960px,100%);max-height:92vh;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:var(--sombra)}
/* Cabecera fija, cuerpo que se desplaza, pie con los botones siempre a la vista. Antes todo era un
   bloque largo con los botones perdidos en medio: había que buscarlos desplazándose. */
.m-cab{padding:20px 24px 16px;border-bottom:1px solid var(--linea);display:flex;
  align-items:flex-start;gap:14px;flex:none}
.m-cab .txt{flex:1;min-width:0}
.m-cab h3{font-size:var(--t-medio);font-weight:700;letter-spacing:-.03em;margin:0}
.m-cab .sub{color:var(--tenue);font-size:var(--t-mini);margin-top:3px;font-family:var(--mono)}
/* Las lineas de prosa bajo la fecha (la hora de la primera estacion, el veredicto de los avisos) van en la
   letra normal: la mono es para la fecha y los identificadores, y en un parrafo se lee raro. */
.m-cab .sub.nota{font-family:inherit;color:var(--suave);font-size:var(--t-peq);line-height:1.45;margin-top:5px;max-width:70ch}
/* La segunda linea de una celda: el detalle que explica el estado, o el motivo de quien la mando.
   Va mas pequena y apagada a proposito -es la letra pequena de la fila, no compite con el dato. */
/* ---------- el modal propio, en lugar de las ventanitas del navegador ---------- */
/* 2147483000: el techo. Por debajo estaban la ficha (9999), la banda de aviso (10000), el
   buscador (10001) y los desplegables (10050), y un aviso podia salir DEBAJO de lo que lo
   tapaba: invisible, y el panel esperando una respuesta que nadie podia dar. */
body.con-modal{overflow:hidden}
.mod-fondo{position:fixed;inset:0;background:#000000a8;backdrop-filter:blur(3px);z-index:2147483000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:mod-entra .12s ease-out}
@keyframes mod-entra{from{opacity:0}to{opacity:1}}
.mod{background:var(--sup);border:1px solid var(--linea);border-radius:14px;width:100%;
  max-width:440px;box-shadow:0 24px 60px #000000a0;overflow:hidden;
  animation:mod-sube .14s cubic-bezier(.2,.9,.3,1)}
@keyframes mod-sube{from{transform:translateY(8px) scale(.99)}to{transform:none}}
.mod h3{margin:0;padding:16px 18px 0;font-size:var(--t-cuerpo);font-weight:650;letter-spacing:-.01em}
.mod .cuerpo{padding:12px 18px 4px;color:var(--suave);font-size:var(--t-base);line-height:1.6;
  white-space:pre-wrap;max-height:52vh;overflow-y:auto}
.mod .cuerpo b{color:var(--texto)}
.mod input,.mod select{margin:12px 18px 0;width:calc(100% - 36px)}
.mod .pie{display:flex;gap:8px;justify-content:flex-end;padding:16px 18px;flex-wrap:wrap}
.mod .pie button{min-width:96px}
.mod.malo{border-color:#f8717155}
.mod.malo h3{color:var(--mal)}
@media (max-width:520px){ .mod .pie{flex-direction:column-reverse}
  .mod .pie button{width:100%} }
.ap{color:var(--suave);margin:6px 0 0;line-height:1.55}
/* El globo de un mensaje que aún no ha salido: se ve, pero apagado. Enseñar lo escrito no
   depende de que haya llegado; distinguir lo uno de lo otro, sí. */
.glo .tic.esperando{opacity:.65;font-size:var(--t-micro);font-style:italic}
.glo .tic.falló{color:var(--mal);font-size:var(--t-micro);font-weight:600}

td .sub{color:var(--tenue);font-size:var(--t-mini);margin-top:3px;line-height:1.4;max-width:320px}
/* El filtro elegido tiene que verse elegido; si no, no se sabe que lista se esta mirando. */
button.plano.activo{background:var(--marca600);color:var(--sobre-marca);border-color:var(--marca600)}
.m-cuerpo{padding:20px 24px;overflow-y:auto;flex:1;min-height:0}
.m-pie{padding:14px 24px;border-top:1px solid var(--linea);display:flex;gap:9px;align-items:center;
  flex:none;background:var(--sup2)}
.m-pie .der{margin-left:auto;display:flex;gap:9px}
.cerrar{cursor:pointer;color:var(--suave);font-size:var(--t-grande);line-height:1;padding:2px 6px;
  border-radius:8px;flex:none;background:transparent;border:0}
.cerrar:hover{color:var(--texto);background:#ffffff0d}
.capa canvas,#visor canvas{width:100%;height:auto;display:block;max-width:100%;
  border-radius:12px;background:#0d0d0f;border:1px solid var(--linea)}
.cerrar{float:right;cursor:pointer;color:var(--suave);font-size:var(--t-grande);line-height:1;padding:0 4px}
.cerrar:hover{color:var(--texto)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}

/* --- formularios de los modales ---------------------------------------------------------------
   Cada campo es UNA celda con su etiqueta dentro. Antes etiqueta y control eran hermanos y la
   rejilla los separaba en columnas distintas: la etiqueta a la izquierda y su recuadro a medio
   modal de distancia. */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 18px}
.campo{display:flex;flex-direction:column;min-width:0}
.campo.ancho{grid-column:1/-1}
.campo label{margin:0 0 6px;font-size:var(--t-mini);font-weight:500;color:var(--suave)}
.campo input,.campo select,.campo textarea{width:100%}
.campo textarea{resize:vertical;min-height:74px}

/* de solo lectura: etiqueta y valor en dos lineas, sin recuadro. No es un campo, es un dato. */
.campos.leer{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 18px}
.campo.leer{gap:2px;padding:9px 12px;background:var(--sup2);border:1px solid var(--linea);
  border-radius:10px}
.campo.leer .et{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--tenue);
  font-weight:700}
.campo.leer .val{font-size:var(--t-base);font-family:var(--mono);word-break:break-word}

/* casillas: juntas, en su fila, no mezcladas con los recuadros */
.casillas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 18px}
.campo.casilla{flex-direction:row;align-items:center;gap:9px;cursor:pointer;padding:7px 11px;
  border:1px solid var(--linea);border-radius:10px;background:var(--sup2);font-size:var(--t-base)}
.campo.casilla:hover{border-color:var(--linea2)}
.campo.casilla input{width:auto;flex:none}

/* casillas de varias con muchas opciones (ciudades extra, etc.): caja de busqueda arriba, scroll abajo,
   para que una lista larga no estire el modal ni la celda entera. */
.multi-buscable{border:1px solid var(--linea);border-radius:10px;padding:8px;background:var(--sup2)}
.multi-buscable .buscar-multi{width:100%;margin-bottom:7px}
.multi-buscable .casillas{display:block;max-height:180px;overflow-y:auto;gap:0}
.multi-buscable .casillas label{display:flex;align-items:center;gap:8px;padding:4px 2px;margin:0}
.multi-buscable .casillas label.oculta{display:none}

/* --- buscador propio (departamento, municipio) -------------------------------------------------
   Los <select> y <datalist> los dibuja el sistema: fondo blanco, tipografia del sistema, y se salen
   del modal. Este se ve como el resto y se comporta igual en todas partes. */
.combo{position:relative}
.combo input{padding-right:34px}
.combo .flecha{position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;
  color:var(--tenue);font-size:var(--t-micro)}
.combo-lista{position:fixed;z-index:10050;background:var(--sup2);border:1px solid var(--linea2);
  border-radius:12px;box-shadow:var(--sombra);overflow-y:auto;max-height:min(320px,48vh);padding:5px}
.combo-lista .op{padding:8px 11px;border-radius:8px;cursor:pointer;font-size:var(--t-base);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-lista .op small{color:var(--tenue);margin-left:7px;font-size:var(--t-mini)}
.combo-lista .op:hover{background:#ffffff0d}
.combo-lista .op.sel{background:var(--marca600);color:var(--sobre-marca)}
.combo-lista .op.sel small{color:#09090b99}
.combo-lista .nada{padding:12px;color:var(--tenue);font-size:var(--t-peq);text-align:center}

.reco{font-size:var(--t-mini);color:var(--suave);margin-top:7px;line-height:1.55;
  background:var(--marca-f);border:1px solid #fbbf2433;border-radius:9px;padding:8px 11px}
.reco:empty{display:none}
.reco b{color:var(--texto)}
.reco button{margin-left:6px;padding:3px 10px;font-size:var(--t-mini)}

h4.grupo{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);
  font-weight:700;margin:22px 0 10px}
.m-cuerpo>*:first-child{margin-top:0}
.fichas{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.ficha{background:var(--sup2);border:1px solid var(--linea);border-radius:12px;padding:9px 14px;
  min-width:0}
.ficha .r{font-size:var(--t-micro);color:var(--tenue);text-transform:uppercase;letter-spacing:.14em;
  font-weight:700}
.ficha .v{font-size:var(--t-cuerpo);font-weight:600;margin-top:2px}
.pie{color:var(--suave);font-size:var(--t-peq);margin-top:12px;line-height:1.65}

/* ---------- aviso que salta ---------- */
/* LA BANDA DE ALERTA VA POR ENCIMA DE TODO, y por eso su numero es el mas alto de la casa: es un
   aviso de terremoto. Estaba por debajo del cajon del menu (10002), asi que con el menu abierto un
   aviso quedaba medio tapado. Nada de la interfaz vale mas que eso. */
#banda{position:fixed;top:0;left:0;right:0;z-index:10010;padding:13px 20px;font-weight:600;
  display:flex;align-items:center;gap:12px;box-shadow:0 8px 30px #000a;
  animation:entra .22s cubic-bezier(.2,.8,.2,1)}
#banda.alarma{background:#f87171;color:#1a0505}
#banda.aviso{background:var(--marca600);color:var(--sobre-marca)}
#banda.prueba{background:var(--zinc800);color:var(--texto)}
#banda button{background:#0000002e;color:inherit;padding:5px 13px;font-size:var(--t-peq)}
@keyframes entra{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){#banda{animation:none}}

/* El boton del menu solo existe en movil: en escritorio el lateral esta siempre a la vista. */
#b_menu{display:none;padding:8px 10px;line-height:0;flex:none}

@media(max-width:900px){
  /* Una sola columna: el lateral ya no ocupa sitio porque se sale de la pantalla. */
  #app{grid-template-columns:1fr;height:100vh;height:100dvh;overflow:hidden}

  #b_menu{display:inline-flex;align-items:center}

  /* EL CAJON. Fuera de la pantalla hasta que se abre. `translateX` y no `left`, que se anima en la
     tarjeta grafica y no obliga al navegador a recalcular el hueco de todo lo demas. */
  aside.lado{position:fixed;top:0;bottom:0;left:0;z-index:10002;
    width:min(86vw,320px);border-right:1px solid var(--linea);border-bottom:0;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 40px #000000a6;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  aside.lado.abierto{transform:none}
  /* La lista, en vertical y con sus titulos de grupo: es lo que se perdia en la tira de antes. */
  aside.lado nav{flex-direction:column;overflow-x:visible;overflow-y:auto;padding:10px 10px 18px}
  aside.lado .sep{display:block}
  aside.lado nav a{white-space:normal}
  /* Sin hueco de muesca aqui: el cajon entero ya lo lleva (esta fijo en el borde de la pantalla) y
     sumarlo otra vez daria el doble del espacio que hace falta. */
  aside.lado .cab{padding:14px 16px}

  #velo-menu{position:fixed;inset:0;z-index:10001;background:#09090bc4;backdrop-filter:blur(2px)}
  /* Con el cajon abierto, el fondo no se desplaza: si no, se arrastra la pagina de detras y al cerrar
     uno no sabe donde esta. */
  body.menu-abierto{overflow:hidden}

  main{overflow:hidden}
  #vista{padding:16px;overflow-y:auto}
  header{padding:13px 16px}
  h1{font-size:var(--t-medio);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .buscar span{display:none}
  .dos{grid-template-columns:1fr}
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  aside.lado{transition:none}
}

/* (07/10/2026) Del chat viejo «.wa» solo quedan las reglas que el modal de Tickets reusa: .col, .cab, .ini,
   .mensajes, .escribir y .eti. El resto (lista, globos, atar, ficha lateral) se fue con el motor. */
.wa .col{background:var(--sup);border:1px solid var(--linea);border-radius:16px;display:flex;
  flex-direction:column;overflow:hidden;min-width:0;min-height:0}

/* --- la cabecera de cada columna --- */
.wa .cab{padding:12px 15px;border-bottom:1px solid var(--linea);display:flex;gap:12px;
  align-items:center;flex:none;min-height:60px}
.wa .cab .quien{flex:1;min-width:0}
.wa .cab .quien b{display:block;font-size:var(--t-base);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.wa .cab .quien span{font-size:var(--t-mini);color:var(--tenue)}

.wa .ini{width:40px;height:40px;border-radius:999px;flex:none;display:grid;place-items:center;
  font-weight:600;font-size:var(--t-cuerpo);background:#ffffff12;color:var(--suave)}

/* --- el hilo --- */
.wa .mensajes{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:6px;
  scroll-behavior:smooth}

/* --- escribir --- */
.wa .escribir{border-top:1px solid var(--linea);padding:10px;display:flex;gap:8px;flex:none;
  align-items:flex-end}
.wa .escribir textarea{flex:1;resize:none;height:42px;max-height:140px;font:inherit;font-size:var(--t-base);
  background:var(--fondo);border:1px solid var(--linea2);border-radius:14px;padding:11px 14px;
  color:var(--texto);outline:none}
.wa .escribir textarea:focus{border-color:var(--marca600);box-shadow:0 0 0 3px var(--marca-f)}

.wa .eti{display:inline-block;font-size:var(--t-micro);font-weight:600;padding:1px 7px;border-radius:999px;
  background:#ffffff14;color:var(--suave);margin-left:6px;vertical-align:middle}

/* ---------- instalar un aparato ----------
   El codigo se lee en pantalla mientras se teclea en OTRO aparato —el movil, delante de la caja—,
   asi que va grande, muy separado y en tipografia de anchura fija: es lo que evita confundir un
   cero con una O. Por eso mismo el codigo no lleva ni ceros ni oes. */
.dos-columnas{display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,1.2fr);gap:14px;
  align-items:start;margin-bottom:8px}
@media(max-width:820px){.dos-columnas{grid-template-columns:1fr}}
.codigo-grande{background:var(--fondo);border:1px solid var(--marca600);border-radius:16px;
  padding:22px;text-align:center;margin:0 0 6px}
.codigo-grande .c{color:var(--marca);font-size:var(--t-enorme);font-weight:700;letter-spacing:.24em;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.2;
  -webkit-user-select:all;user-select:all}
.codigo-grande .d{color:var(--tenue);font-size:var(--t-peq);margin-top:10px}
.pasos{counter-reset:paso;list-style:none;padding:0;margin:0}
.pasos li{counter-increment:paso;position:relative;padding:0 0 16px 42px;color:var(--suave);
  font-size:var(--t-base);line-height:1.6}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:-1px;width:27px;height:27px;
  border-radius:999px;background:var(--marca600);color:var(--sobre-marca);font-weight:700;
  font-size:var(--t-peq);display:grid;place-items:center}
.pasos li b{color:var(--texto)}
.pasos li:last-child{padding-bottom:0}
.wifi-nombre{background:var(--sup2);border:1px solid var(--linea2);border-radius:8px;
  padding:2px 9px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--t-peq);
  color:var(--marca)}

/* ---------- de quien es el estado ----------
   Un estado puesto a mano no es lo mismo que uno comprobado por el sistema hace diez segundos, y en
   una tabla de cincuenta aparatos hay que poder distinguirlos de un vistazo. */
.a-mano{display:inline-block;margin-left:6px;font-size:var(--t-micro);font-weight:700;padding:1px 6px;
  border-radius:999px;background:#ffffff1a;color:var(--suave);vertical-align:middle;
  letter-spacing:.03em;cursor:help}
.aviso-mano{display:flex;gap:11px;align-items:flex-start;background:var(--sup2);
  border:1px solid var(--linea2);border-radius:12px;padding:12px 14px;margin:0 0 12px;
  font-size:var(--t-peq);color:var(--suave);line-height:1.55}
.aviso-mano b{color:var(--texto)}
.aviso-mano .icono{font-size:var(--t-cuerpo);line-height:1.2;flex:none}

/* ---------- el paso de la ubicación, antes del código ----------
   El código se tapa hasta que el cliente da su ubicación. No es un adorno: es la única ocasión en la
   que hay un GPS a un metro del aparato, y si se deja pasar ya nadie vuelve a corregirlo. */
.paso-ubi{background:var(--fondo);border:1px solid var(--marca600);border-radius:16px;padding:20px;
  margin:0 0 14px}
.paso-ubi h5{margin:0 0 8px;font-size:var(--t-cuerpo);color:var(--marca);font-weight:600}
.paso-ubi p{margin:0 0 16px;font-size:var(--t-base);color:var(--suave);line-height:1.6}
.paso-ubi .listo{color:var(--bien);font-weight:600;font-size:var(--t-base);display:flex;gap:9px;
  align-items:center}
.codigo-tapado{position:relative}
.codigo-tapado .codigo-grande .c{filter:blur(11px);user-select:none;pointer-events:none}
.codigo-tapado .tapa-cod{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-size:var(--t-peq);color:var(--tenue);padding:14px;line-height:1.5}

/* ---------- el botón de «dónde estoy» en el mapa ---------- */
.leaflet-control.sg-yo a{width:34px;height:34px;line-height:34px;display:block;text-align:center;
  background:var(--sup);color:var(--texto);font-size:var(--t-medio);border-radius:8px;cursor:pointer;
  border:1px solid var(--linea2);text-decoration:none}
.leaflet-control.sg-yo a:hover{background:var(--sup2);color:var(--marca)}
.leaflet-control.sg-yo a.buscando{color:var(--marca);animation:latir 1.1s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.35}}
.sg-yo-globo{font-size:var(--t-peq);line-height:1.55}
.sg-yo-globo b{color:var(--texto)}
.sg-yo-globo button{margin-top:9px;padding:6px 13px;font-size:var(--t-peq);border-radius:999px;
  background:var(--marca600);color:var(--sobre-marca);border:0;font-weight:600;cursor:pointer}

/* =====================================================================================================
   IPHONE: LA MUESCA, EL DEDO Y LA ALTURA DE VERDAD

   Estas reglas no son «estilo movil» -eso ya estaba, en la consulta de 900 px-. Son las cuatro cosas
   que hacian que la app se viera mal en un iPhone y en ningun otro sitio. Cada una lleva su motivo.
   ===================================================================================================== */

/* Safari infla el texto al girar el telefono si no se le dice que no. */
html{-webkit-text-size-adjust:100%}

/* La altura de verdad. `100vh` en Safari cuenta con la barra de direcciones RETRAIDA, asi que el ultimo
   trozo de la interfaz cae por debajo del borde de la pantalla. `dvh` es la altura visible ahora mismo.
   El orden importa: quien no conozca `dvh` se queda con la linea anterior. */
#app{height:100vh;height:100dvh}
#acceso{min-height:100vh;min-height:100dvh}

/* EL SITIO DE LA MUESCA Y DE LA BARRA DE INICIO.
   Con la barra de estado translucida, la interfaz empieza en el pixel 0 — debajo del reloj. Hay que
   apartarla, y por abajo apartarse de la raya del gesto de inicio. En horizontal la muesca esta a un
   lado, de ahi los insets izquierdo y derecho. */
/* EL HUECO DE ARRIBA LO LLEVA QUIEN ESTA ARRIBA, y eso cambia con el ancho de la pantalla.
   - En escritorio, arriba estan DOS cosas a la vez: la cabecera del lateral y la del contenido.
   - En movil, el lateral es un cajon que se sale de la pantalla; arriba solo queda la cabecera del
     contenido, con el boton del menu. A esa se le olvido el hueco al convertir el menu en cajon, y con
     la barra de estado translucida del iPhone el boton quedaba justo debajo del reloj. */
@media(min-width:901px){
  aside.lado .cab{padding-top:calc(18px + env(safe-area-inset-top))}
}
#banda{padding-top:calc(13px + env(safe-area-inset-top))}
#acceso{padding-top:calc(24px + env(safe-area-inset-top));
  padding-bottom:calc(24px + env(safe-area-inset-bottom))}
/* EL HUECO DE LA MUESCA SE SUMA AL ESPACIADO QUE YA HABIA, no lo sustituye.
   La primera version de estas reglas ponia 22 px fijos a los lados, y eso cambiaba en silencio el
   espaciado del escritorio (eran 26 a los lados y 50 abajo) y el del movil (16). Un arreglo para el
   iPhone no tiene por que tocar como se ve en un ordenador: se parte de los mismos numeros de antes y
   se le SUMA el hueco, que en un ordenador vale cero. */
#vista{padding-bottom:calc(50px + env(safe-area-inset-bottom));
  padding-left:calc(26px + env(safe-area-inset-left));
  padding-right:calc(26px + env(safe-area-inset-right))}
header{padding-top:calc(16px + env(safe-area-inset-top));
  padding-left:calc(26px + env(safe-area-inset-left));
  padding-right:calc(26px + env(safe-area-inset-right))}

@media(max-width:900px){
  /* En movil el espaciado base es 16, no 26. */
  #vista{padding-bottom:calc(16px + env(safe-area-inset-bottom));
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right))}
  header{padding-top:calc(13px + env(safe-area-inset-top));
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right))}
}

/* El chat, con la altura de verdad: `100vh` en un movil se sale por abajo. */

/* LAS TABLAS, CADA UNA CON SU PROPIO DESPLAZAMIENTO.
   Sin esto una tabla de ocho columnas ensancha el documento entero y el movil ensena la pagina como si
   fuera de escritorio: reducida y arrastrable de lado. Ahora la que se arrastra es la tabla, no la app. */
.tabla-rollo{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r2);border:1px solid var(--linea);background:var(--sup)}
.tabla-rollo>table{border:0;border-radius:0;margin:0;min-width:100%}
.tabla-rollo td{overflow-wrap:anywhere}
.tabla-rollo td .eti{white-space:normal}

/* LAS TABLAS EN EL MOVIL: TARJETAS (decision del dueno, 15/09/2026).
   Una tabla de seis columnas en una pantalla de 390 px es una tira que hay que arrastrar de lado para
   leer cada fila, y nadie lo hace: se mira la primera columna y se abandona. Por debajo de 700 px cada
   fila pasa a ser una tarjeta y cada celda una linea «etiqueta · valor», con la etiqueta sacada del
   `data-col` que pone tabla(). La cabecera desaparece: ya va repetida en cada dato. Las filas que abren
   una ficha siguen abriendola: son el mismo <tr>. */
@media(max-width:700px){
  .tabla-rollo{overflow:visible;border:0;background:transparent;border-radius:0}
  .tabla-rollo>table{min-width:0;width:100%;background:transparent;display:block}
  .tabla-rollo thead{display:none}
  .tabla-rollo tbody{display:block}
  .tabla-rollo tbody tr{display:block;background:var(--sup);border:1px solid var(--linea);
    border-radius:var(--r2);margin-bottom:8px;padding:5px 0}
  .tabla-rollo tbody tr:hover{background:var(--sup)}
  /* Compactas (el dueno las vio al doble de alto de lo que hacia falta): 3 px de aire por linea, letra
     de tabla, y lo que la celda traia en un <div> aparte (la fuente de la magnitud, la estacion) va en
     la misma linea tras un punto. */
  .tabla-rollo td{display:grid;grid-template-columns:minmax(84px,34%) 1fr;gap:8px;align-items:baseline;
    border:0;padding:3px 12px;font-size:var(--t-peq);line-height:1.35}
  .tabla-rollo td::before{content:attr(data-col);color:var(--tenue);font-size:10px;
    text-transform:uppercase;letter-spacing:.1em;font-weight:700;line-height:1.5;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tabla-rollo td>div{display:inline}
  .tabla-rollo td>div::before{content:" · "}
  .tabla-rollo td>br{display:none}
  .tabla-rollo td[data-vacia]{display:none}
  .tabla-rollo td:first-child{font-weight:700}
  .tabla-rollo tbody tr:last-child td{border-bottom:0}
}

@media (hover:none) and (pointer:coarse){
  /* 16 px EN LOS CAMPOS, Y SOLO EN PANTALLAS DE TOCAR.
     Safari amplia la pagina al enfocar cualquier campo con letra menor de 16 px, y de esa ampliacion no
     se vuelve solo: el resto de la sesion se navega ampliado. En un ordenador no hace falta, y ahi 16 px
     en los campos se ven gordos al lado de una interfaz de 14. */
  input,select,textarea{font-size:var(--t-cuerpo)}

  /* El dedo no es un raton: 44 px es lo que Apple pide como minimo para poder acertar. */
  aside.lado nav a{min-height:44px}
  button{min-height:44px}
  table tr{min-height:44px}

  /* El tiron elastico de iOS arrastraba la app entera como si fuera una pagina. */
  body{overscroll-behavior-y:contain}
}

/* El mapa, con la altura de verdad. Con `100vh` en un iPhone se salia por abajo. */
@supports (height:100dvh){ #mapa{height:calc(100dvh - 200px)} }

/* ---------- EL CRM COMO TABLERO (Leads, Ventas): barra, kanban, panel lateral ----------------------- */
.crm-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.crm-barra.compacta{margin-bottom:10px}
.crm-barra .crm-hueco{flex:1}
.crm-barra button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:var(--t-peq)}
.segmentos{display:inline-flex;background:var(--sup);border:1px solid var(--linea2);border-radius:999px;padding:3px}
.segmentos button{background:transparent;color:var(--suave);border:0;border-radius:999px;padding:6px 12px}
.segmentos button.activo{background:var(--marca600);color:var(--sobre-marca)}
.crm-buscar{display:flex;align-items:center;gap:7px;background:var(--sup);border:1px solid var(--linea2);border-radius:999px;
  padding:0 12px;color:var(--tenue);min-width:200px;flex:1 1 220px;max-width:360px}
.crm-buscar input{border:0;background:transparent;padding:8px 0;font-size:var(--t-peq);color:var(--texto);min-width:0}
.crm-buscar input:focus{outline:none}
select.chip{width:auto;padding:7px 30px 7px 12px;border-radius:999px;font-size:var(--t-peq);background-color:var(--sup)}
.crm-cuenta{color:var(--tenue);font-size:var(--t-mini);font-variant-numeric:tabular-nums;white-space:nowrap}

.busquedas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.busq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);
  padding:6px 12px;font-size:var(--t-mini);max-width:100%}
.busq.trabajando{border-color:#f59e0b55}
.busq .nota{max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-b{display:inline-block;width:110px;height:6px;border-radius:999px;background:#ffffff14;overflow:hidden;vertical-align:middle}
.barra-b i{display:block;height:100%;background:var(--marca600);border-radius:999px;transition:width .6s ease}
.barra-b.listo i{background:var(--bien)}
.barra-b.fallo i{background:var(--mal)}
.barra-b.pendiente i,.barra-b.trabajando i{background-image:linear-gradient(90deg,transparent 0,#ffffff55 50%,transparent 100%);background-size:40px 100%;animation:barra-b-brillo 1.4s linear infinite}
@keyframes barra-b-brillo{from{background-position:-40px 0}to{background-position:150px 0}}
.busq button{padding:4px 10px;font-size:var(--t-mini)}

.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:12px;overflow-x:auto;
  padding-bottom:10px;align-items:start;scroll-snap-type:x proximity}
.kcol{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r2);display:flex;flex-direction:column;
  max-height:calc(100vh - 210px);min-height:200px;scroll-snap-align:start;transition:border-color .12s,background .12s}
.kcol.sobre{border-color:var(--marca600);background:var(--marca-f)}
.kcol header{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--linea);font-size:var(--t-peq);flex:none}
.kcol header .punto{width:8px;height:8px;border-radius:50%;flex:none}
.kcol header .n{margin-left:auto;background:var(--sup2);border:1px solid var(--linea);border-radius:999px;padding:1px 8px;
  font-size:var(--t-micro);color:var(--suave);font-variant-numeric:tabular-nums}
.kcuerpo{padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:60px}
.kcard{background:var(--sup2);border:1px solid var(--linea);border-radius:var(--r);padding:10px 12px;cursor:pointer;
  transition:border-color .12s,transform .12s,box-shadow .12s;user-select:none}
.kcard:hover{border-color:var(--linea2);transform:translateY(-1px);box-shadow:0 6px 18px #00000040}
.kcard.cogida{opacity:.4}
.kcard .kt{font-weight:700;font-size:var(--t-base);line-height:1.3;margin-bottom:5px;overflow-wrap:anywhere}
.kcard .kl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--t-mini);color:var(--suave);margin-top:4px}
.kcard .kl .eti{padding:1px 8px;font-size:var(--t-micro)}
.canales{display:inline-flex;gap:4px}
.canales i{display:inline-flex;color:var(--tenue)}
.canales i.ok{color:var(--bien)}
.prox{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-micro);color:var(--suave)}
.prox.tarde{color:var(--mal)}
.puntos{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:var(--t-micro);color:var(--suave)}
.puntos i{display:block;height:4px;width:44px;background:var(--linea2);border-radius:2px;position:relative;overflow:hidden}
.puntos i{background:linear-gradient(90deg,var(--marca600),var(--marca600)) no-repeat,var(--linea2);background-size:var(--w,0) 100%}
.puntos b{font-variant-numeric:tabular-nums;color:var(--texto)}
.kvacio{color:var(--tenue);font-size:var(--t-mini);text-align:center;padding:18px 8px;border:1px dashed var(--linea2);border-radius:var(--r)}
.kmas{color:var(--tenue);font-size:var(--t-mini);text-align:center;padding:6px}

.panel-lateral{position:fixed;top:0;right:0;bottom:0;width:min(540px,100%);background:var(--sup);border-left:1px solid var(--linea2);
  box-shadow:-20px 0 60px #00000080;z-index:9990;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.panel-lateral.abierto{transform:none}
.panel-lateral.ancho{width:min(760px,100%)}
.pl-cab{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--linea);flex:none}
.pl-cab .txt{flex:1;min-width:0}
.pl-cab h3{margin:0;font-size:var(--t-medio);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.pl-cab .sub{color:var(--suave);font-size:var(--t-mini);margin-top:3px}
.pl-cab .cerrar{background:transparent;border:1px solid var(--linea2);color:var(--suave);padding:6px 8px;line-height:0;flex:none}
.pl-cuerpo{padding:16px 20px;overflow-y:auto;flex:1;min-height:0}
.pl-cuerpo h2{margin-top:18px}
.pl-cuerpo .lista-notas{margin:6px 0 0;padding-left:18px}
.pl-cuerpo .lista-notas li{margin:4px 0;line-height:1.4}
.pl-pie{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--linea);flex:none;flex-wrap:wrap}
.pl-pie button{display:inline-flex;align-items:center;gap:6px}
.etapas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.etapas button{background:transparent;color:var(--suave);border:1px solid var(--linea2);padding:5px 11px;font-size:var(--t-mini);font-weight:600}
.etapas button.activa{background:var(--c,#9ca3af);border-color:var(--c,#9ca3af);color:#09090b}
.acciones-lead{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;margin-bottom:14px}
.acciones-lead .accion{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border:1px solid var(--linea2);border-radius:var(--r);
  background:var(--sup2);color:var(--texto);text-decoration:none;font-size:var(--t-mini);font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.acciones-lead .accion:hover{border-color:var(--marca600);color:var(--marca)}
.acciones-lead .accion.apagada{opacity:.35;pointer-events:none}
.props{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.prop{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 12px;border-bottom:1px solid var(--linea);font-size:var(--t-peq);align-items:baseline}
.prop:last-child{border-bottom:0}
.prop .k{color:var(--tenue);font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.prop .v{overflow-wrap:anywhere}
.seguimiento label{margin-top:8px}
.linea-tiempo .hito{padding:7px 0 7px 14px;border-left:2px solid var(--linea2);margin-left:4px;font-size:var(--t-peq)}
.linea-tiempo .hito .cuando{display:block;color:var(--tenue);font-size:var(--t-micro);margin-bottom:2px}
.casillas label{display:flex;align-items:center;gap:8px;font-weight:400;margin:4px 0}
.casillas input{width:auto}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* LA FICHA COMO PANEL LATERAL (15/09/2026): la misma ficha de siempre, pero a la derecha y sin tapar lo
   que se estaba mirando, igual que la pagina de registro. La del chat de WhatsApp (.lateral) ya iba en
   su columna y no cambia. */
#ficha.capa:not(.lateral){place-items:stretch end;padding:0;background:#09090b99}
#ficha.capa:not(.lateral)>.caja{width:min(760px,100%);max-height:100vh;height:100vh;border-radius:0;border:0;border-left:1px solid var(--linea2);
  animation:entra-panel .2s ease}
@keyframes entra-panel{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#ficha.capa:not(.lateral)>.caja{animation:none}}

#subtitulo{color:var(--suave);font-size:var(--t-peq);margin:2px 0 0;flex-basis:100%;order:9}
#subtitulo[hidden]{display:none}
header{row-gap:2px}
.dato.tocable{cursor:pointer;transition:border-color .12s}
.dato.tocable:hover{border-color:var(--marca600)}
.avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sup2);border:1px solid var(--linea2);
  color:var(--suave);font-size:10px;font-weight:700;letter-spacing:.02em;vertical-align:middle;margin-right:4px;flex:none}
.chip-vista{display:inline-flex;align-items:center;gap:4px;background:var(--sup);border:1px solid var(--linea2);border-radius:999px;padding:3px 6px 3px 10px;font-size:var(--t-micro);margin-right:4px}
.chip-vista a{color:var(--texto);text-decoration:none}
.chip-vista button{background:transparent;border:0;color:var(--tenue);padding:2px;line-height:0;min-height:0}
.chip-vista.guardar{padding:4px 10px;color:var(--suave);cursor:pointer}
.chip-vista.guardar:hover{color:var(--texto)}
.vistas-guardadas{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px}
.masivas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--marca-f);border:1px solid var(--marca600);border-radius:var(--r);padding:8px 12px;margin-bottom:10px;font-size:var(--t-peq)}
.masivas select{width:auto;padding:5px 28px 5px 10px}
.masivas button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font-size:var(--t-mini)}
.tabla-rollo th{cursor:pointer;user-select:none;white-space:nowrap}
.tabla-rollo th[data-orden="asc"]::after{content:" ▲";font-size:9px}
.tabla-rollo th[data-orden="desc"]::after{content:" ▼";font-size:9px}
.registro{display:grid;grid-template-columns:1fr 280px;gap:18px;align-items:start}
.reg-der .props{font-size:var(--t-mini)}
.reg-der .prop{grid-template-columns:96px 1fr;padding:6px 10px}
.pestanas{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--linea);margin-bottom:12px}
.pestanas button{background:transparent;color:var(--suave);border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 12px;font-size:var(--t-peq);font-weight:600;margin-bottom:-1px;display:inline-flex;align-items:center;gap:4px}
.pestanas button.activa{color:var(--texto);border-bottom-color:var(--marca600)}
.pestanas-sistema{margin-bottom:16px}
.acciones-lead button.accion{cursor:pointer;font:inherit}
.prox-tarjeta{padding:10px 12px;font-size:var(--t-peq);display:flex;align-items:center;gap:8px;margin-bottom:12px;border-color:var(--marca600)}
.prox-tarjeta.tarde{border-color:var(--mal);color:var(--mal)}
.planes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.plan{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r2);padding:18px 20px;cursor:pointer;transition:border-color .12s,transform .12s}
.plan:hover{border-color:var(--marca600);transform:translateY(-1px)}
.plan.plan-oculto{opacity:.6}
.plan.plan-oculto .precio{color:var(--suave)}
.plan .nombre{font-size:var(--t-medio)}
.plan .precio{font-size:var(--t-titulo);font-weight:800;letter-spacing:-.04em;margin:8px 0 6px}
.plan ul{list-style:none;margin:12px 0;padding:0;font-size:var(--t-peq);display:flex;flex-direction:column;gap:5px}
.plan li{display:flex;align-items:center;gap:6px}
.plan li svg{color:var(--bien);flex:none}
.aparatos{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.aparato{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r2);padding:14px 16px;cursor:pointer;transition:border-color .12s,transform .12s}
.aparato:hover{border-color:var(--linea2);transform:translateY(-1px)}
.hoy{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:14px}
.hoy-bloque{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r2);padding:12px 14px;font-size:var(--t-peq)}
.hoy-bloque.vacio-hoy{opacity:.7}
.hoy-bloque .n{font-weight:800;font-size:var(--t-medio);font-variant-numeric:tabular-nums}
.hoy-bloque ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.hoy-bloque li a{color:var(--texto)}
.hoy-bloque li.tarde a{color:var(--mal)}
/* Dentro de un panel (la pagina de registro o la ficha) NINGUNA tabla se arrastra de lado: las mismas
   tarjetas que en el celular, a cualquier ancho (el dueno lo vio el 15/09/2026 en la ficha del cliente). */
.panel-lateral .tabla-rollo,#ficha .tabla-rollo{overflow:visible;border:0;background:transparent;border-radius:0}
.panel-lateral .tabla-rollo>table,#ficha .tabla-rollo>table{min-width:0;width:100%;background:transparent;display:block}
.panel-lateral .tabla-rollo thead,#ficha .tabla-rollo thead{display:none}
.panel-lateral .tabla-rollo tbody,#ficha .tabla-rollo tbody{display:block}
.panel-lateral .tabla-rollo tbody tr,#ficha .tabla-rollo tbody tr{display:block;background:var(--sup2);border:1px solid var(--linea);border-radius:var(--r);margin-bottom:8px;padding:5px 0}
.panel-lateral .tabla-rollo td,#ficha .tabla-rollo td{display:grid;grid-template-columns:minmax(84px,34%) 1fr;gap:8px;align-items:baseline;border:0;padding:3px 12px;font-size:var(--t-peq);line-height:1.35}
.panel-lateral .tabla-rollo td::before,#ficha .tabla-rollo td::before{content:attr(data-col);color:var(--tenue);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-lateral .tabla-rollo td>div,#ficha .tabla-rollo td>div{display:inline}
.panel-lateral .tabla-rollo td[data-vacia],#ficha .tabla-rollo td[data-vacia]{display:none}
.panel-lateral .tabla-rollo td:first-child,#ficha .tabla-rollo td:first-child{font-weight:700}

.reg-cab{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 12px;flex:none}
.reg-cab .txt{flex:1;min-width:0}
.reg-cab h3{margin:0 0 6px;font-size:var(--t-grande);font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
.reg-cab .sub{color:var(--suave);font-size:var(--t-mini);margin-top:6px;overflow-wrap:anywhere}
.reg-cab .cerrar{background:transparent;border:1px solid var(--linea2);color:var(--suave);padding:6px 8px;line-height:0;flex:none;font-size:inherit}
.reg-chips{display:flex;gap:6px;flex-wrap:wrap}
.reg-chips .eti{display:inline-flex;align-items:center;gap:4px}
.avatar.grande{width:44px;height:44px;font-size:var(--t-peq);color:var(--texto);background:var(--marca-f);border-color:var(--marca600)}
.barra-acciones{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:0 20px 12px;border-bottom:1px solid var(--linea);margin-bottom:0}
.barra-acciones .rapida,.barra-acciones .rapida-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--linea2);border-radius:999px;
  background:transparent;color:var(--texto);text-decoration:none;font-size:var(--t-mini);font-weight:600;min-height:0;cursor:pointer;font-family:inherit}
.barra-acciones .rapida:hover,.barra-acciones .rapida-btn:hover{border-color:var(--marca600);color:var(--marca);background:transparent;filter:none}
.barra-acciones button.chico{padding:6px 10px;font-size:var(--t-mini);min-height:0;display:inline-flex;align-items:center;gap:4px}
.mas{position:relative;display:inline-block}
.mas .menu{display:none;position:absolute;right:0;top:calc(100% + 4px);min-width:240px;background:var(--sup);border:1px solid var(--linea2);border-radius:var(--r);
  box-shadow:0 14px 40px #00000080;padding:6px;z-index:5;flex-direction:column;gap:2px}
.mas.abierto .menu{display:flex}
.mas .menu .item{display:block;width:100%;text-align:left;background:transparent;color:var(--texto);border:0;border-radius:8px;padding:8px 10px;font-size:var(--t-peq);font-weight:500;min-height:0}
.mas .menu .item:hover{background:var(--sup2);filter:none}
.mas .menu .item.rojo{color:var(--mal)}
.mas .menu .item.rojo:hover{background:var(--mal-f)}
.reg-extra{padding:12px 20px 0}
.registro-1{padding-top:14px}
.datos-grupo{margin-bottom:16px}
.datos-grupo h4.grupo{margin:0 0 8px}
/* auto-fit, no auto-fill: las celdas que haya se reparten todo el ancho, sin huecos al final (dueno, 16/09/2026). */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.celda{background:var(--sup2);border:1px solid var(--linea);border-radius:var(--r);padding:7px 10px;min-width:0;display:flex;flex-direction:column;gap:2px}
.celda .k{color:var(--tenue);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.celda .v{font-size:var(--t-peq);overflow-wrap:anywhere}
.celda .v .eti{padding:1px 8px;font-size:var(--t-micro)}
.tenue{color:var(--tenue)}
/* Contacto de un cliente: nombre, apellidos y correo en una fila a todo lo ancho; debajo, los telefonos. */
.grupo-contacto .datos,.grupo-contacto .campos{grid-template-columns:repeat(3,1fr)}
.grupo-contacto .celda[data-clave="telefono_wa"],.grupo-contacto .campo[data-clave="telefono_wa"]{grid-column:span 2}
@media(max-width:700px){.grupo-contacto .datos,.grupo-contacto .campos{grid-template-columns:1fr 1fr}.grupo-contacto .celda[data-clave="email"],.grupo-contacto .campo[data-clave="email"]{grid-column:span 2}.grupo-contacto .celda[data-clave="telefono_wa"],.grupo-contacto .campo[data-clave="telefono_wa"]{grid-column:auto}}
.celda.editable{cursor:text}
.celda.editable:hover{border-color:var(--linea2)}
.celda.guardada{border-color:var(--bien)}
.celda .editor input,.celda .editor select{padding:4px 8px;font-size:var(--t-peq);border-radius:8px}
.celda-canales{grid-column:1/-1}
.canales-btn{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.canal{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--linea2);background:transparent;
  color:var(--tenue);font-size:var(--t-mini);font-weight:600;min-height:0;cursor:pointer;font-family:inherit}
.canal small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.canal.on{color:var(--bien);border-color:#4ade8055;background:var(--bien-f)}
.canal:hover{filter:none;border-color:var(--marca600)}
.canal:disabled{opacity:.5}
#ficha .grupos-campos{display:flex;flex-direction:column;gap:18px;margin:14px 0 6px}
#ficha .grupo-campos h4.grupo{margin:0 0 10px}
#ficha .grupo-campos .campos{gap:12px 16px}
#ficha .barra-acciones{padding:0 0 12px;margin-bottom:4px}
#ficha .reg-detalle{border:1px solid var(--linea);border-radius:var(--r);padding:8px 12px;margin-top:12px}
#ficha .reg-detalle summary{cursor:pointer;font-size:var(--t-micro);letter-spacing:.17em;text-transform:uppercase;color:var(--tenue);font-weight:700;list-style:none;display:flex;align-items:center;gap:6px}
#ficha .reg-detalle summary::before{content:"▸";font-size:10px}
#ficha .reg-detalle[open] summary::before{content:"▾"}
#ficha .reg-detalle>*:not(summary){margin-top:10px}
.hechos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:14px}
.hechos .dato{padding:10px 12px;gap:1px}
.hechos .dato .n{font-size:var(--t-grande)}
.hechos .dato .t{font-size:var(--t-mini)}
.rel{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.rel-fila{display:flex;align-items:center;gap:10px;background:var(--sup2);border:1px solid var(--linea);border-radius:var(--r);padding:8px 12px;font-size:var(--t-peq);min-width:0}
.rel-fila.tocable{cursor:pointer}
.rel-fila.tocable:hover{border-color:var(--linea2)}
.rel-ico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sup);border:1px solid var(--linea);color:var(--suave);flex:none}
.rel-txt{flex:1;min-width:0}
.rel-txt b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel-txt .suave{font-size:var(--t-mini);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel-fila .eti{flex:none}
.rel-acc{flex:none}
.rel-acc button{padding:5px 10px;font-size:var(--t-mini)}
.rel-anadir{display:grid;grid-template-columns:2fr 1.4fr 1fr auto;gap:6px;margin-top:6px}
.rel-anadir input{padding:8px 10px;font-size:var(--t-peq)}
.rel-anadir button{padding:8px 12px;font-size:var(--t-peq)}
@media(max-width:700px){
  .rel-anadir{grid-template-columns:1fr 1fr}
  .registro{grid-template-columns:1fr}
  .panel-lateral.ancho{width:100%}
  #ficha.capa:not(.lateral)>.caja{width:100%}
  .kanban{grid-auto-columns:minmax(82vw,1fr);scroll-snap-type:x mandatory}
  .kcol{max-height:calc(100vh - 250px)}
  .crm-buscar{flex-basis:100%;max-width:none}
  .dos-col{grid-template-columns:1fr}
  .prop{grid-template-columns:1fr;gap:2px}
  .segmentos button span{display:none}
}

/* Control de capas del mapa: secciones y filtro rapido (19/09/2026).
   Seis lineas planas confundian; ahora hay cabeceras y un filtro de un clic. */
.sg-capas-titulo{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);margin:9px 0 3px;font-weight:600}
.sg-capas-filtro{margin:0 0 4px;font-size:var(--t-mini);color:var(--suave)}
.sg-capas-filtro a{color:var(--acento,#38bdf8);cursor:pointer;text-decoration:none}
.sg-capas-filtro a:hover{text-decoration:underline}

/* ---------- Tickets: bandeja de correo y sus plantillas ---------- */
.tk-tabs{display:flex;gap:6px;margin-bottom:14px}
.tk-tabs .tk-tab{padding:8px 16px;border-radius:999px;background:transparent;border:1px solid var(--linea2);
  color:var(--suave);font-weight:600;font-size:var(--t-peq)}
.tk-tabs .tk-tab:hover{color:var(--texto);background:#ffffff0a}
.tk-tabs .tk-tab.puesto{background:var(--marca600);border-color:var(--marca600);color:var(--sobre-marca)}

/* --- el hilo de correo: tarjetas apiladas, no globos de chat --- */
.tk-msg{border:1px solid var(--linea);border-radius:12px;padding:12px 14px;margin-bottom:10px;
  background:var(--sup2)}
.tk-msg.mio{background:var(--marca-f);border-color:var(--marca600)}
.tk-msg-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.tk-msg-cab b{font-size:var(--t-peq)}
.tk-msg-fecha{font-size:var(--t-micro);color:var(--tenue);margin-left:auto}
.tk-msg-ruta{font-size:var(--t-micro);color:var(--tenue);margin-bottom:3px;overflow-wrap:anywhere}
.tk-msg-asunto{font-size:var(--t-mini);color:var(--tenue);margin-bottom:6px}
.tk-msg-cuerpo{font-size:var(--t-base);line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.tk-auto{display:inline-block;font-size:var(--t-micro);font-weight:600;padding:1px 7px;border-radius:999px;
  background:var(--marca600);color:var(--sobre-marca)}

/* --- responder: como .wa .escribir, pero con asunto y plantilla encima del texto --- */
.tk-responder{flex-direction:column;align-items:stretch;gap:7px}
.tk-responder select,.tk-responder input{font:inherit;font-size:var(--t-peq)}
.tk-responder textarea{width:100%;min-height:90px;max-height:220px;resize:vertical;font:inherit;
  font-size:var(--t-base);background:var(--fondo);border:1px solid var(--linea2);border-radius:12px;
  padding:11px 14px;color:var(--texto);outline:none}
.tk-responder textarea:focus{border-color:var(--marca600);box-shadow:0 0 0 3px var(--marca-f)}
.tk-responder button{align-self:flex-end}

/* --- plantillas --- */
.tk-plant-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.tk-plant-top span{color:var(--tenue);font-size:var(--t-peq)}
.tk-plant-grupo{margin-bottom:18px}
.tk-plant-grupo-tit{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);font-weight:700;margin-bottom:6px}
.tk-plant-fila{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 14px;border:1px solid var(--linea);border-radius:12px;background:var(--sup);margin-bottom:6px}
.tk-plant-fila.inactiva{opacity:.55}
.tk-plant-info b{font-size:var(--t-base)}
.tk-plant-sit{font-size:var(--t-mini);color:var(--tenue);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.tk-inactiva{display:inline-block;font-size:var(--t-micro);font-weight:600;padding:1px 7px;border-radius:999px;
  background:#ffffff14;color:var(--suave);margin-left:6px}
.tk-plant-acc{display:flex;gap:6px;flex:none}
.tk-plant-editor{border:1px solid var(--marca600);border-radius:14px;padding:16px 18px;margin-bottom:18px;
  background:var(--sup)}
.tk-plant-editor h3{margin:0 0 10px}
.tk-check{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:var(--t-peq);
  color:var(--suave);font-weight:500;cursor:pointer}
.tk-check input{width:auto}
.tk-plant-botones{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.tk-nuevo{padding:16px 18px;overflow-y:auto}
.tk-nuevo textarea{width:100%;resize:vertical}
.tk-embudo-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
.tk-buscar{flex:1;min-width:180px;max-width:320px;border-radius:999px;border:1px solid var(--linea2);
  background:var(--fondo);padding:7px 15px;color:var(--texto);font:inherit;font-size:var(--t-peq);outline:none}
.tk-buscar:focus{border-color:var(--marca600);box-shadow:0 0 0 3px var(--marca-f)}
/* Los botones de filtro por buzon del embudo: el estilo de `.filtros` esta pensado para vivir dentro
   de `.wa` (WhatsApp) y aqui no esta -sin esto los botones se ven, pero ninguno marca cual esta
   elegido, aunque el filtro si funcione por dentro (29/09/2026)-. */
.tk-embudo-top .filtros{display:flex;gap:5px;flex-wrap:wrap}
/* Dos filas de pastillas -buzon y canal, agregado 29/09/2026- van una al lado de otra: un separador
   fino entre ambas evita que se vean como una sola tira de botones. */
#tk_embudo_canales{padding-left:10px;border-left:1px solid var(--linea2)}
/* El aviso de "vincular WhatsApp" (telefono desvinculado, ver tkCargarWhatsAppEstado) tiene que
   distinguirse de una pastilla de filtro mas: es una alerta operativa, no una opcion mas para elegir. */
.tk-wa-vincular{padding:4px 11px;font-size:var(--t-mini);font-weight:600;border-radius:999px;
  background:var(--mal-f);border:1px solid var(--mal);color:var(--mal)}
.tk-wa-vincular:hover{background:var(--mal);color:#fff}
.tk-embudo-top .filtros button{padding:4px 11px;font-size:var(--t-mini);font-weight:600;border-radius:999px;
  background:transparent;border:1px solid var(--linea2);color:var(--tenue)}
.tk-embudo-top .filtros button:hover{color:var(--texto);background:#ffffff0a}
.tk-embudo-top .filtros button.puesto{background:var(--marca600);border-color:var(--marca600);
  color:var(--sobre-marca)}
#tk_modal .cab{position:relative}
#tk_modal .cab .cerrar{margin-left:auto;flex:none}
#tk_modal .cab .quien{overflow:hidden}
/* El estado, mover-a, numero de radicado y las acciones (Ver ficha/Borrar) NO viven en la fila de la
   identidad (.cab): eran demasiadas cosas en una sola fila -avatar, nombre, correo, pastilla, select,
   dos botones y la X- y en pantallas angostas se apretaban y se veian rotas, unas encima de otras
   (29/09/2026). Fila propia, que envuelve si hace falta. */
.tk-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 15px;
  border-bottom:1px solid var(--linea);flex:none}
.tk-toolbar .eti{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:var(--t-mini);font-weight:600;background:transparent;margin:0;flex:none}
.tk-toolbar select{width:auto;padding:5px 10px;font-size:var(--t-mini)}
.tk-toolbar-num{font-size:var(--t-mini);color:var(--tenue);overflow-wrap:anywhere}
.tk-toolbar-acciones{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}

@media(max-width:900px){
  .tk-plant-sit{max-width:100%}
}
@media(max-width:560px){
  .tk-toolbar-num{width:100%;order:5}
  .tk-toolbar-acciones{margin-left:0;width:100%;order:6}
}

/* ---------- LAS SECCIONES EMBEBIDAS (#marketing y #whatsapp), A TODO LO ALTO ----------

   Marketing (05/10/2026): ya no hay interfaz propia; la seccion es el listmonk original de Miami
   embebido. La Central de WhatsApp (06/10/2026) es lo mismo con el inbox del wacrm. Las dos son
   HERMANAS: mismo armazon, misma barra, mismos iconos.

   EL ALTO, SIN NUMEROS A OJO (06/10/2026). Antes el iframe llevaba `height:calc(100vh - 185px)`: un
   185 que tenia que adivinar la cabecera + la barra de botones + el relleno de #vista, y que se
   quedaba corto o largo en cuanto cualquiera de los tres cambiaba -en movil, con la cabecera en dos
   lineas, sobraba media pantalla-. Ahora la seccion va A SANGRE (`main.sangre`, el mismo modo que ya
   usaba el mapa; lo pone el router en panel-base.js) y el alto lo reparte el flex: #vista sin relleno
   y en columna, la barra fina arriba y el iframe comiendose TODO lo que quede.

   LA BARRA, FINA Y SOLO CON ICONOS (pedido del dueno): 30px y botones redondos de 26px. El texto que
   llevaba cada boton se fue a su `title` y a su `aria-label` -se sigue leyendo al pasar el raton y lo
   sigue diciendo un lector de pantalla-, pero deja de robar alto al embed. Y la barra NO se superpone:
   tapar la esquina del listmonk o del inbox seria cambiar alto por esconder sus propios botones. */
.emb{display:flex;flex-direction:column;flex:1;min-height:0}
/* Los botones van pegados a la derecha. Hasta el 07/10/2026 el sitio lo repartia la frase de la
   izquierda («El listmonk original de Miami…»), que empujaba los iconos a su esquina; el dueno pidio
   quitar esa frase, asi que ahora lo hace `justify-content`. */
.emb-barra{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:none;height:30px;
  padding:0 10px;border-bottom:1px solid var(--linea);background:var(--sup)}
/* Cuadrado y sin el relleno de `9px 18px` que `button` trae para el texto que ya no hay. */
.emb-barra button.plano{flex:none;width:26px;height:26px;padding:0;border-radius:999px;
  display:flex;align-items:center;justify-content:center}
.emb-barra button.plano i{display:block;line-height:0}
.emb-barra button.plano svg{width:15px;height:15px}
/* El embed se queda con lo que sobra. `min-height:0` es lo que permite al flex encogerlo: sin eso un
   iframe se planta en su alto por defecto y la barra lo empuja fuera de la pantalla. */
.emb-cuerpo{position:relative;flex:1;min-height:0;display:flex}
/* EL IFRAME YA NO ARRANCA EN BLANCO (08/10/2026, pedido del dueno). Hasta hoy esta regla decia
   `background:#fff`, y eso era el fogonazo blanco al entrar en #marketing y en #whatsapp: un iframe
   pinta SU PROPIO fondo mientras el documento de dentro no ha llegado, y da igual lo oscuro que sea
   ese documento. Ahora arranca del color del panel y ademas invisible; se descubre cuando el sitio
   de dentro termina de cargar (`load` -> clase `listo`, en embedPonerMarco). */
.emb-marco{flex:1;min-height:0;width:100%;border:0;display:block;
  background:var(--fondo);color-scheme:dark;opacity:0;transition:opacity .18s ease}
.emb-marco.listo{opacity:1}
/* La capa de espera tapa el hueco desde el primer milisegundo -antes incluso de pedirle el vale al
   servidor- y se va con el iframe ya cargado. Sin ella la seccion se pasaba el viaje de red
   ensenando un texto suelto y despues el blanco del iframe. */
.emb-carga{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  gap:10px;background:var(--fondo);color:var(--tenue);font-size:var(--t-peq);
  transition:opacity .18s ease}
.emb-carga.fuera{opacity:0;pointer-events:none}
.emb-giro{flex:none;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--linea2);border-top-color:var(--marca);animation:emb-giro .7s linear infinite}
@keyframes emb-giro{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.emb-giro{animation-duration:2.4s}}

/* LA CABECERA, FUERA (07/10/2026, pedido del dueno). En estas dos secciones el titulo y su bajada ya
   no se dibujan -se lo pone `hidden` el router- y el buscador se fue a la barra del embed. Sin esas
   tres cosas la cabecera se queda SIN NADA que ensenar en escritorio, donde el lateral esta siempre a
   la vista: se retira entera y su alto se lo come el iframe. En movil NO se retira, porque alli lo
   unico que queda dentro es el boton del cajon, que es la unica forma de salir de la seccion. */
main.embebida>header{display:none}
h1#titulo[hidden]{display:none}
@media(max-width:900px){main.embebida>header{display:flex}}

/* Las pantallas de aviso de #whatsapp (401 sesion caducada, 403 no admin, 503 sin configurar, 502
   tunel) y de #marketing caen en el mismo #vista a sangre, que no tiene relleno: sin esto se pegarian
   a los bordes. Ahi los botones SIGUEN CON SU TEXTO a proposito -es un aviso, no un embed: lo que
   hace falta es que se entienda, no ganar 20px-. */
main.sangre #vista>.vacio{margin:20px 26px}

/* La ficha al lado de la charla (Central -> iframe /ficha-wa, 08/10/2026): sin menu ni cabecera; la
   ficha ocupa todo el ancho del iframe y sin fondo oscuro detras (no es un modal: es la columna). */
html.ficha-wa aside.lado,html.ficha-wa #principal>header,html.ficha-wa .menu-movil{display:none!important}
html.ficha-wa #app{display:block!important}
html.ficha-wa #principal{padding:0!important;margin:0!important;max-width:none!important}
html.ficha-wa #ficha.capa:not(.lateral){background:transparent;backdrop-filter:none}
html.ficha-wa #ficha.capa:not(.lateral)>.caja{width:100%;border-left:0}
.multi-buscable .multi-todas{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 7px}
.multi-buscable .multi-todas .multi-cuenta{font-size:var(--t-peq)}
/* La ficha al lado de la charla usa la «pagina de registro» de #clientes (abrirRegistro): a todo el ancho. */
html.ficha-wa .panel-lateral,html.ficha-wa .panel-lateral.ancho{width:100%!important;max-width:none!important;left:0;right:0;border-left:0}
/* (09/10/2026, etapa 5) Enlaces con forma de botón: «Ver los planes», «Compartir por WhatsApp». */
a.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:9px 18px;font-weight:600;text-decoration:none}
a.btn.plano{background:transparent;color:var(--suave);border:1px solid var(--linea2)}
a.btn.plano:hover{color:var(--texto)}

/* =====================================================================================================
   LA APP DEL CLIENTE Y DEL FAMILIAR (rediseño V3, etapa 1, 10/10/2026). Solo con html.app-cliente, que
   pone panel-cliente.js cuando quien entra NO es el administrador. El panel de administracion no cambia.

   Medidas en rem: la raiz vale 17 px y, en el iPhone, el tamaño de letra que la persona eligio en
   Ajustes (font: -apple-system-body). Asi la app sigue a la letra del celular: grande para quien la
   tiene grande, normal para el resto. 0,88rem = 15 px con la letra normal.
   ===================================================================================================== */
html.app-cliente{font-size:17px}
@supports (font: -apple-system-body){ html.app-cliente{font:-apple-system-body} }
html.app-cliente body{font-size:.88rem;line-height:1.45}

/* Fuera el lateral, el cajon, el boton del menu y el buscador: la app navega con las pestañas. */
html.app-cliente aside.lado, html.app-cliente #velo-menu, html.app-cliente #b_menu,
html.app-cliente header .buscar{display:none!important}
html.app-cliente #app{display:block;height:auto;min-height:100dvh;overflow:visible}
html.app-cliente main#principal{display:block;overflow:visible;min-height:100dvh}
html.app-cliente header{max-width:560px;margin:0 auto;border-bottom:0;box-sizing:border-box;
  padding:calc(.9rem + env(safe-area-inset-top)) 1rem .2rem}
html.app-cliente h1{font-size:1.41rem;font-weight:700;letter-spacing:-.02em;white-space:normal}
html.app-cliente main.sin-cabecera>header{display:none}
html.app-cliente #vista{max-width:560px;margin:0 auto;box-sizing:border-box;overflow:visible;
  padding:.6rem 1rem calc(6rem + env(safe-area-inset-bottom))}
html.app-cliente main.sin-cabecera #vista{padding-top:calc(.9rem + env(safe-area-inset-top))}

/* La barra de pestañas: fina, pegada abajo, la activa en ambar. */
#pestanas{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
  padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
  background:#09090bf2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid #27272a}
#pestanas a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  min-height:2.9rem;color:#71717a;font-size:.65rem;font-weight:500;text-decoration:none;
  -webkit-tap-highlight-color:transparent}
#pestanas a:hover{text-decoration:none;color:#a1a1aa}
#pestanas a.activo{color:var(--marca600);font-weight:600}
#pestanas a svg{width:1.3rem;height:1.3rem}

/* --- piezas --- */
.cli-barra{display:flex;align-items:center;justify-content:space-between;min-height:2.4rem}
.cli-logo{display:flex;align-items:center;gap:.45rem}
.cli-marca{font-family:'Saira',var(--fuente);font-weight:900;font-style:italic;font-size:.95rem;line-height:1}
.cli-marca span:first-child{color:#fff}
.cli-marca span:last-child{color:var(--marca600)}
.cli-marca-tenue span:first-child{color:#52525b}
.cli-marca-tenue span:last-child{color:#a16207}
.cli-avatar{width:2rem;height:2rem;border-radius:999px;border:1px solid #27272a;background:#18181b;color:var(--texto);
  font-size:.7rem;font-weight:600;display:flex;align-items:center;justify-content:center;text-decoration:none}
.cli-avatar:hover{text-decoration:none;border-color:#3f3f46}
.cli-avatar-grande{width:2.6rem;height:2.6rem;border:0;background:var(--marca600);color:#09090b;font-size:.88rem;font-weight:700}
.cli-saludo{margin:.7rem .1rem .8rem}
.cli-hola{font-size:1.41rem;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--texto);text-transform:none}
.cli-suave{color:#a1a1aa;font-size:.76rem}
.cli-fuerte{font-weight:600;font-size:.88rem}
.cli-grande{font-size:1.18rem;font-weight:700;letter-spacing:-.02em}
.cli-crece{flex:1;min-width:0}
.cli-rojo{color:#f87171}

.cli-tarjeta{background:#18181b;border:1px solid #27272a;border-radius:1.06rem;display:flex;align-items:center;
  gap:.7rem;padding:.75rem .85rem;color:var(--texto);text-decoration:none;box-sizing:border-box}
a.cli-tarjeta:hover{text-decoration:none;border-color:#3f3f46}
.cli-eti{font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#71717a;margin:1.1rem .15rem .45rem}
.cli-eti-interna{font-size:.65rem;font-weight:600;letter-spacing:.12em;color:var(--marca600);display:flex;align-items:center;gap:.45rem}

/* El estado de la casa: el escudo es la proteccion. */
.cli-estado{position:relative;overflow:hidden;background:#18181b;border:1px solid #27272a;border-radius:1.18rem;
  padding:.95rem;display:flex;flex-direction:column;gap:.8rem}
.cli-estado.cli-bien::before{content:"";position:absolute;top:-70px;left:-60px;width:220px;height:220px;border-radius:999px;
  background:radial-gradient(circle,#f59e0b24 0%,#f59e0b00 65%);pointer-events:none}
.cli-estado.cli-mal{border-color:#fb923c55}
.cli-estado-fila{position:relative;display:flex;align-items:center;gap:.85rem}
.cli-escudo{position:relative;flex:none;line-height:0}
.cli-insignia{position:absolute;right:-5px;bottom:-3px;width:1.3rem;height:1.3rem;border-radius:999px;background:#fb923c;
  color:#431407;border:3px solid #18181b;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.7rem;line-height:1}
.cli-estado-titulo{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.cli-mal .cli-estado-titulo{font-size:1.18rem}
.cli-pastilla{display:inline-flex;align-items:center;height:1.2rem;padding:0 .4rem;border-radius:999px;background:#4ade801f;
  color:#4ade80;font-size:.65rem;font-weight:600;letter-spacing:0}
.cli-pastilla-aviso{background:#fb923c1f;color:#fdba74}

.cli-boton{position:relative;display:flex;align-items:center;justify-content:center;min-height:2.6rem;border-radius:.7rem;
  background:var(--marca600);color:#09090b;font-weight:600;font-size:.88rem;text-decoration:none;border:0;cursor:pointer}
.cli-boton:hover{text-decoration:none;filter:brightness(1.06)}
.cli-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.7rem}
.cli-boton-sec{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.8rem;border-radius:.82rem;
  border:1px solid #27272a;background:#18181b;color:var(--texto);font:600 .82rem var(--fuente);text-decoration:none;cursor:pointer;padding:0 .5rem}
.cli-boton-sec:hover{text-decoration:none;border-color:#3f3f46}
.cli-boton-chico{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:0 .7rem;border-radius:.6rem;
  border:0;background:#f4f4f5;color:#09090b;font:600 .76rem var(--fuente);text-decoration:none;cursor:pointer;flex:none}
.cli-boton-chico:hover{text-decoration:none}
.cli-aviso-push{border-color:#fb923c55;margin-bottom:.7rem}

/* Listas agrupadas, como los ajustes del celular. */
.cli-lista{flex-direction:column;align-items:stretch;gap:0;padding:0 .85rem}
.cli-fila{display:flex;align-items:center;gap:.7rem;min-height:3.1rem;border-bottom:1px solid #27272a;color:var(--texto);
  text-decoration:none;font-size:.88rem;background:transparent;border-left:0;border-right:0;border-top:0;
  font-family:var(--fuente);width:100%;text-align:left;padding:0;cursor:default}
.cli-fila:last-child{border-bottom:0}
.cli-fila-link{cursor:pointer}
.cli-fila-link:hover{text-decoration:none}
.cli-sin-borde{border-bottom:0}
.cli-punto{width:.5rem;height:.5rem;border-radius:999px;flex:none}
.cli-punto.cli-bien{background:#4ade80}.cli-punto.cli-mal{background:#fb923c}.cli-punto.cli-gris{background:#52525b}
.cli-mal-txt{color:#fdba74}
.cli-mag{width:2.6rem;height:2.6rem;flex:none;border-radius:.7rem;background:#27272a;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.88rem}

.cli-perfil{display:flex;align-items:center;gap:.7rem;margin:.2rem .1rem .9rem}
.cli-plan{position:relative;overflow:hidden;flex-direction:column;align-items:stretch;gap:.2rem;padding:.85rem .95rem}
.cli-plan-escudo{position:absolute;right:-10px;top:-6px;opacity:.1;line-height:0;pointer-events:none}
.cli-plan-nombre{font-size:1.18rem;font-weight:700;margin-top:.2rem}
.cli-fila-botones{display:flex;gap:.45rem;margin-top:.6rem}
.cli-pie{text-align:center;margin-top:1.4rem}

/* La letra grande no debe romper nada: las filas crecen hacia abajo en vez de cortarse. */
html.app-cliente .cli-fila>.cli-suave{text-align:right;max-width:45%}
@media(prefers-reduced-motion:reduce){ #pestanas{backdrop-filter:none} }

/* --- etapas 2 a 5 (10/10/2026) --- */
.cli-mini{font-size:.7rem;font-weight:600;white-space:nowrap}
.cli-bien-txt{color:#4ade80}.cli-gris-txt{color:#a1a1aa}.cli-ambar-txt{color:#fbbf24}
.cli-centro{text-align:center}
.cli-letra-chica{font-size:.7rem;margin:1rem .2rem;line-height:1.5}
.cli-nota{display:block;color:#a1a1aa;font-size:.8rem;line-height:1.5;margin-top:.7rem}
.cli-fila-alta{min-height:3.6rem;padding:.6rem 0;align-items:center}
.cli-resultado{font-size:.76rem;margin-top:.1rem}
.cli-mag-ambar{background:var(--marca600);color:#09090b}
.cli-resaltado{box-shadow:inset 3px 0 0 var(--marca600);padding-left:.5rem}
.cli-numero{width:1.7rem;height:1.7rem;flex:none;border-radius:999px;background:var(--marca600);color:#09090b;font-weight:800;
  font-size:.8rem;display:flex;align-items:center;justify-content:center}

/* El selector «En mi casa | Toda Colombia» */
.cli-segmento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:3px;background:#18181b;
  border:1px solid #27272a;border-radius:.75rem;margin-bottom:.4rem}
.cli-segmento a{display:flex;align-items:center;justify-content:center;min-height:2.1rem;border-radius:.55rem;color:#a1a1aa;
  font-size:.8rem;font-weight:500;text-decoration:none}
.cli-segmento a.activo{background:#27272a;color:var(--texto);font-weight:600}
.cli-segmento a:hover{text-decoration:none}

.cli-detalle{margin:1rem .1rem 0;color:#a1a1aa;font-size:.8rem}
.cli-detalle summary{cursor:pointer;color:var(--texto);font-weight:500;padding:.4rem 0}
.cli-detalle p{margin:.4rem 0;line-height:1.5}
.cli-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:2.2rem 1rem;
  border:1px dashed #27272a;border-radius:1.06rem;margin-top:.8rem}

/* Familia */
.cli-cupos{display:flex;align-items:center;gap:.6rem;margin:.2rem .15rem .2rem}
.cli-cupos-barra{flex:1 1 30%;min-width:4rem;display:flex;gap:4px}
.cli-cupos>.cli-suave{flex:0 1 auto;text-align:right}
.cli-cupos-continua{height:4px;border-radius:999px;background:#27272a;overflow:hidden}
.cli-cupos-continua span.lleno{display:block;flex:none;min-width:4px}
.cli-cupos-barra span{flex:1;height:4px;border-radius:999px;background:#27272a}
.cli-cupos-barra span.lleno{background:var(--marca600)}
.cli-persona{border-bottom:1px solid #27272a}
.cli-persona:last-child{border-bottom:0}
.cli-persona .cli-fila{border-bottom:0}
.cli-persona-acciones{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;padding:0 0 .7rem 3.1rem}
.cli-avatar-tu{border:0;background:var(--marca600);color:#09090b;font-weight:700}
.cli-avatar-acepto{border:2px solid var(--marca600);background:#27272a}
.cli-avatar-espera{border:2px dashed #52525b;background:#27272a}
.cli-fila .cli-avatar{width:2.3rem;height:2.3rem;flex:none}
.cli-boton-borde{background:transparent;color:var(--texto);border:1px solid #3f3f46}
.cli-boton-quitar{color:#a1a1aa}
.cli-interruptor{display:inline-flex!important;align-items:center;gap:.45rem;margin:0 .4rem 0 0!important;color:#a1a1aa;
  font-size:.76rem!important;cursor:pointer}
.cli-interruptor input{position:absolute;opacity:0;width:1px;height:1px}
.cli-interruptor span{width:2.1rem;height:1.25rem;border-radius:999px;background:#3f3f46;position:relative;flex:none;transition:background .15s}
.cli-interruptor span::after{content:"";position:absolute;left:2px;top:2px;width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);
  border-radius:999px;background:#a1a1aa;transition:transform .15s,background .15s}
.cli-interruptor input:checked+span{background:var(--marca600)}
.cli-interruptor input:checked+span::after{transform:translateX(.85rem);background:#09090b}
.cli-interruptor input:focus-visible+span{outline:2px solid var(--marca);outline-offset:2px}
.cli-formulario{flex-direction:column;align-items:stretch;gap:0;padding:.85rem .95rem}
.cli-formulario .cli-boton{margin-top:.9rem}
.cli-ventas{margin-top:1rem}

/* La flecha de volver, en la cabecera de las pantallas que cuelgan de una pestaña. */
#cli-volver{display:none}
html.app-cliente #cli-volver{display:inline-flex;align-items:center;gap:.2rem;color:var(--marca600);font-size:.8rem;
  font-weight:500;text-decoration:none;flex-basis:100%;margin:0 0 -.3rem -.2rem}
html.app-cliente #cli-volver svg{transform:rotate(180deg)}
html.app-cliente header{flex-wrap:wrap;row-gap:.3rem}

/* --- ETAPA 3: las pantallas de siempre (plan, ajustes, notificaciones, instalar, reservas, sismos)
   con el aspecto V3, sin tocar su logica: tarjetas, letreros, campos y botones. --- */
html.app-cliente #vista .tarjeta{max-width:none!important;border-radius:1.06rem;border:1px solid #27272a;background:#18181b;
  padding:.9rem 1rem;box-shadow:none}
html.app-cliente #vista h2{font-size:.65rem;letter-spacing:.12em;color:#71717a;font-weight:600;margin:1.2rem .15rem .5rem}
html.app-cliente #vista .tarjeta h2{margin:0 0 .5rem}
html.app-cliente #vista input:not([type=checkbox]):not([type=radio]),html.app-cliente #vista select,
html.app-cliente #vista textarea{font-size:max(16px,.94rem);min-height:2.8rem;border-radius:.75rem;border-color:#27272a;
  background:#09090b;box-sizing:border-box}
html.app-cliente #vista label{font-size:.76rem;margin:.9rem 0 .35rem}
html.app-cliente #vista button,html.app-cliente #vista .btn{min-height:2.6rem;border-radius:.75rem;font-size:.85rem}
html.app-cliente #vista button.chico{min-height:2rem}
html.app-cliente #vista .eti{border-radius:999px;font-size:.68rem}
html.app-cliente #vista .rejilla{gap:.5rem}
html.app-cliente #vista .dato{border-radius:.9rem;border-color:#27272a;background:#18181b}
html.app-cliente #vista .vacio{border-radius:1.06rem;border-color:#27272a}
html.app-cliente #vista .tabla-rollo{border-radius:1.06rem;border-color:#27272a}

/* ================= LA PANTALLA DE SISMO (V2, a pantalla completa) ================= */
#alerta-cli{position:fixed;inset:0;z-index:10050;background:#7f1d1d;color:#fff;display:flex;flex-direction:column;
  gap:1rem;padding:calc(1.2rem + env(safe-area-inset-top)) 1.3rem calc(1.4rem + env(safe-area-inset-bottom));
  overflow-y:auto;font-family:var(--fuente);font-size:17px}
#alerta-cli .ac-arriba{display:flex;align-items:center;justify-content:space-between}
#alerta-cli .ac-logo{display:flex;align-items:center;gap:.5rem;font-family:'Saira',var(--fuente);font-weight:900;font-style:italic;font-size:1.05rem}
#alerta-cli .ac-eti{background:#fff;color:#7f1d1d;border-radius:999px;padding:.25rem .7rem;font-weight:900;font-size:.75rem;letter-spacing:.14em}
#alerta-cli .ac-titulo{font-size:3.6rem;line-height:.95;font-weight:900;letter-spacing:-.04em;margin:.5rem 0 0;color:#fff}
#alerta-cli .ac-texto{font-size:1.1rem;color:#fecaca}
#alerta-cli .ac-pasos{display:flex;flex-direction:column;gap:.6rem;flex:1}
#alerta-cli .ac-paso{display:flex;align-items:center;gap:1rem;background:#ffffff1f;border-radius:1.3rem;padding:.9rem 1.1rem}
#alerta-cli .ac-paso>span{font-size:2rem;font-weight:900;width:1.8rem}
#alerta-cli .ac-paso b{display:block;font-size:1.5rem;font-weight:900;letter-spacing:-.02em}
#alerta-cli .ac-paso small{display:block;font-size:1rem;color:#fecaca}
#alerta-cli .ac-nota{text-align:center;color:#fecaca;font-size:1rem}
#alerta-cli .ac-botones{display:flex;flex-direction:column;gap:.6rem}
#alerta-cli .ac-callar{min-height:3.6rem;border-radius:1.2rem;background:#fff;color:#7f1d1d;font-size:1.15rem;font-weight:900}
#alerta-cli .ac-paso-luego{min-height:3.3rem;border-radius:1.2rem;background:transparent;color:#fff;border:2px solid #ffffff66;font-size:1rem;font-weight:700}

/* ================= EL PRIMER USO ================= */
#primer-uso{position:fixed;inset:0;z-index:10040;background:#09090b;color:var(--texto);overflow-y:auto;font-size:17px}
#primer-uso .pu-caja{min-height:100%;box-sizing:border-box;max-width:560px;margin:0 auto;display:flex;flex-direction:column;
  padding:calc(1.2rem + env(safe-area-inset-top)) 1.4rem calc(1.6rem + env(safe-area-inset-bottom));position:relative}
#primer-uso .pu-caja::before{content:"";position:absolute;top:22%;left:-30%;width:120%;aspect-ratio:1;border-radius:999px;
  background:radial-gradient(circle,#f59e0b24 0%,#f59e0b00 60%);pointer-events:none}
#primer-uso .pu-arriba{display:flex;align-items:center;justify-content:space-between;position:relative}
#primer-uso .pu-eti{display:flex;gap:.8rem;font-size:.7rem;font-weight:700;letter-spacing:.16em}
#primer-uso .pu-eti span:first-child{color:var(--marca600)}
#primer-uso .pu-eti span:last-child{color:#71717a}
#primer-uso .pu-cerrar{width:2.5rem;height:2.5rem;border-radius:999px;background:#18181b;color:#a1a1aa;padding:0;font-size:1rem}
#primer-uso .pu-barra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-top:.7rem;position:relative}
#primer-uso .pu-barra span{height:5px;border-radius:999px;background:#27272a}
#primer-uso .pu-barra span.lleno{background:var(--marca600)}
#primer-uso .pu-centro{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1rem;position:relative;padding:1.5rem 0}
#primer-uso .pu-escudo{position:relative;width:max-content;line-height:0}
#primer-uso .pu-icono{position:absolute;right:-.6rem;bottom:-.2rem;width:2.8rem;height:2.8rem;border-radius:999px;background:#f4f4f5;
  border:4px solid #09090b;display:flex;align-items:center;justify-content:center}
#primer-uso .pu-titulo{font-size:1.75rem;line-height:1.08;font-weight:800;letter-spacing:-.03em;margin:0;color:var(--texto);text-transform:none}
#primer-uso .pu-texto{font-size:1rem;line-height:1.5;color:#a1a1aa;margin:0}
#primer-uso .pu-texto b{color:var(--texto)}
#primer-uso .pu-abajo{display:flex;flex-direction:column;gap:.5rem;position:relative}
#primer-uso .pu-si{min-height:3.1rem;font-size:1rem;border-radius:.9rem}
#primer-uso .pu-no{background:transparent;color:#a1a1aa;font-weight:500;min-height:2.6rem}

/* ================= LA ENTRADA (V3) =================
   La pantalla de acceso es la misma para todos: se le da el aire de la app nueva sin cambiar su logica. */
#acceso .tarjeta{max-width:400px;background:transparent;border:0;box-shadow:none}
#acceso .marca-entrada{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin:0 0 1.6rem}
#acceso .marca-entrada .nombre{font-family:'Saira',var(--fuente);font-weight:900;font-style:italic;font-size:1.6rem;line-height:1}
#acceso .marca-entrada .nombre .s{color:#fff}
#acceso .marca-entrada .nombre .g{color:var(--marca600)}
#acceso .marca-entrada small{font-size:.8rem;color:#a1a1aa}
#acceso input{min-height:3rem;font-size:16px;border-radius:.75rem;background:#18181b;border-color:#27272a}
#acceso button:not(.plano){min-height:3rem;border-radius:.75rem;font-size:.95rem}
#acceso button.plano{min-height:2.8rem;border-radius:.75rem}

/* El saludo es un h2 dentro de #vista: sin esto le ganaba el letrero de seccion de la etapa 3 (10/10/2026). */
html.app-cliente #vista .cli-hola{font-size:1.41rem;font-weight:700;letter-spacing:-.02em;color:var(--texto);text-transform:none;margin:0}

/* Nada de la app del cliente puede empujar la pantalla hacia el lado. */
html.app-cliente, html.app-cliente body{overflow-x:clip}

/* =====================================================================================================
   ETAPA 6 (10/10/2026): las pantallas de dentro con las mismas piezas que las principales.
   Una sola escala: titulo de fila .88rem, texto de apoyo .76rem, letreros .65rem. Un boton principal
   ambar por bloque; lo demas, filas que se pulsan. Ningun texto de pantalla en otro tamaño.
   ===================================================================================================== */
/* Las filas pueden ser <label> o <button>: sin esto les ganaban los estilos de formulario de la etapa 3. */
html.app-cliente #vista label.cli-fila{margin:0;font-size:.88rem;color:var(--texto);font-weight:400;cursor:pointer}
html.app-cliente #vista button.cli-fila{background:transparent;color:var(--texto);border:0;border-bottom:1px solid #27272a;border-radius:0;
  padding:0;min-height:3.1rem;font:400 .88rem var(--fuente);box-shadow:none;justify-content:flex-start}
html.app-cliente #vista button.cli-fila:last-child{border-bottom:0}
html.app-cliente #vista button.cli-fila:hover{background:transparent;filter:none}
html.app-cliente #vista .cli-fila-alta{min-height:3.6rem}
.cli-bloque{display:block;margin-top:.1rem}
.cli-chico{font-size:.72rem}
.cli-opcion-titulo{font-weight:500;font-size:.88rem;line-height:1.3}
.cli-opcion-titulo .cli-pastilla{margin-left:.3rem;vertical-align:1px}
.cli-valor{font-weight:600;font-size:.88rem;white-space:nowrap;text-align:right}
html.app-cliente .cli-fila>.cli-suave.cli-bloque{text-align:left;max-width:none}
.cli-peligro .cli-crece,.cli-peligro{color:#f87171!important}
.cli-explica{color:#a1a1aa;font-size:.76rem;line-height:1.5;margin:-.15rem .15rem .55rem}
.cli-arriba{margin-top:.2rem}
.cli-letra-chica b{color:var(--texto)}
.cli-sin-margen{margin:0!important}
.cli-junto{margin-top:.6rem}
.cli-separado{margin-top:1rem}
.cli-ancho{width:100%;margin-top:.9rem}
html.app-cliente #vista .cli-boton,html.app-cliente #vista .cli-boton-sec{min-height:2.8rem;border-radius:.82rem;font-size:.88rem;
  padding:0 1rem;box-sizing:border-box}
html.app-cliente #vista .cli-boton-chico{min-height:2rem;border-radius:.6rem;font-size:.76rem;padding:0 .75rem}
html.app-cliente #vista .cli-boton-chico.cli-boton-borde{background:transparent;color:var(--texto);border:1px solid #3f3f46}
.cli-boton-ambar,html.app-cliente #vista .cli-boton-ambar{background:var(--marca600);color:#09090b}
html.app-cliente #vista button:disabled{opacity:.55}
.cli-msg{font-size:.76rem;margin:.5rem .15rem 0;min-height:0}
.cli-msg:empty{display:none}
.cli-enlace-suelto{display:inline-block;margin:.5rem .15rem 0;font-size:.76rem;color:var(--marca600)}

/* Elige una: toda la fila se pulsa y el check ambar dice cual va. */
.cli-opcion{cursor:pointer;-webkit-tap-highlight-color:transparent}
.cli-opcion input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cli-check{width:1.25rem;height:1.25rem;flex:none;border-radius:999px;border:2px solid #3f3f46;box-sizing:border-box;position:relative}
.cli-opcion input:checked~.cli-check{border-color:var(--marca600);background:var(--marca600)}
.cli-opcion input:checked~.cli-check::after{content:"";position:absolute;left:.33rem;top:.15rem;width:.28rem;height:.55rem;
  border:solid #09090b;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cli-opcion input:focus-visible~.cli-check{outline:2px solid var(--marca);outline-offset:2px}
.cli-opcion input:checked~.cli-crece .cli-opcion-titulo{font-weight:600}

/* Interruptor en su fila. */
.cli-fila-interruptor{cursor:pointer}
.cli-fila-interruptor .cli-interruptor{margin:0!important}
.cli-apagada{opacity:.5;cursor:default}

/* Formularios dentro de una tarjeta. */
html.app-cliente #vista .cli-formulario label.cli-campo-eti,html.app-cliente #vista label.cli-campo-eti{display:block;font-size:.76rem;color:#a1a1aa;
  margin:.8rem .1rem .35rem;font-weight:500}
html.app-cliente #vista .cli-formulario label.cli-campo-eti:first-child{margin-top:0}
html.app-cliente #vista .cli-formulario input:not([type=checkbox]):not([type=radio]):not([type=file]),
html.app-cliente #vista .cli-formulario select,html.app-cliente #vista .cli-sub-bloque select{width:100%;margin:0}
html.app-cliente #vista select{-webkit-appearance:none;appearance:none;padding-right:2.2rem;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:1rem}
.cli-formulario>.cli-suave{line-height:1.5}
.cli-formulario>.cli-opcion-titulo+.cli-suave{margin-top:.2rem}

/* El bloque que se abre debajo de una opcion (ciudades, magnitud). */
.cli-sub-bloque{padding:.2rem 0 .85rem 0;border-bottom:1px solid #27272a}
.cli-sub-bloque[hidden]{display:none}
html.app-cliente #vista .multi-buscable .buscar-multi{width:100%;margin:0 0 .5rem}
html.app-cliente #vista .multi-buscable .multi-todas{gap:.4rem;margin:0 0 .5rem}
html.app-cliente #vista .multi-buscable .multi-todas button{min-height:1.9rem;border-radius:.55rem;font-size:.72rem;padding:0 .65rem;
  background:transparent;color:var(--texto);border:1px solid #3f3f46}
html.app-cliente #vista .multi-buscable .casillas{max-height:15rem;overflow-y:auto;border:1px solid #27272a;border-radius:.75rem;
  background:#09090b;padding:.2rem .7rem;display:block;columns:auto}
html.app-cliente #vista .multi-buscable .casillas label{display:flex;align-items:center;gap:.6rem;margin:0;padding:.55rem 0;font-size:.82rem;
  color:var(--texto);border-bottom:1px solid #18181b}
html.app-cliente #vista .multi-buscable .casillas label.oculta{display:none}
html.app-cliente #vista input[type=checkbox]{accent-color:var(--marca600);width:1.1rem;height:1.1rem;flex:none;margin:0}

/* El codigo grande (instalar, Telegram). */
.cli-codigo-caja{align-items:center;text-align:center;gap:.35rem}
.cli-codigo{font:700 1.9rem/1.1 var(--mono, ui-monospace, monospace);letter-spacing:.14em;color:var(--texto);margin:.25rem 0;word-break:break-all}
.cli-codigo-caja .cli-ancho{margin-top:.5rem}

/* Mi plan. */
.cli-plan-suyo .cli-opcion-titulo{color:var(--texto)}
.cli-borde-aviso{border-color:#fb923c55!important}
.cli-columna-derecha{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;flex:none}
.cli-pastilla-mala{background:#f871711f;color:#fca5a5}
.cli-pastilla-gris{background:#27272a;color:#a1a1aa}
.cli-fila .cli-pastilla{flex:none}

/* Subir un archivo: una fila que se pulsa, no el control del navegador. */
html.app-cliente #vista label.cli-archivo{display:flex;align-items:center;gap:.6rem;margin:.8rem 0 0;min-height:2.8rem;padding:0 .85rem;
  border:1px dashed #3f3f46;border-radius:.75rem;font-size:.82rem;color:var(--texto);cursor:pointer;box-sizing:border-box}
.cli-archivo input{position:absolute;opacity:0;width:1px;height:1px}
.cli-archivo .cli-crece{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Lo que se respondio al comprar, dentro de la reserva. */
html.app-cliente #vista details.cuestionario{margin:.5rem 0 0!important;padding:0!important;border:0!important}
html.app-cliente #vista details.cuestionario summary{font-size:.76rem!important;font-weight:500!important;color:var(--marca600)}
html.app-cliente #vista details.cuestionario div{font-size:.76rem!important}

/* Toda Colombia. */
.cli-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:.6rem 0 .7rem}
.cli-cifras>div{background:#18181b;border:1px solid #27272a;border-radius:.9rem;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cli-cifras b{font-size:1.18rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.cli-cifras span{font-size:.68rem;color:#a1a1aa;line-height:1.3}
html.app-cliente #vista .cli-mapa{height:min(16rem,42vh);border-radius:1.06rem;border:1px solid #27272a;overflow:hidden;margin:0;background:#18181b}
html.app-cliente .leaflet-popup-content-wrapper,html.app-cliente .leaflet-popup-tip{background:#18181b;color:var(--texto);border:1px solid #27272a}
html.app-cliente .leaflet-popup-content{font-size:.8rem;margin:.6rem .8rem}

/* Recomendar / quiero la mia. */
.cli-recomienda{gap:.6rem}
.cli-recomienda-cab{display:flex;align-items:center;gap:.5rem}
.cli-enlace-copia{background:#09090b;border:1px solid #27272a;border-radius:.75rem;padding:.65rem .8rem;font-size:.8rem;color:#d4d4d8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all;-webkit-user-select:all}
.cli-gancho{margin-top:.2rem}

/* Los «¿Por que…?» dentro de una tarjeta de filas. */
.cli-detalle-fila{margin:0!important;padding:.2rem 0 .6rem;border-top:1px solid #27272a}
.cli-detalle-fila summary{font-size:.8rem}

/* Los dialogos (confirmar, avisar): una hoja que sube desde abajo, como en el celular. */
html.app-cliente .mod-fondo{align-items:flex-end!important;padding:0!important}
html.app-cliente .mod-fondo .mod{width:100%!important;max-width:560px!important;margin:0 auto!important;box-sizing:border-box;
  border-radius:1.3rem 1.3rem 0 0!important;background:#18181b!important;border:1px solid #27272a!important;border-bottom:0!important;
  padding:1.2rem 1.1rem calc(1rem + env(safe-area-inset-bottom))!important;font-size:.88rem;animation:cli-hoja .18s ease-out}
html.app-cliente .mod-fondo .mod h3{font-size:1.05rem;font-weight:700;margin:0 0 .4rem}
html.app-cliente .mod-fondo .mod .cuerpo{color:#a1a1aa;line-height:1.5;white-space:pre-line}
html.app-cliente .mod-fondo .mod .pie{display:flex;flex-direction:column-reverse;gap:.5rem;margin-top:1.1rem}
html.app-cliente .mod-fondo .mod .pie button{width:100%;min-height:2.9rem;border-radius:.82rem;font-size:.9rem;margin:0}
@keyframes cli-hoja{from{transform:translateY(30%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){ html.app-cliente .mod-fondo .mod{animation:none} }
html.app-cliente .mod-fondo .mod h3,html.app-cliente .mod-fondo .mod .cuerpo,html.app-cliente .mod-fondo .mod .pie{padding:0}
html.app-cliente .mod-fondo .mod input,html.app-cliente .mod-fondo .mod select{margin:.8rem 0 0;width:100%;min-height:2.8rem;font-size:16px;border-radius:.75rem}

.cli-letra-chica{color:#a1a1aa}
html.app-cliente #vista .cli-dos .cli-boton,html.app-cliente #vista .cli-dos .cli-boton-sec{margin-top:0}

/* =====================================================================================================
   ETAPA 7 (10/10/2026): que se sienta app. Movimiento corto (≤ 280 ms) con la curva de iOS, nada que
   rebote de mas, y sin nada de esto con «reducir movimiento».
   ===================================================================================================== */
html.app-cliente{-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior-y:none}
html.app-cliente body{-webkit-font-smoothing:antialiased}

/* Salir: la pantalla vieja se apaga rapido. */
html.app-cliente #principal>header,html.app-cliente #vista{transition:opacity .09s ease-out}
html.app-cliente #principal.cli-sale>header,html.app-cliente #principal.cli-sale #vista{opacity:0}

/* Entrar. */
@keyframes cli-sube{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes cli-desde-der{from{opacity:0;transform:translate3d(32px,0,0)}to{opacity:1;transform:none}}
@keyframes cli-desde-izq{from{opacity:0;transform:translate3d(-32px,0,0)}to{opacity:1;transform:none}}
@keyframes cli-aparece{from{opacity:0}to{opacity:1}}
html.app-cliente #principal.cli-entra-push>header,html.app-cliente #principal.cli-entra-push #vista{animation:cli-desde-der .28s cubic-bezier(.2,.8,.2,1) backwards}
html.app-cliente #principal.cli-entra-pop>header,html.app-cliente #principal.cli-entra-pop #vista{animation:cli-desde-izq .28s cubic-bezier(.2,.8,.2,1) backwards}
html.app-cliente #principal.cli-entra-fade>header,html.app-cliente #principal.cli-entra-fade #vista{animation:cli-aparece .2s ease-out backwards}
/* Cambio de pestaña: el titulo aparece y los bloques suben uno detras de otro. */
html.app-cliente #principal.cli-entra-tab>header{animation:cli-aparece .2s ease-out backwards}
html.app-cliente #principal.cli-entra-tab #vista>*{animation:cli-sube .32s cubic-bezier(.2,.8,.2,1) backwards}
html.app-cliente #principal.cli-entra-tab #vista>*:nth-child(2){animation-delay:.03s}
html.app-cliente #principal.cli-entra-tab #vista>*:nth-child(3){animation-delay:.06s}
html.app-cliente #principal.cli-entra-tab #vista>*:nth-child(4){animation-delay:.09s}
html.app-cliente #principal.cli-entra-tab #vista>*:nth-child(5){animation-delay:.12s}
html.app-cliente #principal.cli-entra-tab #vista>*:nth-child(6){animation-delay:.15s}
html.app-cliente #principal.cli-entra-tab #vista>*:nth-child(n+7){animation-delay:.18s}

/* El esqueleto. */
.cli-esqueleto{display:flex;flex-direction:column;gap:.6rem;padding-top:.4rem}
.cli-hueso{display:block;border-radius:.5rem;background:linear-gradient(90deg,#18181b 0%,#232327 40%,#18181b 80%);
  background-size:300% 100%;animation:cli-brillo 1.3s ease-in-out infinite}
.cli-hueso+.cli-hueso{margin-top:.4rem}
.cli-hueso-tarjeta{display:flex;gap:.8rem;align-items:center;padding:.4rem .85rem}
.cli-hueso-tarjeta .cli-hueso{background:linear-gradient(90deg,#232327 0%,#2e2e33 40%,#232327 80%);background-size:300% 100%}
.cli-hueso-alta{padding:1rem}
.cli-hueso-fila{display:flex;align-items:center;gap:.75rem;min-height:3.3rem;width:100%}
.cli-hueso-fila+.cli-hueso-fila{border-top:1px solid #27272a}
.cli-hueso-redondo{width:2.3rem;height:2.3rem;border-radius:.7rem;flex:none}
.cli-hueso-escudo{width:3.4rem;height:3.7rem;border-radius:1rem;flex:none}
.cli-esqueleto .cli-dos{margin:0}
@keyframes cli-brillo{from{background-position:100% 0}to{background-position:0 0}}

/* Todo responde al dedo. */
html.app-cliente .cli-fila-link,html.app-cliente .cli-opcion,html.app-cliente .cli-fila-interruptor{transition:background-color .15s;border-radius:.5rem}
html.app-cliente .cli-fila-link:active,html.app-cliente .cli-opcion:active,html.app-cliente .cli-fila-interruptor:active,
html.app-cliente #vista button.cli-fila:active{background-color:#ffffff0d!important}
html.app-cliente .cli-boton,html.app-cliente .cli-boton-sec,html.app-cliente .cli-boton-chico,html.app-cliente a.cli-tarjeta,
html.app-cliente .cli-segmento a,html.app-cliente .cli-avatar{transition:transform .14s cubic-bezier(.2,.8,.2,1),filter .14s,background-color .15s,border-color .15s}
html.app-cliente .cli-boton:active,html.app-cliente .cli-boton-sec:active,html.app-cliente .cli-boton-chico:active,
html.app-cliente a.cli-tarjeta:active,html.app-cliente .cli-avatar:active{transform:scale(.97)}
html.app-cliente .cli-segmento a{transition:background-color .2s,color .2s}
html.app-cliente .cli-check{transition:background-color .15s,border-color .15s}
#pestanas a{transition:color .2s}
#pestanas a svg{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
#pestanas a:active svg{transform:scale(.85)}
#pestanas a.activo svg{transform:translateY(-1px)}
html.app-cliente #cli-volver:active{opacity:.6}

/* Enviando / guardando (etapa 8): el boton gira con su texto, queda bloqueado y no cambia de sitio. */
html.app-cliente #vista [aria-busy=true]{pointer-events:none;opacity:.85!important;cursor:progress}
html.app-cliente #vista [aria-busy=true]::before{content:"";display:inline-block;flex:none;width:1em;height:1em;margin-right:.5em;
  box-sizing:border-box;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;vertical-align:-.15em;
  animation:cli-gira .7s linear infinite}
@keyframes cli-gira{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  html.app-cliente #principal>header,html.app-cliente #vista,html.app-cliente #vista>*{animation:none!important;transition:none!important}
  .cli-hueso{animation:none}
  #pestanas a svg{transition:none}
}

/* ================= EL MAPA DE TODA COLOMBIA (10/10/2026) ================= */
.cli-mapa-caja{position:relative;border-radius:1.06rem;overflow:hidden;border:1px solid #27272a;background:#0e0e11}
html.app-cliente #vista .cli-mapa{height:min(17rem,48vh);width:100%;margin:0;border:0;border-radius:0;background:#0e0e11;font-family:var(--fuente)}
.cli-mapa .leaflet-tile-pane{filter:none}
.cli-mapa-vista{position:absolute;top:.6rem;left:.6rem;z-index:500;display:flex;padding:3px;gap:2px;border-radius:.7rem;
  background:#09090bd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #27272a}
html.app-cliente #vista .cli-mapa-vista button{min-height:1.9rem;padding:0 .7rem;border-radius:.5rem;background:transparent;color:#a1a1aa;
  font:500 .72rem var(--fuente);border:0}
html.app-cliente #vista .cli-mapa-vista button.activo{background:#27272a;color:#fff;font-weight:600}
.cli-mapa .leaflet-control-zoom{border:0!important;margin:0 .6rem .6rem 0!important;border-radius:.7rem;overflow:hidden;box-shadow:none}
.cli-mapa .leaflet-control-zoom a{width:2.1rem!important;height:2.1rem!important;line-height:2.1rem!important;background:#09090bd9!important;
  color:#e4e4e7!important;border:1px solid #27272a!important;font-size:1.1rem!important}
.cli-mapa .leaflet-control-zoom a:first-child{border-bottom:0!important}
.cli-mapa .leaflet-control-attribution{background:#09090b99!important;color:#71717a!important;font-size:.55rem!important;padding:0 .35rem!important}
.cli-mapa .leaflet-control-attribution a{color:#71717a!important}
/* Las bolitas: el numero es la magnitud. */
.cli-pin{box-sizing:border-box;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;
  letter-spacing:-.02em;line-height:1;font-family:var(--fuente);transition:transform .15s}
.cli-pin-ambar{background:#f59e0b;color:#09090b;border:2px solid #fde68a;box-shadow:0 0 0 5px #f59e0b33,0 2px 8px #0009}
.cli-pin-cerca{background:#7c2d12;color:#fed7aa;border:2px solid #fb923c;box-shadow:0 2px 6px #0008}
.cli-pin-lejos{background:#3f3f46e6;color:#e4e4e7;border:1.5px solid #71717a;box-shadow:0 2px 6px #0008}
.leaflet-marker-icon:hover .cli-pin{transform:scale(1.12)}
.cli-pin-casa{width:28px;height:28px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px #ffffff33,0 2px 8px #000a}
.leaflet-tooltip.cli-mapa-etiqueta{background:#09090bd9;color:#fff;border:1px solid #3f3f46;border-radius:.5rem;font:600 .7rem var(--fuente);
  padding:.15rem .45rem;box-shadow:none}
.leaflet-tooltip.cli-mapa-etiqueta::before{display:none}
/* La ventanita del sismo. */
.cli-mapa .leaflet-popup-content-wrapper{background:#18181b;color:#fff;border:1px solid #3f3f46;border-radius:.8rem;box-shadow:0 8px 24px #000c}
.cli-mapa .leaflet-popup-tip{background:#18181b;border:1px solid #3f3f46}
.cli-mapa .leaflet-popup-content{margin:.6rem .75rem;font-size:.8rem;line-height:1.4;min-width:11rem}
.cli-pop b{font-weight:700}
.cli-pop span{display:block;color:#a1a1aa;font-size:.72rem;margin-top:.15rem}
.cli-pop em{display:block;font-style:normal;font-size:.72rem;font-weight:600;margin-top:.3rem;color:#a1a1aa}
.cli-pop em.cli-pop-ambar{color:#fbbf24}.cli-pop em.cli-pop-cerca{color:#fdba74}
/* La leyenda. */
.cli-leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;margin:.55rem .2rem 0;font-size:.72rem;color:#d4d4d8}
.cli-leyenda span{display:inline-flex;align-items:center;gap:.35rem}
.cli-leyenda i{width:.7rem;height:.7rem;border-radius:999px;box-sizing:border-box;display:inline-block;box-shadow:none!important}
.cli-leyenda .cli-leyenda-nota{color:#71717a;margin-left:auto}
.cli-leyenda[hidden],.cli-mapa-caja[hidden],.cli-mapa-vista[hidden]{display:none}
.cli-pin-casa{width:16px;height:16px;border-radius:999px;background:#fff;border:3px solid #09090b;box-sizing:border-box;
  box-shadow:0 0 0 3px #ffffff40,0 2px 6px #000a}
.cli-pin-casa{position:relative}
.cli-pin-casa span{position:absolute;left:14px;top:50%;transform:translateY(-50%);white-space:nowrap;background:#ffffff;color:#09090b;
  font:700 .62rem/1 var(--fuente);padding:.18rem .4rem;border-radius:.4rem;box-shadow:0 2px 6px #0009}
.cli-pin-casa span{left:50%;top:14px;transform:translateX(-50%)}
.cli-mapa-lejos .cli-pin{transform:scale(.68)}
.cli-mapa-lejos .leaflet-marker-icon:hover .cli-pin{transform:scale(.8)}
.cli-mapa-lejos .cli-pin-casa span{display:none}

/* --- mapa: pantalla completa, pista de dos dedos (10/10/2026) --- */
.cli-mapa-grande{position:absolute;top:.6rem;right:.6rem;z-index:500}
html.app-cliente #vista .cli-mapa-grande{width:2.4rem;height:2.4rem;min-height:0;padding:0;border-radius:.7rem;display:flex;align-items:center;
  justify-content:center;background:#09090bd9;color:#fff;border:1px solid #27272a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cli-mapa-grande .cerrar{display:none}
.cli-mapa-full .cli-mapa-grande .abrir{display:none}
.cli-mapa-full .cli-mapa-grande .cerrar{display:inline}
.cli-mapa-pista{position:absolute;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:#09090bb3;color:#fff;font-weight:600;font-size:.88rem;opacity:0;transition:opacity .2s}
.cli-con-pista .cli-mapa-pista{opacity:1}
.cli-mapa-leyenda-flota{display:none}
html.cli-sin-scroll,html.cli-sin-scroll body{overflow:hidden}
.cli-mapa-caja.cli-mapa-full{position:fixed;inset:0;z-index:10030;border:0;border-radius:0;animation:cli-aparece .18s ease-out}
html.app-cliente #vista .cli-mapa-full .cli-mapa{height:100dvh!important;height:100vh}
@supports (height:100dvh){ html.app-cliente #vista .cli-mapa-full .cli-mapa{height:100dvh!important} }
.cli-mapa-full .cli-mapa-vista{top:calc(.7rem + env(safe-area-inset-top));left:.8rem}
html.app-cliente #vista .cli-mapa-full .cli-mapa-grande{top:calc(.7rem + env(safe-area-inset-top));right:.8rem;width:2.6rem;height:2.6rem;border-radius:999px}
.cli-mapa-full .leaflet-bottom{bottom:env(safe-area-inset-bottom)}
.cli-mapa-full .leaflet-control-zoom{margin-bottom:3.6rem!important}
.cli-mapa-full .cli-mapa-leyenda-flota{display:flex;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(1.2rem + env(safe-area-inset-bottom));
  z-index:500;gap:.8rem;padding:.45rem .8rem;border-radius:999px;background:#09090bd9;border:1px solid #27272a;font-size:.72rem;color:#e4e4e7;
  white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cli-mapa-leyenda-flota span{display:inline-flex;align-items:center;gap:.3rem}
.cli-mapa-leyenda-flota i{width:.65rem;height:.65rem;border-radius:999px;box-sizing:border-box;display:inline-block;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){ .cli-mapa-caja.cli-mapa-full{animation:none} }

/* EN VIVO (17/10/2026): la señal de la Sentinela en la app del cliente */
.cli-vivo{flex-direction:column;align-items:stretch;gap:.55rem}
.cli-vivo-cab,.cli-vivo-pie{display:flex;align-items:center;gap:.5rem}
.cli-vivo-pie{justify-content:space-between;font-size:.78rem}
.cli-vivo-luz{width:.55rem;height:.55rem;border-radius:999px;background:#52525b;flex:none}
.cli-vivo-luz.cli-vivo-si{background:#ef4444;box-shadow:0 0 0 0 #ef444499;animation:cliVivoLatido 1.6s ease-out infinite}
.cli-vivo-onda{width:100%;height:110px;display:block;border-radius:.6rem;background:#0f0f12}
@keyframes cliVivoLatido{0%{box-shadow:0 0 0 0 #ef444499}70%{box-shadow:0 0 0 .45rem #ef444400}100%{box-shadow:0 0 0 0 #ef444400}}
@media(prefers-reduced-motion:reduce){ .cli-vivo-luz.cli-vivo-si{animation:none} }