/* ============================================================
   Liquid Glass real — tokens y material de @zakisheriff/liquid-glass
   (MIT, Zaki Sheriff), adaptados a Mis menús (acento teal, temas
   claros/oscuro de la app). Comportamiento: glass.js (motor portado).
   ============================================================ */

/* ---- Tokens del material (base.css de la referencia, acento teal) ---- */
:root{
  --lg-fg:rgb(0 0 0/.88);
  --lg-fg-muted:rgb(60 60 67/.62);
  --lg-fg-faint:rgb(60 60 67/.3);
  --lg-accent:#4d9a84;
  --lg-green:#34c759;
  --lg-red:#ff383c;
  --lg-fill:rgb(255 255 255/.66);
  --lg-fill-pressed:rgb(255 255 255/.92);
  --lg-blur:6px;
  --lg-saturate:1.9;
  --lg-brightness:1.04;
  --lg-edge:rgb(0 0 0/.06);
  --lg-shadow:0 8px 28px rgb(0 0 0/.08),0 1px 3px rgb(0 0 0/.07);
  --lg-rim-opacity:1;
  --lg-glow:rgb(255 255 255/.55);
  --lg-lens-fill:rgb(255 255 255/.1);
  --lg-lens-shadow:0 10px 30px rgb(0 0 0/.14),0 2px 6px rgb(0 0 0/.08);
  --lg-lens-edge:rgb(0 0 0/.07);
  --lg-lens-ring:rgb(0 0 0/.22);
  --lg-navigation-fill:rgb(255 255 255/.48);
  --lg-selection-lens-fill:rgb(255 255 255/.14);
  --lg-selection-lens-edge:rgb(45 48 53/.28);
  --lg-selection-lens-bevel:inset 0 3px 7px rgb(45 48 53/.1),inset 0 -1px 2px rgb(255 255 255/.8);
  --lg-selection-lens-brightness:1;
  --lg-panel-fill:rgb(255 255 255/.62);
  --lg-menu-fill:rgb(250 250 252/.94);
  --lg-panel-blur:28px;
  --lg-tab-selection:rgb(0 0 0/.07);
  --lg-segment-selection:rgb(0 0 0/.08);
  --lg-track:rgb(120 120 128/.26);
  --lg-thumb:#ffffff;
  --lg-thumb-shadow:0 3px 8px rgb(0 0 0/.15),0 1px 1px rgb(0 0 0/.06),0 0 0 .5px rgb(0 0 0/.04);
  --lg-scrim:rgb(0 0 0/.18);
  --lg-ring:rgb(77 154 132/.55);
  --lg-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Inter',system-ui,sans-serif;
}
html[data-theme=dark]{
  --lg-fg:rgb(255 255 255/.96);
  --lg-fg-muted:rgb(235 235 245/.6);
  --lg-fg-faint:rgb(235 235 245/.3);
  --lg-accent:#7cbfa6;
  --lg-green:#30d158;
  --lg-red:#ff4245;
  --lg-fill:rgb(44 44 48/.5);
  --lg-fill-pressed:rgb(90 90 96/.55);
  --lg-blur:8px;
  --lg-saturate:1.6;
  --lg-brightness:.96;
  --lg-edge:rgb(255 255 255/.09);
  --lg-shadow:0 8px 28px rgb(0 0 0/.38),0 1px 3px rgb(0 0 0/.3);
  --lg-rim-opacity:.62;
  --lg-glow:rgb(255 255 255/.16);
  --lg-lens-fill:rgb(28 28 30/.3);
  --lg-lens-shadow:0 10px 30px rgb(0 0 0/.45),0 2px 6px rgb(0 0 0/.3);
  --lg-lens-edge:rgb(255 255 255/.12);
  --lg-lens-ring:rgb(255 255 255/.3);
  --lg-navigation-fill:var(--lg-fill);
  --lg-selection-lens-fill:rgb(255 255 255/.09);
  --lg-selection-lens-edge:rgb(255 255 255/.25);
  --lg-selection-lens-bevel:inset 0 0 0 transparent;
  --lg-selection-lens-brightness:1.06;
  --lg-panel-fill:rgb(30 30 33/.62);
  --lg-menu-fill:rgb(38 38 42/.94);
  --lg-tab-selection:rgb(0 0 0/.36);
  --lg-segment-selection:rgb(255 255 255/.14);
  --lg-track:rgb(120 120 128/.44);
  --lg-scrim:rgb(0 0 0/.4);
  --lg-ring:rgb(124 191 166/.7);
}

