/* Marco de la app Belk — reemplaza al dock inferior (css/dock.css).
   Dos píldoras FLOTANTES de vidrio oscuro:
     .belk-nav   → los 5 módulos, abajo al centro, glider de borde a borde
     .belk-acts  → las acciones del módulo, flotando al costado derecho
   Sin JS: el activo se marca con data-active en el contenedor y el tooltip
   sale de data-label vía ::after. Compatible con la CSP estricta. */

:root{
  --bs-nav-h:64px;
  --bs-gap:16px;
  --bs-act-w:56px;
  --bs-radius:1rem;
  --bs-text:#e5e5e5;
  --bs-on:#EA580C;
}

.belk-nav,.belk-acts,
.bn-i,.ba-i,.bn-glider{box-sizing:border-box}   /* no depender del reset de cada página */

/* ── Vidrio compartido ──────────────────────────────────── */

.belk-nav,.belk-acts{
  position:fixed; z-index:340;   /* sobre la topbar (300), bajo modales (400+) */
  display:flex;
  /* La referencia usa rgba(255,255,255,.06) porque va sobre fondo OSCURO.
     Aquí la píldora flota sobre páginas claras: se invierte a base oscura,
     con alfa baja para que se vea de verdad lo que pasa por detrás. */
  background:rgba(18,22,32,.42);
  /* Filo obligatorio: sobre las páginas oscuras (presupuesto, cotización) la
     píldora es casi del color del fondo y sin borde se pierde. */
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--bs-radius);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    inset 1px 1px 4px rgba(255,255,255,.30),
    inset -1px -1px 6px rgba(0,0,0,.35),
    0 4px 12px rgba(0,0,0,.15);
}

/* Sin backdrop-filter (Android viejo): fondo sólido o queda ilegible */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .belk-nav,.belk-acts{background:rgba(28,34,46,.94)}
}

/* ── Píldora de módulos (abajo al centro) ───────────────── */

