/* Ajustes de celular na area Imperdoaveis.

   Estes dois defeitos so aparecem no telefone e nao vem do codigo do
   Salarial: sao do pacote base. Como o montador nao edita `imperdoaveis.css`,
   a correcao entra por cima, em arquivo separado, do mesmo jeito que as areas
   novas ja entram. Se um dia o pacote base corrigir na origem, e so parar de
   incluir este arquivo.

   Nada aqui vale no computador. */

/* ---------------------------------------------------------------------------
   1. Cartao da proxima melhor acao
   O `.overview-insight` do painel e uma grade de tres colunas montada para
   TRES filhos diretos: icone, texto e botao. A area Imperdoaveis embrulha os
   tres num `.insight-card`, entao a grade recebe um filho so e o encaixa na
   coluna `auto` — que encolhe ate o min-content e quebra o texto em uma
   palavra por linha. A correcao devolve a grade para quem tem os tres filhos.
   --------------------------------------------------------------------------- */
#imp-insight {
  display: block;
}

#imp-insight .insight-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

#imp-insight .insight-card > div {
  min-width: 0;
}

#imp-insight .insight-card strong {
  display: block;
  font-size: 13px;
}

#imp-insight .insight-card p {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 620px) {
  /* No telefone o botao nao cabe na mesma linha; ele desce e ocupa a largura,
     que e o alvo de toque certo para a acao principal do cartao. */
  #imp-insight .insight-card {
    grid-template-columns: 39px minmax(0, 1fr);
    gap: 10px 12px;
  }

  #imp-insight .insight-card .insight-action {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   2. Indicadores do Dashboard, em quadros
   `repeat(auto-fit, minmax(180px, 1fr))` precisa de 372px para caber duas
   colunas. A area util do telefone tem 355px, entao caia sempre para uma
   coluna e os seis indicadores viravam uma lista comprida. Duas colunas fixas
   resolvem, e o texto encolhe junto para nao quebrar o numero.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .imp-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .imp-kpi {
    min-width: 0;
    padding: 13px 13px 14px;
  }

  .imp-kpi span {
    font-size: 9px;
    letter-spacing: .05em;
    overflow-wrap: anywhere;
  }

  .imp-kpi strong {
    font-size: 23px;
  }

  .imp-kpi small {
    font-size: 10.5px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .imp-kpi strong { font-size: 20px; }
}

/* ---------------------------------------------------------------------------
   3. Quadro de ranking escondido para o consultor
   O `.imp-grid` e uma grade de duas colunas. Com um dos quadros escondido, o
   que sobra ficava espremido na metade esquerda com um vazio do lado. Aqui ele
   ocupa a linha inteira. No celular a grade ja e de uma coluna e nada muda.
   --------------------------------------------------------------------------- */
.imp-grid:has(> .panel[hidden]) > .panel:not([hidden]) {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
   4. Linha do gargalo no celular
   O rotulo `2 de 10 sem positivar` explica o percentual, mas com `nowrap` ele
   roubava a largura do nome do subgrupo. No telefone ele pode quebrar.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .imp-blocker-count { white-space: normal; text-align: right; }
  .imp-blocker-count small { max-width: 11ch; margin-left: auto; }
}