/* ====================================================================
   web/css/simulador-ux8.css — a experiência nova do simulador (v8, flag `ux8`):
   o hub "Simulador", o cartão de 1 toque, a folha "Ajustar", a faixa do ensaio
   (Treino · Na sala), as tentativas e o relatório em folha única (.sxr-papel).
   Mesmo vocabulário do produto (tokens DS v2 em css/ds-v2.css; pele do
   simulador em css/simulacao.css): fonte do sistema, azul = ação, dourado =
   hipótese, hairline, raios 8 · 12 · 16 · 24, pílulas nos botões.
   Nada aqui vale sem a flag: só os elementos de prefixo sx- e sxr- (que só nascem
   com ela) e as classes .simc-ux8 e .fe-folha-rel que o JS só põe com ela.
   ==================================================================== */

.sx-hub, .sx-cartao-wrap, .sxr-papel, .fe-tela-tent, .simc.simc-ux8 {
  --sx-ink: var(--ds-ink, #0a1628);
  --sx-ink2: var(--ds-ink-2, #5b6472);
  --sx-ink3: var(--ds-ink-3, #676e7a);
  --sx-hair: var(--ds-hair, rgba(10, 22, 40, .08));
  --sx-hair2: var(--ds-hair-2, rgba(10, 22, 40, .14));
  --sx-fill: var(--ds-fill, #f5f5f7);
  --sx-fill2: var(--ds-fill-2, #ececef);
  --sx-papel: #fbfaf7;
  --sx-azul: var(--ds-azul, #152848);
  --sx-azul-hover: var(--ds-azul-hover, #1d365f);
  --sx-azul-claro: var(--ds-azul-claro, #eef2f8);
  --sx-azul-linha: var(--ds-azul-linha, #c9d3e6);
  --sx-azul-texto: var(--ds-azul-texto, #33476b);
  --sx-hip: var(--ds-hipotese, #8a6405);
  --sx-hip-claro: var(--ds-hipotese-claro, #fbf4e3);
  --sx-perigo: var(--ds-perigo, #b42318);
  --sx-perigo-claro: var(--ds-perigo-claro, #fbeaea);
  --sx-novo: var(--ds-novo, #1f7a4d);
  --sx-novo-claro: var(--ds-novo-claro, #e8f3ec);
  --sx-ouro-claro: #d5b96e;
  --sx-ease: cubic-bezier(.23, 1, .32, 1);
  --sx-font: var(--va-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --sx-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-family: var(--sx-font);
  color: var(--sx-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── peças comuns ───────────────────────────────────────────────────── */
.sx-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font: 500 15px/22px var(--sx-font); color: var(--sx-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--sx-hair2); cursor: pointer; white-space: nowrap; transition: background .12s, transform .08s; -webkit-tap-highlight-color: transparent; }
.sx-b:active { transform: scale(.98); }
.sx-b svg { width: 18px; height: 18px; }
.sx-b-prim { background: var(--sx-azul); color: #fff; box-shadow: none; }
.sx-b-prim:hover { background: var(--sx-azul-hover); }
.sx-b-sec:hover { background: var(--sx-fill); }
.sx-b-fant { background: transparent; box-shadow: none; color: var(--sx-ink2); }
.sx-b-fant:hover { background: var(--sx-fill); }
.sx-b:disabled { opacity: .45; cursor: default; }
.sx-cheio { width: 100%; }
.sx-flex { flex: 1; }
.sx-b:focus-visible, .sx-chip:focus-visible, .sx-ib:focus-visible, .sx-card:focus-visible, .sx-segm button:focus-visible, .sx-link:focus-visible { outline: 2px solid var(--sx-azul); outline-offset: 2px; }
.sx-ib { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--sx-ink2); cursor: pointer; }
.sx-ib:hover { background: var(--sx-fill); }
.sx-ib svg { width: 20px; height: 20px; }
.sx-link { border: 0; padding: 4px 0; background: none; color: var(--sx-azul-texto); font: 500 14px/20px var(--sx-font); cursor: pointer; text-align: left; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; font: 14px/20px var(--sx-font); background: #fff; box-shadow: inset 0 0 0 1px var(--sx-hair2); color: var(--sx-ink); cursor: pointer; text-align: left; }
.sx-chip svg { width: 16px; height: 16px; }
.sx-chip.on { background: var(--sx-azul-claro); color: var(--sx-azul-texto); box-shadow: inset 0 0 0 1.5px var(--sx-azul); font-weight: 500; }
.sx-chip.nao.on { background: var(--sx-perigo-claro); color: var(--sx-perigo); box-shadow: inset 0 0 0 1.5px var(--sx-perigo); }
.sx-chip:disabled { cursor: default; }
/* o que ela já sabe: uma linha por item (texto longo), com o × à direita — não uma pílula de três linhas */
.sx-chip-sabe { width: 100%; max-width: 100%; justify-content: space-between; align-items: flex-start; min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 20px; }
.sx-chip-sabe span { flex: 1; white-space: normal; }
.sx-chip-sabe i { margin-top: 1px; }
.sx-chip-sabe i { font-style: normal; color: var(--sx-ink3); font-size: 16px; line-height: 1; }
.sx-chip-sabe.fora { color: var(--sx-ink3); text-decoration: line-through; background: var(--sx-fill); }
.sx-chip-sabe.fora i { color: var(--sx-azul); }
.sx-selo { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--sx-font); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sx-selo.ok { background: var(--sx-novo-claro); color: var(--sx-novo); }
.sx-selo.chance { background: var(--sx-hip-claro); color: var(--sx-hip); }
.sx-selo.neutro { background: var(--sx-fill2); color: var(--sx-ink2); }
.sx-segm { display: flex; background: var(--sx-fill2); border-radius: 999px; padding: 3px; }
.sx-segm button { flex: 1; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 999px; background: transparent; font: 500 14px/20px var(--sx-font); color: var(--sx-ink2); cursor: pointer; }
.sx-segm button[aria-checked="true"] { background: #fff; color: var(--sx-ink); box-shadow: 0 1px 2px rgba(10, 22, 40, .12); }
.sx-meta { margin: 0; font-size: 13px; line-height: 19px; color: var(--sx-ink3); }
.sx-rot { margin: 22px 0 8px; font: 600 13px/19px var(--sx-font); color: var(--sx-ink2); }
.sx-vazio { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--sx-fill); font-size: 14px; line-height: 20px; color: var(--sx-ink2); }
.sx-aviso { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 19px; color: var(--sx-ink2); background: var(--sx-fill); border-radius: 12px; padding: 10px 12px; }
.sx-aviso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--sx-ink3); }
.sx-aviso > span { flex: 1; min-width: 0; }
.sx-progresso { display: block; height: 4px; border-radius: 2px; background: var(--sx-fill2); overflow: hidden; margin-top: 8px; }
.sx-progresso i { display: block; height: 100%; width: 38%; background: var(--sx-azul); border-radius: 2px; transition: width .5s linear; }
.sx-esq { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef0f3 0%, #f7f8fa 50%, #eef0f3 100%); background-size: 200% 100%; animation: sxBrilho 1.4s ease-in-out infinite; margin: 5px 0; }
@keyframes sxBrilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sx-erro { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--sx-perigo-claro); color: var(--sx-perigo); font-size: 14px; line-height: 20px; }

/* a lista de cartões (hub e tentativas) */
.sx-lista { display: flex; flex-direction: column; gap: 8px; }
.sx-grade { display: grid; grid-template-columns: 1fr 1fr; }
.sx-card { display: block; width: 100%; text-align: left; border: 0; border-radius: 16px; background: #fff; padding: 14px 16px; box-shadow: 0 0 0 1px var(--sx-hair); color: var(--sx-ink); font: inherit; cursor: default; transition: background .12s; }
button.sx-card { cursor: pointer; }
button.sx-card:hover { background: var(--sx-fill); }
.sx-card .sx-t { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font: 600 16px/22px var(--sx-font); letter-spacing: -.01em; }
.sx-card .sx-t svg { width: 18px; height: 18px; margin-left: auto; color: var(--sx-ink3); }
.sx-card .sx-t .sx-selo { margin-left: auto; }
.sx-card .sx-l { margin: 0; color: var(--sx-ink2); font-size: 14px; line-height: 20px; }
.sx-card .sx-m { margin: 6px 0 0; color: var(--sx-ink3); font-size: 13px; line-height: 19px; }
.sx-card.sx-heroi { background: var(--sx-azul); color: #fff; box-shadow: none; }
.sx-card.sx-heroi:hover { background: var(--sx-azul-hover); }
.sx-card.sx-heroi .sx-t svg { color: #fff; }
.sx-card.sx-heroi .sx-l { color: rgba(255, 255, 255, .8); }
.sx-card.sx-heroi .sx-m { color: var(--sx-ouro-claro); }
.sx-card .sx-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.sx-card .sx-acoes .sx-b { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* ── o hub ──────────────────────────────────────────────────────────── */
.sx-hub { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sx-hub[hidden] { display: none; }
.sx-coluna { width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; box-sizing: border-box; }
.sx-h2 { margin: 12px 0 4px; font: 600 22px/26px var(--sx-font); letter-spacing: -.01em; }
.sx-sub { margin: 0 0 18px; color: var(--sx-ink2); font-size: 15px; line-height: 22px; }
@media (min-width: 1024px) {
  .sx-coluna { padding: 28px 40px 60px; }
  .sx-h2 { font: 600 28px/34px var(--sx-serif); margin: 0 0 6px; }
}
#module-simulador .sx-voltar-hub { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 8px 0 0; padding: 6px 10px 6px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--ds-azul-texto, #33476b); font: 500 15px/22px var(--va-font, system-ui, sans-serif); cursor: pointer; }
#module-simulador .sx-voltar-hub svg { width: 18px; height: 18px; }

/* ── o cartão de 1 toque ────────────────────────────────────────────── */
#tab-chat { position: relative; }
.sx-cartao-wrap { position: absolute; inset: 0; z-index: 29; display: flex; flex-direction: column; min-height: 0; background: #fff; }
/* O preparo usa a própria aba Ferramentas. A folha de ajustes fica dentro dela. */
.sx-cartao-wrap.sx-cartao-no-painel { position: relative; inset: auto; z-index: auto; flex: 1; min-height: min(520px, 70dvh); }
.sx-cartao-no-painel .sx-cartao-fundo { padding: 16px 12px 24px; }
.sx-cartao-no-painel .sx-folha { max-width: calc(100% - 16px); }
.sx-cartao-wrap.sx-ajustando { min-height: 0; overflow: hidden; }
.sx-ajustando > .sx-cartao-fundo { visibility: hidden; overflow: hidden; }
.sx-cartao-no-painel .sx-acoes.sx-col { flex-direction: column; align-items: stretch; }
.sx-cartao-no-painel .sx-acoes.sx-col .sx-cheio { width: 100%; }
.sx-cartao-no-painel .sx-acoes.sx-col .sx-b-fant { margin-left: 0; }
.sx-cartao-fundo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 24px; box-sizing: border-box; }
.sx-cartao { max-width: 768px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--sx-hair2); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
/* a entrada anima uma vez (no contêiner, que nasce uma vez), não a cada redesenho do cartão */
.sx-cartao-wrap { animation: sxAparece .18s ease-out; }
@keyframes sxAparece { from { transform: translateY(6px); opacity: .6; } to { transform: none; opacity: 1; } }
.sx-h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 20px/26px var(--sx-serif); letter-spacing: -.01em; }
.sx-h3 svg { width: 22px; height: 22px; flex: none; }
.sx-p { margin: 0; font-size: 15px; line-height: 22px; color: var(--sx-ink2); }
.sx-linha { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--sx-hair); }
.sx-linha:last-of-type { border-bottom: 0; }
.sx-av { width: 36px; height: 36px; border-radius: 50%; background: var(--sx-azul-claro); color: var(--sx-azul-texto); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.sx-av svg { width: 18px; height: 18px; }
.sx-lt { flex: 1; min-width: 0; font-size: 15px; line-height: 22px; }
.sx-lt b { font-weight: 600; }
.sx-lt small { display: block; font-size: 13px; line-height: 18px; color: var(--sx-ink3); }
.sx-chips-mini { margin-top: 8px; }
.sx-chips-mini .sx-chip { min-height: 32px; font-size: 13px; }
.sx-chips-mini .sx-meta { flex-basis: 100%; }
.sx-cena { margin: 0; font-size: 14px; line-height: 21px; color: var(--sx-ink2); font-style: italic; text-align: center; padding: 0 12px; }
.sx-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sx-acoes.sx-col { flex-direction: column; }
@media (min-width: 1024px) {
  .sx-cartao { padding: 22px 24px; }
  .sx-acoes.sx-col { flex-direction: row; }
  .sx-acoes.sx-col .sx-cheio { width: auto; }
  .sx-acoes.sx-col .sx-b-fant { margin-left: auto; }
}

/* ── Ajustar ocupa a área útil; só o corpo rola, cabeçalho/ações ficam acessíveis ── */
.sx-folha-wrap { position: absolute; inset: 0; z-index: 31; }
.sx-veu { position: absolute; inset: 0; background: var(--ds-veu, rgba(10, 22, 40, .28)); }
.sx-folha { position: absolute; inset: 0; max-height: 100%; min-width: 0; min-height: 0; background: #fff; display: flex; flex-direction: column; outline: none; overflow: hidden; }
.sx-folha-wrap { animation: sxSobe .22s ease-out; }   /* idem: a folha redesenha a cada escolha, o contêiner não */
@keyframes sxSobe { from { transform: translateY(24px); } to { transform: none; } }
.sx-alca { display: none; }
.sx-fcab { display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px; flex: none; }
.sx-fcab h3 { margin: 0; flex: 1; font: 600 17px/23px var(--sx-font); letter-spacing: -.01em; }
.sx-fcorpo { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 20px; overflow-wrap: anywhere; }
.sx-fcorpo > * { flex-shrink: 0; min-width: 0; }
.sx-fpe { flex: none; padding: 10px 16px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sx-hair); display: flex; flex-direction: column; gap: 2px; background: #fff; }
.sx-fpe-principais { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.sx-fpe-principais .sx-b { min-width: 0; white-space: normal; }
.sx-fpe .sx-salvar { align-self: center; min-height: 36px; font-size: 13px; }
.sx-partes { display: grid; gap: 8px; min-width: 0; }
.sx-parte, html[data-cockpit] .ck-painel .sx-parte { box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; padding: 12px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--sx-hair2); color: var(--sx-ink); font: 14px/20px var(--sx-font); text-align: left; cursor: pointer; }
.sx-parte.on, html[data-cockpit] .ck-painel .sx-parte.on { background: var(--sx-azul-claro); box-shadow: inset 0 0 0 1.5px var(--sx-azul); }
.sx-parte > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.sx-parte-texto { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; overflow-wrap: anywhere; white-space: normal; }
.sx-parte-texto strong { font-weight: 600; }
.sx-parte-texto > span { color: var(--sx-ink2); }
.sx-parte-texto small { color: var(--sx-azul-texto); font-size: 12px; line-height: 18px; }
.sx-parte-marca { flex: none; width: 18px; min-height: 18px; color: var(--sx-azul); font-weight: 600; }
.sx-bloco { display: flex; flex-direction: column; gap: 8px; }
.sx-bloco h4 { margin: 0; font: 600 15px/22px var(--sx-font); }
.sx-bloco h4 small { font-weight: 400; color: var(--sx-ink3); margin-left: 6px; font-size: 13px; }
.sx-hip { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; border-top: 1px solid var(--sx-hair); }
.sx-hip:first-of-type { border-top: 0; padding-top: 0; }
.sx-hip-t { margin: 0; font-size: 15px; line-height: 22px; }
.sx-det { border-top: 1px solid var(--sx-hair); border-bottom: 1px solid var(--sx-hair); }
.sx-det > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 52px; padding: 8px 0; font: 15px/22px var(--sx-font); cursor: pointer; }
.sx-det > summary > small { flex-basis: calc(100% - 26px); }   /* a linha de apoio embaixo do título, não espremida ao lado */
.sx-det > summary::-webkit-details-marker { display: none; }
.sx-det > summary small { font-size: 13px; line-height: 18px; color: var(--sx-ink3); }
.sx-det > summary svg { width: 18px; height: 18px; margin-left: auto; color: var(--sx-ink3); transition: transform .2s var(--sx-ease); }
.sx-det[open] > summary svg { transform: rotate(90deg); }
.sx-det .sx-aviso { margin-bottom: 12px; }
.sx-campo { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--sx-hair2); border-radius: 12px; font: 16px/24px var(--sx-font); resize: vertical; }
.sx-campo:focus { outline: none; border-color: var(--sx-azul); }
@media (min-width: 1024px) {
  .sx-folha-wrap { animation: none; }
  .sx-alca { display: none; }
}

/* ── o ensaio (js/simulacao-chat.js com a flag): a faixa, o menu, os chips ── */
.simc.simc-ux8 .simc-cab { display: block; padding: 0; border-bottom: 0; }
.simc-faixa { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; border-bottom: 1px solid var(--sx-hair); background: #fff; }
.simc-quem-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.simc-ux8 .simc-quem { display: block; font: 600 14px/18px var(--sx-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simc-sub { font-size: 12px; line-height: 16px; color: var(--sx-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simc-menu-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--sx-ink2); cursor: pointer; }
.simc-menu-btn:hover { background: var(--sx-fill); }
.simc-menu-btn svg { width: 20px; height: 20px; }
.simc-ux8 .simc-voltar-pc { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--sx-ink2); font: 15px/22px var(--sx-font); cursor: pointer; }
.simc-ux8 .simc-voltar-pc svg { width: 18px; height: 18px; }
.simc-ux8 .simc-voltar-pc:hover { background: var(--sx-fill); }
.simc-menu { position: absolute; right: 12px; top: 56px; z-index: 5; width: 240px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(10, 22, 40, .06), 0 12px 32px rgba(10, 22, 40, .12); padding: 6px; animation: sxAparece .18s ease-out; }
.simc-menu[hidden] { display: none; }
.simc-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; font: 15px/22px var(--sx-font); color: var(--sx-ink); cursor: pointer; text-align: left; }
.simc-menu button:hover { background: var(--sx-fill); }
.simc-menu button svg { width: 18px; height: 18px; color: var(--sx-ink2); }
.simc-menu button.perigo, .simc-menu button.perigo svg { color: var(--sx-perigo); }
.simc-ux8 .simc-aviso { text-align: center; }
.simc-chips { display: flex; gap: 8px; align-items: center; max-width: 760px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 8px 16px 0; overflow-x: auto; scrollbar-width: none; }
.simc-chips::-webkit-scrollbar { display: none; }
.simc-chips .sx-chip { flex: none; min-height: 34px; font-size: 13px; }
.simc-chips .sx-chip:disabled { opacity: .45; }
/* (19/10) o "Refazer minha última fala" fica escondido até a primeira fala dela; sem isto o display do chip vencia o [hidden] */
.simc-chips .sx-chip[hidden] { display: none; }
.simc-ux8 .simc-composer { padding-top: 8px; }
/* a cena em itálico, sem o marcador cru (o texto do histórico não muda; só a tela) */
.simc-ux8 .sim-assistant .sim-bubble > p > em:only-child { color: var(--sx-ink2); }
@media (max-width: 600px) {
  .simc-chips { padding-left: 12px; padding-right: 12px; }
  .simc-papel { display: none; }   /* no celular a faixa fica com o nome e "Realista · rodada N · você decide quando parar" */
}

/* ── o relatório em folha única (.sxr-papel): tela e PDF (js/pdf-real.js copia o elemento e estas regras) ── */
.fe-folha-rel { padding: 12px 12px 32px; background: var(--ds-fill, #f5f5f7); }
.sxr-papel { box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; background: var(--sx-papel); color: var(--sx-ink); box-shadow: 0 1px 2px rgba(10, 22, 40, .06), 0 0 0 1px rgba(10, 22, 40, .06); border-radius: 12px; padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 22px; font: 15px/23px var(--sx-font); }
.sxr-papel p { margin: 0; }
.sxr-rd { font: 600 12px/16px var(--sx-font); letter-spacing: .08em; text-transform: uppercase; color: var(--sx-ink3); }
.sxr-cab { display: flex; flex-direction: column; gap: 6px; }
.sxr-cab h2 { margin: 4px 0 0; font: 600 24px/30px var(--sx-serif); letter-spacing: -.01em; }
.sxr-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* (19/10, revisão do board) os chips eram frases inteiras em caixa alta e ocupavam meio painel: agora frase normal, menores */
.sxr-papel .rel-chip { font: 500 12px/16px var(--sx-font); letter-spacing: 0; text-transform: none; background: var(--sx-fill2); color: var(--sx-ink2); border: 0; border-radius: 999px; padding: 2px 8px; max-width: 100%; }
.sxr-quando { font-size: 13px; line-height: 19px; color: var(--sx-ink3); }
.sxr-desc { color: var(--sx-ink2); }
.sxr-desc p { margin: 0 0 4px; }
.sxr-sec { break-inside: auto; min-width: 0; }
.sxr-sec h3 { margin: 0 0 10px; font: 600 17px/23px var(--sx-font); letter-spacing: -.01em; padding-bottom: 6px; border-bottom: 1.5px solid #c9a040; }
.sxr-corpo h4 { margin: 12px 0 4px; font: 600 12px/16px var(--sx-font); letter-spacing: .06em; text-transform: uppercase; color: var(--sx-azul-texto); }
.sxr-corpo h4:first-child { margin-top: 0; }
.sxr-papel .rel-kv { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--sx-hair); }
.sxr-papel .rel-kv:last-child { border-bottom: 0; }
.sxr-papel .rel-k { font: 600 12px/16px var(--sx-font); letter-spacing: .04em; text-transform: uppercase; color: var(--sx-ink3); }
.sxr-papel .rel-v { color: var(--sx-ink); font-size: 15px; line-height: 22px; }
.sxr-exec { background: #fff; border-left: 3px solid #c9a040; border-radius: 0 12px 12px 0; padding: 6px 14px; }
.sxr-mom { border-top: 1px solid var(--sx-hair2); padding: 14px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.sxr-mom:first-child { border-top: 0; padding-top: 0; }
.sxr-mom-h { font: 600 13px/19px var(--sx-font); color: var(--sx-ink3); }
.sxr-quote { border-left: 3px solid var(--sx-azul-linha); padding: 4px 12px; font-style: italic; color: var(--sx-ink2); }
.sxr-reescrita { margin-bottom: 10px; }
.sxr-papel .rel-orig { color: var(--sx-perigo); }
.sxr-papel .rel-melhor { color: var(--sx-novo); }
.sxr-papel .rel-fazer h4 { color: var(--sx-novo); }
.sxr-papel .rel-evitar h4 { color: var(--sx-perigo); }
.sxr-papel .rel-ul { margin: 2px 0; padding-left: 18px; }
.sxr-papel .rel-ul li { margin-bottom: 4px; }
.sxr-papel .rel-rod { color: var(--sx-ink3); font-size: 13px; }
.sxr-papel .rel-na { color: var(--sx-ink3); }
.sxr-papel .rel-cego { margin-bottom: 8px; }
.sxr-papel .rel-cego b { display: block; }
.sxr-two { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sxr-fraq { border: 1px solid var(--sx-hair2); border-top: 2px solid #c9a040; border-radius: 8px; padding: 10px 12px; background: #fff; margin-bottom: 10px; }
.sxr-fraq-h { display: flex; align-items: center; gap: 6px; font: 600 15px/22px var(--sx-font); margin-bottom: 4px; }
.sxr-radar { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; }
.sxr-radar canvas, .sxr-radar img { max-width: 100%; height: auto; }
.sxr-papel .rel-radar-na { font-size: 13px !important; line-height: 19px; }
.sxr-nums { margin-bottom: 8px; }
/* as notas: as mesmas cores da A4, no tamanho da folha */
.sxr-papel .rel-score { font: 700 12px/16px var(--sx-font); border-radius: 6px; padding: 2px 7px; min-width: 18px; }
.sxr-papel .rel-score.hip { font-style: italic; border: 1px dashed #b8862b; }
.sxr-papel .rel-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 12px; line-height: 17px; color: var(--sx-ink3); }
.sxr-papel .rel-legenda > span { display: inline-flex; align-items: center; gap: 4px; }
/* as tabelas viram linhas empilhadas no celular; na folha larga (computador e PDF) voltam a ser tabela */
.sxr-tbl { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.sxr-tbl thead { display: none; }
.sxr-tbl tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--sx-hair); }
.sxr-tbl tr:last-child { border-bottom: 0; }
.sxr-tbl td { display: block; padding: 1px 0; vertical-align: top; }
.sxr-tbl td::before { content: attr(data-h); display: block; font: 600 11px/15px var(--sx-font); letter-spacing: .04em; text-transform: uppercase; color: var(--sx-ink3); }
.sxr-tbl td:first-child { font-weight: 600; }
.sxr-tbl td:first-child::before { display: none; }
.sxr-tbl td.rel-td-score::before { display: inline; margin-right: 6px; }
.sxr-pe { margin-top: 8px; border-top: 1px solid var(--sx-hair2); padding-top: 8px; font-size: 12px; line-height: 17px; color: var(--sx-ink3); text-align: center; }
@media (min-width: 640px) {
  .sxr-papel { padding: 40px 48px 48px; }
  .sxr-cab h2 { font-size: 28px; line-height: 34px; }
  .sxr-two { grid-template-columns: 1fr 1fr; }
  .sxr-papel .rel-kv { grid-template-columns: 34% 1fr; gap: 10px; align-items: baseline; padding: 6px 0; }
  .sxr-tbl thead { display: table-header-group; }
  .sxr-tbl tr { display: table-row; padding: 0; border: 0; }
  .sxr-tbl th { background: var(--sx-azul); color: #fff; font: 600 12px/16px var(--sx-font); text-align: left; padding: 6px 8px; letter-spacing: .02em; }
  .sxr-tbl td { display: table-cell; padding: 6px 8px; border: 1px solid #e2e7ee; }
  .sxr-tbl tbody tr:nth-child(even) { background: #f6f8fa; }
  .sxr-tbl td::before, .sxr-tbl td.rel-td-score::before { display: none; }
  .sxr-tbl td:first-child { font-weight: 400; }
}
@media (min-width: 1024px) {
  .fe-folha-rel { padding: 20px 20px 48px; }
}
/* (19/10, revisão do board) no painel lateral de 420 px a tela é larga, mas a folha é estreita: o título serifado de 28 px
   quebrava em 7 linhas. Mede-se o recipiente da tela (.fe-folha-rel), não a janela; o PDF monta a folha fora dele, igual */
.fe-folha-rel { container-type: inline-size; }
@container (max-width: 560px) {
  .sxr-papel { padding: 20px 18px 24px; }
  .sxr-cab h2 { font-size: 20px; line-height: 26px; }
}
/* a impressão (rede de segurança do PDF): a folha sozinha na página, do mesmo jeito que a A4 saía */
@media print {
  body.fe-imprimindo #fe-impressao .sxr-papel { width: 100%; max-width: none; box-shadow: none; border-radius: 0; background: #fff; margin: 0; padding: 0; }
  #rel-stage .sxr-papel { box-shadow: none; border-radius: 0; background: #fff; max-width: none; }
  /* no papel a folha é mais compacta (menos páginas, PDF mais rápido), com o mesmo texto e a mesma ordem */
  .sxr-papel { font-size: 14px; line-height: 21px; gap: 18px; padding: 0; overflow-wrap: anywhere; }
  .sxr-cab h2 { font-size: 22px; line-height: 28px; }
  .sxr-sec { break-inside: auto; }
  .sxr-sec h3, .sxr-corpo h4, .sxr-mom-h, .sxr-fraq-h, .sxr-quote { break-after: avoid; }
  .sxr-papel .rel-kv, .sxr-reescrita { break-inside: avoid; }
  .sxr-two { display: block; }
  .sxr-two > div + div { margin-top: 12px; }
  .sxr-sec h3 { font-size: 15px; line-height: 20px; margin-bottom: 6px; padding-bottom: 4px; }
  .sxr-papel .rel-kv { padding: 3px 0; grid-template-columns: 30% 1fr; gap: 8px; }
  .sxr-papel .rel-v { font-size: 14px; line-height: 21px; }
  .sxr-papel .rel-k { font-size: 11px; line-height: 16px; }
  .sxr-tbl { display: table; table-layout: fixed; font-size: 13px; line-height: 19px; }
  .sxr-tbl thead { display: table-header-group; break-after: avoid; }
  .sxr-tbl tr { display: table-row; }
  .sxr-tbl td, .sxr-tbl th { display: table-cell; overflow-wrap: anywhere; }
  .sxr-tbl td::before, .sxr-tbl td.rel-td-score::before { display: none; }
  .sxr-tbl td, .sxr-tbl th { padding: 3px 6px; }
  .sxr-radar { break-inside: avoid; }
  .sxr-radar canvas, .sxr-radar img { width: 280px !important; height: 280px !important; object-fit: contain; }
  .sxr-mom { padding: 8px 0 4px; }
  .sxr-corpo h4 { margin-top: 8px; }
}
/* a prévia na página Relatório (js/relatorio.js) */
#rel-stage .fe-folha-rel { background: transparent; padding: 0 0 48px; }

/* dentro do painel de apoio (css/cockpit.css zera `button`): os mesmos botões, chips e selos, com a especificidade dele */
html[data-cockpit] .ck-painel .sx-b { font: 500 15px/22px var(--sx-font, var(--va-font, system-ui, sans-serif)); color: var(--sx-ink, #0a1628); background: #fff; box-shadow: inset 0 0 0 1px var(--sx-hair2, rgba(10, 22, 40, .14)); border-radius: 999px; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html[data-cockpit] .ck-painel .sx-b-prim { background: var(--sx-azul, #152848); color: #fff; box-shadow: none; }
html[data-cockpit] .ck-painel .sx-b-fant { background: transparent; box-shadow: none; color: var(--sx-ink2, #5b6472); }
html[data-cockpit] .ck-painel .sx-card .sx-acoes .sx-b { min-height: 36px; padding: 0 14px; font-size: 14px; }
html[data-cockpit] .ck-painel .sx-chip { font: 14px/20px var(--sx-font, var(--va-font, system-ui, sans-serif)); color: var(--sx-ink, #0a1628); background: #fff; box-shadow: inset 0 0 0 1px var(--sx-hair2, rgba(10, 22, 40, .14)); border-radius: 999px; min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; }
html[data-cockpit] .ck-painel .sx-chip.on { background: var(--sx-azul-claro, #eef2f8); color: var(--sx-azul-texto, #33476b); box-shadow: inset 0 0 0 1.5px var(--sx-azul, #152848); font-weight: 500; }
/* Vence o reset de botões do cockpit sem transformar textos extensos em pílulas. */
.sx-folha .sx-chip, html[data-cockpit] .ck-painel .sx-folha .sx-chip { box-sizing: border-box; max-width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 12px; white-space: normal; overflow-wrap: anywhere; }
.sx-folha .sx-chip-sabe, html[data-cockpit] .ck-painel .sx-folha .sx-chip-sabe { width: 100%; align-items: flex-start; justify-content: space-between; text-align: left; }
.sx-folha .sx-chip-sabe span { min-width: 0; }
html[data-cockpit] .ck-painel .sx-folha .sx-chip.nao.on { background: var(--sx-perigo-claro); color: var(--sx-perigo); box-shadow: inset 0 0 0 1.5px var(--sx-perigo); }
html[data-cockpit] .ck-painel .sx-segm button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 6px; border-radius: 999px; color: var(--sx-ink2); font: 500 14px/20px var(--sx-font); overflow-wrap: anywhere; }
html[data-cockpit] .ck-painel .sx-segm button[aria-checked="true"] { background: #fff; color: var(--sx-ink); box-shadow: 0 1px 2px rgba(10, 22, 40, .12); }
html[data-cockpit] .ck-painel .sx-fpe .sx-salvar { min-height: 36px; font-size: 13px; }
html[data-cockpit] .ck-painel .sx-fpe-principais .sx-b { padding: 8px 12px; }
html[data-cockpit] .ck-painel .sx-cartao-no-painel .sx-folha { max-width: none; }
/* A altura vem do painel real, inclusive em desktop com painel estreito. */
html[data-cockpit] .ck-corpo:has(.sx-ajustando) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
html[data-cockpit] .ck-aba:has(.sx-ajustando) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html[data-cockpit] .fe-tela-sim:has(.sx-ajustando) { flex: 1; min-height: 0; overflow: hidden; }
html[data-cockpit] .fe-sim-alvo:has(.sx-ajustando) { display: flex; flex: 1; min-height: 0; padding: 0; }
html[data-cockpit] .fe-sim-conteudo:has(.sx-ajustando) { display: flex; flex: 1; min-height: 0; min-width: 0; }
html[data-cockpit] .ck-painel .sx-card { color: var(--sx-ink, #0a1628); font: 15px/22px var(--sx-font, var(--va-font, system-ui, sans-serif)); background: #fff; box-shadow: 0 0 0 1px var(--sx-hair, rgba(10, 22, 40, .08)); border-radius: 16px; padding: 14px 16px; }
html[data-cockpit] .ck-painel .sx-card.sx-heroi { background: var(--sx-azul, #152848); color: #fff; box-shadow: none; }

/* ── as tentativas (tela da aba Ferramentas) ───────────────────────────── */
html[data-cockpit] .fe-tela-tent .sx-coluna { padding: 12px 16px 32px; }
html[data-cockpit] .fe-tela-tent .sx-coluna .sx-b-prim.sx-cheio { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .sx-cartao-wrap, .sx-folha-wrap, .simc-menu, .sx-esq { animation: none !important; }
  .sx-progresso i { transition: none; }
}