/* ============================================================
   Gestión PPTO — sistema visual (maquetas aprobadas el 22-10-2026)
   Tomado de ProPyme 14D por pedido de Carlos: fondo oscuro, IBM Plex
   Sans/Mono, 11–13 px, cabeceras mono en mayúscula, alta densidad.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');
:root{
  --bg:#0f1117;--bg2:#161b27;--bg3:#1e2535;--bg4:#252d3d;
  --border:#2a3348;--border2:#3a4560;
  --text:#d4dae8;--text2:#8892a8;--text3:#7a84a0;
  --accent:#3b82f6;--green:#10b981;--red:#ef4444;--amber:#f59e0b;--violet:#a78bfa;
  --cab:#7dd3fc;--cab2:#fde68a;   /* cabeceras y títulos de los informes (balance, mayor) */
  --sol:#facc15;   /* solo la cabecera de las líneas de un comprobante: «estoy dentro de un asiento» */
  --mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;--r:6px;
}
*{margin:0;padding:0;box-sizing:border-box}
html.comoda body{zoom:1.15}
*{scrollbar-color:var(--border2) transparent;scrollbar-width:thin}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;
  height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* ── Armazón: barra superior, cinta, menú ── */
#gp-top{height:48px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--bg2);border-bottom:1px solid var(--border)}
#gp-top .marca{width:198px;font-size:14px;font-weight:600;white-space:nowrap}
#gp-top .marca b{color:var(--accent)}
.chip{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);
  border-radius:6px;padding:5px 11px;white-space:nowrap;cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip .n{color:var(--amber);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.chip .r{font-family:var(--mono);font-size:10px;color:var(--text3)}
.chip.per{font-family:var(--mono);font-size:12px}
.chip.ej .r{color:var(--green)}
#gp-top .usr{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text2)}
#gp-top .usr button{background:var(--bg3);border:1px solid var(--border);border-radius:5px;color:var(--text2);
  font:600 11px var(--mono);padding:3px 8px;cursor:pointer}
#gp-top .usr button:hover{color:var(--text);border-color:var(--border2)}

#gp-cinta{flex-shrink:0;display:flex;gap:0;background:#0b0d13;border-bottom:1px solid var(--border);
  font-family:var(--mono);font-size:11px;overflow:hidden;white-space:nowrap}
#gp-cinta .c{padding:6px 14px;border-right:1px solid var(--border);display:flex;gap:8px;align-items:baseline}
#gp-cinta .c .l{color:var(--text3);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em}
#gp-cinta .c .v{color:var(--text);font-weight:600}
#gp-cinta .v.g{color:var(--green)}#gp-cinta .v.r{color:var(--red)}#gp-cinta .v.a{color:var(--amber)}#gp-cinta .v.b{color:var(--accent)}
#gp-cinta .d{font-size:10px}
#gp-cinta .d.up{color:var(--green)}#gp-cinta .d.dn{color:var(--red)}

#gp-cuerpo{flex:1;display:flex;min-height:0}
#gp-menu{width:206px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);
  overflow-y:auto;padding:6px 0 16px;font-size:12.5px}
#gp-menu .s{font-size:10px;font-weight:700;text-transform:uppercase;color:#f0cf7e;padding:13px 16px 5px;letter-spacing:.07em}   /* títulos de sección en oro, como ContaCYR */
#gp-menu .i{display:flex;align-items:center;gap:9px;padding:6px 16px;color:var(--text2);
  border-right:2px solid transparent;text-decoration:none}
#gp-menu a.i:hover{background:var(--bg3);color:var(--text)}
#gp-menu .i.on{background:rgba(59,130,246,.1);color:var(--accent);border-right-color:var(--accent)}
#gp-menu .i.off{opacity:.42;cursor:default}
#gp-menu .num{font-family:var(--mono);font-size:10px;width:16px;height:16px;border-radius:50%;
  border:1px solid currentColor;display:grid;place-items:center;flex-shrink:0}
