/*
 * app.css — WebAutofocus Custom Styles
 *
 * Los colores --color-primary y --color-secondary son inyectados en :root
 * por layout.twig (valores de .env / Config.php) y pueden ser sobreescritos
 * en runtime por Vue cuando carga los datos de sucursales.json.
 *
 * Tailwind CDN maneja el resto del sistema de diseño (espaciado, tipografía,
 * responsive, etc.). Aquí SOLO se definen las utilidades de color personalizado
 * que Tailwind no puede generar correctamente con CSS vars en el CDN.
 */

/*
 * NOTA: --color-primary y --color-secondary NO se definen aquí.
 * Son inyectadas en :root por el <style> inline de layout.twig (valores de .env)
 * y luego sobreescritas en runtime por Vue al leer sucursales.json.
 *
 * Definirlas aquí provocaría que este archivo (cargado después del <style> inline)
 * pisara los valores de .env en la cascada CSS.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Background — Primary
   ───────────────────────────────────────────────────────────────────────────── */
.bg-primary {
  background-color: var(--color-primary);
}

/* bg-primary/10 — fondos de íconos en sección contacto */
.bg-primary\/10 {
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* bg-primary/20 — hover de íconos */
.bg-primary\/20 {
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* group-hover:bg-primary/20 — hover de íconos dentro de .group */
.group:hover .group-hover\:bg-primary\/20 {
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Text — Primary
   ───────────────────────────────────────────────────────────────────────────── */
.text-primary {
  color: var(--color-primary);
}

.hover\:text-primary:hover {
  color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Border — Primary
   ───────────────────────────────────────────────────────────────────────────── */
.hover\:border-primary:hover {
  border-color: var(--color-primary);
}

.focus\:border-primary:focus {
  border-color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ring — Primary
   Se usa junto con `ring-2` de Tailwind (que lee --tw-ring-color)
   ───────────────────────────────────────────────────────────────────────────── */
.ring-primary {
  --tw-ring-color: var(--color-primary);
}

/* focus:ring-primary/30 — anillo de foco en inputs */
.focus\:ring-primary\/30:focus {
  --tw-ring-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Background — Secondary
   ───────────────────────────────────────────────────────────────────────────── */
.bg-secondary {
  background-color: var(--color-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Text — Secondary
   ───────────────────────────────────────────────────────────────────────────── */
.text-secondary {
  color: var(--color-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Navbar — estado activo (inyectado por el script inline de layout.twig)
   ───────────────────────────────────────────────────────────────────────────── */
.nav-active {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-bottom-color: white !important;
}

/* Hero slideshow — transición suave entre imágenes */
.hero-slide-img {
  transition: opacity 1s ease-in-out;
}