/* ==========================================================================
   EconoRadar - telas
   ==========================================================================
   Ajuste especifico de tela, para o que nao e componente reutilizavel.
   Cresce conforme as telas entram; por ora, pagina de erro e vitrine do
   design system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pagina de erro
   -------------------------------------------------------------------------- */

.pagina-erro {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    align-items: flex-start;
    padding-block: var(--esp-20);
}

.pagina-erro__codigo {
    color: var(--cor-accent-texto);
    font-size: var(--fonte-3xl);
    font-weight: var(--peso-forte);
    line-height: var(--altura-linha-apertada);
    letter-spacing: var(--espaco-letra-titulo);
    font-variant-numeric: tabular-nums;
}

.pagina-erro__titulo {
    font-size: var(--fonte-xl);
}

.pagina-erro__mensagem {
    max-width: var(--largura-maxima-texto);
    margin-bottom: var(--esp-3);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-md);
}

/* --------------------------------------------------------------------------
   Vitrine do design system (/ui-kit)
   --------------------------------------------------------------------------
   Tela de desenvolvimento. Nao vai ao ar em producao.
   -------------------------------------------------------------------------- */

.ui-kit__cabecalho {
    padding-block: var(--esp-8) var(--esp-6);
    border-bottom: var(--borda-fina) solid var(--cor-borda);
}

.ui-kit__titulo {
    font-size: var(--fonte-2xl);
}

.ui-kit__descricao {
    max-width: var(--largura-maxima-texto);
    margin-top: var(--esp-2);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-md);
}

.ui-kit__sumario {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    margin-top: var(--esp-5);
}

.ui-kit__secao {
    padding-block: var(--esp-8);
    border-bottom: var(--borda-fina) solid var(--cor-borda);
}

.ui-kit__secao:last-child {
    border-bottom: 0;
}

.ui-kit__nome-secao {
    display: flex;
    align-items: baseline;
    gap: var(--esp-3);
    margin-bottom: var(--esp-2);
}

.ui-kit__numero {
    color: var(--cor-accent-texto);
    font-size: var(--fonte-xs);
    font-weight: var(--peso-forte);
    font-variant-numeric: tabular-nums;
}

.ui-kit__nota {
    max-width: var(--largura-maxima-texto);
    margin-bottom: var(--esp-5);
    color: var(--cor-texto-terciario);
    font-size: var(--fonte-sm);
}

.ui-kit__amostra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-5);
    border: var(--borda-fina) dashed var(--cor-borda);
    border-radius: var(--raio-md);
    background-color: var(--cor-superficie-afundada);
}

.ui-kit__amostra--pilha {
    flex-direction: column;
    align-items: stretch;
}

/* Grade de cor. Cada amostra mostra o nome do token, nao o hex: o hex e
   detalhe de implementacao e muda entre os temas. */
.ui-kit__cores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-minima-amostra-cor)), 1fr));
    gap: var(--esp-3);
}

.ui-kit__cor {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
}

.ui-kit__cor-bloco {
    height: var(--esp-12);
    border: var(--borda-fina) solid var(--cor-borda);
    border-radius: var(--raio-md);
}

.ui-kit__cor-nome {
    font-family: var(--familia-mono);
    font-size: var(--fonte-2xs);
    color: var(--cor-texto-secundario);
    overflow-wrap: anywhere;
}

/* Escala tipografica e de espacamento. */
.ui-kit__linha-escala {
    display: flex;
    align-items: baseline;
    gap: var(--esp-4);
    padding-block: var(--esp-2);
    border-bottom: var(--borda-fina) solid var(--cor-borda);
}

.ui-kit__linha-escala:last-child {
    border-bottom: 0;
}

.ui-kit__token-nome {
    flex: 0 0 var(--largura-rotulo-token);
    font-family: var(--familia-mono);
    font-size: var(--fonte-2xs);
    color: var(--cor-texto-terciario);
}

.ui-kit__barra-espaco {
    height: var(--esp-3);
    border-radius: var(--raio-sm);
    background-color: var(--cor-accent);
}

/* --------------------------------------------------------------------------
   Acesso (entrar, cadastrar, senha)
   -------------------------------------------------------------------------- */

.pagina-acesso {
    padding-block: var(--esp-12);
}

.pagina-acesso__cabecalho {
    margin-bottom: var(--esp-5);
}

.pagina-acesso__cartao {
    gap: var(--esp-5);
}

.pagina-acesso__formulario {
    display: flex;
    flex-direction: column;
    gap: var(--esp-4);
}

.pagina-acesso__atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-sm);
}

/* --------------------------------------------------------------------------
   Gestao
   -------------------------------------------------------------------------- */

.gestao-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    margin-top: var(--esp-4);
}

.gestao-subnav__item {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque-minimo);
    padding-inline: var(--esp-3);
    border: var(--borda-fina) solid var(--cor-borda);
    border-radius: var(--raio-md);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-sm);
    text-decoration: none;
}

.gestao-subnav__item:hover {
    border-color: var(--cor-borda-forte);
    color: var(--cor-texto);
}

.gestao-subnav__item[aria-current='page'] {
    border-color: var(--cor-accent-borda);
    background-color: var(--cor-accent-suave);
    color: var(--cor-accent-texto);
}

.card-gestao__valor {
    font-size: var(--fonte-2xl);
    font-weight: var(--peso-forte);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--espaco-letra-titulo);
}

.gestao-definicao {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
}

.gestao-definicao div {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
}

.gestao-definicao dt {
    color: var(--cor-texto-terciario);
    font-size: var(--fonte-xs);
    font-weight: var(--peso-semi);
}

.gestao-definicao dd {
    font-size: var(--fonte-sm);
}

.gestao-lista-simples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-2);
    margin-top: var(--esp-4);
    padding: 0;
    padding-inline-start: 0;
    list-style-type: none;
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-sm);
}

.gestao-lista-simples > li {
    display: flex;
    list-style-type: none;
}

.gestao-lista-simples > li::marker {
    content: none;
}

.gestao-migracoes {
    display: flex;
    flex-direction: column;
    gap: var(--esp-4);
    list-style: none;
    padding: 0;
}

.gestao-migracoes__cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
}

.gestao-migracoes__data {
    color: var(--cor-texto-terciario);
    font-size: var(--fonte-xs);
    font-variant-numeric: tabular-nums;
}