/* ============================================================
   SISPROTOCOLO — Estilos Customizados
   Responsividade: xs < 576 | sm 576 | md 768 | lg 992 | xl 1200
   Acessibilidade: WCAG 2.1 AA
   ============================================================ */

/* ════════════════════════════════════════════════
   TOKENS / VARIÁVEIS
   ════════════════════════════════════════════════ */
:root {
    color-scheme: light dark;
    /* ── Cor primária única do sistema ── */
    --azul-pref:      #1565c0;   /* azul escuro legível — contraste 5.9:1 no branco */
    --azul-escuro:    #0d47a1;
    --azul-claro:     #e3edf8;
    --azul-foco:      #1565c0;
    --page-px:        1.5rem;
    --radius-card:    12px;
    --radius-btn:     8px;
    --touch-min:      44px;   /* tamanho mínimo de alvo tátil WCAG 2.5.5 */
    --transition:     150ms ease;
    --sombra-card:    0 2px 12px rgba(0,0,0,.10);
    --sombra-hover:   0 6px 24px rgba(0,0,0,.14);
    --cor-texto:      #1e293b;
    --cor-muted:      #64748b;
    --cor-borda:      #d1d5db;
    --cor-fundo:      #f1f5f9;

    /* ── Bootstrap: cor primária unificada (Bootstrap 5.3 lê estas vars) ── */
    --bs-primary:            #1565c0;
    --bs-primary-rgb:        21, 101, 192;
    --bs-link-color:         #1565c0;
    --bs-link-color-rgb:     21, 101, 192;
    --bs-link-hover-color:   #0d47a1;
}

/* ════════════════════════════════════════════════
   ACESSIBILIDADE — TAMANHO DE FONTE (WCAG 1.4.4)
   Controlado pelos botões A- / A+ na navbar.
   Altera o font-size base do HTML; todo o sistema
   escala automaticamente (tudo usa rem).
   ════════════════════════════════════════════════ */
html                        { font-size: 16px; }
html[data-fonte="pequeno"]  { font-size: 13px; }
html[data-fonte="grande"]   { font-size: 19px; }
html[data-fonte="xgrande"]  { font-size: 22px; }

/* ════════════════════════════════════════════════
   ACESSIBILIDADE — ALTO CONTRASTE (WCAG 1.4.3)
   Ativado pelo botão ◑ na navbar.
   Garante contraste ≥ 7:1 em fundo escuro/texto
   claro com destaques em amarelo.
   ════════════════════════════════════════════════ */
