/* ================================================================
   IndicaMais — programa de indicações
   Paleta: petróleo profundo + verde-fibra, luz fria de bastidor
   ================================================================ */
:root {
  --tinta: #00243a;          /* navy PontualNet */
  --tinta-suave: #3d5c70;
  --fundo: #eef2f5;
  --superficie: #ffffff;
  --linha: #d5e0e7;
  --primario: #036596;       /* azul da marca */
  --primario-forte: #024b71;
  --fibra: #83be00;          /* verde da marca */
  --azul: #2c6e9e;   --azul-fundo: #e6f0f7;
  --verde: #5d8a00;  --verde-fundo: #eef6dc;
  --ambar: #a06a14;  --ambar-fundo: #faefda;
  --vermelho: #a33c33; --vermelho-fundo: #f9e7e4;
  --roxo: #5c4a9c;   --roxo-fundo: #ece8f8;
  --cinza: #5c6b69;  --cinza-fundo: #e8ecec;
  --fonte-display: "Barlow Condensed", "Inter", system-ui, sans-serif;
  --fonte-corpo: "Inter", system-ui, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --raio: 12px;
  --sombra: 0 8px 28px rgba(15, 40, 48, .1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: 15px;
  color: var(--tinta);
  background: var(--fundo);
  min-height: 100vh;
}
body.fundo-marca {
  background: #001420;
  background-image:
    radial-gradient(55rem 30rem at 80% -15%, rgba(3, 101, 150, .55), transparent 62%),
    radial-gradient(38rem 24rem at 5% 105%, rgba(131, 190, 0, .22), transparent 60%);
}

h1, h2 { font-family: var(--fonte-display); letter-spacing: -.015em; margin: 0 0 .5rem; }
h1 { font-size: 1.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: 1.3rem; font-weight: 700; }
a { color: var(--primario); }
code { font-family: var(--fonte-mono); }

/* ---------------- topo ---------------- */
.topo { background: var(--superficie); color: var(--tinta); border-bottom: 1px solid var(--linha); }
.topo-conteudo {
  max-width: 1080px; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca-logo { height: 42px; width: auto; display: block; }
.marca-selo {
  font-family: var(--fonte-display); font-size: .95rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--primario); padding-top: .15rem;
  border-left: 1px solid var(--linha); padding-left: .7rem; margin-left: .2rem;
}
.cartao-logo { height: 78px; width: auto; display: block; margin: 0 auto 1.1rem; }

.menu { display: flex; gap: .25rem; }
.menu a {
  color: var(--tinta-suave); text-decoration: none; padding: .45rem .8rem; border-radius: 8px; font-weight: 600;
}
.menu a:hover { background: #eaf1f5; color: var(--primario); }
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.topo-nome { color: var(--tinta-suave); font-size: .85rem; }

/* ---------------- avisos ---------------- */
.aviso { max-width: 1080px; margin: .9rem auto 0; padding: .7rem 1rem; border-radius: var(--raio); font-weight: 500; }
.aviso-interno { max-width: none; margin: 0 0 1rem; }
.aviso-ok  { background: var(--verde-fundo); color: var(--verde); border: 1px solid #bfe3cd; }
.aviso-erro { background: var(--vermelho-fundo); color: var(--vermelho); border: 1px solid #eec7c1; }
.lista-erros { margin: 0; padding-left: 1.1rem; }

/* ---------------- página ---------------- */
.pagina { max-width: 1080px; margin: 0 auto; padding: 1.6rem 1.25rem 3rem; }
.pagina-estreita { max-width: 640px; }
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.bloco { margin-top: 2rem; }
.vazio { color: var(--tinta-suave); background: var(--superficie); border: 1px dashed var(--linha); border-radius: var(--raio); padding: 1.4rem; text-align: center; }
.texto-suave { color: var(--tinta-suave); }
.rotulo-secao {
  font-family: var(--fonte-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fibra); margin: 0 0 .4rem;
}

/* ---------------- cartão de indicação (assinatura) ---------------- */
.cartao-indicacao {
  background: var(--tinta); color: #fff; border-radius: 18px; box-shadow: var(--sombra);
  padding: 1.8rem; display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
  background-image: radial-gradient(38rem 20rem at 100% 0%, rgba(131,190,0,.2), transparent 65%);
}
.cartao-indicacao h1 { color: #fff; font-size: 1.5rem; max-width: 26ch; }
.cartao-indicacao .texto-suave { color: #a7c1d1; max-width: 46ch; }
.cartao-indicacao-texto { flex: 1 1 320px; }
.link-caixa {
  display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; margin: 1rem 0 .6rem;
}
.link-caixa code {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  padding: .6rem .8rem; border-radius: 10px; font-size: .85rem; word-break: break-all;
  flex: 1 1 240px; display: flex; align-items: center; color: #e3f1f8;
}
.acao-secundaria { color: var(--fibra); font-weight: 600; text-decoration: none; }
.acao-secundaria:hover { text-decoration: underline; }
.qr-moldura {
  margin: 0; background: #fff; border-radius: 14px; padding: .8rem .8rem .4rem; text-align: center;
}
.qr-moldura img { width: 180px; height: 180px; display: block; }
.qr-moldura figcaption { color: var(--tinta-suave); font-size: .75rem; padding: .3rem 0 .4rem; font-family: var(--fonte-mono); }

/* ---------------- resumo por status ---------------- */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.resumo-item {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .8rem 1rem; border-left-width: 4px;
}
.resumo-numero { display: block; font-family: var(--fonte-display); font-size: 1.5rem; font-weight: 800; }
.resumo-rotulo { color: var(--tinta-suave); font-size: .8rem; }
.resumo-item.cor-azul { border-left-color: var(--azul); }
.resumo-item.cor-ambar { border-left-color: var(--ambar); }
.resumo-item.cor-cinza { border-left-color: var(--cinza); }
.resumo-item.cor-verde { border-left-color: var(--verde); }
.resumo-item.cor-vermelho { border-left-color: var(--vermelho); }
.resumo-item.cor-roxo { border-left-color: var(--roxo); }

/* ---------------- tabelas ---------------- */
.tabela-rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabela th {
  text-align: left; font-family: var(--fonte-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave); padding: .8rem .9rem; border-bottom: 1px solid var(--linha);
}
.tabela td { padding: .75rem .9rem; border-bottom: 1px solid var(--linha); vertical-align: middle; font-size: .9rem; }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: #f7faf9; }

.voucher {
  background: var(--tinta); color: var(--fibra); padding: .3rem .55rem; border-radius: 8px;
  font-size: .85rem; letter-spacing: .12em; font-weight: 600;
}
.codigo-mini { font-size: .78rem; color: var(--tinta-suave); letter-spacing: .08em; }

/* ---------------- etiquetas de status ---------------- */
.etiqueta {
  display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.etiqueta.cor-azul { background: var(--azul-fundo); color: var(--azul); }
.etiqueta.cor-ambar { background: var(--ambar-fundo); color: var(--ambar); }
.etiqueta.cor-cinza { background: var(--cinza-fundo); color: var(--cinza); }
.etiqueta.cor-verde { background: var(--verde-fundo); color: var(--verde); }
.etiqueta.cor-vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.etiqueta.cor-roxo { background: var(--roxo-fundo); color: var(--roxo); }

.seletor-status {
  border: 1px solid var(--linha); border-radius: 999px; padding: .3rem .6rem; font-size: .8rem;
  font-weight: 600; font-family: var(--fonte-corpo); background: var(--superficie); cursor: pointer; max-width: 100%;
}
.seletor-status.cor-azul { color: var(--azul); background: var(--azul-fundo); }
.seletor-status.cor-ambar { color: var(--ambar); background: var(--ambar-fundo); }
.seletor-status.cor-cinza { color: var(--cinza); background: var(--cinza-fundo); }
.seletor-status.cor-verde { color: var(--verde); background: var(--verde-fundo); }
.seletor-status.cor-vermelho { color: var(--vermelho); background: var(--vermelho-fundo); }
.seletor-status.cor-roxo { color: var(--roxo); background: var(--roxo-fundo); }
.forma-status, .forma-inline { display: inline-block; margin: 0; }

/* ---------------- filtros ---------------- */
.filtros { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filtros .campo { min-width: 200px; }

/* ---------------- formulários ---------------- */
.formulario { display: flex; flex-direction: column; gap: 1rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-weight: 600; font-size: .85rem; }
.obrigatorio {
  font-family: var(--fonte-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ambar); background: var(--ambar-fundo); border-radius: 6px; padding: .1rem .4rem; margin-left: .3rem;
}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select {
  font: inherit; padding: .6rem .75rem; border: 1px solid var(--linha); border-radius: 10px;
  background: var(--superficie); color: var(--tinta); width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(43, 184, 142, .5); outline-offset: 1px;
}
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .grade-2 { grid-template-columns: 1fr; } }
.acoes-form { display: flex; justify-content: flex-end; gap: .7rem; }
.texto-legal { color: var(--tinta-suave); font-size: .78rem; text-align: center; margin: .2rem 0 0; }

/* captcha */
.captcha-linha { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.captcha-img { border: 1px solid var(--linha); border-radius: 10px; background: #f2f6f5; }
.captcha-linha input { flex: 1 1 150px; }
.captcha-atualizar { font-size: 1.1rem; line-height: 1; }

/* ---------------- botões ---------------- */
.botao {
  font: inherit; font-weight: 600; border: none; border-radius: 10px; padding: .6rem 1.1rem;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.botao-primario { background: var(--primario); color: #fff; }
.botao-primario:hover { background: var(--primario-forte); }
.botao-fantasma { background: transparent; color: inherit; border: 1px solid var(--linha); opacity: .9; }
.botao-fantasma:hover { opacity: 1; border-color: var(--primario); color: var(--primario); }
.topo .botao-fantasma { color: var(--tinta-suave); }
.botao-cheio { width: 100%; }
.botao-mini { padding: .3rem .6rem; font-size: .75rem; background: var(--tinta); color: #fff; border-radius: 8px; margin-top: .3rem; }

/* ---------------- cartões centrais (login / público) ---------------- */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 1.6rem; box-shadow: var(--sombra); }
.cartao-central { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.cartao-login, .cartao-publico { width: 100%; max-width: 420px; border: none; }

.cartao-sub { color: var(--tinta-suave); margin: .3rem 0 1.4rem; }
.publico-chamada { font-size: 1.02rem; margin: 1rem 0 .3rem; }
.cartao-publico .texto-suave { margin: 0 0 1.2rem; }
.cartao-sucesso { text-align: center; }
.selo-sucesso {
  width: 58px; height: 58px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--verde-fundo); color: var(--verde); font-size: 1.7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------- opções do login ---------------- */
.opcoes-login { display: flex; flex-direction: column; gap: .5rem; margin-top: -.2rem; }
.marcador {
  display: flex; align-items: center; gap: .5rem; font-size: .85rem;
  color: var(--tinta-suave); font-weight: 500; cursor: pointer;
}
.marcador input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primario); cursor: pointer; }

/* ================================================================
   Entrada: campanha + acesso (tela de login)
   ================================================================ */
.entrada {
  min-height: 100vh; max-width: 1140px; margin: 0 auto; padding: 2.5rem 1.5rem;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center;
}
@media (max-width: 900px) { .entrada { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.8rem; } }

.campanha { position: relative; color: #fff; }
.campanha-logo { width: 210px; max-width: 60%; height: auto; margin-bottom: 1.6rem; }
.campanha h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: .95; color: #fff; margin: .2rem 0 .9rem;
}
.campanha h1 .destaque { color: var(--fibra); }
.campanha-texto { color: #a7c1d1; max-width: 44ch; font-size: 1.02rem; margin: 0 0 1.6rem; }

.passos { list-style: none; margin: 0 0 1.8rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.passos li { display: flex; align-items: center; gap: .8rem; color: #d3e3ee; font-size: .95rem; }
.passo-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-display); font-weight: 700; font-size: 1rem;
  background: rgba(131, 190, 0, .16); color: var(--fibra); border: 1px solid rgba(131, 190, 0, .45);
}

/* sinal de fibra — eco das ondas do logotipo */
.sinal {
  position: absolute; right: -1rem; bottom: -3.5rem; width: 190px; height: 190px;
  pointer-events: none; opacity: .5;
}
.sinal .onda, .sinal .nucleo { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.sinal .nucleo { width: 16px; height: 16px; background: var(--fibra); }
.sinal .onda { border: 2px solid var(--primario); opacity: 0; animation: emitir 3.6s ease-out infinite; }
.sinal .onda-1 { width: 60px; height: 60px; }
.sinal .onda-2 { width: 120px; height: 120px; animation-delay: 1.2s; }
.sinal .onda-3 { width: 185px; height: 185px; animation-delay: 2.4s; }
@keyframes emitir {
  0% { opacity: .75; transform: translate(-50%, -50%) scale(.35); }
  70% { opacity: .18; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sinal .onda { animation: none; opacity: .25; } }
@media (max-width: 900px) { .sinal { display: none; } }

.acesso { display: flex; justify-content: center; }
.acesso .cartao-login { max-width: 400px; width: 100%; }
.rodape-cartao {
  margin: 1.2rem 0 0; text-align: center; font-size: .88rem; color: var(--tinta-suave);
  border-top: 1px solid var(--linha); padding-top: 1rem;
}

.botao-verde { background: var(--fibra); color: #16290a; }
.botao-verde:hover { background: #94d305; }
.botao-grande { padding: .8rem 1.5rem; font-size: 1rem; }

/* ---------------- formulário de venda em blocos ---------------- */
.pagina-media { max-width: 780px; }
.bloco-form {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.3rem 1.4rem 1.5rem; margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: 1rem;
}
.bloco-form legend {
  font-family: var(--fonte-display); font-size: 1.05rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--primario); padding: 0 .5rem; margin-left: -.5rem;
}
.grade-cidade { display: grid; grid-template-columns: 1fr 90px; gap: 1rem; }
@media (max-width: 560px) { .grade-cidade { grid-template-columns: 1fr; } }
.opcional {
  font-family: var(--fonte-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-suave); background: var(--cinza-fundo); border-radius: 6px; padding: .1rem .4rem; margin-left: .3rem;
}
.dica-campo { margin: .15rem 0 0; font-size: .78rem; color: var(--tinta-suave); }
.dica-ok { color: var(--verde); }
.dica-alerta { color: var(--ambar); }
.ids-ixc { display: block; font-size: .72rem; margin-top: .25rem; line-height: 1.4; }
.lista-erros-ixc { margin: 0; padding-left: 1.1rem; color: var(--tinta-suave); font-size: .88rem; }
.lista-erros-ixc li { margin-bottom: .3rem; }