/* ==========================================================================
       DESIGN SYSTEM UNIVERSAL - INSTITUTO DE ARTE E CIDADANIA DO CEARÁ (IAC)
       Refatorado para DRY, CSS Custom Properties e Polimento Estético Premium
       ========================================================================== */

    :root {
        /* Paleta de Cores Institucional */
        --iac-primary-dark: #000f51;       /* Azul Escuro / Fundo Principal */
        --iac-primary-blue: #1e3a8a;       /* Azul Royal */
        --iac-secondary-blue: #3b82f6;     /* Azul de Ação Ativa */
        
        /* Cores de Destaque / Status */
        --iac-accent-green: #10b981;       /* Verde Facilita */
        --iac-accent-green-hover: #059669; /* Hover do Verde */
        --iac-accent-amber: #f59e0b;       /* Alerta Laranja */
        --iac-accent-red: #ef4444;         /* Exclusões / Perigo */
        
        /* Tons Neutros de Fundo e Tipografia */
        --iac-bg-light: #f8fafc;           /* Fundo da Página (Cinza Azulado) */
        --iac-text-dark: #1e293b;          /* Texto Primário */
        --iac-text-muted: #64748b;         /* Texto Secundário */
        
        /* Elevações e Sombras Modernas (Soft Layers) */
        --iac-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
        --iac-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
        --iac-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
        
        /* Layout, Bordas e Movimentos */
        --iac-border-radius: 12px;         /* Cantos arredondados padrão de Cards */
        --iac-border-radius-sm: 8px;       /* Cantos arredondados de Botões e Dropdowns */
        --iac-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Curva de animação orgânica */
        
        /* Gradientes e Alturas */
        --iac-gradient-nav: linear-gradient(135deg, var(--iac-primary-dark) 0%, var(--iac-primary-blue) 100%);
        --iac-nav-height-portal: 120px;
        --iac-nav-height-facilita: 100px;
    }

    /* --- 1. CONFIGURAÇÕES E FLUXO GERAL --- */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        background-color: var(--iac-bg-light);
        color: var(--iac-text-dark);
        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
        /* Garante que a scrollbar sempre ocupe espaço, evitando deslocamento da navbar
           entre páginas com conteúdo longo e curto */
        overflow-y: scroll;
        scrollbar-gutter: stable;
    }

    /* --- 2. PADRONIZAÇÃO DE NAVBARS (Pública & Facilita) --- */
    /* Plano 53, PR 53.1 — o que desta seção ainda vale para quem.
       A barra do portal foi refeita e o desenho dela mora agora em
       `portal/css/navbar-portal.css`, que entra depois deste arquivo. As
       regras abaixo ficaram porque o FACILITA as usa, e apagá-las quebraria a
       barra dele — que esta PR não toca. Conferido com `git grep`:

         `.navbar, .navbar-facilita`, `.navbar .nav-link`,
         `.navbar .nav-link.active`, `.navbar .btn`
             O `<nav>` do Facilita é `class="navbar ... navbar-facilita"`
             (`templates/chamados/base.html:498`): `.navbar` casa com ele.
         `.navbar-brand img`
             `templates/chamados/base.html:501` — a logomarca do Facilita, que
             sobrescreve só a altura (`style="height: 38px"`) e herda daqui o
             `width: auto`, o `object-fit` e a transição.
         `.btn-doe`
             `templates/chamados/base.html:601` — o botão "Portal" da barra do
             Facilita.
         `.btn-facilita`
             `templates/portal/vaga_detalhe.html:251,336,361` — é o botão de
             candidatura e os dois "Entendi" dos modais da vaga. Apesar do
             nome, esta classe deixou de ser da navbar.

       A barra nova não usa nenhuma delas: ela empata em especificidade
       (`.navbar.navbar-portal`) e vence por ordem de origem. */
    .navbar, .navbar-facilita {
        background: var(--iac-gradient-nav) !important;
        box-shadow: var(--iac-shadow-md) !important;
        transition: var(--iac-transition) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        /* Padding fixo garante altura idêntica em todas as páginas */
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    /* Remove a min-height variável — o padding acima é suficiente para consistência */
    .navbar {
        min-height: unset !important;
    }

    .navbar-facilita {
        min-height: var(--iac-nav-height-facilita) !important;
    }

    /* Logo do Portal (Proporções e Ajuste Fino) */
    .navbar-brand img {
        height: 67.5px !important;
        width: auto !important;
        max-height: none !important;
        object-fit: contain;
        transition: var(--iac-transition);
    }

    .navbar-brand img:hover {
        transform: scale(1.02);
    }

    /* Links de Navegação Unificados */
    .navbar .nav-link, .navbar-facilita .nav-link {
        font-family: 'Inter', sans-serif !important;
        font-weight: 500 !important;
        font-size: 0.95rem !important;
        color: #ffffff !important;
        text-decoration: none !important;
        opacity: 1 !important;
        transition: var(--iac-transition);
        padding: 0.5rem 1rem !important;
        position: relative;
        border: 1.5px solid transparent !important;
        border-radius: 20px !important;
        margin: 0 6px !important;
    }

    .navbar .nav-link:hover, .navbar-facilita .nav-link:hover,
    .navbar .nav-link.show, .navbar-facilita .nav-link.show {
        opacity: 1 !important;
        color: var(--iac-accent-green) !important;
        border-color: var(--iac-accent-green) !important;
        transform: translateY(-1px);
        background-color: rgba(16, 185, 129, 0.08) !important;
    }

    .navbar .nav-link.active, .navbar-facilita .nav-link.active {
        opacity: 1 !important;
        background: linear-gradient(135deg, #000f51 0%, #071D41 55%, #0D3272 100%) !important;
        color: #ffffff !important;
        border-radius: 50px !important;
        font-weight: 700 !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        box-shadow: 0 4px 14px rgba(7, 29, 65, 0.35) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }

    /* Plano 53, PR 53.1 — as cinco regras `.navbar-expand-iac` que moravam
       aqui (o `flex-wrap`, a direção do menu, o posicionamento absoluto dos
       dropdowns, o `display: flex` do collapse e o hambúrguer escondido)
       saíram para `portal/css/navbar-portal.css`, onde valem a partir de
       1400px em vez de 1536px. Elas eram exclusivas da barra do portal:
       `git grep navbar-expand-iac` só devolvia este arquivo, o `<nav>` de
       `templates/base.html` e dois testes. O Facilita usa `navbar-expand-xl`,
       classe de verdade do Bootstrap, e não foi tocado.

       O bloco continua existindo por causa das duas regras abaixo, que são do
       hotfix portal 4 e que `portal/tests/test_hotfix_portal_4.py` exige
       literalmente neste arquivo. */
    @media (min-width: 1536px) {
        /* Dropdown hoverável no desktop; abaixo deste breakpoint, clique.

           Hotfix portal 4 (2026-09-15): o combinador aqui era DESCENDENTE
           (`.nav-item.dropdown:hover .dropdown-menu`), então ele também casava
           com o `<ul class="dropdown-menu">` aninhado do submenu "Projetos &
           Programas". Com `display: block !important` ele vencia tanto o
           `display: none` de `.dropdown-submenu > .dropdown-menu` (base.html)
           quanto o `style.display = 'none'` que o JS aplicava — e o submenu
           abria junto com "Atuação". Passou a FILHO DIRETO: só o menu de
           primeiro nível do item da navbar é afetado; o submenu aninhado tem
           regra própria em base.html, presa ao hover sobre ele mesmo ou à
           classe `.show` que o script aplica. */
        .navbar:not(.navbar-facilita) .nav-item.dropdown:hover > .dropdown-menu,
        .navbar:not(.navbar-facilita) .nav-item.dropdown > .dropdown-menu.show {
            display: block !important;
            margin-top: 0;
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
        }
        .navbar:not(.navbar-facilita) .nav-item.dropdown > .dropdown-menu {
            display: block;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: var(--iac-transition);
        }
    }

    @media (min-width: 992px) {
        .navbar-facilita .nav-item.dropdown:hover .dropdown-menu,
        .navbar-facilita .dropdown-menu.show {
            display: block !important;
            margin-top: 0;
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
        }
        .navbar-facilita .dropdown-menu {
            display: block;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: var(--iac-transition);
        }
    }

    /* Plano 53, PR 53.1 — a "Estabilização Segura da Navbar Pública (v2)"
       saiu daqui. Eram dois blocos `@media` que reservavam 445px fixos para
       `.navbar-actions` acima de 1536px e a esticavam para 100% abaixo, com
       um filete branco em cima. Os dois só casavam com
       `.navbar:not(.navbar-facilita) .navbar-actions`, ou seja, só com a
       barra do portal: `git grep navbar-actions` devolve este arquivo,
       `templates/base.html` e os testes — nenhuma tela do Facilita.

       Os 445px eram a largura de quatro botões numa barra azul. A barra nova
       tem três (e "Doe Agora" nem mora mais dentro do grupo de ações), é
       branca, e o filete branco desapareceria sobre ela. O desenho das ações
       está em `portal/css/navbar-portal.css`. */

    .dropdown-menu {
        border-radius: var(--iac-border-radius-sm) !important;
        box-shadow: var(--iac-shadow-lg) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        padding: 0.5rem 0 !important;
    }

    .dropdown-item {
        font-family: 'Inter', sans-serif !important;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--iac-primary-dark) !important;
        transition: var(--iac-transition) !important;
    }

    .dropdown-item:hover {
        background-color: rgba(30, 58, 138, 0.05);
        color: var(--iac-primary-blue) !important;
        padding-left: 1.25rem !important;
    }

    /* --- 3. DESIGN SYSTEM DE BOTÕES --- */
    .navbar .btn, .navbar-facilita .btn {
        font-family: 'Inter', sans-serif !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        padding: 10px 20px !important;
        border-radius: var(--iac-border-radius-sm) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
        transition: var(--iac-transition) !important;
        font-size: 0.92rem !important;
        border: none;
    }

    /* Botão Facilita (Verde Esmeralda Corporativo) */
    .btn-facilita {
        background-color: var(--iac-accent-green) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2) !important;
    }

    .btn-facilita:hover {
        background-color: var(--iac-accent-green-hover) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 14px rgba(16, 185, 129, 0.3) !important;
        color: #ffffff !important;
    }

    /* Botão Doe Agora / Ação Secundária (Borda Branca Elegante) */
    .btn-doe {
        border: 2px solid #ffffff !important;
        color: #ffffff !important;
        background: transparent !important;
    }

    .btn-doe:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-2px) !important;
        border-color: #ffffff !important;
        color: #ffffff !important;
    }

    .btn, .nav-link {
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* --- 4. POLIMENTO DO RODAPÉ (FOOTER) --- */
    footer {
        margin-top: auto !important;
        background: var(--iac-gradient-nav) !important;
        border-radius: 60px 60px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
        font-family: 'Inter', sans-serif;
        transition: var(--iac-transition);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    footer h5 {
        color: #ffffff !important;
        font-weight: 700 !important;
        position: relative;
        padding-bottom: 10px;
        font-family: 'Outfit', sans-serif;
    }

    /* Barra decorativa moderna sob títulos do rodapé */
    footer h5::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 35px;
        height: 3px;
        background-color: var(--iac-accent-green);
        border-radius: 2px;
    }

    footer a {
        transition: var(--iac-transition) !important;
        opacity: 0.8;
    }

    footer a:hover {
        opacity: 1 !important;
        color: var(--iac-accent-green) !important;
        padding-left: 6px;
    }

    /* Ícones Sociais animando no hover */
    footer .hover-opacity-100 {
        transition: var(--iac-transition) !important;
        display: inline-block;
    }

    footer .hover-opacity-100:hover {
        transform: scale(1.2) translateY(-2px);
        opacity: 1 !important;
        color: var(--iac-accent-green) !important;
    }

    /* ── 8. BOTÃO CANÔNICO DA OUVIDORIA (Conformidade de Contraste WCAG AA >= 4.5:1) ── */
    .btn-ouvidoria-submit {
        background: linear-gradient(135deg, #047857 0%, #065f46 100%);
        color: #ffffff;
        border: 1.5px solid rgba(255, 255, 255, 0.35);
        font-family: 'Outfit', sans-serif;
        font-weight: 800;
        font-size: 1.05rem;
        padding: 0.95rem 1.8rem;
        border-radius: 50px;
        box-shadow: 0 8px 25px rgba(4, 120, 87, 0.4);
        transition: var(--iac-transition);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        letter-spacing: 0.3px;
        cursor: pointer;
        text-decoration: none;
    }

    .btn-ouvidoria-submit:hover {
        background: linear-gradient(135deg, #065f46 0%, #064e3b 100%);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(4, 120, 87, 0.55);
        color: #ffffff;
    }

    .btn-ouvidoria-submit:focus-visible {
        outline: 3px solid #34d399;
        outline-offset: 3px;
        box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.45);
    }

    .btn-ouvidoria-submit:active {
        background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
        transform: translateY(0);
        box-shadow: 0 4px 15px rgba(4, 120, 87, 0.4);
        color: #ffffff;
    }

    .btn-ouvidoria-submit:disabled,
    .btn-ouvidoria-submit[disabled] {
        background: #064e3b;
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
        color: #ffffff;
    }