/* =========================================================
   VALORES A RECEBER DOS APLICATIVOS
   ANDREIA PESSOA CONFEITARIA
   VERSÃO 3 - TRÊS CANAIS AGRUPADOS
========================================================= */

.recebimentos-painel {
  overflow: hidden;
  margin-bottom: 22px;
  border-color: #d7e9e0;
  background:
    radial-gradient(circle at 97% 8%, rgba(74, 174, 125, 0.09), transparent 24%),
    linear-gradient(135deg, #fff, #fffafc);
}

.recebimentos-topo,
.recebimentos-titulo,
.recebimentos-navegacao,
.recebimento-canal-topo {
  display: flex;
  align-items: center;
}

.recebimentos-topo {
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}

.recebimentos-titulo {
  min-width: 0;
  gap: 13px;
}

.recebimentos-titulo h2 {
  margin: 0 0 3px;
  color: var(--dash-vinho, #5d2f31);
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
}

.recebimentos-titulo p {
  margin: 0;
  color: #987b81;
  font-size: 10px;
  line-height: 1.5;
}

.recebimentos-navegacao {
  flex: 0 0 auto;
  gap: 7px;
}

.recebimentos-navegacao > button {
  display: inline-flex;
  min-width: 38px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #ead8dd;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  color: #7b5b61;
  background: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.recebimentos-navegacao > button:hover:not(:disabled) {
  border-color: #df6593;
  color: #df6593;
  transform: translateY(-1px);
}

.recebimentos-navegacao > button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.recebimentos-navegacao .recebimentos-hoje {
  gap: 6px;
  margin-left: 3px;
  color: #fff;
  border-color: #df6593;
  background: #df6593;
}

.recebimentos-navegacao .recebimentos-hoje:hover:not(:disabled) {
  color: #fff;
}

.recebimentos-periodo {
  min-width: 168px;
  padding: 0 8px;
  text-align: center;
}

.recebimentos-periodo small,
.recebimentos-periodo strong {
  display: block;
}

.recebimentos-periodo small {
  margin-bottom: 2px;
  color: #b08c93;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.recebimentos-periodo strong {
  color: var(--dash-vinho, #5d2f31);
  font-size: 10px;
}

.recebimentos-aviso {
  display: flex;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #f0d69b;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  color: #8a6517;
  background: #fff9ea;
  font-size: 10px;
}

.recebimentos-aviso[hidden] {
  display: none;
}

.recebimentos-aviso button {
  margin-left: auto;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #b88924;
  font-family: inherit;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}

.recebimentos-resumo {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.7fr);
  gap: 14px;
  margin-bottom: 15px;
}

.recebimentos-destaque {
  position: relative;
  display: flex;
  min-height: 126px;
  overflow: hidden;
  padding: 21px;
  border: 1px solid #bde3cf;
  border-radius: 16px;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #f4fff9, #fff);
}

.recebimentos-destaque::after {
  position: absolute;
  right: -38px;
  bottom: -45px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(58, 155, 104, 0.08);
  content: "";
}

.recebimentos-destaque > span {
  display: inline-flex;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  align-items: center;
  justify-content: center;
  color: #2f9966;
  background: #e4f7ec;
  font-size: 20px;
}

.recebimentos-destaque > div {
  z-index: 1;
  min-width: 0;
}

.recebimentos-destaque small,
.recebimentos-mini-resumo small {
  display: block;
  color: #9a7d83;
  font-size: 9px;
  line-height: 1.35;
}

.recebimentos-destaque strong {
  display: block;
  margin: 3px 0;
  color: #2f8f61;
  font-family: "Playfair Display", serif;
  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.15;
  white-space: nowrap;
}

.recebimentos-destaque p {
  margin: 0;
  color: #70927f;
  font-size: 9px;
}

.recebimentos-mini-resumo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.recebimentos-mini-resumo > div {
  display: flex;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid #eedfe3;
  border-radius: 13px;
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
}

.recebimentos-mini-resumo strong {
  margin-top: 3px;
  color: var(--dash-vinho, #5d2f31);
  font-family: "Playfair Display", serif;
  font-size: 17px;
  line-height: 1.15;
}

.recebimentos-canais {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.recebimento-canal-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  border: 1px solid #eadbdf;
  border-radius: 15px;
  background: #fff;
}

.recebimento-canal-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: #df6593;
  content: "";
}

.recebimento-canal-card.goomer::before {
  background: #4e9ee9;
}

.recebimento-canal-card.food99::before {
  background: #f2a63b;
}

.recebimento-canal-topo {
  min-width: 0;
  gap: 9px;
}

.recebimento-canal-icone {
  display: inline-flex;
  flex: 0 0 auto;
  width: 37px;
  height: 37px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  color: #d95082;
  background: #fdeaf1;
  font-size: 16px;
}

.goomer .recebimento-canal-icone {
  color: #327fc2;
  background: #e9f3ff;
}

.food99 .recebimento-canal-icone {
  color: #c77b14;
  background: #fff2dd;
}

.recebimento-canal-topo > div {
  min-width: 0;
}

.recebimento-canal-topo small {
  display: block;
  color: #a1848a;
  font-size: 8px;
}

.recebimento-canal-topo h3 {
  margin: 1px 0 0;
  color: var(--dash-vinho, #5d2f31);
  font-size: 12px;
  font-weight: 600;
}

.recebimento-status {
  margin-left: auto;
  padding: 5px 7px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 600;
  white-space: nowrap;
}

.recebimento-status.pendente {
  color: #b77812;
  background: #fff2d9;
}

.recebimento-status.recebido {
  color: #2e945f;
  background: #e4f7ec;
}

.recebimento-status.cancelado {
  color: #96767d;
  background: #f4edef;
}

.recebimento-status.sem-vendas {
  color: #987c82;
  background: #f7eff1;
}

.recebimento-valor {
  display: block;
  margin: 15px 0 12px;
  color: var(--dash-vinho, #5d2f31);
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
  white-space: nowrap;
}

.recebimento-valor-ignorado {
  display: block;
  margin-top: -8px;
  margin-bottom: 10px;
  color: #a2878d;
  font-size: 8px;
}

.recebimento-detalhes {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.recebimento-detalhes > div {
  display: flex;
  padding-bottom: 6px;
  border-bottom: 1px solid #f3e9ec;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.recebimento-detalhes span {
  color: #9d8187;
  font-size: 8px;
}

.recebimento-detalhes strong {
  color: #6b4a50;
  font-size: 9px;
}

.recebimento-acoes {
  display: grid;
  gap: 7px;
}

.btn-confirmar-recebimento,
.btn-cancelar-repasse,
.btn-reativar-repasse {
  display: inline-flex;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #b9dec9;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #2d8f5e;
  background: #f1fcf6;
  font-family: inherit;
  font-size: 8px;
  font-weight: 600;
  cursor: pointer;
}

.btn-confirmar-recebimento:hover:not(:disabled) {
  color: #fff;
  background: #399d69;
}

.btn-confirmar-recebimento:disabled {
  color: #b59ca2;
  border-color: #eadde1;
  background: #faf6f7;
  cursor: not-allowed;
}

.btn-cancelar-repasse {
  color: #a15c66;
  border-color: #ecd5d9;
  background: #fff8f9;
}

.btn-cancelar-repasse:hover:not(:disabled) {
  color: #fff;
  border-color: #bc6572;
  background: #bc6572;
}

.btn-reativar-repasse {
  color: #80646a;
  border-color: #e6d8dc;
  background: #fff;
}

.btn-reativar-repasse:hover:not(:disabled) {
  color: #fff;
  border-color: #80646a;
  background: #80646a;
}

.recebimento-canal-card:has(.recebimento-status.recebido)
  .btn-confirmar-recebimento {
  color: #8d7177;
  border-color: #eadde1;
  background: #fff;
}

.recebimento-canal-card:has(.recebimento-status.cancelado)
  .recebimento-valor {
  color: #9b7f85;
}

.recebimentos-observacao {
  display: flex;
  margin: 14px 0 0;
  align-items: flex-start;
  gap: 6px;
  color: #a1878c;
  font-size: 8px;
  line-height: 1.45;
}

@media (min-width: 901px) and (max-width: 1450px) {
  .recebimentos-canais {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recebimento-canal-card:last-child {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .recebimentos-topo {
    align-items: flex-start;
    flex-direction: column;
  }

  .recebimentos-navegacao {
    width: 100%;
  }

  .recebimentos-periodo {
    flex: 1;
  }

  .recebimentos-resumo {
    grid-template-columns: 1fr;
  }

  .recebimentos-canais {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .recebimentos-titulo {
    align-items: flex-start;
  }

  .recebimentos-titulo h2 {
    font-size: 21px;
  }

  .recebimentos-navegacao {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .recebimentos-navegacao .recebimentos-hoje {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
  }

  .recebimentos-periodo {
    min-width: 0;
  }

  .recebimentos-aviso {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .recebimentos-aviso button {
    width: 100%;
    margin-left: 0;
  }

  .recebimentos-mini-resumo {
    grid-template-columns: 1fr;
  }

  .recebimentos-destaque {
    min-height: 112px;
    padding: 17px;
  }

  .recebimentos-destaque strong {
    font-size: clamp(24px, 9vw, 31px);
  }
}

/* =========================================================
   REFINAMENTO VISUAL 2026
   RECEBIMENTOS DOS CANAIS

   Objetivos:
   - manter o mesmo padrão visual refinado do Dashboard;
   - aumentar a legibilidade em telas grandes e notebooks;
   - evitar valores e textos apertados;
   - melhorar navegação por período e leitura dos cards;
   - preservar HTML e JavaScript atuais;
   - manter excelente adaptação para tablet e celular.
========================================================= */

@media screen {

  /* =======================================================
     PAINEL / TOPO
  ======================================================= */

  .recebimentos-painel {
    margin-bottom: 24px;
    border-radius: 21px;
  }

  .recebimentos-topo {
    gap: 26px;
    margin-bottom: 23px;
  }

  .recebimentos-titulo {
    gap: 15px;
  }

  .recebimentos-titulo h2 {
    margin-bottom: 5px;
    font-size: 27px;
    line-height: 1.18;
  }

  .recebimentos-titulo p {
    max-width: 720px;
    font-size: 12px;
    line-height: 1.55;
  }

  /* =======================================================
     NAVEGAÇÃO DE PERÍODO
  ======================================================= */

  .recebimentos-navegacao {
    gap: 9px;
  }

  .recebimentos-navegacao > button {
    min-width: 42px;
    min-height: 42px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 12px;
  }

  .recebimentos-navegacao .recebimentos-hoje {
    gap: 7px;
    margin-left: 4px;
  }

  .recebimentos-periodo {
    min-width: 190px;
    padding: 0 10px;
  }

  .recebimentos-periodo small {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .recebimentos-periodo strong {
    font-size: 12px;
    line-height: 1.35;
  }

  /* =======================================================
     AVISO
  ======================================================= */

  .recebimentos-aviso {
    gap: 11px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.5;
  }

  .recebimentos-aviso button {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 10px;
  }

  /* =======================================================
     RESUMO PRINCIPAL
  ======================================================= */

  .recebimentos-resumo {
    grid-template-columns:
      minmax(300px, 0.95fr)
      minmax(0, 1.7fr);
    gap: 17px;
    margin-bottom: 18px;
  }

  .recebimentos-destaque {
    min-height: 145px;
    gap: 16px;
    padding: 24px;
    border-radius: 18px;
    transition:
      transform 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }

  .recebimentos-destaque:hover {
    transform: translateY(-2px);
    box-shadow:
      0 13px 28px rgba(58, 115, 84, 0.075);
  }

  .recebimentos-destaque::after {
    right: -42px;
    bottom: -50px;
    width: 145px;
    height: 145px;
  }

  .recebimentos-destaque > span {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 22px;
  }

  .recebimentos-destaque small,
  .recebimentos-mini-resumo small {
    font-size: 11px;
    line-height: 1.4;
  }

  .recebimentos-destaque strong {
    margin: 5px 0;
    overflow: visible;
    font-size: clamp(30px, 2.4vw, 39px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .recebimentos-destaque p {
    font-size: 11px;
    line-height: 1.45;
  }

  /* =======================================================
     MINI RESUMO
  ======================================================= */

  .recebimentos-mini-resumo {
    gap: 12px;
  }

  .recebimentos-mini-resumo > div {
    min-height: 72px;
    padding: 15px 16px;
    border-radius: 14px;
  }

  .recebimentos-mini-resumo strong {
    margin-top: 4px;
    overflow: visible;
    font-size: 21px;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* =======================================================
     CARDS DOS CANAIS
  ======================================================= */

  .recebimentos-canais {
    gap: 15px;
  }

  .recebimento-canal-card {
    padding: 19px;
    border-radius: 17px;
    transition:
      transform 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }

  .recebimento-canal-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 12px 27px rgba(90, 67, 74, 0.07);
  }

  .recebimento-canal-card::before {
    height: 4px;
  }

  .recebimento-canal-topo {
    gap: 11px;
  }

  .recebimento-canal-icone {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    font-size: 18px;
  }

  .recebimento-canal-topo small {
    font-size: 10px;
    line-height: 1.35;
  }

  .recebimento-canal-topo h3 {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.35;
  }

  .recebimento-status {
    padding: 6px 9px;
    font-size: 9px;
    line-height: 1.25;
  }

  .recebimento-valor {
    margin: 17px 0 14px;
    overflow: visible;
    font-size: clamp(27px, 2.1vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .recebimento-valor-ignorado {
    margin-top: -9px;
    margin-bottom: 12px;
    font-size: 10px;
    line-height: 1.4;
  }

  /* =======================================================
     DETALHES DO CANAL
  ======================================================= */

  .recebimento-detalhes {
    gap: 8px;
    margin-bottom: 14px;
  }

  .recebimento-detalhes > div {
    min-height: 34px;
    gap: 12px;
    padding-bottom: 8px;
  }

  .recebimento-detalhes span {
    font-size: 10px;
    line-height: 1.4;
  }

  .recebimento-detalhes strong {
    font-size: 11px;
    line-height: 1.4;
    text-align: right;
  }

  /* =======================================================
     AÇÕES
  ======================================================= */

  .recebimento-acoes {
    gap: 9px;
  }

  .btn-confirmar-recebimento,
  .btn-cancelar-repasse,
  .btn-reativar-repasse {
    min-height: 41px;
    padding: 0 12px;
    border-radius: 10px;
    gap: 7px;
    font-size: 10px;
  }

  /* =======================================================
     OBSERVAÇÃO
  ======================================================= */

  .recebimentos-observacao {
    gap: 8px;
    margin-top: 17px;
    font-size: 10px;
    line-height: 1.55;
  }
}

/* =========================================================
   DESKTOP / NOTEBOOK

   Em telas comuns com sidebar, três cards continuam lado a
   lado, mas ganham mais espaço interno e textos maiores.
========================================================= */

@media screen and (max-width: 1500px) {
  .recebimentos-resumo {
    grid-template-columns: 1fr;
  }

  .recebimentos-mini-resumo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .recebimentos-canais {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recebimento-canal-card {
    padding: 17px;
  }
}

/* =========================================================
   NOTEBOOK / TABLET GRANDE
========================================================= */

@media screen and (max-width: 1120px) {
  .recebimentos-topo {
    align-items: flex-start;
    flex-direction: column;
  }

  .recebimentos-navegacao {
    width: 100%;
  }

  .recebimentos-periodo {
    flex: 1;
  }

  .recebimentos-mini-resumo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recebimentos-canais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recebimento-canal-card:last-child {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 820px) {
  .recebimentos-titulo h2 {
    font-size: 25px;
  }

  .recebimentos-titulo p {
    font-size: 12px;
  }

  .recebimentos-resumo {
    grid-template-columns: 1fr;
  }

  .recebimentos-canais {
    grid-template-columns: 1fr;
  }

  .recebimento-canal-card:last-child {
    grid-column: auto;
  }

  .recebimentos-destaque {
    min-height: 132px;
    padding: 21px;
  }

  .recebimentos-destaque strong {
    font-size: 33px;
  }

  .recebimento-valor {
    font-size: 30px;
  }
}

/* =========================================================
   CELULAR
========================================================= */

@media screen and (max-width: 620px) {
  .recebimentos-topo {
    gap: 18px;
  }

  .recebimentos-titulo {
    align-items: flex-start;
    gap: 11px;
  }

  .recebimentos-titulo h2 {
    font-size: 23px;
  }

  .recebimentos-titulo p {
    font-size: 11px;
    line-height: 1.55;
  }

  .recebimentos-navegacao {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .recebimentos-navegacao > button {
    min-width: 42px;
    min-height: 42px;
    padding: 0 10px;
  }

  .recebimentos-navegacao .recebimentos-hoje {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
    min-height: 43px;
  }

  .recebimentos-periodo {
    min-width: 0;
    padding: 0 5px;
  }

  .recebimentos-periodo small {
    font-size: 9px;
  }

  .recebimentos-periodo strong {
    font-size: 11px;
  }

  .recebimentos-aviso {
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 10px;
  }

  .recebimentos-aviso button {
    width: 100%;
    margin-left: 0;
    min-height: 39px;
    font-size: 10px;
  }

  .recebimentos-mini-resumo {
    grid-template-columns: 1fr;
  }

  .recebimentos-mini-resumo > div {
    min-height: 68px;
    padding: 14px;
  }

  .recebimentos-mini-resumo small {
    font-size: 10px;
  }

  .recebimentos-mini-resumo strong {
    font-size: 20px;
  }

  .recebimentos-destaque {
    min-height: 120px;
    gap: 13px;
    padding: 18px;
  }

  .recebimentos-destaque > span {
    width: 48px;
    height: 48px;
  }

  .recebimentos-destaque small {
    font-size: 10px;
  }

  .recebimentos-destaque strong {
    font-size: 30px;
  }

  .recebimentos-destaque p {
    font-size: 10px;
  }

  .recebimento-canal-card {
    padding: 16px;
  }

  .recebimento-canal-icone {
    width: 40px;
    height: 40px;
  }

  .recebimento-canal-topo {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .recebimento-canal-topo h3 {
    font-size: 13px;
  }

  .recebimento-canal-topo small {
    font-size: 10px;
  }

  .recebimento-status {
    margin-left: 0;
    font-size: 9px;
  }

  .recebimento-valor {
    margin-top: 15px;
    font-size: 28px;
  }

  .recebimento-valor-ignorado {
    font-size: 10px;
  }

  .recebimento-detalhes > div {
    align-items: flex-start;
  }

  .recebimento-detalhes span {
    min-width: 0;
    font-size: 10px;
  }

  .recebimento-detalhes strong {
    flex: 0 0 auto;
    max-width: 52%;
    font-size: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .btn-confirmar-recebimento,
  .btn-cancelar-repasse,
  .btn-reativar-repasse {
    min-height: 43px;
    font-size: 10px;
  }

  .recebimentos-observacao {
    font-size: 10px;
  }
}