.marca-login,
.marca-painel {
  display: flex;
  align-items: center;
  gap: var(--espaco-5);
}

.marca-login strong,
.marca-painel strong {
  display: block;
  font-size: 18px;
}

.marca-login div span,
.marca-painel div span {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 13px;
}

.marca-simbolo {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  aspect-ratio: 1;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--raio-medio);
  background: var(--cor-primaria);
  color: var(--cor-superficie) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.menu-item {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: var(--raio-pequeno);
  padding: 11px var(--espaco-5);
  background: transparent;
  color: var(--cor-texto-suave);
  font-weight: 700;
  text-align: left;
}

.menu-item.ativo,
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}

.cartao-login,
.cartao-publico {
  width: min(100%, var(--largura-login));
  min-width: 0;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  box-shadow: var(--sombra-padrao);
  padding: var(--espaco-12);
}

.cartao-publico {
  width: 100%;
}

.cartao-verificacao {
  text-align: left;
}

.cabecalho-login {
  margin-bottom: var(--espaco-10);
}

.cabecalho-login h1 {
  margin: 0 0 var(--espaco-3);
  font-size: 26px;
  line-height: 1.15;
}

.cabecalho-login p {
  margin: 0;
  color: var(--cor-texto-suave);
  line-height: 1.45;
}

.controle-segmentado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-1);
  padding: var(--espaco-1);
  margin-bottom: var(--espaco-8);
  background: var(--cor-controle-fundo);
  border-radius: var(--raio-medio);
}

.aba {
  border: 0;
  border-radius: var(--raio-pequeno);
  min-height: 40px;
  background: transparent;
  color: var(--cor-texto-suave);
}

.aba.ativa {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: var(--sombra-controle);
}

.botao {
  max-width: 100%;
  min-height: var(--altura-controle);
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  padding: var(--espaco-4) var(--espaco-7);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: center;
}

.botao:focus-visible {
  outline: var(--foco-contorno);
  outline-offset: 2px;
}

.botao-primario {
  background: var(--cor-primaria);
  color: var(--cor-superficie);
}

.botao-primario:hover {
  background: var(--cor-primaria-forte);
}

.botao-secundario {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}

.botao-secundario:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.botao-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-4);
  margin-bottom: var(--espaco-8);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}

.icone-google {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cor-fundo);
  color: var(--cor-primaria);
  font-weight: 700;
}

.botao-link {
  border: 0;
  background: transparent;
  color: var(--cor-primaria);
  padding: var(--espaco-2) 0;
  text-align: left;
  font-weight: 700;
}

.botao-pequeno {
  min-height: 36px;
  padding: var(--espaco-3) var(--espaco-4);
  font-size: 13px;
}

.botao-perigo {
  background: var(--cor-superficie);
  color: var(--cor-erro);
  border-color: var(--cor-erro-borda);
}

.botao-perigo:hover {
  border-color: var(--cor-erro);
}

.formulario-auth,
.formulario-perfil,
.formulario-assinatura,
.formulario-publico {
  min-width: 0;
  display: grid;
  gap: var(--espaco-5);
}

.formulario-servico {
  display: grid;
}

.campo-formulario {
  min-width: 0;
  display: grid;
  gap: var(--espaco-3);
}

.grupo-campo-acao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espaco-3);
}

.grupo-telefone-publico {
  display: grid;
  grid-template-columns: minmax(132px, 0.45fr) minmax(0, 1fr);
  gap: var(--espaco-3);
}

.grupo-telefone-publico select {
  min-width: 132px;
}

.secao-configuracao {
  display: grid;
  gap: var(--espaco-4);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--cor-borda);
}

.opcao-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  color: var(--cor-texto-suave);
  font-weight: 400;
  line-height: 1.4;
}

.opcao-checkbox input {
  width: 18px;
  min-height: 18px;
  margin: 1px 0 0;
}

.acoes-formulario {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espaco-4);
  flex-wrap: wrap;
}

.acoes-formulario .mensagem-feedback {
  min-width: min(260px, 100%);
  flex: 1 1 auto;
  margin: 0;
}

.acoes-servico {
  padding-top: 0;
}

