/* =====================================================================
   Salo Empresas — sistema visual
   Fintech moderno: superficies limpias, números grandes, color por función.
   Los colores de gráfica están validados para daltonismo (ΔE ≥ 9 deutan).
   ===================================================================== */

:root {
  color-scheme: light;

  /* --- Marca --- */
  --navy: #122A4E;
  --navy-700: #1B3B69;
  --navy-300: #5B7CA8;

  /* --- Superficies --- */
  --plano: #F4F6FA;          /* fondo de página */
  --panel: #FFFFFF;          /* tarjetas */
  --panel-2: #F8FAFC;        /* filas alternas, celdas suaves */
  --borde: #E4E9F0;
  --borde-fuerte: #CFD8E3;

  /* --- Tinta --- */
  --tinta: #0F172A;
  --tinta-2: #475569;
  --tinta-3: #7C8AA0;

  /* --- Series de gráfica (validadas, ver dataviz) --- */
  --serie-1: #1BAF7A;        /* entra / ingresos */
  --serie-2: #EB6834;        /* sale / gastos */
  --serie-3: #2A78D6;        /* saldo / neutro */
  --serie-4: #EDA100;

  /* --- Estado (nunca se usan como serie) --- */
  --ok: #0CA30C;
  --ok-tinta: #067306;
  --alerta: #FAB219;
  --grave: #EC835A;
  --critico: #D03B3B;

  /* --- Cromo de gráfica --- */
  --rejilla: #EDF1F6;
  --eje: #CFD8E3;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --sombra: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.05);
  --sombra-alta: 0 4px 12px rgba(15,23,42,.08), 0 16px 40px rgba(15,23,42,.08);
  --lateral-w: 244px;
}

/* Modo oscuro con la paleta de salo.do: navy profundo (no negro) y acento
   menta. Las series de gráfica se validaron contra esta superficie
   (#0A1628): CVD ΔE 9.4 y contraste ≥3:1, todo en verde. El menta se usa
   SOLO como acento de interfaz — como serie falla la banda de luminosidad. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #060F1E;          /* fondo de página */
  --panel: #0A1628;          /* tarjetas */
  --panel-2: #10203A;
  --borde: #1B2E4B;
  --borde-fuerte: #2A4266;
  --tinta: #F2F7FF;
  --tinta-2: #94A8C2;        /* el gris azulado de Salo */
  --tinta-3: #6B819D;
  --serie-1: #199E70;
  --serie-2: #D95926;
  --serie-3: #3987E5;
  --serie-4: #C98500;
  --menta: #10F0A0;          /* acento de Salo */
  --rejilla: #16273F;
  --eje: #2A4266;
  --navy: #0A1628;
  --ok-tinta: #10F0A0;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
  --sombra-alta: 0 4px 14px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

