/*
|--------------------------------------------------------------------------
| Navegação: abas, breadcrumb, avatar
|--------------------------------------------------------------------------
|
| Abas (.ds-tabs): alternar visões do MESMO registro ou telas irmãs de uma
| seção (ex.: Usuários | Dispositivos). Não usar para etapas (use stepper).
|
| Breadcrumb: mostra onde o usuário está. Formato oficial:
|   Início › Módulo › Tela › Registro
| O último item é a página atual (aria-current="page"), sem link.
|
*/

/* Abas */

.ds-tabs {
    display: flex;
    gap: var(--ds-space-1);

    overflow-x: auto;

    border-bottom: var(--ds-border-width) solid var(--ds-color-border);

    scrollbar-width: none;
}

.ds-tabs__tab {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1-5);

    padding: var(--ds-space-2) var(--ds-space-3) 10px;

    border: 0;

    background: transparent;

    color: var(--ds-color-text-secondary);

    font: 500 14px/20px var(--ds-font);
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
}

.ds .ds-tabs__tab:hover {
    color: var(--ds-color-text);
    text-decoration: none;
}

.ds-tabs__tab[aria-current="page"],
.ds-tabs__tab[aria-selected="true"] {
    color: var(--ds-color-text);
}

.ds .ds-tabs__tab[aria-current="page"],
.ds .ds-tabs__tab[aria-selected="true"] {
    color: var(--ds-color-text);
}

/* Indicador: a marca aparece só no item ativo */
.ds-tabs__tab[aria-current="page"]::after,
.ds-tabs__tab[aria-selected="true"]::after {
    content: "";

    position: absolute;
    right: var(--ds-space-2);
    bottom: -1px;
    left: var(--ds-space-2);

    height: 2px;

    border-radius: 2px 2px 0 0;

    background: var(--ds-color-primary);
}

.ds-tabs__tab:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: -2px;

    border-radius: var(--ds-radius-md);
}

/* Breadcrumb (componente; o do cabeçalho global migra na fase de navegação) */

.ds-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-1);

    margin: 0;
    padding: 0;

    color: var(--ds-color-text-muted);

    font: var(--ds-text-body-sm);

    list-style: none;
}

.ds-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
}

.ds-breadcrumb__item + .ds-breadcrumb__item::before {
    content: "";

    width: 12px;
    height: 12px;

    background: var(--ds-color-text-disabled);

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.7 133.7l-80 80a8 8 0 0 1-11.4-11.4L164.7 128 90.3 53.7a8 8 0 0 1 11.4-11.4l80 80a8 8 0 0 1 0 11.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.7 133.7l-80 80a8 8 0 0 1-11.4-11.4L164.7 128 90.3 53.7a8 8 0 0 1 11.4-11.4l80 80a8 8 0 0 1 0 11.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ds .ds-breadcrumb a {
    color: var(--ds-color-text-secondary);
}

.ds .ds-breadcrumb a:hover {
    color: var(--ds-color-text);
}

.ds-breadcrumb [aria-current="page"] {
    color: var(--ds-color-text);

    font-weight: var(--ds-font-weight-medium);
}

/* Avatar (iniciais) */

.ds-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--ds-color-primary-subtle);

    color: var(--ds-color-primary-active);

    font: 600 12px/1 var(--ds-font);
}

.ds-avatar--sm {
    width: 24px;
    height: 24px;

    font-size: 10px;
}

.ds-avatar--lg {
    width: 48px;
    height: 48px;

    font-size: 17px;
}

/* Cabeçalho de página de uma pessoa */
.ds-avatar--xl {
    width: 72px;
    height: 72px;

    font-size: 26px;
}

/* Com foto: a imagem cobre o círculo; as iniciais ficam como fallback */
.ds-avatar {
    overflow: hidden;
}

.ds-avatar > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/*
|--------------------------------------------------------------------------
| Trilha de etapas (stepper)
|--------------------------------------------------------------------------
| Fases de um fluxo em ordem: concluídas (check), atual (framboesa, anel)
| e futuras (apagadas). O estado vem em .is-complete / .is-current /
| .is-future no passo; a atual recebe aria-current="step".
|
| <ol class="ds-etapas" aria-label="Fases">
|   <li class="ds-etapas__passo is-complete">
|     <span class="ds-etapas__marcador"><span class="ds-etapas__numero">1</span><i class="ph ph-check ds-etapas__check"></i></span>
|     <span class="ds-etapas__nome">Entrevista on-line</span>
|   </li>
|   <li class="ds-etapas__linha is-complete" aria-hidden="true"></li>
|   …
| </ol>
*/
.ds-etapas {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);

    margin: 0;
    padding: var(--ds-space-4) var(--ds-space-5);
    overflow-x: auto;

    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-lg);

    background: var(--ds-color-surface);

    list-style: none;
}

.ds-etapas__passo {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--ds-space-2);

    color: var(--ds-color-text-muted);
}

.ds-etapas__marcador {
    display: grid;
    flex: none;
    place-items: center;

    width: 28px;
    height: 28px;

    border: 1.5px solid var(--ds-color-border-control);
    border-radius: 50%;

    background: var(--ds-color-surface);

    font: 600 12px/1 var(--ds-font);
    font-variant-numeric: tabular-nums;
}

.ds-etapas__check {
    display: none;

    font-size: 14px;
}

.ds-etapas__nome {
    font: var(--ds-text-label);
    white-space: nowrap;
}

.ds-etapas__linha {
    flex: 1 1 24px;

    min-width: 24px;
    height: 2px;

    border-radius: 1px;

    background: var(--ds-color-border);
}

/* Concluída */
.ds-etapas__passo.is-complete {
    color: var(--ds-color-text-secondary);
}

.ds-etapas__passo.is-complete .ds-etapas__marcador {
    border-color: var(--ds-color-primary-subtle-border);

    background: var(--ds-color-primary-subtle);
    color: var(--ds-color-primary);
}

.ds-etapas__passo.is-complete .ds-etapas__numero {
    display: none;
}

.ds-etapas__passo.is-complete .ds-etapas__check {
    display: block;
}

.ds-etapas__linha.is-complete {
    background: var(--ds-color-primary);
}

/* Atual */
.ds-etapas__passo.is-current {
    color: var(--ds-color-text);
}

.ds-etapas__passo.is-current .ds-etapas__marcador {
    border-color: var(--ds-color-primary);

    background: var(--ds-color-primary);
    color: var(--ds-color-on-primary);

    box-shadow: 0 0 0 4px var(--ds-color-primary-subtle);
}

.ds-etapas__passo.is-current .ds-etapas__nome {
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .ds-etapas {
        padding: var(--ds-space-3);
    }

    /* no celular só a fase atual mostra o nome */
    .ds-etapas__passo:not(.is-current) .ds-etapas__nome {
        position: absolute;

        width: 1px;
        height: 1px;
        overflow: hidden;

        clip: rect(0 0 0 0);
    }
}