/* fsui v1 — tokens de diseño del estándar Hipermedia Fortiseg. Fuente única de verdad (spec: docs/specs/hipermedia-v1/01-tokens-y-tema.md). Identidad derivada del CSS núcleo de web-corp (azul corporativo #1e3c72). Tema: claro en :root; oscuro vía prefers-color-scheme (estado "sistema") y vía [data-theme] cuando el usuario elige (cookie fsui_theme). */ :root { --fsui-paper: #f4f6fb; --fsui-surface: #ffffff; --fsui-ink: #23293a; --fsui-muted: #5a6478; --fsui-line: #d8dee9; /* EL BORDE DE UN CONTROL NO ES UN SEPARADOR. `--fsui-line` es el filete entre filas de una tabla, donde ser discreto es lo correcto; el borde de un campo es lo que dice DONDE SE ESCRIBE, y WCAG 1.4.11 le pide 3:1 como elemento no textual. Medido, el filete daba 1.35 sobre superficie y 1.25 sobre papel: menos de la MITAD del minimo, y de ahi que costara distinguir el campo (lo vio Manolo en Asistente > Canales > Apariencia). Este valor da 3.48 y 3.22, y se queda por debajo de `--fsui-muted` (5.95) para no leerse como tinta. */ --fsui-line-control: #7f8a9e; --fsui-accent: #1e3c72; --fsui-accent-ink: #1e3c72; --fsui-on-accent: #ffffff; --fsui-ok: #1d6b3d; --fsui-ok-bg: #e2f2e8; --fsui-warn: #7c5300; --fsui-warn-bg: #fdf0d3; --fsui-bad: #9c2c20; --fsui-bad-bg: #fae3e0; --fsui-focus: #2a5298; /* ESCALA CATEGORICA (12 tonos). No es una escala semantica: no significan bien ni mal, solo «distinto de». Sirven para dar identidad estable a una entidad —un cliente, un evento— en listados donde el color es lo unico que distingue una fila de la siguiente. Sube al estandar el 2026-09 desde alcazar, con dos consumidores que NO son suyos ya usandola: modules/social_hub y modules/informes. Si cada modulo eligiera sus doce tonos, dos clientes distintos saldrian del mismo color en pantallas contiguas. LOS DOCE SE DISENAN PARA TEXTO BLANCO ENCIMA y todos cumplen AA 4.5 con `--fsui-cat-ink`; hay un test que lo exige, asi que un tono nuevo que no llegue no entra. NO SE REDEFINEN EN TEMA OSCURO, y es deliberado: el color es la IDENTIDAD de la entidad. Si cambiara con el tema, el mismo cliente seria de dos colores segun la hora del dia. */ /* SEIS NIVELES DE ALERTA (spec de redisenyo §5.2). El estandar tenia tres —ok/warn/bad— y la aplicacion necesita seis: Information, Success, Caution, Warning, Danger, Critical. CADA NIVEL LLEVA SU TINTA, y no es simetria decorativa: con relleno saturado y texto blanco, TRES DE LOS SEIS no llegan a AA (Success 2.52, Caution 1.41, Warning 2.40). Una regla global de tinta reproduce el fallo en la mitad de los casos. DOS FORMAS, porque son dos sitios distintos (decision de Manolo, 9-sep): `-bg` + `-ink` -> PALIDO. Es la forma de los badges de listas y tablas: seis distintivos en fila con una sola familia visual, y silenciosa en una tabla densa. Ademas la spec pide que el badge de estado sea PULSABLE y se abra como selector: un distintivo palido con su flecha se lee como un control; un relleno saturado, como una etiqueta fija. `-solid` + `-solid-ink` -> RELLENO. Reservado al mensaje de sistema (Area 11), que es un aviso unico y momentaneo y ahi el relleno fuerte tiene sentido. Los seis colores de §5.2 se conservan como ORIGEN DEL TONO en las dos formas; lo que cambia es como se renderiza segun el contexto. Los dieciocho pares estan medidos y todos pasan AA 4.5; hay un test que lo exige. */ --fsui-nivel-info-bg: #e3e8f7; --fsui-nivel-info-ink: #182e6d; --fsui-nivel-exito-bg: #e3f7eb; --fsui-nivel-exito-ink: #147038; --fsui-nivel-cautela-bg: #f7f3e3; --fsui-nivel-cautela-ink: #7b650a; --fsui-nivel-aviso-bg: #f7ede3; --fsui-nivel-aviso-ink: #7b410a; --fsui-nivel-peligro-bg: #f7e3e6; --fsui-nivel-peligro-ink: #74101e; --fsui-nivel-critico-bg: #f5e3f7; --fsui-nivel-critico-ink: #6d0b7a; --fsui-nivel-info-solid: #2e58d1; --fsui-nivel-info-solid-ink: #ffffff; --fsui-nivel-exito-solid: #22bb5d; --fsui-nivel-exito-solid-ink: #111111; --fsui-nivel-cautela-solid: #fcd738; --fsui-nivel-cautela-solid-ink: #111111; --fsui-nivel-aviso-solid: #fc891d; --fsui-nivel-aviso-solid-ink: #111111; --fsui-nivel-peligro-solid: #cf1d35; --fsui-nivel-peligro-solid-ink: #ffffff; --fsui-nivel-critico-solid: #9f10b2; --fsui-nivel-critico-solid-ink: #ffffff; --fsui-cat-ink: #ffffff; --fsui-cat-0: #0000ce; --fsui-cat-1: #b3261e; --fsui-cat-2: #146c2e; --fsui-cat-3: #7b4397; --fsui-cat-4: #a86400; --fsui-cat-5: #00696d; --fsui-cat-6: #5b3cc4; --fsui-cat-7: #98123f; --fsui-cat-8: #34573e; --fsui-cat-9: #8f4700; --fsui-cat-10: #1b5aa6; --fsui-cat-11: #6d3564; --fsui-space-1: 0.25rem; --fsui-space-2: 0.5rem; --fsui-space-3: 1rem; --fsui-space-4: 1.5rem; --fsui-space-5: 2.5rem; --fsui-radius: 6px; --fsui-font: system-ui, "Segoe UI", Ubuntu, Cantarell, "DejaVu Sans", sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fsui-paper: #12161f; --fsui-surface: #1a2130; --fsui-ink: #e6eaf2; --fsui-muted: #9aa6bd; --fsui-line: #2c3547; --fsui-line-control: #68738a; --fsui-accent: #7da4dd; --fsui-accent-ink: #9dbde8; --fsui-on-accent: #0e1524; --fsui-ok: #82cf9d; --fsui-ok-bg: #1c3326; --fsui-warn: #e0b45e; --fsui-warn-bg: #382d12; --fsui-bad: #ec9a8f; --fsui-bad-bg: #3d201b; --fsui-focus: #7da4dd; /* Los niveles en oscuro: el fondo se hunde y la tinta sube, igual que hacen ok/warn/bad. El RELLENO no cambia: es un color de marca de aviso, no una superficie, y un rojo de peligro que cambia de tono con el tema deja de reconocerse de un vistazo. */ --fsui-nivel-info-bg: #16203b; --fsui-nivel-info-ink: #95a9e4; --fsui-nivel-exito-bg: #163b25; --fsui-nivel-exito-ink: #95e4b4; --fsui-nivel-cautela-bg: #3b3416; --fsui-nivel-cautela-ink: #e4d595; --fsui-nivel-aviso-bg: #3b2816; --fsui-nivel-aviso-ink: #e4bb95; --fsui-nivel-peligro-bg: #3b161b; --fsui-nivel-peligro-ink: #e495a0; --fsui-nivel-critico-bg: #37163b; --fsui-nivel-critico-ink: #db95e4; } } :root[data-theme="dark"] { --fsui-paper: #12161f; --fsui-surface: #1a2130; --fsui-ink: #e6eaf2; --fsui-muted: #9aa6bd; --fsui-line: #2c3547; --fsui-line-control: #68738a; --fsui-accent: #7da4dd; --fsui-accent-ink: #9dbde8; --fsui-on-accent: #0e1524; --fsui-ok: #82cf9d; --fsui-ok-bg: #1c3326; --fsui-warn: #e0b45e; --fsui-warn-bg: #382d12; --fsui-bad: #ec9a8f; --fsui-bad-bg: #3d201b; --fsui-focus: #7da4dd; /* Los niveles en oscuro: el fondo se hunde y la tinta sube, igual que hacen ok/warn/bad. El RELLENO no cambia: es un color de marca de aviso, no una superficie, y un rojo de peligro que cambia de tono con el tema deja de reconocerse de un vistazo. */ --fsui-nivel-info-bg: #16203b; --fsui-nivel-info-ink: #95a9e4; --fsui-nivel-exito-bg: #163b25; --fsui-nivel-exito-ink: #95e4b4; --fsui-nivel-cautela-bg: #3b3416; --fsui-nivel-cautela-ink: #e4d595; --fsui-nivel-aviso-bg: #3b2816; --fsui-nivel-aviso-ink: #e4bb95; --fsui-nivel-peligro-bg: #3b161b; --fsui-nivel-peligro-ink: #e495a0; --fsui-nivel-critico-bg: #37163b; --fsui-nivel-critico-ink: #db95e4; } /* ---- base mínima del shell (consumida por todos los niveles) ---- */ * { box-sizing: border-box; } body { margin: 0; background: var(--fsui-paper); color: var(--fsui-ink); font-family: var(--fsui-font); font-size: 1rem; line-height: 1.55; } a { color: var(--fsui-accent-ink); } :focus-visible { outline: 2px solid var(--fsui-focus); outline-offset: 2px; } .fsui-topbar { display: flex; align-items: center; gap: var(--fsui-space-3); padding: var(--fsui-space-2) var(--fsui-space-3); background: var(--fsui-surface); border-bottom: 1px solid var(--fsui-line); min-height: 56px; } .fsui-topbar__logo { display: inline-flex; align-items: center; gap: var(--fsui-space-2); font-weight: 700; text-decoration: none; color: var(--fsui-ink); min-height: 44px; } .fsui-topbar__title { flex: 1; text-align: center; color: var(--fsui-muted); font-size: 0.95rem; margin: 0; } .fsui-usermenu { position: relative; margin-left: auto; } .fsui-usermenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fsui-accent); color: var(--fsui-on-accent); font-weight: 700; } .fsui-usermenu > summary::-webkit-details-marker { display: none; } .fsui-usermenu__panel { position: absolute; right: 0; top: calc(100% + var(--fsui-space-1)); min-width: 14rem; background: var(--fsui-surface); border: 1px solid var(--fsui-line); border-radius: var(--fsui-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); padding: var(--fsui-space-1); z-index: 20; } .fsui-usermenu__panel a, .fsui-usermenu__panel button { display: flex; align-items: center; gap: var(--fsui-space-2); width: 100%; min-height: 44px; padding: var(--fsui-space-1) var(--fsui-space-2); border: 0; background: none; color: var(--fsui-ink); font: inherit; text-align: left; text-decoration: none; border-radius: var(--fsui-radius); cursor: pointer; } .fsui-usermenu__panel a:hover, .fsui-usermenu__panel button:hover { background: var(--fsui-paper); } .fsui-theme-form { display: flex; gap: var(--fsui-space-1); padding: var(--fsui-space-1) var(--fsui-space-2); } /* Los tres conmutadores son iconos (sol / luna / pantalla): cuadrados, centrados, con el objetivo táctil de 44px, y el icono a un tamaño que se distinga. El nombre va en aria-label y title. */ .fsui-theme-form button { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 1.25rem; } .fsui-theme-form button[aria-pressed="true"] { background: var(--fsui-accent); color: var(--fsui-on-accent); } .fsui-drawer { display: none; } .fsui-main { max-width: 60rem; margin: 0 auto; padding: var(--fsui-space-4) var(--fsui-space-3); } .fsui-flash { border-radius: var(--fsui-radius); padding: var(--fsui-space-2) var(--fsui-space-3); margin: 0 0 var(--fsui-space-3); } .fsui-flash--ok { background: var(--fsui-ok-bg); color: var(--fsui-ok); } .fsui-flash--warn { background: var(--fsui-warn-bg); color: var(--fsui-warn); } .fsui-flash--bad { background: var(--fsui-bad-bg); color: var(--fsui-bad); } .fsui-table-wrap { overflow-x: auto; background: var(--fsui-surface); border: 1px solid var(--fsui-line); border-radius: var(--fsui-radius); } .fsui-table { border-collapse: collapse; width: 100%; } .fsui-table th, .fsui-table td { text-align: left; padding: var(--fsui-space-2) var(--fsui-space-3); border-top: 1px solid var(--fsui-line); } .fsui-table thead th { border-top: 0; color: var(--fsui-muted); font-size: 0.85rem; /* Un encabezado no se parte en tres lineas (-Fondo / de / cartel-): antes ensancha la columna. */ white-space: nowrap; } /* Hover de fila: SOLO en tbody, porque la cabecera no es una fila que se elija, y con el papel del tema y no con un gris inventado. */ .fsui-table tbody tr:hover { background: var(--fsui-paper); } /* Un control DENTRO de una celda ocupa su columna: sin esto, un nombre editable se recorta a -Atencion ciud- porque el campo no crece con la celda. */ .fsui-table td .fsui-input, .fsui-table td .fsui-select { width: 100%; min-width: 11rem; } .fsui-field { display: block; margin-bottom: var(--fsui-space-3); } .fsui-field > span { display: block; margin-bottom: var(--fsui-space-1); color: var(--fsui-muted); font-size: 0.9rem; } /* Controles de formulario. UNA sola definición para dos formas de marcarlos: dentro de un `.fsui-field` (sin clase, como en example-app) o con la clase `.fsui-input` / `.fsui-select` (como los nombra la referencia visual normativa, app-shell.html, y como los usan los consumidores). Hasta ahora la clase se NOMBRABA en la referencia y no se PUBLICABA aquí: Alcázar la usaba en 32 plantillas y social-hub en 84, y en ninguna aplicaba nada — cada control salía con lo que decide el navegador, y un input, un select y un textarea por defecto no miden lo mismo. No fallaba nada (ni build, ni CI, ni consola): se notaba solo comparando dos campos juntos. El `min-height` común es lo que los alinea; `box-sizing` para que el alto sea el alto. */ .fsui-field input, .fsui-field select, .fsui-field textarea, .fsui-input, .fsui-select, select.fsui-input, textarea.fsui-input { width: 100%; min-height: 2.5rem; box-sizing: border-box; padding: var(--fsui-space-2); border: 1px solid var(--fsui-line-control); border-radius: var(--fsui-radius); background: var(--fsui-surface); color: var(--fsui-ink); font: inherit; line-height: 1.25; } .fsui-field textarea, textarea.fsui-input { min-height: 5rem; } .fsui-input::placeholder { color: var(--fsui-muted); opacity: .85; } .fsui-field input:focus-visible, .fsui-field select:focus-visible, .fsui-field textarea:focus-visible, .fsui-input:focus-visible, .fsui-select:focus-visible { outline: 2px solid var(--fsui-focus); outline-offset: 1px; } .fsui-input:disabled, .fsui-select:disabled { background: var(--fsui-paper); color: var(--fsui-muted); } .fsui-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--fsui-space-3); border: 0; border-radius: var(--fsui-radius); background: var(--fsui-accent); color: var(--fsui-on-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } .fsui-button--peligro { background: var(--fsui-bad); color: #ffffff; } .fsui-button--secundario { background: transparent; color: var(--fsui-accent-ink); border: 1px solid var(--fsui-line); } .fsui-skip { position: absolute; left: -999px; top: 0; background: var(--fsui-surface); color: var(--fsui-ink); padding: var(--fsui-space-2); } .fsui-skip:focus { left: var(--fsui-space-2); z-index: 30; } @media (max-width: 700px) { .fsui-topbar__title { display: none; } .fsui-topbar { flex-wrap: wrap; } .fsui-theme-form .fsui-button { padding: 0 var(--fsui-space-2); font-size: 0.85rem; } .fsui-drawer { display: block; } .fsui-drawer > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .fsui-drawer > summary::-webkit-details-marker { display: none; } .fsui-drawer__panel { position: fixed; inset: 56px 30% 0 0; background: var(--fsui-surface); border-right: 1px solid var(--fsui-line); padding: var(--fsui-space-3); z-index: 25; overflow-y: auto; } .fsui-drawer__panel a { display: flex; align-items: center; min-height: 44px; color: var(--fsui-ink); text-decoration: none; } .fsui-nav-desktop { display: none; } } /* v1.1: logo por imagen y bloque de contexto del portal (topbar) */ .fsui-topbar__logo-img { display: block; height: 24px; width: auto; } .fsui-topbar__contexto { display: inline-flex; align-items: center; gap: var(--fsui-space-2); } /* v1.2: badge de estado (la usaban ya tres módulos de Alcázar sin definición — ALC AT#20) */ /* ICONO EN LINEA. Se dimensiona en `em`, no en pixeles, para que sea TIPOGRAFIA y no una imagen: crece con el texto que acompanya, asi que el mismo icono vale en un boton y en una cabecera sin pedirle un tamanyo distinto. El `vertical-align` compensa la linea base — sin el, el icono se apoya en el suelo del texto y parece hundido. La regla del `svg` gana a los atributos `width`/`height` que traen los ficheros de Lucide: son atributos de presentacion, y CSS tiene preferencia. */ .fsui-icono { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; } .fsui-icono svg { width: 100%; height: 100%; } .fsui-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--fsui-paper); border: 1px solid var(--fsui-line); color: var(--fsui-muted); } /* Un distintivo de estado no se parte en dos lineas (-sin / fondo-): es una pildora, no un parrafo. */ .fsui-badge { white-space: nowrap; } .fsui-badge--ok { background: #e7f2ea; border-color: #146c2e; color: #146c2e; } .fsui-badge--warn { background: #f8efe0; border-color: #b26a00; color: #8f4700; } .fsui-badge--bad { background: #f9e7e6; border-color: #b3261e; color: #b3261e; } /* NEUTRO: «esto tiene un estado y no es ni bueno ni malo». Nace de un caso real de alcazar (2026-09-07): una entrega `cancelado` se pintaba en rojo, y el contrato de atalaya dice que cancelado NO es un fallo — el operador decidio no entregarlo. Pintar decisiones en rojo ENSENA A IGNORAR EL ROJO: si la mitad de los rojos de una tabla son deliberados, el otro medio deja de mirarse. Sin este modificador la unica salida era emitir `.fsui-badge` a secas, que se ve igual pero no se LEE igual: nadie distingue «neutro a proposito» de «se olvido el modificador». Un estado que no se puede nombrar acaba nombrandose mal. */ /* Los seis niveles como distintivo PALIDO: la forma de las listas y las tablas. Los tres de siempre —ok/warn/bad— se quedan como estan: son el vocabulario de estado del estandar y hay codigo de toda la flota apoyado en ellos. Estos seis son el vocabulario de SEVERIDAD, que es otra cosa: `bad` dice «esto esta mal», `critico` dice «esto esta mal Y no puede esperar». */ .fsui-badge--info { background: var(--fsui-nivel-info-bg); border-color: var(--fsui-nivel-info-ink); color: var(--fsui-nivel-info-ink); } .fsui-badge--exito { background: var(--fsui-nivel-exito-bg); border-color: var(--fsui-nivel-exito-ink); color: var(--fsui-nivel-exito-ink); } .fsui-badge--cautela { background: var(--fsui-nivel-cautela-bg); border-color: var(--fsui-nivel-cautela-ink); color: var(--fsui-nivel-cautela-ink); } .fsui-badge--aviso { background: var(--fsui-nivel-aviso-bg); border-color: var(--fsui-nivel-aviso-ink); color: var(--fsui-nivel-aviso-ink); } .fsui-badge--peligro { background: var(--fsui-nivel-peligro-bg); border-color: var(--fsui-nivel-peligro-ink); color: var(--fsui-nivel-peligro-ink); } .fsui-badge--critico { background: var(--fsui-nivel-critico-bg); border-color: var(--fsui-nivel-critico-ink); color: var(--fsui-nivel-critico-ink); } .fsui-badge--neutro { background: var(--fsui-paper); border-color: var(--fsui-line); color: var(--fsui-muted); } /* El selector de tema de la barra sin sesión se empuja al final. Estaba como style inline y la CSP del estándar (style-src 'self') lo BLOQUEA: la regla no llegaba a aplicarse nunca. */ .fsui-theme-form--fin { margin-left: auto; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ SHELL DE 11 AREAS (spec de redisenyo §3 y §4, Manolo 2026-09-09) ══════════════════════════════════════════════════════════════════════════════════════════════ ADITIVO Y OPT-IN. Nada de lo que habia se toca: `.fsui-topbar`, `.fsui-drawer` y `shell/jinja/base.html.j2` siguen exactamente igual, asi que un consumidor que no lo pida no ve ni un pixel distinto. Se entra por `shell/jinja/areas.html.j2`, que es otro documento base. Es la misma cautela del paso 1 del redisenyo: primero existe, despues se adopta. POR QUE UNA REJILLA Y NO CAJAS ANIDADAS. Las once areas tienen reglas de tamanyo que se refieren unas a otras —el area 5 ocupa lo que le deje la 6; la 7 lo que le deje la 9— y eso con anidamiento se convierte en tres contenedores intermedios que no significan nada y que luego nadie se atreve a tocar. Con `grid-template-areas` la relacion esta ESCRITA en una figura que se lee de un vistazo, y cada area es un hijo directo con su nombre. LOS NOMBRES SON SEMANTICOS, NO NUMEROS. La spec las numera 1..11 y asi las nombramos al hablar, pero una clase `.fsui-area-8` obliga a volver a la tabla cada vez. El numero de la spec va en el comentario de cada bloque, que es donde sirve. SIN JAVASCRIPT, que es invariante del estandar: el panel de movil y el plegado del lateral son un CHECKBOX con sus etiquetas. Funcionan con CSS y con el navegador sin JS. ══════════════════════════════════════════════════════════════════════════════════════════════ */ .fsui-areas { /* `100dvh` y no `100vh`: en movil la barra del navegador se retrae y `vh` deja un hueco muerto abajo (o corta el contenido) justo en los telefonos, que es donde mas duele. */ min-height: 100dvh; display: grid; background: var(--fsui-paper); color: var(--fsui-ink); font-family: var(--fsui-font); /* La figura del layout de escritorio, tal cual la tabla de la spec. marca(1) empresa(4) -> fila de identidad tabs(2) -> submenu del item activo, VACIA si no hay titulo(5) acciones(6) -> encabezado y botonera menu(7) / admin(9) / app(10) -> los tres laterales, columna izquierda contenido(8) -> lo unico que cambia con cada pantalla sistema(11) -> aparece y desaparece */ grid-template-areas: "marca usuario" "empresa usuario" "sistema sistema" "laterales cabecera" "laterales contenido"; grid-template-columns: minmax(200px, 17rem) minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr); } /* --- Area 1: logotipo -------------------------------------------------------------------- */ .fsui-area-marca { grid-area: marca; display: flex; align-items: center; gap: var(--fsui-space-2); padding: var(--fsui-space-3); font-weight: 700; } /* --- Area 3: datos de usuario + su submenu ------------------------------------------------ */ .fsui-area-usuario { grid-area: usuario; display: flex; align-items: center; justify-content: flex-end; gap: var(--fsui-space-2); padding: var(--fsui-space-3); } /* --- Area 4: empresa (enlace a cambiar de empresa) + colapsar el lateral ------------------ */ .fsui-area-empresa { grid-area: empresa; display: flex; align-items: center; gap: var(--fsui-space-2); padding: 0 var(--fsui-space-3) var(--fsui-space-2); font-weight: 600; } .fsui-area-empresa a { color: inherit; } /* El NOMBRE de la empresa en el area 4. Tenia regla para ESCONDERSE al plegar el lateral y ninguna para su estado normal: existia solo como gancho, asi que un consumidor que copiara el marcado de la referencia se quedaba con un span sin estilo y sin ningun error que se lo dijera. Lo destapo el propio test de clases publicadas al arreglarle el detector. Y lo que le toca no es decorativo: en un lateral estrecho un nombre largo desborda o empuja la columna. Cede con puntos suspensivos -- que es exactamente lo que Alcazar ya hacia en su chip de cliente, o sea otra pieza de vocabulario que vivia en un consumidor. */ .fsui-menu-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El SUBTITULO del area 5, bajo el

: la spec pide «titulo y subtitulo». Lo publica el ESTANDAR y no cada consumidor, aunque naciera en Alcazar: lleva el prefijo `fsui-`, lo usan ya los cinco modulos del portal, y una clase del vocabulario definida en la hoja de UN consumidor es una pieza que el siguiente copia del marcado y se encuentra sin estilo. */ /* La etiqueta de SECCION del area 5, hermana del subtitulo. Vivia en la hoja de Alcazar CON ESTE MISMO NOMBRE mientras este fichero no la declaraba: no pisaba nada, pero ocupaba el prefijo del estandar con una pieza que el estandar no tenia. El dia que alguien la escribiera aqui, la version del consumidor habria ganado en silencio -- y el sintoma habria sido -el estandar no aplica- en la unica clase que nadie sospecha, porque parece suya. Discreta a proposito: si compitiera con el h1 de debajo, la cabecera tendria dos titulos. */ .fsui-area-seccion { margin: 0; font-size: 1.15rem; font-weight: 700; } .fsui-area-subtitulo { margin: .15rem 0 0; color: var(--fsui-muted); font-size: .9rem; } /* --- Areas 5 y 6: encabezado y botonera -------------------------------------------------- La regla de la spec —5 ocupa como minimo el 50% y 6 como maximo el 50%, y si los botones no caben el area CRECE EN ALTO en vez de en ancho— es literalmente `minmax(50%, 1fr) auto` mas un `flex-wrap` en la botonera. No hace falta medir nada en JS. */ .fsui-area-cabecera { grid-area: cabecera; display: grid; grid-template-columns: minmax(50%, 1fr) auto; gap: var(--fsui-space-3); align-items: start; padding: var(--fsui-space-3); border-bottom: 1px solid var(--fsui-line); background: var(--fsui-surface); } .fsui-area-titulo h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; } .fsui-area-titulo p { margin: 2px 0 0; color: var(--fsui-muted); font-size: .9rem; } .fsui-area-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--fsui-space-2); } /* --- Area 8: contenido -------------------------------------------------------------------- Lo UNICO que hace scroll. `min-height: 0` no es decorativo: sin el, un hijo alto revienta la fila de la rejilla en vez de hacer scroll dentro, y el fallo se ve solo con datos de verdad. */ .fsui-area-contenido { grid-area: contenido; overflow: auto; min-height: 0; padding: var(--fsui-space-3); } /* --- Areas 7, 9 y 10: la columna de laterales, Y EL PANEL DE MOVIL, QUE SON EL MISMO NODO --- UN SOLO MARCADO PARA LAS DOS FORMAS. La tentacion es escribir el menu dos veces —una en el lateral y otra dentro del panel de movil— y es exactamente como se llega a que una copia tenga un item que la otra no. VA CON UN CHECKBOX Y NO CON UN
, Y ESTO ES UNA CORRECCION MEDIDA (13-sep). La primera version colgaba los tres menus de un
y en escritorio le escondia el , forzando su contenido a verse con una regla de autor. El comentario decia «la regla que gana a la del navegador». NO GANA: en Blink y WebKit el contenido de un
cerrado vive en un slot que el navegador oculta de una forma que el CSS de autor NO puede revertir —no es el `display:none` que yo suponia—. Resultado en escritorio: escondido +
cerrado = LA COLUMNA ENTERA EN BLANCO. Sin menu de modulos, sin seccion de admin y sin version. Se vio en produccion, no aqui: los tests miraban el MARCADO y el marcado estaba perfecto. Quien lo decide es el navegador, y ningun test sin navegador lo iba a ver. Ahora hay captura. El checkbox no es un apaño: es el mecanismo que el layout anterior de Alcazar ya usaba y que funcionaba, con su control accesible (UX-006). Lo unico que hace falta es que el interruptor sea HERMANO de lo que gobierna, de ahi que viva como primer hijo de `.fsui-areas`. */ .fsui-menu-interruptor { position: absolute; opacity: 0; pointer-events: none; } .fsui-area-panel { grid-area: laterales; min-height: 0; display: flex; } .fsui-area-panel__caja { display: flex; flex-direction: column; width: 100%; min-height: 0; border-right: 1px solid var(--fsui-line); background: var(--fsui-surface); } .fsui-area-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--fsui-space-2); } /* Los enlaces de los menus APILAN, y esto tiene que estar en el estandar y no en cada consumidor: un `` es inline por defecto, asi que sin esto los items de menu salen en una linea seguida. Se vio en la captura de la correccion: el area existia y el menu se leia «InicioSocial HubAreas». Alcazar lo tenia en SU hoja, asi que cualquier otro consumidor habria heredado el fallo. Y por la MISMA razon apilan con 44 px de alto: 44 es el minimo de WCAG 2.5.5 para un objetivo tactil, y un menu que no se puede pulsar con el pulgar es un menu roto en el aparato en el que mas se usa. Seguia en la hoja de Alcazar, pisando el `display: block` de aqui con un `flex` suyo -- o sea que este archivo decia una cosa y lo que se veia era otra, y los demas consumidores del shell se quedaban sin la regla. `flex` con `align-items` (y no un `padding` mas gordo) porque asi el texto queda centrado en los 44 px sea cual sea su numero de lineas. */ .fsui-area-menu a, .fsui-area-admin a { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; text-decoration: none; color: inherit; border-radius: var(--fsui-radius); } .fsui-area-menu a:hover, .fsui-area-admin a:hover { background: var(--fsui-paper); } .fsui-area-menu a[aria-current="page"], .fsui-area-admin a[aria-current="page"] { background: var(--fsui-paper); font-weight: 600; } .fsui-area-admin { flex: 0 0 auto; max-height: 50%; overflow-y: auto; border-top: 1px solid var(--fsui-line); padding: var(--fsui-space-2); } .fsui-area-app { flex: 0 0 auto; border-top: 1px solid var(--fsui-line); padding: var(--fsui-space-2) var(--fsui-space-3); font-size: .8rem; color: var(--fsui-muted); } /* Las dos etiquetas del MISMO interruptor: la hamburguesa (movil) y el plegar (escritorio). Dos etiquetas para un control es lo correcto —el control accesible es UNO, el checkbox— y es lo que ya hacia el layout anterior. */ .fsui-menu-hamburguesa, .fsui-menu-plegar { cursor: pointer; display: none; align-items: center; padding: var(--fsui-space-2); border-radius: var(--fsui-radius); } .fsui-menu-hamburguesa:hover, .fsui-menu-plegar:hover { background: var(--fsui-paper); } /* --- Area 2: tabs / submenu del item activo ----------------------------------------------- «Solo se muestra contenido si el item elegido tiene submenus; si no, queda vacia» — y VACIA quiere decir que no ocupa. Sin `:empty` un submenu ausente dejaba una franja con su borde, que es peor que no tener el area: parece que falta algo. */ .fsui-area-tabs { display: flex; flex-wrap: wrap; gap: var(--fsui-space-1); border-bottom: 1px solid var(--fsui-line); padding: 0 var(--fsui-space-3); } .fsui-area-tabs:empty { display: none; } .fsui-area-tabs a { padding: var(--fsui-space-2) var(--fsui-space-3); text-decoration: none; color: var(--fsui-muted); border-bottom: 2px solid transparent; /* Lo que no se parte es el ENLACE, no la fila: con once pestañas la fila desborda a 1280px y el salto caía entre el icono y su palabra (social-hub, 22-sep, cazado por foto). */ white-space: nowrap; } .fsui-area-tabs a[aria-current="page"] { color: var(--fsui-accent-ink); font-weight: 600; border-bottom-color: var(--fsui-accent); } /* --- Area 11: mensajes del sistema -------------------------------------------------------- «Aparece y desaparece segun necesidad». Se pinta RELLENA y no palida: es el unico sitio del estandar donde el relleno saturado esta justificado —un aviso unico y momentaneo— y por eso existen los `-solid` de los seis niveles. En una tabla, ese mismo relleno gritaria. */ .fsui-area-sistema { grid-area: sistema; } .fsui-area-sistema:empty { display: none; } .fsui-sistema { display: flex; align-items: center; gap: var(--fsui-space-2); padding: var(--fsui-space-2) var(--fsui-space-3); font-weight: 600; background: var(--fsui-nivel-info-solid); color: var(--fsui-nivel-info-solid-ink); } .fsui-sistema--exito { background: var(--fsui-nivel-exito-solid); color: var(--fsui-nivel-exito-solid-ink); } .fsui-sistema--cautela { background: var(--fsui-nivel-cautela-solid); color: var(--fsui-nivel-cautela-solid-ink); } .fsui-sistema--aviso { background: var(--fsui-nivel-aviso-solid); color: var(--fsui-nivel-aviso-solid-ink); } .fsui-sistema--peligro { background: var(--fsui-nivel-peligro-solid); color: var(--fsui-nivel-peligro-solid-ink); } .fsui-sistema--critico { background: var(--fsui-nivel-critico-solid); color: var(--fsui-nivel-critico-solid-ink); } /* --- Escritorio ------------------------------------------------------------------------------ El lateral se ve, y el plegar es la unica etiqueta visible. */ @media (min-width: 1024px) { /* EL LATERAL NO CRECE CON EL CONTENIDO (Manolo, 22-sep-2026, viéndolo en staging). Con `min-height: 100dvh` la rejilla es tan alta como su contenido, así que una pantalla larga estiraba la columna izquierda y hacía scrollear la PÁGINA ENTERA: el menú se iba hacia arriba y había que subir para cambiar de sección, que es justo lo que un menú lateral evita. En escritorio la rejilla se fija a la altura de la ventana y quien scrollea es el ÁREA 8 (`.fsui-area-contenido`, que ya tiene su `overflow: auto`); el lateral scrollea solo si LO PIDE su propio menú (`.fsui-area-menu` ya lo tiene). Va en el tramo de escritorio y no arriba a propósito: en móvil el lateral es un panel `fixed` y la altura fija estorba —la barra del navegador se retrae y `dvh` cambia mientras se hace scroll—, que es por lo que la regla de arriba usa `min-height` y no `height`. */ .fsui-areas { height: 100dvh; overflow: hidden; } .fsui-menu-plegar { display: inline-flex; } /* PLEGADO: la columna desaparece Y LAS TRES RAYAS TAMBIEN. Lo pidio Manolo viendolo en staging, y tiene razon: plegado, lo unico que queda del lateral es el disco del cliente activo —que es identidad y ancla— y ese disco pasa a ser el boton de abrir. Dejar el ☰ al lado del disco deja dos botones para lo mismo en un sitio donde ya no cabe ninguno. */ .fsui-menu-interruptor:checked ~ .fsui-area-panel { display: none; } .fsui-menu-interruptor:checked ~ .fsui-area-empresa .fsui-menu-plegar { display: none; } /* El disco solo es pulsable cuando esta plegado: con el lateral a la vista es identidad, no un control, y un elemento que a veces hace algo y a veces no confunde mas que ayuda. */ .fsui-menu-disco { pointer-events: none; } .fsui-menu-interruptor:checked ~ .fsui-area-empresa .fsui-menu-disco { pointer-events: auto; cursor: pointer; } .fsui-menu-interruptor:checked ~ .fsui-area-empresa .fsui-menu-nombre { display: none; } /* PLEGADO, LA COLUMNA VALE LO QUE EL DISCO (Manolo, 22-sep-2026, en staging: «ocupa mucho espacio, debería ser como un tercio»). La causa: la columna izquierda no la ocupa solo el lateral —también el ÁREA 1 y el ÁREA 4 están en ella—, así que con `auto` la anchura la seguía fijando el LOGOTIPO, que no se pliega. Plegar escondía el menú y no devolvía el ancho, que es la mitad de la razón para plegar. Se esconde el logotipo al plegar, que es lo que el comentario de arriba ya daba por hecho: «lo único que queda del lateral es el disco del cliente activo —que es identidad y ancla—». No se pierde nada: el disco es el botón de volver a abrir. `min-content` deja la columna en el disco más su hueco. */ .fsui-menu-interruptor:checked ~ .fsui-area-marca { display: none; } .fsui-areas:has(.fsui-menu-interruptor:checked) { grid-template-columns: min-content minmax(0, 1fr); } .fsui-menu-interruptor:checked ~ .fsui-area-empresa { justify-content: center; padding: var(--fsui-space-2); gap: 0; } } /* --- Tablet y movil ------------------------------------------------------------------------- No hay lateral: hay hamburguesa arriba a la derecha y un panel que entra desde la derecha. */ @media (max-width: 1023px) { .fsui-areas { grid-template-areas: "marca usuario" "empresa empresa" "sistema sistema" "cabecera cabecera" "contenido contenido"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto minmax(0, 1fr); } .fsui-menu-hamburguesa { display: inline-flex; } .fsui-area-panel { display: none; } /* Casi todo el ancho y DESDE LA DERECHA, como pide la spec. `fixed` para que no empuje al contenido: un panel que empuja hace saltar la pagina entera al abrirlo. */ .fsui-menu-interruptor:checked ~ .fsui-area-panel { display: block; position: fixed; inset: 0 0 0 auto; width: min(92vw, 26rem); height: 100dvh; z-index: 20; overflow-y: auto; border-left: 1px solid var(--fsui-line); border-right: 0; } /* Dentro del panel se intenta que quepa todo sin scroll (spec §4.1): los topes que reparten la columna en escritorio aqui estorban. */ .fsui-menu-interruptor:checked ~ .fsui-area-panel .fsui-area-menu, .fsui-menu-interruptor:checked ~ .fsui-area-panel .fsui-area-admin { max-height: none; overflow: visible; } .fsui-area-usuario { justify-content: flex-end; } } @media (max-width: 599px) { .fsui-area-marca { padding: var(--fsui-space-2); font-size: .95rem; } .fsui-area-cabecera { grid-template-columns: minmax(0, 1fr); } .fsui-area-acciones { justify-content: flex-start; } }