/* =========================================================
   DASHBOARD - ANDREIA PESSOA CONFEITARIA
   CSS exclusivo do Dashboard
========================================================= */

:root {
  --dash-rosa: #df6293;
  --dash-rosa-escuro: #c94b7c;
  --dash-rosa-claro: #fff0f6;
  --dash-vinho: #5b2a29;
  --dash-texto: #71575b;
  --dash-borda: #efd9df;
  --dash-fundo: #fffafa;
  --dash-verde: #3a9b68;
  --dash-verde-claro: #e9f8ef;
  --dash-laranja: #e89514;
  --dash-laranja-claro: #fff4dd;
  --dash-lilas: #9157d2;
  --dash-lilas-claro: #f4eaff;
  --dash-azul: #3f79e6;
  --dash-azul-claro: #eaf2ff;
  --dash-vermelho: #c94a58;
  --dash-vermelho-claro: #fff0f2;
  --dash-sombra: 0 14px 36px rgba(98, 55, 62, 0.07);
}

.dashboard-pagina,
.dashboard-pagina * {
  box-sizing: border-box;
}

.dashboard-pagina {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 28px;
  color: var(--dash-texto);
  font-family: "Poppins", sans-serif;
}

.dashboard-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 34px;
  margin-bottom: 22px;
  border: 1px solid var(--dash-borda);
  border-radius: 25px;
  background:
    radial-gradient(circle at 92% 16%, rgba(223, 98, 147, 0.13), transparent 25%),
    #fff;
  box-shadow: var(--dash-sombra);
}

.dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--dash-rosa);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-cabecalho h1 {
  margin: 0;
  color: var(--dash-vinho);
  font-family: "Playfair Display", serif;
  font-size: clamp(39px, 4vw, 55px);
  font-weight: 700;
}

.dashboard-cabecalho p {
  max-width: 690px;
  margin: 4px 0 8px;
  color: #866c70;
  font-size: 13px;
}

.dashboard-atualizacao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #aa8b91;
  font-size: 9px;
}

.dashboard-cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}

.btn-dashboard-principal,
.btn-dashboard-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 47px;
  padding: 0 19px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.btn-dashboard-principal {
  border: 1px solid var(--dash-rosa);
  color: #fff;
  background: var(--dash-rosa);
  box-shadow: 0 10px 24px rgba(223, 98, 147, 0.22);
}

.btn-dashboard-principal:hover {
  color: #fff;
  background: var(--dash-rosa-escuro);
  transform: translateY(-1px);
}

.btn-dashboard-secundario {
  border: 1px solid var(--dash-borda);
  color: var(--dash-vinho);
  background: #fff;
}

.btn-dashboard-secundario:hover {
  background: var(--dash-rosa-claro);
}

.dashboard-aviso {
  position: fixed;
  top: 20px;
  right: 22px;
  z-index: 1100;
  max-width: min(390px, calc(100vw - 40px));
  padding: 15px 18px;
  border: 1px solid #bfe5ce;
  border-radius: 14px;
  color: #267348;
  background: #f2fcf6;
  box-shadow: 0 16px 38px rgba(71, 39, 45, 0.18);
  font-size: 12px;
  font-weight: 500;
}

.dashboard-aviso.erro {
  border-color: #f1bdc8;
  color: #a73750;
  background: #fff3f6;
}

.dashboard-resumo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 22px;
}

.dashboard-resumo-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 128px;
  padding: 21px;
  border: 1px solid var(--dash-borda);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-sombra);
}

.dashboard-resumo-card::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -55px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.75;
}

.dashboard-resumo-card.rosa::after,
.dashboard-resumo-card.rosa .dashboard-resumo-icone {
  color: var(--dash-rosa);
  background: var(--dash-rosa-claro);
}

.dashboard-resumo-card.verde::after,
.dashboard-resumo-card.verde .dashboard-resumo-icone {
  color: var(--dash-verde);
  background: var(--dash-verde-claro);
}

.dashboard-resumo-card.laranja::after,
.dashboard-resumo-card.laranja .dashboard-resumo-icone {
  color: var(--dash-laranja);
  background: var(--dash-laranja-claro);
}

.dashboard-resumo-card.lilas::after,
.dashboard-resumo-card.lilas .dashboard-resumo-icone {
  color: var(--dash-lilas);
  background: var(--dash-lilas-claro);
}

.dashboard-resumo-icone {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  font-size: 19px;
}

.dashboard-resumo-conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dashboard-resumo-conteudo small {
  color: #856a6e;
  font-size: 10px;
}

.dashboard-resumo-conteudo strong {
  overflow: hidden;
  color: var(--dash-vinho);
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-resumo-conteudo span {
  color: #a18489;
  font-size: 9px;
}

.dashboard-resumo-conteudo span.indice-alta {
  color: var(--dash-verde);
}

.dashboard-resumo-conteudo span.indice-baixa {
  color: var(--dash-vermelho);
}

.dashboard-painel {
  padding: 23px;
  border: 1px solid var(--dash-borda);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--dash-sombra);
}

.dashboard-indices-painel,
.dashboard-operacao-painel,
.dashboard-foco-painel {
  margin-bottom: 22px;
}

.dashboard-secao-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 21px;
}

.dashboard-secao-topo.compacto {
  align-items: center;
  margin-bottom: 18px;
}

.dashboard-secao-topo > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-secao-icone {
  display: grid;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  font-size: 17px;
}

.dashboard-secao-icone.rosa {
  color: var(--dash-rosa);
  background: var(--dash-rosa-claro);
}

.dashboard-secao-icone.verde {
  color: var(--dash-verde);
  background: var(--dash-verde-claro);
}

.dashboard-secao-icone.laranja {
  color: var(--dash-laranja);
  background: var(--dash-laranja-claro);
}

.dashboard-secao-icone.lilas {
  color: var(--dash-lilas);
  background: var(--dash-lilas-claro);
}

.dashboard-secao-icone.azul {
  color: var(--dash-azul);
  background: var(--dash-azul-claro);
}

.dashboard-secao-topo h2 {
  margin: 0;
  color: var(--dash-vinho);
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 700;
}

.dashboard-secao-topo p {
  margin: 2px 0 0;
  color: #9e8186;
  font-size: 9px;
}

.dashboard-secao-topo > strong {
  color: var(--dash-vinho);
  font-family: "Playfair Display", serif;
  font-size: 21px;
}

.dashboard-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dash-verde);
  background: var(--dash-verde-claro);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-selo.destaque {
  color: var(--dash-rosa-escuro);
  background: var(--dash-rosa-claro);
}

.dashboard-indices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-indice-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 108px;
  padding: 14px;
  border: 1px solid #f1e2e6;
  border-radius: 16px;
  background: #fffcfd;
}

.dashboard-indice-grafico {
  --indice: 0;
  --cor-indice: var(--dash-verde);
  position: relative;
  display: grid;
  flex: 0 0 61px;
  width: 61px;
  height: 61px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--cor-indice) calc(var(--indice) * 1%),
    #f2e6e9 0
  );
}

.dashboard-indice-grafico::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
}

.dashboard-indice-grafico span {
  position: relative;
  z-index: 1;
  color: var(--dash-vinho);
  font-size: 10px;
  font-weight: 700;
}

.dashboard-indice-card > div:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dashboard-indice-card small {
  color: #a08287;
  font-size: 8px;
}

