/* ═══ layout.css ═══ Cabecera fija, wrappers de página, layout estructural. Depende de: tokens.css, base.css. ═══════════════════════════════════════════════════════════════ */ /* ─── Header ─── */ .header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(254,250,246,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; padding: 0 20px; } .header-inner { width: 100%; max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .header-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--c-text); text-decoration: none; letter-spacing: -0.01em; } .header-logo svg { width: 28px; height: 28px; } .header-right { display: flex; align-items: center; gap: 12px; } /* El avatar es ahora el área clicable que agrupa el círculo con la inicial (.header-avatar-badge) y el chevron indicador de menú. Un solo target. */ .header-avatar { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; text-decoration: none; } /* El círculo con la inicial: conserva el aspecto que tenía antes el avatar. */ .header-avatar-badge { width: 34px; height: 34px; border-radius: 50%; background: var(--c-primary-light); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; transition: box-shadow 0.2s, transform 0.2s; } .header-avatar:hover .header-avatar-badge { box-shadow: 0 0 0 2px var(--c-primary-light), 0 0 0 4px var(--c-primary); transform: scale(1.05); } /* Chevron: pequeño, apagado, apunta abajo (⌄) cerrado. Al abrir el menú, app.js pone .is-open en el avatar y el chevron rota 180° a ⌃ con una transición corta. Vuelve a ⌄ al cerrar por cualquier vía. */ .header-avatar-chevron { flex: 0 0 auto; color: var(--c-text-light); transition: transform 0.15s ease; } .header-avatar.is-open .header-avatar-chevron { transform: rotate(180deg); } .header-avatar:hover .header-avatar-chevron { color: var(--c-primary); } /* ─── Pie pegajoso (sticky footer) ─── El de la app es el contenedor principal (header, vistas y el