/* O chao do portal.
   Era um cinzento AZULADO (#f8fafc -> #eef1f5) — frio, e a puxar para a mesma
   familia do azul-marinho da marca. Passa a um off-white QUENTE. Nao e moda:
   quem passa uma hora na Saude do Catalogo esta a olhar para mil e tal linhas
   sobre este fundo, e um branco frio cansa mais depressa. E o quente da-se
   melhor com o dourado da casa, que e o acento.
   Fica em variaveis porque ha meia duzia de superficies que tem de o
   acompanhar — nao chega mudar o corpo e deixar o resto azulado. */
body {
  font-family: 'Figtree', sans-serif;
  background: linear-gradient(180deg, var(--chao-topo) 0%, var(--chao-fundo) 100%);
}
.hero { background: linear-gradient(135deg, #0d0d16 0%, #1a1a2e 100%); }
.card { transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.14); }
.product-card { transition: transform .15s ease, box-shadow .15s ease; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.12); }
/* A COR DO TEXTO DA BARRA vem do tema desde que a barra deixou de ser
   sempre escura. Na Oceano e na Glaciar ela é clara, e o `text-white` que
   estava no <header> deixava o menu inteiro invisível — branco sobre
   branco. Foi a primeira coisa que se viu ao experimentar a Oceano. */
.brand-header{ color:var(--nav-ink) }
.brand-header .nav-fraco{ color:var(--nav-ink-2) }
.brand-header { background: linear-gradient(135deg, color-mix(in srgb, var(--nav-bg) 88%, #fff) 0%, var(--nav-bg) 100%); box-shadow: 0 4px 16px rgba(0,0,0,.18); position: sticky; top: 0; z-index: 30; }
.btn-primary { background: var(--blue); color: var(--on-blue); border-radius: 10px; font-weight: 600; letter-spacing: .01em; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary:hover { background: color-mix(in srgb, var(--blue) 86%, #000); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.22); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; }
.btn-secondary:hover { background: var(--hover); }
.input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; transition: border-color .15s ease, box-shadow .15s ease; width: 100%; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(16,26,61,.15); }
.input-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.stat-tile { background: var(--card); border-radius: 14px; border: 1px solid #eef0f5; box-shadow: 0 2px 10px rgba(15,23,42,.06); padding: 18px 20px; }
.table-row:hover { background: var(--chao-linha); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.toast { min-width: 240px; max-width: 360px; border-radius: 10px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 14px; font-weight: 500; animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.cat-btn.active { background: #101a3d; color: var(--on-blue); }
.palete-alert { animation: palete-alert-shake .5s ease; box-shadow: 0 0 0 3px rgba(234,88,12,.35); border-radius: 10px; }
@keyframes palete-alert-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
@media print {
  .no-print { display: none !important; }
}

/* ---------- Dashboard: Análises (KPIs em gradiente + gráficos) ---------- */
.kpi-grad { border-radius: 16px; padding: 16px 18px; color: var(--on-blue); box-shadow: 0 8px 20px rgba(15,23,42,.16); position: relative; overflow: hidden; }
.kpi-grad-icon { opacity: .85; margin-bottom: 8px; }
.kpi-grad-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }
.kpi-grad-value { font-size: 21px; font-weight: 800; margin-top: 2px; }
.kpi-grad-sub { font-size: 12px; font-weight: 600; opacity: .8; }
.kpi-grad-a { background: linear-gradient(135deg, #101a3d 0%, #2a3868 100%); }
.kpi-grad-b { background: linear-gradient(135deg, #c1440e 0%, #e2661f 100%); }
.kpi-grad-c { background: linear-gradient(135deg, #9c7a1f 0%, #d4af37 100%); }
.kpi-grad-d { background: linear-gradient(135deg, #4a5568 0%, #232c3d 100%); }
.chart-box { position: relative; height: 220px; }
.chart-box-sm { position: relative; height: 130px; }

/* ---------- Página Fabricantes: carrossel de promoções + grelha "site" ---------- */
.fab-hero-title { color: var(--ink); }
.fab-hero-accent { background: linear-gradient(90deg, #d4af37, #c1440e); height: 4px; width: 56px; border-radius: 999px; }

.promo-carousel { position: relative; height: 230px; border-radius: 22px; overflow: hidden; box-shadow: 0 16px 34px rgba(11,19,48,.28); background: #0b1330; }
.promo-slide {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 22px;
  padding: 26px 36px; text-decoration: none;
  background: linear-gradient(120deg, #0b1330 0%, #16224a 45%, #2a3868 100%);
  opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.promo-slide.active { opacity: 1; pointer-events: auto; }
.promo-slide::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 15%, var(--accent, color-mix(in srgb, var(--acc2) 35%, transparent)), transparent 55%);
  pointer-events: none;
}
.promo-logo-chip {
  position: relative; z-index: 1; width: 104px; height: 104px; border-radius: 20px; background: color-mix(in srgb, var(--card) 97%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 10px; flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.promo-logo-chip img { width: 100%; height: 100%; object-fit: contain; }
.promo-body { position: relative; z-index: 1; color: var(--on-blue); min-width: 0; }
.promo-eyebrow { color: #e9c766; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; }
.promo-name { font-size: 25px; font-weight: 800; margin: 4px 0 6px; line-height: 1.15; }
.promo-desc { color: rgba(255,255,255,.78); font-size: 13px; max-width: 480px; }
.promo-cta {
  position: relative; z-index: 1; margin-left: auto; flex-shrink: 0;
  background: linear-gradient(135deg, #c1440e, #e2661f); color: var(--on-blue); font-weight: 700; font-size: 13px;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px rgba(193,68,14,.4);
  transition: transform .15s ease, box-shadow .15s ease; display: inline-flex; align-items: center; gap: 4px;
}
.promo-slide:hover .promo-cta { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(193,68,14,.5); }

.promo-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--card) 14%, transparent); color: var(--on-blue); border: 1px solid color-mix(in srgb, var(--card) 25%, transparent); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s ease;
}
.promo-nav:hover { background: color-mix(in srgb, var(--card) 30%, transparent); }
.promo-nav-prev { left: 14px; }
.promo-nav-next { right: 14px; }

.promo-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; }
.promo-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--sup-fundo); border: none; cursor: pointer; padding: 0; transition: all .2s ease; }
.promo-dot.active { background: #d4af37; width: 20px; }

/* Slide de flyer promocional carregado pelo admin (imagem cheia, ex. feita em Canva) */
.promo-slide-flyer { padding: 0; background: #0b1330; }
.promo-slide-flyer::before { display: none; }
.promo-flyer-img { width: 100%; height: 100%; object-fit: cover; }
.promo-flyer-label {
  position: absolute; left: 16px; bottom: 14px; z-index: 1; background: color-mix(in srgb, var(--nav-bg) 72%, transparent); color: var(--on-blue);
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}

.fab-card {
  position: relative; background: var(--card); border-radius: 20px; border: 1px solid #edeef4; overflow: hidden;
  box-shadow: 0 3px 14px rgba(15,23,42,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.fab-card-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; flex: 1; }
.fab-card-admin { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; gap: 6px; }
.fab-flyer-btn {
  width: 27px; height: 27px; border-radius: 999px; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer; transition: color .15s ease, background .15s ease;
}
.fab-flyer-btn:hover { background: var(--card); color: var(--erro-ink); }
.fab-doclang-select {
  height: 27px; border-radius: 999px; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0,0,0,.14); color: var(--ink-2); font-size: 11px; font-weight: 600;
  padding: 0 6px; cursor: pointer;
}
.fab-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(11,19,48,.16); border-color: #d4af3760; }
.fab-card-top { height: 4px; background: linear-gradient(90deg, #101a3d, #d4af37, #c1440e); }
.fab-card-body { padding: 24px 20px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; flex: 1; }
.fab-card-logo { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; }
.fab-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.fab-card-name { font-weight: 800; color: var(--ink); font-size: 15px; }
.fab-card-tag { font-size: 11px; font-weight: 700; letter-spacing: .01em; color: var(--erro-ink); background: #c1440e14; padding: 3px 10px; border-radius: 999px; }
.fab-card-meta { font-size: 12px; color: #7b8194; }
.fab-card-cta { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eef0f5; width: 100%; font-size: 13px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.fab-card:hover .fab-card-cta { color: var(--erro-ink); }

@media (max-width: 640px) {
  .promo-carousel { height: 300px; }
  .promo-slide { flex-wrap: wrap; padding: 20px; }
  .promo-cta { margin-left: 0; }
}

/* ---------- Página de acesso (login): institucional + vídeo + contactos + marcas ---------- */
.login-page { min-height: 100vh; width: 100%; display: flex; flex-direction: column; background: linear-gradient(160deg, #070c1f 0%, #0b1330 35%, #1b2a56 75%, #2a3868 100%); position: relative; }
.login-lang-bar { position: absolute; top: 16px; right: 20px; z-index: 2; }
.login-lang-select {
  background: color-mix(in srgb, var(--card) 12%, transparent); color: var(--on-blue); font-size: 16px; font-weight: 700;
  border: 1.5px solid color-mix(in srgb, var(--card) 35%, transparent); border-radius: 10px; padding: 9px 14px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.login-lang-select option { color: var(--ink); font-size: 15px; padding: 6px; }
.login-hero { display: flex; align-items: center; justify-content: center; padding: 34px 24px 16px; position: relative; overflow: hidden; }
.login-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--acc2) 18%, transparent), transparent 45%), radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--acc2) 20%, transparent), transparent 45%);
}
/* As duas colunas alinham-se PELO TOPO e nao pelo meio.
   Com "align-items:center", a coluna mais curta (o formulario) ficava
   centrada contra a mais alta (logotipo + video + contactos): nenhuma das
   bordas batia certo com a do lado, e via-se logo — duas caixas ao lado uma
   da outra, ambas a comecar em sitios diferentes. Pelo topo, comecam as duas
   na mesma linha, que e o que o olho procura. */
/* A entrada: a frase por cima das duas colunas.
   Antes a marca e a frase viviam dentro da coluna da esquerda, e a frase que
   diz o que a casa faz — a primeira coisa que um cliente le — ficava com
   metade da largura, espremida ao lado do cartao de entrada. Passa a
   atravessar a pagina, em corpo maior. E as duas colunas passam a ter a mesma
   altura, para o cartao acabar em baixo ao nivel da morada em vez de ficar
   pendurado a meio. */
.login-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column;
  gap: 12px; max-width: 1200px; margin: 0 auto; width: 100%; }
.login-cabecalho { display: flex; flex-direction: column; gap: 10px; }
.login-marca { display: flex; align-items: center; gap: 14px; }
.login-marca-logo { width: 80px; height: 80px; border-radius: 999px; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.9); outline: 1px solid color-mix(in srgb, var(--card) 12%, transparent);
  display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--card) 95%, transparent); }
.login-marca-logo img { width: 100%; height: 100%; object-fit: cover; }
.login-marca-logo span { font-weight: 700; color: var(--ink); font-size: 30px; }
.login-marca-nome { color: var(--on-blue); font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.login-marca-sub { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.3; }
/* Sem justify-content:center. Com ele as colunas ficavam centradas na pagina
   enquanto a frase la de cima comecava a esquerda — e via-se: o texto e a
   caixa do video comecavam em sitios diferentes. Encostadas a esquerda,
   tudo arranca da mesma linha. */
.login-colunas { display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch;
  justify-content: flex-start; width: 100%; }
.login-institutional { flex: 1 1 460px; min-width: 280px; max-width: none;
  display: flex; flex-direction: column; justify-content: center; }
.login-tagline { color: var(--on-blue); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.3;
  font-weight: 600; letter-spacing: -.02em; max-width: none; margin: 0; }
.login-video-box {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: var(--tinta-fundo); margin: 0; border: var(--ve-borda);
}
.login-video-box iframe, .login-video-box video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.login-video-mute-btn {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--card) 25%, transparent);
  background: color-mix(in srgb, var(--nav-bg) 65%, transparent); color: var(--on-blue); display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: var(--sup-desfoque); transition: background .15s ease, transform .15s ease;
}
.login-video-mute-btn:hover { background: color-mix(in srgb, var(--nav-bg) 85%, transparent); transform: scale(1.06); }
/* O botao so aparece se o video tiver som — e o login.js que o decide, pondo
   e tirando o atributo hidden. Mas display:flex numa classe ganha ao display:none
   que o browser da ao [hidden]: o botao estava sempre a ver-se, e a carregar
   nele nao acontecia nada. */
.login-video-mute-btn[hidden] { display: none; }
.login-video-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: rgba(255,255,255,.5); font-size: 13px; text-align: center; padding: 0 16px;
}
.login-contacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.login-contact-item {
  display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85); font-size: 12.5px;
  background: color-mix(in srgb, var(--card) 8%, transparent); border: 1px solid color-mix(in srgb, var(--card) 10%, transparent); padding: 6px 12px; border-radius: 999px;
}
.login-coluna-entrada { flex: 0 0 340px; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; justify-content: center; }
.login-form-card { flex: 0 0 auto; width: 100%; max-width: none; background: var(--card); border-radius: 20px; box-shadow: 0 24px 54px rgba(0,0,0,.4); padding: 24px; display: flex; flex-direction: column; justify-content: center; }

.brand-marquee { position: relative; z-index: 1; background: var(--card); border-top: 3px solid #d4af37; overflow: hidden; padding: 28px 0; box-shadow: 0 -10px 28px rgba(0,0,0,.18); }
.brand-marquee-track { display: flex; gap: 50px; width: max-content; align-items: center; animation: marquee-scroll 36s linear infinite; }
.brand-marquee:hover .brand-marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brand-marquee-item { display: flex; align-items: center; gap: 16px; flex-shrink: 0; padding: 0 16px; }
.brand-marquee-logo {
  width: 68px; height: 68px; border-radius: 16px; background: var(--card); border: 1px solid #eef0f5;
  box-shadow: 0 6px 16px rgba(15,23,42,.1); display: flex; align-items: center; justify-content: center;
  padding: 9px; flex-shrink: 0; overflow: hidden;
}
.brand-marquee-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-marquee-logo span { font-weight: 800; font-size: 24px; }
.brand-marquee-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.brand-marquee-name { color: var(--ink); font-size: 15px; font-weight: 800; }
.brand-marquee-country { color: var(--erro-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 880px) {
  .login-colunas { flex-direction: column; align-items: stretch; }
  .login-coluna-entrada { order: 1; flex-basis: auto; max-width: 500px; }
  .login-form-card { order: 0; flex-basis: auto; }
  .login-institutional { order: 2; flex-basis: auto; max-width: 500px; justify-content: flex-start; }
  .login-marca-logo { width: 68px; height: 68px; }
}

/* ===================================================================
   CRM — quadro de encomendas e novos negócios
   ===================================================================
   Um quadro não se lê como um documento: percorre-se com os olhos. Por
   isso a informação está codificada na FORMA e não só no texto — um risco
   de cor à esquerda do cartão diz o estado antes de se ler uma palavra, e
   os cabeçalhos das colunas ficam colados ao topo para não se perder o
   sítio ao descer. O fundo é ligeiramente mais escuro do que o cartão,
   para os cartões parecerem pousados em cima da coluna. */

/* O CRM TINHA UM SISTEMA DE CORES SÓ DELE, e é por isso que ele viu o
   CRM «diferente dos outros»: estas doze variáveis tinham valores fixos
   escritos à mão e ignoravam o tema por completo. Escolhia-se a Oceano e
   o CRM continuava com o azul-marinho e os cinzentos de sempre.

   Os NOMES ficam — estão usados em cento e tal sítios, e são bons nomes:
   dizem o que a cor faz neste ecrã («lane» é o fundo da coluna, «surface»
   é o cartão pousado em cima dela). O que muda é de onde vêm os valores.

   A relação entre eles é a que o desenho do quadro precisa: o fundo da
   coluna é um tom mais escuro do que o cartão, para os cartões parecerem
   pousados. Por isso lane = --line-2 e surface = --card, e não os dois
   iguais. */
.crm{
  --crm-bg:var(--bg);
  --crm-lane:var(--line-2);
  --crm-surface:var(--card);
  --crm-ink:var(--ink);
  --crm-muted:var(--ink-2);
  --crm-faint:var(--ink-3);
  --crm-line:var(--line);
  --crm-accent:var(--acc2);
  /* Os estados ficam com os tons que já têm dois valores, um por modo —
     um vermelho escuro sobre um cartão quase preto não se lê, e um
     negócio em atraso que não se lê é um negócio perdido. */
  --crm-late:var(--erro-ink);
  --crm-warn:var(--aviso-ink);
  --crm-ok:var(--ok-ink);
  --crm-info:var(--blue-d);
}

/* --- cabeçalho da página ------------------------------------------ */
.crm-topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.1rem}
.crm-titulo{font-size:1.35rem;font-weight:700;color:var(--crm-ink);letter-spacing:-.01em;margin:0}
.crm-sub{font-size:.85rem;color:var(--crm-muted);margin:.15rem 0 0}
.crm-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}

/* --- pastilhas de aviso ------------------------------------------- */
.crm-avisos{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.5rem}
.crm-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:600;
  border-radius:999px;padding:.22rem .7rem;border:1px solid;white-space:nowrap}
.crm-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.crm-pill.is-late{color:var(--crm-late);border-color:color-mix(in srgb,var(--crm-late) 35%,transparent);
  background:color-mix(in srgb,var(--crm-late) 8%,#fff)}
.crm-pill.is-warn{color:var(--crm-warn);border-color:color-mix(in srgb,var(--crm-warn) 35%,transparent);
  background:color-mix(in srgb,var(--crm-warn) 10%,#fff)}
.crm-pill.is-info{color:var(--crm-info);border-color:color-mix(in srgb,var(--crm-info) 30%,transparent);
  background:color-mix(in srgb,var(--crm-info) 8%,#fff)}
.crm-pill.is-ok{color:var(--crm-ok);border-color:color-mix(in srgb,var(--crm-ok) 30%,transparent);
  background:color-mix(in srgb,var(--crm-ok) 8%,#fff)}
.crm-contagem{font-size:.78rem;color:var(--crm-faint);margin-left:.15rem}

/* --- o quadro ------------------------------------------------------ */
.crm-board{display:flex;gap:.9rem;align-items:flex-start;overflow-x:auto;
  padding:.25rem .25rem 1.5rem;margin:0 -.25rem;scroll-snap-type:x proximity}
.crm-board::-webkit-scrollbar{height:10px}
.crm-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.crm-col{flex:0 0 17.5rem;width:17.5rem;background:var(--crm-lane);border-radius:16px;
  padding:.55rem;scroll-snap-align:start;border:1px solid var(--crm-line)}
.crm-col-cab{position:sticky;top:0;z-index:2;background:var(--crm-lane);
  border-radius:12px;padding:.5rem .55rem .55rem;margin-bottom:.5rem}
.crm-col-linha{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.crm-col-nome{font-size:.82rem;font-weight:700;color:var(--crm-ink);letter-spacing:.01em;
  text-transform:uppercase}
.crm-col-n{font-size:.72rem;font-weight:700;color:var(--on-blue);background:var(--cor,#64748b);
  border-radius:999px;min-width:1.35rem;height:1.35rem;display:inline-flex;
  align-items:center;justify-content:center;padding:0 .35rem}
.crm-col-barra{height:3px;border-radius:999px;background:var(--cor,#64748b);
  margin:.45rem 0 .35rem;opacity:.85}
.crm-col-ajuda{font-size:.72rem;color:var(--crm-faint);line-height:1.35;margin:0}
.crm-col-corpo{display:flex;flex-direction:column;gap:.5rem;min-height:2.5rem}
.crm-vazio{border:1px dashed #cbd5e1;border-radius:12px;padding:.9rem;text-align:center;
  font-size:.75rem;color:var(--crm-faint)}

/* --- cartão -------------------------------------------------------- */
.crm-card{position:relative;background:var(--crm-surface);border:1px solid var(--crm-line);
  border-radius:12px;padding:.7rem .8rem .6rem .95rem;
  box-shadow:0 1px 2px rgba(16,26,61,.05);
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.crm-card:hover{box-shadow:0 10px 24px -14px rgba(16,26,61,.5);transform:translateY(-1px)}
/* o risco à esquerda: o estado antes de se ler o texto */
.crm-card::before{content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:3px;
  border-radius:999px;background:var(--cor,#cbd5e1)}
.crm-card.is-late{border-color:color-mix(in srgb,var(--crm-late) 40%,transparent)}
.crm-card.is-late::before{background:var(--crm-late)}
.crm-card.is-warn{border-color:color-mix(in srgb,var(--crm-warn) 40%,transparent)}
.crm-card.is-warn::before{background:var(--crm-warn)}

.crm-card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.crm-card-nome{font-size:.9rem;font-weight:700;color:var(--crm-ink);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-card-meta{font-size:.72rem;color:var(--crm-muted);margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-card-valor{font-size:.8rem;font-weight:700;color:var(--crm-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.crm-card-linha{font-size:.75rem;margin-top:.45rem;line-height:1.35}
.crm-card-linha b{font-weight:600}
.crm-t-late{color:var(--crm-late);font-weight:600}
.crm-t-warn{color:var(--crm-warn);font-weight:600}
.crm-t-ok{color:var(--crm-ok);font-weight:600}
.crm-t-calmo{color:var(--crm-muted)}
.crm-card-nota{font-size:.74rem;color:var(--ink-2);margin-top:.2rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crm-card-rodape{display:flex;align-items:center;gap:.35rem;margin-top:.6rem;flex-wrap:wrap}
.crm-tag{font-size:.68rem;color:var(--crm-faint);border:1px solid var(--crm-line);
  border-radius:999px;padding:.1rem .5rem}

.crm-btn{font-size:.72rem;font-weight:600;border-radius:8px;padding:.28rem .6rem;
  border:1px solid var(--crm-line);background:var(--card);color:var(--crm-ink);cursor:pointer;
  transition:background .14s ease,border-color .14s ease}
.crm-btn:hover{background:var(--bg);border-color:#cbd5e1}
/* O botão forte era «o azul-marinho da casa» — e --crm-ink passou a
   querer dizer «a cor do texto», que no modo escuro é CLARA. Ficava um
   botão claro com letras brancas. Um botão principal é a cor primária,
   que é o que «principal» quer dizer. */
.crm-btn-forte{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
.crm-btn-forte:hover{background:color-mix(in srgb, var(--blue) 86%, #000)}
.crm-btn:focus-visible{outline:2px solid var(--crm-accent);outline-offset:2px}

/* --- painel lateral ------------------------------------------------ */
.crm-painel{position:fixed;inset:0;z-index:40;display:flex;justify-content:flex-end}
.crm-painel-fundo{position:absolute;inset:0;background:color-mix(in srgb, var(--nav-bg) 35%, transparent);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.crm-painel-caixa{position:relative;background:var(--card);width:100%;max-width:34rem;height:100%;
  overflow-y:auto;padding:1.6rem;box-shadow:-24px 0 60px -30px rgba(16,26,61,.7);
  animation:crmEntra .22s cubic-bezier(.2,.7,.3,1)}
@keyframes crmEntra{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.crm-painel-caixa{animation:none}
  .crm-card{transition:none}.crm-card:hover{transform:none}}
.crm-destaque{border:1.5px solid color-mix(in srgb,var(--crm-accent) 45%,transparent);
  background:color-mix(in srgb,var(--crm-accent) 5%,#fff);border-radius:14px;padding:1rem}
.crm-destaque legend{font-size:.8rem;font-weight:700;color:#b25f12;padding:0 .3rem}

@media (max-width:640px){
  .crm-col{flex-basis:15.5rem;width:15.5rem}
}

/* ===================================================================
   VIDRO LÍQUIDO — a camada de imagem
   ===================================================================
   Só aspeto. Não muda uma única página, nem um botão de sítio: muda o
   material de que as superfícies são feitas. As caixas passam a vidro
   translúcido com desfoque por trás, borda finíssima e um brilho no bordo
   de cima, como acontece nos ecrãs a que a equipa está habituada.

   Uma nota que decide tudo: vidro só parece vidro se houver alguma coisa
   por trás. Por isso o fundo da página deixa de ser cinzento liso e passa
   a ter manchas de cor muito suaves — é isso que o vidro apanha e deixa
   ver, e é daí que vem a sensação de profundidade.

   Legibilidade primeiro: o texto continua sempre sobre superfícies quase
   opacas. Onde o browser não souber desfocar (equipamentos antigos), as
   mesmas caixas ficam sólidas — nada desaparece. */

:root{
  /* O CHÃO DA PÁGINA passou a vir do tema.
     Eram três off-whites quentes escritos à mão — bonitos, e a razão por
     que escolher «escuro» não fazia nada: o maior pedaço de cor do portal
     inteiro é o fundo, e ele não estava ligado a coisa nenhuma.
     Os nomes ficam, que estão usados em três sítios; o que mudou é de
     onde vêm os valores. Na combinação da casa são exactamente os mesmos
     tons de sempre — ver o «rmota» no public/js/paletas.js. */
  --chao-topo:var(--page);
  --chao-fundo:var(--bg);
  --chao-linha:var(--line-2);
  /* AS VARIÁVEIS DO VIDRO ORIGINAIS. Eram brancos translúcidos fixos, e
     eram ELAS que davam vidro ao portal inteiro — por isso o CRM continuava
     com vidro depois de eu o ter tirado «a todas as combinações menos à da
     casa»: eu tinha convertido as regras que encontrei uma a uma e tinha
     deixado estas, que são as que mandam em cento e tal sítios.
     Foi o João que deu por isso: «fui ao CRM e o estilo é liquid glass,
     está diferente dos outros».
     Agora saem das --sup-*, que valem vidro na combinação da casa e
     superfície sólida em todas as outras (ver public/js/paletas.js). */
  --vidro:var(--sup-fundo);
  --vidro-forte:var(--sup-fundo);
  --vidro-borda:var(--sup-borda);
  --vidro-linha:color-mix(in srgb, var(--ink) 8%, transparent);
  --vidro-sombra:var(--sup-sombra);
  --vidro-brilho:var(--sup-brilho);
  --raio:18px;
}

/* --- o fundo que o vidro apanha ----------------------------------- */
body{
  background:#f2f4f9;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46vmax 46vmax at 8% -6%, color-mix(in srgb, var(--acc2) 20%, transparent), transparent 62%),
    radial-gradient(42vmax 42vmax at 98% 6%, color-mix(in srgb, var(--acc2) 16%, transparent), transparent 64%),
    radial-gradient(52vmax 52vmax at 50% 108%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 66%);
}

/* --- superfícies --------------------------------------------------- */
.stat-tile,
.card,
.product-card,
.fab-card,
.crm-card,
.chart-box,
.promo-logo-chip{
  background:var(--vidro-forte);
  border:1px solid var(--vidro-borda);
  border-radius:var(--raio);
  box-shadow:var(--vidro-sombra),var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
}
.crm-card{border-radius:16px;padding-left:.95rem}
.crm-card:hover{box-shadow:0 16px 34px -16px rgba(16,26,61,.42),var(--vidro-brilho)}

/* as pistas do quadro: vidro mais leve, para os cartões flutuarem por cima */
.crm-col{
  background:color-mix(in srgb, var(--card) 34%, transparent);
  border:1px solid var(--vidro-borda);
  border-radius:22px;
  box-shadow:var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
}
.crm-col-cab{background:transparent;backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);background:color-mix(in srgb, var(--card) 18%, transparent)}

/* --- barra de topo: vidro escuro, o conteúdo passa por baixo ------- */
.brand-header{
  background:linear-gradient(135deg, color-mix(in srgb, var(--nav-bg) 82%, transparent) 0%, color-mix(in srgb, var(--nav-bg) 88%, transparent) 100%);
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 8px 30px -12px rgba(0,0,0,.55);
}

/* --- controlos ----------------------------------------------------- */
.btn-primary{
  border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #fff), var(--blue));
  box-shadow:0 6px 18px -8px rgba(16,26,61,.75), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{background:linear-gradient(180deg, #22346a, #131f47)}
.btn-secondary,
.crm-btn{
  border-radius:999px;
  background:var(--vidro);
  border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
}
.btn-secondary:hover,.crm-btn:hover{background:var(--sup-fundo)}
.crm-btn-forte{
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #fff), var(--blue));
  color:var(--on-blue);border-color:transparent;
  box-shadow:0 4px 12px -6px color-mix(in srgb, var(--ink) 55%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent)}
.crm-btn-forte:hover{background:color-mix(in srgb, var(--blue) 86%, #000)}

.input{
  border-radius:12px;
  background:var(--sup-fundo);
  border:1px solid var(--vidro-linha);
  box-shadow:var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
}
.input:focus{background:color-mix(in srgb, var(--card) 94%, transparent);border-color:color-mix(in srgb, var(--ink) 35%, transparent)}

.badge,.crm-pill,.crm-tag{
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
}
.crm-tag{background:var(--sup-fundo);border-color:var(--vidro-borda)}

.toast{
  border-radius:16px;
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
  box-shadow:0 14px 36px -14px rgba(0,0,0,.5), var(--vidro-brilho);
}

/* --- painel lateral ------------------------------------------------ */
.crm-painel-caixa{
  background:var(--sup-fundo);
  border-left:1px solid var(--vidro-borda);
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
}
.crm-painel-fundo{background:color-mix(in srgb, var(--nav-bg) 28%, transparent);backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);border-radius:999px}

/* --- sem suporte para desfoque: tudo sólido, nada se perde --------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .stat-tile,.card,.product-card,.fab-card,.crm-card,.chart-box,
  .crm-painel-caixa,.toast,.btn-secondary,.crm-btn,.input{background:var(--card)}
  .crm-col{background:var(--bg)}
  .brand-header{background:linear-gradient(135deg, color-mix(in srgb, var(--nav-bg) 88%, #fff) 0%, var(--nav-bg) 100%)}
}

/* --- seguro de crédito por fabricante ------------------------------ */
.marcas-lista{display:flex;flex-direction:column;gap:.5rem}
.marca-bloco{border:1px solid var(--vidro-linha);border-radius:14px;padding:.6rem .75rem;
  background:var(--sup-fundo);transition:background .15s ease,border-color .15s ease}
.marca-bloco.is-on{background:var(--sup-fundo);border-color:var(--vidro-borda);
  box-shadow:var(--vidro-brilho)}
.marca-cab{display:flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:600;
  color:var(--ink);cursor:pointer}
.marca-regime{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;
  margin-top:.6rem;padding-top:.6rem;border-top:1px dashed color-mix(in srgb, var(--ink) 14%, transparent)}
.marca-campo{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--ink-3)}
.marca-campo-larga{grid-column:1/-1}
.marca-campo select,.marca-campo input{border:1px solid var(--vidro-linha);border-radius:9px;
  padding:.32rem .5rem;font-size:.85rem;background:var(--sup-fundo);color:var(--ink)}
.marca-campo select:focus,.marca-campo input:focus{outline:none;border-color:color-mix(in srgb, var(--ink) 35%, transparent);
  box-shadow:0 0 0 3px rgba(16,26,61,.1)}
@media (max-width:560px){.marca-regime{grid-template-columns:1fr 1fr}}

/* --- Como o cliente paga -------------------------------------------
   Três estados, nunca quatro: medido com o validador de paletas, um
   amarelo e um laranja lado a lado ficam indistinguíveis mesmo para quem
   vê todas as cores — e para quem não vê é pior. O atraso em dias é um
   número à parte, em laranja, que explica o estado em vez de o repetir.
   A cor nunca vai sozinha: leva sempre o nome escrito ao lado. */
.pg-bom   { --pg:#157347; --pg-tinta:#0f5c38; }
.pg-medio { --pg:#D0A215; --pg-tinta:#8a6a00; }
.pg-mau   { --pg:#A31B14; --pg-tinta:#8d1610; }
.pg-nd    { --pg:#94A3B8; --pg-tinta:#64748b; }

.pg-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:700;
  color:var(--pg-tinta);background:color-mix(in srgb,var(--pg) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--pg) 38%,transparent);
  border-radius:999px;padding:.16rem .6rem;white-space:nowrap}
.pg-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pg);flex:0 0 8px}
.pg-atraso{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;
  color:#a04f14;background:color-mix(in srgb, var(--acc2) 12%, transparent);border:1px solid color-mix(in srgb, var(--acc2) 40%, transparent);
  border-radius:999px;padding:.14rem .55rem;white-space:nowrap}

/* escolha do estado na ficha */
.pg-escolha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.pg-op{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  border:1.5px solid var(--vidro-linha);border-radius:14px;padding:.7rem .5rem;cursor:pointer;
  background:var(--sup-fundo);text-align:center;transition:border-color .15s ease,background .15s ease}
.pg-op input{position:absolute;opacity:0;pointer-events:none}
.pg-op-ponto{width:14px;height:14px;border-radius:50%;background:var(--pg);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pg) 18%,transparent)}
.pg-op-nome{font-size:.82rem;font-weight:700;color:var(--ink)}
.pg-op-desc{font-size:.68rem;color:var(--ink-3);line-height:1.3}
.pg-op:has(input:checked){border-color:var(--pg);background:color-mix(in srgb,var(--pg) 9%,#fff)}
.pg-op:has(input:focus-visible){outline:2px solid var(--pg);outline-offset:2px}

/* a barra da distribuição: partes de um todo, com os números escritos */
.pg-barra{display:flex;gap:2px;height:12px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb, var(--nav-bg) 6%, transparent);margin:.55rem 0 .5rem}
.pg-barra span{display:block;height:100%;background:var(--pg)}
.pg-legenda{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.76rem;color:var(--ink-2)}
.pg-legenda i{display:inline-flex;align-items:center;gap:.35rem;font-style:normal}
.pg-legenda i::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--pg)}
.pg-legenda b{font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:560px){.pg-escolha{grid-template-columns:1fr}}

/* --- A barra de topo do CRM: todos os controlos da mesma família -----
   Caixa de procura, listas de escolha e botões tinham alturas, cantos e
   feitios diferentes — cada um herdado de um sítio. Aqui passam todos a
   ter a MESMA altura, o MESMO canto e o MESMO tamanho de letra.
   O que continua a distinguir-se é só a ênfase: o botão principal é
   cheio, os outros são de vidro. Homogéneo não quer dizer indistinto. */
.crm-acoes{align-items:center;gap:.5rem}
.crm-acoes .input,
.crm-acoes select,
.crm-acoes .btn-primary,
.crm-acoes .btn-secondary,
.crm-acoes .crm-btn,
.crm-acoes .crm-check,
.crm-acoes .crm-ctrl{
  height:38px;
  min-height:38px;
  border-radius:12px;
  padding:0 .85rem;
  font-size:.85rem;
  font-weight:600;
  line-height:1;
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
  margin:0;
}
.crm-acoes .input,
.crm-acoes select{font-weight:500;color:var(--ink)}
.crm-acoes select{
  appearance:none;-webkit-appearance:none;
  padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
}
.crm-acoes .btn-primary{border:1px solid transparent}
/* larguras fixas, para a barra não dançar quando o texto muda */
.crm-busca{width:14rem}
.crm-sel{width:12rem}
.crm-sel-curta{width:10rem}
@media (max-width:720px){
  .crm-acoes{width:100%}
  .crm-busca,.crm-sel,.crm-sel-curta{flex:1 1 10rem;width:auto;min-width:0}
}

/* caixa de seleção («ver fechados») com o mesmo corpo dos restantes */
.crm-acoes .crm-check{
  gap:.5rem;color:var(--ink-2);
  background:var(--vidro);border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-brilho);cursor:pointer;
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
}
.crm-acoes .crm-check input{margin:0;accent-color:#101a3d}

/* Quando esta tudo em ordem nao ha nada a carregar: o aviso verde passa a
   ser uma nota na mesma linha do resto, e nao uma caixa que parece um botao
   pequeno perdido por baixo do titulo. */
.crm-nota{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;font-weight:600;color:var(--crm-ok);
  height:26px;line-height:1;
}
.crm-nota::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* --- os avisos, na mesma linguagem dos controlos -------------------- */
.crm-avisos{gap:.4rem;margin-top:.55rem}
.crm-pill,.pg-chip,.pg-atraso{
  border-radius:10px;
  height:26px;
  padding:0 .6rem;
  line-height:1;
}
.crm-tag{border-radius:8px;padding:.15rem .5rem}

/* --- A página de entrar ---------------------------------------------
   Tinha só um gradiente liso. Passa a ter o mesmo material da entrada da
   equipa: a grelha fina, os brilhos que se movem devagar e a caixa do
   formulário em vidro. É a primeira coisa que se vê todos os dias — e a
   única que um cliente vê antes de entrar no portal dele. */
.login-page{overflow:hidden}
.login-page::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 85% at 50% 35%, #000 25%, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 85% at 50% 35%, #000 25%, transparent 80%);
}
.login-page::after{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, color-mix(in srgb, var(--acc2) 34%, transparent), transparent 62%),
    radial-gradient(34vmax 34vmax at 92% 22%, color-mix(in srgb, var(--acc2) 26%, transparent), transparent 64%),
    radial-gradient(40vmax 40vmax at 60% 104%, color-mix(in srgb, var(--blue) 28%, transparent), transparent 66%);
  filter:blur(30px);
  animation:loginDeriva 34s ease-in-out infinite alternate;
}
@keyframes loginDeriva{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-3vmax,3vmax,0) scale(1.1)}
}
@media (prefers-reduced-motion:reduce){.login-page::after{animation:none}}
/* o conteúdo fica por cima das camadas decorativas */
.login-page > *{position:relative;z-index:1}

.login-form-card{
  background:var(--sup-fundo)!important;
  border:1px solid color-mix(in srgb, var(--card) 60%, transparent);
  border-radius:22px;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
}
.login-video-box{border-radius:var(--raio);overflow:hidden;
  box-shadow:var(--ve-brilho),var(--ve-sombra)}
.login-contact-item{
  background:color-mix(in srgb, var(--card) 8%, transparent);border:1px solid color-mix(in srgb, var(--card) 16%, transparent);
  border-radius:999px;padding:.22rem .7rem;
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .login-form-card{background:var(--card)!important}
}

/* --- A loja do cliente ---------------------------------------------
   Pensada para quem encomenda de telemóvel, de pé num armazém: linhas
   altas, quantidade sempre visível, e o total colado ao fundo do ecrã. */
.loja-grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.9rem}
.loja-marca{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
  background:var(--vidro-forte);border:1px solid var(--vidro-borda);border-radius:18px;
  padding:1.1rem .8rem;cursor:pointer;box-shadow:var(--vidro-sombra),var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.loja-marca:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cor) 50%,transparent);
  box-shadow:0 18px 40px -18px rgba(16,26,61,.5),var(--vidro-brilho)}
.loja-marca:focus-visible{outline:2px solid var(--cor);outline-offset:3px}
.loja-marca-logo{width:4.6rem;height:4.6rem;border-radius:14px;overflow:hidden;background:var(--card);
  border:1px solid var(--vidro-linha);display:flex;align-items:center;justify-content:center;padding:.4rem}
.loja-marca-logo img{max-width:100%;max-height:100%;object-fit:contain}
.loja-marca-inicial{font-size:1.6rem;font-weight:800;color:var(--cor)}
.loja-marca-nome{font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.2}
.loja-marca-meta{font-size:.72rem;color:var(--ink-3)}

.loja-cab{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.9rem;
  padding-bottom:.7rem;border-bottom:2px solid var(--cor)}
.loja-cab h3{font-size:1.15rem;font-weight:700;color:var(--ink);margin:0}
.loja-cab-n{font-size:.78rem;color:var(--ink-3);margin-left:auto}
.loja-filtros{display:flex;flex-wrap:wrap;margin-bottom:.9rem}

.loja-lista{display:flex;flex-direction:column;gap:.4rem;padding-bottom:5.5rem}
.loja-prod{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.9rem;
  background:var(--vidro-forte);border:1px solid var(--vidro-borda);border-radius:14px;
  padding:.65rem .85rem;box-shadow:var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);background:rgba(240,253,246,.9)}
.loja-prod-info{min-width:0}
.loja-prod-nome{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.25}
.loja-prod-meta{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.72rem;color:var(--ink-3);margin-top:.15rem}
.loja-ficha{font-size:.72rem;color:var(--ink);text-decoration:underline;background:none;border:none;
  padding:0;cursor:pointer}
.loja-prod-preco{font-size:.88rem;font-weight:700;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.loja-prod-qtd{display:flex;align-items:center;gap:.25rem}
.loja-qtd{width:3.6rem;height:38px;text-align:center;border:1px solid var(--vidro-linha);
  border-radius:10px;background:var(--card);font-size:.95rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.loja-qtd:focus{outline:none;border-color:color-mix(in srgb, var(--ink) 40%, transparent);box-shadow:0 0 0 3px rgba(16,26,61,.1)}
.loja-qtd-btn{width:34px;height:38px;border-radius:10px;border:1px solid var(--vidro-linha);
  background:var(--sup-fundo);font-size:1.1rem;font-weight:700;color:var(--ink);cursor:pointer;
  line-height:1}
.loja-qtd-btn:hover{background:var(--card)}
.loja-vazio{font-size:.9rem;color:var(--ink-3);padding:2rem 0;text-align:center}

/* a barra do carrinho, colada ao fundo */
.loja-barra{position:fixed;left:50%;transform:translateX(-50%) translateY(150%);bottom:1rem;
  z-index:25;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;
  width:min(46rem,calc(100% - 2rem));padding:.7rem .9rem;border-radius:16px;
  background:var(--sup-fundo);border:1px solid var(--vidro-borda);
  box-shadow:0 18px 44px -18px rgba(16,26,61,.6),var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.loja-barra.is-on{transform:translateX(-50%) translateY(0)}
.loja-barra-info{font-size:.85rem;color:var(--ink-2)}
.loja-barra-total{font-weight:700;color:var(--ink);margin-left:.5rem;font-variant-numeric:tabular-nums}
.loja-barra-acoes{display:flex;gap:.5rem;align-items:center}
.loja-barra-acoes .btn-primary,.loja-barra-acoes .crm-btn{height:38px;border-radius:12px;
  padding:0 1rem;display:inline-flex;align-items:center;font-size:.85rem;font-weight:600}

.loja-rever-lista{display:flex;flex-direction:column;gap:.4rem;max-height:38vh;overflow-y:auto}
.loja-rever-linha{display:grid;grid-template-columns:1fr auto auto;gap:.7rem;align-items:center;
  padding:.5rem .6rem;border:1px solid var(--vidro-linha);border-radius:12px;background:var(--sup-fundo)}
.loja-rever-q{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.loja-rever-v{font-size:.85rem;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.loja-rever-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.8rem;
  padding-top:.7rem;border-top:1px solid var(--vidro-linha);font-size:1.05rem;color:var(--ink)}
.loja-nota{font-size:.76rem;color:var(--ink-3);line-height:1.45;margin-top:.7rem}

@media (max-width:620px){
  .loja-prod{grid-template-columns:1fr auto;grid-template-areas:"info preco" "qtd qtd";row-gap:.5rem}
  .loja-prod-info{grid-area:info}.loja-prod-preco{grid-area:preco}
  .loja-prod-qtd{grid-area:qtd;justify-content:flex-end}
  .loja-qtd{width:4.5rem;height:42px}.loja-qtd-btn{width:42px;height:42px}
}

/* ===================================================================
   ÁREA DO CLIENTE — a montra
   ===================================================================
   As páginas internas são ferramentas: densas, rápidas, sem cerimónia.
   Esta é outra coisa. É a primeira sala da casa, e quem entra é quem nos
   paga o volume. Por isso tem MAIS cuidado do que as nossas, e não menos:
   mais ar, cartões maiores, vidro com mais profundidade, e as marcas em
   destaque logo à entrada — sem um botão a dizer "encomendar" antes de
   mostrar o que há para encomendar. */

.cli{position:relative;isolation:isolate;padding-bottom:2rem;overflow:hidden}
.cli-carregar{text-align:center;padding:5rem 0;color:var(--ink-3)}

/* manchas de cor por trás do vidro, para ele ter o que apanhar */
.cli-fundo{position:absolute;inset:-10% -20% auto;height:70vh;z-index:-1;pointer-events:none;overflow:hidden}
.cli-bolha{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.cli-bolha-a{width:34vmax;height:34vmax;left:-6vmax;top:-10vmax;
  background:radial-gradient(circle,color-mix(in srgb, var(--acc2) 50%, transparent),transparent 68%)}
.cli-bolha-b{width:30vmax;height:30vmax;right:-4vmax;top:-4vmax;
  background:radial-gradient(circle,color-mix(in srgb, var(--acc2) 42%, transparent),transparent 68%)}

/* --- boas-vindas --------------------------------------------------- */
.cli-hero{padding:2.5rem 0 1.6rem;max-width:44rem}
.cli-eyebrow{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#8a6a1a;
  font-weight:700;margin:0 0 .7rem}
.cli-hero h1{font-size:clamp(1.8rem,4.6vw,2.7rem);font-weight:700;letter-spacing:-.025em;
  color:var(--ink);margin:0 0 .6rem;line-height:1.06;text-wrap:balance}
.cli-lead{font-size:clamp(1rem,2vw,1.12rem);color:var(--ink-2);line-height:1.55;margin:0;max-width:36rem}

/* --- os três atalhos ----------------------------------------------- */
.cli-acessos{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem;
  margin:0 0 2.6rem}
.cli-acesso{display:flex;align-items:center;gap:.9rem;text-decoration:none;
  background:var(--sup-fundo);border:1px solid var(--vidro-borda);border-radius:18px;
  padding:1rem 1.1rem;box-shadow:var(--vidro-sombra),var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,border-color .18s ease}
.cli-acesso:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cor) 45%,transparent);
  box-shadow:0 22px 46px -22px rgba(16,26,61,.55),var(--vidro-brilho)}
.cli-acesso:focus-visible{outline:2px solid var(--cor);outline-offset:3px}
.cli-acesso-icone{width:2.9rem;height:2.9rem;border-radius:14px;flex:0 0 2.9rem;
  display:flex;align-items:center;justify-content:center;color:var(--on-blue);
  background:linear-gradient(150deg,var(--cor),color-mix(in srgb,var(--cor) 62%,#101a3d));
  box-shadow:0 8px 20px -10px var(--cor)}
.cli-acesso-icone i{width:20px;height:20px}
.cli-acesso-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cli-acesso-txt strong{font-size:.98rem;color:var(--ink);font-weight:700;line-height:1.2}
.cli-acesso-txt span{font-size:.8rem;color:var(--ink-3);line-height:1.3}
.cli-acesso-seta{margin-left:auto;color:var(--ink-3);width:18px;height:18px;flex:0 0 18px}

/* --- as representadas ---------------------------------------------- */
.cli-seccao-cab{margin-bottom:1.1rem}
.cli-seccao-cab h2{font-size:1.35rem;font-weight:700;color:var(--ink);margin:0 0 .25rem;
  letter-spacing:-.015em}
.cli-seccao-cab p{font-size:.9rem;color:var(--ink-3);margin:0;max-width:38rem}

/* A GRELHA ARRUMA-SE SOZINHA, SEJAM DUAS MARCAS OU CATORZE.
   «A Eurosclat só vai ter acesso a dois, o mel e os frutos secos. Vão ficar
   duas janelas, ou aumenta ou diminui, mas só aparecem aquelas duas.»

   Estava em auto-fill: com duas marcas num ecrã largo, o browser criava
   cinco colunas na mesma e deixava três vazias — dois cartões encostados à
   esquerda e um deserto à direita. Parecia avaria, não parecia escolha.

   Três coisas, e são precisas as três:

     auto-fit  — deita fora as colunas que ficariam vazias. Sem isto, o
                 browser reservava-as e o deserto ficava lá na mesma.
     tecto 22rem — duas marcas num ecrã de 27 polegadas não podem virar
                 dois cartazes de meio metro. O cartão tem um tamanho certo
                 e mantém-no.
     center    — e é esta a que ele pediu: «não há forma de aquilo se
                 agrupar ao centro? Se forem quatro, as quatro em cima ao
                 centro». Encostadas à esquerda, duas marcas continuam a
                 parecer uma página por acabar. Ao centro, parecem uma
                 página feita para duas. */
.cli-marcas{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,22rem));
  gap:1.15rem;justify-content:center}
/* Alinhamento: a grelha estica todos os cartões à mesma altura, o logótipo
   tem sempre a mesma caixa (independentemente do formato do ficheiro) e o
   rodapé é empurrado para baixo. Era isto que estava desalinhado. */
.cli-marca{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;
  text-decoration:none;border-radius:20px;padding:1.2rem 1.1rem 1rem;
  background:var(--sup-fundo);border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-sombra),var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease}
.cli-marca:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--cor) 50%,transparent);
  box-shadow:0 28px 56px -24px rgba(16,26,61,.6),var(--vidro-brilho)}
.cli-marca:focus-visible{outline:2px solid var(--cor);outline-offset:3px}
/* um halo da cor da casa, que acende ao passar */
.cli-marca-brilho{position:absolute;inset:-40% -30% auto;height:70%;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--cor) 40%,transparent),transparent 68%);
  opacity:.35;transition:opacity .2s ease}
.cli-marca:hover .cli-marca-brilho{opacity:.75}
/* O logotipo, SEM caixa por baixo.
   Tinha uma placa branca com moldura e sombra — um rectangulo dentro de um
   cartao que ja era branco. Duas caixas encaixadas uma na outra, e a de dentro
   nao acrescentava nada: so punha uma moldura a volta de um desenho que ja
   tem a sua forma. O cartao e a caixa; o logotipo pousa nele.
   E o tamanho passa a ter as mesmas duas travas dos Fabricantes, incluindo o
   ajuste por marca (--esc): sem elas o desenho enchia o espaco todo. */
/* NOTA (11 set): a placa branca destes logotipos era pintada em TRES sitios
   diferentes — a regra base, um ::before e um ::after. Tirei os dois
   primeiros e dei o assunto por fechado; o ::after continuou a pintar e o
   cartao ficou exactamente como estava. Antes de dizer que uma placa
   desapareceu, procurar a classe em TODO o ficheiro, nao so onde se mexeu. */
.cli-marca-logo{position:relative;flex:0 0 auto;height:7.4rem;display:flex;align-items:center;justify-content:center;
  padding:.4rem;margin-bottom:.7rem;background:none;border:0;box-shadow:none}
.cli-marca-logo img{max-width:calc(72% * var(--esc,1));max-height:calc(66% * var(--esc,1));
  object-fit:contain;display:block;border-radius:8px}
.cli-marca-inicial{font-size:2rem;font-weight:800;color:var(--cor)}
/* O corpo do cartão não pode encolher até zero: com o logótipo maior, o
   flex:1 com min-height:0 fazia-o colapsar e o texto saía por cima do
   rodapé (país / nº de referências). */
.cli-marca-corpo{position:relative;flex:1 1 auto;min-height:3.1rem}
.cli-marca-nome{display:block;font-size:1rem;font-weight:700;color:var(--ink);line-height:1.25;
  letter-spacing:-.01em}
.cli-marca-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.8rem;color:var(--ink-3);line-height:1.4;margin-top:.25rem}
.cli-marca-pe{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--vidro-linha)}
.cli-marca-pais{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cor)}
.cli-marca-refs{font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

.cli-rodape{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--vidro-linha);
  font-size:.85rem;color:var(--ink-3)}
.cli-rodape a{color:var(--ink);font-weight:600;text-decoration:none}
.cli-rodape a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .cli-acesso,.cli-marca{transition:none}
  .cli-acesso:hover,.cli-marca:hover{transform:none}
}
@media (max-width:640px){
  .cli-hero{padding-top:1.6rem}
  .cli-marcas{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:.85rem;justify-content:stretch}
  .cli-marca-logo{height:5.8rem}
}

/* --- O catálogo quando é o cliente a usá-lo -------------------------
   O mesmo catálogo, o mesmo código, as mesmas regras de caixas e paletes.
   Muda o material: aqui é montra, e uma montra trata-se melhor do que uma
   bancada de trabalho. */
.cli-cat .stat-tile{border-radius:20px}
.cli-cat-cab{position:relative;display:flex;align-items:center;gap:1.1rem;overflow:hidden;
  border-radius:22px;padding:1.3rem 1.4rem;margin-bottom:1.2rem;
  background:var(--sup-fundo);border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-sombra),var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.cli-cat-brilho{position:absolute;inset:-60% 40% auto -10%;height:200%;pointer-events:none;
  background:radial-gradient(circle at 20% 50%,color-mix(in srgb,var(--cor) 42%,transparent),transparent 62%);
  opacity:.5}
.cli-cat-logo{position:relative;width:8.5rem;height:8.5rem;flex:0 0 8.5rem;background:color-mix(in srgb, var(--card) 94%, transparent);
  border:1px solid var(--vidro-linha);border-radius:20px;padding:.8rem;
  box-shadow:inset 0 1px 0 #fff,0 8px 22px -14px rgba(16,26,61,.55);
  display:flex;align-items:center;justify-content:center}
.cli-cat-txt{position:relative;min-width:0}
.cli-cat-txt h1{font-size:clamp(1.3rem,3vw,1.75rem);font-weight:700;color:var(--ink);margin:0;
  letter-spacing:-.02em;line-height:1.15}
.cli-cat-txt p{font-size:.8rem;color:var(--ink-3);margin:.2rem 0 0}
.cli-cat-desc{font-size:.85rem!important;color:var(--ink-2)!important;margin-top:.4rem!important;
  max-width:40rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cli-cat-entrega{grid-template-columns:2fr 1fr!important}
@media (max-width:640px){.cli-cat-entrega{grid-template-columns:1fr!important}
  .cli-cat-cab{gap:.8rem;padding:1rem}.cli-cat-logo{width:6.2rem;height:6.2rem;flex-basis:6.2rem}}

/* os cartões de produto passam a vidro, com a imagem a respirar mais */
.cli-cat .product-card{
  background:var(--sup-fundo)!important;border:1px solid var(--vidro-borda)!important;
  border-radius:18px!important;box-shadow:var(--vidro-sombra),var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  box-shadow:0 26px 50px -24px rgba(16,26,61,.55),var(--vidro-brilho)}
.cli-cat .product-card img{transition:transform .25s ease}
.cli-cat .product-card:hover img{transform:scale(1.04)}

/* a barra do carrinho, a flutuar em vez de colada à borda */
.cli-cat #cart-bar{
  background:var(--sup-fundo)!important;border:1px solid var(--vidro-borda)!important;
  border-radius:18px;left:1rem;right:1rem;bottom:1rem;
  box-shadow:0 20px 46px -20px rgba(16,26,61,.6),var(--vidro-brilho)!important;
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.cli-cat #cart-bar > div{padding-left:1rem!important;padding-right:1rem!important}

@media (prefers-reduced-motion:reduce){
  .cli-cat .product-card,.cli-cat .product-card img{transition:none}
  .cli-cat .product-card:hover{transform:none}
  .cli-cat .product-card:hover img{transform:none}
}

/* ---------- Fiadas: o erro visto de longe -----------------------------
   A mensagem sozinha não chegava: aparecia e desaparecia, e quem está a
   fazer a encomenda no telemóvel não a conseguia ler a tempo de perceber
   QUAIS os produtos. Passam a ser três coisas ao mesmo tempo — o cartão
   pintado (vê-se a varrer a grelha com os olhos), o selo com o que falta
   em concreto, e um painel que fica aberto até estar tudo certo. A cor
   nunca vai sozinha: leva sempre ícone e texto, para quem não distingue
   vermelho de verde. */
.cat-selo{display:inline-flex;align-items:flex-start;gap:4px;width:fit-content;
  font-size:10px;font-weight:700;border-radius:9999px;padding:3px 9px;border:1px solid}
.cat-selo svg{flex:0 0 auto;margin-top:2px}
.cat-selo-ok{color:var(--ok-ink);background:#e9f8f1;border-color:#8fd9bd}
.cat-selo-erro{color:var(--erro-ink);background:#fef3f2;border-color:#f3a49e;
  font-size:10px;line-height:1.35;white-space:normal;text-align:left}

.card-fiada-erro{border-color:#f0736a!important;box-shadow:0 0 0 2px rgba(224,82,82,.28),0 10px 24px -18px rgba(180,35,24,.5)!important;
  background:linear-gradient(180deg,#fff 0%,#fff6f5 100%)!important}
.card-fiada-erro .cat-selo-erro{background:var(--erro-bg)}

/* O painel vive dentro da barra do carrinho: fica sempre por cima do botão
   Enviar, que é onde a pessoa está a olhar quando carrega. */
.aviso-enc{border:1px solid #f3a49e;border-left:5px solid #d92d20;background:#fef3f2;
  border-radius:14px;padding:12px 14px;margin:10px 0 0;
  max-height:38vh;overflow:auto;animation:aviso-enc-entra .22s ease-out}
@keyframes aviso-enc-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.aviso-enc-topo{display:flex;align-items:center;gap:8px}
.aviso-enc-icone{width:22px;height:22px;color:var(--erro-ink);flex:0 0 auto}
.aviso-enc-titulo{font-size:17px;font-weight:800;color:var(--erro-ink);line-height:1.2;flex:1}
.aviso-enc-x{width:30px;height:30px;border-radius:9999px;display:flex;align-items:center;justify-content:center;
  color:var(--erro-ink);background:rgba(217,45,32,.08);border:0;cursor:pointer;flex:0 0 auto}
.aviso-enc-x:hover{background:rgba(217,45,32,.16)}
.aviso-enc-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.aviso-enc-item{display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid #fbd5d1;border-radius:10px;padding:8px 10px}
.aviso-enc-txt{flex:1;min-width:0}
.aviso-enc-nome{font-size:15px;font-weight:700;color:#7a271a}
.aviso-enc-det{font-size:14px;color:var(--erro-ink);font-weight:600}
.aviso-enc-ver{margin-left:auto;font-size:13px;font-weight:700;color:var(--on-blue);background:#d92d20;
  border:0;border-radius:8px;padding:5px 12px;cursor:pointer}
.aviso-enc-ver:hover{background:#b42318}
.aviso-enc-pe{font-size:13px;color:#7a271a;margin-top:8px;font-weight:600}

/* No telemóvel e no tablet, onde a encomenda é mesmo feita, tudo maior. */
@media (max-width:640px){
  .aviso-enc{max-height:46vh;padding:14px}
  .aviso-enc-titulo{font-size:19px}
  .aviso-enc-nome{font-size:16px;display:block}
  .aviso-enc-det{font-size:15px}
  .aviso-enc-ver{font-size:14px;padding:7px 14px}
  .cat-selo-erro{font-size:11px}
}

/* Área do cliente: o mesmo aviso, no vidro. */
.cli-cat .aviso-enc{background:rgba(254,243,242,.92);border-color:rgba(217,45,32,.35);
  border-left-color:#d92d20;box-shadow:0 18px 40px -24px rgba(180,35,24,.7);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)!important;
  background:linear-gradient(180deg,color-mix(in srgb, var(--card) 90%, transparent) 0%,rgba(254,228,226,.85) 100%)!important;
  box-shadow:0 0 0 2px rgba(217,45,32,.3),0 24px 46px -26px rgba(180,35,24,.65)!important}

@media (prefers-reduced-motion:reduce){
  .aviso-enc{animation:none}
}

/* ---------- "O meu catálogo": o ecrã do cliente ----------------------
   O mesmo documento que a nossa equipa gera para ele, agora gerado por ele
   para a equipa comercial dele. Vive na área do cliente, por isso segue o
   mesmo vidro do resto dessa área. */
.cc-caixa{background:color-mix(in srgb, var(--card) 92%, transparent);border:1px solid var(--vidro-borda,color-mix(in srgb, var(--card) 60%, transparent));
  border-radius:20px;width:100%;max-width:30rem;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(16,26,61,.65);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.cc-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
.cc-titulo{font-size:15px;font-weight:800;color:var(--ink);margin:0}
.cc-sub{font-size:12px;color:var(--ink-3);margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-x{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);background:transparent;border:0;cursor:pointer}
.cc-x:hover{background:color-mix(in srgb, var(--nav-bg) 6%, transparent);color:var(--ink)}
.cc-corpo{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:16px}
.cc-nota{font-size:12px;color:var(--ink-3);margin:0;line-height:1.5}
.cc-lbl{display:block;font-size:12px;font-weight:600;color:#4b5563;margin-bottom:5px}
.cc-ajuda{font-size:11px;color:#9aa1ae;margin-top:5px;line-height:1.45}
.cc-logo{width:64px;height:64px;border-radius:12px;border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background:rgba(246,247,251,.9);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.cc-pe{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:12px 20px;border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
@media (max-width:640px){
  .cc-caixa{max-height:94vh}
  .cc-corpo{padding:14px 16px}
  .cc-titulo{font-size:16px}
}

/* Painel da última encomenda, em "As minhas encomendas": é onde o cliente
   cai assim que envia uma encomenda, e era onde o catálogo não se via — a
   coluna da tabela ficava fora do ecrã em telemóveis e portáteis. */
.ult-enc{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);border-radius:16px;padding:14px 16px;margin-bottom:12px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--nav-bg) 5%, transparent) 0%,color-mix(in srgb, var(--nav-bg) 2%, transparent) 100%)}
.ult-enc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ult-enc-rot{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.ult-enc-num{font-size:15px;font-weight:700;color:var(--ink)}
.ult-enc-sub{font-size:12px;color:var(--ink-3);line-height:1.45}
@media (max-width:640px){
  .ult-enc{flex-direction:column;align-items:stretch}
  .ult-enc button{width:100%}
}

/* A confirmação depois de enviar a encomenda, com a oferta do catálogo. */
.oe-certo{width:52px;height:52px;border-radius:9999px;margin:4px auto 2px;display:flex;align-items:center;justify-content:center;
  background:#e9f8f1;color:var(--ok-ink);border:1px solid #8fd9bd}
.oe-titulo{font-size:17px;font-weight:800;color:var(--ink);margin:0}
.oe-txt{font-size:13px;color:#5b6474;margin:0;line-height:1.5}

/* ======================================================================
   O VIDRO — AGORA EM TODO O PORTAL
   ----------------------------------------------------------------------
   Nasceu na área do cliente, foi aprovado, e passa agora também ao portal
   da administração e ao CRM. São três coisas, sempre as mesmas: luz a
   correr por baixo da página, superfícies que deixam passar a cor, e um
   bordo que apanha a luz em cima e a devolve mais escura em baixo.

   O que NÃO se mexe: o cabeçalho do portal interno (logótipo na caixa,
   nome da área, versão) fica exatamente como está — foi por aí que já
   estraguei uma vez. O logótipo maior e sem moldura continua a ser só do
   lado do cliente.
   ====================================================================== */

/* --- o cabeçalho do cliente: logótipo inteiro, sem caixa nem aro ----- */
.area-cliente .marca-logo{display:flex;align-items:center;height:3.4rem;flex:0 0 auto}
.area-cliente .marca-logo img{height:100%;width:auto;max-width:13rem;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.area-cliente .marca-inicial{display:flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;
  border-radius:14px;background:color-mix(in srgb, var(--card) 95%, transparent);color:var(--ink);font-weight:800;font-size:1.4rem}
@media (max-width:640px){
  .area-cliente .marca-logo{height:2.7rem}
  .area-cliente .marca-logo img{max-width:9.5rem}
}

/* --- a cor por baixo do vidro ---------------------------------------
   AQUI e que se decide o chao do portal, e nao na regra do "body" la em
   cima no ficheiro — esta vem depois e ganha. Perdi um bom bocado a mudar
   a de cima e a nao ver diferenca nenhuma no ecra; fica escrito para a
   proxima pessoa nao repetir.

   A base era #eef1f8: um cinzento AZULADO, da mesma familia do azul-marinho
   da marca. Passa a um off-white QUENTE. Nao e moda: quem passa uma hora na
   Saude do Catalogo esta a olhar para mil e tal linhas sobre este fundo, e um
   branco frio cansa mais depressa a vista. E o quente da-se melhor com o
   dourado da casa.

   As manchas de luz continuam as mesmas cinco, na mesma posicao — so se
   inverteu o peso: o dourado e o terracota (as cores da casa) sobem, o azul e
   o roxo descem. Antes o azul ao centro competia com o proprio conteudo. */
body{background:var(--bg)}
body::before{
  background:
    radial-gradient(48vmax 48vmax at 4% -6%, color-mix(in srgb, var(--acc2) 56%, transparent), transparent 62%),
    radial-gradient(44vmax 44vmax at 102% 2%, color-mix(in srgb, var(--acc2) 48%, transparent), transparent 62%),
    radial-gradient(46vmax 46vmax at 26% 46%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 60%),
    radial-gradient(42vmax 42vmax at 88% 58%, rgba(126,84,196,.14), transparent 62%),
    radial-gradient(52vmax 52vmax at 54% 106%, rgba(21,140,120,.22), transparent 62%);
}
/* as curvas de luz — a "água" que se vê através das caixas */
body::after{
  content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;opacity:.85;
  background:
    radial-gradient(closest-side at 22% 28%, color-mix(in srgb, var(--card) 75%, transparent), transparent 72%),
    conic-gradient(from 200deg at 58% 34%,
      rgba(126,164,255,.34) 0deg, color-mix(in srgb, var(--card) 0%, transparent) 70deg,
      rgba(186,140,255,.30) 140deg, color-mix(in srgb, var(--card) 0%, transparent) 210deg,
      color-mix(in srgb, var(--blue) 30%, transparent) 280deg, color-mix(in srgb, var(--card) 0%, transparent) 360deg);
  filter:blur(30px);
}
.brand-header{
  background:linear-gradient(135deg, color-mix(in srgb, var(--nav-bg) 82%, transparent) 0%, color-mix(in srgb, var(--nav-bg) 88%, transparent) 100%);
  backdrop-filter:var(--sup-desfoque);
  -webkit-backdrop-filter:var(--sup-desfoque);
}

/* --- as superfícies -------------------------------------------------- */
.stat-tile,.card,.product-card,.chart-box,.fab-card,.crm-card,
.cli-marca,.cli-acesso,.cli-cat-cab{
  background:var(--sup-fundo)!important;
  border:1px solid var(--sup-borda)!important;
  box-shadow:var(--sup-sombra),var(--sup-brilho)!important;
  backdrop-filter:var(--sup-desfoque)!important;
  -webkit-backdrop-filter:var(--sup-desfoque)!important;
}
/* as pistas do quadro do CRM ficam mais leves, para os cartões flutuarem */
.crm-col{
  background:color-mix(in srgb, var(--card) 34%, transparent)!important;
  border:1px solid color-mix(in srgb, var(--card) 75%, transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important;
  backdrop-filter:var(--sup-desfoque)!important;
  -webkit-backdrop-filter:var(--sup-desfoque)!important;
}
.cli-cat .product-card{background:var(--sup-fundo)!important}
.cli-cat #cart-bar{background:var(--sup-fundo)!important;
  backdrop-filter:var(--sup-desfoque)!important;-webkit-backdrop-filter:var(--sup-desfoque)!important}

/* o brilho inclinado no bordo de cima */
.stat-tile,.card,.product-card,.chart-box,.fab-card,.crm-card,
.cli-marca,.cli-acesso,.cli-cat-cab{position:relative;isolation:isolate;overflow:hidden}
.stat-tile::after,.card::after,.product-card::after,.chart-box::after,
.fab-card::after,.crm-card::after,.cli-marca::after,.cli-cat-cab::after{
  content:"";position:absolute;inset:0 0 auto;height:58%;pointer-events:none;z-index:0;
  background:linear-gradient(168deg,color-mix(in srgb, var(--card) 55%, transparent) 0%,color-mix(in srgb, var(--card) 16%, transparent) 42%,transparent 78%)}
.stat-tile>*,.card>*,.product-card>*,.chart-box>*,.fab-card>*,.crm-card>*,
.cli-marca>*,.cli-acesso>*,.cli-cat-cab>*{position:relative;z-index:1}

/* --- as placas dos logótipos, tratadas como o ícone da referência ----
   Ladrilho arredondado, curvas de luz por baixo, reflexo em cima e uma
   sombra que o levanta da página. Vale para as marcas na área do cliente
   e para os cartões de Fabricantes do portal interno. */
.cli-cat-logo,.fab-card-logo,.promo-logo-chip{
  position:relative;overflow:hidden;
  border-radius:22px!important;
  background:
    radial-gradient(120% 100% at 18% 8%, color-mix(in srgb, var(--card) 98%, transparent) 0%, color-mix(in srgb, var(--card) 86%, transparent) 42%, color-mix(in srgb, var(--blue-soft) 90%, transparent) 100%)!important;
  border:1px solid color-mix(in srgb, var(--card) 95%, transparent)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -10px 22px -14px rgba(16,26,61,.28),
    0 16px 34px -18px rgba(16,26,61,.55)!important;
}
.fab-card-logo,.promo-logo-chip{padding:.6rem}
.cli-cat-logo::before,.fab-card-logo::before,.promo-logo-chip::before{
  content:"";position:absolute;inset:-30%;pointer-events:none;
  background:
    radial-gradient(60% 42% at 12% 88%, rgba(126,164,255,.42), transparent 70%),
    radial-gradient(52% 38% at 92% 18%, rgba(186,140,255,.34), transparent 72%),
    radial-gradient(46% 34% at 78% 96%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 72%);
  filter:blur(10px);
}
.cli-cat-logo::after,.fab-card-logo::after,.promo-logo-chip::after{
  content:"";position:absolute;inset:0 0 auto;height:52%;pointer-events:none;
  background:linear-gradient(170deg,color-mix(in srgb, var(--card) 90%, transparent) 0%,color-mix(in srgb, var(--card) 35%, transparent) 48%,transparent 82%)}
.cli-cat-logo img,.fab-card-logo img,.promo-logo-chip img{position:relative;z-index:1}

/* Sem suporte para desfoque (equipamentos antigos), nada disto pode
   deixar texto ilegível: as caixas voltam a ser sólidas. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .stat-tile,.card,.product-card,.chart-box,.fab-card,.crm-card,.crm-col,
  .cli-marca,.cli-acesso,.cli-cat-cab,.cli-cat .product-card,.cli-cat #cart-bar{
    background:var(--card)!important}
}

/* ======================================================================
   UMA FORMA SÓ PARA OS BOTÕES
   ----------------------------------------------------------------------
   Havia três formas ao mesmo tempo: uns quase ovais (cantos a 999px),
   outros retangulares, e entre eles alturas diferentes conforme a página
   onde tinham nascido. Passa a haver uma regra: RETÂNGULO DE CANTOS
   ARREDONDADOS, sempre o mesmo raio, sempre a mesma altura, no portal, no
   CRM e na área do cliente.

   As barras de progresso e os pontinhos redondos ficam de fora — esses
   são desenhos, não botões.
   ====================================================================== */
:root{ --btn-raio:10px; --btn-altura:38px; }

.btn-primary,.btn-secondary,.cat-btn,.crm-btn,.aviso-enc-ver,.loja-ficha,
button.btn-primary,button.btn-secondary{
  border-radius:var(--btn-raio)!important;
  min-height:var(--btn-altura)!important;
  padding:0 14px!important;
  font-size:14px!important;
  font-weight:600!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
  line-height:1;white-space:nowrap;
}
/* botões só com ícone: o mesmo quadrado, com o mesmo canto */
#logout-btn,#changelog-btn{width:var(--btn-altura)!important;padding:0!important}
.aviso-enc-x,.cc-x,button[data-upload],
button[data-view-ficha],button[data-bulk-price]{border-radius:var(--btn-raio)!important}
/* o par −/+ forma um bloco só: os cantos são do grupo, não de cada botão */
div:has(> button[data-step]){border-radius:var(--btn-raio)!important;overflow:hidden}

/* os campos e as caixas de escolha acompanham a mesma forma e altura */
.input,select.input,#lang-select,.loja-qtd{
  border-radius:var(--btn-raio)!important;min-height:var(--btn-altura)!important}
#lang-select{padding:0 12px!important}

/* o contador de quantidade: um bloco só, à mesma altura dos botões */
button[data-step],.loja-qtd-btn{
  width:34px!important;height:36px!important;border-radius:0!important;
  display:inline-flex!important;align-items:center;justify-content:center;font-size:15px}
[data-qty]{height:36px!important}

/* etiquetas de informação: também retangulares, para acompanharem */
.badge,.fab-card-tag,.crm-pill,.crm-tag,.pg-chip,.pg-atraso,.cat-selo,
.crm-col-conta,.cat-selo-ok,.cat-selo-erro{border-radius:8px!important}
/* os separadores do menu, no cabeçalho, com o mesmo canto dos botões */
.brand-header nav a{border-radius:var(--btn-raio)!important}

/* Os selos verdes/vermelhos das fiadas mantêm o texto pequeno — são
   informação dentro do cartão, não botões — mas deixam de ser ovais. */
.cat-selo{min-height:0}

/* ===== iPhone: o topo da tela (notch / Dynamic Island) ==================
   O portal usa viewport-fit=cover com a barra de estado translúcida, por
   isso o conteúdo passa POR BAIXO da barra do sistema. O cabeçalho está
   colado ao topo (sticky, top:0) e a sua faixa superior — onde está o logo
   — ficava debaixo dessa barra: via-se o botão mas o toque era apanhado
   pelo iOS. Empurramos o cabeçalho para baixo do recorte. No Android e no
   computador env() vale 0px, portanto nada muda. */
.brand-header{
  padding-top:env(safe-area-inset-top, 0px);
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
}
/* alvo de toque de 44px (o mínimo da Apple) e sem atraso do duplo toque */
.brand-header a,
.brand-header button{
  min-height:44px;
  -webkit-tap-highlight-color:rgba(255,255,255,.14);
  touch-action:manipulation;
}
/* a barra do carrinho não pode ficar debaixo da barrinha inicial do iPhone */
.loja-barra{
  bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
}
/* os painéis que ocupam a tela toda também respeitam os recortes */
.crm-painel{
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
/* ======================================================================= */

/* ===== o nome do produto nunca é cortado ===============================
   O nome estava limitado a duas linhas e o resto virava "…". Só que é
   precisamente no fim do nome que mora a informação que decide a compra:
   o calibre dos frutos secos (verde, amarelo, vermelho), a cura dos
   paios (longo, curado), o formato. Cortar aí é esconder o essencial.
   O cartão passa a crescer com o nome; os cartões da mesma fila continuam
   todos com a mesma altura, porque a grelha estica-os por igual, e o preço
   fica sempre colado ao fundo (mt-auto), portanto as filas continuam
   alinhadas. */
.pc-nome{
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  -webkit-line-clamp:none;
  overflow-wrap:anywhere;   /* uma referência muito longa parte em vez de rebentar o cartão */
  hyphens:auto;
}
.pc-cat,.pc-cod{
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
}
/* ======================================================================= */

/* ===== Correio e Drive dentro do portal ================================ */
.em-lista{list-style:none;margin:0;padding:0;max-height:62vh;overflow:auto;
  display:flex;flex-direction:column;gap:2px}
.em-linha{width:100%;padding:.55rem .6rem;border-radius:10px;border:1px solid transparent;
  background:transparent;cursor:pointer;transition:background .12s ease,border-color .12s ease}
.em-linha:hover{background:color-mix(in srgb, var(--nav-bg) 5%, transparent)}
.em-linha.is-aberta{background:color-mix(in srgb, var(--nav-bg) 7%, transparent);border-color:color-mix(in srgb, var(--ink) 14%, transparent)}
.em-de{font-size:.82rem;font-weight:600;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
.em-linha.is-nova .em-de{color:var(--ink);font-weight:800}
.em-data{font-size:.7rem;color:var(--ink-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
.em-assunto{font-size:.82rem;color:var(--ink);margin-top:.1rem;line-height:1.3;
  overflow-wrap:anywhere}
.em-linha.is-nova .em-assunto{font-weight:700}
.em-resumo{font-size:.74rem;color:var(--ink-3);margin-top:.1rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.em-anexos{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.em-anexo{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--ink);
  background:color-mix(in srgb, var(--nav-bg) 5%, transparent);border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius:var(--btn-raio,10px);padding:.3rem .6rem;cursor:pointer}
.em-anexo:hover{background:color-mix(in srgb, var(--nav-bg) 9%, transparent)}
.em-anexo:disabled{opacity:.5;cursor:default}
.em-corpo{margin-top:.9rem;border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);padding-top:.8rem}
.em-corpo-frame{width:100%;height:52vh;border:0;background:var(--card);border-radius:10px}
.em-corpo-texto{white-space:pre-wrap;font-family:inherit;font-size:.85rem;color:var(--ink-2);
  line-height:1.5;margin:0;overflow-wrap:anywhere}

.dr-caminho{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;margin-bottom:.6rem}
.dr-migalha{font-size:.78rem;color:var(--ink-2);background:transparent;border:0;cursor:pointer;
  padding:.15rem .3rem;border-radius:6px}
.dr-migalha:hover{background:color-mix(in srgb, var(--nav-bg) 6%, transparent)}
.dr-migalha.is-fim{color:var(--ink);font-weight:700;cursor:default}
.dr-sep{color:var(--ink-3);font-size:.8rem}
.dr-tabela{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dr-linha{display:flex;align-items:center;gap:.75rem;padding:.5rem .3rem;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 6%, transparent)}
.dr-linha:last-child{border-bottom:0}
.dr-nome{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;font-size:.85rem;
  color:var(--ink);background:transparent;border:0;cursor:pointer;text-align:left;
  text-decoration:none;overflow-wrap:anywhere}
.dr-nome:hover{text-decoration:underline}
.dr-meta{font-size:.72rem;color:var(--ink-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .em-lista{max-height:none}
  .em-corpo-frame{height:60vh}
  .dr-meta:first-of-type{display:none}
}
/* ======================================================================= */

/* ===== Correio: a lista estreita, a leitura larga =======================
   Ler é o que se faz mais tempo; escolher é um instante. A coluna da
   esquerda leva o que precisa para se distinguir uma mensagem da outra e
   nada mais; o resto do ecrã é para a mensagem. */
.em-painéis{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
@media (min-width:1024px){
  .em-painéis{grid-template-columns:minmax(15rem,20rem) minmax(0,1fr)}
  .em-pastas{grid-column:1 / -1}
}
/* Com espaço a sério, as três colunas do Gmail: pastas, lista, leitura. */
@media (min-width:1320px){
  .em-painéis{grid-template-columns:12.5rem minmax(16rem,21rem) minmax(0,1fr)}
  .em-pastas{grid-column:auto}
}

/* As pastas. Em ecrã largo é uma coluna; em ecrã estreito passa a uma tira
   que se percorre para o lado, para não comer meia página no telemóvel. */
.em-pastas{display:flex;flex-direction:row;gap:.3rem;overflow-x:auto;padding:.55rem}
@media (min-width:1320px){
  .em-pastas{flex-direction:column;overflow-x:visible;position:sticky;top:5.5rem}
}
.em-pasta{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;
  padding:.45rem .6rem;border-radius:9px;border:0;background:transparent;cursor:pointer;
  font-size:.83rem;color:var(--ink-2);text-align:left;white-space:nowrap;min-height:34px}
@media (min-width:1320px){.em-pasta{width:100%;white-space:normal}}
.em-pasta:hover{background:color-mix(in srgb, var(--nav-bg) 5%, transparent)}
.em-pasta.is-on{background:#101a3d;color:var(--on-blue);font-weight:600}
.em-pasta svg, .em-pasta i{width:.95rem;height:.95rem;flex:0 0 auto;opacity:.8}
.em-pasta-nome{flex:1;min-width:0;overflow-wrap:anywhere}
.em-pasta-conta{flex:0 0 auto;font-size:.68rem;font-weight:700;color:var(--ink);
  background:color-mix(in srgb, var(--nav-bg) 9%, transparent);border-radius:999px;padding:.05rem .4rem;
  font-variant-numeric:tabular-nums}
.em-pasta.is-on .em-pasta-conta{background:color-mix(in srgb, var(--card) 22%, transparent);color:var(--on-blue)}
.em-pastas-titulo{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);font-weight:700;margin:.6rem .6rem .2rem;flex:0 0 auto}
@media (max-width:1319px){.em-pastas-titulo{align-self:center;margin:0 .3rem}}

/* ===== Drive: lista ou cartões ========================================= */
.dr-vista{display:inline-flex;border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);border-radius:var(--btn-raio,10px);
  overflow:hidden;background:var(--sup-fundo)}
.dr-vista button{display:inline-flex;align-items:center;gap:.35rem;height:var(--btn-altura,38px);
  padding:0 .8rem;font-size:.8rem;font-weight:600;color:var(--ink-2);background:transparent;
  border:0;cursor:pointer}
.dr-vista button + button{border-left:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.dr-vista button i{width:.95rem;height:.95rem}
.dr-vista button.is-on{background:#101a3d;color:var(--on-blue)}
@media (max-width:520px){.dr-vista button span{display:none}}

.dr-grelha{display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.dr-cartao{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
  padding:.9rem .85rem;border-radius:14px;text-align:left;text-decoration:none;cursor:pointer;
  background:var(--sup-fundo);border:1px solid var(--vidro-borda,color-mix(in srgb, var(--card) 55%, transparent));
  box-shadow:0 10px 24px -18px rgba(16,26,61,.5),var(--vidro-brilho,inset 0 1px 0 rgba(255,255,255,.75));
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s ease,background .16s ease}
.dr-cartao:hover{transform:translateY(-3px);background:var(--sup-fundo);
  box-shadow:0 16px 32px -18px rgba(16,26,61,.55)}
.dr-cartao-icone{display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:11px}
.dr-cartao-icone i{width:1.25rem;height:1.25rem}
.dr-cartao-icone.is-pasta{background:rgba(245,158,11,.14);color:var(--aviso-ink)}
.dr-cartao-icone.is-disco{background:color-mix(in srgb, var(--nav-bg) 10%, transparent);color:var(--ink)}
.dr-cartao-icone.is-ficheiro{background:color-mix(in srgb, var(--nav-bg) 6%, transparent);color:var(--ink-3)}
.dr-cartao-nome{font-size:.83rem;font-weight:600;color:var(--ink);line-height:1.3;
  overflow-wrap:anywhere}
.dr-cartao-meta{font-size:.7rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* ======================================================================= */

/* ===== Drive: as cores das pastas ======================================
   A cor não substitui o ícone nem o nome — acrescenta-se-lhes. Quem não
   distingue cores continua a ler o nome e a ver a forma da pasta. */
.dr-cartao{position:relative}
.dr-cartao-abrir{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
  width:100%;text-align:left;text-decoration:none;background:transparent;border:0;
  cursor:pointer;padding:0}
.dr-cartao.tem-cor{border-color:color-mix(in srgb,var(--marca) 55%,transparent);
  box-shadow:0 10px 24px -18px color-mix(in srgb,var(--marca) 70%,rgba(16,26,61,.5)),
             inset 0 1px 0 rgba(255,255,255,.75)}
.dr-cartao.tem-cor::before{content:"";position:absolute;top:0;left:14%;right:14%;height:3px;
  border-radius:0 0 3px 3px;background:var(--marca)}
.dr-cartao.tem-cor .dr-cartao-icone{background:color-mix(in srgb,var(--marca) 16%,transparent);
  color:var(--marca)}
.dr-marca{position:absolute;top:.5rem;right:.5rem;width:22px;height:22px;border-radius:999px;
  border:0;background:transparent;cursor:pointer;display:flex;align-items:center;
  justify-content:center;opacity:0;transition:opacity .15s ease}
.dr-cartao:hover .dr-marca,.dr-cartao.tem-cor .dr-marca,.dr-marca:focus-visible{opacity:1}
.dr-marca span{width:12px;height:12px;border-radius:999px;background:var(--marca);
  border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);display:block}
.dr-paleta{position:absolute;top:2rem;right:.4rem;z-index:20;display:flex;gap:.3rem;
  padding:.4rem;border-radius:12px;background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);box-shadow:0 16px 34px -16px rgba(16,26,61,.5);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.dr-paleta button{width:22px;height:22px;border-radius:999px;background:var(--p);
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--on-blue);padding:0}
.dr-paleta button i{width:.8rem;height:.8rem;color:var(--ink-3)}
.dr-paleta button.is-on{outline:2px solid #101a3d;outline-offset:2px}
.dr-linha.tem-cor{box-shadow:inset 3px 0 0 var(--marca)}
.dr-linha.tem-cor{padding-left:.8rem}

/* ===== Correio: escrever =============================================== */
.em-escrever{display:flex;flex-direction:column;gap:.6rem;margin:.9rem 0;
  padding:.9rem;border-radius:14px;background:var(--sup-fundo);
  border:1px solid var(--vidro-borda,color-mix(in srgb, var(--card) 55%, transparent));
  box-shadow:var(--vidro-brilho,inset 0 1px 0 rgba(255,255,255,.75))}
.em-escrever-cab{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.8rem;color:var(--ink-2)}
.em-escrever-x{width:28px;height:28px;border-radius:999px;border:0;background:color-mix(in srgb, var(--nav-bg) 6%, transparent);
  color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.em-escrever textarea{width:100%;border-radius:10px;border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  padding:.6rem .7rem;font:inherit;font-size:.88rem;line-height:1.5;color:var(--ink-2);
  background:var(--sup-fundo);resize:vertical}
.em-escrever textarea:focus{outline:2px solid #3b66c4;outline-offset:0}
.em-escrever-pe{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.em-enviada{font-size:.9rem;font-weight:600;color:var(--ok-ink);background:#e9f8f1;
  border:1px solid #8fd9bd;border-radius:12px;padding:.7rem .9rem;margin:.9rem 0}
/* ======================================================================= */

/* A assinatura, mostrada como vai sair. */
/* A ASSINATURA: um botão do tamanho dos outros, e a espreitadela por cima.
   Era uma caixa tracejada da largura toda da janela para dizer uma frase —
   «não faz sentido ter aquilo todo o espaço ocupado», e tinha razão. */
.em-assin{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  font-size:12px; font-weight:500; cursor:pointer;
  color:var(--ok-ink); background:color-mix(in srgb, var(--ok-ink) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--ok-ink) 28%, transparent);
  border-radius:var(--btn-raio);
}
.em-assin:hover{ background:color-mix(in srgb, var(--ok-ink) 18%, transparent) }
.em-assin > svg, .em-assin > i{ width:13px; height:13px }
/* Sem assinatura não se cala: avisa, e não deixa carregar. */
.em-assin.is-sem{
  color:var(--erro-ink); cursor:default;
  background:color-mix(in srgb, var(--erro-ink) 10%, transparent);
  border-color:color-mix(in srgb, var(--erro-ink) 28%, transparent);
}
.em-assin-cx{ position:relative; display:inline-flex }
.em-assin-vista{ display:none }
.em-assin-cx.is-aberta .em-assin-vista{
  display:block; position:absolute; bottom:calc(100% + 6px); left:0; z-index:60;
  width:min(420px, 78vw); max-height:260px; overflow:auto; padding:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--raio);
  box-shadow:0 12px 32px -14px rgba(10,20,40,.45);
}
.em-assinatura-corpo{font-size:.82rem;color:var(--ink-2);overflow-x:auto}
.em-assinatura-corpo img{max-width:100%;height:auto}

/* Quem recebe: Para, e o Cc/Bcc a pedido. */
.em-para{display:flex;flex-direction:column;gap:.4rem}
.em-para-linha{display:flex;align-items:center;gap:.5rem}
.em-para-linha[hidden]{display:none}
.em-para-linha label{flex:0 0 3.4rem;font-size:.75rem;font-weight:600;color:var(--ink-3)}
.em-para-linha .input{flex:1;min-width:0}
.em-para-mais{display:flex;gap:.25rem;flex:0 0 auto}
.em-para-mais button{font-size:.72rem;font-weight:700;color:var(--ink-3);background:color-mix(in srgb, var(--nav-bg) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);border-radius:8px;padding:.25rem .5rem;cursor:pointer}
.em-para-mais button:hover{background:color-mix(in srgb, var(--nav-bg) 10%, transparent);color:var(--ink)}
.em-para-mais button.is-on{background:#101a3d;color:var(--on-blue);border-color:#101a3d}

/* O clipe, ao lado do Enviar — onde a mão já está. */
.em-clipe{display:inline-flex;align-items:center;justify-content:center;
  width:var(--btn-altura,38px);height:var(--btn-altura,38px);flex:0 0 auto;
  border-radius:var(--btn-raio,10px);cursor:pointer;color:var(--ink);
  background:color-mix(in srgb, var(--nav-bg) 5%, transparent);border:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.em-clipe:hover{background:color-mix(in srgb, var(--nav-bg) 10%, transparent)}
.em-clipe svg, .em-clipe i{width:1.05rem;height:1.05rem}

/* Anexar ficheiros a uma mensagem. */
.em-anexar{display:flex;flex-direction:column;gap:.45rem}
.em-anexar:empty{display:none}
.em-anexar-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.em-anexar-lista li{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;
  color:var(--ink-2);background:var(--sup-fundo);border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius:999px;padding:.25rem .3rem .25rem .6rem;max-width:100%}
.em-anexar-lista svg, .em-anexar-lista i{width:.85rem;height:.85rem;color:var(--ink-3);flex:0 0 auto}
.em-anexar-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11rem}
.em-anexar-peso{color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.em-anexar-lista button{width:20px;height:20px;border-radius:999px;border:0;cursor:pointer;
  background:color-mix(in srgb, var(--nav-bg) 7%, transparent);color:var(--ink-2);display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;padding:0}
.em-anexar-lista button:hover{background:rgba(196,69,59,.14);color:var(--erro-ink)}

/* As ações de uma mensagem: as três de escrita como botões, as de arrumar
   como ícones — para as segundas não competerem com as primeiras. */
.em-acoes{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;position:relative}
.em-icone{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;cursor:pointer;color:var(--ink-2);
  background:color-mix(in srgb, var(--nav-bg) 5%, transparent);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.em-icone:hover{background:color-mix(in srgb, var(--nav-bg) 10%, transparent);color:var(--ink)}
.em-icone:disabled{opacity:.45;cursor:default}
.em-icone svg, .em-icone i{width:.95rem;height:.95rem}
.em-icone-perigo:hover{background:rgba(196,69,59,.12);color:var(--erro-ink);
  border-color:rgba(196,69,59,.3)}
.em-marcadores{position:absolute;top:2.4rem;right:0;z-index:20;min-width:11rem;
  display:flex;flex-direction:column;gap:.15rem;padding:.35rem;border-radius:12px;
  background:color-mix(in srgb, var(--card) 95%, transparent);border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:0 16px 34px -16px rgba(16,26,61,.5);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.em-marcadores button{display:flex;align-items:center;gap:.45rem;padding:.35rem .5rem;
  border:0;background:transparent;border-radius:8px;cursor:pointer;font-size:.8rem;
  color:var(--ink-2);text-align:left}
.em-marcadores button:hover{background:color-mix(in srgb, var(--nav-bg) 6%, transparent)}
.em-marcadores button svg, .em-marcadores button i{width:.85rem;height:.85rem;color:var(--ink-3)}
.em-marcadores-vazio{font-size:.75rem;color:var(--ink-3);padding:.4rem .5rem;margin:0}

/* Aviso no cartão: falta um dado, e sem ele não se calcula nada. */
.cat-selo-aviso{display:inline-flex;align-items:flex-start;gap:4px;width:fit-content;
  font-size:10px;font-weight:700;border-radius:9999px;padding:3px 9px;border:1px solid;
  color:var(--aviso-ink);background:var(--aviso-bg);border-color:#fcd34d;line-height:1.35;
  white-space:normal;text-align:left}
.cat-selo-aviso svg{flex:0 0 auto;margin-top:2px}

/* "Ficou uma encomenda por terminar" — no topo da grelha, onde os olhos já
   estão, e com os dois caminhos à vista: retomar ou começar de novo. */
.rasc-aviso{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin:0 0 1rem;padding:.9rem 1rem;border-radius:14px;
  background:var(--sup-fundo);border:1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  border-left:5px solid #3b66c4;
  box-shadow:0 14px 30px -22px rgba(16,26,61,.6),inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.rasc-icone{width:22px;height:22px;color:var(--blue-d);flex:0 0 auto}
.rasc-txt{flex:1;min-width:12rem;display:flex;flex-direction:column;line-height:1.35}
.rasc-txt strong{font-size:.92rem;color:var(--ink)}
.rasc-txt span{font-size:.8rem;color:var(--ink-2)}
.rasc-semcliente{color:var(--ink-3)}
/* As referências que ficaram escolhidas, listadas dentro do aviso. */
.rasc-refs{list-style:none;margin:.45rem 0 0;padding:.4rem 0 0;
  border-top:1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  display:flex;flex-direction:column;gap:.15rem;
  font-size:.76rem;color:#414a60;line-height:1.35}
.rasc-cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.71rem;color:var(--blue-d);font-weight:600}
.rasc-qtd{color:var(--ink-2);font-weight:600}
.rasc-mais{color:var(--ink-3);font-style:italic}
@media (max-width:520px){
  .rasc-aviso{align-items:flex-start}
  .rasc-aviso .btn-primary,.rasc-aviso .btn-secondary{flex:1}
}

/* Lista das encomendas por terminar, por cima dos fabricantes. */
.rasc-painel{margin:0 0 1.25rem;padding:.9rem 1rem;border-radius:16px;
  background:var(--sup-fundo);border:1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  border-left:5px solid #3b66c4;
  box-shadow:0 16px 34px -24px rgba(16,26,61,.6),inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.rasc-painel-cab{display:flex;align-items:center;gap:.55rem;color:var(--ink);font-size:.92rem}
.rasc-painel-cab i{width:18px;height:18px;color:var(--blue-d);flex:0 0 auto}
.rasc-painel-lista{list-style:none;margin:.6rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.4rem}
.rasc-painel-lista li{display:flex;flex-direction:column;gap:.45rem;
  background:var(--sup-fundo);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius:11px;padding:.5rem .7rem}
.rasc-painel-linha{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;width:100%}
.rasc-painel-nome{font-size:.85rem;font-weight:700;color:var(--ink)}
.rasc-painel-det{flex:1;min-width:8rem;font-size:.76rem;color:var(--ink-2)}
.rasc-painel-semcliente{color:var(--ink-3);font-style:italic}
/* As referências já escolhidas. Sem isto o aviso dizia "3 produtos" e mais
   nada — e ninguém se lembra do que escolheu ontem. */
.rasc-painel-refs{list-style:none;margin:0;padding:.45rem .1rem 0;width:100%;
  border-top:1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  display:flex;flex-direction:column;gap:.15rem}
.rasc-painel-refs li{display:block;background:none;border:0;border-radius:0;padding:0;
  font-size:.75rem;color:#414a60;line-height:1.35}
.rasc-painel-cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.7rem;color:var(--blue-d);font-weight:600}
.rasc-painel-qtd{color:var(--ink-2);font-weight:600}
.rasc-painel-mais{color:var(--ink-3);font-style:italic}

/* Rever as fotos vindas do catálogo do fabricante. */
.fc-grelha{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.fc-cartao{display:flex;flex-direction:column;gap:.5rem;padding:.7rem;border-radius:14px;cursor:pointer;
  background:var(--sup-fundo);border:1px solid var(--vidro-borda,color-mix(in srgb, var(--card) 55%, transparent));
  box-shadow:0 10px 24px -18px rgba(16,26,61,.5),var(--vidro-brilho,inset 0 1px 0 rgba(255,255,255,.75));
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.fc-cartao.is-on{border-color:#158c78;background:rgba(233,248,241,.75);
  box-shadow:0 12px 26px -18px rgba(21,140,120,.7)}
.fc-cartao input{align-self:flex-start;width:18px;height:18px;accent-color:#158c78}
.fc-foto{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#eef1f5}
.fc-foto img{width:100%;height:100%;object-fit:contain;display:block}
.fc-txt{display:flex;flex-direction:column;gap:.1rem}
.fc-cod{font-size:.72rem;font-family:ui-monospace,monospace;color:var(--ink-3)}
.fc-nome{font-size:.8rem;font-weight:600;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.fc-aviso{font-size:.68rem;font-weight:700;color:var(--aviso-ink)}

/* Antes e depois, ao uniformizar as fotos de um fabricante. */
.fu-amostra{display:grid;gap:.9rem;margin-top:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.fu-amostra:empty{display:none}
.fu-par{margin:0;padding:.6rem;border-radius:12px;background:var(--sup-fundo);
  border:1px solid var(--vidro-borda,color-mix(in srgb, var(--card) 55%, transparent));
  box-shadow:var(--vidro-brilho,inset 0 1px 0 rgba(255,255,255,.75))}
.fu-par span{display:inline-block;width:calc(50% - .3rem);text-align:center}
.fu-par img{width:100%;aspect-ratio:1;object-fit:contain;background:#eef1f5;border-radius:8px;display:block}
.fu-par small{display:block;font-size:.62rem;color:var(--ink-3);margin-top:.2rem}
.fu-par figcaption{font-size:.72rem;color:var(--ink);font-weight:600;margin-top:.4rem;
  overflow-wrap:anywhere;line-height:1.3}

/* ---------------------------------------------------------------------------
   A barra de baixo do catálogo.
   
   O que estava mal: seis coisas do mesmo tamanho e do mesmo peso lado a lado —
   a contagem, o total, PDF, Excel, catálogo e submeter. Nada mandava em nada, e
   o número que interessa (o total da encomenda) tinha o mesmo destaque que o
   botão do Excel. Num telemóvel embrulhava-se em três linhas desalinhadas.
   
   Agora há uma ordem: o total é o maior elemento da barra e tem uma barra de
   cor da marca ao lado; a contagem fica por baixo, mais pequena, a explicá-lo;
   as exportações recuam para botões discretos; e submeter a encomenda é o
   único botão cheio, do lado oposto, onde o polegar chega.
--------------------------------------------------------------------------- */
.barra-enc{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--sup-fundo);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow:0 -8px 28px rgba(15,23,42,.10);
  /* o tabuleiro do iPhone não pode tapar o botão de submeter */
  padding-bottom:env(safe-area-inset-bottom);
}
.barra-enc-corpo{
  max-width:72rem; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* --- o total, que é o que se vem cá abaixo ver --- */
.barra-enc-resumo{display:flex; align-items:center; gap:12px; min-width:0}
.barra-enc-risco{width:4px; align-self:stretch; min-height:38px; border-radius:999px; background:#101a3d; flex:0 0 auto}
.barra-enc-valores{min-width:0}
.barra-enc-total{
  font-size:26px; line-height:1.1; font-weight:800; color:var(--ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.barra-enc-total small{font-size:13px; font-weight:600; color:var(--ink-3); letter-spacing:0; margin-left:6px}
.barra-enc-conta{
  font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.barra-enc-conta b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
/* quando o valor muda, dá um sinal — senão mexe-se numa quantidade e não se
   percebe que o total lá em baixo acompanhou */
.barra-enc-total.mudou{animation:barra-enc-pulso .45s ease}
@keyframes barra-enc-pulso{
  0%{transform:scale(1)} 35%{transform:scale(1.07); color:#1baf7a} 100%{transform:scale(1)}
}

/* --- as acções --- */
.barra-enc-accoes{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
/* O botão e o selo da palete partilham a MESMA medida — a mesma letra, a mesma
   altura, o mesmo canto. Estavam a 12px contra 13px, com menos um pixel de
   altura e o canto mais fechado: pouco para se explicar, mas quanto baste para
   a fila parecer desalinhada. Ficam na mesma regra de propósito, para não
   poderem voltar a separar-se quando um dos dois for mexido. */
.barra-enc-btn, .barra-enc-selo{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; line-height:1.15;
  border-radius:10px; padding:9px 12px; white-space:nowrap;
  border:1px solid #dfe3ee; background:var(--card); color:var(--ink);
}
.barra-enc-btn i, .barra-enc-selo i{width:15px; height:15px; flex:0 0 auto}
.barra-enc-btn{
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.barra-enc-btn i{opacity:.7}
.barra-enc-btn:hover{background:#f4f5fb; border-color:#cdd4e6; transform:translateY(-1px)}
/* o selo não é para se clicar, por isso não levanta ao passar por cima —
   só muda de cor conforme a palete esteja por fechar ou fechada */
.barra-enc-selo.falta{background:#fff7ed; border-color:#fdba74; color:#c2410c}
.barra-enc-selo.pronto{background:var(--ok-bg); border-color:#6ee7b7; color:var(--ok-ink)}
.barra-enc-sep{width:1px; align-self:stretch; margin:4px 4px; background:#dfe3ee}
.barra-enc-enviar{
  display:inline-flex; align-items:center; gap:8px;
  /* é o .btn-primary do resto do site — a mesma cor, o mesmo canto, a mesma
     sombra. O destaque vem do tamanho e da seta, não de um azul diferente. */
  font-size:14px; font-weight:600; letter-spacing:.01em; color:var(--on-blue);
  background:#101a3d; border:0; border-radius:10px;
  padding:11px 18px; cursor:pointer; white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.barra-enc-enviar:hover{background:#0b1330; transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.22)}
.barra-enc-enviar:active{transform:translateY(0)}
.barra-enc-enviar i{width:17px; height:17px}

/* --- telemóvel: o total em cima, as acções por baixo, e o enviar a ocupar
       a largura toda para não se falhar o toque --- */
@media (max-width:720px){
  .barra-enc-corpo{padding:10px 14px; gap:10px; flex-direction:column; align-items:stretch}
  .barra-enc-total{font-size:23px}
  .barra-enc-accoes{gap:6px}
  .barra-enc-btn{flex:1 1 0; justify-content:center; padding:9px 8px}
  .barra-enc-sep{display:none}
  .barra-enc-enviar{width:100%; justify-content:center; padding:12px 18px}
}

/* ---------------------------------------------------------------------------
   Espécie e IQF no cartão do produto (Gicarns).

   O catálogo do fabricante identifica cada secção por um animal desenhado a
   uma cor só — a vaca, o porco, o borrego, a soja — e põe um floco de gelo ao
   lado do que é IQF. São duas informações que quem compra procura primeiro:
   de que carne é, e se vem congelado peça a peça.

   Os desenhos são os do catálogo, reduzidos a silhueta e usados como MÁSCARA:
   a imagem só diz a forma, a cor vem do CSS. Assim ficam a uma cor só, como
   deve ser, e o mesmo ficheiro serve sobre o cartão claro e sobre fundo
   escuro sem se ter de guardar duas versões.
--------------------------------------------------------------------------- */
.selos-prod{
  position:absolute; top:8px; left:8px; right:8px; z-index:2;
  display:flex; align-items:flex-start; justify-content:space-between; gap:6px;
  pointer-events:none;
}
.selo-esp, .selo-iqf{
  display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 8px; border-radius:999px;
  font-size:11px; font-weight:700; line-height:1;
  background:color-mix(in srgb, var(--card) 92%, transparent); border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow:0 1px 3px rgba(15,23,42,.10);
  -webkit-backdrop-filter:var(--sup-desfoque); backdrop-filter:var(--sup-desfoque);
}
.selo-esp{color:var(--ink-2)}
.selo-esp i{
  width:19px; height:19px; display:block; flex:0 0 auto;
  background:currentColor;                       /* a cor é daqui, não da imagem */
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}
.selo-esp i.bovino {-webkit-mask-image:url(/img/especies/bovino.png); mask-image:url(/img/especies/bovino.png)}
.selo-esp i.porco  {-webkit-mask-image:url(/img/especies/porco.png);  mask-image:url(/img/especies/porco.png)}
.selo-esp i.borrego{-webkit-mask-image:url(/img/especies/borrego.png);mask-image:url(/img/especies/borrego.png)}
.selo-esp i.vegetal{-webkit-mask-image:url(/img/especies/vegetal.png);mask-image:url(/img/especies/vegetal.png)}
/* a mistura mostra os dois animais, que é a maneira mais curta de o dizer */
.selo-esp.mistura i + i{margin-left:-3px}
.selo-iqf{color:#0369a1; background:rgba(240,249,255,.94); border-color:rgba(3,105,161,.22)}
.selo-iqf i{
  width:14px; height:14px; display:block; flex:0 0 auto; background:currentColor;
  -webkit-mask:url(/img/especies/iqf.png) center/contain no-repeat;
  mask:url(/img/especies/iqf.png) center/contain no-repeat;
}
@media (max-width:640px){
  .selo-esp span, .selo-iqf span{display:none}      /* no telemóvel só o desenho */
  .selo-esp, .selo-iqf{padding:0 6px}
}

/* ===================================================================
   O VIDRO DA CASA — um vocabulário só, para o portal inteiro
   ===================================================================
   Isto veio de um reparo simples: "dá uma vista de olhos em todos os
   botões e generaliza tudo, para ficar tudo igual". Estava certo. Havia
   botões chapados, botões com sombra, botões sem sombra nenhuma, caixas
   de vidro claro ao lado de caixas de azul escuro — cada ecrã com o seu
   dialecto. Um produto nao se le como uma colecçao de ecrãs; le-se como
   uma coisa só, e a maneira de o conseguir e haver UMA receita.

   A receita do vidro sao tres camadas, e sao sempre as mesmas:

     1. o FUNDO deixa passar o que esta por tras — cor com transparencia
        mais backdrop-filter, que desfoca e satura;
     2. o BRILHO de cima — uma risca de luz no rebordo superior. E o
        reflexo, e e ele que da a curvatura. Sem ele fica um rectangulo
        baco;
     3. a SOMBRA por baixo, que levanta a peça da superficie. Sem ela
        fica colada ao fundo, como um autocolante.

   Ha duas familias, porque ha dois fundos: o vidro CLARO (sobre paginas
   brancas) e o vidro ESCURO (sobre o azul-marinho — cabecalho, entrada,
   login). Nao se misturam: uma caixa de vidro claro no meio do azul
   escuro e exactamente o que se via na pagina de entrada, e via-se logo.
   =================================================================== */
:root{
  /* Os quatro nomes da casa. Eram os valores fixos do azul-marinho, do
     azul activo e do dourado; passam a sair do tema, e na combinação da
     casa dão exactamente os mesmos tons de sempre. */
  --tinta:var(--ink);
  --tinta-fundo:var(--nav-bg);
  --azul:var(--blue);
  --ouro:var(--acc2);

  /* Vidro escuro: sobre o azul-marinho. */
  --ve-fundo:linear-gradient(180deg, rgba(27,42,86,.62), rgba(11,19,48,.78));
  --ve-borda:1px solid rgba(255,255,255,.16);
  --ve-brilho:inset 0 1px 0 rgba(255,255,255,.22);
  --ve-sombra:0 18px 44px -22px rgba(0,0,0,.8);
  --ve-desfoque:blur(20px) saturate(160%);

  /* Vidro claro: sobre paginas brancas. */
  --vc-fundo:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  --vc-borda:1px solid rgba(16,26,61,.10);
  --vc-brilho:inset 0 1px 0 rgba(255,255,255,.9);
  --vc-sombra:0 10px 26px -16px rgba(16,26,61,.45);
  --vc-desfoque:blur(18px) saturate(150%);
}

/* --- Botoes ---------------------------------------------------------
   O botao principal continua azul-marinho e o secundario continua claro
   — o que muda e o acabamento, que passa a ser o mesmo em todo o lado.
   O reflexo vive num ::before para nao disputar o fundo com o degrade,
   e nao apanha o rato. */
.btn-primary,.btn-secondary,.cat-btn,.crm-btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.btn-primary::before,.btn-secondary::before,.cat-btn.active::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 28%, transparent) 0%, color-mix(in srgb, var(--card) 6%, transparent) 45%, color-mix(in srgb, var(--card) 0%, transparent) 62%);
}
.btn-primary>*,.btn-secondary>*,.cat-btn>*{position:relative;z-index:1}

.btn-primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, #fff) 0%, var(--blue) 55%, color-mix(in srgb, var(--blue) 88%, #000) 100%)!important;
  color:var(--on-blue);border:1px solid color-mix(in srgb, var(--card) 14%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 8px 18px -10px rgba(11,19,48,.85);
}
.btn-primary:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 12px 24px -10px rgba(11,19,48,.9)}
.btn-primary:active{transform:translateY(0);filter:brightness(.95)}
.btn-primary:disabled{opacity:.45;transform:none;box-shadow:none;cursor:not-allowed}

.btn-secondary{
  background:var(--vc-fundo)!important;
  color:var(--tinta);border:var(--vc-borda);
  backdrop-filter:var(--vc-desfoque);-webkit-backdrop-filter:var(--vc-desfoque);
  box-shadow:var(--vc-brilho), 0 6px 14px -10px rgba(16,26,61,.5);
}
.btn-secondary:hover{transform:translateY(-1px);border-color:color-mix(in srgb, var(--ink) 20%, transparent);
  box-shadow:var(--vc-brilho), 0 10px 20px -10px rgba(16,26,61,.55)}
.btn-secondary:active{transform:translateY(0);filter:brightness(.97)}
.btn-secondary:disabled{opacity:.5;transform:none;box-shadow:none;cursor:not-allowed}

/* O botao de sair vive no cabecalho, sobre o azul-marinho. Continua claro
   — e o unico sitio onde um botao claro tem de se ver contra o escuro —
   mas ganha o mesmo acabamento. */
.brand-header .btn-secondary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 86%, transparent))!important;
  border-color:color-mix(in srgb, var(--card) 50%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 8px 18px -10px rgba(0,0,0,.7);
}

.cat-btn.active{
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, #fff), var(--blue))!important;color:var(--on-blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -9px rgba(11,19,48,.8);
}

/* --- o contador do sino ---------------------------------------------
   A bolinha estava dentro do proprio botao. Como o botao tem backdrop-filter
   e cantos redondos, o travessseiro recortava-a: via-se um quarto de circulo
   encostado ao canto, por dentro, em amarelo sobre branco. Passa a ser irma
   do botao, dentro de uma caixa que so serve de referencia, e ganha um aro
   escuro para se ler tanto sobre o botao claro como sobre o cabecalho. */
.sino-caixa{position:relative;display:inline-flex}
.sino-bolha{
  position:absolute;top:-5px;right:-5px;
  min-width:1.15rem;height:1.15rem;padding:0 .25rem;
  border-radius:999px;
  background:#d97706;color:var(--on-blue);
  font-size:.66rem;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px rgba(11,19,48,.95), 0 2px 6px rgba(0,0,0,.45);
  pointer-events:none;
}

/* --- Caixas ---------------------------------------------------------
   Todas as caixas claras do portal com o mesmo raio e o mesmo pousar.
   Nao se toca no fundo das que ja o definem — so no acabamento. */
.card,.stat-tile{
  border-radius:var(--raio);
  border:var(--vc-borda);
  box-shadow:var(--vc-brilho), var(--vc-sombra);
}

/* Um browser sem backdrop-filter mostra tudo opaco em vez de translucido.
   Vale mais legivel do que bonito. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn-secondary{background:var(--card)!important}
}

/* --- As condições de pagamento do cliente ---------------------------
   Tabela na entrada do cliente e tira dentro do catálogo. O plafond é um
   número de dinheiro: vai alinhado à direita e com algarismos de largura
   fixa, senão as casas decimais não assentam umas sobre as outras e a
   coluna lê-se aos saltos. */
.cli-cond-wrap{overflow-x:auto;border-radius:16px;
  background:var(--sup-fundo);border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px -18px rgba(16,26,61,.45)}
.cli-cond{width:100%;border-collapse:collapse;font-size:.86rem;min-width:34rem}
.cli-cond thead th{text-align:left;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#6a7488;padding:.85rem 1rem;border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);white-space:nowrap}
.cli-cond td{padding:.72rem 1rem;border-bottom:1px solid color-mix(in srgb, var(--ink) 6%, transparent);color:#233054;vertical-align:middle}
.cli-cond tr:last-child td{border-bottom:0}
.cli-cond-marca{font-weight:600;color:var(--ink)}
.cli-cond-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cli-cond-vazio{color:var(--ink-3)}
.cli-cond-selo{display:inline-block;padding:.12rem .55rem;border-radius:999px;
  font-size:.72rem;font-weight:700;white-space:nowrap;
  color:#0f5c33;background:rgba(15,122,63,.10);border:1px solid rgba(15,122,63,.26)}
.cli-cond-selo.cli-cond-pre{color:#8c5307;background:color-mix(in srgb, var(--acc2) 12%, transparent);border-color:color-mix(in srgb, var(--acc2) 30%, transparent)}
.cli-cond-nota{margin-top:.8rem;font-size:.74rem;color:#6a7488;line-height:1.55;max-width:46rem}

/* A tira dentro do catálogo: a mesma informação, mas de uma linha só, ao pé
   do sítio onde se decide a quantidade. */
.cat-cred{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .95rem;
  padding:.65rem .9rem;border-radius:12px;margin-bottom:.9rem;
  background:color-mix(in srgb, var(--blue) 7%, transparent);border:1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  font-size:.8rem;color:#233054}
.cat-cred b{font-variant-numeric:tabular-nums;color:var(--ink)}
.cat-cred .cat-cred-sep{color:var(--ink-3)}

/* No telemóvel a tabela não cabe, e o que ficava de fora era a coluna do
   PRAZO — que é o número que mais interessa a quem está a decidir uma
   encomenda. Rolar para o lado não serve: ninguém descobre que há mais
   colunas. Abaixo dos 640 px cada representada passa a ser um cartão, com o
   rótulo de cada valor ao lado dele. */
@media (max-width:640px){
  .cli-cond{min-width:0}
  .cli-cond thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cli-cond,.cli-cond tbody,.cli-cond tr,.cli-cond td{display:block;width:auto}
  .cli-cond tr{padding:.7rem .9rem;border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
  .cli-cond tr:last-child{border-bottom:0}
  .cli-cond td{border:0;padding:.18rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:right}
  .cli-cond td::before{content:attr(data-rot);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
    font-weight:700;color:#8a93a4;text-align:left}
  .cli-cond .cli-cond-marca{font-size:.95rem;margin-bottom:.3rem;display:block;text-align:left}
  .cli-cond .cli-cond-marca::before{content:none}
}

/* ===================================================================
   O catálogo do cliente, com várias representadas
   ===================================================================
   Um ecrã de escolha, e uma escolha com quatro casas e centenas de
   artigos precisa de duas coisas: saber-se de relance o que já está
   marcado, e não se perder o total de vista ao percorrer a lista. Daí
   o selo com a conta em cada casa e a barra de baixo fixa.

   As casas fechadas por omissão. Abrir as quatro de uma vez seria pôr
   oitocentas linhas no ecrã — que é exactamente o que ninguém lê. */
.mc{padding-bottom:7rem}
.mc-aviso{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;
  padding:.7rem .9rem;font-size:.82rem;color:#9a3412;margin-bottom:1rem}
.mc-aviso i,.mc-aviso svg{color:#ea580c;flex:0 0 auto}
.mc-aviso .crm-btn{margin-left:auto;text-decoration:none}
.mc-nota{font-size:.78rem;color:var(--ink-3);margin:.7rem 0 1rem}
.mc-vazio{font-size:.82rem;color:var(--ink-3);padding:.8rem 0}

.mc-casas{display:flex;flex-direction:column;gap:.7rem}
.mc-casa{border:1px solid var(--vidro-linha);border-radius:16px;background:var(--sup-fundo);
  box-shadow:var(--vidro-brilho);overflow:hidden;transition:border-color .15s ease}
/* A casa com artigos marcados ganha o traço da cor da marca à esquerda:
   percorrendo a lista de cima a baixo vê-se num relance quais entram. */
.mc-casa.is-on{border-color:color-mix(in srgb,var(--cor) 45%,transparent);
  box-shadow:inset 3px 0 0 var(--cor),var(--vidro-brilho)}
.mc-casa-cab{display:flex;align-items:center;gap:.8rem;padding:.75rem .95rem}
.mc-casa-logo{width:2.6rem;height:2.6rem;border-radius:10px;flex:0 0 auto;background:var(--card);
  border:1px solid #eef0f5;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px}
.mc-casa-logo img{width:100%;height:100%;object-fit:contain}
.mc-casa-logo span{font-weight:800;color:var(--cor)}
.mc-casa-id{min-width:0;flex:1 1 auto}
.mc-casa-id h3{font-size:.92rem;font-weight:700;color:var(--ink);margin:0;line-height:1.2}
.mc-casa-id p{font-size:.74rem;color:var(--ink-3);margin:.15rem 0 0}
.mc-casa-conta{flex:0 0 auto}
.mc-selo{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;
  color:var(--ok-ink);background:rgba(15,122,63,.1);border:1px solid rgba(15,122,63,.25);
  border-radius:999px;padding:.15rem .55rem}
.mc-casa-cab .crm-btn{flex:0 0 auto;white-space:nowrap}

.mc-casa-corpo{border-top:1px solid var(--vidro-linha);padding:.7rem .95rem .9rem}
.mc-barra{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:.6rem}
.mc-procura{flex:1 1 14rem;min-width:0;height:34px;padding:0 .7rem;font-size:.82rem}
/* Uma lista que cresce sem fim empurra a barra de baixo e obriga a rolar a
   página inteira para voltar ao cimo. Rola dentro de si. */
.mc-lista{max-height:22rem;overflow-y:auto;display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--vidro-linha);border-radius:10px;background:var(--sup-fundo)}
.mc-prod{display:flex;align-items:center;gap:.6rem;padding:.4rem .6rem;cursor:pointer;
  font-size:.82rem;color:var(--ink-2);border-bottom:1px solid color-mix(in srgb, var(--ink) 5%, transparent)}
.mc-prod:last-child{border-bottom:0}
.mc-prod:hover{background:color-mix(in srgb, var(--blue) 6%, transparent)}
.mc-prod.is-on{background:color-mix(in srgb, var(--blue) 10%, transparent)}
.mc-prod input{flex:0 0 auto;accent-color:#101a3d;width:15px;height:15px}
.mc-prod-nome{flex:1 1 auto;min-width:0}
.mc-prod-selo{flex:0 0 auto;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ok-ink)}
.mc-prod-sem{flex:0 0 auto;font-size:.66rem;color:var(--aviso-ink)}
.mc-prod-preco{flex:0 0 auto;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* As duas faixas de baixo são UMA coisa colada ao fundo, não duas. Coladas
   em separado, a do endereço aparecia por cima da dos botões — as duas
   diziam bottom:0 e as duas tinham razão. */
.mc-barra-baixo{position:sticky;bottom:0;z-index:5;margin:0 -1.5rem -1.5rem}
.mc-rodape{display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.8rem 1.5rem calc(.8rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb, var(--card) 90%, transparent);border-top:1px solid var(--vidro-linha);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  box-shadow:0 -8px 24px -18px rgba(0,0,0,.6)}
.mc-rodape-conta{font-size:.84rem;font-weight:600;color:var(--ink)}

@media (max-width:640px){
  .mc-casa-cab{flex-wrap:wrap}
  .mc-casa-conta{order:4}
  .mc-lista{max-height:16rem}
  .mc-prod-selo,.mc-prod-sem{display:none}
}

/* A opção de pôr o catálogo em linha, e o endereço depois de estar lá. */
.mc-rodape-esq{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1 1 22rem}
.mc-linha-opcao{display:flex;align-items:flex-start;gap:.5rem;font-size:.74rem;
  color:var(--ink-3);line-height:1.35;cursor:pointer;max-width:46rem}
.mc-linha-opcao input{margin-top:.15rem;flex:0 0 auto;accent-color:#101a3d;width:15px;height:15px}
.mc-linha-opcao strong{color:var(--ink)}
.mc-link{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem 1.5rem;font-size:.8rem;
  background:rgba(15,122,63,.08);border-top:1px solid rgba(15,122,63,.25);color:#0f5132}
.mc-link a{color:var(--ok-ink);font-weight:700;word-break:break-all}

/* A referência do documento do cliente, ao lado do nosso número de encomenda:
   o nosso a cheio, o dele mais discreto e entre parênteses de cor. São dois
   números para a mesma coisa, e tem de se ver logo qual é qual. */
.enc-ref{display:inline-block;margin-left:.45rem;padding:.05rem .4rem;border-radius:6px;
  font-size:.7rem;font-weight:600;color:var(--ink-2);background:color-mix(in srgb, var(--ink) 6%, transparent)}

/* ===================================================================
   Importar a nota de encomenda do programa do cliente
   ===================================================================
   O ecrã existe para uma coisa: mostrar, lado a lado, o que estava no
   documento dele e o que vai para o carrinho. Por isso a coluna da
   esquerda é texto cru — código, descrição e quantidade tal como lá
   estavam — e a da direita é editável.

   As cores não são decoração: verde é sabido, âmbar é palpite à espera
   de confirmação, vermelho é por identificar. Enquanto houver âmbar ou
   vermelho o botão não deixa seguir. */
.imp-chamada{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.9rem;
  padding-top:.85rem;border-top:1px solid var(--vidro-linha)}
.imp-chamada span{font-size:.75rem;color:var(--ink-3);flex:1 1 16rem;min-width:0}
.imp-chamada .btn-secondary{display:inline-flex;align-items:center;gap:.45rem}

.imp-fundo{position:fixed;inset:0;z-index:60;background:color-mix(in srgb, var(--nav-bg) 55%, transparent);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.imp-painel{position:fixed;z-index:61;inset:3vh 2vw;display:flex;flex-direction:column;
  background:var(--card);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
@media (min-width:1100px){ .imp-painel{inset:5vh 8vw} }

.imp-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;border-bottom:1px solid #eef0f5}
.imp-cab h2{font-size:1rem;font-weight:700;color:var(--ink);margin:0}
.imp-cab p{font-size:.76rem;color:var(--ink-3);margin:.15rem 0 0}

.imp-corpo{flex:1 1 auto;overflow:auto;padding:0 1.2rem}
.imp-tabela{width:100%;border-collapse:collapse;font-size:.82rem}
.imp-tabela thead th{position:sticky;top:0;z-index:1;background:var(--card);text-align:left;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  font-weight:700;padding:.7rem .5rem;border-bottom:1px solid #eef0f5}
.imp-tabela td{padding:.55rem .5rem;border-bottom:1px solid #f1f5f9;vertical-align:top}
.imp-dir{text-align:right}
.imp-linha.is-palpite{background:rgba(245,158,11,.07)}
.imp-linha.is-falta{background:rgba(220,38,38,.06)}
.imp-linha.is-ignorada{opacity:.45}

.imp-seu{max-width:24rem}
.imp-cod{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;color:var(--ink-2);background:color-mix(in srgb, var(--ink) 6%, transparent);border-radius:5px;padding:.05rem .35rem}
.imp-desc{display:block;color:var(--ink-2);margin-top:.15rem;line-height:1.3}
.imp-doc-qtd{display:inline-block;margin-top:.2rem;font-size:.72rem;font-weight:700;color:var(--ink)}
.imp-sel{width:100%;min-width:14rem;font-size:.8rem;padding:.3rem .45rem}
.imp-qtd{width:6.5rem;text-align:right;font-size:.82rem;padding:.3rem .45rem}
.imp-aviso-uni{font-size:.7rem;color:var(--aviso-ink);margin-top:.25rem;line-height:1.3}

.imp-accoes{white-space:nowrap}
.imp-selo{display:inline-block;font-size:.68rem;font-weight:700;border-radius:999px;
  padding:.1rem .5rem;background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--ink-2)}
.imp-selo-ok{background:rgba(15,122,63,.12);color:var(--ok-ink)}
.imp-selo-falta{background:rgba(220,38,38,.12);color:var(--erro-ink)}
.imp-ignorar{display:block;margin-top:.3rem;font-size:.68rem;color:var(--ink-3);cursor:pointer}
.imp-ignorar input{accent-color:#101a3d;vertical-align:-1px}

.imp-rodape{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.2rem calc(.85rem + env(safe-area-inset-bottom,0px));border-top:1px solid #eef0f5}
.imp-falta-txt{font-size:.82rem;font-weight:700;color:var(--erro-ink)}
.imp-ok-txt{font-size:.82rem;font-weight:700;color:var(--ok-ink)}

@media (max-width:820px){
  .imp-tabela thead{display:none}
  .imp-tabela tr{display:block;border-bottom:1px solid #eef0f5;padding:.5rem 0}
  .imp-tabela td{display:block;border:0;padding:.25rem .2rem}
  .imp-dir{text-align:left}
  .imp-qtd{width:8rem}
}

/* O clipe da nota de encomenda do cliente, ao lado do número. */
.enc-clipe{display:inline-flex;align-items:center;justify-content:center;
  width:1.4rem;height:1.4rem;margin-left:.3rem;border-radius:6px;vertical-align:-3px;
  color:var(--ink-2);background:color-mix(in srgb, var(--ink) 6%, transparent);border:0;cursor:pointer}
.enc-clipe:hover{background:color-mix(in srgb, var(--blue) 16%, transparent);color:var(--ink)}
.imp-doc-junto{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--ok-ink);
  margin-right:auto}

/* ===================================================================
   Encomendas por terminar — fechado por omissão
   ===================================================================
   Aberto, cada encomenda a meio trazia a lista das referências. Com uma
   fazia sentido; com quatro era meio ecrã antes de se ver a primeira
   marca. Fica uma linha, e a informação a uma carga de dedo. */
/* O mesmo caso do botao do som no video: a lista tem display:grid numa
   classe, e isso ganha ao display:none que o browser da ao [hidden]. Sem
   esta linha o painel nasce aberto e o "ver" nao faz nada. */
.rasc-painel-lista[hidden]{display:none}
.rasc-painel-cab{width:100%;background:none;border:0;padding:0;cursor:pointer;
  text-align:left;font:inherit}
.rasc-painel-cab strong{font-weight:700}
.rasc-painel-ver{margin-left:auto;font-size:.75rem;font-weight:700;color:var(--blue-d);
  border:1px solid color-mix(in srgb, var(--blue) 30%, transparent);border-radius:999px;padding:.1rem .55rem}
.rasc-painel-cab:hover .rasc-painel-ver{background:color-mix(in srgb, var(--blue) 10%, transparent)}
.rasc-painel.is-aberto .rasc-painel-ver{color:var(--ink-2);border-color:rgba(91,100,121,.3)}
.rasc-painel-deitar{font-size:.72rem;font-weight:600;color:var(--ink-3);background:none;
  border:0;cursor:pointer;padding:.15rem .3rem;border-radius:6px}
.rasc-painel-deitar:hover{color:var(--erro-ink);background:rgba(179,38,30,.08)}
.rasc-painel-deitar:disabled{opacity:.4;cursor:default}

/* A marca no cartão da representada: é aqui que se vê ONDE ficou trabalho
   a meio, sem ser preciso abrir o painel. */
.rasc-marca{position:absolute;top:.55rem;left:.55rem;z-index:5;
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:#a15c00;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.4);
  border-radius:999px;padding:.1rem .45rem;pointer-events:none}

/* A marca própria no cartão do produto.
   Dourado, que é a cor de acento da casa, e não verde nem azul: não é um
   aviso nem um preço, é uma distinção — aquela referência sai com o rótulo
   do cliente e não com o da fábrica. */
.cat-selo-marca{display:inline-flex;align-items:center;gap:.3rem;width:fit-content;
  font-size:10px;font-weight:800;line-height:1.3;
  color:#8a6a12;background:color-mix(in srgb, var(--acc2) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--acc2) 45%, transparent);border-radius:999px;padding:.1rem .5rem}
.cat-selo-marca i,.cat-selo-marca svg{flex:0 0 auto;color:var(--acc2)}

/* ===================================================================
   Pôr o portal no telemóvel
   ===================================================================
   Uma faixa em baixo, acima da barra do sistema. Em baixo e não em cima
   porque é onde o polegar chega, e porque em cima tapava o cabeçalho
   logo à chegada — que é justamente quando isto aparece. */
.inst-caixa{position:fixed;z-index:70;left:12px;right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:flex-start;gap:.85rem;
  background:color-mix(in srgb, var(--card) 96%, transparent);border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius:18px;padding:.9rem 1rem;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.55);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque);
  animation:inst-entra .28s ease}
@keyframes inst-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:640px){ .inst-caixa{left:auto;right:18px;max-width:23rem} }

.inst-icone{width:3rem;height:3rem;border-radius:12px;flex:0 0 auto;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.inst-corpo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.inst-corpo strong{font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.25}
.inst-corpo span{font-size:.76rem;color:var(--ink-2);line-height:1.35}
.inst-botao{margin-top:.35rem;align-self:flex-start;
  background:linear-gradient(180deg,#1b2a56,#101a3d);color:var(--on-blue);border:0;cursor:pointer;
  border-radius:999px;padding:.45rem 1.1rem;font-size:.82rem;font-weight:700;
  box-shadow:0 6px 16px -8px rgba(16,26,61,.8)}
.inst-fechar{flex:0 0 auto;background:none;border:0;cursor:pointer;
  font-size:1.35rem;line-height:1;color:var(--ink-3);padding:0 .15rem}
.inst-fechar:hover{color:var(--ink-2)}

/* Os dois passos do iPhone. Numerados e com o desenho do botão ao lado —
   dizer "carregue em Partilhar" a quem nunca reparou naquele ícone não
   chega; mostrar o ícone chega. */
.inst-passos{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem;
  counter-reset:passo}
.inst-passos li{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--ink-2);line-height:1.3}
.inst-passos li::before{counter-increment:passo;content:counter(passo);
  flex:0 0 auto;width:1.15rem;height:1.15rem;border-radius:999px;
  background:#101a3d;color:var(--on-blue);font-size:.66rem;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.inst-svg{width:17px;height:17px;flex:0 0 auto;color:var(--blue-d)}

/* A nota que diz que o cartão não é um botão.
   Parece uma frase a mais até se ver alguém a carregar no desenho do botão
   de Partilhar à espera que ele abra alguma coisa. Depois de se ver isso,
   passa a ser a frase mais importante do cartão. */
.inst-nota{margin-top:.5rem;padding-top:.5rem;border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-size:.72rem!important;color:#8b93a7!important;font-style:italic;line-height:1.3}

/* Com os passos, o cartão sobe para dar lugar à seta por baixo dele. */
.inst-caixa--passos{bottom:calc(58px + env(safe-area-inset-bottom,0px))}

/* A seta é IRMÃ do cartão, não filha. O cartão tem backdrop-filter com cantos
   redondos, e isso recorta os filhos posicionados para fora — foi o que
   comeu a bolinha da campainha. Fora do cartão, não há nada a recortar.
   Aponta para a barra do Safari, mesmo por baixo, no iPhone. */
.inst-seta{position:fixed;z-index:69;left:0;right:0;
  bottom:calc(6px + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;pointer-events:none;
  color:var(--ink);filter:drop-shadow(0 2px 6px rgba(255,255,255,.9))}
.inst-seta svg{width:26px;height:26px;animation:inst-aponta 1.25s ease-in-out infinite}
@keyframes inst-aponta{0%,100%{transform:translateY(-4px);opacity:.55}50%{transform:translateY(3px);opacity:1}}
@media (prefers-reduced-motion:reduce){ .inst-seta svg{animation:none;opacity:.85} }
@media (min-width:640px){ .inst-caixa--passos{bottom:calc(12px + env(safe-area-inset-bottom,0px))} .inst-seta{display:none} }

/* ======================================================================
   OS MEUS HABITUAIS  /  REPETIR A ÚLTIMA ENCOMENDA
   ======================================================================
   Duas coisas por cima da grelha do catálogo, na loja do cliente.

   O painel dos habituais nasce FECHADO, por decisão do João depois de ver
   o das encomendas por terminar ocupar meio ecrã: "quero apenas um botão
   onde a gente até pode carregar lá e abrir isto tudo". Aberto, seriam
   trinta linhas antes do primeiro produto.

   O "repetir a última" é que fica sempre à vista, e de propósito: é o
   atalho que faz a segunda visita valer a pena, e um atalho escondido
   atrás de um clique deixa de ser atalho. */
.hab-caixa{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}

.hab-repetir{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,#f7f9fc,#eef2f8);border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius:14px;padding:.75rem .9rem;color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease}
.hab-repetir:hover{border-color:color-mix(in srgb, var(--ink) 30%, transparent);box-shadow:0 6px 18px -12px rgba(16,26,61,.7)}
.hab-repetir:active{transform:translateY(1px)}
.hab-repetir i{width:20px;height:20px;flex:0 0 auto;color:var(--blue-d)}
.hab-repetir span{display:flex;flex-direction:column;min-width:0}
.hab-repetir strong{font-size:.86rem;font-weight:700;line-height:1.2}
.hab-repetir small{font-size:.72rem;color:var(--ink-2);margin-top:.1rem}

.hab-painel{border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);border-radius:14px;background:var(--card);overflow:hidden}
.hab-cab{display:flex;align-items:center;gap:.6rem;width:100%;cursor:pointer;
  background:none;border:0;padding:.7rem .9rem;color:var(--ink);text-align:left}
.hab-cab i{width:18px;height:18px;flex:0 0 auto;color:#d9a441}
.hab-cab strong{font-size:.86rem;font-weight:700;flex:1 1 auto;min-width:0}
.hab-n{flex:0 0 auto;font-size:.7rem;font-weight:800;color:var(--on-blue);background:#101a3d;
  border-radius:999px;padding:.1rem .45rem;min-width:1.35rem;text-align:center}
.hab-ver{flex:0 0 auto;font-size:.72rem;color:var(--ink-2)}
.hab-aberto .hab-ver{opacity:.45}
/* Uma classe com display: ganha ao [hidden] do browser. Já mordeu duas vezes
   — o botão de silêncio do vídeo e a lista das encomendas por terminar — por
   isso fica escrito, e não se apaga. */
.hab-corpo[hidden]{display:none}
.hab-corpo{border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);padding:.2rem .4rem .6rem}

.hab-lista{list-style:none;margin:0;padding:0}
.hab-linha{display:flex;align-items:center;gap:.6rem;padding:.5rem .5rem;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 6%, transparent)}
.hab-linha:last-child{border-bottom:0}
.hab-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.hab-txt strong{font-size:.8rem;font-weight:600;color:var(--ink);line-height:1.25}
.hab-cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;
  color:var(--ink-3);margin-right:.35rem}
.hab-meta{font-size:.7rem;color:var(--ink-3);line-height:1.3;display:flex;flex-wrap:wrap;gap:.3rem}
.hab-formato,.hab-marca{color:var(--ink-3)}
.hab-marca{color:#8a6d1f}
.hab-juntar{flex:0 0 auto;cursor:pointer;border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);background:var(--card);
  color:var(--ink);border-radius:999px;padding:.3rem .8rem;font-size:.75rem;font-weight:700}
.hab-juntar:hover{background:#101a3d;color:var(--on-blue);border-color:#101a3d}
.hab-juntar.hab-juntado,.hab-juntar:disabled{background:var(--ok-bg);color:var(--ok-ink);
  border-color:#a7f3d0;cursor:default}
.hab-todos{margin:.6rem .5rem 0;cursor:pointer;background:linear-gradient(180deg,#1b2a56,#101a3d);
  color:var(--on-blue);border:0;border-radius:999px;padding:.45rem 1.1rem;font-size:.78rem;font-weight:700}

/* O botão só desce para baixo em ecrãs mesmo estreitos. A 420 px — a
   largura de um iPhone normal — cabe à direita, e cada linha passa de 180
   para 90 px de altura: o dobro dos produtos à vista sem rolar. */
@media (max-width:359px){
  .hab-linha{flex-wrap:wrap}
  .hab-juntar{width:100%;margin-top:.35rem}
}

/* ======================================================================
   A AJUDA  —  o "?" ao lado de cada secção
   ======================================================================
   Encostado ao título, pequeno e discreto: quem sabe fazer nem repara
   nele; quem não sabe encontra-o sem procurar. Um centro de ajuda numa
   página à parte não é lido — ninguém interrompe o que está a fazer para
   ir procurar noutro sítio. Ou desiste, ou telefona. */
.ajuda-q{margin-left:.45rem;vertical-align:middle;cursor:pointer;
  width:1.15rem;height:1.15rem;border-radius:999px;border:1px solid #cbd5e1;
  background:var(--card);color:var(--ink-3);font-size:.7rem;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.ajuda-q:hover{background:#101a3d;border-color:#101a3d;color:var(--on-blue)}

.ajuda-fundo{position:fixed;inset:0;z-index:80;background:color-mix(in srgb, var(--ink) 45%, transparent);
  display:flex;align-items:center;justify-content:center;padding:1rem;
  animation:ajuda-entra .18s ease}
@keyframes ajuda-entra{from{opacity:0}to{opacity:1}}
.ajuda-cx{position:relative;background:var(--card);border-radius:18px;max-width:34rem;width:100%;
  max-height:85vh;overflow:auto;padding:1.4rem 1.5rem;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.6)}
.ajuda-fechar{position:absolute;top:.6rem;right:.8rem;background:none;border:0;cursor:pointer;
  font-size:1.5rem;line-height:1;color:var(--ink-3)}
.ajuda-fechar:hover{color:var(--ink-2)}
.ajuda-cx h3{margin:0 1.5rem .5rem 0;font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.3}
.ajuda-oque{margin:0 0 .9rem;font-size:.82rem;color:var(--ink-2);line-height:1.5}
.ajuda-passos{margin:0 0 .9rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.4rem}
.ajuda-passos li{font-size:.82rem;color:var(--ink);line-height:1.45}
.ajuda-atencao{margin:0;font-size:.78rem;color:#7c5e10;line-height:1.5;
  background:var(--aviso-bg);border:1px solid #fde68a;border-radius:10px;padding:.6rem .8rem}

.ajuda-pe{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid #e2e8f0}
.ajuda-perguntar{cursor:pointer;background:none;border:0;padding:0;
  font-size:.78rem;font-weight:600;color:var(--blue-d);text-decoration:underline}
/* Uma classe com display: ganha ao [hidden] do browser. Já mordeu três
   vezes neste projecto. Fica escrito, e não se apaga. */
.ajuda-form[hidden]{display:none}
.ajuda-form{margin-top:.7rem;display:flex;flex-direction:column;gap:.5rem}
.ajuda-texto{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:.55rem .7rem;
  font-size:.82rem;font-family:inherit;resize:vertical}
.ajuda-botoes{display:flex;flex-wrap:wrap;gap:.5rem}
.ajuda-enviar,.ajuda-whatsapp{cursor:pointer;border-radius:999px;padding:.4rem 1rem;
  font-size:.78rem;font-weight:700;border:0}
.ajuda-enviar{background:linear-gradient(180deg,#1b2a56,#101a3d);color:var(--on-blue)}
.ajuda-whatsapp{background:#25d366;color:#0b3d1f}
.ajuda-nota{font-size:.75rem}
.ajuda-nota-boa{color:var(--ok-ink)}
.ajuda-nota-ma{color:var(--erro-ink)}

/* A lista das dúvidas recebidas, no Painel. */
.duv-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.duv-item{border:1px solid #e2e8f0;border-radius:12px;padding:.7rem .85rem;background:var(--card)}
.duv-feita{opacity:.6;background:var(--bg)}
.duv-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.duv-cab strong{font-size:.82rem;color:var(--ink)}
.duv-papel{font-size:.68rem;color:var(--ink-3);background:var(--bg);border-radius:999px;padding:.05rem .45rem}
.duv-quando{font-size:.68rem;color:var(--ink-3);margin-left:auto}
.duv-ecra{font-size:.7rem;color:var(--ink-3);margin-top:.15rem}
.duv-texto{margin:.45rem 0 .5rem;font-size:.82rem;color:var(--ink);line-height:1.45;white-space:pre-wrap}
.duv-pe{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.duv-resp{font-size:.74rem;color:var(--blue-d);text-decoration:underline}
.duv-marcar{cursor:pointer;background:none;border:0;padding:0;font-size:.74rem;color:var(--ink-3);text-decoration:underline}
.duv-marcar:hover{color:var(--ink)}

/* O botão de ajuda do cliente. Discreto e sempre no mesmo canto — quem não
   precisa dele não repara, quem precisa sabe sempre onde está. Sobe acima da
   barra do carrinho para não ficar por baixo dela na hora de encomendar. */
.ajuda-cli-botao{position:fixed;z-index:60;right:14px;
  bottom:calc(84px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  background:color-mix(in srgb, var(--card) 96%, transparent);color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);border-radius:999px;
  padding:.5rem .9rem;font-size:.8rem;font-weight:700;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
  backdrop-filter:var(--sup-desfoque);-webkit-backdrop-filter:var(--sup-desfoque)}
.ajuda-cli-botao:hover{background:#101a3d;color:var(--on-blue);border-color:#101a3d}
.ajuda-cli-botao svg{width:17px;height:17px}
.ajuda-cx-cli .ajuda-texto{margin-bottom:.6rem}
@media print{ .ajuda-cli-botao{display:none} }

.duv-dono{margin:.1rem 0 .4rem;font-size:.7rem;color:var(--ok-ink);font-weight:600}
.duv-pegar{cursor:pointer;background:none;border:0;padding:0;font-size:.74rem;
  color:var(--blue-d);text-decoration:underline}
.duv-pegar:hover{color:var(--ink)}

/* A marca "Novo" no cartão do produto.
   Fica em BAIXO à esquerda: em cima já lá está o selo da espécie (à esquerda)
   e o IQF (à direita), e em baixo à direita está o botão da máquina
   fotográfica. Este era o único canto livre.
   Sem backdrop-filter de propósito: já nos mordeu três vezes — um filtro de
   fundo com cantos arredondados corta os filhos posicionados por cima. */
.selo-novo{
  position:absolute; left:8px; bottom:8px; z-index:3;
  display:inline-flex; align-items:center;
  height:22px; padding:0 9px; border-radius:999px;
  font-size:11px; font-weight:800; line-height:1; letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--on-blue); background:#16a34a;
  box-shadow:0 1px 4px rgba(15,23,42,.22);
  pointer-events:none;
}

/* A lista de produtos que aparece enquanto se escreve (ver
   public/js/procuraProduto.js).
   Vive presa ao ECRÃ (position:fixed) e pendurada no <body>, não dentro do
   formulário. É de propósito: uma caixa com cantos arredondados, um
   overflow escondido ou um filtro de fundo cortava-a pelo meio — já nos
   aconteceu três vezes com outras coisas posicionadas por cima. */
.pproc-lista{
  position:fixed; z-index:120;
  max-height:min(340px, 52vh); overflow-y:auto;
  background:var(--card); border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 10px 30px rgba(15,23,42,.16);
  padding:4px;
}
.pproc-item{
  display:flex; align-items:baseline; gap:8px; width:100%;
  padding:7px 9px; border:0; border-radius:8px; background:none;
  text-align:left; cursor:pointer; font-size:.8rem; line-height:1.3;
}
.pproc-item:hover, .pproc-item.is-marcado{ background:var(--bg) }
.pproc-cod{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.72rem; color:var(--ink-3); flex:0 0 auto; min-width:64px;
}
.pproc-nome{ color:var(--ink); flex:1 1 auto }
.pproc-vazio, .pproc-mais{
  padding:9px 10px; font-size:.75rem; color:var(--ink-3);
}
.pproc-mais{ border-top:1px solid #f1f5f9 }

/* ---- Rastreio dos e-mails (ver public/js/pages/email.js) --------------- */
.em-selos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.em-selo{
  display:inline-flex; align-items:center; height:19px; padding:0 8px;
  border-radius:999px; font-size:10px; font-weight:700; line-height:1;
  letter-spacing:.02em; text-transform:uppercase;
}
.cx-linha .em-selos{ margin-top:3px; gap:4px }
.cx-linha .em-selo{
  height:15px; padding:0 6px; font-size:9px; font-weight:600;
  text-transform:none; letter-spacing:0;
}
.em-selo-enviado{ color:var(--ink-3); background:var(--bg) }
.em-selo-aberto { color:var(--ok-ink); background:var(--ok-bg) }
.em-selo-doc    { color:var(--aviso-ink); background:var(--aviso-bg) }

.em-rastreio{
  margin:12px 0; padding:10px 12px;
  border:1px solid #e5e7eb; border-radius:12px; background:#fafafa;
}
.em-rastreio ul{ margin:0; padding:0; list-style:none; font-size:.8rem; color:var(--ink) }
.em-rastreio li{ padding:2px 0 }
.em-rastreio-nota{ margin:8px 0 0; font-size:.7rem; color:var(--ink-3); line-height:1.45 }

/* ---- Documentos do Drive juntos à mensagem ---------------------------- */
.em-docs-lista{ margin:0; padding:0; list-style:none }
.em-docs-lista li{
  display:flex; align-items:center; gap:8px; padding:5px 8px;
  font-size:.78rem; border-radius:8px; background:var(--bg); margin-top:4px;
}
.em-docs-lista svg, .em-docs-lista i{ width:14px; height:14px; color:var(--ink-3); flex:0 0 auto }
.em-docs-nome{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.em-docs-tipo{ font-size:.68rem; color:var(--aviso-ink); background:var(--aviso-bg); padding:1px 7px; border-radius:999px }
.em-docs-lista button{ border:0; background:none; cursor:pointer; color:var(--ink-3); padding:2px }
.em-docs-lista button:hover{ color:var(--erro-ink) }

/* ---- Escolher um ficheiro do Drive ------------------------------------ */
/* Presa ao ecrã e pendurada no body, pela mesma razão da procura de
   produtos: nenhuma caixa com cantos arredondados a pode cortar. */
.em-modal-fundo{
  position:fixed; inset:0; z-index:200; background:color-mix(in srgb, var(--ink) 35%, transparent);
  display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px 16px;
}
.em-modal{
  width:min(560px, 100%); max-height:76vh; display:flex; flex-direction:column;
  background:var(--card); border-radius:16px; box-shadow:0 20px 50px rgba(15,23,42,.28);
  overflow:hidden;
}
.em-modal-cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #f1f5f9; font-size:.9rem;
}
.em-modal-x{ border:0; background:none; cursor:pointer; color:var(--ink-3); padding:4px }
.em-modal-x:hover{ color:var(--ink) }
.em-modal-procura{ display:flex; gap:8px; padding:12px 14px; border-bottom:1px solid #f1f5f9 }
.em-modal-procura .input{ flex:1 1 auto }
.em-modal-corpo{ overflow-y:auto; padding:8px 10px 12px }
.em-modal-lista{ margin:0; padding:0; list-style:none }
.em-modal-lista button{
  display:flex; align-items:baseline; gap:10px; width:100%;
  padding:8px 10px; border:0; border-radius:10px; background:none;
  text-align:left; cursor:pointer; font-size:.82rem;
}
.em-modal-lista button:hover{ background:var(--bg) }
.em-modal-nome{ flex:1 1 auto; color:var(--ink) }
.em-modal-meta{ font-size:.72rem; color:var(--ink-3); flex:0 0 auto }

/* O interruptor do rastreio, no pé de quem escreve. */
.em-rastrear{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; color:var(--ink-3); cursor:pointer; user-select:none;
}
.em-rastrear input{ width:13px; height:13px; accent-color:#101a3d; cursor:pointer }
.em-rastrear:hover{ color:var(--ink) }

/* =======================================================================
   A CAIXA — o ecrã do correio (ver public/js/pages/email.js)
   Três colunas: as pastas, as conversas, e a conversa aberta com a ficha do
   cliente ao lado. No telemóvel é uma de cada vez — a classe "a-ler" no
   contentor faz a lista dar lugar à conversa.
   ======================================================================= */
.cx{
  /* As larguras vêm de variáveis para as divisórias as poderem arrastar. O
     que o João escolher fica guardado no computador dele. */
  --c-pastas:232px;
  --c-lista:380px;
  display:grid; grid-template-columns:var(--c-pastas) 5px var(--c-lista) 5px minmax(0, 1fr);
  gap:0; align-items:stretch;
  height:100%; min-height:0; background:var(--card);
  border-top:1px solid #e9edf3;
}
/* A divisória: fina, discreta, e engorda quando se lhe passa por cima. */
.cx-puxa{
  cursor:col-resize; background:var(--line); position:relative; user-select:none;
  /* Tem de ficar POR CIMA das colunas: sem isto, a zona sensível que
     transborda para os lados ficava tapada pela coluna seguinte e só a risca
     de 5 px é que se agarrava — quase impossível de acertar. */
  z-index:5;
  transition:background .12s ease;
}
.cx-puxa::after{
  content:""; position:absolute; inset:0 -5px;   /* apanha-se sem pontaria */
}
/* Uma pega, a meio, para se ver que aquilo se arrasta. Não se descobre um
   sítio para puxar que não tenha nada a dizer que é um sítio para puxar. */
.cx-puxa::before{
  content:""; position:absolute; left:50%; top:50%; width:3px; height:34px;
  transform:translate(-50%, -50%); border-radius:999px;
  background:#b9c2d4; transition:background .12s ease, height .12s ease;
}
.cx-puxa:hover::before, .cx-puxa.is-a-puxar::before{ background:var(--card); height:52px }
.cx-puxa:hover, .cx-puxa.is-a-puxar{ background:#3b66c4 }
body.cx-a-puxar{ cursor:col-resize; user-select:none }
body.cx-a-puxar iframe{ pointer-events:none }   /* senão a moldura come o rato */
@media (prefers-reduced-motion: reduce){ .cx-puxa{ transition:none } }
/* Sem cantos arredondados nem sombras entre as colunas: numa caixa de
   correio que ocupa o ecrã todo, cada caixinha a flutuar rouba espaço ao
   que interessa, que é caber mais uma linha de conversa. Divide-se com uma
   risca, como o Spark e como o Mail do Mac. */
.cx > *{ border-radius:0 }

/* ---- coluna 1: as pastas --------------------------------------------- */
/* O ECRÃ COMPACTO (o «C» que o João e o Rodrigo escolheram).
   A coluna das pastas em azul-escuro, como o resto do portal, e as conversas
   em linhas apertadas com uma barra de cor à esquerda por grupo. Cabe aqui
   perto do dobro das conversas — era a queixa dele, o ecrã que não aproveita
   o monitor. */
.cx-pastas{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  padding:12px 10px; background:#101a3d; border-right:0;
  overflow-y:auto;
}
.cx-nova{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 12px; margin-bottom:8px; border:0; border-radius:10px;
  background:#3b66c4; color:var(--on-blue); font-size:.83rem; font-weight:600; cursor:pointer;
}
.cx-nova:hover{ background:color-mix(in srgb, var(--blue) 86%, #fff) }
.cx-nova svg, .cx-nova i{ width:15px; height:15px }
.cx-pasta{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:6px 9px; border:0; border-radius:8px; background:none;
  font-size:.79rem; color:var(--nav-ink-2); text-align:left; cursor:pointer;
}
.cx-pasta svg, .cx-pasta i{ width:14px; height:14px; color:var(--nav-ink-2); flex:0 0 auto }
/* A COR DAS PASTAS, EM RISCO EM VEZ DE ÍCONE (opção 2, escolhida por ele).
   Em cima da coluna há ícones finos e cinzentos; em baixo havia pastas cor
   de laranja bem mais gordas. Eram duas linguagens no mesmo sítio, e foi
   isso que ele apontou. Agora a cor é um risco de 3px à esquerda da linha
   e o ícone de pasta sai — os de cima ficam a mandar sozinhos. */
.cx-pasta-cor{
  width:3px; align-self:stretch; min-height:14px; flex:0 0 auto;
  border-radius:2px; background:var(--c);
}
.cx-pasta:has(.cx-pasta-cor){ padding-left:7px; gap:9px }
.cx-pasta:hover{ background:var(--nav-hover); color:var(--nav-ink) }
.cx-pasta.is-on{ background:var(--nav-active); color:var(--nav-ink); font-weight:600 }
.cx-pasta.is-on svg, .cx-pasta.is-on i{ color:var(--nav-ink) }
.cx-conta{
  margin-top:auto; padding:10px 9px 4px; display:flex; align-items:center; gap:7px;
  font-size:.69rem; color:var(--nav-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cx-ponto{ width:7px; height:7px; border-radius:50%; background:#4ade80; flex:0 0 auto }
.cx-gmail{ display:flex; align-items:center; gap:6px; padding:6px 9px; font-size:.69rem; color:rgba(255,255,255,.5) }
.cx-gmail:hover{ color:var(--on-blue) }
.cx-gmail svg, .cx-gmail i{ width:12px; height:12px }

/* ---- coluna 2: as conversas ------------------------------------------ */
.cx-lista{
  display:flex; flex-direction:column; min-width:0;
  /* Um cinzento de propósito: a conversa aberta é branca e destaca-se desta.
     Era tudo branco e as duas colunas liam-se como uma só. */
  background:var(--bg); border-right:0; overflow:hidden;
}
.cx-lista-topo{ padding:0 0 9px; border-bottom:1px solid #e4e8f0; background:var(--bg) }
/* O título é a barra escura que amarra esta coluna à das pastas. */
.cx-lista-topo h1{
  font-size:.78rem; font-weight:600; letter-spacing:.01em; color:var(--nav-ink);
  margin:0 0 9px; padding:8px 13px; background:#101a3d;
}
.cx-lista-topo .cx-procura, .cx-lista-topo .cx-abas{ margin-inline:12px }
.cx-procura{ position:relative; display:flex; align-items:center }
.cx-procura svg, .cx-procura i{ position:absolute; left:10px; width:14px; height:14px; color:var(--ink-3); pointer-events:none }
.cx-procura input{
  width:100%; padding:7px 10px 7px 30px; font-size:.8rem;
  border:1px solid #e2e8f0; border-radius:10px; background:var(--bg);
}
.cx-procura input:focus{ outline:none; border-color:var(--blue); background:var(--card) }
.cx-abas{ display:none; gap:6px; overflow-x:auto; margin-top:9px; padding-bottom:2px }
.cx-abas button{
  flex:0 0 auto; padding:5px 11px; border:1px solid #e2e8f0; border-radius:999px;
  background:var(--card); font-size:.72rem; color:var(--ink-3); white-space:nowrap; cursor:pointer;
}
.cx-abas button.is-on{ background:#101a3d; border-color:#101a3d; color:var(--on-blue) }

.cx-lista-corpo{ flex:1 1 auto; overflow-y:auto; padding:0 0 6px }
.cx-nada, .cx-erro{ padding:22px 14px; font-size:.8rem; color:var(--ink-3); text-align:center }
.cx-erro{ color:var(--erro-ink) }
.cx-grupo + .cx-grupo{ margin-top:6px }
.cx-grupo-cab{
  display:flex; align-items:center; gap:7px; padding:9px 13px 4px;
  font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.cx-grupo-cab svg, .cx-grupo-cab i{ width:12px; height:12px }

.cx-linha{
  display:flex; gap:9px; width:100%; padding:6px 12px 6px 14px; border:0; border-radius:0;
  background:none; text-align:left; cursor:pointer; position:relative;
  border-bottom:1px solid #e9edf4;
}
/* A barra de cor à esquerda diz de que grupo é a conversa sem ocupar linha. */
.cx-linha::before{
  content:""; position:absolute; left:5px; top:7px; bottom:7px; width:3px;
  border-radius:2px; background:var(--marca, transparent);
}
.cx-linha:hover{ background:#eef1f7 }
.cx-linha.is-aberta{ background:var(--card); box-shadow:inset 0 0 0 1px #dbe3f7 }
/* No compacto a lista não mostra a fotografia nem a primeira linha do texto:
   é isso que faz caber o dobro das conversas. O avatar continua na conversa
   aberta, onde há espaço e serve para alguma coisa. */
.cx-linha .cx-av{ display:none }
.cx-linha .cx-resumo{ display:none }
.cx-av{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--on-blue); font-size:11px; font-weight:700; letter-spacing:.02em;
}
.cx-av-g{ width:44px; height:44px; font-size:15px }
.cx-av-p{ width:26px; height:26px; font-size:10px }
.cx-linha-txt{ flex:1 1 auto; min-width:0; display:block }
.cx-quem{ display:block; font-size:.79rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cx-linha.is-nova .cx-quem{ font-weight:700 }
.cx-onde{ color:var(--ink-3); font-weight:400 }
.cx-assunto{
  display:block; font-size:.78rem; color:var(--ink-2); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cx-linha.is-nova .cx-assunto{ font-weight:600; color:var(--ink) }
.cx-assunto svg, .cx-assunto i{ width:11px; height:11px; color:var(--ink-3); display:inline-block; vertical-align:-1px; margin-right:3px }
.cx-conta-msg{
  display:inline-block; min-width:16px; padding:0 4px; border-radius:999px;
  background:var(--line); color:var(--ink-2); font-size:.62rem; font-weight:700; text-align:center;
}
.cx-resumo{
  display:block; font-size:.72rem; color:var(--ink-3); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cx-meta{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:.68rem; color:var(--ink-3) }
.cx-ponto-novo{ width:7px; height:7px; border-radius:50%; background:#3b66c4 }
.cx-meta svg, .cx-meta i{ width:12px; height:12px; color:#eab308 }
.cx-paginas{ display:flex; gap:8px; justify-content:center; padding:14px 12px 10px }

/* A MARCA DO MES.
   A lista desce por cinquenta conversas e as datas curtas — 25/09, 12/08 —
   nao dizem onde se esta. Quando o mes muda entra esta linha. E uma
   divisoria com o nome pousado em cima dela, e nao um cabecalho a gritar:
   tem de se ver de relance sem roubar a atencao aos e-mails, que sao o
   que ali importa. */
.cx-mes{
  display:flex; align-items:center; gap:10px;
  margin:14px 12px 6px;
  color:var(--ink-3); font-size:.66rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.cx-mes::after{
  /* Só um risco DEPOIS do nome. Havia também um pedacinho antes e, tão
     curto, lia-se como um traço a mais — um erro de escrita, e não uma
     divisória. */
  content:""; height:1px; background:var(--line); flex:1 1 auto;
}
.cx-mes span{ flex:0 0 auto; white-space:nowrap }

/* O botao de ir buscar mais. Largo, para se acertar nele sem pontaria
   depois de se ter descido a lista toda. */
.cx-mais{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:999px;
  border:1px solid #d9dfeb; background:var(--card);
  color:var(--blue-d); font-size:.78rem; font-weight:600;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.cx-mais:hover{ background:#f2f5fb; border-color:#bccbe6 }
.cx-mais:disabled{ opacity:.6; cursor:default }
.cx-mais svg, .cx-mais i{ width:14px; height:14px }
/* OS ANEXOS NA LINHA DA LISTA.
   Etiquetas pequenas por baixo do resumo, com o símbolo do tipo à cor —
   vermelho o PDF, verde a folha de cálculo. Ficam cinzentas e discretas
   de propósito: quem corre a lista está a ler os assuntos, e o anexo é
   para se dar por ele de relance, não para competir. */
/* UMA LINHA SÓ, sempre. Com flex-wrap, três anexos punham o «+1» a cair
   para uma terceira linha e a conversa passava a ocupar o dobro da altura
   das outras — numa lista de cinquenta, isso é meio ecrã perdido. As
   etiquetas encolhem e o nome corta-se; o «+1» é que nunca encolhe, porque
   é a única coisa que diz que há mais. */
.cx-anxs{ display:flex; flex-wrap:nowrap; gap:5px; margin-top:4px; min-width:0; overflow:hidden }
.cx-anx{
  display:inline-flex; align-items:center; gap:4px; min-width:0; flex:0 1 auto;
  max-width:100%; padding:2px 7px 2px 4px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line);
  font-size:.66rem; color:var(--ink-3); line-height:1.5;
}
.cx-anx-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cx-anx .sim{ flex:0 0 auto }
.cx-anx-mais{
  display:inline-flex; align-items:center; flex:0 0 auto; padding:2px 7px; border-radius:999px;
  background:var(--line); font-size:.66rem; font-weight:600; color:var(--ink-3);
}
.cx-nada-mi{ display:inline-block; margin-top:6px; font-size:.7rem; opacity:.75 }
.cx-fim-lista{
  text-align:center; padding:16px 12px 12px;
  color:var(--ink-3); font-size:.72rem;
}

/* ---- coluna 3: a conversa -------------------------------------------- */
.cx-leitura{
  display:flex; flex-direction:column; min-width:0;
  background:var(--card); overflow:hidden;
}
.cx-vazio{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--ink-3); font-size:.85rem;
}
.cx-vazio svg, .cx-vazio i{ width:34px; height:34px }
.cx-leitura-topo{
  display:flex; align-items:center; gap:6px; padding:11px 13px; border-bottom:1px solid #f1f5f9;
}
.cx-leitura-topo h2{ flex:1 1 auto; min-width:0; font-size:.95rem; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 }
.cx-icone{ border:0; background:none; cursor:pointer; color:var(--ink-3); padding:5px; border-radius:8px; flex:0 0 auto }
.cx-icone:hover{ background:var(--bg); color:var(--ink) }
.cx-icone svg, .cx-icone i{ width:15px; height:15px }
.cx-icone-perigo:hover{ color:var(--erro-ink) }
.cx-voltar{ display:none }

.cx-leitura-corpo{
  flex:1 1 auto; overflow-y:auto; display:grid;
  grid-template-columns:minmax(0, 1fr) 270px; gap:20px; padding:18px 20px;
}
@media (min-width:1600px){
  .cx-leitura-corpo{ grid-template-columns:minmax(0, 1fr) 300px; padding:22px 28px }
}
.cx-fio{ min-width:0 }
.cx-msg{ border:1px solid #eef2f7; border-radius:14px; padding:12px; margin-bottom:10px; background:var(--card) }
.cx-msg.is-nossa{ background:#f7f9ff; border-color:#e3e9f8 }
.cx-msg-topo{ display:flex; align-items:center; gap:8px; margin-bottom:8px }
.cx-msg-quem{ font-size:.8rem; font-weight:600; color:var(--ink); flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cx-msg-data{ font-size:.68rem; color:var(--ink-3); flex:0 0 auto }
.cx-msg-corpo{ font-size:.82rem; color:var(--ink) }
.cx-texto{ white-space:pre-wrap; font-family:inherit; font-size:.82rem; margin:0; color:var(--ink) }
/* A moldura do corpo de um e-mail. A altura é posta pelo JS, ao medir o que
   lá está dentro — tinha 180 px fixos e o e-mail ficava escondido lá dentro. */
.cx-frame{ width:100%; height:180px; min-height:60px; border:0; background:var(--card);
  display:block; transition:height .12s ease }
@media (prefers-reduced-motion: reduce){ .cx-frame{ transition:none } }
/* Quando é tão alto que se corta, diz-se — e o «Ver em grande» está ao lado. */
.cx-frame[data-cortado="sim"]{ border-bottom:2px dashed #e2e8f0 }
.cx-anexos{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.cx-anexo{
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px;
  border:1px solid #e2e8f0; border-radius:999px; background:var(--card);
  font-size:.72rem; color:var(--ink-2); cursor:pointer;
}
.cx-anexo:hover{ border-color:var(--blue); color:var(--ink) }
.cx-anexo svg, .cx-anexo i{ width:12px; height:12px; color:var(--ink-3) }
.cx-anexo-peso{ color:var(--ink-3) }
.cx-responder-atalhos{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px }

/* ---- a ficha do cliente, ao lado -------------------------------------- */
.cx-ficha{
  align-self:start; padding:14px; border:1px solid #eef2f7; border-radius:14px;
  background:#fafbfd; font-size:.78rem;
}
.cx-ficha h3{ margin:10px 0 2px; font-size:.9rem; font-weight:700; color:var(--ink); line-height:1.25 }
.cx-ficha-sub{ margin:0 0 10px; font-size:.72rem; color:var(--ink-3); line-height:1.45; word-break:break-word }
.cx-ficha-tag{
  display:inline-block; margin:0 0 10px; padding:2px 9px; border-radius:999px;
  background:var(--aviso-bg); color:var(--aviso-ink); font-size:.68rem; font-weight:700;
}
.cx-kv{ margin:0 0 12px; display:grid; grid-template-columns:1fr; gap:2px }
.cx-kv dt{ font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-3); margin-top:7px }
.cx-kv dd{ margin:0; color:var(--ink); font-size:.78rem }
.cx-kv-fraco{ color:var(--ink-3); font-size:.7rem }
.cx-bt{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:7px 10px; margin-top:6px; border:1px solid #e2e8f0; border-radius:10px;
  background:var(--card); font-size:.76rem; color:var(--ink-2); cursor:pointer;
}
.cx-bt:hover{ border-color:var(--blue); color:var(--ink) }
.cx-bt svg, .cx-bt i{ width:13px; height:13px }
.cx-bt-ligar{ background:#101a3d; border-color:#101a3d; color:var(--on-blue) }
.cx-bt-ligar:hover{ background:#1b2a5e; color:var(--on-blue) }
.cx-perguntar{ margin-top:12px; padding-top:12px; border-top:1px solid #e9edf3 }
.cx-perguntar p{ margin:0 0 7px; font-size:.76rem; color:var(--ink-2) }
.cx-perguntar select{
  width:100%; padding:6px 8px; font-size:.76rem;
  border:1px solid #e2e8f0; border-radius:9px; background:var(--card);
}
.cx-perguntar-nota{ margin-top:8px !important; font-size:.68rem !important; color:var(--ink-3) !important }
.cx-perguntar-tit{
  margin:0 0 4px !important; font-size:.7rem !important; font-weight:700 !important;
  letter-spacing:.06em; text-transform:uppercase; color:var(--blue-d) !important;
}
.cx-perguntar-porque{
  margin:0 0 9px !important; font-size:.75rem !important; line-height:1.55 !important;
  color:var(--ink-2) !important;
}
.cx-perguntar-porque strong{ color:var(--ink); font-weight:600 }

/* ---- telemóvel e tablet ----------------------------------------------- */
@media (max-width:1100px){
  /* No telemóvel não há colunas para arrastar. */
  .cx{ grid-template-columns:1fr; height:auto; min-height:0 }
  .cx-pastas, .cx-puxa{ display:none }
  .cx-abas{ display:flex }
  .cx-lista{ height:auto }
  .cx-lista-corpo{ max-height:none; overflow:visible }
  .cx-leitura{ display:none }
  .cx.a-ler .cx-lista{ display:none }
  .cx.a-ler .cx-leitura{ display:flex }
  .cx-voltar{ display:inline-flex }
  .cx-leitura-corpo{ grid-template-columns:1fr }
  .cx-ficha{ order:-1 }
}

/* O correio ocupa o ecrã todo.
   O resto do portal vive numa coluna central de 1152px, que é o certo para
   um formulário ou uma tabela. Para uma caixa de correio não é: fica uma
   faixa estreita ao meio com metade do ecrã em branco dos dois lados, e ao
   lado do Spark ou do Gmail parece um brinquedo. Aqui tira-se o tecto e as
   margens, e a caixa vai de parede a parede. */
main.ecra-cheio{
  width:100%; max-width:none; margin:0; padding:0;
  height:calc(100vh - var(--cx-cabecalho, 132px));
  height:calc(100dvh - var(--cx-cabecalho, 132px));   /* iPhone: a barra do browser entra e sai */
  display:flex; flex-direction:column; min-height:0;
}
main.ecra-cheio > *{ flex:1 1 auto; min-height:0 }
@media (max-width:1100px){
  main.ecra-cheio{ height:auto; display:block; padding:0 }
}

/* O caminho das pastas, dentro do escolher-do-Drive. */
.em-caminho{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:8px 14px; border-bottom:1px solid #f1f5f9;
  font-size:.74rem; color:var(--ink-3);
}
.em-caminho button{
  display:inline-flex; align-items:center; gap:5px;
  border:0; background:none; padding:2px 4px; border-radius:6px;
  color:var(--ink-2); cursor:pointer; font-size:.74rem;
}
.em-caminho button:hover{ background:var(--bg); color:var(--ink) }
.em-caminho svg, .em-caminho i{ width:12px; height:12px }
.em-caminho-q{ color:var(--ink); font-weight:600 }
.em-modal-lista button.is-pasta .em-modal-nome{ font-weight:600; color:var(--ink) }
.em-modal-lista button svg, .em-modal-lista button i{ width:14px; height:14px; color:var(--ink-3); flex:0 0 auto }
.em-modal-seta{ margin-left:auto }

/* "guardado" — a garantia silenciosa de que a mensagem não se perde. */
.em-guardado{
  font-size:.7rem; color:var(--ok-ink); font-weight:600;
}

/* Como é que o documento do Drive vai: por link ou agarrado. */
.em-modo{ padding:12px 14px 16px }
.em-modo-nome{
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:.86rem; font-weight:600; color:var(--ink);
}
.em-modo-nome svg, .em-modo-nome i{ width:15px; height:15px; color:var(--ink-3); flex:0 0 auto }
.em-modo-op{
  display:block; width:100%; text-align:left; margin-bottom:8px;
  padding:11px 13px; border:1px solid #e2e8f0; border-radius:12px;
  background:var(--card); cursor:pointer;
}
.em-modo-op:hover{ border-color:var(--blue); background:#f8fafd }
.em-modo-op strong{ display:block; font-size:.84rem; color:var(--ink); margin-bottom:2px }
.em-modo-op span{ display:block; font-size:.74rem; color:var(--ink-3); line-height:1.45 }
.em-modo-voltar{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  border:0; background:none; cursor:pointer; font-size:.76rem; color:var(--ink-3); padding:4px;
}
.em-modo-voltar:hover{ color:var(--ink) }
.em-modo-voltar svg, .em-modo-voltar i{ width:13px; height:13px }

/* Trocar link/anexo na lista dos escolhidos, sem tirar e voltar a pôr. */
.em-docs-troca{ display:inline-flex; border:1px solid #e2e8f0; border-radius:999px; overflow:hidden; flex:0 0 auto }
.em-docs-troca button{
  border:0; background:var(--card); padding:2px 10px; font-size:.68rem;
  color:var(--ink-3); cursor:pointer;
}
.em-docs-troca button.is-on{ background:#101a3d; color:var(--on-blue); font-weight:600 }

/* A ASSINATURA NÃO PODE EMPURRAR OS BOTÕES PARA FORA DO ECRÃ.
   Foi o que aconteceu: abre-se a assinatura e os botões de anexar e de
   enviar desaparecem.
   A causa é antiga e tem nome. A assinatura é HTML que vem do Gmail — muitas
   vezes com uma tabela larga, uma imagem grande, uma largura fixa lá dentro.
   Numa coluna flexível, um filho recusa-se a encolher abaixo do tamanho do
   seu conteúdo a menos que se lhe diga que pode (min-width:0). Sem isso, a
   assinatura larga estica a caixa de escrita toda, a caixa passa a ser mais
   larga do que a coluna, e o que está mais à direita — os botões — fica
   cortado pela margem.
   Duas travas: ninguém aqui dentro pode ser mais largo do que a coluna, e a
   assinatura, se for larga, rola dentro da sua própria caixa. */
.em-escrever{ min-width:0; max-width:100% }
.em-escrever > *{ min-width:0; max-width:100% }
.em-assinatura-corpo{ max-width:100%; overflow-x:auto }
.em-assinatura-corpo table{ max-width:100% }
.em-assinatura-corpo *{ max-width:100% !important }

/* E, por garantia, os botões ficam colados ao fundo da caixa de escrita.
   Mesmo com uma mensagem comprida, o «Enviar» está sempre à mão sem se ter
   de rolar até ao fim. Sem backdrop-filter — já nos cortou filhos
   posicionados três vezes. */
.em-escrever-pe{
  position:sticky; bottom:0; z-index:2;
  padding:8px 0 2px; margin-top:2px;
  background:var(--card);
  border-top:1px solid #f1f5f9;
}
.cx-msg .em-escrever-pe, .em-escrever-nova .em-escrever-pe{ background:var(--card) }

/* =======================================================================
   A LARGURA DO PORTAL
   O portal estava preso a 1152 px, centrado. Num portátil não se nota; num
   monitor grande — e o João trabalha com dois — fica uma coluna estreita ao
   meio com meio ecrã em branco de cada lado, e o cabeçalho ainda por cima
   não acompanhava o que estava por baixo.
   Agora a largura sobe por degraus, conforme o ecrã dá. Sobe, mas não sem
   fim: uma linha de texto com 2 500 px é ilegível — o olho perde a linha ao
   voltar para a esquerda. Os degraus param onde uma tabela ainda se lê.
   O cabeçalho usa esta mesma classe, por isso acompanha sempre.
   ======================================================================= */
.casca{
  width:100%; max-width:1152px; margin-left:auto; margin-right:auto;
  padding-left:1.5rem; padding-right:1.5rem;
}
@media (min-width:1400px){ .casca{ max-width:1320px } }
@media (min-width:1700px){ .casca{ max-width:1560px; padding-left:2rem; padding-right:2rem } }
@media (min-width:2000px){ .casca{ max-width:1800px } }

/* E as páginas que ocupam mesmo tudo — o correio — não têm tecto nenhum. */
.casca-cheia{ max-width:none; padding-left:1.25rem; padding-right:1.25rem }
@media (min-width:1700px){ .casca-cheia{ max-width:none } }
@media (min-width:2000px){ .casca-cheia{ max-width:none } }

/* As pastas dele, no correio — os marcadores do Gmail. */
.cx-pastas-titulo{
  margin:13px 0 3px; padding:0 9px;
  font-size:.61rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--nav-ink-2);
}
.cx-pastas-vazio{ padding:2px 9px 4px; font-size:.71rem; color:var(--nav-ink-2) }
.cx-pasta-n{
  margin-left:auto; min-width:18px; padding:0 5px; border-radius:999px;
  background:var(--nav-hover); color:var(--nav-ink-2);
  font-size:.62rem; font-weight:700; text-align:center;
}
.cx-pasta.is-on .cx-pasta-n{ background:var(--nav-ink); color:var(--nav-bg) }
.cx-pasta-nova{ color:var(--nav-ink-2); margin-top:2px }
.cx-pasta-nova:hover{ color:var(--on-blue) }

/* Arrumar a conversa numa pasta. */
.cx-arrumar-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:60;
  min-width:210px; max-height:320px; overflow-y:auto;
  background:var(--card); border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.16); padding:5px;
}
.cx-arrumar-menu button{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 9px; border:0; border-radius:9px; background:none;
  font-size:.79rem; color:var(--ink-2); text-align:left; cursor:pointer;
}
.cx-arrumar-menu button:hover{ background:var(--bg); color:var(--ink) }
.cx-arrumar-menu svg, .cx-arrumar-menu i{ width:14px; height:14px; color:var(--ink-3); flex:0 0 auto }
.cx-arrumar-nova{ border-top:1px solid #f1f5f9 !important; border-radius:0 0 9px 9px !important; color:var(--blue-d) !important }
.cx-arrumar-vazio{ padding:9px 10px; margin:0; font-size:.75rem; color:var(--ink-3) }
/* O botão que abre este menu precisa de ser a âncora dele. */
.cx-leitura-topo{ position:relative }

/* ---------------------------------------------------------------------------
   Símbolos de pasta e de ficheiro (ver public/js/simbolos.js)
   Traço de 2,25 px, pontas arredondadas, cada tipo com a sua cor. O desenho
   está no JS; aqui só vivem as cores, para se mudarem num sítio só.
--------------------------------------------------------------------------- */
:root{
  --sim-pasta:#d59a1f;
  --sim-disco:#101a3d;
  --sim-pdf:#cf3626;
  --sim-folha:#17794a;
  --sim-doc:#2b5bd7;
  --sim-imagem:#7a45c9;
  --sim-slides:#d1630b;
  --sim-outro:#6b7488;
}
.sim{ flex:0 0 auto; vertical-align:-.15em; color:var(--sim-outro) }
.sim-pasta{ color:var(--sim-pasta) }
.sim-disco{ color:var(--sim-disco) }
.sim-pdf{ color:var(--sim-pdf) }
.sim-folha{ color:var(--sim-folha) }
.sim-doc{ color:var(--sim-doc) }
.sim-imagem{ color:var(--sim-imagem) }
.sim-slides{ color:var(--sim-slides) }
.sim-outro{ color:var(--sim-outro) }

/* ---------------------------------------------------------------------------
   A ajuda à escrita dos e-mails (ver public/js/pages/email.js e lib/ia.js)
   O resultado aparece SEMPRE ao lado do que ele escreveu. Nunca por cima.
--------------------------------------------------------------------------- */
.em-ia[hidden]{ display:none }   /* uma classe com display: ganha ao [hidden] do browser */
.em-ia-ajuda[hidden]{ display:none }
.em-ia-ajuda{ display:contents }   /* os botões continuam a ser filhos da barra */
.em-ia{ margin-top:8px }
.em-ia-bts{ display:flex; flex-wrap:wrap; align-items:center; gap:6px }
.em-ia-tit{
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin-right:2px;
}
.em-ia-sep{ width:1px; height:16px; background:var(--line); margin:0 4px }
.em-ia-bt{
  font:inherit; font-size:.74rem; font-weight:600; cursor:pointer;
  padding:4px 11px; border:1px solid #e2e8f0; border-radius:999px;
  background:var(--card); color:var(--ink-2); min-width:34px;
}
.em-ia-bt:hover{ border-color:var(--blue); color:var(--ink); background:var(--bg) }
.em-ia-bt:disabled{ opacity:.45; cursor:default }
.em-ia-bt:focus-visible{ outline:2px solid #3b66c4; outline-offset:1px }

.em-ia-res[hidden]{ display:none }
.em-ia-res{
  margin-top:9px; border:1px solid #e2e8f0; border-radius:12px;
  background:#fbfcfe; overflow:hidden;
}
.em-ia-lado{ display:grid; grid-template-columns:1fr 1fr; gap:0 }
.em-ia-col{ padding:10px 12px; min-width:0 }
.em-ia-col + .em-ia-col{ border-left:1px solid #e9edf3 }
.em-ia-col.is-nova{ background:var(--card) }
.em-ia-col h4{
  margin:0 0 5px; font-size:.65rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.em-ia-col.is-nova h4{ color:var(--blue-d) }
.em-ia-txt{
  font-size:.8rem; line-height:1.6; color:var(--ink);
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:260px; overflow-y:auto;
}
.em-ia-fora{ background:var(--erro-bg); color:#991b1b; text-decoration:line-through; border-radius:3px }
.em-ia-dentro{ background:var(--ok-bg); color:var(--ok-ink); border-radius:3px }
.em-ia-pe{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:9px 12px; border-top:1px solid #e9edf3; background:var(--card);
}
.em-ia-deixa{
  font:inherit; font-size:.78rem; cursor:pointer; border:0; background:none;
  color:var(--ink-3); text-decoration:underline; padding:0;
}
.em-ia-deixa:hover{ color:var(--ink) }
.em-ia-nota{ font-size:.71rem; color:var(--ink-3) }
/* No telemóvel não cabem duas colunas: fica uma por baixo da outra. */
@media (max-width:640px){
  .em-ia-lado{ grid-template-columns:1fr }
  .em-ia-col + .em-ia-col{ border-left:0; border-top:1px solid #e9edf3 }
}

/* A tradução das mensagens que chegam (ver public/js/pages/email.js) */
.cx-traduz[hidden]{ display:none }
.cx-traduz{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:0 0 7px; padding:5px 9px; border-radius:8px; background:var(--bg);
}
.cx-traduz-selo{ font-size:.71rem; color:var(--ink-3); font-weight:600 }
.cx-traduz-erro{ font-size:.71rem; color:var(--erro-ink) }
.cx-traduz-bt{
  font:inherit; font-size:.72rem; font-weight:600; cursor:pointer; padding:0;
  border:0; background:none; color:var(--blue-d); text-decoration:underline;
}
.cx-traduz-bt:hover{ color:var(--ink) }
.em-ia-aviso{
  margin:7px 0 0; padding:7px 10px; border-radius:8px;
  background:var(--aviso-bg); border:1px solid #fde68a; color:var(--aviso-ink); font-size:.74rem; line-height:1.5;
}
.em-ia-aviso strong{ color:var(--aviso-ink) }

/* O assistente de dúvidas, dentro da ajuda (ver public/js/ajuda.js) */
.ajuda-resposta[hidden]{ display:none }
.ajuda-resposta{
  margin:9px 0; padding:11px 13px; border-radius:11px;
  background:#eef2ff; border:1px solid #d9e1fb;
}
.ajuda-resposta-txt{
  margin:0; font-size:.83rem; line-height:1.65; color:var(--ink); white-space:pre-wrap;
}
.ajuda-resolveu{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-top:10px; padding-top:9px; border-top:1px solid #d9e1fb; font-size:.76rem; color:var(--ink-3);
}
.ajuda-resolveu button{
  font:inherit; font-size:.76rem; font-weight:600; cursor:pointer;
  padding:4px 11px; border-radius:999px; border:1px solid #c7d2fe; background:var(--card); color:var(--blue-d);
}
.ajuda-resolveu button:hover{ background:var(--bg); border-color:var(--blue) }
.ajuda-resolveu button:disabled{ opacity:.5; cursor:default }

/* O microfone (ver public/js/ditado.js). Só aparece se o navegador souber
   mesmo fazer isto — um microfone que não grava é pior do que nenhum. */
.ditado{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font:inherit; font-size:.74rem; font-weight:600; cursor:pointer;
  padding:4px 12px 4px 10px; border:1px solid #e2e8f0; border-radius:999px;
  background:var(--card); color:var(--ink-2);
}
.ditado:hover{ border-color:var(--blue); color:var(--ink) }
.ditado:focus-visible{ outline:2px solid #3b66c4; outline-offset:1px }
.ditado-mic{ width:15px; height:15px; flex:0 0 auto; position:relative }
.ditado-mic::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:7px; height:9px; border-radius:999px; background:currentColor;
}
.ditado-mic::after{
  content:""; position:absolute; left:50%; top:7.5px; transform:translateX(-50%);
  width:13px; height:6px; border:1.6px solid currentColor; border-top:0;
  border-radius:0 0 999px 999px;
}
.ditado.is-on{ background:var(--erro-bg); border-color:#fca5a5; color:var(--erro-ink) }
.ditado.is-on .ditado-mic{ animation:ditado-pulsa 1.1s ease-in-out infinite }
@keyframes ditado-pulsa{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion: reduce){
  .ditado.is-on .ditado-mic{ animation:none }
}

/* O botão de perguntar da equipa VIVE NA BARRA DE CIMA (ver ui.js).
   Estas regras ficam para quem ainda tenha a versão antiga em cache; o
   botão deixou de ser desenhado. */
.ajuda-eq-botao{
  position:fixed; z-index:60; right:16px;
  /* Mais acima do que o canto: o Netlify põe o emblema «Powered by Netlify»
     exactamente aqui em baixo à direita, e ficava por cima do nosso botão.
     O emblema desliga-se nas definições do projeto (Project configuration >
     General), mas o botão não pode depender disso para se ver. */
  bottom:calc(72px + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:#101a3d; color:var(--on-blue);
  border:0; border-radius:999px; padding:9px 15px 9px 13px;
  font:inherit; font-size:.79rem; font-weight:600;
  box-shadow:0 10px 28px -14px rgba(16,26,61,.9);
}
.ajuda-eq-botao:hover{ background:#1b2a5e }
.ajuda-eq-botao:focus-visible{ outline:2px solid #3b66c4; outline-offset:2px }
.ajuda-eq-botao svg{ width:16px; height:16px; flex:0 0 auto }
@media (max-width:520px){
  .ajuda-eq-botao span{ display:none }
  .ajuda-eq-botao{ padding:11px; border-radius:999px }
}
@media print{ .ajuda-eq-botao{ display:none } }

/* ---------------------------------------------------------------------------
   A assistente da caixa de escrever (ver public/js/pages/email.js)
   Só toca no rascunho, e nem isso sem se ver. Nunca envia.
--------------------------------------------------------------------------- */
.em-as[hidden]{ display:none }
/* A MESMA COISA EM CIMA E EM BAIXO.
   O botão da barra é laranja e chama-se IA RMota; esta linha, que é a
   MESMA assistente, estava azul e chamava-se «Assistente». Duas caras para
   a mesma coisa, e o João reparou logo: é o mesmo bicho, tem de ter a mesma
   cor e o mesmo nome. O laranja aqui é uma moldura e não um bloco — o
   único bloco cheio é o «Fazer», como lá em cima é o próprio botão. */
.em-as{ margin-top:10px; padding:11px 12px; border:1px solid color-mix(in srgb, var(--acc2) 34%, transparent); border-radius:12px;
        background:linear-gradient(180deg,color-mix(in srgb, var(--acc2) 7%, transparent),color-mix(in srgb, var(--card) 90%, transparent)) }
.em-as-linha{ display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.em-as-campo{
  flex:1 1 260px; min-width:0; font:inherit; font-size:.82rem;
  padding:7px 11px; border:1px solid #d7dff2; border-radius:9px; background:var(--card); color:var(--ink);
}
.em-as-campo::placeholder{ color:var(--ink-3) }
.em-as-campo:focus{ outline:none; border-color:#e07b1f; box-shadow:0 0 0 3px rgba(224,123,31,.14) }
.em-as-bt{
  font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; flex:0 0 auto;
  padding:7px 16px; border:0; border-radius:999px; color:var(--on-blue);
  background:linear-gradient(180deg,#eb8b2c,#e07b1f);
  box-shadow:0 6px 16px -8px rgba(224,123,31,.95), inset 0 1px 0 rgba(255,255,255,.34);
}
.em-as-bt:hover{ filter:brightness(1.07) }
.em-as-bt:disabled{ opacity:.5; cursor:default }
.em-as-tons{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px }
.em-as-tom{
  font:inherit; font-size:.71rem; font-weight:600; cursor:pointer;
  padding:3px 10px; border:1px solid color-mix(in srgb, var(--acc2) 34%, transparent); border-radius:999px;
  background:var(--sup-fundo); color:var(--aviso-ink);
}
.em-as-tom:hover{ background:color-mix(in srgb, var(--acc2) 12%, transparent); border-color:#e07b1f; color:#8f4d12 }

.em-as-res[hidden]{ display:none }
.em-as-res{ margin-top:10px; border-top:1px solid #e2e8f0; padding-top:10px }
.em-as-fiz, .em-as-naofiz{ margin:0 0 9px; padding-left:1.05rem; font-size:.78rem; line-height:1.6 }
.em-as-fiz{ color:var(--ok-ink) }
.em-as-naofiz{ color:var(--aviso-ink) }
.em-as-campo-novo{ margin:8px 0; font-size:.8rem; color:var(--ink) }
.em-as-achou{ margin:9px 0 }
.em-as-achou-tit{ margin:0 0 5px; font-size:.75rem; color:var(--ink-3) }
.em-as-ficheiros{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px }
.em-as-ficheiros button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  font:inherit; font-size:.79rem; cursor:pointer;
  padding:6px 10px; border:1px solid #e2e8f0; border-radius:9px; background:var(--card); color:var(--ink);
}
.em-as-ficheiros button:hover{ border-color:var(--blue); background:var(--bg) }
.em-as-ficheiros button span:first-of-type{ flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.em-as-peso{ color:var(--ink-3); font-size:.72rem; flex:0 0 auto; font-variant-numeric:tabular-nums }
.em-as-ficheiros button.is-junto{ border-color:#86efac; background:var(--ok-bg); cursor:default }
.em-as-ficheiros button.is-junto::after{ content:"junto"; font-size:.68rem; color:var(--ok-ink); font-weight:600 }
.em-as-nada{ margin:8px 0; font-size:.76rem; color:var(--aviso-ink) }
.em-as-pe{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px }

/* «O que é que isto quer?» — a leitura de um e-mail recebido */
.cx-barra-msg{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 7px }
.cx-barra-msg .cx-traduz{ margin:0 }
.cx-avaliar[hidden]{ display:none }
.cx-avaliar{
  font:inherit; font-size:.73rem; font-weight:600; cursor:pointer;
  padding:5px 12px; border:1px solid #dbe3f7; border-radius:999px;
  background:#f6f8ff; color:var(--blue-d);
}
.cx-avaliar:hover{ border-color:var(--blue); background:#eef2fd }
.cx-avaliar:disabled{ opacity:.55; cursor:default }
.cx-aval[hidden]{ display:none }
.cx-aval{
  margin:0 0 10px; padding:12px 14px; border:1px solid #dbe3f7;
  border-radius:12px; background:linear-gradient(180deg,#f6f8ff,#fff);
}
.cx-aval-lista{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:.81rem }
.cx-aval-lista dt{
  font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--blue-d); padding-top:2px; white-space:nowrap;
}
.cx-aval-lista dd{ margin:0; color:var(--ink); line-height:1.6 }
.cx-aval-solto{ margin:0; font-size:.81rem; line-height:1.6; white-space:pre-wrap }
.cx-aval-pe{ display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:11px; padding-top:9px; border-top:1px solid #dbe3f7 }
@media (max-width:560px){
  .cx-aval-lista{ grid-template-columns:1fr; gap:1px 0 }
  .cx-aval-lista dd{ margin-bottom:7px }
}

/* A assistente à vista na conversa, sem ser preciso abrir a caixa de escrever */
.em-as-conversa{ margin-top:12px }
.em-as-conversa .em-as-campo{ flex:1 1 220px }

/* «Ver em grande» — um e-mail por cima de tudo, para as newsletters largas */
.cx-grande-bt{
  font:inherit; font-size:.73rem; font-weight:600; cursor:pointer;
  padding:5px 12px; border:1px solid #e2e8f0; border-radius:999px;
  background:var(--card); color:var(--ink-3);
}
.cx-grande-bt:hover{ border-color:var(--blue); color:var(--ink) }
.cx-grande{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:max(18px, env(safe-area-inset-top,0px)) 18px 18px;
  background:color-mix(in srgb, var(--nav-bg) 55%, transparent);
}
.cx-grande-cx{
  display:flex; flex-direction:column; width:min(1100px, 100%); height:min(90vh, 100%);
  background:var(--card); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.cx-grande-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-bottom:1px solid #e9edf3;
  font-size:.82rem; font-weight:600; color:var(--ink); flex:0 0 auto;
}
.cx-grande-x{
  font:inherit; font-size:1.5rem; line-height:1; cursor:pointer;
  border:0; background:none; color:var(--ink-3); padding:0 4px;
}
.cx-grande-x:hover{ color:var(--ink) }
.cx-grande-frame{ flex:1 1 auto; width:100%; border:0; background:var(--card) }
.cx-grande-texto{ flex:1 1 auto; overflow:auto; padding:16px; margin:0 }

/* O rodapé da conversa — responder, encaminhar e a assistente, sempre à
   vista. Estava no fim do fio das mensagens e ia-se embora ao rolar. */
.cx-leitura-pe{
  flex:0 0 auto; padding:11px 20px 13px; border-top:1px solid #e9edf3;
  background:var(--card); box-shadow:0 -8px 20px -18px rgba(16,26,61,.5);
}
@media (min-width:1600px){ .cx-leitura-pe{ padding:12px 28px 14px } }
.cx-leitura-pe .cx-responder-atalhos{ margin:0 }
.cx-leitura-pe .em-as-conversa{ margin-top:9px }

/* A etiqueta da linha da assistente — sem ela, aquilo é um campo sem nome e
   um botão «Fazer» que não diz fazer o quê. */
.em-as-tit{
  display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--aviso-ink);
}
.em-as-tit svg{ width:13px; height:13px; display:block; color:#e07b1f }
/* A assistente vem primeiro, os botões por baixo: assim o canto de baixo à
   direita fica vazio e o emblema do Netlify não tapa nada nosso. */
.cx-leitura-pe .em-as-conversa{ margin:0 0 9px }
.cx-leitura-pe .cx-responder-atalhos{ margin:0 }

/* ---------------------------------------------------------------------------
   Marcar um seguimento na agenda (ver routes/agenda.js)
--------------------------------------------------------------------------- */
.ag-fundo{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:18px; background:color-mix(in srgb, var(--nav-bg) 50%, transparent);
}
.ag-cx{
  position:relative; width:min(460px, 100%); max-height:90vh; overflow-y:auto;
  background:var(--card); border-radius:14px; padding:20px 22px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.ag-cx h3{ margin:0 0 4px; font-size:1.05rem; font-weight:700; color:var(--ink) }
.ag-sub{ margin:0 0 14px; font-size:.78rem; color:var(--ink-3); line-height:1.5 }
.ag-x{ position:absolute; top:10px; right:12px; font:inherit; font-size:1.5rem; line-height:1;
  border:0; background:none; cursor:pointer; color:var(--ink-3) }
.ag-x:hover{ color:var(--ink) }
.ag-rot{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); margin:12px 0 4px }
.ag-cx input[type="text"], .ag-cx input[type="datetime-local"], .ag-cx textarea{
  width:100%; font:inherit; font-size:.85rem; padding:8px 11px;
  border:1px solid #e2e8f0; border-radius:9px; background:var(--card); color:var(--ink);
}
.ag-cx input:focus, .ag-cx textarea:focus{ outline:none; border-color:var(--blue) }
.ag-quandos{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px }
.ag-quando{
  font:inherit; font-size:.75rem; font-weight:600; cursor:pointer;
  padding:5px 12px; border:1px solid #e2e8f0; border-radius:999px; background:var(--card); color:var(--ink-2);
}
.ag-quando:hover{ border-color:var(--blue); color:var(--ink) }
.ag-quando.is-on{ background:#101a3d; border-color:#101a3d; color:var(--on-blue) }
.ag-nota{
  margin:12px 0 0; padding:9px 11px; border-radius:9px;
  background:var(--aviso-bg); border:1px solid #fde68a; color:var(--aviso-ink); font-size:.74rem; line-height:1.55;
}
.ag-nota strong{ color:var(--aviso-ink) }
.ag-pe{ display:flex; flex-wrap:wrap; align-items:center; gap:11px; margin-top:15px }
.ag-recado{ font-size:.76rem; color:var(--ink-3) }
.ag-recado.is-ma{ color:var(--erro-ink) }

/* O que já está marcado com este cliente, na ficha dele */
.ag-marcados[hidden]{ display:none }
.ag-marcados{
  margin:10px 0; padding:10px 12px; border-radius:10px;
  background:#f6f8ff; border:1px solid #dbe3f7;
}
.ag-tit{ margin:0 0 5px; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--blue-d) }
.ag-lista{ margin:0; padding-left:1rem; font-size:.76rem; line-height:1.6; color:var(--ink) }

/* =====================================================================
   O PAINEL DA AGENDA
   =====================================================================
   Já se podia marcar um seguimento, mas o botão vivia no rodapé de uma
   conversa aberta e a lista só aparecia depois de se marcar alguma coisa.
   O João procurou a agenda e não a encontrou — e tinha razão: uma agenda
   que não se vê não é uma agenda, é uma gaveta.

   Duas peles, o mesmo painel: escura para a coluna das pastas do correio,
   clara para o quadro do CRM. Só muda a cor. */
.ag-painel{
  margin:10px 0 4px; border-radius:14px; overflow:hidden;
  border:1px solid transparent;
}
.ag-painel-cab{
  display:flex; align-items:center; gap:7px;
  padding:8px 10px; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.ag-painel-cab i{ width:13px; height:13px; flex:0 0 auto }
.ag-painel-cab span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ag-painel-mais{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border:0; border-radius:7px;
  background:none; cursor:pointer;
}
.ag-painel-mais i{ width:14px; height:14px }
.ag-painel-corpo{ padding:0 6px 7px; display:flex; flex-direction:column; gap:2px }
.ag-painel-espera, .ag-painel-vazio, .ag-painel-avisa{
  margin:0; padding:5px 6px 7px; font-size:.72rem; line-height:1.5;
}
.ag-painel-avisa a{ text-decoration:underline; display:inline-block; margin-top:3px }

.ag-ev{
  display:flex; align-items:baseline; gap:8px;
  padding:5px 6px; border-radius:8px; text-decoration:none;
  font-size:.74rem; line-height:1.35;
}
.ag-ev-dia{ flex:0 0 auto; font-weight:700; font-size:.68rem; min-width:3.4em }
.ag-ev-meio{ flex:1 1 auto; min-width:0; display:block }
.ag-ev-tit{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ag-ev-onde{ display:block; font-size:.66rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ag-ev-hora{ flex:0 0 auto; font-size:.68rem; font-variant-numeric:tabular-nums }

/* --- a pele escura: dentro da coluna azul-marinho das pastas --------- */
.ag-painel.is-escuro{
  background:color-mix(in srgb, var(--card) 7%, transparent);
  border-color:color-mix(in srgb, var(--card) 10%, transparent);
  box-shadow:inset 0 1px 0 var(--nav-ink-2);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}
.ag-painel.is-escuro .ag-painel-cab{ color:var(--nav-ink-2) }
.ag-painel.is-escuro .ag-painel-cab i{ color:var(--acc2) }
.ag-painel.is-escuro .ag-painel-mais{ color:var(--nav-ink-2) }
.ag-painel.is-escuro .ag-painel-mais:hover{ background:var(--nav-hover); color:var(--nav-ink) }
.ag-painel.is-escuro .ag-ev{ color:var(--nav-ink-2) }
.ag-painel.is-escuro .ag-ev:hover{ background:var(--nav-hover) }
.ag-painel.is-escuro .ag-ev-dia{ color:var(--acc2) }
.ag-painel.is-escuro .ag-ev-onde, .ag-painel.is-escuro .ag-ev-hora{ color:var(--nav-ink-2) }
.ag-painel.is-escuro .ag-painel-espera,
.ag-painel.is-escuro .ag-painel-vazio{ color:var(--nav-ink-2) }
/* Numa coluna de 230 pixéis, o dia, a hora e o título lado a lado não
   cabem: o título ficava cortado ao terceiro caracter e não se sabia de
   que compromisso era. Aqui o dia e a hora vão numa linha, o título vai
   na de baixo e pode ocupar duas. É o mesmo painel — só se dobra. */
.ag-painel.is-escuro .ag-ev{ flex-wrap:wrap; gap:0 6px; align-items:baseline }
.ag-painel.is-escuro .ag-ev-dia{ order:1; min-width:0 }
.ag-painel.is-escuro .ag-ev-hora{ order:2; flex:1 1 auto }
.ag-painel.is-escuro .ag-ev-meio{ order:3; flex:1 0 100%; margin-top:1px }
.ag-painel.is-escuro .ag-ev-tit{
  white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.3;
}
.ag-painel.is-escuro .ag-painel-avisa{ color:var(--nav-ink-2) }
.ag-painel.is-escuro .ag-painel-avisa a{ color:#e8b75a }

/* --- a pele clara: no quadro do CRM --------------------------------- */
/* Aqui é uma faixa e não uma caixa alta: o quadro é para as encomendas, e
   a agenda é uma linha por cima delas — quatro ou cinco compromissos lado
   a lado, que é o que se quer saber de relance. */
.crm-agenda{ margin:0 0 1rem }
.ag-painel.is-claro{
  background:var(--vidro);
  border-color:var(--vidro-borda);
  border-radius:var(--raio);
  box-shadow:var(--vidro-brilho), 0 6px 20px -14px rgba(16,26,61,.35);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}
.ag-painel.is-claro .ag-painel-cab{ color:var(--ink-3); padding:9px 13px 5px }
.ag-painel.is-claro .ag-painel-cab i{ color:var(--acc2) }
.ag-painel.is-claro .ag-painel-mais{ color:var(--ink-3) }
.ag-painel.is-claro .ag-painel-mais:hover{ background:color-mix(in srgb, var(--nav-bg) 7%, transparent); color:var(--ink) }
.ag-painel.is-claro .ag-painel-corpo{
  flex-direction:row; flex-wrap:wrap; gap:6px; padding:0 10px 10px;
}
.ag-painel.is-claro .ag-ev{
  flex:1 1 13rem; min-width:0; color:var(--ink);
  background:var(--sup-fundo); border:1px solid var(--vidro-linha); border-radius:11px;
  padding:7px 10px;
}
.ag-painel.is-claro .ag-ev:hover{ background:var(--card); border-color:color-mix(in srgb, var(--blue) 35%, transparent) }
.ag-painel.is-claro .ag-ev-dia{ color:#b07f1d }
.ag-painel.is-claro .ag-ev-onde, .ag-painel.is-claro .ag-ev-hora{ color:var(--ink-3) }
.ag-painel.is-claro .ag-painel-espera,
.ag-painel.is-claro .ag-painel-vazio{ color:var(--ink-3); padding:2px 13px 10px }
.ag-painel.is-claro .ag-painel-avisa{ color:var(--aviso-ink); padding:2px 13px 11px }
.ag-painel.is-claro .ag-painel-avisa a{ color:var(--aviso-ink) }

/* =====================================================================
   O VIDRO NO CORREIO
   =====================================================================
   O portal todo é feito de vidro desde que se refez o aspecto — menos a
   caixa de correio, que nasceu depois e ficou em branco e cinzento
   chapados. Ele olhou para o correio e disse que o vidro tinha
   desaparecido; tinha desaparecido mesmo, ali.

   Leve, que foi o que ele pediu: as três colunas continuam a ler-se umas
   contra as outras (é isso que faz a conversa aberta destacar-se da
   lista), mas deixam passar o fundo em vez de o taparem. O texto continua
   sempre sobre superfícies quase opacas — legibilidade primeiro. */
main.ecra-cheio{ background:transparent }
.cx{ background:transparent }
.cx-pastas{
  background:color-mix(in srgb, var(--nav-bg) 90%, transparent);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}
.cx-lista, .cx-lista-topo{
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}
.cx-lista-topo{ border-bottom-color:color-mix(in srgb, var(--ink) 10%, transparent) }
.cx-mes{ color:rgba(16,26,61,.55) }
.cx-anx{ background:var(--sup-fundo); border-color:color-mix(in srgb, var(--ink) 9%, transparent) }
.cx-anx-mais{ background:color-mix(in srgb, var(--nav-bg) 7%, transparent) }
.cx-mes::after{ background:color-mix(in srgb, var(--nav-bg) 12%, transparent) }
.cx-mais{ background:var(--sup-fundo); border-color:color-mix(in srgb, var(--ink) 12%, transparent) }
.cx-mais:hover{ background:color-mix(in srgb, var(--card) 95%, transparent) }
.cx-lista-topo h1{ background:color-mix(in srgb, var(--nav-bg) 88%, transparent); color:var(--nav-ink) }
.cx-linha{ border-bottom-color:color-mix(in srgb, var(--ink) 7%, transparent) }
.cx-linha:hover{ background:var(--sup-fundo) }
.cx-linha.is-aberta{
  background:var(--sup-fundo);
  box-shadow:inset 0 0 0 1px rgba(59,102,196,.22), inset 0 1px 0 rgba(255,255,255,.7);
}
.cx-leitura{
  background:var(--sup-fundo);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}
.cx-msg{ background:var(--sup-fundo); border-color:color-mix(in srgb, var(--ink) 8%, transparent) }
.cx-msg.is-nossa{ background:color-mix(in srgb, var(--blue) 7%, transparent); border-color:color-mix(in srgb, var(--blue) 16%, transparent) }
/* A moldura do e-mail em si fica BRANCA e opaca, sempre. O que está lá
   dentro é uma página escrita por outra pessoa, com o fundo dela — pôr
   vidro por baixo dava manchas de cor a atravessar o texto do cliente. */
.cx-frame{ background:var(--card) }

/* Sem desfoque, tudo sólido — nada se perde. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cx-pastas{ background:var(--nav-bg) }
  .cx-lista, .cx-lista-topo{ background:var(--bg) }
  .cx-leitura{ background:var(--card) }
  .ag-painel.is-claro{ background:var(--card) }
  .ag-painel.is-escuro{ background:var(--nav-hover) }
}

/* =====================================================================
   O CALENDÁRIO
   =====================================================================
   O painel dos próximos compromissos responde a «o que vem aí». Não
   responde à pergunta que se faz ao abrir uma agenda, que é «mostra-me
   este mês». O João disse-o sem margem para dúvidas: mesmo sem nada
   marcado, devia aparecer mês, semana e dia. A grelha vazia É a resposta.

   Mesmo material do resto do portal: vidro leve sobre o fundo com
   manchas de cor, e o dourado — a cor da área do correio — a marcar o
   dia de hoje. */
.cal{ display:flex; flex-direction:column; gap:14px }
.cal-topo{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.cal-nav{ display:flex; align-items:center; gap:8px; min-width:0 }
.cal-seta{ padding:7px 9px; line-height:0 }
.cal-seta i{ width:16px; height:16px }
/* Sem text-transform: em português os «de» são minúsculos, e «28 De
   Setembro De 2026» lê-se como tradução automática. A maiúscula da
   primeira letra faz-se no sítio certo, que é onde se sabe onde ela é. */
.cal-titulo{
  margin:0 0 0 6px; font-size:1.12rem; font-weight:700; color:var(--ink); min-width:0;
}
.cal-acoes{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
/* As três vistas num só bloco, como um interruptor de três posições —
   e não três botões soltos, que se leem como três acções diferentes. */
.cal-vistas{
  display:inline-flex; padding:3px; border-radius:999px;
  background:var(--vidro); border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}
.cal-vistas button{
  font:inherit; font-size:.79rem; font-weight:600; cursor:pointer;
  padding:5px 14px; border:0; border-radius:999px; background:none; color:var(--ink-3);
}
.cal-vistas button:hover{ color:var(--ink) }
.cal-vistas button.is-on{
  background:linear-gradient(180deg,#1b2a56,#101a3d); color:var(--on-blue);
  box-shadow:0 4px 12px -7px rgba(16,26,61,.8), inset 0 1px 0 rgba(255,255,255,.18);
}

.cal-aviso[hidden]{ display:none }
.cal-aviso{
  border-radius:12px; padding:2px 12px;
  background:color-mix(in srgb, var(--acc2) 9%, transparent); border:1px solid color-mix(in srgb, var(--acc2) 30%, transparent);
}
.cal-aviso p{ margin:9px 0 }

/* ---- a vista do mês ------------------------------------------------- */
.cal-mes{
  border-radius:var(--raio); overflow:hidden;
  background:var(--vidro); border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-sombra),var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}
.cal-cab{ display:grid; grid-template-columns:repeat(7,1fr) }
.cal-cab span{
  padding:9px 10px; font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--vidro-linha);
}
.cal-grelha{ display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:minmax(98px,auto) }
.cal-cel{
  min-width:0; padding:5px 6px 7px; border-right:1px solid var(--vidro-linha);
  border-bottom:1px solid var(--vidro-linha); display:flex; flex-direction:column; gap:3px;
}
.cal-cel:nth-child(7n){ border-right:0 }
.cal-cel.is-fora{ background:color-mix(in srgb, var(--nav-bg) 4%, transparent) }
.cal-cel.is-fora .cal-num{ color:#b4bdd0 }
.cal-cel.is-hoje{ background:color-mix(in srgb, var(--acc2) 11%, transparent) }
.cal-num{
  align-self:flex-start; font:inherit; font-size:.76rem; font-weight:600; color:var(--ink-2);
  border:0; background:none; cursor:pointer; padding:2px 6px; border-radius:999px; line-height:1.2;
}
.cal-num:hover{ background:color-mix(in srgb, var(--nav-bg) 9%, transparent); color:var(--ink) }
.cal-cel.is-hoje .cal-num{ background:#c9962f; color:var(--on-blue) }
.cal-cel-evs{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.cal-chip{
  display:block; min-width:0; padding:2px 6px; border-radius:6px; text-decoration:none;
  font-size:.7rem; line-height:1.35; color:var(--ink);
  background:color-mix(in srgb, var(--blue) 11%, transparent); border-left:2px solid #3b66c4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal-chip:hover{ background:color-mix(in srgb, var(--blue) 20%, transparent) }
.cal-chip b{ color:var(--blue-d); font-weight:700 }
.cal-chip.is-todo-o-dia{ background:color-mix(in srgb, var(--acc2) 16%, transparent); border-left-color:#c9962f }
.cal-mais{
  align-self:flex-start; font:inherit; font-size:.67rem; font-weight:600; color:var(--ink-3);
  border:0; background:none; cursor:pointer; padding:1px 4px;
}
.cal-mais:hover{ color:var(--ink); text-decoration:underline }

/* ---- as vistas da semana e do dia ----------------------------------- */
.cal-horas{
  display:flex; border-radius:var(--raio); overflow:hidden;
  background:var(--vidro); border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-sombra),var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}
.cal-reguas{ flex:0 0 58px; border-right:1px solid var(--vidro-linha) }
.cal-colunas{ flex:1 1 auto; display:flex; min-width:0; overflow-x:auto }
.cal-col{ flex:1 1 0; min-width:106px; border-right:1px solid var(--vidro-linha) }
.cal-col:last-child{ border-right:0 }
.cal-horas.is-dia .cal-col{ min-width:0 }
.cal-col.is-hoje{ background:color-mix(in srgb, var(--acc2) 7%, transparent) }
.cal-col-cab{
  display:flex; align-items:center; justify-content:center; gap:6px; height:44px;
  border-bottom:1px solid var(--vidro-linha);
}
.cal-col-dia{ font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3) }
/* ALTURA FIXA, e é de propósito. A régua das horas à esquerda é uma
   coluna à parte, e alinha com as outras porque os dois primeiros andares
   (o cabeçalho e a faixa do dia inteiro) têm a mesma altura nas duas. Se
   esta faixa crescesse com o número de compromissos de dia inteiro, uma
   semana com uma feira lá dentro empurrava as colunas para baixo e a
   régua deixava de bater certo — as 9:00 apareciam às 10:00. */
.cal-col-todo{
  height:26px; padding:2px 4px; display:flex; flex-direction:column; gap:2px;
  overflow-x:hidden; overflow-y:auto; border-bottom:1px solid var(--vidro-linha);
}
.cal-col-horas{ position:relative }
.cal-risca{ position:absolute; left:0; right:0; height:1px; background:var(--vidro-linha) }
.cal-regua{ position:relative }
.cal-hora{ height:46px; position:relative }
.cal-hora span{
  position:absolute; top:-7px; right:8px; font-size:.66rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.cal-caixa{
  position:absolute; left:3px; right:3px; overflow:hidden; text-decoration:none;
  border-radius:8px; padding:3px 6px; font-size:.7rem; line-height:1.3; color:#10233f;
  background:color-mix(in srgb, var(--blue) 15%, transparent); border-left:3px solid #3b66c4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.cal-caixa:hover{ background:color-mix(in srgb, var(--blue) 26%, transparent) }
.cal-caixa b{ display:block; font-size:.64rem; color:#2c4f9e }
.cal-caixa span{ display:block; font-weight:600 }
/* Meia hora não tem altura para duas linhas. */
.cal-caixa.is-curta{ display:flex; align-items:baseline; gap:5px; padding:2px 6px }
.cal-caixa.is-curta b{ display:inline; flex:0 0 auto }
.cal-caixa.is-curta span{ display:block; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.cal-caixa.is-curta i{ display:none }
.cal-caixa i{ display:block; font-style:normal; font-size:.64rem; color:#5b6b85 }

/* O título do painel é a porta para aqui. */
.ag-painel-ir{ flex:1 1 auto; min-width:0; text-decoration:none; color:inherit;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ag-painel-ir:hover{ text-decoration:underline }

@media (max-width:820px){
  .cal-grelha{ grid-auto-rows:minmax(74px,auto) }
  .cal-chip{ font-size:.64rem }
  .cal-titulo{ font-size:1rem; flex:1 1 100%; margin-left:0 }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cal-mes, .cal-horas, .cal-vistas{ background:var(--card) }
}

/* =====================================================================
   MARCAR UM E-MAIL COMO IMPORTANTE
   =====================================================================
   A estrela existia e só funcionava num sentido: marcava e nunca
   desmarcava. Uma estrela posta por engano ficava lá para sempre, e a
   pasta dos importantes enchia-se de coisas que já não eram.

   A linha passa a ser uma peça com duas partes — a conversa e a estrela
   ao lado. Um botão dentro de outro botão não é HTML válido e o browser
   desfaz-nos a linha por dentro; por isso são irmãos e não um dentro do
   outro. Marca-se da lista, sem abrir o e-mail: é assim que se marca meia
   dúzia deles de uma passagem. */
.cx-linha-peca{ display:flex; align-items:stretch; position:relative }
.cx-linha-peca > .cx-linha{ flex:1 1 auto; min-width:0 }
.cx-estrela, .cx-lixo{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:30px; border:0; border-bottom:1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  background:none; cursor:pointer; color:var(--ink-3); padding:0;
  transition:color .15s ease, transform .1s ease;
}
.cx-estrela svg, .cx-lixo svg, .cx-estrela i, .cx-lixo i{ width:14px; height:14px }
.cx-estrela:hover, .cx-lixo:hover{ color:var(--acc2) }
.cx-estrela:active, .cx-lixo:active{ transform:scale(.88) }
.cx-estrela.is-on{ color:var(--aviso-ink) }
.cx-estrela.is-on svg, .cx-estrela.is-on i{ fill:currentColor }
.cx-linha-peca.is-importante > .cx-linha{ background:color-mix(in srgb, var(--acc2) 9%, transparent) }
.cx-linha-peca.is-importante > .cx-linha.is-aberta{ background:color-mix(in srgb, var(--card) 90%, transparent) }
.cx-estrela-topo.is-on{ color:var(--aviso-ink) }
.cx-estrela-topo.is-on svg, .cx-estrela-topo.is-on i{ fill:currentColor }

/* =====================================================================
   IMAGENS DENTRO DO CORPO
   =====================================================================
   O clipe põe ficheiros presos ao fundo; este botão põe a imagem DENTRO
   do texto. São duas coisas diferentes e por isso são dois botões — quem
   manda um folheto quer que o cliente o veja sem abrir nada.

   A miniatura serve para uma coisa só: saber qual é a imagem de que
   aquele sinal fala, quando há três no mesmo e-mail. */
.em-imagens.is-vazia{ display:none }
.em-imagens-lista{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.em-imagens-lista li{
  display:flex; align-items:center; gap:8px; min-width:0;
  padding:5px 9px 5px 5px; border-radius:11px;
  background:color-mix(in srgb, var(--acc2) 8%, transparent); border:1px solid color-mix(in srgb, var(--acc2) 28%, transparent);
}
.em-imagens-lista img{
  width:34px; height:34px; object-fit:cover; border-radius:7px; flex:0 0 auto;
  background:var(--card); border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.em-imagens-nome{
  font-size:.78rem; color:var(--ink); max-width:16rem; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.em-imagens-peso{ font-size:.7rem; color:var(--ink-3); flex:0 0 auto }
.em-imagens-lista button{
  flex:0 0 auto; border:0; background:none; cursor:pointer; color:var(--ink-3);
  padding:2px; border-radius:6px; line-height:0;
}
.em-imagens-lista button:hover{ color:var(--erro-ink); background:rgba(185,28,28,.08) }
.em-imagens-lista button svg, .em-imagens-lista button i{ width:13px; height:13px }
.em-clipe.em-imagem{ color:var(--aviso-ink) }
.em-clipe.em-imagem:hover{ background:color-mix(in srgb, var(--acc2) 12%, transparent) }

/* =====================================================================
   ENVIAR MAIS TARDE
   =====================================================================
   «Escrevo agora porque é agora que tenho a cabeça nisto, mas isto não
   se manda às onze da noite de domingo.» */
.em-depois[hidden]{ display:none }
.em-depois{
  margin-top:10px; padding:11px 12px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  background:linear-gradient(180deg,color-mix(in srgb, var(--blue) 7%, transparent),color-mix(in srgb, var(--card) 90%, transparent));
}
.em-depois-tit{
  display:flex; align-items:center; gap:6px; margin:0 0 9px;
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#2c4f9e;
}
.em-depois-tit svg, .em-depois-tit i{ width:13px; height:13px }
.em-depois-rapidas{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px }
.em-depois-r{
  font:inherit; font-size:.72rem; font-weight:600; cursor:pointer;
  padding:4px 11px; border:1px solid #d7dff2; border-radius:999px; background:var(--card); color:var(--blue-d);
}
.em-depois-r:hover{ background:#eef2fd }
.em-depois-r.is-on{ background:#101a3d; border-color:#101a3d; color:var(--on-blue) }
.em-depois-linha{ display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.em-depois-data{
  font:inherit; font-size:.82rem; padding:6px 10px;
  border:1px solid #d7dff2; border-radius:9px; background:var(--card); color:var(--ink);
}
.em-depois-nota{ margin:9px 0 0; font-size:.72rem; color:var(--ink-3); line-height:1.5 }
.em-clipe.em-depois-bt{ color:var(--blue-d) }
.em-clipe.em-depois-bt:hover{ background:color-mix(in srgb, var(--blue) 12%, transparent) }

/* A pasta dos agendados. Não são conversas do Gmail — ainda não saíram de
   casa — por isso não se parecem com linhas da lista. */
.cx-agendado{
  padding:10px 13px; border-bottom:1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  display:flex; flex-direction:column; gap:3px;
}
.cx-agendado-hora{
  display:flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:700; color:#2c4f9e; text-transform:capitalize;
}
.cx-agendado-hora svg, .cx-agendado-hora i{ width:12px; height:12px }
.cx-agendado-quem{ font-size:.79rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cx-agendado-ass{ font-size:.78rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cx-agendado-bts{ display:flex; gap:6px; margin-top:5px }
.cx-agendado-bts .crm-btn{ font-size:.72rem; padding:3px 11px }

/* =====================================================================
   A JANELA DE ESCREVER, POR CIMA
   =====================================================================
   A mensagem nova tomava o lugar da conversa aberta: a caixa de entrada
   desaparecia por baixo e voltar era um botão que não havia. Escrever
   uma mensagem nova não é mudar de ecrã — é abrir uma coisa à frente do
   que se estava a fazer, como no Gmail e no Mail do Mac.

   E porque às vezes é uma linha e outras vezes é uma proposta com três
   parágrafos e um folheto, a janela cresce com o botão do canto. */
.em-janela{
  position:fixed; right:22px; bottom:0; z-index:70;
  width:min(680px, calc(100vw - 44px));
  /* Mais alta do que era. O ecrã dele mostrava a caixa de escrever
     espremida entre os destinatários e duas filas de botões de IA — e a
     caixa de escrever é a coisa para que a janela existe. */
  height:min(86vh, 860px);
  max-height:86vh;
  display:flex; flex-direction:column;
  border-radius:16px 16px 0 0; overflow:hidden;
  background:color-mix(in srgb, var(--card) 93%, transparent);
  border:1px solid var(--vidro-borda); border-bottom:0;
  box-shadow:0 -4px 60px -12px rgba(16,26,61,.5), var(--vidro-brilho);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
  animation:em-janela-sobe .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes em-janela-sobe{ from{ transform:translateY(26px); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .em-janela{ animation:none } }
.em-janela.is-grande{
  right:3vw; left:3vw; bottom:3vh; width:auto;
  max-height:94vh; border-radius:16px; border-bottom:1px solid var(--vidro-borda);
}
/* O corpo é que cresce. Tudo o resto — destinatários, barra da
   assistente, assinatura, rodapé — tem a altura que tem; o espaço que
   sobra é todo da caixa de escrever, que é a razão de a janela existir. */
.em-janela > form{
  display:flex; flex-direction:column; min-height:0; height:100%;
  overflow-y:auto; padding:0 15px 14px;
}
.em-janela .em-corpo{ flex:1 1 auto; max-height:none; min-height:11rem }
.em-janela-cab{
  position:sticky; top:0; z-index:2; margin:0 -15px 12px; padding:11px 13px;
  display:flex; align-items:center; gap:6px;
  background:#101a3d; color:var(--on-blue); font-size:.82rem; font-weight:600;
}
.em-janela-cab > span{ flex:1 1 auto; min-width:0 }
.em-janela-bt{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; border:0; border-radius:7px;
  background:color-mix(in srgb, var(--card) 12%, transparent); color:rgba(255,255,255,.85); cursor:pointer;
}
.em-janela-bt:hover{ background:color-mix(in srgb, var(--card) 25%, transparent); color:var(--on-blue) }
.em-janela-bt svg, .em-janela-bt i{ width:14px; height:14px }
@media (max-width:640px){
  .em-janela{ right:0; left:0; width:auto; max-height:92vh; border-radius:14px 14px 0 0 }
}

/* =====================================================================
   O CORPO DA MENSAGEM, COM AS IMAGENS LÁ DENTRO
   =====================================================================
   Da primeira vez isto era uma caixa de texto simples com um sinal
   escrito — [imagem: folheto.jpg]. A imagem saía no sítio certo, mas
   quem escrevia via uma FRASE onde devia ver a fotografia. Escrever um
   e-mail é ver o e-mail. */
.em-corpo{
  min-height:9.5rem; max-height:44vh; overflow-y:auto;
  padding:10px 12px; border:1px solid #d7dff2; border-radius:10px;
  background:var(--card); font-size:.86rem; line-height:1.6; color:var(--ink);
  white-space:pre-wrap; word-break:break-word; outline:none;
}
.em-janela.is-grande .em-corpo{ max-height:52vh }
.em-corpo:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,102,196,.13) }
/* A dica só se vê enquanto não há nada — e não é texto a sério, para não
   ir dentro da mensagem se alguém carregar em enviar por engano. */
.em-corpo.is-vazio::before{
  content:attr(data-dica); color:var(--ink-3); pointer-events:none;
}
.em-corpo-img{
  display:block; max-width:100%; height:auto; margin:10px 0;
  border-radius:9px; border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:0 4px 14px -8px rgba(16,26,61,.45);
}

/* O dia e a hora do agendamento, à vista. A caixa do navegador é pequena
   e cinzenta e não parece um campo; por baixo vai escrito por extenso o
   que ficou escolhido, para não haver dúvida sobre o dia em que sai. */
.em-depois-rot{
  display:block; margin:0 0 4px; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.em-depois-data{
  flex:1 1 15rem; min-width:11rem; font-size:.88rem; padding:9px 12px;
  border:1px solid #b9c6e4; border-radius:10px; background:var(--card); color:var(--ink);
}
.em-depois-data:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,102,196,.15) }
/* Sem capitalize: punha «Sai Terça-Feira», e em português o «feira» é
   minúsculo. A maiúscula da primeira letra faz-se onde se sabe onde ela é. */
.em-depois-lido{
  margin:7px 0 0; font-size:.78rem; font-weight:600; color:#2c4f9e;
}
.em-depois-lido.is-ma{ color:var(--erro-ink); text-transform:none }


/* =====================================================================
   A AJUDA À ESCRITA, RECOLHIDA
   =====================================================================
   Eram duas filas inteiras de botões, sempre abertas, debaixo de uma
   caixa de escrever pequena: quatro tons, quatro idiomas, corrigir,
   melhorar, das minhas notas. O João olhou e disse a coisa certa — «a IA
   ocupa muito espaço em baixo, está muito apertado para escrever o
   email».

   O que se faz SEMPRE é escrever; o que se faz de vez em quando é pedir
   para corrigir. O que se faz sempre fica à vista e o resto fica a um
   clique — e não ao contrário. */
.em-as-ia[hidden]{ display:none }
.em-as-ia{ display:flex; align-items:center; gap:7px; flex:1 1 16rem; min-width:0 }
.em-as-mais{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border:1px solid color-mix(in srgb, var(--acc2) 34%, transparent);
  border-radius:9px; background:var(--sup-fundo); color:var(--aviso-ink); cursor:pointer;
  transition:transform .16s ease, background .16s ease;
}
.em-as-mais:hover{ background:color-mix(in srgb, var(--acc2) 14%, transparent) }
.em-as-mais.is-on{ background:#e07b1f; border-color:#e07b1f; color:var(--on-blue); transform:rotate(180deg) }
.em-as-mais svg, .em-as-mais i{ width:15px; height:15px }
.em-as-gaveta[hidden]{ display:none }
.em-as-gaveta{ margin-top:9px }
.em-as-gaveta .em-as-tons{ margin-top:0 }

/* A fila da ajuda à escrita só aparece quando a gaveta abre. */
.em-ia{ margin-top:0 }
.em-ia:not(.is-aberta) .em-ia-ajuda{ display:none }
.em-ia.is-aberta .em-ia-ajuda{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px;
}

/* =====================================================================
   DEFINIÇÕES — o painel da roda dentada
   =====================================================================
   Entra pela direita e não ao centro: é um painel de preferências, não um
   aviso. Ao centro obrigaria a fechar para se ver o efeito da cor
   escolhida; encostado à direita deixa o portal à vista por trás, e é
   isso que faz escolher uma cor ser escolher e não adivinhar.

   As cores deste painel vêm das variáveis do tema (ver public/css/temas.css)
   — tem de ser o primeiro sítio do portal a mudar quando se carrega num
   cartão, senão a prova do que se acabou de escolher não aparece.
--------------------------------------------------------------------- */
.df-fundo{
  position:fixed; inset:0; z-index:60;
  background:rgba(8,12,28,.42);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}
.df-painel{
  position:fixed; z-index:61; top:0; right:0; bottom:0; width:min(430px,100%);
  display:flex; flex-direction:column;
  background:var(--card); color:var(--ink);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -30px rgba(8,12,28,.5);
  animation:df-entra .18s ease-out;
}
@keyframes df-entra{ from{ transform:translateX(18px); opacity:.6 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .df-painel{ animation:none } }

.df-topo{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 16px 12px; border-bottom:1px solid var(--line);
}
.df-topo h2{
  display:flex; align-items:center; gap:9px; margin:0;
  font-family:'Sora','Figtree',sans-serif; font-size:1.02rem; font-weight:600; color:var(--ink);
}
.df-topo h2 i{ width:18px; height:18px; color:var(--ink-3) }
/* 44 pontos de lado: é a área mínima em que um dedo acerta sem pontaria. */
.df-x{
  flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:11px; border:1px solid transparent;
  background:transparent; color:var(--ink-2); cursor:pointer;
}
.df-x:hover{ background:var(--hover) }
.df-x i{ width:18px; height:18px }

.df-corpo{ flex:1 1 auto; overflow-y:auto; padding:4px 16px 24px }
.df-sec{ padding:16px 0; border-bottom:1px solid var(--line-2) }
.df-sec:last-child{ border-bottom:0 }
.df-sec h3{
  margin:0 0 3px; font-family:'Sora','Figtree',sans-serif;
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3);
}
.df-sub{ margin:16px 0 7px; font-size:.78rem; font-weight:600; color:var(--ink-2) }
.df-nota{ margin:0; font-size:.72rem; line-height:1.45; color:var(--ink-3) }
.df-nota-auto{ margin-top:7px }
.df-linha{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:44px; margin-top:6px;
}
.df-linha-col{ flex-direction:column; align-items:flex-start; gap:4px }
.df-linha label, .df-rot{ font-size:.86rem; color:var(--ink) }
.df-select{
  min-height:38px; padding:0 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-size:.86rem; cursor:pointer;
}
.df-check{ width:20px; height:20px; accent-color:var(--blue); cursor:pointer }
.df-btn{
  min-height:38px; padding:0 14px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--blue-d);
  font-size:.82rem; font-weight:600;
}
.df-btn:hover{ background:var(--hover) }

/* ---- os cartões das cores ------------------------------------------
   Quatro colunas no computador, duas no telemóvel. Cada cartão mostra as
   cores DAQUELA combinação, escritas à mão — se mostrasse as variáveis,
   os oito cartões saíam todos iguais, com as cores do tema actual. */
.df-cores{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:10px }
@media (min-width:380px){ .df-cores{ grid-template-columns:repeat(2,1fr) } }
.df-cor{
  display:flex; flex-direction:column; gap:7px; padding:8px; min-width:0;
  border-radius:13px; border:2px solid var(--line); background:var(--card);
  cursor:pointer; text-align:left; transition:border-color .15s, background .15s;
}
.df-cor:hover{ background:var(--hover) }
.df-cor.is-on{ border-color:var(--ink) }
.df-cor:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
.df-amostra{
  display:block; height:46px; border-radius:9px; overflow:hidden;
  border:1px solid; position:relative;
}
.df-amostra-topo{ display:block; height:13px }
.df-amostra-corpo{ display:flex; align-items:center; gap:6px; padding:7px 8px }
.df-amostra-btn{ display:block; width:26px; height:11px; border-radius:99px }
.df-amostra-ponto{ display:block; width:11px; height:11px; border-radius:99px }
.df-cor-txt{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.df-cor-nome{
  display:flex; align-items:center; gap:5px;
  font-family:'Sora','Figtree',sans-serif; font-size:.78rem; font-weight:600; color:var(--ink);
}
.df-visto{ display:inline-flex; flex:0 0 auto }
.df-cor-nome i, .df-visto i{ width:13px; height:13px; color:var(--blue-d); flex:0 0 auto }
.df-cor-frase{ font-size:.67rem; line-height:1.35; color:var(--ink-3) }

/* ---- claro / escuro / automático ----------------------------------- */
.df-modo{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px;
  border-radius:12px; background:var(--bg); border:1px solid var(--line);
}
.df-modo button{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; padding:0 6px; border:0; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--ink-2); font-size:.78rem; font-weight:600;
}
.df-modo button:hover{ background:var(--hover) }
.df-modo button.is-on{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(8,12,28,.14) }
.df-modo button:focus-visible{ outline:2px solid var(--blue); outline-offset:1px }
.df-modo i{ width:14px; height:14px; flex:0 0 auto }
.df-modo.is-mini button span{ display:none }

/* ---- a conta -------------------------------------------------------- */
.df-eu{ display:flex; align-items:center; gap:10px; margin:8px 0 12px }
.df-eu-av{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--avatar); color:var(--ink); font-weight:700; font-size:.92rem;
}
.df-eu-txt{ display:flex; flex-direction:column; min-width:0 }
.df-eu-txt strong{ font-size:.9rem; color:var(--ink) }
.df-eu-txt span{ font-size:.73rem; color:var(--ink-3) }
.df-sair{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border-radius:11px; cursor:pointer; font-size:.84rem; font-weight:600;
  border:1px solid var(--line); background:var(--card); color:var(--ink-2);
}
.df-sair:hover{ background:var(--hover); color:var(--ink) }
.df-sair i{ width:15px; height:15px }

/* O ponto das novidades passou do sino para a roda dentada — o sino saiu
   da barra e o aviso tinha de ir com ele, senão ninguém volta a ver uma
   novidade. */
#df-botao{ position:relative }
.df-ponto{
  position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%;
  background:var(--badge); box-shadow:0 0 0 2px rgba(255,255,255,.85);
}

/* =====================================================================
   A LISTA DO CORREIO: PEÇAS A FLUTUAR, DE CANTOS RECTOS
   =====================================================================
   Ele viu três desenhos lado a lado e escolheu este, no claro e no
   escuro. Duas decisões dele, ditas por palavras:

     «se for a flutuar, os cantos sem ser arredondados, rectos, fica
      mais bonito»
     «o fundo não precisa de ser tão vibrante [...] não diferenciar
      muito o fundo»

   Por isso: cada conversa é uma peça pousada sobre o fundo, separada
   das outras por ar e por uma sombra curta — e NENHUM canto arredondado
   nesta coluna, nem na peça, nem no botão que ela tem por dentro.

   A SOMBRA quase não se vê no modo escuro, e é assim mesmo: uma sombra
   escura sobre fundo escuro não levanta nada. Aí quem separa a peça do
   fundo é ela ser um tom mais clara — é a mesma ideia com outro meio.
--------------------------------------------------------------------- */
.cx-lista-corpo .cx-linha-peca{
  margin:0 10px 8px; background:var(--card); border-radius:0;
  box-shadow:0 1px 2px rgba(10,20,40,.06), 0 6px 16px -10px rgba(10,20,40,.18);
}
.cx-lista-corpo .cx-linha{ border-bottom:0; border-radius:0 }
.cx-lista-corpo .cx-estrela, .cx-lista-corpo .cx-lixo{ border-radius:0 }
/* A estrela é irmã da conversa, não filha (um botão dentro de um botão
   não é HTML válido). Sem isto, a linha marcada mostrava um pedaço de
   fundo por baixo da estrela — via-se nas imagens. */
/* A marca de «importante» vai na PEÇA inteira e não só na conversa.
   Estando só na conversa, a estrela — que é irmã dela e não filha, porque
   um botão dentro de outro não é HTML válido — ficava de fora, e a linha
   marcada aparecia com um retalho por baixo da estrela. Viu-se nas
   imagens das três opções. */
.cx-lista-corpo .cx-linha-peca.is-importante{
  background:color-mix(in srgb, var(--acc2) 9%, var(--card));
}
.cx-lista-corpo .cx-linha-peca.is-importante > .cx-linha{ background:transparent }
.cx-lista-corpo .cx-linha-peca.is-importante > .cx-linha.is-aberta{
  background:color-mix(in srgb, var(--card) 70%, transparent);
}
.cx-lista-corpo .cx-grupo-cab{ margin:16px 10px 8px }
.cx-lista-corpo .cx-mes{ margin:18px 12px 8px }

/* A LETRA MAIS LEVE. «O tipo de letra ficou muito carregado.» O que
   estava carregado era o peso: tudo a 600 e a 700, e a negrito o que já
   se tinha lido. Agora só o que está POR LER vai a cheio — que é a única
   coisa que o negrito devia estar a dizer. */
.cx-quem{ font-weight:500 }
.cx-linha.is-nova .cx-quem{ font-weight:600 }
.cx-assunto{ font-weight:400; color:var(--ink-2) }
.cx-linha.is-nova .cx-assunto{ font-weight:500; color:var(--ink) }
.cx-grupo-cab{ font-weight:600; letter-spacing:.05em; opacity:.72 }

/* =====================================================================
   O TIPO DO PRÓXIMO PASSO (CRM › Negócios)
   =====================================================================
   Botões de escolha única, mas desenhados como etiquetas e não como
   bolinhas de rádio: escolhe-se «Ligar» ou «E-mail» com o polegar, no
   telemóvel, sem acertar num ponto de 12 pixéis.
--------------------------------------------------------------------- */
.neg-tipos{ display:flex; flex-wrap:wrap; gap:6px }
.neg-tipo input{ position:absolute; opacity:0; width:0; height:0 }
.neg-tipo span{
  display:inline-flex; align-items:center; gap:6px; min-height:36px;
  padding:0 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  font-size:.8rem; font-weight:500; transition:background .15s, border-color .15s, color .15s;
}
.neg-tipo span i{ width:14px; height:14px }
.neg-tipo span:hover{ background:var(--hover); color:var(--ink) }
.neg-tipo input:checked + span{
  background:var(--blue-soft); border-color:var(--blue); color:var(--blue-d); font-weight:600;
}
/* O foco tem de VER-SE: quem anda pelo teclado não vê o rato a passar. */
.neg-tipo input:focus-visible + span{ outline:2px solid var(--blue); outline-offset:2px }
.neg-nota-i{ width:13px; height:13px; vertical-align:-2px; margin-right:5px; opacity:.75 }

/* =====================================================================
   SELECCIONAR VÁRIAS CONVERSAS NA CAIXA DE CORREIO
   ---------------------------------------------------------------------
   Nada aqui tem cor escrita à mão: tudo sai das variáveis do tema, senão
   nas oito combinações de cores isto aparecia sempre azul-marinho.
   Cantos rectos, como ele pediu para a lista do correio.
   ===================================================================== */
.cx-lista{ position:relative }

.cx-marca{
  flex:0 0 auto; width:30px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; padding:0; cursor:pointer;
}
/* O lucide troca o <i data-lucide> por um <svg>, por isso os dois
   selectores. Já nos mordeu uma vez, no painel das Definições. */
.cx-marca > i, .cx-marca > svg{
  width:15px; height:15px; box-sizing:border-box; stroke-width:3.5;
  border:1.5px solid var(--line-2); background:var(--card); color:transparent;
}
.cx-linha-peca:hover .cx-marca > svg,
.cx-linha-peca:hover .cx-marca > svg, .cx-linha-peca:hover .cx-marca > i{ border-color:var(--blue) }
.cx-marca.is-on > svg, .cx-marca.is-on > i{
  background:var(--blue); border-color:var(--blue); color:var(--on-blue);
}
.cx-linha-peca.is-marcada > .cx-linha{
  background:color-mix(in srgb, var(--blue) 10%, transparent);
}

.cx-sel-barra{ display:none }
.cx-sel-barra.is-on{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; position:relative;
  padding:6px 8px; margin-top:6px;
  background:var(--tint); border:1px solid var(--line);
  border-radius:var(--raio);   /* ele reparou que esta caixa ficou de canto reto */
}
.cx-sel-conta{
  font-size:12px; font-weight:600; color:var(--ink-2);
  margin:0 6px 0 2px; white-space:nowrap;
}
.cx-sel-btn{
  display:inline-flex; align-items:center; gap:5px; padding:4px 8px;
  font-size:12px; color:var(--ink-2); background:var(--card);
  border:1px solid var(--line); border-radius:var(--btn-raio); cursor:pointer;
}
.cx-sel-btn:hover{ background:var(--hover); color:var(--ink) }
.cx-sel-btn > svg, .cx-sel-btn > i{ width:13px; height:13px; stroke-width:1.5 }
.cx-sel-fim{ margin-left:auto }
.cx-marca-todos{ width:24px }

.cx-sel-pastas{ display:none }
.cx-sel-pastas.is-on{
  display:block; position:absolute; top:100%; z-index:40; min-width:180px;
  max-height:260px; overflow:auto;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 8px 24px -12px rgba(10,20,40,.35);
}
.cx-sel-pastas button{
  display:flex; align-items:center; gap:7px; width:100%; text-align:left;
  padding:7px 10px; font-size:12.5px; color:var(--ink-2);
  background:transparent; border:0; cursor:pointer;
}
.cx-sel-pastas button:hover{ background:var(--hover); color:var(--ink) }
.cx-sel-pastas svg, .cx-sel-pastas i{ width:13px; height:13px; flex:0 0 auto }

/* O «Anular». Fica em baixo, por cima da lista, e some ao fim de nove
   segundos. Vive só nesta página: quem fechar o portal desfaz no Gmail,
   e é isso que a mensagem tem de dar a entender. */
.cx-undo{ display:none }
.cx-undo.is-on{
  display:flex; align-items:center; gap:10px;
  position:absolute; left:10px; right:10px; bottom:12px; z-index:50;
  padding:8px 12px; font-size:12.5px;
  background:var(--nav-bg); color:var(--nav-ink);
  box-shadow:0 10px 30px -12px rgba(10,20,40,.5);
}
.cx-undo button{
  display:inline-flex; align-items:center; gap:5px; margin-left:auto;
  padding:3px 9px; font-size:12px; font-weight:600;
  color:var(--nav-ink); background:color-mix(in srgb, var(--nav-ink) 16%, transparent);
  border:0; cursor:pointer;
}
.cx-undo button:hover{ background:color-mix(in srgb, var(--nav-ink) 26%, transparent) }
.cx-undo button > svg, .cx-undo button > i{ width:13px; height:13px }

/* AS CAIXINHAS SÓ APARECEM NO MODO DE SELECÇÃO.
   «o quadrado não deve estar sempre presente na mensagem; deve ter em
   cima, quando a gente clica no quadrado aparecem eles todos.» Uma
   caixinha em cada linha o dia inteiro é tinta a mais para uma coisa que
   se faz uma vez por semana. No telemóvel entra-se com pressão longa. */
.cx-linha-peca > .cx-marca{ display:none }
.cx-lista-corpo.is-a-seleccionar .cx-linha-peca > .cx-marca{ display:flex }

/* O botão que abre o modo, no topo da lista. */
.cx-sel-abrir, .cx-so-por-ler{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
  font-size:12px; font-weight:500; cursor:pointer;
  color:var(--ink-2); background:var(--card);
  border:1px solid var(--line); border-radius:var(--btn-raio);
}
.cx-sel-abrir:hover, .cx-so-por-ler:hover{ background:var(--hover); color:var(--ink) }
.cx-sel-abrir > svg, .cx-so-por-ler > svg, .cx-sel-abrir > i, .cx-so-por-ler > i{ width:14px; height:14px; stroke-width:1.5 }
.cx-sel-abrir.is-on, .cx-so-por-ler.is-on{ background:var(--blue); border-color:var(--blue); color:var(--on-blue) }

/* =====================================================================
   O PAINEL EM GRELHA BENTO
   ---------------------------------------------------------------------
   Caixas de tamanhos diferentes em vez de cinco quadrados iguais. A que
   interessa é grande e vê-se primeiro; as outras acompanham.

   Regras do estilo aprovado: quatro colunas, 12px de intervalo, uma caixa
   de destaque a ocupar 2×2, caixas lisas com borda fina e sombra curta,
   e vidro SÓ no destaque.

   Nenhuma cor escrita à mão: tudo sai das variáveis do tema. O painel de
   cima do destaque usa as --sup-*, que são as mesmas do resto do portal —
   na combinação da casa dão vidro, nas outras sete dão superfície lisa.
   É o que permite haver UM Painel só e a casa continuar a ser a casa.
   ===================================================================== */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px }
.bento-caixa{
  background:var(--card); border:1px solid var(--line); border-radius:var(--raio);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
             0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent);
  padding:20px; position:relative; overflow:hidden; min-width:0;
}
.bento-larga{ grid-column:span 2 }
.bento-sem-folga{ padding:0 }
.bento-sem-folga .bento-titulo-dentro{ padding:18px 18px 8px; margin:0 }

.bento-etiqueta{
  display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}
.bento-etiqueta > svg, .bento-etiqueta > i{ width:14px; height:14px; flex:0 0 auto }
.bento-numero{ font-size:40px; line-height:44px; font-weight:700; letter-spacing:-.02em; margin-top:10px; color:var(--ink) }
.bento-numero-mi{ font-size:28px; line-height:32px; margin-top:6px }
.bento-sub{ margin:6px 0 0; font-size:13px; color:var(--ink-2) }
.bento-titulo{ font-size:14px; font-weight:600; color:var(--ink); margin:0 0 12px }
.bento-nada{ padding:26px 12px; text-align:center; font-size:13px; color:var(--ink-3) }

/* O DESTAQUE: cor por baixo, duas formas, e o painel por cima. */
.bento-destaque{
  grid-column:span 2; grid-row:span 2; min-height:230px;
  background:var(--blue); border:0; padding:0;
}
.bento-forma{ position:absolute; border-radius:50%; pointer-events:none }
.bento-forma-1{ width:230px; height:230px; background:var(--acc2); right:-55px; top:-75px; opacity:.9 }
.bento-forma-2{ width:150px; height:150px; background:var(--bar2); left:-35px; bottom:-55px; opacity:.85 }
/* O VIDRO DO DESTAQUE — em todos os temas, e só aqui.
   Primeiro tentei usar as --sup-*, que dão vidro na casa e superfície
   lisa nas outras sete. Ficou mal: sem transparência o painel branco
   sobre o azul lê-se como uma moldura, e as duas formas de cor que
   estão por baixo desaparecem. A folha que ele carregou tem o vidro
   definido para TODOS os temas e usado num sítio só — a caixa de
   destaque e os menus que abrem. É essa a regra, e os valores abaixo
   são os dela. */
:root{
  --vidro-destaque: color-mix(in srgb, var(--card) 62%, transparent);
  --vidro-orla:     color-mix(in srgb, var(--card) 70%, transparent);
  --vidro-sombra:   0 8px 32px color-mix(in srgb, var(--ink) 18%, transparent);
  /* O desfoque também vive numa variável, e não escrito na regra: é a
     mesma disciplina do resto do portal, e há um teste que a guarda —
     um blur escrito à mão numa regra é um sítio que deixa de obedecer
     ao tema no dia em que se mude de ideias. */
  --vidro-desfoque: blur(16px);
}
html[data-scheme="dark"]{
  --vidro-orla:   rgba(255,255,255,.14);
  --vidro-sombra: 0 8px 32px rgba(0,0,0,.45);
}
.bento-painel{
  position:absolute; inset:18px; padding:20px;
  display:flex; flex-direction:column; justify-content:space-between;
  border-radius:var(--raio); color:var(--ink);
  background:var(--vidro-destaque); border:1px solid var(--vidro-orla);
  -webkit-backdrop-filter:var(--vidro-desfoque); backdrop-filter:var(--vidro-desfoque);
  box-shadow:var(--vidro-sombra);
}
.bento-painel .bento-etiqueta{ color:var(--ink-2) }

/* A LISTA DAS ENCOMENDAS RECENTES.
   Era uma tabela de cinco colunas em meia largura de ecrã: o total ficava
   cortado e os números partiam-se ao meio. É lista, como na folha dele. */
.bento-lista{ list-style:none; margin:0; padding:0 }
.bento-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-top:1px solid var(--line-2); cursor:pointer;
}
.bento-item:first-child{ border-top:0 }
.bento-item:hover{ background:var(--hover) }
.bento-av{
  width:32px; height:32px; flex:0 0 auto; border-radius:50%;
  background:var(--avatar); color:var(--blue-d);
  display:grid; place-items:center; font-size:11px; font-weight:700;
}
.bento-item-txt{ flex:1 1 auto; min-width:0 }
.bento-item-txt b{ display:block; font-size:13.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bento-item-mi{ display:block; font-size:12px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bento-item-dir{ flex:0 0 auto; display:flex; align-items:center; gap:10px; white-space:nowrap }
.bento-item-eur{ font-size:13.5px; font-weight:600; color:var(--ink) }

@media (max-width:1100px){
  .bento{ grid-template-columns:repeat(2,1fr) }
  .bento-destaque{ grid-column:span 2; grid-row:span 1; min-height:200px }
  .bento-larga{ grid-column:span 2 }
}
@media (max-width:640px){
  .bento{ grid-template-columns:1fr }
  .bento-destaque, .bento-larga{ grid-column:span 1 }
  .bento-numero{ font-size:32px; line-height:36px }
}


/* =====================================================================
   RETOQUES DO CORREIO — três coisas que ele apontou a usar
   ===================================================================== */

/* 1. OS CANTOS DAS LINHAS DA LISTA.
   Ele tinha pedido os cantos retos quando eram caixas a flutuar, e
   agora, com o estilo novo, disse que «o quadrado não tem as pontas
   arredondadas para os 10px». Manda o pedido de agora. */
.cx-lista-corpo .cx-linha-peca{ border-radius:var(--raio) }
.cx-lista-corpo .cx-linha{ border-radius:var(--raio) }
.cx-lista-corpo .cx-estrela, .cx-lista-corpo .cx-lixo{ border-radius:0 var(--raio) var(--raio) 0 }

/* 2. OS ÍCONES DA COLUNA DA ESQUERDA, MAIS FINOS.
   «estão muito grossos, estão muito grandes, deviam ser mais finos.»
   O lucide desenha-os com traço de 2; a 1,5 e um ponto mais pequenos
   ficam da família dos outros e param de puxar o olho. */
.cx-pastas .cx-pasta svg, .cx-pastas .cx-pasta i{
  width:15px; height:15px; stroke-width:1.5;
}

/* 3. A ESTRELA, MAIS PEQUENA E MAIS SUAVE.
   Estava com o mesmo peso do resto da linha e era a primeira coisa que
   se via em cada e-mail — e não é ela a coisa mais importante da linha. */
.cx-estrela svg, .cx-lixo svg, .cx-estrela i, .cx-lixo i{ width:12.5px; height:12.5px; stroke-width:1.5 }
.cx-estrela, .cx-lixo{ color:color-mix(in srgb, var(--ink-3) 60%, transparent) }
.cx-estrela:hover, .cx-lixo:hover{ color:var(--acc2) }
.cx-estrela.is-on{ color:color-mix(in srgb, var(--aviso-ink) 85%, transparent) }

/* 4. O ENDEREÇO MAL ESCRITO, MARCADO NO SÍTIO.
   Antes não havia aviso nenhum: o e-mail não saía e ninguém dava por isso. */
.em-para .input.is-mal{
  border-color:var(--erro-ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--erro-ink) 16%, transparent);
}
.em-erro-campo{
  margin:6px 0 0; font-size:12px; font-weight:500; color:var(--erro-ink);
}

/* 5. «Por abrir» — o rastreio posto, ainda sem abertura. */
.em-selo-espera{
  background:color-mix(in srgb, var(--ink-3) 14%, transparent);
  color:var(--ink-2);
}

/* =====================================================================
   A JANELA DE ESCREVER — o que ele apontou, ponto por ponto
   ===================================================================== */

/* 1. «não gosto daqueles quadros à volta do Para, do Cc, do Bcc e do
      Assunto; prefiro uma linha, uma coisa mais simples.»
   Os campos deixam de ser caixas e passam a ser uma linha por baixo do
   texto. Ao escrever, a linha ganha a cor e engrossa — é o único sinal
   de que aquele é o campo activo, e chega. */
.em-janela .em-para-linha .input,
.em-escrever .em-para-linha .input,
.em-janela .em-assunto-campo,
.em-escrever .em-assunto-campo{
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  background:transparent; padding:7px 2px; box-shadow:none;
}
.em-janela .em-para-linha .input:focus,
.em-escrever .em-para-linha .input:focus,
.em-janela .em-assunto-campo:focus,
.em-escrever .em-assunto-campo:focus{
  outline:0; border-bottom:2px solid var(--blue); padding-bottom:6px;
}
/* O campo marcado a vermelho continua a marcar-se — mas em linha também. */
.em-para .input.is-mal{
  border:0; border-bottom:2px solid var(--erro-ink); box-shadow:none;
}
.em-para-linha label{ color:var(--ink-3); font-weight:500 }

/* A caixa de escrever, igual: uma moldura fina em vez de uma caixa grossa. */
.em-escrever textarea, .em-janela textarea{
  border:1px solid var(--line); border-radius:var(--raio);
  background:transparent;
}
.em-escrever textarea:focus, .em-janela textarea:focus{
  outline:0; border-color:var(--blue); box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 14%, transparent);
}

/* 2. «em cima está em azul escuro, não gosto daquela linha toda azul;
      podes contornar com uma linhazinha mais grossa.»
   A faixa deixa de ser um bloco de cor e passa a ser o fundo do cartão
   com um risco por baixo. O nome da janela lê-se na mesma, e a janela
   deixa de ter uma barra de cor a competir com o que está lá dentro. */
.em-janela-cab{
  background:var(--card); color:var(--ink);
  border-bottom:2px solid var(--blue);
}
.em-janela-bt{
  background:transparent; color:var(--ink-3);
  border-radius:var(--btn-raio);
}
.em-janela-bt:hover{ background:var(--hover); color:var(--ink) }
.em-janela-bt i, .em-janela-bt svg{ width:15px; height:15px; stroke-width:1.5 }

/* 3. «os símbolos ao lado de enviar estão muito grandes; mete aquilo
      mais fino, mais bonito.» */
.em-escrever-pe .em-clipe{ width:30px; height:30px; border-radius:var(--btn-raio) }
.em-escrever-pe .em-clipe i, .em-escrever-pe .em-clipe svg{
  width:16px; height:16px; stroke-width:1.5;
}
.em-escrever-pe .em-clipe:hover{ background:var(--hover) }

/* 4. «onde está a IA RMota, melhora-me aquele quadro; o botãozinho cor de
      laranja sim, mas põe uma coisa mais bonita, mais simples.»
   A barra deixa de ter fundo próprio e moldura: fica uma linha de
   ferramentas, com o campo em linha como os outros e o botão laranja a
   ser a única coisa com cor. */
.em-as{
  background:transparent; border:0; border-top:1px solid var(--line);
  border-radius:0; padding:10px 2px 2px; margin-top:10px;
}
.em-as-linha{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.em-as-ia{ display:flex; align-items:center; gap:8px; flex:1 1 320px; min-width:0 }
.em-as-tit{
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  font-size:11.5px; font-weight:600; color:var(--acc2); white-space:nowrap;
}
.em-as-tit svg, .em-as-tit i{ width:14px; height:14px; stroke-width:1.5 }
.em-as-campo{
  flex:1 1 auto; min-width:0;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  background:transparent; padding:6px 2px; font:inherit; font-size:12.5px; color:var(--ink);
}
.em-as-campo:focus{ outline:0; border-bottom:2px solid var(--acc2); padding-bottom:5px }
.em-as-bt{
  flex:0 0 auto; padding:5px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--on-badge); background:var(--acc2); border:0; border-radius:var(--btn-raio);
}
.em-as-bt:hover{ filter:brightness(1.06) }
.em-as-mais{
  flex:0 0 auto; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--btn-raio); background:transparent; color:var(--ink-3); cursor:pointer;
}
.em-as-mais:hover{ background:var(--hover); color:var(--ink) }
.em-as-mais svg, .em-as-mais i{ width:14px; height:14px; stroke-width:1.5 }

/* Os três botões dos dois ecrãs, no painel das Definições. */
.df-janelas{ display:inline-flex; gap:6px; flex-wrap:wrap }

/* =====================================================================
   O VIDRO É A CAMADA DE CIMA, NÃO A DE BAIXO
   ---------------------------------------------------------------------
   Ele apanhou isto a comparar com a caixa de destaque do Painel nova:
   «o opaco fica por trás, por cima fica o tipo vidro, está escrito no
   vidro, não no opaco — e no CRM e no e-mail está precisamente ao
   contrário».

   Tinha razão, e a inversão estava no código preto no branco: a coluna
   do CRM era `color-mix(--card 34%, transparent)` com desfoque — vidro —
   e o cartão que assenta em cima dela era `var(--card)`, opaco. Vidro por
   baixo, opaco por cima. O mesmo no correio: a coluna cinzenta e as
   linhas brancas opacas por cima.

   O vidro só existe como material quando tem alguma coisa por baixo para
   deixar passar. Posto por baixo de uma coisa opaca não deixa passar
   nada — é só uma superfície mais clara, e foi por isso que nunca se
   percebeu que era vidro.

   Agora: o que está POR BAIXO é opaco e calado; o que assenta EM CIMA,
   e leva o texto, é que é vidro. Nas sete combinações sem vidro, o
   --sup-* dá superfície lisa e fica tudo igual ao que já estava.
   ===================================================================== */

/* --- O QUADRO DO CRM ------------------------------------------------- */
/* A pista: era vidro, passa a ser uma superfície opaca e discreta. */
.crm-col{
  background:var(--crm-lane);
  border:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.crm-col-cab{
  background:var(--crm-lane);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* O cartão do negócio: era opaco, passa a ser o vidro — é ele que leva
   o nome do cliente, o valor e os botões. */
.crm-card{
  background:var(--sup-fundo);
  border:1px solid var(--sup-borda);
  box-shadow:var(--sup-sombra);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}

/* --- A LISTA DO CORREIO ---------------------------------------------- */
/* A coluna já era opaca (var(--bg)) — essa estava certa. O que estava ao
   contrário eram as linhas, brancas e opacas por cima dela. */
.cx-lista-corpo .cx-linha-peca{
  background:var(--sup-fundo);
  border:1px solid var(--sup-borda);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque);
}

/* Sem suporte para desfoque, o vidro vira superfície lisa em vez de
   ficar um vidro transparente com o texto a boiar por cima do que passa
   por trás. Vale para os dois sítios de cima. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .crm-card, .cx-lista-corpo .cx-linha-peca{ background:var(--card) }
}

/* A agenda: das … às …, repetição, dia inteiro. */
.ag-hh{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:2px }
.ag-hh-um{ display:flex; align-items:center; gap:7px; flex:1 1 210px; min-width:0 }
.ag-hh-rot{ font-size:12px; font-weight:600; color:var(--ink-3); flex:0 0 auto }
.ag-hh input{ flex:1 1 auto; min-width:0 }
.ag-linha-check{ display:flex; align-items:center; gap:8px; margin:9px 0 2px;
  font-size:13px; color:var(--ink-2); cursor:pointer }
.ag-rep{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.ag-rep select{ flex:1 1 220px; min-width:0 }
.ag-ate{ display:flex; align-items:center; gap:7px; flex:0 1 auto }
.ag-ate[hidden]{ display:none }
.ag-cx select{ padding:.5rem .6rem; border:1px solid var(--line); border-radius:var(--btn-raio);
  background:var(--card); color:var(--ink); font:inherit; font-size:.85rem }


/* AS LETRAS DA COLUNA DAS PASTAS, MAIS VISÍVEIS.
   «as letras ficaram parecidas com a cor da barra, mas mais suaves;
   deviam ficar brancas, mais visível.» Ao suavizar as barras baixei-lhes
   o contraste sem dar por isso: um texto a 72% de branco lia-se bem
   sobre um azul-marinho cheio, mas não sobre um tom fosco.
   O nome da pasta é para ler, não para adivinhar. */
.cx-pasta{ color:var(--nav-ink-2) }
.cx-pasta:hover{ color:var(--nav-ink) }
.cx-pasta.is-on{ color:var(--nav-ink); font-weight:600 }
.cx-pastas-titulo{ color:color-mix(in srgb, var(--nav-ink) 70%, transparent) }
.cx-pastas-vazio{ color:color-mix(in srgb, var(--nav-ink) 62%, transparent) }
.cx-pasta-n{ color:var(--nav-ink) }

/* =====================================================================
   O VIDRO NAS PEÇAS — em todos os temas, com cor por baixo
   ---------------------------------------------------------------------
   Ele mandou a fotografia do Painel a dizer «é assim»: a caixa de cor
   por trás, o painel de vidro por cima, o texto no vidro.

   Pôr as camadas na ordem certa não chegou, e a razão é física, não de
   gosto: o vidro não tem cor própria — só mostra o que está por baixo.
   Nos sete temas claros, por baixo estava branco, e vidro sobre branco
   dá branco. Mostrei-lhe as três versões lado a lado e ele escolheu a
   que dá cor à superfície de baixo. É esta.

   PORQUE É QUE NÃO USO AS --sup-* AQUI:
   as --sup-* estão em 47 sítios da folha. Ligar-lhes o vidro punha o
   portal inteiro em Liquid Glass — que foi exactamente o que ele
   recusou há semanas («nos outros é um estilo moderno e sofisticado,
   mas não com o Liquid Glass»). Estas variáveis são só para as peças
   que assentam numa superfície com cor: o cartão do CRM e a linha do
   correio. Em mais lado nenhum.
   ===================================================================== */
:root{
  /* VIDRO FOSCO. Terceira explicação dele, e a que fez o tostão cair:
     «esses cartões deviam de ser vidro opaco, e por trás um branco».
     Vidro OPACO — fosco, não transparente. O que faz uma coisa parecer
     vidro fosco não é deixar ver o que está por trás; é a ORLA clara em
     cima, a sombra suave por baixo, e o desfoque. Eu tinha-lhe dado a
     transparência e faltavam-lhe as três coisas que se veem. */
  --vidro-peca:        color-mix(in srgb, var(--card) 82%, transparent);
  --vidro-peca-orla:   rgba(255,255,255,.9);
  --vidro-peca-sombra: inset 0 1px 0 rgba(255,255,255,.95),
                       0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent),
                       0 12px 26px -14px color-mix(in srgb, var(--ink) 34%, transparent);
  --vidro-peca-desfoque: blur(14px) saturate(150%);
  /* E por baixo o claro, como ele disse — não branco puro, o cinzento
     claro do tema. É esse degrau que faz o cartão levantar-se da pista.
     Vidro fosco sobre branco puro não se vê: fica branco sobre branco. */
  --chao-peca: var(--bg);
  --chao-peca-orla: var(--line);
}
html[data-scheme="dark"]{
  /* No escuro a orla clara seria um risco branco gritante: fica ténue,
     e quem levanta o cartão é a sombra. */
  --vidro-peca:        color-mix(in srgb, var(--card) 78%, transparent);
  --vidro-peca-orla:   rgba(255,255,255,.13);
  --vidro-peca-sombra: inset 0 1px 0 rgba(255,255,255,.07),
                       0 12px 28px -14px rgba(0,0,0,.65);
  --chao-peca: var(--bg);
  --chao-peca-orla: rgba(255,255,255,.07);
}

/* A pista do CRM: opaca, com a cor do tema. */
.crm-col{ background:var(--chao-peca); border-color:var(--chao-peca-orla) }
.crm-col-cab{ background:transparent }
/* E o cartão em cima dela: vidro. */
.crm-card{
  background:var(--vidro-peca);
  border:1px solid var(--vidro-peca-orla);
  box-shadow:var(--vidro-peca-sombra);
  backdrop-filter:var(--vidro-peca-desfoque); -webkit-backdrop-filter:var(--vidro-peca-desfoque);
}

/* A coluna da lista do correio: o mesmo, com as mesmas variáveis. */
.cx-lista{ background:var(--chao-peca) }
.cx-lista-topo{ background:transparent; border-bottom-color:var(--chao-peca-orla) }
.cx-lista-corpo .cx-linha-peca{
  background:var(--vidro-peca);
  border:1px solid var(--vidro-peca-orla);
  box-shadow:var(--vidro-peca-sombra);
  backdrop-filter:var(--vidro-peca-desfoque); -webkit-backdrop-filter:var(--vidro-peca-desfoque);
}

/* Sem suporte para desfoque, volta a superfície lisa: o texto não pode
   ficar a boiar por cima do que passa por trás. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .crm-card, .cx-lista-corpo .cx-linha-peca{ background:var(--card) }
}

/* --- O LEVANTAR DO RATO, IGUAL AO DO DRIVE --------------------------- */
/* No Drive, passar o rato por cima de uma pasta levanta-a três pixels e
   aprofunda a sombra (.dr-cartao:hover). É o gesto de que ele mais gosta
   no portal, e não havia razão nenhuma para o correio não o ter também.

   Aqui é dois pixels em vez de três: a lista do correio é muito mais
   densa que a grelha do Drive, e três pixels numa linha de 64px de altura
   lê-se como um salto, não como um levantar. A curva e o tempo são os
   mesmos, que é o que faz o gesto parecer o mesmo. */
.cx-lista-corpo .cx-linha-peca{
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease,
             background .16s ease;
}
.cx-lista-corpo .cx-linha-peca:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             0 2px 4px color-mix(in srgb, var(--ink) 12%, transparent),
             0 16px 30px -16px color-mix(in srgb, var(--ink) 40%, transparent);
}
/* A conversa aberta não se levanta: já está levantada por estar aberta,
   e vê-la a subir mais quando o rato passa faz o painel do lado parecer
   solto dela. */
.cx-lista-corpo .cx-linha-peca:has(> .cx-linha.is-aberta):hover{
  transform:none;
}

/* As pastas da coluna da esquerda: o mesmo gesto, mas para o lado. Numa
   coluna estreita, levantar não se vê; encostar-se um bocadinho para
   dentro vê-se, e dá a mesma sensação de que a pasta respondeu. */
.cx-pasta{
  transition:transform .16s cubic-bezier(.2,.7,.3,1), background .16s ease,
             color .16s ease;
}
.cx-pasta:hover{ transform:translateX(2px) }
.cx-pasta.is-on:hover{ transform:none }

/* Quem tem o sistema com o movimento reduzido não leva salto nenhum —
   fica só a mudança de sombra e de fundo. */
@media (prefers-reduced-motion:reduce){
  .cx-lista-corpo .cx-linha-peca, .cx-pasta, .dr-cartao{ transition:none }
  .cx-lista-corpo .cx-linha-peca:hover, .cx-pasta:hover, .dr-cartao:hover{
    transform:none;
  }
}

/* ============================================================
   LIDOS E POR LER — que se distingam sem ser preciso procurar.
   ============================================================
   O João: «os e-mails que são vistos e os que não são vistos, a cor é
   toda igual. Os que chegam e não são vistos deviam ter uma cor
   diferente.» Tinha razão, e havia aqui duas coisas.

   A informação nunca faltou: a linha já recebia .is-nova e já havia um
   ponto azul. O que faltava era força — e, pior, um bloco mais abaixo
   neste mesmo ficheiro voltava a definir os mesmos pesos mais fracos
   (700 -> 600, 600 -> 500). Como vinha depois, ganhava. Nem o pouco que
   estava desenhado chegava ao ecrã.

   Negrito sozinho não resolve, por muito que se carregue. O que se lê a
   três metros é a MANCHA: por isso quem falta ler leva fundo, e quem já
   foi lido recua para texto normal e assunto acinzentado. Três sinais
   em vez de um.

   A cor sai do --blue-soft, que já existe na paleta e muda com o tema —
   nas outras sete combinações e no modo escuro acompanha sozinha, em
   vez de ficar uma mancha azul presa num portal verde. Foi o erro do
   CRM em vidro, e não se repete.

   Isto TEM de ficar no fim do ficheiro: é o que lhe dá a última palavra
   sobre o bloco que a estava a anular. */

.cx-linha.is-nova:not(.is-aberta){ background:var(--blue-soft) }
.cx-linha.is-nova:not(.is-aberta):hover{
  background:color-mix(in srgb, var(--blue-soft) 88%, var(--ink));
}
.cx-linha.is-nova .cx-quem{ font-weight:800; color:var(--ink) }
.cx-linha.is-nova .cx-assunto{ font-weight:700; color:var(--ink) }

/* E o contrário: o que já foi lido não precisa de gritar. */
.cx-linha:not(.is-nova) .cx-quem{ font-weight:400; color:var(--ink-2) }
.cx-linha:not(.is-nova) .cx-assunto{ font-weight:400; color:var(--ink-3) }

/* O ponto cresce um pouco e passa a ser da paleta, não de um azul
   escrito à mão que não sabia mudar de tema. */
.cx-ponto-novo{ width:8px; height:8px; background:var(--blue) }

/* Tirar uma representada de um domínio. Discreto — é uma correcção, não
   uma acção de todos os dias — mas visível, que é a diferença entre uma
   associação que se desfaz e uma que fica para sempre. */
.cx-ficha-tirar{
  margin:6px 0 0; padding:4px 9px; border:1px solid var(--line); border-radius:6px;
  background:transparent; color:var(--ink-2); font:inherit; font-size:.72rem;
  cursor:pointer;
}
.cx-ficha-tirar:hover{ background:var(--hover); color:var(--ink) }
.cx-ficha-tirar:disabled{ opacity:.55; cursor:default }
/* O domínio, dentro da frase que avisa do alcance da regra. */
.cx-dominio{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95em }

/* O «N por ler» não tem estilo próprio: veste-se pelas regras do
   .cx-sel-abrir, acrescentado a cada selector dele. Havia aqui um bloco
   escrito à mão — bordas redondas, tamanho de letra diferente, margem à
   esquerda — e era isso que o fazia destoar do Selecionar que tem ao lado. */

/* ============================================================
   A BARRA LATERAL DO CORREIO — CLARA.
   ============================================================
   O João: «aquela barra lateral fica muito carregada. Em cima tudo bem,
   faz sentido ter a cor assim, mas a lateral via ser mais suave, mais
   sumida.» E a seguir, sobre as opções: «Clara. É, sem dúvida, Clara.»

   Duas faixas da mesma cor forte, uma por cima e outra ao lado, é cor a
   mais para um ecrã onde se está a ler. Agora o topo fica a mandar sozinho
   e a lateral recua para uma superfície calma — que é o que ela é: um
   índice, não um destaque.

   NÃO é branco escrito à mão. Sai das cores do tema (--card, --ink,
   --line), portanto acompanha as oito combinações E o modo escuro: aí
   «clara» quer dizer um pouco mais clara do que o fundo, não branca com
   letras pretas, que num tema escuro seria um buraco.

   Fica no fim do ficheiro de propósito: é o que lhe dá a última palavra
   sobre as regras de cima, que pintavam tudo com as cores da navegação. */

.cx-pastas{
  /* CLARA, MAS DA COR DA CASA. Eu tinha posto --card — branco neutro — e
     ele viu logo: «não está lá o verde, ficou da cor do outro, ficou
     esquisito». Tinha razão: clara não quer dizer descolorida. É o tom da
     navegação lavado no branco da superfície, por isso continua verde numa
     combinação verde e azul numa azul, sem nenhuma cor escrita à mão. */
  background:color-mix(in srgb, var(--nav-bg) 9%, var(--card));
  border-right:1px solid color-mix(in srgb, var(--nav-bg) 16%, var(--line));
  backdrop-filter:none; -webkit-backdrop-filter:none;
}

/* As linhas: tinta normal de texto, não a tinta clara da navegação. */
.cx-pasta{ color:var(--ink-2) }
.cx-pasta svg, .cx-pasta i{ color:var(--ink-3, var(--ink-2)) }
.cx-pasta:hover{ background:var(--hover); color:var(--ink) }
.cx-pasta.is-on{
  background:color-mix(in srgb, var(--nav-bg) 17%, var(--card));
  color:var(--ink);
  font-weight:600;
}
.cx-pasta.is-on svg, .cx-pasta.is-on i{ color:var(--nav-bg) }
.cx-pasta:hover{ background:color-mix(in srgb, var(--nav-bg) 9%, var(--card)) }

/* Os títulos das secções e o aviso de vazio. */
.cx-pastas-titulo{ color:color-mix(in srgb, var(--ink) 52%, transparent) }
.cx-pastas-vazio{ color:color-mix(in srgb, var(--ink) 48%, transparent) }

/* O contador ao lado de cada pasta. */
.cx-pasta-n{
  background:color-mix(in srgb, var(--ink) 9%, transparent);
  color:var(--ink-2);
}
.cx-pasta.is-on .cx-pasta-n{ background:var(--nav-bg); color:var(--on-blue) }
.cx-pasta-nova{ color:color-mix(in srgb, var(--ink) 50%, transparent) }
.cx-pasta-nova:hover{ color:var(--blue) }

/* O botão «Mensagem nova» mantém-se azul e cheio: numa lateral calma é
   ele o único ponto de cor, e é isso que o põe à frente dos olhos. */






/* O CAIXOTE E O «POR LER» NÃO TÊM ESTILO PRÓPRIO — DE PROPÓSITO.
   «O que eu quero é que fique tudo igual.» Da primeira vez copiei os
   valores da estrela à mão e escapou-me metade: ela tem, mais abaixo no
   ficheiro, um ícone de 12,5px com traço fino e uma tinta a 60%. O caixote
   ficou com 14px e traço cheio — mais escuro e mais gordo, e é isso que se
   via.

   Agora o .cx-lixo está acrescentado a CADA selector da .cx-estrela, e o
   .cx-so-por-ler a cada selector do .cx-sel-abrir. Não há valores repetidos
   em lado nenhum: quem mexer num mexe nos dois, e não podem voltar a
   divergir.

   Só isto é do caixote, e só porque tem de ser: ao passar o rato fica cor
   de tijolo em vez de dourado. Num caixote convém avisar. */
.cx-lixo:hover{ color:var(--aviso-ink, #c1440e) }

/* ============================================================
   A BARRA DE ACÇÕES, TODA EM BAIXO (versão C, escolhida por ele).
   ============================================================
   «Fica espalhado dentro do ambiente» — as acções estavam em dois cantos
   opostos e obrigavam a decidir, a cada mensagem, onde procurar. Agora é
   uma barra só: um botão a mandar, dois de texto que merecem estar à vista
   (Seguimento e Mover) e o resto em ícones do tamanho que acertámos na
   lista. */
.cx-acoes-risco{
  width:1px; align-self:stretch; margin:2px 4px;
  background:color-mix(in srgb, var(--ink) 11%, transparent); flex:0 0 auto;
}
.cx-acoes-esp{ flex:1 1 auto; min-width:0 }

/* Os dois de texto levam ícone à frente: sem ele, «Seguimento» e «Mover»
   são duas palavras iguais em peso e demora-se a distingui-las. */
.cx-leitura-pe .btn-secondary{ display:inline-flex; align-items:center; gap:6px }
.cx-leitura-pe .btn-secondary > svg, .cx-leitura-pe .btn-secondary > i{
  width:14px; height:14px; stroke-width:1.5;
}
.cx-leitura-pe .btn-primary{ display:inline-flex; align-items:center; gap:6px }

/* No telemóvel não cabe tudo: os de texto perdem a palavra e ficam só com
   o ícone. O Responder é o único que mantém o nome — é o que se procura. */
@media (max-width:640px){
  .cx-leitura-pe .btn-secondary{ padding:7px 9px }
  .cx-leitura-pe .btn-secondary > span.rotulo{ display:none }
  .cx-acoes-esp{ flex:0 0 auto }
}

/* O CAIXOTE DA LISTA APARECE AO APROXIMAR O RATO.
   Ele queria os dois empilhados, para ocupar menos espaço. Não empilhei, e
   disse-lhe porquê: numa linha de 50px dois botões empilhados ficam com 25
   cada — metade do que um dedo acerta — e o que fica pequeno é o que APAGA
   a mensagem. Pior, o caixote de uma linha ficava colado à estrela da
   linha seguinte.
   Isto resolve o que ele queria de facto (menos confusão) sem encolher
   nada: a lista fica limpa, e o caixote só se mostra na linha onde o rato
   está. É o que o Gmail faz.
   No telemóvel não há rato — e aí fica sempre visível, senão não havia
   maneira nenhuma de lá chegar. */
@media (hover:hover) and (pointer:fine){
  .cx-lixo{ opacity:0; transition:opacity .12s ease, color .15s ease }
  .cx-linha-peca:hover .cx-lixo,
  .cx-linha-peca:focus-within .cx-lixo{ opacity:1 }
}

/* ============================================================
   A BARRA DA CONVERSA TEM DE CABER — MEDIDA, NÃO ADIVINHADA.
   ============================================================
   Medi-a no Chrome dele, com um e-mail aberto: os botões ocupavam 873px
   numa coluna de 913px. Cabia por 40 pixels. Bastava a janela encolher um
   bocado, ou a IA acender o «Responder com ajuda» (188px sozinho), para os
   últimos botões tombarem para uma segunda linha — e os últimos botões são
   precisamente a estrela, o arquivar, o lixo e o spam. Foi isso que ele
   viu: «não vejo lá a estrela, não vejo lá o arquivar, não vejo lá nada».
   Não faltavam. Tinham descido.

   Duas correcções, nesta ordem:
   1. Os ícones andam em grupo (.cx-acoes-grupo) — ou passam todos ou desce
      o grupo inteiro. Nunca três em cima e dois em baixo.
   2. Quando a coluna aperta, são as PALAVRAS que saem, não os botões. E a
      primeira palavra a sair é a do «Responder com ajuda», que é a mais
      comprida e a menos usada. O Seguimento e o Mover só perdem o nome
      muito mais abaixo — foi ele que os quis à vista, e é o último sítio
      onde mexo.

   Mede-se a COLUNA e não a janela (@container, não @media): a coluna da
   conversa encolhe quando a ficha do cliente abre, e a janela não dá por
   isso. Era este o erro de fundo. */
.cx-leitura-pe{ container-type:inline-size; container-name:pedeconversa }

.cx-acoes-grupo{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
}

@container pedeconversa (max-width:900px){
  .cx-leitura-pe [data-responder-ia] > span.rotulo{ display:none }
  .cx-leitura-pe [data-responder-ia]{ padding:7px 9px }
}
@container pedeconversa (max-width:740px){
  .cx-leitura-pe .btn-secondary > span.rotulo{ display:none }
  .cx-leitura-pe .btn-secondary{ padding:7px 9px }
  .cx-acoes-esp{ flex:0 0 auto }
}

/* ============================================================
   36 REGRAS DE ÍCONES QUE NUNCA PEGARAM. O MESMO ERRO, REPETIDO.
   ============================================================
   Isto é maior do que a barra. Varri o ecrã do correio à procura do mesmo
   padrão e encontrei 36 regras — 30 de tamanho, 6 de cor — todas escritas
   contra o <i> e todas mortas desde o dia em que foram escritas. Os ícones
   do correio estavam TODOS no tamanho de fábrica do lucide, 24px, onde o
   CSS pedia 11, 12, 14 ou 15. Não era só a barra: era o ecrã inteiro.
   Todas levam agora o svg ao lado, e cada uma volta ao tamanho que quem a
   escreveu tinha pedido.

   Só mexi no correio (.cx- e .em-). O resto do portal tem o mesmo padrão em
   mais uns sítios; não lhes toquei sem ele ver primeiro o efeito aqui.

   ============================================================
   OS ÍCONES DA BARRA ESTAVAM AO DOBRO DO TAMANHO. ERRO MEU.
   ============================================================
   «Aquilo está exageradamente grande, não está nada bonito.» Fui medir no
   Chrome dele: cada ícone da barra desenhava-se a 24x24. A regra que os
   devia pôr a 15px era esta:

       .cx-icone i{ width:15px; height:15px }

   e nunca chegou a pegar em nenhum. O lucide SUBSTITUI o <i data-lucide>
   por um <svg> — o <i> deixa de existir no momento em que o ícone aparece,
   e o selector fica a apontar para nada. Sem regra, o svg assume o seu
   tamanho de fábrica, que é 24. É exactamente o mesmo erro que já tínhamos
   apanhado na estrela da lista, e que lá foi corrigido acrescentando o svg
   ao selector (linha ~4509). Aqui ficou por corrigir.

   Ficam a 15px e com o traço fino, para casarem com os 12.5px da lista —
   um pouco maiores porque estão numa barra de acções e não colados a uma
   linha de texto, mas da mesma família. */
.cx-icone svg, .cx-icone i{ width:15px; height:15px; stroke-width:1.5 }
.cx-estrela-topo.is-on svg, .cx-estrela-topo.is-on i{ fill:currentColor }

/* SAIR DA CONVERSA — NO COMPUTADOR TAMBÉM.
   A seta de voltar estava escondida fora do telemóvel. No computador
   abria-se um e-mail e não havia por onde sair: a conversa ficava ali,
   aberta, até se abrir outra. «Fiquei lá.» Agora está sempre à vista, no
   canto de cima à esquerda da conversa, e o Escape faz o mesmo. */
.cx-voltar{ display:inline-flex }

/* (A .em-as-direto viveu meia hora e foi-se. Cheguei a pôr a assistente a
   escrever logo no corpo e esta linha anunciava-o. Estava errado: a
   proposta é para ser lida em baixo e só passa ao e-mail quando ele manda.
   Fica o registo para ninguém a voltar a inventar.) */
/* O aviso de que a mensagem original segue no encaminhar. */
.em-enc-nota{
  margin:0 0 8px; font-size:.75rem; color:var(--ink-3);
  background:var(--bg); border-radius:var(--raio-3, 4px); padding:6px 9px;
}

/* ============================================================
   UMA BARRA DA ASSISTENTE DE CADA VEZ.
   ============================================================
   «Em baixo, falar com a IA RMota. E em cima, falar com a IA RMota para a
   resposta. Faz sentido ter uma em cima e outra em baixo?» Faz o trabalho
   de duas, mas não a olhar: são iguais e fazem coisas diferentes — a de
   baixo diz o que fazer com o e-mail ANTES de abrir a resposta, a de cima
   emenda o rascunho que já está aberto.

   Com a caixa de resposta aberta, a de baixo já não tem nada para fazer.
   Esconde-se. Fica sempre uma só: a que pertence ao que se está a fazer. */
#em-leitura:has(#em-escrever form) .em-as-conversa{ display:none }

/* ============================================================
   O RODAPÉ DA CAIXA DE ESCREVER, LIMPO.
   ============================================================
   Tinha os ícones, dois interruptores, o «guardado» e uma linha de texto
   comprida — «Sai de joao.mota@rmota.pt · anexos até 25 MB · os grandes
   passam pelo seu Drive» — que se lê uma vez na vida e depois só ocupa
   espaço. O texto passou a ser um «i» que se lê ao passar o rato; quem
   precisa dele encontra-o, quem não precisa deixa de o ver. Não juntei
   isto à barra de baixo de propósito: os símbolos de baixo agem sobre o
   e-mail RECEBIDO, e juntá-los punha o Enviar encostado ao Deitar ao lixo. */
.em-pe-nota{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:6px; flex:0 0 auto;
  color:var(--ink-3); cursor:help;
}
.em-pe-nota:hover, .em-pe-nota:focus-visible{ background:var(--hover); color:var(--ink) }
.em-pe-nota svg, .em-pe-nota i{ width:13px; height:13px; stroke-width:1.5 }
.em-escrever-pe{ gap:.45rem }
.em-escrever-pe .em-clipe{ width:28px; height:28px }
.em-escrever-pe .em-clipe svg, .em-escrever-pe .em-clipe i{ width:15px; height:15px; stroke-width:1.5 }

/* ============================================================
   A AGENDA E A CONTA, NO FUNDO DA COLUNA DAS PASTAS — ERRO MEU.
   ============================================================
   «As letras não se percebe o que lá está escrito.» Não se percebia mesmo,
   e a culpa é de uma coisa que eu mudei e não fui ver o que arrastava.

   Esta coluna era ESCURA. O painel da agenda e o rodapé da conta usam as
   tintas da barra de navegação (--nav-ink-2), que são tintas CLARAS —
   feitas para se lerem sobre escuro. Quando ele pediu a coluna «mais suave,
   mais sumida», eu clareei-a — e deixei lá dentro texto claro sobre fundo
   claro. Ficou branco sobre branco.

   Aqui as tintas passam a ser as do papel (--ink, --ink-2, --ink-3), que é
   o que esta coluna é hoje. O DESENHO não muda: o painel da agenda mantém
   a disposição estreita de duas linhas que o .is-escuro lhe dá, porque a
   coluna continua estreita. O que muda é só a cor da tinta. */
.cx-pastas .ag-painel.is-escuro{
  background:color-mix(in srgb, var(--nav-bg) 6%, var(--card));
  border-color:color-mix(in srgb, var(--nav-bg) 14%, var(--line));
  box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.cx-pastas .ag-painel.is-escuro .ag-painel-cab{ color:var(--ink-2) }
.cx-pastas .ag-painel.is-escuro .ag-painel-cab svg, .cx-pastas .ag-painel.is-escuro .ag-painel-cab i{ color:var(--aviso-ink) }
.cx-pastas .ag-painel.is-escuro .ag-painel-mais{ color:var(--ink-3) }
.cx-pastas .ag-painel.is-escuro .ag-painel-mais:hover{ background:var(--hover); color:var(--ink) }
.cx-pastas .ag-painel.is-escuro .ag-ev{ color:var(--ink-2) }
.cx-pastas .ag-painel.is-escuro .ag-ev:hover{ background:var(--hover) }
.cx-pastas .ag-painel.is-escuro .ag-ev-dia{ color:var(--blue-d) }
.cx-pastas .ag-painel.is-escuro .ag-ev-onde,
.cx-pastas .ag-painel.is-escuro .ag-ev-hora{ color:var(--ink-3) }
.cx-pastas .ag-painel.is-escuro .ag-ev-tit{ color:var(--ink) }
.cx-pastas .ag-painel.is-escuro .ag-painel-espera,
.cx-pastas .ag-painel.is-escuro .ag-painel-vazio,
.cx-pastas .ag-painel.is-escuro .ag-painel-avisa{ color:var(--ink-3) }
.cx-pastas .ag-painel.is-escuro .ag-painel-avisa a{ color:var(--blue-d) }

/* O rodapé: a conta ligada e o atalho para o Gmail. Mesma história —
   o «rgba(255,255,255,.5)» do Gmail era invisível sobre claro. */
.cx-pastas .cx-conta{ color:var(--ink-3) }
.cx-pastas .cx-gmail{ color:var(--ink-3) }
.cx-pastas .cx-gmail:hover{ color:var(--blue-d) }

/* ============================================================
   A JANELA DA AGENDA — POR CIMA, SEM SAIR DE ONDE SE ESTÁ.
   ============================================================ */
.ag-janela-fundo{
  position:fixed; inset:0; z-index:90; display:flex;
  align-items:center; justify-content:center; padding:22px;
  background:color-mix(in srgb, var(--nav-bg) 46%, transparent);
}
.ag-janela{
  position:relative; display:flex; flex-direction:column;
  width:min(1120px, 100%); height:min(760px, 92vh);
  background:var(--card); border-radius:14px; overflow:hidden;
  box-shadow:0 34px 90px -30px rgba(16,26,61,.62);
}
.ag-janela-cab{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:11px 14px; border-bottom:1px solid var(--line); background:var(--card);
}
.ag-janela-tit{
  flex:1 1 auto; display:inline-flex; align-items:center; gap:7px;
  font-size:.9rem; font-weight:700; color:var(--ink);
}
.ag-janela-tit svg, .ag-janela-tit i{ width:16px; height:16px; color:var(--aviso-ink) }
.ag-janela-x{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:0; border-radius:8px; background:none;
  cursor:pointer; color:var(--ink-3);
}
.ag-janela-x:hover{ background:var(--hover); color:var(--ink) }
.ag-janela-x svg, .ag-janela-x i{ width:16px; height:16px; stroke-width:1.5 }
.ag-janela-corpo{ flex:1 1 auto; overflow:auto; padding:14px 16px 18px }
.ag-janela-espera{ margin:0; padding:24px 6px; font-size:.82rem; color:var(--ink-3); text-align:center }
/* Com a janela aberta, o que está por baixo não rola. */
body.tem-janela-agenda{ overflow:hidden }
@media (max-width:640px){
  .ag-janela-fundo{ padding:0 }
  .ag-janela{ width:100%; height:100%; border-radius:0 }
}

/* Os avisos, nas Definições. O que mais ocupa aqui é a explicação de
   porque é que NÃO está a tocar — e é de propósito: há cinco razões
   diferentes e do lado de fora são todas «não toca». */
.df-avisos-estado{ display:flex; flex-direction:column; gap:2px }
.df-aviso-nao{
  margin:6px 0 0; padding:9px 11px; border-radius:var(--raio-2, 6px);
  background:color-mix(in srgb, var(--aviso-ink) 9%, var(--card));
  border:1px solid color-mix(in srgb, var(--aviso-ink) 22%, transparent);
  font-size:.78rem; line-height:1.55; color:var(--ink-2);
}
.df-linha-check{ justify-content:space-between; gap:12px; cursor:pointer }
.df-aparelhos{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:3px }
.df-aparelhos li{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:5px 9px; border-radius:var(--raio-2, 6px); background:var(--bg);
  font-size:.79rem; color:var(--ink-2);
}
.df-ap-x{
  border:0; background:none; cursor:pointer; color:var(--ink-3);
  font-size:1.1rem; line-height:1; padding:0 4px;
}
.df-ap-x:hover{ color:var(--erro-ink) }

/* ============================================================
   OS DOIS BOTÕES DO CABEÇALHO PASSAM A TER NOME.
   ============================================================
   «O pessoal olha para aqueles dois quadradinhos e não sabe o quê. Depois
   começa-me a perguntar.» Um ícone é um lembrete para quem já sabe, não
   uma explicação para quem não sabe — e ele andava a dizer por telefone
   onde era «a rodinha». A palavra ao lado acaba com isso.

   No telemóvel a palavra recolhe: lá não cabe, e lá não há ninguém a quem
   explicar — quem usa o portal no telemóvel é sempre a mesma pessoa. */
.df-cab-bt{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; position:relative;
}
.df-cab-bt svg, .df-cab-bt i{ width:15px; height:15px; stroke-width:1.5; flex:0 0 auto }
.df-cab-txt{ white-space:nowrap }
@media (max-width:1100px){
  .df-cab-txt{ display:none }
  .df-cab-bt{ padding:6px 9px }
}

/* ============================================================
   AS DEFINIÇÕES EM SEPARADORES.
   ============================================================
   «Anda-se para baixo e para cima, está uma bagunça.» Sete secções
   seguidas num painel estreito: para chegar à conta rolava-se por cima
   das cores, do idioma, do correio e dos avisos, de cada vez.

   Quatro separadores, cada um cabe sem rolar. E — o que mais interessa —
   a próxima coisa que acrescentarmos entra num separador em vez de ir
   alongar a tira. */
.df-abas{
  flex:0 0 auto; display:flex; gap:2px; padding:0 10px;
  border-bottom:1px solid var(--line); background:var(--card);
}
.df-aba{
  flex:1 1 0; min-width:0; display:inline-flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  padding:9px 4px 8px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.7rem; font-weight:600; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.df-aba svg, .df-aba i{ width:16px; height:16px; stroke-width:1.5 }
.df-aba span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }
.df-aba:hover{ color:var(--ink-2); background:var(--hover) }
.df-aba.is-on{ color:var(--blue-d); border-bottom-color:var(--blue-d) }
.df-pag[hidden]{ display:none }
.cli-sem-marcas{
  margin:0; padding:26px 20px; text-align:center;
  border:1px dashed var(--line); border-radius:var(--raio);
  font-size:.88rem; line-height:1.6; color:var(--ink-3); background:var(--card);
}

/* ============================================================
   O QUE CADA CLIENTE VÊ — uma caixa de seleção por marca.
   ============================================================ */
.vis-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:2px }
.vis-linha{
  display:flex; align-items:center; gap:8px; padding:6px 9px;
  border-radius:var(--raio-2, 6px); cursor:pointer; font-size:.83rem; color:var(--ink);
}
.vis-linha:hover{ background:var(--hover) }
.vis-linha input{ flex:0 0 auto; width:15px; height:15px; cursor:pointer }
.vis-nome{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* As fechadas por acordo com a representada não se mexem daqui. Ficam à
   vista e de cadeado: sem isto, procurava-se a marca na lista e não estava
   lá — e ninguém adivinha porquê. */
.vis-linha.is-travada{ cursor:default; color:var(--ink-3) }
.vis-linha.is-travada:hover{ background:none }
.vis-selo{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:3px;
  font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--erro-ink); background:color-mix(in srgb, var(--erro-ink) 10%, transparent);
  padding:2px 6px; border-radius:999px;
}
.vis-selo svg, .vis-selo i{ width:10px; height:10px; stroke-width:2 }

/* ============================================================
   QUEM VÊ ESTA MARCA — a caixa que se abre na ficha da representada.
   ============================================================ */
.qv-fundo{
  position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center;
  padding:20px; background:color-mix(in srgb, var(--nav-bg) 48%, transparent);
}
.qv-cx{
  display:flex; flex-direction:column; width:min(560px,100%); max-height:86vh;
  background:var(--card); border-radius:14px; overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(16,26,61,.6);
}
.qv-cab{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:13px 16px; border-bottom:1px solid var(--line);
}
.qv-cab h3{ flex:1 1 auto; margin:0; display:inline-flex; align-items:center; gap:7px;
  font-size:.95rem; font-weight:700; color:var(--ink) }
.qv-cab svg, .qv-cab i{ width:16px; height:16px; stroke-width:1.5; color:var(--blue-d) }
.qv-x{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:0; border-radius:8px; background:none; cursor:pointer; color:var(--ink-3) }
.qv-x:hover{ background:var(--hover); color:var(--ink) }
.qv-x svg, .qv-x i{ width:16px; height:16px; stroke-width:1.5; color:inherit }
.qv-nota{ flex:0 0 auto; margin:0; padding:11px 16px 0; font-size:.78rem; line-height:1.55; color:var(--ink-3) }
/* A procura não é enfeite: são dezenas de clientes, e sem ela rolava-se a
   lista toda à procura de um nome. */
.qv-procura{
  flex:0 0 auto; margin:11px 16px; padding:7px 11px; font:inherit; font-size:.85rem;
  border:1px solid var(--line); border-radius:var(--raio-2, 6px);
  background:var(--card); color:var(--ink);
}
.qv-procura:focus{ outline:none; border-color:var(--blue) }
.qv-lista{ flex:1 1 auto; overflow-y:auto; padding:0 10px 14px }
.qv-linha{
  display:flex; align-items:center; gap:9px; padding:7px 8px;
  border-radius:var(--raio-2, 6px); cursor:pointer; font-size:.85rem; color:var(--ink);
}
.qv-linha:hover{ background:var(--hover) }
.qv-linha input{ flex:0 0 auto; width:15px; height:15px; cursor:pointer }
.qv-nome{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Quantas encomendas desta marca ele já fez por aqui. É a resposta à
   pergunta que se faz a seguir, dada antes de ela se fazer. */
.qv-enc{
  flex:0 0 auto; font-size:.68rem; font-weight:700; color:var(--aviso-ink);
  background:color-mix(in srgb, var(--aviso-ink) 12%, transparent);
  padding:2px 7px; border-radius:999px;
}
.qv-vazio{ margin:0; padding:18px 8px; text-align:center; font-size:.82rem; color:var(--ink-3) }

/* Uma casa em obras: a equipa vê-a, o cliente não. Sem esta etiqueta,
   ninguém distingue no ecrã uma representada por acabar de uma a
   funcionar — e descobria-se pela reclamação de um cliente. */
.fab-obras{
  position:absolute; top:9px; left:9px; z-index:4;
  font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; color:#7a5410;
  background:#fdf0d2; border:1px solid #f0d9a8;
}

/* ============================================================
   CARREGAR CATÁLOGO — ver antes de gravar.
   ============================================================ */
.ci-colar{
  width:100%; font:inherit; font-size:.8rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:9px 11px; border:1px solid var(--line); border-radius:var(--raio-2, 6px);
  background:var(--card); color:var(--ink); resize:vertical;
}
.ci-colar:focus{ outline:none; border-color:var(--blue) }
.ci-resumo{ font-size:.85rem; color:var(--ink-2); padding:8px 0 10px; line-height:1.7 }
.ci-n{ font-weight:800; color:var(--ink) }
.ci-bom{ color:#2f6b4f }
.ci-aviso{ color:var(--aviso-ink) }
.ci-mau{ color:var(--erro-ink) }
.ci-nota{ margin:0 0 8px; font-size:.75rem; line-height:1.55; color:var(--ink-3) }
.ci-mau-lista{
  margin:0 0 10px; padding:9px 11px; border-radius:var(--raio-2, 6px);
  background:color-mix(in srgb, var(--erro-ink) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--erro-ink) 22%, transparent);
  font-size:.75rem; line-height:1.6; color:var(--ink-2);
}
.ci-tab{ width:100%; border-collapse:collapse; font-size:.76rem }
.ci-tab th{ text-align:left; padding:5px 7px; color:var(--ink-3); font-weight:700;
  border-bottom:1px solid var(--line); white-space:nowrap }
.ci-tab td{ padding:5px 7px; border-bottom:1px solid var(--line); color:var(--ink) }
.ci-tab td:last-child{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }

/* O afinador do logótipo. O palco imita a caixa do cartão a sério, para
   se ver o resultado enquanto se arrasta — afinar às cegas e ir ver
   depois é o que faz ninguém afinar nada. */
.lg-palco{
  display:grid; place-items:center; padding:14px;
  background:repeating-conic-gradient(#f2f4f8 0 25%, #fff 0 50%) 0 0/16px 16px;
  border:1px solid var(--line); border-radius:12px;
}
.lg-caixa{
  --esc:1; width:100%; height:120px; display:grid; place-items:center; overflow:hidden;
}
.lg-caixa img{
  max-width:calc(78% * var(--esc)); max-height:calc(88% * var(--esc));
  object-fit:contain; transition:max-width .12s ease, max-height .12s ease;
}
.lg-vazio{ font-size:.78rem; color:var(--ink-3) }

/* ===================================================================
   O QUADRO DOS CONTACTOS  (#/contactos — ver public/js/pages/contactos.js)

   «fazer um quadro com uma setinha a clientes que têm o WhatsApp, depois
   noutra coluna os de e-mail... e eles são clientes de quê? Gicarnes,
   Gemi... e nós assim termos a seleção de para quem vamos enviar.»

   Uma tabela, e não cartões: são centenas de linhas e o que se faz aqui é
   correr a lista com os olhos à procura de um nome. Cartões obrigavam a
   rolar cinco vezes mais para ver o mesmo.
   =================================================================== */
.ct-pag{ padding-bottom:1rem }
/* Com o modo de marcação ligado, a barra de baixo fica colada ao ecrã e
   taparia as últimas linhas. Abre-se espaço por baixo da tabela. */
.ct-pag.em-modo{ padding-bottom:6.5rem }

.ct-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1rem }
.ct-titulo{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--ink) }
.ct-sub{ margin-top:.2rem; font-size:.85rem; color:var(--ink-3) }
.ct-sub b{ color:var(--ink) }
.ct-sub .ct-aviso{ color:#c9962f }
.ct-cab-bts{ display:flex; gap:.5rem; flex-wrap:wrap }

.ct-filtros{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem }
.ct-procura{ position:relative; display:inline-flex; align-items:center; flex:1 1 18rem; min-width:12rem }
.ct-procura svg{ position:absolute; left:.6rem; width:16px; height:16px; color:var(--ink-3); pointer-events:none }
.ct-procura input{ width:100%; padding:.45rem .6rem .45rem 2rem; font-size:.85rem;
  color:var(--ink); background:var(--campo-fundo,transparent);
  border:1px solid var(--vidro-linha); border-radius:6px }
.ct-sel{ padding:.45rem .6rem; font-size:.85rem; color:var(--ink);
  background:var(--campo-fundo,transparent); border:1px solid var(--vidro-linha); border-radius:6px }
.ct-sel-larga{ width:100%; margin:.6rem 0 }
.ct-check{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; color:var(--ink-2);
  white-space:nowrap; cursor:pointer }

.ct-tabela{ width:100%; border-collapse:collapse; font-size:.85rem }
.ct-tabela th{ text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); padding:.4rem .5rem; border-bottom:1px solid var(--vidro-linha); white-space:nowrap }
.ct-tabela td{ padding:.45rem .5rem; border-bottom:1px solid var(--vidro-linha); vertical-align:top }
.ct-linha:hover{ background:var(--vidro-fundo,rgba(127,127,127,.06)) }
.ct-nome b{ color:var(--ink); font-weight:650 }
.ct-cargo{ display:block; font-size:.74rem; color:var(--ink-3) }
.ct-empresa{ color:var(--ink-2) }
.ct-tel{ white-space:nowrap; font-variant-numeric:tabular-nums }
.ct-mail a{ color:var(--ink-2); text-decoration:none; word-break:break-all }
.ct-mail a:hover{ text-decoration:underline }
.ct-vazio{ color:var(--ink-3); opacity:.6; font-style:normal }
.ct-wa{ text-align:center }
.ct-wa-sim{ color:#25a366; display:inline-flex }
.ct-wa-sim svg{ width:17px; height:17px }

/* A ETIQUETA DA REPRESENTADA.
   «aquilo aparece com o fundo colorido, e depois ali representadas como a
   Más Fred e outras mais, aquilo não fica bem.»
   Tinha razão: a cor da marca estava a ser usada como cor do TEXTO, e
   medido contra o fundo verdadeiro 12 das 13 ficavam abaixo dos 4,5:1 da
   norma — a Más Fred em 1,53:1. A cor continua a ser a da casa; vem é
   corrigida do servidor até se ler (ver lib/cores.js), nos dois temas. */
.ct-etiqueta{ display:inline-block; margin:0 .25rem .25rem 0; padding:.1rem .45rem;
  font-size:.72rem; font-weight:650; line-height:1.5; white-space:nowrap;
  color:var(--et-tinta,var(--ink)); background:var(--et-fundo,var(--vidro-linha));
  border:1px solid var(--et-borda,var(--vidro-linha)); border-radius:4px }
html[data-scheme="dark"] .ct-etiqueta{
  color:var(--et-tinta-e,var(--ink)); background:var(--et-fundo-e,var(--vidro-linha));
  border-color:var(--et-borda-e,var(--vidro-linha)) }

/* E A TABELA PASSA A ASSENTAR NUMA SUPERFÍCIE.
   Isto foi o que ele viu primeiro e eu só percebi ao medir: as linhas dos
   contactos estavam pousadas DIRECTAMENTE sobre o fundo da página — toda
   a árvore, da linha até ao corpo, estava transparente. No resto do
   portal o conteúdo assenta num cartão. Era isso, mais do que as cores,
   que fazia a secção parecer por acabar. */
#ct-tabela{ background:var(--card); border:1px solid var(--vidro-linha);
  border-radius:10px; overflow:hidden }
#ct-tabela .ct-tabela th{ background:color-mix(in srgb, var(--ink) 3%, transparent) }
#ct-tabela .ct-tabela td, #ct-tabela .ct-tabela th{ padding-left:.7rem; padding-right:.7rem }
#ct-tabela .ct-tabela tbody tr:last-child td{ border-bottom:0 }

/* «Por rever» não é um aviso de erro — é um estado normal de quem entrou
   por importação. Discreto, mas visível, porque é ele que decide se a
   pessoa entra ou não num envio. */
.ct-rever{ display:inline-block; margin-left:.4rem; padding:0 .3rem; font-size:.68rem; font-weight:650;
  color:#9a7320; background:rgba(201,150,47,.14); border:1px solid rgba(201,150,47,.4); border-radius:3px }
.ct-linha.e-arquivado{ opacity:.45 }

.ct-acoes{ white-space:nowrap; text-align:right }
.ct-bt{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  color:var(--ink-3); background:none; border:0; border-radius:4px; cursor:pointer }
.ct-bt:hover{ color:var(--ink); background:var(--vidro-linha) }
.ct-bt svg{ width:15px; height:15px }
.ct-pico{ width:2rem; text-align:center }
.ct-nada{ padding:2.5rem 0; text-align:center; font-size:.9rem; color:var(--ink-3) }

/* A barra do modo de marcação. Colada em baixo de propósito: a lista é
   comprida, e um Guardar lá em cima ficava a cem linhas de onde se pica. */
.ct-modo{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.7rem 1.1rem; background:var(--sup-fundo,var(--fundo)); border-top:1px solid var(--vidro-borda);
  box-shadow:0 -6px 22px rgba(0,0,0,.14);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque) }
.ct-modo-marca{ padding:.15rem .5rem; font-size:.8rem; font-weight:700; color:#fff;
  background:var(--cor); border-radius:4px }
.ct-modo-txt{ font-size:.85rem; color:var(--ink) }
.ct-modo-nota{ flex:1 1 14rem; font-size:.76rem; color:var(--ink-3) }

/* O desfoque vem da variável, e não escrito à mão: as sete paletas que
   não são a da casa põem --sup-desfoque a none, e um blur escrito aqui
   ignorava a escolha dele. Mesma regra do resto do portal. */
.ct-fundo{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:1rem; background:color-mix(in srgb, var(--nav-bg) 46%, transparent);
  backdrop-filter:var(--sup-desfoque); -webkit-backdrop-filter:var(--sup-desfoque) }
.ct-modal{ width:min(30rem,100%); max-height:88vh; overflow:auto; padding:1.2rem;
  background:var(--sup-fundo,var(--fundo)); border:1px solid var(--vidro-borda); border-radius:10px;
  box-shadow:var(--vidro-sombra) }
.ct-modal h2{ font-size:1.05rem; font-weight:750; color:var(--ink) }
.ct-modal-nota{ margin-top:.3rem; font-size:.8rem; color:var(--ink-3) }
.ct-modal-bts{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem }
.ct-modal-ficha label{ display:block; margin-top:.6rem; font-size:.78rem; color:var(--ink-3) }
.ct-modal-ficha label input[type=text],
.ct-modal-ficha label input[type=email],
.ct-modal-ficha label input:not([type]){ display:block; width:100%; margin-top:.2rem; padding:.4rem .55rem;
  font-size:.88rem; color:var(--ink); background:var(--campo-fundo,transparent);
  border:1px solid var(--vidro-linha); border-radius:6px }
.ct-modal-ficha label.ct-check{ display:flex; margin-top:.7rem; font-size:.82rem; color:var(--ink-2) }
.ct-marcas-campo{ margin-top:.9rem; padding:.6rem .7rem; border:1px solid var(--vidro-linha); border-radius:8px }
.ct-marcas-campo legend{ padding:0 .3rem; font-size:.74rem; font-weight:650; color:var(--ink-3) }
.ct-marcas-campo .ct-check{ display:flex; margin-top:.2rem }

/* No telemóvel caem as colunas que menos fazem falta para encontrar alguém:
   a empresa cabe debaixo do nome na cabeça de quem lê, e o cargo também. */
@media (max-width:760px){
  .ct-tabela .ct-empresa, .ct-tabela th:nth-child(3){ display:none }
  .ct-tabela{ font-size:.8rem }
  .ct-modo{ gap:.5rem }
  .ct-modo-nota{ display:none }
}

/* Apanhar endereços do correio — a lista de propostas. */
.ct-modal-correio{ width:min(34rem,100%) }
.ct-corr-corpo{ max-height:46vh; overflow:auto; margin-top:.7rem }
.ct-corr-linha{ display:flex; align-items:baseline; gap:.5rem; padding:.3rem .2rem;
  border-bottom:1px solid var(--vidro-linha); cursor:pointer }
.ct-corr-linha:hover{ background:var(--vidro-fundo,rgba(127,127,127,.06)) }
.ct-corr-mail{ font-size:.84rem; color:var(--ink); word-break:break-all }
.ct-corr-meta{ margin-left:auto; font-size:.74rem; color:var(--ink-3); white-space:nowrap }

/* O pedido para não receber promoções.
   Vermelho discreto, e não um alarme: não é um erro, é uma vontade da
   pessoa. Mas tem de dar nas vistas o suficiente para ninguém a picar
   por distracção quando estiver a preparar um envio. */
.ct-saiu{ display:inline-block; margin-left:.4rem; padding:0 .3rem; font-size:.68rem; font-weight:650;
  color:#9c2c2c; background:rgba(190,60,60,.1); border:1px solid rgba(190,60,60,.35); border-radius:3px }
.ct-linha.e-saiu{ background:color-mix(in srgb, #be3c3c 4%, transparent) }
.ct-linha.e-saiu .ct-nome b, .ct-linha.e-saiu .ct-empresa, .ct-linha.e-saiu .ct-mail a{ opacity:.62 }
.ct-sub .ct-recusa{ color:#9c2c2c }
.ct-saiu-campo{ display:flex; align-items:flex-start; gap:.5rem; margin-top:.8rem;
  padding:.55rem .65rem; border:1px solid color-mix(in srgb, #be3c3c 22%, var(--vidro-linha));
  background:color-mix(in srgb, #be3c3c 5%, transparent); border-radius:7px }
.ct-saiu-campo span{ font-size:.8rem; color:var(--ink-2) }
.ct-saiu-campo b{ color:#9c2c2c; font-weight:650 }
.ct-saiu-campo em{ display:block; margin-top:.15rem; font-size:.74rem; font-style:normal; color:var(--ink-3) }

/* A linha do fim das promoções, nas Definições. */
.df-rot{ display:block; margin-top:.7rem; font-size:.75rem; font-weight:650; color:var(--ink-3) }
.df-area{ width:100%; margin-top:.25rem; padding:.45rem .6rem; font-size:.84rem; line-height:1.5;
  color:var(--ink); background:var(--campo-fundo,transparent);
  border:1px solid var(--vidro-linha); border-radius:6px; resize:vertical;
  font-family:inherit }
.df-conta-car{ margin-top:.5rem }
.df-rodape-bts{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.7rem }

/* A LISTA DE CLIENTES — cada cliente na sua caixa.
   Ele escolheu os cartões, mas com as colunas alinhadas como na tabela.
   Por isso a tabela FICA — é ela que alinha — e o que muda é que cada <tr>
   deixa de ser uma linha de uma grelha e passa a ser uma caixa que flutua.
   O canto vai nas células das pontas: numa <tr> o border-radius não pega.

   As caixas são LISAS, não de vidro, e é de propósito: no estilo da casa o
   vidro é do destaque, e cento e quarenta e um destaques não são destaque
   nenhum — translúcidas, cada uma apanhava um pedaço diferente do fundo e a
   lista ficava turva. Levam var(--card), que todas as oito paletas definem,
   e por isso acompanham o tema sem ter de o repetir aqui. */
.cli-lista{ background:transparent; border:0; box-shadow:none; padding:0;
  backdrop-filter:none; -webkit-backdrop-filter:none; }
.cli-lista table{ border-collapse:separate; border-spacing:0 7px; }
.cli-lista thead th{ padding:2px 14px 8px; border-bottom:0; }
.cli-lista tbody tr{ background:var(--card);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent);
  transition:box-shadow .12s ease; }
.cli-lista tbody td{ padding:12px 14px; vertical-align:middle;
  border-top:1px solid var(--vidro-linha); border-bottom:1px solid var(--vidro-linha); }
.cli-lista tbody td:first-child{ border-left:1px solid var(--vidro-linha);
  border-radius:14px 0 0 14px; }
.cli-lista tbody td:last-child{ border-right:1px solid var(--vidro-linha);
  border-radius:0 14px 14px 0; }
/* o .table-row:hover pinta a linha toda; num cartão isso tirava-lhe a cor de
   caixa, por isso aqui o passar por cima levanta-o em vez de o pintar */
.cli-lista tbody tr.table-row:hover{ background:var(--card);
  box-shadow:0 3px 10px color-mix(in srgb, var(--ink) 14%, transparent); }
.cli-lista tbody tr.table-row:hover td{
  border-color:color-mix(in srgb, var(--ink) 20%, transparent); }

/* O AZUL DA CASA ESCRITO À MÃO, NO TEMA ESCURO.
   Há 33 sítios no portal com text-[#101a3d] — o azul da casa escrito
   directamente na classe, de quando só havia tema claro. No escuro isso é
   azul-escuro por cima de azul-escuro: o nome do cliente desaparecia da
   lista, e os títulos das fichas com ele. Em vez de andar a trocar 33
   sítios à mão, a classe é remapeada aqui, e só no escuro — no tema claro
   var(--ink) é esse mesmo azul, por isso nada muda para quem lá está. */
html[data-scheme="dark"] .text-\[\#101a3d\]{ color:var(--ink); }

/* O CORREIO VOLTA A SER BRANCO — nos temas CLAROS, e menos a barra da esquerda.
   =====================================================================
   O vidro entrou aqui em duas rondas e, somadas, deixaram as duas colunas
   do meio translúcidas. Num tema claro o fundo do portal é creme
   (#F2EEE7 na casa), por isso a lista ficava creme e a área de leitura
   ficava a 62% de branco POR CIMA desse creme — um cinzento sujo por trás
   dos cartões. Foi o que ele viu: «a parte ficou escura por trás dos
   cartões e devia ser branco».

   O que ele pediu, e é o que está aqui:
     · a lista das conversas — BRANCA
     · a área de leitura e os cartões lá dentro — BRANCOS
     · a barra das pastas, totalmente à esquerda — fica como está, com a
       cor do tema, mais escurinha. É a única do meio que não se toca.

   SÓ NOS TEMAS CLAROS. Ele foi explícito: «nos escuros fica na cor dos
   escuros que está». Nos escuros o vidro não suja nada — o fundo já é
   escuro — por isso ficam exactamente como estavam, e tudo aqui está
   fechado a [data-scheme="light"]. O data-scheme nunca é "auto": o
   tema.js resolve-o sempre para light ou dark antes de o escrever.

   Com as duas colunas do meio brancas elas liam-se como uma só — era por
   isso que a lista era cinzenta. A separação passa a fazer-se com um
   risco de 1px e com a conversa aberta pintada de azul claro, que é mais
   limpo do que lavar uma coluna inteira de cinzento. */
html[data-scheme="light"] .cx-lista,
html[data-scheme="light"] .cx-lista-topo{ background:var(--card);
  backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-scheme="light"] .cx-lista{ border-right:1px solid var(--vidro-linha); }
html[data-scheme="light"] .cx-leitura{ background:var(--card);
  backdrop-filter:none; -webkit-backdrop-filter:none; }

/* Os cartões: brancos e opacos, com o risco a dar-lhes o contorno. */
html[data-scheme="light"] .cx-lista-corpo .cx-linha-peca{ background:var(--card);
  border:1px solid var(--vidro-linha); box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-scheme="light"] .cx-lista-corpo .cx-linha-peca:hover{
  background:color-mix(in srgb, var(--ink) 4%, var(--card)); }
html[data-scheme="light"] .cx-msg{ background:var(--card); border-color:var(--vidro-linha);
  backdrop-filter:none; -webkit-backdrop-filter:none; }
/* o que saiu de nós continua a distinguir-se — mas opaco, não translúcido */
html[data-scheme="light"] .cx-msg.is-nossa{
  background:color-mix(in srgb, var(--blue) 7%, var(--card));
  border-color:color-mix(in srgb, var(--blue) 18%, transparent); }

/* A conversa aberta: agora que a coluna é branca, é ela que tem de se
   marcar. Azul claro chapado, em vez do vidro que em cima de branco não
   se via. */
html[data-scheme="light"] .cx-linha.is-aberta,
html[data-scheme="light"] .cx-lista-corpo .cx-linha-peca:has(> .cx-linha.is-aberta){
  background:color-mix(in srgb, var(--blue) 9%, var(--card));
  border-color:color-mix(in srgb, var(--blue) 30%, transparent);
  box-shadow:none; }
html[data-scheme="light"] .cx-linha:hover{
  background:color-mix(in srgb, var(--ink) 4%, var(--card)) }

/* SAIR DO LIXO E DO SPAM.
   O botão que traz de volta não pode ser igual ao que deita fora. O
   caixote é vermelho de aviso; este é verde de alívio, e na conversa
   aberta leva o nome escrito ao lado do desenho — porque quem lá está,
   está lá por engano, e um ícone entre cinco ícones iguais não se
   encontra a essa hora. */
.cx-repor{ color:var(--ok-ink, #15803d) }
.cx-repor:hover{ color:var(--ok-ink, #15803d);
  background:color-mix(in srgb, var(--ok-ink, #15803d) 12%, transparent) }
.cx-icone.cx-sair-dali{ width:auto; gap:6px; padding:0 10px;
  color:var(--ok-ink, #15803d); font-size:.8rem; font-weight:700;
  background:color-mix(in srgb, var(--ok-ink, #15803d) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--ok-ink, #15803d) 28%, transparent) }
.cx-icone.cx-sair-dali:hover{
  background:color-mix(in srgb, var(--ok-ink, #15803d) 18%, transparent) }
.cx-icone.cx-sair-dali .rotulo{ white-space:nowrap }
@container pedeconversa (max-width: 460px){
  .cx-icone.cx-sair-dali .rotulo{ display:none }
  .cx-icone.cx-sair-dali{ width:34px; padding:0 }
}

/* UMA REPRESENTADA QUE AINDA NÃO ABRIU A CLIENTES.
   Cor de espera, não de proibição: o cadeado «por acordo» é uma porta
   fechada à chave, isto é uma porta que ainda não se abriu. O quadradinho
   funciona na mesma — deixa-se preparado para o dia em que abrir. */
.vis-selo-porabrir{ color:var(--aviso-ink, #92400e);
  background:var(--aviso-bg, #fff4e5);
  border:1px solid color-mix(in srgb, var(--aviso-ink, #92400e) 24%, transparent) }
.vis-linha.is-porabrir .vis-nome{ color:var(--ink-2) }

/* OS TIPOS DO CLIENTE — caixas, porque podem ser vários.
   Embrulham sozinhas; numa ficha estreita descem em vez de cortar. */
/* EM GRELHA, E NÃO EMPILHADOS COMO VIEREM.
   «Estão todos amontoados, isto não faz sentido nenhum, podem estar
   alinhados.» Estavam a embrulhar por tamanho — cada caixa tão larga
   quanto a palavra lá dentro — e sete palavras de tamanhos diferentes
   dão sete caixas desalinhadas e um bloco com o perfil serrado. Numa
   grelha de colunas iguais caem todas a prumo, e o olho lê uma lista em
   vez de um monte. */
.tipos-cx{ display:grid; grid-template-columns:repeat(auto-fit, minmax(178px, 1fr)); gap:8px }
.tipo-op{ display:flex; align-items:center; gap:7px; cursor:pointer; min-width:0;
  padding:7px 11px; font-size:.8rem; font-weight:600; color:var(--ink-2);
  background:var(--card); border:1px solid var(--vidro-linha); border-radius:6px }
.tipo-op > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tipo-op:hover{ border-color:color-mix(in srgb, var(--ink) 22%, transparent) }
.tipo-op:has(input:checked){ color:var(--blue-d, var(--blue));
  background:color-mix(in srgb, var(--blue) 8%, var(--card));
  border-color:color-mix(in srgb, var(--blue) 34%, transparent) }
.tipo-op input{ margin:0 }

/* A FICHA DO CLIENTE — o painel que abre por cima da lista.
   =====================================================================
   Era um rectângulo de 672px encostado à direita, com meio ecrã vazio ao
   lado e tudo numa coluna só. Agora ocupa o que precisa, divide-se em
   duas, e as duas coisas que se procuram — o nome e o Guardar — ficam
   paradas enquanto o resto rola.
   O fundo vem de var(--card): a ficha acompanha as oito paletas e deixa
   de ser branco chapado, que no tema escuro era um clarão. */
.ficha-painel{ display:flex; flex-direction:column; width:100%;
  max-width:min(1180px, 94vw); height:100%; background:var(--card);
  box-shadow:-10px 0 40px -12px rgba(8,12,28,.3) }

.ficha-topo{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 22px; border-bottom:1px solid var(--vidro-linha);
  background:var(--card) }
.ficha-topo-nome{ min-width:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.ficha-topo h3{ margin:0; font-size:1.1rem; font-weight:750; color:var(--ink);
  letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ficha-topo-nif{ font-size:.75rem; color:var(--ink-3); font-variant-numeric:tabular-nums }

.ficha-corpo{ flex:1 1 auto; overflow-y:auto; padding:18px 22px 22px }

/* Duas colunas: à esquerda quem é o cliente, à direita o que compra.
   Abaixo de 1000px a ficha é estreita de mais para duas e volta a uma. */
.ficha-ident{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:12px; margin-bottom:16px }
.ficha-colunas{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start }
@media (min-width:1000px){ .ficha-colunas{ grid-template-columns:1fr 1fr } }
.ficha-col{ display:flex; flex-direction:column; gap:16px; min-width:0 }

/* Todos os blocos iguais: a mesma moldura, a mesma legenda, o mesmo ar.
   Antes cada um tinha nascido com as suas medidas. */
.ficha-bloco{ border:1px solid var(--vidro-linha); border-radius:10px;
  padding:14px 16px 16px; margin:0; min-width:0 }
.ficha-bloco > legend{ padding:0 6px; font-size:.82rem; font-weight:750; color:var(--ink) }
.ficha-bloco > p{ margin-top:0 }
.ficha-bloco textarea{ width:100%; margin-top:2px }
/* um botão de «acrescentar» é sempre o último do seu bloco e é sempre igual */
.ficha-bloco > .btn-secondary{ margin-top:10px }

.ficha-encs{ list-style:none; margin:0; padding:0; font-size:.85rem }
.ficha-encs li{ display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--vidro-linha) }
.ficha-encs li:last-child{ border-bottom:0 }
.ficha-enc-dir{ color:var(--ink-3); white-space:nowrap }

.ficha-pe{ flex:0 0 auto; display:flex; justify-content:flex-end; gap:10px;
  padding:13px 22px; border-top:1px solid var(--vidro-linha); background:var(--card) }
/* Todos os botões da ficha com a mesma altura. Era a queixa dele: «nem
   todos estão do mesmo tamanho». */
.ficha-painel .btn-primary, .ficha-painel .btn-secondary{
  min-height:36px; padding:0 14px; display:inline-flex; align-items:center;
  justify-content:center; white-space:nowrap }
.ficha-pe .btn-primary{ padding:0 20px }


/* O «Tipo de negócio» ocupa a linha toda da identificação: é uma grelha
   dentro de uma grelha, e espremido numa coluna de 230px não alinhava
   nada. */
.ficha-ident > label:has(.tipos-cx){ grid-column:1 / -1 }

/* O GUARDAR RESPONDE.
   «Quando se carrega no guardar, ele devia mudar de cor.» Devia: entre
   carregar e a ficha fechar há uma ida à rede, e nesse tempo o botão
   estava calado — parecia que não tinha ouvido, e quem não tem a certeza
   carrega outra vez. Agora diz as três coisas por ordem: estou a tratar
   disso, está feito, ou não consegui. */
.btn-primary.is-a-guardar{ opacity:.75; cursor:progress }
.btn-primary.is-guardado{ background:var(--ok-ink, #15803d) !important;
  border-color:var(--ok-ink, #15803d) !important; color:#fff !important }

/* OS BOTÕES PASSAM A TRAZER O SEU TAMANHO.
   =====================================================================
   Medido: mais de TRINTA maneiras diferentes de escrever os dois botões
   que existem — «btn-primary text-sm», «btn-primary text-sm px-4 py-2»,
   «btn-secondary text-xs px-3 py-1.5 w-fit», «btn-primary w-full py-2.5
   mt-2»… A razão não era desleixo de quem os escreveu: é que o
   .btn-primary e o .btn-secondary não definiam tamanho NENHUM — nem
   altura, nem preenchimento, nem corpo de letra. Cada botão tinha mesmo
   de inventar o seu, e trinta autores inventam trinta.

   Resolve-se onde nasce. Os dois tipos passam a trazer a sua medida, e
   quem os usa deixa de ter de dizer nada. Ficam DUAS medidas e não
   trinta: a normal, e a pequena para os botões que vivem dentro de
   listas apertadas — essa tem nome (.btn-pequeno) em vez de ser um
   ajuste à mão de cada vez. */
.btn-primary, .btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; padding:0 16px; font-size:.875rem; line-height:1;
  white-space:nowrap; }
.btn-primary.btn-pequeno, .btn-secondary.btn-pequeno{
  min-height:30px; padding:0 11px; font-size:.78rem; gap:5px; }
/* Um botão que queira a largura toda continua a poder pedi-la. */
.btn-primary.w-full, .btn-secondary.w-full{ width:100% }

/* AS PESSOAS DA FICHA, COM SUGESTÕES.
   A lista aparece colada ao campo e por cima de tudo o resto — dentro de
   um painel que rola, uma lista que empurre o conteúdo faz a linha saltar
   debaixo do dedo a meio de se escolher. */
.pessoa-linha{ position:relative; margin-bottom:8px }
.pessoa-campos{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.pessoa-campos .input{ font-size:.85rem }
.pessoa-sugs{ position:absolute; z-index:60; left:0; right:0; top:calc(100% - 2px);
  max-height:276px; overflow-y:auto; background:var(--card);
  border:1px solid var(--vidro-linha); border-radius:10px;
  box-shadow:0 10px 28px -8px rgba(8,12,28,.3) }
.pessoa-sug{ display:grid; grid-template-columns:1fr auto; gap:2px 12px; width:100%;
  text-align:left; padding:8px 12px; border:0; background:transparent; cursor:pointer;
  border-bottom:1px solid var(--vidro-linha) }
.pessoa-sug:last-child{ border-bottom:0 }
.pessoa-sug:hover{ background:color-mix(in srgb, var(--ink) 5%, var(--card)) }
.pessoa-sug-nome{ font-size:.86rem; font-weight:700; color:var(--ink) }
.pessoa-sug-sub{ grid-column:1; font-size:.75rem; color:var(--ink-3) }
.pessoa-sug-dir{ grid-row:1 / span 2; align-self:center; font-size:.75rem;
  color:var(--ink-2); white-space:nowrap }
.pessoa-sug-wa{ font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.04em;
  color:var(--ok-ink, #15803d); border:1px solid color-mix(in srgb, var(--ok-ink,#15803d) 34%, transparent);
  border-radius:4px; padding:1px 4px; margin-left:4px }
.pessoa-sug-ja{ grid-column:1 / -1; font-size:.68rem; color:var(--aviso-ink, #92400e) }
@media (max-width:560px){ .pessoa-campos{ grid-template-columns:1fr } }
/* O que vem do arquivo do correio distingue-se do que vem do telemóvel:
   um é uma pessoa já revista, o outro é um endereço que ele reconhece. */
.pessoa-sug.is-dacaixa .pessoa-sug-nome{ font-weight:600 }
.pessoa-sug-fonte{ font-style:normal; font-size:.68rem; font-weight:700;
  color:var(--blue-d, var(--blue));
  background:color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius:4px; padding:1px 5px }

/* O RODAPÉ DAS DEFINIÇÕES — quem está, e a porta.
   Parado em baixo, em qualquer separador. O «Sair» era preciso abrir as
   definições, trocar para o separador da Conta e procurá-lo no meio do
   resto: três passos para a coisa mais simples que há. */
.df-pe{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 16px; border-top:1px solid var(--line); background:var(--card) }
.df-pe .df-eu{ display:flex; align-items:center; gap:10px; min-width:0; margin:0 }
.df-pe .df-eu-txt{ display:flex; flex-direction:column; min-width:0 }
.df-pe .df-eu-txt strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* A porta é discreta, não é vermelha: sair não é apagar nada, e um botão
   de aviso ali em baixo parado o dia todo cansa a vista. */
.df-pe .df-sair{ flex:0 0 auto; min-height:38px }

/* AS NOVIDADES DO PORTAL — uma janela, e não uma coluna estreita.
   =====================================================================
   Era 576px de largura com tudo em fila indiana: as linhas de cada
   novidade partiam ao meio e seis meses de trabalho davam um metro de
   altura para rolar. Agora ocupa o ecrã que tem, e as entradas correm em
   duas colunas quando há espaço para elas. */
.nv-fundo{ position:fixed; inset:0; z-index:70; background:rgba(8,12,28,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:28px 16px; overflow-y:auto }
.nv-janela{ width:100%; max-width:min(980px, 94vw); background:var(--card);
  color:var(--ink); border:1px solid var(--vidro-linha); border-radius:14px;
  box-shadow:0 26px 70px -24px rgba(8,12,28,.55); overflow:hidden }
.nv-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 22px; border-bottom:1px solid var(--vidro-linha) }
.nv-topo h2{ margin:0; font-size:1.05rem; font-weight:750; color:var(--ink) }
.nv-versao{ margin:2px 0 0; font-size:.72rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums }
.nv-x{ flex:0 0 auto; width:38px; height:38px; border:0; background:transparent;
  color:var(--ink-3); font-size:1.5rem; line-height:1; border-radius:9px; cursor:pointer }
.nv-x:hover{ background:var(--hover); color:var(--ink) }

/* Em duas colunas, com as entradas inteiras — o break-inside é o que
   impede uma novidade de ficar com o título numa coluna e as linhas na
   outra, que é pior do que uma coluna só. */
.nv-lista{ list-style:none; margin:0; padding:18px 22px 22px; columns:2; column-gap:26px }
@media (max-width:760px){ .nv-lista{ columns:1 } }
.nv-item{ break-inside:avoid; margin:0 0 16px; padding-left:13px;
  border-left:2px solid var(--vidro-linha) }
.nv-item.is-novo{ border-left-color:var(--ouro, #c9962f) }
.nv-cab{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.nv-data{ font-size:.7rem; color:var(--ink-3); font-variant-numeric:tabular-nums }
.nv-tit{ font-size:.88rem; font-weight:700; color:var(--ink) }
.nv-novo{ font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--aviso-ink, #92400e); background:var(--aviso-bg, #fff4e5);
  border-radius:4px; padding:1px 5px }
.nv-linhas{ list-style:none; margin:4px 0 0; padding:0 }
.nv-linhas li{ font-size:.82rem; color:var(--ink-2); line-height:1.5; margin-bottom:2px }
.nv-vazio{ font-size:.85rem; color:var(--ink-3) }

/* OS E-MAILS DA CASA — um por linha, e não todos no mesmo campo.
   Havia quem colasse dois com um ponto e vírgula por não ter onde os pôr,
   e um campo com ponto e vírgula lá dentro não é um endereço. */
.emails-cx{ display:flex; flex-direction:column; gap:6px; margin-top:2px }
.email-linha{ display:flex; align-items:center; gap:6px }
.email-linha .input{ flex:1 1 auto; min-width:0 }
.email-x{ flex:0 0 auto; width:30px; height:30px; border-radius:6px; border:0;
  background:transparent; color:var(--ink-3); font-size:1.15rem; line-height:1; cursor:pointer }
.email-x:hover{ background:var(--hover); color:var(--erro-ink, #b42318) }

/* ——— Cliente inativo: tem de ver-se de relance ———————————————————
   Antes era uma .crm-tag cinzenta do tamanho de uma migalha ao lado do
   nome: quem passava os olhos pela lista não dava por ela. Um cliente
   inativo é das poucas coisas nesta lista que muda o que a pessoa faz a
   seguir (não se liga, não se envia, não conta para as contas), por isso
   passa a ter cor própria, um risco à esquerda da linha, e o resto da
   linha mais apagado — o nome fica a cheio, que é o que se procura.
   A cor é fixa (não é a da paleta) porque tem de significar sempre a
   mesma coisa nos 8 temas; só muda entre claro e escuro, para se ler. */
:root{
  --inativo-cor:#b42318;
  --inativo-fundo:rgba(180,35,24,.10);
  --inativo-linha:rgba(180,35,24,.32);
}
html[data-scheme="dark"]{
  --inativo-cor:#ff9f93;
  --inativo-fundo:rgba(255,159,147,.14);
  --inativo-linha:rgba(255,159,147,.36);
}

.selo-inativo{
  display:inline-block; vertical-align:1px; margin-left:8px;
  font-size:.66rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; line-height:1; white-space:nowrap;
  padding:.32rem .5rem; border-radius:4px;
  background:var(--inativo-fundo);
  color:var(--inativo-cor);
  border:1px solid var(--inativo-linha);
}

.cli-lista tbody tr.e-inativo td{ opacity:.68; }
.cli-lista tbody tr.e-inativo td:first-child{
  opacity:1;
  border-left:3px solid var(--inativo-cor);
}
.cli-lista tbody tr.e-inativo:hover td{ opacity:1; }

/* ——— A coluna «Como paga»: um tamanho, uma ordem, uma altura ————————
   Três coisas que ele deu por elas de uma vez:
     «o bom pagador e o mau pagador estão do mesmo tamanho, o médio é
      mais pequenino»;
     «quando é médio, o botão do +25 dias passa para a frente; se for
      mau, passa para baixo»;
     «e fica ligeiramente mais grossa a faixazinha».
   São a mesma coisa vista de três ângulos: a célula não tinha forma
   nenhuma. Os quadradinhos ajustavam-se ao comprimento da palavra, e o
   número de dias ia para onde coubesse — ao lado quando a palavra era
   curta, por baixo quando era longa. A linha mudava de altura conforme o
   cliente, e uma lista onde cada linha tem a sua altura lê-se mal.
   Agora: largura mínima igual para os quatro estados, os dias SEMPRE por
   baixo, e a célula com altura fixa — reservada mesmo quando não há dias
   a mostrar. Custa uns pixéis em cada linha; paga-se em poder correr a
   lista de cima a baixo sem nada saltar. */
.pg-chip{ min-width:7.4rem; justify-content:flex-start; }

.pg-cel{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:4px; min-height:52px; justify-content:center;
}
/* Os dias de atraso são o rodapé do estado, não um segundo estado: ficam
   um pouco mais baixos de propósito, para a vista não hesitar entre os
   dois. É a única diferença de medida que há aqui, e é essa a razão. */
.pg-cel .pg-atraso{ height:22px; font-size:.69rem; }

/* ——— A ranhura entre os cartões ————————————————————————————————
   «Aquela distância do A. S. Simões para o [de baixo], aquele espacinho
   que tem no meio, encurtares um bocadinho, ficar mais fino, em vez de
   estar tão grosso — e alargar um bocadinho mais a coisa do cliente.»
   O espaço entre cartões era 7px e os cartões ganharam altura com a
   coluna de cima; junto, ficava uma lista muito arejada e pouca coisa
   em cada ecrã. Fica em 4px, e o que se poupa vai para dentro do
   cartão: mais respiro à esquerda e à direita, e a coluna do nome com
   largura garantida em vez de ficar à mercê do que o navegador decidir. */
.cli-lista table{ border-spacing:0 4px; }
.cli-lista tbody td{ padding:10px 16px; }
.cli-lista thead th{ padding:2px 16px 8px; }
.cli-lista th:first-child, .cli-lista td:first-child{ width:34%; }

/* ——— O estado do cliente, na ficha ——————————————————————————————
   Duas opções à vista, com a cor da escolhida — o mesmo controlo do
   «Como paga». O verde é o mesmo do bom pagador; o do inativo é o
   mesmo selo que a lista usa, para a pessoa reconhecer a cor de um
   sítio para o outro. */
.est-rotulo{ display:block; }
.est-escolha{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-top:.25rem; }
/* Mais apertado do que o irmão do «Como paga», e de propósito: ali são
   quatro opções numa fila só para elas, aqui são duas a dividir a última
   coluna de uma fila de campos de texto. Se levassem o mesmo tamanho,
   puxavam a fila toda para baixo e ficava aquele degrau que ele já me
   tinha apontado na ficha. */
.est-escolha .pg-op{ padding:.45rem .4rem; gap:.15rem; }
.est-escolha .pg-op-desc{ font-size:.63rem; }
.est-ativo   { --pg:#157347; }
.est-inativo { --pg:var(--inativo-cor); }
@media (max-width:560px){ .est-escolha{ grid-template-columns:1fr } }

/* ——— O rodapé do cartão: três pastilhas do mesmo tamanho ——————————
   O Rodrigo: «tem avançar, abrir e portal. O avançar e o abrir ficarem
   do tamanho do portal. O portal fica tal e qual como está — os outros
   estão muito grandes.»
   Tinha olho: na mesma fiada estavam duas medidas. A etiqueta da origem
   («Portal») em .68rem, e os dois botões em .72rem com quase o dobro do
   acolchoado — 26px contra 19px. Três coisas lado a lado, duas alturas.
   Os botões descem à medida da etiqueta. O que os distingue dela passa a
   ser só o peso da letra e a cor do principal — que é o que os devia ter
   distinguido desde o início, e não o tamanho. Isto vale SÓ no rodapé do
   cartão: o .crm-btn vive em mais vinte sítios e esses não mudam.

   PORQUE É QUE LEVA !important, QUE NÃO É PREGUIÇA.
   A regra «uma forma só para os botões», lá em cima, impõe 38px de
   altura a TODO o .crm-btn — e impõe-no com !important, de propósito,
   porque nasceu para acabar com trinta medidas inventadas à mão. Uma
   excepção a uma regra escrita assim só se faz com a mesma força.
   O que a torna legítima é ter NOME e um sítio: é o rodapé do cartão, e
   é só ali. Uma medida solta num botão qualquer continua a ser o que
   aquela regra proíbe. */
.crm-card-rodape .crm-btn{
  min-height:23px!important;   /* a altura exacta da etiqueta «Portal» */
  padding:0 8px!important;
  font-size:.68rem!important;
}

/* ——— A barra do quadro fica à vista ————————————————————————————
   «Carrego na seta, mas não anda mais para o lado. Consegues pôr outra
   forma de puxar? Com o rato?»
   A barra existia — mas o macOS esconde-a até alguém rolar, e com um
   rato de roda simples não há como rolar na horizontal. Uma barra que
   só aparece depois de se conseguir andar não serve a quem não
   consegue. Fica sempre, e fica com corpo suficiente para se agarrar.
   O cursor de mão diz a segunda parte: isto também se puxa. */
.crm-board{
  cursor:grab;
  /* A barra do navegador esconde-se: há uma nossa por cima, e duas
     barras para a mesma coisa é uma a mais. */
  scrollbar-width:none;
}
.crm-board::-webkit-scrollbar{ height:0 }
.crm-board.a-puxar{ cursor:grabbing; user-select:none }

/* ——— A barra de puxar, POR CIMA do quadro ——————————————————————
   «Eu tenho a Dock em baixo e aquilo é difícil de trabalhar. Aquilo
   devia estar era em cima.»
   A barra do navegador nasce sempre no fundo do que rola, e no fundo
   do ecrã dele está a Dock do Mac a tapar-lhe os últimos pixéis.
   Esta nasce em cima, onde não há nada a disputar o espaço, tem corpo
   para se agarrar, e mostra de relance que parte do quadro se está a
   ver. */
.crm-barra{
  position:relative;
  height:14px;
  margin:2px 2px 8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  cursor:pointer;
  touch-action:none;
}
.crm-barra[hidden]{ display:none }
.crm-barra-puxo{
  position:absolute; top:2px; bottom:2px; left:0;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 34%, transparent);
  cursor:grab;
  transition:background .14s ease;
}
.crm-barra:hover .crm-barra-puxo{ background:color-mix(in srgb, var(--ink) 48%, transparent) }
.crm-barra.a-puxar{ cursor:grabbing }
.crm-barra.a-puxar .crm-barra-puxo{
  background:var(--blue); cursor:grabbing; transition:none;
}
/* Os cartões e os botões continuam a ser coisas em que se carrega. */
.crm-board .crm-card{ cursor:default }
.crm-board .crm-btn{ cursor:pointer }

/* ——— Enviar promoção: a lista de quem recebe ———————————————————
   «Como é que depois eu envio o WhatsApp?»
   Não envia: o portal prepara e ele carrega em enviar, um a um. Esta
   lista é o sítio onde se vê quem falta, quem já recebeu e quem não
   pode receber — e é por ela que se pode parar a meio e continuar
   amanhã sem mandar duas vezes ao mesmo. */
.ct-promo-caixa{ max-width:760px; width:min(760px, 94vw) }
.ct-promo-topo{ display:grid; grid-template-columns:2fr 1fr; gap:.6rem; margin:.6rem 0 .2rem }
.ct-promo-corpo{ margin-top:.6rem }
.ct-promo-rodape{ font-size:.76rem; color:var(--ink-3); margin:.35rem 0 .7rem }
.ct-promo-conta{
  font-size:.82rem; color:var(--ink-2);
  padding:.5rem .7rem; border-radius:6px;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  margin-bottom:.6rem;
}
.ct-promo-lista{ max-height:42vh; overflow:auto; display:flex; flex-direction:column; gap:4px }
.ct-promo-linha{
  display:flex; align-items:center; gap:.6rem;
  padding:.4rem .55rem; border-radius:6px;
  border:1px solid var(--vidro-linha); background:var(--card);
}
.ct-promo-quem{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.25 }
.ct-promo-onde{ flex:0 0 auto; font-size:.78rem; color:var(--ink-3); white-space:nowrap }
/* Já recebeu: apaga-se, mas não desaparece — é preciso vê-lo para saber
   que está feito, e para o poder desmarcar se afinal não saiu. */
.ct-promo-linha.is-feito{ opacity:.6 }
.ct-promo-linha.is-fora{ opacity:.45 }
.ct-promo-feito{
  font-size:.7rem; font-weight:700; white-space:nowrap;
  color:#157347; background:color-mix(in srgb, #157347 10%, transparent);
  border:1px solid color-mix(in srgb, #157347 30%, transparent);
  border-radius:4px; padding:.2rem .45rem;
}
html[data-scheme="dark"] .ct-promo-feito{
  color:#7fd4a6; background:color-mix(in srgb, #7fd4a6 14%, transparent);
  border-color:color-mix(in srgb, #7fd4a6 34%, transparent);
}
.ct-promo-fora{ margin-top:.7rem; font-size:.82rem }
.ct-promo-fora summary{ cursor:pointer; color:var(--ink-2); margin-bottom:.4rem }
@media (max-width:640px){ .ct-promo-topo{ grid-template-columns:1fr } }