/* ─────────────────────────────────────────────────────────────────────────
   Puente del theme por dominio ↔ CSS legacy de Superio.

   El resto del sitio (utilidades tw-*, componentes nuevos con Tailwind)
   ya consume `var(--primary)` / `var(--navy)`. El theme Superio, en cambio,
   tiene los colores de marca HARDCODEADOS en `/module/superio/css/*` — así
   que cuando `app/layout.tsx` inyecta un override de `--primary`/`--navy`
   por dominio, esas hojas no se enteran.

   Este archivo redirige los selectores más visibles del theme legacy
   (botones CTA del hero, header fijo, chips y acentos) a las CSS vars.
   No cambia colores por sí solo: si nadie inyecta un override, todo sigue
   viéndose exactamente igual (los defaults de `tailwind.css` ≈ los HEX que
   pisamos acá). Con override, la marca completa cambia sin tocar nada más.

   Se carga LAST en `CORE_CSS` (después de `styleup.css`, `style.css`, etc.)
   para ganar la cascada por orden, no por especificidad — mantener el
   selector idéntico al del theme original evita que un `!important` suelto
   lo pise silenciosamente.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Botones CTA (color primary de la marca) ──────────────────────────── */
/* `!important` porque `style.css:1701` declara `#30a5bf !important` — sin esto
   el override del dominio no llega al botón. No usamos capas / :where(): el
   theme legacy no lo soporta y agregar `!important` es la ruta más corta al
   mismo resultado. */
.btn-style-one,
.btn-style-three:hover {
    background-color: hsl(var(--primary)) !important;
}
.btn-style-one:hover,
.btn-style-cv {
    background-color: hsl(var(--navy)) !important;
}
.btn-style-two {
    color: hsl(var(--primary));
    border-color: hsl(var(--primary));
}
.btn-style-two:hover {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* ─── `btn-style-tbo3`: botón outline navy, con MUCHO tráfico ──────────────
   Base = navy sólido, hover = negativo (blanco con borde navy). En el header
   fijo/scrolleado se invierte a fondo navy con borde blanco, y el hover
   pasa a primary. Ver `.btn-style-tbo3` en style.css:2064 y :3269. */
.btn-style-tbo3 {
    background-color: hsl(var(--navy));
    border-color: hsl(var(--navy));
}
.btn-style-tbo3:hover {
    color: hsl(var(--navy));
    border-color: hsl(var(--navy));
}
.main-header.fixed-header .main-box .outer-box .btn-box .btn-style-tbo3 {
    background-color: hsl(var(--navy));
}
.main-header.fixed-header .main-box .outer-box .btn-box .btn-style-tbo3:hover {
    background-color: hsl(var(--primary));
}

/* ─── Textos con acento del hero ("...con `.colored`") ─────────────────── */
.banner-section-three .content-column h3 .colored,
.banner-section-two .content-column h3 .colored {
    color: hsl(var(--primary));
}

/* ─── Menú principal: item activo ──────────────────────────────────────── */
.main-menu .navigation > li.current > a,
.main-menu .navigation > li:hover > a {
    color: hsl(var(--primary));
}

/* ─── Header fijo (scroll): fondo navy de la marca ─────────────────────── */
.main-header.fixed-header {
    background-color: hsl(var(--navy));
}

/* ─── Tabs / links secundarios ─────────────────────────────────────────── */
.default-tabs.style-two .tab-buttons li.active-btn,
.candidate-link:hover a,
.color-change:hover,
.nav-plantilla.active {
    color: hsl(var(--primary));
}
.nav-plantilla.active {
    border-bottom-color: hsl(var(--primary));
}

/* ─── Form controls (radios / checkboxes / focus) ──────────────────────── */
.checkboxes input[type="checkbox"]:checked + label:before,
.radio-box input[type="radio"]:checked + label:before,
.radio-box input[type="radio"]:checked + label:after,
input:checked + .slider {
    background-color: hsl(var(--primary));
}
.default-form .form-group select:focus,
.default-form .form-group input[type="text"]:focus,
.default-form .form-group textarea:focus {
    border-color: hsl(var(--primary));
}

/* ─── Scroll-to-top / floating actions ─────────────────────────────────── */
.scroll-to-top:hover {
    background-color: hsl(var(--primary));
}

/* ─── Select2 / dropdowns del legacy ───────────────────────────────────── */
.select2-container--default .select2-results__option[aria-selected="true"] {
    color: hsl(var(--primary));
}

/* ─── Footer link hovers ───────────────────────────────────────────────────
   El theme original usa una paleta distinta por cada `.main-footer.style-*`
   (`#BC91E8`, `#F9AB00`, `#ffffff`, etc. — restos del template Superio
   pensado como multi-marca). Los unificamos a `var(--primary)` para que el
   footer también siga la paleta del dominio activo. Si algún dominio
   necesita conservar un accent propio en el social hover, la escotilla es
   sobrescribir con un selector aún más específico DESPUÉS de este archivo. */
.main-footer .list li:hover a,
.main-footer .list li:hover:before {
    color: hsl(var(--primary));
    border-color: hsl(var(--primary));
}
.main-footer .copyright-text a:hover,
.main-footer .social-links a:hover,
.main-footer.style-two .social-links a:hover,
.main-footer.style-three .social-links a:hover,
.main-footer.style-four .social-links a:hover,
.main-footer.style-six .social-links a:hover {
    color: hsl(var(--primary));
}