/* Intellivent — folha de estilo.
   Vem da maquete aprovada em Spec/layout.html: tema claro, fundo branco.
   As variáveis --mod* são injetadas pelo cabeçalho e mudam com o módulo. */

:root{
  --ground:#f5f6f6;
  --surface:#ffffff;
  --ink:#161a1b;
  --ink-soft:#4c5658;
  --ink-faint:#7b8688;
  --rule:#e0e4e4;
  --rule-strong:#cfd5d5;
  --erro:#B32118;
  --erro-lavado:#FDEAE9;

  --mod:#1F7A8C;
  --mod-escura:#175C69;
  --mod-lavada:#E7F1F3;
  --mod-borda:#C4DDE2;

  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Rodapé sempre no fim real da página, sem número mágico: o miolo (.shell)
     cresce para preencher o que sobra entre a barra do topo e o rodapé — em
     página curta ele ocupa exatamente esse espaço; em página longa cresce com
     o conteúdo e o rodapé desce junto. Sem isto, uma conta aproximada de
     altura deixava sobrar uma faixa em branco antes do rodapé, que ficou
     visível quando a barra lateral ganhou a marca d'água encostada embaixo. */
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--mod-escura);text-decoration:none}
a:hover{text-decoration:underline}

/* ------------------------------------------------------------ barra do topo */

.topbar{
  display:flex;align-items:center;gap:16px;
  padding:13px 20px;border-bottom:1px solid var(--rule);
  background:#fff;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;
}
.topbar .marca{display:block;line-height:0}
.topbar .marca:hover{text-decoration:none}
.logo{height:26px;width:auto;display:block;color:var(--ink);--chama:var(--mod)}
.logo.grande{height:38px;margin-bottom:18px}

/* Barra de módulos. Cada botão traz a própria cor em --chip*, então a barra
   não depende do módulo aberto para pintar os outros. */
.modnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.modchip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;
  border-radius:20px;padding:5px 13px;
  color:var(--ink-faint);background:#fff;border:1px solid var(--rule);
  text-decoration:none;white-space:nowrap;
}
.modchip b{width:8px;height:8px;border-radius:2px;background:var(--chip,var(--mod));display:block}
.modchip:hover{text-decoration:none;border-color:var(--chip-borda);color:var(--chip-escura)}
.modchip.sel{
  color:var(--chip-escura);background:var(--chip-lavada);border-color:var(--chip-borda);
}

