/* O ESTILO DO PAINEL DO PAYFLOW.

   Saiu do index.html no passo 6b (fase A) e passou ao desenho novo na parte 5
   do PLANO.md: o da Kingdom Library, em roxo, com cantos de 16 px, Google Sans
   e nada de maiúsculas de enfeite. A fonte das cores é o marca-cores.css; aqui
   dão-se esses valores aos nomes que o painel já usava (--bg, --card, --accent,
   --num...), para as regras e o JavaScript de sempre não terem de mudar de nome.

   Vem depois do entrada.css, que ainda serve o recuperar com o :root antigo:
   com a mesma especificidade, ganha este por ordem. */

/* O cabeçalho da página e o topo da navegação partilham a altura: é o que
   faz as duas linhas de baixo encontrarem-se, em vez de ficarem a discutir. */
:root{--topo:64px;
  --bg:#F5F3F0; --card:#FFFFFF; --card-2:#FBFAF8; --sunken:#F1EEEA;
  --ink:#1C1A17; --ink-2:#3B3732; --muted:#6F6962;
  /* Era #91918C, a 2,8:1 sobre branco: texto que não se lia. Passa a ser o
     mesmo cinzento do texto secundário. */
  --muted-2:#6F6962;
  --line:#E8E3DD; --line-2:#EFEBE6; --cruz:#D9D3CB;
  --accent:#842DE3; --accent-hi:#6413BE; --accent-soft:#F3ECFD; --accent-ink:#6A1FC0;
  --ok:#15803D; --ok-soft:#E3F6EA; --ok-ink:#0F7A37;
  --amber:#8A5B00; --amber-soft:#FFF4D9; --amber-dot:#D99A0B;
  --red:#D42A39; --red-soft:#FDE8EA; --red-ink:#B4202D;
  --sans:"Google Sans","Product Sans","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  /* A letra de máquina acabou nos números: o dinheiro lê-se em Google Sans com
     algarismos de largura fixa (tabular-nums). Fica só para códigos. */
  --num:var(--sans);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:16px; --r-s:10px; --r-dentro:12px;
  --cta:linear-gradient(180deg,#9338F2 0%,#7B26D7 100%);
  --cta-hover:linear-gradient(180deg,#9D47F5 0%,#842DE3 100%);
  --cta-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 6px 16px -4px rgba(100,19,190,.5);
  --card-bg:linear-gradient(180deg,#FFFFFF 0%,#FBFAF8 100%);
  --shadow-1:0 1px 2px rgba(28,22,16,.05),0 6px 18px -8px rgba(28,22,16,.10);
  --shadow-2:0 2px 6px rgba(28,22,16,.06),0 18px 40px -16px rgba(28,22,16,.22);
  --shadow-pop:0 12px 32px -8px rgba(28,22,16,.28),0 2px 8px rgba(28,22,16,.08);
  --ring:0 0 0 3px rgba(132,45,227,.30)}

body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-optical-sizing:auto; font-variation-settings:"GRAD" 0;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased}
.num{font-family:var(--num); font-variant-numeric:tabular-nums}

.app{display:grid; grid-template-columns:1fr; min-height:100vh}
@media(min-width:900px){ .app{grid-template-columns:232px 1fr; align-items:start} }

/* lateral */
.lado{background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column}
/* A navegação fica onde está: sem isto descia com a página e, num ecrã longo
   como o das Ofertas, deixava de haver por onde mudar de secção. */
/* A navegação fica onde está. NAO escrever outro "position" para .lado noutro
   sitio da folha: sticky ja e um elemento posicionado e ancora o que estiver
   dentro dele em absolute -- foi assim que o chevron do encolhido, ao pedir um
   position:relative escrito mais abaixo, mandou a barra inteira a rolar. */
@media(min-width:900px){ .lado{position:sticky; top:0; height:100svh; align-self:start} }
.lado-topo{display:flex; align-items:center; gap:10px; padding:0 20px; min-height:var(--topo);
  border-bottom:1px solid var(--line)}
.lado-topo b{font-weight:400; font-size:17.5px; display:block; line-height:1.15}
.menu{padding:10px; flex:1; overflow-y:auto}

.grupo-t{font-family:var(--num); font-size:12.5px;
  color:var(--muted-2); padding:16px 10px 6px}
.item{display:flex; align-items:center; gap:10px; width:100%; font:inherit; font-size:14px; font-weight:500;
  color:var(--muted); background:none; border:0; padding:9px 11px; border-radius:var(--r-s); cursor:pointer;
  text-align:left; white-space:nowrap}
.item:hover{background:var(--card-2); color:var(--ink)}
.item[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:500}
/* Os ícones são SVG de traço (os da maqueta da parte 5). Medem 1em, por isso o
   font-size de cada sítio continua a decidir o tamanho. */
svg.fi{width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-.15em}
.item .fi{font-size:18px; line-height:1; flex:none; color:var(--muted-2)}
.item:hover .fi{color:var(--muted)}
.item[aria-current="page"] .fi{color:var(--accent)}
.item .tag{margin-left:auto; font-family:var(--num); font-size:10.5px; color:var(--muted-2);
  background:var(--bg); border-radius:99px; padding:1px 7px}
.item[aria-current="page"] .tag{background:#FFF; color:var(--accent)}
.item:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.item{text-decoration:none}
.item .ext{margin-left:auto; opacity:.5; flex:none}
.item:hover .ext{opacity:.9}
.lado-pe{display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--line-2)}
/* overflow:hidden nao e enfeite: sem ele a fotografia entra aqui no tamanho
   natural e atravessa a pagina toda por cima do resto. */
.av{width:32px; height:32px; border-radius:50%; background:var(--ink); color:#FFF; display:grid; place-items:center;
  font-family:var(--num); font-size:12px; font-weight:500; flex:none; overflow:hidden}
.av img{width:100%; height:100%; object-fit:cover; display:block}
.lado-pe .n{font-size:13.5px; font-weight:500; line-height:1.3}
.lado-pe .e{font-size:11.5px; color:var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:126px}

/* conteúdo */
.principal{min-width:0; display:flex; flex-direction:column}
/* Fica onde está, com a cor da página por baixo: era branco e parecia uma
   segunda barra por cima da primeira. Só a linha os separa. */
.barra{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; padding:0 26px; min-height:var(--topo);
  border-bottom:1px solid var(--line); background:var(--bg)}
.barra h1{font-size:18px; font-weight:400; letter-spacing:-.01em; margin:0; margin-right:auto}
/* Sem tecto de largura: a grelha e as tabelas aproveitam o ecrã todo. Quem
   tem de continuar estreito é o texto corrido, e esse trava-se sozinho. */
.conteudo{padding:var(--s4) 26px 64px; width:100%}
.ecra[hidden]{display:none}

.cabeca{display:grid; gap:6px; margin-bottom:var(--s3); max-width:62ch}
.cabeca h2{font-size:clamp(22px,3.2vw,28px); font-weight:500; letter-spacing:-.035em; margin:0; line-height:1.15}
.cabeca p{margin:0; color:var(--muted); font-size:14.5px}

/* Era uma fita que se arrastava, e a lista "Mais turmas" ia no fim dela: com
   o rato parado no princípio, ficava cortada contra a margem. Passa a
   quebrar-se em linhas -- nada sai do ecrã e não há nada para arrastar. */
.subtabs{display:flex; gap:2px; align-items:center; flex-wrap:wrap;
  border-bottom:1px solid var(--line); margin-bottom:var(--s3)}
.subtabs button{font:inherit; font-size:13.5px; font-weight:500; color:var(--muted); background:none; border:0;
  border-bottom:2px solid transparent; padding:10px 13px; cursor:pointer; white-space:nowrap; margin-bottom:-1px}
.subtabs button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent); font-weight:500}
.subtabs .c{font-family:var(--num); font-size:11px; color:var(--muted-2); margin-left:6px;
  background:var(--bg); border-radius:99px; padding:1px 7px}
.subtabs button[aria-selected="true"] .c{background:var(--accent-soft); color:var(--accent)}
/* A lista das outras turmas e o mesmo menu que o do periodo -- so muda o
   lugar. Tinha 31px de altura dentro de uma fita de 44 e assentava 3px acima
   do centro, por causa de uma margem que compensava outra coisa qualquer. */
.subtabs .mais{margin-left:auto; align-self:center; flex:none; max-width:min(280px,100%)}

.cartao{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:var(--s3)}
.rotulo{font-family:var(--num); font-size:12.5px; color:var(--muted-2)}
.btn{font:inherit; font-weight:500; font-size:14px; border:1px solid var(--line); border-radius:99px;
  padding:9px 18px; cursor:pointer; background:var(--card); color:var(--ink)}
.btn:hover{border-color:var(--cruz)}
.btn-p{background:var(--accent); color:#FFF; border-color:var(--accent); font-weight:500}
.btn-p:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.btn-sm{padding:7px 14px; font-size:13px}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn:disabled{opacity:.45; cursor:not-allowed}

.pill{display:inline-flex; align-items:center; font-family:var(--num); font-size:12.5px; font-weight:500; padding:3px 10px; border-radius:99px; white-space:nowrap}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.pend{background:var(--amber-soft); color:var(--amber)}
.pill.mau{background:var(--red-soft); color:var(--red)}
.pill.neutro{background:var(--bg); color:var(--muted); border:1px solid var(--line)}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:var(--s3)}
.kpi{background:var(--card); padding:16px 17px; display:grid; gap:2px}
.kpi .v{font-family:var(--num); font-size:23px; font-weight:500; letter-spacing:-.025em; line-height:1.25}
.kpi .v.ok{color:var(--ok)} .kpi .v.warn{color:var(--amber)} .kpi .v.mau{color:var(--red)}
.kpi .l{font-family:var(--num); font-size:12.5px; color:var(--muted-2)}
.kpi .s{font-size:12px; color:var(--muted-2)}

.duas{display:grid; gap:var(--s2)}
/* A tabela tem min-width:540px e vive dentro de .tw, que a faz deslizar. Sem
   min-width:0 na coluna, era a coluna que crescia ate aos 540 e levava a
   pagina inteira de lado num telemovel de 390. */
.duas > div{min-width:0}
@media(min-width:920px){ .duas{grid-template-columns:1.55fr 1fr; align-items:start} }
.bloco-t{display:flex; align-items:baseline; gap:10px; margin-bottom:11px; flex-wrap:wrap}
.bloco-t h3{font-size:15px; font-weight:500; letter-spacing:-.02em; margin:0}
.bloco-t .c{font-family:var(--num); font-size:11.5px; color:var(--muted-2); margin-left:auto}

.tw{overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
table{border-collapse:collapse; width:100%; min-width:540px; font-size:14px}
th{text-align:left; font-family:var(--num); font-weight:500; font-size:12.5px; color:var(--muted-2); padding:11px 16px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:12px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--card-2)}
td.n{font-weight:500}
td.v,th.v{font-family:var(--num); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
th.v{font-family:var(--num)}
td .sub{font-size:12px; color:var(--muted-2); display:block; font-weight:400}

/* cartões de oferta */
.grelha{display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.oferta-c{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column}
/* A faixa do checkout, na mesma proporcao em que a pagina de pagamento a
   mostra: 2:1. Antes era uma caixa de 104px com as iniciais, e por isso nunca
   se via aqui a imagem que quem paga ve la. */
.capa{aspect-ratio:2/1; background:var(--card-2); border-bottom:1px solid var(--line-2); position:relative;
  display:grid; place-items:center; overflow:hidden}
.capa img{width:100%; height:100%; object-fit:cover; display:block}
.capa .ini{font-family:var(--num); font-size:31px; font-weight:500; color:var(--cruz); letter-spacing:-.02em}
.capa .medida{position:absolute; left:9px; right:48px; bottom:16px; text-align:center;
  font-family:var(--num); font-size:12.5px; color:var(--cruz)}
.capa .est{position:absolute; top:10px; right:10px}
/* O botao de trocar a imagem vive por cima dela. Com imagem, precisa de fundo
   proprio: por cima de uma arte clara um icone cinzento desaparece. */
.capa .trocar{position:absolute; right:9px; bottom:9px; width:30px; height:30px; border-radius:var(--r-s);
  background:var(--card); border:1px solid var(--line); color:var(--muted);
  display:grid; place-items:center; cursor:pointer; box-shadow:0 1px 3px rgba(10,10,10,.12)}
.capa .trocar:hover{border-color:var(--cruz); color:var(--ink)}
.capa .trocar input{position:absolute; inset:0; opacity:0; cursor:pointer}
.capa .trocar svg{width:15px; height:15px; display:block}
.capa .trocar:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.oferta-c .corpo{padding:16px 17px; display:grid; gap:11px; flex:1}
.oferta-c .nome{font-size:15px; font-weight:500; letter-spacing:-.022em; line-height:1.3}
.oferta-c .tipo{font-size:12.5px; color:var(--muted-2); margin-top:2px}
.preco{display:flex; align-items:baseline; gap:6px}
.preco .p{font-family:var(--num); font-size:25px; font-weight:500; letter-spacing:-.03em; line-height:1}
.preco .m{font-family:var(--num); font-size:12px; color:var(--muted-2)}
.cobr{font-size:12.5px; color:var(--muted)}
.mini{display:flex; gap:16px; padding-top:11px; border-top:1px solid var(--line-2); margin-top:auto}
.mini div{display:grid; gap:1px}
.mini .mv{font-family:var(--num); font-size:14px; font-weight:500}
.mini .ml{font-family:var(--num); font-size:12.5px; color:var(--muted-2)}
.oferta-c .pe{display:flex; gap:7px; padding:0 17px 16px; align-items:center}
/* Um so botao com escrita -- o que se faz a seguir. Os outros dois sao atalhos
   conhecidos e cabem num icone; tres botoes de texto lado a lado partiam-se em
   duas linhas e nenhum deles se lia primeiro. */
.oferta-c .pe .btn{flex:1; text-align:center; padding:8px 10px; font-size:13px}
.oferta-c .pe .icon-btn{flex:none}
/* Os metodos sao botoes e nao caixas de marcar: e uma escolha de varios entre
   poucos, e cada um mostra logo o nome por que quem paga o vai conhecer. */
.metodos-botoes{display:flex; gap:7px; flex-wrap:wrap}

/* listas */
.linha{display:grid; gap:9px; padding:14px 0; border-bottom:1px solid var(--line-2)}
@media(min-width:760px){ .linha{grid-template-columns:minmax(200px,1fr) 100px 108px 126px; align-items:center; gap:15px} }
.linha:last-child{border-bottom:0}
.quem .n{font-size:14.5px; font-weight:500; display:block}
.quem .d{font-size:12.5px; color:var(--muted-2); display:block}
.mont{font-family:var(--num); font-size:15px}
@media(min-width:760px){ .mont{text-align:right} .acao{display:flex; justify-content:flex-end} }
.acao{display:flex; gap:7px; align-items:center; flex-wrap:wrap}
/* Uma cobrança tem quatro botões, não três: 4x32 + 3x7 = 149, e a coluna de
   126 partia o último para a linha de baixo. A coluna é só desta lista -- as
   outras continuam alinhadas como estavam. */
@media(min-width:760px){
  #cb-lista .linha{grid-template-columns:minmax(200px,1fr) 100px 108px 156px}
  #cb-lista .acao{flex-wrap:nowrap; justify-content:flex-start}
}
/* O comprovativo e da inscricao inteira, nao desta parcela: fica junto ao
   nome, e nao na coluna do botao que confirma este pagamento. */
.quem .prova{display:flex; gap:7px; flex-wrap:wrap; margin-top:8px}
.btn-mau{color:var(--red)}
.btn-mau:hover{border-color:var(--red); background:var(--red-soft)}
.quem .d .recusado{color:var(--red); font-weight:500}
.barrinha{height:5px; border-radius:3px; background:var(--bg); border:1px solid var(--line-2); overflow:hidden}
.barrinha span{display:block; height:100%; background:var(--accent)}
.barrinha span.cheio{background:var(--ok)}
.atencao{display:grid; gap:11px}
.at{display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line-2)}
.at:last-child{border-bottom:0}
.at .pt{width:7px; height:7px; border-radius:50%; margin-top:7px; flex:none; background:var(--amber)}
.at .pt.mau{background:var(--red)}
.at .tx{flex:1; min-width:0; font-size:13.5px; line-height:1.5}
.at .tx b{font-weight:500}
.at .tx span{display:block; color:var(--muted-2); font-size:12.5px}

.convite{display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:13px 15px; margin-bottom:var(--s2);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); font-size:13.5px}
.convite input{appearance:none; -webkit-appearance:none; width:17px; height:17px; flex:none; margin:0;
  border:1.5px solid var(--cruz); border-radius:5px; background:var(--card); cursor:pointer; position:relative}
.convite input:checked{background:var(--accent); border-color:var(--accent)}
.convite input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #FFF; border-width:0 2px 2px 0; transform:rotate(43deg)}
.convite input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.convite label{display:flex; align-items:center; gap:9px; cursor:pointer}
.convite .estado{margin-left:auto; font-family:var(--num); font-size:12px; color:var(--muted-2)}
.nota{font-size:13.5px; color:var(--muted); background:var(--card-2); border:1px solid var(--line-2);
  border-radius:var(--r-s); padding:13px 15px; line-height:1.55; margin-top:var(--s2)}
.nota b{color:var(--ink); font-weight:500}
.vazio{text-align:center; padding:54px 24px; color:var(--muted-2)}
.vazio .t{font-size:16px; font-weight:500; color:var(--muted); margin-bottom:4px}
.vazio .d{font-size:13.5px; max-width:46ch; margin:0 auto; line-height:1.55}

/* As barras de deslocamento do sistema são grossas e escuras de mais para
   uma interface clara: ficam finas e translúcidas, e só ganham corpo quando
   o rato lhes passa por cima. */
*{scrollbar-width:thin; scrollbar-color:rgba(10,10,10,.18) transparent}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(10,10,10,.18); border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(10,10,10,.32)}
::-webkit-scrollbar-corner{background:transparent}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

.erro{background:var(--red-soft); color:#8E2119; border-radius:var(--r-s); padding:11px 14px; font-size:13px; text-align:left}
.aviso-ok{background:var(--ok-soft); color:#14603F; border-radius:var(--r-s); padding:11px 14px; font-size:13px}
.carregar{padding:60px 0; text-align:center; color:var(--muted-2); font-size:14px}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink); color:#FFF;
  padding:12px 20px; border-radius:99px; font-size:13.5px; z-index:70; max-width:90vw; text-align:center}
.toast.mau{background:var(--red)}

/* ============================================================
   OFERTAS — o catálogo, editável.
   Veio do painel do negócio, onde vivia até agora. A mecânica é a
   mesma; o que muda é a roupa, que passa a ser a do Payflow.
   ============================================================ */
.topo-ecra{display:flex; align-items:flex-end; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s3)}
.topo-ecra .cabeca{margin:0 auto 0 0}

/* Os comandos do ecrã andam juntos e assentam na mesma linha: mesma altura,
   mesmo raio, mesmo tamanho de letra. Estavam com alturas diferentes porque
   cada um tinha o seu padding e o menu ainda somava a seta do sistema. */
