.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid #d5dbe5;
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-weight: 550;
  line-height: 1.2;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.botao:hover:not(:disabled) {
  background: var(--cor-superficie-alt);
  text-decoration: none;
}

.botao:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.botao--primario {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  font-weight: 650;
}

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

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

.botao--perigo:hover:not(:disabled) {
  background: var(--cor-perigo-suave);
}

.botao--pequeno {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 0.85rem;
}

.botao--texto {
  border-color: transparent;
  background: transparent;
  color: var(--cor-link);
  padding: 4px 8px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.campo label,
.campo__rotulo {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cor-texto);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d5dbe5;
  border-radius: var(--raio);
  background: #ffffff;
  color: var(--cor-texto);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: #94a3b8;
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled {
  background: var(--cor-superficie-alt);
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}

.campo textarea {
  min-height: 96px;
  resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--cor-foco);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.campo__ajuda {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.campo__erro {
  font-size: 0.8rem;
  color: var(--cor-perigo);
}

.campo--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.campo--check input {
  width: auto;
}

.campo--check label {
  font-weight: 500;
}

.tabela-envolta {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--raio);
}

.tabela th,
.tabela td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--cor-borda);
  vertical-align: middle;
}

.tabela th {
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #475569;
  background: var(--cor-superficie-alt);
  border-bottom: 1px solid #d5dbe5;
  white-space: nowrap;
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela tbody tr:hover {
  background: #f4f8fd;
}

.tabela td.acoes {
  white-space: nowrap;
  text-align: right;
}

.tabela td.acoes .botao + .botao {
  margin-left: 6px;
}

.tabela__vazia {
  padding: 36px 16px;
  text-align: center;
  color: var(--cor-texto-suave);
}

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.selo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  background: var(--cor-neutra-suave);
  color: #475569;
  white-space: nowrap;
}

.selo--sucesso {
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso);
}

.selo--alerta {
  background: var(--cor-alerta-suave);
  color: var(--cor-alerta);
}

.selo--perigo {
  background: var(--cor-perigo-suave);
  color: var(--cor-perigo);
}

.selo--info {
  background: var(--cor-info-suave);
  color: var(--cor-info);
}

.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  height: 100vh;
  height: 100dvh;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  min-height: 0;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.modal--largo {
  max-width: 720px;
}

.modal__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cor-borda);
  flex-shrink: 0;
}

.modal__fechar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--cor-texto-suave);
}

.modal__fechar:hover {
  background: var(--cor-superficie-alt);
  color: var(--cor-texto);
}

.modal__corpo {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.modal__rodape {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cor-borda);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .modal-fundo {
    padding: 8px;
  }

  .modal__corpo {
    padding: 14px 16px;
  }

  .modal__rodape {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .modal__rodape .botao {
    flex: 1;
  }
}

.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  padding: 10px 14px;
  border-radius: var(--raio);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);
  background: var(--cor-superficie);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  font-size: 0.9rem;
}

.toast--sucesso {
  border-left-color: var(--cor-sucesso);
}

.toast--erro {
  border-left-color: var(--cor-perigo);
}

.aviso {
  align-self: stretch;
  padding: 12px 16px;
  border-radius: var(--raio);
  background: var(--cor-alerta-suave);
  color: var(--cor-alerta);
  font-size: 0.9rem;
}

.aviso--erro {
  background: var(--cor-perigo-suave);
  color: var(--cor-perigo);
}

.aviso--sucesso {
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso);
}

.carregando {
  padding: 40px 16px;
  text-align: center;
  color: var(--cor-texto-suave);
}

.abas {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cor-borda);
  overflow-x: auto;
}

.aba {
  padding: 8px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--cor-texto-suave);
  font-weight: 600;
  white-space: nowrap;
}

.aba--ativa {
  color: var(--cor-primaria-texto);
  border-bottom-color: var(--cor-primaria);
}

