/* Concepto: cocina de casa con etiqueta de mercado. Fondo de papel de cocina, tinta verde oscura,
   el amarillo de las etiquetas de precio para lo importante y números de ticket en monoespaciada. */
:root {
  --papel: #f5f6f0;
  --tarjeta: #ffffff;
  --hundido: #ebede4;
  --tinta: #1c2620;
  --suave: #58655d;
  --linea: #dbe0d4;
  --verde: #2e6a4a;
  --verde-fondo: #e3efe6;
  --etiqueta: #f3c63f;
  --etiqueta-tinta: #2a2410;
  --prot: #3d6fb0;
  --hc: #c98a1d;
  --gr: #7f9238;
  --ok: #2f7d4f;
  --aviso: #9a6512;
  --aviso-fondo: #fbf0d9;
  --mal: #b8392c;
  --mal-fondo: #fbe5e1;
  --sombra: 0 1px 2px rgba(28, 38, 32, 0.06), 0 6px 20px rgba(28, 38, 32, 0.06);
  --display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --texto: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --numero: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r: 14px;
  --r-s: 9px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #111613; --tarjeta: #1a211c; --hundido: #222a24; --tinta: #e7ece6; --suave: #a2aea5; --linea: #2d3730;
    --verde: #7cc79c; --verde-fondo: #1f3227; --etiqueta: #f1cd5a; --etiqueta-tinta: #2a2410; --prot: #86aee6; --hc: #e2b05a; --gr: #b4c56a;
    --ok: #74c793; --aviso: #e7b65c; --aviso-fondo: #33291a; --mal: #f08a7c; --mal-fondo: #3a1f1b;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #111613; --tarjeta: #1a211c; --hundido: #222a24; --tinta: #e7ece6; --suave: #a2aea5; --linea: #2d3730;
  --verde: #7cc79c; --verde-fondo: #1f3227; --etiqueta: #f1cd5a; --etiqueta-tinta: #2a2410; --prot: #86aee6; --hc: #e2b05a; --gr: #b4c56a;
  --ok: #74c793; --aviso: #e7b65c; --aviso-fondo: #33291a; --mal: #f08a7c; --mal-fondo: #3a1f1b;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 16px; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 750; }
h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 650; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--etiqueta); outline-offset: 2px; border-radius: 6px; }
.num { font-family: var(--numero); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.suave { color: var(--suave); }
.peque { font-size: 0.86rem; }
.mayus { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 650; }
.envoltura { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.estrecha { max-width: 720px; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pila { display: flex; flex-direction: column; gap: 12px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid transparent; background: var(--tinta); color: var(--papel); font-weight: 650; text-decoration: none; cursor: pointer; transition: transform 0.08s ease, background 0.15s ease; white-space: nowrap; }
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.boton.etiqueta { background: var(--etiqueta); color: var(--etiqueta-tinta); }
.boton.verde { background: var(--verde); color: var(--tarjeta); }
.boton.borde { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton.borde:hover { border-color: var(--tinta); }
.boton.texto { background: transparent; color: var(--verde); padding: 8px 10px; min-height: 36px; }
.boton.peligro { background: transparent; color: var(--mal); border-color: var(--mal); }
.boton.ancho { width: 100%; }
.boton.peque { min-height: 34px; padding: 6px 12px; font-size: 0.88rem; }
.icono { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boton-icono { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--tarjeta); cursor: pointer; color: var(--tinta); }

/* ---------- Chips y etiquetas ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--tarjeta); cursor: pointer; font-weight: 550; font-size: 0.94rem; user-select: none; }
.chip[aria-pressed="true"], .chip.activo { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.chip.peque { min-height: 28px; padding: 2px 10px; font-size: 0.8rem; cursor: default; }
.sello { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 0.76rem; font-weight: 650; background: var(--hundido); color: var(--tinta); white-space: nowrap; }
.sello.ctx-t { background: #dfeaf6; color: #23446b; }
.sello.ctx-r { background: #fbecc8; color: #6b4a07; }
.sello.ctx-b { background: #e6e0f3; color: #3f2f6b; }
.sello.ctx-k { background: #e2efe5; color: #22573a; }
:root[data-theme="dark"] .sello.ctx-t, :root[data-theme="dark"] .sello.ctx-r, :root[data-theme="dark"] .sello.ctx-b, :root[data-theme="dark"] .sello.ctx-k { background: var(--hundido); color: var(--tinta); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sello.ctx-t, :root:not([data-theme="light"]) .sello.ctx-r, :root:not([data-theme="light"]) .sello.ctx-b, :root:not([data-theme="light"]) .sello.ctx-k { background: var(--hundido); color: var(--tinta); } }
.sello.ia { background: var(--tinta); color: var(--papel); }
.sello.precio { background: var(--etiqueta); color: var(--etiqueta-tinta); font-family: var(--numero); }
.sello.aviso { background: var(--aviso-fondo); color: var(--aviso); border: 1px solid var(--aviso); }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .etiqueta-campo { font-weight: 600; font-size: 0.92rem; }
.campo input, .campo select, .campo textarea { min-height: 46px; padding: 10px 14px; border-radius: var(--r-s); border: 1.5px solid var(--linea); background: var(--tarjeta); width: 100%; }
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-fondo); }
.ayuda { font-size: 0.84rem; color: var(--suave); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.4; cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--verde); flex: none; }
.error { color: var(--mal); font-size: 0.9rem; font-weight: 550; }
.aviso-caja { background: var(--aviso-fondo); border: 1px solid var(--aviso); color: var(--tinta); border-radius: var(--r-s); padding: 10px 14px; font-size: 0.9rem; }
.info-caja { background: var(--verde-fondo); border-radius: var(--r-s); padding: 12px 14px; font-size: 0.92rem; }
.segmentos { display: inline-flex; background: var(--hundido); border-radius: 999px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.segmentos button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font-weight: 600; cursor: pointer; min-height: 38px; }
.segmentos button[aria-pressed="true"] { background: var(--tarjeta); box-shadow: var(--sombra); }

/* ---------- Tarjetas de receta ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.receta-tarjeta { position: relative; display: flex; flex-direction: column; background: var(--tarjeta); border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); text-align: left; border: 0; padding: 0; cursor: pointer; color: inherit; width: 100%; }
.receta-tarjeta .foto { aspect-ratio: 4 / 3; width: 100%; max-width: 100%; object-fit: cover; background: var(--hundido); }
.receta-tarjeta .cuerpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.receta-tarjeta h3 { font-size: 1.04rem; }
.receta-tarjeta .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 0.82rem; color: var(--suave); }
.receta-tarjeta.bloqueada { cursor: pointer; }
.receta-tarjeta.bloqueada .foto { filter: blur(7px) saturate(0.8); transform: scale(1.08); }
.receta-tarjeta.bloqueada .cuerpo h3 { filter: blur(4px); user-select: none; }
.candado { position: absolute; top: 10px; right: 10px; background: var(--tinta); color: var(--papel); border-radius: 999px; padding: 4px 10px; font-size: 0.78rem; font-weight: 650; display: inline-flex; gap: 5px; align-items: center; }
.franja-macro { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--hundido); }
.franja-macro i { display: block; height: 100%; }
.franja-macro .p { background: var(--prot); } .franja-macro .h { background: var(--hc); } .franja-macro .g { background: var(--gr); }

/* ---------- Plato del día (vista Hoy) ---------- */
.dia-lista { display: grid; gap: 14px; }
.plato { display: grid; grid-template-columns: 120px 1fr; gap: 14px; background: var(--tarjeta); border-radius: var(--r); padding: 10px; box-shadow: var(--sombra); align-items: center; }
.plato .foto { width: 120px; height: 96px; border-radius: 10px; object-fit: cover; cursor: pointer; background: var(--hundido); }
.plato .datos { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plato h3 { font-size: 1.05rem; cursor: pointer; }
.plato .momento { color: var(--suave); }
.plato .acciones { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
@media (min-width: 720px) { .plato { grid-template-columns: 170px 1fr; } .plato .foto { width: 170px; height: 124px; } }

/* ---------- Calendario semanal ---------- */
.semana-rejilla { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; }
.semana-scroll { overflow-x: auto; padding-bottom: 8px; }
.dia-col { background: var(--tarjeta); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sombra); min-width: 0; }
.dia-col.hoy { outline: 2.5px solid var(--etiqueta); }
.dia-col header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.dia-col header strong { font-family: var(--display); font-size: 1.05rem; }
.hueco { border-radius: 10px; background: var(--hundido); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; min-height: 64px; position: relative; }
.hueco .tit { font-weight: 600; font-size: 0.9rem; line-height: 1.25; cursor: pointer; overflow-wrap: anywhere; }
.hueco .mom { font-size: 0.7rem; padding-right: 26px; }
.hueco .mas { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--suave); display: grid; place-items: center; }
.hueco .mas:hover { background: var(--tarjeta); color: var(--tinta); }
.hueco.arrastrando { opacity: 0.5; }
.hueco.destino { outline: 2px dashed var(--verde); }
@media (max-width: 760px) {
  .semana-rejilla { grid-template-columns: 1fr; }
  .dia-col { display: grid; grid-template-columns: 1fr 1fr; }
  .dia-col header { grid-column: 1 / -1; }
  .dia-col > .sello, .dia-col > .obj-chip { grid-column: 1 / -1; }
}

/* ---------- Ficha de receta ---------- */
.ficha-foto { position: relative; margin: -20px -20px 0; }
.ficha-foto img { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ficha-foto .nota-foto { position: absolute; left: 12px; bottom: 12px; background: rgba(28, 38, 32, 0.75); color: #fff; font-size: 0.74rem; padding: 3px 10px; border-radius: 99px; }
.ingredientes { list-style: none; padding: 0; margin: 0; display: grid; }
.ingredientes li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--linea); align-items: baseline; }
.ingredientes li .q { font-family: var(--numero); font-size: 0.9rem; color: var(--suave); text-align: right; }
.ingredientes li .esp { display: block; font-size: 0.82rem; color: var(--aviso); }
.pasos { padding-left: 0; margin: 0; list-style: none; counter-reset: paso; display: grid; gap: 12px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.pasos li::before { content: counter(paso); font-family: var(--numero); font-weight: 600; width: 28px; height: 28px; border-radius: 99px; background: var(--etiqueta); color: var(--etiqueta-tinta); display: grid; place-items: center; font-size: 0.86rem; }
/* etiqueta nutricional */
.nutri { border: 2px solid var(--tinta); border-radius: 6px; padding: 10px 12px; font-size: 0.92rem; }
.nutri .cab { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 7px solid var(--tinta); padding-bottom: 4px; margin-bottom: 4px; }
.nutri .cab strong { font-family: var(--display); font-size: 1.3rem; }
.nutri .fl { display: flex; justify-content: space-between; border-bottom: 1px solid var(--linea); padding: 4px 0; }
.nutri .fl:last-child { border-bottom: 0; }
.nutri .pt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.alergenos { display: flex; flex-wrap: wrap; gap: 6px; }
.alergeno { border: 1.5px solid var(--tinta); border-radius: 6px; padding: 2px 8px; font-size: 0.8rem; font-weight: 650; }
.estrellas { display: inline-flex; gap: 2px; }
.estrellas button { border: 0; background: transparent; cursor: pointer; padding: 2px; color: var(--linea); font-size: 1.5rem; line-height: 1; }
.estrellas button.on { color: var(--etiqueta); }

/* ---------- Lista de la compra (ticket) ---------- */
.ticket { background: var(--tarjeta); border-radius: 4px; padding: 18px 18px 22px; box-shadow: var(--sombra); position: relative; font-size: 0.96rem; }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: linear-gradient(-45deg, transparent 6px, var(--tarjeta) 0) 0 0 / 12px 8px repeat-x, linear-gradient(45deg, transparent 6px, var(--tarjeta) 0) 0 0 / 12px 8px repeat-x; }
.ticket h3 { border-bottom: 1.5px dashed var(--linea); padding: 14px 0 6px; margin-bottom: 4px; font-size: 1rem; }
.ticket h3:first-of-type { padding-top: 0; }
.ticket-linea { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dotted var(--linea); }
.ticket-linea input { width: 20px; height: 20px; accent-color: var(--verde); margin: 0; align-self: center; }
.ticket-linea.hecho .nom { text-decoration: line-through; color: var(--suave); }
.ticket-linea .q { font-family: var(--numero); font-size: 0.86rem; color: var(--suave); text-align: right; }
.ticket-linea .nota { grid-column: 2 / -1; font-size: 0.8rem; color: var(--aviso); margin-top: -4px; }
.ticket-total { display: flex; justify-content: space-between; border-top: 2px solid var(--tinta); margin-top: 12px; padding-top: 10px; font-family: var(--numero); font-weight: 600; }

/* ---------- Ventanas (hoja inferior en móvil) ---------- */
.fondo-modal { position: fixed; inset: 0; background: rgba(12, 18, 14, 0.5); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: aparecer 0.15s ease; }
.modal { background: var(--papel); width: min(680px, 100%); max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 20px; padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25); animation: subir 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; }
.modal .cerrar { position: sticky; top: 0; float: right; z-index: 3; margin: -6px -6px 0 0; }
@media (min-width: 720px) { .fondo-modal { align-items: center; } .modal { border-radius: 20px; max-height: 88vh; } }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.aviso-toast { background: var(--tinta); color: var(--papel); padding: 12px 16px; border-radius: 12px; box-shadow: var(--sombra); font-weight: 550; animation: subir 0.2s ease; pointer-events: auto; }
.aviso-toast.mal { background: var(--mal); color: #fff; }
.menu-flotante { position: absolute; z-index: 40; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); padding: 6px; min-width: 200px; }
.menu-flotante button { display: flex; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 8px; cursor: pointer; gap: 8px; align-items: center; }
.menu-flotante button:hover { background: var(--hundido); }

/* ---------- App: cabecera y navegación ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--papel); }
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.barra .envoltura { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tinta); font-family: var(--display); font-weight: 750; font-size: 1.14rem; letter-spacing: -0.02em; white-space: nowrap; }
.logo .marca-icono { width: 30px; height: 30px; flex: none; }
.nav-escritorio { display: none; gap: 4px; margin-left: 12px; }
.nav-escritorio a { text-decoration: none; color: var(--suave); font-weight: 600; padding: 8px 12px; border-radius: 999px; }
.nav-escritorio a[aria-current="page"] { color: var(--tinta); background: var(--hundido); }
.barra .derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--tarjeta); border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(7, 1fr); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.pestanas a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 1px 9px; text-decoration: none; color: var(--suave); font-size: 0.7rem; font-weight: 650; white-space: nowrap; letter-spacing: -0.01em; }
.pestanas a[aria-current="page"] { color: var(--verde); }
.pestanas .icono { width: 24px; height: 24px; }
@media (max-width: 560px) { .barra .derecha .boton.etiqueta span { display: none; } .barra .derecha .boton.etiqueta { padding: 8px 12px; } .barra .derecha .solo-ancho { display: none; } }
@media (min-width: 880px) { .nav-escritorio { display: flex; } .pestanas { display: none; } .avisos { bottom: 24px; } }
.app-main { padding-block: 22px 120px; }
@media (min-width: 880px) { .app-main { padding-block: 30px 60px; } }
.cabecera-vista { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecera-vista .sub { color: var(--suave); margin-top: 4px; }
.banda-demo { background: var(--etiqueta); color: var(--etiqueta-tinta); font-size: 0.84rem; font-weight: 600; }
.banda-demo .envoltura { padding-block: 6px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; }
.banda-demo button { background: transparent; border: 1.5px solid currentColor; border-radius: 99px; padding: 2px 10px; cursor: pointer; font-weight: 650; color: inherit; }
.panel { background: var(--tarjeta); border-radius: var(--r); padding: 18px; box-shadow: var(--sombra); }
.panel + .panel { margin-top: 16px; }
.bloque-pago { background: var(--tinta); color: var(--papel); border-radius: var(--r); padding: 20px; display: grid; gap: 12px; }
.bloque-pago .boton { background: var(--etiqueta); color: var(--etiqueta-tinta); }
.bloque-pago .suave { color: color-mix(in srgb, var(--papel) 75%, transparent); }
.cifra-grande { font-family: var(--display); font-size: 2.6rem; font-weight: 750; line-height: 1; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.plan-op { border: 2px solid var(--linea); border-radius: var(--r); padding: 14px; cursor: pointer; background: var(--tarjeta); text-align: left; display: flex; flex-direction: column; gap: 4px; }
.plan-op[aria-pressed="true"] { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-fondo); }
.plan-op .precio { font-family: var(--numero); font-size: 1.4rem; font-weight: 600; }
.cargando { display: grid; place-items: center; padding: 60px 0; color: var(--suave); gap: 12px; }
.girando { width: 34px; height: 34px; border-radius: 99px; border: 3px solid var(--linea); border-top-color: var(--verde); animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.vacio { text-align: center; padding: 40px 16px; color: var(--suave); display: grid; gap: 10px; justify-items: center; }
.pasos-asistente { display: flex; gap: 6px; margin-bottom: 18px; }
.pasos-asistente i { flex: 1; height: 5px; border-radius: 99px; background: var(--linea); }
.pasos-asistente i.on { background: var(--verde); }
.miembro { border: 1.5px solid var(--linea); border-radius: var(--r); padding: 14px; display: grid; gap: 12px; background: var(--tarjeta); }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla th, .tabla td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); }
.tabla-scroll { overflow-x: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--tarjeta); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sombra); }
.kpi .v { font-family: var(--display); font-size: 1.9rem; font-weight: 750; }
.kpi .t { color: var(--suave); font-size: 0.86rem; }

/* ---------- Web pública ---------- */
.portada { padding-block: 40px 56px; }
.portada .envoltura { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .portada .envoltura { grid-template-columns: 1.05fr 0.95fr; } }
.portada h1 { font-size: clamp(2.3rem, 6.4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.03em; }
.portada h1 em { font-style: normal; background: linear-gradient(transparent 60%, var(--etiqueta) 60%); padding: 0 0.08em; }
.portada .entradilla { font-size: 1.16rem; color: var(--suave); max-width: 34ch; margin-top: 16px; }
.telefono { background: var(--tarjeta); border-radius: 28px; box-shadow: 0 30px 60px rgba(28, 38, 32, 0.16), 0 0 0 10px var(--hundido); padding: 16px; max-width: 380px; width: 100%; margin: 0 auto; display: grid; gap: 10px; }
.telefono .mini { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 6px; border-radius: 12px; background: var(--papel); }
.telefono .mini img { width: 64px; height: 52px; border-radius: 9px; object-fit: cover; }
.telefono .mini strong { font-size: 0.9rem; line-height: 1.2; display: block; }
.seccion { padding-block: 56px; }
.seccion.alterna { background: var(--tarjeta); }
.seccion h2 { margin-bottom: 10px; }
.seccion .intro { color: var(--suave); max-width: 60ch; margin-bottom: 28px; font-size: 1.06rem; }
.ventajas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ventaja { display: grid; gap: 8px; align-content: start; }
.ventaja .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--verde-fondo); color: var(--verde); display: grid; place-items: center; }
.ventaja .ico .icono { width: 24px; height: 24px; }
.como { counter-reset: c; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.como li { list-style: none; counter-increment: c; display: grid; gap: 6px; }
.como li::before { content: counter(c); font-family: var(--numero); font-weight: 600; width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; background: var(--etiqueta); color: var(--etiqueta-tinta); }
.precios { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.precio-tarjeta { background: var(--tarjeta); border-radius: var(--r); padding: 22px; box-shadow: var(--sombra); display: grid; gap: 10px; align-content: start; border: 2px solid transparent; }
.precio-tarjeta.destacada { border-color: var(--tinta); }
.precio-tarjeta .cifra { font-family: var(--display); font-size: 2.4rem; font-weight: 750; }
.precio-tarjeta ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--suave); }
.tabla-ahorro { border-collapse: collapse; width: 100%; max-width: 520px; background: var(--tarjeta); border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); }
.tabla-ahorro th, .tabla-ahorro td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla-ahorro td.num { font-weight: 600; }
.preguntas details { border-bottom: 1px solid var(--linea); padding: 14px 0; }
.preguntas summary { cursor: pointer; font-weight: 650; font-size: 1.04rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.preguntas summary::after { content: "+"; font-family: var(--numero); color: var(--verde); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { margin-top: 8px; color: var(--suave); max-width: 70ch; }
.pie { border-top: 1px solid var(--linea); padding-block: 36px calc(36px + env(safe-area-inset-bottom, 0px)); color: var(--suave); font-size: 0.9rem; }
.pie .envoltura { display: grid; gap: 18px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie a { color: var(--suave); }
.prosa { max-width: 72ch; }
.prosa h1 { margin-bottom: 10px; }
.prosa h2 { font-size: 1.3rem; margin: 30px 0 8px; }
.prosa p, .prosa li { color: var(--tinta); margin-bottom: 10px; }
.prosa ul { padding-left: 20px; }
.migas { font-size: 0.86rem; color: var(--suave); margin-bottom: 14px; }
.migas a { color: var(--suave); }
.receta-publica { display: grid; gap: 28px; }
@media (min-width: 900px) { .receta-publica { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.receta-publica .foto-grande { border-radius: var(--r); overflow: hidden; }
.receta-publica .foto-grande img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cta-banda { background: var(--tinta); color: var(--papel); border-radius: var(--r); padding: 24px; display: grid; gap: 12px; }
.cta-banda .boton { background: var(--etiqueta); color: var(--etiqueta-tinta); justify-self: start; }
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--tarjeta); border-top: 1px solid var(--linea); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1); }
.cookies .envoltura { padding-block: 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* ---------- PWA: instalar, actualizar y sin conexión ---------- */
.aviso-instalar { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--tarjeta); border: 1.5px solid var(--linea); border-radius: var(--r); padding: 12px 12px 12px 14px; margin-bottom: 16px; box-shadow: var(--sombra); }
.aviso-instalar .ico-app .marca-icono { width: 42px; height: 42px; }
.aviso-instalar .fila { flex-wrap: nowrap; gap: 6px; }
@media (max-width: 420px) { .aviso-instalar { grid-template-columns: auto 1fr; } .aviso-instalar .fila { grid-column: 1 / -1; justify-content: flex-end; } }
.pwa-sin-conexion { background: var(--tinta); color: var(--papel); font-size: 0.84rem; font-weight: 600; text-align: center; padding: 7px max(16px, env(safe-area-inset-right, 0px)) 7px max(16px, env(safe-area-inset-left, 0px)); }
.pwa-barra { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 65; width: min(460px, calc(100% - 32px)); background: var(--tinta); color: var(--papel); border-radius: 14px; padding: 10px 10px 10px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; box-shadow: var(--sombra); animation: subir 0.2s ease; font-weight: 550; }
.pantalla-publica .pwa-barra, body:not(:has(.pestanas)) .pwa-barra { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 880px) { .pwa-barra { bottom: 24px; } }
/* En la app instalada no hace falta el aviso de instalar ni la banda de la web */
@media (display-mode: standalone) { .solo-navegador { display: none !important; } }

/* ---------- Nutrición: complementos, consejo y equilibrio ---------- */
.extras { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.extra { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--verde); font-weight: 550; }
.extra .icono { width: 15px; height: 15px; }
.mini-extras { font-size: 0.72rem; color: var(--verde); font-weight: 600; }
.nota-horario { display: flex; gap: 8px; align-items: center; color: var(--suave); font-size: 0.9rem; margin: -4px 0 14px; }
.nota-horario .icono { width: 18px; height: 18px; color: var(--verde); }
.resumen-dia { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.resumen-dia .chip { cursor: default; }
.resumen-dia .chip.bien { background: var(--verde-fondo); border-color: transparent; }
.consejo { display: grid; grid-template-columns: auto 1fr; gap: 10px; background: var(--verde-fondo); border-radius: var(--r-s); padding: 12px 14px; font-size: 0.92rem; }
.consejo .icono { color: var(--verde); margin-top: 2px; }
.consejo p { margin-top: 2px; }
.balance { background: var(--tarjeta); border-radius: var(--r); box-shadow: var(--sombra); padding: 14px 16px; margin-bottom: 16px; }
.balance summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.balance ul { list-style: none; padding: 0; margin: 12px 0 8px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.balance li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.92rem; }
.balance li .icono { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.balance li.bien .icono { color: var(--ok); }
.balance li.mejorable .icono { color: var(--aviso); }

/* Lista de la compra: envase y detalle */
.ticket-linea .detalle { grid-column: 2 / -1; font-size: 0.8rem; color: var(--suave); margin-top: -4px; }
.ticket-linea .q { white-space: normal; max-width: 13em; }
.ticket-subtotal { display: flex; justify-content: space-between; padding-top: 6px; font-family: var(--numero); color: var(--suave); font-size: 0.9rem; }

/* ---------- Nombre, perfil y objetivo por día ---------- */
.avatar-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--tarjeta); color: var(--tinta); cursor: pointer; font: inherit; font-weight: 650; min-height: 40px; max-width: 220px; }
.avatar-chip[aria-current="page"] { border-color: var(--verde); }
.avatar-chip .icono { width: 16px; height: 16px; color: var(--suave); }
.avatar-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 999px; display: inline-grid; place-items: center; background: var(--verde); color: var(--papel); font-weight: 700; font-size: 0.95rem; }
.avatar.otro { background: var(--hundido); color: var(--tinta); }
.avatar.grande { width: 48px; height: 48px; font-size: 1.3rem; }
@media (max-width: 560px) { .avatar-nombre, .avatar-chip > .icono { display: none; } .avatar-chip { padding: 3px; border-width: 0; background: transparent; } }
.saludo { margin: 0 0 2px; font-weight: 650; color: var(--verde); font-size: 1.05rem; }
.obj-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid currentColor; border-radius: 999px; padding: 4px 10px; background: transparent; font: inherit; font-weight: 650; font-size: 0.86rem; cursor: pointer; color: var(--verde); }
.obj-chip .icono { width: 14px; height: 14px; }
.obj-chip.peque { font-size: 0.72rem; padding: 2px 8px; align-self: flex-start; }
.obj-chip.obj-proteina { color: var(--prot); } .obj-chip.obj-hidratos { color: var(--hc); } .obj-chip.obj-grasas { color: var(--gr); }
.obj-semana { display: grid; gap: 8px; }
.obj-fila { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 10px; }
.obj-fila select { min-height: 42px; }
.obj-dia-nombre { font-weight: 650; }
@media (max-width: 340px) { .obj-fila { grid-template-columns: 1fr; gap: 4px; } }
.obj-fila { grid-template-columns: minmax(5.5em, 7.5em) minmax(0, 1fr); }
.obj-fila select { width: 100%; min-width: 0; }
.indice-perfil { margin-bottom: 16px; }
.indice-perfil .chip { text-decoration: none; color: var(--tinta); }
.indice-perfil .chip .icono { width: 16px; height: 16px; }
.perfil-pagina > section { scroll-margin-top: 84px; }
.perfil-pagina { padding-bottom: 96px; }
.miembro-tarjeta { border: 1.5px solid var(--linea); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 12px; background: var(--tarjeta); }
.miembro-tarjeta.abierta { border-color: var(--verde); }
.miembro-tarjeta p { margin: 0; }
.miembro-tarjeta .miembro { border: 0; padding: 0; }
.barra-guardar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--tarjeta); border-top: 1.5px solid var(--verde); box-shadow: 0 -6px 20px rgba(0,0,0,.08); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 879px) { .barra-guardar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; } }
.tarjeta-perfil { border: 2px solid var(--verde); }
.tarjeta-perfil h2 { margin: 0; }

