/* ===== Recetario — estilos mobile-first ===== */
:root {
  --verde: #3f7d4e;
  --verde-claro: #e8f3ea;
  --verde-osc: #2c5a38;
  --texto: #232826;
  --gris: #6b746e;
  --texto-suave: #555;     /* notas y descripciones (gris de texto) */
  --borde: #e2e6e3;
  --fondo: #fafbfa;
  --blanco: #fff;          /* superficies (tarjetas, cabecera, menú) */
  --sombra: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
  --radio: 14px;
  --max: 1100px;
}

/* Paleta oscura: se aplica cuando el usuario elige "oscuro" explícitamente, o
   cuando está en "auto" y el sistema está en oscuro. (mismas variables, así el
   resto del CSS no cambia). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --verde: #5aa66c;
    --verde-claro: #1e2a22;
    --verde-osc: #8fd7a0;
    --texto: #e7ebe8;
    --gris: #9aa39d;
    --texto-suave: #b3bbb5;
    --borde: #313a34;
    --fondo: #141815;
    --blanco: #1c211e;
    --sombra: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  }
}
:root[data-tema="oscuro"] {
  --verde: #5aa66c;
  --verde-claro: #1e2a22;
  --verde-osc: #8fd7a0;
  --texto: #e7ebe8;
  --gris: #9aa39d;
  --texto-suave: #b3bbb5;
  --borde: #313a34;
  --fondo: #141815;
  --blanco: #1c211e;
  --sombra: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
  padding-bottom: 88px; /* hueco para la barra inferior */
}

/* Botones y controles de formulario NO heredan color por defecto: lo forzamos
   para que el modo oscuro afecte también al logo, menú, buscador y selectores. */
button, input, select, textarea { color: inherit; }
/* Enlaces: en verde del tema (el azul por defecto no se ve en modo oscuro). */
a { color: var(--verde); }
a:hover { color: var(--verde-osc); }
/* Pista al navegador para que pinte los controles nativos en el esquema actual.
   Por defecto "light dark" → en auto sigue al sistema; los temas forzados mandan. */
:root { color-scheme: light dark; }
:root[data-tema="oscuro"] { color-scheme: dark; }
:root[data-tema="claro"] { color-scheme: light; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}
.cabecera-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: .7rem 1rem;
}
.logo {
  margin: 0 0 .6rem;
  font-size: 1.35rem;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.logo .ico { color: var(--verde); width: 1.5rem; height: 1.5rem; flex: none; }
/* Cabecera: fila superior (logo + tema + menú) y, debajo, el buscador. */
.cabecera-inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; }
/* La fila superior NO envuelve: el logo se encoge (texto con elipsis) para que
   los botones de tema y menú queden siempre a la derecha, en la misma línea. */
.cab-fila {
  flex: 1 1 100%;
  min-width: 0;          /* permite que el logo interior se encoja */
  display: flex;
  align-items: center;
  gap: .6rem;
  position: relative;   /* ancla del menú desplegable */
}
.logo { flex: 1 1 auto; min-width: 0; }
.logo-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-tema, .menu-wrap { flex: 0 0 auto; }   /* nunca se encogen */

/* Botón de tema (sol/luna/auto) */
.btn-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 .6rem;
  padding: .4rem .55rem;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--verde-osc);
  cursor: pointer;
}
.btn-tema:hover { background: var(--verde-claro); }

