:root{
  --tinta:#16141A; --hoja:#FFFFFF; --concreto:#E5E7E6; --regla:#D6D9D7; --regla2:#EAECEB;
  --gris:#6B6570; --presencia:#1F6FA8; --presencia2:#E4EFF7; --ausencia:#C8102E; --bajas:#C0334D;
  --suave:#F4F5F4; --verde:#157A4B; --nota:#FFD84D;
  --x:'Archivo','Segoe UI',system-ui,sans-serif; --n:'Archivo Narrow','Archivo','Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:#CBCFCD;color:var(--tinta);font:14px/1.45 var(--x)}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:1.5rem;font-weight:800;letter-spacing:-.01em} h2{font-size:1.02rem;font-weight:700} h3{font-size:.92rem;font-weight:700}
p{margin:.3em 0}
.gris{color:var(--gris)} .peq{font-size:.8rem}
.num{font-variant-numeric:tabular-nums}
/* visor */
.visor{position:sticky;top:0;z-index:20;background:var(--tinta);color:#fff;padding:10px 16px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.visor strong{margin-right:10px;font-weight:800}
.visor button{background:#2C2931;color:#D9D6DD;border:0;border-radius:7px;padding:6px 10px;cursor:pointer;font:500 .82rem var(--x)}
.visor button.on{background:var(--nota);color:var(--tinta);font-weight:700}
.visor button:focus-visible{outline:2px solid var(--nota);outline-offset:2px}
.aviso{max-width:1240px;margin:14px auto 0;padding:10px 14px;background:#FFF7D1;border:1px solid #EAD27A;border-radius:10px;font-size:.85rem}
.pantalla{display:none;max-width:1240px;margin:14px auto 40px;padding-inline:12px}
.pantalla.on{display:block}
/* marco del panel */
.app{display:grid;grid-template-columns:210px minmax(0,1fr);background:var(--concreto);border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(22,20,26,.22);min-height:700px}
.rail{background:var(--hoja);border-right:1px solid var(--regla);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.logo{display:flex;align-items:center;gap:2px;font-weight:800;font-size:1.45rem;letter-spacing:.02em;padding:0 8px}
.logo svg{margin:0 1px}
.lema{font-size:.6rem;letter-spacing:.2em;color:var(--gris);padding:2px 8px 18px;white-space:nowrap}
.rail a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--gris);text-decoration:none;font-weight:500}
.rail a.on{background:var(--suave);color:var(--tinta);font-weight:700;box-shadow:inset 3px 0 0 var(--tinta)}
.rail a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail .cta{margin-left:auto;background:var(--tinta);color:#fff;border-radius:99px;font-size:.68rem;padding:0 7px;font-weight:700}
.rail .sep{height:1px;background:var(--regla2);margin:8px 6px}
.rail .pie{margin-top:auto;border-top:1px solid var(--regla2);padding:12px 8px 0;font-size:.8rem}
.main{min-width:0}
.top{background:var(--hoja);border-bottom:1px solid var(--regla);padding:12px 22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.top h1{margin-right:auto}
.miga{font-size:.78rem;color:var(--gris)}
.periodo{font-size:.8rem;color:var(--gris);background:var(--suave);border-radius:99px;padding:5px 12px}
.periodo b{color:var(--tinta)}
.cont{padding:20px 22px}
.btn{display:inline-block;border:1px solid var(--regla);background:#fff;border-radius:8px;padding:6px 12px;font-weight:600;white-space:nowrap;font-size:.84rem}
.btn.pri{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn.ok{background:var(--verde);border-color:var(--verde);color:#fff}
.btn.ok::before{content:'\2713\00a0'}
.btn.mal{background:var(--ausencia);border-color:var(--ausencia);color:#fff}
.btn.mal::before{content:'!\00a0';font-weight:800}
.btn.mal2{border-color:var(--ausencia);color:var(--ausencia)}
.btn.mini{padding:3px 9px;font-weight:500;font-size:.76rem}
.bloque{background:var(--hoja);border:1px solid var(--regla);border-radius:12px;padding:16px}
.plano{background:var(--hoja);border-top:1px solid var(--regla);border-bottom:1px solid var(--regla);padding:14px 0}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.g21{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.g2,.g21,.g4{grid-template-columns:1fr}.app{grid-template-columns:1fr}.rail{display:none}}
.fila{display:flex;gap:10px;align-items:center}
.kpi{background:var(--hoja);border:1px solid var(--regla);border-radius:10px;padding:12px 14px}
.kpi b{display:block;font-size:1.55rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi small{color:var(--gris);font-size:.78rem}
.pil{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:99px;font:600 .72rem var(--n);border:1px solid var(--regla);color:var(--gris);background:#fff;white-space:nowrap}
.pil.az{border-color:var(--presencia);color:var(--presencia);background:var(--presencia2)}
.pil.ti{border-color:var(--tinta);color:var(--tinta)}
.pil.al{border-color:var(--ausencia);color:var(--ausencia)}
/* antiguedad: forma, no color */
.edad{width:14px;height:14px;border-radius:50%;border:2px solid var(--tinta);display:inline-block;flex:none}
.edad.m{background:linear-gradient(90deg,var(--tinta) 50%,transparent 50%)}
.edad.l{background:var(--tinta)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font:600 .72rem var(--n);color:var(--gris);padding:6px 8px;border-bottom:1px solid var(--regla);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--regla2);vertical-align:middle}
.tabla{overflow-x:auto}
.renglon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--regla2)}
.renglon:last-child{border-bottom:0}
.renglon .t{font-weight:700}
.renglon .m{color:var(--gris);font-size:.8rem}
.btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.barra{height:8px;border-radius:99px;background:var(--regla2);overflow:hidden}
.barra b{display:block;height:100%;background:var(--presencia);border-radius:99px}
.barra.ti b{background:var(--tinta)}
/* pasos y checklist */
.pasos{display:flex;margin:16px 0 18px}
.paso{flex:1;position:relative;text-align:center;font-size:.76rem;color:var(--gris)}
.paso .c{width:30px;height:30px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font-weight:800;background:#fff;border:2px solid var(--regla);position:relative;z-index:1}
.paso::before{content:'';position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--regla)}
.paso:first-child::before{display:none}
.paso.hecho .c{background:var(--presencia);border-color:var(--presencia);color:#fff}
.paso.hecho::before,.paso.act::before{background:var(--presencia)}
.paso.medio .c{border-color:var(--presencia);color:var(--presencia);background:linear-gradient(90deg,var(--presencia2) 50%,#fff 50%)}
.paso.act .c{border-color:var(--tinta);color:var(--tinta);box-shadow:0 0 0 4px var(--regla2)}
.paso.act{color:var(--tinta);font-weight:700}
.check{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--regla2)}
.check:last-child{border-bottom:0}
.ck{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;border:2px solid var(--regla);color:var(--gris);background:#fff;margin-top:1px}
.ck.si{background:var(--presencia);border-color:var(--presencia);color:#fff}
.ck.med{border-color:var(--presencia);color:var(--presencia);background:linear-gradient(90deg,var(--presencia2) 50%,#fff 50%)}
.check .d{color:var(--gris);font-size:.8rem}
/* linea de tiempo */
.linea{position:relative;padding-left:20px}
.linea::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--regla)}
.ev{position:relative;padding:3px 0 12px}
.ev::before{content:'';position:absolute;left:-19px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--tinta)}
.ev.fut::before{border-style:dashed;border-color:var(--gris)}
.ev .h{color:var(--gris);font-size:.76rem}
.tabs{display:flex;border-bottom:1px solid var(--regla);margin:12px 0 14px;flex-wrap:wrap}
.tabs span{padding:8px 12px;font-size:.85rem;color:var(--gris)}
.tabs span.on{color:var(--tinta);font-weight:700;box-shadow:inset 0 -3px 0 var(--tinta)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chip{border:1px solid var(--regla);background:#fff;border-radius:99px;padding:4px 11px;font-size:.78rem;color:var(--gris)}
.chip.on{border-color:var(--tinta);color:var(--tinta);font-weight:700}
.nombre{display:flex;gap:9px;align-items:center}
.ini{width:28px;height:28px;border-radius:50%;background:var(--suave);border:1px solid var(--regla);display:grid;place-items:center;font:700 .66rem var(--n);flex:none}
/* telefonos */
.tel{width:340px;max-width:100%;margin:0 auto;border-radius:30px;background:#0B0A0D;padding:12px;box-shadow:0 12px 36px rgba(0,0,0,.3)}
.tel .scr{border-radius:22px;overflow:hidden;background:var(--concreto);min-height:600px}
.wa{background:#0B141A;min-height:600px;padding:12px;display:flex;flex-direction:column;gap:8px;font:14px/1.45 system-ui,sans-serif;color:#E9EDEF}
.wa .cab{font-weight:700;padding:4px 2px 10px;border-bottom:1px solid #1F2C33;margin-bottom:6px}
.bur{max-width:86%;padding:8px 10px;border-radius:10px}
.bur.yo{align-self:flex-end;background:#005C4B}
.bur.bot{align-self:flex-start;background:#202C33}
.bur .lst{border-top:1px solid #33424b;margin-top:8px;padding-top:6px;text-align:center;color:#53BDEB;font-weight:600}
.tg{background:#17212B;min-height:600px;padding:12px;display:flex;flex-direction:column;gap:8px;font:14px/1.45 system-ui,sans-serif;color:#F5F5F5}
.tg .cab{font-weight:700;padding:4px 2px 10px;border-bottom:1px solid #26333F;margin-bottom:6px}
.tg .yo{align-self:flex-end;background:#2B5278}
.tg .bot{align-self:flex-start;background:#182533}
.tg .fijo{margin-top:auto;background:#242F3D;border-radius:10px;text-align:center;padding:10px;font-weight:600}
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px;padding:24px;background:var(--concreto);border-radius:14px;box-shadow:0 10px 40px rgba(22,20,26,.22)}
/* anotaciones */
.anot{position:relative}
.bola{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--nota);color:var(--tinta);font-weight:800;font-size:.8rem;display:grid;place-items:center;box-shadow:0 0 0 3px #fff;z-index:3}
.leyenda{max-width:1240px;margin:10px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.leyenda div{background:#fff;border-radius:10px;padding:10px 12px;font-size:.83rem;display:flex;gap:10px}
.leyenda b.n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--nota);display:grid;place-items:center;font-size:.75rem}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Atalaya: agregados sobre el sistema del panel */
.folio{font:600 .7rem var(--n);color:var(--gris);border:1px solid var(--regla);border-radius:5px;padding:0 5px;margin-left:4px;white-space:nowrap}
.urgente{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:#FCEBEE;border:2px solid var(--ausencia);border-radius:12px;padding:14px 16px}
.urgente .t{font-weight:800}.urgente .m{font-size:.82rem;color:var(--tinta)}
.sello-u{width:38px;height:34px;display:grid;place-items:center;background:var(--ausencia);color:#fff;font-weight:900;clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:10px;font-size:.8rem;flex:none}
.sello-u.chico{width:26px;height:24px;padding-top:7px;font-size:.62rem;display:inline-grid;vertical-align:middle}
.sello-n{width:22px;height:22px;border-radius:5px;border:2px solid var(--tinta);display:inline-grid;place-items:center;font-weight:900;font-size:.75rem;flex:none}
.leg{display:flex;gap:10px;align-items:center;font-size:.8rem;padding:4px 0}
svg.mini{width:64px;height:48px;border-radius:6px;flex:none;display:block}
svg.mini.sel{outline:3px solid var(--tinta);outline-offset:1px}
.foto{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#4A5055}
.foto>svg{width:100%;height:100%;display:block}
.caja{position:absolute;border:3px solid var(--nota);border-radius:4px}
.caja span{position:absolute;top:-22px;left:-3px;background:var(--nota);color:var(--tinta);font:700 .7rem var(--n);padding:1px 6px;border-radius:4px;white-space:nowrap}
table.datos th{width:130px;border:0;padding:6px 8px 6px 0;vertical-align:top;white-space:normal}
table.datos td{border:0;border-bottom:1px solid var(--regla2);padding:6px 0;font-size:.84rem}
.cand{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--regla2)}
.parecido{height:6px;background:var(--regla2);border-radius:99px;margin:6px 0 2px;max-width:220px}
.parecido i{display:block;height:100%;background:var(--tinta);border-radius:99px}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.galeria figure{margin:0}.galeria svg{width:100%;aspect-ratio:4/3;border-radius:8px;display:block}
.galeria figcaption{font-size:.74rem;color:var(--gris);margin-top:4px}
.mapa{position:relative;height:170px;border-radius:10px;border:1px solid var(--regla);background:repeating-linear-gradient(0deg,transparent 0 27px,var(--regla2) 27px 28px),repeating-linear-gradient(90deg,transparent 0 27px,var(--regla2) 27px 28px),var(--suave)}
.mapa.grande{height:300px}
.mapa i{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--tinta);color:#fff;font:700 .75rem var(--n);display:grid;place-items:center;font-style:normal;box-shadow:0 0 0 3px #fff}
.mapa .sitio{position:absolute;font:600 .72rem var(--n);color:var(--gris)}
.punto{width:24px;height:24px;display:inline-grid;place-items:center;font:800 .74rem var(--n);font-style:normal;color:#fff;background:var(--tinta);border-radius:50%;flex:none;vertical-align:middle}
.punto.p1,.mapa i.p1{background:var(--ausencia);border-radius:3px;transform:rotate(45deg)}
.punto.p1,.mapa i.p1{font-size:0}.punto.p1::after,.mapa i.p1::after{content:'1';font-size:.74rem;transform:rotate(-45deg)}
.punto.p2,.mapa i.p2{background:var(--tinta)}
.punto.p3,.mapa i.p3{background:#fff;color:var(--tinta);border:2px solid var(--tinta)}
.buscador{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--regla);border-radius:10px;padding:12px 14px;color:var(--gris)}
.buscador svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.subir{border:2px dashed var(--regla);border-radius:10px;padding:10px 14px;background:#fff}
.barras{display:flex;gap:18px;align-items:flex-end;height:180px;padding:0 6px 4px;border-bottom:1px solid var(--regla)}
.barras div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.barras span{width:100%;max-width:56px;background:#9EB9D0;border-radius:6px 6px 0 0;display:flex;align-items:flex-end}
.barras span i{display:block;width:100%;background:var(--presencia);border-radius:6px 6px 0 0}
.barras small{font-size:.72rem;color:var(--gris)}
.cuad{display:inline-block;width:10px;height:10px;background:var(--presencia);border-radius:2px}.cuad.cl{background:#9EB9D0}
.ln{background:#fff;min-height:600px;padding:12px;display:flex;flex-direction:column;gap:10px;font:14px/1.45 system-ui,sans-serif;color:#111}
.ln .cab{font-weight:700;padding:4px 2px 10px;border-bottom:1px solid #E3E3E3;margin-bottom:6px}
.ln .bur{border-radius:18px}.ln .bur.yo{background:#2C6BED;color:#fff}.ln .bur.bot{background:#E9E9EB}
.fotochat{width:110px;height:82px;border-radius:8px;display:block;margin:3px 0}
.reac{align-self:flex-start;margin:-12px 0 0 12px;background:#fff;border:1px solid #D6D9D7;border-radius:99px;padding:0 6px;font-size:.8rem}
.sello{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font:600 .68rem/1.35 var(--n);padding:4px 8px}
.sello .caja-s{outline:2px dashed var(--nota);outline-offset:2px}
@media(max-width:700px){.urgente{grid-template-columns:auto minmax(0,1fr)}.urgente .btns{grid-column:1/-1;justify-content:flex-start}.cand{grid-template-columns:auto minmax(0,1fr)}.cand .btns{grid-column:1/-1}table.datos th{width:92px}}

/* ---- aplicacion real: pagina completa, formularios y botones ---- */
body{background:var(--concreto)}
.app{border-radius:0;box-shadow:none;min-height:100vh}
.rail{position:sticky;top:0;height:100vh}
.rail a{cursor:pointer}
.rail a:hover{background:var(--suave);color:var(--tinta)}
a{color:var(--presencia)}
a.btn,button.btn{text-decoration:none;color:var(--tinta);cursor:pointer;font-family:inherit;line-height:1.3}
a.btn.pri,button.btn.pri,a.btn.ok,button.btn.ok,a.btn.mal,button.btn.mal{color:#fff}
button.btn:focus-visible,a.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--presencia);outline-offset:2px}
form.en-linea{display:inline}
label.campo{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--gris);font-weight:600}
input,select,textarea{font:inherit;font-size:.9rem;color:var(--tinta);background:#fff;border:1px solid var(--regla);border-radius:8px;padding:7px 10px;width:100%;box-sizing:border-box}
textarea{min-height:90px;resize:vertical}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}
.rejilla .ancho{grid-column:1/-1}
.aviso-ok{background:#E6F2EC;border:1px solid #9CCBB2;border-radius:10px;padding:10px 14px;margin-bottom:14px}
.aviso-mal{background:#FCEBEE;border:1px solid #E7A3AE;border-radius:10px;padding:10px 14px;margin-bottom:14px}
.vacio{color:var(--gris);padding:14px 4px}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;background:#4A5055}
.nota{background:#FFF7D1;border:1px solid #EAD27A;border-radius:10px;padding:10px 14px;font-size:.82rem}
.entrada{max-width:380px;margin:12vh auto;background:#fff;border:1px solid var(--regla);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px}
@media print{.rail,.top .btn,form{display:none!important}.app{grid-template-columns:1fr}}

img.mini{width:64px;height:48px;border-radius:6px;object-fit:cover;flex:none;display:block;background:#4A5055}
img.mini.sel{outline:3px solid var(--tinta);outline-offset:1px}
.foto img{width:100%;height:100%;object-fit:contain;display:block;background:#2B2F33}
.foto svg.grande{width:100%;height:100%;display:block}
.galeria figure img,.galeria figure svg{width:100%;aspect-ratio:4/3;border-radius:8px;display:block;object-fit:cover}
button.chip,select.chip,input.chip{font:inherit;font-size:.78rem;cursor:pointer;width:auto}
select.chip{padding:3px 8px}
input.chip{padding:3px 8px}
a.chip{text-decoration:none}
[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
select.btn{width:auto}

td.num,td.nw,.pil{white-space:nowrap}