/* =====================================================================
   ALTURA DOS CAMPOS — a métrica única de todos os campos do sistema

   Todo componente de campo do Caviúna (CavCampoTexto, CavBusca, CavCampoData,
   CavCampoHora, CavSelecao) marca seu contêiner com a classe "cav-campo-denso".
   Este arquivo é o único lugar que define a altura deles.

   Por que aqui e não no .razor.css de cada componente: a regra é idêntica nos cinco.
   Repetida em cinco arquivos, na primeira vez que alguém ajustasse um valor os campos
   passariam a ter alturas diferentes — que é exatamente o problema que este arquivo
   existe para não deixar acontecer.

   Por que não é CSS isolado: as regras precisam alcançar o markup que o MudBlazor
   renderiza dentro dos nossos <div>. O ::deep atravessa uma fronteira de componente,
   mas só funciona em arquivo .razor.css — e aí voltaríamos aos cinco arquivos.

   CARREGAR DEPOIS do MudBlazor.min.css (ver index.html).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. MARGEM EXTERNA IGUAL PARA CAMPO COM E SEM RÓTULO

   O MudBlazor dá margens diferentes para os dois casos:

       .mud-input-control-margin-dense                                { margin: 4px 0 }
       .mud-input-control-margin-dense.mud-input-outlined-with-label  { margin-top: 8px;
                                                                       margin-bottom: 4px }

   Com margem assimétrica, o input fica fora do centro da própria caixa. Quando dois
   campos ficam lado a lado e um tem rótulo e o outro não — o caso do CavBusca —, o
   align-items:center alinha as caixas e o conteúdo delas sai desalinhado.

   Os 4px de cima ficam: o rótulo flutuante sobe ~6px sobre a borda quando encolhe, e
   sem folga nenhuma ele invadiria o campo de cima.
   --------------------------------------------------------------------- */
.cav-campo-denso .mud-input-control.mud-input-control-margin-dense,
.cav-campo-denso .mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label {
    margin-top: 2px;
    margin-bottom: 2px;
}


/* ---------------------------------------------------------------------
   1.b. A FONTE

   Este é o maior responsável pela sensação de "tela grande". O MudBlazor usa 1rem
   (16px) no campo, contra os ~11px da tela do desktop — e a fonte não muda só o
   texto: a altura do <input> é "1lh", ou seja, UMA ALTURA DE LINHA. Fonte maior,
   campo mais alto, mesmo com padding zero.

   13px é o meio-termo: aproxima do desktop e continua legível numa tela grande.

   Isto é seguro porque a borda do campo no MudBlazor é um <div> com borda simples —
   não existe <legend> com entalhe calculado a partir do texto do rótulo. O rótulo
   encolhido apenas cobre a linha da borda com o próprio fundo, então mudar o corpo
   da fonte não desalinha nada.
   --------------------------------------------------------------------- */
/* O line-height é declarado junto de propósito. A altura do <input> é "1lh", e o
   MudBlazor não define line-height nenhum — herdava o "normal" do navegador, que varia
   com a família da fonte (~1.15 aqui). Ou seja: a altura do campo dependia da fonte
   instalada, e qualquer conta feita em cima dela saía errada. Fixando em 1.4, a altura
   do campo passa a ser previsível: 18px de linha, que é a primeira parcela dos 24px da
   seção 2. */
.cav-campo-denso .mud-input {
    font-size: .8125rem;
    line-height: 1.4;
}

/* O rótulo precisa deste seletor comprido, e não de um ".cav-campo-denso
   .mud-input-label-inputcontrol" curto. O MudBlazor fixa o corpo dele com

       .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol
       { font-size: 1rem }

   que são três classes. Um seletor de duas classes perde a disputa e o rótulo fica em
   16px dentro de um campo de 13px — grande, desproporcional, e ainda mais fácil de ser
   cortado por falta de largura. Espelhando o caminho e somando o .cav-campo-denso, são
   quatro classes contra três, e a nossa vale. */
.cav-campo-denso .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: .8125rem;
}

/* A caixa de linha do rótulo.

   O MudBlazor reserva 18px, desenhado para um campo de 45px — demais para os nossos 24px.
   Mas 14px, que era o valor aqui, é DE MENOS: o rótulo tem overflow:hidden, e numa caixa
   de 14px para uma fonte de 13px a descida das letras é cortada. "Projeto" perdia o pé do
   j, "Classificação" o da ç.

   16px é o meio-termo: cabe a descida e ainda sobra folga nos 24px do campo.

   Cinco classes: a regra dos 18px tem quatro (a de outlined), então as anteriores, mais
   curtas, não a alcançavam. */
.cav-campo-denso .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    line-height: 16px;
}

/* O ícone acompanha: 24px de lupa dentro de um campo de 24px não caberia. */
.cav-campo-denso .mud-input-adornment .mud-icon-root {
    font-size: 1.1rem;
}


/* ---------------------------------------------------------------------
   1.c. O ÍCONE DO CAMPO NÃO TEM CÍRCULO

   Vale para todos: a lupa do CavBusca, o X do CavCampoTexto, a flecha do CavSelecao.

   O MudBlazor desenha o ícone dentro de um botão redondo — e o redondo é maior que o
   campo. São três coisas somadas:

       .mud-icon-button       { padding: 4px a 6px }   caixa maior que o ícone
       .mud-ripple:hover      { background-color: ... }  o disco cinza ao passar o mouse
       .mud-ripple-icon:after { transform: scale(10, 10) }  o círculo que estufa no clique

   Isso é dimensionado para o campo de 45px do MudBlazor. Nos nossos 24px o disco não
   cabe: ele passa da borda de cima e da de baixo, e o que se vê é um círculo cortado
   atravessando a linha do campo — como se o ícone estivesse solto por cima dele.

   Encolher o disco em vez de removê-lo foi a primeira tentativa e não presta: para caber
   nos 24px ele fica menor que o próprio ícone, e aí é um anel apertado em volta da lupa,
   que parece defeito de renderização em vez de área clicável.

   Então o disco sai e a resposta ao mouse passa a ser a COR do ícone. Não se perde
   informação nenhuma: o cursor já vira mãozinha (a regra do próprio MudBlazor no
   .mud-input-adornment), e o ícone escurecendo diz "isto responde" sem precisar de
   geometria que não cabe.

   O foco por teclado é o único que ganha moldura — um retângulo com offset negativo, que
   desenha para DENTRO e por isso cabe. Tirar a marca de foco junto com o disco deixaria
   quem navega de Tab sem saber onde está.
   --------------------------------------------------------------------- */
.cav-campo-denso .mud-input-adornment .mud-icon-button,
.cav-campo-denso .mud-input-adornment .mud-icon-button:hover,
.cav-campo-denso .mud-input-adornment .mud-icon-button:focus,
.cav-campo-denso .mud-input-adornment .mud-icon-button:active {
    padding: 2px;
    background-color: transparent;
}

/* O círculo que estufa no clique. */
.cav-campo-denso .mud-input-adornment .mud-ripple-icon::after {
    display: none;
}

.cav-campo-denso .mud-input-adornment .mud-icon-button:hover .mud-icon-root {
    color: var(--mud-palette-text-primary);
}

.cav-campo-denso .mud-input-adornment .mud-icon-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: 3px;
}


/* ---------------------------------------------------------------------
   2. A ALTURA — 24px, E É A MESMA EM TODO CAMPO DO SISTEMA

   O "dense" do MudBlazor reserva 10.5px acima e abaixo do texto. Somado à altura de
   linha da fonte, dava um campo de ~45px, contra os ~20px da tela do desktop.

   A CONTA DOS 24px, e ela fecha exata: 18px de linha de texto (13px de fonte × 1.4, da
   seção 1.b) + 2px de folga de cada lado + 1px de borda de cada lado = 24. Mexer em
   qualquer uma das três parcelas muda a altura do campo — por isso a fonte e o
   line-height estão declarados juntos lá em cima, e não espalhados.

   O padding sozinho não chegaria aqui: mais da metade da altura vem da fonte, não da
   folga. E abaixo de 2px o texto encosta na borda de cima antes de o campo encolher.

   São três seletores porque o MudBlazor renderiza três elementos diferentes conforme
   o campo: <input> no texto e nos pickers, <div class="mud-input-slot"> no select, e
   <textarea> no texto de várias linhas — este último posiciona por margin, não padding.
   --------------------------------------------------------------------- */
.cav-campo-denso .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.cav-campo-denso div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* O TEXTAREA NÃO TEM 24px, e não deveria: ele é o campo de várias linhas (a Observação),
   e a altura dele é o número de linhas. O que se iguala aqui é a MOLDURA — os mesmos 2px
   de folga entre a borda e a primeira linha, para a caixa não parecer de outra família. */
.cav-campo-denso .mud-input > textarea.mud-input-root-outlined.mud-input-root-margin-dense {
    margin-top: 2px;
    margin-bottom: 2px;
}


/* ---------------------------------------------------------------------
   3. O RÓTULO EM REPOUSO

   Campo vazio e sem foco: o rótulo fica dentro do campo, posicionado por transform
   com um valor calculado para os 45px originais. Sem reposicionar, ele fica baixo
   dentro do campo novo. 3px é o que centra os 16px de rótulo definidos acima nos 24px
   de campo.

   O estado encolhido não entra aqui: a regra do MudBlazor para ele é mais específica
   (tem um seletor de elemento a mais), e continua colando o rótulo na borda de cima —
   que é o certo, e é o mesmo em qualquer altura de campo.

   VALE CADA VEZ MENOS, e é bom que valha: os campos Cav* passaram a usar ShrinkLabel,
   ou seja, o rótulo deles JÁ NASCE em cima e nunca entra em repouso. Esta regra ficou
   para os campos do MudBlazor usados direto numa tela, sem passar por um Cav* — e para
   eles ela continua sendo o que impede o rótulo de ficar baixo dentro do campo denso.
   --------------------------------------------------------------------- */
.cav-campo-denso .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, 3px) scale(1);
}

/* ---------------------------------------------------------------------
   3.b. A CAIXA DO RÓTULO NÃO INVADE O CAMPO

   O rótulo dos nossos campos está sempre em cima (ShrinkLabel — ver o CavCampoTexto), e
   ele tem FUNDO: é esse fundo que "corta" a borda do campo, para o texto do rótulo não
   passar por cima da linha.

   O MudBlazor dá a esse rótulo line-height: 18px, medida do campo padrão dele (~45px).
   Nos nossos, de 24px, a caixa do fundo desce PARA DENTRO do campo: a borda de baixo
   dela fica sobre o texto, e ao selecionar o conteúdo a seleção aparece por baixo do
   fundo do rótulo — o "De" ficando embolado com o 29/08/2026.

   SÓ A FOLGA VERTICAL SAI. A POSIÇÃO NÃO SE MEXE: quem decide onde o rótulo fica é o
   MudBlazor, e mudar isso aqui o desalinha dos campos que não passam pelo cav-campo-denso
   — e some com a regra no dia em que ele mudar a dele. Já tentei subir o rótulo 3px e
   ficou pior: resolveu a sobreposição e tirou o rótulo do lugar.

   Medido numa réplica com o CSS real do MudBlazor, com a caixa do rótulo contornada: em
   line-height 18px ela invade o campo; em line-height 1 ela para na borda, no mesmo
   lugar de sempre.

   O padding lateral fica (são os 4px que abrem espaço na borda); o vertical é zero — em
   cima e embaixo não há nada para afastar, e era dele que vinha a invasão.

   !important porque a regra do MudBlazor também usa !important no padding. A
   especificidade precisa ser maior que a dele, que usa cinco classes (.mud-shrink ~
   label + quatro) — por isso o seletor repete o dele inteiro com o .cav-campo-denso na
   frente.
   --------------------------------------------------------------------- */
.cav-campo-denso .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    line-height: 1;
    padding: 0 4px !important;
}

/* ---------------------------------------------------------------------
   4. O CAMPO DE DATA

   O CavCampoData é um input[type=date] NATIVO vestido com a aparência do MudBlazor: a
   digitação por blocos (dois dígitos no dia, pula para o mês) E o calendário são os do
   navegador. Um controle só, um ícone só.

   ESTAS REGRAS FICAM AQUI, e não no CavCampoData.razor.css, por um motivo prático: o CSS
   isolado do Blazor não alcança pseudo-elemento do WebKit através do ::deep — as regras
   eram escritas, compilavam, e o navegador as ignorava.

   É o mesmo motivo das regras de altura acima: acerto de medida do MudBlazor mora neste
   arquivo, sem escopo.
   --------------------------------------------------------------------- */

/* O ÍCONE NATIVO SEGUE O TEMA DO SISTEMA.

   color-scheme diz ao navegador em que variante desenhar os controles que são DELE: o
   ícone do calendário e o calendário que ele abre. Em dark o ícone sai branco; em light,
   escuro.

   HERDADO, e nunca fixo em dark. Fixo em dark, o ícone saía BRANCO SOBRE CAMPO BRANCO no
   tema claro — invisível no Chrome, no Edge e no Firefox, e visível só em quem estava com
   o tema escuro. Quem escolhe o tema é o MudThemeProvider, em C#, e o CSS não descobre
   isso sozinho: por isso o valor vem do :root, que a moldura de cada módulo define ao
   carregar e ao trocar de tema — ver js/tema.js.

   É por aqui, e não por filter: invert(), porque quem repinta é o próprio navegador — o
   invert mexeria na cor do texto da data junto. */
input[type="date"] {
    color-scheme: inherit;
}

/* O ícone nativo encostado na borda e do tamanho dos outros ícones da tela: o respiro
   padrão dele, somado ao texto mais largo do campo nativo, estourava os 134px e cortava o
   ano ("07 / 08 / 20:"). */
