/* FURLONG LEDGER — sistema partilhado por todo o site.

   PALETA: sistema da designer. Os sete tokens abaixo sao a unica fonte de
   verdade; os nomes antigos (--ink, --brass, --pos, --neg) apontam para eles,
   por isso mudar aqui migra a pagina inteira.

   Contraste medido contra #0A0B0C:
     text-primary   17.56   (era 16.92)
     text-secondary  8.05   (era 5.24 — o "cinza em tudo" da revisao)
     positive       10.15   (era  9.55)
     negative        6.62   (era  6.20)
     primary        12.41   (era  8.20)
   Texto #0A0B0C sobre o amarelo do CTA: 12.41. Nenhuma combinacao abaixo de AA.

   SEMANTICA DA COR
     amarelo  = interaccao, estado seleccionado, acento de marca deliberado
     verde    = informacao financeira ou de estado positiva
     vermelho = informacao financeira negativa ou erro
     off-white= conteudo principal
     cinza    = conteudo genuinamente secundario, e mais nada

   TIPOGRAFIA
     Inter          = lingua e interface
     JetBrains Mono = numeros, datas, dados tabulares, metadados tecnicos
   Inter Tight foi removido a pedido da designer. */
:root{
  --color-primary:#F2C94C;
  --color-primary-hover:#FFD866;
  --color-accent-secondary:#C99F2E;
  --color-text-primary:#F2F2EF;
  --color-text-secondary:#A6A6A0;
  --color-positive:#4FD18B;
  --color-negative:#FD6161;

  --bg:#0A0B0C; --bg-2:#0D0F11; --surface:#121518; --surface-2:#171B1F;
  --hair:#1E2327; --hair-2:#2A3137;

  /* nomes antigos mapeados nos tokens acima */
  --ink:var(--color-text-primary);
  --ink-2:var(--color-text-secondary);
  --ink-3:var(--color-text-secondary);   /* era #7C858C: a democao a mais */
  --ink-4:#8A8A85;                       /* so o mais quieto: grelha, dicas */
  --brass:var(--color-primary);
  --brass-2:var(--color-accent-secondary);
  --pos:var(--color-positive);
  --neg:var(--color-negative);
  --sig:#6FA8DC;

  --display:'Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --data:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.4,0,.2,1);
}
/* Inter para lingua, JetBrains Mono para numeros. Uma regra, sem excepcoes. */
.font-ui{font-family:var(--body)}
.font-data{font-family:var(--data);font-variant-numeric:tabular-nums}
*{box-sizing:border-box}
/* O atributo hidden vem da folha do navegador com display:none e especificidade
   zero: QUALQUER display explicito o vence em silencio. Sem esta linha, um
   .auth-form[hidden] com display:grid continuava a aparecer, e na /live o
   bloqueio de pagamento e o palco do sinal podiam pintar ao mesmo tempo.
   Uma linha, e o atributo passa a significar o que toda a gente pensa que
   significa. */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:0}
h1{font-size:20px} h2{font-size:16px} h3{font-size:14px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kicker{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.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}

/* ---------- cabecalho e navegacao ---------- */
header{border-bottom:1px solid var(--hair);background:var(--bg-2);position:sticky;top:0;z-index:20}
.hwrap{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;
  gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto}
nav.tabs{display:flex;gap:4px}
nav.tabs a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  border-radius:8px;text-decoration:none;color:var(--ink-2);font-family:var(--display);
  font-size:14px;font-weight:500;transition:background .18s var(--ease-io),color .18s var(--ease-io)}
nav.tabs a:hover{background:var(--surface);color:var(--ink)}
nav.tabs a[aria-current="page"]{background:var(--surface-2);color:var(--brass)}
main{padding:20px 24px 72px;max-width:1240px;margin:0 auto}

/* ---------- superficies ---------- */
.panel{background:var(--surface);border:1px solid var(--hair);border-radius:10px;
  padding:16px 18px;margin-bottom:16px}
.grid{display:grid;gap:12px 14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.grid .wide{grid-column:span 2}
.bar{display:flex;gap:12px;align-items:center;flex-wrap:nowrap}
.bar select,.bar button{width:auto;flex:0 0 auto}
fieldset{border:0;border-top:1px solid var(--hair);margin:18px 0 0;padding:14px 0 0;min-width:0}
fieldset:first-of-type{border-top:0;margin-top:12px;padding-top:0}
legend{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);padding:0 0 8px}

/* ---------- controlos ---------- */
label{display:block;font-size:11px;color:var(--ink-2);margin-bottom:5px;
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
select,input[type=number],input[type=text],input[type=date]{background:var(--surface-2);
  color:var(--ink);border:1px solid var(--hair-2);border-radius:6px;padding:9px 10px;
  font-family:var(--mono);font-size:13px;width:100%;min-height:40px;
  transition:border-color .18s var(--ease-io)}
select:hover,input:hover{border-color:var(--ink-3)}
select:focus-visible,input:focus-visible,button:focus-visible,a:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
button{background:var(--surface-2);color:var(--ink);border:1px solid var(--hair-2);
  border-radius:6px;padding:0 16px;min-height:40px;font-family:var(--display);font-size:13px;
  font-weight:500;cursor:pointer;transition:border-color .18s var(--ease-io),color .18s var(--ease-io)}
button:hover{border-color:var(--brass);color:var(--brass)}
button.primary{background:var(--brass);color:#0A0B0C;border-color:var(--brass)}
button.primary:hover{opacity:.88;color:#0A0B0C}
button[disabled]{opacity:.4;cursor:default}
button.ghost{border-color:transparent;color:var(--ink-2);padding:0 10px}
button.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:transparent}
@media(pointer:coarse),(max-width:720px){
  select,input[type=number],input[type=text],input[type=date],input[type=range],
  button,nav.tabs a,.calgrid button.day{min-height:44px}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;
  animation-duration:.01ms !important}}

/* ---------- calendario ---------- */
.cal{background:var(--surface-2);border:1px solid var(--hair-2);border-radius:10px;padding:12px}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calhead .m{font-family:var(--display);font-weight:500;font-size:14px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.calgrid .dow{font-family:var(--mono);font-size:10px;color:var(--ink-3);text-align:center;
  padding:4px 0;text-transform:uppercase;letter-spacing:.06em}
.calgrid button.day{min-height:44px;padding:2px;border-radius:6px;border:1px solid transparent;
  background:transparent;color:var(--ink-3);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;font-family:var(--mono);font-size:13px}
.calgrid button.day .n{font-size:10px;color:var(--ink-3)}
.calgrid button.day.has{background:var(--surface);color:var(--ink);border-color:var(--hair-2)}
.calgrid button.day.has:hover{border-color:var(--brass);color:var(--brass)}
.calgrid button.day[disabled]{opacity:.28;cursor:default}
.calgrid button.day[aria-pressed="true"]{background:var(--brass);color:#0A0B0C;
  border-color:var(--brass)}
.calgrid button.day[aria-pressed="true"] .n{color:#0A0B0C;opacity:.75}

/* ---------- tabelas ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;padding:6px 8px;border-bottom:1px solid var(--hair-2);
  font-weight:500;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td{padding:7px 8px;border-bottom:1px solid var(--hair);text-align:right;white-space:nowrap}
/* As tabelas da pagina publica (.tbl) tratam do seu proprio hover ao nivel da
   LINHA, para a cor semantica das celulas sobreviver. Esta regra pintava a
   celula por cima e as duas competiam. */
table:not(.tbl) tbody tr:hover td{background:var(--surface-2)}
.scroll{max-height:340px;overflow:auto;border:1px solid var(--hair);border-radius:8px}
.scroll thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.scroll table{min-width:600px}
.scroll::-webkit-scrollbar{width:9px;height:9px}
.scroll::-webkit-scrollbar-track{background:var(--bg-2)}
.scroll::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:5px}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* ---------- indicadores ---------- */
.pos{color:var(--pos)} .neg{color:var(--neg)} .dim{color:var(--ink-3)}
.win{color:var(--brass);font-weight:500}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:3px 8px;
  border:1px solid var(--hair-2);border-radius:4px;color:var(--ink-2);display:inline-block}
.stat{background:var(--surface-2);border-radius:8px;padding:11px 14px;min-width:104px}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:4px}
.stat .v{font-family:var(--mono);font-size:19px;font-variant-numeric:tabular-nums}
.stat .s{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.35;
  font-family:var(--body);letter-spacing:0;text-transform:none}
