/* =========================================================================
   CAMADA 1 · PLATAFORMA (escopo #app)
   ========================================================================= */
/* =========================================================================
   TOKENS · SISTEMA DE IDENTIDADE HV HUMAN VALUE
   -------------------------------------------------------------------------
   Duas cores fazem a marca: Grafite e Verde Petróleo. Os neutros são
   levemente quentes (Papel), para afastar a frieza tecnológica.
   Proporção de uso: 70% neutro · 22% grafite · 8% petróleo. O petróleo é
   destaque pontual (ações primárias, dados relevantes, o V do símbolo).

   Cor sempre plana: não existe gradiente, sombra nem brilho em lugar nenhum.
   A profundidade vem de contraste de tom e de linhas de 1px.

   --emp-cor* continua sendo a identidade da EMPRESA cliente: por padrão ela
   nasce com a cor da HV e é substituída quando a empresa personaliza a sua.
   ========================================================================= */
:root{
  /* ---- primárias da marca ---- */
  --grafite:#0E1416;          /* HEX #0E1416 · RGB 14 · 20 · 22   */
  --petroleo:#124A52;         /* HEX #124A52 · RGB 18 · 74 · 82   */
  --petroleo-fundo:#0B2E33;   /* apoio · fundos                    */
  --agua:#4EA9A2;             /* apoio · dark mode e destaques     */
  --pedra:#6E7679;            /* neutro · apoio                    */
  --papel:#F4F2EE;            /* neutro · fundo                    */

  /* ---- texto e superfícies ---- */
  --ink:#0E1416;              /* grafite */
  --ink-2:#5C6467;            /* pedra escurecida: legível em corpo de texto */
  --ink-3:#8B9295;            /* pedra clara: apoio e legendas */
  --paper:#F4F2EE;
  --card:#FFFFFF;             /* documento e cartão: branco puro */
  --line:#DEDAD2;             /* linha de 1px sobre papel */
  --line-2:#EDEAE4;           /* trilha de barras e divisórias suaves */
  --primary:#124A52;
  --primary-2:#0B2E33;
  --gold:#4EA9A2;             /* apelido histórico: hoje é o Verde Água */
  --gold-soft:#E4F0EE;

  /* identidade da empresa logada (padrao = identidade da HV) */
  --emp-cor:#124A52;
  --emp-cor-escura:#0B2E33;
  --emp-cor-apoio:#4EA9A2;
  --emp-cor-contraste:#ffffff;

  /* ---- estados ---- */
  --ok:#1F6B5E;
  --ok-soft:#E6F0EC;
  --alerta:#8A6A1F;
  --alerta-soft:#F5EEDD;
  --erro:#9B3B2F;
  --erro-soft:#F6E9E6;
  --info-soft:#E8EEEE;

  /* ---- forma ----
     Canto reto em toda a interface: é recorte de método, não canto vivo
     decorativo. Sem sombra e sem brilho. */
  --radius:0px;
  --shadow:none;
  --shadow-2:none;

  /* -----------------------------------------------------------------------
     TIPOGRAFIA: uma única família
     Schibsted Grotesk em três pesos: 700 para logotipo, display e títulos;
     500 para subtítulos, rótulos em caixa-alta, botões e cabeçalhos de
     tabela; 400 para texto corrido, legendas e dados. Sem itálico, sem
     versalete e sem nenhuma outra família na identidade.
     Os apelidos --serif / --sans apontam para a mesma origem: a hierarquia
     vem de peso, corpo e tracking.
     ----------------------------------------------------------------------- */
  --fonte-titulo:"Schibsted Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --fonte-texto:"Schibsted Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:var(--fonte-titulo);
  --sans:var(--fonte-texto);
  /* --fonte-empresa é definida em tempo de execução quando a empresa
     personaliza a própria fonte; vale só nas áreas marcadas .area-empresa
     e no módulo do teste que ela aplica. */
}

/* A escolha tipográfica da empresa fica restrita às áreas dela: painel,
   resultados, grupo, modais da empresa e o teste que o colaborador responde.
   A vitrine, o login e o painel do Administrador Geral seguem o padrão. */
#app .area-empresa{font-family:var(--fonte-empresa,var(--fonte-texto))}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100dvh;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
.view{display:none}
.view.active{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Botoes ---------- */
#app .btn{
  appearance:none;border:1px solid transparent;border-radius:0;font-family:inherit;text-decoration:none;
  font-size:14px;font-weight:700;padding:11px 22px;cursor:pointer;transition:.15s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;
}
#app .btn-primary{background:var(--ink);color:#fff}
#app .btn-primary:hover{background:var(--primary)}
#app .btn-marca{background:var(--emp-cor);color:var(--emp-cor-contraste)}
#app .btn-marca:hover{background:var(--emp-cor-escura)}
#app .btn-line{background:transparent;border-color:var(--ink);color:var(--ink)}
#app .btn-line:hover{background:var(--ink);color:#fff}
#app .btn-suave{background:var(--card);border-color:var(--line);color:var(--ink-2)}
#app .btn-suave:hover{border-color:var(--ink-3);color:var(--ink)}
#app .btn-gold{background:var(--gold);color:#0E1416}
#app .btn-gold:hover{background:#3E8E88}
#app .btn-ghost{background:none;border:none;color:var(--ink-2)}
#app .btn-ghost:hover{color:var(--ink)}
#app .btn-perigo{background:var(--card);border-color:#EBD3CE;color:var(--erro)}
#app .btn-perigo:hover{background:var(--erro-soft)}
#app .btn-block{width:100%}
#app .btn-sm{font-size:12.5px;padding:8px 14px;border-radius:0}
#app .btn[disabled]{opacity:.45;cursor:not-allowed}
#app .btn:focus-visible{outline:2px solid var(--emp-cor);outline-offset:2px}

/* =========================================================================
   MARCA HV: símbolo em coluna (H em cima, V embaixo, mesma prumada)
   Proporção 60:100, espessura única, intervalo fixo de 1x entre H e V.
   Sem gradiente, sem contorno, sem rotação: apenas duas cores chapadas.
   ========================================================================= */
#app .hv-marca{display:inline-flex;align-items:center;gap:14px;min-width:0}
#app .hv-simbolo{height:38px;width:auto;flex:0 0 auto;display:block}
#app .hv-h{fill:var(--grafite)}
#app .hv-v{fill:var(--petroleo)}
#app .hv-texto{
  display:flex;flex-direction:column;gap:2px;padding-left:14px;
  border-left:1px solid var(--line);line-height:1;
}
#app .hv-texto b{font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
#app .hv-texto span{font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
/* versão negativa: fundo escuro pede H branco e V em Verde Água */
#app .hv-negativa .hv-h{fill:#fff}
#app .hv-negativa .hv-v{fill:var(--agua)}
#app .hv-negativa .hv-texto{border-left-color:rgba(255,255,255,.28)}
#app .hv-negativa .hv-texto b{color:#fff}
#app .hv-negativa .hv-texto span{color:rgba(255,255,255,.66)}
/* monograma: só a coluna, sem assinatura */
#app .hv-marca.so-simbolo .hv-texto{display:none}

/* ---------- Nav ---------- */
#app .nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;background:rgba(246,243,238,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
#app .wordmark{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.02em}
#app .wordmark .dot{width:9px;height:9px;border-radius:0;background:var(--gold)}
#app .nav-links{display:flex;align-items:center;gap:34px}
#app .nav-links a{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-2)}
#app .nav-links a:hover{color:var(--ink)}

/* =========================================================================
   TEMA ESCURO DO APLICADOR
   -------------------------------------------------------------------------
   Vale apenas para a área da empresa. A vitrine, o acesso e o painel do
   Administrador Geral seguem o tema padrão, e o módulo do teste também: o
   colaborador que responde vê sempre a versão clara, com o mesmo gráfico e
   as mesmas cores de eixo de sempre.

   A classe entra na raiz enquanto houver empresa logada com o tema escuro
   escolhido, e sai no logout. Como o módulo do teste declara os próprios
   tokens no seu escopo, nada daqui o alcança.

   Mesma regra de forma do manual: canto reto, sem sombra e sem gradiente.
   A profundidade continua vindo das linhas de 1px.
   ========================================================================= */
html.tema-escuro #app{
  --paper:#10171A;            /* grafite aprofundado: fundo de tela */
  --card:#171F22;             /* superfície de painel, cartão e modal */
  --line:#2A3438;             /* linha de 1px sobre superfície escura */
  --line-2:#212A2D;           /* trilha de barras e divisórias suaves */

  --ink:#F0EDE7;              /* papel: texto principal */
  --ink-2:#AEB5B7;            /* corpo de texto secundário */
  --ink-3:#828B8E;            /* legendas e apoio */

  --primary:#4EA9A2;          /* o petróleo some no escuro: entra o verde água */
  --primary-2:#7CC4BE;
  --gold:#4EA9A2;
  --gold-soft:#14282A;

  --ok:#5FC0A6;      --ok-soft:#122621;
  --alerta:#D6B25E;  --alerta-soft:#2A2313;
  --erro:#E08672;    --erro-soft:#2B1A16;
  --info-soft:#16292C;
}
/* O body está acima de #app, então não enxerga os tokens do tema: a cor de
   fundo entra literal, no mesmo valor de --paper do bloco acima. */
