/**
 * Componente: Tabs de navegación
 *
 * Estilos globales para el patrón de pestañas con borde inferior activo.
 * Extraído de modules/intercambios/assets/css/dashboard-mis-intercambios.css
 * y consolidado como componente reutilizable.
 *
 * Uso:
 *   <div class="ltn-tabs-nav">
 *     <a class="ltn-tab-link active" href="?tab=uno">Uno</a>
 *     <a class="ltn-tab-link" href="?tab=dos">Dos</a>
 *   </div>
 *
 * @package Allage
 * @since   1.0.0
 */

/* Contenedor de la barra de pestañas */
.ltn-tabs-nav {
    display: flex;
    gap: 0;
    background: var(--ltn-white);
    border-bottom: 2px solid var(--ltn-gray-200);
    border-radius: var(--ltn-border-radius) var(--ltn-border-radius) 0 0;
    margin-bottom: var(--ltn-spacing-xl);
    overflow-x: auto;
}

/* Ítem de pestaña */
.ltn-tab-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: transparent;
    color: var(--ltn-gray-500);
    text-decoration: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: var(--ltn-transition-slow);
    white-space: nowrap;
    position: relative;
    font-weight: 500;
    font-size: 14px;
}

.ltn-tab-link:hover {
    color: var(--ltn-green-primary);
    background: var(--ltn-green-bg);
}

/* Pestaña activa */
.ltn-tab-link.active {
    color: var(--ltn-green-primary);
    border-bottom-color: var(--ltn-green-primary);
    font-weight: 600;
    background: var(--ltn-green-bg);
}

/* Badge de contador */
.ltn-tab-link .badge {
    background: var(--ltn-error);
    color: var(--ltn-white);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .ltn-tabs-nav {
        flex-wrap: wrap;
    }
}