/* =====================================================================
   componentes.css — blocos reutilizáveis (BEM simplificado)
   Nenhum valor de cor, espaço ou tipo escrito à mão: tudo vem de tokens.
   Animações complexas ficam no Anime.js; aqui só micro-feedback.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Cartão de superfície
   --------------------------------------------------------------------- */

.cartao {
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-lg);
    padding: var(--esp-5);
    box-shadow: var(--sombra-sm);
}

.cartao--plano {
    box-shadow: none;
}

.cartao--destaque {
    border-color: color-mix(in srgb, var(--acento) 40%, transparent);
    background-color: var(--acento-suave);
}

.cartao__titulo {
    font-size: var(--texto-lg);
    font-weight: var(--peso-semi);
    color: var(--texto-forte);
}

.cartao__meta {
    margin-block-start: var(--esp-1);
    font-size: var(--texto-sm);
    color: var(--texto-fraco);
}

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: var(--alvo-toque);
    padding: var(--esp-3) var(--esp-5);
    border: 1px solid transparent;
    border-radius: var(--raio-pilula);
    background-color: var(--acento);
    color: var(--acento-texto);
    font-size: var(--texto-md);
    font-weight: var(--peso-semi);
    letter-spacing: var(--tracking-normal);
    text-align: center;
    text-decoration: none;
    /* Rótulo em uma linha só. Com --raio-pilula (999px), um rótulo
       quebrado em três linhas fazia o botão virar um círculo deformado —
       era o caso de "Voltar ao ciclo" nos cards de leech. */
    white-space: nowrap;
    transition: background-color var(--dur-rapida) var(--ease-padrao),
        opacity var(--dur-rapida) var(--ease-padrao);
}

.botao:hover {
    background-color: var(--acento-hover);
    color: var(--acento-texto);
    text-decoration: none;
}

.botao:active {
    opacity: 0.85;
}

.botao:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.botao--bloco {
    width: 100%;
}

.botao--secundario {
    background-color: var(--fundo-elevado);
    border-color: var(--borda-media);
    color: var(--texto-forte);
}

.botao--secundario:hover {
    background-color: var(--fundo-sutil);
    color: var(--texto-forte);
}

.botao--fantasma {
    background-color: transparent;
    color: var(--acento);
}

.botao--fantasma:hover {
    background-color: var(--acento-suave);
    color: var(--acento);
}

.botao--perigo {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--perigo) 45%, transparent);
    color: var(--perigo);
}

.botao--perigo:hover {
    background-color: var(--perigo-suave);
    color: var(--perigo);
}

.botao--pequeno {
    min-height: 34px;
    padding: var(--esp-2) var(--esp-3);
    font-size: var(--texto-sm);
}

/* ---------------------------------------------------------------------
   Formulário
   --------------------------------------------------------------------- */

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

.campo__rotulo {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--texto-suave);
}

.campo__dica {
    font-size: var(--texto-xs);
    color: var(--texto-fraco);
}

.campo__entrada,
.campo__area,
.campo__select {
    width: 100%;
    min-height: var(--alvo-toque);
    padding: var(--esp-3) var(--esp-4);
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda-media);
    border-radius: var(--raio-md);
    color: var(--texto-forte);
    font-size: var(--texto-lg);
    line-height: var(--altura-normal);
    transition: border-color var(--dur-rapida) var(--ease-padrao),
        box-shadow var(--dur-rapida) var(--ease-padrao);
}

.campo__area {
    min-height: 6.5rem;
    line-height: var(--altura-solta);
}

.campo__select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-fraco) 50%),
        linear-gradient(135deg, var(--texto-fraco) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    /* Espaço só pra seta. Antes era --esp-10 e cortava "Toda origem". */
    padding-inline: var(--esp-3) var(--esp-8);
    text-overflow: ellipsis;
}

.campo__entrada::placeholder,
.campo__area::placeholder {
    color: var(--texto-fraco);
}

