/*
 * Las landings de pedido de Marconata con la marca de GW-01 (WO-219, BE-07b;
 * plan BE-07 §5; D-169 P3 y P10).
 *
 * Se carga después de los estilos del cuerpo (`styles/orders*.css`) y de
 * `web.css`. Hace dos cosas, y nada más:
 *   1. lleva los tokens de la base a la paleta y las tipografías de la marca
 *      (`--mc-color-*`, `--mc-letra-*`, que define `web.css`): el cuerpo de
 *      hoy, retintado, sin rediseñarlo (eso es BE-07c / GW-05);
 *   2. encaja el cuerpo bajo la cabecera fija de GW-01: la barra del
 *      asistente (`header.brand`) deja de ser fija y va pegada debajo,
 *      dentro del marco.
 * Sin modo oscuro (D-169 P3): la plantilla no lleva el interruptor y estas
 * reglas no dependen de `[data-theme]`.
 *
 * Todo cuelga de `body.mc-l-pedidos`, la clase propia de estas plantillas
 * (WO-235). De los modos de GW-01, `mc-produccion` se pone sólo si la web
 * está en producción (`TAKE_AWAY_WEB_EN_PRODUCCION`, D-226.3), para enseñar
 * lo mismo que ella; `mc-pagina-pedido` nunca: Reservar se ve aquí también.
 */

/* ---------- 1. Tokens de la base → marca ---------- */

body.mc-l-pedidos {
  --page: var(--mc-color-fondo);
  --bg: var(--mc-color-fondo);
  --page-subtle: color-mix(in srgb, var(--mc-color-tinta) 5%, var(--mc-color-fondo));
  --surface: var(--mc-color-fondo);
  --surface-2: color-mix(in srgb, var(--mc-color-tinta) 6%, var(--mc-color-fondo));

  --ink: var(--mc-color-tinta);
  --ink-price: var(--mc-color-tinta);
  --ink-inverse: var(--mc-color-fondo);

  --line: color-mix(in srgb, var(--mc-color-tinta) 22%, var(--mc-color-fondo));
  --line-strong: var(--mc-color-tinta);
  --border: color-mix(in srgb, var(--mc-color-tinta) 22%, var(--mc-color-fondo));

  --brand: var(--mc-color-tinta);
  --brand-hover: color-mix(in srgb, var(--mc-color-tinta) 85%, black);
  --brand-ink: var(--mc-color-fondo);
  --surface-inverse: var(--mc-color-tinta);

  /* WO-502 (D-384 a D-387): la paleta canela y el CTA carmín, de `web.css`.
     `--accent` es el canela de los adornos y los estados (la pista del
     interruptor, la pestaña activa, el chip activo); lo que lleva texto
     blanco encima (la insignia) va en `--accent-strong`. */
  --accent: var(--mc-color-acento);
  --accent-hover: var(--mc-color-acento-fuerte-hover);
  --accent-ink: var(--mc-color-sobre-acento);
  --accent-strong: var(--mc-color-acento-fuerte);
  --accent-strong-hover: var(--mc-color-acento-fuerte-hover);
  --accent-strong-ink: var(--mc-color-sobre-acento);
  --accent-soft: var(--mc-color-acento-suave);
  --page-accent: color-mix(in srgb, var(--mc-color-acento) 18%, var(--mc-color-fondo));
  --ink-accent: var(--mc-color-acento-fuerte);
  --deco-1-bg: var(--mc-color-acento-suave);
  --deco-1-ink: var(--mc-color-acento-fuerte);
  --control-soft: var(--mc-color-gris-suave);
  --control-line: var(--mc-color-gris-control);
  --cta: var(--mc-color-cta);
  --cta-hover: var(--mc-color-cta-hover);
  --cta-ink: var(--mc-color-cta-texto);

  --focus: var(--mc-color-tinta);

  --font-display: var(--mc-letra-titular);
  --font-body: var(--mc-letra-rotulo);
}

/* ---------- 2. El cuerpo bajo la cabecera de GW-01 ----------
   La cabecera de GW-01 es fija (`web.css`, z-index 1000). La barra del
   asistente deja de serlo: va pegada justo debajo, dentro del marco, y por
   debajo del panel del menú. Sin logo propio: la marca ya está en la
   cabecera (el `<img>` sigue en el HTML, lo usa `orders.js`).
   `--header-height` es lo que la base usa para dejar sitio a lo fijo
   (las pestañas del catálogo, los saltos a cada categoría): ahora es la
   cabecera de GW-01 más esta barra. */

body.mc-l-pedidos {
  --mc-l-alto-barra: 4.5rem;
  --header-height: calc(var(--mc-alto-cabecera) + var(--mc-l-alto-barra));
}

/* La línea doble entre el marco y el pie (WO-235, punto 11) la resuelve
   web.css para los dos anfitriones (WO-439, D-302): el pie sube 1 px sobre
   el filete de abajo del marco. */

body.mc-l-pedidos .page {
  max-width: none;
  padding: 0;
}

body.mc-l-pedidos .mc-marco > header.brand {
  position: sticky;
  top: var(--mc-alto-cabecera);
  left: auto;
  right: auto;
  z-index: 900;
  height: var(--mc-l-alto-barra);
  max-width: none;
  margin: 0;
  padding: 0 var(--space-4, 1rem);
  /* Sólo el color, no `background`: el atajo borraba también la imagen de
     la campaña (WO-235, punto 16). */
  background-color: var(--mc-color-fondo);
  border-bottom: var(--mc-borde);
}

/* En una página de campaña, la barra lleva el fondo de la campaña (su color
   y, si tiene, su dibujo con el velo), como en la base: el texto va en el
   color de la campaña (`text_color`), pensado para ir encima de ese fondo.
   El color es obligatorio en `Campaign`, así que sin dibujo queda el color
   liso y nunca el texto claro sobre el crema (WO-235, puntos 14 y 16). */
body.mc-l-pedidos .mc-marco > header.brand.has-campaign-banner {
  background-color: var(--campaign-bg, #A53432);
}

body.mc-l-pedidos header.brand .brand-logo {
  display: none;
}

body.mc-l-pedidos header.brand .brand-inner {
  padding: 0;
}

/* El índice no tiene `.brand-inner`: su barra es el título de la marca. */
body.mc-l-pedidos .mc-marco > header.brand > .brand-left {
  height: 100%;
}

/* El contenido, en la columna de siempre, centrado dentro del marco.
   Sólo lo que va en el flujo de la página: el aviso (`.toast`) también es
   hijo del marco, pero es fijo, y con este ancho un elemento fijo sale
   deformado (el «ir al final» de la base salía como un óvalo enorme encima
   de los productos, WO-235). */
body.mc-l-pedidos .mc-marco > main,
body.mc-l-pedidos .mc-marco > .fatal-error,
body.mc-l-pedidos .mc-marco > .mc-l-contacto {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--page-width, 760px);
  margin-inline: auto;
}

body.mc-l-pedidos .mc-marco > main {
  padding: var(--space-5, 1.5rem) var(--space-4, 1rem) var(--space-6, 2rem);
}

/* Las pestañas del catálogo, fijas, dentro de los márgenes del marco y
   justo debajo de la barra de la tienda (`--header-height`). Con ella forman
   un solo bloque: al llegar el pie, `barras_fijas.js` sube las dos a la vez
   y recorta lo que pasa por encima del borde de la cabecera (WO-235). */
body.mc-l-pedidos .catalog-tabs-bar {
  z-index: 899;
  left: calc(var(--mc-margen) + 1px);
  right: calc(var(--mc-margen) + 1px);
}

/* El cuerpo de la base es una columna flex: sin esto, el pie (que mide lo
   que su contenido) se sale del ancho de la pantalla en el móvil. */
body.mc-l-pedidos > [data-pie-landing] {
  min-width: 0;
  width: 100%;
}

/* ---------- 3. La franja de contacto de la tienda (D-169 P5) ----------
   Dentro del marco, en la misma columna que el contenido y sin recuadro ni
   filetes propios (WO-235): es el final de la página de la tienda. */

