/*
 * carta-libro.css -- piel Pro "Editorial Nocturna", rediseño 2026-09-29.
 *
 * Antes era una capa de colores sobre carta.css (la misma lista de la
 * clasica con fondo azul). Ahora es AUTOCONTENIDA y acompaña al template
 * propio template-parts/carta-libro.php: carta de revista de noche, con
 * portada a sangre, indice de capitulos numerados, "La seleccion de la casa"
 * en tarjetas altas y platos en grilla de fotos grandes.
 *
 * Tipografia: Fraunces (titulos, italica editorial) + Archivo (texto), las
 * mismas del modelo B del catalogo Provoca (puerto-bravo). Paleta fija de la
 * piel (tinta, dorado, crema): esta piel es "oscura y elegante" por
 * definicion, el color del restaurante no la tiñe.
 * Contrastes sobre --noc-bg (#0e1116): crema 15.9:1, dorado 9.6:1, gris
 * 7.1:1 -- todos AA/AAA.
 */

:root {
  --noc-bg: #0e1116;
  /* 29-sep: mismos colores en canales RGB, para los rgba() que deben seguir
     al fondo y al texto cuando el dueño personaliza (inc/personalizacion.php). */
  --noc-bg-rgb: 14, 17, 22;
  --noc-cream-rgb: 243, 234, 216;
  --noc-bg-2: #141922;
  --noc-card: #181e28;
  --noc-line: rgba(216, 179, 106, 0.2);
  --noc-line-soft: rgba(243, 234, 216, 0.1);
  --noc-gold: #d8b36a;
  --noc-gold-soft: rgba(216, 179, 106, 0.14);
  --noc-cream: #f3ead8;
  --noc-muted: #a39d90;
  --noc-wa: #158041;
  --noc-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --noc-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --noc-indice-h: 104px;
  /* Alias de las clases compartidas que genera comanda.js */
  --ink: var(--noc-cream);
  --muted: var(--noc-muted);
  --paper: var(--noc-bg);
  --paper-raised: var(--noc-card);
  --rule-soft: var(--noc-line-soft);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--noc-bg);
}

body.noc-body {
  margin: 0;
  background: var(--noc-bg);
  color: var(--noc-cream);
  font-family: var(--noc-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

body.comanda-panel-abierto,
body.lightbox-abierto {
  overflow: hidden;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Portada ---------- */

.noc-portada {
  position: relative;
  height: min(76svh, 640px);
  min-height: 460px;
  overflow: hidden;
  background: var(--noc-bg-2);
}

.noc-portada-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.noc-portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--noc-bg-rgb), 0.6) 0%, rgba(var(--noc-bg-rgb), 0) 26%),
    linear-gradient(0deg, var(--noc-bg) 4%, rgba(var(--noc-bg-rgb), 0.86) 34%, rgba(var(--noc-bg-rgb), 0) 68%);
}

.noc-portada.is-sin-foto::after {
  background: radial-gradient(circle at 70% 20%, rgba(216, 179, 106, 0.16), transparent 60%);
}

/* Sin ninguna foto: portada compacta (bloque de título editorial) en vez de
   76svh de fondo oscuro vacío. Clase doble: gana a la altura de escritorio. */
.noc-portada.is-sin-foto {
  height: auto;
  min-height: 0;
  border-bottom: 1px solid var(--noc-line-soft);
}

.noc-portada.is-sin-foto .noc-portada-texto {
  position: relative;
  bottom: auto;
  padding-top: 96px;
  padding-bottom: 32px;
}

.noc-portada-top {
  position: absolute;
  top: 16px;
  left: 20px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.noc-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--noc-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.noc-idiomas {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(14, 17, 22, 0.55);
  border: 1px solid var(--noc-line-soft);
  backdrop-filter: blur(6px);
}

.noc-idioma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--noc-muted);
  text-decoration: none;
}

.noc-idioma.is-activo {
  background: var(--noc-gold);
  color: var(--noc-bg);
}

.noc-portada-texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 2;
  padding: 0 24px;
}

.noc-kicker {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--noc-gold);
}

.noc-nombre {
  margin: 0;
  font-family: var(--noc-serif);
  font-weight: 500;
  font-size: clamp(40px, 11.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--noc-cream);
  text-wrap: balance;
}

