/* =============================================================================
   Planificador de comidas — Nutritupp
   Paleta y tipografía tomadas de su propia hoja de estilos.
   ========================================================================== */

/* Esta hoja NO declara colores sobre :root. Lo hacía, y pisaba el sistema:
   su --linea era #c6e2b6, un verde saturado que sistema.css prohíbe
   expresamente como filete estructural. Como planificador.css se carga
   DESPUÉS, ganaba, y teñía de verde las líneas de toda la web.
   Ahora consume los tokens del sistema y solo define lo suyo, con prefijo. */
:root {
  --pl-fondo: var(--crema, #f1e9e2);
  --pl-papel: #ffffff;
  --pl-linea-fina: #ece6dc;
  --pl-sombra: var(--sombra-quieta, 0 1px 2px rgba(7, 52, 57, .06), 0 8px 24px rgba(7, 52, 57, .06));
  --pl-radio: 12px;
  --amarillo: #b4762a;   /* ámbar del sistema, no el #f2c94c de la plantilla */
}

/* Los tokens que usa esta hoja, declarados de una vez y con valor real.
   ANTES ponía  --teal: var(--teal, #145961)  creyendo que heredaría del
   sistema y caería al respaldo si no. Es una AUTORREFERENCIA: un ciclo, que
   el navegador detecta ANTES de mirar el fallback, así que el token quedaba
   VACÍO. Medido: --teal y --linea devolvían cadena vacía en body y en todos
   sus hijos, y con ellos se caían cosas que se ven:
     .hueco  ->  border: none 0px   (los huecos del calendario, sin borde)
     #brindis -> fondo transparente (los avisos, invisibles)
     .filtros button[aria-pressed] -> blanco sobre nada, 1,14:1
   Un token no se define en función de sí mismo. */
.planificador,
body {
  --teal: #145961;
  --teal-osc: #073439;
  --verde: #74b74e;
  --verde-osc: #3a7026;   /* 4,96:1 sobre crema; el #5a9a38 anterior no llegaba */
  --rojo: #a82c2c;        /* 6,1:1 sobre papel; el #ce3939 daba 4,0:1 */
  --texto: #556354;       /* 5,3:1 sobre crema */
  --titulo: #161915;
  --amarillo: #b4762a;
  --papel: var(--pl-papel);
  --fondo: var(--pl-fondo);
  --linea: #dcd2c4;
  --linea-fina: var(--pl-linea-fina);
  --sombra: var(--pl-sombra);
  --sombra-quieta: 0 1px 2px rgba(7, 52, 57, .05), 0 4px 12px rgba(7, 52, 57, .05);
  --sombra-encima: 0 2px 6px rgba(7, 52, 57, .07), 0 16px 32px rgba(7, 52, 57, .1);
  --radio: var(--pl-radio);
  --curva: cubic-bezier(.22, .61, .36, 1);
  --rapido: .18s;
  --medio: .22s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--titulo);
  /* Nombraba "Work Sans" y ese woff2 no existe: pedía un 404 en cada carga.
     La pila del sistema es la buena; en /pedidos la hoja de aspecto ya la
     iguala a la de /nueva. */
  font-family: var(--tipo-texto, system-ui), -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--titulo);
  margin: 0;
  text-wrap: balance;
}

a { color: var(--teal); }

.envoltorio { max-width: 1360px; margin: 0 auto; padding: 0 20px; }

/* --- Barra superior ------------------------------------------------------ */
.barra {
  background: var(--papel);
  border-bottom: 1px solid var(--linea-fina);
  position: sticky;
  top: 0;
  z-index: 40;
}
.barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.barra__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.barra__logo img { height: 42px; width: auto; }
.barra__nav { display: flex; gap: 22px; }
.barra__nav a { color: var(--texto); text-decoration: none; font-weight: 500; }
.barra__nav a:hover { color: var(--teal); }

/* --- Cabecera de la página ----------------------------------------------- */
.cabecera { padding: 40px 0 26px; }
.cabecera h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); line-height: 1.15; }
.cabecera p { color: var(--texto); max-width: 62ch; margin: 12px 0 0; font-size: 1.05rem; }

/* --- Selector de plan ---------------------------------------------------- */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 32px; }
.plan {
  position: relative;
  background: var(--papel);
  border: 2px solid var(--linea-fina);
  border-radius: var(--radio);
  padding: 18px 18px 16px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.plan:hover { border-color: var(--linea); transform: translateY(-2px); }
.plan[aria-pressed="true"] { border-color: var(--teal); box-shadow: var(--sombra); }
.plan__nombre { font-family: Manrope, sans-serif; font-weight: 700; font-size: 1.1rem; }
.plan__desc { color: var(--texto); font-size: .92rem; margin-top: 4px; }
.plan__dto {
  display: inline-block;
  margin-top: 10px;
  background: var(--verde);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  padding: 3px 10px;
  border-radius: 999px;
}
.plan__dto--vacio { background: var(--linea-fina); color: var(--texto); }

/* --- Rejilla principal --------------------------------------------------- */
/* El tablero: calendario y carta a la izquierda, panel a la derecha.
   La carta vive DENTRO por una razón medida: el panel es más alto que el
   calendario y, con la carta fuera, quedaba un vacío de pantalla entera a la
   izquierda esperando a que el panel terminara. Las áreas lo rellenan. */
.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-areas: "cal panel" "carta panel";
  grid-template-rows: auto 1fr;
  gap: 24px;
  align-items: start;
}
.tablero > .calendario { grid-area: cal; }
.tablero > .panel { grid-area: panel; }
.tablero > .catalogo { grid-area: carta; }

