/* Área do recrutador (aba inteira). Mesma linguagem do painel do Career,
   "vidro claro" (design-system/README.md e careers/app/globals.css): fundo
   suave com brilho azul, menu e barras flutuantes em vidro e conteúdo em
   superfícies sólidas. Os componentes básicos vêm do Recruiter (dist/base.css)
   e do BP (dist/componentes.css); este arquivo carrega depois deles e ajusta
   tokens e componentes sem mudar os outros produtos. */

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --ink: #1f2230;
  --navy: #1f2230;
  --muted: #5c5f68;
  --secondary: #5c5f68;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --border: #e2e6eb;
  --border-strong: #d5dae1;
  --accent-soft: #eaf6fe;
  --danger: #c8282e;
  --header-hover: #eaf6fe;
  --ring: rgb(14 122 184 / 0.28);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius: 18px;
  --r-item: 16.8px;
  --r-flutuante: 20px;
  --suave: #eef1f4;
  --linha: rgb(23 37 60 / 0.07);
  --item-ativo: #ffffff;
  --item-ativo-tinta: #166f9f;
  --item-ativo-icone: #0e7ab8;
  --item-hover: rgb(255 255 255 / 0.55);
  --chip: rgb(255 255 255 / 0.6);
  --glass-fill: rgb(255 255 255 / 0.58);
  --glass-edge: rgb(255 255 255 / 0.75);
  --surface-shadow: 0 1px 2px rgb(23 37 60 / 0.04), 0 12px 32px -18px rgb(23 37 60 / 0.14);
  --glass-shadow: 0 1px 2px rgb(23 37 60 / 0.05), 0 18px 44px -22px rgb(23 37 60 / 0.22);
  --sombra-item: 0 1px 2px rgb(23 37 60 / 0.08);
  --brilho-1: rgb(40 170 240 / 0.24);
  --brilho-2: rgb(88 96 169 / 0.13);
  --brilho-3: rgb(40 170 240 / 0.09);
  --pilula-sucesso: #e7f6ee;
  --pilula-sucesso-tinta: #0f6b41;
  --pilula-alerta: #fff4df;
  --pilula-alerta-tinta: #7a4e05;
  --pilula-perigo: #fdeceb;
  --pilula-perigo-tinta: #a8201f;
  --pilula-info: #eaf6fe;
  --pilula-info-tinta: #166f9f;
  --dica: #17253c;
  --dica-tinta: #ffffff;
  --grade: rgb(23 37 60 / 0.06);
  --grade-base: rgb(23 37 60 / 0.14);
  --serie: #0e7ab8;
  --serie-area: #28aaf0;
  --lateral-w: 240px;
  --gutter: 32px;
  --g-atende: #12804f;
  --g-parcial: #0e7ab8;
  --g-validar: #b7791f;
  --g-nao-atende: #c4292e;
  --g-nao-investigado: #8a919b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #edeff5; --navy: #edeff5; --muted: #a7acba; --secondary: #a7acba;
    --bg: #12151a; --surface: #191d24; --border: #2a2f38; --border-strong: #3a404b;
    --accent-soft: #1e2530; --danger: #ff7a7e; --header-hover: #1e2530;
    --primary-ink: #4cc2ff; --cta: #4cc2ff; --cta-hover: #7ad2ff; --on-cta: #0b1620; --focus: #4cc2ff;
    --ring: rgb(76 194 255 / 0.3);
    --suave: #232830; --linha: rgb(255 255 255 / 0.07);
    --item-ativo: rgb(255 255 255 / 0.09); --item-ativo-tinta: #4cc2ff; --item-ativo-icone: #4cc2ff;
    --item-hover: rgb(255 255 255 / 0.05); --chip: rgb(255 255 255 / 0.05);
    --glass-fill: rgb(25 29 36 / 0.62); --glass-edge: rgb(255 255 255 / 0.08);
    --surface-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 12px 32px -18px rgb(0 0 0 / 0.5);
    --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 18px 44px -22px rgb(0 0 0 / 0.6);
    --sombra-item: none;
    --brilho-1: rgb(40 170 240 / 0.14); --brilho-2: rgb(88 96 169 / 0.14); --brilho-3: rgb(40 170 240 / 0.06);
    --pilula-sucesso: rgb(63 203 142 / 0.14); --pilula-sucesso-tinta: #3fcb8e;
    --pilula-alerta: rgb(255 193 99 / 0.14); --pilula-alerta-tinta: #ffc163;
    --pilula-perigo: rgb(255 122 126 / 0.14); --pilula-perigo-tinta: #ff7a7e;
    --pilula-info: rgb(76 194 255 / 0.14); --pilula-info-tinta: #4cc2ff;
    --dica: #edeff5; --dica-tinta: #12151a;
    --grade: rgb(255 255 255 / 0.06); --grade-base: rgb(255 255 255 / 0.16);
    --serie: #4cc2ff; --serie-area: #4cc2ff;
    --g-atende: #3ccf8e; --g-parcial: #4db8f5; --g-validar: #e8b04a; --g-nao-atende: #ff7a7e; --g-nao-investigado: #8a919b;
  }
}
:root[data-theme="dark"] {
  --ink: #edeff5; --navy: #edeff5; --muted: #a7acba; --secondary: #a7acba;
  --bg: #12151a; --surface: #191d24; --border: #2a2f38; --border-strong: #3a404b;
  --accent-soft: #1e2530; --danger: #ff7a7e; --header-hover: #1e2530;
  --primary-ink: #4cc2ff; --cta: #4cc2ff; --cta-hover: #7ad2ff; --on-cta: #0b1620; --focus: #4cc2ff;
  --ring: rgb(76 194 255 / 0.3);
  --suave: #232830; --linha: rgb(255 255 255 / 0.07);
  --item-ativo: rgb(255 255 255 / 0.09); --item-ativo-tinta: #4cc2ff; --item-ativo-icone: #4cc2ff;
  --item-hover: rgb(255 255 255 / 0.05); --chip: rgb(255 255 255 / 0.05);
  --glass-fill: rgb(25 29 36 / 0.62); --glass-edge: rgb(255 255 255 / 0.08);
  --surface-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 12px 32px -18px rgb(0 0 0 / 0.5);
  --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 18px 44px -22px rgb(0 0 0 / 0.6);
  --sombra-item: none;
  --brilho-1: rgb(40 170 240 / 0.14); --brilho-2: rgb(88 96 169 / 0.14); --brilho-3: rgb(40 170 240 / 0.06);
  --pilula-sucesso: rgb(63 203 142 / 0.14); --pilula-sucesso-tinta: #3fcb8e;
  --pilula-alerta: rgb(255 193 99 / 0.14); --pilula-alerta-tinta: #ffc163;
  --pilula-perigo: rgb(255 122 126 / 0.14); --pilula-perigo-tinta: #ff7a7e;
  --pilula-info: rgb(76 194 255 / 0.14); --pilula-info-tinta: #4cc2ff;
  --dica: #edeff5; --dica-tinta: #12151a;
  --grade: rgb(255 255 255 / 0.06); --grade-base: rgb(255 255 255 / 0.16);
  --serie: #4cc2ff; --serie-area: #4cc2ff;
  --g-atende: #3ccf8e; --g-parcial: #4db8f5; --g-validar: #e8b04a; --g-nao-atende: #ff7a7e; --g-nao-investigado: #8a919b;
}

/* ─── Fundo, vidro e superfície ───────────────────────────────────────────── */
html, body { overscroll-behavior: none; }
body { background: var(--bg); color: var(--ink); font-size: 14px; }
.shell::before, .auth::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(44rem 34rem at -6% -8%, var(--brilho-1), transparent 62%),
    radial-gradient(36rem 30rem at 14% 104%, var(--brilho-2), transparent 62%),
    radial-gradient(46rem 30rem at 104% -6%, var(--brilho-3), transparent 60%),
    var(--bg);
}
.glass {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.surface, .bloco, .conteudo .card, .conteudo .tabela, .conteudo .kpis {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--surface-shadow);
}
.eyebrow {
  font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.pular { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-md); }
.pular:focus { left: 8px; }

/* ─── Estrutura ───────────────────────────────────────────────────────────── */
.shell { position: relative; isolation: isolate; display: flex; min-height: 100dvh; }
.lateral {
  position: sticky; top: 12px; flex: none; align-self: flex-start;
  display: flex; flex-direction: column; gap: 12px;
  width: var(--lateral-w); height: calc(100dvh - 24px); margin: 12px 0 12px 12px; padding: 12px;
  border-radius: var(--r-flutuante);
}
.lateral__marca { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 6px; flex: none; }
.lateral__marca .topbar__logo { height: 26px; max-width: 124px; object-fit: contain; object-position: left; }
.lateral__produto { padding-left: 10px; border-left: 1px solid var(--border-strong); font: 600 14px/20px var(--font-display); letter-spacing: -0.01em; color: var(--ink); }

.icone-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--muted); cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.icone-btn:hover { background: var(--suave); color: var(--ink); }
.icone-btn.gaveta-fechar { display: none; margin-left: auto; }
.icone-btn svg { width: 16px; height: 16px; }

/* Empresa ativa: chip com inicial; com mais de uma, o seletor nativo fica por cima. */
.ambiente {
  position: relative; flex: none; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 10px; border-radius: var(--r-item); background: var(--chip); box-shadow: var(--sombra-item);
  font-size: 14px; line-height: 20px; font-weight: 500; transition: background-color 160ms var(--ease-out);
}
.ambiente[hidden] { display: none; }
.ambiente:has(select:not([hidden])):hover { background: var(--item-ativo); }
.ambiente:has(select:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.ambiente__inicial { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--cta); color: var(--on-cta); font-size: 12px; font-weight: 600; }
.ambiente__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ambiente__seta { flex: none; width: 16px; height: 16px; color: var(--muted); }
#empresa-seletor { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 14px; }

.lateral__menu { flex: 1; min-height: 0; display: grid; align-content: start; gap: 16px; padding-top: 4px; overflow-y: auto; }
.lateral__titulo { margin: 0 0 4px; padding: 0 10px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lateral__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lateral__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: var(--r-item); background: none;
  font: 500 14px/20px var(--font-body); color: color-mix(in srgb, var(--ink) 75%, transparent);
  cursor: pointer; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.lateral__menu button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__icone { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.lateral__menu button:hover { background: var(--item-hover); color: var(--ink); }
.lateral__menu button[aria-current="page"] { background: var(--item-ativo); color: var(--item-ativo-tinta); box-shadow: var(--sombra-item); }
.lateral__menu button[aria-current="page"] .lateral__icone { color: var(--item-ativo-icone); opacity: 1; }
.lateral__menu button:focus-visible, .icone-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

.lateral__rodape { flex: none; display: grid; gap: 6px; }
.conta { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 6px; border-radius: var(--r-item); background: var(--chip); }
.conta__avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: 8px; border-radius: 50%; background: var(--suave); color: var(--ink); font-size: 12px; font-weight: 600; }
.conta__avatar:empty { visibility: hidden; }
.conta__texto { flex: 1; min-width: 0; }
.conta__nome, .conta__email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta__nome { font-size: 13px; line-height: 16px; font-weight: 500; }
.conta__email { font-size: 11.5px; line-height: 16px; color: var(--muted); }

.produtos { position: relative; }
.produtos summary { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 6px; white-space: nowrap; border-radius: var(--r-item); font-size: 11.5px; line-height: 18px; color: var(--muted); cursor: pointer; list-style: none; transition: color 160ms var(--ease-out); }
.produtos summary:hover { color: var(--ink); }
.produtos summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.produtos summary::-webkit-details-marker { display: none; }
.produtos summary svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.produtos__lista { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; width: 100%; list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--r-item); box-shadow: var(--glass-shadow); }
.produtos__lista li { display: grid; gap: 2px; padding: 8px; border-radius: var(--radius-md); font-size: 13px; }
.produtos__lista li + li { border-top: 1px solid var(--linha); border-radius: 0; }
.produtos__lista a { color: var(--primary-ink); font-size: 12px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo-movel, .abas, .gaveta-fundo { display: none; }
.faixa-demo { margin: 12px 12px 0; padding: 8px 16px; border-radius: var(--r-item); background: var(--pilula-alerta); color: var(--pilula-alerta-tinta); text-align: center; font-size: 12px; line-height: 16px; font-weight: 500; }
.conteudo { flex: 1; width: 100%; max-width: calc(1152px + var(--gutter) * 2); margin: 0 auto; padding: var(--gutter) var(--gutter) 48px; }
.conteudo__topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 0 0 24px; }
.conteudo__titulos { min-width: 0; }
.conteudo__topo .title { margin: 0; font: 600 28px/34px var(--font-display); letter-spacing: -0.02em; }
.conteudo__descricao { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); }
#acoes-modulo:empty { display: none; }
#acoes-modulo > .actions, #acoes-modulo > .barra { margin: 0; justify-content: flex-end; align-items: flex-end; }
@media (min-width: 641px) { #acoes-modulo > .barra { flex-wrap: nowrap; } #acoes-modulo .barra .field { min-width: 200px; } #acoes-modulo .barra > * { flex: none; } }
#area:focus { outline: none; }

/* Entrada suave dos blocos de cada tela. */
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* "backwards": ao terminar, a animação não deixa transform ativo (senão menus fixos se deslocam). */
#area > * { animation: subir 420ms var(--ease-out) backwards; }
#area > :nth-child(2) { animation-delay: 60ms; }
#area > :nth-child(3) { animation-delay: 120ms; }
#area > :nth-child(n + 4) { animation-delay: 180ms; }

/* ─── Títulos, textos e formulários ───────────────────────────────────────── */
.title, .subtitle { letter-spacing: -0.02em; }
.subtitle { font: 600 15px/22px var(--font-display); }
.hint { font-size: 12.5px; }
.label { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
label, legend { font-weight: 500; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="url"], input[type="tel"], select, textarea {
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: 14px;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
input:focus, select:focus, textarea:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus, textarea:focus, select:focus { border-color: var(--cta); box-shadow: 0 0 0 3px var(--ring); outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cta); }
.fieldset, .group { border-color: var(--linha); border-radius: var(--r-item); }

/* Botões do Career: cantos de 12px, peso médio, contorno neutro. */
.btn { min-height: 36px; padding: 7px 14px; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 500 14px/20px var(--font-body); transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.btn:hover { background: var(--suave); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn--primary { background: var(--cta); border-color: transparent; color: var(--on-cta); }
.btn--primary:hover { background: var(--cta-hover); transform: none; }
.btn--ghost:hover { background: var(--suave); border-color: var(--border); color: var(--ink); }
.btn--sm { min-height: 30px; padding: 4px 10px; border-radius: 10px; font-size: 13px; }
.btn--danger, .btn--ghost.btn--danger { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: transparent; color: var(--danger); }
.btn--danger:hover, .btn--ghost.btn--danger:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: transparent; color: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-link { color: var(--primary-ink); font-weight: 500; }
.conteudo .btn--primary { width: auto; }
.conteudo .actions .btn--primary { flex: 0 0 auto; }
.conteudo .btn { white-space: nowrap; }
.conteudo .actions { align-items: center; }
.actions--compact { gap: 6px; flex-wrap: wrap; }

/* Selos de status: pílula com ponto, como o StatusPill do Career. */
.selo { gap: 6px; padding: 2px 8px; border: 0; font: 500 12px/16px var(--font-body); }
.selo::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--neutro { background: var(--suave); color: var(--muted); }
.selo--sucesso, .selo--ok { background: var(--pilula-sucesso); color: var(--pilula-sucesso-tinta); }
.selo--alerta { background: var(--pilula-alerta); color: var(--pilula-alerta-tinta); }
.selo--perigo { background: var(--pilula-perigo); color: var(--pilula-perigo-tinta); }
.selo--info { background: var(--pilula-info); color: var(--pilula-info-tinta); }

/* Avisos */
.banner, .conteudo .banner { border-radius: var(--r-item); font-size: 13.5px; line-height: 20px; }
.banner { background: var(--pilula-alerta); color: var(--pilula-alerta-tinta); }
.banner--info { background: var(--pilula-info); color: var(--pilula-info-tinta); }
.banner--alerta { background: var(--pilula-alerta); color: var(--pilula-alerta-tinta); border-radius: var(--r-item); padding: 12px 14px; }

/* Modal e acesso */
.modal { border: 1px solid var(--linha); border-radius: var(--radius); box-shadow: var(--glass-shadow); }
.modal::backdrop { background: rgb(23 37 60 / 0.3); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal__topo { padding: 14px 20px; border-bottom-color: var(--linha); }
.modal__corpo { padding: 20px; }
.auth { position: relative; isolation: isolate; background: none; }
.auth__card { padding: 28px 24px 24px; border: 1px solid var(--linha); border-radius: 21.6px; box-shadow: var(--surface-shadow); }
.auth__logo { margin: 0 auto 4px; height: 36px; }
.auth__eyebrow { text-align: center; margin-bottom: 18px; letter-spacing: 0.2em; color: var(--pilula-info-tinta); }
.auth input[type="email"] { border-color: var(--border); border-radius: var(--radius-md); }
.auth__title { font: 600 20px/28px var(--font-display); letter-spacing: -0.02em; }

/* ─── Conteúdo ────────────────────────────────────────────────────────────── */
.bloco { margin: 0 0 16px; padding: 20px; }
.bloco > .subtitle, .bloco > .label { margin-bottom: 12px; }
.bloco > :last-child { margin-bottom: 0; }
.conteudo > #area > .subtitle { margin: 28px 0 12px; }
.conteudo > #area > .subtitle:first-child { margin-top: 0; }
.barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.barra .field { min-width: min(240px, 100%); margin: 0; }
.barra select, .barra input { min-height: 36px; }
.barra label.hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; font-size: 13px; font-weight: 500; }
.barra label.hint select { width: auto; padding-top: 6px; padding-bottom: 6px; }

/* Indicadores: uma superfície só, com divisórias finas entre os números. */
.conteudo .kpis { gap: 0; margin-bottom: 8px; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.conteudo .kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.conteudo .kpis--3, .conteudo .bloco.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.conteudo .bloco.kpis { padding: 0; }
.conteudo .kpi { min-height: 0; gap: 0; padding: 18px 20px; border: 0; border-radius: 0; background: none; box-shadow: -1px 0 0 var(--linha), 0 -1px 0 var(--linha); overflow: visible; }
.conteudo .kpi::before { display: none; }
.conteudo .kpi__rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); }
.conteudo .kpi__valor { margin-top: 4px; font: 600 30px/34px var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.conteudo .kpi__detalhe { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.conteudo .kpi--alerta .kpi__valor { color: var(--pilula-alerta-tinta); }
.conteudo .kpi--perigo .kpi__valor { color: var(--pilula-perigo-tinta); }
.conteudo .kpi--alerta, .conteudo .kpi--perigo { box-shadow: -1px 0 0 var(--linha), 0 -1px 0 var(--linha); }

/* Cartões e listas */
.conteudo .card { margin-bottom: 12px; padding: 16px 20px; }
.conteudo div.lista { display: grid; gap: 12px; border: 0; border-radius: 0; background: none; overflow: visible; }
.conteudo .vazio { padding: 40px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.linha-item { border-color: var(--linha); }
.linha-item:hover { background: color-mix(in srgb, var(--suave) 60%, transparent); }
.lista-simples { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.lista-simples li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.lista-competencias { padding: 0; margin: 8px 0; display: grid; gap: 8px; counter-reset: c; list-style: none; }
.linha-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0 16px; }
.linha-add > .field { flex: 1 1 260px; margin: 0; }
.linha-add input { flex: 1 1 220px; font: inherit; padding: 8px 10px; }
.editor__topo, .competencia__topo, .candidato__topo, .dossie__topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.competencia, .candidato { display: grid; gap: 8px; }
.candidatura { padding: 8px 0; border-top: 1px solid var(--linha); }
.etapas { display: flex; flex-wrap: wrap; gap: 4px; }
.etapa { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--suave); color: var(--muted); }
.etapa--ok { background: var(--pilula-info); color: var(--pilula-info-tinta); }
.etapa--falta { background: var(--pilula-alerta); color: var(--pilula-alerta-tinta); }
.evidencia { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--primary); background: var(--accent-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.evidencia q { quotes: "“" "”"; }
.transcricao { list-style: none; padding: 0; display: grid; gap: 8px; }
.transcricao__turno { padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--linha); }
.transcricao__turno--candidato { background: var(--accent-soft); }
.transcricao__turno p { margin: 4px 0 0; }
.realce { box-shadow: 0 0 0 4px var(--ring); transition: box-shadow 200ms; }
.simulacao__grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.simulacao { max-height: 50vh; overflow: auto; display: grid; gap: 8px; }
.simulacao__estado { display: grid; gap: 4px; align-content: start; }
.fieldset { border: 1px solid var(--linha); padding: 12px; }

/* Tabelas */
.conteudo .tabela { font-size: 14px; border-collapse: separate; border-spacing: 0; }
.conteudo .bloco .tabela { border: 0; border-radius: 0; box-shadow: none; }
.conteudo .tabela th { padding: 12px 14px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--linha); background: none; }
.conteudo .tabela td { padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid var(--linha); }
.conteudo .tabela tbody tr:last-child td { border-bottom: 0; }
.conteudo .tabela tbody tr:hover td { background: color-mix(in srgb, var(--suave) 45%, transparent); }
.conteudo .tabela td.actions { display: table-cell; margin: 0; white-space: normal; }
.conteudo .tabela td.actions > * { margin: 2px 6px 2px 0; }
.conteudo .tabela-rolagem, .conteudo .tabela { max-width: 100%; }

/* Abas: filtros em pílula, a ativa em branco, como em Vagas no Career. */
.conteudo .segmented[role="tablist"] { display: inline-flex; gap: 4px; width: auto; margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; background: none; }
.conteudo .segmented[role="tablist"] .segmented__option { flex: none; padding: 6px 12px; border: 0; border-radius: 999px; background: none; font: 500 14px/20px var(--font-body); color: color-mix(in srgb, var(--ink) 70%, transparent); cursor: pointer; transition: background-color 160ms var(--ease-out); }
.conteudo .segmented[role="tablist"] .segmented__option:hover { background: var(--item-hover); }
.conteudo .segmented[role="tablist"] .segmented__option[aria-selected="true"] { background: var(--item-ativo); color: var(--item-ativo-tinta); box-shadow: var(--sombra-item); }
.conteudo .segmented[role="tablist"] .segmented__option:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* ─── Início ──────────────────────────────────────────────────────────────── */
.inicio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.inicio > * { grid-column: span 12; min-width: 0; margin-bottom: 0; }
.conteudo .inicio .kpis { margin-bottom: 0; }
.inicio__8 { grid-column: span 8; }
.inicio__7 { grid-column: span 7; }
.inicio__5 { grid-column: span 5; }
.inicio__4 { grid-column: span 4; }
.quadro { display: flex; flex-direction: column; min-width: 0; padding: 20px; }
.quadro__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.quadro__titulo { margin: 0; font: 600 15px/22px var(--font-display); letter-spacing: -0.02em; }
.ver-tudo { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 4px; background: none; font: 500 12px/16px var(--font-body); color: var(--primary-ink); cursor: pointer; }
.ver-tudo:hover { text-decoration: underline; }
.ver-tudo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quieto { margin: 0; padding: 24px 0; text-align: center; font-size: 14px; color: var(--muted); }
.funil { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; margin: 0; padding: 0; list-style: none; }
.funil__linha { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 13px; line-height: 18px; }
.funil__linha strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.funil__barra { height: 6px; border-radius: 999px; background: var(--suave); }
.funil__barra span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 500ms var(--ease-out); }
.recentes { flex: 1; display: grid; align-content: start; margin: 0 -8px; padding: 0; list-style: none; }
.recente { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: var(--r-item); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 160ms var(--ease-out); }
.recente:hover { background: color-mix(in srgb, var(--suave) 60%, transparent); }
.recente__avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pilula-info); color: var(--pilula-info-tinta); font-size: 12px; font-weight: 600; }
.recente__texto { flex: 1; min-width: 0; }
.recente__nome, .recente__vaga { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recente__nome { font-size: 14px; line-height: 20px; font-weight: 500; }
.recente__vaga, .recente__quando { font-size: 12px; line-height: 16px; color: var(--muted); }
.recente__quando { flex: none; }
.conteudo .quadro .kpis { background: none; border: 0; border-radius: 0; box-shadow: none; margin: -4px -20px -20px; }
.conteudo .quadro .kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conteudo .quadro .kpi { padding: 14px 20px; }
.conteudo .quadro .kpi__valor { font-size: 22px; line-height: 28px; }
.premissa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.premissa input { width: 80px; min-height: 32px; padding: 4px 8px; }

/* Tendência: série única, com crosshair e leitura por teclado. */
.tendencia { margin: 0; }
.tendencia__corpo { display: flex; gap: 8px; }
.tendencia__eixo { flex: none; width: 22px; height: 190px; display: flex; flex-direction: column; justify-content: space-between; padding-top: 6px; text-align: right; font-size: 11px; line-height: 14px; color: var(--muted); }
.tendencia__plano { position: relative; flex: 1; min-width: 0; height: 190px; border-radius: var(--radius-md); touch-action: pan-y; }
.tendencia__plano:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.tendencia__plano svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tendencia__ponto { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--surface); background: var(--serie); pointer-events: none; }
.tendencia__dica { position: absolute; top: 0; z-index: 2; padding: 6px 10px; border-radius: var(--radius-md); background: var(--dica); color: var(--dica-tinta); font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; }
.tendencia__dica span { opacity: 0.7; }
.tendencia__dica strong { font-weight: 600; }
.tendencia__datas { display: flex; justify-content: space-between; margin: 6px 0 0 30px; font-size: 11px; line-height: 14px; color: var(--muted); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Dossiê ──────────────────────────────────────────────────────────────── */
.medidor { height: 6px; border-radius: 999px; background: var(--suave); overflow: hidden; }
.medidor span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.matriz__resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.matriz__grupo + .matriz__grupo { margin-top: 20px; }
.matriz__titulo { margin: 0 0 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.req { border-top: 1px solid var(--linha); padding: 10px 0; }
.req > summary, .req--vazio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.req > summary { cursor: pointer; list-style: none; }
.req > summary::-webkit-details-marker { display: none; }
.req > summary:hover .req__texto { color: var(--primary-ink); }
.req > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 4px; }
.req__texto { flex: 1 1 320px; font-size: 14px; line-height: 20px; color: var(--ink); }
.req__tipo { flex: none; font-size: 12px; line-height: 16px; color: var(--muted); }
.req[open] > summary { margin-bottom: 8px; }
.req > p { margin: 0 0 8px; font-size: 13.5px; line-height: 20px; }
.evidencia__origem { font-size: 12px; font-weight: 600; color: var(--muted); }
.perguntas { display: grid; gap: 12px; margin: 0; padding-left: 20px; }
.perguntas li > span { display: block; }
.transferivel + .transferivel { margin-top: 12px; }
.subbloco { margin-top: 16px; }
.dossie__topo { margin: 8px 0 16px; }
.dossie__topo .hint { margin: 0; font-size: 13px; }
#area > .btn-link { align-self: flex-start; }
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px 32px; }
.grafico { margin: 0; min-width: 0; }
.grafico figcaption { margin-bottom: 10px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.grafico svg { display: block; width: 100%; height: auto; }
.parecer > p { margin: 0 0 12px; line-height: 22px; }
.parecer__parte { margin-top: 24px; }
.parecer__item { padding: 12px 0; border-top: 1px solid var(--linha); }
.parecer__item > p { margin: 6px 0 0; font-size: 13.5px; line-height: 20px; }
.parecer__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ─── Tablet e celular: barra de vidro no topo, atalhos embaixo, menu em gaveta ─ */
@media (max-width: 1023px) {
  :root { --gutter: 24px; }
  .shell { display: block; }
  .topo-movel { position: sticky; top: 8px; z-index: 30; display: flex; align-items: center; gap: 8px; height: 48px; margin: 8px 8px 0; padding: 0 12px; border-radius: 21.6px; }
  .topo-movel .topbar__logo { height: 24px; max-width: 120px; object-fit: contain; object-position: left; }
  .topo-movel__empresa { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--muted); }
  .faixa-demo { margin: 8px 8px 0; }
  .conteudo { padding-bottom: 96px; }

  .lateral { position: fixed; z-index: 50; inset: 8px auto 8px 8px; align-self: stretch; width: min(288px, 85vw); height: auto; margin: 0; background: color-mix(in srgb, var(--surface) 85%, transparent); transform: translateX(calc(-100% - 16px)); visibility: hidden; transition: transform 200ms var(--ease-out), visibility 0s linear 200ms; }
  /* Visível já no início da abertura (para o foco entrar); some só ao fim do fechamento. */
  body.gaveta-aberta .lateral { transform: none; visibility: visible; transition: transform 200ms var(--ease-out), visibility 0s; }
  body.gaveta-aberta .gaveta-fundo { display: block; position: fixed; inset: 0; z-index: 45; background: rgb(23 37 60 / 0.3); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .icone-btn.gaveta-fechar { display: inline-flex; }

  .abas { position: fixed; z-index: 40; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: stretch; justify-content: space-between; padding: 4px 4px max(4px, env(safe-area-inset-bottom)); border-radius: 21.6px; }
  .abas button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: var(--r-item); background: none; font: 500 11px/14px var(--font-body); color: color-mix(in srgb, var(--ink) 65%, transparent); cursor: pointer; }
  .abas button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abas .lateral__icone { width: 20px; height: 20px; opacity: 1; }
  .abas button[aria-current="page"] { background: var(--item-ativo); color: var(--item-ativo-tinta); box-shadow: var(--sombra-item); }
  .abas button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

  .inicio__8, .inicio__7, .inicio__5, .inicio__4 { grid-column: span 12; }
  .conteudo .kpis--4, .conteudo .quadro .kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tabelas largas rolam dentro do próprio quadro, nunca a página. */
  .conteudo .tabela { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .conteudo__topo .title { font-size: 24px; line-height: 30px; }
  .bloco, .quadro { padding: 16px; }
  .conteudo .kpi { padding: 14px 16px; }
  .conteudo .kpi__valor { font-size: 24px; line-height: 30px; }
  .conteudo .kpis--3, .conteudo .bloco.kpis--3 { grid-template-columns: minmax(0, 1fr); }
  .conteudo .quadro .kpis { margin: -4px -16px -16px; }
  .conteudo .segmented[role="tablist"] { display: flex; overflow-x: auto; }
  #acoes-modulo, #acoes-modulo > .actions, #acoes-modulo > .barra { width: 100%; justify-content: flex-start; }
  .simulacao__grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral, .funil__barra span { transition: none; }
  #area > * { animation: none; }
}

/* ─── Kanban, lista e busca ──────────────────────────────────────────────── */
.quadro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.quadro-corpo { min-width: 0; }
.quadro-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.quadro-barra__campo { position: relative; display: flex; align-items: center; flex: 0 1 320px; min-width: 200px; margin: 0; font-weight: 400; }
.quadro-barra__campo svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.quadro-barra__busca { width: 100%; min-height: 40px; padding: 8px 12px 8px 36px !important; }
.quadro-barra__contagem { margin: 0; font-size: 12.5px; color: var(--muted); }
.quadro-barra__visoes { display: inline-flex; gap: 2px; margin-left: auto; padding: 4px; border-radius: var(--r-item); background: var(--chip); box-shadow: var(--sombra-item); }
.quadro-barra__visao { display: grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.quadro-barra__visao svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quadro-barra__visao[aria-pressed="true"] { background: var(--item-ativo); color: var(--item-ativo-tinta); box-shadow: var(--sombra-item); }
.quadro-barra__visao:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(264px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; overscroll-behavior-x: contain; }
.kanban__coluna { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 10px; align-content: start; min-height: 120px; padding: 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--suave) 70%, transparent); border: 1px solid transparent; transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.kanban__coluna--alvo { border-color: var(--primary); border-style: dashed; background: var(--accent-soft); }
.kanban__topo { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.kanban__ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.kanban__ponto--ok { background: var(--pilula-sucesso-tinta); }
.kanban__ponto--info { background: var(--primary); }
.kanban__ponto--alerta { background: #f5a623; }
.kanban__ponto--perigo { background: var(--danger); }
.kanban__titulo { flex: 1; margin: 0; font: 600 13px/18px var(--font-body); color: var(--ink); }
.kanban__total { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface); font-size: 12px; line-height: 20px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.kanban__cartoes { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 8px; }
.kanban__vazio { margin: 0; padding: 16px 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); font-size: 12.5px; text-align: center; color: var(--muted); }
.kanban__cartao[draggable="true"] { cursor: grab; }
.kanban__cartao.arrastando { opacity: 0.5; }

.cartao { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 8px; padding: 14px; border-radius: var(--r-item); background: var(--surface); border: 1px solid var(--linha); box-shadow: var(--surface-shadow); transition: box-shadow 160ms var(--ease-out); }
.cartao:hover { box-shadow: var(--glass-shadow); }
.cartao__topo { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cartao__titulos { flex: 1; min-width: 0; }
.cartao__nome { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; font: 600 14px/20px var(--font-display); letter-spacing: -0.01em; color: var(--ink); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; cursor: pointer; }
button.cartao__nome:hover { color: var(--primary-ink); text-decoration: underline; }
.cartao__nome--texto { cursor: default; }
.cartao__sub { margin: 2px 0 0; font-size: 12.5px; line-height: 16px; color: var(--muted); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cartao__info { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--muted); overflow-wrap: anywhere; }
.cartao__avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pilula-info); color: var(--pilula-info-tinta); font-size: 11.5px; font-weight: 600; }
.cartao__selos { display: flex; flex-wrap: wrap; gap: 6px; }
.cartao__metrica { display: grid; gap: 2px; }
.cartao__valor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 20px/26px var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cartao__rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--linha); }
.cartao__numero { font-size: 12px; color: var(--muted); }

.menu-acoes { position: relative; flex: none; }
.menu-acoes > summary { list-style: none; }
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-acoes__botao { width: 30px; min-height: 30px; padding: 0; justify-content: center; }
.menu-acoes__botao svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 1; }
.menu-acoes__lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 200px; padding: 6px; border-radius: var(--r-item); background: var(--surface); border: 1px solid var(--linha); box-shadow: var(--glass-shadow); }
.menu-acoes__item { padding: 8px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font: 500 13.5px/18px var(--font-body); color: var(--ink); cursor: pointer; white-space: nowrap; }
.menu-acoes__item:hover, .menu-acoes__item:focus-visible { outline: none; background: var(--suave); }
.menu-acoes__item--perigo { color: var(--danger); }

/* ─── Uso do pacote ───────────────────────────────────────────────────────── */
.pacote { display: grid; gap: 12px; margin: 0 0 12px; padding: 20px; }
.pacote__topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pacote__rotulo { margin: 0; font-size: 13px; color: var(--muted); }
.pacote__valor { margin: 4px 0 0; font-family: var(--font-display); letter-spacing: -0.02em; }
.pacote__valor strong { font-size: 30px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pacote__valor span { font-size: 16px; color: var(--muted); }
.pacote__restam { margin: 0; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.pacote__restam--ok { background: var(--pilula-sucesso); color: var(--pilula-sucesso-tinta); }
.pacote__restam--alerta { background: var(--pilula-alerta); color: var(--pilula-alerta-tinta); }
.pacote__restam--perigo { background: var(--pilula-perigo); color: var(--pilula-perigo-tinta); }
.pacote__trilho { height: 10px; border-radius: 999px; background: var(--suave); overflow: hidden; }
.pacote__barra { display: block; height: 100%; border-radius: inherit; transition: width 500ms var(--ease-out); }
.pacote__barra--ok { background: var(--primary); }
.pacote__barra--alerta { background: #f5a623; }
.pacote__barra--perigo { background: var(--danger); }
.pacote__rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.pacote__rodape strong { color: var(--ink); font-weight: 600; }

/* ─── Logo da empresa no cartão da conta ──────────────────────────────────── */
.conta__logo { position: relative; flex: none; margin-right: 8px; }
.conta__logo > summary { list-style: none; cursor: pointer; margin-right: 0; }
.conta__logo > summary::-webkit-details-marker { display: none; }
.conta__logo > summary:hover { box-shadow: 0 0 0 2px var(--primary); }
.conta__logo > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.conta__avatar--logo { background: #fff; overflow: hidden; }
.conta__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.conta__logo-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 8px); min-width: 220px; }
.conta__logo-dica { margin: 4px 10px 6px; font-size: 11.5px; line-height: 16px; color: var(--muted); white-space: normal; }

/* ─── Passo a passo ───────────────────────────────────────────────────────── */
.tour { position: fixed; inset: 0; z-index: 100; }
.tour__fundo { position: absolute; inset: 0; }
.tour__destaque { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgb(18 21 26 / 0.5), 0 0 0 3px var(--primary); pointer-events: none; transition: left 240ms var(--ease-out), top 240ms var(--ease-out), width 240ms var(--ease-out), height 240ms var(--ease-out); }
.tour__destaque[hidden] { display: block; box-shadow: 0 0 0 9999px rgb(18 21 26 / 0.5); width: 0; height: 0; left: 50%; top: 50%; }
.tour__balao { position: fixed; width: min(360px, calc(100vw - 24px)); padding: 18px 18px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--linha); box-shadow: 0 24px 64px rgb(0 0 0 / 0.28); color: var(--ink); animation: subir 240ms var(--ease-out); }
.tour__balao:focus { outline: none; }
.tour__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tour__trilha { margin: 0; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pilula-info-tinta); }
.tour__pular { padding: 2px 6px; border: 0; border-radius: 8px; background: none; font: 500 12.5px/18px var(--font-body); color: var(--muted); cursor: pointer; }
.tour__pular:hover { color: var(--ink); background: var(--suave); }
.tour__titulo { margin: 0 0 6px; font: 600 17px/24px var(--font-display); letter-spacing: -0.02em; }
.tour__texto { margin: 0 0 10px; font-size: 14px; line-height: 21px; }
.tour__exemplo { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--accent-soft); font-size: 13px; line-height: 19px; }
.tour__exemplo strong { color: var(--pilula-info-tinta); }
.tour__pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour__contador { margin: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tour__botoes { display: flex; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .tour__destaque, .tour__balao { transition: none; animation: none; } }

/* ─── Treinamento ─────────────────────────────────────────────────────────── */
.treino-destaque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 8px; padding: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 80%, var(--surface)), var(--surface)); }
.treino-destaque .hint { margin-top: 4px; font-size: 13.5px; }
.treino-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.treino-cartao { display: grid; gap: 6px; align-content: start; padding: 18px; }
.treino-cartao .btn { justify-self: start; margin-top: 6px; }
.treino-cartao__numero { margin: 0; font: 600 12px/16px var(--font-mono); color: var(--pilula-info-tinta); }
.treino-cartao__passos { margin: 0; font-size: 12px; color: var(--muted); }
.treino-fluxo { display: grid; gap: 0; margin: 0; padding: 6px 20px; list-style: none; counter-reset: passo; }
.treino-fluxo li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); counter-increment: passo; }
.treino-fluxo li:first-child { border-top: 0; }
.treino-fluxo li::before { content: counter(passo); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pilula-info); color: var(--pilula-info-tinta); font-size: 12.5px; font-weight: 600; }
.treino-fluxo strong { font-size: 14px; }
.treino-fluxo span { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .quadro-barra__visoes { margin-left: 0; }
  .quadro-barra__campo { flex: 1 1 100%; }
  .kanban { grid-auto-columns: 82%; scroll-snap-type: x mandatory; }
  .kanban__coluna { scroll-snap-align: start; }
}