.lista-chaves {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

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

.lista-chaves dd {
  margin: 0;
}

.codigo {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--cor-superficie-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}

.linha-do-tempo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linha-do-tempo li {
  padding: 10px 14px;
  background: var(--cor-superficie-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.logo-mini { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; border-radius: 8px; border: 1px solid var(--borda, #d9dee7); background: #f1f4f9; color: #5b6678; font-weight: 700; }
.logo-mini img { width: 100%; height: 100%; object-fit: contain; }
.logo-linha { display: flex; align-items: center; gap: 12px; }
.logo-campo { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.logo-campo__acoes { display: flex; flex-wrap: wrap; gap: 8px; }

.aba--desabilitada { opacity: 0.55; cursor: not-allowed; }
.empresa-link { color: inherit; text-decoration: none; }
.empresa-link:hover strong { text-decoration: underline; }
.empresa-cabecalho { margin-bottom: 16px; }
.empresa-cabecalho__voltar { display: inline-block; margin-bottom: 10px; color: var(--cor-link); text-decoration: none; font-weight: 600; }
.empresa-cabecalho__voltar:hover { text-decoration: underline; }
.empresa-cabecalho__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.empresa-cabecalho__identidade { display: flex; align-items: center; gap: 14px; min-width: 0; }
.empresa-cabecalho__nome { margin: 0 0 4px; overflow-wrap: anywhere; }
.empresa-cabecalho__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--cor-texto-suave); }
.empresa-cabecalho__aviso { margin-top: 12px; }
.empresa-secao + .empresa-secao { margin-top: 20px; }
.empresa-secao h3 { margin: 0 0 12px; }
.empresa-formulario__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.empresa-modulos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.aba-pilha { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.aba-pilha > .botao { align-self: flex-start; }

.campo--estreito { max-width: 240px; }
.codigo { overflow-wrap: anywhere; word-break: break-all; }

@media (max-width: 520px) {
  .empresa-cabecalho__identidade { flex-wrap: wrap; }
  .empresa-cabecalho__linha .pagina__acoes { width: 100%; }
  .empresa-cabecalho__linha .pagina__acoes .botao { flex: 1 1 100%; }
  .aba { padding: 8px 10px; }
  .campo--estreito { max-width: none; }
  .tabela td.acoes { white-space: normal; }
  .tabela td.acoes .botao { margin: 2px 4px 2px 0; }
  .tabela td.acoes .botao + .botao { margin-left: 0; }
  .empresa-formulario__acoes .botao { flex: 1 1 100%; }
}

.clientes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.clientes-grade > .tabela__vazia { grid-column: 1 / -1; }
.clientes-grade + .cartao { margin-top: 16px; }
.cliente-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cliente-card--inativo { opacity: 0.75; }
.cliente-card__topo { display: flex; align-items: center; gap: 12px; }
.cliente-card__avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cor-superficie-alt); color: var(--cor-texto); }
.cliente-card__avatar svg { width: 26px; height: 26px; }
.cliente-card__identidade { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.cliente-card__valor { flex: none; font-size: 1.25rem; color: var(--cor-perigo); white-space: nowrap; }
.cliente-card__nome { overflow-wrap: anywhere; }
.cliente-card__resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 0.9rem; color: var(--cor-texto-suave); }
.cliente-card__acoes { display: flex; gap: 8px; margin-top: auto; }
.cliente-card__acoes .botao { flex: 1 1 0; }

.ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 14px; }
.ficha dt { color: var(--cor-texto-suave); }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.ficha-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcao { display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: left; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); color: var(--cor-texto); }
.opcao:hover { background: var(--cor-superficie-alt); }
.opcao span { font-size: 0.85rem; color: var(--cor-texto-suave); }

@media (max-width: 520px) {
  .opcoes { grid-template-columns: minmax(0, 1fr); }
}

.perfil-ficha { margin-top: 14px; }
.perfil-secao { margin-bottom: 16px; padding: 14px 16px; }
.perfil-secao__titulo { margin: 0 0 12px; font-size: 1.05rem; }
.perfil-secao__rodape { margin-top: 12px; }
.perfil-lista, .perfil-pagamentos { list-style: none; margin: 0; padding: 0; }
.perfil-item { padding: 12px 0; border-bottom: 1px solid var(--cor-borda); }
.perfil-item:last-child { border-bottom: 0; }
.perfil-item__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.perfil-item__texto { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.perfil-item__valor { text-align: right; }
.perfil-item__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.perfil-pagamentos { margin-top: 8px; padding: 8px 12px; background: var(--cor-superficie-alt); border-radius: var(--raio); }
.perfil-pagamento { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 4px 0; }
.perfil-pagamento--estornado { opacity: 0.6; text-decoration: line-through; }

@media (max-width: 520px) {
  .perfil-item__valor { text-align: left; }
}

.cobranca-lista { display: flex; flex-direction: column; gap: 8px; }
.cobranca-lista > .tabela__vazia { padding: 24px 0; text-align: center; }
.cobranca-lista + .cartao { margin-top: 16px; }
.cobranca-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding: 12px 16px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cobranca-linha__cliente { min-width: 0; overflow-wrap: anywhere; }
.cobranca-linha__prazo--atraso { color: var(--cor-perigo); font-weight: 600; }
.cobranca-linha__valor { text-align: right; }
.cobranca-linha__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.detalhes-titulo { margin: 16px 0 8px; font-size: 0.95rem; }

@media (max-width: 760px) {
  .cobranca-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .cobranca-linha__situacao { grid-column: 2; grid-row: 1; justify-self: end; }
  .cobranca-linha__valor { grid-column: 1; text-align: left; }
  .cobranca-linha__acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

.painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-direction: column; width: min(440px, 100vw); height: 100vh; height: 100dvh; background: var(--cor-superficie); border-left: 1px solid var(--cor-borda); box-shadow: var(--sombra-forte); }
.painel__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cor-borda); flex-shrink: 0; }
.painel__cabecalho h2 { font-size: 1.05rem; overflow-wrap: anywhere; }
.painel__fechar { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; color: var(--cor-texto-suave); }
.painel__corpo { flex: 1 1 auto; min-height: 0; padding: 18px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.painel__rodape { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cor-borda); flex-shrink: 0; }
.painel__rodape[hidden] { display: none; }
.painel__rodape .botao { flex: 1 1 auto; text-align: center; }
.painel__rodape .botao--primario { flex-basis: 100%; }