.configuracoes-conta {
  display: grid;
  align-content: start;
  gap: var(--espaco-6);
}

.painel-configuracoes-conta {
  min-width: 0;
  display: grid;
  gap: var(--espaco-5);
}

.painel-configuracoes-conta h3,
.painel-configuracoes-conta p {
  margin: 0;
}

.grupo-botoes {
  display: grid;
  gap: var(--espaco-4);
}

.grupo-opcoes {
  min-width: 0;
  display: grid;
  gap: var(--espaco-3);
  margin: 0;
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
}

.grupo-opcoes legend {
  padding: 0 var(--espaco-2);
  color: var(--cor-texto);
  font-size: 14px;
  font-weight: 700;
}

.grupo-opcoes label {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  color: var(--cor-texto-suave);
  font-weight: 400;
}

.grupo-opcoes input {
  width: 18px;
  min-height: 18px;
}

.separador-login {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  margin-bottom: var(--espaco-8);
  color: var(--cor-texto-suave);
  font-size: 13px;
}

.separador-login::before,
.separador-login::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--cor-borda);
}

.mensagem-feedback {
  min-height: 20px;
  margin: var(--espaco-5) 0 0;
  color: var(--cor-texto-suave);
  font-size: 14px;
  line-height: 1.35;
}

.mensagem-feedback.erro {
  color: var(--cor-erro);
}

.mensagem-feedback.sucesso {
  color: var(--cor-sucesso);
}

.bloco-instalacao-pwa {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-5);
  margin-top: var(--espaco-7);
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-primaria-suave);
}

.bloco-instalacao-pwa.oculto {
  display: none;
}

.bloco-instalacao-pwa strong {
  display: block;
  margin-bottom: var(--espaco-2);
}

.bloco-instalacao-pwa .botao {
  flex: 0 0 auto;
}

.secao-painel > .bloco-instalacao-pwa {
  margin: 0 0 var(--espaco-8);
}

.texto-suave {
  margin: 0;
  color: var(--cor-texto-suave);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bloco-resumo,
.secao-painel {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
}

.bloco-resumo {
  min-width: 0;
  padding: var(--espaco-8);
}

.bloco-resumo span {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 13px;
  margin-bottom: var(--espaco-3);
}

.bloco-resumo strong {
  font-size: 20px;
  overflow-wrap: anywhere;
}

.grafico-estatisticas {
  min-width: 0;
  display: grid;
  gap: var(--espaco-5);
  padding: var(--espaco-8);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
}

.cabecalho-grafico {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-5);
}

.cabecalho-grafico h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cabecalho-grafico span {
  color: var(--cor-texto-suave);
  font-size: 13px;
  text-align: right;
  overflow-wrap: anywhere;
}

.lista-grafico-barras {
  display: grid;
  gap: var(--espaco-4);
}

.linha-grafico-barra {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--espaco-2);
}

.rotulo-grafico {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--espaco-2);
  flex-wrap: wrap;
}

.rotulo-grafico strong {
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.rotulo-grafico span {
  display: block;
  flex-basis: 100%;
  margin-top: var(--espaco-1);
  color: var(--cor-texto-suave);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.barra-grafico {
  min-width: 0;
  height: 10px;
  overflow: hidden;
  border-radius: var(--raio-circular);
  background: var(--cor-controle-fundo);
}

.barra-grafico-preenchimento {
  display: block;
  width: var(--valor-grafico, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--cor-primaria);
}

.grafico-estatisticas-destaque .barra-grafico-preenchimento {
  background: var(--cor-sucesso);
}

.valor-grafico {
  min-width: 0;
  color: var(--cor-texto);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.valor-grafico::before {
  content: "\2013 ";
  color: var(--cor-texto-suave);
  font-weight: 400;
}

.estado-vazio-grafico {
  padding: var(--espaco-5);
}

.secao-painel {
  padding: var(--espaco-10);
}

.cabecalho-secao {
  margin-bottom: var(--espaco-8);
}

.cabecalho-com-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-7);
}

.cabecalho-secao h2 {
  margin: 0;
  font-size: 22px;
}

.cabecalho-secao h1 {
  margin: var(--espaco-1) 0 var(--espaco-3);
  font-size: 28px;
  line-height: 1.15;
}

.resumo-link-magico,
.resumo-agendamento {
  display: grid;
  gap: var(--espaco-4);
}

.acoes-link-magico {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-4);
}

