/* Plataforma de pagamento: estilos de aplicação sobre o design system da Elegant Garden.
   Cantos retos, sem sombra, cor chapada; todo valor vem dos tokens de css/ds. */

/* ---------- Tema escuro (mesmos tokens, outros valores) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #0B1921;
  --surface-card: #10242A;
  --surface-cream: #10242A;
  --surface-card-cream: #10242A;
  --text-primary: #FFFFFF;
  --text-secondary: #FFF6F3;
  --text-accent: #FF7133;
  --border-strong: #FFFFFF;
  --border-subtle: color-mix(in srgb, #FFFFFF 16%, #0B1921);
  --surface-ink: #FFFFFF;
  --text-on-dark: #040F14;
  --state-ink-hover: #FFF6F3;
  --state-disabled-bg: #153134;
  --state-disabled-fg: color-mix(in srgb, #FFFFFF 55%, #0B1921);
  --status-danger: #FF7133;
  --status-success: #7FC3A2;
  --state-accent-hover: #FF7133;
}

/* Tokens da aplicação (UX-4.2): o que o design system não define fica aqui, com nome. */
:root {
  --target-min: 44px;        /* alvo de toque recomendado (UX-7.1) */
  --target-denso: 36px;      /* exceção registrada: ações em linha de tabela */
  --fs-menu: 13px;
  --fs-micro: 11px;
  --fs-code: 12.5px;
  --ajuste-rotulo: 26px;    /* altura do rótulo + espaço: alinha o botão ao campo */
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-page); }
body { margin: 0; min-height: 100vh; }
a { border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }
a.link-limpo { text-decoration: none; color: inherit; }
a.link-limpo:hover { color: var(--text-accent); }
button { font-family: var(--font-core); }
h1, h2, h3, p { margin: 0; }
strong { font-weight: var(--fw-semibold); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 16px; top: -100px; z-index: 300; background: var(--eg-capuchinha); color: var(--eg-white); padding: var(--space-3) var(--space-4); font-weight: 600; text-decoration: none; }
.pular:focus { top: 16px; }
.mono { font-family: inherit; font-variant-numeric: tabular-nums; font-size: var(--fs-body-sm); letter-spacing: 0; }
.rota, .payload { font-family: var(--font-code); font-size: var(--fs-code); }
.texto-secundario { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.rotulo-caixa, .sobretitulo { font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.sobretitulo { color: var(--text-accent); }
.pilha { display: flex; flex-direction: column; gap: var(--space-4); }
.pilha--estreita { gap: var(--space-2); }
.linha { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.carregando-inicial { padding: var(--space-8); color: var(--text-secondary); }

/* ---------- Entrada ---------- */
.entrada { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 100vh; }
.entrada__marca { background: var(--eg-eclipse); color: var(--eg-dalia); padding: var(--space-7) var(--space-8); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7); min-width: 0; }
.entrada__logo { height: 48px; width: auto; align-self: flex-start; }
.entrada__chamada { display: flex; flex-direction: column; gap: var(--space-5); }
.entrada__titulo { font-size: clamp(44px, 6.5vw, 96px); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 600; max-width: 10ch; overflow-wrap: break-word; }
.entrada__texto { font-size: var(--fs-body-lg); line-height: var(--lh-body); max-width: 36ch; }
.entrada__acesso { display: flex; align-items: center; justify-content: center; padding: var(--space-7); background: var(--surface-page); }
.entrada__cartao { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--space-5); }
.entrada__h2 { font-size: var(--fs-heading-2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: 600; }
.entrada__passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--state-disabled-fg); }
.entrada__passos li::before { content: "·"; font-weight: 700; margin-right: var(--space-2); }
.entrada__passos li.feito { color: var(--text-primary); }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.menu { background: var(--eg-eclipse); color: var(--eg-white); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.menu__marca { padding: var(--space-5) var(--space-5); display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-caption); font-weight: 600; line-height: 1.3; color: var(--eg-white); }
/* A-05: a marca não muda de cor no hover (Crisântemo sobre Eclipse fica em 3,3:1). */
a.menu__marca, a.menu__marca:hover { color: var(--eg-white); }
.menu__marca-nome { letter-spacing: var(--ls-label); }
.menu__nav { flex: 1; overflow: auto; padding: var(--space-4) 0; }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__item { text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; min-height: var(--target-min); padding: var(--space-2) calc(var(--space-5) - var(--border-block)); border-left: var(--border-block) solid transparent; color: var(--eg-white); text-decoration: none; font-size: var(--fs-menu); font-weight: 600; letter-spacing: var(--ls-label); transition: var(--transition-color); }
.menu__item:hover { color: var(--eg-calendula); }
.menu__item[aria-current="page"] { color: var(--eg-capuchinha); border-left-color: var(--eg-capuchinha); }
.menu__item:focus-visible { outline-offset: -2px; }
.menu__alerta { font-size: var(--fs-micro); color: var(--eg-calendula); }
.menu__usuario { background: var(--eg-capuchinha); padding: var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); color: var(--eg-white); }
.menu__nome { font-weight: 600; font-size: var(--fs-body); }
.menu__papel { font-size: var(--fs-caption); overflow-wrap: anywhere; }
.menu__sair { appearance: none; background: transparent; border: 0; color: var(--eg-white); display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0; margin-top: -4px; text-align: left; font: inherit; font-size: var(--fs-caption); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: flex-start; }
.menu__abrir { display: none; }

.shell__principal { min-width: 0; display: flex; flex-direction: column; }
.topo { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-7); border-bottom: var(--border-hairline) solid var(--border-subtle); min-height: 72px; flex-wrap: wrap; }
.migalha { font-size: var(--fs-body-sm); color: var(--text-secondary); flex: 1; min-width: 0; }
.migalha a { color: inherit; }
.topo__acoes { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.topo__papel { display: flex; align-items: center; gap: var(--space-3); }
.topo__papel .eg-select { min-width: 220px; }

.pagina { padding: var(--space-7); max-width: 1440px; width: 100%; }
.pagina:focus { outline: none; }
.pagina__conteudo { display: flex; flex-direction: column; gap: var(--space-6); }
.pagina__cabecalho { display: flex; flex-direction: column; gap: var(--space-3); }
.pagina__titulo { font-size: clamp(36px, 4.4vw, 56px); line-height: var(--lh-heading); letter-spacing: var(--ls-display); font-weight: 600; }
.pagina__titulo:focus { outline: none; }
.pagina__texto { color: var(--text-secondary); max-width: 64ch; line-height: var(--lh-body); }
.secao__titulo { font-size: var(--fs-heading-4); font-weight: 600; letter-spacing: var(--ls-heading); line-height: var(--lh-tight); }
.secao { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---------- Tabelas ---------- */
/* position: relative prende os rótulos .sr-only (absolutos) dentro da rolagem; sem isso eles alargam a página. */
.tabela-rolagem { overflow-x: auto; position: relative; }
.tabela-rolagem:focus-visible { outline-offset: 4px; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.tabela th { text-align: left; font-size: var(--fs-caption); font-weight: 600; padding: 0 var(--space-3) var(--space-3) 0; border-bottom: var(--border-rule) solid var(--border-strong); white-space: nowrap; }
.tabela td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--border-subtle); vertical-align: middle; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela td.num { font-weight: 600; }
.tabela .acao { text-align: right; white-space: nowrap; }
.linha-clicavel { cursor: pointer; transition: var(--transition-color); }
.linha-clicavel:hover { background: var(--surface-cream); }
.celula-dupla { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.celula-dupla > :first-child { font-weight: 600; font-size: var(--fs-body); }
.celula-dupla > :not(:first-child) { color: var(--text-secondary); }
.celula-erro { color: var(--status-danger); font-weight: 500; }
.descricao-curta { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mais { display: flex; justify-content: center; padding-top: var(--space-2); }

/* ---------- Estados ---------- */
.esqueleto__linha { height: 57px; border-bottom: var(--border-hairline) solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-4); }
.esqueleto__linha span { height: 12px; background: var(--surface-cream); }
.esqueleto__linha span:first-child { width: 90px; }
.esqueleto__linha span:last-child { width: 40%; }
:root[data-theme="dark"] .esqueleto__linha span { background: var(--state-disabled-bg); }
.vazio { padding: var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.vazio__titulo { font-size: var(--fs-title); font-weight: 600; }
.vazio__texto { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.problema { border-left: var(--border-block) solid var(--status-danger); background: var(--surface-cream); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.problema:focus { outline: none; }
.problema__codigo { font-weight: 600; color: var(--status-danger); }
.problema__detalhe { font-size: var(--fs-body-sm); font-weight: 600; }
.problema__acao { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.problema__campos { margin: 0; padding-left: var(--space-4); font-size: var(--fs-body-sm); }
.aviso { border-left: var(--border-block) solid var(--eg-calendula); background: var(--surface-cream); padding: var(--space-3) var(--space-4); font-size: var(--fs-body-sm); line-height: var(--lh-body); }

/* ---------- Filtros e buscas ---------- */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); align-items: start; }
.periodo { align-self: end; }
.busca-doc { background: var(--surface-cream); padding: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; }
.busca-doc .eg-btn { margin-top: var(--ajuste-rotulo); }
.busca-doc__resultado { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-body-sm); }

/* ---------- Painel ---------- */
.periodo { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); border-top: var(--border-block) solid var(--border-strong); padding-top: var(--space-6); }
.indicador { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.indicador__rotulo { font-size: var(--fs-body-sm); }
.indicador__valor { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: var(--ls-heading); line-height: 1; overflow-wrap: anywhere; }
.indicador__nota { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.painel__grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.sinais { list-style: none; margin: 0; padding: 0; border-top: var(--border-hairline) solid var(--border-subtle); }
.sinal { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-4); align-items: center; padding: var(--space-5) 0; border-bottom: var(--border-hairline) solid var(--border-subtle); }
.sinal__titulo { font-weight: 600; font-size: var(--fs-body); }
.sinal__dica { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.sinal__valor { font-size: var(--fs-title); font-weight: 600; text-align: right; }
.lateral-explicativa { display: flex; flex-direction: column; gap: var(--space-4); }
.lateral-explicativa h2 { color: var(--text-accent); font-size: var(--fs-heading-4); font-weight: 600; letter-spacing: var(--ls-heading); }
.lateral-explicativa p { font-size: var(--fs-body-sm); line-height: var(--lh-body); }

/* ---------- Detalhe ---------- */
.voltar { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); align-self: flex-start; font-size: var(--fs-body-sm); font-weight: 600; text-decoration: none; }
.detalhe__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.detalhe__id { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.detalhe__valor { font-size: clamp(44px, 6vw, 80px); font-weight: 600; letter-spacing: var(--ls-display); line-height: 1; margin: var(--space-3) 0; }
.detalhe__desc { font-size: var(--fs-body-lg); }
.detalhe__acoes { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.detalhe__acoes .texto-secundario { max-width: 34ch; }
.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); border-top: var(--border-block) solid var(--border-strong); padding-top: var(--space-5); }
.dado { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dado__rotulo { font-size: var(--fs-caption); font-weight: 600; }
.dado__valor { font-weight: 600; font-size: var(--fs-body-lg); overflow-wrap: anywhere; }
.dado__sub { font-size: var(--fs-body-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.detalhe__grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--space-7); align-items: start; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.linha-tempo li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--space-3); }
.linha-tempo__marca { width: 10px; height: 10px; background: var(--text-primary); margin-top: 5px; }
.linha-tempo li[data-origem="console"] .linha-tempo__marca { background: var(--eg-capuchinha); }
.linha-tempo li[data-origem="asaas"] .linha-tempo__marca { background: var(--status-success); }
.linha-tempo__corpo { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-body-sm); }
.linha-tempo__origem { font-size: var(--fs-caption); font-weight: 600; }
.linha-tempo__quando { font-size: var(--fs-caption); color: var(--text-secondary); }
.nota-livre { padding: var(--space-3) 0; border-top: var(--border-rule) solid var(--text-primary); border-bottom: var(--border-hairline) solid var(--border-subtle); font-size: var(--fs-body-sm); }
.motivo-falha { border-left: var(--border-block) solid var(--status-danger); padding: var(--space-2) var(--space-3); font-size: var(--fs-body-sm); background: var(--surface-cream); }

/* ---------- Pagadores ---------- */
.cartoes { display: flex; flex-direction: column; gap: var(--space-2); }
.cartao-salvo { display: flex; justify-content: space-between; align-items: center; border: var(--border-hairline) solid var(--border-subtle); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); gap: var(--space-3); font-size: var(--fs-body-sm); }

/* ---------- Produtos ---------- */
.produtos { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.produtos__lista { list-style: none; margin: 0; padding: 0; border-top: var(--border-block) solid var(--border-strong); }
.produtos__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline) solid var(--border-subtle); text-decoration: none; color: var(--text-primary); font-weight: 600; }
.produtos__item:hover { background: var(--surface-cream); color: var(--text-primary); }
.produtos__item[aria-current="true"] { background: var(--eg-capuchinha); color: var(--eg-eclipse); }
.produtos__item .mono { font-weight: 400; }
.produto__titulo { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.produto__titulo h2 { font-size: var(--fs-heading-3); font-weight: 600; letter-spacing: var(--ls-heading); line-height: var(--lh-tight); }
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border-hairline) solid var(--border-subtle); }
.ficha .dado { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--border-subtle); }
.ficha .dado--largo { grid-column: 1 / -1; }
.ficha .dado__valor { font-size: var(--fs-body); font-weight: 500; }
.formulario { display: flex; flex-direction: column; gap: var(--space-5); max-width: 640px; }
.formulario--caixa { background: var(--surface-cream); padding: var(--space-5); max-width: 760px; }
.formulario__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); }
.formulario__grade .largo { grid-column: 1 / -1; }
.formulario h3 { font-size: var(--fs-title); font-weight: 600; }
.formulario__acoes { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.chave__texto { display: flex; flex-direction: column; gap: var(--space-1); }
.catalogo__topo { display: flex; justify-content: space-between; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.catalogo__topo p { max-width: 64ch; font-size: var(--fs-body-sm); line-height: var(--lh-body); }

/* ---------- Diálogo ---------- */
dialog.dialogo { border: 0; border-top: var(--border-frame) solid var(--surface-accent); padding: var(--space-6); max-height: calc(100vh - 48px); overflow: auto; color: var(--text-primary); background: var(--surface-page); }
dialog.dialogo::backdrop { background: var(--surface-overlay); }
.dialogo__corpo { display: flex; flex-direction: column; gap: var(--space-4); }
.rota { display: flex; flex-direction: column; gap: var(--space-1); background: var(--surface-cream); padding: var(--space-3) var(--space-4); overflow-wrap: anywhere; }
.rota__cab { color: var(--text-secondary); }
.segredo { display: block; background: var(--eg-eclipse); color: var(--eg-white); padding: var(--space-4); font-family: var(--font-code); font-size: var(--fs-menu); word-break: break-all; }
:root[data-theme="dark"] .segredo { background: var(--eg-eclipse); }
.payload { background: var(--surface-cream); padding: var(--space-4); overflow: auto; max-height: 50vh; margin: 0; white-space: pre-wrap; word-break: break-word; }
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column; gap: var(--space-2); }
.eg-toast { color: var(--eg-white); background: var(--eg-eclipse); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .painel__grade, .detalhe__grade { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .produtos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 150; transform: translateX(-100%); visibility: hidden; transition: transform var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base); }
  .menu--aberto { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-standard), visibility 0s; }
  .menu__abrir { display: inline-flex; }
  .topo { padding: var(--space-3) var(--space-4); }
  .pagina { padding: var(--space-6) var(--space-4); }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada__marca { padding: var(--space-6) var(--space-4); gap: var(--space-6); }
  .entrada__acesso { padding: var(--space-6) var(--space-4); }
  .indicadores { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .formulario__grade, .ficha { grid-template-columns: minmax(0, 1fr); }
  .busca-doc { grid-template-columns: minmax(0, 1fr); }
  .busca-doc .eg-btn { margin-top: 0; }
  .sinal { grid-template-columns: minmax(0, 1fr) auto; }
  .topo__papel .eg-select { min-width: 0; }
  /* No celular o rótulo some da tela, mas continua dando nome ao select (leitor de tela). */
  .topo__papel .rotulo-caixa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* O tique do checkbox só aparece marcado (no componente React do design system ele é condicional). */
.eg-choice input:not(:checked) + .eg-choice__box .eg-choice__mark { display: none; }

/* Links com aparência de botão mantêm as cores do componente. */
a.eg-btn { text-decoration: none; }
a.eg-btn--primary, a.eg-btn--primary:hover { color: var(--text-on-accent); }
a.eg-btn--ghost { color: var(--text-accent); }
a.eg-btn--ghost:hover { color: var(--state-accent-hover); }
.produto__aba { display: flex; flex-direction: column; gap: var(--space-5); }
@media (max-width: 900px) {
  .sinal { grid-template-columns: auto auto minmax(0, 1fr); row-gap: var(--space-2); }
  .sinal > :first-child { grid-column: 1 / -1; }
  .sinal > :last-child { justify-self: end; }
}

/* Tabelas em telas médias: status e meio não quebram; colunas secundárias saem antes de a tabela rolar. */
.tabela .eg-badge, .tabela .sem-quebra { white-space: nowrap; }
@media (max-width: 1200px) { .tabela .col-opcional { display: none; } }

/* Contraste (WCAG 2.2 AA): texto pequeno branco sobre Capuchinha fica em 3,3:1. Nas superfícies
   Capuchinha do console o texto pequeno vai em Eclipse (5,8:1); o título grande da entrada e o
   logo continuam brancos (texto grande pede 3:1; logotipo é isento). */
.menu__usuario, .menu__sair { color: var(--eg-eclipse); }
.menu__sair:focus-visible { outline-color: var(--eg-eclipse); }
.produtos__item[aria-current="true"], .produtos__item[aria-current="true"]:hover { color: var(--eg-eclipse); }
/* A entrada agora é Eclipse (como no v2): texto em Dália e legenda em Calêndula. */
.entrada__legenda { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--eg-calendula); }
.pular { background: var(--eg-eclipse); color: var(--eg-white); }