.detalhe-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; overflow-wrap: anywhere; }
.detalhe-bloco { display: flex; flex-direction: column; gap: 8px; }
.detalhe-bloco + .detalhes-titulo { margin-top: 20px; }
.detalhe-linha { display: flex; justify-content: space-between; gap: 16px; }
.detalhe-linha__rotulo { color: var(--cor-texto-suave); }
.detalhe-linha__valor { text-align: right; overflow-wrap: anywhere; }
.detalhe-linha--destaque { padding: 10px 12px; background: var(--cor-primaria-suave); border-radius: var(--raio); font-weight: 700; font-size: 1.1rem; }
.detalhe-linha--destaque .detalhe-linha__rotulo { color: var(--cor-texto); }
.perfil-pagamentos + .detalhe-bloco { margin-top: 20px; }

@media (min-width: 1280px) {
  body.com-painel .principal { margin-right: 440px; }
}

@media (max-width: 860px) {
  .painel { width: 100vw; border-left: 0; }
  .painel__cabecalho { padding: 14px 16px; }
  .painel__corpo { padding: 14px 16px; }
  .painel__rodape { padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  body.com-painel { overflow: hidden; }
}

.empresa-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin-top: 14px; padding: 12px 16px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.empresa-resumo--vazio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.empresa-resumo__rotulo { color: var(--cor-texto-suave); font-size: 0.8rem; margin-bottom: 2px; }
.empresa-resumo__valor { overflow-wrap: anywhere; }
.empresa-resumo__atraso { color: var(--cor-perigo); font-weight: 600; font-size: 0.85rem; margin-top: 2px; }
.empresa-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

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

@media (max-width: 520px) {
  .empresa-atalhos .botao { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 760px) {
  .tabela--cartoes thead { display: none; }
  .tabela--cartoes, .tabela--cartoes tbody, .tabela--cartoes tr { display: block; width: 100%; }
  .tabela--cartoes tr { padding: 12px 16px; border-bottom: 1px solid var(--cor-borda); }
  .tabela--cartoes tbody tr:last-child { border-bottom: 0; }
  .tabela--cartoes td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .tabela--cartoes td::before { content: attr(data-rotulo); flex-shrink: 0; color: var(--cor-texto-suave); text-align: left; }
  .tabela--cartoes td:first-child { display: block; text-align: left; margin-bottom: 4px; }
  .tabela--cartoes td:first-child::before { content: none; }
  .tabela--cartoes td.acoes { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 8px; }
  .tabela--cartoes td.acoes::before { content: none; }
  .tabela--cartoes td.tabela__vazia { display: block; text-align: center; }
  .tabela--cartoes td.tabela__vazia::before { content: none; }
}

@media (max-width: 520px) {
  .perfil-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .perfil-acoes .botao { width: 100%; }
  .perfil-acoes .botao--primario { grid-column: 1 / -1; }
}

.pg-desconto { display: grid; grid-template-columns: 1fr 84px; gap: 8px; }
.pg-resumo { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 12px; background: var(--cor-superficie-alt); border: 1px solid var(--cor-borda); border-radius: var(--raio); }

.pagar-lista { display: flex; flex-direction: column; gap: 8px; }
.pagar-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); cursor: pointer; }
.pagar-item:hover, .pagar-item:has(input:checked) { background: var(--cor-superficie-alt); }
.pagar-item input { flex: none; }
.pagar-item__texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pagar-item__valor { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }

.perfil-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.perfil-periodo__rotulo { font-weight: 600; }
.perfil-periodo select, .perfil-periodo input[type="date"] { min-height: 40px; max-width: 100%; }
.perfil-periodo__datas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.perfil-periodo__datas[hidden] { display: none; }
.perfil-periodo__totais { margin: 0 0 8px; }

.cartao__corpo > h2,
.cartao__corpo > h3 {
  margin-bottom: 10px;
}

.cliente-card,
.cobranca-linha {
  transition: box-shadow 0.12s, border-color 0.12s;
}

.cliente-card:hover,
.cobranca-linha:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

.resumo {
  box-shadow: var(--sombra);
}

@media (max-width: 720px) {
  .botao {
    min-height: 44px;
  }

  .botao--pequeno {
    min-height: 36px;
  }

  .campo input,
  .campo select,
  .campo textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .tabela th,
  .tabela td {
    padding: 10px 12px;
  }

  .toasts {
    right: 12px;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }

  .modal {
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }
}

/* ===== Padronização visual das cobranças (etapa 14) ===== */

.selo--pago,
.selo--atraso,
.selo--aberto,
.selo--recorrencia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.selo--pago::before,
.selo--atraso::before,
.selo--aberto::before,
.selo--recorrencia::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-cor);
}

.selo--pago { --status-cor: var(--status-pago); background: var(--status-pago-fundo); color: var(--status-pago-texto); }
.selo--atraso { --status-cor: var(--status-atraso); background: var(--status-atraso-fundo); color: var(--status-atraso-texto); }
.selo--aberto { --status-cor: var(--status-aberto); background: var(--status-aberto-fundo); color: var(--status-aberto-texto); }
.selo--recorrencia { --status-cor: var(--status-recorrencia); background: var(--status-recorrencia-fundo); color: var(--status-recorrencia-texto); }

.status--pago { --status-cor: var(--status-pago); --status-texto: var(--status-pago-texto); }
.status--atraso { --status-cor: var(--status-atraso); --status-texto: var(--status-atraso-texto); }
.status--aberto { --status-cor: var(--status-aberto); --status-texto: var(--status-aberto-texto); }
.status--recorrencia { --status-cor: var(--status-recorrencia); --status-texto: var(--status-recorrencia-texto); }
.status--pausada { --status-cor: var(--status-pausada); --status-texto: var(--cor-alerta); }
.status--cancelada { --status-cor: var(--status-neutra); --status-texto: var(--cor-texto-suave); }

:where(.cobranca-linha, .perfil-lista > .perfil-item, .cliente-card) {
  --status-cor: var(--cor-card-borda);
}

.cobranca-linha,
.perfil-lista > .perfil-item,
.cliente-card {
  border: 1px solid var(--cor-card-borda);
  border-left: 4px solid var(--status-cor);
}

.cobranca-lista > .cobranca-linha:nth-child(odd),
.perfil-lista > .perfil-item:nth-child(odd),
.clientes-grade > .cliente-card:nth-child(odd) {
  background: var(--cor-card-a);
}

.cobranca-lista > .cobranca-linha:nth-child(even),
.perfil-lista > .perfil-item:nth-child(even),
.clientes-grade > .cliente-card:nth-child(even) {
  background: var(--cor-card-b);
}

.cobranca-linha__prazo--pago {
  color: var(--status-pago-texto);
  font-weight: 600;
}

.cobranca-linha__valor strong {
  font-variant-numeric: tabular-nums;
}

.perfil-lista { display: flex; flex-direction: column; gap: 8px; }
.perfil-lista > .perfil-item { padding: 12px 14px; border-radius: var(--raio); }
.perfil-lista > .perfil-item:last-child { border-bottom: 1px solid var(--cor-card-borda); }
.perfil-lista > .perfil-item .perfil-pagamentos { background: rgba(255, 255, 255, 0.75); }

