/* =========================================================
   CENTRAL COMERCIAL AGENFLEX
   Arquivo: painel.css

   Responsabilidade:
   - Filtros comerciais
   - Meta individual
   - Meta Oficial por Time
   - Resultado consolidado
   - Comparativo dos vendedores
   - Tabela comercial
   - Ações do Painel
   - Transferência de propostas
   ========================================================= */


/* =========================================================
   ## 1. FILTROS
   ========================================================= */

.painel-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 22px;
}


.painel-filtros .field {
  flex: 1 1 150px;
  min-width: 145px;
}


.painel-filtros select,
.painel-filtros input {
  width: 100%;
}


.painel-filtro-time {
  min-width: 145px !important;
}


/* =========================================================
   ## 2. META COMERCIAL
   ========================================================= */

.painel-meta-area {
  margin-bottom: 20px;
  padding: 20px;

  border: 1px solid #dbe2ea;
  border-radius: 14px;

  background: #fff;
}


.painel-meta-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 18px;
}


.painel-meta-head h3 {
  margin: 0 0 5px;

  font-size: 20px;

  color: #0f172a;
}


.painel-meta-head p {
  margin: 0;

  font-size: 12px;

  color: #64748b;
}


.painel-meta-periodo {
  display: flex;
  gap: 10px;
}


.painel-meta-periodo .field {
  min-width: 125px;
}


.painel-meta-cards {
  display: grid;

  grid-template-columns:
    repeat(auto-fit,
      minmax(160px, 1fr));

  gap: 12px;
}


.painel-meta-card {
  padding: 16px;

  border: 1px solid #dbe2ea;
  border-radius: 12px;

  background: #f8fafc;
}


.painel-meta-card[hidden] {
  display: none !important;
}


.painel-meta-card span {
  display: block;

  margin-bottom: 7px;

  font-size: 10px;
  font-weight: 900;

  color: #64748b;

  letter-spacing: .4px;
}


.painel-meta-card strong {
  display: block;

  font-size: 22px;

  color: #0f172a;
}


.painel-meta-card.conquistado {
  background: #f1faf4;

  border-color: #d5ebdc;
}


.painel-meta-card.falta {
  background: #fff9e9;

  border-color: #f2dfab;
}


.painel-meta-card.atingimento {
  background: #f3f8ff;

  border-color: #d7e8fb;
}


.painel-meta-card.distribuida {
  background: #f4f0ff;

  border-color: #ded3fa;
}


/* =========================================================
   ## 3. BARRA DA META
   ========================================================= */

.painel-meta-progress {
  width: 100%;
  height: 10px;

  margin-top: 16px;

  overflow: hidden;

  border-radius: 999px;

  background: #e9eef5;
}


.painel-meta-progress-bar {
  height: 100%;

  border-radius: inherit;

  background: #0f5fb3;

  transition:
    width .3s ease;
}


/* =========================================================
   ## 4. RESUMO DOS TIMES
   ========================================================= */

.painel-times-resumo {
  margin-bottom: 20px;
  padding: 18px;

  border: 1px solid #dbe2ea;
  border-radius: 14px;

  background: #fff;
}


.painel-times-resumo[hidden] {
  display: none !important;
}


.painel-times-head {
  margin-bottom: 14px;
}


.painel-times-head h3 {
  margin: 0 0 4px;

  font-size: 17px;

  color: #0f172a;
}


.painel-times-head p {
  margin: 0;

  font-size: 12px;

  color: #64748b;
}


.painel-times-cards {
  display: grid;

  grid-template-columns:
    repeat(3,
      minmax(220px, 1fr));

  gap: 12px;
}


.painel-time-card {
  padding: 15px;

  border: 1px solid #dbe2ea;
  border-radius: 12px;

  background: #f8fafc;
}


.painel-time-card.pharma {
  background: #f3f8ff;

  border-color: #d7e8fb;
}


.painel-time-card.food {
  background: #fff8f1;

  border-color: #f2dfcb;
}


.painel-time-card.revenda {
  background: #f1faf4;

  border-color: #d5ebdc;
}


