/* ============================================================
   SISTEMA EMPRESA — app.css
   Camada de PRODUTO sobre os tokens canônicos da marca MPVPC.

   Importa 03-design-tokens/tokens.css (fonte de verdade) e
   adiciona apenas o que o produto operacional interno exige e
   que a marca editorial não cobre:
     1. @font-face (self-hosted)
     2. tokens de chrome do app (sidebar/topbar escuros)
     3. paleta de STATUS derivada (oklch) ancorada no Âmbar
     4. tokens de densidade / tabela / produto
     5. reset + base do app
   NÃO redefine tokens de marca — só estende com prefixo --sx-*.
   ============================================================ */

@import url('favicons/tokens.css');

/* ---- Fonts self-hosted (variáveis) ---- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('fonts/InterVariable.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url('fonts/InterVariable-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900;
  font-display: swap; src: url('fonts/SourceSerif4Variable-Roman.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900;
  font-display: swap; src: url('fonts/SourceSerif4Variable-Italic.ttf') format('truetype');
}

:root {
  --mpvpc-font-display: var(--mpvpc-font-heading);

  /* ========================================================
     CHROME DO APP — superfícies escuras institucionais
     A marca tem Preto Carvão (#0F0F0E) e Carvão Suave (#2A2826).
     Derivamos níveis intermediários para sidebar/topbar/cards
     escuros de cockpit, mantendo a temperatura quente da marca.
     ======================================================== */
  --sx-chrome-bg:        #0F0F0E;   /* sidebar/topbar base (Preto Carvão) */
  --sx-chrome-bg-soft:   #161514;
  --sx-chrome-raised:    #1A1917;   /* item ativo / card escuro */
  --sx-chrome-hover:     #211F1D;
  --sx-chrome-line:      #2E2B27;   /* divisórias no escuro */
  --sx-chrome-line-soft: #232120;
  --sx-chrome-text:      #F2EEE3;   /* Osso */
  --sx-chrome-text-mut:  #9C968A;   /* texto secundário no escuro */
  --sx-chrome-text-dim:  #6E6A60;   /* terciário/labels no escuro */

  /* ========================================================
     ÁREA DE TRABALHO — clara (Osso)
     ======================================================== */
  /* AIDEV-NOTE: refinamento 2026-09-04 — canvas volta ao Osso oficial (#F2EEE3) e as linhas ficam
     um tom mais leves; superfícies e tinta continuam as da marca. Não trocar por cinza neutro. */
  --sx-canvas:        #F2EEE3;   /* fundo da área de trabalho (Osso, cor oficial de respiro) */
  --sx-surface:       #FBF9F3;   /* cards/painéis (Osso Claro) */
  --sx-surface-2:     #F5F1E8;   /* zebra/áreas secundárias */
  --sx-line:          #E3DDCF;   /* border-subtle */
  --sx-line-strong:   #CDC6B4;
  --sx-ink:           #1B1A18;   /* texto primário */
  --sx-ink-mut:       #555248;
  /* AIDEV-NOTE: #888477 dava 3.2:1 sobre o Osso (reprova AA). #6B675D = 4.69:1 no pior ponto do fundo e
     5.2:1 no vidro (23/09); tests/vidro-sobrio.test.js recalcula com as cores deste arquivo. */
  --sx-ink-weak:      #6B675D;

  /* Topbar clara: o chrome escuro fica só na sidebar (âncora de marca); a barra superior
     acompanha a área de trabalho para reduzir peso visual e dar mais leitura ao título da rota. */
  /* Vidro sóbrio (23/09): o topo é vidro claro sobre a luz do fundo; a reserva sólida volta ao Osso. */
  --sx-topbar-bg:     rgba(251, 249, 243, 0.72);
  --sx-topbar-line:   rgba(42, 40, 38, 0.08);

  /* ========================================================
     STATUS — paleta derivada em oklch, ancorada na marca.
     Verde/azul/etc não existem na marca; derivamos tons
     dessaturados e quentes que convivem com Âmbar/Vinho/Osso.
     Cada status tem: cor sólida (fg), fundo suave (bg), borda.
     ======================================================== */
  /* Neutro / informativo (grafite) */
  --sx-st-neutral:     #555248;
  --sx-st-neutral-bg:  #EAE5D8;
  --sx-st-neutral-bd:  #D2CBB9;

  /* Âmbar — em andamento / ação (marca) */
  --sx-st-amber:       #A65300;   /* ember-on-light p/ contraste AA */
  --sx-st-amber-bg:    #FBEBD4;
  --sx-st-amber-bd:    #E6C796;

  /* Sucesso / ganho — verde dessaturado quente */
  --sx-st-success:     oklch(0.46 0.09 150);
  --sx-st-success-bg:  oklch(0.95 0.03 150);
  --sx-st-success-bd:  oklch(0.85 0.06 150);

  /* Informação / sincronizado — azul-aço dessaturado */
  --sx-st-info:        oklch(0.48 0.07 235);
  --sx-st-info-bg:     oklch(0.95 0.025 235);
  --sx-st-info-bd:     oklch(0.85 0.05 235);

  /* Atenção / pendência — âmbar profundo */
  --sx-st-warn:        oklch(0.53 0.13 70);   /* 0.55 dava 4,27:1 sobre o warn-bg (29/09) */
  --sx-st-warn-bg:     oklch(0.95 0.045 75);
  --sx-st-warn-bd:     oklch(0.85 0.08 72);

  /* Erro / perda / falha — Vinho Seco da marca */
  --sx-st-danger:      #6B2424;
  --sx-st-danger-bg:   #F6E5E2;
  --sx-st-danger-bd:   #E0BDB6;

  /* IA — Cobre Vivo (assinatura, uso raro): tudo que é de agente */
  --sx-ai:             #9E5238;   /* cobre escurecido p/ contraste AA sobre claro */
  --sx-ai-on-dark:     #C77E5F;
  --sx-ai-bg:          #F4E6DF;
  --sx-ai-bd:          #DFC3B6;

  /* ========================================================
     PRODUTO — densidade, raios, tabela
     ======================================================== */
  --sx-sidebar-w:     248px;
  --sx-sidebar-w-collapsed: 76px;   /* só do <Sidebar collapsed> do kit; o menu em dois níveis não recolhe desde 01/10 (dono) */
  --sx-topbar-h:      58px;
  --sx-radius:        10px;
  --sx-radius-sm:     8px;
  --sx-radius-xs:     6px;

  --sx-row-h:         46px;        /* densidade moderada */
  --sx-cell-x:        14px;
  --sx-pad-card:      20px;

  /* Escala de espaço (base 4) e de tipo do produto. As telas ainda carregam valores inline;
     as primitivas compartilhadas leem daqui para a cadência ficar igual em todas as rotas. */
  --sx-s1: 4px;  --sx-s2: 8px;  --sx-s3: 12px; --sx-s4: 16px;
  --sx-s5: 20px; --sx-s6: 24px; --sx-s7: 32px; --sx-s8: 40px;
  --sx-page-pad-x: clamp(16px, 2.4vw, 32px);
  --sx-page-pad-y: clamp(18px, 2vw, 28px);
  --sx-fs-page-title: 24px;
  --sx-fs-section-title: 17px;
  --sx-fs-body: 14px;
  --sx-fs-small: 12.5px;
  --sx-fs-micro: 11.5px;
  --sx-fs-eyebrow: 11px;

  --sx-shadow-card:   0 1px 2px rgba(15,15,14,0.04), 0 1px 3px rgba(15,15,14,0.03);
  --sx-shadow-pop:    0 10px 30px rgba(15,15,14,0.14), 0 2px 6px rgba(15,15,14,0.06);
  --sx-shadow-chrome: 0 0 0 1px rgba(0,0,0,0.4);
  --sx-ring:          0 0 0 3px color-mix(in oklab, var(--mpvpc-brand-ember) 30%, transparent);

  --sx-accent:        var(--mpvpc-brand-ember);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--mpvpc-font-heading);
  background: var(--sx-canvas);
  color: var(--sx-ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
h1,h2,h3,h4,h5 { margin: 0; font-family: var(--mpvpc-font-heading); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--mpvpc-brand-ember); color: var(--mpvpc-brand-black); }

.sx-skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: var(--sx-radius-sm);
  background: var(--mpvpc-brand-ember);
  color: var(--mpvpc-brand-black);
  font-weight: 800;
  transition: transform 140ms var(--mpvpc-motion-ease);
}

.sx-skip-link:focus { transform: translateY(0); }

/* tabular numerals everywhere numbers matter */
.tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* serif editorial helper */
.serif { font-family: var(--mpvpc-font-body); }

/* eyebrow */
.eyebrow {
  font-family: var(--mpvpc-font-heading);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--sx-ink-weak);
}

/* amber rule primitive */
.amber-rule { display:block; width: 40px; height: 2px; background: var(--mpvpc-brand-ember); border: 0; }

/* ============================================================
   SCROLLBARS — discretas, âmbar no thumb
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--sx-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--sx-line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--mpvpc-brand-ember); background-clip: padding-box; }

/* dark chrome scrollbars */
.sx-chrome ::-webkit-scrollbar-thumb { background: #34302B; background-clip: padding-box; }
.sx-chrome ::-webkit-scrollbar-thumb:hover { background: var(--mpvpc-brand-ember); background-clip: padding-box; }

/* focus ring */
:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: 2px; border-radius: 3px; }

/* ============================================================
   MODULAR RUNTIME BRIDGE
   The modular React entrypoint runs inside this legacy HTML shell.
   These selectors keep the ported src/sistema/* screens visually
   aligned until every legacy screen has a dedicated feature module.
   ============================================================ */
.sistema-login {
  min-height: 100%;
  display: grid;
  place-items: stretch;
  padding: 0;
  background: var(--sx-canvas);
}

.sistema-login form {
  width: min(100%, 430px);
  display: grid;
  gap: 16px;
  padding: clamp(24px, 4vw, 36px);
  background: var(--sx-surface);
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  box-shadow: var(--sx-shadow-pop);
}

.sistema-login h1 {
  font-family: var(--mpvpc-font-body);
  font-size: clamp(32px, 5vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

/* Login com os campos do kit (wave 13a, 25/09/2026): FieldRow embrulha o TextField no <label>; o espaço entre os
   campos é o gap do formulário. Sai a regra que pintava qualquer input (com cor escrita à mão) e qualquer botão do login. */
.sistema-login form > label,
.sx-login-senha > label { margin-bottom: 0 !important; }

.sx-login-senha { position: relative; }

/* Olho fora do <label>, sobre o campo Senha (campo de 44 px, botão de 32 px). */
.sx-login-olho { position: absolute; right: 4px; bottom: 6px; }

/* Faixa e sequência do celular: só aparecem no bloco de 680 px. */
.sx-login-faixa { display: none; }
.sx-login-sequencia--celular { display: none !important; }

.sistema-app-shell button {
  border: 0;
  border-radius: var(--sx-radius-sm);
  min-height: 38px;
  padding: 0 14px;
  font-weight: 700;
}

.sistema-login .sx-login-entrar { min-height: 44px; }

.sistema-app-shell {
  min-height: 100%;
  display: grid;
  grid-template-columns: var(--sx-sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--sx-topbar-h) minmax(0, 1fr);
  background: var(--sx-canvas);
}

.sistema-app-shell__header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  background: var(--sx-chrome-bg);
  color: var(--sx-chrome-text);
  border-bottom: 1px solid var(--sx-chrome-line);
}

.sistema-app-shell__header div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.sistema-app-shell__header span {
  color: var(--sx-chrome-text-mut);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sistema-app-shell__header button {
  color: var(--sx-chrome-text);
  background: var(--sx-chrome-raised);
  border: 1px solid var(--sx-chrome-line);
}

.sistema-app-shell > nav {
  min-width: 0;
  overflow: auto;
  padding: 16px 12px;
  background: var(--sx-chrome-bg);
  color: var(--sx-chrome-text);
  border-right: 1px solid var(--sx-chrome-line);
}

.sistema-app-shell > nav section + section {
  margin-top: 18px;
}

.sistema-app-shell > nav h2 {
  margin: 0 8px 8px;
  color: var(--sx-chrome-text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.sistema-app-shell > nav button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  color: var(--sx-chrome-text-mut);
  background: transparent;
}

.sistema-app-shell > nav button:hover,
.sistema-app-shell > nav button[aria-current="page"] {
  color: var(--sx-chrome-text);
  background: var(--sx-chrome-raised);
}

.sistema-app-shell > main {
  min-width: 0;
  overflow: auto;
  padding: clamp(18px, 2vw, 28px);
}

.sistema-contract-screen {
  display: grid;
  gap: 18px;
}

.sistema-contract-screen__header,
.sistema-contract-screen__meta,
.sistema-contract-screen__counts,
.sistema-contract-screen__grid > section,
.sistema-contract-screen__grid > aside {
  background: var(--sx-surface);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
  box-shadow: var(--sx-shadow-card);
}

.sistema-contract-screen__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
}

.sistema-contract-screen__header h1 {
  margin-top: 4px;
  font-family: var(--mpvpc-font-body);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.sistema-contract-screen__header p:not(.sistema-contract-screen__eyebrow) {
  margin-top: 8px;
  color: var(--sx-ink-mut);
  max-width: 72ch;
}

.sistema-contract-screen__eyebrow {
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.sistema-contract-screen__status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.sistema-contract-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--sx-st-neutral-bd);
  background: var(--sx-st-neutral-bg);
  color: var(--sx-st-neutral);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sistema-contract-badge--success,
.sistema-contract-badge--real { color: var(--sx-st-success); background: var(--sx-st-success-bg); border-color: var(--sx-st-success-bd); }
.sistema-contract-badge--info,
.sistema-contract-badge--derived { color: var(--sx-st-info); background: var(--sx-st-info-bg); border-color: var(--sx-st-info-bd); }
.sistema-contract-badge--warn,
.sistema-contract-badge--missing_contract { color: var(--sx-st-warn); background: var(--sx-st-warn-bg); border-color: var(--sx-st-warn-bd); }
.sistema-contract-badge--danger,
.sistema-contract-badge--blocked { color: var(--sx-st-danger); background: var(--sx-st-danger-bg); border-color: var(--sx-st-danger-bd); }
.sistema-contract-badge--ai { color: var(--sx-ai); background: var(--sx-ai-bg); border-color: var(--sx-ai-bd); }

.sistema-contract-screen__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
}

.sistema-contract-screen__meta div {
  padding: 16px 18px;
  background: var(--sx-surface);
}

.sistema-contract-screen__meta dt {
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sistema-contract-screen__meta dd {
  margin: 5px 0 0;
  color: var(--sx-ink);
}

.sistema-contract-screen__playbook {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 16px;
}

.sistema-contract-screen__brief,
.sistema-contract-screen__readiness,
.sistema-contract-screen__lanes,
.sistema-contract-screen__actions,
.sistema-contract-screen__gap-strip {
  background: var(--sx-surface);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
  box-shadow: var(--sx-shadow-card);
}

.sistema-contract-screen__brief {
  display: flex;
  gap: 16px;
  padding: 20px;
}

.sistema-contract-screen__brief-icon {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--mpvpc-brand-ember-on-light);
  background: var(--sx-st-amber-bg);
  border: 1px solid var(--sx-st-amber-bd);
}

.sistema-contract-screen__brief h2 {
  margin: 6px 0 7px;
  color: var(--sx-ink);
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.08;
  letter-spacing: 0;
  max-width: 28ch;
}

.sistema-contract-screen__brief p:not(.sistema-contract-screen__eyebrow) {
  color: var(--sx-ink-mut);
  max-width: 66ch;
}

.sistema-contract-screen__readiness {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 20px;
}

.sistema-contract-screen__readiness div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sistema-contract-screen__readiness span,
.sistema-contract-screen__readiness small {
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sistema-contract-screen__readiness strong {
  font-family: var(--mpvpc-font-mono);
  font-size: 28px;
  color: var(--sx-ink);
}

.sistema-contract-screen__lanes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.sistema-contract-screen__lanes div {
  min-height: 78px;
  padding: 16px 18px;
  border-right: 1px solid var(--sx-line);
  display: grid;
  align-content: space-between;
  gap: 10px;
}

.sistema-contract-screen__lanes div:last-child {
  border-right: 0;
}

.sistema-contract-screen__lanes span {
  font-family: var(--mpvpc-font-mono);
  font-size: 11px;
  color: var(--sx-ink-weak);
}

.sistema-contract-screen__lanes strong {
  color: var(--sx-ink);
  font-size: 14px;
}

.sistema-contract-screen__actions {
  grid-column: 1 / -1;
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sistema-contract-screen__gap-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  color: var(--sx-st-warn);
  background: var(--sx-st-warn-bg);
  border-color: var(--sx-st-warn-bd);
  font-size: 12.5px;
  font-weight: 700;
}

.sistema-contract-screen__counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.sistema-contract-screen__counts div {
  padding: 16px 18px;
  border-right: 1px solid var(--sx-line);
}

.sistema-contract-screen__counts div:last-child {
  border-right: 0;
}

.sistema-contract-screen__counts strong {
  display: block;
  font-family: var(--mpvpc-font-mono);
  font-size: 24px;
}

.sistema-contract-screen__counts span {
  color: var(--sx-ink-mut);
  font-size: 12px;
}

.sistema-contract-screen__kpi {
  display: grid;
  gap: 7px;
}

.sistema-contract-screen__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 18px;
}

.sistema-contract-screen__grid > section,
.sistema-contract-screen__grid > aside {
  min-width: 0;
  padding: 20px;
}

.sistema-contract-screen__grid h2 {
  margin-bottom: 12px;
  font-size: 16px;
}

.sistema-contract-screen__table-wrap {
  overflow-x: auto;
}

.sistema-contract-screen table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.sistema-contract-screen th,
.sistema-contract-screen td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--sx-line);
  text-align: left;
  vertical-align: top;
}

.sistema-contract-screen th {
  font-weight: 700;
}

.sistema-contract-screen thead th {
  color: var(--sx-ink-weak);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sistema-contract-screen ul {
  margin: 0;
  padding-left: 18px;
  color: var(--sx-ink-mut);
}

.sx-card--hover:hover {
  border-color: var(--sx-line-strong);
  box-shadow: var(--sx-shadow-pop);
}

.sx-btn:hover:not(:disabled) {
  filter: brightness(0.98);
}

.sx-kpi-grid {
  display: grid;
  grid-template-columns: repeat(var(--sx-kpi-columns, 4), minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.sx-kpi-grid > * {
  min-width: 0;
}

.sx-card,
.sx-workspace,
.sx-main,
.sx-page-content,
.sx-page-content > * {
  min-width: 0;
}

.sx-main {
  overflow-x: clip;
  scroll-padding-top: 24px;
}

/* AIDEV-NOTE: contrato PageCanvas — conteúdo começa na ESQUERDA; não voltar a max-width+auto (incidente 2026-07-24) */
.sx-page-content {
  width: 100%;
  max-width: none;
  margin: 0;
}

.sx-page-canvas {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.sx-page-canvas > * {
  width: 100%;
  min-width: 0;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Dados: o seletor de entidade e as ações ocupam a mesma faixa de filtros.
   Escolhas exclusivas usam linha âmbar, não uma sequência de chips/cartões. */
.sx-data-filter-bar {
  box-shadow: none;
  overflow: hidden;
}

.sx-data-filter-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  gap: 12px 16px;
  padding: 0 14px 0 16px;
}

.sx-data-filter-bar__selection {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.sx-data-filter-bar__label {
  color: var(--sx-ink-weak);
  font: 800 10px/1 var(--mpvpc-font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sx-filter-tabs__option:hover:not(:disabled) {
  color: var(--sx-ink) !important;
  background: var(--sx-surface-2) !important;
}

.sx-filter-tabs__option:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: -3px;
}

.sx-data-filter-bar__compact-picker { display: none; }

.sx-data-filter-bar__utility {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  white-space: nowrap;
}

.sx-data-filter-bar__search {
  position: relative;
  width: clamp(220px, 16vw, 310px);
}

.sx-data-filter-bar__result-count {
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

@media (max-width: 1580px) {
  .sx-data-filter-bar__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 16px;
  }

  .sx-data-filter-bar__utility {
    min-height: 52px;
    justify-content: flex-start;
    border-top: 1px solid var(--sx-line);
  }
}

@media (max-width: 960px) {
  .sx-data-filter-bar__selection { display: none; }

  .sx-data-filter-bar__inner {
    padding: 10px 14px;
    gap: 10px;
  }

  .sx-data-filter-bar__compact-picker { display: block; min-width: min(320px, 100%); }
  .sx-data-filter-bar__utility { border-top: 0; min-height: 38px; }
}

@media (max-width: 680px) {
  .sx-data-filter-bar__inner { display: flex; flex-direction: column; align-items: stretch; }
  .sx-data-filter-bar__compact-picker,
  .sx-data-filter-bar__utility,
  .sx-data-filter-bar__search { width: 100%; }
  .sx-data-filter-bar__utility { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .sx-data-filter-bar__search { flex: 1 1 100%; }
}

.sx-main--oportunidades .sx-page-content {
  max-width: none;
}

/* ============================================================
   CRM — wave 8a (25/09/2026). Área própria em #/crm: Contatos (Tabela | Funil) e Empresas (lista → 360).
   AIDEV-NOTE: o cartão do celular reusa a mesma <table class="sx-table-cards">; painel-extra.css carrega depois
   e usa !important, por isso as regras do cartão abaixo têm seletor mais específico e !important.
   ============================================================ */
/* Ao abrir o 360 a tela volta ao topo da área; a margem evita parar embaixo da barra do topo. */
.sx-crm-area { scroll-margin-top: 96px; }
/* AIDEV-NOTE: o Modal do kit (z-index 60) fica embaixo da barra do celular (.sx-mobile-nav, 70) e escondia
   "Salvar" no celular. Conserto só no CRM até o kit subir o modal para todas as telas. Desde a onda 1 de
   Contatos (29/09) o "Editar contato" abre por cima da ficha em Drawer (z-index 80): o modal fica em 85. */
.sx-crm-area .sx-modal-overlay { z-index: 85 !important; }
.sx-crm-kpis { margin-bottom: 20px; }
.sx-crm-so-celular { display: none; }
.sx-crm-kpi-nota { display: block; margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--sx-ink-mut); }
.sx-crm-sem-dado { font-size: 12.5px; color: var(--sx-ink-weak); }
.sx-crm-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sx-crm-alerta-texto { color: var(--sx-st-warn); }
.sx-crm-erro { margin: 8px 0 0; font-size: 12.5px; font-weight: 650; color: var(--sx-st-danger); }
.sx-crm-erro-funil {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--sx-st-danger-bd);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-st-danger-bg);
  color: var(--sx-st-danger);
  font-size: 12.5px;
  font-weight: 650;
}

/* Barra: busca, temperatura, Tabela | Funil e contagem. */
.sx-crm-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.sx-crm-busca { position: relative; flex: 1 1 260px; max-width: 340px; }
.sx-crm-busca > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--sx-ink-weak);
  pointer-events: none;
}
.sx-crm-contagem { margin-left: auto; font-size: 12.5px; color: var(--sx-ink-mut); }

/* Tabela de contatos. */
.sx-crm-canal {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--sx-line);
  border-radius: 6px;
  background: var(--sx-surface);
  color: var(--sx-ink-mut);
  cursor: pointer;
}
.sx-crm-canal:hover { border-color: var(--sx-line-strong); color: var(--sx-ink); }
.sx-crm-canal:focus-visible,
.sx-crm-contato-abrir:focus-visible,
.sx-crm-empresa-link:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.sx-crm-sigla {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--sx-line);
  border-radius: 999px;
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
  font-size: 11px;
  font-weight: 700;
}
.sx-crm-contatos .sx-crm-sigla { display: none; }
.sx-crm-contatos td.sx-crm-celula-contato { min-width: 240px; }
.sx-crm-empresas td[data-label="Empresa"] { min-width: 280px; }
.sx-crm-sigla--pilha { width: 26px; height: 26px; border: 2px solid var(--sx-surface); font-size: 10px; }
.sx-crm-empresa-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--sx-ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.sx-crm-empresa-link:hover > span { text-decoration: underline; text-underline-offset: 3px; }
/* Nome longo de empresa fica em duas linhas na tabela; o nome inteiro vai no title e no cartão do celular. */
.sx-crm-contatos td[data-label="Empresa"] { min-width: 180px; }
.sx-crm-empresa-link > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sx-crm-temperatura { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sx-ink-mut); }
.sx-crm-temperatura__ponto { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; }
.sx-crm-linha[data-aberta="true"] > td { background: var(--sx-surface-2); }

/* Oportunidades do contato (ficha). */
.sx-crm-opp-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-crm-opp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
}
.sx-crm-opp > .sx-btn { grid-column: 2; grid-row: 1 / span 2; }
.sx-crm-opp__nome { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-crm-opp__codigo { font-family: var(--mpvpc-font-mono); font-size: 11px; color: var(--sx-ink-weak); }
.sx-crm-opp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--sx-ink-mut); }
.sx-crm-opp__mais { font-size: 12px; color: var(--sx-ink-mut); }

/* Funil: borda fina inteira; o tom da temperatura fica só no indicador com rótulo. */
.sx-crm-cartao-funil { padding: 9px 10px 10px; border: 1px solid var(--sx-line); border-radius: 8px; background: var(--sx-surface); }
.sx-crm-cartao-funil__linha { font-size: 10.75px; color: var(--sx-ink-weak); }
.sx-crm-cartao-funil__linha.sx-crm-alerta-texto { color: var(--sx-st-warn); }
.sx-crm-cartao-funil__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--sx-ink-weak);
}
.sx-crm-cartao-funil__rodape .sx-crm-temperatura { font-size: 11px; }

/* Revisão de duplicidade: contatos com arquivar em dois passos; empresas só em leitura. */
.sx-crm-duplicidade { display: grid; gap: 16px; padding: 12px 14px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); background: var(--sx-surface); }
.sx-crm-duplicidade__titulo { margin-bottom: 4px; font-size: 13px; font-weight: 800; color: var(--sx-ink); }
.sx-crm-duplicidade__texto { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--sx-ink-mut); }
.sx-crm-dup-grupo { padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: 8px; background: var(--sx-surface-2); }
.sx-crm-dup-grupo__rotulo { margin-bottom: 7px; font-size: 11.5px; font-weight: 700; color: var(--sx-ink-weak); overflow-wrap: anywhere; }
.sx-crm-dup-registro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sx-crm-dup-registro__nome { flex: 1 1 220px; min-width: 0; font-size: 13px; color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-crm-dup-registro__acoes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sx-crm-dup-empresas { display: grid; gap: 10px; justify-items: start; }
.sx-crm-dup-empresas > * { justify-self: stretch; }
.sx-crm-dup-empresas > .sx-btn { justify-self: start; }
.sx-crm-dup-empresas__lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--sx-ink); }

/* Modais: contrato de escrita, aviso de duplicidade e histórico. */
.sx-crm-contrato {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px dashed var(--sx-line-strong);
  border-radius: 8px;
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
  font-size: 12px;
}
.sx-crm-contrato > svg { flex: 0 0 auto; color: var(--sx-st-success); }
.sx-crm-contrato__nome { font-family: var(--mpvpc-font-mono); font-weight: 600; color: var(--sx-ink); }
.sx-crm-aviso-duplicidade { padding: 10px 12px; border: 1px solid var(--sx-st-warn-bd); border-radius: 8px; background: var(--sx-st-warn-bg); color: var(--sx-ink); font-size: 12.5px; }
.sx-crm-historico { overflow: hidden; border: 1px solid var(--sx-line); border-radius: 8px; }
.sx-crm-historico__titulo { padding: 9px 11px; background: var(--sx-surface-2); color: var(--sx-ink); font-size: 12px; font-weight: 700; }
.sx-crm-historico__item { padding: 9px 11px; border-top: 1px solid var(--sx-line); }

/* Atalhos e 360. */
.sx-crm-atalho__icone {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: 9px;
  background: var(--sx-st-amber-bg);
  color: var(--mpvpc-brand-ember-on-light);
}

/* Contatos — onda 1 (29/09/2026): lista no padrão DeskcommCRM (paginada no servidor) e ficha do contato
   (Drawer do kit a partir de 921 px, página no celular). Selos, situação e marcadores vêm do Pill do kit. */
.sx-crm-contatos-lista { display: grid; gap: 12px; }
.sx-crm-contatos-topo { display: grid; gap: 10px; }
.sx-crm-contatos-topo .sx-crm-barra { margin-bottom: 0; }
.sx-crm-situacoes { border-bottom: 1px solid var(--sx-line); }
.sx-crm-filtro { flex: 0 1 190px; min-width: 150px; }
/* O Combobox do kit traz min-width 200 no próprio botão: no celular, duas colunas de filtro estouravam os 390 px. */
.sx-crm-filtro button[aria-haspopup="listbox"] { min-width: 0 !important; max-width: 100%; }
.sx-crm-filtros-ativos { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-crm-filtro-ativo { display: inline-flex; align-items: center; gap: 2px; }
.sx-crm-contato-abrir {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--sx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sx-crm-contato-abrir__texto { display: flex; flex-direction: column; min-width: 0; }
.sx-crm-contato-abrir__texto > strong { font-size: 13.5px; font-weight: 700; color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-crm-contato-abrir__texto > span { font-size: 12px; color: var(--sx-ink-mut); }
.sx-crm-contato-abrir:hover .sx-crm-contato-abrir__texto > strong { text-decoration: underline; text-underline-offset: 3px; }
.sx-crm-empresa-grupo { flex-direction: column; align-items: flex-start; gap: 2px; }
.sx-crm-empresa-grupo small { font-size: 11.5px; color: var(--sx-ink-mut); }
.sx-crm-marcadores,
.sx-crm-selos { display: flex; flex-wrap: wrap; gap: 4px; }
.sx-crm-canais { display: flex; flex-direction: column; gap: 4px; }
/* Selos só com os dígitos (como a tela de Conversas) numa linha: a linha da tabela fica com ~66 px (revisão de 30/09). */
.sx-crm-contatos .sx-crm-selos { flex-wrap: nowrap; }
.sx-crm-telefone { font-size: 11.5px; color: var(--sx-ink-mut); }
.sx-crm-ficha { display: grid; gap: 12px; }
.sx-crm-ficha__cabecalho { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sx-crm-ficha__identidade { display: grid; gap: 6px; min-width: 0; }
.sx-crm-ficha__sub { font-size: 12.5px; color: var(--sx-ink-mut); overflow-wrap: anywhere; }
.sx-crm-ficha__geral { display: grid; gap: 20px; }
.sx-crm-ficha__secao { display: grid; gap: 10px; }
.sx-crm-ficha__secao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sx-crm-ficha__secao-topo > h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-ink-weak); }
.sx-crm-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.sx-crm-campo { min-width: 0; }
.sx-crm-campo > dt { font-size: 11px; font-weight: 700; color: var(--sx-ink-weak); }
.sx-crm-campo > dd { margin: 3px 0 0; font-size: 13px; color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-crm-origens { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sx-crm-canais-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sx-crm-canal-cartao {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
}
.sx-crm-canal-cartao > .sx-btn { justify-self: start; }
.sx-crm-canal-cartao__acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-crm-canal-cartao__topo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sx-ink); }
.sx-crm-canal-cartao__topo > svg { color: var(--sx-st-success); }
.sx-crm-canal-cartao__ultima { display: grid; gap: 3px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-crm-canal-cartao__meta { font-size: 11.5px; color: var(--sx-ink-weak); }
.sx-crm-vinculo-empresa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sx-crm-papeis { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sx-crm-papeis > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--sx-ink-mut); }
.sx-crm-papeis > li > strong { color: var(--sx-ink); }
.sx-crm-memoria__resumo { margin: 0; font-size: 13px; line-height: 1.55; color: var(--sx-ink); white-space: pre-line; overflow-wrap: anywhere; }
.sx-crm-atas { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sx-crm-ata { padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface); }
.sx-crm-ata__topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--sx-ink); }
.sx-crm-ata__topo > span { font-size: 11.5px; color: var(--sx-ink-weak); }
.sx-crm-ata__bloco { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--sx-ink); }
.sx-crm-ata__bloco > span { font-size: 11px; font-weight: 700; color: var(--sx-ink-weak); }
.sx-crm-ata__bloco > ul { margin: 2px 0 0; padding-left: 18px; }
.sx-crm-ficha__tempo { display: grid; gap: 14px; }
.sx-crm-ficha__carregando { display: grid; gap: 10px; }
.sx-crm-ficha-pagina { display: grid; gap: 14px; }
.sx-crm-ficha-pagina__topo { display: grid; justify-items: start; gap: 6px; }
.sx-crm-ficha-pagina__topo > h2 { margin: 0; font-size: 18px; color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-crm-ficha-pagina__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sx-crm-voltar svg { transform: rotate(180deg); }

@media (max-width: 680px) {
  .sx-crm-barra { gap: 10px; }
  .sx-crm-busca { flex: 1 1 100%; max-width: none; }
  .sx-crm-contagem { margin-left: 0; }

  /* Cartão do contato: nome e empresa no cabeçalho, campos em duas colunas, expandir dentro do cartão. */
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-bottom: 12px !important;
    border: 1px solid var(--sx-line) !important;
    border-radius: var(--sx-radius) !important;
  }
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha > td {
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    text-align: left !important;
    background: transparent !important;
  }
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha > td.sx-crm-celula-contato,
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha > td[data-label="Empresa"],
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha > td[data-acoes] { grid-column: 1 / -1; }
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha > td.sx-crm-celula-contato::before,
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha > td[data-label="Empresa"]::before { content: none !important; }
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha > td.sx-crm-celula-contato { padding-top: 12px !important; }
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha > td[data-acoes] { flex-direction: row; }
  .sx-table-cards.sx-crm-contatos tr.sx-crm-linha > td[data-label="Valor"] { text-align: left !important; }
  .sx-crm-contatos .sx-crm-sigla { display: grid; }
  .sx-crm-so-celular { display: inline; }
  .sx-crm-empresa-link > span { display: block; overflow: visible; -webkit-line-clamp: unset; }
  .sx-crm-contato-abrir { width: 100%; }
  .sx-crm-contatos .sx-crm-selos { flex-wrap: wrap; }
  .sx-crm-filtro { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .sx-crm-campos { grid-template-columns: minmax(0, 1fr); }
  .sx-crm-ficha-pagina__acoes > .sx-btn { flex: 1 1 auto; min-height: 44px; }
  .sx-crm-opp { grid-template-columns: minmax(0, 1fr); }
  .sx-crm-opp > .sx-btn { grid-column: auto; grid-row: auto; justify-self: start; min-height: 44px; }

  /* Cartão da empresa: a primeira linha perdia a borda de cima (borderTop inline "none"). */
  .sx-table-cards.sx-crm-empresas tbody tr { border: 1px solid var(--sx-line) !important; }
  .sx-table-cards.sx-crm-empresas td[data-label="Empresa"] { text-align: left !important; }
  .sx-table-cards.sx-crm-empresas td[data-label="Empresa"]::before { content: none !important; }
}

/* AIDEV-TODO: tema escuro sem --sx-st-neutral/-danger/-warn (texto a 1,5:1); o CRM ajusta só dentro dele até o DS.
   Mesmo tratamento da Central (wave 3a). O aviso usa os valores de âmbar do escuro que o DS já definiu: com o
   fundo claro de antes, o botão do aviso ("Ler de novo") ficava com texto claro sobre amarelo.
   AIDEV-NOTE: success/info/amber-bd escuros vêm do DS desde 29/09 (body.theme-dark, #634); a onda 1 de Contatos
   repetia os mesmos valores aqui e saiu na revisão de 30/09. */
body.theme-dark .sx-crm-area {
  --sx-st-neutral: #B7B1A4;
  --sx-st-neutral-bd: #3A3733;
  --sx-st-danger: #E8958A;
  --sx-st-danger-bd: #5A2E29;
  --sx-st-warn: #E8954A;
  --sx-st-warn-bg: #2A2014;
  --sx-st-warn-bd: #4A3A22;
}
body.theme-dark .sx-crm-atalho__icone { color: var(--sx-st-amber); }

/* Financeiro usa a largura útil do monitor: a tabela detalhada não deve ficar
   comprimida no centro enquanto sobra uma faixa vazia ao lado. */
.sx-main--financeiro .sx-page-content {
  max-width: none;
}

.sx-inbox-grid {
  min-width: 0;
}

.sx-inbox-resize-handle {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -6px;
  bottom: 0;
  width: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sx-ink-weak);
  cursor: col-resize;
  touch-action: none;
}

.sx-inbox-resize-handle > span {
  display: grid;
  place-items: center;
  width: 4px;
  height: 42px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--sx-line-strong);
  font-size: 12px;
  line-height: 1;
}

.sx-inbox-resize-handle:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: -2px;
}

.sx-inbox-rail-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 8px auto 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sx-ink-mut);
  cursor: pointer;
}

.sx-inbox-rail-toggle:hover { background: var(--sx-surface); color: var(--sx-ink); }

.sx-inbox-rail-toggle:focus-visible {
  outline: 3px solid var(--mpvpc-brand-ember);
  outline-offset: 2px;
}

.sx-inbox-compact-nav {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px 12px;
}

.sx-inbox-rail-item--compact {
  position: relative;
  min-width: 44px;
  min-height: 44px;
}

.sx-inbox-rail-item--compact:hover {
  background: var(--sx-surface);
  color: var(--sx-ink);
}

.sx-inbox-rail-item--compact:focus-visible {
  outline: 3px solid var(--mpvpc-brand-ember);
  outline-offset: -3px;
}

.sx-inbox-rail-item--compact .sx-inbox-rail-marker {
  position: absolute;
  left: 3px;
  bottom: 5px;
}

.sx-inbox-rail-count {
  position: absolute;
  top: 2px;
  right: 1px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border: 1px solid var(--sx-surface-2);
  border-radius: 999px;
  background: var(--mpvpc-brand-ember);
  color: var(--mpvpc-brand-charcoal);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

/* AIDEV-NOTE: a caixa de e-mail é a única tela que se comporta como APLICATIVO: ocupa a altura
   visível inteira e cada coluna rola por dentro. Antes vivia presa a 640/760px inline e, em
   monitor de 1440px de altura, sobravam ~620px de cinza embaixo enquanto a lista rolava.
   Aqui a altura desce em cadeia do <main> até o grid. Os `!important` existem para vencer o
   estilo inline do AppShell/Card (mesmo motivo documentado no bloco de @media do painel.html).
   Só vale do tablet para cima — no celular (≤680px) as colunas empilham e a altura fica livre. */
@media (min-width: 681px) {
  /* A rolagem continua no <main> (herdada do AppShell): se a tela for baixa demais para o piso
     de 480px, a página volta a rolar em vez de cortar conteúdo. */
  .sx-main--inbox {
    display: flex;
    flex-direction: column;
    padding-bottom: 24px !important;
  }

  .sx-main--inbox .sx-page-canvas,
  .sx-main--inbox .sx-page-canvas > section {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  /* O Card da caixa é o último filho da section; é ele que absorve a sobra vertical.
     O piso de 480px impede a caixa de virar uma fresta em tela baixa. */
  .sx-main--inbox .sx-page-canvas > section > .sx-card {
    flex: 1 1 auto;
    min-height: 480px;
  }

  .sx-main--inbox .sx-inbox-grid {
    height: 100%;
    min-height: 0 !important;
  }
}

@media (max-width: 680px) {
  .sx-main--inbox .sx-inbox-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .sx-main--inbox .sx-inbox-grid > div {
    max-height: none;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sx-line);
  }

  .sx-main--inbox .sx-inbox-grid > div:last-child {
    border-bottom: 0;
  }

  .sx-inbox-resize-handle {
    display: none;
  }
}

/* ============================================================
   CENTRAL DE ATENDIMENTO (redesenho wave 3a, 25/09/2026)
   Casca com os modos Fila, Conversas e Alertas técnicos em #/atendimento e #/inbox.
   AIDEV-NOTE: a casca NÃO é .sx-card: na Inbox todo card filho direto da section estica
   até 480 px pela cadeia de altura acima. Lista → detalhe vem de data-* da própria tela
   (sem medir a janela no código): Fila até 1759 px, Conversas e Inbox até 920 px.
   1760 px é onde a tabela da Fila (920 px de largura mínima) cabe ao lado do detalhe.
   ============================================================ */
.sx-central-casca { margin-bottom: 2px; }

.sx-central-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: -6px 0 18px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-central-modos .sx-filter-tabs__option {
  min-height: 46px;
  font-size: 13.5px;
}

.sx-central-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-central-canal {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.sx-central-canal__rotulo {
  color: var(--sx-ink-weak);
  font: 800 10px/1 var(--mpvpc-font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sx-central-sem-dado { color: var(--sx-ink-weak); }

/* Fila: tabela (lista) e caso (detalhe). */
.sx-central-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.sx-central-fila__lista {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.sx-central-fila__detalhe { min-width: 0; }
/* AIDEV-NOTE: texto sem espaço esticava a coluna e escondia Dono e Ações em 1440 px (dado real, 25/09). */
.sx-central-fila__lista td[data-label="Atendimento"] { overflow-wrap: anywhere; }

.sx-central-caso-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-central-caso-link strong { font-size: 13.5px; }
.sx-central-caso-link svg { flex: 0 0 auto; color: var(--sx-ink-weak); }
.sx-central-caso-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.sx-central-caso-link:focus-visible,
.sx-central-conversa-item:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: 2px;
  border-radius: 4px;
}

/* O detalhe só existe com ?ticket= (caso escolhido). Abaixo de 1760 px ele toma o lugar da lista. */
@media (max-width: 1759px) {
  .sx-central-fila-area[data-detalhe="aberto"] .sx-central-fila__lista,
  .sx-central-fila-area[data-detalhe="aberto"] .sx-central-fila__topo { display: none; }
}

/* De 1760 px para cima a tabela (mínimo de 920 px) cabe ao lado do detalhe; "Voltar para a fila"
   continua visível porque é ele que fecha o detalhe. */
@media (min-width: 1760px) {
  .sx-central-fila-area[data-detalhe="aberto"] .sx-central-fila {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
  }
  /* Só aqui lista e detalhe aparecem juntos: a linha do caso em detalhe ganha o destaque. */
  .sx-central-linha--aberta > td { background: var(--sx-st-amber-bg); }
}

.sx-central-caso {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sx-central-caso > .sx-central-voltar { justify-self: start; }

.sx-central-caso__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sx-central-caso__titulo {
  margin: 4px 0 0;
  color: var(--sx-ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sx-central-caso__contato {
  margin: 6px 0 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.sx-central-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
  margin: 0;
}

.sx-central-ficha__campo { min-width: 0; }

.sx-central-ficha dt {
  margin-bottom: 5px;
  color: var(--sx-ink-weak);
  font: 800 10px/1.2 var(--mpvpc-font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sx-central-ficha dd {
  margin: 0;
  color: var(--sx-ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.sx-central-caso__bloco {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
}

.sx-central-caso__rotulo {
  color: var(--mpvpc-brand-ember-on-light);
  font-size: 12.5px;
}

.sx-central-caso__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sx-central-caso__nota {
  margin: -4px 0 0;
  color: var(--sx-ink-weak);
  font-size: 12px;
}

.sx-central-caso__secao {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--sx-line);
}

.sx-central-caso__secao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sx-central-caso__secao-topo h3 {
  margin: 0;
  color: var(--sx-ink);
  font-size: 14px;
}

.sx-central-caso__texto {
  margin: 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.5;
}

.sx-central-previa {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-central-previa li {
  padding: 8px 10px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
  color: var(--sx-ink);
  font-size: 12.5px;
}

.sx-central-previa li.sx-central-previa__saida { background: var(--sx-surface-2); }

.sx-central-previa__autor {
  display: block;
  margin-bottom: 3px;
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 700;
}

/* Conversas do WhatsApp: formato WhatsApp Web (lista e conversa lado a lado), só leitura.
   Spec conversas-whatsapp-estilo-whatsapp-2026-09-29. Destaque sem borda lateral colorida: fundo do kit. */
.sx-central-conversas {
  display: grid;
  /* 320 px: menor largura em que os dois grupos de abas cabem numa linha com o rótulo curto (QA de 29/09). */
  grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.sx-central-conversas__lista {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  container: conversas-lista / inline-size;
}

.sx-central-conversas__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 6px;
}

.sx-central-conversas__topo h2 {
  margin: 0;
  color: var(--sx-ink);
  font-size: 14px;
}

.sx-central-conversas__topo span {
  color: var(--sx-ink-weak);
  font-size: 11.5px;
  font-weight: 700;
}

/* As abas quebram linha em vez de esconder "Internos" atrás de uma rolagem lateral (só como reserva: ver abaixo). */
.sx-central-conversas__numeros,
.sx-central-conversas__filtros {
  flex-wrap: wrap;
  padding: 0 8px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-central-conversas__busca {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-central-conversas__busca > svg {
  position: absolute;
  top: 50%;
  left: 23px;
  color: var(--sx-ink-weak);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Alturas presas à janela: no desktop a mensagem mais recente e o fim da lista cabem sem rolar a página.
   AIDEV-NOTE: as constantes descontam o que fica ACIMA do painel. Título só no topo (01/10/2026) tirou ~82 px
   de cima: 500→418 aqui e 450→368 na rolagem das mensagens; mexeu no que fica acima, recalibre as duas. */
.sx-central-conversas__itens {
  max-height: clamp(280px, calc(100vh - 418px), 760px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.sx-central-conversas__itens li + li { border-top: 1px solid var(--sx-line); }

.sx-central-conversa-item {
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--sx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-central-conversa-item:hover { background: var(--sx-surface-2); }

.sx-central-conversa-item[aria-current="true"] { background: var(--sx-st-amber-bg); }

.sx-central-conversa-item--esqueleto { cursor: default; }

.sx-central-conversa-item__corpo {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}

.sx-central-conversa-item__linha {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sx-central-conversa-item__linha strong {
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-central-conversa-item__quando {
  flex: 0 0 auto;
  color: var(--sx-ink-weak);
  font-size: 11px;
}

.sx-central-conversa-item__empresa {
  overflow: hidden;
  color: var(--sx-ink-mut);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-central-conversa-item__previa {
  min-width: 0;
  overflow: hidden;
  color: var(--sx-ink-mut);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-central-conversa-item__autor {
  color: var(--sx-ink);
  font-weight: 700;
}

.sx-central-conversa-item__selos {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.sx-central-conversas__sem-chave {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--sx-line);
  color: var(--sx-ink-weak);
  font-size: 11.5px;
}

/* Dossiê: conversas do 1631 com os contatos da oportunidade (só o dono vê). */
.sx-dossie-1631__resumo {
  margin: 0 0 10px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-dossie-1631__lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-dossie-1631__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sx-line);
}

.sx-dossie-1631__meta {
  grid-column: 1 / -1;
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 700;
}

.sx-dossie-1631__texto {
  min-width: 0;
  color: var(--sx-ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Classe do 1631 (Negócio / Pessoal / Você e o Volts / Sem classe) e o botão das páginas antigas. */
.sx-central-selo-classe {
  display: inline-flex;
  align-items: center;
}

.sx-central-mensagem .sx-central-selo-classe {
  justify-self: end;
}

.sx-central-conversas__antigas {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--sx-line);
}

.sx-central-conversas__leitura {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.sx-central-conversas__voltar { padding: 10px 12px 0; }

.sx-central-conversas__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sx-line);
  background: var(--sx-surface);
}

.sx-central-conversas__contato {
  display: flex;
  flex: 1 1 260px;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
}

.sx-central-conversas__identidade {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.sx-central-conversas__identidade h2 {
  margin: 0;
  color: var(--sx-ink);
  font-size: 17px;
  overflow-wrap: anywhere;
}

.sx-central-conversas__identidade p {
  margin: 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-central-conversas__oportunidade { justify-self: start; max-width: 100%; color: var(--sx-ink-mut); }
.sx-central-conversas__oportunidade strong { min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }

.sx-central-conversas__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================================
   DADOS DO CONTATO (pedido do dono wa-dados-contato, 30/09/2026): foto e nome da conversa abrem o painel lateral
   (Drawer do kit, vidro líquido .sx-glass-float com reserva sólida) com as tags da pessoa e a memória longa.
   Prefixos .sx-central-conversas__abrir-contato / __foto-contato e .sx-wa-contato-*.
   ============================================================ */
.sx-central-conversas__foto-contato {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.sx-central-conversas__foto-contato:hover { box-shadow: 0 0 0 2px color-mix(in oklab, var(--mpvpc-brand-ember) 45%, transparent); }

.sx-central-conversas__abrir-contato {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sx-central-conversas__abrir-contato > span { min-width: 0; overflow-wrap: anywhere; }
.sx-central-conversas__abrir-contato > svg { flex: 0 0 auto; color: var(--sx-ink-weak); }
.sx-central-conversas__abrir-contato:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.sx-central-conversas__abrir-contato:hover > svg { color: var(--mpvpc-brand-ember-on-light); }
.sx-central-conversas__abrir-contato:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: 2px;
  border-radius: 4px;
}

.sx-wa-contato { display: grid; gap: 18px; }
.sx-wa-contato__pessoa { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-wa-contato__identidade { display: grid; gap: 4px; min-width: 0; }
.sx-wa-contato__identidade > strong { color: var(--sx-ink); font-size: 16px; overflow-wrap: anywhere; }
.sx-wa-contato__identidade > span { color: var(--sx-ink-mut); font-size: 12.5px; overflow-wrap: anywhere; }
.sx-wa-contato__numero { justify-self: start; }
.sx-wa-contato__atualizando { margin-left: auto; color: var(--sx-ink-weak); font-size: 11.5px; }

.sx-wa-contato-secao { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--sx-line); }
.sx-wa-contato-secao > h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--sx-ink);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.01em;
}
.sx-wa-contato-secao > h3 > svg { color: var(--mpvpc-brand-ember-on-light); }
.sx-wa-contato-secao__descricao { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }

.sx-wa-contato-tags { display: grid; gap: 10px; }
.sx-wa-contato-tags__lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-wa-contato-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 30px;
  padding: 0 4px 0 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
}
.sx-wa-contato-tag__rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-wa-contato-tag__tirar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.sx-wa-contato-tag__tirar:hover { background: color-mix(in oklab, currentColor 14%, transparent); }
.sx-wa-contato-tag__tirar:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: 1px; }
.sx-wa-contato-tag__tirar:disabled { cursor: wait; opacity: 0.5; }
.sx-wa-contato-tags__adicionar { display: flex; }
.sx-wa-contato-ajuda,
.sx-wa-contato-vazio { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }
/* Região de aviso sempre no DOM (vazia não ocupa espaço): o leitor de tela anuncia "Tag … adicionada." */
.sx-wa-contato-status { margin: 0; min-height: 0; color: var(--sx-st-success); font-size: 12.5px; font-weight: 600; }

.sx-wa-contato-memoria {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
  background: var(--sx-glass-bg-soft);
}
.sx-wa-contato-memoria__quando { margin: 0; color: var(--sx-ink-weak); font-size: 11.5px; font-weight: 650; }
.sx-wa-contato-memoria__texto {
  color: var(--sx-ink);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.sx-wa-contato-carregando { display: grid; gap: 10px; }

/* No toque, o X da tag e o botão do nome ganham o alvo de 44 px. */
@media (pointer: coarse), (max-width: 680px) {
  .sx-wa-contato-tag { min-height: 44px; padding-left: 12px; }
  .sx-wa-contato-tag__tirar { width: 40px; height: 40px; }
  .sx-central-conversas__abrir-contato { min-height: 44px; }
}

/* A rolagem nasce no fim: a mensagem mais recente fica à vista sem medir nada. */
.sx-central-mensagens-rolagem {
  display: flex;
  flex-direction: column-reverse;
  height: clamp(300px, calc(100vh - 368px), 720px);
  padding: 0 14px 12px;
  overflow-y: auto;
  background: var(--sx-surface-2);
}

/* A trilha é minmax(0, 1fr): uma nota comprida (nowrap) não alarga o fio além do painel. */
.sx-central-mensagens {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* AIDEV-NOTE: separador de dia EM LINHA, sem sticky: preso no topo com fundo opaco ele cobria o texto do
   balão e da nota logo abaixo (prints de 29/09). */
.sx-central-dia {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

.sx-central-dia span {
  min-width: 104px;
  padding: 3px 10px;
  text-align: center;
  border: 1px solid var(--sx-line);
  border-radius: 999px;
  background: var(--sx-surface);
  color: var(--sx-ink-mut);
  font-size: 11px;
  font-weight: 700;
}

.sx-central-mensagem {
  display: grid;
  justify-self: start;
  gap: 3px;
  max-width: min(78%, 560px);
  padding: 8px 12px 6px;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  background: var(--sx-surface);
  color: var(--sx-ink);
}

.sx-central-mensagem--saida {
  justify-self: end;
  border-color: var(--sx-st-amber-bd);
  background: var(--sx-st-amber-bg);
}

.sx-central-mensagem p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sx-central-mensagem__autor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sx-ink-mut);
  font-size: 11px;
  font-weight: 700;
}

.sx-central-mensagem__meta {
  justify-self: end;
  color: var(--sx-ink-weak);
  font-size: 10.5px;
  font-weight: 700;
}

.sx-central-midia {
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.sx-central-midia li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
  font-size: 12px;
}

.sx-central-midia__titulo {
  min-width: 0;
  overflow: hidden;
  color: var(--sx-ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-central-midia__situacao {
  flex: 0 0 auto;
  color: var(--sx-ink-weak);
  font-size: 11px;
}

/* Nota interna: centralizada, sem balão, cor neutra; o detalhe técnico abre no clique. */
.sx-central-nota {
  display: grid;
  /* Trilha que encolhe: sem ela a nota longa ("5 respostas de 23/09 e 25/09…") vazava da tela em 390 px. */
  grid-template-columns: minmax(0, 1fr);
  justify-self: center;
  justify-items: center;
  gap: 4px;
  max-width: min(92%, 560px);
}

.sx-central-nota__botao {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px dashed var(--sx-line-strong);
  border-radius: 14px;
  background: var(--sx-surface);
  color: var(--sx-ink-mut);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.sx-central-nota__botao:hover { background: var(--sx-surface-2); color: var(--sx-ink); }

.sx-central-nota__botao:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: 2px;
}

/* O texto quebra linha (nada de reticências): no celular a nota inteira fica legível. */
.sx-central-nota__texto {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
}

.sx-central-nota__hora {
  flex: 0 0 auto;
  color: var(--sx-ink-weak);
  font-size: 10.5px;
}

.sx-central-nota--atencao svg { color: var(--sx-st-amber); }
.sx-central-nota--falha svg { color: var(--sx-st-danger); }
.sx-central-nota--info svg { color: var(--sx-ink-weak); }

.sx-central-nota__detalhe {
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  background: var(--sx-surface);
  color: var(--sx-ink-mut);
  font-family: var(--mpvpc-font-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.sx-central-conversas__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--sx-line);
}

.sx-central-conversas__somente-leitura {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--sx-ink-weak);
  font-size: 11.5px;
}

.sx-central-conversas__leitura .sx-central-caso__texto { padding: 16px; }

/* AIDEV-NOTE: esconde o INVÓLUCRO do "Voltar": o Btn do kit traz display no style e a regra antiga sobre ele
   nunca pegava (o "Voltar" aparecia no desktop no print do dono de 29/09). */
@media (min-width: 921px) {
  .sx-central-conversas__voltar { display: none; }
}

/* Lacuna de dado do número (InlineAlert do kit) na lista e no cabeçalho da conversa. */
.sx-central-conversas__lacuna { margin: 10px 12px; }

/* AIDEV-NOTE: até 920 px a conversa aberta é TELA CHEIA como no WhatsApp: fixa entre a topbar e a barra inferior,
   com o "Voltar" no topo e a rolagem das mensagens ocupando o resto. Antes ela ficava abaixo do cabeçalho e das
   abas da Central (~650 px de 844) com duas rolagens encaixadas e ~130 px de mensagens (QA de 29/09). */
@media (max-width: 920px) {
  .sx-central-conversas { grid-template-columns: minmax(0, 1fr); }
  .sx-central-conversas[data-conversa="fechada"] > .sx-central-conversas__leitura { display: none; }
  .sx-central-conversas[data-conversa="aberta"] > .sx-central-conversas__lista { display: none; }
  /* Sem conversa aberta, a leitura não aparece: nenhum item fica com cara de escolhido. */
  .sx-central-conversas[data-conversa="fechada"] .sx-central-conversa-item[aria-current="true"] { background: transparent; }
  .sx-central-conversas__itens { max-height: none; }
  .sx-central-mensagem { max-width: 88%; }
  .sx-central-conversas[data-conversa="aberta"] > .sx-central-conversas__leitura {
    position: fixed;
    top: var(--sx-topbar-h);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    border: 0 !important;
    border-radius: 0 !important;
    /* Opaco: o vidro do cartão deixaria a página de trás aparecer por baixo da conversa. */
    background: var(--sx-surface) !important;
    box-shadow: none !important;
  }
  .sx-central-conversas[data-conversa="aberta"] .sx-central-conversas__cabecalho { padding: 8px 12px 10px; }
  .sx-central-conversas[data-conversa="aberta"] .sx-central-conversas__lacuna { flex: 0 0 auto; margin: 8px 10px 0; }
  .sx-central-conversas[data-conversa="aberta"] .sx-central-mensagens-rolagem {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 0 10px 10px;
    overscroll-behavior: contain;
  }
  .sx-central-conversas[data-conversa="aberta"] .sx-central-conversas__rodape { flex: 0 0 auto; }
  /* Uma rolagem só: com a conversa por cima, a página de trás não rola. */
  .sx-main:has(.sx-central-conversas[data-conversa="aberta"]) { overflow: hidden !important; }
}

/* Rótulo curto das abas só no celular (um dos dois está sempre fora da tela e do leitor de tela). */
.sx-central-aba__curto { display: none; }

/* AIDEV-NOTE: o rótulo curto ("9275 · Laís", "Pausada") segue a LARGURA DA LISTA, não a da janela: de 921 a
   ~1400 px a lista tem 320-420 px e as abas longas (~410 px) quebravam em duas linhas ("Volts · 1631"
   embaixo). Medido em 29/09: uma linha por grupo em 1440 (rótulo longo), 1280, 1024, 921 e 390 px. */
@container conversas-lista (max-width: 420px) {
  .sx-central-aba__longo { display: none; }
  .sx-central-aba__curto { display: inline; }
  .sx-central-conversas__numeros .sx-filter-tabs__option,
  .sx-central-conversas__filtros .sx-filter-tabs__option { padding: 0 6px !important; gap: 5px !important; }
}

@container conversas-lista (max-width: 340px) {
  .sx-central-conversas__numeros,
  .sx-central-conversas__filtros { padding: 0 4px; }
  .sx-central-conversas__numeros .sx-filter-tabs__option,
  .sx-central-conversas__filtros .sx-filter-tabs__option { padding: 0 5px !important; gap: 4px !important; }
}

/* Celular: a conversa para acima da barra inferior; a lista ganha altura com rótulos curtos nas abas (cada
   grupo numa linha, sem esconder "1631 · Volts" atrás de rolagem lateral) e sem o título repetido. */
@media (max-width: 680px) {
  .sx-central-conversas[data-conversa="aberta"] > .sx-central-conversas__leitura { bottom: calc(65px + env(safe-area-inset-bottom)); }
  .sx-central-conversas__topo { display: none; }
  .sx-central-aba__longo { display: none; }
  .sx-central-aba__curto { display: inline; }
  .sx-central-conversas__numeros .sx-filter-tabs__option,
  .sx-central-conversas__filtros .sx-filter-tabs__option { padding: 0 7px !important; }
  .sx-central-conversas__busca { padding: 8px 10px; }
}

/* Alertas técnicos: só leitura. */
.sx-central-alertas {
  display: grid;
  gap: 12px;
}

.sx-central-alertas__intro {
  margin: 0;
  color: var(--sx-ink-mut);
  font-size: 13px;
}

.sx-central-alerta {
  display: grid;
  gap: 12px;
  color: var(--sx-ink);
}

.sx-central-avisos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-central-avisos li {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.sx-central-avisos strong {
  color: var(--sx-ink);
  font-size: 12px;
}

/* Inbox: "Voltar para a lista" só aparece quando a leitura toma o lugar da lista (painel-extra.css). */
.sx-inbox-voltar {
  display: none;
  padding: 10px 14px 0;
}

/* AIDEV-TODO: o tema escuro não redefine --sx-st-neutral (#555248 sobre #232120 dá 2,1:1). Até o DS
   levar o token para body.theme-dark (pendência já aberta na wave 2), a Central clareia o tom neutro
   só dentro dela: selos da casca, aviso "Fora da Fila" e selos da tabela ficam em 7,5:1. */
body.theme-dark .sx-central-casca,
body.theme-dark .sx-central-fila-area,
body.theme-dark .sx-central-conversas,
body.theme-dark .sx-central-alertas {
  --sx-st-neutral: #B7B1A4;
  --sx-st-neutral-bd: #3A3733;
}

@media (max-width: 680px) {
  .sx-central-barra { gap: 6px 12px; }
  .sx-central-canal {
    width: 100%;
    margin-left: 0;
  }
  .sx-central-caso__cabecalho { flex-direction: column; }
}

/* Em notebooks a razão vira cartões em duas colunas, evitando comprimir texto ou
   depender de rolagem horizontal. No celular vira uma coluna rotulada. */
@media (max-width: 1420px) {
  .sx-finance-ledger-wrap { overflow-x: visible !important; background: var(--sx-surface-2); }
  .sx-finance-ledger-table { min-width: 0 !important; display: block !important; }
  .sx-finance-ledger-table colgroup { display: none !important; }
  .sx-finance-ledger-table thead { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sx-finance-ledger-table tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
  .sx-finance-ledger-table tr { display: grid !important; align-content: start; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(15, 15, 14, .035); }
  .sx-finance-ledger-table td { display: grid !important; grid-template-columns: minmax(118px, .38fr) minmax(0, 1fr); align-items: start; gap: 12px; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 8px 12px !important; border-top: 1px solid var(--sx-line) !important; white-space: normal !important; overflow-wrap: anywhere; }
  .sx-finance-ledger-table td:first-child { border-top: 0 !important; }
  .sx-finance-ledger-table td::before { content: attr(data-label); color: var(--sx-ink-weak); font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
  .sx-finance-ledger-table td > * { min-width: 0; max-width: 100%; }
  .sx-finance-ledger-table td[data-acoes] { grid-template-columns: 1fr; }
  .sx-finance-ledger-table td[data-acoes]::before { content: none; }
}

@media (max-width: 760px) {
  .sx-finance-ledger-table tbody { grid-template-columns: minmax(0, 1fr); padding: 0; background: transparent; }
  .sx-finance-ledger-table td { grid-template-columns: minmax(100px, .34fr) minmax(0, 1fr); }
}

/* ============================================================
   ÁREA FINANCEIRO — redesenho wave 5a (25/09/2026, imagens 35 a 44): Lançamentos (#/financeiro),
   Comprovantes (#/viagens) e Conciliação (#/conciliacao) com a mesma casca e os modos como navegação.
   Prefixo próprio .sx-fin-*: a base .sx-caixa-* é da wave 2a, ainda fora da main. No celular, cartão + Accordion.
   AIDEV-NOTE: a linha da tabela não expande no computador (decisão do dono de 12/09); o Accordion é só do cartão.
   ============================================================ */
/* Tema escuro: os tokens de estado não têm versão escura no app; mesmos valores da wave 2a, só dentro da área.
   AIDEV-TODO: levar estes tokens para body.theme-dark no DS e apagar este bloco (pendência da wave 2b). */
body.theme-dark .sx-fin-tela {
  --sx-st-neutral:    #B7B1A4;
  --sx-st-neutral-bd: #3A3733;
  --sx-st-amber-bd:   #5A4424;
  --sx-st-success:    #86CFA0;
  --sx-st-success-bg: #13241A;
  --sx-st-success-bd: #2B4A35;
  --sx-st-info:       #93BDE6;
  --sx-st-info-bg:    #13212E;
  --sx-st-info-bd:    #2A4156;
  --sx-st-warn:       #E9B25E;
  --sx-st-warn-bg:    #2B2212;
  --sx-st-warn-bd:    #574421;
  --sx-st-danger:     #F0A197;
  --sx-st-danger-bd:  #5A2C28;
}

/* Casca: um PageHeader e os modos logo abaixo (mesmo ritmo da Central de Atendimento). */
.sx-fin-casca { margin-bottom: 2px; }
.sx-fin-modos { margin: -6px 0 2px; border-bottom: 1px solid var(--sx-line); }
.sx-fin-modos .sx-filter-tabs__option { min-height: 46px; font-size: 13.5px; }

/* Texto livre de tabela quebra em qualquer ponto: com dado real, texto sem espaço esticava a tabela (wave 3a). */
.sx-fin-texto-livre,
.sx-fin-anexos { overflow-wrap: anywhere; }
/* Nome de arquivo longo na célula: duas linhas e reticências; o nome inteiro fica na dica (title). */
.sx-fin-anexos a[title],
.sx-fin-arquivo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sx-fin-arquivo { color: var(--sx-st-success); font-size: 12px; font-weight: 650; }
.sx-fin-recorte { margin: -6px 0 0; color: var(--sx-ink-weak); }
.sx-fin-rodape { margin: -4px 0 0; color: var(--sx-ink-weak); }
.sx-fin-contagem { margin: 0 0 8px; color: var(--sx-ink-weak); }
.sx-fin-motivo { display: block; margin-top: 3px; color: var(--sx-ink-weak); font-size: 11px; font-weight: 600; white-space: normal; }
.sx-fin-vencido { color: var(--sx-st-danger); font-size: 11.5px; font-weight: 700; }

/* Legenda das famílias de estado e o ponto colorido da linha. */
.sx-fin-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
  background: var(--sx-surface-2);
}
.sx-fin-legenda li { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--sx-ink); font-size: 12px; }
.sx-fin-legenda li > span { min-width: 0; }
.sx-fin-legenda strong { font-weight: 700; }
.sx-fin-legenda__sub { color: var(--sx-ink-mut); }
.sx-fin-ponto {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--sx-st-neutral);
  align-self: center;
}
.sx-fin-ponto[data-tom="success"] { background: var(--sx-st-success); }
.sx-fin-ponto[data-tom="amber"] { background: var(--mpvpc-brand-ember); }
.sx-fin-ponto[data-tom="danger"] { background: var(--sx-st-danger); }
.sx-fin-ponto[data-tom="info"] { background: var(--sx-st-info); }

/* Faixa de filtros do Lançamentos: tudo em linha no computador; no celular, busca, "Filtros (n)" e a chave. */
.sx-fin-filtros__linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.sx-fin-filtros__campos { display: contents; }
.sx-fin-filtros__abrir { display: none; }
.sx-fin-filtros__chaves { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.sx-fin-chave { min-height: 38px !important; }
.sx-fin-gaveta { display: grid; gap: 14px; }

/* Razão: previsão pinta a linha pela variável (a coluna Ações é fixa e usa a mesma cor da linha). */
.sx-finance-ledger-table tbody tr[data-previsao="true"] { --sx-row-bg: var(--sx-surface-2); }
.sx-fin-razao__paginas-topo.sx-table-pagination--compact {
  padding: 2px 4px;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.sx-fin-cartoes { display: none; }

/* Paginação: a completa no computador e a compacta com o resumo no celular (mesmo recorte). */
.sx-fin-paginacao { margin-top: 12px; }
.sx-fin-paginacao:empty { display: none; }
.sx-fin-razao .sx-fin-paginacao { margin-top: 0; }
.sx-fin-razao .sx-fin-paginacao .sx-table-pagination { border: 0; border-top: 1px solid var(--sx-line); border-radius: 0; box-shadow: none; }
.sx-fin-paginacao__compacta { display: none; }

/* Cartão do celular (Lançamentos e Comprovantes) e o detalhe rótulo/valor do Accordion. */
.sx-fin-cartao {
  border: 1px solid var(--sx-card-border);
  border-radius: var(--sx-radius);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
  overflow: hidden;
}
.sx-fin-cartao[data-familia="previsao"] { background: var(--sx-surface-2); }
.sx-fin-cartao[data-selecionado="true"] { background: var(--sx-st-amber-bg); }
.sx-fin-cartao__topo { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 6px; }
.sx-fin-cartao__topo > .sx-fin-ponto { margin-top: 5px; align-self: flex-start; }
.sx-fin-cartao__texto { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.sx-fin-cartao__titulo { color: var(--sx-ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sx-fin-cartao__sub { color: var(--sx-ink-mut); font-size: 12px; overflow-wrap: anywhere; }
.sx-fin-cartao__valor { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 46%; text-align: right; }
.sx-fin-cartao__valor > strong { color: var(--sx-ink); font-size: 14px; white-space: nowrap; }
.sx-fin-cartao__resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 14px 10px; color: var(--sx-ink-mut); font-size: 12.5px; }
.sx-fin-cartao__valor-texto { color: var(--sx-ink); font-size: 14px; font-weight: 750; }
.sx-fin-cartao__nota { margin: 0 14px 10px; padding: 8px 10px; border-radius: var(--sx-radius-sm); background: var(--sx-st-info-bg); color: var(--sx-st-info); font-size: 12px; line-height: 1.45; }
.sx-fin-cartao__selos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.sx-fin-cartao__selos:empty { display: none; }
.sx-fin-cartao__acao { padding: 0 14px 12px; }
.sx-fin-cartao__acao .sx-btn { width: 100%; min-height: 44px; }
.sx-fin-cartao__detalhe { border-top: 1px solid var(--sx-line) !important; }
.sx-fin-cartao__detalhe > section { border-bottom: 0 !important; }
.sx-fin-cartao__detalhe h3 > button { min-height: 48px !important; padding: 8px 14px !important; }
.sx-fin-cartao__detalhe [role="region"] { padding: 0 14px 14px !important; }
.sx-fin-detalhe { display: grid; margin: 0; }
.sx-fin-detalhe > div { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--sx-line); }
.sx-fin-detalhe > div:first-child { border-top: 0; }
.sx-fin-detalhe dt { color: var(--sx-ink-weak); font-size: 12px; font-weight: 650; }
.sx-fin-detalhe dd { min-width: 0; margin: 0; color: var(--sx-ink); font-size: 13px; overflow-wrap: anywhere; }
/* No detalhe do cartão o texto quebra: as reticências da célula da tabela (estilo inline) não valem aqui. */
.sx-fin-detalhe dd [style*="nowrap"] { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.sx-fin-cartao__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sx-fin-cartao__acoes > .sx-btn { flex: 1 1 120px; min-height: 44px; }

/* Comprovantes: "Revisar" desabilitado leva o motivo junto; fluxo em faixa no computador. */
.sx-fin-revisar { display: inline-grid; justify-items: end; }
.sx-fin-revisar--cheio { display: grid; justify-items: stretch; text-align: center; }
.sx-fin-fluxo--celular { display: none; }
.sx-fin-fluxo__acordeao > section { border-bottom: 0 !important; }
.sx-fin-fluxo__acordeao h3 > button { padding: 6px 14px !important; }
.sx-fin-fluxo__acordeao [role="region"] { padding: 0 14px 14px !important; }
.sx-fin-fluxo__passos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sx-fin-fluxo__passos span { white-space: normal !important; }

/* Conciliação: filtros sobre a leitura e decisão de match com a evidência da sugestão. */
.sx-fin-filtros-conciliacao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.sx-fin-busca { position: relative; display: block; flex: 0 0 auto; width: 350px; max-width: 100%; }
.sx-fin-busca > svg { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--sx-ink-weak); pointer-events: none; }
.sx-fin-evidencia { overflow-wrap: anywhere; }

@media (max-width: 1420px) {
  /* Razão em cartões de duas colunas (regra acima): nada fica fixo e o filete é o do cartão, não o da tabela. */
  .sx-main .sx-finance-ledger-table.sx-table-fixa tbody > tr > td { border-bottom: 0; }
  .sx-main .sx-finance-ledger-table .sx-col-fixa-fim {
    position: static;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Comprovantes entre 681 e 1279 px: a tabela de 950 px não cabe com o menu aberto; a lista vira cartão em duas
   colunas, com Revisar à vista (em 1024 px a coluna da ação ficava fora da tela, QA local 25/09). */
@media (min-width: 681px) and (max-width: 1279px) {
  .sx-fin-comprovantes__tabela { display: none !important; }
  .sx-fin-cartoes--comprovantes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; padding: 10px; }
}

@media (max-width: 680px) {
  /* KPIs em duas colunas (imagem 36); com três cartões, o último ocupa a linha inteira. */
  .sx-shell .sx-kpi-grid.sx-fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .sx-shell .sx-kpi-grid.sx-fin-kpis--tres > :last-child { grid-column: 1 / -1; }
  .sx-fin-kpis .sx-kpi-card { padding: 12px 14px 11px !important; }
  .sx-fin-kpis .sx-kpi-card > div:first-of-type { margin-bottom: 6px !important; }
  .sx-fin-kpis .sx-kpi-card .eyebrow { -webkit-line-clamp: 3 !important; }
  .sx-fin-kpis .sx-kpi-card .tnum { font-size: 20px !important; }

  .sx-fin-filtros__linha { align-items: center; }
  .sx-fin-filtros__linha > label:first-child { flex: 1 1 100%; }
  .sx-fin-filtros__busca { width: 100% !important; }
  .sx-fin-filtros__campos { display: none; }
  .sx-fin-filtros__abrir { display: inline-flex; }
  .sx-fin-filtros__abrir .sx-btn { min-height: 44px; }
  .sx-fin-filtros__chaves { flex: 1 1 auto; }
  .sx-fin-chave--completa { display: none !important; }
  .sx-fin-legenda { gap: 6px 14px; padding: 10px 12px; }

  .sx-finance-ledger-wrap { display: none !important; }
  .sx-fin-razao__barra { flex-wrap: wrap; }
  .sx-fin-cartoes { display: grid; gap: 10px; padding: 10px; }
  .sx-fin-comprovantes__tabela { display: none !important; }
  .sx-fin-paginacao__completa { display: none !important; }
  .sx-fin-paginacao__compacta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--sx-ink-mut);
    font-size: 12.5px;
  }
  .sx-fin-razao .sx-fin-paginacao__compacta,
  .sx-fin-comprovantes .sx-fin-paginacao__compacta { padding: 10px 14px 12px; border-top: 1px solid var(--sx-line); }

  .sx-fin-fluxo--largo { display: none !important; }
  .sx-fin-fluxo--celular { display: block; }

  .sx-fin-filtros-conciliacao > * { flex: 1 1 100%; min-width: 0; }
  .sx-fin-filtros-conciliacao > div > button { width: 100% !important; }
  .sx-fin-busca { width: 100%; }
  .sx-fin-banco td[data-acoes] .sx-fin-decisao { width: 100%; min-width: 0 !important; }
  .sx-fin-banco td[data-acoes] .sx-fin-decisao__botoes > .sx-btn { flex: 1 1 100%; min-height: 44px; }
  .sx-fin-pacote-acoes > * { flex: 1 1 100%; }
  .sx-fin-pacote-acoes > .sx-btn { min-height: 44px; }
}

.sx-route-context {
  display: grid;
  flex: 0 1 210px;
  min-width: 140px;
  line-height: 1.08;
}

.sx-route-context span {
  color: var(--mpvpc-brand-ember-on-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sx-route-context strong {
  overflow: hidden;
  color: var(--sx-ink);
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-sidebar-primary-action {
  padding: 14px 14px 2px;
}

.sx-sidebar-primary-action .sx-btn {
  width: 100%;
  justify-content: center;
}

.sx-search-shortcut {
  position: absolute;
  right: 10px;
  top: 50%;
  min-width: 22px;
  transform: translateY(-50%);
  border: 1px solid var(--sx-line);
  border-radius: 5px;
  background: var(--sx-surface);
  color: var(--sx-ink-weak);
  font-family: var(--mpvpc-font-mono);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}

.sx-mobile-nav { display: none; }

.sx-rowhover:hover {
  background: var(--sx-surface-2);
}

/* ============================================================
   NOTAS FISCAIS E DOCUMENTOS (redesenho wave 10a, 25/09/2026)
   Duas telas com contratos próprios (.sx-nf-* e .sx-acervo-*): emissão fiscal e acervo não
   compartilham contador nem ação. Só tokens do DS; tema escuro no fim do bloco.
   Acima de 680 px as tabelas viram cartões em duas colunas (mesma técnica da razão do Financeiro): notas emitidas
   até 1359 px (9 colunas não cabem em 1280), fila e acervo até 1279 px.
   AIDEV-NOTE: cartões acima de 680 px são deste bloco; abaixo, do painel-extra.css (carrega depois, !important).
   ============================================================ */
.sx-nf,
.sx-acervo { min-width: 0; }

/* Cabeçalho: Processo de emissão, Exportar XMLs e Emitir nota. */
.sx-nf-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.sx-nf-processo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: var(--sx-radius);
  background: var(--sx-st-amber-bg);
  color: var(--sx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-nf-processo:hover { border-color: var(--mpvpc-brand-ember); }

.sx-nf-processo__icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
  color: var(--mpvpc-brand-ember-on-light);
  flex: 0 0 auto;
}

.sx-nf-processo__texto {
  display: grid;
  gap: 1px;
  line-height: 1.25;
}

.sx-nf-processo__texto strong { font-size: 13px; font-weight: 700; }
.sx-nf-processo__texto span { color: var(--sx-ink-mut); font-size: 11.5px; }
.sx-nf-processo > svg { color: var(--sx-ink-weak); }

/* KPIs: 4 colunas enquanto couber, 2 até 1180 px, 1 no celular (regra global de 680 px). */
.sx-kpi-grid.sx-nf-kpis,
.sx-kpi-grid.sx-acervo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sx-acervo-kpi-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mpvpc-brand-ember-on-light);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.sx-acervo-kpi-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Barra: abas, busca, filtros e contagem. */
.sx-nf-barra,
.sx-acervo-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.sx-nf-barra { align-items: center; }

.sx-nf-abas {
  display: inline-flex;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--sx-line);
}

.sx-nf-abas__aba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--sx-ink-mut);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.sx-nf-abas__aba:hover { color: var(--sx-ink); }

.sx-nf-abas__aba.is-active {
  border-bottom-color: var(--mpvpc-brand-ember);
  color: var(--sx-ink);
  font-weight: 750;
}

.sx-nf-abas__sep { color: var(--sx-ink-weak); }
.sx-nf-abas__total { color: var(--sx-ink-weak); }
.sx-nf-abas__aba.is-active .sx-nf-abas__total { color: var(--sx-ink-mut); }

.sx-nf-busca,
.sx-acervo-busca {
  position: relative;
  flex: 1 1 240px;
  max-width: 380px;
  min-width: 0;
}

.sx-nf-busca > svg,
.sx-acervo-busca > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sx-ink-weak);
  pointer-events: none;
}

.sx-nf-filtro { flex: 0 1 210px; min-width: 170px; }

.sx-nf-contagem,
.sx-acervo-contagem {
  margin-left: auto;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  white-space: nowrap;
}

.sx-acervo-filtro {
  display: grid;
  gap: 5px;
  flex: 0 1 210px;
  min-width: 200px;   /* o Combobox do kit não encolhe abaixo de 200 px */
}

.sx-acervo-filtro__rotulo {
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  font-weight: 700;
}

.sx-acervo-barra__fim {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-bottom: 8px;
}

/* Tabelas (lista). O cabeçalho repete o padrão das outras telas; a linha quebra texto. */
.sx-nf-tabela { min-width: 960px; }
.sx-nf-tabela--fila { min-width: 880px; }
.sx-acervo-tabela { min-width: 860px; }
/* Sobra da linha para quem tem texto: sem isso o Tomador levava o dobro do Serviço e o Serviço cortava em 1440 px. */
.sx-nf-tabela--emitidas .sx-nf-col-tomador { width: 21%; }
.sx-nf-tabela--emitidas .sx-nf-col-servico { width: 23%; }

.sx-nf-tabela th {
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--sx-line);
  background: var(--sx-surface-2);
  color: var(--sx-ink-weak);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.sx-nf-tabela td {
  padding: 12px;
  vertical-align: top;
  font-size: 13px;
  color: var(--sx-ink);
}

.sx-nf-tabela tbody tr + tr > td { border-top: 1px solid var(--sx-line); }
.sx-nf-tabela .sx-nf-tabela__num { text-align: right; }

.sx-nf-tabela__vazio {
  padding: 44px 20px !important;
  color: var(--sx-ink-weak);
  font-size: 13px;
  text-align: center !important;
}

.sx-nf-numero { font-size: 14.5px; font-weight: 800; color: var(--sx-ink); }
.sx-nf-tomador { font-size: 13.5px; font-weight: 650; color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-nf-valor { font-size: 14px; font-weight: 700; color: var(--sx-ink); white-space: nowrap; }
.sx-nf-mut { color: var(--sx-ink-mut); }
.sx-nf-fraco { color: var(--sx-ink-weak); font-size: 12px; }
.sx-nf-texto { color: var(--sx-ink); }

.sx-nf-mono {
  margin-top: 2px;
  color: var(--sx-ink-weak);
  font-family: var(--mpvpc-font-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.sx-nf-mono--linha { white-space: nowrap; }
.sx-nf-celula { display: grid; justify-items: start; min-width: 0; }

.sx-nf-servico { max-width: 260px; }

.sx-nf-servico__texto {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.sx-nf-servico__vinculo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 3px;
}

.sx-nf-codigo,
.sx-nf-link,
.sx-nf-acao-inline {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.sx-nf-codigo {
  color: var(--mpvpc-brand-ember-on-light);
  font-family: var(--mpvpc-font-mono);
  font-size: 11px;
  font-weight: 600;
}

.sx-nf-acao-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--sx-ink-mut);
  font-size: 11px;
}

.sx-nf-link {
  color: var(--mpvpc-brand-ember-on-light);
  font-size: 12px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sx-nf-arquivos,
.sx-nf-acoes-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sx-nf-arquivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--sx-radius-sm);
  background: transparent;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sx-nf-arquivo:hover { border-color: var(--sx-line-strong); color: var(--sx-ink); }

.sx-nf-a-caminho {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sx-ink-weak);
  font-size: 11.5px;
}

/* A emitir: aviso honesto, estado real da linha e emissões em andamento. */
.sx-nf-fila__aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sx-line);
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-nf-fila__aviso strong {
  color: var(--mpvpc-brand-ember-on-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sx-nf-situacao {
  display: grid;
  justify-items: start;
  gap: 5px;
  max-width: 300px;
  color: var(--sx-ink-mut);
  font-size: 12px;
  line-height: 1.45;
}

.sx-nf-pista { color: var(--sx-ink); }

.sx-nf-andamento { margin-top: 16px; }

.sx-nf-andamento__lista {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-nf-andamento__item {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--sx-line);
}

.sx-nf-andamento__item > :first-child { justify-self: start; }

.sx-nf-andamento__texto {
  display: grid;
  flex: 1 1 260px;
  gap: 2px;
  min-width: 0;
}

.sx-nf-andamento__texto strong { color: var(--sx-ink); font-size: 13.5px; overflow-wrap: anywhere; }
.sx-nf-andamento__texto span { color: var(--sx-ink-mut); font-size: 12px; }

.sx-nf-dispensada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--sx-line);
}

/* Modais: conferência antes do envio e passos do processo. */
.sx-nf-conferencia {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.sx-nf-conferencia:empty { display: none; }

.sx-nf-conferencia__nota {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-nf-passos {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-nf-passos__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.sx-nf-passos__numero {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: 999px;
  background: var(--sx-st-amber-bg);
  color: var(--mpvpc-brand-ember-on-light);
  font-size: 12.5px;
  font-weight: 800;
}

.sx-nf-passos__texto strong { color: var(--sx-ink); font-size: 13.5px; }

.sx-nf-passos__texto p {
  margin: 3px 0 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.55;
}

.sx-nf-rodape,
.sx-acervo-rodape {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.5;
}

.sx-nf-rodape > svg,
.sx-acervo-rodape > svg { flex: 0 0 auto; margin-top: 2px; }

/* Documentos: linha, ações e ficha do detalhe. */
.sx-acervo-icone {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sx-line);
  border-radius: 7px;
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
  flex: 0 0 auto;
}

.sx-acervo-nome {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sx-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.sx-acervo-acoes {
  display: inline-flex;
  gap: 2px;
}

.sx-acervo-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px 18px;
  margin: 18px 0 0;
}

.sx-acervo-ficha__campo { min-width: 0; }

.sx-acervo-ficha dt {
  margin-bottom: 4px;
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sx-acervo-ficha dd {
  margin: 0;
  color: var(--sx-ink);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.sx-acervo-erro {
  padding: 9px 10px;
  border: 1px solid var(--sx-st-danger-bd);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-st-danger-bg);
  color: var(--sx-st-danger);
  font-size: 12.5px;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .sx-kpi-grid.sx-nf-kpis,
  .sx-kpi-grid.sx-acervo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 681px) and (max-width: 1279px) {
  .sx-nf-rolagem,
  .sx-acervo-rolagem { overflow-x: visible !important; background: var(--sx-surface-2); }
  .sx-nf-tabela,
  .sx-acervo-tabela { min-width: 0 !important; display: block !important; }
  .sx-nf-tabela thead,
  .sx-acervo-tabela thead { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sx-nf-tabela tbody,
  .sx-acervo-tabela tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
  .sx-nf-tabela tr,
  .sx-acervo-tabela tr { display: grid !important; align-content: start; border: 1px solid var(--sx-line) !important; border-radius: var(--sx-radius); overflow: hidden; background: var(--sx-surface); }
  .sx-nf-tabela td,
  .sx-acervo-tabela td { display: grid !important; grid-template-columns: minmax(104px, .34fr) minmax(0, 1fr); align-items: start; justify-items: start; gap: 3px 10px; max-width: none !important; min-width: 0 !important; padding: 8px 12px !important; border-top: 1px solid var(--sx-line) !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; }
  .sx-nf-tabela td:first-child,
  .sx-acervo-tabela td:first-child { border-top: 0 !important; }
  /* Rótulo na coluna 1, conteúdo empilhado na 2: sem isso o segundo filho (DPS, CNPJ) caía sob o rótulo. */
  .sx-nf-tabela td::before,
  .sx-acervo-tabela td::before { content: attr(data-label); grid-column: 1; grid-row: 1; color: var(--sx-ink-weak); font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
  .sx-nf-tabela td > *,
  .sx-acervo-tabela td > * { grid-column: 2; min-width: 0; max-width: 100%; }
  .sx-nf-tabela td[data-acoes],
  .sx-nf-tabela td:not([data-label]),
  .sx-acervo-tabela td[data-acoes] { grid-template-columns: minmax(0, 1fr); }
  .sx-nf-tabela td[data-acoes] > *,
  .sx-nf-tabela td:not([data-label]) > *,
  .sx-acervo-tabela td[data-acoes] > * { grid-column: 1; }
  .sx-nf-tabela td[data-acoes]::before,
  .sx-nf-tabela td:not([data-label])::before,
  .sx-acervo-tabela td[data-acoes]::before { content: none; }
  .sx-nf-tabela tbody:has(> tr:only-child > .sx-nf-tabela__vazio) { grid-template-columns: minmax(0, 1fr); }
  .sx-nf-servico { max-width: none; }
  .sx-acervo-tabela td[data-acoes] { justify-items: end; }
}

/* Notas emitidas de 1280 a 1359 px: as mesmas regras dos cartões, só para a tabela de 9 colunas. */
@media (min-width: 1280px) and (max-width: 1359px) {
  .sx-nf-rolagem--emitidas { overflow-x: visible !important; background: var(--sx-surface-2); }
  .sx-nf-tabela--emitidas { min-width: 0 !important; display: block !important; }
  .sx-nf-tabela--emitidas thead { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sx-nf-tabela--emitidas tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
  .sx-nf-tabela--emitidas tr { display: grid !important; align-content: start; border: 1px solid var(--sx-line) !important; border-radius: var(--sx-radius); overflow: hidden; background: var(--sx-surface); }
  .sx-nf-tabela--emitidas td { display: grid !important; grid-template-columns: minmax(104px, .34fr) minmax(0, 1fr); align-items: start; justify-items: start; gap: 3px 10px; max-width: none !important; min-width: 0 !important; padding: 8px 12px !important; border-top: 1px solid var(--sx-line) !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; }
  .sx-nf-tabela--emitidas td:first-child { border-top: 0 !important; }
  .sx-nf-tabela--emitidas td::before { content: attr(data-label); grid-column: 1; grid-row: 1; color: var(--sx-ink-weak); font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
  .sx-nf-tabela--emitidas td > * { grid-column: 2; min-width: 0; max-width: 100%; }
  .sx-nf-tabela--emitidas td[data-acoes],
  .sx-nf-tabela--emitidas td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .sx-nf-tabela--emitidas td[data-acoes] > *,
  .sx-nf-tabela--emitidas td:not([data-label]) > * { grid-column: 1; }
  .sx-nf-tabela--emitidas td[data-acoes]::before,
  .sx-nf-tabela--emitidas td:not([data-label])::before { content: none; }
  .sx-nf-tabela--emitidas tbody:has(> tr:only-child > .sx-nf-tabela__vazio) { grid-template-columns: minmax(0, 1fr); }
  .sx-nf-tabela--emitidas .sx-nf-servico { max-width: none; }
}

@media (max-width: 680px) {
  .sx-nf-topo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .sx-nf-topo > .sx-nf-processo { grid-column: 1 / -1; }
  .sx-nf-topo > .sx-btn { width: 100%; }
  .sx-nf-abas { display: flex; width: 100%; }
  .sx-nf-abas__aba { flex: 1 1 0; justify-content: center; }
  .sx-nf-busca,
  .sx-acervo-busca { flex: 1 1 100%; max-width: none; }
  .sx-nf-filtro { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .sx-acervo-filtro { flex: 1 1 100%; }
  .sx-acervo-barra__fim { width: 100%; justify-content: space-between; padding-bottom: 0; }
  .sx-nf-servico,
  .sx-nf-situacao { max-width: none; }
  .sx-nf-situacao { justify-items: end; text-align: right; }
  .sx-nf-celula { justify-items: end; text-align: right; }
  .sx-nf-servico__vinculo { justify-content: flex-end; }
  .sx-nf-andamento__item { grid-template-columns: minmax(0, 1fr); }
  /* Modal acima da barra inferior (z-index 70): com o 60 do kit, os botões do fim do modal ficavam sob a barra.
     Mesmo remendo da wave 2 (.sx-caixa-tela). AIDEV-TODO: levar para o Modal do kit e apagar as duas regras. */
  .sx-nf .sx-modal-overlay,
  .sx-acervo .sx-modal-overlay { z-index: 75 !important; }
}

/* O tema escuro não redefine --sx-st-neutral (#555248 sobre #232120 dá 2,1:1) nem --sx-st-danger (#6B2424 sobre #2A1717
   dá 1,5:1: "Cancelada", "Emissão falhou" e o botão Cancelar sumiam). Aqui o neutro vira o texto do tema e o perigo,
   #D98A7E (6,4:1 sobre o fundo de perigo; 6,9:1 sobre a superfície). Pendência do DS desde a wave 2, repetida na 3a.
   AIDEV-TODO: levar neutro e perigo do tema escuro para body.theme-dark no DS e apagar este remendo. */
body.theme-dark .sx-nf,
body.theme-dark .sx-acervo {
  --sx-st-neutral: var(--sx-ink-mut);
  --sx-st-neutral-bd: var(--sx-line-strong);
  --sx-st-danger: #D98A7E;
  --sx-st-danger-bd: #6B302A;
}

/* ============================================================
   APROVAÇÕES E ACTION OUTBOX — redesenho wave 9a (25/09/2026). Duas áreas próprias: decidir (.sx-aprov-*,
   #/aprovacoes) e acompanhar a execução (.sx-outbox-*, #/outbox). Só arranjo: componentes, cores e tipografia
   continuam do kit e dos tokens. Fica entre .sx-rowhover e a paginação canônica, trecho que as outras waves não
   tocam; o tema escuro vai no fim do mesmo bloco. painel-extra.css (58 e 83) segue intocado: aqui vence por
   especificidade.
   ============================================================ */
.sx-aprov,
.sx-outbox { min-width: 0; }

.sx-aprov h1,
.sx-aprov h2,
.sx-aprov h3,
.sx-outbox h1 { overflow-wrap: anywhere; }

.sx-aprov-hora,
.sx-outbox-hora { color: var(--sx-ink-weak); }

.sx-aprov-filtro { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.sx-aprov-aviso,
.sx-outbox-aviso { margin-bottom: 14px; }

/* Quatro números na linha (imagem 33), não uma grade de cartões (AIDEV-NOTE da Spec 031 na tela). */
.sx-aprov-numeros {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  margin-bottom: 14px;
}

.sx-page-header .sx-aprov-numeros { margin: 0; }
.sx-aprov-numero { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.sx-aprov-numero strong { color: var(--sx-ink); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.sx-aprov-numero span { color: var(--sx-ink-mut); font-size: 12.5px; }

.sx-aprov-janela {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 12px;
  color: var(--sx-ink-weak);
  font-size: 12px;
}

.sx-aprov-janela__alerta { color: var(--sx-st-danger); font-weight: 600; }

.sx-aprov-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

/* Lista da fila: botões com aria-pressed; o título do item não é heading (o do detalhe é). */
.sx-aprov-lista,
.sx-aprov-detalhe { min-width: 0; }

.sx-aprov-lista__corpo { display: grid; gap: 12px; }

.sx-aprov-item {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--sx-line);
  background: var(--sx-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-aprov-item:last-child { border-bottom: 0; }
.sx-aprov-item:hover { background: var(--sx-surface-2); }

.sx-aprov-item[aria-pressed="true"] {
  background: var(--sx-st-amber-bg);
  box-shadow: inset 3px 0 0 var(--mpvpc-brand-ember);
}

.sx-aprov-item:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: -2px;
}

.sx-aprov-item__icone {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sx-line);
  border-radius: 999px;
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
}

.sx-aprov-item__corpo { display: grid; gap: 6px; min-width: 0; }
.sx-aprov-item__linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sx-aprov-item__titulo { color: var(--sx-ink); font-size: 13.5px; overflow-wrap: anywhere; }
.sx-aprov-item__resumo { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-aprov-item__selos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sx-aprov-item__quando { color: var(--sx-ink-weak); font-size: 11.5px; }

/* Fila do dono (pedido "aprovacoes-tela", 30/09/2026): seções por tipo (ou "Vence em até 7 dias" e os motivos dos
   antigos), uma linha por oportunidade. Só tokens do kit; o âmbar de texto vira o do escuro pela regra do fim do bloco.
   A seção é cartão (sem desfoque: vidro só em camada flutuante). */
.sx-aprov-numero--vence strong,
.sx-aprov-numero--vence span { color: var(--mpvpc-brand-ember-on-light); }

.sx-aprov-fila { display: grid; gap: 14px; min-width: 0; }
.sx-aprov-fila__aviso { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.5; }
.sx-aprov-fila + .sx-aprov-janela { margin: 14px 0 0; }

.sx-aprov-secao {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sx-card-border, var(--sx-line));
  border-radius: var(--sx-radius);
  background: var(--sx-card-bg, var(--sx-surface));
  box-shadow: var(--sx-card-shadow, none);
}

.sx-aprov-secao.sx-disclosure { padding: 0; }
.sx-aprov-secao.sx-disclosure > :not(summary) { padding-bottom: 0; }
.sx-aprov-secao--vence { box-shadow: inset 3px 0 0 var(--mpvpc-brand-ember), var(--sx-card-shadow, none); }

.sx-aprov-secao__cabeca {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-aprov-secao.sx-disclosure > .sx-aprov-secao__cabeca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  column-gap: 0;
  min-height: 48px;
  padding: 10px 14px;
}

.sx-aprov-secao.sx-disclosure > .sx-aprov-secao__cabeca > .sx-aprov-secao__efeito { grid-column: 2; }
.sx-aprov-secao.sx-disclosure:not([open]) > .sx-aprov-secao__cabeca { border-bottom: 0; }
.sx-aprov-secao.sx-disclosure > .sx-aprov-secao__cabeca:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: -2px; }

.sx-aprov-secao__titulo { color: var(--sx-ink); font-size: 14px; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sx-aprov-secao--vence .sx-aprov-secao__titulo { color: var(--mpvpc-brand-ember-on-light); }
.sx-aprov-secao__total { color: var(--sx-ink-weak); font-weight: 600; }
.sx-aprov-secao__efeito { color: var(--sx-ink-mut); font-size: 12px; font-weight: 500; line-height: 1.45; }
.sx-aprov-secao__efeito strong { color: var(--sx-ink); font-weight: 700; }

.sx-aprov-secao__linhas { margin: 0; padding: 0; list-style: none; }

.sx-aprov-linha { border-top: 1px solid var(--sx-line); }
.sx-aprov-linha:first-child { border-top: 0; }
.sx-aprov-linha[data-selecionada="sim"] { background: var(--sx-st-amber-bg); box-shadow: inset 3px 0 0 var(--mpvpc-brand-ember); }

.sx-aprov-linha__topo { display: flex; align-items: flex-start; gap: 6px; padding-right: 8px; }

.sx-aprov-linha__abrir {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 6px 12px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-aprov-linha__abrir:hover { background: var(--sx-surface-2); }
.sx-aprov-linha[data-selecionada="sim"] .sx-aprov-linha__abrir:hover { background: transparent; }
.sx-aprov-linha__abrir:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: -2px; }

.sx-aprov-linha__nome { color: var(--sx-ink); font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.sx-aprov-linha__valor { color: var(--sx-ink); font-size: 13px; font-weight: 700; white-space: nowrap; text-align: right; }
/* Proposta com opções ("R$ X ou R$ Y (2 opções)", Onda 0 das subpropostas): o valor desce para baixo do nome. */
.sx-aprov-linha__valor--opcoes { grid-column: 1 / -1; white-space: normal; text-align: left; }

.sx-aprov-linha__meta,
.sx-aprov-linha__motivo,
.sx-aprov-linha__versoes,
.sx-aprov-linha__efeito { grid-column: 1 / -1; }

.sx-aprov-linha__meta { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.5; }

.sx-aprov-linha__prazo--vence { color: var(--mpvpc-brand-ember-on-light); font-weight: 700; }

.sx-aprov-linha__motivo {
  justify-self: start;
  padding: 1px 7px;
  border: 1px solid var(--sx-line-strong);
  border-radius: 6px;
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
  font-size: 11.5px;
  font-weight: 600;
}

.sx-aprov-linha__versoes { color: var(--sx-ink-mut); font-size: 12px; overflow-wrap: anywhere; }
.sx-aprov-linha__efeito { color: var(--sx-ink-weak); font-size: 11.5px; line-height: 1.45; }

.sx-aprov-linha__dossie { flex: 0 0 auto; margin-top: 9px; }

.sx-aprov-linha__grupo { display: grid; gap: 6px; padding: 0 14px 12px; }
.sx-aprov-linha__grupo > .sx-btn { justify-self: start; }
.sx-aprov-linha__itens { margin: 0; padding: 0; list-style: none; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); overflow: hidden; }
.sx-aprov-linha__itens > li + li { border-top: 1px solid var(--sx-line); }

.sx-aprov-linha__item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 9px 12px;
  border: 0;
  background: var(--sx-surface);
  color: var(--sx-ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.sx-aprov-linha__item > span:last-child { color: var(--sx-ink-mut); }
.sx-aprov-linha__item:hover { background: var(--sx-surface-2); }
.sx-aprov-linha__item[aria-pressed="true"] { background: var(--sx-st-amber-bg); box-shadow: inset 3px 0 0 var(--mpvpc-brand-ember); }
.sx-aprov-linha__item:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: -2px; }

/* Celular: o valor desce para baixo do nome (ao lado dele o nome quebrava no meio da palavra, a 390 px). */
@media (max-width: 520px) {
  .sx-aprov-linha__abrir { grid-template-columns: minmax(0, 1fr); }
  .sx-aprov-linha__valor { text-align: left; }
}

/* Lista mais larga no monitor: a linha agora leva nome, valor, prazo e o botão Dossiê. O painel-extra fixa 380 px. */
@media (min-width: 1180px) {
  .sx-aprov .sx-approvals-layout { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); }
}

@media (min-width: 1800px) {
  .sx-aprov .sx-approvals-layout { grid-template-columns: minmax(420px, 500px) minmax(0, 1fr); }
}

/* Detalhe */
.sx-aprov-detalhe { display: grid; gap: 14px; }
.sx-aprov-detalhe:focus { outline: none; }
.sx-aprov-voltar { display: none !important; justify-self: start; }

.sx-aprov-detalhe__titulo {
  margin: 6px 0 0;
  color: var(--sx-ink);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sx-aprov-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

.sx-aprov-campos > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
}

.sx-aprov-campos dt {
  color: var(--sx-ink-weak);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sx-aprov-campos dd {
  margin: 4px 0 0;
  color: var(--sx-ink);
  font-size: 13.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Kit pré-evento (01/10/2026): o que sai para o cliente, com os campos que o dono ajusta antes de aprovar. */
.sx-aprov-kit { display: grid; gap: 14px; }
.sx-aprov-kit__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sx-aprov-kit__topo .eyebrow { color: var(--sx-ink-weak); }
.sx-aprov-kit__titulo { margin: 4px 0 0; color: var(--sx-ink); font-size: 16px; line-height: 1.3; }
.sx-aprov-kit .sx-aprov-aviso { margin: 0; }
.sx-aprov-kit__canal { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--sx-line); min-width: 0; }
.sx-aprov-kit__canal-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--sx-ink); font-size: 13.5px; }
.sx-aprov-kit__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.sx-aprov-kit__campo { display: grid; align-content: start; gap: 5px; min-width: 0; }
.sx-aprov-kit__campo:has(textarea) { grid-column: 1 / -1; }
.sx-aprov-kit__rotulo { color: var(--sx-ink-weak); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sx-aprov-kit__dica { color: var(--sx-ink-weak); font-size: 11.5px; line-height: 1.4; }
.sx-aprov-kit__campo input, .sx-aprov-kit__campo textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.sx-aprov-kit__texto {
  padding: 10px 12px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow: auto;
}
.sx-aprov-kit__nota { margin: 0; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .sx-aprov-kit__grade { grid-template-columns: minmax(0, 1fr); }
}

.sx-aprov-entrada {
  display: inline-flex;
  width: fit-content;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  background: var(--sx-surface-2);
}

/* Cartão de decisão: o que se pede, conferência (NFS-e), ressalva, comentário, botões e o que aprovar faz. */
.sx-aprov-decisao__pede { margin-bottom: 12px; }
.sx-aprov-decisao__pede .eyebrow { color: var(--sx-ink-weak); }
.sx-aprov-decisao__pede p { margin: 4px 0 0; color: var(--sx-ink); font-size: 13px; line-height: 1.5; }

.sx-aprov-conferencia {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-st-amber-bg);
}

.sx-aprov-ressalva {
  margin-bottom: 13px;
  padding: 13px 15px;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: 8px;
  background: var(--sx-st-amber-bg);
}

.sx-aprov-ressalva__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--sx-ink);
  font-size: 13px;
  font-weight: 700;
}

.sx-aprov-ressalva__sub { color: var(--sx-ink-mut); font-size: 11.5px; font-weight: 500; }

.sx-aprov-ressalva__valor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-aprov-ressalva__valor > input { flex: 1 1 160px; min-width: 0; }
.sx-aprov-ressalva__desconto { color: var(--sx-st-success); font-size: 12px; font-weight: 700; }
.sx-aprov-ressalva__erro { margin: 6px 0 0; color: var(--sx-st-danger); font-size: 12px; font-weight: 600; }
.sx-aprov-ressalva__nota { margin: 6px 0 0; color: var(--sx-ink-weak); font-size: 11.5px; }

.sx-aprov-comentario { display: block; color: var(--sx-ink); font-size: 13px; font-weight: 800; }

.sx-aprov-decisao__botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sx-aprov-decisao .sx-aprov-aviso { margin: 12px 0 0; }
/* Aviso antes do comentário (kit sem aceite, revisão de 30/09): sem isto o rótulo colava no aviso. */
.sx-aprov-decisao .sx-aprov-aviso + .sx-aprov-comentario { margin-top: 12px; }
.sx-aprov-decisao__aviso { margin: 10px 0 0; color: var(--sx-st-danger); font-size: 12.5px; font-weight: 600; }
.sx-aprov-decisao__rodape { margin: 10px 0 0; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.5; }
.sx-aprov-decisao__papel { margin: 6px 0 0; color: var(--sx-ink-weak); font-size: 11.5px; }

.sx-aprov-decidida p { margin: 4px 0 12px; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.5; }

.sx-aprov-acoes-ligadas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }

.sx-aprov-acao-ligada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--sx-line);
  border-radius: 999px;
  background: var(--sx-surface-2);
  color: var(--sx-ink);
  font-size: 12px;
  font-weight: 600;
}

.sx-aprov-recibo { margin: 10px 0 0; color: var(--sx-ink); font-size: 12.5px; font-weight: 600; }
.sx-aprov-recibo--erro { color: var(--sx-st-danger); }

.sx-aprov-garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 14px;
  border-radius: 7px;
  background: var(--sx-surface-2);
  font-size: 12px;
}

.sx-aprov-garantias span { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-ink-mut); }

/* Celular e tablet: lista → detalhe, como na Central (wave 3a). O painel-extra já põe a grade numa coluna; a tela
   marca data-sx-aprov-detalhe="aberto" quando um item é aberto, e "Voltar para a fila" desfaz. */
@media (max-width: 920px) {
  .sx-approvals-layout[data-sx-aprov-detalhe="aberto"] > .sx-aprov-lista { display: none; }
  .sx-approvals-layout[data-sx-aprov-detalhe="fechado"] > .sx-aprov-detalhe { display: none; }
  .sx-aprov-voltar { display: inline-flex !important; }
}

/* Action Outbox: cartões por grupo que também filtram, filtros do kit e a linha que abre o detalhe. */
.sx-outbox-kpis { margin-bottom: 14px; }
/* Seis cartões numa linha no monitor (imagem 45). O painel-extra põe auto-fit de 190 px, que deixava 5 + 1. */
.sx-shell .sx-kpi-grid.sx-outbox-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.sx-outbox-kpi {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sx-radius);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-outbox-kpi > .sx-kpi-card { height: 100%; transition: border-color 120ms, box-shadow 120ms; }
.sx-outbox-kpi:hover > .sx-kpi-card { border-color: var(--sx-line-strong); }

.sx-outbox-kpi[aria-pressed="true"] > .sx-kpi-card {
  border-color: var(--mpvpc-brand-ember);
  box-shadow: 0 0 0 1px var(--mpvpc-brand-ember), var(--sx-card-shadow);
}

.sx-outbox-kpi:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: 2px;
}

.sx-outbox-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.sx-outbox-busca { flex: 1 1 240px; min-width: 0; }

.sx-outbox-janela { margin: 0 0 14px; color: var(--sx-ink-weak); font-size: 12px; line-height: 1.5; }
.sx-outbox-janela strong { color: var(--sx-ink-mut); font-weight: 650; }

.sx-outbox-expandir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-outbox-expandir:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.sx-outbox-expandir:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Até duas linhas, quebrando em qualquer ponto: o erro do provedor (endereço, código) não alarga a coluna. */
.sx-outbox-erro-curto {
  display: -webkit-box;
  max-width: 320px;
  margin-top: 3px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--sx-st-danger);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sx-outbox-meta { display: none; margin-top: 4px; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; }

.sx-outbox-tabela td.sx-outbox-alvo { min-width: 112px; overflow-wrap: anywhere; }

.sx-outbox-acoes { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sx-outbox-acoes__botoes { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
/* O botão quebra inteiro para a linha de baixo; o rótulo não quebra dentro dele. */
.sx-outbox-acoes__botoes > .sx-btn { white-space: nowrap; }

.sx-outbox-decisao {
  max-width: 240px;
  color: var(--sx-st-amber);
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
  white-space: normal;
}

.sx-outbox-linha--aberta > td { background: var(--sx-surface-2); }
.sx-outbox-detalhe-linha > td { padding: 0 !important; background: var(--sx-surface-2); }

.sx-outbox-detalhe {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px 28px;
  padding: 6px 16px 18px 38px;
}

.sx-outbox-detalhe__titulo {
  margin: 0 0 8px;
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sx-outbox-detalhe__campos { display: grid; gap: 6px; margin: 0; }
.sx-outbox-detalhe__campos > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.sx-outbox-detalhe__campos dt { color: var(--sx-ink-weak); font-size: 12px; }
.sx-outbox-detalhe__campos dd { margin: 0; color: var(--sx-ink); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }

.sx-outbox-detalhe__bruto {
  display: block;
  margin-top: 2px;
  color: var(--sx-ink-weak);
  font-family: var(--mpvpc-font-mono);
  font-size: 11.5px;
}

.sx-outbox-detalhe__regra {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
  color: var(--sx-ink);
  font-size: 12.5px;
  line-height: 1.5;
}

.sx-outbox-detalhe__decisao { margin: 8px 0 0; color: var(--sx-st-amber); font-size: 12.5px; font-weight: 650; line-height: 1.45; }
.sx-outbox-detalhe__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.sx-outbox-confirmar { display: grid; gap: 12px; }

.sx-outbox-confirmar__decisao {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-st-amber-bg);
  color: var(--sx-ink);
  font-size: 12.5px;
}

.sx-outbox-confirmar__decisao p { margin: 0; line-height: 1.5; }

.sx-outbox-confirmar__erro,
.sx-outbox-confirmar__papel { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }

.sx-outbox-confirmar__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.sx-outbox-papel { margin: 12px 0 0; color: var(--sx-ink-weak); font-size: 12px; }

/* Seis cartões: 6 lado a lado no monitor, 3 + 3 de 681 a 1360 px (o painel-extra forçava 2 abaixo de 1080 px). */
@media (min-width: 681px) and (max-width: 1360px) {
  .sx-shell .sx-kpi-grid.sx-outbox-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Tabela compacta de 681 a 1360 px: Canal, Tentativas e Próxima viram a linha de apoio do cartão da ação
   (.sx-outbox-meta), para Status e as ações caberem sem rolar dentro do cartão. Abaixo de 681 px, os cartões do DS. */
@media (min-width: 681px) and (max-width: 1360px) {
  .sx-outbox-tabela { min-width: 0 !important; }
  .sx-outbox-tabela thead th:nth-child(2),
  .sx-outbox-tabela thead th:nth-child(4),
  .sx-outbox-tabela thead th:nth-child(5),
  .sx-outbox-tabela td[data-label="Canal"],
  .sx-outbox-tabela td[data-label="Tentativas"],
  .sx-outbox-tabela td[data-label="Próxima"] { display: none; }
  .sx-outbox-meta { display: block; }
}

@media (max-width: 920px) {
  .sx-outbox-detalhe { grid-template-columns: minmax(0, 1fr); padding: 6px 14px 16px; }
}

/* Celular (imagem 46): cartões em duas colunas e a linha aberta colada ao seu detalhe, num cartão só. */
@media (max-width: 680px) {
  .sx-shell .sx-kpi-grid.sx-outbox-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sx-outbox-tabela tr.sx-outbox-linha--aberta {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .sx-outbox-tabela tr.sx-outbox-detalhe-linha {
    padding: 0 !important;
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .sx-outbox-tabela tr.sx-outbox-detalhe-linha > td { display: block !important; padding: 0 !important; text-align: left !important; }
  .sx-outbox-acoes { width: 100%; align-items: stretch; }
  .sx-outbox-acoes > div { display: flex !important; width: 100%; }
  .sx-outbox-decisao { max-width: none; text-align: left; }
  .sx-outbox-detalhe__campos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sx-outbox-erro-curto { max-width: none; white-space: normal; }
}

/* Tema escuro: as duas áreas clareiam o neutro só dentro delas, como a Central, Hoje e Marketing pago. O perigo usa o
   rosa escuro do DS desde 29/09 (apontar para a borda escura apagaria "Falhou"). O âmbar "sobre Osso"
   (--mpvpc-brand-ember-on-light) dava 3,5:1 no sobretítulo do cabeçalho e nas marcas da linha: aqui ele vira o âmbar
   de texto do escuro (≥ 4,5:1). */
body.theme-dark .sx-aprov,
body.theme-dark .sx-outbox {
  --sx-st-neutral: var(--sx-ink-mut);
  --sx-st-neutral-bd: var(--sx-line-strong);
  --mpvpc-brand-ember-on-light: var(--sx-st-amber);
}

/* Paginação canônica das tabelas — referência completa + compacta do DS. */
.sx-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 62px;
  padding: 14px 16px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-card);
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-table-pagination__summary {
  color: var(--sx-ink-mut);
  font-variant-numeric: tabular-nums;
}

.sx-table-pagination__summary strong {
  color: var(--sx-ink);
  font-weight: 700;
}

.sx-table-pagination__controls,
.sx-table-pagination__page-size,
.sx-table-pagination__pages,
.sx-table-pagination__compact-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sx-table-pagination__page-size > span {
  color: var(--sx-ink-weak);
  white-space: nowrap;
}

.sx-table-pagination__page-count {
  min-width: 104px;
  color: var(--sx-ink);
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-table-pagination__pages {
  gap: 4px;
}

.sx-table-pagination__button {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
  color: var(--sx-ink-mut);
  font: 700 13px/1 var(--mpvpc-font-heading);
  cursor: pointer;
}

.sx-table-pagination__button:hover:not(:disabled):not(.sx-table-pagination__page--active) {
  border-color: var(--sx-ink-mut);
  color: var(--sx-ink);
}

.sx-table-pagination__button:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--mpvpc-brand-ember) 42%, transparent);
  outline-offset: 2px;
}

.sx-table-pagination__button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.sx-table-pagination__page--active {
  border-color: transparent;
  background: var(--mpvpc-brand-ember);
  color: var(--mpvpc-brand-black);
}

.sx-table-pagination__gap {
  min-width: 24px;
  color: var(--sx-ink-weak);
  text-align: center;
  font-weight: 700;
}

.sx-table-pagination--compact {
  width: fit-content;
  min-height: 0;
  padding: 12px;
}

.sx-table-pagination__compact-controls {
  gap: 12px;
}

@media (max-width: 680px) {
  .sx-table-pagination {
    align-items: flex-start;
    gap: 10px;
  }

  .sx-table-pagination__summary {
    flex: 1 1 100%;
  }

  .sx-table-pagination__controls {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .sx-table-pagination__pages {
    max-width: 100%;
    overflow-x: auto;
    padding: 3px;
    margin: -3px;
  }

  .sx-table-pagination--compact {
    width: fit-content;
  }

  .sx-table-pagination--compact .sx-table-pagination__page-count {
    margin: 0;
  }
}

.sx-opportunities-hf-page {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.sx-opportunities-table-scroll {
  max-height: calc(100vh - 330px);
  min-height: 320px;
  overflow: auto;
  /* Reserva a barra vertical apenas no fim: o cabeçalho deve começar na borda esquerda do card. */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* AIDEV-NOTE: coluna fixa segue a regra "Tabela com coluna fixa" (.sx-table-fixa, secao VIDRO SOBRIO):
   a celula pinta var(--sx-row-bg) da linha, nunca um fundo proprio (desvio apontado pelo dono, 24/09). */
.sx-opportunities-table-scroll th:first-child,
.sx-opportunities-table-scroll td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--sx-row-bg, var(--sx-glass-bg-strong));
  -webkit-backdrop-filter: var(--sx-glass-blur);
  backdrop-filter: var(--sx-glass-blur);
}

.sx-opportunities-table-scroll thead th:first-child {
  z-index: 4;
  background: var(--sx-surface-2);
}

/* Ao selecionar em lote, o checkbox ocupa a primeira coluna fixa; a Empresa continua ancorada
   logo depois para a referência comercial não se perder durante a rolagem horizontal. */
.sx-opportunities-table--selection th:nth-child(2),
.sx-opportunities-table--selection td:nth-child(2) {
  position: sticky;
  left: 48px;
  z-index: 1;
  background: var(--sx-row-bg, var(--sx-glass-bg-strong));
  -webkit-backdrop-filter: var(--sx-glass-blur);
  backdrop-filter: var(--sx-glass-blur);
}

.sx-opportunities-table--selection thead th:nth-child(2) {
  z-index: 4;
  background: var(--sx-surface-2);
}

@media (min-width: 1600px) {
  .sx-opportunities-table-scroll {
    max-height: calc(100vh - 330px);
  }
}

@media (max-width: 760px) {
  .sx-opportunities-hf-page {
    transform: none;
    width: 100%;
  }
}

@media (max-width: 680px) {
  .sx-opportunities-table-scroll.sx-table-cards-wrap {
    max-height: none;
    min-height: 0;
    overflow: visible !important;
  }

  .sx-opportunities-table-scroll th:first-child,
  .sx-opportunities-table-scroll td:first-child,
  .sx-opportunities-table--selection th:nth-child(2),
  .sx-opportunities-table--selection td:nth-child(2) {
    position: static;
    box-shadow: none;
  }
}

/* ============================================================
   CENTRAL DE OPORTUNIDADES — modo Resumo e cartão do celular (redesenho wave 1, 25/09/2026).
   AIDEV-NOTE: só a apresentação compacta vive aqui; a Tabela completa (13 colunas, sx-table-cards) segue acima.
   ============================================================ */
.sx-central-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.sx-central-modo { flex: 0 0 auto; }
.sx-kpi-ausente { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--sx-ink-weak); }

.sx-central-lista { display: grid; gap: 12px; }
.sx-central-resumo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-central-linha {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.35fr) minmax(0, 1.05fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 11px 12px 11px 14px;
  border-radius: var(--sx-radius);
  background: var(--sx-card-bg);
  box-shadow: 0 0 0 1px var(--sx-glass-edge), inset 0 1px 0 var(--sx-glass-light);
  cursor: pointer;
  transition: box-shadow 140ms var(--mpvpc-motion-ease), background 140ms var(--mpvpc-motion-ease);
}
.sx-central-linha:hover {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--mpvpc-brand-ember) 30%, var(--sx-glass-edge)), inset 0 1px 0 var(--sx-glass-light), 0 10px 24px -18px var(--sx-glass-depth);
}
.sx-central-linha[data-selecionada="true"] { background: var(--sx-st-amber-bg); box-shadow: 0 0 0 1px var(--sx-st-amber-bd); }
.sx-central-resumo--selecao .sx-central-linha {
  grid-template-columns: 24px minmax(0, 2.3fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.35fr) minmax(0, 1.05fr) auto;
}
.sx-central-linha > span { min-width: 0; }
.sx-central-linha__empresa,
.sx-central-linha__evento,
.sx-central-linha__contato { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sx-central-linha__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sx-central-linha__texto > strong,
.sx-central-linha__texto > .sx-central-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-central-linha__texto strong { font-size: 13px; font-weight: 650; color: var(--sx-ink); }
.sx-central-linha__nome { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* Datas de várias sessões ("07/12/2026 e 08/12/2026") quebram em até duas linhas em vez de reticências. */
.sx-central-linha__evento .sx-central-linha__texto > strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }
/* Nome e cidade quebram em até duas linhas (colunas estreitas em 1024px) em vez de reticências. */
.sx-central-linha__nome strong { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.25; font-size: 14px; font-weight: 700; }
.sx-central-linha__empresa .sx-central-linha__texto > .sx-central-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sx-central-sub { font-size: 12px; color: var(--sx-ink-weak); line-height: 1.3; }
.sx-central-status { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sx-central-valor { display: inline-flex; flex-direction: column; gap: 3px; }
.sx-central-valor strong { font-size: 14.5px; font-weight: 750; color: var(--sx-ink); white-space: nowrap; }
.sx-central-ausente { font-size: 12.5px; font-weight: 600; color: var(--sx-ink-weak); white-space: nowrap; }
.sx-central-proposta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sx-ink-weak); white-space: nowrap; }
.sx-central-proposta--enviada { color: var(--sx-st-success); font-weight: 600; }
.sx-central-linha__valor { justify-self: end; text-align: right; }
.sx-central-linha__acao { display: inline-flex; }

/* Notebook e tablet com a barra lateral aberta: o contato sai do resumo (segue na Tabela completa). */
@media (max-width: 1180px) {
  .sx-central-linha { grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; }
  .sx-central-resumo--selecao .sx-central-linha { grid-template-columns: 24px minmax(0, 2fr) minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; }
  .sx-central-linha__contato { display: none !important; }
}

/* Celular: cartão compacto que expande (Accordion do kit) e paginação compacta. */
.sx-central-cartoes { display: none; }
.sx-central-paginacao__compacta { display: none; }
.sx-central-cartao { border-radius: var(--sx-radius); background: var(--sx-card-bg); box-shadow: var(--sx-card-shadow); overflow: hidden; }
.sx-central-cartao[data-selecionada="true"] { background: var(--sx-st-amber-bg); }
.sx-central-cartao__topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 8px 6px 14px; cursor: pointer; }
.sx-central-cartao__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sx-central-cartao__nome { font-size: 14px; font-weight: 700; color: var(--sx-ink); line-height: 1.3; overflow-wrap: anywhere; }
.sx-central-cartao__resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 14px 10px 60px; font-size: 12.5px; color: var(--sx-ink); }
/* Data do evento no padrão único (01/10/2026): "revisar data" e a modalidade descem de linha em vez de estourar o cartão. */
.sx-central-cartao__evento { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.sx-central-cartao__acordeao { border-top: 1px solid var(--sx-line) !important; }
.sx-central-cartao__acordeao > section { border-bottom: 0 !important; }
.sx-central-cartao__acordeao h3 > button { padding: 8px 14px !important; min-height: 48px !important; }
.sx-central-cartao__acordeao [role="region"] { padding: 0 14px 14px !important; }
.sx-central-detalhe { display: grid; margin: 0; }
.sx-central-detalhe > div { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--sx-line); }
.sx-central-detalhe > div:first-child { border-top: 0; }
.sx-central-detalhe dt { color: var(--sx-ink-weak); font-size: 12px; font-weight: 650; }
.sx-central-detalhe dd { margin: 0; color: var(--sx-ink); font-size: 13px; overflow-wrap: anywhere; }
.sx-central-cartao__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sx-central-cartao__acoes > .sx-btn { flex: 1 1 140px; min-height: 44px; }
@media (max-width: 680px) {
  .sx-central-busca { flex-basis: 100% !important; max-width: none !important; }
  /* KPIs da Central em duas colunas compactas (o Pipeline ocupa a linha inteira): cinco cartões
     empilhados empurravam a lista para depois de uma tela inteira. Seletor mais forte que o
     .sx-shell .sx-kpi-grid de uma coluna; padding e tamanho do número vêm inline do KpiCard. */
  .sx-shell .sx-kpi-grid.sx-opportunities-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .sx-opportunities-kpis .sx-kpi-card { padding: 12px 14px 11px !important; }
  .sx-opportunities-kpis .sx-kpi-card > div:first-of-type { margin-bottom: 6px !important; }
  .sx-opportunities-kpis .sx-kpi-card .tnum { font-size: 22px !important; }
  .sx-opportunities-kpis .sx-kpi-card--accent { grid-column: 1 / -1; }
  .sx-central-resumo { display: none; }
  .sx-central-cartoes { display: grid; gap: 10px; }
  .sx-central-paginacao__completa { display: none !important; }
  .sx-central-paginacao__compacta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--sx-ink-mut); }
}

/* ============================================================
   UTILITARIOS DE LAYOUT DE TELA — page-head, stacks, listas, abas,
   dossie, timeline. Usados pelos modulos src/sistema/features/*.
   ============================================================ */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 4px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--sx-ink); }
.page-head .muted { margin-top: 6px; max-width: 560px; }
.muted { color: var(--sx-ink-mut); }
.microcopy { font-size: 12px; color: var(--sx-ink-weak); }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sx-stack { display: flex; flex-direction: column; gap: 16px; }
.sx-list { display: flex; flex-direction: column; }
.sx-list-item { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 4px; border-top: 1px solid var(--sx-line); }
.sx-list-item:first-child { border-top: none; }
.sx-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--sx-line); font-size: 13.5px; }
.sx-meta-row:first-child { border-top: none; }
.sx-meta-row > span { color: var(--sx-ink-mut); }
.sx-meta-row > strong { color: var(--sx-ink); font-weight: 600; text-align: right; }

/* Abas */
.sx-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--sx-line); }
.sx-tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--sx-ink-mut); cursor: pointer; }
.sx-tabs button:hover { color: var(--sx-ink); }
.sx-tabs button.is-active { color: var(--sx-ink); border-bottom-color: var(--mpvpc-brand-ember); }

/* Dossie */
.sx-dossier-hero { display: flex; align-items: flex-start; gap: 16px; }
.sx-dossier-mark { width: 52px; height: 52px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; background: var(--sx-st-amber-bg); color: var(--mpvpc-brand-ember-on-light); }
.sx-dossier-mark svg { width: 26px; height: 26px; }
.sx-dossier-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 20px; align-items: start; }

/* Timeline */
.sx-timeline { display: flex; flex-direction: column; }
.sx-timeline-item { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sx-line); }
.sx-timeline-item:first-child { border-top: none; }
.sx-timeline-item > span { width: 9px; height: 9px; border-radius: 999px; background: var(--mpvpc-brand-ember); flex: 0 0 auto; margin-top: 6px; }

@media (max-width: 860px) { .sx-dossier-grid { grid-template-columns: 1fr; } }

/* Dossiê one-page (sem abas): conteúdo + índice fixo à direita. No celular o índice vira a barra
   de seção no topo, e a grade passa a uma coluna — nada de rolagem horizontal. */
.sx-dossie-grid { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 20px; align-items: start; }
.sx-dossie-index { position: sticky; top: calc(var(--sx-dossie-topo-h, 96px) + 8px); display: grid; gap: 2px; border-left: 1px solid var(--sx-line); padding-left: 4px; }
.sx-dossie-index button { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: none; border-left: 2px solid transparent; margin-left: -6px; padding: 7px 10px; font: inherit; font-size: 12.5px; color: var(--sx-ink-mut); cursor: pointer; }
.sx-dossie-index button:hover { color: var(--sx-ink); }
.sx-dossie-index button[aria-current="true"] { color: var(--sx-ink); font-weight: 650; border-left-color: var(--mpvpc-brand-ember); background: var(--sx-surface-2); }
.sx-dossie-index button:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.sx-dossie-index__contagem { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: var(--mpvpc-radius-pill); border: 1px solid var(--sx-line); background: var(--sx-surface-2); color: var(--sx-ink-mut); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.sx-dossie-index__contagem[data-acende="true"] { border-color: var(--sx-st-amber-bd); background: var(--sx-st-amber-bg); color: var(--sx-st-amber); }
.sx-dossie-mobile-index { display: none; }
@media (max-width: 960px) {
  /* AIDEV-NOTE: minmax(0,1fr), nunca 1fr: com 1fr a trilha cresce até o min-content do conteúdo e o celular rola de lado. */
  .sx-dossie-grid { grid-template-columns: minmax(0, 1fr); }
  .sx-dossie-index { display: none; }
  .sx-dossie-mobile-index { display: block; }
}

/* Celular e tablet: chips de seção com contadores, logo abaixo do cabeçalho; só esta faixa fica fixa (substitui o <details>). */
.sx-dossie-chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 2px; scrollbar-width: none; scroll-padding-inline: 12px; }
.sx-dossie-chips::-webkit-scrollbar { display: none; }
.sx-dossie-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sx-line-strong);
  border-radius: 999px;
  background: var(--sx-surface);
  color: var(--sx-ink-mut);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.sx-dossie-chip[aria-current="true"] { border-color: var(--sx-accent); background: var(--sx-st-amber-bg); color: var(--sx-ink); }
.sx-dossie-chip:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.sx-dossie-chip__contagem { min-width: 18px; padding: 0 5px; border-radius: var(--mpvpc-radius-pill); background: var(--sx-surface-2); color: var(--sx-ink-mut); font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; }
.sx-dossie-chip__contagem[data-acende="true"] { background: var(--sx-accent); color: var(--mpvpc-brand-black); }

/* Dossiê reorganizado (29/09/2026, Proposta A): cabeçalho fixo em 2 linhas, Agora com pendências e botão da vez,
   sessões em cartões, árvore do grupo, atas e conversas. Só tokens: claro e escuro trocam sozinhos. */
.sx-dossie { --sx-dossie-topo-h: 96px; }
.sx-dossie-secao, #dossie-memoria, #dossie-divergencias, #dossie-historico-proxima, #dossie-rodape, #dossie-registro-tecnico,
.sx-dossie [data-sx-dossie-bloco="dados-gerais"], .sx-dossie [data-sx-dossie-bloco="valor"] { scroll-margin-top: calc(var(--sx-dossie-topo-h) + 12px); }
/* AIDEV-NOTE: o scroll é do .sx-main, que tem padding: sticky em top 0 grudaria abaixo do padding e deixaria o
   conteúdo aparecer por cima do cabeçalho. Top e margem negativos colam o cabeçalho na borda da área de conteúdo.
   A coluna minmax(0, 1fr) impede a tira de esticar o grid (e a página) além da tela no celular. */
.sx-dossie-topo {
  position: sticky;
  top: calc(-1 * var(--sx-page-pad-y, 0px));
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  margin: calc(-1 * var(--sx-page-pad-y, 0px)) calc(-1 * var(--sx-page-pad-x, 16px)) 0;
  padding: 10px var(--sx-page-pad-x, 16px) 8px;
  border-bottom: 1px solid var(--sx-line);
  background: var(--sx-glass-bg-strong);
  -webkit-backdrop-filter: var(--sx-glass-blur);
  backdrop-filter: var(--sx-glass-blur);
}
.sx-dossie-topo__linha1, .sx-dossie-topo__linha2 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sx-dossie-voltar { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--sx-ink-mut); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sx-dossie-voltar:hover { color: var(--sx-ink); }
.sx-dossie-topo__titulo { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--sx-ink); font-size: 18px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.sx-dossie-topo__filial { flex: 0 2 auto; min-width: 0; overflow: hidden; color: var(--sx-ink-mut); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sx-dossie-topo__linha1 > .sx-status-badge, .sx-dossie-topo__linha1 > span:not([class]) { flex: 0 0 auto; }
.sx-dossie-topo__etapa { flex: 0 0 auto; display: inline-flex; align-items: center; }
.sx-dossie-topo__opp { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--sx-ink-weak); font-family: var(--mpvpc-font-mono); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sx-dossie-topo__acoes { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.sx-dossie-icone { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface); color: var(--sx-ink-mut); cursor: pointer; }
.sx-dossie-icone:hover { color: var(--sx-ink); }
.sx-dossie-tira { flex: 1 1 0; display: block; min-width: 0; overflow: hidden; color: var(--sx-ink-mut); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.sx-dossie-tira > span { margin-right: 14px; }
.sx-dossie-valor { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 55%; padding: 3px 8px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface); color: var(--sx-ink); font: inherit; white-space: nowrap; cursor: pointer; }
.sx-dossie-valor .eyebrow { font-size: 10px; }
.sx-dossie-valor strong { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.sx-dossie-valor__dica { min-width: 0; overflow: hidden; color: var(--sx-ink-weak); font-size: 11px; text-overflow: ellipsis; }
.sx-dossie-valor svg { align-self: center; flex: 0 0 auto; color: var(--sx-ink-weak); }
.sx-dossie-valor:hover { border-color: var(--sx-line-strong); }
.sx-dossie-voltar:focus-visible, .sx-dossie-icone:focus-visible, .sx-dossie-valor:focus-visible, .sx-dossie-link:focus-visible,
.sx-dossie-recolher:focus-visible, .sx-dossie-recolhivel__botao:focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: var(--sx-radius-sm); }

.sx-dossie-link { padding: 0; border: 0; background: none; color: var(--sx-st-amber); font: inherit; font-size: 12.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sx-dossie-recolher { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--sx-ink-mut); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.sx-dossie-recolher svg, .sx-dossie-recolhivel__botao svg { color: var(--sx-ink-mut); transition: transform var(--mpvpc-motion-base) var(--mpvpc-motion-ease); }

/* Agora: contêiner sem vidro de propósito (o botão da vez vira fixed no celular; blur prenderia o fixed). */
.sx-dossie-agora, .sx-dossie-bloco, .sx-dossie-arvore, .sx-dossie-recolhivel { min-width: 0; border: 1px solid var(--sx-card-border); border-radius: var(--sx-radius); background: var(--sx-card-bg); box-shadow: var(--sx-card-shadow); }
.sx-dossie-agora { display: grid; gap: 12px; padding: 16px 18px; }
.sx-dossie-agora__topo { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px 20px; }
.sx-dossie-agora__proxima { flex: 1 1 320px; min-width: 0; max-width: 640px; }
.sx-dossie-agora__autoria { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; color: var(--sx-ink-weak); font-size: 12px; }
.sx-dossie-vez { flex: 0 0 auto; margin-left: auto; }
.sx-dossie-agora__linha { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 12px; border-top: 1px solid var(--sx-line); }
.sx-dossie-agora__indicador { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--sx-ink); font-size: 13px; }
.sx-dossie-agora__indicador .eyebrow { font-size: 10px; }
.sx-dossie-agora__dica { color: var(--sx-ink-weak); font-size: 11.5px; }
.sx-dossie-agora__vazio { margin: 0; color: var(--sx-st-success); font-size: 13.5px; font-weight: 650; }
.sx-dossie-pendencias { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-dossie-pendencia { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--sx-st-amber-bd); border-radius: var(--sx-radius-sm); background: var(--sx-st-amber-bg); }
.sx-dossie-pendencia strong { display: block; color: var(--sx-ink); font-size: 13px; }
.sx-dossie-pendencia p { margin: 3px 0 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-dossie-pendencia .sx-dossie-link { flex: 0 0 auto; white-space: nowrap; }
.sx-dossie-pendencia[data-sx-pendencia="aviso"], .sx-dossie-pendencia[data-sx-pendencia="vinculo"] { border-color: var(--sx-line); background: var(--sx-surface-2); }

/* Solicitação: um cartão por sessão. */
.sx-dossie-sessoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sx-dossie-sessao { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); }
.sx-dossie-sessao__topo { display: flex; justify-content: space-between; gap: 8px; color: var(--sx-ink); font-size: 13.5px; }
.sx-dossie-sessao__topo span { color: var(--sx-ink-mut); font-size: 12.5px; }
.sx-dossie-sessao__local { color: var(--sx-ink); font-size: 13px; overflow-wrap: anywhere; }
.sx-dossie-sessao__local span { color: var(--sx-ink-weak); }
.sx-dossie-sessao__meta { color: var(--sx-ink-mut); font-size: 12px; }

/* Pessoas: árvore Grupo › Filiais › Oportunidades › pontos focais, recolhida. */
.sx-dossie-arvore { padding: 12px 14px; }
.sx-dossie-arvore__raiz, .sx-dossie-arvore__nivel { margin: 0; padding: 0; list-style: none; }
.sx-dossie-arvore__raiz { margin-top: 8px; }
.sx-dossie-arvore__nivel { display: grid; gap: 6px; margin: 6px 0 0 14px; padding-left: 12px; border-left: 1px solid var(--sx-line); }
.sx-dossie-arvore__linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; color: var(--sx-ink); font-size: 13px; }
.sx-dossie-arvore__linha svg { color: var(--sx-ink-weak); }
.sx-dossie-arvore__codigo { color: var(--sx-ink-mut); font-family: var(--mpvpc-font-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.sx-dossie-arvore__opp[data-atual="true"] > .sx-dossie-arvore__linha .sx-dossie-arvore__codigo { color: var(--sx-ink); font-weight: 700; }
.sx-dossie-arvore__meta { color: var(--sx-ink-weak); font-size: 12px; }
.sx-dossie-arvore__pessoa { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; }
.sx-dossie-arvore__nome { color: var(--sx-ink); font-weight: 650; }
.sx-dossie-arvore__vazio { margin: 4px 0 0; color: var(--sx-ink-weak); font-size: 12px; }
/* Árvore navegável (revisão de 30/09): outra oportunidade abre o próprio Dossiê (código + tema); a pessoa filtra. */
.sx-dossie-arvore__rotulo { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.sx-dossie-arvore__tema { color: var(--sx-ink); font-size: 13px; overflow-wrap: anywhere; }
.sx-dossie-arvore__botao { min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sx-dossie-arvore__botao.sx-dossie-arvore__rotulo { color: var(--sx-st-amber); text-decoration: underline; text-decoration-color: var(--sx-st-amber-bd); text-underline-offset: 3px; }
.sx-dossie-arvore__botao.sx-dossie-arvore__rotulo .sx-dossie-arvore__codigo, .sx-dossie-arvore__botao.sx-dossie-arvore__rotulo .sx-dossie-arvore__tema { color: inherit; }
.sx-dossie-arvore__botao.sx-dossie-arvore__nome { text-decoration: underline dotted; text-decoration-color: var(--sx-line-strong); text-underline-offset: 3px; }
.sx-dossie-arvore__botao[aria-pressed="true"] { color: var(--sx-st-amber); text-decoration-style: solid; }
.sx-dossie-arvore__botao:hover { filter: brightness(0.92); }
.sx-dossie-arvore__botao:focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: var(--sx-radius-xs); }
.sx-dossie-arvore__filtro { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--sx-st-amber-bd); border-radius: var(--sx-radius-sm); background: var(--sx-st-amber-bg); color: var(--sx-ink); font-size: 12.5px; }

/* Conversas e memória. */
.sx-dossie-bloco { display: grid; gap: 10px; padding: 14px 16px; }
.sx-dossie-bloco__titulo { margin: 0; color: var(--sx-ink); font-size: 14px; font-weight: 700; }
.sx-dossie-bloco__vazio { margin: 0; color: var(--sx-ink-weak); font-size: 12.5px; }
.sx-dossie-atas { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sx-dossie-ata { display: grid; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); }
.sx-dossie-ata__topo { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; color: var(--sx-ink); font-size: 13px; }
.sx-dossie-ata__grupo .eyebrow { font-size: 10px; }
.sx-dossie-ata__grupo ul { margin: 2px 0 0; padding-left: 18px; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-dossie-conversas { display: grid; margin: 0; padding: 0; list-style: none; }
.sx-dossie-conversa { display: grid; gap: 3px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--sx-line); }
.sx-dossie-conversa:first-child { border-top: 0; }
.sx-dossie-conversa__topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--sx-ink); font-size: 12.5px; }
.sx-dossie-conversa__canal { color: var(--sx-ink-weak); font-size: 10.5px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.sx-dossie-conversa__topo time { margin-left: auto; color: var(--sx-ink-weak); font-size: 11.5px; }
.sx-dossie-conversa__trecho { margin: 0; color: var(--sx-ink); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-dossie-conversa .sx-dossie-link { justify-self: start; font-size: 12px; }

/* Blocos recolhíveis (memória de cálculo, pós-venda) e rodapé. */
.sx-dossie-recolhivel__botao { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 0; background: transparent; color: var(--sx-ink); font: inherit; text-align: left; cursor: pointer; }
.sx-dossie-recolhivel__botao strong { display: block; font-size: 14px; }
.sx-dossie-recolhivel__resumo { display: block; margin-top: 2px; color: var(--sx-ink-mut); font-size: 12px; overflow-wrap: anywhere; }
.sx-dossie-recolhivel__conteudo { min-width: 0; padding: 4px 16px 16px; }
.sx-dossie-rodape { display: grid; gap: 10px; min-width: 0; padding: 12px 0 4px; border-top: 1px solid var(--sx-line); color: var(--sx-ink-weak); font-size: 12.5px; }
.sx-dossie-rodape__trilha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
/* Selo de risco do Agora: botão sem cara de botão, que leva ao registro técnico. */
.sx-dossie-risco { display: inline-flex; align-items: center; padding: 0; border: 0; border-radius: var(--sx-radius-sm); background: none; font: inherit; cursor: pointer; }
.sx-dossie-risco:hover { filter: brightness(0.96); }
.sx-dossie-risco:focus-visible { outline: none; box-shadow: var(--sx-ring); }
/* Objetivos do cliente logo abaixo do cabeçalho (regra do dono de 05/09: solicitação com horários e objetivos primeiro). */
.sx-dossie-objetivos { display: grid; gap: 3px; min-width: 0; padding: 10px 14px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); background: var(--sx-surface-2); }
.sx-dossie-objetivos .eyebrow { font-size: 10px; }
.sx-dossie-objetivos__vazio { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--sx-ink-weak); font-size: 12.5px; }

@media (max-width: 960px) {
  /* AIDEV-NOTE: revisão de 30/09 — até 960 px o cabeçalho ROLA com a página e só a faixa de atalhos (fora do topo)
     fica fixa. O topo fixo do celular ocupava 25% da tela; com o botão da vez sobravam 53% para o conteúdo.
     --sx-dossie-topo-h vira a altura da faixa: é o que a rolagem até a seção desconta. */
  .sx-dossie { --sx-dossie-topo-h: 56px; }
  .sx-dossie-topo { position: relative; top: auto; }
  .sx-dossie-mobile-index {
    position: sticky;
    top: calc(-1 * var(--sx-page-pad-y, 0px));
    z-index: 6;
    min-width: 0;
    margin: 0 calc(-1 * var(--sx-page-pad-x, 16px));
    padding: 2px var(--sx-page-pad-x, 16px) 6px;
    border-bottom: 1px solid var(--sx-line);
    background: var(--sx-glass-bg-strong);
    -webkit-backdrop-filter: var(--sx-glass-blur);
    backdrop-filter: var(--sx-glass-blur);
  }
}
@media (max-width: 680px) {
  .sx-dossie-voltar__texto, .sx-dossie-topo__filial, .sx-dossie-topo__opp, .sx-dossie-valor .eyebrow, .sx-dossie-valor__dica,
  .sx-dossie-icone[data-sx-dossie-atualizar="true"], .sx-dossie-topo__rotulo { display: none; }
  /* No celular "Abrir proposta" fica só o ícone (nome acessível no aria-label), com área de toque de 44px. */
  .sx-dossie-topo__acoes .sx-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 10px; }
  /* AIDEV-NOTE: celular (revisão de 29/09) — as duas linhas viram UMA grade (display: contents): o nome da empresa
     ganha a linha toda ao lado do voltar (até 2 linhas), a tira quebra em 2 linhas com datas e cidade primeiro, e
     o selo de etapa, os ícones e o valor dividem a terceira linha. Antes o nome cortava em ~7 letras e a tira
     rolava de lado escondida. Desde 30/09 o topo não é fixo aqui e os atalhos ficam fora dele (bloco de 960 px). */
  .sx-dossie-topo {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "voltar titulo titulo titulo" "tira tira tira tira" "etapa etapa acoes valor";
    column-gap: 8px;
    row-gap: 6px;
  }
  .sx-dossie-topo__linha1, .sx-dossie-topo__linha2 { display: contents; }
  .sx-dossie-voltar { grid-area: voltar; align-self: center; }
  .sx-dossie-topo__titulo {
    grid-area: titulo;
    align-self: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 16px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .sx-dossie-topo__acoes { grid-area: acoes; align-self: center; margin-left: 0; }
  .sx-dossie-topo__etapa { grid-area: etapa; justify-self: start; align-self: center; }
  .sx-dossie-tira { grid-area: tira; display: flex; flex-wrap: wrap; gap: 2px 10px; white-space: normal; font-size: 12px; }
  .sx-dossie-tira > span { margin-right: 0; }
  .sx-dossie-tira > [data-meta="datas"] { order: -2; }
  .sx-dossie-tira > [data-meta="cidades"] { order: -1; }
  .sx-dossie-valor { grid-area: valor; justify-self: end; align-items: center; min-height: 44px; max-width: 100%; }
  .sx-dossie-agora { padding: 14px; }
  .sx-dossie-pendencia { flex-direction: column; gap: 6px; }
  .sx-dossie-sessoes { grid-template-columns: 1fr; }
  .sx-dossie-arvore__nivel { margin-left: 6px; padding-left: 8px; }
  .sx-dossie-recolhivel__conteudo { padding: 4px 10px 12px; }
  /* Botão da vez fixo no rodapé, acima da barra de navegação do celular. */
  .sx-dossie[data-vez="sim"] { padding-bottom: 68px; }
  .sx-dossie-vez { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(65px + env(safe-area-inset-bottom, 0px) + 10px); left: max(12px, env(safe-area-inset-left)); z-index: 66; margin: 0; }
  /* !important: o Btn do kit põe width/height inline; só aqui o botão ocupa a largura toda. */
  .sx-dossie-vez .sx-btn { width: 100% !important; height: 46px !important; justify-content: center; box-shadow: var(--sx-shadow-pop); }
}

/* Memória de cálculo (redesenho wave 1): coluna "No total?", itens da logística que recolhem no
   celular, alerta do detalhe, trilha de estados e acordeões. Cores só por token (claro e escuro). */
.sx-composicao-no-total { padding: 10px 16px; font-size: 12px; color: var(--sx-ink-mut); vertical-align: top; white-space: nowrap; }
.sx-composicao-marca { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 999px; vertical-align: -3px; background: var(--sx-st-neutral-bg); color: var(--sx-ink-weak); }
.sx-composicao-no-total[data-tom="entra"] .sx-composicao-marca { background: color-mix(in oklab, var(--sx-st-success) 16%, transparent); color: var(--sx-st-success); }
.sx-composicao-no-total[data-tom="alerta"] .sx-composicao-marca { background: var(--sx-st-amber-bg); color: var(--sx-st-amber, var(--mpvpc-brand-ember-on-light)); }
.sx-composicao-alternar { display: none; }
.sx-composicao-alerta { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-top: 1px solid color-mix(in oklab, var(--mpvpc-brand-ember) 35%, transparent); background: var(--sx-st-amber-bg); color: var(--sx-ink); font-size: 12.5px; line-height: 1.5; }
.sx-composicao-alerta > svg { flex: 0 0 auto; margin-top: 2px; color: var(--sx-st-amber, var(--mpvpc-brand-ember-on-light)); }
.sx-composicao-alerta p { margin: 0; min-width: 0; }
.sx-composicao-alerta strong { color: var(--sx-st-amber, var(--mpvpc-brand-ember-on-light)); }
/* "A conta fecha" / "a soma não fecha": no escuro os tokens de sucesso e alerta não têm versão própria. */
.sx-composicao-conta { margin: 0; padding: 9px 16px; font-size: 12.5px; border-top: 1px solid var(--sx-line); }
.sx-composicao-conta[data-fecha="true"] { background: var(--sx-st-success-bg); color: var(--sx-st-success); }
.sx-composicao-conta[data-fecha="false"] { background: var(--sx-st-warn-bg); color: var(--sx-st-warn); }
body.theme-dark .sx-composicao-conta[data-fecha="true"] { background: color-mix(in oklab, var(--sx-st-success) 20%, transparent); color: var(--sx-ink); }
body.theme-dark .sx-composicao-conta[data-fecha="false"] { background: var(--sx-st-amber-bg); color: var(--sx-ink); }

/* Abas de versão: só no celular (no computador o comparativo de cenários já troca a versão). */
.sx-memoria-versoes { display: none !important; }

/* Acordeões da memória: o painel do kit recua 40px (numerado); aqui o conteúdo alinha com o título. */
.sx-memoria-acordeao [role="region"] { padding: 0 4px 16px !important; }
.sx-memoria-detalhes .sx-memoria-acordeao { border-top: 0 !important; }
.sx-memoria-detalhes .sx-memoria-acordeao > section:last-child { border-bottom: 0 !important; }
.sx-memoria-detalhes .sx-memoria-acordeao h3 > button { padding: 10px 16px !important; }
.sx-memoria-detalhes .sx-memoria-acordeao [role="region"] { padding: 0 16px 16px !important; }

/* Trilha de estados: na horizontal quando o cartão tem largura (ponto em cima, texto embaixo); no
   celular e em coluna estreita fica a linha do tempo vertical do kit. */
.sx-memoria-trilha-card { container: sx-trilha / inline-size; }
@container sx-trilha (min-width: 700px) {
  .sx-memoria-trilha { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .sx-memoria-trilha > li { grid-template-columns: minmax(0, 1fr) !important; align-content: start; padding-bottom: 0 !important; }
  /* O conector do kit só existe nos passos que não são o último: vira traço horizontal até o próximo. */
  .sx-memoria-trilha > li > span:nth-last-child(3) { left: 28px !important; right: -12px !important; top: 9px !important; bottom: auto !important; width: auto !important; height: 1px !important; }
}

@media (max-width: 680px) {
  .sx-memoria-versoes { display: flex !important; padding: 0 4px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); background: var(--sx-surface); }
  .sx-memoria-versoes .sx-filter-tabs__option { flex: 1 1 0 !important; justify-content: center; }
}

/* Composição em lista quando a coluna é estreita (celular e a coluna do Dossiê em 1024px): componente
   e valor na mesma linha; como foi calculado e "No total?" embaixo; itens da logística recolhem. */
.sx-composicao { container: sx-composicao / inline-size; }
@container sx-composicao (max-width: 660px) {
  .sx-table-cards.sx-composicao-tabela { display: block !important; min-width: 0 !important; }
  .sx-table-cards.sx-composicao-tabela thead { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sx-table-cards.sx-composicao-tabela tbody { display: block !important; }
  .sx-table-cards.sx-composicao-tabela tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "rotulo valor" "detalhe detalhe" "marca marca";
    column-gap: 12px;
    row-gap: 3px;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--sx-line) !important;
    border-radius: 0 !important;
  }
  .sx-table-cards.sx-composicao-tabela td { display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; text-align: left; white-space: normal !important; }
  .sx-table-cards.sx-composicao-tabela td::before { content: none !important; }
  .sx-table-cards.sx-composicao-tabela tbody tr:hover > td { background: transparent !important; }
  .sx-table-cards.sx-composicao-tabela td[data-label="Componente"] { grid-area: rotulo; display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
  .sx-table-cards.sx-composicao-tabela td[data-label="Valor"] { grid-area: valor; text-align: right !important; }
  .sx-table-cards.sx-composicao-tabela td[data-label="Como foi calculado"] { grid-area: detalhe; }
  .sx-table-cards.sx-composicao-tabela td[data-label="Como foi calculado"]:empty { display: none !important; }
  .sx-table-cards.sx-composicao-tabela td[data-label="No total?"] { grid-area: marca; font-size: 11.5px; }
  .sx-table-cards.sx-composicao-tabela tr[data-sx-composicao-nivel="1"] { padding-left: 28px !important; }
  .sx-table-cards.sx-composicao-tabela tr[data-sx-composicao-nivel="2"] { padding-left: 42px !important; }
  .sx-composicao-tabela[data-sx-logistica-aberta="false"] tr[data-sx-composicao-nivel] { display: none !important; }
  .sx-composicao-alternar { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border: 1px solid var(--sx-line-strong); border-radius: 999px; background: var(--sx-surface); color: var(--sx-ink-mut); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
  .sx-composicao-alternar:focus-visible { outline: none; box-shadow: var(--sx-ring); }
}

@media (max-width: 920px) {
  .sx-route-context {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sx-topbar-search {
    display: none !important;
  }

  .sistema-app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .sistema-app-shell__header,
  .sistema-app-shell > nav,
  .sistema-app-shell > main {
    grid-column: 1;
  }

  .sistema-app-shell__header {
    align-items: flex-start;
    padding: 14px 16px;
  }

  .sistema-app-shell__header div {
    display: grid;
    gap: 2px;
  }

  .sistema-app-shell > nav {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--sx-chrome-line);
  }

  .sistema-app-shell > nav section {
    min-width: 180px;
  }

  .sistema-app-shell > nav section + section {
    margin-top: 0;
  }

  .sistema-contract-screen__header,
  .sistema-contract-screen__grid {
    grid-template-columns: 1fr;
  }

  .sistema-contract-screen__header {
    display: grid;
  }

  .sistema-contract-screen__status {
    justify-content: flex-start;
  }

  .sistema-contract-screen__meta,
  .sistema-contract-screen__counts {
    grid-template-columns: 1fr;
  }

  .sistema-contract-screen__playbook,
  .sistema-contract-screen__lanes {
    grid-template-columns: 1fr;
  }

  .sistema-contract-screen__lanes div {
    border-right: 0;
    border-bottom: 1px solid var(--sx-line);
  }

  .sistema-contract-screen__lanes div:last-child {
    border-bottom: 0;
  }

  .sistema-contract-screen__counts div {
    border-right: 0;
    border-bottom: 1px solid var(--sx-line);
  }

  .sistema-contract-screen__counts div:last-child {
    border-bottom: 0;
  }

  .sx-kpi-grid,
  .sx-two-col {
    grid-template-columns: 1fr !important;
  }
}

/* A Central e uma leitura comparativa: no monitor largo, cada indicador e um
   card autonomo. A grade reduz antes de comprimir os titulos e valores em
   notebooks e tablets; no celular continua em uma coluna pelo contrato geral. */
@media (max-width: 1280px) and (min-width: 921px) {
  .sx-opportunities-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) and (min-width: 681px) {
  .sx-opportunities-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .sx-main {
    padding-bottom: 104px !important;
  }


  .sx-route-context span { display: none; }
  .sx-route-context strong { font-size: 12.5px; }

  /* Barra inferior clara (padrão de tab bar): acompanha a topbar; o escuro fica na gaveta do menu. */
  .sx-mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid var(--sx-line);
    background: rgba(251, 249, 243, 0.96);
    box-shadow: 0 -6px 24px rgba(15, 15, 14, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .sx-mobile-nav button {
    min-width: 0;
    min-height: 52px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sx-ink-mut);
    transition: background 140ms var(--mpvpc-motion-ease), color 140ms var(--mpvpc-motion-ease);
  }

  .sx-mobile-nav button[aria-current="page"] {
    background: var(--sx-st-amber-bg);
    color: var(--mpvpc-brand-ember-on-light);
  }

  .sx-mobile-nav span {
    overflow: hidden;
    max-width: 100%;
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sx-section-head,
  .sx-page-header {
    align-items: stretch !important;
  }

  .sx-section-head__actions,
  .sx-page-header__actions {
    width: 100%;
  }

  .sx-page-header > .sx-page-header__actions { justify-content: flex-start; margin-left: 0; }

  .sx-section-head__actions .sx-btn,
  .sx-page-header__actions .sx-btn {
    min-height: 42px;
  }

  .sistema-login {
    grid-template-columns: 1fr !important;
  }

  .sistema-login .sx-login-editorial {
    display: none !important;
  }

  .sistema-login > section:last-child {
    min-width: 0;
    width: 100%;
    place-items: center;
    padding: 32px 24px;
  }

  .sistema-login form {
    width: 100%;
    max-width: 380px;
  }

  /* Faixa do celular: marca, "Operação privada", o único h1 visível e a frase (a coluna editorial some). */
  .sistema-login .sx-login-faixa {
    display: grid;
    gap: 10px;
    padding: 26px 24px 24px;
    background: var(--sx-chrome-bg);
    color: var(--sx-chrome-text);
  }

  .sistema-login .sx-login-faixa .eyebrow { margin-top: 10px; color: var(--mpvpc-brand-ember); }

  .sistema-login .sx-login-faixa h1 {
    margin: 0;
    color: var(--sx-chrome-text);
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.03em;
  }

  .sistema-login .sx-login-faixa p {
    margin: 0;
    color: var(--sx-chrome-text-mut);
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
  }

  .sistema-login .sx-login-sequencia--celular { display: flex !important; justify-content: center; max-width: 380px; }
}

/* ============================================================
   MÍDIAS SOCIAIS (redesenho wave 11a, 25/09/2026)
   Lista peça×rede e detalhe da peça em #/midias-sociais.
   Abaixo de 1024 px o detalhe só aparece com ?peca= e toma o lugar da lista; de 1024 px para cima ele fica
   ao lado, com a primeira linha que pede decisão já aberta (o smoke de permissão procura Rejeitar).
   A grade das linhas muda pela largura da própria lista (container query), não da janela.
   AIDEV-NOTE: lista → detalhe vem do data-detalhe da própria tela; não meça a janela em JS.
   ============================================================ */
.sx-social-area { margin-top: 16px; }

.sx-social-notas { margin: -4px 0 14px; }

.sx-social-notas p,
.sx-social-unidade {
  margin: 0 0 4px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.5;
}

.sx-social-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  margin: 4px 0 16px;
}

.sx-social-filtros__campos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sx-social-filtros__campos--painel {
  display: grid;
  gap: 14px;
}

.sx-social-filtrar { display: none; }

.sx-social-aviso { margin-bottom: 14px; }

.sx-social-mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.sx-social-mesa__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  container-type: inline-size;
  container-name: social-lista;
}

/* Seis cartões numa linha só a partir de 1440 px; antes, três por linha (dois no celular). */
.sx-kpi-grid.sx-social-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sx-social-faixa-curta { display: none; }

.sx-social-mesa__detalhe { min-width: 0; }

.sx-social-lista {
  overflow: hidden;
  border: 1px solid var(--sx-card-border);
  border-radius: var(--sx-radius);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
}

.sx-social-lista__cabecalho,
.sx-social-linha__botao {
  display: grid;
  grid-template-columns: 108px minmax(0, 1.5fr) 84px 150px 84px minmax(0, 1fr);
  grid-template-areas: "data peca rede estado horario acao";
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
}

.sx-social-lista__cabecalho {
  border-bottom: 1px solid var(--sx-line);
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
  font: 800 11px/1.2 var(--mpvpc-font-heading);
  letter-spacing: .04em;
}

.sx-social-lista__cabecalho > :nth-child(1) { grid-area: data; }
.sx-social-lista__cabecalho > :nth-child(2) { grid-area: peca; }
.sx-social-lista__cabecalho > :nth-child(3) { grid-area: rede; }
.sx-social-lista__cabecalho > :nth-child(4) { grid-area: estado; }
.sx-social-lista__cabecalho > :nth-child(5) { grid-area: horario; }
.sx-social-lista__cabecalho > :nth-child(6) { grid-area: acao; }

.sx-social-lista__linhas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-social-linha + .sx-social-linha { border-top: 1px solid var(--sx-line); }

.sx-social-linha__botao {
  width: 100%;
  min-height: 58px;
  border: 0;
  background: transparent;
  color: var(--sx-ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.sx-social-linha__botao:hover { background: var(--sx-surface-2); }

.sx-social-linha__botao:focus-visible,
.sx-social-arte__botao:focus-visible,
.sx-social-outras__botao:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: -2px;
}

/* AIDEV-NOTE: seleção sem faixa de um lado só (side-tab reprovado pelo hook de design): fundo + borda fina. */
.sx-social-linha[data-selecionada] .sx-social-linha__botao {
  background: var(--sx-st-amber-bg);
  box-shadow: inset 0 0 0 1px var(--sx-st-amber-bd);
}

.sx-social-linha__peca {
  grid-area: peca;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.sx-social-linha__nome {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sx-social-linha__nome strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.sx-social-linha__nome small {
  color: var(--sx-ink-weak);
  font-size: 11.5px;
}

.sx-social-linha__info { display: contents; }
.sx-social-linha__data { grid-area: data; color: var(--sx-ink-mut); }
.sx-social-linha__rede { grid-area: rede; }
.sx-social-linha__horario { grid-area: horario; color: var(--sx-ink-mut); }
.sx-social-linha__estado { grid-area: estado; min-width: 0; }

.sx-social-linha__acao {
  grid-area: acao;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-weight: 650;
}

.sx-social-linha__acao svg { flex: 0 0 auto; color: var(--sx-ink-weak); }
.sx-social-linha__acao[data-tom="amber"] > span { color: var(--mpvpc-brand-ember-on-light); }
.sx-social-linha__acao[data-tom="warn"] > span { color: var(--sx-st-warn); }
.sx-social-linha__acao[data-tom="danger"] > span { color: var(--sx-st-danger); }
.sx-social-linha__acao[data-tom="success"] > span { color: var(--sx-st-success); }

.sx-social-miniatura {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--sx-line);
  border-radius: 6px;
  background: var(--sx-surface-2);
  object-fit: cover;
}

.sx-social-miniatura--vazia {
  display: grid;
  place-items: center;
  color: var(--sx-ink-weak);
}

/* Lista estreita (detalhe ao lado em notebook, tablet e celular): cartão de duas linhas. */
@container social-lista (max-width: 760px) {
  .sx-social-lista__cabecalho { display: none; }

  .sx-social-linha__botao {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "peca estado"
      "info acao";
    gap: 8px 12px;
  }

  .sx-social-linha__info {
    grid-area: info;
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 2px 10px;
    color: var(--sx-ink-mut);
  }

  .sx-social-linha__info > * + *::before {
    content: "·";
    margin-right: 10px;
    color: var(--sx-ink-weak);
  }

  .sx-social-linha__estado { justify-self: end; }

  .sx-social-linha__acao { justify-content: flex-end; text-align: right; }
}

/* Coluna estreita (1024 px com o detalhe ao lado, celular): a próxima ação ganha linha própria; dividir a
   segunda linha com a data espremia o nome da peça, que a coluna da ação larga deixava com ~70 px. */
@container social-lista (max-width: 480px) {
  .sx-social-linha__botao {
    grid-template-areas:
      "peca estado"
      "info info"
      "acao acao";
    gap: 6px 12px;
  }

  .sx-social-linha__acao { justify-content: space-between; text-align: left; }
}

@container social-lista (max-width: 340px) {
  .sx-social-linha__botao {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "peca"
      "estado"
      "info"
      "acao";
  }

  .sx-social-linha__estado { justify-self: start; }

  .sx-social-linha__acao { justify-content: space-between; text-align: left; }
}

/* Detalhe da peça. */
.sx-social-detalhe {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sx-social-voltar { justify-self: start; }

.sx-social-detalhe__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sx-social-detalhe__titulo {
  margin: 4px 0 0;
  color: var(--sx-ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sx-social-detalhe__estado {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.sx-social-versao { color: var(--sx-ink-weak); font-size: 12px; }

.sx-social-detalhe__corpo {
  display: grid;
  grid-template-columns: minmax(104px, 150px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.sx-social-arte { display: grid; gap: 6px; }

.sx-social-arte__botao {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: none;
  cursor: zoom-in;
}

.sx-social-arte__imagem {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.sx-social-arte__slides {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--sx-ink-weak);
  font-size: 11px;
}

.sx-social-arte--vazia {
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: center;
  padding: 8px;
  border: 1px dashed var(--sx-st-amber);
  border-radius: var(--sx-radius-sm);
  color: var(--sx-st-amber);
  font-size: 11px;
  text-align: center;
}

.sx-social-detalhe__textos {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sx-social-rotulo {
  margin: 0 0 4px;
  color: var(--sx-ink-weak);
  font: 800 10.5px/1.3 var(--mpvpc-font-heading);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sx-social-texto {
  margin: 0;
  color: var(--sx-ink-mut);
  font-size: 13px;
  line-height: 1.55;
}

.sx-social-sem-dado {
  margin: 0;
  color: var(--sx-ink-weak);
  font-size: 12.5px;
}

.sx-social-quebra { overflow-wrap: anywhere; }
.sx-social-link { color: var(--sx-accent); font-weight: 650; }

.sx-social-proxima {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
}

.sx-social-proxima strong { color: var(--sx-ink); font-size: 13px; }

.sx-social-proxima p {
  margin: 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Caixa tingida segue o InlineAlert do kit: texto na cor do tom, fundo e borda do mesmo tom (legível
   nos dois temas, porque o fundo dos tons não muda no escuro). */
.sx-social-proxima[data-tom="amber"] { border-color: var(--sx-st-amber-bd); background: var(--sx-st-amber-bg); }
.sx-social-proxima[data-tom="warn"] { border-color: var(--sx-st-warn-bd); background: var(--sx-st-warn-bg); }
.sx-social-proxima[data-tom="danger"] { border-color: var(--sx-st-danger-bd); background: var(--sx-st-danger-bg); }
.sx-social-proxima[data-tom="info"] { border-color: var(--sx-st-info-bd); background: var(--sx-st-info-bg); }
.sx-social-proxima[data-tom="success"] { border-color: var(--sx-st-success-bd); background: var(--sx-st-success-bg); }
.sx-social-proxima[data-tom="amber"] :is(strong, p) { color: var(--mpvpc-brand-ember-on-light); }
.sx-social-proxima[data-tom="warn"] :is(strong, p) { color: var(--sx-st-warn); }
.sx-social-proxima[data-tom="danger"] :is(strong, p) { color: var(--sx-st-danger); }
.sx-social-proxima[data-tom="info"] :is(strong, p) { color: var(--sx-st-info); }
.sx-social-proxima[data-tom="success"] :is(strong, p) { color: var(--sx-st-success); }

.sx-social-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px 14px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--sx-line);
}

.sx-social-ficha__campo { min-width: 0; }

.sx-social-ficha dt {
  margin-bottom: 3px;
  color: var(--sx-ink-weak);
  font: 800 10px/1.2 var(--mpvpc-font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sx-social-ficha dd {
  margin: 0;
  color: var(--sx-ink);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.sx-social-checklist {
  padding: 10px 12px;
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
  font-size: 12.5px;
}

.sx-social-checklist ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--sx-ink-mut);
}

.sx-social-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sx-social-acoes--peca {
  padding-top: 12px;
  border-top: 1px solid var(--sx-line);
}

.sx-social-outras ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-social-outras__botao {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
  color: var(--sx-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.sx-social-outras__botao > span:first-child { flex: 1; }
.sx-social-outras__botao svg { color: var(--sx-ink-weak); }

.sx-social-passos {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding-left: 20px;
}

.sx-social-passos li {
  display: grid;
  gap: 2px;
  color: var(--sx-ink-mut);
  font-size: 13px;
  line-height: 1.5;
}

.sx-social-passos strong { color: var(--sx-ink); }

@media (max-width: 1023px) {
  .sx-social-area[data-detalhe="fechado"] .sx-social-mesa__detalhe { display: none; }
  .sx-social-area[data-detalhe="aberto"] .sx-social-area__topo,
  .sx-social-area[data-detalhe="aberto"] .sx-social-mesa__lista { display: none; }
}

@media (min-width: 1024px) {
  .sx-social-mesa { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
  .sx-social-voltar { display: none; }
}

@media (min-width: 1280px) {
  .sx-social-mesa { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
}

@media (min-width: 1440px) {
  .sx-kpi-grid.sx-social-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .sx-shell .sx-kpi-grid.sx-social-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sx-social-filtros { display: none; }
  .sx-social-filtrar { display: block; margin-left: auto; }
  .sx-social-acoes > .sx-btn { flex: 1 1 100%; min-height: 44px; }
  .sx-social-faixa-longa { display: none; }
  .sx-social-faixa-curta { display: inline; }
}

/* O tema escuro não redefine --sx-st-neutral (2,1:1 sobre o cartão; pendência das waves 2 e 3) nem os
   tons info e warn: o aviso ficava claro e o botão dentro dele (texto claro do tema escuro) sumia.
   AIDEV-TODO: apagar este bloco quando o DS levar neutral, info e warn para body.theme-dark. */
body.theme-dark .sx-social {
  --sx-st-neutral: #B7B1A4;
  --sx-st-neutral-bd: #3A3733;
  --sx-st-info: #93C1E4;
  --sx-st-info-bg: #13202B;
  --sx-st-info-bd: #29435A;
  --sx-st-warn: #E3B35C;
  --sx-st-warn-bg: #2A2112;
  --sx-st-warn-bd: #4F3D1C;
}

/* Sub do KPI em duas frases que não se partem: "publicações por rede" e "em N peças". */
.sx-social-kpi-sub > span { white-space: nowrap; }

/* ============================================================
   PRESENÇA NO GOOGLE (redesenho wave 11a, 25/09/2026) — #/google-business
   Visão geral em cartões com fonte e unidade de cada número; abas pelo FilterTabs do kit.
   No celular a faixa de abas rola na horizontal dentro dela mesma, sem rolar a página.
   AIDEV-NOTE: o selo das abas é aria-hidden; o nome acessível fica só "Avaliações" (smoke key-flows).
   ============================================================ */
.sx-gbp-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.sx-gbp-cabecalho__sync {
  display: grid;
  gap: 2px;
  color: var(--sx-ink-mut);
  font-size: 12px;
  line-height: 1.35;
}

.sx-gbp-perfil__nota { text-align: right; }

.sx-gbp-perfil__nota > div {
  margin-top: 3px;
  color: var(--sx-ink-weak);
  font-size: 11.5px;
}

.sx-gbp-abas {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-gbp-abas .sx-filter-tabs__option,
.sx-seo-modos .sx-filter-tabs__option {
  min-height: 44px;
  font-size: 13.5px;
}

.sx-gbp-selo {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 7px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: var(--sx-st-amber-bg);
  color: var(--mpvpc-brand-ember-on-light);
  font-size: 11px;
  font-weight: 700;
}

.sx-gbp-visao { display: grid; gap: 16px; }

.sx-gbp-grade {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

.sx-gbp-grade--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-gbp-grade--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sx-gbp-cartao {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 12px;
}

.sx-gbp-cartao__topo {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
}

.sx-gbp-cartao__icone {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--sx-st-amber-bg);
  color: var(--mpvpc-brand-ember-on-light);
}

.sx-gbp-cartao__titulo {
  margin: 0;
  color: var(--sx-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.sx-gbp-cartao__sub,
.sx-gbp-cartao__valor-sub {
  margin: 2px 0 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.45;
}

.sx-gbp-cartao__linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sx-gbp-cartao__nota {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--sx-line);
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.45;
}

.sx-gbp-nota {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sx-gbp-nota strong,
.sx-gbp-score strong,
.sx-gbp-dupla strong {
  color: var(--sx-ink);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sx-gbp-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.sx-gbp-score span {
  color: var(--sx-ink-mut);
  font-size: 16px;
  font-weight: 700;
}

.sx-gbp-dupla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sx-gbp-dupla > div { display: grid; gap: 4px; }

.sx-gbp-dupla > div + div {
  padding-left: 12px;
  border-left: 1px solid var(--sx-line);
}

.sx-gbp-dupla span { color: var(--sx-ink-mut); font-size: 12.5px; }

.sx-gbp-dupla [data-alerta] strong,
.sx-gbp-dupla [data-alerta] span { color: var(--sx-st-danger); }

.sx-gbp-distribuicao,
.sx-gbp-dimensoes {
  display: grid;
  gap: 7px;
}

.sx-gbp-distribuicao__linha,
.sx-gbp-dimensoes__linha {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  color: var(--sx-ink-mut);
  font-size: 12px;
}

.sx-gbp-dimensoes__linha {
  grid-template-columns: 92px minmax(0, 1fr) 36px;
  font-weight: 600;
}

.sx-gbp-distribuicao__linha > :last-child,
.sx-gbp-dimensoes__linha > :last-child { text-align: right; }

.sx-gbp-metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sx-gbp-metricas__item {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.sx-gbp-metricas__item + .sx-gbp-metricas__item {
  padding-left: 12px;
  border-left: 1px solid var(--sx-line);
}

.sx-gbp-metricas__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-gbp-metricas__item strong {
  color: var(--sx-ink);
  font-size: 24px;
  font-weight: 800;
}

.sx-gbp-metricas__delta {
  color: var(--sx-st-success);
  font-size: 12px;
  font-weight: 700;
}

.sx-gbp-metricas__delta[data-dir="down"] { color: var(--sx-st-danger); }

.sx-gbp-legenda {
  margin: 0 0 12px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.5;
}

.sx-gbp-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 10px;
}

/* AIDEV-NOTE: "Sua resposta" sem side-tab: surface-2, borda fina inteira e ícone do kit (hook de design). */
.sx-gbp-resposta {
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  background: var(--sx-surface-2);
}

.sx-gbp-resposta__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sx-gbp-resposta__texto {
  margin: 0;
  color: var(--sx-ink-mut);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .sx-gbp-grade--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .sx-gbp-grade--tres,
  .sx-gbp-grade--dois { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .sx-gbp-metricas { grid-template-columns: minmax(0, 1fr); }

  .sx-gbp-metricas__item + .sx-gbp-metricas__item {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid var(--sx-line);
    border-left: 0;
  }

  .sx-gbp-perfil__nota { text-align: left; }
}

/* ============================================================
   SEO & CONTEÚDO (redesenho wave 11a, 25/09/2026) — #/seo
   Modos por ?modo= (Visão geral, Landing pages, GA4, Search Console). Cada cartão diz a sua base:
   LPs sem período e de todas as origens, GA4 de todos os canais, Search Console orgânico com atraso.
   ============================================================ */
.sx-seo-periodo {
  margin: -12px 0 14px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.5;
}

.sx-seo-lido { color: var(--sx-ink-mut); font-size: 12px; }

.sx-seo-modos {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-seo-cartao { min-width: 0; }

.sx-seo-cartao__topo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sx-seo-cartao__titulo {
  margin: 0;
  color: var(--sx-ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.sx-seo-cartao__sub {
  margin: 4px 0 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.45;
}

.sx-seo-lps-resumo { margin-bottom: 16px; }

.sx-seo-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 16px;
  margin: 14px 0 0;
}

.sx-seo-numeros > div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--sx-surface-2);
}

.sx-seo-numeros dt {
  color: var(--sx-ink-mut);
  font-size: 12px;
  font-weight: 650;
}

.sx-seo-numeros dd { margin: 0; }

.sx-seo-numeros dd.tnum {
  margin-top: 4px;
  color: var(--sx-ink);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sx-seo-numeros .sx-seo-numeros__hint {
  margin-top: 2px;
  color: var(--sx-ink-weak);
  font-size: 11.5px;
}

.sx-seo-numeros--fonte {
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  margin-bottom: 12px;
}

.sx-seo-fonte {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.sx-seo-fonte > .sx-btn { justify-self: start; }

.sx-seo-fonte__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.sx-seo-grade {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

.sx-seo-grade--dois {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.sx-seo-grade--lateral { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }

.sx-seo-termos { margin-bottom: 16px; }

.sx-seo-legenda-tabela {
  padding: 10px 14px 0;
  caption-side: top;
  color: var(--sx-ink-weak);
  font-size: 11.5px;
  text-align: left;
}

@media (max-width: 1100px) {
  .sx-seo-grade--dois,
  .sx-seo-grade--lateral { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .sx-shell .sx-filter-tabs.sx-seo-modos,
  .sx-shell .sx-filter-tabs.sx-gbp-abas { flex-wrap: nowrap; }

  .sx-seo-periodo { margin-top: 0; }
}

/* AIDEV-TODO: mesmos tons escuros de Mídias (neutral, info, warn) até o DS corrigir body.theme-dark. */
body.theme-dark .sx-gbp,
body.theme-dark .sx-seo {
  --sx-st-neutral: #B7B1A4;
  --sx-st-neutral-bd: #3A3733;
  --sx-st-info: #93C1E4;
  --sx-st-info-bg: #13202B;
  --sx-st-info-bd: #29435A;
  --sx-st-warn: #E3B35C;
  --sx-st-warn-bg: #2A2112;
  --sx-st-warn-bd: #4F3D1C;
}

/* ============================================================
   REFINAMENTO VISUAL v3 — 2026-09-04
   Camada global aplicada por token e por primitiva compartilhada
   (AppShell, Btn, Card, KpiCard, PageHeader, campos, tabelas).
   AIDEV-NOTE: nada aqui usa !important fora dos breakpoints; o
   estilo inline das telas continua vencendo onde existe.
   ============================================================ */

/* Splash da sessão (antes do primeiro dado): mesma marca do #boot, sem texto cru. */
.sx-boot-splash {
  min-height: 100%;
  display: grid;
  place-items: center;
  background: var(--sx-canvas);
}

.sx-boot-splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.sx-boot-splash__mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--mpvpc-brand-ember);
  color: var(--mpvpc-brand-black);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.04em;
}

.sx-boot-splash__text {
  color: var(--sx-ink-weak);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Topbar clara: título da rota em tinta, busca em superfície secundária. */
.sx-topbar {
  background: var(--sx-topbar-bg);
  border-bottom: 1px solid var(--sx-topbar-line);
}

.sx-topbar .sx-icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--sx-radius-sm);
  background: transparent;
  color: var(--sx-ink-mut);
  flex: 0 0 auto;
  cursor: pointer;
  transition: background 140ms var(--mpvpc-motion-ease), color 140ms var(--mpvpc-motion-ease);
}

.sx-topbar .sx-icon-btn:hover {
  background: var(--sx-surface-2);
  color: var(--sx-ink);
}

.sx-topbar .sx-icon-btn[aria-current="page"] {
  background: var(--sx-st-amber-bg);
  color: var(--mpvpc-brand-ember-on-light);
}

.sx-topbar-search input {
  transition: border-color 140ms var(--mpvpc-motion-ease), box-shadow 140ms var(--mpvpc-motion-ease), background 140ms;
}

.sx-topbar-search input:focus-visible {
  outline: none;
  border-color: var(--mpvpc-brand-ember);
  box-shadow: var(--sx-ring);
  background: var(--sx-surface);
}

.sx-topbar-search input::placeholder {
  color: var(--sx-ink-weak);
}

/* Chave compacta do kit (ToggleSwitch compacto, 01/10/2026): a chave claro/escuro do cabeçalho, lado direito.
   Trilha com os dois ícones; o botão desliza para o lado escolhido e o ícone dele fica em âmbar.
   AIDEV-NOTE: só tokens do DS (legível nos dois temas, medido em tests/tema-chave-cabecalho.test.js). O estado não
   depende só da cor: o botão (borda --sx-ink-weak, 5:1 sobre a trilha) muda de lado. As cores forçadas da chave
   ficam depois do bloco forced-colors do vidro líquido (o teste dele lê o primeiro bloco do arquivo). */
.sx-chave {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 44px;
  height: 36px;
  padding: 0 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sx-ink-weak);
  font: inherit;
  cursor: pointer;
}
.sx-chave:disabled { opacity: 0.55; cursor: not-allowed; }
.sx-chave__trilha {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 56px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--sx-line-strong);
  border-radius: 999px;
  background: var(--sx-surface-2);
  transition: border-color 140ms var(--mpvpc-motion-ease);
}
@media (hover: hover) { .sx-chave:hover .sx-chave__trilha { border-color: var(--sx-ink-weak); } } /* no toque não gruda */
.sx-chave__botao {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--sx-ink-weak);
  border-radius: 999px;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-card);
  transition: transform 180ms var(--mpvpc-motion-ease);
}
.sx-chave[aria-checked="true"] .sx-chave__botao { transform: translateX(26px); }
.sx-chave__icone {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--sx-ink-weak);
  transition: color 140ms var(--mpvpc-motion-ease);
}
.sx-chave[aria-checked="false"] .sx-chave__icone[data-lado="desligado"],
.sx-chave[aria-checked="true"] .sx-chave__icone[data-lado="ligado"] { color: var(--mpvpc-brand-ember-on-light); }
/* Foco de teclado no desenho da trilha (mesmo contorno âmbar do :focus-visible global). */
.sx-chave:focus-visible { outline: none; }
.sx-chave:focus-visible .sx-chave__trilha { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: 2px; }
@media (max-width: 680px) {
  .sx-chave { height: 44px; } /* alvo de toque de 44 px no celular */
}
@media (prefers-reduced-motion: reduce) {
  .sx-chave__trilha, .sx-chave__botao, .sx-chave__icone { transition: none; }
}

/* Sidebar: rolagem própria e divisórias discretas entre grupos. */
.sx-sidebar nav {
  scrollbar-width: thin;
}

.sx-sidebar nav section + section {
  margin-top: 4px;
}

/* Botões: foco visível por anel, pressionado com micro-deslocamento, hover sutil. */
.sx-btn {
  transition: filter 120ms var(--mpvpc-motion-ease), box-shadow 120ms var(--mpvpc-motion-ease), transform 80ms var(--mpvpc-motion-ease), background 120ms;
}

.sx-btn:hover:not(:disabled) {
  filter: brightness(0.97);
  box-shadow: 0 1px 2px rgba(15, 15, 14, 0.06);
}

.sx-btn:active:not(:disabled) {
  transform: translateY(0.5px);
  box-shadow: none;
}

.sx-btn:focus-visible {
  outline: none;
  box-shadow: var(--sx-ring);
}

/* Campos de texto: anel âmbar no foco, mesmo onde o estilo inline zera o outline. */
.sx-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible,
.sx-shell textarea:focus-visible,
.sx-shell select:focus-visible,
.sistema-login input:focus-visible {
  outline: none;
  box-shadow: var(--sx-ring);
}

.sx-shell input::placeholder,
.sx-shell textarea::placeholder,
.sistema-login input::placeholder {
  color: var(--sx-ink-weak);
  opacity: 1;
}

/* Cards: só o clicável reage ao mouse. */
.sx-card {
  transition: border-color 140ms var(--mpvpc-motion-ease), box-shadow 140ms var(--mpvpc-motion-ease);
}

/* Linha de ferramentas da tela (PageHeader). AIDEV-NOTE: regra do dono (01/10/2026): o nome da tela fica só no
   topo; aqui ficam o rótulo discreto (hora da leitura, contagem) à esquerda e as ações à direita, numa linha. */
.sx-page-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
  margin-bottom: var(--sx-s3);
}

/* Base 0: as ações ficam na mesma linha e o rótulo quebra antes delas. */
.sx-page-header__inicio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  flex: 1 1 0%;
  min-width: min-content;
}

.sx-page-header__rotulo {
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.4;
}

.sx-page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* Cascas que já tinham uma barra própria (Central, Crescimento, Marketing pago): a linha de ferramentas É a barra,
   com a linha de baixo que separa a casca do conteúdo. As margens de antes contavam com o título acima. */
.sx-central-casca > .sx-page-header,
.sx-cresc-casca > .sx-page-header {
  margin: 0 0 16px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-central-casca > .sx-page-header { padding-bottom: 8px; }
.sx-central-casca > .sx-page-header .sx-central-canal { margin-left: 0; }
.sx-central-casca > .sx-page-header .sx-page-header__rotulo { margin-left: auto; }

.sx-cresc-casca > .sx-page-header { padding-bottom: 6px; }
.sx-cresc-casca > .sx-page-header .sx-cresc-hora { margin: 0; padding: 0; }

/* Só o nome que o topo não mostra (campanha aberta) aparece aqui, no tamanho de seção. */
.sx-page-header__titulo {
  margin: 0;
  min-width: 0;
  color: var(--sx-ink);
  font-size: var(--sx-fs-section-title, 17px);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Sem rótulo nem ação, a linha de ferramentas é só o contêiner do h1 do leitor de tela: não ocupa espaço nem
   vira item de flex/grid do pai (fica fora do fluxo, como o .sr-only). */
header.sx-page-header.sx-page-header--so-leitor { margin: -1px !important; padding: 0 !important; border: 0 !important; }

/* Abas do kit com as ações da tela na mesma linha (Tabs `extra`). AIDEV-NOTE: regra do dono (01/10/2026): as ações
   não ganham linha própria acima das abas; no celular sobem para cima delas, sem rolagem lateral. */
.sx-tabs-linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
}

.sx-tabs-linha > [role="tablist"] { flex: 0 1 auto; }

.sx-tabs-linha__extra {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  padding-bottom: 6px;
}

.sx-tabs-linha__extra .sx-page-header__rotulo { margin-right: 4px; }

@media (max-width: 680px) {
  .sx-tabs-linha__extra { order: -1; width: 100%; justify-content: flex-start; margin-left: 0; padding-bottom: 4px; }
  .sx-tabs-linha__extra .sx-btn { min-height: 42px; }
}

.sx-section-head {
  margin-bottom: var(--sx-s3);
}

.sx-tabs-linha__extra .sx-btn,
.sx-page-header__actions .sx-btn,
.sx-section-head__actions .sx-btn {
  white-space: nowrap;
}

/* Tabelas: cabeçalho fixo dentro do card rolável e hover de linha discreto. */
.sx-table-cards thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sx-surface-2);
}

.sx-table-cards tbody tr:hover > td {
  background: color-mix(in oklab, var(--sx-surface-2) 70%, transparent);
}

.sx-table-cards td,
.sx-table-cards th {
  font-variant-numeric: tabular-nums;
}

/* KPI: grade fluida em notebooks quando há mais de quatro cartões. */
@media (max-width: 1360px) {
  .sx-kpi-grid {
    grid-template-columns: repeat(min(var(--sx-kpi-columns, 4), 3), minmax(0, 1fr));
  }
}

/* Tablet: menu em gaveta e respiro menor da página. */
@media (max-width: 920px) {
  .sx-main {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Movimento reduzido: sem transições de chrome. */
/* v3 — celular: coluna de grid nunca herda o min-content do conteudo. Sem isto o Cockpit estourava
   140px e a Sala de Operacoes 117px em 390px (QA 2026-09-05), porque "1fr" = minmax(auto, 1fr). */
@media (max-width: 680px) {
  .sx-shell .sx-two-col,
  .sx-shell .sx-kpi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .sx-shell .sx-card {
    min-width: 0;
    max-width: 100%;
  }
  .sx-shell .sx-filter-tabs {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-shell, .sx-sidebar, .sx-btn, .sx-card, .sx-mobile-nav button, .sx-topbar .sx-icon-btn {
    transition: none !important;
  }
}

/* ============================================================
   MARKETING PAGO — redesenho wave 7a (25/09/2026). Marketing pago (#/ads, abas por ?tab=) e o assistente de
   rascunho (#/campaign-builder) com a mesma casca (MarketingPagoCabecalho) e as mesmas contas (features/ads/area.js).
   Só arranjo: componentes, cores e tipografia continuam do kit e dos tokens. Prefixo .sx-mpago-* num trecho que as
   outras waves não tocam (entre o prefers-reduced-motion e o tema escuro).
   ============================================================ */
.sx-mpago { max-width: 1440px; margin: 0; }

/* Nome de campanha vem do rascunho e pode ter palavra longa: título quebra em vez de sair cortado pela borda. */
.sx-mpago h1,
.sx-mpago h2,
.sx-mpago h3 { overflow-wrap: anywhere; }

.sx-mpago-casca { margin-bottom: 2px; }

.sx-mpago-hora { color: var(--sx-ink-weak); }

/* Abas como na Central e em Hoje: a faixa senta na linha que separa a casca do conteúdo; o aviso de governança
   fica à direita (no celular, embaixo). */
.sx-mpago-abas-linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: -6px 0 18px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-mpago-abas { flex: 0 1 auto; min-width: 0; }

.sx-mpago-abas .sx-filter-tabs__option {
  min-height: 46px;
  font-size: 13.5px;
}

.sx-mpago-guarda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 470px;
  margin: 0 0 8px;
  padding: 7px 11px;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-st-amber-bg);
  color: var(--sx-ink);
  font-size: 12px;
  line-height: 1.4;
}

.sx-mpago-guarda svg { color: var(--mpvpc-brand-ember-on-light); }

/* Título só no topo (dono, 01/10/2026): a linha das abas é a linha de ferramentas (PageHeader) da área. As abas
   sentam na linha de baixo; aviso de aprovação, hora da leitura e ações ficam à direita delas. */
.sx-mpago-casca > .sx-page-header.sx-mpago-abas-linha {
  align-items: flex-end;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--sx-line);
}
.sx-mpago-abas-linha .sx-page-header__inicio { align-items: flex-end; gap: 6px 16px; }
.sx-mpago-abas-linha .sx-page-header__actions { padding-bottom: 8px; }

/* Na largura do computador, abas + aviso numa linha: o aviso quebra o texto em vez de empurrar as ações. */
@media (min-width: 1100px) {
  .sx-mpago-abas-linha .sx-page-header__inicio { flex-wrap: nowrap; }
  .sx-mpago-abas-linha .sx-mpago-abas { flex: 0 0 auto; }
  .sx-mpago-abas-linha .sx-mpago-guarda { flex: 0 1 auto; min-width: 220px; }
}

.sx-mpago-aviso { margin-bottom: 12px; }

.sx-mpago-acoes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Barra da aba Campanhas: período, plataforma, sincronizar e a importação de cada plataforma. */
.sx-mpago-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.sx-mpago-barra__filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.sx-mpago-plataforma {
  padding: 0 4px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
}

@media (min-width: 681px) {
  .sx-mpago-plataforma .sx-filter-tabs__option { min-height: 32px !important; }
}

.sx-mpago-importacao {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--sx-ink-weak);
  font-size: 12px;
}

.sx-mpago-importacao li,
.sx-mpago-importacao--vazia {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

/* Cinco sinais: 5 lado a lado no monitor, 3 + 2 de 681 a 1360 px (o painel-extra forçava 2 abaixo de 1080 px)
   e 1 coluna no celular, pela regra de 05/09 que acabou com o estouro de 140 px. */
.sx-mpago-kpis { margin-bottom: 14px; }

@media (min-width: 681px) and (max-width: 1360px) {
  .sx-shell .sx-kpi-grid.sx-mpago-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Faixa de métricas da plataforma. O Card põe o padding inline: o respiro vem do token. */
.sx-mpago-faixa { --sx-pad-card: 14px 18px; margin-bottom: 16px; }

.sx-mpago-faixa__grade {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.sx-mpago-faixa__item { min-width: 0; }

.sx-mpago-faixa__rotulo {
  margin-bottom: 4px;
  color: var(--sx-ink-weak);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sx-mpago-faixa__valor {
  color: var(--sx-ink);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.sx-mpago-faixa__valor[data-positivo="sim"] { color: var(--sx-st-success); }

.sx-mpago-faixa__sub {
  margin-top: 2px;
  color: var(--sx-ink-weak);
  font-size: 11px;
  line-height: 1.35;
}

/* No celular a faixa entra no Accordion "Mais métricas" (imagem 52); no monitor, fica aberta. */
.sx-mpago-metricas-celular,
.sx-mpago-previa-celular { display: none; }

.sx-mpago-metricas-celular,
.sx-mpago-previa-celular {
  padding: 0 12px;
  border: 1px solid var(--sx-card-border) !important;
  border-radius: var(--sx-radius);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
}

.sx-mpago-metricas-celular section,
.sx-mpago-previa-celular section { border-bottom: 0 !important; }

.sx-mpago-metricas-celular [role="region"],
.sx-mpago-previa-celular [role="region"] { padding: 0 0 12px !important; }

.sx-mpago-metricas-celular .sx-mpago-faixa { margin-bottom: 0; box-shadow: none; }

/* Tabela de campanhas: topo com o Data Health médio; rolagem só dentro do cartão. */
.sx-mpago-tabela { overflow: hidden; }

.sx-mpago-tabela__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-mpago-tabela__titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}

.sx-mpago-tabela__titulo h2 {
  margin: 0;
  color: var(--sx-ink);
  font-size: 15px;
  font-weight: 700;
}

.sx-mpago-tabela__titulo span {
  color: var(--sx-ink-weak);
  font-size: 12px;
}

.sx-mpago-tabela__rolagem { overflow-x: auto; }

.sx-mpago-tabela .sx-mpago-vazio {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sx-mpago-saude {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-mpago-saude strong { font-weight: 750; }

.sx-mpago-dica {
  border-bottom: 1px dotted var(--sx-ink-weak);
  cursor: help;
}

.sx-mpago-marca {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}

.sx-mpago-marca--google {
  border-color: var(--sx-st-info-bd);
  background: var(--sx-st-info-bg);
  color: var(--sx-st-info);
}

.sx-mpago-marca--meta {
  border-color: var(--sx-st-neutral-bd);
  background: var(--sx-st-neutral-bg);
  color: var(--sx-st-neutral);
}

.sx-mpago-marca--lg {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  font-size: 18px;
}

.sx-mpago-nota {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.45;
}

.sx-mpago-nota svg { margin-top: 1px; }

.sx-mpago-glossario { margin: 0; display: grid; gap: 14px; }

.sx-mpago-glossario dt { color: var(--sx-ink); font-size: 13px; font-weight: 700; }

.sx-mpago-glossario dd {
  margin: 3px 0 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Abas Rascunhos da IA e Aprovações: listas de linhas clicáveis que só navegam. */
.sx-mpago-resumo {
  margin: 0 0 16px;
  color: var(--sx-ink-mut);
  font-size: 13px;
  line-height: 1.5;
}

.sx-mpago-secao { margin-bottom: 22px; }

.sx-mpago-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sx-mpago-item {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 14px 16px;
  border: 1px solid var(--sx-card-border);
  border-radius: var(--sx-radius);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-mpago-item:hover { border-color: var(--sx-line-strong); }

.sx-mpago-item__texto {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sx-mpago-item__titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--sx-ink);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sx-mpago-item__meta {
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Selo, ação e seta andam juntos: quando a linha quebra, o grupo desce alinhado à direita. */
.sx-mpago-item__lado {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 10px;
  flex: 0 1 auto;
  margin-left: auto;
  color: var(--sx-ink-weak);
}

.sx-mpago-item__acao {
  color: var(--mpvpc-brand-ember-on-light);
  font-size: 12.5px;
  font-weight: 650;
}

/* Assistente: fluxo, passos, IA em construção, formulário e prévia. */
.sx-mpago-fluxo,
.sx-mpago-envio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: var(--sx-radius);
  background: var(--sx-st-amber-bg);
  color: var(--sx-ink);
}

.sx-mpago-fluxo { margin-bottom: 14px; }

.sx-mpago-fluxo svg,
.sx-mpago-envio svg { flex: 0 0 auto; margin-top: 1px; color: var(--mpvpc-brand-ember-on-light); }

.sx-mpago-fluxo strong { display: block; font-size: 13px; line-height: 1.4; }

.sx-mpago-fluxo span {
  display: block;
  margin-top: 2px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.45;
}

.sx-mpago-envio p { margin: 0; font-size: 12.5px; line-height: 1.5; }

.sx-mpago-passos-ancora { scroll-margin-top: 12px; }

.sx-mpago-passos {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 0;
}

.sx-mpago-passo { display: flex; align-items: center; }

.sx-mpago-passo + .sx-mpago-passo::before {
  content: "";
  width: 28px;
  height: 1px;
  margin: 0 10px;
  background: var(--sx-line-strong);
}

.sx-mpago-passo button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sx-ink-mut);
  font: inherit;
  cursor: pointer;
}

.sx-mpago-passo__numero {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--sx-line-strong);
  border-radius: 999px;
  background: var(--sx-surface);
  color: var(--sx-ink-mut);
  font-size: 12px;
  font-weight: 700;
}

.sx-mpago-passo[data-estado="atual"] .sx-mpago-passo__numero {
  border-color: var(--mpvpc-brand-ember);
  background: var(--mpvpc-brand-ember);
  color: var(--mpvpc-cta-fg);
}

.sx-mpago-passo[data-estado="feito"] .sx-mpago-passo__numero {
  border-color: var(--sx-st-success-bd);
  background: var(--sx-st-success-bg);
  color: var(--sx-st-success);
}

.sx-mpago-passo__rotulo {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.sx-mpago-passo[data-estado="atual"] .sx-mpago-passo__rotulo { color: var(--sx-ink); font-weight: 700; }

.sx-mpago-ia {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--sx-ai-bd);
  border-radius: var(--sx-radius);
  background: var(--sx-ai-bg);
}

.sx-mpago-ia__texto {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sx-mpago-ia__texto strong { color: var(--sx-ink); font-size: 13px; }

.sx-mpago-ia__texto span { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }

.sx-mpago-assistente {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}

.sx-mpago-assistente > * { min-width: 0; }

/* AIDEV-NOTE: coluna flex, não grid — item de grid só gruda na própria linha e o rodapé fixo pararia de fixar. */
.sx-mpago-formulario__corpo { display: flex; flex-direction: column; gap: 16px; }

.sx-mpago-etapa { gap: 16px; grid-template-columns: minmax(0, 1fr); }

.sx-mpago-etapa__cabeca h2 {
  margin: 0;
  color: var(--sx-ink);
  font-size: 16px;
  font-weight: 750;
}

.sx-mpago-etapa__cabeca p {
  margin: 4px 0 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.45;
}

.sx-mpago-campo { display: grid; gap: 8px; min-width: 0; }

.sx-mpago-campo__rotulo {
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  font-weight: 600;
}

.sx-mpago-campo__ajuda { display: block; margin-top: 6px; color: var(--sx-ink-weak); font-size: 12px; line-height: 1.4; }

.sx-mpago-opcoes { display: grid; gap: 10px; }

.sx-mpago-opcao-dica,
.sx-mpago-opcao-involucro { display: flex; width: 100%; min-width: 0; }

.sx-mpago-opcao {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1.5px solid var(--sx-line-strong);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-mpago-opcao[data-selecionada="sim"] {
  border-color: var(--mpvpc-brand-ember);
  background: var(--sx-st-amber-bg);
}

/* Opção que o publicador não executa: tracejada e sem opacidade, para o motivo continuar legível. */
.sx-mpago-opcao:disabled {
  cursor: not-allowed;
  border-style: dashed;
  background: var(--sx-surface-2);
}

.sx-mpago-opcao:disabled .sx-mpago-opcao__icone { background: var(--sx-surface); color: var(--sx-ink-weak); }

.sx-mpago-opcao__icone {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
}

.sx-mpago-opcao[data-selecionada="sim"] .sx-mpago-opcao__icone { color: var(--mpvpc-brand-ember-on-light); }

.sx-mpago-opcao__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.sx-mpago-opcao__rotulo { color: var(--sx-ink); font-size: 14px; font-weight: 700; }

.sx-mpago-opcao__desc { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.4; }

.sx-mpago-opcao__selo { margin-top: 2px; }

.sx-mpago-linhas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }

.sx-mpago-linhas__linha { display: flex; align-items: center; gap: 7px; }

.sx-mpago-linhas__contador {
  width: 44px;
  flex: 0 0 auto;
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.sx-mpago-linhas__linha[data-excede="sim"] .sx-mpago-linhas__contador { color: var(--sx-st-danger); }

.sx-mpago-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.sx-mpago-chips__novo { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }

.sx-mpago-chip {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px 3px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.sx-mpago-chip button {
  min-width: 18px;
  min-height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.sx-mpago-chip--palavra {
  border-color: var(--sx-st-success-bd);
  background: var(--sx-st-success-bg);
  color: var(--sx-ink);
}

.sx-mpago-chip--negativa {
  border-color: var(--sx-st-danger-bd);
  background: var(--sx-st-danger-bg);
  color: var(--sx-st-danger);
}

.sx-mpago-grupos { display: grid; gap: 14px; }

.sx-mpago-grupo { --sx-pad-card: 15px 17px; }

.sx-mpago-grupo__cabeca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.sx-mpago-grupo__cabeca h3 {
  margin: 0;
  color: var(--sx-ink);
  font-size: 13.5px;
  font-weight: 700;
}

.sx-mpago-grupo__numero {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: 6px;
  background: var(--sx-st-amber-bg);
  color: var(--mpvpc-brand-ember-on-light);
  font-size: 11.5px;
  font-weight: 800;
}

.sx-mpago-grupo__ajuda {
  margin: 0 0 11px;
  color: var(--sx-ink-weak);
  font-size: 11.5px;
}

.sx-mpago-grupo__rotulo {
  margin-bottom: 8px;
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sx-mpago-grupo__negativas {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px dashed var(--sx-line);
}

.sx-mpago-orcamento { display: grid; gap: 10px; }

.sx-mpago-orcamento__valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--sx-ink-mut);
  font-size: 14px;
}

.sx-mpago-orcamento__valor .tnum {
  color: var(--sx-ink);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.sx-mpago-orcamento__total {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-mpago-orcamento__total strong { color: var(--sx-ink); }

.sx-mpago-resumo-final { margin: 0; display: grid; }

.sx-mpago-resumo-final > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--sx-line);
}

.sx-mpago-resumo-final > div:first-child { border-top: 0; }

.sx-mpago-resumo-final dt { flex: 0 0 auto; color: var(--sx-ink-mut); font-size: 13px; }

.sx-mpago-resumo-final dd {
  min-width: 0;
  margin: 0;
  color: var(--sx-ink);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.sx-mpago-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.sx-mpago-rodape__acoes {
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.sx-mpago-revisao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; overflow-wrap: anywhere; }

.sx-mpago-revisao__selo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.sx-mpago-decisao__titulo {
  margin: 0 0 8px;
  color: var(--sx-ink);
  font-size: 13.5px;
  font-weight: 800;
}

.sx-mpago-decisao .sx-mpago-acoes { margin-top: 12px; }

.sx-mpago-decisao__nota {
  margin: 10px 0 0;
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.5;
}

.sx-mpago-erro {
  margin: 8px 0 0;
  color: var(--sx-st-danger);
  font-size: 12.5px;
  font-weight: 650;
}

.sx-mpago-decidido { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* Tema escuro: Marketing pago clareia o neutro só dentro dela, como a Central e Hoje. O perigo ("Falhou",
   "Meta Ads · falhou") usa o rosa escuro do DS desde 29/09; apontar para a borda escura apagaria o texto. */
body.theme-dark .sx-mpago {
  --sx-st-neutral: var(--sx-ink-mut);
  --sx-st-neutral-bd: var(--sx-line-strong);
}

body.theme-dark .sx-mpago .sx-mpago-chip--palavra { background: var(--sx-surface-2); }

body.theme-dark .sx-mpago .sx-mpago-chip--negativa,
body.theme-dark .sx-mpago .sx-mpago-erro { color: var(--sx-ink); }

@media (max-width: 1360px) {
  .sx-mpago-faixa__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Até 1180 px a prévia vira o Accordion "Prévia da campanha", abaixo do formulário (imagem 54). */
@media (max-width: 1180px) {
  .sx-mpago-assistente { grid-template-columns: minmax(0, 1fr); }
  .sx-mpago-previa { display: none; }
  .sx-mpago-previa-celular { display: block; }
}

@media (max-width: 680px) {
  .sx-mpago-abas-linha { flex-direction: column; align-items: stretch; gap: 0; }
  .sx-shell .sx-mpago-abas { flex-wrap: nowrap !important; }
  .sx-mpago-guarda { max-width: none; margin: 8px 0 10px; }
  .sx-mpago-barra__filtros { width: 100%; }
  .sx-mpago-metricas { display: none; }
  .sx-mpago-metricas-celular { display: block; margin-bottom: 16px; }
  .sx-mpago-faixa__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-mpago-item { padding: 12px 14px; }

  /* Passos com o rótulo embaixo do número, em cinco colunas iguais. */
  .sx-mpago-passos { flex-wrap: nowrap; align-items: flex-start; gap: 4px; }
  .sx-mpago-passo { flex: 1 1 0; min-width: 0; }
  .sx-mpago-passo + .sx-mpago-passo::before { display: none; }
  .sx-mpago-passo button { width: 100%; flex-direction: column; gap: 4px; min-height: 52px; }
  .sx-mpago-passo__rotulo { max-width: 100%; font-size: 11px; line-height: 1.2; text-align: center; white-space: normal; overflow-wrap: anywhere; }

  /* Voltar e Continuar fixos no rodapé, colados na barra inferior do celular (.sx-mobile-nav, 65 px + área segura).
     AIDEV-NOTE: o inset conta da borda do conteúdo do .sx-main (padding-bottom 104 px no celular); mudou lá, refaça. */
  .sx-mpago-rodape {
    position: sticky;
    bottom: calc(65px + env(safe-area-inset-bottom, 0px) - 104px);
    z-index: 5;
    margin: 0 calc(-1 * var(--sx-pad-card, 16px));
    padding: 10px var(--sx-pad-card, 16px);
    border-top: 1px solid var(--sx-line);
    background: var(--sx-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* ============================================================
   DARK THEME (toggle) — área de trabalho escura também
   ============================================================ */
body.theme-dark {
  --sx-topbar-bg:  rgba(22, 21, 20, 0.72);
  --sx-topbar-line:rgba(242, 238, 227, 0.07);
  --sx-canvas:    #0C0C0B;
  --sx-surface:   #161514;
  --sx-surface-2: #1C1A18;
  --sx-line:      #2A2826;
  --sx-line-strong:#3A3733;
  --sx-ink:       #F2EEE3;
  --sx-ink-mut:   #B7B1A4;
  --sx-ink-weak:  #938E82;   /* 5.2:1 sobre o vidro escuro (23/09) */

  /* AIDEV-NOTE: todo tom tem tinta, fundo e borda próprios no escuro; herdar do :root dava 1,01 a 2,05:1 (29/09).
     Valores das waves 2a/5a/12a, que remendavam cada tela; tests/ds-contraste-estados.test.js refaz as contas. */
  --sx-st-neutral:    #B7B1A4;
  --sx-st-neutral-bg: #232120;
  --sx-st-neutral-bd: #3A3733;
  --sx-st-amber:      #E8954A;   /* âmbar de texto no escuro: o #A65300 do claro dava 3,4:1 (23/09) */
  --sx-st-amber-bg:   #2A2014;
  --sx-st-amber-bd:   #5A4424;
  --sx-st-success:    #86CFA0;
  --sx-st-success-bg: #13241A;
  --sx-st-success-bd: #2B4A35;
  --sx-st-info:       #93BDE6;
  --sx-st-info-bg:    #13212E;
  --sx-st-info-bd:    #2A4156;
  --sx-st-warn:       #E9B25E;
  --sx-st-warn-bg:    #2B2212;
  --sx-st-warn-bd:    #574421;
  --sx-st-danger:     #F0A197;
  --sx-st-danger-bg:  #2A1717;
  --sx-st-danger-bd:  #5A2C28;
  --sx-ai:            var(--sx-ai-on-dark);   /* o cobre #9E5238 do claro dava 2,9:1 */
  --sx-ai-bg:         #271C17;
  --sx-ai-bd:         #563A2E;

  /* AIDEV-NOTE: única exceção à regra "não redefine --mpvpc-*", só no escuro (01/10, tema automático). O âmbar "sobre
     Osso" (#A65300) colore sobretítulo, item escolhido e ícone em 48 pontos do kit e das telas e dava 3,2 a 3,5:1 no
     escuro; aqui ele aponta para o âmbar de texto do escuro. No claro o token da marca segue #A65300.
     tests/tema-escuro-aparelho.test.js confere. Era o remendo local de Aprovações/Outbox, agora no DS. */
  --mpvpc-brand-ember-on-light: var(--sx-st-amber);
}

/* ============================================================
   VIDRO SÓBRIO — 2026-09-23 (pedido do dono: glassmorphism em todo o frontend)
   AIDEV-NOTE: o vidro é ESTRUTURAL — superfícies translúcidas com filete de luz e sombra suave
   sobre um fundo Osso com luz ambiente. Nada de manchas coloridas, neon ou azul/roxo: o âmbar
   segue como pontuação (design system v2). Desfoque (backdrop-filter) SÓ onde há conteúdo passando
   por trás (menus, popovers, modal, gaveta, aviso, cabeçalho fixo de tabela, menu no celular). Em
   cartão ele criaria contexto de empilhamento: o menu aberto num cartão sumiria atrás do cartão
   seguinte e um modal desenhado dentro dele ficaria preso. E o fundo liso não tem o que desfocar.
   AIDEV-NOTE: tokens COMPOSTOS moram em `body`, não em `:root`: custom property é calculada onde é
   declarada; no :root a sombra do cartão congelaria os valores do tema claro no tema escuro.
   ============================================================ */
:root {
  /* Luz ambiente do fundo: brasa no alto à esquerda, cobre à direita, sombra grafite embaixo. */
  --sx-canvas-glow-1: rgba(217, 122, 31, 0.08);  /* no alto da área de conteúdo; 0.10 derrubava o âmbar do sobretítulo para 4.46:1 */
  --sx-canvas-glow-2: rgba(184, 105, 74, 0.07);
  --sx-canvas-shade:  rgba(42, 40, 38, 0.02);
  --sx-canvas-top:    #F6F3EC;
  --sx-canvas-bottom: #F2EEE3;   /* Osso oficial */

  /* Vidro claro: branco translúcido sobre o Osso — o cartão fica mais claro que o fundo, sem escurecer
     o fundo (medido: escurecer o Osso derrubava o âmbar do sobretítulo para 3.6:1). */
  --sx-glass-bg:        rgba(255, 255, 255, 0.55);
  --sx-glass-bg-soft:   rgba(255, 255, 255, 0.34);
  --sx-glass-bg-strong: rgba(253, 252, 249, 0.88);
  --sx-glass-sheen:     rgba(255, 255, 255, 0.5);
  --sx-glass-border:    rgba(255, 255, 255, 0.78);
  --sx-glass-edge:      rgba(42, 40, 38, 0.09);
  --sx-glass-light:     rgba(255, 255, 255, 0.9);
  --sx-glass-depth:     rgba(42, 40, 38, 0.24);
  --sx-glass-blur:      blur(20px) saturate(1.35);

  /* Camadas flutuantes (menu, popover, modal, gaveta, aviso) */
  --sx-pop-bg:     rgba(251, 249, 243, 0.86);
  --sx-pop-border: rgba(255, 255, 255, 0.8);
  --sx-pop-edge:   rgba(42, 40, 38, 0.11);
  --sx-pop-depth:  rgba(15, 15, 14, 0.28);
  --sx-pop-blur:   blur(24px) saturate(1.4);
  --sx-scrim:      rgba(15, 15, 14, 0.34);
  --sx-scrim-blur: blur(6px) saturate(1.1);

  /* Campos e botões: vidro fino sobre o cartão. CTA segue o Âmbar oficial; hover #C46B17 (DS v2). */
  --sx-field-bg:              rgba(255, 255, 255, 0.72);
  --sx-btn-ghost-bg:          transparent;
  --sx-btn-secondary-bg:      rgba(255, 255, 255, 0.62);
  --sx-btn-secondary-border:  rgba(42, 40, 38, 0.16);
  --sx-btn-primary-bg:        linear-gradient(180deg, #E0862E 0%, var(--mpvpc-cta-bg) 100%);
  --sx-btn-primary-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(166, 83, 0, 0.22), 0 6px 14px -8px rgba(166, 83, 0, 0.45);

  /* Casca: barra lateral de vidro escuro, topo de vidro claro. */
  --sx-chrome-glass-bg:   rgba(15, 15, 14, 0.9);   /* fiel ao Preto Carvão; 0.86 puxava para marrom */
  --sx-chrome-glass-line: rgba(242, 238, 227, 0.08);
}

body.theme-dark {
  --sx-canvas-glow-1: rgba(217, 122, 31, 0.12);
  --sx-canvas-glow-2: rgba(184, 105, 74, 0.07);
  --sx-canvas-shade:  rgba(0, 0, 0, 0.35);
  --sx-canvas-top:    #100F0E;
  --sx-canvas-bottom: #0A0A09;

  --sx-glass-bg:        rgba(30, 28, 26, 0.62);
  --sx-glass-bg-soft:   rgba(30, 28, 26, 0.4);
  --sx-glass-bg-strong: rgba(24, 22, 21, 0.9);
  --sx-glass-sheen:     rgba(242, 238, 227, 0.04);
  --sx-glass-border:    rgba(242, 238, 227, 0.07);
  --sx-glass-edge:      rgba(0, 0, 0, 0.45);
  --sx-glass-light:     rgba(242, 238, 227, 0.06);
  --sx-glass-depth:     rgba(0, 0, 0, 0.7);

  --sx-pop-bg:     rgba(24, 22, 21, 0.88);
  --sx-pop-border: rgba(242, 238, 227, 0.08);
  --sx-pop-edge:   rgba(0, 0, 0, 0.5);
  --sx-pop-depth:  rgba(0, 0, 0, 0.8);
  --sx-scrim:      rgba(0, 0, 0, 0.5);

  --sx-field-bg:              rgba(12, 12, 11, 0.5);
  --sx-btn-secondary-bg:      rgba(242, 238, 227, 0.06);
  --sx-btn-secondary-border:  rgba(242, 238, 227, 0.14);

  --sx-chrome-glass-bg:   rgba(8, 8, 7, 0.8);
}

/* Compostos: calculados em `body`, com os valores do tema ativo. */
body {
  --sx-canvas-bg:
    radial-gradient(1100px 620px at 34% -14%, var(--sx-canvas-glow-1), transparent 62%),
    radial-gradient(900px 560px at 104% 18%, var(--sx-canvas-glow-2), transparent 60%),
    radial-gradient(1200px 700px at 50% 112%, var(--sx-canvas-shade), transparent 62%),
    linear-gradient(180deg, var(--sx-canvas-top) 0%, var(--sx-canvas-bottom) 100%);
  --sx-card-bg:     linear-gradient(180deg, var(--sx-glass-sheen) 0%, transparent 46%), var(--sx-glass-bg);
  --sx-card-border: var(--sx-glass-border);
  --sx-card-shadow: 0 0 0 1px var(--sx-glass-edge), inset 0 1px 0 var(--sx-glass-light), 0 1px 2px rgba(15, 15, 14, 0.04), 0 12px 32px -16px var(--sx-glass-depth);
  --sx-pop-shadow:  0 0 0 1px var(--sx-pop-edge), inset 0 1px 0 var(--sx-glass-light), 0 18px 48px -12px var(--sx-pop-depth), 0 4px 12px rgba(15, 15, 14, 0.06);
  background: var(--sx-canvas-bg);
}

/* VIDRO LÍQUIDO — preferência do dono (30/09/2026: "gostei do princípio de vidro líquido, pode aplicar e colocar
   isso como minha preferência"). PADRÃO da superfície FLUTUANTE do Sistema: lâmina solta, vidro NEUTRO, borda
   luminosa, brilho claro no canto e desfoque MÉDIO. Uso: classe .sx-vidro-liquido ou <VidroLiquido> do kit.
   AIDEV-NOTE: desfoque médio = 16 px, valor único (dono em 01/10: "mas quero desfoque médio", depois de ver o forte de
     28 px). Médio: entre o véu (--sx-scrim-blur, 6 px) e o forte recusado, abaixo do cartão de vidro (20 px); de 12 px
     para cima a letra de 13 px que passa atrás já não se lê.
   AIDEV-NOTE: vidro NEUTRO (dono em 01/10: "sem esse tom âmbar no vidro"): tinta cinza sem matiz, pílula do item
     escolhido sem âmbar e saturate(0): tira TODA a cor do que passa atrás. O 0.5 ainda deixava o botão laranja vazar
     como mancha marrom atrás do item na gaveta do celular (R-B 25 no pixel); o 1.6 de antes puxava o âmbar.
   AIDEV-NOTE: vale para o painel de telas do menu SEMPRE (lâmina solta, navegacao.css) e para o que flutua sobre a
     tela (gaveta do celular, painel sobreposto); nunca em cartão ou tabela (contexto de empilhamento, ver acima).
     O desfoque só aparece onde algo passa atrás: no computador a lâmina flutua sobre a tela quando chamada (dono, 01/10).
   AIDEV-NOTE: sem mancha nem brilho colorido: só filetes claros. No escuro o brilho sob o texto fica <= 0.04
     (tests/vidro-liquido.test.js). Reserva sólida no fim do arquivo (sem desfoque, menos transparência,
     contraste alto e cores forçadas). Exceção ao manual da marca SÓ no Sistema (branding/DESIGN.md). */
body {
  --sx-liquid-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.34) 48%, rgba(255, 255, 255, 0.48) 100%);
  --sx-liquid-specular: radial-gradient(130% 55% at 10% -6%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 62%);
  --sx-liquid-rim: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.4) 34%, rgba(42, 40, 38, 0.12) 70%, rgba(255, 255, 255, 0.7) 100%);
  --sx-liquid-caustic: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
  --sx-liquid-depth: 0 18px 44px -18px rgba(42, 40, 38, 0.34), 0 2px 6px rgba(15, 15, 14, 0.05);
  --sx-liquid-blur: blur(16px) saturate(0) brightness(1.03);
  --sx-liquid-pill-sheen: rgba(255, 255, 255, 0.55);
  --sx-liquid-pill-bg: rgba(255, 255, 255, 0.82);
  --sx-liquid-pill-bd: rgba(0, 0, 0, 0.13);
  --sx-liquid-pill-sombra: 0 1px 2px rgba(0, 0, 0, 0.06);
}

body.theme-dark {
  --sx-liquid-bg: linear-gradient(160deg, rgba(36, 36, 36, 0.7) 0%, rgba(22, 22, 22, 0.56) 48%, rgba(28, 28, 28, 0.66) 100%);
  --sx-liquid-specular: radial-gradient(130% 55% at 10% -6%, rgba(242, 238, 227, 0.04) 0%, rgba(242, 238, 227, 0) 62%);
  --sx-liquid-rim: linear-gradient(145deg, rgba(242, 238, 227, 0.36) 0%, rgba(242, 238, 227, 0.08) 34%, rgba(0, 0, 0, 0.55) 70%, rgba(242, 238, 227, 0.18) 100%);
  --sx-liquid-caustic: inset 0 1px 0 rgba(242, 238, 227, 0.1), inset 0 -1px 0 rgba(242, 238, 227, 0.05);
  --sx-liquid-depth: 0 18px 44px -18px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.4);
  --sx-liquid-pill-sheen: rgba(242, 238, 227, 0.04);
  --sx-liquid-pill-bg: rgba(255, 255, 255, 0.08);
  --sx-liquid-pill-bd: rgba(255, 255, 255, 0.16);
  --sx-liquid-pill-sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sx-vidro-liquido {
  position: relative;
  color: var(--sx-ink);
  border-radius: 14px;
  background: var(--sx-liquid-specular), var(--sx-liquid-bg);
  -webkit-backdrop-filter: var(--sx-liquid-blur);
  backdrop-filter: var(--sx-liquid-blur);
  box-shadow: var(--sx-liquid-caustic), var(--sx-liquid-depth);
}

/* Borda luminosa: filete de 1 px em degradê pela máscara (a borda comum não aceita degradê com raio). */
.sx-vidro-liquido::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--sx-liquid-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Item escolhido sobre a lâmina: pílula clara NEUTRA (sem âmbar, dono 01/10), borda suave e o brilho claro no alto. */
.sx-vidro-liquido [aria-current="page"] {
  background: linear-gradient(180deg, var(--sx-liquid-pill-sheen), transparent 62%), var(--sx-liquid-pill-bg);
  box-shadow: inset 0 0 0 1px var(--sx-liquid-pill-bd), inset 0 1px 0 var(--sx-glass-light), var(--sx-liquid-pill-sombra);
}

/* Palcos do exemplo em #/design-system: claro e escuro lado a lado, qualquer que seja o tema da página.
   AIDEV-NOTE: cada palco repete os valores do tema dele; tests/vidro-liquido.test.js confere que são IGUAIS aos do
     :root/body (claro) e do body.theme-dark (escuro). Mudou um tema, mude o palco (o teste acusa). */
.sx-ds-vidro__palco--claro {
  --sx-canvas-top: #F6F3EC;
  --sx-canvas-bottom: #F2EEE3;
  --sx-canvas-glow-1: rgba(217, 122, 31, 0.08);
  --sx-surface: #FBF9F3;
  --sx-surface-2: #F5F1E8;
  --sx-line: #E3DDCF;
  --sx-line-strong: #CDC6B4;
  --sx-ink: #1B1A18;
  --sx-ink-mut: #555248;
  --sx-ink-weak: #6B675D;
  --sx-st-amber: #A65300;
  --sx-st-amber-bg: #FBEBD4;
  --sx-st-amber-bd: #E6C796;
  --sx-st-success: oklch(0.46 0.09 150);
  --sx-st-success-bg: oklch(0.95 0.03 150);
  --sx-st-success-bd: oklch(0.85 0.06 150);
  --sx-st-danger: #6B2424;
  --sx-st-danger-bg: #F6E5E2;
  --sx-st-danger-bd: #E0BDB6;
  --sx-glass-light: rgba(255, 255, 255, 0.9);
  --sx-liquid-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.34) 48%, rgba(255, 255, 255, 0.48) 100%);
  --sx-liquid-specular: radial-gradient(130% 55% at 10% -6%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 62%);
  --sx-liquid-rim: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.4) 34%, rgba(42, 40, 38, 0.12) 70%, rgba(255, 255, 255, 0.7) 100%);
  --sx-liquid-caustic: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
  --sx-liquid-depth: 0 18px 44px -18px rgba(42, 40, 38, 0.34), 0 2px 6px rgba(15, 15, 14, 0.05);
  --sx-liquid-pill-sheen: rgba(255, 255, 255, 0.55);
  --sx-liquid-pill-bg: rgba(255, 255, 255, 0.82);
  --sx-liquid-pill-bd: rgba(0, 0, 0, 0.13);
  --sx-liquid-pill-sombra: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sx-ds-vidro__palco--escuro {
  --sx-canvas-top: #100F0E;
  --sx-canvas-bottom: #0A0A09;
  --sx-canvas-glow-1: rgba(217, 122, 31, 0.12);
  --sx-surface: #161514;
  --sx-surface-2: #1C1A18;
  --sx-line: #2A2826;
  --sx-line-strong: #3A3733;
  --sx-ink: #F2EEE3;
  --sx-ink-mut: #B7B1A4;
  --sx-ink-weak: #938E82;
  --sx-st-amber: #E8954A;
  --sx-st-amber-bg: #2A2014;
  --sx-st-amber-bd: #5A4424;
  --sx-st-success: #86CFA0;
  --sx-st-success-bg: #13241A;
  --sx-st-success-bd: #2B4A35;
  --sx-st-danger: #F0A197;
  --sx-st-danger-bg: #2A1717;
  --sx-st-danger-bd: #5A2C28;
  --sx-glass-light: rgba(242, 238, 227, 0.06);
  --sx-liquid-bg: linear-gradient(160deg, rgba(36, 36, 36, 0.7) 0%, rgba(22, 22, 22, 0.56) 48%, rgba(28, 28, 28, 0.66) 100%);
  --sx-liquid-specular: radial-gradient(130% 55% at 10% -6%, rgba(242, 238, 227, 0.04) 0%, rgba(242, 238, 227, 0) 62%);
  --sx-liquid-rim: linear-gradient(145deg, rgba(242, 238, 227, 0.36) 0%, rgba(242, 238, 227, 0.08) 34%, rgba(0, 0, 0, 0.55) 70%, rgba(242, 238, 227, 0.18) 100%);
  --sx-liquid-caustic: inset 0 1px 0 rgba(242, 238, 227, 0.1), inset 0 -1px 0 rgba(242, 238, 227, 0.05);
  --sx-liquid-depth: 0 18px 44px -18px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.4);
  --sx-liquid-pill-sheen: rgba(242, 238, 227, 0.04);
  --sx-liquid-pill-bg: rgba(255, 255, 255, 0.08);
  --sx-liquid-pill-bd: rgba(255, 255, 255, 0.16);
  --sx-liquid-pill-sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* Cartão dentro de cartão (o DS pede para evitar, mas existe): tinta leve, sem sombra de elevação. */
.sx-card .sx-card {
  --sx-card-bg: var(--sx-glass-bg-soft);
  --sx-card-shadow: 0 0 0 1px var(--sx-glass-edge);
}

/* Cartão clicável: o realce agora funciona (antes o estilo embutido vencia a regra de hover). */
.sx-card--hover:hover {
  --sx-card-border: color-mix(in oklab, var(--mpvpc-brand-ember) 38%, var(--sx-glass-border));
  --sx-card-shadow: 0 0 0 1px color-mix(in oklab, var(--mpvpc-brand-ember) 22%, var(--sx-glass-edge)), inset 0 1px 0 var(--sx-glass-light), 0 16px 40px -18px var(--sx-glass-depth);
}

/* Camadas flutuantes: aqui o desfoque tem o que desfocar. */
.sx-pop,
.sx-glass-float {
  -webkit-backdrop-filter: var(--sx-pop-blur);
  backdrop-filter: var(--sx-pop-blur);
}

.sx-modal-overlay,
.sx-scrim {
  -webkit-backdrop-filter: var(--sx-scrim-blur);
  backdrop-filter: var(--sx-scrim-blur);
}

/* Cabeçalho fixo de tabela: as linhas passam por baixo, fosco de verdade. */
.sx-table-cards thead th {
  background: var(--sx-glass-bg-strong);
  -webkit-backdrop-filter: var(--sx-glass-blur);
  backdrop-filter: var(--sx-glass-blur);
}

.sx-table-cards tbody tr:hover > td {
  background: color-mix(in oklab, var(--mpvpc-brand-ember) 5%, transparent);
}

/* Topo de vidro: translúcido sobre a luz do fundo, filete de luz embaixo. */
.sx-topbar {
  background: var(--sx-topbar-bg);
  box-shadow: inset 0 -1px 0 var(--sx-topbar-line);
  border-bottom-color: transparent;
}

/* Botões: primário no Âmbar oficial com volume discreto; secundário de vidro fino. O anel de foco
   continua vencendo (.sx-btn:focus-visible tem especificidade maior que a variante). */
.sx-btn--primary {
  box-shadow: var(--sx-btn-primary-shadow);
}

.sx-btn--primary:hover:not(:disabled) {
  --sx-btn-primary-bg: linear-gradient(180deg, #D27826 0%, var(--mpvpc-cta-bg-hover) 100%);
  filter: none;
}

.sx-btn--primary:active:not(:disabled) {
  --sx-btn-primary-bg: var(--mpvpc-cta-bg-active);
}

.sx-btn--secondary:hover:not(:disabled),
.sx-btn--danger:hover:not(:disabled) {
  --sx-btn-secondary-bg: rgba(255, 255, 255, 0.9);
  filter: none;
}

body.theme-dark .sx-btn--secondary:hover:not(:disabled),
body.theme-dark .sx-btn--danger:hover:not(:disabled) {
  --sx-btn-secondary-bg: rgba(242, 238, 227, 0.1);
}

.sx-btn--ghost:hover:not(:disabled) {
  --sx-btn-ghost-bg: color-mix(in oklab, var(--sx-ink) 6%, transparent);
  filter: none;
}

.sx-btn:focus-visible {
  box-shadow: var(--sx-ring);
}

/* Celular: o menu vira gaveta sobre o conteúdo — ali o desfoque vale; desfoque mais leve no geral. */
@media (max-width: 920px) {
  .sx-sidebar.open {
    -webkit-backdrop-filter: var(--sx-pop-blur);
    backdrop-filter: var(--sx-pop-blur);
  }
}

@media (max-width: 680px) {
  :root {
    --sx-pop-blur:   blur(14px) saturate(1.25);
    --sx-glass-blur: blur(12px) saturate(1.2);
  }
}

/* Contas: coluna de ações fixa à direita enquanto a tabela rola na horizontal (sem cortar o botão).
   Fundo = cor da linha (regra .sx-table-fixa abaixo), para o vermelho do atraso chegar até Ações. */
.sx-contas-table th:last-child,
.sx-contas-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--sx-row-bg, var(--sx-glass-bg-strong));
  -webkit-backdrop-filter: var(--sx-glass-blur);
  backdrop-filter: var(--sx-glass-blur);
}
.sx-contas-table thead th:last-child { z-index: 3; background: var(--sx-glass-bg-strong); }

/* Tabela com coluna fixa (DS "Tabela densa" > Coluna fixa; dono, 24/09/2026). A coluna fixa precisa de
   fundo opaco (as linhas passam por baixo), então a LINHA inteira pinta a mesma cor em todas as células
   por --sx-row-bg. Estado de linha (hover, selecionada, em atraso) troca só a variável — nunca um
   `background` no <tr>, que a célula pintada esconderia. Uso: className="sx-table-fixa" na <table>,
   aria-selected="true" na linha selecionada e data-tom="perigo" na linha em atraso.
   AIDEV-NOTE: a coluna fixa nunca tem fundo proprio; cor de estado so via --sx-row-bg (teste vidro-sobrio). */
/* Linha divisória de ponta a ponta (dono, 24/09): com border-collapse a borda é da TABELA e a célula
   fixa pinta o fundo por cima dela — a linha sumia sob a coluna fixa. Aqui a borda é da CÉLULA
   (bordas separadas, espaçamento 0), então anda junto com a célula fixa.
   AIDEV-NOTE: nao volte para border-collapse nem ponha borda no <tr> ou inline na <td> (teste vidro-sobrio).
   AIDEV-NOTE: tabela so tem linha HORIZONTAL; coluna fixa sem filete/sombra vertical (dono, 24/09). */
.sx-table-fixa { border-collapse: separate; border-spacing: 0; }
.sx-table-fixa thead th { border-bottom: 1px solid var(--sx-line); }
.sx-table-fixa tbody > tr:not(:last-child) > td { border-bottom: 1px solid var(--sx-line); }
/* Colunas fixas genéricas (DataTable do kit e novas telas). */
.sx-table-fixa .sx-col-fixa-inicio,
.sx-table-fixa .sx-col-fixa-fim {
  position: sticky;
  z-index: 1;
  background: var(--sx-row-bg, var(--sx-glass-bg-strong));
  -webkit-backdrop-filter: var(--sx-glass-blur);
  backdrop-filter: var(--sx-glass-blur);
}
.sx-table-fixa .sx-col-fixa-inicio { left: 0; }
.sx-table-fixa .sx-col-fixa-fim { right: 0; }
.sx-table-fixa thead .sx-col-fixa-inicio,
.sx-table-fixa thead .sx-col-fixa-fim { z-index: 3; background: var(--sx-glass-bg-strong); }
.sx-table-fixa tbody tr { --sx-row-bg: var(--sx-glass-bg-strong); }
.sx-table-fixa tbody tr[aria-selected="true"] { --sx-row-bg: var(--sx-st-amber-bg); }
.sx-table-fixa tbody tr[data-tom="perigo"] { --sx-row-bg: var(--sx-st-danger-bg); }
.sx-table-fixa tbody tr:hover { --sx-row-bg: color-mix(in oklab, var(--mpvpc-brand-ember) 5%, var(--sx-glass-bg-strong)); }
.sx-table-fixa tbody tr[aria-selected="true"]:hover { --sx-row-bg: color-mix(in oklab, var(--mpvpc-brand-ember) 6%, var(--sx-st-amber-bg)); }
.sx-table-fixa tbody tr[data-tom="perigo"]:hover { --sx-row-bg: color-mix(in oklab, var(--sx-st-danger) 6%, var(--sx-st-danger-bg)); }
.sx-table-fixa tbody > tr > td,
.sx-table-cards.sx-table-fixa tbody tr:hover > td { background: var(--sx-row-bg); }

/* Celular: a tabela vira cartões e nada é fixo; a cor da linha vai para o cartão (<tr>). */
@media (max-width: 680px) {
  .sx-table-fixa tbody tr { --sx-row-bg: var(--sx-surface); background: var(--sx-row-bg); }
  .sx-table-fixa tbody > tr > td,
  .sx-table-cards.sx-table-fixa tbody tr:hover > td,
  .sx-table-fixa.sx-contas-table td:last-child,
  .sx-table-fixa .sx-col-fixa-inicio,
  .sx-table-fixa .sx-col-fixa-fim,
  .sx-opportunities-table-scroll .sx-table-fixa td:first-child,
  .sx-opportunities-table-scroll .sx-table-fixa td:nth-child(2) { background: transparent; }
}

/* ============================================================
   CONTAS E PREVISÃO DE ENTRADA — redesenho wave 2 (25/09/2026, imagens 09 e 17; base comum às duas telas).
   AIDEV-NOTE: cartão do celular = os mesmos campos da tabela; a linha de Contas não expande (dono, 12/09).
   No computador a fonte segue a tabela (sx-table-cards); tudo que é fatura abre o popup da conta.
   ============================================================ */
/* Tema escuro: os tokens de estado não têm versão escura no app (o selo "Vencido" dava 1,5:1 no fundo escuro).
   A correção vale só dentro das telas de caixa (popups inclusive) até o DS ganhar a versão escura global.
   AIDEV-TODO: levar estes tokens para body.theme-dark no DS e apagar este bloco (pendência da wave 2b). */
body.theme-dark .sx-caixa-tela {
  --sx-st-neutral:    #B7B1A4;
  --sx-st-neutral-bd: #3A3733;
  --sx-st-amber-bd:   #5A4424;
  --sx-st-success:    #86CFA0;
  --sx-st-success-bg: #13241A;
  --sx-st-success-bd: #2B4A35;
  --sx-st-info:       #93BDE6;
  --sx-st-info-bg:    #13212E;
  --sx-st-info-bd:    #2A4156;
  --sx-st-warn:       #E9B25E;
  --sx-st-warn-bg:    #2B2212;
  --sx-st-warn-bd:    #574421;
  --sx-st-danger:     #F0A197;
  --sx-st-danger-bd:  #5A2C28;
}

/* Faixa de filtros: busca com ícone, escolhas do kit e (em Contas) a chave "Tabela completa". */
.sx-caixa-filtros { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Largura fixa, não flex-basis: com flex-basis a faixa media a busca pelo conteúdo e quebrava a linha antes da hora. */
.sx-caixa-busca { position: relative; display: block; flex: 0 0 auto; width: 250px; max-width: 100%; }
.sx-caixa-busca > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sx-ink-weak); pointer-events: none; }
.sx-caixa-paginacao { margin-top: 12px; }
.sx-caixa-paginacao:empty { display: none; }
.sx-caixa-paginacao__compacta { display: none; }

/* Cartão do celular (casca comum) e o detalhe rótulo/valor que ele abre. */
.sx-caixa-cartao {
  border: 1px solid var(--sx-card-border);
  border-radius: var(--sx-radius);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
  overflow: hidden;
}
.sx-caixa-detalhe { display: grid; margin: 0; }
.sx-caixa-detalhe > div { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--sx-line); }
.sx-caixa-detalhe > div:first-child { border-top: 0; }
.sx-caixa-detalhe dt { color: var(--sx-ink-weak); font-size: 12px; font-weight: 650; }
.sx-caixa-detalhe dd { margin: 0; color: var(--sx-ink); font-size: 13px; overflow-wrap: anywhere; }
.sx-caixa-cartao-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sx-caixa-cartao-acoes > .sx-btn { flex: 1 1 140px; min-height: 44px; }

/* Contas: sem "Como paga" (chave desligada) a tabela cabe em 1280 px; o minWidth 1040 inline é o da tabela completa. */
@media (min-width: 681px) {
  .sx-contas-table.sx-contas-table--resumo { min-width: 890px !important; }
}
.sx-contas-cartoes { display: none; }
.sx-contas-cartao[data-tom="perigo"] { background: var(--sx-st-danger-bg); }
.sx-contas-cartao__topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 14px 6px; }
.sx-contas-cartao__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sx-contas-cartao__abrir {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sx-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.sx-contas-cartao__abrir:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: 2px; border-radius: 4px; }
.sx-contas-cartao__selos { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-contas-cartao__status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 46vw; text-align: right; }
.sx-contas-cartao__status > button { text-align: right !important; }
.sx-contas-cartao__resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 14px 10px; font-size: 12.5px; color: var(--sx-ink-mut); }
.sx-contas-cartao__valor { color: var(--sx-ink); font-weight: 700; }
.sx-contas-cartao__atraso { color: var(--sx-st-danger); font-weight: 600; }
/* Accordion do kit dentro do cartão: o painel do kit recua 40px e o gatilho tem padding inline. */
.sx-contas-cartao__detalhe { border-top: 1px solid var(--sx-line) !important; }
.sx-contas-cartao__detalhe > section { border-bottom: 0 !important; }
.sx-contas-cartao__detalhe h3 > button { padding: 8px 14px !important; min-height: 48px !important; }
.sx-contas-cartao__detalhe [role="region"] { padding: 0 14px 14px !important; }

@media (max-width: 680px) {
  /* KPIs em duas colunas (imagens 17 e 19): o contrato geral de uma coluna empurrava a lista para longe. O rótulo
     ganha até três linhas: com duas, "Custo fixo mensal — empresa" era cortado na coluna estreita. */
  .sx-shell .sx-kpi-grid.sx-caixa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .sx-caixa-kpis .sx-kpi-card { padding: 12px 14px 11px !important; }
  .sx-caixa-kpis .sx-kpi-card > div:first-of-type { margin-bottom: 6px !important; }
  .sx-caixa-kpis .sx-kpi-card .eyebrow { -webkit-line-clamp: 3 !important; }
  .sx-caixa-kpis .sx-kpi-card .tnum { font-size: 20px !important; }
  .sx-caixa-secao > .sx-section-head__actions { flex: 1 1 100%; }
  .sx-caixa-filtros { width: 100%; }
  .sx-caixa-busca { flex: 1 1 100%; width: 100%; }
  /* Escolhas empilhadas em largura cheia: lado a lado o rótulo ("Em aberto (todas as datas)") não cabia. */
  .sx-caixa-filtros > div { flex: 1 1 100%; min-width: 0; }
  .sx-caixa-filtros > div > button { width: 100% !important; }
  .sx-caixa-paginacao__completa { display: none !important; }
  .sx-caixa-paginacao__compacta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--sx-ink-mut); }
  /* Formulário dos popups (conta e parcela) em uma coluna: em duas, campos e a dica de "Recebido em" saíam do popup. */
  .sx-caixa-form { grid-template-columns: minmax(0, 1fr) !important; }
  /* Popup acima da barra inferior (z-index 70): com o 60 do kit, "Salvar" ficava sob a barra no fim da rolagem.
     AIDEV-TODO: o kit já sobe o popup no celular (bloco "POPUP DO KIT", 30/09); apagar esta regra junto com o teste da wave 2 que a trava. */
  .sx-caixa-tela .sx-modal-overlay { z-index: 75 !important; }
  .sx-contas-completa { display: none !important; }
  .sx-contas-tabela-card { display: none !important; }
  .sx-contas-cartoes { display: grid; gap: 10px; }
}

/* ---- Contas: documento da conta e comprovante de cada fatura (30/09/2026, D7-D9) ----
   Linha da fatura com dois indicadores; UMA fatura aberta por vez mostra os dois blocos lado a lado (empilhados
   quando o painel das faturas fica estreito). Vazio em tom neutro: faltar anexo não é erro. */
.sx-fatura-alternar { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--sx-ink-mut); cursor: pointer; }
.sx-fatura-alternar:hover { background: var(--sx-surface-2); color: var(--sx-ink); }
.sx-fatura-alternar svg { transition: transform 140ms var(--mpvpc-motion-ease); }
.sx-fatura-alternar[aria-expanded="true"] svg { transform: rotate(90deg); }
.sx-fatura-anexos { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sx-ind { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px solid; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.sx-ind[data-tem="true"] { color: var(--sx-st-success); background: var(--sx-st-success-bg); border-color: var(--sx-st-success-bd); }
.sx-ind[data-tem="false"] { color: var(--sx-ink-mut); background: transparent; border-color: var(--sx-line-strong); border-style: dashed; }
.sx-fatura-corpo { container-type: inline-size; container-name: anexos-fatura; padding-top: 4px; }
.sx-anexos { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; }
@container anexos-fatura (min-width: 480px) { .sx-anexos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-anexo { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); }
.sx-anexo-tit { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-ink-mut); }
.sx-anexo-arquivo { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; }
.sx-anexo-tipo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; background: var(--sx-st-danger-bg); color: var(--sx-st-danger); border: 1px solid var(--sx-st-danger-bd); }
.sx-anexo-tipo[data-tipo="JPG"], .sx-anexo-tipo[data-tipo="PNG"], .sx-anexo-tipo[data-tipo="WEBP"] { background: var(--sx-st-info-bg); color: var(--sx-st-info); border-color: var(--sx-st-info-bd); }
.sx-anexo-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--sx-ink); }
.sx-anexo-meta { display: block; font-size: 11.5px; color: var(--sx-ink-weak); }
.sx-anexo-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.sx-anexo-vazio { margin: 0; font-size: 12.5px; color: var(--sx-ink-mut); }
.sx-anexo-obs { margin: 0; font-size: 11.5px; color: var(--sx-ink-mut); }
.sx-aviso { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--sx-ink-mut); }
.sx-aviso[data-tipo="ok"] { color: var(--sx-st-success); }
.sx-aviso[data-tipo="erro"] { color: var(--sx-st-danger); }
/* Versões anteriores: Accordion do kit, compacto dentro do bloco. */
.sx-anexo-versoes { border-top-color: transparent !important; }
.sx-anexo-versoes > section { border-bottom: 0 !important; }
.sx-anexo-versoes button[aria-expanded] { min-height: 40px !important; padding: 6px 0 !important; }
.sx-anexo-versoes button[aria-expanded] strong { font-size: 12px !important; font-weight: 650; color: var(--sx-ink-mut); }
.sx-anexo-versoes [role="region"] { padding: 0 0 6px !important; font-size: 11.5px !important; }
.sx-anexo-versoes ul { margin: 0; padding-left: 16px; color: var(--sx-ink-weak); }
.sx-anexo-versoes a { color: var(--sx-st-amber); }
/* "Ver" abre o arquivo no popup do kit (revisão, 30/09): moldura neutra com a altura útil do popup; imagem inteira,
   sem cortar; PDF no leitor do navegador. No celular o popup do kit já vira tela cheia. */
.sx-anexo-visor { display: flex; align-items: center; justify-content: center; min-height: min(70vh, 720px); height: calc(100vh - 220px); border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); overflow: auto; }
/* Flex (não grid): o max-height em % só vale com a altura do contêiner definida; em grid a linha é "auto". */
.sx-anexo-visor img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.sx-anexo-visor iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--sx-surface); }
.sx-anexo-visor-nota { margin: 0; flex: 1 1 240px; font-size: 12px; color: var(--sx-ink-mut); }
@media (max-width: 680px) {
  .sx-anexo-acoes .sx-btn { min-height: 44px; }
  .sx-fatura-alternar { width: 44px; height: 44px; }
  .sx-anexo-visor { min-height: 0; height: calc(100dvh - 190px); }
}

/* ============================================================
   PREVISÃO DE ENTRADA — redesenho wave 2 (25/09/2026, imagens 18 e 19).
   AIDEV-NOTE: o grupo é a oportunidade que a porta devolve (totais dela); sem numeração "1/2" de parcela.
   ============================================================ */
.sx-entradas-tela .sx-caixa-busca { width: 300px; }
.sx-entradas-cartoes { display: none; }
.sx-entradas-table tbody tr.sx-entradas-grupo > td { background: var(--sx-surface-2); }
.sx-entradas-table td.sx-entradas-filha { padding-left: 30px !important; }
.sx-entradas-totais { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--sx-ink-mut); }
.sx-entradas-totais strong { color: var(--sx-ink); font-weight: 700; }
.sx-entradas-dossie {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sx-st-amber);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.sx-entradas-dossie:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: 2px; border-radius: 3px; }
.sx-entradas-cartao__topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 14px 8px; }
.sx-entradas-cartao__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sx-entradas-cartao__nome { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-entradas-cartao__codigo { font-size: 11.5px; color: var(--sx-ink-weak); overflow-wrap: anywhere; }
.sx-entradas-cartao__totais { padding: 0 14px 10px; }
.sx-entradas-cartao__parcelas { list-style: none; margin: 0; padding: 0; }
.sx-entradas-cartao__parcelas > li { display: grid; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--sx-line); }
.sx-entradas-cartao__parcelas > li > .sx-btn { justify-self: start; min-height: 40px; }
.sx-entradas-cartao__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.sx-entradas-cartao__campos dt { font-size: 11.5px; font-weight: 650; color: var(--sx-ink-weak); }
.sx-entradas-cartao__campos dd { margin: 2px 0 0; font-size: 13px; color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-entradas-cartao__valor { font-weight: 750; }
.sx-entradas-cartao__acoes { margin-top: 0; padding: 12px 14px 14px; border-top: 1px solid var(--sx-line); }

/* Faixa "Ganhas sem previsão": o botão abre a mesma seção com a tabela e "Gerar parcelas". */
.sx-entradas-ganhas { display: grid; gap: 12px; margin-top: 24px; }
.sx-entradas-ganhas__faixa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  padding: 16px 18px;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: var(--sx-radius);
  background: var(--sx-st-amber-bg);
}
.sx-entradas-ganhas__icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in oklab, var(--mpvpc-brand-ember) 16%, transparent); color: var(--sx-st-amber); }
.sx-entradas-ganhas__texto { min-width: 0; }
.sx-entradas-ganhas__texto h2 { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: -0.01em; color: var(--sx-ink); }
.sx-entradas-ganhas__texto h2 span { font-weight: 500; color: var(--sx-ink-mut); }
.sx-entradas-ganhas__texto p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--sx-ink-mut); }
/* Oportunidade aberta pelo Dossiê (?oportunidade=): primeira linha e marcada, só por token. */
.sx-entradas-ganhas tr[data-sx-ganha-foco="true"] > td { background: var(--sx-st-amber-bg); }

@media (max-width: 680px) {
  .sx-entradas-tela .sx-caixa-busca { width: 100%; }
  .sx-entradas-tabela-card { display: none !important; }
  .sx-entradas-cartoes { display: grid; gap: 10px; }
  .sx-entradas-ganhas__faixa { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .sx-entradas-ganhas__faixa > .sx-btn { grid-column: 1 / -1; width: 100%; min-height: 44px; }
}

/* Reserva sólida: navegador sem backdrop-filter ou pessoa que pede menos transparência. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body,
  body.theme-dark {
    --sx-glass-bg: var(--sx-surface);
    --sx-glass-bg-soft: var(--sx-surface-2);
    --sx-glass-bg-strong: var(--sx-surface);
    --sx-pop-bg: var(--sx-surface);
    --sx-field-bg: var(--sx-surface);
    --sx-btn-secondary-bg: var(--sx-surface);
    --sx-chrome-glass-bg: var(--sx-chrome-bg);
    --sx-topbar-bg: var(--sx-surface);
    --sx-liquid-bg: var(--sx-surface);
    --sx-liquid-specular: none;
  }
  .sx-ds-vidro__palco { --sx-liquid-bg: var(--sx-surface); --sx-liquid-specular: none; }
}

@media (prefers-reduced-transparency: reduce) {
  body,
  body.theme-dark {
    --sx-glass-bg: var(--sx-surface);
    --sx-glass-bg-soft: var(--sx-surface-2);
    --sx-glass-bg-strong: var(--sx-surface);
    --sx-pop-bg: var(--sx-surface);
    --sx-field-bg: var(--sx-surface);
    --sx-btn-secondary-bg: var(--sx-surface);
    --sx-chrome-glass-bg: var(--sx-chrome-bg);
    --sx-topbar-bg: var(--sx-surface);
    --sx-pop-blur: none;
    --sx-glass-blur: none;
    --sx-scrim-blur: none;
    --sx-liquid-bg: var(--sx-surface);
    --sx-liquid-specular: none;
    --sx-liquid-blur: none;
  }
  .sx-ds-vidro__palco { --sx-liquid-bg: var(--sx-surface); --sx-liquid-specular: none; }
}

/* Contraste alto: a lâmina vira superfície sólida e a borda luminosa vira filete da linha forte. */
@media (prefers-contrast: more) {
  body,
  body.theme-dark {
    --sx-liquid-bg: var(--sx-surface);
    --sx-liquid-specular: none;
    --sx-liquid-blur: none;
    --sx-liquid-rim: linear-gradient(var(--sx-line-strong), var(--sx-line-strong));
    --sx-liquid-pill-bd: var(--sx-line-strong);
  }
  .sx-ds-vidro__palco {
    --sx-liquid-bg: var(--sx-surface);
    --sx-liquid-specular: none;
    --sx-liquid-rim: linear-gradient(var(--sx-line-strong), var(--sx-line-strong));
    --sx-liquid-pill-bd: var(--sx-line-strong);
  }
}

@media (forced-colors: active) {
  .sx-pop,
  .sx-glass-float,
  .sx-modal-overlay,
  .sx-scrim,
  .sx-table-cards thead th,
  .sx-sidebar.open,
  .sx-vidro-liquido {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .sx-vidro-liquido::after { display: none; }
}

/* Chave compacta do kit em cores forçadas (alto contraste do Windows): bordas e ícone do lado escolhido em cores do
   sistema. AIDEV-NOTE: fica DEPOIS do bloco do vidro líquido de propósito (tests/vidro-liquido.test.js lê o primeiro
   bloco forced-colors do arquivo); o desenho da chave mora no bloco "Chave compacta do kit", perto da topbar. */
@media (forced-colors: active) {
  .sx-chave__trilha, .sx-chave__botao { border-color: ButtonText; }
  .sx-chave[aria-checked="false"] .sx-chave__icone[data-lado="desligado"],
  .sx-chave[aria-checked="true"] .sx-chave__icone[data-lado="ligado"] { color: Highlight; }
}

/* ============================================================
   REDESENHO WAVE 12a — telas de leitura do grupo Sistema (25/09/2026): Saúde dos robôs (27 e 76) e Fluxos da
   empresa (29 e 30). Prefixos .sx-saude-* e .sx-mapa-valor-*. O .sx-faq-* (61 e 62) saiu em 29/09: sem uso desde o
   editor do FAQ (onda 1, 28/09), que usa só o kit.
   AIDEV-NOTE: as duas telas só LEEM. Destaque é fundo + borda inteira, nunca borda grossa de um lado só (side-tab).
   ============================================================ */

/* --- Saúde dos robôs (#/observabilidade-robos) --- */
.sx-saude { min-width: 0; }

/* Regras que viviam num <style> dentro da tela, com os mesmos nomes. Abaixo de 680 px vale o modo cartão do DS
   (painel-extra.css, carregado depois): antes, o <style> no corpo forçava cartões de 1080 px com rolagem lateral. */
.sx-robot-trace-table tbody > .sx-robot-trace-row > td {
  vertical-align: top;
  border-bottom: 1px solid var(--sx-line);
}

.sx-robot-trace-row:focus-visible {
  outline: 2px solid var(--mpvpc-brand-ember);
  outline-offset: -2px;
}

.sx-robot-trace-table-scroll:focus-within { scrollbar-color: var(--sx-line-strong) transparent; }

@media (max-width: 760px) {
  .sx-robot-trace-table-scroll {
    max-height: none !important;
    overscroll-behavior-x: contain;
  }

  .sx-robot-trace-table { min-width: 1080px !important; }
  .sx-robot-trace-filters { grid-template-columns: minmax(0, 1fr) !important; }
}

.sx-robot-trace-timeline { display: grid; gap: 8px; padding: 12px 14px 16px; background: var(--sx-surface-2); }

.sx-saude-sequencia {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.sx-saude-sequencia__passo {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
}

.sx-saude-sequencia__texto { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }

.sx-saude-evento {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 11px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
}

.sx-saude-evento__ordem { color: var(--sx-ink-weak); font-size: 11px; }
.sx-saude-evento__recurso { min-width: 160px; flex: 0.8 1 180px; }
.sx-saude-evento__recurso strong { display: block; color: var(--sx-ink); font-size: 12.5px; overflow-wrap: anywhere; }
.sx-saude-evento__recurso span { color: var(--sx-ink-weak); font-size: 11.5px; }
.sx-saude-evento__operacao { flex: 1 1 220px; color: var(--sx-ink-mut); font-size: 12px; overflow-wrap: anywhere; }
.sx-saude-evento__estado { margin-left: auto; }

.sx-saude-cartoes-area { margin-bottom: 16px; }
.sx-saude-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sx-saude-cartao { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sx-saude-cartao__topo { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--sx-ink); font-size: 13.5px; }
.sx-saude-cartao__topo strong { min-width: 0; overflow-wrap: anywhere; }

.sx-saude-cartao__icone {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sx-st-neutral-bg);
  color: var(--sx-ink-mut);
}

.sx-saude-cartao--info .sx-saude-cartao__icone { background: var(--sx-st-info-bg); color: var(--sx-st-info); }
.sx-saude-cartao__estado { color: var(--sx-ink); font-size: 14.5px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.sx-saude-cartao--neutral .sx-saude-cartao__estado { color: var(--sx-ink-mut); }
.sx-saude-cartao__detalhe { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }
.sx-saude-cartao__fonte { margin-top: auto; padding-top: 6px; color: var(--sx-ink-weak); font-size: 11.5px; overflow-wrap: anywhere; }

.sx-saude-nota { margin: 8px 0 0; color: var(--sx-ink-weak); font-size: 12px; line-height: 1.5; }
.sx-saude-nota--filtros { margin: 0 0 14px; }
.sx-saude-nota--erro { margin: 0 0 12px; color: var(--sx-st-danger); }

.sx-saude-linha {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
}

.sx-saude-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.sx-saude-incidente {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
  overflow-wrap: anywhere;
}

.sx-saude-incidente__topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--sx-ink); font-size: 13.5px; }
.sx-saude-incidente__motivo { margin: 0; color: var(--sx-ink); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.sx-saude-incidente__meta { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; color: var(--sx-ink-mut); font-size: 12px; }

.sx-saude-vazio {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px dashed var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
}

.sx-saude-vazio strong { color: var(--sx-ink); font-size: 13px; }
.sx-saude-vazio span { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }
.sx-saude-outras { margin-bottom: 20px; }

.sx-saude-memoria { display: grid; gap: 12px; }

.sx-saude-memoria__check {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
}

.sx-saude-memoria__topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--sx-ink); font-size: 13.5px; }
.sx-saude-memoria__check p { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.5; }
.sx-saude-memoria__check p.sx-saude-memoria__dica { color: var(--sx-ink-weak); font-size: 12px; }

.sx-saude-conversa {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px;
  border: 0;
  border-top: 1px solid var(--sx-line);
  background: transparent;
  color: var(--sx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-saude-conversa:first-child { border-top: 0; }
.sx-saude-conversa:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: -2px; }

.sx-saude-conversa--ativa,
.sx-saude-conversa--ativa:hover {
  background: var(--sx-st-amber-bg);
  box-shadow: inset 0 0 0 1px var(--sx-st-amber-bd);
}

.sx-saude-conversa__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.sx-saude-conversa__topo strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sx-ink); font-size: 13.5px; }
.sx-saude-conversa__topo span { flex: 0 0 auto; color: var(--sx-ink-weak); font-size: 11.5px; }
.sx-saude-conversa__ultima { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sx-ink-weak); font-size: 12.5px; line-height: 1.4; }
.sx-saude-conversa__selos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.sx-saude-bolha {
  max-width: 82%;
  padding: 9px 11px;
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  background: var(--sx-surface-2);
}

.sx-saude-bolha--humano { background: var(--sx-st-success-bg); }
.sx-saude-bolha--robo { background: var(--sx-ai-bg); }
.sx-saude-bolha__quem { color: var(--sx-st-info); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.sx-saude-bolha--humano .sx-saude-bolha__quem { color: var(--sx-st-success); }
.sx-saude-bolha--robo .sx-saude-bolha__quem { color: var(--sx-ai); }

@media (max-width: 1180px) {
  .sx-saude-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .sx-saude-linha { grid-template-columns: minmax(0, 1fr); }
  .sx-saude-sequencia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .sx-shell .sx-kpi-grid.sx-saude-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sx-saude-cartoes { grid-template-columns: minmax(0, 1fr); }
  /* A linha aberta ocupa o cartão inteiro, alinhada à esquerda (o modo cartão alinha à direita e em linha). */
  .sx-table-cards .sx-robot-trace-detail > td { display: block !important; text-align: left !important; }
  /* Linha fechada no celular: início, agente, passagem, tempo e status. Skills, ferramentas e dados consultados
     aparecem na sequência da linha aberta (antes, cada passagem virava um cartão de 8 linhas). */
  .sx-table-cards.sx-robot-trace-table td[data-label="Skills"],
  .sx-table-cards.sx-robot-trace-table td[data-label="Ferramentas"],
  .sx-table-cards.sx-robot-trace-table td[data-label="Dados consultados"] { display: none !important; }
  .sx-saude-sequencia { grid-template-columns: minmax(0, 1fr); }
  .sx-saude-evento__recurso { min-width: 0; }
}

/* --- Fluxos da empresa (#/fluxos) --- */
.sx-mapa-valor { min-width: 0; }
.sx-mapa-valor-aviso { margin-bottom: 16px; }
.sx-mapa-valor-aviso__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-mapa-valor-conteudo { min-width: 0; }
.sx-mapa-valor-secao { margin-top: 22px; }

/* Cadeia de valor: 8 cartões numerados; no celular, uma sequência vertical ligada por um traço. */
.sx-mapa-valor-etapas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sx-mapa-valor-etapa {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
}

.sx-mapa-valor-etapa__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.sx-mapa-valor-etapa__numero {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: 999px;
  background: var(--sx-st-amber-bg);
  color: var(--sx-st-amber);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.sx-mapa-valor-etapa__icone { display: inline-flex; color: var(--sx-ink-weak); }
.sx-mapa-valor-etapa__nome { color: var(--sx-ink); font-size: 13.5px; line-height: 1.3; }
.sx-mapa-valor-etapa__objetivo { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }

.sx-mapa-valor-nivel { margin-top: auto; display: grid; gap: 6px; padding-top: 4px; }
.sx-mapa-valor-nivel__selo { justify-self: start; }
.sx-mapa-valor-nivel__texto { color: var(--sx-ink-weak); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }

/* Fluxos de geração de valor: cartões à esquerda; conexões e gargalos ao lado (embaixo abaixo de 1180 px). */
.sx-mapa-valor-fluxos-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: 16px;
}

.sx-mapa-valor-fluxos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.sx-mapa-valor-lado { min-width: 0; display: grid; align-content: start; align-items: start; gap: 16px; }

.sx-mapa-valor-fluxo,
.sx-mapa-valor-motor { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.sx-mapa-valor-fluxo__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sx-mapa-valor-fluxo__id { color: var(--sx-ink); font-size: 15.5px; }
.sx-mapa-valor-fluxo__titulo { margin: 0; color: var(--sx-ink); font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sx-mapa-valor-fluxo__resultado { margin: 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.55; }
.sx-mapa-valor-fluxo__barras { display: grid; gap: 10px; }
.sx-mapa-valor-fluxo__gargalos { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }
.sx-mapa-valor-fluxo__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-mapa-valor-fluxo__passos { min-width: 0; }

.sx-mapa-valor-barra { display: grid; gap: 4px; }
.sx-mapa-valor-barra__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--sx-ink-mut); font-size: 12px; }
.sx-mapa-valor-barra__topo strong { color: var(--sx-ink); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sx-mapa-valor-barra__unidade { color: var(--sx-ink-weak); font-size: 11.5px; line-height: 1.4; }

.sx-mapa-valor-lista {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.5;
}

.sx-mapa-valor-gargalos { display: grid; gap: 12px; }
.sx-mapa-valor-gargalos__grupo { display: grid; gap: 6px; }
.sx-mapa-valor-gargalos__fluxo { color: var(--sx-ink); font-size: 12.5px; }
.sx-mapa-valor-gargalos__passo { display: block; color: var(--sx-ink); font-weight: 600; overflow-wrap: anywhere; }
.sx-mapa-valor-gargalos__status { display: block; color: var(--sx-ink-weak); font-size: 11.5px; overflow-wrap: anywhere; }

/* Motores: grade que cabe em 360 px (antes, minmax(340px) empurrava a página no celular estreito). */
.sx-mapa-valor-motores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  align-items: start;
  gap: 16px;
}

.sx-mapa-valor-motor__etapas { color: var(--sx-ink-mut); font-size: 12px; font-weight: 600; }

@media (max-width: 1180px) {
  .sx-mapa-valor-fluxos-area { grid-template-columns: minmax(0, 1fr); }
  .sx-mapa-valor-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .sx-mapa-valor-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .sx-mapa-valor-fluxos,
  .sx-mapa-valor-lado { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .sx-mapa-valor-etapas { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .sx-mapa-valor-etapa:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 25px;
    bottom: -15px;
    width: 2px;
    height: 14px;
    background: var(--sx-line-strong);
  }
}

/* AIDEV-TODO: o tema escuro do DS não tem --sx-st-neutral/-success/-info/-warn/-danger próprios (texto a 1,5–2,4:1).
   Até o kit levar estes tokens para body.theme-dark, as telas da wave 12a corrigem só dentro delas, com os mesmos
   valores da wave 2 (sx-caixa-tela). O âmbar escuro já vem do DS; o cobre da IA usa o --sx-ai-on-dark do próprio DS. */
body.theme-dark .sx-andamento,
body.theme-dark .sx-saude,
body.theme-dark .sx-mapa-valor {
  --sx-st-neutral:    #B7B1A4;
  --sx-st-neutral-bd: #3A3733;
  --sx-st-amber-bd:   #5A4424;
  --sx-st-success:    #86CFA0;
  --sx-st-success-bg: #13241A;
  --sx-st-success-bd: #2B4A35;
  --sx-st-info:       #93BDE6;
  --sx-st-info-bg:    #13212E;
  --sx-st-info-bd:    #2A4156;
  --sx-st-warn:       #E9B25E;
  --sx-st-warn-bg:    #2B2212;
  --sx-st-warn-bd:    #574421;
  --sx-st-danger:     #F0A197;
  --sx-st-danger-bd:  #5A2C28;
  --sx-ai:            var(--sx-ai-on-dark);
}

/* --- Andamento (#/fluxos › Pedidos, 29/09/2026): pedidos do dono, quem faz, checklist e "parado há" ---
   Mesma leitura da página "Pedidos do Deivson": progresso geral, filtros por situação e grupos por área. Só tokens do
   DS; o tema escuro usa as correções de .sx-saude/.sx-mapa-valor acima. Primeiro 390 px, depois mesa. */
.sx-andamento { min-width: 0; }
.sx-andamento-pedidos { display: grid; gap: 16px; padding-top: 16px; min-width: 0; }
.sx-andamento-aviso { margin: 0; }
.sx-andamento-total { display: grid; gap: 10px; }
.sx-andamento-total__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sx-andamento-total__rotulo { display: block; color: var(--sx-ink-mut); font-size: 12.5px; font-weight: 650; }
.sx-andamento-total__percentual {
  display: block;
  color: var(--sx-ink);
  font-family: var(--mpvpc-font-heading);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}
.sx-andamento-total__acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sx-andamento-total__hora { color: var(--sx-ink-weak); font-size: 12px; }
.sx-andamento-total__sub { margin: 0; color: var(--sx-ink-weak); font-size: 12px; line-height: 1.45; }
.sx-andamento-area { display: grid; gap: 4px; min-width: 0; }
.sx-andamento-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  align-items: start;
  gap: 12px;
}
.sx-andamento-pedido { display: grid; gap: 10px; min-width: 0; }
.sx-andamento-pedido__topo { display: grid; gap: 8px; min-width: 0; }
.sx-andamento-pedido__titulo { margin: 0; color: var(--sx-ink); font-size: 14.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sx-andamento-pedido[data-status="feito"] .sx-andamento-pedido__titulo,
.sx-andamento-pedido[data-status="congelado"] .sx-andamento-pedido__titulo { color: var(--sx-ink-mut); }
.sx-andamento-pedido__selos { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-andamento-pedido__barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.sx-andamento-pedido__percentual { color: var(--sx-ink-mut); font-size: 12px; font-weight: 650; }
.sx-andamento-pedido__fazendo,
.sx-andamento-pedido__nota { margin: 0; color: var(--sx-ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.sx-andamento-pedido__nota { color: var(--sx-ink-mut); }
.sx-andamento-pedido__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--sx-line);
}
.sx-andamento-pedido__quando { color: var(--sx-ink-weak); font-size: 12px; }
.sx-andamento-pedido__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sx-andamento-modal__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sx-andamento-checklist__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-andamento-checklist__item { display: flex; align-items: flex-start; gap: 8px; color: var(--sx-ink); font-size: 13px; line-height: 1.45; }
.sx-andamento-checklist__item.is-feito { color: var(--sx-ink-mut); }
.sx-andamento-checklist__marca {
  flex: 0 0 16px;
  height: 16px;
  margin-top: 2px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--sx-line-strong);
  border-radius: 4px;
  color: var(--sx-st-success);
}
.sx-andamento-frentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-andamento-frente {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--sx-surface-2);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
}
.sx-andamento-frente__topo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sx-andamento-frente__fazendo { margin: 0; color: var(--sx-ink); font-size: 12.5px; line-height: 1.45; }
.sx-andamento-frente__meta { margin: 0; color: var(--sx-ink-weak); font-size: 11.5px; overflow-wrap: anywhere; }
/* Histórico do pedido (modal): quem fez, quando e o quê. Arquivado fica mais apagado, como o feito. */
.sx-andamento-pedido[data-arquivado="sim"] .sx-andamento-pedido__titulo { color: var(--sx-ink-mut); }
.sx-andamento-historico { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sx-andamento-historico__item { display: grid; gap: 4px; min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--sx-line); }
.sx-andamento-historico__item:last-child { padding-bottom: 0; border-bottom: 0; }
.sx-andamento-historico__topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sx-andamento-historico__quando { color: var(--sx-ink-weak); font-size: 12px; }
.sx-andamento-historico__texto { margin: 0; color: var(--sx-ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.sx-andamento-historico__motivo { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
/* Ao vivo (01/10/2026): o pedido que mudou sozinho na tela ganha fundo e anel leves que somem em 6 s (a tela tira a
   classe depois). Sem quadro final: a animação volta ao fundo do próprio cartão (o Card põe fundo e sombra inline; a
   animação passa por cima). Movimento reduzido = contorno parado, porque a sombra inline venceria a classe. */
.sx-andamento-pedido.is-novidade { animation: sx-andamento-novidade 6s ease-out; }
@keyframes sx-andamento-novidade {
  0%, 35% { background-color: var(--sx-st-info-bg); box-shadow: 0 0 0 2px var(--sx-st-info-bd); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-andamento-pedido.is-novidade { animation: none; outline: 2px solid var(--sx-st-info-bd); outline-offset: 1px; }
}
@media (max-width: 760px) {
  .sx-andamento-total__percentual { font-size: 24px; }
  .sx-andamento-lista { grid-template-columns: minmax(0, 1fr); }
}

/* Combobox / dropdown (MPVPC controls) */
.sx-dd-item:hover { background: var(--sx-surface-2) !important; }

/* Calendario e popover do kit (DateField/DateTimeField/CalendarGrid) */
.sx-cal-day:hover { background: color-mix(in oklab, var(--mpvpc-brand-ember) 16%, transparent); }
.sx-cal-day:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: -2px; }
.sx-pop { animation: sx-pop-in 120ms ease-out; }
@keyframes sx-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   CRESCIMENTO (redesenho wave 6a, 25/09/2026)
   Abas Aquisição (#/marketing) e Resultado comercial (#/performance) com a mesma casca.
   AIDEV-NOTE: grade de KPI própria (.sx-cresc-kpis): o painel-extra.css força .sx-kpi-grid a 2 colunas.
   Ele carrega depois, com !important, até 1080 px. Aqui: 1 coluna até 680 px (dinheiro não cabe em
   meia coluna de 390 px), 6 cartões só acima de 1360 px e 4 só acima de 1280 px.
   ============================================================ */
.sx-cresc-casca { margin-bottom: 2px; }

.sx-cresc-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: -6px 0 16px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-cresc-abas .sx-filter-tabs__option {
  min-height: 46px;
  font-size: 13.5px;
}

.sx-cresc-hora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  margin: 0 0 0 auto;
  padding: 4px 0;
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.4;
}

.sx-cresc-hora__alerta { color: var(--sx-st-danger); font-weight: 650; }
.sx-cresc-aviso { margin: 0 0 16px; }
.sx-cresc-funil-card .sx-cresc-aviso,
.sx-cresc-bloco .sx-cresc-aviso { margin: 14px 0 0; }

.sx-cresc-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.sx-cresc-plataforma {
  padding: 3px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
}

.sx-cresc-plataforma .sx-filter-tabs__option {
  min-height: 32px !important;
  border-bottom: 0 !important;
  border-radius: 6px;
}

.sx-cresc-plataforma .sx-filter-tabs__option[aria-pressed="true"] {
  background: var(--sx-surface) !important;
  box-shadow: var(--sx-shadow-card);
}

.sx-cresc-acoes__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sx-cresc-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.sx-cresc-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sx-cresc-kpis > * { min-width: 0; }
.sx-cresc-kpis .sx-kpi-card .tnum { font-size: 24px !important; }
.sx-cresc-kpis--6 .sx-kpi-card { padding: 16px 16px 14px !important; }
.sx-cresc-kpi-link { align-self: flex-start; margin: 10px 0 0 -10px; }

.sx-cresc-modulos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.sx-cresc-modulo {
  --sx-pad-card: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "topo abrir" "numeros numeros";
  align-content: space-between;
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.sx-cresc-modulo__topo { grid-area: topo; display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.sx-cresc-modulo__texto { min-width: 0; }
.sx-cresc-modulo__texto p { margin: 3px 0 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.45; }

.sx-cresc-modulo__titulo {
  margin: 0;
  color: var(--sx-ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sx-cresc-modulo__icone {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in oklab, var(--mpvpc-brand-ember) 14%, var(--sx-surface));
  color: var(--mpvpc-brand-ember-on-light);
}

.sx-cresc-modulo__icone--seo {
  background: color-mix(in oklab, var(--sx-st-success) 14%, var(--sx-surface));
  color: var(--sx-st-success);
}

/* Números numa linha só: cada coluna encolhe e quebra o rótulo entre palavras, sem cair para a linha de baixo. */
.sx-cresc-modulo__numeros {
  grid-area: numeros;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  justify-content: start;
  margin: 0;
  min-width: 0;
}

.sx-cresc-modulo__numeros > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  padding: 0 18px;
  border-left: 1px solid var(--sx-line);
}
.sx-cresc-modulo__numeros > div:first-child { padding-left: 0; border-left: 0; }
.sx-cresc-modulo__numeros dt { color: var(--sx-ink-mut); font-size: 12px; }
.sx-cresc-modulo__numeros dd { margin: 0; color: var(--sx-ink); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.sx-cresc-modulo__abrir { grid-area: abrir; align-self: start; }

.sx-cresc-funil-card { margin-bottom: 16px; }

.sx-cresc-funil {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.sx-cresc-funil__etapa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 6px 26px 6px 8px;
}

.sx-cresc-funil__etapa:first-child { padding-left: 0; }

.sx-cresc-funil__rotulo {
  color: var(--sx-ink);
  font: 700 12.5px/1.3 var(--mpvpc-font-heading);
}

.sx-cresc-funil__rotulo::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--sx-cresc-etapa-cor, var(--sx-line-strong));
}

.sx-cresc-funil__valor {
  max-width: 100%;
  color: var(--sx-ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.sx-cresc-funil__sub { color: var(--sx-ink-mut); font-size: 12px; }

.sx-cresc-funil__seta {
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  color: var(--sx-line-strong);
  transform: translateY(-50%);
}

.sx-cresc-atribuido { display: flex; flex-wrap: wrap; gap: 14px 28px; padding: 4px 0; }
.sx-cresc-detalhes { margin-top: 20px; }
.sx-cresc-detalhes__cartao { --sx-pad-card: 2px 18px; }
.sx-cresc-detalhes__cartao > div { border-top: 0 !important; }
.sx-cresc-detalhes__cartao > div > section:last-child { border-bottom: 0 !important; }
.sx-cresc-detalhes__cartao [role="region"] { padding: 0 0 18px !important; }
.sx-cresc-detalhes__conteudo { display: grid; gap: 16px; min-width: 0; }

.sx-cresc-definicoes { display: grid; gap: 16px; margin: 0; }
.sx-cresc-definicoes dt { color: var(--sx-ink); font-size: 13.5px; font-weight: 750; }
.sx-cresc-definicoes dd { margin: 4px 0 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.55; }

/* Resultado comercial: a coluna do funil é a mais larga para o rótulo de cada etapa caber inteiro no chevron. */
.sx-cresc-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
}

.sx-cresc-coluna { display: grid; gap: 16px; min-width: 0; }
.sx-cresc-bloco { min-width: 0; }

.sx-cresc-chevrons {
  display: flex;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.sx-cresc-chevrons__etapa {
  flex: 1 1 0;
  min-width: 0;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  margin-left: -6px;
  padding: 10px 14px 10px 22px;
  color: var(--sx-ink);
  background: color-mix(in oklab, var(--mpvpc-brand-ember) 14%, var(--sx-surface));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}

.sx-cresc-chevrons__etapa:first-child {
  margin-left: 0;
  padding-left: 14px;
  border-radius: 8px 0 0 8px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.sx-cresc-chevrons__etapa[data-nivel="1"] { background: color-mix(in oklab, var(--mpvpc-brand-ember) 24%, var(--sx-surface)); }
.sx-cresc-chevrons__etapa[data-nivel="2"] { background: color-mix(in oklab, var(--mpvpc-brand-ember) 38%, var(--sx-surface)); }
.sx-cresc-chevrons__etapa[data-nivel="3"] { background: color-mix(in oklab, var(--mpvpc-brand-ember) 56%, var(--sx-surface)); }
.sx-cresc-chevrons__etapa[data-nivel="4"] { background: var(--mpvpc-brand-ember); color: #0F0F0E; }
.sx-cresc-chevrons__etapa strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sx-cresc-chevrons__etapa span { font-size: 11.5px; font-weight: 650; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }

.sx-cresc-taxa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sx-line);
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-cresc-taxa strong { color: var(--sx-ink); font-size: 20px; font-weight: 800; }
.sx-cresc-nota { margin: 10px 0 0; color: var(--sx-ink-weak); font-size: 12px; line-height: 1.45; }

.sx-cresc-ia__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.sx-cresc-ia__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sx-cresc-ia__lista > li { min-width: 0; }
.sx-cresc-ia__lista > li + li { padding-top: 14px; border-top: 1px solid var(--sx-line); }
.sx-cresc-ia__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.sx-cresc-ia__titulo strong { color: var(--sx-ink); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.sx-cresc-ia__texto { color: var(--sx-ink-mut); font-size: 13.5px; line-height: 1.5; }
.sx-cresc-ia__recomendacao { margin-top: 6px; color: var(--sx-ai); font-size: 12.5px; line-height: 1.45; }
.sx-cresc-ia__data { display: block; margin-top: 6px; color: var(--sx-ink-weak); font-size: 11px; }

.sx-cresc-rotas { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-cresc-rotas__item { justify-content: space-between !important; }

.sx-cresc-analises { margin-top: 8px; }

.sx-cresc-analises__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.sx-cresc-analises__grade > * { min-width: 0; }

/* AIDEV-TODO: tema escuro sem --sx-st-neutral próprio (2,1:1); apagar quando o DS levar o token ao body.theme-dark.
   Como na Central (wave 3a), a área clareia o tom só dentro dela. */
body.theme-dark .sx-cresc {
  --sx-st-neutral: #B7B1A4;
  --sx-st-neutral-bd: #3A3733;
}

@media (max-width: 1360px) {
  .sx-cresc-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* AIDEV-NOTE: empilhado, as colunas somem (display: contents) e o order segue o celular das referências. */
  .sx-cresc-colunas { grid-template-columns: minmax(0, 1fr); }
  .sx-cresc-coluna { display: contents; }
  .sx-cresc-bloco--funil { order: 1; }
  .sx-cresc-bloco--canal { order: 2; }
  .sx-cresc-ia { order: 3; }
  .sx-cresc-bloco--rotas { order: 4; }
  .sx-cresc-funil { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .sx-cresc-funil__etapa,
  .sx-cresc-funil__etapa:first-child { padding: 6px 12px 6px 0; }
  .sx-cresc-funil__seta { display: none; }
}

@media (max-width: 1280px) {
  .sx-cresc-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Cartão de módulo estreito: "Abrir módulo" desce para a própria linha e o texto usa a largura toda. */
  .sx-cresc-modulo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "numeros" "abrir"; }
  .sx-cresc-modulo__abrir { justify-self: start; margin-left: -10px; }
}

@media (max-width: 1100px) {
  .sx-cresc-analises__grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .sx-cresc-modulos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .sx-cresc-barra { gap: 6px 12px; }
  .sx-cresc-abas { width: 100%; }
  .sx-cresc-abas .sx-filter-tabs__option { flex: 1 1 0 !important; justify-content: center; }
  .sx-cresc-hora { margin-left: 0; }
  .sx-cresc-acoes { align-items: stretch; }
  .sx-cresc-plataforma { width: 100%; }
  .sx-cresc-plataforma .sx-filter-tabs__option { flex: 1 1 0 !important; justify-content: center; }
  .sx-cresc-kpis,
  .sx-cresc-kpis--4,
  .sx-cresc-kpis--6 { grid-template-columns: minmax(0, 1fr); }

  .sx-cresc-modulo__numeros > div { padding: 0 12px; }

  /* Etapas do rascunho de campanha em grade 2 × 2: sem traço solto no começo de linha. */
  .sx-cresc-rascunho__etapas { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px !important; }
  .sx-cresc-rascunho__ligacao { display: none; }

  /* Funil consolidado vira lista vertical: ponto colorido, etapa à esquerda e valor ou selo à direita. */
  .sx-cresc-funil { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .sx-cresc-funil__etapa,
  .sx-cresc-funil__etapa:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "rotulo valor" "rotulo extra";
    align-items: center;
    column-gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--sx-line);
  }
  .sx-cresc-funil__etapa:first-child { border-top: 0; }
  .sx-cresc-funil__rotulo { grid-area: rotulo; display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
  .sx-cresc-funil__rotulo::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--sx-cresc-etapa-cor, var(--sx-line-strong));
  }
  .sx-cresc-funil__rotulo::after { display: none; }
  .sx-cresc-funil__valor { grid-area: valor; justify-self: end; font-size: 17px; text-align: right; }
  .sx-cresc-funil__etapa[data-sem-dado="true"] .sx-cresc-funil__valor { display: none; }
  .sx-cresc-funil__etapa[data-sem-dado="true"] .sx-cresc-funil__selo { grid-row: 1 / span 2; }
  .sx-cresc-funil__selo,
  .sx-cresc-funil__sub { grid-area: extra; justify-self: end; text-align: right; }

  /* Funil de oportunidades vira barras em coluna, como no celular das referências. */
  .sx-cresc-chevrons { flex-direction: column; gap: 4px; }
  .sx-cresc-chevrons__etapa,
  .sx-cresc-chevrons__etapa:first-child {
    min-height: 42px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-left: 0;
    padding: 8px 26px 8px 14px;
    border-radius: 6px 0 0 6px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  }
  .sx-cresc-chevrons__etapa strong { min-width: 48px; font-size: 18px; }
  .sx-cresc-chevrons__etapa span { font-size: 13px; }

  .sx-cresc-rotas { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sx-cresc-rotas__item { width: 100% !important; }
}

/* ============================================================
   DESIGN SYSTEM — catálogo operacional da fonte canônica
   ============================================================ */
.sx-main--design-system {
  padding-bottom: 30px !important;
}

.sx-design-system-page {
  display: grid;
  gap: 14px;
}

.sx-ds-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  min-height: 720px;
  overflow: hidden;
}

.sx-ds-catalog {
  min-width: 0;
  border-right: 1px solid var(--sx-line);
  background: var(--sx-surface-2);
}

.sx-ds-catalog__filters {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--sx-line);
  background: var(--sx-surface);
}

.sx-ds-search {
  position: relative;
  display: flex;
  align-items: center;
}

.sx-ds-search svg {
  position: absolute;
  left: 11px;
  color: var(--sx-ink-weak);
  pointer-events: none;
}

.sx-ds-search input,
.sx-ds-group-picker select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--sx-line-strong);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
  color: var(--sx-ink);
  font: 500 12.5px var(--mpvpc-font-heading);
}

.sx-ds-search input {
  padding: 0 11px 0 34px;
}

.sx-ds-group-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.sx-ds-group-picker > span {
  color: var(--sx-ink-weak);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sx-ds-group-picker select {
  padding: 0 9px;
}

.sx-ds-entry-list {
  max-height: 700px;
  overflow-y: auto;
  padding: 6px;
}

.sx-ds-entry {
  position: relative;
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 12px 12px 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-sm);
  background: transparent;
  color: var(--sx-ink);
  cursor: pointer;
  text-align: left;
}

.sx-ds-entry:hover {
  background: var(--sx-surface);
}

.sx-ds-entry.is-active {
  background: var(--sx-st-amber-bg);
}

/* AIDEV-NOTE: o item ativo ja se anuncia pelo fundo ambar; a barra lateral e so o reforco.
   Barra grossa vira "aba colada na lateral" e pesa a lista — 2px e um marcador, nao uma aba. */
.sx-ds-entry.is-active::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--mpvpc-brand-ember);
}

.sx-ds-entry__type {
  overflow: hidden;
  color: var(--sx-st-amber);   /* #A65300 no claro; no escuro o ember-on-light dava 2,9:1 no item ativo (29/09) */
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sx-ds-entry strong {
  font-size: 12.5px;
  line-height: 1.25;
}

.sx-ds-entry small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sx-ink-mut);
  font-family: var(--mpvpc-font-body);
  font-size: 11.5px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sx-ds-catalog__empty {
  margin: 0;
  padding: 28px 16px;
  color: var(--sx-ink-weak);
  font-size: 12px;
  text-align: center;
}

.sx-ds-preview {
  min-width: 0;
  padding: 16px;
  background: var(--sx-surface);
}

.sx-ds-preview__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-ds-preview__header > div:first-child {
  min-width: 0;
}

.sx-ds-preview__header span:first-child {
  color: var(--mpvpc-brand-ember-on-light);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sx-ds-preview__header h2 {
  margin: 4px 0 0;
  color: var(--sx-ink);
  font-size: 18px;
  letter-spacing: -.02em;
}

.sx-ds-preview__header p {
  max-width: 780px;
  margin: 5px 0 0;
  color: var(--sx-ink-mut);
  font-family: var(--mpvpc-font-body);
  font-size: 12.5px;
  line-height: 1.45;
}

.sx-ds-preview__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.sx-ds-proposal-versions {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 2.3fr);
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sx-line);
}

.sx-ds-proposal-versions__label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-ds-proposal-versions__label strong {
  color: var(--sx-ink);
  font-size: 11.5px;
  font-weight: 800;
}

.sx-ds-proposal-versions__label span {
  color: var(--sx-ink-mut);
  font-family: var(--mpvpc-font-body);
  font-size: 11px;
  line-height: 1.3;
}

.sx-ds-proposal-versions__options {
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  gap: 6px;
  min-width: 0;
}

.sx-ds-proposal-version {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--sx-line-strong);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface);
  color: var(--sx-ink);
  cursor: pointer;
  text-align: left;
}

.sx-ds-proposal-version:hover {
  border-color: var(--mpvpc-brand-ember);
  background: var(--sx-st-amber-bg);
}

.sx-ds-proposal-version.is-active {
  border-color: var(--mpvpc-brand-ember);
  box-shadow: inset 0 -3px 0 var(--mpvpc-brand-ember);
  background: var(--sx-st-amber-bg);
}

.sx-ds-proposal-version strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-ds-proposal-version span {
  color: var(--sx-ink-weak);
  font-size: 9.5px;
  font-weight: 650;
  text-transform: uppercase;
}

.sx-ds-preview__source {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  color: var(--sx-ink-weak);
  font-size: 10.5px;
}

.sx-ds-preview__source span {
  flex: 0 0 auto;
  font-weight: 750;
  text-transform: uppercase;
}

.sx-ds-preview__source code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-ds-frame-wrap {
  width: 100%;
  min-height: 620px;
  height: calc(100vh - 310px);
  max-height: 940px;
  overflow: hidden;
  border: 1px solid var(--sx-line-strong);
  border-radius: var(--sx-radius-sm);
  background: #c8c0b0;
}

.sx-ds-frame-wrap iframe,
.sx-ds-fullscreen-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #fff;
}

.sx-ds-fullscreen-frame {
  min-width: min(100%, 820px);
  min-height: calc(100vh - 100px);
}

/* Wave 13a (25/09/2026): categorias do manifesto em português no FilterTabs do kit (quebram em linhas dentro do
   catálogo; no celular fica o Dropdown), trilha acima do título e os números numa faixa de rodapé. */
.sx-ds-categorias { flex-wrap: wrap; row-gap: 2px; overflow-x: visible !important; }
.sx-ds-categorias .sx-filter-tabs__option { min-height: 34px !important; padding: 0 8px !important; }
.sx-ds-catalog__filters .sx-ds-group-picker { display: none; }

.sx-ds-preview__header .sx-ds-trilha {
  color: var(--sx-ink-weak);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.sx-ds-aviso { margin-bottom: 10px; }

.sx-ds-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  padding: 14px 18px !important;
}

.sx-ds-rodape__fonte {
  color: var(--sx-ink-weak);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sx-ds-rodape__numeros { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.sx-ds-rodape__numeros > div { display: flex; align-items: baseline; gap: 7px; }
.sx-ds-rodape__numeros dt { order: 2; color: var(--sx-ink-mut); font-size: 12.5px; }
.sx-ds-rodape__numeros dd { order: 1; margin: 0; color: var(--sx-ink); font-size: 18px; font-weight: 800; }

@media (max-width: 1180px) {
  .sx-ds-workspace { grid-template-columns: 260px minmax(0, 1fr); }
  .sx-ds-preview__header { display: grid; }
  .sx-ds-preview__actions { justify-content: flex-start; }
  .sx-ds-proposal-versions { grid-template-columns: minmax(0, 1fr); }
  .sx-ds-proposal-versions__options { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

@media (max-width: 820px) {
  .sx-ds-workspace { grid-template-columns: minmax(0, 1fr); }
  .sx-ds-catalog { border-right: 0; border-bottom: 1px solid var(--sx-line); }
  .sx-ds-entry-list { display: flex; gap: 6px; max-height: none; padding: 8px; overflow-x: auto; overflow-y: hidden; }
  .sx-ds-entry { flex: 0 0 230px; border: 1px solid var(--sx-line); }
  .sx-ds-entry.is-active::before { inset: 0 8px auto; width: auto; height: 3px; }
  .sx-ds-frame-wrap { min-height: 560px; height: 70vh; }
  .sx-ds-categorias { display: none !important; }
  .sx-ds-catalog__filters .sx-ds-group-picker { display: grid; }
}

@media (max-width: 520px) {
  /* No celular o selo do manifesto sai; o h1 (só leitor de tela) fica, sem ocupar linha da grade. */
  .sx-main--design-system .sx-design-system-page > .sx-page-header { display: contents !important; }
  .sx-main--design-system .sx-design-system-page > .sx-page-header > :not(h1) { display: none !important; }
  .sx-ds-rodape__numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .sx-ds-preview { padding: 10px; }
  .sx-ds-preview__actions { width: 100%; }
  .sx-ds-preview__actions .sx-btn { flex: 1 1 auto; }
  .sx-ds-proposal-versions__options {
    display: flex;
    margin-right: -10px;
    padding-right: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .sx-ds-proposal-version { flex: 0 0 170px; scroll-snap-align: start; }
  .sx-ds-frame-wrap { min-height: 480px; height: 66vh; overflow: auto; }
}

/* ============================================================
   WAVE 13A — Auditoria, Dados, Integrações e Conta & segurança (redesenho, 25/09/2026)
   Áreas próprias, cada uma com o seu prefixo: .sx-trilha-* (Auditoria), .sx-bancada-* (Dados),
   .sx-integ-* (Integrações) e .sx-seguranca-* (Conta). Só tokens do DS; o tema escuro e os remendos do kit
   ficam no fim do bloco. O Login (.sx-login-faixa) e o Design System (.sx-ds-*) seguem nos blocos deles.
   ============================================================ */

/* Auditoria: trilha só de leitura, com abas por fonte e o detalhe ao lado (gaveta abaixo de 1440 px). */
.sx-trilha {
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* O PageHeader traz 20 px de margem própria (estilo inline); com o espaço da grade, 6 px mantêm o ritmo das telas. */
.sx-trilha > .sx-page-header { margin-bottom: 6px !important; }

.sx-trilha-nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: 440px;
  padding: 9px 10px 9px 12px;
  border: 1px solid var(--sx-st-info-bd);
  border-radius: var(--sx-radius);
  background: var(--sx-st-info-bg);
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.45;
}

.sx-trilha-nota > svg { flex: 0 0 auto; color: var(--sx-st-info); }
.sx-trilha-nota > .sx-btn { flex: 0 0 auto; }

.sx-trilha-filtros { overflow: hidden; }

.sx-trilha-filtros__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
}

.sx-trilha-filtros__linha--fontes {
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid var(--sx-line);
}

.sx-trilha-busca {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 420px;
}

.sx-trilha-busca > svg {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--sx-ink-weak);
  pointer-events: none;
}

.sx-trilha-checagem { align-items: center !important; min-height: 38px !important; }

.sx-trilha-pendentes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.sx-trilha-contador {
  margin-left: auto;
  padding: 10px 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-trilha-ordem {
  margin: 0;
  padding: 0 14px 12px;
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.45;
}

/* A legenda é o Accordion do kit dentro de um cartão; o filete de baixo do último item sai. */
.sx-trilha-legenda {
  padding: 0 14px;
  border: 1px solid var(--sx-card-border);
  border-radius: var(--sx-radius);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
}

.sx-trilha-legenda > section:last-child { border-bottom: 0 !important; }

.sx-trilha-legenda__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 20px;
}

.sx-trilha-legenda__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.sx-trilha-legenda__item strong { display: block; color: var(--sx-ink); font-size: 13px; }
.sx-trilha-legenda__item span { display: block; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.4; }
.sx-trilha-legenda__item small { display: block; margin-top: 3px; color: var(--sx-ink-weak); font-size: 11.5px; }
.sx-trilha-legenda__critica { display: grid; place-items: center; min-width: 28px; }

.sx-trilha-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
  gap: 18px;
}

.sx-trilha-cartao { overflow: hidden; }
.sx-trilha-rolagem { overflow-x: auto; }

.sx-trilha-tabela {
  width: 100%;
  border-collapse: collapse;
}

.sx-trilha-tabela th {
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--sx-line);
  color: var(--sx-ink-weak);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.sx-trilha-tabela td {
  padding: 11px 14px;
  border-top: 1px solid var(--sx-line);
  color: var(--sx-ink);
  font-size: 13px;
  vertical-align: top;
}

.sx-trilha-tabela tbody tr:first-child > td { border-top: 0; }
.sx-trilha-tabela td[data-acoes] { text-align: right; white-space: nowrap; vertical-align: middle; }
.sx-trilha-linha { cursor: pointer; }
.sx-trilha-linha[data-selecionado="sim"] > td { background: var(--sx-st-amber-bg); }
.sx-trilha-vazio { padding: 18px !important; }

.sx-trilha-ator {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-trilha-ator__texto { display: grid; gap: 1px; min-width: 0; }
.sx-trilha-ator__texto strong { font-size: 13px; font-weight: 650; }

.sx-trilha-ator__texto code,
.sx-trilha-codigo {
  display: block;
  color: var(--sx-ink-weak);
  font-family: var(--mpvpc-font-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.sx-trilha-codigo { margin-top: 4px; }

.sx-trilha-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sx-trilha-entidade { color: var(--sx-ink-mut); font-size: 12.5px; }
.sx-trilha-quando { color: var(--sx-ink-mut); font-size: 12.5px; white-space: nowrap; }

.sx-trilha-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--sx-st-amber-bd);
  border-radius: 999px;
  background: var(--sx-st-amber-bg);
  color: var(--sx-st-amber);
}

.sx-trilha-lado { position: sticky; top: 12px; min-width: 0; }

.sx-trilha-lado__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-trilha-lado__cabeca h2 { margin: 0; color: var(--sx-ink); font-size: 14.5px; font-weight: 750; }

.sx-trilha-lado__vazio {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 44px 20px;
  color: var(--sx-ink-weak);
  text-align: center;
}

.sx-trilha-lado__vazio p { max-width: 240px; margin: 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.5; }
.sx-trilha-lado .sx-trilha-detalhe { padding: 16px; }

.sx-trilha-detalhe { display: grid; gap: 14px; min-width: 0; }

.sx-trilha-detalhe__ator { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sx-trilha-detalhe__ator strong { display: block; color: var(--sx-ink); font-size: 14px; }

.sx-trilha-detalhe__ator span {
  display: block;
  color: var(--sx-ink-mut);
  font-family: var(--mpvpc-font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.sx-trilha-detalhe__lista { display: grid; margin: 0; }

.sx-trilha-detalhe__linha {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--sx-line);
}

.sx-trilha-detalhe__linha dt {
  color: var(--sx-ink-weak);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sx-trilha-detalhe__linha dd { margin: 0; color: var(--sx-ink); font-size: 13px; overflow-wrap: anywhere; }
.sx-trilha-detalhe__linha dd.sx-trilha-detalhe__mono { color: var(--sx-ink-mut); font-family: var(--mpvpc-font-mono); font-size: 12px; }

.sx-trilha-detalhe__nota {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border-radius: var(--sx-radius-sm);
  background: var(--sx-surface-2);
  color: var(--sx-ink-weak);
}

.sx-trilha-detalhe__nota > svg { flex: 0 0 auto; margin-top: 1px; }
.sx-trilha-detalhe__nota p { margin: 0; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.5; }

.sx-trilha-guia { display: grid; gap: 14px; }
.sx-trilha-guia h3 { margin: 0 0 4px; color: var(--sx-ink); font-size: 13.5px; }
.sx-trilha-guia p,
.sx-trilha-guia li { margin: 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.55; }
.sx-trilha-guia ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }

/* Abaixo de 1440 px a tabela não cabe ao lado do detalhe: ele abre em gaveta (mesma largura no AuditoriaScreen). */
@media (max-width: 1439px) {
  .sx-trilha-area { grid-template-columns: minmax(0, 1fr); }
  .sx-trilha-lado { display: none; }
}

@media (max-width: 680px) {
  .sx-trilha-nota { grid-template-columns: auto minmax(0, 1fr); max-width: none; }
  .sx-trilha-nota > .sx-btn { grid-column: 2; justify-self: start; }
  .sx-trilha-filtros__linha { padding: 12px; }
  .sx-trilha-filtros__linha--fontes { padding-top: 0; padding-bottom: 0; }
  .sx-trilha-busca { flex-basis: 100%; max-width: none; }
  .sx-trilha-pendentes { margin-left: 0; }
  .sx-trilha-contador { flex-basis: 100%; margin-left: 0; padding: 0 0 10px; }
  .sx-trilha-ordem { padding: 0 12px 12px; }
  .sx-trilha-quando { white-space: normal; }
}

/* Dados: bancada das tabelas lidas, com a fonte, o limite da leitura e a escrita de cada contrato.
   A grade rola dentro do cartão (como antes); a página não ganha rolagem lateral. */
.sx-bancada { min-width: 0; }
.sx-bancada-alerta { margin-bottom: 12px; }
.sx-bancada-selo { white-space: nowrap; }

.sx-bancada-limite {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.45;
}

.sx-bancada-limite > svg { flex: 0 0 auto; margin-top: 1px; color: var(--sx-st-warn); }

.sx-bancada-sem-fonte {
  padding: 1px 6px;
  border: 1px dashed var(--sx-line-strong);
  border-radius: 999px;
  color: var(--sx-ink-weak);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Cabeçalho: o selo "sem fonte" vai embaixo do rótulo para a coluna vazia não alargar a grade. */
.sx-bancada-th-rotulo { display: inline-grid; gap: 3px; }

/* Ações na coluna fixa do DS (.sx-table-fixa + .sx-col-fixa-fim): Editar e Excluir sem rolar a grade de lado. */
.sx-bancada-th-acoes {
  height: 36px;
  padding: 0 14px;
  color: var(--sx-ink-weak);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.sx-bancada-acoes { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.sx-bancada-sem-acao { padding: 0 10px; color: var(--sx-ink-weak); }
.sx-bancada-vazio { padding: 28px 14px !important; color: var(--sx-ink-weak); font-size: 13px; text-align: center; }

.sx-bancada-rodape {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.5;
}

.sx-bancada-rodape > svg { flex: 0 0 auto; margin-top: 2px; }

/* Formulário do registro: duas colunas iguais; o campo fica alinhado embaixo quando o rótulo quebra. */
.sx-bancada-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0 18px;
}

.sx-bancada-guia { display: grid; gap: 12px; }
.sx-bancada-guia p { margin: 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.55; }
.sx-bancada-guia ul { display: grid; margin: 0; padding: 0; list-style: none; }

.sx-bancada-guia li {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: 2px 14px;
  padding: 9px 0;
  border-top: 1px solid var(--sx-line);
}

.sx-bancada-guia li:last-child { border-bottom: 1px solid var(--sx-line); }
.sx-bancada-guia li strong { color: var(--sx-ink); font-size: 13px; }
.sx-bancada-guia li span { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }

.sx-bancada-guia li code {
  grid-column: 2;
  color: var(--sx-ink-weak);
  font-family: var(--mpvpc-font-mono);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .sx-bancada-acoes { display: flex; width: 100%; }
  .sx-bancada-form { grid-template-columns: minmax(0, 1fr); }
  .sx-bancada-guia li { grid-template-columns: minmax(0, 1fr); }
  .sx-bancada-guia li code { grid-column: 1; }
}

/* Integrações: números com a unidade, abas da mesma tela e cartões por conta com as verificações recolhidas. */
/* A coluna única em minmax(0, 1fr): sem isso a barra de abas (rótulos sem quebra) alargava a grade no celular. */
.sx-integ {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.sx-integ > .sx-page-header { margin-bottom: 6px !important; }
.sx-integ .sx-integ-numeros { margin-bottom: 0; }

.sx-integ-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
}

.sx-integ-selo { white-space: nowrap; }
.sx-integ-lida { color: var(--sx-ink-mut); font-size: 12.5px; }

.sx-integ-nota,
.sx-integ-rodape {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--sx-ink-weak);
  font-size: 12.5px;
  line-height: 1.5;
}

.sx-integ-nota > svg,
.sx-integ-rodape > svg { flex: 0 0 auto; margin-top: 2px; }
.sx-integ-rodape { font-size: 12px; }

.sx-integ-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px !important;
}

.sx-integ-busca {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

.sx-integ-busca > svg {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--sx-ink-weak);
  pointer-events: none;
}

/* O Combobox do kit tem 200 px mínimos: a coluna nunca fica menor que isso. */
.sx-integ-filtro { flex: 0 1 230px; min-width: 200px; }

.sx-integ-secao { display: grid; gap: 12px; min-width: 0; }

.sx-integ-explica {
  max-width: 92ch;
  margin: 0;
  color: var(--sx-ink-mut);
  font-size: 13px;
  line-height: 1.55;
}

.sx-integ-explica--linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.sx-integ-titulo { margin: 0; color: var(--sx-ink); font-size: 15px; font-weight: 750; }

.sx-integ-pendencias caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sx-integ-pendencias td { vertical-align: top; }

.sx-integ-celula { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.sx-integ-celula strong { color: var(--sx-ink); font-size: 13px; }
.sx-integ-celula small { color: var(--sx-ink-weak); font-size: 12px; line-height: 1.4; }
.sx-integ-conta-rotulo { color: var(--sx-ink-mut); font-size: 12.5px; overflow-wrap: anywhere; }
.sx-integ-so-leitura { color: var(--sx-ink-mut); font-size: 12.5px; font-weight: 600; }

.sx-integ-grupo { display: grid; gap: 10px; min-width: 0; }

.sx-integ-grupo > h2 {
  margin: 4px 0 0;
  color: var(--sx-ink-weak);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sx-integ-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  align-items: start;
  gap: 12px;
}

.sx-integ-grade--curta { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

.sx-integ-conta {
  display: grid;
  gap: 10px;
  padding: 14px 16px 4px !important;
}

.sx-integ-conta__topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.sx-integ-icone {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  background: var(--sx-surface-2);
  color: var(--sx-ink-mut);
}

.sx-integ-conta__texto { display: grid; gap: 4px; min-width: 0; }

.sx-integ-conta__nome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.sx-integ-conta__nome strong { color: var(--sx-ink); font-size: 14px; }

.sx-integ-conta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: var(--sx-ink-weak);
  font-size: 11.5px;
}

.sx-integ-conta__acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sx-line);
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.45;
}

.sx-integ-conta__acao > span:first-child:not(:last-child) { flex: 1 1 200px; min-width: 0; }

/* Accordion do kit dentro do cartão: sem o filete de baixo do último item e sem o recuo de 40 px do modo numerado. */
.sx-integ-conta__detalhe { margin: 0 -4px; }
.sx-integ-conta__detalhe > section:last-child { border-bottom: 0 !important; }
.sx-integ-conta__detalhe [role="region"] { padding-left: 4px !important; }

.sx-integ-verificacoes {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-integ-verificacoes li {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.sx-integ-verificacoes li > span:first-child { justify-self: start; }
.sx-integ-verificacoes strong { display: block; color: var(--sx-ink); font-size: 12.5px; }
.sx-integ-verificacoes small { display: block; margin-top: 2px; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.45; }

.sx-integ-escopos {
  margin: 10px 0 0;
  color: var(--sx-ink-weak);
  font-size: 11.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sx-integ-credencial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px !important;
}

.sx-integ-credencial strong { color: var(--sx-ink); font-size: 13px; }

.sx-integ-provedor { overflow: hidden; }

.sx-integ-provedor__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-integ-provedor__topo strong { color: var(--sx-ink); font-size: 13.5px; }
.sx-integ-provedor .sx-integ-verificacoes { padding: 12px 14px 14px; }

.sx-integ-erros { overflow: hidden; }

.sx-integ-erro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 13px 16px;
  border-top: 1px solid var(--sx-line);
}

.sx-integ-erro:first-child { border-top: 0; }
.sx-integ-erro__texto { display: grid; flex: 1 1 320px; gap: 4px; min-width: 0; }

.sx-integ-erro__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.sx-integ-erro__linha strong { color: var(--sx-ink); font-size: 13.5px; }
.sx-integ-erro__linha code { color: var(--sx-ink-mut); font-family: var(--mpvpc-font-mono); font-size: 12px; }
.sx-integ-erro__linha span { color: var(--sx-ink-weak); font-size: 12px; overflow-wrap: anywhere; }
.sx-integ-erro__mensagem { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }
.sx-integ-erro__tentativas { color: var(--sx-ink-weak); font-size: 12px; }
.sx-integ-erro__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.sx-integ-confirma { display: grid; gap: 10px; }
.sx-integ-confirma p { margin: 0; color: var(--sx-ink-mut); font-size: 13.5px; line-height: 1.55; }

.sx-integ-confirma__botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 680px) {
  .sx-integ-topo { justify-content: flex-start; }
  .sx-integ-busca,
  .sx-integ-filtro { flex-basis: 100%; }

  /* Pendências: a DataTable do kit vira cartões rótulo:valor (o data-label já vem do kit). */
  .sx-integ-pendencias table,
  .sx-integ-pendencias tbody,
  .sx-integ-pendencias tr,
  .sx-integ-pendencias td { display: block; width: 100%; }

  /* O thead da DataTable traz position inline (sticky/static): só o !important o tira da tela. */
  .sx-integ-pendencias thead {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sx-integ-pendencias tr { padding: 8px 0; border-bottom: 1px solid var(--sx-line); }
  .sx-integ-pendencias tr:last-child { border-bottom: 0; }

  .sx-integ-pendencias td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    padding: 6px 14px !important;
    border-bottom: 0 !important;
  }

  .sx-integ-pendencias td > * { justify-self: start; }

  .sx-integ-pendencias td::before {
    content: attr(data-label);
    color: var(--sx-ink-weak);
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .sx-integ-erro__botoes { width: 100%; }
}

/* Conta & segurança: identidade com o e-mail protegido, troca de senha e o que ainda não tem contrato. */
.sx-seguranca {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.sx-seguranca > .sx-page-header { margin-bottom: 4px !important; }

.sx-seguranca-identidade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  padding: 18px 22px !important;
}

.sx-seguranca-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 999px;
  background: var(--mpvpc-brand-ember);
  color: var(--mpvpc-cta-fg);
  font-size: 19px;
  font-weight: 800;
}

.sx-seguranca-quem { display: grid; flex: 1 1 220px; gap: 4px; min-width: 0; }
.sx-seguranca-quem strong { color: var(--sx-ink); font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }

.sx-seguranca-quem span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
}

.sx-seguranca-quem code { color: var(--sx-ink); font-family: var(--mpvpc-font-mono); font-size: 12.5px; }

.sx-seguranca-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.sx-seguranca-lado { display: grid; gap: 16px; min-width: 0; }
.sx-seguranca-cartao { padding: 20px 22px !important; }
.sx-seguranca-cartao--requisitos { padding: 4px 18px !important; }
.sx-seguranca-titulo { display: flex; align-items: center; gap: 10px; color: var(--mpvpc-brand-ember-on-light); }
.sx-seguranca-titulo h2 { margin: 0; color: var(--sx-ink); font-size: 16px; font-weight: 700; }
.sx-seguranca-corpo { display: grid; gap: 14px; margin-top: 12px; }
.sx-seguranca-texto { margin: 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.55; }
.sx-seguranca-campo { display: grid; gap: 7px; }
.sx-seguranca-rotulo { color: var(--sx-ink-mut); font-size: 12.5px; font-weight: 600; }
.sx-seguranca-senha { position: relative; }
.sx-seguranca-olho { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); }

.sx-seguranca-forca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.sx-seguranca-forca span { font-size: 12px; font-weight: 700; }
.sx-seguranca-forca span[data-tom="danger"] { color: var(--sx-st-danger); }
.sx-seguranca-forca span[data-tom="warn"] { color: var(--sx-st-warn); }
.sx-seguranca-forca span[data-tom="success"] { color: var(--sx-st-success); }
.sx-seguranca-aviso { margin: 0; color: var(--sx-st-danger); font-size: 12px; }
.sx-seguranca-botoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* Requisitos no Accordion do kit, dentro do cartão: sem os filetes externos e sem o recuo do modo numerado. */
.sx-seguranca-sanfona { border-top: 0 !important; }
.sx-seguranca-sanfona > section:last-child { border-bottom: 0 !important; }
.sx-seguranca-sanfona [role="region"] { padding-left: 4px !important; }

.sx-seguranca-requisitos {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-seguranca-requisitos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.sx-seguranca-marca {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--sx-line-strong);
  border-radius: 999px;
  background: var(--sx-surface-2);
  color: var(--sx-st-success);
}

.sx-seguranca-requisitos li[data-ok="sim"] .sx-seguranca-marca { border-color: var(--sx-st-success-bd); background: var(--sx-st-success-bg); }
.sx-seguranca-requisito { color: var(--sx-ink-mut); font-size: 13px; }
.sx-seguranca-requisitos li[data-ok="sim"] .sx-seguranca-requisito { color: var(--sx-ink); font-weight: 600; }

.sx-seguranca-tag {
  color: var(--sx-ink-weak);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sx-seguranca-tag--obrigatorio { color: var(--mpvpc-brand-ember-on-light); }
.sx-seguranca-nota { margin: 12px 0 0; color: var(--sx-ink-weak); font-size: 12px; line-height: 1.45; }
.sx-seguranca-eyebrow { margin-bottom: 8px; }
.sx-seguranca-lista { display: grid; margin: 0 0 14px; }

.sx-seguranca-lista > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 11px 0;
  border-top: 1px solid var(--sx-line);
}

.sx-seguranca-lista > div:first-child { border-top: 0; }
.sx-seguranca-lista dt { color: var(--sx-ink-mut); font-size: 13px; }
.sx-seguranca-lista dd { margin: 0; color: var(--sx-ink); font-size: 13px; font-weight: 600; }
.sx-seguranca-lista dd[data-tom="warn"] { color: var(--sx-st-warn); }
.sx-seguranca-sessoes { overflow: hidden; }

.sx-seguranca-sessoes__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-seguranca-sessoes__topo h2 { margin: 0; color: var(--sx-ink); font-size: 15px; font-weight: 700; }
.sx-seguranca-sessoes__corpo { padding: 14px 20px 18px; }

@media (max-width: 1080px) {
  .sx-seguranca-grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .sx-seguranca-identidade,
  .sx-seguranca-cartao { padding: 16px !important; }
  .sx-seguranca-cartao--requisitos { padding: 2px 14px !important; }
  .sx-seguranca-sessoes__topo { padding: 14px 16px; }
  .sx-seguranca-sessoes__corpo { padding: 12px 16px 16px; }
}

/* ------------------------------------------------------------
   Remendos da wave 13a para o kit, só nas telas desta wave.
   ------------------------------------------------------------ */

/* O Modal do kit (z-index 60) fica embaixo da barra do celular (70). Mesmo remendo das waves 2 e 10a.
   AIDEV-TODO: o kit já sobe o popup em 680 px ou menos (bloco "POPUP DO KIT", 30/09); falta cobrir 681-920 px para apagar esta regra e o teste da wave 13. */
@media (max-width: 920px) {
  .sx-trilha .sx-modal-overlay,
  .sx-bancada .sx-modal-overlay,
  .sx-integ .sx-modal-overlay { z-index: 75 !important; }
}

/* O tema escuro do DS não redefine neutro, perigo, aviso, informação e sucesso, nem a borda do âmbar: os selos
   e avisos ficavam claros sobre o fundo escuro (neutro #555248 sobre #232120 dá 2,1:1). Aqui eles ganham tons
   escuros com texto claro (6,4:1 ou mais, medidos). AIDEV-TODO: levar para body.theme-dark no DS e apagar. */
body.theme-dark .sx-trilha,
body.theme-dark .sx-bancada,
body.theme-dark .sx-integ,
body.theme-dark .sx-seguranca {
  --sx-st-neutral: var(--sx-ink-mut);
  --sx-st-neutral-bd: var(--sx-line-strong);
  --sx-st-danger: #D98A7E;
  --sx-st-danger-bd: #6B302A;
  --sx-st-warn: #E0B062;
  --sx-st-warn-bg: #2A2112;
  --sx-st-warn-bd: #574421;
  --sx-st-info: #8DB9DE;
  --sx-st-info-bg: #15212B;
  --sx-st-info-bd: #2C4556;
  --sx-st-success: #7FC79A;
  --sx-st-success-bg: #16241B;
  --sx-st-success-bd: #2E4A37;
  --sx-st-amber-bd: #5C4526;
}

/* O Checkbox do kit é o controle nativo com accent-color; sem color-scheme ele fica branco no tema escuro.
   Desde 30/09/2026 a regra é do kit e vale para todas as telas (bloco "POPUP DO KIT, CAMPO DE MÊS", no fim). */

/* Spec 031 — leitura de apoio recolhida (Cockpit: "Leituras da IA"). O sumario e uma linha unica:
   titulo + estado; o conteudo so ocupa a tela quando o dono pede. */
.sx-disclosure {
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius-md, 8px);
  background: var(--sx-surface);
  padding: 0 16px;
}
.sx-disclosure-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--sx-ink);
  list-style: none;
}
.sx-disclosure-summary::-webkit-details-marker { display: none; }
.sx-disclosure-summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--sx-ink-weak);
  border-bottom: 1.5px solid var(--sx-ink-weak);
  transform: rotate(-45deg);
  margin-right: 8px;
  flex: 0 0 auto;
  transition: transform 120ms ease;
}
.sx-disclosure[open] > .sx-disclosure-summary::before { transform: rotate(45deg); }
.sx-disclosure > :not(summary) { padding-bottom: 14px; }

/* ============================================================
   HOJE — redesenho wave 4a (25/09/2026). Visão geral (#/cockpit) e Operação (#/operacao) com a mesma casca
   (HojeCabecalho) e a mesma leitura (features/hoje/leitura.js). Só arranjo: componentes, cores e tipografia
   continuam do kit e dos tokens. Prefixo .sx-hoje-* num trecho que as outras waves não tocam.
   ============================================================ */
.sx-hoje-casca { margin-bottom: 2px; }

.sx-hoje-casca__hora { color: var(--sx-ink-weak); }

/* Modos como na Central de Atendimento: a faixa senta na linha que separa a casca do conteúdo. */
.sx-hoje-modos {
  margin: -6px 0 18px;
  border-bottom: 1px solid var(--sx-line);
}

.sx-hoje-modos .sx-filter-tabs__option {
  min-height: 46px;
  font-size: 13.5px;
}

.sx-hoje-aviso { margin-bottom: 12px; }

/* Três sinais lado a lado a partir de 681 px (o painel-extra forçava 2 + 1 abaixo de 1080 px). Abaixo de
   681 px fica 1 coluna: a regra de 05/09 que acabou com o estouro de 140 px no celular continua valendo. */
@media (min-width: 681px) {
  .sx-shell .sx-kpi-grid.sx-hoje-sinais {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
}

.sx-hoje-sinais { margin-bottom: 24px; }

.sx-hoje-colunas { margin-bottom: 24px; }

.sx-hoje-colunas > * { min-width: 0; }

/* Linha clicável das listas curtas (decisões e propostas esfriando): texto livre quebra em qualquer ponto
   em vez de esticar a coluna (lição da wave 3a com dado real). */
.sx-hoje-linha {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sx-hoje-linha__texto {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sx-hoje-linha__titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--sx-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sx-hoje-linha__meta {
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Valor, selo e seta andam juntos: quando a linha quebra, o grupo inteiro desce alinhado à direita. */
.sx-hoje-linha__lado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

.sx-hoje-linha__valor {
  color: var(--sx-ink);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sx-hoje-linha__ponto {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--sx-st-warn);
}

.sx-hoje-rodape {
  padding: 10px 18px;
  border-top: 1px solid var(--sx-line);
  color: var(--sx-ink-weak);
  font-size: 12px;
}

.sx-hoje-nota {
  margin: 10px 0 0;
  color: var(--sx-ink-weak);
  font-size: 12px;
  line-height: 1.5;
}

/* Execução: os 5 grupos do Outbox. O estado vem no número colorido e no filete lateral; o rótulo diz o
   estado em palavras (não só a cor). */
.sx-hoje-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.sx-hoje-grupo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--sx-glass-border);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-glass-bg-soft);
}

.sx-hoje-grupo__numero {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sx-hoje-grupo__rotulo {
  min-width: 0;
  color: var(--sx-ink-mut);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sx-hoje-falha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--sx-st-danger-bd);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-st-danger-bg);
}

.sx-hoje-falha__texto {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--sx-st-danger);
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Atalhos: 4 por linha no monitor, 2 em notebook e tablet, 1 no celular estreito. */
.sx-hoje-atalhos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.sx-hoje-atalho {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sx-hoje-atalho__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-hoje-atalho__icone {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--sx-st-amber);
  background: var(--sx-st-amber-bg);
}

.sx-hoje-atalho__titulo {
  margin: 0;
  color: var(--sx-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sx-hoje-atalho__texto {
  margin: 0;
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sx-hoje-atalho__resumo {
  margin: 0;
  color: var(--sx-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sx-hoje-atalho__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

/* Operação: pipeline ponderado e aberto lado a lado, sem somar. */
.sx-hoje-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.sx-hoje-pipeline__bloco,
.sx-hoje-fiscal__bloco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--sx-glass-border);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-glass-bg-soft);
  box-shadow: 0 0 0 1px var(--sx-glass-edge);
}

.sx-hoje-pipeline__bloco strong {
  color: var(--sx-ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.sx-hoje-pipeline__bloco span:last-child {
  color: var(--sx-ink-mut);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sx-hoje-fiscal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.sx-hoje-fiscal__bloco[data-tom="atencao"] {
  border-color: var(--sx-st-amber-bd);
  background: var(--sx-st-amber-bg);
  box-shadow: none;
}

.sx-hoje-fiscal__numero {
  color: var(--sx-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sx-hoje-fiscal__bloco[data-tom="atencao"] .sx-hoje-fiscal__numero { color: var(--sx-st-amber); }

.sx-hoje-fiscal__rotulo {
  color: var(--sx-ink);
  font-size: 12.5px;
  font-weight: 650;
}

.sx-hoje-fiscal__unidade {
  margin-bottom: 6px;
  color: var(--sx-ink-weak);
  font-size: 11.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sx-hoje-tarefa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 13px;
  padding: 12px 18px;
}

.sx-hoje-tarefa__ponto {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--sx-st-warn);
}

.sx-hoje-tarefa__ponto[data-prioridade="alta"] { background: var(--sx-st-danger); }

.sx-hoje-tarefa__titulo {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--sx-ink);
  font-size: 13.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sx-hoje-tarefa__opp {
  color: var(--sx-ink-weak);
  font-family: var(--mpvpc-font-mono);
  font-size: 11px;
}

.sx-hoje-tarefa__quando {
  color: var(--sx-ink-mut);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Alvo do ?secao= (atalhos da Visão geral): recebe o foco sem anel de mouse. */
.sx-hoje-secao {
  min-width: 0;
  scroll-margin-top: 16px;
}

.sx-hoje-secao:focus:not(:focus-visible) { outline: none; }

/* AIDEV-TODO: escuro sem --sx-st-danger/success/neutral próprios (1,5 a 2,4:1); Hoje usa tinta até o DS. */
/* Até o DS levar esses tokens para body.theme-dark, Hoje escreve os números e o aviso de falha em tinta
   (14,6:1); o estado continua no filete, na borda e no rótulo. */
body.theme-dark .sx-hoje .sx-hoje-grupo__numero,
body.theme-dark .sx-hoje .sx-hoje-falha__texto,
body.theme-dark .sx-hoje .sx-hoje-falha .sx-btn--danger {
  color: var(--sx-ink) !important;
}

/* Mesmo ajuste da Central (wave 3a) para o tom neutro: avatares de sistema e robô e selos neutros. */
body.theme-dark .sx-hoje {
  --sx-st-neutral: var(--sx-ink-mut);
  --sx-st-neutral-bd: var(--sx-line-strong);
}

@media (max-width: 1360px) {
  .sx-hoje-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .sx-hoje-linha { padding: 12px 14px; }
  .sx-hoje-tarefa { padding: 12px 14px; }
  .sx-hoje-rodape { padding: 10px 14px; }
  .sx-hoje-grupos { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
}

@media (max-width: 520px) {
  .sx-hoje-atalhos { grid-template-columns: minmax(0, 1fr); }
}

/* 05/09/2026 — o main e a referencia dos filhos absolutos (regioes de leitor de tela, ancoras): sem isto um
   span oculto no fim do conteudo esticava o <html> e deixava um vazio de ~1200px abaixo do shell. */
.sx-shell .sx-main { position: relative; }

/* Texto livre longo: previa recortada por linhas + botao de expandir.
   O corte vale so no estado fechado; aberto, o texto flui inteiro. */
.sx-texto-longo {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sx-texto-longo--corte {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--sx-texto-linhas, 2);
}

.sx-texto-longo__btn {
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mpvpc-brand-ember-on-light);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sx-texto-longo__btn:hover {
  color: var(--sx-ink);
}

/* ============================================================
   Automações › Laís/Volts ao vivo (E1, 25/09/2026)
   AIDEV-NOTE: layout por container query (a largura útil muda com a sidebar recolhida), não por viewport.
   Ordem do DOM = ordem do celular (contexto → agente → ferramentas → sequência); a grade do desktop só
   reposiciona. Cores só por token: o tema escuro herda sem regra própria.
   ============================================================ */
.sx-automacoes { min-width: 0; }
.sx-automacoes-areas { margin-top: 4px; }

.sx-agente-painel { container-type: inline-size; container-name: agente; display: grid; gap: 16px; min-width: 0; }
.sx-agente-painel h2, .sx-agente-painel h3, .sx-agente-painel h4, .sx-agente-painel p { margin: 0; }
.sx-agente-painel h3 { color: var(--sx-ink); font-size: 14px; font-weight: 700; line-height: 1.3; }
.sx-agente-painel h4 { color: var(--sx-ink); font-size: 12.5px; font-weight: 700; }
.sx-agente-sem-dado { color: var(--sx-ink-weak); font-weight: 500; font-style: italic; }
.sx-agente-nota { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }

/* Card do kit aplica padding: var(--sx-pad-card) inline; o respiro de cada bloco muda pelo token, não por padding. */
.sx-agente-cabeca { --sx-pad-card: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sx-agente-cabeca h2 { color: var(--sx-ink); font-size: var(--sx-fs-section-title, 17px); font-weight: 750; letter-spacing: -0.01em; }
.sx-agente-cabeca p { margin-top: 4px; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.45; max-width: 70ch; }
.sx-agente-cabeca__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sx-agente-cabeca__hora { color: var(--sx-ink-mut); font-size: 12px; font-variant-numeric: tabular-nums; }

.sx-agente-icone { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--sx-ink-mut); background: var(--sx-st-neutral-bg); border: 1px solid var(--sx-st-neutral-bd); }
.sx-agente-icone--passo { width: 30px; height: 30px; color: var(--sx-st-info); background: var(--sx-st-info-bg); border-color: var(--sx-st-info-bd); }
.sx-agente-icone--ferramenta { color: var(--sx-st-success); background: var(--sx-st-success-bg); border-color: var(--sx-st-success-bd); }
.sx-agente-icone--mini { width: 28px; height: 28px; }
.sx-agente-icone--amber { color: var(--sx-st-amber); background: var(--sx-st-amber-bg); border-color: var(--sx-st-amber-bd); }
.sx-agente-icone--danger { color: var(--sx-st-danger); background: var(--sx-st-danger-bg); border-color: var(--sx-st-danger-bd); }

/* Canvas: celular primeiro (coluna única). */
.sx-agente-canvas { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ctx" "lais" "tools" "seq"; align-items: start; }
.sx-agente-canvas__ctx { grid-area: ctx; display: grid; gap: 10px; min-width: 0; }
.sx-agente-canvas__lais { grid-area: lais; min-width: 0; }
.sx-agente-canvas__tools { grid-area: tools; display: grid; justify-items: stretch; gap: 6px; min-width: 0; }
.sx-agente-canvas__tools > .sx-agente-seta--baixo { justify-self: center; }
.sx-agente-canvas__tools > .sx-card { width: 100%; }
.sx-agente-canvas__seq { grid-area: seq; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.sx-agente-seq__item { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.sx-agente-seq__item > .sx-card { width: 100%; }

.sx-agente-seta { display: grid; place-items: center; color: var(--sx-line-strong); transform: rotate(90deg); }
.sx-agente-seta--baixo { transform: none; }
.sx-agente-legenda { display: flex; align-items: center; gap: 6px; color: var(--sx-ink-mut); font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em; }
.sx-agente-legenda svg { transform: rotate(90deg); color: var(--sx-line-strong); }

.sx-agente-contexto { --sx-pad-card: 14px 16px; display: grid; gap: 10px; min-width: 0; }
.sx-agente-contexto__topo { display: flex; gap: 12px; align-items: flex-start; }
.sx-agente-contexto__textos { display: grid; gap: 3px; min-width: 0; }
.sx-agente-contexto__textos p { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }
.sx-agente-contexto__selo { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-agente-contexto__corpo { display: grid; gap: 8px; min-width: 0; }

.sx-agente-metricas { margin: 0; display: grid; gap: 6px; }
.sx-agente-metricas--grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.sx-agente-metrica { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.sx-agente-metrica dt { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.35; min-width: 0; }
.sx-agente-metrica dd { margin: 0; color: var(--sx-ink); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.sx-agente-metrica--compacta { display: grid; gap: 1px; justify-content: stretch; }
.sx-agente-metrica--compacta dd { text-align: left; font-size: 15px; }
.sx-agente-metrica__valor--warn { color: var(--sx-st-warn) !important; }
.sx-agente-metrica__valor--danger { color: var(--sx-st-danger) !important; }

.sx-agente-leituras { display: grid; gap: 6px; padding: 8px 10px; border-radius: var(--sx-radius-xs); background: var(--sx-surface-2); border: 1px solid var(--sx-line); min-width: 0; }
.sx-agente-leituras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sx-agente-leituras li { display: grid; gap: 1px; font-size: 12px; min-width: 0; }
.sx-agente-leituras__titulo { color: var(--sx-ink-weak); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sx-agente-leituras__rotulo { color: var(--sx-ink); font-weight: 650; }
.sx-agente-leituras__valor, .sx-agente-leituras__quando { color: var(--sx-ink-mut); font-variant-numeric: tabular-nums; }
.sx-agente-leituras__aviso { color: var(--sx-st-warn); font-size: 12px; line-height: 1.4; }

.sx-agente-no { --sx-pad-card: 16px 18px; display: grid; gap: 10px; border-color: color-mix(in oklab, var(--mpvpc-brand-ember) 55%, var(--sx-card-border)) !important; background: linear-gradient(180deg, color-mix(in oklab, var(--sx-st-amber-bg) 70%, transparent), transparent 70%), var(--sx-card-bg) !important; }
.sx-agente-no__topo { display: flex; align-items: center; gap: 12px; }
.sx-agente-no__avatar { position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--sx-st-amber); background: var(--sx-st-amber-bg); border: 1px solid var(--sx-st-amber-bd); }
.sx-agente-no__avatar--ativo::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 999px; background: var(--sx-st-amber); box-shadow: 0 0 0 3px var(--sx-surface); animation: sx-agente-pulso 1.6s ease-in-out infinite; }
@keyframes sx-agente-pulso { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .sx-agente-no__avatar--ativo::after { animation: none; } }
.sx-agente-no__nome { display: grid; gap: 1px; }
.sx-agente-no__nome h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.sx-agente-no__nome span { color: var(--sx-ink-mut); font-size: 13px; }
.sx-agente-no__descricao { color: var(--sx-ink-mut); font-size: 13px; line-height: 1.45; }
.sx-agente-no__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-agente-no__estado { display: grid; gap: 4px; justify-items: start; }
.sx-agente-no__ultima { color: var(--sx-ink-mut); font-size: 12px; }

.sx-agente-passo { --sx-pad-card: 12px 13px; display: grid; gap: 8px; align-content: start; min-width: 0; height: 100%; }
/* Passo é estreito no desktop: rótulo em cima, número embaixo, sem quebrar palavra. */
.sx-agente-passo .sx-agente-metrica { display: grid; gap: 0; justify-content: stretch; }
.sx-agente-passo .sx-agente-metrica dt { font-size: 11.5px; }
.sx-agente-passo .sx-agente-metrica dd { text-align: left; font-size: 15px; overflow-wrap: normal; word-break: normal; }
.sx-agente-passo__topo { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sx-agente-passo__topo h3 { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.sx-agente-passo__descricao { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; }

/* As colunas das ferramentas seguem a largura do próprio cartão (no tablet ele divide a linha com o contexto). */
.sx-agente-ferramentas { --sx-pad-card: 16px 18px; container-type: inline-size; container-name: ferramentas; display: grid; gap: 14px; min-width: 0; }
.sx-agente-ferramentas__cabeca { display: flex; gap: 12px; align-items: flex-start; }
.sx-agente-ferramentas__cabeca p { margin-top: 3px; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }
.sx-agente-capacidades { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.sx-agente-capacidade { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface); min-width: 0; }
.sx-agente-capacidade--escrita_opcional { border-color: var(--sx-st-amber-bd); background: color-mix(in oklab, var(--sx-st-amber-bg) 45%, var(--sx-surface)); }
.sx-agente-capacidade__texto { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.sx-agente-capacidade__texto strong { color: var(--sx-ink); font-size: 13px; }
.sx-agente-capacidade__texto > span { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; }
.sx-agente-capacidade__selos { display: flex !important; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.sx-agente-capacidade__quando { color: var(--sx-ink-weak) !important; font-size: 11.5px !important; }
.sx-agente-ferramentas__hermes { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sx-line); min-width: 0; }
.sx-agente-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sx-agente-chips li { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 3px 9px; border: 1px solid var(--sx-line); border-radius: 999px; background: var(--sx-surface-2); color: var(--sx-ink); font-size: 12px; overflow-wrap: anywhere; }
.sx-agente-chips__conta { color: var(--sx-ink-mut); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-agente-chips--skills li { font-family: var(--mpvpc-font-mono); font-size: 11px; }

.sx-agente-cartoes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.sx-agente-cartao, .sx-agente-incidentes, .sx-agente-execucoes { --sx-pad-card: 14px 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.sx-agente-cartao__cabeca { display: flex; gap: 11px; align-items: flex-start; }
.sx-agente-cartao__cabeca p { margin-top: 2px; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; }
.sx-agente-cartao__corpo { display: grid; gap: 10px; min-width: 0; }

.sx-agente-decisoes, .sx-agente-usadas, .sx-agente-saude, .sx-agente-incidentes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-agente-decisoes li { display: grid; gap: 3px; padding: 8px 10px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-xs); background: var(--sx-surface); min-width: 0; }
.sx-agente-decisoes__linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sx-agente-decisoes__quando, .sx-agente-decisoes__envio { color: var(--sx-ink-mut); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sx-agente-decisoes__contato { color: var(--sx-ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-agente-decisoes__contato small { color: var(--sx-ink-weak); font-family: var(--mpvpc-font-mono); font-size: 11px; font-weight: 500; }
.sx-agente-decisoes__motivo { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; }
.sx-agente-usadas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding-bottom: 7px; border-bottom: 1px solid var(--sx-line); }
.sx-agente-usadas li:last-child { border-bottom: 0; padding-bottom: 0; }
.sx-agente-usadas__rotulo { color: var(--sx-ink); font-size: 12.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sx-agente-usadas__rotulo small { color: var(--sx-ink-mut); font-weight: 500; }
.sx-agente-usadas__conta { color: var(--sx-ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.sx-agente-usadas__conta em { color: var(--sx-st-danger); font-style: normal; font-weight: 600; }
.sx-agente-usadas__quando { grid-column: 1 / -1; color: var(--sx-ink-mut); font-size: 11.5px; }
.sx-agente-saude__linha { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; align-items: start; padding-bottom: 7px; border-bottom: 1px solid var(--sx-line); }
.sx-agente-saude__linha:last-child { border-bottom: 0; padding-bottom: 0; }
.sx-agente-saude__icone { grid-row: span 2; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; }
.sx-agente-saude__icone--success { color: var(--sx-st-success); background: var(--sx-st-success-bg); }
.sx-agente-saude__icone--info { color: var(--sx-st-info); background: var(--sx-st-info-bg); }
.sx-agente-saude__icone--amber { color: var(--sx-st-amber); background: var(--sx-st-amber-bg); }
.sx-agente-saude__icone--warn { color: var(--sx-st-warn); background: var(--sx-st-warn-bg); }
.sx-agente-saude__icone--danger { color: var(--sx-st-danger); background: var(--sx-st-danger-bg); }
.sx-agente-saude__icone--neutral { color: var(--sx-ink-mut); background: var(--sx-st-neutral-bg); }
.sx-agente-saude__rotulo { color: var(--sx-ink); font-size: 12.5px; font-weight: 650; }
.sx-agente-saude__valor { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sx-agente-incidentes__lista li { display: grid; gap: 3px; justify-items: start; padding: 8px 10px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-xs); background: var(--sx-surface); }
.sx-agente-incidentes__frase { color: var(--sx-ink); font-size: 13px; font-weight: 600; }
.sx-agente-incidentes__meta { color: var(--sx-ink-mut); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.sx-agente-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-agente-passos li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 1px 10px; align-items: start; }
.sx-agente-passos__ponto { grid-row: span 2; width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: var(--sx-st-neutral); }
.sx-agente-passos__ponto--success { background: var(--sx-st-success); }
.sx-agente-passos__ponto--danger { background: var(--sx-st-danger); }
.sx-agente-passos__ponto--warn { background: var(--sx-st-warn); }
.sx-agente-passos__rotulo { color: var(--sx-ink); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.sx-agente-passos__rotulo small { color: var(--sx-ink-mut); font-weight: 500; }
.sx-agente-passos__meta { color: var(--sx-ink-mut); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sx-agente-execucoes [role="region"] { padding-left: 4px !important; }

@container agente (min-width: 560px) {
  .sx-agente-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container ferramentas (min-width: 470px) {
  .sx-agente-capacidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Botão "Ver todas" só existe no cartão estreito; Btn do kit põe display inline, daí o !important. */
.sx-agente-mais { display: none !important; }
@container ferramentas (max-width: 469px) {
  .sx-agente-mais { display: inline-flex !important; justify-self: start; }
  .sx-agente-capacidades[data-aberto="false"] .sx-agente-capacidade--secundaria { display: none; }
  .sx-agente-ferramentas__hermes[data-aberto="false"] .sx-agente-chips { display: none; }
}
@container ferramentas (min-width: 760px) {
  .sx-agente-capacidades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet e notebook estreito (área útil de 680 px): contexto | agente + ferramentas; sequência embaixo. */
@container agente (min-width: 680px) {
  .sx-agente-canvas { grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "ctx lais" "ctx tools" "seq seq"; column-gap: 16px; }
  .sx-agente-canvas__seq { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
  .sx-agente-seq__item { grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 4px; }
  .sx-agente-seta { transform: none; }
  .sx-agente-seta--baixo { transform: none; }
  .sx-agente-legenda { justify-content: flex-end; }
  .sx-agente-legenda svg { transform: none; }
  /* A sequência fica numa linha própria: a seta de entrada não aponta de lugar nenhum. */
  .sx-agente-seta--inicio { visibility: hidden; }
}

/* Desktop largo (imagem 13): contexto | Laís | sequência; ferramentas abaixo da Laís. */
@container agente (min-width: 1060px) {
  .sx-agente-canvas { grid-template-columns: minmax(236px, 256px) minmax(214px, 236px) minmax(0, 1fr); grid-template-areas: "ctx lais seq" "ctx tools tools"; }
  .sx-agente-canvas__lais { align-self: stretch; display: grid; }
  .sx-agente-canvas__lais > .sx-card { align-self: center; }
  .sx-agente-canvas__tools > .sx-agente-seta--baixo { justify-self: start; margin-left: 110px; }
  .sx-agente-seta--inicio { visibility: visible; }
  .sx-agente-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Passo estreito: ícone em cima do título, para "Revalidação" e "Envio pela ponte" caberem inteiros. */
  .sx-agente-passo__topo { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ==========================================================================
   Automações › Execuções (E2, 25/09/2026): lista das execuções do motor e rastro nó a nó.
   Só a forma do dado (chaves, tamanhos, hash) aparece no bloco "Ver a forma"; nunca conteúdo.
   ========================================================================== */
.sx-execucoes { display: grid; gap: 14px; min-width: 0; }
.sx-execucoes-lista { display: grid; gap: 12px; min-width: 0; }
.sx-execucoes-lista .sx-filter-tabs { max-width: 100%; }
.sx-execucoes-lista [role="region"] { padding-left: 4px !important; }
.sx-execucoes-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sx-execucoes-resumo__ultima { color: var(--sx-ink-mut); font-size: 12px; font-variant-numeric: tabular-nums; }

.sx-execucoes-detalhe { display: grid; gap: 12px; min-width: 0; }
.sx-execucoes-detalhe__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 14px; margin: 0; }
.sx-execucoes-detalhe__meta div { min-width: 0; }
.sx-execucoes-detalhe__meta dt { color: var(--sx-ink-mut); font-size: 11.5px; }
.sx-execucoes-detalhe__meta dd { margin: 2px 0 0; color: var(--sx-ink); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sx-execucoes-detalhe__motivo { margin: 0; color: var(--sx-ink); font-size: 12.5px; }
.sx-execucoes-detalhe__motivo--erro { color: var(--sx-st-danger); }

.sx-execucoes-rastro { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-execucoes-rastro li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-xs); background: var(--sx-surface); }
.sx-execucoes-rastro__no--danger { border-color: var(--sx-st-danger); }
.sx-execucoes-rastro__ponto { grid-row: span 2; width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: var(--sx-st-neutral); }
.sx-execucoes-rastro__ponto--success { background: var(--sx-st-success); }
.sx-execucoes-rastro__ponto--danger { background: var(--sx-st-danger); }
.sx-execucoes-rastro__ponto--warn { background: var(--sx-st-warn); }
.sx-execucoes-rastro__ponto--info { background: var(--sx-st-info); }
.sx-execucoes-rastro__rotulo { color: var(--sx-ink); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.sx-execucoes-rastro__rotulo small { display: block; margin-top: 1px; color: var(--sx-ink-weak); font-family: var(--mpvpc-font-mono); font-size: 10.5px; font-weight: 500; }
.sx-execucoes-rastro__meta { color: var(--sx-ink-mut); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sx-execucoes-rastro__falha { grid-column: 2; margin: 2px 0 0; color: var(--sx-st-danger); font-size: 12px; overflow-wrap: anywhere; }
.sx-execucoes-rastro__formas { grid-column: 2; display: grid; gap: 8px; }
.sx-execucoes-rastro__forma { grid-column: 2; justify-self: start; }
.sx-execucoes-forma { display: grid; gap: 4px; min-width: 0; }
/* Só o bloco solto do evento ocupa a coluna 2; dentro de __formas ele já está na coluna certa. */
.sx-execucoes-rastro li > .sx-execucoes-forma { grid-column: 2; }
.sx-execucoes-forma__titulo { color: var(--sx-ink-mut); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.sx-execucoes-forma pre { margin: 0; max-height: 260px; overflow: auto; padding: 8px 10px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-xs); background: var(--sx-surface-2); color: var(--sx-ink); font-family: var(--mpvpc-font-mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Filtros (imagem 79): número, período e "só falhas"; empilham no celular. */
.sx-execucoes-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.sx-execucoes-filtros .sx-filter-tabs { max-width: 100%; }
.sx-execucoes-filtros__falhas { flex: 0 1 260px; min-width: 200px; }
/* Rastro por etapa: entrada → contexto → agente (ferramentas abaixo) → plano → envio → recibo. */
.sx-execucoes-fases { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sx-execucoes-fase { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0 12px; padding-bottom: 14px; }
.sx-execucoes-fase:not(:last-child)::before { content: ""; position: absolute; left: 3.5px; top: 14px; bottom: 0; width: 1px; background: var(--sx-line-strong); }
.sx-execucoes-fase > .sx-execucoes-rastro__ponto { position: relative; z-index: 1; grid-row: 1; margin-top: 6px; box-shadow: 0 0 0 3px var(--sx-surface); }
.sx-execucoes-fase__corpo { display: grid; gap: 6px; min-width: 0; }
.sx-execucoes-fase__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sx-execucoes-fase__cabeca strong { color: var(--sx-ink); font-size: 13.5px; }
.sx-execucoes-fase__descricao { margin: 0; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.45; }
.sx-execucoes-fase__nota { margin: 0; color: var(--sx-ink); font-size: 12px; line-height: 1.45; }
.sx-execucoes-fase__ferramentas { display: grid; gap: 4px; justify-items: start; padding: 8px 10px; border: 1px dashed var(--sx-line-strong); border-radius: var(--sx-radius-xs); color: var(--sx-ink-mut); font-size: 12px; line-height: 1.45; }
.sx-execucoes-fase--neutral .sx-execucoes-fase__cabeca strong { color: var(--sx-ink-mut); }
/* E2b: ferramentas confirmadas pelo stream da run, abaixo do agente; borda cheia quando o rastro está completo. */
/* A lista estica na largura do bloco (o bloco centraliza à esquerda com justify-items: start). */
.sx-execucoes-fase__ferramentas--confirmadas, .sx-execucoes-fase__ferramentas--nenhuma { border-style: solid; border-color: var(--sx-line); background: var(--sx-surface-2); }
.sx-execucoes-ferramentas__resumo { color: var(--sx-ink-weak); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sx-execucoes-ferramentas { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; justify-self: stretch; min-width: 0; }
.sx-execucoes-ferramentas__item { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 6px 8px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-xs); background: var(--sx-surface); }
.sx-execucoes-rastro__ponto--amber { background: var(--sx-st-amber); }
.sx-execucoes-detalhe__atendimento { justify-self: start; }

/* Automações › Fluxos (E2b): estado de cada fluxo pelo retrato da saúde que o motor grava a cada minuto. */
.sx-fluxos { display: grid; gap: 12px; min-width: 0; }
.sx-fluxos-motor .sx-agente-cartao__cabeca > div { flex: 1 1 auto; min-width: 0; }
.sx-fluxos-motor__estado { align-self: flex-start; }
.sx-fluxos-motor__dados { margin: 0; display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.sx-fluxos-motor__dados div { display: grid; gap: 2px; min-width: 0; }
.sx-fluxos-motor__dados dt { color: var(--sx-ink-weak); font-size: 11.5px; }
.sx-fluxos-motor__dados dd { margin: 0; color: var(--sx-ink); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sx-fluxos-motor__threads { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--sx-ink-mut); font-size: 12px; }
.sx-fluxos-motor__threads li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sx-fluxos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.sx-fluxos-item { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px 14px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); }
.sx-fluxos-item__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sx-fluxos-item__cabeca strong { flex: 1 1 100%; color: var(--sx-ink); font-size: 13.5px; }
.sx-fluxos-item__detalhe { margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; }
.sx-fluxos-partes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.sx-fluxos-parte { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 6px 8px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-xs); background: var(--sx-surface); }
.sx-fluxos-parte__ponto { grid-row: span 2; width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: var(--sx-st-neutral); }
.sx-fluxos-motor__threads .sx-fluxos-parte__ponto { margin-top: 0; }
.sx-fluxos-parte__ponto--success { background: var(--sx-st-success); }
.sx-fluxos-parte__ponto--danger { background: var(--sx-st-danger); }
.sx-fluxos-parte__ponto--warn { background: var(--sx-st-warn); }
.sx-fluxos-parte__ponto--amber { background: var(--sx-st-amber); }
.sx-fluxos-parte__ponto--info { background: var(--sx-st-info); }
.sx-fluxos-parte__rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--sx-ink); font-size: 12.5px; font-weight: 600; }
.sx-fluxos-parte__estado { color: var(--sx-ink-weak); font-size: 11.5px; font-weight: 500; }
.sx-fluxos-parte__meta { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sx-fluxos-parte__falha { grid-column: 2; color: var(--sx-st-danger); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.sx-fluxos-item__execucoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; color: var(--sx-ink-mut); font-size: 12px; }
/* Fluxo descrito (gatilho e ações, pedido do dono de 01/10): linha inteira da grade, descrição em duas colunas no desktop. */
.sx-fluxos-item--descrito { grid-column: 1 / -1; }
.sx-fluxos-item__descricao { margin: 0; display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sx-fluxos-item__descricao > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.sx-fluxos-item__descricao dt { color: var(--sx-ink-weak); font-size: 11.5px; font-weight: 600; }
.sx-fluxos-item__descricao dd { margin: 0; color: var(--sx-ink); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.sx-fluxos-item__acoes { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.sx-fluxos-item__ajustes { margin: 0; color: var(--sx-ink-weak); font-size: 12px; line-height: 1.45; }
.sx-fluxos-item--descrito .sx-fluxos-partes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.sx-fluxos-item__recibo { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-xs); background: var(--sx-surface); }
.sx-fluxos-item__recibo .sx-fluxos-parte__ponto { grid-row: auto; }
.sx-fluxos-item__recibo p { margin: 0; color: var(--sx-ink); font-size: 12.5px; line-height: 1.45; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sx-fluxos-item__recibo-nota { color: var(--sx-ink-mut); }

/* Automações › E-mail (fase E-mail 1): a esteira de e-mail, só leitura.
   AIDEV-NOTE: layout por container query (a largura útil muda com a sidebar recolhida); cores só por token, então o
   tema escuro herda sem regra própria. Nada de borda grossa de um lado só: estado vai em selo, ponto ou fundo. */
.sx-email { container-type: inline-size; container-name: email; display: grid; gap: 16px; min-width: 0; }
.sx-email h2, .sx-email h3, .sx-email h4, .sx-email h5, .sx-email p { margin: 0; }
.sx-email-bloco { display: grid; gap: 12px; min-width: 0; }
.sx-email-bloco__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.sx-email-bloco__cabeca > div:first-child { display: grid; gap: 4px; min-width: 0; max-width: 80ch; }
.sx-email-bloco__cabeca h3 { color: var(--sx-ink); font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
.sx-email-bloco__cabeca p { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.sx-email-bloco__atalhos, .sx-email-cartao__atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-email-nota { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-email-destaque { color: var(--sx-ink); font-size: 13.5px; font-weight: 600; line-height: 1.45; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.sx-email-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.sx-email-cartao h4 { color: var(--sx-ink); font-size: 13.5px; font-weight: 700; }
.sx-email-cartao h5 { color: var(--sx-ink-weak); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sx-email-cartao__cabeca { display: grid; gap: 3px; }
.sx-email-cartao__cabeca p { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; }
.sx-email-sublista { display: grid; gap: 6px; }
.sx-email-dados { margin: 0; display: grid; gap: 8px 16px; grid-template-columns: minmax(0, 1fr); }
.sx-email-dados div { display: grid; gap: 2px; min-width: 0; }
.sx-email-dados dt { color: var(--sx-ink-weak); font-size: 11.5px; }
.sx-email-dados dd { margin: 0; color: var(--sx-ink); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-email-notas { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.45; }
.sx-email-entrada .sx-agente-cartao__cabeca > div { flex: 1 1 auto; min-width: 0; }
.sx-email-entrada__estado { align-self: flex-start; }

/* Fila: a tabela do kit vira cartões rótulo:valor quando o bloco fica estreito (7 colunas pedem ~940 px).
   AIDEV-NOTE: o DataTable põe `position` INLINE no <thead> (sticky/static); sem o !important o cabeçalho volta ao
   fluxo, as colunas nowrap forçam a largura e a tabela rola por dentro no celular (achado do QA local de 25/09). */
.sx-email-fila { container-type: inline-size; container-name: email-fila; min-width: 0; }
.sx-email-fila__tabela caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@container email-fila (max-width: 940px) {
  .sx-email-fila__tabela table, .sx-email-fila__tabela tbody, .sx-email-fila__tabela tr, .sx-email-fila__tabela td { display: block; width: auto; }
  .sx-email-fila__tabela thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sx-email-fila__tabela tr { padding: 6px 0; border-bottom: 1px solid var(--sx-line); }
  .sx-email-fila__tabela td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 6px 14px !important; border: 0 !important; text-align: right !important; overflow-wrap: anywhere; }
  .sx-email-fila__tabela td::before { content: attr(data-label); flex: 0 0 auto; color: var(--sx-ink-weak); font-size: 11.5px; font-weight: 700; text-align: left; }
  .sx-email-fila__tabela td[data-label="Tipo"] { display: block; text-align: left !important; }
  .sx-email-fila__tabela td[data-label="Tipo"]::before { content: none; }
}

/* Esteiras e caixas: cartões em grade que se ajusta à largura útil. */
.sx-email-grupo { display: grid; gap: 8px; min-width: 0; }
.sx-email-grupo__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--sx-ink); font-size: 13.5px; font-weight: 700; }
.sx-email-grupo__titulo span { color: var(--sx-ink-weak); font-size: 12px; font-weight: 500; }
.sx-email-esteiras, .sx-email-caixas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.sx-email-esteira, .sx-email-caixa { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px 14px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); }
.sx-email-esteira__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sx-email-esteira__cabeca strong { flex: 1 1 auto; min-width: 0; color: var(--sx-ink); font-size: 13.5px; overflow-wrap: anywhere; }
.sx-email-esteira__detalhe { color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-email-controles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sx-email-controles li { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-ink); font-size: 12px; font-weight: 600; }
.sx-email-controles .sx-fluxos-parte__ponto, .sx-email-estado .sx-fluxos-parte__ponto { margin-top: 0; }
.sx-email-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-ink-mut); font-size: 12px; font-weight: 650; white-space: nowrap; }
.sx-email-vivo { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-xs); background: var(--sx-surface); color: var(--sx-ink); font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sx-email-vivo svg { flex: 0 0 auto; margin-top: 2px; color: var(--sx-ink-weak); }
.sx-email-vivo--sem_leitura, .sx-email-vivo--sem_dado { border-style: dashed; color: var(--sx-ink-mut); background: transparent; }
.sx-email-fonte { color: var(--sx-ink-weak); font-family: var(--mpvpc-font-mono); font-size: 10.5px; line-height: 1.45; overflow-wrap: anywhere; }
@container email (min-width: 900px) {
  .sx-email-entrada .sx-email-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Follow-up de proposta pelo Gmail ("Ver fluxo", 29/09): o FlowCanvas do kit em leitura, as listas da última rodada
   e o passo a passo em texto. As tabelas das listas viram rótulo:valor quando o cartão fica estreito, como a fila. */
.sx-email-esteira--fluxo { border-left: 3px solid var(--mpvpc-brand-ember); }
.sx-email-esteira__acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-fluxo-email { padding: 14px 16px; border: 1px solid var(--sx-card-border); border-radius: var(--sx-radius); background: var(--sx-card-bg); box-shadow: var(--sx-card-shadow); }
/* O painel mora logo depois do cartão do follow-up, em linha inteira da grade (30/09). O título recebe o foco ao abrir. */
.sx-email-esteiras > .sx-email-esteiras__fluxo { grid-column: 1 / -1; min-width: 0; }
.sx-fluxo-email__titulo { scroll-margin-top: 16px; }
/* Foco programático no título (não é controle): sem o anel global de :focus-visible (tokens.css), que desenhava uma
   caixa em volta do título ao abrir. */
.sx-fluxo-email__titulo:focus, .sx-fluxo-email__titulo:focus-visible { outline: none; box-shadow: none; }
.sx-fluxo-email__canvas-acao { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-fluxo-email__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-fluxo-email__rodada { color: var(--sx-ink); font-variant-numeric: tabular-nums; }
.sx-fluxo-email__canvas { min-width: 0; }
.sx-fluxo-email__selo.sx-fluxo-email__selo { font-size: 10.5px; padding: 0 6px; white-space: nowrap; }
.sx-fluxo-email__listas.sx-email-grade { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.sx-fluxo-email__lista { min-width: 0; container-type: inline-size; container-name: fluxo-lista; }
.sx-fluxo-email__tabela caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@container fluxo-lista (max-width: 400px) {
  .sx-fluxo-email__tabela table, .sx-fluxo-email__tabela tbody, .sx-fluxo-email__tabela tr, .sx-fluxo-email__tabela td { display: block; width: auto; }
  .sx-fluxo-email__tabela thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sx-fluxo-email__tabela tr { padding: 6px 0; border-bottom: 1px solid var(--sx-line); }
  .sx-fluxo-email__tabela td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 5px 12px !important; border: 0 !important; text-align: right !important; overflow-wrap: anywhere; white-space: normal !important; }
  .sx-fluxo-email__tabela td::before { content: attr(data-label); flex: 0 0 auto; color: var(--sx-ink-weak); font-size: 11.5px; font-weight: 700; text-align: left; }
  .sx-fluxo-email__tabela td[data-label="Empresa"] { display: block; text-align: left !important; }
  .sx-fluxo-email__tabela td[data-label="Empresa"]::before { content: none; }
}
.sx-fluxo-email__passo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.sx-fluxo-email__passo-lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); }
.sx-fluxo-email__passo-id { display: grid; place-items: center; height: 24px; border: 1px solid var(--sx-line); border-radius: 999px; background: var(--sx-surface); color: var(--sx-ink-mut); font-size: 11px; font-weight: 700; }
.sx-fluxo-email__passo-lista strong { color: var(--sx-ink); font-size: 12.5px; }
.sx-fluxo-email__passo-tipo { margin-left: 6px; color: var(--sx-ink-weak); font-size: 11px; font-weight: 600; }
.sx-fluxo-email__passo-lista p { margin: 2px 0 0; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.sx-fluxo-email__passo-total { min-width: 24px; text-align: right; color: var(--sx-ink); font-size: 13px; font-weight: 700; }
/* "O que o e-mail diz": o texto exato dos 3 modelos (revisão de 30/09) */
.sx-fluxo-email__modelo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.sx-fluxo-email__modelo { padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); }
.sx-fluxo-email__modelo strong { color: var(--sx-ink); font-size: 12.5px; }
.sx-fluxo-email__modelo .sx-fluxo-email__passo-tipo { display: block; margin: 2px 0 0; }
.sx-fluxo-email__modelo p { margin: 6px 0 0; color: var(--sx-ink); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.sx-fluxo-email__modelo .sx-fluxo-email__modelo-assunto { color: var(--sx-ink-mut); font-size: 12px; font-weight: 600; }
.sx-fluxo-email__modelo-assinatura { margin: 8px 0 0; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; }

/* ============================================================
   Automações › editor de fluxos (E3b) — FlowCanvas, NodeCard e a Tela B
   ------------------------------------------------------------
   Regras necessárias do React Flow 12 (@xyflow/react, dist/base.css),
   copiadas só no que o canvas usa e com as cores trocadas por tokens:
   MIT License — Copyright (c) 2019-2025 webkid GmbH.
   Permission is hereby granted, free of charge, to any person obtaining a copy
   of this software and associated documentation files (the "Software"), to deal
   in the Software without restriction, including without limitation the rights
   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   copies of the Software, and to permit persons to whom the Software is
   furnished to do so, subject to the following conditions: the above copyright
   notice and this permission notice shall be included in all copies or
   substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS",
   WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
   ============================================================ */
/* AIDEV-NOTE: o CSS do React Flow não vem de node_modules (o build só publica design-prototipos/). Nova regra
   do React Flow que o canvas passar a usar entra aqui, sempre com token do DS no lugar de cor fixa. */
.sx-flow { position: relative; width: 100%; min-width: 0; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); overflow: hidden; }
.sx-flow .react-flow {
  direction: ltr; position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 0;
  font-family: var(--mpvpc-font-heading);
  --xy-edge-stroke: var(--sx-line-strong);
  --xy-edge-stroke-width: 1.6;
  --xy-edge-stroke-selected: var(--mpvpc-brand-ember);
  --xy-connectionline-stroke: var(--mpvpc-brand-ember);
  --xy-connectionline-stroke-width: 2;
  --xy-handle-background-color: var(--sx-surface);
  --xy-background-color: var(--sx-surface-2);
  --xy-selection-background-color: color-mix(in oklab, var(--mpvpc-brand-ember) 8%, transparent);
  --xy-selection-border: 1px dashed var(--mpvpc-brand-ember);
  background-color: var(--xy-background-color);
}
.sx-flow .react-flow__background { background-color: var(--xy-background-color); pointer-events: none; z-index: -1; }
.sx-flow .react-flow__background-pattern.dots { fill: var(--xy-background-pattern-color-props, var(--sx-line-strong)); }
.sx-flow .react-flow__container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.sx-flow .react-flow__pane { z-index: 1; touch-action: none; }
.sx-flow .react-flow__pane.draggable { cursor: grab; }
.sx-flow .react-flow__pane.dragging { cursor: grabbing; }
.sx-flow .react-flow__viewport { transform-origin: 0 0; z-index: 2; pointer-events: none; }
.sx-flow .react-flow__renderer { z-index: 4; }
.sx-flow .react-flow__selection { z-index: 6; }
.sx-flow .react-flow__edge-path { stroke: var(--xy-edge-stroke); stroke-width: var(--xy-edge-stroke-width); fill: none; }
.sx-flow .react-flow__connection-path { stroke: var(--xy-connectionline-stroke); stroke-width: var(--xy-connectionline-stroke-width); fill: none; }
.sx-flow .react-flow__edges { position: absolute; }
.sx-flow .react-flow__edges svg { overflow: visible; position: absolute; pointer-events: none; }
.sx-flow .react-flow__edge { pointer-events: visibleStroke; }
.sx-flow .react-flow__edge.selectable { cursor: pointer; }
.sx-flow .react-flow__edge.inactive { pointer-events: none; }
.sx-flow .react-flow__edge.selected, .sx-flow .react-flow__edge:focus, .sx-flow .react-flow__edge:focus-visible { outline: none; }
.sx-flow .react-flow__edge.selected .react-flow__edge-path,
.sx-flow .react-flow__edge.selectable:focus .react-flow__edge-path,
.sx-flow .react-flow__edge.selectable:focus-visible .react-flow__edge-path { stroke: var(--xy-edge-stroke-selected); stroke-width: 2.4; }
.sx-flow .react-flow__arrowhead polyline { stroke: var(--xy-edge-stroke); }
.sx-flow .react-flow__arrowhead polyline.arrowclosed { fill: var(--xy-edge-stroke); }
.sx-flow .react-flow__connection { pointer-events: none; }
.sx-flow svg.react-flow__connectionline { z-index: 1001; overflow: visible; position: absolute; }
.sx-flow .react-flow__nodes { pointer-events: none; transform-origin: 0 0; }
.sx-flow .react-flow__node { position: absolute; user-select: none; pointer-events: all; transform-origin: 0 0; box-sizing: border-box; cursor: default; border-radius: var(--sx-radius); }
.sx-flow .react-flow__node.selectable { cursor: pointer; }
.sx-flow .react-flow__node.draggable { cursor: grab; pointer-events: all; }
.sx-flow .react-flow__node.draggable.dragging { cursor: grabbing; }
.sx-flow .react-flow__node:focus, .sx-flow .react-flow__node:focus-visible { outline: none; }
.sx-flow .react-flow__node:focus-visible .sx-node-card { border-color: var(--mpvpc-brand-ember); box-shadow: var(--sx-ring); }
.sx-flow .react-flow__nodesselection { z-index: 3; transform-origin: left top; pointer-events: none; }
.sx-flow .react-flow__nodesselection-rect { position: absolute; pointer-events: all; cursor: grab; }
.sx-flow .react-flow__nodesselection-rect, .sx-flow .react-flow__selection { background: var(--xy-selection-background-color); border: var(--xy-selection-border); }
.sx-flow .react-flow__handle { position: absolute; pointer-events: none; min-width: 5px; min-height: 5px; background-color: var(--xy-handle-background-color); }
.sx-flow .react-flow__handle.connectingfrom, .sx-flow .react-flow__handle.connectionindicator { pointer-events: all; }
.sx-flow .react-flow__handle.connectionindicator { cursor: crosshair; }
.sx-flow .react-flow__handle-left { top: 50%; left: 0; transform: translate(-50%, -50%); }
.sx-flow .react-flow__handle-right { top: 50%; right: 0; transform: translate(50%, -50%); }
.sx-flow .react-flow__panel { position: absolute; z-index: 5; margin: 12px; }
.sx-flow .react-flow__panel.bottom { bottom: 0; }
.sx-flow .react-flow__panel.left { left: 0; }
.sx-flow .react-flow__edgelabel-renderer, .sx-flow .react-flow__viewport-portal { position: absolute; width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; user-select: none; }
.sx-flow .react-flow__attribution { display: none; }

/* Alças (pontos de ligação) e ligações do editor */
.sx-flow-handle.react-flow__handle { width: 12px; height: 12px; border: 2px solid var(--sx-ink-mut); border-radius: 999px; background: var(--sx-surface); }
.sx-flow-handle.react-flow__handle.connectionindicator:hover,
.sx-flow-handle.react-flow__handle.connectingfrom,
.sx-flow-handle.react-flow__handle.valid { border-color: var(--mpvpc-brand-ember); background: var(--sx-st-amber-bg); }
.sx-flow-handle--oculta.react-flow__handle { opacity: 0; pointer-events: none; }
.sx-flow--leitura .sx-flow-handle.react-flow__handle { border-color: var(--sx-line-strong); }
.sx-flow .sx-flow-edge--tracejada .react-flow__edge-path { stroke-dasharray: 6 5; stroke: var(--sx-ai); }
.sx-flow .sx-flow-edge--tracejada .react-flow__arrowhead polyline { stroke: var(--sx-ai); fill: var(--sx-ai); }
.sx-flow-controles { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface); box-shadow: var(--sx-shadow-card); }
.sx-flow-controle { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--sx-radius-xs); background: transparent; color: var(--sx-ink-mut); cursor: pointer; }
.sx-flow-controle:hover { background: var(--sx-surface-2); color: var(--sx-ink); }
.sx-flow-controle:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.sx-flow-controles__zoom { min-width: 44px; text-align: center; font-size: 12px; font-weight: 650; }
.sx-flow__vazio { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--sx-ink-mut); font-size: 13px; pointer-events: none; }
.sx-flow--carregando { border-style: dashed; }

/* NodeCard: passo do fluxo (kit) */
.sx-node-card { position: relative; width: 232px; display: grid; gap: 6px; padding: 10px 12px 10px; border: 1px solid var(--sx-line-strong); border-radius: var(--sx-radius); background: var(--sx-surface); box-shadow: var(--sx-shadow-card); color: var(--sx-ink); text-align: left; transition: border-color var(--mpvpc-motion-base) var(--mpvpc-motion-ease), box-shadow var(--mpvpc-motion-base) var(--mpvpc-motion-ease); }
.sx-node-card.is-selected { border-color: var(--mpvpc-brand-ember); box-shadow: var(--sx-ring); }
/* A cabeça vai de borda a borda do cartão: a alça de entrada (e a oculta do agente) fica na borda, não sobre o ícone. */
.sx-node-card__head { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 -12px; padding: 0 12px; }
.sx-node-card__icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); color: var(--sx-ink-mut); }
.sx-node-card--trigger .sx-node-card__icon { background: var(--sx-st-success-bg); color: var(--sx-st-success); }
.sx-node-card--agent .sx-node-card__icon { background: var(--sx-ai-bg); color: var(--sx-ai); }
.sx-node-card__titles { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.sx-node-card__title { font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sx-node-card__type.sx-node-card__type { font-size: 10.5px; padding: 0 6px; }
.sx-node-card__summary { margin: 0; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sx-node-card__step { position: absolute; top: -10px; left: -10px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--sx-line); border-radius: 999px; background: var(--sx-surface); color: var(--sx-ink-mut); font-size: 11px; font-weight: 700; box-shadow: var(--sx-shadow-card); }
.sx-node-card__status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; }
.sx-node-card__status--error { color: var(--sx-st-danger); }
.sx-node-card__status--warning { color: var(--sx-st-warn); }
.sx-node-card__status--pending { color: var(--sx-ink-weak); }
.sx-node-card--error { border-color: var(--sx-st-danger); }
.sx-node-card--warning { border-color: var(--sx-st-warn-bd); }
.sx-node-card--pending { border-style: dashed; }
.sx-node-card__ports { list-style: none; margin: 2px -12px 0; padding: 0; border-top: 1px solid var(--sx-line); }
.sx-node-card__port { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 26px; padding: 3px 14px 3px 12px; color: var(--sx-ink-mut); font-size: 11.5px; }
.sx-node-card__port + .sx-node-card__port { border-top: 1px dashed var(--sx-line); }
.sx-node-card__port.is-missing { color: var(--sx-st-danger); }
.sx-node-card__port-flag { font-size: 10.5px; font-weight: 700; }
.sx-node-card--agent { width: 300px; border-color: var(--sx-ai-bd); background: color-mix(in oklab, var(--sx-ai-bg) 45%, var(--sx-surface)); }
.sx-node-card__connectors { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-bottom: 1px dashed var(--sx-ai-bd); }
.sx-node-card__connectors li { display: grid; gap: 2px; padding: 5px 6px; border: 1px solid var(--sx-ai-bd); border-radius: var(--sx-radius-xs); background: var(--sx-surface); }
.sx-node-card__connectors strong { font-size: 11px; color: var(--sx-ai); }
.sx-node-card__connectors span { font-size: 10.5px; line-height: 1.3; color: var(--sx-ink-mut); }
.sx-node-card__ia { justify-self: start; }

/* Tela B — editor */
.sx-editor { display: grid; gap: 12px; min-width: 0; }
.sx-editor-cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; }
.sx-editor-cabeca__titulo { flex: 1 1 320px; min-width: 0; display: grid; gap: 4px; }
.sx-editor-cabeca__trilha { color: var(--sx-ink-weak); font-size: 12px; font-weight: 600; }
.sx-editor-cabeca h2 { margin: 0; color: var(--sx-ink); font-size: 20px; font-weight: 780; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.sx-editor-cabeca__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--sx-ink-weak); font-size: 12px; }
.sx-editor-cabeca__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sx-editor-area { display: grid; grid-template-columns: 240px minmax(0, 1fr) 360px; gap: 12px; align-items: start; min-width: 0; }
.sx-editor.is-leitura .sx-editor-area { grid-template-columns: minmax(0, 1fr) 360px; }
.sx-editor-canvas { display: grid; gap: 10px; min-width: 0; }
.sx-editor-paleta, .sx-editor-painel { min-width: 0; padding: 12px 14px; border: 1px solid var(--sx-card-border); border-radius: var(--sx-radius); background: var(--sx-card-bg); box-shadow: var(--sx-card-shadow); }
/* AIDEV-NOTE: a paleta não rola por dentro: o tooltip do passo desabilitado precisa sair da coluna para ser lido. */
.sx-editor-painel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.sx-editor-paleta h3 { margin: 0; color: var(--sx-ink); font-size: 14px; font-weight: 750; }
.sx-editor-paleta__dica { margin: 4px 0 8px; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; }
.sx-editor-paleta__lista { list-style: none; margin: 0 0 0 -32px; padding: 0; display: grid; gap: 2px; }
.sx-editor-paleta__item { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--sx-radius-sm); background: transparent; color: var(--sx-ink); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.sx-editor-paleta__item:hover { border-color: var(--sx-line); background: var(--sx-surface-2); }
.sx-editor-paleta__item:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.sx-editor-paleta__item.is-disabled { color: var(--sx-ink-weak); cursor: not-allowed; }
.sx-editor-paleta__item.is-disabled:hover { border-color: transparent; background: transparent; }
.sx-editor-paleta li > span { display: flex; width: 100%; }
.sx-editor-painel__conteudo { display: grid; gap: 12px; }
.sx-editor-painel__cabeca { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.sx-editor-painel__cabeca h3 { margin: 0; color: var(--sx-ink); font-size: 14.5px; font-weight: 750; }
.sx-editor-painel__cabeca p { margin: 3px 0 0; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.4; }
.sx-editor-painel__problemas { margin: 0; padding-left: 16px; }
.sx-editor-problemas { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); background: var(--sx-surface); }
.sx-editor-problemas__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.sx-editor-problemas__cabeca h3 { margin: 0; color: var(--sx-ink); font-size: 13.5px; font-weight: 750; }
.sx-editor-problemas__cabeca span { font-size: 12px; font-weight: 650; color: var(--sx-st-success); }
.sx-editor-problemas__cabeca span.is-erro { color: var(--sx-st-danger); }
.sx-editor-problemas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sx-editor-problemas__vazio { margin: 0; color: var(--sx-ink-mut); font-size: 12px; }
.sx-editor-problema { width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 8px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); color: var(--sx-ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.sx-editor-problema:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.sx-editor-problema > span { display: grid; gap: 2px; min-width: 0; }
.sx-editor-problema strong { font-weight: 700; overflow-wrap: anywhere; }
.sx-editor-problema--erro svg { color: var(--sx-st-danger); }
.sx-editor-problema--aviso svg { color: var(--sx-st-warn); }
.sx-editor-grupo { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.sx-editor-grupo__titulo { padding: 0; margin-bottom: 2px; color: var(--sx-ink); font-size: 12.5px; font-weight: 750; }
.sx-editor-grupo__dica { margin: 0; color: var(--sx-ink-mut); font-size: 12px; line-height: 1.45; }
.sx-editor-campo { display: grid; gap: 4px; min-width: 0; }
.sx-editor-campo .sx-editor-campo__rotulo { font-size: 12.5px; font-weight: 600; color: var(--sx-ink-mut); }
.sx-editor-campo__obrigatorio { color: var(--sx-st-danger); margin-left: 4px; }
.sx-editor-campo label { margin-bottom: 0 !important; }
.sx-editor-campo__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.sx-editor-campo__contador { color: var(--sx-ink-weak); font-size: 11px; }
.sx-editor-campo__contador.is-over { color: var(--sx-st-danger); font-weight: 700; }
.sx-editor-campo__erro { display: inline-flex; align-items: flex-start; gap: 5px; color: var(--sx-st-danger); font-size: 12px; line-height: 1.4; }
.sx-editor-variaveis { display: flex; flex-wrap: wrap; gap: 4px; }
.sx-editor-variavel { min-height: 26px; padding: 0 7px; border: 1px solid var(--sx-line); border-radius: 999px; background: var(--sx-surface-2); color: var(--sx-ink-mut); font-family: var(--mpvpc-font-mono); font-size: 10.5px; cursor: pointer; }
.sx-editor-variavel:hover { border-color: var(--mpvpc-brand-ember); color: var(--sx-ink); }
.sx-editor-variavel:focus-visible, .sx-editor-dia:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.sx-editor-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sx-editor-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; }
.sx-editor-opcao { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); }
.sx-editor-opcao__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--sx-ink); }
.sx-editor-dias, .sx-editor-juncao { display: flex; flex-wrap: wrap; gap: 4px; }
.sx-editor-dia { min-width: 44px; min-height: 36px; padding: 0 10px; border: 1px solid var(--sx-line-strong); border-radius: var(--sx-radius-sm); background: var(--sx-field-bg); color: var(--sx-ink-mut); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.sx-editor-dia[aria-pressed="true"] { border-color: var(--mpvpc-brand-ember); background: var(--sx-st-amber-bg); color: var(--sx-ink); }
.sx-editor-condicao { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.sx-editor-numero { display: flex; align-items: center; gap: 8px; }
.sx-editor-numero__sufixo { color: var(--sx-ink-weak); font-size: 12px; }
.sx-editor-leitura { margin: 0; display: grid; gap: 8px; }
.sx-editor-leitura div { display: grid; gap: 2px; min-width: 0; }
.sx-editor-leitura dt { color: var(--sx-ink-weak); font-size: 11.5px; text-transform: none; }
.sx-editor-leitura dd { margin: 0; color: var(--sx-ink); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.sx-editor-travas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-editor-travas li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 8px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); color: var(--sx-ink-mut); }
.sx-editor-travas li > span { display: grid; gap: 2px; font-size: 12px; min-width: 0; }
.sx-editor-travas strong { color: var(--sx-ink); font-size: 12.5px; }
.sx-editor-versoes__acoes { display: flex; flex-wrap: wrap; gap: 6px; }
/* Ativação do fluxo (E4a): o aviso da regra 21 no modo real, com as linhas de texto e os botões de ativar e pausar. */
.sx-editor-aviso__linha { margin: 0; }
.sx-editor-aviso__linha + .sx-editor-aviso__linha { margin-top: 6px; }
.sx-editor-ativacao__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-editor-modal__texto { margin: 0 0 12px; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.5; }
.sx-editor-modal__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Editor › gaveta Simular (E3c): formulário do teste e resultado a seco, dentro do Drawer do kit. */
.sx-editor-cabeca__simular { display: contents; }
.sx-editor-sim { display: grid; gap: 18px; }
.sx-editor-sim__grupo { display: grid; gap: 4px; }
.sx-editor-sim h3 { margin: 0 0 8px; color: var(--sx-ink); font-size: 13.5px; font-weight: 750; }
.sx-editor-sim h4 { margin: 6px 0 0; color: var(--sx-ink-mut); font-size: 12.5px; font-weight: 700; }
.sx-editor-sim__resultado { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--sx-line); }
.sx-editor-sim__desfecho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sx-editor-sim__desfecho h3 { margin: 0; }
.sx-editor-sim__alcance { color: var(--sx-ink-weak); font-size: 12px; }
.sx-editor-sim__resumo { margin: 0; color: var(--sx-ink); font-size: 13px; line-height: 1.5; }
.sx-editor-sim__passo { padding: 0; border: 0; border-radius: var(--sx-radius-sm); background: transparent; color: var(--sx-ink); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--sx-line-strong); text-underline-offset: 3px; cursor: pointer; }
.sx-editor-sim__passo:hover { text-decoration-color: var(--mpvpc-brand-ember); }
.sx-editor-sim__passo:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sx-ring); }
.sx-editor-sim__efeitos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-editor-sim__efeitos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); background: var(--sx-surface); color: var(--sx-ink); font-size: 13px; }
.sx-editor-sim__efeitos li > span { color: var(--sx-ink-mut); }
.sx-editor-sim__contexto { display: grid; gap: 4px; }
.sx-editor-sim__travas { display: grid; gap: 8px; margin: 4px 0 14px; }
.sx-editor-novo { display: grid; gap: 12px; max-width: 640px; }
.sx-editor-novo h2 { margin: 0; color: var(--sx-ink); font-size: 18px; font-weight: 780; }
.sx-editor-novo__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sx-editor-celular { display: grid; gap: 12px; min-width: 0; }
.sx-editor-celular__regras h3 { margin: 0 0 8px; color: var(--sx-ink); font-size: 14px; font-weight: 750; }
.sx-editor--celular .sx-editor-area { grid-template-columns: minmax(0, 1fr); }

/* Tela A — fluxos do editor na aba Fluxos */
.sx-editor-lista { display: grid; gap: 12px; min-width: 0; margin-bottom: 20px; }
.sx-editor-lista__filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-width: 0; }
.sx-editor-lista__nome { display: grid; gap: 2px; min-width: 0; }
.sx-editor-lista__nome span { color: var(--sx-ink-mut); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.sx-editor-lista__abrir { padding: 0; border: 0; background: transparent; color: var(--sx-ink); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.sx-editor-lista__abrir:hover { color: var(--mpvpc-brand-ember-on-light); text-decoration: underline; }
.sx-editor-lista__abrir:focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: var(--sx-radius-xs); }
.sx-editor-lista__status { display: grid; gap: 3px; justify-items: start; color: var(--sx-ink-weak); font-size: 11.5px; }
.sx-editor-lista__status .is-erro { color: var(--sx-st-danger); font-weight: 650; }
.sx-table-row--clicavel { cursor: pointer; }
.sx-table-row--clicavel:hover td { background: var(--sx-surface-2); }

@media (max-width: 1279px) {
  .sx-editor-area { grid-template-columns: minmax(0, 1fr) 340px; }
  .sx-editor-paleta { grid-column: 1 / -1; }
  .sx-editor-paleta .sx-editor-paleta__lista { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .sx-editor.is-leitura .sx-editor-area { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1100px) {
  .sx-editor-area, .sx-editor.is-leitura .sx-editor-area { grid-template-columns: minmax(0, 1fr); }
  .sx-editor-painel { position: static; max-height: none; }
}
@media (max-width: 900px) {
  .sx-editor-lista__tabela table, .sx-editor-lista__tabela tbody, .sx-editor-lista__tabela tr, .sx-editor-lista__tabela td { display: block; width: auto; }
  .sx-editor-lista__tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sx-editor-lista__tabela caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sx-editor-lista__tabela tr { padding: 6px 0; border-bottom: 1px solid var(--sx-line); }
  .sx-editor-lista__tabela td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 6px 14px !important; border: 0 !important; text-align: right !important; overflow-wrap: anywhere; }
  .sx-editor-lista__tabela td::before { content: attr(data-label); flex: 0 0 auto; color: var(--sx-ink-weak); font-size: 11.5px; font-weight: 700; text-align: left; }
  .sx-editor-lista__tabela td[data-label="Nome"] { display: block; text-align: left !important; }
  .sx-editor-lista__tabela td[data-label="Nome"]::before { content: none; }
}
@media (max-width: 768px) {
  .sx-editor-cabeca__acoes { width: 100%; }
  .sx-editor-linha { grid-template-columns: minmax(0, 1fr); }
  .sx-editor-condicao { grid-template-columns: minmax(0, 1fr); }
  .sx-node-card__connectors { grid-template-columns: minmax(0, 1fr); }
}

/* Design System › exemplo do kit do editor de fluxos (FlowCanvas e NodeCard) */
.sx-ds-kit-fluxo { display: grid; gap: 14px; margin-top: 16px; min-width: 0; }
.sx-ds-kit-fluxo__cabeca { display: grid; gap: 4px; }
.sx-ds-kit-fluxo__cabeca span { color: var(--mpvpc-brand-ember-on-light); font-size: 11.5px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.sx-ds-kit-fluxo__cabeca h2 { margin: 0; color: var(--sx-ink); font-size: 17px; font-weight: 780; }
.sx-ds-kit-fluxo__cabeca p { margin: 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.5; }
.sx-ds-kit-fluxo__cartoes { display: flex; flex-wrap: wrap; gap: 18px 14px; padding: 14px 12px; border: 1px dashed var(--sx-line); border-radius: var(--sx-radius); background: var(--sx-surface-2); }
.sx-ds-kit-fluxo__nota { margin: 0; color: var(--sx-ink-weak); font-size: 12px; }

/* ============================================================
   Logs do sistema (#/logs, 29/09/2026) — prefixo .sx-logs-*. Uma linha por problema no Accordion do kit;
   só tokens do DS (o tema escuro vem dos próprios tokens). Sem <table>: o inventário de tabelas fica em 36.
   ============================================================ */
.sx-logs { display: grid; gap: 14px; min-width: 0; }
.sx-logs > .sx-page-header { margin-bottom: 6px !important; }
.sx-logs-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.sx-logs-filtros { overflow: hidden; }
.sx-logs-filtros__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; }
.sx-logs-filtros__linha--estado { padding-top: 0; padding-bottom: 0; border-top: 1px solid var(--sx-line); }
.sx-logs-busca { position: relative; flex: 1 1 260px; min-width: 0; max-width: 420px; }
.sx-logs-busca > svg { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--sx-ink-weak); pointer-events: none; }
.sx-logs-contador { margin-left: auto; padding: 10px 0; color: var(--sx-ink-mut); font-size: 12.5px; }
.sx-logs-cartao { overflow: hidden; }
.sx-logs-lista { padding: 0 14px; border-top: 0 !important; }
.sx-logs-lista > section:last-child { border-bottom: 0 !important; }
.sx-logs-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.sx-logs-linha__selos { display: inline-flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.sx-logs-linha__frase { flex: 1 1 280px; min-width: 0; color: var(--sx-ink); font-weight: 700; overflow-wrap: anywhere; }
.sx-logs-detalhe { display: grid; gap: 12px; min-width: 0; }
.sx-logs-detalhe__motivo { margin: 0; color: var(--sx-ink); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.sx-logs-detalhe__motivo strong { font-weight: 700; }
.sx-logs-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; margin: 0; }
.sx-logs-ficha__campo { min-width: 0; }
.sx-logs-ficha dt { color: var(--sx-ink-weak); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
.sx-logs-ficha dd { margin: 2px 0 0; color: var(--sx-ink); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-logs-ficha__mono { font-family: var(--mpvpc-font-mono); font-size: 12px !important; }
.sx-logs-ficha--tecnica { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sx-logs-detalhe__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sx-logs-detalhe__nota { color: var(--sx-ink-weak); font-size: 12px; }
.sx-logs-tecnico { border-top: 1px solid var(--sx-line); }
.sx-logs-vazio { padding: 14px; }
.sx-logs-rodape { margin: 0; color: var(--sx-ink-weak); font-size: 12px; line-height: 1.5; }
.sx-logs-resolver { display: grid; gap: 12px; }
.sx-logs-resolver__texto { margin: 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.5; }
.sx-logs-resolver__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Resumo diário do robô da StayCloud (30/09): um dia por linha, abaixo da lista de problemas. */
.sx-logs-robo__dias { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sx-logs-robo__dia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--sx-line); }
.sx-logs-robo__dia:first-child { border-top: 0; }
.sx-logs-robo__nome { flex: 0 0 56px; color: var(--sx-ink); font-size: 13px; font-weight: 700; }
.sx-logs-robo__texto { flex: 1 1 260px; min-width: 0; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.sx-logs-robo__hora { color: var(--sx-ink-weak); font-size: 12px; }
/* Celular (revisão 3, 29/09): resumo de uma linha e filtros atrás de "Filtros", para a 1ª linha aparecer sem rolar. */
.sx-logs-resumo-curto { display: none; margin: 0; color: var(--sx-ink-mut); font-size: 13px; font-weight: 600; line-height: 1.4; }
.sx-logs-filtros__alternar { display: none !important; }
@media (max-width: 1100px) {
  .sx-logs-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .sx-logs { gap: 10px; }
  .sx-logs-resumo { display: none; }
  .sx-logs-resumo-curto { display: block; }
  .sx-logs-filtros { display: flex; flex-direction: column; }
  .sx-logs-filtros__linha { padding: 12px; }
  .sx-logs-filtros__linha--campos { order: 2; display: none; border-top: 1px solid var(--sx-line); }
  .sx-logs-filtros--abertos .sx-logs-filtros__linha--campos { display: flex; }
  .sx-logs-filtros__linha--estado { order: 1; gap: 8px 10px; padding: 8px 12px; border-top: 0; }
  .sx-logs-filtros__alternar { display: inline-flex !important; }
  .sx-logs-busca { flex-basis: 100%; max-width: none; }
  .sx-logs-contador { margin-left: auto; padding: 0; }
  .sx-logs-contador__resumo { display: none; }
  .sx-logs-lista { padding: 0 10px; }
  /* O painel do Accordion do kit recua 40 px (estilo inline); no celular o detalhe usa a largura toda. */
  .sx-logs-lista [role="region"] { padding-left: 4px !important; }
  .sx-logs-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sx-logs-resumo { gap: 8px; }
}

/* ============================================================
   POPUP DO KIT, CAMPO DE MÊS E ENCAIXE DOS POPOVERS — 30/09/2026
   Pedido do dono: o campo de mês "puxa tema do Chrome", o popup "fica pequeno e não aproveita largura"
   e a responsividade precisa valer "até para os popups de cada tela".
   Bloco próprio no fim do arquivo de propósito: outras frentes editam o app.css ao mesmo tempo.
   ============================================================ */

/* AIDEV-NOTE: os controles que o kit ainda desenha com o elemento nativo (caixa de marcação, opção única,
   faixa) seguem o tema. Sem isto o Chrome os pinta claros no tema escuro. A regra fica nos campos e não no
   body: no body ela trocaria o fundo das prévias em iframe (e-mail, proposta, Design System). */
body.theme-dark :is(input, textarea, select) { color-scheme: dark; }

/* ---- Popup (Modal do kit) ---- */
/* Altura pela janela útil: no celular a barra do navegador some e volta, e 100vh cortava o rodapé. */
@supports (height: 100dvh) {
  .sx-modal-panel { max-height: calc(100dvh - 40px) !important; }
}
/* Só popup com tamanho declarado vira contêiner de consulta: nos usos antigos nada muda além do cabeçalho fixo. */
.sx-modal-panel[data-size] > .sx-modal-body { container-type: inline-size; container-name: sx-modal; }
.sx-modal-foot { justify-content: flex-end; }
/* Ação que fica sozinha à esquerda do rodapé (ex.: "Encerrar conta"), longe de Fechar e Salvar. */
.sx-modal-foot > .sx-modal-foot__inicio { margin-right: auto; }

/* Popup amplo com painéis: empilhados por padrão; lado a lado quando a tela comporta (regra mais abaixo). */
.sx-modal-paineis { display: grid; gap: 18px; min-width: 0; }
.sx-modal-painel { min-width: 0; }
.sx-modal-painel + .sx-modal-painel { padding-top: 16px; border-top: 1px solid var(--sx-line); }
.sx-modal-painel__titulo { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--sx-ink-mut); }
/* Título do painel com um atalho ao lado. O atalho ("Ir para os dados da conta") só existe empilhado. */
.sx-modal-painel__cabeca { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.sx-modal-painel__cabeca > .sx-modal-painel__titulo { margin: 0; }

/* AIDEV-NOTE: o popup amplo tem no máximo 1680 px (1280 até a revisão de 30/09) e ocupa a tela menos 40 px; em
   980 px de tela sobram ~940 px para os dois painéis (o da direita nunca abaixo de 470 px, para o formulário caber
   em 2 colunas). Metade para cada painel: com 600 px úteis o cadastro vai a 3 colunas (bloco da revisão, no fim).
   A altura é fixa para cada painel rolar sozinho: com altura só máxima o painel não teria onde rolar e o
   dono voltaria a descer a lista de faturas inteira para achar os dados da conta. */
@media (min-width: 980px) {
  .sx-modal-panel[data-size="xl"][data-paineis] { height: min(calc(100vh - 40px), 1040px); }
  .sx-modal-panel[data-size="xl"][data-paineis] > .sx-modal-body { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden !important; }
  .sx-modal-panel[data-size="xl"][data-paineis] .sx-modal-paineis {
    flex: 1 1 auto; min-height: 0; gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(470px, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .sx-modal-panel[data-size="xl"][data-paineis] .sx-modal-painel { overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px; }
  .sx-modal-panel[data-size="xl"][data-paineis] .sx-modal-painel + .sx-modal-painel { border-top: 0; border-left: 1px solid var(--sx-line); }
  .sx-modal-panel[data-size="xl"][data-paineis] .sx-modal-painel__atalho { display: none !important; }
}

/* AIDEV-NOTE: no celular o popup fica ACIMA da barra inferior (.sx-mobile-nav, 70) em todas as telas: com
   o 60 do kit, o fim do popup (Salvar) ficava embaixo da barra. Os remendos por tela (75 e 85) continuam
   valendo por terem seletor mais específico. */
@media (max-width: 680px) {
  .sx-modal-overlay { z-index: 75 !important; }
  /* Popup com tamanho declarado (menos a confirmação, sm) vira tela cheia: nada de cartão espremido. */
  .sx-modal-overlay[data-size]:not([data-size="sm"]) { padding: 0 !important; place-items: stretch !important; }
  .sx-modal-panel[data-size]:not([data-size="sm"]) { width: 100% !important; height: 100%; max-height: none !important; border: 0 !important; border-radius: 0 !important; }
  .sx-modal-panel[data-size]:not([data-size="sm"]) > .sx-modal-head { padding: 14px 16px !important; }
  .sx-modal-panel[data-size]:not([data-size="sm"]) > .sx-modal-body { padding: 14px 16px !important; }
  .sx-modal-panel[data-size]:not([data-size="sm"]) > .sx-modal-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important; }
  /* Alvo de toque de 44 px nos botões do rodapé. */
  .sx-modal-foot .sx-btn { min-height: 44px; }
}

/* ---- Formulário em grade: o número de colunas sai da largura do popup, não da tela ---- */
.sx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; min-width: 0; }
.sx-form-grid > * { min-width: 0; }
.sx-form-grid > .sx-form-grid__full { grid-column: 1 / -1; }
/* Campo de duas colunas: só quando o popup tem largura para ao menos duas (senão criaria coluna fantasma). */
@container sx-modal (min-width: 440px) {
  .sx-form-grid > .sx-form-grid__largo { grid-column: span 2; }
}

/* ---- Campo de mês do kit (MonthField) ---- */
.sx-mes:not([aria-disabled="true"]):not([aria-pressed="true"]):hover { background: var(--sx-st-amber-bg) !important; }
/* !important: o mês corrente tem contorno inline, que venceria o anel de foco. */
.sx-mes:focus-visible { outline: 2px solid var(--mpvpc-brand-ember) !important; outline-offset: 1px !important; }

/* ---- Calendário com atalhos (DateField e DateRangePicker) em área estreita ----
   Lado a lado o popover tem ~405 px (data) ou ~450 px (período) e passava da tela no celular e da borda de
   popup estreito. Os atalhos sobem para cima da grade e viram uma linha que quebra. */
@media (max-width: 520px) {
  .sx-pop-data { flex-direction: column; }
  .sx-pop-data > .sx-pop-data__atalhos { width: auto !important; display: flex; flex-wrap: wrap; gap: 2px; border-right: 0 !important; border-bottom: 1px solid var(--sx-line); }
  .sx-pop-data > .sx-pop-data__atalhos > button { width: auto !important; }
}
@container sx-modal (max-width: 460px) {
  .sx-pop-data { flex-direction: column; }
  .sx-pop-data > .sx-pop-data__atalhos { width: auto !important; display: flex; flex-wrap: wrap; gap: 2px; border-right: 0 !important; border-bottom: 1px solid var(--sx-line); }
  .sx-pop-data > .sx-pop-data__atalhos > button { width: auto !important; }
}

/* ---- Exemplo do vidro líquido na tela #/design-system (preferência do dono, 30/09/2026) ---- */
.sx-ds-vidro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sx-ds-vidro__figura { margin: 0; display: grid; gap: 8px; min-width: 0; }
.sx-ds-vidro__figura figcaption { color: var(--sx-ink-mut); font-size: 12.5px; font-weight: 600; }
.sx-ds-vidro__palco { position: relative; height: 196px; overflow: hidden; border: 1px solid var(--sx-line); border-radius: 12px; color: var(--sx-ink);
  background: radial-gradient(420px 220px at 30% -20%, var(--sx-canvas-glow-1), transparent 62%), linear-gradient(180deg, var(--sx-canvas-top) 0%, var(--sx-canvas-bottom) 100%); }
.sx-ds-vidro__fundo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 0 22%; font-size: 12.5px; }
.sx-ds-vidro__linha { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sx-ds-vidro__linha .tnum { color: var(--sx-ink-mut); }
/* O botão âmbar fica fora da lâmina no exemplo: atrás dela virava mancha quente (dono, 01/10: "sem esse tom âmbar"). */
.sx-ds-vidro__cta { align-self: flex-end; margin-right: 8px; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--mpvpc-cta-bg); border-radius: var(--sx-radius-sm); background: var(--sx-btn-primary-bg); box-shadow: var(--sx-btn-primary-shadow); color: var(--mpvpc-cta-fg); font-size: 12.5px; font-weight: 600; }
.sx-ds-vidro__lamina { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 168px; display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; }
.sx-ds-vidro__titulo { padding: 4px 8px 6px; font-size: 14px; font-weight: 720; letter-spacing: -0.01em; color: var(--sx-ink); }
.sx-ds-vidro__item { display: flex; align-items: center; min-height: 34px; padding: 0 8px; border-radius: var(--sx-radius-sm); color: var(--sx-ink-mut); font-size: 13px; font-weight: 520; }
.sx-ds-vidro__item[aria-current="page"] { color: var(--sx-ink); font-weight: 650; }
.sx-ds-vidro__regras { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--sx-ink-mut); font-size: 13px; line-height: 1.5; }
.sx-ds-vidro__regras strong { color: var(--sx-ink); }
.sx-ds-vidro__regras code { font-family: var(--mpvpc-font-mono); font-size: 12px; color: var(--sx-ink); }
@media (max-width: 760px) { .sx-ds-vidro { grid-template-columns: minmax(0, 1fr); } }

/* ---- Exemplo do campo de mês e dos tamanhos do popup na tela #/design-system ---- */
.sx-ds-kit-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; padding: 14px 12px; border: 1px dashed var(--sx-line); border-radius: var(--sx-radius); background: var(--sx-surface-2); }
.sx-ds-kit-campos__rotulo { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--sx-ink-mut); }
.sx-ds-kit-campos__tamanhos { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }

/* ============================================================
   CONTROLES DO NAVEGADOR QUE SOBRARAM NAS OUTRAS TELAS — 30/09/2026
   Pedido do dono: "Verifica no sistema todos que tem esse tipo e bem com os combobox". Bloco próprio no fim
   do arquivo, como o anterior: outras frentes editam o app.css ao mesmo tempo.
   ============================================================ */

/* AIDEV-NOTE: campo numérico que continua type=number (valor da NFS-e, orçamento da campanha e campos de Dados:
   trocar por texto mudaria a leitura do valor numa zona de dinheiro) perde as setas do navegador. Os campos
   inteiros das telas já viraram texto só com dígitos; esta regra cobre o resto, inclusive o Dossiê (PR #659). */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* A busca mantém type=search (teclado de busca no celular, Esc limpa), sem o "x" azul nem o enfeite do Chrome. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; display: none; }

/* Recolhível da casa com um rótulo só (Aprovações: títulos do anúncio, negativas do grupo): o rótulo fica ao lado
   do marcador, não empurrado para a direita como o par título + estado do Cockpit. */
.sx-disclosure--inline > .sx-disclosure-summary { justify-content: flex-start; }

/* ============================================================
   LARGURA DAS TELAS E DOS POPUPS DE CADA TELA — 30/09/2026 (IMP-003)
   Pedido do dono: "aproveita melhor a largura das telas em vários formatos ... trabalhar melhor a responsividade
   até mesmo para os popups de cada tela". Bloco próprio no fim do arquivo: outras frentes editam o app.css.
   ============================================================ */

/* Erro de gravação no rodapé do popup, junto dos botões: com os botões fixos, o erro no fim do corpo ficava
   escondido pela rolagem. Ocupa a linha inteira do rodapé, acima dos botões. */
.sx-modal-foot__erro { flex: 1 1 100%; margin: 0; color: var(--sx-st-danger); font-size: 12.5px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
/* Aviso neutro no mesmo lugar (ex.: o que "Arquivar" faz, antes de confirmar). */
.sx-modal-foot__nota { flex: 1 1 100%; margin: 0; color: var(--sx-ink-mut); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }

/* AIDEV-NOTE: tabela larga no notebook (681 a 1279 px de tela). Com o menu aberto sobram 430 a 1000 px e as
   tabelas de 860 a 1240 px rolavam de lado, escondendo Status e Ações. Nesta faixa a tabela marcada com
   .sx-table-cards--medio vira cartões rotulados em duas colunas (mesmas células, rótulos do data-label e ações);
   no celular vale o cartão de uma coluna do painel-extra.css e de 1280 px para cima a tabela volta. */
@media (min-width: 681px) and (max-width: 1279px) {
  .sx-table-cards--medio { min-width: 0 !important; display: block !important; background: var(--sx-surface-2); }
  .sx-table-cards--medio colgroup { display: none !important; }
  .sx-table-cards--medio thead { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sx-table-cards--medio tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
  .sx-table-cards--medio tbody > tr { display: grid !important; align-content: start; border: 1px solid var(--sx-line) !important; border-radius: var(--sx-radius); overflow: hidden; background: var(--sx-row-bg, var(--sx-surface)); }
  .sx-table-cards--medio tbody > tr > td {
    display: grid !important; grid-template-columns: minmax(96px, .36fr) minmax(0, 1fr); align-items: start; justify-items: start; gap: 3px 10px;
    width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; padding: 8px 12px !important;
    position: static !important; border: 0 !important; border-top: 1px solid var(--sx-line) !important;
    text-align: left !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere;
  }
  .sx-table-cards--medio tbody > tr > td:first-child { border-top: 0 !important; }
  /* Rótulo na coluna 1 e o conteúdo empilhado na 2 (texto solto também cai na 2). */
  .sx-table-cards--medio tbody > tr > td::before { content: attr(data-label); grid-column: 1; color: var(--sx-ink-weak); font-size: 10.5px; font-weight: 750; letter-spacing: .04em; line-height: 1.6; text-transform: uppercase; }
  .sx-table-cards--medio tbody > tr > td > * { grid-column: 2; min-width: 0; max-width: 100%; }
  .sx-table-cards--medio tbody > tr > td:is([data-label=""], :not([data-label]))::before { content: none; }
  .sx-table-cards--medio tbody > tr > td:is([data-label=""], :not([data-label])) > * { grid-column: 1 / -1; }
  /* A primeira célula (o nome: contato, empresa, campanha, atendimento, data do lançamento) é o título do cartão. */
  .sx-table-cards--medio tbody > tr > td:first-child { grid-template-columns: minmax(0, 1fr); padding-top: 12px !important; }
  .sx-table-cards--medio tbody > tr > td:first-child::before { content: none; }
  .sx-table-cards--medio tbody > tr > td:first-child > * { grid-column: 1; }
  .sx-table-cards--medio tbody > tr > td[data-acoes] { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .sx-table-cards--medio tbody > tr > td[data-acoes]::before { content: none; }
  /* Linha de aviso ou de "nenhum item" (uma célula só, colSpan): ocupa o cartão inteiro. */
  .sx-table-cards--medio tbody > tr > td[colspan] { grid-column: 1 / -1; display: block !important; }
  .sx-table-cards--medio tbody > tr:has(> td[colspan]:only-child) { grid-column: 1 / -1; }
  .sx-table-cards-wrap:has(> .sx-table-cards--medio) { overflow-x: visible !important; }
  /* CRM: o botão da ficha ganha o texto "Abrir ficha" no cartão, como no celular (só a seta ficava perdida). */
  .sx-table-cards--medio .sx-crm-so-celular { display: inline; }

  /* Contas e Previsão de entrada já têm cartões próprios (com Accordion e ações do dono): nesta faixa eles
     substituem a tabela, em duas colunas. A chave "Tabela completa" só mexe na tabela, então some junto. */
  .sx-contas-tabela-card,
  .sx-entradas-tabela-card,
  .sx-contas-completa { display: none !important; }
  .sx-contas-cartoes,
  .sx-entradas-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
}

/* Monitor largo (1800 px ou mais): em Contas e Previsão de entrada só a primeira coluna crescia e as curtas
   (status do mês, vencimento, recorrência, "1 dia útil após a última palestra") quebravam em 2 ou 3 linhas. Sem
   quebra, a coluna cresce até o texto. Sozinha esta regra baixou a linha de Contas só de ~94 para 91 px (quem manda
   é a pilha de ações); o ganho de linhas vem do bloco da revisão, no fim do arquivo. Abaixo de 1800 px, igual. */
@media (min-width: 1800px) {
  .sx-contas-table tbody > tr > td:not(:first-child),
  .sx-entradas-table tbody > tr > td:not(:first-child) { white-space: nowrap; }
}
/* Texto corrido mantém medida de leitura em qualquer largura (a faixa "Ganhas sem previsão" ocupa a tela toda). */
.sx-entradas-ganhas__texto p { max-width: 90ch; }

/* ============================================================
   REVISÃO DA FRENTE (IMP-004) — 30/09/2026
   Achados da revisão das IMP-001..003 medidos na janela real do dono (~2560x950, tirada da captura dele).
   Bloco próprio no fim do arquivo, como os anteriores: outras frentes editam o app.css ao mesmo tempo.
   ============================================================ */

/* AIDEV-NOTE: o cadastro do popup da conta reage à largura do PAINEL (não do popup): com 600 px úteis vai a
   3 colunas fixas (auto-fit daria 4 em 800 px e espremeria os campos). Em 2560x950 e 1920x940 os dois painéis
   cabem sem rolar só com isto e o xl de 1680 px; antes, com 2 colunas, "Identificação do meio" e "Essencial"
   ficavam fora. Medição: scrollHeight <= clientHeight de cada painel (o topo à vista não prova nada). */
.sx-modal-painel { container-type: inline-size; container-name: sx-painel; }
@container sx-painel (min-width: 600px) {
  /* Linhas 2 px mais juntas: é o que faz os dados caberem também em 1440x900 (sobravam 3 px). */
  .sx-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
}
/* O popup recebe o foco ao abrir (para o Tab e o Esc valerem): sem anel em volta do popup inteiro. */
.sx-modal-panel:focus { outline: none; }

/* AIDEV-NOTE: Contas no monitor largo (1800 px ou mais). A coluna do nome ficava com todo o espaço (1330 px em
   2560, para ~180 px de texto) e a pilha "Dar baixa" sobre "Encerrar" fazia toda linha ter 91 px. Aqui a coluna do
   nome tem teto de 24% (o resto vai para status e vencimento) e as ações ficam lado a lado. De 1280 a 1799 px, igual. */
@media (min-width: 1800px) {
  .sx-contas-table thead th:first-child { width: 24%; }
  /* !important: a largura das colunas vem inline do Cabecalho (110 px, feita para a pilha). */
  .sx-contas-table thead th:last-child { width: 200px !important; }
  .sx-contas-table .sx-contas-acoes { flex-direction: row !important; align-items: center !important; gap: 6px !important; }
}

/* AIDEV-NOTE: cartão do notebook (681 a 1279 px) mais compacto. Com cada campo numa faixa com borda e 8 px de folga,
   o cartão do CRM tinha ~340 px e cabiam 2 contatos em 1024x768 (a tabela mostrava 5, rolando de lado). Campo vazio
   some; no CRM, "Abrir ficha" sobe para o lado do nome. */
@media (min-width: 681px) and (max-width: 1279px) {
  .sx-table-cards--medio tbody > tr > td { padding: 4px 12px !important; border-top: 0 !important; grid-template-columns: minmax(124px, .36fr) minmax(0, 1fr); }
  .sx-table-cards--medio tbody > tr > td:first-child { padding-top: 10px !important; padding-bottom: 8px !important; }
  /* Uma linha só separa o título dos campos (antes cada campo tinha a sua). */
  .sx-table-cards--medio tbody > tr > td:nth-child(2) { border-top: 1px solid var(--sx-line) !important; padding-top: 8px !important; }
  .sx-table-cards--medio tbody > tr > td:last-child { padding-bottom: 10px !important; }
  .sx-table-cards--medio tbody > tr > td:empty { display: none !important; }
  .sx-crm-contatos.sx-table-cards--medio tbody > tr,
  .sx-crm-empresas.sx-table-cards--medio tbody > tr { grid-template-columns: minmax(0, 1fr) auto; }
  .sx-crm-contatos.sx-table-cards--medio tbody > tr > td,
  .sx-crm-empresas.sx-table-cards--medio tbody > tr > td { grid-column: 1 / -1; }
  .sx-crm-contatos.sx-table-cards--medio tbody > tr > td:first-child,
  .sx-crm-empresas.sx-table-cards--medio tbody > tr > td:first-child { grid-column: 1; grid-row: 1; }
  .sx-crm-contatos.sx-table-cards--medio tbody > tr > td[data-acoes],
  .sx-crm-empresas.sx-table-cards--medio tbody > tr > td[data-acoes] { grid-column: 2; grid-row: 1; align-self: start; padding: 10px 12px 8px 0 !important; }
  .sx-crm-contatos.sx-table-cards--medio tbody > tr > td:nth-last-child(2),
  .sx-crm-empresas.sx-table-cards--medio tbody > tr > td:nth-last-child(2) { padding-bottom: 10px !important; }
}

/* AIDEV-NOTE: alvo de toque de 44 px dentro dos seletores do kit (setas de mês/ano, meses, horários), a mesma
   medida dos botões do rodapé do popup. Vale no toque ou em 680 px ou menos; com mouse, o desenho compacto fica. */
@media (pointer: coarse), (max-width: 680px) {
  .sx-cal-nav { width: 44px !important; height: 44px !important; }
  .sx-pop-mes .sx-mes { height: 44px !important; }
  .sx-hora-opcao { height: 44px !important; }
}

/* ---- Subpropostas, Onda 1 (01/10/2026): Dossiê › Proposta › Montar proposta e Cliente escolheu ----
   Computador: as opções lado a lado (até 3). Celular: linha de comparação + abas "Opção 1 | Opção 2", uma coluna por vez;
   "Ver proposta" e "Enviar proposta" nunca ficam escondidos (rodapé do bloco). */
.sx-montar { display: grid; gap: 12px; border-top: 3px solid var(--mpvpc-brand-ember); }
.sx-montar__eyebrow { color: var(--mpvpc-brand-ember-on-light); }
.sx-montar__titulo { margin: 0; font-size: 19px; font-weight: 700; color: var(--sx-ink); line-height: 1.25; }
.sx-montar__passos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sx-montar__passos li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--sx-line); background: var(--sx-surface-2); font-size: 12px; font-weight: 600; color: var(--sx-ink-mut); }
.sx-montar__passos li[data-feito="sim"] { border-color: var(--sx-st-success-bd); background: var(--sx-st-success-bg); color: var(--sx-st-success); }
.sx-montar__explica { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sx-ink-mut); max-width: 78ch; }
.sx-montar__comparar { font-size: 13px; font-weight: 650; color: var(--sx-ink); }
.sx-montar__abas { display: none; gap: 6px; }
.sx-montar__aba { flex: 1 1 0; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--sx-line-strong); background: var(--sx-surface-2); color: var(--sx-ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.sx-montar__aba[aria-selected="true"] { border-color: var(--mpvpc-brand-ember); background: var(--sx-card-bg); box-shadow: inset 0 -2px 0 var(--mpvpc-brand-ember); }
.sx-montar__aba:focus-visible { outline: 2px solid var(--mpvpc-brand-ember); outline-offset: 2px; }
.sx-montar__colunas { display: grid; gap: 12px; grid-template-columns: repeat(var(--sx-montar-colunas, 2), minmax(0, 1fr)); }
.sx-montar__coluna { display: grid; align-content: start; gap: 10px; padding: 12px; border: 1px solid var(--sx-line); border-radius: 10px; background: var(--sx-surface-2); min-width: 0; }
.sx-montar__coluna-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sx-montar__opcao { font-size: 13.5px; font-weight: 750; color: var(--sx-ink); }
.sx-montar__cenarios { display: grid; gap: 8px; }
.sx-montar__cenario { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: 8px; background: var(--sx-card-bg); }
.sx-montar__cenario[data-sx-cenario-escolhido="sim"] { border-color: var(--sx-st-success-bd); box-shadow: inset 3px 0 0 var(--sx-st-success); }
.sx-montar__cenario[data-precificado="nao"] { opacity: 0.78; border-style: dashed; }
.sx-montar__cenario-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--sx-ink); }
.sx-montar__composicao { font-size: 12px; color: var(--sx-ink-mut); }
.sx-montar__nota { margin: 0; font-size: 12px; line-height: 1.45; color: var(--sx-ink-mut); }
.sx-montar__selo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--sx-st-success-bd); background: var(--sx-st-success-bg); font-size: 12.5px; color: var(--sx-ink); }
.sx-montar__confirma { display: grid; gap: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--mpvpc-brand-ember); background: var(--sx-card-bg); font-size: 12.5px; color: var(--sx-ink); }
.sx-montar__acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sx-montar__rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--sx-line); }
.sx-montar__progresso { font-size: 13px; font-weight: 700; color: var(--sx-ink); }
.sx-montar__falta { font-size: 12.5px; font-weight: 650; color: var(--sx-st-amber); }
.sx-montar__aviso { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--sx-st-success); }
.sx-montar__erro { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--sx-st-danger); }
/* Rolagem até a confirmação de dinheiro (conferência do envio, Fixar valor) e ao bloco: abaixo do topo preso do Dossiê
   (revisão de 01/10: a 390 px o começo da conferência ficava sob as abas das seções). */
.sx-dossie [data-sx-montar-proposta="true"], .sx-dossie [data-sx-conferencia-envio="true"], .sx-dossie [data-sx-confirma-fixar="true"] { scroll-margin-top: calc(var(--sx-dossie-topo-h, 0px) + 12px); }
.sx-aceite { display: grid; gap: 12px; }
.sx-aceite__opcao { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--sx-ink); }
.sx-aceite__opcao strong { font-size: 18px; }
.sx-aceite__parcelas { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--sx-ink); }
.sx-aceite__nota { margin: 0; font-size: 12px; color: var(--sx-ink-mut); line-height: 1.45; }
.sx-aceite__pendente { margin: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--sx-st-amber-bd); background: var(--sx-st-amber-bg); font-size: 12.5px; line-height: 1.45; color: var(--sx-ink); }
.sx-aceite__definitivo { margin: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--sx-st-danger-bd); background: var(--sx-st-danger-bg); font-size: 12.5px; font-weight: 650; color: var(--sx-ink); }
.sx-aceite__evidencia { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sx-ink-mut); }
@media (max-width: 680px) {
  .sx-montar__abas { display: flex; }
  .sx-montar__colunas { grid-template-columns: minmax(0, 1fr); }
  .sx-montar__coluna[data-ativa="nao"] { display: none; }
  /* AIDEV-NOTE: rodapé preso como o do Marketing pago: o inset conta da borda do conteúdo do .sx-main (padding-bottom
     104 px no celular). Com o botão da vez (.sx-dossie[data-vez="sim"]: 46 px + 10 px acima da barra) sobe 56 px. */
  .sx-montar__rodape {
    position: sticky;
    bottom: calc(65px + env(safe-area-inset-bottom, 0px) - 104px);
    z-index: 5;
    margin: 0 -2px;
    padding: 10px 2px;
    background: var(--sx-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .sx-dossie[data-vez="sim"] .sx-montar__rodape { bottom: calc(65px + env(safe-area-inset-bottom, 0px) + 56px - 104px); }
  .sx-montar__rodape .sx-montar__acoes { width: 100%; }
}