/* Lo propio de Morfi, sobre base.css (que no se edita): el color, la barra de pestañas y poco más. */
:root { --acento: #c2410c; --acento-fuerte: #9a3412; --acento-suave: #ffedd5; --barra-abajo: 60px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --acento: #fb923c; --acento-fuerte: #fdba74; --acento-suave: #3b2314; --sobre-acento: #1c0f05; }
}

/* Esqueleto: arriba la marca, las pestañas y el nombre (que lleva a Ajustes); en el celular las pestañas van abajo. */
.morfi { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.tope {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--e5);
  padding: var(--e2) var(--e6); background: color-mix(in srgb, var(--fondo) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--borde);
}
.tope .marca { padding: 0; color: var(--texto); }
.tope .marca:hover { text-decoration: none; }
.pestanas-app { display: flex; gap: var(--e1); flex: 1; }
.pestanas-app a {
  display: flex; align-items: center; gap: var(--e2); padding: 8px var(--e3); border-radius: var(--radio-s);
  color: var(--texto-2); font-weight: 550; text-decoration: none;
}
.pestanas-app a:hover { background: var(--superficie-2); color: var(--texto); }
.pestanas-app a[aria-current="page"] { background: var(--acento-suave); color: var(--acento-fuerte); }
.pestanas-app svg { flex: none; }
.quien {
  display: flex; align-items: center; gap: var(--e2); margin-left: auto; min-width: 0; max-width: 45vw;
  padding: 4px var(--e3) 4px 4px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto); font-weight: 550; text-decoration: none;
}
.quien:hover { background: var(--superficie-2); text-decoration: none; }
.quien.actual { border-color: var(--acento); }
.quien .avatar { flex: none; }
.morfi > .contenido { margin: 0 auto; max-width: 860px; flex: 1; }
.sin-conexion { padding: var(--e2) var(--e4); background: var(--aviso-suave); color: var(--aviso); font-weight: 550; text-align: center; border-bottom: 1px solid var(--borde); }

@media (max-width: 860px) {
  /* Sin backdrop-filter: haría que las pestañas fijas se colocaran respecto de la barra de arriba y no de la pantalla. */
  .tope { padding: var(--e2) var(--e4); background: var(--fondo); backdrop-filter: none; }
  .pestanas-app {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 0; height: calc(var(--barra-abajo) + env(safe-area-inset-bottom));
    padding: 0 var(--e2) env(safe-area-inset-bottom); background: var(--superficie); border-top: 1px solid var(--borde);
  }
  .pestanas-app a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 0; font-size: var(--t-xs); border-radius: var(--radio); }
  .pestanas-app a[aria-current="page"] { background: none; color: var(--acento); }
  .morfi > .contenido { padding-bottom: calc(var(--barra-abajo) + env(safe-area-inset-bottom) + var(--e5)); }
  .avisos { bottom: calc(var(--barra-abajo) + env(safe-area-inset-bottom) + var(--e3)); }
}

/* Piezas chicas */
.tarjeta + .tarjeta, .tarjeta + .salir, .aviso-caja + .tarjeta { margin-top: var(--e4); }
.tarjeta-cabecera .nota { color: var(--texto-2); font-size: var(--t-s); font-weight: 400; margin-top: 2px; }
.vacio .icono-v { color: var(--acento); }
.vacio .icono-v svg { width: 26px; height: 26px; }
.lista > li .acciones-l { display: flex; gap: var(--e1); align-items: center; flex: none; }
.lista > li.archivado .titulo-l { color: var(--texto-3); font-weight: 500; }
.plegable > summary { cursor: pointer; padding: var(--e3) var(--e4); color: var(--texto-2); font-size: var(--t-s); font-weight: 600; border-top: 1px solid var(--borde); }
.plegable > .lista { border-top: 1px solid var(--borde); }
.dialogo form { margin: 0; }
.salir { display: flex; justify-content: flex-end; }
/* En pantallas angostas, un nombre largo deja los botones en el renglón de abajo en vez de apretarse. */
.lista > li.con-acciones { flex-wrap: wrap; }
.lista > li.con-acciones .principal-l { flex: 1 1 90px; }
.lista > li.con-acciones .acciones-l, .lista > li.con-acciones > .boton { margin-left: auto; }
.tarjeta-cabecera { flex-wrap: wrap; gap: var(--e3); }
.tarjeta-cabecera > div { flex: 1 1 220px; min-width: 0; }

