.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-medio);
    box-shadow: var(--sombra-cartao);
}

/* Os SVGs usam a cor do elemento que os envolve, acompanhando o tema e os estados da página. */
.icone-svg {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    vertical-align: middle;
    background-color: currentColor;
    /* A máscara desenha o arquivo SVG informado pelo componente criarIconeSvg. */
    -webkit-mask: var(--icone-svg) center / contain no-repeat;
    mask: var(--icone-svg) center / contain no-repeat;
}

/* A versão menor acompanha textos de botões, links e marcadores de conclusão. */
.icone-svg--pequeno {
    width: 16px;
    height: 16px;
}

.botao-primario,
.botao-secundario {
    min-height: 44px;
    padding: var(--espaco-pequeno) var(--espaco-padrao);
    border-radius: 10px;
    font-weight: 700;
    transition: background-color var(--transicao-curta), transform var(--transicao-curta);
    gap: var(--espaco-pequeno);
    text-align: center;
}

.botao-primario {
    background: var(--cor-primaria);
    color: white;
}

.botao-primario:hover {
    background: var(--cor-primaria-hover);
}

.botao-secundario {
    border: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
    color: var(--cor-primaria);
}

.botao-primario:active,
.botao-secundario:active {
    transform: translateY(1px);
}

/* Repete o seletor do login: cápsula com SVGs e destaque no tema ativo. */
.controle-tema {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-padrao);
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--cor-borda);
    border-radius: 24px;
    background: var(--cor-fundo);
    color: var(--cor-texto-secundario);
    flex-shrink: 0;
}

.controle-tema > span {
    display: flex;
}

.controle-tema__sol {
    color: var(--cor-primaria);
}

.controle-tema__divisoria {
    height: 22px;
    border-left: 1px solid var(--cor-borda);
}

:root[data-tema="escuro"] .controle-tema__sol {
    color: var(--cor-texto-secundario);
}

:root[data-tema="escuro"] .controle-tema__lua {
    color: var(--cor-primaria);
}

@media (max-width: 760px) {
    .controle-tema { gap: var(--espaco-controle); padding: 8px 10px; }
    .controle-tema .icone-svg { width: 18px; height: 18px; }
}

.perfil-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--espaco-controle);
}

.perfil-cabecalho__avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria);
    font-weight: 800;
    overflow: hidden;
}

.perfil-cabecalho__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.perfil-cabecalho__nome {
    display: block;
    font-weight: 750;
    font-size: 0.9rem;
}

.perfil-cabecalho__tipo {
    display: block;
    color: var(--cor-texto-secundario);
    font-size: 0.75rem;
    margin-top: 2px;
}

.barra-progresso {
    height: 8px;
    border-radius: 999px;
    background: var(--cor-superficie-secundaria);
    overflow: hidden;
}

.barra-progresso__preenchimento {
    height: 100%;
    border-radius: inherit;
    background: var(--cor-sucesso);
}

.estado-vazio {
    padding: var(--espaco-secao) var(--recuo-cartao);
    text-align: center;
    color: var(--cor-texto-secundario);
    display: grid;
    gap: var(--espaco-controle);
    justify-items: center;
}

.botao-primario,
.botao-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: var(--cursor-interativo, pointer);
}
.botao-primario:disabled,
.botao-secundario:disabled { opacity: .45; cursor: not-allowed; }
.perfil-cabecalho { padding: 4px 6px; border-radius: 12px; transition: background var(--transicao-curta); }
.perfil-cabecalho:hover { background: var(--cor-superficie-secundaria); }

/* Textos compridos podem quebrar sem empurrar cartões e controles. */
.cartao { min-width: 0; }
.botao-primario, .botao-secundario { max-width: 100%; white-space: normal; }
.perfil-cabecalho__avatar { flex-shrink: 0; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; }