.acoes-ecra{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.acoes-ecra > .btn, .acoes-ecra > .escolha, .subtabs .escolha, .op-controlos > .escolha{
  height:38px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13.5px; line-height:1; border-radius:99px; white-space:nowrap;
  /* So as margens de cima e de baixo: com "margin:0" apagava-se tambem o
     margin-left:auto que encosta a lista de turmas a direita da fita. */
  margin-block:0}

select.escolha{appearance:none; -webkit-appearance:none; font:inherit; color:var(--ink);
  background:var(--card); border:1px solid var(--line); cursor:pointer; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236A6A66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px 7px}
/* Nas pílulas, o padding da pílula apagava o espaço da seta e o texto passava
   por cima dela («Últimos 90 dias»). A seta tem sempre o seu lugar. */
.acoes-ecra > select.escolha, .subtabs select.escolha, .op-controlos > select.escolha{padding-right:38px}
select.escolha:hover{border-color:var(--cruz)}
select.escolha:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* O estado só aparece quando tem alguma coisa a dizer -- a ler, ou a falhar.
   Um ponto verde a dizer "ligado" para sempre nao e informacao, e mobilia. */
.estado-lig{display:inline-flex; align-items:center; gap:7px; font-family:var(--num);
  font-size:11.5px; color:var(--muted-2); white-space:nowrap; margin-right:2px}
.ponto{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none}
.ponto.a-guardar{background:var(--amber)}
.ponto.erro{background:var(--red)}

.icon-btn{display:inline-grid; place-items:center; width:32px; height:32px; flex:none; padding:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); color:var(--muted);
  cursor:pointer; text-decoration:none}
.icon-btn svg{width:15px; height:15px}
.icon-btn:hover{border-color:var(--cruz); color:var(--ink)}
.icon-btn.danger:hover{border-color:var(--red); color:var(--red)}
.icon-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* a tendência, debaixo de cada número */
.kpi .t{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted-2); margin-top:3px}
.kpi .t svg{width:13px; height:13px; flex:none}
.kpi .t.good{color:var(--ok)} .kpi .t.bad{color:var(--red)} .kpi .t.flat{color:var(--muted-2)}

/* Barra de ocupação. Chamava-se .barra e apanhava por cima o padding de 15px
   da barra de topo da aplicação, que tem o mesmo nome: em vez de uma linha de
   5px era uma caixa cinzenta de 35px onde a primeira inscrição não se via. */
.prog{display:grid; gap:5px}
.prog .fita{height:4px; border-radius:99px; background:var(--line); overflow:hidden}
.prog .fita i{display:block; height:100%; min-width:3px; background:var(--accent); border-radius:99px}
.prog .fita i.cheia{background:var(--ok)}
.prog small{font-size:11.5px; color:var(--muted-2)}

/* ---- grelha do catálogo ---- */
.ofertas-grelha{display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
/* As arquivadas vivem abaixo de uma linha, e nada de activo passa para baixo
   dela: quem procura o que está a vender não tem de saltar por cima do que já
   não vende. */
.sep-arq{display:flex; align-items:center; gap:11px; margin:var(--s4) 0 var(--s2);
  font-family:var(--num); font-size:12.5px; color:var(--muted-2)}
.sep-arq::after{content:""; flex:1; height:1px; background:var(--line)}
.arquivadas-lista{display:grid; gap:9px}
.oferta{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column}
.oferta[draggable]{cursor:grab}
.oferta.a-arrastar{opacity:.42}
/* A capa preenche o topo do cartão, de ponta a ponta. A caixa é 2:1 -- a
   mesma proporção dos 1024x512 em que as artes são feitas -- por isso o que
   preenche não corta nada. Altura igual em todos os cartões, com arte ou sem
   ela: é o que mantém preços, números e botões à mesma altura. */
.oferta-capa{position:relative; aspect-ratio:2/1; background:var(--card-2);
  border-bottom:1px solid var(--line-2); display:grid; place-items:center; overflow:hidden}
.oferta-capa img{width:100%; height:100%; object-fit:cover; display:block}
/* Todas as capas com a mesma altura, haja arte ou não: é o que faz preços,
   números e botões pararem à mesma altura em cartões lado a lado. Quem ainda
   não tem arte fica com uma banda vazia -- e isso vê-se, que é o ponto. */
.oferta-capa.sem-capa{background:var(--card-2)}
/* A etiqueta de estado assenta sobre arte de qualquer cor: um fio branco à
   volta destaca-a de um fundo escuro e de um fundo claro. */
.oferta-capa .pill{box-shadow:0 0 0 1px rgba(255,255,255,.92), 0 1px 3px rgba(10,10,10,.2)}
.oferta-capa.sem-capa .pill{box-shadow:none}
.oferta-capa .capa-vazia{font-family:var(--num); font-size:12px;
  color:var(--cruz)}
.oferta-capa .pill{position:absolute; top:10px; right:10px}
.oferta-corpo{padding:15px 17px 8px; flex:1; display:flex; flex-direction:column}
.oferta-tipo{font-family:var(--num); font-size:12.5px; color:var(--muted-2)}
.oferta-corpo h4{font-size:15.5px; font-weight:500; letter-spacing:-.025em; margin:5px 0 6px; line-height:1.3}
/* Duas linhas sempre, haja descrição ou não: era o texto de comprimento
   diferente que fazia os preços de cada cartão pararem a alturas diferentes. */
.oferta-corpo > p{font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 12px;
  height:calc(2 * 1.5 * 13px); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.oferta-preco{font-family:var(--num); font-size:21px; font-weight:500; letter-spacing:-.03em; margin-bottom:12px}
.oferta-preco small{display:block; font-family:var(--sans); font-size:12px; font-weight:400;
  color:var(--muted-2); letter-spacing:0; margin-top:2px}
.oferta-numeros{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:11px 0; margin-top:auto;
  border-top:1px solid var(--line-2)}
.oferta-numeros b{display:block; font-family:var(--num); font-size:14px; font-weight:500}
.oferta-numeros span{font-family:var(--num); font-size:12.5px;
  color:var(--muted-2)}
.oferta-meta{display:flex; flex-wrap:wrap; gap:8px; font-size:11.5px; color:var(--muted-2); padding-bottom:12px}
.oferta-meta .falta{color:var(--red)}
.oferta-acoes{display:flex; gap:7px; padding:11px 17px; border-top:1px solid var(--line)}
.oferta-acoes .btn{flex:1}
/* As arquivadas ocupam a linha toda: espremidas numa coluna do catálogo, o
   nome truncava e o preço partia-se ao meio. */
.oferta.arquivada{grid-column:1/-1; flex-direction:row; align-items:center; flex-wrap:wrap;
  justify-content:space-between; align-self:start; opacity:.85}
.oferta-min{display:flex; align-items:center; gap:11px; padding:13px 15px; flex:1; min-width:0}
.oferta-min-capa{width:38px; height:38px; border-radius:var(--r-s); overflow:hidden; flex:0 0 38px;
  background:var(--card-2); display:grid; place-items:center; font-family:var(--num); font-size:12.5px; color:var(--cruz)}
.oferta-min-capa img{width:100%; height:100%; object-fit:cover; display:block}
.oferta-min-info{min-width:0; flex:1}
.oferta-min-info b{display:block; font-size:13.5px; font-weight:500; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.oferta-min-info span{font-size:11.5px; color:var(--muted-2)}
.oferta.arquivada .oferta-acoes{border-top:0; padding:10px 13px; gap:6px}
/* Num ecrã estreito não há linha para partilhar: o nome trunca e o preço
   parte-se ao meio. Empilha-se. */
@media(max-width:560px){
  .oferta.arquivada{flex-direction:column; align-items:stretch}
  .oferta.arquivada .oferta-acoes{justify-content:flex-end; padding-top:0}
}
.oferta.arquivada .oferta-acoes .btn{flex:none}

/* ---- gaveta lateral (detalhes da oferta) ---- */
#overlay, #overlay-rc, #overlay-op, #overlay-ag, #overlay-ck, #overlay-eq{position:fixed; inset:0; background:rgba(10,10,10,.34); opacity:0; pointer-events:none;
  transition:opacity .18s ease; z-index:60}
#overlay.on, #overlay-rc.on, #overlay-op.on, #overlay-ag.on, #overlay-ck.on, #overlay-eq.on{opacity:1; pointer-events:auto}
#gaveta-rc, #gaveta-op, #gaveta-ag, #gaveta-ck, #gaveta-eq{position:fixed; top:0; right:0; bottom:0; width:min(468px,100vw); background:var(--card);
  border-left:1px solid var(--line); z-index:61; overflow-y:auto; padding:22px 24px 60px;
  transform:translateX(102%); transition:transform .2s ease; overscroll-behavior:contain}
#gaveta-rc.on, #gaveta-op.on, #gaveta-ag.on, #gaveta-ck.on, #gaveta-eq.on{transform:none}
@media (prefers-reduced-motion:reduce){ #gaveta-rc, #gaveta-op, #gaveta-ag, #gaveta-ck, #gaveta-eq{transition:none} }
#gaveta-rc .bloco, #gaveta-op .bloco, #gaveta-ag .bloco, #gaveta-ck .bloco, #gaveta-eq .bloco{margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line-2)}
#gaveta-rc .bloco h4, #gaveta-op .bloco h4, #gaveta-ag .bloco h4, #gaveta-ck .bloco h4, #gaveta-eq .bloco h4{display:flex; align-items:center; font-family:var(--num); font-size:12.5px; font-weight:500; color:var(--muted-2); margin:0 0 11px}
/* Uma parcela e uma data, um valor e um estado. Nada disto cabe numa .linha,
   que e desenhada para a largura toda do ecra. */
.pcl{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:11px 0;
  border-bottom:1px solid var(--line-2)}
.pcl:last-child{border-bottom:0}
.pcl b{font-size:13px; font-weight:500}
.pcl .q{grid-column:1; font-size:12px; color:var(--muted-2)}
.pcl .v{grid-column:2; grid-row:1; font-family:var(--num); font-size:13.5px; text-align:right}
.pcl .e{grid-column:2; grid-row:2; text-align:right}
.linha.clicavel{cursor:pointer}
.linha.clicavel:hover{background:var(--card-2)}
#gaveta{position:fixed; top:0; right:0; bottom:0; width:min(468px,100vw); background:var(--card);
  border-left:1px solid var(--line); z-index:61; overflow-y:auto; padding:22px 24px 60px;
  transform:translateX(102%); transition:transform .2s ease; overscroll-behavior:contain}
#gaveta.on{transform:none}
@media (prefers-reduced-motion:reduce){ #gaveta{transition:none} }
.g-topo{display:flex; align-items:flex-start; gap:12px; margin-bottom:12px}
.g-topo h2{font-size:20px; font-weight:500; letter-spacing:-.03em; margin:0 0 3px; line-height:1.2}
.g-topo span{font-size:12.5px; color:var(--muted-2)}
.g-topo .fechar{margin-left:auto; font:inherit; font-size:24px; line-height:1; color:var(--muted-2);
  background:none; border:0; cursor:pointer; padding:0 4px}
.g-topo .fechar:hover{color:var(--ink)}
#gaveta .bloco{margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line-2)}
#gaveta .bloco h4{display:flex; align-items:center; font-family:var(--num); font-size:12.5px; font-weight:500; color:var(--muted-2); margin:0 0 11px}
.acoes-g{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.citacao{font-size:13.5px; color:var(--muted); line-height:1.6; border-left:2px solid var(--line);
  padding-left:12px}
.dl{display:grid; grid-template-columns:1fr auto; gap:8px 14px; margin:0; font-size:13.5px}
.dl dt{color:var(--muted-2)}
.dl dd{margin:0; font-family:var(--num); text-align:right}
.lk{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 10px; padding:10px 0;
  border-bottom:1px solid var(--line-2)}
.lk:last-child{border-bottom:0}
.lk b{grid-column:1; font-size:13px; font-weight:500}
.lk .lk-url{grid-column:1; font-family:var(--num); font-size:11.5px; color:var(--muted-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lk .lk-acts{grid-column:2; grid-row:1/3; display:flex; gap:6px}
.lk.vazio{text-align:left; padding:10px 0; color:inherit}
.lk.vazio b{color:var(--muted)}
.lk.vazio span{font-size:12px; color:var(--muted-2)}
.edicao{border:1px solid var(--line); border-radius:var(--r-s); padding:12px 14px; margin-bottom:9px}
.edicao-topo{display:flex; align-items:center; gap:9px; margin-bottom:4px}
.edicao-topo b{font-size:13.5px; font-weight:500; flex:1; min-width:0}
.mods-lista{display:grid; gap:6px}
.mods-cartao{display:flex; align-items:center; gap:10px; font-size:13px; background:var(--card-2);
  border:1px solid var(--line-2); border-radius:var(--r-s); padding:9px 12px}
.mods-cartao .num{font-family:var(--num); font-size:10.5px; color:var(--muted-2); flex:none}
.capa-upload{display:block; position:relative; height:118px; border-radius:var(--r-s); overflow:hidden;
  background:var(--card-2); border:1px solid var(--line); cursor:pointer; display:grid; place-items:center}
.capa-upload img{width:100%; height:100%; object-fit:cover}
.capa-upload input{position:absolute; inset:0; opacity:0; cursor:pointer}
.capa-upload .capa-vazia{font-family:var(--num); font-size:12.5px;
  color:var(--cruz)}
.capa-upload .editar{position:absolute; right:9px; bottom:9px; width:29px; height:29px; border-radius:var(--r-s);
  background:var(--card); border:1px solid var(--line); display:grid; place-items:center; color:var(--muted)}
.capa-upload .editar svg{width:14px; height:14px}
.novo-ct{display:grid; gap:8px}
.novo-ct input[type=text], .novo-ct input:not([type]){width:100%}
#gaveta input[type=text], #gaveta input:not([type]){font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); padding:9px 12px; width:100%}
#gaveta input:focus-visible{outline:2px solid var(--accent); outline-offset:-1px}

/* ---- caixa de formulário ---- */
#modal{position:fixed; inset:0; background:rgba(10,10,10,.42); display:none; place-items:center;
  padding:24px 16px; z-index:70; overflow-y:auto}
#modal.on{display:grid}
#modalCx{background:var(--card); border-radius:var(--r); border:1px solid var(--line);
  padding:26px 26px 22px; width:min(620px,100%); max-height:min(88svh,900px); overflow-y:auto}
#modalCx h2{font-size:19px; font-weight:500; letter-spacing:-.03em; margin:0 0 4px}
#modalCx .sub{font-size:13px; color:var(--muted-2); margin:0 0 var(--s3)}
.form-grelha{display:grid; gap:13px; grid-template-columns:1fr 1fr}
@media(max-width:620px){ .form-grelha{grid-template-columns:1fr} }
.form-grelha .full{grid-column:1/-1}
.form-grelha label{display:grid; gap:5px; font-size:13px}
.form-grelha label > span{font-size:12.5px; color:var(--muted); font-weight:500}
.form-grelha input, .form-grelha select, .form-grelha textarea{font:inherit; font-size:14px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); padding:9px 12px; width:100%}
.form-grelha textarea{resize:vertical; line-height:1.55}
.form-grelha input:focus-visible, .form-grelha select:focus-visible, .form-grelha textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:-1px}
.form-grelha .largo{grid-column:1/-1}
/* Os campos da cobranca mudam com o modelo escolhido. O que nao se aplica sai
   do ecra em vez de ficar a cinzento a pedir para ser preenchido. */
.nota-plano{font-size:12px; color:var(--muted-2); line-height:1.5; margin:6px 0 0}
.rot-plano{font-size:12.5px; color:var(--muted); font-weight:500}
/* O que acontece a quem subscreve, dito por extenso enquanto se escrevem as regras. */
.resumo-assin{margin:14px 0 4px; padding:11px 14px; font-size:13px; line-height:1.55; color:var(--ink-2);
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-s)}
.resumo-assin.mau{color:var(--red-ink); background:var(--red-soft); border-color:transparent}
.linhas-parcelas{display:grid; gap:8px; margin-top:6px}
.linha-parcela{display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px}
.form-grelha .linha-parcela > span{font-size:13px; color:var(--ink); font-weight:500}
.form-grelha .linha-parcela > span small{color:var(--muted-2); font-weight:400}
.linha-parcela input{width:auto; min-width:168px}
@media(max-width:620px){ .linha-parcela{grid-template-columns:1fr} .linha-parcela input{min-width:0; width:100%} }
/* Onde o codigo foi parar. Escrito no ecra e nao so num toast que desaparece:
   quem tem tres caixas de correio precisa de saber em qual procurar. */
.aviso-cod{background:var(--accent-soft); color:var(--accent-hi); border-radius:var(--r-s);
  padding:11px 14px; font-size:13px; line-height:1.5; margin-bottom:var(--s3)}
.aviso-cod b{font-weight:500}
.form-pe{display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:var(--s3);
  padding-top:var(--s2); border-top:1px solid var(--line-2)}
#modalCx .erro:empty, #gaveta-op .erro:empty, #gaveta-ag .erro:empty, #gaveta-eq .erro:empty{display:none}
#modalCx .erro{margin-top:var(--s2)}

/* Abaixo de 16px o iPhone dá zoom sozinho ao tocar num campo, e fica com esse
   zoom na página inteira depois de o largar -- era por isso que o Payflow
   abria ampliado. Nos ecrãs de toque o campo mede 16px, que é a única medida
   que o impede. Escrito aqui, depois das regras que corrige: antes delas
   perdia por ordem e não fazia nada. */
@media(pointer:coarse){
  .form-grelha input, .form-grelha select, .form-grelha textarea,
  #gaveta input[type=text], #gaveta input:not([type]){font-size:16px}
}

/* ============================================================
   BARRA QUE ENCOLHE, CABEÇALHO COM AVISOS, PERFIL E DEFINIÇÕES
   ============================================================ */

/* ---- a barra lateral encolhida ---- */
@media(min-width:900px){
  .app.encolhido{grid-template-columns:76px 1fr}
  .app.encolhido .lado-topo > div:not(.selo):not(.dobrar){display:none}
  .app.encolhido .lado-topo{justify-content:center; padding:0 12px; gap:0}
  /* Encolhida, o botão ocupa uma linha do menu: a mesma caixa, o mesmo ícone,
     na mesma coluna que os outros. */
  .app.encolhido .dobrar{position:absolute; top:calc(var(--topo) + 10px); left:10px; right:10px;
    width:auto; height:39px; margin:0; border-radius:var(--r-s)}
  .app.encolhido .menu{padding-top:53px}
  .app.encolhido .grupo-t{display:none}
  .app.encolhido .item{justify-content:center; padding:11px 0}
  .app.encolhido .item .rot, .app.encolhido .item .tag, .app.encolhido .item .ext{display:none}
  .app.encolhido .item .fi{font-size:17px}
  .app.encolhido .dobrar .fi{font-size:17px}
  .app.encolhido .negocio{display:none}
  .app.encolhido .lado-pe{padding:12px 0; justify-items:center}
  .app.encolhido .pilula-ir{width:40px; padding:0; font-size:0; gap:0}
  .app.encolhido .pilula-ir .fi{font-size:17px}
}

.dobrar{width:34px; height:34px; flex:none; margin-left:auto; display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r-s); color:var(--muted-2);
  cursor:pointer; padding:0; line-height:1}
.dobrar .fi{font-size:18px}
.dobrar:hover{background:var(--card-2); color:var(--muted)}
.dobrar:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media(max-width:899px){ .dobrar{display:none} }
.item .rot{min-width:0; overflow:hidden; text-overflow:ellipsis}
.item.sair{color:var(--red)}
.item.sair .fi{color:var(--red); opacity:.75}
.item.sair:hover{background:var(--red-soft); color:var(--red)}
.item.sair:hover .fi{opacity:1}
.menu-fim{margin-top:auto; padding-top:10px; border-top:1px solid var(--line-2)}

