/* --- CONFIGURACIÓN DE COLORES SUMICOMP --- */
:root {
    --sumi-orange: #ff8727; /* Naranja de la marca */
    --text-dark: #333333; /* Gris oscuro para el texto */
    --gray-light: #e9ecef; /* Gris suave para el borde inicial */
    --placeholder: #adb5bd; /* Color del placeholder */
}


/* --- Estilo Base del Contenedor (Formulario) --- */
.search-form {
    /* 1. Fondo SIEMPRE BLANCO (Ya no transparente) */
    background-color: #ffffff;
    /* 2. Borde inicial suave (gris claro) */
    border: 2px solid var(--gray-light);
    border-radius: 50px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    min-height: 45px;
    /* Sombra opcional para darle profundidad */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

    /* --- EFECTO HOVER Y FOCUS (Aquí aplicamos el Naranja) --- */

    /* Cuando pasas el mouse O cuando escribes dentro */
    .search-form:hover,
    .search-form:focus-within {
        /* El borde cambia a Naranja */
        border-color: var(--sumi-orange);
        /* Efecto de resplandor naranja suave */
        box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2);
    }


/* --- Estilo del Campo de Texto (Input) --- */
.search-input {
    background-color: transparent !important;
    border: none;
    /* Color oscuro porque el fondo es blanco */
    color: var(--text-dark);
    padding: 0.75rem 1rem;
    box-shadow: none !important;
    font-size: 0.95rem;
    height: 100%;
    width: 100%;
    min-width: 0;
}

    /* Color del texto de ayuda (Placeholder) */
    .search-input::placeholder {
        color: var(--placeholder);
    }

/* --- Estilo del Botón de Búsqueda (Lupa) --- */
.search-btn {
    background-color: transparent;
    border: none;
    color: #6c757d;
    transition: all 0.3s ease;
    padding: 0 1.2rem; /* Eliminamos el padding arriba/abajo */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0; /* Quitamos el radio aquí para que lo controle el padre */
    /* ESTO ES LO QUE SOLUCIONA EL COLOR: */
    align-self: stretch; /* Obliga al botón a medir lo mismo que el formulario */
    height: auto;
    margin: 0;
}

/* --- Comportamiento del Botón al Interactuar --- */

/* CASO 1: Cuando escribes en el input (Focus), el botón se pone naranja */
.search-form:focus-within .search-btn {
    background-color: var(--sumi-orange) !important;
    color: #ffffff;
}

/* CASO 2: Cuando pasas el mouse sobre la lupa */
.search-btn:hover {
    background-color: var(--sumi-orange) !important;
    color: #ffffff !important;
    cursor: pointer;
}
@media (max-width: 768px) {
    .search-wrapper {
        width: 100%;
        margin-top: 0.5rem;
    }

    .search-form {
        max-width: 100%;
    }
}
/* --- Eliminar el borde y sombra por defecto de Bootstrap al hacer clic --- */
.search-input:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* También aseguramos que el botón no muestre un cuadro raro si se navega con teclado */
.search-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}