/* Arkana ACE · portal do cliente
   Tokens e componentes do design system Arkana, os mesmos do site institucional
   (site-arkana/assets/css/style.css). Sem sombras e sem degradês. */

:root {
  --propulsao: #047af5;
  --profundidade: #152149;
  --caminho-puro: #ecf0f1;
  --momento: #18dfda;
  --branco: #ffffff;

  --ink: var(--profundidade);
  --ink-muted: rgba(21, 33, 73, 0.72);
  --ink-inv: var(--caminho-puro);
  --ink-inv-muted: rgba(236, 240, 241, 0.72);
  --link: #0366d6;
  --line: rgba(21, 33, 73, 0.24);
  --line-inv: rgba(236, 240, 241, 0.24);
  --line-strong: rgba(21, 33, 73, 0.56);
  --raised-inv: #222d53;
  --tint: #d6e8fd;
  --neutro: #dde3e6;
  --erro: #b42318;
  --erro-fundo: #fdecea;
  --sucesso: #146c43;
  --sucesso-fundo: #e3f4ea;
  --alerta-fundo: #fff4d6;
  --alerta-ink: #6b4a00;

  --font-display: "Clash Grotesk", "Geologica", system-ui, sans-serif;
  --font-text: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-xl: 48px;

  --wrap: 1200px;
  --gutter: clamp(16px, 5vw, 48px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--caminho-puro); color: var(--ink);
  font-family: var(--font-text); font-size: 16px; line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
.dark a { color: var(--momento); }
.dark a:hover { color: var(--caminho-puro); }
h1, h2, h3, .display {
  font-family: var(--font-display); font-variant-ligatures: none;
  font-weight: 500; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(36px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.01em; }
p { margin: 0; }
.eyebrow {
  font-family: var(--font-display); font-variant-ligatures: none;
  font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--link); margin: 0 0 var(--space-3);
}
.dark .eyebrow { color: var(--momento); }
.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; font-weight: 300; max-width: 62ch; color: var(--ink-muted); }
.dark .lead { color: var(--ink-inv-muted); }
.dark { background: var(--profundidade); color: var(--ink-inv); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--estreito { max-width: calc(820px + 2 * var(--gutter)); }
.wrap--medio { max-width: calc(980px + 2 * var(--gutter)); }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icone--acento { color: var(--propulsao); }
.dark .icone--acento { color: var(--momento); }

:focus-visible { outline: 2px solid var(--propulsao); outline-offset: 2px; }
.dark :focus-visible { outline-color: var(--momento); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--branco); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.faixa-prototipo {
  background: var(--momento); color: var(--profundidade);
  font-size: 13px; line-height: 18px; text-align: center; padding: 6px var(--gutter);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: 500 16px/20px var(--font-text); text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn .icone { width: 18px; height: 18px; }
.btn--primario { background: var(--profundidade); color: var(--caminho-puro); }
.btn--primario:hover { background: #0e1736; color: var(--caminho-puro); }
.dark .btn--primario { background: var(--momento); color: var(--profundidade); }
.dark .btn--primario:hover { background: #4be8e4; color: var(--profundidade); }
.btn--contorno { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--contorno:hover { border-color: var(--ink); color: var(--ink); }
.dark .btn--contorno { border-color: rgba(236,240,241,.56); color: var(--caminho-puro); }
.btn--largo { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.link-botao {
  background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
  font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 3px;
}
.link-botao[disabled] { color: var(--ink-muted); text-decoration: none; cursor: default; }
.link-seta { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 500; text-decoration: none; }
.link-seta .icone { width: 18px; height: 18px; }
.link-seta:hover { text-decoration: underline; }
.voltar { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-top: var(--space-6); text-decoration: none; font-weight: 500; }
.voltar .icone { width: 18px; height: 18px; }

/* ---------- Cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--profundidade); border-bottom: 1px solid var(--line-inv); }
.topo .wrap { display: flex; align-items: center; gap: var(--space-8); min-height: 72px; }
.topo__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: none; }
.topo__logo img { height: 26px; width: auto; }
.topo__produto {
  font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500;
  font-size: 15px; line-height: 20px; letter-spacing: .04em; color: var(--momento);
  padding-left: var(--space-3); border-left: 1px solid var(--line-inv);
}
.dark .topo__logo:hover .topo__produto, .topo__logo:hover .topo__produto { color: var(--momento); }
.topo nav { display: flex; align-items: center; gap: var(--space-8); flex: 1; min-width: 0; }
.topo nav ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.topo nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-inv); text-decoration: none; font-size: 15px; border-bottom: 2px solid transparent; }
.topo nav a:hover { color: var(--momento); }
.topo nav a[aria-current="page"] { color: var(--momento); border-bottom-color: var(--momento); }
.topo__conta { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.topo__email { color: var(--ink-inv-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.topo__conta form { margin: 0; }
.topo__sair {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2);
  background: none; border: 0; color: var(--ink-inv); font: 400 15px/20px var(--font-text); cursor: pointer;
}
.topo__sair .icone { width: 18px; height: 18px; }
.topo__sair:hover { color: var(--momento); }
.topo__acao { flex: none; }
.topo__menu { display: none; width: 44px; height: 44px; border: 1px solid var(--line-inv); border-radius: var(--radius-md); background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; flex: none; }
.topo__menu span { display: block; width: 18px; height: 2px; background: var(--caminho-puro); transition: transform .15s ease, opacity .15s ease; }
.topo--aberto .topo__menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo--aberto .topo__menu span:nth-child(2) { opacity: 0; }
.topo--aberto .topo__menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1060px) {
  .topo .wrap { gap: var(--space-3); }
  .topo__acao { margin-left: auto; }
  .area-admin .topo__menu { margin-left: auto; }
  .topo__menu { display: inline-flex; }
  .topo nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--profundidade); border-bottom: 1px solid var(--line-inv); flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--gutter) var(--space-6); }
  .topo--aberto nav { display: flex; }
  .topo nav ul { flex-direction: column; gap: 0; }
  .topo nav a { display: flex; padding: var(--space-3) 0; font-size: 17px; border-bottom: 1px solid var(--line-inv); }
  .topo nav a[aria-current="page"] { border-bottom-color: var(--line-inv); }
  .topo__conta { margin: var(--space-4) 0 0; justify-content: space-between; }
}
@media (max-width: 480px) {
  .topo__logo img { height: 22px; }
  .topo__produto { font-size: 13px; padding-left: var(--space-2); }
  .topo__acao { padding: 10px 14px; font-size: 15px; }
  .topo__acao .icone { display: none; }
}
@media (prefers-reduced-motion: reduce) { .topo__menu span, .btn { transition: none; } }

/* ---------- Página ---------- */
.pagina { flex: 1; min-width: 0; width: 100%; padding-bottom: var(--space-16); }
.pagina__cabeca {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-12) 0 var(--space-8);
}
.pagina__cabeca .lead { margin-top: var(--space-4); }
.pagina__cabeca--ticket { align-items: flex-start; padding-top: var(--space-6); }
.titulo-ticket { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; max-width: 28ch; }
.secao-portal { margin-top: var(--space-12); }
.secao-portal__titulo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; margin-bottom: var(--space-6); }
.secao-portal__titulo .icone { width: 24px; height: 24px; }
.secao-portal__texto { color: var(--ink-muted); max-width: 70ch; margin: calc(-1 * var(--space-3)) 0 var(--space-6); }
.nota { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-4); font-size: 14px; line-height: 22px; color: var(--ink-muted); max-width: 80ch; }
.nota .icone { width: 18px; height: 18px; margin-top: 2px; }
.destaque-frase { margin-top: var(--space-8); font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--propulsao); }
.contador { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 500; background: var(--branco); border: 1px solid var(--line); border-radius: 0 var(--radius-sm) 0 0; padding: 2px 10px; color: var(--ink); }

/* ---------- Grades ---------- */
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 960px) { .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grade-2, .grade-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cartões ---------- */
.cartao {
  background: var(--branco); border-radius: var(--radius-lg);
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4);
}
.cartao + .cartao, .cartao + .aviso, .aviso + .cartao { margin-top: var(--space-6); }
.cartao--compacto { padding: var(--space-6); }
.grade-2 > *, .grade-3 > *, .plano-topo > * { margin-top: 0 !important; }
.cartao--escuro { background: var(--profundidade); color: var(--ink-inv); }
.cartao__cabeca { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.cartao__titulo { display: flex; align-items: center; gap: var(--space-2); font-size: 22px; line-height: 28px; font-weight: 600; }
.cartao__subtitulo { font-size: 20px; line-height: 26px; font-weight: 600; }
.cartao__texto { color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.cartao--escuro .cartao__texto { color: var(--ink-inv-muted); }
.cartao__icone { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--caminho-puro); display: grid; place-items: center; color: var(--propulsao); }
.cartao__icone .icone { width: 24px; height: 24px; }
@media (max-width: 620px) { .cartao { padding: var(--space-6); } }

.lista-marcador { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 15px; line-height: 23px; }
.lista-marcador li { position: relative; padding-left: var(--space-4); }
.lista-marcador li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--propulsao); border-radius: 0 3px 0 0; }
.dark .lista-marcador li::before { background: var(--momento); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--caminho-puro); border-radius: 0 var(--radius-sm) 0 0; padding: 4px 10px; font-size: 14px; line-height: 20px; }
.chips--removiveis .chip { padding-right: 2px; }
.chips--removiveis .chip button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; color: var(--ink-muted); cursor: pointer; border-radius: var(--radius-sm); }
.chips--removiveis .chip button:hover { color: var(--erro); }
.chips--removiveis .chip .icone { width: 16px; height: 16px; }
.chips--removiveis .chip form { display: contents; }

