/* GB LEGAL · Clientes — tabela de registos, à maneira do Attio. */
:root{
  /* Cinzentos QUENTES, como a barra lateral sempre foi. Os do resto da app
     eram frios (#f6f6f7, #eeeff1) e tão perto do branco que não chegavam a
     ser cinzento: davam um ecrã lavado, em que nada separa nada. */
  --fundo:#f7f6f3; --lado-bg:#edecea; --tela:#fff;
  /* Quatro tons de texto, e cada um tem de se ler. Os três de baixo estavam
     claros de mais para o tamanho a que são usados: a 12,5 px, o --t3 das
     etiquetas dava 3,2:1 sobre branco, abaixo do mínimo de 4,5:1 para texto
     normal. Agora: t2 8,6:1 · t3 5,0:1 · t4 3,7:1 (este só para coisas
     grandes ou acessórias, nunca para texto corrido). */
  --t1:#1a1a1a; --t2:#494c53; --t3:#6b7076; --t4:#80858b;
  --fio:#dcd9d3; --fio2:#e7e5e0; --toque:#f0efeb; --realce:#e8e6e1;
  /* A faixa dos títulos de secção. Puxa ao quente da barra lateral e é
     escura o suficiente para se ver que é uma faixa — não um branco
     sujo. É o que separa as cartelas umas das outras. */
  --faixa:#e9e7e2;
  --preto:#16181b; --azul:#3568d4; --azul-bg:#eaf0fd;
  --verde:#1a7f4b; --verde-bg:#e6f4ec; --ambar:#8a5a00; --ambar-bg:#fdf3e2;
  --roxo:#6b4ea8; --roxo-bg:#f0ecf9; --rosa:#a8366a; --rosa-bg:#fbeaf1;
  --r:8px; --r-s:6px; --lado:72px;
  /* Relevo das teclas. Duas sombras: uma curta que as separa do fundo e um
     brilho interior no topo que lhes dá espessura. */
  --t-sombra:0 1px 1.5px rgba(16,18,24,.07), inset 0 1px 0 rgba(255,255,255,.9);
  --t-sombra-h:0 2px 6px rgba(16,18,24,.11), inset 0 1px 0 rgba(255,255,255,.9);
  --t-sombra-a:inset 0 1px 3px rgba(16,18,24,.17);
  --t-face:linear-gradient(#fff,#f3f4f6); --t-face-h:linear-gradient(#fff,#eceef1);
  --t-fio:#c9cbd1; --t-fio-h:#aeb2ba;
  --foco:0 0 0 3px rgba(53,104,212,.28);
  --f:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI","Helvetica Neue",sans-serif;
  /* ── escala de letra ──
     Seis degraus, e não mais. A app chegou a ter treze tamanhos, muitos deles
     a meio ponto uns dos outros: isso não é hierarquia, é ruído. Meio ponto
     não se lê como diferença — lê-se como desalinhamento. Tudo o que é texto
     usa um destes, e um degrau só existe se disser outra coisa. */
  --f-mini:12px;      /* pastilhas, selos, cabeçalhos de coluna */
  --f-peq:13px;       /* tabelas, campos, descrições — o grosso do ecrã */
  --f-base:14px;      /* navegação, teclas, texto que se lê de seguida */
  --f-tit:16px;       /* título do ecrã e dos cartões do Início */
  --f-h1:20px;        /* título da ficha */
  --f-grande:36px;    /* a pergunta do Início */
}
@media (prefers-color-scheme:dark){:root{
  --fundo:#0e0f11; --lado-bg:#141517; --tela:#17181b;
  --t1:#ececee; --t2:#b4b8bf; --t3:#989da4; --t4:#7b8087;
  --fio:#30333a; --fio2:#272a2f; --toque:#1f2126; --realce:#282b30;
  --faixa:#1e1f23;
  --preto:#ececee; --azul:#6f9bf0; --azul-bg:#1a2438;
  --verde:#4cc183; --verde-bg:#13291e; --ambar:#d7a23e; --ambar-bg:#2c2415;
  --roxo:#a68ae0; --roxo-bg:#221c33; --rosa:#e07fa8; --rosa-bg:#2e1823;
  --t-sombra:0 1px 1.5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  --t-sombra-h:0 2px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  --t-sombra-a:inset 0 1px 3px rgba(0,0,0,.55);
  --t-face:linear-gradient(#2a2d32,#232529); --t-face-h:linear-gradient(#32353b,#2a2d32);
  --t-fio:#3a3d43; --t-fio-h:#4d5158;
  --foco:0 0 0 3px rgba(111,155,240,.35);
}}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--fundo);color:var(--t1);font:400 var(--f-base)/1.45 var(--f);
     -webkit-font-smoothing:antialiased;letter-spacing:-.003em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}

.app{display:grid;grid-template-columns:var(--lado) 1fr;height:100vh}

/* ── barra lateral ── */
.lado{background:var(--lado-bg);padding:10px 13px 12px;display:flex;flex-direction:column;
      gap:2px;align-items:center;overflow:visible;position:relative}
/* A marca na barra é desenhada, não é imagem: nítida a qualquer tamanho, e
   no modo escuro inverte-se sozinha porque usa as mesmas variáveis do resto.
   O PNG do escritório continua a ser o ícone do separador — ali há espaço.
   Não é o logótipo: é o monograma dele a servir de ícone. */
.espaco{display:flex;align-items:center;gap:9px;width:auto;height:38px;
        margin-bottom:10px;cursor:default}
.sigla{width:32px;height:32px;border-radius:9px;background:var(--preto);color:var(--tela);
       display:grid;place-items:center;font-size:var(--f-base);font-weight:700;
       letter-spacing:-.02em;flex:none}
.espaco b{display:none}

.acao-rapida{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-s);
  color:var(--t2);cursor:pointer;margin-bottom:6px;position:relative;font-size:0}
.acao-rapida:hover{background:var(--realce);color:var(--t1)}
.acao-rapida svg{width:19px;height:19px;flex:none}
.acao-rapida .ks{display:none}
.acao-rapida .ks kbd{font:500 var(--f-mini) var(--f);color:var(--t3);background:var(--toque);
  border:1px solid var(--fio);border-radius:3px;padding:0 3.5px;min-width:15px;text-align:center;line-height:15px}
.titulo-sec{width:24px;height:1px;background:var(--fio);margin:7px 0;font-size:0;overflow:hidden;padding:0}
.nav{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-s);
     font-size:0;color:var(--t2);cursor:pointer;transition:background .09s;position:relative}
.nav[hidden]{display:none}
/* O Voltar é o único que aparece e desaparece. A desaparecer de vez, puxava
   para cima tudo o que está por baixo, e o Abrir assunto mudava de sítio
   entre o Início e qualquer outro ecrã. Guarda-se o lugar: fica invisível,
   não ausente. */
.nav.sem-alvo{visibility:hidden;pointer-events:none}
/* Um respiro entre as duas ações e os destinos — é o que faz os grupos
   lerem-se como grupos sem precisar de um traço a separá-los. O quadrado do
   módulo aparece e desaparece, por isso o espaço anda com o primeiro dos dois. */
#modulo,.lado .nav[data-vista="inicio"]{margin-top:10px}
#modulo:not([hidden]) ~ .nav[data-vista="inicio"]{margin-top:0}
/* a marca de «está aqui» não é para carregar */
#modulo.on{cursor:default}
.nav:hover{background:var(--realce);color:var(--t1)}
.nav:hover svg{color:var(--t1)}
.nav.on{background:var(--realce);color:var(--t1);font-weight:530}
.nav svg{width:19px;height:19px;flex:none;color:var(--t2);stroke-width:1.85}
.nav.on svg{color:var(--t1)}
.nav .n{display:none}

