/* ══════════════════════════════════════════════
   DESIGN TOKENS — Estil Guru light theme
══════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --font:-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:'SF Mono','Cascadia Code',monospace;

  /* Estil Guru brand */
  --teal:#0ea5a0;
  --teal-d:#0a7a76;
  --teal-l:#e6f7f7;
  --navy:#0a1628;
  --navy2:#1a2e4a;
  --gold:#c8a84b;

  /* Role accents */
  --w:#1d6fa4;--w-bg:#e8f4fb;--w-gl:rgba(29,111,164,.2);
  --o:#0ea5a0;--o-bg:#e6f7f7;--o-gl:rgba(14,165,160,.2);
  --e:#5b3fa8;--e-bg:#f0ecfb;--e-gl:rgba(91,63,168,.2);

  /* Status */
  --ok:#059669;--ok-bg:#ecfdf5;--ok-bd:#6ee7b7;
  --nok:#dc2626;--nok-bg:#fef2f2;--nok-bd:#fca5a5;
  --warn:#d97706;--warn-bg:#fffbeb;--warn-bd:#fcd34d;
  --info:#0369a1;--info-bg:#eff6ff;--info-bd:#93c5fd;

  /* Light surfaces */
  --bg:#f4f6f8;
  --bg2:#ffffff;
  --sur:#ffffff;
  --sur2:#f8fafc;
  --brd:#e2e8f0;
  --brd2:#cbd5e1;
  --txt:#0f172a;
  --txt2:#475569;
  --txt3:#94a3b8;

  /* Active brand (changes per role) */
  --brand:var(--teal);
  --brand-bg:var(--teal-l);
  --brand-gl:var(--o-gl);
  --brand-d:var(--teal-d);

  --sb:264px;--hh:58px;
  --r:8px;--r2:14px;--r3:20px;
  --sh:0 1px 6px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --sh2:0 4px 20px rgba(0,0,0,.12);
}

html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--font);-webkit-font-smoothing:antialiased}
#root{display:flex;height:100vh;overflow:hidden}

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
#sidebar{width:var(--sb);background:var(--sur);border-right:1px solid var(--brd);display:flex;flex-direction:column;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:50}
.sb-logo{padding:18px 18px 14px;border-bottom:1px solid var(--brd);flex-shrink:0;display:flex;align-items:center;gap:11px}
.sb-logo img{width:34px;height:34px;object-fit:contain;border-radius:7px;flex-shrink:0}
.sb-logo-fb{width:34px;height:34px;background:var(--teal);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;flex-shrink:0;display:none}
.sb-logo-txt .ln{font-size:13px;font-weight:800;color:var(--navy);letter-spacing:-.2px}
.sb-logo-txt .ls{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.4px}
.sb-user{padding:10px 14px;border-bottom:1px solid var(--brd);flex-shrink:0}
.user-chip{display:flex;align-items:center;gap:9px;background:var(--sur2);border:1px solid var(--brd);border-radius:var(--r);padding:8px 10px;cursor:pointer;transition:border-color .15s}
.user-chip:hover{border-color:var(--teal)}
.u-av{width:30px;height:30px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.u-name{font-size:12px;font-weight:600;color:var(--txt)}
.u-role{font-size:10px;color:var(--txt3)}
.sb-nav{flex:1;overflow-y:auto;padding:8px 10px;scrollbar-width:none}
.sb-nav::-webkit-scrollbar{display:none}
.nav-sec{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--txt3);padding:12px 6px 4px}
.nl{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r);cursor:pointer;transition:background .12s,color .12s;margin-bottom:1px;color:var(--txt2);font-size:13px;font-weight:500}
.nl:hover{background:var(--sur2);color:var(--txt)}
.nl.active{background:var(--brand-bg);color:var(--brand);font-weight:700}
.nl .ni{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.nl .nb{margin-left:auto;background:var(--nok);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center}
.sb-foot{padding:10px 14px;border-top:1px solid var(--brd);flex-shrink:0}
.prof-sw{display:flex;gap:4px}
.pch{flex:1;padding:6px 4px;border-radius:var(--r);text-align:center;cursor:pointer;border:1px solid var(--brd);font-size:9px;font-weight:700;color:var(--txt3);text-transform:uppercase;transition:all .12s}
.pch:hover{background:var(--sur2);color:var(--txt)}
.pch.active{border-color:var(--brand);background:var(--brand-bg);color:var(--brand)}

/* ══════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════ */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#topbar{height:var(--hh);background:var(--sur);border-bottom:1px solid var(--brd);display:flex;align-items:center;padding:0 18px;gap:10px;flex-shrink:0;z-index:10;box-shadow:0 1px 0 var(--brd)}
.tb-title{font-size:15px;font-weight:700;color:var(--txt);flex:1}
.tb-acts{display:flex;gap:7px;align-items:center}
.ico-btn{width:34px;height:34px;background:var(--sur2);border:1px solid var(--brd);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .12s;color:var(--txt2);position:relative}
.ico-btn:hover{background:var(--bg);border-color:var(--teal);color:var(--teal)}
.ico-btn .bdg{position:absolute;top:-4px;right:-4px;width:15px;height:15px;background:var(--nok);color:#fff;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--sur)}
.back-lnk{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--txt2);cursor:pointer;padding:5px 8px;border-radius:var(--r);transition:all .12s}
.back-lnk:hover{background:var(--sur2);color:var(--teal)}
.off-pill{display:none;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd);font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;align-items:center;gap:4px}
.off-pill.on{display:flex}

