/**
 * AEPSO 2026 - Theme Base (Universal)
 * Archivo: assets/css/theme-base.css
 * 
 * REEMPLAZA los archivos individuales por patología
 * (psoriasis.css, urticaria.css, default.css).
 * 
 * Todas las clases usan var() → los colores se definen
 * en el <style> generado por main.php desde la BD.
 * Agregar una patología nueva NO requiere tocar este archivo.
 */

/* ===== Gradiente del hero ===== */
.hero-gradient {
    background: linear-gradient(
        135deg,
        var(--hero-gradient-start) 0%,
        var(--color-primary-dark) 40%,
        var(--color-primary) 100%
    );
}

/* ===== Overlay para imágenes y video del slider ===== */
.media-overlay {
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.92) 0%,
        rgba(var(--color-primary-rgb), 0.80) 50%,
        rgba(var(--color-primary-rgb), 0.70) 100%
    );
}

/* ===== Cards: gradiente en hover ===== */
.card-gradient-hover {
    background: linear-gradient(
        135deg,
        var(--color-primary-dark) 0%,
        var(--color-primary) 100%
    );
}

/* ===== Botón primario ===== */
.btn-primary {
    background: linear-gradient(
        135deg,
        var(--color-accent) 0%,
        var(--color-accent-hover) 100%
    );
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

/* ===== Links y navegación activa ===== */
.nav-link.active,
a.active {
    color: var(--color-primary);
}

/* ===== Accent text/bg utilities ===== */
.text-accent-400 {
    color: var(--color-accent) !important;
}

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

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

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

.bg-accent-500\/10 {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
}

/* ===== Slider indicators con color del theme ===== */
.slide-indicator.active {
    background-color: var(--color-accent);
}

/* ===== aepso- color utilities (para textos sobre fondo blanco) ===== */
.text-aepso-600 {
    color: var(--color-primary);
}

.text-aepso-700 {
    color: var(--color-primary-dark);
}

.text-aepso-800 {
    color: var(--color-primary-dark);
}

.bg-aepso-50 {
    background-color: rgba(var(--color-primary-rgb), 0.03);
}

.bg-aepso-100 {
    background-color: rgba(var(--color-primary-rgb), 0.06);
}

.bg-aepso-800 {
    background-color: var(--color-primary-dark);
}

.from-aepso-50 {
    --tw-gradient-from: rgba(var(--color-primary-rgb), 0.03);
}

.via-aepso-100 {
    --tw-gradient-via: rgba(var(--color-primary-rgb), 0.06);
}

.from-aepso-900\/90 {
    --tw-gradient-from: rgba(var(--color-primary-rgb), 0.9);
}

.via-aepso-900\/50 {
    --tw-gradient-via: rgba(var(--color-primary-rgb), 0.5);
}

.bg-aepso-600\/5 {
    background-color: rgba(var(--color-primary-rgb), 0.05);
}

.bg-aepso-800\/5 {
    background-color: rgba(var(--color-primary-rgb), 0.05);
}

.border-aepso-200 {
    border-color: rgba(var(--color-primary-rgb), 0.15);
}

.border-aepso-300 {
    border-color: rgba(var(--color-primary-rgb), 0.25);
}

.hover\:bg-aepso-700:hover {
    background-color: var(--color-primary);
}

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