#gp-menu .ic,#gp-menu .num{color:#e6d3a3}   /* iconos y números en oro suave, como ContaCYR */
#gp-menu .i.on .ic,#gp-menu .i.on .num{color:var(--accent)}
#gp-menu .bdg{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:600;border-radius:8px;padding:0 6px}
#gp-menu .bdg.a{background:var(--amber);color:#0f1117}
.ic{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#gp-pagina{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}

.maqueta{flex-shrink:0;background:rgba(167,139,250,.08);border-bottom:1px solid rgba(167,139,250,.25);
  color:var(--violet);font:11px var(--mono);padding:4px 16px}

/* ── Página ── */
.topbar{min-height:50px;background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:6px 18px;gap:12px;flex-shrink:0;flex-wrap:wrap}
.topbar-title{font-size:14px;font-weight:600}
.topbar-sub{font-size:11px;color:var(--text3)}
.filtros{background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 18px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-shrink:0}
.flabel,.lbl{font-size:9px;font-family:var(--mono);color:var(--text3);text-transform:uppercase;letter-spacing:.07em}
select,input,textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);font-family:var(--sans);font-size:12px;padding:6px 8px;outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--accent)}
input.ro{background:var(--bg);color:var(--text2);border-style:dashed}
input.mono,select.mono{font-family:var(--mono)}
input.err{border-color:var(--red);background:rgba(239,68,68,.06)}
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--r);
  font-size:11.5px;font-weight:500;cursor:pointer;border:1px solid var(--border);
  font-family:var(--sans);background:var(--bg3);color:var(--text2);white-space:nowrap}
.btn:hover{border-color:var(--border2);color:var(--text)}
.btn-p{background:#047857;border-color:#047857;color:#fff;font-weight:700}.btn-p:hover{background:#065f46;border-color:#065f46;color:#fff}
/* Ir al comprobante o documento relacionado: contorno verde, se ve de una mirada */
.btn-ver{border-color:var(--green);color:#6ee7b7;box-shadow:0 0 0 1px rgba(16,185,129,.45)}.btn-ver:hover{border-color:var(--green);color:#fff;background:rgba(16,185,129,.16)}
.btn-borrar{color:var(--red);border-color:rgba(239,68,68,.35)}.btn-borrar:hover{color:var(--red);border-color:var(--red)}
.btn-borrar.confirmar{background:var(--red);border-color:var(--red);color:#fff}
.btn-a{background:#1d4ed8;border-color:#1d4ed8;color:#fff;font-weight:700}.btn-a:hover{color:#fff;background:#1e40af;border-color:#1e40af}
.btn kbd{font:10px var(--mono);opacity:.75;border:1px solid currentColor;border-radius:3px;padding:0 3px}
.tabs{display:flex;gap:4px}
.tab{padding:5px 12px;border-radius:var(--r);font-size:11px;font-weight:500;cursor:pointer;
  color:var(--text2);border:1px solid var(--border);background:var(--bg3);white-space:nowrap}
.tab .k{font-family:var(--mono);font-size:10px;margin-left:5px;opacity:.8}
.tab.on{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.45);color:var(--accent)}
.tab.on.c{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4);color:var(--red)}
.tab.on.a{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.4);color:var(--green)}

table{width:100%;border-collapse:collapse;font-size:11.5px}
th{position:sticky;top:0;background:var(--bg3);padding:7px 8px;text-align:left;font-size:9px;font-family:var(--mono);
  color:var(--text3);text-transform:uppercase;letter-spacing:.07em;box-shadow:inset 0 -1px 0 var(--border);
  white-space:nowrap;z-index:1}
thead.asiento-cab th{color:var(--sol);font-weight:600}
td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.035);white-space:nowrap}
tbody tr{cursor:pointer}
tbody tr:hover td{background:rgba(255,255,255,.025)}
/* Carlos 09-11-2026: los datos de TODAS las listas sin negrita y 2 puntos más oscuros (#bcc3d4).
   Solo dentro del sistema (#gp-pagina): las hojas impresas no cambian. :where() deja la regla sin peso,
   así que cualquier color propio de una celda (líquido verde, negativos, terminados) sigue mandando.
   Los totales no se tocan: el pie (tfoot) y las filas de subtotal/total conservan su negrita y su color. */
