/* Plataforma NOM-035 SICSSOM · panel v1.7
   Marco con barra lateral, tablero, evaluación por pasos y resultados legibles.
   Se carga después de app.css y solo en el panel (body.pnl), el acceso (body.auth) y los cuestionarios (body.survey).
   La escala de riesgo (nulo → muy alto) es la misma de siempre. Sin estilos ni scripts en línea (CSP). */

body.pnl,body.auth,body.survey{
  --brand:#0d8191;--brand-d:#0b6e7c;--brand-dd:#0a4f59;--brand-900:#073c44;--brand-l:#63acb3;--brand-50:#e5f2f3;--brand-100:#cfe6e9;
  --olive:#b8be5b;--olive-d:#8f9437;--olive-50:#f3f5e4;
  --bg:#f2f6f7;--paper:#fff;--line:#e0e8ea;--line-2:#cfdbde;--ink:#1b2427;--ink-2:#46555a;--muted:#6c7b80;--wash:#f6f9f9;
  --ok:#2b7a4b;--ok-bg:#e2f1e7;--warn:#a85f12;--warn-bg:#fbefdd;--err:#b0281d;--err-bg:#fbe5e2;
  --shadow:0 1px 2px rgba(7,60,68,.06);--shadow-lg:0 1px 2px rgba(7,60,68,.05),0 10px 28px rgba(7,60,68,.08);
  --radius:14px}
body.pnl{background:var(--bg)}
.pnl h1{font-size:27px;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.pnl h2{font-size:16.5px;font-weight:700;letter-spacing:-.005em}
.pnl a{color:var(--brand-d)}
.pnl :focus-visible{outline:3px solid var(--olive);outline-offset:2px;border-radius:6px}
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}
.ic.xs{width:13px;height:13px;opacity:.6}
.num,.stat b,.kpi b,.big b{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--brand-dd);padding:8px 12px;border-radius:8px;font:700 14px var(--fh)}.skip:focus{left:8px}

/* ===== Marco: barra lateral + contenido ===== */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,var(--brand-900) 252px,transparent 252px)}
.side{position:sticky;top:0;height:100vh;color:#dcecee;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),
  linear-gradient(180deg,var(--brand-d) 0%,var(--brand-dd) 55%,var(--brand-900) 100%);z-index:40}
