/* ─────────────────── Informe mensual (2026-10-16) ───────────────────
   Un informe para decidir: veredicto + curva, una franja de indicadores, riesgos y oportunidades
   con su cifra en juego, tendencia y los que más gastan. Abajo, el papel: "Guardar PDF" imprime
   esta misma pantalla en tema claro (kipiaImprimir) con rótulo, encabezado y pie con paginado. */

.informe__par { grid-template-columns: 1fr 1fr; align-items: stretch; }
.informe .tarjeta__cabecera { justify-content: space-between; flex-wrap: wrap; row-gap: 2px; }
.informe .tarjeta__cabecera .sub { margin: 0; color: var(--k-text-tertiary); font-size: var(--k-fs-small); }

/* Veredicto: la frase del mes a la izquierda, la curva que la respalda a la derecha */
.veredicto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.veredicto__texto {
    display: flex; flex-direction: column; gap: var(--k-sp-4);
    padding: var(--k-sp-6); border-right: 1px solid var(--k-border-subtle);
}
.veredicto__titular {
    margin: 0; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em;
    color: var(--k-text-primary); max-width: 26ch; text-wrap: balance;
}
.veredicto__bajada { margin: 0; color: var(--k-text-secondary); max-width: 56ch; }
.veredicto__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--k-fs-small); color: var(--k-text-secondary); max-width: 62ch; }
.veredicto__datos li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: start; }
.veredicto__datos svg { margin-top: 2px; color: var(--k-text-tertiary); }
.veredicto__datos .dato-good svg { color: var(--k-success); }
.veredicto__balance {
    margin-top: auto; padding-top: var(--k-sp-4); border-top: 1px solid var(--k-border-subtle);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-sp-3);
}
.veredicto__balance > div { display: grid; gap: 2px; }
.veredicto__balance strong { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--k-text-primary); }
.veredicto__balance span { font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.veredicto__balance .balance--riesgo strong { color: var(--k-warning); }
.veredicto__balance .balance--ahorro strong { color: var(--k-accent); }
.veredicto__curva { min-width: 0; }
.veredicto__curva .tarjeta__cabecera { border-bottom: 0; padding-bottom: 0; }

.chip-estado {
    display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    padding: 3px 10px; border-radius: var(--k-radius-pill); font-size: var(--k-fs-small); font-weight: 500;
    background: var(--k-bg-raised); color: var(--k-text-secondary);
}
.chip-estado i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-estado--sube { background: var(--k-warning-bg); color: var(--k-warning); }
.chip-estado--baja { background: var(--k-success-bg); color: var(--k-success); }
.chip-estado--alerta { background: var(--k-danger-bg); color: var(--k-danger); }

/* Curva acumulada y barras por mes (SVG a mano; ver GraficoCierre y GraficoMeses) */
.cierre, .meses { padding: var(--k-sp-2) var(--k-sp-4) var(--k-sp-4); }
.cierre__svg, .meses__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cierre__eje { fill: var(--k-text-tertiary); font-size: 11px; font-family: var(--k-font-ui); }
.cierre__fin { fill: var(--k-text-primary); font-size: 12px; font-weight: 600; font-family: var(--k-font-ui); }
.meses__valor { fill: var(--k-text-secondary); font-size: 11px; font-family: var(--k-font-data); }
.meses__frenado { fill: var(--k-warning); font-size: 10px; font-family: var(--k-font-data); }
.meses__frenado-ley { color: var(--k-warning); }
.cierre__leyenda { display: flex; flex-wrap: wrap; gap: var(--k-sp-2) var(--k-sp-4); font-size: var(--k-fs-small); color: var(--k-text-secondary); margin-top: var(--k-sp-2); }
.cierre__leyenda i.clave { margin-right: 6px; vertical-align: middle; }

/* Indicadores: una sola banda dividida, no cinco tarjetas */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { display: grid; gap: 4px; align-content: start; padding: var(--k-sp-4) var(--k-sp-5); border-right: 1px solid var(--k-border-subtle); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi__rotulo { font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.kpi__cifra { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--k-text-primary); overflow-wrap: anywhere; }
.kpi__cifra--alerta { color: var(--k-danger); }
.kpi__pie { font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.delta--sube { color: var(--k-warning); }
.delta--baja { color: var(--k-success); }
.delta--neutro { color: var(--k-text-tertiary); }

/* Riesgos y oportunidades */
.hallazgos { list-style: none; margin: 0; padding: 0; }
.hallazgo {
    display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: var(--k-sp-3); align-items: start;
    padding: var(--k-sp-3) var(--k-sp-4); border-top: 1px solid var(--k-border-subtle);
}
.hallazgo:first-child { border-top: 0; }
.hallazgo__texto { color: var(--k-text-primary); line-height: 1.5; }
.hallazgo__impacto { display: grid; justify-items: end; gap: 2px; text-align: right; white-space: nowrap; font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.hallazgo__impacto strong { color: var(--k-text-primary); font-variant-numeric: tabular-nums; font-size: var(--k-fs-body); }
.hallazgo__impacto a { color: var(--k-accent-text, var(--k-accent)); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.hallazgos__vacio { display: flex; gap: var(--k-sp-2); align-items: center; margin: 0; padding: var(--k-sp-5) var(--k-sp-4); color: var(--k-text-tertiary); }
.sev {
    justify-self: start; margin-top: 1px; padding: 1px 8px; border-radius: var(--k-radius-sm, 4px);
    font-size: var(--k-fs-micro); font-weight: 600; white-space: nowrap;
}
.sev--bad { background: var(--k-danger-bg); color: var(--k-danger); }
.sev--warn { background: var(--k-warning-bg); color: var(--k-warning); }
.sev--info, .sev--good { background: var(--k-bg-raised); color: var(--k-text-secondary); }
.sev--oportunidad { background: var(--k-accent-bg, var(--k-success-bg)); color: var(--k-accent-text, var(--k-accent)); }

/* Composición (BarraApilada) dentro de la tarjeta */
.composicion { padding: var(--k-sp-3) var(--k-sp-4) var(--k-sp-4); }

/* Ranking con variación: top N y "otros" */
.ranking { list-style: none; margin: 0; padding: var(--k-sp-3) var(--k-sp-4) var(--k-sp-4); display: grid; gap: 10px; }
.ranking__fila {
    display: grid; grid-template-columns: minmax(0, 11rem) minmax(40px, 1fr) 6.5rem 3.6rem 3.8rem;
    gap: var(--k-sp-3); align-items: center; font-size: var(--k-fs-body);
}
.ranking__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-text-primary); }
.ranking__nombre a { color: inherit; text-decoration: none; }
.ranking__nombre a:hover { text-decoration: underline; }
.ranking__pista { height: 8px; border-radius: 4px; background: var(--k-data-grid); overflow: hidden; }
.ranking__pista > span { display: block; height: 100%; border-radius: 4px; background: var(--k-data-1); }
.ranking__valor, .ranking__pct, .ranking__delta { text-align: right; font-family: var(--k-font-data); font-size: var(--k-fs-data); font-variant-numeric: tabular-nums; }
.ranking__pct { color: var(--k-text-tertiary); }
.ranking__fila--otros .ranking__nombre { color: var(--k-text-tertiary); }
.ranking__fila--otros .ranking__pista > span { background: var(--k-data-other); }

/* Control y aprobaciones */
.control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-sp-6); padding: var(--k-sp-4); }
.control h3 { margin: 0 0 var(--k-sp-2); font-size: var(--k-fs-small); font-weight: 500; color: var(--k-text-tertiary); }
.control__fila { display: flex; justify-content: space-between; gap: var(--k-sp-3); padding: 5px 0; border-bottom: 1px solid var(--k-border-subtle); font-size: var(--k-fs-body); }
.control__fila:last-child { border-bottom: 0; }
.control__fila .num { font-family: var(--k-font-data); font-size: var(--k-fs-data); white-space: nowrap; }
.control__fila--alerta { color: var(--k-warning); }
.control__fila--vacia { color: var(--k-text-tertiary); }

/* El rótulo del PDF no existe en pantalla */
.rotulo-pdf { display: none; }

@media screen and (max-width: 1100px) {
    .veredicto { grid-template-columns: 1fr; }
    .veredicto__texto { border-right: 0; border-bottom: 1px solid var(--k-border-subtle); }
    .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpi:nth-child(3) { border-right: 0; }
    .kpi:nth-child(n+4) { border-top: 1px solid var(--k-border-subtle); }
}
@media screen and (max-width: 760px) {
    .informe__par, .control { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi { border-right: 0; border-top: 1px solid var(--k-border-subtle); }
    .kpi:first-child { border-top: 0; }
    .veredicto__balance { grid-template-columns: 1fr; }
    .ranking__fila { grid-template-columns: minmax(0, 1fr) 6rem 3.6rem; }
    .ranking__pista, .ranking__pct { display: none; }
    .hallazgo { grid-template-columns: 1fr; }
    .hallazgo__impacto { justify-items: start; text-align: left; }
}

/* ── Papel: "Guardar PDF" ──
   A4 vertical. Encabezado y pie se dibujan en las cajas de margen de @page (empresa, mes, fecha de
   generación, "Página X de Y"); el texto de esas cajas lo pone la página con un <style> propio. */
@media print {
    @page { size: A4 portrait; margin: 18mm 13mm 16mm; }
    @page {
        @top-left { font: 8pt 'Space Grotesk', sans-serif; color: #5b6770; vertical-align: bottom; padding-bottom: 3mm; }
        @top-right { font: 8pt 'Space Grotesk', sans-serif; color: #5b6770; vertical-align: bottom; padding-bottom: 3mm; }
        @bottom-left { font: 8pt 'Space Grotesk', sans-serif; color: #5b6770; vertical-align: top; padding-top: 3mm; }
        @bottom-right { font: 8pt 'IBM Plex Mono', monospace; color: #5b6770; vertical-align: top; padding-top: 3mm; }
    }
    html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Lo de la app que no es el informe (en A4 la pantalla mide ~700 px y el marco pasa a modo móvil). */
    .barra-movil, .nav-velo { display: none !important; }
    .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .informe { gap: 5mm; font-size: 9pt; }
    .informe .tarjeta { border: 0.6pt solid #d5dde0 !important; box-shadow: none !important; break-inside: avoid; }
    .informe .tarjeta__cabecera { padding: 3mm 4mm 2mm; }
    .informe .tarjeta__cabecera h2 { font-size: 10.5pt; }
    .informe__par { grid-template-columns: 1fr 1fr !important; gap: 5mm; }

    .rotulo-pdf {
        display: grid; grid-template-columns: 1fr auto; gap: 6mm; align-items: start;
        padding: 0 0 4mm; margin-bottom: 1mm; border-bottom: 1.6pt solid var(--k-data-1);
    }
    .rotulo-pdf__marca { order: 2; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13pt; letter-spacing: .01em; color: #10302b; }
    .rotulo-pdf__marca .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--k-data-1); display: inline-block; }
    .rotulo-pdf__org { font-size: 9pt; color: #5b6770; }
    .rotulo-pdf__titulo { margin: 1mm 0 1.5mm; font-size: 17pt; line-height: 1.2; font-weight: 600; color: #10181c; }
    .rotulo-pdf__meta { display: flex; flex-wrap: wrap; gap: 1mm 5mm; font-size: 8pt; color: #5b6770; }

    .veredicto { grid-template-columns: 1fr 1fr; }
    .informe__par { align-items: start; }
    .informe__par--ranking { grid-template-columns: 1fr !important; }
    .veredicto__texto { padding: 4mm 5mm; gap: 3mm; }
    .veredicto__titular { font-size: 14pt; }
    .veredicto__balance strong { font-size: 11pt; }
    .kpi { padding: 3mm 4mm; }
    .kpi__cifra { font-size: 13pt; }
    .hallazgo { padding: 2.2mm 4mm; grid-template-columns: 15mm minmax(0, 1fr) auto; }
    .ranking { padding: 2mm 4mm 3mm; gap: 2mm; }
    .ranking__fila { grid-template-columns: minmax(0, 60mm) minmax(20mm, 1fr) 24mm 14mm 14mm; font-size: 8.5pt; }
    .control { padding: 3mm 4mm; gap: 6mm; }
    .informe__pie { max-width: none; font-size: 7.5pt; }
    .cierre__leyenda { font-size: 7.5pt; }
    /* Una hoja por bloque grande: la tendencia y los rankings empiezan página nueva si no entran. */
    .informe__par { break-inside: avoid; }
}