/* ====================================================================
   web/css/eco-modulos.css — a pele dos módulos internos que continuam
   existindo no app novo (rodada Ecossistema, 07/10/2026): Meu Perfil,
   Simulador (demo e "sua negociação"), Relatório/Colinha (a lista e a barra
   de cima; o A4 em .rel-stage é de outra frente) e a moldura dos
   questionários (iframe).

   Carregado depois de css/visual-a.css. TODA regra começa por
   `html[data-visual-a]` — o atributo existe (mesmo vazio) quando a flag
   `?jornada=v3|v5|v6` está ligada (js/visual-a.js). Sem a flag, nada muda.

   Só aparência. O caminho principal é redefinir os tokens de style.css
   (--accent, --bg, --border…) DENTRO de cada módulo: tudo o que já usa
   var(--accent) passa a ser azul do visual novo sem tocar em style.css. As
   regras pontuais abaixo cobrem o que tem cor ou medida fixa.

   Refino 08/10/2026: medido contra o padrão visual (cabeçalho de
   web/css/barra.css) — coluna de 720 nas telas de lista/configuração,
   título de página 26/600, campo de uma linha com altura de campo (não
   de caixa de texto), selo "Demo" igual ao da barra, cards 16.
   ==================================================================== */

/* ---------- tokens do visual novo, com escopo nos módulos ---------- */
html[data-visual-a] #module-profile,
html[data-visual-a] #module-simulador,
html[data-visual-a] #module-simulador-neg,
html[data-visual-a] #module-relatorio,
html[data-visual-a] #module-colinha,
html[data-visual-a] #module-qessencial,
html[data-visual-a] #module-qpro {
  --eco-ink: #0a1628;
  --eco-dim: #5b6472;
  --eco-line: #e6e8ec;
  --eco-fill: #f3f4f6;
  --eco-azul: #152848;
  --eco-azul-texto: #33476b;
  --eco-azul-06: #f1f4f9;
  --eco-azul-10: #e6ecf6;
  --eco-azul-linha: #d5dcea;
  --eco-gold: #c9a040;
  --eco-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* os de style.css, trocados só aqui dentro */
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --border: #e6e8ec;
  --border-light: #e6e8ec;
  --text: #0a1628;
  --text-dim: #5b6472;
  --text-xdim: #8a929e;
  --accent: #152848;
  --accent-soft: #f1f4f9;
  --accent-hover: #0a1628;
  --accent-text: #152848;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: none;
  --font: var(--eco-font);
  font-family: var(--eco-font);
  color: var(--eco-ink);
}

/* o fundo da área de conteúdo fica branco enquanto um destes módulos está aberto */
html[data-visual-a] body[data-modulo="profile"] .content,
html[data-visual-a] body[data-modulo="simulador"] .content,
html[data-visual-a] body[data-modulo="simulador-neg"] .content,
html[data-visual-a] body[data-modulo="relatorio"] .content,
html[data-visual-a] body[data-modulo="colinha"] .content,
html[data-visual-a] body[data-modulo="qessencial"] .content,
html[data-visual-a] body[data-modulo="qpro"] .content,
html[data-visual-a] body[data-modulo="conta"] .content { background: #fff; }

/* ====================================================================
   Meu Perfil
   ==================================================================== */
html[data-visual-a] #module-profile .tab-pane-head { margin-bottom: 20px; }
html[data-visual-a] #module-profile .tab-pane-head h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--eco-ink); }
html[data-visual-a] #module-profile .tab-pane-head p { font-size: 15px; line-height: 1.5; color: var(--eco-dim); margin-top: 6px; }

/* a mesma coluna da área do usuário (conta.css): 720 px */
html[data-visual-a] #module-profile.active { max-width: 720px; }

/* abas internas: controle segmentado (cinza claro, a ativa em branco) */
html[data-visual-a] #module-profile .profile-tab-bar {
  display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 24px;
  background: var(--eco-fill); border: none; border-radius: 12px; max-width: 100%;
}
html[data-visual-a] #module-profile .profile-inner-tab {
  margin: 0; padding: 8px 14px; border: none; border-radius: 9px;
  font-family: var(--eco-font); font-size: 14px; font-weight: 500; color: var(--eco-dim);
}
html[data-visual-a] #module-profile .profile-inner-tab:hover { color: var(--eco-ink); }
html[data-visual-a] #module-profile .profile-inner-tab.active {
  background: #fff; color: var(--eco-ink); font-weight: 600; border: none;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.08);
}