.noc-lema {
  margin: 12px 0 16px;
  max-width: 34ch;
  font-family: var(--noc-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: rgba(var(--noc-cream-rgb), 0.82);
}

.estado-pill.noc-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--noc-line);
  background: rgba(14, 17, 22, 0.5);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--noc-cream);
}

.estado-pill.noc-estado::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--noc-muted);
}

.estado-pill.noc-estado.estado-abierto::before {
  background: #4fc27d;
  box-shadow: 0 0 0 3px rgba(79, 194, 125, 0.2);
}

.estado-pill.noc-estado.estado-cerrado::before {
  background: #e0795e;
}

/* ---------- Indice de capitulos + buscador (sticky) ---------- */

.noc-indice {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--noc-bg-rgb), 0.94);
  border-bottom: 1px solid var(--noc-line);
  backdrop-filter: blur(10px);
}

.noc-capitulos {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.noc-capitulos::-webkit-scrollbar {
  display: none;
}

.noc-capitulos a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 14px 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--noc-cream);
  text-decoration: none;
  white-space: nowrap;
}

.noc-capitulos a span {
  font-family: var(--noc-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--noc-gold);
}

.noc-capitulos a {
  position: relative;
}

.noc-capitulos a.is-activo {
  color: var(--noc-gold);
}

.noc-capitulos a.is-activo::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--noc-gold);
}

.noc-buscar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 0 14px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--noc-line-soft);
  background: var(--noc-bg-2);
  color: var(--noc-muted);
}

.noc-buscar:focus-within {
  border-color: var(--noc-gold);
}

.noc-buscar input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--noc-cream);
  font-size: 15px;
  outline: none;
}

.noc-buscar input::placeholder {
  color: var(--noc-muted);
}

/* ---------- Cuerpo ---------- */

.noc-main {
  padding: 8px 16px 8px;
}

/* Tarjeta de promo */
.noc-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 16px 0 4px;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--noc-line);
  border-radius: 16px;
  background: linear-gradient(120deg, var(--noc-card), var(--noc-bg-2));
  color: var(--noc-cream);
  text-align: left;
  cursor: pointer;
}

.noc-promo-foto {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
}

.noc-promo-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.noc-promo-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--noc-gold);
}

.noc-promo-titulo {
  font-family: var(--noc-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.noc-promo-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  color: var(--noc-muted);
}

.noc-promo-flecha {
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1;
  color: var(--noc-gold);
}

/* ---------- La seleccion de la casa ---------- */

.noc-seleccion {
  margin: 28px -16px 8px;
}

.noc-seleccion-titulo {
  margin: 0 0 16px;
  padding: 0 16px;
  font-family: var(--noc-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 27px;
  line-height: 1.2;
  text-align: center;
  color: var(--noc-cream);
}

.noc-seleccion-titulo span {
  font-style: normal;
  font-size: 13px;
  vertical-align: middle;
  color: var(--noc-gold);
}

.noc-track {
  position: relative;
}

.noc-seleccion-scroll {
  display: flex;
  gap: 14px;
  padding: 0 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.noc-seleccion-scroll::-webkit-scrollbar {
  display: none;
}

.noc-sel-card {
  position: relative;
  flex: 0 0 auto;
  width: min(76vw, 300px);
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--noc-card);
  border: 1px solid var(--noc-line-soft);
}

.noc-sel-foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: var(--noc-card);
  cursor: zoom-in;
}

.noc-sel-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.noc-sel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14, 17, 22, 0.94) 0%, rgba(14, 17, 22, 0.5) 32%, rgba(14, 17, 22, 0) 58%);
  pointer-events: none;
}

.noc-sel-texto {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  pointer-events: none;
}

.noc-sel-nombre {
  margin: 0 0 4px;
  font-family: var(--noc-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.12;
  color: var(--noc-cream);
}

.noc-sel-card .noc-add {
  top: 14px;
  right: 14px;
  bottom: auto;
}

.noc-sel-card .noc-sello {
  z-index: 2;
}

.clasica-destacados-nav {
  display: none;
}

@media (hover: hover) and (min-width: 768px) {
  .clasica-destacados-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--noc-line);
    background: rgba(14, 17, 22, 0.85);
    color: var(--noc-gold);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
  }

  .clasica-destacados-nav.is-prev {
    left: 8px;
  }

  .clasica-destacados-nav.is-next {
    right: 8px;
  }

  .clasica-destacados-nav:disabled {
    opacity: 0;
    pointer-events: none;
  }
}