/* ---------- Cuenta gratis: su día desbloqueado ---------- */
.dia-col.dia-gratis { outline: 2.5px solid var(--verde); }
.dia-col.dia-bloqueado { background: var(--hundido); }
.dia-col.dia-bloqueado .hueco { background: var(--tarjeta); opacity: 0.75; }
.tit.borroso { filter: blur(5px); user-select: none; pointer-events: none; }
.sello.gratis { background: var(--verde-fondo); color: var(--verde); align-self: flex-start; }
.sello.gratis .icono, .candado-dia .icono { width: 13px; height: 13px; }
.candado-dia { border: 0; cursor: pointer; align-self: flex-start; background: var(--etiqueta); color: var(--etiqueta-tinta); font: inherit; font-size: 0.74rem; font-weight: 650; }

/* ---------- Admin: fotos de Pexels ---------- */
.barra-progreso { height: 10px; border-radius: 99px; background: var(--hundido); overflow: hidden; }
.barra-progreso i { display: block; height: 100%; background: var(--verde); }
.rejilla-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.foto-banco { border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; background: var(--hundido); cursor: pointer; display: flex; flex-direction: column; text-align: left; font: inherit; color: var(--tinta); }
.foto-banco img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.foto-banco span { font-size: 0.72rem; padding: 4px 8px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-banco:hover, .foto-banco.elegida { border-color: var(--verde); }
.foto-banco:disabled { cursor: wait; opacity: 0.6; }
.foto-banco.elegida { opacity: 1; }
.credito-foto { font-size: 0.74rem; color: var(--suave); }

/* ---------- Plan Familiar: pestañas por persona y platos aparte ---------- */
.pestanas-personas { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; margin: 4px 0 6px; scrollbar-width: thin; }
.pestanas-personas button { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 42px; padding: 5px 14px 5px 6px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--tarjeta); color: var(--tinta); font: inherit; font-weight: 650; cursor: pointer; }
.pestanas-personas button:first-child { padding-left: 12px; }
.pestanas-personas button .icono { width: 18px; height: 18px; }
.pestanas-personas button[aria-selected="true"] { background: var(--verde); border-color: var(--verde); color: var(--papel); }
.pestanas-personas button[aria-selected="true"] .avatar { background: var(--papel); color: var(--verde); }
.avatar.mini { width: 28px; height: 28px; font-size: 0.82rem; }
.nota-persona { display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; color: var(--suave); margin: 0 0 14px; }
.nota-persona .icono { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.aparte-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.84rem; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: var(--hundido); }
.aparte-linea > .icono { width: 15px; height: 15px; }
.hueco .aparte-linea { display: block; margin-top: 4px; padding: 3px 7px; font-size: 0.74rem; cursor: pointer; background: var(--tarjeta); border-left: 3px solid var(--hc); border-radius: 6px; }
.sello.propio { background: color-mix(in srgb, var(--hc) 22%, transparent); color: var(--tinta); }
.sello.propio .icono { width: 13px; height: 13px; }
.hueco.propio { box-shadow: inset 3px 0 0 var(--hc); }
.enlace { border: 0; background: none; padding: 0; font: inherit; font-weight: 650; color: var(--verde); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }

/* ---------- Objetivo de cada persona y barra de guardado ---------- */
.obj-persona { display: grid; gap: 10px; margin: 0 0 14px; }
.obj-persona .obj-chip { justify-self: start; }
.extras-persona { border: 1.5px dashed var(--linea); border-radius: var(--r); padding: 10px 14px; background: var(--tarjeta); font-size: 0.9rem; margin-bottom: 14px; }
.extras-persona ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 3px; }
.mini-extras.extra-persona { color: var(--hc); font-weight: 600; }
.barra-guardar.guardado { border-top-color: var(--verde); background: var(--verde-fondo); }
.barra-guardar.guardado .icono { color: var(--verde); }
.nav-escritorio a { white-space: nowrap; }
@media (min-width: 880px) and (max-width: 1180px) { .nav-escritorio { margin-left: 4px; gap: 0; } .nav-escritorio a { padding-left: 9px; padding-right: 9px; } .barra .derecha .boton.etiqueta span, .avatar-chip .avatar-nombre, .avatar-chip > .icono { display: none; } .barra .derecha .boton.etiqueta { padding: 8px 12px; } .avatar-chip { padding: 3px; } }

/* ---------- Web pública: recetas y días con candado ---------- */
.receta-tarjeta { position: relative; }
.receta-tarjeta.cerrada .foto { filter: blur(3px) saturate(0.85); }
.candado.abierta { background: var(--verde); }
.candado svg { flex: none; }
.dia-cerrado { position: relative; }
.dia-cerrado .borroso { filter: blur(5px); user-select: none; }
.dia-cerrado > .candado { z-index: 1; text-decoration: none; }
.bloque-pago h2 { display: flex; align-items: center; gap: 8px; color: var(--papel); }
.bloque-pago a:not(.boton) { color: var(--etiqueta); }
/* Tarjeta con candado: sin nombre ni datos, todo borroso */
.foto-oculta, .receta-tarjeta .foto.foto-oculta { aspect-ratio: 4 / 3; width: 100%; background: radial-gradient(circle at 35% 45%, #e9b44c 0 14%, transparent 15%), radial-gradient(circle at 62% 55%, #6a9a5b 0 12%, transparent 13%), radial-gradient(circle at 50% 50%, #fff 0 34%, transparent 35%), var(--hundido) !important; filter: blur(9px); transform: scale(1.1); }
.receta-tarjeta.cerrada { overflow: hidden; }
.receta-tarjeta.cerrada .cuerpo { filter: blur(5px); user-select: none; pointer-events: none; }
.mini.cerrado .borroso { filter: blur(5px); user-select: none; }

/* ---------- Tras suscribirse: último paso, el perfil ---------- */
.bienvenida-plan { border: 2px solid var(--verde); background: var(--verde-fondo); margin-bottom: 16px; }
.bienvenida-plan .mayus { display: inline-flex; align-items: center; gap: 6px; color: var(--verde); font-weight: 700; }
.bienvenida-plan .mayus .icono { width: 16px; height: 16px; }
.bienvenida-plan h2 { margin: 0; }
.pasos-bienvenida { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- Portada: atajo a comer barato ---------- */
.atajo-ahorro { display: flex; align-items: center; gap: 14px; margin: 4px 0 28px; padding: 14px 18px; border-radius: var(--r); background: var(--etiqueta); color: var(--etiqueta-tinta); text-decoration: none; box-shadow: var(--sombra); transition: transform .15s ease; }
.atajo-ahorro:hover { transform: translateY(-2px); }
.atajo-ahorro .ico { width: 44px; height: 44px; flex: none; border-radius: 999px; background: rgba(255,255,255,.55); display: grid; place-items: center; }
.atajo-ahorro .ico .icono { width: 24px; height: 24px; }
.atajo-ahorro .txt { display: grid; gap: 2px; flex: 1; }
.atajo-ahorro .txt strong { font-family: var(--display); font-size: 1.15rem; }
.atajo-ahorro .txt span { font-size: 0.9rem; opacity: .85; }
.atajo-ahorro .flecha { font-size: 1.5rem; font-weight: 700; }

/* Comer barato: bloque gancho */
.gancho-ahorro { margin: 40px 0 8px; padding: clamp(22px, 4vw, 38px); border-radius: 22px; background: var(--verde-fondo); display: grid; gap: 14px; }
.gancho-ahorro > .mayus { color: var(--verde); }
.gancho-ahorro h2 { margin: 0; font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.15; max-width: 22ch; }
.gancho-ahorro .intro { margin: 0; max-width: 60ch; }
.gancho-ahorro .ventajas { margin: 10px 0 6px; }
.gancho-ahorro .ventaja .ico { background: var(--tarjeta); }
.gancho-ahorro > .boton { justify-self: start; }

/* 7 pestañas en móvil: textos e iconos algo más pequeños en pantallas estrechas */
@media (max-width: 400px) { .pestanas a { font-size: 0.64rem; } .pestanas .icono { width: 22px; height: 22px; } }
.gancho-ahorro .ventajas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Semanas guardadas */
.solo-movil { display: inline-flex; }
@media (min-width: 880px) { .solo-movil { display: none !important; } }
.boton-guardados { gap: 6px; padding: 7px 12px; }
.boton-guardados .icono { width: 17px; height: 17px; }
.boton-guardados[aria-current="page"] { background: var(--verde-fondo); border-color: var(--verde); color: var(--verde); }
.boton-guardar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--etiqueta) 35%, transparent); }
.info-caja.guardada { background: var(--verde-fondo); border-color: color-mix(in srgb, var(--verde) 35%, transparent); color: var(--tinta); gap: 10px; }
.info-caja.guardada .icono { color: var(--verde); vertical-align: -3px; }
.sello.ok { background: var(--verde-fondo); color: var(--verde); }
.sello.suave { color: var(--suave); }
.guardados { display: grid; gap: 18px; }
.tarjeta-guardada h2 { margin: 0; font-size: 1.15rem; }
.tarjeta-guardada p { margin: 2px 0 0; }
table.vistazo { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.vistazo th, table.vistazo td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.vistazo thead th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 700; }
table.vistazo tbody th { width: 46px; color: var(--suave); font-weight: 700; }
table.vistazo tbody tr:last-child th, table.vistazo tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) { .barra .logo span { font-size: 1rem; } .boton-guardados { padding: 6px 10px; } }