/* ---- o cabeçalho ---- */
.barra-acoes{display:flex; align-items:center; gap:8px; position:relative}

.icone-topo{width:38px; height:38px; flex:none; display:grid; place-items:center; position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:50%; color:var(--muted);
  cursor:pointer; padding:0}
.icone-topo:hover{border-color:var(--cruz); color:var(--ink)}
.icone-topo:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.icone-topo .fi{font-size:18px; line-height:1}
.icone-topo[aria-expanded="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.icone-topo .conta{position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
  border-radius:99px; background:var(--red); color:#FFF; font-family:var(--num); font-size:10px;
  font-weight:500; display:grid; place-items:center; border:2px solid var(--bg)}
.atalho-perfil{width:38px; height:38px; flex:none; border-radius:50%; border:1px solid var(--line);
  background:var(--ink); color:#FFF; font-family:var(--num); font-size:12px; font-weight:500;
  display:grid; place-items:center; cursor:pointer; padding:0; overflow:hidden}
.atalho-perfil img{width:100%; height:100%; object-fit:cover}
.atalho-perfil:hover{border-color:var(--accent)}
.atalho-perfil:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.atalho-perfil[aria-expanded="true"]{border-color:var(--accent)}

/* ---- o menu da conta, debaixo do atalho de perfil ---- */
.menu-eu{position:absolute; top:calc(100% + 10px); right:0; width:min(244px,calc(100vw - 32px));
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); z-index:40;
  box-shadow:0 12px 32px rgba(10,10,10,.12); padding:6px}
/* O atributo hidden perde para qualquer regra display do autor -- e este menu
   tem uma. Sem esta linha nascia aberto. */
.menu-eu[hidden]{display:none}
.menu-eu-quem{display:block; width:100%; text-align:left; font:inherit; background:none; border:0;
  border-bottom:1px solid var(--line-2); border-radius:0; padding:8px 11px 11px; margin-bottom:6px;
  cursor:pointer}
.menu-eu-quem:hover{background:var(--card-2)}
.menu-eu-quem:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.menu-eu-quem b{display:block; font-size:13.5px; font-weight:500; letter-spacing:-.02em; color:var(--ink)}
.menu-eu-quem span{display:block; margin-top:2px; font-size:12px; color:var(--muted-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item-eu{display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit;
  font-size:13.5px; color:var(--ink); background:none; border:0; border-radius:var(--r-s);
  padding:9px 11px; cursor:pointer}
.item-eu:hover{background:var(--card-2)}
.item-eu:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.item-eu .fi{font-size:16px; line-height:1; color:var(--muted)}
.item-eu.sair{color:var(--red)}
.item-eu.sair .fi{color:var(--red)}
.item-eu.sair:hover{background:var(--red-soft)}

/* ---- a gaveta dos avisos ---- */
.avisos-cx{position:absolute; top:calc(100% + 10px); right:0; width:min(380px,calc(100vw - 32px));
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); z-index:40;
  box-shadow:0 12px 32px rgba(10,10,10,.12); overflow:hidden}
.avisos-topo{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line-2)}
.avisos-topo b{font-size:14px; font-weight:500; letter-spacing:-.02em}
.avisos-topo .c{margin-left:auto; font-family:var(--num); font-size:11px; color:var(--muted-2)}
.avisos-lista{max-height:min(58svh,460px); overflow-y:auto}
.aviso{display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left; font:inherit;
  background:none; border:0; border-bottom:1px solid var(--line-2); padding:13px 16px; cursor:pointer}
.aviso:last-child{border-bottom:0}
.aviso:hover{background:var(--card-2)}
.aviso:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.aviso .sinal{width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--bg); color:var(--muted)}
.aviso .sinal .fi{font-size:16px; line-height:1}
.aviso.warn .sinal{background:var(--amber-soft); color:var(--amber)}
.aviso.mau .sinal{background:var(--red-soft); color:var(--red)}
.aviso.ok .sinal{background:var(--ok-soft); color:var(--ok)}
.aviso .cp{flex:1; min-width:0}
.aviso .cp b{display:block; font-size:13.5px; font-weight:500; line-height:1.35}
.aviso .cp span{display:block; font-size:12.5px; color:var(--muted-2); line-height:1.45; margin-top:2px}
.avisos-vazio{padding:34px 20px; text-align:center; color:var(--muted-2); font-size:13.5px}
.avisos-pe{padding:11px 16px; border-top:1px solid var(--line-2); background:var(--card-2);
  font-size:11.5px; color:var(--muted-2)}

/* ---- perfil ---- */
/* Um degrade de roxo a pessego nao existe em mais lado nenhum do Payflow, e a
   banda alta empurrava o nome para cima dele, a ler-se mal. Fica a mesma banda
   discreta dos cartoes sem capa: so o avatar e que sobe para cima dela, e o
   nome fica onde se le, no branco. */