/* ---------- Capitulos (categorias) ---------- */

.noc-capitulo {
  padding: 36px 0 8px;
  scroll-margin-top: var(--noc-indice-h);
}

.noc-cap-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: end;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--noc-line);
}

.noc-cap-num {
  grid-row: 1 / 3;
  font-family: var(--noc-serif);
  font-weight: 500;
  font-size: 64px;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--noc-gold);
}

.noc-cap-titulo {
  margin: 0;
  font-family: var(--noc-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 29px;
  line-height: 1.08;
  color: var(--noc-cream);
}

.noc-cap-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--noc-muted);
}

/* ---------- Grilla de platos ---------- */

.noc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 12px;
}

.noc-card {
  position: relative;
  min-width: 0;
}

.noc-card.is-grande {
  grid-column: 1 / -1;
}

.noc-card-media {
  position: relative;
}

.noc-card-foto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--noc-line-soft);
  border-radius: 16px;
  background: var(--noc-card);
  overflow: hidden;
  cursor: zoom-in;
}

.noc-card.is-grande .noc-card-foto {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
}

.noc-card-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.noc-card-foto:hover img {
  transform: scale(1.03);
}

.noc-sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--noc-serif);
  font-size: 40px;
  color: var(--noc-gold);
  cursor: default;
}

.noc-sello {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--noc-gold);
  color: var(--noc-bg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.noc-card-body {
  padding: 10px 2px 0;
}

.noc-card-nombre {
  margin: 0;
  font-family: var(--noc-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.24;
  color: var(--noc-cream);
}

.noc-card.is-grande .noc-card-nombre {
  font-size: 23px;
  line-height: 1.15;
}

.noc-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--noc-muted);
}

.noc-card.is-grande .noc-card-desc {
  -webkit-line-clamp: 3;
  font-size: 14px;
}

.noc-card-precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 6px 0 0;
}

.noc-precio {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--noc-gold);
  font-variant-numeric: tabular-nums;
}

.noc-card.is-grande .noc-precio,
.noc-sel-card .noc-precio {
  font-size: 17px;
}

.noc-precio-old {
  font-size: 12.5px;
  color: var(--noc-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* "+" y stepper sobre la foto (contrato compacto de comanda.js) */
.noc-add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
}

.noc-add:empty {
  display: none;
}

.qty-add {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--noc-gold);
  color: var(--noc-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.qty-add::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.qty-add:active {
  transform: scale(0.94);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--noc-line);
  background: rgba(14, 17, 22, 0.92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.qty-btn {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--noc-gold-soft);
  color: var(--noc-cream);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.qty-btn::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.qty-valor {
  min-width: 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--noc-gold);
}

/* ---------- Nota y vacio ---------- */

.noc-nota {
  margin: 36px 0 12px;
  padding: 18px 20px;
  border: 1px dashed var(--noc-line);
  border-radius: 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--noc-muted);
}

.noc-nota strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--noc-serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  color: var(--noc-cream);
}

.noc-nota a {
  color: var(--noc-gold);
  font-weight: 700;
}

.noc-vacio {
  margin: 32px 0;
  text-align: center;
  color: var(--noc-muted);
}

.noc-vacio strong {
  color: var(--noc-cream);
}

/* A2 (carta-mejoras-competencia-v1): sin resultados = mensaje + boton "Borrar"
   (>= 44 px). Con texto en el buscador, carta-clasica-buscar.js oculta promos y
   la seleccion de la casa con el atributo hidden: refuerzo L-334. */
.noc-vacio .busca-vacio-msg {
  margin: 0 0 14px;
}

.busca-borrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--noc-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--noc-gold);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.busca-borrar:focus-visible {
  outline: 2px solid var(--noc-gold);
  outline-offset: 2px;
}

.busca-borrar:empty {
  display: none;
}

[data-promos][hidden],
.noc-seleccion[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Locales, cross-sell y pie ---------- */

.noc-locales,
.noc-pie {
  margin: 24px 16px 0;
  padding: 28px 20px;
  border-top: 1px solid var(--noc-line);
  text-align: center;
}

.noc-pie-orn {
  margin: 0;
  color: var(--noc-gold);
}

.noc-pie-titulo {
  margin: 6px 0 14px;
  font-family: var(--noc-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  color: var(--noc-cream);
}

.noc-pie-dato {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--noc-muted);
}

.noc-pie-dato a {
  color: var(--noc-cream);
  font-weight: 600;
  text-decoration: none;
}

.noc-pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
}