/* Entrar */
.entrar .tarjeta-cuerpo > section > .boton, .entrar form > .boton { width: 100%; min-height: 46px; font-size: var(--t-m); }
.entrar .aviso-caja { margin-top: var(--e4); flex-direction: column; gap: var(--e2); font-size: var(--t-s); }
.entrar .aviso-caja .boton { align-self: flex-start; }
.entrar .pie-entrar { margin-top: var(--e4); text-align: center; color: var(--texto-3); font-size: var(--t-s); }
.entrar #dato { font-size: 1rem; }
.entrar .nombre-dispositivo { font-weight: 650; color: var(--texto); }

/* Recetas: la lista */
.lista > li.enlace { padding: 0; }
.fila-enlace { display: flex; align-items: center; gap: var(--e3); flex: 1; min-width: 0; padding: var(--e3) var(--e5); color: inherit; text-decoration: none; }
.fila-enlace:hover { text-decoration: none; }
.fila-enlace .principal-l { flex: 1; min-width: 0; }
.fila-enlace .titulo-l { overflow-wrap: anywhere; }
.filtros-tarjeta { padding: var(--e3) var(--e4) 0; margin-bottom: var(--e2); }

/* Recetas: la ficha */
.ingredientes-ficha > li { align-items: baseline; }
.cantidad-ficha { flex: none; min-width: 5.5em; font-weight: 650; font-variant-numeric: tabular-nums; }
.ingredientes-ficha .principal-l { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pasos-ficha { margin: 0; padding: var(--e3) var(--e5) var(--e4) calc(var(--e5) + 1.6em); }
.pasos-ficha > li { padding: var(--e2) 0 var(--e2) var(--e1); white-space: pre-line; overflow-wrap: anywhere; }
.pasos-ficha > li::marker { font-weight: 700; color: var(--acento); }
.pie-ficha { margin-top: var(--e3); }
.aviso-caja + .tarjeta, .tarjeta + .pie-form { margin-top: var(--e4); }
.aviso-caja > .boton { margin-left: auto; flex: none; }

/* Recetas: alta y edición. Un renglón por ingrediente: cantidad · unidad · nombre · quitar; abajo, dónde se compra. */
.datos-receta { grid-template-columns: minmax(0, 1fr) 140px; }
.renglones { list-style: none; margin: 0; padding: 0; }
.renglon { display: grid; gap: var(--e2); align-items: start; padding: var(--e3) var(--e4); border-top: 1px solid var(--borde); }
.renglon:first-child { border-top: 0; }
.renglon.ingrediente { grid-template-columns: 84px 108px minmax(0, 1fr) 30px; }
.renglon.ingrediente .r-quitar, .renglon .r-botones { align-self: center; }
.renglon .r-donde, .renglon .r-error { grid-column: 1 / -1; }
.renglon .r-nuevo { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.renglon .r-nuevo select { width: auto; min-width: 0; flex: 1 1 130px; max-width: 260px; }
.renglon.paso { grid-template-columns: 1.6em minmax(0, 1fr) auto; }
.renglon.paso .r-numero { padding-top: 9px; font-weight: 700; color: var(--acento); text-align: right; }
.renglon.paso textarea { resize: vertical; min-height: 84px; }
.renglon .r-botones { display: flex; flex-direction: column; gap: var(--e1); }
.renglon .error { font-size: var(--t-s); color: var(--peligro); }
.error-lista { padding: 0 var(--e4) var(--e2); font-size: var(--t-s); color: var(--peligro); }
.pie-renglones { padding: var(--e3) var(--e4) var(--e4); border-top: 1px solid var(--borde); }
.pie-form { justify-content: flex-end; }
@media (max-width: 640px) {
  .datos-receta { grid-template-columns: 1fr; }
  /* En el celular: cantidad, unidad y quitar arriba; el nombre, entero, abajo. Letra de 16 px para que iOS no haga zoom. */
  .renglon.ingrediente { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 30px; }
  .renglon.ingrediente .r-nombre { grid-column: 1 / -1; grid-row: 2; }
  .renglon input, .renglon textarea, .renglon select, .datos-receta input { font-size: 1rem; }
  .fila-enlace, .lista > li { padding-left: var(--e4); padding-right: var(--e4); }
  .lista > li.enlace { padding: 0; }
  .pasos-ficha { padding-left: calc(var(--e4) + 1.6em); padding-right: var(--e4); }
  .cantidad-ficha { min-width: 4.6em; }
  .pie-form .boton { flex: 1; min-height: 44px; }
}

/* Modo cocina: pantalla completa, letra grande, un paso por vez y los botones grandes abajo, al alcance del pulgar. */
body.modo-cocina { background: var(--fondo); }
.cocina { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--fondo); }
.cocina-tope { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e4); padding-top: calc(var(--e2) + env(safe-area-inset-top)); border-bottom: 1px solid var(--borde); }
.cocina-titulo { flex: 1; min-width: 0; font-weight: 650; }
/* El nombre del plato se lee entero: baja a otro renglón en vez de cortarse («Ensalada de at…»). */
.cocina-nombre { overflow-wrap: anywhere; line-height: 1.25; }
.cocina-titulo #porciones { font-weight: 400; line-height: 1.3; }
@media (max-width: 640px) {
  /* En el celular «Pantalla encendida» baja a su renglón: el nombre y la bajada usan todo el ancho. */
  .cocina-tope { flex-wrap: wrap; row-gap: var(--e1); }
  .cocina-tope > .cocina-titulo { flex: 1 1 60%; }
  .cocina-tope > .etiqueta-e { order: 3; margin-left: auto; }
}
.cocina > .aviso-caja { margin: var(--e3) var(--e4) 0; font-size: var(--t-s); }
.cocina-cuerpo { flex: 1; overflow-y: auto; padding: var(--e5) var(--e5) var(--e6); width: 100%; max-width: 820px; margin: 0 auto; }
.cocina-cuerpo h1 { font-size: 1.5rem; margin-bottom: var(--e4); }
.cocina-cuenta { color: var(--acento); }
.cocina-paso { font-size: clamp(1.5rem, 5.2vw, 2.1rem); line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.cocina-ingredientes { list-style: none; margin: 0; padding: 0; font-size: clamp(1.25rem, 4.6vw, 1.6rem); line-height: 1.3; }
.cocina-ingredientes > li { display: flex; gap: var(--e4); align-items: baseline; padding: var(--e3) 0; border-top: 1px solid var(--borde); overflow-wrap: anywhere; }
.cocina-ingredientes > li:first-child { border-top: 0; }
.cocina-cantidad { flex: none; min-width: 4.6em; font-weight: 700; font-variant-numeric: tabular-nums; }
.cocina-pie { display: flex; gap: var(--e2); padding: var(--e3) var(--e4); padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); background: var(--superficie); }
.cocina-pie .boton { min-height: 56px; font-size: var(--t-l); flex: 1; }
.cocina-pie #siguiente { flex: 2; }

