/* ═══════════════════════════════════════════════════════════════
   belk-shell.css — MARCO DE LA APP · pieza 3 de 4 del modelo Belk
   ───────────────────────────────────────────────────────────────
   REQUIERE:  css/foundation.css y assets/icons.svg.
   ORDEN:     va SIEMPRE al final, después del CSS de la pagina.
   SE COPIA:  sí, adaptando los 5 modulos de .belk-nav.

   QUE APORTA
     .belk-nav   los modulos, abajo al centro, con glider (lo unico flotante)
     .belk-acts  las acciones del modulo, en flujo al final del contenido
     tokens --belk-float-* que los flotantes de la pagina consumen

   NO OPCIONAL
     · body lleva class="has-shell"
     · el activo va en data-active="1..5" + aria-current="page"
     · .belk-nav lleva gap:0 o el glider se desalinea
     · .belk-acts NO flota: va en el flujo, al final del contenido
     · en <=768px sus botones pierden la etiqueta (cuadrados de 44)
   ═══════════════════════════════════════════════════════════ */

/* 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{
  /* Medidas propias del componente: no son deriva, se quedan aquí. */
  --bs-nav-h:64px;
  --bs-gap:16px;

  /* ── Cuánto del fondo de la página NO se ve ──────────────────
     En el teléfono, `position:fixed; bottom:X` se ancla al viewport de
     LAYOUT, cuyo borde inferior queda DETRÁS de la barra del navegador
     (en iOS es fija; en Chrome de escritorio no existe). Por eso la
     cápsula se dibujaba debajo de la barra de Chrome y no se veía hasta
     que el usuario bajaba y la barra se retraía — el hallazgo del video
     del 2026-09-03.

     `js/shell-ventana.js` MIDE ese hueco con una sonda real y lo escribe
     acá. Vale 0 en cualquier navegador que ya ancle bien (escritorio,
     Chrome de Android), así que sumarlo nunca despega nada de más.

     Todo lo que flote abajo debe sumarlo. No usar `100lvh - 100dvh`:
     acierta en iOS y sobra en los navegadores que ya lo resuelven. */
  --belk-vv-inset:0px;
  /* `--bs-act-w` (el ancho del riel al costado) se retiró el 2026-07-29: la
     barra de acciones entra en el flujo y mide lo que miden sus botones. */

  /* Color: sale de foundation.css. El respaldo del var() vale lo mismo que el
     token, así que el marco se ve igual aunque foundation no haya cargado
     (HTML viejo en caché del SW sin el <link> → misma trampa de la sesión 30). */
  --bs-radius:var(--belk-radius,1rem);
  --bs-text:var(--belk-text-muted,#414B5C);   /* módulo/acción en reposo */
  --bs-text-on:var(--belk-text,#0D2350);      /* hover y foco */
  --bs-on:var(--belk-accent,#E87722);         /* activo — acento de la zona */
  --bs-on-ink:var(--belk-on-accent,#0D2350);  /* texto sobre el activo */
}
[data-zona="taller"]{
  --bs-text:#C4D0DF;
  --bs-text-on:#F7F3E9;
  --bs-on:#51C7F5;
  --bs-on-ink:#0D1B2A;
}

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

/* ═══════════════════════════════════════════════════════════════
   EL HEADER — un solo componente para los cinco módulos (A7)
   ───────────────────────────────────────────────────────────────
   Los cinco módulos tenían CUATRO headers distintos: dos clases
   (.hdr y .topbar) y tres copias de .hdr que habían divergido sin
   que nadie lo decidiera — a Escaneo IA se le había perdido la
   animación del menú a X y el cuadrito naranjo del logo; tapacanto
   escondía el nombre 40 px más tarde que los demás.

   Ahora vive UNA vez, acá, en el único CSS que cargan los cinco.
   No volver a declarar .hdr ni sus hijos en el CSS de una página:
   este archivo carga al final y los pisa igual, así que una copia
   local no cambia nada — solo confunde a quien la lea después.

   Orden de los slots:  ☰ · logo(→inicio) · / · título · acciones · cuenta

   admin.html queda fuera a propósito: no carga este archivo, no es
   uno de los cinco módulos y tiene su propio header claro.
   ═══════════════════════════════════════════════════════════ */

/* El fondo NO sale de --belk-brand: ese token lo remapea cada zona, y en
   data-zona="documento" (landings) vale #7FA0D4 — un azul claro que con el
   texto blanco del header da 2,1 de contraste. El header es el marco de la
   app: marino fijo, igual en los cinco módulos. Mismo criterio que el
   vidrio de .belk-nav. */
.hdr{background:#0D1B2A;color:#F7F3E9;height:52px;
  display:flex;align-items:center;padding:0 12px;
  position:sticky;top:0;z-index:300;
  box-shadow:0 2px 10px rgba(0,0,0,.28);gap:10px}

/* ── Botón menú (propuesta B): logo grande + sombra; badge ☰ en esquina ── */
.hbg-btn{width:44px;height:44px;border:0;border-radius:50%;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;position:relative;color:#fff;transition:transform .12s}
.hbg-btn:hover{transform:scale(1.04)}
.hbg-btn:active{transform:scale(0.98)}
.hbg-logo{width:32px;height:32px;border-radius:7px;display:block;object-fit:cover;
  box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.12)}
.hbg-btn::after{content:"☰";position:absolute;right:1px;bottom:1px;width:14px;height:14px;
  font-size:7px;line-height:14px;text-align:center;background:#51C7F5;color:#0D1B2A;
  border-radius:50%;font-weight:800;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.28)}
.hbg-ico{width:22px;height:22px;display:block;flex-shrink:0}
.hbg-ico--close{display:none}
.hbg-btn.open::after{display:none}
.hbg-btn.open .hbg-logo{display:none}
.hbg-btn.open .hbg-ico--close{display:block}

/* Marca en header: tipografía limpia → panel de productividad */
.hdr-brand{display:flex;flex-direction:column;justify-content:center;line-height:1.05;
  flex-shrink:0;text-decoration:none;color:inherit;padding:2px 0;
  border-bottom:1px solid transparent;transition:border-color .15s,opacity .15s}
.hdr-brand:hover{border-bottom-color:rgba(255,255,255,.45);opacity:.95}
.hdr-brand .logo-tx{font-size:15px;font-weight:700;color:#fff}
.hdr-brand .logo-sub{font-size:9px;font-weight:400;opacity:.78;display:block;color:#fff}
@media(max-width:520px){.hdr-brand .logo-sub{display:none}}

/* ── Logo (drawer y otros): enlace clásico si hace falta fuera del header ── */
/* Sin .logo-ic: era el cuadrito naranjo que precedió al SVG de la marca y
   los cinco módulos ya usan el <svg> inline. Se cayó al unificar (A7). */
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0;cursor:pointer;
  text-decoration:none;color:inherit}
.logo-tx{font-size:15px;font-weight:700}
.logo-sub{font-size:9px;font-weight:400;opacity:.78;display:block}
@media(max-width:520px){.logo-tx,.logo-sub{display:none}}

/* ── Migas: en angosto se ocultan. El header ya lleva cuenta y contador,
      y el título se desbordaba (medido: 39 px de scroll horizontal). ── */
.hdr-sep{color:rgba(255,255,255,.55);font-size:1.05rem;flex-shrink:0}
/* El título es fijo en tres módulos ("Optimizador") y el nombre del documento
   en Costos y Cotización, que puede ser largo. Se recorta con puntos suspensivos
   en vez de empujar la cuenta fuera de la barra. */
.hdr-title{font-size:13px;font-weight:600;color:rgba(247,243,233,.82);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Drawer ☰ (antes solo vivía en index/tapacanto/…css; el panel
   de productividad carga el shell y no esos CSS → sin esto el menú
   queda en el flujo de la página con botones blancos nativos). ── */
.nav-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:490;
  opacity:0;pointer-events:none;transition:opacity .25s}
.nav-ov.open{opacity:1;pointer-events:all}
.nav-menu{position:fixed;top:0;left:0;bottom:0;width:280px;background:var(--belk-brand,#143A7D);color:var(--belk-on-brand,#FFFFFF);
  z-index:500;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:4px 0 24px rgba(0,0,0,.35)}
.nav-menu.open{transform:translateX(0)}
.nav-hd{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12);flex-shrink:0}
.nav-close{background:rgba(255,255,255,.1);border:none;color:#fff;
  width:32px;height:32px;border-radius:7px;cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.nav-close:hover{background:rgba(255,255,255,.2)}
.nav-body{flex:1;overflow-y:auto;padding:8px 0}
.nav-section{padding:8px 0}
.nav-section+.nav-section{border-top:1px solid rgba(255,255,255,.08)}
.nav-section-title{font-size:9px;font-weight:800;letter-spacing:.9px;
  color:rgba(255,255,255,.66);text-transform:uppercase;padding:6px 18px 4px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 18px;
  background:none;border:none;color:rgba(255,255,255,.88);font-size:13px;
  font-weight:500;cursor:pointer;transition:background .12s;text-align:left;
  border-radius:0;font-family:inherit;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-item .ni-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.ni-icon svg{width:16px;height:16px;display:block;margin:0 auto;fill:currentColor;stroke:currentColor}
.nav-signout svg{width:14px;height:14px;flex-shrink:0;fill:currentColor;stroke:currentColor}
.nav-item .ni-badge{margin-left:auto;background:var(--belk-accent,#E87722);color:var(--belk-on-accent,#0D2350);
  font-size:9px;font-weight:800;padding:2px 7px;border-radius:10px}
.nav-footer{border-top:1px solid rgba(255,255,255,.12);padding:12px 16px;flex-shrink:0}
.nav-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nav-user-avatar{width:36px;height:36px;border-radius:50%;background:var(--belk-accent,#51C7F5);
  color:var(--belk-on-accent,#0D1B2A);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  flex-shrink:0;overflow:hidden;border:2px solid rgba(255,255,255,.2)}
.nav-user-avatar img{width:100%;height:100%;object-fit:cover}
.nav-user-name{font-size:13px;font-weight:700;color:#fff;line-height:1.2}
.nav-user-email{font-size:10px;color:rgba(255,255,255,.5);margin-top:1px}
.nav-signout{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);font-size:12px;font-weight:500;cursor:pointer;
  border-radius:8px;transition:all .15s;font-family:inherit}
.nav-signout:hover{background:rgba(255,255,255,.14);color:#fff}

/* Drawer: marino fijo. --belk-brand en taller es acero (tinta de tarjeta)
   y pintaría el menú gris. Mismo criterio que el header. */
[data-zona="taller"] .nav-menu{
  background:#0D1B2A; color:#F7F3E9;
}
@media(max-width:640px){
  .hdr-sep,.hdr-title{display:none}
}

/* ── Selector de proyecto en el menú ☰ (proyecto central, 2026-09-15) ──
   «Proyecto: X ▾» abre la lista de proyectos del usuario. Cada fila lleva
   cuatro puntos: los casilleros con contenido (Optimizar · Tapacanto ·
   Costos · Cotización). El marcado (#navProyecto) vive en cada página; el
   nombre lo pinta js/belk-session.js desde el espejo, en el primer cuadro. */
.nav-proy-cur .nav-proy-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.nav-proy-cur .nav-proy-caret{flex-shrink:0;font-size:11px;opacity:.7;transition:transform .15s}
.nav-proy-cur[aria-expanded="true"] .nav-proy-caret{transform:rotate(180deg)}
.nav-proy-panel{background:rgba(0,0,0,.18);padding:4px 0 6px}
.nav-proy-list{list-style:none;margin:0;padding:0;max-height:220px;overflow-y:auto}
.nav-proy-fila{display:flex;align-items:stretch}
.nav-proy-item{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:8px 8px 8px 46px;
  background:none;border:none;color:rgba(255,255,255,.85);font-size:13px;font-family:inherit;
  text-align:left;cursor:pointer;transition:background .15s}
.nav-proy-item:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-proy-item.activo{color:#fff;font-weight:700}
.nav-proy-item.activo::before{content:'';position:absolute;left:34px;width:6px;height:6px;border-radius:50%;
  background:var(--belk-accent,#E87722)}
.nav-proy-item{position:relative}
.nav-proy-nombre{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-proy-pasos{display:flex;gap:3px;flex-shrink:0}
.nav-proy-paso{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);display:block}
.nav-proy-paso.on{background:var(--belk-accent,#E87722)}
.nav-proy-del{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:38px;
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.45);padding:0}
.nav-proy-del:hover{color:#ff8a80;background:rgba(255,255,255,.1)}
.nav-proy-del:disabled{opacity:.4;cursor:default}
.nav-proy-vacio{padding:8px 18px 8px 46px;font-size:12px;color:rgba(255,255,255,.6)}
.nav-proy-acts .nav-item{padding-top:8px;padding-bottom:8px;font-size:.82rem}

/* ── Diálogo de lote: Sumar / Reemplazar / Cancelar (R4) ──────────────
   Lo monta js/belk-session.js (preguntarLote) en cualquier página. Un solo
   diálogo para escaneo, plantillas y «ejemplo»: mismas palabras en todos. */
.belk-lote{position:fixed;inset:0;z-index:800;background:rgba(13,27,42,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.belk-lote[hidden]{display:none}
.belk-lote-box{background:var(--belk-level-3,#FFFFFF);border-radius:14px;padding:22px 20px 16px;
  max-width:420px;width:100%;box-shadow:var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16))}
.belk-lote-box h3{font-size:17px;margin:0 0 8px;color:var(--belk-text,#0D2350)}
.belk-lote-box p{font-size:14px;line-height:1.45;color:var(--belk-text-muted,#5A6B82);margin:0 0 16px}
.belk-lote-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

/* ── Zona derecha y chip de cuenta ── */
/* `#subBtnSlot` NO lleva ancho reservado a propósito: reservar 120 px para el
   botón «Activar Plan» dejaría un hueco muerto a quien ya pagó. En su lugar
   js/hdr-espejo.js lo pinta desde la caché local antes del primer cuadro, y
   sub-btn.js confirma o lo retira cuando responde /api/subscription. */
.hdr-right{display:flex;align-items:center;gap:6px;flex-shrink:0;
  margin-left:auto;min-width:0}
/* El hueco se reserva ANTES de saber quién entró. auth-guard lo llena cuando
   Firebase resuelve la sesión, casi un segundo después del primer pintado: sin
   una medida mínima el chip nace de 16 px y al llenarse empuja el header entero
   —el baile del video del 2026-09-03—. 42×34 es exactamente el avatar de 26 más
   su padding, así que reservar no deja hueco visible: es el tamaño final.
   El nombre no cuenta: en teléfono `.uc-name` va oculto (regla de 600 px). */
.hdr-user-chip{display:flex;align-items:center;gap:6px;cursor:pointer;
  padding:4px 8px;border-radius:8px;transition:background .15s;
  min-width:42px;min-height:34px;box-sizing:border-box;justify-content:center}
.hdr-user-chip:hover{background:rgba(255,255,255,.12)}
.hdr-user-chip img,.hdr-user-chip .uc-avatar{width:26px;height:26px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.3);flex-shrink:0;
  background:var(--belk-accent,#51C7F5);display:flex;align-items:center;
  justify-content:center;font-size:12px;overflow:hidden;
  /* El celeste es relleno, nunca fondo de tinta clara: la crema heredada
     del marco daba 1,75 sobre él. La marca ya tiene su par (8,98). */
  color:var(--belk-on-accent,#0D1B2A)}
.hdr-user-chip img{object-fit:cover}
.hdr-user-chip .uc-name{font-size:12px;font-weight:600;color:#fff;
  max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.hdr-user-chip .uc-name{display:none}}

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

.belk-nav,.belk-acts{
  position:fixed; z-index:340;   /* sobre la topbar (300), bajo modales (400+) */
  display:flex;
  /* La píldora flota POR ENCIMA de todo, así que en la rampa de profundidad
     es la capa más cercana: vidrio CLARO sobre las páginas de herramientas.
     Antes era vidrio oscuro (rgba(18,22,32,.42)) porque el marco de la app
     era oscuro; al migrar las páginas a claro quedaba gris plano y el texto
     encima daba 2,89 de contraste. */
  background:rgba(255,255,255,.80);
  /* Filo obligatorio: sin él la píldora se funde con el nivel de atrás. */
  border:1px solid var(--belk-border,rgba(13,35,80,.10));
  border-radius:var(--bs-radius);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.9),
    var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16));
}

/* Zona oscura (documento = landings; taller = módulos): la píldora sube
   desde el marino en vez de bajar. Sigue siendo "más clara que lo de atrás". */
/* Solo .belk-acts: la píldora se pinta sola más abajo, con el aspecto
   del traspaso. Mientras .belk-nav estuvo aquí, esta regla le pisaba el
   fondo, el filo y la sombra por especificidad. */
[data-zona="documento"] .belk-acts,
[data-zona="taller"] .belk-acts{
  background:rgba(13,27,42,.78);
  border-color:rgba(255,255,255,.14);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.16),
    0 8px 24px rgba(0,0,0,.35);
}

/* 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:var(--belk-level-3,#FFFFFF)}
  [data-zona="documento"] .belk-acts,
  [data-zona="taller"] .belk-acts{background:var(--belk-level-2,#16283B)}
  /* La píldora, sólida y oscura: con el vidrio apagado la tinta clara
     sobre un nivel-2 gris queda ilegible. */
  .belk-nav{background-color:#050D19}
  .bn-step{background:#050D19}
}

/* ── Píldora de módulos (abajo al centro) ─────────────────
   Diseño "estela tipográfica" (traspaso 2026-08-30). Cambia respecto
   del anterior: el módulo activo YA NO es un bloque celeste sólido,
   sino un recuadro de vidrio retroiluminado, y una estela translúcida
   de 4 px cruza por detrás de las etiquetas marcando el avance.

   La estela va SOLO por los cuatro pasos: nace en el centro de
   Optimizador (10 %) y muere en el de Cotización (70 %). Escaneo IA
   queda al otro lado del separador — es una vía de entrada, no un paso.

   El glider sigue moviéndose solo con CSS (data-active + translateX);
   lo único que cambió es cómo se ve. */

.belk-nav{
  left:50%;
  bottom:calc(var(--bs-gap) + env(safe-area-inset-bottom) + var(--belk-vv-inset,0px));
  transform:translateX(-50%);
  width:min(560px, calc(100vw - 2*var(--bs-gap)));
  height:var(--bs-nav-h,64px);
  overflow:hidden;        /* el glider se recorta contra el radio de la píldora */
  /* La cápsula cambia de FORMA al scrollear (ver el bloque `.bn-compact`
     al final): alto, ancho y radio se animan juntos. */
  transition:height .28s cubic-bezier(.2,.75,.25,1),
             width .28s cubic-bezier(.2,.75,.25,1),
             border-radius .28s cubic-bezier(.2,.75,.25,1),
             background-size .28s ease,
             transform .28s ease, opacity .28s ease;
  /* Vidrio propio: más opaco que el compartido para que la estela y el
     recuadro activo tengan sobre qué brillar. */
  /* Nivel 0 (#050D19), el más oscuro del proyecto: la cápsula oscura es
     lo que hace que la tinta y la estela se vean intensas. */
  /* Marino corrido hacia el cian, no gris: es lo que hace que la cápsula
     "tenga color" en vez de verse apagada. El filo también es celeste. */
  background-color:rgba(6,26,40,.95);
  border-color:rgba(129,214,247,.26);
  /* Dos capas: el separador de Escaneo IA (línea de 1 px al 80 %) y un
     velo celeste sobre todo el ancho. El separador vive acá y no en un
     pseudo-elemento porque los dos de la píldora los ocupa la estela. */
  background-image:
    linear-gradient(rgba(81,199,245,0), rgba(81,199,245,.42), rgba(81,199,245,0)),
    linear-gradient(180deg, rgba(81,199,245,.10), rgba(81,199,245,.03));
  background-repeat:no-repeat, no-repeat;
  background-size:1px 38px, auto;
  background-position:80% 13px, 0 0;
  border-radius:17px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.11),
    0 12px 30px rgba(4,14,24,.30);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
}

/* Cuánto va encendido, medido sobre el TRAMO de la estela (no sobre la
   píldora): 3 saltos iguales entre los 4 pasos. Se mide así porque el
   avance ahora RECORTA una estela de ancho fijo — si en vez de eso la
   estela creciera, sus atenuaciones se moverían con ella. */
.belk-nav[data-active="1"]{--bn-avance:0%}
.belk-nav[data-active="2"]{--bn-avance:33.333%}
.belk-nav[data-active="3"]{--bn-avance:66.667%}
.belk-nav[data-active="4"]{--bn-avance:100%}

/* Estela apagada (::before) y encendida (::after). Van detrás de las
   etiquetas: por eso el texto lleva text-shadow, para no perderse. */
.belk-nav::before,.belk-nav::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  top:39px; height:4px; border-radius:999px;
  opacity:1; transition:opacity .22s ease;
}
.belk-nav::before{
  left:10%; right:30%;
  background:linear-gradient(90deg, transparent,
    rgba(140,196,222,.30) 5%, rgba(140,196,222,.30) 95%, transparent);
  filter:blur(.45px);
}
/* La estela encendida ocupa SIEMPRE el tramo entero; lo que cambia es
   cuánto se recorta. Baja de intensidad justo donde pasa por detrás de
   cada palabra y la recupera en los huecos.

   La banda cubre el 60 % del paso entre centros, porque medido sobre la
   barra real las etiquetas ocupan ~58 %. Con la banda anterior (31 %) la
   línea se apagaba solo en el centro exacto de la palabra y seguía
   brillante sobre casi todas las letras. Entre palabra y palabra queda
   un 22 % del paso a brillo pleno. */
.belk-nav::after{
  left:10%; right:30%;
  background:linear-gradient(90deg,
    rgba(90,203,246,.27) 10.0%,
    rgba(92,204,246,.81) 13.0%,
    rgba(99,207,247,.82) 20.3%,
    rgba(101,208,247,.28) 23.3%,
    rgba(119,216,249,.29) 43.3%,
    rgba(121,217,250,.87) 46.3%,
    rgba(128,220,250,.89) 53.7%,
    rgba(130,221,251,.30) 56.7%,
    rgba(148,229,253,.32) 76.7%,
    rgba(150,230,253,.94) 79.7%,
    rgba(157,233,254,.95) 87.0%,
    rgba(159,234,254,.33) 90.0%);
  box-shadow:0 0 16px rgba(81,199,245,.58);
  clip-path:inset(0 calc(100% - var(--bn-avance,0%)) 0 0);
  transition:clip-path .46s cubic-bezier(.2,.75,.25,1), opacity .22s ease;
}
/* Fuera de la secuencia (Panel, Looks) y en Escaneo IA no hay avance:
   la estela se ve entera pero apagada. */
.belk-nav:not([data-active]),.belk-nav[data-active="5"]{--bn-avance:0%}

.bn-i{
  flex:1; min-width:0; position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:6px; padding:6px .4rem 5px; margin:0;
  /* Costos usa <button class="bn-i"> (flush de sesión antes de Cotización).
     Sin esto el UA pinta fondo claro y la tinta desaparece. */
  background:transparent; border:0; cursor:pointer;
  isolation:isolate;
  color:#a6c9dd; text-decoration:none;
  transition:color .3s ease, gap .28s cubic-bezier(.2,.75,.25,1),
             padding .28s cubic-bezier(.2,.75,.25,1);
}
.bn-i svg{width:22px; height:22px; display:block; flex-shrink:0;
  position:relative; z-index:2;
  transition:width .28s cubic-bezier(.2,.75,.25,1),
             height .28s cubic-bezier(.2,.75,.25,1)}
.bn-i span{
  position:relative; z-index:4;
  font-size:11px; line-height:14px; letter-spacing:.005em;
  max-width:100%; max-height:14px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  /* La estela pasa por detrás del texto; sin sombra el texto se pierde. */
  text-shadow:0 1px 2px rgba(6,17,29,.92), 0 0 4px rgba(6,17,29,.60);
  transition:color .3s ease, text-shadow .3s ease,
             opacity .18s ease, max-height .28s cubic-bezier(.2,.75,.25,1);
}
.bn-i:hover{color:var(--bs-text-on)}

/* Pasos ya recorridos: celeste suave. */
.belk-nav[data-active="2"] .bn-i:nth-child(2),
.belk-nav[data-active="3"] .bn-i:nth-child(2),
.belk-nav[data-active="3"] .bn-i:nth-child(3),
.belk-nav[data-active="4"] .bn-i:nth-child(2),
.belk-nav[data-active="4"] .bn-i:nth-child(3),
.belk-nav[data-active="4"] .bn-i:nth-child(4){color:#8fd3ea}
.belk-nav[data-active="2"] .bn-i:nth-child(2) span,
.belk-nav[data-active="3"] .bn-i:nth-child(2) span,
.belk-nav[data-active="3"] .bn-i:nth-child(3) span,
.belk-nav[data-active="4"] .bn-i:nth-child(2) span,
.belk-nav[data-active="4"] .bn-i:nth-child(3) span,
.belk-nav[data-active="4"] .bn-i:nth-child(4) span{
  color:#bdeafb; font-weight:600;
  text-shadow:0 1px 2px rgba(6,17,29,.95), 0 0 9px rgba(81,199,245,.42);
}
.belk-nav[data-active="2"] .bn-i:nth-child(2) svg,
.belk-nav[data-active="3"] .bn-i:nth-child(2) svg,
.belk-nav[data-active="3"] .bn-i:nth-child(3) svg,
.belk-nav[data-active="4"] .bn-i:nth-child(2) svg,
.belk-nav[data-active="4"] .bn-i:nth-child(3) svg,
.belk-nav[data-active="4"] .bn-i:nth-child(4) svg{
  filter:drop-shadow(0 0 7px rgba(81,199,245,.40));
}

/* La PÁGINA ABIERTA. El glider ya la enmarca, pero su tinta era la misma de
   los pasos recorridos, así que «dónde estoy» no se leía de un vistazo
   (pedido 2026-09-11). Se apoya en aria-current, que ya traen los 5
   módulos. Los colores son los que esta hoja ya usa: no se inventa ninguno. */
.bn-i[aria-current="page"]{color:var(--belk-accent)}
.bn-i[aria-current="page"] span{color:var(--belk-accent); font-weight:700}
/* El halo toma el color del propio ícono: así no hay un celeste escrito a
   mano que se desincronice si la paleta cambia. */
.bn-i[aria-current="page"] svg{filter:drop-shadow(0 0 9px currentColor)}

/* El primer paso, llamando. Mientras el taller no tenga ningún plan de corte,
   el Optimizador late en la cápsula para que se entienda por dónde se empieza
   (pedido 2026-09-14). La clase la pone js/productividad.js con hechos=0 y
   la quita en cuanto hay un plan. El que late va encendido con la tinta de
   marca: apagado, el latido pasaba desapercibido (pedido 2026-09-14). */
.bn-i--pulsa{color:var(--belk-accent)}
.bn-i--pulsa span{color:var(--belk-accent)}
.bn-i--pulsa svg{animation:bnPulsa .85s ease-in-out infinite;transform-origin:center}
@keyframes bnPulsa{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 3px currentColor)}
  50%{transform:scale(1.3);
      filter:drop-shadow(0 0 14px currentColor) drop-shadow(0 0 24px currentColor)}
}

/* Destino que el invitado todavía no puede usar (auditoría UX C4). */
.bn-i--locked{opacity:.5}
.bn-i--locked::after{
  content:"🔒"; position:absolute; top:4px; right:calc(50% - 20px);
  font-size:9px; line-height:1; pointer-events:none; z-index:4;
}
.nav-item--locked{opacity:.62}
.nav-item--locked::after{content:"🔒"; margin-left:auto; font-size:11px; opacity:.8}
.bn-i:focus-visible{outline:2px solid #51C7F5; outline-offset:-3px; border-radius:14px}

/* El módulo activo: texto casi blanco con brillo, no tinta sobre bloque. */
.bn-i[aria-current="page"]{color:#ddf7ff}
.bn-i[aria-current="page"] svg{
  color:#eafaff; transform:translateY(-1px);
  filter:drop-shadow(0 0 9px rgba(81,199,245,.88));
  transition:filter .3s ease, transform .3s ease;
}
.bn-i[aria-current="page"] span{
  color:#f7fcff; font-weight:500; letter-spacing:.015em;
  text-shadow:0 1px 2px rgba(6,17,29,.95),
              0 0 7px rgba(213,247,255,.72),
              0 0 18px rgba(81,199,245,.88);
}

/* Escaneo IA queda al otro lado. No es un paso, así que tampoco se
   alinea con ellos: va centrado en vertical, y su etiqueta cae por
   debajo de la línea de la estela. El separador lleva degradado. */
/* padding 0 (no solo arriba): con el de abajo puesto quedaba 1 px más
   baja que los pasos, y en el traspaso son 5. */
.belk-nav .bn-i:nth-child(6){justify-content:center; gap:5px; padding-block:0}
.belk-nav .bn-i:nth-child(6) span{font-weight:500}
.belk-nav .bn-i:nth-child(6)::before{
  content:""; position:absolute; left:0; top:13px;
  width:1px; height:38px; pointer-events:none;
  background:linear-gradient(transparent, rgba(81,199,245,.34), transparent);
}

/* ── El recuadro de vidrio del activo ──────────────────────
   Es el glider de siempre: mismo elemento, mismo data-active, misma
   regla de translateX. Lo único que cambió es que dejó de ser un
   bloque celeste sólido. */
.bn-glider{
  position:absolute; top:0; bottom:0; left:0; z-index:2;
  width:calc(100% / 5);
  pointer-events:none;
  transition:transform .46s cubic-bezier(.2,.75,.25,1), opacity .22s ease;
}
.bn-glider::before{
  content:""; position:absolute; inset:3px -2px 2px;
  border:1px solid rgba(194,241,255,.62);
  /* Más cuadrado que la cápsula (17) a propósito: el contraste entre las
     dos formas es lo que hace que el botón se lea como pieza aparte. */
  border-radius:8px;
  background:
    radial-gradient(circle at 50% 112%, rgba(81,199,245,.38), transparent 56%),
    linear-gradient(145deg, rgba(224,248,255,.26), rgba(81,199,245,.12) 58%, rgba(8,25,39,.05));
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(81,199,245,.18),
    0 0 0 1px rgba(81,199,245,.14),
    0 0 22px rgba(81,199,245,.52),
    0 0 44px rgba(81,199,245,.26);
  -webkit-backdrop-filter:blur(11px) saturate(155%);
  backdrop-filter:blur(11px) saturate(155%);
}
/* El foco de luz sobre la estela, a la altura del paso actual. */
.bn-glider::after{
  content:""; position:absolute; left:50%; top:41px;
  width:108px; height:34px; pointer-events:none;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(235,252,255,.80) 0 6%, rgba(81,199,245,.52) 22%,
    rgba(81,199,245,.22) 45%, transparent 73%);
  filter:blur(1.8px);
  animation:bnRespira 2.8s ease-in-out infinite;
}
/* En los EXTREMOS el recuadro no puede sobresalir: se sale de la cápsula
   y overflow:hidden lo corta contra la esquina redondeada — se veía
   deformado en el primer módulo y en el último. Ahí se recoge y deja el
   mismo aire que arriba y abajo. */
.belk-nav[data-active="1"] .bn-glider::before{inset:3px -2px 2px 4px}
.belk-nav[data-active="5"] .bn-glider::before{inset:3px 4px 2px -2px}

@keyframes bnRespira{0%,100%{opacity:.68}50%{opacity:1}}

/* En Escaneo IA no hay paso, así que tampoco foco sobre la estela. */
.belk-nav[data-active="5"] .bn-glider::after{display:none}

.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%)}

/* ── ESTADO COMPACTO — la cápsula se simplifica al subir ─────────
   Espejo de la cápsula de la app (`_GlassNavBar`, home_shell.dart), con
   el mismo gesto y las mismas medidas del traspaso:

     al BAJAR por el contenido  →  cápsula completa (64 de alto, radio
       17, nombres, estela, recuadro del activo y pestaña «PASO n/4»)
     al SUBIR                   →  cápsula simplificada: 52 de alto,
       radio entero, 16 px más angosta por lado, SOLO íconos (a 26) y
       sin estela, sin recuadro ni pestaña

   Antes la píldora se APARTABA al bajar (`.shell-away`, retirada el
   2026-09-02). Se iba entera: para volver a un módulo había que subir
   primero. Simplificarse en vez de esconderse deja la misma pantalla
   libre sin quitar la navegación — y es lo que ya hace la app.

   La estela y el recuadro existen para pasar por detrás de las
   PALABRAS; sin ellas no tienen a qué apuntar, y por eso se apagan.

   El estado de reposo es el compacto: `bn-compact` viene puesto en el
   HTML de los siete módulos (sin eso la barra nace ancha y se encoge
   sola en el primer cuadro). js/shell-autohide.js lo quita y lo pone.

   Escaneo IA es la diferencia con la app —allá es el FAB de cámara,
   acá es el quinto ítem— así que su separador se queda, encogido para
   caber centrado en los 52. */
.belk-nav.bn-compact{
  height:52px;
  border-radius:999px;
  width:min(528px, calc(100vw - 2*var(--bs-gap) - 32px));
  background-size:1px 26px, auto;   /* el separador de Escaneo IA, centrado */
}
.belk-nav.bn-compact .bn-i{justify-content:center; gap:0; padding-block:0}
/* Escaneo IA ya venía centrado con su propio gap: acá tampoco lo lleva. */
.belk-nav.bn-compact .bn-i:nth-child(6){gap:0}
.belk-nav.bn-compact .bn-i span{opacity:0; max-height:0; pointer-events:none}
.belk-nav.bn-compact .bn-i svg{width:26px; height:26px}
.belk-nav.bn-compact::before,
.belk-nav.bn-compact::after,
.belk-nav.bn-compact .bn-glider{opacity:0}
/* El candado del invitado va sobre el ícono, que ahora está centrado. */
.belk-nav.bn-compact .bn-i--locked::after{top:2px; right:calc(50% - 18px)}

/* ── Interruptor de animación, para NACER con una forma ──────────
   `js/shell-autohide.js` recupera la forma que traía el módulo anterior.
   Quitar `bn-compact` a secas no la deja ancha: la manda a recorrer 52→64
   animándose, que es justo el movimiento que se quiere quitar. Y no basta con
   apagar la transición de la píldora — los nombres (`.bn-i span`), los íconos
   y la estela tienen la suya, y se quedaban a mitad de camino.

   `!important` acá es a propósito y es el único uso legítimo que le queda al
   marco: es un interruptor que dura un reflujo y tiene que ganarle a CUALQUIER
   transición declarada más abajo o en el CSS de una página. */
.belk-nav.bn-sin-anim,
.belk-nav.bn-sin-anim *{transition:none !important; animation:none !important}

/* ── EXCEPCIÓN: el optimizador en el navegador de PC va FIJO ──────
   Decisión del usuario 2026-09-02: en el optimizador de escritorio la
   cápsula se queda SIEMPRE completa. Nada más cambia — las otras seis
   páginas y todo lo que sea teléfono o tablet siguen con el gesto.

   POR QUÉ AHÍ. En `index.html` el `.layout` mide `100vh - 52px` con
   scroll PROPIO (por eso el body no lleva `padding-bottom`, ver
   `shell-fixed` más abajo): el documento no scrollea y la cápsula
   reacciona a los contenedores de adentro, así que el gesto se sentía
   impredecible justo en la pantalla donde más se mira la barra.

   EL GANCHO. `shell-fixed` vive SOLO en el body de index.html, así que
   no hace falta inventar una clase nueva ni tocar las otras páginas.

   POR QUÉ `hover` Y `pointer` Y NO SOLO EL ANCHO. Una tablet apaisada
   pasa los 769 px de sobra, y el pedido era explícito: tablet sigue
   igual. El par `hover:hover` + `pointer:fine` es "hay un mouse de
   verdad" — un notebook con pantalla táctil lo cumple (manda el
   trackpad), un iPad con teclado no (iPadOS informa puntero grueso).

   ES CSS Y NO JS A PROPÓSITO: `js/shell-autohide.js` sigue poniendo y
   quitando `bn-compact` igual que en el resto, acá simplemente no
   pinta. Hacerlo en JS haría nacer la barra compacta y estirarse en el
   primer cuadro — un parpadeo en cada carga. */
@media (min-width:769px) and (hover:hover) and (pointer:fine){
  body.shell-fixed .belk-nav.bn-compact{
    height:var(--bs-nav-h,64px);
    border-radius:17px;
    width:min(560px, calc(100vw - 2*var(--bs-gap)));
    background-size:1px 38px, auto;   /* el separador de Escaneo IA, entero */
  }
  body.shell-fixed .belk-nav.bn-compact .bn-i{
    justify-content:flex-start; gap:6px; padding:6px .4rem 5px;
  }
  /* Escaneo IA no es un paso: va centrado y con su propio aire. */
  body.shell-fixed .belk-nav.bn-compact .bn-i:nth-child(6){
    justify-content:center; gap:5px; padding-block:0;
  }
  body.shell-fixed .belk-nav.bn-compact .bn-i span{
    opacity:1; max-height:14px; pointer-events:auto;
  }
  body.shell-fixed .belk-nav.bn-compact .bn-i svg{width:22px; height:22px}
  body.shell-fixed .belk-nav.bn-compact::before,
  body.shell-fixed .belk-nav.bn-compact::after,
  body.shell-fixed .belk-nav.bn-compact .bn-glider{opacity:1}
  body.shell-fixed .belk-nav.bn-compact ~ .bn-step{
    transform:translateX(-50%); opacity:1;
  }
  body.shell-fixed .belk-nav.bn-compact .bn-i--locked::after{
    top:4px; right:calc(50% - 20px);
  }
}

/* ── La pestaña «PASO n/4» ─────────────────────────────────
   Va DETRÁS de la píldora (z-index bajo) y asoma por abajo: por eso
   solo lleva radio en las esquinas inferiores y no tiene borde
   superior. Sin clip-path ni SVG — así venía en el traspaso y es
   mucho más simple que la silueta recortada que tenía antes. */
.bn-step{
  position:fixed; z-index:339;   /* justo DEBAJO de la píldora (340) */
  pointer-events:none;
  left:50%; transform:translateX(-50%);
  /* 22 px por debajo del borde inferior de la píldora: los otros 8 px
     de su alto quedan escondidos detrás. */
  bottom:calc(var(--bs-gap) + env(safe-area-inset-bottom) + var(--belk-vv-inset,0px) - 22px);
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:112px; height:30px; padding-top:7px;
  border:1px solid rgba(255,255,255,.10); border-top:0;
  border-radius:0 0 15px 15px;
  background:rgba(5,13,25,.94);
  box-shadow:0 10px 20px rgba(2,8,16,.28), inset 1px 0 0 rgba(255,255,255,.07);
  color:#8fa1b4;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  transition:transform .28s ease, opacity .28s ease;
}
.bn-step i{font-style:normal; font-size:11px; font-weight:500;
  letter-spacing:.20em; text-transform:uppercase}
.bn-step b{color:#c2cfdd; font-size:14px; font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
/* En compacto no hay pestaña: se recoge detrás de la píldora y se apaga.
   Igual que en la app, donde directamente no se dibuja. */
.belk-nav.bn-compact ~ .bn-step{
  transform:translateX(-50%) translateY(-26px);
  opacity:0;
}
@media(max-width:560px){ .bn-step{width:104px} }


/* ── Barra de acciones — EN EL FLUJO, al final del contenido ──────
   Ya no flota al costado (decisión del usuario 2026-07-29, en las dos
   versiones). Como píldora fija robaba 218 px de ancho a TODAS las páginas
   y quedaba colgando a media altura de la pantalla, lejos del dato sobre el
   que actúa. Ahora es una barra horizontal donde termina el contenido: la
   misma en escritorio y en teléfono, y lo único que cambia con el ancho es
   que en ≤768px los botones pierden la etiqueta (ver el bloque de móvil). */

.belk-acts{
  position:static;
  margin:0 auto 12px; padding:8px;
  width:fit-content; max-width:calc(100% - 24px);
  flex-flow:row wrap; justify-content:center; align-items:center; gap:6px;
}

.ba-i{
  position:relative; flex-shrink:0;
  height:44px;                          /* mínimo táctil 44 de alto */
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 14px;
  border-radius:calc(var(--bs-radius) - 6px);
  color:var(--bs-text);
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.2px;
  text-align:left; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
/* El nombre de la acción, SIEMPRE a la vista en escritorio (A9). */
.ba-i::before{content:attr(data-label); overflow:hidden; text-overflow:ellipsis}
.ba-i svg{width:20px; height:20px; display:block; flex-shrink:0}
.ba-i:hover{background:rgba(13,35,80,.07); color:var(--bs-text-on)}
[data-zona="documento"] .ba-i:hover,
[data-zona="taller"] .ba-i:hover{background:rgba(255,255,255,.10)}
.ba-i:focus-visible{outline:2px solid var(--belk-brand,#143A7D); outline-offset:-2px}
.ba-i:disabled{opacity:.55; cursor:not-allowed}   /* .4 se leía como roto */
.ba-i--primary{
  color:var(--bs-on-ink);
  background:var(--bs-on);
  box-shadow:0 2px 10px color-mix(in srgb, var(--bs-on) 35%, transparent);
}

/* `.ba-sep` ELIMINADO (decisión del usuario 2026-07-29). Existía para separar
   las acciones del módulo de los "Enviar a…", y esos botones ya no existen ni
   vuelven: el dato viaja solo entre módulos (`publicarACostos` en tapacanto.js,
   `presupuesto.result` en presupuesto.js). Sin envíos manuales no hay dos
   grupos que separar. Si algún día vuelve un grupo distinto de acciones, se
   decide el separador de nuevo — no se resucita este. */

/* El tooltip al hover se retiró (A9): la etiqueta ya está escrita en el botón.
   Un tooltip que repite lo que se está leyendo es ruido, y era la única forma
   de descubrir la mitad de las acciones — imposible en un teléfono. */

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

/* La barra de acciones ya no ocupa el costado: no hay `padding-right` que
   reservar, y las páginas sin barra dejaron de ser un caso especial. */
body.has-shell{
  padding-bottom:calc(var(--bs-nav-h) + 2*var(--bs-gap) + env(safe-area-inset-bottom)
                      + var(--belk-vv-inset,0px));
}

/* Páginas cuyo layout YA mide el alto de la ventana (index.html: .layout es
   height:calc(100vh - 52px) con scroll interno). Ahí el padding-bottom del body
   no despeja nada: solo agrega ~96px de scroll muerto que despega el header
   fijo al desplazarse. Auditoría UX B30. En móvil ese layout pasa a
   height:auto y el body sí scrollea, así que el despeje vuelve. */
@media (min-width:769px){
  body.has-shell.shell-fixed{padding-bottom:0}
}

/* ── El marco PUBLICA su despeje; los flotantes lo CONSUMEN ──────
   Antes esto eran 8 reglas con !important pisando componentes ajenos
   (`body.has-shell .bk-wa-fab{bottom:96px!important}`). Eso invierte la
   dependencia: el marco tenía que conocer a cada flotante por su clase, y
   cualquier flotante nuevo nacía tapado hasta que alguien lo agregara acá.

   Ahora el marco solo declara CUÁNTO espacio ocupa, y cada flotante lee el
   token con su propio valor de respaldo — así funciona igual en páginas que
   no cargan el marco. Sin !important y sin que el marco sepa de nadie.

   Un flotante nuevo se apoya escribiendo:
     bottom: var(--belk-float-bottom, 16px);
     right:  var(--belk-float-right, 16px); */
:root{
  --belk-float-bottom:16px;   /* páginas sin marco: pegado al borde */
  --belk-float-right:16px;
  --belk-float-bottom-2:68px; /* segundo nivel (el fab que va sobre otro) */
}
body.has-shell{
  /* Suman el hueco de la barra del navegador igual que la píldora: si no,
     el fab de WhatsApp y el chat de la guía se hunden detrás de ella. */
  --belk-float-bottom:calc(118px + var(--belk-vv-inset,0px));     /* píldora (64) + pestaña (22) + gap (16) + aire */
  --belk-float-bottom-2:calc(170px + var(--belk-vv-inset,0px));   /* encima del anterior */
  /* `--belk-float-right` se queda en el valor base: la barra de acciones ya no
     está al costado, así que no hay nada que despejar a la derecha. */
}

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

/* ── Móvil: la barra es la misma, pero sin etiquetas ─────────────
      A 390 px seis botones con nombre no caben en una fila y volvía el scroll
      horizontal que nadie descubre. Cuadrados de 44 (el mínimo táctil): las 6
      acciones de Costos/Cotización entran en una sola fila. El nombre sigue en
      `aria-label` para lectores de pantalla — el usuario eligió sin texto
      sabiendo que contradice el hallazgo A9. ──────────────────── */

@media (max-width:768px){
  .belk-acts{margin:0 12px 12px; max-width:none; width:auto}
  .ba-i{width:44px; padding:0; gap:0}
  .ba-i::before{content:none}     /* el nombre no se escribe en móvil */
}

@media (prefers-reduced-motion:reduce){
  .bn-i--pulsa svg{animation:none;filter:drop-shadow(0 0 8px currentColor)}
  .belk-nav,.bn-i,.bn-i span,.bn-i svg,.bn-step,
  .belk-nav::before,.belk-nav::after,
  .ba-i,.ba-i::after,.bn-glider{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   BOTÓN DE MARCA DEL HEADER — «Presentamos BELK»
   ───────────────────────────────────────────────────────────────
   Placa negra con filo de metal: el mismo tratamiento del ícono de
   la app — icon.svg es una placa negra con barras de gradiente
   metálico y una barra azul. Acá el botón ES esa pieza: placa,
   filo de metal y BELK en el azul del logo.

   Antes era un botón gris con el estilo escrito EN LÍNEA en las 5
   páginas del taller. El sello lo prohíbe (§2.7: el chrome nunca es
   hex en el markup); esto lo trae al componente.

   No compite con «Activar Plan»: esa es LA primaria del header y va
   celeste LLENO. Acá el color es solo la palabra BELK.

   ≤560px cae «Presentamos» y queda la píldora con BELK. No duplica
   nada: a ese ancho el wordmark BELK del header ya está oculto
   (verificado en dev, 2026-08-29).
   ═══════════════════════════════════════════════════════════════ */
.hdr-marca{
  display:inline-flex; align-items:center; gap:5px;
  height:32px; padding:0 13px; flex-shrink:0; cursor:pointer;
  font-family:inherit; font-size:10.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  border:2px solid transparent; border-radius:999px;
  /* DATOS de marca, no tema: la placa negra, los stops de metal y el
     azul son los mismos valores de icon.svg. Por eso van en hex. */
  color:#F7F3E9;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(180deg,#E9E5E7 0%,#C8C4C6 42%,#B9B3B6 58%,#DDD8DA 100%) border-box;
  transition:filter .18s;
}
.hdr-marca .hm-mk{color:#26B1E5; font-weight:800}  /* DATOS: azul del logo */
.hdr-marca:hover{filter:brightness(1.14)}
.hdr-marca:focus-visible{outline:2px solid #26B1E5; outline-offset:2px}

@media(max-width:560px){
  .hdr-marca{padding:0 15px}
  .hdr-marca .hm-pre{display:none}
}
@media(prefers-reduced-motion:reduce){ .hdr-marca{transition:none} }

/* ═══════════════════════════════════════════════════════════════
   EL SALTO DE MÓDULO — lo que NO se mueve al cruzar
   ───────────────────────────────────────────────────────────────
   El permiso para fundir una página en otra (`@view-transition`) ya vive
   en css/foundation.css desde el 2026-09-03: no se repite acá. Lo que
   faltaba es esto — decirle al navegador QUÉ es lo mismo en las dos
   páginas.

   Un elemento con `view-transition-name` que existe en las dos no se
   funde: el navegador lo reconoce como el mismo y lo interpola de una
   posición a la otra. Como el header y la cápsula están en el mismo
   sitio en los siete módulos, «interpolar» es no moverse. Ese es todo el
   truco: el marco se queda quieto y cruza solo el contenido, que es lo
   que separa «cinco páginas» de «una app».

   REGLAS DE ORO (romperlas cancela la transición ENTERA, sin aviso):
     · Un `view-transition-name` no se puede repetir en un documento. Por
       eso van en `.hdr`, `.belk-nav` y `.bn-step`, que son únicos. Si
       algún día hay dos píldoras en una página, hay que numerarlas.
     · El elemento nombrado se saca del árbol y se dibuja en una capa
       aparte: pierde el recorte de sus padres. Por eso NO se nombra
       `.bn-glider` —vive dentro del `overflow:hidden` de la píldora y se
       saldría por los bordes mientras dura la transición—, aunque
       deslizarlo hasta el módulo nuevo se vea bonito en el papel.

   El apagado por `prefers-reduced-motion` también está en foundation.css
   (anula las animaciones de todos los grupos). No duplicarlo acá.
   ═══════════════════════════════════════════════════════════ */
.hdr{ view-transition-name:belk-hdr }
.belk-nav{ view-transition-name:belk-capsula }
.bn-step{ view-transition-name:belk-paso }

/* El contenido cruza rápido: esto acompaña un toque, no lo hace esperar.
   El grupo `root` es todo lo que NO lleva nombre propio. */
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.16s }