/* Componentes propios del sistema de planillas. La base visual (marca, botones, tarjetas, hojas) viene de styles.css, igual que en Compras. */
.p-borrador{background:var(--grey-bg);color:var(--grey)}
.p-enviada{background:var(--amber-bg);color:var(--amber)}
.p-pagada{background:var(--blue-bg);color:var(--blue)}
.steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:6px 0 14px}
.view > * + *{margin-top:16px}
.vt{margin:0;font-size:20px;color:var(--ink)}
.hint{color:var(--muted);font-size:13px}
.nw{white-space:nowrap}
.r{text-align:right}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--accent);font-weight:650;cursor:pointer;text-align:left}
.lnk:hover{text-decoration:underline}
.inline{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.inline input,.inline select,.tools select,.tools input[type=month],.tools input[type=date]{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 9px;font:inherit;font-size:14px}
.tools select{max-width:220px}

/* segmentado (subpestañas) */
.seg{display:inline-flex;gap:2px;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:3px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:7px 12px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.seg button .ic{width:15px;height:15px}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(6,25,40,.12)}
.seg.wide{display:flex;width:100%;overflow-x:auto;flex-wrap:nowrap}
.seg.wide button{flex:none}
.sheet .seg{margin-bottom:14px}

/* pestañas: con 7–8 secciones se desplazan en lugar de apretarse */
.tabs{overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none}
@media (max-width:720px){
  .tabs[data-n="6"] .tab,.tabs[data-n="7"] .tab,.tabs[data-n="8"] .tab{min-width:64px}
  .tabs[data-n="7"],.tabs[data-n="8"]{justify-content:flex-start}
  .tabs .tab .tl{font-size:10.5px}
}

/* portal */
.hello h2{margin:4px 0 0;font-size:24px;color:var(--ink)}
.hello .sub{margin:2px 0 0}
.stat .v.sm{font-size:21px}
.stat .k .ic{width:15px;height:15px;vertical-align:-2px}
.stat-vac .v{color:var(--accent)}
div.stat{cursor:default}
.quick{display:flex;gap:10px;flex-wrap:wrap}
.mini{display:flex;flex-direction:column;gap:2px;margin:6px 0 10px}
.mrow{display:flex;gap:10px;align-items:center;padding:8px 6px;border-radius:10px;background:none;border:0;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer}
button.mrow:hover{background:var(--sunk)}
div.mrow{cursor:default;justify-content:space-between}
.mrow .mi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.mrow .mm{display:flex;flex-direction:column;min-width:0;flex:1}
.mrow .mm b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .mm small{color:var(--muted);font-size:12.5px}
.card h2 .ic{width:18px;height:18px;vertical-align:-3px;color:var(--brand-teal)}
.kv2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kv .tot dd{font-size:18px;color:var(--accent)}
.kv .span2{grid-column:span 2}
.list.flat .row{cursor:default}
.list .row.cp-row,.list.flat .row{grid-template-columns:minmax(0,1fr) auto auto}
.row .amt small{display:block;color:var(--muted);font-size:11.5px;font-weight:400}
.bar{height:6px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden;max-width:220px}
.bar i{display:block;height:100%;background:var(--brand-teal);border-radius:3px}
td .bar{margin-left:auto;max-width:120px}

/* lista de planillas */
.row.pl-row,.list > .row.head{grid-template-columns:150px 150px 80px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:760px){
  .list > .row.head{display:none}
  .row.pl-row{grid-template-columns:1fr 1fr;row-gap:4px}
  .row.pl-row [data-l]::before{content:attr(data-l) " ";color:var(--muted);font-size:11.5px;display:block}
  .row.pl-row .r{text-align:left}
}

/* detalle de planilla */
.pl-head{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.pl-title h2{margin:0;font-size:22px;color:var(--ink)}
.pl-title .sub{margin:2px 0 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pl-title input[type=date]{border:1px solid var(--line);border-radius:6px;padding:2px 6px;font:inherit;background:var(--surface);color:var(--ink)}
.pl-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.pl-kpis .kpi b{font-size:19px}
.kpi.hl{background:var(--accent-soft);border-color:transparent}
.kpi.hl b{color:var(--accent)}
@media (max-width:1100px){.pl-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.pl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-acts{justify-content:flex-start;flex-wrap:wrap}
.pl-tools{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.pl-tools .dl{display:flex;gap:6px;flex-wrap:wrap}
.pl-box{max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.pltab{border-collapse:separate;border-spacing:0;width:100%;min-width:1280px;font-size:13.5px}
.pltab th,.pltab td{padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.pltab thead th{position:sticky;top:0;z-index:2;background:var(--sunk);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:650}
.pltab .sticky{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;min-width:210px;max-width:260px;white-space:normal;box-shadow:1px 0 0 var(--line)}
.pltab thead .sticky{z-index:3;background:var(--sunk)}
.pltab tbody th small{display:block;color:var(--muted);font-weight:400;font-size:11.5px}
.pltab tbody th small .ic{width:12px;height:12px;vertical-align:-2px}
.pltab tfoot td,.pltab tfoot th{position:sticky;bottom:0;background:var(--sunk);font-weight:700;border-top:2px solid var(--line)}
.pltab input.n{width:64px;text-align:right;border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit;background:var(--sunk);color:var(--ink)}
.pltab input.n:focus{outline:2px solid var(--brand-teal);background:var(--surface)}
.pltab input.ok{animation:okfx 1s ease-out}
@keyframes okfx{from{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-teal) 60%,transparent)}to{box-shadow:none}}
.pltab tr.saving{opacity:.55}
.pltab tr.alerta .sticky{box-shadow:inset 4px 0 0 var(--amber),1px 0 0 var(--line)}
.pltab tbody tr:hover td,.pltab tbody tr:hover th{background:var(--sunk)}
.sheet.wide{max-width:980px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.cols2{grid-template-columns:1fr}}
.calc > div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.calc > div span{color:var(--ink)}
.calc > div.tot{border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-top:4px;padding-top:6px;font-weight:700}
.calc > div.neg b{color:var(--red)}
.neto-box{display:flex;justify-content:space-between;align-items:center;background:var(--accent-soft);border-left:5px solid var(--brand-teal);border-radius:8px;padding:12px 16px;margin:12px 0;font-weight:700}
.neto-box b{font-size:22px;color:var(--accent)}
.orig{margin:0;padding-left:18px;font-size:13.5px}
.items.cc input,.items.cc select{width:100%}
.items.cc td:nth-child(3){width:140px}

/* formulario de solicitud */
.tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.tipo input{position:absolute;opacity:0;pointer-events:none}
.tipo span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:1.5px solid var(--line);border-radius:12px;font-weight:650;cursor:pointer;background:var(--surface);text-align:center}
.tipo span .ic{width:24px;height:24px;color:var(--muted)}
.tipo input:checked + span{border-color:var(--brand-teal);background:var(--accent-soft);color:var(--accent)}
.tipo input:checked + span .ic{color:var(--brand-teal)}
.tipo input:focus-visible + span{outline:2px solid var(--brand-teal);outline-offset:2px}
.tipo input:disabled + span{cursor:default;opacity:.7}
.calc-box:empty{display:none}
.calc-box{background:var(--sunk);border-radius:10px;padding:10px 14px;margin:6px 0 4px;font-size:14px}
.calc-box > div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.calc-box > div.neg b{color:var(--red)}
.calc-box p{margin:6px 0 0}
.det-acts{justify-content:flex-start;flex-wrap:wrap;margin:12px 0}
.msg .ic{width:14px;height:14px;vertical-align:-2px}

/* calendario */
.cal-card h2{margin:0}
.cal-h{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.cal-h h2{min-width:170px;text-align:center}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cw{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650;text-align:center;padding:4px 0}
.cd{min-height:86px;border:1px solid var(--line);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:2px;background:var(--surface);min-width:0}
.cd.out{background:none;border-color:transparent}
.cd.dom{background:var(--sunk)}
.cd.fer{background:color-mix(in srgb,var(--brand-orange) 10%,var(--surface))}
.cd.hoy{border-color:var(--brand-teal);box-shadow:inset 0 0 0 1px var(--brand-teal)}
.cd .dn{font-size:12px;font-weight:700;color:var(--muted)}
.cd .fn{font-size:10.5px;color:var(--amber);line-height:1.2}
.ev{border:0;border-radius:5px;padding:1px 5px;font:inherit;font-size:11.5px;font-weight:650;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.t-vacaciones{background:#0a7a70}
.t-permiso_con_goce{background:#084059}
.t-incapacidad{background:#b34205}
.ev.pend{opacity:.55;outline:1px dashed currentColor}
.lg.t-vacaciones{background:#0a7a70}.lg.t-permiso_con_goce{background:#084059}.lg.t-incapacidad{background:#b34205}
.lg.lg-pend{background:var(--line);outline:1px dashed var(--muted)}
.cal-card .legend{margin-top:10px}
.cal-list{display:none}
@media (max-width:720px){
  .cal{display:none}
  .cal-list{display:flex;flex-direction:column;gap:2px}
}

/* tablero */
.bars{display:flex;align-items:flex-end;gap:10px;height:220px;padding:10px 4px 0;border-bottom:1px solid var(--line)}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;position:relative}
.bstack{width:100%;max-width:46px;display:flex;flex-direction:column-reverse;border-radius:6px 6px 0 0;overflow:hidden;min-height:2px}
.bstack i{display:block;min-height:1px}
.b-sal{background:var(--brand-navy)}
.b-pat{background:var(--brand-teal)}
.b-prov{background:#8cc3df}
:root[data-theme="dark"] .b-sal{background:#3b82a6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .b-sal{background:#3b82a6}}
.bv{font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap}
.bl{font-size:11px;color:var(--ink);font-weight:600;position:absolute;bottom:-22px;white-space:nowrap}
.card .bars + .legend{margin-top:30px}
.lg.b-sal{background:var(--brand-navy)}.lg.b-pat{background:var(--brand-teal)}.lg.b-prov{background:#8cc3df}
.dash-grid > .card{min-width:0}
.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.dash-grid{grid-template-columns:minmax(0,1fr)}}
.kpis.kp3{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px}

/* tablas de reportes */
.utable tr[data-col],.utable tr[data-id],.utable.log tr[data-sol]{cursor:pointer}
.utable tr[data-col]:hover td,.utable tr[data-id]:hover td,.utable.log tr[data-sol]:hover td{background:var(--sunk)}
.utable tr.strong td{font-weight:700}
.utable tfoot td{font-weight:700;border-top:2px solid var(--line)}
.utable.log td{font-size:13.5px;vertical-align:top}
.agui .sticky{position:sticky;left:0;background:var(--surface);z-index:1;text-align:left;font-weight:600}
.agui thead .sticky{background:var(--sunk)}
.agui td.falta{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);cursor:pointer;text-align:center;font-weight:700}
.agui td.manual{background:color-mix(in srgb,var(--brand-teal) 12%,transparent);cursor:pointer}
.agui td.parcial{font-style:italic;color:var(--muted)}
.agui td.na{background:var(--sunk)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px}
.sw.manual{background:color-mix(in srgb,var(--brand-teal) 30%,transparent)}
.sw.parcial{border:1px dashed var(--muted)}

/* ajustes */
.items.cfg input{width:100%}
.items.cfg input[type=checkbox]{width:auto}
.dias{display:flex;gap:12px;flex-wrap:wrap;padding-top:6px}
.sticky-save{position:sticky;bottom:12px;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
@media (max-width:720px){.sticky-save{bottom:84px}}
h3.sec{margin:20px 0 8px;font-size:15px}

@media print{.top,.tabs,.toolbar,.pl-acts,.actions,#notices{display:none!important}.pl-box{max-height:none;overflow:visible}}
.legend > span{display:inline-flex;align-items:center}
.dash-grid .utable{min-width:0}
.utable th.r,.utable td.r{text-align:right}
.field > label.check,.check{display:inline-flex;flex-direction:row;gap:8px;align-items:center;font-weight:500}
.field > label.check input{width:auto}
.card > label.btn,.field > label.btn{display:inline-flex;width:auto;align-self:flex-start}
.row .id:has(> .ic){display:flex;gap:8px;align-items:flex-start}.row .id > .ic{flex:none;margin-top:2px;color:var(--brand-teal)}