.cav-data input[type="date"]::-webkit-calendar-picker-indicator {
    /* O TAMANHO DO ÍCONE, para ele não sair aparado.

       O Chrome desenha o botão de calendário na medida dele, maior que os 19px de altura
       que o campo tem para o conteúdo (ver a regra do input, abaixo) — e o que não cabe
       fica cortado. Estes 14px cabem inteiros e ficam do tamanho dos outros ícones da
       linha.

       O ícone DESAPARECE quando o campo está desabilitado, e isso é do navegador: input
       desabilitado não abre calendário. É o que se quer — o formulário fora do Incluir /
       Alterar está todo desabilitado, e o campo de data segue os vizinhos. */
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;

}

/* O input nativo herda a fonte do NAVEGADOR, não a do sistema: sem isto a data aparece
   com outro desenho de letra que o campo ao lado, na mesma linha.

   display: flex + align-items: center é o que ALINHA o texto no meio da altura. O campo
   nativo desenha a data numa caixa própria, encostada no alto, e não obedece ao
   line-height que centraliza os outros campos — o Chrome ignora o line-height dentro de
   um input[type=date]. Sem isto a data fica acima do centro, e a diferença aparece na
   linha em que ela está ao lado de um campo de texto.

   O RECUO É MEDIDO, não herdado. O padrão do MudBlazor é largo demais aqui: com ele, "28
   / 08 / 2026" não cabe nos 134px e o ano sai cortado ("28 / 08 / 202"). Zero também não
   serve — a data fica colada na borda, e desalinhada dos campos vizinhos. Os 6px são o
   meio: dão o recuo que o olho procura e ainda deixam os oito dígitos inteiros.

   O letter-spacing negativo é da mesma conta: o campo nativo escreve com espaço em volta
   das barras, e não há como removê-los — só apertá-los.

   SÓ AS LATERAIS. O padding de cima e de baixo é o do cav-campo-denso — os 2px que dão os
   24px de altura a TODO campo do sistema (seção 2 deste arquivo). Zerar aqui comprime só
   o campo de data, e ele fica mais baixo que o campo ao lado na mesma linha. Quem
   centraliza a data na altura é a altura de conteúdo abaixo, não a falta de padding. */
.cav-data input[type="date"] {
    font-family: inherit;

    /* A MESMA FONTE DOS OUTROS CAMPOS — .8125rem, os 13px da seção 1.b.

       Era o único campo do sistema fora do padrão: 0.92rem são ~14.7px, e a diferença
       aparecia na hora, porque data e hora ficam LADO A LADO na mesma linha (o período da
       caixa Consultar, a data e as horas do formulário). Dois campos encostados com
       corpos de letra diferentes é o tipo de desalinho que se nota sem saber nomear.

       Ela estava maior para compensar o aperto do letter-spacing negativo. Não precisava:
       fonte menor é o que mais ajuda os oito dígitos a caberem nos 134px — foi o motivo
       original do aperto. */
    font-size: .8125rem;
    letter-spacing: -0.02em;

    /* A ALTURA DO CONTEÚDO, na medida de uma linha de texto.

       Um input de texto tem a altura da linha; o campo de data não — ele desenha os
       blocos numa caixa própria, com altura intrínseca maior, e saía mais alto que o
       campo de hora ao lado.

       18px, e não é número redondo por acaso: é a MESMA linha de texto dos outros campos
       (13px × 1.4, da seção 1.b). É isso que faz a data fechar nos 24px da seção 2 junto
       com todo o resto — 18 + 2 + 2 de padding + 1 + 1 de borda.

       content-box de propósito: os 2px do cav-campo-denso SOMAM a esta medida, como somam
       à linha de texto dos outros campos. Com border-box eles entrariam para dentro e o
       campo ficaria comprimido.

       SEM display: flex AQUI. Ele centralizava o texto no Firefox e era ignorado (ou
       tratado de outro jeito) no Chrome e no Edge — o campo saía com espaçamento
       diferente em cada navegador. A centralização vem da altura acima com o padding do
       cav-campo-denso, que é o mesmo mecanismo dos outros campos. */
    height: 18px;
    box-sizing: content-box;
    padding-left: 6px !important;
    padding-right: 2px !important;
    min-width: 0;
}

/* O Chrome desenha os blocos (dia, mês, ano) e os separadores como pedaços próprios; são
   os separadores que trazem a margem que estica o texto.

   Alinhar esta caixa TAMBÉM: ela é filha do input, e centralizar o pai não centraliza o
   texto que ela desenha dentro de si. */
.cav-data input[type="date"]::-webkit-datetime-edit {
    padding: 0;
}

.cav-data input[type="date"]::-webkit-datetime-edit-text {
    padding: 0;
    margin: 0 -1px;
}

.cav-data input[type="date"]::-webkit-datetime-edit-day-field,
.cav-data input[type="date"]::-webkit-datetime-edit-month-field,
.cav-data input[type="date"]::-webkit-datetime-edit-year-field {
    padding: 0;
    margin: 0;
}