/* Abas que não cabem (Faturas no celular) quebram linha: nenhuma fica escondida fora da tela. */
.eg-tabs { max-width: 100%; }
.eg-tabs__list { flex-wrap: wrap; row-gap: var(--space-3); }
.eg-tabs__tab { white-space: nowrap; }
@media (max-width: 600px) { .tabela .col-celular { display: none; } }

/* WCAG 2.2 AA (piso do guia de UX da Elegant Garden): branco sobre Capuchinha dá 3,29:1 e
   Capuchinha sobre branco também. Mantém as cores de fundo da marca e troca só a cor do texto:
   - botão primário e badge de destaque em repouso: Eclipse sobre Capuchinha (5,9:1);
   - hover e clique do botão (fundo Crisântemo e #A81E01): texto branco (5,79:1 ou mais);
   - links e sobretítulos no tema claro: Crisântemo sobre branco (5,79:1); no escuro, Calêndula (6,52:1).
   Para voltar ao visual original do design system, apague este bloco. */
:root { --text-on-accent: var(--eg-eclipse); }
:root:not([data-theme="dark"]) { --text-accent: var(--eg-crisantemo); }
:root:not([data-theme="dark"]) .eg-btn--primary:hover,
:root:not([data-theme="dark"]) .eg-btn--primary:active { color: var(--eg-white); }

