/* =====================================================================
   Plataforma GRC — CMPD · Estilos base
   Paleta institucional: #00567C (primária) / #1c8fc4 (acento)
   ===================================================================== */

:root {
    --grc-primary: #00567C;
    --grc-primary-dark: #003e5a;
    --grc-accent: #1c8fc4;
    --grc-bg: #f4f7f9;
    --grc-ink: #1c2b39;
    --grc-muted: #6a7884;
    --grc-border: #e7edf1;
    --grc-ok-bg: #e6f7ed;
    --grc-ok-ink: #1e7e34;
    --grc-fail-bg: #fde8e8;
    --grc-fail-ink: #b02a37;
}

/* Páginas de erro (abort() e o catch de topo em public/index.php) — sem
   style="" inline, que a CSP (style-src 'self') bloqueia. */
.error-page {
    font-family: system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background: var(--grc-bg);
    color: var(--grc-ink);
}

.error-page__box {
    text-align: center;
    padding: 2rem;
}

.error-page__code {
    font-size: 3rem;
    margin: 0;
    color: var(--grc-primary);
}

.error-page__title {
    font-size: 1.2rem;
    margin: .5rem 0;
}

.error-page__message {
    color: var(--grc-muted);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--grc-bg);
    color: var(--grc-ink);
    line-height: 1.6;
}

code {
    background: #eef2f5;
    border-radius: 6px;
    padding: .1rem .4rem;
    font-size: .88em;
}

/* --------------------------------------------------------------------
   Página de diagnóstico inicial
   -------------------------------------------------------------------- */

.setup {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(160deg, var(--grc-primary) 0%, var(--grc-primary-dark) 45%, #021c2a 100%);
}

.setup__card {
    width: 100%;
    max-width: 640px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .32);
    padding: 2.2rem 2rem;
}

.setup__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px dashed var(--grc-border);
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
}

.setup__brand {
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--grc-accent), var(--grc-primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: .5px;
}

.setup__head h1 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--grc-ink);
}

.setup__head p {
    margin: .15rem 0 0;
    font-size: .85rem;
    color: var(--grc-muted);
}

.setup__card h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--grc-accent);
    margin: 1.4rem 0 .6rem;
}

.setup__flash {
    background: #fff4de;
    color: #9a6206;
    border: 1px solid #f5d9b0;
    border-radius: 10px;
    padding: .7rem .9rem;
    font-size: .9rem;
}

.setup__checks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.setup__checks li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid #f1f5f8;
    font-size: .92rem;
}

.setup__checks li:last-child {
    border-bottom: none;
}

.badge {
    flex: none;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: .2rem .55rem;
    border-radius: 20px;
}

.badge--ok {
    background: var(--grc-ok-bg);
    color: var(--grc-ok-ink);
}

.badge--fail {
    background: var(--grc-fail-bg);
    color: var(--grc-fail-ink);
}

.setup__steps {
    margin: 0;
    padding-left: 1.2rem;
    font-size: .92rem;
    color: var(--grc-ink);
}

.setup__steps li {
    margin-bottom: .4rem;
}

.setup__foot {
    margin-top: 1.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--grc-border);
    font-size: .8rem;
    color: var(--grc-muted);
    text-align: center;
}

/* --------------------------------------------------------------------
   Componentes compartilhados
   -------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: .95rem;
    padding: .65rem 1.3rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn--primary {
    background: linear-gradient(135deg, var(--grc-primary), var(--grc-accent));
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 86, 124, .3);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 86, 124, .45);
}

.btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, .15);
}

.btn--sm {
    font-size: .8rem;
    padding: .38rem .85rem;
}

.btn--block {
    width: 100%;
    margin-top: 1.1rem;
}

.alert {
    border-radius: 10px;
    padding: .7rem .95rem;
    font-size: .9rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.alert--ok {
    background: var(--grc-ok-bg);
    color: var(--grc-ok-ink);
    border-color: #b8e3c6;
}

.alert--warn {
    background: #fff4de;
    color: #9a6206;
    border-color: #f5d9b0;
}

.alert--fail {
    background: var(--grc-fail-bg);
    color: var(--grc-fail-ink);
    border-color: #f5c2c7;
}

/* Bloco informativo de seção de formulário ("como preencher esta parte") */
.alert--info {
    background: #e8f1f6;
    color: var(--grc-primary);
    border-color: #bfdcea;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.alert--info p {
    margin: 0;
}

