/* ==========================================================================
   Rediseño 2026-09 — OVERLAY de PREVIEW. Se carga DESPUÉS de app.css y SOLO en
   modo preview (enlace ?preview=<token>). Redefine tokens y tarjetas → toda la
   app se ve cálida sin tocar el CSS por defecto de producción.
   Al aprobar el rediseño, esto se funde en app.css y se retira el gating.
   ========================================================================== */
:root{
  --bg:#fbf8f2; --surface:#ffffff; --surface-2:#f3eee4;
  --text:#221e17; --text-muted:#8b8273; --border:#ece5d7;
  --accent-text:#0b8a57; --accent-soft:#e6f6ed;
  --success-text:#0b8a57;
  --danger-bg:#fdf0ec; --danger-text:#d1502f; --danger-border:#f6d3c6;
  --shadow-sm:0 2px 4px rgba(60,48,28,.05), 0 12px 28px -8px rgba(60,48,28,.14);
  --shadow-md:0 22px 46px -12px rgba(60,48,28,.20);
  --radius:22px; --radius-sm:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#17130e; --surface:#211c15; --surface-2:#2b251c;
    --text:#f3eee4; --text-muted:#a79d8b; --border:#332c21;
    --accent-text:#6fe7b4; --accent-soft:rgba(34,217,138,.14);
    --danger-bg:rgba(230,120,90,.16); --danger-text:#f0a58c; --danger-border:rgba(230,120,90,.38);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 14px 38px rgba(0,0,0,.6);
  }
}
[data-theme="dark"]{
  --bg:#17130e; --surface:#211c15; --surface-2:#2b251c;
  --text:#f3eee4; --text-muted:#a79d8b; --border:#332c21;
  --accent-text:#6fe7b4; --accent-soft:rgba(34,217,138,.14);
  --danger-bg:rgba(230,120,90,.16); --danger-text:#f0a58c; --danger-border:rgba(230,120,90,.38);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 14px 38px rgba(0,0,0,.6);
}

/* --- Tarjetas de plato: más limpias y con carácter --- */
.meal-card{ border-radius:var(--radius); transition:transform .18s ease, box-shadow .18s ease; }
.meal-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
@media (prefers-reduced-motion:reduce){ .meal-card{ transition:none; } .meal-card:hover{ transform:none; } }
.meal-card__body{ padding:1.25rem 1.25rem 1.3rem; }
.meal-card__title{
  font-family:'Plus Jakarta Sans','Inter',sans-serif; font-size:1.18rem; font-weight:700;
  letter-spacing:-.01em; line-height:1.24;
}
/* meta en una línea sutil (adiós al amasijo de chips) */
.meal-card__meta{ align-items:center; gap:.35rem .55rem; margin-bottom:.95rem; }
.meal-tag{ font-size:.82rem; font-weight:500; color:var(--text-muted); background:none; padding:0; border-radius:0; font-variant-numeric:tabular-nums; }
.meal-tag + .meal-tag::before{ content:'·'; margin-right:.55rem; color:var(--border); }
/* ingredientes / pasos: acción secundaria, tono apagado */
.meal-card__ings-wrap summary,
.meal-card__steps summary{ color:var(--text-muted); }