html[data-visual-a] #module-profile .setup { gap: 24px; }
html[data-visual-a] #module-profile .setup-intro {
  background: var(--eco-fill); border: none; border-radius: 12px;
  padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--eco-dim);
}
html[data-visual-a] #module-profile .setup-intro strong { color: var(--eco-ink); font-weight: 600; }
html[data-visual-a] #module-profile .setup-field { gap: 4px; }
html[data-visual-a] #module-profile .setup-field + .setup-field { margin-top: 14px; }
html[data-visual-a] #module-profile .setup-field label { font-size: 14px; font-weight: 600; color: var(--eco-ink); }
html[data-visual-a] #module-profile .setup-field .setup-hint { font-size: 13px; color: var(--eco-dim); }
html[data-visual-a] #module-profile .setup-field textarea,
html[data-visual-a] #module-profile .setup-field input[type="text"],
html[data-visual-a] #module-profile .setup-field input:not([type]) {
  border: 1px solid var(--eco-line); border-radius: 12px; background: #fff;
  padding: 11px 14px; font-family: var(--eco-font); font-size: 15px; line-height: 1.45; color: var(--eco-ink);
  min-height: 46px;
}
/* campo de uma linha (nome, empresa, cargo, setor): altura de campo, sem alça de redimensionar */
html[data-visual-a] #ptab-me-fields .setup-field textarea[rows="2"] { min-height: 46px; height: 46px; resize: none; }
@supports (field-sizing: content) {
  html[data-visual-a] #ptab-me-fields .setup-field textarea[rows="2"] { height: auto; field-sizing: content; }
}
html[data-visual-a] #module-profile .setup-field textarea:focus,
html[data-visual-a] #module-profile .setup-field input:focus {
  outline: none; border-color: var(--eco-azul); box-shadow: 0 0 0 3px var(--eco-azul-10);
}
html[data-visual-a] #module-profile .setup-field textarea::placeholder { color: #8a929e; }
/* as opções do perfil (js/profile.js injeta .pf-chip): pílulas, a escolhida em azul */
html[data-visual-a] #module-profile .pf-chip {
  border: 1px solid var(--eco-line); border-radius: 999px; background: #fff;
  padding: 9px 16px; font-size: 14px; color: var(--eco-ink);
}
html[data-visual-a] #module-profile .pf-chip:hover { border-color: #d3d7de; background: var(--eco-fill); }
html[data-visual-a] #module-profile .pf-chip[aria-pressed="true"] {
  border-color: var(--eco-azul); background: var(--eco-azul-06); color: var(--eco-azul); font-weight: 600;
}
html[data-visual-a] #module-profile .setup-save {
  border-radius: 999px; padding: 11px 22px; font-size: 15px; font-weight: 600;
  background: var(--eco-azul); color: #fff;
}
html[data-visual-a] #module-profile .setup-save:hover { background: var(--eco-ink); }
/* cartões de empresas / stakeholders / questionários */
html[data-visual-a] #module-profile .entity-tag { border-radius: 999px; }
html[data-visual-a] #module-profile .entity-tag:not(.secondary):not(.style) { background: var(--eco-azul-06); color: var(--eco-azul-texto); }

/* ====================================================================
   Simulador (demo e "sua negociação")
   ==================================================================== */
html[data-visual-a] .sim-chat { background: #fff; }
/* banner menor e mais discreto */
html[data-visual-a] .sim-banner { height: 140px; border-bottom: 1px solid var(--eco-line); }
html[data-visual-a] .sim-banner img { object-position: center 40%; }
html[data-visual-a] .sim-head {
  padding: 14px 20px; border-bottom: 1px solid var(--eco-line); background: #fff;
}
html[data-visual-a] .sim-head-title strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--eco-ink); }
html[data-visual-a] .sim-head-tag {
  padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 18px;
  background: rgba(201, 160, 64, 0.16); color: #7d5e10;
}
html[data-visual-a] .sim-reset {
  min-height: 36px; padding: 7px 14px; border: 1px solid var(--eco-line); border-radius: 999px;
  background: #fff; font-family: var(--eco-font); font-size: 14px; font-weight: 500; color: var(--eco-ink);
}
html[data-visual-a] .sim-reset:hover { background: var(--eco-fill); color: var(--eco-ink); }
html[data-visual-a] .simneg-back { width: 36px; height: 36px; justify-content: center; align-items: center; border-radius: 10px; color: var(--eco-ink); }
html[data-visual-a] .simneg-back:hover { background: var(--eco-fill); }

