/* ── SIGUC-AC · Global Styles ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&family=Fraunces:wght@600;700&display=swap');

:root {
  --verde:        #1F4E2C;
  --verde-medio:  #2D6A4F;
  --verde-claro:  #52B788;
  --verde-bg:     #D8F3DC;
  --ouro:         #B5860D;
  --ouro-claro:   #F4D35E;
  --ouro-bg:      #FFF9E6;
  --azul:         #1A3A5C;
  --azul-medio:   #2563EB;
  --azul-bg:      #EFF6FF;
  --cinza-900:    #111827;
  --cinza-800:    #1F2937;
  --cinza-700:    #374151;
  --cinza-600:    #4B5563;
  --cinza-500:    #6B7280;
  --cinza-400:    #9CA3AF;
  --cinza-300:    #D1D5DB;
  --cinza-200:    #E5E7EB;
  --cinza-100:    #F3F4F6;
  --cinza-50:     #F9FAFB;
  --branco:       #FFFFFF;
  --erro:         #DC2626;
  --erro-bg:      #FEF2F2;
  --sucesso:      #059669;
  --sucesso-bg:   #ECFDF5;
  --aviso:        #D97706;
  --aviso-bg:     #FFFBEB;
  --borda:        #E5E7EB;
  --borda-forte:  #D1D5DB;
  --sombra:       0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --sombra-md:    0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --sombra-lg:    0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --raio:         8px;
  --raio-lg:      12px;
  --raio-xl:      16px;

  /* ── Escalas de tipo e espaçamento ────────────────────────────────
     ADITIVAS: nada no arquivo passa a usá-las agora, então esta entrega
     não muda um pixel do que já está na tela. Existem para que cada
     tela adote quando for tocada — trocar de uma vez os 16 tamanhos de
     fonte e os 12 valores de espaçamento hoje em uso mexeria nas 45
     páginas sem nenhum teste visual que segurasse a regressão.
     Motivo de existirem: o arquivo tinha --raio/--raio-lg/--raio-xl
     para canto (e usados com disciplina), mas nada equivalente para
     tipo ou espaço, então cada valor foi escolhido no olho na hora em
     que o componente foi escrito — daí 10.5px, 11.5px, 12.5px, 13.5px,
     e 9px/22px convivendo com 8px/20px.
     Tipo: escala modular; 12px é o piso (abaixo disso é anti-padrão de
     legibilidade). Espaço: múltiplos de 4px. */
  --txt-xs:       12px;
  --txt-sm:       14px;
  --txt-base:     16px;
  --txt-lg:       18px;
  --txt-xl:       24px;
  --txt-2xl:      32px;
  --e-1:          4px;
  --e-2:          8px;
  --e-3:          12px;
  --e-4:          16px;
  --e-5:          20px;
  --e-6:          24px;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-display: 'Fraunces', Georgia, serif;
  --sidebar-w:    240px;
  --header-h:     58px;

  --badge-green:  #059669;
  --badge-blue:   #2563EB;
  --badge-amber:  #D97706;
  --badge-red:    #DC2626;
  --badge-teal:   #0D9488;
  --badge-gray:   #6B7280;
  --badge-dark:   #374151;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); background: var(--cinza-50); color: var(--cinza-900); line-height: 1.6; }

.app-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(175deg, #2a7a50 0%, #1F4E2C 40%, #143520 75%, #0a1f12 100%);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100; overflow-y: hidden; overflow-x: hidden;
  box-shadow: 4px 0 20px rgba(0,0,0,.2);
}
.sidebar::before {
  content: ''; position: absolute; top: -60px; right: -50px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,.1) 0%, transparent 70%);
  pointer-events: none;
}

