/* ===========================================================================
   Bitacora de Ascenso · hoja de impresion
   Lo impreso es el acta de la sesion: sin mandos, sin riel, sin modales, con
   todas las rutas desplegadas y en blanco y negro.
   =========================================================================== */

@media print {
  /* --- Caja de pagina: margenes de acta y una sola columna de lectura. */
  @page {
    size: A4 portrait;
    margin: 16mm 14mm 18mm;
  }

  /* --- Se reescriben los tokens: todo el sistema pasa a blanco y negro. */
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #ffffff;
    --border: #999999;
    --border-strong: #000000;

    --ink: #000000;
    --ink-soft: #000000;
    --ink-faint: #444444;
    --accent: #000000;
    --accent-ink: #000000;
    --accent-wash: #ffffff;
    --on-accent: #ffffff;

    --verde: #000000;
    --verde-wash: #ffffff;
    --ambar: #000000;
    --ambar-wash: #ffffff;
    --rojo: #000000;
    --rojo-wash: #ffffff;

    --shadow-1: none;
    --shadow-2: none;
    --shadow-modal: none;
    --topbar-h: 0px;
  }

  html,
  body {
    background: #ffffff;
    color: #000000;
    font-size: 10.5pt;
    line-height: 1.4;
  }

  /* --- Se ocultan mandos, riel, avisos, modales y todo lo que no es acta. */
  .salto,
  .rail,
  .ayuda,
  .toast,
  .banner-offline,
  .cronometro,
  .topbar__acciones,
  .save-state,
  .chip,
  .boton,
  .tabs,
  .filtro,
  .campamento__acciones,
  .campamento__pie,
  .bitacora__acciones,
  .adjuntos__soltar,
  dialog,
  .lectura,
  .dialogo {
    display: none !important;
  }

  /* --- La barra superior se convierte en la cabecera del acta. */
  .topbar {
    position: static;
    display: block;
    padding: 0 0 4mm;
    margin-bottom: 6mm;
    border-bottom: 1pt solid #000000;
    box-shadow: none;
    background: #ffffff;
  }

  .topbar__marca {
    display: block;
    margin: 0;
  }

  .topbar__espacio {
    display: block;
    border-left: 0;
    padding-left: 0;
    margin-top: 2mm;
    font-size: 13pt;
    letter-spacing: 0.06em;
    color: #000000;
    white-space: normal;
    overflow: visible;
  }

  /* --- Nombre del espacio y fecha: los dos datos que encabezan el acta. */
  .solo-impresion {
    display: block;
  }

  .acta-fecha {
    margin-top: 1mm;
    font-family: var(--font-mono);
    font-size: 8pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #000000;
  }

  /* --- Si nadie escribio la fecha queda una linea de puntos para rellenarla. */
  .acta-fecha__valor:empty {
    display: inline-block;
    min-width: 18ch;
    border-bottom: 0.5pt dotted #000000;
  }

  /* --- Disposicion a una sola columna, sin limites de ancho de pantalla. */
  .disposicion {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .hero {
    border-bottom: 0.5pt solid #000000;
    padding-bottom: 4mm;
  }

  .hero__titulo {
    font-size: 20pt;
    max-width: none;
  }

  .hero__texto {
    font-size: 11pt;
  }

  .stats {
    display: flex;
    gap: 8mm;
    margin-top: 4mm;
  }

  .stat {
    border: 0;
    border-left: 1pt solid #000000;
    padding: 0 0 0 3mm;
  }

  .stat dd {
    font-size: 14pt;
  }

  /* --- Todas las rutas se despliegan, sea details o cuerpo con hidden. */
  .ruta {
    box-shadow: none;
    border: 0;
    border-top: 1pt solid #000000;
    border-radius: 0;
    margin-top: 6mm;
    overflow: visible;
  }

  .ruta__cabecera {
    background: #ffffff;
    border-left: 0;
    padding: 3mm 0 2mm;
    min-height: 0;
  }

  .ruta__chevron,
  .ruta__meta .boton {
    display: none !important;
  }

  .ruta__cuerpo {
    padding: 0;
  }

  .ruta .ruta__cuerpo[hidden],
  .ruta__cuerpo[hidden] {
    display: flex !important;
  }

  details.ruta:not([open]) > *:not(summary),
  details:not([open]) > .ruta__cuerpo {
    display: flex !important;
  }

  details::details-content {
    display: block !important;
    content-visibility: visible !important;
  }

  .ruta__contexto {
    background: #ffffff;
    border-left: 0.5pt solid #000000;
  }

  /* --- Cada campamento se imprime entero: nunca se parte entre dos paginas. */
  .campamento {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 0.5pt solid #000000;
    border-radius: 0;
    margin-top: 4mm;
  }

  .campamento__cabecera {
    background: #ffffff;
    border-bottom: 0.5pt solid #000000;
    padding: 3mm;
  }

  .campamento__cuerpo {
    padding: 3mm;
    gap: 3mm;
  }

  .campamento__alerta {
    margin: 3mm 3mm 0;
    border-left: 1pt solid #000000;
    background: #ffffff;
  }

  .bitacora,
  .narrativa,
  .adjuntos {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .bitacora {
    border: 0;
    border-top: 0.5pt dotted #000000;
    border-radius: 0;
    padding: 3mm 0 0;
    background: #ffffff;
  }

  .bitacora__rejilla {
    gap: 3mm;
  }

  /* --- Los campos se imprimen como texto, no como cajas de formulario. */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    border: 0;
    border-bottom: 0.5pt solid #000000;
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    min-height: 0;
    padding: 0 0 1mm;
    font-size: 10pt;
    resize: none;
    overflow: visible;
    appearance: none;
    -webkit-appearance: none;
  }

  textarea {
    min-height: 12mm;
  }

  .campo__label,
  .semaforo__titulo,
  .narrativa__titulo,
  .adjuntos__titulo,
  .bitacora__orden {
    color: #000000;
    font-size: 7.5pt;
  }

  /* --- Semaforo: las tres opciones se ven y la marcada lleva contorno grueso. */
  .semaforo__grupo {
    gap: 3mm;
  }

  .semaforo__cara {
    min-height: 0;
    padding: 1mm 2mm;
    border: 0.5pt solid #000000;
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    font-weight: 400;
  }

  .semaforo__radio:checked + .semaforo__cara {
    border-width: 1.5pt;
    font-weight: 700;
  }

  .semaforo__radio:checked + .semaforo__cara .semaforo__punto {
    background: #000000;
  }

  .semaforo__punto {
    border-color: #000000;
  }

  /* --- Narrativa: es el relato del acta, se imprime en serif y sin fondo. */
  .narrativa {
    border-left: 1pt solid #000000;
    background: #ffffff;
    padding: 2mm 0 2mm 3mm;
  }

  .narrativa__texto {
    font-size: 11pt;
    max-width: none;
  }

  .adjunto {
    border: 0;
    border-bottom: 0.5pt dotted #000000;
    background: #ffffff;
    min-height: 0;
    padding: 1mm 0;
  }

  /* --- Tablas de administracion: cabecera repetida en cada pagina. */
  .tabla__envoltura {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .tabla thead {
    display: table-header-group;
  }

  .tabla th {
    position: static;
    background: #ffffff;
    border-bottom: 1pt solid #000000;
    color: #000000;
  }

  .tabla tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* --- El pie conserva el lockup conjunto como firma del documento. */
  .pie {
    border-top: 0.5pt solid #000000;
    background: #ffffff;
    margin-top: 8mm;
  }

  .pie__interior {
    padding: 3mm 0 0;
    max-width: none;
  }

  /* --- Las tintas planas de marca y de estado se fuerzan para que salgan. */
  .lockup__jaime,
  .lockup__linea,
  .lockup__a,
  .semaforo__punto,
  .stat {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .lockup__jaime {
    background-color: #000000;
  }

  /* --- La A de AXENOR es un SVG con color propio: se lleva a tinta negra. */
  .lockup__a {
    filter: grayscale(1) brightness(0);
  }

  .lockup__linea {
    background: #000000;
  }

  /* --- Ni sombras ni animaciones: la tinta no las reproduce. */
  * {
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
}