.campo__entrada:focus,
.campo__area:focus,
.campo__select:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: var(--sombra-foco);
}

/* Grupo de rádios em pílula (origem do card). */
.opcoes {
    display: flex;
    gap: var(--esp-2);
}

.opcoes__item {
    flex: 1 1 0;
}

.opcoes__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.opcoes__rotulo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--alvo-toque);
    padding: var(--esp-2) var(--esp-3);
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda-media);
    border-radius: var(--raio-md);
    color: var(--texto-suave);
    font-size: var(--texto-md);
    font-weight: var(--peso-medio);
    cursor: pointer;
    transition: all var(--dur-rapida) var(--ease-padrao);
}

.opcoes__radio:checked + .opcoes__rotulo {
    background-color: var(--acento-suave);
    border-color: var(--acento);
    color: var(--acento);
}

.opcoes__radio:focus-visible + .opcoes__rotulo {
    box-shadow: var(--anel-foco);
}

/* ---------------------------------------------------------------------
   Alertas
   --------------------------------------------------------------------- */

.alerta {
    display: flex;
    gap: var(--esp-3);
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--raio-md);
    font-size: var(--texto-md);
    line-height: var(--altura-normal);
}

.alerta--erro {
    background-color: var(--perigo-suave);
    color: var(--perigo);
}

.alerta--sucesso {
    background-color: var(--sucesso-suave);
    color: var(--sucesso);
}

.alerta--info {
    background-color: var(--acento-suave);
    color: var(--acento);
}

.alerta--atencao {
    background-color: var(--atencao-suave);
    color: var(--atencao);
}

/* ---------------------------------------------------------------------
   Etiquetas de estado
   --------------------------------------------------------------------- */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    padding: var(--esp-1) var(--esp-2);
    border-radius: var(--raio-sm);
    background-color: var(--fundo-sutil);
    color: var(--texto-suave);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-normal);
    white-space: nowrap;
}

.etiqueta--aprendizado {
    background-color: var(--atencao-suave);
    color: var(--atencao);
}

.etiqueta--graduado {
    background-color: var(--sucesso-suave);
    color: var(--sucesso);
}

.etiqueta--leech {
    background-color: var(--leech-suave);
    color: var(--leech);
}

.etiqueta--inativo {
    background-color: var(--fundo-sutil);
    color: var(--texto-fraco);
}

/* Direção do card: qual habilidade está sendo treinada. */
.etiqueta--reconhecimento {
    background-color: var(--acento-suave);
    color: var(--acento);
}

.etiqueta--producao {
    background-color: var(--leech-suave);
    color: var(--leech);
}

/* ---------------------------------------------------------------------
   Tela de revisão — recall ativo
   --------------------------------------------------------------------- */

.revisao {
    display: flex;
    flex-direction: column;
    gap: var(--esp-5);
}

/* Barra de progresso da sessão. */
.progresso-sessao {
    height: 4px;
    border-radius: var(--raio-pilula);
    background-color: var(--borda-sutil);
    overflow: hidden;
}

.progresso-sessao__barra {
    height: 100%;
    width: 0;
    border-radius: var(--raio-pilula);
    background-color: var(--acento);
}

/* Palco 3D: a perspectiva vive no pai, o giro no filho. */
.palco-card {
    perspective: 1400px;
}

.card-revisao {
    position: relative;
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-xl);
    padding: var(--esp-8) var(--esp-5);
    box-shadow: var(--sombra-md);
    transform-style: preserve-3d;
    will-change: transform;
}

.card-revisao__origem {
    display: flex;
    justify-content: center;
    margin-block-end: var(--esp-6);
}

/* Frase de contexto: é o elemento tipográfico dominante da tela. */
.card-revisao__frase {
    font-family: var(--fonte-display);
    font-size: var(--texto-xl);
    font-weight: var(--peso-medio);
    line-height: var(--altura-solta);
    letter-spacing: var(--tracking-apertado);
    color: var(--texto-forte);
    text-align: center;
    text-wrap: pretty;
}