.side-in{height:100%;display:flex;flex-direction:column;padding:20px 14px 14px;overflow-y:auto}
.side-brand{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:2px 10px 16px}
.side-brand img{height:34px;width:auto;align-self:flex-start}
.side-brand span{font:700 10.5px var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.side-emp{margin:-6px 10px 12px;font:600 12.5px var(--fh);color:#fff;opacity:.9;line-height:1.35}
.side-h{margin:16px 10px 6px;font:700 10.5px var(--fh);letter-spacing:.14em;text-transform:uppercase;color:rgba(220,236,238,.6)}
.side-nav{flex:1}
.pnl .side-a{display:flex;align-items:center;gap:12px;padding:9px 12px;margin:2px 0;border-radius:10px;color:#e3f0f1;text-decoration:none;font:600 14px var(--fh);line-height:1.25;transition:background .15s,color .15s}
.pnl .side-a:hover{background:rgba(255,255,255,.09);color:#fff}
.pnl .side-a[aria-current]{background:#fff;color:var(--brand-dd);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.side-a[aria-current] .ic{color:var(--brand)}
.side-a span{flex:1}
.nb{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--olive);color:#2a2c0e;font:800 11px/20px var(--fh);text-align:center}
.side-me{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.14);padding:14px 4px 2px;margin-top:14px}
.side-me div{flex:1;min-width:0}.side-me b{display:block;font:700 12.5px var(--fh);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-me small{color:rgba(220,236,238,.7);font-size:12px}
.av{width:36px;height:36px;border-radius:50%;background:var(--olive);color:#2a2c0e;display:inline-flex;align-items:center;justify-content:center;font:800 13px var(--fh);flex:none}
.side-out{background:transparent;border:1px solid rgba(255,255,255,.2);color:#e3f0f1;border-radius:9px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.side-out:hover{background:rgba(255,255,255,.1);color:#fff}
.side-bg{position:fixed;inset:0;background:rgba(7,30,34,.45);z-index:35}
.mainc{min-width:0;display:flex;flex-direction:column}
.bar-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 32px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(8px)}
.bar-top .crumbs{margin:0;font:600 13px var(--fh);color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.bar-top .crumbs a{color:var(--muted);text-decoration:none}.bar-top .crumbs a:hover{color:var(--brand-d)}
.bar-top .crumbs [aria-current]{color:var(--ink);font-weight:700}
.bar-top .crumbs .sep{opacity:.45;margin:0}
.nav-btn{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;flex:none}
.content{flex:1;width:100%;max-width:1320px;padding:28px 32px 56px}
.content:focus{outline:none}
.pfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding:16px 32px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;background:#fff}
.pfoot a{color:var(--muted)}
.bnav{display:none}
@media (max-width:1020px){
  .shell{grid-template-columns:1fr;background:none}
  .side{position:fixed;left:0;top:0;bottom:0;height:auto;width:280px;max-width:86vw;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
  body.nav-open .side{transform:none}
  body.nav-open{overflow:hidden}
  .nav-btn{display:inline-flex}
  .bar-top{padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
  .content{padding:20px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
  .pfoot{padding:14px 16px}
}
@media (max-width:760px){
  .bnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));box-shadow:0 -6px 20px rgba(7,60,68,.06)}
  .bnav a,.bnav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border:0;background:none;color:var(--muted);text-decoration:none;font:700 10.5px var(--fh);cursor:pointer;border-radius:10px}
  .bnav a[aria-current]{color:var(--brand)}
  .bnav .ic{width:21px;height:21px}
  .bnav .nb{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;font-size:10px;line-height:17px;padding:0 4px}
  .pnl .content{padding-bottom:96px}
  .pfoot{padding-bottom:90px}
  .pnl h1{font-size:23px}
}

/* ===== Componentes base ===== */
.pnl .card{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow);padding:20px 22px}
.pnl .card>h2:first-child,.pnl .card>.sec-h:first-child h2{margin-bottom:12px}
.pnl .btn{border-radius:10px;font-weight:700;font-size:13.5px;gap:7px;border-color:var(--line-2);color:var(--brand-dd)}
.pnl .btn:hover{background:var(--brand-50);border-color:var(--brand-l)}
.pnl .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(7,60,68,.2)}.pnl .btn.primary:hover{background:var(--brand-d);border-color:var(--brand-d)}
.pnl .btn.accent{background:var(--olive);border-color:var(--olive);color:#2a2c0e}
.pnl .btn.danger{color:var(--err)}
.pnl .btn.ghost{border-color:transparent;background:transparent}
.pnl .btn .ic{width:16px;height:16px}
.pnl label{font-size:12.5px;color:var(--ink-2)}
.pnl input:not([type=checkbox]):not([type=radio]),.pnl select,.pnl textarea{border-radius:10px;border-color:var(--line-2)}
.pnl input:not([type=checkbox]):not([type=radio]):focus,.pnl select:focus,.pnl textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(13,129,145,.16)}
.pnl .note{border-radius:10px;border-left-width:3px;font-size:14px}
.pnl .empty{border-radius:var(--radius);padding:30px;background:var(--paper)}
.pnl .badge{background:var(--brand-50);color:var(--brand-dd)}
.pnl .lv{border-radius:999px;font-weight:700;font-size:11.5px;padding:2px 9px}
.pnl .st{border-radius:999px;font-weight:700;font-size:11.5px;padding:2px 10px}
.pnl .st-abierta{background:var(--ok-bg);color:var(--ok);border-color:#c8e3d1}
.pnl .st-preparacion{background:var(--warn-bg);color:var(--warn);border-color:#f0d9b5}
.pnl .st-cerrada{background:#eef2f3;color:#4f5a5f;border-color:var(--line)}
.pnl .eyebrow{font-size:11.5px;letter-spacing:.14em;color:var(--brand)}
.pnl .lead{font-size:15px}
.pnl .two{gap:20px}
.pnl .tbl{font-size:14px}
.pnl .tbl th{background:transparent;font-size:11px;letter-spacing:.1em;border-bottom:1px solid var(--line-2);color:var(--muted)}
.pnl .tbl td{border-bottom-color:var(--line);vertical-align:middle}
.pnl .tbl tbody tr:hover td{background:var(--wash)}
.pnl .tbl tr.cat td{background:var(--wash)}
.pnl .tabs{border-bottom:1px solid var(--line-2);margin:0 0 20px;gap:4px;scrollbar-width:none}
.pnl .tabs a{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;color:var(--muted);border-bottom-width:2.5px}
.pnl .tabs a[aria-current]{color:var(--brand-dd);border-color:var(--brand)}
.pnl .tabs .cnt{display:inline-block;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--line);color:var(--ink-2);font:700 11px var(--fh)}
.pnl .tabs .cnt.warn{background:var(--warn-bg);color:var(--warn)}.pnl .tabs .cnt.bad{background:var(--err-bg);color:var(--err)}
.pnl .chip{border-radius:999px;font-weight:600;font-size:13px;padding:6px 13px}
.pnl .chip[aria-current]{background:var(--brand);border-color:var(--brand)}
.pnl .progress{height:9px;background:var(--line);border-radius:6px}.pnl .progress i{background:linear-gradient(90deg,var(--brand),var(--brand-l))}
.pnl .mini{height:7px;background:var(--line);width:120px}.pnl .mini i{background:var(--brand)}.pnl .mini i.low{background:var(--r4)}
.pnl .linkbox input{border-radius:10px}
.pnl #qr{border-radius:12px;border-color:var(--line)}
.pnl .docs{gap:10px}
.pnl .doc{border-radius:12px;background:#fff}
.pnl .box{background:var(--brand-50);border-color:#cfe4e7;border-left-color:var(--brand);border-radius:10px;font-size:14px;color:var(--ink-2)}
.pnl .kpis{gap:14px}
.pnl .kpi{border-top:0;border-radius:var(--radius);padding:16px 18px;position:relative}
.pnl .kpi b{font-size:26px}
.pnl .kpi.alert b{color:var(--err)}
.pnl .kpi.olive::after,.pnl .kpi.alert::after{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--olive)}
.pnl .kpi.alert::after{background:var(--r4)}
.mt0{margin-top:0}.mb0{margin-bottom:0}.gap{gap:12px}
.sp{flex:1}

/* Encabezado de página */
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:22px}
.phead-t{min-width:0;flex:1 1 420px}
.phead h1{margin:2px 0 4px}
.phead .sub{color:var(--muted);font-size:14.5px;margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.phead .lead{margin:6px 0 0}
.phead-a{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.idmark{display:flex;gap:16px;align-items:center}
.idlogo{width:60px;height:60px;border-radius:16px;background:var(--brand-50);color:var(--brand-dd);display:inline-flex;align-items:center;justify-content:center;font:800 18px var(--fh);flex:none;overflow:hidden;border:1px solid var(--line)}
.idlogo.sm{width:38px;height:38px;border-radius:11px;font-size:12.5px}
.idlogo img{max-width:86%;max-height:86%;object-fit:contain}
.tag-demo{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font:800 10px var(--fh);letter-spacing:.1em;text-transform:uppercase}

/* Indicadores */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);min-width:0}
a.stat:hover{border-color:var(--brand-l)}
.stat-i{width:44px;height:44px;border-radius:12px;background:var(--brand-50);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;flex:none}
.stat-i .ic{width:20px;height:20px}
.stat-t{min-width:0}
.stat b{display:block;font:800 25px/1.1 var(--fh);color:var(--ink)}
.stat b small{font-size:14px;color:var(--muted);font-weight:700}
.stat-t>span{display:block;font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}
.stat.warn .stat-i{background:var(--warn-bg);color:var(--warn)}.stat.bad .stat-i{background:var(--err-bg);color:var(--err)}.stat.ok .stat-i{background:var(--ok-bg);color:var(--ok)}.stat.olive .stat-i{background:var(--olive-50);color:var(--olive-d)}
.stat.bad b{color:var(--err)}
@media (max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stats,.stats.three{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:12px;gap:10px;flex-direction:column;align-items:flex-start}.stat b{font-size:21px}}

/* Bloque destacado */
.hero{position:relative;overflow:hidden;border-radius:18px;padding:24px 26px;color:#fff;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px),
  radial-gradient(120% 140% at 85% 110%,rgba(184,190,91,.35),transparent 55%),
  linear-gradient(135deg,var(--brand) 0%,var(--brand-dd) 70%,var(--brand-900) 100%);box-shadow:var(--shadow-lg)}
.hero .eyebrow{color:var(--olive)}
.hero h2{color:#fff;font-size:22px;font-weight:800;margin:4px 0 16px;text-wrap:balance}
.hero p{color:rgba(255,255,255,.88)}
.hero-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hero-tiles>div{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px}
.hero-tiles b{display:block;font:800 26px/1.1 var(--fh)}
.hero-tiles span{font-size:12.5px;color:rgba(255,255,255,.85)}
.hero .btn.accent{border-color:var(--olive)}
.hero-row{display:flex;gap:22px;align-items:center}
@media (max-width:640px){.hero{padding:20px}.hero-tiles{grid-template-columns:1fr 1fr}.hero-tiles>div:last-child{grid-column:1/-1}.hero-row{flex-direction:column;align-items:flex-start}}

/* Rejillas */
.g-2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start;margin-bottom:20px}
.g-2e{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;margin-bottom:20px}
.g-2r{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-bottom:20px}
.g-2>*,.g-2e>*,.g-2r>*{min-width:0}
.g-2 .card,.g-2e .card,.g-2r .card{margin-bottom:0}
.stack-col{display:grid;gap:20px}
.stack-col>.card{margin-bottom:0}
@media (max-width:1100px){.g-2,.g-2r{grid-template-columns:1fr}}
@media (max-width:820px){.g-2e{grid-template-columns:1fr}}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.card-h h2{margin:0}
.card-h small,.card-h .muted{font-size:12.5px;color:var(--muted)}

/* Gráfica semanal */
.spark{width:100%;height:150px;display:block}
.spark .ln{stroke:var(--brand);stroke-width:2.4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.spark .ar{fill:var(--brand);opacity:.10}
.spark .gd{stroke:var(--line);stroke-width:1}
.spark text{font:600 10.5px var(--fb);fill:var(--muted)}
.spark .pt{fill:var(--olive);stroke:var(--brand);stroke-width:2}
.spark .lb{font:800 12px var(--fh);fill:var(--ink)}

/* Lista de pendientes */
.todo{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.todo li{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--wash)}
.todo .ti{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand);flex:none}
.todo .ti.warn{background:var(--warn-bg);color:var(--warn)}.todo .ti.bad{background:var(--err-bg);color:var(--err)}
.todo div{flex:1;min-width:0}.todo b{display:block;font:700 14px var(--fh);color:var(--ink)}.todo span{display:block;font-size:13px;color:var(--muted)}
.todo .btn{flex:none}
.todo .ok-all{justify-content:center;color:var(--muted);background:#fff}

/* Tabla de evaluaciones */
.evt td:first-child a{font-weight:700;text-decoration:none;color:var(--ink)}
.evt td:first-child a:hover{color:var(--brand-d)}
.part{display:flex;align-items:center;gap:10px;white-space:nowrap}
.part .mini{margin:0}
.dchip{display:inline-block;padding:2px 9px;border-radius:999px;font:700 11.5px var(--fh);background:var(--brand-50);color:var(--brand-dd);white-space:nowrap}
.dchip.bad{background:var(--err-bg);color:var(--err)}.dchip.warn{background:var(--warn-bg);color:var(--warn)}.dchip.mute{background:#eef2f3;color:#4f5a5f}

/* Tablas que se vuelven tarjetas en el celular */
@media (max-width:700px){
  .pnl .tbl.rsp thead{display:none}
  .pnl .tbl.rsp,.pnl .tbl.rsp tbody,.pnl .tbl.rsp tr,.pnl .tbl.rsp td{display:block;width:100%}
  .pnl .tbl.rsp tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .pnl .tbl.rsp td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:right}
  .pnl .tbl.rsp td::before{content:attr(data-label);font:700 11px var(--fh);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left}
  .pnl .tbl.rsp td:first-child{display:block;text-align:left;padding-bottom:6px}
  .pnl .tbl.rsp td:first-child::before{content:none}
  .pnl .tbl.rsp td:empty{display:none}
  .pnl .tbl.rsp tbody tr:hover td{background:none}
}

/* ===== Evaluación: pasos ===== */
.stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.stepper a{display:flex;align-items:center;gap:10px;padding:13px 14px;text-decoration:none;color:var(--ink);border-left:1px solid var(--line);min-width:0}
.stepper a:first-child{border-left:0}
.stepper a:hover{background:var(--wash)}
.stepper .sn{width:28px;height:28px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font:800 12.5px var(--fh);border:2px solid var(--line-2);color:var(--muted);background:#fff}
.stepper .done .sn{background:var(--ok);border-color:var(--ok);color:#fff}
.stepper .cur{background:var(--brand-50)}
.stepper .cur .sn{background:var(--brand);border-color:var(--brand);color:#fff}
.stepper .warn .sn{background:var(--warn-bg);border-color:#e9b46a;color:var(--warn)}
.stepper b{display:block;font:700 13.5px var(--fh)}
.stepper small{display:block;font-size:12px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper span.st-t{min-width:0}
.stepper .sn .ic{width:15px;height:15px}
@media (max-width:900px){.stepper{grid-template-columns:repeat(5,minmax(132px,1fr));overflow-x:auto}}
@media (max-width:600px){.stepper{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.stepper a{flex:0 0 46%;scroll-snap-align:start}}

/* Resultados */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rank li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 52px;gap:12px;align-items:center;font-size:13.5px}
.rk-n{line-height:1.3}
.rk-bar{display:flex;height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.rk-bar i{display:block;height:100%;width:0}
.rk-p{text-align:right;font:800 13.5px var(--fh);color:var(--ink)}
.rk-p.zero{color:var(--muted);font-weight:600}
.legend.sm{font-size:12px;color:var(--muted);margin-top:12px}
.pnl .legend{gap:6px 14px;font-size:12.5px;color:var(--muted)}.pnl .legend b{color:var(--ink)}
.pnl .stack{height:30px;border-radius:999px;gap:2px;background:var(--line)}
.pnl .stack span{border-radius:999px}
.help{display:flex;gap:10px;align-items:flex-start;background:var(--brand-50);border:1px solid #cfe4e7;border-radius:12px;padding:12px 14px;margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.help .ic{color:var(--brand);margin-top:2px}
.help p{margin:0}
.pnl .heat{border-spacing:4px;font-size:13.5px}
.pnl .heat th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pnl .heat th.lh{border-bottom-width:3px;padding-bottom:6px}
.pnl .heat td.name{padding:6px 8px}
.pnl .heat tr.cat td.name{color:var(--ink)}
.pnl .heat td.c{border-radius:8px;min-width:58px;font-size:14px;color:var(--ink)}
.pnl .heat td.c small{font-size:10.5px;opacity:.85}
.pnl .heat td.c.dk{color:#fff}
.pnl .heat td.z{background:var(--wash);color:#9aa5a8;font-weight:600;font-family:var(--fh)}
.pnl .heat td.z small{display:block;font:400 10.5px var(--fb)}
.pnl .heat td.sum{color:var(--muted)}.pnl .heat td.sum.on{color:var(--err)}
@media (max-width:700px){
  .pnl .heat-wrap{overflow:visible}
  .pnl .heat,.pnl .heat tbody{display:block}
  .pnl .heat thead{display:none}
  .pnl .heat tr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 54px;gap:4px;margin-bottom:10px}
  .pnl .heat td.name{grid-column:1/-1;padding:4px 2px 0}
  .pnl .heat tr.dom td.name{padding-left:2px}
  .pnl .heat td.c{min-width:0;padding:5px 2px;font-size:13px}
  .pnl .heat td.c::before,.pnl .heat td.sum::before{content:attr(data-label);display:block;font:700 8.5px var(--fh);letter-spacing:.04em;text-transform:uppercase;opacity:.75}
  .pnl .heat td.sum{text-align:center;font-size:13px;display:flex;flex-direction:column;justify-content:center}
}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.filters .chips{margin:0}
.filters .filterbar{margin:0;min-width:240px}
.filters .filterbar label{margin:0}

/* Obligaciones y documentos */
.obl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.obl li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--wash);border:1px solid transparent}
.obl .oi{width:26px;height:26px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--line-2);background:#fff;color:#fff}
.obl .oi .ic{width:14px;height:14px}
.obl .ok .oi{background:var(--ok);border-color:var(--ok)}
.obl .warn .oi{background:var(--r3);border-color:var(--r3);font:800 13px var(--fh)}
.obl div{flex:1;min-width:0}
.obl b{display:block;font:600 14px var(--fh);color:var(--ink);line-height:1.3}
.obl small{font-size:12px;color:var(--muted)}
.obl a.oa{text-decoration:none;color:inherit}
.obl .ochip{flex:none;padding:2px 9px;border-radius:999px;font:700 11.5px var(--fh);background:#fff;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.obl .ok .ochip{background:var(--ok-bg);border-color:#c8e3d1;color:var(--ok)}
.obl .warn .ochip{background:var(--warn-bg);border-color:#f0d9b5;color:var(--warn)}
.dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.dl a,.dl .dl-i{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;color:var(--ink);min-width:0;transition:border-color .15s,box-shadow .15s}
.dl a:hover{border-color:var(--brand-l);box-shadow:var(--shadow-lg)}
.dl .fi{width:36px;height:44px;border-radius:6px;border:1px solid var(--line-2);background:linear-gradient(180deg,#fff 0 60%,var(--wash) 60%);position:relative;flex:none}
.dl .fi::after{content:"PDF";position:absolute;left:-4px;bottom:5px;background:var(--err);color:#fff;font:800 8px/1 var(--fh);padding:2px 4px;border-radius:3px}
.dl .fi.csv::after{content:"CSV";background:var(--ok)}.dl .fi.zip::after{content:"ZIP";background:var(--brand-dd)}.dl .fi.qr::after{content:"QR";background:var(--brand)}
.dl div{flex:1;min-width:0}.dl b{display:block;font:700 13.5px var(--fh);line-height:1.3}.dl small{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.dl .go{color:var(--muted)}
.dl .off{opacity:.55}

/* Programa: tarjetas de acción */
.acts{display:grid;gap:10px}
.pnl .card.act{border-left:4px solid var(--brand-l);padding:16px 18px}
.pnl .card.act.ats{border-left-color:var(--r4)}
.pnl .card.act.p2{border-left-color:var(--r2)}.pnl .card.act.p3{border-left-color:var(--r3)}.pnl .card.act.p4{border-left-color:var(--r4)}.pnl .card.act.p0{border-left-color:var(--r1)}
.act-h{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.act-h h3{margin:0;font-size:15px}
.act-h .row{gap:6px}
.pnl details.act-more>summary{cursor:pointer;color:var(--brand-d);font:700 13px var(--fh);padding:4px 0}
.progline{display:flex;align-items:center;gap:12px;margin:-4px 0 16px}
.progline .progress{flex:1;max-width:360px}

/* Enlace y avance */
.share{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}
.share #qr{width:150px;height:150px}
@media (max-width:520px){.share{grid-template-columns:1fr}}
.ring{position:relative;display:inline-grid;place-items:center;width:132px;height:132px;flex:none}
.ring svg{width:100%;height:100%}
.ring .ring-bg{stroke:var(--line)}
.ring .ring-fg{stroke:var(--brand)}
.ring-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring-t b{font:800 24px/1 var(--fh);color:var(--ink)}
.ring-t small{font-size:11px;color:var(--muted);margin-top:3px;max-width:80px;line-height:1.2}
.hero .ring .ring-bg{stroke:rgba(255,255,255,.2)}.hero .ring .ring-fg{stroke:var(--olive)}.hero .ring-t b{color:#fff}.hero .ring-t small{color:rgba(255,255,255,.8)}
.ring.sm{width:96px;height:96px}.ring.sm .ring-t b{font-size:19px}
.arealist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.arealist li{display:grid;grid-template-columns:minmax(0,1fr) 100px 30px;gap:10px;align-items:center;font-size:13.5px}
.arealist .mini{width:100%;margin:0}
.arealist b{text-align:right;font-family:var(--fh)}

/* Siguiente paso */
.next{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);padding:22px}
.next .eyebrow{display:block;margin-bottom:6px}
.next h2{font-size:19px;margin-bottom:8px}
.next p{color:var(--ink-2)}

/* Ficha: logotipo */
.logo-drop{border:1.5px dashed var(--line-2);border-radius:14px;padding:18px;background:var(--wash);display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.logo-prev{width:120px;height:90px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-prev img{max-width:92%;max-height:86%;object-fit:contain}
.logo-prev .ph{color:var(--muted);text-align:center;font-size:12px;padding:6px}
.logo-drop b{display:block;font:700 14px var(--fh)}
.logo-drop p{font-size:13px;color:var(--muted);margin:2px 0 10px}
.logo-drop input[type=file]{margin:0 0 10px!important;font-size:13px}
@media (max-width:520px){.logo-drop{grid-template-columns:1fr}}
.kvl{display:grid;gap:8px;margin:0}
.kvl div{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.kvl div:last-child{border-bottom:0}
.kvl dt{color:var(--muted)}.kvl dd{margin:0;font-weight:700;font-family:var(--fh);text-align:right}

/* Buzón: bandeja de dos paneles */
.ibx{display:grid;grid-template-columns:340px minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px;min-height:380px}
.ibx-l{border-right:1px solid var(--line);max-height:640px;overflow-y:auto}
.ibx-l a{display:block;padding:13px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.ibx-l a:hover{background:var(--wash)}
.ibx-l a[aria-current]{background:var(--brand-50);border-left-color:var(--brand)}
.ibx-l .ib-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ibx-l b{font:700 13.5px var(--fh)}
.ibx-l small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.ibx-r{padding:20px 22px;min-width:0}
.ibx-r .msg{background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:12px 14px;white-space:normal;margin:12px 0 16px}
.ibx-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);height:100%;text-align:center;padding:30px}
.ibx-empty .ic{width:34px;height:34px;opacity:.5}
.qst{display:inline-block;padding:2px 9px;border-radius:999px;font:700 11.5px var(--fh);white-space:nowrap}
.qst.rec{background:var(--err-bg);color:var(--err)}.qst.ate{background:var(--warn-bg);color:var(--warn)}.qst.cer{background:var(--ok-bg);color:var(--ok)}
@media (max-width:860px){.ibx{grid-template-columns:1fr}.ibx-l{border-right:0;max-height:none}.ibx.has-q .ibx-l{display:none}.ibx:not(.has-q) .ibx-r{display:none}}

/* ===== Acceso ===== */
body.auth{background:#fff}
body.auth .auth-brand{background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px),
  radial-gradient(120% 120% at 90% 110%,rgba(184,190,91,.35),transparent 55%),
  linear-gradient(150deg,var(--brand) 0%,var(--brand-dd) 65%,var(--brand-900) 100%)}
body.auth .auth-brand::after{border-color:rgba(184,190,91,.28)}
body.auth .btn.primary{background:var(--brand);border-color:var(--brand);border-radius:10px}
body.auth .btn.primary:hover{background:var(--brand-d)}
body.auth input:not([type=checkbox]){border-radius:10px}

/* ===== Cuestionario del trabajador (una pregunta por pantalla) ===== */
body.survey{background:var(--bg)}
.survey .k-top{gap:14px;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));border-bottom:0;box-shadow:0 1px 0 var(--line)}
.survey .k-brand img{height:28px}
.survey .k-top .bar{height:6px;background:var(--line)}
.survey .k-top .bar i{background:linear-gradient(90deg,var(--brand),var(--olive))}
.survey .k-cnt{font:700 12.5px var(--fh);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.survey .k-body{padding:22px max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px))}
.survey .k-inner{border-radius:20px;border-color:var(--line);box-shadow:var(--shadow-lg);padding:26px 24px}
.survey .k-hero{margin:-26px -24px 20px;padding:24px 24px 22px;border-radius:20px 20px 0 0;color:#fff;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 22px),linear-gradient(135deg,var(--brand),var(--brand-dd))}
.survey .k-hero .k-num{color:var(--olive);margin-bottom:6px}
.survey .k-hero h1{color:#fff;margin:0;font-size:24px;line-height:1.2}
.survey .k-promise{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.survey .k-promise li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-2)}
.survey .k-promise .ic{color:var(--brand);margin-top:2px;width:20px;height:20px}
.survey .k-num{color:var(--brand);letter-spacing:.12em}
.survey .k-q{font-size:22px;line-height:1.3;letter-spacing:-.01em}
.survey .k-sec{border-left-color:var(--olive);font-size:14px}
.survey .k-opt{border-radius:14px;padding:16px 18px;font-size:16.5px;min-height:56px}
.survey .k-opt[aria-pressed=true]{border-color:var(--brand);background:var(--brand-50);color:var(--brand-dd)}
.survey .k-opt .dot{order:2;margin-left:auto}
.survey .k-opt[aria-pressed=true] .dot{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 45%,transparent 50%)}
.survey .k-yn{gap:14px}
.survey .seg{border-radius:12px}
.survey .seg button{padding:11px 18px}
.survey .seg button[aria-pressed=true],.survey .chip[aria-pressed=true],.survey .lik button[aria-pressed=true],.survey .nps button[aria-pressed=true]{background:var(--brand);border-color:var(--brand)}
.survey .chip{border-radius:999px;font-weight:600}
.survey .k-nav{padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));align-items:center}
.survey .k-nav .btn{border-radius:14px}
.survey .k-nav .btn.primary{background:var(--brand);border-color:var(--brand)}
.survey .k-nav .btn.primary:hover{background:var(--brand-d)}
.survey .k-nav .btn.back{min-width:0;border:0;background:none;color:var(--muted);font-size:15px;gap:6px;padding-left:4px}
.survey .k-lock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.survey .k-lock .ic{width:15px;height:15px}
.survey .k-done .okmark{width:96px;height:96px;border-radius:50%;margin:6px auto 18px;display:flex;align-items:center;justify-content:center;background:var(--ok);color:#fff;box-shadow:0 0 0 12px var(--ok-bg)}
.survey .k-done .okmark .ic{width:44px;height:44px;stroke-width:2.6}
.survey .folio{color:var(--brand-dd)}
.survey .k-buzon{display:flex;gap:12px;align-items:center;text-align:left;border:1.5px dashed var(--line-2);border-radius:14px;padding:12px 14px;margin:22px 0 4px;text-decoration:none;color:var(--ink)}
.survey .k-buzon .ic{width:28px;height:28px;color:var(--brand);flex:none}
.survey .k-buzon b{display:block;font:700 14px var(--fh)}.survey .k-buzon span{font-size:13px;color:var(--muted)}
.survey label.check.big{border-radius:14px}
.survey .narrow{border-radius:20px}
@media (max-width:520px){.survey .k-inner{padding:20px 16px;border-radius:16px}.survey .k-hero{margin:-20px -16px 18px;padding:20px 16px;border-radius:16px 16px 0 0}.survey .k-q{font-size:20px}}

@media print{.side,.bar-top,.bnav,.pfoot,.nav-btn{display:none!important}.shell{display:block}.content{padding:0}}
@media (prefers-reduced-motion:reduce){.side{transition:none}}
.ibx-back{display:none;margin:0 0 10px;font-size:13px}
@media (max-width:860px){.ibx.has-q .ibx-back{display:block}}

/* v10 · acceso de grupo */
.side-emp a{color:#fff;opacity:.9;text-decoration:underline;font-weight:600}
.side-emp a:hover{opacity:1}