[data-contraste="alto"] {
    --cor-fundo:   #000000;
    --cor-texto:   #ffffff;
    --cor-muted:   #dddddd;
    --cor-borda:   #ffffff;
    --azul-claro:  #001a4d;
    --bs-body-color:       #ffffff;
    --bs-body-bg:          #000000;
    --bs-link-color:       #ffff00;
    --bs-link-hover-color: #ffdd00;
}
[data-contraste="alto"] body {
    background: #000 !important;
    color: #fff !important;
}
[data-contraste="alto"] a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}
[data-contraste="alto"] a:hover { color: #ffdd00 !important; }

[data-contraste="alto"] .card,
[data-contraste="alto"] .modal-content,
[data-contraste="alto"] .dropdown-menu,
[data-contraste="alto"] .list-group-item,
[data-contraste="alto"] .input-group-text {
    background: #111 !important;
    color: #fff !important;
    border-color: #fff !important;
}
[data-contraste="alto"] .card-header,
[data-contraste="alto"] .card-footer {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #fff !important;
}
[data-contraste="alto"] .form-control,
[data-contraste="alto"] .form-select {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}
[data-contraste="alto"] .form-control::placeholder { color: #aaa !important; }

[data-contraste="alto"] .btn-primary {
    background: #0055ff !important;
    border-color: #fff !important;
    color: #fff !important;
}
[data-contraste="alto"] .btn-outline-primary {
    color: #66aaff !important;
    border-color: #66aaff !important;
}
[data-contraste="alto"] .btn-outline-secondary {
    color: #ccc !important;
    border-color: #ccc !important;
}
[data-contraste="alto"] .table {
    --bs-table-color: #fff;
    --bs-table-bg: #000;
    --bs-table-border-color: #fff;
    color: #fff !important;
    border-color: #fff !important;
}
[data-contraste="alto"] .table-light { --bs-table-bg: #1a1a1a !important; }
[data-contraste="alto"] th,
[data-contraste="alto"] td { border-color: #fff !important; }
[data-contraste="alto"] .badge { border: 1px solid currentColor !important; }
[data-contraste="alto"] .badge.bg-light { background: #333 !important; color: #fff !important; }
[data-contraste="alto"] .text-muted { color: #ddd !important; }

[data-contraste="alto"] .alert          { border-width: 2px !important; }
[data-contraste="alto"] .alert-success  { background: #003300 !important; color: #00ff88 !important; border-color: #00ff88 !important; }
[data-contraste="alto"] .alert-danger   { background: #330000 !important; color: #ff7777 !important; border-color: #ff7777 !important; }
[data-contraste="alto"] .alert-warning  { background: #332200 !important; color: #ffcc00 !important; border-color: #ffcc00 !important; }
[data-contraste="alto"] .alert-info     { background: #001133 !important; color: #66ccff !important; border-color: #66ccff !important; }

[data-contraste="alto"] .site-footer    { background: #000 !important; border-top: 2px solid #fff !important; }
[data-contraste="alto"] .navbar         { border-bottom: 2px solid #fff !important; }

/* Destaque visual no botão quando o contraste está ativo */
[data-contraste="alto"] #btnContraste {
    background: rgba(255,255,0,.25) !important;
    border-color: #ffff00 !important;
    color: #ffff00 !important;
}
/* Destaque no botão de fonte no nível máximo/mínimo */
#btnDiminuirFonte:disabled,
#btnAumentarFonte:disabled {
    opacity: .35;
    cursor: default;
}

/* ════════════════════════════════════════════════
   ACESSIBILIDADE — SKIP LINK
   ════════════════════════════════════════════════ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 99999;
    background: var(--azul-pref);
    color: #fff;
    padding: .6rem 1.2rem;
    border-radius: 0 0 var(--radius-btn) var(--radius-btn);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: top .2s;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════
   VLIBRAS — evitar que o botão flutuante cubra o menu mobile
   O VLibras (script oficial do Governo Federal) usa z-index altíssimo por
   padrão e fica sempre por cima de tudo — inclusive do menu hamburguer
   aberto em telas estreitas, atrapalhando a leitura. O JS (app.js) marca o
   <body> com a classe abaixo enquanto o menu está aberto, e escondemos o
   VLibras só nesse momento (volta a aparecer normal ao fechar o menu).
   ════════════════════════════════════════════════ */
body.menu-mobile-aberto div[vw] {
    display: none !important;
}

/* ════════════════════════════════════════════════
   ACESSIBILIDADE — FOCO GLOBAL
   Garante indicador de foco visível em todos os
   elementos interativos (WCAG 2.4.7 / 2.4.11)
   ════════════════════════════════════════════════ */
:focus-visible {
    outline: 3px solid var(--azul-foco);
    outline-offset: 3px;
    border-radius: 4px;
}
/* Remove outline padrão do mouse mas mantém para teclado */
:focus:not(:focus-visible) { outline: none; }

/* ════════════════════════════════════════════════
   REDUCED MOTION (WCAG 2.3.3)
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:       .01ms !important;
        animation-iteration-count: 1    !important;
        transition-duration:      .01ms !important;
        scroll-behavior:          auto  !important;
    }
}

/* ════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Trava de segurança: impede que qualquer elemento largo demais (tabela,
   imagem, texto sem quebra, etc.) empurre a página inteira para o lado e
   crie uma faixa em branco à direita — mantém o site 100% dentro da tela
   em qualquer tamanho. Quem precisa de rolagem própria (tabelas grandes)
   já usa .table-responsive, que tem overflow-x próprio abaixo. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
    font-size: .92rem;
    color: var(--cor-texto);
    line-height: 1.6;
    background: var(--cor-fundo);
}

img { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════════
   TIPOGRAFIA — tamanhos uniformes em todo o sistema
   Bootstrap usa h1=2.5rem por padrão; aqui normalizamos
   para um sistema de gestão profissional.
   ════════════════════════════════════════════════ */
h1, .h1 { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
h2, .h2 { font-size: 1.2rem;  font-weight: 700; line-height: 1.3; }
h3, .h3 { font-size: 1.1rem;  font-weight: 600; line-height: 1.4; }
h4, .h4 { font-size: 1rem;    font-weight: 600; line-height: 1.4; }
h5, .h5 { font-size: .95rem;  font-weight: 600; line-height: 1.4; }
h6, .h6 { font-size: .9rem;   font-weight: 600; line-height: 1.4; }

/* Subtítulo de página (texto abaixo do título principal) */
.page-subtitle { font-size: .82rem; color: var(--cor-muted); margin-top: .15rem; }

/* Texto do corpo: padrão uniforme */
p, li, td, th, dd, dt { font-size: .92rem; }
.small, small         { font-size: .8rem; }
.text-muted           { font-size: inherit; }

/* Leitores de tela — visível só para SR */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════ */
.navbar-brand img { max-height: 28px; }
.navbar .nav-link {
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
}
.navbar .dropdown-item {
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
}
.navbar .dropdown-item:focus-visible {
    background: var(--azul-claro);
    color: var(--azul-pref);
}

/* ════════════════════════════════════════════════
   BUSCA — esconder por breakpoint
   Alinhado com o "navbar-expand-xxl" do header.php (1400px) — abaixo disso
   a navbar vira menu-sanduíche, então usa a busca "mobile" embutida na lista.
   ════════════════════════════════════════════════ */
.navbar .input-group { min-width: 0 !important; }

@media (max-width: 1399.98px) {
    #searchWidget { display: none !important; }
    .navbar-collapse .busca-mobile { display: block; }
}
@media (min-width: 1400px) {
    .busca-mobile { display: none !important; }
}

/* ════════════════════════════════════════════════
   CONTAINERS — padding adaptativo
   ════════════════════════════════════════════════ */
.container-fluid.px-4 {
    padding-left:  var(--page-px) !important;
    padding-right: var(--page-px) !important;
}

/* ════════════════════════════════════════════════
   CAMPOS DE TEXTO — ESTILO PROFISSIONAL
   ════════════════════════════════════════════════ */
.form-control,
.form-select {
    border-color: var(--cor-borda);
    border-radius: var(--radius-btn);
    padding: .55rem .85rem;
    font-size: .9rem;
    background-color: #fafbfc;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
    min-height: var(--touch-min);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--azul-pref);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(21,101,192,.15);
    outline: none;
}
/* Alto contraste no placeholder (WCAG 1.4.3) */
.form-control::placeholder { color: #8896ab; font-style: italic; font-size: .875rem; }

textarea.form-control {
    line-height: 1.7;
    font-family: inherit;
    resize: vertical;
    min-height: 90px;
}
textarea.autoresize {
    resize: none;
    overflow: hidden;
    min-height: 100px;
}

.form-label {
    font-weight: 500;
    color: var(--cor-texto);
    margin-bottom: .35rem;
}
/* Asterisco de obrigatório acessível */
.form-label .req {
    color: #dc2626;
    margin-left: .2rem;
    aria-hidden: true;
}

/* Cabeçalho de campo + contador */
.field-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .4rem;
    gap: .5rem;
}
.field-header .form-label { margin-bottom: 0; }

.char-counter { font-size: .72rem; color: #9ca3af; white-space: nowrap; flex-shrink: 0; transition: color .2s; }
.char-counter.warn { color: #f59e0b; font-weight: 600; }
.char-counter.over  { color: #ef4444; font-weight: 600; }

.form-control[type="file"] { background: #f8fafc; cursor: pointer; padding: .45rem .75rem; }
.form-control[type="file"]:hover { border-color: var(--azul-pref); }

/* Filtros — tamanho compacto */
.form-control-sm, .form-select-sm {
    padding: .3rem .6rem;
    font-size: .82rem;
    border-radius: 6px;
    min-height: 36px;
}

/* Input-group com ícone */
.input-group .input-group-text {
    background: #f1f5f9;
    border-color: var(--cor-borda);
    border-radius: var(--radius-btn) 0 0 var(--radius-btn);
    color: var(--cor-muted);
}
.input-group .form-control { border-radius: 0 var(--radius-btn) var(--radius-btn) 0 !important; }

/* ════════════════════════════════════════════════
   BOTÕES — tamanho de toque WCAG 2.5.5
   ════════════════════════════════════════════════ */
.btn {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-radius: var(--radius-btn);
    font-weight: 500;
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:active { transform: scale(.97); }
.btn-sm     { min-height: 36px; min-width: 36px; font-size: .82rem; }
.btn-lg     { min-height: 52px; }

/* Borda de foco nos botões (WCAG 2.4.7) */
.btn:focus-visible {
    outline: 3px solid var(--azul-foco);
    outline-offset: 3px;
}

/* ════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════ */
.card {
    border-radius: var(--radius-card);
    box-shadow: var(--sombra-card);
    border: 1px solid rgba(0,0,0,.06);
    transition: box-shadow var(--transition);
}
.card-stat {
    border: none;
    border-radius: var(--radius-card);
    transition: transform var(--transition), box-shadow var(--transition);
}
.card-stat:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.card-stat .icon-circle {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}

/* ════════════════════════════════════════════════
   CABEÇALHOS DE PÁGINA
   ════════════════════════════════════════════════ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.page-header h1, .page-header h2, .page-header h5 { margin-bottom: 0; }

/* ════════════════════════════════════════════════
   TABELAS — acessíveis e responsivas
   ════════════════════════════════════════════════ */
.table {
    --bs-table-hover-bg: #f0f4ff;
}
.table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cor-muted);
    font-weight: 700;
    white-space: nowrap;
}
.table td { vertical-align: middle; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Cabeçalho de tabela: foco no th sortável */
.table th[role="columnheader"]:focus-visible {
    outline: 2px solid var(--azul-foco);
    outline-offset: -2px;
}

/* ════════════════════════════════════════════════
   BADGES E STATUS
   ════════════════════════════════════════════════ */
.badge { font-size: .72rem; font-weight: 600; letter-spacing: .02em; }

/* ════════════════════════════════════════════════
   PROTOCOLO CARD
   ════════════════════════════════════════════════ */
.protocolo-card {
    border-left: 4px solid var(--azul-pref);
    transition: box-shadow var(--transition);
    border-radius: var(--radius-card);
}
.protocolo-card:hover { box-shadow: var(--sombra-hover); }
.protocolo-card.urgente   { border-left-color: #e53935; }
.protocolo-card.sigiloso  { border-left-color: #424242; }

/* ════════════════════════════════════════════════
   NÚMERO DO PROTOCOLO
   ════════════════════════════════════════════════ */
.numero-protocolo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--azul-pref);
    letter-spacing: .04em;
    background: var(--azul-claro);
    padding: .5rem 1.25rem;
    border-radius: var(--radius-btn);
    display: inline-block;
}

/* ════════════════════════════════════════════════
   TIMELINE
   ════════════════════════════════════════════════ */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
    content: '';
    position: absolute; left: 12px; top: 0; bottom: 0;
    width: 2px; background: #dee2e6;
}
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-dot {
    position: absolute; left: -28px; top: 4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--azul-pref); border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--azul-pref);
}
.timeline-dot.concluido  { background: #2e7d32; box-shadow: 0 0 0 2px #2e7d32; }
.timeline-dot.indeferido { background: #c62828; box-shadow: 0 0 0 2px #c62828; }

/* ════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════ */
.login-icon {
    animation: pulse 2.5s infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}

/* ════════════════════════════════════════════════
   COOKIES BANNER — acessível
   ════════════════════════════════════════════════ */
#cookieBanner { line-height: 1.5; }
#cookieBanner .container-fluid { align-items: flex-start !important; }

/* ════════════════════════════════════════════════
   CABEÇALHO / RODAPÉ DE IMPRESSÃO — ocultos na tela
   ════════════════════════════════════════════════ */
.print-header,
.print-footer,
.no-screen { display: none; }

/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
.site-footer {
    margin-top: auto;
    padding: .85rem 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}

/* ════════════════════════════════════════════════
   MODAL — acessível
   ════════════════════════════════════════════════ */
.modal-content { border-radius: var(--radius-card); border: none; }
.modal-header  { border-radius: var(--radius-card) var(--radius-card) 0 0; }

/* ════════════════════════════════════════════════
   SCROLLBAR PERSONALIZADA (desktop)
   ════════════════════════════════════════════════ */
@media (min-width: 992px) {
    ::-webkit-scrollbar       { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: #f1f1f1; }
    ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #999; }
}

/* ════════════════════════════════════════════════
   UTILITÁRIOS
   ════════════════════════════════════════════════ */
.text-break-all    { word-break: break-all; }
.text-truncate-2   { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gap-xs            { gap: .25rem !important; }
.cursor-pointer    { cursor: pointer; }

/* ════════════════════════════════════════════════
   TRANSIÇÕES GLOBAIS
   ════════════════════════════════════════════════ */
.card, .btn, .nav-link { transition: all var(--transition); }

/* ════════════════════════════════════════════════
   ██  RESPONSIVIDADE  ██
   ════════════════════════════════════════════════ */

/* ── XS: < 576px (celulares pequenos) ───────────── */
@media (max-width: 575.98px) {
    :root { --page-px: .75rem; }

    /* Navbar */
    .navbar-brand span  { font-size: .82rem; }

    /* Página: padding reduzido */
    .container-fluid.px-4 { padding-left: .75rem !important; padding-right: .75rem !important; }
    .px-4 { padding-left: .75rem !important; padding-right: .75rem !important; }
    .py-4 { padding-top:  1rem  !important; padding-bottom: 1rem  !important; }

    /* Cards */
    .card-body.p-4     { padding: 1rem !important; }
    .card-body.p-3     { padding: .75rem !important; }
    .card-header.py-3  { padding-top: .75rem !important; padding-bottom: .75rem !important; }

    /* Cabeçalhos de página — empilha vertical */
    .page-header       { flex-direction: column !important; align-items: flex-start !important; }
    .page-header > div { width: 100%; }
    .page-header .btn  { width: 100%; justify-content: center; }

    .d-flex.align-items-center.justify-content-between.mb-4,
    .d-flex.align-items-center.justify-content-between.mb-3 {
        flex-wrap: wrap !important; gap: .75rem !important;
    }
    .d-flex.align-items-center.justify-content-between.mb-4 > div:last-child,
    .d-flex.align-items-center.justify-content-between.mb-3 > div:last-child {
        width: 100%;
    }
    .d-flex.align-items-center.justify-content-between.mb-4 > div:last-child .btn,
    .d-flex.align-items-center.justify-content-between.mb-4 > div:last-child a.btn {
        width: 100%; justify-content: center;
    }

    /* Tabelas */
    .table th, .table td { white-space: nowrap; font-size: .78rem; }
    .table td .small     { font-size: .72rem !important; }

    /* Botões side-by-side → fullwidth */
    .d-flex.gap-2 > .btn { flex: 1; font-size: .8rem; }
    .btn-sm { padding: .35rem .6rem !important; font-size: .78rem !important; }

    /* Badges */
    .badge { font-size: .65rem !important; }

    /* Protocolo card */
    .protocolo-card .d-flex.justify-content-between { flex-direction: column !important; gap: .4rem !important; }
    .protocolo-card .d-flex.gap-2.flex-wrap > .btn   { font-size: .78rem !important; }

    /* Stats cards: 2 por linha */
    .row.g-3 > .col-6, .row.g-4 > .col-6 { width: 50% !important; }
    .card-stat .icon-circle { width: 40px !important; height: 40px !important; font-size: 1.2rem !important; }
    .card-stat h3   { font-size: 1.3rem !important; }
    .card-stat small { font-size: .68rem !important; }

    /* Filtros de formulário */
    .card-body form.row          { row-gap: .5rem !important; }
    .card-body form .col-md-4,
    .card-body form .col-md-2,
    .card-body form .col-md-3    { min-width: 100%; }
    .card-body form .col-auto    { width: 100%; }
    .card-body form .col-auto .btn { width: 100%; margin-left: 0 !important; }
    .form-select-sm, .form-control-sm { font-size: .82rem !important; }

    /* Modal */
    .modal-dialog  { margin: .5rem !important; }
    .modal-body    { padding: 1rem !important; }
    .modal-footer  { gap: .5rem !important; padding: .75rem 1rem !important; }
    .modal-footer .btn { flex: 1; }

    /* Accordion */
    .accordion-body { padding: .75rem !important; }

    /* Cookie banner */
    #cookieBanner { padding: 1rem !important; }
    #cookieBanner .container-fluid { flex-direction: column !important; gap: .75rem !important; }
    #cookieBanner .d-flex.gap-2.flex-shrink-0 { width: 100%; justify-content: flex-end; }

    /* Footer */
    .site-footer .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: .25rem !important;
        text-align: center;
    }

    /* Breadcrumb */
    .breadcrumb { font-size: .75rem !important; flex-wrap: wrap !important; }
    .breadcrumb-item + .breadcrumb-item::before { padding: 0 .3rem !important; }

    /* Número de protocolo menor */
    .numero-protocolo { font-size: 1.1rem; padding: .4rem .9rem; }

    /* Timeline */
    .timeline { padding-left: 22px; }
    .timeline-dot { left: -18px; }

    /* Card-header com form → empilha verticalmente */
    .card-header .d-flex.align-items-center.justify-content-between { flex-direction: column !important; align-items: stretch !important; }
    .card-header .d-flex.align-items-center.gap-3 { justify-content: space-between; }

    /* Tabela no dashboard: oculta coluna "setor" para ganhar espaço */
    .table th:nth-child(4), .table td:nth-child(4) { display: none; }

    /* Botão fullwidth dentro de card-header no XS */
    .card-header .btn-danger.btn-sm { width: 100%; justify-content: center; }

    /* Dropdown da topbar no login: painel ocupa tela toda */
    .func-panel { left: 8px !important; right: 8px !important; width: auto !important; }

    /* Stats: ícone ainda menor para caber 2 por linha */
    .card-stat .card-body { padding: .6rem !important; }
    .card-stat .icon-circle { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
    .card-stat .fw-bold.fs-4 { font-size: 1.2rem !important; }
    .card-stat .text-muted.small { font-size: .7rem !important; }
}

/* ── Extra-pequeno: < 400px (Galaxy A, iPhone SE, etc.) ─────── */
@media (max-width: 399.98px) {
    :root { --page-px: .5rem; }

    .navbar-brand span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .btn { font-size: .78rem !important; padding: .4rem .6rem !important; }
    .btn-sm { font-size: .72rem !important; padding: .28rem .5rem !important; min-height: 32px !important; min-width: 32px !important; }

    /* Número de protocolo compacto */
    .numero-protocolo { font-size: .95rem; padding: .35rem .75rem; letter-spacing: .02em; }

    /* Empilha qualquer d-flex com gap grande */
    .d-flex.gap-3 { gap: .5rem !important; }
    .d-flex.gap-2 { gap: .35rem !important; }

    /* Badge menor ainda */
    .badge { font-size: .6rem !important; }

    /* Modais: sem margem lateral */
    .modal-dialog { margin: .2rem !important; }
    .modal-body { padding: .75rem !important; }
    .modal-header { padding: .65rem .75rem !important; }
    .modal-footer { padding: .5rem .75rem !important; }
}

/* ── SM: 576–767px (celulares grandes / tablet retrato pequeno) ── */
@media (min-width: 576px) and (max-width: 767.98px) {
    :root { --page-px: 1rem; }

    .page-header { flex-wrap: wrap; gap: .5rem; }

    .card-stat .icon-circle { width: 46px; height: 46px; font-size: 1.4rem; }

    /* Filtros: 2 colunas */
    .card-body form .col-md-4 { flex: 0 0 50%; max-width: 50%; }
    .card-body form .col-md-2,
    .card-body form .col-md-3 { flex: 0 0 50%; max-width: 50%; }
}

/* ── MD: 768–991px (tablets) ─────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root { --page-px: 1.25rem; }

    .navbar-brand span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Tabelas: scroll horizontal */
    .table-responsive { overflow-x: auto; }

    /* Stats: 3 por linha */
    .card-stat { min-height: 100px; }
}

/* ── LG: 992–1199px (notebooks menores) ─────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Navbar: menos espaço para itens */
    .navbar .nav-link { padding: .5rem .55rem; font-size: .85rem; }
    .navbar .dropdown-menu { font-size: .85rem; }
}

/* ── XL+: ≥ 1200px (desktops) ───────────────────── */
@media (min-width: 1200px) {
    .container-xl { max-width: 1320px; }
}

/* ── Sticky/positional em tablets e menores ─────── */
@media (max-width: 991.98px) {
    [style*="position:sticky"] { position: relative !important; top: auto !important; }
}

/* ── Mega-menu Administração: âncora ao canto esquerdo do navbar ─── */
/* data-bs-display="static" desativa o Popper.js.                        */
/* Breakpoint alinhado com "navbar-expand-xxl" (1400px) do header.php.   */
/*
   IMPORTANTE — por que a posição (position/top/left) NÃO é definida aqui:
   a barra de navegação usa "position: sticky" (fica fixa no topo ao rolar).
   Isso faz o navegador tratar a barra como uma "camada" própria — qualquer
   coisa DENTRO dela que se estenda além da altura da página (páginas curtas,
   como o Painel) fica presa nessa camada e não é desenhada na tela, mesmo
   com a barra tendo prioridade de sobreposição (z-index) maior que o resto
   da página. Testado e confirmado (07/07/2026): nem aumentar a prioridade,
   nem trocar position:absolute por position:fixed resolviam sozinhos — só
   funciona tirando o menu de dentro da <nav> de verdade. Por isso o
   posicionamento real (position:fixed + top + left) agora é feito via
   JavaScript (assets/js/app.js), que "teleporta" o menu pra fora da barra
   quando ele abre. Aqui ficam só a aparência e o limite de altura. */
@media (min-width: 1400px) {
    .mega-nav-admin {
        position: static !important;
    }
    .dropdown-menu-mega {
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
        /* Corrige o menu "cortado": o próprio menu rola por dentro quando
           for mais alto que a tela, nunca passando da barra de navegação. */
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
    }
}

/* ── Mega-menu dentro do navbar colapsado (mobile/tablet/notebook) ─── */
@media (max-width: 1399.98px) {
    /* Remove min-width fixo que causava overflow horizontal */
    .dropdown-menu-mega                        { min-width: 0 !important; width: 100% !important; }
    /* Desfaz o grid de 3 colunas: empilha verticalmente */
    .dropdown-menu-mega .row.g-0,
    .dropdown-menu-mega > .row                 { display: flex !important; flex-direction: column !important; min-width: 0 !important; width: 100% !important; }
    .dropdown-menu-mega [class*="col-"]        { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
    /* Cabeçalho de seção do mega-menu no mobile */
    .dropdown-menu-mega [style*="font-size:.68rem"] { display: none; } /* oculta sub-títulos de coluna — espaço curto */
    /* Dropdown dentro do navbar colapsado: sem sombra e sem posição flutuante */
    .navbar-collapse .dropdown-menu            { box-shadow: none; border: none; background: rgba(0,0,0,.18) !important; border-radius: 0 !important; }
    .navbar-collapse .dropdown-item            { color: rgba(255,255,255,.85) !important; }
    .navbar-collapse .dropdown-item:hover,
    .navbar-collapse .dropdown-item:focus      { background: rgba(255,255,255,.12) !important; color: #fff !important; }
    .navbar-collapse .mega-title               { color: rgba(255,255,255,.9) !important; }
    .navbar-collapse .mega-desc                { color: rgba(255,255,255,.55) !important; }
    .navbar-collapse .dropdown-divider         { border-color: rgba(255,255,255,.12) !important; }
    .navbar-collapse .mega-header              { border-radius: 0 !important; }
}

/* ── Tablet MD: 768–991px ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Card-headers com form + botão → empilha em duas linhas */
    .card-header .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }
}

/* ── Telefones SM: 576–767px ──────────────────────────────── */
@media (max-width: 767.98px) {
    /* Chatbot: sobe um pouco para não sobrepor badge ANC */
    /* (posição real fica no chatbot.js, aqui só as páginas) */

    /* Tabelas em cards de admin: reduz padding de células */
    .card-body .table-sm td,
    .card-body .table-sm th          { padding: .3rem .45rem !important; }

    /* Cabeçalho de card com form (limpar-banco, setores etc.) */
    .card-header .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap !important;
        row-gap: .4rem !important;
    }
    .card-header .d-flex.align-items-center.gap-3 { flex-wrap: wrap; gap: .4rem !important; }

    /* Página de login: topbar ocupa menos espaço */
    .topbar .btn-func span { display: none; }   /* oculta texto, mantém ícone */

    /* Modais: ocupa quase toda a tela */
    .modal-dialog { margin: .35rem !important; }

    /* Evita overflow em flex-headers dentro de cards */
    .card-header.d-flex                          { flex-wrap: wrap !important; }
    .card-header .fw-semibold                    { min-width: 0; flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════
   ALTO CONTRASTE (prefers-contrast: more)
   WCAG 1.4.3 — contraste mínimo 4.5:1
   ════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
    :root {
        --cor-borda:  #000;
        --cor-muted:  #444;
    }
    .form-control, .form-select { border-width: 2px; }
    .badge { outline: 1px solid currentColor; }
    .btn   { border-width: 2px !important; }
}

/* ════════════════════════════════════════════════
   MODO ESCURO — ativado pelo botão na navbar

   Paleta única (não usar outras cores fora daqui):
     TEXTO    #e2e8f0 principal · #94a3b8 muted · #cbd5e1 labels
     FUNDO    #0f172a página · #1e293b card · #263348 elevado
     BORDA    #334155
     LINK     #60a5fa
   ════════════════════════════════════════════════ */
[data-theme="dark"] {

    /* ── Corpo ── */
    body                              { background: #0f172a !important; color: #e2e8f0; }

    /* ── Superfícies (cards, painéis) ── */
    .card                             { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    .card-header                      { background: #263348 !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    .card-header.bg-white,
    .card-header.bg-light             { background: #263348 !important; color: #e2e8f0 !important; }
    .card-body                        { color: #e2e8f0 !important; }
    .card-footer                      { background: #263348 !important; border-color: #334155 !important; color: #94a3b8 !important; }

    /* ── Tabelas ── */
    .table                            { --bs-table-bg: #1e293b; --bs-table-hover-bg: #263348; color: #e2e8f0; border-color: #334155; }
    .table thead th,
    .table-light                      { background: #263348 !important; color: #94a3b8 !important; border-color: #334155 !important; }
    .table td, .table th              { color: #e2e8f0 !important; }
    .table a                          { color: #60a5fa !important; }
    .table .text-muted                { color: #94a3b8 !important; }
    .table-bordered                   { border-color: #334155 !important; }
    .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #263348; }

    /* ── Formulários ── */
    .form-control, .form-select       { background: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; }
    .form-control:focus,
    .form-select:focus                 { background: #263348 !important; color: #e2e8f0 !important; border-color: #60a5fa !important; box-shadow: 0 0 0 .2rem rgba(96,165,250,.25) !important; }
    .form-control:disabled,
    .form-select:disabled              { background: #131f33 !important; color: #64748b !important; }
    .form-control::placeholder         { color: #64748b !important; }
    .input-group-text                  { background: #263348 !important; color: #94a3b8 !important; border-color: #475569 !important; }
    .form-label, .form-check-label     { color: #cbd5e1 !important; }
    .form-check-input                  { background-color: #1e293b !important; border-color: #475569 !important; }
    .form-check-input:checked          { background-color: #3b82f6 !important; border-color: #3b82f6 !important; }
    .form-text                         { color: #94a3b8 !important; }

    /* ── Modais ── */
    .modal-content                     { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
    .modal-header, .modal-footer       { background: #263348 !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    .modal-title                       { color: #e2e8f0 !important; }
    .btn-close                         { filter: invert(1) grayscale(1); }

    /* ── Dropdowns (todos os menus do header) ── */
    .dropdown-menu                     { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; }
    .dropdown-item                     { color: #e2e8f0 !important; background: transparent !important; }
    .dropdown-item:hover,
    .dropdown-item:focus               { background: #263348 !important; color: #e2e8f0 !important; }
    .dropdown-item.active,
    .dropdown-item:active              { background: #1d4ed8 !important; color: #fff !important; }
    .dropdown-item.text-danger         { color: #f87171 !important; }
    .dropdown-divider                  { border-color: #334155 !important; }
    .dropdown-header                   { color: #94a3b8 !important; }
    /* Mega-menu: .mega-title herda color do .dropdown-item pai (corrigido em header.php) */
    .mega-item:hover                   { background: #263348 !important; }

    /* ── Navegação — abas (nav-tabs) ── */
    .nav-tabs                          { border-color: #334155 !important; }
    .nav-tabs .nav-link                { color: #94a3b8 !important; border-color: transparent !important; }
    .nav-tabs .nav-link:hover          { color: #e2e8f0 !important; border-color: #334155 #334155 transparent !important; background: #263348 !important; }
    .nav-tabs .nav-link.active         { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 #334155 #1e293b !important; }

    /* ── Navegação — pills (nav-pills) ── */
    .nav-pills .nav-link               { color: #94a3b8 !important; }
    .nav-pills .nav-link:hover         { background: #263348 !important; color: #e2e8f0 !important; }
    .nav-pills .nav-link.active        { background: #1d4ed8 !important; color: #fff !important; }

    /* ── Breadcrumb ── */
    .breadcrumb                        { background: #1e293b !important; border-color: #334155 !important; }
    .breadcrumb-item                   { color: #94a3b8 !important; }
    .breadcrumb-item a                 { color: #60a5fa !important; }
    .breadcrumb-item.active            { color: #e2e8f0 !important; }
    .breadcrumb-item + .breadcrumb-item::before { color: #475569 !important; }

    /* ── Acordeão ── */
    .accordion-item                    { background: #1e293b !important; border-color: #334155 !important; }
    .accordion-button                  { background: #263348 !important; color: #e2e8f0 !important; box-shadow: none !important; }
    .accordion-button:not(.collapsed)  { background: #2d3f58 !important; color: #e2e8f0 !important; }
    .accordion-button::after           { filter: invert(1); }
    .accordion-body                    { background: #1e293b !important; color: #e2e8f0 !important; }

    /* ── Alertas ── */
    .alert-light                       { background: #263348 !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    .alert-secondary                   { background: #263348 !important; border-color: #475569 !important; color: #e2e8f0 !important; }
    .alert-info                        { background: #0c3455 !important; border-color: #1d4ed8 !important; color: #bfdbfe !important; }
    .alert-warning                     { background: #3d2000 !important; border-color: #92400e !important; color: #fde68a !important; }
    .alert-danger                      { background: #3d0808 !important; border-color: #991b1b !important; color: #fecaca !important; }
    .alert-success                     { background: #042010 !important; border-color: #166534 !important; color: #bbf7d0 !important; }

    /* ── Badges ── */
    .badge.bg-light                    { background: #334155 !important; color: #e2e8f0 !important; }
    .badge.bg-light.text-dark          { color: #e2e8f0 !important; }
    .badge.bg-warning                  { color: #1a1a1a !important; }
    .badge.bg-primary, .badge.bg-success,
    .badge.bg-danger,  .badge.bg-info,
    .badge.bg-secondary, .badge.bg-dark { color: #fff !important; }

    /* ── Utilitários de fundo e texto ── */
    .bg-light                          { background: #1e293b !important; }
    .bg-white                          { background: #1e293b !important; }
    .bg-body                           { background: #0f172a !important; }
    .text-muted                        { color: #94a3b8 !important; }
    .text-dark                         { color: #e2e8f0 !important; }
    .text-body                         { color: #e2e8f0 !important; }
    .border, .border-top, .border-bottom,
    .border-start, .border-end         { border-color: #334155 !important; }

    /* ── Botões ── */
    .btn-outline-secondary             { color: #94a3b8 !important; border-color: #475569 !important; }
    .btn-outline-secondary:hover       { background: #334155 !important; color: #e2e8f0 !important; }
    .btn-light                         { background: #263348 !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    .btn-light:hover                   { background: #2d3f58 !important; }

    /* ── Lista de grupos ── */
    .list-group-item                   { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
    .list-group-item:hover             { background: #263348 !important; }
    .list-group-item.active            { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }

    /* ── Paginação ── */
    .page-link                         { background: #1e293b !important; color: #60a5fa !important; border-color: #334155 !important; }
    .page-link:hover                   { background: #263348 !important; color: #60a5fa !important; }
    .page-item.active .page-link       { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
    .page-item.disabled .page-link     { background: #131f33 !important; color: #475569 !important; }

    /* ── Footer ── */
    .site-footer                       { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }

    /* ── Barra de progresso ── */
    .progress                          { background: #263348 !important; }

    /* ── Tooltips e popovers ── */
    .tooltip-inner                     { background: #334155; color: #e2e8f0; }
    .popover                           { background: #1e293b !important; border-color: #334155 !important; }
    .popover-header                    { background: #263348 !important; border-color: #334155 !important; color: #e2e8f0 !important; }
    .popover-body                      { color: #e2e8f0 !important; }

    /* ── Links soltos (fora de botões, menus e badges) ── */
    a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: #60a5fa; }
}

/* ════════════════════════════════════════════════
   PRINT — formato profissional A4
   ════════════════════════════════════════════════ */
@media print {

    /* ── Tamanho e margens da página ── */
    @page {
        size: A4 portrait;
        margin: 15mm 12mm 18mm 12mm;
    }

    /* ── Elementos ocultos na impressão ── */
    .navbar,
    .no-print,
    #cookieBanner,
    #searchWidget,
    .site-footer,
    .breadcrumb,
    .pagination,
    form,
    .dropdown-toggle::after,
    .btn:not(.print-show),
    button:not(.print-show),
    [data-bs-toggle],
    .accordion-button::after { display: none !important; }

    /* ── Base do documento impresso ── */
    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html, body {
        font-size: 10pt !important;
        font-family: Arial, Helvetica, sans-serif !important;
        background: #fff !important;
        color: #000 !important;
        line-height: 1.5 !important;
    }

    /* ── Cabeçalho e rodapé de impressão (divs inseridas via PHP) ── */
    .print-header {
        display: block !important;
        border-bottom: 2px solid #333;
        padding-bottom: 8pt;
        margin-bottom: 12pt;
    }
    .print-footer {
        display: block !important;
        border-top: 1px solid #ccc;
        padding-top: 6pt;
        margin-top: 12pt;
        text-align: center;
        font-size: 8pt;
        color: #666;
    }

    /* ── Layout ── */
    main, .container-fluid { padding: 0 !important; margin: 0 !important; }

    /* ── Cards ── */
    .card {
        border: 1px solid #bbb !important;
        border-radius: 0 !important;
        margin-bottom: 8pt !important;
        page-break-inside: avoid;
    }
    .card-header {
        background: #f0f0f0 !important;
        color: #000 !important;
        border-bottom: 1px solid #bbb !important;
        padding: 5pt 8pt !important;
        font-size: 10pt !important;
    }
    .card-body { padding: 8pt !important; }

    /* ── Tabelas ── */
    .table {
        font-size: 9pt !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }
    .table th,
    .table td {
        border: 1px solid #ccc !important;
        padding: 4pt 6pt !important;
        vertical-align: top !important;
        white-space: normal !important;
    }
    .table thead th {
        background: #e8e8e8 !important;
        color: #000 !important;
        font-size: 8pt !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
    }
    .table-hover tbody tr:nth-child(even) td {
        background: #f9f9f9 !important;
    }
    .table-responsive { overflow: visible !important; }

    /* ── Badges ── */
    .badge {
        border: 1px solid #666 !important;
        color: #000 !important;
        background: #f0f0f0 !important;
        font-size: 8pt !important;
        padding: 2pt 5pt !important;
    }

    /* ── Número de protocolo ── */
    .numero-protocolo {
        font-size: 14pt !important;
        border: 2px solid #333 !important;
        background: #f5f5f5 !important;
        color: #000 !important;
    }

    /* ── Timeline ── */
    .timeline { padding-left: 20pt; }
    .timeline::before { border-left: 1px solid #bbb; }
    .timeline-dot {
        background: #333 !important;
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
    .timeline-item { margin-bottom: 10pt; page-break-inside: avoid; }

    /* ── Não quebrar dentro destes elementos ── */
    .protocolo-card,
    .alert,
    tr { page-break-inside: avoid; }

    /* ── Links — não exibir URL na impressão ── */
    a[href]::after { content: none !important; }

    /* ── Ocultar cores de fundo desnecessárias ── */
    .bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-secondary {
        background: #e8e8e8 !important;
        color: #000 !important;
    }
    .text-white { color: #000 !important; }
    .text-muted { color: #444 !important; }

    /* ── Alertas ── */
    .alert {
        border: 1px solid #999 !important;
        background: #f5f5f5 !important;
        color: #000 !important;
    }

    /* ── Rows do Bootstrap ── */
    .row { display: block !important; }
    .col, [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }
}