/* -------------------------------------------------------------------------
   GestFel CSS · mobile-bottom-nav.css
   Menú inferior fijo para móvil. Sólo activo por debajo de 760 px.
   Nota Safari: se mantienen -webkit-backdrop-filter y -webkit-tap-highlight-color
   porque aún son necesarios; se elimina -webkit-transform y -webkit-backface-visibility
   que ya son universales en navegadores soportados.
   ------------------------------------------------------------------------- */
.mobile-bottom-nav { display: none; }

@media (max-width: 760px) {
  :root {
    --mobile-bottom-nav-height: 74px;
    --mobile-bottom-nav-radius: 24px;
  }

  .app-body {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  .app-footer {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 22px);
  }

  .mobile-bottom-nav {
    position: fixed;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    /* --vv-bottom-gap la calcula app.js a partir de visualViewport: en iOS
       Safari la barra de pestañas/dirección se superpone al viewport de
       layout sin reducirlo, así que env(safe-area-inset-bottom) no la cubre.
       La compensación vive en `bottom` (con su propia transición) y el
       ocultado por scroll en `transform`: ejes independientes que nunca
       compiten por la misma propiedad animada. */
    bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + var(--vv-bottom-gap, 0px));
    z-index: 1200;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.12rem;
    min-height: var(--mobile-bottom-nav-height);
    padding: 0.42rem 0.5rem;
    background: rgba(255, 255, 255, 0.965);
    border: 1px solid rgba(219, 231, 228, 0.92);
    border-radius: var(--mobile-bottom-nav-radius);
    box-shadow: 0 12px 34px rgba(15, 36, 55, 0.18);
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    will-change: transform;
    backface-visibility: hidden;
    contain: layout paint style;
    transition-property: transform, box-shadow, bottom;
    transition-duration: 280ms, 260ms, 300ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease, cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0ms, 0ms, 0ms;
  }

  /* Ocultado por scroll: solo desplazamiento vertical.
     No usamos opacity: 0 ni visibility: hidden porque en iOS Safari puede hacer
     que el menú desaparezca en seco antes de completar el transform. */
  body.mobile-bottom-nav-hidden:not(.sidebar-open) .mobile-bottom-nav,
  body.bottom-nav-hidden:not(.sidebar-open) .mobile-bottom-nav,
  body.sidebar-open .mobile-bottom-nav,
  body.mobile-menu-open .mobile-bottom-nav {
    /* Incluye el hueco de Safari para garantizar que el menú queda
       completamente fuera de pantalla aunque esté elevado por la barra. */
    transform: translate3d(0, calc(100% + 32px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom-gap, 0px)), 0);
    box-shadow: none;
    pointer-events: none;
    transition-duration: 220ms, 200ms, 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1), ease, cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-bottom-item {
    min-width: 0;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted, #667085);
    text-decoration: none;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 54px;
    border-radius: 18px;
    padding: 0.25rem 0.2rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-bottom-item span {
    font-size: 0.72rem;
    line-height: 1.05;
    font-weight: 800;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mobile-bottom-icon {
    width: 1.34rem;
    height: 1.34rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-bottom-item.active {
    color: var(--teal, #0b7d6d);
    background: color-mix(in srgb, var(--mint, #d9f3ec) 62%, white);
  }

  .mobile-bottom-item:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal, #0b7d6d) 35%, transparent);
    outline-offset: 2px;
  }

  /* Este fichero se carga fuera de @layer (ver nota en 99-instance-theme.template.css),
     así que cualquier variante de modo oscuro debe declararse aquí: una regla
     dentro de @layer theme nunca gana a una sin capa, sea cual sea su especificidad. */
  html[data-gestfel-theme="dark"] .mobile-bottom-nav {
    background: rgba(19, 38, 44, .94);
    border-color: var(--gf-line, rgba(157, 204, 197, .24));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
  }

  html[data-gestfel-theme="dark"] .mobile-bottom-item {
    color: var(--gf-muted, #a7bdb8);
  }

  html[data-gestfel-theme="dark"] .mobile-bottom-item.active {
    color: var(--gf-accent, #6fd6c7);
    background: var(--gf-accent-soft, rgba(111, 214, 199, .16));
  }

  body.sidebar-open,
  body.mobile-menu-open {
    overflow: hidden;
    touch-action: none;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(84vw, 330px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    border-right: 1px solid var(--border, #dbe7e4);
    border-radius: 0 22px 22px 0;
    box-shadow: 18px 0 42px rgba(15, 36, 55, 0.22);
    transform: translate3d(-106%, 0, 0);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease;
    z-index: 1600 !important;
    overflow-y: auto;
    will-change: transform;
  }

  .sidebar.open {
    left: 0 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  html[data-gestfel-theme="dark"] .sidebar {
    border-right-color: var(--gf-line, rgba(157, 204, 197, .24));
    box-shadow: 18px 0 50px rgba(0, 0, 0, .4);
  }

  body.sidebar-open::after,
  body.mobile-menu-open::after {
    content: "";
    position: fixed;
    inset: 0 !important;
    background: rgba(15, 36, 55, 0.34);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1500 !important;
  }

  body.sidebar-open .app-top,
  body.mobile-menu-open .app-top {
    z-index: 1400;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav,
  .sidebar,
  body.mobile-bottom-nav-hidden:not(.sidebar-open) .mobile-bottom-nav,
  body.bottom-nav-hidden:not(.sidebar-open) .mobile-bottom-nav,
  body.sidebar-open .mobile-bottom-nav,
  body.mobile-menu-open .mobile-bottom-nav {
    transition-duration: 0.01ms !important;
  }
}