/* ============================================================================
   Impresión.

   El original intentaba revelar los niveles colapsados con
   `details:not([open]) > .level-body { display: block }`, que ya no funciona:
   los navegadores ocultan el contenido de un <details> cerrado mediante
   `content-visibility` en el slot del UA, así que `display` sobre el hijo no
   lo recupera. Aquí se resuelve en JS abriendo los <details> en `beforeprint`
   (ver app.js), que además revela los paneles de nivel —que no son <details>
   sino secciones con `hidden`, porque se abren desde su tarjeta y solo se ve
   una a la vez—. Esta hoja solo se ocupa de la maquetación.
   ========================================================================= */

@media print {
  @page {
    size: A4;
    margin: 14mm;
  }

  body {
    background: #fff;
    background-image: none;
    font-size: 10pt;
    color: #000;
  }

  .shell {
    max-width: none;
    box-shadow: none;
  }

  .toolbar,
  .navbar,
  .scroll-progress-track,
  .blob,
  .watermark,
  .footer,
  dialog.work,
  .launch,
  .simulation-zone,
  .btn,
  .skip-link,
  .mathpad,
  .ML__keyboard,
  .video,
  .save-state {
    display: none !important;
  }

  /* Lo que no llegó a entrar en el viewport sigue en opacity 0: al imprimir
     se fuerza visible o la hoja sale en blanco. */
  .reveal,
  .rise {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero,
  .band--dark,
  .gradient-dark,
  .on-dark {
    padding-block: 8mm;
    background: #fff !important;
    color: #000 !important;
  }

  .hero {
    border-bottom: 1pt solid #000;
  }

  .hero p,
  .hero__badge,
  .hero__eyebrow,
  .kicker,
  .eyebrow,
  .on-dark h2,
  .on-dark h3,
  .on-dark p,
  .measure dd {
    color: #000 !important;
  }

  .hero__badge,
  .card,
  .measures {
    box-shadow: none !important;
  }

  main {
    padding-block: 6mm;
  }

  /* Acordeones y paneles se fuerzan abiertos desde JS; esto asegura el resto. */
  .panel__head,
  .panel__body,
  .review-item__body {
    display: block !important;
  }

  .panel,
  .level-card,
  .card,
  .callout,
  .recommendation {
    break-inside: avoid;
    border: 1pt solid #999;
    box-shadow: none !important;
  }

  section {
    break-inside: auto;
  }

  h2 {
    break-after: avoid;
  }

  .visual {
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #444;
  }
}