.alert--info p + p {
    margin-top: .4rem;
}

/* Exemplo de preenchimento contextual, exibido logo abaixo do campo */
.field__exemplo {
    margin: .25rem 0 0;
}

.field__label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    color: #42505d;
    margin: .9rem 0 .3rem;
    text-align: left;
}

.field__input {
    width: 100%;
    border: 1.5px solid #dfe6ec;
    border-radius: 10px;
    padding: .65rem .85rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--grc-ink);
    background: #fff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field__input:focus {
    border-color: var(--grc-accent);
    box-shadow: 0 0 0 .2rem rgba(28, 143, 196, .16);
}

.muted {
    color: var(--grc-muted);
}

.muted--small {
    font-size: .84rem;
}

.tag {
    display: inline-block;
    background: #e8f1f6;
    color: var(--grc-primary);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: .25rem .7rem;
    border-radius: 20px;
}

/* --------------------------------------------------------------------
   Tela de login (Área Restrita)
   -------------------------------------------------------------------- */

.auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(160deg, var(--grc-primary) 0%, var(--grc-primary-dark) 45%, #021c2a 100%);
}

.auth__card {
    width: 100%;
    max-width: 410px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    padding: 2.4rem 2rem 1.8rem;
    text-align: center;
}

.auth__brand {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--grc-accent), var(--grc-primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: .5px;
    box-shadow: 0 12px 28px rgba(0, 86, 124, .35);
}

.auth__card h1 {
    margin: 0;
    font-size: 1.35rem;
    color: #10303f;
}

.auth__sub {
    margin: .3rem 0 1.4rem;
    font-size: .85rem;
    color: var(--grc-muted);
}

.auth__foot {
    margin: 1.6rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--grc-border);
    font-size: .78rem;
    color: var(--grc-muted);
}

/* --------------------------------------------------------------------
   Área autenticada (topbar + shell)
   -------------------------------------------------------------------- */

.topbar {
    background: var(--grc-primary);
    color: #fff;
}

.topbar__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.topbar__nav--direita {
    margin-left: auto;
}

/* Área AUTENTICADA: a navegação tem muitos itens (até 9 para o Admin_CMPD)
   e não caberia na mesma linha da marca + bloco do usuário — abaixo de
   ~1150px o bloco do usuário quebrava para baixo, desalinhando o header.
   Duas faixas explícitas resolvem em qualquer largura: marca + usuário na
   primeira, navegação na segunda.
   O cabeçalho PÚBLICO (public_header.php) não usa este modificador: lá são
   7 itens e nenhum bloco de usuário, então uma linha só continua cabendo. */
.topbar__inner--app {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "marca usuario"
        "nav   nav";
    align-items: center;
    row-gap: .45rem;
}

.topbar__inner--app .topbar__brand {
    grid-area: marca;
}

.topbar__inner--app .topbar__user {
    grid-area: usuario;
    justify-self: end;
    margin-left: 0;
}

