/* Fontes do sistema: adequação ao Brand Book da Cognvox (Montserrat) */
:root { --fonte-titulo: "Montserrat", system-ui, sans-serif; }
:root {
  --bg: #070B26;          /* Fundo base mais escuro derivado do Azul Cognvox */
  --panel: #0D154C;       /* Azul Cognvox puro (Primária) para painéis */
  --panel-2: #090E33;     /* Degradê sutil para o painel */
  --box: #0B123D;         /* Fundo de inputs e boxes secundários */
  --line: #1A2680;        /* Linhas e separadores sutis no tom da marca */
  --text: #f8fafc;        /* Texto principal claro */
  --muted: #a6b2ed;       /* Texto secundário puxado pro tom do Azul Cognvox */
  
  --ok: #10B981;          /* Verde (Para métricas conformes) */
  --warn: #FF6F00;        /* Laranja Oficial (Atenção) */
  --bad: #EF4444;         /* Vermelho (Crítico/Abaixo da meta) a pedido do usuário */
  
  --blue: #00B4DB;        /* Azul-Claro Oficial */
  --blue-light: #6C2BD9;  /* Roxo Oficial (Usado em hovers e links) */
  
  --shadow: 0 20px 52px rgb(0 0 0 / 22%);
  --brand-gradient: linear-gradient(90deg, #00B4DB 0%, #0D154C 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 15% -10%, #152273 0%, transparent 65%),
    radial-gradient(700px 480px at 100% 5%, #0B123D 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
  line-height: 1.5;
}
a { color: inherit; }
h1,h2,h3,h4,h5 { margin: 0; font-family: var(--fonte-titulo); }
code { font-family: Consolas, monospace; }
.num { font-variant-numeric: tabular-nums; }

.wrap {
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
  padding: 36px 0 76px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.hero { padding: 26px 0 10px; }
.hero h1 { margin-top: 5px; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.035em; }
.hero-copy { max-width: 690px; margin: 12px 0 0; color: #bdcbe0; font-size: 16px; }
.eyebrow {
  display: block;
  color: var(--blue-light);
  font-family: var(--fonte-titulo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.muted { color: var(--muted); font-size: 13px; }

.panel, .macro, .box {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--shadow);
}
.panel { border-radius: 18px; padding: 20px; }

.kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 34px;
}
.stat strong { display: block; margin-top: 6px; font: 700 30px var(--fonte-titulo); }
.stat-foot { display: block; margin-top: 4px; font-size: 12px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dir-score { text-align: right; }
.dir-score strong { display: block; font: 700 clamp(34px,5vw,50px) var(--fonte-titulo); }
.dir-score .muted { display: block; margin-top: 6px; }

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.section-heading h2 { margin-top: 4px; font-size: 22px; }

/* ---------- Gráficos executivos ---------- */
.charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 48px;
}
.chart-card { display: flex; flex-direction: column; gap: 14px; }
.chart-wide { grid-row: span 2; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.chart-head h2 { font-size: 17px; }
.chart-head p { margin: 4px 0 0; }

.legend { display: flex; gap: 12px; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.conforme { background: var(--ok); }
.dot.atencao { background: var(--warn); }
.dot.critico { background: var(--bad); }
.dash { width: 14px; border-top: 2px dashed var(--muted); }

.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(96px, 168px) 1fr 58px;
  align-items: center;
  gap: 12px;
  padding: 3px 6px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease;
}
.bar-row:hover, .bar-row:focus-visible { background: rgb(128 36 255 / 15%); outline: none; }
.bar-row.compacta { grid-template-columns: 52px 1fr 58px; }
.bar-label { display: flex; flex-direction: column; font-size: 13px; line-height: 1.25; }
.bar-label > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track {
  position: relative;
  display: block;
  height: 14px;
  border-radius: 7px;
  background: #1d2a3f;
}
.bar-track.slim { height: 8px; border-radius: 4px; margin: 6px 0 5px; }
.bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  background: var(--blue);
}
.diverging .bar-fill { left: auto; }
.bar-fill.conforme { background: var(--ok); }
.bar-fill.atencao { background: var(--warn); }
.bar-fill.critico { background: var(--bad); }
.bar-fill.up { background: var(--ok); }
.bar-fill.down { background: var(--bad); }
.bar-meta {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--muted) 0 3px, transparent 3px 6px);
}
.bar-zero { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--line); }
.bar-value { font-size: 13px; font-weight: 600; text-align: right; }
.bar-value.up { color: var(--ok); }
.bar-value.down { color: var(--bad); }
.bar-value.neutral { color: var(--muted); }

.stack { display: flex; gap: 2px; height: 18px; margin-bottom: 14px; }
.stack-seg { border-radius: 4px; }
.stack-seg.conforme { background: var(--ok); }
.stack-seg.atencao { background: var(--warn); }
.stack-seg.critico { background: var(--bad); }
.stack-legend { margin: 0; padding: 0; list-style: none; }
.stack-legend li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.stack-legend li:last-child { border-bottom: 0; }
.stack-legend .num { color: var(--muted); }
.stack-legend strong { color: var(--text); }

/* ---------- Filtros ---------- */
.filtros { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.busca { flex: 1 1 260px; max-width: 380px; }
.busca input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--box);
  color: var(--text);
  font: 400 14px system-ui, 'Segoe UI', sans-serif;
}
.busca input::placeholder { color: var(--muted); }
.busca input:focus-visible { border-color: var(--blue); outline: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--box);
  color: var(--muted);
  font: 600 12px system-ui, 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip:hover { color: var(--text); border-color: var(--blue-light); }