:where(#gp-pagina) tbody td{color:#bcc3d4}
:where(#gp-pagina) tbody tr:is(.sub,.st,.tt,.total,.tot,.sumas,.res,.grupo,.n1,.n2) td{color:var(--text)}
:where(#gp-pagina) tbody tr:not(.sub,.st,.tt,.total,.tot,.sumas,.res,.grupo,.n1,.n2,.n3) td :is(b,strong){font-weight:inherit}
tr.sel td{background:rgba(59,130,246,.11)}
tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tfoot td{font-family:var(--mono);font-weight:600;background:var(--bg2);border-top:1px solid var(--border);position:sticky;bottom:0}
.mono{font-family:var(--mono)}.right{text-align:right}.center{text-align:center}
/* Informes (balance, mayor): título centrado, cabeceras y pies resaltados; GP.pegar() apila las filas fijas */
.topbar.centro{display:grid;grid-template-columns:1fr minmax(0,auto) 1fr}
.topbar.centro .tc{grid-column:2;text-align:center}
.topbar.centro .td{grid-column:3;justify-self:end;display:flex;gap:8px;align-items:center}
.topbar.centro .topbar-title{font-size:17px;color:var(--cab);letter-spacing:.02em}
table.informe th{color:var(--cab);font-size:9.5px;font-weight:600}
table.informe th.g{color:var(--cab2);font-size:10px}
table.informe tfoot td{z-index:1;font-size:12px;border-top:0;border-bottom:0;box-shadow:inset 0 1px 0 var(--border)}  /* el borde de una celda fija se queda atrás: va como sombra */
table.informe tfoot tr.sumas td{color:var(--cab)}
table.informe tfoot tr.res td{background:var(--bg3);color:var(--green)}
table.informe tfoot tr.res.neg td{color:var(--red)}
table.informe tfoot tr.tot td{color:var(--amber);background:var(--bg3);box-shadow:inset 0 2px 0 var(--amber)}
.muted{color:var(--text3)}.t2{color:var(--text2)}
.verde{color:var(--green)}.rojo{color:var(--red)}.ambar{color:var(--amber)}.azul{color:var(--accent)}
.trunc{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.neg{color:var(--red)}

.badge{display:inline-flex;padding:1px 6px;border-radius:3px;font-size:9px;font-weight:500;
  font-family:var(--mono);text-transform:uppercase;border:1px solid;white-space:nowrap}
.b-ok{background:rgba(16,185,129,.12);color:var(--green);border-color:rgba(16,185,129,.3)}
.b-pend{background:rgba(245,158,11,.12);color:var(--amber);border-color:rgba(245,158,11,.3)}
.b-err{background:rgba(239,68,68,.1);color:var(--red);border-color:rgba(239,68,68,.3)}
.b-inf{background:rgba(59,130,246,.12);color:var(--accent);border-color:rgba(59,130,246,.35)}
.b-gris{background:rgba(255,255,255,.04);color:var(--text3);border-color:var(--border)}
.b-vio{background:rgba(167,139,250,.1);color:var(--violet);border-color:rgba(167,139,250,.3)}

/* KPI tipo terminal */
.kpis{display:grid;gap:1px;background:var(--border);border-bottom:1px solid var(--border);flex-shrink:0}
.kpi{background:var(--bg2);padding:8px 14px;position:relative}
.kpi .l{font:9.5px var(--mono);color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.kpi .v{font:600 17px var(--mono);letter-spacing:-.3px;margin-top:2px}
.kpi .s{font:10px var(--mono);color:var(--text3);margin-top:1px}
.kpi.g .v{color:var(--green)}.kpi.r .v{color:var(--red)}.kpi.a .v{color:var(--amber)}.kpi.b .v{color:var(--accent)}
.barra{height:3px;background:var(--bg4);border-radius:2px;margin-top:5px;overflow:hidden}
.barra i{display:block;height:100%}

/* Paneles */
.panel{display:flex;flex-direction:column;min-height:0;background:var(--bg);border-left:1px solid var(--border);position:relative}
/* Ventana ancha del detalle (gp.js, ampliable): el mismo panel, centrado y ancho */
.gp-ampliar{position:absolute;left:-12px;top:50%;margin-top:-23px;z-index:5;width:22px;height:46px;padding:0;
  border:1px solid var(--border);border-radius:5px;background:var(--bg2);color:var(--accent);cursor:pointer;font-size:14px;line-height:1}
.gp-ampliar:hover{background:var(--bg3);border-color:var(--accent)}
.gp-ampliar kbd{margin-left:6px}
.gp-velo{display:none;position:fixed;inset:0;z-index:40;background:rgba(4,9,18,.74)}
.panel.ancha{position:fixed;z-index:41;top:calc(5vh + 34px);bottom:3vh;left:max(24px,calc(50vw - 500px));right:max(24px,calc(50vw - 500px));
  border:1px solid var(--accent);border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.65)}
.panel.ancha .gp-ampliar{left:auto;right:0;top:-34px;margin-top:0;width:auto;height:28px;padding:0 12px;font-size:12px;color:var(--text);
  border-color:var(--accent)}
.ph{padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg2)}
.ph .t{font-size:13px;font-weight:600}
.ph .m{font:600 20px var(--mono)}
.pcont{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 16px 12px}
.pcont td{white-space:normal}
.sec{margin-top:12px}
.sec-t{font:600 9.5px var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:5px;border-bottom:1px solid var(--border);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sec-t .x{margin-left:auto;color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0}
.campos{display:grid;gap:8px 10px}
.campo .lbl{margin-bottom:3px}
.campo input,.campo select,.campo textarea{width:100%}
.caja{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px}
.fila-k{display:flex;justify-content:space-between;gap:10px;font:11.5px var(--mono);padding:2px 0}
.fila-k span:first-child{color:var(--text2);font-family:var(--sans)}
.valida{font-size:11.5px;line-height:1.65}
.pie{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0;flex-wrap:wrap}
.pie .info{flex:1;font:11.5px var(--mono);color:var(--text2)}
.ayuda{font:10px var(--mono);color:var(--text3)}
.vacio{padding:40px 20px;text-align:center;color:var(--text3);line-height:1.7}
.traza{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:11px var(--mono)}
.traza .p{padding:3px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg2)}
.traza .p.ok{border-color:rgba(16,185,129,.4);color:var(--green)}
.traza .p.pe{border-color:rgba(245,158,11,.4);color:var(--amber)}
.traza .f{color:var(--text3)}

/* ── Selector de período (chip de la barra superior) ── */
.chip.per{position:relative}
#gp-meses{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:var(--bg2);
  border:1px solid var(--border2);border-radius:var(--r);padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.5);
  grid-template-columns:repeat(3,92px);gap:4px;cursor:default}
#gp-meses.abierto{display:grid}
#gp-meses button{background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--text2);
  font:11px var(--mono);padding:5px 0;cursor:pointer}