/* ---------- Painel ---------- */
.painel { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-8); align-items: start; }
.painel__principal { display: flex; flex-direction: column; gap: var(--space-6); }
.painel__principal > .cartao + .cartao { margin-top: 0; }
.painel__lateral { display: flex; flex-direction: column; gap: var(--space-6); }
.painel__lateral > .cartao + .cartao, .painel__lateral > .cartao + .aviso { margin-top: 0; }
.painel__rotulo { margin-bottom: calc(-1 * var(--space-3)); }
@media (max-width: 960px) { .painel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Medidor de créditos ---------- */
.medidor__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.medidor__titulo { font-size: 22px; line-height: 28px; font-weight: 600; }
.medidor__periodo { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); background: var(--caminho-puro); padding: 6px 12px; border-radius: 0 var(--radius-sm) 0 0; }
.medidor__periodo .icone { width: 16px; height: 16px; }
.medidor__saldo { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.medidor__numero { font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500; font-size: clamp(64px, 8vw, 96px); line-height: .9; color: var(--propulsao); letter-spacing: -0.02em; }
.medidor__unidade { font-size: 18px; color: var(--ink-muted); }
.medidor__barra { width: 100%; height: 16px; border-radius: 0 8px 0 0; overflow: hidden; }
.medidor__trilho { fill: var(--propulsao); }
.medidor__consumido { fill: var(--profundidade); }
.medidor__divisa { fill: var(--branco); }
.medidor__legenda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.medidor__legenda div { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.medidor__legenda dt { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.medidor__legenda dd { margin: var(--space-1) 0 0; font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500; font-size: 28px; line-height: 32px; }
.marcador { width: 10px; height: 10px; border-radius: 0 3px 0 0; flex: none; }
.marcador--consumido { background: var(--profundidade); }
.marcador--saldo { background: var(--propulsao); }
.medidor__nota { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 620px) { .medidor__legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Plano ---------- */
.cartao-plano { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); border-radius: 0 var(--radius-xl) 0 0; }
.cartao-plano--marca { background: var(--propulsao); color: var(--branco); }
.cartao-plano--escuro { background: var(--profundidade); color: var(--ink-inv); }
.cartao-plano .eyebrow { margin-bottom: 0; }
.selo-recomendado {
  align-self: flex-start; background: var(--profundidade); color: var(--momento);
  font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500;
  font-size: 12px; line-height: 16px; letter-spacing: .08em; padding: 6px 10px; border-radius: 0 var(--radius-sm) 0 0;
}
.cartao-plano__nome { font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500; font-size: 40px; line-height: 1.05; margin-top: var(--space-2); }
.cartao-plano__creditos { font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500; font-size: 24px; line-height: 30px; }
.cartao-plano__numero { display: block; font-size: 56px; line-height: 1; margin-bottom: var(--space-1); }
.cartao-plano--escuro .cartao-plano__numero { color: var(--momento); }
.plano-topo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); align-items: stretch; margin-top: 0; }
.plano-topo .cartao-plano { justify-content: flex-end; min-height: 240px; }
@media (max-width: 860px) { .plano-topo { grid-template-columns: minmax(0, 1fr); } .plano-topo .cartao-plano { min-height: 0; } }

.regras { margin: 0; display: grid; gap: 0; }
.regras div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.regras div:last-child { border-bottom: 0; }
.regras dt { flex: 1 1 auto; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.regras dd { flex: 0 1 55%; margin: 0; text-align: right; font-weight: 500; font-size: 15px; line-height: 22px; }
.regras--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.regras--duas div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
@media (max-width: 620px) { .regras--duas { grid-template-columns: minmax(0, 1fr); } .regras--duas div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); } }
.regras__nota { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.regras__subtitulo { font-size: 16px; line-height: 22px; font-weight: 600; margin-top: var(--space-2); }

/* ---------- Avisos e alertas ---------- */
.aviso { display: flex; gap: var(--space-4); align-items: flex-start; border-radius: 0 var(--radius-lg) 0 0; padding: var(--space-6); font-size: 15px; line-height: 23px; }
.aviso p + p { margin-top: var(--space-1); }
.aviso__icone { width: 24px; height: 24px; margin-top: 2px; }
.aviso__titulo { font-weight: 500; }
.aviso--fabricante { background: var(--profundidade); color: var(--ink-inv); }
.aviso--fabricante .aviso__icone { color: var(--momento); }
.aviso--fabricante p:not(.aviso__titulo) { color: var(--ink-inv-muted); }
.aviso--compacto { padding: var(--space-6); font-size: 14px; line-height: 21px; }
.aviso--info { background: var(--branco); border: 1px solid var(--propulsao); margin-bottom: var(--space-8); }
.aviso--info .aviso__icone { color: var(--propulsao); }
.aviso--alerta { background: var(--alerta-fundo); color: var(--alerta-ink); margin-bottom: var(--space-6); }
.alerta { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 15px; line-height: 22px; }
.alerta .icone { margin-top: 1px; }
.alerta--erro { background: var(--erro-fundo); color: var(--erro); }
.alerta--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }

/* ---------- Aprovações ---------- */
.aprovacoes { border-radius: 0 var(--radius-xl) 0 0; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.aprovacoes h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.aprovacoes .eyebrow { margin: 0; }
.aprovacoes__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-inv); }
.aprovacoes__lista a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--line-inv); text-decoration: none; color: var(--caminho-puro); min-height: 44px; }
.aprovacoes__lista a:hover .aprovacoes__titulo { color: var(--momento); text-decoration: underline; }
.aprovacoes__numero { color: var(--ink-inv-muted); font-size: 14px; }
.aprovacoes__creditos { font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500; font-size: 20px; color: var(--momento); white-space: nowrap; }
.aprovacoes__como { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--ink-inv-muted); }
.aprovacoes__como .icone { width: 18px; height: 18px; margin-top: 2px; color: var(--momento); }
.aprovacoes--ticket { margin-bottom: var(--space-6); }
.aprovacoes__grande { font-size: 64px; line-height: 1; color: var(--momento); }
.aprovacoes__saldo { color: var(--ink-inv-muted); font-size: 15px; }
@media (max-width: 620px) { .aprovacoes { padding: var(--space-6); } .aprovacoes__lista a { grid-template-columns: minmax(0, 1fr) auto; } .aprovacoes__numero { grid-column: 1 / -1; } }

