:root {
  --navy: #15224d;
  --navy-2: #22336b;
  --laranja: #f28c1b;
  --laranja-claro: #ffe2c2;
  --laranja-texto: #8a4300;
  --teal-claro: #dff4f1;
  --teal-texto: #0b5c52;
  --verde-claro: #dcf3e3;
  --verde-texto: #17673a;
  --fundo: #eceef5;
  --card: #ffffff;
  --texto: #10183a;
  --texto-2: #4f5a78;
  --texto-3: #7a839c;
  --linha: #e6e8f0;
  --raio: 20px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 14px/1.45 Inter, system-ui, sans-serif; }
[hidden] { display: none !important; }
h1, h2 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; margin: 0; }
button { font: inherit; cursor: pointer; }

/* marca */
.marca { display: flex; align-items: center; gap: 10px; }
.marca-icone { width: 34px; height: 34px; border-radius: 11px; background: var(--laranja); display: grid; place-items: center; }
.marca-icone svg { width: 18px; height: 18px; fill: var(--navy); }
.marca-nome { font: 700 23px 'Space Grotesk', sans-serif; letter-spacing: -0.03em; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--navy); }
.login-card { width: 100%; max-width: 380px; background: var(--card); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.login-card .marca-nome { color: var(--navy); }
.login-card h1 { font-size: 24px; margin-top: 8px; }
.login-card .sub { margin: -6px 0 6px; color: var(--texto-2); }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: var(--texto-2); }
.login-card input { font: inherit; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; background: #f7f8fc; color: var(--texto); }
.login-card input:focus { outline: 2px solid var(--laranja); outline-offset: 1px; }
.erro { color: #b42318; min-height: 1em; margin: 0; font-size: 13px; }
.btn-primario { border: 0; border-radius: 12px; padding: 13px; background: var(--laranja); color: #1b1205; font-weight: 700; }
.btn-primario:disabled { opacity: .6; }

/* layout */
.app { display: flex; gap: 18px; padding: 18px; min-height: 100vh; }
.lateral { width: 220px; flex-shrink: 0; background: var(--navy); color: #fff; border-radius: 22px; padding: 24px 16px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 18px; height: calc(100vh - 36px); }
.lateral .marca { padding: 0 8px 24px; }
.nav-item { padding: 11px 14px; border-radius: 12px; color: #c9d1ee; text-decoration: none; font-weight: 500; }
.nav-item.ativo { background: var(--laranja); color: #1b1205; font-weight: 700; }
.nav-item:hover:not(.ativo) { background: var(--navy-2); color: #fff; }
.lateral-rodape { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.quem { font-weight: 600; }
.papel { font-size: 12px; color: #aab3d1; margin-bottom: 10px; }
.btn-sair { background: transparent; color: #c9d1ee; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: 7px 12px; }
.btn-sair:hover { color: #fff; border-color: #fff; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sobretitulo { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.topo h1 { font-size: 30px; }
.filtros { display: flex; align-items: center; gap: 14px; }
.segmentado { display: flex; background: #fff; border-radius: 12px; padding: 4px; }
.segmentado button { border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; font-weight: 600; color: var(--texto-2); }
.segmentado button.ativo { background: var(--navy); color: #fff; }
.atualizado { font-size: 12px; color: var(--texto-3); }
.corpo { display: flex; flex-direction: column; gap: 18px; transition: opacity .2s; }
.corpo.carregando { opacity: .55; }

/* hero + tiles */
.linha-hero { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; gap: 18px; }
.hero { background: var(--navy); color: #fff; border-radius: var(--raio); padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; }
.hero-rotulo { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #ffb45e; }
.hero-valor { font: 700 64px/1.05 'Space Grotesk', sans-serif; letter-spacing: -0.04em; margin: 8px 0 4px; font-variant-numeric: proportional-nums; }
.hero-sub { color: #c9d1ee; font-size: 13px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.tile { background: var(--card); border-radius: var(--raio); padding: 18px 20px; }
.tile-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.tile-valor { font: 700 32px/1.2 'Space Grotesk', sans-serif; margin-top: 6px; letter-spacing: -0.02em; }
.tile-nota { font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.tile-laranja { background: var(--laranja); }
.tile-laranja .tile-rotulo { color: #3a1d00; }
.tile-laranja .tile-nota { color: #5c2e00; }
.tile-teal { background: var(--teal-claro); }
.tile-teal .tile-rotulo, .tile-teal .tile-valor { color: var(--teal-texto); }
.tile-teal .tile-nota { color: #2f7a70; }

/* cards */
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card { background: var(--card); border-radius: var(--raio); padding: 20px 22px; min-width: 0; }
.card-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-topo h2 { font-size: 18px; }
.card-sub { font-size: 12px; color: var(--texto-3); }
.contador { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.contador.laranja { background: var(--laranja-claro); color: var(--laranja-texto); }
.contador.teal { background: var(--teal-claro); color: var(--teal-texto); }
.aviso { font-size: 12px; color: var(--texto-2); margin: 10px 0 0; }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #f5f6fa; text-decoration: none; color: inherit; }
a.item:hover { background: #eef0f7; }
.avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.item-texto { flex: 1; min-width: 0; }
.item-titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pilula { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pilula.laranja { background: var(--laranja-claro); color: var(--laranja-texto); }
.pilula.teal { background: var(--teal-claro); color: var(--teal-texto); }
.vazio { padding: 22px 12px; text-align: center; color: var(--texto-3); background: #f8f9fc; border-radius: 14px; }

/* graficos */
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .barra { cursor: default; }
.grafico .barra:hover, .grafico .barra:focus { opacity: .82; outline: none; }
.tooltip { position: fixed; z-index: 10; pointer-events: none; background: #fff; border: 1px solid var(--linha); box-shadow: 0 6px 20px rgba(16, 24, 58, .12); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; }
.tooltip strong { display: block; font-size: 15px; }
.tooltip span { color: var(--texto-2); }

/* tabelas */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-3); padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 11px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela th.num, .tabela td.num { text-align: right; }
.tabela tr:last-child td { border-bottom: 0; }
.pos { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #f0f1f6; font-weight: 700; font-size: 12px; margin-right: 8px; }
.pos.p1 { background: var(--laranja); color: #1b1205; }
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.selo.bom { background: var(--verde-claro); color: var(--verde-texto); }
.selo.atencao { background: var(--laranja-claro); color: var(--laranja-texto); }
.selo.nd { background: #f0f1f6; color: var(--texto-3); }

@media (max-width: 1100px) {
  .linha-hero { grid-template-columns: 1fr; }
  .duas { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { flex-direction: column; padding: 12px 16px; }
  .lateral { width: auto; height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 14px; }
  .lateral .marca { padding: 0 8px 0 0; }
  .lateral-rodape { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; gap: 10px; align-items: center; }
  .papel { margin: 0; }
  .nav-item { display: none; }
  .hero-valor { font-size: 52px; }
}