.guardados > *, .tarjeta-guardada > * { min-width: 0; }
.tarjeta-guardada > .fila.entre { flex-wrap: wrap; align-items: flex-start; }
@media (max-width: 520px) { table.vistazo { font-size: 0.84rem; } table.vistazo th, table.vistazo td { padding: 6px 6px; } table.vistazo tbody th { width: 34px; } }
/* 8 secciones en la cabecera de ordenador: más compacta en pantallas medianas */
@media (min-width: 880px) and (max-width: 1100px) { .nav-escritorio a { padding: 7px 7px; font-size: 0.9rem; } .barra .logo span { display: none; } }

/* Portada: atajo sin enlace y bloque de Máximo ahorro sin precios */
.atajo-ahorro { cursor: default; }
.atajo-ahorro:hover { transform: none; }
.bloque-ahorro { display: grid; gap: 28px; align-items: center; }
@media (min-width: 880px) { .bloque-ahorro { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.bloque-ahorro h2 { margin: 0; }
.lista-ahorro { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.lista-ahorro li { display: flex; gap: 12px; align-items: flex-start; }
.lista-ahorro li .icono { flex: none; width: 22px; height: 22px; color: var(--verde); margin-top: 2px; }
.reclamo-ahorro { background: var(--etiqueta); color: var(--etiqueta-tinta); border-radius: 22px; padding: clamp(24px, 4vw, 36px); display: grid; gap: 10px; box-shadow: var(--sombra); transform: rotate(-1.2deg); }
.reclamo-ahorro .ico { width: 52px; height: 52px; border-radius: 999px; background: rgba(255,255,255,.55); display: grid; place-items: center; }
.reclamo-ahorro .ico .icono { width: 28px; height: 28px; }
.reclamo-ahorro .grande { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 3.2vw, 2rem); line-height: 1.15; }
.reclamo-ahorro .peque { margin: 0; opacity: .85; }

/* Objetivo del día en el calendario: se nota que se puede cambiar */
.obj-chip.peque { gap: 4px; }
.obj-chip.peque .icono { width: 12px; height: 12px; opacity: 1; stroke-width: 2.2; }
.obj-chip:hover, .obj-chip:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); }