html.tema-escuro body{background:#10171A;color:#F0EDE7}
html.tema-escuro #app .view{background:var(--paper);color:var(--ink);min-height:100dvh}

/* O véu do modal escurece mais, para o cartão continuar destacado. */
html.tema-escuro #app .overlay{background:rgba(4,8,9,.68)}

/* Campos e listas: o contorno é o que dá forma, então ele clareia um pouco. */
html.tema-escuro #app .field input,html.tema-escuro #app .field select,html.tema-escuro #app .field textarea,html.tema-escuro #app .filtro-campo input,html.tema-escuro #app .filtro-campo select,html.tema-escuro #app .chat-linha textarea{border-color:#33403F}
html.tema-escuro #app .field input::placeholder,html.tema-escuro #app .field textarea::placeholder,html.tema-escuro #app .chat-linha textarea::placeholder{color:var(--ink-3)}

/* O seletor nativo de data e de cor precisa do esquema declarado, senão o
   navegador desenha o calendário em claro dentro de um campo escuro. */
html.tema-escuro #app input[type=date],html.tema-escuro #app input[type=color],html.tema-escuro #app select{color-scheme:dark}

/* Linhas alternadas da tabela: no escuro o zebrado precisa clarear, não
   escurecer, para continuar perceptível. */
html.tema-escuro #app table.tabela-resultados tr:hover,html.tema-escuro #app table.adm tbody tr:hover{background:#1D262A}

/* A plaquinha branca atrás da logo da empresa continua branca: a maioria das
   marcas é desenhada para fundo claro e perderia legibilidade no escuro. */

/* Área do gráfico de grupo: o desenho do mapa é o mesmo, apenas a moldura
   acompanha o tema. As cores dos quadrantes e dos pontos não mudam. */
/* Superfície de segundo nível: cartão dentro de painel. Sem sombra, a
   separação vem de um tom acima do painel mais a linha de 1px. */
html.tema-escuro #app .teste-card,html.tema-escuro #app .acao-teste,html.tema-escuro #app .config-item,html.tema-escuro #app .chamado-item,html.tema-escuro #app .stat,html.tema-escuro #app .chat-corpo,html.tema-escuro #app .setor-card,html.tema-escuro #app .equipe-card,html.tema-escuro #app .dist-item,html.tema-escuro #app .lista-item,html.tema-escuro #app .membro-item,html.tema-escuro #app .opcao-pdf,html.tema-escuro #app .fonte-opt,html.tema-escuro #app .lista-testes-lib label{background:#1D262A}
html.tema-escuro #app .teste-card.em-preparo,html.tema-escuro #app .teste-card.bloqueado{background:#141B1E}

/* Situação da conta: os quatro estados ganham a versão escura. O sentido da
   cor é o mesmo, apenas o fundo e o texto trocam de lado. */
html.tema-escuro #app .sb-gratuito{background:#12261F;border-color:#24463A;color:#7ED3B8}
html.tema-escuro #app .sb-gratuito .sb-ic{background:#24463A;color:#7ED3B8}
html.tema-escuro #app .sb-liberado{background:#152A2D;border-color:#26494B;color:#7CC4BE}
html.tema-escuro #app .sb-liberado .sb-ic{background:#26494B;color:#7CC4BE}
html.tema-escuro #app .sb-aguardando{background:#2A2313;border-color:#4A3F1C;color:#E0BE66}
html.tema-escuro #app .sb-aguardando .sb-ic{background:#4A3F1C;color:#E0BE66}
html.tema-escuro #app .sb-bloqueado{background:#2B1A16;border-color:#4E2C24;color:#E89F8C}
html.tema-escuro #app .sb-bloqueado .sb-ic{background:#4E2C24;color:#E89F8C}

/* Selos de situação do chamado e das contas */
/* Leitura do grupo: mesmos três estados, com o par fundo e texto invertido. */
/* Botão não herda cor de texto do pai: os componentes montados sobre <button>
   precisam declarar a sua, senão no escuro ficam com o preto do navegador. */
#app .acao-teste,#app .config-item,#app .chamado-item,#app .fonte-opt,#app .opcao-pdf,#app .teste-card,#app .setor-card,#app .equipe-card,#app .lista-item,#app .membro-item,#app .lista-testes-lib label,#app .cor-opt,#app .valor-item{color:var(--ink)}

/* Legendas pequenas precisam de um tom acima no escuro para passar de 4.5:1 */
html.tema-escuro #app{--ink-3:#99A3A6}

/* Opção ativa do controle segmentado: no escuro precisa de um degrau maior
   em relação à trilha para se ler como selecionada. */
html.tema-escuro #app .seg{background:#0C1214}
html.tema-escuro #app .seg button.active{background:#27353A;color:var(--ink)}

/* A prévia mostra o que o colaborador enxerga ao responder, e ele sempre vê
   a versão padrão: por isso ela continua clara mesmo no tema escuro. */
html.tema-escuro #app .preview-marca{background:#FFFFFF;border-color:#DEDAD2}
html.tema-escuro #app .preview-marca .pm-body{color:#0E1416}
html.tema-escuro #app .preview-marca .pm-nota{color:#5C6467}

html.tema-escuro #app .leitura-diversificada{background:#12261F;border-color:#24463A;color:#7ED3B8}
html.tema-escuro #app .leitura-equilibrada{background:#152A2D;border-color:#26494B;color:#8FD3CD}
html.tema-escuro #app .leitura-concentrada{background:#2A2313;border-color:#4A3F1C;color:#E0BE66}
html.tema-escuro #app .leitura-neutra{background:#1D262A;border-color:var(--line);color:var(--ink-2)}

/* Selo de conta do administrador e avisos com moldura clara fixa */
html.tema-escuro #app .selo-reavaliar{border-color:#4A3F1C}

html.tema-escuro #app .ch-status.st-pendente{background:#4A3F1C;color:#E7C97A}
html.tema-escuro #app .ch-status.st-andamento{background:#26494B;color:#8FD3CD}
html.tema-escuro #app .ch-status.st-finalizado{background:#2A3438;color:var(--ink-2)}
html.tema-escuro #app .tag{background:#26494B;color:#8FD3CD}
html.tema-escuro #app .tag.off{background:#2A3438;color:var(--ink-2)}
html.tema-escuro #app .cat-status.on{background:#26494B;color:#8FD3CD}
html.tema-escuro #app .cat-status.off{background:#2A3438;color:var(--ink-2)}

html.tema-escuro #app .matriz-disc{background:var(--card)}
html.tema-escuro #app .cartao-ponto{border-color:var(--ink-2)}

/* Acento da empresa: uma cor de marca muito escura desaparece sobre fundo
   escuro. Nesse caso o JS calcula uma versão clareada e a expõe em
   --emp-cor-acento, usada aqui no lugar de --emp-cor. */
html.tema-escuro #app .acao-teste:hover:not(:disabled),html.tema-escuro #app .config-item:hover,html.tema-escuro #app .chamado-item:hover,html.tema-escuro #app .acao-teste.principal{border-color:var(--emp-cor-acento,var(--primary))}
html.tema-escuro #app .at-icone,html.tema-escuro #app .ci-icone,html.tema-escuro #app .mi-icone{color:var(--emp-cor-acento,var(--primary))}
html.tema-escuro #app .acao-teste:hover:not(:disabled) .at-seta,html.tema-escuro #app .msg-baixar{color:var(--emp-cor-acento,var(--primary))}
html.tema-escuro #app .msg-minha .msg-papel{border-color:var(--emp-cor-acento,var(--primary));color:var(--emp-cor-acento,var(--primary))}

/* ---------- Landing ---------- */
#app .hero{max-width:1080px;margin:0 auto;padding:100px 40px 70px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
#app .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);margin-bottom:22px}
#app .eyebrow::before{content:"";width:7px;height:7px;border-radius:0;background:var(--gold)}
#app .hero h1{font-family:var(--serif);font-size:clamp(30px,3.7vw,46px);line-height:1.14;letter-spacing:-.03em;margin:0 0 22px;font-weight:700}
#app .hero h1 i{color:var(--primary);font-style:normal;font-weight:700}
#app .hero p.lead{font-size:17px;color:var(--ink-2);max-width:480px;margin:0 0 32px}
#app .hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* Painel do hero: passos da plataforma.
   A previa de resultados do teste comportamental foi retirada desta tela
   (Fase 1, item 1). Os resultados seguem no Painel do Aplicador. */
/* Painel do hero: bloco chapado em Petróleo Profundo, com números da
   operação separados por linhas de 1px, sem sombra e sem gradiente. */
#app .hero-panel{background:var(--petroleo-fundo);color:#fff;border:none;border-radius:0;padding:34px 32px;display:flex;flex-direction:column;gap:0;min-height:100%}
#app .hero-panel .hp-marca{margin-bottom:26px}
#app .hero-panel .hp-frase{margin-top:auto;padding-top:34px;font-size:19px;font-weight:500;letter-spacing:-.02em}

/* Composicao abstrata do hero (item 20). Construida com a mesma malha de
   modulos da marca: linhas de 1px, blocos chapados e a descida do V.
   Nao ha numero, estatistica ou dado de operacao nesta area. */
#app .hp-composicao{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 0 10px;min-height:180px}
#app .hp-composicao svg{width:100%;max-width:300px;height:auto;display:block}
#app .hpc-grade path{stroke:rgba(255,255,255,.09);stroke-width:1;fill:none}
#app .hpc-modulos rect{fill:rgba(255,255,255,.15)}
#app .hpc-modulos rect.hpc-fraco{fill:rgba(255,255,255,.08)}
#app .hpc-modulos rect.hpc-destaque{fill:var(--agua)}
#app .hpc-modulos rect.hpc-apoio{fill:rgba(78,169,162,.42)}
#app .hpc-regua path{stroke:rgba(255,255,255,.28);stroke-width:1;fill:none}

/* Faixas de fundo entre os blocos do site (item 21). A transicao e tonal e
   discreta: Papel, branco e um lavado de Verde Agua. O texto permanece em
   Grafite em todas elas, preservando o contraste de leitura. */
#app .faixa{width:100%}
#app .faixa + .faixa{border-top:1px solid var(--line-2)}
#app .faixa-papel{background:var(--paper)}
#app .faixa-clara{background:var(--card)}
#app .faixa-tom{background:#EDF2F1}

#app .section{max-width:1080px;margin:0 auto;padding:70px 40px}
#app .section-head{max-width:560px;margin:0 0 40px}
#app .section-head-larga{max-width:720px}
#app .section-head p + p{margin-top:14px}
#app .section-head .eyebrow{margin-bottom:14px}
#app .section-head h2{font-family:var(--serif);font-size:clamp(25px,2.8vw,32px);font-weight:700;letter-spacing:-.02em;margin:0 0 12px}
#app .section-head p{color:var(--ink-2);font-size:15.5px;margin:0}
#app .about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
#app .about-card{padding:26px 0;border-top:1px solid var(--line)}
#app .about-card b{display:block;font-family:var(--serif);font-size:19px;font-weight:700;margin-bottom:8px}
#app .about-card p{font-size:14.5px;color:var(--ink-2);margin:0}
#app .about-card .pilar-num{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gold);margin-bottom:10px;font-variant-numeric:tabular-nums}

/* Missao, Visao e Valores (itens 25 a 28) */
#app .mvv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
#app .mvv-card{padding:30px 28px 30px 0;border-right:1px solid var(--line)}
#app .mvv-card:last-child{border-right:none;padding-right:0}
#app .mvv-card:not(:first-child){padding-left:28px}
#app .mvv-rot{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin-bottom:12px}
#app .mvv-card p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.6}
/* Valores em grade, não em lista: seis células leves, separadas por linhas
   de 1px, sem marcador que possa ser lido como travessão (item 28). */
#app .bloco-valores{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
#app .grade-valores{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
#app .valor-item{
  display:flex;align-items:baseline;gap:12px;
  background:#EDF2F1;padding:18px 20px;
}
#app .valor-item .vi-num{
  font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gold);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
#app .valor-item b{font-size:15.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em}

#app .catalog{display:flex;flex-direction:column;border-top:1px solid var(--line)}
#app .cat-item{display:grid;grid-template-columns:70px 1.4fr 1fr 140px;gap:24px;align-items:center;padding:26px 4px;border-bottom:1px solid var(--line);transition:.15s ease}
#app .cat-item:hover{background:var(--card)}
#app .cat-num{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
#app .cat-title{font-family:var(--serif);font-size:20px;font-weight:700}
#app .cat-title span{display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-2);margin-top:4px}
#app .cat-desc{font-size:13.5px;color:var(--ink-2)}
#app .cat-status{justify-self:end;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:0}
#app .cat-status.on{background:var(--ok-soft);color:var(--ok)}
#app .cat-status.off{background:var(--line);color:var(--ink-2)}

#app .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
#app .contact-grid p{color:var(--ink-2);font-size:15px}
#app .contato-dados{display:flex;flex-direction:column}
#app .linha-contato{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-top:1px solid var(--line)}
#app .linha-contato:first-child{border-top:none;padding-top:0}
#app .linha-contato span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
#app .linha-contato b{font-size:15px;font-weight:500;color:var(--ink);word-break:break-word;text-align:right}
#app footer{border-top:1px solid var(--line);padding:26px 40px;display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:1080px;margin:0 auto;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
#app .foot-right{display:flex;align-items:center;gap:14px}
/* Acesso discreto do Administrador Geral (item 7) */
#app .btn-dev{
  background:none;border:1px solid var(--line);color:var(--ink-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  padding:3px 7px;border-radius:0;cursor:pointer;line-height:1.4;opacity:.65;transition:.15s ease;
}
#app .btn-dev:hover{opacity:1;color:var(--ink-2);border-color:var(--ink-3)}

/* ---------- Auth ---------- */
#app .auth-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:40px 18px}
#app .auth-shell{display:flex;align-items:flex-start;justify-content:center;gap:20px;width:100%;max-width:800px}
#app .auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:0;padding:40px;flex:0 0 auto}
#app .auth-marca{display:flex;margin-bottom:20px}
#app .auth-back{font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:26px;background:none;border:none;cursor:pointer;padding:0;font-family:inherit}
#app .auth-back:hover{color:var(--ink)}
#app .auth-head{font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
#app .auth-sub{font-size:14px;color:var(--ink-2);margin:0 0 26px}
#app .seg{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:0;padding:3px;margin-bottom:26px}
#app .seg button{flex:1;background:none;border:none;padding:9px 10px;font-size:13px;font-weight:700;color:var(--ink-2);border-radius:0;cursor:pointer}
#app .seg button.active{background:var(--card);color:var(--ink);box-shadow:none}
/* dentro de um campo, a dica logo abaixo assume o espaçamento */
#app .field .seg{margin-bottom:6px}
#app .field{margin-bottom:16px;text-align:left}
#app .field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}
#app .field label .opt-tag{text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink-3)}
#app .field input,#app .field select,#app .field textarea{
  width:100%;font-size:14.5px;font-family:inherit;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:0;color:var(--ink);background:var(--card);
}
#app .field input:focus,#app .field select:focus,#app .field textarea:focus{outline:none;border-color:var(--emp-cor)}
#app .field input.invalido,#app .field select.invalido{border-color:var(--erro);background:#FDF6F5}
#app .field input.valido,#app .field select.valido{border-color:#BBD3CE}
#app .field .dica{display:block;font-size:12px;color:var(--ink-3);margin-top:5px;text-transform:none;letter-spacing:0;font-weight:500}
#app .field .dica.ruim{color:var(--erro)}
#app .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#app .err{font-size:13px;color:var(--erro);margin:-6px 0 14px;display:none;background:var(--erro-soft);border-radius:0;padding:9px 11px}
#app .err.show{display:block}
#app .auth-alt{margin-top:18px;text-align:center;font-size:13px;color:var(--ink-2)}
#app .auth-alt button{background:none;border:none;color:var(--primary);font-weight:700;cursor:pointer;font-family:inherit;font-size:13px;padding:0}