/* ===== Fase 2 (preview): hero + planner día a día ===== */
#pv-top{ margin-bottom:.2rem; }
.pv-hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 90% -10%, rgba(255,255,255,.22), transparent 55%), linear-gradient(150deg,#17b97a,#0a8f5c);
  color:#fff; border-radius:var(--radius); padding:1.15rem 1.3rem; margin-bottom:.9rem;
  box-shadow:0 16px 30px -16px rgba(10,120,80,.6);
}
.pv-hero__k{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.pv-hero__h{ font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:1.55rem; letter-spacing:-.01em; margin:.12rem 0 .12rem; }
.pv-hero__sub{ font-size:.92rem; opacity:.94; }
.pv-hero__egg{ position:absolute; right:-10px; bottom:-16px; font-size:5rem; opacity:.14; transform:rotate(-8deg); pointer-events:none; }
.pv-daybar{ display:flex; gap:.4rem; overflow-x:auto; padding:.1rem .1rem .7rem; margin-bottom:.3rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pv-daybar::-webkit-scrollbar{ display:none; }
.pv-pill{
  flex:0 0 auto; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.9rem;
  padding:.52rem 1rem; border-radius:999px; background:var(--surface-2); color:var(--text-muted);
  text-transform:capitalize; transition:background .15s ease, color .15s ease;
}
.pv-pill.is-active{ background:var(--accent); color:#04120c; }
/* UN día cada vez (a todos los anchos): la navegación son las píldoras, así que
   no tiene sentido ver la semana entera seguida. En pantallas anchas el día se
   centra en una columna cómoda. */
.menu-grid.pv-single .menu-day{ display:none; }
.menu-grid.pv-single .menu-day.pv-active{ display:block; flex-basis:100%; width:100%; max-width:560px; margin:0 auto; }
.menu-grid.pv-single .add-day-wrap{ display:none; }

/* ===== Fase 3 (preview): SHELL moderno tipo app nativa ===== */
.pv-hidden{ display:none !important; }
body.pv-app{ padding-top:58px; padding-bottom:58px; overflow-x:hidden; overscroll-behavior-x:none; } /* sin rebote lateral al estirar de los bordes (V2.55) */
body.pv-noscroll{ overflow:hidden; }

/* App bar */
.pv-appbar{
  position:fixed; top:0; left:0; right:0; height:58px; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:0 8px;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--border);
}
.pv-icon{
  width:42px; height:42px; display:grid; place-items:center; color:var(--text);
  background:none; border:0; border-radius:13px; cursor:pointer; text-decoration:none;
}
.pv-icon:hover{ background:var(--surface-2); }
.pv-wordmark{ font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:1.3rem; letter-spacing:-.02em; color:var(--text); text-decoration:none; }

/* Drawer */
.pv-backdrop{ position:fixed; inset:0; background:rgba(20,16,10,.5); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s; z-index:60;
  /* el fondo visible ES el backdrop: sin esto, iOS deja arrastrar el viewport
     (rebote elástico) aunque el body esté congelado */
  touch-action:none; overscroll-behavior:contain; }
.pv-backdrop.is-open{ opacity:1; visibility:visible; }
.pv-drawer{
  position:fixed; top:0; left:0; bottom:0; width:84%; max-width:342px; z-index:70;
  background:var(--surface); box-shadow:26px 0 70px -24px rgba(0,0,0,.45);
  border-radius:0 26px 26px 0;
  transform:translateX(-104%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.pv-drawer.is-open{ transform:none; }
.pv-drawer__head{ display:flex; align-items:center; justify-content:flex-end; padding:14px 14px 8px; }
.pv-drawer__logo{ display:flex; align-items:center; color:var(--text); text-decoration:none; }
.pv-drawer__logo .app-nav__logo{ height:30px; width:auto; display:block; color:var(--text); }
.pv-drawer__close{ width:38px; height:38px; color:var(--text-muted); }
.pv-drawer__list{ padding:8px 12px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; flex:1; }
.pv-drawer__item{
  display:flex; align-items:center; gap:13px; padding:9px 10px; border-radius:15px;
  color:var(--text); text-decoration:none; font-weight:600; font-size:1.02rem;
}
.pv-drawer__ic{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:12px; background:var(--surface-2); color:var(--text);
}
.pv-drawer__ic svg{ width:21px; height:21px; }
.pv-drawer__item:hover{ background:var(--surface-2); }
.pv-drawer__item:hover .pv-drawer__ic{ background:var(--border); }
.pv-drawer__item.is-active{ background:var(--accent-soft); color:var(--accent-text); }
.pv-drawer__item.is-active .pv-drawer__ic{ background:var(--accent); color:#04120c; }
.pv-drawer__foot{
  padding:12px 16px calc(16px + env(safe-area-inset-bottom,0)); border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:11px;
}
.pv-drawer__cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px; border-radius:15px; background:var(--accent); color:#04120c;
  font-weight:700; text-decoration:none;
}
.pv-drawer__cta svg{ width:20px; height:20px; }
.pv-drawer__legal{ text-align:center; color:var(--text-muted); text-decoration:none; font-size:.86rem; }

/* La antigua cabecera de acciones del planner: ya no hace falta arriba (el menú
   y el generar viven en el shell) → la escondemos en el preview. */
.pv-app .planner-head{ display:none !important; }

/* Acciones dentro del hero (reemplazan la barra vieja). */
.pv-hero__actions{ display:flex; gap:.5rem; margin-top:.9rem; position:relative; }
.pv-hero__btn{
  border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.92rem;
  padding:.7rem 1rem; border-radius:14px; background:rgba(255,255,255,.18); color:#fff;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.pv-hero__btn--primary{ background:#fff; color:#0a7a4f; box-shadow:0 8px 18px -8px rgba(0,0,0,.35); }

/* Ajuste: hero menos protagonista (era un bloque verde enorme). Tarjeta clara
   compacta, verde solo en la acción principal, sin aguacate ni frase larga. */
.pv-hero{ background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-sm); padding:.85rem 1rem .95rem; margin-bottom:.7rem; }
.pv-hero__k{ color:var(--accent-text); opacity:1; }
.pv-hero__h{ font-size:1.1rem; margin:.1rem 0 0; }
.pv-hero__sub{ display:none; }
.pv-hero__egg{ display:none; }
.pv-hero__actions{ margin-top:.7rem; }
.pv-hero__btn{ background:var(--surface-2); color:var(--text); -webkit-backdrop-filter:none; backdrop-filter:none; font-size:.88rem; padding:.6rem .95rem; }
.pv-hero__btn--primary{ background:var(--accent); color:#04120c; box-shadow:none; }

/* ===== Ajustes de revisión móvil ===== */
/* Solo menú lateral: fuera la barra de pestañas inferior (doble menú). */
.pv-tabs{ display:none !important; }
body.pv-app{ padding-bottom:28px; }
/* Sobran con el shell nuevo. */
.pv-app #install-banner, .pv-app #today-fab{ display:none !important; }
/* La cabecera «Lunes ×» era una barra blanca a sangre y redundante (la píldora
   ya dice el día). Fuera en preview. */
.pv-app .menu-day__title{ display:none; }
/* La foto se quedaba en 356px (cap de alto 200px con aspect 16:9) → franja
   blanca a la derecha. Que llene la tarjeta. */
.pv-app .meal-card__media{ max-height:none; }

/* ===== "Respira más" (como gasworld): más aire y fluidez ===== */
.pv-app .planner-main{ padding-top:.4rem; }
#pv-top{ margin-bottom:1.5rem; }                 /* aire entre hero/píldoras y el día */
.pv-daybar{ padding-bottom:.55rem; gap:.5rem; }
.pv-pill{ padding:.62rem 1.2rem; font-size:.94rem; }
/* Tarjetas de plato: más padding, más separación, título más grande */
.pv-app .meal-card__body{ padding:1.5rem 1.4rem 1.65rem; }
.pv-app .meal-card + .meal-card{ margin-top:1.5rem; }
.pv-app .fav-grid .meal-card + .meal-card{ margin-top:0; }   /* favoritos: manda el gap del grid (si no, la 1ª ficha queda más alta) */
.pv-app .meal-card__title{ font-size:1.3rem; line-height:1.26; margin-bottom:.7rem;
  /* sin clamp: en columna única no hay que igualar alturas y el título se ve ENTERO */
  display:block; -webkit-line-clamp:none; overflow:visible; min-height:0; }
.pv-app .meal-card__meta{ font-size:.92rem; margin-bottom:0; }
/* Móvil (V2.62): la fila «⏱ 25 min · 🧑‍🍳🧑‍🍳 media · 2 pax · 🔥 480 kcal/pax» debe
   caber en UNA línea → sin wrap, letra y separadores más compactos. */
@media (max-width: 480px){
  .pv-app .meal-card__meta{ flex-wrap:nowrap; white-space:nowrap; gap:.25rem .4rem; }
  .pv-app .meal-tag{ font-size:.76rem; flex:0 0 auto; }
  .pv-app .meal-tag + .meal-tag::before{ margin-right:.4rem; }
  .pv-app .meal-card__body{ padding-left:1.1rem; padding-right:1.1rem; }
}
@media (max-width: 360px){
  .pv-app .meal-tag{ font-size:.7rem; }
  .pv-app .meal-tag + .meal-tag::before{ margin-right:.3rem; }
  .pv-app .meal-card__meta{ gap:.2rem .3rem; }
}
.pv-app .meal-card__ings-wrap{ margin-top:.85rem; }
.pv-app .meal-card__steps{ margin-top:.5rem; }
/* Hero un poco más de aire dentro */
.pv-hero{ padding:1rem 1.15rem 1.1rem; }
.pv-hero__actions{ margin-top:.9rem; gap:.6rem; }
/* Fluidez: el día activo entra con un fundido suave al cambiar de píldora */
@keyframes pvFade{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
/* V2.66: al cambiar de día (píldora o deslizando) el nuevo entra desde el lado
   hacia el que se avanza: siguiente desde la derecha, anterior desde la izquierda. */
@keyframes pvSlideFromRight{ from{ opacity:0; transform:translateX(38px); } to{ opacity:1; transform:none; } }
@keyframes pvSlideFromLeft{ from{ opacity:0; transform:translateX(-38px); } to{ opacity:1; transform:none; } }
.menu-grid.pv-single .menu-day.pv-active{ animation:pvFade .28s ease; }
.menu-grid.pv-single .menu-day.pv-active.pv-from-right{ animation:pvSlideFromRight .26s ease-out; }
.menu-grid.pv-single .menu-day.pv-active.pv-from-left{ animation:pvSlideFromLeft .26s ease-out; }
@media (prefers-reduced-motion:reduce){ .menu-grid.pv-single .menu-day.pv-active{ animation:none !important; } }

/* ===== Panel de ajustes real colgando del icono de usuario ===== */
.pv-profile{ display:inline-flex; }
.pv-appbar .nav-menu{ display:inline-flex; align-items:center; position:relative; }
.pv-appbar .nav-menu__toggle{ width:42px; height:42px; border-radius:13px; color:var(--text); }
.pv-app .nav-menu__panel{
  position:fixed; top:64px; right:8px; left:auto; bottom:auto; margin:0;
  width:min(93vw,360px); max-height:calc(100dvh - 84px);
}

/* ===== Barra FLOTANTE inferior (2 acciones), sin hero «Tu semana» ===== */
body.pv-app{ padding-bottom:96px; }
.pv-fabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex; gap:.6rem;
  padding:.75rem 1rem calc(.3rem + env(safe-area-inset-bottom,0));
  background:linear-gradient(to top, var(--bg) 62%, transparent 100%);
}
.pv-fab{
  flex:1; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.98rem;
  white-space:nowrap; padding:.72rem .7rem; border-radius:14px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center; gap:.35rem;
}
.pv-fab--primary{ background:var(--accent); color:#04120c; }
.pv-fab--ghost{ background:var(--surface); color:var(--text); border:1px solid var(--border); }
#pv-top{ margin-top:-.4rem; margin-bottom:.35rem; }

/* ===== Panel de ajustes: BOTTOM SHEET + todo junto (sin pestañas) ===== */
.pv-app .nav-menu__panel{
  position:fixed; left:0; right:0; bottom:0; top:auto; margin:0;
  width:100%; max-width:none; max-height:92vh; max-height:92dvh; overflow-y:auto;
  border-radius:24px 24px 0 0;
  box-shadow:0 -18px 50px -12px rgba(0,0,0,.45);
  padding:1.4rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom,0));
}
.pv-app .nav-menu__panel:not([hidden]){ animation:pvSheet .26s cubic-bezier(.4,0,.2,1); }
@keyframes pvSheet{ from{ transform:translateY(100%); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .pv-app .nav-menu__panel:not([hidden]){ animation:none; } }
/* Asa de la hoja */
.pv-app .nav-menu__panel::before{
  content:''; display:block; width:42px; height:4px; border-radius:999px;
  background:var(--border); margin:-.3rem auto 1.1rem;
}
.pv-app .settings-tabs{ display:none !important; }

/* Carrito con contador en la app bar (subtil). */
.pv-appbar__right{ display:inline-flex; align-items:center; gap:.1rem; }
.pv-appbar .nav-cart{ position:relative; width:42px; height:42px; }
.pv-appbar .cart-count{
  position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  font-size:.66rem; font-weight:800; line-height:1;
  background:var(--accent); color:#04120c; border-radius:999px;
  border:2px solid var(--surface);
}

/* Fix: el override móvil del panel base (bottom:100%) ganaba → forzamos la hoja
   inferior con !important. */
.pv-app .nav-menu__panel{
  position:fixed !important; left:0 !important; right:0 !important;
  bottom:0 !important; top:auto !important; width:100% !important; max-width:none !important;
}

/* Fix robusto del bottom sheet (el contenido excedía el alto → descuadre). */
.pv-app .nav-menu__panel{
  position:fixed !important; top:auto !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; max-width:100% !important;
  height:auto !important; max-height:92vh !important; max-height:92dvh !important;
  overflow-y:auto !important; transform:none; z-index:80 !important;
}

/* ===== Sheet de ajustes: dejar lo BÁSICO ===== */
/* Cabecera Compartir/Panel vaciada (movidos al drawer y a la app bar). */
.pv-app #nav-menu-panel .settings-footer{ display:none !important; }
/* Textos accesorios (badges de las cajas) fuera → más minimal. */
.pv-app #nav-menu-panel .textarea-badge{ display:none !important; }
/* Compartir como item del drawer lateral. */
.pv-drawer__item--share{ width:100%; background:none; border:0; cursor:pointer; font:inherit; font-weight:600; color:var(--text); }
/* Icono de admin (Panel) en la app bar, subtil, junto al carrito. */
.pv-admin{ width:42px; height:42px; color:var(--text-muted); }
.pv-admin svg{ width:19px; height:19px; }

/* ===== Sheet estilo perfil de app nativa: cabecera + menú limpio ===== */
/* Cabecera de identidad (avatar + cuenta), como el perfil de la referencia. */
.pv-sheet-id{ display:flex; align-items:center; gap:.75rem; padding:.1rem .15rem 1rem; }
.pv-sheet-id__av{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; flex:none;
  background:rgba(22,196,127,.14); color:var(--accent); }
.pv-sheet-id__av svg{ width:24px; height:24px; }
.pv-sheet-id__cta{ flex:1; }
.pv-sheet-id__txt{ display:flex; flex-direction:column; min-width:0; }
.pv-sheet-id__txt strong{ font-size:1rem; line-height:1.2; }
.pv-sheet-id__sub{ font-size:.82rem; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.pv-app #tab-menu{ border-top:1px solid var(--border); padding-top:1rem; margin-top:.2rem; }

.pv-app .settings-subsection__label{ text-transform:uppercase; letter-spacing:.05em;
  font-size:.72rem; color:var(--text-muted); font-weight:600; }

/* Selector de tema dentro del sheet: el estilo base está scoped a .app-nav__links
   y el panel cuelga de <body> → replicamos botón + activo para que SE NOTE. */
.pv-app .theme-seg__btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.25rem;
  padding:.55rem .3rem; font-family:inherit; font-size:.85rem; font-weight:600;
  color:var(--text-muted); background:transparent; border:0; border-radius:10px;
  white-space:nowrap; cursor:pointer;
}
.pv-app .theme-seg__btn.is-active{
  background:var(--surface); color:var(--text); font-weight:700; box-shadow:var(--shadow-sm);
}

/* Logo REAL de la app en la app bar (SVG movido desde el nav oculto). */
.pv-appbar__brand{ display:flex; align-items:center; color:var(--text); text-decoration:none; }
.pv-appbar__brand .app-nav__logo{ height:26px; width:auto; display:block; color:var(--text); }

/* Pie del drawer: «Compartir · Aviso legal» como enlaces discretos (Compartir
   se movió aquí; en la lista quedaba forzado). */
.pv-drawer__links{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.pv-drawer__linklike{ display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; cursor:pointer;
  font:inherit; text-decoration:none; color:var(--text-muted); font-size:.86rem; padding:0; }
.pv-drawer__linklike svg{ width:15px; height:15px; }
.pv-drawer__links > *:not(:first-child)::before{ content:'·'; margin:0 .55rem; color:var(--border); }

/* ===== Escritorio/web: app mobile-first como COLUMNA CENTRADA (no estirada) ===== */
@media (min-width: 720px){
  #pv-top{ max-width:600px; margin-left:auto; margin-right:auto; }
  .menu-grid.pv-single .menu-day.pv-active{ max-width:600px; }
  /* Los botones flotantes dejan de ocupar todo el ancho: columna centrada. */
  .pv-fabbar{
    left:50%; right:auto; transform:translateX(-50%);
    width:min(600px, calc(100vw - 2rem));
    padding:.75rem 0 1.1rem;
    background:none;
  }
}

/* Grupo inferior del drawer bajo separador: «Ajustes» (y «Panel» si admin). */
.pv-drawer__ver{ margin-top:auto; padding:14px 0 6px; text-align:center; font-size:.7rem; color:var(--text-muted); opacity:.6; letter-spacing:.02em; }
.pv-drawer__item--sep{ margin-top:12px; padding-top:15px; border-top:1px solid var(--border); border-radius:0 0 15px 15px; }

/* Días centrados horizontalmente (safe: si desbordan en móvil, siguen scrolleables). */
.pv-daybar{ justify-content:safe center; }

/* iPhone: «Cuenta y ajustes» quedaba bajo el pliegue del sheet → hoja más alta
   (92dvh arriba) y textareas más cortos (despensa 5→3, dieta 5→4; el alto lo
   fija el CSS scoped al preview, el rows=5 del template sigue en la UI clásica). */
/* OJO: los textarea NO heredan el line-height del body (UA: normal ≈1.2) →
   se fija explícito para que el calc de filas sea exacto. */
.pv-app #pantryIngredients, .pv-app #dietaryPrompt{ line-height:1.4; }
.pv-app #pantryIngredients{ height:calc(3 * 1.4em + 1.2rem + 2px); }
.pv-app #dietaryPrompt{ height:calc(4 * 1.4em + 1.2rem + 2px); }

/* ===== V2.17: «Ajustes» (Tema + Notificaciones) como sheet propio abierto desde
   el drawer; en el perfil, puerta de SALIR roja arriba a la derecha (referencia:
   perfil nativo estilo Eventscase); cuenta y suscripción fuera del preview. */
.pv-drawer__item--btn{ width:100%; background:none; border:0; cursor:pointer;
  font:inherit; font-weight:600; font-size:1.02rem; text-align:left;
  justify-content:flex-start; margin:0; -webkit-appearance:none; appearance:none; }
/* El border:0 del reset de arriba pisaba el separador → se re-impone. */
.pv-drawer__item--btn.pv-drawer__item--sep{ border-top:1px solid var(--border); }
.pv-sheet-id__out{ margin-left:auto; align-self:flex-start; display:inline-flex;
  align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:12px; color:var(--danger-text); }
.pv-sheet-id__out:hover{ background:var(--danger-bg); }
.pv-sheet-id__out svg{ width:21px; height:21px; }
.pv-settings-title{ margin:.1rem .15rem .5rem; font-size:1.15rem; }
.pv-settings-sheet .settings-subsection{ border-top:1px solid var(--border);
  padding:1rem .15rem; margin:0; }
.pv-settings-sheet > p.muted{ margin:1rem 0 .15rem; }
/* Sin cuenta/suscripción el sheet de perfil ya no necesita los 92dvh: se baja
   un poco (el interior scrollea); el de Ajustes es corto y va a su contenido. */
.pv-app #nav-menu-panel{ max-height:90vh !important; max-height:90dvh !important; }

/* ===== V2.18: comportamiento unificado de menús (revisión UX) ===== */
/* Rótulo sobre el formulario de preferencias en el sheet de perfil. */
.pv-prefs-label{ display:block; margin-bottom:.6rem; }
/* Superficies enfocables (foco programático de diálogo): sin anillo visual. */
.pv-drawer:focus, .pv-app .nav-menu__panel:focus{ outline:none; }
/* El scroll interno de los sheets no debe encadenar al de la página. */
.pv-app .nav-menu__panel, .pv-drawer__list{ overscroll-behavior:contain; }