`. En el dashboard PHP es un div, así que el menú de la cuenta —donde vive CERRAR SESIÓN— no se alcanza con Tab ni responde a Enter: con teclado no hay forma de salir. El front nuevo lo emite como button, y sin este reset el navegador le pone su borde, su fondo y su `color: buttontext`, y su `font` propio le gana al `font-size: 12px` de la clase. Va en el DS y no en el front por lo mismo que `.lightbox__close`: el control debería ser un button en los dos mundos, y el día que PHP lo cambie no habrá que volver a escribir esto. */ button.header_account_data { appearance: none; padding: 0; border: 0; background: none; color: inherit; font-family: inherit; /* OJO con lo que NO se resetea aquí, que me costó una medición: `font-size` y `font-weight` se dejan en paz A PROPÓSITO. Este selector es más específico (0,1,1) que `.header_account_data` (0,1,0), así que un `font-size: inherit` le GANA al `font-size: 12px` de la clase y el nombre sale a 16px. Los estilos del navegador, en cambio, pierden contra cualquier regla de autor: no hay que anularlos, solo no taparlos. `line-height` y `font-weight` sí se heredan a mano: un `button` no hereda ninguna de las dos del ancestro (sus valores de UA son `normal` y `400`), y ahí se iban la altura del bloque y el peso del rol. `font-weight` es seguro porque la clase no lo declara — el 500 del nombre vive en `.user_name`, que es el span de dentro y conserva el suyo. */ line-height: inherit; font-weight: inherit; text-align: inherit; cursor: pointer; } /* ---- Cabecera de la PÁGINA (distinta de la del dashboard) ------------------- `#dashboard_header` (arriba) es la barra fija de la aplicación: migas, usuario, notificaciones. `.page_header` es el título de la pantalla que va debajo. El subtítulo ya vivía aquí desde F2e; el resto llegó de main.css el 2026-07-26, así que el componente estaba partido en dos archivos. Lo forzó el front nuevo: pinta el mismo título y no carga main.css, así que su `h1` salía con el tamaño y el peso por defecto del navegador — 32px/700 contra 20px/500 del producto. */ .page_header { margin-bottom: 15px; padding: 15px 0; } .page_header h1 { font-size: 20px; text-transform: uppercase; font-weight: 500; } .page_header_actions { gap: 7px; } .page_header_subtitle{ font-size: 14px; } /* ---- Breadcrumb ------------------------------------------------------------ */ .breadcrumb { font-size: 12px; text-transform: uppercase; color: var(--text-muted); gap: 20px; } .breadcrumb > * { position: relative; } /* El separador es un glifo de uicons puesto a mano, no un . Ver nota 1. */ .breadcrumb > *:not(:last-child)::after { content: "\e0a3"; font-family: uicons-regular-rounded; position: absolute; top: 0; right: -17px; font-size: 14px; opacity: 0.5; } /* ---- Título ---------------------------------------------------------------- */ .dashboard_header_title { display: flex; height: 30px; padding: 0 15px; justify-content: center; align-items: center; border-radius: 3px; background: var(--neutral-500, #3E4349); color: var(--neutral-white, #FFF); font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: 0.5px; text-transform: uppercase; } .dashboard_header_title:empty { display: none; } /* ---- Acciones -------------------------------------------------------------- */ /* Cada acción del header es un SLOT de 40x40 que centra lo que lleve dentro (la campana mide 18). Por eso su burbuja apunta al centro del slot y no al del trigger: aquí el wrapper NO abraza a su trigger. Ver ds/bubble.css nota 1. */ #dashboard_header_actions > * .bubble { --bubble-beak-center: calc(var(--control-md) / 2); } #dashboard_header_actions > * { width: var(--control-md); height: var(--control-md); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-primary); } #dashboard_header_actions { position: relative; } /* El divisor entre las acciones y la cuenta. */ #dashboard_header_actions::before { content: ''; position: absolute; top: 50%; right: -1px; width: 1px; height: 30px; transform: translateY(-50%); background: var(--border-default); } #dashboard_header_actions_wrapper { gap: 15px; } /* ---- Campana --------------------------------------------------------------- */ /* Vinieron de main.css (2026-07-27), tal cual. Estaban en el CSS legacy, que el front nuevo NO importa a propósito, así que la campana salía sin estilo en React: el icono caía al tamaño heredado y el badge se iba al flujo normal en vez de montarse sobre la campana. Misma causa raíz que ya movió `.page_header` y los campos a pelo. La CAJA de notificaciones se queda en main.css: su contenido lo pinta notifications.js, que es JS del dashboard PHP. */ #header_notifications { position: relative; margin-right: 6px; } #header_notifications .notifications_bell { position: relative; display: inline-flex; align-items: center; cursor: pointer; } #header_notifications .notifications_bell i { font-size: 18px; } /* Píldora de conteo sobre la campana; oculta cuando no hay no leídas ([hidden]). */ #header_notifications .notifications_badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; /* Consume el contrato de tono (F5): fill 500 por defecto, 600 en alto contraste. La clase `tone-error` va en el markup. */ color: var(--tone-fg); background: var(--tone-fill); border-radius: 999px; border: 2px solid #FFF; } #header_notifications .notifications_badge[hidden] { display: none; } /* ---- Cuenta ---------------------------------------------------------------- */ #header_account { gap: 10px; } .header_account_data { font-size: 12px; } .header_account_data .user_name { text-transform: uppercase; font-weight: 500; /* Aquí había un `font-size: var(--neutral-500)` — un COLOR en font-size. Ver nota 3. */ } .header_account_data .user_role { color: var(--text-muted); font-size: 11px; } .header_account_image { width: var(--control-md); } /* 50% y NO `--radius-round` (999px): el token del DS es una PÍLDORA. En el placeholder de abajo, que es cuadrado, los dos dan el mismo círculo — pero esta imagen manda `height:auto`, así que si el avatar no viene cuadrado el 999px daría un estadio y el 50% da la elipse que se espera. Ver nota 4. */ .header_account_image img { border-radius: 50%; height: auto; float: left; } .user_avatar_placeholder { width: var(--control-md); height: var(--control-md); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-on-color); background: var(--neutral-500); border-radius: 50%; /* el mismo 50% que su hermana de arriba, por coherencia */ } /* ---- Móvil ----------------------------------------------------------------- */ /* En móvil el header se despega y flota junto a la barra. Los 65 y los 80 eran números a mano; son el riel más el respiro de la página (15) a cada lado. */ @media (max-width: 768px) { #dashboard_header { position: fixed; top: 15px; left: calc(var(--sidebar-rail) + 15px); width: calc(100% - var(--sidebar-rail) - 30px); z-index: 99; } /* `float_active` lo pone main.js al hacer scroll. La sombra se queda LITERAL a propósito: `--shadow-md` del DS es direccional (0 2px 4px + 0 8px 24px) y ésta es un resplandor simétrico (0 0 15px). Cambiarla sería rediseñar por la puerta de atrás, y esta fase no rediseña. Converger las sombras es F3. */ .float_active #dashboard_header { box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } .header_account_data { display: none; } } /* ============================================================================ NOTAS 1. EL SEPARADOR DEL BREADCRUMB ES UN GLIFO ESCRITO A MANO: `content:"\f155"` con `font-family: uicons-regular-rounded`, en vez de una clase `fi fi-rr-…`. Funciona, pero es la única pieza del producto que referencia un codepoint crudo de la fuente: si uicons renumera, esto se convierte en un cuadrito y nadie sabrá por qué. Se conserva —cambiarlo pide tocar el markup y esta fase no toca markup— y queda anotado para F3. 2. `font-weight: 600` y el tema solo carga 300/400/500/700 (header.php). El navegador lo resuelve a 700. Es uno de los tres sitios con el mismo caso y espera decisión del dueño (plan §3.b): ¿500 o 700? Se deja el 600 tal cual para no cambiar el aspecto por la puerta de atrás. 3. UN COLOR EN `font-size`. `.user_name` traía `font-size: var(--neutral-500)`, o sea `font-size: #3E4349`: inválido, así que el navegador tira la declaración y el tamaño cae al 12 heredado de `.header_account_data`. Alguien quiso escribir `color`. Lo bonito es que el arreglo NO cambia nada: `--neutral-500` es exactamente el color que `.user_name` ya heredaba del body (`--text-primary`). O sea que la línea llevaba años sin hacer nada y su versión correcta tampoco haría nada. Por eso se borra en vez de "arreglarse": la única forma de que un typo así se note es que alguien lo lea. 4. DOS TOKENS QUE PARECÍAN CALZAR Y NO CALZAN. Al tokenizar esta fase se probaron y se descartaron dos, porque habrían sido rediseño disfrazado: · `--radius-round` (999px) NO es "círculo", es PÍLDORA. En un cuadrado dan lo mismo; en `.header_account_image img`, que lleva `height:auto`, un avatar no cuadrado saldría estadio en vez de elipse. Se queda el 50%. · `--shadow-md` es direccional; la del header flotante es un resplandor simétrico. No son la misma sombra. Se queda literal → converger en F3. Los que SÍ calzan, verificados uno por uno: `--surface-page` (#FFF), `--text-on-color` (#FFF), `--border-default` (neutral/200), `--text-muted` (neutral/300) y `--radius-md` (5px) — todos idénticos al valor que había. La regla que deja esto: un token con nombre parecido no es un token equivalente. Se compara el VALOR antes de sustituir, no el nombre. ============================================================================ */