/*
 * CADRI Custom Theme
 * Color Principal: #b20808 (Rojo CADRI)
 * Color Secundario: Gris
 */

:root {
    /* Color Principal CADRI - Rojo */
    --cadri-primary: #b20808 !important;
    --cadri-primary-dark: #8b0606 !important;
    --cadri-primary-darker: #6b0505 !important;
    --cadri-primary-light: #d40a0a !important;
    --cadri-primary-lighter: #e63535 !important;
    --cadri-primary-rgb: 178, 8, 8;

    /* Color Secundario - Gris */
    --cadri-secondary: #5d666f !important;
    --cadri-secondary-dark: #3d4449 !important;
    --cadri-secondary-light: #8d96a0 !important;
    --cadri-secondary-lighter: #e5e7ea !important;
    --cadri-secondary-rgb: 93, 102, 111;

    /* Colores base */
    --color-background: rgba(255, 255, 255, 1) !important;
    --color-foreground: rgba(28, 37, 57, 1) !important;
    --color-foreground-heading: rgba(28, 37, 57, 1) !important;
    --color-foreground-subheading: var(--cadri-secondary) !important;

    /* Override de colores del tema */
    --color-primary: rgba(178, 8, 8, 1) !important;
    --color-primary-background: rgba(178, 8, 8, 1) !important;
    --color-primary-hover: rgba(139, 6, 6, 1) !important;
    --color-primary-background-hover: rgba(139, 6, 6, 1) !important;

    /* Botones Primarios */
    --color-primary-button-text: rgba(255, 255, 255, 1) !important;
    --color-primary-button-background: rgba(178, 8, 8, 1) !important;
    --color-primary-button-border: rgba(178, 8, 8, 1) !important;
    --color-primary-button-icon: rgba(255, 255, 255, 1) !important;
    --color-primary-button-icon-background: rgba(178, 8, 8, 1) !important;

    --color-primary-button-hover-text: rgba(255, 255, 255, 1) !important;
    --color-primary-button-hover-background: rgba(139, 6, 6, 1) !important;
    --color-primary-button-hover-border: rgba(139, 6, 6, 1) !important;
    --color-primary-button-hover-icon: rgba(178, 8, 8, 1) !important;
    --color-primary-button-hover-icon-background: rgba(255, 255, 255, 1) !important;

    /* Paginación */
    --pagination-item-active-background: rgba(178, 8, 8, 1) !important;
    --pagination-item-active-border: rgba(178, 8, 8, 1) !important;

    /* Swiper/Slider */
    --swiper-pagination-color: rgba(178, 8, 8, 1) !important;
    --swiper-theme-color: rgba(178, 8, 8, 1) !important;
}

/* ============================================
   HEADER STYLES - Color CADRI #b20808
   ============================================ */

/* Header Background */
.header-1 .header-grid {
    background-color: var(--cadri-primary) !important;
    padding: 12px 20px;
    border-radius: 50px;
}

/* Sticky header background */
sticky-header[data-stuck="true"] .header-1 .header-grid {
    background-color: var(--cadri-primary) !important;
    box-shadow: 0 4px 20px rgba(var(--cadri-primary-rgb), 0.3);
}

/* Menu Links */
.header-menu .menu-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease;
}

.header-menu .menu-link:hover,
.header-menu .menu-link.active {
    color: rgba(255, 255, 255, 1) !important;
    background-color: rgba(255, 255, 255, 0.15);
}

/* Dropdown menu styling */
.header-actions .dropdown-toggle {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

.header-actions .dropdown-toggle:hover,
.header-actions .dropdown-toggle:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Auth buttons */
.header-actions .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.header-actions .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
}

.header-actions .btn-light {
    background-color: white;
    color: var(--cadri-primary);
    border: none;
}

.header-actions .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--cadri-primary-dark);
}

/* Mobile menu burger */
.menu-burger svg {
    color: white !important;
}

