/* Importa variables y componentes UI */ @import url('variables.css'); /* =========================== HEADER (self-contained) — SolucionPH — Dependencias mínimas: tokens + utilidades =========================== */ /* ===== Utilidades mínimas que usa el header ===== */ .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-600); text-decoration: underline; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; background: #000; color: #fff; padding: .5rem; border-radius: 8px; } /* =========================== HEADER — layout en 3 slots =========================== */ .site-header { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 999; overflow: visible; /* Permitir que el menú desplegable se muestre */ } .header__wrap{ position: relative; /* referencia p/ botón móvil */ display: flex; align-items: center; justify-content: space-between; height: 72px; gap: .5rem; overflow: visible; /* Permitir que el botón hamburguesa se vea */ } /* Slots rojo/verde/azul */ .header__slot{ display: flex; align-items: center; } .header__slot--left { flex: 0 0 auto; } /* logo */ .header__slot--center{ flex: 1 1 auto; min-width: 0; justify-content: center; overflow: hidden; /* Prevenir que el nav se desborde */ } /* nav centrado */ .header__slot--right { flex: 0 0 auto; } /* switch + idioma */ /* Marca/Logo */ .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--text); } .brand .accent { color: var(--brand); } /* Logo alterno por tema */ .logo{ inline-size: 36px; block-size: 36px; display: inline-block; } /* Default light */ .logo--light{ display: inline-block; } .logo--dark { display: none; } /* Dark por data-theme en */ :root[data-theme="dark"] .logo--light{ display: none; } :root[data-theme="dark"] .logo--dark { display: inline-block; } /* =========================== Navegación principal — centrada en desktop, colapsable en móvil =========================== */ .site-nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; } .site-nav a { padding: .5rem .75rem; border-radius: 8px; } .site-nav a.active, .site-nav a:hover { background: var(--bg-alt); text-decoration: none; } /* Botón hamburguesa (oculto en desktop) */ .nav-toggle { display: none; border: 1px solid var(--border); background: transparent; border-radius: 8px; padding: .4rem .5rem; } .nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--text); box-shadow: 0 6px 0 var(--text), 0 -6px 0 var(--text); } /* Móvil: reorden y dropdown */ @media (max-width: 900px) { .nav-toggle { display: inline-flex !important; position: absolute !important; left: 0.75rem !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 1000 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; background: var(--bg-alt) !important; } /* reorden slots: logo centrado */ .header__slot--center { order: 1; flex: 0 0 auto; position: relative; width: auto; min-width: 0; overflow: visible; } .header__slot--left { order: 2; flex: 1 1 auto; justify-content: center; min-width: 0; padding-left: 3rem; /* Espacio para el botón hamburguesa */ } .header__slot--right { order: 3; flex: 0 0 auto; } /* Asegurar que solo se vea el botón hamburguesa, no los enlaces */ .header__slot--center > .site-nav { position: fixed !important; } /* Posiciona la hamburguesa a la altura del logo */ .nav-toggle { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); z-index: 25; } /* menú desplegable bajo el header - completamente oculto cuando está cerrado */ .site-nav { position: fixed; top: 72px; left: 0; right: 0; width: 100%; background: var(--bg); border-bottom: 1px solid var(--border); display: none !important; z-index: 100; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* cuando tu JS ponga aria-expanded="true" en