.topbar__inner--app .topbar__nav {
    grid-area: nav;
    padding-top: .45rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Telas estreitas: marca e usuário também empilham (lado a lado não cabe). */
@media (max-width: 560px) {
    .topbar__inner--app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "marca"
            "usuario"
            "nav";
    }

    .topbar__inner--app .topbar__user {
        justify-self: start;
    }
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.topbar__brasao {
    height: 54px;
    width: auto;
    flex: none;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-wrap: wrap;
}

.topbar__nav a[aria-current="page"] {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.topbar__nav a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #d9ecf5;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    padding: .4rem .55rem;
    border-radius: 9px;
    transition: background .15s ease, color .15s ease;
}

.topbar__nav a:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.topbar__nav-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.topbar__nav a.topbar__pill {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 30px;
    padding: .38rem 1rem;
    margin-left: .3rem;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.topbar__nav a.topbar__pill[aria-current="page"] {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .6);
}

.topbar__nav a.topbar__pill:hover {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
    transform: translateY(-1px);
}

.topbar__user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .9rem;
}

.topbar__who {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
    font-size: .85rem;
}

.topbar__who small {
    color: #a9cfe0;
    font-size: .72rem;
}

.shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.6rem 1rem 3rem;
}

.card {
    background: #fff;
    border: 1px solid var(--grc-border);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(16, 33, 51, .05);
    padding: 1.5rem;
    margin-bottom: 1.2rem;
}

.card__title {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
    color: #10303f;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.1rem;
}

.cards-grid .card {
    margin-bottom: 0;
}

.module h2 {
    margin: 0 0 .4rem;
    font-size: 1.05rem;
    color: var(--grc-primary);
}

.module p {
    font-size: .88rem;
    color: var(--grc-muted);
    margin: 0 0 .9rem;
}

.module__count {
    font-weight: 700;
    color: var(--grc-primary);
}

/* --------------------------------------------------------------------
   Módulo RoPA: cabeçalho de página, filtros, tabela e formulário
   -------------------------------------------------------------------- */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.page-head__title {
    margin: 0 0 .25rem;
    font-size: 1.35rem;
    color: #10303f;
}

