/* =====================================================================
   A MOLDURA DOS DIÁLOGOS DO CAVIÚNA — título, linha, conteúdo e rodapé.

   Todo diálogo do sistema tem a mesma cara: o título em cima, SEPARADO DO CONTEÚDO POR UMA
   LINHA, e o Sair vermelho embaixo, à direita. É o arranjo da lupa (CavBuscaListaConteudo)
   e das telas do Gerencial, e é o que o operador aprende uma vez.

   O padrão do MudBlazor não desenha a linha: o título e o conteúdo ficam colados, e num
   diálogo cheio — uma ficha de animal com quatro caixas, um talhão com gráficos — não se
   distingue o nome do registro do primeiro campo dele.

   USO: <MudDialog Class="cav-dialogo"> ... </MudDialog>

   POR QUE AQUI, E NÃO NUM .razor.css DE CADA DIÁLOGO:

   São três diálogos hoje (consulta de animais, ficha do animal, detalhe do talhão) e a
   conta só cresce. Cada um com a sua cópia das mesmas quatro medidas significa que o
   primeiro ajuste em um deles abre a diferença — e diferença entre diálogos do mesmo
   sistema é exatamente o que este arquivo existe para impedir.

   É o mesmo acordo do menu-caviuna.css e do campos-caviuna.css: regra que precisa alcançar
   markup de mais de um componente sai do .razor.css e vem para cá.

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

/* ------------------------------------------------------------------ o título

   A LINHA embaixo do título é o ponto deste arquivo. Borda, e não margem: aqui ela separa
   duas coisas de naturezas diferentes — a identificação do registro e o conteúdo dele —, e
   é o mesmo traço que o CavGrupo usa para fechar um assunto.

   O corpo menor e o peso 600 são os do cabeçalho de grupo do menu e do CavGrupo: título de
   diálogo não é manchete, é etiqueta do que está embaixo. */
.cav-dialogo .mud-dialog-title {
    padding: 12px 20px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cav-dialogo .mud-dialog-title,
.cav-dialogo .mud-dialog-title .mud-typography {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* O X de fechar acompanha o título mais baixo, em vez de flutuar acima da linha. */
.cav-dialogo .mud-dialog-title .mud-button-root {
    top: 6px;
}

/* ------------------------------------------------------------------ o conteúdo

   O recheio é o mesmo dos lados do título, para o conteúdo nascer alinhado com ele. O
   padding-top dá o espaço do rótulo flutuante do primeiro campo, que é desenhado ACIMA da
   borda dele — encostado na linha, ele sairia aparado pela metade. */
.cav-dialogo .mud-dialog-content {
    padding: 14px 20px 12px;
}

/* ------------------------------------------------------------------ o rodapé

   O SAIR FICA EMBAIXO, À DIREITA, e separado por uma linha como o título.

   As duas linhas juntas é o que dá ao diálogo a forma de três faixas — quem é, o que tem,
   o que dá para fazer — em vez de um bloco só de texto. */
.cav-dialogo .mud-dialog-actions {
    gap: 6px;
    padding: 10px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Diálogo que põe o Sair DENTRO do conteúdo — porque o rodapé dele leva mais coisa, como a
   paginação da consulta de animais — não ganha a segunda linha: ela cairia no meio do
   conteúdo, abaixo de um rodapé que já se separa sozinho. */
.cav-dialogo-sem-rodape .mud-dialog-actions {
    display: none;
}

/* ═══════════════════════════════════════════════════ NO CELULAR ═══

   Vale para o diálogo do talhão, que é o do Mapa — uma das duas telas que precisam
   funcionar no celular.

   O RECHEIO ENCOLHE PORQUE ELE CUSTA LARGURA. Os 20px de cada lado somam 40px, e numa tela
   de 360px é mais de um décimo do que existe — tirados do conteúdo, que é justamente quem
   está apertado. 12px continuam separando o texto da borda sem parecer colado. */
@media (max-width: 600px) {
    .cav-dialogo .mud-dialog-title {
        padding: 10px 12px 8px;
    }

    .cav-dialogo .mud-dialog-content {
        padding: 12px;
    }

    /* AS AÇÕES QUEBRAM EM LINHAS, E CADA UMA OCUPA O QUE PRECISA.

       São até quatro botões — Ver animais, Editar, Desvincular e Sair — e eles não cabem
       numa linha de 336px. Sem o wrap, o MudBlazor os espremia até o texto sumir; com ele,
       descem para a linha de baixo inteiros.

       Continuam encostados à direita, e o Sair continua sendo o último: a posição é o que
       a mão decora, e ela não pode mudar entre o computador e o celular. */
    .cav-dialogo .mud-dialog-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        padding: 10px 12px;
    }

    /* O diálogo usa quase a tela inteira. O padrão do MudBlazor deixa margens generosas
       que fazem sentido num monitor e viram desperdício num celular — e o que sobra de
       largura é exatamente o que falta para uma grade não precisar rolar. */
    .cav-dialogo {
        margin: 12px;
        max-width: calc(100vw - 24px);
    }
}