/* A lacuna que o usuário precisa preencher de cabeça.
   Largura contida: a 390px, uma lacuna larga demais empurra a pontuação
   sozinha pra linha seguinte e a frase perde o ritmo de leitura. */
.lacuna {
    display: inline-block;
    min-width: 3.25rem;
    padding-inline: var(--esp-1);
    border-block-end: 2px solid var(--acento);
    color: transparent;
    letter-spacing: var(--tracking-normal);
    vertical-align: baseline;
}

@media (min-width: 768px) {
    .lacuna {
        min-width: 4.5rem;
        padding-inline: var(--esp-2);
    }
}

/* Pista de significado na direção de PRODUÇÃO.
   Fica acima da frase e num tom diferente: é ponto de partida, não resposta. */
.card-revisao__pista {
    margin-block-end: var(--esp-5);
    padding-block-end: var(--esp-5);
    border-block-end: 1px solid var(--borda-sutil);
    font-family: var(--fonte-display);
    font-size: var(--texto-2xl);
    font-weight: var(--peso-semi);
    letter-spacing: var(--tracking-apertado);
    line-height: var(--altura-apertada);
    color: var(--acento);
    text-align: center;
    text-wrap: balance;
}

/* Chamada da direção de RECONHECIMENTO. */
.card-revisao__pergunta {
    margin-block-start: var(--esp-5);
    font-size: var(--texto-md);
    color: var(--texto-fraco);
    text-align: center;
}

/* Palavra-alvo destacada dentro da frase, no reconhecimento. */
.card-revisao__frase mark {
    background-color: var(--acento-suave);
    color: var(--acento);
    padding-inline: var(--esp-2);
    border-radius: var(--raio-sm);
    font-weight: var(--peso-forte);
}

/* Bloco revelado: palavra, tradução, frase inteira. */
.revelacao {
    margin-block-start: var(--esp-6);
    padding-block-start: var(--esp-6);
    border-block-start: 1px solid var(--borda-sutil);
    text-align: center;
}

.revelacao[hidden] {
    display: none;
}

.revelacao__palavra {
    font-family: var(--fonte-display);
    font-size: var(--texto-3xl);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-apertado);
    color: var(--texto-forte);
}

.revelacao__traducao {
    margin-block-start: var(--esp-2);
    font-size: var(--texto-xl);
    color: var(--acento);
    font-weight: var(--peso-medio);
}

.revelacao__frase {
    margin-block-start: var(--esp-5);
    padding: var(--esp-4);
    background-color: var(--fundo-sutil);
    border-radius: var(--raio-md);
    font-size: var(--texto-md);
    line-height: var(--altura-solta);
    color: var(--texto-suave);
    text-align: start;
}

.revelacao__frase mark {
    background-color: var(--acento-suave);
    color: var(--acento);
    padding-inline: var(--esp-1);
    border-radius: var(--raio-sm);
    font-weight: var(--peso-semi);
}

/* Campo opcional de digitação antes de revelar. */
.tentativa {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    margin-block-start: var(--esp-6);
}

.tentativa__resultado {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    text-align: center;
}

.tentativa__resultado--certo {
    color: var(--sucesso);
}

.tentativa__resultado--errado {
    color: var(--perigo);
}

/* Botões de julgamento: Errei / Difícil / Fácil. */
.julgamento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-2);
}

.julgamento[hidden] {
    display: none;
}

.julgamento__botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-1);
    min-height: 4rem;
    padding: var(--esp-3) var(--esp-2);
    border: 1px solid var(--borda-media);
    border-radius: var(--raio-lg);
    background-color: var(--fundo-superficie);
    font-size: var(--texto-md);
    font-weight: var(--peso-semi);
    color: var(--texto-forte);
    transition: background-color var(--dur-rapida) var(--ease-padrao),
        border-color var(--dur-rapida) var(--ease-padrao);
}