.filterbar {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.filterbar .field__input {
    width: auto;
    flex: 1 1 220px;
}

.filterbar .btn {
    flex: none;
}

.btn--outline {
    background: #fff;
    border: 1.5px solid #cdd9e1;
    color: #34637b;
}

.btn--outline:hover {
    border-color: var(--grc-primary);
    color: var(--grc-primary);
}

.btn--danger {
    background: #fff;
    border: 1.5px solid var(--grc-fail-ink);
    color: var(--grc-fail-ink);
}

.btn--danger:hover {
    background: var(--grc-fail-bg);
}

.card--table {
    padding: 0;
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.table thead th {
    background: #f6f9fb;
    color: #6a7884;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-align: left;
    padding: .8rem 1rem;
    border-bottom: 1px solid #eef2f5;
}

.table tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid #f1f5f8;
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover {
    background: #f6fafc;
}

.table__acoes {
    text-align: right;
    white-space: nowrap;
}

.pill {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 20px;
    margin-left: .25rem;
    white-space: nowrap;
}

.pill--ok    { background: var(--grc-ok-bg);   color: var(--grc-ok-ink); }
.pill--warn  { background: #fff4de;            color: #9a6206; }
.pill--info  { background: #e8f1f6;            color: var(--grc-primary); }
.pill--muted { background: #eef2f5;            color: #5f6b76; }
.pill--fail  { background: var(--grc-fail-bg); color: var(--grc-fail-ink); }

/* Selo de risco (matriz 5x5) */
.risk {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 20px;
    white-space: nowrap;
}

.risk--baixo   { background: var(--grc-ok-bg); color: var(--grc-ok-ink); }
.risk--medio   { background: #fff4de;          color: #9a6206; }
.risk--alto    { background: #ffe3d1;          color: #a34a10; }
.risk--critico { background: var(--grc-fail-bg); color: var(--grc-fail-ink); }

.empty {
    background: #fff;
    border: 1px dashed #cdd9e1;
    border-radius: 16px;
    text-align: center;
    padding: 2.6rem 1.5rem;
}

/* Formulário RoPA */
.fieldset {
    border: 1px solid var(--grc-border);
    margin-bottom: 1.2rem;
    /* padding-top zerado de propósito: a legend (flutuante, abaixo)
       repõe esse espaço — ver comentário em ".fieldset legend". */
    padding-top: 0;
}

.fieldset legend {
    /* Por padrão, o navegador posiciona a <legend> sobrepondo a borda
       superior do <fieldset>, fora da caixa de conteúdo. Flutuá-la a
       100% da largura tira a legend desse posicionamento nativo e a
       força para dentro da caixa, empurrando o restante do conteúdo
       para a linha seguinte (não sobra espaço ao lado de um float de
       100% de largura) — sem precisar de clearfix. */
    float: left;
    width: 100%;
    padding: 1.5rem 0 0;
    margin: 0 0 1rem;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--grc-accent);
}

/* Filhos que estabelecem seu próprio contexto de formatação de bloco
   (ex.: .grid-2, display: grid) não "descem" sozinhos abaixo de um float
   — apenas evitam sobrepô-lo, encolhendo para caber na sobra de espaço
   ao lado (aqui, só a diferença de arredondamento dos 100% da legend).
   clear: both força esses filhos para a linha abaixo da legend. Inofensivo
   nos filhos que já desciam sozinhos (labels, textareas, parágrafos). */
.fieldset > *:not(legend) {
    clear: both;
}

.fieldset textarea.field__input {
    resize: vertical;
    min-height: 70px;
}

.field__input--erro {
    border-color: var(--grc-fail-ink);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.check-row {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin: 1rem 0 .4rem;
}

.check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--grc-ink);
    cursor: pointer;
}

.check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--grc-primary);
}

.bloco-condicional {
    border-left: 3px solid var(--grc-accent);
    padding-left: 1rem;
    margin-top: .8rem;
}

.actions-bar {
    display: flex;
    gap: .7rem;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    margin: 1.4rem 0 0;
}

.alert__lista {
    margin: .4rem 0 0;
    padding-left: 1.2rem;
}

/* Detalhe (show) */
.card__section {
    margin: 0 0 .8rem;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--grc-accent);
}

.detalhe {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: .55rem 1.2rem;
    margin: 0;
}

.detalhe dt {
    font-weight: 600;
    font-size: .85rem;
    color: #42505d;
}

.detalhe dd {
    margin: 0;
    font-size: .92rem;
    color: var(--grc-ink);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .detalhe {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .detalhe dd {
        margin-bottom: .7rem;
    }
}

/* --------------------------------------------------------------------
   Módulo RIPD: análise da CMPD
   -------------------------------------------------------------------- */

.alert__acao {
    margin-top: .6rem;
}

.analise-form {
    width: 100%;
    background: #fff;
    border: 1px solid var(--grc-border);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(16, 33, 51, .05);
    padding: 1.2rem 1.5rem 1.4rem;
}

.actions-bar--inline {
    justify-content: flex-start;
    margin-top: .9rem;
}

/* --------------------------------------------------------------------
   Módulo Administração: usuários, secretarias e auditoria
   -------------------------------------------------------------------- */

.topbar__sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, .25);
    margin: 0 .3rem;
    align-self: center;
}

/* Ações extras (ex.: "Desbloquear") empilhadas ao lado do botão Editar. */
.table__acoes form {
    display: inline-block;
    margin-left: .35rem;
}

.table--compact th,
.table--compact td {
    padding: .6rem .8rem;
    font-size: .85rem;
}

.table--compact code {
    font-size: .78rem;
}

.text-nowrap {
    white-space: nowrap;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.2rem;
}

/* --------------------------------------------------------------------
   Página pública de transparência (art. 37 LGPD, sem autenticação)
   -------------------------------------------------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--grc-border);
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    text-align: center;
}

.stat-card__valor {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--grc-primary);
}

.stat-card__rotulo {
    display: block;
    font-size: .8rem;
    color: var(--grc-muted);
    margin-top: .25rem;
}

/* Cabeçalho de seção com overline — "MAPA DE RISCO / Secretarias". */
.secao-cabecalho {
    margin: 1.6rem 0 .4rem;
}

.secao-overline {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--grc-accent);
}

