/* =========================================================
   TabsFiltro.css
   Estilos base para el sistema de filtros con sidebar + tabs
   Complementa a /js/TabsFiltro.js
   Usa los colores corporativos Lions:
     - Lions Gold  (#ffcd00) → acento / badges / hover sutiles
     - Lions Blue  (#003da5) → primario / estados activos
   ========================================================= */

/* ====== Variables (personalizables por página) ====== */
:root {
    /* Corporativos Lions — heredados del CSS global */
    --tf-primary: var(--careold-primary, #003da5);
    --tf-primary-rgb: var(--careold-primary-rgb, 0, 61, 165);
    --tf-accent: var(--careold-base, #ffcd00);
    --tf-accent-rgb: var(--careold-base-rgb, 255, 205, 0);
    /* Derivados (tonos oscuros/claros para hover y bordes) */
    --tf-primary-dark: #002d7a;
    --tf-accent-dark: #e0b400;
    /* Neutros */
    --tf-text-muted: #666;
    --tf-bg-light: #f8f8f8;
    --tf-bg-soft: #f0f0f0;
    --tf-bg-hover: #eef1f4;
    --tf-border: #dee2e6;
    --tf-transition: 0.3s ease;
}

/* =========================================================
   SIDEBAR FILTRO (lista de categorías)
   ========================================================= */
.service-sidebar__nav li a {
    cursor: pointer;
    transition: all var(--tf-transition);
}

    .service-sidebar__nav li.active a,
    .service-sidebar__nav li a:hover {
        color: var(--tf-primary);
        font-weight: 600;
    }

/* Contador al lado de cada categoría */
.service-sidebar__nav li .filter-count {
    float: right;
    background: var(--tf-bg-soft);
    color: var(--tf-text-muted);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    min-width: 32px;
    text-align: center;
    transition: all var(--tf-transition);
}

/* Categoría activa: fondo azul Lions, texto blanco */
.service-sidebar__nav li.active .filter-count {
    background: var(--tf-primary);
    color: #fff;
}

/* Hover sobre categoría (no activa): fondo dorado suave */
.service-sidebar__nav li:not(.active) a:hover .filter-count {
    background: var(--tf-accent);
    color: var(--tf-primary);
}

/* =========================================================
   ITEMS FILTRABLES (animación de entrada/salida)
   ========================================================= */
.team-item,
.servicio-item,
.galeria-item,
.tf-filter-item {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    .team-item.filtering-out,
    .servicio-item.filtering-out,
    .galeria-item.filtering-out,
    .tf-filter-item.filtering-out {
        opacity: 0;
        transform: scale(0.9);
        pointer-events: none;
    }

    .team-item.hidden,
    .servicio-item.hidden,
    .galeria-item.hidden,
    .tf-filter-item.hidden {
        display: none !important;
    }

/* =========================================================
   MENSAJE "NO HAY RESULTADOS"
   ========================================================= */
.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
    background: var(--tf-bg-light);
    border-radius: 8px;
    margin-top: 1rem;
    border-top: 3px solid var(--tf-accent);
}

    .no-results i {
        font-size: 2.5rem;
        color: var(--tf-primary);
        margin-bottom: 1rem;
    }

    .no-results p {
        margin: 0;
        font-size: 1.05rem;
    }

/* =========================================================
   TAB TOGGLE (solo mobile/tablet)
   ========================================================= */
.tab-toggle {
    display: flex;
    border-bottom: 2px solid var(--tf-border);
    margin-bottom: 1.5rem;
    gap: 4px;
}

.tab-btn {
    flex: 1;
    padding: 12px 10px;
    border: none;
    background: var(--tf-bg-light);
    font-weight: 600;
    color: var(--tf-text-muted);
    cursor: pointer;
    transition: all 0.25s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 0.95rem;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .tab-btn:hover {
        background: var(--tf-bg-hover);
        color: var(--tf-primary);
    }

    /* Tab activo: azul Lions con línea inferior dorada */
    .tab-btn.active {
        color: #fff;
        background: var(--tf-primary);
        border-bottom: 3px solid var(--tf-accent);
    }

    /* Badge dentro del tab (contador) */
    .tab-btn .tab-badge {
        background: rgba(255, 255, 255, 0.25);
        color: inherit;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        min-width: 26px;
        text-align: center;
        transition: all var(--tf-transition);
    }

    /* Badge en tab no activo: dorado Lions sobre azul oscuro */
    .tab-btn:not(.active) .tab-badge {
        background: var(--tf-accent);
        color: var(--tf-primary);
    }

    /* Badge en tab activo: fondo blanco translúcido */
    .tab-btn.active .tab-badge {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Desktop: ambos paneles siempre visibles, sin tabs */
@media (min-width: 992px) {
    .tab-toggle {
        display: none !important;
    }

    .tf-panel,
    [data-tf-panel] {
        display: block !important;
    }
}

/* Mobile/tablet: solo el panel con .tab-visible se muestra */
@media (max-width: 991.98px) {
    .tf-panel,
    [data-tf-panel] {
        display: none;
    }

        .tf-panel.tab-visible,
        [data-tf-panel].tab-visible {
            display: block;
        }

    /* Margen entre sidebar y contenido cuando se apilan */
    .service-sidebar {
        margin-bottom: 2rem;
    }
}