@charset "UTF-8";
@font-face {
  font-family: "Montserrat";
  src: url("../fontes/Montserrat.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fontes/Orbitron.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   SporTI — Color tokens
   Brand palette sampled directly from the official logo files.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --sporti-teal: #47BCC2; /* primary brand mark — "verde/turquesa" */
  --sporti-gray: #676767; /* primary neutral — logo gray */
  --sporti-pay-blue: #1A7EA2; /* SporTI Pay product accent */
  /* ---- Teal ramp ---- */
  --teal-50: #ECF9FA;
  --teal-100: #D2F0F2;
  --teal-200: #A6E1E4;
  --teal-300: #79D1D6;
  --teal-400: #5FC7CC;
  --teal-500: #47BCC2; /* = --sporti-teal */
  --teal-600: #35989E;
  --teal-700: #2A787D;
  --teal-800: #1F585C;
  --teal-900: #16403F;
  /* ---- Gray / neutral ramp ---- */
  --gray-0: #FFFFFF;
  --gray-50: #F6F7F8;
  --gray-100: #ECEEEF;
  --gray-200: #DCDFE1;
  --gray-300: #C2C6C9;
  --gray-400: #9A9EA1;
  --gray-500: #7C7F81;
  --gray-600: #676767; /* = --sporti-gray */
  --gray-700: #4E4E4E;
  --gray-800: #363636;
  --gray-900: #232323;
  /* ---- Pay blue ramp ---- */
  --blue-50: #E9F3F8;
  --blue-100: #C9E2ED;
  --blue-300: #6FB2CC;
  --blue-500: #1A7EA2; /* = --sporti-pay-blue */
  --blue-700: #135C77;
  --blue-900: #0C3B4D;
  /* ---- Semantic status ---- */
  --success: #2FA36B;
  --success-bg:#E5F5ED;
  --warning: #E0A22B;
  --warning-bg:#FBF1DC;
  --danger: #D9534F;
  --danger-bg: #FBE9E8;
  --info: #47BCC2;
  --info-bg: #ECF9FA;
  /* ============================================================
     Semantic aliases — reference these in components, not raw ramps
     ============================================================ */
  /* Text */
  --text-primary: var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-400);
  --text-inverse: var(--gray-0);
  --text-brand: var(--teal-600);
  --text-link: var(--teal-600);
  --text-link-hover: var(--teal-700);
  /* Surfaces */
  --surface-page: var(--gray-50);
  --surface-card: var(--gray-0);
  --surface-raised: var(--gray-0);
  --surface-sunken: var(--gray-100);
  --surface-brand: var(--teal-500);
  --surface-brand-soft: var(--teal-50);
  --surface-dark: var(--gray-800);
  /* Borders */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-brand: var(--teal-500);
  /* Interactive / accent */
  --accent: var(--teal-500);
  --accent-hover: var(--teal-600);
  --accent-active: var(--teal-700);
  --accent-soft: var(--teal-50);
  --focus-ring: var(--teal-400);
}

/* ============================================================
   SporTI — Typography tokens
   Display / tech accent: Orbitron  (geometric, technical)
   UI / body:             Montserrat (clean, friendly, legible)
   ============================================================ */
:root {
  /* Families */
  --font-display: "Orbitron", "Montserrat", system-ui, sans-serif;
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: var(--font-sans);
  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  /* Type scale (rem-based, 16px root) */
  --fs-display: clamp(2.75rem, 5vw, 4rem); /* @kind font */ /* hero */
  --fs-h1: 2.25rem; /* 36 */
  --fs-h2: 1.75rem; /* 28 */
  --fs-h3: 1.375rem; /* 22 */
  --fs-h4: 1.125rem; /* 18 */
  --fs-body-lg: 1.0625rem; /* 17 */
  --fs-body: 0.9375rem; /* 15 */
  --fs-body-sm: 0.8125rem; /* 13 */
  --fs-caption: 0.75rem; /* 12 */
  --fs-overline: 0.6875rem; /* 11 */
  /* Line heights */
  --lh-tight: 1.1; /* @kind font */
  --lh-heading: 1.2; /* @kind font */
  --lh-snug: 1.35; /* @kind font */
  --lh-body: 1.55; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */
  /* Letter spacing */
  --ls-display: 0.02em; /* @kind font */ /* Orbitron reads best slightly open */
  --ls-tight: -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  --ls-overline: 0.14em; /* @kind font */ /* uppercase labels */
}

/* ============================================================
   SporTI — Spacing, radii, shadows, layout tokens
   Base 4px grid.
   ============================================================ */
:root {
  /* Spacing scale */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  /* Radii — brand favours crisp, geometric corners (echoes the diamond mark) */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  /* Shadows — soft, low, cool-gray tint */
  --shadow-xs: 0 1px 2px rgba(35, 35, 35, 0.06);
  --shadow-sm: 0 1px 3px rgba(35, 35, 35, 0.08), 0 1px 2px rgba(35, 35, 35, 0.04);
  --shadow-md: 0 4px 12px rgba(35, 35, 35, 0.08), 0 2px 4px rgba(35, 35, 35, 0.04);
  --shadow-lg: 0 12px 28px rgba(35, 35, 35, 0.12), 0 4px 8px rgba(35, 35, 35, 0.05);
  --shadow-brand: 0 8px 24px rgba(71, 188, 194, 0.28);
  /* Focus */
  --focus-ring-width: 3px; /* @kind other */
  --focus-ring-color: rgba(71, 188, 194, 0.45);
  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
  /* Layout */
  --container-max: 1200px; /* @kind other */
  --container-narrow: 820px; /* @kind other */
}

:root {
  --cor-fundo: #f6f8fa;
  --cor-superficie: #ffffff;
  --cor-texto: #202530;
  --cor-texto-suave: #65707f;
  --cor-texto-sutil: #8b95a2;
  --cor-borda: #d8dde3;
  --cor-borda-forte: #c4cbd3;
  --cor-primaria: #1383a6;
  --cor-primaria-hover: #0e718f;
  --cor-primaria-suave: #edf8fb;
  --cor-erro: #e44242;
  --cor-erro-suave: #fff1f1;
  --cor-sucesso: #15865f;
  --cor-sucesso-suave: #edf9f4;
  --cor-aviso: #a56806;
  --cor-aviso-suave: #fff7e8;
  --sombra-foco: 0 0 0 3px rgba(19, 131, 166, 0.16);
  --raio-pequeno: 8px;
  --raio-medio: 12px;
  --raio-grande: 20px;
  --fonte-corpo: "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --fonte-destaque: "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--cor-fundo);
}

button,
input {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--cor-primaria);
  font-weight: 650;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

svg {
  display: block;
}

[x-cloak] {
  display: none !important;
}

.pular-conteudo {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  box-shadow: 0 8px 30px rgba(17, 31, 43, 0.2);
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.pular-conteudo:focus {
  transform: translateY(0);
}

*:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 3px;
}

::selection {
  color: #ffffff;
  background: var(--cor-primaria);
}

.botao {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--raio-medio);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.botao:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.botao:active {
  transform: translateY(0);
}

.botao:disabled,
.botao[aria-disabled=true] {
  cursor: not-allowed;
}

.botao--bloco {
  width: 100%;
}

.botao--primario {
  color: #ffffff;
  background: var(--cor-primaria);
  box-shadow: 0 8px 18px rgba(14, 113, 143, 0.12);
}

.botao--primario:hover {
  background: var(--cor-primaria-hover);
  box-shadow: 0 10px 22px rgba(14, 113, 143, 0.18);
}

.botao--secundario {
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

/* Variantes acrescentadas pelo #22941 e usadas pela listagem. Ficam aqui, e não no
   _events.scss, porque não têm nada de evento — as quatro entregas seguintes da cadeia
   (lotes, estoque, página de venda, check-in) precisam das mesmas. */
.botao--perigo {
  color: var(--cor-erro);
  border-color: var(--cor-erro);
  background: var(--cor-erro-suave);
}

.botao--perigo:hover {
  color: #ffffff;
  background: var(--cor-erro);
}

.botao--compacto {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.78rem;
}

.botao--compacto svg {
  width: 15px;
  height: 15px;
}

/* Rótulo lido por leitor de tela e invisível na tela — usado no <th> da coluna de ações,
   que não tem título visível.

   🔴 `top` e `left` fazem parte da regra, e não são enfeite — #23488.

   `position: absolute` SEM `top`/`left` usa a POSIÇÃO ESTÁTICA. Nesta aplicação nenhum ancestral
   do caminho comum é posicionado (`.pagina-lista`, `.conteudo-aplicacao`, `.corpo-aplicacao`,
   `.estrutura-aplicacao` e o `body` são todos `static` — medido), então o bloco continente vira o
   **ICB**: a caixa escapa do `overflow: auto` do `.conteudo-aplicacao` E do `overflow: hidden` do
   `.pagina-aplicacao`, e o `bottom`/`right` dela entra no transbordo rolável do DOCUMENTO.

   Medido em 07/09/2026 (07/09, Edge/Chromium), e em cada linha o número do elemento oculto é
   IDÊNTICO ao do documento — é o que identifica o culpado em vez de sugeri-lo:

     /relatorios/vendas?periodo=30d  1440x900  documento 1401 x 900   <table> oculta base 1401
                                     800x900  documento 1806 x 900   <table> oculta base 1806
                                     390x844  documento larg. 463    <table> oculta direita 463
     /eventos                        390x844  documento larg. 480    <span>  oculto direita 480
     /eventos/{id}/lotes             390x844  documento larg. 551    <span>  oculto direita 551

   ⚠️ O caso do `<span>` é o que mostra que isto NÃO é problema só de tabela grande: um retângulo
   de 1x1 px basta. Ele nasce dentro de uma tabela larga que rola na horizontal, a posição estática
   dele fica em x=550, e ancorado no ICB ele leva o DOCUMENTO a 551 px numa tela de 390 — barra
   horizontal no telefone inteiro, vinda de um elemento que ninguém vê.

   Com `top: 0; left: 0` a posição estática deixa de ser consultada: a caixa vai para a origem do
   bloco continente — o ancestral posicionado quando existe, o canto do documento quando não. Em
   1x1 px e com `clip-path: inset(50%)` ela é invisível nos dois casos, e o leitor de tela continua
   lendo na ordem do DOM, que `top`/`left` não altera.

   📌 Isto substitui o bloco continente escopado que o Bug 23482 pôs no painel
   (`.painel-promotor .grafico-cartao { position: relative }`), REMOVIDO em _dashboard.scss: um
   guard, um lugar. */
.visualmente-oculto {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.botao__conteudo,
.botao__carregando {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.botao__conteudo svg,
.botao__carregando svg {
  width: 19px;
  height: 19px;
}

.botao__carregando svg {
  animation: girar 800ms linear infinite;
}

.htmx-request .botao__conteudo {
  display: none;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}

@keyframes girar {
  to {
    transform: rotate(1turn);
  }
}
.campo {
  display: grid;
  gap: 7px;
}

.campo__cabecalho {
  display: flex;
  min-height: 21px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.campo__rotulo {
  color: var(--cor-texto);
  font-size: 0.9rem;
  font-weight: 700;
}

.campo__link {
  font-size: 0.84rem;
}

.campo__controle {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-medio);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.campo__controle::placeholder {
  color: #929ba7;
  opacity: 1;
}

.campo__controle:hover {
  border-color: #aab4bf;
}

.campo__controle:focus {
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra-foco);
  outline: none;
}

.campo--invalido .campo__controle {
  border-color: var(--cor-erro);
  background: var(--cor-erro-suave);
}

.campo--invalido .campo__controle:focus {
  box-shadow: 0 0 0 3px rgba(228, 66, 66, 0.13);
}

.campo__senha {
  position: relative;
}

.campo__senha .campo__controle {
  padding-right: 50px;
}

.campo__alternar-senha {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--cor-texto-sutil);
  background: transparent;
  cursor: pointer;
  place-items: center;
}

.campo__alternar-senha:hover {
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.campo__alternar-senha svg {
  width: 19px;
  height: 19px;
}

.campo__alternar-senha {
  transform: translateY(-50%);
}

.campo__erro {
  display: flex;
  min-height: 0;
  align-items: center;
  gap: 5px;
  color: var(--cor-erro);
  font-size: 0.8rem;
  line-height: 1.35;
}

.campo__erro:empty {
  display: none;
}

.campo__erro:not(:empty)::before {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  content: "!";
  font-size: 9px;
  font-weight: 800;
  line-height: 11px;
  text-align: center;
}

.campo__ajuda {
  margin: -2px 0 0;
  color: var(--cor-texto-sutil);
  font-size: 0.76rem;
}

.selecao {
  display: flex;
  position: relative;
  align-items: flex-start;
  gap: 10px;
  color: var(--cor-texto-suave);
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.45;
}

.selecao > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.selecao__controle {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 5px;
  color: #ffffff;
  background: #ffffff;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
  place-items: center;
}

.selecao__controle svg {
  width: 13px;
  height: 13px;
  opacity: 0;
  stroke-width: 3;
}

.selecao > input:checked + .selecao__controle {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
}

.selecao > input:checked + .selecao__controle svg {
  opacity: 1;
}

.selecao > input:focus-visible + .selecao__controle {
  box-shadow: var(--sombra-foco);
}

/* PBI 23733 F3 — checkbox desabilitado (meio sem taxa vigente na tela do lote). O estado é o atributo
   `disabled` do input — a aparência só ACOMPANHA, e nunca é a única pista: o aviso de texto está no DOM.
   Marcado e desabilitado continua legível como "marcado" (mostra o valor GUARDADO), só mais apagado. */
.selecao > input:disabled + .selecao__controle {
  border-color: var(--cor-borda);
  background: var(--cor-fundo);
  cursor: not-allowed;
}

.selecao > input:disabled:checked + .selecao__controle {
  border-color: var(--cor-borda-forte);
  background: var(--cor-borda-forte);
}

.selecao--desabilitada {
  cursor: not-allowed;
  opacity: 0.7;
}

.alerta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--raio-medio);
  font-size: 0.84rem;
}

.alerta > svg {
  width: 19px;
  height: 19px;
  margin-top: 1px;
}

/* #23537 — mira só o título (AlertaUiTagHelper.cs dá a ele a classe .alerta__titulo). Um seletor
   de descendência (".alerta strong") pegava TAMBÉM qualquer <strong> de ênfase que a mensagem
   usasse dentro do <p> — quebrando linha antes e depois de cada um, em qualquer um dos 20 usos de
   <alerta-ui> do sistema que tivesse ênfase inline no corpo. */
.alerta__titulo {
  display: block;
  margin-bottom: 2px;
}

.alerta p {
  margin: 0;
}

.alerta--sucesso {
  border-color: #bfe8d7;
  color: #126d50;
  background: var(--cor-sucesso-suave);
}

.alerta--erro {
  border-color: #f0c4c4;
  color: #a92f2f;
  background: var(--cor-erro-suave);
}

.alerta--informacao {
  border-color: #c5e4ed;
  color: #176c85;
  background: var(--cor-primaria-suave);
}

.resumo-validacao:empty,
.resumo-validacao.validation-summary-valid {
  display: none;
}

.resumo-validacao {
  padding: 11px 14px;
  border: 1px solid #f0c4c4;
  border-radius: var(--raio-medio);
  color: #a92f2f;
  background: var(--cor-erro-suave);
  font-size: 0.82rem;
}

.resumo-validacao ul {
  margin: 0;
  padding-left: 18px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   Listagem, tabela e cartão de formulário — DT-038.

   Nasceram em _events.scss porque o #22941 foi a primeira tela de CRUD do produto, e nunca
   tiveram nada de evento. Subiram para cá quando o 22944 (lotes) precisou dos mesmos, que
   era o gatilho registrado. Movimentação pura: nenhuma declaração mudou.

   ⚠️ Nenhum destes seletores existia em _tokens, _authentication, _activation ou
   _application — conferido antes de mover, porque sair do fim da cascata (events) para o
   segundo arquivo (components) muda a ordem, e ordem só importa quando há colisão.
   ══════════════════════════════════════════════════════════════════════════════════════ */
.pagina-lista {
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 28px;
}

.pagina-lista__cabecalho {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pagina-lista__cabecalho h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.pagina-lista__cabecalho p {
  margin: 6px 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
}

.pagina-lista .alerta {
  margin-bottom: 16px;
}

/* Envoltório com rolagem horizontal própria: a tabela não pode empurrar a largura da página. */
.tabela-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.tabela__legenda {
  padding: 14px 16px;
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  text-align: left;
}

.tabela th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto-sutil);
  background: #f7f9fb;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabela td {
  padding: 12px 16px;
  border-bottom: 1px solid #eef1f4;
  vertical-align: middle;
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela tbody tr:hover {
  background: #f8fbfc;
}

.tabela__principal {
  display: block;
  color: var(--cor-texto);
  font-weight: 650;
}

.tabela__secundario {
  display: block;
  margin-top: 3px;
  color: var(--cor-texto-sutil);
  font-size: 0.76rem;
}

.tabela__acoes {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Formulário de uma ação só dentro de uma célula — o de exclusão, hoje. */
.formulario-linha {
  display: inline-flex;
  margin: 0;
}

/* Etiqueta de estado. Os modificadores são semânticos, não de entidade: qualquer listagem
   com estado de rascunho/ativo/encerrado/cancelado usa os mesmos quatro. */
.situacao {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.situacao--rascunho {
  color: var(--cor-texto-suave);
  background: #eef1f4;
}

.situacao--publicado {
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-suave);
}

.situacao--encerrado {
  color: #4b5b8a;
  background: #eef1fa;
}

.situacao--cancelado {
  color: var(--cor-erro);
  background: var(--cor-erro-suave);
}

.lista-vazia {
  display: grid;
  padding: 56px 24px;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-grande);
  background: var(--cor-superficie);
  justify-items: center;
  text-align: center;
}

.lista-vazia__icone {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 18px;
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  place-items: center;
}

.lista-vazia__icone svg {
  width: 26px;
  height: 26px;
}

.lista-vazia h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.lista-vazia p {
  margin: 0 0 20px;
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
}

.paginacao {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.paginacao__posicao {
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.cartao-formulario {
  display: grid;
  max-width: 820px;
  gap: 20px;
  margin: 28px;
  padding: 28px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  background: var(--cor-superficie);
}

.cartao-formulario__cabecalho h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.cartao-formulario__cabecalho p {
  margin: 6px 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.87rem;
}

/* Variantes de .campo__controle para os tipos que o CampoFormularioTagHelper não renderiza —
   ele só gera <input> de texto. Ficam junto do .campo, que é onde se procura por elas. */
.campo__controle--area {
  min-height: 120px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

/* O input de arquivo não usa o height fixo de .campo__controle: o botão nativo do navegador
   não centraliza dentro dele. */
.campo__controle--arquivo {
  height: auto;
  padding: 11px 12px;
  font-size: 0.84rem;
}

select.campo__controle {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365707f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

/* #22950 — .campo-cor: amostra + campo de texto + paleta sugerida + seletor nativo.
   PROMOVIDO de _sales-pages.scss para cá no #23279: deixou de ser exclusivo de
   Eventos/PaginaVenda.cshtml quando Organizacao/Configuracoes.cshtml passou a usá-lo também (a
   paleta de sugestões — PaletaCoresSugeridas, Presentation/Marca — é a mesma nas duas telas). */
.campo-cor {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* A amostra também recebe a cor por custom property, e o var() decide o que mostrar quando não há
   cor nenhuma. Sem o fallback, background vazio deixaria um quadrado transparente indistinguível
   de um branco escolhido de propósito. */
.campo-cor__amostra {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--amostra, var(--cor-borda));
}

.campo-cor__entrada {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* #23279 — seletor nativo, ao lado do campo de texto. NÃO troca o controle de verdade: escreve no
   mesmo x-model do campo de texto, exatamente como um clique na paleta abaixo — <input type="color">
   não expressa estado vazio (herança), então o texto continua sendo o único jeito de limpar o
   campo. Estilizado do tamanho da amostra, para os dois lerem como um par. */
.campo-cor__seletor {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  background: none;
  appearance: none;
  cursor: pointer;
}

.campo-cor__seletor::-webkit-color-swatch-wrapper {
  padding: 3px;
}

.campo-cor__seletor::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--raio-pequeno) - 3px);
}

.campo-cor__seletor::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--raio-pequeno) - 3px);
}

/* Sugestões de cor primária — conveniência de clique sobre o MESMO campo de texto, não seletor
   substituto (#23534, fatia 1). Cada botão escreve no x-model; nenhum deles some do DOM nem troca
   o controle de verdade. */
.campo-cor__paleta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.campo-cor__amostra-sugerida {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--raio-pequeno);
  background: var(--sugestao);
  cursor: pointer;
  transition: border-color 120ms ease-in-out;
}

.campo-cor__amostra-sugerida:hover {
  border-color: var(--cor-borda-forte);
}

.campo-cor__amostra-sugerida--ativa {
  border-color: var(--cor-texto);
}

/* #23299 — o asterisco de campo obrigatório. Emitido pelo CampoFormularioTagHelper só quando a
   tela pede (`marcar-obrigatorio`) E o model exige o campo (`Metadata.IsRequired`).

   Fica no sub-bloco do .campo, e não em _organization.scss, porque não tem nada de organização:
   quem o emite é o tag helper compartilhado. Classe genérica em partial de tela é o DT-038, e a
   regra que saiu dele é "suba, não copie".

   O glifo leva aria-hidden no HTML e o texto " (obrigatório)" vai num .visualmente-oculto ao
   lado — leitor de tela anuncia "*" como "asterisco", que não comunica obrigatoriedade a quem
   não vê a convenção visual. */
.campo__obrigatorio {
  margin-left: 3px;
  color: var(--cor-erro);
  font-weight: 700;
}

/* Estrutura interna de um formulário longo: seções tituladas, linhas de dois campos e a barra
   de ações no rodapé. Nasceu como .formulario-evento* em _events.scss (#22941) e subiu aqui
   quando o 22944 precisou dos mesmos — o CSS nunca teve nada de evento, só o nome tinha. É a
   segunda rodada do DT-038, e a regra continua sendo "suba, não copie". */
.formulario {
  display: grid;
  gap: 26px;
}

.formulario__secao {
  display: grid;
  gap: 16px;
}

