/* ================================================================
   PAWPrints — Librería
   print.css: Reglas de impresión optimizadas (@media print)
   ================================================================ */

@media print {
  /* ----------------------------------------------------------------
     1. RESET DE PALETA & VARIABLES PARA IMPRESIÓN
     Ahorro de tinta y máximo contraste en papel/PDF
     ---------------------------------------------------------------- */
  :root {
    --v700: #000000;
    --v600: #000000;
    --v500: #333333;
    --v100: #EEEEEE;
    --v50:  #F5F5F5;
    --cream: #FFFFFF;
    --footer-bg: #FFFFFF;
    --dark: #000000;
    --muted: #444444;
  }

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* ----------------------------------------------------------------
     2. ELEMENTOS NO IMPRIMIBLES (Ocultar)
     ---------------------------------------------------------------- */
  body > header search,
  body > header > p:last-child,
  #carrito,
  footer > section:last-of-type,
  hr {
    display: none !important;
  }

  /* ----------------------------------------------------------------
     3. CONFIGURACIÓN DE PÁGINA Y SALTOS
     ---------------------------------------------------------------- */
  @page {
    margin: 2cm 1.5cm;
    size: A4 portrait;
  }

  @page :first {
    margin-top: 1cm;
  }

  article,
  section,
  figure,
  h1,
  h2,
  h3 {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* ----------------------------------------------------------------
     4. HEADER Y FOOTER EN IMPRESIÓN
     ---------------------------------------------------------------- */
  /* Siempre `body > header`: las tarjetas de libro (catálogo, detalle,
     reserva) también tienen su <header>, y apuntar por tipo de elemento
     las desarmaba y les ocultaba el autor. */
  body > header {
    position: static;
    border-bottom: 1px solid #CCCCCC;
    padding: 0.3cm 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* El breakpoint de 768px también rige al imprimir (la hoja mide ≈ 18cm) y
     baja el nav a una segunda fila; en papel va en la misma línea que la marca */
  body > header nav {
    order: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    padding-bottom: 0;
  }

  body > header nav ul {
    display: flex;
    gap: 1rem;
  }

  body > header nav a[aria-current="page"]::after {
    display: none;
  }

  footer {
    display: block;
    background: none !important;
    color: #000000 !important;
    padding: 0.4cm 0;
    border-top: 1px solid #CCCCCC;
    margin-top: 1cm;
    /* Partido entre dos hojas queda "Navegación" en una y "Contacto" en otra */
    page-break-inside: avoid;
    break-inside: avoid;
  }

  footer h2,
  footer p,
  footer a,
  footer address {
    color: #000000 !important;
  }

  /* En pantalla el footer es una grilla y estas dos líneas comparten fila,
     así que la última se tira hacia arriba. Impreso el footer es un bloque:
     ese tiro la superpondría sobre el copyright. */
  footer > p:last-child {
    margin-top: 0;
  }

  footer nav ul {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    margin-block: 0.2cm;
  }

  /* Imprimir URL al lado de enlaces relevantes */
  footer a[href^="http"]::after,
  footer address a::after,
  .page-inicio main > section:nth-of-type(1) > ul li a::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555555 !important;
  }

  /* ----------------------------------------------------------------
     5. PÁGINA INICIO (index.html)
     ---------------------------------------------------------------- */
  .page-inicio main > section:nth-of-type(1) {
    display: block;
    padding: 0.4cm 0;
  }

  .page-inicio main > section:nth-of-type(1) > figure {
    display: none;
  }

  .page-inicio main > section:nth-of-type(1) > ul li a {
    border: 1px solid #000000;
    padding: 0.2cm 0.4cm;
    display: inline-block;
  }

  .page-inicio main > section:nth-of-type(2) {
    background: none !important;
    padding: 0.4cm 0;
  }

  .page-inicio main > section:nth-of-type(2) > ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5cm;
  }

  .page-inicio main > section:nth-of-type(2) article {
    border: 1px solid #CCCCCC;
    page-break-inside: avoid;
  }

  .page-inicio main > section:nth-of-type(2) article figure {
    display: none;
  }

  .page-inicio main > section:nth-of-type(3) {
    display: block;
    padding: 0.4cm 0;
  }

  .page-inicio main > section:nth-of-type(3) > article {
    border: 1px solid #CCCCCC;
    margin-bottom: 0.4cm;
  }

  .page-inicio main > section:nth-of-type(3) > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4cm;
  }

  .page-inicio main > section:nth-of-type(3) > ul article {
    border: 1px solid #CCCCCC;
  }

  .page-inicio main > section:nth-of-type(4) {
    display: block;
    padding: 0.4cm 0;
  }

  .page-inicio main > section:nth-of-type(4) > figure {
    display: none;
  }

  /* ----------------------------------------------------------------
     6. PÁGINA SOBRE NOSOTROS (sobre-nosotros.html)
     ---------------------------------------------------------------- */
  .page-sobre-nosotros main > figure:first-child {
    position: static;
    min-height: auto;
    max-height: none;
    background: none !important;
    margin: 0;
    width: 100%;
  }

  .page-sobre-nosotros main > figure:first-child img {
    display: none;
  }

  .page-sobre-nosotros main > figure:first-child figcaption {
    position: static;
    padding: 0.4cm 0;
  }

  .page-sobre-nosotros main > figure:first-child h1 {
    color: #000000 !important;
    font-size: 22pt;
    text-shadow: none;
  }

  .page-sobre-nosotros main > figure:first-child p {
    color: #333333 !important;
    text-shadow: none;
  }

  .page-sobre-nosotros main > article {
    display: block;
    padding: 0.4cm 0;
  }

  .page-sobre-nosotros main > article > aside {
    background: #F5F5F5 !important;
    border: 1px solid #CCCCCC;
    padding: 0.3cm;
    margin-top: 0.4cm;
  }

  .page-sobre-nosotros main > section:nth-of-type(1) {
    background: none !important;
    padding: 0.4cm 0;
  }

  .page-sobre-nosotros main > section:nth-of-type(1) > ul {
    grid-template-columns: 1fr;
    gap: 0.3cm;
  }

  .page-sobre-nosotros main > section:nth-of-type(1) article {
    border: 1px solid #CCCCCC;
  }

  .page-sobre-nosotros main > section:nth-of-type(2) {
    display: block;
    padding: 0.4cm 0;
  }

  .page-sobre-nosotros main > section:nth-of-type(2) > figure {
    display: none; /* Mapas dinámicos iframe no son aptos para impresión */
  }

  /* ----------------------------------------------------------------
     7. PÁGINA RESERVA (reserva.html)
     Se imprime como comprobante: una sola columna, sin el botón de
     envío y con las leyendas de cada grupo a la vista (en pantalla van
     ocultas, acá orientan a quien complete el formulario en papel).
     ---------------------------------------------------------------- */
  .page-reserva main {
    display: block;
    max-width: none;
    padding: 0;
  }

  /* En pantalla es `display: contents`; en papel vuelve al flujo normal */
  .page-reserva main > section:nth-of-type(2) {
    display: block;
  }

  .page-reserva main > section:nth-of-type(1),
  .page-reserva main > section:nth-of-type(2) > article {
    border: none;
    border-radius: 0;
    padding: 0;
  }

  .page-reserva main > section:nth-of-type(1) {
    margin-bottom: 0.4cm;
  }

  .page-reserva main > section:nth-of-type(1) h1 {
    font-size: 18pt;
  }

  /* Las reglas generales evitan cortar <article> y <section>, pero el
     formulario no entra en una carilla: si no se lo deja fluir, empuja
     todo a la hoja siguiente y la primera queda casi vacía. */
  .page-reserva main > section:nth-of-type(2),
  .page-reserva main > section:nth-of-type(2) > article,
  .page-reserva main form,
  .page-reserva main form fieldset {
    page-break-inside: auto;
    break-inside: auto;
  }

  /* Cada campo, en cambio, no se parte entre dos hojas */
  .page-reserva main form fieldset > div {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .page-reserva main form {
    gap: 0.4cm;
  }

  .page-reserva main form legend {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: 11pt;
    font-weight: 700;
    margin-bottom: 0.2cm;
  }

  .page-reserva main form input,
  .page-reserva main form select,
  .page-reserva main form textarea {
    border: 1px solid #999999 !important;
    border-radius: 0;
    padding: 0.15cm 0.2cm;
    font-size: 10pt;
  }

  /* Enviar una reserva desde el papel no es posible */
  .page-reserva main form > div:last-child {
    display: none;
  }

  /* El resumen del libro queda debajo del formulario, sin cortarse */
  .page-reserva main > section:nth-of-type(2) > aside {
    position: static;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    padding: 0.4cm;
    margin-top: 0.6cm;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* En pantalla el header de la tarjeta es una grilla con el número
     decorativo a la izquierda; en papel se apila y ocupa menos */
  .page-reserva main aside header {
    display: block;
  }

  /* El separador de la tarjeta sí se imprime */
  .page-reserva main aside hr {
    display: block !important;
    border: none;
    border-top: 1px solid #CCCCCC;
    margin: 0.3cm 0;
  }

  /* ----------------------------------------------------------------
     8. PÁGINA CATÁLOGO (catalogo.html)
     Se imprime como listado: el buscador, los filtros y el orden sólo
     sirven con un servidor que responda, así que en papel quedan el
     título, la cantidad de resultados y las tarjetas.
     ---------------------------------------------------------------- */
  .page-catalogo main > section:nth-of-type(1) search,
  .page-catalogo aside[aria-labelledby="titulo-filtros"],
  .page-catalogo section[aria-labelledby="titulo-lista-libros"] > form[action="/catalogo"],
  .page-catalogo nav[aria-label="Paginado del catálogo"],
  .page-catalogo section[aria-labelledby="titulo-lista-libros"] > p:last-child {
    display: none;
  }

  .page-catalogo main > section:nth-of-type(1) {
    padding: 0.4cm 0;
  }

  /* En pantalla es una grilla de dos columnas (filtros | resultados) */
  .page-catalogo main > section:nth-of-type(2) {
    display: block;
  }

  /* Las reglas generales evitan cortar <section>, pero el listado no entra
     en una carilla: si no se lo deja fluir, salta entero a la hoja
     siguiente y la primera queda casi vacía. */
  .page-catalogo main > section:nth-of-type(2),
  .page-catalogo section[aria-labelledby="titulo-lista-libros"] {
    page-break-inside: auto;
    break-inside: auto;
  }

  .page-catalogo section[aria-labelledby="titulo-lista-libros"] > ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4cm;
  }

  /* Cada tarjeta, en cambio, se imprime entera */
  .page-catalogo section[aria-labelledby="titulo-lista-libros"] article {
    border: 1px solid #CCCCCC;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Sin portadas, como las tarjetas del inicio: ahorro de tinta */
  .page-catalogo section[aria-labelledby="titulo-lista-libros"] article figure {
    display: none;
  }

  /* ----------------------------------------------------------------
     9. PÁGINA DETALLE DE LIBRO (detalle-libro.html)
     Se imprime como ficha: portada chica a la izquierda y datos a la
     derecha, sin los botones de compra/reserva, que en papel no llevan
     a ningún lado.
     ---------------------------------------------------------------- */
  .page-detalle-libro article[aria-labelledby="titulo-libro-principal"] {
    border: none;
    padding: 0.4cm 0;
    /* Las media queries se evalúan contra el ancho de la hoja (A4 menos
       márgenes ≈ 18cm), así que al imprimir también rige el breakpoint de
       900px, que apila la ficha en una columna: acá se vuelve a dos. */
    grid-template-columns: 6cm 1fr;
    grid-template-areas:
      "portada header"
      "portada descripcion"
      "portada acciones";
    column-gap: 0.8cm;
    row-gap: 0.3cm;
    /* La ficha entera no siempre entra debajo del header en la primera
       hoja; si no se la deja cortar, salta completa a la segunda */
    page-break-inside: auto;
    break-inside: auto;
  }

  .page-detalle-libro article[aria-labelledby="titulo-libro-principal"] > figure img {
    border: 1px solid #CCCCCC;
    border-radius: 0;
  }

  .page-detalle-libro section[aria-labelledby="titulo-comprar-reservar"] {
    border: 1px solid #CCCCCC;
    border-radius: 0;
    padding: 0.3cm;
  }

  /* El reset general deja al <mark> sin fondo: un borde lo mantiene como etiqueta */
  .page-detalle-libro section[aria-labelledby="titulo-comprar-reservar"] mark {
    border: 1px solid #000000;
    padding: 0 0.15cm;
  }

  .page-detalle-libro section[aria-labelledby="titulo-comprar-reservar"] > p:last-child {
    display: none;
  }

  .page-detalle-libro section[aria-labelledby="titulo-sobre-autor"] article {
    display: block;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    padding: 0.3cm;
    text-align: left; /* el breakpoint de 900px lo centra; en papel va como el resto */
  }

  /* La foto es ambiental (un escritorio), no identifica al autor */
  .page-detalle-libro section[aria-labelledby="titulo-sobre-autor"] figure {
    display: none;
  }

  .page-detalle-libro section[aria-labelledby="titulo-recomendaciones"] > ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4cm;
  }

  .page-detalle-libro section[aria-labelledby="titulo-recomendaciones"] article {
    border: 1px solid #CCCCCC;
  }

  .page-detalle-libro section[aria-labelledby="titulo-recomendaciones"] article figure {
    display: none;
  }
}