.note{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.5}
.key{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:11px;
  color:var(--ink-2);margin:10px 0 0}
.key span{display:inline-flex;align-items:center;gap:6px}
.key i{width:16px;height:0;border-top-width:2px;border-top-style:solid;display:inline-block}
.key i.dot{width:9px;height:9px;border:0;border-radius:50%}
.empty{padding:34px 20px;text-align:center;color:var(--ink-3)}
.empty h3{color:var(--ink-2);margin-bottom:6px}
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:sh 1.2s infinite;border-radius:8px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
canvas{display:block;border-radius:6px;background:var(--bg-2)}
@media(max-width:720px){main{padding:16px 14px 56px}.hwrap{padding:10px 14px}
  .bar{flex-wrap:wrap}}

/* ═══════════════════════ BOTOES ═══════════════════════
   Tres niveis, dois tamanhos, um conjunto de estados. Nenhuma seccao inventa
   o seu proprio botao.

   PRIMARIO    accao principal de uma seccao. Amarelo cheio, texto quase preto.
   SECUNDARIO  accao importante mas nao principal. Contorno dourado sobre fundo
               transparente — le-se como botao SEM depender de hover, que e o
               que o telemovel exige.
   TERCIARIO   utilidade de baixa enfase. Só onde a accao e mesmo terciaria.

   REGRA DO HOVER: o hover REFINA o estado, nunca o substitui. Um primario
   continua amarelo; um secundario continua dourado. Nenhum botao pode passar a
   parecer de outro tipo ao ser apontado. */
:root{
  --btn-radius:6px;
  --btn-weight:500;
  --btn-tracking:.025em;
  --btn-lg-h:50px; --btn-lg-pad:26px; --btn-lg-size:15px;
  --btn-md-h:44px; --btn-md-pad:20px; --btn-md-size:14px;
  --btn-sm-h:38px; --btn-sm-pad:15px; --btn-sm-size:13px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--btn-md-h);padding:0 var(--btn-md-pad);
  border-radius:var(--btn-radius);border:1px solid transparent;
  font-family:var(--body);font-size:var(--btn-md-size);font-weight:var(--btn-weight);
  letter-spacing:var(--btn-tracking);line-height:1;text-decoration:none;
  white-space:nowrap;cursor:pointer;background:none;
  transition:background-color .16s var(--ease-io),border-color .16s var(--ease-io),
             color .16s var(--ease-io);
}
.btn--lg{min-height:var(--btn-lg-h);padding:0 var(--btn-lg-pad);font-size:var(--btn-lg-size)}
.btn--sm{min-height:var(--btn-sm-h);padding:0 var(--btn-sm-pad);font-size:var(--btn-sm-size)}

/* primario: amarelo cheio; ao hover fica MAIS amarelo, nunca cinzento */
.btn--primary{background:var(--color-primary);border-color:var(--color-primary);color:#0A0B0C}
.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}

/* secundario: contorno dourado visivel em repouso — e isto que o torna um botao
   num ecra sem rato. Ao hover o contorno fecha para o dourado cheio e ganha um
   fundo tenue da mesma cor: a identidade dourada mantem-se. */