.destaque-aprovacao { background: var(--branco); border-radius: 0 var(--radius-xl) var(--radius-lg) var(--radius-lg); padding: var(--space-8); border-top: 4px solid var(--propulsao); }
.destaque-aprovacao .secao-portal__titulo { margin-bottom: var(--space-4); }
.destaque-aprovacao .secao-portal__texto { margin: 0 0 var(--space-4); }
@media (max-width: 620px) { .destaque-aprovacao { padding: var(--space-6); } }

/* ---------- Selos de status ---------- */
.selo { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; border-radius: 0 var(--radius-sm) 0 0; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.selo__marca { width: 8px; height: 8px; border-radius: 0 3px 0 0; flex: none; }
.selo--recebido { background: var(--caminho-puro); color: var(--ink); border-color: var(--line); }
.selo--recebido .selo__marca { background: var(--line-strong); }
.selo--triagem { background: var(--caminho-puro); color: var(--ink); border-color: var(--line); }
.selo--triagem .selo__marca { background: var(--ink); }
.selo--aprovacao { background: var(--profundidade); color: var(--momento); }
.selo--aprovacao .selo__marca { background: var(--momento); }
.selo--execucao { background: var(--tint); color: var(--ink); }
.selo--execucao .selo__marca { background: var(--propulsao); }
.selo--concluido { background: var(--branco); color: var(--ink-muted); border-color: var(--line); }
.selo--concluido .selo__marca { background: var(--ink-muted); border-radius: 50%; }

/* ---------- Lista de tickets ---------- */
.tickets { list-style: none; margin: 0; padding: 0; }
.ticket { border-top: 1px solid var(--line); }
.ticket:last-child { border-bottom: 1px solid var(--line); }
.cartao .ticket:last-child, .destaque-aprovacao .ticket:last-child { border-bottom: 0; }
.ticket__link {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "num titulo status" "num meta status";
  gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-4) 0; color: var(--ink); text-decoration: none; min-height: 44px;
}
.ticket__link:hover .ticket__titulo { color: var(--link); text-decoration: underline; }
.ticket__numero { grid-area: num; font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500; font-size: 18px; color: var(--ink-muted); }
.ticket__titulo { grid-area: titulo; font-weight: 500; }
.ticket__status { grid-area: status; justify-self: end; }
.ticket__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.tickets--cartao { background: var(--branco); border-radius: var(--radius-lg); padding: 0 var(--space-8); }
.tickets--cartao .ticket:first-child { border-top: 0; }
.tickets--cartao .ticket:last-child { border-bottom: 0; }
@media (max-width: 680px) {
  .ticket__link { grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "titulo" "meta" "status"; gap: var(--space-1); }
  .ticket__status { justify-self: start; margin-top: var(--space-2); }
  .ticket__numero { font-size: 15px; }
  .tickets--cartao { padding: 0 var(--space-6); }
}

