/* =====================================================================
   OS BOTÕES DO SISTEMA — brancos parados, coloridos sob o mouse

   Todo CavBotao sai daqui: ele marca a classe "cav-botao" mais uma classe de cor
   ("cav-botao-hover-principal", "-destaque", "-perigo", "-neutro"), e este arquivo
   define as duas coisas.

   POR QUE ASSIM

   Antes cada papel tinha a sua cor parada: Incluir preto, Excluir vermelho, e por aí.
   Numa barra de seis botões — a do CavAcoes — isso são três cores fortes lado a lado
   disputando a atenção o tempo todo, inclusive quando não há nada a decidir. O olho
   acaba filtrando as cores e elas param de significar.

   Brancos em repouso, a barra fica quieta e a cor volta a ser INFORMAÇÃO: ela aparece
   no botão sob o mouse, no instante em que a pessoa está a um clique de agir, e diz o
   que aquele clique é — preto para gravar, vermelho para excluir. É o mesmo caminho do
   desktop, onde os seis botões são caixas cinzentas iguais e o que os diferencia é o
   texto.

   POR QUE NÃO É CSS ISOLADO (.razor.css)

   O CavBotao não tem markup próprio: a raiz dele É o MudButton. Sem um elemento nosso
   em volta, o ::deep não tem em que se ancorar — e envolver o botão numa <span> só para
   isso mudaria como ele se comporta dentro das barras em flex. É o mesmo motivo pelo
   qual a altura dos campos mora no campos-caviuna.css.

   CARREGAR DEPOIS do MudBlazor.min.css (ver index.html).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. O REPOUSO

   Fundo de superfície (branco no tema claro), texto e borda neutros.

   O background é declarado, e não deixado transparente, porque o botão precisa ser
   branco TAMBÉM sobre fundo cinza — dentro de um CavGrupo, de um MudPaper acinzentado,
   de uma barra. Transparente, ele viraria da cor de quem está atrás e a mudança de cor
   no hover perderia o contraste.

   A transição é curta de propósito: o botão tem que responder junto com o mouse. Acima
   de ~150ms a cor "chega atrasada" e a barra parece lenta.
   --------------------------------------------------------------------- */
.cav-botao {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}