/* Registro con plan elegido */
.plan-elegido { background: var(--verde-fondo); border-radius: var(--r); padding: 14px; margin: 4px 0 14px; gap: 10px; }
.plan-elegido .segmentos { justify-content: flex-start; }
.plan-elegido .segmentos button { font-size: 0.86rem; }

/* Panel de administración: resumen */
.kpi .s { color: var(--suave); font-size: 0.76rem; margin-top: 2px; }
.aviso-admin { display: flex; gap: 10px; align-items: flex-start; background: var(--aviso-fondo); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--aviso) 45%, transparent); border-radius: var(--r-s); padding: 10px 14px; margin-bottom: 10px; font-size: 0.92rem; }
.aviso-admin.mal { background: var(--mal-fondo); border-color: color-mix(in srgb, var(--mal) 45%, transparent); }
.aviso-admin .icono { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.leyenda-graf { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--suave); }
.leyenda-graf i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.grafica-wrap { overflow-x: auto; }
.grafica { width: 100%; min-width: 520px; height: auto; display: block; }
.grafica .rejilla-g { stroke: var(--linea); stroke-width: 1; }
.grafica .eje-g { fill: var(--suave); font-size: 11px; font-family: inherit; }
.c1, .leyenda-graf .c1 { fill: var(--prot); background: var(--prot); }
.c2, .leyenda-graf .c2 { fill: var(--verde); background: var(--verde); }
.c3, .leyenda-graf .c3 { fill: var(--mal); background: var(--mal); }
.barras-motivos { display: grid; gap: 8px; }
.fila-barra { display: grid; grid-template-columns: minmax(120px, 1.3fr) 2fr auto; gap: 10px; align-items: center; font-size: 0.9rem; }
.fila-barra .barra { background: var(--hundido); border-radius: 99px; height: 10px; overflow: hidden; }
.fila-barra .barra i { display: block; height: 100%; background: var(--hc); border-radius: 99px; }
.mov-alta, .mov-reactivada { color: var(--ok); }
.mov-fin, .mov-impago { color: var(--mal); }
.mov-baja { color: var(--aviso); }

