:root{
  --bg:#0f172a; --panel:#111c33; --panel2:#16233f; --line:#26375c;
  --txt:#e8eefb; --muted:#8ea3c9; --accent:#3b82f6; --accent2:#2563eb;
  --ok:#22c55e; --okbg:#0f3d24; --okbgh:#155031; --pend:#f59e0b; --pendbg:#3a2a06;
  --danger:#ef4444; --chip:#1e2f52; --nav:160px;
  --docred:rgba(239,68,68,.20); --docredh:rgba(239,68,68,.30);
  --cargablue:rgba(59,130,246,.22); --cargablueh:rgba(59,130,246,.32);
  --cargapink:rgba(236,72,153,.20); --cargapinkh:rgba(236,72,153,.30);
  --cargagreen:rgba(34,197,94,.20); --cargagreenh:rgba(34,197,94,.30);
  --finyellow:rgba(255,224,32,.55); --finyellowh:rgba(255,224,32,.68);
  --docorange:rgba(249,115,22,.38); --docorangeh:rgba(249,115,22,.50);
  --docgray:rgba(153,153,153,.32); --docgrayh:rgba(153,153,153,.44);
  --terracota:rgba(198,93,61,.38); --terracotah:rgba(198,93,61,.50);
  --presceleste:rgba(56,189,248,.30); --prescelesteh:rgba(56,189,248,.42);
  /* fondos/degradés estructurales */
  --deepbg1:#132244; --deepbg2:#0f1a33; --deepbg3:#0b1220; --deepbg4:#101d38;
  --theadbg:#0d1830; --btnhoverbg:#1c2d51; --btnhoverborder:#37507f;
  --navhoverbg:#18294a; --rowhoverbg:#13213c; --rowborder:#1a2842;
  --progbg:#0b1428; --readonlybg:#0e1a2e;
  --modalscrim:rgba(3,8,20,.75); --modalscrim2:rgba(6,12,26,.88);
  /* textos de acento sobre chips/badges */
  --blue-soft:#93c5fd; --blue-chip:#bcd0f2; --blue-muted2:#a9bde3;
  --amber-text:#fbbf24; --amber-border:#b45309; --amber-border2:#6b4c0d;
  --green-text:#4ade80; --green-border:#1c6b3d; --red-text:#fca5a5;
}
/* Paleta "Claro" alineada al logo Avance Contable (verde #0e8a3b/#0b6b2e + plata/gris neutro).
   Los colores de ESTADO (cargablue/cargapink/cargagreen/finyellow/docorange/docred, ok/pend/danger/amber)
   son semánticos —Cargado=azul, Punteado=rosa, Finalizado=amarillo, etc.— y quedan intactos a propósito:
   son parte de la lógica del Seguimiento, no del "look" de marca. Solo se recoloreó el chrome genérico. */