/* ══════════════════════════════════════════════
   SCREENS
══════════════════════════════════════════════ */
#sa{flex:1;overflow:hidden;position:relative}
.screen{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .18s,transform .18s;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--brd) transparent}
.screen::-webkit-scrollbar{width:4px}
.screen::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:4px}
.screen.active{opacity:1;pointer-events:all;transform:none}
.sp{padding:24px;max-width:1020px;margin:0 auto}

/* MOBILE NAV */
#mob-nav{display:none;background:var(--sur);border-top:1px solid var(--brd);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0)}
.mn-inner{display:flex}
.mn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 7px;cursor:pointer;color:var(--txt3);font-size:10px;font-weight:600;transition:color .12s}
.mn-item .mi{font-size:19px}
.mn-item.active{color:var(--brand)}
#hamburger{display:none;width:32px;height:32px;align-items:center;justify-content:center;background:var(--sur2);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;font-size:16px;color:var(--txt2);flex-shrink:0}
#sb-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}

/* ══════════════════════════════════════════════
   TYPE
══════════════════════════════════════════════ */
.pg-title{font-size:22px;font-weight:800;color:var(--txt);margin-bottom:3px;letter-spacing:-.3px}
.pg-sub{font-size:13px;color:var(--txt2);margin-bottom:20px}
.sec-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--txt3);margin:20px 0 8px}
.f-lbl{font-size:11px;font-weight:600;color:var(--txt2);margin-bottom:5px;display:block}

/* ══════════════════════════════════════════════
   GRID
══════════════════════════════════════════════ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:900px){.g5{grid-template-columns:repeat(2,1fr)}}
.ga{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}

/* ══════════════════════════════════════════════
   CARD
══════════════════════════════════════════════ */
.card{background:var(--sur);border:1px solid var(--brd);border-radius:var(--r2);padding:16px;transition:border-color .15s,box-shadow .15s}
.card.ck{cursor:pointer}
.card.ck:hover{border-color:var(--teal);box-shadow:var(--sh)}
.card.sel{border-color:var(--brand);background:var(--brand-bg);box-shadow:0 0 0 2px var(--brand-bg)}
.card.cdng{border-color:var(--nok-bd);background:var(--nok-bg)}
.card.cok{border-color:var(--ok-bd);background:var(--ok-bg)}
.card.cwrn{border-color:var(--warn-bd);background:var(--warn-bg)}
.cr{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ct{font-size:14px;font-weight:600;color:var(--txt)}
.cm{font-size:12px;color:var(--txt2);margin-top:4px;line-height:1.5}
.cc{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--teal)}

