/* 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; }
}

/* ---------------------------------------------------------------------------
   5. Entrada no celular
   A composição original somava a arte decorativa e o formulário em sequência.
   Em telefones, isso excedia a altura da janela e criava uma faixa vazia com
   rolagem. A tela passa a ocupar a altura útil inteira; a arte é dispensada
   nessa largura, preservando o acesso e as informações necessárias.
   --------------------------------------------------------------------------- */
/* Apenas a Urla Shop sai da entrada. A marca Uberlândia Refrescos + Coca-Cola
   continua visível e maior, inclusive no cabeçalho e no login. */
.login-hero-brands img:last-child { display: none; }
.login-hero-brands img:first-child { width: 238px; height: 48px; }
.login-lockup .brand-coca { width: 190px; height: 38px; }
.app-lockup .brand-coca { width: 184px; height: 35px; }
.sidebar-brand { padding-inline: 10px; }
.sidebar-brand-logo { max-width: 186px; padding: 8px 11px; }

@media (max-width: 620px) {
  html:has(#login-view:not([hidden])),
  body:has(#login-view:not([hidden])) {
    height: 100%;
    overflow: hidden;
  }

  .login-shell {
    display: block;
    height: 100dvh;
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
  }

  .login-panel {
    width: 100%;
    height: 100%;
    margin: 0;
    grid-template-rows: minmax(190px, 30vh) minmax(0, 1fr);
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  .login-hero {
    min-height: 0;
    padding: 16px 20px 18px;
  }

  .login-hero-brands {
    /* No celular a marca aparece no próprio formulário, sem repetir a mesma
       placa no bloco de apresentação. */
    display: none;
  }

  .login-lockup {
    display: flex;
    min-height: 38px;
    margin-bottom: 10px;
  }

  .login-lockup .brand-coca { width: 196px; height: 38px; }
  .login-lockup .brand-title { display: none; }

  .app-lockup .brand-coca { width: 116px; height: 28px; }

  .login-hero-copy { margin-top: 14px; }
  .login-hero-copy h2 { margin: 6px 0 8px; font-size: clamp(24px, 7vw, 29px); }
  .login-hero-copy p { font-size: 11.5px; line-height: 1.4; }
  .login-art { display: none; }

  .login-form-panel {
    /* Em telas altas o conteúdo se distribui no painel, em vez de deixar uma
       faixa vazia abaixo do aviso de segurança. Em telas menores continua
       cabendo inteiro, pois o conteúdo não recebe altura fixa. */
    justify-content: center;
    min-height: 0;
    padding: 18px 22px 16px;
  }

  .login-heading { margin: 0 0 14px; }
  .login-heading h1 { margin: 5px 0 6px; font-size: 24px; }
  .login-heading > p:last-child { font-size: 12px; line-height: 1.42; }
  #login-form { gap: 10px; }
  .form-field { gap: 5px; }
  .input-shell, .input-shell input { min-height: 46px; }
  #login-submit { min-height: 48px; margin-top: 2px; }
  .login-security { margin-top: 13px; }
}