.dashboard-indice-card strong {
  overflow: hidden;
  color: var(--dash-vinho);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.dashboard-indice-card > div:last-child > span {
  margin-top: 2px;
  color: #ad9296;
  font-size: 7px;
  line-height: 1.35;
}

.dashboard-indice-card button {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  color: var(--dash-rosa);
  background: transparent;
  font-family: inherit;
  font-size: 8px;
  font-weight: 600;
  cursor: pointer;
}

.dashboard-grid {
  display: grid;
  gap: 22px;
  margin-bottom: 22px;
}

.dashboard-grid-vendas {
  grid-template-columns: minmax(0, 1fr) 290px;
}

.dashboard-grid-duas-colunas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-grid-tres-colunas {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-grafico-barras {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 11px;
  min-height: 245px;
  padding: 18px 5px 0;
  border-bottom: 1px solid #eedde2;
  background:
    linear-gradient(to top, transparent 24%, #f7eaee 25%, transparent 26%),
    linear-gradient(to top, transparent 49%, #f7eaee 50%, transparent 51%),
    linear-gradient(to top, transparent 74%, #f7eaee 75%, transparent 76%);
}

.dashboard-grafico-item {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 225px;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}

.dashboard-grafico-valor {
  margin-bottom: 6px;
  color: #8e7075;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-grafico-coluna {
  position: relative;
  width: min(42px, 65%);
  min-height: 7px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #ee85ad, var(--dash-rosa));
  box-shadow: 0 8px 18px rgba(223, 98, 147, 0.19);
  transition: height 0.4s ease;
}

.dashboard-grafico-item.hoje .dashboard-grafico-coluna {
  background: linear-gradient(180deg, #7ec99d, var(--dash-verde));
}

.dashboard-grafico-dia {
  margin-top: 7px;
  color: #9f8287;
  font-size: 8px;
  text-transform: capitalize;
}

.dashboard-grafico-dia strong {
  display: block;
  color: var(--dash-vinho);
  font-size: 9px;
}

.dashboard-meta-painel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background:
    radial-gradient(circle at 50% 15%, rgba(223, 98, 147, 0.13), transparent 35%),
    #fff;
}

.dashboard-meta-icone {
  display: grid;
  width: 55px;
  height: 55px;
  margin-bottom: 11px;
  place-items: center;
  border-radius: 16px;
  color: var(--dash-rosa);
  background: var(--dash-rosa-claro);
  font-size: 22px;
}

.dashboard-meta-painel > small {
  color: #a28489;
  font-size: 9px;
}

.dashboard-meta-painel > strong {
  color: var(--dash-vinho);
  font-family: "Playfair Display", serif;
  font-size: 29px;
}

.dashboard-meta-barra {
  overflow: hidden;
  width: 100%;
  height: 10px;
  margin: 13px 0;
  border-radius: 999px;
  background: #f4e7eb;
}

.dashboard-meta-barra span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dash-rosa), #ec8caf);
  transition: width 0.4s ease;
}

.dashboard-meta-painel p {
  margin: 0;
  color: #92767b;
  font-size: 9px;
}

.dashboard-meta-painel button {
  margin-top: 13px;
  padding: 8px 12px;
  border: 1px solid var(--dash-borda);
  border-radius: 10px;
  color: var(--dash-rosa-escuro);
  background: #fff;
  font-family: inherit;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}

.dashboard-alerta-badge {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dash-vermelho);
  background: var(--dash-vermelho-claro);
  font-size: 9px;
  font-weight: 600;
}

.dashboard-alerta-badge.sem-alerta {
  color: var(--dash-verde);
  background: var(--dash-verde-claro);
}

.dashboard-operacao-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-operacao-cards article {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 14px;
  border: 1px solid #f0e1e5;
  border-radius: 15px;
  background: #fffcfd;
}

.dashboard-operacao-cards article > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
}

.dashboard-operacao-cards article.novo > span {
  color: var(--dash-rosa);
  background: var(--dash-rosa-claro);
}

.dashboard-operacao-cards article.producao > span {
  color: var(--dash-laranja);
  background: var(--dash-laranja-claro);
}

.dashboard-operacao-cards article.pronto > span,
.dashboard-operacao-cards article.entregue > span {
  color: var(--dash-verde);
  background: var(--dash-verde-claro);
}

.dashboard-operacao-cards article.cancelado > span {
  color: var(--dash-vermelho);
  background: var(--dash-vermelho-claro);
}

.dashboard-operacao-cards article div {
  display: flex;
  flex-direction: column;
}

.dashboard-operacao-cards small {
  color: #9c8085;
  font-size: 8px;
}

.dashboard-operacao-cards strong {
  color: var(--dash-vinho);
  font-family: "Playfair Display", serif;
  font-size: 23px;
}

.dashboard-foco-painel {
  border-color: #ebbbcc;
  background:
    radial-gradient(circle at 97% 5%, rgba(223, 98, 147, 0.12), transparent 23%),
    #fff;
}

.dashboard-prioridades {
  display: grid;
  gap: 10px;
}

.dashboard-prioridade {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #f0e0e4;
  border-radius: 15px;
  background: #fffcfd;
}

.dashboard-prioridade > span:first-child {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  font-size: 17px;
}

.dashboard-prioridade.alto > span:first-child {
  color: var(--dash-vermelho);
  background: var(--dash-vermelho-claro);
}

.dashboard-prioridade.medio > span:first-child {
  color: var(--dash-laranja);
  background: var(--dash-laranja-claro);
}

.dashboard-prioridade.oportunidade > span:first-child {
  color: var(--dash-verde);
  background: var(--dash-verde-claro);
}

.dashboard-prioridade-conteudo {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dashboard-prioridade-conteudo strong {
  color: var(--dash-vinho);
  font-size: 10px;
}

.dashboard-prioridade-conteudo span {
  margin-top: 2px;
  color: #92767b;
  font-size: 8px;
  line-height: 1.45;
}

.dashboard-prioridade-acao {
  max-width: 170px;
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--dash-rosa-escuro);
  background: var(--dash-rosa-claro);
  font-size: 8px;
  font-weight: 600;
  text-align: center;
}

.dashboard-lista-progresso,
.dashboard-ranking-produtos,
.dashboard-lista-estoque,
.dashboard-pedidos-recentes,
.dashboard-pagamentos {
  display: grid;
  gap: 10px;
}

.dashboard-progresso-item {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 10px;
}

.dashboard-progresso-item > span:first-child {
  overflow: hidden;
  color: var(--dash-vinho);
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-progresso-trilho {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #f3e7ea;
}

.dashboard-progresso-trilho span {
  display: block;
  min-width: 3px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dash-rosa), #eb91b1);
}

.dashboard-progresso-valor {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.dashboard-progresso-valor strong {
  color: var(--dash-vinho);
  font-size: 9px;
}

.dashboard-progresso-valor small {
  color: #a2878b;
  font-size: 7px;
}

.dashboard-produto-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f4e6ea;
}

.dashboard-produto-item:last-child {
  border-bottom: 0;
}

.dashboard-produto-posicao {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: var(--dash-rosa);
  background: var(--dash-rosa-claro);
  font-size: 9px;
  font-weight: 700;
}

.dashboard-produto-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dashboard-produto-info strong {
  overflow: hidden;
  color: var(--dash-vinho);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-produto-info small {
  color: #a2878b;
  font-size: 7px;
}

.dashboard-produto-faturamento {
  color: var(--dash-verde);
  font-size: 9px;
  font-weight: 600;
}

.dashboard-mini-metricas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.dashboard-mini-metricas > div {
  display: flex;
  min-height: 68px;
  padding: 11px;
  border: 1px solid #f1e1e5;
  border-radius: 13px;
  flex-direction: column;
  justify-content: center;
  background: #fffcfd;
}

.dashboard-mini-metricas small {
  color: #a18489;
  font-size: 7px;
}

.dashboard-mini-metricas strong {
  overflow: hidden;
  color: var(--dash-vinho);
  font-family: "Playfair Display", serif;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-link-painel {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding: 10px 12px;
  border: 1px solid var(--dash-borda);
  border-radius: 11px;
  color: var(--dash-rosa-escuro);
  background: var(--dash-rosa-claro);
  font-family: inherit;
  font-size: 8px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.dashboard-link-painel:hover {
  color: var(--dash-rosa-escuro);
  background: #ffe5ef;
}

.dashboard-estoque-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 11px;
  background: #fff9fa;
}

.dashboard-estoque-item > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--dash-laranja);
  background: var(--dash-laranja-claro);
}

.dashboard-estoque-item.sem-estoque > span:first-child {
  color: var(--dash-vermelho);
  background: var(--dash-vermelho-claro);
}

.dashboard-estoque-item div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dashboard-estoque-item strong {
  overflow: hidden;
  color: var(--dash-vinho);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-estoque-item small {
  color: #a1868a;
  font-size: 7px;
}

.dashboard-estoque-item > strong {
  color: var(--dash-vermelho);
  font-size: 9px;
}

.dashboard-pedido-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f3e5e8;
}

.dashboard-pedido-item:last-child {
  border-bottom: 0;
}

.dashboard-pedido-numero {
  color: var(--dash-vinho);
  font-family: "Playfair Display", serif;
  font-size: 15px;
  font-weight: 700;
}

.dashboard-pedido-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dashboard-pedido-info strong {
  overflow: hidden;
  color: #765b60;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-pedido-info small {
  color: #aa8f93;
  font-size: 7px;
}

.dashboard-pedido-final {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.dashboard-pedido-final strong {
  color: var(--dash-vinho);
  font-size: 9px;
}

.dashboard-status {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 600;
  text-transform: capitalize;
}

.dashboard-status.novo {
  color: var(--dash-rosa-escuro);
  background: var(--dash-rosa-claro);
}

.dashboard-status.producao {
  color: #9a6307;
  background: var(--dash-laranja-claro);
}

.dashboard-status.pronto,
.dashboard-status.entregue {
  color: #28784a;
  background: var(--dash-verde-claro);
}

.dashboard-status.cancelado {
  color: #a63a4d;
  background: var(--dash-vermelho-claro);
}

.dashboard-pagamento-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #f1e2e6;
  border-radius: 12px;
  background: #fffcfd;
}

.dashboard-pagamento-item > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: var(--dash-verde);
  background: var(--dash-verde-claro);
}