/* ---- El material (base.css verbatim) ---- */
.lg-glass{
  position:relative;
  box-sizing:border-box;
  background-color:var(--lg-glass-fill,var(--lg-fill));
  -webkit-backdrop-filter:blur(var(--lg-glass-blur,var(--lg-blur))) saturate(var(--lg-saturate));
  backdrop-filter:var(--lg-filter,) blur(var(--lg-glass-blur,var(--lg-blur))) saturate(var(--lg-saturate)) brightness(var(--lg-brightness));
  box-shadow:var(--lg-glass-shadow,var(--lg-shadow)),inset 0 0 0 .5px var(--lg-edge);
  transition:background-color 260ms ease;
  -webkit-tap-highlight-color:transparent;
}
.lg-glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background-image:var(--lg-rim,none);background-size:100% 100%;
  opacity:var(--lg-rim-opacity);pointer-events:none;z-index:0;
}
.lg-glass::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 85% 85% at var(--lg-x,50%) var(--lg-y,50%),var(--lg-glow),transparent);
  opacity:0;transition:opacity 360ms ease;z-index:0;
}
.lg-glass[data-pressed]::after{opacity:1;transition-duration:80ms}
.lg-glass>*{position:relative;z-index:1}
@media (prefers-reduced-transparency:reduce){.lg-glass{--lg-fill:color-mix(in srgb,Canvas 92%,transparent)}}
@media (prefers-reduced-motion:reduce){.lg-glass,.lg-glass::after{transition-duration:.01ms!important}}
.lg-glass>.lg-mirror{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;border-radius:inherit;overflow:hidden;-webkit-mask-image:var(--lg-inner-mask);mask-image:var(--lg-inner-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.lg-mirror__zoom{position:absolute;inset:0;transform-origin:center}
.lg-mirror *{transition:none!important;animation:none!important}
.lg-mirror .lg-glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lg-mirror .lg-glass::after{display:none}
.lg-mirror__viewport{position:absolute;inset:0;overflow:hidden}
.lg-glass.lg-glass--host{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.lg-glass.lg-glass--host::before{
  background-image:var(--lg-rim,linear-gradient(transparent,transparent)),linear-gradient(var(--lg-host-tint,transparent),var(--lg-host-tint,transparent)),linear-gradient(var(--lg-glass-fill,var(--lg-fill)),var(--lg-glass-fill,var(--lg-fill)));
  background-size:100% 100%;
  -webkit-backdrop-filter:blur(var(--lg-glass-blur,var(--lg-blur))) saturate(var(--lg-saturate));
  backdrop-filter:var(--lg-filter,) blur(var(--lg-glass-blur,var(--lg-blur))) saturate(var(--lg-saturate)) brightness(var(--lg-brightness));
  opacity:1;transition:background-color 260ms ease;
}

/* ---- Superficies de la app con el material ---- */
.mg-card.lg-glass,.mg-sheet.lg-glass{--lg-glass-fill:var(--lg-panel-fill);--lg-glass-blur:var(--lg-panel-blur);border:0;color:var(--ds-ink)}
/* Chromium no aplica backdrop-filter en el ::before de estas superficies
   (quirk del host pattern); el material va en el propio elemento. */
.mg-card.lg-glass,.mg-sheet.lg-glass{
  background-color:var(--lg-panel-fill);
  -webkit-backdrop-filter:blur(var(--lg-panel-blur)) saturate(var(--lg-saturate));
  backdrop-filter:var(--lg-filter,) blur(var(--lg-panel-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness));
}
.mg-card.lg-glass::before,.mg-sheet.lg-glass::before{
  background-image:var(--lg-rim,none);background-size:100% 100%;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.mg-card.lg-glass{border-radius:26px}
.ui-button.lg-glass,.mg-add-btn.lg-glass,.mg-cand.lg-glass,.mg-navbtn.lg-glass,.mg-chip.lg-glass,.mg-stepper button.lg-glass{border:0;color:var(--ds-ink)}
.mg-input.lg-glass,.ui-field input.lg-glass{border:0;background-color:var(--lg-glass-fill,var(--lg-fill))}
.mg-card.lg-glass::after,.mg-sheet.lg-glass::after,.mg-input.lg-glass::after,.ui-field input.lg-glass::after{display:none}

/* Botones: respuesta de la referencia (relleno iluminado al dedo) */
.lg-pressable{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transform-origin:center;will-change:scale,translate}
.lg-pressable[data-pressed]{background-color:var(--lg-fill-pressed);transition-duration:60ms}
html[data-theme=dark] .lg-pressable[data-pressed]{background-color:var(--lg-fill-pressed)}
.ui-button.primary.lg-glass,.mg-add-btn.lg-glass{--lg-glass-fill:transparent;background:linear-gradient(145deg,#67ab97,#3f7a67);color:#fff;--lg-glow:rgb(255 255 255/.24)}
html[data-theme=dark] .ui-button.primary.lg-glass,html[data-theme=dark] .mg-add-btn.lg-glass{background:linear-gradient(145deg,#8fd0b6,#63a98d);color:#10291e}
/* Los :active antiguos estorban al motor de presión */
.lg-pressable:active{transform:none}

/* ---- Dock = lg-track--tabbar de la referencia (verbatim, adaptado) ---- */
.mg-tabs.lg-track{
  --lg-pad:4px;--lg-item-h:54px;--lg-item-w:68px;--lg-lift:0;
  position:absolute;left:0;right:0;margin-inline:auto;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  width:fit-content;overflow:visible;
  display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(var(--lg-item-w),1fr);
  padding:var(--lg-pad);border-radius:999px;z-index:30;
  font-family:var(--lg-font);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  transform-origin:center;
  transition:opacity .22s ease,translate .28s cubic-bezier(.2,.8,.25,1);
}
.mg-app.sheet-open .mg-tabs{opacity:0;pointer-events:none;translate:0 18px}
.mg-tabs .lg-track__glass{--lg-glass-fill:var(--lg-navigation-fill);position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0}
.mg-tabs[data-lifted]{z-index:34}
.mg-tabs[data-lifted] .lg-track__glass::after{opacity:.7;transition-duration:120ms}
.mg-tabs .lg-track__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  height:var(--lg-item-h);min-width:0;padding:0 10px;font:inherit;white-space:nowrap;
  position:relative;z-index:2;margin:0;border:0;border-radius:999px;background:none;
  color:var(--lg-fg);cursor:pointer;-webkit-touch-callout:none;
}
.mg-tabs .lg-track__item[aria-selected='true']{color:var(--lg-track-active,var(--lg-accent))}
.mg-tabs[data-previewing] .lg-track__item{color:var(--lg-fg)}
.mg-tabs[data-previewing] .lg-track__item[data-lg-preview]{color:var(--lg-track-active,var(--lg-accent))}
.mg-tabs[data-lifted] .lg-nav__label{background:var(--lg-content-tint);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mg-tabs[data-keyboard] .lg-track__item:focus-visible{outline:2px solid var(--lg-ring);outline-offset:-3px}
.mg-tabs .lg-track__lens,.mg-tabs .lg-track__select{
  position:absolute;top:var(--lg-pad);left:var(--lg-pad);
  width:calc((100% - var(--lg-pad)*2)/var(--lg-count));height:calc(100% - var(--lg-pad)*2);
  border-radius:999px;pointer-events:none;
  transform:translateX(calc(100%*var(--lg-index,0)));
}
.mg-tabs .lg-track__lens.lg-glass{
  z-index:1;
  background-color:color-mix(in srgb,var(--lg-selection-lens-fill) calc(var(--lg-lift)*100%),transparent);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 calc(var(--lg-lift)*8px) calc(var(--lg-lift)*26px) rgb(0 0 0/calc(var(--lg-lift)*.18)),inset 0 0 0 .5px color-mix(in srgb,var(--lg-selection-lens-edge) calc(var(--lg-lift)*100%),transparent),var(--lg-selection-lens-bevel);
  transition:none;opacity:0;
}
.mg-tabs .lg-track__lens.lg-glass::before{opacity:calc(var(--lg-lift)*1.2);z-index:2}
.mg-tabs .lg-track__lens.lg-glass::after{display:none}
.mg-tabs .lg-track__select{z-index:1;background:var(--lg-track-selection);opacity:calc(1 - var(--lg-lift)*2.2)}
.mg-tabs[data-lifted] .lg-track__lens.lg-glass{z-index:4}
.mg-tabs[data-lifted] .lg-track__lens.lg-glass[data-lg-refract]{
  -webkit-backdrop-filter:var(--lg-filter,) blur(.3px) saturate(1.5) brightness(var(--lg-selection-lens-brightness));
  backdrop-filter:var(--lg-filter,) blur(.3px) saturate(1.5) brightness(var(--lg-selection-lens-brightness));
}
.mg-tabs:not([data-ready]) .lg-track__lens{transition:none}
.mg-tabs.lg-track--tabbar{
  --lg-navigation-fill:var(--lg-fill);
  --lg-selection-lens-fill:rgb(255 255 255/.09);
  --lg-selection-lens-edge:rgb(255 255 255/.25);
  --lg-selection-lens-bevel:inset 0 0 0 transparent;
  --lg-selection-lens-brightness:1.06;
  --lg-track-selection:var(--lg-tab-selection);
  font-size:10px;font-weight:600;letter-spacing:.01em;
}
html[data-theme=dark] .mg-tabs.lg-track--tabbar{--lg-selection-lens-fill:rgb(255 255 255/.14);--lg-selection-lens-edge:rgb(45 48 53/.28)}
.mg-tabs .lg-nav__icon{display:grid;place-items:center;width:26px;height:26px}
.mg-tabs .lg-nav__icon>.mg-tab-ico{font-size:17px;line-height:1}
.mg-tabs .lg-nav__label{line-height:1.1}
/* Copia de la lente (Safari/Firefox) */
.mg-tabs[data-lg-copy]>.lg-track__item{color:var(--lg-track-active,var(--lg-accent))}
.mg-tabs[data-lg-copy] .lg-nav__label{background:none;color:var(--lg-track-active,var(--lg-accent));-webkit-text-fill-color:currentColor}
[data-lg-copy]>:is(.lg-track__glass,.lg-track__select){visibility:hidden}
.mg-tabs[data-lifted]:not([data-lg-copy])>.lg-track__item :is(.lg-nav__label,.lg-nav__icon){-webkit-mask:var(--lg-content-hide,none);mask:var(--lg-content-hide,none);-webkit-mask-composite:source-out,source-over,source-over,source-over;mask-composite:subtract,add,add,add}
.mg-tabs:not([data-lifted]) .lg-track__lens>.lg-mirror{visibility:hidden}
/* Neutraliza el dock viejo */
.mg-tabs button[aria-current=page],html[data-theme=dark] .mg-tabs button[aria-current=page]{background:transparent}
.mg-tabs button:active{transform:none}
.mg-tabs .mg-glass-marker{display:none}

/* ---- Hoja estilo iOS 26: flotante, inset, radio amplio ---- */
/* El scrim difumina el fondo (valor original de la app, blur 4px): los bordes rectos de las tarjetas tras la hoja dejan de leerse como un marco; queda una sola silueta redondeada. */
.mg-backdrop{background:var(--lg-scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mg-sheet.lg-glass{
  position:fixed;left:8px;right:8px;bottom:calc(var(--mg-gap,0px) + var(--mg-kb,0px) + max(8px,env(safe-area-inset-bottom)));z-index:41;
  width:auto;max-width:560px;margin:0 auto;border-radius:38px;
  max-height:calc(min(var(--mg-vb,100vh),var(--mg-vvh,100vh)) - 24px);
}
@media(min-width:768px){.mg-sheet.lg-glass{left:0;right:0;bottom:auto;top:50%;max-height:80vh}}

/* El canvas (body) pinta el mismo fondo: bajo la hoja y tras la toolbar de
   Safari no aparece una franja negra; la interfaz continúa hasta el borde. */
body{
  background:
    radial-gradient(ellipse 90% 55% at 0% 8%,#a0ddc7a8,transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 38%,#b8d0f398,transparent 50%),
    radial-gradient(ellipse 75% 55% at 82% 100%,#f4d6a5ad,transparent 48%),
    #edf4ef;
}
html[data-theme=dark] body{
  background:
    radial-gradient(ellipse 90% 55% at 0% 0%,#254d3f92,transparent 60%),
    radial-gradient(ellipse 80% 50% at 100% 58%,#233d5682,transparent 52%),
    radial-gradient(ellipse 75% 55% at 80% 100%,#594c3052,transparent 42%),
    #0d1411;
}

/* ---- Fondo de la app (lo que el cristal refracta) ---- */
.mg-app{
  background:
    radial-gradient(ellipse 90% 55% at 0% 8%,#a0ddc7a8,transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 38%,#b8d0f398,transparent 50%),
    radial-gradient(ellipse 75% 55% at 82% 100%,#f4d6a5ad,transparent 48%),
    #edf4ef;
}
html[data-theme=dark] .mg-app{
  background:
    radial-gradient(ellipse 90% 55% at 0% 0%,#254d3f92,transparent 60%),
    radial-gradient(ellipse 80% 50% at 100% 58%,#233d5682,transparent 52%),
    radial-gradient(ellipse 75% 55% at 80% 100%,#594c3052,transparent 42%),
    #0d1411;
}

/* ---- Ajustes de la app que se mantienen ---- */
.mg-hero{gap:12px;padding:12px 14px;align-items:center}
.mg-hero-img{width:48px;height:48px;border-radius:16px}
.mg-eyebrow,.mg-sub{display:none}
.mg-title{font-family:inherit!important;font-weight:650;font-size:20px;letter-spacing:-.02em}
.mg-progress{background:var(--lg-track);box-shadow:none}
.mg-check{border-color:var(--lg-fg-faint)}
.mg-item.done .mg-check{background:var(--lg-accent);border-color:var(--lg-accent)}
.mg-liquid-badge{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 12px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--lg-accent);background:var(--lg-fill);box-shadow:var(--lg-shadow),inset 0 0 0 .5px var(--lg-edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html,body{overflow-x:hidden}
body{font-family:var(--lg-font)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:350px){.mg-title{font-size:18px}.mg-hero-img{width:42px;height:42px}}

/* ---- Botones con texto: cápsula (extremos redondeados) ---- */
.ui-button{border-radius:999px}
.mg-cand{border-radius:999px}

/* Con la hoja abierta SOLO el contenido de fondo retrocede (mismo patrón que
   el dock): la hoja y el scrim son hijos de .mg-tab, así que la atenuación se
   aplica a los hijos de contenido, nunca a .mg-scroll/.mg-tab (un opacity en
   el ancestro lavaría también la hoja y no se puede revertir en el hijo). */
.mg-app.sheet-open .mg-scroll>.mg-hero,
.mg-app.sheet-open .mg-scroll>.mg-foot,
.mg-app.sheet-open .mg-tab>:not(.mg-backdrop):not(.mg-sheet){animation:none;opacity:.38;transition:opacity .25s ease}