/* ---------- Filtros ---------- */
.filtros-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); background: var(--branco); border-radius: var(--radius-lg); padding: var(--space-6); }
.campo--inline { min-width: 180px; flex: 1 1 180px; max-width: 280px; }
@media (max-width: 620px) { .campo--inline { max-width: none; } .filtros-barra .btn { width: 100%; } }

/* ---------- Ficha do ticket ---------- */
.ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); }
.ficha div { background: var(--branco); border-radius: 0 var(--radius-md) 0 0; padding: var(--space-4); }
.ficha dt { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ficha dd { margin: var(--space-1) 0 0; font-weight: 500; }
@media (max-width: 760px) { .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.descricao { font-size: 16px; line-height: 27px; overflow-wrap: anywhere; max-width: 72ch; }

/* ---------- Formulários ---------- */
.formulario { display: flex; flex-direction: column; gap: var(--space-6); }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 680px) { .campos-2 { grid-template-columns: minmax(0, 1fr); } }
.campos-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 760px) { .campos-3 { grid-template-columns: minmax(0, 1fr); } }
.campo { display: flex; flex-direction: column; gap: var(--space-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.campo__rotulo { font-weight: 500; font-size: 15px; line-height: 22px; padding: 0; }
.campo__entrada {
  width: 100%; min-height: 48px; padding: 11px 14px; font: 400 16px/24px var(--font-text); color: var(--ink);
  background: var(--branco); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.campo__entrada::placeholder { color: rgba(21, 33, 73, 0.66); }
.campo__entrada:hover { border-color: var(--ink); }
.campo__entrada:focus-visible { outline: 2px solid var(--propulsao); outline-offset: 0; border-color: var(--propulsao); }
textarea.campo__entrada { resize: vertical; min-height: 140px; }
select.campo__entrada { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152149' 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 12px center; background-size: 18px; }
select.campo__entrada:disabled, .campo__entrada:disabled { background-color: var(--caminho-puro); color: var(--ink-muted); cursor: not-allowed; }
.campo__entrada--codigo { font-family: var(--font-display); font-variant-ligatures: none; font-size: 32px; line-height: 40px; letter-spacing: .35em; text-align: center; min-height: 64px; }
.campo__ajuda { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.campo__erro { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--erro); font-weight: 500; }
.campo__erro .icone { width: 18px; height: 18px; margin-top: 2px; }
.campo--erro .campo__entrada { border-color: var(--erro); border-width: 2px; padding: 10px 13px; }
.campo--erro .campo__rotulo { color: var(--erro); }
.campo__grupo { display: flex; gap: var(--space-2); }
.campo__grupo .campo__entrada { flex: 1; min-width: 0; }
@media (max-width: 480px) { .campo__grupo { flex-direction: column; } }
.opcoes { display: flex; flex-direction: column; gap: var(--space-2); }
.opcoes--grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.opcao { display: flex; gap: var(--space-3); align-items: center; min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: var(--branco); }
.opcao:hover { border-color: var(--line-strong); }
.opcao input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--profundidade); }
.opcao:has(input:checked) { border-color: var(--profundidade); background: var(--caminho-puro); }
.campo--erro .opcao { border-color: var(--erro); }
.formulario__rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); }
.formulario__rodape--fixo { justify-content: flex-end; }
.formulario__solicitante { display: flex; gap: var(--space-2); align-items: center; color: var(--ink-muted); font-size: 15px; }
.resumo-erros { background: var(--erro-fundo); border-left: 0; border-radius: 0 var(--radius-lg) 0 0; padding: var(--space-6); margin-bottom: var(--space-6); color: var(--erro); }
.resumo-erros__titulo { display: flex; gap: var(--space-2); align-items: center; font-weight: 600; }
.resumo-erros ul { margin: var(--space-3) 0 0; padding-left: var(--space-8); }
.resumo-erros a { color: var(--erro); }
.bloco-form { border: 0; margin: 0; min-width: 0; }
.bloco-form__titulo { float: left; width: 100%; padding: 0; font-family: var(--font-display); font-variant-ligatures: none; font-size: 22px; line-height: 28px; font-weight: 600; margin-bottom: var(--space-2); }
.bloco-form__titulo + * { clear: both; }
.formulario .bloco-form + .bloco-form { margin-top: 0; }