.julgamento__botao span {
    font-size: var(--texto-xs);
    font-weight: var(--peso-normal);
    color: var(--texto-fraco);
}

.julgamento__botao--errei:hover {
    border-color: var(--perigo);
    background-color: var(--perigo-suave);
    color: var(--perigo);
}

.julgamento__botao--dificil:hover {
    border-color: var(--atencao);
    background-color: var(--atencao-suave);
    color: var(--atencao);
}

.julgamento__botao--facil:hover {
    border-color: var(--sucesso);
    background-color: var(--sucesso-suave);
    color: var(--sucesso);
}

/* ---------------------------------------------------------------------
   Estado vazio
   --------------------------------------------------------------------- */

.vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-16) var(--esp-5);
    text-align: center;
}

.vazio__icone {
    width: 56px;
    height: 56px;
    color: var(--borda-forte);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vazio__titulo {
    font-size: var(--texto-xl);
    font-weight: var(--peso-semi);
    color: var(--texto-forte);
}

.vazio__texto {
    max-width: 26rem;
    color: var(--texto-suave);
    font-size: var(--texto-md);
}

/* ---------------------------------------------------------------------
   Card na listagem de Meus Cards
   --------------------------------------------------------------------- */

.card-item {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    padding: var(--esp-4);
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xs);
    /* O rodapé decide o próprio layout pela largura DO CARD, não da tela:
       num grid de 3 colunas o card é estreito mesmo num monitor largo. */
    container-type: inline-size;
}

.card-item--inativo {
    opacity: 0.55;
}

.card-item__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--esp-3);
}

.card-item__front {
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    font-weight: var(--peso-semi);
    color: var(--texto-forte);
    letter-spacing: var(--tracking-apertado);
}

.card-item__back {
    font-size: var(--texto-md);
    color: var(--texto-suave);
}

.card-item__frase {
    font-size: var(--texto-md);
    line-height: var(--altura-solta);
    color: var(--texto-suave);
    font-style: italic;
}

/* Origem em cima, ações embaixo — este é o padrão seguro. Lado a lado,
   um nome de origem longo ("Jogo · Disco Elysium") espremia os botões
   até o --raio-pilula transformá-los em círculos. */
.card-item__rodape {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-3);
    /* Empurra o rodapé pro fim: num grid, frases de tamanhos diferentes
       deixavam os rodapés dos cards vizinhos desalinhados. */
    margin-block-start: auto;
    padding-block-start: var(--esp-3);
    border-block-start: 1px solid var(--borda-sutil);
}

.card-item__acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--esp-2);
    flex-wrap: wrap;
}

/* Só quando o CARD tiver largura de sobra é que vira uma linha só.
   Navegador sem suporte a container query fica no empilhado, que é
   o layout que sempre cabe. */
@container (min-width: 26rem) {
    .card-item__rodape {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------------------
   Barra de filtros
   --------------------------------------------------------------------- */

.filtros {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    margin-block-end: var(--esp-5);
}

.filtros__linha {
    display: flex;
    gap: var(--esp-2);
}

.filtros__linha > * {
    flex: 1 1 0;
    min-width: 0;
}

@media (min-width: 768px) {
    .filtros {
        flex-direction: row;
        align-items: center;
    }

    .filtros__busca {
        flex: 2 1 0;
    }

    .filtros__linha {
        flex: 3 1 0;
    }
}

/* ---------------------------------------------------------------------
   Estatísticas
   --------------------------------------------------------------------- */

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
    padding: var(--esp-4);
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda-sutil);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xs);
}

