/* Saldado — aplicação. Software financeiro calmo: cinzentos neutros, filetes finos,
   números tabulares, cor só onde carrega significado. Só modo claro (contrato §9). */

/* Letra: Figtree (SIL Open Font License 1.1, web/static/letra/OFL.txt), alojada no próprio servidor: não depende da rede nem de serviços externos. */
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/static/letra/figtree-latin-variavel.woff2") format("woff2");
}

:root {
  color-scheme: light;
  /* superfícies */
  --fundo: #F6F7F8;
  --superficie: #FFFFFF;
  --superficie-2: #FAFBFB;
  --lateral: #EEF0F2;
  --linha: #E4E7EA;
  --linha-forte: #CDD2D7;
  /* texto */
  --texto: #1C1F24;
  --texto-2: #535963;
  --texto-3: #858B94;
  /* ação */
  --acao: #1A5E6E;  --acao-hover: #154D5A;  --acao-fundo: #E5EFF1;
  /* significado */
  /* «pago» fica na família do verde do InvoiceXpress (mesmo tom, 161°) sem o copiar: texto mais fundo (AA 4,5:1 sobre o fundo tingido),
     marcas (pontos, barras) mais vivas; a cor de ação continua o petróleo do Saldado */
  --pago: #007A54;     --pago-fundo: #E2F6EE;   --pago-marca: #0E9F6E;
  --atraso: #A3412E;   --atraso-fundo: #F5E8E4;
  --aviso: #8A6416;    --aviso-fundo: #F3EDDC;
  --neutro: #646B74;   --neutro-fundo: #EEF0F2;
  /* atraso graduado (a mesma escala da barra de antiguidade) */
  --sev-1: #7A5A12; --sev-1-fundo: #F7EDD8; --sev-2: #8E3B22; --sev-2-fundo: #F5E1D7; --sev-3: #FFFFFF; --sev-3-fundo: #A3412E;
  /* gráficos */
  --g-recebido: #8FA9B4; --g-faturado: #D5D9DD; --g-linha: #1C1F24; --g-marco: #8A6416;
  --g-idade-0: #CBD3D9; --g-idade-1: #E2C7A4; --g-idade-2: #D6A17C; --g-idade-3: #C1785C; --g-idade-4: #A3412E;
  /* tipografia */
  --letra: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-24: 24px; --t-32: 32px;
  /* espaço */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  /* forma */
  /* botões a 10 px: a mesma suavidade do InvoiceXpress (pílulas de 25 px) sem lhe copiar a forma; campos ficam a 8 px */
  --r-1: 6px; --r-2: 8px; --r-btn: 10px; --r-3: 12px; --r-pilula: 999px;
  --sombra-pop: 0 8px 28px rgba(28,31,36,.12), 0 1px 3px rgba(28,31,36,.08);
  --lateral-largura: 224px; --detalhe-largura: 460px; --linha-altura: 40px; --campo-altura: 32px;
  --transicao: 140ms cubic-bezier(.2,.7,.2,1);
  /* derivados */
  --faixa-altura: 0px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 var(--t-14)/1.45 var(--letra); color: var(--texto); background: var(--fundo);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--acao); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: var(--t-20); font-weight: 600; letter-spacing: 0; }
h2 { font-size: var(--t-14); font-weight: 600; }
h3 { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); }
svg { flex: none; }
.ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic.p { width: 14px; height: 14px; vertical-align: -2px; }
.num, .valor, td.n, .n { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--letra-mono); font-size: 12.5px; color: var(--texto-2); letter-spacing: 0; }
.t2 { color: var(--texto-2); }
.t3 { color: var(--texto-3); }
.pequeno { font-size: var(--t-12); }
.dir { text-align: right; }
.quebra { white-space: pre-wrap; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inteiro, .nw { white-space: nowrap; }
.escondido { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: #D3E3EA; }
kbd {
  font: 500 11px/1 var(--letra); color: var(--texto-2); background: var(--superficie);
  border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; min-width: 18px; display: inline-block; text-align: center;
}

/* ------------------------------------------------------------------ faixas de topo */
/* Conta de exemplo: a marca discreta vive na barra lateral (.marca-exemplo); a linha do topo só aparece no telemóvel */
.faixa-demo {
  height: 22px; display: none; align-items: center; justify-content: center;
  background: var(--lateral); border-bottom: 1px solid var(--linha); color: var(--texto-3); font-size: var(--t-11); font-weight: 500;
  white-space: nowrap; overflow: hidden; padding: 0 var(--e-4);
}
.marca-exemplo { margin: 2px 14px 6px 51px; font-size: var(--t-11); font-weight: 500; color: var(--texto-3); line-height: 1.3; }
.faixa-rede {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 28px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--aviso-fundo); color: var(--aviso); font-size: var(--t-12); font-weight: 500; border-bottom: 1px solid #E4D8B8;
}

/* ------------------------------------------------------------------ janela */
.janela { display: grid; grid-template-columns: var(--lateral-largura) minmax(0, 1fr); height: calc(100vh - var(--faixa-altura)); height: calc(100dvh - var(--faixa-altura)); }
.com-demo { --faixa-altura: 0px; }

/* barra lateral */
.lateral { background: var(--lateral); border-right: 1px solid var(--linha); display: flex; flex-direction: column; min-height: 0; }
.marca { display: flex; align-items: center; gap: 9px; padding: 14px 14px 6px; }
.marca-sinal { width: 28px; height: 28px; flex: none; }
.marca-nome { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.marca-by { font-size: var(--t-11); color: var(--texto-3); line-height: 1.2; }
.seletor-empresa {
  margin: 6px 8px 4px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-2);
  text-align: left; width: calc(100% - 16px); color: var(--texto);
}
.seletor-empresa:hover { background: rgba(28,31,36,.05); }
.seletor-empresa .ini { width: 22px; height: 22px; border-radius: 5px; background: var(--superficie); border: 1px solid var(--linha-forte); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--texto-2); flex: none; }
.seletor-empresa .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--t-13); }
.seletor-empresa .ic { color: var(--texto-3); }
.procura-lateral {
  margin: 2px 8px 8px; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px;
  border: 1px solid var(--linha-forte); background: var(--superficie); border-radius: var(--r-2); color: var(--texto-3); font-size: var(--t-13); width: calc(100% - 16px);
}
.procura-lateral:hover { border-color: #B5BBC2; }
.procura-lateral kbd { margin-left: auto; font-size: 10.5px; padding: 1px 4px; }
.nav { flex: 1; overflow-y: auto; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 1px; }
.nav a {
  display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: var(--r-2);
  color: var(--texto-2); font-size: var(--t-13); font-weight: 450; text-decoration: none; white-space: nowrap;
}
.nav a .ic { color: var(--texto-3); }
.nav a:hover { background: rgba(28,31,36,.05); color: var(--texto); }
.nav a.ativo { background: rgba(28,31,36,.08); color: var(--texto); font-weight: 500; }
.nav a.ativo .ic { color: var(--acao); }
.nav .cont { margin-left: auto; font-size: var(--t-12); color: var(--texto-3); font-variant-numeric: tabular-nums; font-weight: 400; }
.nav .cont.forte { color: var(--atraso); font-weight: 500; }
.nav .ponto-novo { width: 6px; height: 6px; border-radius: 50%; background: var(--acao); margin-left: auto; }
.nav .espaco { flex: 1; min-height: 12px; }
.lateral-pe { border-top: 1px solid var(--linha); padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.estado-ligacoes { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; }
.estado-ligacoes a { display: flex; align-items: center; gap: 7px; padding: 2px 8px; border-radius: var(--r-1); font-size: var(--t-12); color: var(--texto-2); text-decoration: none; white-space: nowrap; overflow: hidden; }
.estado-ligacoes a:hover { background: rgba(28,31,36,.05); }
.estado-ligacoes .t3 { overflow: hidden; text-overflow: ellipsis; }
.ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3); flex: none; display: inline-block; }
.ponto.ok { background: var(--pago-marca); }
.ponto.aviso { background: #B8892A; }
.ponto.erro { background: var(--atraso); }
.ponto.off { background: transparent; box-shadow: inset 0 0 0 1px var(--texto-3); }
.utilizador { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-2); width: 100%; text-align: left; }
.utilizador:hover { background: rgba(28,31,36,.05); }
.av { width: 24px; height: 24px; border-radius: 50%; background: #D8DDE2; color: var(--texto); display: grid; place-items: center; font-size: 10px; font-weight: 600; flex: none; }
.utilizador .nm { font-size: var(--t-13); font-weight: 500; line-height: 1.2; }
.utilizador .pp { font-size: var(--t-11); color: var(--texto-3); line-height: 1.2; }
.btn-apresentar { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--r-2); color: var(--texto-2); font-size: var(--t-13); width: 100%; }
.btn-apresentar:hover { background: rgba(28,31,36,.05); color: var(--texto); }

/* área principal */
.principal { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--fundo); position: relative; }
.cabecalho {
  display: flex; align-items: center; gap: var(--e-4); padding: 14px var(--e-5) 12px; min-height: 64px;
  background: var(--fundo); border-bottom: 1px solid var(--linha);
}
.cabecalho .titulos { min-width: 0; flex: 1; }
.cabecalho h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecalho .sub { color: var(--texto-2); font-size: var(--t-13); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecalho .acoes { display: flex; align-items: center; gap: var(--e-2); flex: none; }
.etiqueta-ficticia { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: var(--r-pilula); background: var(--neutro-fundo); color: var(--neutro); font-size: var(--t-11); font-weight: 500; vertical-align: 3px; letter-spacing: 0; }
.faixa-problema {
  display: flex; align-items: center; gap: 10px; padding: 9px var(--e-5); background: var(--atraso-fundo); color: var(--atraso);
  border-bottom: 1px solid #E8CFC7; font-size: var(--t-13);
}
.faixa-problema.aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: #E4D8B8; }
.faixa-problema b { font-weight: 600; }
.faixa-problema .txt { flex: 1; min-width: 0; }
.faixa-problema .btn { flex: none; }
.subnav { display: flex; gap: 2px; padding: 0 var(--e-5); border-bottom: 1px solid var(--linha); background: var(--fundo); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; color: var(--texto-2); font-size: var(--t-13); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subnav a:hover { color: var(--texto); }
.subnav a.ativo { color: var(--texto); font-weight: 500; border-bottom-color: var(--texto); }
.subnav .cont { color: var(--texto-3); font-variant-numeric: tabular-nums; font-weight: 400; }
.subnav a.ativo .cont { color: var(--texto-2); }
.subnav .cont.forte { color: var(--atraso); }
.conteudo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.pagina { padding: var(--e-5); max-width: 1240px; }
.pagina.estreita { max-width: 880px; }

/* ------------------------------------------------------------------ botões e campos */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--r-btn); border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto);
  font-size: var(--t-13); font-weight: 500; white-space: nowrap; transition: background var(--transicao), border-color var(--transicao), color var(--transicao); user-select: none;
}
.btn:hover { background: var(--superficie-2); border-color: #B5BBC2; }
.btn:active { background: #EFF1F3; }
.btn .ic { margin-left: -2px; }
.btn.primario { background: var(--acao); border-color: var(--acao); color: #fff; }
.btn.primario:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
.btn.discreto { border-color: transparent; background: transparent; color: var(--acao); padding: 0 8px; }
.btn.discreto:hover { background: var(--acao-fundo); }
.btn.perigoso { color: var(--atraso); border-color: transparent; background: transparent; }
.btn.perigoso:hover { border-color: #DDB8AD; background: var(--superficie); }
.btn.perigoso.contorno { border-color: #DDB8AD; background: var(--superficie); }
.btn.pequeno { height: 26px; padding: 0 9px; font-size: var(--t-12); border-radius: var(--r-2); }
.btn.icone { width: 32px; padding: 0; }
.btn.pequeno.icone { width: 26px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: roda .8s linear infinite; margin-right: 2px; }
.btn.feito { background: var(--pago-fundo); border-color: #BFE3D2; color: var(--pago); }
@keyframes roda { to { transform: rotate(360deg); } }
.grupo-btn { display: inline-flex; }
.grupo-btn .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.grupo-btn .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }

.campo, input[type="text"].campo, input[type="email"].campo, input[type="password"].campo, input[type="search"].campo, input[type="number"].campo, input[type="date"].campo, input[type="time"].campo, select.campo {
  height: var(--campo-altura); padding: 0 10px; border: 1px solid var(--linha-forte); border-radius: var(--r-2);
  background: var(--superficie); color: var(--texto); font-size: var(--t-13); width: 100%; min-width: 0;
  transition: border-color var(--transicao), box-shadow var(--transicao); -webkit-appearance: none; appearance: none;
}
textarea.campo { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; border: 1px solid var(--linha-forte); border-radius: var(--r-2); background: var(--superficie); width: 100%; font-size: var(--t-13); }
select.campo { padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23858B94' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.campo:hover { border-color: #B5BBC2; }
.campo:focus, textarea.campo:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px rgba(26,94,110,.55); }
.campo::placeholder { color: var(--texto-3); }
.campo.erro { border-color: var(--atraso); }
.campo.n { text-align: right; font-variant-numeric: tabular-nums; }
.campo.mono-campo { font-family: var(--letra-mono); font-size: 12.5px; }
.rotulo { display: block; font-size: var(--t-12); font-weight: 500; color: var(--texto-2); margin-bottom: 5px; }
.ajuda { font-size: var(--t-12); color: var(--texto-3); margin-top: 5px; }
.erro-campo { font-size: var(--t-12); color: var(--atraso); margin-top: 5px; }
.form-linha { margin-bottom: var(--e-4); }
.form-grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-4); }
.form-grelha .largo { grid-column: 1 / -1; }
.sufixo { display: flex; align-items: stretch; }
.sufixo .campo { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sufixo .suf { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--linha-forte); border-left: 0; border-radius: 0 var(--r-2) var(--r-2) 0; background: var(--superficie-2); color: var(--texto-3); font-size: var(--t-13); white-space: nowrap; }
.com-botao { position: relative; }
.com-botao .campo { padding-right: 70px; }
.com-botao .btn { position: absolute; right: 3px; top: 3px; height: 26px; }
.procura { position: relative; }
.procura .ic { position: absolute; left: 9px; top: 8px; color: var(--texto-3); pointer-events: none; }
.procura .campo, .procura input.campo { padding-left: 30px; }

/* interruptor e caixas */
.interruptor { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--t-13); user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .trilho { width: 30px; height: 18px; border-radius: 9px; background: #CBD1D7; position: relative; transition: background var(--transicao); flex: none; }
.interruptor .trilho::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--transicao); }
.interruptor input:checked + .trilho { background: var(--acao); }
.interruptor input:checked + .trilho::after { transform: translateX(12px); }
.interruptor input:focus-visible + .trilho { outline: 2px solid var(--acao); outline-offset: 2px; }
.caixa { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: var(--t-13); }
.caixa input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--acao); flex: none; }
input[type="radio"] { accent-color: var(--acao); }
input[type="range"] { accent-color: var(--acao); width: 100%; }