#gp-meses button:hover{color:var(--text);border-color:var(--accent)}
#gp-meses button.on{background:rgba(59,130,246,.15);border-color:var(--accent);color:var(--accent)}
#gp-meses button.cer{text-decoration:line-through;opacity:.6}

/* ── Contenido de páginas ── */
.contenido{flex:1;overflow-y:auto;padding:14px 18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}
.bloque{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.bloque .sec-t{margin:0;padding:9px 12px;background:var(--bg2)}
.bloque table{background:var(--bg)}

/* ── Diálogos: display SIEMPRE con [open] (ver CLAUDE.md de C:\mmprog26) ── */
/* margin:auto lo centra: el reset *{margin:0} de arriba se lo quita */
dialog.gp{margin:auto;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:8px;
  padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 40px);box-shadow:0 20px 50px rgba(0,0,0,.6)}
dialog.gp[open]{display:flex;flex-direction:column}
dialog.gp.gp-candado{width:min(520px,calc(100vw - 32px));border:2px solid var(--red);box-shadow:0 0 0 4px rgba(239,68,68,.22),0 18px 60px rgba(0,0,0,.6)}
dialog.gp.gp-candado .dh{color:var(--red);font-size:15px}
dialog.gp.gp-candado .db{padding:14px 16px}
dialog.gp.gp-candado .item{font-size:15px;line-height:1.5;padding:3px 0}
dialog.gp.gp-pregunta{width:min(560px,calc(100vw - 32px));border:2px solid var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.22),0 18px 60px rgba(0,0,0,.6)}
dialog.gp.gp-pregunta .dh{color:var(--amber);font-size:15px}
dialog.gp.gp-pregunta .db{padding:14px 16px}
dialog.gp.gp-pregunta .item{font-size:14px;line-height:1.5;padding:3px 0}
dialog.gp.gp-pregunta .preg{margin-top:12px;font-size:15px;font-weight:600}
dialog.gp::backdrop{background:rgba(0,0,0,.55)}
dialog.gp .dh{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;display:flex;align-items:center}
dialog.gp .dh .x{margin-left:auto;cursor:pointer;color:var(--text3);background:none;border:0;font-size:16px}
dialog.gp .db{padding:4px 16px 14px;overflow-y:auto}
dialog.gp .db .sec-t{margin-top:14px}
dialog.gp .df{padding:10px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;align-items:center}
dialog.gp .df .error{margin-right:auto}
.error{color:var(--red);font-size:12px}
.mayus{text-transform:uppercase}

