/* Diálogo de impresión y documento armado para papel (#printRoot). */

/* ── Impresión ────────────────────────────────────────────────────────────────
   El botón "Imprimir" abre un diálogo (orientación y hoja de indicadores) y
   js/print/print.js arma en #printRoot un documento solo para papel: portada con los KPI y
   la lectura, y los gráficos redibujados al tamaño exacto de la hoja (horizontal:
   uno por hoja; vertical: dos por hoja). Al imprimir se oculta todo lo demás. */
.print-dialog { width: min(520px, 100%); }
.print-orient {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.print-option {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 12px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.print-option input { position: absolute; opacity: 0; pointer-events: none; }
.print-option:hover { border-color: #bfcbe6; }
.print-option:has(input:checked) { border-color: var(--blue); background: var(--soft-blue); }
.print-option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(51, 85, 216, .2); }
.print-option strong { font-size: 14px; color: var(--text); }
.print-option small { font-size: 12px; color: var(--muted); line-height: 1.35; }
/* Dibujito de la hoja: la orientación y cuántos gráficos entran. */
.print-sheet {
  display: grid;
  gap: 4px;
  padding: 6px;
  margin-bottom: 4px;
  border: 1.5px solid #9aa7c2;
  border-radius: 4px;
  background: #fff;
}
.print-sheet.is-landscape { width: 64px; height: 46px; }
.print-sheet.is-portrait { width: 46px; height: 64px; }
.print-sheet i { display: block; border-radius: 2px; background: rgba(51, 85, 216, .35); }
.print-option:has(input:checked) .print-sheet { border-color: var(--blue); }
.print-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.print-check[hidden] { display: none; }
.print-check input { width: 18px; height: 18px; padding: 0; accent-color: var(--blue); }
.print-summary { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

#printRoot { display: none; }

@media print {
  html[data-printing] body { background: #fff; margin: 0; }
  html[data-printing] body > *:not(#printRoot) { display: none !important; }
  html[data-printing] #printRoot {
    display: block;
    color: #111827;
    font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif;
  }
  #printRoot .pr-page { break-after: page; page-break-after: always; }
  #printRoot .pr-page:last-child { break-after: auto; page-break-after: auto; }
  #printRoot .pr-header {
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    padding-bottom: 2mm;
    margin-bottom: 4mm;
    border-bottom: 0.3mm solid #d9e4f2;
    font-size: 8pt;
    color: #667085;
  }
  #printRoot .pr-header strong { color: #14306e; }
  #printRoot .pr-cover h1 { margin: 0 0 1.5mm; font-size: 22pt; color: #3355d8; letter-spacing: -0.2pt; }
  #printRoot .pr-lead { margin: 0 0 4mm; font-size: 10.5pt; color: #475467; }
  #printRoot .hero-meta { display: flex; flex-wrap: wrap; gap: 2mm; margin: 0 0 5mm; }
  #printRoot .hero-meta-item {
    display: inline-flex;
    gap: 1.5mm;
    align-items: baseline;
    padding: 1.2mm 3mm;
    border: 0.3mm solid #d9e4f2;
    border-radius: 10mm;
  }
  #printRoot .hero-meta-item span { font-size: 7pt; font-weight: 800; text-transform: uppercase; color: #667085; }
  #printRoot .hero-meta-item strong { font-size: 9pt; }

  /* Indicadores: grilla propia de papel (3×2 horizontal, 2×3 vertical). */
  #printRoot .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin: 0;
    border: 0.3mm solid #d9e4f2;
    border-radius: 4mm;
    box-shadow: none;
    overflow: hidden;
  }
  html[data-printing="portrait"] #printRoot .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #printRoot .kpi-grid .card {
    border: 0 !important;
    border-right: 0.3mm solid #e3e7ef !important;
    border-bottom: 0.3mm solid #e3e7ef !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 4mm 4.5mm !important;
    min-height: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    animation: none !important;
    break-inside: avoid;
  }
  #printRoot .kpi-grid .label { font-size: 8.5pt !important; }
  #printRoot .kpi-grid .value {
    font-size: 24pt !important;
    margin-top: 2mm !important;
    white-space: nowrap !important;
  }
  #printRoot .kpi-grid .trend { font-size: 8pt !important; margin-top: 2mm !important; }
  #printRoot .kpi-grid .sub { font-size: 8.5pt !important; margin-top: 2mm !important; line-height: 1.35 !important; }
  #printRoot .insight {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5mm;
    margin: 5mm 0 0;
    padding: 4mm 5mm;
    border: 0.3mm solid #d9e4f2;
    border-left: 1.2mm solid #3355d8;
    border-radius: 3mm;
    background: #f5f8ff !important;
    color: #111827 !important;
    box-shadow: none !important;
    animation: none !important;
    break-inside: avoid;
  }
  #printRoot .insight h2 { margin: 0 0 1.5mm; font-size: 8.5pt; letter-spacing: 0.08em; text-transform: uppercase; color: #14306e !important; }
  #printRoot .insight p { margin: 0; font-size: 10.5pt; line-height: 1.5; color: #111827 !important; }
  #printRoot .insight-badges { display: flex; flex-direction: column; gap: 2mm; align-self: center; }
  #printRoot .badge { font-size: 8.5pt; padding: 1.5mm 3mm; border-radius: 10mm; white-space: nowrap; }

  /* Gráficos. */
  #printRoot .pr-chart { break-inside: avoid; page-break-inside: avoid; }
  #printRoot .pr-chart + .pr-chart { margin-top: 6mm; }
  #printRoot .pr-chart h2 { margin: 0 0 1mm; font-size: 14pt; }
  #printRoot .pr-note { margin: 0; font-size: 9pt; line-height: 1.4; color: #475467; }
  #printRoot .pr-compare { margin: 1.5mm 0 0; font-size: 8.5pt; color: #24409e; }
  #printRoot .pr-compare strong { font-weight: 800; }
  #printRoot .pr-chart canvas.pr-canvas {
    display: block;
    width: var(--pr-w) !important;
    height: var(--pr-h) !important;
    margin-top: 3mm !important;
  }
}