/* RendaOK — ar profissional (ADR-253, 12 Out 2026). Carregar DEPOIS de base.css (e de shell.css na app).
   Aplica-se a <body class="shell-body"> (app) e <body class="app-pro"> (portais do contabilista e do inquilino, demo).
   Landing, blog e ferramentas públicas não o carregam. */
/* ================================================================
   APP — ar profissional (12 Out 2026, pedido do João: "mais Stripe, Klarna, Klaviyo").
   Só nas páginas da app (body:is(.shell-body, .app-pro)); landing, blog e portais não mudam.
   Regras: uma família de letra (Geist) no trabalho — Bricolage e o itálico ficam para a marca;
   rótulos em frase normal, não em Mono maiúsculo; um cinzento secundário; cartões brancos com
   contorno de 1 px, sem sombra; uma cor de ação (verde); cor de estado só onde há estado.
   ================================================================ */
body:is(.shell-body, .app-pro) {
  --app-bg: #F6F7F8;
  --app-line: #E4E7EB;
  --app-muted: #5E6772;   /* 5,7:1 sobre branco, 5,3:1 sobre --app-bg */
  --app-r: 10px;
  background: var(--app-bg);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body:is(.shell-body, .app-pro) .shell-main { background: var(--app-bg); }
body:is(.shell-body, .app-pro) .shell-topbar, body:is(.shell-body, .app-pro) .shell-sidebar, body:is(.shell-body, .app-pro) .shell-tabs { border-color: var(--app-line); }

/* Títulos: Geist, compactos */
body:is(.shell-body, .app-pro) h1, body:is(.shell-body, .app-pro) h2, body:is(.shell-body, .app-pro) h3, body:is(.shell-body, .app-pro) h4,
body:is(.shell-body, .app-pro) .shell-h1 { font-family: 'Geist', system-ui, sans-serif; letter-spacing: -0.015em; }
body:is(.shell-body, .app-pro) .shell-h1, body:is(.shell-body, .app-pro) .shell-content h1 { font-size: 24px; font-weight: 600; line-height: 1.25; }
body:is(.shell-body, .app-pro) .shell-content h2 { font-size: 18px; font-weight: 600; }
body:is(.shell-body, .app-pro) .shell-content h3 { font-size: 15px; font-weight: 600; }
body:is(.shell-body, .app-pro) h1 .it, body:is(.shell-body, .app-pro) h2 .it { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }

/* Rótulos: frase normal, cinzento único (o Mono maiúsculo fica para datas e códigos) */
body:is(.shell-body, .app-pro) .label-mono, body:is(.shell-body, .app-pro) .metric .label, body:is(.shell-body, .app-pro) .sidebar-section .section-label,
body:is(.shell-body, .app-pro) .todo-h, body:is(.shell-body, .app-pro) .pend-h, body:is(.shell-body, .app-pro) .recent-label, body:is(.shell-body, .app-pro) .t-table th,
body:is(.shell-body, .app-pro) .field > label, body:is(.shell-body, .app-pro) .pn-date, body:is(.shell-body, .app-pro) .passos-gs .label-mono {
  font-family: 'Geist', system-ui, sans-serif; text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 500; color: var(--app-muted);
}
body:is(.shell-body, .app-pro) .sidebar-section .section-label { font-size: 12px; }
body:is(.shell-body, .app-pro) .t-table th { background: #fff; padding: 10px 16px; }
body:is(.shell-body, .app-pro) .t-table td { border-color: var(--app-line); }
body:is(.shell-body, .app-pro) .badge, body:is(.shell-body, .app-pro) .pilot-pill, body:is(.shell-body, .app-pro) .trial-pill, body:is(.shell-body, .app-pro) .df-pill,
body:is(.shell-body, .app-pro) .sidebar-item .badge, body:is(.shell-body, .app-pro) .shell-tab .count, body:is(.shell-body, .app-pro) .avatar-mini {
  font-family: 'Geist', system-ui, sans-serif; text-transform: none; letter-spacing: 0;
}
body:is(.shell-body, .app-pro) .badge { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 6px; }
body:is(.shell-body, .app-pro) .pilot-pill, body:is(.shell-body, .app-pro) .trial-pill { font-size: 12px; font-weight: 500; }
body:is(.shell-body, .app-pro) .df-pill { font-size: 12px; font-weight: 500; border-radius: 6px; }

/* Cartões: brancos, contorno de 1 px, sem sombra, sem faixas de cor */
body:is(.shell-body, .app-pro) .card, body:is(.shell-body, .app-pro) .metric, body:is(.shell-body, .app-pro) .todo-box, body:is(.shell-body, .app-pro) .pend-box,
body:is(.shell-body, .app-pro) .passos, body:is(.shell-body, .app-pro) .t-table-wrap, body:is(.shell-body, .app-pro) .asset-tile, body:is(.shell-body, .app-pro) .rent-roll,
body:is(.shell-body, .app-pro) .how-box, body:is(.shell-body, .app-pro) .arr-flow {
  background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-r); box-shadow: none;
}
body:is(.shell-body, .app-pro) .metric::before, body:is(.shell-body, .app-pro) .card-accent::before { display: none; }
body:is(.shell-body, .app-pro) .cw-card, body:is(.shell-body, .app-pro) .an-card { border: 1px solid var(--app-line); border-radius: var(--app-r); }
body:is(.shell-body, .app-pro) .cw-card:hover { border-color: var(--ink-3); }
body:is(.shell-body, .app-pro) .asset-tile.asset-tile { border-left: 1px solid var(--app-line); }
body:is(.shell-body, .app-pro) .how-box { border-left-width: 1px; }
body:is(.shell-body, .app-pro) .how-box summary { color: var(--ink); font-weight: 500; }
body:is(.shell-body, .app-pro) .how-box summary .ti, body:is(.shell-body, .app-pro) .how-box summary::before { color: var(--app-muted); }

/* Números: Geist, sem o € em itálico; cor só quando há estado (atraso a vermelho) */
body:is(.shell-body, .app-pro) .metric .value { font-family: 'Geist', system-ui, sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
body:is(.shell-body, .app-pro) .metric.is-green .value, body:is(.shell-body, .app-pro) .metric.is-amber .value { color: var(--ink); }
body:is(.shell-body, .app-pro) .metric.is-red .value { color: var(--red); }
body:is(.shell-body, .app-pro) .metric .delta { color: var(--app-muted); font-size: 12.5px; }
body:is(.shell-body, .app-pro) .list-sum b { font-family: 'Geist', system-ui, sans-serif; font-weight: 600; }

/* Botões: sem sombra nem salto; cantos de 8 px */
body:is(.shell-body, .app-pro) .btn { border-radius: 8px; font-weight: 500; }
body:is(.shell-body, .app-pro) .btn-primary { box-shadow: none; }
body:is(.shell-body, .app-pro) .btn-primary:hover:not(:disabled) { transform: none; }
body:is(.shell-body, .app-pro) .btn-ghost, body:is(.shell-body, .app-pro) .btn-sm:not(.btn-primary):not(.danger):not(.btn-danger) { background: #fff; border: 1px solid var(--app-line); border-radius: 8px; }
body:is(.shell-body, .app-pro) .btn-ghost:hover:not(:disabled), body:is(.shell-body, .app-pro) .btn-sm:not(.btn-primary):not(.danger):not(.btn-danger):hover { background: var(--app-bg); border-color: var(--green); }

/* Menu lateral: item ativo discreto (fundo cinzento, texto e ícone verdes), sem barra */
body:is(.shell-body, .app-pro) .sidebar-item { color: var(--ink); font-size: 14px; }
body:is(.shell-body, .app-pro) .sidebar-item .ti { color: var(--app-muted); }
body:is(.shell-body, .app-pro) .sidebar-item:hover { background: var(--app-bg); }
body:is(.shell-body, .app-pro) .sidebar-item.is-active { background: var(--app-bg); color: var(--green); font-weight: 600; }
body:is(.shell-body, .app-pro) .sidebar-item.is-active::before { display: none; }

/* Separadores: texto escuro, sublinhado verde só no ativo */
body:is(.shell-body, .app-pro) .shell-tab { color: var(--app-muted); font-size: 14px; }
body:is(.shell-body, .app-pro) .shell-tab.is-active { color: var(--ink); font-weight: 600; }

/* Campos */
body:is(.shell-body, .app-pro) .field > input, body:is(.shell-body, .app-pro) .field > select, body:is(.shell-body, .app-pro) .field > textarea { border-color: var(--app-line); border-radius: 8px; }
body:is(.shell-body, .app-pro) .field > input:focus, body:is(.shell-body, .app-pro) .field > select:focus, body:is(.shell-body, .app-pro) .field > textarea:focus { border-color: var(--green); }

/* Uma só família e rótulos em frase normal em toda a app (também nos estilos escritos nas páginas).
   Fica de fora: o logótipo e os ícones (Tabler é uma fonte). Algarismos tabulares para as colunas de valores. */
body:is(.shell-body, .app-pro) *:not(.ti):not([class^="ti-"]):not(.shell-brand):not(.shell-brand *):not(.brand-mark):not(.brand-mark *):not(.brand):not(.brand *) {
  font-family: 'Geist', system-ui, sans-serif !important;
  text-transform: none !important;
}
body:is(.shell-body, .app-pro) { font-variant-numeric: tabular-nums; }
body:is(.shell-body, .app-pro) [style*="uppercase"], body:is(.shell-body, .app-pro) .label-mono, body:is(.shell-body, .app-pro) .t-table td::before,
body:is(.shell-body, .app-pro) .asset-tile .stats .ll, body:is(.shell-body, .app-pro) .section-h .meta, body:is(.shell-body, .app-pro) .an-h .meta, body:is(.shell-body, .app-pro) .an-sub,
body:is(.shell-body, .app-pro) .an-filtro label, body:is(.shell-body, .app-pro) .rr-h, body:is(.shell-body, .app-pro) .tt-chip span, body:is(.shell-body, .app-pro) .shell-tab .count {
  letter-spacing: 0 !important; font-size: 12.5px; font-weight: 500;
}
body:is(.shell-body, .app-pro) .asset-tile .stats .ll, body:is(.shell-body, .app-pro) .t-table td::before { color: var(--app-muted); }
body:is(.shell-body, .app-pro) .t-table .t-mono { letter-spacing: 0; font-size: 13px; }
@media (max-width: 600px) {
  body:is(.shell-body, .app-pro) .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  body:is(.shell-body, .app-pro) .metric .value { font-size: 20px; }
}

/* Portais (contabilista, demo, inquilino): as mesmas regras nas peças próprias deles */
body.app-pro { background: var(--app-bg); }
body.app-pro .kpi, body.app-pro .client-card, body.app-pro .payment-card, body.app-pro .aviso-card {
  background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-r); box-shadow: none;
}
body.app-pro .kpi::before { display: none; }
body.app-pro .kpi .label { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--app-muted); }
body.app-pro .kpi .value { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
body.app-pro .client-card:hover { transform: none; box-shadow: none; border-color: var(--ink-3); }
body.app-pro .cat-table th { background: #fff; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--app-muted); }
body.app-pro .modal-box { border-radius: 12px; }
body.app-pro .inq-hero h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; }
body.app-pro .next-rent .pay-btn:hover { transform: none; }
body.app-pro .inq-tab { color: var(--app-muted); }
body.app-pro .inq-tab.is-active { color: var(--ink); font-weight: 600; }
body:is(.shell-body, .app-pro) .cw-card.is-red .cw-value { color: var(--red); }

/* ---- 2.ª revisão (12 Out 2026): densidade e calma de SaaS de topo ---- */
/* Menu lateral: uma linha por item, scrollbar discreta */
body.shell-body { --shell-sidebar-w: 224px; }
body.shell-body .sidebar-item { font-size: 13.5px; padding: 7px 10px; white-space: nowrap; }
/* Barra sempre visível (clara) para se perceber que há mais itens em baixo; escurece ao passar o rato */
body.shell-body .shell-sidebar { scrollbar-width: thin; scrollbar-color: var(--app-line) transparent; }
body.shell-body .shell-sidebar:hover { scrollbar-color: var(--ink-3) transparent; }

/* Antes do título: sem saudação; "Como funciona" fechado vai para o canto, como um link de ajuda */
body.shell-body .welcome-line { display: none; }
body.shell-body .how-box:not([open]) { float: right; margin: 0 0 8px 12px; padding: 5px 10px; font-size: 13px; position: relative; z-index: 1; }

/* "Por tratar": títulos neutros, a cor fica no ícone e no número */
body:is(.shell-body, .app-pro) .todo-box .urgent-banner .t strong, body:is(.shell-body, .app-pro) .todo-box .messages-banner .t strong,
body:is(.shell-body, .app-pro) .todo-box .nif-warn strong { color: var(--ink); font-weight: 600; font-size: 14px; }
body:is(.shell-body, .app-pro) .todo-box .nif-warn a, body:is(.shell-body, .app-pro) .todo-box .urgent-banner .t .m a,
body:is(.shell-body, .app-pro) .todo-box .messages-banner a { color: var(--green); border-bottom: 0; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; font-size: 13px; }
body:is(.shell-body, .app-pro) .todo-box .urgent-banner .t .m { color: var(--app-muted); font-size: 13px; }

/* Tabelas: linhas de uma linha; a primeira coluna tem espaço */
body:is(.shell-body, .app-pro) .t-table th, body:is(.shell-body, .app-pro) .t-table td.t-mono,
body:is(.shell-body, .app-pro) .t-table .badge, body:is(.shell-body, .app-pro) .t-table .pill-state,
body:is(.shell-body, .app-pro) .t-table .btn-sm, body:is(.shell-body, .app-pro) .t-table .df-pill { white-space: nowrap; }
body:is(.shell-body, .app-pro) .t-table td { padding: 12px 16px; vertical-align: middle; }
body:is(.shell-body, .app-pro) .t-table td:first-child { min-width: 200px; }
body:is(.shell-body, .app-pro) .t-table .t-actions { flex-wrap: nowrap; }
body:is(.shell-body, .app-pro) .t-table .pill-state { font-size: 12px; font-weight: 500; letter-spacing: 0; border-radius: 6px; padding: 2px 8px; }
@media (max-width: 1100px) { body:is(.shell-body, .app-pro) .t-table td:first-child { min-width: 0; } body:is(.shell-body, .app-pro) .t-table .t-actions { flex-wrap: wrap; } }

/* Cartões de imóveis: sem barra lateral nem salto; o estado é um ponto antes do nome */
body.shell-body .asset-tile::before { display: none; }
body.shell-body .asset-tile:not(.is-add) .title::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 8px 1px 0; background: var(--state-color, var(--app-line)); }
body.shell-body .asset-tile:hover { transform: none; box-shadow: none; border-color: var(--ink-3); }
body.shell-body .asset-tile.is-add { background: #fff; border: 1px dashed var(--app-line); }
body.shell-body .asset-tile.is-add:hover { border-color: var(--green); }
body.shell-body .asset-tile .title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* "O que o RendaOK fez por ti": números em tinta, caixas no cinzento da app */
body.shell-body .pil-i { background: var(--app-bg); }
body.shell-body .pil-i b { color: var(--ink); font-weight: 600; }
body.shell-body .pil-i[data-action]:hover { background: #EEF0F2; }
/* Pontos do "Por tratar" (pend-item): neutros, a cor só no número */
body:is(.shell-body, .app-pro) .pend-item, body:is(.shell-body, .app-pro) .pend-item.is-red, body:is(.shell-body, .app-pro) .pend-item.is-amber {
  background: #fff; border: 1px solid var(--app-line); border-radius: 8px; color: var(--ink);
}
body:is(.shell-body, .app-pro) .pend-item:hover { border-color: var(--ink-3); background: #fff; }
body:is(.shell-body, .app-pro) .pend-item strong { font-family: inherit; font-weight: 600; font-size: 14px; }
body:is(.shell-body, .app-pro) .pend-item.is-red strong { color: var(--red); }
body:is(.shell-body, .app-pro) .pend-item.is-amber strong { color: var(--amber); }
body:is(.shell-body, .app-pro) .pend-item .pend-go { color: var(--green); }
body:is(.shell-body, .app-pro) .todo-box.todo-box > .todo-item.nif-warn strong { color: var(--ink); font-weight: 600; }
/* Tabelas no computador: uma linha por registo; texto comprido com reticências */
@media (min-width: 1101px) {
  body:is(.shell-body, .app-pro) .t-table td { white-space: nowrap; }
  body:is(.shell-body, .app-pro) .t-table td > :is(div, span, a):not(.t-actions) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body:is(.shell-body, .app-pro) .t-table td > div:not(.t-actions) { display: block; }
  body:is(.shell-body, .app-pro) .t-table td:not(:last-child) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
  body:is(.shell-body, .app-pro) .t-table td:first-child { min-width: 0; }
}
@media (min-width: 1101px) {
  body:is(.shell-body, .app-pro) .t-table td, body:is(.shell-body, .app-pro) .t-table th { padding-left: 12px; padding-right: 12px; }
  body:is(.shell-body, .app-pro) .t-table td:not(:last-child) { max-width: 240px; }
  /* Colunas de texto secundárias mais estreitas: a tabela cabe a 1440 px (ADR-259); o texto completo fica no title */
  body:is(.shell-body, .app-pro) .t-table td:not(:first-child):not(:last-child) { max-width: 160px; }
  body:is(.shell-body, .app-pro) .t-table td:first-child { max-width: 220px; }
  /* Cabeçalhos compridos ("Pode valer a partir de") podem ir a 2 linhas em vez de alargar a coluna; células ficam numa linha */
  body:is(.shell-body, .app-pro) .t-table th, body:is(.shell-body, .app-pro) .t-table th.tt-sort { white-space: normal; vertical-align: bottom; }
  body:is(.shell-body, .app-pro) .t-table td, body:is(.shell-body, .app-pro) .t-table th { padding-left: 10px; padding-right: 10px; }
  /* Coluna das ações só com a largura dos botões: o espaço a mais vai para as outras colunas (no ecrã largo ficava um vazio antes dos botões) */
  body:is(.shell-body, .app-pro) .t-table tr > td:last-child:has(.t-actions) { width: 1%; }
  /* A coluna das ações fica sempre à vista quando a tabela é mais larga do que o ecrã */
  body:is(.shell-body, .app-pro) .t-table tr > td:last-child:has(.t-actions), body:is(.shell-body, .app-pro) .t-table:has(td .t-actions) tr > th:last-child {
    position: sticky; right: 0; background: #fff; background-clip: padding-box; box-shadow: inset 0 -1px 0 var(--line); }   /* linha de baixo desenhada na própria célula: com border-collapse a coluna fixa pintava por cima da linha partilhada */
  body:is(.shell-body, .app-pro) .t-table tr[data-href]:hover > td:last-child:has(.t-actions) { background: var(--paper); }
  body:is(.shell-body, .app-pro) .t-table tr.is-cancelled > td:last-child:has(.t-actions) { opacity: 1; }
}
/* Ficha do imóvel: o que falta no cabeçalho fica discreto (o quadro "Dados em falta" já o explica) */
body.shell-body .mat-falta { color: var(--app-muted); font-weight: 400; }
/* Telemóvel e tablet (tabelas em cartões): rótulos em frase normal e texto comprido dentro do cartão */
@media (max-width: 1100px) {
  body:is(.shell-body, .app-pro) .t-table td::before { font-family: 'Geist', system-ui, sans-serif; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; }
  body:is(.shell-body, .app-pro) .t-table td > * { min-width: 0; overflow-wrap: anywhere; text-align: right; }
  body:is(.shell-body, .app-pro) .t-table td { padding: 9px 14px; flex-wrap: wrap; }
  body:is(.shell-body, .app-pro) .t-table td > .t-sub { flex-basis: 100%; }
}

/* ---- 3.ª revisão: avisos como cartões brancos (cor só no ícone), ações destrutivas discretas ---- */
body:is(.shell-body, .app-pro) .urgent-banner, body:is(.shell-body, .app-pro) .urgent-banner.is-amber, body:is(.shell-body, .app-pro) .urgent-banner.is-red,
body:is(.shell-body, .app-pro) .messages-banner, body:is(.shell-body, .app-pro) .nif-warn {
  background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-r); color: var(--ink);
}
body:is(.shell-body, .app-pro) .urgent-banner .t strong, body:is(.shell-body, .app-pro) .urgent-banner.is-amber .t strong,
body:is(.shell-body, .app-pro) .urgent-banner.is-red .t strong, body:is(.shell-body, .app-pro) .messages-banner .t strong,
body:is(.shell-body, .app-pro) .nif-warn strong { color: var(--ink); font-weight: 600; font-size: 14px; }
body:is(.shell-body, .app-pro) .urgent-banner .t .m { color: var(--app-muted); font-size: 13px; }
body:is(.shell-body, .app-pro) .urgent-banner.is-amber .t .m a:not(.btn-sm):not(.lote-hint), body:is(.shell-body, .app-pro) .urgent-banner.is-red .t .m a:not(.btn-sm):not(.lote-hint),
body:is(.shell-body, .app-pro) .nif-warn a, body:is(.shell-body, .app-pro) .messages-banner a {
  color: var(--green); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; border-bottom: 0;
}
body:is(.shell-body, .app-pro) .urgent-banner .mora-lista { border-top-color: var(--app-line); }
body:is(.shell-body, .app-pro) .urgent-banner .mora-item { border-bottom-color: var(--app-line); }
body:is(.shell-body, .app-pro) .urgent-banner .mora-item .mi-t, body:is(.shell-body, .app-pro) .urgent-banner .mora-item .mi-t strong { color: var(--ink); }
body:is(.shell-body, .app-pro) .urgent-banner details summary { color: var(--green); }
body:is(.shell-body, .app-pro) .btn-sm.danger { background: #fff; color: var(--red); border: 1px solid var(--app-line); }
body:is(.shell-body, .app-pro) .btn-sm.danger:hover { border-color: var(--red); background: #fff; }
/* O título vem sempre primeiro; os avisos ficam por baixo dele; "Como funciona" no canto superior direito */
body.shell-body #view-root { display: flex; flex-direction: column; position: relative; }
body.shell-body #view-root > :is(h1, .pn-head, .assets-head, :has(.shell-h1)) { order: -2; }
body.shell-body #view-root > .how-box { order: -1; }
body.shell-body #view-root > .how-box:not([open]) { order: -3; align-self: flex-end; float: none; margin: -8px 0 4px; }
body:is(.shell-body, .app-pro) .todo-box.todo-box > .todo-item.todo-item { background: none; border: 0; border-top: 1px solid var(--app-line); border-radius: 0; margin: 0; }
body.shell-body #view-root > * { min-width: 0; max-width: 100%; }
/* Destaques da Análise: brancos com contorno; a cor fica no ícone */
body.shell-body .an-ins, body.shell-body .an-ins.is-green, body.shell-body .an-ins.is-amber, body.shell-body .an-ins.is-red, body.shell-body .an-ins.is-neutral {
  background: #fff; border: 1px solid var(--app-line); }
body.shell-body .an-ins:hover { border-color: var(--ink-3); }
body.shell-body .shell-content > div > p.mono { color: var(--ink) !important; font-size: 15px !important; font-weight: 600; }
/* "Convida e ganha" dentro da app: secções sem margem extra; o total da comissão num cartão branco */
body.shell-body .rf-hero-num { background: #fff; border: 1px solid var(--app-line); color: var(--ink); }
body.shell-body .rf-hero-num .label-mono { color: var(--app-muted); }
body.shell-body .rf-hero-num .big { color: var(--ink); font-size: 36px; font-weight: 600; letter-spacing: -0.02em; }
body.shell-body .rf-hero-num .big em { color: var(--ink); font-style: normal; }
body.shell-body .rf-hero-num .note { color: var(--app-muted); }
body.shell-body .rf-hero-num .note strong { color: var(--ink); }
body.shell-body .rf-code, body.shell-body .rf-link { background: var(--app-bg); }
/* Texto mínimo de 12 px na app (ADR-259): rótulos herdados a 9–10,5 px; lista fechada de propósito (números dentro de círculos ficam como estão) */
body:is(.shell-body, .app-pro) :is(.cw-label, .cw-filters label, .recent-label, .arr-top .k, .arr-terms span.t, .an-delta, .asset-tile .stats .ll,
  .mt-grid label > span, .upcoming-row .day-block .month, .msg-card .head .when, .msg-card .head .who small, .mora-form label, .section-h .meta,
  .empty-shell .meta, .pl-card .pl-preco .iva, .ar-row .ed label) { font-size: 12px; }
body:is(.shell-body, .app-pro) .cw-spark, body:is(.shell-body, .app-pro) .cw-spark-l { width: 132px; } body:is(.shell-body, .app-pro) .cw-spark { height: auto; }
body:is(.shell-body, .app-pro) .cw-spark-l { font-size: 12px; padding: 0 2px; }
/* 6.ª revisão (ADR-263): botões pequenos, separadores e linha de meta a 12,5–13,5 px (vinham de base.css a 11 px, em Mono maiúsculo);
   estados vazios das fichas como cartão branco */
body:is(.shell-body, .app-pro) .btn-sm { font-size: 12.5px; }
body:is(.shell-body, .app-pro) .tab { font-size: 13.5px; letter-spacing: 0; }
body:is(.shell-body, .app-pro) .header-row .header-meta { font-size: 13px; letter-spacing: 0; }
body:is(.shell-body, .app-pro) .placeholder-tab { background: #fff; border: 1px solid var(--app-line); }
/* Banner dos Termos como os outros avisos: cartão branco, cor só no ícone */
body:is(.shell-body, .app-pro) .legal-banner { background: #fff; border: 1px solid var(--app-line); border-radius: 10px; }
/* Rótulos herdados a 9–11 px (Mapa, Despesas, Convida e ganha, contabilista, contador das listas) */
body:is(.shell-body, .app-pro) :is(.map-stat .l, .legend .ll, .map-list h3, .popup-card .stat-row .ll, .popup-card .pill, .map-asset .info .m, .map-asset .yield,
  .bk-badge, .rf-section-title, .sema, .cont-top .badge-role, label.yr > span, .tt-n) { font-size: 12px; }
body:is(.shell-body, .app-pro) :is(.map-stat, .legend, .rf-empty) { background: #fff; border: 1px solid var(--app-line); }
body:is(.shell-body, .app-pro) :is(.dados-dl dt, .pill, .label-mono, .shell-tab .count, .an-h .meta, .an-sub, .an-filtro label, .rr-h) { font-size: 12px; }
body:is(.shell-body, .app-pro) :is(.pill-state, .dn-legend, .dn-legend b, .dn-legend em) { font-size: 12px; }
body:is(.shell-body, .app-pro) .legal-banner .legal-ico { color: var(--amber); font-size: 18px; flex: none; }
body:is(.shell-body, .app-pro) .legal-banner > span { flex: 1; }
body:is(.shell-body, .app-pro) :is(.pill, .label-mono) { letter-spacing: 0; }
/* 7.ª revisão (ADR-274): foco do teclado igual em toda a app (§28: o foco é verde); o rato não o mostra (:focus-visible) */
body:is(.shell-body, .app-pro) :is(a, button, summary, [tabindex], .tab, .sidebar-item, .tt-chip):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
body:is(.shell-body, .app-pro) .demo-strip { font-size: 12px; }
body:is(.shell-body, .app-pro) .fi-cell { font-size: 12px; }
body:is(.shell-body, .app-pro) .b-ghost { background: #fff; border: 1px solid var(--app-line); }
body:is(.shell-body, .app-pro) .pl-cap-aviso { font-size: 12px; letter-spacing: 0; }
body:is(.shell-body, .app-pro) .modal-card small { font-size: 12px; }
body:is(.shell-body, .app-pro) .fi-vista:focus-visible { outline-offset: -2px; }   /* .fi-vistas corta o que sai (overflow): anel por dentro */

/* ---- Tabelas e largura (14 Out 2026, ADR-295): hierarquia em vez de tudo verde ---- */
/* Links nas tabelas em tinta (verde só no botão principal, ADR-253); o nome a negrito; ao passar o rato, verde sublinhado */
body:is(.shell-body, .app-pro) .t-table .t-link { color: var(--ink); }
body:is(.shell-body, .app-pro) .t-table .t-sub .t-link { color: var(--app-muted); }
body:is(.shell-body, .app-pro) .t-table .t-link:hover { color: var(--green); text-decoration: underline; }
/* Valores em euros alinhados à direita (ui.js marca a coluna com t-num) */
body:is(.shell-body, .app-pro) .t-table .t-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 1101px) { body:is(.shell-body, .app-pro) .t-table :is(td, th).t-fit { width: 1%; } }   /* colunas curtas (ui.js) */
@media (min-width: 1600px) { body:is(.shell-body, .app-pro) .t-table td:not(:last-child):not(:first-child), body:is(.shell-body, .app-pro) .t-table td:first-child { max-width: none; } }   /* ecrã grande: nomes e moradas inteiros (os limites de 160/220 px são para caber a 1440) */
/* Coluna a seguir a um valor em euros: mais espaço, senão "1300,00 €" e a data ao lado leem-se como uma coisa só */
@media (min-width: 1101px) { body:is(.shell-body, .app-pro) .t-table :is(td, th).t-num + :is(td, th) { padding-left: 24px; } }
/* Estado que pede uma ação, em texto (não um botão em cada linha) */
.t-ask { font: inherit; font-size: 13px; border: 0; background: none; padding: 0; color: var(--amber); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.t-ask:hover { text-decoration-style: solid; }
@media (pointer: coarse) { .t-ask { min-height: 44px; } }   /* alvo de toque */

/* Portátil e tablet deitado (881–1439 px): menu só com ícones (64 px), o nome aparece ao passar o rato (title, sidebar.js).
   Com o menu de 224 px a tabela de 9 colunas não cabia e escondia o Valor, o Estado e os botões. */
@media (min-width: 881px) and (max-width: 1439px) and (min-height: 501px) {
  body.shell-body { --shell-sidebar-w: 64px; }
  body.shell-body .shell-sidebar .section-label, body.shell-body .shell-sidebar .sb-lock { display: none; }
  body.shell-body .shell-sidebar .sidebar-section { padding: 0 8px; margin-bottom: 10px; }
  body.shell-body .shell-sidebar .sidebar-item { font-size: 0 !important; justify-content: center; padding: 10px 0; min-height: 40px; }
  body.shell-body .shell-sidebar .sidebar-item .ti { font-size: 18px; }
  body.shell-body .shell-sidebar .sidebar-item.is-active::before { left: -8px; }
  body.shell-body .shell-sidebar .sidebar-item .badge { position: absolute; top: 2px; right: 2px; margin: 0; padding: 0 4px; font-size: 9px; }
}

/* Coluna Ações: botões em linha, centrados na altura da linha e encostados à direita, para o "⋯" ficar sempre no mesmo sítio;
   o "⋯" com a mesma altura dos outros botões (era 28 px ao lado de 34). */
body:is(.shell-body, .app-pro) .t-table .t-actions { display: flex; align-items: center; gap: 6px; }
body:is(.shell-body, .app-pro) .t-table .btn-sm.t-more { min-height: 34px; min-width: 34px; padding: 0; justify-content: center; }
@media (pointer: coarse) { body:is(.shell-body, .app-pro) .t-table .btn-sm.t-more { min-height: 44px; min-width: 44px; } }   /* ecrã tátil: os .btn-sm têm 44 px */
body:is(.shell-body, .app-pro) .t-table:has(td:last-child .t-actions) th:last-child { text-align: right; }
body:is(.shell-body, .app-pro) .t-table .t-actions.t-recibo { justify-content: flex-start; }
@media (max-width: 560px) { body:is(.shell-body, .app-pro) .t-table .t-actions.t-recibo { justify-content: flex-end; } }   /* cartão de telemóvel: valores à direita */   /* Recibos: coluna "Recibo" (Enviar, PDF) alinhada com o título */
/* Células com botões nunca são cortadas (o limite de largura e as reticências são para texto) */
@media (min-width: 1101px) {
  body:is(.shell-body, .app-pro) .t-table td:has(> .t-actions):has(> .t-actions) { max-width: none; overflow: visible; }   /* :has 2x: vence o td:not(:first-child):not(:last-child) */
  /* Texto longo (moradas, mensagens) limitado a uma largura que cresce com o ecrã, com reticências: a tabela cabe a 1366 px sem
     empilhar botões, e num ecrã de 2000 px mostra mais texto. Os botões ficam sempre lado a lado (empilhar com espaço livre não tem sentido). */
  body:is(.shell-body, .app-pro) .t-table td:not(.t-fit) > div:not(.t-actions) { max-width: clamp(140px, 22vw, 520px); }
}
/* Ecrã médio (1101–1599 px): células um pouco mais justas, para a tabela de Recibos (10 colunas) caber a 1366 px */
@media (min-width: 1101px) and (max-width: 1599px) { body:is(.shell-body, .app-pro) .t-table :is(td, th) { padding-left: 8px; padding-right: 8px; } }