/* === Estilos comunes para filtros === */
#filtro-title,
#filters-form h6,
#filters-form label {
    color: var(--default-color);
}

#filters-form {
    background-color: var(--surface-color);
    color: var(--default-color);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--text-secondary);
}

/* Range input en modo oscuro (mejor visibilidad) */
[data-theme="dark"] input[type="range"] {
    accent-color: var(--primary-color);
    /* solo si tu navegador lo soporta */
}

/* Opcional: fondo del panel de filtros si usas <aside> o similar */
.filter-panel {
    background-color: var(--surface-color);
    color: var(--default-color);
    border-right: 1px solid var(--text-secondary);
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    transform: translateX(-100%);
    /* Oculto inicialmente */
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}

.filter-panel.open {
    transform: translateX(0);
    /* Visible cuando se agrega la clase "open" */
}

/* Ajusta el botón de filtros para que coincida con el diseño */
#open-filters {
    margin-left: 5px;
    /* Espaciado entre el botón de búsqueda y el botón de filtros */
}

#filtro-title {
    font-size: 3 4px;
    /* Tamaño de fuente del título */
    font-weight: bold;
    /* Negrita para el título */
    margin-bottom: 20px;
    /* Espacio inferior para separar del contenido */
    margin-left: 20px;
    /* Color del texto del título */
    padding-top: 20px;
    /* Espacio superior para separar del borde */
}

#filters-form {
    padding-left: 20px;
    /* Incrementa la separación interna del formulario */
    padding-right: 20px;
    /* Opcional: para mantener simetría */
    margin-top: 50px;
    /* Espacio superior para separar del borde */
}

#close-filters {
    position: absolute;
    /* Posiciona el botón de manera absoluta dentro del panel */
    top: 20px;
    /* Separación desde el borde superior */
    right: 20px;
    /* Separación desde el borde derecho */
    z-index: 1001;
    /* Asegura que el botón esté por encima del contenido */
}
#service-options {
  max-height: 150px;     /* Puedes ajustar la altura según lo que quede bien en tu diseño */
  overflow-y: auto;      /* Activa el scroll vertical */
  padding-right: 5px;    /* Pequeño espacio para que no se corte el scroll */
  border: 1px solid #ddd;
  border-radius: 4px;
}