/* Menú hamburguesa */
.menu-wrap { position: relative; margin: 0 0 .6rem; }
.btn-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  padding: .4rem .55rem;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--verde-osc);
  cursor: pointer;
}
.btn-menu:hover { background: var(--verde-claro); }
.menu {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 30;
  min-width: 220px;
  max-width: calc(100vw - 1.5rem);   /* nunca más ancho que el viewport */
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  padding: .35rem;
  display: flex;
  flex-direction: column;
}
.menu[hidden] { display: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-align: left;
  font: inherit;
  padding: .65rem .7rem;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.menu-item .ico { color: var(--verde-osc); }
.menu-item:hover { background: var(--verde-claro); }
.menu-sep { border: none; border-top: 1px solid var(--borde); margin: .3rem .4rem; }
/* El buscador empieza en una fila nueva, con un respiro respecto a logo+menú. */
.zona-buscador-full { flex: 1 1 100%; margin-top: .3rem; }

/* En pantallas anchas (PC/tablet): barra de navegación horizontal en lugar de
   menú hamburguesa. Todo con CSS; el JS del toggle solo actúa en móvil. */
@media (min-width: 768px) {
  .menu-wrap { position: static; margin: 0; flex: 1 1 100%; }  /* barra en su propia fila */
  .logo { flex: 0 0 auto; }                    /* el logo no se estira: deja sitio a la barra */
  .btn-menu { display: none; }                 /* sin hamburguesa */
  .menu, .menu[hidden] {                        /* siempre visible, en línea y con wrap */
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;                            /* si no caben, pasan a otra fila */
    align-items: center;
    gap: .2rem .3rem;
    min-width: 0;
    margin-top: .4rem;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .menu-item { padding: .45rem .7rem; border-radius: 8px; }
  .menu-item[data-menu="vaciar"] { display: none; }   /* 'Vaciar' vive en la barra de selección */
  .menu-sep { display: none; }
}
.buscador { display: flex; gap: .5rem; flex-wrap: wrap; }
.buscador[hidden] { display: none; }   /* el atributo hidden debe ganar a display:flex */
.buscador > input { flex: 1 1 100%; }
.filtros-cat { display: flex; gap: .4rem; flex: 1 1 100%; flex-wrap: wrap; }
.filtros-cat select { flex: 1 1 0; min-width: 110px; }
.buscador input,
.buscador select {
  min-width: 0;
  padding: .7rem .8rem;
  font-size: 1rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--blanco);
}
.buscador input:focus,
.buscador select:focus {
  outline: 2px solid var(--verde);
  outline-offset: 0;
}

/* ---------- Contenido ---------- */
.contenido { max-width: var(--max); margin: 0 auto; padding: 1rem; }
.contador { color: var(--gris); font-size: .9rem; margin: .2rem 0 1rem; }

/* ---------- Grid de recetas ---------- */
.grid-recetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 560px) {
  .grid-recetas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .grid-recetas { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  position: relative;
}
.tarjeta-img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background: var(--verde-claro);
  cursor: pointer;
}
/* Placeholder con emoji cuando no hay imagen */
.tarjeta-ph,
.detalle-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--verde-claro), var(--borde));
  color: var(--verde-osc);
}
.tarjeta-ph { font-size: 3.2rem; }
.detalle-ph { font-size: 5rem; }

