/* ==========================================================================
   Oncopedia - Estilos CSS Completos (Paleta Estricta 6 Colores)
   ========================================================================== */

/* 1. Variables de Diseño y Paleta de Colores Exclusiva */
:root {
    /* Paleta Estricta Oncopedia */
    --color-bc4025: #BC4025; /* Terracota Oscuro */
    --color-ed6145: #ED6145; /* Coral Fuerte */
    --color-ff8063: #FF8063; /* Salmón Coral */
    --color-ff899d: #FF899D; /* Rosa Suave */
    --color-ffac99: #FFAC99; /* Melocotón Claro */
    --color-f7ece7: #F7ECE7; /* Crema (Base) */

    /* Mapeo de compatibilidad interna al nuevo esquema */
    --color-004e3e: #BC4025; 
    --color-009974: #ED6145; 
    --color-00e05a: #FF8063; 

    --color-brand-50: #F7ECE7;
    --color-brand-100: #FFAC99;
    --color-brand-200: #FF899D;
    --color-brand-300: #FF8063;
    --color-brand-400: #FF8063;
    --color-brand-500: #ED6145;
    --color-brand-600: #ED6145;
    --color-brand-700: #BC4025;
    --color-brand-800: #BC4025;
    --color-brand-900: #BC4025;
    --color-cream: #F7ECE7;
    --color-accent: #ED6145;
}

/* 2. Reset Base de Scroll y Comportamiento Táctil */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto !important;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

body {
    overflow-x: hidden;
    overflow-y: auto !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: var(--color-f7ece7);
    color: #BC4025;
}

/* 3. Modales y Notificaciones Ocultos por Defecto */
#lightboxModal, 
#xmasModal, 
#toast {
    display: none;
}

#lightboxModal.flex, 
#xmasModal.flex, 
#toast.flex {
    display: flex !important;
}

/* 4. Degradados Personalizados con la Nueva Paleta Estricta */
.gradient-purple {
    background: linear-gradient(135deg, var(--color-ed6145) 0%, var(--color-bc4025) 100%);
}

.gradient-coral {
    background: linear-gradient(135deg, var(--color-ed6145) 0%, var(--color-bc4025) 100%);
}

.gradient-soft {
    background: linear-gradient(135deg, var(--color-f7ece7) 0%, var(--color-ffac99) 100%);
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-ed6145) 0%, var(--color-bc4025) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-coral {
    background: linear-gradient(135deg, var(--color-ed6145) 0%, var(--color-bc4025) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 5. Transiciones y Animaciones del Slider */
.slide-transition {
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

#heroSlider {
    touch-action: pan-y;
}

.slide {
    will-change: opacity, transform;
}

.slide.pointer-events-none {
    pointer-events: none !important;
}

/* Dots Navegación del Slider */
.dot {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 6. Botones y Filtros Interactivos */
.campana-btn, 
.gal-btn {
    cursor: pointer;
    user-select: none;
    transition: all 0.25s ease;
}

.campana-btn:hover, 
.gal-btn:hover {
    transform: translateY(-1px);
}

.campana-item, 
.gal-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 7. Personalización de Barra de Desplazamiento */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-f7ece7);
}

::-webkit-scrollbar-thumb {
    background: var(--color-ffac99);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-ff8063);
}