/* Painel de requisitos da senha (item 6), lateral direita no desktop */
#app .pw-panel{
  flex:1 1 260px;max-width:280px;background:var(--card);border:1px solid var(--line);
  border-radius:0;padding:20px 22px;
  opacity:0;transform:translateX(-8px);pointer-events:none;transition:.2s ease;
  position:sticky;top:40px;
}
#app .pw-panel.show{opacity:1;transform:none;pointer-events:auto}
#app .pw-panel h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:0 0 4px}
#app .pw-panel .pw-sub{font-size:12.5px;color:var(--ink-3);margin:0 0 14px}
#app .req{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);padding:5px 0}
#app .req i{
  flex:0 0 auto;width:18px;height:18px;border-radius:0;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-style:normal;padding:3px;color:transparent;
  transition:.15s ease;
}
#app .req.ok{color:var(--ok);font-weight:600}
#app .req.ok i{background:var(--ok);border-color:var(--ok);color:#fff}
#app .pw-forca{height:5px;border-radius:0;background:var(--line-2);margin:14px 0 6px;overflow:hidden}
#app .pw-forca > i{display:block;height:100%;width:0;background:var(--erro);border-radius:0;transition:.25s ease}
#app .pw-forca-txt{font-size:12px;color:var(--ink-3)}

/* ---------- Topo das areas logadas ---------- */
#app .dash-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 32px;
  background:var(--emp-cor);color:var(--emp-cor-contraste);position:sticky;top:0;z-index:30;
}
#app .dash-brand{display:flex;align-items:center;gap:14px;min-width:0}
/* Logo da empresa no canto superior esquerdo, maior e sem distorcao (item 14) */
#app .dash-brand .logo-empresa{
  height:46px;width:auto;max-width:190px;object-fit:contain;
  background:#fff;border-radius:0;padding:5px 8px;flex:0 0 auto;
}
#app .dash-brand .logo-fallback{
  height:46px;width:46px;border-radius:0;background:var(--emp-cor-apoio);color:#0E1416;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:20px;flex:0 0 auto;
}
#app .dash-brand .bt{min-width:0}
#app .dash-brand b{font-size:15.5px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
#app .dash-brand span{display:block;font-size:11px;opacity:.78;text-transform:uppercase;letter-spacing:.05em}

/* Menu suspenso da area da empresa (item 12) */
#app .menu-wrap{position:relative;flex:0 0 auto}
#app .menu-btn{
  display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.36);color:inherit;border-radius:0;
  padding:8px 12px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;
}
#app .menu-btn:hover{background:rgba(255,255,255,.15)}
#app .menu-btn .chev{transition:.15s ease;font-size:10px}
#app .menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
#app .menu-drop{
  position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--card);
  border:1px solid var(--line);border-radius:0;padding:7px;
  display:none;z-index:50;
}
#app .menu-drop.show{display:block}
#app .menu-drop .mtitulo{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:8px 11px 6px;font-weight:700}
#app .menu-drop button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;
  font-family:inherit;font-size:14px;color:var(--ink);padding:10px 11px;border-radius:0;cursor:pointer;
}
#app .menu-drop button:hover{background:var(--paper)}
#app .menu-drop button.sair{color:var(--erro)}
#app .menu-drop hr{border:none;border-top:1px solid var(--line-2);margin:6px 4px}

#app .dash-body{max-width:1060px;margin:0 auto;padding:36px 32px 60px}
#app .dash-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px;flex-wrap:wrap;gap:10px}
#app .dash-head h2{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:-.02em;margin:0}
#app .dash-head p{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
#app .panel{background:var(--card);border:1px solid var(--line);border-radius:0;padding:24px;margin-bottom:20px}
#app .panel > h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin:0 0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#app .empty-state{text-align:center;padding:36px 20px;color:var(--ink-2)}
#app .empty-state b{display:block;font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:6px;font-weight:700}
#app .empty-state p{font-size:14px;margin:0}

/* ---------- Banner de status da conta (item 11) ---------- */
#app .status-banner{
  display:flex;align-items:flex-start;gap:14px;border-radius:0;padding:18px 20px;margin-bottom:20px;
  border:1px solid transparent;
}
#app .status-banner .sb-ic{flex:0 0 auto;width:34px;height:34px;border-radius:0;display:flex;align-items:center;justify-content:center;padding:8px}
#app .status-banner b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
#app .status-banner p{margin:0;font-size:14.5px}
#app .status-banner .sb-extra{font-size:13px;opacity:.85;margin-top:4px}
#app .sb-gratuito{background:var(--ok-soft);border-color:#D5E5E0;color:#17564C}
#app .sb-gratuito .sb-ic{background:#D5E5E0}
#app .sb-liberado{background:var(--info-soft);border-color:#CBDCDA;color:#1B2226}
#app .sb-liberado .sb-ic{background:#CBDCDA}
#app .sb-aguardando{background:var(--alerta-soft);border-color:#E8DDC0;color:#6B520F}
#app .sb-aguardando .sb-ic{background:#E8DDC0}
#app .sb-bloqueado{background:var(--erro-soft);border-color:#EBD3CE;color:#7E3025}
#app .sb-bloqueado .sb-ic{background:#EBD3CE}

/* ---------- Indicadores ---------- */
#app .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
#app .stat{background:var(--card);border:1px solid var(--line);border-radius:0;padding:18px 20px}
#app .stat span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:700;margin-bottom:6px}
#app .stat b{font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.02em;display:block}
#app .stat i{font-style:normal;font-size:12.5px;color:var(--ink-3)}

/* ---------- Cartoes de teste ---------- */
#app .teste-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
#app .teste-card{border:1px solid var(--line);border-radius:0;padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--card)}
#app .teste-card .tc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#app .teste-card b{font-family:var(--serif);font-size:19px;font-weight:700}
#app .teste-card p{margin:0;font-size:13.5px;color:var(--ink-2)}
#app .teste-card .tc-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
/* Teste que o Administrador não liberou para esta empresa */
#app .teste-card.bloqueado{opacity:.72;background:var(--paper)}
#app .teste-card .tc-top .tag{margin-top:4px}
#app .tag{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:0;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
#app .tag.off{background:var(--line);color:var(--ink-2)}

/* ---------- Tabela do Administrador Geral ---------- */
/* o painel do administrador precisa de mais largura que as demais telas */
#app #view-admin .dash-body{max-width:1240px}
#app .tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
#app table.adm{width:100%;border-collapse:collapse;font-size:13.5px;min-width:1020px}
#app table.adm td:first-child{min-width:190px}
#app table.adm td:last-child{width:1%}
#app table.adm th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);
  font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
#app table.adm td{padding:13px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
#app table.adm tr:hover td{background:var(--paper)}
#app table.adm td b{display:block;font-size:14px}
#app table.adm td small{display:block;color:var(--ink-2);font-size:12px}
/* Contas de empresa: cinco colunas com largura fixa cabem na tela do
   computador, o que dispensa a rolagem horizontal. Em telas pequenas a
   rolagem volta a existir para não espremer o conteúdo. */
#app .tabela-admin-wrap{overflow-x:visible;margin:0;padding:0}
#app table.adm.tabela-admin{min-width:0;table-layout:fixed}
#app table.adm.tabela-admin th:nth-child(1),#app table.adm.tabela-admin td:nth-child(1){width:32%;min-width:0}
#app table.adm.tabela-admin th:nth-child(2),#app table.adm.tabela-admin td:nth-child(2){width:11%}
#app table.adm.tabela-admin th:nth-child(3),#app table.adm.tabela-admin td:nth-child(3){width:23%}
#app table.adm.tabela-admin th:nth-child(4),#app table.adm.tabela-admin td:nth-child(4){width:19%}
#app table.adm.tabela-admin th:nth-child(5),#app table.adm.tabela-admin td:nth-child(5){width:15%}
#app table.adm.tabela-admin td{word-break:break-word}
#app table.adm.tabela-admin .acoes-col{min-width:0}

/* Testes liberados: um selo por teste, dentro da própria coluna */
#app .chips-testes{display:flex;flex-wrap:wrap;gap:5px}
#app .chip-teste{
  font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:0;
  background:var(--info-soft);color:var(--primary);white-space:nowrap;
}
#app .chip-teste.todos{background:var(--ok-soft);color:var(--ok)}
#app .chip-teste.nenhum{background:var(--line);color:var(--ink-2)}

/* Seleção de testes na liberação de acesso */
#app .lista-testes-lib{display:flex;flex-direction:column;gap:8px;margin-top:2px}
#app .lista-testes-lib label{
  display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:0;
  padding:11px 13px;cursor:pointer;transition:.15s ease;background:var(--card);
}
#app .lista-testes-lib label:hover{border-color:var(--ink-3)}
#app .lista-testes-lib label.marcado{border-color:var(--primary);background:var(--info-soft)}
#app .lista-testes-lib input{margin-top:2px;accent-color:var(--primary);width:16px;height:16px;cursor:pointer}
#app .lista-testes-lib b{display:block;font-size:14px;font-weight:700}
#app .lista-testes-lib span{display:block;font-size:12.5px;color:var(--ink-2)}

#app .acoes-col{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:132px}
#app .acoes-col .btn{white-space:nowrap}
#app .badge-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:0;white-space:nowrap}
#app .badge-status::before{content:"";width:7px;height:7px;border-radius:0;background:currentColor}
#app .bs-gratuito{background:var(--ok-soft);color:var(--ok)}
#app .bs-liberada{background:var(--info-soft);color:var(--primary)}
#app .bs-aguardando{background:var(--alerta-soft);color:var(--alerta)}
#app .bs-bloqueada{background:var(--erro-soft);color:var(--erro)}
#app .filtros{display:flex;gap:8px;flex-wrap:wrap}
#app .filtro{background:var(--card);border:1px solid var(--line);color:var(--ink-2);font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:0;cursor:pointer}
#app .filtro.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- Overlays / modais ---------- */
#app .overlay{position:fixed;inset:0;background:rgba(14,20,22,.55);display:none;align-items:center;justify-content:center;z-index:80;padding:20px;overflow-y:auto}
#app .overlay.show{display:flex}
#app .modal{background:var(--card);border:1px solid var(--line);border-radius:0;max-width:460px;width:100%;padding:30px;box-shadow:none;margin:auto}
#app .modal-lg{max-width:620px}
#app .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
#app .modal-head h3{font-family:var(--serif);font-size:21px;font-weight:700;margin:0 0 4px}
#app .modal-head p{font-size:13.5px;color:var(--ink-2);margin:0}
#app .modal-x{background:none;border:none;font-size:20px;line-height:1;color:var(--ink-3);cursor:pointer;padding:2px 6px;border-radius:0}
#app .modal-x:hover{background:var(--paper);color:var(--ink)}
#app .modal-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
#app .modal-acoes .btn{flex:0 0 auto}
#app .modal.centro{text-align:center}
#app .modal.centro .modal-acoes{justify-content:center}
#app .modal.centro .btn{width:100%}

/* Upload da logo: icone em SVG (o emoji anterior quebrava o alinhamento) */
#app .upload-zone{
  display:block;border:1.5px dashed var(--line);border-radius:0;padding:24px 16px;margin-bottom:16px;
  cursor:pointer;transition:.15s ease;text-align:center;background:var(--card);
}
#app .upload-zone:hover,#app .upload-zone.dragover{border-color:var(--emp-cor);background:var(--paper)}
#app .upload-zone .uz-icon{
  width:44px;height:44px;margin:0 auto 10px;border-radius:0;background:var(--info-soft);
  display:flex;align-items:center;justify-content:center;color:var(--primary);
}
#app .upload-zone .uz-icon svg{width:22px;height:22px;display:block}
#app .upload-zone .uz-preview{max-height:96px;width:auto;margin:0 auto 10px;object-fit:contain;display:none}
#app .upload-zone.tem-arquivo .uz-icon{display:none}
#app .upload-zone.tem-arquivo .uz-preview{display:block}
#app .upload-zone .uz-txt{display:block;font-size:13.5px;color:var(--ink-2);font-weight:600;word-break:break-word}
#app .upload-zone .uz-sub{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
#app .swatches{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:18px}
#app .swatches .sw-label{font-size:12px;color:var(--ink-2)}
#app .swatch{width:32px;height:32px;border-radius:0;border:1px solid var(--line)}