.sidebar-brand { padding: 16px 14px 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-brand-logo-wrap {
  background: #ffffff; border-radius: 10px; padding: 14px 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.35); margin-bottom: 8px; width: 100%;
}
.sidebar-logo-img { height: 58px; width: 100%; max-width: 180px; display: block; object-fit: contain; object-position: center; }
.sidebar-brand-logo { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.1; }
.sidebar-brand-sub { font-size: 9px; color: rgba(255,255,255,.45); letter-spacing: .07em; text-transform: uppercase; margin-top: 2px; text-align: center; }

/* Bloco do nome: é BOTÃO — abre o modal "Meu Perfil" (js/perfil.js).
   Herda font/text-align porque <button> não herda nenhum dos dois. */
.sidebar-user { padding: 10px 12px; margin: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); font: inherit; text-align: left; cursor: pointer; transition: background .16s, border-color .16s; }
.sidebar-user:hover { background: rgba(255,255,255,.13); border-color: rgba(244,211,94,.45); }
.sidebar-user:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.sidebar-user-chevron { color: rgba(255,255,255,.4); flex-shrink: 0; }
.sidebar-user:hover .sidebar-user-chevron { color: var(--ouro-claro); }
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #F4D35E, #D4A017); color: #1F4E2C; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(212,160,23,.4); background-size: cover; background-position: center; overflow: hidden; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-nome { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-perfil { font-size: 10px; color: rgba(255,255,255,.55); }

.sidebar-nav { padding: 10px 0; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.nav-section { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .1em; padding: 14px 18px 5px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; color: rgba(255,255,255,.72); text-decoration: none; font-size: 13px; font-weight: 400; transition: all .15s; cursor: pointer; border: 1px solid transparent; background: none; width: 100%; text-align: left; position: relative; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; margin: 2px 8px; border-radius: 8px; padding: 9px 10px; }
.nav-item.ativo { background: rgba(82,183,136,.16); border-color: rgba(82,183,136,.22); color: #fff; font-weight: 500; margin: 2px 8px; border-radius: 8px; padding: 9px 10px; }
.nav-item.ativo::before { content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--ouro-claro); border-radius: 0 3px 3px 0; }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.nav-item.ativo .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }

/* Superbloco (ex.: "Diretoria Técnica", "Administrativo") — só um
   divisor visual acima de um ou mais grupos; não é ele mesmo
   recolhível. Cada grupo abaixo dele é seu próprio acordeão. */
.nav-super { font-size: 9px; font-weight: 700; color: var(--ouro-claro); text-transform: uppercase; letter-spacing: .12em; padding: 16px 18px 2px; opacity: .8; }
.nav-super:first-child { padding-top: 8px; }

/* Acordeão dos grupos — cabeçalho vira botão; o corpo colapsa via
   grid-template-rows (nunca transform/max-height: transform num
   ancestral cria containing block pra descendentes position:fixed,
   mesma armadilha documentada na barra do app Frota). */
.nav-section-toggle { display: flex; align-items: center; width: 100%; background: none; border: none; cursor: pointer; padding: 0; margin: 0; text-align: left; color: inherit; font: inherit; }
.nav-section-toggle .nav-section { flex: 1; padding: 12px 4px 5px 18px; }
.nav-section-toggle:hover .nav-section { color: rgba(255,255,255,.55); }
.nav-chevron { flex-shrink: 0; margin-right: 16px; color: rgba(255,255,255,.4); transition: transform .2s ease, opacity .2s ease; }
.nav-grupo.aberto > .nav-section-toggle .nav-chevron { transform: rotate(180deg); opacity: .8; }
.nav-grupo-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.nav-grupo.aberto > .nav-grupo-corpo { grid-template-rows: 1fr; }
/* Combinador de FILHO nas duas regras acima, não descendente: com o
   subgrupo aninhado, `.nav-grupo.aberto .nav-grupo-corpo` abria também
   o corpo do subgrupo (e girava o chevron dele) sempre que o grupo pai
   estava aberto — cada acordeão precisa responder só ao próprio estado. */
.nav-grupo-corpo-inner { overflow: hidden; min-height: 0; }