.dashboard-pagamento-item div {
  display: flex;
  flex-direction: column;
}

.dashboard-pagamento-item small {
  color: #a1868a;
  font-size: 7px;
}

.dashboard-pagamento-item strong {
  color: var(--dash-vinho);
  font-size: 9px;
}

.dashboard-vazio {
  display: grid;
  min-height: 115px;
  padding: 20px;
  place-items: center;
  color: #a1878b;
  text-align: center;
  font-size: 9px;
}

.dashboard-vazio i {
  display: block;
  margin-bottom: 6px;
  color: #df91ae;
  font-size: 24px;
}

[hidden] {
  display: none !important;
}

@media (max-width: 1380px) {
  .dashboard-indices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-grid-tres-colunas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .dashboard-resumo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid-vendas,
  .dashboard-grid-duas-colunas,
  .dashboard-grid-tres-colunas {
    grid-template-columns: 1fr;
  }

  .dashboard-operacao-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .dashboard-pagina {
    padding: 15px;
  }

  .dashboard-cabecalho {
    align-items: flex-start;
    flex-direction: column;
    padding: 23px;
    border-radius: 20px;
  }

  .dashboard-cabecalho-acoes {
    width: 100%;
  }

  .dashboard-cabecalho-acoes > * {
    flex: 1;
  }

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

  .dashboard-operacao-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-prioridade {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .dashboard-prioridade-acao {
    grid-column: 2;
    max-width: none;
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .dashboard-pagina {
    padding: 10px;
  }

  .dashboard-resumo,
  .dashboard-indices,
  .dashboard-operacao-cards {
    grid-template-columns: 1fr;
  }

  .dashboard-secao-topo {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-selo {
    align-self: flex-start;
  }

  .dashboard-grafico-barras {
    gap: 4px;
  }

  .dashboard-grafico-valor {
    font-size: 6px;
  }

  .dashboard-grafico-coluna {
    width: 58%;
  }

  .dashboard-progresso-item {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .dashboard-progresso-valor {
    grid-column: 2;
    align-items: flex-start;
  }
}

/* =========================================================
   AJUSTE DE LEGIBILIDADE E CARDS EM TELAS GRANDES
   Mantém o HTML e o JavaScript intactos.
========================================================= */

/* Textos gerais ligeiramente maiores */

.dashboard-cabecalho p {
  font-size: 14px;
  line-height: 1.55;
}

.dashboard-atualizacao {
  font-size: 10px;
}

.dashboard-resumo-card {
  min-height: 142px;
  padding: 22px;
}

.dashboard-resumo-conteudo small {
  font-size: 11px;
  line-height: 1.35;
}

.dashboard-resumo-conteudo strong {
  overflow: visible;
  font-size: clamp(25px, 2vw, 31px);
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.dashboard-resumo-conteudo span {
  font-size: 10px;
  line-height: 1.4;
}

.dashboard-secao-topo h2 {
  font-size: 24px;
}

.dashboard-secao-topo p {
  font-size: 10px;
  line-height: 1.5;
}

.dashboard-selo,
.dashboard-alerta-badge {
  font-size: 10px;
}

.dashboard-indice-card {
  min-height: 118px;
  padding: 16px;
}

.dashboard-indice-grafico span {
  font-size: 11px;
}

.dashboard-indice-card small {
  font-size: 9px;
}

.dashboard-indice-card strong {
  overflow: visible;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: clip;
}

.dashboard-indice-card > div:last-child > span,
.dashboard-indice-card button {
  font-size: 8px;
}

.dashboard-grafico-valor,
.dashboard-grafico-dia {
  font-size: 9px;
}

.dashboard-grafico-dia strong,
.dashboard-meta-painel > small,
.dashboard-meta-painel p,
.dashboard-meta-painel button {
  font-size: 10px;
}

.dashboard-operacao-cards small,
.dashboard-prioridade-conteudo span,
.dashboard-prioridade-acao {
  font-size: 9px;
}

.dashboard-prioridade-conteudo strong {
  font-size: 11px;
}

.dashboard-progresso-item > span:first-child,
.dashboard-progresso-valor strong,
.dashboard-produto-info strong,
.dashboard-produto-faturamento {
  font-size: 10px;
}

.dashboard-progresso-valor small,
.dashboard-produto-info small {
  font-size: 8px;
}

.dashboard-mini-metricas small {
  font-size: 8px;
}

.dashboard-mini-metricas strong {
  font-size: 19px;
}

.dashboard-link-painel {
  font-size: 9px;
}

.dashboard-estoque-item strong,
.dashboard-pedido-info strong,
.dashboard-pedido-final strong,
.dashboard-pagamento-item strong {
  font-size: 10px;
}

.dashboard-estoque-item small,
.dashboard-pedido-info small,
.dashboard-pagamento-item small,
.dashboard-status {
  font-size: 8px;
}

.dashboard-vazio {
  font-size: 10px;
}

/*
 * A sidebar ocupa parte da tela. Em notebooks e desktops comuns,
 * dois cards por linha deixam números e descrições totalmente visíveis.
 */

@media (min-width: 1121px) and (max-width: 1500px) {
  .dashboard-resumo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 1501px) {
  .dashboard-resumo {
    grid-template-columns: repeat(4, minmax(250px, 1fr));
  }
}

@media (max-width: 780px) {
  .dashboard-resumo-conteudo strong {
    font-size: clamp(24px, 7vw, 30px);
  }
}

@media (max-width: 520px) {
  .dashboard-resumo-card {
    min-height: 132px;
    padding: 19px;
  }

  .dashboard-secao-topo h2 {
    font-size: 22px;
  }
}

/* =========================================================
   REFINAMENTO VISUAL DO DASHBOARD
   TELA GRANDE + NOTEBOOK + TABLET + CELULAR

   Objetivos:
   - aumentar a legibilidade geral;
   - evitar números e textos cortados;
   - dar mais respiro aos cards;
   - deixar os índices e listas mais confortáveis;
   - melhorar gráfico, operação e prioridades;
   - preservar HTML e JavaScript atuais.
========================================================= */

@media screen {

  /* =======================================================
     BASE E CABEÇALHO
  ======================================================= */

  .dashboard-pagina {
    font-size: 16px;
    line-height: 1.58;
  }

  .dashboard-cabecalho {
    gap: 32px;
    min-height: 210px;
    padding: 36px 40px;
    margin-bottom: 26px;
    border-radius: 24px;
    box-shadow:
      0 15px 38px rgba(98, 55, 62, 0.075);
  }

  .dashboard-eyebrow {
    margin-bottom: 10px;
    font-size: 13px;
  }

  .dashboard-cabecalho h1 {
    font-size: clamp(46px, 4vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
  }

  .dashboard-cabecalho p {
    max-width: 780px;
    margin: 9px 0 12px;
    font-size: 16px;
    line-height: 1.65;
  }

  .dashboard-atualizacao {
    font-size: 12px;
  }

  .btn-dashboard-principal,
  .btn-dashboard-secundario {
    min-height: 50px;
    padding: 0 20px;
    font-size: 14px;
  }

  .dashboard-aviso {
    font-size: 13px;
    line-height: 1.5;
  }

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

  .dashboard-resumo {
    gap: 18px;
    margin-bottom: 26px;
  }

  .dashboard-resumo-card {
    min-height: 152px;
    gap: 16px;
    padding: 24px;
    border-radius: 20px;
    transition:
      transform 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .dashboard-resumo-card:hover {
    transform: translateY(-2px);
    border-color: #e7c6d0;
    box-shadow:
      0 16px 34px rgba(98, 55, 62, 0.09);
  }

  .dashboard-resumo-icone {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 21px;
  }

  .dashboard-resumo-conteudo small {
    font-size: 12px;
    line-height: 1.4;
  }

  .dashboard-resumo-conteudo strong {
    margin: 3px 0;
    overflow: visible;
    font-size: clamp(28px, 2vw, 35px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dashboard-resumo-conteudo span {
    font-size: 11px;
    line-height: 1.45;
  }

  /* =======================================================
     PAINÉIS E TÍTULOS
  ======================================================= */

  .dashboard-painel {
    padding: 28px;
    border-radius: 21px;
    box-shadow:
      0 14px 34px rgba(98, 55, 62, 0.065);
  }

  .dashboard-indices-painel,
  .dashboard-operacao-painel,
  .dashboard-foco-painel {
    margin-bottom: 24px;
  }

  .dashboard-grid {
    gap: 24px;
    margin-bottom: 24px;
  }

  .dashboard-secao-topo {
    gap: 20px;
    margin-bottom: 24px;
  }

  .dashboard-secao-topo.compacto {
    margin-bottom: 21px;
  }

  .dashboard-secao-topo > div:first-child {
    gap: 14px;
    min-width: 0;
  }

  .dashboard-secao-icone {
    flex-basis: 49px;
    width: 49px;
    height: 49px;
    border-radius: 15px;
    font-size: 19px;
  }

  .dashboard-secao-topo h2 {
    font-size: 26px;
    line-height: 1.18;
  }

  .dashboard-secao-topo p {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
  }

  .dashboard-secao-topo > strong {
    font-size: 25px;
    line-height: 1.2;
  }

  .dashboard-selo,
  .dashboard-alerta-badge {
    min-height: 33px;
    padding: 8px 12px;
    font-size: 11px;
  }

  /* =======================================================
     ÍNDICES PARA CRESCER
  ======================================================= */

  .dashboard-indices {
    gap: 14px;
  }

  .dashboard-indice-card {
    min-height: 136px;
    gap: 13px;
    padding: 18px;
    border-radius: 17px;
    transition:
      transform 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }

  .dashboard-indice-card:hover {
    transform: translateY(-2px);
    border-color: #ead0d8;
    box-shadow:
      0 12px 26px rgba(98, 55, 62, 0.065);
  }

  .dashboard-indice-grafico {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
  }

  .dashboard-indice-grafico span {
    font-size: 12px;
  }

  .dashboard-indice-card small {
    font-size: 11px;
    line-height: 1.35;
  }

  .dashboard-indice-card strong {
    margin-top: 2px;
    overflow: visible;
    font-size: 13px;
    line-height: 1.4;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dashboard-indice-card > div:last-child > span {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.45;
  }

  .dashboard-indice-card button {
    margin-top: 6px;
    font-size: 10px;
  }

  /* =======================================================
     GRÁFICO E META
  ======================================================= */

  .dashboard-grid-vendas {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(310px, 0.34fr);
  }

  .dashboard-grafico-barras {
    min-height: 275px;
    gap: 13px;
    padding: 22px 7px 0;
  }

  .dashboard-grafico-item {
    height: 250px;
  }

  .dashboard-grafico-valor {
    margin-bottom: 7px;
    font-size: 11px;
  }

  .dashboard-grafico-dia {
    margin-top: 8px;
    font-size: 11px;
  }

  .dashboard-grafico-dia strong {
    margin-top: 2px;
    font-size: 12px;
  }

  .dashboard-grafico-coluna {
    width: min(46px, 68%);
  }

  .dashboard-meta-icone {
    width: 61px;
    height: 61px;
    margin-bottom: 13px;
    border-radius: 17px;
    font-size: 24px;
  }

  .dashboard-meta-painel > small {
    font-size: 12px;
  }

  .dashboard-meta-painel > strong {
    margin-top: 3px;
    font-size: 34px;
    line-height: 1.15;
  }

  .dashboard-meta-barra {
    height: 11px;
    margin: 16px 0;
  }

  .dashboard-meta-painel p {
    font-size: 11px;
    line-height: 1.5;
  }

  .dashboard-meta-painel button {
    min-height: 39px;
    margin-top: 15px;
    padding: 9px 14px;
    font-size: 11px;
  }

  /* =======================================================
     OPERAÇÃO DE HOJE
  ======================================================= */

  .dashboard-operacao-cards {
    gap: 14px;
  }

  .dashboard-operacao-cards article {
    min-height: 96px;
    gap: 13px;
    padding: 16px;
    border-radius: 16px;
  }

  .dashboard-operacao-cards article > span {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 17px;
  }

  .dashboard-operacao-cards small {
    font-size: 11px;
  }

  .dashboard-operacao-cards strong {
    font-size: 27px;
    line-height: 1.15;
  }

  /* =======================================================
     PRIORIDADES
  ======================================================= */

  .dashboard-prioridades {
    gap: 12px;
  }

  .dashboard-prioridade {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 15px;
    border-radius: 16px;
  }

  .dashboard-prioridade > span:first-child {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 18px;
  }

  .dashboard-prioridade-conteudo strong {
    font-size: 13px;
    line-height: 1.4;
  }

  .dashboard-prioridade-conteudo span {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
  }

  .dashboard-prioridade-acao {
    max-width: 210px;
    padding: 8px 11px;
    font-size: 10px;
    line-height: 1.35;
  }

  /* =======================================================
     CANAIS / PROGRESSO
  ======================================================= */

  .dashboard-lista-progresso,
  .dashboard-ranking-produtos,
  .dashboard-lista-estoque,
  .dashboard-pedidos-recentes,
  .dashboard-pagamentos {
    gap: 12px;
  }

  .dashboard-progresso-item {
    grid-template-columns:
      125px
      minmax(0, 1fr)
      115px;
    gap: 12px;
    min-height: 44px;
  }

  .dashboard-progresso-item > span:first-child {
    overflow: visible;
    font-size: 12px;
    text-overflow: clip;
    white-space: normal;
  }

  .dashboard-progresso-trilho {
    height: 9px;
  }

  .dashboard-progresso-valor strong {
    font-size: 12px;
  }

  .dashboard-progresso-valor small {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.35;
  }

  /* =======================================================
     PRODUTOS
  ======================================================= */

  .dashboard-produto-item {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 13px 0;
  }

  .dashboard-produto-posicao {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .dashboard-produto-info strong {
    overflow: visible;
    font-size: 12px;
    line-height: 1.4;
    text-overflow: clip;
    white-space: normal;
  }

  .dashboard-produto-info small {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.4;
  }

  .dashboard-produto-faturamento {
    font-size: 12px;
    white-space: nowrap;
  }

  /* =======================================================
     MINI MÉTRICAS
  ======================================================= */

  .dashboard-mini-metricas {
    gap: 12px;
  }

  .dashboard-mini-metricas > div {
    min-height: 88px;
    padding: 14px;
    border-radius: 14px;
  }

  .dashboard-mini-metricas small {
    font-size: 10px;
    line-height: 1.4;
  }

  .dashboard-mini-metricas strong {
    margin-top: 3px;
    overflow: visible;
    font-size: 23px;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dashboard-link-painel {
    min-height: 42px;
    margin-top: 15px;
    padding: 11px 13px;
    font-size: 11px;
  }

  /* =======================================================
     ESTOQUE
  ======================================================= */

  .dashboard-estoque-item {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 11px;
    border-radius: 12px;
  }

  .dashboard-estoque-item > span:first-child {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .dashboard-estoque-item strong {
    overflow: visible;
    font-size: 11px;
    line-height: 1.4;
    text-overflow: clip;
    white-space: normal;
  }

  .dashboard-estoque-item small {
    margin-top: 2px;
    font-size: 9px;
  }

  .dashboard-estoque-item > strong {
    font-size: 11px;
    white-space: nowrap;
  }

  /* =======================================================
     PEDIDOS RECENTES
  ======================================================= */

  .dashboard-pedido-item {
    grid-template-columns: 66px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 13px 0;
  }

  .dashboard-pedido-numero {
    font-size: 17px;
  }

  .dashboard-pedido-info strong {
    overflow: visible;
    font-size: 11px;
    line-height: 1.4;
    text-overflow: clip;
    white-space: normal;
  }

  .dashboard-pedido-info small {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.4;
  }

  .dashboard-pedido-final {
    gap: 4px;
  }

  .dashboard-pedido-final strong {
    font-size: 12px;
  }

  .dashboard-status {
    padding: 5px 8px;
    font-size: 9px;
  }

  /* =======================================================
     FORMAS DE PAGAMENTO
  ======================================================= */

  .dashboard-pagamento-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px;
    border-radius: 13px;
  }

  .dashboard-pagamento-item > span {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 17px;
  }

  .dashboard-pagamento-item small {
    font-size: 9px;
  }

  .dashboard-pagamento-item strong {
    font-size: 12px;
  }

  .dashboard-vazio {
    min-height: 130px;
    font-size: 11px;
    line-height: 1.5;
  }

  .dashboard-vazio i {
    font-size: 27px;
  }

  /* =======================================================
     ÁREA FINANCEIRA
     Regras de legibilidade complementares para os elementos
     financeiros que já existem no HTML do Dashboard.
  ======================================================= */

  .dashboard-pagina .financeiro-topo-acoes {
    gap: 10px;
  }

  .dashboard-pagina .financeiro-status,
  .dashboard-pagina .btn-financeiro-configurar {
    font-size: 12px;
  }

  .dashboard-pagina .financeiro-aviso-configuracao {
    font-size: 12px;
    line-height: 1.5;
  }

  .dashboard-pagina .financeiro-aviso-configuracao strong {
    font-size: 13px;
  }

  .dashboard-pagina .financeiro-resumo-cards small {
    font-size: 11px;
    line-height: 1.4;
  }

  .dashboard-pagina .financeiro-resumo-cards strong {
    font-size: clamp(21px, 1.7vw, 27px);
    line-height: 1.15;
  }

  .dashboard-pagina .financeiro-resumo-cards span {
    font-size: 10px;
    line-height: 1.4;
  }

  .dashboard-pagina .financeiro-subtitulo h3 {
    font-size: 18px;
    line-height: 1.3;
  }

  .dashboard-pagina .financeiro-subtitulo p,
  .dashboard-pagina .financeiro-subtitulo small {
    font-size: 11px;
    line-height: 1.5;
  }

  .dashboard-pagina .financeiro-linhas,
  .dashboard-pagina .financeiro-periodo-linhas {
    font-size: 12px;
  }

  .dashboard-pagina .financeiro-linhas > div,
  .dashboard-pagina .financeiro-periodo-linhas > div {
    min-height: 44px;
    gap: 14px;
  }

  .dashboard-pagina .financeiro-periodo-destaque small {
    font-size: 11px;
  }

  .dashboard-pagina .financeiro-periodo-destaque strong {
    font-size: clamp(28px, 2vw, 36px);
    line-height: 1.12;
  }

  .dashboard-pagina .financeiro-periodo-destaque span {
    font-size: 11px;
  }

  .dashboard-pagina .financeiro-tabela-wrapper {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #dcb4c2 transparent;
  }

  .dashboard-pagina .financeiro-tabela {
    min-width: 820px;
  }

  .dashboard-pagina .financeiro-tabela th,
  .dashboard-pagina .financeiro-tabela td {
    padding: 13px 11px;
    font-size: 11px;
    white-space: nowrap;
  }

  .dashboard-pagina .financeiro-tabela thead th {
    font-size: 10px;
  }
}

/* =========================================================
   DESKTOP COMUM / NOTEBOOK GRANDE
========================================================= */

@media screen and (max-width: 1600px) {
  /*
   * Quatro cards do resumo ficam muito apertados quando a
   * sidebar ocupa parte da tela. Dois por linha dão leitura
   * melhor aos valores financeiros.
   */
  .dashboard-resumo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .dashboard-grid-tres-colunas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   TELAS GRANDES
========================================================= */

@media screen and (min-width: 1601px) {
  .dashboard-resumo {
    grid-template-columns: repeat(4, minmax(250px, 1fr));
  }

  .dashboard-indices {
    grid-template-columns: repeat(5, minmax(225px, 1fr));
  }
}

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

@media screen and (max-width: 1180px) {
  .dashboard-pagina {
    padding: 22px;
  }

  .dashboard-cabecalho {
    align-items: flex-start;
    flex-direction: column;
    min-height: auto;
    gap: 25px;
    padding: 31px;
  }

  .dashboard-cabecalho-acoes {
    width: 100%;
  }

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

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

  .dashboard-grid-vendas,
  .dashboard-grid-duas-colunas,
  .dashboard-grid-tres-colunas {
    grid-template-columns: 1fr;
  }

  .dashboard-operacao-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-pagina .financeiro-tabela {
    min-width: 780px;
  }
}

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

@media screen and (max-width: 780px) {
  .dashboard-pagina {
    padding: 15px;
    font-size: 15px;
  }

  .dashboard-cabecalho {
    padding: 24px;
    border-radius: 19px;
  }

  .dashboard-cabecalho h1 {
    font-size: clamp(40px, 9vw, 50px);
  }

  .dashboard-cabecalho p {
    font-size: 15px;
  }

  .dashboard-cabecalho-acoes > * {
    flex: 1 1 180px;
  }

  .dashboard-painel {
    padding: 22px;
    border-radius: 18px;
  }

  .dashboard-secao-topo h2 {
    font-size: 24px;
  }

  .dashboard-secao-topo p {
    font-size: 12px;
  }

  .dashboard-resumo-card {
    min-height: 142px;
    padding: 21px;
  }

  .dashboard-resumo-conteudo strong {
    font-size: clamp(27px, 6vw, 32px);
  }

  .dashboard-indice-card {
    min-height: 128px;
  }

  .dashboard-operacao-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-prioridade {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .dashboard-prioridade-acao {
    grid-column: 2;
    max-width: none;
    justify-self: start;
  }

  .dashboard-progresso-item {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .dashboard-progresso-valor {
    grid-column: 2;
    align-items: flex-start;
  }

  .dashboard-pagina .financeiro-grid-detalhes {
    grid-template-columns: 1fr;
  }
}

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

@media screen and (max-width: 520px) {
  .dashboard-pagina {
    padding: 10px;
    font-size: 15px;
    line-height: 1.55;
  }

  .dashboard-cabecalho {
    gap: 21px;
    padding: 20px;
    border-radius: 17px;
  }

  .dashboard-eyebrow {
    font-size: 11px;
  }

  .dashboard-cabecalho h1 {
    font-size: 38px;
  }

  .dashboard-cabecalho p {
    font-size: 14px;
    line-height: 1.6;
  }

  .dashboard-atualizacao {
    font-size: 11px;
  }

  .dashboard-cabecalho-acoes {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .dashboard-cabecalho-acoes > * {
    width: 100%;
  }

  .btn-dashboard-principal,
  .btn-dashboard-secundario {
    width: 100%;
    min-height: 49px;
    font-size: 14px;
  }

  .dashboard-resumo,
  .dashboard-indices,
  .dashboard-operacao-cards {
    grid-template-columns: 1fr;
  }

  .dashboard-resumo-card {
    min-height: 132px;
    padding: 19px;
  }

  .dashboard-resumo-conteudo small {
    font-size: 11px;
  }

  .dashboard-resumo-conteudo strong {
    font-size: 29px;
  }

  .dashboard-resumo-conteudo span {
    font-size: 10px;
  }

  .dashboard-painel {
    padding: 18px;
    border-radius: 17px;
  }

  .dashboard-secao-topo {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .dashboard-secao-topo.compacto {
    align-items: flex-start;
  }

  .dashboard-secao-topo h2 {
    font-size: 23px;
  }

  .dashboard-secao-topo p {
    font-size: 12px;
  }

  .dashboard-secao-topo > strong {
    font-size: 23px;
    white-space: normal;
  }

  .dashboard-selo,
  .dashboard-alerta-badge {
    align-self: flex-start;
    font-size: 10px;
    white-space: normal;
  }

  .dashboard-indice-card {
    min-height: 122px;
    padding: 16px;
  }

  .dashboard-indice-grafico {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }

  .dashboard-indice-card small {
    font-size: 10px;
  }

  .dashboard-indice-card strong {
    font-size: 12px;
  }

  .dashboard-indice-card > div:last-child > span {
    font-size: 10px;
  }

  .dashboard-grafico-barras {
    min-height: 250px;
    gap: 6px;
    padding-inline: 2px;
  }

  .dashboard-grafico-item {
    height: 225px;
  }

  .dashboard-grafico-valor {
    font-size: 9px;
  }

  .dashboard-grafico-dia {
    font-size: 9px;
  }

  .dashboard-grafico-dia strong {
    font-size: 10px;
  }

  .dashboard-grafico-coluna {
    width: 58%;
  }

  .dashboard-meta-painel > strong {
    font-size: 31px;
  }

  .dashboard-meta-painel > small,
  .dashboard-meta-painel p,
  .dashboard-meta-painel button {
    font-size: 11px;
  }

  .dashboard-operacao-cards article {
    min-height: 90px;
  }

  .dashboard-operacao-cards small {
    font-size: 10px;
  }

  .dashboard-operacao-cards strong {
    font-size: 26px;
  }

  .dashboard-prioridade {
    grid-template-columns: 1fr;
  }

  .dashboard-prioridade > span:first-child {
    width: 42px;
    height: 42px;
  }

  .dashboard-prioridade-conteudo strong {
    font-size: 13px;
  }

  .dashboard-prioridade-conteudo span {
    font-size: 11px;
  }

  .dashboard-prioridade-acao {
    grid-column: 1;
    max-width: 100%;
    justify-self: stretch;
    text-align: left;
    font-size: 10px;
  }

  .dashboard-progresso-item {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .dashboard-progresso-item > span:first-child {
    font-size: 12px;
  }

  .dashboard-progresso-valor {
    grid-column: 1;
    align-items: flex-start;
  }

  .dashboard-progresso-valor strong {
    font-size: 12px;
  }

  .dashboard-progresso-valor small {
    font-size: 9px;
  }

  .dashboard-produto-item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .dashboard-produto-faturamento {
    grid-column: 2;
    justify-self: start;
    font-size: 12px;
  }

  .dashboard-mini-metricas {
    grid-template-columns: 1fr;
  }

  .dashboard-mini-metricas small {
    font-size: 10px;
  }

  .dashboard-mini-metricas strong {
    font-size: 23px;
  }

  .dashboard-estoque-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .dashboard-estoque-item > strong {
    grid-column: 2;
    justify-self: start;
  }

  .dashboard-pedido-item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .dashboard-pedido-final {
    grid-column: 2;
    align-items: flex-start;
  }

  .dashboard-pagamento-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .dashboard-pagamento-item > strong {
    grid-column: 2;
    justify-self: start;
  }

  .dashboard-vazio {
    font-size: 11px;
  }

  /* Financeiro no celular */
  .dashboard-pagina .financeiro-topo-acoes {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .dashboard-pagina .financeiro-resumo-cards {
    grid-template-columns: 1fr;
  }

  .dashboard-pagina .financeiro-resumo-cards small {
    font-size: 11px;
  }

  .dashboard-pagina .financeiro-resumo-cards strong {
    font-size: 25px;
  }

  .dashboard-pagina .financeiro-subtitulo {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-pagina .financeiro-subtitulo h3 {
    font-size: 17px;
  }

  .dashboard-pagina .financeiro-linhas > div,
  .dashboard-pagina .financeiro-periodo-linhas > div {
    align-items: flex-start;
    gap: 10px;
  }

  .dashboard-pagina .financeiro-linhas > div strong,
  .dashboard-pagina .financeiro-periodo-linhas > div strong {
    max-width: 52%;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dashboard-pagina .financeiro-periodo-destaque strong {
    font-size: 30px;
  }

  /*
   * A tabela financeira continua legível e rola somente dentro
   * do próprio bloco, sem alargar a página inteira.
   */
  .dashboard-pagina .financeiro-tabela {
    min-width: 760px;
  }

  .dashboard-pagina .financeiro-tabela th,
  .dashboard-pagina .financeiro-tabela td {
    font-size: 11px;
  }
}

/* =========================================================
   RESUMO OPERACIONAL DO CAIXA NO DASHBOARD
========================================================= */

.dashboard-caixa-operacional {
  position: relative;
  overflow: hidden;
  border-color: #cfe8da;
  background:
    radial-gradient(circle at 96% 4%, rgba(58, 155, 104, 0.1), transparent 24%),
    #ffffff;
}

.dashboard-caixa-operacional::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #3a9b68, #78c59a, #df6293);
}

.dashboard-caixa-operacional-topo {
  gap: 18px;
}

.dashboard-caixa-operacional-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-caixa-status,
.dashboard-caixa-atalho {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-caixa-status.aberto {
  color: #24764b;
  background: #e9f8ef;
  border: 1px solid #bfe2ce;
}

.dashboard-caixa-status.fechado {
  color: #8a6670;
  background: #fff6f8;
  border: 1px solid #efd9df;
}

.dashboard-caixa-status i {
  font-size: 0.9rem;
}

.dashboard-caixa-atalho {
  color: #ffffff;
  background: linear-gradient(135deg, #48a774, #318c60);
  border: 0;
  box-shadow: 0 8px 18px rgba(58, 155, 104, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-caixa-atalho:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 11px 23px rgba(58, 155, 104, 0.26);
}

.dashboard-caixa-atalho:focus-visible {
  outline: 3px solid rgba(58, 155, 104, 0.24);
  outline-offset: 2px;
}

.dashboard-caixa-alerta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  padding: 12px 14px;
  color: #6e5960;
  background: #f7f8fb;
  border: 1px solid #e3e7ef;
  border-radius: 13px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.dashboard-caixa-alerta[hidden] {
  display: none;
}

.dashboard-caixa-alerta i {
  flex-shrink: 0;
  font-size: 1rem;
}

.dashboard-caixa-alerta.correto {
  color: #24764b;
  background: #edf9f2;
  border-color: #c7e6d4;
}

.dashboard-caixa-alerta.sobra {
  color: #95600d;
  background: #fff8e9;
  border-color: #f2dfb4;
}

.dashboard-caixa-alerta.falta {
  color: #a13c4a;
  background: #fff1f3;
  border-color: #efc9cf;
}

.dashboard-caixa-alerta.informativo {
  color: #3c67a6;
  background: #eef5ff;
  border-color: #cadaf1;
}

.dashboard-caixa-operacional-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-caixa-operacional-grade article {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 124px;
  padding: 16px;
  background: #fffdfd;
  border: 1px solid #efdfe3;
  border-radius: 16px;
}

.dashboard-caixa-operacional-grade article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 1rem;
}

.dashboard-caixa-operacional-grade article.dinheiro > span,
.dashboard-caixa-operacional-grade article.recebimentos > span {
  color: #2f8d60;
  background: #e9f8ef;
}

.dashboard-caixa-operacional-grade article.suprimentos > span {
  color: #3f79e6;
  background: #eaf2ff;
}

.dashboard-caixa-operacional-grade article.sangrias > span {
  color: #d17812;
  background: #fff4dd;
}

.dashboard-caixa-operacional-grade article > div {
  min-width: 0;
}

.dashboard-caixa-operacional-grade small {
  display: block;
  margin-bottom: 6px;
  color: #8e7a80;
  font-size: 0.69rem;
  line-height: 1.35;
}

.dashboard-caixa-operacional-grade strong {
  display: block;
  color: var(--dash-vinho);
  font-family: "Playfair Display", serif;
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  line-height: 1.15;
}

.dashboard-caixa-operacional-grade p {
  margin: 7px 0 0;
  color: #9b858b;
  font-size: 0.64rem;
  line-height: 1.45;
}

.dashboard-caixa-operacional-rodape {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.dashboard-caixa-operacional-rodape > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  background: #fffafa;
  border: 1px solid #f0e1e5;
  border-radius: 13px;
}

.dashboard-caixa-operacional-rodape > div > i {
  flex-shrink: 0;
  color: #8b7379;
  font-size: 1rem;
}

.dashboard-caixa-operacional-rodape span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-caixa-operacional-rodape small {
  color: #9a858b;
  font-size: 0.62rem;
}

.dashboard-caixa-operacional-rodape strong {
  margin-top: 2px;
  overflow: hidden;
  color: #66454d;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.dashboard-caixa-operacional-rodape > div.correto {
  background: #edf9f2;
  border-color: #c7e6d4;
}

.dashboard-caixa-operacional-rodape > div.correto i,
.dashboard-caixa-operacional-rodape > div.correto strong {
  color: #24764b;
}

.dashboard-caixa-operacional-rodape > div.sobra {
  background: #fff8e9;
  border-color: #f2dfb4;
}

.dashboard-caixa-operacional-rodape > div.sobra i,
.dashboard-caixa-operacional-rodape > div.sobra strong {
  color: #95600d;
}

.dashboard-caixa-operacional-rodape > div.falta {
  background: #fff1f3;
  border-color: #efc9cf;
}

.dashboard-caixa-operacional-rodape > div.falta i,
.dashboard-caixa-operacional-rodape > div.falta strong {
  color: #a13c4a;
}

.dashboard-caixa-nota {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 13px 0 0;
  color: #9a858b;
  font-size: 0.64rem;
  line-height: 1.5;
}

.dashboard-caixa-nota i {
  flex-shrink: 0;
  margin-top: 1px;
  color: #3a9b68;
}

@media screen and (max-width: 1180px) {
  .dashboard-caixa-operacional-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-caixa-operacional-rodape {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-caixa-operacional-rodape > div:last-child {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 780px) {
  .dashboard-caixa-operacional-topo,
  .dashboard-caixa-operacional-acoes {
    align-items: stretch;
  }

  .dashboard-caixa-operacional-acoes {
    width: 100%;
  }

  .dashboard-caixa-status,
  .dashboard-caixa-atalho {
    flex: 1 1 auto;
  }

  .dashboard-caixa-operacional-rodape {
    grid-template-columns: 1fr;
  }

  .dashboard-caixa-operacional-rodape > div:last-child {
    grid-column: auto;
  }
}

@media screen and (max-width: 520px) {
  .dashboard-caixa-operacional-grade {
    grid-template-columns: 1fr;
  }

  .dashboard-caixa-operacional-grade article {
    min-height: 0;
    padding: 14px;
  }

  .dashboard-caixa-operacional-acoes {
    flex-direction: column;
  }

  .dashboard-caixa-status,
  .dashboard-caixa-atalho {
    width: 100%;
  }
}

/* =========================================================
   REFINAMENTO PREMIUM FINAL
   CAIXA DO EXPEDIENTE + ESPAÇAMENTO ENTRE PAINÉIS

   Este bloco complementa o CSS existente sem alterar HTML/JS.
   Objetivos:
   - separar visualmente "Caixa do expediente" do painel seguinte;
   - aumentar letras e números;
   - deixar os cards mais premium e confortáveis;
   - melhorar leitura em desktop, notebook, tablet e celular.
========================================================= */

@media screen {

  /* =======================================================
     ESPAÇAMENTO ENTRE O CAIXA E O PAINEL SEGUINTE
  ======================================================= */

  .dashboard-caixa-operacional {
    margin-bottom: 30px;
  }

  .dashboard-caixa-operacional + .financeiro-caixa-painel,
  .dashboard-caixa-operacional + .dashboard-painel {
    margin-top: 0;
  }

  /* =======================================================
     PAINEL PRINCIPAL
  ======================================================= */

  .dashboard-caixa-operacional {
    padding: 30px;
    border: 1px solid #c9e5d5;
    border-radius: 24px;
    background:
      radial-gradient(
        circle at 95% 3%,
        rgba(58, 155, 104, 0.12),
        transparent 24%
      ),
      radial-gradient(
        circle at 7% 98%,
        rgba(223, 98, 147, 0.055),
        transparent 25%
      ),
      linear-gradient(145deg, #ffffff 0%, #fffcfd 100%);
    box-shadow:
      0 18px 42px rgba(83, 63, 67, 0.075);
  }

  .dashboard-caixa-operacional::before {
    height: 4px;
    background:
      linear-gradient(
        90deg,
        #3a9b68 0%,
        #76c499 46%,
        #df6293 100%
      );
  }

  /* =======================================================
     TÍTULO E AÇÕES
  ======================================================= */

  .dashboard-caixa-operacional-topo {
    gap: 22px;
    margin-bottom: 20px;
  }

  .dashboard-caixa-operacional
    .dashboard-secao-topo
    > div:first-child {
    gap: 14px;
  }

  .dashboard-caixa-operacional
    .dashboard-secao-icone {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 20px;
  }

  .dashboard-caixa-operacional
    .dashboard-secao-topo h2 {
    font-size: 28px;
    line-height: 1.16;
  }

  .dashboard-caixa-operacional
    .dashboard-secao-topo p {
    max-width: 760px;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.55;
  }

  .dashboard-caixa-operacional-acoes {
    gap: 11px;
  }

  .dashboard-caixa-status,
  .dashboard-caixa-atalho {
    min-height: 45px;
    padding: 10px 15px;
    border-radius: 13px;
    font-size: 0.82rem;
  }

  .dashboard-caixa-status i {
    font-size: 1rem;
  }

  .dashboard-caixa-atalho {
    box-shadow:
      0 10px 23px rgba(58, 155, 104, 0.2);
  }

  .dashboard-caixa-atalho:hover {
    transform: translateY(-2px);
    box-shadow:
      0 14px 28px rgba(58, 155, 104, 0.25);
  }

  /* =======================================================
     ALERTA / STATUS DO ÚLTIMO CAIXA
  ======================================================= */

  .dashboard-caixa-alerta {
    min-height: 48px;
    gap: 12px;
    margin: 18px 0 20px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .dashboard-caixa-alerta i {
    font-size: 1.08rem;
  }

  /* =======================================================
     CARDS PRINCIPAIS DO CAIXA
  ======================================================= */

  .dashboard-caixa-operacional-grade {
    gap: 15px;
  }

  .dashboard-caixa-operacional-grade article {
    position: relative;
    min-height: 144px;
    gap: 14px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid #ecdde2;
    border-radius: 18px;
    background:
      linear-gradient(145deg, #ffffff 0%, #fffdfd 100%);
    transition:
      transform 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }

  .dashboard-caixa-operacional-grade article:hover {
    transform: translateY(-2px);
    border-color: #dfcdd3;
    box-shadow:
      0 13px 27px rgba(89, 64, 70, 0.07);
  }

  .dashboard-caixa-operacional-grade article::after {
    position: absolute;
    right: -32px;
    bottom: -45px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    content: "";
    background: currentColor;
    opacity: 0.045;
    pointer-events: none;
  }

  .dashboard-caixa-operacional-grade
    article > span {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.1rem;
  }

  .dashboard-caixa-operacional-grade
    article > div {
    position: relative;
    z-index: 1;
  }

  .dashboard-caixa-operacional-grade small {
    margin-bottom: 7px;
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .dashboard-caixa-operacional-grade strong {
    overflow: visible;
    font-size: clamp(1.55rem, 2vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dashboard-caixa-operacional-grade p {
    margin-top: 8px;
    font-size: 0.72rem;
    line-height: 1.5;
  }

  /* Destaques sutis por tipo */
  .dashboard-caixa-operacional-grade article.dinheiro,
  .dashboard-caixa-operacional-grade article.recebimentos {
    border-color: #d8eadf;
  }

  .dashboard-caixa-operacional-grade article.suprimentos {
    border-color: #d9e5fb;
  }

  .dashboard-caixa-operacional-grade article.sangrias {
    border-color: #f0dfbd;
  }

  /* =======================================================
     RODAPÉ: EXPEDIENTE / ÚLTIMO FECHAMENTO / DIFERENÇA
  ======================================================= */

  .dashboard-caixa-operacional-rodape {
    gap: 13px;
    margin-top: 15px;
  }

  .dashboard-caixa-operacional-rodape > div {
    min-height: 64px;
    gap: 11px;
    padding: 14px 16px;
    border-radius: 14px;
  }

  .dashboard-caixa-operacional-rodape
    > div > i {
    font-size: 1.08rem;
  }

  .dashboard-caixa-operacional-rodape small {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .dashboard-caixa-operacional-rodape strong {
    margin-top: 3px;
    overflow: visible;
    font-size: 0.78rem;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* =======================================================
     NOTA INFERIOR
  ======================================================= */

  .dashboard-caixa-nota {
    gap: 8px;
    margin-top: 16px;
    font-size: 0.7rem;
    line-height: 1.55;
  }

  .dashboard-caixa-nota i {
    margin-top: 2px;
    font-size: 0.82rem;
  }
}

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

   Em uma tela como a do painel administrativo, 2 cards por
   linha deixam valores e explicações bem mais confortáveis.
========================================================= */

@media screen and (min-width: 781px) and (max-width: 1499px) {
  .dashboard-caixa-operacional-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-caixa-operacional-grade article {
    min-height: 132px;
  }
}

/* =========================================================
   TELAS GRANDES
========================================================= */

@media screen and (min-width: 1500px) {
  .dashboard-caixa-operacional-grade {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
  }
}

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

@media screen and (max-width: 780px) {
  .dashboard-caixa-operacional {
    margin-bottom: 24px;
    padding: 22px;
    border-radius: 20px;
  }

  .dashboard-caixa-operacional-topo {
    gap: 16px;
  }

  .dashboard-caixa-operacional
    .dashboard-secao-topo h2 {
    font-size: 25px;
  }

  .dashboard-caixa-operacional
    .dashboard-secao-topo p {
    font-size: 12px;
  }

  .dashboard-caixa-operacional-acoes {
    width: 100%;
    gap: 9px;
  }

  .dashboard-caixa-status,
  .dashboard-caixa-atalho {
    min-height: 44px;
    font-size: 0.78rem;
  }

  .dashboard-caixa-operacional-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-caixa-operacional-grade article {
    min-height: 128px;
    padding: 17px;
  }

  .dashboard-caixa-operacional-grade small {
    font-size: 0.72rem;
  }

  .dashboard-caixa-operacional-grade strong {
    font-size: 1.65rem;
  }

  .dashboard-caixa-operacional-grade p {
    font-size: 0.68rem;
  }

  .dashboard-caixa-operacional-rodape {
    grid-template-columns: 1fr;
  }

  .dashboard-caixa-operacional-rodape
    > div:last-child {
    grid-column: auto;
  }
}

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

@media screen and (max-width: 520px) {
  .dashboard-caixa-operacional {
    margin-bottom: 22px;
    padding: 18px;
    border-radius: 18px;
  }

  .dashboard-caixa-operacional
    .dashboard-secao-icone {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .dashboard-caixa-operacional
    .dashboard-secao-topo h2 {
    font-size: 23px;
  }

  .dashboard-caixa-operacional
    .dashboard-secao-topo p {
    font-size: 12px;
    line-height: 1.55;
  }

  .dashboard-caixa-operacional-acoes {
    flex-direction: column;
  }

  .dashboard-caixa-status,
  .dashboard-caixa-atalho {
    width: 100%;
    min-height: 46px;
    font-size: 0.8rem;
  }

  .dashboard-caixa-alerta {
    align-items: flex-start;
    margin: 16px 0 18px;
    font-size: 0.76rem;
  }

  .dashboard-caixa-operacional-grade {
    grid-template-columns: 1fr;
  }

  .dashboard-caixa-operacional-grade article {
    min-height: 118px;
    padding: 17px;
  }

  .dashboard-caixa-operacional-grade
    article > span {
    width: 44px;
    height: 44px;
  }

  .dashboard-caixa-operacional-grade small {
    font-size: 0.72rem;
  }

  .dashboard-caixa-operacional-grade strong {
    font-size: 1.7rem;
  }

  .dashboard-caixa-operacional-grade p {
    font-size: 0.69rem;
  }

  .dashboard-caixa-operacional-rodape > div {
    min-height: 62px;
    padding: 13px 14px;
  }

  .dashboard-caixa-operacional-rodape small {
    font-size: 0.68rem;
  }

  .dashboard-caixa-operacional-rodape strong {
    font-size: 0.74rem;
  }

  .dashboard-caixa-nota {
    font-size: 0.68rem;
  }
}