/* 2026-08-21 (Eduardo: "quiero q tambien parezca que estas leyendo una
   carta de restaurante y no una web... sigue diseñando" -- propuesta
   "La Carta de Papel" validada en Artifact, con fotos e ingredientes
   reales). Hoja aparte en vez de reescribir carta.css entero: todo aquí
   vive SOLO dentro de .carta-papel, así que si algo se revierte es
   quitar un <link> y una clase, no deshacer un archivo entero. No toca
   ningún selector usado por el JS de carta.html (búsqueda, filtro de
   alérgenos, scroll-spy, añadir al pedido) -- misma estructura HTML,
   solo cambia el estilo. */

.carta-papel {
  /* 2026-08-21 (Eduardo: "el fondo no pega demasiado bien... q sigan la
     misma linea" -- hallazgo real: esta hoja se quedó con su PROPIO
     acento (teal, #0a5f61) y su PROPIO crema, escritos a mano, desde
     antes de que existiera el módulo de Tema del sitio -- nunca se
     actualizaron al oliva. color-mix() deriva el panel/línea del propio
     --t-bg del tema en vez de un segundo crema hardcodeado al lado del
     de verdad, así que si el color de fondo del tema cambia desde el
     admin, el papel de la carta cambia con él, sin otro hueco de
     inconsistencia como este. */
  --papel-fondo: var(--t-bg, #fdf6f0);
  --papel-panel: color-mix(in srgb, var(--t-bg, #fdf6f0) 88%, #000 6%);
  --papel-linea: color-mix(in srgb, var(--t-bg, #fdf6f0) 65%, #000 20%);
  --papel-tinta: var(--t-text, #20241f);
  --papel-tinta-suave: var(--t-muted, #4a4a3f);
  --papel-acento: var(--t-accent, #5c6b3a);
  --papel-acento-suave: color-mix(in srgb, var(--t-accent, #5c6b3a) 14%, white 86%);
  font-family: 'Newsreader', Georgia, serif;
  background: var(--papel-fondo);
  background-image: radial-gradient(var(--papel-linea) .5px, transparent .5px);
  background-size: 3px 3px;
}

/* Cabecera: sin degradado azul, solo tipografía */
.carta-papel .carta-hero {
  background: var(--papel-fondo);
  padding: 3.2rem 1.5rem 1.6rem;
  border-bottom: none;
}
.carta-papel .carta-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--papel-acento); font-weight: 500;
}
.carta-papel .carta-hero-title {
  font-family: 'Fraunces', serif; font-weight: 700; color: var(--papel-tinta);
  font-size: clamp(2.2rem, 7vw, 3.2rem); margin: .3rem 0 .3rem;
}
.carta-papel .carta-sub { color: var(--papel-tinta-suave); font-family: 'Newsreader', serif; font-style: italic; }

/* Categorías: divisor tipo "capítulo de menú" en vez de icono + borde */
.carta-papel .carta-cat-title {
  display: flex; align-items: center; gap: 1rem; border-bottom: none;
  margin: 3rem 0 1.4rem; color: var(--papel-tinta);
}
.carta-papel .carta-cat-title::before,
.carta-papel .carta-cat-title::after { content: ''; flex: 1; height: 1px; background: var(--papel-linea); }
.carta-papel .carta-cat-title {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 1.5rem;
  white-space: nowrap;
}
.carta-papel .carta-cat-title-icono, .carta-papel .carta-nav-icono { display: none; } /* la carta de papel no lleva iconos de categoría */

.carta-papel .especiales-title { font-family: 'Fraunces', serif; font-style: italic; }

/* Listado: de cuadrícula de tarjetas a lista de "ficha" con foto pequeña */
.carta-papel .platos-grid,
.carta-papel .especiales-grid {
  display: flex; flex-direction: column; gap: 0;
  background: var(--papel-panel); border: 1px solid var(--papel-linea);
  padding: .4rem 1.6rem;
}
@media (max-width: 600px) { .carta-papel .platos-grid, .carta-papel .especiales-grid { padding: .3rem 1rem; } }

.carta-papel .plato-card {
  background: none; border: none; border-radius: 0; box-shadow: none !important;
  transform: none !important; overflow: visible;
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 0; border-bottom: 1px dashed var(--papel-linea);
}
.carta-papel .plato-card:last-child { border-bottom: none; }
.carta-papel .plato-card.especial { border-width: 0; border-bottom: 1px dashed var(--papel-linea); }

.carta-papel .plato-foto {
  width: 64px; height: 64px; flex: none; border-radius: 4px; height: 64px;
  border: 1px solid var(--papel-linea);
}
.carta-papel .plato-foto img { border-radius: 3px; }

.carta-papel .plato-body { padding: 0; flex: 1; min-width: 0; position: relative; gap: .15rem; }
.carta-papel .plato-info { padding-right: 4.2rem; } /* deja hueco al precio, que va arriba a la derecha */
.carta-papel .plato-nombre {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; margin: 0;
}
.carta-papel .plato-nombre a { color: var(--papel-tinta); }
.carta-papel .plato-nombre a:hover { color: var(--papel-acento); }
.carta-papel .badge-especial-sm::after { content: ' ❧'; color: var(--papel-acento); }

.carta-papel .plato-desc,
.carta-papel .plato-ingredientes {
  font-style: italic; color: var(--papel-tinta-suave); font-size: .86rem;
  margin: .25rem 0 0; line-height: 1.45;
}

.carta-papel .plato-precio {
  position: absolute; top: 0; right: 0; margin: 0;
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: .92rem;
  color: var(--papel-acento);
}

.carta-papel .btn-anadir-pedido {
  margin-top: .6rem; width: auto; padding: .4rem .9rem; font-size: .78rem;
  border-color: var(--papel-acento); color: var(--papel-acento); border-radius: 20px;
}
.carta-papel .btn-anadir-pedido:hover { background: var(--papel-acento); }

/* El aviso de alérgenos, el buscador y el CTA final se quedan con el
   estilo base del sitio a propósito -- son utilitarios, no "carta", no
   hace falta que parezcan papel. */

/* 2026-08-22 (Eduardo, captura del diálogo de impresión de verdad en
   móvil: "necesitamos diseñar un mejor diseño para la versión de
   impresión... tiene que ser modo de carta de bar y eso no lo parece").
   La versión anterior (commit 2026-08-21, comentario de arriba) asumía
   que reutilizar el look de PANTALLA en el papel bastaría -- probado de
   verdad en el diálogo de impresión del navegador, el resultado seguía
   siendo una cuadrícula de tarjetas con foto + borde + fondo blanco liso,
   paginada a 4 tarjetas por hoja: nada que recuerde a una carta de bar
   real. Rediseño desde cero para impresión, basado en convenciones reales
   de carta impresa (columnas de texto a dos columnas por página,
   cabeceras de categoría tipográficas con separadores finos, precio en
   columna fija alineada a la derecha en vez de tarjetas con recuadro,
   sin fotos -- una carta de papel de verdad no lleva fotos de cada
   plato, solo tipografía). -print-color-adjust fuerza a los navegadores
   a imprimir fondos/colores (los omiten por defecto al imprimir, para
   ahorrar tinta) -- aquí interesa mantener el crema y el acento de
   marca, no ahorrar tinta a toda costa. Estas reglas van DESPUÉS de las
   de carta.css en la cascada (carta_papel.css se carga después en
   carta.html), así que ganan sin !important salvo donde carta.css ya
   fuerza con !important y hay que igualar. */
@media print {
  /* 2026-08-22 (Eduardo, segunda pasada con captura real de impresión):
     "el texto está muy pegado a la izquierda... no se sabe si se
     imprimirá en A4 o en un formato más pequeño, si el fondo ocupa toda
     la hoja hay que cuidar mucho los márgenes". El margen de `@page` NO
     es fiable aquí -- el diálogo de impresión del propio dispositivo
     (Android, apps de impresión de terceros...) puede ignorarlo o
     dejarlo en manos del usuario ("sin márgenes"), y el fondo de color
     (`--papel-fondo`) sí se pinta edge-to-edge en ese caso, pegando el
     texto al borde físico del papel. Se mantiene un margen de `@page`
     modesto para los motores que SÍ lo respetan, pero el margen de
     verdad, garantizado en cualquier caso, es el padding interno de
     `.carta-papel` -- no depende de que el motor de impresión coopere. */
  @page { size: A4; margin: 10mm; }

  .carta-papel, .carta-papel * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
  }
  .carta-papel {
    background: var(--papel-fondo) !important;
    background-image: none !important; /* la textura de puntos de pantalla no aporta nada en papel, solo ensucia */
    padding: 8mm 7mm;
    box-sizing: border-box;
    column-count: 2;
    column-gap: 2.4rem;
    column-rule: 1px dotted var(--papel-linea);
  }

  /* Cabecera: única parte que cruza las dos columnas -- nombre del bar +
     horario, sin degradado ni fondo, solo tipografía (carta.css la
     escondía del todo; aquí se reactiva y se recorta a lo esencial). */
  .carta-papel .carta-hero {
    display: block !important;
    column-span: all;
    padding: 0 0 .7rem;
    text-align: center;
    border-bottom: 1px solid var(--papel-linea);
    margin-bottom: 1.1rem;
  }
  .carta-papel .carta-hero-title { font-size: 1.9rem !important; margin: .2rem 0 !important; }
  .carta-papel .carta-eyebrow, .carta-papel .carta-sub { display: block !important; }

  /* Categorías: bloque que no se parte entre columnas -- si no cabe
     entera en lo que queda de columna, salta entera a la siguiente en
     vez de cortar un plato por la mitad entre dos columnas. Marco fino
     alrededor de cada sección (Eduardo: "una marquesina simple alrededor
     de todas las secciones") en vez de solo las líneas del título
     suelto en el aire -- da la sensación de "apartado de carta" en vez
     de una lista continua. */
  .carta-papel .carta-categoria {
    break-inside: avoid-column;
    margin-bottom: 1.1rem;
    border: 1px solid var(--papel-linea);
    border-radius: 8px;
    padding: .1rem .9rem .3rem;
  }
  .carta-papel .carta-cat-title { font-size: 1.1rem !important; margin: .9rem 0 .6rem !important; }
  .carta-papel .section-inner { max-width: 100% !important; padding: 0 !important; }

  .carta-papel .platos-grid, .carta-papel .especiales-grid {
    background: none !important; border: none !important; padding: 0 !important;
    display: flex !important; flex-direction: column !important;
  }

  /* Sin fotos en papel -- una carta impresa de verdad no lleva foto de
     cada plato, y además evita el hueco gris de los platos con foto
     rota o sin subir todavía (el bug real que se veía en la captura). */
  .carta-papel .plato-foto { display: none !important; }

  .carta-papel .plato-card {
    display: block !important; break-inside: avoid-column;
    border-bottom: 1px dotted var(--papel-linea) !important;
    padding: .4rem 0 !important;
  }
  .carta-papel .plato-card:last-child { border-bottom: none !important; }
  .carta-papel .plato-body {
    /* 2026-08-22: sin `flex-direction` explícito aquí, heredaba
       "column" de la regla base (no-papel) de .plato-body -- precio
       cayendo en su propia línea debajo del nombre en vez de alinearse
       a la derecha en la misma fila (comprobado con computed style real:
       flexDirection: 'column' con solo el display:flex de aquí). */
    display: flex !important; flex-direction: row !important;
    align-items: baseline !important; justify-content: space-between !important;
    gap: .8rem; width: 100%;
  }
  .carta-papel .plato-info { padding-right: 0 !important; flex: 1; min-width: 0; }
  .carta-papel .plato-nombre { font-size: .95rem !important; }
  .carta-papel .plato-nombre a { color: var(--papel-tinta) !important; }
  .carta-papel .plato-precio {
    color: var(--papel-acento) !important;
    position: static !important; /* en pantalla va absoluto arriba a la derecha del bloque; en papel, alineado en línea con el nombre, columna fija a la derecha (más limpio que los puntos de guía clásicos) */
    flex: none; white-space: nowrap; font-size: .85rem !important;
  }
  .carta-papel .plato-desc, .carta-papel .plato-ingredientes {
    color: var(--papel-tinta-suave) !important; font-size: .78rem !important; margin: .1rem 0 0 !important;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .carta-papel .plato-alergenos { display: none !important; } /* la lista de alérgenos de la web (iconos con tooltip) no funciona en papel sin interacción; el aviso de alérgenos ya sale aparte, fuera de esta hoja */

  .carta-papel .btn-anadir-pedido, .carta-papel .badge-especial-sm { display: none !important; } /* botones de pedido no pintan en papel real */
}