/* ==========================================================================
   VARIABLES GLOBALES Y TEMA
   ========================================================================== */

:root {
  /* Tipografía predeterminada */
  --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fuentes específicas de títulos y cuerpo, configurables desde Estilos Web */
  --font-titulos: var(--font-primary);
  --font-cuerpo: var(--font-primary);

  /* Paleta de colores corporativos predeterminados */
  --color-primary: #ec4899;
  /* Rosa / Pink-500 */
  --color-secondary: #f59e0b;
  /* Ámbar / Amber-500 */
  --color-accent: #8b5cf6;
  /* Violeta / Violet-500 */
  --color-link: #3b82f6;
  /* Azul / Blue-500 */
  --color-link-hover: #f59e0b;
  /* Ámbar / Amber-500 */

  /* Tamaños de fuente configurables desde Estilos Web */
  --size-h1: 36px;
  --size-h2: 24px;
  --size-body: 14px;
}

/* ==========================================================================
   ESTILOS BASE
   ========================================================================== */

body {
  font-family: var(--font-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   CLASES UTILITARIAS PARA INYECCIÓN DINÁMICA DE ESTILOS
   ========================================================================== */

/* Colores de Texto */
.text-brand-primary {
  color: var(--color-primary) !important;
}

.text-brand-secondary {
  color: var(--color-secondary) !important;
}

.text-brand-accent {
  color: var(--color-accent) !important;
}

/* Colores de Fondo */
.bg-brand-primary {
  background-color: var(--color-primary) !important;
}

.bg-brand-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-brand-accent {
  background-color: var(--color-accent) !important;
}

/* Bordes */
.border-brand-primary {
  border-color: var(--color-primary) !important;
}

.border-brand-secondary {
  border-color: var(--color-secondary) !important;
}

.border-brand-accent {
  border-color: var(--color-accent) !important;
}

/* Estados hover dinámicos para elementos interactivos (nav, botones, tabs) */
.hover\:text-brand-primary:hover {
  color: var(--color-primary) !important;
}

.hover\:bg-brand-accent:hover {
  background-color: var(--color-accent) !important;
}

/* Aplicación de Fuente Personalizada */
.font-custom {
  font-family: var(--font-primary) !important;
}

/* ==========================================================================
   ESTILOS DINÁMICOS DEL SITIO PÚBLICO (index.html)
   Scopeados con .sitio-publico para NO afectar el diseño de admin.html,
   ya que ambos archivos comparten este mismo style.css.
   ========================================================================== */

.sitio-publico {
  font-family: var(--font-cuerpo);
  font-size: var(--size-body);
}

.sitio-publico h1,
.sitio-publico h2,
.sitio-publico h3 {
  font-family: var(--font-titulos);
}

.sitio-publico h1 {
  font-size: var(--size-h1) !important;
}

.sitio-publico h2 {
  font-size: var(--size-h2) !important;
}

.sitio-publico a {
  color: var(--color-link);
  transition: color 0.2s ease;
}

.sitio-publico a:hover {
  color: var(--color-link-hover);
}

/* Puntos de contacto visibles del color de marca, sin editar cada clase de Tailwind */
.sitio-publico #hero-titulo {
  color: var(--color-primary);
}

.sitio-publico #hero-subtitulo {
  color: var(--color-accent);
}