/* Nexus · chrome del shell de STAFF — FUENTE ÚNICA
Extraído de `main/src/styles.css` el 2026-08-27 (sdd/staff-chrome-unification, fase A).
Es el marco de marca del shell: regla superior con degradado, cabecera con logotipo y
píldora de versión, marca de agua del isologo, cuerpo y pie. Port del shell legacy
`Nexus/index.html` (`.top-line` :45, `header` :46-56, `.nexus-isologo-bg` :105-111,
`footer` :856-864).
── POR QUÉ VIVE AQUÍ Y NO EN UN CSS DE MÓDULO ─────────────────────────────
Costeo y Plan **no tienen** archivo CSS: su estilo vive inline en el ``. La única
vía que sirve para los tres módulos de staff es un ``: sin borde/fondo propios, solo transicion de opacidad al hover. */
.logo-mark-btn { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; line-height: 0; transition: opacity 150ms var(--ease); }
.logo-mark-btn:hover { opacity: 0.75; }
.app-version {
margin-left: 0.85rem;
/* `margin-right: auto` (`Nexus/index.html:79`) es lo que empuja `.header-right` al extremo
derecho: consume todo el espacio libre restante, dejando logo+version pegados a la
izquierda. Sin esto, `justify-content: space-between` de arriba repartiria ese espacio
entre los 3 hijos del header en vez de agruparlos en dos bloques. */
margin-right: auto;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
/* fase J: era el literal #8C8775, a 3.42:1 sobre el crema del header. Texto de 0.6rem en
MAYUSCULAS -- el umbral que le toca es 4.5:1, no el 3:1 de texto grande. */
color: var(--ink-muted);
background: rgba(145, 189, 228, 0.12);
border: 1px solid rgba(145, 189, 228, 0.35);
border-radius: 999px;
padding: 0.18rem 0.6rem;
white-space: nowrap;
}
.nexus-isologo-bg {
position: fixed;
left: -200px;
top: 30px;
width: 760px;
height: 760px;
opacity: 0.14;
pointer-events: none;
z-index: 0;
filter: saturate(0) brightness(0.85);
}
/* P.6 (sdd/staff-chrome-unification, 2026-08-28, decision del usuario). La pieza -- imagen,
posicion, tamaño -- sigue siendo la MISMA definicion compartida (§3.7): lo unico que cambia es
la opacidad, y solo en Plan. Su columna de contenido es mas estrecha que la de main/Costeo, asi
que el mismo 0.14 deja menos espacio "seguro" alrededor del texto y la marca de agua se percibe
mas expuesta ahi que en los otros dos.
El gancho es `[data-module="plan"]` en `plan/index.html`, NO una clase o prop nueva en
`BrandFrame.jsx`: ese componente no sabe -- ni tiene por que saber -- que modulo lo monta, y
`plan/src/app.jsx` es codigo en edicion activa que esta fase no toca. Un atributo en el HTML
estatico llega al mismo resultado sin rozar ese archivo. */
[data-module="plan"] .nexus-isologo-bg {
opacity: 0.08; /* mitad de 0.14, medido a ojo como primera correccion -- no una regla mecanica */
}
.brand-body {
flex: 1;
position: relative;
z-index: 1;
}
.brand-footer {
/* Mismo calculo de ancho que `.brand-header` (fase C-quater): si el pie no lo replicara, el
copyright quedaria alineado con el borde de la ventana y el logo con la columna de 1440 --
desalineados entre si en pantallas anchas. El alto del pie NO se toca: no tiene pildora que lo
empuje, y 1.25rem ahi no es lo que se reporto como grueso. */
padding-block: 1.25rem;
padding-inline: max(1.5rem, calc((100% - var(--chrome-max)) / 2));
display: flex;
align-items: center;
justify-content: space-between;
background: var(--soft-cream);
border-top: 1px solid var(--warm-tan-soft);
font-size: 0.72rem;
/* fase J: `--muted` daba 2.38:1 sobre `--soft-cream`. `--muted` sigue siendo correcto para
bordes y separadores; como TEXTO va su variante de tinta. */
color: var(--ink-muted);
letter-spacing: 0.06em;
position: relative;
z-index: 1;
}
.brand-footer .footer-left strong { color: var(--deep-navy); font-weight: 600; }
.footer-right { display: flex; align-items: center; gap: 0.6rem; }
/* Version en el PIE (sdd/staff-chrome-unification fase C-quinquies, 2026-08-27, pedido del
usuario). Antes vivia como chip `position: fixed` abajo-derecha (`#nx-ver-badge` de
`nexus_api.js`) y se solapaba con el FAB de la campana del Centro de Acciones, que ocupa esa
misma esquina. En el pie no puede solaparse con nada: participa del flujo. Mismo tono que el
copyright vecino -- es un dato de diagnostico, no algo que deba competir por atencion. */
.footer-version { font-variant-numeric: tabular-nums; opacity: 0.75; }
/* 768px es uno de los OCHO breakpoints reales del legacy (`patients-dashboard-parity` PR D,
`03-design.md` D5) -- no se unifica con 760/720/640 aunque esten cerca en valor: cada uno
colapsa una pieza distinta y sin relacion entre si. Verificado por lectura directa de
`Nexus/index.html:111-121`. Aqui solo las reglas del MARCO; las de `.header-right` siguen
en `main/src/styles.css` con el resto de las ranuras. */
@media (max-width: 768px) {
/* Espejo de `Nexus/index.html:113-116`: cabecera condensada para que no se desborde.
Solo `padding-inline` (fase C-quater): el shorthand `padding` de antes pisaba el
`padding-block: 0.55rem` de la regla base y dejaba la cabecera MAS gruesa en movil (0.7rem)
que en escritorio (0.55rem) -- al reves de lo que busca este breakpoint. El
`padding-inline` base ya cae a su minimo de 1.5rem en pantallas angostas; aqui se aprieta un
poco mas. */
.brand-header { padding-inline: 0.9rem; }
.app-version { font-size: 0.5rem; padding: 0.12rem 0.4rem; margin-left: 0.4rem; letter-spacing: 0.05em; }
}
/* ─── Cabecera derecha del chrome: icono admin + pildora de usuario ─────────
Movido desde `main/src/styles.css` (fase C-bis, 2026-08-27): dejaron de ser "contenido de
main" para ser parte del marco que Costeo y Plan tambien necesitan -- el usuario pidio
explicitamente que su pildora de usuario fuera la MISMA que la de `main`, no una reinvencion
local (`CosteoHeaderRight.jsx` la reusa tal cual). Sin cambios de valores frente al original.
`.avatar-status-dot*` tambien lo usa `PresenceBubble.jsx` (`main/src/components/`) sobre los
avatares de "activos" -- un solo par de clases, dos puntos de montaje, ya documentado asi antes
de este traslado. */
.avatar-status-dot {
position: absolute;
left: -1px;
bottom: -1px;
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 0 0 2px #F4EFE6;
}
.avatar-status-dot-active { background: #1D9E75; }
.avatar-status-dot-idle { background: #D9A32E; }
/* `.user-pill` (avatar propio) tiene fondo blanco, no el crema de `.presencia` -- el filete del
punto debe coincidir con lo que hay detras, o se ve como un borde flotante desalineado. */
.user-avatar-wrap .avatar-status-dot { box-shadow: 0 0 0 2px #fff; }
.header-right { display: flex; align-items: center; gap: 1rem; }
.header-icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: transparent;
border: none;
color: var(--deep-navy);
cursor: pointer;
transition: background 0.15s var(--ease);
}
.header-icon-btn:hover { background: var(--tan-wash); }
.header-badge {
position: absolute;
top: -2px;
right: -2px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
border-radius: 9px;
background: #dc2626;
color: #fff;
font-size: 0.62rem;
font-weight: 700;
padding: 0 5px;
line-height: 1;
}
.header-admin-menu { position: relative; }
.header-admin-menu-backdrop {
position: fixed;
inset: 0;
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: default;
z-index: 1000;
}
.header-admin-menu-panel {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 235px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 14px 44px rgba(26, 35, 50, 0.2);
padding: 0.35rem;
z-index: 1001;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.header-admin-menu-title {
padding: 0.45rem 0.95rem 0.5rem;
font-size: 0.62rem;
/* fase J: #aaa sobre el blanco del panel daba 2.32:1, el peor par de todo el chrome. */
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.header-admin-menu-panel button {
display: flex;
align-items: center;
gap: 0.65rem;
text-align: left;
padding: 0.55rem 0.8rem;
border: none;
background: none;
cursor: pointer;
font-family: 'Libre Franklin', sans-serif;
font-size: 0.82rem;
color: var(--deep-navy);
border-radius: 7px;
}
.header-admin-menu-panel button:hover { background: var(--warm-cream); font-weight: 600; }
.header-admin-menu-danger { color: #B33 !important; }
.header-admin-menu-divider { height: 1px; background: #eee; margin: 0.3rem 0.4rem; }
.user-pill {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 1rem 0.4rem 0.4rem;
background: #fff;
border: 1px solid var(--warm-tan);
border-radius: 999px;
font-family: inherit;
font-size: 0.85rem;
color: var(--deep-navy);
transition: border-color 0.15s var(--ease);
}
.user-pill:hover { border-color: var(--warm-tan-dark); }
.user-pill-main {
display: flex;
align-items: center;
gap: 0.6rem;
background: none;
border: none;
padding: 0;
font-family: inherit;
color: inherit;
cursor: pointer;
}
.user-avatar-wrap { position: relative; display: inline-flex; }
.user-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--brand-blue);
color: var(--deep-navy);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.78rem;
flex-shrink: 0;
overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-pill-name { font-size: 0.85rem; color: var(--deep-navy); font-weight: 500; }
.user-pill-role {
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
/* fase J: `--brand-blue` sobre el blanco de la pildora daba 1.98:1 -- practicamente ilegible
para el ojo que no lo busca. `--brand-blue-ink` es el MISMO matiz con la luminosidad bajada
hasta cruzar 4.5:1, asi que la pildora sigue leyendose azul de marca y no gris. */
color: var(--brand-blue-ink);
font-weight: 600;
padding-left: 0.45rem;
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.user-pill-sep { color: var(--ink-muted); font-size: 0.7rem; }
.user-pill-logout {
font-size: 0.75rem;
/* fase J: mismo 2.38:1 que el pie. Es el control de CERRAR SESION: que se lea no es opcional. */
color: var(--ink-muted);
background: none;
border: none;
/* fase J: era `padding: 0`, y medido en navegador el area pulsable quedaba en 75x15 px -- por
debajo del minimo de 24x24 que pide WCAG 2.2 en 2.5.8 (AA). Es el control que CIERRA LA SESION
en los tres modulos de staff: fallar el clic aqui es fallar en el peor sitio.
`padding-block` y no `height`: la pildora que lo contiene alinea al centro, asi que crecer el
area no mueve el texto ni cambia el alto de la pildora (42px, con margen sobrado). */
padding: 0.3rem 0;
font-family: inherit;
cursor: pointer;
transition: color 150ms var(--ease);
}
.user-pill-logout:hover { color: var(--coral); text-decoration: underline; }
/* Bug real (2026-08-27, reportado por el usuario, verificado con CDP): entre 769px y ~830px la
pildora completa ya no colapsa a solo avatar (eso pasa debajo de 768px) pero tampoco tiene
ancho para su contenido en una sola linea. Breakpoint propio, no fusionado con el de 768px. */
@media (max-width: 850px) {
.user-pill-name,
.user-pill-role,
.user-pill-sep,
.user-pill-logout { display: none; }
.user-pill { padding: 0.3rem; gap: 0; }
}
@media (max-width: 768px) {
.header-right { gap: 0.45rem; }
}
/* ─── Foco visible del chrome (sdd/staff-chrome-unification, fase J, 2026-08-27) ─────────────
Antes de esta fase, este archivo tenia CERO reglas de foco. Consecuencia medible: quien navega
con teclado (o con un lector de pantalla que sigue al foco) recorria el logo, la campana, el
menu de Administracion, la pildora de usuario y "Salir" sin ninguna senal de donde estaba. No
es un detalle de estilo: es el unico indicador de posicion que tiene esa persona.
`:focus-visible` y no `:focus`: el segundo tambien dispara con el raton, y entonces cada clic
deja un anillo pegado -- el motivo historico por el que tanta gente hacia `outline: none` y
rompia la accesibilidad de paso. `:focus-visible` lo pinta solo cuando el navegador juzga que
la interaccion fue por teclado.
Una sola regla agrupada en vez de una por componente: si manana se agrega un control al marco,
hereda el foco por defecto en lugar de nacer sin el. */
.logo-mark-btn:focus-visible,
.header-icon-btn:focus-visible,
.header-admin-menu-panel button:focus-visible,
.user-pill-main:focus-visible,
.user-pill-logout:focus-visible {
outline: 2px solid var(--focus-ring-color);
outline-offset: 2px;
border-radius: 6px;
}
/* La pildora y el boton del logo ya son redondos; el anillo debe seguir su forma, no cuadrarla. */
.logo-mark-btn:focus-visible,
.header-icon-btn:focus-visible,
.user-pill-main:focus-visible { border-radius: 999px; }
/* ─── Movimiento reducido (fase J) ───────────────────────────────────────────────────────────
Las transiciones de este archivo son cortas (150ms) y de color u opacidad, nunca de layout, asi
que no provocan mareo por si solas. Se respetan igualmente: `prefers-reduced-motion` es una
preferencia declarada del sistema operativo de esa persona, y el criterio no es "cuanto molesta
a la mayoria". El foco NO se toca -- es informacion, no decoracion. */
@media (prefers-reduced-motion: reduce) {
.logo-mark-btn,
.header-icon-btn,
.user-pill,
.user-pill-logout { transition: none; }
}
/* ─── Aviso de sesión suplantada ───────────────────────────────────────────────────────────────
S8.1 de PENDIENTES-SEGURIDAD (sdd/login-timing-and-impersonation-banner, 2026-08-28). Su
componente es `shared/ui/ImpersonationBanner.jsx`; vive aquí, y no en la hoja de `main`, por
§3.7: es identidad del chrome, y los tres módulos de staff ya enlazan este archivo. Costeo y
Plan quedan a un cableado de distancia, sin tocar CSS.
COLOR: navy, no rojo (03-design.md D4). El sistema ya tiene un rojo de peligro (#A33) y un
coral reservado a lo irreversible; una sesión de soporte no es ninguna de las dos cosas, es un
CONTEXTO permanente. Blanco sobre `--deep-navy` mide 10.98:1 -- el mismo par ya medido y fijado
para el botón primario del canon (`controls.css`). En una aplicación de superficie crema, una
banda oscura fija arriba no se puede confundir con contenido.
Va ANTES de `.top-line`, en la primera posición del marco: si estuviera debajo del header, se
perdería al hacer scroll en las vistas largas. */
.impersonation-bar {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.55rem 1rem;
background: var(--deep-navy);
color: #fff;
font-size: 13px;
line-height: 1.35;
text-align: center;
flex-shrink: 0;
}
.impersonation-bar-text { font-weight: 500; }
/* Sobre navy no valen las variantes de `.nx-btn`, calibradas todas contra superficies claras.
Borde y relleno translúcidos del propio blanco: el contraste del texto sigue siendo el de la
banda (10.98:1) y el control se lee como parte de ella, no como un parche pegado encima.
El radio sí sale del canon -- no se inventa geometría nueva. */
.impersonation-bar-exit {
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--nx-btn-radius);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font: inherit;
padding: 0.25rem 0.7rem;
cursor: pointer;
transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.impersonation-bar-exit:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
/* Respuesta a la pulsación: la acción va al servidor, y sin acuse la persona vuelve a pulsar. */
.impersonation-bar-exit:active:not(:disabled) { transform: scale(0.97); }
.impersonation-bar-exit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.impersonation-bar-exit:disabled { opacity: 0.6; cursor: default; }
/* Entrada: aparece UNA vez por sesión y se queda, así que el movimiento es corto y solo sobre
`transform`/`opacity`. Nada que se repita en cada render. */
@keyframes impersonation-bar-in {
from { opacity: 0; transform: translateY(-100%); }
to { opacity: 1; transform: translateY(0); }
}
.impersonation-bar { animation: impersonation-bar-in 200ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
.impersonation-bar { animation: none; }
.impersonation-bar-exit { transition: none; }
}