:root{
  --bg:#0f172a; --panel:#1e293b; --line:#334155; --txt:#e2e8f0; --muted:#94a3b8;
  --acc:#38bdf8; --ok:#34d399; --err:#f87171; --card:#16213a;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:14px/1.45 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--txt)}
#app{flex:1;display:flex} /* fila: sidebar + maincol (ver bloque "layout general") */
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:12px}.block{width:100%}
h1{font-size:20px;margin:4px 0 0}h2{font-size:16px;margin:18px 0 8px}h3{font-size:14px;margin:14px 0 6px}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:340px;text-align:center}
#loginForm .btn.block{margin-top:14px}
.login-logo{width:96px;height:auto;max-height:110px;object-fit:contain;margin:0 auto 12px;display:block}
.logo{width:56px;height:56px;margin:0 auto 10px;border-radius:14px;background:linear-gradient(135deg,#0ea5e9,#1d4ed8);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff}

/* layout general: sidebar de sistemas + columna principal */
#app{flex:1;display:flex;flex-direction:row}
.maincol{flex:1;display:flex;flex-direction:column;min-width:0}

/* sidebar */
#sidebar{width:270px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:14px 8px 10px}
/* columna izquierda: logo centrado en alto y ancho dentro de su recuadro */
.sb-brand{display:flex;align-items:center;gap:10px;padding:4px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.sb-logo{width:54px;height:54px;object-fit:contain;flex-shrink:0;display:block}
/* columna derecha: dos renglones apilados, centrados contra el alto del logo */
.sb-brand>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.sb-tit{font-size:13px;font-weight:700;line-height:1.25;white-space:nowrap}
.sb-sub{font-size:11px;color:var(--muted);line-height:1.3}
#sbNav{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
/* entrada de sistema (acordeón): header con chevron + submenú anidado */
.sb-top{background:none;border:0;text-align:left;color:var(--txt);padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px}
.sb-top:hover{background:#25324a}
.chev{font-size:11px;color:var(--muted);transition:transform .15s}
.sb-top.open .chev{transform:rotate(90deg)}
.sb-menu{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px 8px;border-left:1px solid var(--line);margin-left:14px}
.sb-menu.hidden{display:none}
/* item de sección (submenú) */
.sb-item{background:none;border:0;text-align:left;color:var(--muted);padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13px;width:100%}
.sb-item:hover{color:var(--txt);background:#25324a}
.sb-item.active{color:#fff;background:#0ea5e933;border-left:2px solid var(--acc);padding-left:8px}
/* item de nivel superior (sistema sin submenú, p. ej. Personal) */
.sb-item.top{font-size:14px;font-weight:700;color:var(--txt)}
.sb-item.top.active{color:#fff;background:#0ea5e933;border-left:2px solid var(--acc);padding-left:8px}

/* topbar (sin tabs: el menu vive en el sidebar) */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.crumb{font-weight:700;font-size:15px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userbox{display:flex;gap:8px;align-items:center;color:var(--muted)}

@media(max-width:720px){
  #app{flex-direction:column}
  #sidebar{width:100%;flex-direction:row;align-items:center;gap:8px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;padding:8px 10px}
  .sb-brand{border:0;margin:0;padding:0 6px 0 2px}
  .sb-logo{width:34px;height:34px}
  .sb-menu{flex-direction:row;gap:4px;border-left:0;margin-left:0;padding:0} /* submenú inline en la barra superior */
  .sb-top .chev{display:none}
  #sbNav{flex-direction:row;gap:4px}
  .sb-item.active{border-left:0;padding-left:10px;border-bottom:2px solid var(--acc)}
}

main{flex:1;max-width:1320px;margin:0 auto;width:100%;padding:16px}
.tabpane{display:none}.tabpane.active{display:block}
.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bar input[type=date],.bar input:not([type]){padding:7px 10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--txt)}

/* cards y formularios */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat .v{font-size:24px;font-weight:700}.stat .k{color:var(--muted);font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
input,select{padding:8px 10px;background:#0d1526;border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:14px}
input:focus,select:focus{outline:2px solid #38bdf855;border-color:var(--acc)}
.wide{grid-column:1/-1}
.calcbox{display:flex;align-items:center;gap:16px}
.btn{padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:#25324a;color:var(--txt);cursor:pointer;font-size:14px}
.btn:hover{filter:brightness(1.15)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#082f49;font-weight:600}
.btn.small{padding:5px 10px;font-size:12px}
.btn.danger{background:#7f1d1d;border-color:#b91c1c;color:#fecaca}
.err{color:var(--err);font-size:13px;margin-top:8px}

/* tablas */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.tbl th{background:#1b2a45;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;text-align:left}
.tbl td{padding:7px 10px;border-top:1px solid #22314e;font-size:13px;white-space:nowrap}
.tbl tr:hover td{background:#1c2b49}
.tbl .num{text-align:right}
/* dependencias y cuentas bancarias: distribución fija de columnas para que la tabla no desborde la tarjeta */
#gfBancosWrap{overflow-x:auto;border-radius:12px}
/* filas de transferencias: layout fijo para que los selects largos no desborden la tarjeta */
#gfTrRows{table-layout:fixed}
#gfTrRows td{white-space:normal;overflow:hidden;text-overflow:ellipsis}
#gfTrRows select,#gfTrRows input[type="text"]{width:100%;max-width:100%}
#gfComFilter{display:block;width:min(380px,100%);margin-bottom:10px}
/* comercios: casillas de exención y cuentas en el modal de edición */
.excl-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:6px 0}
.excl-row label{flex-direction:row;align-items:center;gap:6px;font-size:13px;color:var(--txt)}
.excl-row input[type=checkbox]{width:16px;height:16px;padding:0}
.acct-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.acct-row input{flex:1;font-size:12px;padding:6px 8px}
.acct-row .btn.small{flex-shrink:0}
/* combobox de comercio en transferencias: búsqueda dentro del desplegable */
/* celda de comercio en la grilla de transferencias (clicable → modal de selección) */
.gfcom-pick{cursor:pointer;border-radius:6px;padding:2px 6px;min-width:160px;display:inline-block}
.gfcom-pick:hover{background:#25324a}
/* lista del modal de selección de comercio (paleta oscura del sistema) */
.gtp-list{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#0d1526}
.gtp-opt{padding:8px 10px;font-size:13px;cursor:pointer;display:flex;flex-direction:column;gap:1px;color:var(--txt)}
.gtp-opt:hover{background:#25324a}
.gtp-opt.sel{background:#0ea5e933;border-left:2px solid var(--acc);padding-left:8px}
.gtp-opt b{font-weight:600}
.gtp-opt .muted{font-size:11px}
#gfBancosTable{table-layout:fixed;min-width:640px}
#gfBancosTable th:nth-child(1){width:8%}   /* Dep. */
#gfBancosTable th:nth-child(2){width:17%}  /* Nombre */
#gfBancosTable th:nth-child(3){width:15%}  /* Banco */
#gfBancosTable th:nth-child(4){width:26%}  /* CTA / CBU */
#gfBancosTable th:nth-child(5){width:13%}  /* Ciudad */
#gfBancosTable th:nth-child(6){width:11%}  /* Nº cta */
#gfBancosTable th:nth-child(7){width:10%}  /* Recibe */
#gfBancosTable input{width:100%;max-width:none;font-size:12px;padding:6px 8px}

/* footer de crédito, discreto: centrado y pegado al pie */
.foot{display:flex;justify-content:center;align-items:center;gap:7px;padding:8px 16px 14px;color:var(--muted);font-size:12px}
.foot a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--muted);opacity:.8}
.foot a:hover{color:var(--acc);opacity:1}
.foot img{height:20px;width:auto;display:block}

/* buscador de agente (combobox) */
.combobox{position:relative;width:100%}
.results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#0d1526;border:1px solid var(--acc);border-radius:8px;z-index:20;max-height:280px;overflow:auto}
.result-item{padding:8px 12px;cursor:pointer;font-size:13px;border-top:1px solid #1c2b49}
.result-item:first-child{border-top:0}
.result-item:hover,.result-item.sel{background:#0ea5e933}

/* modal */
.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:flex-start;justify-content:center;padding:30px 16px;z-index:50;overflow:auto}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;max-width:900px;width:100%}

/* toast */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#111c33;border:1px solid var(--acc);
  color:var(--txt);padding:10px 18px;border-radius:10px;z-index:99}

/* ============ VISTA IMPRIMIBLE (planilla) ============ */
#printWrap{background:#fff;color:#000;padding:24px;max-width:1050px;margin:0 auto}
/* vista previa dentro del modal: mismo papel blanco que la impresión */
#prevBox{background:#fff;color:#000;padding:18px;border-radius:10px;overflow-x:auto}
/* acciones del diálogo de confirmación */
.cfm-actions{margin-top:16px;display:flex;gap:8px;justify-content:flex-end}
.pl-print .org{text-align:center;font-weight:700;font-size:16px;letter-spacing:.5px}
.pl-print .dep{text-align:center;font-size:13px;margin-top:2px}
.pl-print h1.tit{font-size:15px;text-align:center;margin:14px 0 4px;text-transform:uppercase}
.pl-print .periodo{text-align:center;font-size:12px;color:#222}
.pl-print table{width:100%;border-collapse:collapse;margin-top:14px;font-size:11.5px}
.pl-print th,.pl-print td{border:1px solid #333;padding:3px 4px;text-align:center}
.pl-print td.l{text-align:left}.pl-print td.r{text-align:right}
.pl-print thead th{background:#eee;font-size:11px}
.pl-print .tot{font-weight:700;background:#f3f3f3}

@media print{
  body>*:not(#printWrap){display:none!important}
  #printWrap{display:block!important;position:absolute;inset:0;background:#fff;padding:0}
  .pl-print table{font-size:10.5px}
}
.hidden-print{display:none}

/* retenciones: editor de porcentajes */
#gfRetTasasTbl input{width:100px}