/*
   O ÍCONE — tamanho e vão fixos, para QUALQUER ícone que a tela passar em Icone.

   Sem isto, o ícone nasce no tamanho padrão do MudIcon (~24px, pensado para telas de
   dedo) dentro de um botão com texto de 13px (é o .8125rem que o MudBlazor usa no
   Size.Small) — quase o dobro da altura do texto. O resultado é o botão com ícone
   ficando visivelmente mais alto que os sem ícone (compare "+ INCLUIR" com "OK" ou
   "CANCELAR" na mesma barra), e a fileira inteira parece torta, com cada botão numa
   altura.

   1.1rem é o mesmo valor que os campos usam para o ícone de dentro deles (ver a nota em
   campos-caviuna.css) — um tamanho que acompanha o texto sem dominar o botão. Cor
   herdada do texto, e não a própria: sem isso o ícone continuaria colorido no repouso e
   o botão não ficaria branco de verdade.

   É POR ISSO que fica aqui, e não em cada tela: nenhuma tela precisa lembrar de ajustar
   nada — todo CavBotao que ganhar um Icone já nasce no tamanho certo, sozinho.
*/
.cav-botao .mud-icon-root {
    color: inherit;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/*
   O VÃO entre ícone e texto — por gap, e não por margem no ícone.

   O MudBlazor separa os dois com margem no próprio ícone, e com valores pensados para o
   ícone grande dele: -4px de um lado (para "recuperar" espaço) e 8px do outro. Com o
   ícone menor que usamos, essa margem negativa puxava o ícone para a borda e os 8px
   sobravam do outro lado — o texto ficava visivelmente descolado do ícone.

   Zerar aquelas margens e deixar o espaçamento com o gap do flex resolve os dois lados
   de uma vez, e vale igual para ícone no início e no fim, sem precisar de um valor para
   cada caso.

   SOBRE OS SELETORES: os três nomes de classe não são enfeite. O MudBlazor tem uma regra
   de MESMA força para o tamanho pequeno —

       .mud-button-label .mud-button-icon-start.mud-button-icon-size-small

   — e um seletor nosso mais curto perdia dela em silêncio: era por isso que o vão
   continuava errado mesmo com a regra escrita aqui. Empatando em número de classes, quem
   ganha é quem carrega depois, e este arquivo carrega depois do MudBlazor.min.css.

   E é "margin: 0", e não "margin-left: 0": o MudBlazor declara as margens também na
   forma lógica (margin-inline-start/end), que sobrescreve a física quando vem depois. O
   atalho zera as duas de uma vez.
*/
.cav-botao .mud-button-label {
    gap: 6px;
}

.cav-botao .mud-button-label .mud-button-icon-start,
.cav-botao .mud-button-label .mud-button-icon-end {
    margin: 0;
}


/* ---------------------------------------------------------------------
   2. O HOVER

   Uma classe por cor, e a cor vem SEMPRE da paleta do tema — nunca hexadecimal solto
   aqui dentro. Trocar a cor da marca no TemaCaviuna.cs muda os botões junto.

   O :not(:disabled) é o que impede o botão desabilitado de responder ao mouse. Sem ele,
   Alterar e Excluir acendiam vermelho e preto durante a inclusão, prometendo um clique
   que não acontece.

   O :focus-visible vai junto do :hover para quem navega de teclado ver a mesma cor que
   o mouse mostra — a informação é a mesma, e chegar de Tab não é motivo para perdê-la.
   --------------------------------------------------------------------- */
.cav-botao-hover-principal:hover:not(:disabled),
.cav-botao-hover-principal:focus-visible:not(:disabled) {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.cav-botao-hover-destaque:hover:not(:disabled),
.cav-botao-hover-destaque:focus-visible:not(:disabled) {
    background-color: var(--mud-palette-secondary);
    border-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

.cav-botao-hover-perigo:hover:not(:disabled),
.cav-botao-hover-perigo:focus-visible:not(:disabled) {
    background-color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

/* Verde — hoje só o "OK" que fecha um lançamento usa Estilo="EstiloBotao.Sucesso".
   Incluir e Salvar continuam com EstiloBotao.Principal (preto): são o mesmo PAPEL do
   OK, ação principal da tela, mas sem o "está tudo certo, pode seguir" que o OK tem.

   O tom sai do TemaCaviuna.Verde — um verde dessaturado, escolhido para não gritar ao
   lado do grafite. Chegou a apontar para "tertiary", que NÃO está declarado no nosso
   tema: aquilo caía no verde-água padrão do MudBlazor, uma cor que ninguém escolheu.
   Trocar o verde agora é mexer numa constante no tema, e a mudança acompanha aqui e em
   todo aviso de sucesso. */
.cav-botao-hover-sucesso:hover:not(:disabled),
.cav-botao-hover-sucesso:focus-visible:not(:disabled) {
    background-color: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

/* Neutro: para Cancelar e Sair, que não têm cor própria. Escurece a superfície em vez
   de inventar uma cor — "isto responde ao clique" sem afirmar o que o clique faz. */
.cav-botao-hover-neutro:hover:not(:disabled),
.cav-botao-hover-neutro:focus-visible:not(:disabled) {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}


/* ---------------------------------------------------------------------
   3. DESABILITADO

   O MudBlazor já apaga o texto do botão desabilitado, mas com o fundo declarado acima
   ele continuaria branco e sólido, com a mesma presença de um botão que funciona. O
   fundo neutro e a borda apagada dizem "existe, mas não agora" — que é a informação de
   metade dos botões da barra em qualquer momento.
   --------------------------------------------------------------------- */
.cav-botao:disabled {
    background-color: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-action-disabled);
}