.tarjeta-cuerpo { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.tarjeta-titulo {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  cursor: pointer;
}
.tarjeta-meta { font-size: .82rem; color: var(--gris); display: flex; flex-wrap: wrap; gap: .5rem; }
.tarjeta-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag {
  background: var(--verde-claro);
  color: var(--verde-osc);
  border-radius: 999px;
  padding: .12rem .6rem;
  font-size: .75rem;
}

/* Checkbox de selección (área táctil amplia) */
.sel-receta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .6rem;
  font-size: .9rem;
  cursor: pointer;
  user-select: none;
}
.sel-receta input { width: 22px; height: 22px; accent-color: var(--verde); cursor: pointer; }
.tarjeta-al-menu {
  align-self: flex-start;
  margin-top: .3rem; padding: .35rem .6rem;
  font-size: .82rem; font: inherit; font-size: .82rem;
  background: var(--verde-claro); color: var(--verde-osc);
  border: none; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
}
.tarjeta-al-menu:hover { background: #d9ebdd; }

/* ---------- Botones ---------- */
.btn-primario,
.btn-secundario,
.btn-whatsapp {
  font: inherit;
  border: none;
  border-radius: 10px;
  padding: .7rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
}
.btn-primario { background: var(--verde); color: #fff; }
.btn-primario:hover { background: var(--verde-osc); }
.btn-secundario { background: var(--verde-claro); color: var(--verde-osc); }
.btn-whatsapp { background: #25d366; color: #fff; display: inline-flex; align-items: center; gap: .4rem; }
.btn-whatsapp:hover { background: #1da851; }
.icono-wa { vertical-align: middle; flex: none; }

/* ---------- Iconos SVG (estilo línea) ---------- */
.ico { flex: none; vertical-align: -.15em; }
/* Botones con icono + texto */
.btn-ico { display: inline-flex; align-items: center; gap: .45rem; }
/* Títulos (h2/h3) con icono delante */
.titulo-ico { display: flex; align-items: center; gap: .5rem; }
.titulo-ico .ico { width: 1.1em; height: 1.1em; }
.enlace-clear {
  background: none;
  border: none;
  color: var(--gris);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Barra de selección inferior ---------- */
.barra-seleccion {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: var(--blanco);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
  display: flex;
  align-items: center;
  gap: .6rem;
  /* contenido alineado con el resto de la web; el fondo ocupa todo el ancho */
  max-width: var(--max);
  margin: 0 auto;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0));
}
/* En pantallas anchas, recuadra la barra centrada en lugar de pegarla a los bordes */
@media (min-width: 1140px) {
  .barra-seleccion {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    border: 1px solid var(--borde);
    border-radius: 14px 14px 0 0;
  }
}
.barra-seleccion .enlace-clear { flex: none; font-size: .9rem; }
/* Resumen: ocupa el espacio central, en una sola línea, con el nº destacado. */
.barra-seleccion .resumen-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  font: inherit;
  font-size: .95rem;
  text-align: left;
  background: none;
  border: none;
  color: var(--verde-osc);
  cursor: pointer;
  font-weight: 600;
  padding: .3rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra-seleccion .resumen-btn .sel-num { font-size: 1.15rem; font-weight: 700; }
.barra-seleccion .resumen-btn .sel-txt {
  font-weight: 500; color: var(--gris); min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.barra-seleccion .resumen-btn .sel-chevron { flex: none; color: var(--gris); font-size: 1.1rem; }
.barra-seleccion .resumen-btn:hover .sel-txt { text-decoration: underline; }
/* En pantallas muy estrechas, deja solo "N ›" para que el texto no se trunque feo. */
@media (max-width: 380px) {
  .barra-seleccion .resumen-btn .sel-txt { display: none; }
}
/* Botón "Generar lista": no se encoge, icono separado del texto. */
.barra-seleccion .btn-primario {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

/* ---------- Vista: recetas seleccionadas ---------- */
.seleccion { max-width: 760px; margin: 0 auto; }
.sel-lista { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: .7rem; }
.sel-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .5rem .7rem;
  box-shadow: var(--sombra);
}
.sel-item-img {
  width: 64px; height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
}
.sel-item-ph { font-size: 1.8rem; }
.sel-item-info { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; }
.sel-item-nombre { font-weight: 600; line-height: 1.25; }
.sel-item-meta { color: var(--gris); font-size: .82rem; }
.btn-quitar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde-osc);
  cursor: pointer;
  line-height: 1;
}
.btn-quitar:hover { background: #f3d6d6; color: #a33; }

/* ---------- Detalle ---------- */
.detalle { max-width: 760px; margin: 0 auto; }
.detalle-top { display: flex; justify-content: space-between; align-items: center; }
.volver { background: none; border: none; color: var(--verde); font: inherit; cursor: pointer; padding: .4rem 0; }
.btn-editar { background: var(--verde-claro); color: var(--verde-osc); border: none; border-radius: 10px; padding: .5rem .9rem; font: inherit; font-weight: 600; cursor: pointer; }
.btn-editar:hover { background: var(--verde-claro); }

/* ---------- Ayuda: cómo instalar la PWA ---------- */
.ayuda { max-width: 680px; margin: 0 auto; }
.ayuda h2 { margin: .4rem 0 1rem; }
.ayuda-ok {
  background: var(--verde-claro); color: var(--verde-osc);
  padding: .7rem .9rem; border-radius: 10px; font-weight: 600;
}
.ayuda-paso {
  border: 1px solid var(--borde); border-radius: 12px;
  padding: .2rem 1rem 1rem; margin: 1rem 0;
}
.ayuda-paso h3 { margin: 1rem 0 .4rem; }
.ayuda-paso ol { margin: 0; padding-left: 1.3rem; line-height: 1.7; }
.ayuda-paso li { margin: .25rem 0; }
.ayuda-icono { display: inline-flex; vertical-align: -.25em; color: #007aff; }   /* azul iOS */
.ayuda-nota { color: var(--texto-suave); font-size: .92rem; margin-top: 1rem; }

/* ---------- Guía de uso ---------- */
.guia { max-width: 720px; margin: 0 auto; }
.guia h2 { margin: .4rem 0 .8rem; }
.guia-intro {
  background: var(--verde-claro); color: var(--verde-osc);
  padding: .9rem 1rem; border-radius: 12px; line-height: 1.6;
}
.guia-seccion { margin: 1.6rem 0; }
.guia-seccion h3 { margin: 0 0 .5rem; }
.guia-seccion ul { margin: 0 0 .8rem; padding-left: 1.2rem; line-height: 1.7; }
.guia-seccion li { margin: .35rem 0; }
.guia-nota { color: var(--texto-suave); font-size: .93rem; }
.guia-img {
  display: block; width: 100%; max-width: 320px; height: auto;
  border: 1px solid var(--borde); border-radius: 12px; margin-top: .4rem;
}

/* ---------- Menú semanal ---------- */
.menu-semanal { max-width: var(--max); margin: 0 auto; }
.menu-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.menu-cabecera h2 { margin: .4rem 0; }
.menu-ayuda { color: var(--texto-suave); font-size: .92rem; margin: 0 0 1rem; }
/* Móvil: cada día apilado, con sus 4 comidas en filas. */
.semana { display: flex; flex-direction: column; gap: 1rem; }
.dia-menu { border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; }
.dia-titulo {
  margin: 0; padding: .4rem .5rem .4rem .8rem;
  background: var(--verde-claro); color: var(--verde-osc);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.dia-titulo h3 { margin: 0; font-size: 1rem; }
.dia-vaciar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: none; color: var(--verde-osc); cursor: pointer;
}
.dia-vaciar:hover { background: #f3d6d6; color: #a33; }
.comidas { display: flex; flex-direction: column; }
.comida { display: flex; align-items: stretch; gap: .6rem; padding: .5rem .8rem; border-top: 1px solid var(--borde); }
.comida-etiqueta {
  flex: 0 0 5.5rem; align-self: center;
  font-size: .85rem; font-weight: 600; color: var(--gris);
}
/* Celda: receta asignada o botón "+ Añadir". */
/* La celda apila sus platos y, si caben más, el botón "+ Añadir". */
.celda-menu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.celda-plato { display: flex; align-items: center; gap: .5rem; }
.celda-receta {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem;
  background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left;
}
.celda-img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none; }
.celda-img.celda-ph { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--verde-claro); }
.celda-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.celda-quitar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde-osc); cursor: pointer;
}
.celda-quitar:hover { background: #f3d6d6; color: #a33; }
.celda-anadir {
  display: inline-flex; align-items: center; gap: .35rem; width: 100%;
  padding: .5rem .7rem;
  background: none; border: 1px dashed var(--borde); border-radius: 10px;
  color: var(--gris); font: inherit; cursor: pointer;
}
.celda-anadir:hover { border-color: var(--verde); color: var(--verde-osc); }

/* Ancho (tablet/PC): los días en rejilla de columnas. */
@media (min-width: 768px) {
  .semana { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
}
@media (min-width: 1100px) {
  .semana { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Modal (selector de receta / día-comida) ---------- */
body.modal-abierto { overflow: hidden; }
.modal-fondo {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.modal-fondo[hidden] { display: none; }
.modal-caja {
  background: var(--blanco); color: var(--texto);
  width: 100%; max-width: 540px; max-height: 85vh;
  border-radius: 16px 16px 0 0;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; gap: .7rem;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
}
@media (min-width: 560px) {
  .modal-fondo { align-items: center; padding: 1rem; }
  .modal-caja { border-radius: 16px; }
}
.modal-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.modal-cab h3 { margin: 0; font-size: 1.1rem; }
.modal-cab small { color: var(--texto-suave); font-weight: 400; }
.modal-cerrar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde-osc); cursor: pointer;
}
.modal-buscar {
  width: 100%; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--blanco);
}
.modal-buscar:focus { outline: 2px solid var(--verde); }
.modal-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.modal-item {
  width: 100%; display: flex; align-items: center; gap: .7rem;
  padding: .5rem; background: none; border: none; border-radius: 10px;
  font: inherit; color: var(--texto); cursor: pointer; text-align: left;
}
.modal-item:hover { background: var(--verde-claro); }
.modal-item-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.modal-item-img.modal-item-ph { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--verde-claro); }
.modal-item-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-item-tag {
  flex: none; font-size: .72rem; font-weight: 600;
  background: var(--verde-claro); color: var(--verde-osc);
  padding: .15rem .5rem; border-radius: 999px;
}
.modal-vacio { color: var(--gris); padding: 1rem; text-align: center; }
.modal-campos { display: flex; flex-direction: column; gap: .6rem; }
.modal-campos label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; color: var(--verde-osc); }
.modal-campos select { padding: .6rem .7rem; font: inherit; border: 1px solid var(--borde); border-radius: 10px; background: var(--blanco); color: inherit; }

/* ---------- Edición de receta ---------- */
.edicion .campo { display: block; margin: 1rem 0; }
.edicion .campo > span { display: block; font-weight: 600; margin-bottom: .3rem; color: var(--verde-osc); }
.edicion input, .edicion textarea, .edicion select {
  width: 100%; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--blanco);
}
.edicion input:focus, .edicion textarea:focus, .edicion select:focus { outline: 2px solid var(--verde); }
.chips-edit { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.chip-edit { background: var(--verde-claro); color: var(--verde-osc); border-radius: 999px; padding: .2rem .3rem .2rem .7rem; font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; }
.chip-edit button { border: none; background: none; color: var(--verde-osc); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; }
.chip-edit button:hover { color: #a33; }
.add-cat { display: flex; gap: .4rem; flex-wrap: wrap; }
.add-cat select, .add-cat input { flex: 1 1 130px; }
.add-cat button { flex-shrink: 0; }

/* Foto de la receta (alta/edición) */
.edicion input[type="file"][hidden] { display: none; }   /* el input real va oculto */
.ed-foto { margin-bottom: .6rem; }
.ed-foto-preview {
  width: 100%; max-width: 320px; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 12px; border: 1px solid var(--borde);
  display: block;
}
.ed-foto-vacia {
  width: 100%; max-width: 320px; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--gris); background: var(--verde-claro);
  border: 1px dashed var(--borde); border-radius: 12px;
}
.ed-foto-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ed-foto-btn { cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.ed-foto-btn input { width: auto; }   /* anula el width:100% de .edicion input */
.fila-ing { display: flex; gap: .4rem; margin-bottom: .4rem; align-items: center; }
.fila-ing .ed-cant { flex: 0 0 64px; }
.fila-ing .ed-uni { flex: 0 0 80px; }
.fila-ing .ed-nom { flex: 1 1 auto; }
.fila-ing .btn-quitar { flex-shrink: 0; }
.detalle-img { width: 100%; border-radius: var(--radio); aspect-ratio: 16/9; object-fit: cover; margin: .5rem 0 1rem; }
.detalle h2 { margin: .2rem 0; }
.detalle-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--gris); font-size: .9rem; margin-bottom: 1rem; }
.detalle-desc { color: var(--texto-suave); }
.bloque { margin-top: 1.6rem; }
.bloque h3 { border-bottom: 2px solid var(--verde-claro); padding-bottom: .3rem; }
.lista-ing { list-style: none; padding: 0; margin: 0; }
.lista-ing li { padding: .5rem 0; border-bottom: 1px dashed var(--borde); }
.lista-ing .cant { font-weight: 600; color: var(--verde-osc); }
.lista-ing .nota { color: var(--gris); font-size: .85rem; }
ol.pasos { padding-left: 1.3rem; }
ol.pasos li { padding: .35rem 0; }
.nutri { display: flex; flex-wrap: wrap; gap: .6rem; }
.nutri span { background: var(--verde-claro); color: var(--verde-osc); border-radius: 8px; padding: .3rem .6rem; font-size: .85rem; }