.cliente-card__avatar { background: #ffffff; border: 1px solid var(--cor-card-borda); }
.cliente-card--aberto .cliente-card__valor { color: var(--status-aberto-texto); }
.cliente-card--atraso .cliente-card__valor { color: var(--status-atraso-texto); }

.resumo[class*="status--"] {
  border-top: 3px solid var(--status-cor);
}

.resumo[class*="status--"] .resumo__valor {
  color: var(--status-texto);
}

:where(.tabela tbody tr.linha-status) {
  --status-cor: var(--status-neutra);
}

.tabela tbody tr.linha-status:nth-child(odd) { background: var(--cor-card-a); }
.tabela tbody tr.linha-status:nth-child(even) { background: var(--cor-card-b); }
.tabela tbody tr.linha-status:hover { background: var(--cor-card-hover); }
.tabela tbody tr.linha-status td:first-child { box-shadow: inset 4px 0 0 var(--status-cor); }
.tabela tbody tr.linha-status td { border-bottom-color: var(--cor-card-borda); }

@media (max-width: 760px) {
  .tabela--cartoes tbody tr.linha-status { border-left: 4px solid var(--status-cor); border-bottom: 1px solid var(--cor-card-borda); }
  .tabela--cartoes tbody tr.linha-status td:first-child { box-shadow: none; }
  .perfil-lista > .perfil-item { padding: 12px; }
}

.cobranca-linha__etiqueta,
.perfil-item__etiqueta {
  margin-top: 4px;
}

.cobranca-linha .texto-suave,
.perfil-item .texto-suave,
.cliente-card__resumo,
.resumo__detalhe,
.resumo__rotulo {
  color: #475569;
}

.plano-regua { border: 1px solid var(--cor-card-borda); border-radius: var(--raio); padding: 12px 14px; margin: 16px 0 0; }
.plano-regua legend { font-weight: 700; padding: 0 6px; }
.plano-regua__bloco { margin-top: 14px; }
.plano-regua__titulo { margin: 0 0 4px; }
.plano-regua__lista { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.plano-regua__linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px; border: 1px solid var(--cor-card-borda); border-radius: var(--raio); background: var(--cor-card-a); }
.plano-regua__linha:nth-child(even) { background: var(--cor-card-b); }
.plano-regua__campo { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.plano-regua__campo input { width: 130px; }
.plano-regua__confirmacao { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; padding-bottom: 8px; }
.plano-regua__vazio { margin: 0; }
@media (max-width: 760px) { .plano-regua__campo, .plano-regua__campo input { width: 100%; } }
.plano-regua__campo select { min-width: 190px; }
@media (max-width: 760px) { .plano-regua__campo select { width: 100%; min-width: 0; } }

/* ===== Listas compactas no celular: Clientes e Cobranças (etapa 16) ===== */

.rotulo-curto { display: none; }

@media (max-width: 760px) {
  .rotulo-longo { display: none; }
  .rotulo-curto { display: inline; }

  .barra-filtros { margin-bottom: 10px; }
  .barra-filtros + .abas { margin-bottom: 10px; }

  .clientes-grade { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cobranca-lista { gap: 6px; }

  .cliente-card { position: relative; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; box-shadow: none; }
  .cliente-card__topo { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .cliente-card__avatar { width: 34px; height: 34px; }
  .cliente-card__avatar svg { width: 18px; height: 18px; }
  .cliente-card__identidade { gap: 1px; }
  .cliente-card__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
  .cliente-card__resumo { flex-wrap: wrap; gap: 2px 6px; font-size: 0.8rem; }
  .cliente-card__texto { min-width: 0; }
  .cliente-card__resumo .selo { flex: none; padding: 0 8px; font-size: 0.72rem; white-space: nowrap; }
  .cliente-card__valor { font-size: 1rem; font-variant-numeric: tabular-nums; }
  .cliente-card::after { content: "\203A"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--cor-texto-suave); }
  .cliente-card__acoes { position: absolute; inset: 0; margin: 0; }
  .cliente-card__acoes .botao,
  .cliente-card__acoes .botao:hover { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: var(--raio); background: transparent; box-shadow: none; color: transparent; font-size: 0; }
  .clientes-grade > .cliente-card:active { background: var(--cor-card-hover); }

  .cobranca-linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: start; gap: 4px 10px; padding: 8px 10px; box-shadow: none; }
  .cobranca-linha__cliente { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
  .cobranca-linha__cliente > strong { flex: 0 0 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
  .cobranca-linha__cliente > div { font-size: 0.8rem; }
  .cobranca-linha__etiqueta { margin: 0; }
  .cobranca-linha__etiqueta .selo { padding: 0 8px; font-size: 0.7rem; }
  .cobranca-linha__valor { grid-column: 2; grid-row: 1; text-align: right; }
  .cobranca-linha__valor strong { font-size: 1rem; white-space: nowrap; }
  .cobranca-linha__valor .texto-suave { display: none; }
  .cobranca-linha__situacao { grid-column: 2; grid-row: 2; justify-self: end; }
  .cobranca-linha__situacao .selo { padding: 0 8px; font-size: 0.72rem; white-space: nowrap; }
  .cobranca-linha__acoes { grid-column: 1 / -1; grid-row: 3; flex-wrap: nowrap; justify-content: stretch; gap: 6px; margin-top: 2px; }
  .cobranca-linha__acoes .botao { flex: 1 1 0; min-width: 0; padding-right: 4px; padding-left: 4px; font-size: 0.8rem; }
  .cobranca-linha:has(.cobranca-linha__acoes > .botao:only-child) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; }
  .cobranca-linha:has(.cobranca-linha__acoes > .botao:only-child) .cobranca-linha__acoes { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .cobranca-linha:has(.cobranca-linha__acoes > .botao:only-child) .cobranca-linha__acoes .botao { flex: none; padding-right: 12px; padding-left: 12px; }
}

.resumo--botao {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s;
}

.resumo--botao:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

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

.resumo--botao[aria-pressed="true"] {
  background: var(--cor-card-b);
  box-shadow: 0 0 0 2px var(--status-cor);
}

.resumo__acao {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--status-texto, var(--cor-link));
}

.secao-pagina {
  margin-top: 28px;
}

.secao-pagina__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.secao-pagina__cabecalho h2 {
  font-size: 1.15rem;
}

.secao-pagina__cabecalho p {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.assinatura-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.assinatura-linha {
  --status-cor: var(--cor-card-borda);
  padding: 12px 16px;
  background: var(--cor-card-a);
  border: 1px solid var(--cor-card-borda);
  border-left: 4px solid var(--status-cor);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s;
}

.assinatura-lista > .assinatura-linha:nth-child(even) {
  background: var(--cor-card-b);
}

.assinatura-linha:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

.assinatura-linha:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

.assinatura-linha--selecionada {
  border-color: var(--status-cor);
  box-shadow: 0 0 0 2px var(--status-cor);
}

.assinatura-linha__resumo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto minmax(0, 2fr) auto;
  align-items: center;
  gap: 8px 16px;
}

.assinatura-linha__cliente,
.assinatura-linha__plano,
.assinatura-linha__renovacao {
  min-width: 0;
  overflow-wrap: anywhere;
}

.assinatura-linha__valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.assinatura-linha .texto-suave {
  color: #475569;
}

.assinatura-linha__detalhes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--cor-card-borda);
  cursor: default;
}

.assinatura-linha__detalhes[hidden] {
  display: none;
}

.assinatura-linha__dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px 16px;
  margin: 0;
}