body.mc-l-pedidos .mc-marco > .mc-l-contacto {
  padding: 0 var(--space-4, 1rem) var(--space-6, 2rem);
  font-family: var(--mc-letra-rotulo);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--mc-color-tinta);
}

.mc-l-contacto__titulo {
  margin: 0 0 0.5rem;
  font-family: var(--mc-letra-titular);
  font-size: 1.375rem;
  font-weight: 500;
}

.mc-l-contacto__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-l-contacto__correo {
  margin: 0.5rem 0 0;
}

.mc-l-contacto a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- 4. Los botones flotantes (WO-346) ----------
   La rueda de las cookies, «ir al final» y «volver arriba» son los comunes
   del fragmento (`web.css`, D-300 a D-304), los mismos que en la web: aquí
   no se pinta ninguno propio. Con un sabor abierto (`has-modal-open`), el
   documento no se puede recorrer y las dos flechas no llevan a ninguna
   parte: se esconden aquí. `menu.js` solo vuelve a medir con `scroll` o
   `resize`, y abrir la ficha sin haber bajado no dispara ninguno, así que la
   «↓» se quedaba encima de la ficha (H-A de neo, WO-354). La rueda se queda
   (D-300).

   Con el carro a la vista, los flotantes suben lo que ocupa
   (`--mc-flotantes-reserva`, la escribe `orders.js`) y salen de la franja
   libre de abajo de las columnas laterales del pie (D-161, `web.css`): al
   final de la página tapaban la cita, los enlaces legales y el ©. La franja
   crece lo que ocupa el carro en su sitio (`--mc-carro-alto`, también de
   `orders.js`), sin la subida por encima del nombre del pie (WO-360): esa
   depende de dónde queda el pie, y el pie de esta franja. Sin carro, 0, y
   queda la de `web.css` (un test ata los 4.5rem a los de allí). */
body.mc-l-pedidos.has-modal-open .mc-flotantes .mc-flotante--abajo,
body.mc-l-pedidos.has-modal-open .mc-flotantes .mc-flotante--arriba {
  display: none;
}

body.mc-l-pedidos .mc-pie .mc-pie__lateral {
  padding-bottom: calc(4.5rem + var(--mc-carro-alto, 0px));
}

.mc-l-solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- La tarjeta de sabor v3 en el detalle (D-327, D-328; WO-400) ----------
   Solo en la marca: la base (otras empresas) no cambia (D-304 P-3).
   - El panel y su foto, con radio 0; el × y los (+) siguen redondos.
   - La tarjeta (web.css, `--detalle`) va arriba, con la foto a sangre y el
     cuerpo a 24 de los lados, como lo de debajo. El separador (1 px topo
     suave) va dentro de ese relleno, a 24 de los chips y a 16 de «Elige el
     tamaño».
   - Los espacios del detalle y del listado pasan a múltiplos de 8 (la
     propuesta de daedalus para orders.css, aquí para no tocar la base). */
body.mc-l-pedidos .modal-panel {
  border-radius: 0;
}

body.mc-l-pedidos .mc-tarjeta-sabor--detalle .mc-tarjeta-sabor__cuerpo {
  padding: var(--mc-espacio-2) var(--mc-espacio-3) 0;
}

body.mc-l-pedidos .detail-modal-content {
  padding: 0 var(--mc-espacio-3);
}

body.mc-l-pedidos .picker-title {
  margin-bottom: var(--mc-espacio-2);
}

body.mc-l-pedidos .detail-modal-content .picker-title {
  margin-top: 0;
}

body.mc-l-pedidos .modal-close {
  top: var(--mc-espacio-2);
  right: var(--mc-espacio-2);
}

body.mc-l-pedidos .size-option-row {
  gap: var(--mc-espacio-2);
  /* Sin raya entre los tamaños (revisión del usuario, D-330). El separador
     de antes de «Elige el tamaño» (hr de la tarjeta, D-327) se queda. */
  border-bottom: 0;
}

body.mc-l-pedidos .size-option-price {
  margin-top: 0;
}

body.mc-l-pedidos .catalog-section-title {
  margin-bottom: var(--mc-espacio-2);
}

body.mc-l-pedidos .catalog-item {
  gap: var(--mc-espacio-2);
}

