:root { --azul:#1F4E79; --azul2:#2E75B6; --claro:#EAF1F8; --gris:#6b7280; --borde:#d7dee6; --verde:#2e7d32; --rojo:#c62828; --fondo:#f6f8fb; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:#1b2733; background:var(--fondo); }
a { color:var(--azul2); text-decoration:none; } a:hover { text-decoration:underline; }
main { padding:18px 22px 60px; max-width:1500px; margin:auto; }
h1 { font-size:22px; margin:6px 0 10px; color:var(--azul); } h2 { font-size:17px; margin:26px 0 8px; color:var(--azul); } h3 { font-size:14px; margin:16px 0 6px; color:var(--azul2); text-transform:uppercase; letter-spacing:.03em; }
.gris { color:var(--gris); } small { color:var(--gris); }
.barra { display:flex; align-items:center; gap:22px; background:var(--azul); color:#fff; padding:10px 22px; flex-wrap:wrap; }
.barra a { color:#dbe8f5; } .barra nav { display:flex; gap:6px 16px; flex:1; flex-wrap:wrap; } .barra nav a { font-weight:600; }
.marca { font-weight:800; letter-spacing:.08em; } .marca span { display:block; font-weight:400; font-size:11px; letter-spacing:0; color:#b9cde2; }
.yo { font-size:12px; } .yo small { color:#b9cde2; }
.aviso { padding:9px 12px; border-radius:6px; margin:8px 0; background:#e8f5e9; border:1px solid #b7dfb9; }
.aviso.error { background:#fdecea; border-color:#f5c2c0; }
button, .boton { background:var(--azul2); color:#fff; border:0; border-radius:6px; padding:8px 14px; font:inherit; font-weight:600; cursor:pointer; display:inline-block; }
@media (hover: hover) and (pointer: fine) { button:hover, .boton:hover { filter:brightness(1.08); text-decoration:none; } }
.boton:hover { text-decoration:none; }
button.sec, .boton.sec { background:#fff; color:var(--azul2); border:1px solid var(--azul2); }
button.rojo { background:var(--rojo); }
input, select { font:inherit; padding:5px 7px; border:1px solid var(--borde); border-radius:5px; background:#fff; }
input:focus, select:focus { outline:2px solid #9cc3e8; border-color:var(--azul2); }
label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:#40505f; font-weight:600; }
.tarjeta { background:#fff; border:1px solid var(--borde); border-radius:10px; padding:14px 16px; margin:10px 0; }
.angosta { max-width:380px; } .angosta label { margin-bottom:10px; }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px 14px; align-items:end; }
.rejilla .ancho { grid-column:1 / -1; }
.tabla { border-collapse:collapse; width:100%; background:#fff; border:1px solid var(--borde); }
.tabla th { background:var(--claro); color:var(--azul); text-align:left; font-size:12px; padding:7px 8px; border-bottom:1px solid var(--borde); vertical-align:bottom; }
.tabla td { padding:6px 8px; border-bottom:1px solid #eef1f5; vertical-align:top; }
.tabla.compacta td, .tabla.compacta th { padding:4px 6px; }
.tabla tr.sel td { background:#fffbe6; } .tabla tr.egresado td { color:#9aa3ad; font-style:italic; }
.tabla tr.nuevo td { background:#f7fbff; }
.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.totales td { font-weight:700; background:var(--claro); border-top:2px solid var(--azul2); }
.res th.tot, .res td.tot { background:#f2f7fc; font-weight:700; } .res td.neto { color:var(--verde); }
.estado { font-size:11px; font-weight:700; padding:2px 7px; border-radius:10px; background:#e5e7eb; }
.estado.PROCESADO { background:#e8f5e9; color:var(--verde); } .estado.ABIERTO { background:#fff4e5; color:#b45309; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin:14px 0; }
.kpi { background:#fff; border:1px solid var(--borde); border-radius:10px; padding:12px 14px; } .kpi b { display:block; font-size:19px; color:var(--azul); }
.cab { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.filtros { display:flex; gap:8px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.botones { display:flex; gap:10px; margin:14px 0; flex-wrap:wrap; }
.pasos { background:#fff; border:1px solid var(--borde); border-radius:10px; padding:10px 14px; margin-bottom:12px; display:grid; grid-template-columns:1fr auto; gap:8px; }
.pasos .per b { font-size:15px; color:var(--azul); margin-right:8px; } .pasos .per small { display:block; }
.pasos .tasa { display:flex; gap:8px; align-items:end; }
.pasos ol { grid-column:1 / -1; display:flex; list-style:none; padding:0; margin:4px 0 0; gap:6px; flex-wrap:wrap; }
.pasos li a { display:block; padding:6px 12px; border-radius:6px; background:var(--claro); font-weight:600; }
.pasos li.act a { background:var(--azul2); color:#fff; }
.desliza { overflow-x:auto; border-radius:8px; }
.asis { border-collapse:collapse; background:#fff; font-size:12px; }
.asis th, .asis td { border:1px solid #e3e8ee; padding:0; text-align:center; }
.asis th { background:var(--claro); padding:3px 2px; min-width:30px; font-size:11px; }
.asis td.fijo, .asis th.fijo { position:sticky; left:0; background:#fff; text-align:left; padding:4px 8px; min-width:220px; z-index:1; }
.asis th.fijo { background:var(--claro); }
.asis .fuera { background:#eceff3; } .asis .fuera input { background:#eceff3; }
.asis .sincontrato { color:#9aa3ad; text-align:center; background:repeating-linear-gradient(45deg,#eceff3,#eceff3 4px,#f6f7f9 4px,#f6f7f9 8px); }
.asis td.n { padding:3px 6px; }
.asis input.c { width:32px; border:0; border-radius:0; text-align:center; padding:6px 0; font-weight:700; }
.rojo-t { color:var(--rojo); font-weight:700; }
.nov input { padding:4px 5px; }
.indice { margin-bottom:6px; }
.guia li { margin-bottom:4px; }
.leyenda { margin-top:14px; } .peligro { margin-top:20px; display:flex; gap:10px; align-items:center; }
.login { max-width:340px; margin:10vh auto; background:#fff; padding:26px; border-radius:12px; border:1px solid var(--borde); }
.login label { margin-bottom:12px; } .login button { width:100%; padding:10px; }
/* recibos */
.recibo { position:relative; background:#fff; border:1px solid #9aa9b8; padding:14px 18px; margin:0 auto 18px; max-width:780px; page-break-inside:avoid; overflow:hidden; }
.recibo header { display:flex; justify-content:space-between; border-bottom:2px solid var(--azul); padding-bottom:6px; margin-bottom:6px; } .recibo .der { text-align:right; }
.recibo table { width:100%; border-collapse:collapse; font-size:12px; }
.recibo .datos td { padding:2px 0; }
.recibo .lineas th { background:var(--claro); text-align:left; padding:4px; border:1px solid #c9d3de; }
.recibo .lineas td { padding:3px 4px; border:1px solid #e1e6ec; }
.recibo .neto td { font-weight:800; font-size:13px; background:#e8f5e9; }
.recibo .firmas { display:flex; justify-content:space-around; text-align:center; font-size:11px; margin-top:16px; }
.marca-agua { position:absolute; top:40%; left:20%; font-size:70px; color:rgba(198,40,40,.12); transform:rotate(-20deg); font-weight:900; pointer-events:none; }
.solo-print { display:none; }
@media print {
  body { background:#fff; } main { padding:0; max-width:none; }
  .no-print, .barra, .pasos { display:none !important; } .solo-print { display:block; }
  .recibo { border:1px solid #777; margin:0 0 10px; max-width:none; }
  .recibo:nth-of-type(2n) { page-break-after:always; }
  .tabla { font-size:9px; } .desliza { overflow:visible; }
  @page { size: letter; margin: 10mm; }
}
@media (max-width:700px) { main { padding:12px; } .pasos { grid-template-columns:1fr; } .pasos .tasa { flex-wrap:wrap; } }
.res td:nth-child(2) { min-width:200px; }
/* ---- listin (formato "Recibo de Pago Resumido" del Excel), original y copia por hoja ---- */
.hoja-listin { background:#fff; max-width:800px; margin:0 auto 20px; border:1px solid #c9d3de; padding:0 14px; }
.listin { position:relative; font:11px/1.35 Arial, Helvetica, sans-serif; color:#000; padding:12px 0 8px; overflow:hidden; }
.listin + .listin { border-top:2px dashed #555; }
.l-cab { text-align:center; position:relative; } .l-cab b { font-size:12px; }
.l-copia { position:absolute; right:0; top:0; font-size:9px; color:#666; letter-spacing:.1em; }
.l-periodo { text-align:center; margin:4px 0 6px; }
.listin table { width:100%; border-collapse:collapse; }
.l-datos td { padding:1px 4px; } .l-datos .et { white-space:nowrap; color:#222; width:1%; }
.l-lineas { margin-top:4px; }
.l-lineas th { border-top:1px solid #000; border-bottom:1px solid #000; padding:2px 4px; text-align:left; font-weight:700; }
.l-lineas td { padding:1px 4px; } .l-lineas tr.vacia td { padding:0; line-height:13px; }
.l-tot td { border-top:1px solid #000; font-weight:700; padding-top:3px; } .l-neto td { font-weight:700; font-size:12px; }
.l-texto { margin:6px 0 2px; font-size:10px; }
.l-firma { text-align:right; font-size:10px; margin-top:4px; }
.l-pie { text-align:center; font-size:9px; border-top:1px solid #999; margin-top:6px; padding-top:3px; }
.pie { text-align:center; font-size:12px; padding:18px; color:var(--gris); }
.chico { font-size:12px; } .check { flex-direction:row; align-items:center; gap:6px; font-weight:400; }
.checks { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:4px 12px; margin:10px 0; }
.acciones { display:flex; gap:4px; flex-wrap:wrap; align-items:center; } button.mini { padding:3px 8px; font-size:12px; }
input.corto { width:70px; } tr.alerta td { background:#fdecea; }
.clave-2p { font:700 18px/1.4 Consolas, monospace; letter-spacing:.08em; background:#f3f6fa; padding:8px 12px; border-radius:6px; margin:6px 0; display:inline-block; user-select:all; }
.legal { max-width:860px; background:#fff; padding:20px 28px; border:1px solid var(--borde); border-radius:10px; } .legal li { margin-bottom:6px; }
details.rnet summary { cursor:pointer; } details.rnet summary h3 { display:inline; }
@media print {
  .hoja-listin { border:0; max-width:none; margin:0; padding:0; page-break-after:always; }
  .hoja-listin:last-child { page-break-after:auto; }
  .recibo:nth-of-type(2n) { page-break-after:auto; }
  .pie { display:none; }
}
/* ---- reporte RD ---- */
.rd { background:#fff; padding:10px; margin-bottom:16px; border:1px solid var(--borde); font:9px/1.25 Arial, sans-serif; color:#000; }
.rd-cab { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; margin-bottom:6px; } .rd-cab .der { text-align:right; } .rd-t { text-align:center; font-size:11px; }
.rd-tabla { width:100%; border-collapse:collapse; margin-bottom:8px; }
.rd-tabla th, .rd-tabla td { border:1px solid #777; padding:2px 3px; text-align:right; white-space:nowrap; }
.rd-tabla th { background:#dde7f2; text-align:center; white-space:normal; font-size:8px; }
.rd-tabla td.izq { text-align:left; white-space:normal; } .rd-tabla td.firma { min-width:70px; }
.rd-tabla tr.vacia td { height:14px; }
.rd-denso { font-size:7.5px; } .rd-denso .rd-tabla td { padding:1px 2px; }
.rd-pie { display:flex; justify-content:space-between; margin-top:8px; font-size:9px; }
.menu-dec { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px; }
.menu-dec a { display:block; color:inherit; } .menu-dec a:hover { border-color:var(--azul2); text-decoration:none; }
.menu-dec b { display:block; color:var(--azul); font-size:16px; } .menu-dec span { color:var(--gris); font-size:13px; }
pre.txt { background:#fff; border:1px solid var(--borde); padding:10px; font-size:12px; overflow:auto; }
td.et { font-weight:700; white-space:nowrap; } td.neg { font-weight:700; } .planilla th { background:var(--azul); color:#fff; }
@media print { .rd { border:0; padding:0; page-break-after:always; } .rd:last-child { page-break-after:auto; } .desliza { overflow:visible; } }
/* ---- ficha del trabajador ---- */
.ficha { background:#fff; max-width:860px; margin:auto; border:1px solid var(--borde); border-radius:10px; overflow:hidden; }
.ficha-cab { background:var(--azul); color:#fff; padding:16px 22px; display:flex; justify-content:space-between; gap:16px; }
.ficha-cab h1, .ficha-cab h2 { color:#fff; margin:0 0 4px; } .ficha-cab small { color:#cfe0f1; } .ficha-cab .der { text-align:right; }
.ficha section { padding:10px 22px; border-bottom:1px solid #eef1f5; }
.ficha h3 { border-left:4px solid var(--azul); padding-left:8px; color:var(--azul); margin:6px 0 8px; }
.ficha-t { width:100%; border-collapse:collapse; font-size:13px; } .ficha-t td { padding:3px 6px; vertical-align:top; }
.ficha-t td.et { color:#40505f; font-weight:700; width:18%; }
.ficha-pie { padding:8px 22px; }
.verde { color:var(--verde); } .etq { font-size:10px; background:#17a2b8; color:#fff; padding:1px 5px; border-radius:3px; font-weight:700; }
a.kpi { color:inherit; } a.kpi:hover { border-color:var(--azul2); text-decoration:none; }
.acciones-t { white-space:nowrap; }
.grupos-param { display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:12px; }
fieldset.grupo { margin:0; } fieldset.grupo legend { font-weight:700; color:var(--azul); padding:0 6px; }
fieldset.grupo td.val { width:1%; white-space:nowrap; text-align:right; }
.deps { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
.dep .cab { margin-bottom:6px; } .dep .cargo { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #eef1f5; padding:3px 0; font-size:13px; }
.dep form { margin:0; } button.link { background:none; color:var(--rojo); padding:0 4px; font-weight:400; }
.aviso:not(.error):not(.ok) { background:#eef5fc; border-color:#c7ddf2; }
@media print { .ficha { border:0; max-width:none; } .ficha-cab { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
.nw { white-space:nowrap; } .bonos-t select { max-width:100%; } .bonos-t td:first-child select { max-width:420px; }
form.inline { display:inline; } form.inline button.link { font-size:13px; }
.dos { display:grid; grid-template-columns:repeat(auto-fit, minmax(380px,1fr)); gap:14px; }
.firmas-ari { display:flex; justify-content:space-around; text-align:center; margin-top:30px; font-size:12px; } @media print { .ari-hoja { border:0; } .dos { display:block; } }
/* ---- logo y foto ---- */
.logo-doc { max-height:48px; max-width:150px; object-fit:contain; }
.doc-cab { display:flex; align-items:center; gap:14px; } .doc-cab p, .doc-cab h2 { margin:0; }
.logo-listin { position:absolute; left:0; top:0; max-height:36px; max-width:95px; }
.rd-emp { display:flex; gap:8px; align-items:flex-start; } .logo-rd { max-height:40px; max-width:110px; }
.logo-ficha { max-height:56px; max-width:130px; background:#fff; border-radius:6px; padding:4px; }
.ficha-cab .crece { flex:1; }
.foto-ficha { width:84px; height:100px; object-fit:cover; border-radius:6px; border:2px solid #fff; }
.foto-mini { width:60px; height:72px; object-fit:cover; border-radius:4px; } .logo-muestra { max-height:50px; max-width:160px; }
/* listin: siempre original y copia en UNA hoja carta; si hay muchas lineas se compacta (y app.js reduce si hace falta) */
.hoja-listin { width:760px; max-width:none; box-sizing:border-box; }
.hoja-listin.compacto .listin { font-size:9.5px; line-height:1.2; padding:6px 0 4px; }
.hoja-listin.compacto .l-lineas td { padding:0 4px; } .hoja-listin.compacto .l-firma br + br { display:none; }
.hoja-listin.muy-compacto .listin { font-size:8px; line-height:1.1; } .hoja-listin.muy-compacto .l-texto { margin:2px 0; }
@media print {
  @page { margin:8mm; }
  .hoja-listin { width:auto; break-inside:avoid; page-break-inside:avoid; overflow:hidden; }
}
.tasa-dia { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.mini-det summary { cursor:pointer; font-size:12px; color:var(--azul2); } .mini-det .acciones { margin-top:4px; }
tr.ajuste td { background:#fff8e1; }
.semana-libre { border:1px dashed var(--borde); border-radius:8px; padding:6px 10px; } .semana-libre legend { font-size:12px; color:var(--azul2); } .l-obs { font-size:9px; margin:3px 0 0; font-style:italic; }
/* etapa 3: prestaciones, liquidacion, vacaciones y utilidades */
tr.sel td { background:#e8f5e9; }
.liq-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:8px 12px; align-items:end; }
.liq-form label { display:flex; flex-direction:column; font-size:12px; }
.recibo-liq { border:1px solid #bbb; padding:14px 18px; background:#fff; max-width:1000px; margin:12px auto; font-size:12px; }
.recibo-liq h2 { text-align:center; margin:4px 0 8px; font-size:16px; }
.recibo-liq .rl-cab { display:flex; gap:12px; align-items:center; border-bottom:2px solid #333; padding-bottom:6px; margin-bottom:8px; }
.recibo-liq .rl-cab .logo-doc { max-height:60px; }
.recibo-liq table { width:100%; border-collapse:collapse; }
.recibo-liq .rl-datos td { padding:2px 6px; }
.recibo-liq .rl-datos .et { color:#555; white-space:nowrap; }
.recibo-liq .rl-lineas th, .recibo-liq .rl-lineas td { border:1px solid #ccc; padding:3px 6px; }
.recibo-liq .rl-lineas th { background:#eef2f7; }
.recibo-liq .rl-tot td { font-weight:700; background:#f5f5f5; }
.recibo-liq .rl-neto td { font-weight:700; font-size:14px; }
.recibo-liq .rl-texto { margin:10px 0; text-align:justify; }
.recibo-liq .rl-firmas { display:flex; justify-content:space-around; margin-top:40px; text-align:center; }
.nota-legal { font-size:11px; color:#555; border-left:3px solid #d9a400; padding:4px 8px; background:#fffbe6; }
@media print { .recibo-liq { border:0; margin:0; max-width:none; } .salto { page-break-before:always; } }
@media (max-width:600px) { .dos { grid-template-columns:1fr; } }
@media (max-width:700px) { table.tabla { display:block; overflow-x:auto; } .recibo-liq { overflow-x:auto; padding:8px; } }
.grupos-param .grupo-ancho { grid-column:1 / -1; }
.grupos-param select { max-width:100%; }
.grupo-ancho td:first-child { width:40%; }
fieldset.grupo-ancho td.val { white-space:normal; width:60%; text-align:left; }
fieldset.grupo-ancho td.val select { width:100%; }
.menu-dec .sel-card { border-color:var(--azul2); box-shadow:0 0 0 2px var(--azul2) inset; }
.selector-trab { margin-bottom:10px; } .selector-trab select { min-width:260px; }
.tabs-acc a { display:inline-block; padding:5px 12px; border:1px solid var(--borde); border-radius:16px; margin-right:4px; font-size:13px; }
.tabs-acc a.activa { background:var(--azul); color:#fff; border-color:var(--azul); }
.explica { background:#f7fafc; border:1px solid var(--borde); border-radius:8px; padding:10px 14px; margin:10px 0; }
.explica h3 { margin:6px 0 4px; font-size:14px; } .explica ul { margin:0 0 6px 18px; padding:0; } .explica li { margin:2px 0; }
.explica .f { font-family:ui-monospace, Consolas, monospace; font-size:12px; color:#333; }
details.solo-duenio { border:1px dashed #d9a400; border-radius:8px; padding:6px 12px; margin:10px 0; background:#fffdf5; }
details.solo-duenio summary { cursor:pointer; font-weight:700; color:#8a6d00; }
fieldset.retenciones { border:1px solid var(--borde); border-radius:8px; margin:10px 0; padding:6px 12px; display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; }
fieldset.retenciones legend { font-weight:700; color:var(--azul); padding:0 6px; }
/* ---- marca Nomina OS ---- */
:root { --oro:#F2B233; --noche:#0E2A47; }
.barra { background:linear-gradient(90deg, var(--noche), var(--azul)); }
.marca { display:flex; align-items:center; gap:10px; color:#fff; letter-spacing:0; font-weight:800; font-size:18px; }
.marca:hover { text-decoration:none; } .marca img { border-radius:8px; }
.marca-txt { line-height:1.1; color:#fff; } .marca-txt b { background:var(--oro); color:var(--noche); border-radius:5px; padding:0 5px; margin-left:2px; font-size:14px; }
.marca-txt span { display:block; font-weight:400; font-size:11px; color:#b9cde2; }
body.pantalla-acceso { background:#0B2238 url('marca/fondo.svg') center / cover fixed no-repeat; min-height:100vh; }
body.pantalla-acceso main { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:88vh; }
body.pantalla-acceso .login, body.pantalla-acceso main > .tarjeta, body.pantalla-acceso main > form { background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.35); }
body.pantalla-acceso .login { padding:28px 30px; max-width:400px; width:100%; }
body.pantalla-acceso .pie, body.pantalla-acceso .pie a { color:#b9cde2; }
.logo-acceso { display:block; margin:0 auto 8px; max-width:100%; height:auto; }
.login p.gris { text-align:center; }
@media print { .barra { background:none; } }
.marca .marca-txt { display:block; font-size:18px; font-weight:800; color:#fff; letter-spacing:0; }
.marca .marca-txt > span { display:block; font-size:11px; font-weight:400; color:#b9cde2; }
/* ---- recibos de liquidacion / vacaciones / utilidades (formato del expediente en Excel) ---- */
.rec-det, .rec-res { position:relative; background:#fff; max-width:1000px; margin:12px auto; padding:18px 22px; border:1px solid #ccc; font:12px/1.35 Arial, Helvetica, sans-serif; color:#000; }
.rec-det .rx-cab, .rec-res .rr-cab { text-align:center; position:relative; }
.rec-det .rx-cab b, .rec-res .rr-cab b.rr-emp { display:block; font-size:19px; font-weight:700; }
.rec-det .rx-cab .logo-doc, .rec-res .rr-cab .logo-doc { position:absolute; left:0; top:0; max-height:60px; }
.rec-det table { width:100%; border-collapse:collapse; }
.rx-imp td { font-size:11px; padding:2px 4px; } .rx-imp .et { font-weight:700; width:150px; }
.rx-banda, .rx-banda2, .rx-sub td, .rx-tot th { background:#4472C4; color:#fff; font-weight:700; text-align:center; }
.rx-banda { font-size:17px; padding:3px; margin:2px 0 4px; }
.rx-datos td { padding:3px 4px; } .rx-datos .et { font-weight:700; width:170px; white-space:nowrap; }
.rx-lineas { margin-top:4px; } .rx-lineas th { background:#4472C4; color:#fff; padding:6px 4px; border:1px solid #fff; font-size:12px; }
.rx-lineas th.rx-banda2 { padding:3px; }
.rx-lineas td { border:1px solid #000; padding:2px 5px; height:19px; }
.rx-lineas td.cod { background:#d9d9d9; text-align:center; width:130px; }
.rx-lineas tr.vacia td { border-color:#000; }
.rx-sub td { border:1px solid #4472C4; padding:2px 5px; text-align:left; } .rx-sub td.n { text-align:right; }
.rx-pie { display:flex; gap:40px; margin-top:14px; align-items:flex-start; }
.rx-declaro { flex:1; border:1px solid #000; padding:3px 5px; font-size:10.5px; }
.rx-tot { width:330px !important; } .rx-tot th { text-align:left; padding:1px 5px; font-size:12px; } .rx-tot td { border:1px solid #000; padding:1px 5px; font-size:13px; }
.rx-tasa { background:#f2f2f2; text-align:right; padding:6px 10px; margin-top:8px; } .rx-tasa .usd { margin-left:90px; }
.rec-res .rr-tit { display:block; font-size:14px; margin-top:12px; } .rec-res .rr-cab span { font-size:11px; }
.rec-res table { width:100%; border-collapse:collapse; }
.rr-datos { margin-top:16px; } .rr-datos td { padding:2px 4px; }
.rr-lineas th { border-bottom:1px dotted #000; padding:2px 4px; text-align:center; } .rr-lineas td { padding:2px 4px; }
.rr-lineas td.c { text-align:center; width:90px; }
.rr-sub td { border-top:1px dotted #000; font-weight:700; padding-top:4px; } .rr-neto td { font-weight:700; }
.rr-declaro { font-weight:700; margin:28px 0 10px; }
.rr-firmas { display:flex; justify-content:space-around; align-items:flex-end; margin-top:46px; text-align:center; font-size:11px; }
.rr-firmas .huella { align-self:flex-end; padding-top:60px; }
@media print { .rec-det, .rec-res { border:0; margin:0; max-width:none; padding:0; } .rx-banda, .rx-lineas th, .rx-sub td, .rx-tot th, .rx-lineas td.cod, .rx-tasa { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
@media (max-width:700px) { .rec-det, .rec-res { overflow-x:auto; padding:8px; } .rx-pie { flex-direction:column; } }
.formato-sel a { display:inline-block; padding:3px 10px; border:1px solid var(--borde); border-radius:14px; margin-left:4px; }
.formato-sel a.activa { background:var(--azul); color:#fff; border-color:var(--azul); }
.ret-fila label.check { display:inline-flex; flex-direction:row; align-items:center; gap:3px; margin-right:6px; font-weight:400; }
.ayuda-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--oro); color:var(--noche) !important; font-weight:800; font-size:16px; }
.ayuda-btn:hover { text-decoration:none; filter:brightness(1.08); }
.ayuda-icono { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--oro); color:var(--noche); font-weight:800; flex:none; }
.ayuda-inicio { display:flex; gap:14px; align-items:center; } .ayuda-inicio > div { flex:1; }
.guia-pasos { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:12px; }
.guia-pasos section { display:flex; gap:12px; margin:0; } .guia-pasos ul { margin:6px 0 0 18px; padding:0; }
.guia-pasos .num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--azul); color:#fff; font-weight:800; flex:none; }
td.arrastre { background:#fff8e1; } td.arrastre input::placeholder { color:#8a6d00; font-style:italic; opacity:1; }
/* pantallas de acceso: todo dentro de un panel blanco para que se lea sobre el fondo */
body.pantalla-acceso .panel-acceso { background:#fff; color:#1b2733; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.35); padding:24px 28px; width:100%; max-width:520px; }
body.pantalla-acceso .panel-acceso .login, body.pantalla-acceso .panel-acceso .tarjeta, body.pantalla-acceso .panel-acceso form { box-shadow:none; border:0; margin:0 auto; padding:0; max-width:none; }
body.pantalla-acceso .panel-acceso h1 { text-align:center; }
body.pantalla-acceso main > .tarjeta, body.pantalla-acceso main > form { box-shadow:none; }
.l-usd { margin-top:4px; border:1px solid #000; } .l-usd td { padding:2px 5px; font-size:10px; }
.l-firmas2 { display:flex; justify-content:space-around; align-items:flex-end; font-size:10px; margin-top:6px; text-align:center; }
.l-firmas2 .huella { width:60px; height:34px; border:1px solid #999; display:flex; align-items:flex-end; justify-content:center; font-size:8px; }
.hoja-listin.compacto .l-firmas2 br + br { display:none; }
/* ---- documentos laborales ---- */
.doc-edit { width:100%; font:13px/1.5 Georgia, 'Times New Roman', serif; padding:8px; border:1px solid var(--borde); border-radius:6px; }
.doc-hoja { position:relative; background:#fff; max-width:800px; margin:14px auto; padding:36px 48px; border:1px solid #ccc; font:14px/1.6 Georgia, 'Times New Roman', serif; color:#000; }
.doc-hoja.ancha { max-width:none; padding:24px 28px; font-size:13px; }
.doc-hoja.ancha .tabla td { white-space:nowrap; } .doc-hoja.ancha .tabla th { white-space:normal; vertical-align:bottom; }
.doc-membrete { display:flex; align-items:center; gap:14px; border-bottom:2px solid #000; padding-bottom:8px; margin-bottom:22px; font-family:Arial, sans-serif; font-size:13px; }
.doc-membrete .logo-doc { max-height:64px; max-width:160px; } .doc-membrete > div:nth-last-child(1).doc-control { margin-left:auto; }
.doc-control { margin-left:auto; font-size:12px; border:1px solid #000; padding:3px 8px; }
.doc-titulo { text-align:center; color:#000; font-size:16px; text-decoration:underline; margin:6px 0 20px; letter-spacing:.04em; }
.doc-cuerpo p { text-align:justify; margin:0 0 12px; }
.doc-tabla { width:100%; border-collapse:collapse; margin:4px 0 12px; font:12px Arial, sans-serif; } .doc-tabla th, .doc-tabla td { border:1px solid #000; padding:3px 6px; }
.doc-tabla tr.tot td { font-weight:700; }
.doc-firmas { display:flex; justify-content:space-around; margin-top:60px; text-align:center; gap:30px; font-size:13px; }
.doc-pie { position:relative; margin-top:40px; border-top:1px solid #999; font:10px Arial, sans-serif; text-align:center; padding-top:4px; }
.borrador-doc::before { content:'VISTA PREVIA'; position:absolute; top:8px; right:12px; font:10px Arial; color:#999; letter-spacing:.1em; }
@media print { .doc-hoja { border:0; margin:0; padding:0; max-width:none; } }
@media (max-width:700px) { .doc-hoja { padding:14px; } .doc-firmas { flex-direction:column; } }

/* v3.6 contratos por clausulas */
.salto-pagina { border-top:1px dashed #b8c4d0; margin:30px 0; }
@media print { .salto-pagina { border:0; margin:0; page-break-after:always; break-after:page; } }
.doc-anexo { text-align:center; font-size:14px; margin:10px 0 14px; letter-spacing:.3px; }
.doc-cuerpo .doc-firmas { margin-top:44px; page-break-inside:avoid; break-inside:avoid; }
.doc-hoja .doc-cuerpo p { text-align:justify; }
fieldset label.check { display:block; margin:3px 0; }
.fin-firmas { page-break-inside:avoid; break-inside:avoid; }
tr.cambia td { background:#fff4d6; }
/* v3.8 ISLR y contabilidad */
.arc-hoja { page-break-after:always; break-after:page; }
.arc-hoja:last-child { page-break-after:auto; break-after:auto; }
.arc-hoja .doc-titulo small { font-size:11px; text-decoration:none; font-weight:400; }
.arc-datos td:nth-child(odd) { font-weight:700; white-space:nowrap; width:1%; }
.arc-datos th, .arc-hoja .doc-tabla th { background:#eef2f6; }
pre.xml { white-space:pre-wrap; font-size:11px; max-height:360px; overflow:auto; }
.arc-hoja .doc-tabla { table-layout:fixed; font-size:11px; }
.arc-hoja .doc-tabla th { white-space:normal; font-size:10.5px; line-height:1.2; }
.arc-hoja .arc-datos td:nth-child(2), .arc-hoja .arc-datos td:nth-child(4) { word-break:break-word; }
.activacion { max-width:520px; }
.codigo-equipo { display:flex; gap:8px; } .codigo-equipo input { font:600 15px monospace; letter-spacing:.03em; text-align:center; flex:1; min-width:0; }
.codigo-equipo button { flex:none; width:auto; padding:0 14px; }
.activacion textarea { font:12px monospace; width:100%; }
.en-linea { display:inline; }
.grande { font-size:1.4rem; font-weight:700; margin:.3rem 0; }
/* version de demostracion: banda arriba y marca de agua en pantalla y al imprimir */
.banda-demo { background:#b3261e; color:#fff; text-align:center; font-weight:700; font-size:.85rem; padding:6px 10px; letter-spacing:.02em; }
body.modo-demo::after { content:"DEMOSTRACIÓN · SIN VALIDEZ"; position:fixed; top:45%; left:50%; transform:translate(-50%,-50%) rotate(-30deg);
  font-size:4.5rem; font-weight:800; color:rgba(179,38,30,.10); white-space:nowrap; pointer-events:none; z-index:9999; }
@media print { body.modo-demo::after { color:rgba(179,38,30,.18); } }
/* tamaño del logo (Ajustes -> Logo): PEQUENO = el de antes */
body.logo-MEDIANO .logo-doc { max-height:72px; max-width:220px; }
body.logo-MEDIANO .l-cab .logo-listin { max-height:56px; max-width:150px; } body.logo-MEDIANO .l-cab { min-height:58px; }
body.logo-MEDIANO .rd-emp .logo-rd { max-height:64px; max-width:180px; }
body.logo-MEDIANO .doc-membrete .logo-doc { max-height:90px; max-width:240px; }
body.logo-MEDIANO .recibo-liq .rl-cab .logo-doc, body.logo-MEDIANO .rec-det .rx-cab .logo-doc, body.logo-MEDIANO .rec-res .rr-cab .logo-doc { max-height:84px; max-width:220px; }
body.logo-MEDIANO .ficha-cab .logo-ficha { max-height:80px; max-width:190px; }
body.logo-GRANDE .logo-doc { max-height:96px; max-width:280px; }
body.logo-GRANDE .l-cab .logo-listin { max-height:74px; max-width:190px; } body.logo-GRANDE .l-cab { min-height:76px; }
body.logo-GRANDE .rd-emp .logo-rd { max-height:84px; max-width:230px; }
body.logo-GRANDE .doc-membrete .logo-doc { max-height:120px; max-width:320px; }
body.logo-GRANDE .recibo-liq .rl-cab .logo-doc, body.logo-GRANDE .rec-det .rx-cab .logo-doc, body.logo-GRANDE .rec-res .rr-cab .logo-doc { max-height:110px; max-width:280px; }
body.logo-GRANDE .ficha-cab .logo-ficha { max-height:100px; max-width:240px; }

/* ---- ficha del trabajador (diseño propio v4.9: membrete claro, resumen en mosaico, secciones numeradas) ---- */
.fx { background:#fff; max-width:880px; margin:auto; border:1px solid var(--borde); border-top:6px solid var(--azul); border-radius:4px; padding:0 0 10px; font-size:13px; }
.fx-membrete { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px 10px; border-bottom:1px solid #e3e8ee; }
.fx-emp { display:flex; align-items:center; gap:12px; } .fx-emp small { color:#5a6878; }
.fx-doc { text-align:right; } .fx-doc span { display:block; font-weight:800; letter-spacing:.12em; color:var(--azul); font-size:15px; } .fx-doc small { color:#5a6878; }
.fx-perfil { display:flex; gap:18px; align-items:center; padding:16px 24px 8px; }
.fx-foto { width:86px; height:86px; border-radius:50%; object-fit:cover; flex:none; border:3px solid #e9eef4; }
.fx-iniciales { display:flex; align-items:center; justify-content:center; background:#e9eef4; color:var(--azul); font-size:30px; font-weight:800; }
.fx-quien h1 { margin:0 0 2px; font-size:22px; color:#1d2a36; } .fx-quien > div { color:#4a5866; margin-bottom:6px; }
.fx-pill { display:inline-block; border:1px solid #c9d3de; color:#3f4d5b; border-radius:999px; padding:1px 10px; font-size:11px; margin-right:4px; }
.fx-pill.activo { border-color:#2e9b5b; color:#1f7a45; } .fx-pill.baja { border-color:#c0392b; color:#a5281b; }
.fx-resumen { display:grid; grid-template-columns:repeat(4,1fr); margin:8px 24px 6px; border:1px solid #e3e8ee; border-radius:6px; }
.fx-resumen > div { padding:8px 12px; border-left:1px solid #e3e8ee; } .fx-resumen > div:first-child { border-left:0; }
.fx-resumen small, .fx-grid dt { display:block; color:#6b7886; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; }
.fx-resumen b { font-size:14px; color:#1d2a36; }
.fx-sec { padding:8px 24px 6px; }
.fx-sec h3 { display:flex; align-items:center; gap:10px; margin:6px 0 8px; font-size:14px; color:#1d2a36; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px dashed #cfd8e2; padding-bottom:5px; }
.fx-sec h3 i { font-style:normal; background:var(--azul); color:#fff; border-radius:4px; padding:1px 6px; font-size:11px; }
.fx-sec h4 { margin:4px 0 6px; font-size:12px; color:#4a5866; }
.fx-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px 14px; margin:0 0 6px; }
.fx-grid.c2 { grid-template-columns:repeat(2,1fr); }
.fx-grid dd { margin:1px 0 0; color:#1d2a36; word-break:break-word; }
.fx-grid .d2 { grid-column:span 2; } .fx-grid .d3 { grid-column:span 3; } .fx-grid .d4 { grid-column:1 / -1; }
.fx-dos { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fx-linea { list-style:none; margin:0; padding:0 0 0 12px; border-left:2px solid #d5dee8; }
.fx-linea li { position:relative; padding:0 0 8px 6px; } .fx-linea li::before { content:''; position:absolute; left:-18px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--azul); }
.fx-linea small, .fx-bono small { display:block; color:#6b7886; }
.fx-bono { display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid #eef1f5; } .fx-bono span { white-space:nowrap; font-weight:700; }
.fx-firmas { display:flex; gap:40px; padding:34px 60px 4px; } .fx-firmas div { flex:1; border-top:1px solid #444; text-align:center; padding-top:4px; font-size:12px; color:#4a5866; }
.fx-pie { padding:6px 24px 0; color:#6b7886; font-size:11px; text-align:center; }
@media (max-width:700px) { .fx-grid, .fx-resumen { grid-template-columns:repeat(2,1fr); } .fx-dos { grid-template-columns:1fr; } .fx-membrete, .fx-perfil { flex-wrap:wrap; } }
@media print { .fx { border-left:0; border-right:0; border-bottom:0; max-width:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .fx-sec { break-inside:avoid; } }
body.logo-MEDIANO .fx-emp .logo-ficha { max-height:70px; max-width:170px; } body.logo-GRANDE .fx-emp .logo-ficha { max-height:90px; max-width:220px; }

.rd-tabla tr.totales.sub td { background:#f3f6fa; font-weight:600; font-style:italic; }
.rd-dep .rd-tabla td { font-size:11px; }

/* ---- entrega al cliente: contrato, acta y volantes de claves ---- */
.ed { background:#fff; max-width:860px; margin:auto; padding:22px 30px; border:1px solid var(--borde); border-radius:6px; font-size:13px; line-height:1.5; color:#1d2a36; }
.ed h1 { font-size:17px; text-align:center; text-transform:uppercase; letter-spacing:.03em; margin:8px 0 14px; color:#1d2a36; }
.ed h2 { font-size:13.5px; text-transform:uppercase; margin:16px 0 6px; color:var(--azul); letter-spacing:.03em; }
.ed p { text-align:justify; margin:6px 0; } .ed ol { margin:4px 0 4px 18px; padding:0; } .ed li { margin-bottom:3px; text-align:justify; }
.ed-cab { display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--azul); padding-bottom:8px; } .ed-cab .der { margin-left:auto; text-align:right; font-size:11.5px; color:#4a5866; }
.ed-t { width:100%; border-collapse:collapse; margin:4px 0 8px; font-size:12px; }
.ed-t td, .ed-t th { border:1px solid #c9d3de; padding:3px 6px; vertical-align:top; text-align:left; } .ed-t th { background:#eef2f6; }
.ed-t td:first-child { color:#3f4d5b; } .ed-p td:first-child { width:62%; }
.ed-firma { width:110px; } .ed-chico { font-size:11.5px; } .ed-pre { white-space:pre-line; }
.ed-nota { background:#fff7e0; border:1px solid #f0d48a; padding:4px 8px; font-size:12px; }
.ed-firmas { display:flex; gap:40px; margin-top:46px; } .ed-firmas div { flex:1; text-align:center; font-size:12px; }
.ed-firmas span { display:block; border-top:1px solid #333; margin-bottom:4px; }
.volante { background:#fff; max-width:620px; margin:0 auto 14px; padding:12px 16px; border:2px dashed #8a99a8; break-inside:avoid; page-break-inside:avoid; }
.volante-cab { display:flex; justify-content:space-between; border-bottom:1px solid #c9d3de; margin-bottom:6px; padding-bottom:4px; } .volante-cab span { font-size:11px; color:#a5281b; text-transform:uppercase; }
.volante-dato { font-family:Consolas, monospace; font-size:16px; font-weight:700; letter-spacing:.04em; }
@media print { .ed { border:0; padding:0; max-width:none; } .ed h2 { break-after:avoid; } .ed-t { break-inside:auto; } .ed-t tr { break-inside:avoid; } }

.grupo-doc { margin:14px 0 6px; color:var(--azul); font-size:14px; text-transform:uppercase; letter-spacing:.05em; }

.fx-prot { margin:4px 24px 6px; display:grid; gap:6px; }
.fx-prot > div { border-radius:6px; padding:7px 12px; border:1px solid #e3e8ee; background:#f6f8fb; }
.fx-prot .fx-prot-inamovilidad, .fx-prot .fx-prot-fuero { border-color:#e6b0aa; background:#fdf1ef; }
.fx-prot .fx-prot-revisar { border-color:#f0d48a; background:#fff7e0; }
tr.cal-vencida td { background:#fdecea; } tr.cal-pronto td { background:#fff7e0; }
.fecha-mini { width:8.6em; font-size:12px; padding:2px; }

.nota-interna { font-size:12px; color:#5b3a00; border:1px dashed #c58b00; background:#fff4d6; padding:5px 9px; border-radius:6px; }
.nota-interna::before { content:'🔒 '; }
.resp-despido { border:2px solid #c0392b; background:#fff3f1; border-radius:8px; padding:8px 12px; margin:10px 0; }
.resp-despido.con-error { box-shadow:0 0 0 3px #f5b7b1; }
.resp-despido legend { color:#c0392b; font-weight:700; }
.firmas-acta { display:flex; gap:40px; margin-top:60px; } .firmas-acta div { flex:1; border-top:1px solid #333; text-align:center; padding-top:4px; font-size:12px; }
.socio-bloque { display:contents; } .socio-bloque[hidden] { display:none; } .socio-bloque > small { align-self:end; }
.tipos-respaldo { display:flex; flex-direction:column; gap:4px; margin:6px 0 10px; } .tipos-respaldo .check { display:flex; }
.alcance-respaldo { border:1px solid var(--borde); border-radius:8px; padding:8px 12px 10px; margin:8px 0; display:flex; flex-direction:column; gap:4px; }
.alcance-respaldo legend { font-weight:600; padding:0 4px; }
.lista-empresas { display:flex; flex-direction:column; gap:2px; max-height:15rem; overflow:auto; margin:4px 0 8px 22px; padding:4px 0; }
.lista-empresas .check { display:flex; gap:6px; align-items:baseline; }

/* ==== Movimiento y respuesta de las pantallas (filosofía de Emil Kowalski) ====
   Herramienta de uso diario: se anima poco y rápido (≤ 200 ms), solo transform y opacity.
   Nada de esto aplica a lo impreso (recibos, actas, contratos): ahí no hay transiciones. */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* botones: responden al presionar */
button, .boton { transition: transform 120ms var(--ease-out), filter 150ms ease, background-color 150ms ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:active, .boton:active { transform: scale(0.97); }
button.link:active { transform: none; opacity: .7; }
button:disabled, button[disabled] { opacity: .55; cursor: not-allowed; transform: none; filter: none; }

/* foco visible solo con teclado (accesibilidad), igual en todo el sistema */
button:focus-visible, .boton:focus-visible, a:focus-visible, summary:focus-visible, input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 2px solid #9cc3e8; outline-offset: 2px; }

/* "trabajando...": evita el doble clic en Procesar, Guardar o Calcular mientras el servidor responde */
.ocupado { pointer-events: none; cursor: progress; opacity: .8; position: relative; }
.ocupado::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .5em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar 600ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* mensajes después de guardar: entran suave desde arriba y se pueden cerrar */
.aviso.flash { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
@starting-style { .aviso.flash { opacity: 0; transform: translateY(-4px); } }
.aviso.flash.saliendo { opacity: 0; transform: translateY(-4px); transition-duration: 120ms; }
.aviso .cerrar { float: right; background: none; color: inherit; padding: 0 2px 0 8px; font-size: 17px; line-height: 1; opacity: .55; font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .aviso .cerrar:hover { opacity: 1; filter: none; } }

/* secciones que se despliegan (Ver más, Registrar, Fechas del SENIAT...) */
details > summary { cursor: pointer; }
details[open] > :not(summary) { animation: aparecer 160ms var(--ease-out); }
@keyframes aparecer { from { opacity: 0; transform: translateY(-3px); } }

/* ventana de confirmación propia (reemplaza el aviso gris del navegador) */
dialog.confirmar { border: 0; border-radius: 12px; padding: 0; max-width: 440px; width: calc(100% - 32px);
  color: #1b2733; box-shadow: 0 18px 50px rgba(15, 35, 60, .28); }
dialog.confirmar[open] { animation: entrar-dialogo 170ms var(--ease-out); }
dialog.confirmar::backdrop { background: rgba(15, 30, 45, .38); }
@keyframes entrar-dialogo { from { opacity: 0; transform: scale(.96); } }
dialog.confirmar .cuerpo-dialogo { padding: 20px 22px 16px; }
dialog.confirmar p { margin: 0 0 16px; font-size: 15px; line-height: 1.45; }
dialog.confirmar .acciones-dialogo { display: flex; justify-content: flex-end; gap: 10px; }
dialog.confirmar .acciones-dialogo button { min-width: 96px; }

/* menú: se ve en qué sección está */
.barra nav a.actual { color: #fff; box-shadow: inset 0 -2px 0 #9cc3e8; padding-bottom: 2px; }

/* tablas largas: la fila bajo el mouse se resalta para no perder el renglón */
@media (hover: hover) and (pointer: fine) {
  .tabla tr:not(.totales):not(.sel):not(.cal-vencida):not(.cal-pronto):hover > td { background-color: #f5f9fd; }
  a.kpi, .menu-dec a { transition: border-color 150ms ease; }
}

/* quien tiene apagadas las animaciones en Windows: sin movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  button:active, .boton:active { transform: none; }
  .ocupado::after { animation: none; border-right-color: currentColor; opacity: .5; }
}
@media print { dialog.confirmar, .aviso .cerrar { display: none !important; } * { animation: none !important; transition: none !important; } }

/* firma con usuario y contraseña al aceptar una responsabilidad (v5.9) */
fieldset.firma { border:1px solid var(--borde, #c9d3e3); border-radius:8px; padding:8px 12px 10px; margin:10px 0; background:#f7f9fd; }
fieldset.firma legend { font-weight:600; padding:0 6px; }
fieldset.firma .rejilla { margin-top:4px; }
.buscador { min-width:280px; padding:6px 10px; }
.grupo-emp { background:#eef3f8; font-size:15px; padding-top:10px; }
.seniat-cal input.dia { width:3em; text-align:center; }
.portales { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px; margin:12px 0; }
.portal h3 { margin:0 0 8px; color:var(--azul); }
.portal dl.datos { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0 0 8px; font-size:14px; }
.portal dl.datos dt { color:#5b6573; } .portal dl.datos dd { margin:0; font-weight:600; word-break:break-all; }
.portal label small { display:block; font-weight:normal; }
.tabla-scroll { overflow-x:auto; max-width:100%; }
.pagos-ficha { font-size:12px; } .pagos-ficha td, .pagos-ficha th { padding:4px 5px; }
.ajustado { border-color: var(--rojo); }

/* Forma 99019: fecha de declaración y tasa del mes consultado */
.vence-99019 { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px 24px; background:#fff; border:1px solid var(--borde);
  border-left:4px solid var(--azul2); border-radius:10px; padding:10px 14px; margin:10px 0; }
.vence-99019 small { color:var(--gris); } .vence-99019 > div > small:first-child { display:block; }
.vence-99019 b { font-size:18px; color:var(--azul); margin-right:6px; }
.vence-99019.vencida { border-left-color:var(--rojo); } .vence-99019.hecha { border-left-color:var(--verde); }
.menu-dec .vence-dec { display:block; margin-top:6px; font-style:normal; font-size:12px; font-weight:700; color:var(--azul2); }
.menu-dec .vence-dec.vencida { color:var(--rojo); } .menu-dec .vence-dec.hecha { color:var(--verde); }

/* Panel del proveedor (SUPERADMIN) */
.chip-ob { display:inline-block; margin:1px 4px 1px 0; padding:1px 7px; border-radius:10px; background:#fff4e5; border:1px solid #f3d9b1; font-size:11.5px; white-space:nowrap; }
.chip-ob.vencida { background:#fdecea; border-color:#f5c2c0; color:var(--rojo); font-weight:600; }
.ok-t { color:var(--verde); font-size:12px; } .naranja-t { color:#b45309; }
.kpi.kpi-alerta b { color:var(--rojo); }
.grupo-nom { margin:18px 0 6px; color:var(--azul); }
.tabla.aparte { margin-top:6px; max-width:760px; }
.rel-nom td, .rel-nom th { font-size:12px; }
@media print { .rel-nom td, .rel-nom th { font-size:9px; padding:2px 3px; } .grupo-nom { break-after:avoid; } }
/* «Nómina del mes» (pantalla en prueba): pasos del mes en una sola página */
.mes-cab { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.mes-cab h1 { margin:0; } .mes-cab p { margin:4px 0 0; }
.etiqueta-prueba { font-size:11px; font-weight:700; vertical-align:middle; padding:2px 8px; border-radius:10px; background:#fff4e5; color:#b45309; }
.mes-nav { display:flex; align-items:center; gap:8px; } .mes-nav b { min-width:140px; text-align:center; font-size:17px; color:var(--azul); }
.mes-progreso { display:flex; align-items:center; gap:12px; margin:14px 0 6px; font-size:13px; color:#40505f; }
.mes-progreso label { flex-direction:row; font-size:13px; }
.mes-progreso progress { flex:1; height:8px; appearance:none; border:0; border-radius:4px; background:var(--claro); overflow:hidden; }
.mes-progreso progress::-webkit-progress-bar { background:var(--claro); border-radius:4px; }
.mes-progreso progress::-webkit-progress-value { background:var(--verde); border-radius:4px; }
.mes-progreso progress::-moz-progress-bar { background:var(--verde); border-radius:4px; }
.mes-grid { display:grid; grid-template-columns:210px 1fr; gap:18px; align-items:start; }
.mes-pasos { list-style:none; margin:10px 0 0; padding:0; position:sticky; top:12px; display:flex; flex-direction:column; gap:2px; }
.mes-pasos a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:#1b2733; font-weight:600; text-decoration:none; }
.mes-pasos .punto { width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12px;
  border:2px solid var(--borde); background:#fff; color:var(--gris); }
.mes-pasos li.listo .punto { background:var(--verde); border-color:var(--verde); color:#fff; }
.mes-pasos li.pendiente .punto { border-color:var(--azul2); color:var(--azul2); }
.mes-pasos li.bloqueado a { color:#9aa3ad; }
@media (hover: hover) and (pointer: fine) { .mes-pasos a { transition:background-color 150ms ease; } .mes-pasos a:hover { background:var(--claro); } }
.paso { scroll-margin-top:12px; } .paso h2 { display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:17px; color:var(--azul); }
.paso h2 .n { width:26px; height:26px; border-radius:50%; background:var(--claro); display:grid; place-items:center; font-size:13px; }
.paso .hecho { color:var(--verde); }
.paso .kpi small { display:block; color:var(--gris); }
.excepcion { margin:10px 0 12px; padding:10px; background:var(--fondo); border-radius:8px; }
.excepciones .chip { display:inline-flex; align-items:center; gap:4px; margin:2px 6px 2px 0; padding:2px 4px 2px 8px; border-radius:12px;
  background:#fff4e5; border:1px solid #f3d9b1; font-size:12px; white-space:nowrap; }
.excepciones .chip .quitar { background:none; color:#b45309; padding:0 4px; font-size:15px; line-height:1; font-weight:400; }
.comparar tr.alerta td { background:#fffbe6; }
.comparar td.sube { color:var(--verde); } .comparar td.baja { color:var(--rojo); }
.tabla tr.hecha td { color:var(--gris); }
.mes-grid > * { min-width:0; } .mes-nav .boton { white-space:nowrap; }
@media (max-width:800px) { .mes-grid { grid-template-columns:1fr; } .mes-nav { width:100%; justify-content:space-between; } .mes-nav b { min-width:0; }
  .mes-pasos { position:static; flex-direction:row; overflow-x:auto; gap:0; margin:0; } .mes-pasos a { white-space:nowrap; padding:6px 8px; font-size:13px; } }

/* ==== Prueba de diseño: menú agrupado por área de trabajo ====
   En vez de 15 enlaces sueltos, 5 grupos que siguen el orden del trabajo: Nómina, Personal, Declaraciones, Empresa
   (y Proveedor para el dueño). Cada opción dice en una línea para qué sirve. */
.barra { flex-wrap:nowrap; gap:18px; padding:8px 22px; }
.barra .menu-principal { display:flex; align-items:center; gap:2px; flex:1; flex-wrap:wrap; }
.menu-principal > a.menu-solo, .grupo-menu > summary { display:block; padding:8px 12px; border-radius:8px; color:#dbe8f5; font-weight:600;
  font-size:14.5px; cursor:pointer; list-style:none; user-select:none; }
.grupo-menu > summary::-webkit-details-marker { display:none; }
.grupo-menu > summary::after { content:""; display:inline-block; width:6px; height:6px; margin-left:8px; vertical-align:3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.7; }
.menu-principal > a.menu-solo:hover, .grupo-menu > summary:hover { background:rgba(255,255,255,.09); text-decoration:none; color:#fff; }
.menu-principal > a.menu-solo.actual, .grupo-menu.actual > summary { color:#fff; box-shadow:inset 0 -3px 0 var(--oro); border-radius:8px 8px 2px 2px; }
.grupo-menu[open] > summary { background:rgba(255,255,255,.14); color:#fff; }
.grupo-menu { position:relative; }
.grupo-menu .desplegable { position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:300px; background:#fff; border-radius:12px;
  padding:6px; box-shadow:0 14px 40px rgba(14,42,71,.25), 0 0 0 1px rgba(14,42,71,.08); transform-origin:top left; }
.grupo-menu[open] .desplegable { animation:abrir-menu 140ms var(--ease-out); }
@keyframes abrir-menu { from { opacity:0; transform:translateY(-4px); } }
.grupo-menu .desplegable a { display:block; padding:8px 12px; border-radius:8px; color:#1b2733; }
.grupo-menu .desplegable a b { display:block; font-size:14px; color:var(--azul); }
.grupo-menu .desplegable a small { display:block; font-size:12px; color:var(--gris); line-height:1.35; }
.grupo-menu .desplegable a:hover { background:var(--claro); text-decoration:none; }
.grupo-menu .desplegable a.actual { background:#fff6df; box-shadow:inset 3px 0 0 var(--oro); }
.barra .yo { white-space:nowrap; }
@media (max-width:1100px) { .barra { flex-wrap:wrap; } .barra .yo { width:100%; text-align:right; } }
@media (max-width:700px) { .grupo-menu .desplegable { position:fixed; left:12px; right:12px; top:auto; min-width:0; } }

/* ==== Prueba de diseño: inicio «Lo que toca ahora» + agenda con hojas de calendario ==== */
.inicio-cab h1 { margin-bottom:2px; } .inicio-cab p { margin:0 0 14px; }
.hoy-grid { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:16px; align-items:start; margin-bottom:14px; }
.ahora { background:var(--noche); color:#e7eef6; border-radius:14px; padding:20px 24px 18px; }
.ahora h2 { color:#fff; font-size:24px; margin:2px 0 14px; }
.ahora .ahora-que { margin:0; color:var(--oro); font-weight:700; font-size:13px; }
.ahora .ahora-texto { font-size:15px; margin:12px 0 16px; max-width:60ch; }
.ahora .gris { color:#a9bfd6; margin-left:10px; }
.ahora .boton { background:var(--oro); color:var(--noche); padding:10px 18px; font-size:15px; }
.ahora .boton:hover { filter:brightness(1.05); text-decoration:none; }
.ahora-pasos { display:flex; list-style:none; margin:0; padding:0; gap:0; counter-reset:paso; }
.ahora-pasos li { counter-increment:paso; flex:1; position:relative; padding:0 0 0 30px; font-size:13px; color:#a9bfd6; min-height:24px; display:flex; align-items:center; }
.ahora-pasos li::before { content:counter(paso); position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%;
  border:2px solid #4f6d8c; display:grid; place-items:center; font-size:11px; font-weight:700; }
.ahora-pasos li.hecho { color:#cfe0f0; } .ahora-pasos li.hecho::before { content:"✓"; background:#2e7d32; border-color:#2e7d32; color:#fff; }
.ahora-pasos li.aqui { color:#fff; font-weight:700; } .ahora-pasos li.aqui::before { border-color:var(--oro); color:var(--oro); }
.agenda { background:#fff; border:1px solid var(--borde); border-radius:14px; padding:14px 16px; }
.agenda h2 { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 8px; font-size:16px; }
.agenda h2 a { font-size:13px; font-weight:600; }
.agenda ul { list-style:none; margin:0; padding:0; }
.agenda li { display:flex; gap:12px; align-items:center; padding:6px 0; border-top:1px solid #eef1f5; }
.agenda li:first-child { border-top:0; }
.agenda .hoja { flex:none; width:46px; text-align:center; border-radius:8px; overflow:hidden; border:1px solid var(--borde); font-size:11px;
  color:var(--gris); line-height:1.2; padding-bottom:3px; background:#fff; }
.agenda .hoja b { display:block; font-size:19px; color:var(--azul); padding:3px 0 1px; border-top:5px solid var(--azul2); font-variant-numeric:tabular-nums; }
.agenda li.vencida .hoja b { border-top-color:var(--rojo); color:var(--rojo); }
.agenda li.pronto .hoja b { border-top-color:var(--oro); }
.agenda .que { font-size:14px; } .agenda .que small { display:block; font-size:12px; }
.agenda li.vencida .que small { color:var(--rojo); font-weight:600; }
.avisos-inicio { background:#fff; border:1px solid var(--borde); border-radius:12px; padding:4px 14px; margin:0 0 14px; }
.avisos-inicio > summary { padding:8px 0; font-weight:700; color:var(--azul); }
.avisos-inicio .cuenta { display:inline-block; min-width:22px; padding:0 6px; margin-left:6px; border-radius:11px; background:var(--claro); text-align:center; font-size:12px; }
.avisos-inicio .aviso { background:none; border:0; border-top:1px solid #eef1f5; border-radius:0; margin:0; padding:8px 0; }
.avisos-inicio .aviso-legal { padding:8px 0; border-top:1px solid #eef1f5; }
@media (max-width:900px) { .hoy-grid { grid-template-columns:1fr; } .ahora-pasos { flex-direction:column; gap:6px; } }
.col-izq { display:flex; flex-direction:column; gap:12px; } .col-izq .tasa-inicio { margin:0; border-radius:14px; }
.tasa-inicio { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }

/* ==== Prueba de diseño: asistencia con leyenda a la vista y marcar varios días ==== */
.leyenda-chips { display:flex; flex-wrap:wrap; gap:4px 6px; margin:4px 0 10px; }
.chip-cod { font-size:12px; padding:2px 8px; border-radius:6px; border:1px solid rgba(0,0,0,.08); white-space:nowrap; color:#2b3540; }
.marcar-varios { background:#fff; border:1px solid var(--borde); border-radius:12px; padding:2px 14px; margin:0 0 10px; }
.marcar-varios > summary { padding:9px 0; font-weight:700; color:var(--azul); }
.marcar-varios > summary small { font-weight:400; }
.marcar-varios .rejilla { padding:4px 0 6px; }
.asis input.c.cambiada { outline:2px solid var(--oro); outline-offset:-2px; }

.grupo-menu .desplegable a small { font-weight:400; }
@media (max-width:600px) { .ahora .gris { display:block; margin:10px 0 0; } }

/* ==== Tablero y estimado de pagos ==== */
.tab-cifras { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:12px 0 16px; }
.cifra { background:#fff; border:1px solid var(--borde); border-radius:14px; padding:14px 16px; }
.cifra small { display:block; font-size:13px; color:var(--gris); }
.cifra b { display:block; font-size:24px; color:var(--azul); margin:4px 0 2px; font-variant-numeric:tabular-nums; }
.cifra span { display:block; font-size:12.5px; color:#40505f; }
.cifra em { display:block; font-style:normal; font-size:12.5px; margin-top:6px; font-weight:600; }
.cifra em.sube { color:var(--verde); } .cifra em.baja { color:var(--rojo); }
.cifra.principal { background:var(--noche); border-color:var(--noche); }
.cifra.principal small, .cifra.principal span { color:#a9bfd6; } .cifra.principal b { color:#fff; font-size:28px; }
.cifra.principal em.sube { color:#8fd694; } .cifra.principal em.baja { color:#ff9e97; }
.tab-graficos { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:12px; }
.tab-graficos .tarjeta { margin:0; } .tab-graficos h2 { margin:0 0 8px; font-size:15px; }
svg.graf { width:100%; height:auto; display:block; overflow:visible; }
.graf .rejilla-g { stroke:#e8edf2; stroke-width:1; } .graf .eje-base { stroke:#c9d3de; stroke-width:1; }
.graf text { font:11px system-ui, "Segoe UI", sans-serif; fill:#6b7280; } .graf .valor-g { fill:#1b2733; font-weight:700; font-size:12px; }
.graf .barra-g { fill:#2E75B6; } .graf .linea-g { fill:none; stroke:#2E75B6; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.graf .punto-g { fill:#2E75B6; stroke:#fff; stroke-width:2; }
.graf .zona { fill:transparent; } .graf .marca-g:hover .zona { fill:rgba(46,117,182,.06); }
.graf .marca-g:hover .barra-g, .graf .marca-g:hover .punto-g { fill:#1F4E79; }
.estimado-tasa { margin:6px 0 4px; }
.pagos-est { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin:4px 0 12px; }
.pago-est { background:#fff; border:1px solid var(--borde); border-left:4px solid var(--oro); border-radius:12px; padding:12px 14px; }
.pago-est.pagado { border-left-color:var(--verde); background:#fbfdfb; }
.pago-est header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pago-est header b { font-size:15px; color:var(--azul); }
.pago-est .monto { margin:10px 0 4px; } .pago-est .monto b { display:block; font-size:21px; font-variant-numeric:tabular-nums; }
.pago-est .monto span { font-size:13px; color:#40505f; }
@media (max-width:900px) { .tab-graficos { grid-template-columns:1fr; } }
@media print { .cifra.principal { background:#fff; } .cifra.principal b { color:var(--azul); } .cifra.principal small, .cifra.principal span { color:#40505f; } }
.tarjeta > h2:first-child { margin-top:0; }
.cifra.principal em { color:#cfe0f0; }

/* ==== Monedas: elegir en qué se ven los montos ==== */
.monedas { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-right:6px; font-size:13px; color:var(--gris); }
.chip-moneda { padding:5px 11px; border-radius:16px; border:1px solid var(--borde); background:#fff; color:#40505f; font-weight:600; font-size:13px; }
.chip-moneda:hover { text-decoration:none; border-color:var(--azul2); }
.chip-moneda.activa { background:var(--azul); border-color:var(--azul); color:#fff; }
.chip-moneda.activa::before { content:"✓ "; }
.chip-moneda.todas { border-style:dashed; }
ul.equiv { list-style:none; margin:4px 0 0; padding:0; font-size:14px; font-variant-numeric:tabular-nums; }
ul.equiv li { padding:1px 0; } ul.equiv small { color:var(--gris); }
.cifra.principal ul.equiv { color:#e7eef6; } .cifra.principal ul.equiv small { color:#a9bfd6; }
ul.tasas-cifra { list-style:none; margin:6px 0 0; padding:0; } ul.tasas-cifra li { display:flex; gap:8px; align-items:baseline; padding:2px 0; font-variant-numeric:tabular-nums; }
ul.tasas-cifra span { min-width:96px; font-size:12.5px; color:var(--gris); } ul.tasas-cifra b { color:var(--azul); font-size:16px; }
.cifra ul.equiv small { display:inline; margin-left:4px; font-size:12px; }
/* diseño anterior (se elige en Mi seguridad): la barra vuelve a ocupar varias filas */
.diseno-clasico .barra { flex-wrap:wrap; gap:22px; padding:10px 22px; }
.diseno-clasico .barra nav { display:flex; gap:6px 16px; flex:1; flex-wrap:wrap; }
.diseno-elegir { display:grid; gap:8px; max-width:720px; }
.opcion-diseno { flex-direction:row; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--borde); border-radius:10px; cursor:pointer; font-weight:400; }
.opcion-diseno:has(input:checked) { border-color:var(--azul2); background:#f3f8fd; }
.opcion-diseno b { display:block; font-size:14px; color:var(--azul); } .opcion-diseno small { display:block; font-size:12.5px; }
/* resumen de parafiscales a pagar (desde los PDF de los portales) */
.parafiscales-subir input[type=file] { max-width:280px; }
.parafiscales .total-emp td { border-top:1px solid #9bb3cc; font-weight:600; }
.parafiscales .total-general td { background:#1f4e79; color:#fff; font-size:15px; }
.estado-pf { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:700; white-space:nowrap; }
.estado-pf.por-pagar { background:#fde8e8; color:#a61b1b; }
.estado-pf.pagado, .estado-pf.al-día { background:#e3f4e8; color:#1d6b35; }
.estado-pf.sin-monto { background:#eef1f4; color:#4a5866; }
@media print { .parafiscales { font-size:11px; } .parafiscales .total-general td { background:#ddd !important; color:#000; } .estado-pf { border:1px solid #999; } }
/* pago por banco y nómina por departamento */
.pago-banco .total-emp td, .parafiscales .total-emp td { border-top:1px solid #9bb3cc; font-weight:600; }
.pago-banco .total-general td, .tabla tfoot .total-general td { background:#1f4e79; color:#fff; }
.pago-banco .fila-aviso td { background:#fff6e5; }
.grupo-emp .boton.mini { margin-left:10px; vertical-align:middle; }
@media print { .pago-banco .total-general td, .tabla tfoot .total-general td { background:#ddd !important; color:#000; } .pago-banco .fila-aviso td { background:none; } }

/* sueldo por hora: la cuenta a la vista para verificarla */
.fx-hora { background:var(--claro); border-left:4px solid var(--azul2); padding:8px 12px; margin:8px 0 12px; border-radius:6px; }
.grupo-hora { grid-column:1/-1; }
.calc-hora { grid-column:1/-1; background:var(--claro); padding:6px 10px; border-radius:6px; }
/* cronograma de turnos */
.cronograma td.trabaja { background:#eaf5ec; font-size:12px; white-space:nowrap; }
.cronograma td.libre { color:var(--gris); text-align:center; }
.cronograma-form input[type=time] { width:110px; }
.firmas-crono { display:flex; justify-content:space-around; text-align:center; margin-top:40px; }

.nov .sel-mini { font-size:12px; padding:2px 4px; margin-top:4px; width:auto; min-width:9.5em; }

/* Sin la fecha, la hora, el título y la dirección que el navegador imprime en el margen: la hoja va sin margen (ahí no
   cabe nada; el @page con margin:0 lo pone base.html al final) y el espacio lo da el cuerpo en cada página
   (box-decoration-break: clone). Parámetro IMP_FECHA = NO. */
@media print { html.sin-fecha body { padding:10mm; -webkit-box-decoration-break:clone; box-decoration-break:clone; } }