.assinatura-linha__dados dt {
  font-size: 0.75rem;
  color: #475569;
}

.assinatura-linha__dados dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.assinatura-linha__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plano-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.plano-grade > .tabela__vazia,
.plano-grade > .aviso {
  grid-column: 1 / -1;
}

.plano-card {
  --status-cor: var(--status-recorrencia);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--cor-card-a);
  border: 1px solid var(--cor-card-borda);
  border-left: 4px solid var(--status-cor);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.plano-card--inativo {
  --status-cor: var(--status-neutra);
  background: var(--cor-card-b);
}

.plano-card__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plano-card__topo strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.plano-card__valor strong {
  font-variant-numeric: tabular-nums;
}

.plano-card .texto-suave {
  color: #475569;
}

.plano-card__descricao {
  overflow-wrap: anywhere;
}

.plano-card__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 760px) {
  .assinatura-linha {
    padding: 10px 12px;
  }

  .assinatura-linha__resumo {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }

  .assinatura-linha__cliente > strong {
    font-size: 0.95rem;
  }

  .assinatura-linha__valor {
    grid-column: 2;
    grid-row: 1;
  }

  .assinatura-linha__situacao {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .assinatura-linha__plano {
    grid-column: 1;
    grid-row: 2;
  }

  .assinatura-linha__renovacao {
    grid-column: 1 / -1;
    font-size: 0.8rem;
  }

  .assinatura-linha__acoes .botao {
    flex: 1 1 calc(50% - 8px);
  }

  .plano-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}