.perfil-capa{height:72px; background:var(--card-2); border-bottom:1px solid var(--line-2)}
.perfil-cx{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.perfil-cabeca{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; padding:0 22px 20px}
.perfil-av{width:84px; height:84px; flex:none; margin-top:-34px; border-radius:50%; border:3px solid var(--card);
  background:var(--ink); color:#FFF; font-family:var(--num); font-size:26px; font-weight:500;
  display:grid; place-items:center; overflow:hidden}
.perfil-av img{width:100%; height:100%; object-fit:cover; display:block}
.perfil-nome{flex:1; min-width:180px; padding-top:14px}
.perfil-nome h3{font-size:19px; font-weight:500; letter-spacing:-.03em; margin:0 0 3px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.perfil-cabeca > .btn{margin-top:16px}
.perfil-nome .papel{font-family:var(--num); font-size:12.5px;
  color:var(--muted-2)}
.perfil-meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:11px; font-size:12.5px; color:var(--muted-2)}
.perfil-meta span{display:inline-flex; align-items:center; gap:6px}
.perfil-meta .fi{font-size:14px; line-height:1}
.perfil-corpo{border-top:1px solid var(--line-2); padding:18px 22px 22px}
.perfil-corpo h4{font-family:var(--num); font-size:12.5px; font-weight:500; color:var(--muted-2); margin:0 0 11px}
.acessos{display:flex; flex-wrap:wrap; gap:7px}

/* ---- definições ---- */
.conf{display:grid; gap:var(--s2); max-width:720px}
.conf-bloco{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px}
.conf-bloco h3{font-size:15px; font-weight:500; letter-spacing:-.02em; margin:0 0 3px}
.conf-bloco > p{font-size:13px; color:var(--muted-2); margin:0 0 var(--s2); line-height:1.5}
.conf-linha{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:13px 0;
  border-top:1px solid var(--line-2)}
.conf-linha:first-of-type{border-top:0}
.conf-linha .rot{flex:1; min-width:170px}
.conf-linha .rot b{display:block; font-size:13.5px; font-weight:500}
.conf-linha .rot span{display:block; font-size:12.5px; color:var(--muted-2); line-height:1.45; margin-top:2px}
.conf-linha .escolha{min-width:170px}
/* ---- a Conta (parte 7.6): cartões numa coluna, como a página de conta da Library ---- */
.conta-grelha{display:grid; gap:18px; max-width:760px}
.conta-cartao h3{font-size:17px; margin-bottom:14px}
.conta-cartao > p{margin-top:-8px}
.conta-foto{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:18px}
.conta-av{width:88px; height:88px; flex:none; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--ink); color:#FFF; font-size:26px; font-weight:500; letter-spacing:-.02em}
.conta-av img{width:100%; height:100%; object-fit:cover; display:block}
.conta-foto-texto{display:grid; gap:8px; min-width:0}
.conta-foto-bts{display:flex; gap:8px; flex-wrap:wrap}
.conta-nota{display:block; font-size:12.5px; color:var(--muted); line-height:1.5}
.conta-campos{grid-template-columns:1fr}
.conta-campos label .conta-nota{margin-top:2px}
.conta-campos input:disabled{background:var(--card-2); color:var(--muted); cursor:not-allowed}
.conta-acesso{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2); display:grid; gap:10px}
.conta-rot{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--ink-2)}
.conta-guardar{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.conta-guardar .erro:empty{display:none}
.conta-guardar .erro{margin:0}
.interruptor{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer}
.interruptor input{appearance:none; -webkit-appearance:none; width:17px; height:17px; flex:none; margin:0;
  border:1.5px solid var(--cruz); border-radius:5px; background:var(--card); cursor:pointer; position:relative}
.interruptor input:checked{background:var(--accent); border-color:var(--accent)}
.interruptor input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #FFF; border-width:0 2px 2px 0; transform:rotate(43deg)}
.interruptor input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.conta-linha{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0;
  border-top:1px solid var(--line-2)}
.conta-linha:first-of-type{border-top:0}
.conta-linha .qual{flex:1; min-width:180px}
.conta-linha .qual b{font-size:13.5px; font-weight:500; font-family:var(--num)}
.conta-linha .qual span{display:block; font-size:12.5px; color:var(--muted-2); margin-top:2px}


/* ============================================================
   PARTE 5 · A CAMADA DO DESENHO NOVO

   Escrita aqui, depois das regras base e antes das do telemóvel: ganha às
   primeiras por ordem e deixa as segundas ganharem a ela.
   ============================================================ */
body{font-size:14.5px; line-height:1.5}
.num, td.v, .mont, .kpi .v, .preco .p, .oferta-preco, .mini .mv, .oferta-numeros b, .pcl .v, .dl dd{
  font-variant-numeric:tabular-nums}
code, .mono{font-family:var(--mono)}

/* A lateral: pedra clara, quem vende no topo, o Payflow a assinar em baixo. */
.lado{background:var(--card-2)}
.lado-topo{gap:10px; padding:0 16px 0 18px}
.lado-topo .pf-logo{width:34px; height:34px; flex:none; border-radius:9px; display:block}
.lado-topo .pf-nome{min-width:0; display:grid; line-height:1.2}
.lado-topo .pf-nome b{font-size:16px; font-weight:500; letter-spacing:-.01em}

/* O negócio, debaixo do logo. Com mais do que uma tesouraria o <select> fica
   por cima da caixa inteira, transparente: a caixa é o desenho, o select é o
   que recebe o clique e o teclado. */
.negocio{position:relative; margin:12px 12px 2px; padding:8px 12px; border:1px solid var(--line);
  border-radius:12px; background:var(--card); display:grid; grid-template-columns:1fr auto; column-gap:8px}
.negocio .neg-l{grid-column:1; font-size:11.5px; color:var(--muted); line-height:1.3}
.negocio .neg-v{grid-column:1; font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.negocio .neg-seta{grid-column:2; grid-row:1 / span 2; align-self:center; font-size:16px; color:var(--muted)}
/* Os grupos separam-se por uma linha. O nome do grupo fica para os leitores de
   ecrã: escrito em maiúsculas por cima de três itens, só fazia barulho. */
.grupo + .grupo{margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
.grupo-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0}
.item{color:var(--ink-2); border-radius:var(--r-s); padding:8px 11px; min-height:38px}
.item .fi{color:var(--muted)}
.item:hover{background:var(--sunken)}
.item[aria-current="page"]{background:var(--accent-soft); color:var(--accent-ink); font-weight:500}
.item[aria-current="page"] .fi{color:var(--accent)}
.item .tag{font-size:12px; min-width:22px; height:20px; padding:0 7px; display:grid; place-items:center;
  background:var(--sunken); color:var(--ink-2)}
.item[aria-current="page"] .tag{background:#FFF; color:var(--accent-ink)}
.item .tag.at{background:var(--accent-soft); color:var(--accent-ink)}
/* Em baixo, as outras duas plataformas do Kingdom, em pílula: saem do Payflow,
   e por isso não se confundem com os itens do menu. */
.lado-pe{display:grid; gap:8px; padding:14px 14px 16px; border-top:1px solid var(--line)}
.pilula-ir{display:flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 14px;
  border:1px solid var(--cruz); border-radius:999px; background:var(--card);
  color:var(--ink-2); font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap}
.pilula-ir .fi{font-size:16px; color:var(--muted)}
.pilula-ir:hover{border-color:var(--accent); color:var(--accent-ink)}
.pilula-ir:hover .fi{color:var(--accent)}
.pilula-ir:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* O topo: o nome do ecrã em cinzento, a tesouraria, os avisos e a conta. */
.barra{background:var(--bg)}
.barra h1{font-size:15px; color:var(--muted); font-weight:400}
.tes{border-radius:99px; border-color:var(--cruz); height:36px; font-weight:500; color:var(--ink-2)}
.tes-rot{font-size:12.5px; color:var(--muted)}
.icone-topo, .atalho-perfil{width:36px; height:36px; border-color:var(--cruz)}
.atalho-perfil{background:#D9CBB8; color:var(--ink-2); font-weight:500}
.icone-topo .conta{background:var(--red); font-weight:500}

/* Os títulos ganham autoridade pelo tamanho, não pelo negrito. */
.conteudo{padding:28px 26px 64px}
.cabeca{margin-bottom:22px}
.cabeca h2{font-size:26px; font-weight:500; letter-spacing:-.025em}
.cabeca p{font-size:15px; color:var(--muted)}
.bloco-t h3{font-size:17px; font-weight:500; letter-spacing:-.01em}
.bloco-t .c{font-size:13px}

/* Separadores e filtros: pílulas, como tudo o que se carrega. */
.subtabs{border-bottom:0; gap:6px; margin-bottom:18px}
.subtabs button{height:34px; padding:0 14px; border:1px solid var(--cruz); border-radius:99px; background:var(--card);
  color:var(--ink-2); margin:0; display:inline-flex; align-items:center}
.subtabs button[aria-selected="true"]{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:500}
.subtabs .c{background:none; padding:0 0 0 6px; margin:0; font-size:12.5px; color:var(--muted)}
.subtabs button[aria-selected="true"] .c{background:none; color:var(--accent-ink)}

/* Cartões, tabelas e números: o mesmo objecto, com a mesma sombra quente. */
.cartao, .tw, .kpis, .oferta, .oferta-c, .perfil-cx, .conf-bloco, .convite{
  border-radius:var(--r); border-color:var(--line); box-shadow:var(--shadow-1)}
.cartao, .oferta, .oferta-c, .perfil-cx, .conf-bloco{background:var(--card-bg)}
.kpis{background:var(--line); margin-bottom:22px}
.kpi{padding:18px 22px}
.kpi .v{font-size:24px; font-weight:500; letter-spacing:-.02em; color:var(--ink)}
.kpi .v.ok, .kpi .v.warn, .kpi .v.mau{color:var(--ink)}
.kpi .l{font-size:13.5px; color:var(--muted); order:-1}
.kpi .s{font-size:12.5px; color:var(--muted)}
/* A cor do estado sai do número e passa para um ponto ao lado do nome: um
   número a âmbar parecia um erro de impressão. */
.kpi .v.warn + .l::after, .kpi .v.mau + .l::after, .kpi .v.ok + .l::after{content:""; display:inline-block;
  width:7px; height:7px; border-radius:50%; margin-left:7px; vertical-align:1px; background:var(--amber-dot)}
.kpi .v.mau + .l::after{background:var(--red)}
.kpi .v.ok + .l::after{background:var(--ok)}

th{font-size:13px; font-weight:500; color:var(--muted); padding:12px 18px}
td{padding:12px 18px}
tbody tr:hover{background:var(--card-2)}
td .sub{font-size:12.5px; color:var(--muted)}

/* Botões: pílulas. Um só cheio por ecrã; as acções de cada linha são suaves. */
.btn{border-color:var(--cruz); min-height:40px; padding:0 18px; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; font-weight:500}
.btn-sm{min-height:34px; padding:0 14px; font-size:13.5px}
.btn-p{background:var(--cta); border:0; color:#FFF; box-shadow:var(--cta-shadow); font-weight:500}
.btn-p:hover{background:var(--cta-hover)}
.btn-suave{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink)}
.btn-suave:hover{background:#EADDFB; border-color:transparent}
.btn-calmo{background:none; border-color:transparent; color:var(--ink-2); padding:0 10px}
.btn-calmo:hover{background:var(--sunken); border-color:transparent}
.btn-mau{color:var(--red-ink)}
.btn:focus-visible, .item:focus-visible, .icone-topo:focus-visible, .atalho-perfil:focus-visible{
  outline:none; box-shadow:var(--ring)}

/* Etiquetas de estado: frase, não gritaria. */
.pill{font-size:12.5px; font-weight:500; height:24px; padding:0 10px; letter-spacing:0}
.pill.ok{background:var(--ok-soft); color:var(--ok-ink)}
.pill.pend{background:var(--amber-soft); color:var(--amber)}
.pill.mau{background:var(--red-soft); color:var(--red-ink)}
.pill.neutro{background:var(--sunken); color:var(--ink-2); border:0}
.pill.rx{background:var(--accent-soft); color:var(--accent-ink)}

.linha{padding:14px 0}
.quem .n{font-weight:500}
.quem .d{font-size:13px; color:var(--muted)}
.mont{font-size:15px; font-weight:500}
.barrinha{height:6px; border:0; background:var(--sunken); border-radius:99px}
.barrinha span{border-radius:99px}
.nota{background:var(--card-2); border-color:var(--line); border-radius:var(--r-dentro); color:var(--muted)}
.vazio .t{font-weight:500}
.erro{background:var(--red-soft); color:var(--red-ink); border-radius:var(--r-dentro)}
.aviso-ok{background:var(--ok-soft); color:var(--ok-ink); border-radius:var(--r-dentro)}
.toast{background:var(--ink); box-shadow:var(--shadow-pop)}
.toast.mau{background:var(--red-ink)}

/* Gavetas e caixas: flutuam com a sombra de diálogo. */
#gaveta, #gaveta-rc, #gaveta-op, #gaveta-ag, #gaveta-ck, #gaveta-eq{box-shadow:var(--shadow-pop); border-left-color:var(--line)}
.g-topo h2{font-size:21px; font-weight:500; letter-spacing:-.015em}
.g-topo span{font-size:13.5px; color:var(--muted)}
.g-topo .fechar{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); font-size:20px; padding:0;
  display:grid; place-items:center; flex:none}
#gaveta .bloco h4, #gaveta-rc .bloco h4, #gaveta-op .bloco h4, #gaveta-ag .bloco h4, #gaveta-ck .bloco h4, #gaveta-eq .bloco h4{font-size:14px; color:var(--ink-2)}
#modalCx{border-radius:20px; box-shadow:var(--shadow-pop); border-color:var(--line)}
#modalCx h2{font-size:21px; font-weight:500; letter-spacing:-.015em}
.form-grelha label > span{font-size:13.5px; color:var(--ink-2)}
.form-grelha input, .form-grelha select, .form-grelha textarea{border-color:var(--cruz); border-radius:var(--r-s);
  padding:10px 13px; min-height:44px}
.form-grelha textarea{min-height:88px}
.form-grelha input:focus-visible, .form-grelha select:focus-visible, .form-grelha textarea:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:var(--ring)}
select.escolha{border-color:var(--cruz)}

/* O editor do checkout: secções com nome, e a marca da oferta. */
.rot-sec{display:block; font-size:14px; font-weight:500; color:var(--ink)}
.ajuda-sec{font-size:12.5px; color:var(--muted); margin:4px 0 0; line-height:1.5}
.copiar-marca{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding:10px 12px;
  border-radius:var(--r-dentro); background:var(--accent-soft); color:var(--accent-ink); font-size:13.5px}
.copiar-marca select{margin-left:auto; width:auto; min-height:36px; padding:0 12px}
.logo-marca{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px; border-radius:var(--r-dentro);
  border:1px dashed var(--cruz); background:var(--card-2)}
.logo-marca > div{flex:1; min-width:160px; display:grid; gap:2px}
.logo-marca b{font-size:13.5px; font-weight:500}
.logo-marca span{font-size:12.5px; color:var(--muted)}
.logo-previa{width:52px; height:52px; flex:none; border-radius:12px; background:var(--ink); color:#F4E3BE;
  display:grid; place-items:center; font-weight:500; overflow:hidden}
.logo-previa img{width:100%; height:100%; object-fit:cover}
/* O «.logo-marca span» de cima pintava também as iniciais de cinzento sobre o escuro (3,2:1). */
.logo-marca span.logo-previa{color:#F4E3BE; font-size:17px}
.marca-cx + label{margin-top:-4px}
/* O preço promocional e o relógio (parte 7.5): cada secção abre com uma linha
   por cima, e diz em palavras o que vai acontecer. */
.ck-sec{margin-top:8px; padding-top:18px; border-top:1px solid var(--line-2)}
.ck-opc{color:var(--muted); font-weight:400}
.ck-nota{display:block; margin-top:6px; font-size:12.5px; color:var(--muted); line-height:1.5}
.ck-resumo-promo{margin:-2px 0 0; padding:10px 14px; border-radius:var(--r-dentro); font-size:13.5px;
  background:var(--card-2); border:1px solid var(--line); color:var(--ink-2)}
.ck-resumo-promo.ok{background:var(--ok-soft); border-color:transparent; color:var(--ok-ink)}
.ck-resumo-promo.mau{background:var(--amber-soft); border-color:transparent; color:var(--amber)}
.ck-rel-modo{width:fit-content; max-width:100%; flex-wrap:wrap}
.ck-previa{display:grid; gap:6px}
.ck-previa-r{font-size:12.5px; color:var(--muted)}
.ck-relogio-previa{display:flex; align-items:center; gap:8px; margin:0; padding:10px 14px; border-radius:var(--r-s);
  background:var(--card-2); border:1px solid var(--line); font-size:13.5px; color:var(--ink-2)}
.ck-relogio-previa .fi{font-size:16px; color:var(--muted)}
.ck-relogio-previa b{margin-left:auto; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
#modalCx [data-ck-rel-so][hidden]{display:none !important}

/* Os filtros das Transacções usam .on e .tag: o mesmo desenho de pílula. */
.subtabs button.on{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink)}
.subtabs .tag{margin-left:7px; font-size:12.5px; color:var(--muted)}
.subtabs button.on .tag{color:var(--accent-ink)}
/* Os números grandes não se partem ao meio: encolhem com o ecrã. */
.kpi .v{white-space:nowrap; font-size:clamp(18px, 1.75vw, 24px)}
/* A coluna do estado cabe «Reembolsada em parte» sem tapar o valor. */
@media(min-width:760px){ .linha{grid-template-columns:minmax(200px,1fr) 176px 136px 126px} }

.conf-linha .rot .pill, .conta-linha .pill{width:fit-content}

/* Ofertas: a tinta da oferta na letra de sempre. */
.oferta.clicavel{cursor:pointer; transition:box-shadow .15s, border-color .15s}
.oferta.clicavel:hover{box-shadow:var(--shadow-2); border-color:var(--cruz)}
.oferta.clicavel:focus-visible{outline:none; box-shadow:var(--ring)}
.oferta-meta{align-items:center; font-size:12.5px; color:var(--muted)}
.oferta-meta .icon-btn{margin-left:auto}
.sep-arq{font-size:13.5px; font-weight:500; color:var(--ink-2)}
.sep-arq span{color:var(--muted); font-weight:400}
.capa-vazia, .capa .medida{font-size:12.5px; color:var(--muted)}
.oferta-corpo h4, .oferta-c .nome{font-weight:500; letter-spacing:-.015em}
.oferta-tipo{font-size:13px; color:var(--muted)}
.oferta-preco{font-size:22px; font-weight:500; letter-spacing:-.02em}
.oferta-numeros span, .mini .ml{font-size:12.5px; color:var(--muted)}

/* ---- a Reconciliação: vista por prazo e por pessoa ---- */
.barra-vista{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.vista{display:inline-flex; gap:4px; padding:4px; border-radius:99px; background:var(--card); border:1px solid var(--cruz)}
.vista button{font:inherit; font-size:13.5px; font-weight:500; height:32px; padding:0 14px; border:0; border-radius:99px;
  background:none; color:var(--ink-2); cursor:pointer}
.vista button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-ink)}
.vista button:focus-visible{outline:none; box-shadow:var(--ring)}
.estado-cursos{margin-left:auto; font-size:12.5px; color:var(--muted)}
.fila #fila > .linha{padding:14px 20px; border-bottom:1px solid var(--line-2)}
.fila #fila > .linha:last-child{border-bottom:0}
@media(min-width:760px){
  .fila #fila > .linha{grid-template-columns:minmax(220px,1fr) 110px 140px auto}
  .fila .acao{justify-content:flex-end; flex-wrap:nowrap}
}
.grupo-fila{padding:11px 20px 8px; font-size:13.5px; font-weight:500; color:var(--ink-2); background:var(--card-2);
  border-bottom:1px solid var(--line-2); display:flex; gap:8px; align-items:baseline}
.grupo-fila:first-child{border-radius:var(--r) var(--r) 0 0}
.grupo-fila em{font-style:normal; font-weight:400; color:var(--muted); font-variant-numeric:tabular-nums}
.linha .met{font-size:13.5px; color:var(--ink-2)}
.linha.atraso .mont{color:var(--red-ink)}
.nome-ir{font:inherit; font-size:14.5px; font-weight:500; color:var(--ink); background:none; border:0; padding:0;
  cursor:pointer; text-align:left; border-bottom:1px dashed var(--cruz)}
.nome-ir:hover{border-bottom-color:var(--accent); color:var(--accent-ink)}
.nome-ir:focus-visible{outline:none; box-shadow:var(--ring); border-radius:4px}
.quem .extra{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.rc-linha{padding:14px 0}
@media(min-width:760px){ .rc-linha{grid-template-columns:minmax(200px,1.2fr) minmax(0,1fr) 130px} }
.rc-prog{display:grid; gap:6px}
.rc-prog .d{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.rc-prog .d b{color:var(--ink); font-weight:500}
.rc-est{display:flex; justify-content:flex-end}
#gaveta-rc .acordo, #gaveta-op .acordo, #gaveta-ag .acordo, #gaveta-eq .acordo{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:6px 0 12px}
#gaveta-rc .acordo div, #gaveta-op .acordo div, #gaveta-ag .acordo div, #gaveta-eq .acordo div{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-dentro); padding:10px 12px}
#gaveta-rc .acordo span, #gaveta-op .acordo span, #gaveta-ag .acordo span, #gaveta-eq .acordo span{display:block; font-size:12.5px; color:var(--muted)}
#gaveta-rc .acordo b, #gaveta-op .acordo b, #gaveta-ag .acordo b, #gaveta-eq .acordo b{font-size:15.5px; font-weight:500; font-variant-numeric:tabular-nums}
.acordo-plano{font-size:12.5px; color:var(--muted); margin:8px 0 0}
#gaveta-rc .pcl{grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:2px 14px}
#gaveta-rc .pcl .v{grid-column:2; grid-row:1/3; align-self:center; font-weight:500}
#gaveta-rc .pcl .e{grid-column:3; grid-row:1/3; align-self:center}
.lista-entregas .linha{border-bottom:1px solid var(--line-2)}

/* ---- a Visão geral: os gráficos ---- */
.graficos{display:grid; gap:18px; margin-bottom:22px}
@media(min-width:1040px){ .graficos{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start} }
/* A fila de baixo da Visão geral segue a grelha dos gráficos: as mesmas colunas,
   o mesmo intervalo e o mesmo ponto de quebra, para as margens dos cartões
   caírem umas por baixo das outras. */
#e-geral .duas{gap:18px; grid-template-columns:minmax(0,1fr)}
@media(min-width:1040px){ #e-geral .duas{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }
.gr{padding:18px 20px; display:grid; gap:12px; align-content:start}
.gr-t{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.gr-t h3{font-size:15.5px; font-weight:500; margin:0}
.gr-t .leg{margin-left:auto; display:flex; gap:12px; font-size:12.5px; color:var(--muted)}
.gr-t .leg i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.gr svg{width:100%; height:auto; display:block; overflow:visible}
.gr svg text{font-family:var(--sans); fill:var(--muted); font-size:11.5px}
.gr svg .gl{stroke:var(--line)} .gr svg .b1{fill:var(--accent)} .gr svg .b0{fill:var(--cruz)}
.gr svg .vl{fill:var(--ink); font-weight:500}
.gr + .gr-t, .gr .gr-t + div + .gr-t{margin-top:6px}
.barras-h{display:grid; gap:10px}
.barras-h .bh{display:grid; grid-template-columns:130px minmax(0,1fr) 112px; gap:12px; align-items:center; font-size:13.5px}
.barras-h .bh span{color:var(--ink-2)}
.barras-h .bh b{text-align:right; font-weight:500; font-variant-numeric:tabular-nums}
.barras-h .tr{height:10px; border-radius:99px; background:var(--sunken); overflow:hidden}
.barras-h .tr i{display:block; height:100%; border-radius:99px; min-width:0}
.metodos .bar{display:flex; height:14px; border-radius:99px; overflow:hidden; gap:2px; margin-bottom:10px; background:var(--sunken)}
.metodos .bar i{display:block; height:100%}
.metodos ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:13.5px}
.metodos li{display:grid; grid-template-columns:12px minmax(0,1fr) auto 44px; gap:8px; align-items:center}
.metodos li i{width:10px; height:10px; border-radius:3px}
.metodos li b{font-weight:500; font-variant-numeric:tabular-nums; text-align:right}
.metodos li em{font-style:normal; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}
.funil{display:grid; gap:8px}
.funil .f{display:grid; grid-template-columns:150px minmax(0,1fr) 60px; gap:12px; align-items:center; font-size:13.5px}
.funil .tr{height:22px; border-radius:6px; background:var(--sunken); overflow:hidden}
.funil .tr i{display:block; height:100%; background:var(--accent); border-radius:6px}
.funil .f b{font-weight:500; text-align:right; font-variant-numeric:tabular-nums}
.gr .nota-gr{font-size:12.5px; color:var(--muted); margin:2px 0 0; line-height:1.5}
.gr-vazio{font-size:13.5px; color:var(--muted); padding:18px 0}

/* O «Mais» e os nomes curtos só existem no telemóvel. */
.mais-tel, .rot-tel{display:none}

/* ============================================================
   OPORTUNIDADES (PLANO.md, passo 11) — o quadro e a lista
   A estrutura é a do ecrã de Leads do Tracktor; as cores, os cantos, as
   sombras e a letra são as deste painel, e as etiquetas de etapa são as
   .pill de sempre. Nada aqui inventa um token.
   ============================================================ */
/* Só para leitores de ecrã: os avisos anunciados (nucleo.js, anunciar). */
.so-leitor{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* Filtros que se ligam e desligam são botões com aria-pressed, não separadores:
   o mesmo desenho do escolhido. */
.subtabs button[aria-pressed="true"]{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:500}
.subtabs button[aria-pressed="true"] .c{color:var(--accent-ink)}
/* O título de uma gaveta recebe o foco ao abrir (é por ele que o leitor diz onde
   se está); não precisa de anel, porque ninguém o activa. */
#gaveta h2:focus, #gaveta-rc h2:focus, #gaveta-op h2:focus, #gaveta-ag h2:focus, #gaveta-ck h2:focus, #gaveta-eq h2:focus{outline:none}
/* No telemóvel, tudo o que se toca tem 44 px (auditoria de 26/09, P2): os filtros,
   as alternâncias e os botões pequenos das Oportunidades. O nome no cartão ganha a
   área por fora, sem mudar o desenho. */
@media(max-width:899px){
  .subtabs button{min-height:44px}
  .vista button{height:44px}
  #e-oportunidades .btn{min-height:44px}
  .op-cartao .op-nome, .op-lista .op-nome{padding:12px 0; margin:-12px 0}
}
/* O atributo hidden perde para qualquer display do autor (o .form-grelha label
   é grid): aqui, escondido é escondido. */
#e-oportunidades [hidden], #gaveta-op [hidden], #modalCx [hidden], #gaveta-ag [hidden], #gaveta-eq [hidden]{display:none !important}
/* O quadro desliza por dentro; sem min-width:0 a coluna principal crescia até
   à largura dele e era a página inteira que andava de lado no telemóvel. */
.principal{min-width:0}
.op-barra-filtros{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.op-barra-filtros .subtabs{margin-bottom:0; flex:1 1 auto; min-width:0}
/* À direita, juntos: a oferta, as arquivadas e a alternância Lista | Quadro. Se
   não couberem ao lado das origens, descem juntos e ficam encostados à direita. */
.op-controlos{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto}
.vista button{display:inline-flex; align-items:center; gap:7px}
.vista button .fi{font-size:16px}
#op-arq[aria-pressed="true"]{background:var(--sunken)}

.op-quadro{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(216px,1fr); gap:12px;
  overflow-x:auto; padding-bottom:10px; overscroll-behavior-x:contain; align-items:start}
.op-col{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r); padding:12px;
  min-height:180px; min-width:0; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, background .15s}
.op-col.alvo{border-color:var(--accent); background:var(--accent-soft)}
.op-col-t{display:flex; align-items:center; gap:8px; padding:2px 2px 0}
.op-col-n{margin-left:auto; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.op-col-soma{font-size:12.5px; color:var(--muted); padding:0 2px; margin-top:-4px; font-variant-numeric:tabular-nums}
.op-col-lista{display:grid; grid-template-columns:minmax(0,1fr); gap:10px; min-width:0}
.op-col-vazia{margin:0; padding:18px 10px; text-align:center; font-size:12.5px; color:var(--muted);
  border:1px dashed var(--cruz); border-radius:var(--r-dentro)}

.op-cartao{background:var(--card); border:1px solid var(--line); border-radius:var(--r-dentro); padding:12px 14px;
  box-shadow:var(--shadow-1); display:grid; grid-template-columns:minmax(0,1fr); gap:6px; min-width:0; transition:box-shadow .15s, border-color .15s}
.op-cartao[draggable="true"]{cursor:grab}
.op-cartao:hover{box-shadow:var(--shadow-2); border-color:var(--cruz)}
.op-cartao.a-voar{opacity:.5}
.op-t{display:flex; align-items:flex-start; gap:8px}
.op-nome{font:inherit; font-size:14.5px; font-weight:500; color:var(--ink); background:none; border:0; padding:0;
  text-align:left; cursor:pointer; min-height:24px; line-height:1.35}
.op-nome:hover{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px}
.op-nome:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}
.op-orig{position:relative; margin-left:auto; flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink)}
.op-orig .fi{font-size:15px}
.op-orig .sr, .op-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.op-of{font-size:13px; color:var(--muted); line-height:1.4}
.op-v{font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.op-meta{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted)}
.op-resp, .op-prev{display:inline-flex; align-items:center; gap:5px; white-space:nowrap; min-width:0}
.op-resp{overflow:hidden; text-overflow:ellipsis}
.op-resp .fi, .op-prev .fi{font-size:13px; flex:none}
.op-prev{margin-left:auto; color:var(--ink-2); font-variant-numeric:tabular-nums}
/* A previsão que já passou numa venda ainda aberta é trabalho: diz-se em âmbar. */
.op-prev.atraso{color:var(--amber)}
#op-oferta{max-width:260px}
.op-pe{display:flex; align-items:flex-start; gap:8px; padding-top:6px; border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--muted)}
.op-pe:has(> .op-ha:only-child){justify-content:flex-end}
.op-estado{flex:1 1 auto; min-width:0; overflow:hidden; color:var(--accent-ink); line-height:1.45;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2}
.op-estado .fi{margin-right:5px; vertical-align:-.12em}
.op-estado.ok{color:var(--ok-ink)}
.op-estado .fi{font-size:13px}
.op-ha{margin-left:auto; flex:none; white-space:nowrap}

.op-lista .op-nome{font-size:14px}
.op-lista td{vertical-align:top}
.op-lista table{min-width:900px}
.op-lista td:nth-child(3), .op-lista td:nth-child(4), .op-lista td:nth-child(5), .op-lista td:last-child{white-space:nowrap}
.op-lista td:first-child{min-width:190px}

.op-pessoa{display:grid; gap:8px; font-size:14px}
.op-pessoa a, .op-pessoa span{display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); text-decoration:none;
  min-height:24px}
.op-pessoa a:hover{color:var(--accent-ink); text-decoration:underline}
.op-nota{font-size:13.5px; color:var(--muted); line-height:1.55; margin:0 0 10px}
#gaveta-op .form-grelha + .acoes-g, #gaveta-op .erro + .acoes-g, #gaveta-ag .form-grelha + .acoes-g, #gaveta-ag .erro + .acoes-g, #gaveta-eq .form-grelha + .acoes-g, #gaveta-eq .erro + .acoes-g{margin-top:12px}
#gaveta-op .form-grelha label > span small, #gaveta-ag .form-grelha label > span small, #gaveta-eq .form-grelha label > span small{color:var(--muted); font-weight:400}
/* O símbolo não se separa do número: «MZ» numa linha e «8 500,00» na outra lê-se mal. */
#gaveta-op .acordo b, #gaveta-ag .acordo b, #gaveta-eq .acordo b{white-space:nowrap; font-size:clamp(13.5px, 3.7vw, 15.5px)}

.op-procura{display:grid; gap:5px}
.op-achados{display:grid; gap:6px; margin-top:8px; max-height:228px; overflow-y:auto}
.op-achado{font:inherit; text-align:left; display:grid; gap:1px; padding:9px 12px; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--card); cursor:pointer}
.op-achado b{font-size:14px; font-weight:500}
.op-achado span{font-size:12.5px; color:var(--muted)}
.op-achado:hover{border-color:var(--cruz); background:var(--card-2)}
.op-achado[aria-selected="true"]{border-color:var(--accent); background:var(--accent-soft)}
.op-achado:focus-visible{outline:none; box-shadow:var(--ring)}
#modalCx .vista{width:fit-content}

@media(max-width:699px){
  .op-controlos{margin-left:0; width:100%}
  .op-barra-filtros .subtabs{flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  .op-barra-filtros .subtabs::-webkit-scrollbar{display:none}
  .op-barra-filtros .subtabs button{flex:none}
  #op-oferta{height:44px; max-width:none; flex:1 1 100%}
  .op-quadro{grid-auto-columns:minmax(252px,84vw); scroll-snap-type:x mandatory}
  .op-col{scroll-snap-align:start}
}

/* ============================================================
   AUDITORIA FINAL (PLANO.md, Design, parte 6) — acertos de acessibilidade
   ============================================================ */
/* O nome da oferta é o botão que abre: parece texto, porta-se como botão. */
.oferta-nome{font:inherit; color:inherit; background:none; border:0; padding:2px 0; margin:-2px 0; text-align:left; min-height:24px;
  cursor:pointer; letter-spacing:inherit; line-height:inherit}
.oferta-nome:focus-visible{outline:none; box-shadow:var(--ring); border-radius:4px}
/* Contrastes que ficavam abaixo do mínimo (axe e detector). As iniciais das
   capas sem imagem são letra grande e decorativa: 3:1 chega, e ficam discretas. */
.oferta-capa .capa-vazia, .capa .medida{color:var(--muted)}
/* A linha arquivada tem opacidade .85; o texto da miniatura sobe um tom para
   continuar acima de 4,5:1 depois de esbatido. */
.oferta-min-capa{color:var(--ink-2)}
.capa .ini{color:#8F8981}
.item.sair:hover{color:var(--red-ink)}
/* Reconciliação: o nome que abre a gaveta tem 24 px de alvo. */
.nome-ir{min-height:24px; min-width:24px}
/* No telemóvel a grelha de números tem duas colunas: com um número ímpar, o
   último ocupa a linha inteira em vez de deixar uma casa vazia ao lado. */
@media(max-width:560px){ .kpis > .kpi:last-child:nth-child(odd){grid-column:1 / -1} }
/* Os separadores das Integrações deslizam de lado no telemóvel: o fim esbate-se
   para se ver que há mais do que cabe, em vez de «IDs dos produtos» cortado a meio. */
@media(max-width:699px){
  :is(#e-integracoes, dialog.int) .abas{scrollbar-width:none; padding-right:28px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  :is(#e-integracoes, dialog.int) .abas::-webkit-scrollbar{display:none}
  :is(#e-integracoes, dialog.int) .aba{flex:none; white-space:nowrap}
}

/* ============================================================
   ECRÃ ESTREITO — A NAVEGAÇÃO NO FUNDO
   Escrito no fim da folha de propósito: as regras base de .item, .barra,
   .conteudo e .item .tag ficam acima e, com a mesma especificidade, ganham
   por ordem. Já aconteceu duas vezes neste ficheiro.
   ============================================================ */
/* No telemóvel a navegação vai para o fundo do ecrã e fica lá. É onde o
   polegar chega sem mudar a mão de sítio, e liberta o topo, que antes gastava
   120px em marca e cartão de utilizador antes de haver conteúdo nenhum.
   Sem min-width:0 a coluna cresce até caber tudo e é a página inteira que
   passa a andar de lado. */
@media(max-width:899px){
  .lado{position:fixed; left:0; right:0; bottom:0; z-index:40; min-width:0;
    border-right:0; border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom)}
  .lado-topo, .lado-pe, .negocio{display:none}
  .menu{display:flex; gap:0; padding:5px 4px; min-width:0; flex:none;
    overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .grupo{display:contents}
  .grupo-t{display:none}
  .menu-fim{margin-top:0; padding-top:0; border-top:0}

  /* Cinco lugares com nome, e não dezassete ícones sem nome: Início,
     Reconciliação, Transacções, Ofertas e «Mais» (PLANO.md, Design, parte 5).
     width:auto anula o width:100% da regra base: numa fila horizontal isso
     dava a cada ícone a largura do ecrã inteiro. */
  .menu{overflow:visible}
  .item{display:none; flex:1 1 0; width:auto; min-width:0; flex-direction:column; justify-content:center; gap:3px;
    padding:6px 0 4px; min-height:0; position:relative; font-size:11px; border-radius:0}
  .item[data-fundo], .item.mais-tel{display:flex}
  .item .rot, .item .ext{display:none}
  .item .rot-tel{display:block; font-size:11px; line-height:1.2}
  .item .fi{font-size:18px}
  .item:hover{background:none; color:var(--muted)}
  .item[aria-current="page"]{background:none; color:var(--accent-ink)}

  /* O número por fazer passa a sinal no canto do ícone, que é onde cabe. */
  .item .tag{position:absolute; top:1px; left:calc(50% + 4px); margin:0;
    min-width:16px; height:16px; padding:0 4px; border-radius:99px; line-height:1;
    background:var(--red); color:#FFF; font-size:10px; font-weight:500;
    display:grid; place-items:center; border:2px solid var(--card)}
  .item[aria-current="page"] .tag, .item .tag.at{background:var(--red); color:#FFF}

  /* A FOLHA DO «MAIS»: sobe de baixo com o menu inteiro, com os nomes. */
  .app.mais-aberto .lado{top:auto; max-height:82svh; overflow-y:auto; border-radius:20px 20px 0 0;
    box-shadow:var(--shadow-pop); border-top:0; background:var(--card)}
  .app.mais-aberto::before{content:""; position:fixed; inset:0; z-index:39; background:rgba(28,26,23,.32)}
  .app.mais-aberto .menu{display:block; padding:12px 12px 8px}
  .app.mais-aberto .negocio{display:grid; margin:14px 14px 0}
  .app.mais-aberto .lado-pe{display:grid; grid-template-columns:1fr 1fr; padding:12px 14px 14px}
  .app.mais-aberto .grupo{display:block}
  .app.mais-aberto .item{display:flex; flex-direction:row; justify-content:flex-start; gap:12px; width:100%;
    padding:10px 12px; min-height:44px; font-size:14.5px; border-radius:var(--r-s)}
  .app.mais-aberto .item[hidden]{display:none !important}
  .app.mais-aberto .item .rot{display:block}
  .app.mais-aberto .item .rot-tel{display:none}
  .app.mais-aberto .item .ext{display:block}
  .app.mais-aberto .item .tag{position:static; margin-left:auto; border:0}
  .app.mais-aberto .item[aria-current="page"]{background:var(--accent-soft)}
  .app.mais-aberto .item.mais-tel .rot-tel{display:block}
  .app.mais-aberto .grupo + .grupo{margin-top:6px; padding-top:6px; border-top:1px solid var(--line)}

  /* Perfil e terminar sessão sobem para o cabeçalho: aqui tiravam lugar a
     secções que se abrem todos os dias. */
  .item[data-ecra="perfil"], .item.sair{display:none}
  .app.mais-aberto .item[data-ecra="perfil"], .app.mais-aberto .item.sair{display:flex}
  .graficos .gr, .duas .gr{padding:16px}
  .kpi{padding:14px 16px}
  .kpi .v{font-size:19px; white-space:nowrap}
  /* A tabela das últimas entradas perde a coluna do método, que o nome já
     sugere, e deixa de precisar de deslizar. */
  #e-geral table{min-width:0}
  #e-geral th:nth-child(2), #e-geral td:nth-child(2){display:none}
  #e-geral td, #e-geral th{padding:12px 14px}
  .barras-h .bh{grid-template-columns:100px minmax(0,1fr) 96px; font-size:13px}
  .funil .f{grid-template-columns:118px minmax(0,1fr) 44px; font-size:13px}
  .fila #fila > .linha{padding:14px 16px}
  .grupo-fila{padding:10px 16px 6px}
  .estado-cursos{margin-left:0; width:100%}

  /* O cabeçalho fica com os três atalhos e mais nada: o título da página
     repetia-se três centímetros abaixo, no título do próprio ecrã. */
  .barra{padding:0 16px}
  .barra h1{display:none}
  .barra-acoes{margin-left:auto}

  /* O conteúdo não pode acabar por baixo da fita. */
  .conteudo{padding:var(--s3) 16px calc(70px + env(safe-area-inset-bottom))}
}



/* ============================================================
   INTEGRAÇÕES (/painel/integracoes)

   Era a página integracoes.html, com o seu próprio estilo. Entrou na aplicação
   (PLANO.md, passo 6b, fase C3) e o estilo veio com ela, preso ao ecrã e aos
   seus diálogos por :is(#e-integracoes, dialog.int): as classes daqui (.barra,
   .cartao, .btn, .erro) têm nomes iguais às do painel, e sem o prefixo uma
   mexia na outra. O cabeçalho, a moldura e a roda são os do painel.
   ============================================================ */
#e-integracoes, dialog.int{--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
:is(#e-integracoes, dialog.int) .num{font-family:var(--num); font-variant-numeric:tabular-nums}
:is(#e-integracoes, dialog.int) code, :is(#e-integracoes, dialog.int) .mono{font-family:var(--mono); font-size:12.5px}
:is(#e-integracoes, dialog.int) a{color:var(--accent)}
:is(#e-integracoes, dialog.int) .abas{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto}
:is(#e-integracoes, dialog.int) .aba{font:inherit; font-size:14px; background:none; border:0; border-bottom:2px solid transparent;
  padding:10px 14px; color:var(--muted); cursor:pointer; white-space:nowrap}
:is(#e-integracoes, dialog.int) .aba[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--ink); font-weight:500}

:is(#e-integracoes, dialog.int) .int-barra{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
:is(#e-integracoes, dialog.int) .int-barra h2{font-size:17px; margin:0; font-weight:500}

:is(#e-integracoes, dialog.int) .btn{font:inherit; font-weight:500; font-size:13.5px; border:1px solid var(--line); border-radius:99px;
  padding:7px 15px; cursor:pointer; background:var(--card); color:var(--ink); white-space:nowrap}
:is(#e-integracoes, dialog.int) .btn:hover{border-color:var(--cruz)}
:is(#e-integracoes, dialog.int) .btn:disabled{opacity:.55; cursor:default}
:is(#e-integracoes, dialog.int) .btn-p{background:var(--cta); color:#FFF; border:0; box-shadow:var(--cta-shadow)}
:is(#e-integracoes, dialog.int) .btn-mau{color:var(--red)}
:is(#e-integracoes, dialog.int) .btn-s{padding:4px 11px; font-size:12.5px}
:is(#e-integracoes, dialog.int) .btn:focus-visible, :is(#e-integracoes, dialog.int) .aba:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

:is(#e-integracoes, dialog.int) .cartao{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin-bottom:14px}
:is(#e-integracoes, dialog.int) .cartao-t{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
:is(#e-integracoes, dialog.int) .cartao-t h3{font-size:16px; margin:0; font-weight:500}
:is(#e-integracoes, dialog.int) .cartao .url{font-family:var(--mono); font-size:12.5px; color:var(--muted); word-break:break-all; margin-top:3px}
:is(#e-integracoes, dialog.int) .cartao .desc{font-size:13.5px; color:var(--muted); margin-top:4px}
:is(#e-integracoes, dialog.int) .dados{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 20px; margin:14px 0 4px}
:is(#e-integracoes, dialog.int) .dados dt{font-family:var(--num); font-size:12.5px; color:var(--muted-2)}
:is(#e-integracoes, dialog.int) .dados dd{margin:2px 0 0; font-size:13.5px}
:is(#e-integracoes, dialog.int) .acoes{display:flex; gap:7px; flex-wrap:wrap; margin-top:14px}

:is(#e-integracoes, dialog.int) .pill{display:inline-flex; align-items:center; font-family:var(--num); font-size:12.5px; font-weight:500; border-radius:99px; padding:3px 9px}
:is(#e-integracoes, dialog.int) .pill.ok{background:var(--ok-soft); color:var(--ok-ink)}
:is(#e-integracoes, dialog.int) .pill.pend{background:var(--amber-soft); color:var(--amber)}
:is(#e-integracoes, dialog.int) .pill.mau{background:var(--red-soft); color:var(--red-ink)}
:is(#e-integracoes, dialog.int) .pill.neutro{background:var(--bg); color:var(--muted); border:1px solid var(--line)}
:is(#e-integracoes, dialog.int) .pill.teste{background:var(--accent-soft); color:var(--accent)}

:is(#e-integracoes, dialog.int) .alerta{margin-top:12px; padding:10px 13px; border-radius:var(--r-s); background:var(--amber-soft);
  color:#6B4700; font-size:13.5px}
:is(#e-integracoes, dialog.int) .resultado{margin-top:12px; padding:10px 13px; border-radius:var(--r-s); font-size:13.5px}
:is(#e-integracoes, dialog.int) .resultado.bom{background:var(--ok-soft); color:#0F5A39}
:is(#e-integracoes, dialog.int) .resultado.mau{background:var(--red-soft); color:#8C1F17}
:is(#e-integracoes, dialog.int) pre{background:#101012; color:#E9E9E6; border-radius:var(--r-s); padding:12px 14px; overflow:auto;
  font-family:var(--mono); font-size:12px; line-height:1.55; margin:8px 0; white-space:pre}
:is(#e-integracoes, dialog.int) .resultado pre{background:rgba(0,0,0,.06); color:inherit; white-space:pre-wrap; word-break:break-all; max-height:220px}

:is(#e-integracoes, dialog.int) .tabela{width:100%; border-collapse:collapse; background:var(--card)}
:is(#e-integracoes, dialog.int) .tabela th{font-family:var(--num); font-size:12.5px; color:var(--muted-2);
  font-weight:500; text-align:left; padding:10px 12px; border-bottom:1px solid var(--line-2); white-space:nowrap}
:is(#e-integracoes, dialog.int) .tabela td{padding:10px 12px; border-bottom:1px solid var(--line-2); font-size:13.5px; vertical-align:top}
:is(#e-integracoes, dialog.int) .tabela tr:last-child td{border-bottom:0}
:is(#e-integracoes, dialog.int) .moldura{border:1px solid var(--line); border-radius:var(--r); overflow:auto; background:var(--card)}
:is(#e-integracoes, dialog.int) .entregas{margin-top:14px}
:is(#e-integracoes, dialog.int) .entregas details summary{cursor:pointer; color:var(--muted); font-size:12.5px}

/* As notificações no telemóvel (passo 19): os passos para instalar no iPhone,
   os tipos que chegam a este aparelho, os outros aparelhos. */
#e-integracoes .push-passos{margin:12px 0 0; padding-left:20px; font-size:13.5px; line-height:1.6; color:var(--ink-2)}
#e-integracoes .push-passos li + li{margin-top:4px}
#e-integracoes .push-nota{margin:10px 0 0; font-size:12.5px; color:var(--muted-2)}
#e-integracoes .push-tipos{border:0; padding:0; margin:14px 0 0; display:grid; gap:10px}
#e-integracoes .push-tipos legend{font-size:12.5px; color:var(--muted-2); font-family:var(--num); padding:0; margin-bottom:8px}
#e-integracoes .push-tipo{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; cursor:pointer}
#e-integracoes .push-tipo input{width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:var(--accent)}
#e-integracoes .push-tipo b{display:block; font-weight:500}
#e-integracoes .push-tipo small{display:block; color:var(--muted); font-size:12.5px; margin-top:1px}
#e-integracoes .push-outros{list-style:none; margin:10px 0 0; padding:0}
#e-integracoes .push-outros li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line-2)}
#e-integracoes .push-outros li:first-child{border-top:0}
#e-integracoes .push-outros b{display:block; font-weight:500; font-size:13.5px}
#e-integracoes .push-outros small{color:var(--muted); font-size:12.5px}
#e-integracoes .push-titulo{font-weight:500}
#e-integracoes .push-corpo{color:var(--muted); font-size:12.5px; margin-top:2px}
/* No telemóvel, as últimas notificações empilham-se como no ecrã bloqueado:
   uma tabela de três colunas escondia o estado do lado de fora. */
@media (max-width:640px){
  #push-avisos .tabela tr:first-child{display:none}
  #push-avisos .tabela, #push-avisos .tabela tbody, #push-avisos .tabela tr, #push-avisos .tabela td{display:block}
  #push-avisos .tabela tr{padding:12px 14px; border-bottom:1px solid var(--line-2)}
  #push-avisos .tabela tr:last-child{border-bottom:0}
  #push-avisos .tabela td{padding:0; border:0}
  #push-avisos .tabela td:first-child{font-size:12.5px; color:var(--muted-2); margin-bottom:3px}
  #push-avisos .tabela td:last-child{margin-top:6px}
}

:is(#e-integracoes, dialog.int) .vazio{padding:40px 20px; text-align:center; color:var(--muted); background:var(--card);
  border:1px dashed var(--line); border-radius:var(--r)}

dialog.int{border:0; border-radius:16px; padding:0; width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 40px);
  box-shadow:0 24px 60px rgba(0,0,0,.2)}
dialog.int::backdrop{background:rgba(10,10,10,.35)}
:is(#e-integracoes, dialog.int) .dlg{padding:22px 24px}
:is(#e-integracoes, dialog.int) .dlg h2{margin:0 0 4px; font-size:19px}
:is(#e-integracoes, dialog.int) .dlg .ajuda{font-size:12.5px; color:var(--muted-2); margin:4px 0 0}
:is(#e-integracoes, dialog.int) .campo{display:block; margin-top:14px}
:is(#e-integracoes, dialog.int) .campo > span{display:block; font-size:13px; font-weight:500; margin-bottom:5px}
:is(#e-integracoes, dialog.int) .campo input[type=text], :is(#e-integracoes, dialog.int) .campo input[type=url], :is(#e-integracoes, dialog.int) .campo input[type=password], :is(#e-integracoes, dialog.int) .campo textarea{width:100%; font:inherit; font-size:14px;
  padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink)}
:is(#e-integracoes, dialog.int) .campo textarea{min-height:70px; resize:vertical; font-family:var(--mono); font-size:12.5px}
:is(#e-integracoes, dialog.int) .campo input:focus, :is(#e-integracoes, dialog.int) .campo textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
:is(#e-integracoes, dialog.int) .opcoes{display:flex; flex-wrap:wrap; gap:6px 16px}
:is(#e-integracoes, dialog.int) .opcoes label{display:flex; gap:6px; align-items:center; font-size:13.5px}
:is(#e-integracoes, dialog.int) .opcoes.col{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); max-height:190px; overflow:auto;
  border:1px solid var(--line-2); border-radius:10px; padding:8px 10px}
:is(#e-integracoes, dialog.int) .erro{margin-top:12px; padding:9px 12px; border-radius:var(--r-s); background:var(--red-soft); color:#8C1F17; font-size:13.5px}
:is(#e-integracoes, dialog.int) .dlg-pe{display:flex; justify-content:flex-end; gap:8px; margin-top:20px}
:is(#e-integracoes, dialog.int) .segredo{display:flex; gap:8px; align-items:center; margin-top:14px}
:is(#e-integracoes, dialog.int) .segredo code{flex:1; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  word-break:break-all; font-size:13px}

:is(#e-integracoes, dialog.int) .doc h2{font-size:18px; margin:28px 0 8px}
:is(#e-integracoes, dialog.int) .doc h2:first-child{margin-top:0}
:is(#e-integracoes, dialog.int) .doc h3{font-size:15px; margin:18px 0 6px}
:is(#e-integracoes, dialog.int) .doc p, :is(#e-integracoes, dialog.int) .doc li{font-size:14px; max-width:78ch}
:is(#e-integracoes, dialog.int) .doc .tabela{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media(max-width:640px){ :is(#e-integracoes, dialog.int) .cartao{padding:15px} }

/* ============================================================
   TRANSACÇÕES (pedido de 26/09) — cada tentativa, e a leitura dela
   A lista usa as peças das Oportunidades (a barra de filtros, a tabela que
   desliza, o nome que é botão). A leitura tem duas colunas: o que aconteceu
   à esquerda, quem pagou e o que a Paystack ou o M-Pesa sabem à direita.
   ============================================================ */
#e-transacoes [hidden]{display:none !important}
.tr-busca{position:relative; display:flex; align-items:center; margin-left:auto; flex:0 1 280px; min-width:200px}
.tr-busca .fi{position:absolute; left:14px; font-size:16px; color:var(--muted-2); pointer-events:none}
.tr-busca input{font:inherit; font-size:13.5px; width:100%; height:38px; padding:0 16px 0 38px; border-radius:99px;
  border:1px solid var(--line); background:var(--card); color:var(--ink)}
.tr-busca input:hover{border-color:var(--cruz)}
.tr-busca input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tr-lista table{min-width:880px}
.tr-lista tbody tr{cursor:pointer}
/* O símbolo só aparece no telemóvel, onde a linha deixa de ter cabeçalho. */
.tr-sim{display:none}
.tr-lista td:nth-child(2), .tr-lista td:nth-child(5), .tr-data{white-space:nowrap}
.tr-ref{font-family:var(--mono); font-size:12.5px; display:inline-block; max-width:190px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:middle}
.tr-canal{display:inline-flex; align-items:center; height:24px; padding:0 9px; border:1px solid var(--line);
  border-radius:var(--r-s); font-size:12.5px; color:var(--ink-2); background:var(--card); white-space:nowrap}
.tr-teste{display:inline-block; margin-left:6px; font-family:var(--num); font-size:11px; font-weight:500; padding:1px 7px;
  border-radius:99px; background:var(--sunken); color:var(--muted); vertical-align:middle}
.tr-nota{font-size:12.5px; color:var(--muted-2); margin:10px 0 0}

.tr-migalhas{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin-bottom:var(--s2); min-width:0}
.tr-volta{font:inherit; font-weight:500; color:var(--ink); background:none; border:0; padding:0; cursor:pointer; min-height:28px}
.tr-volta:hover{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px}
.tr-volta:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}
.tr-aqui{font-family:var(--mono); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}

.tr-leitura{display:grid; gap:var(--s3); align-items:start}
@media(min-width:1040px){ .tr-leitura{grid-template-columns:minmax(0,1fr) 340px} }
.tr-principal{display:grid; gap:22px; min-width:0}
.tr-topo{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.tr-valor{font-size:30px; font-weight:500; letter-spacing:-.03em; line-height:1.1; margin:0}
/* O foco vem cá parar ao abrir, para o leitor de ecrã começar pelo valor; não é um sítio onde se clique. */
.tr-valor:focus{outline:none}
.tr-topo .pill{margin-left:auto}
.tr-conta{border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; font-size:14.5px; line-height:1.55; background:var(--card)}
.tr-conta p{margin:0; max-width:72ch}
.tr-conta.tom-ok{background:var(--ok-soft); border-color:transparent}
.tr-conta.tom-mau{background:var(--red-soft); border-color:transparent}
.tr-conta.tom-atencao{background:var(--amber-soft); border-color:transparent}
.tr-aviso{display:block; margin-top:6px; font-size:12.5px; color:var(--muted)}
.tr-pares{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px 24px; margin:0}
.tr-pares dt, .tr-analise dt{font-size:12.5px; color:var(--muted-2)}
.tr-pares dd{margin:3px 0 0; font-size:14.5px; display:flex; align-items:center; gap:6px; min-width:0}
.tr-longo{overflow-wrap:anywhere}
.tr-copiar{flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:var(--r-s); border:0;
  background:none; color:var(--muted); cursor:pointer}
.tr-copiar:hover{background:var(--sunken); color:var(--ink)}
.tr-copiar:focus-visible{outline:none; box-shadow:var(--ring)}
.tr-copiar .fi{font-size:16px}
.tr-bloco h3, .tr-lado h3{font-size:15px; font-weight:500; letter-spacing:-.02em; margin:0 0 10px}
.tr-passos{list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--line); display:grid; gap:10px}
.tr-passos li{display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; font-size:14px}
.tr-quando{font-family:var(--num); font-size:12.5px; color:var(--muted-2); white-space:nowrap}
.tr-outras{list-style:none; margin:0; padding:0}
.tr-outras li{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line-2); font-size:14px}
.tr-outras li:last-child{border-bottom:0}
.tr-outras .tr-quando{margin-left:auto}
.tr-vazio{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r); padding:26px 20px;
  text-align:center; color:var(--muted); font-size:14px; line-height:1.5}
.tr-lado{display:grid; gap:var(--s2); min-width:0}
.tr-quem{display:flex; align-items:center; gap:12px; min-width:0}
.tr-quem > div{display:grid; min-width:0}
.tr-quem b{font-weight:500; font-size:14.5px}
.tr-quem span{font-size:13px; color:var(--muted); overflow-wrap:anywhere}
.tr-ini{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font-weight:500}
.tr-wa{margin-top:14px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none}
.tr-analise dl{margin:0}
.tr-analise .tr-par{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0;
  border-bottom:1px solid var(--line-2)}
.tr-analise .tr-par:last-child{border-bottom:0}
.tr-analise dd{margin:0; font-size:14px; text-align:right; min-width:0; overflow-wrap:anywhere}
.tr-analise .tr-nota{margin:6px 0 0}
@media(max-width:699px){
  .tr-busca{flex:1 1 100%; margin-left:0}
  .tr-busca input{height:44px}
  .tr-volta{min-height:44px}
  .tr-passos li{grid-template-columns:1fr; gap:2px}
  /* No telemóvel cada tentativa é um cartão: quem, quanto, o estado e quando.
     A referência e o canal ficam na leitura, a um toque. Sem o cabeçalho da
     tabela, o símbolo da moeda vai com o valor. */
  .tr-lista{overflow:visible}
  .tr-lista table{min-width:0}
  .tr-lista thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .tr-lista tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"cli val" "est dat";
    gap:8px 12px; padding:14px 16px; border-bottom:1px solid var(--line-2)}
  .tr-lista tbody tr:last-child{border-bottom:0}
  .tr-lista td{padding:0; border:0}
  .tr-lista td:nth-child(1){grid-area:val; align-self:start}
  .tr-lista .tr-sim{display:inline}
  .tr-lista td:nth-child(2){grid-area:est}
  .tr-lista td:nth-child(3){grid-area:cli; min-width:0}
  .tr-lista td:nth-child(4), .tr-lista td:nth-child(5){display:none}
  .tr-lista td.tr-data{grid-area:dat; justify-self:end; align-self:center; font-size:12.5px; color:var(--muted-2)}
  .tr-lista .sub{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .tr-valor{font-size:26px}
}

/* ============================================================
   AGENDAMENTOS (PLANO.md, passo 17) — marcações, tipos de evento e
   disponibilidade. As peças são as do painel: pílulas para mudar de parte e
   filtrar, a lista dentro de um cartão, a gaveta das Oportunidades e a caixa
   para editar. O Cal.com foi a referência do fluxo, não do aspecto.
   ============================================================ */
#e-agenda [hidden]{display:none !important}
#ag-seccoes{margin-bottom:22px}
.ag-filtros{margin-bottom:14px; flex-wrap:wrap}
.ag-vazio-acoes{margin-top:16px; display:flex; justify-content:center}

/* A lista de marcações: um cartão, os dias por cabeçalho, uma linha por reunião. */
.ag-lista{padding:4px 0}
.ag-grupo + .ag-grupo{border-top:1px solid var(--line-2)}
.ag-dia{display:flex; align-items:center; gap:10px; margin:0; padding:16px 22px 6px; font-size:14px; font-weight:500;
  color:var(--ink-2); letter-spacing:-.005em}
.ag-dia::first-letter{text-transform:uppercase}
.ag-linha{display:grid; grid-template-columns:128px minmax(0,1fr) auto; gap:4px 18px; align-items:center; width:100%;
  padding:12px 22px; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;
  transition:background .15s}
.ag-linha:hover{background:var(--card-2)}
.ag-linha:focus-visible{outline:none; box-shadow:inset var(--ring)}
.ag-hora{font-size:14.5px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.ag-ate{color:var(--muted); font-weight:400}
.ag-corpo{display:grid; gap:2px; min-width:0}
.ag-titulo{font-size:14.5px; font-weight:500; letter-spacing:-.01em}
.ag-quem{font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ag-notas{font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ag-lado{display:grid; justify-items:end; gap:5px}
.ag-valor{font-size:13.5px; color:var(--ink-2); white-space:nowrap}

/* A gaveta de uma marcação. */
.ag-quando{margin:0 0 4px; font-size:13.5px; color:var(--muted); line-height:1.5}
.ag-quando::first-letter{text-transform:uppercase}
.ag-aviso{margin-top:12px; padding:12px 14px; border-radius:var(--r-dentro); background:var(--amber-soft); color:var(--amber);
  font-size:13.5px; line-height:1.55}
.ag-aviso.mau{background:var(--red-soft); color:var(--red-ink)}
.ag-aviso b{display:block; font-weight:500; margin-bottom:2px}
.ag-local{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px}
.ag-local > .fi{flex:none; width:36px; height:36px; padding:9px; border-radius:var(--r-dentro); background:var(--sunken); color:var(--ink-2)}
.ag-local > div{display:grid; gap:2px; min-width:0; font-size:13.5px}
.ag-local b{font-weight:500; font-size:14px}
.ag-local span{color:var(--muted)}
.ag-local a{color:var(--accent-ink); overflow-wrap:anywhere}
.ag-nota{font-size:13px; color:var(--muted); line-height:1.5; margin:0}
.acoes-g .ag-nota{align-self:center}
.ag-citacao{margin:12px 0 0; padding:10px 14px; border-radius:var(--r-dentro); background:var(--card-2);
  border:1px solid var(--line); font-size:14px; color:var(--ink-2); line-height:1.55}
.ag-pares{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.ag-pares div{display:grid; gap:2px}
.ag-pares span{font-size:12.5px; color:var(--muted)}
.ag-pares b{font-size:14px; font-weight:500}
.ag-livres{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px}
.ag-livres .ag-nota{margin-right:4px}
.ag-hora-livre{height:30px; padding:0 11px; border:1px solid var(--cruz); border-radius:99px; background:var(--card);
  font:inherit; font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-2); cursor:pointer}
.ag-hora-livre:hover{border-color:var(--accent); color:var(--accent-ink)}
.ag-hora-livre:focus-visible{outline:none; box-shadow:var(--ring)}

/* Os tipos de evento: uma linha cada, com o interruptor e as acções à direita. */
.ag-tipos{padding:0}
.ag-tipo{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px 20px; align-items:center; padding:18px 22px}
.ag-tipo + .ag-tipo{border-top:1px solid var(--line-2)}
.ag-tipo-info{display:grid; gap:8px; min-width:0}
.ag-tipo-t{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0}
.ag-tipo-nome{font:inherit; font-size:16px; font-weight:500; letter-spacing:-.015em; color:var(--ink); background:none; border:0;
  padding:0; cursor:pointer; text-align:left}
.ag-tipo-nome:hover{color:var(--accent-ink)}
.ag-tipo-nome:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}
.ag-tipo-url{font-size:13px; color:var(--muted); overflow-wrap:anywhere}
.ag-tipo-desc{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55; max-width:72ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ag-chips{display:flex; flex-wrap:wrap; gap:6px}
.ag-chip{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px; border:1px solid var(--line);
  border-radius:6px; background:var(--card); font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.ag-chip .fi{font-size:14px; color:var(--muted)}
.ag-chip.pausa{background:var(--amber-soft); border-color:transparent; color:var(--amber)}
.ag-chip.mau{background:var(--red-soft); border-color:transparent; color:var(--red-ink)}
.ag-tipo-acoes{display:flex; border:1px solid var(--line); border-radius:99px; overflow:hidden; background:var(--card)}
.ag-tipo-acoes .ag-icone{border:0; border-radius:0}
.ag-tipo-acoes .ag-icone + .ag-icone{border-left:1px solid var(--line)}
.ag-icone{width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%;
  background:var(--card); color:var(--ink-2); cursor:pointer; text-decoration:none; flex:none}
.ag-icone .fi{font-size:17px}
.ag-icone:hover{background:var(--sunken); color:var(--ink)}
.ag-icone:focus-visible{outline:none; box-shadow:var(--ring); position:relative}
.ag-icone.pequeno{width:32px; height:32px}
.ag-icone.pequeno .fi{font-size:15px}
.ag-rodape{margin:14px 4px 0; font-size:13px; color:var(--muted); line-height:1.55}
.ag-rodape a{color:var(--accent-ink)}

/* O interruptor: aceita marcações ou está em pausa. */
.ag-switch{position:relative; width:42px; height:24px; flex:none; border:0; border-radius:99px; padding:0;
  background:var(--line-strong, #D9D3CB); cursor:pointer; transition:background .18s}
.ag-switch span{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#FFF;
  box-shadow:0 1px 2px rgba(28,22,16,.25); transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.ag-switch[aria-checked="true"]{background:var(--accent)}
.ag-switch[aria-checked="true"] span{transform:translateX(18px)}
.ag-switch:focus-visible{outline:none; box-shadow:var(--ring)}
@media (prefers-reduced-motion:reduce){ .ag-switch, .ag-switch span{transition-duration:.01s} }

/* A caixa de um tipo de evento: onde é a reunião, em quatro escolhas. */
.ag-form small{color:var(--muted); font-weight:400}
.ag-locais{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
.ag-local-op{position:relative; cursor:pointer}
.ag-local-op input{position:absolute; opacity:0; width:1px; height:1px}
.ag-local-op > span{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; height:100%;
  padding:12px 14px; border:1px solid var(--cruz); border-radius:var(--r-dentro); background:var(--card)}
.ag-local-op .fi{grid-row:1 / span 2; font-size:18px; color:var(--muted)}
.ag-local-op b{font-size:13.5px; font-weight:500; color:var(--ink)}
.ag-local-op small{font-size:12.5px; color:var(--muted); line-height:1.4}
.ag-local-op input:checked + span{border-color:var(--accent); background:var(--accent-soft)}
.ag-local-op input:checked + span .fi, .ag-local-op input:checked + span b{color:var(--accent-ink)}
.ag-local-op input:focus-visible + span{box-shadow:var(--ring)}

/* A disponibilidade: um cartão por horário. */
.ag-disps{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px}
.ag-disp{padding:20px 22px; display:grid; gap:10px; align-content:start}
.ag-disp-t{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ag-disp-t h3{margin:0; font-size:16.5px; font-weight:500; letter-spacing:-.015em}
.ag-disp-fuso{display:flex; align-items:center; gap:6px; margin:0; font-size:13px; color:var(--muted)}
.ag-disp-fuso .fi{font-size:15px}
.ag-disp-semana{list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:14px; color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.ag-disp .acoes-g{margin-top:2px}

/* O editor da semana: um dia por linha, com os blocos de horas ao lado. */
.ag-omissao{align-self:end; padding-bottom:12px}
/* O visto dentro da grelha do formulário: sem isto herdava a altura e o
   enchimento de um campo de texto e virava um rectângulo roxo. */
.form-grelha .interruptor input, .ag-exc .interruptor input{min-height:0; width:17px; height:17px; padding:0; border-radius:5px}
/* A mudança de parte não faz saltar o ecrã: o topo tem sempre a altura do botão. */
#e-agenda .topo-ecra{min-height:40px; align-items:center}
.ag-semana{display:grid; gap:2px; margin-bottom:6px}
.ag-dia-ed{display:grid; grid-template-columns:170px minmax(0,1fr); gap:10px; align-items:start; padding:8px 0;
  border-bottom:1px solid var(--line-2)}
.ag-dia-ed:last-child{border-bottom:0}
.ag-dia-ed > .interruptor{min-height:38px}
.ag-dia-ed.fora > .interruptor{color:var(--muted)}
.ag-blocos{display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:38px}
.ag-bloco{display:inline-flex; align-items:center; gap:6px}
.ag-bloco input, .ag-exc input[type="date"], .ag-exc input[type="text"]{font:inherit; font-size:14px; height:38px; padding:0 10px;
  border:1px solid var(--cruz); border-radius:var(--r-s); background:var(--card); color:var(--ink); font-variant-numeric:tabular-nums}
.ag-bloco input:focus-visible, .ag-exc input:focus-visible{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
.ag-exc{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 0; border-bottom:1px solid var(--line-2)}
.ag-exc input[type="text"]{flex:1 1 160px; min-width:0}

@media(max-width:699px){
  /* No telemóvel a hora vai por cima, o estado e o valor à direita dela. */
  .ag-linha{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"hora lado" "corpo corpo"; padding:12px 16px}
  .ag-hora{grid-area:hora}
  .ag-lado{grid-area:lado; grid-auto-flow:column; align-items:center; gap:8px}
  .ag-corpo{grid-area:corpo}
  .ag-dia{padding:14px 16px 4px}
  .ag-tipo{grid-template-columns:minmax(0,1fr) auto; padding:16px}
  .ag-tipo-acoes{grid-column:1 / -1; justify-self:start}
  .ag-tipo-acoes .ag-icone{width:44px; height:44px}
  .ag-switch{width:48px; height:28px}
  .ag-switch span{width:22px; height:22px}
  .ag-switch[aria-checked="true"] span{transform:translateX(20px)}
  .ag-locais{grid-template-columns:1fr}
  .ag-dia-ed{grid-template-columns:1fr; gap:4px}
  .ag-pares{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ag-hora-livre{height:40px; padding:0 14px}
  /* As pílulas das partes e dos filtros deslizam numa linha em vez de ocuparem três. */
  #ag-seccoes, .ag-filtros{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:-16px; margin-right:-16px;
    padding:2px 16px; scroll-padding:0 16px}
  #ag-seccoes::-webkit-scrollbar, .ag-filtros::-webkit-scrollbar{display:none}
  #ag-seccoes button, .ag-filtros button{flex:none; min-height:44px}
  .ag-icone.pequeno{width:40px; height:40px}
  .ag-bloco input{height:44px}
}

/* ---- os funis (passo 18, F4): a lista e o construtor ----
   O quadro arrasta-se e amplia (transform no palco); os nós são botões, para o
   teclado e o leitor de ecrã chegarem a eles como a qualquer outro. */
.fn-sub{margin:4px 0 0; font-size:13.5px; color:var(--muted)}
.fn-linha{grid-template-columns:minmax(0,1fr) auto; align-items:center; padding-left:6px; padding-right:6px}
.fn-linha-acoes{display:flex; align-items:center; gap:10px; justify-content:flex-end}
.fn-linha-acoes .pill{min-width:84px; justify-content:center}
.fn-dup{display:inline-flex; align-items:center; gap:6px}
.fn-dup .fi{width:15px; height:15px; flex:none}
.fn-link-pe{justify-content:space-between; flex-wrap:wrap; gap:8px}
.fn-link-acoes{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
#fnLinkUrl{font-family:var(--num); font-size:13px}
#fnLinkAbrir{text-decoration:none; display:inline-flex; align-items:center}
/* No telemóvel o nome precisa da largura toda: o estado e o «Duplicar» descem
   para uma linha só deles, o estado à esquerda. */
@media(max-width:620px){
  .fn-linha{grid-template-columns:minmax(0,1fr)}
  .fn-linha-acoes{justify-content:space-between}
  .fn-linha-acoes .pill{order:-1; min-width:0}
}
.fn-nome{font:inherit; font-weight:500; color:var(--ink); background:none; border:0; padding:0; cursor:pointer; text-align:left}
.fn-nome:hover{color:var(--accent-ink)}
.fn-modelo{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px}
.fn-modelo legend{font-size:12.5px; color:var(--muted); font-weight:500; margin-bottom:6px; padding:0}
.fn-modelo label, .fn-tons label{display:inline-flex; align-items:center; gap:7px; min-height:36px; cursor:pointer}

.fn-cab{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:14px}
.fn-cab-t{margin-right:auto; min-width:0}
.fn-migalhas{font-size:13px; color:var(--muted)}
.fn-migalhas a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px}
.fn-migalhas a:hover{color:var(--accent-hi)}
.fn-titulo{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px}
.fn-titulo h2{margin:0; font-size:22px; font-weight:500; letter-spacing:-.03em; line-height:1.25}
.fn-lapis{display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:99px; background:none; color:var(--muted); cursor:pointer}
.fn-lapis:hover{background:var(--sunken); color:var(--ink)}
.fn-lapis .fi{width:17px; height:17px}
.fn-cab-acoes{display:flex; gap:8px; flex-wrap:wrap}

.fn-problemas{display:grid; gap:8px; margin-bottom:14px}
.fn-problemas ul{margin:4px 0 0; padding-left:18px}
.fn-problemas li{margin:2px 0}
.fn-erros, .fn-avisos, .fn-ok{border-radius:var(--r-s); padding:10px 14px; font-size:13.5px; line-height:1.5}
.fn-erros{background:var(--red-soft); color:var(--red-ink)}
.fn-avisos{background:var(--amber-soft); color:var(--amber)}
.fn-ok{display:flex; align-items:center; gap:8px; background:var(--ok-soft); color:var(--ok-ink)}
.fn-ok .fi{width:18px; height:18px; flex:none}

.fn-obra{display:grid; gap:16px; grid-template-columns:minmax(0,1fr); align-items:start}
@media(min-width:1100px){ .fn-obra.com-editor{grid-template-columns:minmax(0,1fr) 420px} }
/* O quadro, no espírito do FigJam (referência do Shelton, 02/10): cartões com a
   imagem da oferta, pegas para ligar, setas com o estilo de cada ligação e uma
   barra escura que aparece por cima da ligação escolhida. */
.fn-quadro{position:relative; height:min(66svh,660px); min-height:420px; overflow:hidden; border:1px solid var(--line);
  border-radius:var(--r); background-color:#F7F5F2; cursor:grab; touch-action:none;
  background-image:radial-gradient(var(--cruz) 1.1px, transparent 1.3px); background-size:20px 20px}
.fn-quadro.a-arrastar{cursor:grabbing}
.fn-quadro:focus{outline:none}
.fn-palco{position:absolute; left:0; top:0; transform-origin:0 0}
.fn-linhas{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
.fn-l{fill:none; stroke-linecap:round; stroke-linejoin:round}
.fn-l.sel{filter:drop-shadow(0 0 3px rgba(132,45,227,.55))}
.fn-toque{fill:none; stroke:transparent; stroke-width:18; pointer-events:stroke; cursor:pointer}
.fn-fantasma{fill:none; stroke-width:2.5; stroke-dasharray:6 6; stroke-linecap:round; opacity:.85}

.fn-no{position:absolute; box-sizing:border-box}
.fn-card{position:relative; display:flex; flex-direction:column; box-sizing:border-box; width:100%; height:100%; margin:0; padding:0;
  font:inherit; color:var(--ink); text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r-dentro);
  overflow:hidden; box-shadow:var(--shadow-1); cursor:grab; user-select:none; -webkit-user-select:none;
  transition:box-shadow .18s cubic-bezier(.2,.8,.2,1), border-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1)}
.fn-card:hover{border-color:var(--cruz); box-shadow:var(--shadow-2)}
.fn-card:focus-visible{outline:none; box-shadow:var(--ring), var(--shadow-2)}
.fn-no.sel .fn-card{border-color:var(--accent); box-shadow:var(--ring), var(--shadow-2)}
/* Arrastar levanta o cartão: o único movimento com autor do quadro. */
.fn-no.a-mover{z-index:4}
.fn-no.a-mover .fn-card{cursor:grabbing; transform:scale(1.025); box-shadow:var(--shadow-pop); border-color:var(--cruz)}
.fn-no.alvo .fn-card{border-color:var(--accent); box-shadow:0 0 0 4px rgba(132,45,227,.2), var(--shadow-2)}
.fn-no.solto .fn-card{border-style:dashed}
.fn-card-img{flex:none; position:relative; height:84px; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(150deg,#9338F2 0%,#6413BE 100%)}
.fn-card-img img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.fn-card-marca img{width:42px; height:42px; object-fit:contain}
.fn-card-txt{display:flex; flex-direction:column; gap:3px; min-width:0; padding:11px 14px 12px}
.fn-card b{font-size:14.5px; font-weight:500; line-height:1.3; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fn-card .fn-tipo{font-size:11.5px; font-weight:500; color:var(--accent-ink)}
.fn-no.downsell .fn-tipo{color:var(--amber)}
.fn-no.entrada .fn-card{background:var(--card-2)}
.fn-no.entrada .fn-tipo{color:var(--muted)}
.fn-card .fn-preco{font-size:13px; color:var(--ink-2)}
.fn-card .fn-pag{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.fn-card .fn-alerta{font-size:12px; color:var(--amber); font-weight:500}
.fn-card .fn-num{font-size:12px; color:var(--ok-ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.fn-no.fim .fn-card{align-items:center; justify-content:center; gap:4px; text-align:center;
  background:var(--ok-soft); border-color:#BFE6CD; color:var(--ok-ink)}
.fn-no.fim .fn-card .fi{width:24px; height:24px}
.fn-no.fim .fn-card b{font-size:15px}
.fn-no.fim .fn-card span{font-size:12px}

/* As pegas: um círculo na borda, da cor da ligação; um alvo de dedo maior do que se vê. */
.fn-pega{position:absolute; right:-10px; z-index:2; width:20px; height:20px; margin-top:-10px; padding:0;
  border-radius:99px; background:var(--card); border:2.5px solid var(--cor-pega, var(--accent)); cursor:crosshair;
  box-shadow:var(--shadow-1); transition:transform .15s cubic-bezier(.2,.8,.2,1)}
.fn-pega::after{content:""; position:absolute; inset:-10px; border-radius:99px}
.fn-pega:hover{transform:scale(1.2)}
.fn-pega:focus-visible{outline:none; transform:scale(1.2); box-shadow:var(--ring)}

.fn-rot{position:absolute; transform:translate(-50%,-50%); min-height:24px; padding:2px 10px; font:inherit; font-size:11.5px;
  font-weight:500; line-height:1.5; white-space:nowrap; color:var(--ink-2); background:var(--card);
  border:1.5px solid var(--cor, var(--line)); border-radius:99px; cursor:pointer; box-shadow:var(--shadow-1)}
.fn-rot::after{content:""; position:absolute; inset:-8px -4px}
.fn-rot:hover{color:var(--ink)}
.fn-rot.sel{color:var(--ink); box-shadow:0 0 0 3px rgba(132,45,227,.25), var(--shadow-1)}
.fn-rot:focus-visible{outline:none; box-shadow:var(--ring)}

/* A barra da ligação escolhida: escura, como a do FigJam, e só enquanto há uma escolhida. */
.fn-barra{position:absolute; z-index:6; display:flex; align-items:center; gap:4px; padding:6px; color:#EDE8E2;
  background:#1F1C19; border-radius:var(--r); box-shadow:var(--shadow-pop); cursor:default;
  animation:fn-surge .18s cubic-bezier(.2,.8,.2,1)}
.fn-barra[hidden]{display:none}
.fn-grupo-b{display:flex; align-items:center; gap:2px}
.fn-cores{display:grid; grid-template-columns:repeat(6, 22px); gap:6px; padding:2px 4px}
.fn-cor{width:22px; height:22px; padding:0; border-radius:99px; background:var(--c); border:2px solid #1F1C19;
  box-shadow:0 0 0 1px rgba(255,255,255,.2); cursor:pointer; transition:transform .12s ease}
.fn-cor:hover{transform:scale(1.12)}
.fn-cor[aria-pressed="true"]{box-shadow:0 0 0 2px #FFFFFF}
.fn-cor.padrao{background:linear-gradient(135deg,#15803D 0 50%,#8A837B 50% 100%)}
.fn-op{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:36px; height:36px; padding:0 8px;
  font:inherit; font-size:13px; font-weight:500; color:var(--line); background:none; border:0; border-radius:var(--r-s); cursor:pointer}
.fn-op svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.fn-op:hover{background:rgba(255,255,255,.09); color:#FFFFFF}
.fn-op[aria-pressed="true"]{background:rgba(255,255,255,.17); color:#FFFFFF}
.fn-op-mais{color:#FFFFFF; background:#842DE3; padding:0 12px; white-space:nowrap}
.fn-op-mais:hover{background:#9338F2}
.fn-cor:focus-visible, .fn-op:focus-visible{outline:2px solid #B98AF5; outline-offset:2px}
.fn-sep{width:1px; align-self:stretch; margin:3px 4px; background:rgba(255,255,255,.14)}
@keyframes fn-surge{from{opacity:0; transform:translateY(4px)}}

.fn-zoom{position:absolute; left:12px; bottom:12px; z-index:5; display:flex; align-items:center; gap:2px; padding:3px;
  background:var(--card); border:1px solid var(--line); border-radius:99px; box-shadow:var(--shadow-1); cursor:default}
.fn-zoom button{font:inherit; font-size:13.5px; min-width:36px; height:36px; padding:0 10px; border:0; border-radius:99px; background:none; color:var(--ink-2); cursor:pointer}
.fn-zoom button:hover{background:var(--sunken)}
.fn-zoom button:focus-visible{outline:none; box-shadow:var(--ring)}
.fn-zoom span{min-width:46px; text-align:center; font-size:12.5px; color:var(--muted)}
/* O menu do clique direito: escuro como a barra, na camada de cima (popover),
   com o atalho de cada acção ao lado. Acende um item de cada vez, pelo rato ou
   pelo teclado. */
.fn-menu{position:fixed; inset:auto; margin:0; z-index:60; box-sizing:border-box; min-width:236px; max-width:min(320px, calc(100vw - 16px));
  padding:6px; color:#EDE8E2; background:#1F1C19; border:0; border-radius:var(--r-dentro); box-shadow:var(--shadow-pop);
  overflow:visible; animation:fn-surge .14s cubic-bezier(.2,.8,.2,1)}
.fn-menu:not(.aberto){display:none}
.fn-menu:focus{outline:none}
.fn-menu-i{display:flex; align-items:center; justify-content:space-between; gap:28px; width:100%; min-height:34px; padding:6px 10px;
  font:inherit; font-size:13.5px; line-height:1.35; color:inherit; text-align:left; background:none; border:0; border-radius:8px; cursor:pointer}
.fn-menu-i span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fn-menu-i kbd{flex:none; font:inherit; font-size:12.5px; color:#A39C94; font-variant-numeric:tabular-nums}
.fn-menu-i:focus{outline:none; background:#842DE3; color:#FFFFFF}
.fn-menu-i:focus kbd{color:#E9DCFB}
.fn-menu-i.mau{color:#FFA3AA}
.fn-menu-i.mau:focus{background:#C42433; color:#FFFFFF}
.fn-menu-i[aria-disabled="true"]{color:#6F6962; cursor:default}
.fn-menu-i[aria-disabled="true"] kbd{color:#5C5751}
.fn-menu-i[aria-disabled="true"]:focus{background:rgba(255,255,255,.07); color:#8C857E}
.fn-menu-sep{height:1px; margin:5px 6px; background:rgba(255,255,255,.12)}
@media(pointer:coarse){ .fn-menu-i{min-height:44px} }
@media(prefers-reduced-motion:reduce){ .fn-menu{animation-duration:.2s; animation-timing-function:linear} }
@media(max-width:640px){
  .fn-barra{left:8px; right:8px; top:auto; bottom:60px; flex-wrap:wrap; justify-content:center}
  .fn-zoom{right:12px; justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  .fn-barra{animation-duration:.3s; animation-timing-function:linear}
  .fn-card, .fn-pega{transition-duration:.3s}
}
.fn-numeros{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
.fn-numeros > div{display:grid; gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--card-2)}
.fn-numeros span{font-size:12.5px; color:var(--muted)}
.fn-numeros b{font-size:20px; font-weight:500; letter-spacing:-.02em}
.fn-numeros small{font-size:12px; color:var(--muted)}

.fn-editor{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 0; box-shadow:var(--shadow-1)}
@media(min-width:1100px){ .fn-editor{position:sticky; top:calc(var(--topo) + 12px); max-height:calc(100svh - var(--topo) - 24px); overflow-y:auto} }
.fn-editor .g-topo .fn-tipo{font-size:12px; font-weight:500; color:var(--accent-ink)}
.fn-editor .subtabs{margin-bottom:14px}
.fn-form{display:grid; gap:14px}
.fn-grupo{border:0; border-top:1px solid var(--line-2); margin:14px 0 0; padding:14px 0 0}
.fn-grupo legend{font-size:13.5px; font-weight:500; color:var(--ink); padding:0 8px 0 0}
.fn-grupo legend small{font-weight:400; color:var(--muted); margin-left:6px}
.fn-dica{font-size:12px; color:var(--muted); line-height:1.5}
.fn-tons{display:flex; flex-wrap:wrap; gap:4px 18px; font-size:14px}
.fn-bonus{display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2)}
.fn-bonus:last-child{border-bottom:0}
.fn-bonus-img{width:72px; height:72px; border-radius:10px; background:var(--sunken); display:grid; place-items:center; overflow:hidden;
  font-size:11px; color:var(--muted); text-align:center}
.fn-bonus-img img{width:100%; height:100%; object-fit:cover}
.fn-bonus input[type=file]{padding:6px; font-size:12.5px}
.fn-apagar{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-2)}
.fn-editor-pe{position:sticky; bottom:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
  margin:16px -18px 0; padding:12px 18px; background:var(--card); border-top:1px solid var(--line)}
.fn-estado-form{margin-right:auto; font-size:12.5px; color:var(--muted)}

/* A pré-visualização: a caixa alarga-se para caber um computador. */
#modalCx:has(.fn-previa){width:min(1240px,100%)}
.fn-previa-ctl{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-bottom:12px}
.fn-tempos{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; min-height:36px}
.fn-moldura{margin:0 auto; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#FAF9F7}
.fn-moldura iframe{display:block; width:100%; height:100%; border:0}
.fn-moldura.tel{width:min(390px,100%); height:min(720px,70svh)}
.fn-moldura.pc{width:100%; height:min(720px,70svh)}

@media(max-width:620px){
  .fn-cab-acoes{width:100%}
  .fn-cab-acoes .btn{flex:1}
  .fn-quadro{height:420px; min-height:0}
  .fn-bonus{grid-template-columns:1fr}
  .fn-editor{padding:16px 16px 0}
  .fn-editor-pe{margin:16px -16px 0; padding:12px 16px}
  .fn-editor-pe .btn{flex:1}
}

/* ASSINATURAS (W4·8 · A4): a lista no modelo novo, o detalhe com as faturas e o
   cancelar com a escolha de quando. Os mesmos componentes do resto do painel. */
.as-cabeca{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:none; flex-wrap:wrap}
.as-barra{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:var(--s3)}
.as-barra .subtabs{margin-bottom:0}
.as-ferramentas{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.as-ferramentas select{font:inherit; font-size:13.5px; min-height:38px; padding:0 30px 0 12px; border:1px solid var(--line);
  border-radius:99px; background-color:var(--card); color:var(--ink)}
.as-ferramentas select:focus-visible{outline:none; box-shadow:var(--ring)}
.as-teste{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-2); cursor:pointer}
.as-teste input{width:16px; height:16px; accent-color:var(--accent)}
@media(min-width:760px){ #assinaturas .linha{grid-template-columns:minmax(220px,1fr) auto 140px 70px} }
.as-pills{display:flex; gap:6px; flex-wrap:wrap}
.mont small{font-size:12px; color:var(--muted-2); margin-left:2px; font-family:inherit}
.as-detalhe{min-width:min(620px, 100%)}
.as-estado{margin:0 0 14px; display:flex; gap:6px; flex-wrap:wrap}
.as-dados{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px 18px; margin:0 0 18px}
.as-dados dt{font-size:12px; color:var(--muted-2)}
.as-dados dd{margin:2px 0 0; font-size:14px; color:var(--ink)}
.as-tit{font-size:14px; font-weight:500; margin:0 0 6px}
.as-faturas{border-top:1px solid var(--line-2)}
.as-fatura{display:grid; gap:8px; padding:12px 0; border-bottom:1px solid var(--line-2); align-items:center}
@media(min-width:620px){ .as-fatura{grid-template-columns:minmax(0,1fr) auto 110px} .as-fatura-acoes{grid-column:1/-1} }
.as-fatura-acoes{display:flex; gap:7px; flex-wrap:wrap}
.as-fatura-acoes:empty{display:none}
.as-nada, .as-nota{font-size:13px; color:var(--muted); margin:10px 0 0}
.as-opcoes{display:grid; gap:8px; margin:4px 0 14px}
.as-opcao{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-s);
  font-size:13.5px; line-height:1.5; color:var(--ink-2); cursor:pointer}
.as-opcao:has(input:checked){border-color:var(--accent); background:var(--accent-soft, var(--card-2))}
.as-opcao input{margin-top:3px; accent-color:var(--accent)}
/* No bloco das regras, cada campo fica do seu tamanho: a nota do vizinho não
   estica a caixa ao lado. */
#fPlano .form-grelha > label{align-content:start}
.as-fatura > .pill{justify-self:start}
@media(min-width:620px){ .as-fatura > .pill{justify-self:end} }

/* ---- o desempenho de cada checkout (20/10) ---- */
#gaveta-ck{width:min(520px,100vw)}
.ckd-barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:var(--s3)}
.ckd-barra select{font:inherit; font-size:13.5px; padding:7px 30px 7px 12px; border:1px solid var(--line); border-radius:99px; background-color:var(--card); color:var(--ink)}
.ckd-acoes{display:flex; gap:7px; margin-left:auto}
.ckd-kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.ckd-kpis > div{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-dentro); padding:12px 14px; display:grid; gap:2px; min-width:0}
.ckd-kpis span{font-size:12.5px; color:var(--muted)}
.ckd-kpis b{font-size:22px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.2}
.ckd-kpis.dois b{font-size:17px; white-space:nowrap}
.ckd-kpis b.mau{color:var(--red-ink, var(--red))}
.ckd-kpis em{font-style:normal; font-size:12.5px; color:var(--muted-2)}
.ckd-nota{font-size:12.5px; color:var(--muted-2); line-height:1.5; margin:0}
#gaveta-ck .funil .f{grid-template-columns:172px minmax(0,1fr) 48px}
#gaveta-ck .barras-h .bh{grid-template-columns:minmax(84px,120px) minmax(0,1fr) auto}
#gaveta-ck .barras-h .bh b{white-space:nowrap}
.ckd-dias{width:100%; height:auto; display:block}
.ckd-dias rect.v{fill:#CDB2F6}
.ckd-dias rect.v:hover{fill:var(--accent)}
.ckd-dias circle.c{fill:var(--accent)}
.ckd-dias text{font-family:var(--num); font-size:10.5px; fill:var(--muted-2)}
.ckd-legenda{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin:8px 0 0}
.ckd-legenda i{display:inline-block; width:10px; height:10px; border-radius:3px; background:#CDB2F6; margin-left:8px}
.ckd-legenda i:first-child{margin-left:0}
.ckd-legenda i.c{border-radius:99px; background:var(--accent)}
#gaveta-ck .barras-h .bh b em{font-style:normal; color:var(--muted-2); font-weight:400; margin-left:4px}
.oferta-c[data-ck-card]{cursor:pointer}
.oferta-c[data-ck-card]:hover{border-color:var(--cruz)}
.oferta-c .nome-btn{all:unset; cursor:pointer; font-size:15px; font-weight:500; letter-spacing:-.022em; line-height:1.3}
.oferta-c .nome-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media(max-width:560px){ #gaveta-ck .funil .f{grid-template-columns:118px minmax(0,1fr) 40px} #gaveta-ck .barras-h .bh{grid-template-columns:76px minmax(0,1fr) auto} .ckd-acoes{margin-left:0} }

/* ---------- a equipa (passo 21, etapa 3) ---------- */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* position:relative prende o texto escondido dos botões (.sr, absoluto) dentro da
   caixa que desliza: sem isto saía dela e a página deslizava para o lado. */
.eq-lista{position:relative}
.eq-lista table{min-width:820px}
.eq-lista td.d{text-align:right; white-space:nowrap}
.eq-quem{display:flex; align-items:center; gap:11px; min-width:0}
.eq-quem b{font-weight:500; display:block}
.eq-av{width:34px; height:34px; flex:none; border-radius:50%; display:inline-grid; place-items:center; object-fit:cover;
  background:var(--accent-soft); color:var(--accent-ink); font-family:var(--num); font-size:12.5px; font-weight:600}
.eq-av.g{width:44px; height:44px; font-size:14.5px}
.eq-chips{display:flex; gap:6px; flex-wrap:wrap}
.eq-registo-t{display:flex; align-items:baseline; gap:10px; margin:var(--s4, 28px) 0 10px}
.eq-registo-t h3{margin:0; font-size:16px; font-weight:500; letter-spacing:-.02em}
.eq-registo-t span{font-size:13px; color:var(--muted-2)}
.eq-registo{padding:4px 18px}
.eq-registo > div{display:grid; grid-template-columns:118px minmax(0,1fr); gap:14px; padding:12px 0; border-bottom:1px solid var(--line-2); font-size:14px; line-height:1.5}
.eq-registo > div:last-child{border-bottom:0}
.eq-registo time{font-family:var(--num); font-size:12.5px; color:var(--muted-2); padding-top:1px; white-space:nowrap}
.eq-registo b{font-weight:500}
.eq-registo .vazio{display:block; padding:30px 12px}
.eq-topo{display:flex; align-items:center; gap:12px; min-width:0; flex:1}
.eq-topo > div{min-width:0}
.eq-topo span{overflow-wrap:anywhere}
.eq-so{margin:0 0 4px; padding:11px 14px; border-radius:var(--r-dentro); background:var(--sunken, var(--bg)); color:var(--ink-2); font-size:13.5px; line-height:1.5}
#gaveta-eq .bloco h4 small{margin-left:8px; font-family:inherit; font-size:12.5px; font-weight:400; color:var(--muted)}
#gaveta-eq .eq-repor{margin-left:auto}
.eq-papeis{display:flex; flex-wrap:wrap; gap:6px}
.eq-papeis button{font:inherit; font-size:13.5px; font-weight:500; padding:7px 13px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink-2)}
.eq-papeis button[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}
.eq-papeis button:disabled{opacity:.45; cursor:not-allowed}
.eq-papeis button:focus-visible{outline:none; box-shadow:var(--ring)}
.eq-nota{margin:10px 0 0; font-size:13px; color:var(--muted); line-height:1.5}
.eq-grupo + .eq-grupo{margin-top:12px}
.eq-grupo-t{font-family:var(--num); font-size:11.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); margin-bottom:2px}
.eq-perm{display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-2)}
.eq-perm:last-child{border-bottom:0}
.eq-perm-n{flex:1; min-width:0; font-size:14px; line-height:1.4}
.eq-perm-n .pill{height:20px; font-size:11.5px; padding:0 8px; margin-left:4px; vertical-align:1px}
.eq-perm-n small{display:block; font-size:12px; color:var(--muted-2)}
.ag-switch:disabled{opacity:.45; cursor:not-allowed}
.eq-lim{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-2)}
.eq-lim:last-child{border-bottom:0}
.eq-lim > div{min-width:0}
.eq-lim b{display:block; font-size:14px; font-weight:500}
.eq-lim small{display:block; font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:2px}
.eq-data{font:inherit; font-size:14px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); padding:7px 10px; flex:none}
.eq-data:focus-visible{outline:none; box-shadow:var(--ring)}
.eq-ve{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-dentro); padding:12px 14px}
.eq-ve p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.eq-ve p + p{margin-top:6px}
.eq-ve b{font-weight:500; color:var(--ink)}
/* A gaveta da equipa acaba no rodapé fixo: sem o padding de baixo das outras,
   que fazia o sticky parar 60 px acima do fundo. */
#gaveta-eq{padding-bottom:0}
#gaveta-eq .eq-pe{position:sticky; bottom:0; margin:var(--s3) -24px 0; padding:14px 24px 18px; background:var(--card); border-top:1px solid var(--line); z-index:1}
.eq-esp{flex:1}
.org-escolha{font:inherit; font-weight:500; border:0; background:none; color:inherit; padding:0; max-width:100%; cursor:pointer}
/* Criar organização (passo 23): o tipo e os termos, como no /registar. */
.on-tipos{display:grid; gap:8px; border:0; margin:0; padding:0}
.on-tipos legend{font-size:13px; color:var(--muted); margin-bottom:6px; padding:0}
.on-tipo{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-s); cursor:pointer}
.on-tipo:has(input:checked){border-color:var(--accent); box-shadow:var(--ring)}
.on-tipo input{margin:2px 0 0; accent-color:var(--accent)}
.on-tipo b{font-weight:500}
.on-tipo .sub{display:block; font-size:12.5px; line-height:1.45}
.on-termos{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.45}
.on-termos input{margin-top:3px; accent-color:var(--accent)}
@media(max-width:560px){
  .eq-registo > div{grid-template-columns:1fr; gap:2px}
  .eq-esp{display:none}
}

/* ---------- o que cada pessoa pode fazer (passo 21, etapa 4) ----------
   O painel marca o <body> com «sem-<permissão>» por cada uma que a pessoa não
   tem (painel.js, porPermissoes), e as acções dessa permissão saem da página.
   Vale para o que for desenhado depois, sem cada ecrã ter de perguntar. Quem
   decide é a base, que recusa na mesma: isto só não mostra um botão que ia
   dar erro. */
.sem-confirmar [data-conf], .sem-confirmar [data-abrir],
.sem-recusar [data-recusa],
.sem-cobrancas #cb-nova, .sem-cobrancas [data-cb-guardar], .sem-cobrancas [data-cb-editar], .sem-cobrancas [data-cb-anular],
.sem-cobrancas [data-cb-anular-ja], .sem-cobrancas [data-cb-linha-fora], .sem-cobrancas [data-cb-linha-nova],
.sem-reembolsar #r-procurar, .sem-reembolsar [data-rb-pedir], .sem-reembolsar [data-rb-aprovar], .sem-reembolsar [data-rb-recusar],
.sem-reembolsar [data-rb-executar], .sem-reembolsar [data-rb-confirmar], .sem-reembolsar [data-rb-cancelar],
.sem-assinaturas [data-as-cancelar], .sem-assinaturas [data-as-confirmar],
.sem-saques_pedir #sq-pedir, .sem-saques_pedir #sq-confirmar, .sem-saques_pedir #sq-cancelar-pedido,
.sem-ofertas_editar #o_btnNovo, .sem-ofertas_editar [data-oferta-editar], .sem-ofertas_editar [data-edicao-editar],
.sem-ofertas_editar [data-edicao-apagar], .sem-ofertas_editar [data-pagamento-apagar], .sem-ofertas_editar [data-as-novo],
.sem-ofertas_editar [data-ck-editar], .sem-ofertas_editar [data-ck-guardar], .sem-ofertas_editar [data-ck-capa],
.sem-ofertas_editar [data-ck-logo], .sem-ofertas_editar #ag-acao, .sem-ofertas_editar .ag-icone[data-ag-editar],
.sem-funis [data-fn-novo], .sem-funis [data-fn-duplicar], .sem-funis [data-fn-guardar],
.sem-oportunidades_gerir #op-nova, .sem-oportunidades_gerir [data-op-guardar], .sem-oportunidades_gerir [data-op-arquivar],
.sem-oportunidades_gerir [data-op-inscrever], .sem-oportunidades_gerir [data-op-perder],
.sem-agenda_gerir [data-ag-remarcar], .sem-agenda_gerir [data-ag-cancelar], .sem-agenda_gerir [data-ag-cancelar-sim],
.sem-agenda_gerir [data-ag-editar-disp], .sem-agenda_gerir [data-ag-disp-remover],
.sem-afiliados_gerir [data-af-gerir]{display:none !important}
/* Os interruptores mostram um estado: ficam à vista, mas não se mexem. */
.sem-ofertas_editar [data-ag-activo], .sem-ofertas_editar [data-metodo-alternar], .sem-ofertas_editar [data-canal-alternar]{pointer-events:none; opacity:.55}
.sem-oportunidades_gerir .op-cartao{cursor:default}
/* OS SAQUES DE TODAS AS ORGANIZAÇÕES (28/10): o pedido, o código e o que está a caminho. */
#e-saques .cartao{padding:18px 22px}
.sq-destino{display:flex; align-items:center; color:var(--ink); background:var(--bg-2, #FAF9F7)}
.sq-inst{margin:12px 0 0}
.sq-recebe, .sq-relogio{margin:10px 0 0; font-size:14px; font-variant-numeric:tabular-nums; color:var(--ink-2, var(--ink))}
.sq-recebe:empty, .sq-relogio:empty, #sq-erro:empty{display:none}
#sq-erro{margin-top:12px}
.sq-codigo-cx{border-color:var(--accent)}
.sq-codigo-cx h3, .sq-curso h3{margin:8px 0 4px; font-size:19px; font-weight:600; letter-spacing:-.02em; display:flex; flex-wrap:wrap; gap:8px; align-items:baseline}
.sq-codigo-cx h3 .sub{font-size:14px; font-weight:400}
.sq-codigo-cx .aviso-cod{margin:10px 0 12px}
#saques-lista .mont .d{display:block; font-size:12px; color:var(--muted); font-weight:400}

/* OS AFILIADOS DE QUEM VENDE (passo 21, etapa 6) */
.af-sec{display:flex; align-items:baseline; gap:10px; margin:var(--s4, 28px) 0 10px}
.af-sec h3{margin:0; font-size:16px; font-weight:500; letter-spacing:-.02em}
.af-sec span{font-size:13px; color:var(--muted-2)}
.af-aviso{padding:14px 18px; display:flex; flex-direction:column; gap:3px; font-size:14px}
.af-aviso b{font-weight:500}
.af-aviso span{color:var(--muted)}
.af-lista{padding:2px 18px}
.af-linha{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-2)}
.af-linha:last-child{border-bottom:0}
.af-linha .af-quem{flex:1 1 260px}
.af-quem{display:flex; align-items:center; gap:11px; min-width:0}
.af-quem b{font-weight:500; display:block}
.af-quem .sub{display:block; font-size:12.5px; color:var(--muted-2)}
.af-av{width:34px; height:34px; flex:none; border-radius:50%; display:inline-grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font-family:var(--num); font-size:12.5px; font-weight:600}
.af-accoes{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.af-tabela{position:relative}
.af-tabela table{min-width:760px}
.af-tabela td.d, .af-tabela th.d{text-align:right; white-space:nowrap}
.af-tabela td.n .sub{display:block; font-size:12.5px; color:var(--muted-2)}
.af-chips{display:flex; gap:6px; flex-wrap:wrap}
.af-of{display:inline-flex; align-items:center; gap:6px; font-size:13.5px}
.af-ofs{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.af-ofs legend{font-size:13px; font-weight:500; color:var(--ink-2); margin-bottom:6px}
.af-of-esc{display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px}
.af-of-esc .sub{display:block; font-size:12px; color:var(--muted-2)}
.af-pct{display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--muted)}
.af-pct input{width:76px; text-align:right}
.af-oferta{border-top:1px solid var(--line-2); padding-top:14px; margin-top:4px}
.af-oferta .opcoes{display:flex; flex-wrap:wrap; gap:6px}
#modalCx .af-mais[hidden], #modalCx [data-af-gerir][hidden]{display:none !important}

/* OS GANHOS DA AFILIADA (passo 21, etapa 7). As listas e as tabelas são as dos
   Afiliados (af-*); aqui só o que é deste ecrã. */
.gn-linha{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px}
@media(max-width:640px){ .gn-linha{grid-template-columns:40px minmax(0,1fr)} .gn-linha .af-accoes{grid-column:2; justify-content:flex-start} }
.lado-pe[hidden]{display:none}
.gn-capa{width:40px; height:40px; flex:none; border-radius:9px; background:var(--sunken) center/cover no-repeat;
  display:inline-grid; place-items:center; color:var(--muted-2); font-weight:500}
.gn-oferta{flex:1 1 auto; min-width:0}
.gn-oferta b{display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gn-oferta .sub{display:block; font-size:12.5px; color:var(--muted-2)}
.gn-url{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2) !important}
.af-tabela td .sub{display:block; font-size:12px; color:var(--muted-2)}
.gn-neg{color:var(--vermelho-ink, #A12A2A)}
.gn-codigo{padding:16px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:var(--s4, 28px)}
.gn-codigo > div:first-child{flex:1 1 280px; display:flex; flex-direction:column; gap:3px; font-size:14px}
.gn-codigo b{font-weight:500}
.gn-codigo span{color:var(--muted)}
.gn-codigo-f{display:flex; gap:8px}
.gn-codigo-f input{width:180px; text-transform:uppercase}
.gn-mercado{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:12px}
.gn-cartao{padding:14px; display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px 12px; align-content:start}
.gn-capa-g{width:44px; height:44px}
.gn-ganha{grid-column:1 / -1; font-size:13px; color:var(--muted)}
.gn-ganha span{font-size:16px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.gn-pe{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
.gn-pe .sub{font-size:12.5px; color:var(--muted-2)}

/* O marketplace, na sua aba. */
.mk-sub{display:block; margin-top:4px; font-size:14px; color:var(--muted)}
.mk-sub #mk-n:not(:empty)::before{content:"· "}
.mk-procura{height:40px; width:320px; max-width:100%; padding:0 14px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong, var(--line)); border-radius:var(--r-campo, 10px)}
.mk-procura:focus{outline:none; box-shadow:var(--ring)}
@media(pointer:coarse){ .mk-procura{font-size:16px} }
@media(max-width:640px){ #e-marketplace .acoes-ecra, .mk-procura{width:100%} }
#e-marketplace .gn-codigo{margin-top:0; margin-bottom:16px}
#e-marketplace .gn-mercado{margin-top:4px}
.cartao.vazio .btn{margin-top:12px}

/* O estado da organização, quando a consola a suspendeu ou recusou (passo 23). */
.faixa-org{display:flex; flex-direction:column; gap:2px; margin-bottom:18px; padding:14px 18px; border-radius:var(--r-cartao, 14px);
  background:var(--vermelho-soft, #FCE8E8); color:var(--vermelho-ink, #8A1F1F); font-size:14px}
.faixa-org[hidden]{display:none}
.faixa-org b{font-weight:500}

/* O modo de teste (passo 23): um aviso neutro, não um erro. */
.faixa-org.teste{background:var(--roxo-soft, #F1E8FD); color:var(--roxo-ink, #5B1BA8)}
/* Em análise (C4): à espera da consola, nada a fazer. */
.faixa-org.analise{background:var(--ambar-soft, #FDF3DC); color:var(--ambar-ink, #7A4D00)}
.faixa-org .fo-accoes{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.faixa-org .fo-accoes .btn{min-height:36px}
/* O pedido de activação: o que vende e a quem, numa caixa. */
.act-nota{font-size:13px; line-height:1.5; color:var(--muted); margin:0 0 14px}
.act-motivo{padding:10px 12px; border-radius:10px; background:var(--vermelho-soft, #FCE8E8); color:var(--vermelho-ink, #8A1F1F);
  font-size:13.5px; margin:0 0 14px}
/* Procurar entre muitas organizações. */
.org-lista{display:grid; gap:4px; max-height:min(60vh, 420px); overflow:auto; margin-top:10px}
.org-lista button{display:flex; justify-content:space-between; gap:10px; align-items:center; text-align:left; width:100%;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card, #FFF); font:inherit; font-size:14px; color:var(--ink); cursor:pointer}
.org-lista button:hover, .org-lista button:focus-visible{border-color:var(--accent)}
.org-lista button[aria-current="true"]{border-color:var(--accent); box-shadow:var(--ring)}
.org-lista .m{font-size:12px; color:var(--muted)}

/* O saldo (C5): de onde vem, e o limite Starter. */
/* Na Conta (26/10): um cartão com os números em cima e as partes por baixo. */
.sl-cx .kpis{margin:0 0 16px; border-radius:calc(var(--r) - 4px)}
#sl-corpo{display:grid; gap:0}
.sl-parte{padding:14px 0; border-top:1px solid var(--line)}
.sl-parte:first-child{border-top:0; padding-top:0}
.sl-parte:last-child{padding-bottom:0}
.sl-parte h4{font-size:14px; font-weight:600; margin:0 0 8px}
.sl-linha{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:9px 0; border-top:1px solid var(--line); font-size:14px}
.sl-conta h4 + .sl-linha{border-top:0}
.sl-linha > span{display:grid; gap:2px}
.sl-linha .sub{font-size:12px}
.sl-linha b{font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.sl-linha b.sl-menos{color:var(--muted)}
.sl-total{border-top:1.5px solid var(--ink); margin-top:4px; padding-top:11px}
.sl-total b{font-weight:600; font-size:15px}
.sl-barra{height:10px; border-radius:99px; background:var(--sunken); overflow:hidden; margin:4px 0 10px}
.sl-barra span{display:block; height:100%; border-radius:inherit; background:var(--accent); transition:width .4s ease}
.sl-starter.sl-aviso .sl-barra span{background:var(--ambar, #C98A00)}
.sl-starter.sl-mau .sl-barra span{background:var(--vermelho, #C0392B)}
.sl-starter-n{margin:0 0 6px; font-size:14px; font-variant-numeric:tabular-nums}
.sl-levantar .sub{margin:0; line-height:1.5}
.sl-desde{margin:10px 0 0; font-size:12.5px; line-height:1.5}
@media (prefers-reduced-motion: reduce){ .sl-barra span{transition:none} }

/* Levantar (C6): o pedido, o que está a decorrer, a lista, e a verificação. */
.sl-pedir{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:4px 0 8px}
.sl-pedir label{display:grid; gap:5px; font-size:12.5px; color:var(--muted); font-weight:500}
.sl-pedir input{font:inherit; font-size:15px; color:var(--ink); width:min(220px, 60vw); padding:9px 11px; border:1px solid var(--line); border-radius:10px;
  background:var(--card, #FFF); font-variant-numeric:tabular-nums}
.sl-pedir input:focus-visible{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
.sl-inst{margin:0 0 8px}
#sl-erro:empty{display:none}
.sl-recebe{margin:0 0 6px; font-size:14px; font-variant-numeric:tabular-nums}
.sl-recebe:empty{display:none}
.sl-levantar > .sub{margin:0 0 8px; line-height:1.5}
.sl-aberto{margin:0 0 10px; display:grid; gap:3px; font-size:14px}
.sl-historico .sl-linha b{display:flex; gap:4px 8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.sl-historico .sl-linha b .sub{flex-basis:100%; text-align:right; font-weight:400}
.vf-t{font-size:14px; font-weight:600; margin:8px 0 0}
.vf-doc{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px}
.vf-doc > div{display:grid; gap:2px; min-width:0}
.vf-doc b{font-weight:500; font-size:14px}
.vf-doc .sub{font-size:12px; line-height:1.4}
.vf-doc .vf-estado{color:var(--ink-2, var(--muted))}
.vf-doc .btn{flex:none}