/* 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. */

/* Inter self-hosted (subset latin, cobre acentuação do português) — só dois
   pesos: 400 (regular) e 600 (semibold). Caminho relativo a esta pasta
   (assets/), onde este CSS e a subpasta fonts/ moram. */
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

:root{
  --ground:#f5f6f6;
  --surface:#ffffff;
  --ink:#161a1b;
  --ink-soft:#4c5658;
  --ink-faint:#5C6669;   /* antes #7b8688 — não passava no contraste AA em fundo branco */
  --rule:#e0e4e4;
  --rule-strong:#cfd5d5;
  --erro:#B32118;
  --erro-lavado:#FDEAE9;
  /* Verde de confirmação — só pra "isso deu certo" (email enviado, rascunho
     pronto, salvo). Deliberadamente mais vivo que o verde do módulo
     Comunicação (--mod #2E7D46 quando esse módulo está ativo), pra não virar
     "cor de área" — aqui é sempre estado, nunca localização no app. */
  --sucesso:#1E8E5A;
  --sucesso-lavado:#E7F7EE;

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

  /* Sombra única, discreta — usada nos blocos de conteúdo que não tinham
     nenhuma antes (funil, "precisam de você", cartões de ferramenta etc.).
     Não é card-heavy, é só profundidade sutil. */
  --sombra:0 6px 20px rgba(16,24,25,.07), 0 1px 3px rgba(16,24,25,.05);

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

/* <b>/<strong> sem peso próprio herdavam o "bold" padrão do navegador (700) —
   como só existem os arquivos de 400 e 600, isso forçava negrito sintético
   (borrado). Trava em 600 pra sempre usar o arquivo de verdade. */
b,strong{font-weight:600}

*{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(--corevento-escura, var(--mod-escura));text-decoration:none}
a:hover{text-decoration:underline}

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

.topbar{
  display:flex;align-items:center;gap:16px;
  padding:12px 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)}
/* Sem módulo selecionado nessas telas (login, avisos), então --chama não deve
   herdar var(--mod) — cairia no teal padrão do :root por acidente. Aqui a
   chama é sempre o vermelho de marca do Intellivent. */
.logo.grande{height:38px;margin:0 auto 18px;--chama:#FF0600}

/* 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:13px;font-weight:600;
  border-radius:20px;padding:5px 12px;
  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:8px;
  font-size:13px;font-weight:600;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(--corevento, 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:400;font-size:11px;display:block;
  line-height:1.2;letter-spacing:.05em;text-transform:uppercase;
}
.evsel .caret{color:var(--ink-faint);font-size:11px}

/* 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 12px;border-radius:5px;
  font-size:13px;color:var(--ink);
}
.evmenu a:hover{background:var(--corevento-lavada, var(--mod-lavada));text-decoration:none}
.evmenu a.sel{font-weight:600;color:var(--corevento-escura, var(--mod-escura));background:var(--corevento-lavada, 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 12px 4px;font-size:13px;color:var(--ink-faint)}

.who{
  width:32px;height:32px;border-radius:6px;background:var(--corevento, var(--mod));color:var(--corevento-texto, #fff);
  font-size:12px;font-weight:600;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:24px 16px;
}
.sideitem{
  display:flex;gap:10px;align-items:flex-start;
  padding:8px 10px;border-radius:6px;margin-bottom:2px;color:var(--ink);
}
a.sideitem:hover{background:var(--corevento-lavada, var(--mod-lavada));text-decoration:none}
.sideitem .dot{
  width:16px;height:16px;border-radius:4px;flex:0 0 auto;margin-top:2px;
  background:var(--corevento-lavada, var(--mod-lavada));border:1px solid var(--corevento-borda, var(--mod-borda));
}
.sideitem .txt{display:block;min-width:0}
.sideitem b{display:block;font-size:13px;font-weight:600;line-height:1.3}
.sideitem small{display:block;font-size:12px;color:var(--ink-faint);line-height:1.35;margin-top:2px}
.sideitem.sel{background:var(--corevento-lavada, var(--mod-lavada))}
.sideitem.sel b{color:var(--corevento-escura, var(--mod-escura))}
.sideitem.sel .dot{background:var(--corevento, var(--mod));border-color:var(--corevento, 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:8px 10px 8px 32px;background:#fff;
}
.sidebusca input:focus{outline:none;border-color:var(--corevento, var(--mod));box-shadow:0 0 0 3px var(--corevento-lavada, var(--mod-lavada))}
.sidebusca .ico{position:absolute;left:10px;top:8px;color:var(--ink-faint);font-size:15px;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:24px 28px 44px;background:#fff}

/* Colapsar a barra lateral — pedido do Rodrigo (2026-08-19) pra ganhar
   espaço de tela em telas densas (o quadro de agenda é o caso mais óbvio,
   mas vale em todo o Intellivent porque mora na casca única, cabecalho()).
   A faixa fina (.sidebar-toggle) é IRMÃ do <aside>, não filha — assim
   continua visível e clicável mesmo com a barra em largura zero, é o único
   jeito de reabrir. */
.sidebar-toggle{
  flex:0 0 auto;align-self:stretch;width:16px;
  border:none;border-right:1px solid var(--rule);background:#fbfcfc;
  color:var(--ink-faint);cursor:pointer;position:sticky;top:57px;
  display:flex;align-items:flex-start;justify-content:center;padding-top:16px;
  font-size:13px;line-height:1;
}
.sidebar-toggle:hover{background:var(--corevento-lavada, var(--mod-lavada));color:var(--corevento-escura, var(--mod-escura))}
.shell.sidebar-colapsada .sidebar{flex:0 0 0;width:0;min-width:0;overflow:hidden;visibility:hidden;border-right:none}

@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:16px;overflow-y:visible;height:auto}
  .sidebar-scroll nav{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
  .appbody{padding:20px 16px 40px}
  /* No mobile a barra já vira faixa horizontal empilhada — colapsar não faz
     sentido aqui (ganharia altura, não largura) e o layout nem é flex mais. */
  .sidebar-toggle{display:none}
  .shell.sidebar-colapsada .sidebar{width:auto;flex:none;overflow:visible;visibility:visible;border-right:none}
}