/* ── Plan de cuentas en ventana (F4, plan.js) ── */
#gp-top .usr button kbd{font:9px var(--mono);opacity:.75;border:1px solid currentColor;border-radius:3px;padding:0 3px;margin-left:3px}
dialog.gp.plan-f4{width:min(1240px,calc(100vw - 32px));height:calc(100vh - 40px)}
dialog.gp.plan-f4 .pf-total{font:400 11px var(--mono);color:var(--text3);margin-left:6px}
dialog.gp.plan-f4 .pf-dest{margin-left:auto;margin-right:12px;font-weight:400;font-size:12px;color:var(--sol)}
.plan-f4 .pf-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 16px;border-bottom:1px solid var(--border)}
.plan-f4 #pf-buscar{width:270px}
.plan-f4 #pf-usar:disabled{opacity:.45;cursor:not-allowed}
.plan-f4 .pf-tabla{flex:1;min-height:0;overflow:auto}
.plan-f4 .pf-tabla td{padding-top:3px;padding-bottom:3px}
.plan-f4 td.cod{font-family:var(--mono);white-space:nowrap}
.plan-f4 td.nom,.plan-f4 td.rub{white-space:normal}
.plan-f4 td.rub{font-size:11px}
.plan-f4 .tg{display:inline-block;width:14px;color:var(--text3);cursor:pointer;user-select:none}
.plan-f4 tr.n1 td{background:var(--bg3);font-weight:600;color:var(--text)}
.plan-f4 tr.n2 td{background:rgba(255,255,255,.03);font-weight:600}
.plan-f4 tr.n3 td.nom{font-weight:600;color:var(--text)}
.plan-f4 tr.inactiva td{opacity:.45}
.plan-f4 tr.sel td{background:rgba(59,130,246,.16)}
.plan-f4 tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.plan-f4 mark{background:rgba(250,204,21,.28);color:inherit;border-radius:2px}
.plan-f4 .her{font-style:italic;color:var(--text3)}
.plan-f4 button.pf-sub{background:none;border:1px solid var(--border2);border-radius:4px;color:var(--accent);font-size:10.5px;padding:1px 7px;cursor:pointer;visibility:hidden}
.plan-f4 tr:hover button.pf-sub,.plan-f4 tr.sel button.pf-sub{visibility:visible}
.plan-f4 .campo.falta input{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.plan-f4 .pf-teclas{margin-right:auto;font-family:var(--mono);font-size:10px}
.rut-malo{font-size:10.5px;color:var(--red);margin-top:3px;line-height:1.35}

/* Franja de mes cerrado (base.html, 11-11-2026) */
.mes-cerrado{background:rgba(16,185,129,.1);border-bottom:1px solid rgba(16,185,129,.4);color:#6ee7b7;font-size:12.5px;padding:7px 18px}
.mes-cerrado a{color:#a7f3d0;margin-left:8px}