/* Barra del teléfono: "bulto líquido". La barra se abomba bajo la pestaña activa (forma en nav-bulto.js).
   Dos acabados que siguen los colores de Apariencia y el modo claro/oscuro:
   · neomorfismo: relieve con las sombras del diseño
   · liquid glass: superficie de cristal OPACA (no deja ver lo que pasa detrás), con brillo arriba y sombra suave */
:root{
  --nav-fill:var(--bg);
  --nav-filter:drop-shadow(5px 5px 7px var(--sh-d)) drop-shadow(-4px -4px 6px var(--sh-l));
  --nav-stroke:none;
  --nav-ico:var(--muted);
  --nav-act:var(--jade-fuerte);
  --nav-g1:#ffffff; --nav-g2:#f2f2f2; --nav-edge:#ffffff;
}
:root[data-diseno="clasico"]{
  --nav-g1:color-mix(in srgb,var(--solid) 55%,#ffffff);
  --nav-g2:var(--solid-2);
  --nav-edge:color-mix(in srgb,var(--solid) 30%,#ffffff);
  --nav-fill:url(#nav-g-cuerpo);
  --nav-stroke:url(#nav-g-borde);
  --nav-filter:drop-shadow(0 10px 18px rgba(40,20,35,.20)) drop-shadow(0 1px 1px rgba(40,20,35,.10));
  --nav-ico:var(--muted);
  --nav-act:var(--accent);
}
@media (prefers-color-scheme:dark){ :root[data-diseno="clasico"]:not([data-theme="light"]){
  --nav-g1:color-mix(in srgb,var(--solid) 86%,#ffffff); --nav-g2:var(--solid); --nav-edge:color-mix(in srgb,var(--solid) 70%,#ffffff);
  --nav-filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 1px 1px rgba(0,0,0,.35)); } }
:root[data-diseno="clasico"][data-theme="dark"]{
  --nav-g1:color-mix(in srgb,var(--solid) 86%,#ffffff); --nav-g2:var(--solid); --nav-edge:color-mix(in srgb,var(--solid) 70%,#ffffff);
  --nav-filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

.nav-defs{position:absolute;width:0;height:0;overflow:hidden}
@media (max-width:1023.98px){
  nav.tabs{left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));max-width:560px;margin-inline:auto;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));height:84px;padding:24px 16px 0;gap:0;border-radius:0;
    background:transparent;box-shadow:none;border:0;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none;
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
  nav.tabs.glass::before{display:none}
  nav.tabs .nav-bg{display:block;position:absolute;left:0;top:0;width:100%;height:84px;overflow:visible;pointer-events:none;z-index:0;filter:var(--nav-filter)}
  nav.tabs .nav-bg path{fill:var(--nav-fill);stroke:var(--nav-stroke);stroke-width:1.2}
  nav.tabs .nav-ball{display:none}
  nav.tabs button{position:relative;z-index:1;height:60px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    font-size:10.5px;letter-spacing:-.01em;white-space:nowrap;background:transparent;box-shadow:none;border-radius:0;color:var(--nav-ico);--sube:0}
  nav.tabs button svg{width:23px;height:23px;flex:none;will-change:transform}
  nav.tabs button > .nav-t{transform:translateY(calc(var(--sube) * -11px))}
  nav.tabs button[aria-current="page"]{background:transparent;box-shadow:none;color:var(--nav-act)}
  .wrap{padding-bottom:150px}
}
@media (min-width:1024px){ nav.tabs .nav-bg,nav.tabs .nav-ball{display:none} }