/* =========================================
   SideFilter.css - Estilos del Panel Lateral
   ========================================= */

/* 1. Botón disparador (El que abre el panel) */
.btn-filter-trigger {
    position: relative; /* Necesario para que el badge flote respecto a este botón */
    overflow: visible; /* Importante: permite que el badge se salga de los bordes del botón */
}

/* 2. La burbuja del contador */
.badge-filter-count {
    position: absolute;
    top: -8px;
    right: -8px;
    /* Dimensiones y Forma */
    min-width: 20px;
    height: 20px;
    padding: 0 4px; /* Un poco de aire lateral por si el número es > 9 */
    border-radius: 10px; /* Redondeado tipo píldora */
    /* Colores y Texto */
    background-color: #dc3545; /* Rojo Bootstrap */
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    /* Alineación del texto */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Decoración */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 1px solid #fff; /* Un borde blanco fino ayuda a separarlo visualmente del botón */
    z-index: 10;
    /* Animación */
    transition: all 0.2s ease-in-out;
    transform: scale(1);
}

/* Estado oculto (opcional, si usas clases para ocultar) */
.badge-filter-count.hidden {
    transform: scale(0);
    opacity: 0;
}

/* 3. Corrección visual para Select2 dentro del Panel (Para evitar que se vea raro al limpiar) */
.select2-container {
    width: 100% !important; /* Fuerza a que ocupe todo el ancho del sidebar */
}