/* ============================================================================
 * app.css — estilos. Sin framework, sin build, sin descargas.
 * Sistema: variables CSS + grid + tipografía del sistema.
 * ==========================================================================*/

:root {
  --fondo: #0f1412;
  --fondo-2: #161e1b;
  --fondo-3: #1e2926;
  --borde: #2b3a35;
  --texto: #e8efec;
  --texto-suave: #9db0a9;
  --acento: #4ade80;
  --acento-suave: #1c3b2c;
  --aviso: #fbbf24;
  --error: #f87171;
  --info: #60a5fa;
  --radio: 12px;
  --radio-s: 8px;
  --sombra: 0 2px 12px rgba(0, 0, 0, .35);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.02em; }
h2 { font-size: 1.05rem; letter-spacing: -.01em; }
h3 { font-size: .98rem; }
small { font-weight: 400; color: var(--texto-suave); font-size: .8em; }
code { background: var(--fondo-3); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
pre { background: var(--fondo-3); padding: 1rem; border-radius: var(--radio-s); overflow: auto; }

/* ------------------------------------------------------------ barra superior */

.barra-superior {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .7rem 1.5rem;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: wrap;
}

.marca { display: flex; align-items: center; gap: .5rem; color: var(--texto); font-size: 1.05rem; }
.marca:hover { text-decoration: none; }
.marca-icono { font-size: 1.4rem; }
.marca-texto strong { color: var(--acento); }

.nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }

.nav-link {
  padding: .4rem .8rem;
  border-radius: var(--radio-s);
  color: var(--texto-suave);
  font-size: .9rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--fondo-3); color: var(--texto); text-decoration: none; }
.nav-link.activo { background: var(--acento-suave); color: var(--acento); }

.perfil-activo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--texto-suave);
  padding: .3rem .7rem; border: 1px solid var(--borde); border-radius: 999px;
}
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }

/* --------------------------------------------------------------------- vista */

.vista { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }

.cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.cabecera-receta { margin-bottom: 1rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .09em; font-size: .72rem;
  font-weight: 600; color: var(--acento); margin: 0 0 .3rem;
}
.subtitulo { color: var(--texto-suave); margin: .2rem 0 0; font-size: .9rem; }

.medidor {
  display: flex; flex-direction: column; align-items: flex-end;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .6rem 1.1rem;
}
.medidor-valor { font-size: 1.6rem; font-weight: 700; color: var(--acento); line-height: 1; }
.medidor-label { font-size: .72rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; }

.cargando, .vacio { color: var(--texto-suave); padding: 2rem 0; }

/* -------------------------------------------------------------------- chips */

.meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }

.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .74rem; font-weight: 500;
  padding: .18rem .5rem; border-radius: 999px;
  background: var(--fondo-3); color: var(--texto-suave);
  border: 1px solid var(--borde); white-space: nowrap;
}
.chip-metodo { background: #1e2b3a; color: #93c5fd; border-color: #2a3d52; }
.chip-nutri { background: var(--acento-suave); color: var(--acento); border-color: #2a5540; }
.chip-alergeno { background: #3a2a1e; color: #fdba74; border-color: #52392a; }
.chip-momento { background: #2a1e3a; color: #d8b4fe; border-color: #3d2a52; }
.chip-alt { background: #232b26; color: #86efac; border-color: #2f4a3a; border-style: dashed; }
.chip-complejidad { background: #2b2a1e; color: #fde68a; border-color: #4a4630; }

/* ------------------------------------------------------------- perfiles */

.selector-perfil {
  background: var(--fondo-3); border: 1px solid var(--borde); color: var(--texto);
  border-radius: var(--radio-s); font-family: inherit; font-size: .85rem;
  padding: .25rem .5rem; width: auto; min-width: 110px;
}

.rejilla-perfiles {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  margin-bottom: 1.5rem;
}

.tarjeta-perfil {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.1rem;
}
.tarjeta-perfil.perfil-activo { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento-suave); }
.tarjeta-perfil header { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.tarjeta-perfil h2 { margin: 0; font-size: 1.05rem; }
.insignia-activo { background: var(--acento-suave); color: var(--acento); }

.datos-perfil { list-style: none; padding: 0; margin: 0 0 .9rem; }
.datos-perfil li {
  display: flex; justify-content: space-between; gap: .8rem; align-items: baseline;
  padding: .28rem 0; border-bottom: 1px dashed var(--borde); font-size: .83rem;
}
.datos-perfil li span { color: var(--texto-suave); }
.datos-perfil li strong { text-align: right; font-weight: 600; }

.acciones-perfil { display: flex; flex-wrap: wrap; gap: .4rem; }
.acciones-perfil .boton { font-size: .78rem; padding: .35rem .6rem; }

.quien { color: var(--aviso); font-size: .78rem; font-style: italic; }

.opcion-aviso { border-color: #4a3f26; }
.contador {
  font-size: .72rem; font-weight: 700; color: var(--acento);
  background: var(--acento-suave); border-radius: 999px; padding: .05rem .45rem;
  margin-left: .3rem; white-space: nowrap;
}
.texto-aviso { color: var(--aviso); }

/* ------------------------------------------- niveles del motor de menús */

.rejilla-niveles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.nivel-ok { border-left: 3px solid var(--acento); }
.nivel-aviso { border-left: 3px solid var(--aviso); }

.lista-compacta { list-style: none; padding: 0; margin: .6rem 0 0; }
.lista-compacta li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .3rem 0; border-bottom: 1px dashed var(--borde); font-size: .86rem;
}
.lista-compacta li:last-child { border-bottom: none; }
.mini { font-size: .74rem; color: var(--texto-suave); text-align: right; white-space: nowrap; }

.tarjeta-receta.requiere-tiempo { opacity: .85; border-color: #4a3f26; }
.insignia-tiempo { background: #3a3020; color: var(--aviso); }

/* --------------------------------------------------------------- vista: hoy */

.lista-comidas { display: flex; flex-direction: column; gap: .6rem; }

.tarjeta-comida {
  display: grid; grid-template-columns: 120px 1fr; gap: 1rem;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1rem 1.2rem;
}
.comida-hora {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--acento); padding-top: .2rem;
}
.comida-cuerpo h3 { margin-bottom: .1rem; }
.tecnica { color: var(--texto-suave); font-size: .85rem; margin: .4rem 0 0; font-style: italic; }

/* ------------------------------------------------------------- vista: semana */

.rejilla-semana {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.columna-dia {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .9rem;
}
.columna-dia h2 { color: var(--acento); font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; }
.dia-total { font-size: .75rem; color: var(--texto-suave); margin: 0 0 .7rem; }

.celda-comida {
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--fondo-3); border-radius: var(--radio-s);
  padding: .55rem .7rem; margin-bottom: .4rem;
  color: var(--texto); border: 1px solid transparent;
  transition: border-color .15s, transform .1s;
}
.celda-comida:hover { border-color: var(--acento); text-decoration: none; transform: translateX(2px); }
.celda-momento { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--acento); font-weight: 700; }
.celda-nombre { font-size: .85rem; line-height: 1.3; }
.celda-meta { font-size: .72rem; color: var(--texto-suave); }

.panel-totales { margin-top: 1.5rem; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem; }

/* ------------------------------------------------------------------- tablas */

.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th, .tabla td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 600; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla-nutri td:last-child { text-align: right; font-weight: 600; color: var(--acento); }
.celda-motivo { color: var(--texto-suave); font-size: .82rem; }

/* ---------------------------------------------------------- vista: recetas */

.barra-filtros { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.barra-filtros input, .barra-filtros select { flex: 1 1 200px; }

input[type="text"], input[type="search"], input[type="number"], select {
  background: var(--fondo-3); border: 1px solid var(--borde); color: var(--texto);
  padding: .5rem .7rem; border-radius: var(--radio-s); font-size: .9rem; font-family: inherit;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
input[type="range"] { width: 100%; accent-color: var(--acento); }

.resultado-filtro { font-size: .82rem; color: var(--texto-suave); margin: 0 0 .8rem; }

.rejilla-recetas { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.tarjeta-receta {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1rem; transition: border-color .15s;
}
.tarjeta-receta:hover { border-color: var(--acento); }
.tarjeta-receta a { color: var(--texto); display: block; }
.tarjeta-receta a:hover { text-decoration: none; }
.tarjeta-receta.no-apta { opacity: .62; border-style: dashed; }
.receta-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.insignia { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .45rem; border-radius: 4px; }
.insignia-bloqueo { background: #3a1e1e; color: var(--error); }
.motivo-bloqueo { font-size: .78rem; color: var(--error); margin: .5rem 0 0; }

/* ------------------------------------------------------ vista: receta detalle */

.migas { font-size: .85rem; margin-bottom: .8rem; }

.dos-columnas { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }

.bloque {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.1rem; margin-bottom: 1rem;
}
.bloque h2 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.bloque h3 { margin-top: 1.2rem; }
.bloque-tecnica { border-left: 3px solid var(--acento); }
.bloque-tecnica p { margin: 0; font-style: italic; color: var(--texto-suave); }
.bloque-critico { border-left: 3px solid var(--error); }

.pasos { padding-left: 1.3rem; margin: 0; }
.pasos li { margin-bottom: 1rem; }
.paso-texto { margin: 0 0 .25rem; }
.paso-porque {
  margin: 0; font-size: .85rem; color: var(--texto-suave);
  border-left: 2px solid var(--borde); padding-left: .7rem;
}
.paso-porque strong { color: var(--acento); }

.alternativa { margin-bottom: .9rem; }
.alternativa p { margin: .35rem 0 0; font-size: .88rem; color: var(--texto-suave); }

.lista-ingredientes { list-style: none; padding: 0; margin: 0 0 .9rem; }
.lista-ingredientes li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px dashed var(--borde); font-size: .88rem;
}
.cantidad { color: var(--acento); font-weight: 600; white-space: nowrap; }
.escalado { margin-top: .9rem; }

/* ---------------------------------------------------------- vista: compra */

.rejilla-compra { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.lista-compra { list-style: none; padding: 0; margin: 0; }
.lista-compra li {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem .7rem;
  align-items: center; padding: .4rem 0; border-bottom: 1px dashed var(--borde); font-size: .88rem;
}
.lista-compra label { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.lista-compra input[type="checkbox"] { accent-color: var(--acento); width: 16px; height: 16px; }
.compra-origen { grid-column: 1 / -1; font-size: .7rem; color: var(--texto-suave); padding-left: 1.5rem; }
.lista-compra li:has(input:checked) .compra-nombre { text-decoration: line-through; color: var(--texto-suave); }

/* ----------------------------------------------------- vista: preferencias */

.form-perfil { max-width: 900px; }
.campo { margin-bottom: .9rem; }
.campo label { display: block; font-size: .85rem; color: var(--texto-suave); margin-bottom: .3rem; }

.opciones { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.opcion {
  display: flex; align-items: flex-start; gap: .55rem;
  background: var(--fondo-3); border: 1px solid var(--borde);
  border-radius: var(--radio-s); padding: .55rem .7rem; cursor: pointer; font-size: .88rem;
  transition: border-color .15s;
}
.opcion:hover { border-color: var(--acento); }
.opcion input { accent-color: var(--acento); margin-top: .2rem; flex-shrink: 0; }
.opcion small { display: block; line-height: 1.35; }

.acciones-form { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }

.boton {
  font-family: inherit; font-size: .9rem; font-weight: 600;
  padding: .6rem 1.1rem; border-radius: var(--radio-s);
  border: 1px solid transparent; cursor: pointer; transition: filter .15s;
}
.boton:hover { filter: brightness(1.15); }
.boton-primario { background: var(--acento); color: #06281a; }
.boton-secundario { background: var(--fondo-3); color: var(--texto); border-color: var(--borde); }
.boton-peligro { background: transparent; color: var(--error); border-color: #4a2626; }

/* ------------------------------------------------------------------ alertas */

.alerta {
  border-radius: var(--radio); padding: .8rem 1rem; margin-bottom: 1rem;
  font-size: .88rem; border-left: 3px solid;
}
.alerta-error { background: #2a1717; border-color: var(--error); }
.alerta-aviso { background: #2a2417; border-color: var(--aviso); }
.alerta-info { background: #17222a; border-color: var(--info); }
.alerta-datos { background: var(--fondo-3); border-color: var(--aviso); color: var(--texto-suave); }
.alerta ul { margin: .5rem 0 0; padding-left: 1.2rem; }

.avisos { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 1rem; }
.nota { font-size: .82rem; color: var(--texto-suave); }

.lista-motivos { list-style: none; padding: 0; margin: 0; }
.lista-motivos li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px dashed var(--borde); font-size: .86rem;
  color: var(--texto-suave);
}
.lista-motivos strong { color: var(--acento); }

/* --------------------------------------------------------------------- pie */

.pie {
  max-width: 1280px; margin: 2rem auto 0; padding: 1.2rem 1.5rem 3rem;
  border-top: 1px solid var(--borde); color: var(--texto-suave); font-size: .8rem;
}
.pie p { margin: 0; }

.arranque-error { max-width: 640px; margin: 4rem auto; padding: 2rem; }

@media (max-width: 620px) {
  .tarjeta-comida { grid-template-columns: 1fr; gap: .3rem; }
  .vista { padding: 1rem; }
  .barra-superior { padding: .6rem 1rem; gap: .8rem; }
  .nav { order: 3; width: 100%; }
}

@media print {
  .barra-superior, .pie, .acciones-form, .barra-filtros { display: none; }
  body { background: #fff; color: #000; }
}

/* Menús propios: controles amplios y etiquetas visibles también en móvil. */
#form-hab-semana, #form-hab-confirmar, .hab-plato form { display: grid; gap: .7rem; margin: 1rem 0; }
#form-hab-semana input, #form-hab-confirmar input, .hab-plato input:not([type="checkbox"]), .hab-plato textarea, #hab-texto { width: 100%; box-sizing: border-box; }
#hab-texto, .hab-plato textarea { font: inherit; padding: .7rem; resize: vertical; }
.hab-plato { padding: .9rem 0; border-bottom: 1px solid var(--borde); }
.hab-plato summary { cursor: pointer; }
.hab-plato label { display: block; }

#hab-texto, .hab-plato textarea { background: var(--fondo-2); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; }
#hab-texto:focus, .hab-plato textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Fase 2B-1.5: ingredientes con cantidad dentro del formulario que ya existía. */
.hab-estructurados { border: 1px solid var(--borde); border-radius: 10px; padding: .7rem .9rem; margin: 0; }
.hab-estructurados legend { padding: 0 .4rem; font-weight: 600; font-size: .9rem; }
.hab-estructurados .nota { margin: .35rem 0; }
.tabla-estructurados th, .tabla-estructurados td { padding: .3rem .35rem; }
.tabla-estructurados td:first-child input { min-width: 8rem; }
.tabla-estructurados td:nth-child(2) input { min-width: 5rem; }
.tabla-estructurados td:nth-child(3) select { min-width: 5.5rem; }
.tabla-estructurados input, .tabla-estructurados select { width: 100%; box-sizing: border-box; }
@media (max-width: 520px) {
  .tabla-estructurados, .tabla-estructurados tbody, .tabla-estructurados tr { display: block; }
  .tabla-estructurados thead { display: none; }
  .tabla-estructurados tr { border-bottom: 1px dashed var(--borde); padding: .4rem 0; }
  .tabla-estructurados td { display: block; border: none; padding: .2rem 0; }
}


/* Propuestas familiares, separadas de la compra antigua. */
.rejilla-familiar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.rejilla-familiar .bloque { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rejilla-familiar select { width: 100%; max-width: 100%; margin-top: .5rem; }
#form-familiar-generar { display: grid; gap: .8rem; }
.familia-confirmar { display: block; padding: .7rem; border: 1px solid var(--borde); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Personalización familiar. */
#form-catalogo-estilo, [data-catalogo-referencia] { display: grid; gap: .8rem; margin: 1rem 0; }
[data-catalogo-referencia] input, [data-catalogo-referencia] textarea { width: 100%; box-sizing: border-box; }
[data-catalogo-referencia] textarea { font: inherit; background: var(--fondo-2); color: var(--texto); padding: .7rem; }
.catalogo-opcion { display: inline-block; padding: .3rem; }

/* Restauración selectiva: cada conjunto con su casilla y su acción. */
.respaldo-plan .fila-sustituye { background: #fff6e8; }
.respaldo-plan .fila-sustituye td { font-weight: 600; }
.respaldo-plan .sin-casilla { display: inline-block; width: 1rem; color: var(--texto-suave); }
.resumen-respaldo { font-size: .88rem; padding: .5rem .6rem; border-radius: 6px; background: var(--fondo-2); }
.resumen-respaldo[data-aviso="1"] { background: #fff6e8; border-left: 3px solid #b8860b; }

/* Compra familiar (2B-2). Todo va prefijado con `.compra-familiar` a propósito:
 * la lista CLÁSICA usa las mismas clases (.lista-compra, .compra-nombre,
 * .compra-origen) y no debe cambiar de aspecto por esta fase. */
.compra-familiar .lista-compra { list-style: none; padding: 0; margin: 0; }
.compra-familiar .item-compra { padding: .45rem 0; border-bottom: 1px solid var(--borde); }
.compra-familiar .item-compra:last-child { border-bottom: none; }
.compra-familiar .compra-check { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.compra-familiar .compra-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--acento); flex: none; }
.compra-familiar .compra-nombre { flex: 1; }
.compra-familiar .compra-cantidad { font-variant-numeric: tabular-nums; color: var(--texto-suave); white-space: nowrap; }
.compra-familiar .item-compra.marcado .compra-nombre { text-decoration: line-through; opacity: .55; }
.compra-familiar .item-compra.pendiente .compra-nombre { color: #8a5a00; }
.compra-familiar .compra-origen { font-size: .82rem; margin-top: .2rem; }
.compra-familiar .compra-origen summary { cursor: pointer; color: var(--texto-suave); }
.compra-familiar .compra-origen ul { margin: .3rem 0 .4rem 1.1rem; padding: 0; }
.compra-familiar .compra-progreso { font-weight: 600; margin: .5rem 0; }
@media (max-width: 520px) {
  .compra-familiar .compra-check { align-items: flex-start; }
  .compra-familiar .compra-cantidad { font-size: .9rem; }
}

/* ============================================================================
 * M1 — ADAPTACIÓN A MÓVIL
 * ----------------------------------------------------------------------------
 * TODO lo de este bloque está dentro de @media (max-width: 620px). Por encima de
 * ese ancho (tablet 768 y escritorio) no se aplica NADA: el diseño de escritorio
 * queda exactamente como estaba.
 *
 * Objetivos: 360–412 px sin desplazamiento horizontal, controles de al menos
 * 44 px y navegación de una sola fila deslizable en lugar de cuatro filas fijas.
 * ==========================================================================*/
/* M1-MOVIL-INICIO */
@media (max-width: 620px) {
  /* --- 1. Nada se sale de la pantalla ------------------------------------ */
  /* `clip` y no `hidden`: no crea contenedor de desplazamiento y no rompe la
   * cabecera fija. Si el navegador no lo entiende, simplemente se ignora. */
  html { overflow-x: clip; }
  body { overflow-wrap: break-word; }
  .vista { padding: 1rem .9rem 2rem; }
  .avisos { padding: 0 .9rem 1rem; }
  .pie { padding: 1rem .9rem 2rem; }
  .bloque { padding: .85rem; }
  h1 { font-size: clamp(1.35rem, 6vw, 1.6rem); }
  h2 { font-size: 1rem; }
  .bloque h2 { flex-wrap: wrap; }
  .cabecera { gap: .8rem; }

  /* --- 2. Barra superior: marca y perfil arriba, navegación en una fila --- */
  .barra-superior { padding: .5rem .9rem; gap: .4rem; }
  .marca { font-size: .95rem; gap: .35rem; }
  .marca-icono { font-size: 1.2rem; }
  .barra-superior .perfil-activo {
    font-size: .76rem; padding: .25rem .55rem; max-width: 45vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav {
    order: 3; width: 100%;
    display: flex; flex-wrap: nowrap; gap: .25rem;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -.9rem; padding: .15rem .9rem .1rem;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-link {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    min-height: 40px; padding: .35rem .7rem; font-size: .82rem;
  }

  /* --- 3. Controles con tamaño de dedo ----------------------------------- */
  .boton { min-height: 44px; padding: .6rem .9rem; font-size: .92rem; }
  .acciones-form { gap: .5rem; }
  .acciones-form .boton { flex: 1 1 calc(50% - .25rem); min-width: 0; }
  .acciones-form .boton:only-of-type { flex-basis: 100%; }
  select, textarea, input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--acento); }
  .opcion { min-height: 44px; }
  .catalogo-opcion { display: flex; align-items: center; min-height: 44px; padding: .35rem .2rem; }
  summary { padding: .5rem 0; }

  /* --- 4. Tablas: se deslizan dentro de su bloque, no arrastran la página - */
  .tabla { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabla th, .tabla td { padding: .45rem .5rem; }
  /* La previsualización de restauración tiene cuatro columnas: en móvil se
   * apila como una ficha, que se lee mejor que una tabla que hay que arrastrar. */
  .respaldo-plan .tabla, .respaldo-plan tbody, .respaldo-plan tr, .respaldo-plan td { display: block; }
  .respaldo-plan thead { display: none; }
  .respaldo-plan tr { border-bottom: 1px solid var(--borde); padding: .5rem 0; }
  .respaldo-plan td { border: none; padding: .15rem 0; font-size: .85rem; }
  .respaldo-plan td:nth-child(2) { font-weight: 700; word-break: break-all; }

  /* --- 5. Rejillas a una columna ----------------------------------------- */
  .rejilla-niveles, .rejilla-recetas, .rejilla-compra, .rejilla-perfiles { grid-template-columns: 1fr; }

  /* --- 6. Filas nombre + dato: el nombre cede, el dato no se corta -------- */
  .lista-ingredientes li, .lista-compacta li, .datos-perfil li { gap: .5rem; }
  .lista-ingredientes li > :first-child,
  .lista-compacta li > :first-child,
  .datos-perfil li > span { min-width: 0; }
  .mini { white-space: normal; }
  .lista-compra li { grid-template-columns: minmax(0, 1fr) auto; }

  /* --- 7. Menú familiar: tarjetas cómodas y cambio de plato usable -------- */
  .rejilla-familiar { gap: .7rem; }
  .rejilla-familiar .bloque { padding: .8rem; }
  .rejilla-familiar h3 { font-size: .96rem; }
  .rejilla-familiar h4 { font-size: .92rem; }
  .rejilla-familiar select { min-height: 44px; }
  .rejilla-familiar details summary { font-size: .85rem; }

  /* --- 8. Compra familiar: casilla grande y fila entera pulsable ---------- */
  .compra-familiar .item-compra { padding: .55rem 0; }
  .compra-familiar .compra-check { min-height: 44px; gap: .7rem; }
  .compra-familiar .compra-check input { width: 26px; height: 26px; }
  .compra-familiar .compra-nombre { min-width: 0; }
  .compra-familiar .compra-cantidad { font-size: .92rem; }
  .compra-familiar .compra-origen summary { padding: .45rem 0; }

  /* --- 9. Mis menús habituales y respaldos ------------------------------- */
  .hab-estructurados { padding: .6rem; }
  .hab-plato { padding: .8rem 0; }
}
/* M1-MOVIL-FIN */

/* Fase M3: aviso de que se está trabajando con la copia guardada. */
.sin-conexion {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 60; padding: .45rem .9rem; border-radius: 999px;
  background: #3a3020; color: #fde68a;
  border: 1px solid #4a4630; box-shadow: var(--sombra);
  font-size: .82rem; font-weight: 600; pointer-events: none;
}