/* Os Indicadores no desenho da SAG v2 (itens 5.2 e 5.3).
 *
 * Folha própria, como a da Visão geral: mexer aqui não redesenha o resto. Um verde só —
 * o da moldura (3.1), e não o verde à parte dos Indicadores da v2. */

/* AS MESMAS MARGENS DAS OUTRAS TELAS (Henrique, 20/10: "os Indicadores ainda não estão no
 * padrão das outras") — sem o recuo e a largura máxima próprios: quem dá a margem é a moldura,
 * como em Contatos, Negócios e Visão geral. Um vão só entre os blocos. */
.indicadores {
  color: var(--sag-ink, #17201e);
  display: grid;
  gap: 14px;
}
.indicadores > * { margin-top: 0; margin-bottom: 0; }

/* As cores do semáforo, sempre com a palavra ao lado. */
.indicadores .in-verde { --tom: var(--sag-green, #15866d); }
.indicadores .in-ambar { --tom: #d78718; }
.indicadores .in-vermelho { --tom: #d84b52; }
.indicadores .in-cinza { --tom: #9da8a4; }
.in-palavra-verde { color: var(--sag-green, #15866d); }
.in-palavra-ambar { color: #b26f12; }
.in-palavra-vermelho { color: #c23d44; }
.in-palavra-cinza { color: #7d8985; }

/* ------------------------------------------------------------------ o período */

.in-filtro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
  padding: 11px 12px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 13px;
  background: #fff;
}
.in-filtro-rotulo {
  color: var(--sag-muted, #66736f);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.in-campo {
  /* altura: `.barra-de-controles` (V.1) */
  padding: 0 10px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 9px;
  background: #fff;
  color: var(--sag-ink, #17201e);
  font: inherit;
  font-size: 11.5px;
}
.in-campo:focus {
  outline: none;
  border-color: #8bcdb9;
  box-shadow: 0 0 0 3px rgba(21, 134, 109, .1);
}
.in-datas { display: flex; align-items: center; gap: 7px; }
.in-datas[hidden] { display: none; }
.in-datas > span { color: var(--sag-muted, #66736f); font-size: 11px; }
.in-botao {
  /* A ALTURA DA BARRA no próprio botão (Henrique, 16/10: "Baixar relatório fora do padrão"):
   * o "Baixar relatório" é um link `<a>`, e a régua da barra só alcança `button`. */
  height: var(--alto-barra, 32px);
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #cce7de;
  border-radius: 9px;
  background: var(--sag-green-soft, #eaf6f2);
  color: var(--sag-green, #15866d);
  font: inherit;
  font-size: var(--texto-p, 13px);
  font-weight: 750;
  cursor: pointer;
}
.in-botao-principal {
  border-color: var(--sag-green, #15866d);
  background: var(--sag-green, #15866d);
  color: #fff;
}
.in-cresce { flex: 1; }
.in-atualizado { color: var(--sag-soft, #91a09b); font-size: 10px; }
.in-acoes { display: flex; align-items: center; gap: 7px; }
a.in-botao {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* ------------------------------------------------------------------ a saúde geral e a faixa */

.in-heroi {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 15px;
  padding: 20px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff 55%, #f0f8f5);
}
.in-heroi-so-faixa { grid-template-columns: minmax(0, 1fr); }
.in-heroi-so-faixa .in-heroi-texto { padding-left: 0; border-left: 0; }
.in-saude { display: flex; align-items: center; gap: 14px; }
.in-anel {
  position: relative;
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--tom) calc(var(--nota, 0) * 1%), #e8eeeb 0);
}
.in-anel::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}
.in-anel strong { position: relative; z-index: 1; font-size: 22px; }
.in-saude-texto span {
  display: block;
  color: var(--sag-soft, #91a09b);
  font-size: 9.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .55px;
}
.in-saude-texto b { display: block; margin-top: 5px; font-size: 14px; }
.in-saude-texto small {
  display: block;
  margin-top: 4px;
  color: var(--sag-muted, #66736f);
  font-size: 10px;
}
.in-heroi-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 18px;
  border-left: 1px solid var(--sag-line, #e4e9e7);
}
.in-heroi-texto > span {
  color: var(--sag-green, #15866d);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .9px;
}
.in-heroi-texto h2 { margin: 5px 0 4px; font-size: 21px; letter-spacing: -.45px; }
.in-heroi-texto p { margin: 0; color: var(--sag-muted, #66736f); font-size: 12px; line-height: 1.55; }
.in-pilulas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.in-pilulas i {
  padding: 5px 9px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 999px;
  background: #fff;
  color: var(--sag-muted, #66736f);
  font-size: 10px;
  font-style: normal;
}

/* ------------------------------------------------------------------ os indicadores */

.in-cartoes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}
.in-cartao {
  min-height: 107px;
  padding: 14px 15px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 15px;
  background: #fff;
}
.in-cartao-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.in-cartao-cabeca span {
  color: var(--sag-muted, #66736f);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.in-cartao-cabeca i {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--sag-green-soft, #eaf6f2);
  color: var(--sag-green, #15866d);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 900;
}
.in-cartao-cabeca i svg { width: 16px; height: 16px; }
.in-cartao strong { display: block; margin-top: 8px; font-size: 21px; letter-spacing: -.5px; }
.in-agora { color: var(--sag-soft, #91a09b); font-size: 10px; font-weight: 650; letter-spacing: 0; }
.in-cartao-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.in-cartao-pe small { color: var(--sag-soft, #91a09b); font-size: 10px; }
.in-variacao { color: var(--sag-soft, #91a09b); font-size: 10px; font-weight: 800; white-space: nowrap; }
.in-sobe { color: var(--sag-green, #15866d); }
.in-desce { color: #d84b52; }

/* ------------------------------------------------------------------ as seções */

.in-secao {
  margin-bottom: 15px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
}
.in-secao-cabeca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sag-line, #e4e9e7);
}
.in-secao-titulo { flex: 1; min-width: 200px; }
.in-secao-titulo > span {
  display: block;
  color: var(--sag-green, #15866d);
  font-size: 9.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .55px;
}
.in-secao-titulo h3 { margin: 3px 0 0; font-size: 13.5px; }
.in-secao-titulo p { margin: 4px 0 0; color: var(--sag-soft, #91a09b); font-size: 10.5px; }

/* ------------------------------------------------------------------ o farol */

.in-legenda { display: flex; flex-wrap: wrap; gap: 10px; color: var(--sag-muted, #66736f); font-size: 10px; }
.in-legenda i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--tom);
}
.in-modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-modulo { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--sag-line, #e4e9e7); }
.in-modulo:last-child { border-right: 0; }
.in-modulo-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.in-modulo-topo b { font-size: 11.5px; }
.in-nota {
  min-width: 29px;
  height: 25px;
  padding: 0 6px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--tom);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}
.in-trilho {
  height: 5px;
  margin: 10px 0 7px;
  border-radius: 999px;
  background: #edf1ef;
  overflow: hidden;
}
.in-trilho i {
  display: block;
  width: var(--largura, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--tom);
}
.in-palavra { display: block; font-size: 10.5px; }
.in-modulo small {
  display: block;
  margin-top: 3px;
  color: var(--sag-soft, #91a09b);
  font-size: 10px;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ o gráfico */

.in-metricas { display: flex; flex-wrap: wrap; gap: 5px; }
.in-metricas button {
  padding: 6px 9px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 8px;
  background: #fff;
  color: var(--sag-muted, #66736f);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.in-metricas button[aria-pressed="true"] {
  border-color: #c4e5d9;
  background: var(--sag-green-soft, #eaf6f2);
  color: var(--sag-green, #15866d);
  font-weight: 800;
}
.in-grafico { padding: 15px 16px 12px; overflow-x: auto; }
.in-barras {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 225px;
  min-width: 620px;
  border-bottom: 1px solid var(--sag-line, #e4e9e7);
  background: repeating-linear-gradient(to top, transparent 0, transparent 54px, #eef2f0 55px);
}
.in-dia {
  position: relative;
  flex: 1;
  min-width: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.in-barra {
  width: min(72%, 18px);
  height: var(--altura, 0%);
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(#2a9f84, var(--sag-green, #15866d));
}
.in-barra.in-zero { height: 1px; min-height: 1px; background: #c9d3cf; border-radius: 0; }
.in-dia:hover .in-barra { filter: brightness(.92); }
.in-dica {
  position: absolute;
  top: 5px;
  z-index: 3;
  display: none;
  padding: 4px 6px;
  border-radius: 6px;
  background: #17241f;
  color: #fff;
  font-size: 9.5px;
  white-space: nowrap;
}
.in-dia:hover .in-dica { display: block; }
.in-dia-rotulo {
  position: absolute;
  bottom: -17px;
  color: var(--sag-soft, #91a09b);
  font-size: 9px;
  white-space: nowrap;
}
.in-grafico-pe {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  color: var(--sag-soft, #91a09b);
  font-size: 10px;
}
.in-grafico-pe b { color: var(--sag-ink, #17201e); }

/* ------------------------------------------------------------------ lado a lado (5.3) */

.in-grade,
.in-dupla {
  display: grid;
  gap: 15px;
  margin-bottom: 15px;
}
.in-grade { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.in-dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-grade > .in-secao,
.in-dupla > .in-secao { margin-bottom: 0; }
.in-secao-cabeca > a {
  color: var(--sag-green, #15866d);
  font-size: 10.5px;
  font-weight: 750;
  text-decoration: none;
}
.in-vazio {
  padding: 26px 16px;
  color: var(--sag-soft, #91a09b);
  font-size: 11.5px;
  text-align: center;
}

/* ------------------------------------------------------------------ os alertas */

.in-alertas { display: flex; flex-direction: column; }
.in-alerta {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--sag-line, #e4e9e7);
  color: inherit;
  text-decoration: none;
}
.in-alerta:last-child { border-bottom: 0; }
.in-alerta:hover { background: #f8faf9; }
.in-ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tom);
}
.in-alerta-texto { min-width: 0; }
.in-alerta-texto b {
  display: block;
  font-size: 9.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.in-alerta-texto strong { display: block; margin-top: 2px; font-size: 11.5px; }
.in-alerta-texto small {
  display: block;
  margin-top: 2px;
  color: var(--sag-soft, #91a09b);
  font-size: 10px;
  line-height: 1.4;
}
.in-seta { color: var(--sag-soft, #91a09b); font-size: 17px; }

/* ------------------------------------------------------------------ o funil e a origem */

.in-linhas { display: flex; flex-direction: column; padding: 6px 0; }
.in-linha {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 1.4fr) minmax(86px, auto);
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
}
.in-linha-rotulo,
.in-linha-valor { min-width: 0; }
.in-linha-rotulo b,
.in-linha-valor b {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.in-linha-rotulo small,
.in-linha-valor small { display: block; color: var(--sag-soft, #91a09b); font-size: 10px; }
.in-linha-valor { text-align: right; }
.in-sem-origem { color: var(--sag-muted, #66736f); font-style: italic; }
.in-barra-h {
  height: 8px;
  border-radius: 999px;
  background: #edf1ef;
  overflow: hidden;
}
.in-barra-h i {
  display: block;
  width: var(--largura, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2a9f84, var(--sag-green, #15866d));
}

/* ------------------------------------------------------------------ a equipe */

.in-tabela-rolagem { overflow-x: auto; }
.in-tabela {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 11.5px;
}
.in-tabela th {
  padding: 9px 16px;
  background: #f8faf9;
  color: var(--sag-muted, #66736f);
  font-size: 9.5px;
  font-weight: 850;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.in-tabela td {
  padding: 10px 16px;
  border-top: 1px solid var(--sag-line, #e4e9e7);
  vertical-align: middle;
}
.in-tabela td b { display: block; }
.in-tabela td small { display: block; color: var(--sag-soft, #91a09b); font-size: 10px; }

/* PROJETOS LADO A LADO (P.2): a linha inteira leva ao projeto; o botão do nome é o foco
 * do teclado. Vale na Visão geral também. */
.lado-a-lado-linha { cursor: pointer; }
.lado-a-lado-linha:hover td { background: #f7faf9; }
.lado-a-lado-projeto {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sag-ink, #17201e);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lado-a-lado-projeto b { display: inline; }

.in-pessoa { display: flex; align-items: center; gap: 9px; }
.in-avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sag-green-soft, #eaf6f2);
  color: var(--sag-green, #15866d);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

/* ------------------------------------------------------------------ as quebras */

@media (max-width: 1150px) {
  .in-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-grade,
  .in-dupla { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .indicadores { gap: 10px; }
  .in-filtro { align-items: stretch; }
  .in-filtro-rotulo { width: 100%; }
  .in-filtro > select { flex: 1; }
  .in-datas:not([hidden]) { width: 100%; flex-wrap: wrap; }
  .in-atualizado { display: none; }
  .in-heroi { grid-template-columns: 1fr; }
  .in-heroi-texto { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--sag-line, #e4e9e7); }
  .in-heroi-so-faixa .in-heroi-texto { padding-top: 0; border-top: 0; }
  .in-modulos { grid-template-columns: 1fr; }
  .in-modulo { border-right: 0; border-bottom: 1px solid var(--sag-line, #e4e9e7); }
  .in-modulo:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
  .in-cartoes { grid-template-columns: 1fr; }
  .in-anel { flex-basis: 70px; width: 70px; height: 70px; }
  .in-grafico-pe { flex-direction: column; }
  .in-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .in-linha .in-barra-h { grid-column: 1 / -1; grid-row: 2; }
}

/* ------------------------------------------------------------------ a impressão (5.3)
 *
 * Só quando a tela aberta é a dos Indicadores. Some o menu, o cabeçalho, o filtro e os
 * botões; a folha deixa de rolar por dentro (senão só sai a primeira página); e nenhum
 * cartão quebra no meio. */

@media print {
  body:has(.indicadores) .menu,
  body:has(.indicadores) #cabecalho,
  body:has(.indicadores) .acoes-da-tela,
  .indicadores .in-filtro,
  .indicadores .in-metricas,
  .indicadores .in-dica,
  .indicadores .in-seta,
  .indicadores .in-secao-cabeca > a { display: none !important; }
  body:has(.indicadores),
  body:has(.indicadores) .aplicacao,
  body:has(.indicadores) .folha,
  body:has(.indicadores) #conteudo {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: #fff;
  }
  .indicadores { max-width: none; padding: 0; }
  .indicadores * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .in-heroi,
  .in-cartao,
  .in-secao,
  .in-modulo,
  .in-alerta,
  .in-linha,
  .in-tabela tr { break-inside: avoid; page-break-inside: avoid; }
  .in-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .in-grade,
  .in-dupla { grid-template-columns: minmax(0, 1fr); }
  .in-grafico,
  .in-tabela-rolagem { overflow: visible; }
  .in-barras,
  .in-tabela { min-width: 0; }
}