/* ── Hero ─────────────────────────────────────────────────────── */
.carta-hero {
  background: linear-gradient(135deg, #003d7a 0%, var(--t-accent) 100%);
  color: #fff;
  text-align: center;
  padding: 3.5rem 1rem 2.5rem;
}
.carta-hero-inner { max-width: 700px; margin: 0 auto; }
/* 2026-08-26: hero con foto real (ver templates/temas/carta/hero/
   _default.html) -- mismo hero de siempre pero con la imagen del
   negocio de fondo en vez del degradado plano, inspirado en
   tapasrevolution.com. */
.carta-hero--foto { background-size: cover; background-position: center; padding: 6rem 1rem 5rem; }
/* 2026-08-26 (captura real: "Nuestra Carta" casi ilegible sobre la
   foto). Investigado a fondo: no era el h1 del tema -- era
   `.carta-papel .carta-hero-title{color:var(--papel-tinta)}`
   (carta_papel.css), que empata en especificidad con un primer intento
   de arreglo y gana el empate a propósito por cargar después (ver
   comentario en ese mismo archivo). `!important` aquí, mismo patrón ya
   usado en carta_papel.css para este tipo de caso (su propio media
   query lo usa también) -- es la única forma de garantizar blanco
   siempre, sea cual sea el tema que caiga en _default. */
.carta-hero--foto .carta-hero-title,
.carta-hero--foto .carta-eyebrow,
.carta-hero--foto .carta-sub { color: #fff !important; }
.carta-eyebrow {
  display: block;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: .5rem;
}
.carta-hero-title {
  font-size: 2.6rem;
  font-weight: 800;
  margin: 0 0 .5rem;
  color: #fff;
}
.carta-sub {
  opacity: .9;
  font-size: 1.05rem;
}

/* ── Filtro alérgenos ─────────────────────────────────────────── */
.alergeno-filtro-wrap {
  /* 2026-08-26 (Claude, auditoría de temas -- captura real: en Nocturna
     esta franja aparecía en cian claro fijo, la ÚNICA zona clara en una
     página por lo demás totalmente oscura. Con variable + fallback,
     legado_aliquindoi (que no define --t-panel) se queda exactamente
     igual que hoy; los 5 temas reutilizables ya siguen su propio panel. */
  background: var(--t-panel, #e8fafa);
  border-bottom: 1px solid var(--t-line);
  padding: .6rem 1.5rem;
}
.alergeno-filtro-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.alergeno-filtro-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--t-muted);
  flex-shrink: 0;
}
.alergeno-filtro-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.alergeno-filtro-btn {
  background: var(--t-panel);
  border: 1.5px solid var(--t-line);
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .8rem;
  cursor: pointer;
  color: var(--t-text);
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.alergeno-filtro-btn:hover { border-color: var(--t-accent); color: var(--t-accent); }
.alergeno-filtro-btn.active {
  background: var(--t-accent);
  border-color: var(--t-accent);
  color: #fff;
}
.alergeno-filtro-reset {
  background: none;
  border: none;
  color: var(--t-accent);
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ── Banner menú del día ───────────────────────────────────────── */
.carta-menu-banner {
  background: #003d7a;
  color: #fff;
  padding: .85rem 1.5rem;
}
.carta-menu-banner-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.carta-menu-banner-label {
  font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: #a8c8f0; white-space: nowrap;
}
.carta-menu-banner-platos {
  font-size: .92rem; opacity: .9; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carta-menu-banner-precio {
  font-size: .88rem; font-weight: 700; color: #a8c8f0; white-space: nowrap;
}
.carta-menu-banner-link {
  font-size: .82rem; color: rgba(255,255,255,.7); text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.3);
}
.carta-menu-banner-link:hover { color: #fff; }

/* ── Buscador ─────────────────────────────────────────────────── */
.carta-search-wrap {
  background: var(--t-bg, #fdf6f0);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--t-line, #e8ddd5);
}
.carta-search-inner {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
.carta-search-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t-muted, #7a6a5a);
  pointer-events: none;
}
.carta-search-input {
  width: 100%;
  padding: .65rem .9rem .65rem 2.5rem;
  border: 1.5px solid var(--t-line, #e8ddd5);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background: var(--t-panel, #fff);
  color: var(--t-text, #2d2d2d);
  transition: border-color .15s;
  box-sizing: border-box;
}
.carta-search-input:focus {
  outline: none;
  border-color: var(--t-accent);
}
.carta-search-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--t-muted, #7a6a5a);
  display: none;
}

/* ── Nav categorías ───────────────────────────────────────────── */
.carta-nav {
  background: var(--t-panel);
  border-bottom: 1px solid var(--t-line);
  position: sticky;
  /* 2026-08-22 (bug real, captura de Eduardo: "el nav de categorias
     aparece desplazado hacia abajo y no pegado al nav top principal" al
     hacer scroll). Antes: top:112px a mano, calibrado para el navbar
     público VIEJO de dos franjas apiladas (infobar azul + navbar blanco,
     112px). El 21-08 se fusionaron en una sola franja de 64px
     (templates/home/sections/_navbar.html) y este valor se quedó
     huérfano -- mismo tipo de bug ya avisado en pedidos.css ("Ojo con
     calcular offsets a mano otra vez"). --navbar-h la publica
     static/js/base.js midiendo el navbar real en cada carga/resize, así
     que no se puede volver a desincronizar si el navbar cambia de alto
     (incluida su altura variable en móvil). */
  top: var(--navbar-h, 64px);
  z-index: 100;
}
.carta-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.carta-nav-inner::-webkit-scrollbar { display: none; }
/* 2026-08-26 (Claude, inspiración UX 2026 -- captura real en móvil:
   con muchas categorías, la fila se corta a media palabra ("Be...") en
   el borde derecho sin ningún indicio de que se puede deslizar -- el
   scrollbar está oculto a propósito (arriba) pero eso deja al usuario
   sin ninguna pista de que hay más pestañas. Desvanecido en el borde
   derecho, solo decorativo (no bloquea toques, `pointer-events:none`) --
   inofensivo si no hay overflow real, útil cuando sí lo hay. */
.carta-nav::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(to right, transparent, var(--t-panel));
  pointer-events: none;
}
.carta-nav-item {
  white-space: nowrap;
  padding: .75rem 1rem;
  color: var(--t-muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.carta-nav-item:hover,
.carta-nav-item--active {
  color: var(--t-accent);
  border-bottom-color: var(--t-accent);
  font-weight: 700;
}

/* ── Secciones ────────────────────────────────────────────────── */
.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}
.carta-especiales { padding: 2.5rem 0 1rem; }
.carta-categoria   { padding: 2rem 0 1rem; }

.section-title {
  font-size: 1.5rem;
  color: var(--t-text);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.carta-cat-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--t-text);
  border-bottom: 2px solid var(--t-line);
  padding-bottom: .4rem;
  margin-bottom: 1.2rem;
}
/* Iconos propios de categoría (2026-08-15, generados con Gemini) --
   mismo tamaño de línea que el emoji que sustituyen. */
.carta-cat-title-icono, .carta-nav-icono { width: 1em; height: 1em; vertical-align: -.15em; object-fit: contain; }

/* ── Badge "HOY" ─────────────────────────────────────────────── */
.especiales-title { font-size: 1.5rem; }
.especiales-badge {
  background: var(--t-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding: .2rem .55rem;
  border-radius: 4px;
}
.badge-especial-sm {
  display: inline-block;
  background: var(--t-accent);
  color: #fff;
  font-size: .7rem;
  padding: .15rem .5rem;
  border-radius: 4px;
  margin-bottom: .35rem;
  font-weight: 600;
}

/* ── Grids ────────────────────────────────────────────────────── */
.especiales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}
.platos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* ── Plato card ──────────────────────────────────────────────── */
.plato-card {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.plato-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.plato-card--clicable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.plato-card--clicable:active { box-shadow: 0 2px 10px rgba(0,0,0,.14); transform: translateY(0) scale(.99); }
.plato-card.especial {
  border-color: var(--t-accent);
  border-width: 2px;
}
.plato-foto {
  width: 100%;
  height: 180px;
  max-height: 180px;
  overflow: hidden;
  background: var(--t-bg);
}
.plato-foto img {
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .3s ease;
}
.plato-card:hover .plato-foto img { transform: scale(1.05); }

.btn-anadir-pedido {
  margin-top: .6rem;
  width: 100%;
  padding: .55rem;
  border: 1.5px solid var(--t-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--t-accent);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.btn-anadir-pedido:hover { background: var(--t-accent); color: #fff; }

.ped-mesa-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1250;
  background: #14213d;
  color: #fff;
  padding: .9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 -4px 16px rgba(0,0,0,.15);
}
.ped-mesa-bar-btn {
  background: var(--t-accent);
  color: #fff;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
}
.ped-mesa-bar-btn span { background: rgba(255,255,255,.25); border-radius: 10px; padding: .1rem .5rem; margin-left: .3rem; }
.ped-mesa-bar-cambiar { margin-left: .8rem; color: #a8c8f0; text-decoration: underline; font-size: .82rem; }
.plato-body {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
}
.plato-info { flex: 1; }
.plato-nombre {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
}
.plato-nombre a {
  color: var(--t-text);
  text-decoration: none;
}
.plato-nombre a:hover { color: var(--t-accent); }
.plato-desc {
  color: var(--t-muted);
  font-size: .875rem;
  line-height: 1.5;
  margin: 0;
}
.plato-precio {
  font-weight: 800;
  color: var(--t-accent);
  font-size: 1.2rem;
  display: block;
  margin-top: .5rem;
}

/* ── CTA final ───────────────────────────────────────────────── */
.carta-cta {
  background: var(--t-bg);
  border-top: 1px solid var(--t-line);
  padding: 3rem 1rem;
  text-align: center;
  margin-top: 2rem;
}
.carta-cta p {
  color: var(--t-muted);
  margin-bottom: 1.2rem;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.detail-breadcrumb {
  background: var(--t-panel);
  border-bottom: 1px solid var(--t-line);
  padding: .8rem 1.5rem;
  font-size: .85rem;
  color: var(--t-muted);
}
.detail-breadcrumb-inner { max-width: 1100px; margin: 0 auto; }
.detail-breadcrumb a { color: var(--t-muted); text-decoration: none; }
.detail-breadcrumb a:hover { color: var(--t-accent); }
.bc-sep { margin: 0 .4rem; }

/* ── Detail layout ───────────────────────────────────────────── */
.detail-section { padding: 2.5rem 1.5rem 3rem; }
.detail-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  align-items: start;
}
.detail-badges { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.detail-cat-badge {
  display: inline-block;
  background: var(--t-line);
  color: var(--t-muted);
  padding: .25rem .75rem;
  border-radius: 20px;
  font-size: .82rem;
}
.detail-especial-badge {
  display: inline-block;
  background: var(--t-accent);
  color: #fff;
  padding: .25rem .75rem;
  border-radius: 20px;
  font-size: .82rem;
}
.detail-title { font-size: 2.4rem; font-weight: 900; margin: 0 0 1rem; line-height: 1.1; }
.detail-desc { font-size: 1.05rem; line-height: 1.7; color: var(--t-text); margin: 0 0 1.5rem; }
.detail-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--t-bg);
  border: 1px solid var(--t-line);
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
.detail-precio { display: flex; flex-direction: column; }
.detail-precio-label { font-size: .78rem; color: var(--t-muted); text-transform: uppercase; letter-spacing: .05em; }
.detail-precio-valor { font-size: 2rem; font-weight: 900; color: var(--t-accent); line-height: 1; }
.detail-disponible { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--t-muted); }
.dot-verde { width: 8px; height: 8px; background: #25D366; border-radius: 50%; display: inline-block; }
.detail-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.btn-wa-detail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #25D366;
  color: #fff;
  padding: .75rem 1.6rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
}
.btn-wa-detail svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-wa-detail:hover { background: #1ebe5d; }
.btn-back-detail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--t-accent);
  border: 2px solid var(--t-accent);
  padding: .7rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-back-detail svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-back-detail:hover { background: var(--t-accent); color: #fff; }

/* ── Detail aside ────────────────────────────────────────────── */
.detail-aside { display: flex; flex-direction: column; gap: 1rem; }
.aside-card {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
}
.aside-card h3 { margin: 0 0 1rem; font-size: 1rem; }
.aside-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.aside-list li { display: flex; align-items: flex-start; gap: .75rem; }
.aside-icon { font-size: 1.2rem; flex-shrink: 0; }
.aside-list strong { display: block; font-size: .85rem; }
.aside-list span { font-size: .85rem; color: var(--t-muted); }
.aside-card--accent { background: var(--t-accent); border-color: var(--t-accent); }
.aside-cta-text { color: rgba(255,255,255,.9); font-size: .95rem; margin: 0 0 .8rem; }
.btn-wa-aside {
  display: inline-block;
  background: #fff;
  color: var(--t-accent);
  padding: .6rem 1.4rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: .95rem;
}

/* ── Related platos ──────────────────────────────────────────── */
.detail-related {
  background: var(--t-panel);
  border-top: 1px solid var(--t-line);
  padding: 2.5rem 1.5rem;
}
.detail-related-inner { max-width: 1100px; margin: 0 auto; }
.related-title { font-size: 1.5rem; margin: 0 0 1.4rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.related-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--t-bg);
  border: 1px solid var(--t-line);
  border-radius: 10px;
  padding: .9rem 1rem;
  text-decoration: none;
  color: var(--t-text);
  transition: box-shadow .15s, border-color .15s;
}
.related-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); border-color: var(--t-accent); }
.related-cat { font-size: 1.4rem; flex-shrink: 0; }
.related-body { flex: 1; }
.related-body strong { display: block; font-size: .95rem; }
.related-precio { font-size: .85rem; color: var(--t-accent); font-weight: 700; }
.related-arrow { color: var(--t-muted); font-size: 1.1rem; }

@media (max-width: 860px) {
  .detail-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .detail-aside { order: -1; }
}
@media (max-width: 600px) {
  .carta-hero-title { font-size: 1.8rem; }
  .platos-grid, .especiales-grid { grid-template-columns: 1fr; }
  .detail-title { font-size: 1.8rem; }
  .detail-meta { flex-direction: column; align-items: flex-start; gap: .8rem; }
  /* 2026-08-26 (Claude, inspiración online -- buenas prácticas UX de
     menús digitales 2026: zona táctil mínima de 44x44px en móvil). Los
     pills de "SIN: Gluten/Lácteos/..." medían solo 27px de alto en
     móvil (verificado con Playwright en viewport 390×844) -- demasiado
     pequeños para tocar con el dedo con fiabilidad. Solo en móvil, para
     no abultar la fila compacta de pills en escritorio. */
  .alergeno-filtro-btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ═══════════════════════════════════════════════════
   Alérgenos
═══════════════════════════════════════════════════ */
.plato-alergenos {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .4rem;
}
.alergeno-badge {
  display: inline-block;
  font-size: .75rem;
  background: #e8fafa;
  border: 1px solid #f0d9b0;
  border-radius: 4px;
  padding: .05rem .35rem;
  color: #8b5e1a;
  cursor: default;
  line-height: 1.5;
}
.detail-alergenos { margin-top: 1.2rem; }
.detail-alergenos-titulo {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--t-muted);
  margin-bottom: .5rem;
}
.detail-alergenos-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.detail-alergeno-pill {
  background: #e8fafa;
  border: 1px solid #f0d9b0;
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .85rem;
  color: #7a4f10;
}

/* Aviso legal alérgenos */
.carta-alergenos-aviso {
  background: #f0fafa;
  border-top: 1px solid var(--t-line, #e8ddd5);
  border-bottom: 1px solid var(--t-line, #e8ddd5);
  padding: .9rem 1.5rem;
  font-size: .85rem;
  color: #7a5c10;
  line-height: 1.6;
}
.carta-alergenos-aviso .section-inner { max-width: 960px; margin: 0 auto; }

/* ── Print styles ──────────────────────────────────────────── */
@media print {
  /* 2026-08-21 (Eduardo: "debemos ofrecerle en el admin un metodo para
     imprimirla" -- al probar de verdad con Playwright en modo
     impresión, la barra superior oscura de ubicación/horario/
     Entrar-Registrarse ("infobar", site_config/_infobar.html) seguía
     saliendo en el papel: no estaba en esta lista desde que se
     escribió, un hueco real, no algo nuevo. .carta-print-bar (el
     propio botón "Imprimir carta") tampoco tiene sentido que salga
     impreso. */
  .infobar, .navbar, .carta-hero, .carta-search-wrap, .alergeno-filtro-wrap,
  .carta-nav, .carta-especiales, .carta-cta, .whatsapp-widget,
  .chatbot-widget, #chatbot-ia-root, .site-footer, .live-banner,
  .carta-print-bar, .carta-menu-banner { display: none !important; }
  /* 2026-08-26 (Claude, verificado con emulación de impresión real de
     Playwright -- captura: Nocturna imprimía con fondo casi negro,
     Cómic con fondo amarillo brillante, un gasto real de tinta. Las
     reglas de abajo (`.plato-card`, `.platos-grid`...) solo cubrían la
     estructura de `_default` -- los 6 temas más nuevos usan sus
     propias clases (`.plato-card--comic`, `.carta-catalogo--nocturna`,
     etc.) que este bloque nunca tocaba. `!important` en body fuerza el
     fondo blanco pase lo que pase (`.theme-X{background:...}` en el
     propio body, más específico, ganaba antes); el reset amplio sobre
     `.carta-catalogo *` quita cualquier fondo/sombra/borde de color de
     CUALQUIER tema sin tener que perseguir cada clase nueva una a una
     cada vez que se añada un tema. */
  body { font-size: 11pt !important; color: #000 !important; background: #fff !important; }
  /* 2026-08-26: `carta_papel.css` tiene su PROPIO bloque de impresión
     (más abajo en la cascada) con `.carta-papel{background:var(
     --papel-fondo)!important}` -- diseño intencional para que el papel
     de Clásica/Moderna/Barmaema/Editorial imprima con un tono cálido
     print-friendly (todos claros). Nocturna (`--t-bg` casi negro) y
     Cómic (`--t-bg` amarillo muy saturado) heredan lo mismo y
     desperdician tinta -- en vez de pelear el empate de `!important`
     por orden de carga (perdería, `carta_papel.css` va después), se
     sube la ESPECIFICIDAD por encima de la suya (0,2,0 > su 0,1,0),
     que decide primero, antes que el orden. */
  .theme-nocturna .carta-papel, .theme-comic .carta-papel,
  .theme-nocturna .carta-papel .carta-hero, .theme-comic .carta-papel .carta-hero { background: #fff !important; background-image: none !important; }
  /* el texto del hero está pensado en blanco para su fondo oscuro/vivo
     en pantalla -- con el fondo ya blanco para imprimir, hacía falta
     también oscurecer el texto o quedaba invisible. */
  .theme-nocturna .carta-papel .carta-hero *, .theme-comic .carta-papel .carta-hero * { color: #000 !important; }
  .carta-catalogo * {
    background: transparent !important; box-shadow: none !important;
    color: #000 !important; text-shadow: none !important;
  }
  .carta-categoria { page-break-inside: avoid; margin-bottom: 1.5rem; }
  .carta-cat-title { font-size: 14pt; border: none; border-bottom: 2pt solid #333 !important; padding-bottom: 4pt; display: block !important; }
  .plato-card, [class*="plato-card--"] { border: none !important; padding: 2pt 0; border-bottom: .5pt solid #ccc !important; box-shadow: none !important; }
  .plato-nombre a { color: #000 !important; text-decoration: none; font-weight: 700; }
  .plato-precio, [class*="plato-precio"] { font-weight: 700; }
  .alergeno-badge { display: none; }
  .platos-grid { display: block; }
  .section-inner { max-width: 100%; }
}

/* Print button */
.carta-print-bar { background: var(--t-bg, #fdf6f0); padding: 1rem 1.5rem; border-top: 1px solid var(--t-line, #e8ddd5); }
.carta-print-bar .section-inner { display:flex; align-items:center; gap:1rem; }
.btn-print-carta { background: none; border: 1.5px solid var(--t-line, #e8ddd5); color: var(--t-muted, #7a6a5a); padding: .45rem 1rem; border-radius: 8px; font-size: .83rem; cursor: pointer; }
.btn-print-carta:hover { border-color: var(--t-accent); color: var(--t-accent); }
.carta-print-note { font-size: .75rem; color: var(--t-muted, #7a6a5a); }