:root[data-theme="light"]{
  --bg:#f5f7f5; --panel:#ffffff; --panel2:#eef2ee; --line:#dbe4db;
  --txt:#1c211c; --muted:#5c6b5f; --accent:#0e8a3b; --accent2:#0b6b2e;
  --ok:#16a34a; --okbg:#dcfce7; --okbgh:#c8f4d6; --pend:#b45309; --pendbg:#fef3c7;
  --danger:#dc2626; --chip:#e1ece2; --docred:rgba(220,38,38,.30); --docredh:rgba(220,38,38,.42);
  --cargablue:rgba(37,99,235,.30); --cargablueh:rgba(37,99,235,.42);
  --cargapink:rgba(219,39,119,.40); --cargapinkh:rgba(219,39,119,.52);
  --cargagreen:rgba(22,163,74,.40); --cargagreenh:rgba(22,163,74,.52);
  --finyellow:rgba(255,214,0,.60); --finyellowh:rgba(255,214,0,.72);
  --docorange:rgba(234,88,12,.34); --docorangeh:rgba(234,88,12,.46);
  --docgray:rgba(102,102,102,.30); --docgrayh:rgba(102,102,102,.42);
  --terracota:rgba(180,83,50,.36); --terracotah:rgba(180,83,50,.48);
  --presceleste:rgba(2,132,199,.32); --prescelesteh:rgba(2,132,199,.46);
  --deepbg1:#e8f3ea; --deepbg2:#ddeee1; --deepbg3:#eef6f0; --deepbg4:#e8f3ea;
  --theadbg:#e7f1e9; --btnhoverbg:#ddeee1; --btnhoverborder:#a9cbae;
  --navhoverbg:#e1ede3; --rowhoverbg:#eef6f0; --rowborder:#e2eae3;
  --progbg:#e0ede2; --readonlybg:#e7f1e9;
  --modalscrim:rgba(30,41,59,.35); --modalscrim2:rgba(30,41,59,.30);
  --blue-soft:#0e8a3b; --blue-chip:#14532d; --blue-muted2:#2f6b3f;
  --amber-text:#92400e; --amber-border:#d99a3d; --amber-border2:#c99a4a;
  --green-text:#166534; --green-border:#3fa76a; --red-text:#b91c1c;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --bg:#f5f7f5; --panel:#ffffff; --panel2:#eef2ee; --line:#dbe4db;
    --txt:#1c211c; --muted:#5c6b5f; --accent:#0e8a3b; --accent2:#0b6b2e;
    --ok:#16a34a; --okbg:#dcfce7; --okbgh:#c8f4d6; --pend:#b45309; --pendbg:#fef3c7;
    --danger:#dc2626; --chip:#e1ece2; --docred:rgba(220,38,38,.30); --docredh:rgba(220,38,38,.42);
  --cargablue:rgba(37,99,235,.30); --cargablueh:rgba(37,99,235,.42);
  --cargapink:rgba(219,39,119,.40); --cargapinkh:rgba(219,39,119,.52);
  --cargagreen:rgba(22,163,74,.40); --cargagreenh:rgba(22,163,74,.52);
  --finyellow:rgba(255,214,0,.60); --finyellowh:rgba(255,214,0,.72);
  --docorange:rgba(234,88,12,.34); --docorangeh:rgba(234,88,12,.46);
  --docgray:rgba(102,102,102,.30); --docgrayh:rgba(102,102,102,.42);
  --terracota:rgba(180,83,50,.36); --terracotah:rgba(180,83,50,.48);
  --presceleste:rgba(2,132,199,.32); --prescelesteh:rgba(2,132,199,.46);
    --deepbg1:#e8f3ea; --deepbg2:#ddeee1; --deepbg3:#eef6f0; --deepbg4:#e8f3ea;
    --theadbg:#e7f1e9; --btnhoverbg:#ddeee1; --btnhoverborder:#a9cbae;
    --navhoverbg:#e1ede3; --rowhoverbg:#eef6f0; --rowborder:#e2eae3;
    --progbg:#e0ede2; --readonlybg:#e7f1e9;
    --modalscrim:rgba(30,41,59,.35); --modalscrim2:rgba(30,41,59,.30);
    --blue-soft:#0e8a3b; --blue-chip:#14532d; --blue-muted2:#2f6b3f;
    --amber-text:#92400e; --amber-border:#d99a3d; --amber-border2:#c99a4a;
    --green-text:#166534; --green-border:#3fa76a; --red-text:#b91c1c;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",Roboto,system-ui,Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:14px}
button{font-family:inherit;cursor:pointer}
h2.vtitle{margin:0 0 4px;font-size:20px} .vsub{color:var(--muted);font-size:13px;margin:0 0 16px}

header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,var(--deepbg1),var(--deepbg2));border-bottom:1px solid var(--line);padding:10px 16px}
.hrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-size:18px;font-weight:700;letter-spacing:.3px;display:flex;align-items:center;gap:8px}
.brand .v{font-size:14px;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));padding:5px 14px;border-radius:20px;box-shadow:0 2px 8px rgba(37,99,235,.35)}
.spacer{flex:1}
.hbtn{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.hbtn:disabled{opacity:.45;cursor:not-allowed}
/* Aviso de cumpleaños de colaboradores (encabezado) — solo se dibuja si el servidor devuelve datos, o sea
   solo para quien tenga el permiso "ver-cumpleanos". */
.hdrcumple{align-items:center;gap:6px;background:var(--chip);border:1px solid var(--accent);color:var(--txt);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px}
.hdrcumple.hoy{background:var(--accent);color:#fff}
@media(max-width:720px){ .hdrcumple{max-width:150px;padding:4px 10px} }
.hbtn:hover{background:var(--btnhoverbg);border-color:var(--btnhoverborder)}
.hbtn.primary{background:var(--accent2);border-color:var(--accent);color:#fff} .hbtn.primary:hover{background:var(--accent)}
.bellbadge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;box-shadow:0 0 0 2px var(--panel)}
.hbtn.danger{background:#fff1f2;border:1.5px solid #dc2626;color:#b91c1c;font-weight:700} .hbtn.danger:hover{background:#dc2626;border-color:#dc2626;color:#fff} .hbtn.danger:disabled{opacity:.45}   /* botón Eliminar: fondo claro + borde y texto rojos (antes marrón oscuro, poco nítido) */
.hbtn.sm{padding:4px 9px;font-size:12px}
.hbtn.locked{opacity:.55;cursor:not-allowed}
.headerlogo{height:34px;width:auto;object-fit:contain}

/* layout: main + right fixed nav */
.layout{display:block}
main{margin-left:var(--nav);padding:0 0 40px}
.sidenav{position:fixed;top:53px;left:0;bottom:0;width:var(--nav);background:linear-gradient(180deg,var(--deepbg4),var(--theadbg));border-right:1px solid var(--line);padding:14px 10px;overflow-y:auto;z-index:35}
.sidenav .navlabel{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:6px 10px 8px;text-align:center}
.navitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--txt);padding:11px 12px;border-radius:10px;font-size:14px;margin-bottom:2px}
.navitem .ic{font-size:16px;width:20px;text-align:center}
.navitem:hover{background:var(--navhoverbg)}
.navitem.active{background:var(--accent2);color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(37,99,235,.35)}
.view{display:none;padding:10px 12px} .view.show{display:block}
.appfoot{text-align:center;color:var(--muted);font-size:12px;padding:16px 12px 26px;border-top:1px solid var(--line);margin-top:10px;white-space:nowrap;overflow-x:auto}
.appfoot span{color:var(--blue-chip);font-weight:600}

/* ---- Estado view ---- */
.estbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.period{display:flex;align-items:center;gap:6px}
.period label{color:var(--muted);font-size:12px}
.period select,select.filter,.frm select,.frm input,.catadd input{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:14px}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px 12px;min-width:78px;flex:1}
.stat .n{font-size:17px;font-weight:800;line-height:1.1}
.stat .l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.stat.ok .n{color:var(--ok)} .stat.pend .n{color:var(--pend)} .stat.tot .n{color:var(--accent)} .stat.danger .n{color:var(--danger)}
.stat.clic{cursor:pointer} .stat.clic:hover{border-color:var(--accent2)}
.stat.req .n{color:var(--blue-soft)} .stat.comp .n{color:var(--amber-text)}
.pipeline{display:flex;gap:5px;flex-wrap:nowrap;align-items:center}
.stsel{background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:5px 4px;font-size:11px;width:118px;cursor:pointer}
.stsel:hover{border-color:var(--btnhoverborder)}
.stsel.set-doc{background:var(--panel2);border-color:var(--accent2);color:var(--blue-soft);font-weight:600}
.stsel.set-carga{background:var(--pendbg);border-color:var(--amber-border);color:var(--amber-text);font-weight:600}
.stsel.set-fin{background:var(--okbg);border-color:var(--green-border);color:var(--green-text);font-weight:600}
.stsel.set-extra{background:rgba(234,88,12,.18);border-color:#ea580c;color:#c2410c;font-weight:700}
.stsel.set-pausado{background:rgba(124,58,237,.16);border-color:#7c3aed;color:#7c3aed;font-weight:700}
.stsel.set-revisar{background:rgba(220,38,38,.14);border-color:var(--danger);color:var(--red-text);font-weight:700}
.stsel.locked{cursor:not-allowed;opacity:.75;background-image:linear-gradient(0deg, rgba(0,0,0,.06), rgba(0,0,0,.06))}
.stsel:disabled{cursor:not-allowed}
.progwrap{flex:2;min-width:220px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.progbar{height:9px;background:var(--progbg);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.progbar>div{height:100%;background:linear-gradient(90deg,#16a34a,#22c55e);width:0;transition:width .3s}
.progtxt{font-size:10px;color:var(--muted);display:flex;justify-content:space-between}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.search{flex:1;min-width:180px;position:relative}
.search input{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 12px 8px 34px;font-size:14px}
/* Barra de búsqueda del Histórico, más moderna/llamativa — pedido explícito del usuario ("muy feo, simple,
   pequeño"). Tarjeta con barra de color arriba, campos más grandes, botón de exportar destacado. */
.histtoolbar{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,0,0,.10);gap:12px}
.histtoolbar::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.histtoolbar .search{min-width:260px}
.histtoolbar .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.histtoolbar .search input{padding:11px 14px 11px 36px;border-radius:11px;font-size:14px}
.histtoolbar .search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.histtoolbar select{border-radius:11px;padding:10px 12px;font-size:13px}
.histtoolbar .hbtn{border-radius:11px;padding:10px 14px;font-weight:600}
.histtoolbar .tcount{font-weight:700;color:var(--accent)}
/* Dashboard por colaborador (Histórico) — tarjetas de estadísticas + una tarjeta por persona con avatar,
   barra de progreso y sus acciones más frecuentes. Inspirado en un panel de admin moderno (tarjetas de
   color, avatares circulares) que mostró el usuario como referencia. */
.histdash{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,0,0,.10)}
.histcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.histcard{display:flex;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px}
.histavatar{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.histcardbody{flex:1;min-width:0}
.histcardtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.histcardname{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.histcardcount{font-size:16px;font-weight:800}
.histbartrack{background:var(--rowborder);border-radius:20px;height:8px;overflow:hidden}
.histbarfill{height:100%;border-radius:20px;transition:width .3s}
.histcardacciones{font-size:11px;color:var(--muted);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search svg{position:absolute;left:10px;top:9px;opacity:.5}
select.filter{max-width:160px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:var(--panel2);color:var(--muted);border:none;padding:8px 12px;font-size:13px}
.seg button.active{background:var(--accent2);color:#fff}
.tcount{color:var(--muted);font-size:12px;white-space:nowrap}

.tablewrap{overflow:auto;max-height:calc(100vh - 260px);border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%}
.tablewrap table{min-width:650px}
/* El detalle de Encargado/Grupo (RRHH > Ficha Cliente) es una tabla chica de 2 columnas (Cliente +
   Honorario) — el min-width:650px genérico de arriba (pensado para las tablas grandes del sistema) la
   obligaba a pedir scroll horizontal sin necesidad. Pedido explícito: "no quiero barra de rolagen". */
#modalRrhhFcDetalle .tablewrap table{min-width:0}
thead th{position:sticky;top:0;background:var(--theadbg);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.3px;text-align:left;padding:5px 4px;border-bottom:2px solid var(--line);white-space:nowrap;z-index:5}
thead tr.subhead th{font-size:9px;text-align:center;padding:4px 3px;border-bottom:2px solid var(--line)}
thead th.seg-title{text-align:center}
thead tr.grouphead th{position:sticky;top:0;z-index:6;text-align:center;font-weight:700;background:color-mix(in srgb, var(--theadbg) 100%, black 12%);border:2px solid #000}
.tablewrap td.tdsel{padding:4px 4px}
.tablewrap td.tdnum{padding:4px 4px}
.ivainput{width:100%;min-width:65px;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:4px 5px;font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums}
.ivainput:focus{outline:none;border-color:var(--accent);text-align:left}
.ivainput:disabled{opacity:.55;cursor:not-allowed;background:var(--panel2)}
.impinput{width:100%;min-width:75px;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:4px 5px;font-size:11.5px}
.impinput:focus{outline:none;border-color:var(--accent)}
.tablewrap .stsel{width:100%;min-width:68px}
tbody td{padding:4px 5px;font-size:12.5px;border-bottom:1px solid var(--rowborder);vertical-align:middle}
tbody tr:hover{background:var(--rowhoverbg)}
/* Prioridad de color de fila: Finalizado (amarillo) > Cargado (azul/rosado/verde) > Documento (rojo parcial/total) */
tbody tr.fin-yellow{background:var(--finyellow)} tbody tr.fin-yellow:hover{background:var(--finyellowh)}
tbody tr.rl-libro{background:rgba(34,197,94,.60)} tbody tr.rl-libro:hover{background:rgba(34,197,94,.70)}
tbody tr.rl-ruc-proceso{background:rgba(59,130,246,.30)} tbody tr.rl-ruc-proceso:hover{background:rgba(59,130,246,.40)}
tbody tr.rl-ruc-pendiente{background:var(--terracotah)} tbody tr.rl-ruc-pendiente:hover{background:var(--terracota)}
tbody tr.rl-ruc-finalizado{background:rgba(59,130,246,.60)} tbody tr.rl-ruc-finalizado:hover{background:rgba(59,130,246,.70)}
tbody tr.doc-tarde{background:var(--docorange)} tbody tr.doc-tarde:hover{background:var(--docorangeh)}
tbody tr.doc-sinmov{background:var(--docgray)} tbody tr.doc-sinmov:hover{background:var(--docgrayh)}
tbody tr.carga-blue{background:var(--cargablue)} tbody tr.carga-blue:hover{background:var(--cargablueh)}
tbody tr.carga-blue-mitad{background:linear-gradient(90deg, var(--cargablue) 0%, var(--cargablue) 50%, transparent 50%)}
tbody tr.carga-blue-mitad:hover{background:linear-gradient(90deg, var(--cargablueh) 0%, var(--cargablueh) 50%, var(--rowhoverbg) 50%)}
tbody tr.carga-pink{background:var(--cargapink)} tbody tr.carga-pink:hover{background:var(--cargapinkh)}
tbody tr.carga-pink-mitad{background:linear-gradient(90deg, var(--cargapink) 0%, var(--cargapink) 50%, transparent 50%)}
tbody tr.carga-pink-mitad:hover{background:linear-gradient(90deg, var(--cargapinkh) 0%, var(--cargapinkh) 50%, var(--rowhoverbg) 50%)}
tbody tr.carga-green{background:var(--cargagreen)} tbody tr.carga-green:hover{background:var(--cargagreenh)}
tbody tr.doc-partial-sm{background:linear-gradient(90deg, var(--docred) 0%, var(--docred) 30%, transparent 30%)}
tbody tr.doc-partial{background:linear-gradient(90deg, var(--docred) 0%, var(--docred) 55%, transparent 55%)}
tbody tr.doc-full{background:var(--docred)}
tbody tr.doc-partial-sm:hover{background:linear-gradient(90deg, var(--docredh) 0%, var(--docredh) 30%, var(--rowhoverbg) 30%)}
tbody tr.doc-partial:hover{background:linear-gradient(90deg, var(--docredh) 0%, var(--docredh) 55%, var(--rowhoverbg) 55%)}
tbody tr.doc-full:hover{background:var(--docredh)}
/* Lista Impuesto: Presentado colorea la fila ENTERA — Verificado=30% celeste, Informado=100% verde, ver presentadoRowClass().
   Nomina Salarial reutiliza tr.pres-full para su propio "Presentado" (Si=100% verde), ver renderNomina(). */
tbody tr.pres-partial{background:linear-gradient(90deg, var(--presceleste) 0%, var(--presceleste) 30%, transparent 30%)}
tbody tr.pres-partial:hover{background:linear-gradient(90deg, var(--prescelesteh) 0%, var(--prescelesteh) 30%, var(--rowhoverbg) 30%)}
tbody tr.pres-full{background:var(--cargagreen)}
tbody tr.pres-full:hover{background:var(--cargagreenh)}
/* Lista Impuesto — Revisado/Informado/Presentado (3 campos propios, ver impRowClass en ui/impuesto.js) */
tbody tr.imp-revisado{background:var(--presceleste)} tbody tr.imp-revisado:hover{background:var(--prescelesteh)}
tbody tr.imp-informado-si{background:var(--cargagreen)} tbody tr.imp-informado-si:hover{background:var(--cargagreenh)}
tbody tr.imp-informado-mas{background:var(--terracota)} tbody tr.imp-informado-mas:hover{background:var(--terracotah)}
tbody tr.imp-informado-problema{background:#dc2626;color:#fff} tbody tr.imp-informado-problema:hover{background:#b91c1c}
tbody tr.imp-informado-problema td{color:#fff}
tbody tr.imp-informado-problema .cli{color:#fff}
tbody tr.imp-presentado-parcial{background:linear-gradient(90deg, var(--finyellow) 0%, var(--finyellow) 30%, transparent 30%)}
tbody tr.imp-presentado-parcial:hover{background:linear-gradient(90deg, var(--finyellowh) 0%, var(--finyellowh) 30%, var(--rowhoverbg) 30%)}
tbody tr.imp-presentado-total{background:var(--finyellow)} tbody tr.imp-presentado-total:hover{background:var(--finyellowh)}
/* SIARA — 3 niveles de color por prioridad (ver pintarSiara en ui/siaraPatente.js): Constancia Final=Si
   gana siempre (amarillo 100%, tr.fin-yellow ya definido arriba), si no Presentado=Si (verde 100%,
   tr.pres-full), si no Firmado Elect=Si (verde 50%, acá). */
tbody tr.siara-firmado-mitad{background:linear-gradient(90deg, var(--cargagreen) 0%, var(--cargagreen) 50%, transparent 50%)}
tbody tr.siara-firmado-mitad:hover{background:linear-gradient(90deg, var(--cargagreenh) 0%, var(--cargagreenh) 50%, var(--rowhoverbg) 50%)}
.chk{width:34px;text-align:center}
.chk input{width:20px;height:20px;cursor:pointer;accent-color:var(--ok)}
.cli{font-weight:600;cursor:pointer;display:inline-block;max-width:160px}
.cli:hover{color:var(--blue-soft);text-decoration:underline}
.ruc{font-variant-numeric:tabular-nums;color:var(--muted)}
.venc{text-align:center;font-weight:700}
.chip{display:inline-block;background:var(--chip);border:1px solid var(--line);border-radius:20px;padding:2px 9px;font-size:11px;color:var(--blue-chip)}
.oblig{font-size:11px;color:var(--blue-muted2);max-width:220px;overflow-wrap:anywhere}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px}
.badge.p{background:var(--okbg);color:var(--green-text);border:1px solid var(--green-border)}
.badge.n{background:var(--pendbg);color:var(--amber-text);border:1px solid var(--amber-border2)}
.fecha{font-size:10px;color:var(--muted);display:block;margin-top:2px}
.obsdot{color:var(--pend);cursor:help}
.empty{text-align:center;color:var(--muted);padding:40px}

/* ---- Form (Cadastrar) ---- */
.frm{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px}
/* "Nuevo recordatorio" (Agenda) más moderno/llamativo — pedido explícito del usuario ("muy simple y feo").
   Escopeado a #view-agenda para no afectar el resto de los formularios que también usan .frm (ej. Cadastrar). */
#view-agenda .frm{position:relative;overflow:hidden;border-radius:18px;padding:24px 22px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
#view-agenda .frm::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.frmtitle{font-size:16px;font-weight:800;margin:0 0 16px;display:flex;align-items:center;gap:8px}
#view-agenda .fld label{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.5px}
#view-agenda .fld input{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:14px;transition:border-color .15s,box-shadow .15s}
#view-agenda .fld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
#view-agenda .frm > p.vsub{background:var(--panel2);border-radius:10px;padding:10px 12px;margin:14px 0 0}
#view-agenda .frmfoot .hbtn.primary{padding:12px 22px;border-radius:11px;font-weight:700}
#ag_asignados{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
/* Fila "Repetir cada X unidad por N vez(es)" — el select se estaba estirando al 100% (heredaba la regla
   .fld select{width:100%}) y rompía el flex a una fila por elemento, quedando feo. Ancho fijo para el
   número y el select, todo en una sola fila prolija con fondo suave. */
.repbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-top:4px}
.repbox span{font-size:13px;color:var(--txt)}
.repbox input[type="number"]{width:62px!important;flex:none;text-align:center}
.repbox select{width:auto!important;flex:none;min-width:110px}
/* Plan de acción — pedido explícito: "deja esta ventana mas moderna lineas mas aredondeadas, buena
   aparencia, moderna y limpia". Mismo lenguaje visual que #view-agenda (líneas más redondeadas, sombra
   suave, franja de acento arriba del formulario) aplicado acá: filas de plan en la lista, y cada acción
   del detalle como su propia "card" redondeada en vez de un simple <div> con borde fino. */
#view-planaccion .frm{position:relative;overflow:hidden;border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.10)}
#view-planaccion .frm::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
#view-planaccion .fld label{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.5px;text-transform:uppercase}
#view-planaccion input[type="text"],#view-planaccion input:not([type]),#view-planaccion textarea,#view-planaccion select{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 13px;font-size:14px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
#view-planaccion input:focus,#view-planaccion textarea:focus,#view-planaccion select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.planaccion-planrow{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;box-shadow:0 4px 14px rgba(0,0,0,.06);transition:transform .15s,box-shadow .15s}
.planaccion-planrow:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.10)}
.planaccion-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.planaccion-card.hecho{background:var(--deepbg4);border-color:var(--line)}
.planaccion-card textarea{width:100%;border:none;background:transparent;padding:2px 0;resize:vertical}
.planaccion-card .obs textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin-top:4px}
.planaccion-card input[type="checkbox"]{width:19px;height:19px;accent-color:var(--accent);cursor:pointer;flex:none}
.planaccion-card select{font-size:12px;padding:5px 8px;border-radius:9px}
.planaccion-card .top{display:flex;gap:10px;align-items:flex-start}
.planaccion-card .meta{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.planaccion-card .meta label{font-size:11px;color:var(--muted)}

/* Perfil del Contribuyente — documento por cliente armado con Cadastrar Clientes + Manual de Obligaciones. */
.perfilcliente-doc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 28px;box-shadow:0 10px 30px rgba(0,0,0,.10);max-width:820px}
.perfilcliente-fecha{text-align:right;color:var(--muted);font-size:12px;margin-bottom:6px}
.perfilcliente-head{display:flex;gap:22px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin:10px 0 18px;font-size:14px}
.perfilcliente-doc h3{font-size:14px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.4px;margin:22px 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.perfilcliente-doc h3:first-of-type{margin-top:0}
.perfilcliente-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:14px}
.perfilcliente-list li::marker{color:var(--accent)}
.perfilcliente-list.dos-col{display:block;column-count:2;column-gap:36px}
.perfilcliente-list.dos-col li{break-inside:avoid;margin-bottom:5px}
@media(max-width:560px){ .perfilcliente-list.dos-col{column-count:1} }
.perfilcliente-cat{font-weight:800;font-size:13px;margin:14px 0 6px;color:var(--txt)}
#perfilCliente_notas{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:14px;font-family:inherit;resize:vertical}
.perfilcliente-notas-print{display:none}
.perfilcliente-membrete{display:none}

/* Presupuesto (Control Interno): hoja de papel con campos amarillos editables (ver ui/presupuesto.js). La hoja es
   siempre blanca con texto oscuro, aunque la app esté en modo oscuro — es un documento para imprimir. */
.presup-doc{background:#fff;color:#111;font-family:Calibri,Arial,sans-serif;font-size:13.5px;line-height:1.5;max-width:860px;margin:0 auto 30px;padding:38px 46px;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.presup-doc .pd-membrete{display:flex;align-items:center;gap:22px;border-bottom:3px solid #16a34a;padding-bottom:12px;margin-bottom:20px}
.presup-doc .pd-membrete img{height:78px;width:auto}
.presup-doc .pd-mtxt{font-size:12.5px;line-height:1.55;color:#222}
.presup-doc .pd-mtxt b{color:#15803d;letter-spacing:.4px}
.presup-doc .pd-titulo{text-align:center;font-size:19px;font-weight:800;margin:6px 0 4px;color:#111}
.presup-doc .pd-sub{text-align:center;margin:0 0 16px}
.presup-doc .pd-just{text-align:justify;margin:8px 0}
.presup-doc .pd-h3{font-size:14px;font-weight:800;margin:18px 0 6px}
.presup-doc .pc-cl{font-size:13.5px;font-weight:800;margin:18px 0 4px;color:#111}
.presup-doc .pd-tabla{width:100%;border-collapse:collapse;margin:8px 0}
.presup-doc .pd-tabla th,.presup-doc .pd-tabla td{border:1px solid #9ca3af;padding:6px 10px;text-align:left;vertical-align:top;font-size:13px}
.presup-doc .pd-tabla th{background:#f3f4f6;font-weight:700;width:30%}
.presup-doc .pd-tabla th.pd-seccion{background:#16a34a;color:#fff;width:auto;font-size:13.5px}
.presup-doc .pd-datos th{width:18%}
.presup-doc ul{margin:4px 0;padding-left:20px}
.presup-doc .pd-bul{margin:8px 0}
.presup-doc .pd-firma{text-align:right;margin-top:34px}
.presup-doc .pd-firma p{margin:2px 0}
.presup-doc .pd-firmas{width:100%;margin-top:46px;border-collapse:collapse}
.presup-doc .pd-firmas td{width:50%;text-align:center;padding:0 18px;font-size:12.5px}
.presup-doc .pd-linea{border-top:1px solid #111;margin-bottom:4px}
.presup-doc .pc-chk{margin:4px 0}
.presup-doc .pck{cursor:pointer;font-size:16px;line-height:1;user-select:none}
/* Campos en amarillo: el "highlight" del modelo de Word, editables en el lugar. */
.pf{background:#fff59d;border-bottom:1px dashed #b59f00;padding:0 3px;border-radius:2px;outline:none;display:inline-block;min-width:2.2em;cursor:text}
.pf:focus{background:#ffee58;box-shadow:0 0 0 2px rgba(181,159,0,.45)}
.presup-barra{flex-wrap:wrap}

@media print{
  body.print-perfil-cliente *{visibility:hidden}
  body.print-perfil-cliente #view-perfilcliente, body.print-perfil-cliente #view-perfilcliente *{visibility:visible}
  /* zoom:.8 = todo el texto al 80% al imprimir (pedido explícito) */
  body.print-perfil-cliente #view-perfilcliente{position:absolute;top:0;left:0;width:100%;background:#fff;color:#000;padding:20px;zoom:.8}
  body.print-perfil-cliente .perfilcliente-membrete{display:flex;align-items:center;gap:22px;border-bottom:3px solid #16a34a;padding-bottom:12px;margin-bottom:18px}
  body.print-perfil-cliente .perfilcliente-membrete img{height:86px;width:auto}
  body.print-perfil-cliente .perfilcliente-membrete .mtxt{font-size:13px;line-height:1.6;color:#222}
  body.print-perfil-cliente .perfilcliente-membrete .m1{font-weight:800;letter-spacing:.5px;color:#15803d}
  body.print-perfil-cliente .perfilcliente-doc{border:none;box-shadow:none;max-width:none;padding:0}
  body.print-perfil-cliente .no-print{display:none!important}
  body.print-perfil-cliente .perfilcliente-notas-print{display:block;white-space:pre-wrap;font-size:13px;border:1px solid #999;border-radius:6px;padding:10px 12px}
  body.print-perfil-cliente .perfilcliente-doc h3{color:#000}

  /* Presupuesto: solo se imprime la hoja abierta; los campos amarillos salen como texto normal (sin resaltado). */
  body.print-presup *{visibility:hidden}
  body.print-presup .presup-doc.presup-imprimir, body.print-presup .presup-doc.presup-imprimir *{visibility:visible}
  body.print-presup .presup-doc.presup-imprimir{position:absolute;top:0;left:0;width:100%;max-width:none;margin:0;padding:14mm 16mm;border:none;box-shadow:none;border-radius:0;font-size:12px}
  body.print-presup .pf{background:none!important;border:none!important;box-shadow:none!important;padding:0;min-width:0}
  body.print-presup .pd-tabla th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.print-presup .pd-tabla th.pd-seccion{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.print-presup .pd-membrete{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.frmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 14px}
.fld{display:flex;flex-direction:column;gap:4px}
.fld label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.fld input,.fld select{width:100%}
.fld input[readonly]{opacity:.7;cursor:not-allowed;background:var(--readonlybg);color:var(--accent);font-weight:700}
.fld.req label::after{content:" *";color:var(--danger)}
.fld-wide{grid-column:1/-1}
.obligchecks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:5px 14px;max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--panel2)}
.obligchecks label{display:flex;gap:8px;align-items:center;font-size:12px;cursor:pointer;text-transform:none;letter-spacing:0;color:var(--txt)}
.obligchecks input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.obligchecks b{color:var(--accent);font-variant-numeric:tabular-nums}
.oblignote{font-size:11px;color:var(--pend);margin-top:5px}
.minihelp{background:var(--chip);border:1px solid var(--line);color:var(--blue-soft);border-radius:20px;font-size:10px;padding:1px 8px;cursor:pointer;margin-left:6px;text-transform:none;letter-spacing:0}
.minihelp:hover{background:var(--accent2);color:#fff;border-color:var(--accent)}
#modalObl textarea{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:14px;font-family:inherit;resize:vertical;width:100%}
#modalObl textarea:focus,#modalObl input:focus{outline:none;border-color:var(--accent)}
#manualPopBody{max-height:60vh;overflow:auto}
.frmfoot{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
.editing-banner{background:var(--chip);border:1px solid var(--accent);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--blue-chip);display:none}
.editing-banner.show{display:inline-block}

/* ---- Catalog views ---- */
.catadd{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.catadd input{flex:1;min-width:200px;max-width:420px}
.cattable{width:100%;border-collapse:collapse;max-width:820px;table-layout:fixed}
.cattable th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:2px solid var(--line)}
.cattable td{padding:9px 10px;border-bottom:1px solid var(--rowborder);overflow-wrap:anywhere;word-break:break-word}
.cattable td:first-child{font-weight:600}
.cattable tr:nth-child(even){background:var(--rowstripe,rgba(127,127,127,.06))}
.cattable tr:hover{background:var(--rowhoverbg)}
.usecount{background:var(--chip);border:1px solid var(--line);border-radius:20px;padding:2px 9px;font-size:12px;color:var(--blue-chip)}
.usecount.clickable{cursor:pointer}
.usecount.clickable:hover{background:var(--accent2);color:#fff;border-color:var(--accent)}
.mlrow{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--rowborder)}
.mlrow:last-child{border-bottom:none}
.mlinfo{flex:1;min-width:0}
.mlname{font-weight:600}
.mlmeta{font-size:11px;color:var(--muted);margin-top:2px}

/* Utilitarios: tarjetas de colores (grid), en vez de la lista simple de antes */
#utilitariosBody,#controlInternoBody{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.utilcard{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.utilcard:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.15);border-color:var(--btnhoverborder)}
/* Tarjeta del módulo en el que se está trabajando ahora mismo (ej. RRHH) — tono más oscuro para
   distinguirla de un vistazo del resto — pedido explícito: "me da un tono más oscuro para saber cuál
   estoy en el momento trabajando". */
.utilcard.active{background:var(--deepbg4);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.utilicon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;color:#fff}
.utilinfo{min-width:0}
.utilname{font-weight:700;font-size:14px}
.utildesc{font-size:11px;color:var(--muted);margin-top:2px}
.rowacts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* Préstamo Bancario: tarjetas en vez de tabla ancha — pedido explícito ("como si fuera un sistema operativo,
   más simple la carga") en vez de editar celda por celda en una tabla con scroll horizontal. */
.cipcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-bottom:6px}
.cipcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cipcard .ciphead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
.cipcard .cipnombre{font-weight:700;font-size:13px}
.cipcard .cipfila{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;border-bottom:1px dashed var(--line)}
.cipcard .cipfila:last-of-type{border-bottom:none}
.cipcard .cipfila .l{color:var(--muted)}
.cipcard .cipacts{display:flex;gap:6px;justify-content:flex-end;margin-top:10px}
.cipcard .cipcuotarow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.cipcard .cipcuotarow:last-of-type{border-bottom:none}
.cipcard .cipcuotarow .l{color:var(--muted)}

/* modal */
.modal{position:fixed;inset:0;background:var(--modalscrim);display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal.show{display:flex}
/* Todas las ventanas emergentes (modales) del sistema se pueden agrandar/achicar arrastrando — pedido
   explícito: "dejar el tamaño de la ventana que pueda agrandar conforme mi necesidad... para los lados que
   más necesito". El "resize:both" nativo del navegador solo da una agarradera en la esquina inferior
   derecha (y además chocaba con la barra de scroll horizontal de las tablas de adentro, por eso "solo
   dejaba agrandar para abajo") — se reemplaza por agarraderas propias en los 4 bordes + las 2 esquinas de
   abajo, armadas en js/ui/modalResize.js. OJO: antes el ancho era "width:100%" (se estira solo hasta
   max-width), así que el ancho ya nacía pegado al techo y no quedaba margen para agrandar — por eso el
   ancho de apertura queda fijo (mismo tamaño de siempre) y max-width pasa a ser un techo bien más alto,
   solo para el arrastre. min-width/min-height evitan que se pueda achicar tanto que quede inusable. */
.card{background:var(--panel);border:1px solid var(--line);width:560px;max-width:min(95vw,1300px);border-radius:16px;max-height:88vh;overflow:auto;resize:none;min-width:280px;min-height:120px;position:relative}
/* OJO: las agarraderas tienen que quedar DENTRO del borde (0, no -5px) — el .card tiene overflow:auto para
   su propio scroll interno, y cualquier hijo posicionado afuera del borde queda recortado/invisible por ese
   mismo overflow. Por eso antes no se veían ni se podían agarrar (bug real, encontrado tras el aviso de la
   usuaria: "no consigo estirar mi ventana"). z-index alto para quedar por encima de tablas/inputs de adentro. */
.mresize{position:absolute;z-index:50;-webkit-user-select:none;user-select:none}
.mresize.mr-e{top:0;right:0;width:8px;height:100%;cursor:ew-resize}
.mresize.mr-w{top:0;left:0;width:8px;height:100%;cursor:ew-resize}
.mresize.mr-s{left:0;bottom:0;width:100%;height:8px;cursor:ns-resize}
.mresize.mr-se{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}
.mresize.mr-sw{left:0;bottom:0;width:16px;height:16px;cursor:nesw-resize}
.mresize:hover,.mresize.mresizing{background:var(--accent);opacity:.35}
/* Ficha individual de colaborador (Histórico): más ancha — pedido explícito, tiene tablas (tiempo por
   cliente + detalle de movimientos) que quedaban muy apretadas en el ancho chico genérico. */
#modalHistUsuario .card{width:900px;max-width:min(95vw,1400px)}
#modalRrhhFerias .card{width:720px;max-width:min(95vw,1300px)}
.card h3{margin:0;padding:16px 20px;border-bottom:1px solid var(--line);font-size:17px;display:flex;justify-content:space-between;align-items:center}
.card h3 .x{background:none;border:none;color:var(--muted);font-size:22px;line-height:1}
.dgrid{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;padding:18px 20px}
.dgrid .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.dgrid .val{word-break:break-word}
.cardfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
/* Editor "Compromiso" de Agenda: los botones de acción (Resolvido/Alterar/Excluir, a veces solo 2 si no
   sos admin) llenan todo el ancho en partes iguales — con justify-content:flex-end normal, con solo 2
   botones quedaba todo apretado a la derecha y se veía desbalanceado/feo. */
#modalEditarAgenda .cardfoot{justify-content:stretch}
#modalEditarAgenda .cardfoot .hbtn{flex:1;justify-content:center;padding:10px 14px;font-weight:600}
/* Look más moderno para "Alterar Compromiso" — pedido explícito del usuario ("muy simple") */
#modalEditarAgenda .card{position:relative;overflow-y:auto;overflow-x:hidden;border-radius:18px}
#modalEditarAgenda .card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:1}
#modalEditarAgenda .card h3{padding:22px 22px 16px;border-bottom:none;font-size:19px;font-weight:800;gap:10px}
#modalEditarAgenda .card h3 .x{width:30px;height:30px;border-radius:9px;background:var(--panel2);font-size:18px}
#modalEditarAgenda .card h3 .x:hover{background:var(--btnhoverbg)}
#modalEditarAgenda .frmgrid{padding:4px 22px 8px;gap:16px 18px}
#modalEditarAgenda .fld label{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.5px}
#modalEditarAgenda .fld input,#modalEditarAgenda .fld textarea{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:14px;transition:border-color .15s,box-shadow .15s}
#modalEditarAgenda .fld input:focus,#modalEditarAgenda .fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
/* Selector de HIJO DIRECTO a propósito: el checkbox "Resuelto" es hermano directo de .frmgrid dentro de
   .card, pero los checkboxes de "Avisar a" están anidados adentro de #edag_asignados — un selector menos
   específico (ej. label[style*="cursor:pointer"]) les pegaba a los dos por error, inflándolos a cajas
   grandes y feas. */
#modalEditarAgenda > .card > label{margin:10px 22px 0;padding:10px 12px;background:var(--panel2);border-radius:10px;border:1px solid var(--line)}
#modalEditarAgenda .cardfoot{padding:18px 22px 22px;border-top:none}
#modalEditarAgenda .cardfoot .hbtn{border-radius:11px;padding:12px 14px}
/* "Nuevo recordatorio" (ventana emergente del 🔔 en cualquier campo de fecha) — mismo look moderno */
#modalRecordatorioRapido .card{position:relative;overflow-y:auto;overflow-x:hidden;border-radius:18px}
#modalRecordatorioRapido .card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:1}
#modalRecordatorioRapido .card h3{padding:22px 22px 16px;border-bottom:none;font-size:19px;font-weight:800;gap:10px}
#modalRecordatorioRapido .card h3 .x{width:30px;height:30px;border-radius:9px;background:var(--panel2);font-size:18px}
#modalRecordatorioRapido .card h3 .x:hover{background:var(--btnhoverbg)}
#modalRecordatorioRapido .frmgrid{padding:4px 22px 8px;gap:16px 18px}
#modalRecordatorioRapido .fld label{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.5px}
#modalRecordatorioRapido .fld input,#modalRecordatorioRapido .fld textarea{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:14px;transition:border-color .15s,box-shadow .15s}
#modalRecordatorioRapido .fld input:focus,#modalRecordatorioRapido .fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
#modalRecordatorioRapido #rr_asignados{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
#modalRecordatorioRapido > .card > p.vsub{margin:8px 22px 0;padding:10px 12px;background:var(--panel2);border-radius:10px}
#modalRecordatorioRapido .cardfoot{padding:18px 22px 22px;border-top:none;justify-content:stretch}
#modalRecordatorioRapido .cardfoot .hbtn{flex:1;justify-content:center;border-radius:11px;padding:12px 14px;font-weight:600}
.toast{position:fixed;bottom:20px;left:calc(50% + var(--nav)/2);transform:translateX(-50%);background:var(--deepbg1);border:1px solid var(--accent);color:var(--txt);padding:10px 18px;border-radius:10px;z-index:70;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.show{opacity:1}
#bannerActualizacion{position:fixed;top:0;left:0;right:0;z-index:300;background:var(--accent);color:#fff;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
#bannerActualizacion button{background:#fff;color:var(--accent);border:none;border-radius:8px;padding:6px 14px;font-weight:600;cursor:pointer;font-size:13px}
#bannerActualizacion button:hover{opacity:.9}
#bannerOffline{display:none;position:fixed;top:0;left:0;right:0;z-index:300;background:#b45309;color:#fff;padding:10px 16px;text-align:center;font-size:13px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.3)}
#loadOverlay{position:fixed;inset:0;background:var(--modalscrim2);display:flex;align-items:center;justify-content:center;z-index:200}
.lbox{text-align:center;color:var(--txt)}
.lspin{width:44px;height:44px;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin:0 auto 14px;animation:lspin 1s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}
.lmsg{font-size:14px;color:var(--muted)}
#authOverlay{position:fixed;inset:0;background:radial-gradient(ellipse at top,var(--deepbg1),var(--deepbg3));display:none;align-items:center;justify-content:center;z-index:300;padding:16px}
.authbox{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px 26px 28px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.authbox::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.authbadge{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 2px;box-shadow:0 10px 26px rgba(37,99,235,.4)}
.authtitle{font-size:21px;font-weight:800;text-align:center;letter-spacing:.2px}
.authsub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:6px}
.authlabel{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:-6px}
.authbox input{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-size:15px;width:100%}
.authbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.authpasswrap{position:relative;display:flex}
.authpasswrap input{padding-right:42px}
.autheye{position:absolute;right:4px;top:0;bottom:0;background:none;border:none;cursor:pointer;font-size:17px;padding:0 10px;opacity:.65;line-height:1}
.autheye:hover{opacity:1}
.authbox #authBtn{justify-content:center;padding:12px;font-size:15px;margin-top:6px;border-radius:10px;font-weight:700}
.autherr{color:var(--red-text);font-size:13px;min-height:16px;text-align:center}
.authok{color:var(--green-text);font-size:13px;text-align:center}
.authfields{display:flex;flex-direction:column;gap:12px}
.authlink{color:var(--accent);font-size:13px;text-align:center;text-decoration:none;margin-top:-4px}
.authlink:hover{text-decoration:underline}

@media(max-width:720px){
  :root{--nav:0px}
  .layout{display:flex;flex-direction:column}
  main{margin-right:0}
  .sidenav{order:-1;position:sticky;top:53px;width:auto;height:auto;bottom:auto;border-right:none;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:8px}
  .sidenav .navlabel{display:none}
  .navitem{width:auto;white-space:nowrap;margin-bottom:0}
  .toast{left:50%}
}

/* Imprimir el Resumen por Encargado (🖨 Imprimir): oculta todo menos el contenido del modal. */
@media print{
  body *{visibility:hidden}
  #modalResumen, #modalResumen *{visibility:visible}
  #modalResumen{position:absolute;top:0;left:0;width:100%;background:#fff;color:#000}
  #modalResumen .card{max-width:none;max-height:none;box-shadow:none;border:none}
  #modalResumen .card h3 .x, #modalResumen .cardfoot{display:none}

  /* Resumen (Histórico > 📊 Resumen > 🖨 Imprimir / PDF) e individual (tarjeta de colaborador > 🖨 Imprimir) —
     cada uno se activa con una clase en <body> puesta justo antes de window.print(), así no se pisan entre
     sí ni con el Resumen por Encargado de arriba. */
  body.print-hist-dash *{visibility:hidden}
  body.print-hist-dash #histDashboard, body.print-hist-dash #histDashboard *{visibility:visible}
  body.print-hist-dash #histDashboard{position:absolute;top:0;left:0;width:100%;background:#fff;color:#000;padding:20px}
  body.print-hist-usr *{visibility:hidden}
  body.print-hist-usr #modalHistUsuario, body.print-hist-usr #modalHistUsuario *{visibility:visible}
  body.print-hist-usr #modalHistUsuario{position:absolute;top:0;left:0;width:100%;background:#fff;color:#000}
  body.print-hist-usr #modalHistUsuario .card{max-width:none;max-height:none;box-shadow:none;border:none}
  body.print-hist-usr #modalHistUsuario .card h3 .x, body.print-hist-usr #modalHistUsuario .cardfoot{display:none}

  body.print-hist-informe *{visibility:hidden}
  body.print-hist-informe #histInforme, body.print-hist-informe #histInforme *{visibility:visible}
  body.print-hist-informe #histInforme{position:absolute;top:0;left:0;width:100%;background:#fff;color:#000;padding:20px}

  body.print-rrhh-recibo *{visibility:hidden}
  body.print-rrhh-recibo #reciboRrhhWrap, body.print-rrhh-recibo #reciboRrhhWrap *{visibility:visible}
  body.print-rrhh-recibo #reciboRrhhWrap{display:block!important;position:absolute;top:0;left:0;width:100%;background:#fff;color:#000;padding:20px}
  .recibo-rrhh{max-width:620px;margin:0 auto 40px;padding:20px 0;border-bottom:1px dashed #999;page-break-inside:avoid}
  .recibo-rrhh:last-child{border-bottom:none}
  .recibo-rrhh table{width:100%;border-collapse:collapse;margin:14px 0}
  .recibo-rrhh th,.recibo-rrhh td{border:1px solid #999;padding:6px 10px;font-size:13px;text-align:left}
  .recibo-rrhh td.num{text-align:right}
  .recibo-rrhh .firma{margin-top:50px;display:flex;justify-content:space-between;font-size:12px}
  .recibo-rrhh .firma div{width:45%;border-top:1px solid #000;text-align:center;padding-top:4px}
  .cert-rrhh{max-width:680px;margin:0 auto 40px;padding:20px 0;page-break-inside:avoid;color:#000}
  .cert-letterhead{display:flex;align-items:center;gap:16px;margin-bottom:22px}
  .cert-letterhead img{width:150px;height:auto}
  .cert-tagline{font-size:11px;line-height:1.5}
  .cert-title{text-align:center;text-decoration:underline;font-size:16px;letter-spacing:.5px;margin:26px 0}
  .cert-parrafo{font-size:13.5px;line-height:1.9;text-align:justify;margin:0 0 18px}
  .cert-firma{margin-top:60px;text-align:center;font-size:12px}
  .cert-firma-linea{border-top:1px solid #000;width:280px;margin:0 auto 6px}
}
.pfs{background:#fff59d;border:none;border-bottom:1px dashed #b59f00;border-radius:2px;font:inherit;font-weight:inherit;color:inherit;padding:0 2px;cursor:pointer;max-width:100%}
.pfs:focus{background:#ffee58;outline:none;box-shadow:0 0 0 2px rgba(181,159,0,.45)}
@media print{ body.print-presup .pfs{background:none!important;border:none!important;box-shadow:none!important;padding:0;-webkit-appearance:none;appearance:none} }
.permsec{margin:0 0 22px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.permsec-h{font-size:15px;font-weight:800;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.permsec-h span{font-size:11px;font-weight:500;color:var(--muted);margin-left:6px}
.permsub{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 6px 26px}
.presup-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.presup-glist{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:6px 8px}
.presup-grows{max-height:130px;overflow:auto}
.presup-gq{width:100%;box-sizing:border-box;margin:0 0 6px;padding:5px 8px;font-size:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:inherit}
.presup-gh{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.presup-gi{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:4px 6px;border-radius:6px;cursor:pointer}
.presup-gi:hover{background:var(--panel2)}
.presup-gi.sel{background:rgba(14,138,59,.14);font-weight:700}
.presup-gi.vacio{color:var(--muted);cursor:default}.presup-gi.vacio:hover{background:none}
.presup-gi .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.presup-gi .f{color:var(--muted);flex:none}
.pf.pf-wide{display:block;width:100%;box-sizing:border-box;min-height:1.4em}
.pf:empty::before{content:attr(data-ph);color:#9a8b2a;font-style:italic;font-weight:400}
@media print{ body.print-presup .pf:empty::before{content:""} }
.pf.pf-ro{cursor:default;background:#fff8c4;border-bottom-color:#d9cc66;user-select:text}
.pf-off{opacity:.55;cursor:not-allowed}
.pf:empty{min-width:4em}
.presup-gfil{display:flex;gap:6px;margin:0 0 6px}
.presup-gfil .presup-gq{margin:0;min-width:0}
.presup-gfil input.presup-gq{flex:1}
.presup-gfe{width:auto;flex:none;max-width:92px}
.presup-ge{flex:none;font-size:10px;font-weight:700;border-radius:8px;padding:1px 4px;border:1px solid var(--line);background:var(--panel2);color:inherit;cursor:pointer;max-width:84px}
.presup-ge.e-pend{background:#fef3c7;border-color:#f59e0b;color:#92400e}
.presup-ge.e-firm{background:#dcfce7;border-color:#16a34a;color:#166534}
.presup-ge.e-ren{background:#dbeafe;border-color:#2563eb;color:#1e40af}
.paord{display:inline-flex;gap:2px;flex:none}
.paord .hbtn{padding:2px 6px;min-width:24px}
.paord .hbtn[disabled]{opacity:.3;cursor:default}
.pd-valor{white-space:nowrap}
.pf.pf-val{min-width:5em;text-align:right}
.presup-doc .pd-li-val{overflow:visible}
.presup-doc .pd-li-val::after{content:"";display:block;clear:both}
.presup-doc .pd-valor{float:right;margin-left:14px;white-space:nowrap}
.pa-paso{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
.pa-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.pa-tab{flex:1;min-width:220px;padding:12px 16px;border-radius:12px;border:2px solid var(--line);background:var(--panel);color:inherit;font-size:15px;font-weight:800;cursor:pointer;text-align:left}
.pa-tab.on-serv{background:#dbeafe;border-color:#2563eb;color:#1e3a8a}
.pa-tab.on-eas{background:#dcfce7;border-color:#16a34a;color:#14532d}
.pa-banner{margin:12px 0 14px;padding:12px 16px;border-radius:12px;font-size:15px;border-left:8px solid var(--line);background:var(--panel)}
.pa-banner.b-serv{background:#eff6ff;border-left-color:#2563eb}
.pa-banner.b-eas{background:#f0fdf4;border-left-color:#16a34a}
.pa-banner b{font-weight:800}
.pa-doctag{font-size:11px;font-weight:800;padding:2px 8px;border-radius:8px;color:#fff;flex:none}
.pa-doctag.t-serv{background:#2563eb}.pa-doctag.t-eas{background:#16a34a}
.pe-panel{border:2px solid #16a34a;border-radius:14px;background:#f0fdf4;padding:12px 16px;margin:0 0 14px}
.pe-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:14px}
.pe-st{font-weight:800;font-size:13px;margin:10px 0 4px;padding-bottom:3px;border-bottom:1px solid #bbf7d0}
.pe-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.pe-row.off{opacity:.55}
.pe-g{width:150px;flex:none;font-size:11px;color:var(--muted)}
.pf.pf-amt{text-align:right;min-width:6em}
.pd-moneda{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 10px;font-size:13px}
.pd-moneda .pfs{font-size:13px}
@media print{ body.print-presup .pd-moneda{display:none!important} }   /* Moneda y Cambio son datos INTERNOS: nunca se imprimen (los montos ya salen con su US$ o Gs.) */
/* RRHH: lista impresa (Férias/Liq. y Ficha Funcionario) */
.rrhh-lista{width:100%}
.rrhh-lista table{width:100%;border-collapse:collapse}
.rrhh-lista th,.rrhh-lista td{border:1px solid #999;padding:4px 6px;font-size:10px;text-align:left}
.rrhh-lista th{background:#eee}
/* Alerta del Plan de acción en el encabezado */
.alertaplan{background:#dc2626!important;color:#fff!important;border-color:#dc2626!important;font-weight:700;animation:alertaPlanPulso 1.6s ease-in-out infinite}
@keyframes alertaPlanPulso{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.6)}50%{box-shadow:0 0 0 7px rgba(220,38,38,0)}}
/* Control Societario: informe en página (pantalla e impresión) */
.soc-informe{background:#fff;color:#1b2a33;border:1px solid #d5dee4;border-radius:14px;padding:20px 26px;margin-bottom:18px;max-width:1100px;page-break-after:always;page-break-inside:avoid}
.soc-informe:last-of-type{page-break-after:auto}
.soc-informe .soc-inf-marca{font-size:22px;font-weight:800;letter-spacing:.2px}
.soc-informe .soc-inf-sub{font-size:13px;font-weight:700}
.soc-informe .soc-inf-emit{font-size:12px;color:#64748b;margin-top:14px}
.soc-informe hr{border:0;border-top:2px solid #1b2a33;margin:14px 0}
.soc-informe .soc-inf-datos{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px;font-size:13px}
.soc-informe h4{font-size:15px;margin:16px 0 8px;color:#1b2a33}
.soc-informe p{font-size:13px;margin:0 0 8px}
.soc-informe table{width:100%;border-collapse:collapse}
.soc-informe th{background:#eef3f6;color:#475569;font-size:11px;text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:9px 8px}
.soc-informe td{font-size:13px;padding:9px 8px;border-bottom:1px solid #e5eaee;vertical-align:top}
.soc-informe .soc-inf-resp{font-size:11px;color:#64748b}
@media print{ body.print-rrhh-recibo .soc-informe{border:none;border-radius:0;padding:0 0 12px;max-width:none} }
/* Control Societario: pantalla de inicio de Revisión anual (sin empresa elegida) y selector de la barra */
.soc-vacio{max-width:560px;margin:26px auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px 28px;text-align:center;box-shadow:0 6px 22px rgba(0,0,0,.08)}
.soc-vacio .ico{font-size:42px;line-height:1;margin-bottom:8px}
.soc-vacio h3{margin:0 0 6px;font-size:20px}
.soc-vacio p{margin:0 0 18px;color:var(--muted);font-size:14px}
.soc-vacio select.soc-big{width:100%;font-size:16px;padding:12px 14px;border-radius:10px;background:var(--panel2);color:var(--txt);border:2px solid var(--accent)}
.soc-vacio .soc-recientes{margin-top:18px;text-align:left}
.soc-vacio .soc-recientes small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.soc-vacio .soc-recientes button{margin:0 6px 6px 0}
.soc-barra{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;align-items:flex-end}
.soc-barra select{font-size:14px;padding:8px 10px;border-radius:8px;background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
/* Actividades de presupuesto: matriz con una columna por tipo de sociedad */
.pa-mx{overflow-x:auto}
.pa-mx table{min-width:100%}
.pa-mx th.pa-vt{height:170px;width:34px;min-width:34px;padding:4px 2px;vertical-align:bottom;cursor:pointer;text-align:center}
.pa-mx th.pa-vt:hover{background:var(--panel2)}
.pa-mx th.pa-vt span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:12px;font-weight:700}
.pa-mx td.pa-ck{text-align:center;padding:4px 2px}
.pa-mx td.pa-ck input{width:18px;height:18px}
.pa-mx tbody tr:hover td{background:var(--panel2)}
.pa-tab.on-cronograma{background:#fef3c7;border-color:#d97706;color:#78350f}
.pa-banner.b-cronograma{background:#fffbeb;border-left-color:#d97706}
.pa-doctag.t-cronograma{background:#d97706}
/* Control Societario: formulario de empresa (moderno, redondeado y con color) */
#socModalCard{border-radius:20px;overflow:hidden;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.35)}
#socModalCard .soc-mh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 24px;background:linear-gradient(135deg,#0f766e,#2563eb);color:#fff}
#socModalCard .soc-mh-t{font-size:19px;font-weight:800}
#socModalCard .soc-mh-s{font-size:12px;opacity:.9;margin-top:2px}
#socModalCard .soc-mh .x{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:50%;width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer}
#socModalCard .soc-mh .x:hover{background:rgba(255,255,255,.32)}
#socModalCard .soc-mb{padding:18px 22px;max-height:66vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
#socModalCard .soc-sec{border-radius:16px;padding:14px 16px 16px;border:1px solid var(--line);background:var(--panel2);border-top-width:4px}
#socModalCard .soc-s-azul{border-top-color:#2563eb}
#socModalCard .soc-s-verde{border-top-color:#16a34a}
#socModalCard .soc-s-violeta{border-top-color:#7c3aed}
#socModalCard .soc-sec-h{font-weight:800;font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
#socModalCard .soc-sec-h small{font-weight:400;color:var(--muted)}
#socModalCard .soc-s-azul .soc-sec-h{color:#2563eb}
#socModalCard .soc-s-verde .soc-sec-h{color:#16a34a}
#socModalCard .soc-s-violeta .soc-sec-h{color:#7c3aed}
#socModalCard .soc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
#socModalCard .soc-full{grid-column:1/-1}
#socModalCard .fld label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);display:block;margin-bottom:4px}
#socModalCard .fld label small{text-transform:none;font-weight:400;letter-spacing:0}
#socModalCard input,#socModalCard select{width:100%;box-sizing:border-box;background:var(--panel);color:var(--txt);border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;font-size:14px}
#socModalCard input:focus,#socModalCard select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.18)}
#socModalCard .soc-fila{display:flex;gap:8px;margin-bottom:8px;align-items:center}
#socModalCard .soc-fila .soc-ac-nom,#socModalCard .soc-fila .soc-au-nom{flex:1}
#socModalCard .soc-fila .soc-ac-pct{width:90px;flex:none;text-align:right}
#socModalCard .soc-fila .soc-au-cargo{width:170px;flex:none}
#socModalCard .soc-fila .hbtn{flex:none;border-radius:50%;width:32px;height:32px;padding:0;justify-content:center}
#socModalCard .soc-add{border:1.5px dashed currentColor;background:transparent;border-radius:12px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;color:inherit}
#socModalCard .soc-s-verde .soc-add{color:#16a34a}
#socModalCard .soc-s-violeta .soc-add{color:#7c3aed}
#socModalCard .soc-mf{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;background:var(--panel2);border-top:1px solid var(--line)}
#socModalCard .soc-mf .hbtn{border-radius:12px;padding:9px 18px;font-weight:700}
@media(max-width:620px){ #socModalCard .soc-grid{grid-template-columns:1fr} }
#bannerActualizacion{gap:8px;flex-wrap:wrap}
#bannerActualizacion button.sec{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
/* Rentabilidad por cliente: página completa */
#modalRentabilidad{padding:0;align-items:stretch;justify-content:stretch}
#modalRentabilidad .card.rent-full{width:100vw;max-width:none;height:100vh;max-height:none;border-radius:0;padding:0;margin:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.rent-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 26px;background:linear-gradient(135deg,#0f766e,#2563eb);color:#fff;flex:none}
.rent-title{font-size:22px;font-weight:800}
.rent-sub{font-size:12px;opacity:.92;margin-top:3px;max-width:900px}
.rent-top-acts{display:flex;gap:8px;flex:none}
.rent-top-acts .hbtn{border-radius:12px;padding:8px 16px;font-weight:700}
.rent-top-acts .rent-cerrar{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5)}
.rent-main{flex:1;overflow:auto;padding:18px 26px;display:flex;flex-direction:column;gap:14px}
.rent-filtros{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.rent-filtros label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);display:block;margin-bottom:4px}
.rent-filtros label small{text-transform:none;font-weight:400;letter-spacing:0}
.rent-filtros input,.rent-filtros select{background:var(--panel2);color:var(--txt);border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;font-size:14px}
.rent-filtros .rent-f-cli{flex:1;min-width:220px}.rent-filtros .rent-f-cli input{width:100%;box-sizing:border-box}
.rent-calc{border-radius:12px;padding:10px 20px;font-weight:800}
.rent-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.rent-kpi{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 16px;border-left:5px solid #2563eb}
.rent-kpi .ico{font-size:26px}
.rent-kpi .v{font-size:20px;font-weight:800}.rent-kpi .v small{font-size:12px;font-weight:600}
.rent-kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.rent-kpi.pos{border-left-color:#16a34a}.rent-kpi.neg{border-left-color:#dc2626}
.rent-kpi.neg .v{color:#dc2626}.rent-kpi.pos .v{color:#16a34a}
#rentBody .rent-tabla{max-height:none;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
#rentBody table thead th{position:sticky;top:0;z-index:2}
.rent-pill{display:inline-block;border-radius:12px;padding:2px 10px;font-weight:700;font-size:12.5px}
.rent-pill.neg{background:#fee2e2;color:#b91c1c}.rent-pill.pos{background:#dcfce7;color:#15803d}