/* ═══════════════════════════════════════════════════════════════ 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; /* `--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 → 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 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: 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} } /* ── Zona derecha y chip de cuenta ── */ .hdr-right{display:flex;align-items:center;gap:6px;flex-shrink:0; margin-left:auto;min-width:0} .hdr-user-chip{display:flex;align-items:center;gap:6px;cursor:pointer; padding:4px 8px;border-radius:8px;transition:background .15s} .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} .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)); 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 */ transition: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; } .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); } /* 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