/* ------------------------------------------------------------------ estados e etiquetas */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); white-space: nowrap; color: var(--texto-2); }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.estado.atraso { color: var(--atraso); }
.estado.pago { color: var(--pago); }
.estado.aviso { color: var(--aviso); }
.estado.neutro { color: var(--neutro); }
.estado.acao { color: var(--acao); }
.estado.sem-ponto::before { display: none; }
.etiqueta { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--r-pilula); font-size: var(--t-11); font-weight: 500; background: var(--neutro-fundo); color: var(--neutro); white-space: nowrap; vertical-align: 1px; }
.etiqueta.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.etiqueta.atraso { background: var(--atraso-fundo); color: var(--atraso); }
.etiqueta.pago { background: var(--pago-fundo); color: var(--pago); }
.etiqueta.acao { background: var(--acao-fundo); color: var(--acao); }
.confianca { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: var(--t-12); color: var(--texto-2); }
.confianca .segs { display: inline-flex; gap: 2px; }
.confianca .segs i { width: 4px; height: 10px; border-radius: 1px; background: #DCE0E4; display: block; }
.confianca.alta .segs i.on { background: var(--acao); }
.confianca.alta { color: var(--acao); }
.confianca.media .segs i.on { background: var(--aviso); }
.confianca.baixa .segs i.on { background: var(--atraso); }
.confianca.media { color: var(--aviso); }
.confianca.baixa { color: var(--atraso); }
.pos { color: var(--pago); }
.neg { color: var(--texto); }

/* ------------------------------------------------------------------ separadores */
.separadores { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: none; }
.separadores::-webkit-scrollbar { display: none; }
.separadores.transborda { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.separadores.transborda.no-inicio { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
.separadores.transborda.no-fim { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.separadores a, .separadores button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; font-size: var(--t-13); color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.separadores a:hover, .separadores button:hover { color: var(--texto); text-decoration: none; }
.com-detalhe .separadores a { padding: 0 8px; }
.separadores .ativo { color: var(--texto); font-weight: 500; border-bottom-color: var(--texto); }
.separadores .cont { color: var(--texto-3); font-variant-numeric: tabular-nums; font-weight: 400; }
.separadores .cont.forte { color: var(--atraso); }

/* ------------------------------------------------------------------ lista + detalhe */
.ld { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; position: relative; }
.ld.aberto { grid-template-columns: minmax(0, 1fr) var(--detalhe-largura); }
.ld-lista { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.barra-lista { display: flex; align-items: center; gap: var(--e-2); padding: 10px var(--e-5); border-bottom: 1px solid var(--linha); background: var(--fundo); flex-wrap: wrap; }
.barra-lista .procura { width: 260px; }
.barra-lista .campo { height: 30px; }
.barra-lista .resumo { margin-left: auto; color: var(--texto-2); font-size: var(--t-13); white-space: nowrap; }
.barra-lista .resumo b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.ld-sep { padding: 0 var(--e-5); background: var(--fundo); }
.rolar { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* tabela em grelha (vira lista de duas linhas no telemóvel) */
.tabela { background: var(--superficie); min-width: 0; }
.tabela .cab, .tabela .linha { display: grid; grid-template-columns: var(--colunas); align-items: center; column-gap: 14px; padding: 0 var(--e-5); }
.tabela .cab { position: sticky; top: 0; z-index: 2; height: 32px; background: var(--superficie-2); border-bottom: 1px solid var(--linha); font-size: var(--t-12); font-weight: 500; color: var(--texto-3); }
.tabela .cab > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabela .cab button { font-size: var(--t-12); font-weight: 500; color: var(--texto-3); display: inline-flex; align-items: center; gap: 3px; }
.tabela .cab button:hover, .tabela .cab button.ord { color: var(--texto); }
.tabela .linha { min-height: var(--linha-altura); border-bottom: 1px solid var(--linha); color: var(--texto); text-decoration: none; font-size: var(--t-13); position: relative; cursor: default; }
.tabela a.linha, .tabela .linha[data-href] { cursor: pointer; }
.tabela .linha:hover { background: var(--superficie-2); text-decoration: none; }
.tabela .linha.sel { background: var(--acao-fundo); }
.tabela .linha.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--acao); }
.tabela .linha:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acao); border-radius: 0; }
.tabela .linha > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela .linha .n, .tabela .cab .n { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .linha .forte { font-weight: 500; }
.tabela .linha.esmaecida { color: var(--texto-3); }
.tabela .linha.feita { background: #F2FAF6; }
.tabela .rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--e-5); color: var(--texto-3); font-size: var(--t-12); background: var(--fundo); }
.cel-2 { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cel-2 > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel-2 .t3 { font-size: var(--t-12); }
.so-movel { display: none !important; }

/* painel de detalhe */
.detalhe { min-width: 0; min-height: 0; background: var(--superficie); border-left: 1px solid var(--linha); display: flex; flex-direction: column; animation: desliza var(--transicao); }
@keyframes desliza { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.detalhe-cab { padding: 14px var(--e-5) 12px; border-bottom: 1px solid var(--linha); background: var(--superficie); }
.detalhe-cab .topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.detalhe-cab .voltar { display: none; }
.detalhe-cab .fechar { margin-left: auto; color: var(--texto-3); }
.detalhe-cab .fechar:hover { color: var(--texto); }
.detalhe-cab h2 { font-size: var(--t-16); font-weight: 600; letter-spacing: 0; }
.detalhe-cab .linha-sub { color: var(--texto-2); font-size: var(--t-13); margin-top: 2px; }
.detalhe-cab .grande { font-size: var(--t-32); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 10px; }
.detalhe-cab .grande .t3 { font-size: var(--t-13); font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.detalhe-cab .acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.detalhe-pe { flex: none; padding: 12px var(--e-5) 14px; border-top: 1px solid var(--linha); background: var(--superficie); box-shadow: 0 -6px 14px -12px rgba(28,31,36,.25); }
.detalhe-pe .aviso-caixa { margin-bottom: 10px; }
.detalhe-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 var(--e-6); }
.bloco { padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linha); }
.bloco:last-child { border-bottom: 0; }
.bloco > h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.bloco > h3 .mais { margin-left: auto; font-weight: 400; font-size: var(--t-12); }
.pares { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: var(--t-13); }
.pares dt { color: var(--texto-2); }
.pares dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.pares dd.esq { text-align: left; }
.pares .total { padding-top: 6px; border-top: 1px solid var(--linha); font-weight: 600; margin-right: -16px; padding-right: 16px; }
.pares .total + dd { padding-top: 6px; border-top: 1px solid var(--linha); font-weight: 600; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples > li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-13); }
.lista-simples > li:last-child { border-bottom: 0; }
.lista-simples .cresce { flex: 1; min-width: 0; }
.vazio-bloco { color: var(--texto-3); font-size: var(--t-13); }

/* cronologia */
.cronologia { list-style: none; margin: 0; padding: 0; position: relative; }
.cronologia li { position: relative; padding: 0 0 14px 30px; font-size: var(--t-13); }
.cronologia li::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: -2px; width: 1px; background: var(--linha); }
.cronologia li:last-child::before { display: none; }
.cronologia .marca-ev { position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--linha); display: grid; place-items: center; color: var(--texto-2); }
.cronologia .marca-ev .ic { width: 12px; height: 12px; }
.cronologia .ev-pago .marca-ev { color: var(--pago); border-color: #BFE3D2; background: var(--pago-fundo); }
.cronologia .ev-atraso .marca-ev { color: var(--atraso); border-color: #E8CFC7; background: var(--atraso-fundo); }
.cronologia .ev-aviso .marca-ev { color: var(--aviso); border-color: #E4D8B8; background: var(--aviso-fundo); }
.cronologia .ev-acao .marca-ev { color: var(--acao); border-color: #C9DAE1; background: var(--acao-fundo); }
.cronologia .ev-futuro { color: var(--texto-3); }
.cronologia .ev-futuro .marca-ev { border-style: dashed; }
.cronologia .tit { font-weight: 500; line-height: 1.35; padding-top: 1px; }
.cronologia .det { color: var(--texto-2); font-size: var(--t-12); margin-top: 1px; overflow-wrap: anywhere; }
.cronologia .quando { color: var(--texto-3); font-size: var(--t-12); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Hoje */
.hoje { padding: var(--e-5) var(--e-5) var(--e-7); max-width: 1240px; }
.hoje-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: var(--e-5); }
.hoje-titulo h1 { font-size: var(--t-24); font-weight: 600; letter-spacing: 0; }
.hoje-titulo .sub { color: var(--texto-2); }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
.kpi { padding: 14px 18px 15px; border-left: 1px solid var(--linha); min-width: 0; color: inherit; text-decoration: none; display: block; }
.kpi:first-child { border-left: 0; }
a.kpi:hover { background: var(--superficie-2); text-decoration: none; }
.kpi .rot { font-size: var(--t-12); color: var(--texto-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .val { font-size: var(--t-24); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; margin-top: 4px; white-space: nowrap; line-height: 1.2; }
.kpi .val small { font-size: var(--t-14); font-weight: 500; color: var(--texto-2); margin-left: 6px; letter-spacing: 0; }
.kpi .det { font-size: var(--t-12); color: var(--texto-3); margin-top: 4px; line-height: 1.35; }
.kpi .det.bom { color: var(--pago); }
.kpi .det.mau { color: var(--atraso); }
.kpi.atraso .val { color: var(--atraso); }
.secao { margin-top: var(--e-6); }
.acao-hoje { display: flex; align-items: center; gap: 14px; margin-top: var(--e-4); padding: 14px 16px 14px 18px; border-color: #C9DAE1; }
.acao-hoje .ah-ic { width: 32px; height: 32px; border-radius: var(--r-2); background: var(--acao-fundo); color: var(--acao); display: grid; place-items: center; flex: none; }
.acao-hoje .ah-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--t-13); }
.acao-hoje .ah-rot { font-size: var(--t-12); font-weight: 500; color: var(--acao); }
.acao-hoje b { font-size: var(--t-14); font-weight: 600; }
.acao-hoje .btn { flex: none; }
.acao-hoje + .secao { margin-top: var(--e-5); }
@media (max-width: 899px) { .acao-hoje { flex-wrap: wrap; } .acao-hoje .btn { width: 100%; } }
.secao-cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.secao-cab h2 { font-size: var(--t-14); }
.secao-cab .t3 { font-size: var(--t-12); }
.secao-cab .mais { margin-left: auto; font-size: var(--t-13); }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
.cartao.pad { padding: var(--e-4) 18px; }
.antiguidade-barra { display: flex; height: 14px; border-radius: 3px; overflow: hidden; gap: 2px; background: var(--superficie); }
.antiguidade-barra a { display: block; height: 100%; transition: opacity var(--transicao); }
.antiguidade-barra a:hover { opacity: .8; }
.antiguidade-tab { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.antiguidade-tab a { color: inherit; text-decoration: none; padding: 4px 10px 4px 0; border-radius: var(--r-1); }
.antiguidade-tab a:hover .r { color: var(--texto); text-decoration: underline; text-underline-offset: 2px; }
.antiguidade-tab .r { display: flex; align-items: center; gap: 7px; font-size: var(--t-12); color: var(--texto-2); }
.antiguidade-tab .q { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.antiguidade-tab .v { font-size: var(--t-14); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 2px; padding-left: 16px; }
.antiguidade-tab .f { font-size: var(--t-12); color: var(--texto-3); padding-left: 16px; }
.duas-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-5); margin-top: var(--e-6); align-items: start; }
.tarefas { list-style: none; margin: 0; padding: 0; }
.tarefas li a { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--linha); color: var(--texto); text-decoration: none; }
.tarefas li:last-child a { border-bottom: 0; }
.tarefas li a:hover { background: var(--superficie-2); }
.tarefas .q { min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--neutro-fundo); color: var(--texto-2); font-size: var(--t-12); font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; flex: none; }
.tarefas .q.forte { background: var(--acao); color: #fff; }
.tarefas .txt { flex: 1; min-width: 0; }
.tarefas .txt .t { font-size: var(--t-13); font-weight: 500; }
.tarefas .txt .d { font-size: var(--t-12); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefas .ic { color: var(--texto-3); }
.atividade { list-style: none; margin: 0; padding: 4px 16px; }
.atividade li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-13); align-items: start; }
.atividade li:last-child { border-bottom: 0; }
.atividade .ic { color: var(--texto-3); margin-top: 2px; }
.atividade a { color: var(--texto); }
.atividade .quando { color: var(--texto-3); font-size: var(--t-12); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }
.grafico { width: 100%; display: block; overflow: visible; }
.grafico text { font: 400 11px var(--letra); fill: var(--texto-3); font-variant-numeric: tabular-nums; }
.grafico .eixo { stroke: var(--linha); stroke-width: 1; }
.grafico .grelha { stroke: var(--linha); stroke-width: 1; stroke-dasharray: 2 3; }
.grafico .alvo { cursor: default; }
.grafico .alvo:hover + .barra-h, .grafico .realce { opacity: .78; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-12); color: var(--texto-2); margin-top: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legenda i.linha { height: 2px; width: 14px; border-radius: 0; }
.legenda i.tracejado { height: 0; width: 14px; border-top: 1.5px dashed var(--g-marco); border-radius: 0; }
.nota-grafico { font-size: var(--t-12); color: var(--texto-2); margin-top: 10px; display: flex; align-items: flex-start; gap: 7px; }
.nota-grafico .ic { color: var(--texto-3); margin-top: 1px; }
.dica { position: fixed; z-index: 80; pointer-events: none; background: var(--texto); color: #fff; font-size: var(--t-12); line-height: 1.4; padding: 6px 9px; border-radius: var(--r-2); box-shadow: var(--sombra-pop); white-space: nowrap; font-variant-numeric: tabular-nums; transform: translate(-50%, calc(-100% - 10px)); }
.dica b { font-weight: 600; }
.dica .t3 { color: #B8BDC4; }

/* ------------------------------------------------------------------ Reconciliar */
.rec-linha { --colunas: 84px minmax(0, 1.25fr) 112px 14px minmax(0, 1fr) 118px; }
.com-detalhe .rec-linha { --colunas: 82px minmax(0, 1.1fr) 104px minmax(0, 1fr) 96px; }
.com-detalhe .rec-linha .seta { display: none; }
.rec-linha.compacto { --colunas: 76px minmax(0, 1fr) 104px 14px minmax(0, 1fr); }
.rec-linha .seta { color: var(--texto-3); text-align: center; }
.rec-linha .mono { font-size: 12px; }
.rec-linha .caso { font-size: var(--t-12); color: var(--texto-3); }
.rec-lote { display: flex; align-items: center; gap: 12px; padding: 10px var(--e-5); background: var(--superficie-2); border-bottom: 1px solid var(--linha); font-size: var(--t-13); flex-wrap: wrap; }
.rec-lote .t2 { flex: 1; min-width: 220px; }
.par { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.par .lado { border: 1px solid var(--linha); border-radius: var(--r-3); padding: 10px 12px; background: var(--superficie); min-width: 0; }
.par .lado .rot { font-size: var(--t-11); font-weight: 500; color: var(--texto-3); margin-bottom: 4px; }
.par .lado .v { font-size: var(--t-16); font-weight: 500; font-variant-numeric: tabular-nums; }
.par .lado { display: flex; flex-direction: column; gap: 2px; }
.par .lado .quem { font-size: var(--t-13); font-weight: 500; color: var(--texto); line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }
.par .lado .pequeno { line-height: 1.4; }
.desc-recolhido { margin-top: auto; padding-top: 6px; }
.desc-recolhido summary { font-size: var(--t-12); color: var(--acao); cursor: pointer; list-style: none; }
.desc-recolhido summary::-webkit-details-marker { display: none; }
.desc-recolhido summary::after { content: " ›"; }
.desc-recolhido[open] summary::after { content: " ‹"; }
.desc-recolhido .t3 { display: block; margin-top: 4px; font-size: var(--t-12); }
.desc-recolhido .mono { display: block; margin-top: 4px; font-size: 11.5px; color: var(--texto-3); overflow-wrap: anywhere; white-space: normal; }
.par .lado .fat-lista { margin: 4px 0 2px; }
.par .lado .fat-mini { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid var(--linha); font-size: var(--t-13); }
.par .lado .fat-mini:first-child { border-top: 0; }
.cel-2 .pagador { color: var(--texto); }
.cel-2 .desc-banco { font-size: 11px; color: var(--texto-3); }
@media (max-height: 820px) { .atalhos-rec { display: none; } }
/* O que fica no InvoiceXpress usa o verde de «pago» (recibo, «Paga», este cartão); o petróleo fica para as ações do Saldado */
.par .lado-ix { border-color: #C3E8D6; background: #F3FAF6; }
.par .lado-ix .rot { color: var(--pago); display: flex; align-items: center; gap: 6px; }
.par .lado-ix .rot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pago-marca); }
.par .lado-ix a { color: var(--pago); }
.ix-escrita .rot .ic { color: var(--pago); }
.par .meio { display: grid; place-items: center; color: var(--texto-3); }
.fat-mini { padding: 6px 0; border-top: 1px solid var(--linha); }
.fat-mini:first-of-type { border-top: 0; padding-top: 0; }
.fat-mini .l1 { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; font-size: var(--t-13); }
.fat-mini .l2 { font-size: var(--t-12); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado-frase { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-2); background: var(--superficie-2); border: 1px solid var(--linha); font-size: var(--t-13); }
.resultado-frase b { font-weight: 600; }
.motivos { list-style: none; margin: 0; padding: 0; }
.motivos li { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; font-size: var(--t-13); }
.motivos li .ic { color: var(--texto-3); margin-top: 2px; }
.motivos li.bom .ic { color: var(--pago); }
.motivos li.mau .ic { color: var(--aviso); }
.motivos li.cliente .ic { color: var(--acao); }
.aviso-caixa { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-2); font-size: var(--t-13); background: var(--aviso-fundo); color: #5E4510; }
.aviso-caixa .ic { color: var(--aviso); margin-top: 1px; }
.aviso-caixa.erro { background: var(--atraso-fundo); color: #6E2A1E; }
.aviso-caixa.erro .ic { color: var(--atraso); }
.aviso-caixa.info { background: var(--acao-fundo); color: #173F52; }
.aviso-caixa.info .ic { color: var(--acao); }
.aviso-caixa.ok { background: var(--pago-fundo); color: #0B4A36; }
.aviso-caixa.ok .ic { color: var(--pago); }
.aviso-caixa .acoes-caixa { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.escolha { display: flex; flex-direction: column; gap: 6px; }
.escolha label { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--linha); border-radius: var(--r-2); cursor: pointer; font-size: var(--t-13); background: var(--superficie); }
.escolha label:hover { border-color: var(--linha-forte); }
.escolha label:has(input:checked) { border-color: var(--acao); background: #F6F9FA; }
.escolha input { margin: 2px 0 0; flex: none; }
.escolha .d { color: var(--texto-2); font-size: var(--t-12); }
.ix-escrita { border: 1px solid #C3E8D6; border-radius: var(--r-3); padding: 12px; background: #F3FAF6; }
.ix-escrita .rot { font-size: var(--t-12); color: var(--texto-2); font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ix-escrita ul { margin: 0; padding: 0; list-style: none; font-size: var(--t-13); }
.ix-escrita li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.ix-escrita .rodape-ix { font-size: var(--t-12); color: var(--texto-3); margin-top: 8px; }
.acoes-detalhe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes-detalhe .primeiro { flex: 1 1 auto; }
.resultado-ix { border: 1px solid #BFE3D2; background: var(--pago-fundo); border-radius: var(--r-3); padding: 12px 14px; color: #0B4A36; animation: aparece 220ms ease-out; }
.resultado-ix .t { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--pago); }
.resultado-ix .pedido { font-family: var(--letra-mono); font-size: 11px; color: #3D6B5A; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado-ix .pedido + .pedido { margin-top: 1px; }
.resultado-ix .lista-simples li { padding: 3px 0; font-size: var(--t-13); }
.resultado-ix .acoes-caixa { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.linha-ok { color: var(--pago); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.editor-aloc .linha-aloc { display: grid; grid-template-columns: minmax(0, 1fr) 120px 28px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.editor-aloc .totais { display: flex; justify-content: space-between; padding-top: 10px; font-size: var(--t-13); }
.candidatas { max-height: 260px; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--r-2); margin-top: 6px; }
.candidatas button { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); font-size: var(--t-13); }
.candidatas button:last-child { border-bottom: 0; }
.candidatas button:hover, .candidatas button:focus-visible { background: var(--superficie-2); outline: none; }
.candidatas button > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ utilitários */
.forte { font-weight: 500; color: var(--texto); }
.cresce { flex: 1; min-width: 0; }
.atraso-txt { color: var(--atraso); }
/* risco: pastilha neutra com um ponto de cor; só o «Alto» ganha texto e fundo de alerta */
.risco { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: var(--r-pilula); background: var(--neutro-fundo); color: var(--texto-2); font-size: var(--t-12); font-weight: 500; white-space: nowrap; }
.risco i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); flex: none; }
.risco-alto { background: var(--atraso-fundo); color: var(--atraso); }
.risco-alto i { background: var(--atraso); }
.risco-medio i { background: #C08A2E; }
.risco-baixo i { background: var(--pago-marca); }
.risco-nenhum { background: none; color: var(--texto-3); font-weight: 400; padding: 0; }
.etiqueta .risco { font-size: inherit; height: auto; padding: 0; background: none; gap: 5px; }
.detalhe-cab .grande-sub { font-size: var(--t-13); font-weight: 400; letter-spacing: 0; color: var(--texto-2); margin-top: 4px; }
.g-atraso { margin: 4px 0 2px; min-height: 170px; }
.g-atraso:has(.atraso-frase) { min-height: 0; margin: 12px 0 10px; }
.atraso-frase { font-size: var(--t-14); line-height: 1.45; }
.atraso-frase .pequeno { margin-top: 2px; }
.g-atraso svg text { font: 400 10.5px var(--letra); fill: var(--texto-3); font-variant-numeric: tabular-nums; }
/* nome do cliente e localidade: a localidade só aparece inteira; se não couber, passa para a 2.ª linha, que fica escondida */
.tabela .linha > .cli-nome { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; height: 1.45em; line-height: 1.45; overflow: hidden; white-space: nowrap; }
.cli-nome .cli-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-nome .cli-loc { flex: none; white-space: nowrap; }
.tabela .linha > .c-semhist { grid-column: span 2; text-align: center; font-size: var(--t-12); }
.com-detalhe .tabela .linha > .c-semhist { grid-column: auto; text-align: right; }
.form-pref .form-linha:last-of-type { margin-bottom: 12px; }

/* ------------------------------------------------------------------ Faturas */
.fat-linha { --colunas: 98px minmax(0, 1.3fr) 86px 86px 112px minmax(170px, .9fr) 176px; }
.fat-linha .cel-valor { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.fat-linha .de-total { font-size: var(--t-11); }
.fat-linha .c-estado { display: flex; align-items: center; gap: 6px; overflow: hidden; }
/* Com o painel aberto, a lista passa a compacta (como no Linear e no Stripe): número, cliente, valor e estado breve */
@media (min-width: 1200px) {
  .com-detalhe .fat-linha { --colunas: 88px minmax(0, 1fr) 104px 112px; }
  .com-detalhe .fat-linha .c-emissao, .com-detalhe .fat-linha .c-venc, .com-detalhe .fat-linha .c-lembrete,
  .com-detalhe .fat-linha .c-estado .etiqueta, .com-detalhe .fat-linha .lida-tag { display: none; }
  .com-detalhe .ld-lista .pilula .p-longo { display: none; }
  .com-detalhe .ld-lista .pilula .p-curto { display: inline; }
}

/* estado de uma fatura: pastilha neutra; a cor forte fica para o atraso grave */
.pilula { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; height: 22px; padding: 0 9px; border-radius: var(--r-pilula);
  background: var(--neutro-fundo); color: var(--texto-2); font-size: var(--t-12); font-weight: 500; white-space: nowrap; overflow: hidden; vertical-align: middle; flex: none; }
.pilula > span { overflow: hidden; text-overflow: ellipsis; }
.pilula .p-curto { display: none; }
.pilula.pago { background: var(--pago-fundo); color: var(--pago); }
.pilula.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.pilula.sev-1 { background: var(--sev-1-fundo); color: var(--sev-1); }
.pilula.sev-2, .pilula.atraso { background: var(--sev-2-fundo); color: var(--sev-2); }
.pilula.sev-3 { background: var(--sev-3-fundo); color: var(--sev-3); }
.c-estado .pilula { flex: 0 1 auto; }
/* o Perfil é o que distingue o Saldado de uma lista de faturas: tem largura para a frase inteira; «Lembretes» só a partir de 1366 px */
.cli-linha { --colunas: minmax(0, 1.3fr) 100px 100px 88px 120px 72px minmax(200px, 1fr) 84px; }
@media (max-width: 1365px) { .cli-linha { --colunas: minmax(0, 1.3fr) 100px 100px 88px 120px 72px minmax(190px, 1fr); } .cli-linha .c-canal { display: none !important; } }
.com-detalhe .cli-linha { --colunas: minmax(0, 1fr) 100px 92px 92px; }
.com-detalhe .cli-linha .c-pont, .com-detalhe .cli-linha .c-perfil, .com-detalhe .cli-linha .c-canal, .com-detalhe .cli-linha .c-aberto { display: none; }
.pontualidade { display: flex; align-items: center; gap: 8px; }
.pontualidade .barra { flex: 1; height: 4px; background: #E3E7EA; border-radius: 2px; overflow: hidden; min-width: 40px; }
.pontualidade .barra i { display: block; height: 100%; background: var(--texto-2); }
.pontualidade .n { width: 40px; white-space: nowrap; text-align: right; font-size: var(--t-12); color: var(--texto-2); }
.mov-linha { --colunas: 84px minmax(0, 2.2fr) 112px 150px minmax(0, .9fr); }
.com-detalhe .mov-linha { --colunas: 90px minmax(0, 1fr) 108px 118px; }
.com-detalhe .mov-linha .c-fat { display: none; }

.conta-banco { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); gap: var(--e-5); align-items: center; padding: 14px var(--e-5); border-bottom: 1px solid var(--linha); background: var(--superficie); }
.conta-banco .cb-conta { display: flex; gap: 12px; align-items: center; min-width: 0; }
.conta-banco .ic-lig { width: 30px; height: 30px; border-radius: var(--r-2); background: var(--superficie-2); border: 1px solid var(--linha); display: grid; place-items: center; color: var(--texto-2); flex: none; }
.conta-banco .cb-saldo .v { font-size: var(--t-20); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.conta-banco .cb-leitura { text-align: right; line-height: 1.5; }
.conta-banco .cb-conta > div { min-width: 0; }
.conta-banco .cb-conta .forte, .conta-banco .cb-conta .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-detalhe .conta-banco { grid-template-columns: minmax(0, 1fr) auto; }
.com-detalhe .conta-banco .cb-leitura { display: none; }
.valor-mov { font-variant-numeric: tabular-nums; white-space: nowrap; }
.valor-mov .pos, .valor-mov .neg { font-weight: 600; margin-right: 1px; }
.mov-linha .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* telemóvel: o cartão empilha (banco e conta, IBAN inteiro, saldo, estado numa linha); nada truncado */
@media (max-width: 899px) {
  .conta-banco { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px; }
  .conta-banco .cb-conta { align-items: flex-start; }
  .conta-banco .cb-conta .forte { white-space: normal; overflow: visible; }
  .conta-banco .cb-conta .mono { white-space: nowrap; overflow: visible; text-overflow: clip; font-size: 12.5px !important; }
  .conta-banco .cb-saldo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .conta-banco .cb-leitura { text-align: left; }
}

/* ------------------------------------------------------------------ Clientes (detalhe) */
.ficha-contactos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--t-13); }
.ficha-contactos dt { color: var(--texto-2); }
.ficha-contactos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.numeros-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r-2); overflow: hidden; margin-bottom: 12px; }
.numeros-mini > div { background: var(--superficie); padding: 8px 10px; }
.numeros-mini .r { font-size: var(--t-11); color: var(--texto-3); font-weight: 500; }
.numeros-mini .v { font-size: var(--t-16); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 1px; }
.tendencia { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-13); margin-top: 10px; }
.tendencia .ic { margin-top: 2px; }
.tendencia.melhor .ic { color: var(--pago); }
.tendencia.pior .ic { color: var(--atraso); }

/* ------------------------------------------------------------------ Cobranças */
.regua-vis { padding: 22px 26px 10px; }
.regua-vis svg { width: 100%; height: auto; display: block; overflow: visible; }
.regua-vis text { font: 400 11px var(--letra); fill: var(--texto-2); font-variant-numeric: tabular-nums; }
.regua-tab { --colunas: 150px 150px minmax(0, 1fr) 70px 90px 40px; }
.regua-tab .linha { min-height: 48px; }
.regua-tab .linha.inativo > :not(.c-ativo):not(.c-rem) { opacity: .45; }
.dias-campo { display: flex; align-items: center; gap: 6px; }
.dias-campo .campo { width: 64px; text-align: right; }
.dias-campo input[type="number"].campo { width: 64px; flex: none; }
.dias-campo .pequeno { min-width: 44px; }
.config-grelha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.regras-seg { list-style: none; margin: 0; padding: 0; }
.regras-seg li { display: flex; gap: 9px; padding: 5px 0; font-size: var(--t-13); color: var(--texto-2); }
.regras-seg .ic { color: var(--pago); margin-top: 2px; }
.modelos-grelha { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 0; height: 100%; min-height: 0; }
.modelos-lista { border-right: 1px solid var(--linha); overflow-y: auto; background: var(--fundo); }
.modelos-lista button { display: block; width: 100%; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--linha); font-size: var(--t-13); }
.modelos-lista button:hover { background: rgba(28,31,36,.035); }
.modelos-lista button.ativo { background: var(--superficie); box-shadow: inset 2px 0 0 var(--acao); }
.modelos-lista .nm { font-weight: 500; }
.modelos-lista .d { font-size: var(--t-12); color: var(--texto-3); margin-top: 1px; }
.modelos-lista .grupo { padding: 14px 16px 6px; font-size: var(--t-12); color: var(--texto-3); font-weight: 500; }
.modelo-editor { padding: var(--e-5); overflow-y: auto; background: var(--superficie); min-width: 0; }
.modelo-editor textarea.campo { min-height: 240px; font-size: var(--t-14); line-height: 1.55; }
.variaveis { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.variaveis button { height: 24px; padding: 0 8px; border: 1px solid var(--linha); border-radius: var(--r-1); background: var(--superficie-2); font-family: var(--letra-mono); font-size: 11.5px; color: var(--texto-2); }
.variaveis button:hover { border-color: var(--linha-forte); color: var(--texto); background: var(--superficie); }
.pre-vis { background: var(--fundo); border-left: 1px solid var(--linha); padding: var(--e-5) 18px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; }
.pre-vis .rot { align-self: stretch; font-size: var(--t-12); color: var(--texto-2); font-weight: 500; margin-bottom: 10px; display: flex; justify-content: space-between; }
.email-pre { align-self: stretch; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); font-size: var(--t-13); overflow: hidden; }
.email-pre .cab-email { padding: 10px 12px; border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: var(--t-12); }
.email-pre .cab-email dt { color: var(--texto-3); }
.email-pre .cab-email dd { margin: 0; overflow-wrap: anywhere; }
.email-pre .corpo-email { padding: 12px; white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.email-pre .anexo { margin: 0 12px 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--linha); border-radius: var(--r-2); font-size: var(--t-12); color: var(--texto-2); }
.fila-estado { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--linha); background: var(--superficie); border-radius: var(--r-3); }
.fila-estado .icone-estado { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--pago-fundo); color: var(--pago); }
.fila-estado.parada { background: var(--atraso-fundo); border-color: #E8CFC7; }
.fila-estado.parada .icone-estado { background: #fff; color: var(--atraso); }
.fila-estado.pausa { background: var(--aviso-fundo); border-color: #E4D8B8; }
.fila-estado.pausa .icone-estado { background: #fff; color: var(--aviso); }
.fila-estado .tit { font-weight: 600; font-size: var(--t-14); }
.fila-estado.parada .tit { color: var(--atraso); }
.fila-estado .txt { font-size: var(--t-13); color: var(--texto-2); margin-top: 2px; }
.fila-estado.parada .txt { color: #6E2A1E; }
.fila-estado .acoes-fila { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.contador { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto); }
.acelerado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--aviso); margin-top: 6px; }
.fila-tab { --colunas: 34px minmax(0, 1.3fr) minmax(0, 1fr) 128px 92px 110px 150px; }
.hist-tab { --colunas: 128px minmax(0, 1.2fr) 86px minmax(0, .8fr) 104px minmax(0, 1.4fr); }
.resumo-30 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
.resumo-30 > div { padding: 12px 16px; border-left: 1px solid var(--linha); }
.resumo-30 > div:first-child { border-left: 0; }
.resumo-30 .r { font-size: var(--t-12); color: var(--texto-2); }
.resumo-30 .v { font-size: var(--t-20); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 2px; }
.citacao { font-style: normal; color: var(--texto); }
.citacao::before { content: "«"; color: var(--texto-3); }
.citacao::after { content: "»"; color: var(--texto-3); }

.barra-guardar { position: sticky; bottom: 16px; z-index: 5; margin-top: var(--e-4); display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; background: var(--texto); color: #fff; border-radius: var(--r-3); box-shadow: var(--sombra-pop); font-size: var(--t-13); }
.barra-guardar > span { flex: 1; }
.barra-guardar .btn:not(.primario) { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.barra-guardar .btn.primario { background: #fff; color: var(--texto); border-color: #fff; }
.btn.ativo-seg { background: var(--superficie-2); border-color: var(--linha-forte); color: var(--texto); font-weight: 600; box-shadow: inset 0 1px 2px rgba(28,31,36,.06); }
.acoes-linha { display: flex; justify-content: flex-end; gap: 2px; align-items: center; }
.fila-tab .linha.falhou { background: var(--atraso-fundo); }
.tabela .linha.destaque { box-shadow: inset 3px 0 0 var(--atraso); }
.hist-tab .resposta { white-space: normal; font-size: var(--t-13); line-height: 1.4; }
.regua-tab .c-rem { display: flex; justify-content: flex-end; }
.regua-tab .linha .campo { height: 30px; }

/* ------------------------------------------------------------------ Definições */
.def-sec { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); margin-bottom: var(--e-5); }
.def-sec > .cab-sec { padding: 14px 18px; border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 12px; }
.def-sec > .cab-sec h2 { flex: 1; }
.def-sec > .corpo-sec { padding: 16px 18px; }
.def-sec > .pe-sec { padding: 12px 18px; border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; gap: 8px; background: var(--superficie-2); border-radius: 0 0 var(--r-3) var(--r-3); }
.ligacao { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--linha); align-items: start; }
.ligacao:last-child { border-bottom: 0; }
.ligacao .ic-lig { width: 26px; height: 26px; border-radius: var(--r-2); background: var(--superficie-2); border: 1px solid var(--linha); display: grid; place-items: center; color: var(--texto-2); }
.ligacao .nm { font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ligacao .det { font-size: var(--t-13); color: var(--texto-2); margin-top: 3px; }
.ligacao .det .mono { font-size: 12px; }
.ligacao .acoes-lig { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.capo-tab { --colunas: 74px 52px minmax(0, 1fr) 54px 60px; }
.capo-tab .linha { min-height: 34px; font-size: 12.5px; }
.capo-tab .metodo { font-family: var(--letra-mono); font-size: 11.5px; font-weight: 600; color: var(--texto-2); }
.capo-tab .metodo.escrita { color: var(--acao); }
.capo-tab .linha.escrita { background: #F8FAFB; }
.aud-tab { --colunas: 120px 132px minmax(0, 1fr) 210px; }
.aud-tab .linha { align-items: start; padding-top: 9px; padding-bottom: 9px; }
.aud-tab .linha > * { white-space: normal; }
.aud-tab .ix { font-family: var(--letra-mono); font-size: 11.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.ligacao-texto { color: var(--texto); text-decoration: none; }
.ligacao-texto:hover { color: var(--acao); text-decoration: underline; }
.regras-campos .sufixo { max-width: 300px; }
.util-tab { --colunas: minmax(0, 1.2fr) minmax(0, 1.2fr) 160px 130px 90px; }
.limiar { display: flex; align-items: center; gap: 14px; }
.limiar output { font-size: var(--t-20); font-weight: 500; font-variant-numeric: tabular-nums; width: 40px; text-align: right; }
.explica { padding: 12px 14px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--r-2); font-size: var(--t-14); line-height: 1.5; }
.seg-lista { list-style: none; margin: 0; padding: 0; }
.seg-lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-13); }
.seg-lista li:last-child { border-bottom: 0; }
.seg-lista .ic { color: var(--texto-2); margin-top: 1px; }
.seg-lista b { font-weight: 600; display: block; margin-bottom: 1px; }

/* ------------------------------------------------------------------ Ligar (assistente) */
.ligar { max-width: 720px; margin: 0 auto; padding: var(--e-6) var(--e-5) var(--e-7); }
.passos { display: flex; align-items: center; gap: 10px; font-size: var(--t-13); color: var(--texto-3); margin-bottom: var(--e-5); flex-wrap: wrap; }
.passos { list-style: none; padding: 0; }
.passos .p { display: inline-flex; align-items: center; gap: 7px; }
.passos .p .nr { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; font-size: var(--t-11); font-weight: 600; color: var(--texto-2); background: var(--superficie); }
.passos .p.ativo { color: var(--texto); font-weight: 500; }
.passos .p.ativo .nr { border-color: var(--texto); background: var(--texto); color: #fff; }
.passos .p.feito { color: var(--pago); }
.passos .p.feito .nr { border-color: var(--pago); background: var(--pago); color: #fff; }
.passos .traco { width: 24px; height: 1px; background: var(--linha-forte); }
.passos .est { font-size: var(--t-12); color: var(--texto-3); font-weight: 400; }
.cartao-passo { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
.cartao-passo .cp-cab { padding: 18px 22px 0; }
.cartao-passo .cp-cab h2 { font-size: var(--t-16); }
.cartao-passo .cp-cab p { color: var(--texto-2); font-size: var(--t-13); margin-top: 4px; }
.cartao-passo .cp-corpo { padding: 18px 22px; }
.cartao-passo .cp-pe { padding: 14px 22px; border-top: 1px solid var(--linha); display: flex; align-items: center; gap: 10px; background: var(--superficie-2); border-radius: 0 0 var(--r-3) var(--r-3); }
.cartao-passo .cp-pe .esq { margin-right: auto; font-size: var(--t-12); color: var(--texto-3); display: flex; gap: 7px; align-items: flex-start; max-width: 70%; }
.progresso-passos { list-style: none; margin: 14px 0 0; padding: 0; font-size: var(--t-13); }
.progresso-passos li { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--texto-2); }
.progresso-passos li.feito { color: var(--pago); }
.progresso-passos li.agora::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--acao); border-right-color: transparent; animation: roda .8s linear infinite; margin: 0 3px; }
.ok-ligacao { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-3); background: var(--pago-fundo); border: 1px solid #BFE3D2; color: #0B4A36; font-size: var(--t-13); }
.ok-ligacao .ic { color: var(--pago); width: 18px; height: 18px; margin-top: 1px; }
.ok-ligacao b { display: block; font-size: var(--t-14); font-weight: 600; color: var(--pago); margin-bottom: 2px; }
.bancos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.bancos-lista label { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--linha); border-radius: var(--r-2); cursor: pointer; font-size: var(--t-13); background: var(--superficie); }
.bancos-lista label:hover { border-color: var(--linha-forte); }
.bancos-lista label:has(input:checked) { border-color: var(--acao); background: #F6F9FA; font-weight: 500; }
.bancos-lista .bic { margin-left: auto; font-family: var(--letra-mono); font-size: 11px; color: var(--texto-3); font-weight: 400; }
.zona-ficheiro { border: 1.5px dashed var(--linha-forte); border-radius: var(--r-3); padding: 22px; text-align: center; color: var(--texto-2); font-size: var(--t-13); background: var(--superficie-2); transition: background var(--transicao), border-color var(--transicao); cursor: pointer; }
.zona-ficheiro:hover, .zona-ficheiro.sobre { border-color: var(--acao); background: var(--acao-fundo); }
.zona-ficheiro .ic { width: 22px; height: 22px; color: var(--texto-3); margin-bottom: 6px; }
.zona-ficheiro b { color: var(--acao); font-weight: 500; }
.escolha-linhas { display: grid; gap: 6px; }
.escolha-linhas label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--r-2); cursor: pointer; background: var(--superficie); }
.escolha-linhas label:has(input:checked) { border-color: var(--acao); background: #F6F9FA; }
.escolha-linhas input { margin-top: 3px; accent-color: var(--acao); }
.escolha-linhas b { font-weight: 500; }
.seg-lista li > div b { font-weight: 600; }
.qr { width: 196px; height: 196px; border: 1px solid var(--linha); border-radius: var(--r-2); padding: 8px; background: #fff; image-rendering: pixelated; }

/* ------------------------------------------------------------------ menus, diálogos, avisos */
.menu { position: fixed; z-index: 70; min-width: 200px; max-width: 320px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-pop); padding: 4px; animation: menu-abre 120ms ease-out; }
@keyframes menu-abre { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.menu button, .menu a { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 10px; border-radius: var(--r-2); font-size: var(--t-13); color: var(--texto); text-decoration: none; }
.menu button:hover, .menu a:hover, .menu button:focus-visible { background: var(--superficie-2); outline: none; text-decoration: none; }
.menu .ic { color: var(--texto-3); }
.menu .sep { height: 1px; background: var(--linha); margin: 4px 2px; }
.menu .rot-menu { font-size: var(--t-11); color: var(--texto-3); padding: 6px 10px 2px; font-weight: 500; }
.menu .d { font-size: var(--t-12); color: var(--texto-3); }
.menu .marcado { margin-left: auto; color: var(--acao); }
.menu .perigo { color: var(--atraso); }
.veu { position: fixed; inset: 0; z-index: 90; background: rgba(28,31,36,.28); display: grid; place-items: center; padding: 16px; animation: veu 140ms ease-out; }
@keyframes veu { from { opacity: 0; } }
.dialogo { width: 440px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--superficie); border-radius: var(--r-3); box-shadow: var(--sombra-pop); animation: dialogo 160ms cubic-bezier(.2,.7,.2,1); }
.dialogo.largo { width: 580px; }
@keyframes dialogo { from { opacity: 0; transform: translateY(6px) scale(.99); } }
.dialogo .d-cab { padding: 18px 20px 4px; }
.dialogo .d-cab h2 { font-size: var(--t-16); font-weight: 600; }
.dialogo .d-corpo { padding: 8px 20px 16px; font-size: var(--t-13); color: var(--texto-2); }
.dialogo .d-corpo p + p { margin-top: 8px; }
.dialogo .d-pe { padding: 12px 20px 16px; display: flex; justify-content: flex-end; gap: 8px; }
.dialogo .tabela-dialogo { margin: 10px 0 4px; border: 1px solid var(--linha); border-radius: var(--r-2); overflow: hidden; }
.dialogo .tabela-dialogo > div { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--linha); color: var(--texto); }
.dialogo .tabela-dialogo > div:last-child { border-bottom: 0; }
.dialogo .tabela-dialogo > div > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.procura-global { width: 620px; align-self: start; margin-top: 10vh; }
.procura-global .pg-campo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.procura-global .pg-campo input { border: 0; outline: none; flex: 1; font-size: var(--t-16); background: transparent; min-width: 0; }
.procura-global .pg-res { max-height: 56vh; overflow-y: auto; padding: 6px; }
.procura-global .pg-grupo { font-size: var(--t-11); color: var(--texto-3); font-weight: 500; padding: 8px 10px 4px; }
.procura-global .pg-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-2); font-size: var(--t-13); color: var(--texto); text-decoration: none; }
.procura-global .pg-item.sel { background: var(--acao-fundo); }
.procura-global .pg-item .ic { color: var(--texto-3); }
.procura-global .pg-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.procura-global .pg-vazio { padding: 22px; text-align: center; color: var(--texto-3); font-size: var(--t-13); }
.procura-global .pg-pe { padding: 8px 14px; border-top: 1px solid var(--linha); font-size: var(--t-12); color: var(--texto-3); display: flex; gap: 14px; }
.atalhos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: var(--t-13); color: var(--texto); align-items: center; }
.atalhos dt { display: flex; gap: 4px; }
.atalhos dd { margin: 0; color: var(--texto-2); }
.toasts { position: fixed; left: calc(var(--lateral-largura) + 16px); bottom: 16px; z-index: 95; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 460px; padding: 10px 12px 10px 14px; border-radius: var(--r-3); background: var(--texto); color: #fff; font-size: var(--t-13); box-shadow: var(--sombra-pop); animation: toast 180ms cubic-bezier(.2,.7,.2,1); }
.toast.sai { animation: toast-sai 160ms ease-in forwards; }
@keyframes toast { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-sai { to { opacity: 0; transform: translateY(6px); } }
.toast .ic { color: #8FD9BB; }
.toast.erro .ic { color: #F0A493; }
.toast .txt { flex: 1; }
.toast button { color: #A9CEDE; font-weight: 500; font-size: var(--t-13); padding: 2px 4px; border-radius: 4px; }
.toast button:hover { color: #fff; background: rgba(255,255,255,.08); }
/* Modo apresentação: os avisos sobem para o canto superior direito, longe da barra de controlos e das legendas */
.apresentando:not(.ap-limpo) .toasts { top: 72px; right: 24px; bottom: auto; left: auto; align-items: flex-end; }

/* esqueletos e vazios */
.esq-linha { height: var(--linha-altura); border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 18px; padding: 0 var(--e-5); background: var(--superficie); }
.esq-linha i, .esq-bloco i { display: block; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #EDEFF1 0%, #F6F7F8 50%, #EDEFF1 100%); background-size: 200% 100%; animation: brilho 1.2s ease-in-out infinite; }
.esq-bloco { padding: var(--e-5); display: flex; flex-direction: column; gap: 14px; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.vazio { padding: 56px 24px; text-align: center; color: var(--texto-2); font-size: var(--t-14); max-width: 460px; margin: 0 auto; }
.vazio .ic { width: 22px; height: 22px; color: var(--texto-3); margin-bottom: 10px; }
.vazio h2 { font-size: var(--t-14); color: var(--texto); margin-bottom: 4px; }
.vazio p { font-size: var(--t-13); color: var(--texto-2); }
.vazio .btn { margin-top: 14px; }
.erro-ecra { padding: 40px 24px; max-width: 520px; margin: 0 auto; }
.paginacao { display: flex; gap: 6px; align-items: center; }

/* ------------------------------------------------------------------ telemóvel simulado */
.btn-telemovel { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 8px; border-radius: var(--r-2); color: var(--texto-2); font-size: var(--t-13); text-align: left; }
.btn-telemovel:hover { background: rgba(28,31,36,.05); color: var(--texto); }
.btn-telemovel.aberto { background: rgba(28,31,36,.08); color: var(--texto); }
.btn-telemovel .rot-tel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-telemovel .ponto-wa { width: 6px; height: 6px; border-radius: 50%; background: var(--pago-marca); flex: none; margin-right: 2px; }
.btn-telemovel .ponto-wa.escrever { animation: pulsa 1s ease-in-out infinite; }
.btn-telemovel .ponto-wa.parado { background: var(--atraso); }
@keyframes pulsa { 50% { opacity: .3; } }
.telemovel { position: fixed; right: 22px; bottom: 22px; z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: tel-abre 220ms cubic-bezier(.2,.7,.2,1); }
@keyframes tel-abre { from { opacity: 0; transform: translateY(16px); } }
.telemovel .moldura { width: 320px; height: min(640px, calc(100vh - 110px)); border-radius: 40px; background: #1C1F24; padding: 10px; box-shadow: var(--sombra-pop), 0 0 0 1px rgba(0,0,0,.4); position: relative; }
.telemovel .ecra { width: 100%; height: 100%; border-radius: 31px; background: #F3F4F6; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.telemovel .barra-estado { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 6px 24px 0 26px; font-size: 12px; font-weight: 600; color: var(--texto); flex: none; background: #FBFBFC; }
.telemovel .barra-estado .ilha { width: 86px; height: 22px; border-radius: 11px; background: #1C1F24; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); }
.telemovel .barra-estado .ind { display: flex; gap: 4px; align-items: center; }
.telemovel .barra-estado .ind i { display: block; background: var(--texto); border-radius: 1px; }
.tel-cab { display: flex; align-items: center; gap: 9px; padding: 8px 12px 9px; background: #FBFBFC; border-bottom: 1px solid #E3E6E9; flex: none; min-height: 52px; }
.tel-cab button { color: var(--acao); display: grid; place-items: center; width: 22px; height: 28px; }
.tel-cab .av { width: 32px; height: 32px; font-size: 11px; background: #D8DDE2; }
.tel-cab .nm { font-size: 13.5px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-cab .st { font-size: 11.5px; color: var(--texto-3); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-cab .st.escrever { color: var(--pago); }
.tel-cab .cresce { flex: 1; min-width: 0; }
.tel-conversas { flex: 1; overflow-y: auto; background: #FBFBFC; }
.tel-conversas .tit-lista { font-size: 22px; font-weight: 600; padding: 6px 16px 8px; letter-spacing: 0; }
.tel-conversas button { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 14px; border-bottom: 1px solid #ECEEF0; }
.tel-conversas button:hover { background: #F3F4F6; }
.tel-conversas .av { width: 40px; height: 40px; font-size: 12px; background: #D8DDE2; }
.tel-conversas .nm { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-conversas .ul { font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-conversas .ul.escrever { color: var(--pago); }
.tel-conversas .hora { font-size: 11px; color: var(--texto-3); text-align: right; }
.tel-conversas .por-ler { margin-top: 3px; margin-left: auto; min-width: 18px; height: 18px; border-radius: 9px; background: var(--pago); color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; padding: 0 5px; }
.tel-msgs { flex: 1; overflow-y: auto; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px; background: #EFEDE6; }
.tel-dia { align-self: center; font-size: 11px; color: var(--texto-2); background: #E3E0D7; padding: 3px 9px; border-radius: 8px; margin: 6px 0 2px; }
.balao { max-width: 84%; padding: 7px 10px 5px; border-radius: 12px; font-size: 13px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 0 rgba(0,0,0,.06); animation: balao 220ms cubic-bezier(.2,.7,.2,1); }
@keyframes balao { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.balao.empresa { align-self: flex-end; background: #DDE8EC; border-bottom-right-radius: 4px; color: #17262E; }
.balao.cliente { align-self: flex-start; background: #FFFFFF; border-bottom-left-radius: 4px; }
.balao .meta { display: block; text-align: right; font-size: 10.5px; color: #6F7A80; margin-top: 2px; font-variant-numeric: tabular-nums; }
.balao .meta.lida { color: var(--acao); }
.balao .meta.falhou { color: var(--atraso); }
.balao a { color: var(--acao); text-decoration: underline; text-underline-offset: 2px; }
.balao.a-escrever { padding: 10px 12px; display: inline-flex; gap: 4px; align-items: center; }
.balao.a-escrever i { width: 6px; height: 6px; border-radius: 50%; background: #6F7A80; animation: pontos 1.2s infinite ease-in-out; display: block; }
.balao.a-escrever i:nth-child(2) { animation-delay: .15s; }
.balao.a-escrever i:nth-child(3) { animation-delay: .3s; }
@keyframes pontos { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
.tel-compor { display: flex; gap: 6px; padding: 8px 10px 14px; background: #FBFBFC; border-top: 1px solid #E3E6E9; flex: none; }
.tel-compor input { flex: 1; min-width: 0; height: 32px; border: 1px solid #D5DAE0; border-radius: 16px; padding: 0 12px; font-size: 13px; background: #fff; outline: none; }
.tel-compor input:focus { border-color: var(--acao); }
.tel-compor button { width: 32px; height: 32px; border-radius: 50%; background: var(--acao); color: #fff; display: grid; place-items: center; flex: none; }
.tel-compor button[disabled] { opacity: .4; }
.tel-sobre { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; z-index: 3; animation: tel-sobe 220ms cubic-bezier(.2,.7,.2,1); }
@keyframes tel-sobe { from { transform: translateY(24px); opacity: 0; } }
.tel-sobre .barra-nav { height: 40px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #F3F4F6; border-bottom: 1px solid #E3E6E9; font-size: 12px; color: var(--texto-2); }
.tel-sobre .barra-nav .url { flex: 1; min-width: 0; height: 26px; border-radius: 7px; background: #E6E9EC; display: flex; align-items: center; justify-content: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; }
.tel-sobre .barra-nav button { color: var(--acao); font-size: 12.5px; font-weight: 500; }
.tel-sobre iframe { flex: 1; border: 0; width: 100%; }
.telemovel .legenda-tel { display: flex; align-items: center; gap: 10px; font-size: var(--t-12); color: var(--texto-2); background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 4px 6px 4px 12px; box-shadow: 0 2px 8px rgba(28,31,36,.06); }
.telemovel .legenda-tel b { color: var(--aviso); font-weight: 500; }
.telemovel .legenda-tel button { color: var(--texto-2); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.telemovel .legenda-tel button:hover { background: var(--superficie-2); color: var(--texto); }
.tel-link { display: inline; padding: 0; color: var(--acao); text-decoration: underline; text-underline-offset: 2px; font: inherit; text-align: left; overflow-wrap: anywhere; word-break: break-all; }
.btn-telemovel .por-ler-btn { min-width: 18px; height: 18px; border-radius: 9px; background: var(--pago); color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; padding: 0 5px; flex: none; }
.btn-telemovel .por-ler-btn.escondido { display: none; }
.tel-vazio { flex: 1; display: grid; place-items: center; text-align: center; padding: 30px; color: var(--texto-3); font-size: var(--t-13); background: #FBFBFC; }
.tel-sistema { align-self: center; max-width: 90%; text-align: center; font-size: 11px; color: var(--texto-2); background: #E9E6DC; padding: 5px 10px; border-radius: 8px; }
.tel-sistema.erro { background: var(--atraso-fundo); color: var(--atraso); }
.telemovel.pre { position: static; animation: none; }
.telemovel.pre .moldura { height: 560px; width: 286px; border-radius: 36px; padding: 9px; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 6px 20px rgba(28,31,36,.12); }
.telemovel.pre .ecra { border-radius: 28px; }

/* ------------------------------------------------------------------ barra inferior (telemóvel) */
.barra-inferior { display: none; }
.folha-mais { position: fixed; left: 0; right: 0; bottom: 0; z-index: 92; background: var(--superficie); border-radius: 14px 14px 0 0; box-shadow: var(--sombra-pop); padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); animation: folha 200ms cubic-bezier(.2,.7,.2,1); }
@keyframes folha { from { transform: translateY(30px); opacity: 0; } }
.folha-mais .puxador { width: 36px; height: 4px; border-radius: 2px; background: var(--linha-forte); margin: 2px auto 10px; }
.folha-mais a, .folha-mais button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--r-2); font-size: var(--t-14); color: var(--texto); text-decoration: none; text-align: left; }
.folha-mais a:hover, .folha-mais button:hover { background: var(--superficie-2); text-decoration: none; }
.folha-mais .ic { color: var(--texto-3); }
.folha-mais .sep { height: 1px; background: var(--linha); margin: 6px 8px; }

/* ------------------------------------------------------------------ responsivo */
@media (max-width: 1199px) {
  .ld.aberto { grid-template-columns: minmax(0, 1fr); }
  .ld.aberto .detalhe { position: absolute; right: 0; top: 0; bottom: 0; width: min(var(--detalhe-largura), 100%); box-shadow: var(--sombra-pop); z-index: 20; }
  .fat-linha, .com-detalhe .fat-linha { --colunas: 92px minmax(0, 1.4fr) 86px 104px minmax(130px, 1fr) 168px; }
  .fat-linha .c-emissao { display: none !important; }
  .fat-linha .c-estado .etiqueta { display: none; }
  .cli-linha, .com-detalhe .cli-linha { --colunas: minmax(0, 1.5fr) 100px 100px 90px 120px 84px; }
  .cli-linha .c-perfil, .cli-linha .c-canal { display: none !important; }
  .com-detalhe .cli-linha .c-pont, .com-detalhe .cli-linha .c-aberto { display: block; }
  .com-detalhe .cli-linha .c-pont { display: flex; }
  .mov-linha, .com-detalhe .mov-linha { --colunas: 80px minmax(0, 1.6fr) 108px 140px minmax(0, .8fr); }
  .com-detalhe .mov-linha .c-fat { display: block; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(4) { border-left: 0; }
  .kpi:nth-child(n+4) { border-top: 1px solid var(--linha); }
  .duas-col { grid-template-columns: minmax(0, 1fr); }
  .modelos-grelha { grid-template-columns: 220px minmax(0, 1fr); }
  .modelos-grelha .pre-vis { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--linha); }
  .config-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud-tab { --colunas: 110px 120px minmax(0, 1fr); }
  .aud-tab .c-ix { display: none; }
  .hist-tab { --colunas: 118px minmax(0, 1.2fr) 80px 96px minmax(0, 1.4fr); }
  .hist-tab .c-fat { display: none; }
}

@media (max-width: 899px) {
  :root { --linha-altura: 56px; }
  body { overflow: auto; }
  .janela { grid-template-columns: minmax(0, 1fr); height: auto; min-height: calc(100dvh - var(--faixa-altura)); padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .lateral { display: none; }
  .principal { min-height: calc(100dvh - var(--faixa-altura) - 60px); }
  .conteudo { overflow: visible; }
  .cabecalho { padding: 14px 16px 12px; min-height: 0; flex-wrap: wrap; position: sticky; top: 0; z-index: 30; }
  .cabecalho .acoes { width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
  .cabecalho .acoes:empty { display: none; }
  .cabecalho .acoes::-webkit-scrollbar { display: none; }
  .subnav, .barra-lista, .faixa-problema { padding-left: 16px; padding-right: 16px; }
  .barra-lista .procura { width: 100%; flex: 1 1 100%; }
  .barra-lista .resumo { margin-left: 0; width: 100%; white-space: normal; }
  .pagina, .hoje { padding: 16px 16px 32px; }
  .com-demo { --faixa-altura: 22px; }
  .faixa-demo:not(.escondido) { display: flex; }
  .so-movel { display: initial !important; }
  .so-largo { display: none !important; }
  .ld, .ld.aberto { display: block; height: auto; }
  .ld.aberto .ld-lista { display: none; }
  .ld.aberto .detalhe { position: static; width: auto; box-shadow: none; border-left: 0; animation: none; }
  .detalhe-cab { padding: 12px 16px; }
  .detalhe-cab .voltar { display: inline-flex; }
  .detalhe-cab .fechar { display: none; }
  .detalhe-corpo { overflow: visible; }
  .detalhe-pe { position: sticky; bottom: calc(56px + env(safe-area-inset-bottom)); padding: 10px 16px; z-index: 5; }
  /* uma só fila no telemóvel: Confirmar a toda a largura e «⋯» com Editar e Rejeitar (os motivos ficam à vista) */
  .acoes-detalhe { flex-wrap: nowrap; }
  .acoes-detalhe .primeiro { flex: 1 1 auto; min-width: 0; height: 44px; }
  .acoes-detalhe .btn-mais { display: inline-flex !important; width: 44px; height: 44px; flex: none; justify-content: center; padding: 0; }
  .bloco { padding: 14px 16px; }
  .rolar { overflow: visible; }
  /* tabelas → listas de duas linhas */
  .tabela .cab { display: none; }
  .tabela .linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a b" "c d"; column-gap: 12px; row-gap: 2px; padding: 9px 16px; min-height: 56px; align-content: center; }
  .tabela .linha > * { display: none; }
  .tabela .linha > [data-m] { display: block; }
  .tabela .linha > [data-m="a"] { grid-area: a; font-weight: 500; }
  .tabela .linha > .cel-2[data-m] { display: flex; flex-direction: row; gap: 0; min-width: 0; }
  .tabela .linha > .cel-2[data-m] > span + span::before { content: "\00a0·\00a0"; }
  .tabela .linha > .cel-2[data-m] > :last-child { flex: 1 1 auto; min-width: 0; }
  .tabela .linha > .cel-2[data-m] > :first-child { flex: 0 1 auto; }
  .tabela .linha > .cel-2[data-m="c"] > .t3, .tabela .linha > .cel-2[data-m] .etiqueta { display: none; }
  .tabela .linha > .cel-2[data-m] > .desc-banco { display: none; }
  .tabela .linha > .cel-2[data-m="c"] > :first-child { flex: 1 1 auto; }
  .tabela .linha > [data-m="b"] { grid-area: b; text-align: right; font-weight: 500; }
  .tabela .linha > [data-m="c"] { grid-area: c; font-size: var(--t-12); color: var(--texto-2); }
  .tabela .linha > [data-m="d"] { grid-area: d; text-align: right; font-size: var(--t-12); }
  .tabela .linha > [data-m="c"].estado, .tabela .linha > [data-m="d"].estado, .tabela .linha > [data-m="d"] .estado { font-size: var(--t-12); }
  .tabela .linha > .c-estado[data-m] { display: flex; justify-content: flex-end; }
  /* valor parcial: «1.845,00 €» e, por baixo, «de 3.690,00 €» (nunca colados na mesma linha) */
  .tabela .fat-linha > .cel-valor[data-m] { display: flex; flex-direction: column; align-items: flex-end; }
  .tabela .fat-linha > .c-num[data-m] { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; }
  .tabela .fat-linha > .c-num[data-m] .lida-tag::before { content: "\00a0·\00a0"; }
  .tabela .rodape { padding: 10px 16px; flex-wrap: wrap; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 12px 14px; }
  .kpi:nth-child(odd) { border-left: 0; }
  .kpi:nth-child(4) { border-left: 1px solid var(--linha); }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .kpi:first-child { grid-column: 1 / -1; }
  .kpi:first-child + .kpi { border-left: 0; border-top: 1px solid var(--linha); }
  .kpi:nth-child(3) { border-left: 1px solid var(--linha); }
  .kpi:nth-child(4) { border-left: 0; }
  .kpi:nth-child(5) { border-left: 1px solid var(--linha); }
  .kpi .val { font-size: 20px; }
  .kpi .rot { white-space: normal; }
  .antiguidade-tab { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .hoje-titulo h1 { font-size: var(--t-20); }
  .par { grid-template-columns: minmax(0, 1fr); }
  .par .meio { transform: rotate(90deg); height: 18px; }
  .rec-lote { padding: 10px 16px; }
  .form-grelha, .config-grelha { grid-template-columns: minmax(0, 1fr); }
  .modelos-grelha { display: block; }
  .modelos-lista { border-right: 0; border-bottom: 1px solid var(--linha); max-height: none; }
  .resumo-30 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo-30 > div:nth-child(odd) { border-left: 0; }
  .resumo-30 > div:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .fila-estado { flex-wrap: wrap; }
  .fila-estado .acoes-fila { margin-left: 46px; justify-content: flex-start; }
  .bancos-lista { grid-template-columns: minmax(0, 1fr); }
  .bancos-lista label { min-height: 44px; }
  .ligar { padding: 16px 16px 40px; }
  .cartao-passo .cp-cab, .cartao-passo .cp-corpo { padding-left: 16px; padding-right: 16px; }
  .cartao-passo .cp-pe { padding: 12px 16px; flex-wrap: wrap; }
  .cartao-passo .cp-pe .esq { max-width: 100%; width: 100%; }
  .ligacao { grid-template-columns: 26px minmax(0, 1fr); }
  .ligacao .acoes-lig { grid-column: 2; justify-content: flex-start; }
  .btn { min-height: 36px; }
  .btn.pequeno { min-height: 32px; }
  .barra-inferior {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(251,251,252,.97); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  }
  .barra-inferior a, .barra-inferior button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; font-size: 10.5px; color: var(--texto-3); text-decoration: none; position: relative; }
  .barra-inferior .ic { width: 20px; height: 20px; }
  .barra-inferior .ativo { color: var(--acao); }
  .barra-inferior .cont { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--atraso); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; padding: 0 4px; }
  .toasts { left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: none; }
  .tabela .linha > .c-estado[data-m] .etiqueta { display: none; }
  .secao-cab { flex-wrap: wrap; row-gap: 2px; }
  .secao-cab .t3 { order: 3; flex-basis: 100%; }
  .telemovel { right: 0; left: 0; bottom: 0; top: 0; background: rgba(28,31,36,.4); justify-content: center; padding: 12px; z-index: 96; }
  .telemovel .moldura { width: min(320px, 100%); height: min(620px, calc(100dvh - 70px)); }
  .procura-global { margin-top: 0; }
  .dialogo, .dialogo.largo { width: 100%; max-width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ── revisão: régua no telemóvel, barra inferior opaca (o botão do telemóvel simulado está na barra lateral) ── */
.pagina { padding-bottom: var(--e-7); }
.rolar::after { content: ""; display: block; height: 24px; }
.rec-fatura > :first-child { white-space: nowrap; }
@media (max-width: 899px) {
  .pagina, .hoje { padding-bottom: 136px; }
  .rolar::after { height: 120px; }
  .barra-inferior { background: var(--fundo); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabela .linha.regua-tab { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "d c a" "m m r"; row-gap: 8px; padding: 12px 16px; }
  .tabela .linha.regua-tab > * { display: flex; align-items: center; min-width: 0; }
  .tabela .linha.regua-tab > .dias-campo { grid-area: d; gap: 6px; }
  .tabela .linha.regua-tab > :nth-child(2) { grid-area: c; }
  .tabela .linha.regua-tab > :nth-child(3) { grid-area: m; }
  .tabela .linha.regua-tab > .c-ativo { grid-area: a; }
  .tabela .linha.regua-tab > .n { display: none; }
  .tabela .linha.regua-tab > .c-rem { grid-area: r; }
  .tabela .linha.regua-tab .campo { width: 100%; }
  .tabela .linha.regua-tab .dias-campo .campo { width: 64px; flex: none; }
  .tabela .linha .rec-fatura[data-m] > :first-child { flex: 0 0 auto; }
  .tabela .linha .rec-fatura[data-m] > :last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabela .linha > [data-m]:empty { display: none; }
}

/* ------------------------------------------------------------------ Ligação ao vivo, explicação, ensaio, «ligue hoje» */
.chip-ix { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 8px; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); font-size: var(--t-12); color: var(--texto-2); white-space: nowrap; max-width: 100%; }
.chip-ix:hover { border-color: var(--linha-forte); }
.chip-ix b { font-weight: 600; color: var(--texto); }
.chip-ix .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--pago-marca); flex: none; }
.chip-ix .ponto.erro { background: var(--atraso); }
.chip-ix.atento { border-color: #C9DAE1; background: var(--acao-fundo); }
.chip-ix.atento .ponto { animation: atento 1.6s ease-in-out infinite; }
.chip-ix .etq-atento { color: var(--acao); font-weight: 500; }
.chip-ix .ic { color: var(--texto-3); }
@keyframes atento { 0%, 100% { box-shadow: 0 0 0 0 rgba(14,159,110,.45); } 60% { box-shadow: 0 0 0 5px rgba(14,159,110,0); } }
/* a hora a que a fatura foi lida: texto secundário por baixo do número (nunca na coluna Estado) */
.fat-linha .c-num { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.25; }
.fat-linha .c-num > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lida-tag { font-size: var(--t-11); color: var(--texto-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.fat-linha.nova { animation: nova-linha 3.2s ease-out; }
@keyframes nova-linha { 0%, 40% { background: rgba(28,31,36,.06); } 100% { background: transparent; } }
.retido { color: var(--aviso); font-weight: 500; }
.cronologia .ev-futuro.retido { color: var(--texto-3); font-weight: 400; }
.cronologia .ev-futuro.retido .tit { text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.cronologia .ev-futuro.retido .marca-ev { color: var(--aviso); border-color: #E4D8B8; }
.estado-explicar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.estado-explicar .btn.discreto { height: 26px; font-size: var(--t-12); }
.perfil-pagador { font-size: var(--t-12); white-space: nowrap; }
.explicacao { display: grid; gap: 12px; min-width: 0; }
.explicacao > * { min-width: 0; overflow-wrap: anywhere; }
.exp-estado { display: flex; flex-direction: column; gap: 3px; }
.exp-estado .estado { font-size: var(--t-14); font-weight: 600; }
.exp-frases { margin: 0; padding-left: 18px; font-size: var(--t-14); line-height: 1.5; }
.exp-frases li + li { margin-top: 5px; }
.exp-cron { border: 1px solid var(--linha); border-radius: var(--r-2); padding: 8px 12px; }
.exp-cron summary { cursor: pointer; font-size: var(--t-13); color: var(--acao); }
.exp-cron[open] summary { margin-bottom: 12px; }
.exp-partilha { border-top: 1px solid var(--linha); padding-top: 12px; display: grid; gap: 6px; }
.exp-sub { color: var(--texto); }
.partilha-link { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--r-2); }
.partilha-link .mono { flex: 1; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.exp-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.etiqueta.tom-simpatico { background: var(--acao-fundo); color: var(--acao); }
.etiqueta.tom-firme { background: var(--aviso-fundo); color: var(--aviso); }
.etiqueta.tom-ultimo { background: var(--atraso-fundo); color: var(--atraso); }
.cel-msg { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cel-msg select { flex: 1; min-width: 0; }
.cel-msg .etiqueta { flex: none; min-width: 86px; justify-content: center; }
.motivo-fila { display: block; margin-top: 2px; white-space: normal; }
.regua-ensaio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ensaio-resumo b { color: var(--texto); font-weight: 600; }
.ensaio-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.ensaio-cab .tit { font-size: var(--t-16); font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ensaio-cab p { max-width: 640px; }
.ensaio-num, .capo-num { display: flex; gap: 22px; flex-wrap: wrap; }
.ensaio-num > div, .capo-num > div { display: flex; flex-direction: column; }
.ensaio-num b, .capo-num b { font-size: var(--t-20); font-weight: 500; line-height: 1.15; }
.ensaio-num span, .capo-num span { font-size: var(--t-12); color: var(--texto-3); }
.ensaio-lista { overflow: hidden; }
.ensaio-dia { padding: 12px 16px 8px; border-bottom: 1px solid var(--linha); }
.ensaio-dia h3 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; color: var(--texto); font-size: var(--t-13); }
.ensaio-dia h3 .cont { margin-left: auto; font-size: var(--t-12); font-weight: 400; color: var(--texto-3); }
.ensaio-dia ul { list-style: none; margin: 0 -8px; padding: 0; display: grid; gap: 2px; }
.ensaio-item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 90px; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 6px 8px; border-radius: var(--r-2); border: 1px solid transparent; }
.ensaio-item:hover { background: var(--superficie-2); border-color: var(--linha); }
.ensaio-item .cab-it { display: flex; align-items: center; gap: 6px; font-size: var(--t-13); min-width: 0; }
.ensaio-item .cab-it b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ensaio-item > .pequeno { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ensaio-item .ei-canal { text-align: right; }
.ensaio-vazios { padding: 10px 16px 12px; background: var(--superficie-2); margin: 0; }
@media (max-width: 899px) { .ensaio-item { grid-template-columns: minmax(0, 1fr); gap: 2px; } .ensaio-item .ei-canal { display: none; } }
.ligue-lista { list-style: none; margin: 0; padding: 0; }
.ligue-lista li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--linha); }
.ligue-lista li:last-child { border-bottom: 0; }
.ligue-lista .av { width: 30px; height: 30px; font-size: 11px; margin-top: 1px; }
.ligue-lista .txt { flex: 1; min-width: 0; font-size: var(--t-13); }
.ligue-lista .txt .t { font-weight: 500; color: var(--texto); }
.ligue-lista .txt .risco { font-size: var(--t-11); height: 18px; padding: 0 7px; margin-left: 4px; vertical-align: 1px; }
.ligue-lista .txt .d { font-size: var(--t-12); color: var(--texto-2); margin-top: 1px; }
.ligue-lista .v { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--t-14); font-weight: 500; white-space: nowrap; }
.capo-resumo { display: grid; gap: 10px; margin: 4px 0 18px; }
.capo-resumo > :not(.tabela) { margin-left: 16px; margin-right: 16px; }
.capo-resumo > .capo-num { margin-top: 12px; }
.capo-barra { height: 6px; border-radius: 3px; background: var(--neutro-fundo); overflow: hidden; }
.capo-barra i { display: block; height: 100%; background: var(--acao); border-radius: 3px; }
.capo-res-tab { --colunas: minmax(0, 1.3fr) minmax(0, 1fr) 60px 54px; }
.capo-res-tab .linha { min-height: 34px; font-size: 12.5px; }
.capo-res-tab .metodo { font-family: var(--letra-mono); font-size: 11.5px; font-weight: 600; color: var(--texto-2); }
.capo-res-tab .metodo.escrita, .capo-res-tab .linha.escrita .metodo { color: var(--acao); }
.capo-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.capo-sub { margin: 4px 16px 8px; color: var(--texto); }
.tel-cta { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% + 20px); margin: 6px -10px -5px; padding: 8px 10px; border-top: 1px solid rgba(23,38,46,.12); color: var(--acao); font-size: 13px; font-weight: 500; border-radius: 0 0 4px 12px; }
.tel-cta:hover { background: rgba(26,94,110,.07); }
@media (max-width: 899px) {
  .chip-ix { height: auto; min-height: 30px; padding: 4px 10px; flex-wrap: wrap; white-space: normal; row-gap: 0; text-align: left; }
  .cab-sec:has(.chip-ix) { flex-wrap: wrap; }
  .capo-res-tab { --colunas: minmax(0, 1fr) 54px 48px; }
  .ensaio-num { gap: 16px; }
  .ligue-lista li { padding: 11px 14px; }
}

@media print {
  .lateral, .barra-inferior, .faixa-demo, .btn-telemovel, .telemovel, .toasts { display: none !important; }
  .janela { display: block; height: auto; }
  body { overflow: visible; background: #fff; }
}

/* ── profissionalismo (23-10): Faturas a 1280 px, telemóvel, cabeçalhos de secção ── */
@media (max-width: 1365px) { .kpi .rot-extra { display: none; } }
@media (max-width: 899px) { .kpi .rot-extra { display: inline; } }
@media (min-width: 1200px) and (max-width: 1365px) {
  .fat-linha { --colunas: 98px minmax(0, 1.6fr) 86px 112px minmax(150px, 1fr) 176px; }
  .fat-linha .c-emissao { display: none !important; }
  .fat-linha .c-estado .etiqueta { display: none; }   /* «a confirmar» já tem separador próprio; como abaixo de 1200 px */
  /* com o painel aberto sobram ~520 px: a data e a fatura sugerida estão no painel; a lista fica com quem pagou, valor e confiança */
  .com-detalhe .rec-linha { --colunas: minmax(0, 1fr) 104px 128px; }
  .com-detalhe .rec-linha > :nth-child(1), .com-detalhe .rec-linha > :nth-child(5) { display: none; }
}
@media (max-width: 899px) {
  /* no telemóvel, o telemóvel simulado abre-se em «Mais» */
  .btn-telemovel { display: none !important; }
  .cab-sec { flex-wrap: wrap; }
  .cab-sec h2, .def-sec > .cab-sec h2 { flex-basis: 100%; }
}

/* ── ronda visual 3 (23-10) ── */
@media (max-width: 899px) {
  .tabela .linha > .cli-nome[data-m] { display: flex; }
  .tabela .linha > .c-semhist[data-m] { grid-column: auto; text-align: right; }
}
/* régua com a conta suspensa pelo parceiro: tudo à vista, nada mexe */
.def-sec.suspensa .regua-vis, .def-sec.suspensa .tabela { opacity: .5; pointer-events: none; filter: grayscale(.4); }
.etq-pausa { height: 22px; gap: 5px; padding: 0 9px; font-size: var(--t-12); }
.faixa-problema.aviso .ic { color: var(--aviso); }
#f-tab:empty { display: none; }
/* com o painel aberto, a ação em lote passa a secundária: o botão cheio é o da revisão que está à frente */
.com-detalhe .rec-lote .btn.primario { background: var(--superficie); color: var(--acao); border-color: var(--linha-forte); }
.com-detalhe .rec-lote .btn.primario:hover { background: var(--acao-fundo); border-color: #B5C9D0; }
@media (max-width: 899px) {
  /* subtítulos inteiros no telemóvel (nunca «…do InvoiceXpres…») */
  .cabecalho .sub { white-space: normal; overflow: visible; text-overflow: clip; }
  /* «por confirmar» é dinheiro a entrar: emblema petróleo, como no computador; o vermelho fica para o atraso */
  .barra-inferior .cont { background: var(--acao); }
}
/* Modo apresentação: um aviso de cada vez, no canto inferior direito, por cima da barra de ações do painel */
.apresentando:not(.ap-limpo) .toasts { top: auto; left: auto; right: 24px; bottom: 96px; align-items: flex-end; }
.apresentando:not(.ap-limpo) .toast { max-width: min(412px, calc(100vw - 48px)); }
.escolha label.desligada { cursor: default; background: var(--superficie-2); }
.escolha label.desligada b { color: var(--texto-2); }
.escolha label.desligada .etiqueta { margin-left: 6px; vertical-align: 1px; }
/* Definições › Segurança e dados: a sua conta e os dados da empresa */
.def-linhas { padding-top: 4px; padding-bottom: 4px; }
.def-linha { display: flex; align-items: center; gap: 12px 16px; padding: 12px 0; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.def-linha:first-child { border-top: 0; }
.def-linha b { display: block; font-weight: 500; color: var(--texto); }
.def-linha .btn { flex: none; }

/* ------------------------------------------------------------------ Documentos (leitura de faturas de fornecedores e comprovativos) */
.doc-topo { padding: var(--e-4) var(--e-5) 0; display: grid; gap: 10px; }
.doc-zona { padding: 16px 18px; }
.doc-zona.a-ler { cursor: progress; border-color: var(--acao); background: var(--acao-fundo); }
.doc-zona.a-ler .ic { animation: roda 1.1s linear infinite; }
.doc-linha { --colunas: 92px minmax(0, 2fr) minmax(0, 1fr) 112px 118px; }
.com-detalhe .doc-linha { --colunas: 90px minmax(0, 1fr) 108px 112px; }
.com-detalhe .doc-linha .c-tipo { display: none; }
.doc-linha .c-tipo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-verif { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-13); }
.doc-verif li { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); gap: 8px; align-items: baseline; }
.doc-verif li .ic { align-self: center; }
.doc-verif li .estado { font-weight: 500; white-space: nowrap; }
.doc-sug { display: grid; gap: 8px; }
.doc-sug-item { display: block; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--r-2); color: var(--texto); text-decoration: none; transition: border-color var(--transicao), background var(--transicao); }
.doc-sug-item:hover { border-color: var(--acao); background: var(--acao-fundo); }
.doc-sug-item.melhor { border-color: var(--linha-forte); }
.doc-sug-item .ds-cab { display: flex; gap: 8px; align-items: baseline; font-size: var(--t-13); }
.doc-sug-item .ds-cab .t2 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-sug-item .ds-cab .n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-sug-item ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 899px) {
  .doc-topo { padding: 12px 16px 0; }
  .tabela .doc-linha > .cel-2[data-m="a"] > .t3 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .doc-zona.a-ler .ic { animation: none; } }