.btn--secondary{background:transparent;border-color:rgba(201,159,46,.5);
  color:var(--color-text-primary)}
.btn--secondary:hover{border-color:var(--color-accent-secondary);
  background:rgba(201,159,46,.12)}

/* terciario: sem contentor. So para accoes mesmo de baixa enfase. */
.btn--tertiary{background:transparent;border-color:transparent;
  color:var(--color-text-secondary);padding:0 6px}
.btn--tertiary:hover{color:var(--color-text-primary)}

/* estados comuns a todos os tipos */
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
/* Num ecra tactil so o tamanho pequeno precisa de crescer: medio e grande ja
   passam os 44px. Clamar .btn inteiro achatava o grande a 44 e o sistema de
   tamanhos deixava de existir. */
@media(pointer:coarse){
  .btn--sm{min-height:44px;padding:0 16px}
}


/* ═══════════════════════ ESQUELETOS DE CARREGAMENTO ═══════════════════════
   REGRA UNICA: a barra substitui TEXTO, e mede-se em `em`.

   Foi de proposito que aqui nao ha altura em pixeis. A linha da tabela de
   sessoes mede 49px a 1280 e 73px num ecra estreito — um esqueleto com altura
   fixa trocava um salto de layout por outro. Medindo em `em`, a altura da
   linha continua a vir do mesmo line-height e do mesmo padding do conteudo
   real, e sai igual por construcao seja qual for a largura.

   Por isso tambem as linhas falsas usam as MESMAS classes das verdadeiras.
   Um <tr> de esqueleto e um <tr> a serio, so com barras dentro das celulas.

   SEM VARRIMENTO DE BRILHO. A regra de movimento excessivo diz para animar um
   ou dois elementos por ecra; um shimmer a atravessar trinta linhas ao mesmo
   tempo e o oposto disso. Aqui ha so uma respiracao lenta entre dois tons que
   ja existem no tema — #171B1F e #2A3137. Nada branco, nada a piscar. */
.sk{display:inline-block;vertical-align:-.08em;height:.72em;border-radius:2px;
  width:var(--skw,4em);max-width:100%;background:var(--surface-2);
  animation:sk-respira 2.6s var(--ease-io) infinite}
@keyframes sk-respira{0%,100%{background:var(--surface-2)}50%{background:var(--hair-2)}}
/* Uma barra e uma caixa atomica: nao quebra por dentro como texto quebra.
   Quando o conteudo real ocupa duas linhas, precisam de ser DUAS barras.

   E CADA UMA TEM DE OCUPAR UMA LINHA INTEIRA, nao a altura da tinta. Uma
   barra de .72em desenha o tamanho de uma letra; uma LINHA de texto ocupa o
   line-height, 1.5em. Duas barras davam 23px onde o texto real dava 39px, e a
   linha ficava 17px curta.

   O padding vertical estica a caixa ate 1.5em e o background-clip mantem a
   pintura so no meio — uma linha de altura certa com a espessura de antes. */
.sk--linha{display:block;box-sizing:content-box;height:.72em;
  padding:.39em 0;background-clip:content-box}

/* Blocos maiores (cartoes, graficos) em vez de linhas de texto. */
.sk-bloco{display:block;width:100%;border-radius:var(--btn-radius);
  background:var(--surface-2);animation:sk-respira 2.6s var(--ease-io) infinite}
/* A respiracao e decoracao: sem ela o esqueleto continua a fazer o trabalho,
   que e guardar o espaco. */
@media(prefers-reduced-motion:reduce){
  .sk,.sk-bloco{animation:none;background:var(--surface-2)}
}
/* Um leitor de ecra nao deve anunciar barras vazias. O contentor diz que esta
   ocupado; as barras nao existem para ele. */
[aria-busy="true"] .sk,[aria-busy="true"] .sk-bloco{pointer-events:none}