/* Paletas de colores para los diferentes temas */
:root {
    /* Paleta Original  */
    --theme-original-primary: #2b2b31;
    --theme-original-secondary: #28282d;
    --theme-original-accent: #ff55a5;
    --theme-original-light: #ff5860;
    --theme-original-hover: rgba(255,88,96,0.5);

    /* Paleta Nocturna (Morado) */
    --theme-dark-primary: #1f1a2d;
    --theme-dark-secondary: #2a2139;
    --theme-dark-accent: #7b68ee;
    --theme-dark-light: #9370db;
    --theme-dark-hover: rgba(147,112,219,0.5);

    /* Paleta Bosque (Verde) */
    --theme-forest-primary: #1e3b2c;
    --theme-forest-secondary: #2a4d3a;
    --theme-forest-accent: #3cb371;
    --theme-forest-light: #4caf50;
    --theme-forest-hover: rgba(76,175,80,0.5);

    /* Paleta Océano (Azul) */
    --theme-ocean-primary: #1a3b4d;
    --theme-ocean-secondary: #234a5f;
    --theme-ocean-accent: #1e90ff;
    --theme-ocean-light: #00bfff;
    --theme-ocean-hover: rgba(0,191,255,0.5);
}

/* Tema Original (por defecto) */
.theme-original {
    --header-bg: var(--theme-original-primary);
    --header-nav: var(--theme-original-secondary);
    --header-accent: var(--theme-original-accent);
    --header-light: var(--theme-original-light);
    --header-hover: var(--theme-original-hover);
}

/* Tema Nocturno */
.theme-dark {
    --header-bg: var(--theme-dark-primary);
    --header-nav: var(--theme-dark-secondary);
    --header-accent: var(--theme-dark-accent);
    --header-light: var(--theme-dark-light);
    --header-hover: var(--theme-dark-hover);
}

/* Tema Bosque */
.theme-forest {
    --header-bg: var(--theme-forest-primary);
    --header-nav: var(--theme-forest-secondary);
    --header-accent: var(--theme-forest-accent);
    --header-light: var(--theme-forest-light);
    --header-hover: var(--theme-forest-hover);
}

/* Tema Océano */
.theme-ocean {
    --header-bg: var(--theme-ocean-primary);
    --header-nav: var(--theme-ocean-secondary);
    --header-accent: var(--theme-ocean-accent);
    --header-light: var(--theme-ocean-light);
    --header-hover: var(--theme-ocean-hover);
}

/* Estilos comunes para todos los temas */
.header__logo img{
    filter: brightness(0) invert(1);
}
.themed-header .header__logo{
    margin-right: 20px;
}
.theme-btn {
    background-color: transparent;
    color: white;
    border: 2px solid var(--header-accent);
    border-bottom: 0;
}
.themed-header {
    background-color: var(--header-bg);
    border-bottom: 2px solid var(--header-accent);
}
.themed-header .header__logo {
    background-color: transparent;
}
.themed-header .header__logo:hover {
    background-color: var(--header-bg);
}
.themed-header .header__dropdown-menu {
    background-color: var(--header-nav);
}
.themed-header .header__dropdown-menu:before {
    background: linear-gradient(90deg, var(--header-accent) 0%, var(--header-light) 100%);
    box-shadow: 0 0 20px 0 var(--header-hover);
}
.themed-header .header__nav-link:hover,
.themed-header .header__nav-link[aria-expanded="true"] {
    color: var(--header-accent);
}
.themed-header .header__nav-link:hover svg,
.themed-header .header__nav-link[aria-expanded="true"] svg {
    fill: var(--header-accent);
}
.themed-header .header__dropdown-menu a:hover {
    color: var(--header-accent);
}
.themed-header .header__sign-in {
    background: linear-gradient(90deg, var(--header-light) 0%, var(--header-accent) 100%);
    box-shadow: 0 0 16px 0 rgba(255,88,96,0.3);
}
.themed-header .header__sign-in:before {
    background: linear-gradient(90deg, var(--header-accent) 0%, var(--header-light) 100%);
}
.themed-header .header__categories-btn span {
    background: linear-gradient(90deg, var(--header-accent) 0%, var(--header-light) 100%);
}

/* Menú móvil temático */
.themed-menu {
    background-color: var(--header-nav);
}
.themed-menu:before {
    background: linear-gradient(90deg, var(--header-accent) 0%, var(--header-light) 100%);
    box-shadow: 0 0 20px 0 var(--header-hover);
}
.themed-menu .menu__nav-link:hover,
.themed-menu .menu__nav-link[aria-expanded="true"] {
    color: var(--header-accent);
}
.themed-menu .menu__nav-link:hover svg,
.themed-menu .menu__nav-link[aria-expanded="true"] svg {
    fill: var(--header-accent);
}
.themed-menu .menu__dropdown-menu a:hover {
    color: var(--header-accent);
}



.header__categories-list li:before {
    background-color: var(--header-accent);
}