/* ============================================================
 * ProcBrain — Sistema Inteligente para Procuradorias
 * ============================================================
 * Idealizadores e Desenvolvedores:
 *   Francisco Farias & Diego Bessa
 *
 * Pesquisadores — Mestrado em Computação Aplicada (UnB)
 * Servidores de TI — Procuradoria Geral do Distrito Federal (PGDF)
 *
 * © 2026 ProcBrain GovTech. Todos os direitos reservados.
 * ============================================================ */

        /* Fundo Animado */
        body {
            background-color: #fcfaff;
            background-image:
                radial-gradient(at 10% 20%, rgba(216, 180, 254, 0.2) 0px, transparent 50%),
                radial-gradient(at 90% 10%, rgba(192, 132, 252, 0.15) 0px, transparent 50%),
                radial-gradient(at 50% 50%, rgba(233, 213, 255, 0.2) 0px, transparent 50%),
                radial-gradient(at 80% 90%, rgba(168, 85, 247, 0.1) 0px, transparent 50%);
            background-attachment: fixed;
            color: #1e293b;
        }

        /* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .glass-heavy {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.9);
        }

        .glass-dark {
            background: rgba(59, 7, 100, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Bento Grid */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            auto-rows: minmax(200px, auto);
        }

        .bento-item {
            border-radius: 2rem;
            padding: 2rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .bento-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px 0 rgba(107, 33, 168, 0.12);
        }

        .span-2-col {
            grid-column: span 2;
        }

        .span-2-row {
            grid-row: span 2;
        }

        .span-3-col {
            grid-column: span 3;
        }

        .span-4-col {
            grid-column: span 4;
        }

        @media (max-width: 1024px) {
            .bento-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .span-3-col,
            .span-4-col {
                grid-column: span 2;
            }
        }

        @media (max-width: 640px) {
            .bento-grid {
                grid-template-columns: 1fr;
            }

            .span-2-col,
            .span-3-col,
            .span-4-col {
                grid-column: span 1;
            }

            .span-2-row {
                grid-row: span 1;
            }
        }

        /* Utilitários */
        .mockup-scroll::-webkit-scrollbar {
            width: 6px;
        }

        .mockup-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .mockup-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        .gradient-text {
            background: linear-gradient(135deg, #3b0764, #9333ea);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* SPA Routing System */
        .page {
            display: none;
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
        }

        .page.active {
            display: block;
            opacity: 1;
            animation: fadeIn 0.5s ease forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }