/**
 * ESTILOS NEGOCIOS - V1.1 CORREGIDO
 * FIX: Ninguno aparece en azul usando atributo data en lugar de :first-child
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700;900&family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&display=swap');

/* Contenedor base compartido para todos los filtros de negocios */
.fn-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    display: none;
    overflow: hidden;
    box-sizing: border-box;
}

/* Quitamos cualquier forzado de mayusculas */
.f-icono span {
    text-transform: none !important; 
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Ajuste especifico para el contenedor del drawer cuando se abre Negocios */
#drawer-filtros .f-scroll-container {
    padding: 15px 10px !important;
    gap: 15px !important;
}

/* ============================================
   COLORES: CONSISTENTE CON TEMA PRINCIPAL
   ============================================ */

/* Resalte del botón principal - Azul Lorica */
.btn-u#btn-negocios.active {
    color: #1DA1F2 !important;
}

/* ============================================
   ESTILIZACIÓN DE OPCIONES
   ============================================ */

/* Tamaño consistente de iconos: 32px */
.f-icono i {
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f-icono-txt {
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   ESTILO POR DEFECTO TODOS LOS ICONOS
   ============================================ */

.f-icono i,
.f-icono .f-icono-txt {
    color: #777777 !important;
    transition: color 0.2s ease;
}

.f-icono span {
    color: #666666;
    transition: color 0.2s ease;
}

/* ============================================
   CUANDO ESTÁN ACTIVOS (CLASE "activo")
   ============================================ */

.f-icono.activo i,
.f-icono.activo .f-icono-txt {
    color: #1DA1F2 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.f-icono.activo span {
    color: #1DA1F2 !important;
    font-weight: 600 !important;
}

/* ============================================
   ANIMACIONES
   ============================================ */

/* Animación de clic suave */
.f-icono {
    transition: transform 0.1s ease;
}

.f-icono:active {
    transform: scale(0.95);
}