.chip.is-ativo { 
  border: none; 
  padding: 9px 15px; /* Compensa a perda de 1px da borda */
  background: var(--brand-gradient); 
  color: #ffffff; 
}

/* ---------- Quadrados das áreas (tela inicial) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 24px 22px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--shadow);
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--blue-light);
  box-shadow: 0 24px 60px rgb(0 0 0 / 30%);
  outline: none;
}
.tile-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; }
.tile .donut { width: 156px; height: 156px; margin: 20px auto 18px; }
.tile .donut::before { width: 116px; height: 116px; }
.tile .donut strong { font-size: 32px; }
.tile h3 { font-size: 19px; line-height: 1.3; }
.tile .director { margin: 7px 0 16px; color: var(--muted); font-size: 13px; }
.tile .director.pendente { font-style: italic; opacity: .75; }
.tile-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.tile-meta strong { display: block; color: var(--text); font: 700 20px var(--fonte-titulo); }
.tile-meta { align-items: center; }
.tile-nota {
  padding: 5px 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
}
.tile .variation { font-size: 13px; font-weight: 600; }
.tile .pill { font-size: 12px; padding: 5px 11px; }
.tile .sigla { font-size: 12px; }

.link-overview { display: block; margin-top: 10px; color: var(--blue-light); font-size: 13px; font-weight: 600; text-decoration: none; }
.link-overview:hover { color: #fff; }
.breadcrumb { display: flex; gap: 18px; }
.detail-meta { margin: 16px 0 0; justify-content: flex-start; gap: 32px; }
.detail-charts { margin: 18px 0 34px; }
.detail-charts .bar-row { grid-template-columns: minmax(150px, 40%) 1fr 52px; }
.detail-charts .kpi-mini-foot { flex-wrap: wrap; }
.detail-section { margin: 26px 0 4px; }
.detail-hero .dir-score .donut { width: 104px; height: 104px; margin: 0 0 10px auto; }
.detail-hero .dir-score .donut::before { width: 76px; height: 76px; }
.detail-hero .dir-score .donut strong { font-size: 22px; }

.area-kpis { display: flex; flex-direction: column; gap: 14px; }
.area-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.area-meta strong { display: block; color: var(--text); font: 700 17px var(--fonte-titulo); }
.kpi-mini-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.kpi-mini-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-mini-valor { font-weight: 700; }
.kpi-mini-valor.conforme { color: #34d399; }
.kpi-mini-valor.atencao { color: #fbbf24; }
.kpi-mini-valor.critico { color: #fb7185; }
.kpi-mini-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; }
.kpi-mini-foot .spark { width: 70px; height: 22px; flex: 0 0 auto; }
.area-link {
  margin-top: auto;
  color: var(--blue-light);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.area-link:hover { color: #fff; }

.donut {
  --value: 0;
  --ring-color: var(--blue);
  position: relative;
  display: grid;
  width: 132px;
  height: 132px;
  margin: 8px auto 18px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--value) * 1%), #1d2a3f 0);
}
.donut::before {
  position: absolute;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: #101d31;
  content: "";
}
.donut strong { position: relative; z-index: 1; font: 700 28px var(--fonte-titulo); }
.variation.up { color: var(--ok); }
.variation.down { color: var(--bad); }
.variation.neutral { color: var(--muted); }

.pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pill.conforme { border: 1px solid rgb(16 185 129 / 35%); background: rgb(16 185 129 / 14%); color: #34d399; }
.pill.atencao { border: 1px solid rgb(245 158 11 / 35%); background: rgb(245 158 11 / 14%); color: #fbbf24; }
.pill.critico { border: 1px solid rgb(244 63 94 / 35%); background: rgb(244 63 94 / 14%); color: #fb7185; }
.pill.neutro { border: 1px dashed var(--line); background: transparent; color: var(--muted); }

/* Estados "sem base": área existe, mas não há indicador que sustente um número. */
.donut.sem-base { background: repeating-conic-gradient(#1d2a3f 0 12deg, #22314a 12deg 24deg); }
.donut.sem-base strong { color: var(--muted); }
.tile-sem-base { border-style: dashed; }
.tile-sem-base:hover { border-style: solid; }

.aviso-mapeamento { margin: 18px 0 34px; border-style: dashed; }
.aviso-mapeamento h2 { font-size: 18px; }
.aviso-mapeamento p { margin: 10px 0 0; max-width: 78ch; color: #c8d5e8; font-size: 14px; }
.aviso-mapeamento p.muted { font-size: 13px; }

.bar-vazia {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
}
.chart-nota {
  margin: 16px 0 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.breadcrumb { margin-bottom: 22px; }
.breadcrumb a {
  color: #b9cdf0;
  font-size: 14px;
  text-decoration: none;
}
.breadcrumb a:hover { color: #fff; }

.detail-hero { margin-bottom: 18px; }
.dir-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.dir-head h1 { margin: 4px 0; font-size: clamp(26px,4vw,38px); }
.sigla,.code { color: var(--blue-light); font: 600 11px var(--fonte-titulo); letter-spacing: .14em; }
.code { display: block; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.box { border-radius: 14px; padding: 15px; background: var(--box); box-shadow: none; }
.box p { margin: 7px 0 0; font-size: 14px; }
h5 { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

.macro { margin-top: 15px; border-radius: 16px; padding: 17px; background: var(--box); box-shadow: none; }
.macro-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.macro-head h3 { margin-top: 3px; font-size: 17px; }
.desc { color: #c8d5e8; font-size: 14px; }
.lists { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin: 15px 0 18px; }
.list ul { margin: 7px 0 0; padding-left: 17px; color: #c8d5e8; font-size: 13px; }

.table-scroll { overflow-x: auto; border-radius: 10px; }
table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
th,td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th { color: var(--muted); font: 600 11px var(--fonte-titulo); letter-spacing: .09em; text-transform: uppercase; }
td.num,th.num { text-align: right; }
.kpi-name { max-width: 280px; font-weight: 600; }
.kpi-name .muted { display: block; }
.trend.alta { color: var(--ok); }
.trend.baixa { color: var(--bad); }
.trend.estavel { color: var(--muted); }
.spark { display: block; }
.empty-state { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }

.complementares { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 12px; }
.complementares summary { cursor: pointer; color: #c8d5e8; font-weight: 600; }
.complementares-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.complementar { border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: #101d31; }
.complementar p,.complementar ul { margin: 7px 0 0; color: #c8d5e8; font-size: 13px; }
.complementar ul { padding-left: 17px; }

.mensagem-erro { margin-top: 24px; padding: 20px; border: 1px solid rgb(244 63 94 / 45%); border-radius: 16px; background: rgb(244 63 94 / 10%); }
footer { margin-top: 48px; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lists { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .charts { grid-template-columns: 1fr; }
  .chart-wide { grid-row: auto; }
}
@media (max-width: 800px) {
  .kpis,.tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .complementares-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 22px,1240px); padding-top: 24px; }
  .kpis,.tile-grid,.lists,.complementares-grid { grid-template-columns: 1fr; }
  .dir-score { text-align: left; }
  .bar-row { grid-template-columns: minmax(72px,1fr) 2fr 50px; }
}


/* Impressão: fundo claro e sem cortar cartões no meio da página. */
@media print {
  body { background: #fff; color: #111; }
  .filtros, .link-overview, .breadcrumb { display: none; }
  .panel, .tile, .macro, .box { break-inside: avoid; box-shadow: none; }
}