/* ---------- Lista de la compra ---------- */
.compra { max-width: 760px; margin: 0 auto; }
.compra h2 { margin-top: .2rem; }
.compra .recetas-incluidas { background: var(--verde-claro); border-radius: var(--radio); padding: .8rem 1rem; margin-bottom: 1.4rem; }
.compra .recetas-incluidas ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.lista-compra { list-style: none; padding: 0; margin: 0; }
.lista-compra li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .2rem;
  border-bottom: 1px solid var(--borde);
}
.lista-compra .nombre-ing { flex: 1; }
.lista-compra .cant { font-weight: 600; min-width: 70px; color: var(--verde-osc); }
.lista-compra .casilla { display: none; }   /* recuadro solo para impresión */
.acciones-compra { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.2rem 0; }
.subtitulo-sin { margin-top: 1.4rem; color: var(--gris); font-size: .95rem; }

/* Añadir ingrediente a mano */
.btn-quitar-extra {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--gris);
  cursor: pointer;
  padding: 0 .3rem;
}
.btn-quitar-extra:hover { color: #a33; }
.form-extra {
  display: flex;
  gap: .5rem;
  margin-top: .6rem;
  flex-wrap: wrap;
}
.form-extra .extra-cant { flex: 0 0 70px; }
.form-extra .extra-nombre { flex: 1 1 140px; min-width: 0; }
.form-extra input {
  padding: .6rem .7rem;
  font-size: 1rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.form-extra input:focus { outline: 2px solid var(--verde); }
.form-extra button { flex-shrink: 0; }

.aviso { color: var(--gris); text-align: center; padding: 2rem 1rem; }

/* ---------- Impresión / PDF (compacto) ---------- */
@media print {
  @page { margin: 1cm; }
  html, body { height: auto !important; }
  body { padding: 0; background: #fff; font-size: 10pt; }
  .cabecera, .barra-seleccion, .acciones-compra, .volver,
  .form-extra, .btn-quitar-extra,
  #vista-listado, #vista-detalle, #vista-seleccion { display: none !important; }
  /* Al imprimir el menú, deja SOLO el menú en el flujo (evita una página en blanco
     extra por otras vistas/altura residual); el resto del tiempo, oculta el menú. */
  body:not(.print-menu) #vista-menu { display: none !important; }
  body.print-menu > *:not(.contenido),
  body.print-menu .contenido > *:not(#vista-menu) { display: none !important; }
  body.print-menu #vista-menu { display: block !important; }
  .contenido { max-width: none; padding: 0; }
  .compra { max-width: none; }
  .compra h2 { font-size: 13pt; margin: 0 0 .3rem; }

  /* Cabecera de recetas: compacta, en línea */
  .compra .recetas-incluidas {
    background: none;
    border: 1px solid #ccc;
    padding: .3rem .5rem;
    margin-bottom: .5rem;
    font-size: 9pt;
  }
  .compra .recetas-incluidas ul { columns: 2; margin: .2rem 0 0; }
  .compra .recetas-incluidas li { break-inside: avoid; }

  /* Lista de ingredientes a 3 columnas, fuente pequeña */
  .lista-compra {
    columns: 3;
    column-gap: 1.2rem;
    font-size: 9pt;
  }
  .lista-compra li {
    break-inside: avoid;
    border-bottom: none;
    padding: 1px 0;
    gap: .35rem;
    align-items: baseline;
  }
  .lista-compra .casilla {
    display: inline-block;
    width: 9pt; height: 9pt;
    border: 1px solid #333;
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: .15rem;
  }
  .lista-compra .cant { min-width: 0; margin-right: .2rem; }
  .subtitulo-sin { margin: .6rem 0 .2rem; font-size: 9pt; }
  a[href]::after { content: ""; }

  /* ----- Impresión del MENÚ SEMANAL (body.print-menu) ----- */
  /* Horizontal y compacto para que la semana entera quepa en una hoja. */
  body.print-menu .menu-cabecera,
  body.print-menu .menu-ayuda,
  body.print-menu #menu-acciones,
  body.print-menu .celda-anadir,
  body.print-menu .celda-quitar,
  body.print-menu .dia-vaciar { display: none !important; }
  body.print-menu .menu-semanal::before {
    content: "Menú semanal"; display: block;
    font-size: 12pt; font-weight: 700; margin: 0 0 .25rem;
  }
  /* Rejilla de 7 columnas (una por día); cada día se apila en vertical. */
  body.print-menu .semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3pt; }
  body.print-menu .dia-menu { border: 1px solid #333; border-radius: 0; break-inside: avoid; }
  body.print-menu .dia-titulo { background: none; border-bottom: 1px solid #333; padding: 2pt 3pt; }
  body.print-menu .dia-titulo h3 { font-size: 8pt; }
  /* Cada comida en bloque vertical (etiqueta encima del plato) para columnas estrechas. */
  body.print-menu .comida { flex-direction: column; padding: 2pt 3pt; border-top: none; gap: 0; align-items: stretch; }
  body.print-menu .comida-etiqueta { flex: none; font-size: 6.5pt; text-transform: uppercase; color: #555; }
  body.print-menu .celda-menu { gap: 0; }
  body.print-menu .celda-img { display: none; }   /* sin miniaturas al imprimir */
  body.print-menu .celda-receta { display: block; }
  body.print-menu .celda-nombre { white-space: normal; font-size: 7.5pt; line-height: 1.15; }
  body.print-menu .celda-plato { display: block; margin-bottom: 1pt; }
  /* las celdas/comidas/días vacíos no ocupan en el PDF */
  body.print-menu .celda-menu.vacia { display: none; }
  body.print-menu .comida:has(.celda-menu.vacia) { display: none; }
  body.print-menu .dia-menu:not(:has(.celda-menu.llena)) { display: none; }
}