/* Contenedor flexible para alinear los botones */
.cat-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
    justify-content: center; /* Cambia a flex-start si prefieres alineación a la izquierda */
}

/* Estilo base del botón tipo Pill */
.cat-pill {
    display: inline-block;
    padding: 8px 20px;
    background-color: #f1f3f5;
    color: #495057;
    border-radius: 50px; /* Esto da la forma de píldora */
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Estado Hover y Activo */
.cat-pill:hover,
.cat-pill.active {
    background-color: #2271b1; /* Reemplaza por el color primario de tu paleta */
    color: #ffffff;
    border-color: #2271b1;
}
/* --- CONTENEDOR GENERAL --- */
.pills-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px; 
    margin-bottom: 5px;
    width: 100%;
    overflow: hidden; /* Evita desbordamientos indeseados del contenedor padre */
}

/* --- COMPORTAMIENTO BASE (DESKTOP) --- */
.cat-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

/* --- ESTILOS DE LOS BOTONES --- */
.cat-pill {
    display: inline-block;
    padding: 8px 20px;
    background-color: #f1f3f5;
    color: #495057;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.cat-pill:hover,
.parent-pills .cat-pill.active {
    background-color: #198754; /* Ajustado al verde de tu captura */
    color: #ffffff;
}

.sub-pills .cat-pill {
    font-size: 13px;
    padding: 6px 16px;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    color: #6c757d;
}

.sub-pills .cat-pill:hover,
.sub-pills .cat-pill.active {
    background-color: #e9ecef;
    color: #dfa938; /* Ajustado al amarillo/dorado de tu captura */
    border-color: #dfa938; 
}


/* --- COMPORTAMIENTO RESPONSIVE (MÓVIL / TABLET) --- */
@media (max-width: 768px) {
    .cat-pills-container {
        flex-wrap: nowrap; /* Obliga a que queden en una sola línea */
        justify-content: flex-start; /* Alinea a la izquierda para iniciar el scroll */
        overflow-x: auto; /* Activa el scroll horizontal */
        -webkit-overflow-scrolling: touch; /* Desplazamiento suave y fluido en iOS/Mac */
        padding-bottom: 10px; /* Espacio inferior extra para que no se corte visualmente */
        
        /* Oculta la barra de desplazamiento visual para un diseño más limpio */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE y Edge */
    }

    .cat-pills-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari y Opera */
    }

    .cat-pill {
        white-space: nowrap; /* Evita que el texto de un botón salte a dos líneas */
        flex-shrink: 0; /* Evita que los botones se achiquen o aplasten */
    }
}