/* Cor principal + tipografia (item 16) */
#app .cores-grid{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
#app .cor-opt{width:34px;height:34px;border-radius:0;border:1px solid var(--line);cursor:pointer;padding:0}
#app .cor-opt.active{outline:2px solid var(--ink);outline-offset:2px}
#app .cor-custom{display:flex;align-items:center;gap:10px;margin-top:10px}
#app .cor-custom input[type=color]{width:46px;height:38px;padding:2px;border:1.5px solid var(--line);border-radius:0;background:#fff;cursor:pointer}
#app .fonte-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#app .fonte-opt{
  border:1.5px solid var(--line);border-radius:0;padding:14px 12px;background:var(--card);cursor:pointer;
  text-align:left;font-family:inherit;transition:.15s ease;
}
#app .fonte-opt:hover{border-color:var(--ink-3)}
#app .fonte-opt.active{border-color:var(--emp-cor);background:var(--info-soft)}
#app .fonte-opt b{display:block;font-size:16px;margin-bottom:2px}
#app .fonte-opt span{font-size:12px;color:var(--ink-2)}
#app .contraste-aviso{font-size:12.5px;color:var(--alerta);margin-top:8px;display:none}
#app .contraste-aviso.show{display:block}
#app .preview-marca{
  margin-top:16px;border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--card);
}
#app .preview-marca .pm-top{background:var(--emp-cor);color:var(--emp-cor-contraste);padding:12px 16px;font-size:13.5px;font-weight:700}
#app .preview-marca .pm-body{padding:14px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#app .preview-marca .pm-nota{font-size:13px;color:var(--ink-2)}

#app .linha-info{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line-2);font-size:14px}
#app .linha-info:first-of-type{border-top:none}
#app .linha-info span{color:var(--ink-2)}
#app .linha-info b{text-align:right}

/* ---------- Toast (item 20) ---------- */
#app .toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:9px;align-items:center;width:calc(100% - 32px);max-width:420px;pointer-events:none}
#app .toast{
  background:var(--ink);color:#fff;border-radius:0;padding:13px 18px;font-size:14px;font-weight:600;
  border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;gap:10px;width:100%;
  animation:toastIn .22s ease;
}
#app .toast.ok{background:#17564C}
#app .toast.erro{background:#7E3025}
#app .toast.aviso{background:#6B520F}
#app .toast i{font-style:normal;flex:0 0 auto;width:16px;height:16px;display:inline-flex}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Barra de retorno do modulo de teste ---------- */
.modulo-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 20px;background:var(--emp-cor);color:var(--emp-cor-contraste);
  position:sticky;top:0;z-index:30;font-size:13.5px;
}
.modulo-bar .mb-txt{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modulo-bar button{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);color:inherit;
  border-radius:0;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;flex:0 0 auto;
}
.modulo-bar button:hover{background:rgba(255,255,255,.28)}

/* =========================================================================
   RESPONSIVIDADE (item 19)
   ========================================================================= */
@media (max-width:1020px){
  #app .auth-shell{flex-direction:column;align-items:center}
  #app .pw-panel{position:static;max-width:440px;width:100%;transform:translateY(-6px)}
  #app .pw-panel.show{transform:none}
}
@media (max-width:900px){
  #app .grade-valores{grid-template-columns:repeat(2,1fr)}
  #app .stat-grid{grid-template-columns:1fr 1fr}
  #app .dash-body{padding:28px 20px 50px}
  #app .dash-top{padding:12px 18px}
  #app .dash-brand b{max-width:38vw}
}
@media (max-width:860px){
  #app .hero{grid-template-columns:1fr;padding:70px 20px 50px;gap:36px}
  #app .about-grid{grid-template-columns:1fr}
  #app .cat-item{grid-template-columns:40px 1fr;row-gap:6px;padding:20px 4px}
  #app .cat-desc{grid-column:2/3}
  #app .cat-status{grid-column:2/3;justify-self:start}
  #app .contact-grid{grid-template-columns:1fr}
  #app .mvv-grid{grid-template-columns:1fr}
  #app .grade-valores{grid-template-columns:1fr}
  #app .mvv-card{border-right:none;border-bottom:1px solid var(--line);padding:24px 0}
  #app .mvv-card:not(:first-child){padding-left:0}
  #app .mvv-card:last-child{border-bottom:none}
  #app .hp-composicao{min-height:150px}
  #app .nav{padding:14px 18px}
  #app .nav-links{gap:18px}
  #app .nav-links a:not(.btn){display:none}
  #app .section{padding:50px 20px}
  #app footer{padding:22px 20px}
  #app .fonte-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  /* barra de topo das areas logadas: os botoes precisam caber numa linha só */
  #app .topo-acoes{gap:6px;flex-wrap:nowrap}
  #app .topo-acoes .menu-btn{padding:7px 9px;font-size:11.5px;white-space:nowrap}
  #app .dash-brand{gap:9px;min-width:0;flex:1 1 auto}
  #app .dash-brand b{max-width:26vw}

  #app .auth-card{padding:28px 22px;border-radius:0}
  #app .auth-wrap{padding:24px 14px}
  #app .field-row{grid-template-columns:1fr}
  #app .stat-grid{grid-template-columns:1fr}
  #app .dash-brand .logo-empresa{height:38px;max-width:130px}
  #app .dash-brand .logo-fallback{height:38px;width:38px;font-size:17px}
  #app .dash-brand span{display:none}
  #app .menu-btn .menu-nome{display:none}
  #app .modal{padding:24px 20px;border-radius:0}
  #app .modal-acoes{flex-direction:column-reverse}
  #app .modal-acoes .btn{width:100%}
  #app .panel{padding:20px 18px}
  #app .dash-head h2{font-size:22px}
  #app .hero h1{font-size:32px}
  #app .teste-card .tc-acoes .btn{flex:1 1 100%}
}

/* =========================================================================
   FASE 2 · PAINEL DO APLICADOR
   Tela de Resultados dos Testes, convites, QR Code e menus de ação.
   ========================================================================= */
#app .dash-largo{max-width:1240px}
#app .topo-acoes{display:flex;gap:8px;flex-wrap:wrap}
#app .head-acoes{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Filtros ---------- */
#app .filtros-panel{padding:18px 20px}
/* No Administrador os filtros ficam sempre atrás de um único botão
   "Filtros": a tela nasce limpa e os critérios aparecem quando pedidos.
   O resumo do recorte continua visível mesmo com o painel fechado. */
#app #admin-filtros-panel .btn-toggle-filtros{display:flex}
#app #admin-filtros-panel.recolhido .filtros-linha{display:none}
#app #admin-filtros-panel:not(.recolhido) .filtros-linha{margin-top:14px}
#app #admin-filtros-panel .filtros-info{margin-top:10px}
/* No celular os filtros ficam recolhidos para a tabela aparecer primeiro. */
#app .btn-toggle-filtros{
  display:none;width:100%;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:none;font-family:inherit;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);cursor:pointer;padding:2px 0;
}
#app .btn-toggle-filtros .chev{transition:.15s ease;font-size:10px}
#app .btn-toggle-filtros[aria-expanded="true"] .chev{transform:rotate(180deg)}
#app .filtros-linha{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
#app .filtro-campo{display:flex;flex-direction:column;gap:5px;min-width:150px}
#app .filtro-campo.cresce{flex:1 1 220px;min-width:200px}
#app .filtro-campo label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
#app .filtro-campo input,#app .filtro-campo select{
  font-family:inherit;font-size:13.5px;padding:9px 11px;border:1.5px solid var(--line);
  border-radius:0;background:var(--card);color:var(--ink);width:100%;
}
#app .filtro-campo input:focus,#app .filtro-campo select:focus{outline:none;border-color:var(--emp-cor)}
#app .filtro-limpar{min-width:auto;justify-content:flex-end;margin-left:auto}
#app .filtros-info{margin:12px 0 0;font-size:13px;color:var(--ink-2)}

/* ---------- Tabela de resultados ---------- */
#app table.tabela-resultados{min-width:940px}
#app table.tabela-resultados td:first-child{min-width:170px}
#app table.tabela-resultados td:nth-child(3){max-width:210px}
#app table.tabela-resultados td:nth-child(3) small{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#app table.tabela-resultados td:nth-child(4){white-space:nowrap}
#app table.tabela-resultados td:nth-child(4) small{white-space:nowrap}
#app table.tabela-resultados td:last-child{width:1%}
#app .perfil-tag{
  display:inline-block;font-family:var(--serif);font-size:15px;font-weight:700;
  background:var(--info-soft);color:var(--primary);border-radius:0;padding:3px 9px;
}
#app .sem-dado{color:var(--ink-3)}
#app .selo-reavaliar{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--alerta-soft);color:var(--alerta);border:1px solid #E8DDC0;
  border-radius:0;padding:2px 8px;margin-top:3px;
}
#app .bs-pendente{background:var(--info-soft);color:var(--primary)}
#app .bs-respondido{background:var(--ok-soft);color:var(--ok)}
#app .bs-expirado{background:var(--alerta-soft);color:var(--alerta)}
#app .bs-cancelado{background:var(--erro-soft);color:var(--erro)}
#app .badge-clicavel{border:none;cursor:pointer;font-family:inherit}
#app .badge-clicavel:hover{filter:brightness(.94)}
#app .acoes-linha{flex-direction:row;align-items:center;justify-content:flex-end;min-width:auto;gap:6px}

/* menu discreto de ações por linha */
#app .menu-linha{position:relative}
#app .btn-mais{padding:7px 11px;font-size:15px;line-height:1}
#app .menu-acoes{right:0;top:calc(100% + 6px);min-width:198px}
#app .menu-acoes button{font-size:13.5px;padding:9px 11px}

/* ---------- Paginação ---------- */
#app .paginacao{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
#app .pag-numeros{display:flex;gap:5px;align-items:center}
#app .pag-num{
  min-width:32px;height:32px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  border-radius:0;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
}
#app .pag-num:hover{border-color:var(--ink-3);color:var(--ink)}
#app .pag-num.active{background:var(--emp-cor);border-color:var(--emp-cor);color:var(--emp-cor-contraste)}
#app .pag-reticencias{color:var(--ink-3);padding:0 2px}
#app .pag-info{margin-left:auto;font-size:13px;color:var(--ink-2)}

/* ---------- Convites ---------- */
#app .modal-xl{max-width:760px}
#app .sem-nome-aviso{background:var(--info-soft);border-radius:0;padding:11px 13px;color:var(--primary)}
#app .aviso-reteste{
  background:var(--alerta-soft);border:1px solid #E8DDC0;color:#6B520F;
  border-radius:0;padding:12px 14px;font-size:13.5px;margin-bottom:14px;
}
#app .convite-ok{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
#app .conv-qr{flex:0 0 auto;border:1px solid var(--line);border-radius:0;padding:8px;background:#fff;line-height:0}
#app .conv-qr svg{display:block}
#app .conv-info{flex:1 1 260px;min-width:240px}
#app .conv-info > b{font-family:var(--serif);font-size:19px;font-weight:700;display:block}
#app .conv-info p{font-size:13.5px;color:var(--ink-2);margin:2px 0 12px}
#app .campo-link input{
  width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink-2);
}
#app .conv-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#app .cel-link input{width:220px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;padding:7px 9px;border:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink-2)}
#app table.tabela-lote{min-width:640px}

/* ---------- Detalhes do convite ---------- */
#app .det-topo{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
#app .det-panel{margin:0 0 16px;background:var(--paper);padding:18px 20px}
#app .det-panel h3{margin-bottom:12px}
#app .det-link-box{margin-bottom:16px}
#app .det-link-box label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin-bottom:6px}
#app .det-qr{margin-top:12px;display:inline-block}
#app .det-acoes{justify-content:flex-start}
#app .historico{display:flex;flex-direction:column;gap:10px}
#app .hist-item{border-left:3px solid var(--line);padding-left:12px}
#app .hist-item b{display:block;font-size:13.5px}
#app .hist-item span{display:block;font-size:13px;color:var(--ink-2)}
#app .hist-item i{font-style:normal;font-size:12px;color:var(--ink-3)}

/* ---------- QR Code ---------- */
#app .qr-caixa{display:flex;justify-content:center;padding:14px;background:#fff;border:1px solid var(--line);border-radius:0;margin-bottom:14px}
#app .qr-caixa svg{display:block;width:240px;height:240px}
#app .qr-link{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--ink-3);word-break:break-all;margin:0 0 16px}
#app .qr-acoes{justify-content:center}
#app .qr-acoes .btn{width:auto;flex:0 1 auto}