/* [hidden] debe ganarle a cualquier display: sin esto el login queda encima. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--plano);
  color: var(--tinta);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.02em; color: var(--tinta); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .92rem; }
a { color: var(--serie-3); }

.num, .der { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Login ---------- */
.login-pantalla {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(1000px 600px at 15% -8%, #16324F 0%, transparent 58%),
    radial-gradient(820px 500px at 90% 105%, #0C5E52 0%, transparent 52%),
    #060F1E;
}
.login-caja {
  background: var(--panel); padding: 2.1rem; border-radius: var(--r-lg);
  width: min(410px, 100%); box-shadow: 0 24px 70px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 1rem;
}
.login-marca { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.login-marca h1 { font-size: 1.35rem; }
.login-marca p { margin: 0; color: var(--tinta-3); font-size: .85rem; }
.login-caja label { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--tinta-2); }
.login-error { color: var(--critico); font-size: .85rem; margin: 0; text-align: center; font-weight: 500; }
.login-pie { text-align: center; color: var(--tinta-3); font-size: .75rem; margin: .4rem 0 0; line-height: 1.7; }
.login-servidor { font-family: var(--mono); font-size: .7rem; opacity: .75; }
.login-error small { font-weight: 400; opacity: .85; }

/* ---------- Logo: monograma SE ----------
   La S y la E se solapan ligeramente y comparten un trazo, para que se lean
   como una sola marca y no como dos letras sueltas. */
.dmark {
  width: 44px; height: 44px; flex: none; border-radius: 13px;
  background: linear-gradient(145deg, #17E39A 0%, #0FA574 55%, #0B6E7A 100%);
  display: grid; place-items: center; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.dmark svg { width: 62%; height: 62%; display: block; }
.dmark.chico { width: 30px; height: 30px; border-radius: 9px; }
:root[data-theme="dark"] .dmark {
  background: linear-gradient(145deg, #10F0A0 0%, #0BB87B 55%, #0A7E86 100%);
}

/* ---------- Estructura ---------- */
.barra {
  background: var(--panel); border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: .9rem; padding: .65rem 1.3rem;
  position: sticky; top: 0; z-index: 40; height: 58px;
}
.barra .marca { display: flex; align-items: center; gap: .55rem; font-size: .96rem; }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .84rem; }
.ambiente {
  background: #FFF4DB; color: #8A5B00; padding: .2rem .6rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
:root[data-theme="dark"] .ambiente { background: rgba(250,178,25,.16); color: #F3C969; }
.usuario { color: var(--tinta-2); font-weight: 500; }
.menu-btn { display: none; background: none; border: 0; color: var(--tinta); font-size: 1.35rem; cursor: pointer; padding: 0 .2rem; }
.tema-btn {
  background: none; border: 1px solid var(--borde); color: var(--tinta-2);
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: .95rem;
  display: grid; place-items: center;
}
.tema-btn:hover { background: var(--panel-2); }

.cuerpo { display: flex; min-height: calc(100vh - 58px); }

.lateral {
  width: var(--lateral-w); flex: none; background: var(--panel);
  border-right: 1px solid var(--borde); padding: .9rem .7rem 2rem;
  display: flex; flex-direction: column; gap: 1px;
  position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto;
}
.lateral a {
  padding: .5rem .7rem; color: var(--tinta-2); text-decoration: none;
  font-size: .875rem; border-radius: 9px; font-weight: 500;
  display: flex; align-items: center; gap: .55rem;
}
.lateral a:hover { background: var(--panel-2); color: var(--tinta); }
.lateral a.activo { background: var(--navy); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .lateral a { color: #A9BBD0; }
:root[data-theme="dark"] .lateral a:hover { color: #FFFFFF; background: #12243E; }
:root[data-theme="dark"] .lateral a.activo {
  background: #16294A; color: #FFFFFF;
  box-shadow: inset 3px 0 0 var(--menta);   /* el verde solo como marca fina */
}
:root[data-theme="dark"] .lateral a.activo .nav-ico { opacity: 1; color: var(--menta); }
.nav-grupo {
  padding: .95rem .7rem .3rem; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3);
}
.nav-ico { width: 17px; text-align: center; opacity: .85; font-size: .95rem; }

.contenido { flex: 1; padding: 1.5rem 1.7rem 3rem; min-width: 0; max-width: 1500px; }
.cargando { color: var(--tinta-3); padding: 3rem; text-align: center; }

/* ---------- Encabezado de página ---------- */
.pagina-tope {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem;
}
.pagina-tope .sub { color: var(--tinta-3); font-size: .87rem; margin-top: .15rem; }

/* ---------- Tarjetas ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 1.15rem 1.25rem; box-shadow: var(--sombra);
  margin-bottom: 1.15rem;
}
.panel-titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.panel-titulo h2 { display: flex; align-items: center; gap: .5rem; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin-bottom: 1.15rem; }
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 1.05rem 1.15rem; box-shadow: var(--sombra); position: relative; overflow: hidden;
}
.tarjeta .etiqueta {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); font-weight: 650;
}
.tarjeta .valor {
  font-size: 1.75rem; font-weight: 680; color: var(--tinta); margin-top: .35rem;
  letter-spacing: -.03em; line-height: 1.15;
}
.tarjeta .sub { font-size: .78rem; color: var(--tinta-3); margin-top: .3rem; }
.tarjeta.acento::before, .tarjeta.alerta::before, .tarjeta.bien::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.tarjeta.acento::before { background: var(--serie-3); }
.tarjeta.bien::before   { background: var(--serie-1); }
.tarjeta.alerta::before { background: var(--serie-2); }

/* Cifra protagonista */
.hero-cifra { font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }

/* Delta con icono (nunca color solo) */
.delta { font-size: .8rem; font-weight: 650; display: inline-flex; align-items: center; gap: .25rem; }
.delta.sube { color: var(--ok-tinta); }
.delta.baja { color: var(--critico); }
:root[data-theme="dark"] .delta.sube { color: var(--ok); }

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; font-size: .865rem; }
th {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borde);
  font-size: .69rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); font-weight: 700; white-space: nowrap;
}
td { padding: .58rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }
td.der, th.der { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; border-top: 2px solid var(--borde); border-bottom: 0; background: var(--panel-2); }
.tabla-scroll { overflow-x: auto; margin: 0 -.3rem; padding: 0 .3rem; }

/* ---------- Formularios ---------- */
input, select, textarea {
  font-family: var(--sans); font-size: .88rem; padding: .5rem .65rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm);
  background: var(--panel); color: var(--tinta); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--serie-3); outline-offset: -1px; border-color: var(--serie-3);
}
input[type="number"] { font-family: var(--mono); text-align: right; }
input[readonly] { background: var(--panel-2); color: var(--tinta-2); }
select { cursor: pointer; }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: .85rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.campo label { font-size: .765rem; font-weight: 650; color: var(--tinta-2); }
.campo .ayuda { font-size: .715rem; color: var(--tinta-3); line-height: 1.35; }

.btn {
  font-family: var(--sans); font-size: .845rem; font-weight: 600;
  padding: .48rem .9rem; border-radius: var(--r-sm); border: 1px solid var(--borde-fuerte);
  background: var(--panel); color: var(--tinta); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem;
}
.btn:hover { background: var(--panel-2); border-color: var(--tinta-3); }
.btn-primario { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primario:hover { background: var(--navy-700); border-color: var(--navy-700); }
:root[data-theme="dark"] .btn-primario { background: var(--menta); border-color: var(--menta); color: #06251A; }
:root[data-theme="dark"] .btn-primario:hover { background: #3BF5B4; border-color: #3BF5B4; }
:root[data-theme="dark"] .contenido a:not(.btn) { color: #6FD3FF; }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus { outline-color: var(--menta); border-color: var(--menta); }
:root[data-theme="dark"] .dmark { background: linear-gradient(150deg, #10F0A0, #0BB87B); color: #06251A; }
.btn-peligro { background: var(--critico); color: #fff; border-color: var(--critico); }
.btn-texto { background: none; border: 0; color: var(--tinta-2); }
.btn-texto:hover { background: var(--panel-2); }
.btn-chico { padding: .3rem .6rem; font-size: .78rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------- Píldoras de estado ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .55rem; border-radius: 999px;
  font-size: .715rem; font-weight: 650; white-space: nowrap;
}
.pill.borrador  { background: #EEF2F7; color: #566579; }
.pill.emitida   { background: #FFF4DB; color: #8A5B00; }
.pill.enviada   { background: #E4EEFB; color: #1A4E8F; }
.pill.aceptada, .pill.activo, .pill.aprobada, .pill.pagada, .pill.generado {
  background: #E2F5EC; color: #0A6B45;
}
.pill.aceptada_condicional { background: #FFF0DC; color: #8A5000; }
.pill.rechazada, .pill.anulada, .pill.pendiente { background: #FCE8E8; color: #A32020; }
:root[data-theme="dark"] .pill.borrador { background: #14243D; color: #94A8C2; }
:root[data-theme="dark"] .pill.emitida { background: rgba(250,178,25,.14); color: #F3C969; }
:root[data-theme="dark"] .pill.enviada { background: rgba(57,135,229,.16); color: #7FB2F0; }
:root[data-theme="dark"] .pill.aceptada, :root[data-theme="dark"] .pill.activo,
:root[data-theme="dark"] .pill.aprobada, :root[data-theme="dark"] .pill.pagada,
:root[data-theme="dark"] .pill.generado { background: rgba(16,240,160,.12); color: var(--menta); }
:root[data-theme="dark"] .pill.rechazada, :root[data-theme="dark"] .pill.anulada,
:root[data-theme="dark"] .pill.pendiente { background: rgba(208,59,59,.16); color: #F09393; }

/* ---------- Aviso flotante ---------- */
.aviso {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: var(--panel); padding: .75rem 1.15rem;
  border-radius: 11px; box-shadow: var(--sombra-alta);
  z-index: 100; max-width: min(580px, 92vw); font-size: .865rem; font-weight: 500;
}
.aviso.error { background: var(--critico); color: #fff; }
.aviso.exito { background: #0A6B45; color: #fff; }
:root[data-theme="dark"] .aviso { background: var(--panel-2); color: var(--tinta); border: 1px solid var(--borde-fuerte); }
:root[data-theme="dark"] .aviso.exito { background: rgba(16,240,160,.14); color: var(--menta); border-color: rgba(16,240,160,.4); }
:root[data-theme="dark"] .aviso.error { background: rgba(208,59,59,.18); color: #F5A9A9; border-color: rgba(208,59,59,.5); }

/* ---------- Utilidades ---------- */
.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filtros .campo { min-width: 135px; }
.vacio { text-align: center; padding: 2.6rem 1rem; color: var(--tinta-3); font-size: .9rem; }
.nota {
  background: #FFF9E8; border-left: 3px solid var(--alerta);
  padding: .7rem .9rem; border-radius: var(--r-sm); font-size: .84rem; margin-bottom: 1rem;
  color: #5C4708;
}
.nota.peligro { background: #FDECEC; border-left-color: var(--critico); color: #8A1F1F; }
:root[data-theme="dark"] .nota {
  background: #101D31; color: #B8C6D8;
  border-left-color: #4A6284;
}
:root[data-theme="dark"] .nota.peligro { background: #241624; color: #E0A9A9; border-left-color: #8E4444; }
:root[data-theme="dark"] .nota strong { color: #DCE7F3; }
.positivo { color: var(--ok-tinta); }
.negativo { color: var(--critico); }
:root[data-theme="dark"] .positivo { color: var(--ok); }
.suave { color: var(--tinta-3); font-size: .8rem; }

/* =====================================================================
   GRÁFICAS
   ===================================================================== */

.viz { position: relative; width: 100%; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }

.viz-rejilla { stroke: var(--rejilla); stroke-width: 1; }
.viz-eje { stroke: var(--eje); stroke-width: 1; }
.viz-tick {
  font-family: var(--mono); font-size: 10.5px; fill: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.viz-etiqueta { font-family: var(--sans); font-size: 11px; fill: var(--tinta-3); font-weight: 500; }
.viz-valor { font-family: var(--mono); font-size: 10.5px; fill: var(--tinta-2); font-weight: 600; }

/* Barras: extremo redondeado 4px anclado a la base, separación de 2px */
.viz-barra { rx: 4; transition: opacity .12s; }
.viz-barra:hover { opacity: .82; }
.viz-linea { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-punto { r: 4; stroke: var(--panel); stroke-width: 2; }
.viz-area { opacity: .12; }

/* Leyenda: siempre presente con 2+ series */
.viz-leyenda {
  display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center;
  margin-top: .75rem; font-size: .8rem; color: var(--tinta-2); font-weight: 500;
}
.viz-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.viz-marca { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.viz-marca.linea { height: 3px; border-radius: 2px; width: 15px; }

/* Tooltip */
.viz-tip {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--tinta); color: var(--panel);
  padding: .5rem .65rem; border-radius: 9px; font-size: .78rem;
  box-shadow: var(--sombra-alta); white-space: nowrap; opacity: 0;
  transition: opacity .1s; line-height: 1.45;
}
.viz-tip.visible { opacity: 1; }
.viz-tip b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.viz-tip .fila { display: flex; align-items: center; gap: .4rem; justify-content: space-between; }
.viz-tip .pt { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.viz-crosshair { stroke: var(--eje); stroke-width: 1; stroke-dasharray: 3 3; }

/* Barras horizontales con etiqueta al lado */
.viz-fila { display: grid; grid-template-columns: minmax(90px, 1.4fr) 1fr auto; gap: .7rem; align-items: center; margin-bottom: .5rem; font-size: .83rem; }
.viz-fila-nombre { color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-pista { background: var(--panel-2); border-radius: 5px; height: 9px; overflow: hidden; }
.viz-relleno { height: 100%; border-radius: 5px; }
.viz-fila-monto { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 600; font-size: .8rem; }

.grafica-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.15rem; margin-bottom: 1.15rem; }
.grafica-grid .panel { margin-bottom: 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .lateral {
    position: fixed; top: 58px; bottom: 0; left: 0; z-index: 45; height: auto;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 6px 0 28px rgba(15,23,42,.14); width: 260px;
  }
  .lateral.abierto { transform: translateX(0); }
  .contenido { padding: 1.1rem .9rem 3rem; }
  .barra-der .usuario { display: none; }
  h1 { font-size: 1.35rem; }
  .tarjeta .valor { font-size: 1.5rem; }
  .grafica-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   IMPRESIÓN / PDF
   El navegador genera el PDF: se ocultan los controles y se deja el
   contenido en una sola columna, con las gráficas intactas.
   ===================================================================== */
@media print {
  @page { margin: 14mm; size: A4; }
  :root { --plano: #fff; --panel: #fff; --panel-2: #fff; }
  body { background: #fff; font-size: 10.5pt; }
  .barra, .lateral, .aviso, .no-imprimir, .filtros, .btn { display: none !important; }
  .cuerpo { display: block; }
  .contenido { padding: 0; max-width: none; }
  .panel, .tarjeta {
    box-shadow: none; border: 1px solid #CBD5E1;
    break-inside: avoid; page-break-inside: avoid; margin-bottom: .8rem;
  }
  .tarjetas { grid-template-columns: repeat(4, 1fr); gap: .5rem; }
  .grafica-grid { grid-template-columns: 1fr 1fr; }
  .tabla-scroll { overflow: visible; }
  table { font-size: 9pt; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .viz svg { max-height: 220px; }
  a { text-decoration: none; color: inherit; }
  .pie-impresion { display: block !important; margin-top: 1rem; font-size: 8.5pt; color: #64748B; }
}
.pie-impresion { display: none; }

/* =====================================================================
   DIÁLOGO (pagos y cobros)
   Reemplaza a prompt(): permite fecha, forma de pago y cuenta.
   ===================================================================== */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  display: grid; place-items: center; z-index: 200; padding: 1rem;
  backdrop-filter: blur(3px);
}
:root[data-theme="dark"] .modal-fondo { background: rgba(3,8,18,.72); }
.modal {
  background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--sombra-alta);
  width: min(460px, 100%); max-height: 92vh; overflow-y: auto;
  border: 1px solid var(--borde);
}
.modal-tope {
  padding: 1.1rem 1.25rem .3rem; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1rem;
}
.modal-tope h2 { font-size: 1.05rem; }
.modal-tope .sub { color: var(--tinta-3); font-size: .82rem; margin-top: .2rem; }
.modal-cuerpo { padding: .9rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.modal-pie {
  padding: .9rem 1.25rem 1.15rem; display: flex; gap: .55rem; justify-content: flex-end;
  border-top: 1px solid var(--borde); margin-top: .3rem;
}
.modal-cerrar {
  background: none; border: 0; color: var(--tinta-3); font-size: 1.35rem;
  cursor: pointer; line-height: 1; padding: 0 .2rem;
}
.modal-cerrar:hover { color: var(--tinta); }
.modal-resumen {
  background: var(--panel-2); border-radius: var(--r-sm); padding: .7rem .85rem;
  font-size: .84rem; display: flex; justify-content: space-between; gap: 1rem;
}
.modal-resumen b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.modal-error { color: var(--critico); font-size: .82rem; font-weight: 500; }
@media print { .modal-fondo { display: none !important; } }

/* =====================================================================
   FILAS DE SUBTOTAL EN TABLAS
   Antes iban con color fijo en el HTML (#F7F9FC, #EDF2FA…), lo que en modo
   oscuro dejaba texto blanco sobre fondo blanco: ilegible.
   ===================================================================== */
tr.fila-seccion td { background: var(--panel-2); font-weight: 700; color: var(--tinta); }
tr.fila-total td   { background: var(--panel-2); font-weight: 700; color: var(--tinta); }
tr.fila-destacada td {
  background: color-mix(in srgb, var(--serie-3) 10%, var(--panel));
  font-weight: 700; color: var(--tinta);
}
tr.fila-buena td {
  background: color-mix(in srgb, var(--serie-1) 12%, var(--panel));
  font-weight: 700; color: var(--tinta);
}
tr.fila-mala td {
  background: color-mix(in srgb, var(--critico) 12%, var(--panel));
  font-weight: 700; color: var(--tinta);
}
tr.fila-aviso td {
  background: color-mix(in srgb, var(--alerta) 14%, var(--panel));
  font-weight: 700; color: var(--tinta);
}
/* El hover no debe borrar el color de estas filas */
tbody tr.fila-seccion:hover td, tbody tr.fila-total:hover td,
tbody tr.fila-destacada:hover td, tbody tr.fila-buena:hover td,
tbody tr.fila-mala:hover td, tbody tr.fila-aviso:hover td { filter: brightness(1.04); }