:root{--negro:#111111;--rojo:#C84B1A;--naranja:#E05C28;--crema:#F7F2E8;--oro:#B8882A;
--bg:#F7F2E8;--sup:#FFFFFF;--tx:#111111;--tx2:#5b564c;--bd:#e2dac8;--acento:#C84B1A;--acento-tx:#FFFFFF;
--ok:#2e7d4f;--aviso:#B8882A;--peligro:#b3261e;--info:#2b5f9e;--radio:14px;--sombra:0 1px 3px rgba(17,17,17,.08)}
:root[data-tema="oscuro"]{--bg:#111111;--sup:#1b1a18;--tx:#F7F2E8;--tx2:#b3ab9b;--bd:#33302a;--acento:#E05C28;--ok:#5cc08a;--aviso:#e0b04a;--peligro:#ff8a80;--info:#7fb0ee;--sombra:none}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){--bg:#111111;--sup:#1b1a18;--tx:#F7F2E8;--tx2:#b3ab9b;--bd:#33302a;--acento:#E05C28;--ok:#5cc08a;--aviso:#e0b04a;--peligro:#ff8a80;--info:#7fb0ee;--sombra:none}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1{font-size:1.5rem;margin:.2em 0 .4em}h2{font-size:1.1rem;margin:0 0 .5em}
.centro{text-align:center;padding:3rem 1rem;color:var(--tx2)}
.oculto{display:none!important}
.nota{color:var(--tx2);font-size:.9rem}
.error{color:var(--peligro);min-height:1.2em;margin:.3em 0;font-size:.92rem}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tarjeta{background:var(--sup);border:1px solid var(--bd);border-radius:var(--radio);padding:1rem;margin:0 0 1rem;box-shadow:var(--sombra)}
.tarjeta.tenue{background:transparent;border-style:dashed}
.btn{background:var(--acento);color:var(--acento-tx);border:0;border-radius:12px;padding:.8rem 1.2rem;font:inherit;font-weight:600;cursor:pointer;min-height:46px}
.btn.grande{width:100%}.btn.sec{background:transparent;color:var(--tx);border:1px solid var(--bd)}
.btn:disabled{opacity:.55;cursor:default}
.btn:focus-visible,.nav a:focus-visible,input:focus-visible,.ojo:focus-visible,.ic:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.barra{display:flex;gap:.6rem;margin-top:.6rem}
.campo{margin:0 0 .9rem}.campo label{display:block;font-size:.85rem;font-weight:600;margin:0 0 .3rem;color:var(--tx2)}
input{width:100%;font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:.75rem .9rem;min-height:46px}
.pass{position:relative}.pass input{padding-right:3rem}
.ojo{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--tx2);width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:10px}
.badge{display:inline-block;font-size:.75rem;font-weight:700;padding:.15rem .55rem;border-radius:99px;background:var(--bd);color:var(--tx)}
.badge.superadmin{background:var(--negro);color:var(--crema)}.badge.admin{background:var(--rojo);color:#fff}
.badge.supervisor{background:var(--oro);color:#111}.badge.ok{background:var(--ok);color:#fff}.badge.off{background:var(--bd);color:var(--tx2)}
.lista{list-style:none;margin:0;padding:0}.fila{display:flex;align-items:center;gap:.6rem;padding:.7rem 0;border-bottom:1px solid var(--bd)}
.fila:last-child{border-bottom:0}.grow{flex:1;min-width:0}.t{font-weight:600}.s{color:var(--tx2);font-size:.85rem}
/* shell */
.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.top{display:flex;align-items:center;gap:.6rem;background:var(--negro);color:var(--crema);padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top))}
.top .marca{font-weight:800;font-size:1.1rem;flex:1}.top .marca em{color:var(--naranja);font-style:normal}
.ic{background:transparent;border:0;color:var(--crema);width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer}
.led{width:10px;height:10px;border-radius:50%;background:#777;display:inline-block}.led.verde{background:#3ddc84}.led.ambar{background:#ffb300}.led.rojo{background:#ff5252}
main{flex:1;padding:1rem;padding-bottom:calc(5rem + env(safe-area-inset-bottom));max-width:960px;width:100%;margin:0 auto}
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--negro);padding-bottom:env(safe-area-inset-bottom);z-index:5}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.55rem 0;color:#a9a392;text-decoration:none;font-size:.72rem}
.nav a.act{color:var(--naranja)}
.pie{text-align:center;color:var(--tx2);font-size:.78rem;padding:0 1rem 5.5rem}.by b{color:var(--acento)}
@media (min-width:860px){
 .shell{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto 1fr auto}
 .top{grid-column:1/3}
 .nav{position:static;grid-row:2/4;flex-direction:column;padding:1rem .6rem;gap:.2rem}
 .nav a{flex-direction:row;gap:.7rem;padding:.7rem .8rem;border-radius:10px;font-size:.95rem}.nav a.act{background:#222}
 main{padding-bottom:1rem}.pie{padding-bottom:1rem}
}
/* login */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--negro);color:var(--crema)}
.lg-hero{padding:2.2rem 1.4rem 1.2rem}.lg-marca{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.2rem}.lg-marca img{width:40px;height:40px}.lg-marca em{color:var(--naranja);font-style:normal}
.lg-hero h1{font-size:2.1rem;line-height:1.1;margin:1.6rem 0 .6rem}.lg-hero h1 em{color:var(--naranja);font-style:normal}.lg-hero p{color:#b8b1a0;max-width:34rem}
.lg-card{background:var(--crema);color:#111;margin:0 1rem;padding:1.4rem;border-radius:18px}
.lg-card .campo label{color:#5b564c}.lg-card input{background:#fff;color:#111;border-color:#e2dac8}.lg-card .ojo{color:#5b564c}.lg-card .error{color:#b3261e}
.lg-pie{display:flex;justify-content:space-between;padding:1.2rem 1.4rem;color:#a9a392;font-size:.8rem;margin-top:auto}.lg-pie b{color:var(--naranja)}
.login.centrado{justify-content:center;padding:1rem}.login.centrado .tarjeta{background:var(--crema);color:#111;max-width:420px;width:100%;margin:0 auto}
.login.centrado .campo label,.login.centrado .nota{color:#5b564c}.login.centrado input{background:#fff;color:#111}
@media (min-width:860px){.login{flex-direction:row;flex-wrap:wrap;align-items:center}.lg-hero{flex:1;padding:4rem}.lg-card{width:420px;margin:0 4rem 0 0}.lg-pie{width:100%}}
/* modal / toast */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.hoja{background:var(--sup);width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:1.2rem}
@media (min-width:860px){.velo{align-items:center}.hoja{border-radius:18px}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5rem + env(safe-area-inset-bottom));background:var(--negro);color:var(--crema);padding:.7rem 1.1rem;border-radius:12px;z-index:30;max-width:90vw}
.toast.mal{background:var(--peligro);color:#fff}
@media (prefers-reduced-motion:no-preference){.btn{transition:opacity .15s}}
/* tablero */
.demo-banner{background:var(--aviso);color:#111;text-align:center;font-size:.8rem;font-weight:700;padding:.35rem .8rem}
.chips{display:flex;gap:.4rem;margin:0 0 1rem;flex-wrap:wrap}
.chip{background:var(--sup);color:var(--tx);border:1px solid var(--bd);border-radius:99px;padding:.4rem .9rem;font:inherit;font-size:.85rem;cursor:pointer;min-height:38px}
.chip.act{background:var(--acento);color:var(--acento-tx);border-color:var(--acento)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:0 0 1rem}
@media (min-width:860px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--sup);border:1px solid var(--bd);border-radius:var(--radio);padding:.8rem .9rem;box-shadow:var(--sombra)}
.kpi-t{font-size:.75rem;color:var(--tx2);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi-v{font-size:1.5rem;font-weight:800;margin:.15rem 0}
.kpi-s{font-size:.8rem;color:var(--tx2)}
.kpi.mal .kpi-v{color:var(--peligro)}.kpi.ok .kpi-v{color:var(--ok)}.kpi.aviso .kpi-v{color:var(--aviso)}
.sube{color:var(--ok);font-weight:700}.baja{color:var(--peligro);font-weight:700}
.grafica{width:100%;height:auto;display:block}
.barra-g{fill:var(--oro)}.barra-g.ult{fill:var(--acento)}.barra-g.mal{fill:var(--peligro)}
.eje{fill:var(--tx2);font-size:10px;font-family:inherit}.eje.lab{fill:var(--tx);font-size:11px}.eje.val{fill:var(--tx);font-weight:700;font-size:11px}
.fila.click{cursor:pointer;text-decoration:none;color:inherit}
.fila .num{text-align:right;font-weight:700;white-space:nowrap}
.prio{display:inline-block;font-size:.7rem;font-weight:800;padding:.1rem .45rem;border-radius:6px;color:#fff;background:var(--info)}
.prio.P1{background:var(--peligro)}.prio.P2{background:var(--naranja)}.prio.P3{background:var(--aviso);color:#111}
.badge.alta{background:var(--peligro);color:#fff}.badge.media{background:var(--aviso);color:#111}.badge.baja{background:var(--bd)}
.badge.abierta{background:var(--naranja);color:#fff}.badge.atendida{background:var(--info);color:#fff}.badge.cerrada,.badge.resuelta{background:var(--ok);color:#fff}
.badge.demo{background:transparent;border:1px dashed var(--tx2);color:var(--tx2)}
.tabla{width:100%;border-collapse:collapse;font-size:.85rem}.tabla th{text-align:left;color:var(--tx2);font-weight:600;padding:.35rem .3rem;border-bottom:1px solid var(--bd)}
.tabla td{padding:.45rem .3rem;border-bottom:1px solid var(--bd)}.tabla td.r,.tabla th.r{text-align:right}
.enlace{color:var(--acento);font-weight:600;text-decoration:none}
.atras{display:inline-block;margin:0 0 .6rem;color:var(--acento);text-decoration:none;font-weight:600}