/* ==================================================================== */
/*  COBRAR COM LINK — 13/10/2026 (docs/CONTRATO-COBRANCA-13-10.md, 11)  */
/* ==================================================================== */

/*
 * O visual do public/cobranca.js: a faixa da conversa, o bloco da ficha,
 * as janelas (cobrar, link pronto, detalhes, marcar pago, lista e
 * indicadores), o bloco do Dashboard e a aba Configurações › Cobrança.
 *
 * Regras da casa:
 *   - só as cores do :root (estilo.css). O fundo escurecido das janelas é
 *     o do próprio .modal (a janela é um div.modal.cob-modal);
 *   - tudo preso a classes cob- (e aos ganchos cobranca-faixa e
 *     cfg-cobranca-corpo): nada que já existia muda de cara;
 *   - alturas e larguras "da tela toda" sempre divididas pela escala do
 *     painel (--z); lista que cresce rola dentro do próprio quadro;
 *   - até 640 px: janela vira folha de tela cheia, campos com 16 px (o
 *     celular não dá zoom sozinho), alvos de 44 px, botões na largura toda.
 *
 * A cor de cada estado vem de --cob-cor (aguardando = âmbar, pago = verde,
 * vencido/cancelado = cinza, erro = vermelho). Os fundos clarinhos são
 * misturas dessas cores com a superfície; navegador antigo fica com o
 * cinza claro da linha de cima.
 */

/* ------------------------------------------------- cores dos estados -- */

.cob-estado-aguardando { --cob-cor: var(--ambar); }
.cob-estado-pago,
.cob-estado-pago_apos_prazo { --cob-cor: var(--verde); }
.cob-estado-vencido,
.cob-estado-cancelado_no_painel,
.cob-estado-outro { --cob-cor: var(--texto-fraco); }
.cob-estado-erro { --cob-cor: var(--vermelho); }

/* o selo: "Link R$ 40,00 · aguardando · vence 15/10 18:00" */
.cob-selo {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 2px 10px 2px 8px;
  /* raio pequeno: o selo que quebra em duas linhas continua com cara de selo */
  border-radius: 10px;
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--cob-cor, var(--texto-fraco)) 13%, var(--superficie));
  box-shadow: inset 0 0 0 1px var(--borda);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cob-cor, var(--texto-fraco)) 38%, transparent);
  color: var(--texto);
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  overflow-wrap: anywhere;
}
.cob-selo::before {
  content: '';
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cob-cor, var(--texto-fraco));
}
/* pago após o prazo: verde, com o contorno âmbar */
.cob-selo.cob-estado-pago_apos_prazo { box-shadow: inset 0 0 0 1.5px var(--ambar); }
/* cancelado no painel: cinza riscado */
.cob-selo.cob-estado-cancelado_no_painel { text-decoration: line-through; color: var(--texto-medio); }
.cob-selo.cob-estado-vencido { color: var(--texto-medio); }

/* o rótulo curto do estado na lista ("Aguardando", "Pago") */
.cob-rotulo-estado {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--texto-medio);
}
.cob-rotulo-estado::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cob-cor, var(--texto-fraco));
}
.cob-rotulo-estado.cob-estado-cancelado_no_painel { text-decoration: line-through; }

/* --------------------------------------------- textos e avisos ---- */

.cob-fraco { color: var(--texto-fraco); }
.cob-ajuda { margin: 4px 0 0; font-size: 12.5px; color: var(--texto-medio); }
.cob-erro-txt { margin: 0; font-size: 13px; color: var(--vermelho); }
.cob-erro-campo { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--vermelho); }
.cob-erro-campo:empty { display: none; }

