/* ==========================================================================
   print.css — hoja de impresión de /i
   Se enlaza desde i/index.html con media="print": en pantalla no se aplica
   ninguna de estas reglas, así que /i se ve exactamente igual que antes.

   Qué hace al imprimir:
   - A4 con 18mm de margen.
   - Fondo blanco y texto negro, sin la decoración que no significa nada en
     papel: la etiqueta «New», el velo degradado de arriba, el reloj y el
     conejo del pie (todo el pie: su único contenido son esos dos) y cualquier
     botón.
   - La URL de cada enlace, detrás de su texto. Los enlaces internos se
     completan con el dominio; los de ancla (#…) no llevan nada, porque en
     papel no llevan a ninguna parte.
   - Cada entrada de la lista, entera en la misma página (break-inside: avoid).
   ========================================================================== */

@page {
  size: A4;
  margin: 18mm;
}

@media print {
  html,
  body {
    background: #fff;
    color: #000;
  }

  /* Todo el texto en negro. Los atenuados de pantalla —el `time` de la
     cabecera, el título de cada lista, el `.role-muted` del rol y la fecha de
     cada entrada— son rgba(0,0,0,.4) y en papel salían grises: con este `*`
     se imprimen negros sin tocar ninguna otra cosa (el color no afecta al
     trazo de la etiqueta «New», que además está oculta). */
  * {
    color: #000 !important;
  }

  /* El contenedor y sus velos son recursos de pantalla. */
  .container {
    max-width: none;
    padding: 0;
  }

  .container::before { content: none; }

  /* Nada interactivo ni animado: reloj, conejo, botones y la etiqueta «New». */
  .badge-new,
  #clock-wrap,
  #bunny-wrap,
  button,
  .footer {
    display: none !important;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  /* La URL de cada enlace, detrás de su texto. Los tres !important son
     necesarios: en la lista de /i el ::after del enlace es el filete
     separador, y sin ellos seguiría ganando esa regla. */
  a[href^="http"]::after { content: " (" attr(href) ")" !important; }
  a[href^="/"]::after { content: " (https://escribanoclemente.com" attr(href) ")" !important; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")" !important; }

  /* El separador de las entradas de la lista era ese ::after absoluto: aquí su
     sitio lo ocupa la URL, así que se quita el filete y la posición. */
  .post-list > ul > li > ul > li > a::after {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    border: 0;
  }

  /* La regla de pantalla esconde el ::after de la última entrada de cada
     grupo; al imprimir, la URL se ve en todas. */
  .post-list > ul > li > ul > li:last-child > a::after {
    display: inline;
  }

  /* La URL va en su propia línea, debajo del título y la fecha. */
  .post-list > ul > li > ul > li > a {
    flex-wrap: wrap;
  }

  .post-list > ul > li > ul > li > a::after {
    flex: 1 0 100%;
  }

  /* En pantalla la fecha esconde el separador y el año; en papel se leen los
     tres trozos. */
  .post-list time span {
    position: static !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Cada entrada, entera en la misma página: nada de cortes feos. */
  .post-list > ul > li > ul > li {
    break-inside: avoid;
    page-break-inside: avoid;
    border-bottom: 1px solid #ddd;
  }
}