.painel-time-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 14px;
}


.painel-time-card-head>strong {
  font-size: 16px;

  color: #0f172a;
}


.painel-time-card-grid {
  display: grid;

  grid-template-columns:
    repeat(2,
      minmax(120px, 1fr));

  gap: 12px;
}


.painel-time-card-grid span {
  display: block;

  margin-bottom: 4px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .35px;

  color: #64748b;
}


.painel-time-card-grid b {
  display: block;

  font-size: 13px;

  color: #0f172a;
}


/* =========================================================
   ## 5. CARDS DE STATUS
   ========================================================= */

.painel-cards {
  display: grid;

  grid-template-columns:
    repeat(5,
      minmax(180px, 1fr));

  gap: 14px;

  margin-bottom: 22px;
}


.painel-card {
  padding: 18px;

  border: 1px solid #dbe2ea;
  border-radius: 14px;

  background: #f8fafc;
}


.painel-card span {
  display: block;

  margin-bottom: 9px;

  font-size: 11px;
  font-weight: 900;

  color: #475569;

  letter-spacing: .5px;
}


.painel-card strong {
  display: block;

  margin-bottom: 7px;

  font-size: 28px;
  line-height: 1;

  color: #0f172a;
}


.painel-card small {
  font-size: 13px;

  font-weight: 800;

  color: #475569;
}


.painel-card.andamento {
  background: #f3f8ff;

  border-color: #d7e8fb;
}


.painel-card.concluido {
  background: #f1faf4;

  border-color: #d5ebdc;
}


.painel-card.nao-conquistado {
  background: #fff5f5;

  border-color: #f2d7da;
}


.painel-card.vencida {
  background: #fff8e8;

  border-color: #f0d38a;
}


/* =========================================================
   ## 6. COMPARATIVO DE VENDEDORES
   ========================================================= */

.painel-comparativo {
  margin-bottom: 24px;
  padding: 18px;

  border: 1px solid #dbe2ea;
  border-radius: 14px;

  background: #fff;
}


.painel-comparativo[hidden] {
  display: none !important;
}


.painel-comparativo-head {
  margin-bottom: 14px;
}


.painel-comparativo-head h3 {
  margin: 0 0 4px;

  font-size: 17px;

  color: #0f172a;
}


.painel-comparativo-head p {
  margin: 0;

  font-size: 12px;

  color: #64748b;
}


.painel-comparativo-table {
  min-width: 900px;
}


.painel-comparativo-table td {
  vertical-align: middle;
}


/* =========================================================
   ## 7. TABELA PRINCIPAL
   ========================================================= */

.painel-table {
  min-width: 1300px;
}


.painel-table th {
  white-space: nowrap;
}


.painel-table td {
  vertical-align: middle;
}


.painel-secondary {
  margin-top: 4px;

  font-size: 12px;

  color: var(--muted);
}


.painel-value {
  white-space: nowrap;

  font-weight: 900;
}


/* =========================================================
   ## 8. BADGES
   ========================================================= */

.painel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 9px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .3px;

  white-space: nowrap;
}


/* =========================================================
   ## 9. TIME
   ========================================================= */

.painel-badge.time.pharma {
  background: #eaf4ff;

  color: #145da0;
}


.painel-badge.time.food {
  background: #fff1e4;

  color: #9a4c13;
}


.painel-badge.time.revenda {
  background: #e7f6ec;

  color: #146c2e;
}


.painel-badge.time.sem-time {
  background: #f1f3f5;

  color: #6b7280;
}


/* =========================================================
   ## 10. ORIGEM
   ========================================================= */

.painel-badge.origem {
  background: #eef2f7;

  color: #475569;
}


.painel-badge.origem.leads_mkt {
  background: #eef2ff;

  color: #4338ca;
}


.painel-badge.origem.prospeccao {
  background: #eaf4ff;

  color: #145da0;
}


.painel-badge.origem.gestao_carteira {
  background: #f1ecff;

  color: #6842a8;
}


.painel-badge.origem.sem-origem {
  background: #f1f3f5;

  color: #6b7280;
}