/* a conversa: como o chat novo — resposta sem caixa, a sua numa pílula clara */
html[data-visual-a] .sim-log { padding: 24px 20px; gap: 20px; }
html[data-visual-a] .sim-bubble { font-size: 16px; line-height: 1.55; }
html[data-visual-a] .sim-assistant .sim-bubble {
  max-width: 100%; padding: 0; background: transparent; border: none; border-radius: 0; color: var(--eco-ink);
}
html[data-visual-a] .sim-user .sim-bubble {
  max-width: 86%; padding: 10px 16px; background: #eef2f8; color: var(--eco-ink); border-radius: 22px;
}
html[data-visual-a] .sim-bubble strong { font-weight: 600; }
html[data-visual-a] .sim-typing span { background: var(--eco-gold); }

/* o campo: a mesma pílula do chat novo (visual-a.css, .chat-input) */
html[data-visual-a] .sim-composer {
  margin: 0 16px calc(14px + env(safe-area-inset-bottom)); padding: 5px; gap: 0;
  align-items: flex-end; background: #fff; border: 1px solid rgba(10, 22, 40, 0.14); border-radius: 28px;
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.05), 0 8px 40px rgba(10, 22, 40, 0.07);
}
html[data-visual-a] .sim-composer:focus-within { border-color: var(--eco-azul); }
html[data-visual-a] .sim-composer textarea {
  min-height: 44px; padding: 10px 8px 10px 14px; border: none; border-radius: 0; background: transparent;
  font-family: var(--eco-font); font-size: 16px; line-height: 24px; color: var(--eco-ink);
}
html[data-visual-a] .sim-composer textarea:focus { outline: none; border: none; }
html[data-visual-a] .sim-composer textarea::placeholder { color: #6b7280; }
html[data-visual-a] .sim-send {
  width: 36px; height: 36px; margin: 4px; border-radius: 50%;
  background: var(--eco-azul); color: var(--eco-gold);
}
html[data-visual-a] .sim-send:hover { opacity: 1; background: var(--eco-ink); }
html[data-visual-a] .sim-send:disabled { opacity: 0.35; }
html[data-visual-a] .sim-send svg { width: 17px; height: 17px; }

/* "Sua negociação": a lista antes do chat */
html[data-visual-a] .simneg-picker .sim-head { border-bottom: none; padding: 32px 20px 0; }
html[data-visual-a] .simneg-picker .sim-head-title strong { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
html[data-visual-a] .simneg-hint { margin: 8px 20px 12px; font-size: 15px; line-height: 1.5; color: var(--eco-dim); }
html[data-visual-a] .simneg-list { gap: 8px; padding: 8px 20px 32px; }
html[data-visual-a] .simneg-item,
html[data-visual-a] .rel-item {
  border: 1px solid var(--eco-line); border-radius: 16px; background: #fff;
  padding: 14px 44px 14px 16px; font-family: var(--eco-font);
}
html[data-visual-a] .simneg-item:hover,
html[data-visual-a] .rel-item:hover { border-color: #d3d7de; background: var(--eco-fill); }
html[data-visual-a] .simneg-item-title,
html[data-visual-a] .rel-item-title { font-size: 16px; font-weight: 600; color: var(--eco-ink); }
html[data-visual-a] .simneg-item-meta,
html[data-visual-a] .rel-item-meta { font-size: 13px; color: var(--eco-dim); }
html[data-visual-a] .simneg-item-caret,
html[data-visual-a] .rel-item-caret { color: #8a929e; }

/* ====================================================================
   Relatório e Colinha: a lista e a barra de cima (o A4 não é daqui)
   ==================================================================== */
html[data-visual-a] .rel-picker { max-width: 760px; padding: 32px 20px 48px; }
html[data-visual-a] .rel-picker-head h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--eco-ink); }
html[data-visual-a] .rel-picker-head p { font-size: 15px; line-height: 1.5; color: var(--eco-dim); }
html[data-visual-a] .rel-group { margin-top: 28px; }
html[data-visual-a] .rel-group h3 {
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--eco-dim); margin-bottom: 10px;
}
html[data-visual-a] .rel-empty { font-size: 14px; color: var(--eco-dim); }
html[data-visual-a] .rel-toolbar { padding: 10px 16px; gap: 10px; background: #fff; border-bottom: 1px solid var(--eco-line); }
html[data-visual-a] .rel-tb-title { font-size: 15px; font-weight: 600; color: var(--eco-ink); }
html[data-visual-a] .rel-tbtn {
  min-height: 36px; padding: 7px 14px; border: 1px solid var(--eco-line); border-radius: 999px;
  background: #fff; font-family: var(--eco-font); font-size: 14px; font-weight: 500; color: var(--eco-ink);
}
html[data-visual-a] .rel-tbtn:hover { background: var(--eco-fill); color: var(--eco-ink); }
html[data-visual-a] .rel-tbtn.primary { background: var(--eco-azul); border-color: var(--eco-azul); color: #fff; }
html[data-visual-a] .rel-tbtn.primary:hover { background: var(--eco-ink); opacity: 1; color: #fff; }

/* ====================================================================
   Questionários: moldura limpa (a página de dentro tem a própria pele)
   ==================================================================== */
html[data-visual-a] #module-qessencial .quiz-frame,
html[data-visual-a] #module-qpro .quiz-frame { background: #fff; border: 0; }

/* ---------- celular ---------- */
@media (max-width: 768px) {
  html[data-visual-a] #module-profile .tab-pane-head h2 { font-size: 24px; }
  html[data-visual-a] #module-profile .profile-tab-bar { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  html[data-visual-a] #module-profile .profile-inner-tab { flex: 1 0 auto; padding: 8px 12px; font-size: 13.5px; white-space: nowrap; }
  html[data-visual-a] .sim-banner { height: 96px; }
  html[data-visual-a] .sim-head { padding: 10px 14px; }
  html[data-visual-a] .sim-log { padding: 18px 16px; gap: 16px; }
  html[data-visual-a] .sim-composer { margin: 0 10px calc(10px + env(safe-area-inset-bottom)); }
  html[data-visual-a] .sim-reset { padding: 7px 10px; }
  html[data-visual-a] .simneg-picker .sim-head { padding: 24px 16px 0; }
  html[data-visual-a] .simneg-picker .sim-head-title strong { font-size: 24px; }
  html[data-visual-a] .simneg-hint { margin: 6px 16px 10px; }
  html[data-visual-a] .simneg-list { padding: 6px 16px 24px; }
  html[data-visual-a] .rel-picker { padding: 24px 16px 40px; }
  html[data-visual-a] .rel-picker-head h1 { font-size: 24px; }
}

/* no celular a barra de baixo (bottom-nav) mede ~70 px e style.css reserva 58:
   a pílula do campo ficava por baixo dela */
@media (max-width: 768px) {
  html[data-visual-a] body.in-sim .content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* (14/10, P1) o fim do Simulador (Demo): o botão do relatório desta simulação (js/simulador.js) e o "Tentar de novo"
   da resposta que falhou (js/sim-core.js) */
.sim-rel-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 16px 12px; padding: 12px 14px 12px 16px; border: 1px solid rgba(10, 22, 40, 0.12); border-radius: 16px; background: #f7f9fc; }
.sim-rel-cta[hidden] { display: none; }
.sim-rel-cta p { margin: 0; flex: 1 1 220px; font-size: 14px; line-height: 1.45; color: #3c4655; }
.sim-rel-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: none; border-radius: 999px; background: #0a2540; color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.sim-rel-btn:hover { background: #0a1628; }
.sim-rel-btn svg { width: 17px; height: 17px; }
.sim-erro { flex-direction: column; align-items: flex-start; gap: 8px; }
.sim-retry { min-height: 40px; padding: 0 14px; border: 1px solid rgba(10, 22, 40, 0.18); border-radius: 999px; background: #fff; color: #0a1628; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.sim-retry:hover { background: #f2f4f7; }