/* ---------- Sucesso ---------- */
.sucesso { padding: var(--space-12) 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.sucesso__icone { width: 64px; height: 64px; border-radius: 0 var(--radius-md) 0 0; background: var(--profundidade); color: var(--momento); display: grid; place-items: center; margin-bottom: var(--space-3); }
.sucesso__icone .icone { width: 32px; height: 32px; }
.sucesso .eyebrow { margin: 0; }
.passos { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-3); }
.passos li::marker { font-family: var(--font-display); font-weight: 500; color: var(--propulsao); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- Estado vazio ---------- */
.vazio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6) 0; }
.vazio__icone { width: 56px; height: 56px; border-radius: 0 var(--radius-md) 0 0; background: var(--caminho-puro); color: var(--propulsao); display: grid; place-items: center; }
.vazio__icone .icone { width: 28px; height: 28px; }
.vazio__titulo { font-size: 20px; line-height: 26px; font-weight: 600; }
.vazio__texto { color: var(--ink-muted); max-width: 56ch; }
.vazio .btn { margin-top: var(--space-2); }

/* ---------- Catálogo ---------- */
.catalogo__filtros { background: var(--branco); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.filtro__rotulo { font-weight: 500; font-size: 14px; margin-bottom: var(--space-2); }
.filtro__opcoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-filtro { min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: 0 var(--radius-md) 0 0; background: var(--branco); color: var(--ink); font: 400 15px/20px var(--font-text); cursor: pointer; }
.chip-filtro:hover { border-color: var(--ink); }
.chip-filtro[aria-pressed="true"] { background: var(--profundidade); border-color: var(--profundidade); color: var(--caminho-puro); }
.catalogo__contagem { font-size: 14px; color: var(--ink-muted); }
.catalogo__legenda { display: flex; flex-wrap: wrap; gap: var(--space-6); font-size: 13px; color: var(--ink-muted); margin-bottom: var(--space-4); }
.catalogo__legenda > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.catalogo__grupo { margin-bottom: var(--space-8); }
.catalogo__grupo-titulo { font-size: 24px; line-height: 30px; margin-bottom: var(--space-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.catalogo__grupo-titulo span { font-family: var(--font-text); font-size: 15px; font-weight: 400; color: var(--ink-muted); }
.servicos { list-style: none; margin: 0; padding: 0 var(--space-8); background: var(--branco); border-radius: var(--radius-lg); }
.servico { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.servico:first-child { border-top: 0; }
.servico[hidden] { display: none; }
.servico__nome { font-size: 20px; line-height: 26px; font-weight: 500; }
.servico__descricao { color: var(--ink-muted); font-size: 15px; line-height: 23px; margin-top: var(--space-1); }
.servico__tags { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 13px; line-height: 18px; }
.servico__tags li { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--caminho-puro); padding: 3px 8px; border-radius: 0 var(--radius-sm) 0 0; }
.servico__tags .icone { width: 14px; height: 14px; }
.servico__tag-access { background: var(--profundidade) !important; color: var(--momento); }
.servico__tag-fora { color: var(--ink-muted); }
@media (max-width: 680px) { .servicos { padding: 0 var(--space-6); } .servico { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }

.creditos { display: inline-flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.creditos__quadros { display: inline-flex; gap: 4px; }
.creditos__q { display: inline-block; width: 14px; height: 14px; border-radius: 0 4px 0 0; background: var(--neutro); }
.creditos__q--base { background: var(--propulsao); }
.creditos__q--faixa { background: var(--branco); border: 2px solid var(--propulsao); }
.creditos__texto { font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500; font-size: 18px; min-width: 96px; }

.grade-tecnologias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.tecnologia { background: var(--profundidade); color: var(--ink-inv); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.tecnologia__dominio { font-family: var(--font-display); font-variant-ligatures: none; font-size: 12px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--momento); }
.tecnologia__nome { font-size: 26px; line-height: 30px; }
.tecnologia__temas { font-size: 14px; line-height: 22px; color: var(--ink-inv-muted); }
.tecnologia__contratada { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; padding-top: var(--space-2); font-size: 13px; color: var(--momento); font-weight: 500; }
.tecnologia__contratada .icone { width: 16px; height: 16px; }
.tecnologia--contratada { border-radius: 0 var(--radius-xl) 0 0; }
@media (max-width: 1060px) { .grade-tecnologias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grade-tecnologias { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Tabelas ---------- */
.tabela-rolagem { position: relative; overflow-x: auto; background: var(--branco); border-radius: var(--radius-lg); }
.tabela-rolagem:focus-visible { outline-offset: 2px; }
.tabela { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.tabela th, .tabela td { text-align: left; padding: var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela thead th { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); background: var(--branco); white-space: nowrap; }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.tabela tbody th { font-weight: 500; }
.tabela th:first-child, .tabela td:first-child { padding-left: var(--space-6); }
.tabela th:last-child, .tabela td:last-child { padding-right: var(--space-6); }
.tabela__num { text-align: right !important; font-variant-numeric: tabular-nums; }
.tabela__mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela__acoes { text-align: right !important; white-space: nowrap; }
.tabela__acoes a, .tabela__acoes .link-botao { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; }
.tabela tbody th a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; }
.tabela--compacta th, .tabela--compacta td { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.tabela--planos { min-width: 760px; }
.tabela--planos thead th { font-family: var(--font-display); font-variant-ligatures: none; font-size: 18px; line-height: 24px; color: var(--ink); }
.tabela__atual { background: var(--tint) !important; }
.tabela thead .tabela__atual { border-radius: 0 var(--radius-md) 0 0; }
.tabela__linha-atual > * { background: var(--tint); }
.tag-atual { display: inline-block; vertical-align: middle; margin-left: var(--space-1); background: var(--profundidade); color: var(--momento); font: 500 11px/16px var(--font-text); letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 0 4px 0 0; }
.tag-inativo { display: inline-block; font-size: 12px; line-height: 16px; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 0 4px 0 0; color: var(--ink-muted); font-weight: 400; }
.texto-alerta { color: var(--alerta-ink); font-weight: 500; }
.estado { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.estado__marca { width: 8px; height: 8px; border-radius: 0 3px 0 0; }
.estado--ok .estado__marca { background: var(--sucesso); }
.estado--erro { color: var(--erro); }
.estado--erro .estado__marca { background: var(--erro); }
.estado--pendente .estado__marca, .estado--neutro .estado__marca { background: var(--line-strong); }

.grade-lancamentos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.grade-lancamentos > .cartao { margin-top: 0; }
.bloco-aviso { margin-bottom: var(--space-6); }
.novo-trimestre { margin-top: var(--space-6); }
.novo-trimestre > summary { cursor: pointer; list-style: none; }
.novo-trimestre > summary::-webkit-details-marker { display: none; }
.novo-trimestre > summary .icone { transition: transform .15s; }
.novo-trimestre[open] > summary .icone { transform: rotate(45deg); }
.secao-acesso { margin-top: var(--space-8); }
.novo-trimestre[open] > summary { margin-bottom: var(--space-4); }
@media (max-width: 960px) { .grade-lancamentos { grid-template-columns: minmax(0, 1fr); } .grade-lancamentos > .cartao { margin-top: 0; } }

/* ---------- Entrada ---------- */
.entrada { flex: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: 100vh; }
.faixa-prototipo + .entrada { min-height: calc(100vh - 30px); }
.entrada__marca { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 6vw, 88px); }
.entrada__marca-conteudo { position: relative; z-index: 1; max-width: 520px; }
.entrada__logo { height: 32px; width: auto; margin-bottom: clamp(48px, 10vh, 120px); }
.entrada__marca h1 { font-size: clamp(44px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.015em; margin-bottom: var(--space-6); }
.entrada__textura { width: min(100%, 560px); align-self: flex-end; margin: var(--space-12) calc(-1 * clamp(32px, 6vw, 88px)) calc(-1 * clamp(32px, 6vw, 88px)) 0; }
.entrada__painel { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 64px) var(--gutter); }
.entrada__cartao { width: 100%; max-width: 440px; background: var(--branco); border-radius: 0 var(--radius-xl) var(--radius-lg) var(--radius-lg); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: var(--space-6); }
.entrada__cartao h2 { font-size: 32px; line-height: 38px; }
.entrada__texto { color: var(--ink-muted); }
.entrada__texto strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.entrada__acoes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); }
.entrada__acoes form { margin: 0; }
.entrada__acoes a { display: inline-flex; align-items: center; min-height: 44px; }
.entrada__privacidade { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 13px; line-height: 20px; color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.entrada__privacidade .icone { width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 900px) {
  .entrada { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .entrada__marca { padding: var(--space-8) var(--gutter) var(--space-8); }
  .entrada__logo { margin-bottom: var(--space-8); height: 26px; }
  .entrada__marca h1 { font-size: 40px; margin-bottom: var(--space-3); }
  .entrada__textura { display: none; }
  .entrada__painel { align-items: flex-start; padding-top: var(--space-6); padding-bottom: var(--space-12); }
  .entrada__cartao { max-width: none; }
}

/* ---------- Erro ---------- */
.erro-pagina { flex: 1; display: flex; align-items: center; padding: var(--space-16) var(--gutter); }
.erro-pagina__conteudo { max-width: 640px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.erro-pagina .entrada__logo { margin-bottom: var(--space-8); }
.erro-pagina .btn { margin-top: var(--space-4); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--profundidade); color: var(--ink-inv-muted); font-size: 14px; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.rodape__marca { font-family: var(--font-display); font-variant-ligatures: none; font-weight: 500; color: var(--caminho-puro); font-size: 16px; }
.rodape__links { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); }
.rodape a { color: var(--caminho-puro); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.rodape a:hover { color: var(--momento); }