.secttl{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:32px 0 12px;
}
.dica{font-size:13px;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:13px;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:16px;max-width:720px;box-shadow:var(--sombra)}
.res{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #eef1f1;font-size:13px}
.res:last-child{border-bottom:none}
.res:hover{background:#fafbfb;text-decoration:none}
.res .cat{
  width:32px;height:32px;border-radius:50%;background:var(--corevento-lavada, var(--mod-lavada));
  display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;flex-shrink:0;
}
.res .co{font-weight:600;color:var(--ink)}
.res .contatonome{color:var(--ink-faint);font-size:13px}
.res .meta{color:var(--ink-faint);margin-left:auto;font-size:13px;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;background:var(--surface);border:1px solid var(--rule);
  border-radius:8px;padding:20px 24px;box-shadow:var(--sombra);
}
.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:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);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:600}
.funil-barra .bg{flex:1;height:8px;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:600;color:var(--corevento-escura, var(--mod-escura));width:24px;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:16px 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:24px;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:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule);
}
.pano-etapa small{font-weight:400;color:var(--ink-faint);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:12px;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:12px 16px;background:#fff;display:block;color:inherit;box-shadow:var(--sombra)}
.tool:hover{border-color:var(--corevento, var(--mod));text-decoration:none}
.tool .tn{font-size:13px;font-weight:600;margin:0 0 3px}
.tool .td{font-size:12px;color:var(--ink-faint);margin:0;line-height:1.4}
.tool .dot{width:24px;height:24px;border-radius:5px;display:block;margin-bottom:8px;background:var(--corevento-lavada, var(--mod-lavada));border:1px solid var(--corevento-borda, 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;box-shadow:var(--sombra)}
.needrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #eef1f1;font-size:13px;color:inherit}
.needrow:last-child{border-bottom:none}
.needrow:hover{background:#fafbfb;text-decoration:none}
.needrow .tag{font-size:11px;font-weight:600;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(--corevento-lavada, var(--mod-lavada));color:var(--corevento-escura, 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:600}
.needrow .meta{color:var(--ink-faint);margin-left:auto;font-size:13px;font-variant-numeric:tabular-nums}

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

.cohead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #e8ebeb}
/* padding maior que antes (10→16): com o recorte circular, uma logo
   quadrada que preenchesse a caixa toda teria os cantos cortados pelo
   círculo — 16px garante que a logo fique inteira dentro do miolo seguro. */
/* Sem fundo e sem recorte redondo (Rodrigo, 2026-08-16): logo de empresa quase
   sempre já vem em fundo branco e com respiro próprio, então o círculo pastel
   só encolhia a marca. O espaço que era padding virou tamanho. */
/* Abre a coluna da direita, acima de "No ClickUp". Altura livre em vez de caixa
   quadrada: logo de empresa costuma ser larga e baixa, e um quadro fixo
   reservava uma faixa vazia embaixo dela. */
.logoinst{display:block;width:auto;max-width:200px;height:auto;max-height:96px;object-fit:contain;margin:0 0 20px}
/* O ícone da categoria mora na linha da categoria, pequeno e colado nela — não
   mais grande antes do nome da instituição. */
.cohead .sub .cat-ico{font-size:11px;margin-right:5px}
.cohead h1{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0}
.cohead .sub{font-size:13px;color:var(--ink-faint);margin:3px 0 0}
.stagepill{margin-left:auto;font-size:13px;font-weight:600;color:var(--corevento-texto, #fff);background:var(--corevento, var(--mod));border-radius:20px;padding:6px 16px;white-space:nowrap}
/* Fundo cinza fixo aqui, então o texto volta a ser branco — a cor do evento
   não manda mais nesta pílula quando a negociação está fechada. */
.stagepill.fechada{background:#656f7d;color:#fff}
.statusform{margin-left:auto}
.statusform select{
  font-size:13px;font-weight:600;color:#fff;background:var(--corstatus, var(--corevento, var(--mod)));
  border:none;border-radius:20px;padding:6px 32px 6px 16px;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:24px;margin-top:18px}
@media (min-width:680px){.cogrid{grid-template-columns:1.15fr .85fr}}

.cktask{border:1px solid var(--rule);border-radius:6px;padding:12px 16px;box-shadow:var(--sombra)}
.cktitulo{font-size:13px;font-weight:600;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:12px;color:var(--ink-faint);white-space:nowrap}
.ckcampos dd{font-size:13px;color:var(--ink);margin:0;font-weight:600}

.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{
  font-family:var(--sans);font-size:13px;font-weight:600;border-radius:6px;
  padding:8px 16px;border:1px solid var(--corevento, var(--mod));background:var(--corevento, var(--mod));color:var(--corevento-texto, #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:11px;font-weight:600;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(--corevento, var(--mod));box-shadow:0 0 0 3px var(--corevento-lavada, var(--mod-lavada));
}

.defcontato{margin:10px 0 16px;font-size:13px}
.defcontato summary{cursor:pointer;color:var(--corevento-escura, var(--mod-escura));font-weight:600;list-style:none}
.defcontato summary::-webkit-details-marker{display:none}
.defcontato summary::before{content:"+ ";font-weight:600}
.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 16px;margin-bottom:8px;box-shadow:var(--sombra)}
.contact .cn{font-size:15px;font-weight:600;margin:0}
.contact .cc{font-size:13px;color:var(--ink-faint);margin:2px 0 0}

.lasestar{
  display:inline-block;font-size:11px;font-weight:600;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;box-shadow:var(--sombra)}
.cnh{padding:8px 16px;border-bottom:1px solid #eef1f1}
.cnh:last-child{border-bottom:none}
.cnh .cn{font-size:13px;font-weight:600;margin:0}
.cnh .cc{font-size:12px;color:var(--ink-faint);margin:1px 0 0}

.hist{border-left:2px solid var(--rule);padding-left:16px;margin-top:6px}
.hist .h{padding:0 0 16px;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(--corevento, var(--mod))}
.hist .yr{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.hist .ev{font-size:13px;font-weight:600;margin:1px 0 0}
.hist .out{font-size:13px;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:24px 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;box-shadow:var(--sombra)}
.proposta textarea{min-height:190px}

.painel-resumo{
  border:1px solid var(--rule);border-radius:8px;padding:20px 24px;background:#fbfcfc;
  position:sticky;top:80px;box-shadow:var(--sombra);
}
.pr-titulo{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);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:600}
.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:8px 0;border-bottom:1px solid #eef1f1;
}
.pr-cota b{font-size:13px;font-weight:600;flex:1;min-width:0}
.pr-valor{font-size:13px;font-weight:600;color:var(--corevento-escura, 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:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:var(--corevento-lavada, var(--mod-lavada));color:var(--corevento-escura, 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:13px;color:var(--ink-faint)}
.pr-total b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}

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

.proposta h2{font-size:17px;font-weight:600;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:13px;font-weight:600;margin:16px 0 6px;color:var(--ink-soft)}
.proposta .label-inline{margin:0;font-size:13px;font-weight:600;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:15px;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(--corevento, var(--mod));box-shadow:0 0 0 3px var(--corevento-lavada, var(--mod-lavada));
}

.proposta .grupo-evento{margin-bottom:18px}
.proposta .grupo-evento h3{
  font-size:12px;font-weight:600;color:var(--corevento-escura, 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:18px;height:18px;flex-shrink:0;margin:0;accent-color:var(--corevento, var(--mod));
}
.proposta .opcao-cota .label{flex:1;font-size:15px}
.proposta .opcao-cota .valor{font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
/* Cota já vendida (ex.: Master do WOC) — some no material oficial, o gerador
   não pode oferecer o que não existe mais pra vender. */
.proposta .opcao-esgotada{opacity:.55}
.proposta .opcao-esgotada .valor{text-decoration:line-through}
.proposta .tag-esgotada{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:10px;
  background:var(--erro-lavado);color:var(--erro);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;
}
.proposta .opcao-veterano{
  display:flex;align-items:center;gap:10px;padding:12px 0;margin-top:16px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}

.proposta .valor-tabela{
  background:var(--corevento-lavada, var(--mod-lavada));border:1px solid var(--corevento-borda, var(--mod-borda));border-radius:6px;
  padding:12px 16px;margin-top:6px;font-size:17px;font-weight:600;color:var(--corevento-escura, var(--mod-escura));
  font-variant-numeric:tabular-nums;
}
.proposta .resumo-item{border:1px solid var(--rule);border-radius:7px;padding:12px 16px;margin-bottom:10px}
.proposta .resumo-item .titulo{font-weight:600;font-size:13px;color:var(--corevento-escura, 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:13px;margin:6px 0 0;color:var(--ink-faint)}
.proposta .hint{font-size:12px;color:var(--ink-faint);margin:5px 0 0}
/* Estado de sucesso do texto de status (#envio-status): só pra "Email
   enviado" / "Rascunho pronto" — "Enviando…" e erro continuam no .hint
   neutro de cima. Negrito + ✓ pra não depender só da cor (contraste). */
.proposta .hint.sucesso{color:var(--sucesso);font-weight:600}
.proposta .hint.sucesso::before{content:"✓ ";font-weight:600}

.proposta .btn-row{display:flex;gap:10px;margin-top:24px}
.proposta .btn-row button,.proposta .btn-row a{
  flex:1;padding:12px;border-radius:6px;font-size:15px;font-weight:600;
  font-family:var(--sans);cursor:pointer;text-align:center;text-decoration:none;
}
/* var(--corevento, var(--mod)) — mesma prioridade do .btn genérico e das
   abas de modelo: a cor do EVENTO manda quando há um selecionado, a do
   módulo é só reserva. Estava fixo em --mod (só módulo); ficava
   inconsistente com o resto da tela assim que ela juntava as duas coisas
   (ex.: modelos-email.php, onde a aba ativa já segue o evento). */
.proposta .btn-primary{background:var(--corevento, var(--mod));color:var(--corevento-texto, #fff);border:1px solid var(--corevento, 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(--corevento, var(--mod));color:var(--corevento-escura, var(--mod-escura))}
.proposta .btn-primary:disabled,.proposta .btn-secondary:disabled{
  background:var(--rule);color:var(--ink-faint);border-color:var(--rule);cursor:not-allowed;filter:none;
}
.proposta .btn-primary:disabled:hover,.proposta .btn-secondary:disabled:hover{filter:none;border-color:var(--rule);color:var(--ink-faint)}

/* Arrastar-para-confirmar do "Enviar direto" — clique não basta de propósito,
   é a etapa que manda sem revisão, então pede um gesto mais deliberado.
   Fica lado a lado com "Abrir rascunho" no mesmo .btn-row, com o mesmo
   formato quadrado de bordas arredondadas dos botões (não pílula). */
.proposta .slider-confirmar{
  position:relative;height:44px;border-radius:6px;background:var(--rule);
  flex:1;overflow:hidden;user-select:none;-webkit-user-select:none;
}
.proposta .slider-confirmar.inativo{opacity:.5;pointer-events:none}
.proposta .slider-preenchido{position:absolute;inset:0 auto 0 0;width:44px;background:var(--erro-lavado)}
.proposta .slider-confirmar.confirmado .slider-preenchido{background:var(--erro)}
.proposta .slider-rotulo{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--ink-soft);pointer-events:none;
}
.proposta .slider-confirmar.confirmado .slider-rotulo{color:#fff}
.proposta .slider-alca{
  position:absolute;top:2px;left:2px;width:40px;height:40px;border-radius:4px;
  background:var(--erro);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:17px;cursor:grab;touch-action:none;transition:left .15s;
}
.proposta .slider-confirmar.arrastando .slider-alca{transition:none;cursor:grabbing}

/* Linha do tempo animada do "Enviar direto" */
.proposta .timeline-envio{display:flex;align-items:center;gap:6px;margin-top:16px}
.proposta .timeline-envio[hidden]{display:none}
.proposta .timeline-passo{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:11px;color:var(--ink-faint);opacity:.4;transition:opacity .25s;
}
.proposta .timeline-passo .timeline-icone{font-size:20px;filter:grayscale(1);transition:filter .25s}
.proposta .timeline-passo.ativo{opacity:1;color:var(--ink-soft);font-weight:600}
.proposta .timeline-passo.ativo .timeline-icone{filter:none;animation:proposta-pulso 1s ease-in-out infinite}
.proposta .timeline-passo.feito{opacity:1;color:var(--corevento-escura, var(--mod-escura))}
.proposta .timeline-passo.feito .timeline-icone{filter:none}
.proposta .timeline-linha{flex:1;height:2px;background:var(--rule)}
@keyframes proposta-pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

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

/* ------------------------------------------------- modelos-email.php */

.tabs-modelo{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;border-bottom:1px solid var(--rule);padding-bottom:12px}
.tab-modelo{
  font-size:13px;font-weight:600;color:var(--ink-soft);padding:8px 12px;border-radius:6px;
  text-decoration:none;
}
.tab-modelo:hover{background:var(--corevento-lavada, var(--mod-lavada));color:var(--corevento-escura, var(--mod-escura))}
.tab-modelo.sel{background:var(--corevento, var(--mod));color:var(--corevento-texto, #fff)}

.lista-modelos{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.modelo-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid var(--rule);border-radius:7px;padding:12px 16px;box-shadow:var(--sombra);
}
.modelo-info b{font-size:13px}
.tag-padrao{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:10px;
  background:var(--corevento-lavada, var(--mod-lavada));color:var(--corevento-escura, var(--mod-escura));font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}
.modelo-assunto{font-size:13px;color:var(--ink-faint);margin:4px 0 0}
.modelo-acoes{display:flex;gap:6px;flex-shrink:0}
.modelo-acoes form{display:inline}
.modelo-acoes .btn{font-size:13px;padding:7px 12px}
.btn.perigo{color:var(--erro);border-color:#F5C9C6}
.btn.perigo:hover{background:var(--erro-lavado)}

/* --------------------------------------------------------- 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:40px 32px;max-width:420px;width:100%;text-align:center;
  box-shadow:var(--sombra);
}
.cartao h1{font-size:20px;font-weight:600;margin:0 0 8px;letter-spacing:-.015em}
.cartao p{color:var(--ink-soft);font-size:15px;margin:0 0 18px}
.cartao .btn{width:100%;padding:12px 16px;font-size:15px}

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

/* Fundo de foto + curiosidade — só da tela de login.php (sorteados a cada
   carregamento, tipo tela de loading de jogo). pagina_simples() nunca
   imprime estas classes, então as telas de aviso ficam intocadas; e sem
   foto/curiosidade cadastrada (pastas/array vazios) o PHP não gera nem a
   div nem o parágrafo, então body.centrado continua liso como sempre foi. */
.login-fundo-foto{
  position:fixed;inset:0;z-index:-1;
  background-size:cover;background-position:center;
}
.login-fundo-foto::after{
  /* Escurece a foto de baixo pra cima, pro cartão branco (e a curiosidade,
     que mora perto do rodapé) continuarem legíveis em cima de qualquer
     imagem — mesmo cuidado com contraste do crachá do VIEX no fundo escuro. */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(18,20,24,.55) 0%, rgba(18,20,24,.78) 100%);
}
.login-curiosidade{
  position:fixed;left:0;right:0;bottom:20px;z-index:1;
  margin:0;padding:0 24px;text-align:center;
  color:#fff;font-size:13px;line-height:1.5;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}

/* Confirmação temporária de "isso foi salvo" — usada na tela da instituição
   depois de mudar status / registrar contato / salvar motivo. Some sozinha;
   não precisa ser notada por quem está procurando, só por quem está olhando
   a tela normalmente. */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  background:var(--sucesso);color:#fff;font-size:13px;font-weight:600;
  padding:10px 18px;border-radius:8px;box-shadow:0 12px 30px -14px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  z-index:50;
}
.toast::before{content:"✓ ";font-weight:600}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.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(--corevento-escura, var(--rule));padding:18px 24px;flex:0 0 auto;
  font-size:12px;color:var(--corevento-texto, #fff);text-align:center;
  background:var(--corevento, transparent);
}