/* ==========================================================================
   Fundo em malha clara, só em azuis (RF-29). Usado pelo login e pelas páginas de erro.
   Camadas grandes e difusas (raios largos, paradas longas, opacidade baixa) sobre off-white;
   o azul do painel aparece só como um toque no canto inferior direito. Nenhuma borda dura.
   Tokens próprios desta identidade; o resto do painel segue o app.css.
   ========================================================================== */
:root {
    --malha-base: #F7F9FE;
    --malha-azul-muito-claro: #E6EEFC;
    --malha-azul-claro: #C9DAF8;
    --malha-tinta-suave: #5B6B85;
    --malha-vidro: rgba(255, 255, 255, .62);
    --malha-vidro-forte: rgba(255, 255, 255, .78);
    --malha-vidro-fraco: rgba(255, 255, 255, .5);
    --malha-vidro-opaco: #FAFCFF;
    --malha-borda-vidro: rgba(255, 255, 255, .85);
    --malha-borda-card: rgba(255, 255, 255, .96);
    --malha-blur: 20px;
    --malha-sombra: rgba(30, 82, 168, .14);
    --malha-sombra-forte: rgba(30, 82, 168, .22);
    --malha-sombra-suave: rgba(30, 82, 168, .1);
    --malha-contorno-card: rgba(30, 82, 168, .07);
    --malha-brilho: rgba(255, 255, 255, .95);
    --malha-brilho-baixo: rgba(201, 218, 248, .45);
    /* Campos do login: borda fina e clara; o foco usa os tokens do app.css */
    --malha-campo: rgba(255, 255, 255, .7);
    --malha-campo-foco: rgba(255, 255, 255, .95);
    --malha-campo-borda: rgba(30, 82, 168, .22);
    --malha-campo-borda-hover: rgba(30, 82, 168, .4);
    --malha-campo-sombra: rgba(30, 82, 168, .04);
    --malha-campo-realce: rgba(255, 255, 255, .8);
    --malha-hover-suave: rgba(201, 218, 248, .45);
    /* Botão do login */
    --malha-botao-brilho: rgba(45, 113, 228, .45);
    --malha-botao-brilho-forte: rgba(45, 113, 228, .55);
    --malha-botao-realce: rgba(255, 255, 255, .25);
    --malha-botao-realce-forte: rgba(255, 255, 255, .3);
}

body.pagina-malha {
    position: relative;
    min-height: 100vh; min-height: 100dvh;
    color: var(--cor-texto);
    background-color: var(--malha-base);
    overflow-x: hidden;
}

/* A malha vive num pseudo-elemento fixo e maior que a janela, estático (sem animação). */
body.pagina-malha::before {
    content: "";
    position: fixed; inset: -18%;
    z-index: -1;
    pointer-events: none;
    background-image:
        /* toque do primário, bem difuso, no canto inferior direito */
        radial-gradient(ellipse 60% 62% at 92% 94%,
            color-mix(in srgb, var(--cor-destaque) 26%, transparent) 0%,
            color-mix(in srgb, var(--cor-destaque) 10%, transparent) 45%,
            transparent 100%),
        /* azul claro no canto inferior direito */
        radial-gradient(ellipse 70% 70% at 88% 88%,
            var(--malha-azul-claro) 0%,
            color-mix(in srgb, var(--malha-azul-claro) 55%, transparent) 50%,
            transparent 100%),
        /* respiro azul muito claro no alto à direita */
        radial-gradient(ellipse 56% 50% at 80% 14%,
            color-mix(in srgb, var(--malha-azul-muito-claro) 90%, transparent) 0%,
            transparent 100%),
        /* off-white nos cantos da esquerda */
        radial-gradient(ellipse 52% 44% at 12% 90%,
            var(--malha-base) 0%,
            color-mix(in srgb, var(--malha-base) 60%, transparent) 40%,
            transparent 100%),
        radial-gradient(ellipse 46% 40% at 12% 12%,
            var(--malha-base) 0%,
            color-mix(in srgb, var(--malha-base) 60%, transparent) 42%,
            transparent 100%),
        /* o corpo azul muito claro que sustenta o centro */
        radial-gradient(ellipse 92% 82% at 50% 50%,
            var(--malha-azul-muito-claro) 0%,
            color-mix(in srgb, var(--malha-azul-muito-claro) 70%, transparent) 55%,
            transparent 100%);
}

/* Vidro claro: fundo, borda e desfoque num lugar só. Quem usa define raio, sombra e tamanho. */
.vidro {
    background: var(--malha-vidro);
    border: 1px solid var(--malha-borda-vidro);
    -webkit-backdrop-filter: blur(var(--malha-blur)) saturate(145%);
    backdrop-filter: blur(var(--malha-blur)) saturate(145%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vidro { background: var(--malha-vidro-opaco); }
}

.pagina-malha .conteudo { max-width: none; padding: 0; }
.pagina-malha .toasts { top: var(--esp-4); }

@media (max-width: 640px) {
    .pagina-malha .toasts { right: var(--esp-4); left: var(--esp-4); }
}