/* ─── Componente Pestañas ─── */

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--borde);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-bottom: 1.5rem;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--texto-sm);
    font-family: inherit;
    color: var(--texto-tenue);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.tab:hover {
    color: var(--texto-principal);
}

.tab:focus-visible {
    outline: 2px solid var(--color-marca);
    outline-offset: -2px;
}

.tab[aria-selected="true"] {
    color: var(--color-marca);
    border-bottom-color: var(--color-marca);
    font-weight: 600;
}

/* .tab-panels no necesita estilos propios — el contexto de la página lo define */

/* El atributo hidden nativo oculta los paneles inactivos */

@media (max-width: 900px) {
    .tab {
        padding: 0.75rem 1rem;
        font-size: var(--texto-xs);
    }
}