/******************************************
   Kcompro — Sistema de temas/paletas de colores
   Variables CSS usadas por header.php y componentes globales.
   Cada tema se aplica colocando la clase "tema-{id}" en <html>.
******************************************/

/* === Variables base (fallback) === */
:root {
  --top-banner-bg: #ffde00;
  --top-banner-text: #333333;
  --nav-bg: #ffde00;
  --nav-text: #333333;
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-link-hover: #3483FA;
  --logo-accent: #3483FA;
  --accent: #3483FA;
  --accent-hover: #2563EB;
  --success: #00A650;
  --badge-bg: #3483FA;
  --input-focus-border: #D1D5DB;
  --category-link-hover: #3483FA;
  --category-bg-hover: #F9FAFB;
  --category-text: #333333;
}

/* === AMARILLO (actual, MercadoLibre-style) === */
html.tema-amarillo,
.tema-amarillo {
  --top-banner-bg: #ffde00;
  --top-banner-text: #333333;
  --nav-bg: #ffde00;
  --nav-text: #333333;
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-link-hover: #3483FA;
  --logo-accent: #3483FA;
  --accent: #3483FA;
  --accent-hover: #2563EB;
  --success: #00A650;
  --badge-bg: #3483FA;
  --input-focus-border: #D1D5DB;
  --category-link-hover: #3483FA;
  --category-bg-hover: #F9FAFB;
  --category-text: #333333;
}

/* === LUJO (negro + dorado) === */
html.tema-lujo,
.tema-lujo {
  --top-banner-bg: #111827;
  --top-banner-text: #D4AF37;
  --nav-bg: #111827;
  --nav-text: #FFFFFF;
  --nav-border: rgba(212, 175, 55, 0.25);
  --nav-link-hover: #D4AF37;
  --logo-accent: #D4AF37;
  --accent: #D4AF37;
  --accent-hover: #B8942E;
  --success: #10B981;
  --badge-bg: #D4AF37;
  --input-focus-border: #D4AF37;
  --category-link-hover: #D4AF37;
  --category-bg-hover: #1F2937;
  --category-text: #333333;
}

/* === E-COMMERCE AZUL (azul marino + azul cielo) === */
html.tema-ecommerce-azul,
.tema-ecommerce-azul {
  --top-banner-bg: #1E3A8A;
  --top-banner-text: #E0F2FE;
  --nav-bg: #1E3A8A;
  --nav-text: #FFFFFF;
  --nav-border: rgba(96, 165, 250, 0.35);
  --nav-link-hover: #60A5FA;
  --logo-accent: #60A5FA;
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --success: #10B981;
  --badge-bg: #60A5FA;
  --input-focus-border: #60A5FA;
  --category-link-hover: #2563EB;
  --category-bg-hover: #EFF6FF;
  --category-text: #333333;
}

/* === ROSA PASTEL === */
html.tema-rosa-pastel,
.tema-rosa-pastel {
  --top-banner-bg: #FBCFE8;
  --top-banner-text: #831843;
  --nav-bg: #FBCFE8;
  --nav-text: #831843;
  --nav-border: rgba(219, 39, 119, 0.15);
  --nav-link-hover: #DB2777;
  --logo-accent: #DB2777;
  --accent: #DB2777;
  --accent-hover: #BE185D;
  --success: #10B981;
  --badge-bg: #DB2777;
  --input-focus-border: #F9A8D4;
  --category-link-hover: #DB2777;
  --category-bg-hover: #FDF2F8;
  --category-text: #333333;
}

/* === VERDE NATURA === */
html.tema-verde-natura,
.tema-verde-natura {
  --top-banner-bg: #065F46;
  --top-banner-text: #ECFDF5;
  --nav-bg: #065F46;
  --nav-text: #FFFFFF;
  --nav-border: rgba(52, 211, 153, 0.25);
  --nav-link-hover: #34D399;
  --logo-accent: #34D399;
  --accent: #059669;
  --accent-hover: #047857;
  --success: #00A650;
  --badge-bg: #34D399;
  --input-focus-border: #34D399;
  --category-link-hover: #059669;
  --category-bg-hover: #ECFDF5;
  --category-text: #333333;
}

/* === NEGRO (negro puro + rojo) === */
html.tema-negro,
.tema-negro {
  --top-banner-bg: #000000;
  --top-banner-text: #FFFFFF;
  --nav-bg: #000000;
  --nav-text: #FFFFFF;
  --nav-border: rgba(255, 255, 255, 0.15);
  --nav-link-hover: #F87171;
  --logo-accent: #EF4444;
  --accent: #DC2626;
  --accent-hover: #B91C1C;
  --success: #22C55E;
  --badge-bg: #DC2626;
  --input-focus-border: #EF4444;
  --category-link-hover: #DC2626;
  --category-bg-hover: #FEE2E2;
  --category-text: #333333;
}