.belk-nav{
  left:50%; bottom:calc(var(--bs-gap) + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(560px, calc(100vw - 2*var(--bs-gap)));
  overflow:hidden;        /* el glider se recorta contra el radio de la píldora */
}

.bn-i{
  flex:1; min-width:0; position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:.7rem .4rem;
  color:var(--bs-text); text-decoration:none;
  font-weight:500; letter-spacing:.3px;
  transition:color .3s ease-in-out;
}
.bn-i svg{width:22px; height:22px; display:block; flex-shrink:0}
.bn-i span{font-size:11px; line-height:1.2; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.bn-i:hover{color:#fff}
.bn-i:focus-visible{outline:2px solid #fff; outline-offset:-3px; border-radius:var(--bs-radius)}
.bn-i[aria-current="page"]{color:#fff}

/* Glider: bloque de borde a borde bajo el módulo activo.
   Se posiciona con data-active en el contenedor — sin JS. */
.bn-glider{
  position:absolute; top:0; bottom:0; left:0; z-index:1;
  width:calc(100% / 5);
  border-radius:var(--bs-radius);
  background:linear-gradient(135deg, rgba(234,88,12,.35), rgba(234,88,12,.95));
  box-shadow:
    0 0 18px rgba(234,88,12,.5),
    0 0 10px rgba(255,205,170,.4) inset;
  transition:transform .5s cubic-bezier(.37,1.95,.66,.56);
}
.belk-nav[data-active="1"] .bn-glider{transform:translateX(0)}
.belk-nav[data-active="2"] .bn-glider{transform:translateX(100%)}
.belk-nav[data-active="3"] .bn-glider{transform:translateX(200%)}
.belk-nav[data-active="4"] .bn-glider{transform:translateX(300%)}
.belk-nav[data-active="5"] .bn-glider{transform:translateX(400%)}

/* ── Píldora de acciones (costado derecho) ──────────────── */
/* Sin overflow:hidden — recortaría los tooltips */

.belk-acts{
  right:var(--bs-gap); top:50%; transform:translateY(-50%);
  flex-direction:column; align-items:center; gap:2px;
  width:var(--bs-act-w); padding:6px;
  max-height:calc(100vh - var(--bs-nav-h) - 4*var(--bs-gap));
}

.ba-i{
  position:relative; flex-shrink:0;
  width:44px; height:44px;              /* mínimo táctil 44x44 */
  display:flex; align-items:center; justify-content:center;
  border-radius:calc(var(--bs-radius) - 6px);
  color:var(--bs-text);
  background:none; border:0; padding:0; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.ba-i svg{width:22px; height:22px; display:block}
.ba-i:hover{background:rgba(255,255,255,.10); color:#fff}
.ba-i:focus-visible{outline:2px solid #fff; outline-offset:-2px}
.ba-i:disabled{opacity:.4; cursor:not-allowed}
.ba-i--primary{
  color:#fff;
  background:linear-gradient(135deg, rgba(234,88,12,.35), rgba(234,88,12,.95));
  box-shadow:0 0 14px rgba(234,88,12,.45), 0 0 8px rgba(255,205,170,.4) inset;
}

.ba-sep{width:24px; height:1px; background:rgba(255,255,255,.14); margin:4px 0; flex-shrink:0}

/* Tooltip: al pasar el mouse Y al llegar por teclado */
.ba-i::after{
  content:attr(data-label);
  position:absolute; right:calc(100% + 10px); top:50%;
  transform:translateY(-50%);
  background:rgba(20,24,32,.92); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:12px; line-height:1; letter-spacing:.3px; white-space:nowrap;
  padding:7px 11px; border-radius:9px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  opacity:0; pointer-events:none;
  transition:opacity .15s ease;
}
.ba-i:hover::after,
.ba-i:focus-visible::after{opacity:1}

/* ── Despeje del contenido ──────────────────────────────── */

body.has-shell{
  padding-bottom:calc(var(--bs-nav-h) + 2*var(--bs-gap) + env(safe-area-inset-bottom));
  padding-right:calc(var(--bs-act-w) + 2*var(--bs-gap));
}

/* Páginas sin riel de acciones (digitalización) no deben perder ese ancho */
body.has-shell:not(:has(.belk-acts)){padding-right:0}

/* Flotantes de la página: se apartan de las dos píldoras.
   Equivale a lo que css/dock.css hacía con body.has-dock. */
body.has-shell .bk-wa-fab,
body.has-shell .bk-gc-panel,
body.has-shell .bchat-tip,
body.has-shell .toast,
body.has-shell .notif-bar{bottom:96px!important}
body.has-shell .bk-gc-fab{bottom:148px!important}
body.has-shell #syncIndicator{bottom:88px!important}

/* En escritorio el riel ocupa el costado derecho: correr los fab hacia adentro */
body.has-shell .bk-wa-fab,
body.has-shell .bk-gc-fab{right:calc(var(--bs-act-w) + 2*var(--bs-gap))!important}

/* La leyenda del plano es lo último de la página y queda bajo la píldora */
body.has-shell .leg{padding-bottom:100px}

/* ── Móvil: sin mouse el tooltip no existiría, así que las
      acciones bajan a una píldora horizontal CON TEXTO. ──── */

@media (max-width:768px){
  .belk-acts{
    top:auto; right:var(--bs-gap); left:var(--bs-gap);
    bottom:calc(var(--bs-nav-h) + 2*var(--bs-gap) + env(safe-area-inset-bottom));
    width:auto; max-height:none;
    transform:none;
    flex-direction:row; gap:5px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .ba-i{
    width:auto; height:36px; gap:5px; padding:0 11px;
    font-size:11px; font-weight:500; letter-spacing:.3px;
  }
  .ba-i svg{width:15px; height:15px}
  .ba-i::after{content:none}            /* el texto ya es visible */
  .ba-i::before{content:attr(data-label)}
  .ba-sep{width:1px; height:20px; margin:0 2px}

  body.has-shell{
    padding-right:0;
    padding-bottom:calc(var(--bs-nav-h) + 48px + 3*var(--bs-gap) + env(safe-area-inset-bottom));
  }

  /* Los flotantes suben por encima de las DOS píldoras */
  body.has-shell .bk-wa-fab,
  body.has-shell .bk-gc-panel,
  body.has-shell .bchat-tip,
  body.has-shell .toast,
  body.has-shell .notif-bar{bottom:160px!important}
  body.has-shell .bk-gc-fab{bottom:212px!important}
  body.has-shell #syncIndicator{bottom:152px!important}
  body.has-shell .bk-wa-fab,
  body.has-shell .bk-gc-fab{right:16px!important}
  body.has-shell .leg{padding-bottom:160px}
}

@media (prefers-reduced-motion:reduce){
  .bn-i,.ba-i,.ba-i::after,.bn-glider{transition:none}
}