/* ---------- Cargos e setores ---------- */
#app .listas-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:16px}
#app .lista-titulo{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:0 0 10px}
#app .lista-add{display:flex;gap:8px;margin-bottom:12px}
#app .lista-add input{
  flex:1;font-family:inherit;font-size:13.5px;padding:9px 11px;
  border:1.5px solid var(--line);border-radius:0;background:var(--card);min-width:0;
}
#app .lista-add input:focus{outline:none;border-color:var(--emp-cor)}
#app .lista-itens{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto}
#app .lista-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:0;padding:9px 12px;font-size:13.5px}
#app .btn-remover{background:none;border:none;color:var(--ink-3);font-size:17px;line-height:1;cursor:pointer;padding:0 4px;border-radius:0}
#app .btn-remover:hover{color:var(--erro);background:var(--erro-soft)}

/* ---------- Escolha do PDF ---------- */
#app .opcao-pdf{
  display:block;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);
  border-radius:0;padding:16px 18px;margin-bottom:10px;cursor:pointer;font-family:inherit;transition:.15s ease;
}
#app .opcao-pdf:hover{border-color:var(--emp-cor);background:var(--paper)}
#app .opcao-pdf b{display:block;font-family:var(--serif);font-size:17px;font-weight:700;margin-bottom:4px}
/* Formatos da imagem gráfica, abrem dentro da própria opção */
#app .formatos-titulo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin:14px 0 8px}
#app .formatos-imagem{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
#app .formatos-imagem .btn{min-width:78px}
#app .nota-img{font-size:12px;line-height:1.45;color:var(--ink-3);margin:0 0 4px}
#app .opcao-pdf[aria-expanded="true"]{border-color:var(--emp-cor);background:var(--paper)}
#app .opcao-pdf span{font-size:13px;color:var(--ink-2)}

#app .stat-grid-4{grid-template-columns:repeat(4,1fr)}
#app .stat-grid-5{grid-template-columns:repeat(5,1fr)}

@media (max-width:1100px){
  #app .stat-grid-4{grid-template-columns:1fr 1fr}
  #app .stat-grid-5{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:860px){
  #app .listas-grid{grid-template-columns:1fr}
  #app .filtro-campo{min-width:calc(50% - 6px)}
  #app .filtro-campo.cresce{flex:1 1 100%}
  #app .filtro-limpar{min-width:100%;margin-left:0}
  #app .filtro-limpar .btn{width:100%}
  #app .btn-toggle-filtros{display:flex}
  #app .filtros-panel.recolhido .filtros-linha,#app .filtros-panel.recolhido .filtros-info{display:none}
  #app .filtros-panel:not(.recolhido) .filtros-linha{margin-top:14px}
}
/* No celular a tabela de resultados vira lista de cartoes: nada de rolagem
   lateral dentro da linha e cada valor ganha seu rotulo (item 28). */
@media (max-width:620px){
  #app table.tabela-resultados{min-width:0;display:block}
  #app table.tabela-resultados thead{display:none}
  #app table.tabela-resultados tbody{display:block}
  #app table.tabela-resultados tr{
    display:block;border:1px solid var(--line);border-radius:0;
    padding:12px 14px;margin-bottom:10px;background:var(--card);
  }
  #app table.tabela-resultados tr:hover td{background:transparent}
  #app table.tabela-resultados td,#app table.tabela-resultados td:first-child,#app table.tabela-resultados td:last-child{
    display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;
    border:none;padding:6px 0;text-align:right;width:auto;min-width:0;flex-wrap:wrap;
  }
  #app table.tabela-resultados td::before{
    content:attr(data-rotulo);flex:0 0 auto;text-align:left;
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);
  }
  #app table.tabela-resultados td small{flex:1 1 100%;text-align:right}
  #app table.tabela-resultados td.cel-acoes{
    padding-top:12px;margin-top:6px;border-top:1px solid var(--line-2);width:100%;
  }
  #app table.tabela-resultados td.cel-acoes::before{content:none}
  #app table.tabela-resultados .acoes-linha{width:100%;justify-content:flex-end}
  #app table.tabela-resultados .acoes-linha .btn:not(.btn-mais){flex:1 1 auto}

  #app .stat-grid-4{grid-template-columns:1fr}
  #app .stat-grid-5{grid-template-columns:1fr 1fr}
  #app .tabela-admin-wrap{overflow-x:auto}
  #app table.adm.tabela-admin{min-width:760px}
  #app table.adm#ch-tabela{min-width:780px}
  #app .filtro-campo{min-width:100%}
  #app .head-acoes{width:100%}
  #app .head-acoes .btn{flex:1 1 100%}
  #app .convite-ok{justify-content:center;text-align:center}
  #app .conv-info{text-align:left}
  #app .conv-acoes .btn,#app .qr-acoes .btn{flex:1 1 100%}
  #app .paginacao{justify-content:center}
  #app .pag-info{margin:6px 0 0;width:100%;text-align:center}
  #app .qr-caixa svg{width:200px;height:200px}
  #app .cel-link input{width:150px}
}

/* =========================================================================
   FASE 3 · DEPARTAMENTOS, SETORES E EQUIPES
   ========================================================================= */
#app .panel > h3 .alternar{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink-2);cursor:pointer;
}
#app .panel > h3 .alternar input{accent-color:var(--emp-cor);width:15px;height:15px;cursor:pointer}

/* ---------- Distribuição D/I/S/C ---------- */
#app .dist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#app .dist-item{border:1px solid var(--line);border-radius:0;padding:14px 16px;background:var(--card)}
#app .dist-topo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
#app .dist-topo b{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1}
#app .dist-topo span{font-size:12.5px;color:var(--ink-2);flex:1 1 auto}
#app .dist-topo i{font-style:normal;font-size:13px;font-weight:700}
#app .dist-barra{height:9px;background:var(--line-2);border-radius:0;overflow:hidden}
#app .dist-barra span{display:block;height:100%;border-radius:0;transition:width .4s ease}
#app .dist-pct{font-size:12px;color:var(--ink-3);margin-top:7px}
/* A cor de cada eixo vem do motor do teste aberto e é aplicada no elemento
   (ver COR_EIXO): a mesma tela serve ao DISC e aos demais testes. */

/* ---------- Mapa comportamental ---------- */
#app .mapa-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:22px;align-items:start}
#app .matriz-disc{min-width:0}
#app .matriz-svg{width:100%;height:auto;display:block;max-width:520px;margin:0 auto}
#app .mapa-lateral{display:flex;flex-direction:column;gap:14px}
#app .leitura-cartao{border-radius:0;padding:16px 18px;border:1px solid transparent}
#app .leitura-cartao b{display:block;font-family:var(--serif);font-size:17px;font-weight:700;margin-bottom:6px}
#app .leitura-cartao p{margin:0;font-size:13.5px;line-height:1.6}
#app .leitura-diversificada{background:var(--ok-soft);border-color:#D5E5E0;color:#17564C}
#app .leitura-equilibrada{background:var(--info-soft);border-color:#CBDCDA;color:#1B2226}
#app .leitura-concentrada{background:var(--alerta-soft);border-color:#E8DDC0;color:#6B520F}
#app .leitura-neutra{background:var(--paper);border-color:var(--line);color:var(--ink-2)}
#app .mapa-legenda{display:flex;flex-direction:column;gap:7px}
#app .leg-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}
#app .leg-item i{width:11px;height:11px;border-radius:0;flex:0 0 auto}

/* ---------- Agrupamento por setor ---------- */
#app .setor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
#app .setor-card{
  text-align:left;background:var(--card);border:1px solid var(--line);border-radius:0;
  padding:16px 18px;font-family:inherit;cursor:pointer;transition:.15s ease;
}
#app .setor-card:hover{border-color:var(--emp-cor)}
#app .sc-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
#app .sc-topo b{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ink)}
#app .sc-tipo{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap}
#app .sc-total{font-size:13px;color:var(--ink-2);margin-bottom:10px}
#app .sc-mini{display:flex;height:10px;border-radius:0;overflow:hidden;background:var(--line-2);gap:1px}
#app .sc-mini span{display:block;min-width:0}

#app .sc-legenda{font-size:11.5px;color:var(--ink-3);margin-top:8px}

/* ---------- Equipes ---------- */
#app .equipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
#app .equipe-card{border:1px solid var(--line);border-radius:0;padding:18px;background:var(--card);display:flex;flex-direction:column;gap:9px}
#app .ec-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#app .ec-topo b{font-family:var(--serif);font-size:18px;font-weight:700}
#app .ec-desc{margin:0;font-size:13px;color:var(--ink-2)}
#app .ec-total{font-size:14px;font-weight:700}
#app .ec-total i{font-style:normal;font-size:12px;font-weight:500;color:var(--ink-3)}
#app .ec-dist{font-size:12.5px;color:var(--ink-2);display:flex;gap:10px;flex-wrap:wrap}
#app .ec-dist b{color:var(--ink)}
#app .ec-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}

/* ---------- Modal de setores ---------- */
#app .lista-add-setor{display:flex;gap:8px;flex-wrap:wrap}
#app .lista-add-setor input{flex:1 1 220px}
#app .lista-add-setor select{
  font-family:inherit;font-size:13.5px;padding:9px 11px;
  border:1.5px solid var(--line);border-radius:0;background:var(--card);color:var(--ink);
}
#app .lista-alta{max-height:340px}
#app .lista-item-setor{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center}
#app .li-nome b{display:block;font-size:14px}
#app .li-tipo{font-size:11px;color:var(--ink-3);font-family:ui-monospace,Menlo,Consolas,monospace}
#app .li-uso{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
#app .li-select{
  font-family:inherit;font-size:12.5px;padding:6px 9px;border:1px solid var(--line);
  border-radius:0;background:var(--card);color:var(--ink-2);
}

/* ---------- Seleção de membros da equipe ---------- */
#app .membros-topo{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:6px}
#app .membros-busca{flex:1 1 260px;margin-bottom:0}
#app .membros-atalhos{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#app .membros-atalhos select{
  font-family:inherit;font-size:13px;padding:9px 11px;border:1.5px solid var(--line);
  border-radius:0;background:var(--card);color:var(--ink);max-width:250px;
}
#app .lista-membros{
  display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto;
  border:1px solid var(--line);border-radius:0;padding:8px;background:var(--paper);margin-bottom:14px;
}
#app .membro-item{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:0;padding:10px 12px;cursor:pointer;transition:.12s ease;
}
#app .membro-item:hover{border-color:var(--ink-3)}
#app .membro-item.marcado{border-color:var(--emp-cor);background:var(--info-soft)}
#app .membro-item input{accent-color:var(--emp-cor);width:16px;height:16px;cursor:pointer}
#app .mi-nome{font-size:14px;font-weight:600}
#app .mi-meta{font-size:12.5px;color:var(--ink-2);text-align:right}
#app .mi-perfil{
  font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:0;
  background:var(--line-2);color:var(--ink-2);white-space:nowrap;
}
#app .perfil-D{background:#EBD3CE;color:#7E3025} #app .perfil-I{background:#F5EEDD;color:#6B520F}
#app .perfil-S{background:#D5E5E0;color:#17564C} #app .perfil-C{background:#E8EEEE;color:#1F4E79}

/* ---------- Prévia do Mapa de Perfil ---------- */
#app .mapa-previa{border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--paper);line-height:0}
#app .mapa-previa img{width:100%;height:auto;display:block}

@media (max-width:1000px){
  #app .mapa-wrap{grid-template-columns:1fr}
  #app .mapa-lateral{flex-direction:row;flex-wrap:wrap}
  #app .leitura-cartao{flex:1 1 300px}
  #app .mapa-legenda{flex:1 1 200px;flex-direction:row;flex-wrap:wrap;gap:12px;align-content:flex-start}
}
@media (max-width:860px){
  #app .dist-grid{grid-template-columns:1fr 1fr}
  #app .lista-item-setor{grid-template-columns:1fr auto;row-gap:8px}
  #app .lista-item-setor .li-uso{grid-column:1/2}
  #app .membro-item{grid-template-columns:auto 1fr auto;row-gap:4px}
  #app .mi-meta{grid-column:2/4;text-align:left}
}
@media (max-width:620px){
  #app .dist-grid{grid-template-columns:1fr}
  #app .setor-grid,#app .equipe-grid{grid-template-columns:1fr}
  #app .lista-add-setor input,#app .lista-add-setor select,#app .lista-add-setor .btn{flex:1 1 100%;width:100%}
  #app .membros-atalhos{width:100%}
  #app .membros-atalhos select,#app .membros-atalhos .btn{flex:1 1 100%;max-width:none;width:100%}
  #app .panel > h3 .alternar{width:100%;margin-top:4px}
}