.secao-titulo {
    display: inline-block;
    margin: .2rem 0 0;
    padding-bottom: .5rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #10303f;
    border-bottom: 3px solid var(--grc-primary);
}

/* Grade de secretarias — cartões clicáveis que aplicam o filtro de
   secretaria (mesmo padrão visual do portal institucional). */
.categorias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.2rem;
    margin: 1.2rem 0 1.6rem;
}

.categoria-card {
    background: #fff;
    border: 1px solid var(--grc-border);
    border-radius: 16px;
    padding: 1.8rem 1.2rem;
    text-align: center;
    text-decoration: none;
    color: var(--grc-ink);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.categoria-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(16, 33, 51, .12);
    border-color: var(--grc-accent);
}

.categoria-card--ativa {
    border-color: var(--grc-primary);
    box-shadow: 0 4px 16px rgba(0, 86, 124, .18);
}

.categoria-card__icone {
    width: 60px;
    height: 60px;
    margin: 0 auto .9rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--grc-accent), var(--grc-primary));
    display: flex;
    align-items: center;
    justify-content: center;
}

.categoria-card__titulo {
    display: block;
    font-weight: 700;
    font-size: .95rem;
    color: #10303f;
}

/* Uma atividade RoPA dentro do detalhe de uma secretaria — separador
   leve, sem aninhar outro card cheio. */
.atividade-item {
    padding: 1rem 0;
    border-top: 1px solid var(--grc-border);
}

.atividade-item:first-of-type {
    border-top: none;
    padding-top: .5rem;
}

.indicador-linha {
    font-size: .88rem;
    color: var(--grc-ink);
    margin: 0 0 1rem;
}

/* Gráficos de barras (SVG puro, sem biblioteca) — ver app/Core/GraficoBarras.php
   Sempre aninhados dentro do card de detalhe de uma secretaria — por
   isso não levam fundo/sombra próprios (evita "card dentro de card"),
   só um separador leve, igual ao padrão de .atividade-item. */
.chart-grid {
    display: flex;
    flex-direction: column;
}

.chart {
    padding: 1.2rem 0;
    border-top: 1px solid var(--grc-border);
}

.chart:first-of-type {
    border-top: none;
    padding-top: .8rem;
}

.chart__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: .82rem;
    color: var(--grc-ink);
}

.chart__legenda li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.chart__legenda svg {
    flex: none;
}

.chart__area {
    overflow-x: auto;
}

.chart__svg {
    width: 100%;
    height: auto;
    display: block;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.chart__baseline {
    stroke: var(--grc-border);
    stroke-width: 1;
}

.chart__label-y {
    font-size: 11px;
    fill: var(--grc-muted);
}

.chart__label-valor {
    font-size: 11px;
    font-weight: 600;
    fill: var(--grc-ink);
}

.chart__seg {
    cursor: pointer;
}

.chart__seg rect {
    transition: opacity .12s ease;
}

.chart__seg:hover rect,
.chart__seg:focus-visible rect {
    opacity: .8;
}

.chart__leitura {
    font-size: .82rem;
    color: var(--grc-muted);
    margin: .6rem 0 0;
    min-height: 1.2em;
}

.chart__tabela {
    margin-top: .8rem;
}

.chart__tabela summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--grc-primary);
    font-weight: 600;
}

.chart__tabela .card--table {
    margin: .6rem 0 0;
}

/* Impressão/"Salvar como PDF": some navegação e botões de ação, que não
   fazem sentido num documento impresso, evita quebrar cards ao meio, e
   força a tabela-espelho de cada gráfico a aparecer mesmo se estiver
   fechada na tela (o atributo "open" não é levado em conta ao imprimir). */