/* --- Calendario ---------------------------------------------------------- */
.calendario {
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
}
.calendario__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.calendario__titulo { font-size: 1.25rem; font-weight: 700; font-family: Manrope, sans-serif; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.boton {
  font: inherit; font-size: .9rem; font-weight: 600;
  border: 1.5px solid var(--linea); background: var(--papel); color: var(--teal);
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.boton:hover { background: var(--fondo); border-color: var(--teal); }
.boton--solido { background: var(--teal); border-color: var(--teal); color: #fff; }
.boton--solido:hover { background: var(--teal-osc); border-color: var(--teal-osc); }
.boton--fantasma { border-color: transparent; color: var(--texto); }
.boton--fantasma:hover { color: var(--rojo); background: #fdf1f1; }

/* "Móntamelo tú" resuelve la página entera y "Vaciar" la destruye, y hasta
   ahora eran el mismo botón: mismo color, mismo fondo, mismo peso. El que
   hace el trabajo va sólido; el destructivo, texto plano que solo se tiñe de
   rojo al acercarte. */
#rellenar {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  font-weight: 700;
}
#rellenar:hover { background: var(--teal-osc); border-color: var(--teal-osc); }
#vaciar { border-color: transparent; background: transparent; color: var(--texto); font-weight: 500; }
#vaciar:hover { color: var(--rojo); background: rgba(168, 44, 44, .08); }

/* Cinco columnas, no siete: solo se reparte de lunes a viernes. Con siete
   quedaban dos columnas vacías en la vista de semana, y en la de mes las filas
   no coincidían con las semanas — el día 6 caía debajo del día 6 de la fila de
   arriba, que es sábado y no existe. Con cinco, cada fila ES una semana. */
.rejilla-dias { display: grid; gap: 10px; }
.rejilla-dias[data-vista="semana"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rejilla-dias[data-vista="mes"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.dia {
  background: var(--fondo);
  border: 1px solid var(--linea-fina);
  border-radius: 10px;
  padding: 8px;
  min-height: 118px;
  display: flex; flex-direction: column; gap: 6px;
}
.dia__nombre {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto);
  display: flex; justify-content: space-between; align-items: baseline; gap: 4px;
}
.dia__kcal { font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dia__kcal[data-estado="pasado"] { color: var(--rojo); }
.dia__kcal[data-estado="ok"] { color: var(--verde-osc); }

.hueco {
  flex: 1;
  border: 1.5px dashed var(--linea);
  border-radius: 8px;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--texto); font-size: .78rem; text-align: center;
  padding: 4px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.hueco:hover, .hueco.encima { background: #eaf5e4; border-color: var(--verde); border-style: solid; }

/* --- Alérgenos en pliegue, junto al calendario ---------------------------
   Antes eran una tarjeta entera del panel: catorce píldoras siempre abiertas
   a dos pantallas de scroll en el móvil. Plegadas dicen lo único que importa
   sin abrirse —cuántos evitas— y se abren solas si llegas con alguno marcado
   o si el plan tiene un choque que enseñarte. */
.alerg-caja {
  margin: 0 0 14px;
  border: 1px solid var(--linea-fina);
  border-radius: 12px;
  background: var(--papel);
}
.alerg-caja__abrir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--titulo);
  list-style: none;             /* fuera el triangulito de serie... */
}
.alerg-caja__abrir::-webkit-details-marker { display: none; }
.alerg-caja__abrir::after {     /* ...y una flecha propia que gira */
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--texto);
  border-bottom: 2px solid var(--texto);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  flex: none;
}
.alerg-caja[open] .alerg-caja__abrir::after { transform: rotate(-135deg) translateY(-2px); }
.alerg-caja__abrir b {
  font-size: .8rem;
  font-weight: 700;
  color: var(--texto);
  margin-left: auto;
  white-space: nowrap;
}
/* con alguno marcado, el contador se enciende: se ve CERRADA que filtra */
.alerg-caja[data-marcados="si"] .alerg-caja__abrir b { color: var(--teal); }
.alerg-caja__ayuda { margin: 0 14px 8px; font-size: .84rem; color: var(--texto); }
.alerg-caja > .alergenos { padding: 0 14px 12px; }
.alerg-caja > .aviso { margin: 0 14px 12px; }

/* Las miniaturas del día vacío: tres caras de plato solapadas, como una
   baraja. El borde blanco las separa entre sí y del papel. */
.hueco__minis { display: inline-flex; margin-right: 8px; }
.hueco__minis img {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgb(7 52 57 / .18);
  pointer-events: none;      /* el toque es del hueco, no de la foto */
}
.hueco__minis img + img { margin-left: -9px; }
/* En el mes no caben: la celda entera mide 24 px de alto. */
.rejilla-dias[data-vista="mes"] .hueco__minis { display: none; }
.hueco.lleno { border-style: solid; border-color: transparent; background: var(--papel); }

.ficha {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: 6px; padding: 5px 6px; text-align: left;
  position: relative;
  /* iOS: la pulsación larga es NUESTRO gesto de coger la ficha; sin esto,
     Safari saca su menú de copiar/compartir encima y el arrastre no llega */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Sitio reservado para la ✕: sin este padding, el botón de quitar cae ENCIMA
   del nombre en el 100% de las fichas al ancho por defecto. Medido: 18 solapes
   en la vista de semana y 72 en la de mes. Se leía «Salmón Omega3✕». */
.ficha { padding-right: 26px; }
.ficha__nombre { font-size: .76rem; font-weight: 600; line-height: 1.2; color: var(--titulo); }
.ficha__dato { font-size: .7rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.ficha__quitar {
  position: absolute; top: 2px; right: 2px;
  width: 24px; height: 24px; line-height: 1;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--texto);
  cursor: pointer; font-size: 15px; border-radius: 6px; padding: 0;
}
.ficha__quitar:hover { background: #fdf1f1; color: var(--rojo); }
.ficha[data-tipo="guarnicion"] { border-left-color: var(--amarillo); }
.ficha[data-tipo="plato"] { border-left-color: var(--teal); }
.ficha[data-tipo="extra"] { border-left-color: var(--linea); }

/* --- Panel lateral ------------------------------------------------------- */
.panel { position: sticky; top: 84px; display: grid; gap: 16px; }
.tarjeta {
  background: var(--papel); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 18px;
}
.tarjeta h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto); font-weight: 700; }

.objetivo { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.objetivo button {
  font: inherit; font-size: .85rem; font-weight: 600;
  border: 1.5px solid var(--linea-fina); background: var(--papel);
  color: var(--texto); padding: 6px 10px; border-radius: 8px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.objetivo button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); background: #eef6f6; }

.cifra { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.cifra__valor {
  font-family: Manrope, sans-serif; font-weight: 800;
  font-size: 2.3rem; line-height: 1; color: var(--titulo);
  font-variant-numeric: tabular-nums;
}
.cifra__unidad { color: var(--texto); font-size: .95rem; }

.progreso { height: 8px; background: var(--linea-fina); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.progreso__barra { height: 100%; background: var(--verde); border-radius: 999px; transition: width .25s ease, background .25s ease; }
.progreso__barra[data-estado="pasado"] { background: var(--rojo); }
.progreso__pie { display: flex; justify-content: space-between; font-size: .8rem; color: var(--texto); margin-top: 6px; font-variant-numeric: tabular-nums; }

.macros { display: grid; gap: 10px; margin-top: 16px; }
.macro__fila { display: flex; align-items: center; gap: 10px; font-size: .88rem; }
.macro__etiqueta { width: 76px; color: var(--texto); }
.macro__pista { flex: 1; height: 6px; background: var(--linea-fina); border-radius: 999px; overflow: hidden; }
.macro__valor { width: 46px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* display:block obligatorio: es un <span>, y una caja inline ignora width y
   height. Sin esto la barra mide 0x0 y no se pinta nunca. */
.macro__relleno { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }

/* Saturadas, azúcares y sal: los tres números por los que se juzga si algo es
   saludable. Van juntos y en pequeño, pero van. */
.macro__extra {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--linea-fina);
  font-size: .82rem;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.macro__extra b { color: var(--titulo); font-weight: 600; }

/* --- Alérgenos ----------------------------------------------------------- */
.tarjeta__ayuda { color: var(--texto); font-size: .86rem; margin: 6px 0 0; }

.alergenos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.alergenos button {
  font: inherit; font-size: .8rem; font-weight: 600;
  border: 1.5px solid var(--linea-fina); background: var(--papel); color: var(--texto);
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
}
.alergenos button[aria-pressed="true"] {
  background: var(--rojo); border-color: var(--rojo); color: #fff;
}

.aviso--alerta {
  background: #fdf1f1;
  border: 1px solid #f3c9c9;
  border-radius: 8px;
  padding: 10px 12px;
  color: #8a2b2b;
}
.aviso--duda { color: #8a6d1f; font-weight: 600; }
.aviso--pendiente {
  background: #fbf3e2;
  border: 1px solid #ecdcb8;
  border-radius: 8px;
  padding: 9px 12px;
  color: #8a5a12;
  font-weight: 600;
}

/* --- Elegir plato desde el día -------------------------------------------
   El hueco del calendario abre la carta con el día ya puesto. Antes había que
   bajar al catálogo, elegir y volver a subir: en móvil, 15.593 px de ida y
   vuelta por cada plato.
   ---------------------------------------------------------------------- */
.elegir {
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: min(44rem, calc(100vw - 24px));
  max-height: min(84vh, 46rem);
  box-shadow: 0 24px 60px rgba(7, 52, 57, .28);
  color: var(--titulo);
  overflow: hidden;
}
.elegir::backdrop { background: rgba(22, 25, 21, .45); }
.elegir__caja { display: flex; flex-direction: column; max-height: inherit; }

.elegir__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px 12px;
}
.elegir__titulo { font-size: 1.3rem; margin: 0; }
.elegir__dia { margin: 3px 0 0; color: var(--texto); font-size: .9rem; }
.elegir__cerrar {
  border: 0; background: none; font-size: 1.7rem; line-height: 1;
  color: var(--texto); cursor: pointer; padding: 0 4px; border-radius: 8px;
}
.elegir__cerrar:hover { color: var(--rojo); }

.elegir__buscar { padding: 0 22px 10px; }
.elegir__buscar input {
  font: inherit; font-size: 1rem; width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--linea, #dcd2c4);
  border-radius: 10px; background: #fff; color: var(--titulo);
}
.elegir__buscar input:focus-visible { outline: 3px solid var(--verde); outline-offset: 1px; border-color: var(--teal); }

/* Los filtros van en una tira que se desplaza en horizontal: en móvil, nueve
   botones envueltos empujaban "Todo" fuera de la vista. */
.elegir__filtros {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 22px 12px;
  margin: 0;
  gap: 6px;
}
.elegir__filtros::-webkit-scrollbar { display: none; }
.elegir__filtros button { font-size: .82rem; padding: 5px 12px; flex: 0 0 auto; }

.elegir__lista {
  overflow-y: auto;
  padding: 4px 14px 18px;
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--linea-fina);
}
.elegir__vacio { padding: 20px 22px 26px; margin: 0; color: var(--texto); }

.opcion {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
.opcion:hover, .opcion:focus-visible { background: var(--pl-fondo, #f1e9e2); }
.opcion[data-alergeno="si"] { background: #fdf5f5; }

.opcion__foto { width: 56px; height: 44px; border-radius: 7px; overflow: hidden; background: var(--linea-fina); display: block; }
.opcion__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opcion__sinfoto { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #eef6f0, #e2efe4); }

.opcion__texto { display: grid; gap: 1px; min-width: 0; }
.opcion__nombre { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.opcion__datos { font-size: .82rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.opcion__alerg { font-size: .74rem; color: var(--texto); }
.opcion__alerg--duda { color: #8a6d1f; font-weight: 600; }
.opcion__alerta { font-size: .74rem; color: var(--rojo); font-weight: 700; }

.opcion__mas {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--teal, #145961); color: #fff;
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
}

/* LA LISTA CON FOTOS ES UNA VITRINA DE TARJETAS, A CUALQUIER ANCHO.

   Comida se elige con los ojos: la foto de 48×38 era un sello de correos al
   lado del texto. Tarjetas con la foto a todo el ancho arriba, que es como
   decide cualquiera delante de una vitrina: tres columnas en el diálogo de
   escritorio (44rem) y dos en el móvil.

   Los selectores llevan `--fotos` a propósito, por dos razones:
   (1) `.opcion` a secas lo pisan cfg-01 y cfg-03 con sus paddings al cargar
   después — con dos clases se gana por ESPECIFICIDAD, no por orden; y
   (2) --fotos es una DECLARACIÓN de la lista, no un estilo global: solo la
   ponen las listas cuyas opciones llevan foto — hoy /pedidos y /plato, que
   pinta hueco degradado en las piezas sin foto para conservar la forma. */
.elegir__lista--fotos { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 14px 18px; }
/* SIN overflow:hidden EN LA TARJETA, y no es manía: MEDIDO en Chrome, un
   <button> con display:grid y overflow:hidden colapsa a 24 px de alto —
   las tarjetas quedaban como tiras de foto sin nombre ni precio. Probado
   declaración a declaración: quitando solo el overflow, 167 px y todo a la
   vista. Las esquinas de la foto se recortan EN LA FOTO, que para eso ya
   trae su propio overflow:hidden de la regla base. */
.elegir__lista--fotos .opcion {
  position: relative;
  grid-template-columns: none;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 7px;
  padding: 0 0 10px;
  background: #fff;
  border: 1px solid var(--linea-fina);
  border-radius: 12px;
}
.elegir__lista--fotos .opcion__foto { width: 100%; height: 106px; border-radius: 11px 11px 0 0; }
.elegir__lista--fotos .opcion__texto { padding: 0 10px; }
.elegir__lista--fotos .opcion__nombre { font-size: .88rem; }
.elegir__lista--fotos .opcion__datos { font-size: .78rem; }
/* El «+» monta a caballo entre la foto y el texto, como el botón de añadir
   de cualquier app de comida. La sombra lo despega de la foto clara. */
.elegir__lista--fotos .opcion__mas {
  position: absolute;
  top: 91px;
  right: 8px;
  box-shadow: 0 1px 5px rgb(7 52 57 / .3);
}
/* El fondo de "me choca un alérgeno" pasa a la tarjeta entera. */
.elegir__lista--fotos .opcion[data-alergeno="si"] { border-color: #eccfcf; }

@media (max-width: 560px) {
  .elegir { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 16px 16px 0 0; margin: auto 0 0; }
  /* En 390 px caben dos tarjetas, no tres; la foto baja un punto. */
  .elegir__lista--fotos { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 18px; }
  .elegir__lista--fotos .opcion { padding: 0 0 9px; }
  .elegir__lista--fotos .opcion__foto { height: 92px; }
  .elegir__lista--fotos .opcion__mas { top: 77px; }
}

/* --- Móntamelo tú: pregunta antes de montar ------------------------------- */
.montar {
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: min(27rem, calc(100vw - 24px));
  box-shadow: 0 24px 60px rgba(7, 52, 57, .28);
  color: var(--titulo);
}
.montar::backdrop { background: rgba(22, 25, 21, .45); }
.montar__caja { padding: 26px; display: grid; gap: 16px; }
.montar__titulo { font-size: 1.45rem; margin: 0; }
.montar__texto { margin: 0; color: var(--texto); font-size: .92rem; }

.campo--rango > span { display: flex; justify-content: space-between; align-items: baseline; }
.montar__valor {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.montar input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
  height: 26px;
}

/* La cuenta se actualiza en cada movimiento: el cliente ve lo que le va a
   costar ANTES de montarlo, que es justo lo que antes no podía saber. */
.montar__previo {
  margin: 0;
  padding: 12px 14px;
  background: var(--pl-fondo, #f1e9e2);
  border-radius: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.montar__previo[data-estado="corto"] {
  background: #fbf3e2;
  color: #8a5a12;
}

.montar__acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* --- Cierre de la venta --------------------------------------------------- */
.cierre {
  border: 0;
  border-radius: 16px;
  padding: 0;
  max-width: 30rem;
  width: calc(100vw - 32px);
  box-shadow: 0 24px 60px rgba(7, 52, 57, .25);
  color: var(--titulo);
}
.cierre::backdrop { background: rgba(22, 25, 21, .45); }
.cierre__caja { padding: 26px 26px 22px; display: grid; gap: 12px; }
.cierre__titulo { font-size: 1.5rem; margin: 0; }
.cierre__resumen {
  margin: 0; padding: 10px 12px;
  background: var(--pl-fondo, #f1e9e2); border-radius: 8px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.cierre__texto { margin: 0; color: var(--texto); font-size: .9rem; }

.campo { display: grid; gap: 5px; font-size: .86rem; }
.campo > span { font-weight: 600; color: var(--texto); }
.campo em { font-style: normal; font-weight: 400; }
.campo input {
  font: inherit; font-size: 1rem;
  padding: 10px 12px;
  border: 1.5px solid var(--linea, #dcd2c4);
  border-radius: 8px;
  background: #fff;
  color: var(--titulo);
}
.campo input:focus-visible { outline: 3px solid var(--verde); outline-offset: 1px; border-color: var(--teal); }

/* El tope, en total o por día: el número y el conmutador en la misma fila */
.tope-fila { display: flex; gap: 8px; align-items: stretch; }
.tope-fila input { flex: 1; min-width: 0; }
.tope-modo { display: flex; border: 1.5px solid var(--linea); border-radius: 10px; overflow: hidden; }
.tope-modo button {
  border: 0; background: transparent; font: inherit; font-size: .82rem;
  padding: 0 12px; cursor: pointer; color: var(--texto); white-space: nowrap;
}
.tope-modo button + button { border-left: 1.5px solid var(--linea); }
.tope-modo button[aria-pressed="true"] { background: var(--teal); color: #fff; font-weight: 700; }
.tope-nota { color: var(--texto); font-size: .8rem; }
/* El argumento que no puede copiar nadie que cocine para toda Espana, puesto
   justo donde mas significa: al elegir el dia de entrega. */
.campo__nota { color: var(--verde-osc); font-size: .8rem; font-weight: 600; }

/* Tres estados, porque hay DOS horas de corte. Antes de las 11 se come hoy y
   eso merece que se vea; entre las 11 y las 17 se come mañana, que sigue siendo
   mejor que cualquiera de la competencia; pasadas las 17 la compra de mañana ya
   está cerrada y hay que decirlo sin disfrazarlo, en ámbar y no en verde. Un
   aviso que miente pierde al cliente en la entrega, no en la web. */
.campo__nota[data-corte="hoy"] {
  color: var(--verde-osc);
  background: #eaf5e4;
  border-left: 3px solid var(--verde);
  border-radius: 0 4px 4px 0;
  padding: 6px 8px;
  display: block;
  margin-top: 6px;
}
.campo__nota[data-corte="manana"] { color: var(--verde-osc); }
.campo__nota[data-corte="cerrado"] { color: var(--amarillo); font-weight: 600; }

/* Tres salidas, no una: hasta que el cliente confirme qué número tiene
   WhatsApp, el flujo no puede depender de que lo tenga. */
.cierre__acciones { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cierre__acciones .btn-simple { flex: 1 1 auto; justify-content: center; }
.cierre__volver {
  font: inherit; font-size: .86rem;
  background: none; border: 0; padding: 4px;
  color: var(--texto); cursor: pointer; text-decoration: underline;
  justify-self: center;
}
.cierre__volver:hover { color: var(--titulo); }

/* El semáforo del día compara contra la media del plan, no contra el objetivo
   diario entero: así el verde es alcanzable. */
.dia__kcal[data-estado="corto"] { color: var(--amarillo, #b4762a); }

/* En la tarjeta del plato */
.plato__alerg { font-size: .76rem; margin: 0; color: var(--texto); }
.plato__alerg--limpio { color: var(--verde-osc); }
.plato__alerg--duda { color: #8a6d1f; font-weight: 600; }
.plato__alerg--choca { color: var(--rojo); font-weight: 700; }
.plato[data-alergeno="si"] { border-color: var(--rojo); box-shadow: 0 0 0 2px rgba(206, 57, 57, .15); }

/* En la ficha del calendario */
.ficha[data-alergeno="si"] { border-left-color: var(--rojo); background: #fdf7f7; }
.ficha[data-alergeno="duda"] { border-left-style: dashed; }
.ficha__alerta {
  position: absolute; top: 2px; right: 20px;
  font-size: .8rem; color: var(--rojo); line-height: 1;
}
.ficha__alerta--duda { color: #8a6d1f; }

.etiqueta--vacia { background: var(--linea-fina); color: var(--texto); }
.plato__foto--carta { object-fit: cover; aspect-ratio: 222 / 164; }

.precio { display: grid; gap: 8px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.precio__fila { display: flex; justify-content: space-between; font-size: .92rem; color: var(--texto); }
.precio__fila--dto { color: var(--verde-osc); font-weight: 600; }
.precio__total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--linea-fina); padding-top: 10px; margin-top: 4px;
}
.precio__total strong { font-family: Manrope, sans-serif; font-size: 1.7rem; }
.boton--cta {
  width: 100%; margin-top: 14px; padding: 13px;
  font-size: 1rem; background: var(--verde); border-color: var(--verde); color: #fff;
}
.boton--cta:hover { background: var(--verde-osc); border-color: var(--verde-osc); }
.boton--cta:disabled { background: var(--linea-fina); border-color: var(--linea-fina); color: var(--texto); cursor: not-allowed; }

.aviso {
  font-size: .78rem; color: var(--texto); margin-top: 10px;
  border-top: 1px dashed var(--linea-fina); padding-top: 10px;
}

/* --- Catálogo de platos -------------------------------------------------- */
.catalogo { margin: 44px 0 60px; }
.catalogo__cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.catalogo h2 { font-size: 1.6rem; }
.catalogo__ayuda { color: var(--texto); font-size: .92rem; margin: 4px 0 0; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 20px; }
.filtros button {
  font: inherit; font-size: .88rem; font-weight: 600;
  border: 1.5px solid var(--linea-fina); background: var(--papel); color: var(--texto);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.filtros button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }

.platos { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; }
/* Tratamiento único de tarjeta: sin borde, sombra en dos alturas y la foto
   acercándose al pasar por encima. Lo demás quieto. */
.plato {
  background: var(--papel);
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: grab;
  box-shadow: var(--sombra-quieta, 0 1px 2px rgba(7,52,57,.05), 0 4px 12px rgba(7,52,57,.05));
  transition: transform var(--medio, .34s) var(--curva, ease),
              box-shadow var(--medio, .34s) var(--curva, ease);
  display: flex; flex-direction: column;
}
.plato:hover, .plato:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sombra-encima, 0 2px 6px rgba(7,52,57,.07), 0 16px 32px rgba(7,52,57,.1));
}
.plato:active { cursor: grabbing; transform: translateY(-1px); }
.plato.elegido { box-shadow: 0 0 0 3px var(--verde), var(--sombra-encima, 0 16px 32px rgba(7,52,57,.1)); }

.plato picture, .plato .plato__foto { overflow: hidden; }
.plato__foto {
  aspect-ratio: 222 / 164; background: var(--fondo); object-fit: cover;
  width: 100%; display: block;
  transition: scale .52s var(--curva, ease);
}
.plato:hover .plato__foto { scale: 1.05; }
.plato__sinfoto {
  aspect-ratio: 222 / 164; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef6f0, #e2efe4); color: var(--teal);
  font-family: Manrope, sans-serif; font-weight: 700; font-size: .8rem; text-align: center; padding: 10px;
}
.plato__cuerpo { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.plato__nombre { font-family: Manrope, sans-serif; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.plato__desc { font-size: .8rem; color: var(--texto); line-height: 1.4; flex: 1; }
.plato__pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plato__precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.etiqueta {
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #eef6f6; color: var(--teal); font-variant-numeric: tabular-nums;
}
.etiqueta--nuevo { background: #fdf6e3; color: #8a6d1f; }

/* --- Mensajes ------------------------------------------------------------ */
/* El aviso flotante. Se esconde con opacidad y visibility, NO empujándolo
   fuera de la pantalla con un porcentaje.

   Antes decía `translateY(120%)`, y un porcentaje en translate se mide sobre
   la ALTURA DEL PROPIO ELEMENTO. En reposo el aviso está vacío: mide 22 px de
   puro relleno. 120 % de 22 son 26 px, y su `bottom` es 24 — se quedaba a la
   vista, un óvalo verde oscuro y mudo tapando la página. En móvil era peor:
   160 % de 22 son 35 px contra un `bottom` de 80, o sea que descansaba
   ENTERO en mitad de la pantalla, encima de las tarjetas de plan.

   La regla general: esconder algo desplazándolo solo funciona si el elemento
   es más alto que su distancia al borde. Un aviso vacío nunca lo es. */
.brindis {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  background: var(--teal-osc); color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: .9rem; box-shadow: var(--sombra); z-index: 60;
  opacity: 0; visibility: hidden;
  transition: transform .28s ease, opacity .28s ease, visibility 0s .28s;
  pointer-events: none; max-width: 90vw;
}
.brindis.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1; visibility: visible;
  transition: transform .28s ease, opacity .28s ease, visibility 0s 0s;
}

.pie { background: var(--teal-osc); color: #cfe3e0; padding: 30px 0; font-size: .88rem; }
.pie a { color: #fff; }

/* --- Adaptación a pantallas pequeñas ------------------------------------- */
@media (max-width: 1040px) {
  /* Una columna: calendario, panel, carta — el mismo orden de siempre. */
  .tablero { grid-template-columns: 1fr; grid-template-areas: "cal" "panel" "carta"; grid-template-rows: auto; }
  .panel { position: static; }
}
@media (max-width: 760px) {
  .planes { grid-template-columns: 1fr; }
  .rejilla-dias[data-vista="semana"],
  .rejilla-dias[data-vista="mes"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra__nav { display: none; }
  .cabecera { padding: 26px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 4px; }

/* --- Mover un plato de un día a otro -------------------------------------- */
/* El plato que se está arrastrando se queda medio apagado en su sitio: sin
   esto, al levantarlo parece que ya se ha ido y el usuario suelta a ciegas. */
.hueco.lleno .ficha { cursor: grab; }
.hueco.lleno .ficha:active { cursor: grabbing; }
.hueco.moviendo { opacity: .4; }
.hueco.moviendo .ficha { border-style: dashed; }

/* El día que va a recibir. Ya existía .encima para el catálogo; aquí se refuerza
   para que al mover se vea a dónde cae, que es lo que más se falla. */
.dia.encima { outline: 2px solid var(--verde); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hueco.moviendo { opacity: .6; }
}

/* --- Arrastrar con el dedo ------------------------------------------------ */
/* La copia que va pegada al dedo. Va en el body y por encima de todo, porque
   la original está debajo del dedo y no se ve. */
/* --- La calculadora de calorías, plegada en Móntamelo tú ------------------ */
.calc { display: grid; gap: 10px; padding: 12px; }
.calc__datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.calc__sexo, .calc__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.calc select {
  font: inherit; padding: 9px 10px;
  border: 1.5px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: var(--titulo); width: 100%;
}
.calc__resultado { margin: 0; color: var(--texto); font-size: .92rem; }
.calc__resultado b { color: var(--teal); }

/* --- El portal de entrada: pedido único o plan ---------------------------- */
.portal::backdrop { background: rgb(7 52 57 / .45); backdrop-filter: blur(2px); }
.portal {
  border: 0; border-radius: 16px; padding: 0;
  width: min(92vw, 440px);
  box-shadow: 0 24px 60px rgb(7 52 57 / .35);
}
.portal__caja { padding: 26px 22px 22px; display: grid; gap: 12px; }
.portal__titulo { font-size: 1.45rem; margin: 0; }
.portal__texto { margin: 0 0 4px; color: var(--texto); }
.portal__opcion {
  display: grid; gap: 3px; text-align: left;
  padding: 15px 16px;
  border: 1.5px solid var(--linea); border-radius: 12px;
  background: var(--fondo);
  font: inherit; cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.portal__opcion:hover { border-color: var(--teal); transform: translateY(-1px); }
.portal__opcion b { color: var(--titulo); font-size: 1.02rem; }
.portal__opcion span { color: var(--texto); font-size: .89rem; }
.portal__opcion--hoy { border-color: var(--verde); background: #eef6e9; }
.portal__opcion--hoy b { color: var(--verde-osc); }

/* doble clase: las capas cfg-* redeclaran .ficha DESPUÉS de esta hoja y a
   igual especificidad ganaban (medido: fondo transparente y radio 0) */
.ficha.ficha--volando {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 12px 28px rgba(7, 52, 57, .28);
  transform-origin: center;
  scale: 1.04;
  opacity: .96;
  /* Es una PASTILLA con el nombre, no un clon de la ficha (la ficha real mide
     height:100% de su hueco y su interior se rompía fuera de él). Anula el
     flex-column/height de .ficha y mide lo que mida el texto. */
  display: block;
  width: max-content;
  max-width: 62vw;
  height: auto;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--tinta, #161915);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mientras el dedo arrastra, la página no se selecciona ni hace su propio
   scroll por gestos: sin esto, el navegador se lleva el gesto y la ficha se
   queda a medias. */
body.arrastrando-dedo {
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: contain;
}
body.arrastrando-dedo .dia { touch-action: none; }

/* En táctil la ficha necesita decir que se puede coger. El borde punteado
   izquierdo hace de asa visual sin ocupar sitio. */
@media (hover: none) {
  .hueco.lleno .ficha { position: relative; }
  .hueco.lleno .ficha::after {
    content: "";
    position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px; border-radius: 2px;
    background: repeating-linear-gradient(to bottom,
      var(--linea) 0 3px, transparent 3px 6px);
  }
}

/* --- Platos que no se pueden añadir --------------------------------------- */
/* El filtro de alérgenos ya no solo pinta un borde: bloquea. Y lo que está
   bloqueado tiene que parecerlo, o el cliente pulsa tres veces y se va. */
.plato[data-bloqueado="si"] { opacity: .5; }
.plato[data-bloqueado="si"]:hover { opacity: .62; }
.plato[data-bloqueado="si"] .plato__nombre { text-decoration: line-through; text-decoration-thickness: 1px; }
.opcion:disabled { opacity: .45; cursor: not-allowed; }
.opcion:disabled .opcion__mas { visibility: hidden; }

/* --- Cómo contamos: cada comida o la media de la semana ------------------- */
/* El modo semana es el que hace que un plan se cumpla: el que no puede darse un
   capricho sin "salirse" abandona a la tercera semana. */
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px; }
.modo {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  min-height: 52px; padding: 8px 10px;
  background: var(--fondo); border: 1.5px solid var(--linea-fina);
  border-radius: 8px; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.modo b { font-size: .88rem; }
.modo span { font-size: .74rem; color: var(--texto); line-height: 1.3; }
.modo:hover { border-color: var(--linea); }
.modo:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.modo[aria-pressed="true"] { border-color: var(--teal); background: #e7f0f0; }
.modo[aria-pressed="true"] b { color: var(--teal); }

/* Un día fuerte en modo semana no es un error: es ámbar de "ojo", no rojo. */
.dia__kcal[data-estado="fuerte"] { color: var(--amarillo); }

/* El día de hoy, marcado. Con fechas reales en el calendario, saber cuál es hoy
   es la mitad de la información. */
.dia[data-hoy="si"] { border-color: var(--teal); background: #f0f6f6; }
.dia[data-hoy="si"] .dia__nombre b { color: var(--teal); text-transform: uppercase; font-size: .68rem; }

/* --- El pack de cena, por día --------------------------------------------- */
/* No es un segundo calendario: es el interruptor del pack que sí quieren
   vender. Discreto cuando está apagado, evidente cuando está puesto. */
.dia__cena {
  width: 100%; min-height: 34px; margin-top: 4px; padding: 5px 8px;
  background: transparent; border: 1px dashed var(--linea);
  border-radius: 7px; font: inherit; font-size: .74rem; font-weight: 600;
  color: var(--texto); cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.dia__cena:hover { border-color: var(--teal); color: var(--teal); background: #f0f6f6; }
.dia__cena:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.dia__cena[data-puesta="si"] {
  background: var(--teal); border-style: solid; border-color: var(--teal); color: #fff;
}

/* --- La suma de lo elegido ------------------------------------------------ */
/* El panel daba la media por comida y nada más: quien montaba veinte días no
   veía el conjunto. Un planificador que no suma no planifica. */
.suma {
  margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--linea-fina);
  display: grid; gap: 6px;
}
.suma__fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: .88rem; color: var(--texto);
}
.suma__fila b {
  color: var(--titulo); font-variant-numeric: tabular-nums; font-weight: 700;
}

/* --- Los dos caminos, cuando no hay nada montado -------------------------- */
/* Sale solo con el calendario vacío: es el único momento en que alguien
   necesita que le digan que puede hacerlo a mano. Con el primer plato puesto,
   desaparece. */
.como-empezar {
  margin: 0 0 12px; padding: 11px 14px;
  background: #f0f6f6; border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  font-size: .9rem; line-height: 1.5; color: var(--texto);
}
.como-empezar b { color: var(--titulo); }

/* --- Lo que no me gusta --------------------------------------------------- */
/* Elegir entre veinte platos es trabajo; tachar tres es un momento. Y a partir
   de ahí, todo lo que salga le vale al cliente. */
.nogusta { margin: 6px 0 12px; }
.nogusta__abrir {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 10px 12px;
  background: var(--fondo); border: 1.5px solid var(--linea-fina); border-radius: 8px;
  font: inherit; font-weight: 600; color: var(--titulo); cursor: pointer; text-align: left;
}
.nogusta__abrir small { font-weight: 400; font-size: .8rem; color: var(--texto); }
.nogusta__abrir:hover { border-color: var(--teal); }
.nogusta__abrir:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.nogusta__abrir[aria-expanded="true"] { border-color: var(--teal); border-radius: 8px 8px 0 0; }

.nogusta__lista {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 12px; max-height: 220px; overflow-y: auto;
  border: 1.5px solid var(--teal); border-top: 0; border-radius: 0 0 8px 8px;
}
.nogusta__plato {
  min-height: 36px; padding: 5px 11px;
  background: var(--papel); border: 1.5px solid var(--linea); border-radius: 999px;
  font: inherit; font-size: .84rem; cursor: pointer;
  transition: opacity .12s ease, border-color .12s ease;
}
.nogusta__plato:hover { border-color: var(--rojo); }
.nogusta__plato:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
/* Tachado y apagado: se ve de un vistazo lo que has quitado sin tener que leer. */
.nogusta__plato[aria-pressed="true"] {
  text-decoration: line-through; text-decoration-color: var(--rojo);
  opacity: .5; border-color: var(--linea-fina); border-style: dashed;
}

/* --- Montar el mío, desde un día ------------------------------------------ */
.dia__mio {
  width: 100%; min-height: 30px; margin-top: 4px; padding: 4px 8px;
  background: transparent; border: 1px dashed var(--linea);
  border-radius: 7px; font: inherit; font-size: .72rem; font-weight: 600;
  color: var(--teal); cursor: pointer;
}
.dia__mio:hover { background: #f0f6f6; border-color: var(--teal); }
.dia__mio:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.miplato {
  width: min(30rem, 94vw); padding: 22px; border: 0; border-radius: 14px;
  background: var(--papel); color: var(--titulo);
}
.miplato::backdrop { background: rgba(7,52,57,.5); }
.miplato h2 { margin: 0 0 4px; font-size: 1.25rem; }
.miplato__dia { margin: 0 0 16px; font-size: .88rem; color: var(--texto); }
.miplato__cerrar { position: absolute; top: 12px; right: 12px; }
.miplato__cerrar button {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linea); background: var(--fondo); font-size: 1rem;
}

.miranura {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--linea-fina);
}
.miranura__eti { width: 78px; flex: none; font-size: .78rem; color: var(--texto); }
.miranura__nombre {
  flex: 1; min-width: 0; font-size: .95rem; font-weight: 600;
  /* flex-start, no center: centrado, cada fila colocaba su foto y su nombre
     donde le cuadraba a SU ancho y el dialogo parecia descolocado (captura
     de Andres). A la izquierda, las fotos forman columna y el ojo ancla. */
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding-left: 6px;
}
.miranura__mini {
  flex: none; width: 40px; height: 40px;
  border-radius: 8px; object-fit: cover;
  pointer-events: none;
}
.miranura__mini--nada { display: block; background: linear-gradient(135deg, #eef6f0, #e2efe4); }
/* El hueco vacío se enseña como tal, en voz baja. */
.miranura[data-vacia="si"] .miranura__nombre { color: var(--texto); font-weight: 500; font-style: italic; }
/* La ✕ de quitar la guarnición; el hueco fantasma iguala el ancho de las
   filas sin ✕ para que las flechas queden en columna. */
.miranura__quitar, .miranura__hueco-quitar { flex: none; width: 34px; height: 34px; }
.miranura__quitar {
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px;
  font: inherit; font-size: 19px; color: var(--texto); cursor: pointer;
}
.miranura__quitar:hover { background: #f7e4e4; color: var(--rojo); }
.miranura__quitar:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.miranura__flecha {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--fondo); border: 1.5px solid var(--linea); border-radius: 8px;
  font: inherit; font-size: 1.3rem; line-height: 1; color: var(--teal); cursor: pointer;
}
.miranura__flecha:hover { background: #e7f0f0; border-color: var(--teal); }
.miranura__flecha:active { transform: scale(.92); }
.miranura__flecha:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.miplato__cuenta { margin: 16px 0 0; padding: 14px; background: var(--fondo); border-radius: 10px; }
.miplato__precio { margin: 0 0 4px; font-size: 1.5rem; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; }
.miplato__kcal { margin: 0 0 8px; font-size: .95rem; font-variant-numeric: tabular-nums; }
.miplato__sellos { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.miplato__alerg { margin: 8px 0 0; font-size: .82rem; color: var(--texto); }
.miplato__acciones { display: flex; gap: 8px; margin: 16px 0 0; }
.miplato__acciones .boton { flex: 1; min-height: 48px; }

/* --- Los dos caminos y la lista de opciones ------------------------------- */
.montar__acciones--dos { flex-direction: column; gap: 8px; }
.montar__acciones--dos .btn-simple { width: 100%; min-height: 50px; }
.montar__salir { border-color: transparent; color: var(--texto); font-weight: 500; }

.opciones-lista { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linea-fina); }
.opciones-lista__cab { margin: 0 0 10px; font-size: .88rem; color: var(--texto); }
.opciones-lista__cab b { color: var(--titulo); font-variant-numeric: tabular-nums; }
.opciones-lista__caja { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.opciones-lista__vacio { margin: 0; font-size: .88rem; color: var(--texto); }

.opcion-combo {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 12px; text-align: left;
  background: var(--papel); border: 1.5px solid var(--linea-fina);
  border-left: 4px solid var(--linea); border-radius: 8px;
  font: inherit; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.opcion-combo:hover { border-color: var(--linea); border-left-color: var(--teal); }
.opcion-combo:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
/* Marcada: verde y con la marca, para verlo de un vistazo sin leer */
.opcion-combo[aria-pressed="true"] {
  background: #eaf5e4; border-color: var(--verde); border-left-color: var(--verde);
}
.opcion-combo[aria-pressed="true"] .opcion-combo__nombre::before { content: "✓ "; color: var(--verde-osc); font-weight: 700; }
.opcion-combo__nombre { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.opcion-combo__datos { font-size: .82rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.opcion-combo__pend { font-size: .74rem; font-weight: 700; color: var(--amarillo); }

#opcionesPoner { width: 100%; min-height: 50px; margin-top: 12px; }
#opcionesPoner:disabled { opacity: .45; cursor: default; }

/* --- Mover un plato sin arrastrarlo --------------------------------------- */
/* El arrastre vale en escritorio, donde los cinco días están a la vista. En
   móvil el calendario es de una columna y el día 4 queda a 1.190 px: dos
   toques ganan a 550 px de scroll con el dedo pegado. */
.mover { width: min(26rem, 92vw); padding: 20px; border: 0; border-radius: 14px; background: var(--papel); }
.mover::backdrop { background: rgba(7,52,57,.5); }
.mover h2 { margin: 0 0 2px; font-size: 1.15rem; }
.mover h2 span { color: var(--teal); }
.mover__ayuda { margin: 0 0 14px; font-size: .88rem; color: var(--texto); }
.mover__cerrar { position: absolute; top: 12px; right: 12px; }
.mover__cerrar button {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linea); background: var(--fondo); font-size: 1rem;
}
.mover__lista { display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; }
.mover__dia {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  min-height: 54px; padding: 9px 12px; text-align: left;
  background: var(--fondo); border: 1.5px solid var(--linea-fina);
  border-radius: 8px; font: inherit; cursor: pointer;
}
.mover__dia:hover:not(:disabled) { border-color: var(--verde); background: #eaf5e4; }
.mover__dia:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.mover__dia:disabled { opacity: .5; cursor: default; }
.mover__nombre { font-weight: 700; font-size: .92rem; }
.mover__dato { font-size: .8rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.mover__aqui { font-size: .72rem; font-weight: 700; color: var(--teal); }

/* En táctil, la ficha invita a tocarla */
@media (hover: none) { .hueco.lleno .ficha { cursor: pointer; } }

/* --- Lo que has tachado, en los caminos manuales -------------------------- */
/* Un alérgeno BLOQUEA: es una promesa de seguridad. Un gusto, no — puedes
   cambiar de idea. Así que lo tachado no se propone nunca por su cuenta, pero
   si vas a buscarlo sigue estando, marcado. */
.plato[data-nogusta="si"] { opacity: .55; }
.plato[data-nogusta="si"] .plato__nombre { text-decoration: line-through; text-decoration-color: var(--texto); }
.plato[data-nogusta="si"]::after {
  content: "lo has quitado";
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 2px 7px; border-radius: 999px;
  background: var(--texto); color: #fff;
  font-size: .66rem; font-weight: 700;
}
.opcion[data-nogusta="si"] { opacity: .55; }
.opcion[data-nogusta="si"] .opcion__nombre { text-decoration: line-through; }

/* --- El aviso de datos provisionales, compacto ---------------------------- */
/* Medido: 119 px en /pedidos frente a 32 en /plato. La versión de una línea
   estaba solo en plato.css, así que aquí seguía comiéndose la primera pantalla
   entera. Sigue sin poder cerrarse: mientras la herramienta funcione con
   supuestos, quien la mire tiene que saberlo — pero no a costa de no ver nada
   más. */
.supuestos-aviso {
  position: relative;
  padding: 7px 34px 7px 14px;
  font-size: .78rem; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.supuestos-aviso.abierto { white-space: normal; overflow: visible; }
.supuestos-aviso::after {
  content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
.supuestos-aviso.abierto::after { content: "▴"; top: 10px; transform: none; }

/* --- El teléfono y el correo del pie -------------------------------------- */
/* Medido: 19 px de alto y padding 0. Son justo los dos enlaces que alguien
   intenta tocar con el pulgar —llamar o escribir— y son los más pequeños de
   la página. El WCAG 2.5.8 pide 24 px como mínimo; con el padding llegan a 44,
   que es lo que pide un dedo. */
.pie-legal a[href^="tel:"],
.pie-legal a[href^="mailto:"],
footer a[href^="tel:"],
footer a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
}

/* --- La zona: dónde te lo llevamos ---------------------------------------- */
.zona { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.zona__titulo { font-weight: 700; color: var(--titulo); }

/* --- Confirmar pedido con el teléfono ------------------------------------- */
.cierre__codigo input { letter-spacing: .18em; font-size: 1.15rem; text-align: center; }
.cierre__hecho { text-align: left; }
.cierre__hecho .cierre__titulo::before { content: '✓ '; color: var(--verde-osc); }
#recaptcha-cierre { min-height: 0; }

/* --- Te lo monto yo: modo fácil arriba, avanzado plegado ----------------- */
.montar__facil { display: grid; gap: 10px; margin: 4px 0 14px; }
.montar__facil-lista { margin: 0; padding: 0 0 0 1.1em; color: var(--texto, #556354); line-height: 1.55; font-size: .95rem; }
.montar__facil-lista li { margin: 2px 0; }
.montar__facil-btn { width: 100%; min-height: 52px; font-size: 1.05rem; }
.montar__avanzado-abrir {
  background: none; border: 0; padding: 6px 0; font: inherit; font-size: .92rem;
  color: var(--teal, #145961); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.montar__avanzado-abrir:focus-visible { outline: 3px solid var(--teal, #145961); outline-offset: 2px; border-radius: 4px; }
.montar__avanzado:not([hidden]) { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid #e6dfd3; }
.montar__avanzado[hidden] { display: none !important; }

/* --- /pedidos CON VIDA (Andrés, 06-09: «banners por detrás con fotos de gente
   contenta fit con platos de la marca; ahora está muy aburrido»). La cabecera
   lleva a sangre la foto de la mujer comiendo del tupper negro de la marca
   (seedream con los tuppers reales de referencia), y un velo crema por la
   izquierda para que el titular se lea sobre fondo liso. En móvil la foto va
   arriba (recorte vertical) y el texto se apoya abajo sobre el velo. -------- */
.cabecera { position: relative; isolation: isolate; padding: 56px 0 40px; }
.cabecera__foto, .cabecera__foto::after {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); z-index: -1; pointer-events: none;
}
.cabecera__foto::after { content: ''; left: 0; width: 100%; transform: none; }
.cabecera__foto {
  background: var(--fondo) url('/assets/images/fondos/cocina-mujer-1600.webp') no-repeat right 30% / cover;
}
.cabecera__foto::after {
  background: linear-gradient(90deg, var(--fondo) 0 44%, rgba(241, 233, 226, .88) 58%, rgba(241, 233, 226, .18) 100%);
}
.cabecera h1, .cabecera p { position: relative; }
@media (max-width: 1100px) {
  .cabecera__foto::after { background: linear-gradient(90deg, var(--fondo) 0 52%, rgba(241, 233, 226, .9) 66%, rgba(241, 233, 226, .25) 100%); }
}
@media (max-width: 700px) {
  .cabecera { min-height: 60vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 22px; }
  .cabecera__foto { background-image: url('/assets/images/fondos/cocina-mujer-movil.webp'); background-position: center top; }
  .cabecera__foto::after { background: linear-gradient(180deg, rgba(241, 233, 226, 0) 0 34%, rgba(241, 233, 226, .92) 58%, var(--fondo) 74%); }
  .cabecera h1 { font-size: 1.75rem; }
  .cabecera p { font-size: .98rem; }
}

/* la tira de foto del «Te lo monto yo»: el chico del gimnasio con su tupper,
   a sangre hasta los bordes del diálogo (compensa el padding de 26px) y con
   velo hacia el papel para que el título se lea encima */
.montar__caja { position: relative; }
.montar__foto {
  margin: -26px -26px 4px; height: 150px; border-radius: var(--radio) var(--radio) 0 0;
  background: var(--papel) url('/assets/images/fondos/gym-hombre-800.webp') no-repeat center 30% / cover;
  position: relative; overflow: hidden;
}
.montar__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0 45%, var(--papel) 100%);
}
.montar__titulo { margin-top: -34px; position: relative; }
@media (max-width: 700px) {
  .montar__foto { height: 128px; background-image: url('/assets/images/fondos/gym-hombre-movil.webp'); background-position: center 22%; }
}

/* enlace a la ficha larga del plato, discreto bajo el precio */
.plato__ficha { font-size: .78rem; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.plato__ficha:hover { color: #0f4449; }
.plato__ficha:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* [hidden] PIERDE contra cualquier display de autor, y .miplato__acciones tiene
   display:flex: con la rejilla abierta, «Ponerlo en este día» seguía a la vista
   flotando debajo de las tarjetas. Es el mismo tropiezo que .cajon del panel. */
.miplato__acciones[hidden],
.miplato__cuenta[hidden],
.miplato__ranuras[hidden],
.miplato__elegir[hidden] { display: none; }

/* --- ELEGIR DE UNA REJILLA ---------------------------------------------------
   Un cliente que lo probó, 09-09-2026: «al tener que estar dando a la flecha
   para elegir el plato es poco usable». Tocar la ranura abre todo lo que cabe
   en ese hueco. Las flechas siguen ahí para tantear. */
/* El borde va SIEMPRE puesto, no solo al pasar por encima: en el movil no hay
   hover, y si no se ve que es pinchable nadie lo pincha y volvemos a las
   flechas. El chevron ▾ (abrir una lista) se distingue de las ‹ › de rular.
   Un rotulo de texto tipo «ver todos» aqui NO cabe: se comia el ancho y partia
   «Arroz al Wok con Verduras y Sesamo» en cinco lineas. */
.miranura__nombre {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1.5px solid var(--linea); border-radius: 10px;
  background: #fff; text-align: left; color: inherit;
  font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1.25;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.miranura__nombre:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(7,52,57,.09); }
.miranura__nombre:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.miranura__nombre > span:first-of-type { flex: 1; min-width: 0; }
.miranura__mas {
  flex: none; width: 18px; text-align: center;
  font-size: .8rem; color: var(--teal); opacity: .7; line-height: 1;
}
.miranura__nombre:hover .miranura__mas { opacity: 1; }

.elegir__cab {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}
.elegir__volver {
  flex: none; min-height: 40px; padding: 8px 14px; border-radius: 8px;
  border: 1.5px solid var(--linea); background: #fff; color: var(--teal);
  font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
}
.elegir__volver:hover { border-color: var(--teal); }
.elegir__volver:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.elegir__que { margin: 0; font-size: .9rem; color: var(--texto); }
.elegir__que b { color: var(--titulo); }
.elegir__vacio { margin: 0; padding: 20px; font-size: .9rem; color: var(--texto); line-height: 1.5; }

/* la rejilla se desplaza dentro del diálogo: con 21 platos no cabe en pantalla */
.elegir__rejilla {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  max-height: min(56vh, 30rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 2px;
}
.opcard {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 12px;
  border: 1.5px solid var(--linea); background: #fff;
  font: inherit; text-align: left; color: inherit; cursor: pointer;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.opcard:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(7,52,57,.10); }
.opcard:active { transform: scale(.97); }
.opcard:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.opcard--puesta { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,89,97,.14); }
.opcard__foto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; display: block; background: var(--fondo);
}
.opcard__foto--nada { background: linear-gradient(135deg, #eef6f0, #e2efe4); }
.opcard__nom { font-size: .84rem; font-weight: 700; line-height: 1.25; }
.opcard__dato {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  margin-top: auto; font-size: .76rem; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.opcard__dato b { font-size: .9rem; color: var(--teal); }
/* «sin guarnición» no es un plato: se ve que es la casilla de quitar */
.opcard--nada { border-style: dashed; justify-content: center; align-items: center; min-height: 120px; }
.opcard--nada .opcard__nom { text-align: center; color: var(--texto); }
.opcard__nada { font-size: 1.6rem; color: var(--texto); opacity: .5; line-height: 1; }

@media (max-width: 420px) {
  .elegir__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miranura__eti { width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .opcard, .miranura__nombre { transition: none; }
  .opcard:active { transform: none; }
}

/* --- EL CODIGO POSTAL Y LA ZONA (Andres, 10-09-2026) -----------------------
   «Al hacer pedidos tienes que limitarlo al corredor». El campo avisa EN VIVO
   en cuanto hay cinco digitos: verde si llegamos, rojo si no, con el motivo
   escrito. Decirselo despues de rellenar el pedido entero es la peor manera. */
.campo__nota[data-ok="si"] { color: #3a7026; font-weight: 600; }
.campo__nota[data-ok="no"] { color: #a82c2c; font-weight: 600; }
input[data-mal="si"] { border-color: #a82c2c !important; background: #fdf6f6; }

.zona__texto {
  margin: 6px 0 0; max-width: 46rem;
  font-size: .92rem; line-height: 1.55; color: var(--texto, #556354);
}
.zona__texto a { color: var(--teal, #145961); font-weight: 600; }