/* Cores e fontes do Sempre Certo, como nas telas aprovadas (docs/telas/). */
:root {
  --marinho: #23394e;
  --marinho-escuro: #182a3a;
  --pessego: #f0a96d;
  --fundo: #f3f1ec;
  --cartao: #fffefb;
  --texto: #1a221f;
  --texto-suave: #4f5a52;
  --borda: #cfc8bb;
  --linha: #e6e1d6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
}

.t { font-family: 'Archivo', system-ui, sans-serif; }

.cabecalho {
  background: var(--marinho);
  color: var(--cartao);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 32px;
  min-height: 72px;
  flex-wrap: wrap;
}
.cabecalho .marca { font-size: 22px; font-weight: 700; }
.cabecalho .marca span { color: var(--pessego); }
.cabecalho nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.cabecalho nav a { color: #e9eef3; text-decoration: none; padding: 10px 14px; border-radius: 10px; font-size: 15px; }
.cabecalho nav a.on { background: var(--pessego); color: var(--marinho-escuro); font-weight: 700; }
.cabecalho .quem { color: #c9d4de; }

main { padding: 32px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 8px 0; }
.cartao .topo { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 24px 8px; gap: 16px; flex-wrap: wrap; }
.cartao h1 { margin: 0; font-size: 26px; }
.suave { color: var(--texto-suave); font-size: 14px; }
.vazio { padding: 16px 24px; border-top: 1px solid var(--linha); }

.cabecalho .quem a { color: #e9eef3; }

/* Página provisória do representante (tela RInicio, docs/telas/fonte/RInicio.dc.html): por enquanto só o cabeçalho do PWA. */
.pwa { max-width: 390px; margin: 0 auto; min-height: 100vh; background: var(--fundo); }
.pwa-cabecalho { background: var(--marinho); color: var(--cartao); padding: 18px 20px 20px; }
.pwa-cabecalho .marca-pwa { font-size: 15px; color: var(--pessego); font-weight: 700; }
.pwa-cabecalho .ola { font-size: 24px; font-weight: 700; margin-top: 4px; }
.pwa-cabecalho a { color: #c9d4de; font-size: 14px; }
.pwa .conteudo { padding: 18px 16px; }

/* Tela Representante de Fabiana (docs/telas/fonte/FRepresentante.dc.html) e a lista. */
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
.ficha { display: flex; flex-direction: column; gap: 20px; }
.ficha .titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ficha h1 { margin: 6px 0 0; font-size: 30px; }
.ficha .sub { font-size: 15px; color: var(--texto-suave); margin-top: 4px; }
.ficha .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha .grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ficha .coluna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ficha .caixa { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 20px 24px; }
.ficha .caixa.aviso { border-color: var(--pessego); }
.ficha a { color: var(--marinho); }
.ficha .btn.p { color: var(--cartao); }
.ficha h2 { margin: 0 0 6px; font-size: 18px; }
.ficha .campos { margin-top: 14px; }
.ficha .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ficha label { font-size: 14px; color: var(--texto-suave); display: block; margin-bottom: 6px; }
.ficha input[type='text'], .ficha input[type='email'] { width: 100%; height: 44px; border: 1.5px solid #dcd6cb; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; background: #fff; color: var(--texto); }
.ficha .linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--linha); }
.ficha .linha .nome { flex: 1; font-weight: 600; }
.ficha .linha input { width: 90px; text-align: right; }
.ficha .linha.coluna-simples { flex-direction: column; align-items: flex-start; gap: 2px; }
.ficha .nota { font-size: 13px; color: var(--texto-suave); }
.ficha .ok { color: #2f6b3a; font-weight: 600; }
.ficha .pendente { flex-basis: 100%; text-align: right; font-size: 13px; color: var(--texto-suave); }
.ficha .mensagem { padding: 12px 16px; border-radius: 10px; background: #e8f1e6; color: #1f4a29; }
.ficha .mensagem.erro { background: #f8e6e2; color: #7a2a1d; }
.ficha .assinado { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; color: var(--texto); }
.ficha .assinado input { width: 20px; height: 20px; }
.lista-reps .linha-rep { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--linha); color: inherit; text-decoration: none; flex-wrap: wrap; }
.lista-reps .linha-rep:hover { background: #f8f6f0; }
.lista-reps .linha-rep .quem-rep { flex: 1; min-width: 200px; }
.lista-reps .linha-rep .quem-rep strong { display: block; }
.lista-reps .etiqueta { font-size: 14px; }
.lista-reps .etiqueta.ok { color: #2f6b3a; font-weight: 600; }
@media (max-width: 900px) { .ficha .grade, .ficha .campos { grid-template-columns: 1fr; } main { padding: 16px; } }

/* Tela Produtos de Fabiana (docs/telas/fonte/FProdutos.dc.html). */
a { color: var(--marinho); }
a:hover { color: var(--marinho-escuro); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--marinho); color: var(--marinho); background: var(--cartao); cursor: pointer; }
.btn.p { background: var(--marinho); color: var(--cartao); }
.btn:disabled { opacity: .6; cursor: default; }
main.produtos { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.faixa-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.faixa-topo h1 { margin: 0; font-size: 30px; }
.faixa-topo .sub { font-size: 15px; margin-top: 4px; }
.tabela-cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; overflow-x: auto; }
.tabela-cartao table { width: 100%; border-collapse: collapse; }
.tabela-cartao th { text-align: left; font-size: 13px; color: var(--texto-suave); font-weight: 600; padding: 12px 20px; border-bottom: 1px solid var(--linha); }
.tabela-cartao td { padding: 16px 20px; border-bottom: 1px solid var(--linha); font-size: 15px; }
.tabela-cartao tbody tr:last-child td { border-bottom: 0; }
.tabela-cartao td.direita { text-align: right; }
.chip-on, .chip-off { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.chip-on { background: #dcebdc; color: #2f5a33; }
.chip-off { background: #ece8e0; color: var(--texto-suave); }

.janela { border: 1px solid var(--borda); border-radius: 16px; background: var(--cartao); color: var(--texto); padding: 24px; width: min(520px, calc(100vw - 32px)); }
.janela::backdrop { background: rgba(24, 42, 58, .45); }
.janela h2 { margin: 0 0 12px; font-size: 22px; }
.janela label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.janela input:not([type=checkbox]) { height: 40px; border: 1.5px solid var(--borda); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 400; background: #fff; color: var(--texto); }
.janela label.marca-caixa { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.janela fieldset { border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px 4px; margin: 0 0 12px; }
.janela legend { font-size: 14px; font-weight: 700; padding: 0 6px; }
.janela .dica { font-size: 13px; font-weight: 400; color: var(--texto-suave); }
.janela .erro { color: #7a2a1f; background: #f6dcd6; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
.janela .acoes { display: flex; justify-content: flex-end; gap: 8px; }
[hidden] { display: none !important; }

/* PWA do representante: telas Gerar código e Código pronto (docs/telas/fonte/RGerar.dc.html e RPronto.dc.html), 390 px. */
.app-r { display: flex; flex-direction: column; font-size: 16px; }
.app-r > section { flex: 1; display: flex; flex-direction: column; }
.r-topo { background: var(--marinho); color: var(--cartao); padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.r-topo a { color: var(--cartao); display: flex; }
.r-topo h1 { margin: 0; font-size: 20px; font-weight: 700; }
.r-corpo { flex: 1; padding: 18px 16px; display: flex; flex-direction: column; gap: 20px; }
.r-form { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.app-r .lb { font-size: 14px; font-weight: 600; color: var(--texto-suave); margin: 0 0 8px; }
.app-r .seg { display: flex; gap: 8px; }
.app-r .seg button { flex: 1; min-height: 48px; border-radius: 12px; border: 1.5px solid #dcd6cb; background: var(--cartao); font: inherit; font-size: 16px; color: var(--texto); cursor: pointer; }
.app-r .seg button.on { border-color: var(--marinho); background: var(--marinho); color: var(--cartao); font-weight: 700; }
.app-r input { width: 100%; height: 56px; border: 1.5px solid #dcd6cb; border-radius: 12px; padding: 0 14px; font: inherit; font-size: 17px; background: #fff; color: var(--texto); }
.app-r #whatsapp, .app-r #outro { margin-top: 8px; }
.r-opcao { display: block; width: 100%; text-align: left; margin-top: 8px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--texto); cursor: pointer; }
.r-opcao.novo { color: var(--marinho); font-weight: 700; }
.r-escolhido { margin-top: 8px; font-size: 14px; font-weight: 600; color: #2f5a33; }
.r-nota { font-size: 14px; color: var(--texto-suave); line-height: 1.45; }
.r-centro { text-align: center; }
.r-erro { color: #7a2a1f; background: #f6dcd6; border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.r-explicacao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; line-height: 1.5; }
.r-botao-principal { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border: 0; border-radius: 12px; background: var(--pessego); color: var(--marinho-escuro); font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; }
.r-botao-principal:disabled { opacity: .6; cursor: default; }
.r-botao-segundo { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; border: 1.5px solid var(--marinho); background: transparent; color: var(--marinho); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
#tela-pronto .r-corpo { gap: 18px; padding-top: 22px; }
#tela-pronto .r-botao-principal { margin-top: 0; }
.r-resumo { font-size: 15px; color: var(--texto-suave); }
.r-codigo { font-size: 40px; font-weight: 700; letter-spacing: 4px; color: var(--marinho); margin-top: 10px; }
.r-mensagem { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; line-height: 1.5; white-space: pre-line; }
.r-mensagem-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px; }
.r-nav { position: sticky; bottom: 0; display: flex; background: var(--cartao); border-top: 1px solid var(--borda); padding-bottom: 12px; }
.r-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--texto-suave); text-decoration: none; padding: 8px 0; }
.r-nav a.on { color: var(--marinho); font-weight: 700; }

/* Telas Clientes de Fabiana: lista e ficha (docs/telas/fonte/FCliente.dc.html). */
.lista-clientes .filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.lista-clientes .filtros input, .lista-clientes .filtros select { height: 40px; border: 1.5px solid #dcd6cb; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; background: #fff; color: var(--texto); }
.lista-clientes .linha-cliente { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--linha); color: inherit; text-decoration: none; flex-wrap: wrap; }
.lista-clientes .linha-cliente:hover { background: #f8f6f0; }
.lista-clientes .quem-cliente { flex: 1; min-width: 220px; }
.lista-clientes .quem-cliente strong { display: block; }
.contratacoes-cliente { display: flex; gap: 8px; flex-wrap: wrap; }
.selo { display: inline-block; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: #ece8e0; color: var(--texto-suave); }
.selo-teste, .selo-em-dia, .selo-cortesia { background: #dcebdc; color: #2f5a33; }
.selo-teste-acabou, .selo-saindo { background: #fbe6d1; color: #7a4a14; }
.selo-atrasado { background: #f6dcd6; color: #7a2a1f; }
.selo-acesso { background: #e3ebf3; color: var(--marinho); }
.ficha-cliente .grade-cliente { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
.ficha-cliente .cabeca-cartao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ficha-cliente .cabeca-cartao h2 { flex: 1; margin: 0; font-size: 20px; }
.ficha-cliente .tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ficha-cliente .k { font-size: 13px; color: var(--texto-suave); }
.ficha-cliente .v { font-weight: 600; }
.ficha-cliente .caixa .acoes { margin-top: 18px; }
.ficha-cliente .linha .quando { width: 96px; color: var(--texto-suave); }
.ficha-cliente .linha .nome-linha { flex: 1; font-weight: 400; }
.ficha-cliente .acoes .btn, .janela .acoes .btn { font: inherit; font-size: 15px; font-weight: 600; }
.janela p { margin: 0 0 14px; line-height: 1.45; }
.janela select { height: 40px; border: 1.5px solid var(--borda); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 400; background: #fff; color: var(--texto); }
@media (max-width: 900px) { .ficha-cliente .grade-cliente, .ficha-cliente .tres { grid-template-columns: 1fr; } }

/* PWA do representante: Meus clientes e Cliente (docs/telas/fonte/RInicio.dc.html e RCliente.dc.html), 390 px. */
.r-inicio { gap: 0; padding-top: 16px; }
.r-gerar { margin-top: 0; text-decoration: none; }
.pwa-cabecalho { position: relative; }
.pwa-cabecalho #sair { position: absolute; top: 18px; right: 20px; }
.r-titulo-lista { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 8px; }
.r-titulo-lista h1 { margin: 0; font-size: 19px; }
.r-lista { display: flex; flex-direction: column; gap: 10px; }
.r-cliente { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; text-decoration: none; color: var(--texto); }
.r-forte { font-weight: 600; }
.r-produto { font-size: 14px; color: var(--texto-suave); }
.r-chip { align-self: flex-start; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #ece8e0; color: var(--texto-suave); }
.r-chip.tom-teste { background: #fbe7d3; color: #7a4410; }
.r-chip.tom-alerta { background: #f6dcd6; color: #7a2a1f; }
.r-chip.tom-neutro { background: #ece8e0; color: var(--texto-suave); }
.r-chip.tom-ok { background: #dcebdc; color: #2f5a33; }
.r-cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; }
.r-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.r-grande { font-size: 22px; font-weight: 700; margin-top: 12px; }
.r-barra { height: 10px; border-radius: 999px; background: var(--linha); margin-top: 10px; overflow: hidden; }
.r-barra > div { height: 100%; background: var(--pessego); }
.r-datas { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-suave); margin-top: 6px; }
.r-texto { margin-top: 12px; }
.r-botoes { display: flex; gap: 8px; }
.r-botoes > * { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.r-botao-escuro, .r-botao-claro { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 0 6px; font-size: 15px; border-radius: 12px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.r-botao-escuro, .r-botao-escuro:hover { background: var(--marinho); color: var(--cartao); border: 0; }
.r-botao-claro { background: transparent; color: var(--marinho); border: 1.5px solid var(--marinho); font-weight: 600; }
.r-botao-escuro:disabled { opacity: .6; cursor: default; }
.r-prorrogar { flex: none; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; gap: 12px; }
.r-linha { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); font-size: 15px; }
.r-data { width: 56px; flex: none; color: var(--texto-suave); }
.r-rodape { margin-top: auto; font-size: 13px; }

/* Início de Fabiana: números, lista Decidir e faixa de baixo (docs/telas/fonte/Main.dc.html), 1280 px. */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.numero { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 16px 20px; }
.numero .k { font-size: 14px; color: var(--texto-suave); }
.numero .n { font-size: 32px; font-weight: 700; line-height: 1.2; }
.lista-decidir h1 small { font-size: 15px; color: var(--texto-suave); font-weight: 700; }
.linha-decidir { display: flex; align-items: center; gap: 20px; padding: 14px 24px; border-top: 1px solid var(--linha); }
.linha-decidir .selo-decidir { flex: 0 0 150px; text-align: center; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #e3ebf3; color: var(--marinho); }
.linha-decidir .selo-decidir-contrato { background: #fbe6d1; color: #7a4a14; }
.linha-decidir .selo-decidir-atraso { background: #f6dcd6; color: #7a2a1f; }
.linha-decidir .selo-decidir-estorno, .linha-decidir .selo-decidir-contestacao, .linha-decidir .selo-decidir-chave { background: #f6dcd6; color: #7a2a1f; }
.linha-decidir .selo-decidir-assinatura, .linha-decidir .selo-decidir-nota { background: #fbe6d1; color: #7a4a14; }
.linha-decidir .texto-decidir { flex: 1; min-width: 0; }
.linha-decidir .texto-decidir strong, .linha-decidir .texto-decidir span { display: block; }
.faixa-baixo { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 0 4px; }
.faixa-baixo li::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--texto-suave); margin-right: 8px; }
@media (max-width: 900px) { .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .linha-decidir { flex-wrap: wrap; } }