@media print {
    .topbar,
    .actions-bar,
    .filterbar,
    .categorias-grid {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .card,
    .card--table {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    /* O atributo "open" não é considerado ao imprimir — o navegador some
       com o conteúdo de <details> fechados por padrão (via UA stylesheet).
       Força a exibição para a tabela-espelho de cada gráfico sair completa. */
    .chart__tabela:not([open]) > *:not(summary) {
        display: block !important;
    }

    /* Convite a interagir com o mouse/teclado não faz sentido impresso. */
    .chart__leitura {
        display: none;
    }

    .site-footer {
        display: none;
    }
}

/* --------------------------------------------------------------------
   Rodapé da área pública — visual padronizado com o portal
   institucional (mesmo gradiente escuro e colunas de links).
   -------------------------------------------------------------------- */

.site-footer {
    background: linear-gradient(160deg, #023a54 0%, #021c2a 100%);
    color: #cfe0ea;
    margin-top: 2rem;
}

.site-footer a {
    color: #cfe0ea;
    text-decoration: none;
    transition: color .15s ease;
}

.site-footer a:hover {
    color: #fff;
}

.site-footer__top {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding: 2.4rem 1rem 1.8rem;
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .7rem;
}

.site-footer__brand img {
    height: 48px;
    width: auto;
}

.site-footer__brand span {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.site-footer__sobre {
    font-size: .86rem;
    color: #9fc0d2;
    max-width: 360px;
    line-height: 1.6;
    margin: 0;
}

.site-footer__titulo {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6fb6d6;
    font-weight: 700;
    margin-bottom: .9rem;
}

.site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__links li {
    margin-bottom: .5rem;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
}

.site-footer__chevron {
    width: 12px;
    height: 12px;
    flex: none;
    color: #4ea7cd;
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: .9rem 1rem;
    font-size: .8rem;
}

.site-footer__bottom-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.site-footer__legal a {
    margin: 0 .25rem;
}

/* --------------------------------------------------------------------
   Modal de confirmação (data-confirm, ver assets/js/app.js) — substitui
   o window.confirm() nativo (não estilizável) por um diálogo no layout
   do sistema. Visibilidade controlada por classe, nunca por style=""
   inline (a CSP deste sistema não permite mutação de style via JS).
   -------------------------------------------------------------------- */

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 33, 51, .55);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}

.modal-backdrop--aberto {
    display: flex;
}

.modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(16, 33, 51, .3);
    max-width: 440px;
    width: 100%;
    padding: 1.8rem;
    text-align: center;
    animation: modalEntrada .18s ease;
}

@keyframes modalEntrada {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.modal__icone {
    width: 52px;
    height: 52px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: #e8f1f6;
    color: var(--grc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.modal__icone--perigo {
    background: var(--grc-fail-bg);
    color: var(--grc-fail-ink);
}

.modal__icone svg {
    width: 26px;
    height: 26px;
}

.modal__titulo {
    margin: 0 0 .6rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #10303f;
}

.modal__mensagem {
    margin: 0 0 1rem;
    color: var(--grc-muted);
    line-height: 1.55;
    font-size: .92rem;
}

.modal__caixa {
    background: var(--grc-bg);
    border-radius: 12px;
    padding: .9rem 1.1rem;
    margin: 0 0 1rem;
    text-align: left;
}

.modal__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.modal__lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    font-size: .88rem;
    color: var(--grc-ink);
}

.modal__lista li:not(:first-child) {
    border-top: 1px solid var(--grc-border);
}

.modal__lista li strong {
    color: var(--grc-primary);
    font-variant-numeric: tabular-nums;
}

.modal__destino {
    margin: .5rem 0 0;
    padding-top: .6rem;
    border-top: 1px dashed var(--grc-border);
    font-size: .88rem;
    color: var(--grc-ink);
}

.modal__destino strong {
    color: var(--grc-primary);
}

.modal__nota {
    margin: 0 0 1.4rem;
    color: var(--grc-muted);
    font-size: .8rem;
    line-height: 1.5;
    text-align: left;
}

.modal__formatos {
    display: flex;
    gap: .8rem;
    margin: 0 0 1.2rem;
}

.modal__formato {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: 1.1rem .6rem;
    border: 1.5px solid var(--grc-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--grc-ink);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.modal__formato:hover,
.modal__formato:focus-visible {
    border-color: var(--grc-primary);
    background: #f4f9fb;
    transform: translateY(-2px);
}

.modal__formato strong {
    font-size: 1.05rem;
    color: var(--grc-primary);
}

.modal__formato small {
    color: var(--grc-muted);
    font-size: .76rem;
}

.modal__acoes {
    display: flex;
    gap: .7rem;
    justify-content: center;
}

.modal__acoes .btn {
    flex: 1 1 0;
}

@media (prefers-reduced-motion: reduce) {
    .modal {
        animation: none;
    }
}

/* --------------------------------------------------------------------
   Manual do Usuário — cartilha didática (/manual)
   -------------------------------------------------------------------- */

.manual {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.6rem;
    align-items: start;
}

.manual__indice {
    position: sticky;
    top: 1rem;
    background: #fff;
    border: 1px solid var(--grc-border);
    border-radius: 16px;
    padding: 1.1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.manual__busca {
    margin-bottom: 1rem;
}

.manual__nav {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    border-top: 1px solid var(--grc-border);
    padding-top: .8rem;
}

.manual__nav a {
    color: var(--grc-ink);
    text-decoration: none;
    font-size: .86rem;
    padding: .38rem .55rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.manual__nav a:hover {
    background: var(--grc-bg);
}

/* Seção sendo lida no momento (scroll spy em assets/js/manual.js). */
.manual__nav a.is-ativo {
    background: #e8f1f6;
    border-left-color: var(--grc-primary);
    color: var(--grc-primary);
    font-weight: 700;
}

.manual__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--grc-border);
}

.manual__conteudo {
    min-width: 0;
}

/* Compensa a topbar ao pular por âncora, para o título não colar no topo. */
.manual__secao {
    scroll-margin-top: 1rem;
}

.manual__lead {
    font-size: 1.02rem;
    line-height: 1.7;
}

.manual__vazio {
    text-align: center;
    color: var(--grc-muted);
    padding: 2rem;
}

/* Blocos expansíveis de "campo a campo" ----------------------------- */

.campo-doc {
    border: 1px solid var(--grc-border);
    border-radius: 12px;
    margin-bottom: .55rem;
    background: #fff;
}

.campo-doc > summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    cursor: pointer;
    border-radius: 12px;
    font-size: .93rem;
}

.campo-doc > summary:hover {
    background: var(--grc-bg);
}

.campo-doc[open] > summary {
    border-bottom: 1px solid var(--grc-border);
    border-radius: 12px 12px 0 0;
}

.campo-doc__nome {
    font-weight: 700;
    color: #10303f;
}

.campo-doc__corpo {
    padding: .9rem 1rem 1rem;
    font-size: .91rem;
    line-height: 1.65;
    color: var(--grc-ink);
}

.campo-doc__corpo > :first-child { margin-top: 0; }
.campo-doc__corpo > :last-child  { margin-bottom: 0; }

.campo-doc__corpo .alert {
    margin: .8rem 0 0;
}

.exemplo-inline {
    background: var(--grc-bg);
    border-left: 3px solid var(--grc-accent);
    border-radius: 0 8px 8px 0;
    padding: .6rem .8rem;
}

/* Fluxograma e comparativos ----------------------------------------- */

.fluxo {
    overflow-x: auto;
    margin: 1.2rem 0;
}

.fluxo__svg {
    width: 100%;
    min-width: 560px;
    height: auto;
}

.fluxo__caixa      { fill: #fff; stroke-width: 2; }
.fluxo__caixa--1   { stroke: var(--grc-primary); }
.fluxo__caixa--2   { stroke: var(--grc-accent); }
.fluxo__caixa--3   { stroke: var(--grc-fail-ink); }
.fluxo__titulo     { font-size: 17px; font-weight: 800; fill: #10303f; }
.fluxo__sub        { font-size: 11px; fill: var(--grc-muted); }
.fluxo__rotulo     { font-size: 11px; font-weight: 700; fill: var(--grc-accent); }
.fluxo__nota       { font-size: 12px; fill: var(--grc-muted); }
.fluxo__seta       { stroke: var(--grc-accent); stroke-width: 2; fill: none; }
.fluxo__ponta      { fill: var(--grc-accent); }

.fluxo-texto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0 .3rem;
}

.comparativo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin: 1.2rem 0;
}

.comparativo__lado {
    background: var(--grc-bg);
    border-radius: 12px;
    padding: 1rem;
}

.comparativo__lado p { margin: .3rem 0; font-size: .9rem; }

.comparativo__tag {
    display: inline-block;
    background: var(--grc-primary);
    color: #fff;
    font-weight: 800;
    font-size: .75rem;
    letter-spacing: .5px;
    padding: .2rem .6rem;
    border-radius: 20px;
    margin-bottom: .4rem;
}

.comparativo__seta {
    font-size: 1.6rem;
    color: var(--grc-accent);
}

/* Exemplos bom/ruim -------------------------------------------------- */

.exemplos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.exemplo {
    border-radius: 12px;
    padding: .9rem 1rem;
    font-size: .89rem;
}

.exemplo ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.exemplo li { margin-bottom: .3rem; }

.exemplo--bom  { background: var(--grc-ok-bg);   border: 1px solid #b8e3c6; }
.exemplo--ruim { background: var(--grc-fail-bg); border: 1px solid #f5c2c7; }

.exemplo--bom strong  { color: var(--grc-ok-ink); }
.exemplo--ruim strong { color: var(--grc-fail-ink); }

/* Listas do manual ---------------------------------------------------- */

.lista-marcada,
.lista-numerada {
    padding-left: 1.2rem;
    line-height: 1.7;
}

.lista-marcada li,
.lista-numerada li {
    margin-bottom: .45rem;
}

.lista-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-links li {
    padding: .7rem 0;
    border-bottom: 1px dashed var(--grc-border);
}

.lista-links li:last-child { border-bottom: none; }

.lista-links a {
    display: block;
    font-weight: 600;
    color: var(--grc-primary);
}

.lista-links span {
    display: block;
    margin-top: .15rem;
}

/* Matriz de risco ----------------------------------------------------- */

.matriz__canto {
    font-size: .74rem;
    line-height: 1.3;
    color: var(--grc-muted);
}

.matriz__celula {
    text-align: center;
    vertical-align: middle;
    padding: .5rem .3rem;
}

.matriz__celula strong {
    display: block;
    font-size: 1rem;
}

.matriz__celula small {
    display: block;
    font-size: .68rem;
    opacity: .85;
}

/* Responsivo ---------------------------------------------------------- */

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

    .manual__indice {
        position: static;
        max-height: none;
    }

    .comparativo {
        grid-template-columns: 1fr;
    }

    .comparativo__seta {
        transform: rotate(90deg);
        justify-self: center;
    }
}

@media print {
    .manual {
        grid-template-columns: 1fr;
    }

    .manual__indice {
        display: none;
    }

    /* Conteúdo recolhido não sai na impressão por padrão (UA stylesheet):
       força a abertura para a cartilha imprimir completa. */
    .campo-doc:not([open]) > *:not(summary) {
        display: block !important;
    }
}