.menu-burger.svg-wrapper {
    width: 32px !important;
    height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-burger svg {
    width: 24px !important;
    height: 24px !important;
}

/* Fix para el icono de cerrar en el drawer */
.header-nav-headings .svg-wrapper.menu-close {
    width: 32px !important;
    height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-nav-headings .svg-wrapper.menu-close svg {
    width: 24px !important;
    height: 24px !important;
}

/* Mobile drawer menu */
@media (max-width: 991px) {
    .drawer-menu {
        background-color: white !important;
    }

    .drawer-menu .header-menu .menu-link {
        color: var(--cadri-primary) !important;
    }

    .drawer-menu .header-menu .menu-link:hover,
    .drawer-menu .header-menu .menu-link.active {
        background-color: rgba(var(--cadri-primary-rgb), 0.1);
        color: var(--cadri-primary-dark) !important;
    }
}

/* Enlaces con color CADRI */
a.link-cadri,
.link-cadri {
    color: var(--cadri-primary);
    transition: color 0.3s ease;
}

a.link-cadri:hover,
.link-cadri:hover {
    color: var(--cadri-primary-dark);
}

/* Badge/Tag con color CADRI */
.badge-cadri,
.tag-cadri {
    background-color: var(--cadri-primary);
    color: white;
}

.badge-cadri:hover,
.tag-cadri:hover {
    background-color: var(--cadri-primary-dark);
}

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

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

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

/* Backgrounds */
.bg-cadri {
    background-color: var(--cadri-primary) !important;
    color: white;
}

.bg-cadri-light {
    background-color: var(--cadri-primary-light) !important;
    color: white;
}

.bg-cadri-lighter {
    background-color: var(--cadri-primary-lighter) !important;
    color: white;
}

.bg-cadri-dark {
    background-color: var(--cadri-primary-dark) !important;
    color: white;
}

.bg-cadri-gradient {
    background: linear-gradient(135deg, var(--cadri-primary) 0%, var(--cadri-primary-dark) 100%);
    color: white;
}

/* Text colors */
.text-cadri {
    color: var(--cadri-primary) !important;
}

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

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

/* Botones personalizados CADRI */
.button--cadri {
    background-color: var(--cadri-primary);
    border-color: var(--cadri-primary);
    color: white;
    transition: all 0.3s ease;
}

.button--cadri:hover {
    background-color: var(--cadri-primary-dark);
    border-color: var(--cadri-primary-dark);
    color: white;
}

.button--cadri-outline {
    background-color: transparent;
    border: 2px solid var(--cadri-primary);
    color: var(--cadri-primary);
    transition: all 0.3s ease;
}

.button--cadri-outline:hover {
    background-color: var(--cadri-primary);
    color: white;
}

/* Overlays con color CADRI */
.overlay-cadri::before,
.overlay-cadri::after {
    background-color: rgba(var(--cadri-primary-rgb), 0.6);
}

.overlay-cadri-light::before,
.overlay-cadri-light::after {
    background-color: rgba(var(--cadri-primary-rgb), 0.3);
}

.overlay-cadri-dark::before,
.overlay-cadri-dark::after {
    background-color: rgba(var(--cadri-primary-rgb), 0.8);
}

/* Inputs con focus color CADRI */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--cadri-primary) !important;
    outline-color: var(--cadri-primary) !important;
}

/* Cards con borde CADRI al hover */
.card-cadri-hover {
    transition: all 0.3s ease;
}

.card-cadri-hover:hover {
    border-color: var(--cadri-primary);
    box-shadow: 0 10px 30px rgba(var(--cadri-primary-rgb), 0.2);
}

/* Categorías y tags */
.blog-tag,
.category-tag {
    background-color: var(--cadri-primary);
    color: white;
    transition: all 0.3s ease;
}

.blog-tag:hover,
.category-tag:hover {
    background-color: var(--cadri-primary-dark);
}

/* Social icons con color CADRI */
.social-list .svg-wrapper {
    color: var(--cadri-primary);
}

.social-list .svg-wrapper:hover {
    background-color: var(--cadri-primary);
    color: white;
}

/* Progress bars */
.progress-cadri {
    background-color: rgba(var(--cadri-primary-rgb), 0.2);
}

.progress-cadri .progress-bar {
    background-color: var(--cadri-primary);
}

/* Subheading con color CADRI */
.subheading-cadri {
    color: var(--cadri-primary);
    background-color: rgba(var(--cadri-primary-rgb), 0.1);
}

/* Iconos destacados */
.icon-cadri {
    color: var(--cadri-primary);
}

.icon-bg-cadri {
    background-color: rgba(var(--cadri-primary-rgb), 0.1);
    color: var(--cadri-primary);
}

/* Separadores */
.divider-cadri {
    border-color: var(--cadri-primary);
    opacity: 0.3;
}

/* Hover effects para tarjetas */
.card-hover-cadri {
    transition: all 0.3s ease;
}

.card-hover-cadri:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(var(--cadri-primary-rgb), 0.15);
}

/* List items con color CADRI */
.list-cadri li::before {
    color: var(--cadri-primary);
}

/* Checkmarks y bullets */
.check-cadri::before {
    color: var(--cadri-primary);
}

/* Testimonials y quotes */
.quote-cadri {
    border-left: 4px solid var(--cadri-primary);
}

/* Timeline */
.timeline-cadri .timeline-item::before {
    background-color: var(--cadri-primary);
}

/* Alerts personalizadas */
.alert-cadri {
    background-color: rgba(var(--cadri-primary-rgb), 0.1);
    border-left: 4px solid var(--cadri-primary);
    color: var(--cadri-primary-dark);
}

/* Tabs */
.nav-tabs-cadri .nav-link.active {
    color: var(--cadri-primary);
    border-bottom-color: var(--cadri-primary);
}

/* Dropdown */
.dropdown-cadri .dropdown-item:hover {
    background-color: rgba(var(--cadri-primary-rgb), 0.1);
    color: var(--cadri-primary);
}

/* Scrollbar personalizada (webkit) */
::-webkit-scrollbar-thumb {
    background-color: var(--cadri-primary);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--cadri-primary-dark);
}

/* Selection color */
::selection {
    background-color: var(--cadri-primary);
    color: white;
}

::-moz-selection {
    background-color: var(--cadri-primary);
    color: white;
}

/* Loader/Spinner */
.spinner-cadri {
    border-color: rgba(var(--cadri-primary-rgb), 0.3);
    border-top-color: var(--cadri-primary);
}

/* Animación de pulso */
@keyframes pulse-cadri {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse-cadri {
    animation: pulse-cadri 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Gradiente animado */
@keyframes gradient-cadri {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-animated-cadri {
    background: linear-gradient(270deg, var(--cadri-primary), var(--cadri-primary-dark), var(--cadri-primary-light));
    background-size: 200% 200%;
    animation: gradient-cadri 3s ease infinite;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .button--cadri,
    .button--cadri-outline {
        padding: 12px 24px;
    }
}

@media (max-width: 575px) {
    .button--cadri,
    .button--cadri-outline {
        padding: 10px 20px;
        font-size: 14px;
    }
}