/* ============================================================ HUF — Base (reset + tipografía base + keyframes compartidos) ------------------------------------------------------------ Las reglas que tocan elementos globales (body, *, :focus-visible) se escopan bajo el selector [data-hd-theme] para que este archivo no tenga NINGÚN efecto hasta que una página adopte HUF explícitamente (agregando data-hd-theme="..." a su , ver plan §7.1). Ninguna página lo hace todavía — HUF hoy es infraestructura en espera. Las clases de componente (.hd-btn, .hd-panel-card, etc.) no necesitan este scoping porque sus nombres ya son únicos y no colisionan con admin-portal.css. ============================================================ */ [data-hd-theme] { box-sizing: border-box; /* El halo del botón primario se deriva del acento del tema activo. En tokens.css --hd-glow-accent está escrito con el turquesa de Neo Industrial literal, y como ese archivo define sus variables en :root (html) mientras el tema las define en el , un var() puesto allá no vería --hd-theme-accent-rgb: hay que redefinirlo AQUÍ, en el mismo elemento que lleva el tema. Sin esto, el botón primario de las tres superficies públicas (portal-cliente verde, portal-salon rosa, menu-qr ámbar) sale con un halo turquesa que no es de su marca — detectado en la migración del Portal Salón, es de HUF y no de esa pantalla. El respaldo mantiene el valor histórico para los dos archivos de acento que todavía no declaran su --hd-theme-accent-rgb (bar, intel). */ --hd-glow-accent: 0 6px 18px rgba(var(--hd-theme-accent-rgb, 0, 194, 168), .28); } [data-hd-theme] *, [data-hd-theme] *::before, [data-hd-theme] *::after { box-sizing: inherit; } body[data-hd-theme] { font-family: var(--hd-theme-font, var(--hd-font-sans)); font-size: var(--hd-text-base); line-height: 1.5; color: var(--hd-theme-text); background: var(--hd-theme-bg); -webkit-font-smoothing: antialiased; min-height: 100vh; } body[data-hd-theme] :focus-visible { outline: var(--hd-focus-ring); outline-offset: var(--hd-focus-offset); } h1[data-hd-theme], h2[data-hd-theme], h3[data-hd-theme], [data-hd-theme] h1, [data-hd-theme] h2, [data-hd-theme] h3 { font-family: var(--hd-font-heading); } /* ── Keyframes compartidos ───────────────────────────────────── Primitiva única de entrada/salida de HVL §5.6: opacidad 0↔1 + desplazamiento de 8px en el eje de origen. Toast, modal y cualquier panel flotante nuevo reutilizan esta, nunca declaran su propio @keyframes de entrada. Prohibido el zoom fuera de 0.98–1.02 (§5.6) — por eso no existe un "scale-in" aquí. */ @keyframes hd-fade-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes hd-fade-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* Única de las dos animaciones infinitas permitidas por HVL §5.6 (la otra es el pulso del skeleton, css/huf/components/skeleton.css) — spinner del botón en estado loading. */ @keyframes hd-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Accesibilidad de movimiento ─────────────────────────────── Misma regla global que ya existe en admin-portal.css (plan §1.6, §9.1) — se mantiene sin excepciones para todo el árbol de HUF. */ @media (prefers-reduced-motion: reduce) { body[data-hd-theme], body[data-hd-theme] *, body[data-hd-theme] *::before, body[data-hd-theme] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }