:root{--brand:#e40613;--negro:#121213;--paper:#f5f6f8;--panel:#fff;--ink:#151a23;--mute:#667085;--line:#e3e6ec;
--ok:#12805c;--warn:#a15c07;--hot:#8f1230;--tint:color-mix(in srgb,var(--brand) 8%,#fff)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Schibsted Grotesk',system-ui,sans-serif;
font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.015em;margin:0}
h1{font-size:1.65rem}h2{font-size:1.15rem}h3{font-size:1rem}
a{color:var(--brand)}
.mute{color:var(--mute)}.small{font-size:.86rem}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,#fff);outline-offset:2px}

/* Estructura */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--negro);color:#cfcfd2;padding:22px 14px;
position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px 18px}
.brand img{width:48px;height:48px;border-radius:9px;display:block;flex:none}
.brand b{display:block;color:#fff;line-height:1.15}.brand span{font-size:.78rem;opacity:.7}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{color:inherit;text-decoration:none;padding:9px 12px;border-radius:8px;display:flex;gap:11px;align-items:center}
.side nav a:hover{background:rgba(255,255,255,.07)}
.side nav a.on{background:rgba(255,255,255,.09);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
.me{margin-top:auto;padding:12px 10px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem}
.me a{color:#fff}
.main{padding:28px 34px 60px;max-width:1280px;width:100%}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.head p{margin:2px 0 0;color:var(--mute)}

/* Paneles */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
.panel+.panel,.row2+.panel,.panel+.row2{margin-top:16px}
.row2{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-top:16px}
.panel h2{margin-bottom:14px}
.strip{display:grid;grid-template-columns:repeat(6,1fr);background:var(--panel);border:1px solid var(--line);border-radius:10px}
.strip div{padding:16px 18px;border-left:1px solid var(--line)}
.strip div:first-child{border-left:0}
.strip b{display:block;font-size:1.9rem;line-height:1.1;letter-spacing:-.03em}
.strip span{font-size:.85rem;color:var(--mute)}
.strip .ok b{color:var(--ok)}.strip .warn b{color:var(--warn)}.strip .hot b{color:var(--hot)}

/* Boleta del colegio: lo primero que necesita saber un promotor */
.boleta{display:grid;grid-template-columns:1fr auto;background:var(--panel);border:1px solid var(--line);
border-radius:10px;overflow:hidden}
.boleta .datos{padding:22px 24px}
.boleta .stub{position:relative;background:var(--brand);color:#fff;padding:18px 34px;text-align:center;
display:flex;flex-direction:column;justify-content:center;min-width:170px;border-left:2px dashed rgba(255,255,255,.55)}
.boleta .stub::before,.boleta .stub::after{content:"";position:absolute;left:-11px;width:20px;height:20px;border-radius:50%;background:var(--paper)}
.boleta .stub::before{top:-10px}.boleta .stub::after{bottom:-10px}
.stub small{opacity:.85}.stub strong{font-size:3.4rem;line-height:1;letter-spacing:-.04em;font-weight:800}
.boleta h2{font-size:1.4rem;margin-bottom:2px}
.meta{display:grid;grid-template-columns:repeat(3,auto);gap:4px 28px;margin-top:14px;justify-content:start}
.meta dt{font-size:.8rem;color:var(--mute);font-weight:500}.meta dd{margin:0 0 6px;font-weight:600}

/* Formularios y botones */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c6{grid-column:span 6}
label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #cfd4de;border-radius:8px;background:#fff;
font:inherit;color:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
fieldset{border:0;padding:0;margin:0}fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea{background:#f1f2f5}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:9px 16px;border-radius:8px;
border:1px solid var(--brand);background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.1)}
.btn.sec{background:#fff;color:var(--brand)}.btn.sec:hover{background:var(--tint)}
.btn.peligro{background:#fff;color:var(--hot);border-color:#e9b4c2}
.btn.sm{padding:5px 11px;font-size:.88rem}
.busca{display:flex;gap:10px}.busca input{font-size:1.25rem;padding:13px 16px;letter-spacing:.03em}
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px}
.filtros>div{flex:1 1 150px}.filtros .q{flex:2 1 240px}

/* Tablas, etiquetas */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.84rem;font-weight:600;color:var(--mute);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid #eef0f4;vertical-align:middle}
tbody tr:hover{background:#fafbfc}tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto}
.num{text-align:right}
.tag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.8rem;font-weight:600;white-space:nowrap}
.tag.ok{background:#dcf4ea;color:var(--ok)}.tag.warn{background:#fdecc8;color:var(--warn)}
.tag.hot{background:#fde1e8;color:var(--hot)}.tag.gris{background:#e7e9ee;color:#475066}.tag.tenue{background:#f0f1f5;color:#7a8296}
.tag.brand{background:var(--tint);color:var(--brand)}
.bar{height:8px;background:#e9ecf2;border-radius:99px;overflow:hidden;min-width:90px}.bar i{display:block;height:100%;background:var(--brand)}
.pasos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pasos a{text-decoration:none;color:var(--ink);border:1px solid var(--line);background:#fff;padding:6px 13px;border-radius:99px;font-size:.88rem}
.pasos a.on{background:var(--brand);border-color:var(--brand);color:#fff}.pasos b{margin-left:4px}
.pager{display:flex;gap:6px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.pager a,.pager span{padding:5px 11px;border:1px solid var(--line);border-radius:8px;text-decoration:none;background:#fff;color:var(--ink)}
.pager .on{background:var(--brand);color:#fff;border-color:var(--brand)}
.vacio{text-align:center;color:var(--mute);padding:34px 10px}

/* Avisos */
.aviso{padding:11px 15px;border-radius:8px;margin-bottom:14px;border:1px solid;font-weight:500}
.aviso.ok{background:#e7f7ef;border-color:#b5e3cd;color:#0d5c42}.aviso.warn{background:#fff5dc;border-color:#f1d9a0;color:#7a4a06}
.aviso.danger{background:#fde8ed;border-color:#f3b6c4;color:#8c0f2c}.aviso.info{background:var(--tint);border-color:#c5d8ec}

/* Acceso */
.login{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.login .hero{background:radial-gradient(circle at 25% 15%,var(--brand) 0%,#b10410 55%,var(--negro) 135%);color:#fff;
padding:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.logo-grande{width:min(250px,62%);border-radius:18px;box-shadow:0 22px 60px rgba(0,0,0,.5);margin-bottom:34px}
.login .hero h1{font-size:2.3rem;max-width:14ch;line-height:1.08}.login .hero p{max-width:34ch;opacity:.9;margin:12px 0 0}
.login form{align-self:center;justify-self:center;width:min(380px,86%);display:grid;gap:14px}

@media(max-width:960px){
.app{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px}
.brand{padding:0}.brand span{display:none}.side nav{flex-direction:row;overflow-x:auto;order:3;width:100%}
.side nav a{padding:8px 11px;white-space:nowrap}.me{margin:0 0 0 auto;border:0;padding:0}
.main{padding:18px 14px 50px}.strip{grid-template-columns:repeat(2,1fr)}.strip div:nth-child(odd){border-left:0}
.strip div{border-top:1px solid var(--line)}.row2{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}
.c2,.c3{grid-column:span 2}.boleta{grid-template-columns:1fr}.boleta .stub{border-left:0;border-top:2px dashed rgba(255,255,255,.55);padding:14px}
.boleta .stub::before,.boleta .stub::after{display:none}.meta{grid-template-columns:1fr 1fr}
.login{grid-template-columns:1fr}.login .hero{padding:28px}.logo-grande{width:120px;margin-bottom:18px}.login .hero h1{font-size:1.6rem}.login form{padding:30px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Seguimiento de cartas */
.etapas{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.etapas div{flex:1;padding:12px 8px;text-align:center;font-size:.82rem;color:var(--mute);border-left:1px solid var(--line);position:relative}
.etapas div:first-child{border-left:0}
.etapas .hecho{background:var(--tint);color:var(--brand);font-weight:600}
.etapas .actual{background:var(--brand);color:#fff;font-weight:700}
.etapas i{display:block;font-size:1.1rem;margin-bottom:2px}
.linea{border-left:2px solid var(--line);margin-left:6px;padding-left:16px}
.linea li{list-style:none;margin-bottom:12px;position:relative}
.linea li::before{content:"";position:absolute;left:-23px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--brand)}
.linea{padding-top:2px;margin-bottom:0}.linea li:last-child{margin-bottom:0}
textarea.mono{font-family:ui-monospace,Consolas,monospace;font-size:.88rem;line-height:1.5;min-height:300px}
.acciones{display:flex;gap:8px;flex-wrap:wrap}
.chips code{background:var(--tint);color:var(--brand);padding:1px 7px;border-radius:6px;font-size:.82rem;margin:0 4px 6px 0;display:inline-block}

/* Jornada */
.fila{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);
border-radius:10px;padding:12px 16px;margin-bottom:8px}
.fila.voto{background:#eef8f3;border-color:#bfe5d2}.fila.voto .nom{text-decoration:line-through;color:var(--mute)}
.fila .nom{font-weight:700;font-size:1.05rem}
.tgls{display:flex;gap:8px;flex-wrap:wrap}
.tgl{border:1px solid #cfd4de;background:#fff;color:var(--ink);padding:11px 16px;border-radius:9px;font:inherit;font-weight:600;cursor:pointer;min-height:46px}
.tgl.on{background:var(--ok);border-color:var(--ok);color:#fff}
.tgl.sec.on{background:var(--warn);border-color:var(--warn)}
.progreso{height:14px;background:#e4e8ef;border-radius:99px;overflow:hidden}.progreso i{display:block;height:100%;background:var(--ok)}
#map{height:560px;border-radius:10px;border:1px solid var(--line)}
.leyenda span{display:inline-flex;align-items:center;gap:6px;margin-right:14px;font-size:.86rem}
.leyenda i{width:12px;height:12px;border-radius:50%;display:inline-block}
@media(max-width:960px){.etapas{flex-wrap:wrap}.etapas div{flex:1 1 33%;border-top:1px solid var(--line)}.fila{grid-template-columns:1fr}#map{height:420px}}

/* Búsqueda en vivo */
.sug tbody tr{cursor:pointer}.sug tbody tr.on{background:var(--tint)}
.sug .pref{font-weight:800;color:var(--brand)}.sug .small{padding:8px 12px}
@media(max-width:700px){.sug .hm{display:none}}

/* Reportes */
.filtros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.chips2{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.solo-print{display:none}
tfoot td{border-top:2px solid var(--line);background:#fafbfc}
@media print{
 .side,.no-print{display:none!important}.app{display:block}.main{padding:0;max-width:none}
 body{background:#fff;font-size:10.5pt}.solo-print{display:block;margin-bottom:12px}
 .panel,.strip{border:1px solid #bbb;box-shadow:none}.bar{display:none}tr{break-inside:avoid}
 a{color:inherit;text-decoration:none}.scroll{overflow:visible}
}