@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --navy:#0E2340; --navy-2:#132C4F;
  --blue:#0077C8; --red:#E30613; --green:#00853B; --gold:#C89A0E;
  --bg:#F2F5F9; --surface:#FFFFFF; --surface-2:#E9EEF5; --surface-3:#DCE4EF;
  --line:#D3DCE8; --line-strong:#B9C6D8;
  --text:#0F1A2B; --text-soft:#55637A; --text-faint:#8494AC;
  --ok:#00853B; --warn:#C89A0E; --alert:#E1730B; --crit:#E30613;
  --ok-bg:#E4F3EA; --warn-bg:#FAF1DA; --alert-bg:#FCEBDB; --crit-bg:#FCE3E4; --blue-bg:#E1EFFA;
  --shadow:0 1px 2px rgba(15,26,43,.06), 0 8px 24px rgba(15,26,43,.07);
  --shadow-sm:0 1px 2px rgba(15,26,43,.08);
  --r:10px; --r-sm:6px;
  --sans:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1120; --surface:#111B2C; --surface-2:#18253B; --surface-3:#1F2E48;
    --line:#26344D; --line-strong:#38496A;
    --text:#E9EFF7; --text-soft:#9CACC4; --text-faint:#71829C;
    --ok:#2FB169; --warn:#E0B03C; --alert:#F08A2E; --crit:#F2444F;
    --ok-bg:#0F2C1E; --warn-bg:#2E2510; --alert-bg:#33210F; --crit-bg:#331317; --blue-bg:#0E2740;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1120; --surface:#111B2C; --surface-2:#18253B; --surface-3:#1F2E48;
  --line:#26344D; --line-strong:#38496A;
  --text:#E9EFF7; --text-soft:#9CACC4; --text-faint:#71829C;
  --ok:#2FB169; --warn:#E0B03C; --alert:#F08A2E; --crit:#F2444F;
  --ok-bg:#0F2C1E; --warn-bg:#2E2510; --alert-bg:#33210F; --crit-bg:#331317; --blue-bg:#0E2740;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  color-scheme: dark;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 10px;width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:800;letter-spacing:-.01em}