.stat__valor {
    font-family: var(--fonte-display);
    font-size: var(--texto-2xl);
    font-weight: var(--peso-forte);
    color: var(--texto-forte);
    letter-spacing: var(--tracking-apertado);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat__rotulo {
    font-size: var(--texto-sm);
    color: var(--texto-suave);
}

.stat--acento .stat__valor {
    color: var(--acento);
}

/* ---------------------------------------------------------------------
   Gráfico de barras em CSS puro; a altura é animada pelo Anime.js.
   --------------------------------------------------------------------- */

.grafico {
    display: flex;
    gap: var(--esp-2);
    padding-block-start: var(--esp-5);
}

/* Escala do eixo: sem ela a barra não tem unidade nenhuma. */
.grafico__escala {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    height: 9rem;
    padding-block-end: 1.25rem; /* alinha o "0" com a base das barras */
    font-size: var(--texto-xs);
    color: var(--texto-fraco);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.grafico__colunas {
    display: flex;
    align-items: flex-end;
    gap: var(--esp-1);
    flex: 1 1 auto;
    min-width: 0;
    height: 9rem;
    /* Linha de base e teto, pra leitura das alturas ter referência. */
    border-block-end: 1px solid var(--borda-media);
    background-image: linear-gradient(to bottom, var(--borda-sutil) 1px, transparent 1px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.grafico__coluna {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--esp-1);
    min-width: 0;
    height: 100%;
    /* Espaço reservado pro rótulo, que fica abaixo da linha de base. */
    padding-block-end: 1.25rem;
    position: relative;
}

/* Valor exato acima da barra. No 390px não há largura pra isso. */
.grafico__valor {
    font-size: 0.625rem;
    line-height: 1;
    color: var(--texto-fraco);
    font-variant-numeric: tabular-nums;
    display: none;
}

.grafico__pilha {
    position: relative;
    width: 100%;
    max-width: 2rem;
    height: 0;
    border-radius: var(--raio-sm) var(--raio-sm) 0 0;
    background-color: var(--borda-sutil);
    overflow: hidden;
}

/* Dia sem revisão: um traço fino em vez de nada. Um vão em branco parece
   falha de renderização; o traço comunica "aqui foi zero". */
.grafico__pilha--vazio {
    min-height: 3px;
    background-color: var(--borda-media);
    opacity: 0.5;
}

.grafico__acertos {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    background-color: var(--acento);
}

.grafico__rotulo {
    position: absolute;
    inset-block-end: 0;
    font-size: 0.625rem;
    line-height: 1.25rem;
    color: var(--texto-fraco);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.grafico__data-longa {
    display: none;
}

/* Hoje ganha destaque: é a referência de leitura do gráfico. */
.grafico__coluna--hoje .grafico__rotulo {
    color: var(--acento);
    font-weight: var(--peso-semi);
}

/* A 390px são 14 colunas de ~19px: todo rótulo colidiria com o vizinho.
   Mostramos os pares — assim o último (hoje) sempre aparece. */
@media (max-width: 767px) {
    .grafico__coluna:nth-child(odd) .grafico__rotulo {
        visibility: hidden;
    }
}

@media (min-width: 768px) {
    .grafico__escala,
    .grafico__colunas {
        height: 12rem;
    }

    .grafico__valor {
        display: block;
    }

    .grafico__data-curta {
        display: none;
    }

    .grafico__data-longa {
        display: inline;
    }
}

.grafico__legenda {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    margin-block-start: var(--esp-4);
    padding-block-start: var(--esp-3);
    border-block-start: 1px solid var(--borda-sutil);
    font-size: var(--texto-xs);
    color: var(--texto-suave);
    flex-wrap: wrap;
}

.grafico__chave {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
}

.grafico__chave--fim {
    margin-inline-start: auto;
    color: var(--texto-fraco);
}

.grafico__amostra {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.grafico__amostra--acertos {
    background-color: var(--acento);
}

.grafico__amostra--erros {
    background-color: var(--borda-sutil);
}

/* ---------------------------------------------------------------------
   Barra de proporção do baralho
   --------------------------------------------------------------------- */

.proporcao__topo {
    display: flex;
    align-items: baseline;
    gap: var(--esp-2);
    margin-block-end: var(--esp-4);
}

.proporcao__total {
    font-family: var(--fonte-display);
    font-size: var(--texto-2xl);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-apertado);
    color: var(--texto-forte);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.proporcao__unidade {
    font-size: var(--texto-md);
    color: var(--texto-suave);
}

.proporcao__barra {
    display: flex;
    height: 12px;
    border-radius: var(--raio-pilula);
    overflow: hidden;
    background-color: var(--borda-sutil);
}

.proporcao__parte {
    height: 100%;
    /* A largura final vem do inline style; o Anime.js anima daqui até lá. */
}

.proporcao__parte--aprendizado {
    background-color: var(--atencao);
}

.proporcao__parte--graduado {
    background-color: var(--sucesso);
}

.proporcao__parte--leech {
    background-color: var(--leech);
}

.proporcao__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3) var(--esp-5);
    margin-block-start: var(--esp-4);
}

.proporcao__item {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--texto-md);
}

.proporcao__ponto {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.proporcao__ponto--aprendizado {
    background-color: var(--atencao);
}

.proporcao__ponto--graduado {
    background-color: var(--sucesso);
}

.proporcao__ponto--leech {
    background-color: var(--leech);
}

.proporcao__rotulo {
    color: var(--texto-suave);
}

.proporcao__numero {
    font-weight: var(--peso-semi);
    color: var(--texto-forte);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Tabela (somente desktop, com edição em massa)
   --------------------------------------------------------------------- */

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-md);
}

.tabela th,
.tabela td {
    padding: var(--esp-3) var(--esp-4);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--borda-sutil);
}

.tabela th {
    position: sticky;
    inset-block-start: 0;
    background-color: var(--fundo-sutil);
    color: var(--texto-suave);
    font-size: var(--texto-xs);
    font-weight: var(--peso-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-largo);
    white-space: nowrap;
}

.tabela th a {
    color: inherit;
}

.tabela tbody tr:hover {
    background-color: var(--fundo-sutil);
}

.tabela tbody tr:last-child td {
    border-block-end: none;
}

/* A frase é a coluna elástica: ela cede espaço para que Estado, Próxima,
   Criado e Ações caibam sem empurrar a tabela pra fora do container. */
.tabela__frase {
    max-width: 16rem;
    color: var(--texto-suave);
    font-style: italic;
}

/* Colunas curtas não quebram linha à toa. */
.tabela__curta {
    white-space: nowrap;
}

.tabela__checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--acento);
    cursor: pointer;
}

