/* =====================================================================
   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;
}


/* ---------------------------------------------------------------------
   1.b. O BOTÃO QUE É SÓ O ÍCONE

   Marcado com "cav-botao-icone" pelo CavBotao quando SomenteIcone está ligado. Toda a
   cor, o hover e o desabilitado continuam vindo das regras acima e abaixo — o que muda
   aqui é só a GEOMETRIA: sem texto, o botão tem que ser quadrado, e o MudBlazor não sabe
   disso.

   São três coisas que o MudButton faz para um botão de texto e que estorvam sem ele:

       min-width: 64px    reserva largura para um rótulo que não existe
       padding: 4px 10px  o vão lateral do texto, que sobra dos dois lados do ícone
       gap: 6px           o nosso, do vão ícone/texto — sem texto, é folga à direita

   O RESULTADO É 24px DE LADO, e o número não é escolhido aqui: é a altura dos campos
   (ver campos-caviuna.css). Estes botões vivem ENCOSTADOS em campos — o par de meses fica
   na mesma linha das duas datas do período —, e botão mais alto que o campo ao lado é o
   desalinho que se nota primeiro numa barra.

   A conta: 22px de caixa + 1px de borda de cada lado = 24. Dentro dela, o ícone de 1.1rem
   (~17.6px, da regra acima) fica centrado com ~2px de folga em volta.

   POR QUE NÃO MudIconButton, que já é redondo e quadrado de nascença: ele não é um
   MudButton, então perderia o cav-botao inteiro — a cor da marca no hover, o branco em
   repouso, o tratamento de desabilitado — e, o que é pior, perderia a trava de clique
   duplo do CavBotao. O par de meses é justamente o botão em que se clica rápido, várias
   vezes seguidas, para percorrer o histórico.
   --------------------------------------------------------------------- */
.cav-botao-icone {
    min-width: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
}

/* O gap da regra 1 some: ele existe para separar ícone de texto, e aqui não há texto. */
.cav-botao-icone .mud-button-label {
    gap: 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);
}

/* Azul — o "Consultar" das caixas de filtro, com Estilo="EstiloBotao.Informacao".

   Ele se distingue da barra de gravacao de proposito: Consultar nao altera nada e se
   repete o dia inteiro, entao nao disputa com o grafite do Incluir nem com o verde do OK.

   O tom sai do TemaCaviuna.Azul, e nao do padrao do MudBlazor — aquele (#2196F3) e neon e
   seria o unico botao da tela que se enxerga de longe. Mesmo raciocinio do verde acima.
   Trocar o azul agora e mexer numa constante no tema, e a mudanca acompanha aqui e em
   todo aviso informativo. */
.cav-botao-hover-info:hover:not(:disabled),
.cav-botao-hover-info:focus-visible:not(:disabled) {
    background-color: var(--mud-palette-info);
    border-color: var(--mud-palette-info);
    color: var(--mud-palette-info-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);
}