/* ==========================================================================
   LGPD FIRST - shell do painel autenticado (topbar fixa + sidebar + conteúdo).
   Padrão inspirado no vigilancia.app.br, adaptado à paleta LGPD FIRST.
   Cores institucionais vêm de --brand-primary/--brand-secondary (parametrizáveis
   por entidade via /assets/branding.css). Ícones: Phosphor. Sem fontes externas.
   ========================================================================== */

:root {
  --panel-bg: #F4F6F8;
  --panel-ink: #0f172a;
  --panel-muted: #94a3b8;
  --panel-soft: #64748b;
  --panel-border: #e2e8f0;
  --panel-topbar-h: 72px;
  --panel-side-w: 275px;
}

html, body { height: 100%; }
/* App-shell do PAINEL travado (so em html.panel-shell, para nao afetar o site publico que tambem
   carrega este CSS): nem html nem body rolam - so o #page-content-wrapper rola. No mobile o html
   podia rolar (quirk do 100vh com a barra de endereco), escondendo o topo sob a navbar fixa. */
html.panel-shell, html.panel-shell body { overflow: hidden; }
body.panel-body {
  overflow: hidden;
  background: var(--panel-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--panel-soft);
}

/* Topbar fixa full-width ---------------------------------------------------- */
.app-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  height: var(--panel-topbar-h);
  display: flex; align-items: stretch; padding: 0;
  background: linear-gradient(135deg, var(--brand-primary, #0054A2), var(--brand-secondary, #031881));
  box-shadow: 0 4px 15px rgba(0,0,0,.12);
  color: #fff;
}
/* Bloco branco da logo, com a largura do menu lateral */
.navbar-logo {
  width: var(--panel-side-w); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 0 0 20px 0;   /* canto inferior-direito curvando para o azul */
}
.navbar-logo a { display: inline-flex; }
.navbar-logo img { height: 40px; width: auto; display: block; margin: 2px 0; } /* -~10% + margem compensa (div mantem a altura); visual mais delicado */
.navbar-heading { display: flex; align-items: center; gap: .6rem; padding: 0 1.25rem 0 1.1rem; min-width: 0; }
.navbar-title { color:#fff; font-weight:700; font-size:1.05rem; margin:0; white-space:nowrap; }
.navbar-subtitle {
  color: rgba(255,255,255,.78); font-size:.82rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:38vw;
  padding-left:.6rem; margin-left:.2rem; border-left:1px solid rgba(255,255,255,.25);
}
.navbar-actions { padding-right: 1.25rem; }
.navbar-user { color:#eaf1fb; font-size:.9rem; max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
/* Botao do usuario legado (avatar translucido) OCULTO globalmente. O menu do usuario
   agora usa .btn-icon (btn-light), com o MESMO tamanho e aparencia dos demais botoes da navbar. */
.navbar-circulo { display: none !important; }

/* Busca de modulos na navbar. Desktop: campo centralizado no meio EXATO da barra (absoluto
   sobre .app-navbar, que e fixed = ancestral posicionado), largo, com lupa + input na MESMA
   linha. Mobile: so a lupa (botao); toque abre a busca como widget flutuante. */
.navbar-modsearch { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1035; }
.navbar-modsearch-toggle { display:none; }
.navbar-modsearch-field { position:relative; display:flex; align-items:center; gap:.55rem; width:min(480px,42vw); background:rgba(255,255,255,.16); border-radius:999px; padding:.44rem 1.1rem; transition:background .15s ease; }
.navbar-modsearch-field:focus-within { background:rgba(255,255,255,.26); }
.navbar-modsearch-ic { color:rgba(255,255,255,.82); font-size:1.05rem; flex:0 0 auto; }
.navbar-modsearch-input { background:transparent; border:0; outline:0; color:#fff; font-size:.88rem; width:100%; }
.navbar-modsearch-input::placeholder { color:rgba(255,255,255,.72); }
.navbar-modsearch-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18);
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .35rem .45rem .35rem .35rem;
  display: none;
  z-index: 1055;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.navbar-modsearch-results::-webkit-scrollbar {
  width: 5px;
}
.navbar-modsearch-results::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
  border-radius: 999px;
}
.navbar-modsearch-results::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.navbar-modsearch-results::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.navbar-modsearch-results.is-open { display:block; }
.navbar-modsearch-item { display:flex; align-items:center; gap:.6rem; padding:.5rem .55rem; border-radius:8px; color:var(--panel-ink); text-decoration:none; cursor:pointer; }
.navbar-modsearch-item:hover, .navbar-modsearch-item.active { background:#0054A2; color:#fff; }
.navbar-modsearch-item .mi { width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,84,162,.10); color:#0054A2; flex:0 0 auto; font-size:1rem; }
.navbar-modsearch-item .mt { font-size:.85rem; font-weight:600; line-height:1.15; }
.navbar-modsearch-item .mg { font-size:.68rem; color:var(--panel-muted); margin-left:auto; white-space:nowrap; }
/* No hover azul, tudo em branco (evita texto claro sobre fundo claro) */
.navbar-modsearch-item:hover .mt, .navbar-modsearch-item.active .mt,
.navbar-modsearch-item:hover .mg, .navbar-modsearch-item.active .mg { color:#fff; }
.navbar-modsearch-item:hover .mi, .navbar-modsearch-item.active .mi { background:rgba(255,255,255,.22); color:#fff; }
.navbar-modsearch-empty { padding:.6rem; font-size:.82rem; color:var(--panel-muted); text-align:center; }

/* Mobile (< md): esconde o campo e mostra so a lupa; toque abre o widget de busca. */
@media (max-width: 767.98px) {
  .navbar-modsearch { position:static; transform:none; display:inline-flex; align-items:center; margin-left:auto; margin-right:.4rem; }
  .app-navbar .navbar-actions { margin-left:0 !important; } /* so o modsearch empurra; lupa junto do cluster de acoes */
  .navbar-modsearch-toggle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:1.15rem; cursor:pointer; }
  .navbar-modsearch-toggle:hover { background:rgba(255,255,255,.28); }
  .navbar-modsearch-field { display:none; }
  .navbar-modsearch.open .navbar-modsearch-field { display:flex; position:fixed; top:calc(var(--panel-topbar-h) + 8px); left:10px; right:10px; width:auto; background:#fff; border:1px solid var(--panel-border); box-shadow:0 16px 40px rgba(15,23,42,.28); border-radius:14px; padding:.55rem .95rem; z-index:1060; }
  .navbar-modsearch.open .navbar-modsearch-ic { color:var(--brand-primary); }
  .navbar-modsearch.open .navbar-modsearch-input { color:var(--panel-ink); }
  .navbar-modsearch.open .navbar-modsearch-input::placeholder { color:var(--panel-muted); }
}
.btn-logout { border-radius:999px; font-weight:700; }
.navbar-ctx .dropdown-toggle {
  background:rgba(255,255,255,.18); border:0; color:#fff;
  border-radius:999px; font-size:.85rem; padding:.35rem .85rem;
  display:inline-flex; align-items:center; max-width:min(240px,46vw);
  white-space:nowrap; overflow:hidden;
}
.navbar-ctx .dropdown-toggle > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.navbar-ctx .dropdown-toggle:hover { background:rgba(255,255,255,.28); color:#fff; }
.navbar-ctx .dropdown-toggle::after { margin-left:.4rem; flex:0 0 auto; }
.navbar-ctx .dropdown-menu {
  border:0; border-radius:12px; padding:.35rem; min-width:260px;
  max-width:min(320px, calc(100vw - 24px)); max-height:min(70vh, 520px); overflow-y:auto;
  box-shadow:0 14px 34px rgba(15,23,42,.18);
}
.navbar-ctx .dropdown-item { text-align:left; }
.navbar-ctx .dropdown-item > span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.navbar-ctx .dropdown-item > i { flex:0 0 auto; }
.navbar-ctx .dropdown-header {
  color:var(--panel-muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; padding:.35rem .55rem;
}
.navbar-ctx .dropdown-item {
  border-radius:8px; padding:.45rem .55rem; font-size:.9rem; color:var(--panel-ink);
}
.navbar-ctx .dropdown-item:hover { background:rgba(0,84,162,.08); color:var(--panel-ink); }
.navbar-ctx .dropdown-item.active { background:var(--brand-primary,#0054A2); color:#fff; }
.navbar-ctx .dropdown-item.active small { color:rgba(255,255,255,.85)!important; }
.dropdown-scroll { max-height: 60vh; overflow: auto; }

/* Wrapper de duas colunas --------------------------------------------------- */
/* fundo azul (= sidebar) para aparecer atrás dos cantos arredondados */
#wrapper { display:flex; height: calc(100vh - var(--panel-topbar-h)); margin-top: var(--panel-topbar-h); background: var(--brand-primary, #0054A2); }

#sidebar-wrapper {
  width: var(--panel-side-w); flex-shrink:0;
  height: calc(100vh - var(--panel-topbar-h)); overflow-y:auto;
  background: var(--brand-primary, #0054A2);
  box-shadow: 2px 0 10px rgba(0,0,0,.10);
  transition: margin .25s ease-out;
}
#sidebar-wrapper .side-section {
  text-transform:uppercase; color:rgba(255,255,255,.55);
  font-size:.62rem; letter-spacing:1px; margin:1rem .75rem .25rem;
}
.sidebar-link {
  display:flex; align-items:center; gap:.55rem;
  color:#fff; opacity:.82; text-decoration:none;
  font-size:.88rem; line-height:1.32; border-radius:8px;
  padding:.4rem .7rem; margin:.1rem .5rem; transition:all .2s ease;
}
.sidebar-link i { font-size:1.05rem; }
.sidebar-link:hover { opacity:1; background:rgba(255,255,255,.10); transform:translateX(4px); color:#fff; }
.sidebar-link.active { opacity:1; background:rgba(255,255,255,.20); font-weight:700; }
.sidebar-link.disabled { opacity:.45; pointer-events:none; }
.sidebar-link .soon { margin-left:auto; font-size:.6rem; background:rgba(255,255,255,.18); border-radius:999px; padding:.05rem .4rem; }

#page-content-wrapper { flex:1; height: calc(100vh - var(--panel-topbar-h)); overflow-y:auto; overflow-x:hidden; overscroll-behavior: contain; background: var(--panel-bg); border-top-left-radius: 20px; }

/* Scrollbar clara na sidebar */
#sidebar-wrapper::-webkit-scrollbar { width:8px; }
#sidebar-wrapper::-webkit-scrollbar-thumb { background:rgba(255,255,255,.28); border-radius:8px; }

/* Cards / dashboard --------------------------------------------------------- */
.dash-card { border:0; border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.05); transition:transform .15s ease, box-shadow .15s ease; }
a.dash-link { display:block; text-decoration:none; }
a.dash-link:hover .dash-card { transform:translateY(-2px); box-shadow:0 8px 24px rgba(15,23,42,.12); }
.dash-titulo { display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:.72rem; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--panel-muted); }
.dash-icone { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; font-size:1rem; }
.dash-numero { margin:0; font-size:2.2rem; font-weight:800; line-height:1.05; letter-spacing:-1px; color:var(--panel-ink); }
.dash-nota { font-size:.72rem; color:var(--panel-muted); line-height:1.3; }
.dash-card.dash-alerta { box-shadow:0 0 0 1.5px rgba(220,38,38,.35); }

.panel-card { border:0; border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.05); }
.panel-card .card-header { background:#fff; border-bottom:1px solid var(--panel-border); font-weight:600; color:var(--panel-ink); }

/* Largura padrão de formulários: aproveita o espaço do container sem inputs largos demais. */
.form-shell { max-width:1040px; }
.form-shell-sm { max-width:640px; }
/* Grade de campos em 2 colunas em telas largas; .ff-2 ocupa a linha inteira (textarea etc). */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; }
.form-grid .ff-2 { grid-column:1 / -1; }
@media (max-width: 767.98px) { .form-grid { grid-template-columns:1fr; } }

/* GRC (M17): heatmap 5x5 de risco. */
.risk-matrix { border-collapse:separate; border-spacing:3px; width:100%; }
.risk-matrix .rm-cell { width:18%; height:38px; text-align:center; color:#fff; font-weight:700; border-radius:6px; font-size:.85rem; }
.risk-matrix .rm-axis { text-align:center; color:#94a3b8; font-size:.72rem; font-weight:600; width:auto; }

/* Data Mapping (M14): "nós" origem/destino no cartão de fluxo. */
.flow-node { display:inline-flex; align-items:center; padding:.28rem .6rem; border-radius:999px;
    background:var(--panel-soft, #eef2f7); border:1px solid var(--panel-border); font-size:.8rem; font-weight:600; color:var(--panel-ink); }
.flow-node-dest { background:rgba(0,84,162,.08); border-color:rgba(0,84,162,.25); color:#0054A2; }

.page-title { font-size:1.35rem; font-weight:700; color:var(--panel-ink); letter-spacing:-.02em; margin:0; }
/* Botão de marca como variante nativa do Bootstrap: fill sólido em repouso, hover,
   active e disabled. Define as --bs-btn-* para o hover NÃO cair no transparente. */
.btn-brand {
    --bs-btn-color:#fff;
    --bs-btn-bg:var(--brand-primary,#0054A2);
    --bs-btn-border-color:var(--brand-primary,#0054A2);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:color-mix(in srgb, var(--brand-primary,#0054A2) 88%, #000);
    --bs-btn-hover-border-color:color-mix(in srgb, var(--brand-primary,#0054A2) 88%, #000);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:color-mix(in srgb, var(--brand-primary,#0054A2) 80%, #000);
    --bs-btn-active-border-color:color-mix(in srgb, var(--brand-primary,#0054A2) 80%, #000);
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:var(--brand-primary,#0054A2);
    --bs-btn-disabled-border-color:var(--brand-primary,#0054A2);
}
.text-brand { color:var(--brand-primary,#0054A2)!important; }
.bg-brand { background:var(--brand-primary,#0054A2)!important; }

/* Responsivo: sidebar vira gaveta ------------------------------------------- */
#menu-toggle { color:#fff; font-size:1.5rem; text-decoration:none; }
@media (max-width: 767.98px) {
  #sidebar-wrapper { position:fixed; top:var(--panel-topbar-h); left:0; z-index:1020;
    box-shadow:4px 0 20px rgba(0,0,0,.2); display:none; }
  #sidebar-wrapper.sidebar-aberta { display:block; }
  .navbar-logo { width:auto; padding:0 1rem; }
  .navbar-logo img { height:29px; margin:1.5px 0; }
}

/* ===== Widgets do cockpit (estilo dashboard analítico) ===== */
.widget { border:0; border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.05); height:100%; }
.widget .whead { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem .1rem; font-size:.85rem; font-weight:600; color:var(--panel-ink); }
.widget .whead .sub { font-size:.72rem; color:var(--panel-muted); font-weight:500; }
.widget .wbody { padding:.7rem 1rem 1rem; }

.kpi .k-ico { width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; margin-bottom:.5rem; }
.kpi .k-num { font-size:1.9rem; font-weight:800; letter-spacing:-1px; color:var(--panel-ink); line-height:1; }
.kpi .k-lab { font-size:.72rem; text-transform:uppercase; letter-spacing:.3px; color:var(--panel-muted); font-weight:600; margin-top:.25rem; }
.kpi .k-sub { font-size:.72rem; color:var(--panel-muted); margin-top:.15rem; }
.trend { font-size:.72rem; font-weight:700; }
.trend-up { color:#0f8b43; } .trend-down { color:#dc2626; } .trend-flat { color:var(--panel-muted); }

/* Donut / gauge via conic-gradient (percentual inline) */
.donut { width:130px; height:130px; border-radius:50%; position:relative; flex:0 0 auto; }
.donut::after { content:""; position:absolute; inset:20px; background:#fff; border-radius:50%; }
.donut .d-center { position:absolute; inset:0; display:grid; place-items:center; z-index:1; text-align:center; }
.donut .d-center .v { font-size:1.5rem; font-weight:800; color:var(--panel-ink); line-height:1; }
.donut .d-center .l { font-size:.62rem; color:var(--panel-muted); text-transform:uppercase; }
.legend { display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; }
.legend .item { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.legend .dot { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:.45rem; }
.legend .nm { color:var(--panel-soft); }
.legend .vl { font-weight:700; color:var(--panel-ink); }

/* Barras horizontais */
.barlist { display:flex; flex-direction:column; gap:.55rem; }
.barlist .row { display:grid; grid-template-columns:1fr auto; gap:.2rem; font-size:.78rem; }
.barlist .lab { color:var(--panel-soft); display:flex; justify-content:space-between; }
.barlist .lab .v { color:var(--panel-ink); font-weight:700; }
.barlist .track { grid-column:1 / -1; height:8px; border-radius:6px; background:#eef2f6; overflow:hidden; }
.barlist .fill { height:100%; background:var(--brand-primary,#0054A2); border-radius:6px; }

/* Colunas (mini bar chart vertical) */
.cols { display:flex; align-items:flex-end; gap:.5rem; height:120px; padding-top:.5rem; }
.cols .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:.35rem; height:100%; justify-content:flex-end; }
.cols .col .bar { width:70%; max-width:26px; background:var(--brand-primary,#0054A2); border-radius:6px 6px 0 0; min-height:3px; }
.cols .col .cl { font-size:.62rem; color:var(--panel-muted); }
.cols .col .cv { font-size:.68rem; font-weight:700; color:var(--panel-ink); }

/* ===== Refinos do cockpit ===== */
.widget { transition: box-shadow .15s ease, transform .15s ease; }
.widget:hover { box-shadow:0 8px 24px rgba(15,23,42,.09); }
.dash-greet { font-size:.82rem; color:var(--panel-muted); }

/* KPI com faixa de acento à esquerda */
/* KPI horizontal: faixa FINA no topo (2px, como a tela de login), ícone à esquerda,
   título ao lado e contador à direita na mesma linha. */
.kpi2 { position:relative; overflow:hidden; }
.kpi2::before { content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg,#031881,#0054A2 45%,#007A11 80%,#90BE13); }
.kpi2 .wbody { padding-top:.9rem; }
.kpi2 .khead { display:flex; align-items:center; gap:.6rem; }
.kpi2 .k-ico { width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; }
.kpi2 .k-lab { flex:1; min-width:0; font-size:.72rem; text-transform:uppercase; letter-spacing:.3px; color:var(--panel-muted); font-weight:700; line-height:1.15; }
.kpi2 .k-num { font-size:1.7rem; font-weight:800; letter-spacing:-1px; color:var(--panel-ink); line-height:1; flex:0 0 auto; }
.kpi2 .k-sub { font-size:.7rem; color:var(--panel-muted); margin-top:.45rem; }

/* Atividade recente: ícone em caixa arredondada, alinhado; hora à direita. */
.act-list { display:flex; flex-direction:column; }
.act-item { display:flex; align-items:center; gap:.6rem; padding:.5rem .25rem; border-bottom:1px solid var(--panel-border); }
.act-item:last-child { border-bottom:0; }
.act-item .act-ico { width:30px; height:30px; border-radius:8px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,84,162,.10); color:#0054A2; }
.act-item .act-meta { flex:1; min-width:0; display:flex; flex-direction:column; }
.act-item .act-meta .an { font-weight:600; color:var(--panel-ink); font-size:.85rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-item .act-meta .ad { font-size:.7rem; color:var(--panel-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-item .act-time { font-size:.72rem; color:var(--panel-muted); flex:0 0 auto; }

/* Listas com rolagem (mantém o card alinhado quando há muitos itens). */
.scrolly { overflow-y:auto; }
.scrolly.cap4 { max-height:232px; }
.scrolly.cap6 { max-height:266px; }
.scrolly::-webkit-scrollbar { width:6px; }
.scrolly::-webkit-scrollbar-thumb { background:var(--panel-border); border-radius:6px; }

/* Lista de pendências (um item por linha) */
.pend-list { display:flex; flex-direction:column; }
.pend-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .25rem; border-bottom:1px solid var(--panel-border); text-decoration:none; color:inherit; }
.pend-item:last-child { border-bottom:0; }
.pend-item:hover { background:rgba(0,84,162,.04); border-radius:8px; }
.pend-item .pend-ico { width:30px; height:30px; border-radius:8px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:rgba(242,156,19,.14); color:#F29C13; }
.pend-item .pend-nm { flex:1; min-width:0; display:flex; flex-direction:column; }
.pend-item .pend-nm .n { font-weight:600; color:var(--panel-ink); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pend-item .pend-nm .k { font-size:.7rem; color:var(--panel-muted); }
.pend-item .pend-go { color:var(--panel-muted); flex:0 0 auto; }

/* Acesso rápido (tiles) */
.quick { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.quick a { display:flex; align-items:center; gap:.45rem; padding:.55rem; border:0; border-radius:10px; text-decoration:none; color:var(--panel-ink); background:#eef3f9; transition:all .15s ease; min-width:0; }
.quick a:hover { background:#e2ecf7; box-shadow:0 4px 12px rgba(0,84,162,.10); transform:translateY(-1px); }
.quick a .qi { width:28px; height:28px; border-radius:8px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; background:rgba(0,84,162,.10); color:var(--brand-primary,#0054A2); }
.quick a .qmeta { min-width:0; display:flex; flex-direction:column; }
.quick a .qt { font-weight:600; font-size:.75rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quick a .qs { font-size:.63rem; color:var(--panel-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== Banner de impersonação (Modo provedor) ===== */
.prov-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:linear-gradient(90deg,#8a1f1f,#b23b3b); color:#fff; border-radius:12px;
  padding:.55rem .9rem; margin-bottom:1.1rem; font-size:.9rem; font-weight:600;
  box-shadow:0 6px 18px rgba(178,59,59,.28); }
.prov-banner strong { text-decoration:underline; }

/* ===== Snapshot de módulos no cockpit ===== */
.modgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  width: 100%;
}
@media (min-width: 768px) {
  .modgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
  }
}
@media (min-width: 992px) {
  .modgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
  }
}
.modcard {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .65rem;
  border-radius: 12px;
  background: #f4f7fb;
  border: 1px solid var(--panel-border);
  text-decoration: none;
  color: var(--panel-ink);
  min-width: 0;
  transition: all .15s ease;
}
.modcard:hover {
  background: #e9eff8;
  border-color: #93c5fd;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,84,162,.10);
}
.modcard .mi {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.modcard .mm {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modcard .mm .mt {
  font-weight: 600;
  font-size: .80rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.2;
}
.modcard .mm .ms {
  font-size: .68rem;
  color: var(--panel-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.2;
}
.modcard .mg {
  color: var(--panel-muted);
  flex: 0 0 auto;
  font-size: .85rem;
}
@media (max-width: 767.98px) {
  .modcard {
    padding: .5rem .5rem;
    gap: .4rem;
  }
  .modcard .mg {
    display: none;
  }
  .modcard .mm .mt {
    font-size: .76rem;
  }
  .modcard .mm .ms {
    font-size: .65rem;
  }
}

/* ===== Documento imprimível (M8) ===== */
.paper { background:#fff; max-width:820px; margin:0 auto; padding:44px 56px; border-radius:10px; box-shadow:0 2px 12px rgba(15,23,42,.07); color:#1f2937; line-height:1.6; }
.paper h1 { font-size:1.5rem; text-align:center; margin:0 0 1.2rem; color:#0b1b2c; letter-spacing:-.01em; }
.paper h2 { font-size:1.15rem; margin:1.2rem 0 .5rem; color:#0b1b2c; }
.paper h3 { font-size:1rem; margin:1rem 0 .35rem; color:#0b1b2c; }
.paper p, .paper li { font-size:.95rem; }
.paper ol, .paper ul { padding-left:1.4rem; }
.paper .assinatura { margin-top:2.6rem; text-align:center; }
@media print {
  .app-navbar, #sidebar-wrapper, .no-print { display:none !important; }
  #wrapper { display:block !important; margin:0 !important; height:auto !important; background:#fff !important; }
  #page-content-wrapper { height:auto !important; overflow:visible !important; background:#fff !important; border-radius:0 !important; }
  body.panel-body { overflow:visible !important; }
  .container-fluid { padding:0 !important; }
  .paper { box-shadow:none; max-width:none; padding:0; margin:0; }
}

/* =========================================================================
   Padronizacao de TAMANHO de botao em toda a plataforma (landing/painel/auth).
   Altura, padding e fonte uniformes; cor e raio permanecem por variante.
   !important para vencer utilitarios (py-*, btn-sm/btn-lg) e defs inline duplicadas.
   .btn-close (icone de fechar) fica de fora de proposito.
   ========================================================================= */
.btn:not(.btn-close),
.btn-brand,
.btn-brand-accent,
.btn-brand-light,
.btn-brand-gold,
.btn-brand-green,
.gc-btn-primary {
    min-height: 40px !important;
    padding: .5rem 1.2rem !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4rem !important;
}

/* Botao SOMENTE ICONE: circulo perfeito 36x36 identico ao avatar do usuario
   (.navbar-circulo), lado a lado no header. Altura fixa e flex centralizam o icone. */
.btn-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto;
}

/* =========================================================================
   Formularios em modal (Onda 2). Overlay unico reutilizavel, injetado por
   panel.js (mesmo mecanismo .is-open da landing). Tokens do design system;
   z-index acima da topbar (1030). A CSP restringe apenas script, entao CSS
   externo e' permitido. Sem dependencia de Bootstrap JS.
   ========================================================================= */
.pm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    transition: opacity .18s ease, visibility .18s ease;
}
.pm-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.pm-dialog {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    /* Altura contida: cap mais baixo que a tela (não vira "folha" full-screen); o corpo rola. */
    max-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(8px) scale(.99);
    transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.pm-overlay.is-open .pm-dialog { transform: none; }
/* Cabecalho FIXO do modal: nao rola; o X fica aqui e a barra de rolagem do corpo comeca abaixo. */
.pm-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f6;
    background: #fff;
    border-radius: 14px 14px 0 0;
}
.pm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1.5rem 1.75rem;
}
.pm-close {
    z-index: 2;
    width: 34px;
    height: 34px;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--panel-ink, #0f172a);
    font-size: 1.05rem;
    cursor: pointer;
}
.pm-close:hover { background: #e2e8f0; }
.pm-close:focus-visible { outline: 2px solid var(--brand-primary, #0054A2); outline-offset: 2px; }
/* Titulo (icone + heading) movido para o cabecalho fixo; empurra o X para a direita. */
.pm-title { display: flex; align-items: center; gap: .5rem; min-width: 0; margin-right: auto; }
.pm-title h1, .pm-title h2, .pm-title h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-title .ajuda-modal-ico { flex-shrink: 0; }
/* O card do form nao vira "card dentro de card" dentro do modal. */
.pm-body .panel-card { box-shadow: none; background: transparent; }
.pm-body .panel-card > .card-body { padding: 0; }
.pm-body .page-title { font-size: 1.2rem; }
/* Botao "Voltar" do fragmento fica oculto dentro do modal (o X ja fecha). */
.pm-hide { display: none !important; }
/* Reforco estrutural (independe do JS e sem flash): qualquer link com seta de
   "voltar" dentro do modal fica oculto - evita a duplicidade Voltar + X. */
.pm-body a:has(.ph-arrow-left) { display: none !important; }
.pm-loading { padding: 3rem 1rem; text-align: center; color: var(--panel-soft, #64748b); }
.pm-loading .ph { font-size: 1.4rem; vertical-align: middle; animation: pm-spin 1s linear infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
body.pm-lock { overflow: hidden; }

/* Editor de texto rico (barra + area contenteditable + alternancia de codigo). */
.rich-editor { margin-bottom: .35rem; }
.rich-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }
.rich-toolbar .btn { min-height: 32px; padding: .25rem .55rem; font-size: .84rem; display: inline-flex; align-items: center; justify-content: center; }
.rich-area { min-height: 280px; max-height: 560px; overflow-y: auto; line-height: 1.65; background: #fff; border-radius: var(--bs-border-radius, .375rem); }
.rich-area:focus { outline: 2px solid var(--brand-primary, #0054A2); outline-offset: 1px; border-color: var(--brand-primary, #0054A2); }
.rich-area h1 { font-size: 1.35rem; margin: 1rem 0 .5rem; font-weight: 700; color: #0f172a; }
.rich-area h2 { font-size: 1.20rem; margin: 1rem 0 .45rem; font-weight: 700; color: #0f172a; }
.rich-area h3 { font-size: 1.05rem; margin: .8rem 0 .35rem; font-weight: 600; color: #0f172a; }
.rich-area h4 { font-size: 0.95rem; margin: .6rem 0 .3rem; font-weight: 600; color: #0f172a; }
.rich-area p { margin: 0 0 .65rem; color: #334155; }
.rich-area ul, .rich-area ol { padding-left: 1.5rem; margin: 0 0 .65rem; color: #334155; }
.rich-area li { margin-bottom: .25rem; }
.rich-area a { color: var(--brand-primary, #0054A2); text-decoration: underline; }
.rich-area:empty::before { content: attr(data-placeholder); color: var(--panel-soft, #94a3b8); }
.rich-raw { min-height: 280px; max-height: 560px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .84rem; line-height: 1.5; color: #0f172a; background: #f8fafc; }
.policy-content h1 { font-size: 1.4rem; margin: 1.2rem 0 .6rem; font-weight: 700; color: #0f172a; }
.policy-content h2 { font-size: 1.25rem; margin: 1.1rem 0 .5rem; font-weight: 700; color: #0f172a; }
.policy-content h3 { font-size: 1.08rem; margin: .9rem 0 .4rem; font-weight: 600; color: #0f172a; }
.policy-content p { margin: 0 0 .75rem; }
.policy-content ul, .policy-content ol { padding-left: 1.5rem; margin: 0 0 .75rem; }
.policy-content li { margin-bottom: .3rem; }
.policy-content a { color: var(--brand-primary, #0054A2); }

/* Relatório 360 (impressão/PDF). */
.rep360 { max-width: 940px; }
.rep-head { text-align: center; border-bottom: 2px solid #eef2f7; padding-bottom: 1rem; margin-bottom: 1.4rem; }
.rep-brand { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-bottom: .7rem; flex-wrap: wrap; }
.rep-logo { max-height: 46px; max-width: 190px; width: auto; object-fit: contain; }
.rep-logo-lf { max-height: 34px; opacity: .95; }
.rep-head h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
.rep-sub { color: #64748b; font-size: .9rem; margin: 0; }
.rep-hero { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.rep-hero-side { flex: 1; min-width: 240px; }
.rep-parts { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; }
.rep-part .rep-track { height: 7px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin-top: 2px; }
.rep-part .rep-fill { height: 100%; border-radius: 999px; }
.rep-seal-line { margin-top: .8rem; font-size: .9rem; color: #334155; }
.rep360 h2, .panorama h2 { font-size: 1.05rem; border-left: 4px solid var(--brand-primary, #0054A2); padding-left: .6rem; margin: 1.4rem 0 .7rem; }
.panorama h2:first-child { margin-top: 0; }
.rep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.rc { border: 1px solid #e6edf5; border-radius: 10px; padding: .6rem .7rem; background: #fff; }
.rc-h { font-weight: 700; font-size: .82rem; color: #0b2036; margin-bottom: .4rem; display: flex; align-items: center; gap: .35rem; }
.rc-h i { color: var(--brand-primary, #0054A2); }
.rc-r { display: flex; justify-content: space-between; font-size: .8rem; color: #475569; padding: .12rem 0; }
.rc-r b { color: #0b2036; }
.rep-risk { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.rep-risk-i { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: #334155; }
.rep-risk-i .dot { width: 11px; height: 11px; border-radius: 50%; }
.rep-risk-i b { margin-left: .25rem; }
.rep-pend { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem .9rem; }
.rep-pend-i { display: flex; justify-content: space-between; font-size: .88rem; border-bottom: 1px dashed #eef2f7; padding: .2rem 0; }
.rep-foot { margin-top: 1.6rem; font-size: .78rem; color: #94a3b8; text-align: center; }
@media (max-width: 767px) { .rep-grid { grid-template-columns: repeat(2, 1fr); } .rep-pend { grid-template-columns: 1fr; } }
@media print { .rep-grid { grid-template-columns: repeat(4, 1fr); } }

/* Texto/politica da Central de Privacidade publica. */
.cp-intro h2 { font-size: 1.3rem; margin: 1.1rem 0 .5rem; }
.cp-intro h3 { font-size: 1.1rem; margin: .9rem 0 .4rem; }
.cp-intro p { margin: 0 0 .7rem; }
.cp-intro ul, .cp-intro ol { padding-left: 1.4rem; margin: 0 0 .7rem; }
.cp-intro a { color: var(--brand-primary, #0054A2); }

/* Assistente de IA (importar/gerar/preencher) - caixa discreta acima do campo alvo. */
.ai-assist-box {
    border: 1px solid var(--panel-border, #e2e8f0);
    border-radius: 12px;
    padding: .85rem 1rem;
    background: linear-gradient(180deg, rgba(0, 84, 162, .04), rgba(0, 84, 162, .01));
}
.ai-assist-head { font-weight: 700; color: var(--panel-ink, #0f172a); font-size: .9rem; margin-bottom: .5rem; }
/* "Preencher com IA" dentro do modal (fase 6). */
.pm-ai-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; }
.ai-suggested { background: #fffbea !important; box-shadow: inset 0 0 0 1px #f0d98a; }
@media (max-width: 575.98px) {
    .pm-overlay { padding: .75rem; }
    .pm-dialog { max-height: calc(100vh - 1.5rem); }
    .pm-body { padding: 1.25rem 1.1rem 1.5rem; }
}

/* =========================================================================
   Onboarding de Conformidade. Icone de progresso (anel %) na navbar + dropdown
   com o mapa de areas (feito/pendente) e a pagina /admin/onboarding. O anel usa
   conic-gradient com --pct (estilo inline permitido pela CSP). Dourado no 100%.
   ========================================================================= */
.navbar-onboarding .ob-btn {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    line-height: 0; display: inline-flex; min-height: 0 !important;
}
.ob-ring {
    --pct: 0;
    width: 36px; height: 36px; border-radius: 50%;
    background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255, 255, 255, .25) 0);
    display: grid; place-items: center;
    transition: background .3s ease;
}
.ob-btn.is-complete .ob-ring { background: conic-gradient(#f4d03f 100%, #f4d03f 0); }
.ob-btn:hover .ob-ring { filter: brightness(1.05); }
.ob-ring-num {
    width: 27px; height: 27px; border-radius: 50%;
    background: rgba(3, 18, 55, .45); color: #fff;
    display: grid; place-items: center;
    font-size: .58rem; font-weight: 700; line-height: 1;
}
.ob-ring-num small { font-size: .68rem; font-weight: 600; opacity: 1; margin-top: -8px; }

/* Dropdown do mapa de conformidade */
.ob-menu { width: 300px; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 10px 30px rgba(15, 23, 42, .16); overflow: hidden; }
.ob-head { padding: .85rem 1rem .6rem; border-bottom: 1px solid var(--panel-border); }
.ob-head-title { font-weight: 700; color: var(--panel-ink); display: flex; align-items: center; gap: .4rem; }
.ob-head-sub { font-size: .8rem; color: var(--panel-soft); margin-top: .1rem; }
.ob-progress { padding: .75rem 1rem; }
.ob-progress-bar { height: 8px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.ob-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--brand-primary, #0054A2); transition: width .3s ease; }
.ob-progress-meta { font-size: .78rem; color: var(--panel-soft); margin-top: .4rem; }
.ob-progress-meta strong { color: var(--panel-ink); }
.ob-areas { padding: .25rem 0 .35rem; }
.ob-area {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem 1rem; text-decoration: none; color: var(--panel-ink);
    transition: background .12s ease;
}
.ob-area:hover { background: rgba(0, 84, 162, .06); }
.ob-area-ic { width: 22px; text-align: center; font-size: 1.05rem; flex: 0 0 auto; }
.ob-area-lb { flex: 1 1 auto; font-size: .86rem; }
.ob-area-st { flex: 0 0 auto; font-size: 1rem; }
.ob-area.is-done .ob-area-st { color: #16a34a; }
.ob-area.is-pending .ob-area-st { color: var(--panel-muted); }
.ob-area.is-pending .ob-area-lb { font-weight: 600; }
.ob-foot {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .7rem 1rem; border-top: 1px solid var(--panel-border);
    text-decoration: none; font-size: .85rem; font-weight: 600; color: var(--brand-primary, #0054A2);
}
.ob-foot:hover { background: rgba(0, 84, 162, .06); }

/* Pagina /admin/onboarding */
.ob-page-ring {
    --pct: 0;
    width: 128px; height: 128px; margin: 0 auto; border-radius: 50%;
    background: conic-gradient(var(--brand-primary, #0054A2) calc(var(--pct) * 1%), #e9edf2 0);
    display: grid; place-items: center;
}
.ob-page-ring.is-complete { background: conic-gradient(#d4af37 100%, #d4af37 0); }
.ob-page-ring-num {
    width: 98px; height: 98px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; gap: 0; line-height: 1;
    font-size: 1.75rem; font-weight: 800; color: var(--panel-ink); letter-spacing: -.02em;
}
/* "%" no mesmo tamanho e alinhado ao numero (nao "voando") */
.ob-page-ring-num small { font-size: 1em; font-weight: 800; color: var(--panel-ink); line-height: 1; align-self: auto; margin-top: 0; letter-spacing: -.02em; }
.ob-master { font-weight: 800; color: #b8860b; }
.ob-section-title { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--panel-soft); margin-bottom: .9rem; }
.ob-steps { display: flex; flex-direction: column; gap: .6rem; }
.ob-step {
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem .9rem; border: 1px solid var(--panel-border); border-radius: 12px; background: #fff;
}
.ob-step-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: #f4f6f8; display: grid; place-items: center; font-size: 1.25rem; }
.ob-step-body { flex: 1 1 auto; min-width: 0; }
.ob-step-lb { font-weight: 700; color: var(--panel-ink); }
.ob-step-ac { font-size: .84rem; color: var(--panel-soft); }
.ob-step-go { flex: 0 0 auto; }
.ob-done-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .8rem; border-radius: 10px; background: #f4f8f4;
    text-decoration: none; color: var(--panel-ink); font-size: .88rem; font-weight: 600;
    transition: background .12s ease;
}
.ob-done-item:hover { background: #e8f2e8; }
.ob-done-ic { color: #16a34a; font-size: 1.15rem; flex: 0 0 auto; }
@media (max-width: 575.98px) {
    .ob-step { flex-wrap: wrap; }
    .ob-step-go { width: 100%; }
}

/* FirstAI - bolha flutuante de chat (presente em todo o painel) */
.fai-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 1035; }
.fai-toggle { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--brand-primary, #0054A2); color: #fff; font-size: 1.5rem; box-shadow: 0 6px 20px rgba(3, 18, 55, .28); cursor: pointer; display: grid; place-items: center; transition: transform .15s; }
.fai-toggle:hover { transform: translateY(-2px); }
.fai-wrap.is-open .fai-toggle { display: none; }
.fai-panel { position: absolute; right: 0; bottom: 0; width: 360px; max-width: calc(100vw - 32px); height: 480px; max-height: calc(100vh - 96px); background: #fff; border: 1px solid #dbe4ef; border-radius: 14px; box-shadow: 0 12px 40px rgba(3, 18, 55, .22); display: flex; flex-direction: column; overflow: hidden; }
.fai-head { background: var(--brand-primary, #0054A2); color: #fff; padding: 10px 14px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.fai-x { background: transparent; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1; }
.fai-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f6f9fd; }
.fai-msg { max-width: 85%; padding: 8px 11px; border-radius: 12px; font-size: .84rem; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.fai-bot { align-self: flex-start; background: #fff; border: 1px solid #e3e9f2; color: #1f2937; border-bottom-left-radius: 4px; }
.fai-user { align-self: flex-end; background: var(--brand-primary, #0054A2); color: #fff; border-bottom-right-radius: 4px; }
.fai-err { color: #b91c1c; }
.fai-typing { color: #94a3b8; font-style: italic; }
.fai-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #e3e9f2; background: #fff; align-items: flex-end; }
.fai-greet { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 2px; }
.fai-greet-logo { max-width: 128px; height: auto; opacity: .95; align-self: center; }
.fai-msg { text-align: justify; text-justify: inter-word; }
.fai-msg strong { font-weight: 700; }
.fai-msg code { background: rgba(3, 18, 55, .07); padding: 1px 5px; border-radius: 5px; font-size: .82em; }
.fai-input textarea { flex: 1 1 auto; resize: none; border: 1px solid #cfd8e6; border-radius: 12px; padding: 9px 12px; font-size: .86rem; min-height: 42px; max-height: 120px; line-height: 1.35; font-family: inherit; }
.fai-input textarea:focus { outline: none; border-color: var(--brand-primary, #0054A2); box-shadow: 0 0 0 3px rgba(0, 84, 162, .12); }
.fai-send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--brand-primary, #0054A2); color: #fff; cursor: pointer; font-size: 1.05rem; }
@media (max-width: 480px) { .fai-wrap { right: 12px; bottom: 12px; } .fai-panel { width: calc(100vw - 24px); height: 70vh; } }
@media print { .fai-wrap { display: none !important; } }

/* Botoes do painel sempre azuis: primario azul solido (btn-brand); secundarios em
   azul claro no lugar do cinza (btn-light), mantendo a hierarquia sem cinza. */
.panel-body .btn-light,
.panel-body .btn-outline-secondary,
.panel-body .btn-secondary {
    background-color: #e7f0fb;
    border-color: #cfe0f5;
    color: var(--brand-primary, #0054A2);
}
.panel-body .btn-light:hover,
.panel-body .btn-light:focus,
.panel-body .btn-outline-secondary:hover,
.panel-body .btn-secondary:hover {
    background-color: #d6e6f8;
    border-color: #b9d4f0;
    color: #003f7a;
}

/* Relatorio 360 - overlay de loading da analise IA */
.ai-overlay { position: fixed; inset: 0; z-index: 1040; display: flex; align-items: center; justify-content: center; background: rgba(0, 84, 162, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 1; transition: background-color 2.4s ease, backdrop-filter 2.4s ease, -webkit-backdrop-filter 2.4s ease, opacity .6s ease; }
/* Fundo escurece ate ~10% para revelar o conteudo surgindo atras (mantem card + spinner). */
.ai-overlay.is-dim { background: rgba(0, 84, 162, .10); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.ai-overlay.is-dim .ai-overlay-card { box-shadow: 0 18px 50px rgba(3, 18, 55, .22); }
.ai-overlay.is-hiding { opacity: 0; }
/* Barra de acoes do 360 fixa no topo do scroll: o botao PDF nunca "some" com o auto-scroll da IA. */
.rep-toolbar { position: sticky; top: 0; z-index: 30; background: var(--panel-bg, #f4f7fb); padding: 10px 0; box-shadow: 0 8px 12px -10px rgba(3, 18, 55, .18); }
/* Exportacao de Dados: linhas de tabela selecionaveis */
.export-tbl { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e6edf5; border-radius: 8px; cursor: pointer; background: #fff; font-size: .85rem; }
.export-tbl:hover { background: #f6f9fd; }
.export-tbl input { flex-shrink: 0; }
.export-tbl-lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.export-tbl-n { font-size: .72rem; color: #94a3b8; background: #eef2f6; border-radius: 6px; padding: 1px 6px; }
/* Construtor de Relatorios: cards de tipo tematico com selecao de modulos e narrativa de integracao */
.rb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rb-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6edf5; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 24px -18px rgba(3, 18, 55, .3); min-width: 0; }
.rb-card-h { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .7rem; }
.rb-card-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: #eaf2ff; color: #0054a2; font-size: 1.3rem; }
.rb-card-title { font-weight: 700; color: #17233b; }
.rb-card-desc { font-size: .82rem; color: #64748b; line-height: 1.35; }
.rb-card-body { flex: 1; min-width: 0; }
.rb-sec-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 700; margin-bottom: .4rem; }
.rb-mods { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.rb-mod { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: #334155; background: #f4f8fd; border: 1px solid #e2ebf5; border-radius: 999px; padding: .2rem .6rem; cursor: pointer; user-select: none; }
.rb-mod input { accent-color: #0054a2; cursor: pointer; }
.rb-chips { margin-bottom: .6rem; }
.rb-chip { display: inline-flex; align-items: center; font-size: .8rem; color: #0054a2; background: #eaf2ff; border-radius: 999px; padding: .25rem .7rem; font-weight: 600; }
.rb-relations { font-size: .8rem; color: #475569; line-height: 1.4; margin: 0; }
.rb-card-foot { margin-top: .8rem; display: flex; justify-content: flex-end; }
@media (max-width: 991px) { .rb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .rb-grid { grid-template-columns: 1fr; } }
/* Evolucao/tendencias dos relatorios emitidos: headline, sparkline e deltas por indicador */
.tr-headline { font-size: 2rem; font-weight: 800; line-height: 1; color: #0054a2; }
.tr-spark { display: flex; align-items: flex-end; gap: .5rem; overflow-x: auto; padding: 4px 0 0; min-height: 128px; }
.tr-spark-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 44px; }
.tr-spark-val { font-size: .72rem; color: #64748b; font-weight: 700; }
.tr-spark-bar { width: 26px; background: linear-gradient(#2e7bd6, #0054a2); border-radius: 5px 5px 0 0; min-height: 3px; }
.tr-spark-x { font-size: .66rem; color: #94a3b8; white-space: nowrap; }
.trend-badge { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .12rem .5rem; }
.trend-up { color: #0f8b43; background: #e7f6ee; }
.trend-down { color: #c0392b; background: #fdecea; }
.trend-flat { color: #64748b; background: #eef2f6; }
.tr-table th, .tr-table td { font-size: .8rem; }
/* Matriz de Calor Setorial: celulas coloridas por nivel de exposicao. */
.heat-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 6px 10px; border-radius: 8px; font-weight: 700; font-size: .85rem; }
.heat-table th, .heat-table td { border-color: #eef2f6; }
.heat-table thead th { font-weight: 600; }
/* Biblioteca de processos ROPA: cartoes selecionaveis. */
.lib-proc { cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.lib-proc:hover { background: #f6f9fd; }
.lib-proc:has(input:checked) { background: rgba(0, 84, 162, .06); border-color: rgba(0, 84, 162, .4) !important; }
.lib-proc .min-w-0 { min-width: 0; }
/* Ajuda contextual (modal por tela): secoes funcionamento/legal/interpretar/proximo */
.ajuda-modal-ico { width: 34px; height: 34px; border-radius: 9px; background: rgba(0,84,162,.10); color: var(--brand-primary,#0054A2); display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.ajuda-sec { margin-top: 14px; padding: 12px 14px; border: 1px solid #e6edf5; border-radius: 10px; background: #fbfdff; }
.ajuda-sec-h { font-size: .8rem; font-weight: 700; color: var(--brand-primary,#0054A2); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .3px; }
.ajuda-sec-body { font-size: .87rem; color: #334155; line-height: 1.55; }
.ajuda-sec-body h6 { font-size: .85rem; color:#0b1b2c; margin: 10px 0 4px; }
.ajuda-sec-body ul, .ajuda-sec-body ol { padding-left: 18px; margin: 0 0 8px; }
.ajuda-sec-body p { margin: 0 0 8px; }
.ajuda-sec-body code { background: rgba(3,18,55,.07); padding: 1px 5px; border-radius: 5px; font-size: .82em; }
.ajuda-sec-legal { background: #fff8ec; border-color: #f0e2c4; }
.ajuda-sec-legal .ajuda-sec-h { color: #92610a; }
.ajuda-sec-proximo { background: #eef7ef; border-color: #cfe8d6; }
.ajuda-sec-proximo .ajuda-sec-h { color: #0f8b43; }
/* Modal bloqueante de aceite de Termos + Politica (so prossegue apos aceitar) */
.terms-gate { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 18, 55, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.terms-gate-card { background: #fff; border-radius: 16px; padding: 28px 30px; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(3, 18, 55, .35); }
.terms-gate-logo { max-width: 150px; height: auto; margin-bottom: 14px; }
.terms-gate-card h2 { font-size: 1.2rem; color: #0b1b2c; margin: 0 0 10px; }
.terms-gate-card p { font-size: .9rem; color: #475569; margin: 0 0 16px; }
.terms-gate-card a { color: var(--brand-primary, #0054A2); font-weight: 600; }
.terms-gate-check { display: flex; align-items: flex-start; gap: 8px; text-align: left; font-size: .85rem; color: #334155; margin-bottom: 16px; }
.terms-gate-check input { margin-top: 3px; flex-shrink: 0; }
.terms-gate-foot { font-size: .72rem; color: #94a3b8; margin-top: 12px; }
/* Alerta de capacitacao no cockpit (evidencia de conscientizacao - ANPD) */
.dash-cap-alert { background: #fff7e6; border: 1px solid #f0dca6; color: #7a5300; border-radius: 12px; padding: 10px 14px; }
.dash-cap-alert > i { font-size: 1.3rem; color: #b8860b; flex-shrink: 0; }
.dash-cap-alert strong { color: #5c3f00; }
.ai-overlay-card { background: #fff; border-radius: 16px; padding: 26px 34px; text-align: center; box-shadow: 0 18px 50px rgba(3, 18, 55, .35); max-width: 320px; }
.ai-overlay-logo { max-width: 148px; height: auto; margin-bottom: 12px; }
.ai-spinner { width: 40px; height: 40px; margin: 6px auto 12px; border: 4px solid #dbe4ef; border-top-color: var(--brand-primary, #0054A2); border-radius: 50%; animation: ai-spin .8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-overlay-msg { font-weight: 600; color: #0b1b2c; font-size: .9rem; }

/* Analise IA - blocos por categoria com fade-in */
.rep-ai { border: 1px solid #dbe4ef; border-radius: 12px; padding: 16px 18px; margin: 8px 0 4px; background: #f8fbff; }
.ai-cat { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; margin-bottom: 14px; }
.ai-cat.is-in { opacity: 1; transform: none; }
.ai-cat-h { font-size: 1rem; font-weight: 700; color: var(--brand-primary, #0054A2); margin: 0 0 6px; }
.ai-cat-final .ai-cat-h { color: #b45309; }
.ai-cat-body p { margin: 0 0 8px; font-size: .86rem; line-height: 1.55; }
.ai-cat-body ul { margin: 0 0 10px; padding-left: 18px; }
.ai-cat-body li { font-size: .86rem; line-height: 1.5; margin-bottom: 5px; }
.ai-cat-body strong { color: #0b1b2c; font-weight: 700; }
/* Espaco entre grupos de cards + caixa da analise abaixo de cada grupo */
.panorama .panorama-section { margin-bottom: 26px; }
.ai-cat-slot:not(:empty) { margin-top: 12px; padding: 14px 16px; border: 1px solid #dbe4ef; border-radius: 12px; background: #f8fbff; }
.ai-cat-slot .ai-cat { margin-bottom: 0; }
.ai-cat-body code { background: rgba(3, 18, 55, .07); padding: 1px 5px; border-radius: 5px; font-size: .82em; }
/* PDF (html2pdf): nao cortar cards/blocos no meio da pagina */
.rep360 .rc, .rep360 .ai-cat, .rep360 .rep-part, .rep360 .rep-pend-i, .rep360 .rep-risk-i, .rep360 .rep-head, .rep360 .rep-hero, .rep360 .rep-matrix-wrap, .rep360 .rep-seal-badge { break-inside: avoid; page-break-inside: avoid; }
.rep360 h2 { break-after: avoid; page-break-after: avoid; }
/* Contencao de overflow horizontal do 360: a insercao da IA (codigo/URLs longos) nao pode
   crescer em largura - isso empurrava a sidebar/botoes e estourava el.scrollWidth (PDF quebrado). */
#page-content-wrapper { min-width: 0; }
.rep360, .panorama, .panorama-section, .rep-grid, .rep-final-row, .ai-cat-slot { max-width: 100%; min-width: 0; }
.rep360 { overflow-wrap: anywhere; }
.ai-cat, .ai-cat-body { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ai-cat-body code, .ai-cat-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Secao final do 360: matriz de risco + selos de conformidade lado a lado */
.rep-final-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.rep-matrix-wrap { flex: 1 1 300px; max-width: 400px; }
.rep-seals-wrap { flex: 1 1 300px; }
.rep-matrix-yaxis { display: flex; align-items: center; padding-right: 6px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .7rem; color: #64748b; }
.rep-matrix-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: .72rem; color: #475569; }
.rep-matrix-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rep-lgd-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.rep-seals-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rep-seal-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #eef6ee; color: #0f8b43; border: 1px solid #cfe8d6; font-size: .82rem; font-weight: 600; }
.rep-seal-badge i { font-size: 1rem; }
.rep-seal-badge b { color: #0b6b34; }
.rep-seal-badge.is-master { display: flex; width: 100%; justify-content: flex-start; background: #fff7e6; color: #92610a; border-color: #f0dca6; margin-bottom: 8px; }
.rep-seal-badge.is-master b { color: #92610a; margin-left: auto; }

/* Bloco de validacao (QR) no rodape do documento emitido */
.doc-validation { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 14px; border-top: 1px dashed #cfd8e6; break-inside: avoid; page-break-inside: avoid; }
.doc-validation-qr { flex: 0 0 auto; }
.doc-validation-qr img { display: block; }
.doc-validation-txt { font-size: .78rem; color: #334155; line-height: 1.45; }

/* Chat FirstAI mais suave (estilo Gemini): fade-in das mensagens + rolagem suave */
.fai-body { scroll-behavior: smooth; }
.fai-msg { animation: fai-in .28s ease both; }
@keyframes fai-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fai-panel { animation: fai-pop .18s ease both; transform-origin: bottom right; }
@keyframes fai-pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }