/* =====================================================================
   SYNAPSE 2.0 — interface nova (Figma "New Screens")
   Tokens do Figma: branco + azul Konecta #2800c8 + amarelo #f0fa00,
   Poppins, cartões arredondados e o símbolo N da marca.
   O JS (js/script.js) alterna as mesmas classes de antes — aqui só muda
   a aparência: .visible, .active, .show-confirm, .paused, .tma-alerta…
   ===================================================================== */

/* ---------- Fontes locais (sem Google Fonts) ---------- */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/poppins-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/poppins-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../assets/fonts/poppins-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../assets/fonts/poppins-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../assets/fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../assets/fonts/poppins-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../assets/fonts/poppins-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../assets/fonts/poppins-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --blue: #2800c8;
  --navy: #0f0f72;
  --yellow: #f0fa00;
  --paper: #f2f0eb;
  --ink: #171717;
  --muted: #68728d;
  --line: #d8dce8;
  --line-soft: #d5dceb;
  --cyan: #00aeef;
  --cyan-soft: #e2f6fc;
  --green: #00b85a;
  --red: #ff4b6e;
  --rail-active: #4930e2;
  --warn-soft: #f5f1b4;
  --blue-soft: #c8d0ea;
  --mist: #f7f8fb;
  --header-h: 100px;
  --composer-h: 59px;
  --footer-h: 50px;
  --font: "Poppins", "Segoe UI", system-ui, sans-serif;
  --konecta-blue: #2800c8; /* nome usado pelo JS em alguns lugares */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.i { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-lg { width: 24px; height: 24px; }
.i-xl { width: 56px; height: 56px; stroke-width: 1.6; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 34px; border-radius: 999px; border: 2px solid transparent;
  font: 500 17px/1 var(--font); white-space: nowrap; transition: transform .2s, box-shadow .2s, background .2s;
}
.btn .i { font-size: 18px; }
.btn-yellow { background: var(--yellow); color: var(--navy); }
.btn-yellow:hover { box-shadow: 0 8px 22px rgba(40, 0, 200, .18); }
.btn-outline { background: #fff; color: var(--blue); border-color: var(--blue); font-weight: 600; }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-sm { height: 42px; padding: 0 22px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: background .2s; }
.icon-btn:hover { background: var(--line); }
.icon-btn .i { font-size: 16px; }

/* ---------- Marca ---------- */
/* O N muda de posição e tamanho a cada tela (Figma: N-logo-konecta.png). Valores = px do frame 1440×900 → vw (x, largura) e vh (y). */
.n-mark {
  position: absolute; left: var(--n-x, 44.44vw); top: var(--n-y, 58.33vh); width: var(--n-w, 65.28vw); height: auto;
  pointer-events: none; user-select: none; z-index: 0;
  transition: left 1s cubic-bezier(.2, .8, .2, 1), top 1s cubic-bezier(.2, .8, .2, 1), width 1s cubic-bezier(.2, .8, .2, 1);
}
.n-mark--intro { --n-x: 47.15vw; --n-y: 50vh; --n-w: 62.15vw; }
.n-mark--low { --n-x: 40.83vw; --n-y: 55.33vh; --n-w: 70.35vw; }
.n-mark--loader { --n-x: 43.75vw; --n-y: 48vh; --n-w: 67.85vw; }
#loading-evaluation-modal { overflow: hidden; }
#loading-evaluation-modal .loader-container { position: relative; z-index: 1; transform: translateY(-76px); }
#loading-evaluation-modal .loading-text .dots { display: block; height: 30px; margin-top: 4px; font-size: 26px; line-height: 30px; letter-spacing: 6px; }
#intro-logo-screen:has(#nome-cpf-screen.visible) { --n-x: 53.89vw; --n-y: 57vh; --n-w: 55.63vw; }
#intro-logo-screen:has(#aprender-praticar-screen.visible) { --n-x: 38.68vw; --n-y: 59vh; --n-w: 72.08vw; }
#intro-logo-screen:has(#senha-inicio-screen.visible) { --n-x: 39.31vw; --n-y: 41.33vh; --n-w: 71.94vw; }
#intro-logo-screen:has(#boas-vindas-screen.visible) { --n-x: 32.36vw; --n-y: 52.33vh; --n-w: 80.42vw; }
.yellow-accent { display: none; } /* o Figma atual não tem mais o acento amarelo solto */
.yellow-accent--stage { display: none; }
/* O acento amarelo da capa acompanha as telas de entrada; some só no "aprender ou praticar" (Figma 04) */
#intro-logo-screen:has(#aprender-praticar-screen.visible) > .yellow-accent { opacity: 0; }
#intro-logo-screen > .yellow-accent { transition: opacity .6s; }

/* Logo do Synapse: assets/imagens/SynapseLogo-konecta.svg (azul) e SynapseLogo.svg (branca).
   O SVG do arquivo tem margem em cima/embaixo; o viewBox do <svg> recorta só o desenho (proporção 4096:738).
   O "S" começa em 14,04% da largura — o "by Konecta" alinha com ele. */
.synapse-logo { display: block; height: auto; flex: none; overflow: hidden; }
.lockup { --logo-w: clamp(367px, 43vw, 620px); position: absolute; left: 13.2vw; top: 50%; transform: translateY(-70%); z-index: 2; display: flex; flex-direction: column; transition: opacity .8s; }
.lockup-logo { width: var(--logo-w); }
.lockup-sub { font-weight: 500; font-size: clamp(18px, 1.9vw, 27px); color: var(--blue); margin: -8px 0 0 calc(var(--logo-w) * .1404 + 12px); }
.lockup-mini { display: flex; flex-direction: column; line-height: 1.1; }
.lockup-mini .synapse-logo { width: 138px; }
.lockup-mini span { font-size: 12px; color: var(--muted); margin: 3px 0 0 20px; }

/* =====================================================================
   1) INTRO EM VÍDEO
   ===================================================================== */
.video-intro-overlay {
  position: fixed; inset: 0; z-index: 1000; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; transition: opacity 1s ease;
}
#video-intro-screen .lockup-mini { position: absolute; left: 60px; top: 51px; }
.intro-video-shell {
  position: absolute; z-index: 2; left: 8.33vw; top: 14.44vh; width: 63.89vw; height: 71.11vh;
  background: var(--blue); border-radius: 28px; overflow: hidden; box-shadow: 0 30px 80px rgba(40, 0, 200, .22);
}
.intro-video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--blue); }
.intro-video-eyebrow { position: absolute; left: 32px; top: 34px; color: #fff; font: 600 11px var(--font); letter-spacing: .08em; }
.intro-video-meta { position: absolute; left: 32px; bottom: 66px; display: flex; flex-direction: column; gap: 2px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.intro-video-meta strong { font-size: 22px; font-weight: 600; }
.intro-video-meta span { font-size: 13px; opacity: .85; }
.intro-progress { position: absolute; left: 32px; right: 32px; bottom: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.intro-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
.intro-progress-zone { position: absolute; right: 0; top: 0; bottom: 0; width: 12%; background: var(--yellow); opacity: .9; }
.intro-video-time { position: absolute; left: 32px; bottom: 8px; font: 400 12px/18px var(--font); color: #fff; }
.intro-video-hint { position: absolute; right: 32px; bottom: 8px; font: 400 12px/18px var(--font); color: #fff; }
#video-intro-screen .n-mark { z-index: 0; }

/* =====================================================================
   2) CAPA + TELAS DE ENTRADA
   ===================================================================== */
.grainient-bg { display: none; }
.scroll-hint {
  position: absolute; left: 12.5vw; bottom: 4vh; z-index: 3; background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 19px; width: 300px;
  opacity: 0; pointer-events: none; transition: opacity .8s;
}
.scroll-hint.visible { opacity: 1; pointer-events: auto; }
.scroll-hint-pill { width: 100%; height: 55px; border: 2px solid var(--blue); border-radius: 28px; display: flex; align-items: center; justify-content: center; font: 600 17px var(--font); color: var(--blue); background: #fff; transition: background .25s, color .25s; }
.scroll-hint:hover .scroll-hint-pill { background: var(--blue); color: #fff; }
.scroll-hint-chev { font-size: 22px; stroke-width: 3; color: var(--blue); animation: hint-bounce 1.6s ease-in-out infinite; }
@keyframes hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.synapse-fala {
  position: absolute; left: 13.2vw; top: 50%; transform: translateY(-50%); z-index: 3; opacity: 0;
  font: 500 clamp(44px, 5.6vw, 80px)/1.1 var(--font); color: var(--blue); transition: opacity .8s;
}
.synapse-fala.visible { opacity: 1; }
.synapse-fala-static {
  position: static; transform: none; opacity: 1 !important; z-index: 2; background: var(--paper); border-radius: 27px;
  padding: 26px 24px 15px; font-size: clamp(26px, 2.78vw, 40px); text-align: center; width: min(752px, 92vw); line-height: 1.25;
}
.synapse-fala-static strong { font-weight: 600; }
.aprender-praticar-title { width: min(752px, 92vw); white-space: nowrap; }

.synapse-form-stage {
  position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center;
  padding-top: clamp(40px, 12.44vh, 112px); opacity: 0; transition: opacity .8s ease;
}
.synapse-form-stage.visible { opacity: 1; }

.stage-card {
  width: min(752px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 28px;
  padding: 38px 60px 66px; margin-top: 59px; display: flex; flex-direction: column; gap: 0; z-index: 2;
  box-shadow: 0 26px 70px rgba(40, 0, 200, .08);
}
.stage-card .btn { align-self: center; margin-top: 50px; min-width: 260px; height: 64px; }
.cpf-pronome-row { display: flex; flex-direction: column; }
.field-label { font: 500 13px/20px var(--font); color: var(--muted); margin: 0; }
.synapse-input {
  width: 100%; height: 60px; padding: 0 24px; border-radius: 14px; border: 2px solid transparent;
  background: var(--paper); font: 400 18px var(--font); color: var(--ink); outline: none; transition: border-color .2s, background .2s;
}
.synapse-input:focus { border-color: var(--blue); background: #fff; }
.nome-cpf-form .synapse-input { margin-top: 6px; }
.synapse-input::placeholder { color: var(--muted); }

/* Pronome: três chips separados, centralizados (Figma 03). O rótulo alinha com o primeiro chip. */
.pronoun-block { width: 448px; max-width: 100%; margin: 26px auto 0; }
.pronoun-block .field-label { display: block; margin-bottom: 6px; }
.pronoun-group-synapse { display: flex; gap: 14px; width: 100%; }
.pronoun-slider { display: none; } /* o script.js ainda move este elemento; o destaque agora é o próprio chip .active */
.pronoun-btn-synapse { flex: none; width: 150px; height: 48px; border: 1px solid var(--line); background: #fff; border-radius: 24px; font: 500 15px var(--font); color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.pronoun-btn-synapse:last-of-type { width: 120px; }
.pronoun-btn-synapse:hover { border-color: var(--blue); }
.pronoun-btn-synapse.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.aprender-praticar-group { position: relative; display: flex; gap: 60px; width: min(1180px, 92vw); margin-top: clamp(36px, 11vh, 99px); z-index: 2; }
.modo-card {
  position: relative; flex: 1; min-height: 272px; padding: 48px; border-radius: 28px; text-align: left; border: 2px solid var(--ink);
  display: flex; flex-direction: column; gap: 36px; transition: translate .3s, box-shadow .3s;
}
.modo-card--light { background: #fff; color: var(--blue); }
.modo-card--blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.modo-card-head { display: flex; align-items: center; gap: 20px; }
.modo-card-title { font: 600 29px var(--font); }
.modo-desc-synapse { font: 400 17px/1.6 var(--font); max-width: 88%; color: var(--ink); }
.modo-card--blue .modo-desc-synapse { color: #fff; }
.modo-card-cta { position: absolute; right: 48px; bottom: 32px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; }
.modo-card--blue .modo-card-cta { background: var(--yellow); color: var(--navy); }
.modo-card:hover { translate: 0 -5px; box-shadow: 0 24px 50px rgba(40, 0, 200, .18); }
.modo-btn-fill { box-shadow: 0 0 0 5px var(--yellow); }
.mode-marker { display: none; position: absolute; left: 50%; top: 50%; width: 50px; height: 100px; margin: -50px 0 0 -25px; pointer-events: none; z-index: 3; }
.mode-marker i { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--blue); }
.mode-marker b { position: absolute; left: 0; top: 34%; width: 48px; height: 19px; background: var(--yellow); clip-path: polygon(6% 0, 100% 0, 78% 100%, 0 100%); }

.back-link { position: absolute; left: 52px; top: 48px; background: none; border: 0; display: inline-flex; align-items: center; gap: 4px; font: 600 14px var(--font); color: var(--blue); }
.senha-head { display: flex; align-items: center; gap: 16px; }
.senha-inicio-form { padding-bottom: 34px; }
.senha-inicio-form .synapse-input { padding-right: 64px; }
.senha-inicio-form .btn { margin-top: 62px; }
.senha-inicio-form .senha-inicio-erro-msg { margin: 10px 0 -40px; }
.senha-input-wrap { position: relative; margin-top: 28px; }
.senha-eye { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.senha-eye:hover { color: var(--blue); }
.senha-eye .i { font-size: 22px; }
.senha-badge { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.senha-badge .i { font-size: 22px; }
.senha-head strong { display: block; font: 600 17px/26px var(--font); }
.senha-head small { display: block; margin-top: -2px; font: 400 12px/18px var(--font); color: var(--muted); }
.senha-inicio-erro-msg { display: flex; align-items: center; gap: 8px; color: var(--red); font: 500 13px var(--font); margin-top: -8px; }
#senha-inicio-erro[style*="block"] { display: flex !important; }
.senha-inicio-form .synapse-input:focus { border-color: var(--blue); }

.synapse-orb-stage { align-items: flex-start; justify-content: center; padding-top: 0; padding-left: 13.2vw; }
/* largura limitada a ~36vw: o texto fica sempre à esquerda do símbolo N (que ocupa a direita) */
.boas-vindas-texto {
  position: static; transform: none; opacity: 0; max-width: 36vw; text-align: left; left: auto;
  font: 500 clamp(26px, 2.8vw, 44px)/1.28 var(--font); color: var(--ink);
}
.boas-vindas-texto.visible { opacity: 1; }
.boas-vindas-texto strong { font-weight: 600; color: var(--blue); background: linear-gradient(transparent 62%, var(--yellow) 62%); }
.boas-vindas-texto .bv-linha { display: block; white-space: nowrap; font-size: clamp(26px, 2.36vw, 34px); line-height: 1.5; color: var(--ink); }
.boas-vindas-texto .bv-sub { display: block; margin-top: -1px; font-size: clamp(20px, 1.88vw, 27px); line-height: 1.5; color: var(--blue); }
.boas-vindas-texto:has(.bv-lockup) { position: relative; top: -10.2vh; }
.boas-vindas-texto .bv-lockup { --logo-w: clamp(367px, 43vw, 620px); display: block; margin-top: 36px; }
.boas-vindas-texto .bv-lockup .synapse-logo { width: var(--logo-w); }
.boas-vindas-texto .bv-by { display: block; margin: -8px 0 0 calc(var(--logo-w) * .1404 + 12px); font: 500 clamp(18px, 1.9vw, 27px)/1.5 var(--font); color: var(--blue); }

/* =====================================================================
   3) SELEÇÃO DE NÍVEL
   ===================================================================== */
.level-scroll-screen { position: fixed; inset: 0; z-index: 900; background: var(--paper); overflow: hidden; }
.level-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.back-nav-btn {
  position: absolute; left: 28px; top: 26px; z-index: 8; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .18); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.back-nav-btn:hover { background: rgba(255, 255, 255, .34); }
.back-nav-btn .i { font-size: 22px; stroke-width: 2.4; }
.level-brand { position: absolute; left: 84px; top: 75px; z-index: 8; color: #fff; display: flex; flex-direction: column; gap: 8px; }
.level-brand-logo { width: 110px; }
.level-brand strong { font: 500 18px/30px var(--font); margin-top: -2px; }
.level-scroll-track, .level-scroll-pin, .level-panels { position: absolute; inset: 0; }
.level-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; cursor: pointer; }
.level-panel:first-child { opacity: 1; visibility: visible; }
.level-shell {
  position: relative; z-index: 2; width: min(780px, 88vw); background: #fff; border: 1px solid #cfd6e8; border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 16px rgba(255, 255, 255, .72), 0 30px 80px rgba(40, 0, 200, .12); transform: translateY(-3vh);
}
.level-shell-caption { padding: 40px 60px 34px; font: 600 18px var(--font); color: var(--blue); border-bottom: 1px solid #e2e5ee; }
.level-shell-body { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 30px 60px 50px; align-items: center; }
.level-panel-title { font: 600 58px/1.2 var(--font); color: var(--blue); }
.level-line { position: relative; display: block; height: 2px; background: #d3d8e8; margin: 14px 0 24px; }
.level-line i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; }
.level-line i:first-child { left: -4px; background: var(--yellow); }
.level-line i:last-child { right: -4px; background: #a9b8ff; }
.level-availability { font: 500 18px var(--font); color: var(--blue); }
.level-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 26px; }
.level-tags li { padding: 5px 12px; border-radius: 14px; background: var(--paper); font: 500 12px var(--font); color: var(--navy); }
.level-start { height: 64px; padding: 0 44px; min-width: 260px; pointer-events: none; }
.level-preview { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--blue); box-shadow: 0 16px 40px rgba(40, 0, 200, .25); }
.level-panel-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.level-panel-scrim { display: none; }
.level-panel-confirm {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 15, 114, .6); opacity: 0; pointer-events: none; transition: opacity .35s; cursor: default;
}
.level-panel.show-confirm .level-panel-confirm { opacity: 1; pointer-events: auto; }
.level-panel.show-lock .level-panel-info { opacity: .5; }

.level-side { position: absolute; top: calc(50% - 22px); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: var(--blue); }
.level-side { transform: translateX(-50%); }
.level-side--prev { left: max(52px, calc(50% - 500px)); }
.level-side--next { left: min(calc(100% - 52px), calc(50% + 500px)); }
.level-side::after { content: ""; position: absolute; top: 22px; width: 62px; height: 1px; background: #c8d0ea; pointer-events: none; }
.level-side--prev::after { left: calc(50% + 22px); }
.level-side--next::after { right: calc(50% + 22px); }
.level-side-btn { width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1.5px solid var(--blue-soft); display: flex; align-items: center; justify-content: center; transition: background .2s, scale .2s; }
.level-side-btn .i { font-size: 22px; stroke-width: 2.4; }
.level-side:hover:not(:disabled) .level-side-btn { background: var(--blue); color: #fff; scale: 1.06; }
.level-side-label { font: 600 12px/18px var(--font); background: rgba(255, 255, 255, .85); padding: 0 8px; border-radius: 8px; }
.level-side:disabled { opacity: .35; cursor: default; }

.level-scroll-dots { position: absolute; left: 50%; bottom: 11.11vh; z-index: 6; transform: translateX(-50%); width: min(1000px, 84vw); height: 60px; display: flex; justify-content: space-between; padding: 0 clamp(40px, 9.2%, 92px); }
.level-track-line { position: absolute; left: 0; right: 0; top: 7.5px; height: 1px; background: #aeb9de; }
.level-dot { position: relative; width: 16px; height: 16px; padding: 0; border: 0; background: none; }
.level-dot i { position: absolute; inset: 0; border-radius: 50%; background: #fff; border: 1.5px solid var(--blue); transition: background .3s, border-color .3s, transform .3s; }
.level-dot span { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 13px var(--font); color: var(--blue); background: rgba(255, 255, 255, .85); padding: 1px 10px; border-radius: 10px; }
.level-dot.active i { background: var(--yellow); border-color: var(--yellow); transform: scale(1.3); box-shadow: 0 0 0 5px rgba(240, 250, 0, .3); }
.level-dot.visitado i { background: var(--blue); }

/* Cartão de confirmação / modais (compartilhado) */
.modal-card {
  position: relative; width: min(640px, 92vw); background: #fff; border-radius: 28px; padding: 52px 48px 44px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(40, 0, 200, .28);
}
.modal-bar { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--yellow); }
.synapse-confirm-question { font: 600 28px/1.25 var(--font); color: var(--blue); }
.modal-context { margin-top: 12px; font: 500 16px var(--font); color: var(--muted); }
.synapse-confirm-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; }
.tour-intro-card { padding: 48px 48px 44px; }
.tour-intro-card .synapse-confirm-question { line-height: 42px; }
.tour-intro-card .synapse-confirm-btn { height: 56px; padding: 0 32px; }
.level-panel-confirm .modal-card { padding: 52px 48px 48px; }
.level-panel-confirm .synapse-confirm-question { font-size: 28px; line-height: 42px; }
.level-panel-confirm .modal-context { margin-top: 16px; line-height: 24px; }
.level-panel-confirm .synapse-confirm-actions { margin-top: 38px; gap: 20px; flex-wrap: nowrap; }
.level-panel-confirm .synapse-confirm-btn { height: 56px; padding: 0; }
.level-panel-confirm .synapse-confirm-btn-fill { width: 200px; }
.level-panel-confirm .synapse-confirm-btn-outline { width: 324px; }

/* =====================================================================
   4) SIMULADOR
   ===================================================================== */
.app-container { position: fixed; inset: 0; z-index: 500; display: flex; background: #fff; }
.gradient-bg { display: none; }

/* Rail azul */
.rail { width: 72px; flex: none; background: var(--blue); display: flex; flex-direction: column; align-items: center; padding-top: 31px; gap: 0; }
.rail-letter { font: 600 28px/1 var(--font); color: #fff; height: 35px; display: flex; align-items: center; }
.sidebar-settings-btn { margin-top: -4px; width: 44px; height: 44px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .3s; }
.sidebar-settings-btn:hover { background: rgba(255, 255, 255, .28); transform: rotate(45deg); }

/* Sidebar */
.sidebar { width: 300px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 39px 24px 20px 24px; min-height: 0; background: #fff; }
.logo-container { display: flex; flex-direction: column; align-items: center; }
.logo-title { width: min(190px, 100%); }
.logo-sub { font: 400 12px/18px var(--font); color: var(--muted); margin: 2px 0 0; text-align: center; }
.sidebar-divider { height: 1px; background: var(--line); margin: 16px 0 15px; }
.search-container { position: relative; }
.search-box { position: relative; display: flex; align-items: center; gap: 8px; }
.search-box .search-icon-btn { margin-left: -2px; }
.search-box #sidebar-search-input { margin-left: 7px; }
.search-icon-btn, .search-icon { width: 24px; height: 24px; flex: none; background: none; border: 0; padding: 0; color: var(--blue); display: flex; align-items: center; justify-content: center; }
.search-icon-btn .i, .search-icon .i { font-size: 22px; stroke-width: 1.8; }
.search-icon-btn:hover { color: var(--navy); transform: scale(1.1); }
#sidebar-search-input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--paper); font: 400 14px var(--font); outline: none; }
#sidebar-search-input::placeholder { color: var(--muted); }
#sidebar-search-input:focus { box-shadow: 0 0 0 2px var(--blue); }
.filter-popup { position: absolute; z-index: 20; left: 0; top: calc(100% + 10px); width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 10px 10px; box-shadow: 0 18px 40px rgba(40, 0, 200, .18); }
.filter-popup-title { padding: 0 12px 10px; font: 600 10.5px var(--font); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.filter-popup-option { width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: 500 13.5px var(--font); color: var(--ink); text-align: left; }
.filter-popup-option .i { opacity: 0; font-size: 16px; }
.filter-popup-option:hover { background: var(--paper); }
.filter-popup-option.active { background: var(--blue); color: #fff; }
.filter-popup-option.active .i { opacity: 1; }
.sidebar-section-label { margin: 41px 0 1px 2px; font: 500 11px/17px var(--font); letter-spacing: .14em; color: var(--muted); }
.contact-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 8px 8px 6px; margin: 0 -8px 0 -6px; }
.contact-list-empty { padding: 20px 6px; font: 400 13px var(--font); color: var(--muted); }
.contact-item { position: relative; display: flex; gap: 14px; padding: 15px 8px 15px 18px; border-radius: 10px; background: var(--paper); cursor: pointer; height: 78px; transition: background .25s, translate .25s; flex: none; }
.contact-item:hover { translate: 2px 0; }
.avatar { position: relative; flex: none; width: 48px; height: 48px; }
.avatar-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green); background: var(--blue-soft); display: block; }
.status-dot { position: absolute; right: -1px; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 1.5px solid #fff; z-index: 1; }
.contact-info { display: contents; }
.contact-info h3 { position: absolute; left: 80px; top: 17px; right: 82px; font: 500 14px/21px var(--font); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-info p { position: absolute; left: 80px; top: 39px; right: 82px; font: 400 10.5px/16px var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.time-status { position: absolute; left: 80px; top: 44px; font: 500 10px/15px var(--font); color: var(--muted); }
.last-interaction-time { position: absolute; right: 7px; top: 44px; font: 500 11px/17px var(--font); color: var(--muted); }
/* Fila (níveis 3 e 4): avatar 44, prévia da última mensagem e status em 3 linhas, hora no topo (Figma 30) */
.contact-list.modo-fila .avatar { width: 44px; height: 44px; margin: 2px 0 0 -4px; }
.contact-list.modo-fila .avatar-img { width: 44px; height: 44px; }
.contact-list.modo-fila .status-dot { width: 10px; height: 10px; right: 0; bottom: 0; }
.contact-list.modo-fila .contact-info h3 { left: 68px; top: 14px; right: 60px; font-size: 13.5px; line-height: 20px; }
.contact-list.modo-fila .contact-info p { display: block; left: 68px; top: 36px; right: 40px; }
.contact-list.modo-fila .time-status { left: 68px; top: 54px; }
.contact-list.modo-fila .last-interaction-time { top: 14px; font-size: 10.5px; line-height: 16px; }
.contact-list:not(.modo-fila) .status-dot { display: none; }
.contact-list.modo-fila .contact-item.active { background: var(--blue); }
.contact-list.modo-fila .contact-item.active h3 { color: #fff; }
.contact-list.modo-fila .contact-item.active p,
.contact-list.modo-fila .contact-item.active .time-status { color: rgba(255, 255, 255, .85); }
.contact-list.modo-fila .contact-item.active .avatar-img { border-color: #fff; }

/* Chat */
.chat-area { --tma-pct: 100; position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.chat-grainient-bg, .chat-fluid-bg { display: none; }

.chat-status-bar { position: relative; z-index: 4; height: var(--header-h); flex: none; padding: 12px 100px 0 30px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-tabs-row { display: flex; align-items: center; gap: 10px; height: 38px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.chat-tab-pill { flex: none; height: 38px; display: inline-flex; align-items: center; gap: 10px; padding: 0 8px 0 6px; border-radius: 19px; font: 500 13px var(--font); background: var(--paper); color: var(--ink); cursor: pointer; transition: background .25s, translate .25s; }
.chat-tab-pill.chat-tab-active { background: var(--blue); color: #fff; cursor: default; }
.chat-tab-pill.chat-tab-active > .chat-tab-avatar + span::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1.5px #fff; }
.chat-tab-pill.chat-tab-inactive:hover { background: var(--blue-soft); translate: 0 -1px; }
.chat-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.chat-tab-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: var(--blue-soft); border: 1.5px solid #fff; }
.chat-tab-pill.chat-tab-inactive { padding-right: 14px; }
.chat-tab-close { margin-left: -4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; display: flex; align-items: center; justify-content: center; }
.chat-tab-close:hover { background: rgba(255, 255, 255, .22); }
.chat-tab-close .i { font-size: 14px; stroke-width: 2.4; }
.chat-status-row { flex: none; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chat-status-active { display: flex; align-items: center; gap: 10px; font: 500 15px var(--font); white-space: nowrap; }
.chat-status-spinner {
  --tma-pct: 100; display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--blue) calc(var(--tma-pct) * 1%), var(--line) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 62%); mask: radial-gradient(farthest-side, transparent 60%, #000 62%);
}
.chat-status-spinner.tma-alerta { background: conic-gradient(var(--red) calc(var(--tma-pct) * 1%), var(--line) 0); animation: tma-pulse 1s ease-in-out infinite; }
@keyframes tma-pulse { 50% { opacity: .45; } }
.chat-status-actions { display: flex; align-items: center; gap: 12px; }
.client-info-toggle, .chat-pause-btn, .finish-btn {
  height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; border-radius: 18px; background: #fff;
  font: 500 12px var(--font); white-space: nowrap; border: 1.5px solid var(--line); transition: background .2s, color .2s, box-shadow .2s;
}
.client-info-toggle .i, .chat-pause-btn .i, .finish-btn .i { font-size: 16px; }
.client-info-toggle { color: var(--blue); border-color: var(--blue); }
.client-info-toggle:hover, .client-info-toggle.aberto { background: var(--blue); color: #fff; }
.chat-pause-btn { color: var(--red); border-color: var(--red); }
.chat-pause-btn:hover { background: var(--red); color: #fff; }
.chat-pause-btn .ic-play { display: none; }
.chat-pause-btn.paused { background: var(--yellow); border-color: var(--yellow); color: var(--navy); font-weight: 600; }
.chat-pause-btn.paused .ic-pause { display: none; }
.chat-pause-btn.paused .ic-play { display: block; }
.finish-btn { display: none; color: var(--muted); }
.finish-btn.visivel { display: inline-flex; }
.finish-btn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.finish-btn:disabled { opacity: .55; cursor: not-allowed; }
.finish-btn.concluido { background: var(--green); border-color: var(--green); color: #fff; }

/* Mensagens */
.messages-container { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 100px 20px 30px; display: flex; flex-direction: column; gap: 22px; scroll-behavior: smooth; }
.message { display: flex; gap: 12px; align-items: flex-start; width: 100%; flex: none; }
.message.ai-message { justify-content: flex-start; }
.message.user-message { justify-content: flex-end; }
.chat-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--green); background: var(--blue-soft); }
.message-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: min(473px, 100%); }
.sender-name { font: 500 12px var(--font); color: var(--muted); }
.bubble { padding: 16px 20px 13px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font: 400 15px/1.55 var(--font); color: var(--ink); overflow-wrap: anywhere; }
.bubble .timestamp { display: block; margin-top: 8px; font: 400 10px var(--font); color: var(--muted); }
.user-message .chat-avatar, .user-message .sender-name { display: none; }
.user-message .bubble { background: var(--blue); border-color: var(--blue); color: #fff; }
.user-message .bubble .timestamp { color: rgba(255, 255, 255, .75); text-align: right; }
.chat-link { color: var(--blue); text-decoration: underline; }
.user-message .chat-link { color: var(--yellow); }
.loader { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 18px 0 0 rgba(40, 0, 200, .3), -18px 0 0 rgba(40, 0, 200, .3); animation: loader-dots 1s infinite ease-in-out; }
@keyframes loader-dots {
  0% { background: rgba(40, 0, 200, .3); box-shadow: 18px 0 0 rgba(40, 0, 200, .3), -18px 0 0 var(--blue); }
  50% { background: var(--blue); box-shadow: 18px 0 0 rgba(40, 0, 200, .3), -18px 0 0 rgba(40, 0, 200, .3); }
  100% { background: rgba(40, 0, 200, .3); box-shadow: 18px 0 0 var(--blue), -18px 0 0 rgba(40, 0, 200, .3); }
}
.evidence-bubble { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.evidence-bubble img { width: min(320px, 100%); border-radius: 8px; display: block; background: #fff; }
.evidence-caption { font: 500 11px var(--font); color: var(--muted); }
.fila-placeholder { margin: auto; text-align: center; max-width: 380px; font: 500 18px/1.5 var(--font); color: var(--ink); }
.fila-placeholder::before { content: ""; display: block; width: 120px; height: 120px; margin: 0 auto 22px; border-radius: 50%; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%232800c8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-5 4v-4H4z'/%3E%3C/svg%3E") center / 48px no-repeat; }

/* Linha do TMA */
.tma-line { position: relative; flex: none; height: 3px; margin: 0 100px 0 28px; background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.tma-line-zone { position: absolute; right: 0; top: 0; bottom: 0; width: 20%; background: var(--yellow); }
.tma-line-fill { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: calc(100% - var(--tma-pct, 100) * 1%); background: var(--blue); transition: width 1s linear; }
.chat-area.tma-alerta .tma-line-fill { background: var(--red); }

/* Compositor */
.input-wrapper { position: relative; flex: none; padding: 61px 100px 0 30px; }
.input-container { position: relative; }
.input-pill { display: flex; align-items: center; gap: 10px; height: var(--composer-h); padding: 0 7px 0 10px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.input-pill:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(40, 0, 200, .1); }
.input-dicas-toggle { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1.5px solid transparent; background: var(--cyan-soft); color: var(--cyan); display: flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s, transform .25s; }
.input-dicas-toggle:hover { transform: scale(1.08); }
.input-dicas-icon { font-size: 17px; } /* ícone assets/imagens/icondicas.png vetorizado (símbolo #i-dica), 19px de largura como no Figma */
.input-dicas-close-icon { display: none; align-items: center; justify-content: center; }
.input-dicas-close-icon .i { font-size: 18px; }
.input-dicas-toggle.dica-aberta { background: #fff; border-color: var(--cyan); }
.input-dicas-toggle.dica-aberta .input-dicas-icon { display: none; }
.input-dicas-toggle.dica-aberta .input-dicas-close-icon { display: flex; }
#user-input { flex: 1; min-width: 0; height: 24px; max-height: 44px; padding: 0 0 0 3px; resize: none; border: 0; outline: none; background: transparent; font: 400 14px/1.5 var(--font); }
#user-input::placeholder { color: var(--muted); }
#user-input:disabled { cursor: not-allowed; }
#mic-waveform { flex: 1; min-width: 0; height: 35px; }
.mic-btn { position: relative; margin-right: -2px; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: none; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.mic-btn .i { font-size: 22px; stroke-width: 1.7; }
.mic-btn:hover { background: rgba(23, 23, 23, .07); }
.mic-btn.recording { background: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(255, 75, 110, .2); }
.send-btn { width: 43px; height: 43px; flex: none; border-radius: 50%; border: 0; background: var(--yellow); color: var(--navy); display: flex; align-items: center; justify-content: center; transition: scale .2s, opacity .2s; }
.send-btn .i { fill: currentColor; stroke: none; font-size: 22px; }
.send-btn:hover:not(:disabled) { scale: 1.08; }
.send-btn:disabled { opacity: .45; cursor: not-allowed; }
.footer-slogan { height: var(--footer-h); padding-top: 18px; display: flex; align-items: flex-start; justify-content: center; font: 400 11px/17px var(--font); color: var(--muted); }
.chat-area.em-pausa .input-pill { background: #eae8e3; }
.chat-area.em-pausa .input-wrapper::before {
  content: "Pausa ativa — o tempo do atendimento (TMA) está parado e não afeta sua nota";
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--footer-h) + var(--composer-h) + 22px + 74px);
  padding: 12px 22px; border-radius: 22px; background: var(--warn-soft); color: var(--navy); font: 500 13px var(--font); white-space: nowrap;
}

/* Dica da IA */
.ai-dica-panel {
  position: absolute; left: 30px; right: 100px; bottom: calc(var(--footer-h) + var(--composer-h) + 18px); z-index: 5;
  background: #fff; border: 1px solid var(--cyan); border-radius: 13px; padding: 21px 27px 32px 27px;
  box-shadow: 0 10px 30px rgba(0, 174, 239, .16); opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden;
  transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
}
.ai-dica-panel.visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.ai-dica-panel::after { content: ""; position: absolute; left: 41px; top: 100%; width: 2px; height: 18px; background: var(--cyan); }
.ai-dica-accent { position: absolute; left: 0; top: 23px; bottom: 18px; width: 5px; background: var(--cyan); border-radius: 0 3px 3px 0; }
.ai-dica-head { display: flex; align-items: center; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid #d8e8ee; margin-bottom: 20px; }
.ai-dica-icon { margin-right: 7px; width: 30px; height: 30px; border-radius: 50%; background: var(--cyan-soft); color: var(--cyan); display: flex; align-items: center; justify-content: center; flex: none; }
.ai-dica-icon .i { font-size: 14.5px; }
.ai-dica-titles { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ai-dica-titles strong { font: 600 17px/26px var(--font); }
.ai-dica-titles small { font: 500 11px/17px var(--font); color: var(--cyan); }
.ai-dica-status { display: inline-flex; align-items: center; justify-content: center; width: 132px; height: 28px; padding: 0; border-radius: 16px; background: var(--cyan-soft); color: var(--cyan); font: 600 10px var(--font); white-space: nowrap; }
.ai-dica-status[data-state="limite"], .ai-dica-status[data-state="erro"] { background: var(--paper); color: var(--muted); }
.ai-dica-label { display: block; font: 600 11px/17px var(--font); color: var(--navy); margin-bottom: 7px; }
.ai-dica-text { font: 400 15px/23px var(--font); color: var(--ink); }

/* Ficha do cliente (gaveta) */
.client-info-panel {
  position: absolute; top: var(--header-h); right: 0; bottom: 0; z-index: 6; width: min(420px, 100%); background: #fff;
  border-left: 1px solid var(--line); box-shadow: -10px 0 40px rgba(40, 0, 200, .14); overflow-y: auto;
  transform: translateX(105%); visibility: hidden; transition: transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s;
}
.client-info-panel.visible { transform: none; visibility: visible; transition-delay: 0s; }
.client-info-body { padding: 28px 28px 34px; display: flex; flex-direction: column; gap: 20px; }
.client-info-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.client-info-eyebrow { font: 600 20px var(--font); color: var(--blue); }
.client-info-top-actions { display: flex; align-items: center; gap: 10px; }
.client-info-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 14px; background: var(--cyan-soft); color: var(--navy); font: 600 10px var(--font); white-space: nowrap; }
.client-info-header { display: flex; align-items: center; gap: 14px; }
.client-info-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green); background: var(--blue-soft); }
.client-info-nome { font: 600 16px var(--font); }
.client-info-card-id { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 10px; background: var(--paper); color: var(--blue); font: 600 11px var(--font); }
.client-info-grid, .client-info-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.client-info-chip-label, .client-info-detail-label { font: 500 11px var(--font); color: var(--muted); display: block; margin-bottom: 3px; }
.client-info-chip-value { font: 500 13px/1.45 var(--font); }
.client-info-detail-wide { grid-column: 1 / -1; }
.client-info-section { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.client-info-label { font: 600 14px var(--font); color: var(--blue); }
.client-info-texto { font: 500 13px/1.5 var(--font); }
.client-info-section > .client-info-texto { font-weight: 400; }
.client-info-highlight { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--paper); color: var(--muted); }
.client-info-highlight .i { font-size: 18px; margin-top: 2px; }
.client-info-highlight .client-info-texto { color: inherit; font-size: 12px; }
.client-info-highlight.disponivel { background: var(--yellow); color: var(--navy); }
.client-info-guidance-list { display: flex; flex-direction: column; gap: 10px; }
.client-info-guidance-list li { position: relative; padding-left: 18px; font: 400 12px/1.5 var(--font); }
.client-info-guidance-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* =====================================================================
   5) TOUR
   ===================================================================== */
.tour-intro-overlay { position: fixed; inset: 0; z-index: 8000; align-items: center; justify-content: center; background: rgba(15, 15, 114, .6); opacity: 0; transition: opacity .5s; }
.tour-intro-overlay.visible { opacity: 1; }
.tour-coach-overlay { position: fixed; inset: 0; z-index: 8100; }
.tour-coach-highlight { position: fixed; top: 50%; left: 50%; width: 0; height: 0; border-radius: 16px; border: 3px solid var(--yellow); box-shadow: 0 0 0 9999px rgba(15, 15, 114, .6); pointer-events: none; }
.tour-coach-tooltip { position: fixed; z-index: 2; width: 400px; max-width: 92vw; padding: 26px 28px 26px; background: #fff; border-radius: 22px; box-shadow: 0 18px 44px rgba(40, 0, 200, .3); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.tour-coach-tooltip.visible { opacity: 1; transform: none; }
.tour-coach-pointer { position: absolute; width: 18px; height: 18px; background: #fff; transform: rotate(45deg); }
.tour-coach-tooltip[data-placement="bottom"] .tour-coach-pointer { top: -8px; left: var(--ptr-x, 40px); }
.tour-coach-tooltip[data-placement="top"] .tour-coach-pointer { bottom: -8px; left: var(--ptr-x, 40px); }
.tour-coach-tooltip[data-placement="right"] .tour-coach-pointer { left: -8px; top: var(--ptr-y, 40px); }
.tour-coach-step { display: block; font: 600 11px/17px var(--font); letter-spacing: .08em; color: var(--blue); margin-bottom: 7px; }
.tour-coach-text { font: 500 16px/24px var(--font); color: var(--ink); }
.tour-coach-text strong { font-weight: 600; }
.tour-coach-actions { display: flex; gap: 38px; margin-top: 32px; justify-content: flex-start; }
.tour-coach-btn { height: 44px; padding: 0 30px; font-size: 14px; }

/* =====================================================================
   6) CONFIGURAÇÕES
   ===================================================================== */
.settings-overlay { position: fixed; inset: 0; z-index: 7000; background: rgba(15, 15, 114, .62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s; }
.settings-overlay.visible { opacity: 1; }
.settings-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.settings-views { position: relative; width: 100%; height: 100%; }
.settings-view { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; max-width: 94vw; max-height: 94vh; }
.settings-view.visible { display: block; }
.settings-view-sons, .settings-view-usuario, .settings-view-sair { background: #fff; border-radius: 28px; padding: 52px 48px 44px; overflow: hidden auto; box-shadow: 0 24px 70px rgba(40, 0, 200, .3); }
.settings-view-sons { width: 600px; height: 420px; padding: 44px 48px 0; }
.settings-view-usuario { width: 900px; height: 600px; padding: 44px 48px 0; overflow: hidden auto; }
.settings-view-sons .settings-view-header, .settings-view-usuario .settings-view-header { gap: 12px; min-height: 42px; }
.settings-view-sons .settings-view-header .i-lg, .settings-view-usuario .settings-view-header .i-lg { width: 32px; height: 32px; }
.settings-view-sons h2, .settings-view-usuario h2 { line-height: 42px; }
.settings-view-sons .settings-view-header { margin-bottom: 48px; }
.settings-view-usuario .settings-view-header { margin-bottom: 26px; }
.settings-view-sair { width: 640px; }
.settings-view h2 { font: 600 28px var(--font); color: var(--blue); }
.settings-view-header { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; color: var(--blue); }
.settings-view-header .settings-voltar-btn { margin-left: auto; }

.settings-view-wheel { width: 540px; height: 540px; }
.settings-wheel-wrap { position: relative; width: 540px; height: 540px; border-radius: 50%; background: #fff; box-shadow: 0 20px 70px rgba(40, 0, 200, .35); }
.wheel-ring { position: absolute; inset: 34px; border: 1.5px solid var(--blue-soft); border-radius: 50%; }
.wheel-option {
  --x: 0px; --y: 0px; --s: 1; position: absolute; left: 50%; top: 50%; width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--line); color: var(--blue); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px var(--font); transform: translate(var(--x), var(--y)) scale(var(--s)); transition: background .25s, color .25s, transform .3s cubic-bezier(.2, .8, .2, 1), border-color .25s;
}
.wheel-option .i-xl { width: 40px; height: 40px; stroke-width: 1.8; }
.wheel-option--sons { --x: -149px; --y: -86px; }
.wheel-option--usuario { --x: 149px; --y: -86px; }
.wheel-option--sair { --x: 0px; --y: 172px; }
.wheel-option:hover { --s: 1.08; background: var(--blue); border-color: var(--blue); color: #fff; }
.settings-wheel-voltar { position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 16px var(--font); outline: 4px solid var(--yellow); outline-offset: 8px; transition: transform .3s; }
.settings-wheel-voltar:hover { transform: scale(1.06); }
.settings-wheel-voltar .i { font-size: 22px; stroke-width: 2.4; }

.settings-slider-row { margin-bottom: 34px; }
.settings-slider-label { display: flex; justify-content: space-between; margin-bottom: 18px; font: 500 16px/24px var(--font); }
.settings-slider { display: block; margin: 0; }
.settings-slider-label span:last-child { color: var(--blue); font-weight: 600; }
.settings-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; outline: none; background: linear-gradient(to right, var(--blue) 50%, var(--line) 50%); }
.settings-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--blue); cursor: pointer; }
.settings-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--blue); cursor: pointer; }

.settings-usuario-subheader { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-bottom: 24px; }
.settings-usuario-meta { display: flex; align-items: center; gap: 14px; font: 500 18px var(--font); }
.settings-usuario-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.settings-usuario-avatar .i { font-size: 24px; }
.settings-usuario-meta strong { font-weight: 600; }
.settings-level-ring { position: relative; width: 96px; height: 96px; flex: none; }
.settings-level-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.settings-level-ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: var(--line); }
.ring-fill { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1); }
.settings-level-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.settings-level-caption { font: 500 9px var(--font); color: var(--muted); }
.settings-level-num { font: 600 24px var(--font); color: var(--blue); }
.settings-level-title { font: 600 9px var(--font); color: var(--navy); }
.settings-usuario-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--line); margin-bottom: 41px; }
.settings-tab-btn { position: relative; padding: 0 0 12px; border: 0; background: none; font: 400 15px var(--font); color: var(--muted); }
.settings-tab-btn.active { color: var(--blue); font-weight: 600; }
.settings-tab-btn.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--blue) 0 70%, var(--yellow) 70%); }
.settings-tab-panel { display: none; }
.settings-tab-panel.visible { display: block; }
.settings-skills-row { display: grid; grid-template-columns: 1fr 412px; gap: 0; align-items: start; }
.settings-radar-wrap { position: relative; height: 320px; margin-top: -32px; }
.settings-skill-bars { display: flex; flex-direction: column; gap: 12px; }
.settings-skill-bar-row { display: grid; grid-template-columns: 44px 112px 164px 1fr; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--line-soft); border-radius: 14px; }
.settings-skill-bar-code { height: 24px; line-height: 24px; padding: 0; text-align: center; border-radius: 12px; background: var(--paper); color: var(--blue); font: 600 11px var(--font); }
.settings-skill-bar-label { font: 500 14px var(--font); }
.settings-skill-bar-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.settings-skill-bar-fill { height: 100%; border-radius: 4px; }
.settings-skill-bar-value { text-align: right; font: 600 15px var(--font); color: var(--blue); }
.settings-stats-row { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: stretch; }
.settings-stat-big { background: var(--blue); color: #fff; border-radius: 24px; padding: 34px 32px; display: flex; flex-direction: column; justify-content: space-between; min-height: 270px; }
.settings-stat-big .stat-eyebrow { font: 600 11px var(--font); letter-spacing: .1em; color: var(--yellow); }
.settings-stat-big strong { font: 800 96px/1 var(--font); color: var(--yellow); }
.settings-stat-big span:last-child { font: 500 18px var(--font); }
.settings-stats-levels { display: flex; flex-direction: column; gap: 18px; justify-content: space-between; }
.settings-stats-levels-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-stat-item { border: 1px solid var(--line-soft); border-radius: 20px; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.settings-stat-item strong { font: 600 44px/1 var(--font); color: var(--blue); }
.settings-stat-item span { display: flex; align-items: center; gap: 8px; font: 500 14px var(--font); color: var(--muted); }
.stat-diamond { display: inline-block; width: 9px; height: 9px; background: var(--yellow); transform: rotate(45deg); }
.settings-segmented-bar { display: flex; gap: 4px; height: 14px; }
.settings-segmented-bar .segment { border-radius: 7px; }

.settings-view-sair { padding: 48px 48px 44px; }
.settings-view-sair h2 { line-height: 42px; }
.settings-sair-body { display: block; margin: 14px 0 0; text-align: center; }
.settings-sair-body p { font: 400 16px/24px var(--font); }
.settings-sair-body strong { font-weight: 600; color: var(--blue); }
.settings-sair-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 16px; border-radius: 18px; background: var(--paper); font: 400 14px/21px var(--font); color: var(--muted); }
.settings-sair-chip strong { color: var(--blue); font-weight: 400; }
.settings-nivel-chip { margin-top: 0; width: 236px; height: 32px; justify-content: center; gap: 8px; padding: 0; border-radius: 16px; font-size: 13px; }
.settings-sair-actions { display: flex; justify-content: center; gap: 20px; margin-top: 32px; }
.settings-sair-btn { width: 200px; height: 56px; padding: 0; }

.settings-fechar-screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; padding-top: clamp(40px, 12vh, 112px); background: #fff; overflow: hidden; }
.settings-fechar-screen.visible { display: flex; }
.settings-fechar-grainient-bg { display: none; }
.settings-fechar-texto { transition: opacity .6s, transform .6s; position: static !important; width: min(1000px, 94vw) !important; font-size: clamp(22px, 2.2vw, 32px) !important; padding: 25px 24px 26px !important; }
.settings-fechar-actions { position: relative; z-index: 2; display: flex; gap: 60px; width: min(1180px, 92vw); margin-top: clamp(36px, 11vh, 99px); transition: opacity .6s, transform .6s; }
.settings-fechar-actions .modo-card { min-height: 272px; }
.settings-fechar-texto.saindo, .settings-fechar-actions.saindo { opacity: 0; transform: translateY(28px); }
.n-mark.saindo { opacity: 0; transform: translateY(40px); transition: opacity .8s, transform .8s; }
.settings-fade-black { position: absolute; inset: 0; z-index: 30; background: var(--navy); opacity: 0; pointer-events: none; transition: opacity 1s; }
.settings-fade-black.visible { opacity: 1; }

/* =====================================================================
   7) MODAIS + AVALIAÇÃO
   ===================================================================== */
.modal-overlay { position: fixed; inset: 0; z-index: 6000; align-items: center; justify-content: center; background: rgba(15, 15, 114, .6); }
.modal-overlay--white { background: #fff; z-index: 6500; }
.modal-overlay--page { background: #fff; align-items: stretch; justify-content: stretch; }

.custom-modal-box { padding: 52px 48px 40px; }
.custom-modal-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.custom-modal-icon { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--warn-soft); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.custom-modal-icon .i { font-size: 24px; }
.custom-modal-box h3 { font: 600 28px var(--font); color: var(--blue); }
.custom-modal-box p { font: 400 16px/1.5 var(--font); }
.custom-modal-actions { display: flex; gap: 18px; margin-top: 30px; }

.loader-container { text-align: center; }
.custom-loader { position: relative; width: 120px; height: 120px; margin: 0 auto 26px; }
.loader-ring, .loader-ring-track { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent 88%, #000 90%); mask: radial-gradient(farthest-side, transparent 88%, #000 90%); }
.loader-ring-track { background: var(--line); }
.loader-ring { z-index: 1; background: conic-gradient(var(--blue) 0 62%, transparent 0); animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font: 600 44px var(--font); color: var(--blue); }
.dots::after { content: ""; animation: dots 1.4s steps(1, end) infinite; color: var(--yellow); }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.dashboard-fullscreen { display: flex; width: 100%; height: 100%; }
.result-rail { width: 88px; flex: none; background: var(--blue); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 0 24px; }
.result-rail-btn { width: 64px; height: 68px; border-radius: 16px; border: 0; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: background .25s; }
.result-rail-btn .i { font-size: 24px; stroke-width: 1.9; }
.result-rail-btn span { font: 500 10px var(--font); opacity: .9; }
.result-rail-btn:hover { background: rgba(255, 255, 255, .12); }
.result-rail-btn.active { background: var(--rail-active); }
.result-rail-divider { width: 32px; height: 1px; background: #8274f3; margin: 18px 0 6px; }
.dashboard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 41px 74px 0 36px; }
.dashboard-header { position: relative; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); flex: none; }
.dashboard-header .lockup-mini span { margin: -2px 0 0 19px; line-height: 18px; }
.dashboard-eyebrow { display: block; margin-top: 33px; font: 600 10px/16px var(--font); letter-spacing: .06em; color: var(--blue); }
.dashboard-header h2 { font: 600 28px/42px var(--font); margin-top: 12px; }
.dashboard-header p { font: 400 14px/22px var(--font); color: var(--muted); margin-top: -2px; }
.dashboard-content { flex: 1; min-height: 0; overflow-y: auto; padding: 34px 0 20px 0; }
.result-view { display: none; }
.result-view.visible { display: block; }
.result-eyebrow { display: block; font: 600 10px var(--font); letter-spacing: .06em; color: #fff; }
.result-eyebrow--blue { color: var(--blue); }

.result-top { display: grid; grid-template-columns: 737fr 460fr; gap: 39px; max-width: 1236px; }
.result-hero { background: var(--blue); color: #fff; border-radius: 22px; padding: 40px 40px 12px; display: flex; flex-direction: column; gap: 0; min-height: 286px; }
.result-hero h3 { font: 600 30px/48px var(--font); margin-top: 20px; }
.result-hero-sub { margin-top: 13px; font: 400 16px/24px var(--font); }
.result-hero .result-eyebrow { line-height: 16px; }
.result-hero h3[data-state="failed"]::after, .result-hero h3[data-state="passed"]::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 14px; border-radius: 50%; }
.result-hero h3[data-state="passed"]::after { background: #5dffa0; }
.result-hero h3[data-state="failed"]::after { background: var(--red); }
.result-hero h3[data-state="error"] { font-size: 26px; }
/* Figma 25: só o número grande (o gráfico de rosca continua sendo calculado pelo Chart.js, mas fica oculto) */
.result-hero-score { display: flex; flex-direction: column; margin-top: 21px; }
.chart-wrapper { position: static; width: auto; height: auto; }
.chart-wrapper canvas { display: none !important; }
.chart-center-score { position: static; font: 600 54px/68px var(--font); color: var(--yellow); }
.result-hero-side { order: -1; display: flex; flex-direction: column; }
.result-score-label { font: 400 12px/18px var(--font); margin-bottom: 4px; }
.result-hero-link { display: none; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 20px; border-radius: 22px; border: 0; background: var(--yellow); color: var(--navy); font: 600 13px var(--font); }
.result-summary { background: var(--paper); border-radius: 22px; padding: 41px 38px 36px; display: flex; flex-direction: column; }
.learning-summary-stats { margin-top: auto; padding-top: 19px; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 192px 1fr; }
.learning-summary-stats span { display: block; font: 400 12px/18px var(--font); color: var(--muted); }
.learning-summary-stats strong { display: block; margin-top: 4px; font: 400 15px/24px var(--font); color: var(--ink); }
.learning-summary h4 { font: 600 16px/24px var(--font); margin-bottom: 7px; }
.learning-summary p { font: 400 12.5px/19px var(--font); }
.result-cards { display: grid; grid-template-columns: 389fr 389fr 404fr; gap: 27px; margin-top: 44px; max-width: 1236px; }
.result-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 17px; padding: 31px 32px; min-height: 196px; }
.result-card header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.result-card header .i { font-size: 28px; }
.result-card--next { background: var(--yellow); border-color: var(--yellow); padding: 35px 34px; text-align: left; display: flex; flex-direction: column; cursor: pointer; transition: translate .25s, box-shadow .25s; }
.result-card--next:hover { translate: 0 -3px; box-shadow: 0 14px 30px rgba(40, 0, 200, .14); }
.result-card--next h4 { font: 600 16px/25px var(--font); color: var(--ink); }
.result-card-next-row { display: flex; align-items: center; justify-content: space-between; margin-top: 19px; }
.result-card-next-row strong { font: 600 15px/24px var(--font); color: var(--ink); }
.result-card-next-row .i { font-size: 28px; }
.result-card h4 { font: 600 16px var(--font); }
.result-card--good header .i { color: var(--green); }
.result-card--gap header .i { color: var(--red); }
.result-card--critical { border: 1.5px solid var(--red); }
.result-card--critical header .i { color: var(--red); }
.result-card li { position: relative; padding-left: 16px; margin-bottom: 8px; font: 400 12.5px/1.5 var(--font); }
.result-card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.result-card li.summary-empty { color: var(--muted); }
.critical-error-detail { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.critical-error-detail strong { font: 600 12px var(--font); color: var(--red); }
.critical-error-detail p { font: 400 12.5px/1.5 var(--font); }
.critical-error-detail small { font: 400 10.5px var(--font); color: var(--muted); }
.modal-overlay--page.tem-erro-critico .result-hero { background: var(--navy); }

/* Evidências (Figma 26): cartão claro + cartão azul da evidência observada, depois a lista de dimensões */
.result-evidence-top { display: grid; grid-template-columns: 807fr 390fr; gap: 39px; max-width: 1236px; }
.result-evidence-top:has(.result-observed[hidden]) { grid-template-columns: 1fr; }
.result-hero-mini { background: var(--paper); border-radius: 17px; padding: 35px 36px; min-height: 141px; }
.result-hero-mini .result-eyebrow { line-height: 16px; }
.result-hero-mini h3 { font: 600 24px/34px var(--font); margin: 22px 0 2px; }
.result-hero-mini p { font: 400 13px/20px var(--font); color: var(--muted); }
.result-observed { background: var(--blue); color: #fff; border-radius: 17px; padding: 35px 34px; min-height: 141px; display: flex; flex-direction: column; }
.result-observed strong { font: 600 13px/20px var(--font); }
.result-observed p { margin-top: 13px; font: 400 13px/21px var(--font); }
.result-observed small { margin-top: auto; font: 400 11px/17px var(--font); opacity: .9; }
.result-skills-title { margin-top: 54px; font: 600 20px/30px var(--font); }
.result-skills-sub { margin: 1px 0 24px; font: 400 12px/20px var(--font); color: var(--muted); }
.accordion-container { display: flex; flex-direction: column; gap: 13px; max-width: 1236px; }
.accordion-item { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; transition: border-color .25s; animation: acc-in .5s both; }
@keyframes acc-in { from { opacity: 0; transform: translateY(8px); } }
.accordion-item[data-classificacao="nao_aplicavel"] { background: var(--mist); }
.accordion-item.active { border: 1.5px solid var(--blue); }
.accordion-header { display: grid; grid-template-columns: minmax(120px, 240px) 1fr 96px 120px 24px; align-items: center; gap: 16px; padding: 0 34px 0 26px; min-height: 41px; cursor: pointer; font: 600 13px var(--font); }
.accordion-header:hover { background: rgba(40, 0, 200, .03); }
.accordion-bar { height: 8px; border-radius: 4px; background: #d5dceb; position: relative; overflow: hidden; }
.accordion-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); border-radius: 4px; }
.accordion-score { text-align: right; font-weight: 600; }
.accordion-header > .accordion-chip { justify-self: start; }
.accordion-chip { display: inline-block; padding: 4px 12px; border-radius: 12px; font: 600 11px var(--font); background: var(--paper); color: var(--muted); white-space: nowrap; }
.accordion-chip[data-classificacao="atende"] { background: #e2f7ec; color: #009650; }
.accordion-chip[data-classificacao="parcial"] { background: #fdf1dc; color: #c87800; }
.accordion-chip[data-classificacao="nao_atende"] { background: #ffe8ed; color: var(--red); }
.accordion-chip[data-classificacao="erro_critico"] { background: var(--red); color: #fff; }
.accordion-arrow { color: var(--blue); font-size: 22px; transition: transform .3s; }
.accordion-item.active .accordion-arrow { transform: rotate(90deg); }
.accordion-body { display: none; padding: 4px 26px 22px; border-top: 1px solid var(--line-soft); }
.accordion-item.active .accordion-body { display: block; }
.accordion-body p { font: 400 14px/1.7 var(--font); margin-top: 14px; }
.accordion-class { display: flex; align-items: center; gap: 10px; }

.result-next-layout { display: grid; grid-template-columns: 697px 460px; gap: 79px; align-items: start; }
.result-next-hero { background: var(--blue); color: #fff; border-radius: 21px; padding: 42px 40px 10px; min-height: 336px; display: flex; flex-direction: column; }
.result-next-hero .result-eyebrow { line-height: 16px; }
.result-next-hero h3 { font: 600 31px/48px var(--font); margin: 28px 0 0; }
.result-next-hero p { font: 400 16px/24px var(--font); margin-top: 8px; }
.result-next-hero .result-next-focus, .result-next-hero .result-next-meta { font-size: 15px; margin-top: 22px; }
.result-next-hero .result-next-meta { margin-top: 8px; }
.result-next-cta { align-self: flex-start; margin-top: 14px; }
.result-next-side { padding-top: 20px; }
.result-next-heading { font: 600 17px/28px var(--font); margin-bottom: 32px; }
.result-actions { display: flex; flex-direction: column; gap: 17px; max-width: 460px; }
.result-action { display: flex; align-items: center; gap: 18px; height: 61px; padding: 0 22px 0 16px; background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; text-align: left; transition: border-color .25s, translate .25s, box-shadow .25s; }
.result-action:hover { border-color: var(--blue); translate: 4px 0; box-shadow: 0 10px 26px rgba(40, 0, 200, .1); }
.result-action-icon { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--paper); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.result-action-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.result-action-text strong { font: 600 15px var(--font); }
.result-action-text small { font: 400 11px var(--font); color: var(--muted); }
.result-action-arrow { color: var(--blue); font-size: 22px; }
#new-sim-btn { border-color: var(--blue); }

.result-tabs { position: relative; flex: none; display: flex; gap: 0; padding: 27px 0 65px; }
.result-tabs-track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-soft); }
.result-tabs-progress { position: absolute; left: 0; top: -2px; height: 4px; width: min(100%, calc((var(--result-idx, 0) + 1) * 33.5% + 19.4%)); background: linear-gradient(90deg, var(--blue) 0 calc((var(--result-idx, 0) + 1) * 33.5 / ((var(--result-idx, 0) + 1) * 33.5 + 19.4) * 100%), var(--yellow) 0); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.result-tab { width: 170px; padding: 0; border: 0; background: none; text-align: left; font: 400 11px/18px var(--font); color: var(--muted); }
.result-tab.active { color: var(--blue); font-weight: 600; }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1100px) {
  .sidebar { width: 250px; padding-inline: 18px; }
  .chat-status-bar, .messages-container, .input-wrapper { padding-right: 28px; }
  .tma-line { margin-right: 28px; }
  .ai-dica-panel { right: 28px; }
  .settings-skills-row, .settings-stats-row, .result-top { grid-template-columns: 1fr; }
  .level-shell-body { grid-template-columns: 1fr; }
  .level-preview { display: none; }
  .aprender-praticar-group, .settings-fechar-actions { flex-direction: column; gap: 22px; }
}
@media (max-height: 760px) {
  .level-shell-caption { padding: 26px 40px 22px; }
  .level-shell-body { padding: 22px 40px 32px; }
  .level-panel-title { font-size: 44px; }
  .level-scroll-dots { bottom: 6vh; }
}
/* =====================================================================
   RESPONSIVO 2.0
   Base de desenho = 1440×900 (Figma). Abaixo disso o layout se adapta:
   ≤1180 cabeçalho do chat compacto · ≤1100 tablet · ≤860 celular/tablet em pé · ≤520 celular pequeno
   ===================================================================== */
.sidebar-toggle-btn { display: none; }
.contact-info h3 { right: 58px; }
.time-status { right: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-list.modo-fila .contact-info h3 { right: 56px; }
.contact-list.modo-fila .time-status { right: 12px; }

/* --- ≤1180: botões do topo do chat só com ícone (o rótulo continua no title) --- */
@media (max-width: 1180px) {
  .client-info-toggle, .chat-pause-btn { font-size: 0; gap: 0; padding: 0; width: 36px; justify-content: center; }
  .client-info-toggle .i, .chat-pause-btn .i { font-size: 16px; }
  .chat-status-actions { gap: 8px; }
}

/* --- ≤1100: tablet --- */
@media (max-width: 1100px) {
  .level-side { top: auto; bottom: calc(11.11vh - 8px); }
  .level-side--prev { left: 34px; }
  .level-side--next { left: calc(100% - 34px); }
  .level-side::after { display: none; }
  .level-scroll-dots { width: min(1000px, calc(100% - 190px)); }
  .result-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .result-top, .result-evidence-top, .result-next-layout { grid-template-columns: 1fr; }
  .result-next-side { padding-top: 0; }
  .result-hero, .result-next-hero { min-height: 0; }
  .result-next-cta { margin-bottom: 30px; }
  .result-actions { max-width: none; }
  .settings-view-usuario, .settings-view-sons { height: auto; max-height: 94vh; padding-bottom: 36px; }
  .settings-view-sons { width: min(600px, 94vw); }
  .settings-view-usuario { width: min(900px, 94vw); }
  .settings-view-sair { width: min(640px, 94vw); }
  .settings-radar-wrap { margin-top: 0; }
  .settings-nivel-chip { width: auto; padding: 0 16px; }
}

/* --- ≤860: celular e tablet em pé --- */
@media (max-width: 860px) {
  /* chat: a barra azul vira uma faixa no topo e a fila vira uma gaveta */
  .app-container { flex-direction: column; }
  .rail { width: 100%; height: 52px; flex-direction: row; align-items: center; padding: 0 12px; }
  .rail-letter { height: auto; }
  .sidebar-settings-btn { margin-top: 0; width: 40px; height: 40px; }
  .sidebar-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; margin-right: 8px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; }
  .sidebar-toggle-btn .i { font-size: 22px; }
  .app-container .sidebar { position: absolute; top: 52px; left: 0; bottom: 0; width: min(320px, 88vw); z-index: 40; padding-top: 24px; transform: translateX(-104%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s; box-shadow: 12px 0 40px rgba(40, 0, 200, .18); overflow-y: auto; }
  .app-container.sidebar-aberta .sidebar { transform: none; visibility: visible; transition-delay: 0s; }
  .chat-area { flex: 1; min-height: 0; }
  .chat-status-bar { padding: 12px 12px 0 12px; }
  .chat-status-active { font-size: 14px; }
  .messages-container { padding: 20px 14px 14px 14px; }
  .message-content { max-width: 84%; }
  .tma-line { margin: 0 14px; }
  .input-wrapper { padding: 26px 14px 0 14px; }
  .ai-dica-panel { left: 14px; right: 14px; padding: 18px 16px 22px 20px; }
  .ai-dica-status { width: auto; padding: 0 12px; }
  .ai-dica-head { flex-wrap: wrap; }
  .client-info-panel { width: min(420px, 100%); }
  .chat-area.em-pausa .input-wrapper::before { white-space: normal; width: calc(100% - 28px); text-align: center; }

  /* entrada */
  .lockup { --logo-w: min(82vw, 620px); left: 6vw; }
  .scroll-hint { left: max(16px, calc(50% - 150px)); width: min(300px, calc(100% - 32px)); }
  .synapse-orb-stage { padding-left: 6vw; padding-right: 6vw; }
  .boas-vindas-texto { max-width: 88vw; }
  .boas-vindas-texto .bv-linha { white-space: normal; }
  .boas-vindas-texto .bv-lockup { --logo-w: min(80vw, 620px); }
  .aprender-praticar-title { white-space: normal; }
  .stage-card { padding: 30px 22px 34px; margin-top: 32px; }
  .pronoun-block { width: 100%; }
  .pronoun-group-synapse { flex-wrap: wrap; }
  .pronoun-btn-synapse, .pronoun-btn-synapse:last-of-type { flex: 1 1 28%; width: auto; }
  .synapse-form-stage { overflow-y: auto; padding-bottom: 28px; }
  .modo-card { min-height: 0; padding: 30px 28px 34px; gap: 20px; }
  .modo-card-title { font-size: 24px; }
  .modo-card-head .i-xl { width: 44px; height: 44px; }
  .modo-desc-synapse { max-width: 100%; }
  .modo-card-cta { right: 22px; bottom: 20px; }
  .settings-fechar-actions .modo-card { min-height: 0; }
  .intro-video-shell { left: 5vw; width: 90vw; top: 16vh; height: 58vh; }
  .intro-video-hint { display: none; }

  /* nível */
  .level-brand { left: 76px; top: 26px; }
  .level-brand-logo { width: 92px; }
  .level-brand strong { font-size: 15px; line-height: 22px; }
  .level-shell { width: 92vw; }
  .level-shell-caption { padding: 26px 26px 20px; }
  .level-shell-body { padding: 24px 26px 32px; }
  .level-panel-title { font-size: 46px; }
  .level-panel-confirm .modal-card { padding: 40px 26px 30px; }
  .level-panel-confirm .synapse-confirm-actions { flex-wrap: wrap; }
  .level-panel-confirm .synapse-confirm-btn-fill, .level-panel-confirm .synapse-confirm-btn-outline { width: 100%; }
  .level-scroll-dots { width: calc(100% - 150px); }
  .level-side--prev { left: 28px; }
  .level-side--next { left: calc(100% - 28px); }

  /* configurações */
  .settings-view-header { flex-wrap: wrap; }
  .settings-usuario-subheader { flex-wrap: wrap; height: auto; gap: 12px; }
  .settings-skill-bar-row { grid-template-columns: 44px 1fr 30px; }
  .settings-skill-bar-track { display: none; }
  .settings-stat-big strong { font-size: 72px; }
  .settings-sair-actions { flex-wrap: wrap; }
  .settings-sair-btn { flex: 1 1 140px; width: auto; }

  /* resultado: a barra lateral vira barra inferior */
  .dashboard-fullscreen { flex-direction: column-reverse; }
  .result-rail { width: 100%; height: 62px; flex-direction: row; justify-content: space-around; gap: 0; padding: 0 6px; }
  .result-rail-btn { flex: 1; width: auto; height: 52px; border-radius: 12px; }
  .result-rail-btn .i { font-size: 22px; }
  .result-rail-btn span { font-size: 9px; }
  .result-rail-divider { display: none; }
  .dashboard-main { padding: 22px 16px 0; }
  .dashboard-eyebrow { margin-top: 20px; }
  .dashboard-header h2 { font-size: 24px; line-height: 34px; }
  .dashboard-content { padding: 22px 0 16px; }
  .result-hero, .result-next-hero { padding: 30px 24px 26px; }
  .result-summary { padding: 30px 24px 26px; }
  .result-card--next { min-height: 120px; }
  .result-hero .chart-center-score { font-size: 46px; line-height: 56px; }
  .result-tabs { padding: 16px 0 12px; }
  .result-tab { width: auto; flex: 1; }
  .accordion-header { grid-template-columns: 1fr 76px 24px; gap: 10px; padding: 8px 14px; }
  .accordion-header .accordion-bar, .accordion-header > .accordion-chip { display: none; }
  .result-skills-title { margin-top: 32px; }
  .result-next-layout { gap: 30px; }
  .learning-summary-stats { grid-template-columns: 1fr 1fr; }
}

/* --- celular baixo / paisagem: telas de entrada rolam em vez de cortar --- */
@media (max-height: 700px) {
  .synapse-form-stage { overflow-y: auto; justify-content: flex-start; padding-bottom: 24px; }
  .stage-card { margin-top: 28px; }
}

/* --- ≤520: celular pequeno --- */
@media (max-width: 520px) {
  .finish-btn { font-size: 0; gap: 0; padding: 0; width: 36px; justify-content: center; }
  .finish-btn .i { font-size: 16px; }
  .chat-status-active { font-size: 13px; }
  .footer-slogan { display: none; }
  .input-wrapper { padding-top: 22px; }
  .rail-letter { font-size: 24px; }
  .synapse-fala-static { padding: 20px 16px 14px; }
  .modo-card-head { gap: 14px; }
  .level-shell-body { padding: 20px 20px 28px; }
  .level-panel-title { font-size: 40px; }
  .level-start { min-width: 0; width: 100%; }
  .level-scroll-dots { width: calc(100% - 130px); }
  .level-dot span { font-size: 10.5px; padding: 1px 5px; }
  .tour-coach-actions { gap: 12px; }
  .tour-coach-btn { padding: 0 20px; }
  .tour-intro-card { padding: 34px 22px 28px; }
  .tour-intro-card .synapse-confirm-actions { flex-wrap: wrap; }
  .result-cards { grid-template-columns: 1fr; }
  .result-observed, .result-hero-mini { padding: 26px 22px; }
  .custom-modal-box { padding: 40px 22px 30px; }
  .custom-modal-actions { flex-wrap: wrap; }
}

/* --- roda de opções escalonada em telas pequenas (largura ou altura) --- */
@media (max-width: 620px), (max-height: 620px) {
  .settings-view-wheel { zoom: .72; }
}
@media (max-width: 440px), (max-height: 500px) {
  .settings-view-wheel { zoom: .55; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}