/* CSS Dinámico Generado - Colores Personalizados */
:root {
    --primary-color: #3b82f6;
    --primary-rgb: 59, 130, 246;
    --primary-hover: #3575dd;
    --primary-light: #629bf7;
    --primary-dark: #2f68c4;

    --secondary-color: #1e40af;
    --secondary-rgb: 30, 64, 175;
    --secondary-hover: #1b399d;
    --secondary-light: #4b66bf;
    --secondary-dark: #18338c;

    --accent-color: #60a5fa;
    --accent-rgb: 96, 165, 250;
    --accent-hover: #5694e1;
    --accent-light: #7fb7fb;
    --accent-dark: #4c84c8;
}

/* === BOTONES PRIMARIOS ===
   Solo se aplica a las escalas 500/600 (primary). Las escalas 700/800/900
   quedan reservadas para el secundario y las 50/100/200/300 para backgrounds suaves. */
.btn-primary,
.bg-blue-500,
.bg-blue-600 {
    background-color: var(--primary-color) !important;
}

.btn-primary:hover,
.bg-blue-500:hover,
.bg-blue-600:hover,
.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: var(--primary-hover) !important;
}

/* === BOTONES SECUNDARIOS === */
.btn-secondary,
.bg-blue-700,
.bg-blue-800,
.bg-blue-900 {
    background-color: var(--secondary-color) !important;
}

.btn-secondary:hover,
.bg-blue-700:hover,
.bg-blue-800:hover,
.bg-blue-900:hover {
    background-color: var(--secondary-hover) !important;
}

/* === ENLACES Y TEXTOS === */
.text-blue-500,
.text-blue-600 {
    color: var(--primary-color) !important;
}

.text-blue-700,
.text-blue-800,
.text-blue-900 {
    color: var(--secondary-color) !important;
}

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

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

/* === BORDES === */
.border-blue-500,
.border-blue-600 {
    border-color: var(--primary-color) !important;
}

.border-blue-700,
.border-blue-800,
.border-blue-900 {
    border-color: var(--secondary-color) !important;
}

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

/* === FRONTEND ESPECÍFICO === */
/* Navegación principal */
header nav a:hover,
.nav-link:hover,
nav a[class*="hover:text-blue"] {
    color: var(--primary-color) !important;
}

/* Botones del frontend */
.btn,
button[type="submit"],
.button,
input[type="submit"],
.cta-button {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn:hover,
button[type="submit"]:hover,
.button:hover,
input[type="submit"]:hover,
.cta-button:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Cards y containers */
.card-primary,
.featured,
.highlight {
    border-color: var(--primary-color) !important;
}

/* Iconos y elementos decorativos */
.icon-primary,
i.text-blue-500,
i.text-blue-600 {
    color: var(--primary-color) !important;
}

/* Formularios */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
}

/* Enlaces de navegación */
.navbar-nav a,
.menu-item a,
.nav-item a {
    transition: color 0.3s ease;
}

.navbar-nav a:hover,
.menu-item a:hover,
.nav-item a:hover {
    color: var(--primary-color) !important;
}

/* === SIDEBAR ADMIN === */
#sidebar.bg-blue-800 {
    background-color: var(--secondary-color) !important;
}

#sidebar .hover\:bg-blue-700:hover {
    background-color: var(--secondary-hover) !important;
}

/* === FOCUS STATES === */
.focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(var(--primary-rgb), 0.3) !important;
}

.focus\:border-blue-500:focus,
.focus\:border-primary:focus {
    border-color: var(--primary-color) !important;
}

/* === GRADIENTES === */
.gradient-bg {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
}

/* === ICONOS DE ACENTO === */
.text-pink-600,
.text-purple-600,
.text-orange-600 {
    color: var(--accent-color) !important;
}

/* === ELEMENTOS ESPECÍFICOS DEL FRONTEND === */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

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

/* === TRANSPARENCIAS === */
.bg-primary-light {
    background-color: var(--primary-light) !important;
}

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

/* === APLICACIÓN ESPECÍFICA DEL FRONTEND === */
/* Badges y etiquetas */
.bg-blue-50 {
    background-color: #fafafa !important;
}

.bg-blue-100 {
    background-color: #fafafa !important;
}

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

.text-blue-800 {
    color: var(--secondary-dark) !important;
}

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

/* Enlaces y hover states */
.text-blue-600 {
    color: var(--primary-color) !important;
}

.hover\:text-blue-500:hover {
    color: var(--primary-color) !important;
}

/* Iconos */
.text-blue-500 {
    color: var(--primary-color) !important;
}

/* Estados de focus específicos del frontend */
button:focus,
a:focus {
    outline: 2px solid rgba(var(--primary-rgb), 0.5) !important;
    outline-offset: 2px;
}

/* Grid cards y elementos de productos */
.product-card:hover,
.card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15) !important;
}

/* Elementos de navegación del frontend */
.navbar a:hover,
.menu-link:hover {
    color: var(--primary-color) !important;
}

/* Call to action buttons */
.cta-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    color: white !important;
}

.cta-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-dark)) !important;
}

/* Product grid específico */
.product-grid .product-item .btn {
    background-color: var(--primary-color) !important;
}

.product-grid .product-item .btn:hover {
    background-color: var(--primary-hover) !important;
}

/* === ELEMENTOS DE NAVEGACIÓN === */
.nav-item.bg-blue-900 {
    background-color: var(--secondary-dark) !important;
}

/* === CARDS Y CONTAINERS === */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(var(--primary-rgb), 0.1), 0 4px 6px -2px rgba(var(--primary-rgb), 0.05);
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary {
        padding: 0.5rem 1rem;
    }
}