/* =========================================================
   ## 11. STATUS
   ========================================================= */

.painel-badge.status.proposta {
  background: #edf2f7;

  color: #334155;
}


.painel-badge.status.andamento {
  background: #e8f2ff;

  color: #155fa0;
}


.painel-badge.status.concluido {
  background: #e7f6ec;

  color: #146c2e;
}


.painel-badge.status.nao_conquistado {
  background: #fdebec;

  color: #a61b29;
}

/* =========================================================
   ## 11.1 VALIDADE
   ========================================================= */

.painel-validade {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 5px;
}


.painel-validade small {
  font-size: 10px;

  font-weight: 800;

  white-space: nowrap;

  color: #64748b;
}


.painel-badge.validade.vigente {
  background: #e7f6ec;

  color: #146c2e;
}


.painel-badge.validade.vence-hoje {
  background: #fff4d6;

  color: #7a5200;
}


.painel-badge.validade.vencida {
  background: #fdebec;

  color: #a61b29;
}


.painel-badge.validade.encerrada {
  background: #eef2f7;

  color: #475569;
}


.painel-badge.validade.sem-validade {
  background: #f1f3f5;

  color: #6b7280;
}

/* =========================================================
   ## 12. REVISÃO
   ========================================================= */

.painel-revisao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 5px;
}


.painel-revisao b {
  font-size: 13px;
}


.painel-revisao-status {
  display: inline-flex;

  padding: 4px 7px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .3px;

  white-space: nowrap;
}


.painel-revisao-status.rascunho {
  background: #fff4d6;

  color: #7a5200;
}


.painel-revisao-status.enviada {
  background: #e7f6ec;

  color: #146c2e;
}


/* =========================================================
   ## 13. AÇÕES
   ========================================================= */

.painel-actions {
  display: flex;
  align-items: center;

  gap: 7px;

  white-space: nowrap;
}


.painel-open {
  padding: 7px 11px;

  white-space: nowrap;
}


.painel-transferir {
  padding: 7px 11px;

  white-space: nowrap;
}


/* =========================================================
   ## 14. MODAL DE TRANSFERÊNCIA
   ========================================================= */

.painel-transferencia-modal {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  overflow-y: auto;

  background:
    rgba(15,
      23,
      42,
      .58);

  backdrop-filter:
    blur(3px);
}


.painel-transferencia-modal[hidden] {
  display: none !important;
}


body.painel-modal-aberto {
  overflow: hidden;
}


/* =========================================================
   ## 15. CAIXA DO MODAL
   ========================================================= */

.painel-transferencia-dialog {
  width: min(100%,
      560px);

  max-height:
    calc(100vh - 48px);

  overflow-y: auto;

  border: 1px solid #dbe2ea;
  border-radius: 16px;

  background: #fff;

  box-shadow:
    0 24px 70px rgba(15,
      23,
      42,
      .24);
}


/* =========================================================
   ## 16. CABEÇALHO DO MODAL
   ========================================================= */

.painel-transferencia-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding: 22px 22px 18px;

  border-bottom:
    1px solid #e5eaf0;
}


.painel-transferencia-head>div:first-child {
  min-width: 0;
}


.painel-transferencia-kicker {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .6px;

  color: #64748b;
}


.painel-transferencia-head h3 {
  margin: 0;

  font-size: 20px;
  line-height: 1.25;

  color: #0f172a;
}


.painel-transferencia-head p {
  margin: 6px 0 0;

  font-size: 12px;
  line-height: 1.5;

  color: #64748b;
}


.painel-transferencia-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  padding: 0;

  border: 1px solid #dbe2ea;
  border-radius: 9px;

  background: #fff;

  color: #475569;

  font-size: 23px;
  line-height: 1;

  cursor: pointer;
}


.painel-transferencia-fechar:hover {
  background: #f8fafc;

  color: #0f172a;
}


/* =========================================================
   ## 17. CORPO DO MODAL
   ========================================================= */