/* ── barra lateral aberta ──
   Mesma barra, dois tamanhos: fechada é a coluna de ícones de sempre; aberta
   mostra os nomes e os módulos por extenso. O estado fica guardado no
   aparelho de quem usa — não é uma preferência do escritório, é de cada um. */
.app.aberta{grid-template-columns:232px 1fr}
.lado.aberta{align-items:stretch;padding:10px 10px 12px}
.lado.aberta .nav{width:auto;height:33px;display:flex;align-items:center;gap:10px;
  padding:0 9px;justify-content:flex-start;font-size:var(--f-base);font-weight:470;color:var(--t1)}
.lado.aberta .nav svg{width:18px;height:18px}
.lado.aberta .nav .n{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lado.aberta .so-fechada{display:none}
/* O nome ao lado do rato é para quando o nome não cabe no sítio. Aberta, cabe. */
.lado.aberta [data-nome]::after{content:none}

.topo-lado{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.lado:not(.aberta) .topo-lado{flex-direction:column;gap:2px}
.lado.aberta .espaco{flex:none;display:flex;align-items:center;gap:9px;
  width:auto;height:38px;padding:0;margin-bottom:0}
.lado.aberta .espaco b{display:block;font-size:var(--f-peq);font-weight:600;
  letter-spacing:.07em;color:var(--t1);white-space:nowrap}
.alternar{flex:none}
.lado.aberta .alternar{margin-left:auto}

/* A acção de abrir assunto não é navegação: destaca-se pelo peso, não por cor. */
.lado.aberta .criar{font-weight:550}
.criar svg{stroke-width:2.1}

/* Cabeçalho de secção: discreto, como na referência — serve para separar,
   não para se fazer notar. */
.sec{display:none}
.lado.aberta .sec{display:block;font-size:var(--f-peq);font-weight:520;color:var(--t2);
  padding:0 9px;margin:14px 0 3px}
.mod{display:none}
.lado.aberta .mod{display:flex}
/* Os nomes dos módulos alinham com os nomes de cima, e não com a borda. Em
   cima o texto começa depois do ícone (9 de padding + 18 de ícone + 10 de
   intervalo = 37); aqui não há ícone, por isso o avanço é posto à mão. Sem
   ele ficavam duas colunas de texto a 28px uma da outra, e via-se. Os módulos
   não levam ícone de propósito: só existem com a barra aberta, logo um ícone
   nunca seria lido sem a palavra ao lado — era enfeite, e achatava a lista
   num segundo grupo de botões igual ao de cima. */
.lado.aberta .mod .n{padding-left:28px}

.lado.aberta .ks{display:flex;gap:3px;margin-left:auto}
/* Numa linha só, como na referência: nome, ponto e perfil a seguir. Em duas
   linhas o perfil ganhava um peso que não tem — é uma nota, não um título. */
.lado.aberta .quem{height:36px}
/* Círculo cheio com a inicial do próprio. Cheio e redondo de propósito: o
   quadrado preto lá em cima é o escritório, isto é a pessoa — se fossem do
   mesmo feitio, liam-se como a mesma coisa. */
.iniciais{width:24px;height:24px;border-radius:99px;display:grid;place-items:center;
  font-size:var(--f-mini);font-weight:600;background:var(--t2);color:var(--tela);flex:none}
.lado.aberta .quem .n{font-size:var(--f-base);font-weight:480}
/* A seta só existe com a barra aberta: fechada, a linha é o círculo, e o
   realce do rato já cobre os 46px todos. */
.quem .seta{display:none;width:14px;height:14px;color:var(--t3);flex:none;
  transition:transform .12s}
.lado.aberta .quem .seta{display:block;margin-left:auto}
.quem.aberto .seta{transform:rotate(180deg)}
.quem:hover .seta{color:var(--t1)}
.quem.aberto{background:var(--realce);color:var(--t1)}


/* ── painel da conta ──
   Ancorado ao fundo da barra, por cima da linha do nome. Fica dentro da barra
   e por isso herda-lhe os tons; o relevo é só o suficiente para se perceber
   que está à frente do que está por baixo. */
.conta-p{position:absolute;left:10px;bottom:62px;width:268px;z-index:60;
  background:var(--tela);border:1px solid var(--fio);border-radius:11px;
  box-shadow:0 10px 30px rgba(16,18,24,.14),0 2px 6px rgba(16,18,24,.07);
  padding:12px 14px 10px;font-size:var(--f-peq)}
.conta-p[hidden]{display:none}
.conta-p .cab{display:flex;align-items:center;gap:10px;padding-bottom:10px;
  border-bottom:1px solid var(--fio2);margin-bottom:4px}
.conta-p .cab .iniciais{width:32px;height:32px;font-size:var(--f-base)}
.conta-p .cab b{display:block;font-size:var(--f-base);color:var(--t1)}
.conta-p .cab i{font-style:normal;font-size:var(--f-mini);color:var(--t3)}
.conta-p .l{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px solid var(--fio2)}
.conta-p .l span{color:var(--t2);flex:none}
.conta-p .l b{font-weight:500;color:var(--t1);text-align:right;
  font-variant-numeric:tabular-nums}
.conta-p .l b.vazio{font-weight:400;color:var(--t3)}
.conta-p .rod{padding-top:9px}
.conta-p .rod > span{color:var(--t2);display:block;margin-bottom:6px}
.conta-p .pode{display:flex;flex-wrap:wrap;gap:4px}
.conta-p .pode i{font-style:normal;font-size:var(--f-mini);color:var(--t2);background:var(--toque);
  border:1px solid var(--fio);border-radius:99px;padding:1px 8px}
/* Fechada, a barra tem 72px: o painel não cabe ao lado da linha, abre à direita. */
.lado:not(.aberta) .conta-p{left:62px}

/* nome aparece ao passar o rato, como no Dock */
.lado [data-nome]::after{content:attr(data-nome);position:absolute;left:56px;top:50%;
  transform:translateY(-50%) scale(.94);transform-origin:left center;
  background:var(--preto);color:var(--tela);font-size:var(--f-mini);font-weight:490;
  padding:4px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .11s,transform .11s;z-index:40}
@media (prefers-color-scheme:dark){.lado [data-nome]::after{color:#17181b}}
.lado [data-nome]:hover::after{opacity:1;transform:translateY(-50%) scale(1)}

/* ── tela: a aplicação dentro de uma moldura ── */
.tela{background:var(--tela);border:1px solid var(--fio);border-radius:10px;margin:6px 6px 6px 0;
      display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.035)}
.cabeca{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--fio2);flex:none}
/* O título do ecrã estava mais pequeno do que os nomes da barra lateral — a
   hierarquia ao contrário. Quem está no ecrã manda sobre a lista de onde se
   pode ir: dois pontos e meio acima, e o peso a condizer. */
.cabeca .migalha{display:flex;align-items:center;gap:7px;font-size:var(--f-tit);
  font-weight:600;letter-spacing:-.01em}
/* O mesmo ícone da barra lateral: mesmo tamanho, mesma espessura, mesmo tom.
   Era mais fino e mais claro, e por isso a mesma grelha de quatro quadrados
   lia-se como dois desenhos diferentes conforme o sítio onde estava. */
.cabeca .migalha svg{width:18px;height:18px;color:var(--t2);stroke-width:1.85}
.cabeca .migalha .sep{color:var(--t4);font-weight:400}
.cabeca .dir{margin-left:auto;display:flex;align-items:center;gap:6px}

.filtros{display:flex;align-items:center;gap:7px;padding:7px 14px;border-bottom:1px solid var(--fio2);flex:none}
.proc{position:relative;flex:1;max-width:280px}
.proc svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--t3)}
.proc input{width:100%;height:26px;padding:0 9px 0 26px;border:1px solid var(--fio);border-radius:var(--r-s);
  background:var(--tela);font-size:var(--f-peq);transition:border-color .12s,box-shadow .12s}