/* Subgrupo — 3º nível, hoje só no DERHQA (Qualidade da Água /
   Bacias Hidrográficas / Qualidade do Ar). Mesmo acordeão do grupo
   (mesma classe .nav-grupo, mesmo colapso por grid-template-rows),
   recuado e um pouco mais discreto para a hierarquia ficar legível
   sem inventar outro mecanismo. */
.nav-subgrupo .nav-section-toggle .nav-section { padding: 9px 4px 4px 30px; font-size: 9px; color: rgba(255,255,255,.26); letter-spacing: .09em; }
.nav-subgrupo .nav-section-toggle:hover .nav-section { color: rgba(255,255,255,.5); }
.nav-subgrupo .nav-chevron { margin-right: 18px; opacity: .75; }
.nav-subgrupo .nav-item { padding-left: 30px; }
.nav-subgrupo .nav-item:hover, .nav-subgrupo .nav-item.ativo { padding-left: 14px; margin-left: 12px; }

.sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 6px; }
.btn-alterar-senha { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: var(--raio); color: rgba(255,255,255,.55); font-family: var(--font-sans); font-size: 12px; cursor: pointer; transition: all .15s; text-decoration: none; }
.btn-alterar-senha:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.2); }
.btn-sair { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--raio); color: rgba(255,255,255,.7); font-family: var(--font-sans); font-size: 12px; cursor: pointer; transition: all .15s; }
.btn-sair:hover { background: rgba(255,255,255,.15); color: #fff; }

.main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { height: var(--header-h); background: var(--branco); border-bottom: 1px solid var(--borda); box-shadow: 0 1px 4px rgba(0,0,0,.05); display: flex; align-items: center; padding: 0 28px; position: sticky; top: 0; z-index: 50; gap: 12px; }
.topbar-title { font-size: 15px; font-weight: 600; color: var(--cinza-900); letter-spacing: -.01em; }
.topbar-breadcrumb { font-size: 11px; color: var(--cinza-400); display: flex; align-items: center; gap: 5px; margin-bottom: 1px; }
.topbar-breadcrumb span:last-child { color: var(--cinza-600); font-weight: 500; }
/* Botão "Ajuda" da topbar — entrada dos guias (js/guia-app.js). Só
   aparece na página que declarou um catálogo. */
.topbar-guia { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--branco); color: var(--cinza-600); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.topbar-guia:hover { border-color: var(--verde-c, #52B788); color: var(--verde-escuro, #1F4E2C); }
.topbar-guia[hidden] { display: none !important; }
@media (max-width: 700px) { .topbar-guia span { display: none; } .topbar-guia { padding: 6px 8px; } }
.page-body { padding: 24px 28px; flex: 1; }

/* Modo embutido (?embed=1) — página existente dentro de um iframe em
   frota-administrar.html, sem sidebar/topbar duplicados. */
.app-layout-embed .main-content { margin-left: 0; min-height: 0; }
.page-body-embed { padding: 4px 4px 20px; }

.card { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra); transition: box-shadow .2s; }
.card:hover { box-shadow: var(--sombra-md); }
.card-header { padding: 14px 20px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--branco); border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
.card-title { font-size: 13px; font-weight: 600; color: var(--cinza-800); letter-spacing: -.01em; }
.card-subtitle { font-size: 11px; color: var(--cinza-400); margin-top: 1px; }
.card-body { padding: 20px; }
.card-footer { padding: 10px 20px; border-top: 1px solid var(--borda); background: var(--cinza-50); border-radius: 0 0 var(--raio-lg) var(--raio-lg); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi-card { --kpi-cor: var(--verde-claro); background: var(--branco); border: 1px solid var(--borda); border-top: 6px solid var(--kpi-cor); border-radius: var(--raio-lg); padding: 18px 20px 18px; position: relative; box-shadow: 0 4px 6px -2px rgba(0,0,0,.10); transition: box-shadow .2s, transform .2s; }
.kpi-card:hover { box-shadow: 0 6px 10px -3px rgba(0,0,0,.14); transform: translateY(-1px); }
.kpi-card.ouro { --kpi-cor: var(--ouro); }
.kpi-card.azul { --kpi-cor: var(--azul-medio); }
.kpi-card.erro { --kpi-cor: var(--erro); }
.kpi-card.roxo { --kpi-cor: #7C3AED; }
.kpi-label { font-size: 10px; color: var(--cinza-400); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.kpi-valor { font-size: 32px; font-weight: 800; color: var(--kpi-cor); letter-spacing: -.03em; line-height: 1; }
.kpi-sub { font-size: 11px; color: var(--kpi-cor); margin-top: 8px; line-height: 1.4; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-60-40 { display: grid; grid-template-columns: 60fr 40fr; gap: 16px; }

.table-wrap { overflow-x: auto; }
.table-scroll { max-height: calc(100vh - 340px); min-height: 300px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* --cinza-400 sobre --cinza-50 dava 2,43:1 — como 10px em negrito é
   "texto pequeno" pela WCAG, o mínimo AA é 4,5:1. --cinza-500 dá 4,63:1
   sem mudar o desenho do cabeçalho. Vale para as 38 páginas com tabela. */
thead th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 700; color: var(--cinza-500); text-transform: uppercase; letter-spacing: .07em; border-bottom: 2px solid var(--borda); background: var(--cinza-50); position: sticky; top: 0; white-space: nowrap; user-select: none; }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--borda); color: var(--cinza-700); vertical-align: middle; }
tbody tr:nth-child(even) td { background: var(--cinza-50); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #EDF7F1 !important; }
.mono { font-family: var(--font-mono); font-size: 12px; }

.badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; line-height: 1.4; }
.badge-verde  { background: #DCFCE7; color: #166534; }
.badge-teal   { background: #CCFBF1; color: #0F5549; }
.badge-blue   { background: #DBEAFE; color: #1E40AF; }
.badge-ouro   { background: #FEF3C7; color: #92400E; }
.badge-erro   { background: #FEE2E2; color: #991B1B; }
/* Severidade crítica é o ÚNICO badge sólido do sistema, de propósito:
   o enum severidade_ocorrencia tem 4 níveis e BADGE_SEVERIDADE mapeava
   critica e alta para a mesma classe (badge-erro), apagando na tela uma
   distinção que o banco guarda. Distingue por PREENCHIMENTO, não por
   matiz nova — segue legível em daltonismo e em impressão P&B, e o
   texto branco sobre #991B1B dá 8,31:1. */
.badge-critica { background: #991B1B; color: #FFFFFF; }
.badge-cinza  { background: var(--cinza-100); color: var(--cinza-600); }
.badge-dark   { background: var(--cinza-200); color: var(--cinza-800); }
.badge-roxo   { background: #EDE9FE; color: #5B21B6; }
.badge-outline { background: transparent; }
.badge-verde.badge-outline { border: 1.5px solid #86EFAC; color: #16A34A; }
.badge-ouro.badge-outline  { border: 1.5px solid #FCD34D; color: #B45309; }
.badge-erro.badge-outline  { border: 1.5px solid #FCA5A5; color: #DC2626; }
.badge-blue.badge-outline  { border: 1.5px solid #93C5FD; color: #2563EB; }
.badge-cinza.badge-outline { border: 1.5px solid var(--cinza-300); color: var(--cinza-500); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--raio); font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; border: 1px solid transparent; text-decoration: none; white-space: nowrap; line-height: 1.4; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid rgba(82,183,136,.4); outline-offset: 2px; }

/* ── Foco por teclado ──────────────────────────────────────────────
   Havia 43 regras :hover no CSS contra 3 de :focus-visible — o estado
   de mouse tinha sido desenhado 14× mais que o de teclado, e quem
   navega por Tab (ou usa leitor de tela) não via onde estava.
   Fallback por ELEMENTO em vez de lista de classes: assim controle
   novo nasce com foco visível sem ninguém precisar lembrar. As regras
   específicas que já existem (.btn, .sidebar-user, .form-control)
   têm especificidade maior e continuam vencendo esta.
   `:focus-visible`, nunca `:focus` — não pinta anel em clique de
   mouse, só quando o navegador julga que o foco deve ser sinalizado. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(82,183,136,.55);
  outline-offset: 2px;
  border-radius: 4px;
}
/* A sidebar é escura (--floresta): o verde do anel some no fundo. Usa
   o mesmo ouro que .sidebar-user:focus-visible já usava. */
.sidebar a:focus-visible,
.sidebar button:focus-visible,
.sidebar [tabindex]:focus-visible {
  outline-color: var(--ouro-claro);
}
.btn-primary { background: var(--verde-medio); color: #fff; border-color: var(--verde-medio); box-shadow: 0 1px 3px rgba(45,106,79,.3); }
.btn-primary:hover { background: var(--verde); border-color: var(--verde); }
.btn-secondary { background: var(--branco); color: var(--cinza-700); border-color: var(--borda-forte); }
.btn-secondary:hover { background: var(--cinza-50); border-color: var(--cinza-300); }
.btn-ghost { background: transparent; color: var(--cinza-600); border-color: transparent; }
.btn-ghost:hover { background: var(--cinza-100); color: var(--cinza-900); }
.btn-danger { background: var(--erro); color: #fff; border-color: var(--erro); }
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }
/* Desabilitado — o navegador já bloqueia o clique, mas até aqui o botão
   continuava sólido e com cor de marca: não havia UMA regra :disabled em
   todo o arquivo, contra 363 usos do atributo no HTML/JS. Sem retorno
   visual, "cliquei e não aconteceu nada" é indistinguível de travamento.
   Vem depois das variantes para vencer .btn-primary/.btn-danger sem
   precisar de !important. */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
  background: var(--cinza-200); border-color: var(--cinza-200); color: var(--cinza-500);
  box-shadow: none; cursor: not-allowed;
}
.btn:disabled:hover, .btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
  background: var(--cinza-200); border-color: var(--cinza-200);
}
.btn:disabled:active, .btn[disabled]:active { transform: none; }
.form-control:disabled, .form-control[readonly] {
  background: var(--cinza-100); color: var(--cinza-500); cursor: not-allowed;
}
.btn-sm { padding: 5px 10px; font-size: 12px; }
/* 4px (era 3px) porque 3+11×1.4+3+2 = 23,4px, e a WCAG 2.2 AA exige
   alvo de 24×24px. Agora dá 25,4px — diferença visual quase nula, em 94
   usos no sistema. */
.btn-xs { padding: 4px 9px; font-size: 11px; border-radius: 6px; }
.btn-icon { padding: 7px; border-radius: var(--raio); }

.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--cinza-700); margin-bottom: 5px; }
.form-label .obrig { color: var(--erro); margin-left: 2px; }
.form-control { width: 100%; height: 38px; border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: 0 12px; font-family: var(--font-sans); font-size: 13px; color: var(--cinza-900); background: var(--branco); transition: border-color .15s, box-shadow .15s; }
.form-control:focus { outline: none; border-color: var(--verde-claro); box-shadow: 0 0 0 3px rgba(82,183,136,.18); }
textarea.form-control { height: auto; padding: 10px 12px; resize: vertical; }
select.form-control { cursor: pointer; }
.form-control::placeholder { color: var(--cinza-300); }
.form-hint { font-size: 11px; color: var(--cinza-500); margin-top: 4px; }
.form-erro { font-size: 11px; color: var(--erro); margin-top: 4px; }

.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar .form-control { height: 34px; font-size: 12px; }
.search-input { width: 220px; }

.rank-barra-row { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 12px; margin-bottom: 12px; }
.rank-barra-row:last-child { margin-bottom: 0; }
.rank-barra-label { font-size: 13px; color: var(--cinza-700); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-barra-sub { font-size: 11px; color: var(--cinza-400); font-weight: 400; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-barra-track { height: 15px; background: var(--cinza-100); border-radius: 7px; overflow: hidden; }
.rank-barra-fill { height: 100%; border-radius: 7px; transition: width .4s; }
.rank-barra-valor { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--cinza-900); text-align: right; }

.donut-legenda-wrap { display: flex; align-items: center; gap: 20px; }
.donut-legenda-lista { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.donut-legenda-item { display: flex; align-items: center; gap: 10px; }
.donut-legenda-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.donut-legenda-label { font-size: 13px; color: var(--cinza-700); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legenda-valor { font-size: 13px; font-weight: 800; color: var(--cinza-900); }
.donut-legenda-pct { font-size: 11px; color: var(--cinza-400); min-width: 42px; text-align: right; }

.prog-wrap { display: flex; align-items: center; gap: 8px; }
.prog-bar { flex: 1; height: 5px; background: var(--cinza-100); border-radius: 3px; overflow: hidden; min-width: 60px; }
.prog-fill { height: 100%; border-radius: 3px; background: var(--verde-claro); transition: width .4s; }
.prog-fill.amarelo { background: var(--aviso); }
.prog-fill.vermelho { background: var(--erro); }
.prog-pct { font-family: var(--font-mono); font-size: 11px; color: var(--cinza-500); min-width: 30px; text-align: right; }

.modal-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); align-items: center; justify-content: center; }
.modal-overlay.aberto { display: flex; }
.modal { background: var(--branco); border-radius: var(--raio-xl); box-shadow: 0 20px 60px rgba(0,0,0,.2); width: 100%; max-width: 600px; max-height: 90vh; overflow: hidden; margin: 20px; display: flex; flex-direction: column; }
.modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title { font-size: 16px; font-weight: 600; color: var(--cinza-900); }
.modal-close { width: 28px; height: 28px; border-radius: var(--raio); border: none; background: var(--cinza-100); color: var(--cinza-500); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--cinza-300); }
.modal-body { padding: 20px 24px; flex: 1; min-height: 0; overflow-y: auto; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--borda); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }

.empty-state { text-align: center; padding: 48px 24px; color: var(--cinza-500); }
.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: .4; }
.empty-state-msg { font-size: 14px; }

.alert { padding: 12px 16px; border-radius: var(--raio); font-size: 13px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.alert-warning { background: var(--aviso-bg); color: #92400E; border: 1px solid #FDE68A; }
.alert-danger { background: var(--erro-bg); color: #991B1B; border: 1px solid #FECACA; }
.alert-success { background: var(--sucesso-bg); color: #065F46; border: 1px solid #A7F3D0; }
.alert-info { background: var(--azul-bg); color: #1E40AF; border: 1px solid #BFDBFE; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: fadeIn .25s ease both; }
.spinner { width: 20px; height: 20px; border: 2px solid var(--cinza-200); border-top-color: var(--verde-medio); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }

/* Botão em envio: `.btn.carregando`. Some com o rótulo e põe o giro no
   lugar, mantendo a LARGURA do botão (color:transparent, não display)
   — trocar o texto por "Enviando..." faria a linha inteira pular.
   Reaproveita @keyframes spin, nunca uma animação nova. */
.btn.carregando { position: relative; color: transparent !important; pointer-events: none; }
.btn.carregando::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.btn-secondary.carregando::after, .btn-ghost.carregando::after {
  border-color: var(--cinza-300); border-top-color: var(--cinza-600);
}

/* Esqueleto de carregamento. Existiam 2 ocorrências de "skeleton" em
   todo o CSS: a espera por dados era um "Carregando..." de altura zero,
   então a página saltava quando a consulta voltava. Aqui o espaço já
   nasce com a altura final (a regra de CLS < 0,1 que a auditoria
   apontou), e o vazio deixa de parecer erro. */
.skeleton {
  background: linear-gradient(90deg, var(--cinza-100) 0%, var(--cinza-200) 50%, var(--cinza-100) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-linha { height: 12px; margin-bottom: 10px; }
.skeleton-linha:last-child { margin-bottom: 0; }
.skeleton-titulo { height: 18px; width: 45%; margin-bottom: 14px; }
.skeleton-bloco { padding: 16px 0; }
/* Sem o brilho, o esqueleto vira bloco cinza parado — continua
   reservando o espaço, que é a função principal. */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--cinza-100); }
  .btn.carregando::after { animation: none; border-top-color: #fff; }
}

.loading-overlay { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(255,255,255,.7); align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.loading-overlay.ativo { display: flex; }
.loading-text { font-size: 13px; color: var(--cinza-500); }

.divider { border: none; border-top: 1px solid var(--borda); margin: 20px 0; }

.mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: none; background: none; color: var(--cinza-700); cursor: pointer; border-radius: var(--raio); }
.mobile-menu-btn:hover { background: var(--cinza-100); }
.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,.45); }
.sidebar-overlay.ativo { display: block; }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .28s ease; z-index: 200; }
  .sidebar.aberta { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .mobile-menu-btn { display: flex; }
  .topbar { padding: 0 12px; gap: 6px; }
  .topbar-breadcrumb { display: none; }
  .page-body { padding: 14px 12px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3, .grid-60-40 { grid-template-columns: 1fr; }
  .modal { margin: 12px; max-width: calc(100vw - 24px); }
  .filter-bar { flex-wrap: wrap; }
  .search-input { width: 100%; }
  .form-control { font-size: 16px; }
  .btn { min-height: 40px; }
}

/* ── Modal "Meu Perfil" (js/perfil.js) ──────────────────────
   z-index 240: acima do overlay da sidebar mobile (190) e do .modal
   comum (200), porque é acionado de dentro da sidebar aberta. Abaixo
   do gate de LGPD, que precisa cobrir tudo.                          */
.perfil-overlay { display: none; position: fixed; inset: 0; z-index: 240; background: rgba(10,26,15,.5); align-items: center; justify-content: center; padding: 20px; }
.perfil-overlay.aberto { display: flex; }
.perfil-modal { background: var(--branco); border-radius: var(--raio-xl); box-shadow: 0 24px 70px rgba(0,0,0,.3); width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; animation: fadeIn .18s ease; }

.pf-head { padding: 22px 24px 0; background: linear-gradient(160deg, #0A1A0F, var(--verde) 85%); color: #fff; position: relative; }
.pf-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: var(--raio); border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pf-close:hover { background: rgba(255,255,255,.24); }
.pf-ident { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; }
.pf-avatar { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
.pf-foto { width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, #F4D35E, #D4A017); color: var(--verde); display: flex; align-items: center; justify-content: center; font-size: 23px; font-weight: 700; border: 2px solid rgba(255,255,255,.35); box-shadow: 0 4px 14px rgba(0,0,0,.3); background-size: cover; background-position: center; overflow: hidden; }
.pf-cam { position: absolute; right: -2px; bottom: -2px; width: 27px; height: 27px; border-radius: 50%; background: var(--ouro-claro); color: var(--verde); border: 2px solid var(--verde); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pf-cam:hover { background: #fff; }
.pf-ident-txt { min-width: 0; }
.pf-nome { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; }
.pf-sub { font-size: 12px; color: rgba(255,255,255,.62); margin-top: 3px; word-break: break-all; }
.pf-chips { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.pf-chip { font-size: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(244,211,94,.16); color: var(--ouro-claro); border: 1px solid rgba(244,211,94,.3); }
.pf-chip.neutro { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.16); }

.pf-tabs { display: flex; gap: 2px; padding: 0 24px; background: linear-gradient(160deg, #0A1A0F, var(--verde) 85%); }
.pf-tab { padding: 10px 14px 11px; font-size: 12.5px; font-family: var(--font-sans); background: none; border: none; color: rgba(255,255,255,.55); cursor: pointer; border-bottom: 2px solid transparent; }
.pf-tab:hover { color: #fff; }
.pf-tab.ativa { color: var(--ouro-claro); border-bottom-color: var(--ouro-claro); font-weight: 500; }

.pf-body { padding: 22px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.pf-painel { display: none; }
.pf-painel.ativo { display: block; }

.pf-sec { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-400); margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--borda); }
.pf-painel > .pf-sec:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.pf-campo { margin-bottom: 14px; }
.pf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-lbl { display: block; font-size: 11px; font-weight: 600; color: var(--cinza-600); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.pf-inp { width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: var(--raio); font-family: var(--font-sans); font-size: 13.5px; color: var(--cinza-900); background: #fff; }
.pf-inp:focus { outline: none; border-color: var(--verde-claro); box-shadow: 0 0 0 3px rgba(82,183,136,.18); }
.pf-inp[readonly] { background: var(--cinza-100); color: var(--cinza-500); cursor: not-allowed; }
.pf-ajuda { font-size: 11px; color: var(--cinza-400); margin-top: 4px; }

.pf-nota { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--raio-lg); background: var(--azul-bg); border: 1px solid #C7DDFB; font-size: 12px; color: #1E40AF; line-height: 1.5; }
.pf-nota > svg { flex-shrink: 0; margin-top: 1px; }
.pf-nota.aviso { background: var(--aviso-bg); border-color: #F5E3B3; color: #7C4A03; margin-top: 4px; }
.pf-foto-acoes { display: flex; gap: 8px; margin-top: 10px; }

.pf-forca { height: 4px; border-radius: 99px; background: var(--cinza-200); overflow: hidden; margin-top: 7px; }
.pf-forca i { display: block; height: 100%; width: 0; background: var(--erro); transition: width .2s, background .2s; }
.pf-reqs { list-style: none; padding: 0; margin: 9px 0 0; font-size: 11.5px; color: var(--cinza-500); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.pf-reqs li::before { content: '○ '; color: var(--cinza-300); }
.pf-reqs li.ok { color: var(--sucesso); }
.pf-reqs li.ok::before { content: '● '; color: var(--sucesso); }

.pf-acessos { display: flex; flex-direction: column; gap: 6px; }
.pf-acesso { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; color: var(--cinza-600); }
.pf-acesso-quando { font-variant-numeric: tabular-nums; color: var(--cinza-800); }
.pf-acesso-onde { color: var(--cinza-400); }
.pf-acesso-falha { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: var(--erro-bg); color: var(--erro); }

.pf-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 1px solid var(--borda); border-radius: var(--raio-lg); text-decoration: none; color: inherit; margin-bottom: 9px; }
.pf-link:hover { border-color: var(--verde-claro); background: var(--cinza-50); }
.pf-link-t { font-size: 13px; font-weight: 600; }
.pf-link-d { font-size: 11.5px; color: var(--cinza-500); margin-top: 2px; }

.pf-footer { padding: 14px 24px; border-top: 1px solid var(--borda); display: flex; gap: 8px; align-items: center; background: var(--cinza-50); }
.pf-rodape { margin-right: auto; font-size: 11.5px; color: var(--cinza-400); }
.pf-acoes { display: flex; gap: 8px; }

@media (max-width: 768px) {
  .perfil-overlay { padding: 0; align-items: flex-end; }
  .perfil-modal { max-height: 94vh; border-radius: var(--raio-xl) var(--raio-xl) 0 0; }
  .pf-grid2, .pf-reqs { grid-template-columns: 1fr; }
  .pf-footer { flex-wrap: wrap; }
  .pf-rodape { width: 100%; margin: 0 0 8px; }
  .pf-acoes { width: 100%; }
  .pf-acoes .btn { flex: 1; justify-content: center; }
}

/* pf-foto (Meu Perfil) usa a moldura de css/avatar-foto.css — anel
   afastado da borda sólida, no lugar do halo antigo. */
.pf-avatar .pf-foto { border-radius: 50%; }
.pf-avatar { position: relative; }
.pf-avatar .avatar-foto-anel { inset: -5px; }