/* ============================================================
   ÍNDICE
   Abas
   Acordeões
   Botões
   Campos
   Cards
   Efeitos
   Grids
   Indicadores
   Modal
   Tabelas
   Títulos
   Utilitários
   ============================================================ */

/* ==================== Abas ==================== */
        .abas-menu {display:flex; flex-wrap:wrap; gap:10px; padding-bottom:20px; border-bottom:1px solid var(--linha)}
        .abas-tab {display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 18px; border:1px solid var(--linha); border-radius:8px; color:var(--texto); background:var(--card-fundo); font:600 13px/1.4 Roboto,sans-serif; cursor:pointer; transition:background-color .22s ease}
        .abas-tab svg,.abas-tab i {width:18px}
        .abas-tab.active {color:var(--botao-texto); background:var(--botao-fundo); border-color:var(--botao-fundo)}
        .abas[data-abas-ativa] > .abas-painel:not(.active) {display:none}
        .abas-tab:focus-visible {outline:2px solid var(--link); outline-offset:3px}
        @media(hover:hover) and (pointer:fine) {
            .abas-tab:not(.active):hover {background:var(--fundo-destaque)}
            .abas-tab.active:hover {background:var(--botao-hover)}
        }
        @media(max-width:620px) {.abas-tab {flex:1 1 calc(50% - 10px)}}

/* ==================== Acordeões ==================== */
        .acord-seta { flex:none; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .25s ease; }
/* ==================== Acordeões ==================== */
/* TIPO 1 — CSS */
                .sanfona-item { border-bottom:1px solid var(--linha); }
                .sanfona-item:first-child { border-top:1px solid var(--linha); }
                .sanfona-cab { display:flex; align-items:center; gap:12px; width:100%; padding:14px 12px; border:0; border-left:3px solid var(--link); border-radius:0 6px 6px 0; background:var(--fundo-suave); color:var(--texto); text-align:left; cursor:pointer; font:700 15px/1.4 Roboto,Arial,sans-serif; }
                .sanfona-cab:hover { background:var(--fundo-destaque); }
                .sanfona-cab .acord-seta { margin-left:auto; }
                .sanfona-cab[aria-expanded="true"] .acord-seta { transform:rotate(-135deg); }
                .sanfona-painel { max-height:0; overflow:hidden; transition:max-height .3s ease; }
                .sanfona-texto { padding:14px 12px 18px; color:var(--texto-suave); }

/* ==================== Acordeões ==================== */
/* TIPO 2 — CSS */
                .maismenos-item { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:15px 0; border-bottom:1px solid var(--linha); color:var(--titulo); cursor:pointer; font:700 15px/1.45 Roboto,Arial,sans-serif; }
                .maismenos-item:hover { color:var(--link); }
                .maismenos-ic { flex:none; margin-top:1px; color:var(--link); font:800 18px/1 Roboto,Arial,sans-serif; }
                .maismenos-conteudo { max-height:0; overflow:hidden; transition:max-height .35s ease; }
                .maismenos-texto { padding:2px 0 16px; color:var(--texto-suave); }

/* ==================== Acordeões ==================== */
/* TIPO 3 — CSS */
                .faq-item { border-bottom:1px solid var(--linha); }
                .faq-item:first-child { border-top:1px solid var(--linha); }
                .faq-titulo { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:15px 0; color:var(--titulo); cursor:pointer; font:700 15px/1.45 Roboto,Arial,sans-serif; }
                .faq-titulo:hover { color:var(--link); }
                .faq-titulo .acord-seta { margin-top:5px; color:var(--link); }
                .faq-titulo[aria-expanded="true"] .acord-seta { transform:rotate(-135deg); }
                .faq-conteudo { max-height:0; overflow:hidden; transition:max-height .35s ease; }
                .faq-texto { padding:0 0 16px; color:var(--texto-suave); }

