/**
 * finanzas-resultados.css — WTF Publicidad Panel Interno
 * Finanzas · Módulo 4: Estado de resultados (bloques/finanzas-resultados.html).
 *
 * Sobre el lenguaje de Gastos (finanzas.css) y de Ventas (ventas.css): aquí
 * solo va lo propio del módulo. El verde sigue siendo acento, nunca fondo de
 * superficies grandes, y el texto verde sobre blanco usa el verde oscuro.
 * Todos los montos van con cifras de ancho fijo (tabular-nums) para que las
 * columnas cuadren a la vista.
 */

/* ─────────────────────────────────────────
   EL ESTADO DE RESULTADOS, RENGLÓN POR RENGLÓN
   ───────────────────────────────────────── */
.res-edo { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); box-shadow:var(--shadow-card); overflow:hidden; }
.res-edo-fila { display:grid; grid-template-columns:1fr auto 84px; align-items:baseline; gap:.5rem .9rem;
                padding:.55rem .95rem; border-bottom:1px solid var(--sep); font-size:12.5px; }
.res-edo-fila:last-child { border-bottom:0; }
.res-edo-lbl { color:var(--t); }
.res-edo-monto { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.res-edo-pct { font-variant-numeric:tabular-nums; font-size:11px; color:var(--ts); text-align:right; white-space:nowrap; }

/* El signo de cada renglón: (+), (−), (=) */
.res-signo { display:inline-block; width:1.5em; color:var(--ts); font-weight:700; }

/* Renglones de detalle, un escalón adentro */
.res-edo-fila.sub { background:var(--c2); font-size:11.5px; }
.res-edo-fila.sub .res-edo-lbl { padding-left:2.2rem; color:var(--ts); }
.res-edo-fila.sub .res-edo-monto { font-weight:500; }

/* Los tres resultados: utilidad bruta, utilidad neta y el ingreso sin pauta */
.res-edo-fila.total { border-top:1px solid var(--br); font-weight:700; font-size:13.5px; }
.res-edo-fila.total .res-edo-monto { font-weight:800; }
.res-edo-fila.neta { background:var(--green-bg); border-top:1px solid var(--green-br); }
.res-edo-fila.neta.perdida { background:var(--red-bg); border-top-color:var(--red-br); }

/* Un monto en positivo o en negativo, con el color que le toca */
.res-pos { color:var(--vta-verde); }
.res-neg { color:var(--vta-rojo); }

/* ─────────────────────────────────────────
   NOTAS Y AVISOS
   ───────────────────────────────────────── */
.res-nota { font-size:11px; color:var(--ts); line-height:1.55; margin:.45rem 0 0; }
.res-nota-caja { background:var(--c2); border:1px solid var(--br); border-radius:var(--r);
                 padding:.55rem .75rem; font-size:11px; color:var(--ts); line-height:1.55; margin:.6rem 0 0; }
.res-vacio { font-size:11.5px; color:var(--ts); font-style:italic; padding:.55rem .95rem; line-height:1.55; }

/* ─────────────────────────────────────────
   PUNTO DE EQUILIBRIO
   ───────────────────────────────────────── */
.res-eq { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2);
          box-shadow:var(--shadow-card); padding:.9rem 1rem; }
.res-eq.alcanzado { border-color:var(--green-br); }
.res-eq.falta { border-color:var(--yellow-br); }
.res-eq-val { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.2; }
.res-eq-formula { font-size:11px; color:var(--ts); margin:.2rem 0 .7rem; line-height:1.55; }
.res-eq-barra { height:10px; border-radius:10px; background:var(--c2); overflow:hidden; margin:.55rem 0 .35rem; }
.res-eq-barra i { display:block; height:100%; border-radius:10px; background:var(--g); }
.res-eq.falta .res-eq-barra i { background:var(--yellowtxt); }
.res-eq-cuentas { display:flex; flex-wrap:wrap; gap:.35rem 1.2rem; font-size:11.5px; color:var(--ts); margin-top:.5rem; }
.res-eq-cuentas b { color:var(--t); font-variant-numeric:tabular-nums; }

/* ─────────────────────────────────────────
   COMPARATIVOS
   ───────────────────────────────────────── */
.res-comp { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:.7rem; }
.res-comp-caja { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2);
                 box-shadow:var(--shadow-card); overflow:hidden; }
.res-comp-cab { padding:.55rem .85rem; border-bottom:1px solid var(--sep); background:var(--c2); }
.res-comp-tit { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ts); }
.res-comp-sub { font-size:11.5px; color:var(--t); margin-top:.1rem; }
.res-comp-fila { display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:.5rem .8rem;
                 padding:.42rem .85rem; border-bottom:1px solid var(--sep); font-size:11.5px; }
.res-comp-fila:last-child { border-bottom:0; }
.res-comp-fila b { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.res-comp-pct { font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; min-width:64px; text-align:right; }

/* ─────────────────────────────────────────
   TENDENCIA DE 12 MESES (SVG a mano, sin librerías)
   ───────────────────────────────────────── */
.res-graf { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2);
            box-shadow:var(--shadow-card); padding:.9rem 1rem .6rem; overflow-x:auto; }
.res-graf svg { display:block; width:100%; min-width:520px; height:auto; }
.res-graf-eje { stroke:var(--br); stroke-width:1; }
.res-graf-guia { stroke:var(--sep); stroke-width:1; stroke-dasharray:3 3; }
.res-graf-ing { fill:var(--g); }
.res-graf-ing.sin-datos { fill:var(--td); }
.res-graf-uti { fill:none; stroke:var(--blue); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.res-graf-uti-pt { fill:var(--blue); }
.res-graf-uti-neg { fill:var(--red); }
.res-graf-txt { font-size:9px; fill:var(--ts); font-family:var(--font); }
.res-graf-txt.mes { text-anchor:middle; }
.res-graf-txt.val { text-anchor:end; }
.res-graf-actual { fill:var(--green-bg); }
.res-graf-leyenda { display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-size:11px; color:var(--ts); margin-top:.5rem; }
.res-graf-leyenda span { display:inline-flex; align-items:center; gap:.3rem; }
.res-graf-marca { width:11px; height:11px; border-radius:3px; display:inline-block; }
.res-graf-marca.ing { background:var(--g); }
.res-graf-marca.uti { background:var(--blue); }

/* ─────────────────────────────────────────
   TOP DE CLIENTES
   ───────────────────────────────────────── */
.res-cli-barra { height:6px; border-radius:6px; background:var(--c2); overflow:hidden; min-width:70px; }
.res-cli-barra i { display:block; height:100%; border-radius:6px; background:var(--g); }
.res-cli-barra.mucho i { background:var(--yellowtxt); }

/* ─────────────────────────────────────────
   CIERRE DE MES
   ───────────────────────────────────────── */
.res-cierre { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
              background:var(--c1); border:1px solid var(--br); border-radius:var(--r2);
              box-shadow:var(--shadow-card); padding:.65rem .9rem; margin-bottom:.9rem; }
.res-cierre.cerrado { border-color:var(--green-br); background:var(--green-bg); }
.res-cierre.movido { border-color:var(--yellow-br); background:var(--yellow-bg); }
.res-cierre-txt { flex:1 1 260px; font-size:11.5px; color:var(--t); line-height:1.55; }
.res-cierre-txt b { font-weight:700; }
.res-cierre-sub { font-size:11px; color:var(--ts); margin-top:.15rem; }

/* La tabla de «qué se movió desde que se cerró» */
.res-dif { margin-top:.6rem; }
.res-dif-fila { display:grid; grid-template-columns:1fr auto auto auto; gap:.4rem .8rem;
                padding:.35rem 0; border-bottom:1px solid var(--sep); font-size:11.5px; }
.res-dif-fila:last-child { border-bottom:0; }
.res-dif-fila b { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }

/* ─────────────────────────────────────────
   CELULAR
   ───────────────────────────────────────── */
@media (max-width:640px) {
  .res-edo-fila { grid-template-columns:1fr auto; }
  .res-edo-pct { grid-column:2; text-align:right; }
  .res-edo-fila.sub .res-edo-lbl { padding-left:1.4rem; }
  .res-comp { grid-template-columns:1fr; }
  .res-eq-val { font-size:19px; }
  .res-dif-fila { grid-template-columns:1fr auto; }
}

/* ─────────────────────────────────────────
   IMPRESIÓN: el PDF del contador lo hace el navegador
   (Archivo → Imprimir → Guardar como PDF). Se esconde el
   armazón del panel y se dejan solo las cifras del mes.
   ───────────────────────────────────────── */
@media print {
  .sidebar, .topbar, #tb-fixed, .modal-overlay, .vta-hdr-btns, .fin-tabs,
  .vta-periodo-flecha, .vta-btn, .res-no-imprimir { display:none !important; }
  #main-wrap, #main-wrap.collapsed { margin-left:0 !important; padding:0 !important; }
  .main { max-width:100%; }
  body, html { background:#fff !important; }
  .res-imprimir-cab { display:block !important; margin-bottom:1rem; }
  .res-edo, .res-eq, .res-comp-caja, .res-graf, .vta-tabla-wrap, .vta-tot, .res-cierre {
    box-shadow:none !important; border:1px solid #ccc !important; break-inside:avoid;
  }
  .vta-seccion { break-after:avoid; }
}
.res-imprimir-cab { display:none; }