/* ───────── Capa «app»: paleta contable, barra lateral, pestañas por cliente y estado mensual ───────── */
:root{
  --papel:#F3F2ED; --papel-2:#E9E7DF; --tinta:#14181F; --tenue:#667085; --linea:#D9D6CB;
  --acento:#0B6B57; --acento-tinta:#FFFFFF; --perdida:#B42318; --aviso:#9A6200; --ganancia:#0A7A4B;
  --lat:#0F1720; --lat-2:#1A2633; --lat-texto:#B9C4D0; --acum:#F6EFD2; --acum-borde:#D9C987; --super:#FFFFFF;
  --serif:"Fira Sans",system-ui,sans-serif; --sans:"Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Fira Code",ui-monospace,"SF Mono",Menlo,monospace;
}
:root[data-theme="dark"]{
  --papel:#10151B; --papel-2:#18202A; --tinta:#E8EBEF; --tenue:#98A2B3; --linea:#2B3440;
  --acento:#4FC3A1; --acento-tinta:#06251D; --perdida:#FF8A7A; --aviso:#E0A94A; --ganancia:#5FD39C;
  --lat:#0A0F14; --lat-2:#151E28; --acum:#2A2615; --acum-borde:#5B5128; --super:#161D26;
}
body{font-size:14.5px}
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.col{min-width:0}
.col .wrap{max-width:1400px;padding:0 32px 64px}

/* Barra lateral */
.lat{background:var(--lat);color:var(--lat-texto);position:sticky;top:0;height:100vh;overflow:auto;padding:22px 14px 18px;
  display:flex;flex-direction:column;gap:4px}
