/* ---------------------------------------------------------------------------
   Crucigramas — impresión en blanco y negro.

   Detalle importante: los navegadores NO imprimen los fondos si la usuaria no
   activa esa casilla en el diálogo de impresión. Por eso las casillas negras no
   se pintan con `background`, sino con un BORDE tan grueso como media casilla:
   los bordes se imprimen siempre. En papel salen negras sí o sí.

   Se imprime lo que hay en pantalla (las letras escritas incluidas). Se quitan
   las marcas de comprobación, que son ayuda de pantalla y en papel estorban.
--------------------------------------------------------------------------- */

@media print {

  @page {
    margin: 12mm;
  }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt;
  }

  body.en-juego {
    display: block;
    height: auto;
    overflow: visible;
  }

  .cabecera,
  .barra-definicion,
  .acciones,
  .confirmacion,
  .teclado,
  .leyenda,
  .resultado-comprobacion,
  .aviso,
  .saltar-al-contenido,
  .pie,
  #pantalla-inicio,
  #cargando {
    display: none !important;
  }

  #principal,
  .pantalla-juego,
  .zona-scroll {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .titulo-impresion {
    display: block !important;
    font-size: 16pt;
    margin: 0 0 4mm;
  }

  .enhorabuena {
    border: 1pt solid #000;
    color: #000 !important;
    background: none !important;
  }

  /* ------------------------------------------------------------ rejilla */

  .rejilla-envoltorio {
    display: block;
    overflow: visible;
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 0 0 6mm;
  }

  .rejilla {
    /* !important porque en pantalla el lado de la casilla lo pone el guion en el
       atributo `style` (juego.ts), y un estilo en línea gana a la hoja. En papel
       manda el milímetro: 9 mm es lo que cabe en un A4 con un 13x13. */
    --casilla: 9mm !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 0.8mm solid #000;
    background: none;
  }

  .casilla {
    width: var(--casilla);
    height: var(--casilla);
    border-right: 0.3mm solid #000;
    border-bottom: 0.3mm solid #000;
    background: none !important;
    box-shadow: none !important;
    color: #000 !important;
    font-size: 5mm;
    line-height: var(--casilla);
  }

  /* Casilla negra: borde de media casilla en cada lado, y queda maciza. */
  .casilla-negra {
    border: 4.5mm solid #000 !important;
    background: none !important;
  }

  .casilla-numero {
    font-size: 2.4mm;
    color: #000 !important;
  }

  .casilla-letra {
    color: #000 !important;
    text-decoration: none !important;
  }

  .casilla-error::after,
  .casilla-revelada::after,
  .definicion-boton.completa .definicion-numero::after {
    content: '' !important;
    display: none !important;
  }

  /* ------------------------------------------------------- definiciones */

  .listas-definiciones {
    display: block;
    margin: 0;
  }

  .lista-definiciones {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 4mm;
  }

  .titulo-seccion {
    font-size: 12pt;
    margin: 3mm 0 1.5mm;
  }

  .definiciones {
    -webkit-columns: 2;
    columns: 2;
    -webkit-column-gap: 8mm;
    column-gap: 8mm;
  }

  .definiciones li {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  }

  .definicion-boton {
    display: block;
    min-height: 0;
    padding: 0.4mm 0;
    border: 0 !important;
    background: none !important;
    font-size: 9.5pt;
    font-weight: 400 !important;
    line-height: 1.25;
    color: #000 !important;
  }

  .definicion-numero {
    min-width: 7mm;
  }

  .atribucion-juego {
    display: block !important;
    margin-top: 4mm;
    font-size: 8pt;
    color: #000 !important;
  }
}