/* Estilos específicos para resolver el problema de solapamiento del buscador */

/* Establece un ancho mínimo para el botón de búsqueda y garantiza que el texto no se rompa */
#search-button {
    min-width: 120px;
    white-space: nowrap;
}

/* Estructura específica para el contenedor del buscador usando tabla en lugar de flexbox o grid */
.search-container {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 10px 0;
}

.search-input-cell {
    display: table-cell;
    width: 75%;
    position: relative;
}

.search-button-cell {
    display: table-cell;
    width: 25%;
    vertical-align: top;
}

/* Asegurar que el input ocupe todo el espacio disponible */
#filter-buscar {
    width: 100%;
    box-sizing: border-box;
}

/* Hacer que el botón ocupe todo el ancho de su celda */
.search-button-cell button {
    width: 100%;
}

/* Estilos responsivos para el formulario de búsqueda */
@media (max-width: 640px) {
    .search-container {
        display: block;
        border-spacing: 0;
    }
    
    .search-input-cell,
    .search-button-cell {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Enfatizar bordes para debugging visual si es necesario */
.search-input-cell input {
    border: 1px solid #ccc;
}

.search-button-cell button {
    border: 1px solid transparent;
}