/* seletor de evento e menu do usuário: <details> para não depender de script */
.evsel,.euser{position:relative}
.evsel{margin-left:auto}
.evsel > summary,.euser > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:650;color:var(--ink);line-height:1.15;
}
.evsel > summary{
  border:1px solid var(--rule-strong);border-left:4px solid var(--corevento, var(--rule-strong));
  border-radius:6px;padding:5px 12px;background:#fff;
}
.evsel > summary:hover{border-color:var(--mod);border-left-color:var(--corevento, var(--mod))}
.pulso-evento{animation:pulsoEvento .9s ease-out}
@keyframes pulsoEvento{
  0%   {box-shadow:0 0 0 0 var(--corevento, var(--mod))}
  60%  {box-shadow:0 0 0 14px rgba(0,0,0,0)}
  100% {box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.evsel > summary::-webkit-details-marker,.euser > summary::-webkit-details-marker{display:none}
.evsel small{
  color:var(--ink-faint);font-weight:500;font-size:10px;display:block;
  line-height:1.2;letter-spacing:.05em;text-transform:uppercase;
}
.evsel .caret{color:var(--ink-faint);font-size:10px}

/* Alinhado pela direita: os dois menus ficam na ponta direita da barra, e
   abrir para a esquerda faria o painel vazar da tela e criar rolagem
   horizontal na página inteira. */
.evmenu{
  position:absolute;top:calc(100% + 6px);right:0;left:auto;min-width:210px;z-index:30;
  background:#fff;border:1px solid var(--rule-strong);border-radius:7px;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.35);padding:5px;
}
.evmenu a{
  display:block;padding:8px 11px;border-radius:5px;
  font-size:13.5px;color:var(--ink);
}
.evmenu a:hover{background:var(--mod-lavada);text-decoration:none}
.evmenu a.sel{font-weight:700;color:var(--mod-escura);background:var(--mod-lavada)}
.evdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
.euser-nome{display:block;padding:8px 11px 4px;font-size:12.5px;color:var(--ink-faint)}

.who{
  width:30px;height:30px;border-radius:6px;background:var(--mod);color:#fff;
  font-size:11.5px;font-weight:800;display:flex;align-items:center;
  justify-content:center;letter-spacing:.02em;
}
.who-foto{border-radius:50%;object-fit:cover;display:block}

/* ------------------------------------------------------------------ corpo */

/* ---------------------------------------------- barra lateral e conteúdo */

.shell{display:flex;align-items:flex-start;flex:1 0 auto}

.sidebar{
  flex:0 0 232px;align-self:stretch;
  background:#fbfcfc;border-right:1px solid var(--rule);
  position:sticky;top:57px;   /* logo abaixo da barra do topo, que é sticky */
  max-height:calc(100vh - 57px);
  overflow:hidden;   /* recorta a marca d'água nas bordas da barra */
}
/* Foto do crachá do evento, esmaecendo de baixo (visível) pra cima (sumindo).
   Fica atrás do conteúdo — por isso a opacidade baixa e o fade não competem
   com o texto das ferramentas. */
.sidebar-bg{
  /* Só a metade de baixo da barra, não a barra inteira: empurra a foto para
     perto do rodapé em vez de flutuar no meio, e encurta a zona de fade —
     ela acontece toda dentro desse espaço menor, então fica mais compacta. */
  position:absolute;left:0;right:0;bottom:0;top:42%;z-index:0;
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
  opacity:.4;
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 42%, transparent 94%);
          mask-image:linear-gradient(to top, #000 0%, #000 42%, transparent 94%);
}
.sidebar-scroll{
  position:relative;z-index:1;height:100%;overflow-y:auto;
  padding:22px 14px;
}
.sideitem{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 10px;border-radius:6px;margin-bottom:2px;color:var(--ink);
}
a.sideitem:hover{background:var(--mod-lavada);text-decoration:none}
.sideitem .dot{
  width:16px;height:16px;border-radius:4px;flex:0 0 auto;margin-top:2px;
  background:var(--mod-lavada);border:1px solid var(--mod-borda);
}
.sideitem .txt{display:block;min-width:0}
.sideitem b{display:block;font-size:13px;font-weight:650;line-height:1.3}
.sideitem small{display:block;font-size:11.5px;color:var(--ink-faint);line-height:1.35;margin-top:2px}
.sideitem.sel{background:var(--mod-lavada)}
.sideitem.sel b{color:var(--mod-escura)}
.sideitem.sel .dot{background:var(--mod);border-color:var(--mod)}
.sideitem.off{opacity:.45}

/* A busca, disfarçada de primeira ferramenta da lista — mesma altura e
   espaçamento do .sideitem, mas é um <input> de verdade, não um link. */
.sidebusca{position:relative;margin:0 0 10px}
.sidebusca input{
  width:100%;font-family:var(--sans);font-size:13px;color:var(--ink);
  border:1.5px solid var(--rule-strong);border-radius:6px;
  padding:9px 10px 9px 32px;background:#fff;
}
.sidebusca input:focus{outline:none;border-color:var(--mod);box-shadow:0 0 0 3px var(--mod-lavada)}
.sidebusca .ico{position:absolute;left:10px;top:8px;color:#8b9596;font-size:14px;pointer-events:none}

/* A tela inteira para o conteúdo: sem largura máxima, só respiro nas bordas. */
.appbody{flex:1;min-width:0;padding:26px 28px 44px;background:#fff}

@media (max-width:900px){
  .shell{display:block}
  .sidebar{
    position:static;max-height:none;border-right:none;
    border-bottom:1px solid var(--rule);flex:none;
  }
  /* Faixa curta e virada de lado: o fade "de baixo pra cima" não cabe.
     Mais simples e mais seguro apagar a marca d'água aqui do que forçar um
     efeito que só funciona numa barra alta e vertical. */
  .sidebar-bg{display:none}
  .sidebar-scroll{padding:14px;overflow-y:visible;height:auto}
  .sidebar-scroll nav{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
  .appbody{padding:20px 16px 40px}
}

.secttl{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#8b9596;margin:30px 0 12px;
}
.dica{font-size:12.5px;color:var(--ink-faint);margin:8px 0 0}
.vazio{
  border:1px dashed var(--rule-strong);border-radius:6px;padding:20px;
  color:var(--ink-faint);font-size:13.5px;text-align:center;
}

/* ------------------------------------------------------------------ busca */
/* O campo em si mora na barra lateral agora (.sidebusca); aqui fica só a
   lista de resultados, que aparece no conteúdo principal. */

.resultados{border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-top:14px;max-width:720px}
.res{display:flex;align-items:center;gap:13px;padding:11px 14px;border-bottom:1px solid #eef1f1;font-size:13.5px}
.res:last-child{border-bottom:none}
.res:hover{background:#fafbfb;text-decoration:none}
.res .cat{font-size:15px;line-height:1;flex-shrink:0}
.res .co{font-weight:650;color:var(--ink)}
.res .contatonome{color:var(--ink-faint);font-size:12.5px}
.res .meta{color:#8b9596;margin-left:auto;font-size:12.5px;text-align:right}

/* ---------------------------------------------------------------- funil */
/* Uma coluna por etapa, lado a lado; dentro dela os status empilham. Cada
   status é uma barra na cor do módulo, comprimento proporcional (por área)
   à quantidade de instituições ali. Clicar filtra a lista de instituições logo
   abaixo, sem JS: é só um link com query string. */

.funil-wrap{margin-top:6px}
.funil{display:flex;gap:28px;flex-wrap:wrap;padding:10px 0 6px;align-items:flex-start}
.funil-col{display:flex;flex-direction:column;gap:7px;min-width:150px;flex:1 1 150px}
.funil-etapa{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8b9596;margin:0 0 2px;padding-bottom:6px;border-bottom:1px solid var(--rule);
}
.funil-barra{display:flex;align-items:center;gap:8px;color:inherit;padding:2px 0}
.funil-barra:hover{text-decoration:none}
.funil-barra .rot{font-size:12px;color:var(--ink-faint);width:106px;flex-shrink:0;line-height:1.25}
.funil-barra.sel .rot{color:var(--ink);font-weight:650}
.funil-barra .bg{flex:1;height:9px;border-radius:5px;background:var(--corevento-lavada, var(--mod-lavada));overflow:hidden}
.funil-barra .fill{display:block;height:100%;background:var(--corevento, var(--mod));border-radius:5px;transition:box-shadow .15s}
.funil-barra:hover .fill{box-shadow:0 0 0 2px var(--corevento-borda, var(--mod-borda)) inset}
.funil-barra.sel .fill{box-shadow:0 0 0 2px var(--corevento-escura, var(--mod-escura)) inset}
.funil-barra .qtd{font-size:12px;font-weight:700;color:var(--corevento-escura, var(--mod-escura));width:22px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- panorama */
/* Grade de pontos por categoria — a base inteira de uma vez, não só quem tem
   negociação aberta. Cor marca engajamento (já negociamos vs só na base);
   tamanho é porte aproximado, quando a gente sabe. */

.panolegenda{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:14px 0 4px;font-size:12px;color:var(--ink-faint)}
.panolegenda span{display:flex;align-items:center;gap:6px}
.panolegenda .pdot{width:10px;height:10px}
.pano{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;align-items:flex-start}
.pano-col{min-width:190px;flex:1 1 190px}
.pano-etapa{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8b9596;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule);
}
.pano-etapa small{font-weight:500;color:#8b9596;text-transform:none;letter-spacing:0}
.pano-grid{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.pdot{border-radius:50%;flex-shrink:0;display:inline-block;transition:transform .1s}
.pdot:hover{transform:scale(1.35)}
.pdot-eng{background:var(--corevento, var(--mod))}
.pdot-base{background:var(--rule-strong)}
.pdot-lase{box-shadow:0 0 0 2px #3b82f6}

/* ------------------------------------------------------------- ferramentas */

.tools{display:grid;gap:11px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.tools{grid-template-columns:repeat(4,1fr)}}
.tool{border:1px solid var(--rule);border-radius:6px;padding:13px 14px;background:#fff;display:block;color:inherit}
.tool:hover{border-color:var(--mod);text-decoration:none}
.tool .tn{font-size:13.5px;font-weight:700;margin:0 0 3px}
.tool .td{font-size:12px;color:var(--ink-faint);margin:0;line-height:1.4}
.tool .dot{width:22px;height:22px;border-radius:5px;display:block;margin-bottom:9px;background:var(--mod-lavada);border:1px solid var(--mod-borda)}
.tool.off{opacity:.5}
.tool.off:hover{border-color:var(--rule)}

/* -------------------------------------------------------- precisam de você */

.needs{border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.needrow{display:flex;align-items:center;gap:13px;padding:11px 14px;border-bottom:1px solid #eef1f1;font-size:13.5px;color:inherit}
.needrow:last-child{border-bottom:none}
.needrow:hover{background:#fafbfb;text-decoration:none}
.needrow .tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:3px;white-space:nowrap}
.t-late{background:var(--erro-lavado);color:var(--erro)}
.t-back{background:var(--mod-lavada);color:var(--mod-escura)}
/* Pendência de preenchimento: âmbar, não vermelho — nada quebrou, falta dado. */
.t-falta{background:#FDF1DC;color:#8A5B10}
.needrow .co{font-weight:650}
.needrow .meta{color:#8b9596;margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- tela da instituição */

.cohead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #e8ebeb}
.logoinst{width:88px;height:88px;object-fit:contain;border:1px solid var(--rule);border-radius:10px;padding:10px;background:#fff;flex-shrink:0}
.cohead h1{font-size:22px;font-weight:750;letter-spacing:-.02em;margin:0}
.cohead .sub{font-size:13px;color:var(--ink-faint);margin:3px 0 0}
.stagepill{margin-left:auto;font-size:12.5px;font-weight:700;color:#fff;background:var(--mod);border-radius:20px;padding:6px 14px;white-space:nowrap}
.stagepill.fechada{background:#656f7d}
.statusform{margin-left:auto}
.statusform select{
  font-size:12.5px;font-weight:700;color:#fff;background:var(--corstatus, var(--mod));
  border:none;border-radius:20px;padding:6px 30px 6px 14px;white-space:nowrap;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:13px;
}
.statusform select:hover{filter:brightness(.94)}

.cogrid{display:grid;gap:22px;margin-top:18px}
@media (min-width:680px){.cogrid{grid-template-columns:1.15fr .85fr}}

.cktask{border:1px solid var(--rule);border-radius:6px;padding:13px 14px}
.cktitulo{font-size:13.5px;font-weight:700;margin:0 0 6px}
.ckdesc{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0 0 10px;white-space:pre-line}
.ckcampos{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:10px 0 0;padding-top:10px;border-top:1px solid #eef1f1}
.ckcampos dt{font-size:11.5px;color:#8b9596;white-space:nowrap}
.ckcampos dd{font-size:12.5px;color:var(--ink);margin:0;font-weight:600}

.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.btn{
  font-family:var(--sans);font-size:13px;font-weight:650;border-radius:6px;
  padding:9px 14px;border:1px solid var(--corevento, var(--mod));background:var(--corevento, var(--mod));color:#fff;
  cursor:pointer;display:inline-block;
}
.btn:hover{text-decoration:none;filter:brightness(.94)}
.btn.ghost{background:#fff;color:var(--corevento-escura, var(--mod-escura));border-color:var(--corevento, var(--mod))}
.btn.quiet{background:#fff;color:var(--ink-soft);border-color:var(--rule-strong)}

/* etiqueta de pendência ao lado de um título de seção */
.falta{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:3px;
  background:var(--erro-lavado);color:var(--erro);
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* formulário de registro de contato */
.registro{margin-top:2px}
.registro select,.registro textarea,.registro input[type=date],.registro input[type=text],.registro input[type=email]{
  font-family:var(--sans);font-size:13px;color:var(--ink);
  border:1px solid var(--rule-strong);border-radius:6px;padding:8px 10px;background:#fff;
}
.registro select,.registro input[type=date],.registro input[type=text],.registro input[type=email]{height:36px;flex:1 1 180px;min-width:0}
.registro textarea{display:block;width:100%;max-width:520px;margin:8px 0;resize:vertical;line-height:1.45}
.registro select:focus,.registro textarea:focus,.registro input[type=date]:focus,.registro input[type=text]:focus,.registro input[type=email]:focus{
  outline:none;border-color:var(--mod);box-shadow:0 0 0 3px var(--mod-lavada);
}

.defcontato{margin:10px 0 14px;font-size:13px}
.defcontato summary{cursor:pointer;color:var(--mod-escura);font-weight:650;list-style:none}
.defcontato summary::-webkit-details-marker{display:none}
.defcontato summary::before{content:"+ ";font-weight:700}
.defcontato[open] summary::before{content:"– "}
.defcontato .registro{margin-top:10px;max-width:420px}
.defcontato select{width:100%;margin-bottom:2px}

.contact{border:1px solid var(--rule);border-radius:6px;padding:12px 14px;margin-bottom:9px}
.contact .cn{font-size:14px;font-weight:700;margin:0}
.contact .cc{font-size:12.5px;color:var(--ink-faint);margin:2px 0 0}

.lasestar{
  display:inline-block;font-size:11px;font-weight:700;color:#8A5B10;
  background:#FDF1DC;padding:1px 7px;border-radius:10px;margin-left:6px;
  vertical-align:middle;white-space:nowrap;
}
.conhecidos{border:1px solid var(--rule);border-radius:6px;overflow:hidden;max-height:280px;overflow-y:auto}
.cnh{padding:9px 14px;border-bottom:1px solid #eef1f1}
.cnh:last-child{border-bottom:none}
.cnh .cn{font-size:13px;font-weight:650;margin:0}
.cnh .cc{font-size:12px;color:var(--ink-faint);margin:1px 0 0}

.hist{border-left:2px solid var(--rule);padding-left:14px;margin-top:6px}
.hist .h{padding:0 0 14px;position:relative}
.hist .h::before{content:"";position:absolute;left:-19px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--rule-strong)}
.hist .h.now::before{background:var(--mod)}
.hist .yr{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b9596;margin:0}
.hist .ev{font-size:13.5px;font-weight:650;margin:1px 0 0}
.hist .out{font-size:12.5px;color:var(--ink-faint);margin:1px 0 0}

/* ------------------------------------------------- gerador de propostas
   O assistente veio do app do LASE com folha de estilo própria, verde-escura.
   Aqui ele usa a paleta do Intellivent: a identidade do evento fica no PDF,
   que é o que chega ao cliente — a ferramenta é do portal. */

/* Duas colunas: o assistente e um resumo que fica visível o tempo todo. Antes
   o cartão tinha 640px fixos e o resto da tela ficava vazio. */
.proposta{max-width:1460px;margin:22px 0 0;display:grid;gap:24px;align-items:start}
@media (min-width:1020px){
  /* O assistente cresce até 820px — quem mais ganha é o campo de
     contrapartidas, que é texto longo e antes quebrava a cada poucas palavras.
     Passar muito disso não ajuda: formulário largo demais cansa de ler. */
  .proposta{grid-template-columns:minmax(0,820px) minmax(320px,1fr)}
}
.proposta .card{border:1px solid var(--rule);border-radius:8px;padding:28px 32px;background:#fff}
.proposta textarea{min-height:190px}

.painel-resumo{
  border:1px solid var(--rule);border-radius:8px;padding:20px 22px;background:#fbfcfc;
  position:sticky;top:80px;
}
.pr-titulo{
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#8b9596;margin:0 0 12px;
}
.pr-bloco{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--rule)}
.pr-bloco b{display:block;font-size:15px;font-weight:700}
.pr-bloco span{display:block;font-size:13px;color:var(--ink-faint);margin-top:2px}
.pr-vazio{font-size:13px;color:var(--ink-faint);margin:0}
.pr-cota{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding:9px 0;border-bottom:1px solid #eef1f1;
}
.pr-cota b{font-size:13.5px;font-weight:650;flex:1;min-width:0}
.pr-valor{font-size:13.5px;font-weight:700;color:var(--mod-escura);font-variant-numeric:tabular-nums}
.pr-de{font-size:12px;color:var(--ink-faint);text-decoration:line-through;width:100%;text-align:right}
.pr-tag{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--mod-lavada);color:var(--mod-escura);border-radius:3px;padding:2px 7px;
}
.pr-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:12px}
.pr-total span{font-size:12.5px;color:var(--ink-faint)}
.pr-total b{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums}

.proposta .steps-nav{display:flex;gap:6px;margin-bottom:22px}
.proposta .steps-nav div{flex:1;height:4px;border-radius:2px;background:var(--rule)}
.proposta .steps-nav div.done{background:var(--mod)}

.proposta h2{font-size:16px;font-weight:750;margin:0 0 4px;letter-spacing:-.01em}
.proposta .subtitulo{font-size:13px;color:var(--ink-faint);margin:0 0 16px}
.proposta label{display:block;font-size:12.5px;font-weight:700;margin:16px 0 6px;color:var(--ink-soft)}
.proposta .label-inline{margin:0;font-size:13.5px;font-weight:650;color:var(--ink)}

.proposta input[type=text],.proposta input[type=number],.proposta input[type=date],
.proposta input[type=email],.proposta select,.proposta textarea{
  width:100%;padding:10px 12px;border:1px solid var(--rule-strong);border-radius:6px;
  font-size:14px;font-family:var(--sans);background:#fff;color:var(--ink);
}
.proposta textarea{min-height:150px;line-height:1.5;resize:vertical}
.proposta input:focus,.proposta select:focus,.proposta textarea:focus{
  outline:none;border-color:var(--mod);box-shadow:0 0 0 3px var(--mod-lavada);
}

.proposta .grupo-evento{margin-bottom:18px}
.proposta .grupo-evento h3{
  font-size:12px;font-weight:700;color:var(--mod-escura);margin:0 0 8px;
  border-bottom:1px solid var(--rule);padding-bottom:5px;
}
.proposta .opcao-cota{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule)}
.proposta .opcao-cota:last-child{border-bottom:none}
.proposta .opcao-cota input,.proposta .opcao-veterano input{width:auto;accent-color:var(--mod)}
.proposta .opcao-cota .label{flex:1;font-size:14px}
.proposta .opcao-cota .valor{font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.proposta .opcao-veterano{
  display:flex;align-items:center;gap:10px;padding:12px 0;margin-top:14px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}

.proposta .valor-tabela{
  background:var(--mod-lavada);border:1px solid var(--mod-borda);border-radius:6px;
  padding:11px 14px;margin-top:6px;font-size:17px;font-weight:700;color:var(--mod-escura);
  font-variant-numeric:tabular-nums;
}
.proposta .resumo-item{border:1px solid var(--rule);border-radius:7px;padding:12px 14px;margin-bottom:10px}
.proposta .resumo-item .titulo{font-weight:700;font-size:13.5px;color:var(--mod-escura)}
.proposta .resumo-item .linha{font-size:13px;color:var(--ink-soft);margin-top:3px}
.proposta .resumo-item pre{white-space:pre-wrap;font-family:var(--sans);font-size:12.5px;margin:6px 0 0;color:var(--ink-faint)}
.proposta .hint{font-size:12px;color:var(--ink-faint);margin:5px 0 0}

.proposta .btn-row{display:flex;gap:10px;margin-top:24px}
.proposta .btn-row button,.proposta .btn-row a{
  flex:1;padding:11px;border-radius:6px;font-size:14px;font-weight:650;
  font-family:var(--sans);cursor:pointer;text-align:center;text-decoration:none;
}
.proposta .btn-primary{background:var(--mod);color:#fff;border:1px solid var(--mod)}
.proposta .btn-primary:hover{filter:brightness(.94)}
.proposta .btn-secondary{background:#fff;color:var(--ink-soft);border:1px solid var(--rule-strong)}
.proposta .btn-secondary:hover{border-color:var(--mod);color:var(--mod-escura)}

.proposta .step{display:none}
.proposta .step.active{display:block}

/* --------------------------------------------------------- páginas simples */

body.centrado{
  background:var(--ground);min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.cartao{
  background:#fff;border:1px solid var(--rule);border-radius:10px;
  padding:38px 34px;max-width:420px;width:100%;text-align:center;
  box-shadow:0 14px 40px -24px rgba(0,0,0,.4);
}
.cartao h1{font-size:20px;font-weight:750;margin:0 0 8px;letter-spacing:-.015em}
.cartao p{color:var(--ink-soft);font-size:14px;margin:0 0 18px}
.cartao .btn{width:100%;padding:12px 14px;font-size:14px}

.alerta{
  background:var(--erro-lavado);color:var(--erro);border:1px solid #F5C9C6;
  border-radius:6px;padding:11px 14px;font-size:13.5px;margin:0 0 16px;text-align:left;
}

.rodape{
  /* Sem margin-top: agora que .shell preenche exatamente o espaço até aqui
     (ver body), qualquer margem aqui só criaria de volta a faixa em branco
     que acabamos de eliminar. O border-top já separa visualmente. */
  border-top:1px solid var(--rule);padding:18px 22px;flex:0 0 auto;
  font-size:12px;color:var(--ink-faint);text-align:center;
}