.acoes-link-magico .botao {
  flex: 1 1 180px;
}

.linha-resumo-agendamento {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-5);
  padding: var(--espaco-5) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.linha-resumo-agendamento span {
  color: var(--cor-texto-suave);
}

.linha-resumo-agendamento strong {
  text-align: right;
  overflow-wrap: anywhere;
}

.lista-servicos {
  display: grid;
  gap: var(--espaco-4);
}

.lista-agendamentos-locais {
  display: grid;
  gap: var(--espaco-4);
}

.item-agendamento-local {
  display: grid;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

.item-agendamento-local strong,
.item-agendamento-local span {
  overflow-wrap: anywhere;
}

.item-agendamento-local span {
  color: var(--cor-texto-suave);
}

.acoes-agendamento-local {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-4);
}

.acoes-agendamento-local .botao {
  flex: 1 1 180px;
}

.linha-servico {
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

.servico-nome {
  min-width: 0;
}

.servico-nome strong {
  display: block;
  overflow-wrap: anywhere;
}

.servico-nome span,
.meta-servico span {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 13px;
  margin-top: var(--espaco-1);
}

.meta-servico strong {
  display: block;
  overflow-wrap: anywhere;
}

.meta-servico {
  min-width: 0;
}

.selo-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  width: 82px;
  border-radius: var(--raio-circular);
  font-size: 13px;
  font-weight: 700;
}

.selo-status.ativo {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

.selo-status.agendado {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}

.selo-status.concluido {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

.selo-status.falta {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.selo-status.cancelado {
  background: var(--cor-alerta-fundo);
  color: var(--cor-alerta);
}

.selo-status.inativo {
  background: var(--cor-controle-fundo);
  color: var(--cor-texto-suave);
}

.lista-agendamentos {
  display: grid;
  gap: var(--espaco-4);
}

.lista-clientes {
  display: grid;
  gap: var(--espaco-4);
}

.secao-clientes .cabecalho-com-acoes {
  align-items: flex-start;
}

.secao-agendamentos .cabecalho-com-acoes {
  align-items: flex-start;
}

.acoes-agendamentos-cabecalho {
  min-width: min(100%, 360px);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--espaco-4);
  flex-wrap: nowrap;
}

.menu-filtro-status-agendamentos {
  position: relative;
  min-width: 164px;
}

.menu-filtro-status-agendamentos > summary.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-controle);
  list-style: none;
}

.menu-filtro-status-agendamentos > summary::-webkit-details-marker {
  display: none;
}

.opcoes-filtro-status-agendamentos {
  position: absolute;
  right: 0;
  z-index: 4;
  width: min(280px, calc(100vw - 48px));
  display: grid;
  gap: var(--espaco-3);
  margin-top: var(--espaco-2);
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-padrao);
}

.acoes-clientes-cabecalho {
  min-width: min(100%, 416px);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--espaco-4);
  flex-wrap: nowrap;
}

.grupo-ordenacao-clientes {
  width: min(100%, calc(220px + var(--altura-controle) + var(--espaco-3)));
  grid-template-columns: minmax(0, 1fr) var(--altura-controle);
  align-items: stretch;
}

.campo-ordenacao-clientes {
  min-width: 0;
}

.campo-ordenacao-clientes select {
  min-width: 0;
}

.acoes-clientes-cabecalho select,
.acoes-clientes-cabecalho .botao {
  min-height: var(--altura-controle);
}

.acoes-clientes-cabecalho #botaoAbrirConfiguracoesClientes {
  flex: 0 0 auto;
}

