/* ==========================================================================
   atlas.css — design system do painel Atlas
   --------------------------------------------------------------------------
   Carregado DEPOIS de style.css, em base.html. Regra de convivência: este
   arquivo só define nomes NOVOS. Nada aqui redefine .card, .btn, .grid-2 ou
   qualquer classe que os 63 templates já usam — senão uma correção de token
   mudaria a aparência de tudo ao mesmo tempo, que é exatamente o risco que a
   reforma quer evitar. As duas exceções são deliberadas e estão marcadas
   como CORREÇÃO DE ACESSIBILIDADE.

   Os tokens antigos (--primary-red, --card-bg, --border, --text-main…)
   continuam vivos em style.css e não foram tocados.
   ========================================================================== */

:root {
    /* --- superfícies -------------------------------------------------- */
    --surface:        #111111;   /* fundo de card, igual ao --card-bg atual */
    --surface-2:      #1a1a1a;
    --surface-3:      #222222;

    /* --- linhas ------------------------------------------------------- */
    --line-soft:      #1a1a1a;
    --line:           #222222;
    --line-strong:    #333333;

    /* --- texto --------------------------------------------------------
       Contraste medido sobre --surface (#111):
         #e0e0e0 = 13.9:1    #ccc = 11.0:1    #a3a3a3 = 6.7:1
         #888    =  5.4:1    #808080 = 4.8:1  (piso do que pode ser texto)
         #666    =  3.3:1 ✗  #555    = 2.6:1 ✗
       Regra do sistema: sobre #111, cinza de texto nunca mais escuro que
       #808080. Os #555/#666 espalhados pelos templates saem na fase de
       migração — aqui ficam os substitutos. */
    --text:           #e0e0e0;
    --text-2:         #cccccc;
    --text-3:         #a3a3a3;
    --text-dim:       #888888;
    --text-faint:     #808080;

    /* --- marca ---------------------------------------------------------
       #8b0000 sobre #111 dá 1.9:1 — serve de fundo e de borda, NUNCA de
       texto. Por isso o vermelho tem duas variáveis: uma pinta, a outra
       escreve. --red-ink dá 6.3:1. */
    --red:            #8b0000;
    --red-bright:     #ff0000;
    --red-ink:        #ff5c5c;
    --gold:           #d4af37;   /* 9.0:1 — pode ser texto sem ressalva */

    /* --- semântica ---------------------------------------------------- */
    --ok:             #2ecc71;
    --warn:           #e0a030;
    --danger:         #e74c3c;

    /* --- forma e ritmo ------------------------------------------------- */
    --r-sm: 3px;  --r: 4px;  --r-lg: 6px;  --r-xl: 10px;
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 25px; --sp-7: 40px;

    /* --- tipografia ---------------------------------------------------- */
    --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-md: 0.92rem;
    --fs-lg: 1.15rem; --fs-xl: 1.5rem;  --fs-2xl: 2rem;

    /* --- camadas -------------------------------------------------------
       Eram três números soltos chutados em templates diferentes (topbar 1000,
       mega-menu 2000, modal de campanha 2000). Empatado com o modal, um menu
       aberto podia cair atrás dele. */
    --z-topbar:   1000;
    --z-dropdown: 1050;
    --z-drawer:   1900;
    --z-modal:    2000;

    /* --- métricas de layout --------------------------------------------
       A altura da topbar era repetida à mão: 90px no desktop, 70px no mobile,
       e o sidebar do Centro grudava em `top: 130px` fixo — errado no tablet,
       onde a barra já tinha encolhido. */
    --topbar-h:     90px;
    --sidebar-w:    230px;
    --container-max: 1600px;
    --focus-ring:   2px solid var(--gold);
}

@media (max-width: 900px) {
    :root { --topbar-h: 70px; }
}

/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */

/* Pular navegação: com ~40 links antes do conteúdo, quem usa teclado ou leitor
   de tela percorria o menu inteiro em toda página. Fica escondido até receber
   foco. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: calc(var(--z-topbar) + 10);
    background: var(--gold);
    color: #000;
    font-weight: bold;
    padding: var(--sp-3) var(--sp-5);
    border-radius: 0 0 var(--r-lg) 0;
}
.skip-link:focus {
    left: 0;
}

/* CORREÇÃO DE ACESSIBILIDADE (1/2): anel de foco visível.
   O site não tinha nenhum `:focus-visible`, e style.css ainda fazia
   `outline: none` nos campos de formulário — quem navega por teclado ficava
   literalmente sem saber onde estava. `:focus-visible` (e não `:focus`) mantém
   o clique de mouse limpo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Mesma especificidade da regra de style.css que zera o outline (0,2,1), e
   este arquivo vem depois — então o anel volta nos campos de formulário. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* CORREÇÃO DE ACESSIBILIDADE (2/2): respeitar quem pediu menos movimento.
   O site anima card, botão e menu; para quem tem sensibilidade vestibular isso
   não é enfeite. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .card:hover, .kanban-col:hover { transform: none !important; }
}

/* ==========================================================================
   CABEÇALHO DE PÁGINA
   O bloco "borda vermelha embaixo + h1 vermelho" está copiado literalmente em
   32 templates. Aqui ele vira um componente — e o título passa a usar
   --red-ink, que é legível.
   ========================================================================== */

.page-header {
    border-bottom: 2px solid var(--red);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.page-header--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.page-header__title {
    margin: 0;
    color: var(--red-ink);
    font-size: var(--fs-xl);
    letter-spacing: 1px;
}
.page-header__title i { margin-right: var(--sp-2); }
.page-header__sub {
    margin: var(--sp-2) 0 0 0;
    color: var(--text-dim);
    font-size: var(--fs-sm);
    max-width: 80ch;
}
.page-header__actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
}

.section-title {
    color: #fff;
    border-left: 4px solid var(--red);
    padding-left: var(--sp-3);
    margin: var(--sp-7) 0 var(--sp-5) 0;
    font-size: var(--fs-lg);
}

/* ==========================================================================
   CARD
   `.card` continua em style.css. Aqui só os complementos que faltavam.
   ========================================================================== */

/* style.css levanta TODO card no hover (translateY -2px), inclusive os que não
   são clicáveis — o card reage a um clique que não existe. */
.card--flat:hover {
    border-color: var(--border, #220000);
    transform: none;
}
.card--gold { border-top: 3px solid var(--gold); }
.card--red  { border-top: 3px solid var(--red); }
.card--ok   { border-top: 3px solid var(--ok); }

/* Título de card legível sem mexer no `.card h2/h3` global (que pinta 140
   cards de uma vez e sai só na fase de migração). */
.card__title {
    margin: 0 0 var(--sp-3) 0;
    color: var(--red-ink);
    font-size: var(--fs-lg);
}
.card__title--gold { color: var(--gold); }

/* ==========================================================================
   LAYOUT UTILITÁRIO
   Cobrem a maioria dos `style="display:flex; gap:10px"` espalhados.
   ========================================================================== */

.stack   { display: flex; flex-direction: column; gap: var(--gap, var(--sp-3)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--sp-2)); }
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min, 250px), 1fr));
    gap: var(--gap, var(--sp-5));
}
.spread { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }

/* ==========================================================================
   ESTADO VAZIO
   Hoje é um `.card` com `text-align:center; color:#666` escrito à mão em cada
   listagem — e #666 reprova em contraste.
   ========================================================================== */