a{color:var(--blue)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
.muted{color:var(--text-soft)}
.hide{display:none !important}
.scrollx{overflow-x:auto}

/* ---------- brand mark ---------- */
.mark{display:block}
.brandline{display:flex;align-items:center;gap:10px}
.brandline .bt{line-height:1}
.brandline .b1{font-weight:800;letter-spacing:.02em;font-size:15px}
.brandline .b2{font-size:8.5px;font-weight:600;letter-spacing:.26em;color:var(--text-soft);text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-sm);padding:8px 13px;font-weight:600;font-size:13px;transition:background .12s,border-color .12s,transform .06s}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-2)}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.red{background:var(--crit);border-color:var(--crit);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#20180a}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.sm{padding:5px 9px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent}

/* ---------- pills / chips ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.alert{background:var(--alert-bg);color:var(--alert)}
.pill.crit{background:var(--crit-bg);color:var(--crit)}
.pill.info{background:var(--blue-bg);color:var(--blue)}
.pill.neutral{background:var(--surface-2);color:var(--text-soft)}
.dot{width:7px;height:7px;border-radius:100px;background:currentColor;flex:none}

/* ---------- layout: app shell ---------- */
#app{min-height:100vh}
.shell{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
.side{background:var(--navy);color:#cfdaea;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-head{padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.side-head .b1{color:#fff}
.side-head .b2{color:#8fa6c4}
.nav{padding:10px 8px;display:flex;flex-direction:column;gap:1px;flex:1}
.nav .grp{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6f88ab;padding:14px 10px 6px;font-weight:700}
.nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;color:#c3d2e6;padding:8px 10px;border-radius:var(--r-sm);font-size:13px;font-weight:500}
.nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.nav button.on{background:var(--blue);color:#fff;font-weight:600}
.nav button .ix{width:18px;text-align:center;font-size:12px;font-family:var(--mono);opacity:.75}
.nav button.on .ix{opacity:1}
.nav button.soon{color:#7d92b1}
.nav button.soon:after{content:'Próx.';margin-left:auto;font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:rgba(200,154,14,.18);color:var(--gold);padding:1px 5px;border-radius:100px;font-weight:700}
.side-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:#8fa6c4;display:flex;justify-content:space-between;align-items:center;gap:8px}
.side-foot button{background:transparent;border:1px solid rgba(255,255,255,.2);color:#cfdaea;border-radius:var(--r-sm);padding:4px 8px;font-size:11px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--surface) 88%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:11px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar h1{font-size:17px}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px}
.avatar{width:30px;height:30px;border-radius:100px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}
.content{padding:20px 22px 60px;max-width:1500px;width:100%}

/* ---------- cards / tables ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.card-h{padding:12px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h h3{font-size:13.5px;letter-spacing:.01em}
.card-h .sp{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.card-b{padding:15px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1100px){.g4,.g6{grid-template-columns:repeat(3,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.g2,.g3,.g4,.g6{grid-template-columns:1fr}}

.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;display:flex;flex-direction:column;gap:3px}
.kpi .v{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .l{font-size:11px;font-weight:600;color:var(--text-soft);letter-spacing:.03em;text-transform:uppercase}
.kpi .s{font-size:11.5px;color:var(--text-faint)}
.kpi.acc{border-left:3px solid var(--blue)}
.kpi.acc-ok{border-left:3px solid var(--ok)}
.kpi.acc-crit{border-left:3px solid var(--crit)}
.kpi.acc-warn{border-left:3px solid var(--warn)}

thead th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--surface-2)}
td.r,th.r{text-align:right}
.tname{font-weight:600}
.tsub{font-size:11.5px;color:var(--text-faint)}

.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar input,.toolbar select{width:auto;min-width:150px}
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--r-sm);padding:2px;gap:2px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:5px;font-size:12.5px;font-weight:600;color:var(--text-soft)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:9px 13px;font-size:13px;font-weight:600;color:var(--text-soft);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--text);border-bottom-color:var(--blue)}

.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft)}
.field .hint{font-size:11px;color:var(--text-faint)}
.checkline{display:flex;align-items:center;gap:8px;font-size:13px}
.checkline input{width:auto}

.dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:13px;align-items:baseline}
.dl dt{color:var(--text-soft);font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.dl dd{margin:0;font-weight:600}

.alertrow{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.alertrow:hover{background:var(--surface-2)}
.alertrow:last-child{border-bottom:0}
.alertrow .bar{width:3px;align-self:stretch;border-radius:100px;flex:none}
.alertrow .tx{min-width:0;flex:1}
.alertrow .t1{font-weight:700;font-size:13px}
.alertrow .t2{font-size:12px;color:var(--text-soft)}
.alertrow .tm{font-family:var(--mono);font-size:11.5px;color:var(--text-faint)}

/* ---------- modal ---------- */
.ov{position:fixed;inset:0;background:rgba(10,17,32,.55);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow-y:auto}
.mod{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:620px;overflow:hidden}
.mod.wide{max-width:900px}
.mod-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.mod-h h3{font-size:15px}
.mod-h .x{margin-left:auto;background:transparent;border:0;font-size:20px;line-height:1;color:var(--text-faint);padding:2px 6px;border-radius:6px}
.mod-h .x:hover{background:var(--surface-2);color:var(--text)}
.mod-b{padding:18px;display:flex;flex-direction:column;gap:14px;max-height:70vh;overflow-y:auto}
.mod-f{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:var(--surface-2)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 18px;border-radius:100px;font-size:13px;font-weight:600;z-index:300;box-shadow:var(--shadow);display:flex;gap:9px;align-items:center;animation:up .2s ease}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}
.banner{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.45}
.banner.info{background:var(--blue-bg);color:var(--text)}
.banner.warn{background:var(--warn-bg)}
.banner b{font-weight:700}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:900px){.login{grid-template-columns:1fr}.login .lpanel{display:none}}
.lpanel{background:var(--navy);color:#fff;padding:44px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.lpanel:before{content:'';position:absolute;inset:auto -80px -120px auto;width:420px;height:420px;border-radius:100%;background:radial-gradient(circle at 30% 30%, rgba(0,119,200,.5), transparent 62%)}
.lpanel .stripes{display:flex;gap:0;height:4px;width:190px;border-radius:100px;overflow:hidden}
.lpanel .stripes i{flex:1}
.lform{display:flex;align-items:center;justify-content:center;padding:36px 24px;background:var(--surface)}
.lform .inner{width:100%;max-width:360px;display:flex;flex-direction:column;gap:15px}
.demo-user{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);text-align:left;width:100%}
.demo-user:hover{border-color:var(--blue);background:var(--blue-bg)}
.demo-user .rn{font-weight:700;font-size:12.5px}
.demo-user .rr{font-size:11px;color:var(--text-soft)}

/* ---------- guard phone ---------- */
.phonewrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;background:
  radial-gradient(circle at 20% 10%, color-mix(in srgb,var(--blue) 12%, transparent), transparent 45%),
  radial-gradient(circle at 85% 85%, color-mix(in srgb,var(--green) 10%, transparent), transparent 45%), var(--bg)}
.phone{width:100%;max-width:392px;height:min(844px, calc(100vh - 44px));background:var(--surface);border-radius:30px;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;position:relative}
@media(max-width:520px){.phonewrap{padding:0}.phone{max-width:none;height:100vh;border-radius:0;border:0}}
.ph-status{background:var(--navy);color:#fff;padding:9px 16px;display:flex;align-items:center;gap:9px;font-size:11px}
.ph-status .sp{margin-left:auto;font-family:var(--mono);letter-spacing:.03em}
.ph-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.ph-hero{background:linear-gradient(150deg,var(--navy),var(--navy-2));color:#fff;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px}
.ph-hero .hi{font-size:12px;color:#a9bcd6}
.ph-hero .nm{font-size:19px;font-weight:800;letter-spacing:-.01em}
.ph-hero .rows{margin-top:11px;display:flex;flex-direction:column;gap:7px;border-top:1px solid rgba(255,255,255,.14);padding-top:11px}
.ph-hero .row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.ph-hero .row span:first-child{color:#a9bcd6}
.ph-hero .row span:last-child{font-weight:700;text-align:right}
.bigbtn{display:flex;align-items:center;gap:13px;width:100%;padding:15px;border-radius:13px;border:1px solid var(--line);background:var(--surface);text-align:left;font-weight:700;font-size:14.5px;box-shadow:var(--shadow-sm)}
.bigbtn:hover{border-color:var(--line-strong);background:var(--surface-2)}
.bigbtn .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:17px}
.bigbtn .sub{font-weight:500;font-size:11.5px;color:var(--text-soft);display:block;margin-top:1px}
.bigbtn.k-blue .ic{background:var(--blue-bg);color:var(--blue)}
.bigbtn.k-green .ic{background:var(--ok-bg);color:var(--ok)}
.bigbtn.k-gold .ic{background:var(--warn-bg);color:var(--warn)}
.bigbtn.k-red .ic{background:var(--crit-bg);color:var(--crit)}
.bigbtn.k-navy .ic{background:var(--surface-2);color:var(--text-soft)}
.stepcard{background:var(--surface-2);border-radius:13px;padding:15px;display:flex;flex-direction:column;gap:11px}
.camsim{aspect-ratio:1;border-radius:13px;background:linear-gradient(160deg,#1a2740,#0d1728);display:grid;place-items:center;color:#8fa6c4;font-size:12px;position:relative;overflow:hidden}
.camsim .frame{position:absolute;inset:16%;border:2px dashed rgba(255,255,255,.32);border-radius:50%}
.camsim .qrframe{position:absolute;inset:18%;border:2px solid rgba(255,255,255,.4);border-radius:12px}
.camsim.scan:after{content:'';position:absolute;left:8%;right:8%;height:2px;background:var(--red);box-shadow:0 0 12px var(--red);animation:scan 1.6s ease-in-out infinite}
@keyframes scan{0%,100%{top:22%}50%{top:76%}}
@media (prefers-reduced-motion: reduce){.camsim.scan:after{animation:none;top:50%}}
.chk{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:11px;font-size:12.5px;line-height:1.4}
.chk.ok{background:var(--ok-bg);color:var(--ok)}
.chk.bad{background:var(--crit-bg);color:var(--crit)}
.chk.info{background:var(--blue-bg);color:var(--blue)}
.chk b{display:block;font-size:13px}
.chk .mv{font-family:var(--mono);color:var(--text-soft);font-size:11.5px}
.ph-title{display:flex;align-items:center;gap:10px}
.ph-title h2{font-size:16px}
.ph-back{border:0;background:var(--surface-2);width:32px;height:32px;border-radius:9px;font-size:15px;display:grid;place-items:center;flex:none}
.pvgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pvbtn{border-radius:13px;border:1.5px solid var(--line);background:var(--surface);padding:15px 11px;display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;font-weight:700;font-size:12.5px}
.pvbtn .em{font-size:21px}
.pvbtn.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.pvbtn.ok:hover{background:var(--ok-bg)}
.pvbtn.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.pvbtn.warn:hover{background:var(--warn-bg)}
.pvbtn.alert{border-color:color-mix(in srgb,var(--alert) 45%,transparent)}
.pvbtn.alert:hover{background:var(--alert-bg)}
.pvbtn.crit{border-color:var(--crit);background:var(--crit-bg);color:var(--crit)}
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:11px;padding:9px 0}
.tl-item .tl-dot{width:9px;height:9px;border-radius:100px;margin-top:5px;flex:none}
.tl-item .tl-line{flex:none;width:9px;display:flex;flex-direction:column;align-items:center}
.tl-item .tl-line i{flex:1;width:1.5px;background:var(--line)}

/* ---------- payroll matrix ---------- */
.matrix{font-size:12px}
.matrix th,.matrix td{padding:6px 8px;white-space:nowrap}
.matrix thead th{position:sticky;top:0;z-index:3}
.matrix .day{text-align:center;min-width:38px}
.matrix .day .wd{display:block;font-size:8.5px;letter-spacing:.06em;color:var(--text-faint)}
.matrix .day .dn{display:block;font-size:12px;font-weight:800;color:var(--text-soft)}
.matrix .day.wknd{background:var(--surface-2)}
.matrix td.cell{text-align:center;cursor:pointer;font-family:var(--mono);font-weight:600;font-size:11.5px;padding:4px}
.matrix td.cell span{display:inline-grid;place-items:center;min-width:26px;height:23px;border-radius:5px;padding:0 4px}
.matrix td.cell:hover span{outline:2px solid var(--blue);outline-offset:1px}
.matrix .emp{position:sticky;left:0;background:var(--surface);z-index:2;min-width:196px;border-right:1px solid var(--line)}
.matrix thead .emp{z-index:4}
.matrix .svc td{background:var(--surface-2);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft)}
.matrix .svc td.emp{background:var(--surface-2)}
.matrix .tot{background:color-mix(in srgb,var(--surface-2) 60%, transparent);text-align:right;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.legend .lg{display:flex;align-items:center;gap:6px;font-size:11px;border:1px solid var(--line);border-radius:100px;padding:3px 9px 3px 4px}
.legend .lg span{font-family:var(--mono);font-weight:700;min-width:24px;height:19px;border-radius:5px;display:grid;place-items:center;font-size:10.5px}

/* code colors */
.c-1{background:var(--ok-bg);color:var(--ok)}
.c-2{background:var(--blue-bg);color:var(--blue)}
.c-3{background:#EFE3FA;color:#7A32B8}
.c-pg{background:var(--surface-3);color:var(--text-soft)}
.c-p{background:var(--surface-3);color:var(--text-soft)}
.c-d{background:var(--surface-2);color:var(--text-faint)}
.c-i{background:var(--warn-bg);color:var(--warn)}
.c-r{background:var(--warn-bg);color:var(--warn)}
.c-z{background:var(--crit-bg);color:var(--crit)}
.c-v{background:#E0F1F5;color:#0A7185}
.c-f{background:var(--crit-bg);color:var(--crit)}
.c-a{background:var(--crit-bg);color:var(--crit)}
.c-s{background:var(--alert-bg);color:var(--alert)}
:root[data-theme="dark"] .c-3, :root:not([data-theme="light"]) .c-3{}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .c-3{background:#2A1740;color:#C89BF0} :root:not([data-theme="light"]) .c-v{background:#0A2A32;color:#5AC5DB}}
:root[data-theme="dark"] .c-3{background:#2A1740;color:#C89BF0}
:root[data-theme="dark"] .c-v{background:#0A2A32;color:#5AC5DB}

.qrbox{width:150px;height:150px;border-radius:10px;background:#fff;display:grid;place-items:center;padding:9px;border:1px solid var(--line)}
.progress{height:6px;border-radius:100px;background:var(--surface-3);overflow:hidden}
.progress i{display:block;height:100%;background:var(--blue);border-radius:100px}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars .b i{width:100%;border-radius:5px 5px 0 0;background:var(--blue);display:block}
.bars .b em{font-style:normal;font-size:10.5px;color:var(--text-faint);font-family:var(--mono)}
.soonbox{border:1px dashed var(--line-strong);border-radius:var(--r);padding:16px;background:color-mix(in srgb,var(--surface) 60%,transparent);display:flex;flex-direction:column;gap:8px}
.soonbox h4{font-size:14px}
.soonbox ul{margin:0;padding-left:17px;font-size:12.5px;color:var(--text-soft);line-height:1.65}

/* ===== v2 · comunicaciones, ciclo de vida, evidencia forense ===== */
.pend{color:var(--gold);font-weight:800}
.pendtag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);background:var(--warn-bg);padding:2px 7px;border-radius:100px}
.lvl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.lvl.info{background:var(--blue-bg);color:var(--blue)}
.lvl.imp{background:var(--alert-bg);color:var(--alert)}
.lvl.crit{background:var(--crit-bg);color:var(--crit)}
.wf{display:flex;align-items:center;gap:0;flex-wrap:wrap;font-size:11px;font-weight:700}
.wf span{padding:4px 10px;background:var(--surface-2);color:var(--text-faint);border-right:1px solid var(--surface)}
.wf span:first-child{border-radius:100px 0 0 100px}
.wf span:last-child{border-radius:0 100px 100px 0;border-right:0}
.wf span.on{background:var(--navy);color:#fff}
.wf span.done{background:var(--ok-bg);color:var(--ok)}
.snap{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:9px}
.snap .s{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--surface)}
.snap .s .k{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.snap .s .v{font-family:var(--mono);font-size:12.5px;font-weight:600;margin-top:2px;word-break:break-word}
.snap .s.ok{border-left:3px solid var(--ok)}
.snap .s.bad{border-left:3px solid var(--crit)}
.snap .s.warn{border-left:3px solid var(--warn)}
.bell{position:relative;background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:8px;padding:4px 8px;font-size:12px;line-height:1}
.bell b{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:9px;min-width:15px;height:15px;border-radius:100px;display:grid;place-items:center;font-weight:800}
.inbox{display:flex;flex-direction:column;gap:9px}
.inbox .it{border:1px solid var(--line);border-left:4px solid var(--line-strong);border-radius:11px;padding:12px 13px;background:var(--surface);text-align:left;width:100%;display:flex;flex-direction:column;gap:3px}
.inbox .it.crit{border-left-color:var(--crit)} .inbox .it.imp{border-left-color:var(--alert)} .inbox .it.info{border-left-color:var(--blue)}
.inbox .it .t{font-weight:800;font-size:13.5px}
.inbox .it .d{font-size:12px;color:var(--text-soft)}
.inbox .it .m{font-size:11px;color:var(--text-faint);font-family:var(--mono)}
.inbox .it.nueva{background:var(--blue-bg)}
.interst{border:2px solid var(--crit);background:var(--crit-bg);border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:11px}
.interst.imp{border-color:var(--alert);background:var(--alert-bg)}
.interst h3{font-size:16px}
.interst .cuerpo{font-size:13.5px;line-height:1.55;background:var(--surface);border-radius:10px;padding:12px}
.dots{display:flex;gap:14px;flex-wrap:wrap}
.dots .d{display:flex;flex-direction:column;gap:1px}
.dots .d b{font-size:20px;font-variant-numeric:tabular-nums}
.dots .d span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.rolcard{border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;gap:11px;align-items:center;background:var(--surface)}
.rolcard .dia{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text-faint);min-width:52px}
.qmark{font-size:11px;color:var(--gold);font-weight:800;margin-left:4px}

/* ===== v2 · comunicaciones, ciclo de vida, evidencia forense ===== */
.pend{color:var(--gold);font-weight:800}
.pendtag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);background:var(--warn-bg);padding:2px 7px;border-radius:100px}
.lvl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.lvl.info{background:var(--blue-bg);color:var(--blue)}
.lvl.imp{background:var(--alert-bg);color:var(--alert)}
.lvl.crit{background:var(--crit-bg);color:var(--crit)}
.wf{display:flex;align-items:center;gap:0;flex-wrap:wrap;font-size:11px;font-weight:700}
.wf span{padding:4px 10px;background:var(--surface-2);color:var(--text-faint);border-right:1px solid var(--surface)}
.wf span:first-child{border-radius:100px 0 0 100px}
.wf span:last-child{border-radius:0 100px 100px 0;border-right:0}
.wf span.on{background:var(--navy);color:#fff}
.wf span.done{background:var(--ok-bg);color:var(--ok)}
.snap{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:9px}
.snap .s{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--surface)}
.snap .s .k{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.snap .s .v{font-family:var(--mono);font-size:12.5px;font-weight:600;margin-top:2px;word-break:break-word}
.snap .s.ok{border-left:3px solid var(--ok)}
.snap .s.bad{border-left:3px solid var(--crit)}
.snap .s.warn{border-left:3px solid var(--warn)}
.bell{position:relative;background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:8px;padding:4px 8px;font-size:12px;line-height:1}
.bell b{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:9px;min-width:15px;height:15px;border-radius:100px;display:grid;place-items:center;font-weight:800}
.inbox{display:flex;flex-direction:column;gap:9px}
.inbox .it{border:1px solid var(--line);border-left:4px solid var(--line-strong);border-radius:11px;padding:12px 13px;background:var(--surface);text-align:left;width:100%;display:flex;flex-direction:column;gap:3px}
.inbox .it.crit{border-left-color:var(--crit)} .inbox .it.imp{border-left-color:var(--alert)} .inbox .it.info{border-left-color:var(--blue)}
.inbox .it .t{font-weight:800;font-size:13.5px}
.inbox .it .d{font-size:12px;color:var(--text-soft)}
.inbox .it .m{font-size:11px;color:var(--text-faint);font-family:var(--mono)}
.inbox .it.nueva{background:var(--blue-bg)}
.interst{border:2px solid var(--crit);background:var(--crit-bg);border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:11px}
.interst.imp{border-color:var(--alert);background:var(--alert-bg)}
.interst h3{font-size:16px}
.interst .cuerpo{font-size:13.5px;line-height:1.55;background:var(--surface);border-radius:10px;padding:12px}
.dots{display:flex;gap:14px;flex-wrap:wrap}
.dots .d{display:flex;flex-direction:column;gap:1px}
.dots .d b{font-size:20px;font-variant-numeric:tabular-nums}
.dots .d span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.rolcard{border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;gap:11px;align-items:center;background:var(--surface)}
.rolcard .dia{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text-faint);min-width:52px}
.qmark{font-size:11px;color:var(--gold);font-weight:800;margin-left:4px}

/* ══════════════════════════════════════════════════════════
   Componentes del sistema en producción
   ══════════════════════════════════════════════════════════ */

body.cargando{cursor:progress}

/* -- estados de carga y vacío -- */
.cargando-caja{display:flex;flex-direction:column;align-items:center;gap:14px;padding:70px 20px;color:var(--text-soft)}
.giro{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.vacio{text-align:center;padding:52px 24px;color:var(--text-soft)}
.vacio-icono{font-size:30px;color:var(--line-strong);margin-bottom:10px}
.vacio h4{margin:0 0 6px;font-size:15px;color:var(--text)}
.vacio p{margin:0 auto;max-width:460px;font-size:13px;line-height:1.6}
.vacio-acc{margin-top:16px}
.vacio.error h4{color:var(--crit)}
.todo-bien{padding:22px;text-align:center;color:var(--ok);font-weight:600;background:var(--ok-bg);border-radius:var(--r)}

/* -- barras de filtros -- */
.barra-filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.campo.compacto{min-width:150px}
.calendario-nota{font-size:11.5px;color:var(--text-soft);padding-bottom:9px}

/* -- campos de formulario -- */
.campo{display:flex;flex-direction:column;gap:5px}
.campo>span{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--text-soft);text-transform:uppercase}
.campo input,.campo select,.campo textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.campo input.malo,.campo select.malo,.campo textarea.malo{border-color:var(--crit);background:var(--crit-bg)}
.campo .req{color:var(--crit)}
.ayuda{font-size:11.5px;color:var(--text-faint);line-height:1.45}
.form-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.form-rejilla textarea{grid-column:1/-1}
.chk-linea{display:flex;align-items:center;gap:9px;font-size:13.5px;grid-column:1/-1}
.chk-linea input{width:16px;height:16px}

/* -- tablas -- */
.tabla-env{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{background:var(--surface-2);padding:9px 12px;text-align:left;font-size:11px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);white-space:nowrap}
.tabla td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tabla tbody tr:hover{background:var(--surface-2)}
.tabla tr.clicable{cursor:pointer}
.tabla .mono,td.mono{font-family:var(--mono);font-size:12px}
.tabla .btn.sm{margin-right:4px}

/* -- indicadores -- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--kpi,var(--blue));
  border-radius:var(--r);padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.kpi-e{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft)}
.kpi-v{font-size:23px;font-weight:800;line-height:1.1}
.kpi-d{font-size:11.5px;color:var(--text-faint)}

/* -- encabezados y secciones -- */
.vh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.vh h2{margin:0;font-size:21px}
.vh .sub{margin:3px 0 0;font-size:13px;color:var(--text-soft)}
.vh-acc{display:flex;gap:8px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px;overflow:hidden}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.card-h h3{margin:0;font-size:14px}
.card-b{padding:16px}
.nota{background:var(--blue-bg);border-left:3px solid var(--blue);padding:11px 14px;
  border-radius:var(--r-sm);font-size:12.5px;line-height:1.6;color:var(--text);margin:12px 0}
.nota.ojo{background:var(--alert-bg);border-left-color:var(--alert)}
.nota.mal{background:var(--crit-bg);border-left-color:var(--crit)}
.volver{background:none;border:0;color:var(--blue);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;padding:0;margin-bottom:12px}
.volver:hover{text-decoration:underline}

/* -- pestañas -- */
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:9px 15px;
  font:inherit;font-size:13px;font-weight:600;color:var(--text-soft);cursor:pointer;white-space:nowrap}
.tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.tab:hover{color:var(--text)}

/* -- listas de datos -- */
.datos{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0;font-size:13.5px}
.datos dt{font-weight:700;color:var(--text-soft);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.datos dd{margin:0}
.datos dd em{color:var(--text-faint);font-style:normal;font-size:12px}
.datos .mal,.datos dd.mal{color:var(--crit);font-weight:600}
.texto-largo{font-size:14px;line-height:1.7;margin:0}
.texto-largo.cita{border-left:3px solid var(--line-strong);padding-left:14px;color:var(--text-soft);margin:12px 0}

/* -- alertas -- */
.alerta-caja{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.alerta-caja.crit{border-left:3px solid var(--crit)}
.alerta-caja.alert{border-left:3px solid var(--alert)}
.alerta-caja.warn{border-left:3px solid var(--warn)}
.alerta-linea{display:flex;align-items:flex-start;gap:12px;padding:12px 14px}
.al-i{font-size:15px;line-height:1.2}
.alerta-linea.crit .al-i{color:var(--crit)}
.alerta-linea.alert .al-i{color:var(--alert)}
.alerta-linea.warn .al-i{color:var(--warn)}
.al-c{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.al-d{font-size:12.5px;color:var(--text-soft)}
.al-m{font-size:11px;color:var(--text-faint)}
.alerta-btns{display:flex;gap:7px;padding:0 14px 12px;flex-wrap:wrap}
.acc-lista{padding:0 14px 10px;font-size:12px;color:var(--text-soft);display:flex;flex-direction:column;gap:3px}
.cierre-caja{margin:0 14px 12px;padding:10px 12px;background:var(--surface-2);border-radius:var(--r-sm);font-size:12.5px;line-height:1.6}

/* -- servicios -- */
.rejilla-servicios{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tarjeta-svc{text-align:left;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:var(--r);padding:13px 15px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:6px}
.tarjeta-svc.alert{border-left-color:var(--alert)}
.tarjeta-svc.crit{border-left-color:var(--crit)}
.tarjeta-svc:hover{background:var(--surface-2)}
.ts-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ts-b{font-size:12.5px;color:var(--text-soft)}
.ts-r{font-size:11.5px;color:var(--alert)}
.ts-d{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--text-faint)}

/* -- semáforo: una casilla por servicio y turno --
   Más chicas que las tarjetas de servicio a propósito: son para barrer con
   la vista de un jalón, no para leerlas una por una. El color del borde y
   del fondo van juntos para que el rojo se distinga del ámbar de lejos y
   también para quien no distingue bien esos dos colores: el texto de la
   razón dice siempre qué pasa. */
.rejilla-sem{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:9px;margin-bottom:14px}
.sem-celda{text-align:left;border-radius:var(--r-sm);padding:10px 11px;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-left-width:4px}
.sem-celda:hover{filter:brightness(.97)}
.sem-verde{border-left-color:var(--ok);background:var(--ok-bg)}
.sem-ambar{border-left-color:var(--alert);background:var(--alert-bg)}
.sem-rojo{border-left-color:var(--crit);background:var(--crit-bg)}
.sc-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:12.5px}
.sc-h .mono{font-size:10.5px;color:var(--text-faint)}
.sc-b{font-size:16px;font-weight:800;line-height:1}
.sc-r{font-size:10.5px;color:var(--text-soft);line-height:1.3}

/* -- primeros pasos -- */
.pasos{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.paso{display:flex;gap:15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.paso .n{width:30px;height:30px;flex:none;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px}
.paso strong{display:block;margin-bottom:4px;font-size:14px}
.paso p{margin:0 0 9px;font-size:13px;color:var(--text-soft);line-height:1.6}

/* -- escala de retardos -- */
.escala{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
.esc{padding:11px 13px;border-radius:var(--r-sm);border-left:3px solid;display:flex;flex-direction:column;gap:3px}
.esc b{font-size:13px}
.esc span{font-size:11.5px;color:var(--text-soft)}
.esc.ok{background:var(--ok-bg);border-color:var(--ok)}
.esc.warn{background:var(--warn-bg);border-color:var(--warn)}
.esc.alert{background:var(--alert-bg);border-color:var(--alert)}
.esc.crit{background:var(--crit-bg);border-color:var(--crit)}

/* -- tope de nómina -- */
.tope{margin-bottom:14px}
.tope-barra{position:relative;height:26px;background:var(--surface-3);border-radius:var(--r-sm);overflow:hidden}
.tope-lleno{height:100%;background:linear-gradient(90deg,var(--ok),var(--blue));transition:width .4s}
.tope.mal .tope-lleno{background:linear-gradient(90deg,var(--alert),var(--crit))}
.tope-cifras{display:flex;gap:26px;margin-top:11px;flex-wrap:wrap}
.tope-cifras div{display:flex;flex-direction:column}
.tope-cifras span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.tope-cifras strong{font-size:17px;font-weight:800}
.plantilla-detalle{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--text-soft);margin-top:12px}
.plantilla-detalle .fuerte{font-weight:700;color:var(--text)}

/* -- desglose de nómina -- */
.desg-l{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.desg-total{display:flex;justify-content:space-between;gap:16px;padding:11px 0;margin-top:6px;
  border-top:2px solid var(--line-strong);font-size:15px;font-weight:800}
.codigos-dias{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}
.cd{width:26px;height:26px;display:grid;place-items:center;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:10.5px;font-weight:600;background:var(--surface-2)}
.cd-F,.cd-A{background:var(--crit-bg);color:var(--crit)}
.cd-R,.cd-R2,.cd-R3,.cd-Z{background:var(--warn-bg);color:var(--warn)}
.cd-D,.cd-D\%{background:var(--surface-3);color:var(--text-faint)}
.cd-2,.cd-3,.cd-DT,.cd-VT{background:var(--ok-bg);color:var(--ok)}

/* -- tabulador de sueldos -- */
.celda-sueldo{background:none;border:1px solid transparent;border-radius:var(--r-sm);padding:6px 9px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;
  align-items:flex-end;gap:1px;margin-left:auto}
.celda-sueldo:hover:not(:disabled){border-color:var(--blue);background:var(--blue-bg)}
.celda-sueldo.pendiente{color:var(--alert);font-style:italic;font-weight:500}
.turno-val{font-size:10.5px;font-weight:400;color:var(--text-faint)}

/* -- calidad -- */
.tendencias{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tend{border:1px solid var(--line);border-radius:var(--r);padding:12px}
.tend-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;font-size:13px}
.tend-barras{display:flex;align-items:flex-end;gap:3px;height:52px}
.tb{flex:1;border-radius:2px 2px 0 0;min-height:8px}
.tb.ok{background:var(--ok)}
.tb.mal{background:var(--crit)}
.tend-alerta{margin-top:8px;font-size:11.5px;color:var(--crit);font-weight:600}

/* -- formatos -- */
.rejilla-formatos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px}
.tarjeta-fmt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px;
  cursor:pointer;font:inherit;text-align:left;display:flex;flex-direction:column;gap:5px}
.tarjeta-fmt:hover{border-color:var(--blue);background:var(--blue-bg)}
.fmt-i{font-size:19px;color:var(--blue)}
.fmt-n{font-weight:700;font-size:13.5px}
.fmt-d{font-size:11px;color:var(--text-faint)}

/* -- línea de tiempo -- */
.linea-tiempo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.linea-tiempo li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line);
  display:flex;flex-direction:column;gap:2px}
.linea-tiempo li:last-child{border-left-color:transparent;padding-bottom:0}
.linea-tiempo li::before{content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;
  border-radius:50%;background:var(--line-strong)}
.linea-tiempo li.visible::before{background:var(--blue)}
.lt-h{font-family:var(--mono);font-size:11px;color:var(--text-faint)}
.lt-t{font-size:13.5px;line-height:1.55}
.lt-u{font-size:11px;color:var(--text-faint)}
.lista-acc{margin:10px 0;padding-left:20px;font-size:13px;line-height:1.7;color:var(--text-soft)}

/* -- buscador -- */
.buscador-top{flex:1;max-width:330px;margin:0 12px}
.buscador-top input{width:100%;padding:7px 12px;border:1px solid var(--line);border-radius:20px;
  background:var(--surface-2);color:var(--text);font:inherit;font-size:13px}
.buscador-top input:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--surface)}
.grp-res{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);margin:14px 0 7px}
.res{width:100%;text-align:left;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 13px;margin-bottom:5px;cursor:pointer;font:inherit;display:grid;
  grid-template-columns:1fr auto;gap:2px 12px}
.res:hover{background:var(--blue-bg);border-color:var(--blue)}
.res-t{font-weight:600;font-size:13.5px}
.res-d{font-size:12px;color:var(--text-soft);grid-column:1}
.res-m{font-size:10.5px;color:var(--text-faint);grid-row:1/3;align-self:center}

/* -- varios -- */
.ok-txt{color:var(--ok);font-weight:600}
.mal-txt{color:var(--crit);font-weight:600}
.muted{color:var(--text-faint)}
.pill.gold{background:var(--warn-bg);color:var(--gold)}
.qr-caja{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.qr-caja strong{font-size:16px}
.qr-caja p{margin:5px 0 0;font-size:12.5px;max-width:460px}
.dato-caja{margin-top:12px;padding:11px 14px;background:var(--crit-bg);border-radius:var(--r-sm);
  display:flex;flex-direction:column;gap:3px}
.dato-caja b{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--crit)}
.dato-caja .mono{font-family:var(--mono);font-size:14px;font-weight:600}
.evidencia{margin-top:14px}
.evidencia img{max-width:100%;border-radius:var(--r);border:1px solid var(--line)}
.corr{font-size:12px;color:var(--text-soft);padding:5px 0;border-bottom:1px solid var(--line)}
.enlace-caja input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:12px;background:var(--surface-2);color:var(--text)}
.ayuda-que{font-size:14px;line-height:1.65;margin:0 0 14px}
.ayuda-lista{margin:0;padding-left:20px;font-size:13.5px;line-height:1.75;display:flex;flex-direction:column;gap:7px}
.btn.danger{background:var(--crit);color:#fff;border-color:var(--crit)}
.btn.danger:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.side-foot{display:flex;gap:8px}
.side-foot button{flex:1}

@media (max-width:820px){
  .buscador-top{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .datos{grid-template-columns:1fr;gap:2px 0}
  .datos dd{margin-bottom:9px}
}
.cd-vacio{background:transparent;border:1px dashed var(--line);color:var(--text-faint)}

/* Días del mando de sueldo fijo. Un día sin código no es un hueco: es un
   día de su quincena, pagado. Se pinta lleno para que el recibo de un
   coordinador no se vea entero como un expediente abandonado. */
.cd-base{background:var(--panel-2,#eef1f5);border:1px solid var(--line);color:var(--text-faint)}
.cd-desc{background:color-mix(in srgb,var(--blue) 16%,transparent);border:1px solid var(--blue);color:var(--blue);font-weight:600}
.cd-desc-no{background:color-mix(in srgb,var(--alert) 16%,transparent);border:1px solid var(--alert);color:var(--alert);font-weight:600;text-decoration:line-through}
.desg-l:only-of-type{border-bottom:0}

/* ── Texto que existe para los lectores de pantalla pero no se pinta ──
   El nombre del módulo ya sale en la barra superior. El encabezado de la
   vista lo conserva en el HTML —para que quien navegue por voz sepa dónde
   está— sin dibujarlo una segunda vez. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Servicio activo que todavía no opera porque le falta capturar algo
   (posiciones, coordenadas, coordinador). Antes desaparecía del tablero. */
.tarjeta-svc.pend{border-left-color:var(--warn)}

/* Caja del código QR del servicio: el dibujo a la izquierda, el texto y
   los botones a la derecha. */
.qr-lienzo{width:172px;min-width:172px;padding:10px;border-radius:12px;
  background:#fff;display:flex;align-items:center;justify-content:center}
.qr-lienzo svg{width:100%;height:auto;display:block}
@media (max-width:640px){.qr-caja{flex-direction:column}.qr-lienzo{width:100%}}

/* Credencial recién creada: se muestra una sola vez, grande y legible,
   porque se va a dictar por radio o anotar en papel. */
.credencial{display:grid;gap:10px;margin:14px 0;padding:16px 18px;
  border:1px solid var(--linea);border-radius:14px;background:var(--fondo-2)}
.cred-l{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.cred-l span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.cred-l strong{font-size:24px;letter-spacing:.06em;user-select:all}

/* ─────────────────────────────────────────────────────────────
   Rejilla de grupos de cubredescansos

   Siete columnas angostas de lunes a domingo, con un punto en el día
   que descansa cada titular. El día libre y el del cubredescansos se
   marcan en el encabezado: de un vistazo se ve qué día quedó sin
   ocupar, que es el del propio cubre.
   ───────────────────────────────────────────────────────────── */
.rejilla-grupo th.dia,
.rejilla-grupo td.dia {
  width: 3.2rem;
  text-align: center;
  white-space: nowrap;
}
.rejilla-grupo th.dia { font-weight: 600; }
.rejilla-grupo th.dia-libre {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border-radius: 6px 6px 0 0;
}
.rejilla-grupo th.dia-cubre {
  background: color-mix(in srgb, var(--blue, #2b6cb0) 18%, transparent);
  border-radius: 6px 6px 0 0;
}
.rejilla-grupo td.marcado {
  color: var(--ok);
  font-size: 1.15rem;
  line-height: 1;
}
.rejilla-grupo td.acciones { white-space: nowrap; text-align: right; }

.grupo-cabeza {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}

/* Un grupo con vacante se pinta en rojo, como pidió Dirección: no es
   un error, es un aviso de que los descansos laborados van a subir. */
.card-alerta { border-left: 3px solid var(--alert); }

.acciones-fin { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* En pantalla chica la rejilla no se encoge: se desplaza. Siete
   columnas apretadas no se leen. */
.tabla-envoltura { overflow-x: auto; }

/* Lista de personas con casilla, para decidir a quién le toca un bono o
   un descuento. Va con casillas y no con un selector múltiple porque lo
   que se está decidiendo es a quién se le paga: eso se revisa leyendo
   nombres, no arrastrando el ratón sobre una lista. Con scroll propio
   para que el botón de guardar no se vaya de la pantalla. */
.lista-chk{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow-y:auto;
  border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface-2)}
.lista-chk .chk-linea{padding:6px 8px;border-radius:7px}
.lista-chk .chk-linea:hover{background:var(--surface)}

/* ── M2 · El ojo de la contraseña ────────────────────────────
   Una contraseña que nadie puede releer se teclea mal dos y tres veces.
   El botón va DENTRO del campo, a la derecha, y dice con palabras lo que
   va a hacer —"ver" / "ocultar"— en vez de un icono que hay que adivinar. */
.clave-caja{position:relative;display:block}
.clave-caja input{width:100%;padding-right:74px}
.clave-caja .ojo{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);padding:6px 8px;border-radius:6px;line-height:1}
.clave-caja .ojo:hover{color:var(--blue);background:var(--panel-2,rgba(0,0,0,.04))}
.clave-caja .ojo:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

/* ── Formatos que son un archivo ─────────────────────────────
   La tarjeta de un archivo no es un botón: trae varias acciones
   —descargar, ver versiones anteriores, actualizar, retirar— y un botón
   dentro de otro botón no es clicable en ningún navegador. */
.tarjeta-fmt.arch{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  text-align:left;cursor:default;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:13px}
.tarjeta-fmt.arch .fmt-i{color:var(--blue)}
.tarjeta-fmt.arch .fmt-x{font-size:11.5px;color:var(--text-soft);line-height:1.5}
.tarjeta-fmt.arch .fmt-acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}

/* ---------- cuadros que se despliegan (ui.seccionPlegable) ----------
   Llegan cerrados. El título sigue siendo la barra de siempre; lo que
   cambia es que se aprieta. */
details.plegable > summary{cursor:pointer;list-style:none;justify-content:flex-start;user-select:none}
details.plegable > summary::-webkit-details-marker{display:none}
details.plegable > summary::marker{content:''}
details.plegable:not([open]) > summary{border-bottom:0}
details.plegable > summary:hover{background:var(--surface-3, var(--line))}
details.plegable > summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.plg-flecha{display:inline-block;width:12px;color:var(--text-soft);transition:transform .15s ease}
details.plegable[open] .plg-flecha{transform:rotate(90deg)}
.plg-resumen{color:var(--text-soft);font-size:12.5px}
.plg-marca{margin-left:auto}
details.plegable > summary .card-acc{margin-left:auto}
details.plegable > summary .plg-marca + .card-acc{margin-left:8px}

/* el concentrado del estado de fuerza */
.fuerza td.num, .fuerza th.num{text-align:right}
.fuerza .origen{color:var(--text-soft);font-size:11.5px}
.fuerza .desglose{display:block;color:var(--text-soft);font-size:11px;font-weight:400}
.fuerza tr.sub td{border-top:1px solid var(--line);font-weight:700;background:var(--surface-2)}
.fuerza tr.total td{border-top:2px solid var(--text-soft);font-weight:800;font-size:14px}
.fuerza tr.bloque td{background:transparent;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);padding-top:14px}

/* ajuste 07 · un enlace con aspecto de botón (Ver la hoja, WhatsApp) */
a.btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center;justify-content:center}
a.btn.primary{color:#fff}

/* ── Ajuste 09E · el panel en el teléfono ──
   El menú lateral ocupaba 246 px fijos y al contenido le quedaban 144: las
   barras de filtros, las pestañas y los cuadros se salían de la pantalla.
   En pantallas angostas el menú se esconde y se abre con ☰. */
.btn-menu{display:none;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;font-size:18px;line-height:1;padding:6px 10px;cursor:pointer}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:-262px;top:0;width:246px;z-index:60;transition:left .2s ease;box-shadow:0 0 0 rgba(0,0,0,0)}
  body.menu-abierto .side{left:0;box-shadow:4px 0 24px rgba(0,0,0,.35)}
  body.menu-abierto::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55}
  .btn-menu{display:inline-block}
  .topbar{padding:10px 16px;gap:10px}
  .topbar .who > div:first-child{display:none}
  .content{padding:16px 16px 60px}
  .campo.compacto{min-width:0;flex:1 1 140px}
  .campo.compacto select,.campo.compacto input{width:100%;max-width:100%}
  .tabs{flex-wrap:nowrap}
}

/* ajuste 09F · un bloque con hidden se oculta aunque su clase diga display:grid */
[hidden] { display: none !important; }