.botao-direcao-ordenacao-clientes {
  width: var(--altura-controle);
  min-width: var(--altura-controle);
  height: var(--altura-controle);
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.linha-agendamento {
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

.linha-cliente {
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

.agendamento-cliente {
  min-width: 0;
}

.cliente-identidade {
  min-width: 0;
}

.agendamento-cliente strong {
  display: block;
  overflow-wrap: anywhere;
}

.cliente-identidade strong,
.cliente-metrica strong {
  display: block;
  overflow-wrap: anywhere;
}

.agendamento-cliente span {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 13px;
  margin-top: var(--espaco-1);
}

.cliente-identidade span,
.cliente-metrica span {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 13px;
  margin-top: var(--espaco-1);
}

.cliente-metrica {
  min-width: 0;
}

.cliente-metrica span {
  margin-top: 0;
  margin-bottom: var(--espaco-1);
}

.cliente-detalhes {
  min-width: 0;
}

.botao-expandir-cliente {
  display: none;
  justify-self: end;
  white-space: nowrap;
}

.cliente-acoes {
  display: flex;
  justify-content: flex-end;
}

.configuracoes-clientes {
  display: grid;
  align-content: start;
  gap: var(--espaco-5);
}

.lista-bloqueios-contato {
  gap: var(--espaco-3);
}

.linha-bloqueio-contato {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espaco-4);
  align-items: center;
  padding: var(--espaco-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

.contato-bloqueado-identidade {
  min-width: 0;
}

.contato-bloqueado-identidade strong {
  display: block;
  overflow-wrap: anywhere;
}

.contato-bloqueado-identidade span {
  display: block;
  margin-top: var(--espaco-1);
  color: var(--cor-texto-suave);
  font-size: 13px;
}

.campo-status-agendamento {
  min-width: 138px;
}

.acoes-agendamento-cliente,
.feedback-agendamento-cliente {
  display: grid;
  gap: var(--espaco-5);
  margin-top: var(--espaco-8);
  padding-top: var(--espaco-8);
  border-top: 1px solid var(--cor-borda);
}

.grupo-estrelas {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: var(--espaco-3);
}

.grupo-estrelas label {
  cursor: pointer;
}

.grupo-estrelas input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.grupo-estrelas span {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-weight: 700;
}

.grupo-estrelas input:checked + span,
.grupo-estrelas input:focus-visible + span {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}

.acoes-linha-servico,
.acoes-linha-agendamento {
  display: flex;
  justify-content: flex-end;
  gap: var(--espaco-3);
  flex-wrap: wrap;
}

.estado-vazio {
  margin: 0;
  padding: var(--espaco-8);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-medio);
  color: var(--cor-texto-suave);
  text-align: center;
}

.alerta-painel {
  margin-bottom: var(--espaco-6);
  padding: var(--espaco-5);
  border: 1px solid var(--cor-primaria);
  border-radius: var(--raio-pequeno);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-weight: 700;
}

.secao-assinatura {
  display: grid;
  gap: var(--espaco-8);
}

.secao-assinatura .cabecalho-secao {
  margin-bottom: 0;
}

.painel-assinatura-status,
.formulario-assinatura {
  min-width: 0;
  align-content: start;
  padding-top: var(--espaco-2);
}

.painel-assinatura-status h3,
.formulario-assinatura h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.grupo-assinatura-formulario {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  gap: var(--espaco-5);
}

.campo-forma-pagamento-assinatura {
  max-width: 100%;
}

.aviso-cupom-assinatura {
  grid-column: 1 / -1;
  margin: 0;
}

.destinatario-cupom-assinatura {
  min-height: 20px;
  margin: 0;
  font-weight: 700;
}

.lista-cupons-assinatura {
  display: grid;
  gap: var(--espaco-3);
}

.item-cupom-assinatura {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(68px, auto) minmax(0, 1fr) auto;
  gap: var(--espaco-3);
  align-items: center;
  padding: var(--espaco-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
}

.item-cupom-assinatura > span {
  overflow-wrap: anywhere;
}

.detalhes-cupom-assinatura {
  display: grid;
  gap: var(--espaco-1);
}

.detalhes-cupom-assinatura span {
  overflow-wrap: anywhere;
}

.lista-detalhes-assinatura {
  display: grid;
  gap: 0;
  margin: var(--espaco-6) 0 0;
}

.lista-detalhes-assinatura div {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-5);
  padding: var(--espaco-4) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.lista-detalhes-assinatura dt {
  color: var(--cor-texto-suave);
}

.lista-detalhes-assinatura dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.selo-status-assinatura {
  width: fit-content;
  max-width: 100%;
  min-width: min(118px, 100%);
  padding: var(--espaco-2) var(--espaco-4);
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

.acoes-assinatura {
  justify-content: flex-start;
}

.aviso-pagamento-seguro {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.icone-pagamento-seguro {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: currentColor;
}

.pagamento-pix-conteudo {
  display: grid;
  justify-items: center;
  gap: var(--espaco-5);
  text-align: center;
}

.imagem-qr-code-pix {
  width: min(100%, 280px);
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--espaco-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: #fff;
}

.codigo-pix-assinatura {
  width: 100%;
  display: grid;
  justify-items: stretch;
  gap: var(--espaco-3);
  text-align: left;
}

.campo-codigo-pix {
  min-height: 96px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.4;
  resize: vertical;
}

.boleto-assinatura-conteudo {
  width: 100%;
  min-height: 0;
}

.visualizador-boleto-assinatura {
  width: 100%;
  height: min(68vh, 620px);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: #fff;
}

@media (max-width: 820px) {
  .acoes-linha-servico,
  .acoes-linha-agendamento {
    justify-content: flex-start;
  }

  .item-cupom-assinatura {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .secao-clientes .cabecalho-com-acoes {
    flex-direction: column;
  }

  .secao-clientes .cabecalho-com-acoes .campo-ordenacao-clientes {
    width: 100%;
  }

  .secao-clientes .acoes-clientes-cabecalho {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .secao-clientes .acoes-clientes-cabecalho .grupo-ordenacao-clientes,
  .secao-clientes .acoes-clientes-cabecalho #botaoAbrirConfiguracoesClientes {
    width: 100%;
  }

  .secao-clientes .acoes-clientes-cabecalho .grupo-ordenacao-clientes {
    grid-template-columns: minmax(0, 1fr) var(--altura-controle);
  }

  .secao-clientes .acoes-clientes-cabecalho .campo-ordenacao-clientes {
    width: auto;
  }

  .secao-clientes .acoes-clientes-cabecalho #botaoAbrirConfiguracoesClientes {
    grid-column: 1 / -1;
  }

  .secao-agendamentos .cabecalho-com-acoes {
    flex-direction: column;
  }

  .secao-agendamentos .acoes-agendamentos-cabecalho {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .secao-agendamentos .menu-filtro-status-agendamentos,
  .secao-agendamentos #botaoAbrirConfiguracoesAgenda {
    width: 100%;
  }

  .opcoes-filtro-status-agendamentos {
    left: 0;
    right: auto;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .bloco-resumo,
  .grafico-estatisticas,
  .secao-painel {
    padding: var(--espaco-6);
  }

  .acoes-formulario {
    align-items: stretch;
    flex-direction: column;
    gap: var(--espaco-4);
  }

  .acoes-topo-painel .botao,
  .bloco-instalacao-pwa .botao,
  .acoes-formulario .botao,
  .cabecalho-com-acoes .botao,
  .acoes-linha-servico .botao,
  .acoes-linha-agendamento .botao,
  .acoes-agendamento-local .botao,
  .acoes-link-magico .botao,
  .resumo-link-magico .botao {
    width: 100%;
  }

  .bloco-instalacao-pwa {
    align-items: stretch;
    flex-direction: column;
  }

  .grupo-campo-acao,
  .grupo-telefone-publico {
    grid-template-columns: 1fr;
  }

  .acoes-formulario .mensagem-feedback {
    width: 100%;
  }

  .cabecalho-com-acoes {
    align-items: flex-start;
    flex-direction: column;
  }

  .cabecalho-grafico {
    display: grid;
  }

  .lista-detalhes-assinatura div {
    flex-direction: column;
  }

  .lista-detalhes-assinatura dd {
    text-align: left;
  }

  .cabecalho-grafico span {
    text-align: left;
  }

  .visualizador-boleto-assinatura {
    height: 58vh;
  }
}