/* ============================================================================= DISTRIBUIDORES — identidad visual. Scope .dx-ui, colgado de core/tokens.css. ============================================================================= El módulo de la mercadería que está en poder de un distribuidor. UNA SOLA PANTALLA —«el mostrador»— para adentro y para afuera: rail a la izquierda con los distribuidores y sus tres unidades (azúcar, edulcorantes, jugos), panel a la derecha con lo elegido. Mockup B, elegido por Hernán el 18/08/2026. EL TRATAMIENTO ES EL DE COMERCIALES — «capas con acento», y a pedido de Hernán ese mismo día: la pantalla anterior era CHATA (todo blanco sobre casi blanco, sin jerarquía). Se heredan los DOS apartamientos de `.cm-ui`, con el mismo porqué, más un tercero propio: 1. `--azure` para lo que se TOCA (el ítem elegido del rail, el pie que lleva a otra pantalla, el foco). Navy queda para la ESTRUCTURA: la cinta de arriba y la cabecera del panel. El acento NO es semántico: azure nunca significa «bien» ni «mal». El color que SÍ significa —el remito anulado, la unidad que no se puede contar— sigue siendo el de los tokens (ok / warn / crit). 2. Lienzo más oscuro que el de los otros módulos (#f1f2f5): la jerarquía se apoya en la ELEVACIÓN, y una tarjeta blanca no despega de un fondo casi blanco. 3. LAS DOS SUPERFICIES NAVY LLENAS —la cinta y la cabecera del panel— son lo que saca a esta pantalla de lo chato. Son estructura, no adorno: dicen DÓNDE estás parado (qué distribuidor, qué unidad) en una banda que no se puede confundir con una tarjeta de datos. TODO selector va bajo `.dx-ui`. Una regla suelta llamada `.card` o `.rail` rompería los módulos que siguen en Tailwind. La base tipográfica, `.hidden` y `.tnum` NO se declaran acá: viven en las tres listas agrupadas de core/tokens.css, donde `.dx-ui` está nombrado junto a los otros scopes. Si esta pantalla sale con la Inter del en vez de Segoe UI, lo primero que hay que mirar es esas listas. NADA DE NÚMEROS GIGANTES (memoria `feedback_evitar_numeros_gigantes`): la cifra de un KPI es 1.02rem, el mismo escalón que el tablero de Comerciales. ========================================================================== */ .dx-ui { --azure: #1668c4; --azure-700: #1259ab; --azure-050: #eaf2fd; --canvas: #e6ebf3; } /* La misma trampa del §7 del manual: `.hidden` (la clase) ya está resuelta en core/tokens.css, pero `hidden` (el ATRIBUTO) lo declara la hoja del navegador y cualquier `display` nuestro le gana sin pelear. */ .dx-ui [hidden] { display: none !important; } /* ============================================================================= EL ARMAZÓN — cinta arriba, rail y panel abajo, alto completo ----------------------------------------------------------------------------- SIN ESPACIO entre las dos clases: el div es `class="dx-ui dx-shell"`, UN elemento con las dos. Escrito con espacio no matchearía nada — la trampa que le costó seis etapas al ABM. El scroll es de cada columna, no del wrapper (`#page-distribuidores` lleva `data-shell="full"`): el rail y el panel se desplazan por separado, así el rail no se va de la pantalla mientras se lee una tabla larga. ========================================================================== */ .dx-ui.dx-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--canvas); } /* --- La cinta: dónde estás parado y cuánto hay, en navy lleno -------------- */ .dx-ui .dx-cinta { flex: 0 0 auto; display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 11px 20px; background: var(--navy); color: #fff; } .dx-ui .dx-cinta .tit { display: flex; align-items: baseline; gap: 9px; min-width: 0; } .dx-ui .dx-cinta .tit .q { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; } .dx-ui .dx-cinta .tit .u { font-size: .78rem; opacity: .78; } .dx-ui .dx-cinta .cif { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; } .dx-ui .dx-cinta .cif .c { display: flex; flex-direction: column; gap: 1px; } .dx-ui .dx-cinta .cif .r { font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; opacity: .7; } .dx-ui .dx-cinta .cif .v { font-size: .92rem; font-weight: 800; line-height: 1.2; } .dx-ui .dx-cinta .cif .v.nada { font-weight: 400; opacity: .6; } .dx-ui .dx-body { flex: 1 1 auto; min-height: 0; display: flex; } /* ============================================================================= EL RAIL — los distribuidores, sus unidades, y lo que es del circuito ========================================================================== */ .dx-ui .dx-rail { flex: 0 0 232px; width: 232px; min-height: 0; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--hair); padding: 10px 0 18px; } .dx-ui .dx-grupo { padding: 11px 16px 5px; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .dx-ui .dx-item { /* `box-sizing` EXPLÍCITO: es un