/* ═══════════════════════════════════════════════════════════════════════ OLIVIA — componentes de la plataforma ⚠️ LOS TOKENS NO ESTÁN ACÁ. Están en `tokens.css`, que viene de Claude Design y es la fuente. Este archivo SOLO compone: no define un color, no inventa un radio y no elige una tipografía. Si algo hace falta y no está en un token, se pide en Design — no se agrega acá. QUÉ CAMBIÓ AL TRAER LOS TOKENS DE VERDAD (11 ago 2026), porque la primera versión de esta hoja los había supuesto y erraba en cinco cosas: 1. El fondo es BLANCO ABSOLUTO (--n-0), no un gris verdoso. 2. El producto es CURVO, pero no ovalado — corregido por wdeza el 12 ago 2026: «no exageres con que la plataforma es curva, usemos rectángulos con esquinas redondeadas». Design decía cápsula completa (999 px) en chips, botones y campos; hoy --r-1 vale 10 px. Ver tokens.css. 3. LA SOMBRA ESTÁ PROHIBIDA en tarjetas. Solo la barra fija la lleva. 4. El turquesa de marca es #00786F, no #0E9B94. 5. El texto normativo literal va en SERIF (--ff-legal). Es el único lugar donde entra, y es el que distingue la prueba del comentario. Y la regla madre, que la primera versión sí respetaba y hay que sostener: · EL MATIZ pertenece al ESTADO del plazo — círculo, círculo medio, triángulo, rombo. · LA DENSIDAD DE GRIS pertenece al NIVEL DE VERIFICACIÓN — cuadrado lleno, medio, punteado. Sin matiz. NADA GRIS DISPARA UNA ALERTA. · EL COLOR DE MARCA NO ES SEMÁNTICO: jamás en un chip de estado. ═══════════════════════════════════════════════════════════════════════ */ /* La version va tambien en el import: sin ella el navegador se queda con los tokens viejos aunque olivia.css cambie, y un valor corregido acá —el radio, por ejemplo— no se ve nunca. */ @import url("tokens.css?v=13"); /* Las familias son Source Sans 3 y Source Serif 4. No se incrustan todavía: el archivo standalone de Design las referencia por un id interno del empaquetador, no como datos. Hasta traer los .woff2, la pila cae a la tipografía del sistema — que es lo que ya declara `--ff-ui`. Está anotado en /huecos: una fuente que falla en silencio cambia el ritmo de toda la pantalla y nadie sabe por qué. */ body { font-size: var(--fs-4); line-height: var(--lh-ui); } button { background:none; border:none; cursor:pointer; text-align:left; } a.link { text-decoration: underline; text-underline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════════════ LA BARRA — UNA SOLA FILA 🔴 La anterior tenía DOS pisos. El de abajo llevaba «Sus módulos / Configuración / Equipo» y el rótulo del entorno: 48 px fijos, en todas las pantallas, para dos destinos que se tocan el día del registro y casi nunca más —y uno de los tres, «Equipo», era una pestaña de Configuración con otro nombre—. Dos barras de menú arriba es lo primero que se nota mal. 🔑 Una fila, y adentro dos bloques que no compiten porque no dicen lo mismo: a la IZQUIERDA quién es —la marca y la sociedad activa—, a la DERECHA qué puedo hacer —el módulo, el tema, el engranaje, yo—. En el medio no va nada: el hueco es lo que hace legible el reparto. Se conserva el papel teñido de marca y la línea de 3 px con el degradado del símbolo: es la única vez que ese degradado sale a la interfaz, y marca el borde del producto. La barra es `sticky` y nunca se va: dentro de un módulo, saber en cuál se está no puede depender de haber scrolleado hasta arriba. ══════════════════════════════════════════════════════════════════════════ */ /* 🔑 La altura es un token porque hay contenido que se pega DEBAJO de ella —el menú de configuración— y calcular ese `top` a mano fue lo que dejó ese menú metido detrás de la barra vieja. Se cambia acá y se corrige solo. */ :root{ --hz-h: 60px; } @media (max-width: 640px){ :root{ --hz-h: 54px; } } .hz{position:sticky;top:0;z-index:200;background:var(--shell-grad); border-bottom:1px solid var(--shell-line-hi);box-shadow:var(--sh-1); color:var(--tx-2);font-size:var(--fs-2)} .hz-firma{position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-marca)} .hz-fila{display:flex;align-items:center;gap:0;min-height:var(--hz-h); padding:0 clamp(14px,2.2vw,26px)} /* ── la marca, que es el botón de casa ────────────────────────────────── 🔑 Es un enlace, no un adorno, y tiene que verse: se levanta al pasar el puntero. Sin esa señal, un logo que navega es un secreto. */ .hz .marca{display:flex;align-items:center;flex:none;border-radius:8px; padding:4px 2px;transition:opacity .16s ease,transform .16s ease} .hz .marca svg{height:27px;width:auto;display:block} .hz .marca:hover{opacity:.72;transform:translateY(-1px)} .hz .marca:active{transform:none} /* ── la sociedad activa ───────────────────────────────────────────────── Estructura «Olivia │ Empresa». El nombre es CONTEXTO, no un control: por eso no tiene chrome de botón ni caret mientras haya una sola sociedad. */ .hz .emp{display:flex;align-items:baseline;gap:8px;min-width:0;flex:0 1 auto} .hz .emp .sola{font-size:14px;font-weight:620;letter-spacing:-.01em; color:var(--tx-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; min-width:0;max-width:42ch} .hz .emp .rotulo{font-size:var(--fs-2);color:var(--tx-3);white-space:nowrap;flex:none} /* 🔑 EL SELECTOR DE SOCIEDAD. Con una sola empresa el rótulo de arriba se queda como está —sin caret, sin menú—; con dos o más, `base.html` lo cambia por un `