/* Barra de ações em massa, revelada pelo Anime.js quando há seleção. */
.acoes-massa {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin-block-end: var(--esp-3);
    padding: var(--esp-3) var(--esp-4);
    background-color: var(--acento-suave);
    border-radius: var(--raio-md);
    font-size: var(--texto-md);
    color: var(--acento);
    opacity: 0;
}

.acoes-massa[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------
   Paginação
   --------------------------------------------------------------------- */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-3);
    margin-block-start: var(--esp-6);
    font-size: var(--texto-md);
    color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   Lista de definição (Perfil)
   --------------------------------------------------------------------- */

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

.dados__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-4);
}

.dados__rotulo {
    font-size: var(--texto-sm);
    color: var(--texto-suave);
}

.dados__valor {
    font-weight: var(--peso-medio);
    color: var(--texto-forte);
    text-align: end;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Cabeçalho das telas de autenticação
   --------------------------------------------------------------------- */

.auth-marca {
    margin-block-end: var(--esp-8);
    text-align: center;
}

.auth-marca__titulo {
    font-size: var(--texto-3xl);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-apertado);
}

.auth-marca__sub {
    margin-block-start: var(--esp-2);
    color: var(--texto-suave);
    font-size: var(--texto-md);
}

.auth-rodape {
    margin-block-start: var(--esp-6);
    text-align: center;
    font-size: var(--texto-md);
    color: var(--texto-suave);
}