/* BMC HR — tema e identidad, mismo sistema de diseño usado en la presentación aprobada. */
:root{
  --azul:#015287; --azul2:#0269AC; --azul-lt:#1E7BB5; --azul-dk:#0E3152;
  --grafito:#2B3A41;
  --fondo:#E6ECF2; --sup:#FFFFFF;
  --texto:#1A2A33; --tenue:#6B7A82;
  --borde:#C7D2DA; --borde2:#9FB0BC; --sel:#CFE0EF;
  --ok:#2E7D32; --okbg:#E6F3E8;
  --warn:#B26A00; --warnbg:#FBEFD9;
  --error:#B3261E; --errorbg:#FBE9E7;
  --violeta:#5B4B8A; --violetabg:#EEEAF7;
  --rail-w:238px; --top-h:58px;
  --radius:12px;
}
*{box-sizing:border-box}
/* El atributo hidden manda SIEMPRE (2026-08-11). El navegador lo aplica con un display:none de su
   hoja por defecto, y cualquier regla nuestra le gana — así que todo lo que tenga clase con display
   propio (.filter-row y .foot-note son display:flex) se seguía viendo aunque estuviera hidden.
   Se notó al construir Configuración > WhatsApp, pero ya pasaba en Configuración > Correo: los
   bloques de credenciales de Microsoft 365 y OAuth se mostraban con cualquier tipo de autenticación,
   pidiendo datos que ese modo no usa. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--fondo); color:var(--texto); font-size:14px; line-height:1.45;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
table{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--azul2); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important} }

.ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.15em;flex:none}
.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace}
.money{font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ============ LOGO / WORDMARK ============ */
.tile-logo{display:inline-flex; align-items:center; justify-content:center; flex:none; background:#fff; border-radius:8px; padding:4px}
.tile-logo svg{display:block}
.wordmark{display:flex; align-items:center; gap:10px}
.wordmark .txt{display:flex; flex-direction:column; line-height:1.1}
.wordmark .txt .b1{font-size:16px; font-weight:700; letter-spacing:.01em}
.wordmark .txt .b1 .hi{color:#EAF4FC}
.wordmark .txt .b2{font-size:10.5px; font-weight:500; letter-spacing:.02em; color:rgba(255,255,255,.78)}
.topbar .wordmark .txt .b1{color:#fff}

/* ============ LOGIN ============ */
#loginScreen,.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px;
  background:
    radial-gradient(680px 420px at 14% 12%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(720px 480px at 88% 92%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(135deg, var(--grafito) 0%, var(--azul-dk) 32%, var(--azul) 68%, var(--azul2) 100%);
  position:relative; overflow:hidden;
}
.login-card{
  background:var(--sup); border-radius:20px; width:100%; max-width:372px; padding:32px 28px;
  box-shadow:0 24px 60px rgba(3,20,32,.35); animation:fadeUp .5s ease both;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.login-card .brand{text-align:center; margin-bottom:22px; display:flex; flex-direction:column; align-items:center; gap:10px}
.login-card .brand .wordmark .txt .b1{color:var(--grafito)}
.login-card .brand .wordmark .txt .b1 .hi{color:var(--azul)}
.login-card .brand .wordmark .txt .b2{color:var(--tenue)}
.field{margin-bottom:14px}
.field label{display:block; font-size:12px; color:var(--tenue); margin-bottom:5px; font-weight:600}
.field input,.field select,.field textarea{width:100%; border:1px solid var(--borde); border-radius:9px; padding:11px 12px; font-size:14.5px; outline:none; background:var(--sup); color:var(--texto); font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--azul); box-shadow:0 0 0 3px rgba(1,82,135,.12)}
.field textarea{resize:vertical; min-height:64px}
.combo-buscable{position:relative}
.combo-buscable-list{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; max-height:240px; overflow-y:auto; background:var(--sup); border:1px solid var(--borde); border-radius:9px; box-shadow:0 8px 20px rgba(0,0,0,.12); padding:4px}
.combo-buscable-opt{padding:8px 10px; border-radius:6px; font-size:13.5px; cursor:pointer}
.combo-buscable-opt:hover,.combo-buscable-opt.hi{background:var(--sel)}
.combo-buscable-empty{padding:8px 10px; font-size:13px; color:var(--tenue)}
.dual-list{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:start}
.dual-list-panel{border:1px solid var(--borde); border-radius:9px; max-height:320px; overflow-y:auto; background:var(--sup)}
.dual-list-item{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; font-size:13px; border-bottom:1px solid var(--fondo)}
.dual-list-item:last-child{border-bottom:none}
.dual-list-empty{padding:16px 10px; font-size:12.5px; color:var(--tenue); text-align:center}
.dual-list-btn{background:none; border:none; color:var(--azul2); font-size:12px; font-weight:600; cursor:pointer; padding:2px 4px; white-space:nowrap}
.dual-list-btn:hover{text-decoration:underline}
.dual-list-mid{align-self:center; display:flex; flex-direction:column; gap:8px}
.dual-list-group-label{padding:6px 10px 3px; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--tenue); background:var(--fondo)}
.login-hint{font-size:11.5px; color:var(--tenue); margin-top:-6px; margin-bottom:16px}
.login-error{background:var(--errorbg); color:var(--error); border:1px solid #F0C6C0; border-radius:8px; padding:9px 12px; font-size:13px; margin-bottom:14px}
/* Mi cuenta / restablecer contraseña (2026-10-09) */
.cuenta-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; align-items:start}
.cuenta-tit{margin:0 0 6px; font-size:15px; color:var(--grafito)}
.cuenta-nota{margin:0 0 14px; font-size:12.5px; color:var(--tenue); line-height:1.45}
.check-rol{display:flex; align-items:baseline; gap:6px; font-size:13px; margin:4px 0; cursor:pointer}
.check-rol input{width:auto; margin:0}
.check-rol span{color:var(--tenue); font-size:12px}
.reglas-clave{list-style:none; margin:-4px 0 16px; padding:0; font-size:12px; color:var(--tenue)}
.reglas-clave li{position:relative; padding-left:20px; margin-bottom:4px; line-height:1.4}
.reglas-clave li::before{content:"○"; position:absolute; left:2px; top:0}
.reglas-clave li.ok{color:var(--ok)}
.reglas-clave li.ok::before{content:"✓"; font-weight:700}
.login-cert{font-size:11.5px; line-height:1.45; color:var(--tenue); border-top:1px solid var(--borde); margin-top:16px; padding-top:12px}
.login-cert a{color:var(--azul2); text-decoration:underline}
.login-cert summary{cursor:pointer; color:var(--azul2); margin-top:6px}
.login-cert ul{margin:6px 0 0; padding-left:16px}
.login-cert li{margin-bottom:4px}
.btn{border:none; border-radius:9px; padding:12px 16px; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .12s,box-shadow .12s}
.btn-primary{background:var(--azul); color:#fff}
.btn-primary:hover{background:var(--azul2)}
.btn-outline{background:var(--sup); color:var(--azul); border:1px solid var(--azul)}
.btn-outline:hover{background:var(--sel)}
.btn-ghost{background:transparent; color:var(--tenue); border:1px solid transparent}
.btn-ghost:hover{background:var(--fondo); color:var(--texto)}
.btn-sm{padding:7px 11px; font-size:12.5px; border-radius:7px}
.btn-block{width:100%}
.btn:disabled{opacity:.45; cursor:default}

/* ============ APP SHELL ============ */
.topbar{position:fixed; top:0; left:0; right:0; height:var(--top-h); z-index:50;
  background:linear-gradient(100deg, var(--azul) 0%, var(--azul2) 100%); color:#fff;
  display:flex; align-items:center; gap:16px; padding:0 16px; box-shadow:0 2px 10px rgba(1,40,66,.25)}
.topbar .hamb{display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px}
.topbar .spacer{flex:1}
.user-chip{display:flex; align-items:center; gap:8px; font-size:12.5px; color:inherit; text-decoration:none; border-radius:10px; padding:3px 6px}
a.user-chip:hover{background:rgba(255,255,255,.12)}
.user-chip .av{width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11.5px}
.user-chip .who b{display:block; font-size:12.5px}
.user-chip .who span{display:block; font-size:11px; color:rgba(255,255,255,.75)}

.shell{display:flex; padding-top:var(--top-h)}
.content{flex:1; min-width:0; margin-left:var(--rail-w); padding:24px 28px 60px; min-height:calc(100vh - var(--top-h))}
.rail{position:fixed; top:var(--top-h); left:0; width:var(--rail-w); height:calc(100vh - var(--top-h));
  background:var(--sup); border-right:1px solid var(--borde); overflow-y:auto; z-index:45; padding:14px 0 90px}
.rail .sec{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--tenue); font-weight:700; padding:16px 20px 6px}
.rail a{display:flex; align-items:center; gap:12px; padding:10px 20px; font-size:13.5px; color:var(--texto); border-left:3px solid transparent; cursor:pointer}
.rail a .ic{color:var(--azul)}
.rail a:hover{background:var(--fondo)}
.rail a.active{background:var(--sel); border-left-color:var(--azul); font-weight:700; color:var(--azul-dk)}
.rail a.active .ic{color:var(--azul)}
.backdrop{display:none; position:fixed; inset:var(--top-h) 0 0 0; background:rgba(43,58,65,.45); z-index:44}

.screen-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.page-title{font-size:21px; font-weight:700; color:var(--grafito); margin-bottom:4px}
.page-sub{font-size:13px; color:var(--tenue)}
.screen-actions{display:flex; gap:10px; flex-wrap:wrap}

/* ============ COMPONENTS ============ */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:20px}
.kpi{background:var(--sup); border:1px solid var(--borde); border-radius:var(--radius); padding:16px 18px; position:relative; overflow:hidden}
.kpi .lbl{font-size:11.5px; color:var(--tenue); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px}
.kpi .val{font-size:26px; font-weight:800; color:var(--grafito); font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px; color:var(--tenue); margin-top:4px}
.kpi .accent{position:absolute; top:0; left:0; width:4px; height:100%}
.kpi.a1 .accent{background:var(--azul)} .kpi.a2 .accent{background:var(--ok)} .kpi.a3 .accent{background:var(--warn)} .kpi.a4 .accent{background:var(--violeta)}

.grid-2{display:grid; grid-template-columns:1.5fr 1fr; gap:16px}
@media (max-width:1000px){.grid-2{grid-template-columns:1fr}}
.card-surface{background:var(--sup); border:1px solid var(--borde); border-radius:var(--radius); padding:18px}
.card-surface h2{font-size:13.5px; color:var(--grafito); margin-bottom:2px; font-weight:700}
.card-surface .h-sub{font-size:11.5px; color:var(--tenue); margin-bottom:16px}

.chip{font-size:10.5px; padding:3px 10px; border-radius:20px; font-weight:700; display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
/* Alertas de planilla (pedido explícito del usuario 2026-07-18): a diferencia de los badges de
   estado, un texto de alerta largo debe envolver dentro de la celda en vez de empujar toda la
   tabla a scroll horizontal — no se toca .chip porque el resto de badges sí deben quedar en una
   línea. */
.chip-alerta{white-space:normal; max-width:260px; word-break:break-word; text-align:left}
.chip-ok{color:var(--ok); background:var(--okbg)}
.chip-warn{color:var(--warn); background:var(--warnbg)}
.chip-error{color:var(--error); background:var(--errorbg)}
.chip-info{color:var(--azul2); background:#DDEEF9}
.chip-violeta{color:var(--violeta); background:var(--violetabg)}
.chip-grey{color:var(--tenue); background:#EDF1F4}

.tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap}
.tab{padding:8px 15px; border:1px solid var(--borde); border-radius:20px; font-size:12.5px; font-weight:600; background:var(--sup); color:var(--texto); cursor:pointer}
.tab:hover{background:var(--sel)}
.tab.active{background:var(--azul); color:#fff; border-color:var(--azul)}

table.data{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
table.data th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--tenue); font-weight:700; padding:0 12px 10px; border-bottom:1px solid var(--borde)}
table.data td{padding:12px; border-bottom:1px solid var(--fondo); vertical-align:middle}
table.data th.num,table.data td.num{text-align:right}
table.data tbody tr{transition:background .1s}
table.data tbody tr[data-href]{cursor:pointer}
table.data tbody tr[data-href]:hover{background:var(--fondo)}
/* Filas más angostas para grillas de captura densa (muchas filas visibles a la vez, ej. Detalle de
   horas en Planilla) — el padding de 12px de .data se siente demasiado espaciado con inputs cortos. */
table.data.tabla-compacta td{padding:4px 12px}
table.data.tabla-compacta th{padding-bottom:6px}
/* Tablas angostas lado a lado (ej. Ingreso/Deducción del detalle de comprobante en un popup) — sin
   esto, cada tabla heredaba el min-width:640px de .data y dos side-by-side desbordaban el modal
   generando una barra de desplazamiento horizontal que sacaba el Monto de la vista. */
table.data.tabla-mini{min-width:0; font-size:12.5px}
table.data.tabla-mini td{padding:6px 10px}
table.data.tabla-mini th{padding:0 10px 6px}
.namecell{display:flex; align-items:center; gap:10px}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--sel); color:var(--azul-dk); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; flex:none}
.namecell .nm{font-weight:600; color:var(--texto); font-size:13px}
.namecell .id{font-size:11px; color:var(--tenue)}
.row-actions{display:flex; gap:6px}
.row-actions button,.row-actions .abtn{border:1px solid var(--borde); background:var(--sup); border-radius:7px; padding:5px 11px; font-size:11.5px; font-weight:700; cursor:pointer}
.row-actions .btn-approve{color:var(--ok); border-color:#BEDFC3}
.row-actions .btn-approve:hover{background:var(--okbg)}
.row-actions .btn-reject{color:var(--error); border-color:#F0C6C0}
.row-actions .btn-reject:hover{background:var(--errorbg)}
.row-actions button:disabled{opacity:.4; cursor:default}
.progress{height:6px; border-radius:4px; background:var(--fondo); overflow:hidden; width:100px}
.progress i{display:block; height:100%; background:var(--azul2); border-radius:4px}

.searchbar{display:flex; align-items:center; gap:8px; background:var(--sup); border:1px solid var(--borde); border-radius:9px; padding:9px 13px; color:var(--tenue); margin-bottom:16px; max-width:420px}
.searchbar input{border:none; outline:none; flex:1; font-size:13.5px; color:var(--texto); background:transparent}
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:flex-end}
/* Dentro de filter-row, searchbar queda junto a selects .field (que ya traen margin-bottom:0
   inline) — el margin-bottom:16px de .searchbar de arriba no se cancela con el de ellos, así que
   align-items:flex-end (alinea por el margin box) deja el searchbar ~15px más arriba que el
   select vecino. La fila ya tiene su propio margin-bottom:16px para el espacio antes de la tabla. */
.filter-row .searchbar{margin-bottom:0}

.tag-co{font-size:11px; font-weight:700; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); padding:5px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:6px}
.page-sub .tag-co{color:var(--azul-dk); background:var(--sel); border-color:transparent}

/* stepper */
.stepper{display:flex; align-items:center; margin:4px 0 18px}
.step{display:flex; align-items:center; gap:8px; flex:1; position:relative}
.step .dot{width:26px; height:26px; border-radius:50%; background:var(--fondo); border:2px solid var(--borde2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--tenue); flex:none; z-index:1}
/* fondo sólido (mismo que .card-surface) detrás de la etiqueta: la línea conectora de abajo pasa
   por el mismo alto que el texto (::after, top:13px) — sin este fondo, la línea se ve "encima" de
   las letras como un tachado en vez de quedar detrás, ilegible (reportado 2026-07-12). */
.step .lbl{font-size:11.5px; color:var(--tenue); font-weight:600; position:relative; z-index:1; background:var(--sup); padding-right:6px}
.step::after{content:""; position:absolute; top:13px; left:38px; right:-8px; height:2px; background:var(--borde); z-index:0}
.step:last-child::after{display:none}
.step.done .dot{background:var(--ok); border-color:var(--ok); color:#fff}
.step.done .lbl{color:var(--texto)}
.step.done::after{background:var(--ok)}
.step.current .dot{background:var(--azul); border-color:var(--azul); color:#fff}
.step.current .lbl{color:var(--azul-dk); font-weight:800}

/* asiento */
.asiento-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:800px){.asiento-cols{grid-template-columns:1fr}}
.asiento-col h3{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--tenue); font-weight:700; margin-bottom:10px}
.ledger-row{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--fondo); font-size:12.5px}
.ledger-row .ac{color:var(--tenue); font-size:11px}
.ledger-row .nm{color:var(--texto)}
.ledger-row .amt{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.ledger-total{display:flex; justify-content:space-between; padding-top:12px; margin-top:4px; border-top:2px solid var(--grafito); font-weight:800; font-size:13.5px}
.balance-ok{display:flex; align-items:center; gap:7px; color:var(--ok); font-size:12px; font-weight:700; margin-top:12px; background:var(--okbg); padding:8px 12px; border-radius:8px}
.balance-bad{display:flex; align-items:center; gap:7px; color:var(--error); font-size:12px; font-weight:700; margin-top:12px; background:var(--errorbg); padding:8px 12px; border-radius:8px}

/* payslip */
.payslip{background:var(--sup); border:1px solid var(--borde); border-radius:14px; max-width:640px; overflow:hidden}
.payslip .ps-head{background:var(--grafito); color:#fff; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.payslip .ps-head .co{font-size:12.5px; font-weight:700}
.payslip .ps-head .per{font-size:11px; color:rgba(255,255,255,.7)}
.payslip .ps-body{padding:20px 22px}
.ps-net{display:flex; justify-content:space-between; align-items:center; background:var(--fondo); border-radius:10px; padding:14px 18px; margin-top:16px}
.ps-net .lbl{font-size:12px; color:var(--tenue); font-weight:700; text-transform:uppercase}
.ps-net .val{font-size:24px; font-weight:800; color:var(--azul-dk)}
.ps-actions{display:flex; gap:10px; padding:16px 22px; border-top:1px solid var(--borde); background:#FBFCFD}

.foot-note{font-size:11.5px; color:var(--tenue); background:var(--fondo); border-radius:8px; padding:10px 13px; margin-top:14px; display:flex; gap:8px; align-items:flex-start}

/* modal genérico ("Ver Detalle", etc.) — el display:flex va en :not([hidden]), nunca en la clase
   base: si se pone ahí, gana por especificidad sobre la regla nativa [hidden]{display:none} del
   user-agent y el modal queda visible desde que carga la página, tapando todo detrás (bug real
   encontrado 2026-07-12: el modal aparecía solo, atascado en "Cargando...", sin poder cerrarlo). */
.bmc-modal-overlay{position:fixed; inset:0; background:rgba(20,28,33,.55); z-index:80; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto}
.bmc-modal-overlay:not([hidden]){display:flex}
.bmc-modal-box{width:100%; max-width:920px; max-height:calc(100vh - 80px); overflow-y:auto}
.bmc-modal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--borde)}

/* campos de monto (₡): alineados a la derecha, con separador de miles al digitar — ver app.js */
input[data-money]{text-align:right; font-variant-numeric:tabular-nums}
.foot-note .ic{flex:none; margin-top:1px; color:var(--azul2)}

.backlink{display:inline-flex; align-items:center; gap:6px; color:var(--azul); font-size:12.5px; font-weight:700; cursor:pointer}
.backlink:hover{text-decoration:underline}
.dfield{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--fondo); font-size:12.5px}
.dfield span:first-child{color:var(--tenue)}
.dfield span:last-child{font-weight:600; text-align:right}

@media (max-width:900px){
  .topbar .hamb{display:block}
  .content{margin-left:0; padding:18px 16px 70px}
  .rail{transform:translateX(-100%); transition:transform .2s ease}
  body.drawer-open .rail{transform:translateX(0)}
  body.drawer-open .backdrop{display:block}
}
/* Variables de plantilla (Config › Plantillas): fichas clicables que se copian al portapapeles.
   Las obligatorias van en azul de marca para que se distinga de un vistazo cuáles no se pueden
   quitar del documento. */
.var-chip{font-size:11.5px; padding:3px 8px; border-radius:6px; background:#EDF1F4; color:var(--tenue);
          border:1px solid var(--borde); cursor:pointer; user-select:all}
.var-chip:hover{background:#DDEEF9; color:var(--azul2)}
.var-chip-req{background:#DDEEF9; color:var(--azul2); border-color:var(--azul); font-weight:700}

@media print{
  .topbar,.rail,.backdrop,.no-print{display:none !important}
  .content{margin:0 !important; padding:0 !important}
  body{background:#fff}
}