/* VITALIZA 14.7.2 — cierre real: navegación móvil fuera del área de contenido,
   recetas transparentes y accesibilidad consistente. */
:root{
  --vz1472-dock-zone:calc(var(--vz146-dock-height,68px) + max(12px,env(safe-area-inset-bottom,0px)) + 14px);
}

/* En móvil y tablet el contenido tiene su propio viewport por encima del dock.
   Así la barra sigue siempre accesible sin cubrir títulos, campos, tarjetas ni
   el último control. */
@media(max-width:1279px){
  html,body{height:100%;min-height:100%;overflow:hidden}
  body{overscroll-behavior:none}
  #app{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    padding:0 0 var(--vz1472-dock-zone)!important;
    box-sizing:border-box!important;
  }
  #app>main,
  #app>.screen,
  #app>[id$="-screen"]{
    width:100%;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-top:20px;
    scroll-padding-bottom:32px;
    padding-bottom:max(34px,env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box!important;
  }
  #app>main>.v-bottom-nav-vitaliza,
  #app>main>.v-global-ambient-player,
  #app>.screen>.v-bottom-nav-vitaliza,
  #app>.screen>.v-global-ambient-player,
  #app>[id$="-screen"] .v-bottom-nav-vitaliza,
  #app>[id$="-screen"] .v-global-ambient-player{position:fixed!important}
  .v-bottom-nav.v-bottom-nav-vitaliza{
    bottom:max(6px,env(safe-area-inset-bottom,0px))!important;
    box-shadow:0 14px 42px rgba(31,27,23,.24)!important;
  }
  body.vitaliza-ambient-playing #app{--vz1472-dock-zone:calc(var(--vz146-dock-height,68px) + 92px + max(12px,env(safe-area-inset-bottom,0px)))}
  .v-global-ambient-player{bottom:calc(var(--vz146-dock-height,68px) + max(16px,env(safe-area-inset-bottom,0px)) + 10px)!important}
  input,textarea,select,button,a{scroll-margin-bottom:28px}
  .life-page.is-capturing,.pet-page.is-capturing,.children-page.is-capturing{height:100%!important}
}

/* Pantallas muy bajas: dock compacto y zona reservada equivalente. */
@media(max-width:380px),(max-height:620px) and (max-width:1279px){
  :root{--vz146-dock-height:62px;--vz1472-dock-zone:calc(62px + max(10px,env(safe-area-inset-bottom,0px)) + 10px)}
  .v-bottom-nav-vitaliza a,.vz13-page .v-bottom-nav-vitaliza a,.vz14-page .v-bottom-nav-vitaliza a{min-height:48px!important;padding:4px 1px!important}
  .v-bottom-nav-vitaliza .v-nav-glyph svg{width:18px;height:18px}
  .v-bottom-nav-vitaliza small{font-size:7.5px!important}
}

/* La explicación de cada receta es legible y específica; no un rótulo
   genérico idéntico en todas las tarjetas. */
.vz147-recipe-reason{
  margin:0 0 12px!important;
  padding:10px 12px;
  border-radius:14px;
  background:#e5edd8;
  color:#3f5631!important;
  font:750 11px/1.45 var(--vz-sans,system-ui)!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.vz147-ingredient-status{display:grid;gap:5px;margin-top:10px}
.vz147-ingredient-status p{margin:0!important;font-size:12px;line-height:1.45;color:var(--vz-muted,#756c62)}
.vz147-ingredient-status .is-available b{color:#426238}
.vz147-ingredient-status .is-substitution{padding:8px 10px;border-radius:12px;background:#fff4df;color:#71512f}
.vz147-ingredient-status .is-substitution b{color:#9b5b1e}
.vz147-ingredient-status .is-missing b{color:#8a4638}
.vz147-ingredient-status .is-optional{font-size:10px;color:#827b72}
.vz14-recipe-card.is-cycle-recipe{overflow:visible}

/* Accesibilidad y controles táctiles. */
:where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid rgba(217,106,37,.38)!important;outline-offset:3px!important}
:where(button,a,.vz14-choice-row button,.cycle-actions a){min-height:44px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Mi semana: la propuesta asistida se apila en pantallas angostas. El diseño
   anterior mantenía dos columnas y comprimía el texto hasta volverlo ilegible. */
@media(max-width:759px){
  .planner-page .pln-assist{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:16px!important;
  }
  .planner-page .pln-assist>div{min-width:0}
  .planner-page .pln-assist h2{font-size:clamp(24px,8vw,32px)!important;line-height:1.02}
  .planner-page .pln-vita-auto{width:100%!important;min-width:0!important;margin:0!important}
}