.cob-aviso-ambar,
.cob-aviso-vermelho {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  border-left: 3px solid var(--ambar);
  background: var(--superficie-2);
  background: color-mix(in srgb, var(--ambar) 11%, var(--superficie));
  color: var(--texto);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.cob-aviso-vermelho {
  border-left-color: var(--vermelho);
  background: var(--vermelho-claro, var(--superficie-2));
}
.cob-aviso-ambar p,
.cob-aviso-vermelho p { margin: 0 0 6px; }
.cob-aviso-ambar p:last-child,
.cob-aviso-vermelho p:last-child { margin-bottom: 0; }
.cob-aviso-ambar.oculto { display: none; }

.cob-botoes-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* os botões pequenos (faixa, ficha, detalhes) */
.cob-btn-mini { padding: 5px 11px; font-size: 12.5px; border-radius: 999px; }
.cob-btn-perigo { color: var(--vermelho); border-color: var(--vermelho); }
.cob-btn-perigo:hover { background: var(--vermelho-claro, var(--superficie-3)); color: var(--vermelho); }
.cob-btn-perigo-cheio { background: var(--vermelho); }
.cob-btn-perigo-cheio:hover { background: var(--vermelho); filter: brightness(.92); }
.cob-modal button:disabled,
.cob-cfg button:disabled,
.cobranca-faixa button:disabled { opacity: .55; cursor: not-allowed; }

.cob-etiqueta {
  display: inline-flex; align-items: center;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--superficie-3);
  color: var(--texto-medio);
  font-size: 11px; font-weight: 700;
  vertical-align: 1px;
  white-space: nowrap;
}
.cob-etiqueta-teste { background: var(--azul); color: var(--superficie); }
.cob-etiqueta-ambar {
  background: var(--superficie-2);
  background: color-mix(in srgb, var(--ambar) 18%, var(--superficie));
  color: var(--texto);
}

/* o textarea escondido do "copiar" no navegador sem clipboard */
.cob-copia { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* --------------------------------------------- a faixa da conversa -- */

.cobranca-faixa {
  flex-shrink: 0;
  padding: 6px 16px 6px 20px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-2);
  overflow: hidden;
}
.cob-faixa { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cob-faixa-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  min-width: 0;
}
/* o selo ocupa o que sobra (no mínimo 240 px); os botões ficam ao lado ou descem juntos */
.cob-faixa-texto { flex: 1 1 240px; min-width: 0; }
.cob-faixa-ico { flex-shrink: 0; font-size: 15px; line-height: 1; }
.cob-faixa-botoes { display: inline-flex; flex-wrap: nowrap; gap: 6px; margin-left: auto; flex-shrink: 0; }
.cob-faixa-botoes .btn-secundario { background: var(--superficie); }
.cob-faixa-mais {
  align-self: flex-start;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-medio);
  padding: 2px 10px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.cob-faixa-mais:hover { border-color: var(--primaria); color: var(--primaria); }

/* --------------------------------------------- o bloco da ficha ---- */

#cobranca-ficha { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#cobranca-ficha > p { margin: 0; font-size: 13px; }
.cob-ficha-resumo { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.cob-ficha-resumo::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--cob-cor, var(--texto-fraco));
  vertical-align: 1px;
}
.cob-ficha-lista {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding: 0; list-style: none;
  max-height: 220px; overflow-y: auto;
}
.cob-ficha-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  text-align: left;
  cursor: pointer;
}
.cob-ficha-link:hover { border-color: var(--primaria); }
.cob-ficha-link:focus-visible { outline: none; box-shadow: var(--anel); }
.cob-ficha-por { font-size: 11.5px; color: var(--texto-fraco); }
.cob-ficha-botoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------- as janelas ---- */

/* o fundo é o do .modal; aqui só o que muda */
.cob-modal { padding: 16px; }
.cob-janela {
  display: flex; flex-direction: column;
  width: min(560px, calc(100vw / var(--z, 1) - 32px));
  max-height: calc(100vh / var(--z, 1) - 32px);
  max-height: calc(100dvh / var(--z, 1) - 32px);
  overflow: hidden;
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra-alt);
  color: var(--texto);
}
.cob-janela-larga { width: min(980px, calc(100vw / var(--z, 1) - 32px)); }
.cob-janela-pequena { width: min(440px, calc(100vw / var(--z, 1) - 32px)); }

.cob-janela-topo {
  display: flex; align-items: flex-start; gap: 12px;
  flex-shrink: 0;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--borda);
}
.cob-janela-titulo { flex: 1 1 auto; min-width: 0; }
.cob-janela-titulo h3 { margin: 0; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.cob-sub { margin: 2px 0 0; font-size: 13px; color: var(--texto-medio); overflow-wrap: anywhere; }
.cob-fechar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  margin: -8px -10px 0 0;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--texto-medio);
  font-size: 24px; line-height: 1;
  cursor: pointer;
}
.cob-fechar:hover { background: var(--superficie-3); color: var(--texto); }
.cob-fechar:focus-visible { outline: none; box-shadow: var(--anel); }

/* o meio rola; topo e rodapé ficam */
.cob-janela-meio {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 20px 18px;
  overscroll-behavior: contain;
}
.cob-janela-meio > p { margin: 0 0 8px; }
.cob-janela-rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
}
.cob-janela-rodape:empty { display: none; }
.cob-pergunta {
  flex: 1 1 220px;
  margin: 0;
  font-size: 13.5px; font-weight: 600;
  color: var(--texto);
}

/* campos */
.cob-form { display: flex; flex-direction: column; gap: 14px; }
.cob-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cob-rotulo { font-size: 12.5px; font-weight: 650; color: var(--texto-medio); padding: 0; }
.cob-rotulo-peq { font-size: 12px; font-weight: 600; color: var(--texto-medio); }
.cob-janela input[type="text"],
.cob-janela input[type="url"],
.cob-janela input[type="email"],
.cob-janela input[type="search"],
.cob-janela input[type="datetime-local"],
.cob-janela select,
.cob-janela textarea,
.cob-cfg input[type="text"],
.cob-cfg input[type="number"],
.cob-cfg textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font: inherit; font-size: 14px;
}
.cob-janela textarea,
.cob-cfg textarea { resize: vertical; line-height: 1.45; }
.cob-janela input:focus,
.cob-janela select:focus,
.cob-janela textarea:focus,
.cob-cfg input:focus,
.cob-cfg textarea:focus { outline: none; border-color: var(--primaria); box-shadow: var(--anel); }
.cob-janela input[readonly] { background: var(--superficie-2); color: var(--texto-medio); }
.cob-janela select:disabled { background: var(--superficie-3); color: var(--texto-medio); cursor: wait; }

/* o valor com "R$" na frente */
.cob-valor { position: relative; display: flex; align-items: center; }
.cob-valor-rs {
  position: absolute; left: 12px;
  font-weight: 650; color: var(--texto-medio);
  pointer-events: none;
}
.cob-janela .cob-valor input { padding-left: 40px; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* faixa "em teste" (amarela, no topo) */
.cob-faixa-teste {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--ambar);
  background: var(--superficie-2);
  background: color-mix(in srgb, var(--ambar) 14%, var(--superficie));
  font-size: 13px; font-weight: 600;
}

/* validade */
.cob-validade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cob-validade-texto { flex: 1 1 220px; margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.cob-validade-campo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.cob-validade-campo label { flex: 1 1 100%; }
.cob-validade-campo input { flex: 1 1 200px; width: auto; }

/* "Como ela vai pagar": três cartões-escolha */
.cob-caixa-provedores > legend { margin-bottom: 4px; }
.cob-provedores { display: flex; flex-direction: column; gap: 8px; }
.cob-provedor {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.cob-provedor:hover { border-color: var(--primaria); }
.cob-provedor input[type="radio"] {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--primaria);
}
.cob-provedor-escolhido {
  border-color: var(--primaria);
  background: var(--primaria-clara);
  box-shadow: inset 0 0 0 1px var(--primaria);
}
.cob-provedor-off { cursor: not-allowed; background: var(--superficie-2); border-style: dashed; }
.cob-provedor-off:hover { border-color: var(--borda-forte); }
.cob-provedor-off .cob-provedor-nome,
.cob-provedor-off .cob-provedor-desc { color: var(--texto-fraco); }
.cob-provedor-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cob-provedor-nome { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.cob-provedor-desc { font-size: 12.5px; color: var(--texto-medio); }
.cob-provedor-motivo { font-size: 12.5px; font-weight: 600; color: var(--texto-medio); }
.cob-provedor-motivo::before { content: 'Indisponível: '; font-weight: 700; color: var(--texto); }
.cob-provedor:focus-within { box-shadow: var(--anel); }
.cob-extra { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

/* "A cliente vai pagar (aproximado)" */
.cob-previa {
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-2);
}
.cob-previa-titulo { margin: 0 0 6px; font-size: 13.5px; }
.cob-previa-linhas { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.cob-previa-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.cob-previa-linha dt { color: var(--texto-medio); }
.cob-previa-linha dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.cob-previa-pix dd { color: var(--verde); }
.cob-previa-todas { margin-top: 6px; }
.cob-previa-todas summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primaria); }
.cob-parcelas {
  margin: 6px 0 0; padding: 0; list-style: none;
  max-height: 420px; overflow-y: auto;
  border-top: 1px solid var(--borda);
}
.cob-parcelas li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.cob-previa-nota { margin: 6px 0 0; font-size: 12px; color: var(--texto-medio); }

.cob-motivos { margin: 0; padding: 8px 10px 8px 26px; border-radius: var(--raio-sm); border-left: 3px solid var(--ambar); background: var(--superficie-2); font-size: 13px; }
.cob-motivos li + li { margin-top: 2px; }
.cob-ja-existe {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ambar);
  border-radius: var(--raio);
  background: var(--superficie-2);
  background: color-mix(in srgb, var(--ambar) 9%, var(--superficie));
  font-size: 13.5px;
}
.cob-ja-existe p { margin: 0 0 6px; }