/* ==================== Acordeões ==================== */
/* TIPO 4 — CSS (padrão do site; idêntico ao bloco de acordeões do comum.css) */
                .acordion-grade { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:18px; position:relative; }
                .acordion-light { position:relative; min-width:0; border:1px solid var(--linha); border-radius:12px; color:var(--texto); background:var(--card-fundo); }
                .acordion-light > summary { display:flex; align-items:center; gap:14px; padding:18px; list-style:none; cursor:pointer; }
                .acordion-light > summary::-webkit-details-marker { display:none; }
                .acordion-titulo { min-width:0; flex:1; }
                .acordion-titulo h3 { margin:0 0 4px; color:var(--titulo); font:600 17px/1.35 Roboto,sans-serif; }
                .acordion-seta { width:20px; height:20px; flex:0 0 20px; color:var(--link); transition:transform .25s; }
                .acordion-light[open]:not(.is-closing) .acordion-seta { transform:rotate(180deg); }
                .acordion-conteudo { padding:0 18px 18px; }
                .acordion-light[open] { z-index:2; }
                .acordion-light > .acordion-conteudo { position:absolute; top:calc(100% + 8px); left:-1px; right:-1px; padding:18px; max-height:60vh; overflow:auto; overscroll-behavior:contain; border:1px solid var(--linha); border-radius:12px; background:var(--card-fundo); box-shadow:var(--card-sombra); }
                .acordion-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
                .acordion-links a { display:flex; align-items:center; padding:9px 10px; border:1px solid var(--linha); border-radius:6px; color:var(--texto); background:var(--fundo-suave); text-decoration:none; overflow-wrap:anywhere; font:400 13px/1.4 Roboto,sans-serif; }
                .acordion-light > summary:hover { background:var(--fundo-destaque); }
                .acordion-seta svg { width:100%; height:100%; }
                .acordion-seta i { font-size:16px; }

/* ==================== Acordeões ==================== */
/* TIPO 5 — CSS (details/summary + ::details-content, sem JS; padrão do pages.css) */
                .acordion { display:grid; gap:10px }
                .acordion_item { interpolate-size:allow-keywords; overflow:hidden; border:1px solid var(--card-linha); border-radius:10px; color:var(--card-texto); background:var(--card-fundo) }
                .acordion_item::details-content { height:0; opacity:0; overflow:hidden; transition:height .4s ease,opacity .3s ease,content-visibility .4s allow-discrete }
                .acordion_item[open]::details-content { height:auto; opacity:1 }
                .acordion_botao { display:flex; align-items:center; gap:12px; padding:15px; font:700 15px/1.45 Roboto,sans-serif; cursor:pointer; list-style:none }
                .acordion_botao::-webkit-details-marker { display:none }
                .acordion_botao:hover { background:var(--fundo-suave) }
                .acordion .acordion_icone { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:8px; color:var(--botao-texto); background:var(--botao-fundo); font-size:16px }
                .acordion_titulo { flex:1; min-width:0; overflow-wrap:anywhere }
                .acordion_seta { flex:none; color:var(--texto-suave); font-size:12px; transition:transform .2s }
                .acordion_item[open] .acordion_seta { transform:rotate(180deg) }
                .acordion_botao:focus-visible,.acordion_arquivos a:focus-visible { outline:2px solid var(--link); outline-offset:-2px }
                .acordion_texto { padding:0 15px 18px 63px; overflow-wrap:anywhere }
                .acordion_texto p { margin:0 0 14px; color:inherit }
                .acordion_texto p:last-child { margin-bottom:0 }
                .acordion_texto img { max-width:100%; height:auto }
                .acordion_arquivos { display:grid; gap:7px }
                .acordion_arquivos a { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--linha); border-radius:6px; color:var(--link); background:var(--fundo-suave); text-decoration:none; font:400 13px/1.5 Roboto,sans-serif }
                .acordion_arquivos a:hover { color:var(--link-hover); background:var(--card-fundo) }
                .acordion_arquivos i { flex:none }
                .acordion_vazio { margin:0; padding:25px; border:1px dashed var(--linha); border-radius:10px; color:var(--texto-suave); background:var(--fundo-suave) }
                @media(max-width:600px) { .acordion_botao { padding:12px; gap:10px; font-size:14px } .acordion_texto { padding:0 12px 15px } }
                @media(prefers-reduced-motion:reduce) { .acordion_item::details-content,.acordion_seta { transition:none } }