/* =========================================================================
   TELA PRINCIPAL DO TESTE E CONFIGURAÇÕES DO TESTE
   ========================================================================= */
#app .acoes-teste{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
#app .acao-teste{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  background:var(--card);border:1.5px solid var(--line);border-radius:0;
  padding:16px 18px;font-family:inherit;cursor:pointer;transition:.15s ease;
}
#app .acao-teste:hover:not(:disabled){border-color:var(--emp-cor);background:var(--paper)}
#app .acao-teste.principal{border-color:var(--emp-cor);background:var(--info-soft)}
#app .acao-teste:disabled{opacity:.5;cursor:not-allowed}
/* -------------------------------------------------------------------------
   SISTEMA DE ÍCONES (itens 9, 12, 13 e 14)
   Um só desenho para toda a plataforma: silhueta preenchida, cor única e
   mesmo peso. A cor vem de currentColor, então o ícone acompanha a cor
   escolhida pela empresa em todos os lugares em que ela vale.
   ------------------------------------------------------------------------- */
#app .ico{width:100%;height:100%;display:block;fill:currentColor}
#app [data-icone]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}

#app .at-icone{
  flex:0 0 auto;width:40px;height:40px;border-radius:0;background:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:9px;line-height:1;
  color:var(--emp-cor);
}
#app .acao-teste.principal .at-icone{background:var(--card)}
#app .at-texto{flex:1 1 auto;min-width:0}
#app .at-texto b{display:block;font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:2px}
#app .at-texto span{display:block;font-size:13px;color:var(--ink-2);line-height:1.45}
#app .at-seta{flex:0 0 auto;color:var(--ink-3);font-size:16px;transition:.15s ease}
#app .acao-teste:hover:not(:disabled) .at-seta{color:var(--emp-cor);transform:translateX(3px)}

#app .config-lista{display:flex;flex-direction:column;gap:10px}
#app .config-item{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  background:var(--card);border:1.5px solid var(--line);border-radius:0;
  padding:15px 17px;font-family:inherit;cursor:pointer;transition:.15s ease;
}
#app .config-item:hover{border-color:var(--emp-cor);background:var(--paper)}
#app .ci-icone{width:34px;height:34px;padding:7px;background:var(--paper);color:var(--emp-cor)}
#app .ci-texto{flex:1 1 auto;min-width:0}
#app .ci-texto b{display:block;font-size:15px;font-weight:700;margin-bottom:2px}
#app .ci-texto span{display:block;font-size:13px;color:var(--ink-2)}
#app .ci-seta{color:var(--ink-3);font-size:15px}

/* O card do teste no painel tem um único botão, que ocupa a largura toda */
#app .teste-card .btn-block{width:100%}

/* Ícone dentro do menu da empresa e dos botões (item 9) */
#app .mi-icone{width:17px;height:17px;margin-right:10px;color:var(--emp-cor)}
#app .btn-icone{width:15px;height:15px;margin-right:8px}
#app .av-icone{width:15px;height:15px;margin-right:7px;vertical-align:-2px}

/* Cards de teste em preparação: informativos, sem nenhuma ação (item 8) */
#app .teste-card.em-preparo{background:var(--paper);border-style:dashed;border-color:var(--line)}
#app .teste-card.em-preparo b{color:var(--ink-2)}
#app .teste-card .tc-categoria{
  display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:-6px;
}

/* -------------------------------------------------------------------------
   FILTROS EM UMA ÚNICA LINHA quando o espaço permite (item 9)
   Os campos dividem a largura disponível; abaixo de 1100px eles quebram
   naturalmente, sem prejudicar o uso.
   ------------------------------------------------------------------------- */
#app .filtros-linha.linha-unica{gap:10px;align-items:flex-end}
#app .filtros-linha.linha-unica .filtro-campo{flex:1 1 132px;min-width:0}
#app .filtros-linha.linha-unica .filtro-campo:has(#f-ordem),#app .filtros-linha.linha-unica .filtro-campo:has(#eq-f-periodo){flex:1.25 1 150px}
#app .filtros-linha.linha-unica .filtro-campo.cresce{flex:1.4 1 150px;min-width:0}
#app .filtros-linha.linha-unica .filtro-campo label{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;
}
#app .filtros-linha.linha-unica .filtro-campo input,#app .filtros-linha.linha-unica .filtro-campo select{padding:0 9px;font-size:13px;height:36px}
#app .filtros-linha.linha-unica .filtro-limpar .btn{height:36px}
#app .filtros-linha.linha-unica .filtro-limpar{flex:0 0 auto;margin-left:0}
#app .filtros-linha.linha-unica .filtro-limpar .btn{white-space:nowrap;padding:8px 12px}

@media (max-width:1100px){
  #app .filtros-linha.linha-unica .filtro-campo{flex:1 1 160px}
}
@media (max-width:860px){
  #app .acoes-teste{grid-template-columns:1fr}
  #app .filtros-linha.linha-unica .filtro-campo{flex:1 1 calc(50% - 5px)}
  #app .filtros-linha.linha-unica .filtro-campo.cresce{flex:1 1 100%}
}
@media (max-width:620px){
  #app #view-teste .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  #app #view-teste .stat{padding:14px 15px}
  #app #view-teste .stat b{font-size:22px}
  #app #view-teste .stat i{font-size:11.5px}
  #app .filtros-linha.linha-unica .filtro-campo{flex:1 1 100%}
  #app .acao-teste{padding:14px 15px;gap:12px}
  #app .at-icone{width:34px;height:34px;padding:8px}
}

/* Cores predominantes da logo como opções adicionais (item 10) */
#app .cores-logo{margin-top:14px}
#app .cores-logo .cl-rot{
  display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}

/* -------------------------------------------------------------------------
   CARTÃO DE LEITURA DOS PONTOS DO MAPA (itens 29 a 33)
   Compacto, chapado e com a mesma linha de 1px do restante da identidade.
   Segue o ponteiro e some assim que o cursor deixa o ponto.
   ------------------------------------------------------------------------- */
#app .matriz-disc{position:relative}
#app .ponto-mapa{cursor:pointer;transition:.12s ease}
#app .ponto-mapa:hover,#app .ponto-mapa:focus{stroke-width:2.6;fill-opacity:1;outline:none}
#app .cartao-ponto{
  position:absolute;left:0;top:0;z-index:20;pointer-events:none;
  min-width:186px;max-width:230px;background:var(--card);
  border:1px solid var(--ink);border-radius:0;padding:11px 13px;
  opacity:0;visibility:hidden;transition:opacity .12s ease;
}
#app .cartao-ponto.show{opacity:1;visibility:visible}
#app .cartao-ponto .cp-nome{
  display:block;font-size:13.5px;font-weight:700;line-height:1.3;
  color:var(--ink);margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
#app .cartao-ponto .cp-eixos{display:flex;flex-direction:column;gap:5px}
#app .cartao-ponto .cp-linha{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
#app .cartao-ponto .cp-linha i{flex:0 0 auto;width:9px;height:9px;border-radius:0}
#app .cartao-ponto .cp-linha span{flex:1 1 auto;min-width:0}
#app .cartao-ponto .cp-linha b{
  flex:0 0 auto;color:var(--ink);font-weight:700;
  font-variant-numeric:tabular-nums;font-size:12.5px;
}

/* =========================================================================
   SISTEMA DE SUPORTE E CHAMADOS
   Mesma linguagem do restante da plataforma: bloco chapado, canto reto,
   linha de 1px e nenhuma sombra. O chat não tem áudio nem qualquer marca
   de leitura, visualização ou confirmação de recebimento.
   ========================================================================= */
/* A tabela de chamados tem sete colunas: a distribuição é declarada aqui
   para o conteúdo caber sem rolagem horizontal, como no painel de contas. */
#app table.adm#ch-tabela{table-layout:fixed;min-width:0}
#app table.adm#ch-tabela th:nth-child(1),#app table.adm#ch-tabela td:nth-child(1){width:9%}
#app table.adm#ch-tabela th:nth-child(2),#app table.adm#ch-tabela td:nth-child(2){width:26%}
#app table.adm#ch-tabela th:nth-child(3),#app table.adm#ch-tabela td:nth-child(3){width:17%}
#app table.adm#ch-tabela th:nth-child(4),#app table.adm#ch-tabela td:nth-child(4){width:16%}
#app table.adm#ch-tabela th:nth-child(5),#app table.adm#ch-tabela td:nth-child(5){width:12%}
#app table.adm#ch-tabela th:nth-child(6),#app table.adm#ch-tabela td:nth-child(6){width:12%}
#app table.adm#ch-tabela th:nth-child(7),#app table.adm#ch-tabela td:nth-child(7){width:8%}
#app table.adm#ch-tabela td{word-break:break-word;vertical-align:top}
#app table.adm#ch-tabela td small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
#app table.adm#ch-tabela .col-acoes{text-align:right}

#app .chamados-resumo{font-size:12.5px;font-weight:400;color:var(--ink-2)}
#app .lista-chamados{display:flex;flex-direction:column;gap:10px}
#app .chamado-item{
  display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:0;
  padding:14px 16px;font-family:inherit;cursor:pointer;transition:.15s ease;
}
#app .chamado-item:hover{border-color:var(--emp-cor);background:var(--paper)}
#app .chamado-item .ci-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
#app .chamado-item .ci-topo b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
#app .chamado-item .ci-titulo{font-size:14.5px;color:var(--ink);line-height:1.4}
#app .chamado-item .ci-rodape{
  display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--ink-3);
}

/* Situação do chamado: três estados, nada além disso */
#app .ch-status{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 9px;border-radius:0;white-space:nowrap;
}
#app .ch-status.st-pendente{background:#E8DDC0;color:#6B520F}
#app .ch-status.st-andamento{background:var(--info-soft);color:var(--primary)}
#app .ch-status.st-finalizado{background:var(--line);color:var(--ink-2)}

/* ------------------------------------------------- registro do chamado
   O atendimento é assíncrono: a empresa registra, o suporte responde mais
   tarde. Por isso o histórico é uma pilha de registros datados de largura
   total, com filete de 1px separando um do outro, e não bolhas alternadas
   à direita e à esquerda, que é a forma de conversa em tempo real. */
#app .modal-chat{max-width:600px;display:flex;flex-direction:column;max-height:88vh}
#app .modal-chat .modal-head h3{display:flex;align-items:center;gap:10px}
#app .modal-chat .chat-meta{font-size:12px;color:var(--ink-3)}
#app .chat-aviso{
  margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  padding:8px 10px;background:var(--paper);border:1px solid var(--line);
}
#app .chat-secao{
  margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);
}
#app .chat-admin-barra{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 13px;background:var(--paper);border:1px solid var(--line);margin-bottom:14px;
}
#app .chat-admin-barra label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0}
#app .chat-admin-barra select{flex:1 1 150px;min-width:0}
#app .chat-corpo{
  flex:1 1 auto;min-height:180px;max-height:44vh;overflow-y:auto;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);
}
#app .chat-vazio{margin:auto;font-size:13.5px;color:var(--ink-3);text-align:center;padding:24px 16px}
#app .msg{
  display:flex;flex-direction:column;gap:5px;max-width:none;align-self:auto;
  padding:13px 15px;border:0;border-bottom:1px solid var(--line);background:transparent;
}
#app .msg:last-child{border-bottom:0}
/* O autor é identificado por um rótulo de papel, não pela posição na tela. */
#app .msg-cabeca{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#app .msg-papel{
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 7px;border:1px solid var(--line);color:var(--ink-2);background:var(--paper);
}
#app .msg-minha .msg-papel{border-color:var(--emp-cor);color:var(--emp-cor)}
#app .msg-autor{font-size:12.5px;font-weight:500;color:var(--ink-2);letter-spacing:0;text-transform:none}
#app .msg-texto{font-size:14px;color:var(--ink);line-height:1.6;white-space:pre-wrap;word-break:break-word}
/* A data do registro é informação do chamado, não legenda decorativa: vai
   no tom de texto secundário, que passa em contraste nos dois temas. */