.noc-pie-enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--noc-line);
  color: var(--noc-gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.noc-pie-provoca {
  margin: 18px 0 0;
  font-size: 12.5px;
}

.noc-pie-provoca a {
  color: var(--noc-muted);
}

.noc-local {
  padding: 12px 0;
  border-bottom: 1px solid var(--noc-line-soft);
}

.noc-local-nombre {
  margin: 0;
  font-family: var(--noc-serif);
  font-size: 18px;
}

.noc-local-dir {
  margin: 2px 0 8px;
  font-size: 13px;
  color: var(--noc-muted);
}

.noc-local-acciones {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
}

.noc-local-acciones a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--noc-line);
  font-size: 13px;
  text-decoration: none;
}

.provoca-crosssell {
  margin: 24px 16px 0;
  padding: 18px 20px;
  border: 1px solid var(--noc-line-soft);
  border-radius: 16px;
  text-align: center;
}

.provoca-crosssell-marca {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--noc-muted);
}

.provoca-crosssell-texto {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--noc-cream);
}

.provoca-crosssell-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--noc-cream);
  color: var(--noc-cream);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- Accesos fijos (Llamar / WhatsApp) y barra del pedido ---------- */

.noc-accesos {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, var(--noc-bg) 55%, rgba(var(--noc-bg-rgb), 0));
}

.noc-acceso {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.noc-acceso.is-llamar {
  border: 1px solid var(--noc-line);
  color: var(--noc-cream);
  background: var(--noc-bg-2);
}

.noc-acceso.is-wa {
  background: var(--noc-wa);
  color: #fff;
}

.comanda-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
}

.comanda-bar[hidden] {
  display: none;
}

.comanda-bar-btn {
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: var(--noc-gold);
  color: var(--noc-bg);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* Con pedido armado queda UNA sola barra (la del pedido). */
body:has(.comanda-bar:not([hidden])) .noc-accesos {
  display: none;
}

@supports not selector(:has(*)) {
  body.tiene-comanda .noc-accesos {
    display: none;
  }
}

/* ---------- Mi pedido (checkout de comanda.js) ---------- */

.comanda-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.comanda-overlay[hidden] {
  display: none;
}

.comanda-panel {
  width: min(520px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--noc-line);
  background: var(--noc-bg-2);
  color: var(--noc-cream);
}

@media (min-width: 640px) {
  .comanda-overlay {
    align-items: center;
    padding: 20px;
  }

  .comanda-panel {
    border-radius: 22px;
    border: 1px solid var(--noc-line);
  }
}

.comanda-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.comanda-panel-head h2 {
  margin: 0;
  font-family: var(--noc-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
}

.comanda-cerrar {
  width: 40px;
  height: 40px;
  border: 1px solid var(--noc-line-soft);
  border-radius: 50%;
  background: none;
  color: var(--noc-cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.comanda-items {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.comanda-vacio {
  margin: 0;
  padding: 20px 0;
  text-align: center;
  color: var(--noc-muted);
}

.comanda-vacio-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--noc-gold);
  font-weight: 700;
}

.comanda-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--noc-line-soft);
  font-size: 14px;
}

.comanda-item-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.comanda-item-info strong {
  overflow-wrap: break-word;
}

.comanda-item-info span {
  font-size: 12px;
  color: var(--noc-muted);
}

.comanda-item-subtotal {
  color: var(--noc-gold);
  font-weight: 700;
  white-space: nowrap;
}

.comanda-item-quitar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--noc-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.comanda-item .qty-stepper {
  box-shadow: none;
}

.comanda-item-nota-input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 4px 0;
  border: none;
  border-bottom: 1px dashed var(--noc-line);
  background: transparent;
  font-size: 12.5px;
  color: var(--noc-cream);
  text-overflow: ellipsis;
}

.comanda-item-nota-input::placeholder {
  color: var(--noc-muted);
}

.comanda-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--noc-line);
  font-weight: 600;
}

.comanda-total-row strong {
  font-size: 22px;
  color: var(--noc-gold);
}