.proc input::placeholder{color:var(--t3)}
.proc input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 2.5px var(--azul-bg)}
.contagem{margin-left:auto;font-size:var(--f-peq);color:var(--t3);font-variant-numeric:tabular-nums}

/* ── tabela de registos ── */
/* O papel é quente; o que é cartão ou tabela é que fica branco por cima. */
.rolo{flex:1;overflow:auto;background:var(--fundo)}
.rolo>table,.rolo table{background:var(--tela)}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;z-index:2;text-align:left;font-size:var(--f-mini);font-weight:530;color:var(--t3);
  padding:0 10px;height:28px;background:var(--tela);border-bottom:1px solid var(--fio2);
  border-right:1px solid var(--fio2);white-space:nowrap;user-select:none}
thead th:last-child{border-right:none}
thead th .ic{display:inline-flex;align-items:center;gap:5px}
thead th svg{width:12px;height:12px;color:var(--t4)}
tbody td{padding:0 10px;height:33px;border-bottom:1px solid var(--fio2);border-right:1px solid var(--fio2);
  font-size:var(--f-peq);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tbody td:last-child{border-right:none}
tbody tr{cursor:default;transition:background .07s}
tbody tr{background:var(--tela)}
tbody tr:hover{background:var(--toque)}
tbody tr.on{background:var(--azul-bg)}
.cx{width:30px;text-align:center}
/* A caixa esteve invisível até se passar o cursor, e ninguém adivinha uma
   coluna vazia. Fica sempre à vista, apagada, e ganha cor ao passar por cima:
   vê-se que é uma caixa e continua a não competir com o texto. */
.cx input{width:13px;height:13px;accent-color:var(--azul);opacity:.35;transition:opacity .1s}
tr:hover .cx input,.cx input:checked{opacity:1}
/* Número de ordem da linha. Serve para se poder dizer «a 46» em voz alta e a
   outra pessoa chegar lá — a lista é longa e os títulos repetem-se. Conta a
   posição no que está no ecrã, por isso muda quando se muda de filtro. */
.ord{width:34px;text-align:right;color:var(--t4);font-size:var(--f-peq);
     font-variant-numeric:tabular-nums;padding-right:8px}
.reg{display:flex;align-items:center;gap:7px;min-width:0}
.av{width:19px;height:19px;border-radius:4px;flex:none;display:grid;place-items:center;
    /* fora da escala: são até três iniciais dentro de 19px — é o círculo que
       manda no tamanho, não a hierarquia do texto */
    font-size:9px;font-weight:650;letter-spacing:-.02em;color:#fff}
.av.r{border-radius:99px}
.reg .nm{font-weight:470;overflow:hidden;text-overflow:ellipsis;
         border-bottom:1px solid transparent}
tr:hover .reg .nm{border-bottom-color:var(--t4)}
.pastilha{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:4px;
  font-size:var(--f-mini);font-weight:490;background:var(--toque);color:var(--t2);max-width:100%}
.pastilha.verde{background:var(--verde-bg);color:var(--verde)}
.pastilha.ambar{background:var(--ambar-bg);color:var(--ambar)}
.pastilha.azul{background:var(--realce);color:var(--t2)}
.pastilha.roxo{background:var(--roxo-bg);color:var(--roxo)}
.pastilha.rosa{background:var(--rosa-bg);color:var(--rosa)}
.fraco{color:var(--t4)}

/* ── botões ── */
/* ── teclas ──
   Havia quatro medidas diferentes: .b a 28 px, .b.claro a 28 com fio (que lhe
   come um pixel de cada lado), .tecla a 36 e .tecla.s a 26, com três pesos e
   três tamanhos de letra. Ficam duas, e a diferença entre elas é de função,
   não de capricho: a tecla de ECRÃ, no cabeçalho e nos formulários, e a tecla
   de LINHA, dentro de tabelas e listas, que tem de caber numa linha.
   Medida de ecrã: 30 px de altura, --f-base, peso 550.
   Medida de linha: 24 px de altura, --f-peq, peso 550. */
.b{display:inline-flex;align-items:center;justify-content:center;gap:5px;
   height:30px;padding:0 12px;border:1px solid transparent;
   white-space:nowrap;flex:none;
   border-radius:var(--r-s);background:var(--preto);color:var(--tela);
   font-size:var(--f-base);font-weight:550;
   cursor:pointer;box-shadow:0 1px 2px rgba(16,18,24,.22);
   transition:background .13s,box-shadow .13s,transform .07s}
@media (prefers-color-scheme:dark){.b{color:#17181b}}
.b:hover{background:#2a2d33;box-shadow:0 2px 6px rgba(16,18,24,.26)}
.b:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.b:focus-visible{outline:none;box-shadow:0 1px 2px rgba(16,18,24,.22),var(--foco)}
@media (prefers-color-scheme:dark){.b:hover{background:#d8d9db}}
/* A clara é a secundária e tem de ler-se como a MESMA tecla da escura, só
   com outra cor. Tinha face em degradê e um brilho interior no topo, que lhe
   dava volume e a fazia parecer maior — sendo as duas de 30 px. Agora é
   plana, como a escura. */
.b.claro{background:var(--tela);color:var(--t1);border:1px solid var(--t-fio);
  box-shadow:0 1px 2px rgba(16,18,24,.10)}
.b.claro:hover{background:var(--toque);border-color:var(--t-fio-h);
  box-shadow:0 2px 6px rgba(16,18,24,.12)}
.b.claro:active{background:var(--realce);box-shadow:inset 0 1px 3px rgba(16,18,24,.18)}
.b.claro:focus-visible{box-shadow:0 1px 2px rgba(16,18,24,.10),var(--foco)}
.b svg{width:13px;height:13px}

/* ── ficha do registo ── */
.ficha{flex:1;overflow-y:auto;background:var(--fundo)}
.ficha-cab{padding:18px 22px 14px;border-bottom:1px solid var(--fio2);display:flex;gap:12px;align-items:center}
.ficha-cab .av{width:38px;height:38px;border-radius:8px;font-size:var(--f-base)}
.ficha-cab h1{margin:0;font-size:var(--f-h1);font-weight:600;letter-spacing:-.015em}
.ficha-cab .sub{font-size:var(--f-peq);color:var(--t3);margin-top:1px}
.ficha-cab .dir{margin-left:auto;display:flex;gap:6px}
.ficha-corpo{background:var(--fundo);padding:16px 22px 60px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px}
@media(max-width:1020px){.ficha-corpo{grid-template-columns:1fr}}
/* Cartão BRANCO sobre papel quente, e não o contrário. Estava ao contrário:
   a cartela era transparente sobre a tela branca, e por isso o calor só se
   via na faixa do título — o resto do ecrã continuava a ser uma folha branca
   sem nada a separar o que é cartão do que é fundo. */
.cartela{background:var(--tela);border:1px solid var(--fio);border-radius:var(--r);
  overflow:hidden;margin-bottom:14px}
/* A faixa do título fica, mas com cor a sério: estava num cinzento tão perto
   do branco que parecia o papel sujo em vez de uma faixa. Agora vê-se onde
   começa cada cartela sem ser preciso procurar o fio. */
.cartela>h2{margin:0;padding:10px 12px 9px;font-size:var(--f-base);font-weight:600;
            color:var(--t1);background:var(--faixa);border-bottom:1px solid var(--fio);
            display:flex;align-items:center;gap:8px}
/* O que vier depois do título encosta à direita — a tecla «Juntar» dos
   documentos, o rótulo da coluna das tarefas. Era feito com float:right, que
   o flex ignora: a tecla passou a colar-se ao título. Em flex, quem encosta
   encosta com margin-left:auto. */
.cartela>h2 .tecla{margin-left:auto}
/* Nas caixas de tarefas há DOIS elementos à direita do título: a tecla de
   criar e o rótulo da coluna. Se ambos encostarem com margin-left:auto, o
   primeiro é empurrado para o meio pelo segundo — era o que punha o
   «Responsável» a meio do cartão em vez de por cima das iniciais. A tecla
   fica junto ao título; o rótulo é o único que encosta. */
.cartela>h2 .nt-abrir{margin-left:12px}
/* Um nome encostado à direita de uma linha, sem nada que o explique, pode ser
   quem a criou, quem a pediu ou quem a tem de fazer. A etiqueta vive na faixa
   do título e não numa linha de cabeçalho própria: a cartela é uma lista, não
   uma tabela, e uma linha inteira para legendar uma coluna só pesava mais do
   que esclarecia. */
.col-r{margin-left:auto;font-size:var(--f-mini);font-weight:530;
       color:var(--t3);letter-spacing:.02em}

/* Escrever uma tarefa. Uma linha e Enter — os outros campos só aparecem a
   quem os for buscar, porque o que custa tempo não é preenchê-los, é decidir
   se vale a pena preenchê-los. */
.nova-t{border-bottom:1px solid var(--fio2);padding:10px 12px;background:var(--toque)}
.nova-t .tit{width:100%;height:34px;padding:0 10px;border:1px solid var(--fio);
  border-radius:var(--r-s);background:var(--tela);font:400 var(--f-base) var(--f);color:var(--t1)}
.nova-t .tit:focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)}
.nova-t .ln{display:flex;flex-wrap:wrap;gap:8px 8px;margin-top:9px;align-items:flex-end}
/* Cada campo com o nome por cima. Sem rótulo, uma caixa com «06/11/2026» lá
   dentro pode ser a data de entrada, a de conclusão ou o prazo — e quem
   preenche tem de adivinhar qual. */
/* flex-basis de 150px, nao min-width:0: com largura minima zero os campos
   deixavam-se esmagar ate o proprio rotulo partir em tres linhas («Para /
   quando — / opcional») e o «Normal» do select ficar cortado a meio. Com uma
   base declarada, quando nao cabem lado a lado passam para a linha de baixo
   inteiros, em vez de encolherem todos. */
.nova-t .ln label{flex:1 1 150px;display:block;
  font-size:var(--f-mini);color:var(--t3);line-height:1.3}
.nova-t .ln label>span{display:block;margin-bottom:3px}
.nova-t .ln select,.nova-t .ln input{width:100%;min-width:0;height:31px;padding:0 8px;
  border:1px solid var(--fio);border-radius:var(--r-s);background:var(--tela);
  font:400 var(--f-peq) var(--f);color:var(--t1)}
.nova-t .pe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
/* min-width na ajuda: encostada as teclas com margin-left:auto, quando a
   cartela e estreita sobrava-lhe um dedo de largura e a frase caia uma
   palavra por linha. Com uma largura minima, prefere passar para baixo. */
.nova-t .ajuda{font-size:var(--f-mini);color:var(--t3);margin-left:auto;
  flex:0 1 auto;min-width:170px;text-align:right}
.nova-t .ajuda kbd{font:500 var(--f-mini) var(--f);background:var(--tela);
  border:1px solid var(--fio);border-radius:3px;padding:0 4px}
.nova-t .mais{font-size:var(--f-mini);color:var(--azul);cursor:pointer}
/* Historia da tarefa: linha propria por baixo dos botoes. Estava dentro do
   rodape com margin-left:auto, a disputar a largura com tres teclas — e o que
   sobrava era estreito de mais para «2026-11-06 · mudada de assunto ·
   Goncalo Barradas», que caia uma palavra por linha. */
.nova-t .hist{margin-top:8px;padding-top:7px;border-top:1px solid var(--fio2);
  font-size:var(--f-mini);color:var(--t3);line-height:1.5}
.nova-t .hist div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Uma linha de lista em edicao deixa de ser flex: o formulario ocupa a linha
   toda. Sem isto o cartao herdava a largura de um item flex e encolhia ate ao
   conteudo — era o que acontecia nas fichas e nos assuntos, onde as tarefas
   nao sao tabela. */
.item-l.a-editar{display:block;padding:0}
.item-l.a-editar .nova-t{border-bottom:none;background:var(--toque)}

/* À espera de terceiro: roxo, porque não é um atraso nosso nem um alarme — é
   um estado em que o trabalho está entregue a outra pessoa. */
.espera{color:var(--roxo);font-weight:600}
/* A linha que acabou de ser escrita. Fica marcada o tempo de a encontrares e
   apaga-se sozinha — um realce permanente deixava de distinguir fosse o que
   fosse na visita seguinte. */
/* As duas naturezas de prazo. Vermelho é prazo com norma atrás — a lei não
   negoceia. Âmbar é data posta à mão, que se pode mudar sem pedir licença a
   ninguém. A cor diz de que espécie é; os dias que faltam, ao lado, dizem se
   arde. Nunca o contrário: um prazo legal distante a vermelho-vivo ensinaria
   a ignorar o vermelho. */
.pastilha.legal{background:var(--rosa-bg);color:var(--rosa);font-weight:600}
.pastilha.mao{background:var(--ambar-bg);color:var(--ambar);font-weight:600}
.pastilha.vermelha{background:var(--rosa-bg);color:var(--rosa)}

/* A contagem do que arde, à esquerda do cabeçalho. */
.arde{display:flex;align-items:center;gap:6px;font-size:var(--f-mini)}
/* A linha abre a tarefa: ao passar o rato dá-se o sinal, para não ser preciso
   adivinhar onde se carrega. */
.rolo tbody tr[data-editar]:hover{background:var(--toque)}
.rolo tbody tr[data-editar]:hover .nm{text-decoration:underline;text-underline-offset:2px}

.arde .pastilha{cursor:pointer;transition:box-shadow .1s}
.arde .pastilha:hover{box-shadow:0 0 0 2px var(--fio)}
.arde .pastilha.on{box-shadow:0 0 0 2px currentColor}

tr.acabada-de-criar td{background:var(--azul-bg);transition:background 1s}
tr.acabada-de-criar td:first-child{box-shadow:inset 3px 0 0 var(--azul)}
.data-linha{height:24px;padding:0 5px;border:1px solid var(--azul);border-radius:4px;
  background:var(--tela);font:400 var(--f-peq) var(--f);color:var(--t1);box-shadow:var(--foco)}
.pastilha.roxa{background:var(--roxo-bg);color:var(--roxo)}

/* Nome por extenso ao passar o cursor sobre as iniciais. A barra lateral já
   fazia isto, mas aquela regra está presa ao .lado. Abre para a ESQUERDA
   porque a coluna de quem é responsável está encostada à direita da cartela,
   e a cartela corta o que lhe sai fora (overflow:hidden) — para a direita o
   nome ficava decepado. */
/* As iniciais de quem é responsável, sem círculo nem cor. Nas listas de
   clientes a cor da paleta faz trabalho — distingue dezenas de entidades de
   relance. Aqui há duas pessoas, sempre as mesmas, e a cor não distinguia
   nada: só acrescentava significado que não existe, porque nesta app o verde
   quer dizer «cobrado» e o âmbar «por cobrar». Um círculo verde ao lado de
   uma tarefa feita lia-se como um selo de aprovação. */
.ini{font-size:var(--f-mini);font-weight:600;color:var(--t2);letter-spacing:.03em;
     cursor:default}

.av[data-nome],.ini[data-nome]{position:relative}
.av[data-nome]::after,.ini[data-nome]::after{content:attr(data-nome);position:absolute;
  right:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.94);
  transform-origin:right center;background:var(--preto);color:var(--tela);
  font:500 var(--f-mini)/1.3 var(--f);letter-spacing:0;white-space:nowrap;
  padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;z-index:40;
  transition:opacity .11s,transform .11s}
.av[data-nome]:hover::after,.ini[data-nome]:hover::after{
  opacity:1;transform:translateY(-50%) scale(1)}
.atrib{display:grid;grid-template-columns:118px 1fr;gap:0;font-size:var(--f-peq)}
/* A etiqueta é um nome que se lê, não uma marca de água. Estava no --t3, que
   serve para metadados; aqui diz o que é cada linha da ficha e tem de se ler
   de relance. Fica no --t2, e a hierarquia faz-se pelo peso — o valor é que
   leva o tom principal e o corpo mais carregado. */
.atrib .k{padding:7px 12px;color:var(--t2);border-bottom:1px solid var(--fio2);
          border-right:1px solid var(--fio2);display:flex;align-items:center;gap:6px}
.atrib .v{color:var(--t1);font-weight:450}
.atrib .k svg{width:12px;height:12px;color:var(--t4)}
.atrib .v{padding:7px 12px;border-bottom:1px solid var(--fio2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.atrib .k:nth-last-of-type(1),.atrib .v:last-child{border-bottom:none}
.item-l{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--fio2);font-size:var(--f-peq)}
.item-l:last-child{border-bottom:none}
/* Usada em listas dentro de cartelas, com as margens delas. Estava declarada
   só dentro da folha de honorários e, nas outras cartelas, saía sem estilo. */
.vazio-l{color:var(--t3);padding:12px;font-size:var(--f-peq)}
.item-l .c{font-variant-numeric:tabular-nums;font-weight:540;color:var(--t2);width:62px;flex:none}
.item-l .d{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Regra: o que é FRASE lê-se, o que é ETIQUETA situa-se. Texto corrido fica
   no --t2 e nunca abaixo de --f-peq; o --t3 é para rótulos e metadados, e o
   --t4 só para o que é acessório. Os detalhes das tarefas são frases inteiras
   e estavam em tom de rótulo, no tamanho mais pequeno que a app tem. */
.item-l .d small{display:block;color:var(--t2);font-size:var(--f-peq);
  line-height:1.45;margin-top:2px}
.item-l .x{color:var(--t3);font-size:var(--f-mini);white-space:nowrap}

/* ── formulário ── */
.linha-f{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:0;font-size:var(--f-peq);
         border-bottom:1px solid var(--fio2)}
.linha-f:last-child{border-bottom:none}
.linha-f .k{padding:0 12px;color:var(--t3);border-right:1px solid var(--fio2);height:32px;display:flex;align-items:center}
.linha-f .v{padding:0}
.ent{width:100%;height:32px;padding:0 12px;border:none;background:transparent;font-size:var(--f-peq)}
.ent:focus{outline:none;background:var(--azul-bg)}
select.ent{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%;background-size:4px 4px;background-repeat:no-repeat}
.vazio{display:grid;place-items:center;height:100%;color:var(--t3);text-align:center;padding:50px;font-size:var(--f-peq)}
.vazio b{display:block;color:var(--t2);font-size:var(--f-base);font-weight:540;margin-bottom:3px}
.esq{background:linear-gradient(90deg,var(--toque) 25%,var(--realce) 50%,var(--toque) 75%);
     background-size:200% 100%;animation:br 1.2s infinite;border-radius:3px;height:10px}
@keyframes br{to{background-position:-200% 0}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--fio);border-radius:9px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--t4);background-clip:content-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}
@media(max-width:820px){.app{grid-template-columns:1fr}.lado{display:none}.entrada-w{padding:40px 18px 60px}.tela{margin:0;border-radius:0;border:none}}

/* ── formulário de abertura, conduzido ── */
.passos{display:flex;align-items:center;gap:0;padding:10px 14px;border-bottom:1px solid var(--fio2);
        overflow-x:auto;flex:none}
.passo-i{display:flex;align-items:center;gap:7px;padding:0 13px 0 0;flex:none}
.passo-i+.passo-i{padding-left:13px;border-left:1px solid var(--fio2)}
.passo-i .b-n{width:19px;height:19px;border-radius:99px;flex:none;display:grid;place-items:center;
  font-size:10.5px;font-weight:600;background:var(--toque);color:var(--t3)}
.passo-i.feito .b-n{background:var(--verde-bg);color:var(--verde)}
.passo-i.agora .b-n{background:var(--preto);color:var(--tela)}
@media (prefers-color-scheme:dark){.passo-i.agora .b-n{color:#17181b}}
.passo-i .b-t{font-size:var(--f-peq);color:var(--t3);white-space:nowrap}
.passo-i.agora .b-t{color:var(--t1);font-weight:530}
.passo-i.feito .b-t{color:var(--t2)}
.erro-c{font-size:var(--f-mini);color:var(--vermelho,#c9372c);padding:3px 12px 7px}
.linha-f.mau .k{color:var(--vermelho,#c9372c)}
.linha-f.mau .ent{background:color-mix(in srgb,var(--vermelho,#c9372c) 8%,transparent)}
.aviso-g{display:flex;gap:9px;padding:10px 12px;border-radius:var(--r-s);font-size:var(--f-peq);
  background:var(--ambar-bg);color:var(--ambar);margin-bottom:12px;align-items:flex-start}
.aviso-g.verde{background:var(--verde-bg);color:var(--verde)}
.aviso-g.vermelho{background:var(--rosa-bg);color:var(--rosa)}
.aviso-g.ambar{background:var(--ambar-bg);color:var(--ambar)}
.aviso-g b{display:block}
/* As teclas declaram display, e um display de autor ganha ao [hidden] do
   browser: sem isto, esconder uma tecla deixava-a no ecrã, apagada. */
.b[hidden],.tecla[hidden]{display:none}
.ajuda{font-size:var(--f-mini);color:var(--t3);padding:6px 12px 10px}
.resumo-l{display:flex;gap:10px;padding:5px 12px;font-size:var(--f-peq);border-bottom:1px solid var(--fio2)}
.resumo-l:last-child{border-bottom:none}
.resumo-l .k{color:var(--t3);width:118px;flex:none}

/* ── ecrã de entrada: opções ── */
.entrada-w{max-width:1020px;margin:0 auto;padding:68px 34px 80px;text-align:center}
.entrada-w h1{font-size:var(--f-grande);font-weight:600;letter-spacing:-.026em;margin:0 0 40px;line-height:1.14}
.entrada-w .sub-e{font-size:var(--f-base);color:var(--t3);margin:0 0 40px}
.opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,298px));gap:16px;
        margin-bottom:34px;text-align:left;justify-content:center}
.opc{position:relative;border-radius:16px;padding:22px 22px 24px;cursor:pointer;overflow:hidden;
     min-height:252px;display:flex;flex-direction:column;
     border:1px solid transparent;transition:transform .13s cubic-bezier(.3,0,.2,1),box-shadow .16s}
.opc:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.opc:active{transform:translateY(0)}
/* Os cartões mostram os atalhos de teclado, logo o teclado é via prevista —
   mas sem tabindex e sem anel de foco não havia como lá chegar nem como ver
   onde se estava. O anel usa a cor do próprio cartão para não destoar. */
.opc:focus-visible{outline:none;transform:translateY(-2px);
  box-shadow:0 0 0 3px var(--tela),0 0 0 6px currentColor,0 6px 18px rgba(0,0,0,.1)}
.opc.trancado{cursor:not-allowed}
.opc .ilus{flex:1;display:grid;place-items:center;margin-bottom:16px}
.opc .ilus svg{width:112px;height:112px;opacity:.5}
.opc b{display:block;font-size:var(--f-tit);font-weight:580;letter-spacing:-.014em;margin-bottom:5px}
.opc span{display:block;font-size:var(--f-peq);line-height:1.5;opacity:.76}
.opc .tc{position:absolute;top:13px;right:14px;font-size:var(--f-mini);font-weight:540;opacity:.5;
         font-variant-numeric:tabular-nums}
/* tonalidades pastel em degradê diagonal — dão vida sem gritar */
.opc.verde{background:linear-gradient(135deg,#e2eaa8 0%,#cfe2a6 100%);color:#3a4a1c}
.opc.laranja{background:linear-gradient(135deg,#fadfc2 0%,#f3c7a3 100%);color:#5e3519}
.opc.azul{background:linear-gradient(135deg,#c7e7e0 0%,#a9dbd4 100%);color:#17433d}
.opc .ilus svg{opacity:.62}
@media (prefers-color-scheme:dark){
  .opc.verde{background:linear-gradient(135deg,#2a3418 0%,#1f2a16 100%);color:#d6e3ad}
  .opc.laranja{background:linear-gradient(135deg,#3a2817 0%,#2b1d12 100%);color:#efcfae}
  .opc.azul{background:linear-gradient(135deg,#17332f 0%,#122724 100%);color:#b4ddd5}
  .opc .ilus svg{opacity:.5}
  .opc:hover{box-shadow:0 6px 20px rgba(0,0,0,.5)}
}
.atalhos{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:720px;margin:0 auto}
.at{display:inline-flex;align-items:center;gap:7px;height:33px;padding:0 14px;border-radius:9px;
    border:1px solid var(--t-fio);background:var(--t-face);font-size:var(--f-peq);cursor:pointer;
    box-shadow:var(--t-sombra);
    transition:background .12s,border-color .12s,box-shadow .12s,transform .07s}
.at:hover{background:var(--t-face-h);border-color:var(--t-fio-h);box-shadow:var(--t-sombra-h)}
.at:active{transform:translateY(1px);background:var(--realce);box-shadow:var(--t-sombra-a)}
.at:focus-visible{outline:none;box-shadow:var(--t-sombra),var(--foco)}
.at svg{width:15px;height:15px;color:var(--t3)}
.at .q{color:var(--t4);font-variant-numeric:tabular-nums;font-size:var(--f-mini)}
.sep-e{height:1px;background:var(--fio2);margin:0 auto 22px;max-width:720px}


/* ── botão de ajuda, sempre à vista ── */
.bt-ajuda{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:8px;
  height:46px;padding:0 20px;border:none;border-radius:999px;
  background:var(--preto);color:var(--tela);cursor:pointer;
  font-size:var(--f-base);font-weight:530;letter-spacing:-.005em;
  box-shadow:0 2px 6px rgba(0,0,0,.14),0 10px 28px rgba(0,0,0,.18);
  transition:transform .11s,box-shadow .16s}
@media (prefers-color-scheme:dark){.bt-ajuda{color:#17181b}}
.bt-ajuda svg{width:19px;height:19px;flex:none}
.bt-ajuda span{display:inline}
.bt-ajuda:hover{transform:translateY(-1px);box-shadow:0 3px 9px rgba(0,0,0,.18),0 14px 34px rgba(0,0,0,.22)}
.bt-ajuda:active{transform:translateY(0) scale(.97)}
.bt-ajuda:focus-visible{outline:none;box-shadow:0 0 0 2px var(--tela),0 0 0 4px var(--foco),0 3px 9px rgba(0,0,0,.18)}
@media(max-width:820px){.bt-ajuda{right:14px;bottom:14px;height:42px;padding:0 16px}}

/* ── edição no lugar ── */
/* O realce do campo editável não pode roubar o avanço: o texto fica alinhado
   com os campos não editáveis, nos mesmos 12px da etiqueta. */
.atrib .v.ed{cursor:text;border-radius:4px;margin:-1px 0;padding:6.5px 12px;
             transition:background .1s,box-shadow .1s}
.atrib .v.ed:hover{background:var(--toque);box-shadow:inset 0 0 0 1px var(--fio)}
.atrib .v.ed.a-editar{background:var(--tela);box-shadow:inset 0 0 0 1px var(--azul),
                      0 0 0 2.5px var(--azul-bg);padding:0}
.atrib .v.ed.a-editar input,.atrib .v.ed.a-editar select{padding:0 12px}
.atrib .v.ed input,.atrib .v.ed select{width:100%;height:30px;padding:0 12px;border:none;
  background:transparent;font:inherit;color:inherit}
.atrib .v.ed input:focus,.atrib .v.ed select:focus{outline:none}
.atrib .v.gravado{animation:piscaOk .9s ease-out}
@keyframes piscaOk{0%{background:var(--verde-bg)}100%{background:transparent}}
.erro-ed{grid-column:2;font-size:var(--f-mini);color:var(--vermelho);padding:3px 5px 6px}

/* ── ecrã de módulos ── */
.t-prox{font-size:var(--f-mini);font-weight:560;color:var(--t4);letter-spacing:.06em;
        text-transform:uppercase;margin:0 0 12px}
.at.por-fazer{cursor:default;opacity:.5;border-style:dashed}
.at.por-fazer:hover{background:var(--tela);border-color:var(--fio)}

/* ── filtros no topo da lista ── */
.filtros-l{display:flex;gap:5px;flex-wrap:wrap;margin-left:4px}
.f-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;
  border-radius:var(--r-s);font-size:var(--f-peq);color:var(--t2);cursor:pointer;
  transition:background .1s,color .1s}
.f-chip:hover{background:var(--toque);color:var(--t1)}
.f-chip:active{background:var(--realce)}
.f-chip.on{background:var(--realce);color:var(--t1);font-weight:530}
.f-chip .q{font-size:var(--f-mini);color:var(--t4);font-variant-numeric:tabular-nums}
.f-chip.on .q{color:var(--t3)}

/* ── Módulo Residência: fases e prazos ────────────────────────── */
.fases{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:8px;margin-top:4px}
.fase{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--l);
      border-radius:11px;background:var(--c);cursor:pointer;transition:.14s;position:relative}
.fase:hover{border-color:var(--l2);background:var(--c2);transform:translateY(-1px)}
.fase.vazia{opacity:.5}
.fase-n{font:600 var(--f-h1)/1 ui-rounded,-apple-system,sans-serif;min-width:30px;color:var(--t)}
.fase.vazia .fase-n{color:var(--t3)}
.fase-t{flex:1;min-width:0}
.fase-t b{display:block;font:600 var(--f-base)/1.3 inherit;color:var(--t)}
.fase-t span{display:block;font:400 var(--f-mini)/1.4 inherit;color:var(--t3);margin-top:2px;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fase-o{font:600 var(--f-mini)/1 inherit;color:var(--t3);opacity:.6;align-self:flex-start}

.prazos{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.pz{display:flex;align-items:center;gap:13px;padding:10px 14px;border:1px solid var(--l);
    border-radius:10px;background:var(--c)}
.pz-d{font:600 var(--f-peq)/1 ui-rounded,-apple-system,sans-serif;min-width:84px;
      font-variant-numeric:tabular-nums;color:var(--t2)}
.pz-t{flex:1;min-width:0}
.pz-t b{display:block;font:600 var(--f-peq)/1.3 inherit}
.pz-t span{display:block;font:400 var(--f-mini)/1.4 inherit;color:var(--t3);margin-top:1px}
.pz-f{font:600 var(--f-mini)/1 inherit;color:var(--t3);white-space:nowrap}
.pz.critico{border-color:#e8b4b8;background:#fdf5f5}
.pz.critico .pz-f,.pz.expirado .pz-f{color:#b3261e}
.pz.expirado{border-color:#d99;background:#fdeded}
.pz.urgente{border-color:#e8d3a8;background:#fdfaf2}
.pz.urgente .pz-f{color:#9a6b00}

/* pastilhas de prazo — mesma escala de urgência em toda a plataforma */
.pastilha.expirado,.pastilha.critico{background:#fce8e6;color:#b3261e;border-color:#f3c9c4}
.pastilha.urgente{background:#fdf3dc;color:#8a5d00;border-color:#f0dfb0}
.pastilha.proximo{background:#eef3fb;color:#2f5aa8;border-color:#d4e0f2}
.pastilha.folgado{background:var(--c2);color:var(--t3)}

tr.t-feita{opacity:.45}
tr.t-feita .nm{text-decoration:line-through}
.migalha .sep{margin:0 6px;color:var(--t3);opacity:.5}

/* As tarefas vindas da app antiga são parágrafos inteiros. A coluna mostra
   duas linhas e guarda o resto para a ficha — a tabela tem de continuar a ler-se. */
table td .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
             overflow:hidden;line-height:1.35}
table td .fraco{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tar-t{max-width:430px}
.tar-c{max-width:190px}

/* ── Famílias de cor ──────────────────────────────────────────────
   A cor identifica o DESTINO, não a origem. Cada módulo tem a sua
   família; os submódulos usam tons dela. Assim o verde é sempre
   Clientes, o âmbar sempre Tarefas, o teal sempre Residência — e um
   cartão que atravessa para outro módulo leva a cor desse módulo.   */
.opc.verde1{background:linear-gradient(135deg,#e2eaa8 0%,#cfe2a6 100%);color:#3a4a1c}
.opc.verde2{background:linear-gradient(135deg,#d8e8b4 0%,#bcd9a0 100%);color:#36481d}
.opc.verde3{background:linear-gradient(135deg,#cde3bb 0%,#aed098 100%);color:#2f4320}

.opc.ambar1{background:linear-gradient(135deg,#fadfc2 0%,#f3c7a3 100%);color:#5e3519}
.opc.ambar2{background:linear-gradient(135deg,#f8d7b5 0%,#eeba93 100%);color:#593116}
.opc.ambar3{background:linear-gradient(135deg,#f3cdae 0%,#e5ad8b 100%);color:#532d14}

.opc.teal1{background:linear-gradient(135deg,#c7e7e0 0%,#a9dbd4 100%);color:#17433d}
.opc.teal2{background:linear-gradient(135deg,#bce0e6 0%,#99cfdc 100%);color:#133c45}
.opc.teal3{background:linear-gradient(135deg,#cfe6e2 0%,#b2d8d0 100%);color:#1b4a43}

.opc.indigo1{background:linear-gradient(135deg,#d3d9f2 0%,#b4bfe8 100%);color:#262f5c}
.opc.indigo2{background:linear-gradient(135deg,#c9d2ee 0%,#a7b4e0 100%);color:#222a54}
.opc.vinho1{background:linear-gradient(135deg,#eccfd0 0%,#dda9ad 100%);color:#5a2127}
.opc.vinho2{background:linear-gradient(135deg,#e7c3c6 0%,#d59ba1 100%);color:#541d23}

/* Números dos resumos. Duas coisas, e a segunda é a que importa:
   1. o peso faz o destaque. O corpo desce a .94em por razão tipográfica, não
      estética: a fonte do sistema usa algarismos de caixa alta (lining
      figures), desenhados à altura das MAIÚSCULAS, enquanto as minúsculas à
      volta têm altura-de-x. Ao mesmo corpo o "29" parece maior do que o "p"
      ao lado, e a negrito ainda mais. Os .94em devolvem-lhes a mesma altura
      aparente. Nunca AUMENTAR o corpo: já aqui esteve a 1.06em e escadeava;
   2. display:inline OBRIGATÓRIO. A regra `.opc b{display:block}` acima existe
      para o título do cartão, mas apanha qualquer <b>, e um <b> em bloco no
      meio de uma frase atira cada número para uma linha só sua. Era isso que
      escadeava o cartão, e não o comprimento do texto. */
.opc .kpi,.at .kpi{display:inline;font-weight:600;font-size:.94em;
  font-variant-numeric:tabular-nums}

/* O botão fica por baixo do título e ao centro, como o resto do cabeçalho do
   módulo. Esteve à direita do título numa linha só e desequilibrava: o título
   deixava de estar ao meio da página. */
.bt-sob-titulo{display:flex;justify-content:center;margin:2px 0 20px}

/* A barra de estado do portal: os três sinais que o CITIUS dá mal se entra,
   para não ser preciso entrar. Verde é "nada a fazer", vermelho é "há aqui
   qualquer coisa", e âmbar é "não consegui ler" — que não é o mesmo que zero. */
.barra-portal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 18px;padding:9px 14px;border:1px solid var(--b);border-radius:10px;
  background:var(--bg2);font-size:var(--f-base)}
.barra-portal .bp-t{font-weight:500;color:var(--t3);letter-spacing:.04em;
  text-transform:uppercase;font-size:var(--f-mini)}
.barra-portal .bp{display:inline-flex;align-items:center;gap:6px;color:var(--t2)}
.barra-portal .bp::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none}
.barra-portal .bp.bom::before{background:#2f9e6e}
.barra-portal .bp.mau{color:#b3261e;font-weight:500}
.barra-portal .bp.mau::before{background:#b3261e}
.barra-portal .bp.incerto::before{background:#c98a16}
.barra-portal .bp-q{margin-left:auto;color:var(--t3);font-size:var(--f-peq)}
@media (prefers-color-scheme: dark){
  .barra-portal .bp.bom::before{background:#4cc08c}
  .barra-portal .bp.mau{color:#f2857c}
  .barra-portal .bp.mau::before{background:#f2857c}
}

/* Aço — módulo CITIUS. Começou por ser um cinzento sem croma, e estava errado:
   sem cor, as três tonalidades ficavam indistinguíveis e os cartões liam-se
   todos iguais. É a cor que separa as tonalidades, não a luminosidade sozinha.
   Os saltos aqui são maiores do que nas outras famílias, de propósito. */
.opc.aco1{background:linear-gradient(135deg,#cfe0f0 0%,#a8c6e2 100%);color:#14334f}
.opc.aco2{background:linear-gradient(135deg,#b4cde6 0%,#8bb0d3 100%);color:#102c45}
.opc.aco3{background:linear-gradient(135deg,#9bb9d9 0%,#6f9bc5 100%);color:#0c2438}

@media (prefers-color-scheme: dark){
  .opc.verde1{background:linear-gradient(135deg,#2a3418 0%,#1f2a16 100%);color:#d6e3ad}
  .opc.verde2{background:linear-gradient(135deg,#27351a 0%,#1c2a15 100%);color:#cfe0a8}
  .opc.verde3{background:linear-gradient(135deg,#24331c 0%,#1a2816 100%);color:#c6daa2}
  .opc.ambar1{background:linear-gradient(135deg,#3a2817 0%,#2b1d12 100%);color:#efcfae}
  .opc.ambar2{background:linear-gradient(135deg,#372512 0%,#281a10 100%);color:#ecc6a2}
  .opc.ambar3{background:linear-gradient(135deg,#33220f 0%,#24170d 100%);color:#e6bd97}
  .opc.teal1{background:linear-gradient(135deg,#17332f 0%,#122724 100%);color:#b4ddd5}
  .opc.teal2{background:linear-gradient(135deg,#143036 0%,#0f2429 100%);color:#a8d6e0}
  .opc.teal3{background:linear-gradient(135deg,#1a3632 0%,#142a26 100%);color:#bce0d8}
  .opc.indigo1{background:linear-gradient(135deg,#1e2440 0%,#161b31 100%);color:#bcc6ec}
  .opc.indigo2{background:linear-gradient(135deg,#1b2139 0%,#13182b 100%);color:#b2bde7}
  .opc.vinho1{background:linear-gradient(135deg,#3a2023 0%,#2b171a 100%);color:#e6b9bd}
  .opc.vinho2{background:linear-gradient(135deg,#351c20 0%,#271418 100%);color:#e0afb4}
  .opc.aco1{background:linear-gradient(135deg,#1a3047 0%,#132337 100%);color:#bcd6ee}
  .opc.aco2{background:linear-gradient(135deg,#1f3d5c 0%,#152c45 100%);color:#a9c9e6}
  .opc.aco3{background:linear-gradient(135deg,#254b70 0%,#183654 100%);color:#96bcdf}
}

/* Dossier deduzido pela app: âmbar, porque não é erro — é informação por
   confirmar. O vermelho fica para o que falta mesmo. */
.pastilha.ambar{background:var(--ambar-bg);color:var(--ambar);border-color:transparent}
.pastilha.conferir{cursor:pointer;transition:.12s}
.pastilha.conferir:hover{background:var(--verde-bg);color:var(--verde)}
.pastilha.conferir:hover::after{content:" ✓"}

/* Módulo a que o perfil não chega: visível, mas inequivocamente fechado. */
.opc.trancado{cursor:not-allowed;filter:saturate(.25);opacity:.62}
.opc.trancado:hover{transform:none;box-shadow:none}
.aviso-acesso{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  background:var(--preto);color:#fff;padding:11px 18px;border-radius:11px;
  font-size:var(--f-peq);line-height:1.45;box-shadow:0 8px 26px rgba(0,0,0,.26);z-index:90;
  max-width:330px;transition:opacity .4s,transform .4s}
.aviso-acesso b{display:block;font-weight:600;margin-bottom:2px}
.aviso-acesso.fora{opacity:0;transform:translateX(-50%) translateY(7px)}
.aviso-acesso.com-accao{max-width:430px}
.aviso-acesso .anular{margin-left:12px;padding:0;border:0;background:none;color:#fff;
  font-family:inherit;font-size:var(--f-peq);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
.aviso-acesso .anular:hover{opacity:.75}


/* ── Teclas ────────────────────────────────────────────────────────────────
   Um só sistema para toda a app. O que distingue uma tecla de uma etiqueta é
   o relevo: contorno firme, face com degradê, sombra curta por baixo e um
   brilho no topo. Ao passar o rato levanta; ao carregar afunda. Sem isso,
   quem olha não sabe que aquilo tem finalidade.

   .tecla          secundária, o caso comum
   .tecla.p        primária, a acção principal do ecrã
   .tecla.perigo   destrutiva — vermelha em repouso, para se ver o risco
   .tecla.s        pequena, para acções dentro de uma linha de lista        */

.tecla{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:30px;padding:0 14px;border:1px solid var(--t-fio);border-radius:var(--r-s);
  background:var(--t-face);color:var(--t1);font:550 var(--f-base)/1 var(--f);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:var(--t-sombra);
  transition:background .13s,border-color .13s,box-shadow .13s,transform .07s}
.tecla:hover{background:var(--t-face-h);border-color:var(--t-fio-h);
  box-shadow:var(--t-sombra-h)}
.tecla:active{transform:translateY(1px);box-shadow:var(--t-sombra-a);
  background:var(--realce)}
.tecla:focus-visible{outline:none;box-shadow:var(--t-sombra),var(--foco)}
.tecla[disabled],.tecla.off,.b[disabled],.b.claro[disabled],.at[disabled]{opacity:.4;pointer-events:none;box-shadow:none;transform:none}
.tecla svg{width:15px;height:15px;flex:none}

.tecla.p{border-color:var(--preto);background:var(--preto);color:var(--tela);
  box-shadow:0 1px 2px rgba(16,18,24,.28)}
.tecla.p:hover{background:#2a2d33;box-shadow:0 2px 7px rgba(16,18,24,.3)}
.tecla.p:active{background:#0e1013;box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}

.tecla.s{height:24px;padding:0 9px;font-size:var(--f-peq);border-radius:5px;
  font-weight:550;color:var(--t2)}
.tecla.s:hover{color:var(--t1)}

/* Vermelha em repouso: quem olha tem de ver que aquilo apaga. Depois do .s,
   porque as duas valem o mesmo peso e a última é que fica. */
.tecla.perigo,.tecla.s.perigo{color:#a1272c}
.tecla.perigo:hover,.tecla.s.perigo:hover{border-color:#d9a3a6;color:#8c1f24;
  background:#fdf6f6}
.tecla.perigo:active,.tecla.s.perigo:active{background:#f7e9ea}
@media (prefers-color-scheme:dark){
  /* O mesmo aviso, com contraste sobre fundo escuro. */
  .tecla.perigo,.tecla.s.perigo{color:#e4848a}
  .tecla.perigo:hover,.tecla.s.perigo:hover{color:#f0a3a8;border-color:#6b3a3e;
    background:#33262a}
  .tecla.perigo:active,.tecla.s.perigo:active{background:#2a1e21}
}

/* As teclas de filtro e as abas ganham o mesmo vocabulário, sem relevo:
   são estados, não acções, e o relevo distingue-os. */
.f-chip:focus-visible,.aba:focus-visible{outline:none;box-shadow:var(--foco)}
.aba{display:inline-flex;align-items:center;height:28px;padding:0 13px;
  border:1px solid var(--fio);border-radius:999px;background:var(--tela);
  color:var(--t2);font:500 var(--f-peq)/1 var(--f);cursor:pointer;
  transition:background .12s,color .12s,border-color .12s}
.aba:hover{background:var(--toque);color:var(--t1)}
.aba.on{background:var(--preto);border-color:var(--preto);color:var(--tela)}

/* Teclado: quem navega sem rato tem de ver onde está. */
a:focus-visible,button:focus-visible,[onclick]:focus-visible{
  outline:none;box-shadow:var(--foco);border-radius:var(--r-s)}

@media (prefers-reduced-motion:reduce){
  .tecla,.aba,.f-chip{transition:none}
  .tecla:active{transform:none}
}

/* Trabalho ja lancado. Discreto de proposito: nao e um alarme, e um facto —
   serve para nao se lancar duas vezes o mesmo, que foi o que aconteceu a
   06.11.2026 num assunto faturado fora da app. */
.lancada{color:var(--t3)}
.lancada::before{content:'€ ';font-weight:600}
.nova-t.lanc-t{border-top:1px solid var(--fio2)}