/* Preparaciones y freezer (carta 058) */
.fila-enlace > .etiqueta-e { flex: none; }
.ingredientes-ficha a.titulo-l, .freezer a.titulo-l { display: inline-block; color: inherit; text-decoration: underline; text-decoration-color: var(--borde-fuerte, var(--borde)); text-underline-offset: 3px; }
.campo-tipo { margin-bottom: 0; }
.campo-tipo .casilla { font-size: var(--t-m); color: var(--texto); min-height: 30px; }
.datos-rinde { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--borde); }
.datos-rinde > .ayuda { font-size: var(--t-s); color: var(--texto-3); }
.datos-rinde .campo { margin-bottom: var(--e3); }
.renglon .r-unidad-fija { align-self: center; overflow-wrap: anywhere; }
.pie-renglones { display: flex; gap: var(--e2); flex-wrap: wrap; }
.freezer-hay { font-size: var(--t-l); font-weight: 650; margin-bottom: var(--e2); }
.freezer-hay.apagada { color: var(--texto-3); font-weight: 500; }
.freezer-cifras { display: flex; gap: var(--e4); flex: none; }
.freezer-cifra { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.freezer-cifra .rotulo { font-size: var(--t-xs); color: var(--texto-3); }
.freezer-cifra strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.freezer-cifra.apagada strong { color: var(--texto-3); font-weight: 500; }
.pie-tarjeta { padding: var(--e3) var(--e5) var(--e4); border-top: 1px solid var(--borde); }
.mas-menos { display: flex; gap: var(--e2); align-items: stretch; }
.mas-menos input { flex: 1; min-width: 0; text-align: center; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mas-menos .boton { flex: none; min-width: 48px; min-height: 44px; font-size: 1.25rem; }
.dialogo .campo:last-child { margin-bottom: 0; }
.cocina-ingredientes a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.cocina-ingredientes .del-freezer { font-size: .8em; white-space: nowrap; }
@media (max-width: 640px) {
  .datos-rinde { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .datos-rinde > .campo:nth-child(3), .datos-rinde > .ayuda { grid-column: 1 / -1; }
  .datos-rinde input, .dialogo input, .dialogo select, .filtros select { font-size: 1rem; }
  /* El renglón de una preparación: cantidad, en qué se cuenta y quitar arriba; cuál, entera, abajo. */
  .renglon.de-preparacion .r-preparacion { grid-column: 1 / -1; grid-row: 2; }
  .pie-renglones .boton { flex: 1; }
  .pie-tarjeta { padding-left: var(--e4); padding-right: var(--e4); }
  /* Freezer: el nombre arriba; abajo, la cifra a la izquierda y los botones a la derecha. */
  .freezer > li.con-acciones .principal-l { flex-basis: 100%; }
  .freezer-cifra { align-items: flex-start; }
}

/* Plan y Hoy: cada día es una tarjeta con sus cuatro comidas (el momento a la izquierda, la comida entera es el botón). */
/* Hoy: las comidas de hoy, lo pendiente y mañana, en ese orden y con el mismo aire entre sí (lo oculto no deja hueco). */
.hoy-columna { display: flex; flex-direction: column; gap: var(--e4); }
.hoy-columna > * { margin: 0; }
.hoy-columna + .tarjeta { margin-top: var(--e4); }
.pendientes { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
/* Compactos: un renglón (o dos) cada uno, para que el botón «Revisar» quede a la vista debajo de las comidas de hoy. */
.pendientes .aviso-caja { align-items: center; padding: var(--e2) var(--e3); gap: var(--e2); }
.pendientes .aviso-caja strong { font-weight: 650; line-height: 1.3; display: block; }
.pendientes .aviso-caja div.pequeno { line-height: 1.35; }
.pendientes .aviso-caja > span:first-child { flex: none; font-weight: 700; }
.pendientes .aviso-caja > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pendientes .aviso-caja div.pequeno { color: var(--texto-2); }
.pendientes .aviso-caja > .boton { margin-left: auto; flex: none; }
.comidas-del-dia > li.comida { padding: 0 var(--e2) 0 var(--e5); gap: var(--e2); align-items: stretch; min-height: 48px; }
.comidas-del-dia .momento { flex: none; width: 5.6em; align-self: center; font-size: var(--t-s); font-weight: 600; color: var(--texto-3); }
.comidas-del-dia li.sesion .momento { color: var(--acento); }
.comidas-del-dia li.comida > .texto-3, .comidas-del-dia li.comida > .nota-comida { align-self: center; padding: var(--e3) var(--e3) var(--e3) var(--e2); }
.comida-boton {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
  padding: var(--e3) var(--e2); border: 0; border-radius: var(--radio-s); background: none; color: inherit; font: inherit; text-align: left;
  text-decoration: none; cursor: pointer; overflow-wrap: anywhere; touch-action: manipulation;
}
.comida-boton:hover { background: var(--superficie-2); text-decoration: none; }
.comida-boton:disabled { cursor: default; opacity: .6; }
.comida-boton .titulo-l { font-weight: 600; }
.comida-boton .detalle-l { font-size: var(--t-s); color: var(--texto-3); }
.comida-boton .etiqueta-e { margin-top: 2px; white-space: normal; }
.comida-boton.agregar .detalle-l { color: var(--texto-2); font-weight: 550; }
.nota-comida { color: var(--texto-2); font-style: italic; overflow-wrap: anywhere; }
.comidas-del-dia .mover { flex: none; align-self: center; width: 44px; min-height: 44px; font-size: 1.15rem; touch-action: manipulation; }
.comida-boton.destino { margin: 4px 0; border: 1px dashed var(--borde-fuerte, var(--borde)); }
.comida-boton.destino:hover { border-color: var(--acento); background: var(--acento-suave); }
.comida-boton.destino.origen { border-style: solid; border-color: var(--acento); background: var(--acento-suave); }
.comidas-del-dia li.comida:has(.destino) { padding-right: var(--e4); }
.moviendo { position: sticky; top: 58px; z-index: 5; align-items: center; margin-bottom: var(--e4); background: var(--acento-suave); border-color: var(--acento); box-shadow: var(--sombra); }
.moviendo > div { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.moviendo > .boton { flex: none; }
.dia .tarjeta-cabecera { flex-wrap: nowrap; }
.dia .tarjeta-cabecera > .etiqueta-e { flex: none; text-decoration: none; }
.mas-dias { display: flex; justify-content: center; margin-top: var(--e4); }

/* Los diálogos de una comida y de una sesión de preparación */
.dialogo-pie.con-izquierda > :first-child { margin-right: auto; }
.elegir-tipo { display: flex; gap: var(--e5); flex-wrap: wrap; margin-bottom: var(--e4); }
.elegir-tipo .casilla { min-height: 32px; font-weight: 550; }
.elegir-receta { max-height: 216px; overflow-y: auto; margin-top: var(--e2); border: 1px solid var(--borde); border-radius: var(--radio-s); overscroll-behavior: contain; }
.elegir-receta > li { padding: 0; }
.elegir-receta > li.texto-3 { padding: var(--e3) var(--e4); }
.elegir-receta .fila-enlace { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; padding: 10px var(--e4); justify-content: space-between; }
.elegir-receta .fila-enlace .detalle-l { flex: none; }
.elegir-receta .fila-enlace[aria-selected="true"] { background: var(--acento-suave); color: var(--acento-fuerte); }
.elegir-receta .fila-enlace[aria-selected="true"] .titulo-l::before { content: "✓ "; }
.abrir-cocina { margin-top: var(--e2); }
.dialogo input[type="date"] { min-height: 38px; }
.aviso-flotante.con-accion { justify-content: space-between; }
.aviso-flotante.con-accion > span { min-width: 0; overflow-wrap: anywhere; }
.aviso-flotante.con-accion .boton { flex: none; }

/* Freezer: «−» y «+» en la fila (botones grandes y separados, para no tocarlos sin querer) y las tres cifras. */
.freezer-hay-fila { display: flex; align-items: center; gap: var(--e2); flex: none; }
.freezer-hay-fila .paso { width: 44px; min-height: 44px; padding: 0; font-size: 1.3rem; touch-action: manipulation; }
.freezer-numero {
  display: flex; flex-direction: column; align-items: center; min-width: 6.6em; padding: 4px var(--e2); border: 0; border-radius: var(--radio-s);
  background: none; color: inherit; font: inherit; line-height: 1.25; cursor: pointer; touch-action: manipulation;
}
.freezer-numero:hover { background: var(--superficie-2); }
.freezer-numero .rotulo { font-size: var(--t-xs); color: var(--texto-3); }
.freezer-numero strong { font-size: var(--t-l); font-variant-numeric: tabular-nums; white-space: nowrap; }
.freezer-numero.apagada strong { color: var(--texto-3); font-weight: 500; }
.freezer > li.con-acciones { row-gap: var(--e2); }

@media (max-width: 640px) {
  .comidas-del-dia > li.comida { padding-left: var(--e4); }
  .comidas-del-dia .momento { width: 5.2em; }
  .pendientes .aviso-caja { flex-wrap: wrap; }
  .pendientes .aviso-caja > div { flex: 1 1 200px; }
  .dialogo-comida .dialogo-pie, .dialogo-pie.con-izquierda { flex-wrap: wrap; }
  .moviendo { top: 54px; }
  /* Freezer: el nombre arriba; después «−  hay  +» en su renglón; abajo, asignado y libre a la izquierda y el lote a la derecha. */
  .freezer-hay-fila { flex-basis: 100%; justify-content: space-between; }
  .freezer-numero { flex: 1; }
  .freezer-cifras { margin-right: auto; }
}

/* Revisar: un renglón por ingrediente; el renglón entero es el botón de «falta». Abajo, fijo, «Listo, lo demás está». */
.grupos-revisar, .grupos-compras { display: flex; flex-direction: column; gap: var(--e4); }
.lista.revisar > li { padding: 0; align-items: stretch; }
.lista.revisar > li.cubierto { padding: var(--e3) var(--e5); align-items: center; }
.lista.revisar > li.cubierto .titulo-l { color: var(--texto-2); font-weight: 500; }
.falta-boton {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e3); min-height: 56px; padding: var(--e3) var(--e5);
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.falta-boton:focus-visible, .tilde:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
@media (hover: hover) { .falta-boton:hover { background: var(--superficie-2); } }
.falta-boton .principal-l, .linea-compra .principal-l { overflow-wrap: anywhere; }
.titulo-l .total { font-weight: 500; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.detalle-l.ya { color: var(--texto-2); }
.falta-marca {
  flex: none; min-width: 4.6em; padding: 7px var(--e3); border: 1px solid var(--borde-fuerte, var(--borde)); border-radius: 999px;
  font-size: var(--t-s); font-weight: 650; text-align: center; color: var(--texto-2); background: var(--superficie);
}
.renglon-revisar.marcado { background: var(--acento-suave); }
.renglon-revisar.marcado .falta-boton:hover { background: none; }
.renglon-revisar.marcado .falta-marca { border-color: var(--acento); background: var(--acento); color: var(--sobre-acento, #fff); }
.renglon-revisar.marcado .falta-marca::before { content: "✓ "; }
.pie-revisar {
  position: sticky; bottom: var(--e3); z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  margin-top: var(--e4); padding: var(--e3) var(--e4); border: 1px solid var(--borde); border-radius: var(--radio-l);
  background: var(--superficie); box-shadow: var(--sombra-l);
}
.pie-revisar .boton { flex: none; min-height: 46px; padding: 0 var(--e5); font-size: var(--t-m); }
#sin-dias .vacio .boton + .boton { margin-left: var(--e2); }

/* Compras: el círculo de tildar a la izquierda (grande, para el pulgar), qué · cuánto, y abajo para cuándo · para qué. */
.lista.compras > li { padding: var(--e2) var(--e4) var(--e2) var(--e3); gap: var(--e2); }
.linea-compra .principal-l { flex: 1; min-width: 0; padding: var(--e1) 0; }
.linea-compra.tildando { opacity: .5; }
.tilde {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tilde::before { content: ""; width: 26px; height: 26px; border: 2px solid var(--borde-fuerte, var(--texto-3)); border-radius: 50%; background: var(--superficie); }
.tilde:hover::before { border-color: var(--acento); background: var(--acento-suave); }
.tilde:disabled::before { border-color: var(--acento); background: var(--acento); }
.cuando { font-weight: 600; color: var(--texto-2); }
.cuando.tarde { font-weight: 650; color: var(--peligro); }
.plegable.sin-borde > summary { border-top: 0; }
.lista > li.comprada .titulo-l { color: var(--texto-2); font-weight: 500; text-decoration: line-through; }
.cantidad-y-unidad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dialogo .campo > .boton.pequeno { margin-top: var(--e2); }

@media (max-width: 860px) {
  .pie-revisar { bottom: calc(var(--barra-abajo) + env(safe-area-inset-bottom) + var(--e2)); }
}
@media (max-width: 640px) {
  .falta-boton, .lista.revisar > li.cubierto { padding-left: var(--e4); padding-right: var(--e4); }
  .pie-revisar { flex-direction: column; align-items: stretch; gap: var(--e2); text-align: center; }
  .pie-revisar .boton { min-height: 48px; }
  .cantidad-y-unidad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e3); }
  #sin-dias .vacio .boton + .boton { margin-left: 0; margin-top: var(--e2); }
}

/* En el celular ningún campo baja de 16 px: con menos, Safari de iPhone hace zoom al enfocarlo (y no vuelve). */
@media (max-width: 860px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 1rem; }
  .mas-menos input:not([type="checkbox"]):not([type="radio"]) { font-size: 1.15rem; }
}

/* Ajustes → Copia de seguridad: renglones y avisos con aire entre sí. */
#copia { display: flex; flex-direction: column; gap: var(--e3); }
#copia > p { margin: 0; }