/* Estilos temáticos para botones de categorías y buscador */

/* Tema Original */
.theme-original .theme-search-input {
    border-color: #ff55a5;
    color: white;
}

.theme-original .theme-search-input:focus {
    border-color: #ff55a5;
    box-shadow: 0 0 10px #ff55a5;
}
.theme-original:focus .theme-search-button{
    background-color: #ff55a5;
}

.theme-original .theme-search-button {
    color: #ff55a5;
}

.theme-original .theme-search-button svg {
    fill: #ff55a5;
}

/* Tema Nocturno */
.theme-dark .theme-search-input {
    border-color: rgba(147,112,219,0.5);
    color: white;
}

.theme-dark .theme-search-input:focus {
    border-color: #7b68ee;
}
.theme-dark:focus .theme-search-button{
    background-color: #7b68ee;
}

.theme-dark .theme-search-button {
    background-color: #7b68ee;
    color: white;
}

.theme-dark .theme-search-button svg {
    fill: white;
}

/* Tema Bosque */
.theme-forest .theme-search-input {
    border-color: rgba(76,175,80,0.5);
    color: white;
}
.theme-forest .theme-search-input:focus {
    border-color: #3cb371;
}
.theme-forest:focus .theme-search-button{
    background-color: #3cb371;
}

.theme-forest .theme-search-button {
    background-color: #3cb371;
    color: white;
}

.theme-forest .theme-search-button svg {
    fill: white;
}

/* Tema Océano */
.theme-ocean .theme-search-input {
    border-color: rgba(0,191,255,0.5);
    color: white;
}
.theme-ocean .theme-search-input:focus {
    border-color: #1e90ff;
}
.theme-ocean:focus .theme-search-button{
    background-color: #1e90ff;
}
.theme-ocean .theme-search-button {
    background-color: #1e90ff;
    color: white;
}

.theme-ocean .theme-search-button svg {
    fill: white;
}

/* Estilos generales para mejorar la visibilidad del buscador */
.header__search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

.header__search {
    display: flex;
    align-items: center;
    width: 100%;
}

.theme-search-input {
    border: 2px solid;
    padding: 10px 60px 10px 10px; /* Espacio para el ícono */
    font-size: 16px;
    width: 100%;
    background-color: transparent;
    overflow: hidden;
}

.theme-search-button {
    z-index: -100;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(19px);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 0 6px 6px 0;
}

.theme-search-button svg {
    width: 30px;
    transition: transform 0.2s ease;
}

.theme-search-button:hover svg {
    transform: scale(1.1);
}

/* Aumentar tamaño del logo */
.header__logo img {
    max-width: 200px;
    height: auto;
}

@media(width < 770px){
    .theme-search-button {
        transform: translateY(-50%) translateX(0);
        border-radius: 0;
    }
    .theme-search-button svg {
        width: 24px;
    }
}