/* ========================================================
   CONTENEDOR DE CATEGORÍAS (Scroll Horizontal)
   ======================================================== */
.nav-categorias-scroll {
    display: flex;
    flex-wrap: nowrap; /* Obliga a que estén en una sola línea */
    overflow-x: auto;  /* Permite scroll horizontal si no entran */
    gap: 0.25rem;      /* Espaciado entre botones (equivale a gap-1) */
    
    /* Ocultar barra de scroll visualmente */
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

.nav-categorias-scroll::-webkit-scrollbar {
    display: none;
}

/* ========================================================
   BOTONES DE CATEGORÍA
   ======================================================== */
.btn-categoria {
    flex: 1 1 auto;      /* Se expanden para ocupar el espacio (flex-fill) */
    white-space: nowrap; /* Evita que el texto baje a dos líneas (text-nowrap) */
    text-align: center;
    
    /* Estética base */
    position: relative;
    display: inline-block;
    color: #fbdbf0;
    border: 1px solid #fbdbf0;
    background-color: transparent;
    border-radius: 5px !important; /* Forma de píldora */
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    
    /* Transición suave para el hover */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Estado Hover / Focus */
.btn-categoria:hover,
.btn-categoria:focus {
    background-color: #fbdbf0;
    color: #212529; /* Gris oscuro para contraste legible */
    border-color: #fbdbf0;
    outline: none;
}

/* Estado Activo (Cuando estamos en esa página) */
.btn-categoria.activo,
.btn-categoria:active {
    background-color: #fbdbf0 !important;
    color: #212529 !important;
    border-color: #fbdbf0 !important;
}