.painel-transferencia-body {
  display: flex;
  flex-direction: column;

  gap: 18px;

  padding: 22px;
}


.painel-transferencia-body .field {
  margin: 0;
}


.painel-transferencia-body label {
  display: block;

  margin-bottom: 7px;

  font-size: 12px;
  font-weight: 800;

  color: #334155;
}


.painel-transferencia-body select,
.painel-transferencia-body textarea {
  width: 100%;
}


.painel-transferencia-body textarea {
  min-height: 105px;

  resize: vertical;
}


/* =========================================================
   ## 18. RESPONSÁVEL ATUAL
   ========================================================= */

.painel-transferencia-atual {
  padding: 15px 16px;

  border: 1px solid #dbe2ea;
  border-radius: 12px;

  background: #f8fafc;
}


.painel-transferencia-atual span {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .5px;

  color: #64748b;
}


.painel-transferencia-atual strong {
  display: block;

  margin-bottom: 5px;

  font-size: 16px;

  color: #0f172a;
}


.painel-transferencia-atual small {
  display: block;

  font-size: 11px;
  line-height: 1.5;

  color: #64748b;
}


/* =========================================================
   ## 19. INFORMAÇÕES DO DESTINO
   ========================================================= */

.painel-transferencia-destino-info {
  margin-top: 7px;

  font-size: 11px;

  color: #64748b;
}


.painel-transferencia-ajuda {
  margin-top: 7px;

  font-size: 10px;

  color: #64748b;
}


/* =========================================================
   ## 20. RODAPÉ DO MODAL
   ========================================================= */

.painel-transferencia-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 9px;

  padding: 16px 22px 20px;

  border-top:
    1px solid #e5eaf0;

  background: #f8fafc;
}


.painel-transferencia-footer .btn {
  white-space: nowrap;
}


/* =========================================================
   ## 21. CARREGAMENTO / VAZIO
   ========================================================= */

.painel-loading {
  padding: 30px !important;

  text-align: center;

  color: var(--muted);
}


#painelVazio {
  display: none;

  margin-top: 14px;

  padding: 22px;

  border: 1px dashed #cfd6df;
  border-radius: 12px;

  text-align: center;

  color: var(--muted);

  background: #f8fafc;
}


/* =========================================================
   ## 22. RESPONSIVIDADE
   ========================================================= */

@media (max-width: 1200px) {

  .painel-times-cards {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 1100px) {

  .painel-cards,
  .painel-meta-cards {

    grid-template-columns:
      repeat(2,
        minmax(180px, 1fr));

  }

}


@media (max-width: 700px) {

  .painel-filtros .field {
    flex-basis: 100%;
  }


  .painel-cards,
  .painel-meta-cards {
    grid-template-columns: 1fr;
  }


  .painel-meta-head {
    flex-direction: column;
  }


  .painel-meta-periodo {
    width: 100%;

    flex-direction: column;
  }


  .painel-meta-periodo .field {
    width: 100%;
  }


  .painel-time-card-grid {
    grid-template-columns: 1fr;
  }


  .painel-actions {
    flex-direction: column;
    align-items: stretch;
  }


  .painel-actions .btn {
    width: 100%;
  }


  .painel-transferencia-modal {
    align-items: flex-start;

    padding: 12px;
  }


  .painel-transferencia-dialog {
    width: 100%;

    max-height:
      calc(100vh - 24px);

    border-radius: 13px;
  }


  .painel-transferencia-head {
    padding: 18px 16px 15px;
  }


  .painel-transferencia-body {
    padding: 18px 16px;
  }


  .painel-transferencia-footer {
    flex-direction: column-reverse;
    align-items: stretch;

    padding: 14px 16px 18px;
  }


  .painel-transferencia-footer .btn {
    width: 100%;
  }

}

/* =========================================================
   META DIÁRIA NECESSÁRIA
   ========================================================= */

.painel-meta-card.diaria {
  background: #fff8e8;
  border-color: #efd38c;
}

.painel-meta-card.diaria strong {
  color: #8a5700;
}

.painel-meta-card.diaria small {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 800;
  color: #7a6200;
}