/* Brújula · kit de UI estándar (adopción gradual) ───────────────────────────────────────────────────────────────────────── Reglas del kit: · Todo va con prefijo .ui-* → CERO colisión con el CSS inline de los módulos existentes. Un módulo "adopta" el kit usando estas clases. · Los tokens :root de abajo solo RELLENAN huecos: cada página define los suyos inline después de este archivo, y la cascada hace que ganen. · Hoy lo usan: bitácora y seguridad (topbar estándar). El resto de páginas no se ven afectadas. Migrar módulo a módulo comparando el render. · Es asset de /assets/ → al cambiarlo, subir VERSION en sw.js. */ /* La paleta NO se define aquí. Vive en assets/tokens.css, que es la fuente del portal. Esto era un "fallback" que, al cargarse DESPUÉS de los tokens, los anulaba: el gris de texto se quedaba en #7a6f55 (contraste 4.18:1) cuando tokens.css ya lo había subido a #6e6349 (4.99:1, cumple AA). Se comprobó que ninguna página carga ui.css sin tokens.css, así que el fallback no protegía de nada. */ /* ── Topbar estándar (variante A del portal) ──────────────────────────── Los mismos valores que la barra `.topbar` de anim.css (22 sep 2026): las dos formas de escribir la barra tienen que verse igual. */ .ui-topbar{ position:sticky; top:0; z-index:1000; background:var(--topbar); border-bottom:1px solid var(--border-2); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad-x,12px) 14px; gap:20px; /* El vidrio lo pone anim.css para todas las barras (`--glass-blur-chrome`). */ } .ui-brand{display:flex; align-items:center; justify-self:start} .ui-brand-back{ font-size:var(--text-mini); letter-spacing:var(--track-widest); text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color var(--amr-dur-fast,.15s); font-weight:600; } @media (hover:hover){.ui-brand-back:hover{color:var(--ink)}} .ui-brand-center{display:flex; align-items:center; gap:10px; justify-self:center} .ui-brand-name{ font-family:var(--font-sans); font-size:var(--text-cuerpo); letter-spacing:var(--track-widest); color:var(--ink); text-transform:uppercase; font-weight:600; padding-left:.18em; text-decoration:none; } .ui-brand-sep{width:1px; height:18px; background:var(--gold); opacity:.7} .ui-brand-sub{font-size:var(--text-micro); letter-spacing:var(--track-widest); color:var(--muted); text-transform:uppercase; font-weight:600} /* El nombre de la pantalla es su

— mismo criterio que `h1.brand-sub` en nav.css, para las tres páginas que llevan la topbar del kit. Solo se apaga el margen del navegador: el tamaño y el interletraje los manda la clase, que tiene más especificidad que `h1`. */ h1.ui-brand-sub{margin:0} .ui-topbar-actions{display:flex; gap:8px; align-items:center; justify-self:end} .ui-theme-toggle{ background:transparent; border:1px solid var(--border-2); color:var(--muted); width:36px; height:36px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background-color var(--amr-dur-fast,.15s),color var(--amr-dur-fast,.15s),border-color var(--amr-dur-fast,.15s); padding:0; position:relative; border-radius:var(--radius-sm,8px); } @media (hover:hover){.ui-theme-toggle:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}} /* Talla táctil de la topbar del kit (Fase 2, ago 2026). Estas tres piezas medían 36×36 (toggle), 36 de alto (reintentar) y 52×12 (el «‹ Inicio»): con el pulgar, 12 px de alto es no acertar. Aquí se usa el ÁREA INVISIBLE y no el crecimiento del control, porque son piezas de barra: engordar el toggle a 44 sube la altura de la topbar en todas las pantallas. El botón del kit sí crece de verdad —es la acción principal de la vista— y esa diferencia es deliberada. La condición es el dedo (`pointer:coarse`), no un ancho: un iPad también se toca. */ @media (pointer:coarse){ .ui-theme-toggle, .ui-brand-back, .ui-state-cta{ position:relative; } .ui-theme-toggle::after, .ui-brand-back::after, .ui-state-cta::after{ content:""; position:absolute; left:0; right:0; top:50%; height:var(--tap-min,44px); transform:translateY(-50%); /* Ancho mínimo: un «‹ Inicio» de 52 px de ancho ya cumple, pero el toggle mide 36 y necesita los 8 que le faltan repartidos a los lados. */ min-width:var(--tap-min,44px); margin-inline:auto; } } .ui-theme-toggle .icon-sun, .ui-theme-toggle .icon-moon{ position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; transition:opacity var(--amr-dur-view,.28s) ease,transform var(--amr-dur-lento,.34s) var(--amr-ease-spring,cubic-bezier(.34,1.56,.64,1)); } .ui-theme-toggle .icon-sun{opacity:1; transform:rotate(0) scale(1)} .ui-theme-toggle .icon-moon{opacity:0; transform:rotate(-180deg) scale(0.4); pointer-events:none} [data-theme="dark"] .ui-theme-toggle .icon-sun{opacity:0; transform:rotate(180deg) scale(0.4); pointer-events:none} [data-theme="dark"] .ui-theme-toggle .icon-moon{opacity:1; transform:rotate(0) scale(1); pointer-events:auto} @media (max-width:520px){ /* Header móvil ESTÁNDAR: solo el nombre del módulo (wordmark = escritorio), centrado por flex de lados iguales. */ .ui-topbar{display:flex;align-items:center;padding:calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;gap:8px;min-height:46px} .ui-brand{flex:1 1 0;min-width:0} .ui-topbar-actions{flex:1 1 auto;min-width:fit-content;display:flex;justify-content:flex-end} .ui-brand-center{flex:0 1 auto;min-width:0} .ui-brand-name,.ui-brand-sep{display:none} .ui-brand-sub{font-size:13px;letter-spacing:.22em;padding-left:.22em;color:var(--ink);font-weight:var(--weight-extrabold,800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58vw} .ui-brand-back{font-size:10px; letter-spacing:.16em} /* Aquí venían dos reglas más que no se veían pero mandaban: `.ui-brand-name{font-size:15px}` sobre un elemento que la línea de arriba ya pone en `display:none` —muerta—, y un segundo `.ui-brand-sub{font-size:9px}` que pisaba en silencio los 12.5px de esta misma llave. Ganaba el 9px por ser el último, así que el NOMBRE DEL MÓDULO se leía en el teléfono a 9 píxeles. Medido en seguridad a 375px: `font-size: 9px`. Afecta a las tres pantallas que usan el kit con esta topbar (seguridad, bitacora, tablas). */ } /* ── Toast estándar (para módulos que adopten el kit) ─────────────────── */ /* ── El toast · SE MUDÓ A assets/anim.css (1 sep 2026) ───────────────────── Mismo motivo que el esqueleto de carga y el estado vacío: aquí solo lo veían 35 de los 52 archivos, y el aviso de «guardado» tiene que ser el mismo en todo el portal. Vive en `anim.css`, que sí cargan los 52, junto con el resto del rediseño (icono por tipo, se puede descartar, se anuncia). */ /* ── Estado unificado (vacío / error) · SE MUDÓ A assets/anim.css (ago 2026) ── Mismo motivo por el que se mudó el esqueleto de carga tres líneas más abajo: aquí solo lo veían 33 de las 50 páginas, y un estado vacío que falta en 17 pantallas no es un estado unificado. Vive en `anim.css`, que cargan las 50, y se pone con `amrVacio()` (theme.js) en vez de escribir el markup a mano. */ /* ── Skeleton de carga · SE MUDÓ A assets/anim.css (jul 2026) ────────────── Vivía aquí, y aquí solo lo veían 26 de las 43 páginas: las otras 17 seguían con «Cargando…» de texto porque no cargan este kit. Como el estado de carga tiene que ser el MISMO en todo el portal (orden de Samuel), bajó a `anim.css`, que sí está en las 42 páginas operativas. Conserva el nombre `.ui-skel` a propósito: renombrarlo habría roto las cuatro pantallas que ya lo usaban sin darle nada a nadie. */ /* ── Botones del kit (roles estándar) ───────────────────────────────────── Espejo portable de la especificación .bds-btn del sistema de diseño (design-system/src/styles/components.css). Tres roles y una talla: .ui-btn → primario (dorado): la acción principal de la vista .ui-btn--ghost → secundario: acciones de apoyo .ui-btn--danger → destructivo: borrar/rechazar (contorno, no grita) .ui-btn--sm → compacto para barras y filas El hover del danger usa `--on-danger`, que en Modo mar es oscuro: ahí --danger es rosa claro y el blanco quedaba ilegible. */ /* Mismo botón que `.btn` de anim.css (22 sep 2026, diseño aprobado): 36 px, letra de 11 en mayúsculas, principal dorado y secundario con contorno de control. Lo cuida tests/un-solo-boton.test.mjs. */ .ui-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--alto-control,36px); padding:0 var(--space-4,16px); box-sizing:border-box; /* En frase y con relieve, como `.btn` (plano con profundidad, 23 sep 2026: el porqué, en anim.css). */ font-family:var(--font-sans,inherit); font-size:var(--text-apoyo,13px); font-weight:var(--weight-semibold,600); letter-spacing:0; line-height:1.1; text-transform:none; cursor:pointer; white-space:nowrap; text-decoration:none; border-radius:var(--radius-sm,8px); border:var(--stroke,1px) solid color-mix(in srgb,var(--gold,#3548ff) 82%,#000); background:var(--gold,#3548ff); color:var(--on-gold,#ffffff); box-shadow:var(--relieve,none); transition:filter var(--amr-dur-fast,.13s) var(--amr-ease,ease), background var(--amr-dur-fast,.13s) var(--amr-ease,ease), color var(--amr-dur-fast,.13s) var(--amr-ease,ease), border-color var(--amr-dur-fast,.13s) var(--amr-ease,ease), box-shadow var(--amr-dur,.2s) var(--amr-ease-out,ease-out), transform var(--amr-dur-fast,.13s) var(--amr-ease-out,ease-out); } /* Sin resplandor dorado al pasar el cursor: Samuel ya lo rechazó en las tarjetas y en los widgets, y un botón con relieve no lo necesita. */ @media (hover:hover){.ui-btn:hover:not(:disabled){ filter:brightness(1.05); }} .ui-btn:active:not(:disabled){ transform:translateY(1px); box-shadow:var(--relieve-pulsado,none); } .ui-btn:disabled{ opacity:.5; cursor:default; filter:none; transform:none; box-shadow:none; } .ui-btn:focus-visible{ outline:2px solid var(--gold,#3548ff); outline-offset:2px; } .ui-btn--ghost{ background:transparent; color:var(--ink,#1c1e21); border-color:var(--borde-control,rgba(10,31,51,.26)); box-shadow:none; } @media (hover:hover){.ui-btn--ghost:hover:not(:disabled){ filter:none; box-shadow:none; background:var(--chip); border-color:var(--ink,#1c1e21); }} .ui-btn--danger{ background:transparent; color:var(--danger,#a33a3a); border-color:color-mix(in srgb,var(--danger,#a33a3a) 55%,transparent); box-shadow:none; } @media (hover:hover){.ui-btn--danger:hover:not(:disabled){ filter:none; box-shadow:none; background:var(--danger,#a33a3a); border-color:var(--danger,#a33a3a); color:var(--on-danger,#fff); }} .ui-btn--sm{ min-height:28px; padding:0 var(--space-3, 12px); } @media (max-width:760px){ .ui-btn{ min-height:var(--alto-control-movil,44px); } } @media(prefers-reduced-motion:reduce){ .ui-btn,.ui-btn:active{ transform:none } @media (hover:hover){.ui-btn:hover{ transform:none }} } /* Talla táctil (defecto D-15). En escritorio el botón mide ~41 px y el compacto ~30: bien para el ratón. Con el dedo, el estándar del portal es 44 y hasta ahora `--alto-control-movil` no lo aplicaba ni un selector. Aquí SÍ crece el control —no un área invisible como en las pestañas—: un botón es la acción principal de la vista y merece el tamaño de verdad. La condición es el dedo (`pointer:coarse`), no el ancho: un iPad también se toca. `inline-flex` centra el texto dentro de la altura nueva. */ @media (pointer:coarse){ .ui-btn{ min-height:var(--alto-control-movil,44px); display:inline-flex; align-items:center; justify-content:center; } } /* ── Campo del kit (label + control) ────────────────────────────────────── Añadido en la Fase 2 de la remodernización (ago 2026). El kit tenía botón, topbar, toast, modal y estado vacío, y NO tenía campo — que es, con 624 apariciones, el control más repetido del portal. Sin componente canónico, cada pantalla escribió el suyo: por eso hay 82 selectores que anulan el anillo de foco y 148 campos sin nombre accesible. Uso:
Error (el mensaje se asocia, no solo se pinta):

Los kilos no pueden ser negativos.

El `