/* ==================== Botões ==================== */
/* ==================== BOTÕES GLOBAIS ==================== */
        .btn {
            min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
            padding:0 22px; border:1px solid transparent; border-radius:999px;
            color:var(--botao-texto); background:var(--botao-fundo);
            font:800 14px/1.2 Roboto,Arial,sans-serif; text-decoration:none; text-align:center;
            cursor:pointer; user-select:none; transition:background .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
        }
        .btn:hover { background:var(--botao-hover); }
        .btn:focus-visible { outline:2px solid currentColor; outline-offset:3px; }

        /* ==================== CORES E ESTILOS ==================== */
        .btn-outline { color:var(--texto); border-color:var(--linha); background:var(--card-fundo); }
        .btn-outline:hover { background:var(--fundo-suave); }
        .btn-light { color:var(--base5); background:#fff; }
        .btn-light:hover { background:#fff; filter:brightness(.9); }
        .btn-dark { color:#fff; background:var(--base5); }
        .btn-dark:hover { background:var(--base5); filter:brightness(1.35); }
        .btn-outline-light { color:#fff; border-color:rgba(255,255,255,.4); background:transparent; }
        .btn-outline-light:hover { background:rgba(255,255,255,.12); }
        .btn-ghost { color:var(--texto); background:transparent; }
        .btn-ghost:hover { background:var(--fundo-suave); }

        /* ==================== TAMANHOS E ESTADOS ==================== */
        .btn-sm { min-height:34px; padding:0 14px; font-size:12px; }
        .btn-lg { min-height:56px; padding:0 30px; font-size:16px; }
        .btn-block { display:flex; width:100%; }
        .btn:disabled, .btn.is-disabled { opacity:.45; pointer-events:none; }

/* ==================== Campos ==================== */
        .campo {min-width:0; min-height:42px; padding:10px 12px; border:1px solid var(--campo-linha); border-radius:7px; color:var(--campo-texto); background:var(--campo-fundo); font:400 13px/1.4 Roboto,sans-serif}
        .campo::placeholder {color:var(--campo-placeholder)}
        .campo:focus-visible {outline:2px solid var(--link); outline-offset:3px}
        .campo:disabled {opacity:.6; cursor:not-allowed}

        /* ==================== FORMULÁRIO (APOIO) ==================== */
        .form-comum {display:grid; gap:16px; max-width:520px}
        .form-linha {display:grid; gap:6px}
        .form-linha > label {color:var(--titulo); font:600 13px/1.4 Roboto,sans-serif}
        .form-duplo {display:grid; grid-template-columns:1fr 1fr; gap:16px}
        .form-ajuda {color:var(--texto-suave); font:400 11px/1.4 Roboto,sans-serif}
        textarea.campo {min-height:110px; resize:vertical}
        .form-check {display:flex; align-items:center; gap:8px; color:var(--texto); font:400 13px/1.4 Roboto,sans-serif}
        .form-check input {width:16px; height:16px; accent-color:var(--botao-fundo)}

        /* ==================== BOTÃO ==================== */
        .btn-comum {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; border-radius:7px; color:var(--botao-texto); background:var(--botao-fundo); font:700 13px/1.4 Roboto,sans-serif; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .22s ease}
        .btn-comum:hover {background:var(--botao-hover)}
        .btn-comum:focus-visible {outline:2px solid var(--link); outline-offset:3px}

        @media(max-width:620px) {.form-duplo {grid-template-columns:1fr}}

/* ==================== Cards ==================== */
/* CONJUNTO — AS COLUNAS SE AJUSTAM AO ESPAÇO */
.cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:20px}

/* ==================== 1. CARD — ESTRUTURA COMUM ==================== */
.card {min-width:0; overflow:hidden; border:1px solid var(--card-linha); border-radius:12px; color:var(--card-texto); background:var(--card-fundo); transition:transform .25s ease}
.card > a {display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none}
.card > a:hover {background:var(--fundo-suave)}
.card > a:focus-visible {outline:2px solid var(--link); outline-offset:-3px}
.card:not(:has(img)):hover {transform:translateY(-4px)}
.card .text {display:flex; flex-direction:column; flex:1; gap:5px; min-width:0; padding:20px; overflow-wrap:anywhere}
.card h3 {margin:0; color:var(--titulo); font:700 clamp(18px,2vw,22px)/1.3 Roboto,sans-serif}
.card p {margin:0; color:var(--texto-suave); font:400 14px/1.2 Roboto,sans-serif}
.card small {color:var(--link); font:700 12px/1.4 Roboto,sans-serif}
.card strong {margin-top:auto; color:var(--link); font:700 22px/1.3 Roboto,sans-serif}
.card img {display:block; max-width:100%; object-fit:cover; transition:transform .25s ease}
.card > a:hover > img {transform:scale(1.04)}

/* ==================== 2. CARD-IMG — IMAGEM ACIMA ==================== */
.card-img > a > img {width:100%; aspect-ratio:4/3}

/* ==================== 3. CARD-HORIZONTAL — IMAGEM AO LADO ==================== */
.card-horizontal > a {display:grid; grid-template-columns:35% minmax(0,1fr)}
.card-horizontal > a > img {width:100%; height:100%; min-height:180px}
.card-horizontal .text {padding:15px}

/* ==================== 4. CARD-ICON — ÍCONE E CONTEÚDO ==================== */
.card-icon .text > i {display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:5px; border-radius:10px; color:var(--botao-texto); background:var(--botao-fundo); font-size:26px}

/* ==================== 5. CARD-OVERLAY — TEXTO SOBRE A IMAGEM ==================== */
.card-overlay {background:var(--base5)}
.card-overlay > a {position:relative; isolation:isolate; min-height:380px}
.card-overlay > a > img {position:absolute; inset:0; width:100%; height:100%}
.card-overlay > a::after {content:""; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 20%,rgba(0,0,0,.5) 60%,#000 100%); pointer-events:none}
.card-overlay strong {margin-top:0}
.card-overlay .text {position:relative; z-index:1; flex:1; justify-content:flex-end}
.card-overlay h3,.card-overlay p,.card-overlay small,.card-overlay strong {color:var(--base-texto)}

/* ==================== 6. CARD-CANAL — CANAIS DO CIDADÃO / FORMULÁRIOS DE REQUISIÇÕES ==================== */
.consulta-links {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.consulta-app {--campo-altura:34px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center; gap:8px; padding:16px; border:1px solid var(--card-linha); border-radius:12px; color:var(--texto); background:var(--card-fundo); box-shadow:var(--card-sombra); text-decoration:none; overflow-wrap:anywhere; transition:border-color .2s ease, box-shadow .2s ease}
.consulta-app strong {color:var(--titulo); font:700 14px/1.3 Roboto,sans-serif}
.consulta-app strong i {margin-right:7px; color:var(--base3); font-size:1.05em}
.consulta-app span {padding-bottom:8px; color:var(--texto-suave); font:400 12px/1.5 Roboto,sans-serif}
.consulta-app .btn-comum {margin-top:auto; width:100%; padding:8px 14px; font:600 12px/1.4 Roboto,sans-serif}
.consulta-app .btn-comum:hover {background:var(--botao-fundo); box-shadow:0 6px 16px rgba(20,35,50,.22)}
.consulta-app > .btn-comum:last-child {margin-bottom:calc(var(--campo-altura) + 8px)}
.consulta-app .campo {flex:none; width:100%; min-height:0; height:var(--campo-altura); padding:7px 10px; font:400 12px/1.4 Roboto,sans-serif}
.consulta-app .campo:focus,.consulta-app .campo:active {outline:none}
.consulta-app .campo:focus-visible {outline:none; border-color:var(--base3)}

/* botão e campo usados no card */
.btn-comum {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; border-radius:7px; color:var(--botao-texto); background:var(--botao-fundo); font:700 13px/1.4 Roboto,sans-serif; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .22s ease}
.btn-comum:hover {background:var(--botao-hover)}
.campo {min-width:0; min-height:42px; padding:10px 12px; border:1px solid var(--campo-linha); border-radius:7px; color:var(--campo-texto); background:var(--campo-fundo); font:400 13px/1.4 Roboto,sans-serif}
.campo::placeholder {color:var(--campo-placeholder)}

/* ==================== BOTÃO-CARD ==================== */
.btn-card {display:flex; align-items:center; gap:14px; min-height:78px; padding:17px; border:1px solid var(--card-linha); border-radius:12px; color:var(--card-texto); background:var(--card-fundo); text-decoration:none; transition:box-shadow .22s ease}
.btn-card i {width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:9px; color:var(--botao-texto); background:var(--botao-fundo)}
.btn-card strong {font:600 13px/1.4 Roboto,sans-serif}
.btn-card:hover {box-shadow:var(--card-sombra)}
.btn-card:focus-visible {outline:2px solid var(--link); outline-offset:3px}
@media (max-width:980px) {.consulta-links {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px) {.consulta-links {grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==================== MOBILE ==================== */
@media (max-width:600px) {
    .card-horizontal > a {grid-template-columns:1fr}
    .card-horizontal > a > img {height:auto; min-height:0; aspect-ratio:4/3}
}

/* ==================== Efeitos ==================== */
.hover-ampliar {transition:box-shadow .22s ease}
.hover-ampliar:not(img):not(.acordion-links a):hover {box-shadow:var(--card-sombra)}
.hover-ampliar:focus-visible {outline:2px solid var(--link); outline-offset:3px}

.hover-links > a {transition:background-color .22s ease}
.hover-links > a:hover {--atalho-fundo:var(--fundo-suave); background:var(--fundo-suave)}

.sections-anime.anime-ativa {opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1)}
.sections-anime.anime-ativa.anime-visivel {opacity:1; transform:none}
@media(prefers-reduced-motion:reduce) {
        .sections-anime.anime-ativa {opacity:1; transform:none; transition:none}
        .hover-ampliar, .hover-links > a {transition:none}
}

/* ==================== Grids ==================== */
        .grid-1,.grid-2,.grid-3,.grid-4 {display:grid; gap:12px; align-items:start}
        .grid-1 {grid-template-columns:1fr}
        .grid-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
        .grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
        .grid-4 {grid-template-columns:repeat(4,minmax(0,1fr))}
        .grid-centro {align-items:center}

        @media(max-width:900px) {.grid-2 {grid-template-columns:1fr} .grid-4 {grid-template-columns:repeat(2,minmax(0,1fr))}}
        @media(max-width:620px) {.grid-3,.grid-4 {grid-template-columns:1fr}}

/* ==================== Indicadores ==================== */
        .indicadores {min-width:0}
        .indicadores h4 {margin:0 0 12px; padding-left:0; border-left:0; color:var(--texto); font-size:13px}
        .indicadores-ano {display:grid; grid-template-columns:50px 1fr; gap:12px; align-items:start; padding:8px 0; border-top:1px solid var(--linha)}
        .indicadores-valores {display:flex; flex-wrap:wrap; gap:7px 13px}
        .indicadores-valores span {color:var(--texto-suave); font-size:9px; overflow-wrap:anywhere}
        .indicadores-valores b {display:block; color:var(--texto); font-size:13px}
        .indicadores-barras {display:grid; gap:12px}
        .indicadores-cabecalho {display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; color:var(--texto-suave); font-size:10px}
        .indicadores-trilho {height:7px; overflow:hidden; border-radius:999px; background:var(--linha)}
        .indicadores-preenchimento {height:100%; border-radius:inherit; background:var(--base3)}

        /* ==================== GRID (APOIO) ==================== */
        .grid-2 {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start}
        @media(max-width:900px) {.grid-2 {grid-template-columns:1fr}}

/* ==================== Modal ==================== */
/* ==================== BOTÃO (APOIO) ==================== */
        .btn-comum {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; border-radius:7px; color:var(--botao-texto); background:var(--botao-fundo); font:700 13px/1.4 Roboto,sans-serif; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .22s ease}
        .btn-comum:hover {background:var(--botao-hover)}
        .btn-comum:focus-visible {outline:2px solid var(--link); outline-offset:3px}

        /* ==================== TIPO 1 — MODAL NATIVO (dialog) ==================== */
        .dialog-comum {width:min(680px,calc(100% - 30px)); max-width:calc(100% - 30px); max-height:90vh; padding:0; border:1px solid var(--linha); border-radius:14px; color:var(--modal-texto); background:var(--modal-fundo); box-shadow:var(--card-sombra)}
        .dialog-comum[open] {display:flex; flex-direction:column}
        .dialog-comum::backdrop {background:rgba(0,0,0,.55)}
        .dialog-topo {display:flex; flex:none; justify-content:space-between; align-items:center; gap:12px; padding:14px 24px; border-bottom:1px solid var(--linha)}
        .dialog-topo img {height:46px; width:auto}
        .dialog-topo form {margin:0}
        .dialog-fechar {width:38px; height:38px; border:0; border-radius:6px; color:var(--modal-texto); background:var(--fundo-destaque); font-size:26px; cursor:pointer}
        .dialog-fechar:focus-visible {outline:2px solid var(--link); outline-offset:3px}
        .dialog-scroll {overflow:auto; min-height:0; padding:24px}
        .dialog-scroll h3 {margin:0 0 18px; color:var(--titulo); font:600 22px/1.3 Roboto,sans-serif}
        .dialog-scroll p {margin:0 0 14px; color:var(--texto-suave)}
        .dialog-rodape {flex:none; padding:12px 24px; border-top:1px solid var(--linha); color:var(--texto-suave); font-size:12px; text-align:center}
        body.dialog-aberto {overflow:hidden}
        .lista-numeros {margin:0; padding:0; list-style:none}
        .lista-numeros li {display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--linha); font:400 13px/1.5 Roboto,sans-serif}
        .lista-numeros li:last-child {border:0}
        .lista-numeros li span {min-width:0; overflow-wrap:anywhere}
        .lista-numeros li strong {flex:none; color:var(--link)}

        /* ==================== TIPO 2 — MODAL DE DETALHES (app) ==================== */
        .app-modal-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.55); z-index:9999; align-items:center; justify-content:center}
        .app-modal-overlay.active {display:flex}
        .app-modal {background:#fff; border-radius:8px; width:90%; max-width:900px; max-height:88vh; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,0.22); display:flex; flex-direction:column; scrollbar-width:thin; scrollbar-color:#c8cdd5 #f2f4f6}
        .app-modal::-webkit-scrollbar {width:10px; height:12px}
        .app-modal::-webkit-scrollbar-track {background:#f2f4f6; border-radius:10px}
        .app-modal::-webkit-scrollbar-thumb {background:#c8cdd5; border-radius:10px}
        .app-modal::-webkit-scrollbar-thumb:hover {background:#aab1ba}
        .app-modal-header {background:#1a6eb5; color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; border-radius:8px 8px 0 0}
        .app-modal-header h3 {margin:0; font-size:15px; font-weight:700; color:#fff}
        .app-modal-close {background:transparent; border:2px solid rgba(255,255,255,0.6); color:#fff; border-radius:50%; width:30px; height:30px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center}
        .app-modal-close:hover {background:rgba(255,255,255,0.15)}
        .app-modal-body {padding:24px 24px 16px; flex:1; overflow-y:auto}
        .app-modal-body .objeto-texto {background:#f8f9fa; border-left:3px solid #1a6eb5; padding:10px 14px; border-radius:0 4px 4px 0; font-size:13px; color:#333; margin-top:4px; line-height:1.5}
        .app-modal-body .secao-titulo {font-size:13px; font-weight:700; color:#1a6eb5; text-transform:uppercase; margin:18px 0 10px; border-bottom:2px solid #e0eaf5; padding-bottom:5px}
        .app-modal-body .form-group {margin-bottom:14px}
        .app-modal-body .form-group label {display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#888; padding-left:2px; margin-bottom:4px}
        .app-modal-body .form-control {height:auto; min-height:36px; padding:8px 12px; background:#f8f9fa; border:1px solid #e0e6ed; border-left:3px solid #1a6eb5; border-radius:4px; font-weight:600; color:#333}
        .app-modal-body .arquivo-item {display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid #dee2e6; border-radius:5px; margin-bottom:7px; background:#f8f9fa; text-decoration:none; color:#333; transition:background 0.15s; cursor:pointer}
        .app-modal-body .arquivo-item:hover {background:#e8f0fb}
        .app-modal-body .arquivo-item .arq-icone {font-size:20px; color:#dc3545; flex-shrink:0}
        .app-modal-body .arquivo-item .arq-info {flex:1}
        .app-modal-body .arquivo-item .arq-nome {font-size:13px; font-weight:600; color:#1a6eb5; display:block}
        .app-modal-body .arquivo-item .arq-data {font-size:11px; color:#888; margin-top:1px; display:block}
        .app-modal-footer {padding:14px 24px; border-top:1px solid #e9ecef; display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; background:#fff; border-radius:0 0 8px 8px}
        .app-btn-imprimir {background:#6c757d; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:6px}
        .app-btn-imprimir:hover {background:#5a6268}
        .app-btn-salvar {background:#17a2b8; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:6px}
        .app-btn-salvar:hover {background:#138496}
        .app-btn-fechar {background:#fff; color:#555; border:1px solid #ced4da; padding:8px 16px; border-radius:4px; cursor:pointer; font-size:13px; margin-left:auto}
        .app-btn-fechar:hover {background:#f0f0f0}
        @media(max-width:600px) {.app-modal {width:98%}}

/* ==================== Tabelas ==================== */
        .tabela-wrap {overflow:auto}
        .tabela {width:100%; border-collapse:collapse; color:var(--texto)}
        .tabela th {padding:14px 16px; color:var(--texto-suave); text-align:left; font:700 11px/1.4 Roboto,sans-serif; text-transform:uppercase}
        .tabela td {padding:16px; border-top:1px solid var(--linha); font:400 13px/1.5 Roboto,sans-serif; vertical-align:top}
        .tabela .tabela-vazio {text-align:center; color:var(--texto-suave)}

        /* Mobile: cada linha vira um cartão, o cabeçalho some e o data-label aparece. */
        @media(max-width:620px) {
            .tabela,.tabela tbody {display:block}
            .tabela thead {display:none}
            .tabela tr {display:block; margin-bottom:12px; padding:8px 12px; border:1px solid var(--linha); border-radius:8px; background:var(--card-fundo)}
            .tabela td {display:grid; grid-template-columns:minmax(80px,105px) minmax(0,1fr); gap:10px; padding:9px 0; overflow-wrap:anywhere}
            .tabela td:first-child {border:0}
            .tabela td:before {content:attr(data-label); color:var(--texto-suave); font-size:10px; text-transform:uppercase}
            .tabela td.tabela-vazio {display:block}
            .tabela td.tabela-vazio:before {content:none}
        }

/* ==================== Títulos ==================== */
/* ==================== TTA-TAG ==================== */
.tta-tag {margin-bottom:24px; padding-bottom:12px; border-bottom:1px dotted var(--link)}
.tta-tag-rotulo {margin:0 0 6px; padding-left:9px; border-left:4px solid var(--link); color:var(--link); font:700 12px/1.5 "Roboto",sans-serif; letter-spacing:0.08em; text-transform:uppercase}
.tta-tag-title {margin:0; color:var(--link); font:800 min(28px, calc(20.8px + 0.6vw))/1.2 "Roboto",sans-serif; letter-spacing:-0.02em}
.tta-tag-bt {display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px}
.tta-tag a.btn {display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border:1px solid var(--botao-fundo); border-radius:6px; background:var(--botao-fundo); color:var(--botao-texto); font:600 14px/1.4 "Roboto",sans-serif; text-decoration:none; box-shadow:none; transition:background-color .2s,border-color .2s}
.tta-tag a.btn:hover,.tta-tag a.btn:focus {background:var(--botao-hover); border-color:var(--botao-hover); color:var(--botao-texto); text-decoration:none; box-shadow:none}

/* ==================== TTA E TTB ==================== */
.tta,.ttb {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; width:100%; color:var(--link); border-bottom:1px solid var(--link); gap:12px; padding-bottom:8px; margin-bottom:20px}
.tta {border-bottom-width:3px; padding-bottom:12px; margin-bottom:40px}
.tta h2,.ttb h2 {display:flex; align-items:center; gap:8px; margin:0; color:inherit; font:500 20px/1.2 Roboto,sans-serif}
.tta h2 {font-size:28px}
.tta > a,.tta > button,.ttb > a,.ttb > button {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border:0; border-radius:7px; color:var(--botao-texto); background:var(--botao-fundo); font:700 12px/1.4 Roboto,sans-serif; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .22s ease}
.tta > a:hover,.tta > button:hover,.ttb > a:hover,.ttb > button:hover {background:var(--botao-hover)}
.tta > a:focus-visible,.tta > button:focus-visible,.ttb > a:focus-visible,.ttb > button:focus-visible {outline:2px solid var(--link); outline-offset:3px}

/* ==================== RÓTULO ==================== */
.ttrotulo {display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--link); font:700 12px/1.4 Roboto,sans-serif; letter-spacing:.12em; text-transform:uppercase}
.ttrotulo:before {content:""; width:3px; height:17px; background:currentColor}

/* ==================== TÍTULO GRANDE ==================== */
.ttmax {margin:0; max-width:780px; color:var(--titulo); font:500 clamp(30px,4.2vw,58px)/1.1 Roboto,sans-serif; letter-spacing:-.035em}

/* ==================== CABEÇALHO COM ÍCONE — TÍTULO E COMENTÁRIO ==================== */
.acordion-cabecalho {display:flex; align-items:center; gap:14px; padding:18px; border-bottom:1px solid var(--linha)}
.acordion-titulo {min-width:0; flex:1}
.acordion-titulo h3 {margin:0 0 4px; color:var(--titulo); font:600 17px/1.35 Roboto,sans-serif}
.acordion-cabecalho .icone-box {width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:9px; color:var(--botao-texto); background:var(--botao-fundo)}
.acordion-cabecalho .texto-suave {display:block; color:var(--texto-suave); font:400 12px/1.45 Roboto,sans-serif}

/* ==================== Utilitários ==================== */
.texto-suave {display:block; color:var(--texto-suave); font:400 12px/1.45 Roboto,sans-serif}
.icone-box {width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:9px; color:var(--botao-texto); background:var(--botao-fundo)}
.icone-box svg {width:22px; height:22px}
[hidden] {display:none!important}
.btn-comum:focus-visible,.campo:focus-visible,.acordion-light > summary:focus-visible,.acordion-links a:focus-visible {outline:2px solid var(--link); outline-offset:3px}