.comanda-form {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.comanda-field {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--noc-muted);
}

.comanda-field[hidden] {
  display: none;
}

.comanda-field input,
.comanda-field select,
.comanda-field textarea {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--noc-line-soft);
  border-radius: 12px;
  background: var(--noc-bg);
  color: var(--noc-cream);
  font-size: 15px;
}

.comanda-field textarea {
  min-height: 64px;
  padding-top: 10px;
  resize: vertical;
}

.comanda-field.campo-error select,
.comanda-field.campo-error input,
.campo-error {
  border-color: #e0795e;
}

.comanda-modo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.comanda-modo-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid var(--noc-line-soft);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.comanda-modo-opt:has(input:checked) {
  border-color: var(--noc-gold);
  color: var(--noc-gold);
}

.comanda-modo-opt input {
  margin: 0;
  accent-color: var(--noc-gold);
}

.comanda-enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 999px;
  background: var(--noc-wa);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.comanda-enviar--disabled {
  opacity: 0.45;
  pointer-events: none;
}

.comanda-confirmacion {
  display: grid;
  gap: 12px;
  padding: 24px 4px 4px;
  text-align: center;
}

.comanda-confirmacion[hidden],
.comanda-confirmacion-sede[hidden] {
  display: none;
}

.comanda-confirmacion-msg {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.comanda-confirmacion-sede {
  margin: 0;
  color: var(--noc-gold);
  font-weight: 700;
}

.comanda-confirmacion-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--noc-muted);
}

.comanda-confirmacion-pago {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--noc-bg);
  font-size: 13px;
  line-height: 1.5;
}

.comanda-nuevo-btn {
  min-height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--noc-gold);
  color: var(--noc-bg);
  font-weight: 700;
  cursor: pointer;
}

.comanda-volver-btn {
  min-height: 40px;
  border: none;
  background: none;
  color: var(--noc-gold);
  font-weight: 700;
  cursor: pointer;
}

.form-error {
  margin: -4px 0 0;
  font-size: 12px;
  color: #e0795e;
}

/* ---------- Visor de fotos ---------- */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: rgba(6, 8, 11, 0.96);
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-figure {
  margin: 0;
  max-width: min(1000px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox-img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 14px;
}

.lightbox-caption {
  font-family: var(--noc-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--noc-cream);
  text-align: center;
}

.lightbox-cerrar,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  width: 44px;
  height: 44px;
  border: 1px solid var(--noc-line);
  border-radius: 50%;
  background: rgba(14, 17, 22, 0.8);
  color: var(--noc-gold);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-cerrar {
  top: 18px;
  right: 20px;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

.lightbox-prev[hidden],
.lightbox-next[hidden] {
  display: none;
}

/* ---------- Popup promocional ---------- */

.dl-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
}

.dl-popup-overlay[hidden] {
  display: none;
}

.dl-popup {
  position: relative;
  width: min(360px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--noc-line);
  border-radius: 22px;
  background: var(--noc-bg-2);
  color: var(--noc-cream);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.dl-popup--horizontal {
  width: min(560px, 100%);
}

.dl-popup-cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 1px solid var(--noc-line);
  border-radius: 50%;
  background: rgba(14, 17, 22, 0.8);
  color: var(--noc-cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.dl-popup-foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.dl-popup-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dl-popup-body {
  padding: 20px 22px 24px;
  text-align: center;
}

.dl-popup-titulo {
  margin: 0 0 6px;
  font-family: var(--noc-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
}

.dl-popup-texto {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--noc-muted);
}

.dl-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 999px;
  background: var(--noc-gold);
  color: var(--noc-bg);
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 640px) {
  .dl-popup--horizontal {
    display: flex;
  }

  .dl-popup--horizontal .dl-popup-foto {
    width: 42%;
    aspect-ratio: auto;
  }

  .dl-popup--horizontal .dl-popup-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }
}

/* ---------- Escritorio ---------- */

@media (min-width: 768px) {
  .noc-portada {
    height: min(72vh, 680px);
  }

  .noc-portada-texto {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
  }

  .noc-capitulos {
    justify-content: center;
    flex-wrap: wrap;
  }

  .noc-buscar {
    max-width: 520px;
    margin: 0 auto 12px;
  }

  .noc-main,
  .noc-pie,
  .noc-locales {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
  }

  .noc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 20px;
  }

  .noc-card.is-grande {
    grid-column: span 2;
  }

  .noc-seleccion {
    margin-left: 0;
    margin-right: 0;
  }

  .noc-sel-card {
    width: 300px;
  }

  .noc-accesos,
  .comanda-bar {
    left: 50%;
    right: auto;
    width: min(520px, 100%);
    transform: translateX(-50%);
  }
}