body.mc-l-pedidos .catalog-item-price {
  margin-top: 0;
}

body.mc-l-pedidos .catalog-item-desc {
  margin-top: var(--mc-espacio-1);
}

body.mc-l-pedidos .catalog-item-allergens {
  gap: var(--mc-espacio-1);
  margin-top: var(--mc-espacio-1);
}

/* «Las reservas online no están disponibles» (WO-421; D-351.1, WO-416 §5.3):
   el título, la frase y las dos salidas, centrados en el marco. Los botones,
   con el aspecto de los de la Carta (.mc-carta__boton): filete de tinta,
   rótulo en mayúsculas y 48 px de toque. Solo tokens de web.css. */
body.mc-l-pedidos .mc-reservas-no-disponibles {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--mc-espacio-6, 48px) var(--mc-espacio-2) var(--mc-espacio-6, 48px);
  color: var(--mc-color-tinta);
  text-align: center;
}

body.mc-l-pedidos .mc-reservas-no-disponibles__titulo {
  margin: 0 0 var(--mc-espacio-2);
  color: inherit;
  font: 400 clamp(1.75rem, 5vw, 2.5rem) / 1.15 var(--mc-letra-titular);
}

body.mc-l-pedidos .mc-reservas-no-disponibles__texto {
  margin: 0 0 var(--mc-espacio-3);
  font: 400 1rem / 1.5 var(--mc-letra-rotulo);
}

body.mc-l-pedidos .mc-reservas-no-disponibles__salidas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mc-espacio-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.mc-l-pedidos .mc-reservas-no-disponibles__salidas li {
  margin: 0;
}

body.mc-l-pedidos .mc-reservas-no-disponibles__salida {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.25rem;
  border: var(--mc-borde);
  background: var(--mc-color-fondo);
  color: var(--mc-color-tinta);
  font: 700 0.75rem / 1 var(--mc-letra-rotulo);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: var(--mc-mayusculas);
}

body.mc-l-pedidos .mc-reservas-no-disponibles__salida:hover {
  background: var(--mc-color-tinta);
  color: var(--mc-color-fondo);
}

body.mc-l-pedidos .mc-reservas-no-disponibles__salida:focus-visible {
  outline: var(--mc-ancho-foco) solid var(--mc-color-tinta);
  outline-offset: 2px;
}

/* ===== MAQUETA — no publicar (D-327, v1.1) ===== INICIO DE LA MAQUETA SOCIAL
   Ajuste 13 de WO-400: los contadores de la franja social en el detalle de
   un sabor, en la fila de la categoría (ver el bloque gemelo al final de
   orders.js). El estilo de la maqueta de la Carta: iconos de línea finos en
   topo, texto en tinta suave, Karla 13/16 y 16 entre grupos. Para quitarla,
   borra desde «INICIO DE LA MAQUETA SOCIAL» hasta «FIN DE LA MAQUETA SOCIAL»,
   aquí y en orders.js.
   D-349 (WO-421): apagada en producción con el interruptor de la cuenta y el
   idioma (mc-produccion en <body>, data-mc-vista-previa), al final del
   bloque. Copia aparte: take_away/maquetas/franja_social_v1_1/. */
body.mc-l-pedidos .mc-maqueta-detalle__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--mc-espacio-2);
  margin: 0 0 var(--mc-espacio-1);
}

body.mc-l-pedidos .mc-maqueta-detalle__fila > .mc-tarjeta-sabor__categoria {
  margin: 0;
}

body.mc-l-pedidos .mc-maqueta-detalle__datos {
  display: flex;
  gap: var(--mc-espacio-2);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  color: var(--mc-color-tinta-suave);
  font: var(--mc-letra-chip);
}

body.mc-l-pedidos .mc-maqueta-detalle__dato {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

body.mc-l-pedidos .mc-maqueta-detalle__dato svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--mc-color-topo);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.mc-l-pedidos .mc-maqueta-detalle__oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.mc-l-pedidos.mc-produccion .mc-maqueta-detalle__datos[data-mc-vista-previa] {
  display: none;
}
/* ===== FIN DE LA MAQUETA SOCIAL ===== */