/* Adaptado de BackOffice.Shared/Componentes/NeronComponentes/NeronTabs. */

.neron-tabs-container {
    display: flex;
    gap: 4px;
    padding: 5px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    margin: 0;
    width: fit-content;
    box-shadow: 0 10px 24px var(--neron-tab-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.neron-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neron-tab:hover {
    color: var(--ui-text-secondary);
    background: var(--ui-accent-soft);
    transform: translateY(0); 
}

.neron-tab.is-active {
    background: var(--ui-accent);
    color: var(--ui-on-accent);
    box-shadow: 0 8px 18px var(--ui-accent-focus);
}

.neron-tab.is-disabled,
.neron-tab:disabled {
    opacity: .48;
    cursor: not-allowed;
    box-shadow: none;
}

.neron-tab.is-disabled:hover,
.neron-tab:disabled:hover {
    color: var(--ui-text-muted);
    background: transparent;
}

.neron-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.neron-tab-mud-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: currentColor;
}

.neron-tab.is-active .neron-tab-icon {
    background-color: currentColor;
}

@media (max-width: 1024px) {
    .neron-tab {
        padding: 8px 12px;
        font-size: 13px;
        gap: 6px;
    }
    
    .neron-tabs-container {
        gap: 4px;
        padding: 4px;
        border-radius: 14px;
    }
}

.neron-tabs-container { --neron-tab-shadow: rgb(var(--ui-shadow-rgb) / 8%); flex-wrap: wrap; max-width: 100%; }
.neron-tab:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .neron-tab { transition: none; } }