/* ---------- Estados ocultos (L-334) ---------- */

.menu-item[hidden],
.clasica-cat[hidden],
section[hidden] {
  display: none !important;
}

@media print {
  .noc-accesos,
  .comanda-bar,
  .dl-popup-overlay,
  .lightbox-overlay,
  .noc-add {
    display: none !important;
  }
}

/* ---------- Carrusel de promos (popup + platos en oferta, 2026-09-29) ---------- */
.noc-promos { margin: 16px 0 4px; color: var(--noc-gold); }
.noc-promo.is-oferta { cursor: default; }
.noc-promo-texto s { opacity: 0.8; }
.noc-promo-texto strong { color: var(--noc-gold); font-size: 15px; }
.noc-promo-add { flex: 0 0 auto; }

/* ============================================================
   Variaciones (TDR-009 fase 1): tabla de tamaños + presentaciones
   debajo + selector de tamaño/opción. Bloque IDÉNTICO al de carta.css
   (misma alias --ink/--muted/--paper/--paper-raised/--rule-soft/
   --carta-acento, ver :root arriba) -- hoja autocontenida, no carga carta.css.
   ============================================================ */
.var-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0 18px; border: 1px solid var(--rule-soft); border-radius: 10px; }
.var-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
/* La fila es `.menu-item` (dual class) para que carta-clasica-buscar.js la
   encuentre -- por si `.menu-item` llega a tener su propio `display` aquí. */