.empty-state {
    text-align: center;
    color: var(--text-faint);
    padding: var(--sp-7) var(--sp-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.empty-state i { font-size: 1.8rem; display: block; margin-bottom: var(--sp-3); opacity: 0.6; }
.empty-state p { margin: 0; font-size: var(--fs-sm); }

/* ==========================================================================
   BOTÕES (complementos)
   `.btn-sm` é usada 32 vezes nos templates mas só existia dentro do <style> de
   duas páginas — fora delas era classe morta.
   ========================================================================== */

.btn-sm    { padding: 5px 10px; font-size: var(--fs-xs); }
.btn-ghost { background: transparent; color: var(--text-3); border: 1px solid var(--line-strong); }
.btn-ghost:hover { color: #fff; border-color: var(--text-dim); }
.btn-gold  { background: var(--gold); color: #000; }
.btn-gold:hover { background: #e8c552; }

/* Contrapeso da regra `.card .btn { width:100%; display:block }` de style.css,
   que força todo botão dentro de card a virar bloco de largura total — origem
   provável de vários `style="width:auto"` inline. Enquanto ela existir, esta
   classe é a saída explícita. */
.card .btn.btn--inline {
    width: auto;
    display: inline-block;
    margin-top: 0;
}
.btn--block { width: 100%; display: block; text-align: center; box-sizing: border-box; }

/* ==========================================================================
   BADGES (aliases semânticos)
   `.bg-green/.bg-yellow/.bg-red/.bg-gray` continuam valendo; estes nomes dizem
   o que significam em vez de que cor têm.
   ========================================================================== */

.badge--ok      { background: #003300; color: #4ade80; border: 1px solid #005500; }
.badge--warn    { background: #332b00; color: #ffd54f; border: 1px solid #554400; }
.badge--danger  { background: #330000; color: #ff6b6b; border: 1px solid #550000; }
.badge--neutral { background: var(--surface-3); color: var(--text-3); border: 1px solid var(--line-strong); }
.badge--gold    { background: #2a2205; color: var(--gold); border: 1px solid #554400; }

/* ==========================================================================
   ABAS
   Existem CINCO implementações de aba no projeto (perfil, detalhes_evento,
   admin_pessoal, admin_notificacoes, admin_servidores), cada uma com nomes e
   comportamento próprios. Esta é a única com semântica de acessibilidade.
   ========================================================================== */

.tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--line-strong);
    margin-bottom: var(--sp-5);
    overflow-x: auto;
}
.tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-dim);
    font-size: var(--fs-sm);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
    color: #fff;
    border-bottom-color: var(--red);
}
.tab-panel { display: none; }
.tab-panel[aria-hidden="false"] { display: block; }

/* ==========================================================================
   MODAL
   Quatro implementações divergentes hoje (admin_database, admin_permissoes,
   manual, campanhas_base). Esta é a que deve sobreviver.
   ========================================================================== */

.atlas-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: var(--z-modal);
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 60px 20px;
}
.atlas-modal.open { display: flex; }
.atlas-modal__panel {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-top: 3px solid var(--gold);
    border-radius: var(--r-xl);
    max-width: 720px;
    width: 100%;
    padding: var(--sp-6);
    position: relative;
}
.atlas-modal__close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
}
.atlas-modal__close:hover { color: #fff; }

/* ==========================================================================
   TABELAS (complementos do `table` global de style.css)
   ========================================================================== */

.table--compact th,
.table--compact td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.table--zebra tbody tr:nth-child(even) { background: #0d0d0d; }

/* ==========================================================================
   CSS MIGRADO DE TEMPLATES
   Estava dentro do <style> de campanhas_base.html e do macro
   campanha_perfil_css(). Vem para cá SEM RENOMEAR: renomear obrigaria a mexer
   em campanha_editar.html e campanha_operacao.html, os dois maiores templates
   de campanha, sem ganho nenhum nesta fase.
   ========================================================================== */

/* --- kanban de campanha/operação ---------------------------------------- */
.campanha-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 15px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 10px;
}
.kanban-col {
    background: var(--card-bg);
    border: 1px solid #222;
    border-top: 3px solid var(--gold);
    border-radius: 6px;
    padding: 15px;
    min-width: 0;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}
.kanban-col.kanban-static { cursor: default; }
.kanban-col:not(.kanban-col-operacoes):not(.kanban-static):hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}
.kanban-col-header h3 { margin: 0 0 6px 0; color: white; font-size: 0.95rem; }
.kanban-summary { margin: 12px 0; min-height: 40px; }
.kanban-summary p { margin: 4px 0; color: #ccc; font-size: 0.85rem; }
.kanban-summary-empty { color: #666 !important; font-style: italic; }
.kanban-summary-warn { color: #e0a030 !important; }
.kanban-summary-ok { color: #2ecc71 !important; }
.kanban-summary-dim { color: #888 !important; font-size: 0.78rem !important; }
.kanban-open-hint {
    font-size: 0.72rem;
    color: var(--gold);
    text-align: right;
    border-top: 1px dashed #333;
    padding-top: 8px;
    margin-top: 10px;
}
.kanban-col-operacoes {
    border-top-color: var(--primary-red);
    cursor: default;
    position: relative;
}
.kanban-col-operacoes.locked { opacity: 0.6; }
.kanban-locked-overlay { text-align: center; padding: 30px 10px; color: #666; }
.kanban-locked-overlay i { font-size: 2rem; margin-bottom: 10px; display: block; }
.kanban-locked-overlay p { font-size: 0.85rem; margin: 0; }
.card-status-badge { font-size: 0.72rem; font-weight: bold; }

.campanha-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 60px 20px;
}
.campanha-modal-overlay.open { display: flex; }
.campanha-modal-panel {
    background: var(--card-bg);
    border: 1px solid #333;
    border-top: 3px solid var(--gold);
    border-radius: 8px;
    max-width: 720px;
    width: 100%;
    padding: 25px;
    position: relative;
}
.campanha-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.campanha-modal-close:hover { color: white; }
@media (max-width: 1100px) {
    .campanha-kanban { grid-template-columns: 1fr; overflow-x: visible; }
}

/* --- perfil da campanha (vinha do macro campanha_perfil_css) ------------- */
.campanha-perfil-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 24px;
    margin-top: 16px;
}
.cpm-item { display: flex; flex-direction: column; gap: 2px; }
.cpm-item-wide { grid-column: 1 / -1; }
.cpm-label { color: #777; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.cpm-val { color: #e0e0e0; font-size: 0.92rem; }
.cpm-edit { color: #666; font-size: 0.72rem; margin-top: 2px; text-decoration: none; }
.cpm-edit:hover { color: var(--gold); }
.cpm-context { margin-top: 16px; }
/* Sem pre-wrap: o contexto passa pelo filtro markdown (nl2br já quebra a linha). */
.cpm-md { color: #bbb; font-size: 0.9rem; margin-top: 4px; }


/* ==========================================================================
   BARRA SUPERIOR DOS TRÊS CENTROS
   Substitui o mega-menu de tela cheia: a navegação sai de trás de um botão ☰ e
   passa a estar sempre visível. Clique no nome vai para a home do Centro; o
   caret ao lado abre a lista.
   ========================================================================== */

.centros {
    display: flex;
    align-items: stretch;
    gap: var(--sp-1);
    height: var(--topbar-h);
}

.centro { position: relative; display: flex; align-items: center; }

.centro-link,
.centro-caret {
    background: none;
    border: none;
    color: var(--text-2);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.centro-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3);
    border-radius: var(--r) 0 0 var(--r);
}
.centro-caret {
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-1);
    font-size: 0.62rem;
    border-radius: 0 var(--r) var(--r) 0;
}
.centro:hover .centro-link,
.centro:hover .centro-caret,
.centro:focus-within .centro-link,
.centro:focus-within .centro-caret { color: #fff; }
.centro:hover .centro-link,
.centro:hover .centro-caret,
.centro:focus-within .centro-link,
.centro:focus-within .centro-caret { background: rgba(255, 255, 255, 0.04); }

/* O Centro da página atual fica marcado mesmo em páginas que não são item de
   menu (perfil de alguém, uma operação) — ver navegacao.EXTRAS. */
.centro--ativo .centro-link { color: #fff; }
.centro--ativo::after {
    content: '';
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 14px;
    height: 2px;
    background: var(--red-ink);
    border-radius: 2px;
}

.centro.aberto .centro-caret i,
.centro:hover .centro-caret i { transform: rotate(180deg); }
.centro-caret i { display: inline-block; transition: transform 0.15s; }

/* --- painel do dropdown --------------------------------------------------- */
.centro-dd {
    position: absolute;
    top: calc(var(--topbar-h) - 18px);
    left: 0;
    min-width: 280px;
    max-height: calc(100vh - var(--topbar-h) - 20px);
    overflow-y: auto;
    background: var(--bg-dark, #0a0a0a);
    border: 1px solid var(--line-strong);
    border-top: 3px solid var(--red);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
    padding: var(--sp-2) 0;
    z-index: var(--z-dropdown);

    /* `visibility` e não só `opacity`: com opacity:0 sozinho os links seguem
       focáveis pelo Tab, e a pessoa navega por um menu invisível. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.18s;
}
.centro:hover .centro-dd,
.centro:focus-within .centro-dd,
.centro.aberto .centro-dd {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Ponte invisível sobre o vão entre a barra e o painel: sem ela o menu fecha
   no meio do caminho do cursor. */
.centro-dd::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

/* No toque não existe hover, e o que "gruda" depois do primeiro toque deixa o
   painel aberto sozinho. Ali só o caret abre. */
.sem-hover .centro:hover .centro-dd { visibility: hidden; opacity: 0; }
.sem-hover .centro.aberto .centro-dd { visibility: visible; opacity: 1; }

/* --- itens do menu (compartilhados com o sidebar dos Centros) -------------- */
.nav-grupo { display: flex; flex-direction: column; }

.nav-link {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-5);
    color: var(--text-3);
    font-size: var(--fs-sm);
    border-left: 3px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nav-link:hover {
    color: #fff;
    background: var(--surface-2);
    border-left-color: var(--red);
}
.nav-link__icone { width: 16px; text-align: center; margin-top: 2px; opacity: 0.75; }
.nav-link__texto { display: flex; flex-direction: column; gap: 1px; }
.nav-link__desc { color: var(--text-faint); font-size: var(--fs-xs); font-weight: normal; }

/* Separador do bloco administrativo: é o que faz "público em cima, admin
   embaixo" ser visível em vez de apenas verdadeiro. */
.nav-sep {
    margin: var(--sp-2) var(--sp-5) var(--sp-1);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line-strong);
    color: var(--text-faint);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

.nav-chip {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 0 5px;
    border-radius: var(--r-sm);
    background: #2a2205;
    border: 1px solid #554400;
    color: var(--gold);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    vertical-align: middle;
}

/* --- cartões da home de Centro -------------------------------------------- */
.centro-card { display: block; text-decoration: none; }
.centro-card__icone { font-size: 1.6rem; color: var(--red-ink); display: block; margin-bottom: var(--sp-3); }
.centro-card--admin .centro-card__icone { color: var(--gold); }
.centro-card__desc { color: var(--text-dim); font-size: var(--fs-sm); margin: 0; }

/* --- celular --------------------------------------------------------------
   Abaixo de 900px a barra não cabe: os Centros viram um painel lateral, com
   <details>/<summary> nativos (aria-expanded implícito, teclado de fábrica). */
.nav-mobile { display: none; }
.nav-mobile__centro { border-bottom: 1px solid var(--line-strong); }
.nav-mobile__centro > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    list-style: none;
}
.nav-mobile__centro > summary::-webkit-details-marker { display: none; }
.nav-mobile__centro > summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-dim);
}
.nav-mobile__centro[open] > summary::after { transform: rotate(180deg); }
.nav-mobile__home {
    display: block;
    padding: var(--sp-2) var(--sp-5) var(--sp-4);
    color: var(--gold);
    font-size: var(--fs-sm);
}

@media (max-width: 1100px) {
    .centro-link { padding-left: var(--sp-2); }
    .centro-link span.centro-link__texto { display: none; }
}
@media (max-width: 900px) {
    .centros { display: none; }
    .nav-mobile { display: block; }
}


/* ==========================================================================
   MENU LATERAL DOS CENTROS
   --------------------------------------------------------------------------
   Formato do antigo `.campanhas-sidebar`, que o usuário preferia: logo, título
   do Centro, e cada opção como seção com seta.

   **Sem `max-height` e sem `overflow-y`.** A versão anterior tinha os dois
   porque renderizava tudo aberto ao mesmo tempo e o menu não cabia na tela. Com
   as seções nascendo fechadas — só a da página atual abre — o menu é curto e a
   barra de rolagem deixa de existir, que é a queixa que originou esta rodada.
   ========================================================================== */

.centro-layout {
    display: flex;
    gap: var(--sp-6);
    align-items: flex-start;
}
.centro-layout--sem-menu { display: block; }

.centro-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    position: sticky;
    /* Era `top: 130px` fixo enquanto a barra encolhe de 90px para 70px abaixo de
       900px — ou seja, já estava errado no tablet. Agora acompanha a barra. */
    top: calc(var(--topbar-h) + var(--sp-5));
}

/* --- topo: logo do Atlas + nome do Centro --------------------------------- */
.centro-sidebar__logo {
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    text-align: center;
    border-bottom: 2px solid var(--red);
    background: var(--bg-dark);
}
.centro-sidebar__logo img { max-width: 120px; height: auto; display: block; margin: 0 auto; }
.centro-sidebar__nome {
    display: block;
    margin-top: var(--sp-3);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.centro-sidebar__nav { display: flex; flex-direction: column; padding: var(--sp-2) 0; }

/* --- seções --------------------------------------------------------------- */
.cs-secao { border-bottom: 1px solid var(--line-soft); }
.cs-secao:last-child { border-bottom: none; }

.cs-cabecalho {
    display: flex;
    align-items: stretch;
    border-left: 3px solid transparent;
}
.cs-cabecalho > a,
.cs-cabecalho > .cs-rotulo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-5);
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    color: var(--text-dim);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: color 0.2s;
}
.cs-cabecalho > a span,
.cs-cabecalho > .cs-rotulo span { min-width: 0; overflow-wrap: anywhere; }
.cs-cabecalho i { width: 16px; text-align: center; flex-shrink: 0; }

.cs-seta {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0 var(--sp-4);
    font-size: var(--fs-xs);
}
.cs-seta i { display: inline-block; transition: transform 0.2s; }
.cs-secao.aberta .cs-seta i { transform: rotate(180deg); }

.cs-cabecalho:hover { background: var(--surface-2); }
.cs-cabecalho:hover > a,
.cs-cabecalho:hover > .cs-rotulo,
.cs-cabecalho:hover .cs-seta { color: #fff; }

/* Página atual: cor não basta para quem não distingue vermelho de cinza — daí
   também a barra à esquerda. */
.cs-cabecalho.atual {
    background: #160000;
    border-left-color: var(--red);
}
.cs-cabecalho.atual > a { color: #fff; font-weight: bold; }

/* --- sublistas ------------------------------------------------------------ */
.cs-sublista { display: none; flex-direction: column; padding: var(--sp-1) 0 var(--sp-2); background: var(--bg-dark); }
.cs-secao.aberta .cs-sublista { display: flex; }

.cs-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px var(--sp-5) 7px 42px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    font: inherit;
    text-align: left;
    color: var(--text-3);
    font-size: var(--fs-xs);
    cursor: pointer;
}
.cs-item:hover { color: #fff; background: var(--surface-2); }
.cs-item.active { color: #fff; background: #1a0505; border-left-color: var(--red); font-weight: 600; }
.cs-item small { display: block; color: var(--text-faint); font-size: 0.66rem; }

.cs-grupo {
    display: block;
    padding: var(--sp-3) var(--sp-5) 3px;
    color: var(--text-faint);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
.cs-vazio {
    display: block;
    padding: 6px var(--sp-5) 6px 42px;
    color: var(--text-faint);
    font-size: var(--fs-xs);
    font-style: italic;
}

.cs-form { padding: var(--sp-2) var(--sp-5) var(--sp-1); }
.cs-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    background: #000;
    color: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    margin-bottom: 6px;
}

.centro-conteudo { flex: 1; min-width: 0; }

@media (max-width: 860px) {
    .centro-layout { flex-direction: column; }
    .centro-sidebar { position: static; width: 100%; }
}


/* ==========================================================================
   IDENTIDADE DO GRUPO
   O painel era uma sala de operações sem nenhuma marca da unidade: nenhuma
   página interna trazia a logo, e as fotos que já rodam na landing não
   apareciam em lugar nenhum depois do login.

   A foto vem por `--foto` (variável), não embutida no seletor — trocar a imagem
   de uma página é mudar um parâmetro, e o mesmo componente serve a todas.
   ========================================================================== */

.faixa-identidade {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-6);
    border-radius: var(--r-lg);
    border: 1px solid var(--line-strong);
    overflow: hidden;
    background-color: var(--bg-dark);
}
/* A foto entra como camada, com véu por cima: sobre cena clara o texto perderia
   o contraste que o resto do sistema garante. */
.faixa-identidade::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--foto);
    background-size: cover;
    background-position: center 40%;
    opacity: 0.42;
}
.faixa-identidade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.72) 55%, rgba(5,5,5,.45) 100%);
}
.faixa-identidade > * { position: relative; z-index: 1; }

.faixa-identidade__logo { width: 62px; height: auto; flex-shrink: 0; }
.faixa-identidade__texto { min-width: 0; }
.faixa-identidade__titulo {
    margin: 0;
    color: #fff;
    font-size: var(--fs-xl);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.faixa-identidade__sub {
    margin: 4px 0 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
}

@media (max-width: 640px) {
    .faixa-identidade { flex-direction: column; text-align: center; gap: var(--sp-3); }
    .faixa-identidade::after { background: rgba(5,5,5,.86); }
}