/* passo 2: a mensagem pronta */
.cob-pronto { display: flex; flex-direction: column; gap: 12px; }
.cob-selo-linha { margin: 0; }
.cob-msg-previa {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--superficie-3);
  font-size: 13.5px; line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px; overflow-y: auto;
}
.cob-incerto .cob-botoes-linha .btn-secundario { background: var(--superficie); }

/* detalhes */
.cob-det-pago { margin: 8px 0 0; font-weight: 650; overflow-wrap: anywhere; }
.cob-det-conferencia { margin: 8px 0 0; font-size: 13px; color: var(--texto-medio); }
.cob-resultado {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  border-left: 3px solid var(--azul);
  background: var(--superficie-2);
  font-size: 13.5px; font-weight: 600;
}
.cob-resultado-ok { border-left-color: var(--verde); }
.cob-resultado-erro { border-left-color: var(--vermelho); background: var(--vermelho-claro, var(--superficie-2)); }
.cob-alertas { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.cob-alertas li {
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  border-left: 3px solid var(--ambar);
  background: var(--superficie-2);
  background: color-mix(in srgb, var(--ambar) 11%, var(--superficie));
  font-size: 13px; overflow-wrap: anywhere;
}
.cob-det-dados {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px;
  margin: 12px 0;
}
.cob-det-dados dt { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-fraco); }
.cob-det-dados dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.cob-det-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cob-det-sub { margin: 16px 0 6px; font-size: 13px; color: var(--texto-medio); }
.cob-historico {
  margin: 0; padding: 0; list-style: none;
  max-height: 420px; overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.cob-historico li {
  padding: 6px 10px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px; overflow-wrap: anywhere;
}
.cob-historico li:last-child { border-bottom: 0; }
.cob-hist-quando { font-variant-numeric: tabular-nums; color: var(--texto-fraco); }
.cob-hist-por { font-weight: 650; }

/* marcar pago: as opções */
.cob-opcoes { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cob-opcoes-lista {
  flex-direction: column; flex-wrap: nowrap;
  max-height: 420px; overflow-y: auto;
}
.cob-opcao { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; overflow-wrap: anywhere; }
.cob-opcao input[type="radio"] { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--primaria); }
.cob-janela-meio > .cob-campo,
.cob-janela-meio > fieldset.cob-campo { margin-bottom: 14px; }

/* ------------------------------------------- lista e indicadores --- */

.cob-abas {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie-3);
}
.cob-aba {
  padding: 8px 12px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--texto-medio);
  font-weight: 650; font-size: 13.5px;
  cursor: pointer;
}
.cob-aba[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.cob-aba:focus-visible { outline: none; box-shadow: var(--anel); }

.cob-lista-filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; min-width: 0; }
.cob-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cob-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-medio);
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.cob-chip:hover { border-color: var(--primaria); color: var(--primaria); }
.cob-chip-ativo,
.cob-chip-ativo:hover { background: var(--primaria); border-color: var(--primaria); color: var(--superficie); }
.cob-chip-num {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--superficie-3);
  color: var(--texto-medio);
  font-size: 11.5px; text-align: center;
}
.cob-chip-ativo .cob-chip-num { background: var(--primaria-esc); color: var(--superficie); }
.cob-chip:focus-visible { outline: none; box-shadow: var(--anel); }
.cob-lista-controles { display: flex; flex-wrap: wrap; gap: 8px; }
.cob-janela .cob-busca { flex: 1 1 220px; width: auto; }
.cob-janela .cob-sel-provedor { flex: 0 1 220px; width: auto; }
.cob-so-dela { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }

.cob-lista-caixa { min-width: 0; }
.cob-lista {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding: 0; list-style: none;
  max-height: 420px; overflow-y: auto;
}
.cob-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cob-cor, var(--borda-forte));
  border-radius: var(--raio-sm);
  background: var(--superficie);
  min-width: 0;
}
.cob-item-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-width: 0; }
.cob-item-nome { min-width: 0; overflow-wrap: anywhere; }
.cob-item .cob-selo { align-self: flex-start; }
.cob-item-meta { margin: 0; font-size: 12px; color: var(--texto-medio); overflow-wrap: anywhere; }
.cob-item-alerta { font-weight: 700; color: var(--texto); }
.cob-item-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.cob-vazio { margin: 12px 0; color: var(--texto-medio); }
.cob-ver-mais { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

.cob-ind { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cob-ind-periodo { margin: 0; font-size: 13px; font-weight: 650; color: var(--texto-medio); }
.cob-ind-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cob-ind-cartao {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  min-width: 0;
}
.cob-ind-cartao h4 { margin: 0 0 2px; font-size: 13px; color: var(--texto-medio); }
.cob-ind-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cob-ind-meia { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cob-ind-rot { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-fraco); }
.cob-ind-num { font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cob-ind-num-texto { font-size: 15px; }
.cob-ind-sub { font-size: 12.5px; color: var(--texto-medio); }
.cob-ind-nota { margin: 4px 0 0; font-size: 12px; color: var(--texto-medio); }
.cob-ind-lista {
  display: flex; flex-direction: column;
  margin: 6px 0 0; padding: 0; list-style: none;
  max-height: 220px; overflow-y: auto;
}
.cob-ind-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--borda); font-size: 12.5px; }
.cob-ind-lista li:last-child { border-bottom: 0; }
.cob-notas { margin: 0; padding-left: 18px; font-size: 12px; color: var(--texto-medio); }

.cob-tabela-caixa { overflow-x: auto; max-width: 100%; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.cob-tabela { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cob-tabela th,
.cob-tabela td { padding: 6px 10px; border-bottom: 1px solid var(--borda); text-align: right; white-space: nowrap; }
.cob-tabela th:first-child { text-align: left; }
.cob-tabela thead th { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-fraco); background: var(--superficie-2); }
.cob-tabela tbody tr:last-child th,
.cob-tabela tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------- o Dashboard ---- */

.cob-dash-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.cob-dash-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
  min-width: 0;
}
.cob-dash-rot { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-fraco); }
.cob-dash-num { font-size: 19px; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cob-dash-sub { font-size: 12px; color: var(--texto-medio); }
.cob-dash-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------- Configurações › Cobrança ---- */

.cob-cfg { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cob-cfg-bloco { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--borda); min-width: 0; }
.cob-cfg-bloco:first-child { padding-top: 0; border-top: 0; }
.cob-cfg-titulo { margin: 0; font-size: 15px; }
.cob-cfg-prov { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie-2); }
.cob-cfg-prov h4 { margin: 0; font-size: 14px; }
.cob-cfg-prov p { margin: 0; }
.cob-cfg-ok { font-size: 13px; font-weight: 600; color: var(--verde); }
.cob-cfg-falta { font-size: 13px; font-weight: 600; color: var(--texto); }
.cob-cfg-falta::before { content: '! '; color: var(--ambar); font-weight: 800; }
.cob-cfg-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cob-cfg-linha label { flex: 1 1 100%; }
.cob-cfg .cob-cfg-linha input { flex: 1 1 200px; width: auto; }
.cob-cfg-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cob-cfg-tabelas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cob-cfg-tabela { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cob-cfg-tabela h4 { margin: 0; font-size: 13.5px; }
.cob-cfg-tabela .cob-tabela-caixa { max-height: 420px; overflow-y: auto; }
.cob-cfg input.cob-cfg-taxa { width: 90px; padding: 5px 8px; text-align: right; }
.cob-cfg-tabela > .cob-btn-mini,
.cob-cfg .cob-campo > .cob-btn-mini { align-self: flex-start; }
.cob-cfg .cob-campo { margin-bottom: 10px; }
.cob-checklist { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.5; max-height: 420px; overflow-y: auto; }
.cob-checklist li + li { margin-top: 4px; }
.cob-cfg-testes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cob-cfg-teste-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--verde); }
.cob-variaveis summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primaria); }
.cob-variaveis ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--texto-medio); }
.cob-variaveis code { font-weight: 700; color: var(--texto); }
.cob-cfg-salvar { align-items: flex-start; }