/* Alvos (UX-7.1): 44 px fora das tabelas; nas linhas de tabela vale a exceção de 36 px. */
.eg-btn--sm { min-height: var(--target-min); }
.tabela .eg-btn--sm { min-height: var(--target-denso); }
.eg-tabs__tab { min-height: var(--target-min); }

/* Dica da busca numa linha própria, abaixo dos filtros (A-10). */
.filtros__dica { margin: calc(-1 * var(--space-3)) 0 0; font-size: var(--fs-caption); color: var(--text-secondary); }
.eg-switch, .eg-choice { min-height: var(--target-min); }
.eg-choice { padding-block: var(--space-2); }
.migalha a, .link-acao { display: inline-flex; align-items: center; min-height: var(--target-min); }

/* Cupons: botões com cara de link (abrir cupom, voltar dentro da aba) e lista de códigos do lote. */
.link-botao, .voltar--botao { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--text-accent); cursor: pointer; text-align: left; }
.link-botao { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.voltar--botao { font-size: var(--fs-body-sm); font-weight: 600; }
.link-botao:hover, .voltar--botao:hover { color: var(--state-accent-hover); }
.lote__lista { width: 100%; resize: vertical; }

/* Página de checkout no cadastro do produto (seção 17.1) */
.grupo { border: 0; border-top: var(--border-hairline) solid var(--border-subtle); margin: 0; padding: var(--space-5) 0 0; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
/* A legenda flutuante sai da borda do fieldset e fica abaixo da linha, como os títulos de seção. */
.grupo__titulo { float: left; width: 100%; padding: 0; font-size: var(--fs-heading-4); font-weight: 600; letter-spacing: var(--ls-heading); line-height: var(--lh-tight); }
.lista-simples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); overflow-wrap: anywhere; }
.logo-previa { max-height: 48px; max-width: 200px; object-fit: contain; border: var(--border-hairline) solid var(--border-subtle); background: var(--surface-page); padding: var(--space-1); }
.eg-control[type=file] { padding-block: var(--space-2); min-height: var(--target-min); }

.eg-control[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: var(--space-3); padding: var(--space-1) var(--space-3); border: var(--border-rule) solid var(--border-strong); background: transparent; color: inherit; cursor: pointer; }
/* hidden vale mesmo em componentes com display próprio (o Descartar aparece só com alterações). */
[hidden] { display: none !important; }