#app .msg-hora{font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* Marco de abertura: primeiro item do histórico, sem texto de usuário. */
#app .msg-marco{background:var(--paper)}
#app .msg-marco .msg-texto{font-size:13px;color:var(--ink-2)}
#app .msg-imagem{display:flex;flex-direction:column;gap:6px;margin-top:2px}
#app .msg-imagem img{max-width:100%;max-height:220px;object-fit:contain;border:1px solid var(--line);display:block}
#app .msg-baixar{font-size:12px;font-weight:600;color:var(--emp-cor);text-decoration:underline;align-self:flex-start}

#app .chat-envio{padding-top:14px}
#app .chat-linha{display:flex;align-items:flex-end;gap:8px}
#app .chat-linha textarea{
  flex:1 1 auto;min-width:0;min-height:42px;max-height:120px;resize:vertical;
  font-family:inherit;font-size:14px;padding:10px 12px;
  border:1.5px solid var(--line);border-radius:0;background:var(--card);color:var(--ink);
}
#app .chat-linha textarea:focus{outline:none;border-color:var(--emp-cor)}
#app .chat-btn-img{flex:0 0 auto;cursor:pointer;white-space:nowrap}
#app .chat-anexo{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  padding:8px 10px;border:1px solid var(--line);background:var(--paper);
}
#app .chat-anexo img{width:40px;height:40px;object-fit:cover;border:1px solid var(--line);flex:0 0 auto}
#app .chat-anexo span{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .btn-remover-anexo{
  flex:0 0 auto;background:none;border:1px solid var(--line);color:var(--ink-2);
  width:24px;height:24px;line-height:1;cursor:pointer;font-size:15px;border-radius:0;
}
#app .btn-remover-anexo:hover{border-color:var(--erro);color:var(--erro)}
#app .chat-encerrado{margin:14px 0 0;padding:11px 13px;background:var(--paper);border:1px solid var(--line)}

/* ------------------------------------------------ aviso do presente */
#app .modal-presente{max-width:460px}
#app .presente-topo{background:var(--petroleo-fundo);padding:22px 24px;margin:-26px -26px 20px}
#app .presente-arte{width:100%;max-width:260px;height:auto;display:block;margin:0 auto}
#app .presente-arte .pa-grade path{stroke:rgba(255,255,255,.10);stroke-width:1;fill:none}
#app .presente-arte .pa-modulos rect{fill:rgba(255,255,255,.18)}
#app .presente-arte .pa-modulos rect.pa-destaque{fill:var(--agua)}
#app .presente-arte .pa-regua{stroke:rgba(255,255,255,.30);stroke-width:1;fill:none}
#app .presente-texto{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 22px}

@media (max-width:640px){
  #app .modal-chat{max-width:100%;max-height:92vh}
  #app .chat-corpo{max-height:40vh}
  #app .chat-linha{flex-wrap:wrap}
  #app .chat-linha textarea{flex:1 1 100%;order:-1}
  #app .presente-topo{margin:-20px -20px 18px;padding:18px 20px}
}


/* =========================================================================
   CAMADA 2 · MÓDULO DO TESTE COMPORTAMENTAL DISC (escopo #modulo-disc)
   CSS original do teste, apenas escopado para conviver com a plataforma.
   ========================================================================= */
#modulo-disc,#modulo-pc{
  /* --- Paleta base do modulo; as cores da empresa entram por --emp-* --- */
  --navy:var(--emp-cor, #002247);
  --navy-2:var(--emp-cor-escura, #013a76);
  --navy-3:#0a1f38;
  --yellow:var(--emp-cor-apoio, #F5E33E);
  --yellow-2:#e0cd1f;
  --green:#417741;
  --green-2:#356135;

  --bg:#F4F2EE;--papel:#F4F2EE;
  --card:#ffffff;
  --ink:#0E1416;
  --ink-2:#5C6467;
  --line:#DEDAD2;
  --accent:var(--navy);
  --accent-soft:#E8EEEE;

  --d:#C0392B;
  --i:#D9A400;
  --s:#417741;
  --c:#002247;

  --radius:0px;
  --shadow:none;
}
#modulo-disc *,#modulo-pc *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#modulo-disc,#modulo-pc{margin:0;padding:0}
#modulo-disc,#modulo-pc{
  font-family:var(--fonte-empresa,var(--fonte-texto));
  background:var(--bg);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column;
}
#modulo-disc .wrap,#modulo-pc .wrap{width:100%;max-width:760px;margin:0 auto;padding:22px 18px 40px;flex:1;display:flex;flex-direction:column}
#modulo-disc .card,#modulo-pc .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;position:relative;overflow:hidden}
#modulo-disc .card::before,#modulo-pc .card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--navy) 0 34%,var(--yellow) 34% 67%,var(--green) 67% 100%)}
#modulo-disc .screen,#modulo-pc .screen{display:none;animation:discFade .28s ease}
#modulo-disc .screen.active,#modulo-pc .screen.active{display:block}
@keyframes discFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Marca ---------- */
#modulo-disc .brand,#modulo-pc .brand{display:flex;justify-content:center;margin-bottom:18px}
#modulo-disc .brand img,#modulo-pc .brand img{width:132px;height:auto;display:block}
#modulo-disc .brand-sm,#modulo-pc .brand-sm{display:flex;align-items:center;gap:12px;margin-bottom:18px}
#modulo-disc .brand-sm img,#modulo-pc .brand-sm img{width:58px;height:auto;display:block}
#modulo-disc .brand-sm .bt,#modulo-pc .brand-sm .bt{font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--navy);font-weight:700;line-height:1.3}
#modulo-disc .brand-sm .bt span,#modulo-pc .brand-sm .bt span{display:block;color:var(--ink-2);font-weight:600;letter-spacing:.04em}

/* ---------- Tela inicial ---------- */
#modulo-disc .hero,#modulo-pc .hero{text-align:center;padding:34px 28px}
#modulo-disc .badge,#modulo-pc .badge{display:inline-block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);background:var(--yellow);padding:6px 14px;border-radius:0;font-weight:700;margin-bottom:18px}
#modulo-disc h1,#modulo-pc h1{font-size:29px;line-height:1.2;margin:0 0 10px;letter-spacing:-.02em;color:var(--navy)}
#modulo-disc .sub,#modulo-pc .sub{font-size:17px;color:var(--ink-2);margin:0 0 22px}
#modulo-disc .orient,#modulo-pc .orient{font-size:15px;color:var(--ink-2);background:#f7f9fb;border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:0;padding:14px 16px;margin:0 auto 26px;max-width:480px;text-align:left}
#modulo-disc .meta,#modulo-pc .meta{display:flex;gap:26px;justify-content:center;margin:0 0 28px;flex-wrap:wrap}
#modulo-disc .meta div,#modulo-pc .meta div{text-align:center}
#modulo-disc .meta b,#modulo-pc .meta b{display:block;font-size:20px;letter-spacing:-.01em;color:var(--navy)}
#modulo-disc .meta span,#modulo-pc .meta span{font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}

/* ---------- Botões ---------- */
#modulo-disc .btn,#modulo-pc .btn{
  appearance:none;border:1.5px solid transparent;border-radius:0;
  font-size:15px;font-weight:600;font-family:inherit;
  padding:13px 26px;cursor:pointer;transition:.15s ease;
}
#modulo-disc .btn-primary,#modulo-pc .btn-primary{background:var(--navy);color:#fff}
#modulo-disc .btn-primary:hover:not(:disabled),#modulo-pc .btn-primary:hover:not(:disabled){background:var(--navy-2)}
#modulo-disc .btn-primary:disabled,#modulo-pc .btn-primary:disabled{background:#c3ccd8;cursor:not-allowed}
#modulo-disc .btn-yellow,#modulo-pc .btn-yellow{background:var(--yellow);color:var(--navy);border-color:var(--yellow-2);font-weight:700}
#modulo-disc .btn-yellow:hover:not(:disabled),#modulo-pc .btn-yellow:hover:not(:disabled){background:var(--yellow-2)}
#modulo-disc .btn-yellow:disabled,#modulo-pc .btn-yellow:disabled{opacity:.6;cursor:progress}
#modulo-disc .btn-ghost,#modulo-pc .btn-ghost{background:#fff;color:var(--ink-2);border-color:var(--line)}
#modulo-disc .btn-ghost:hover,#modulo-pc .btn-ghost:hover{background:#f5f7fa;color:var(--navy);border-color:#c3ccd8}
#modulo-disc .btn-lg,#modulo-pc .btn-lg{padding:15px 44px;font-size:16px}

/* ---------- Questões ---------- */
#modulo-disc .top,#modulo-pc .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
#modulo-disc .counter,#modulo-pc .counter{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.02em}
#modulo-disc .pct,#modulo-pc .pct{font-size:13px;color:var(--ink-2)}
#modulo-disc .bar,#modulo-pc .bar{height:6px;background:#EDEAE4;border-radius:0;overflow:hidden;margin-bottom:26px}
#modulo-disc .bar > i,#modulo-pc .bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--green));border-radius:0;transition:width .3s ease;width:0}
#modulo-disc .qtext,#modulo-pc .qtext{font-size:19px;font-weight:600;line-height:1.4;margin:0 0 20px;letter-spacing:-.01em;color:var(--navy)}
#modulo-disc .opts,#modulo-pc .opts{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
#modulo-disc .opt,#modulo-pc .opt{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:0;
  padding:14px 16px;font-size:15px;font-family:inherit;color:var(--ink);
  cursor:pointer;transition:.13s ease;line-height:1.45;
}
#modulo-disc .opt:hover,#modulo-pc .opt:hover{border-color:#b9c3d1;background:#fafbfd}
#modulo-disc .opt .mark,#modulo-pc .opt .mark{
  flex:0 0 auto;width:20px;height:20px;border-radius:0;border:1.5px solid #c0c8d4;
  margin-top:1px;position:relative;transition:.13s ease;
}
#modulo-disc .opt[aria-pressed="true"],#modulo-pc .opt[aria-pressed="true"]{border-color:var(--navy);background:var(--accent-soft)}
#modulo-disc .opt[aria-pressed="true"] .mark,#modulo-pc .opt[aria-pressed="true"] .mark{border-color:var(--navy);background:var(--navy)}
#modulo-disc .opt[aria-pressed="true"] .mark::after,#modulo-pc .opt[aria-pressed="true"] .mark::after{content:"";position:absolute;inset:5px;background:var(--yellow);border-radius:0}
#modulo-disc .nav,#modulo-pc .nav{display:flex;justify-content:space-between;gap:12px}
#modulo-disc .nav .btn,#modulo-pc .nav .btn{flex:0 0 auto}

/* ---------- Resultado ---------- */
#modulo-disc .res-head,#modulo-pc .res-head{text-align:center;margin-bottom:24px}
#modulo-disc .res-head h2,#modulo-pc .res-head h2{font-size:24px;margin:0;letter-spacing:-.02em;color:var(--navy)}
#modulo-disc .res-head .rdate,#modulo-pc .res-head .rdate{font-size:13px;color:var(--ink-2);margin-top:4px}
#modulo-disc .chart,#modulo-pc .chart{display:flex;flex-direction:column;gap:18px;margin-bottom:26px}
#modulo-disc .row .rowtop,#modulo-pc .row .rowtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
#modulo-disc .dim,#modulo-pc .dim{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px}
#modulo-disc .dot,#modulo-pc .dot{width:11px;height:11px;border-radius:0;flex:0 0 auto}
#modulo-disc .val,#modulo-pc .val{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
#modulo-disc .val b,#modulo-pc .val b{color:var(--ink);font-size:16px}
#modulo-disc .track,#modulo-pc .track{height:26px;background:#EDEAE4;border-radius:0;overflow:hidden}
#modulo-disc .fill,#modulo-pc .fill{height:100%;border-radius:0;width:0;transition:width .7s cubic-bezier(.22,.9,.3,1)}
#modulo-disc .f-D,#modulo-pc .f-D{background:var(--d)} #modulo-disc .f-I,#modulo-pc .f-I{background:var(--i)} #modulo-disc .f-S,#modulo-pc .f-S{background:var(--s)} #modulo-disc .f-C,#modulo-pc .f-C{background:var(--c)}
#modulo-disc .dot-D,#modulo-pc .dot-D{background:var(--d)} #modulo-disc .dot-I,#modulo-pc .dot-I{background:var(--i)} #modulo-disc .dot-S,#modulo-pc .dot-S{background:var(--s)} #modulo-disc .dot-C,#modulo-pc .dot-C{background:var(--c)}
#modulo-disc .res-actions,#modulo-pc .res-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
#modulo-disc .foot,#modulo-pc .foot{text-align:center;font-size:12px;color:#93a0b0;margin-top:22px;border-top:1px solid var(--line);padding-top:14px}

