/* ==========================================================================
   componentes.css — componentes canonicos do design system (DESIGN_SYSTEM.md).
   So consome tokens de temas.css; nenhuma cor literal aqui.
   Componente novo entra aqui, no catalogo do DESIGN_SYSTEM.md e na vitrine
   (/admin/design-system) no mesmo commit.
   ========================================================================== */

/* Seletor de tema (Preferencias). Amostras de cor: temas.css (.tema-amostra--*). */
.tema-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    border: 0;
    margin: 0;
    padding: 0;
}

.tema-opcao {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--borda-controle);
    /* reserva: Preferencias e pagina avulsa e nao carrega app.css */
    border-radius: var(--radius-sm, 10px);
    color: var(--texto);
    cursor: pointer;
}

.tema-opcao:has(input:checked) {
    border-color: var(--primaria);
    box-shadow: 0 0 0 1px var(--primaria);
}

.tema-opcao input {
    accent-color: var(--primaria);
}

.tema-amostra {
    display: inline-block;
    width: 2.25rem;
    height: 1.4rem;
    border-radius: 4px;
    border: 1px solid var(--borda-controle);
}

/* Palco do Outie (mascote: cores originais, DESIGN_SYSTEM.md). Envoltorio da
   <img>, nunca a propria imagem: padding nela encolheria o mascote. No GOAT
   Light e um halo translucido (degrade radial que some na borda) e a imagem
   ganha contorno fino (temas.css); fora dele, `display: contents` — sem caixa,
   sem efeito no layout. */
.outie-palco {
    display: var(--outie-palco-display);
    align-items: center;
    justify-content: center;
    background: var(--outie-palco);
    padding: var(--outie-respiro);
    border-radius: 50%;
    vertical-align: middle;
}

/* Outie da pesquisa de satisfacao: sombra propria (no GOAT Light vale o contorno). */
.outie-pesquisa > img {
    filter: var(--outie-sombra-pesquisa);
}

.outie-palco--mini {
    padding: var(--outie-respiro-mini);
}

/* Selo neutro (tipo do chamado e afins): fundo de superficie elevada. */
.badge.selo-neutro {
    background: var(--superficie-2);
    color: var(--selo-neutro-texto);
}

/* Cartao de indicador (dashboard). Vindo de dashboard/index.html, onde se chamava
   .kpi-card: os relatorios tem .kpi-card proprio e nao herdam este. */
.cartao-indicador {
    background: var(--superficie);
    border: 2px solid var(--borda);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
}

.cartao-indicador:hover {
    transform: translateY(-5px);
    border-color: var(--primaria);
    box-shadow: 0 5px 15px var(--cartao-indicador-brilho);
}

/* Clicavel: abre a listagem com o mesmo filtro da contagem. */
a.cartao-indicador {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.cartao-indicador:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 3px;
    border-color: var(--primaria);
}

.cartao-indicador-titulo {
    color: var(--texto);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.cartao-indicador-valor {
    color: var(--primaria-texto);
    font-size: 2.5rem;
    font-weight: bold;
}

.cartao-indicador-icone {
    font-size: 2rem;
    color: var(--primaria-texto);
    margin-bottom: 0.5rem;
}

/* Seletor rapido de tema (menu do usuario e lateral do celular). */
.seletor-tema {
    padding: 0.4rem 1rem 0.6rem;
}

.seletor-tema-rotulo {
    display: block;
    font-size: 0.8rem;
    color: var(--texto-suave);
    margin-bottom: 0.4rem;
}

.seletor-tema-opcoes {
    display: flex;
    gap: 0.4rem;
}

.seletor-tema-form {
    margin: 0;
    flex: 1;
}

.seletor-tema-botao {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    white-space: nowrap;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    color: var(--texto);
    background: transparent;
    border: 1px solid var(--borda-controle);
    border-radius: var(--radius-sm, 10px);
    cursor: pointer;
}

.seletor-tema-botao:hover,
.seletor-tema-botao:focus-visible {
    border-color: var(--primaria);
}

.seletor-tema-botao.ativo {
    border-color: var(--primaria);
    box-shadow: 0 0 0 1px var(--primaria);
    font-weight: 600;
}

.seletor-tema-botao .tema-amostra {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
}