/* o interruptor "Cobrar com link: Desligado/Ligado" */
.cob-interruptor {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  min-height: 44px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 14px;
  cursor: pointer;
}
.cob-interruptor:focus-visible { outline: none; box-shadow: var(--anel); }
.cob-interruptor-trilho {
  position: relative;
  width: 40px; height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--borda-forte);
  transition: background-color .15s ease;
}
.cob-interruptor-bola {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: var(--sombra);
  transition: transform .15s ease;
}
.cob-interruptor-on .cob-interruptor-trilho { background: var(--verde); }
.cob-interruptor-on .cob-interruptor-bola { transform: translateX(16px); }

@media (prefers-reduced-motion: reduce) {
  .cob-provedor, .cob-interruptor-trilho, .cob-interruptor-bola { transition: none; }
}

/*
 * A aba "Cobrança" é a sexta das Configurações: entre 641 e 900 px a
 * fileira de abas passa da largura e a última ficava cortada. O estilo.css
 * já faz essa fileira rolar de lado até 640 px; aqui a mesma regra vale até
 * 900 px. Sem sobra, nada muda (a fileira só rola quando não cabe).
 */
@media (max-width: 900px) {
  #view-configuracoes > .abas-tela { overflow-x: auto; scrollbar-width: none; }
}

/* ------------------------------------------------- até 640 px ---- */

@media (max-width: 640px) {
  /* a janela vira folha de tela cheia (o .modal já cobre a tela toda) */
  .cob-modal { padding: 0; place-items: stretch; }
  .cob-janela,
  .cob-janela-larga,
  .cob-janela-pequena {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .cob-janela-topo { padding: 12px 14px 10px; }
  .cob-janela-meio { padding: 12px 14px 16px; }
  .cob-janela-rodape { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* botões na largura toda, o principal em cima; alvos de 44 px */
  .cob-janela-rodape > button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 6px; white-space: normal; line-height: 1.2; }
  .cob-janela-rodape > .btn-primario { order: -1; flex-basis: 100%; }
  .cob-pergunta { order: -2; flex-basis: 100%; }
  .cob-janela button,
  .cob-cfg button,
  .cob-dash-botoes button,
  .cob-ficha-botoes button,
  .cob-faixa-botoes button,
  .cob-faixa-mais,
  .cob-chip,
  .cob-aba { min-height: 44px; }
  .cob-provedor,
  .cob-opcao { min-height: 44px; }
  .cob-botoes-linha > button,
  .cob-det-acoes > button { flex: 1 1 100%; }
  /* 16 px nos campos: abaixo disso o celular dá zoom sozinho ao tocar */
  .cob-janela input[type],
  .cob-janela select,
  .cob-janela textarea,
  .cob-cfg input[type],
  .cob-cfg textarea { font-size: 16px; }
  .cob-janela .cob-valor input { font-size: 18px; }
  /* listas que crescem: rolam dentro do quadro */
  .cob-lista,
  .cob-historico,
  .cob-parcelas,
  .cob-opcoes-lista,
  .cob-checklist { max-height: calc(50vh / var(--z, 1)); }
  /* chips: uma fileira que rola de lado, dentro do próprio quadro */
  .cob-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cob-chips::-webkit-scrollbar { display: none; }
  .cob-chip { flex: 0 0 auto; }
  .cob-aba { white-space: normal; line-height: 1.25; padding: 6px 8px; }
  .cob-janela .cob-busca,
  .cob-janela .cob-sel-provedor { flex: 1 1 100%; }
  .cob-det-dados,
  .cob-cfg-grade,
  .cob-cfg-tabelas { grid-template-columns: minmax(0, 1fr); }
  .cob-ind-cartoes { grid-template-columns: minmax(0, 1fr); }
  .cob-dash-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cob-dash-botoes > button { flex: 1 1 100%; }
  /* a faixa: o selo e, ao lado, Enviar/Detalhes (o "Copiar link" fica nos detalhes) */
  .cobranca-faixa { padding: 6px 10px; }
  .cob-faixa-botoes [data-cob="copiar-link"] { display: none; }
  .cob-faixa-linha { flex-wrap: nowrap; }
  .cob-faixa-texto { flex: 1 1 auto; }
  .cob-faixa-botoes { flex-wrap: nowrap; flex-shrink: 0; }
  .cob-faixa-ico { display: none; }
  .cob-interruptor { width: 100%; }
  .cob-cfg-salvar > .btn-primario { width: 100%; min-height: 44px; }
}