/* KPI */
.kpi{background:var(--sur);border:1px solid var(--brd);border-radius:var(--r2);padding:16px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--kc,var(--teal))}
.kn{font-size:28px;font-weight:800;font-family:var(--mono);color:var(--kc,var(--txt));line-height:1;margin-bottom:4px;letter-spacing:-1px}
.kl{font-size:10px;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px}
.kt{font-size:11px;margin-top:5px;font-weight:500}
.kt.up{color:var(--ok)}.kt.dn{color:var(--nok)}.kt.neu{color:var(--txt3)}

/* ACTION TILE */
.atile{border-radius:var(--r2);padding:20px 18px;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s;box-shadow:var(--sh)}
.atile:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.atile:active{transform:scale(.98)}
.atile::after{content:'';position:absolute;top:-40px;right:-40px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.1)}
.atile .ai{font-size:28px;display:block;margin-bottom:9px}
.atile .at{font-size:15px;font-weight:700;color:#fff;margin-bottom:3px}
.atile .as{font-size:11px;color:rgba(255,255,255,.7)}
.tp{background:linear-gradient(135deg,var(--teal-d),var(--teal))}
.td{background:linear-gradient(135deg,#1d5a8a,var(--w))}
.te{background:linear-gradient(135deg,#3d2882,var(--e))}
.tg{background:linear-gradient(135deg,#047857,var(--ok))}

/* ══════════════════════════════════════════════
   INPUTS
══════════════════════════════════════════════ */
.inp{width:100%;background:var(--sur2);border:1.5px solid var(--brd);border-radius:var(--r);padding:10px 12px;font-size:14px;font-family:var(--font);color:var(--txt);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}
.inp::placeholder{color:var(--txt3)}
.inp:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,165,160,.12);background:var(--sur)}
select.inp{cursor:pointer}
textarea.inp{resize:vertical;min-height:68px;line-height:1.6}
.nr{display:flex}
.nb2{width:42px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--sur2);border:1.5px solid var(--brd);font-size:20px;color:var(--txt2);cursor:pointer;transition:all .12s;flex-shrink:0;user-select:none}
.nb2:first-child{border-radius:var(--r) 0 0 var(--r);border-right:none}
.nb2:last-child{border-radius:0 var(--r) var(--r) 0;border-left:none}
.nb2:hover{background:var(--teal-l);color:var(--teal)}
.nb2:active{background:var(--teal);color:#fff}
.nf{flex:1;text-align:center;background:var(--sur2);border:1.5px solid var(--brd);font-size:22px;font-weight:800;color:var(--txt);height:46px;outline:none;font-family:var(--mono);padding:0}
.nf:focus{border-color:var(--teal);background:var(--sur)}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border-radius:var(--r);border:none;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font);transition:all .15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.full{width:100%}
.bp{background:var(--teal);color:#fff;box-shadow:0 2px 8px rgba(14,165,160,.3)}
.bp:hover{background:var(--teal-d)}
.bok{background:var(--ok);color:#fff}
.bnok{background:var(--nok);color:#fff}
.bwrn{background:var(--warn);color:#fff}
.bgh{background:var(--sur);color:var(--txt);border:1.5px solid var(--brd)}
.bgh:hover{background:var(--sur2);border-color:var(--brd2)}
.bsm{padding:7px 12px;font-size:12px}
.br{display:flex;gap:8px}.br .btn{flex:1}

/* ══════════════════════════════════════════════
   TAGS
══════════════════════════════════════════════ */
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.tok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-bd)}
.tnok{background:var(--nok-bg);color:var(--nok);border:1px solid var(--nok-bd)}
.twrn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd)}
.tinf{background:var(--info-bg);color:var(--info);border:1px solid var(--info-bd)}
.tdm{background:var(--sur2);color:var(--txt2);border:1px solid var(--brd)}
.tbr{background:var(--brand-bg);color:var(--brand);border:1px solid rgba(14,165,160,.2)}

/* ALERTS */
.al{border-radius:var(--r);padding:11px 14px;font-size:13px;line-height:1.5;border-left:3px solid;margin-bottom:12px}
.aok{background:var(--ok-bg);border-color:var(--ok);color:#065f46}
.ank{background:var(--nok-bg);border-color:var(--nok);color:#991b1b}
.awn{background:var(--warn-bg);border-color:var(--warn);color:#92400e}
.ain{background:var(--info-bg);border-color:var(--info);color:#1e40af}
.atl{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)}

.dv{height:1px;background:var(--brd);margin:16px 0}

/* TABLE */
.stbl{width:100%;border-collapse:collapse}
.stbl tr{border-bottom:1px solid var(--brd)}
.stbl tr:last-child{border-bottom:none}
.stbl td{padding:9px 0;font-size:13px}
.stbl .tk{color:var(--txt2);width:42%}
.stbl .tv{font-weight:600;color:var(--txt);font-size:13px}

/* BARS */
.bl{display:flex;flex-direction:column}
.brow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--brd)}
.brow:last-child{border-bottom:none}
.blbl{width:120px;font-size:11px;color:var(--txt2);flex-shrink:0}
.btrk{flex:1;height:7px;background:var(--bg);border-radius:4px;overflow:hidden;position:relative}
.bfil{position:absolute;left:0;top:0;bottom:0;border-radius:4px;width:0;transition:width .6s cubic-bezier(.4,0,.2,1)}
.cok{background:var(--ok)}.cwrn{background:var(--warn)}.cnok{background:var(--nok)}.cbr{background:var(--teal)}
.bval{width:40px;text-align:right;font-size:11px;font-weight:700;flex-shrink:0}

/* RANK */
.rrow{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--sur);border:1px solid var(--brd);border-radius:var(--r);margin-bottom:7px}
.rrow:hover{border-color:var(--teal)}
.rpos{width:24px;height:24px;border-radius:50%;background:var(--sur2);color:var(--txt2);font-size:11px;font-weight:800;font-family:var(--mono);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rpos.gld{background:#fef3c7;color:#d97706}
.rpos.slv{background:#f1f5f9;color:#64748b}
.rpos.brz{background:#fdf4e7;color:#b45309}
.rnm{font-size:13px;font-weight:600;color:var(--txt)}
.rmt{font-size:11px;color:var(--txt2)}
.rvl{font-size:14px;font-weight:800;font-family:var(--mono);color:var(--ok)}
.rvl.bad{color:var(--nok)}

/* ACT ITEM */
.aitem{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--sur);border:1px solid var(--brd);border-radius:var(--r);margin-bottom:7px;cursor:pointer;transition:border-color .12s}
.aitem:hover{border-color:var(--teal)}
.aico{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.abdy{flex:1;min-width:0}
.atit{font-size:13px;font-weight:600;color:var(--txt)}
.amet{font-size:11px;color:var(--txt2);margin-top:2px}

/* CHIPS */
.cr-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500;border:1.5px solid var(--brd);background:var(--sur);color:var(--txt2);cursor:pointer;transition:all .12s}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.active{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d);font-weight:600}

/* STEPS */
.steps{display:flex;gap:4px;margin-bottom:16px}
.std{flex:1;height:3px;border-radius:2px;background:var(--brd);transition:background .3s}
.std.done{background:var(--teal)}

/* MOTIVOS */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mchip{padding:10px 7px;border-radius:var(--r);border:1.5px solid var(--brd);background:var(--sur2);text-align:center;cursor:pointer;font-size:12px;color:var(--txt2);transition:all .12s}
.mchip:hover{border-color:var(--teal);color:var(--teal)}
.mchip.sel{border-color:var(--nok);background:var(--nok-bg);color:var(--nok);font-weight:600}

/* URGENCY */
.urow{display:flex;gap:7px}
.ubtn{flex:1;padding:9px;border-radius:var(--r);border:1.5px solid var(--brd);background:var(--sur2);text-align:center;cursor:pointer;font-size:12px;font-weight:500;color:var(--txt2);transition:all .12s}
.ubtn.sb{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.ubtn.sm{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.ubtn.sa{border-color:var(--nok);background:var(--nok-bg);color:var(--nok)}

/* GAUGE */
.gauge-wrap{display:flex;align-items:center;gap:14px;padding:14px;background:var(--sur2);border:1px solid var(--brd);border-radius:var(--r2);margin-bottom:12px}
.gauge-ring{position:relative;width:68px;height:68px;flex-shrink:0}
.gauge-ring svg{transform:rotate(-90deg)}
.pct-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;font-family:var(--mono)}
.gauge-info{flex:1}
.gauge-title{font-size:13px;font-weight:700;color:var(--txt)}
.gauge-sub{font-size:11px;color:var(--txt2);margin-top:2px}
.gauge-metrics{display:flex;gap:14px;margin-top:8px}
.gmet{font-size:10px;color:var(--txt2)}.gmet strong{color:var(--txt);display:block;font-size:13px;font-family:var(--mono)}

/* FRANJA */
.franja-card{background:var(--sur2);border:1px solid var(--brd);border-radius:var(--r);padding:12px 14px;margin-bottom:7px;position:relative}
.franja-header{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.franja-ico{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.franja-type{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.franja-time{font-size:11px;color:var(--txt2)}
.franja-del{position:absolute;top:10px;right:10px;width:22px;height:22px;background:var(--sur);border:1px solid var(--brd);border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--txt3);transition:all .12s}
.franja-del:hover{background:var(--nok-bg);border-color:var(--nok-bd);color:var(--nok)}
.franja-stats{display:flex;gap:14px;font-size:11px;color:var(--txt2)}
.franja-stats strong{color:var(--txt);font-family:var(--mono)}
.timeline{display:flex;gap:2px;height:9px;border-radius:5px;overflow:hidden;margin:10px 0;background:var(--brd)}
.tl-prod{background:var(--ok);opacity:.8}
.tl-stop{background:var(--nok);opacity:.8}

/* PROC CARD */
.proc-card{background:var(--sur);border:1px solid var(--brd);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.proc-card:hover{border-color:var(--teal);box-shadow:var(--sh)}
.proc-hdr{padding:14px 15px 11px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--brd)}
.proc-ico{width:38px;height:38px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.proc-foot{padding:9px 15px 12px;display:flex;gap:7px;flex-wrap:wrap}

/* WORKER PROC */
.wproc-card{background:var(--sur);border:2px solid var(--brd);border-radius:var(--r2);padding:14px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:13px;margin-bottom:8px}
.wproc-card:hover{border-color:var(--teal);background:var(--teal-l)}
.wproc-card.sel{border-color:var(--teal);background:var(--teal-l)}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.modal-bg.open{display:flex}
.modal{background:var(--sur);border:1px solid var(--brd);border-radius:var(--r2);width:100%;max-width:540px;max-height:92vh;overflow-y:auto;box-shadow:var(--sh2)}
.mh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 13px;border-bottom:1px solid var(--brd)}
.mh h3{font-size:15px;font-weight:700;color:var(--txt)}
.mclose{width:28px;height:28px;background:var(--sur2);border:1px solid var(--brd);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:var(--txt2)}
.mclose:hover{background:var(--nok-bg);color:var(--nok)}
.mbody{padding:16px 20px}
.mfooter{padding:12px 20px;border-top:1px solid var(--brd);display:flex;gap:8px;justify-content:flex-end}
.fg{margin-bottom:12px}

/* SUCCESS */
.sw{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center}
.sring{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:16px;border:2px solid}
.rok{background:var(--ok-bg);border-color:var(--ok-bd)}
.stit{font-size:22px;font-weight:800;color:var(--txt);margin-bottom:7px}
.ssub{font-size:13px;color:var(--txt2);line-height:1.6;max-width:300px}

/* EMPTY */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center}
.empty .ei{font-size:40px;margin-bottom:12px;opacity:.3}
.empty .et{font-size:15px;font-weight:600;color:var(--txt);margin-bottom:4px}
.empty .es{font-size:12px;color:var(--txt3)}

/* PHOTO */
.phz{background:var(--sur2);border:1.5px dashed var(--brd2);border-radius:var(--r);height:62px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--txt2);font-size:13px;cursor:pointer;transition:all .12s;margin-bottom:12px}
.phz:hover{background:var(--teal-l);border-color:var(--teal);color:var(--teal)}

/* LOGIN */
#screen-login{background:var(--bg);display:flex;flex-direction:column}
.ll{display:flex;height:100%;min-height:100%}
.lhero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--navy) 0%,var(--navy2) 60%,#1a3a5c 100%);padding:48px;position:relative;overflow:hidden}
.lhero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 30% 70%,rgba(14,165,160,.18) 0,transparent 70%),radial-gradient(ellipse 50% 40% at 75% 25%,rgba(14,165,160,.08) 0,transparent 70%)}
.hcont{position:relative;z-index:1;text-align:center;max-width:360px}
.hero-logo-wrap{margin:0 auto 26px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-logo-img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(14,165,160,.5))}
.hero-brand{font-size:28px;font-weight:900;color:#fff;letter-spacing:-.5px}
.hero-brand span{color:var(--teal)}
.hero-tag{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.6px;text-transform:uppercase;font-weight:500}
.htit{font-size:26px;font-weight:900;color:#fff;margin-bottom:8px;letter-spacing:-.4px;line-height:1.2}
.hsub{font-size:13px;color:rgba(255,255,255,.55);line-height:1.7}
.hf{margin-top:28px;display:flex;flex-direction:column;gap:9px}
.hfeat{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.6);text-align:left}
.hfeat .hfi{width:26px;height:26px;background:rgba(14,165,160,.18);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.lform{width:400px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:44px 36px;background:var(--sur);border-left:1px solid var(--brd);overflow-y:auto}
.lft{font-size:20px;font-weight:800;color:var(--txt);margin-bottom:3px}
.lfs{font-size:13px;color:var(--txt2);margin-bottom:22px}
.ptabs{display:flex;gap:5px;margin-bottom:18px}
.ptab{flex:1;padding:9px 5px;border-radius:var(--r);text-align:center;cursor:pointer;border:1.5px solid var(--brd);background:var(--sur2);transition:all .12s}
.ptab .pi{font-size:19px;display:block;margin-bottom:3px}
.ptab .pl{font-size:9px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.4px}
.ptab.active{border-color:var(--teal);background:var(--teal-l)}
.ptab.active .pl{color:var(--teal-d)}
.login-err{color:var(--nok);font-size:12px;margin-top:5px;display:none}
.login-err.show{display:block}

/* ANIMATIONS */
@keyframes pulse{0%,100%{transform:scale(.97);opacity:.85}50%{transform:scale(1.01);opacity:1}}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .8s linear infinite;display:inline-block}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.fi{animation:fi .2s ease forwards}

/* TOAST */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.1);padding:10px 20px;border-radius:40px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:999;white-space:nowrap;box-shadow:var(--sh2);max-width:calc(100vw - 40px);text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ════════════════ RESPONSIVE · TABLET + MÓVIL ════════════════ */

/* Mejor experiencia táctil global */
*{-webkit-tap-highlight-color:rgba(14,165,160,.18)}
.btn,.chip,.aitem,.card.ck,.atile,.motivo-chip,a,button,select{touch-action:manipulation}

/* TABLET — hasta 1024px */
@media(max-width:1024px){
  .sp{padding:18px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g5{grid-template-columns:repeat(3,1fr)}
  .pg-title{font-size:20px}
  .modal{max-width:90vw}
}

/* MÓVIL — hasta 820px (sidebar oculto, hamburguesa) */
@media(max-width:820px){
  #sidebar{position:fixed;top:0;bottom:0;left:0;transform:translateX(-100%);z-index:60;box-shadow:0 0 30px rgba(0,0,0,.2)}
  #sidebar.open{transform:translateX(0)}
  #sb-ov.vis{display:block}
  #hamburger{display:flex}
  #mob-nav{display:block}

  /* Login */
  .lhero{display:none}
  .lform{width:100%;border-left:none;padding:32px 22px}

  /* Grids reducidos */
  .g4,.g3{grid-template-columns:1fr 1fr}
  .g5{grid-template-columns:repeat(3,1fr)}
  .mgrid{grid-template-columns:1fr 1fr}
  .ga{grid-template-columns:1fr}
  .sp{padding:14px}

  /* Inputs más grandes (evita zoom iOS y mejor tacto) */
  .inp{font-size:16px;padding:12px 14px;min-height:44px}
  select.inp{padding-right:32px}
  textarea.inp{min-height:auto}

  /* Botones más tocables */
  .btn{padding:11px 18px;font-size:14px;min-height:42px}
  .btn.bsm{padding:9px 14px;font-size:12px;min-height:36px}

  /* Cards más compactas */
  .card{padding:14px}
  .pg-title{font-size:19px}
  .pg-sub{font-size:12.5px;margin-bottom:14px}
  .sec-head{margin:14px 0 7px}

  /* Tablas con scroll horizontal */
  .stbl{display:block;overflow-x:auto;white-space:nowrap}
  .stbl td{white-space:normal}
  .stbl .tk{width:auto;padding-right:14px;vertical-align:top}

  /* KPIs más compactos */
  .kpi{padding:12px}
  .kpi .kn{font-size:22px}
  .kpi .kl{font-size:10px}

  /* Atiles (tarjetas grandes home) reflowables */
  .atile{padding:16px 14px}
  .atile .ai{font-size:24px;margin-bottom:6px}
  .atile .at,.atile .atit{font-size:14px}
  .atile .as,.atile .atd{font-size:11px}

  /* Bandeja items un poco más altos */
  .aitem{padding:13px;gap:10px}

  /* Modales casi pantalla completa */
  .modal-bg{padding:0;align-items:flex-end}
  .modal{max-width:100%;max-height:94vh;border-radius:var(--r2) var(--r2) 0 0;width:100%}
  .mh{padding:14px 16px}
  .mbody{padding:16px}

  /* Chips wrap mejor */
  .cr-row{gap:5px;margin-bottom:10px}
  .chip{padding:7px 12px;font-size:12px}
  .chip.active{font-weight:700}

  /* Top bar */
  #tbar{padding:10px 14px}
  #tbar h1{font-size:15px}

  /* Toolbar de filas con muchos botones — wrap */
  .row{flex-wrap:wrap}
  .cr{flex-wrap:wrap}
  .br{flex-wrap:wrap;gap:6px}

  /* Tags más legibles */
  .tag{font-size:10.5px;padding:3px 9px}

  /* Hover off en táctil */
  .card.ck:hover{border-color:var(--brd);box-shadow:none}
  .atile:hover{transform:none;box-shadow:var(--sh)}
  .chip:hover{border-color:var(--brd);color:var(--txt2)}
  .chip.active{border-color:var(--teal);color:var(--teal-d)}
}

/* MÓVIL PEQUEÑO — hasta 480px */
@media(max-width:480px){
  .sp{padding:12px}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .g5{grid-template-columns:repeat(2,1fr)}
  .pg-title{font-size:18px}

  /* Cronómetro en pantalla muy pequeña */
  #ec-timer{font-size:46px !important}

  /* Cards con menos padding */
  .card{padding:12px}

  /* Login mobile */
  .lform{padding:24px 18px}

  /* Botones de acción full-width tienden a apilar */
  .g2{gap:8px}
  .g2 > .btn{width:100%}

  /* Toast más estrecho */
  #toast{font-size:12px;padding:9px 16px;bottom:14px}
}

/* Filas con texto + acciones (listados) — en móvil se apilan vertical */
@media(max-width:640px){
  .card .cr{flex-direction:column;align-items:stretch}
  .card .cr > div:not(.br){width:100%}
  .card .cr .br{justify-content:flex-start;flex-wrap:wrap}
  /* Las acciones a la derecha en cards de usuario */
  .card .cr > div[style*="flex-direction:column"][style*="align-items:flex-end"]{align-items:stretch !important;flex-direction:row !important;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--brd)}
}

/* Top bar móvil: si hay "Volver", lo encogemos */
@media(max-width:520px){
  #tbar h1{font-size:14px;line-height:1.2}
  .tb-back{font-size:13px;padding:5px 8px}
}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:4px}

/* Chips de motivo */
.motivo-chip{padding:14px 16px;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;font-size:14px;transition:all .15s;background:var(--sur);user-select:none}
.motivo-chip:hover{border-color:var(--teal);background:var(--teal-l);transform:translateX(2px)}
.motivo-chip:active{transform:scale(.98)}
@media(max-width:820px){
  .motivo-chip{padding:16px;font-size:15px;min-height:52px;display:flex;align-items:center}
  .motivo-chip:hover{transform:none}
}