/* Estilo base, pensado primero para celular. */
/* Estilo base 2 (Zapier, ver DESIGN.md): crema cálido, tinta café y UN acento naranja.
   Todos los colores viven aquí; el resto del archivo solo usa estas fichas. */
:root {
  --acento: #ff4f00;          /* solo para la acción principal de cada pantalla */
  --acento-suave: #ffe9dd;    /* fondo de "hoy" / lo que sigue */
  --acento-muy-suave: #fff6f0;
  --acento-borde: #ffb38f;
  --tinta: #201515;           /* texto principal y botones oscuros */
  --tinta-media: #36342e;
  --texto: #605d52;           /* texto secundario */
  --texto-suave: #6f6b5f;
  --fondo: #fffefb;           /* página */
  --superficie: #fffefb;      /* tablas, campos */
  --crema: #f8f4f0;           /* tarjetas y zonas */
  --linea: #ece6da;
  --linea-fuerte: #c5c0b1;
  --activo: #201515;          /* pestaña o chip elegido */
  --verde: #1d6b3a;           /* bien / producido (semáforo) */
  --aviso-fondo: #fff3df;
  --aviso-borde: #f0d3a2;
  --aviso-borde-fuerte: #c27c00;
  --aviso-texto: #7a4a00;
  --radio: 12px;              /* botones y tarjetas */
  --radio-campo: 6px;         /* campos de texto */
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; font-size: 16px; color: var(--tinta); background: var(--fondo); }
.contenido { padding: 1rem 1rem 5rem; } /* espacio para que la barra inferior no tape nada */
button, .boton, input, select, textarea { font: inherit; font-size: 16px; } /* 16 px evita el zoom en iPhone */
button, .boton { min-height: 44px; min-width: 44px; padding: 0 1rem; }
input, select, textarea { min-height: 44px; padding: 0.5rem; }
.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--superficie); border-top: 1px solid var(--linea-fuerte); }
.barra-inferior a { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--tinta); }

/* --- Pantallas de cocina --- */
h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 0 0 0.5rem; }
a { color: var(--tinta); }
.tenue { color: var(--texto-suave); }
.nota { color: var(--texto); font-size: 0.95rem; }
.error { color: #b00020; margin: 0.25rem 0; }
.aviso { color: var(--aviso-texto); font-size: 0.95rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.encabezado { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--linea-fuerte); }
.encabezado form { margin: 0; }
.encabezado-nombre { font-weight: 600; }
.boton-ligero { background: none; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); }

.boton { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); text-decoration: none; cursor: pointer; }
.boton-principal { background: var(--activo); border-color: var(--activo); color: var(--superficie); font-weight: 600; width: 100%; min-height: 52px; margin-top: 0.75rem; }

.tarjeta { display: block; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 1rem; margin: 0 0 1rem; }
fieldset.tarjeta { min-width: 0; }
.formulario label, .tarjeta > label { display: block; margin-top: 0.75rem; font-weight: 600; }
.formulario input:not([type=checkbox]), .formulario select, .formulario textarea { width: 100%; }
.formulario .casilla { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; min-height: 44px; }
.casilla input { width: 24px; height: 24px; min-height: 0; }