.lat .marca{color:#fff;font:600 20px var(--sans);font-style:normal;padding:2px 10px 14px;letter-spacing:-.01em}
.lat .marca span{color:var(--acum-borde);margin-left:8px;font:500 11px var(--mono)}
.btn-cargar{display:block;text-align:center;background:var(--acento);color:var(--acento-tinta);text-decoration:none;font-weight:600;
  border-radius:999px;padding:11px 14px;margin:0 6px 14px;font-size:14px}
.btn-cargar:hover{filter:brightness(1.1)}
.lat-tit{font:500 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#6F7C8B;padding:14px 10px 6px}
.lat-nav{display:flex;flex-direction:column}
.lat-nav a{color:var(--lat-texto);text-decoration:none;padding:7px 10px;border-radius:6px;font-size:13.5px;border-left:2px solid transparent}
.lat-nav a:hover{background:var(--lat-2);color:#fff}
.lat-nav a.on{background:var(--lat-2);color:#fff;border-left-color:var(--acento);font-weight:500}
.lat-nav a.sub{padding-left:24px;font-size:12.5px;color:#8895A4}
.lat-nav .vacio{padding:6px 10px;font-size:12.5px;color:#6F7C8B}
.lat-pie{margin:auto 0 0;padding:16px 10px 0;font-size:11.5px;line-height:1.5;color:#6F7C8B}

/* Pestañas por cliente y píldoras */
.barra{position:sticky;top:0;z-index:5;background:var(--papel);border-bottom:1px solid var(--linea);padding:14px 32px 12px}
.tabs{display:flex;gap:2px;overflow-x:auto;margin-bottom:10px}
.tab{padding:8px 16px;font-weight:500;font-size:14px;color:var(--tenue);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--tinta)}
.tab.on{color:var(--tinta);border-bottom-color:var(--acento)}
.pildoras{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.pildoras .grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pildoras .et{margin-right:4px}
.pil{padding:5px 13px;border:1px solid var(--linea);border-radius:999px;font-size:12.5px;color:var(--tinta);text-decoration:none;background:var(--super)}
.pil:hover{border-color:var(--tinta)}
.pil.on{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

/* Estado mensual */
.edo-bloque{padding-top:30px}
.edo-bloque+.edo-bloque{margin-top:40px;border-top:1px solid var(--linea)}
.edo-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.edo-cab h1{margin:4px 0 0;font:600 clamp(22px,2.6vw,30px)/1.15 var(--sans);letter-spacing:-.015em}
.edo-per{font:500 13px var(--mono);color:var(--tenue);text-align:right}
.edo-per small{margin-left:8px;color:var(--tenue)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:22px 0 22px}
.kpi{background:var(--super);border:1px solid var(--linea);border-left:3px solid var(--acento);border-radius:3px;padding:12px 16px}
.kpi .v{font:500 21px var(--mono);margin-top:4px;letter-spacing:-.01em}
.pos{color:var(--ganancia)}.neg{color:var(--perdida)}

.edo-wrap{overflow:auto;border:1px solid var(--tinta);background:var(--super)}
table.edo{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;min-width:900px}
table.edo th{position:sticky;top:0;z-index:3;background:var(--tinta);color:var(--papel);text-align:center;padding:11px 9px;font:600 11px var(--sans);
  letter-spacing:.07em;text-transform:uppercase;border-bottom:0;border-right:1px solid rgba(255,255,255,.12);white-space:nowrap;line-height:1.3}
table.edo th.acum{background:#3A3216;color:#F6EFD2;white-space:normal;min-width:118px}
table.edo td{padding:7px 9px;border-bottom:1px solid var(--linea);border-right:1px solid var(--linea);text-align:right;white-space:nowrap;
  font:400 12.5px var(--mono);background:var(--super)}
table.edo td.c-cod{position:sticky;left:0;z-index:2;width:58px;min-width:58px;text-align:center;color:var(--tenue);font:500 10.5px var(--mono);letter-spacing:.06em}
table.edo td.c-con{position:sticky;left:58px;z-index:2;text-align:left;font:400 13px var(--sans);min-width:236px;max-width:300px;white-space:normal;
  box-shadow:1px 0 0 var(--linea)}
table.edo th.c-cod{left:0;z-index:4;width:58px}
table.edo th.c-con{left:58px;z-index:4;text-align:left;min-width:236px}
table.edo td.acum{background:var(--acum);border-left:1px solid var(--acum-borde);border-right:1px solid var(--acum-borde);font-weight:500}
table.edo td.tend{text-align:center;padding:4px 8px;width:96px}
table.edo tr.n1 td.c-con{padding-left:26px;color:var(--tinta)}
table.edo tr.seccion td{background:var(--papel-2);font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);
  padding:9px 12px;text-align:left;position:static;border-right:0}
table.edo tr.subtotal td{font-weight:600;border-top:1px solid var(--tinta)}
table.edo tr.subtotal td.c-con{font-weight:600}
table.edo tr.total td{font-weight:700;border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);background:var(--papel-2)}
table.edo tr.total td.c-con{font-weight:700;font-family:var(--sans)}
table.edo tr.total td.acum{background:var(--acum)}
table.edo tr.destacada td{background:var(--tinta);color:var(--papel);font-weight:700;border-color:rgba(255,255,255,.14)}
table.edo tr.destacada td.c-con{font-family:var(--sans);letter-spacing:.04em}
table.edo tr.destacada td.acum{background:#3A3216;color:#F6EFD2;border-color:#5B5128}
table.edo tr.destacada td.neg{color:#FF9C8F}
table.edo tr:hover td:not(.acum){filter:brightness(.97)}
svg.sp{width:80px;height:22px;display:block;margin:auto;overflow:visible}
svg.sp polyline{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.sp.up polyline{stroke:var(--ganancia)}svg.sp.dn polyline{stroke:var(--perdida)}
tr.destacada svg.sp.up polyline{stroke:#7FE0B3}tr.destacada svg.sp.dn polyline{stroke:#FF9C8F}

/* Adaptación de las pantallas anteriores a la nueva paleta */
section.blq>header h2,.clase-tit,.cabecera-res .fecha{font-family:var(--sans)}
.cifra .grande{font-family:var(--sans);font-weight:500;letter-spacing:-.035em}
.cabecera-res{padding-top:30px}
.cargar h1,.cargar h1 em{font-family:var(--sans);font-weight:600}
.cargar h1{letter-spacing:-.025em}
.btn{border-radius:999px}
th{background:transparent}

@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .lat{position:static;height:auto;flex-direction:column}
  .barra{position:static;padding:12px 16px}
  .col .wrap{padding:0 16px 48px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* El acumulado y la tendencia quedan fijos a la derecha: siempre a la vista aunque haya muchos meses */
table.edo th.acum,table.edo td.acum{position:sticky;right:96px;z-index:2;box-shadow:-1px 0 0 var(--acum-borde)}
table.edo th.acum{z-index:4}
table.edo td.tend,table.edo th.tend{position:sticky;right:0;z-index:2;width:96px;min-width:96px;background:var(--super)}
table.edo th.tend{z-index:4;background:var(--tinta)}
table.edo tr.total td.tend{background:var(--papel-2)}
table.edo tr.destacada td.tend{background:var(--tinta)}
table.edo tr.seccion td{position:static}

/* Grupos plegables de la barra lateral */
.lat-grp{border-radius:6px}
.lat-grp>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:6px;
  font-weight:500;font-size:13.5px;color:#E5EBF1}
.lat-grp>summary::-webkit-details-marker{display:none}
.lat-grp>summary::before{content:"▸";display:inline-block;width:14px;color:#6F7C8B;transition:transform .15s;margin-right:2px}
.lat-grp[open]>summary::before{transform:rotate(90deg)}
.lat-grp>summary:hover{background:var(--lat-2)}
.lat-grp>summary small{margin-left:auto;font:500 10.5px var(--mono);color:#6F7C8B;background:var(--lat-2);padding:1px 7px;border-radius:999px}
.lat-grp>.lat-nav{margin:2px 0 8px 10px;border-left:1px solid #26323F}
.lat-grp>summary{flex-wrap:nowrap}
button.tema{margin:auto 6px 0;background:transparent;color:var(--lat-texto);border:1px solid #2A3644;border-radius:999px;padding:7px 12px;font:500 12.5px var(--sans);cursor:pointer}
button.tema:hover{background:var(--lat-2);color:#fff}
.lat-pie{margin-top:12px}

/* Formulario de carga: período */
.form .campo small{display:block;margin-top:6px;color:var(--tenue);font-size:12px}
.form .periodo{display:flex;gap:12px;margin-top:6px}
.form .periodo label{flex:1;font-size:12px;color:var(--tenue)}
.form .periodo input{display:block;width:100%;margin-top:4px;font:14px var(--sans);background:var(--papel-2);color:var(--tinta);border:1px solid var(--linea);border-radius:2px;padding:10px 12px}

/* Resultado financiero vs resultado PMP */
.puente{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 4px}
.puente .pt{background:var(--super);border:1px solid var(--linea);border-radius:3px;padding:16px 18px}
.puente .pt.fin{border-top:3px solid var(--acento)}
.puente .pt.pmp{border-top:3px solid var(--aviso)}
.puente .pt.cuadre{border-top:3px solid var(--tenue)}
.puente .grande{font:500 clamp(24px,2.6vw,34px)/1.1 var(--mono);margin:8px 0 12px;letter-spacing:-.02em}
table.mini{width:100%;border-collapse:collapse;font-size:12.5px}
table.mini td{padding:5px 0;border-bottom:1px solid var(--linea);text-align:left;font-family:var(--sans)}
table.mini td.num{text-align:right;font-family:var(--mono);white-space:nowrap;padding-left:12px}
table.mini .tenue{color:var(--tenue)}
table.mini tr.tot td{font-weight:600;border-top:1px solid var(--tinta);border-bottom:0}
.puente .nota{margin-top:10px}
@media (max-width:1100px){.puente{grid-template-columns:1fr}}

/* Ajustes: tarjetas del puente y títulos de grupo */
table.mini td{white-space:normal;font-size:12.5px;line-height:1.35}
table.mini td.num{white-space:nowrap}
.lat-grp>summary{justify-content:flex-start}
.lat-grp>summary small{margin-left:auto}

.form .periodo{align-items:center}
.form .periodo input{flex:1;text-align:center;font:500 18px var(--mono);letter-spacing:.12em;margin-top:0}
.form .periodo .al{color:var(--tenue);font-size:14px}
.form details.saldo summary{cursor:pointer}
.form details.saldo textarea{margin-top:8px;min-height:110px;font:13px var(--mono)}

/* Login */
body.login{display:grid;place-items:center;min-height:100vh;background:var(--lat)}
.login-caja{width:min(380px,92vw);background:var(--super);border:1px solid var(--linea);border-radius:4px;padding:34px 32px 30px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-marca{font:600 20px var(--sans);letter-spacing:-.01em}
.login-marca span{margin-left:8px;font:500 11px var(--mono);color:var(--aviso)}
.login-caja h1{margin:22px 0 4px;font:600 26px var(--sans);letter-spacing:-.02em}
.login-caja label{display:block;margin-top:16px;font:500 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.login-caja input{display:block;width:100%;margin-top:6px;font:15px var(--sans);letter-spacing:normal;text-transform:none;background:var(--papel-2);color:var(--tinta);border:1px solid var(--linea);border-radius:2px;padding:11px 12px}
.login-caja .btn{width:100%;margin-top:22px}
.login-error{margin:14px 0 0;color:var(--perdida);font-size:13px}
button.salir{margin:6px 6px 0;background:transparent;color:#8895A4;border:0;font:500 12.5px var(--sans);cursor:pointer;text-align:left;padding:6px 10px}
button.salir:hover{color:#fff}