/* Lista de la compra por días */
.segmentos button { display: inline-flex; align-items: center; gap: 6px; }
.segmentos button .icono { width: 17px; height: 17px; }
.dias-compra .chip[aria-pressed="true"] .suave { color: inherit; opacity: .75; }

/* Nevera: alimentos que no están en la despensa de la app */
.chip-nuevo { border-style: dashed; }
.sello.quien { gap: 6px; padding-left: 3px; }
.sello.quien .avatar.mini { width: 20px; height: 20px; font-size: 0.68rem; }

/* Recordatorios */
#sec-avisos select { font: inherit; padding: 4px 6px; border-radius: 8px; border: 1.5px solid var(--linea); background: var(--tarjeta); color: var(--tinta); }
.ok-texto { color: var(--ok); margin: 0; display: flex; gap: 6px; align-items: center; }
.ok-texto .icono { width: 16px; height: 16px; }
.aviso-movil { display: flex; gap: 12px; align-items: flex-start; background: var(--hundido); border-radius: 16px; padding: 12px 14px; }
.aviso-movil p { margin: 2px 0 0; font-size: 0.9rem; }
.aviso-movil-icono { flex: none; width: 36px; height: 36px; }
.aviso-movil-icono svg { width: 36px; height: 36px; }

/* Platos para llevar en táper (días marcados en el perfil) */
.sello.llevar { background: #23446b; color: #fff; }
.sello.llevar .icono { width: 13px; height: 13px; }
.sello.llevar.mini { align-self: flex-start; font-size: 0.7rem; padding: 1px 6px; }
.llevar-caja { display: flex; gap: 8px; align-items: flex-start; }
.llevar-caja .icono { flex: none; margin-top: 2px; }
:root[data-theme="dark"] .sello.llevar { background: #9cc0ea; color: #10233a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sello.llevar { background: #9cc0ea; color: #10233a; } }
/* Ficha: la foto sube hasta arriba, bajo el botón de cerrar */
.modal:has(.ficha-foto) .cerrar { float: none; display: flex; margin: -6px -6px -54px auto; background: var(--papel); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
/* En móvil estrecho, los botones largos pasan a dos líneas en vez de salirse */
@media (max-width: 480px) { .boton { white-space: normal; text-align: center; max-width: 100%; } #desbloquear { width: 100%; } }

/* Lo que lleva el atributo hidden no se ve nunca (aunque su clase tenga display) */
[hidden] { display: none !important; }
/* Receta pública en móvil: foto, título e ingredientes, y después el paso a paso */
@media (max-width: 899px) {
  .receta-publica > .pila:first-child { display: contents; }
  .receta-publica > .pila:first-child > * { order: 2; }
  .receta-publica > .pila:first-child > .foto-grande, .receta-publica > .pila:first-child > .foto-grande + p { order: 0; }
  .receta-publica > .pila:first-child > .foto-grande + p { margin-top: -20px; }
  .receta-publica > .pila:nth-child(2) { order: 1; }
}

/* ¿Qué te llevas en táper? (perfil) */
.taper-rejilla { display: grid; grid-template-columns: minmax(74px, auto) repeat(7, minmax(34px, 44px)); gap: 6px; align-items: center; justify-content: start; }
.taper-dia { text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--suave, #5b655f); }
.taper-mom { font-size: 0.9rem; font-weight: 600; }
.taper-c { height: 38px; border-radius: 10px; border: 1.5px solid var(--linea); background: var(--tarjeta); color: var(--suave, #8a938e); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.taper-c .icono { width: 17px; height: 17px; opacity: 0.35; }
.taper-c[aria-pressed="true"] { background: #23446b; border-color: #23446b; color: #fff; }
.taper-c[aria-pressed="true"] .icono { opacity: 1; }
.taper-c:focus-visible { outline: 3px solid var(--etiqueta, #f2c641); outline-offset: 2px; }
.taper-atajos { flex-wrap: wrap; gap: 4px 10px; }
.taper-atajos .boton { min-height: 36px; padding-inline: 4px; }
:root[data-theme="dark"] .taper-c[aria-pressed="true"] { background: #9cc0ea; border-color: #9cc0ea; color: #10233a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .taper-c[aria-pressed="true"] { background: #9cc0ea; border-color: #9cc0ea; color: #10233a; } }
@media (max-width: 400px) { .taper-rejilla { grid-template-columns: 66px repeat(7, 1fr); gap: 4px; } .taper-mom { font-size: 0.82rem; } }
/* Resumen del táper en Mi semana */
.nota-taper { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; font-size: 0.92rem; }
.nota-taper .icono { flex: none; margin-top: 2px; color: #23446b; }
.nota-taper a { font-weight: 650; margin-left: 4px; }
/* Sección del perfil a la que se llega desde un enlace */
.resaltado { box-shadow: 0 0 0 3px var(--etiqueta, #f2c641); transition: box-shadow 0.4s; }
/* Días de la semana (L M X J V S D): siempre en una sola fila */
#dias-trab { flex-wrap: nowrap; gap: 6px; }
#dias-trab .chip { width: 42px; height: 42px; padding: 0; justify-content: center; flex: 0 1 42px; min-width: 34px; }
.taper-atajos .boton { font-size: 0.86rem; }
main [id], section[id] { scroll-margin-top: 36px; }
/* Vista previa en un marco alto: lo fijo abajo pasa arriba para que se vea */
.marco-alto body { display: flex; flex-direction: column; }
.marco-alto .pestanas { position: static; order: -1; border-top: 0; border-bottom: 1px solid var(--linea); }
.marco-alto .barra { order: -2; }
.marco-alto .fondo-modal { position: absolute; inset: 0 0 auto 0; min-height: 100%; align-items: flex-start; padding-top: 16px; }
.marco-alto .modal { max-height: none; overflow: visible; border-radius: 20px; }
.marco-alto .avisos { top: 12px; bottom: auto; }
.marco-alto #banda { order: -3; }
/* Botones de Mi semana en el móvil: de dos en dos, sin una columna larguísima */
@media (max-width: 560px) {
  .acciones-semana { gap: 8px; }
  .acciones-semana .boton { flex: 1 1 calc(50% - 4px); padding-inline: 8px; gap: 6px; font-size: 0.88rem; white-space: nowrap; }
  .acciones-semana .boton .icono { width: 17px; height: 17px; }
  .acciones-semana .boton-icono + .boton-icono + .boton { flex-basis: calc(100% - 104px); }
}

/* Instalar la app: pasos con icono y guía de iPhone con flecha */
.inst-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.inst-paso { display: grid; grid-template-columns: 24px 36px 1fr; gap: 10px; align-items: center; }
.inst-num { width: 24px; height: 24px; border-radius: 50%; background: var(--etiqueta); color: #1c2620; font-weight: 700; font-size: 0.82rem; display: inline-flex; align-items: center; justify-content: center; }
.inst-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--hundido); display: inline-flex; align-items: center; justify-content: center; }
.inst-ico svg, .inst-inline { width: 20px; height: 20px; fill: none; stroke: #0a84ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inst-inline { width: 16px; height: 16px; vertical-align: -3px; }
.inst-ico svg circle, .inst-inline circle { fill: #0a84ff; stroke: none; }
.guia-ios { position: fixed; inset: 0; z-index: 80; background: rgba(12, 18, 14, 0.55); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 16px 14px calc(10px + env(safe-area-inset-bottom, 0px)); animation: aparecer 0.15s ease; }
.guia-ios.arriba { flex-direction: column-reverse; justify-content: flex-end; align-items: flex-end; padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
.guia-caja { position: relative; background: var(--tarjeta); color: var(--tinta); border-radius: 18px; padding: 18px 16px 16px; width: min(420px, 100%); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); display: grid; gap: 12px; }
.guia-tit { font-family: var(--display); font-size: 1.15rem; padding-right: 36px; }
.guia-cerrar { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--hundido); color: var(--tinta); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.guia-flecha { width: 40px; height: 56px; margin-top: 4px; animation: guia-bote 1.1s ease-in-out infinite; }
.guia-ios.arriba .guia-flecha { margin: 0 18px 4px 0; transform: rotate(180deg); animation-name: guia-bote-arriba; }
.guia-flecha svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes guia-bote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes guia-bote-arriba { 0%, 100% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .guia-flecha { animation: none; } }
.ticket-tachado { margin: 4px 0 0; font-size: 0.86rem; color: var(--suave); text-align: right; }
/* Logo ListoPlate: «Listo» en oscuro y «Plate» en amarillo */
.logo .marca-icono { width: 34px; height: 34px; }
.logo-txt { font-family: var(--texto); font-weight: 800; letter-spacing: -0.03em; font-size: 1.22rem; }
.logo-txt .logo-b { color: #f0b90b; }
.aviso-instalar .ico-app .marca-icono, .aviso-movil-icono svg { border-radius: 10px; box-shadow: 0 0 0 1px var(--linea); }
/* Modo oscuro: el subrayado amarillo de la portada, más suave para que el texto claro se lea */
:root[data-theme="dark"] .portada h1 em { background: linear-gradient(transparent 62%, rgba(243, 198, 63, 0.45) 62%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portada h1 em { background: linear-gradient(transparent 62%, rgba(243, 198, 63, 0.45) 62%); } }
/* Botón «Volver» de la app */
.barra .volver { margin-right: 2px; flex: none; }
@media (max-width: 430px) { .boton-guardados span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .boton-guardados { padding: 8px 10px; } }
/* ¿Cómo te gusta comer? (entrante, principal o ambos) */
.estilo-fila { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: center; }
.estilo-mom { font-weight: 600; font-size: 0.92rem; }
@media (max-width: 460px) { .estilo-fila { grid-template-columns: 1fr; gap: 6px; } }