.mensajes { list-style: none; padding: 0; margin: 0 0 1rem; }
.mensaje { padding: 0.75rem 1rem; border-radius: var(--radio); background: #e8f3ec; margin-bottom: 0.5rem; }
.mensaje.error { background: #fdecee; }

/* Navegación entre días o semanas: flecha, título, flecha. */
.navegacion-fecha { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.navegacion-titulo { flex: 1; display: flex; flex-direction: column; text-align: center; }
.pestanas { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.pestanas a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); text-decoration: none; color: var(--tinta); }
.pestanas a.activa { background: var(--activo); border-color: var(--activo); color: var(--superficie); font-weight: 700; }

/* Hoy */
.comensales { font-weight: 600; }
.tiempo { padding: 0.5rem 0; border-top: 1px solid var(--linea); }
.tiempo-nombre { display: block; font-size: 0.85rem; color: var(--texto); text-transform: uppercase; letter-spacing: 0.03em; }
.platillo { font-size: 1.05rem; }
.chip { display: inline-block; font-size: 0.8rem; padding: 0 0.4rem; border-radius: 999px; background: var(--crema); color: var(--tinta); }

/* Recetas */
.buscador { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.buscador input { flex: 1; min-width: 0; }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { border-bottom: 1px solid var(--linea); }
.lista a { display: block; padding: 0.75rem 0.25rem; min-height: 44px; text-decoration: none; color: var(--tinta); }

/* Modo cocina: números y pasos grandes para leer de lejos. */
.porciones-fila { display: flex; gap: 0.5rem; }
.porciones-fila input { flex: 1; min-width: 0; font-size: 1.5rem; text-align: center; }
.porciones-fila .boton-principal { width: auto; margin-top: 0; }
.porciones-atajos { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.porciones-atajos .boton { flex: 1; padding: 0; }
.ingredientes { list-style: none; padding: 0; margin: 0; }
.ingredientes li { padding: 0.5rem 0; border-bottom: 1px solid var(--linea); font-size: 1.15rem; }
.costo, .costos { color: var(--tinta-media); }
.paso { font-size: 1.25rem; line-height: 1.5; margin: 0 0 0.75rem; }

/* Producción */
.porciones-plan { font-size: 1.2rem; }
.producido { font-weight: 600; color: var(--activo); }
.producir { display: flex; gap: 0.5rem; align-items: stretch; }
.producir input[type=number] { width: 6rem; font-size: 1.25rem; text-align: center; }
.producir .boton-principal { flex: 1; margin-top: 0; }

/* Comensales: comida, residentes y personal en una fila. */
.casilla-comensales { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; align-items: end; padding: 0.5rem 0; border-top: 1px solid var(--linea); }
.casilla-comensales label { font-size: 0.85rem; color: var(--texto); }
.casilla-comensales input { width: 100%; }
.casilla-comida { font-weight: 600; align-self: center; }
.boton-fijo { position: sticky; bottom: 56px; }

/* Menú de la semana y ciclo: tabla de días que se desliza de lado en el celular. */
.tabla-scroll { overflow-x: auto; margin-bottom: 1rem; }
.tabla-menu { border-collapse: collapse; background: var(--superficie); font-size: 0.9rem; }
.tabla-menu th, .tabla-menu td { border: 1px solid var(--linea-fuerte); padding: 0.25rem; vertical-align: top; text-align: left; min-width: 8.5rem; }
.tabla-menu tbody th { position: sticky; left: 0; background: var(--crema); min-width: 7rem; }
.tabla-menu .seccion-comida th { background: var(--tinta); color: var(--superficie); text-transform: uppercase; }
.tabla-menu .fijo td, .tabla-menu .fijo th { background: var(--crema); color: var(--texto-suave); }
.celda { display: block; min-height: 44px; color: inherit; text-decoration: none; }
.platillo-celda { display: block; margin-bottom: 0.25rem; }
.marca { color: var(--aviso-texto); text-decoration: none; }
.avisos { padding-left: 1.2rem; margin: 0; }
.ajuste { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.ajuste select { flex: 1 1 12rem; min-width: 0; }

/* Ciclo: selector de semanas, comparar y recetas fuera del ciclo. */
.selector-semanas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem; }
.selector-semanas a { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); text-decoration: none; color: var(--tinta); }
.selector-semanas a.hoy { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; font-weight: 700; }
.selector-semanas a.activa { background: var(--activo); border-color: var(--activo); color: var(--superficie); font-weight: 700; }
.leyenda-hoy { font-size: 0.85rem; }
.comparar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.fuera-ciclo h3 { font-size: 0.85rem; color: var(--texto); text-transform: uppercase; letter-spacing: 0.03em; margin: 0.75rem 0 0.25rem; }
.fuera-ciclo input[type=search] { width: 100%; }
.fuera-lista { list-style: none; padding: 0; margin: 0; }
.fuera-lista li { padding: 0.15rem 0; }
.fuera-lista a { display: block; padding: 0.35rem 0.25rem; }
.boton-sustituir { width: 100%; justify-content: flex-start; text-align: left; min-height: 40px; }

/* --- Computadora: navegación arriba, contenido más ancho --- */
.nav-arriba { display: none; }
@media (min-width: 900px) {
  .barra-inferior { display: none; }
  .contenido { max-width: 1400px; margin: 0 auto; padding: 1.5rem 2rem 2rem; }
  .contenido.lectura { max-width: 900px; } /* recetas, producción y formularios: ancho de lectura cómodo */
  .boton-fijo { bottom: 0; }

  .encabezado { justify-content: flex-start; gap: 2rem; padding: 0.25rem 2rem; }
  .encabezado form { margin-left: auto; }
  .nav-arriba { display: flex; gap: 0.25rem; }
  .nav-arriba a { padding: 0.6rem 0.9rem; border-radius: var(--radio); text-decoration: none; color: var(--tinta); }
  .nav-arriba a:hover { background: var(--crema); }

  /* Hoy: desayuno, comida y cena lado a lado. */
  .comidas-hoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; align-items: start; }
  .comidas-hoy .tarjeta { margin: 0; }
  .comidas-hoy + p { margin-top: 1rem; }

  /* Tablas de la semana y del ciclo: que quepan completas sin deslizar de lado. */
  .tabla-menu { width: 100%; table-layout: fixed; font-size: 0.85rem; }
  .tabla-menu th, .tabla-menu td { min-width: 0; overflow-wrap: anywhere; }
  .tabla-menu thead th:first-child, .tabla-menu tbody th[scope=row] { width: 8rem; }
  .tabla-menu .ajuste select { flex-basis: 100%; }

  /* Ciclo: tabla a la izquierda, "Fuera del ciclo" como columna a la derecha con su propio scroll. */
  .ciclo-disposicion { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
  .fuera-ciclo { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; margin: 0; }
}

/* --- Platillo: detalle, sustitutos y confirmación (ficha 03) --- */
.panel-barra { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.panel-titulo { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.donde { color: var(--texto); margin: 0 0 0.25rem; }
.aviso-cambio { background: var(--aviso-fondo); border-left: 4px solid var(--aviso-borde-fuerte); padding: 0.5rem 0.75rem; border-radius: 6px; }
.alergeno { color: #9a3b00; font-size: 0.9rem; }
.alergenos-linea { margin: 0.25rem 0 0.5rem; }
.cifras { display: grid; gap: 0.5rem; margin: 0.75rem 0; }
.cifras div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--linea); padding-top: 0.5rem; }
.cifras dt { color: var(--texto); }
.cifras dd { margin: 0; font-weight: 600; text-align: right; }
.sin-costo { color: var(--aviso-texto); font-weight: 600; }
.sube { color: #b00020; }
.baja { color: var(--activo); }
/* Semáforo del % de materia prima: el texto siempre dice el estado (no depende solo del color). */
.semaforo { display: inline-block; padding: 0 0.4rem; border-radius: 6px; font-weight: 600; }
.semaforo.bien { background: var(--acento-suave); color: var(--activo); }
.semaforo.cerca { background: var(--aviso-fondo); color: var(--aviso-texto); }
.semaforo.pasado { background: #fde3e6; color: #a1001a; }
.semaforo.incompleto { background: var(--crema); color: var(--tinta-media); }
.plegable summary { min-height: 44px; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 600; }
.lista-historial { padding-left: 1.2rem; margin: 0.5rem 0 0; }
.lista-sustitutos { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista-sustitutos li { border-bottom: 1px solid var(--linea); }
.sustituto { display: grid; gap: 0.15rem; padding: 0.6rem 0.25rem; min-height: 44px; color: var(--tinta); text-decoration: none; }
.sustituto-nombre { font-weight: 600; color: var(--tinta); }
.sustituto-datos, .sustituto-costo { font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-fuera { background: var(--aviso-fondo); color: var(--aviso-texto); }
.cambio-titulo s { color: var(--texto-suave); font-weight: normal; }
.casilla-grande { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 600; margin-top: 0.5rem; }
.casilla-grande input { width: 24px; height: 24px; min-height: 0; }
.botones-secundarios { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.botones-secundarios .boton { flex: 1; }
.deshacer { display: flex; align-items: center; gap: 0.75rem; margin: -0.5rem 0 1rem; padding: 0.25rem 1rem; background: #e8f3ec; border-radius: var(--radio); }
.deshacer button { font-weight: 700; }
.pestanas { flex-wrap: wrap; }
@media (min-width: 900px) {
  /* En computadora el platillo se abre como panel angosto a la derecha. */
  .contenido.panel { max-width: 560px; margin-right: 2rem; margin-left: auto; }
}

/* --- Ciclo: costos, desglose, celular un día a la vez e imprimir (ficha 04) --- */
.solo-compu { display: none; }
.ciclo-cabecera { margin-bottom: 0.5rem; }
.ciclo-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ciclo-herramientas .selector-semanas { margin: 0; }
.menu-imprimir { position: relative; }
.menu-imprimir summary { list-style: none; }
.menu-imprimir summary::-webkit-details-marker { display: none; }
.menu-imprimir-opciones { position: absolute; z-index: 5; right: 0; display: grid; gap: 0.25rem; padding: 0.5rem; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); min-width: 14rem; }
.chips-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin: 0.5rem 0; }
.chips-dias a { min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--superficie); color: var(--tinta); text-decoration: none; font-weight: 600; }
.chips-dias a.activa { background: var(--activo); border-color: var(--activo); color: var(--superficie); }
.chips-dias a.hoy { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.comida-titulo { margin: 0 0 0.25rem; font-size: 1.05rem; text-transform: uppercase; color: var(--tinta); }
.platillo-liga { display: block; min-height: 32px; padding: 0.15rem 0; color: var(--tinta); text-decoration: none; }
.platillo-liga:focus-visible, .celda-costo:focus-visible { outline: 3px solid var(--tinta); }
.tiempo .platillo-liga { font-size: 1.05rem; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.platillo-liga.cambiado { background: var(--aviso-fondo); border-radius: 4px; }
.marca-cambio { display: inline-block; font-size: 0.75rem; color: var(--aviso-texto); font-weight: 600; }
.celda-costo { display: block; min-height: 44px; color: inherit; text-decoration: none; font-size: 0.85rem; }
.sin-costo-lista { display: block; font-size: 0.75rem; color: var(--aviso-texto); }
.fila-costos td { background: var(--crema); }
.fila-costos td.elegido { outline: 3px solid var(--tinta); outline-offset: -3px; }
.fila-costos th { font-size: 0.8rem; }
.desglose { list-style: none; padding: 0; margin: 0.5rem 0; }
.desglose li { display: grid; grid-template-columns: 1fr auto; gap: 0 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--linea); }
.desglose li > a { min-height: 32px; }
.desglose .tenue { grid-column: 1; font-size: 0.85rem; }
.desglose-aporte { grid-column: 2; grid-row: 1; font-weight: 600; }
.fuera-ciclo-lista { margin-top: 1rem; border-top: 1px solid var(--linea); padding-top: 0.5rem; }
.tabla-datos { border-collapse: collapse; background: var(--superficie); width: 100%; font-size: 0.9rem; }
.tabla-datos th, .tabla-datos td { border: 1px solid var(--linea-fuerte); padding: 0.4rem; text-align: left; vertical-align: middle; }
.tabla-datos thead th { background: var(--crema); }
.tabla-datos tfoot { font-weight: 600; }
.mapa-dias td { padding: 0.15rem; }
.mapa-dias td a { display: flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; font-size: 0.85rem; }
.lista-atacar li { padding: 0.35rem 0; }
.todos-los-dias { background: var(--crema); }

@media (min-width: 900px) {
  .solo-compu { display: block; }
  .solo-celular { display: none; }
  .comparar.solo-compu { display: flex; }
  /* Encabezado de días fijo al bajar por la semana. */
  .ciclo-tablas .tabla-scroll { overflow: visible; }
  .ciclo-tablas .tabla-menu thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie); box-shadow: 0 1px 0 var(--linea-fuerte); }
  .ciclo-tablas .platillo-liga { min-height: 0; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* Tableta: la cuadrícula usa todo el ancho y el panel queda abajo. */
  .ciclo-disposicion { grid-template-columns: minmax(0, 1fr); }
  .fuera-ciclo { position: static; max-height: none; }
}

/* --- Hoy y Semana (ficha 02) --- */
.centrado { text-align: center; margin-top: -0.5rem; }
.boton-ancho { width: 100%; margin-top: 0.5rem; }
.aviso-comensales { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: 1rem; background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: var(--radio); }
.comida-hoy > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 0.75rem; }
.comida-hoy > summary::-webkit-details-marker { display: none; }
.comida-hoy > summary::after { content: "▾"; color: var(--texto-suave); }
.comida-hoy[open] > summary::after { content: "▴"; }
.comida-hoy > summary h2 { margin: 0; }
.chip-sigue { background: var(--activo); color: var(--superficie); }
.etiqueta-diario { font-size: 0.7rem; padding: 0 0.35rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; text-transform: none; letter-spacing: 0; }
.fijo-hoy .platillo-liga { color: var(--texto); }
.platillo-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; }
.platillo-dia .platillo-liga { min-height: 44px; display: flex; align-items: center; font-size: 1.05rem; color: var(--tinta); }
.acciones-semana { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.ajustar-dia { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--aviso-texto); text-decoration: none; }
.tabla-menu th.hoy { background: var(--acento-suave); }
.tabla-menu td.hoy { background: var(--acento-muy-suave); }
.tabla-menu .platillo-dia .platillo-liga { min-height: 32px; font-size: inherit; }
@media (min-width: 900px) {
  .pestanas-hoy { max-width: 360px; }
  .comida-hoy > summary { cursor: default; }
  .comida-hoy > summary::after { content: none; }
  .tabla-semana { overflow: visible; }
  .tabla-semana .tabla-menu thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie); box-shadow: 0 1px 0 var(--linea-fuerte); }
  .tabla-semana .tabla-menu thead th.hoy { background: var(--acento-suave); }
}

/* --- Producción en dos pasos --- */
.comensales-linea { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.comensales-linea label { display: grid; font-size: 0.85rem; color: var(--texto); }
.comensales-linea input { width: 7rem; font-size: 1.1rem; }
.tabla-porciones { width: 100%; border-collapse: collapse; }
.tabla-porciones th { text-align: left; font-size: 0.85rem; color: var(--texto); border-bottom: 1px solid var(--linea-fuerte); padding: 0.25rem; }
.tabla-porciones td { border-bottom: 1px solid var(--linea); padding: 0.4rem 0.25rem; vertical-align: middle; }
.tabla-porciones td:last-child { width: 7.5rem; text-align: right; }
.tabla-porciones label { display: block; font-weight: 600; }
.porciones-input { width: 6.5rem; font-size: 1.4rem; text-align: center; }
.tabla-totales td:last-child { text-align: right; white-space: nowrap; }

/* --- Recetas: tabla y tarjetas (ficha 06) --- */
.filtros-recetas { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.filtros-recetas input[type=search] { flex: 1 1 14rem; min-width: 0; }
.filtros-recetas select { flex: 1 1 10rem; min-width: 0; }
.tabla-recetas a.orden { display: flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: none; font-weight: 700; }
.receta-nombre { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 600; }
.tarjetas-recetas { list-style: none; padding: 0; margin: 0; }
.tarjetas-recetas li { border-bottom: 1px solid var(--linea); }
.tarjetas-recetas a { display: flex; gap: 0.6rem; align-items: center; padding: 0.6rem 0.25rem; color: var(--tinta); text-decoration: none; min-height: 44px; }
.tarjeta-receta-texto { display: grid; gap: 0.1rem; min-width: 0; }
.tarjeta-receta-texto strong:first-child { color: var(--tinta); }
.miniatura { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radio); flex: none; background: var(--linea); }

.lista-versiones { padding-left: 1.2rem; }
.lista-versiones > li { padding: 0.5rem 0; border-top: 1px solid var(--linea); }
.cambios-version { margin: 0.25rem 0; padding-left: 1.2rem; }

/* Fotos de recetas */
.foto-principal { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radio); margin-bottom: 0.75rem; }
.galeria { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
.galeria form { margin-top: 0.25rem; }
.galeria .boton { width: 100%; }
.subir-foto label.boton { cursor: pointer; }

/* --- Ronda 2: barra superior fija y encabezado de comida que se toca completo --- */
.encabezado.fijo { position: sticky; top: 0; z-index: 20; min-height: 53px; }
.ciclo-tablas .tabla-menu thead th, .tabla-semana .tabla-menu thead th { top: 53px !important; }
.comida-hoy > summary { padding: 0.25rem 0; }
.comida-hoy > summary::after { content: "Ver ▾"; font-size: 0.9rem; color: var(--tinta); font-weight: 600; margin-left: auto; padding: 0.4rem 0.6rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; }
.comida-hoy[open] > summary::after { content: "Ocultar ▴"; }
.comida-hoy > summary .comensales { flex-basis: 100%; order: 3; }
@media (min-width: 900px) {
  /* En computadora las tres comidas van abiertas: sin «Ver / Ocultar». */
  .comida-hoy > summary::after, .comida-hoy[open] > summary::after { content: none; }
}

/* Semana en el celular: chips grandes y accesos a cada comida del día elegido. */
.chips-dias a { min-height: 48px; font-size: 0.95rem; }
.accesos-comidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; margin: 0 0 0.75rem; }
.accesos-comidas .boton { padding: 0 0.25rem; }
[id^="movil-"] { scroll-margin-top: 60px; }

/* Confirmar cambio y demás pantallas del platillo: espacio para que la barra inferior no tape. */
.contenido.panel { padding-bottom: 9rem; }

/* --- Ronda 3 --- */
/* La barra inferior respeta el borde redondeado / la barra de gestos del iPhone. */
.barra-inferior { padding-bottom: env(safe-area-inset-bottom); }
.contenido { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
/* Confirmar cambio: botón fijo abajo, grande, encima de la barra inferior y con margen seguro. */
.confirmar-fijo { position: sticky; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 5; background: var(--superficie); padding: 0.5rem 0; margin: 0.75rem -1rem 0; padding-left: 1rem; padding-right: 1rem; box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.06); }
.confirmar-fijo .boton-principal { margin-top: 0; min-height: 56px; font-size: 1.1rem; }
@media (min-width: 900px) {
  .confirmar-fijo { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}
/* «Cambiar» directo en cada platillo de Hoy y la Semana. */
.cambiar-directo { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 0.75rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; color: var(--tinta); text-decoration: none; font-size: 0.9rem; font-weight: 600; background: var(--superficie); }
.tabla-menu .cambiar-directo { padding: 0 0.5rem; font-size: 0.8rem; }

/* Aviso de comensales en una sola línea, con su enlace. */
.aviso-linea { margin: 0 0 0.75rem; padding: 0 0.75rem; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.35rem; background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: var(--radio); font-size: 0.9rem; }
.aviso-linea a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
/* Hoy en el celular: toda la franja del turno es un botón para abrir o cerrar. */
.comida-hoy { padding: 0; overflow: hidden; }
.comida-hoy > summary { padding: 0.75rem 1rem; background: var(--crema); }
.comida-hoy[open] > summary { border-bottom: 1px solid var(--linea); }
.comida-hoy > summary::after { border: none; padding: 0; }
.comida-hoy > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
.comida-hoy > .boton-principal { width: calc(100% - 2rem); margin-bottom: 1rem; }
@media (min-width: 900px) {
  .comida-hoy > summary { background: var(--superficie); }
}

/* Producción: total del día de lo buscado y desglose por día en los totales de la semana. */
.lista-total-dia { list-style: none; padding: 0; margin: 0; }
.lista-total-dia li { display: grid; padding: 0.4rem 0; border-top: 1px solid var(--linea); }
.tabla-por-dia td, .tabla-por-dia th { white-space: nowrap; text-align: right; }
.tabla-por-dia th[scope=row], .tabla-por-dia thead th:first-child { text-align: left; white-space: normal; }

/* Ciclo: la semana que se ve, con fondo fuerte y anillo; la semana de hoy, con fondo suave. */
.selector-semanas a.activa { box-shadow: 0 0 0 3px var(--acento-borde); }
.selector-semanas a.hoy:not(.activa) { background: var(--acento-suave); border-color: var(--acento-borde); }

/* Recetas: categorías como chips que se tocan. */
.chips-categorias { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.25rem 0 0.75rem; }
.chips-categorias a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.75rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--superficie); color: var(--tinta); text-decoration: none; font-size: 0.9rem; }
.chips-categorias a.activa { background: var(--activo); border-color: var(--activo); color: var(--superficie); font-weight: 700; }
@media (max-width: 899px) {
  /* En el celular las categorías van en una sola fila que se desliza con el dedo. */
  .chips-categorias { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; }
  .chips-categorias a { flex: none; }
}

/* --- Estilo Zapier (consejo, ronda 0): colores con intención y botones de la guía --- */
/* Semáforo y producido conservan su verde: es información, no adorno. */
.semaforo.bien { background: #e3f1e7; color: var(--verde); }
.producido, .baja { color: var(--verde); }
.mensaje { background: #e9f3ec; }
.deshacer { background: var(--crema); border: 1px solid var(--linea); }

/* Botones: rectángulo de 12 px. Principal = naranja; normal = contorno tinta. */
.boton, .boton-ligero { border: 1px solid var(--tinta); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); font-weight: 600; }
.boton:hover, .boton-ligero:hover { background: var(--crema); }
.boton-principal { background: var(--acento); border-color: var(--acento); color: #fffefb; font-weight: 600; font-size: 1.05rem; }
.boton-principal:hover { background: #e84700; }
input, select, textarea { border: 1px solid var(--linea-fuerte); border-radius: var(--radio-campo); background: var(--superficie); color: var(--tinta); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
a { color: var(--tinta); text-underline-offset: 3px; }

/* Títulos con la escala de la guía (Inter). */
h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.tiempo-nombre, .fuera-ciclo h3 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--texto); }

/* Encabezado: marca con su raya naranja; la sección actual subrayada en naranja. */
.encabezado { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.encabezado-nombre { font-weight: 700; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.5rem; }
.encabezado-nombre::before { content: ""; width: 14px; height: 4px; background: var(--acento); border-radius: 2px; }
.nav-arriba a { font-weight: 500; }
.nav-arriba a:hover { background: var(--crema); }
.nav-arriba a.actual { background: var(--crema); box-shadow: inset 0 -3px 0 var(--acento); font-weight: 600; }
.barra-inferior { background: var(--fondo); border-top: 1px solid var(--linea); }
.barra-inferior a { font-weight: 500; font-size: 0.95rem; }
.barra-inferior a.actual { font-weight: 700; box-shadow: inset 0 3px 0 var(--acento); }

/* Tarjetas: superficie crema sin sombra (la guía usa el contraste de fondo). */
.tarjeta { background: var(--crema); border: 1px solid var(--linea); border-radius: var(--radio); }

/* Pestañas, semanas y chips elegidos: tinta oscura (el naranja se reserva para la acción). */
.pestanas a, .selector-semanas a { border-color: var(--linea-fuerte); border-radius: var(--radio); font-weight: 500; }
.chips-dias a, .chips-categorias a { border-color: var(--linea-fuerte); border-radius: 999px; font-weight: 500; }
.pestanas a.activa, .selector-semanas a.activa, .chips-dias a.activa, .chips-categorias a.activa { background: var(--tinta); border-color: var(--tinta); color: #fffefb; }
.selector-semanas a.activa { box-shadow: 0 0 0 3px var(--acento-borde); }
.chip { background: var(--crema); border: 1px solid var(--linea); color: var(--tinta-media); }
.chip-sigue { background: var(--acento); border-color: var(--acento); color: #fffefb; font-weight: 600; }
.etiqueta-diario { border-color: var(--linea-fuerte); color: var(--texto); }

/* Tablas: líneas cálidas finas, encabezado crema. */
.tabla-menu th, .tabla-menu td, .tabla-datos th, .tabla-datos td { border-color: var(--linea); }
.tabla-menu .seccion-comida th { background: var(--tinta); color: #fffefb; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; padding: 0.4rem 0.5rem; }
.tabla-menu tbody th { font-weight: 600; }
.tabla-menu .fijo td, .tabla-menu .fijo th { color: var(--texto); }
.tabla-menu th.hoy, .tabla-semana .tabla-menu thead th.hoy { background: var(--acento-suave); box-shadow: inset 0 3px 0 var(--acento); }

/* Cambiar: contorno, claro que es botón. */
.cambiar-directo { border: 1px solid var(--linea-fuerte); border-radius: var(--radio); color: var(--tinta); background: var(--superficie); }
.cambiar-directo:hover { border-color: var(--tinta); }
.comida-hoy > summary { background: var(--crema); }
@media (min-width: 900px) { .comida-hoy > summary { background: transparent; } }

/* Avisos: ámbar cálido, separado del naranja de acción. */
.aviso-linea, .aviso-comensales { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso-texto); }
.aviso-linea a { color: var(--aviso-texto); }
.alergeno { color: #8f3a00; }

/* Platillo del día: nombre y datos a la izquierda, «Cambiar» alineado a la derecha. */
.platillo-dia { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.75rem; padding: 0.15rem 0; }
.platillo-texto { min-width: 0; }
.platillo-dia .platillo-liga { min-height: 0; display: block; font-size: 1.05rem; font-weight: 500; color: var(--tinta); padding: 0.2rem 0; }
.platillo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.85rem; }
.platillo-meta .alergeno { font-size: 0.85rem; }
.platillo-meta .chip { font-size: 0.75rem; }
.platillo-dia .marca-cambio { grid-column: 1 / -1; }
.tiempo { padding: 0.75rem 0; }
.tiempo-nombre { margin-bottom: 0.15rem; }
/* En las tablas de la Semana la celda es angosta: todo en una columna y «Cambiar» discreto. */
.tabla-menu .platillo-dia { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
.tabla-menu .platillo-dia .platillo-liga { font-size: inherit; }
.tabla-menu .cambiar-directo { justify-self: start; min-height: 32px; border: none; padding: 0; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; color: var(--texto); background: none; }
@media (max-width: 899px) { .tabla-menu .cambiar-directo { min-height: 44px; } }

/* Pestañas de pasos: texto más chico en el celular para que no se partan feo. */
@media (max-width: 899px) {
  .pestanas a { font-size: 0.9rem; line-height: 1.2; padding: 0.25rem 0.4rem; text-align: center; }
}
/* Platillo, sustitutos y confirmar: panel centrado en computadora. */
@media (min-width: 900px) {
  .contenido.panel { max-width: 640px; margin-left: auto; margin-right: auto; }
}
/* Semana en computadora: la celda solo lleva el platillo (tocarlo abre el detalle con «Cambiar»);
   el lápiz de «ajustar solo este día» va discreto en la esquina. */
@media (min-width: 900px) {
  .tabla-semana .tabla-menu .cambiar-directo { display: none; }
  .tabla-semana .tabla-menu td { position: relative; padding: 0.5rem 1.75rem 0.5rem 0.5rem; }
  .tabla-semana .tabla-menu td.todos-los-dias { padding-right: 0.5rem; }
  .tabla-semana .ajustar-dia { position: absolute; top: 0.25rem; right: 0.15rem; min-width: 32px; min-height: 32px; color: var(--texto-suave); border-radius: var(--radio-campo); font-size: 0.9rem; }
  .tabla-semana .ajustar-dia:hover { background: var(--crema); color: var(--tinta); }
}
.tabla-menu .platillo-meta .chip { font-size: 0.7rem; }

/* --- Consejo ronda 2 --- */
/* Barra inferior: ícono + etiqueta; la sección actual en naranja con fondo crema. */
.barra-inferior a { flex-direction: column; gap: 2px; min-height: 58px; font-size: 0.8rem; color: var(--texto); }
.barra-inferior svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.barra-inferior a.actual { color: var(--tinta); background: var(--crema); box-shadow: inset 0 3px 0 var(--acento); }
.barra-inferior a.actual svg { stroke: var(--acento); }
.contenido { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.boton-fijo { bottom: calc(58px + env(safe-area-inset-bottom)); }
.confirmar-fijo { bottom: calc(58px + env(safe-area-inset-bottom)); }

/* Franjas de turno en Semana y Ciclo: crema con raya naranja, no bloque negro. */
.tabla-menu .seccion-comida th { background: var(--crema); color: var(--tinta); box-shadow: inset 4px 0 0 var(--acento); font-size: 0.8rem; letter-spacing: 0.1em; padding: 0.55rem 0.75rem; border-top: 2px solid var(--linea-fuerte); }
.comida-titulo { color: var(--tinta); font-size: 0.8rem; letter-spacing: 0.1em; font-weight: 700; padding-left: 0.5rem; border-left: 4px solid var(--acento); }

/* Tablas: el platillo primero (más grande y con peso), los datos debajo, tenues. */
@media (min-width: 900px) {
  .tabla-menu { font-size: 0.9rem; }
  .tabla-menu .platillo-liga, .tabla-menu .platillo-dia .platillo-liga { font-weight: 500; color: var(--tinta); }
  .tabla-menu .platillo-meta, .tabla-menu .platillo-meta .alergeno { font-size: 0.78rem; }
  .tabla-menu .chip { font-size: 0.7rem; color: var(--texto); }
  .tabla-menu tbody th[scope=row], .tabla-menu tbody th { font-size: 0.85rem; color: var(--tinta-media); }
}
.platillo-meta .chip { color: var(--texto); }

/* «Cambiar» más ligero: crema sin borde fuerte (el naranja relleno queda para la acción principal). */
.cambiar-directo { background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); font-weight: 600; }
.tarjeta .cambiar-directo { background: var(--fondo); }

/* Ciclo: cifras del resumen grandes; el % MP del día más visible. */
.cifras dd { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cifras div:first-child dd { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
.cifras div:first-child { align-items: baseline; }
.celda-costo strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.celda-costo .semaforo { display: inline-block; margin-top: 0.15rem; font-size: 0.8rem; }
.semaforo { border-radius: 999px; padding: 0.05rem 0.55rem; }
.fila-costos td { background: var(--fondo); }

/* Celular: las 8 semanas en una sola fila que se desliza. */
@media (max-width: 899px) {
  .selector-semanas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; }
  .selector-semanas a { flex: none; }
}

/* Producción: campos de porciones firmes y legibles; tres turnos lado a lado en computadora. */
.porciones-input { min-height: 48px; border: 1.5px solid var(--tinta-media); font-weight: 600; background: var(--superficie); }
.porciones-input:focus { outline: 3px solid var(--acento); outline-offset: 1px; }
.comensales-linea input { min-height: 48px; font-size: 1.15rem; background: var(--superficie); }
.comensales-linea .aviso { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); color: var(--aviso-texto); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.85rem; font-weight: 600; }
@media (min-width: 900px) {
  .formulario-produccion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
  .formulario-produccion > :not(.turno) { grid-column: 1 / -1; }
  .formulario-produccion .tarjeta { margin: 0; }
  .formulario-produccion .boton-fijo { position: sticky; bottom: 1rem; display: flex; justify-content: flex-end; }
  .formulario-produccion .boton-fijo .boton-principal { width: auto; padding: 0 2rem; box-shadow: 0 6px 16px rgba(32, 21, 21, 0.18); }
  .tabla-porciones td:last-child { width: 6rem; }
  .porciones-input { width: 5.5rem; }
}

/* Desglose y tablas de datos: cantidades a la derecha con cifras alineadas. */
.tabla-datos { font-variant-numeric: tabular-nums; }
.tabla-datos thead th { font-size: 0.8rem; font-weight: 600; color: var(--texto); letter-spacing: 0.02em; }
.tabla-totales td:last-child, .tabla-totales th:last-child { text-align: right; }
.ingredientes li, .lista-total-dia li { font-variant-numeric: tabular-nums; }

/* Recetas: nombres sin subrayado, con peso. */
.tabla-recetas a:not(.orden), .tarjetas-recetas a { text-decoration: none; }
.receta-nombre { color: var(--tinta); }
.tarjeta-receta-texto strong:first-child { color: var(--tinta); }

/* --- Consejo ronda 3 --- */
.solo-compu-linea { display: none !important; }
@media (min-width: 900px) { .solo-compu-linea { display: inline-flex !important; } }

/* Títulos de página con más peso. */
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; }
@media (max-width: 899px) { h1 { font-size: 1.6rem; } }

/* Píldoras: nunca se parten en dos líneas. */
.chip, .semaforo, .etiqueta-diario { white-space: nowrap; }

/* Ciclo en el celular: las 8 semanas caben en una fila. */
@media (max-width: 899px) {
  .ciclo-herramientas .selector-semanas { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .ciclo-herramientas .selector-semanas a { min-width: 0; }
}

/* Recetas en el celular: nombre a la izquierda, costo a la derecha. */
.tarjetas-recetas a { align-items: flex-start; }
.tarjeta-receta-texto { flex: 1; }
.tarjeta-receta-texto .tenue { font-size: 0.85rem; }
.tarjeta-receta-texto .alergeno { font-size: 0.85rem; }
.tarjeta-receta-costo { flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; display: grid; justify-items: end; gap: 0.15rem; }
.tarjeta-receta-costo .semaforo { font-size: 0.7rem; font-weight: 600; }

/* Recetas en computadora: renglones más compactos para ver más. */
@media (min-width: 900px) {
  .tabla-recetas td, .tabla-recetas th { padding-top: 0.3rem; padding-bottom: 0.3rem; }
  .tabla-recetas .receta-nombre { min-height: 36px; }
}

/* ¿Para cuántos? en computadora: «Guardar» a todo lo ancho, debajo de los tres turnos. */
@media (min-width: 900px) {
  .formulario-produccion .boton-fijo { justify-content: stretch; }
  .formulario-produccion .boton-fijo .boton-principal { width: 100%; }
}
/* En el celular, el botón fijo queda arriba de la barra inferior con su margen. */
@media (max-width: 899px) {
  .boton-fijo { padding: 0.5rem 0; background: linear-gradient(to top, var(--fondo) 70%, transparent); }
}

/* Desglose en computadora: total del turno a la izquierda, por platillo a la derecha. */
@media (min-width: 900px) {
  .desglose-columnas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .desglose-columnas > .tarjeta { margin: 0; }
  .por-platillo > h2 { margin-top: 0.75rem; }
}
/* Secciones plegables: se nota que se abren («Ver» / «Ocultar»). */
.plegable > summary { list-style: none; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: "Ver ▾"; margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--tinta); padding: 0.3rem 0.7rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--fondo); white-space: nowrap; }
.plegable[open] > summary::after { content: "Ocultar ▴"; }
.plegable > summary { flex-wrap: wrap; }

/* % MP pendiente: el costo conocido va aparte, en texto chico (no se confunde con un %). */
.costo-conocido { display: block; font-size: 0.8rem; font-weight: 500; color: var(--texto); margin-top: 0.15rem; }
.cifras dt .tenue { font-size: 0.8rem; font-weight: 400; }
@media (max-width: 899px) {
  /* En el celular la etiqueta va arriba y el valor abajo, para que no se parta en tres renglones. */
  .cifras div { flex-direction: column; gap: 0.15rem; }
  .cifras dd { text-align: left; }
}

/* «Cambiar» dice su alcance: en el ciclo (botón) o solo este día (enlace debajo). */
.cambiar-opciones { display: grid; justify-items: center; gap: 0.1rem; }
.cambiar-directo { flex-direction: column; line-height: 1.1; padding: 0.3rem 0.75rem; min-height: 48px; }
.cambiar-directo small { font-size: 0.7rem; font-weight: 500; color: var(--texto); }
.solo-dia { font-size: 0.8rem; color: var(--texto); text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; padding: 0 0.25rem; }
.tabla-menu .cambiar-opciones { justify-items: start; }
.tabla-menu .cambiar-directo small { display: none; }
@media (min-width: 900px) {
  .tabla-semana .tabla-menu .cambiar-opciones { display: none; }
}
.leyenda-semana { font-size: 0.9rem; color: var(--texto); margin: 0 0 0.5rem; }
.ajustar-ejemplo { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-campo); }

/* ¿Para cuántos? en el celular: pestañas de turno con sus comensales. */
.selector-turno a { flex-direction: column; gap: 0; min-height: 52px; }
.selector-turno small { font-size: 0.72rem; font-weight: 500; opacity: 0.8; }
@media (max-width: 899px) {
  .selector-turno { position: sticky; top: 53px; z-index: 6; background: var(--fondo); padding: 0.4rem 0; margin-bottom: 0.5rem; }
}
.turno[hidden] { display: none !important; }

/* --- Color suave por turno (decisión de Sergio, 4-nov: «no todo gris»).
   Solo identifica el turno (raya, punto, franja); el naranja sigue siendo la acción principal. --- */
.turno-desayuno { --turno: #c48a00; --turno-suave: #fdf3da; }
.turno-comida   { --turno: #1f7a72; --turno-suave: #e2f1ef; }
.turno-cena     { --turno: #6a4c93; --turno-suave: #efe9f7; }

/* Hoy: raya de color arriba de cada tarjeta y punto junto al nombre. */
.comida-hoy[class*="turno-"] { border-top: 4px solid var(--turno); }
.comida-hoy[class*="turno-"] > summary { background: var(--turno-suave); }
@media (min-width: 900px) { .comida-hoy[class*="turno-"] > summary { background: var(--turno-suave); } }
.comida-hoy > summary h2::before, .turno > h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--turno, var(--acento)); margin-right: 0.5rem; vertical-align: middle; }

/* Semana y Ciclo: la franja de cada comida con su color. */
.tabla-menu .seccion-comida[class*="turno-"] th { background: var(--turno-suave); box-shadow: inset 5px 0 0 var(--turno); }
.tarjeta[class*="turno-"] .comida-titulo { border-left-color: var(--turno); }
.tarjeta[class*="turno-"]:not(.comida-hoy) { border-top: 4px solid var(--turno); }

/* Producción: tarjeta de cada turno y sus pestañas. */
.pestanas a[class*="turno-"] { box-shadow: inset 0 -3px 0 var(--turno); }
.pestanas a[class*="turno-"].activa { background: var(--tinta); box-shadow: inset 0 -4px 0 var(--turno); }

/* --- Después de la prueba de uso (ronda 4) --- */
/* Hoy: accesos a cada comida con su color, y leyenda de qué hace cada cosa. */
.accesos-hoy .boton { border-color: var(--linea-fuerte); box-shadow: inset 0 -3px 0 var(--turno, transparent); font-weight: 600; min-height: 48px; }
.leyenda-hoy-cambio { font-size: 0.85rem; color: var(--texto); margin: 0 0 0.6rem; }
[id^="hoy-"] { scroll-margin-top: 64px; }
/* Encabezado de cada comida: «Ver» grande y fácil de tocar. */
.comida-hoy > summary { min-height: 64px; }
.comida-hoy > summary::after { font-size: 0.95rem; padding: 0.45rem 0.8rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--fondo); }
/* Renglones de Hoy más compactos. */
.comida-hoy .tiempo { padding: 0.55rem 0; }
.cambiar-directo { min-height: 44px; }
/* Ciclo: las cifras del resumen no se parten. */
.fuera-ciclo .cifras div:first-child dd { white-space: nowrap; }
.fuera-ciclo .cifras dd { overflow-wrap: anywhere; min-width: 0; }
/* Detalle del platillo en computadora: un poco más ancho. */
@media (min-width: 900px) { .contenido.panel { max-width: 760px; } }
.nota-recalcula { font-size: 0.8rem; margin: 0.25rem 0 0.5rem; }
.comensales-linea input::placeholder { color: var(--linea-fuerte); }

/* --- Recetas: categoría con desplegable en el celular (Sergio, 4-nov: las burbujas
   escondían 16 de 19 categorías hacia la derecha). En la compu siguen las burbujas. --- */
.filtros-recetas .selector-categoria { flex: 1 1 100%; }
@media (max-width: 899px) { .chips-categorias { display: none; } }
@media (min-width: 900px) { .filtros-recetas .selector-categoria { display: none; } }