/* ---------- Bloco de síntese / análise ---------- */
#modulo-disc .synth,#modulo-pc .synth{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
#modulo-disc .synth .s-item,#modulo-pc .synth .s-item{background:#f7f9fb;border:1px solid var(--line);border-radius:0;padding:12px 14px}
#modulo-disc .synth .s-item span,#modulo-pc .synth .s-item span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:700;margin-bottom:3px}
#modulo-disc .synth .s-item b,#modulo-pc .synth .s-item b{font-size:15px;color:var(--navy);display:block;line-height:1.25}
#modulo-disc .synth .s-item i,#modulo-pc .synth .s-item i{font-style:normal;font-size:12px;color:var(--ink-2)}
#modulo-disc .tagline,#modulo-pc .tagline{background:var(--navy);color:#fff;border-radius:0;padding:14px 16px;margin-bottom:22px}
#modulo-disc .tagline b,#modulo-pc .tagline b{display:block;font-size:17px;letter-spacing:-.01em}
#modulo-disc .tagline span,#modulo-pc .tagline span{font-size:13.5px;opacity:.85}
#modulo-disc .sec,#modulo-pc .sec{margin-bottom:22px}
#modulo-disc .sec h3,#modulo-pc .sec h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);margin:0 0 10px;padding-left:11px;border-left:4px solid var(--yellow)}
#modulo-disc .sec p,#modulo-pc .sec p{margin:0 0 11px;font-size:14.7px;color:#243141;line-height:1.62}
#modulo-disc .sec ul,#modulo-pc .sec ul{margin:0;padding-left:0;list-style:none}
#modulo-disc .sec li,#modulo-pc .sec li{position:relative;padding-left:20px;margin-bottom:8px;font-size:14.7px;color:#243141;line-height:1.55}
#modulo-disc .sec li::before,#modulo-pc .sec li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:0}
#modulo-disc .sec.pos li::before,#modulo-pc .sec.pos li::before{background:var(--green)}
#modulo-disc .sec.neg li::before,#modulo-pc .sec.neg li::before{background:var(--d)}
#modulo-disc .sec.lead li::before,#modulo-pc .sec.lead li::before{background:var(--navy)}

/* ---------- Login ---------- */
#modulo-disc .role-opts,#modulo-pc .role-opts{display:flex;flex-direction:column;gap:12px;margin:0 0 22px}
#modulo-disc .role-card,#modulo-pc .role-card{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:0;
  padding:16px 18px;font-family:inherit;cursor:pointer;transition:.13s ease;
}
#modulo-disc .role-card:hover,#modulo-pc .role-card:hover{border-color:#b9c3d1;background:#fafbfd}
#modulo-disc .role-card.active,#modulo-pc .role-card.active{border-color:var(--navy);background:var(--accent-soft)}
#modulo-disc .role-card .ricon,#modulo-pc .role-card .ricon{
  flex:0 0 auto;width:38px;height:38px;border-radius:0;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
#modulo-disc .role-card.active .ricon,#modulo-pc .role-card.active .ricon{background:var(--navy);color:#fff}
#modulo-disc .role-card .rtext b,#modulo-pc .role-card .rtext b{display:block;font-size:15px;color:var(--navy)}
#modulo-disc .role-card .rtext span,#modulo-pc .role-card .rtext span{font-size:13px;color:var(--ink-2)}
#modulo-disc .field,#modulo-pc .field{margin-bottom:18px;text-align:left}
#modulo-disc .field label,#modulo-pc .field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
#modulo-disc .field input,#modulo-pc .field input{
  width:100%;font-size:15px;font-family:inherit;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:0;color:var(--ink);
  background:#fff;
}
#modulo-disc .field input:focus,#modulo-pc .field input:focus{outline:none;border-color:var(--navy);box-shadow:none}
#modulo-disc .err,#modulo-pc .err{font-size:13px;color:var(--d);margin:-8px 0 16px;display:none}
#modulo-disc .err.show,#modulo-pc .err.show{display:block}

/* ---------- Painel aplicador ---------- */
#modulo-disc .panel-head,#modulo-pc .panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
#modulo-disc .panel-head h2,#modulo-pc .panel-head h2{font-size:22px;margin:0;letter-spacing:-.02em;color:var(--navy)}
#modulo-disc .list,#modulo-pc .list{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
#modulo-disc .person,#modulo-pc .person{
  display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:0;
  padding:14px 16px;font-family:inherit;cursor:pointer;transition:.13s ease;gap:10px;
}
#modulo-disc .person:hover,#modulo-pc .person:hover{border-color:var(--navy);background:#fafbfd}
#modulo-disc .person .pname,#modulo-pc .person .pname{font-size:15px;font-weight:600;color:var(--navy)}
#modulo-disc .person .pdate,#modulo-pc .person .pdate{font-size:12px;color:var(--ink-2)}
#modulo-disc .person .ptag,#modulo-pc .person .ptag{font-size:11px;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--navy);border-radius:0;padding:3px 7px;margin-left:8px}
#modulo-disc .empty,#modulo-pc .empty{text-align:center;color:var(--ink-2);font-size:14px;padding:30px 10px}
#modulo-disc .back-link,#modulo-pc .back-link{
  background:none;border:none;color:var(--navy);font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;padding:0;margin-bottom:16px;
}
#modulo-disc .hint,#modulo-pc .hint{font-size:12.5px;color:var(--ink-2);text-align:center;margin:10px 0 0}

@media (max-width:560px){
  #modulo-disc .wrap,#modulo-pc .wrap{padding:14px 12px 32px}
  #modulo-disc .card,#modulo-pc .card{padding:22px 18px;border-radius:0}
  #modulo-disc .hero,#modulo-pc .hero{padding:26px 16px}
  #modulo-disc h1,#modulo-pc h1{font-size:24px}
  #modulo-disc .qtext,#modulo-pc .qtext{font-size:17px}
  #modulo-disc .opt,#modulo-pc .opt{font-size:14.5px;padding:13px 14px}
  #modulo-disc .nav .btn,#modulo-pc .nav .btn{flex:1 1 auto;padding:13px 12px}
  #modulo-disc .btn-lg,#modulo-pc .btn-lg{width:100%}
  #modulo-disc .res-actions .btn,#modulo-pc .res-actions .btn{flex:1 1 100%}
  #modulo-disc .synth,#modulo-pc .synth{grid-template-columns:1fr}
}
/* -------------------------------------------------------------------------
   AJUSTES DO MODULO DENTRO DA PLATAFORMA
   O modulo do teste era uma pagina inteira; aqui ele passa a ser uma view.
   Nada da aparencia original das telas do teste foi alterado.
   ------------------------------------------------------------------------- */
#modulo-disc,/* -------------------------------------------------------------------------
   AJUSTES DO MODULO DENTRO DA PLATAFORMA
   O modulo do teste era uma pagina inteira; aqui ele passa a ser uma view.
   Nada da aparencia original das telas do teste foi alterado.
   ------------------------------------------------------------------------- */
#modulo-pc{display:none;background:var(--paper)}#modulo-disc.active,#modulo-pc.active{display:flex;flex-direction:column;min-height:100dvh}#modulo-disc .wrap,#modulo-pc .wrap{padding-top:26px}/* marca da empresa no lugar da identificacao visual padrao (item 14) */
#modulo-disc .brand,/* marca da empresa no lugar da identificacao visual padrao (item 14) */
#modulo-pc .brand{flex-direction:column;align-items:center;gap:9px}#modulo-disc .brand img,#modulo-pc .brand img{width:auto;max-width:170px;max-height:74px;object-fit:contain}#modulo-disc .brand-sm img,#modulo-pc .brand-sm img{width:auto;max-width:88px;max-height:48px;object-fit:contain}#modulo-disc .disc-nome-grande,#modulo-pc .disc-nome-grande,#modulo-disc .pc-nome-grande,#modulo-pc .pc-nome-grande{
  font-family:var(--serif);font-size:19px;font-weight:700;color:var(--navy);
  text-align:center;letter-spacing:-.01em;
}#modulo-disc .disc-nome-grande:empty,#modulo-pc .disc-nome-grande:empty,#modulo-disc .pc-nome-grande:empty,#modulo-pc .pc-nome-grande:empty,#modulo-disc .brand-sm .disc-nome-empresa:empty,#modulo-pc .brand-sm .disc-nome-empresa:empty,#modulo-disc .brand-sm .pc-nome-empresa:empty,#modulo-pc .brand-sm .pc-nome-empresa:empty{display:none}#modulo-disc .brand-sm .bt .disc-nome-empresa,#modulo-pc .brand-sm .bt .disc-nome-empresa,#modulo-disc .brand-sm .bt .pc-nome-empresa,#modulo-pc .brand-sm .bt .pc-nome-empresa{color:var(--navy);font-weight:700;letter-spacing:.10em}/* Legibilidade com qualquer cor de marca (item 16,"garantir contraste e
   legibilidade"). O layout original era feito para azul-marinho + amarelo;
   aqui o texto sobre a cor da empresa e sobre a cor de apoio e calculado. */
#modulo-disc .btn-primary,"garantir contraste e
   legibilidade"). O layout original era feito para azul-marinho + amarelo;
   aqui o texto sobre a cor da empresa e sobre a cor de apoio e calculado. */
#modulo-pc .btn-primary{color:var(--emp-cor-contraste,#fff)}#modulo-disc .btn-yellow,#modulo-pc .btn-yellow{
  background:var(--yellow);color:var(--emp-cor-apoio-txt,var(--navy));
  border-color:var(--emp-cor-apoio-escura,var(--yellow-2));
}#modulo-disc .btn-yellow:hover:not(:disabled),#modulo-pc .btn-yellow:hover:not(:disabled){background:var(--emp-cor-apoio-escura,var(--yellow-2))}#modulo-disc .badge,#modulo-pc .badge{color:var(--emp-cor-apoio-txt,var(--navy))}#modulo-disc .tagline,#modulo-pc .tagline{color:var(--emp-cor-contraste,#fff)}#modulo-disc .person .ptag,#modulo-pc .person .ptag{color:var(--emp-cor-contraste,#fff)}#modulo-disc .role-card.active .ricon,#modulo-pc .role-card.active .ricon{color:var(--emp-cor-contraste,#fff)}#modulo-disc .opt[aria-pressed="true"] .mark::after,#modulo-pc .opt[aria-pressed="true"] .mark::after{background:var(--emp-cor-contraste,#F5E33E)}/* Filete superior do cartao: cor chapada da marca da empresa.
   A identidade HV nao admite gradiente em nenhuma peca. */
#modulo-disc .card::before,/* Filete superior do cartao: cor chapada da marca da empresa.
   A identidade HV nao admite gradiente em nenhuma peca. */
#modulo-pc .card::before{background:var(--navy);height:4px}/* Fase 2: cargo e setor viraram listas,os selects seguem o mesmo desenho
   dos campos de texto ja existentes na tela de identificacao. */
#modulo-disc .field select,os selects seguem o mesmo desenho
   dos campos de texto ja existentes na tela de identificacao. */
#modulo-pc .field select{
  width:100%;font-size:15px;font-family:inherit;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:0;color:var(--ink);background:#fff;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6472' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:38px;
}#modulo-disc .field select:focus,#modulo-pc .field select:focus{outline:none;border-color:var(--navy)}


/* -------------------------------------------------------------------------
   AVALIACAO DE PREFERENCIA CEREBRAL · paleta dos quatro perfis
   O restante do desenho (cartoes, botoes, questoes, graficos) e o mesmo do
   outro modulo: as duas telas compartilham a mesma folha de estilo.
   ------------------------------------------------------------------------- */
#modulo-pc{--pcI:#6C4FB0;--pcC:#C15A3E;--pcO:#2E7D74;--pcA:#B07A12}
#modulo-pc .dot-pcI,#modulo-pc .f-pcI{background:var(--pcI)}
#modulo-pc .dot-pcC,#modulo-pc .f-pcC{background:var(--pcC)}
#modulo-pc .dot-pcO,#modulo-pc .f-pcO{background:var(--pcO)}
#modulo-pc .dot-pcA,#modulo-pc .f-pcA{background:var(--pcA)}
#modulo-pc .card::before{background:var(--emp-cor);height:4px}