/* Desempenho no celular: hierarquia por tamanho, nao por repeticao.
   Antes: 5 cartoes de peso igual, emojis competindo com os numeros. */
@media (max-width: 820px) {

  /* Cabecalho enxuto: o dado aparece sem rolar meia tela */
  /* Cabecalho enxuto: o dado aparece sem rolar meia tela */
  .dash-header__brand p { display: none !important; }
  .dash-header__brand .eyebrow { font-size: 9.5px !important; opacity: .55 !important; }
  .dash-header__brand img { display: none !important; }
  .dash-header__brand h1 { font-size: 19px !important; margin: 2px 0 0 !important; }
  .dash-header { padding: 14px !important; margin-bottom: 12px !important; gap: 10px !important; }
  .dash-header__intro { margin-bottom: 0 !important; }

  /* Uma coluna, cartoes compactos */
  .dash-grid--metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .dash-metric {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "titulo valor" "delta valor" !important;
    align-items: center !important;
    gap: 2px 14px !important;
    padding: 13px 15px !important;
    border-radius: 12px !important;
  }
  .dash-metric__topo {
    display: contents !important;
  }
  .dash-metric__icon {
    display: none !important;
  }
  .dash-metric__value {
    grid-area: valor !important;
    font-size: 27px !important;
    line-height: 1 !important;
    align-self: center !important;
  }
  .dash-metric__title {
    grid-area: titulo !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }
  .dash-metric__delta {
    grid-area: delta !important;
    font-size: 11px !important;
    opacity: .5 !important;
    line-height: 1.3 !important;
  }

  /* O primeiro cartao e o principal */
  .dash-grid--metrics > .dash-metric:first-child {
    padding: 18px 16px !important;
    background: rgba(255,255,255,.05) !important;
  }
  .dash-grid--metrics > .dash-metric:first-child .dash-metric__value {
    font-size: 40px !important;
  }
  .dash-grid--metrics > .dash-metric:first-child .dash-metric__title {
    font-size: 16px !important;
  }
  .dash-grid--metrics > .dash-metric:first-child .dash-metric__delta {
    font-size: 12px !important;
  }

  /* Cor com significado: verde so quando esta bom */
  .dash-metric.warning .dash-metric__value { color: #f0a33a !important; }
  .dash-metric.critico .dash-metric__value { color: #e5645f !important; }
  .dash-metric.neutro  .dash-metric__value { color: #b9b9c2 !important; }

  /* O chat nao cobre mais o ultimo cartao */
  .chat-fab, .fab, [class*="chat-flut"] { bottom: 84px !important; }

  /* Filtros e sino na mesma linha, compactos */
  .dash-header__meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 8px !important;
  }
  .dash-pill-box {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 0 !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  .dash-filter {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 9px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
  }
  .dash-filter > span {
    font-size: 9.5px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: .5 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  .dash-filter select {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    background: none !important;
    border: 0 !important;
  }

  .dash-header__actions {
    position: static !important;
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
  }
  .dash-header__brand { padding-right: 52px !important; }
  .dash-chip {
    padding: 7px 11px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    min-height: 0 !important;
  }
}@media (max-width: 820px) {
  .dash-metric.pap-tem-gauge {
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "titulo gauge" "delta gauge" !important;
    align-items: center !important;
    justify-items: start !important;
    text-align: left !important;
    padding: 14px !important;
    gap: 2px 14px !important;
  }
  .pap-gauge {
    grid-area: gauge !important;
    grid-row: 1 / span 2 !important;
    line-height: 0;
    align-self: center !important;
  }
  .dash-metric.pap-tem-gauge .dash-metric__value { display: none !important; }
  .dash-metric.pap-tem-gauge .dash-metric__title { font-size: 15px !important; }
}
@media (max-width: 820px) {
  /* No celular: so os cartoes e Proximos treinamentos.
     Os demais blocos continuam completos no computador. */
  .dash-grid--split { display: block !important; }
  .dash-grid--split > .dash-card { display: none !important; }
  .dashboard-shell .dash-grid--split:nth-of-type(2) > .dash-card:first-child {
    display: block !important;
  }
  .pap-aviso-pc {
    display: block !important;
    margin: 18px 0 4px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    opacity: .65 !important;
    text-align: center !important;
  }
}
/* Chat em construcao: botao flutuante oculto ate o assistente voltar.
   Para reativar, remova este bloco. */
.ai-float { display: none !important; }

/* ---------------------------------------------------------------
   CORRECAO: Metas de Avaliacoes e Plano de Chao no celular.

   O bloco acima esconde todo .dash-card dentro de .dash-grid--split e
   tenta reexibir um usando :nth-of-type(2). Esse seletor conta TODAS as
   divs irmas, nao so as .dash-grid--split -- entao ele quase nunca casa
   com o elemento pretendido, e o resultado pratico e que nada volta a
   aparecer. Seletor que parece certo e nao e.

   Aqui os cartoes voltam, empilhados em uma coluna. No celular o gerente
   precisa justamente destes dois numeros: quanto falta de avaliacao na
   semana e quantos plantoes de Plano de Chao ja foram preenchidos.
   --------------------------------------------------------------- */
@media (max-width: 820px) {
  .dash-grid--split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .dash-grid--split > .dash-card {
    display: block !important;
  }
  .dash-metas-lista { gap: 10px !important; }
  .dash-metas-loja__head { font-size: 13px !important; }
  .dash-metas-linha { font-size: 12px !important; }
}

/* ---------------------------------------------------------------
   No celular, Desempenho nao mostra o Plano de Chao do mes.

   Decisao do dono do produto: no telefone interessa quanto falta de
   avaliacao na semana; o acompanhamento de plantoes se le sentado.
   A TELA Plano de Chao continua normal no menu -- isto esconde apenas
   o cartao dentro de Desempenho.

   Alvo pelo marcador data-card, nao por posicao: acrescentar um cartao
   novo no painel nao muda o que fica escondido.
   --------------------------------------------------------------- */
@media (max-width: 820px) {
  .dash-card[data-card^="plano-de-chao"] { display: none !important; }
}

/*
 * Plano de Chão novamente visível no Desempenho mobile.
 * Esta regra desfaz a solicitação anterior que escondia somente esse card.
 */
@media (max-width: 900px) {
  .dash-card[data-card="plano-de-chao-no-mes"] {
    display: block !important;
    visibility: visible !important;
  }
}