.var-tabla tr.menu-item { display: table-row; }
.var-tabla th, .var-tabla td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.var-tabla-th-nombre, .var-tabla-td-nombre { text-align: left; min-width: 118px; }
.var-tabla thead th { background: var(--paper-raised); font-weight: 700; color: var(--ink); }
.var-tabla-th-top { display: block; font-size: 12px; }
.var-tabla-th-sub { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }
.var-tabla-nombre { display: block; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.var-tabla-desc, .var-tabla-opciones { overflow-wrap: anywhere; }
.var-tabla-desc, .var-tabla-opciones { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.var-tabla-sin { color: var(--muted); opacity: .5; }
.var-tabla-precio-txt { display: block; font-weight: 700; color: var(--ink); white-space: nowrap; }
.var-tabla-add { margin-top: 4px; min-height: 26px; display: flex; align-items: center; justify-content: center; }
/* Contador del carrito DENTRO de la tabla de tamaños en VERTICAL (+ / 1 / -):
   en horizontal medía ~90px, ensanchaba su columna y sacaba la tabla de la
   pantalla (medido 5-oct en Libro y Marca a 390px). */
.var-tabla-add .qty-stepper { flex-direction: column-reverse; gap: 3px; padding: 4px 3px; }
.var-presentaciones { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.var-presentacion { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; border-bottom: 1px dashed var(--rule-soft); padding-bottom: 3px; }
.var-presentacion-precio { font-weight: 700; color: var(--ink); white-space: nowrap; }
.var-opciones-linea { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.var-cuerpo { padding: 4px 18px 10px; display: flex; flex-direction: column; gap: 14px; }
.var-tamano-fijo { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0; }
.var-grupo-titulo { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
.var-pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
/* 13-oct (L-846): píldora de 44 px, radio nativo invisible cubriéndola, punto visible en ::before. */
.var-pildora { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid var(--rule-soft); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; background: var(--paper); }
.var-pildora input { position: absolute; inset: -1px; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; }
.var-pildora::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.var-pildora:has(input:checked) { border-color: var(--carta-acento, var(--ink)); background: var(--paper-raised); }
.var-pildora:has(input:checked)::before { background: var(--carta-acento, var(--ink)); border-color: var(--carta-acento, var(--ink)); box-shadow: inset 0 0 0 3px var(--paper); }
.var-pildora:has(input:focus-visible) { outline: 2px solid var(--carta-acento, var(--ink)); outline-offset: 2px; }
.var-confirmar:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 420px) {
  .var-tabla { font-size: 11.5px; }
  .var-tabla th, .var-tabla td { padding: 6px 4px; }
  .var-tabla-th-nombre, .var-tabla-td-nombre { min-width: 88px; }
}
/* Android de 360px: 4 tamaños + nombre sin desplazamiento (medido 5-oct: a 360 la piel
   Marca se pasaba 4px con min-width 88). */
@media (max-width: 370px) {
  .var-tabla th, .var-tabla td { padding: 6px 2px; }
  .var-tabla-th-nombre, .var-tabla-td-nombre { min-width: 72px; }
}

/* Variaciones: columna del nombre a la izquierda. `.var-tabla th` (más
   específico) la centraba aunque `.var-tabla-td-nombre` pedía izquierda. */
.var-tabla .var-tabla-th-nombre, .var-tabla .var-tabla-td-nombre { text-align: left; }
/* El nombre del plato heredaba el 11.5px de la tabla en celular: casi igual
   que la descripción, no se distinguía el plato. */
.var-tabla .var-tabla-nombre { font-size: 14px; }

/* Selector de tamaño: cada tamaño a lo ancho, nombre a la izquierda y precio
   a la derecha sin cortarse; botón "Agregar · S/ X" a todo el ancho. */
.var-pildora--tamano { width: 100%; }
.var-pildora-nombre { flex: 1 1 auto; min-width: 0; }
.var-pildora-precio { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-weight: 700; }
.var-panel .var-confirmar { width: 100%; justify-content: center; text-align: center; }

/* Alérgenos por plato (2026-10-10, spec alergenos.md) -- mismo bloque que carta.css. */
.alg-iconos { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.alg-ico { display: inline-flex; align-items: center; color: var(--muted); cursor: default; font-size: 11px; line-height: 1.25; font-weight: 500; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; }
.alg-ico svg { display: block; }
.alg-ico--trazas { opacity: .55; }
.alg-filtro { position: relative; }
.alg-filtro-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-soft); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
.alg-filtro-btn.is-activo { background: var(--carta-acento, var(--ink)); color: var(--paper); border-color: transparent; }
.alg-filtro-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 220px; max-width: min(320px, 90vw); background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 10px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); display: grid; gap: 6px; }
.alg-filtro-panel[hidden] { display: none; }
.alg-filtro-titulo { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.alg-filtro-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.is-alg-oculto { display: none !important; }
.alg-pie { margin: 18px 0; padding: 14px 0 0; border-top: 1px solid var(--rule-soft); }
.alg-pie-titulo { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.alg-pie-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.alg-pie-lista li { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.alg-pie-lista li.is-trazas { opacity: .75; }
.alg-pie-lista svg { color: var(--muted); flex-shrink: 0; }
.alg-aviso { font-size: 11.5px; color: var(--muted); margin: 0; line-height: 1.4; }

/* Visor vertical (fotos-videos-verticales v2): boton "Ver en vertical" junto a
   los idiomas, a la derecha de la portada. Estilo base en visor-vertical.css. */
.noc-top-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   A3 (carta-mejoras-competencia-v1): zonas tactiles de 44 px REALES.
   Cada control mide >= 44x44 como caja propia (un ::before invisible amplia el
   toque pero el medidor no lo cuenta). El aspecto visible queda IGUAL: el
   disco/pildora se dibuja en ::before con su medida de siempre y el margen
   negativo le devuelve a la fila el tamano de antes (el layout no se mueve).
   ========================================================================== */

/* "Fotos" va como item de un flex (no absoluto): necesita ser el ancla de su ::before. */
.noc-top-acciones .pv-abrir {
  position: relative;
}

/* Idiomas ES/EN/PT (34 x 30 dentro de la pastilla): caja de 44, relleno dorado del activo intacto. */
.noc-idioma {
  position: relative;
  isolation: isolate;
  min-width: 44px;
  height: 44px;
  margin: -7px -5px;
  padding: 0 5px;
}

.noc-idioma::before {
  content: '';
  position: absolute;
  inset: 7px 5px;
  z-index: -1;
  border-radius: 999px;
}

.noc-idioma.is-activo {
  background: none;
}

.noc-idioma.is-activo::before {
  background: var(--noc-gold);
}

/* Enlaces del pie (Instagram, Facebook, TikTok, Como llegar; pildoras de 38 px con borde): caja de 44 y
   pildora visible intacta (inset 3 px); el margen negativo deja la fila como estaba. */
.noc-pie-enlaces a {
  position: relative;
  isolation: isolate;
  min-height: 44px;
  margin-block: -3px;
  padding: 0 17px;
  border: 0;
}

.noc-pie-enlaces a::before {
  content: '';
  position: absolute;
  inset: 3px 0;
  z-index: -1;
  border: 1px solid var(--noc-line);
  border-radius: 999px;
}

/* Buscador: el input (40 px dentro de la caja de 42) mide 44; es transparente y su margen negativo
   deja la caja del buscador exactamente igual. */
.noc-buscar input {
  height: 44px;
  margin-block: -2px;
}

/* "+" sobre la foto (disco dorado de 38 px con sombra). */
.qty-add {
  isolation: isolate;
  width: 44px;
  height: 44px;
  margin: -3px;
  background: none;
  box-shadow: none;
}

.qty-add::before {
  inset: 3px;
  z-index: -1;
  border-radius: 50%;
  background: var(--noc-gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* +/- del stepper (disco de 30 px, sin sombra): fondo recortado al contenido. */
.qty-btn {
  width: 44px;
  height: 44px;
  margin: -7px;
  padding: 7px;
  background-clip: content-box;
}

.qty-btn::before {
  content: none;
}

/* Cerrar, quitar y popup. */
.comanda-cerrar {
  position: relative;
  isolation: isolate;
  width: 44px;
  height: 44px;
  margin: -2px;
  border: 0;
}

.comanda-cerrar::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  border: 1px solid var(--noc-line-soft);
  border-radius: 50%;
}

.comanda-item-quitar {
  width: 44px;
  height: 44px;
  margin: -5px;
}

.dl-popup-cerrar {
  isolation: isolate;
  width: 44px;
  height: 44px;
  margin: -4px;
  border: 0;
  background: none;
}

.dl-popup-cerrar::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  border: 1px solid var(--noc-line);
  border-radius: 50%;
  background: rgba(14, 17, 22, 0.8);
}

/* El popup enfoca este boton al abrirse: el anillo de foco rodea el disco visible, no la caja de 44. */
.dl-popup-cerrar:focus-visible {
  outline: none;
}

.dl-popup-cerrar:focus-visible::before {
  outline: -webkit-focus-ring-color auto 1px;
}

.comanda-field input,
.comanda-field select {
  min-height: 44px;
}

/* Boton "Alergenos" del filtro (31 px de alto, aparece cuando algun plato declara alergenos): caja de 44. */
.alg-filtro-btn {
  --h: 31px;
  position: relative;
  isolation: isolate;
  min-height: 44px;
  margin-block: calc((var(--h) - 44px) / 2);
  padding: 0 15px;
  border: 0;
  background: none;
}

.alg-filtro-btn::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: var(--h);
  transform: translateY(-50%);
  z-index: -1;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  background: var(--paper);
}

.alg-filtro-btn.is-activo {
  background: none;
}

.alg-filtro-btn.is-activo::before {
  background: var(--carta-acento, var(--ink));
  border-color: transparent;
}

/* Nota por plato del carrito (campo de linea de 25 px): la caja crece hacia arriba y el texto queda donde estaba. */
.comanda-item-nota-input {
  min-height: 44px;
  padding-top: 23px;
  margin-top: -15px;
}

/* Pildoras de "Nuestros locales" (37,5 px; solo con 2+ sedes, p. ej. el restaurante 7) y CTA del cross-sell
   (40 px; solo plan Gratis): caja de 44 y pildora visible intacta en ::before (alto --h, centrada). */
.noc-local-acciones a,
.provoca-crosssell-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-block: calc((var(--h) - 44px) / 2);
  border: 0;
}

.noc-local-acciones a {
  --h: 37.5px;
  padding: 0 15px;
}

.provoca-crosssell-cta {
  --h: 40px;
  display: inline-flex;
  padding: 0 21px;
}

.noc-local-acciones a::before,
.provoca-crosssell-cta::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: var(--h);
  transform: translateY(-50%);
  z-index: -1;
  border: 1px solid var(--noc-line);
  border-radius: 999px;
}

.provoca-crosssell-cta::before {
  border-color: var(--noc-cream);
}