/* barra_movil.css — barra inferior de móvil (≤ 900 px) como píldora flotante de cristal, con burbuja deslizante (barra_movil.js) y panel «Más» como hoja de cristal.
   Se carga tras tema.css y efectos.css. Solo transform/opacity en las animaciones. Sin cristal (blur) cuando: el navegador no lo soporta, html[data-efectos="off"]
   (casilla de la Guía básica) o html.bm-sin-blur (equipos modestos): queda un fondo casi sólido. prefers-reduced-motion: sin rebote, estiramiento ni deslizamiento. */
@media (max-width: 900px) {
  :root { --bm-alto: 64px; --bm-lado: 14px; --bm-sobre: 12px; --bm-vidrio: rgba(30, 30, 33, .58); --bm-solido: rgba(22, 22, 24, .94); --bm-borde-a: rgba(255, 255, 255, .34); --bm-borde-b: rgba(255, 255, 255, .06);
          --bm-brillo: rgba(255, 255, 255, .14); --bm-pildora: rgba(255, 255, 255, .13); --bm-pildora-borde: rgba(255, 255, 255, .30); --bm-sombra: rgba(0, 0, 0, .8); }
  :root[data-theme="light"] { --bm-vidrio: rgba(255, 255, 255, .62); --bm-solido: rgba(250, 250, 252, .94); --bm-borde-a: rgba(255, 255, 255, .9); --bm-borde-b: rgba(0, 0, 0, .08);
          --bm-brillo: rgba(255, 255, 255, .8); --bm-pildora: rgba(0, 0, 0, .07); --bm-pildora-borde: rgba(0, 0, 0, .16); --bm-sombra: rgba(40, 40, 60, .35); }
  body { padding-bottom: calc(var(--bm-alto) + var(--bm-sobre) + 22px + env(safe-area-inset-bottom, 0px)); }
  #subir { bottom: calc(var(--bm-alto) + var(--bm-sobre) + 14px + env(safe-area-inset-bottom, 0px)); }
  #tour { bottom: calc(var(--bm-alto) + var(--bm-sobre) + 14px + env(safe-area-inset-bottom, 0px)); }

  /* ---- la píldora ---- */
  #barra-inferior { left: var(--bm-lado); right: var(--bm-lado); bottom: calc(var(--bm-sobre) + env(safe-area-inset-bottom, 0px)); height: var(--bm-alto); padding: 0 6px; align-items: center;
    border: 0; border-radius: 999px; background: var(--bm-solido); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 0 var(--bm-brillo), inset 0 0 22px rgba(255, 255, 255, .03), 0 14px 34px -10px var(--bm-sombra), 0 2px 6px rgba(0, 0, 0, .3);
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease; }
  #barra-inferior::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; z-index: var(--z-local);      /* borde fino: claro arriba, tenue abajo */
    background: linear-gradient(180deg, var(--bm-borde-a), var(--bm-borde-b) 55%, rgba(255, 255, 255, .1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not([data-efectos="off"]):not(.bm-sin-blur) #barra-inferior { background: var(--bm-vidrio); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); }
  }
  #barra-inferior.bm-oculta { transform: translateY(calc(100% + var(--bm-sobre) + 24px + env(safe-area-inset-bottom, 0px))); opacity: 0; pointer-events: none; }

  /* ---- accesos: botones reales, zona táctil ≥ 44 px, icono fino y etiqueta corta ---- */
  #barra-inferior a, #barra-inferior button { position: relative; z-index: 1; min-height: 52px; min-width: 44px; border-radius: 999px; gap: 2px; background: none; box-shadow: none;
    color: var(--t-texto-2); font-size: 12px; letter-spacing: .01em; -webkit-tap-highlight-color: transparent; }
  #barra-inferior a:active, #barra-inferior button:active { background: none; transform: none; }
  #barra-inferior .ico { width: 22px; height: 22px; stroke-width: 1.5; transition: transform 320ms cubic-bezier(.34, 1.45, .5, 1), color 200ms ease; }
  #barra-inferior .activo { background: none; box-shadow: none; color: var(--t-naranja-2); font-weight: 600; }
  #barra-inferior a:not(.activo) .ico, #barra-inferior button:not(.activo) .ico { opacity: .72; }
  #barra-inferior a:focus-visible, #barra-inferior button:focus-visible { outline: 2px solid var(--t-naranja, #ff7a2e); outline-offset: -3px; }
  #barra-inferior .activo .ico { transform: translateY(-2px); color: var(--t-naranja); }
  #barra-inferior > i.ef-pastilla { display: none; }

  /* ---- burbuja deslizante ---- */
  .bm-burbuja { position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--bm-w, 0); z-index: 0; pointer-events: none; opacity: 0; transform: translateX(var(--bm-x, 0)); }
  #barra-inferior.bm-listo .bm-burbuja { opacity: 1; }
  #barra-inferior.bm-anima .bm-burbuja { transition: transform 300ms cubic-bezier(.3, 1.4, .5, 1); }
  .bm-int { position: absolute; inset: 0; border-radius: 999px; transform-origin: center; transition: transform 200ms cubic-bezier(.3, 1.45, .5, 1);
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .02) 55%), var(--bm-pildora); border: 1px solid var(--bm-pildora-borde);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -6px 14px -8px rgba(255, 122, 46, .35), 0 6px 16px -8px rgba(0, 0, 0, .6); }
  #barra-inferior.bm-pulsada .bm-int { transform: scale(1.05); }
  #barra-inferior.bm-arrastrando .bm-int { transform: scale(1.16, 1.1); }
  #barra-inferior.bm-estira .bm-int { animation: bm-liquido 300ms ease-out; }
  @keyframes bm-liquido { 0% { transform: scale(1); } 30% { transform: scale(1.24, .9); } 65% { transform: scale(.97, 1.04); } 100% { transform: scale(1); } }

  /* muy estrecho: solo la etiqueta del activo */
  @media (max-width: 340px) { #barra-inferior a:not(.activo) span, #barra-inferior button:not(.activo) span { display: none; } }

  /* ---- panel «Más»: hoja de cristal que sube desde la barra ---- */
  #mas-fondo { background: rgba(0, 0, 0, .5); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not([data-efectos="off"]):not(.bm-sin-blur) #mas-fondo { background: rgba(0, 0, 0, .5); }
    html:not([data-efectos="off"]):not(.bm-sin-blur) #panel-mas { background: rgba(24, 24, 26, .72); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }
  }
  #panel-mas { left: var(--bm-lado); right: var(--bm-lado); bottom: calc(var(--bm-sobre) + env(safe-area-inset-bottom, 0px)); max-height: 82vh; padding-bottom: 0;
    background: var(--bm-solido); border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px; overscroll-behavior: contain;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 20px 50px -12px rgba(0, 0, 0, .85);
    transform: translateY(calc(100% + 40px)); transition: transform 380ms cubic-bezier(.2, .9, .25, 1.02); }
  #panel-mas.abierto { transform: none; }
  #panel-mas.bm-arrastra { transition: none; }
  .mas-cab { position: relative; padding-top: 18px; }
  .mas-cab::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
  .mas-lista a, .mas-cab button { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); }
  .mas-cuerpo { overscroll-behavior: contain; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #barra-inferior, #barra-inferior .ico, .bm-burbuja, .bm-int, #panel-mas { transition: none !important; }
  #barra-inferior.bm-estira .bm-int { animation: none; }
}
html[data-efectos="off"] #barra-inferior, html[data-efectos="off"] #barra-inferior .ico, html[data-efectos="off"] .bm-burbuja, html[data-efectos="off"] .bm-int,
html[data-efectos="off"] #panel-mas { transition: none !important; }
html[data-efectos="off"] #barra-inferior.bm-estira .bm-int { animation: none; }

@media (max-width: 900px) {
  #barra-inferior a, #barra-inferior button { padding: 0 2px; min-width: 0; }
  #barra-inferior a span, #barra-inferior button span { white-space: nowrap; letter-spacing: 0; max-width: 100%; }
}