.formulario__titulo-secao {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formulario__nota {
  margin: -6px 0 0;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

.formulario__linha {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.formulario__acoes {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 4px;
}

@media (max-width: 760px) {
  .pagina-lista,
  .cartao-formulario {
    margin: 0;
    padding: 18px;
  }
  .pagina-lista__cabecalho {
    align-items: stretch;
    flex-direction: column;
  }
  .tabela__acoes {
    justify-content: flex-start;
  }
  .formulario__linha {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* #23115 — envoltório do FRAGMENTO trocado pelo htmx numa `.pagina-lista`.
 *
 * 🔴 Por que esta classe existe, e a razão é mecânica, não estética. `.pagina-lista` é
 * `display: grid`, e item de grid nasce com `min-width: auto` — ou seja, NÃO encolhe abaixo do
 * próprio conteúdo. O `.tabela-envoltorio` escapa disso porque tem `overflow-x: auto`, e
 * `overflow` diferente de `visible` faz o `min-width: auto` resolver para 0: é exatamente o que o
 * comentário da linha 459 promete, e é por isso que a tela de vendas (onde o envoltório é item
 * DIRETO do grid) fica certa em 360px.
 *
 * Um fragmento htmx quebra isso: o `id` do `hx-target` precisa envolver também os alertas e o
 * estado vazio, então entra um `<div>` a mais entre o grid e o envoltório — e esse div, com
 * `overflow: visible`, volta a ter `min-width: auto` e passa a ser empurrado pela tabela.
 *
 * ⚠️ MEDIDO em 08/09/2026, base descartável, Chrome headless a 360px: sem esta regra o
 * `section.pagina-lista` fica com `scrollWidth` 729 e o `header`, o `h1`, o `<p>` e o botão
 * primário TODOS vão a 711px — o subtítulo corta no meio da palavra e o botão "Novo sócio" mostra
 * só o "N". Com ela, o transbordo volta a ficar contido no `.tabela-envoltorio`, como em
 * `/vendas`. Evidências: `docs/pbi/23115/evidencias/lista--360.png` e o diagnóstico no
 * `laudo-tela.md`.
 *
 * 📌 A correção NÃO foi feita em `.pagina-lista > *`, que consertaria de uma vez as outras telas
 * com a mesma forma: mexer no seletor compartilhado no meio de uma rodada com três trilhas altera
 * tela alheia sem que ninguém tenha pedido. O débito de `Pages/Lotes/Index.cshtml`, que tem a
 * MESMA estrutura, está registrado em `docs/pbi/23115/decisoes.md` — e está registrado como
 * INFERIDO da forma do markup, não medido. */
.fragmento-lista {
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * #23118 — importação em lote da base de sócios (S23).
 *
 * Acrescentado NO FIM do arquivo, como o #23115 acrescentou o `.fragmento-lista`: append é o que
 * permite três trilhas mexerem no mesmo partial na mesma rodada sem conflito de merge. Nenhum
 * seletor compartilhado é redefinido aqui.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* Envoltório dos botões de ação do cabeçalho de uma `.pagina-lista`.
 *
 * 🔴 Existe porque o cabeçalho passou a ter DOIS botões. `.pagina-lista__cabecalho` é
 * `display: flex` com `justify-content: space-between`: dois filhos de ação soltos ficariam um em
 * cada ponta, com o título entre eles. E o `flex-wrap` daqui é o que faz os dois caírem um sob o
 * outro em 360px em vez de comprimir o título — a mesma família do transbordo que o #23115 mediu
 * (D-local-16). Medido neste item; evidências em docs/pbi/23118/evidencias/. */
.pagina-lista__acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Os dois caminhos do estado vazio: importar em lote e cadastrar à mão. */
.lista-vazia__acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── O bloco "Como preparar o arquivo em lote" ────────────────────────────────────────────────── */
.importacao {
  display: grid;
  gap: 16px;
  /* `min-width: 0` pela mesma razão mecânica do `.fragmento-lista`: item de grid nasce com
   * `min-width: auto` e não encolhe abaixo do próprio conteúdo. As etiquetas de coluna e a tabela
   * de rejeitados são conteúdo largo, e sem isto elas empurrariam o `.pagina-lista` inteiro. */
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  background: var(--cor-superficie);
}

.importacao__cabecalho {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.importacao__cabecalho h2 {
  margin: 0;
  font-size: 0.98rem;
}

.importacao__cabecalho p {
  margin: 5px 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.84rem;
}

.importacao__icone {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: var(--raio-pequeno);
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  align-items: center;
  justify-content: center;
}

.importacao__icone svg {
  width: 18px;
  height: 18px;
}

.importacao__colunas {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.importacao__rotulo-colunas {
  color: var(--cor-texto-sutil);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.importacao__colunas ul {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 7px;
  flex-wrap: wrap;
  list-style: none;
}

.importacao__regras {
  display: grid;
  margin: 0;
  padding-left: 20px;
  gap: 6px;
  color: var(--cor-texto-suave);
  font-size: 0.84rem;
}

.importacao__perigo {
  color: var(--cor-erro);
}

.importacao__nada {
  margin-top: 4px;
  font-weight: 700;
}

.importacao__envio {
  display: flex;
  padding-top: 16px;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid var(--cor-borda);
}

/* O campo de arquivo cresce; o botão fica no tamanho dele. Em 360px o `flex-wrap` põe o botão
 * embaixo, e o `min-width: 0` impede o <input type="file"> — que tem largura intrínseca grande por
 * causa do texto do botão nativo — de empurrar a linha. */
.importacao__envio .campo {
  flex: 1 1 260px;
  min-width: 0;
}

/* ── O estado "resultado" ──────────────────────────────────────────────────────────────────────── */
.resultado-importacao {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  background: var(--cor-superficie);
}

.resultado-importacao h2 {
  margin: 0;
  font-size: 1.05rem;
}

.resultado-importacao header p {
  margin: 4px 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.84rem;
}

.resultado-importacao h3 {
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.resultado-importacao__rejeitados {
  min-width: 0;
}

.resultado-importacao__contadores {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  list-style: none;
}

.contador-importacao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  grid-template-areas: "icone valor" "icone rotulo";
  align-items: center;
}

.contador-importacao__icone {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  grid-area: icone;
  align-items: center;
  justify-content: center;
}

.contador-importacao__icone svg {
  width: 15px;
  height: 15px;
}

.contador-importacao strong {
  grid-area: valor;
  font-size: 1.28rem;
  line-height: 1.1;
}

.contador-importacao span:last-child {
  grid-area: rotulo;
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
}

.contador-importacao--inseridos {
  border-color: #bfe6cf;
}

.contador-importacao--inseridos .contador-importacao__icone {
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-suave);
}

.contador-importacao--inseridos strong {
  color: var(--cor-sucesso);
}

.contador-importacao--atualizados {
  border-color: #c5e4ed;
}

.contador-importacao--atualizados .contador-importacao__icone {
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.contador-importacao--atualizados strong {
  color: var(--cor-primaria);
}

.contador-importacao--removidos .contador-importacao__icone {
  color: var(--cor-texto-suave);
  background: #eef1f4;
}

.contador-importacao--rejeitados {
  border-color: #f0c4c4;
}

.contador-importacao--rejeitados .contador-importacao__icone {
  color: var(--cor-erro);
  background: var(--cor-erro-suave);
}

.contador-importacao--rejeitados strong {
  color: var(--cor-erro);
}

.pagina-autenticacao {
  --painel-fundo: #117f9e;
  --painel-fundo-profundo: #096f8d;
  --painel-texto: #ffffff;
  --painel-texto-suave: rgba(255, 255, 255, 0.83);
}

.tema-organizacao {
  --cor-primaria: #1b887b;
  --cor-primaria-hover: #126e64;
  --cor-primaria-hover: color-mix(in srgb, var(--cor-primaria) 80%, black);
  --cor-primaria-suave: #edf8f6;
  --cor-primaria-suave: color-mix(in srgb, var(--cor-primaria) 7%, white);
  --sombra-foco: 0 0 0 3px rgba(27, 136, 123, 0.16);
  --sombra-foco: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 16%, transparent);
  --painel-fundo: #17394c;
  --painel-fundo-profundo: #102b3c;
}

.estrutura-autenticacao {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(390px, 46%) minmax(520px, 54%);
}

.painel-marca {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--painel-texto);
  background: linear-gradient(135deg, transparent 0 49.3%, rgba(255, 255, 255, 0.09) 49.5% 50.5%, transparent 50.7%) 0 0/58px 58px, linear-gradient(45deg, transparent 0 49.3%, rgba(255, 255, 255, 0.09) 49.5% 50.5%, transparent 50.7%) 0 0/58px 58px, linear-gradient(145deg, var(--painel-fundo), var(--painel-fundo-profundo));
}

.painel-marca::after {
  position: absolute;
  right: -25%;
  bottom: 5%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  content: "";
  filter: blur(1px);
}

.painel-marca__conteudo {
  display: flex;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(38px, 5.2vw, 66px) clamp(36px, 5vw, 72px) 38px;
  flex-direction: column;
}

.painel-marca__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.marca {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.marca__nome {
  overflow: hidden;
  font-family: var(--fonte-destaque);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marca .simbolo-sporti {
  width: 57px;
  height: auto;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 2.4;
}

.marca__monograma {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  color: var(--painel-fundo-profundo);
  background: #ffffff;
  font-size: 0.93rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  place-items: center;
}

.marca__logo {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 14px;
  object-fit: contain;
}

.selo-organizacao {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mensagem-marca {
  width: min(100%, 430px);
  margin: auto 0;
  padding: 68px 0;
}

.mensagem-marca__chamada {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.mensagem-marca h2 {
  max-width: 400px;
  margin: 0 0 16px;
  color: #ffffff;
  font-family: var(--fonte-destaque);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.mensagem-marca > p:last-child {
  max-width: 410px;
  margin: 0;
  color: var(--painel-texto-suave);
  font-size: clamp(0.94rem, 1.4vw, 1.08rem);
  line-height: 1.55;
}

.painel-marca__rodape {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.77);
  font-size: 0.8rem;
}

.painel-marca__rodape svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.painel-marca__conteudo--organizacao {
  max-width: 660px;
}

.painel-marca__conteudo--organizacao .mensagem-marca {
  margin: 0;
  padding: 38px 0 52px;
}

.ilustracao-ingressos {
  position: relative;
  width: min(92%, 410px);
  height: clamp(210px, 27vh, 300px);
  margin: auto auto 0;
  perspective: 900px;
}

.ingresso {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(330px, 85%);
  height: 164px;
  border-radius: 18px;
}

.ingresso::before,
.ingresso::after {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--painel-fundo-profundo);
  content: "";
  transform: translateY(-50%);
}

.ingresso::before {
  left: -11px;
}

.ingresso::after {
  right: -11px;
}

.ingresso--fundo {
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  transform: translate(-43%, -58%) rotate(9deg);
}

.ingresso--frente {
  display: grid;
  grid-template-columns: 72px 1fr 44px;
  align-items: center;
  padding: 24px;
  color: #17394c;
  background: #ffffff;
  box-shadow: 0 28px 55px rgba(2, 19, 28, 0.25);
  transform: translate(-55%, -45%) rotate(-6deg);
}

.ingresso__marca {
  display: grid;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  color: #ffffff;
  background: var(--cor-primaria);
  font-size: 0.85rem;
  font-weight: 800;
  place-items: center;
}

.ingresso__linhas {
  width: 75%;
  height: 52px;
  background: linear-gradient(#d8e0e5 0 0) 0 5px/85% 6px no-repeat, linear-gradient(#e7ecef 0 0) 0 24px/100% 5px no-repeat, linear-gradient(#e7ecef 0 0) 0 39px/62% 5px no-repeat;
}

.ingresso__codigo {
  width: 38px;
  height: 78px;
  border-left: 1px dashed #cbd5da;
  background: repeating-linear-gradient(90deg, transparent 0 4px, #17394c 4px 6px) 13px 9px/22px 60px no-repeat;
}

.conteudo-autenticacao {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 72px);
  background: var(--cor-fundo);
}

.marca-mobile {
  display: none;
}

.coluna-autenticacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.cartao-autenticacao {
  width: min(100%, 460px);
}

.cartao-autenticacao--cadastro {
  width: min(100%, 560px);
}

.cartao-autenticacao--recuperacao {
  width: min(100%, 470px);
}

.cabecalho-autenticacao {
  margin-bottom: 28px;
}

.cabecalho-autenticacao__simbolo {
  display: inline-flex;
  height: 34px;
  align-items: center;
  margin-bottom: 16px;
  color: var(--cor-primaria);
}

.cabecalho-autenticacao__simbolo > svg {
  width: 46px;
  height: 36px;
  stroke-width: 3;
}

.cabecalho-autenticacao__simbolo > span {
  display: grid;
  min-width: 42px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(27, 136, 123, 0.24);
  border-radius: 9px;
  background: var(--cor-primaria-suave);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  place-items: center;
}

.cabecalho-autenticacao h1 {
  margin: 0 0 3px;
  color: var(--cor-texto);
  font-family: var(--fonte-destaque);
  font-size: clamp(1.7rem, 2.8vw, 2rem);
  font-weight: 770;
  letter-spacing: -0.035em;
  line-height: 1.25;
}

.cabecalho-autenticacao p {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.94rem;
}

.alerta + .resumo-validacao,
.cabecalho-autenticacao + .resumo-validacao,
.cabecalho-autenticacao + .alerta {
  margin-top: -10px;
}

.alerta,
.resumo-validacao {
  margin-bottom: 18px;
}

.formulario-autenticacao {
  display: grid;
  gap: 17px;
}

.formulario-autenticacao .botao--primario {
  margin-top: 2px;
}

.grade-formulario {
  display: grid;
  align-items: start;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.selecao--lembrar {
  margin-top: -4px;
}

.selecao--termos {
  margin-top: -1px;
}

.campo__erro--termos {
  margin-top: -12px;
}

.provedores-acesso {
  margin-top: 25px;
}

.divisor {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 23px;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

.divisor::before,
.divisor::after {
  height: 1px;
  flex: 1;
  background: var(--cor-borda);
  content: "";
}

.divisor span {
  transform: translateY(-1px);
}

.provedores-acesso__lista {
  display: grid;
  gap: 10px;
}

.botao--provedor {
  position: relative;
  width: 100%;
  min-height: 50px;
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
  background: var(--cor-superficie);
  box-shadow: 0 1px 2px rgba(24, 35, 43, 0.03);
}

.botao--provedor:hover {
  border-color: #9da9b4;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(24, 35, 43, 0.06);
}

.botao--provedor:disabled {
  color: var(--cor-texto);
  opacity: 1;
}

.botao--provedor-sporti {
  color: #156f8b;
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.provedor__simbolo {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  color: #111111;
  place-items: center;
}

.provedor__simbolo svg {
  width: 19px;
  height: 19px;
}

.provedor__simbolo--sporti .simbolo-sporti {
  width: 31px;
  height: 23px;
  fill: none;
  stroke: #2896ad;
  stroke-width: 3;
}

.provedor__simbolo--google {
  color: #4285f4;
  font-family: Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  text-shadow: 1px 1px 0 #34a853, -1px 1px 0 #fbbc05, 1px -1px 0 #ea4335;
}

.provedor__simbolo--microsoft {
  display: grid;
  width: 17px;
  height: 17px;
  gap: 2px;
  grid-template-columns: 1fr 1fr;
}

.provedor__simbolo--microsoft span:nth-child(1) {
  background: #f25022;
}

.provedor__simbolo--microsoft span:nth-child(2) {
  background: #7fba00;
}

.provedor__simbolo--microsoft span:nth-child(3) {
  background: #00a4ef;
}

.provedor__simbolo--microsoft span:nth-child(4) {
  background: #ffb900;
}

.provedores-acesso__aviso {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 11px 0 0;
  color: var(--cor-texto-sutil);
  font-size: 0.72rem;
  line-height: 1.45;
}

.provedores-acesso__aviso svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.rodape-alternativo {
  margin: 24px 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
  text-align: center;
}

.texto-introducao {
  margin: -8px 0 24px;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  line-height: 1.55;
}

.link-voltar {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin: 25px auto 0;
  font-size: 0.87rem;
}

.link-voltar svg {
  width: 16px;
  height: 16px;
}

.estado-recuperacao {
  text-align: center;
}

.estado-recuperacao__icone {
  display: grid;
  width: 66px;
  height: 66px;
  margin: 4px auto 20px;
  border-radius: 20px;
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-suave);
  place-items: center;
}

.estado-recuperacao__icone svg {
  width: 30px;
  height: 30px;
}

.estado-recuperacao h2 {
  margin: 0 0 9px;
  font-size: 1.25rem;
}

.estado-recuperacao p {
  margin: 0 auto;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  line-height: 1.55;
}

.estado-recuperacao__icone--erro {
  color: var(--danger);
  background: var(--danger-bg);
}

.estado-recuperacao__aviso {
  margin: 22px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--raio-medio);
  color: var(--text-secondary);
  background: var(--surface-card);
  font-size: 0.81rem;
  line-height: 1.55;
  text-align: left;
}

.estado-recuperacao__aviso strong {
  color: var(--text-primary);
  font-weight: 700;
}

.requisitos-senha {
  display: grid;
  margin: -6px 0 0;
  padding: 0;
  gap: 7px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.requisitos-senha__item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.requisitos-senha__item--atendido {
  color: var(--success);
}

.requisitos-senha__item svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.estado-recuperacao .botao {
  margin-top: 26px;
}

.estado-recuperacao .botao + .link-voltar {
  margin-top: 16px;
}

@media (max-width: 1080px) {
  .estrutura-autenticacao {
    grid-template-columns: minmax(360px, 42%) minmax(500px, 58%);
  }
  .painel-marca__conteudo {
    padding-inline: 42px;
  }
  .conteudo-autenticacao {
    padding-inline: 48px;
  }
  .selo-organizacao {
    display: none;
  }
}
@media (max-width: 820px) {
  .estrutura-autenticacao {
    display: block;
  }
  .painel-marca {
    display: none;
  }
  .conteudo-autenticacao {
    display: block;
    padding: 28px 24px 42px;
  }
  .marca-mobile {
    display: block;
    width: min(100%, 560px);
    margin: 0 auto 42px;
    color: var(--cor-primaria);
  }
  .marca-mobile .marca__nome {
    max-width: min(75vw, 350px);
    font-size: 1.5rem;
  }
  .marca-mobile .marca__monograma {
    color: #ffffff;
    border: 0;
    background: var(--cor-primaria);
  }
  .cartao-autenticacao {
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .conteudo-autenticacao {
    padding: 22px 20px 36px;
  }
  .marca-mobile {
    margin-bottom: 34px;
  }
  .cabecalho-autenticacao {
    margin-bottom: 24px;
  }
  .cabecalho-autenticacao__simbolo {
    margin-bottom: 12px;
  }
  .grade-formulario {
    grid-template-columns: 1fr;
  }
  .botao--provedor {
    padding-inline: 15px;
  }
  .provedores-acesso__aviso {
    font-size: 0.69rem;
  }
}
@media (max-height: 760px) and (min-width: 821px) {
  .conteudo-autenticacao {
    align-items: flex-start;
    padding-block: 38px;
  }
  .painel-marca__conteudo {
    padding-block: 38px 28px;
  }
  .mensagem-marca {
    padding-block: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.ativacao {
  display: contents;
}

.cartao-ativacao {
  display: grid;
  gap: 20px;
}

.ativacao__cabecalho {
  display: grid;
  gap: 6px;
}

.ativacao__overline {
  margin: 0;
  color: var(--cor-primaria);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ativacao__cabecalho h1 {
  margin: 0;
  font-size: 1.4375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ativacao__subtitulo {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
}

.ativacao__trilha {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ativacao__trilha::before {
  position: absolute;
  z-index: 0;
  top: 15px;
  right: 15px;
  left: 15px;
  height: 2px;
  background: var(--cor-borda);
  content: "";
}

.passo {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.passo__marca {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--cor-borda);
  border-radius: 50%;
  background: var(--cor-superficie);
  color: var(--cor-texto-sutil);
  font-size: 0.8125rem;
  font-weight: 700;
}

.passo__marca svg {
  width: 16px;
  height: 16px;
}

.passo__rotulo {
  color: var(--cor-texto-sutil);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.passo--ativo .passo__marca,
.passo--concluido .passo__marca {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: #ffffff;
}

.passo--ativo .passo__rotulo,
.passo--concluido .passo__rotulo {
  color: var(--cor-texto);
}

.campo--somente-leitura .campo__valor-fixo {
  margin: 0;
  padding: 12px 13px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.aceite {
  display: flex;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
  cursor: pointer;
  gap: 12px;
}

.aceite:has(input:checked) {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.aceite:focus-within {
  box-shadow: var(--sombra-foco);
}

.aceite input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.aceite__controle {
  display: flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: 6px;
  margin-top: 1px;
  background: transparent;
  color: #ffffff;
}

.aceite__controle svg {
  width: 14px;
  height: 14px;
  opacity: 0;
}

.aceite input:checked + .aceite__controle {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
}

.aceite input:checked + .aceite__controle svg {
  opacity: 1;
}

.aceite__texto {
  color: var(--cor-texto-suave);
  font-size: 0.84375rem;
  line-height: 1.55;
}

.ativacao__aviso {
  display: flex;
  align-items: flex-start;
  padding: 13px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-primaria-suave);
  color: var(--cor-texto-suave);
  font-size: 0.78125rem;
  gap: 11px;
  line-height: 1.55;
}

.ativacao__aviso-icone {
  flex-shrink: 0;
  color: var(--cor-primaria);
}

.ativacao__form-reenvio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 8px;
  gap: 8px;
}

.ativacao__aviso-icone svg {
  width: 19px;
  height: 19px;
}

.resumo {
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

.resumo__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  font-size: 0.8125rem;
  font-weight: 700;
}

.resumo__editar {
  padding: 0;
  border: none;
  background: none;
  color: var(--cor-primaria);
  cursor: pointer;
  font-size: 0.78125rem;
  font-weight: 600;
}

.resumo__editar:hover {
  text-decoration: underline;
}

.resumo__lista {
  margin: 0;
  padding: 6px 15px;
}

.resumo__lista > div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 0.84375rem;
  gap: 16px;
}

.resumo__lista > div:last-child {
  border-bottom: none;
}

.resumo__lista dt {
  color: var(--cor-texto-sutil);
}

.resumo__lista dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: right;
}

.resumo__aceites {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.78125rem;
  gap: 9px;
}

.resumo__aceites svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--cor-sucesso);
}

.ativacao__navegacao {
  display: flex;
  gap: 10px;
}

.ativacao__navegacao .botao {
  height: 50px;
}

.botao--expandir {
  flex: 1;
}

.ativacao__navegacao .botao--secundario {
  flex: 0 0 auto;
}

.ativacao__navegacao .botao--primario:not(.botao--secundario) {
  flex: 1;
}

.ativacao__rodape {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
  text-align: center;
}

.ativacao__sucesso,
.ativacao__recusa {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.ativacao__sucesso h1,
.ativacao__recusa h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ativacao__sucesso p,
.ativacao__recusa p {
  margin: 0;
  max-width: 340px;
  color: var(--cor-texto-suave);
  font-size: 0.90625rem;
  line-height: 1.6;
}

.ativacao__sucesso-icone,
.ativacao__recusa-icone {
  display: flex;
  width: 76px;
  height: 76px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}

.ativacao__recusa-icone {
  background: var(--cor-erro-suave);
  color: var(--cor-erro);
}

.ativacao__sucesso-icone svg,
.ativacao__recusa-icone svg {
  width: 38px;
  height: 38px;
}

.ativacao__recusa-apoio {
  color: var(--cor-texto-sutil);
  font-size: 0.8125rem;
}

.ativacao__sucesso .botao {
  width: 100%;
  margin-top: 6px;
}

@media (max-width: 640px) {
  .ativacao__navegacao {
    flex-direction: column-reverse;
  }
  .ativacao__navegacao .botao {
    width: 100%;
  }
  .resumo__lista > div {
    flex-direction: column;
    gap: 2px;
  }
  .resumo__lista dd {
    text-align: left;
  }
}
.pagina-aplicacao {
  --largura-barra-lateral: 232px;
  overflow: hidden;
  background: #eef3f7;
}

.estrutura-aplicacao {
  display: grid;
  height: 100vh;
  height: 100dvh;
  grid-template-columns: var(--largura-barra-lateral) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.barra-lateral {
  display: flex;
  position: relative;
  z-index: 30;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  border-right: 1px solid #dce3e9;
  background: #ffffff;
  flex-direction: column;
}

.barra-lateral__cabecalho {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.marca-aplicacao {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: #10263b;
  text-decoration: none;
}

.marca-aplicacao:hover {
  text-decoration: none;
}

.marca-aplicacao__simbolo {
  display: grid;
  min-width: 31px;
  height: 31px;
  padding: 0 7px;
  border-radius: 9px;
  color: #ffffff;
  background: var(--cor-primaria);
  font-size: 0.83rem;
  font-weight: 750;
  place-items: center;
}

.marca-aplicacao__logo {
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  object-fit: contain;
}

.marca-aplicacao__texto {
  display: grid;
  min-width: 0;
  line-height: 1.22;
}

.marca-aplicacao__texto strong {
  max-width: 142px;
  overflow-x: hidden;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marca-aplicacao__texto small {
  margin-top: 3px;
  color: var(--cor-primaria);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.menu-principal {
  display: grid;
  gap: 5px;
  padding: 3px 8px;
}

.menu-principal__item {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border-radius: 10px;
  color: #4f5964;
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease;
}

.menu-principal__item:hover {
  color: var(--cor-primaria);
  background: #f2f7fa;
  text-decoration: none;
}

.menu-principal__item--ativo {
  color: var(--cor-primaria);
  background: #e6f2f6;
  font-weight: 700;
}

.menu-principal__item svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.barra-lateral__rodape {
  margin-top: auto;
  padding: 12px 8px;
}

.identificador-ambiente {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  overflow: hidden;
  border-radius: 10px;
  color: #16647c;
  background: #e6f2f6;
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
}

.identificador-ambiente > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.identificador-ambiente__ponto {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cor-primaria);
}

.selo-perfil-interno {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 8px 10px;
  overflow: hidden;
  border-radius: 10px;
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.selo-perfil-interno svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.selo-perfil-interno__texto {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.selo-perfil-interno__texto strong {
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selo-perfil-interno__texto small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--cor-texto-suave);
  font-size: 0.62rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corpo-aplicacao {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 61px minmax(0, 1fr);
}

.barra-superior {
  display: flex;
  position: relative;
  z-index: 20;
  min-width: 0;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid #dce3e9;
  background: #ffffff;
}

.barra-superior__espacador {
  flex: 1;
}

.botao-icone {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #65717c;
  background: transparent;
  cursor: pointer;
  place-items: center;
}

.botao-icone:hover {
  color: var(--cor-primaria);
  background: #eff5f7;
}

.botao-icone svg {
  width: 20px;
  height: 20px;
}

.barra-superior__menu,
.barra-lateral__fechar {
  display: none;
}

.faixa-visao-interna {
  display: inline-flex;
  min-width: 0;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--cor-aviso);
  background: var(--cor-aviso-suave);
  font-size: 0.68rem;
  font-weight: 650;
}

.faixa-visao-interna svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.faixa-visao-interna > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuario-atual {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid #e0e5e9;
}

.usuario-atual__avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  color: #ffffff;
  background: var(--cor-primaria);
  font-size: 0.75rem;
  font-weight: 750;
  place-items: center;
}
.usuario-atual__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.usuario-atual__nome {
  max-width: 220px;
  overflow: hidden;
  color: #17263a;
  font-size: 0.82rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formulario-sair {
  display: flex;
}

.botao-sair {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  color: #6d7781;
  background: transparent;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 650;
}

.botao-sair:hover {
  color: #b03838;
  background: #fff0f0;
}

.botao-sair svg {
  width: 17px;
  height: 17px;
}

.conteudo-aplicacao {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #eef3f7;
}

.conteudo-aplicacao:focus-visible {
  outline-offset: -3px;
}

.estado-pagina {
  display: grid;
  min-height: 100%;
  padding: 32px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.estado-pagina__icone {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 18px;
  color: var(--cor-primaria);
  background: #ffffff;
  place-items: center;
}

.estado-pagina__icone svg {
  width: 29px;
  height: 29px;
}

.estado-pagina h1 {
  margin: 0 0 8px;
  font-size: 1.55rem;
}

.estado-pagina p {
  margin: 0 0 24px;
  color: var(--cor-texto-suave);
}

.sobreposicao-menu {
  display: none;
}

@media (max-width: 760px) {
  .pagina-aplicacao {
    overflow: auto;
  }
  .estrutura-aplicacao {
    display: block;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .barra-lateral {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 280px);
    box-shadow: 18px 0 45px rgba(19, 36, 48, 0.18);
    transform: translateX(-105%);
    transition: transform 190ms ease;
  }
  .barra-lateral--aberta {
    transform: translateX(0);
  }
  .barra-lateral__fechar,
  .barra-superior__menu {
    display: grid;
  }
  .sobreposicao-menu {
    display: block;
    position: fixed;
    z-index: 25;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(13, 27, 38, 0.4);
  }
  .corpo-aplicacao {
    grid-template-rows: 58px minmax(calc(100dvh - 58px), 1fr);
  }
  .barra-superior {
    padding-inline: 12px;
  }
  .usuario-atual {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 480px) {
  .usuario-atual__nome,
  .botao-sair span {
    display: none;
  }
  .faixa-visao-interna {
    flex-shrink: 1;
  }
  .barra-superior {
    gap: 7px;
  }
  .botao-sair {
    width: 36px;
    justify-content: center;
    padding: 0;
  }
}
.cartao-resumo.cartao-resumo--escuro {
  border-color: var(--gray-900);
  background: var(--surface-dark);
}
.cartao-resumo.cartao-resumo--escuro .cartao-resumo__rotulo {
  color: var(--teal-200);
}
.cartao-resumo.cartao-resumo--escuro .cartao-resumo__valor {
  color: var(--text-inverse);
}
.cartao-resumo.cartao-resumo--escuro .cartao-resumo__apoio {
  color: var(--gray-300);
}

.grafico-donut__fatia--chargeback,
.grafico-donut__marca--chargeback {
  --cor-meio: var(--danger);
}

.grafico-donut__fatia--voluntario,
.grafico-donut__marca--voluntario {
  --cor-meio: var(--warning);
}

.grafico-donut__fatia--reembolso,
.grafico-donut__marca--reembolso {
  --cor-meio: var(--gray-400);
}

.ranking-cliente {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ranking-cliente__iniciais {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-brand-soft);
  color: var(--text-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ranking-cliente__nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-proporcao {
  min-width: 48px;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-sunken);
}

.barra-proporcao__preenchimento {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.graficos-margem-interna {
  margin-top: 4px;
}

.identificador-ambiente--conta-operada {
  color: #8a4b00;
  background: #fdf1e0;
}

.identificador-ambiente--conta-operada .identificador-ambiente__ponto {
  background: #c86a10;
}

.identificador-ambiente--conta-operada {
  align-items: flex-start;
  white-space: normal;
}

.identificador-ambiente--conta-operada .identificador-ambiente__ponto {
  margin-top: 6px;
}

.identificador-ambiente__texto {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.25;
}

.identificador-ambiente__texto small {
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.85;
}

.identificador-ambiente__texto strong {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Telas de evento (#22941). Só o que é DE EVENTO fica aqui.
   O layout de listagem, a tabela, o cartão de formulário, a etiqueta de situação, o estado
   vazio, a paginação e as variantes de .campo__controle subiram para _components.scss: eram
   genéricos desde o começo e ficaram aqui só porque esta foi a primeira tela de CRUD do
   produto. É o DT-038, e o gatilho foi o 22944 precisar dos mesmos.

   Segunda rodada, no 22944: .formulario-evento* também subiu, como .formulario*. O CSS não
   tinha nada de evento — grid, gap e duas colunas —, só o nome tinha. Sobrou aqui o que é
   mesmo de evento: a miniatura da imagem de destaque. */
/* Miniatura da imagem de destaque já gravada, na tela de edição. */
.imagem-atual {
  display: grid;
  gap: 6px;
  margin: 0;
  justify-items: start;
}

.imagem-atual img {
  max-width: 260px;
  max-height: 160px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  object-fit: cover;
}

.imagem-atual figcaption {
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   #23496 — paridade da S7 com o export do Claude Design.

   🔴 A paleta é a da CASA (--cor-*), e não os tokens oficiais de design-system/.
   Motivo medido, não preferência: Styles/design-system/LEIA-ME.md §4 (23291) declara que os
   tokens em português continuam sendo o que as telas usam, e que reapontá-los é ENTREGA PRÓPRIA,
   instruída pela aderência (23292). Escrever estes blocos com --text-primary/--accent deixaria
   partes da MESMA tela em paletas diferentes — cinza #363636 ao lado de #202530, azul #1A7EA2 ao
   lado de #1383a6. Ver docs/pbi/23496/decisoes.md, D-local-3, que traz o mapa export → oficial →
   casa, campo a campo.

   ⚠️ Nenhum valor veio do export. O bloco :root do .dc.html é uma CÓPIA VELHA do design system:
   dos 30 tokens que ele redeclara, 26 têm valor diferente do oficial (D-local-2). Copiar hex de lá
   entraria como literal errado vestido com o nome de um token — é a D-103 generalizada.

   📌 Estes blocos ficam aqui, e não em _components.scss, porque hoje têm UM consumidor. O gatilho
   do DT-038 continua valendo: quando a segunda tela precisar, sobe — não copia.
   ───────────────────────────────────────────────────────────────────────────── */
/* Trilha de navegação do topo do cartão. */
.trilha {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
  font-weight: 600;
}

.trilha__link {
  color: var(--cor-texto-suave);
  font-weight: 600;
}

.trilha__atual {
  color: var(--cor-texto-sutil);
}

/* Cabeçalho com o selo de situação à direita. O seletor só alcança o header que carrega a classe,
   então .cartao-formulario__cabecalho continua intacto nas outras telas. */
.cabecalho-evento {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cabecalho-evento__texto {
  min-width: 0;
  flex: 1 1 320px;
}

/* Indicador de progresso — TRÊS passos. O ✓ significa "preenchido", nunca "pronto para publicar":
   fora de nome e das duas datas, todo campo desta tela é opcional (P-BIA-1). */
.passos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passos__item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
  font-weight: 600;
}

/* O traço entre os passos. ::after no item, e não um elemento no HTML: é decoração pura, e não
   deve existir na árvore de acessibilidade. */
.passos__item:not(:last-child)::after {
  width: 28px;
  height: 1.5px;
  margin: 0 6px;
  background: var(--cor-borda);
  content: "";
}

.passos__marca {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: 999px;
  color: var(--cor-texto-sutil);
  background: var(--cor-superficie);
  font-size: 0.76rem;
  font-weight: 700;
  place-items: center;
}

.passos__marca svg {
  width: 14px;
  height: 14px;
}

.passos__item--preenchido .passos__marca {
  border-color: var(--cor-primaria);
  color: #ffffff;
  background: var(--cor-primaria);
}

.passos__item--preenchido .passos__rotulo {
  color: var(--cor-texto);
}

.passos__nota {
  margin-top: -14px;
}

/* Cabeçalho numerado das três seções. A numeração é a MESMA de .passos, por construção:
   as duas leem PaginaFormularioEventoModel.PassosDoFormulario. */
.secao-numerada {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cor-borda);
}

.secao-numerada__numero {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--raio-pequeno);
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  font-family: var(--fonte-destaque);
  font-size: 0.82rem;
  font-weight: 700;
  place-items: center;
}

.secao-numerada__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.secao-numerada__subtitulo {
  margin: 2px 0 0;
  color: var(--cor-texto-sutil);
  font-size: 0.76rem;
}

/* Envoltório para campo com adorno (marca de válido, ícone à esquerda, sufixo à direita).
   O adorno é posicionado sobre o controle, e o controle ganha o respiro no padding. */
.campo__envoltorio {
  position: relative;
  display: block;
}

.campo__marca,
.campo__icone,
.campo__sufixo {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  pointer-events: none;
  transform: translateY(-50%);
}

.campo__marca {
  right: 12px;
  color: var(--cor-sucesso);
}

.campo__marca svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.6;
}

.campo__icone {
  left: 12px;
  color: var(--cor-texto-sutil);
}

.campo__icone svg {
  width: 16px;
  height: 16px;
}

.campo__sufixo {
  right: 12px;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
  font-weight: 600;
}

.campo__controle--com-marca {
  padding-right: 38px;
}

.campo__controle--com-icone {
  padding-left: 36px;
}

.campo__controle--com-sufixo {
  padding-right: 78px;
}

/* Contador de caracteres da descrição. É conveniência de digitação — quem recusa continua sendo
   o EventoService, e por isso não há maxlength no controle. */
.campo__contador {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
  text-align: right;
}

.campo__contador--excedido {
  color: var(--cor-erro);
  font-weight: 700;
}

/* Área de envio da imagem: arrastar-e-soltar, prévia e a caixa de remover.
   🔴 O <input type="file"> não é substituído, é revestido — sem JavaScript o rótulo ainda abre o
   seletor e a caixa de remover ainda viaja no POST. */
.area-imagem {
  display: grid;
  gap: 14px;
}

.area-imagem__alvo {
  position: relative;
  border: 1.5px dashed var(--cor-borda-forte);
  border-radius: var(--raio-medio);
  background: var(--cor-fundo);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.area-imagem__alvo--ativo {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.area-imagem--invalida .area-imagem__alvo {
  border-color: var(--cor-erro);
  background: var(--cor-erro-suave);
}

.area-imagem__rotulo {
  display: grid;
  gap: 8px;
  padding: 28px 20px;
  cursor: pointer;
  justify-items: center;
  text-align: center;
}

.area-imagem__icone {
  display: grid;
  width: 48px;
  height: 48px;
  border-radius: var(--raio-medio);
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  place-items: center;
}

.area-imagem__icone svg {
  width: 22px;
  height: 22px;
}

.area-imagem__acao {
  color: var(--cor-texto);
  font-size: 0.88rem;
  font-weight: 600;
}

.area-imagem__acao strong {
  color: var(--cor-primaria);
}

.area-imagem__limite {
  color: var(--cor-texto-sutil);
  font-size: 0.76rem;
}

/* O input fica sobre a área inteira e invisível: assim o clique em qualquer ponto abre o seletor,
   e o foco de teclado continua chegando nele (nada de display:none). */
.area-imagem__entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.area-imagem__entrada:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 3px;
}

.area-imagem__previa {
  display: grid;
  gap: 6px;
  margin: 0;
  justify-items: start;
}

.area-imagem__previa img {
  max-width: 100%;
  max-height: 220px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  object-fit: cover;
}

.area-imagem__previa figcaption {
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
}

/* 🔴 O rodapé desta tela tem TRÊS botões desde o #23496 (Cancelar, Continuar para lotes, Salvar), e
   `.formulario__acoes` de _components.scss não quebra linha. Medido a 360: a fila virou 433px de
   min-content, e como `.cartao-formulario` é `display: grid`, a trilha do grid foi para 433 e levou
   TODOS os irmãos — cabeçalho, passos e textos de ajuda ficaram CORTADOS.

   ⚠️ E o guard óbvio não pegaria: `document.scrollWidth` continuava 360, porque o container clipa em
   vez de rolar. Quem pegou foi a captura a 360 — que é justamente o que os testes de HTML não fazem.

   Escopado nesta classe, e não em `.formulario__acoes`, porque aquele seletor é compartilhado com a
   tela de lotes e mudar o comportamento dela não é escopo desta entrega. */
.acoes-evento {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .passos__item:not(:last-child)::after {
    width: 16px;
    margin: 0 2px;
  }
  .passos__item {
    font-size: 0.78rem;
  }
}
/* Tela de configuração de taxas (#23260) — escopo global, operada pelo suporte da SporTI.

   🔴 O que NÃO está aqui, e é deliberado: .tabela, .situacao, .lista-vazia, .paginacao e
   .cartao-formulario continuam em _events.scss. A trilha B já os moveu para _components.scss no
   c668f47, que ainda não mergeou — mover também daqui poria as duas branches editando os mesmos
   três arquivos, incluindo o site.css GERADO, e conflito em arquivo gerado não se resolve lendo.
   O bundle é único: esta tela herda o estilo de onde ele estiver. O movimento é do 22944. */
.formulario-taxa {
  display: grid;
  gap: 26px;
}

.formulario-taxa__secao {
  display: grid;
  gap: 16px;
}

.formulario-taxa__titulo-secao {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formulario-taxa__nota {
  margin: -6px 0 0;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

/* Legenda visível do asterisco — item 3.2 do #23260, MESMO texto e MESMA regra visual da
   fatia 2 (.checkout__legenda-obrigatorio em _checkout.scss) — uma convenção, dois formulários,
   sem redeclarar `.campo__obrigatorio` (já em _components.scss). */
.formulario-taxa__legenda-obrigatorio {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

.formulario-taxa__linha {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* As três faixas fixas de cartão (#23594) — um fieldset por faixa, mesma borda/raio de
   .opcao-taxa e .resumo-taxa, para a tela nova não introduzir um vocabulário visual próprio. */
.formulario-taxa__faixa {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

.formulario-taxa__faixa legend {
  padding: 0 4px;
  font-size: 0.88rem;
  font-weight: 650;
}

.formulario-taxa__acoes {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 4px;
}

/* "Quem paga a taxa" e "Imediato": a resposta é escrita por extenso, e não como rótulo de um
   booleano. "Cliente absorve a taxa" seria o nome do domínio — onde "cliente" é a ORGANIZAÇÃO e
   não o comprador (D-058) —, e é justamente a leitura invertida que se quer evitar numa tela que
   move dinheiro. Daí o texto em dois níveis: a escolha em negrito, a consequência embaixo. */
.opcoes-taxa {
  display: grid;
  gap: 10px;
}

.opcao-taxa {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.opcao-taxa:hover {
  border-color: var(--cor-borda-forte);
}

.opcao-taxa:has(input:checked) {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.opcao-taxa:has(input:focus-visible) {
  box-shadow: var(--sombra-foco);
}

.opcao-taxa input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--cor-primaria);
}

.opcao-taxa--simples {
  background: transparent;
}

.opcao-taxa__texto {
  display: grid;
  gap: 3px;
}

.opcao-taxa__texto strong {
  font-size: 0.88rem;
  font-weight: 650;
}

.opcao-taxa__texto small {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* Organização e tipo de pagamento na edição: exibidos, não editáveis — os dois compõem a chave
   única com o início da vigência. */
.resumo-taxa {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: #f7f9fb;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resumo-taxa__item dt {
  color: var(--cor-texto-sutil);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.resumo-taxa__item dd {
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 650;
}

.filtro-lista {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.campo--embutido {
  min-width: 260px;
}

@media (max-width: 760px) {
  .formulario-taxa__linha,
  .resumo-taxa {
    grid-template-columns: minmax(0, 1fr);
  }
  .filtro-lista {
    align-items: stretch;
    flex-direction: column;
  }
  .campo--embutido {
    min-width: 0;
  }
}
/* Configurações da organização — S24, #23299.

   🔴 O que NÃO está aqui: .cartao-formulario, .campo, .imagem-atual, .lista-vazia e .alerta
   continuam onde estavam (_components.scss e _events.scss). Esta tela herda o bundle. O único
   acréscimo a componente compartilhado é .alerta--aviso, que faltava — ver abaixo. */
.formulario-organizacao {
  display: grid;
  gap: 26px;
}

.formulario-organizacao__secao {
  display: grid;
  gap: 16px;
}

.formulario-organizacao__titulo-secao {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formulario-organizacao__nota {
  margin: -6px 0 0;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

/* #23602 fatia 4c (item c) — coluna única, decisão do dono: cor primária/cor secundária (único
   uso desta classe, em _CamposConfiguracaoOrganizacao.cshtml) vêm uma por linha, não lado a lado.
   Era grade de 2 colunas com media query colapsando embaixo de 720px; sem os dois estados pra
   sincronizar agora. */
.formulario-organizacao__linha {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.formulario-organizacao__acoes {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 4px;
}

/* CNPJ, endereço e identificador: leitura, e a aparência tem que dizer isso sem depender de o
   promotor clicar para descobrir. Um <input disabled> pareceria campo quebrado; uma <dl> não. */
.dados-fixos {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-fundo);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dados-fixos__item {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dados-fixos dt {
  color: var(--cor-texto-sutil);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dados-fixos dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--cor-texto);
  font-size: 0.88rem;
}

@media (max-width: 720px) {
  .dados-fixos {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* #23606 fatia 1 — o histórico virou <details>/<summary> NATIVO, fechado por padrão (D-446).
   🔴 `display: grid` saiu daqui de propósito: num <details> o conteúdo fechado é escondido pelo
   navegador, e trocar o display do próprio elemento é o caminho conhecido para quebrar isso em
   navegador antigo. O espaçamento mudou para o wrapper interno, que só existe quando aberto. */
/* #23606 fatia 3 — o bloco de ajuda de sintaxe do campo "Sobre". Texto de apoio, sem interacao:
   nenhuma classe nova de componente, nenhum JavaScript. Zero hex literal, so tokens. */
.ajuda-markdown {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo);
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.ajuda-markdown__titulo {
  margin: 0 0 6px;
  color: var(--cor-texto);
  font-weight: 700;
}

.ajuda-markdown__lista {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 18px;
}

.ajuda-markdown__aviso {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--cor-borda);
}

.ajuda-markdown code {
  padding: 1px 4px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  font-size: 0.95em;
  overflow-wrap: anywhere;
}

.historico-alteracoes {
  margin-top: 28px;
}

/* `list-style: none` + `::-webkit-details-marker` derrubam o triângulo nativo nas duas famílias de
   navegador — o ícone é o chevron do lucide, que gira por CSS quando [open]. */
.historico-alteracoes__resumo {
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  list-style: none;
}

.historico-alteracoes__resumo::-webkit-details-marker {
  display: none;
}

/* O <summary> é focável por natureza e abre com Enter/Espaço sem uma linha de JavaScript. O anel
   de foco é o mesmo --sombra-foco do resto da aplicação: sem isto, quem navega por teclado
   perderia o indicador ao trocar o outline padrão. */
.historico-alteracoes__resumo:focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco);
}

.historico-alteracoes__titulo {
  display: flex;
  gap: 8px;
  align-items: center;
}

.historico-alteracoes__contagem {
  color: var(--cor-texto-sutil);
  font-weight: 400;
  letter-spacing: 0;
}

.historico-alteracoes__seta {
  display: inline-flex;
  margin-left: auto;
  transition: transform 0.15s ease;
}

.historico-alteracoes__seta svg {
  width: 16px;
  height: 16px;
}

.historico-alteracoes[open] .historico-alteracoes__seta {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .historico-alteracoes__seta {
    transition: none;
  }
}
.historico-alteracoes__conteudo {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.historico-alteracoes__lista {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.historico-alteracoes__item {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
}

.historico-alteracoes__cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.86rem;
}

.historico-alteracoes__cabecalho time {
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.historico-alteracoes__campos {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.historico-alteracoes__campos li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-size: 0.82rem;
}

.historico-alteracoes__campo {
  color: var(--cor-texto-sutil);
  font-weight: 600;
}

.historico-alteracoes__campo::after {
  content: "·";
  margin-left: 6px;
}

.historico-alteracoes__valor {
  overflow-wrap: anywhere;
  color: var(--cor-texto);
}

.historico-alteracoes__valor--antigo {
  color: var(--cor-texto-sutil);
  text-decoration: line-through;
}

/* 🔴 `.alerta--aviso` faltava, e a falta era invisível: o AlertaUiTagHelper já aceita
   `tipo="aviso"` e já escolhe o ícone `triangle-alert` para ele desde que existe, mas nenhuma
   regra de estilo casava a classe — um alerta de aviso renderizava com a borda transparente do
   `.alerta` base e passava por texto solto. Nenhum consumidor usava `aviso` até esta tela, então
   nada reprovava. É acréscimo a componente compartilhado, e está declarado aqui de propósito para
   não se perder num diff de tela. */
.alerta--aviso {
  border-color: #f0dcb4;
  color: var(--cor-aviso);
  background: var(--cor-aviso-suave);
}

/* Equipe da organização — #23341.

   Mesma regra da tela de configurações acima: .cartao-formulario, .campo, .tabela, .paginacao e
   .lista-vazia continuam nos parciais compartilhados — esta tela herda o bundle. Nenhum hex
   literal: só tokens (#23291). */
.equipe__secao {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.equipe__formulario {
  display: grid;
  gap: 16px;
}

.equipe__linha-formulario {
  display: grid;
  gap: 16px;
  align-items: end;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto;
}

.equipe__acao-formulario {
  padding-bottom: 2px;
}

@media (max-width: 720px) {
  .equipe__linha-formulario {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
}
.equipe__perfis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.equipe__perfil {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-fundo);
  font-size: 0.8rem;
}

.equipe__perfil-nome {
  color: var(--cor-texto);
}

/* O vínculo do próprio gestor com o perfil que dá acesso a esta tela: sem botão, com rótulo.
   Um botão desabilitado pareceria defeito; o rótulo diz o porquê no title. */
.equipe__perfil-fixo {
  color: var(--cor-texto-sutil);
  font-size: 0.72rem;
  font-style: italic;
}

.equipe__perfil-remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cor-texto-sutil);
  cursor: pointer;
}

.equipe__perfil-remover:hover,
.equipe__perfil-remover:focus-visible {
  background: var(--cor-erro-suave);
  color: var(--cor-erro);
}

.equipe__perfil-remover svg {
  width: 12px;
  height: 12px;
}

/* #23299, segunda fatia — a porta do Gestor SporTI (/configuracoes/conta): o seletor de conta por
   busca, a faixa de estado "Editando" e o painel de confirmação de troca de endereço.

   Fica em _organization.scss porque é tela de organização. As classes genéricas que a tela usa
   (.campo*, .formulario*, .botao*) moram em _components.scss e não são tocadas aqui — a lição do
   DT-038 é "suba, não copie", e o inverso também vale: não desça o genérico para o partial da
   tela. */
.seletor-conta__linha {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.seletor-conta__linha .campo {
  flex: 1;
  min-width: 0;
}

.seletor-conta__resultados {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.seletor-conta__item a {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  color: var(--cor-texto);
  background: var(--cor-superficie);
}

.seletor-conta__item a:hover,
.seletor-conta__item a:focus-visible {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.seletor-conta__item--ativo a {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.seletor-conta__endereco {
  color: var(--cor-texto-suave);
  font-size: 0.84rem;
  /* O endereço pode ser longo e a lista é estreita no telefone: quebra em vez de empurrar a
     largura do cartão. É a régua do transbordo horizontal — container que clipa não rola, e o
     scrollWidth do documento não denuncia. */
  overflow-wrap: anywhere;
}

.seletor-conta__inativa {
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--cor-aviso);
  background: var(--cor-aviso-suave);
  font-size: 0.76rem;
  font-weight: 700;
}

/* #23602, fatia 4c — Excluída é o OUTRO mecanismo (Excluido/DataExclusao), visualmente mais grave
   que Inativa (Ativa=false): cor de erro, não de aviso. */
.seletor-conta__excluida {
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--cor-erro);
  background: var(--cor-erro-suave);
  font-size: 0.76rem;
  font-weight: 700;
}

/* Confirmação em duas etapas da exclusão de conta — mesmo padrão de .confirmacao-identidade
   (NovaConta/ConfiguracoesConta), em miniatura, para caber numa linha de tabela. */
.confirmacao-exclusao-linha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--cor-erro);
  border-radius: var(--raio-medio);
  background: var(--cor-erro-suave);
  min-width: 220px;
}

.confirmacao-exclusao-linha__aviso {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.confirmacao-exclusao-linha__aceite {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.82rem;
}

/* A faixa de estado do formulário: em que conta o suporte está mexendo, e o chip de alterações
   não salvas com o botão de descartar. */
.formulario-organizacao__estado {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.formulario-organizacao__conta {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.chip-alteracoes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--cor-aviso);
  background: var(--cor-aviso-suave);
  font-size: 0.8rem;
  font-weight: 700;
}

.chip-alteracoes svg {
  width: 13px;
  height: 13px;
}

/* O painel de confirmação da troca de endereço ou identificador. Ele é o `confirmOpen` do
   protótipo resolvido no SERVIDOR: o "de → para" sai do que está gravado contra o que foi
   digitado, e só o servidor sabe o gravado. */
.confirmacao-identidade {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--cor-aviso);
  border-radius: var(--raio-medio);
  background: var(--cor-aviso-suave);
}

.confirmacao-identidade__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.confirmacao-identidade__aviso,
.confirmacao-identidade__consequencia {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.confirmacao-identidade__lista {
  display: grid;
  gap: 10px;
  margin: 0;
}

.confirmacao-identidade__item dt {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.confirmacao-identidade__item dd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 0;
  /* Endereço é longo por natureza e o painel é estreito no telefone. Sem isto, os dois valores
     lado a lado estouram a borda do cartão em 360px de largura. */
  overflow-wrap: anywhere;
}

.confirmacao-identidade__de {
  color: var(--cor-texto-suave);
  text-decoration: line-through;
}

.confirmacao-identidade__para {
  color: var(--cor-texto);
  font-weight: 700;
}

.confirmacao-identidade__aceite {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* Layout do S24 nas telas de Configurações da organização — #23602, fatia 4a-i.

   Arquivo NOVO e próprio desta fatia, de propósito: `_organization.scss` já é usado por
   Equipe.cshtml, Contas.cshtml e NovaConta.cshtml — trilhas paralelas nesta mesma janela
   (#23602). Editar as classes de lá para o layout daqui arriscaria conflito de merge e
   regressão visual em telas que este PBI não toca. As classes abaixo são TODAS NOVAS
   (prefixo `s24-`); nenhuma redefine `.campo`, `.botao`, `.alerta`, `.cartao-formulario` ou
   qualquer seletor de `_components.scss`/`_organization.scss` — só envolve o que já existe em
   chrome de cartão novo.

   Zero hex literal — só tokens (#23291). Onde o token em português (`_tokens.scss`) não tem
   degrau escuro, o resumo lateral reaponta para a rampa oficial do design system
   (`design-system/_colors.scss`), mesmo precedente já registrado em `_portaria.scss` (escopo
   escuro local, "Nenhum hex literal: os 146 do #23292 já viraram task e não convém aumentar a
   conta"). */
.s24-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.s24-topo__titulo {
  margin: 0;
}

.s24-topo__trilha {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.76rem;
  font-weight: 700;
}

.s24-topo__subtitulo {
  margin: 4px 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
}

.s24-topo__acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* O grid de duas colunas — esquerda os cartões de formulário, direita o resumo fixo (sticky). */
.s24-grade {
  display: grid;
  gap: 20px;
  align-items: start;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.s24-grade__principal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.s24-grade__lateral {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  position: sticky;
  top: 16px;
}

@media (max-width: 960px) {
  .s24-grade {
    grid-template-columns: minmax(0, 1fr);
  }
  .s24-grade__lateral {
    position: static;
  }
}
/* Cartão branco padrão do S24 — cabeçalho com ícone + título, corpo com padding. */
.s24-cartao {
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
  box-shadow: var(--shadow-sm);
}

.s24-cartao__cabecalho {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cor-borda);
}

.s24-cartao__icone {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}

.s24-cartao__icone svg {
  width: 19px;
  height: 19px;
}

.s24-cartao__titulos {
  flex: 1;
  min-width: 0;
}

.s24-cartao__titulos h2,
.s24-cartao__titulos h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.s24-cartao__titulos p {
  margin: 1px 0 0;
  color: var(--cor-texto-sutil);
  font-size: 12px;
}

.s24-cartao__corpo {
  padding: 20px;
}

/* Dados da organização — logo à esquerda, campos numa grade de 2 colunas à direita. */
.s24-dados {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.s24-dados__logo {
  flex: 0 0 auto;
  text-align: center;
}

.s24-dados__logo-atual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--cor-primaria);
  color: var(--cor-superficie);
  font-size: 26px;
  font-weight: 700;
}

.s24-dados__logo-atual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Banner — #23602 fatia 4d (item b/c), decisão do dono: linha PRÓPRIA de largura inteira dentro
   do cartão "Dados da organização", logo depois da logo — não na coluna estreita do avatar
   (.s24-dados__logo, pensada pra um quadrado 1:1). O banner é 4:1; dividir a coluna estreita com
   o avatar esmagaria os dois. */
.s24-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  margin-top: 18px;
}

.s24-banner__preview {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4/1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cor-primaria);
  color: var(--cor-superficie);
}

.s24-banner__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s24-banner__campo {
  flex: 1;
  min-width: 240px;
}

/* #23602 fatia 4c (item c) — coluna única, decisão do dono: os campos desta tela vêm em
   sequência vertical, um por linha. Era grade de 2 colunas (media query colapsava embaixo de
   560px); agora é 1 coluna sempre, sem media query — não há mais os dois estados pra manter
   sincronizados. */
.s24-dados__campos {
  display: grid;
  flex: 1;
  min-width: 240px;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

/* Chave PIX — #23602 fatia 4c (item c): era lado a lado (chave + nome do recebedor), agora
   coluna única, mesma régua de .s24-dados__campos acima. */
.s24-pix__grade {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

/* Conta bancária manual — #23602 fatia 4b, coluna única desde a fatia 4c (item c). Era grade de
   3 colunas (oito campos curtos lado a lado); mesma régua das duas grades acima. */
.s24-conta-bancaria__grade {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

/* Resumo lateral — único cartão ESCURO da tela. A rampa em português não tem degrau escuro
   (LEIA-ME de design-system/), então os tokens aqui são os oficiais (`--gray-800`/`--gray-0`/
   `--gray-700`), mesmo precedente de `_portaria.scss`. */
.s24-resumo {
  padding: 20px;
  border-radius: var(--raio-medio);
  background: var(--gray-800);
  color: var(--gray-0);
  box-shadow: var(--shadow-sm);
}

.s24-resumo__rotulo {
  color: var(--gray-300);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.s24-resumo__identidade {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
}

.s24-resumo__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--cor-primaria);
  color: var(--gray-0);
  font-size: 15px;
  font-weight: 700;
}

.s24-resumo__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s24-resumo__nome-bloco {
  min-width: 0;
}

.s24-resumo__nome {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s24-resumo__cnpj {
  color: var(--gray-400);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.s24-resumo__divisor {
  height: 1px;
  margin: 16px 0;
  background: var(--gray-700);
}

.s24-resumo__linhas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s24-resumo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.s24-resumo__linha-rotulo {
  color: var(--gray-300);
  font-size: 13px;
  font-weight: 600;
}

.s24-resumo__linha-valor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.s24-resumo__ponto {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-500);
}

.s24-resumo__ponto--preenchido {
  background: var(--cor-sucesso);
}

/* O cartão do histórico herda toda a mecânica de `.historico-alteracoes` (details/summary
   nativo, fechado por padrão — D-446, `_organization.scss`). Este wrapper só adiciona o chrome
   de cartão do S24 por FORA, sem tocar a classe existente. */
.s24-cartao--historico {
  padding: 0;
}

.s24-cartao--historico .historico-alteracoes__resumo {
  padding: 16px 20px;
}

.s24-cartao--historico .historico-alteracoes__conteudo {
  padding: 0 20px 16px;
}

/* Campo BLOQUEADO — CNPJ/razão social/cidade/UF para o promotor, #23602 fatia 4a-ii (D-437).
   Reaproveita a MOLDURA de `.campo`/`.campo__cabecalho`/`.campo__rotulo` já existentes em
   `_components.scss` (não redeclarados aqui) — só o `.campo__controle--bloqueado` é novo, no
   mesmo espírito do `.campo__controle--arquivo`/`--area` que já vivem lá. */
.campo__controle--bloqueado {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
  overflow: hidden;
}

.campo__controle--bloqueado svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--cor-texto-sutil);
}

.campo__controle--bloqueado span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Chave PIX verificada" e "Base de sócios" — adendo de 23/09: entram fiéis ao LAYOUT do S24,
   desabilitadas, rótulo "em breve", sem ler nem gravar dado nenhum. A funcionalidade real é PBI
   próprio (fora desta fatia). Nenhuma classe abaixo compartilha nome com um componente
   funcional existente — o prefixo `--desabilitado`/`--em-breve` é o que torna essa distinção
   visível também no CSS, não só no texto. */
.s24-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-texto-sutil);
  background: var(--cor-fundo);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.s24-selo svg {
  width: 14px;
  height: 14px;
}

.s24-cartao__cabecalho .s24-selo {
  margin-left: auto;
}

/* O alternador (toggle) do S24, em estado SEMPRE desabilitado nesta fatia — sem `--ligado`: a
   funcionalidade de Base de sócios não existe ainda, então não há estado "ligado" verdadeiro
   para representar. `disabled` no <button> é a proteção real; a cor apagada é só o reflexo
   visual dela. */
.s24-alternador {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--cor-borda);
  cursor: not-allowed;
}

.s24-alternador__cursor {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cor-superficie);
  box-shadow: var(--shadow-xs);
}

.s24-em-breve {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 20px;
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-size: 13px;
  line-height: 1.55;
}

.s24-em-breve svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--cor-texto-sutil);
}

/* Editor da página de venda (#22950) — tema por evento, com herança da marca da organização.

   🔴 O tema entra por --tema-cor-primaria e --tema-cor-secundaria, e NUNCA por propriedade CSS
   interpolada. Os dois nomes são distintos de --cor-primaria de propósito: aquele é o token da
   aplicação, definido em :root por _tokens.scss, e sobrescrevê-lo dentro do container repintaria
   os controles do próprio editor que caíssem ali dentro.

   🔑 O fallback vive aqui, no var(), e não no C#: `var(--tema-cor-primaria, var(--cor-primaria))`.
   É o que permite ao servidor OMITIR a custom property quando não há cor — em vez de precisar
   repetir o hexadecimal do tema base em Razor, onde ele envelheceria separado de _tokens.scss. */
.editor-pagina-venda__colunas {
  display: grid;
  align-items: start;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
  .editor-pagina-venda__colunas {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .editor-pagina-venda__previa {
    position: sticky;
    top: 16px;
  }
  /* #23537 fatia 2 — a prévia Desktop media o mesmo tanto que a Mobile porque o CARTÃO INTEIRO
     (`.cartao-formulario`, _components.scss) nunca passa de 820px, em QUALQUER largura de tela —
     a coluna da prévia (2fr) sempre saía com ~295px, abaixo até da referência de 375px do modo
     Mobile. `.cartao-formulario` é compartilhada (login, configurações, taxas, sócios...): a regra
     não pode mudar a base, e é por isso que mira a classe DUPLA que PaginaVenda.cshtml já carrega
     (`class="cartao-formulario editor-pagina-venda"`). Decisão do Cristian: opção (a) do
     desenho-fatia2.md — "mais largo", não "fiel a um desktop real" (isso custaria (b) com o texto a
     ~25% do tamanho, ou (c), que perde a prévia ao vivo ao lado do formulário). */
  .cartao-formulario.editor-pagina-venda {
    max-width: 1200px;
  }
}
.editor-pagina-venda__previa {
  display: grid;
  gap: 10px;
}

.editor-pagina-venda__previa-titulo {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Alternância Desktop/Mobile da prévia (#23534, fatia 1) — cosmética do PAINEL, nunca do tema: só
   estreita a moldura por fora. A partial _Previa.cshtml não muda uma linha. */
.editor-pagina-venda__previa-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.editor-pagina-venda__previa-dispositivo {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-fundo);
}

.editor-pagina-venda__previa-botao-dispositivo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: none;
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.editor-pagina-venda__previa-botao-dispositivo i {
  width: 14px;
  height: 14px;
}

.editor-pagina-venda__previa-botao-dispositivo--ativo {
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* 🔴 min-width:0 no container flex E no filho — sem isto um flex item com largura explícita
   (o .previa-venda do modo mobile, 375px) NÃO ENCOLHE abaixo do próprio conteúdo por causa do
   min-width:auto padrão do flexbox, e a moldura TRANSBORDA da coluna da grade em vez de se conter
   nela (medido: aside com 295px de disponível, moldura mobile medindo 401px — 34% além do
   container, família 7 do CLAUDE.md §8). width:100% no estado normal, e não deixar o item
   encolher para o "shrink-to-fit" do próprio conteúdo — sem isto o desktop (sem modificador) media
   MENOR que o mobile, o oposto do que a moldura deveria mostrar. */
.editor-pagina-venda__previa-moldura {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.editor-pagina-venda__previa-moldura .previa-venda {
  width: 100%;
  min-width: 0;
}

.editor-pagina-venda__previa-moldura--mobile {
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-fundo);
}

/* 375px é a mesma referência do design (viewport de celular comum), mas só até onde o container
   DISPONÍVEL permitir — min() escolhe o menor dos dois, nunca ultrapassando a coluna real da
   grade (que pode ser mais estreita que 375px, como medido nesta mesma tela). */
.editor-pagina-venda__previa-moldura--mobile .previa-venda {
  width: min(375px, 100%);
}

.formulario-pagina-venda {
  display: grid;
  gap: 26px;
}

.formulario-pagina-venda__secao {
  display: grid;
  gap: 16px;
}

.formulario-pagina-venda__titulo-secao {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formulario-pagina-venda__nota {
  margin: -6px 0 0;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

/* Toggles de "Seções da página" (#23534, fatia 3) — .selecao já traz o checkbox estilizado; aqui
   só o espaçamento entre um toggle e o próximo. */
.formulario-pagina-venda__secao-toggle {
  margin-bottom: 4px;
}

/* #23537 — Cor primária e Cor secundária EMPILHADAS, nunca lado a lado (pedido literal do Cristian).
   🔴 Duas colunas aqui já causou o defeito relatado: a primária tem uma linha a mais que a
   secundária (a paleta de sugestões, campo-cor__paleta, só existe nela) — um grid pai esticando os
   dois `.campo` para a MESMA altura faz `align-content` (default stretch) distribuir a sobra entre
   MENOS linhas do lado mais curto, empurrando o rótulo da secundária para baixo. Empilhado, cada
   `.campo` tem sua altura natural — a causa (alturas emparelhadas por força) deixa de existir. */
.formulario-pagina-venda__linha {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.formulario-pagina-venda__acoes {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Bloco de publicação (#22953). Fica ACIMA das colunas do editor, e não dentro do formulário: o
   estado "no ar" e o link divulgado são a informação mais importante da tela depois de publicado, e
   um bloco na coluna do formulário sairia da dobra num evento com muitos campos.

   🔑 A cor do estado "no ar" vem de --cor-sucesso, o token da aplicação, e não de
   --tema-cor-primaria: isto é cromo do painel, não a página do comprador. Usar o tema aqui pintaria
   o estado da nossa UI com a marca do promotor. */
.publicacao-pagina-venda {
  display: grid;
  margin-bottom: 24px;
  padding: 18px;
  gap: 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-fundo);
  justify-items: start;
}

.publicacao-pagina-venda__titulo {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.publicacao-pagina-venda__estado {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.publicacao-pagina-venda__estado--no-ar {
  color: var(--cor-sucesso);
}

.publicacao-pagina-venda__estado i {
  width: 16px;
  height: 16px;
}

/* O link é o ativo de marketing do promotor: ele vai ser copiado, colado em WhatsApp e impresso em
   flyer. Por isso monospace e quebra por qualquer caractere — endereço truncado com reticências é
   inútil para copiar, e um endereço longo não pode estourar a largura do cartão. */
.publicacao-pagina-venda__link {
  max-width: 100%;
  color: var(--cor-primaria);
  /* A mesma pilha de .campo-cor__entrada — não há token de monospace em _tokens.scss, e inventar
     um aqui criaria o segundo lugar para a mesma decisão. */
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.publicacao-pagina-venda__ajuda {
  margin: 0;
  max-width: 62ch;
  color: var(--cor-texto-sutil);
  font-size: 0.8rem;
}

/* Rótulo de "este valor vem da marca da organização". Sem ele o tema tem herança invisível, e
   herança invisível é chamado de suporte: o promotor troca a cor da organização, não vê efeito no
   evento que sobrescreveu, e não tem como descobrir por quê. */
.etiqueta-heranca {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* #23279 — .campo-cor (amostra + paleta + seletor nativo) PROMOVIDO para _components.scss: deixou
   de ser exclusivo desta tela quando Organizacao/Configuracoes.cshtml passou a usá-lo também. Ver
   docs/pbi/23279/decisoes.md. */
/* Link publicado — linha com o botão de copiar (#23534, fatia 1). Mesma mecânica de
   Venda/Pedido.cshtml (linha digitável do boleto): x-data local, x-ref no elemento que carrega o
   valor, nada de string do servidor dentro da expressão Alpine. */
.publicacao-pagina-venda__link-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.publicacao-pagina-venda__copiar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.publicacao-pagina-venda__copiar i {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------- a prévia

   🔴 NADA DE MARCA SporTI daqui para baixo. É critério de aceite do #22950 — "não usa a marca
   SporTI em destaque" —, e o que aparece na prévia é a marca do promotor.

   🔴 Item 23700 (rodada 45) — estrutura reformada para aproximar do protótipo S1: cabeçalho
   sticky de marca separado do banner, título sobreposto ao banner com gradiente, corpo em grade
   de duas colunas no desktop (conteúdo + card "Ingressos"), cada seção como cartão próprio.
   TOKENS NÃO MUDARAM — decisão do Cristian, 29/09/2026: continuam sendo os de _tokens.scss
   (--cor-*, --raio-*); a adoção dos tokens oficiais do design system é o #23292, não esta
   entrega. */
.previa-venda {
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

/* 🔑 Imagem sem atributo src não é imagem vazia: é imagem ausente, e o Razor omite o atributo
   quando o valor é nulo. Esconder por CSS resolve os dois momentos em que o x-show do Alpine ainda
   não decidiu — antes de ele iniciar, e numa página sem JavaScript. E é o que torna seguro NÃO
   emitir src="", que o navegador resolveria como a própria URL da página, disparando um GET
   duplicado da rota que no log parece tráfego normal. */
.previa-venda img:not([src]) {
  display: none;
}

/* Cabeçalho branco de marca — separado do banner desde o item 23700 (no protótipo são duas
   faixas distintas, uma sobre a outra). Sticky só na vitrine pública: na moldura do editor quem
   rola é o PAINEL, não a prévia. */
.previa-venda__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
}

.pagina-venda-publica .previa-venda__topo {
  position: sticky;
  top: 0;
  z-index: 5;
}

.previa-venda__topo-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--raio-pequeno);
  object-fit: cover;
}

.previa-venda__topo-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--cor-texto);
  font-weight: 700;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.previa-venda__topo-selo {
  flex-shrink: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
  white-space: nowrap;
}

.previa-venda__banner {
  position: relative;
  aspect-ratio: 3/1;
  background: var(--tema-cor-secundaria, var(--cor-primaria-suave));
}

.previa-venda__banner-imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradiente escuro para o título sobreposto ficar legível sobre a imagem — item 23700. */
.previa-venda__banner-sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 17, 28, 0.82) 0%, rgba(9, 17, 28, 0.28) 48%, rgba(9, 17, 28, 0) 78%);
  pointer-events: none;
}

.previa-venda__banner-conteudo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 20px;
  display: grid;
  gap: 8px;
}

.previa-venda__chamada {
  margin: 0;
  color: #ffffff;
  font-family: var(--fonte-destaque);
  font-size: 1.3rem;
  line-height: 1.2;
}

/* Selo de categoria/modalidade (item 23700, rodada 2) — pílula sobre o banner, cor do TEMA (é
   dado do promotor, igual ao botão de comprar), nunca da plataforma. */
.previa-venda__selo-categoria {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tema-cor-primaria, var(--cor-primaria));
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 680px) {
  .previa-venda__banner-conteudo {
    padding: 24px 28px;
  }
  .previa-venda__chamada {
    font-size: 1.9rem;
  }
}
/* 🔴 Item 23700, rodada 2, critério "largura" — a vitrine pública alarga até ~1180px no desktop,
   igual ao protótipo, SEM alargar o Checkout (compartilha `.conteudo-venda`/`_LayoutVenda.cshtml`,
   Task 23701, fora desta entrega) e SEM afetar a moldura da prévia no editor (que nunca ganha a
   classe `.pagina-s1` — só `Pages/Venda/Index.cshtml` a emite).

   🔑 A técnica ("full-bleed"): `left: 50%` desloca pela largura do PAI (`.conteudo-venda`, até
   760px, centralizado por `margin: 0 auto`); `translateX(-50%)` puxa de volta pela largura DO
   PRÓPRIO elemento (100vw, depois grampeada em max-width). A matemática fecha exatamente no centro
   do VIEWPORT mesmo com um pai mais estreito no meio do caminho — não precisa tocar
   `.conteudo-venda`. Testado nos três breakpoints (375/768/1440) no smoke.

   ⚠️ Só ativa a partir do MESMO 680px do grid abaixo: abaixo disso o layout é uma coluna, e a
   página já ocupa a largura inteira do celular por conta do `.pagina-venda-publica .previa-venda
   { border: 0 }` que já existia. */
@media (min-width: 680px) {
  .pagina-s1 .previa-venda {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 1180px;
    transform: translateX(-50%);
  }
}
/* Corpo: grade de duas colunas no desktop. DOM primeiro emite o card de Ingressos (mobile-first,
   é o que o comprador precisa ver antes de rolar) e o CSS troca a ordem visual só a partir do
   breakpoint — mesmo recurso de .editor-pagina-venda__colunas noutra tela. 680px, e não um
   breakpoint "tablet" separado: o protótipo só define mobile (390) e desktop (1180), sem terceiro
   estado — 768px cai neste mesmo lado (desktop). */
.previa-venda__corpo {
  display: grid;
  gap: 20px;
  padding: 20px 16px;
}

.pagina-venda-publica .previa-venda__corpo {
  background: var(--cor-fundo);
}

.previa-venda__coluna-ingressos {
  min-width: 0;
}

.previa-venda__coluna-principal {
  display: grid;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 680px) {
  .previa-venda__corpo {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    padding: 24px 28px;
  }
  .previa-venda__coluna-ingressos {
    order: 2;
    position: sticky;
    top: 72px;
  }
  .previa-venda__coluna-principal {
    order: 1;
  }
}
.previa-venda__cartao-ingressos {
  padding: 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
  box-shadow: 0 1px 3px rgba(15, 23, 32, 0.06);
}

.previa-venda__cartao-ingressos-titulo {
  margin: 0 0 2px;
  color: var(--cor-texto);
  font-family: var(--fonte-destaque);
  font-size: 1rem;
  font-weight: 700;
}

.previa-venda__cartao-ingressos-nota {
  margin: 0 0 6px;
  color: var(--cor-texto-sutil);
  font-size: 0.76rem;
}

.previa-venda__lotes {
  display: grid;
  gap: 0;
}

.previa-venda__lote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 0.86rem;
}

.previa-venda__lote-nome {
  color: var(--cor-texto);
  font-weight: 600;
  font-size: 0.92rem;
}

.previa-venda__lote-preco {
  color: var(--cor-texto);
  font-family: var(--fonte-destaque);
  font-weight: 700;
  font-size: 1rem;
}

.previa-venda__botao {
  display: block;
  padding: 11px 16px;
  border-radius: var(--raio-pequeno);
  background: var(--tema-cor-primaria, var(--cor-primaria));
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

/* Rodapé vazio some sozinho, sem depender do Alpine — mesma razão do img:not([src]). */
.previa-venda__rodape {
  padding: 0 20px 18px;
  color: var(--cor-texto-sutil);
  font-size: 0.76rem;
  white-space: pre-line;
}

.previa-venda__rodape:empty {
  display: none;
}

/* Seções opcionais (#23534, fatia 3) — Sobre / Data e local / Informações. Cada uma é seu próprio
   cartão desde o item 23700 (antes eram parágrafos soltos dentro do card único da prévia). */
.previa-venda__secao {
  padding: 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
  box-shadow: 0 1px 3px rgba(15, 23, 32, 0.06);
}

.previa-venda__secao-titulo {
  margin: 0 0 10px;
  color: var(--cor-texto);
  font-family: var(--fonte-destaque);
  font-size: 1rem;
  font-weight: 700;
}

.previa-venda__secao-texto {
  margin: 0 0 6px;
  color: var(--cor-texto-suave);
  font-size: 0.86rem;
  line-height: 1.5;
  /* Preserva quebra de linha do texto livre sem precisar trocar \n por <br> no servidor — mesmo
     recurso de .previa-venda__rodape. */
  white-space: pre-line;
}

.previa-venda__secao-texto:last-of-type {
  margin-bottom: 0;
}

/* "Como chegar" — item 23700, critério 4: sem mini-mapa, link para o Google Maps por texto. */
.previa-venda__como-chegar {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 0.8rem;
  font-weight: 600;
}

.previa-venda__como-chegar:hover {
  border-color: var(--cor-borda-forte);
  text-decoration: none;
}

.previa-venda__como-chegar i {
  width: 14px;
  height: 14px;
}

/* ------------------------------------------------- a vitrine pública (#22956)

   🔴 A MESMA partial do editor, e por isso as classes são as mesmas: o promotor tem que ver
   exatamente o que o comprador vê. O que muda aqui é só o CONTORNO — a página inteira em vez do
   cartão da prévia.

   🔴 NADA DE MARCA SporTI daqui para baixo, pelo mesmo critério de aceite. */
.pagina-venda-publica {
  margin: 0;
  background: var(--cor-fundo);
}

.conteudo-venda {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* Na vitrine a prévia não é cartão dentro de uma tela: é a página. Sem borda, e o raio some no
   celular, onde o cartão encostaria nas duas margens. */
.pagina-venda-publica .previa-venda {
  border: 0;
}

@media (max-width: 640px) {
  .conteudo-venda {
    padding: 0 0 32px;
  }
  .pagina-venda-publica .previa-venda {
    border-radius: 0;
  }
}
.previa-venda__lote-identificacao {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Rótulo de situação do lote (item 23700) — bolinha + texto, para os CINCO estados, inclusive
   comprável (o protótipo mostra "Disponível" também). A cor vem da classe modificadora que
   ClasseDoPontoDeSituacao escolhe em _Previa.cshtml; o texto vem de LoteDaVitrine.RotuloDeSituacao
   — um lugar só para cada metade da regra (§2 do CLAUDE.md). */
.previa-venda__lote-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
  font-weight: 700;
}

.previa-venda__lote-status-ponto {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

.previa-venda__lote-status--disponivel {
  color: var(--cor-sucesso);
}

.previa-venda__lote-status--ultimas-unidades {
  color: var(--cor-aviso);
}

.previa-venda__lote-status--indisponivel {
  color: var(--cor-texto-sutil);
}

.previa-venda__lote-setor {
  color: var(--cor-texto-sutil);
  font-size: 0.76rem;
}

.previa-venda__lote-descricao {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
}

/* O lote indisponível continua VISÍVEL e legível: o comprador precisa saber que o lote existe e
   que ele não está à venda agora. Esconder faria a página parecer incompleta, e sumir com o preço
   de um lote esgotado é o que gera a pergunta "quanto custava?" no suporte. */
.previa-venda__lote--indisponivel {
  opacity: 0.65;
}

/* Item 23700 (rodada 2), critério "alinhamento": align-self PRÓPRIO, e não só o align-items do
   pai (.previa-venda__lote) — com nome de lote longo (2 linhas), a identificação fica mais alta
   que a ação, e align-self:center garante que a ação (estepper ou selo) centraliza contra a
   altura da LINHA, não contra o topo. */
.previa-venda__lote-quantidade {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 6px;
  flex-shrink: 0;
}

.previa-venda__lote-quantidade-rotulo {
  color: var(--cor-texto-sutil);
  font-size: 0.72rem;
}

/* O estepper +/− (item 23700, rodada 2) — substitui o <input type="number"> cru. O <input>
   continua no DOM (nome, min, max, value inalterados) e é o fallback sem JavaScript; os botões só
   ESCREVEM nele via previaVendaPasso (_Previa.cshtml). Aqui só o visual: sem spinner nativo (as
   setinhas do navegador ficam redundantes com os botões próprios). */
.previa-venda__stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.previa-venda__stepper-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.previa-venda__stepper-botao--mais {
  border: none;
  background: var(--tema-cor-primaria, var(--cor-primaria));
  color: #ffffff;
}

.previa-venda__stepper-botao:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.previa-venda__stepper input[type=number] {
  width: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  font-weight: 700;
  text-align: center;
  /* Firefox: some as setinhas nativas sem depender de pseudo-elemento (não existe no Firefox). */
  -moz-appearance: textfield;
}

.previa-venda__stepper input[type=number]::-webkit-inner-spin-button,
.previa-venda__stepper input[type=number]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.previa-venda__lote-indisponivel {
  flex-shrink: 0;
  align-self: center;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

/* ------------------------------------------------- resumo de preço e taxa (#22968)

   O .previa-venda__subtotal que morava aqui SAIU: ele exibia um número somado em JavaScript, e o
   #22968 passou o cálculo para o servidor. O que ficou no lugar é o resumo de quatro números —
   linhas, ingressos, taxa e total — mais o seletor de meio de pagamento, que é o que torna a taxa
   calculável (ICalculoTaxaService exige o tipo de pagamento).                               */
.previa-venda__meios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo);
}

.previa-venda__meios-titulo {
  padding: 0 4px;
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  font-weight: 700;
}

.previa-venda__meio {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.84rem;
}

.previa-venda__meio-rotulo {
  color: var(--cor-texto);
}

/* PBI 23733 F2 — meio que o lote selecionado não aceita. Desabilitado de verdade (o input leva o atributo
   `disabled`), e a aparência só ACOMPANHA: opacidade e cursor, mais o aviso curto. O estado nunca depende
   só da cor — o texto "Indisponível neste lote" está no DOM e o leitor de tela lê o `disabled`. */
.previa-venda__meio--desabilitado {
  cursor: not-allowed;
  opacity: 0.6;
}

.previa-venda__meio--desabilitado .previa-venda__meio-rotulo {
  color: var(--cor-texto-sutil);
}

.previa-venda__meio input:disabled {
  cursor: not-allowed;
}

.previa-venda__meio-aviso {
  color: var(--cor-texto-sutil);
  font-size: 0.72rem;
}

/* ⚠️ A opacidade durante a requisição é sinal, não enfeite: sem ela o comprador mexe na
   quantidade e o total antigo fica na tela por um instante, parecendo o total novo. */
.previa-venda__resumo-area {
  transition: opacity 120ms ease-in-out;
}

.previa-venda__resumo-area.htmx-request {
  opacity: 0.55;
}

.previa-venda__resumo {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cor-borda);
}

.previa-venda__resumo-vazio {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.82rem;
}

.previa-venda__resumo-indisponivel {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
}

.previa-venda__resumo-itens {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.previa-venda__resumo-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
}

.previa-venda__resumo-item-descricao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: var(--cor-texto-suave);
}

.previa-venda__resumo-item-unitario {
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
}

.previa-venda__resumo-item-valor {
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.previa-venda__resumo-totais {
  display: grid;
  gap: 6px;
  margin: 0;
}

.previa-venda__resumo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.previa-venda__resumo-linha dt {
  color: var(--cor-texto-suave);
  font-size: 0.84rem;
}
.previa-venda__resumo-linha dd {
  margin: 0;
}

.previa-venda__resumo-linha--total {
  padding-top: 8px;
  border-top: 1px solid var(--cor-borda);
}
.previa-venda__resumo-linha--total dt {
  color: var(--cor-texto);
  font-size: 0.9rem;
  font-weight: 700;
}

.previa-venda__resumo-valor {
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.previa-venda__resumo-valor--inclusa {
  display: grid;
  justify-items: end;
  color: var(--cor-texto-sutil);
  font-size: 0.8rem;
  white-space: normal;
}

/* 🔑 O TOTAL usa a cor do TEMA, e não a da plataforma — herdado do antigo subtotal: é o número
   que o comprador olha, e ele tem que pertencer à marca do promotor. */
.previa-venda__resumo-linha--total .previa-venda__resumo-valor {
  color: var(--tema-cor-primaria, var(--cor-texto));
  font-family: var(--fonte-destaque);
  font-size: 1.25rem;
  font-weight: 700;
}

.previa-venda__nota-compra {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

.previa-venda__resumo-nota {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.74rem;
}

.previa-venda__aviso {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.82rem;
}

.cartoes-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cartao-resumo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
}
.cartao-resumo__rotulo {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}
.cartao-resumo__valor {
  font-size: 1.5rem;
  color: var(--cor-texto);
}
.cartao-resumo__apoio {
  font-size: 0.78rem;
  color: var(--cor-texto-sutil);
}

.detalhe-transacao {
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
}
.detalhe-transacao__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cor-borda);
}
.detalhe-transacao__cabecalho h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.detalhe-transacao__valor-principal {
  font-size: 1.4rem;
  color: var(--cor-texto);
}
.detalhe-transacao__secao {
  padding: 16px 0 0;
}
.detalhe-transacao__secao h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.detalhe-transacao__secao p {
  margin: 0 0 4px;
}
.detalhe-transacao__apoio {
  color: var(--cor-texto-sutil);
  font-size: 0.85rem;
}
.detalhe-transacao__acoes {
  margin: 12px 0 0;
}
.detalhe-transacao__itens {
  margin: 0;
  padding: 0;
  list-style: none;
}
.detalhe-transacao__itens li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--cor-borda);
}
.detalhe-transacao__itens li:last-child {
  border-bottom: none;
}
.detalhe-transacao__valores {
  margin: 0;
}
.detalhe-transacao__linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.detalhe-transacao__linha dt {
  color: var(--cor-texto-suave);
}
.detalhe-transacao__linha dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.detalhe-transacao__linha--total {
  border-top: 1px solid var(--cor-borda);
  margin-top: 6px;
  padding-top: 10px;
}
.detalhe-transacao__linha--total dt,
.detalhe-transacao__linha--total dd {
  font-weight: 600;
  color: var(--cor-texto);
}
.detalhe-transacao__linha--alerta dt,
.detalhe-transacao__linha--alerta dd {
  color: var(--cor-aviso);
}

.linha-tempo {
  margin: 0;
  padding: 0;
  list-style: none;
}
.linha-tempo__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 6px 16px;
  border-left: 2px solid var(--cor-primaria-suave);
}
.linha-tempo__item:first-child {
  border-left-color: var(--cor-primaria);
}
.linha-tempo__rotulo {
  color: var(--cor-texto);
}
.linha-tempo__quando {
  color: var(--cor-texto-sutil);
  font-variant-numeric: tabular-nums;
}

.pagina-lista__acoes {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.relatorio-impressao__cabecalho {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}
.relatorio-impressao__cabecalho h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.relatorio-impressao__cabecalho p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.graficos-relatorio {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.grafico-cartao {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-raised, #fff);
  box-shadow: var(--shadow-sm);
}

.grafico-cartao__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.grafico-cartao__titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.grafico-cartao__apoio {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.grafico-cartao__destaque {
  flex-shrink: 0;
  text-align: right;
}

.grafico-cartao__destaque-valor {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.grafico-cartao__destaque-rotulo {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.grafico-barras {
  display: block;
  width: 100%;
  height: 200px;
}

.grafico-barras__grade {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.grafico-barras__barra {
  fill: var(--accent-suave, #c4e0eb);
}

.grafico-barras__barra--destaque {
  fill: var(--accent);
}

.grafico-barras__rotulo {
  fill: var(--text-muted);
  font-size: 10px;
}

.grafico-donut {
  display: flex;
  align-items: center;
  gap: 16px;
}

.grafico-donut__anel {
  position: relative;
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
}

.grafico-donut__centro {
  display: flex;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.grafico-donut__centro strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.grafico-donut__centro span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
}

.grafico-donut__trilho {
  fill: none;
  stroke: var(--surface-sunken);
}

.grafico-donut__fatia {
  fill: none;
  stroke-linecap: butt;
}

.grafico-donut__fatia--pix,
.grafico-donut__marca--pix {
  --cor-meio: var(--teal-500, #0f9b8e);
}

.grafico-donut__fatia--cartaocredito,
.grafico-donut__marca--cartaocredito {
  --cor-meio: var(--accent);
}

.grafico-donut__fatia--boleto,
.grafico-donut__marca--boleto {
  --cor-meio: var(--gray-400, #9aa4b0);
}

.grafico-donut__fatia--pixmanual,
.grafico-donut__marca--pixmanual {
  --cor-meio: var(--warning, #d68a1e);
}

.grafico-donut__fatia {
  stroke: var(--cor-meio, var(--accent));
}

.grafico-donut__legenda {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grafico-donut__item {
  display: flex;
  align-items: center;
  gap: 9px;
}

.grafico-donut__marca {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--cor-meio, var(--accent));
}

.grafico-donut__rotulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grafico-donut__percentual {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .graficos-relatorio {
    grid-template-columns: minmax(0, 1fr);
  }
}
.painel-promotor .graficos-relatorio {
  margin-bottom: 0;
}

.painel-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 16px;
}

.painel-indicador {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--raio-medio);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  container-type: inline-size;
}

.painel-indicador__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.painel-indicador__rotulo {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.painel-indicador__topo svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.painel-indicador__valor {
  font-size: clamp(1.05rem, 4.6cqi, 1.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.painel-indicador__apoio {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
}

.painel-indicador--indisponivel {
  border-style: dashed;
  background: var(--surface-page);
}
.painel-indicador--indisponivel .painel-indicador__valor {
  color: var(--text-muted);
}
.painel-indicador--indisponivel .painel-indicador__topo svg {
  color: var(--text-muted);
}

.painel-blocos {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.painel-blocos--unico {
  grid-template-columns: minmax(0, 1fr);
}

.painel-bloco {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.painel-bloco--lista {
  padding: 0;
  overflow: hidden;
}

.painel-bloco__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.painel-bloco--lista .painel-bloco__cabecalho {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.painel-bloco__titulo {
  margin: 0;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.painel-bloco__apoio {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.painel-bloco__link {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.painel-bloco__vazio {
  margin: 0;
  padding: 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.painel-bloco:not(.painel-bloco--lista) .painel-bloco__vazio {
  padding: 0;
}

.painel-lotes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-lote__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 0.82rem;
}

.painel-lote__nome {
  overflow: hidden;
  min-width: 0;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painel-lote__contagem {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.painel-lote__trilha {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: var(--surface-sunken);
}

.painel-lote__barra {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.painel-lote__barra--esgotado {
  background: var(--success);
}

.painel-proximos {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-proximo + .painel-proximo {
  border-top: 1px solid var(--border-subtle);
}

.painel-proximo__link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 20px;
  color: inherit;
  text-decoration: none;
}

.painel-proximo__link:hover {
  color: inherit;
  background: var(--surface-page);
}

.painel-proximo__link:focus-visible {
  outline-offset: -3px;
}

.painel-proximo__data {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: var(--blue-500);
  background: var(--blue-50);
  line-height: 1;
}
.painel-proximo__data strong {
  font-size: 1rem;
  font-weight: 700;
}
.painel-proximo__data span {
  margin-top: 2px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.painel-proximo__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.painel-proximo__nome {
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painel-proximo__meta {
  color: var(--text-muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .painel-blocos {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vias-emitidas {
  margin-top: 24px;
}
.vias-emitidas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.via-ingresso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
}
.via-ingresso__qr {
  width: 246px;
  height: 246px;
  image-rendering: pixelated;
}
.via-ingresso__titular {
  margin: 8px 0 0;
  font-size: 1.1rem;
  color: var(--cor-texto);
}
.via-ingresso__evento {
  margin: 0;
  color: var(--cor-texto-suave);
}
.via-ingresso__apoio {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cor-texto-sutil);
}

.formulario-reenvio {
  display: grid;
  gap: 12px;
  max-width: 560px;
}

.cartao-formulario--largo {
  max-width: 1120px;
}

.lista-vinculos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-vinculos li {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.filtro-marcador {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  white-space: nowrap;
  font-size: 0.9rem;
}

.linha-confirmacao > td {
  padding-top: 0;
}

.confirmacao-usuario {
  max-width: 720px;
}

.link-organizacao {
  color: inherit;
  text-decoration: none;
}

.link-organizacao:hover,
.link-organizacao:focus-visible {
  text-decoration: underline;
}

.voltar-gestao-usuarios {
  margin: 28px 28px 0;
}

@media print {
  .impressao-oculta {
    display: none !important;
  }
  .impressao-somente {
    display: block !important;
  }
  .impressao-manter-junto {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .impressao-pagina-propria {
    break-after: page;
    page-break-after: always;
  }
  @page {
    margin: 14mm 12mm;
  }
  html,
  body {
    background: #fff;
    color: #000;
  }
  .estrutura-aplicacao,
  .corpo-aplicacao {
    display: block;
    height: auto;
  }
  .conteudo-aplicacao {
    padding: 0;
    overflow: visible;
  }
  thead {
    display: table-header-group;
  }
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .cartoes-resumo {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }
  .graficos-relatorio {
    grid-template-columns: minmax(0, 1fr);
  }
  .vias-emitidas__lista {
    display: block;
  }
  .via-ingresso {
    border: none;
    padding-top: 30mm;
  }
  .grafico-cartao,
  .cartao-resumo {
    box-shadow: none;
  }
}
.impressao-somente {
  display: none;
}

/* ============================================================================
   Checkout (S2, #23296) e página pública do pedido (S3, #23293).

   🔴 ZERO HEXADECIMAL LITERAL neste arquivo, e é regra desta rodada, não estilo: o #23292 mediu
      146 deles nas nove telas antigas e isso virou a task #23302. Telas novas não aumentam a
      conta. Tudo aqui é token — do design system (#23291, `Styles/design-system/`), do vocabulário
      do projeto (`_tokens.scss`) ou do TEMA do promotor.

   🔴 A COR DA MARCA É SEMPRE `var(--tema-cor-primaria, <fallback>)`, nunca a cor da plataforma
      direto. As duas telas são white-label (CA do #22950): quem manda é o promotor, e o fallback
      só existe para o tenant que não escolheu cor.

   ⚠️ As três sombras e a `--font-display` (Orbitron) vêm do #23291, que entrou na develop em
      `cbc3d5e`. Antes dele este arquivo teria de inventá-las — foi o bloqueio 2 do Passo 0.

   🔴 EXCEÇÃO ao white-label, decisão de 14/09/2026 (fatia 2 do #23296): `.marca-plataforma` é o
      selo "Pagamento seguro via SporTI Pay" no rodapé do checkout E da página de venda — a única
      marca da SporTI que aparece nas duas telas, revogando aquele CA nesse ponto específico. O
      resto do arquivo continua white-label; não generalize a exceção para outro elemento.
   ============================================================================ */
/* ---------------------------------------------------------------- comum às duas telas */
.checkout,
.status-pedido {
  display: grid;
  gap: var(--space-5);
  width: min(560px, 100%);
  margin: var(--space-8) auto;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}

/* 🔴 Item 23701 (rodada 45) — SÓ `.checkout` alarga no desktop, fiel ao "S2 v2". `.checkout` é
   classe EXCLUSIVA desta tela — `.status-pedido` (S3) é outra classe, e o seletor combinado
   acima (compartilhado pelas duas) continua valendo para ambas; esta regra abaixo, sozinha,
   só se aplica a quem tem `.checkout`. Alargar não toca `_LayoutVenda.cshtml` nem
   `.conteudo-venda` (760px, compartilhado com a S3 e a segunda via) — mesma técnica
   "full-bleed" do item 23700 (S1, `.pagina-s1 .previa-venda`): `left: 50%` desloca pela
   largura do PAI (`.conteudo-venda`, centralizado por `margin: 0 auto`); `translateX(-50%)`
   puxa de volta pela largura DO PRÓPRIO elemento (100vw, depois grampeada em max-width). A
   matemática fecha no centro do viewport mesmo com um pai mais estreito no meio do caminho.

   ⚠️ 680px, o MESMO breakpoint do grid abaixo (`.checkout__corpo`) — abaixo disso é uma
   coluna só, e alargar sozinho sem o grid não faria sentido visual. */
@media (min-width: 680px) {
  .checkout {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 1040px;
    transform: translateX(-50%);
  }
}
/* Corpo: grade de duas colunas no desktop (coluna principal + resumo), coluna única no
   mobile. DOM na ordem natural de um checkout — campos primeiro, resumo por último — ao
   contrário do S1 (onde os ingressos vêm antes por serem o que se está escolhendo); aqui o
   comprador já escolheu na vitrine, então preencher os dados é a ação primária. */
.checkout__corpo {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 680px) {
  .checkout__corpo {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
  }
  .checkout__coluna-resumo {
    position: sticky;
    top: var(--space-5);
  }
}
.checkout__coluna-principal,
.checkout__coluna-resumo {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

/* Seção numerada (item 23701, critério 6) — "Seus dados" e "Endereço de cobrança", fiel ao
   S2 v2. Reusada também em "Dados do cartão" e no aceite (sem número, só a moldura), para as
   telas lerem como uma sequência coerente de cartões. */
.checkout__secao {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.checkout__secao-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  color: var(--cor-texto);
  font-size: 0.95rem;
  font-weight: 700;
}

.checkout__numero {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tema-cor-primaria, var(--cor-primaria));
  color: var(--text-inverse);
  font-size: 0.76rem;
  font-weight: 700;
}

/* Texto pré-aprovado (item 23701) — ver o comentário no HTML. */
.checkout__nota-conta {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
  line-height: var(--lh-body);
}

.checkout__nota-conta strong {
  color: var(--cor-texto);
}

/* Idem — decisão vigente #22968 (quantidade e meio vêm da vitrine), texto pré-aprovado. */
.checkout__nota-escolha-vitrine {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.8rem;
  line-height: var(--lh-body);
}

.checkout__logo,
.status-pedido__logo {
  justify-self: start;
  max-height: 44px;
  max-width: 100%;
}

/* Imagem sem `src` não deixa ícone quebrado — mesma régua do `_Previa`, onde o editor emite a tag
   sempre e o Alpine decide. */
.checkout__logo:not([src]),
.status-pedido__logo:not([src]) {
  display: none;
}

.checkout__evento,
.status-pedido__evento {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.checkout__titulo,
.status-pedido__titulo {
  margin: 0;
  color: var(--cor-texto);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}

/* ---------------------------------------------------------------- o protocolo (S3) */
/* 🔴 O bloco de maior peso visual da tela, e é deliberado: é o número que o comprador dita ao
   telefone e o que ele precisa achar de relance quando voltar ao link. O estado do pagamento ele
   reconhece pela cor; o número, não. */
.status-pedido__protocolo {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  text-align: center;
}

.status-pedido__protocolo-rotulo {
  color: var(--cor-texto-sutil);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

/* 🔑 Orbitron no protocolo, e é o que o design pede em S2, S3, S4 e no e-mail E8 — a família de
   exibição existe justamente para número que se lê em voz alta. `tabular-nums` porque os sete
   dígitos precisam de largura fixa para o olho contar. */
.status-pedido__protocolo-numero {
  color: var(--cor-texto);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
  word-break: break-all;
}

/* #23427 fatia 1 — a dica de anotar o protocolo. Mora DENTRO do bloco do protocolo (some junto
   com ele) e usa o mesmo tom sutil do aviso do link: é instrução, não alerta. */
.status-pedido__protocolo-dica {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------- estados (S3) */
.status-pedido__estado {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: 4px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

/* ⚠️ A cor NUNCA é o único portador do estado — cada ramo tem título próprio em texto. Estado
   comunicado só por cor é inacessível, e neste fluxo o estado é "meu dinheiro chegou?". */
.status-pedido__estado--aprovado {
  border-left-color: var(--success);
  background: var(--success-bg);
}

.status-pedido__estado--aguardando {
  border-left-color: var(--warning);
  background: var(--warning-bg);
}

.status-pedido__estado--recusado {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

.status-pedido__mensagem {
  margin: 0;
  color: var(--cor-texto);
  font-size: 0.9rem;
  line-height: var(--lh-body);
}

.status-pedido__aviso {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.status-pedido__prazo {
  display: grid;
  gap: var(--space-1);
  text-align: center;
}

.status-pedido__prazo-data {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

/* 🔴 aria-hidden no HTML (Pedido.cshtml) — este é o dígito que muda a cada segundo, e nenhum
   leitor de tela pode ouvi-lo mudar a cada segundo. O anúncio por marco mora em elemento
   separado, .visualmente-oculto com aria-live. Fonte e peso pelo mesmo padrão do número do
   protocolo (--font-display, tabular-nums): os dois são número que se lê de relance. */
.status-pedido__contador {
  margin: 0;
  color: var(--cor-texto-suave);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
}

/* ---------------------------------------------------------------- Pix copia e cola (S3) */
.status-pedido__pix {
  display: grid;
  gap: var(--space-2);
}

.status-pedido__pix-rotulo {
  color: var(--cor-texto-suave);
  font-size: var(--fs-caption);
  font-weight: 600;
}

/* 🔴 Monoespaçado e quebrando em qualquer ponto: a carga EMV não tem espaços, e sem
   `word-break` ela estoura o cartão no celular — que é o aparelho em que ela vai ser usada.
   `readonly` (e não `disabled`) fica no HTML, porque o comprador precisa poder selecionar à mão
   quando a área de transferência não estiver disponível. */
.status-pedido__pix-carga {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--cor-texto);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.76rem;
  line-height: 1.4;
  resize: vertical;
  word-break: break-all;
}

/* ---------------------------------------------------------------- Pix: QR + copia e cola (fatia 1, #23296) */
/* 🔴 O CONTÊINER REORDENA SÓ OS DOIS FILHOS DELE. `.status-pedido__estado` (acima) é grid e tem
   título e mensagem como irmãos — dar `order` direto a `.status-pedido__pix`/`.status-pedido__qr`
   ali dentro reordenaria título e mensagem junto. Isolar num flex próprio confina o efeito aos
   dois blocos que a R2 pede para trocar de posição visual. */
.status-pedido__pix-e-qr {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.status-pedido__qr {
  display: grid;
  justify-items: center;
}

/* Tokens do protótipo (S3, PIX Automático): o fundo branco do protótipo vira --surface-card;
   border 1px solid var(--border-subtle) já é o MESMO nome no protótipo e aqui — os arquivos de
   tokens do export (_ds/) batem byte a byte com design-system/_colors.scss; border-radius 12px do
   protótipo vira --radius-lg (12px exato). */
.status-pedido__qr-imagem {
  width: 200px;
  height: 200px;
  max-width: 100%;
  padding: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* 🔴 A ORDEM VISUAL inverte a partir de 760px (R2, DECISOES.md D-191): no celular o copia e cola
   vem primeiro; em tela larga, o QR primeiro. O DOM continua copia-e-cola → QR nas duas larguras —
   só a posição VISUAL muda. Ver o comentário em Pedido.cshtml sobre por que isso não bagunça
   tabulação nem leitor de tela: a imagem não é focável. */
@media (min-width: 760px) {
  .status-pedido__qr {
    order: -1;
  }
}
/* ---------------------------------------------------------------- ação (as duas telas) */
.status-pedido__acao,
.checkout__confirmar {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: var(--tema-cor-primaria, var(--cor-primaria));
  color: var(--text-inverse);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-standard);
}

.status-pedido__acao:hover,
.checkout__confirmar:hover {
  filter: brightness(0.93);
}

/* ⚠️ O anel de foco é obrigatório e sai do token, não do padrão do navegador: o botão tem fundo da
   cor do tema, e o contorno padrão some sobre metade das cores que um promotor escolhe. */
.status-pedido__acao:focus-visible,
.checkout__confirmar:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* O htmx marca o elemento enquanto a requisição está em voo — é o que o `hx-disabled-elt` faz. */
.checkout__confirmar:disabled,
.checkout__confirmar[disabled] {
  cursor: progress;
  filter: grayscale(0.4);
}

/* O link do `_Previa` reusa `.previa-venda__botao`, que nasceu como `<span>` no mock do editor e
   agora também é `<a>`. Sem isto o navegador sublinha. */
.previa-venda__botao {
  text-decoration: none;
}

/* ---------------------------------------------------------------- totais (as duas telas) */
.checkout__itens,
.status-pedido__totais,
.checkout__totais {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout__item,
.status-pedido__linha,
.checkout__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.status-pedido__linha dt,
.checkout__linha dt {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.status-pedido__linha dd,
.checkout__linha dd {
  margin: 0;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.status-pedido__valor--inclusa,
.checkout__valor--inclusa {
  display: grid;
  justify-items: end;
  color: var(--cor-texto-sutil);
  font-size: 0.8rem;
}

/* 🔑 O TOTAL na cor do TEMA e em Orbitron, igual ao da vitrine: é o número que o comprador
   confere, e ele pertence à marca do promotor. */
.status-pedido__linha--total,
.checkout__linha--total {
  border-bottom: 0;
}

.status-pedido__linha--total dd,
.checkout__linha--total dd {
  color: var(--tema-cor-primaria, var(--cor-texto));
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- rodapé (S3) */
.status-pedido__comprador,
.status-pedido__aviso-link {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------- formulário (S2) */
.checkout__resumo {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.checkout__meio {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
}

.checkout__trocar {
  color: var(--tema-cor-primaria, var(--cor-primaria));
}

/* #23594 fatia 3B — seletor de parcelas, GET de página inteira (D-430b), fora do
   .checkout__formulario de propósito: HTML não aninha <form>. */
.checkout__parcelas {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: 0.85rem;
}

.checkout__parcelas-nota {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
}

.checkout__formulario {
  display: grid;
  gap: var(--space-4);
}

.checkout__campo {
  display: grid;
  gap: var(--space-1);
}

.checkout__campo label {
  color: var(--cor-texto);
  font-size: 0.85rem;
  font-weight: 600;
}

.checkout__opcional {
  color: var(--cor-texto-sutil);
  font-weight: 400;
}

.checkout__campo input {
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--raio-pequeno);
  background: var(--surface-card);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 0.95rem;
}

.checkout__campo input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 1px;
}

.checkout__ajuda {
  color: var(--cor-texto-sutil);
  font-size: 0.76rem;
}

/* Legenda visível do asterisco — item 2.3 do #23296. `.campo__obrigatorio` (glifo + cor) já
   existe em _components.scss, reusado aqui sem redeclarar a regra (§2 do CLAUDE.md). Sem
   `.visualmente-oculto` extra: o texto "Campos obrigatórios" ao lado do glifo já é visível e já
   é lido por leitor de tela — diferente do asterisco por campo (CampoFormularioTagHelper), que
   não tem texto vizinho nenhum explicando o glifo. */
.checkout__legenda-obrigatorio {
  margin: 0;
  color: var(--cor-texto-sutil);
  font-size: 0.78rem;
}

/* Aviso discreto de CEP não encontrado — role="status" no HTML já cobre o anúncio pra leitor de
   tela; aqui é só a cor de atenção sem ser a mesma vermelha de erro de validação. */
.checkout__aviso-cep {
  color: var(--cor-aviso);
}

/* ---------------------------------------------------------------- confiança (S2 v2, fatia 2) */
/* 🔴 O selo só existe no DOM quando `Model.AntifraudeAtivo` é true no servidor — ver o `@if` em
   Checkout.cshtml. Nada aqui esconde por CSS; esta regra só estiliza o que já foi decidido do
   lado do servidor a renderizar. */
.checkout__selo-antifraude {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------- aceite (S2 v2, fatia 3-B) */
.checkout__aceite {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--cor-texto);
}

.checkout__aceite input {
  margin-top: 3px;
  flex-shrink: 0;
}

.checkout__aceite a {
  color: var(--tema-cor-primaria, var(--cor-primaria));
}

/* 🔴 EXCEÇÃO ao white-label desta rodada (ver o comentário no topo do arquivo) — usada também em
   `_Previa.cshtml` (página de venda). Fica aqui, e não em `_sales-pages.scss`, para não tocar num
   arquivo de outra trilha nesta fatia. */
.marca-plataforma {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--cor-texto-sutil);
  font-size: 0.72rem;
}

.marca-plataforma__logo {
  height: 14px;
  width: auto;
}

.marca-plataforma__separador {
  color: var(--border-default);
}

/* Tooltip nativo (atributo `title`) sobre a taxa de serviço — sem JavaScript, sem componente novo. */
.checkout__ajuda-taxa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: var(--space-1);
  border: 1.4px solid var(--text-muted);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  cursor: help;
}

/* ---------------------------------------------------------------- barra fixa (mobile, S2 v2) */
/* 🔴 Só existe visualmente abaixo de 760px — no desktop o resumo já está visível junto do botão
   original, e duplicar a barra ali seria redundância sem propósito. Repete o MESMO total e o
   MESMO rótulo do botão principal (`Model.RotuloBotaoConfirmar` no servidor) — nunca um segundo
   cálculo. */
.checkout__barra-fixa {
  display: none;
}

@media (max-width: 760px) {
  .checkout__barra-fixa {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0 calc(var(--space-6) * -1) calc(var(--space-6) * -1);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
  }
  .checkout__barra-fixa-total {
    flex: 1;
    color: var(--tema-cor-primaria, var(--cor-texto));
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
  }
  .checkout__barra-fixa-botao {
    flex: 0 0 auto;
    width: auto;
    padding-inline: var(--space-6);
  }
}
/* Endereço de cobrança (Bug #23397) — item 23701: virou `.checkout__secao` (moldura de
   cartão numerado, combinada no HTML: `class="checkout__endereco checkout__secao"`). A moldura
   NEUTRA de antes (border:0/padding:0 só neste fieldset) e o `.checkout__endereco-titulo`
   próprio saíram daqui — `.checkout__secao`/`.checkout__secao-titulo` já resolvem os dois, e
   repetir a regra no MESMO elemento é o defeito que a §2 do CLAUDE.md descreve (a última
   declarada no arquivo vencia silenciosamente). As duas classes continuam no HTML só como
   identidade/seletor de JS futuro, sem CSS próprio. */
/* Vazio some sozinho: o `<span asp-validation-for>` é sempre emitido, e sem isto sobraria um
   espaço reservado sob cada campo. Mesma régua do rodapé do `_Previa`. */
.checkout__erro:empty {
  display: none;
}

.checkout__erro {
  color: var(--danger);
  font-size: 0.78rem;
}

.checkout__aviso {
  margin: 0;
  padding: var(--space-4);
  border-left: 4px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--cor-texto);
  font-size: 0.9rem;
  line-height: var(--lh-body);
}

.checkout__aviso--impedimento {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

.checkout__aviso--informativo {
  border-left-color: var(--info);
  background: var(--info-bg);
}

.checkout__aviso p {
  margin: 0 0 var(--space-2);
}

.checkout__aviso p:last-child {
  margin-bottom: 0;
}

.checkout__protocolo {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
}

.checkout__voltar {
  color: var(--tema-cor-primaria, var(--cor-primaria));
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------- segunda via do link (#23335) */
/* 🔴 A mesma moldura das outras duas telas do funil, e é de propósito: quem chega aqui perdeu o
   link e precisa reconhecer a loja em que estava. Zero hexadecimal literal, como o resto do
   arquivo — tema do promotor, tokens do design system (#23291) e do `_tokens.scss`. */
.segunda-via {
  display: grid;
  gap: var(--space-4);
  width: min(480px, 100%);
  margin: var(--space-8) auto;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}

.segunda-via__logo {
  justify-self: start;
  max-height: 44px;
  max-width: 100%;
}

/* Imagem sem `src` não deixa ícone quebrado — mesma régua do checkout e do `_Previa`. */
.segunda-via__logo:not([src]) {
  display: none;
}

.segunda-via__evento {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.segunda-via__titulo {
  margin: 0;
  color: var(--cor-texto);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}

.segunda-via__mensagem {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
  line-height: var(--lh-body);
}

.segunda-via__aviso {
  margin: 0;
  padding: var(--space-4);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--cor-texto);
  font-size: 0.88rem;
  line-height: var(--lh-body);
}

.segunda-via__formulario {
  display: grid;
  gap: var(--space-4);
}

.segunda-via__campo {
  display: grid;
  gap: var(--space-1);
}

.segunda-via__campo label {
  color: var(--cor-texto);
  font-size: 0.88rem;
  font-weight: 650;
}

.segunda-via__campo input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--raio-pequeno);
  background: var(--surface-card);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 0.95rem;
}

.segunda-via__campo input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 1px;
}

.segunda-via__erro {
  color: var(--danger);
  font-size: 0.78rem;
}

/* Vazio não ocupa linha — senão o espaçamento do formulário muda entre o estado com erro e o sem,
   e o campo "pula" ao submeter. Mesma regra do `.checkout__erro:empty`. */
.segunda-via__erro:empty {
  display: none;
}

.segunda-via__acao {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: var(--tema-cor-primaria, var(--cor-primaria));
  color: var(--text-inverse);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-standard);
}

.segunda-via__acao:hover {
  filter: brightness(0.93);
}

/* ⚠️ O anel de foco sai do token, e não do padrão do navegador: o botão tem a cor do tema, e o
   contorno padrão some sobre metade das cores que um promotor escolhe. */
.segunda-via__acao:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

.segunda-via__voltar {
  justify-self: center;
  color: var(--tema-cor-primaria, var(--cor-primaria));
  font-size: 0.88rem;
}

/* A porta de entrada da segunda via, no rodapé da vitrine (#23335). Discreta de propósito: quem
   está comprando não precisa dela, e quem perdeu o link vai procurá-la. */
.vitrine-segunda-via {
  width: min(560px, 100%);
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-6);
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  text-align: center;
}

.vitrine-segunda-via a {
  color: var(--tema-cor-primaria, var(--cor-primaria));
}

.pagina-portaria {
  overflow: hidden;
  background: var(--gray-900);
}

.portaria {
  --surface-page: var(--gray-900);
  --surface-card: var(--gray-800);
  --surface-raised: var(--gray-800);
  --surface-sunken: var(--gray-900);
  --text-primary: var(--gray-0);
  --text-secondary: var(--gray-300);
  --text-muted: var(--gray-300);
  --border-subtle: var(--gray-700);
  --border-default: var(--gray-600);
  --border-strong: var(--gray-500);
  --accent: var(--teal-400);
  --accent-hover: var(--teal-300);
  --focus-ring: var(--teal-300);
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--surface-page);
}

.portaria__cabecalho {
  flex: 0 0 auto;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

.portaria__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.portaria__marca {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portaria__marca-simbolo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--text-inverse);
  background: var(--blue-500);
}

.portaria__marca-simbolo svg {
  width: 15px;
  height: 15px;
}

.portaria__conexao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-size: 11px;
  font-weight: 600;
}

.portaria__conexao-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: portaria-pulso 1.6s ease-in-out infinite;
}

.portaria__evento {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--raio-medio);
  color: inherit;
  font-family: inherit;
  text-align: left;
  background: var(--surface-sunken);
}

.portaria__evento:hover {
  border-color: var(--accent);
  text-decoration: none;
}

.portaria__evento-simbolo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--accent);
  background: var(--surface-card);
}

.portaria__evento-texto {
  flex: 1;
  min-width: 0;
}

.portaria__evento-nome {
  display: block;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.portaria__evento-detalhe {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11.5px;
}

.portaria__contador {
  margin-top: 12px;
}

.portaria__contador-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.portaria__contador-numeros {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.portaria__contador-valor {
  color: var(--accent);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.portaria__contador-rotulo {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.portaria__contador-percentual {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.portaria__barra {
  overflow: hidden;
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
}

.portaria__barra-preenchida {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.portaria__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.portaria-leitor {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.portaria-leitor__visor {
  display: flex;
  position: relative;
  flex: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-sunken);
}

.portaria-leitor__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portaria-leitor__mira {
  position: relative;
  width: min(232px, 62vw);
  height: min(232px, 62vw);
}

.portaria-leitor__canto {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 0 solid var(--accent);
}

.portaria-leitor__canto--se {
  top: 0;
  left: 0;
  border-top-width: 4px;
  border-top-left-radius: 14px;
  border-left-width: 4px;
}

.portaria-leitor__canto--sd {
  top: 0;
  right: 0;
  border-top-width: 4px;
  border-top-right-radius: 14px;
  border-right-width: 4px;
}

.portaria-leitor__canto--ie {
  bottom: 0;
  left: 0;
  border-bottom-width: 4px;
  border-bottom-left-radius: 14px;
  border-left-width: 4px;
}

.portaria-leitor__canto--id {
  right: 0;
  bottom: 0;
  border-right-width: 4px;
  border-bottom-width: 4px;
  border-bottom-right-radius: 14px;
}

.portaria-leitor__facho {
  position: absolute;
  top: 14px;
  right: 8px;
  left: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  animation: portaria-varredura 2.6s ease-in-out infinite;
}

.portaria-leitor__dica {
  display: inline-flex;
  position: absolute;
  z-index: 2;
  bottom: 22px;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 8px 15px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: var(--surface-card);
}

.portaria-leitor__acoes {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

.portaria-leitor__aviso {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px 12px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11.5px;
  text-align: center;
  background: var(--surface-card);
}

.portaria-leitor__aviso svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.portaria-leitor__indisponivel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  margin: auto;
  padding: 24px;
  text-align: center;
}

.portaria-leitor__indisponivel > svg {
  width: 34px;
  height: 34px;
  color: var(--warning);
}

.portaria-leitor__indisponivel .portaria__botao-secundario {
  margin-top: 4px;
}

.portaria-leitor__indisponivel .portaria__botao-secundario svg {
  width: 17px;
  height: 17px;
}

.portaria-leitor__indisponivel-titulo {
  font-size: 16px;
  font-weight: 700;
}

.portaria-leitor__indisponivel-texto {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.45;
}

.portaria-leitor__fallback {
  cursor: pointer;
}

.portaria-leitor__fallback-aviso {
  margin: 2px 0 0;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.4;
}

.portaria__botao-secundario {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: var(--surface-sunken);
  cursor: pointer;
}

.portaria__botao-secundario--icone {
  width: 52px;
  padding: 0;
}

.portaria-lista {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.portaria-lista__filtros {
  flex: 0 0 auto;
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

.portaria-lista__busca {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--raio-medio);
  background: var(--surface-sunken);
}

.portaria-lista__busca svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

.portaria-lista__busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  color: var(--text-primary);
  font-size: 14px;
  background: transparent;
}

.portaria-lista__busca input::placeholder {
  color: var(--text-secondary);
}

.portaria-lista__abas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.portaria-lista__aba {
  padding: 6px 13px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-sunken);
}

.portaria-lista__aba:hover {
  text-decoration: none;
}

.portaria-lista__aba--ativa {
  border-color: transparent;
  color: var(--text-inverse);
  font-weight: 700;
  background: var(--blue-500);
}

.portaria-lista__corpo {
  flex: 1;
  padding: 8px 12px 16px;
  overflow-y: auto;
}

.portaria-lista__linha {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-card);
}

.portaria-lista__inicial {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  background: var(--surface-sunken);
}

.portaria-lista__texto {
  flex: 1;
  min-width: 0;
}

.portaria-lista__nome {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.portaria-lista__meta {
  display: block;
  margin-top: 1px;
  color: var(--text-secondary);
  font-size: 11.5px;
}

.portaria-lista__selo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.portaria-lista__selo svg {
  width: 14px;
  height: 14px;
}

.portaria-lista__selo--validado {
  border-color: var(--success);
  color: var(--success);
}

.portaria-lista__selo--pendente {
  color: var(--text-secondary);
}

.portaria-lista__vazio {
  padding: 36px 16px;
  color: var(--text-secondary);
  font-size: 13.5px;
  text-align: center;
}

.portaria-lista__paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 4px;
  color: var(--text-secondary);
  font-size: 12.5px;
}

.portaria__navegacao {
  display: flex;
  flex: 0 0 auto;
  padding: 6px 8px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

.portaria__navegacao-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 0;
  border-radius: var(--raio-medio);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.portaria__navegacao-item:hover {
  text-decoration: none;
}

.portaria__navegacao-item--ativo {
  color: var(--accent);
}

.portaria-resultado {
  display: flex;
  position: absolute;
  z-index: 20;
  flex-direction: column;
  inset: 0;
  background: var(--surface-page);
}

.portaria-resultado__conteudo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 30px 22px 12px;
  overflow-y: auto;
  text-align: center;
}

.portaria-resultado__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin-top: 8px;
  border: 3px solid currentcolor;
  border-radius: 50%;
  animation: portaria-surge 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.portaria-resultado__icone svg {
  width: 52px;
  height: 52px;
}

.portaria-resultado--liberado .portaria-resultado__icone,
.portaria-resultado--liberado .portaria-resultado__titulo {
  color: var(--success);
}

.portaria-resultado--negado .portaria-resultado__icone,
.portaria-resultado--negado .portaria-resultado__titulo {
  color: var(--danger);
}

.portaria-resultado--atencao .portaria-resultado__icone,
.portaria-resultado--atencao .portaria-resultado__titulo {
  color: var(--warning);
}

.portaria-resultado__titulo {
  margin-top: 22px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.portaria-resultado__subtitulo {
  max-width: 320px;
  margin-top: 8px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.portaria-resultado__cartao {
  width: 100%;
  max-width: 330px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  text-align: left;
  background: var(--surface-card);
}

.portaria-resultado__cartao + .portaria-resultado__cartao {
  margin-top: 12px;
}

.portaria-resultado__rotulo {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.portaria-resultado__valor {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.portaria-resultado__registro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.portaria-resultado__registro svg {
  width: 14px;
  height: 14px;
}

.portaria-resultado__acao {
  flex: 0 0 auto;
  padding: 12px 20px 20px;
}

.portaria__botao-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 62px;
  border: 0;
  border-radius: 16px;
  color: var(--text-inverse);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  background: var(--blue-500);
  cursor: pointer;
}

.portaria__botao-principal:hover {
  background: var(--blue-700);
  text-decoration: none;
}

.portaria-selecao {
  flex: 1;
  padding: 20px 16px 28px;
  overflow-y: auto;
}

.portaria-selecao__titulo {
  font-size: 20px;
  font-weight: 700;
}

.portaria-selecao__texto {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 13.5px;
}

.portaria-selecao__lista {
  margin-top: 16px;
}

@keyframes portaria-varredura {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(min(232px, 62vw) - 32px));
  }
}
@keyframes portaria-pulso {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes portaria-surge {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  60% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portaria-leitor__facho,
  .portaria__conexao-ponto,
  .portaria-resultado__icone {
    animation: none;
  }
}
.indicador-versao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 24px 0 0;
  padding-top: 12px;
  font-size: var(--fs-overline);
  color: var(--cor-texto-sutil);
  text-align: center;
}

.indicador-versao__versao {
  font-family: var(--font-display);
  letter-spacing: var(--ls-wide);
}

.pagina-documento-legal {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  min-height: 100vh;
}

.documento-legal__cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--cor-borda);
  font-weight: 700;
  font-size: 0.9375rem;
}

.documento-legal__conteudo {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  line-height: 1.6;
  font-size: 0.9375rem;
}

.documento-legal__conteudo h1 {
  font-size: 1.375rem;
  margin: 0 0 4px;
}

.documento-legal__conteudo h2 {
  font-size: 1.0625rem;
  margin: 28px 0 8px;
}

.documento-legal__conteudo table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 0.84375rem;
}

.documento-legal__conteudo th,
.documento-legal__conteudo td {
  border: 1px solid var(--cor-borda);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.documento-legal__conteudo th {
  background: var(--cor-superficie);
  font-weight: 700;
}

.documento-legal__conteudo blockquote {
  margin: 0 0 16px;
  padding-left: 16px;
  border-left: 3px solid var(--cor-borda);
  color: var(--cor-texto-suave);
}

/* A página pública do promotor — #23574 (branding) + #23577 (vitrine), fatia 4.

   Só classes novas (.pagina-promotor*, .card-evento-promotor*), nenhuma custom property fora do
   próprio seletor: posição indiferente no site.scss, mesmo argumento já medido para _sales.scss e
   _reports.scss.

   🔴 O interruptor de aba é CSS PURO — dois <input type="radio"> ocultos + seletor de irmão ~. Não
   há x-show, x-data nem JavaScript nenhum decidindo qual painel aparece: a página pública não pode
   ter decisão de visibilidade tomada no cliente (mesma régua de _Previa.cshtml). */
.pagina-promotor {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--cor-fundo);
}

.pagina-promotor__hero {
  position: relative;
  background: var(--tema-cor-primaria, var(--cor-primaria));
  color: #ffffff;
}

.pagina-promotor__hero-fundo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pagina-promotor__hero-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 17, 28, 0.88) 0%, rgba(9, 17, 28, 0.42) 55%, rgba(9, 17, 28, 0.12) 100%);
}

.pagina-promotor__hero-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pagina-promotor__hero-conteudo {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 20px 26px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.pagina-promotor__logo {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tema-cor-primaria, var(--cor-primaria));
  border: 3px solid #ffffff;
  box-shadow: var(--shadow-lg);
}

.pagina-promotor__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pagina-promotor__nome {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .pagina-promotor__hero-conteudo {
    padding: 80px 24px 30px;
  }
  .pagina-promotor__logo {
    width: 104px;
    height: 104px;
  }
  .pagina-promotor__nome {
    font-size: 2.2rem;
  }
}
.pagina-promotor__abas {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px 8px;
}

/* Os dois radios ficam fora do fluxo visual, mas ACESSÍVEIS por teclado — não usar display:none
   (some do foco), o mesmo padrão que .selecao > input já usa em _components.scss. */
.pagina-promotor__aba-entrada {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pagina-promotor__aba-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 20px;
}

.pagina-promotor__aba-rotulo {
  padding: 10px 4px 12px;
  margin-right: 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cor-texto-suave);
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

#aba-disponiveis:checked ~ .pagina-promotor__aba-nav label[for=aba-disponiveis],
#aba-encerrados:checked ~ .pagina-promotor__aba-nav label[for=aba-encerrados] {
  color: var(--tema-cor-primaria, var(--cor-primaria));
  border-bottom-color: var(--tema-cor-primaria, var(--cor-primaria));
}

.pagina-promotor__aba-entrada:focus-visible ~ .pagina-promotor__aba-nav label {
  outline: 2px solid var(--tema-cor-primaria, var(--cor-primaria));
  outline-offset: 2px;
}

.pagina-promotor__aba-painel {
  display: none;
}

#aba-disponiveis:checked ~ #painel-disponiveis,
#aba-encerrados:checked ~ #painel-encerrados {
  display: block;
}

.pagina-promotor__grade {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .pagina-promotor__grade {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
.pagina-promotor__vazio {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: 44px 20px;
  text-align: center;
}

.pagina-promotor__vazio h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.pagina-promotor__vazio p {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.card-evento-promotor {
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.card-evento-promotor:hover,
.card-evento-promotor:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-evento-promotor__imagem {
  height: 140px;
  background: var(--cor-fundo);
}

.card-evento-promotor__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-evento-promotor__corpo {
  display: flex;
  gap: 14px;
  padding: 16px;
}

.card-evento-promotor__data {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  padding-right: 12px;
  border-right: 1px solid var(--cor-borda);
}

.card-evento-promotor__dia {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--tema-cor-primaria, var(--cor-primaria));
  text-transform: capitalize;
}

.card-evento-promotor__mes {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-top: 3px;
}

.card-evento-promotor__ano {
  display: block;
  font-size: 10px;
  color: var(--cor-texto-sutil);
}

.card-evento-promotor__detalhes {
  min-width: 0;
  flex: 1;
}

.card-evento-promotor__quando {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-transform: capitalize;
}

.card-evento-promotor__titulo {
  margin: 5px 0 7px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.card-evento-promotor__local {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--cor-texto-suave);
  line-height: 1.4;
}

.card-evento-promotor__local svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--cor-texto-sutil);
}

.pagina-promotor__sobre {
  max-width: 1120px;
  width: 100%;
  margin: 24px auto 0;
  padding: 20px 16px;
  border-top: 1px solid var(--cor-borda);
}

.pagina-promotor__sobre h2 {
  margin: 0 0 10px;
  font-size: 1rem;
}

/* #23606 fatia 3 — o "Sobre" passou a ser Markdown renderizado (D-460), e o bloco ganhou prosa.

   🔴 `white-space: pre-line` SAIU, e a remoção é parte do mecanismo, não limpeza: com o texto em
   Markdown quem separa parágrafo é a linha em branco, e o Markdig já emite <p> por parágrafo.
   Manter o pre-line somaria as quebras do fonte às do HTML — cada `\a` dentro de um parágrafo
   viraria quebra visível além do <p> que já existe. Medido: `um\nDOIS` sai num <p> só (soft break
   do CommonMark), `um\n\ndois` sai em dois <p>.

   Os seletores abaixo são o molde de `_legal-documents.scss` (o outro consumidor de Markdig),
   estreitados ao que a ajuda do campo promete: negrito, itálico, listas, títulos e link. */
.pagina-promotor__sobre-texto {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  line-height: 1.6;
}

.pagina-promotor__sobre-texto > :first-child {
  margin-top: 0;
}

.pagina-promotor__sobre-texto > :last-child {
  margin-bottom: 0;
}

.pagina-promotor__sobre-texto p {
  margin: 0 0 10px;
}

.pagina-promotor__sobre-texto h3,
.pagina-promotor__sobre-texto h4,
.pagina-promotor__sobre-texto h5,
.pagina-promotor__sobre-texto h6 {
  margin: 16px 0 6px;
  color: var(--cor-texto);
  font-size: 0.95rem;
}

.pagina-promotor__sobre-texto ul,
.pagina-promotor__sobre-texto ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.pagina-promotor__sobre-texto li {
  margin-bottom: 4px;
}

.pagina-promotor__sobre-texto strong {
  color: var(--cor-texto);
}

/* 🔑 A cor do link acompanha o tema do promotor, e não o teal fixo: esta página inteira já é
   pintada por `--tema-cor-primaria` (#23279). O fallback é a cor primária do produto. */
.pagina-promotor__sobre-texto a {
  color: var(--tema-cor-primaria, var(--cor-primaria));
  overflow-wrap: anywhere;
}

.pagina-promotor__sobre-texto blockquote {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 3px solid var(--cor-borda);
  color: var(--cor-texto-sutil);
}

.pagina-promotor__sobre-texto code {
  padding: 1px 4px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo);
  font-size: 0.85em;
}

.pagina-promotor__contato {
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
}

/* CA do #23574: marca SporTI só em rodapé discreto — mesma exceção já registrada em
   _Previa.cshtml (14/09/2026). Este rodapé é conteúdo DA PÁGINA, não da casca de _LayoutVenda,
   que continua sem marca nenhuma. */
.pagina-promotor__rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding: 18px 16px;
  font-size: 11px;
  color: var(--cor-texto-sutil);
}

.pagina-promotor__rodape-logo {
  height: 12px;
  width: auto;
}

.novidades-item {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  color: #4f5964;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}

.novidades-item:hover {
  color: var(--cor-primaria);
  background: #f2f7fa;
}

.novidades-item svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.novidades-pin {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 50%;
  background: var(--cor-sucesso);
}

.barra-superior__menu {
  position: relative;
}

.novidades-pin--ponto {
  position: absolute;
  top: 7px;
  right: 7px;
  margin: 0;
  box-shadow: 0 0 0 2px var(--cor-superficie);
}

.modal-novidades {
  width: min(560px, 100vw - 32px);
  max-height: min(80dvh, 640px);
  padding: 0;
  border: 0;
  border-radius: var(--raio-grande);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  box-shadow: 0 24px 70px rgba(13, 27, 38, 0.28);
  overflow: hidden;
}

.modal-novidades[open] {
  display: flex;
}

.modal-novidades::backdrop {
  background: rgba(13, 27, 38, 0.45);
}

.modal-novidades__caixa {
  display: flex;
  width: 100%;
  min-height: 0;
  flex-direction: column;
}

.modal-novidades__cabecalho {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--cor-borda);
}

.modal-novidades__titulo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.modal-novidades__corpo {
  min-height: 0;
  padding: 4px 20px 22px;
  overflow: auto;
}

.novidade {
  padding-top: 18px;
}

.novidade + .novidade {
  margin-top: 18px;
  border-top: 1px solid var(--cor-borda);
}

.novidade__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.novidade__versao {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.novidade__data {
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.novidade__grupo {
  margin: 14px 0 6px;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.novidade__grupo--novo {
  color: var(--cor-sucesso);
}

.novidade__grupo--aprimorado {
  color: var(--cor-primaria-hover);
}

.novidade__grupo--corrigido {
  color: var(--cor-aviso);
}

.novidade__lista {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
}

.recebimento__trilha {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.recebimento__subtitulo {
  margin: 8px 0 12px;
  font-size: 1.1rem;
}

.situacao--processando {
  color: var(--cor-aviso);
  background: var(--cor-aviso-suave);
}

.saques-cartoes {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 12px;
}

.saques-cartoes__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
}

.saques-cartoes__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.saques-motivo {
  display: block;
  margin-top: 0.25rem;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  line-height: 1.3;
}

.saques-cartoes__apoio {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .recebimento__tabela {
    display: none;
  }
  .saques-cartoes {
    display: grid;
  }
}
.modal-saque {
  width: min(520px, 100vw - 32px);
  max-height: min(90dvh, 760px);
  padding: 0;
  border: 0;
  border-radius: var(--raio-grande);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  box-shadow: 0 24px 70px rgba(13, 27, 38, 0.28);
  overflow: hidden;
}

.modal-saque[open] {
  display: flex;
}

.modal-saque::backdrop {
  background: rgba(13, 27, 38, 0.45);
}

.modal-saque__caixa {
  display: flex;
  width: 100%;
  min-height: 0;
  flex-direction: column;
}

.modal-saque__cabecalho {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--cor-borda);
}

.modal-saque__titulo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.modal-saque__corpo {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 16px 20px 22px;
  overflow: auto;
}

.modal-saque__aviso {
  margin: 0 0 12px;
  padding: 10px 12px;
  color: var(--cor-aviso);
  background: var(--cor-aviso-suave);
  border-radius: var(--raio-medio);
  font-size: 0.85rem;
}

.modal-saque__valor {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-saque__prefixo {
  color: var(--cor-texto-suave);
  font-weight: 600;
}

.modal-saque__resumo,
.modal-saque__conta dl {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.modal-saque__resumo > div,
.modal-saque__conta dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.modal-saque__resumo dt,
.modal-saque__conta dt {
  color: var(--cor-texto-suave);
}

.modal-saque__resumo dd,
.modal-saque__conta dd {
  margin: 0;
  font-weight: 600;
}

.modal-saque__conta h3 {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.modal-saque__estado {
  display: grid;
  gap: 12px;
}

.modal-saque__estado h3 {
  margin: 0;
}

.modal-saque__processando {
  display: none;
  margin: 0 0 12px;
  color: var(--cor-texto-suave);
}

.htmx-request .modal-saque__processando {
  display: block;
}