/* ═══════════════════════════════════════════════════════════════════════════
   APROVA · sistema visual
   Claro e quente na gestão, neutro e escuro na revisão da imagem.
   O escuro é obrigatoriamente neutro: qualquer tinta no entorno desloca a cor
   percebida do render, e cor é justamente o que se está aprovando.

   A primeira metade deste arquivo VEM DO PROTÓTIPO (prototipos/v2), que é a
   referência de comportamento do produto — está escrito assim no README de lá.
   Copiar em vez de reescrever não é preguiça: a aparência foi decidida ali, com
   as telas montadas, e reinterpretá-la à mão produz um parecido que ninguém
   reconhece. A segunda metade é o que o produto tem e o protótipo não.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   APROVA · sistema visual
   Claro e quente na gestão, neutro e escuro na revisão da imagem.
   O escuro é obrigatoriamente neutro: qualquer tinta no entorno desloca a cor
   percebida do render, e cor é justamente o que se está aprovando.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* superfícies claras — papel quente */
  --paper:#FAF8F5;  --surface:#fff;  --surface-2:#F4F1EC;  --surface-3:#EDE8E0;
  --line:#E8E2D9;   --line-2:#D8D0C4;

  /* tinta */
  --ink:#191512;  --ink-2:#4C453D;  --ink-3:#7D746A;  --ink-4:#A79E93;

  /* marca */
  --brand:#C4623C; --brand-600:#AC5230; --brand-700:#8C4023;
  --brand-50:#FDF2EC; --brand-100:#F8DFD1; --brand-200:#EFC0A6;

  /* semântica */
  --ok:#2E7351;    --ok-50:#EAF3EE;  --ok-200:#C0DDCE;
  --warn:#94682C;  --warn-50:#F8F1E1; --warn-200:#E6D3AE;
  --info:#3A6A88;  --info-50:#E9F0F5; --info-200:#C2D6E2;
  --danger:#A33D2A;--danger-50:#F9ECE8;--danger-200:#EBC5B9;

  /* a Lista: as cinco cores que não são semânticas, uma por etapa da Produção
     (A-004, 02/10/2026). Pastilha (-50), a borda dela (-200) e o texto (-forte). */
  --ciano-50:#E4F2F2;   --ciano-200:#B5DADB;   --ciano-forte:#1D5C60;
  --roxo-50:#EFEBF6;    --roxo-200:#D2C8E5;    --roxo-forte:#4E3E78;
  --amarelo-50:#FBF6D2; --amarelo-200:#EBDB84; --amarelo-forte:#5F5409;
  --lima-50:#EEF4DF;    --lima-200:#CDDFA4;    --lima-forte:#435F18;
  --ardosia-50:#E4E8ED; --ardosia-200:#B7C0CB; --ardosia-forte:#36414F;
  /* e o rosa, da etapa "Pausado" (A-009, 03/10/2026) */
  --rosa-50:#F9E9F1;    --rosa-200:#EBC3D7;    --rosa-forte:#7A2E55;
  /* a moldura do cartão de Itens: o tom do MEIO de cada cor, que se reconhece de
     longe — o "-forte" do amarelo e do laranja é quase marrom */
  --moldura-g:#B5ADA3; --moldura-b:#5B8DB0; --moldura-c:#3FA3A6; --moldura-p:#8B73C4;
  --moldura-y:#D9B730; --moldura-a:#DB8A3E; --moldura-l:#8DB443; --moldura-v:#4E9E73;
  --moldura-r:#D0644C; --moldura-k:#6C7A8C; --moldura-m:#C2558E;

  /* escuro do visualizador — cinzas neutros, sem tinta */
  --v-0:#0D0D0D; --v-1:#161616; --v-2:#1E1E1E; --v-3:#292929; --v-4:#363636;
  --v-line:#333; --v-ink:#EFEDEA; --v-ink-2:#A8A29B; --v-ink-3:#77716B;

  /* pares que o tema inverte e que antes eram literal solto no meio do arquivo:
     texto SOBRE uma superfície pintada de tinta/verde/marca. Se só a superfície
     virasse e o texto não, a inicial no avatar sumiria no próprio fundo. */
  --sobre-ink:#fff;  --sobre-ok:#fff;  --sobre-brand:#fff;
  --sobre-warn:#fff; --sobre-info:#fff;
  /* a versão FORTE de cada cor semântica: o texto escuro que se lê em cima da
     pastilha clarinha da mesma família. No escuro os dois trocam de lado — a
     pastilha escurece e o texto tem de clarear, senão vira tinta sobre tinta. */
  --ok-forte:#255E42;  --warn-forte:#795323;  --info-forte:#2C5268;
  --line-3:#C2B8A9;        /* a borda do hover, um passo além de --line-2 */
  --surface-hover:#FEFDFC; /* o fundo levanta no hover: aqui, clareia */
  --surface-fraca:#FCFBF9; /* o degrau mais baixo: cabeçalho de tabela dentro de cartão */
  --ok-hover:#255E42;      /* e o verde escurece; no escuro, os dois invertem */
  --top-veu:rgba(255,255,255,.86);  /* o vidro fosco da barra de cima */
  --top-solido:#fff;       /* a MESMA barra, opaca: é o anel do contador do sino */

  --r1:8px; --r2:12px; --r3:16px; --r4:22px;
  --sh-1:0 1px 2px rgba(40,28,18,.05);
  --sh-2:0 1px 2px rgba(40,28,18,.05),0 10px 26px -14px rgba(40,28,18,.30);
  --sh-3:0 2px 6px rgba(40,28,18,.07),0 24px 54px -18px rgba(40,28,18,.36);
  --e:cubic-bezier(.2,.8,.25,1); --t:.18s;
  --fs:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Inter,
       Roboto,"Helvetica Neue",Arial,sans-serif;
  --fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* Diz ao navegador de que lado estamos, para que o que ELE desenha sozinho —
     barra de rolagem, caixa de seleção, seletor de data, campo de arquivo —
     venha do mesmo lado. Sem esta linha o escuro fica com riscas brancas nas
     bordas da tela e um calendário claro saltando do meio de um formulário. */
  color-scheme:light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   O MESMO SISTEMA, DO OUTRO LADO

   O escuro daqui é CINZA NEUTRO, e não um marrom escuro que combinasse com o
   papel quente do claro. Não é escolha de gosto: é a mesma regra escrita lá em
   cima para o visualizador. Miniatura, mosaico e tira de projeto encostam em
   render, e o entorno tingido desloca a cor percebida da imagem — que é
   justamente o que o cliente está aprovando. Um cinza sem tinta não opina.

   São TRÊS estados e dois blocos gêmeos, porque o CSS não deixa juntar uma
   consulta de mídia com um seletor de atributo na mesma regra:

     sem atributo  → quem manda é o aparelho (o @media abaixo)
     data-tema="escuro" → escolha explícita, vence o aparelho
     data-tema="claro"  → escolha explícita, e o :not() do @media a respeita

   OS DOIS BLOCOS TÊM DE SER IDÊNTICOS. Mexeu num, mexe no outro — e é isso
   que `backend/testes/tema.php` confere, para ninguém descobrir a diferença
   por acidente, três semanas depois, num aparelho que não é o seu.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    color-scheme:dark;
    --paper:#131313;  --surface:#1B1B1B;  --surface-2:#232323;  --surface-3:#2B2B2B;
    --line:#2F2F2F;   --line-2:#3F3F3F;   --line-3:#525252;
    --surface-hover:#242424; --surface-fraca:#1F1F1F;
    --top-veu:rgba(19,19,19,.86);  --top-solido:#171717;
    --ink:#EFEDEA;  --ink-2:#C4BFB9;  --ink-3:#A9A29B;  --ink-4:#938D87;
    --sobre-ink:#131313;  --sobre-ok:#0C1811;  --sobre-brand:#1A0E07;
    --sobre-warn:#1E1608; --sobre-info:#0E1A20;
    --ok-forte:#74CFA0;  --warn-forte:#E0B978;  --info-forte:#9CC4DE;
    --brand:#C4623C; --brand-600:#D4794F; --brand-700:#E7A183;
    --brand-50:#26150F; --brand-100:#331C13; --brand-200:#5B3122;
    --ok:#46A776;    --ok-hover:#56B885; --ok-50:#15251D;  --ok-200:#2F5240;
    --warn:#C08A3E;  --warn-50:#261D0F; --warn-200:#54401F;
    --info:#6FA3C4;  --info-50:#121F27; --info-200:#2C4658;
    --danger:#D97862;--danger-50:#271512;--danger-200:#57302A;
    --ciano-50:#0F2224;   --ciano-200:#28494B;   --ciano-forte:#8FD0D2;
    --roxo-50:#1C1726;    --roxo-200:#3D3354;    --roxo-forte:#C3B4E6;
    --amarelo-50:#23200B; --amarelo-200:#514819; --amarelo-forte:#E6D27A;
    --lima-50:#1A2210;    --lima-200:#3B4A22;    --lima-forte:#B9D88A;
    --ardosia-50:#1C2127; --ardosia-200:#3D4652; --ardosia-forte:#AEB9C6;
    --rosa-50:#26121C;    --rosa-200:#5A2A42;    --rosa-forte:#E9A6C8;
    --moldura-g:#6E6862; --moldura-b:#5E8FB3; --moldura-c:#48A9AC; --moldura-p:#9481C9;
    --moldura-y:#C9AA34; --moldura-a:#CE8540; --moldura-l:#8BAF48; --moldura-v:#4FA275;
    --moldura-r:#CF6A55; --moldura-k:#75849A; --moldura-m:#C8689A;
    --sh-1:0 1px 2px rgba(0,0,0,.55);
    --sh-2:0 1px 2px rgba(0,0,0,.55),0 10px 26px -14px rgba(0,0,0,.9);
    --sh-3:0 2px 6px rgba(0,0,0,.6),0 24px 54px -18px rgba(0,0,0,.95);
  }
}
:root[data-tema="escuro"]{
  color-scheme:dark;
  --paper:#131313;  --surface:#1B1B1B;  --surface-2:#232323;  --surface-3:#2B2B2B;
  --line:#2F2F2F;   --line-2:#3F3F3F;   --line-3:#525252;
  --surface-hover:#242424; --surface-fraca:#1F1F1F;
  --top-veu:rgba(19,19,19,.86);  --top-solido:#171717;
  --ink:#EFEDEA;  --ink-2:#C4BFB9;  --ink-3:#A9A29B;  --ink-4:#938D87;
  --sobre-ink:#131313;  --sobre-ok:#0C1811;  --sobre-brand:#1A0E07;
  --sobre-warn:#1E1608; --sobre-info:#0E1A20;
  --ok-forte:#74CFA0;  --warn-forte:#E0B978;  --info-forte:#9CC4DE;
  --brand:#C4623C; --brand-600:#D4794F; --brand-700:#E7A183;
  --brand-50:#26150F; --brand-100:#331C13; --brand-200:#5B3122;
  --ok:#46A776;    --ok-hover:#56B885; --ok-50:#15251D;  --ok-200:#2F5240;
  --warn:#C08A3E;  --warn-50:#261D0F; --warn-200:#54401F;
  --info:#6FA3C4;  --info-50:#121F27; --info-200:#2C4658;
  --danger:#D97862;--danger-50:#271512;--danger-200:#57302A;
  --ciano-50:#0F2224;   --ciano-200:#28494B;   --ciano-forte:#8FD0D2;
  --roxo-50:#1C1726;    --roxo-200:#3D3354;    --roxo-forte:#C3B4E6;
  --amarelo-50:#23200B; --amarelo-200:#514819; --amarelo-forte:#E6D27A;
  --lima-50:#1A2210;    --lima-200:#3B4A22;    --lima-forte:#B9D88A;
  --ardosia-50:#1C2127; --ardosia-200:#3D4652; --ardosia-forte:#AEB9C6;
  --rosa-50:#26121C;    --rosa-200:#5A2A42;    --rosa-forte:#E9A6C8;
  --moldura-g:#6E6862; --moldura-b:#5E8FB3; --moldura-c:#48A9AC; --moldura-p:#9481C9;
  --moldura-y:#C9AA34; --moldura-a:#CE8540; --moldura-l:#8BAF48; --moldura-v:#4FA275;
  --moldura-r:#CF6A55; --moldura-k:#75849A; --moldura-m:#C8689A;
  --sh-1:0 1px 2px rgba(0,0,0,.55);
  --sh-2:0 1px 2px rgba(0,0,0,.55),0 10px 26px -14px rgba(0,0,0,.9);
  --sh-3:0 2px 6px rgba(0,0,0,.6),0 24px 54px -18px rgba(0,0,0,.95);
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;
  transition-duration:.01ms!important}}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fs);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand-100)}
h1,h2,h3{margin:0;font-weight:660;letter-spacing:-.022em;line-height:1.22}
h1{font-size:27px} h2{font-size:19px;letter-spacing:-.016em} h3{font-size:15.5px;letter-spacing:-.01em}
p{margin:0}
.num{font-variant-numeric:tabular-nums}

/* ── tipografia auxiliar ────────────────────────────────────────────────── */
.eyebrow{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink-4)}
.lead{color:var(--ink-3);font-size:14.5px;max-width:62ch}
.sm{font-size:13px;color:var(--ink-3)}
.xs{font-size:12px;color:var(--ink-4)}

/* ── barra da simulação ─────────────────────────────────────────────────── */
.sim{position:sticky;top:0;z-index:90;background:#100E0C;color:#E6E0D8;
  display:flex;align-items:center;gap:12px;padding:0 16px;height:44px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;border-bottom:1px solid #262220}
.sim::-webkit-scrollbar{display:none}
.sim .tag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:#8C837A;flex:0 0 auto}
.seg{display:flex;background:#242020;border-radius:9px;padding:3px;gap:2px;flex:0 0 auto}
.seg button{background:none;border:0;color:#B5ACA3;font-size:12.5px;padding:5px 12px;border-radius:6px;
  font-weight:520;transition:var(--t) var(--e);white-space:nowrap}
.seg button:hover{color:#EFE9E1}
.seg button.on{background:#F3EEE7;color:#191512;font-weight:640}
.sim .sp{flex:1 1 auto;min-width:8px}
.sim .note{font-size:12px;color:#8C837A;flex:0 0 auto;white-space:nowrap}
.sim .lnk{background:none;border:0;color:#B5ACA3;font-size:12px;text-decoration:underline;
  text-underline-offset:2px;flex:0 0 auto;padding:4px}
.sim .lnk:hover{color:#fff}

/* ── topo do produto ────────────────────────────────────────────────────── */
.top{background:var(--top-veu);backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
/* `top:0` e não os 44px do protótipo: lá havia uma barra preta de simulação
   acima, que o README de lá diz não fazer parte do produto. */
.top .in{max-width:1280px;margin:0 auto;padding:0 22px;height:58px;display:flex;align-items:center;gap:14px}
/* color e text-decoration explícitos: no protótipo a marca era um <span>; no
   produto ela virou <a href="/projetos"> e saía sublinhada, roxa de visitado. */
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16.5px;
  letter-spacing:-.03em;color:inherit;text-decoration:none}
.mark{width:26px;height:26px;border-radius:8px;background:var(--brand);position:relative;flex:0 0 26px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.14)}
.mark::after{content:"";position:absolute;left:6.5px;top:7.5px;width:11px;height:6.5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg);border-radius:1px}
.top .sp{flex:1}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--sobre-ink);display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:680;letter-spacing:.02em}
.navlink{background:none;border:0;padding:7px 11px;border-radius:8px;font-size:14px;color:var(--ink-2);
  font-weight:520;transition:var(--t) var(--e)}
.navlink:hover{background:var(--surface-2);color:var(--ink)}
.navlink.on{color:var(--ink);font-weight:600;background:var(--surface-2)}
/* o contador da aba Excluídos: ela só existe quando tem algo, e o número diz
   quanto sem precisar entrar */
.navlink .cont{display:inline-block;margin-left:5px;padding:0 6px;border-radius:99px;
  background:var(--surface-3);color:var(--ink-3);font-size:11px;font-weight:700;
  font-family:var(--fm);vertical-align:1px}
/* o nome do projeto ao lado do "← projetos", no topo de toda tela de projeto:
   diz onde se está; nome comprido corta com reticências em vez de empurrar as abas */
.cab-proj{font-size:14px;font-weight:650;color:var(--ink);min-width:0;max-width:34ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.page{max-width:1280px;margin:0 auto;padding:30px 22px 120px}
.page.slim{max-width:860px}
.head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.head .sp{flex:1;min-width:20px}

/* ── botões ─────────────────────────────────────────────────────────────── */
/* `text-decoration:none` explícito porque metade dos botões da casa são <a>, e
   sem esta linha todos vinham sublinhados do navegador. Passava despercebido no
   botão pequeno e discreto; num botão grande e preenchido fica visivelmente
   errado, e foi assim que apareceu. */
.btn{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r1);
  padding:8.5px 15px;font-size:14px;font-weight:540;color:var(--ink);transition:var(--t) var(--e);
  text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;box-shadow:var(--sh-1)}
.btn:hover{border-color:var(--line-3);background:var(--surface-hover);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
/* No claro o texto do botão de marca é branco; no escuro é quase preto. Parece
   troca de gosto e não é: no escuro o hover CLAREIA o laranja, e branco sobre
   laranja claro é o par que some. Tinta escura melhora nos dois estados. */
.btn.p{background:var(--brand);border-color:var(--brand);color:var(--sobre-brand);font-weight:600;
  box-shadow:0 1px 2px rgba(140,64,35,.24),0 8px 20px -10px rgba(140,64,35,.5)}
.btn.p:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:var(--sobre-ok);font-weight:600}
.btn.ok:hover{background:var(--ok-hover);border-color:var(--ok-hover)}
.btn.q{border-color:transparent;background:transparent;box-shadow:none}
.btn.q:hover{background:var(--surface-2);box-shadow:none;transform:none}
.btn.lg{padding:11px 20px;font-size:15px;border-radius:10px}
.btn.sm{padding:5.5px 11px;font-size:13px;border-radius:7px}
.btn.dgr{color:var(--danger);border-color:var(--danger-200)}
.btn.dgr:hover{background:var(--danger-50);border-color:var(--danger)}
.btn:disabled{opacity:.42;pointer-events:none;box-shadow:none}
.btn .kbd{font-size:10.5px;font-family:var(--fm);opacity:.55;border:1px solid currentColor;
  border-radius:4px;padding:0 4px;line-height:15px;margin-left:2px}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* ── cartões e blocos ───────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:var(--sh-1)}
.card.pad{padding:22px 24px}
.card.hov{transition:var(--t) var(--e);cursor:pointer}
.card.hov:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;
  padding:3.5px 10px;border-radius:999px;letter-spacing:.005em;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.pill.g{background:var(--surface-3);color:var(--ink-3)}
.pill.b{background:var(--info-50);color:var(--info)}
.pill.o{background:var(--brand-50);color:var(--brand-700)}
.pill.v{background:var(--ok-50);color:var(--ok)}
.pill.a{background:var(--warn-50);color:var(--warn)}
.pill.r{background:var(--danger-50);color:var(--danger)}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:2.5px 7px;border-radius:5px}
.chip.g{background:var(--surface-3);color:var(--ink-3)}
.chip.b{background:var(--info-50);color:var(--info)}
.chip.o{background:var(--brand-50);color:var(--brand-700)}
.chip.v{background:var(--ok-50);color:var(--ok)}
.chip.a{background:var(--warn-50);color:var(--warn)}

/* ── formulários ────────────────────────────────────────────────────────── */
.fld{margin-bottom:18px}
.fld:last-child{margin-bottom:0}
.fld > label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.inp{width:100%;border:1px solid var(--line-2);border-radius:var(--r1);padding:10px 13px;
  font-size:15px;background:var(--surface);transition:var(--t) var(--e);box-shadow:var(--sh-1)}
.inp::placeholder{color:var(--ink-4)}
.inp:hover{border-color:var(--line-3)}
.inp:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
textarea.inp{resize:vertical;min-height:76px;line-height:1.5}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;user-select:none}
.check input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}

/* ── estado vazio ───────────────────────────────────────────────────────── */
.empty{text-align:center;padding:56px 26px;color:var(--ink-3)}
.empty .ic{width:52px;height:52px;border-radius:16px;background:var(--surface-2);margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;font-size:23px;color:var(--ink-4)}
.empty h2{color:var(--ink);margin-bottom:6px}

/* ── faixa de fase ──────────────────────────────────────────────────────── */
.rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  overflow:hidden;box-shadow:var(--sh-1);margin-top:20px}
.rail .steps{display:flex;border-bottom:1px solid var(--line);background:var(--surface-2)}
.rstep{flex:1;padding:11px 8px 11px 20px;position:relative;font-size:12.5px;color:var(--ink-4);
  font-weight:560;display:flex;align-items:center;gap:8px;min-width:0}
.rstep .dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface);
  flex:0 0 15px;display:flex;align-items:center;justify-content:center;transition:var(--t) var(--e)}
.rstep span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rstep::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:14px;
  background:var(--surface-2);clip-path:polygon(0 0,100% 50%,0 100%);border-left:1px solid var(--line);z-index:2}
.rstep:last-child::after{display:none}
.rstep.done{color:var(--ok)}
.rstep.done .dot{background:var(--ok);border-color:var(--ok)}
.rstep.done .dot::after{content:"";width:5px;height:2.5px;border-left:1.8px solid #fff;
  border-bottom:1.8px solid #fff;transform:rotate(-45deg) translate(.5px,-1px)}
.rstep.on{color:var(--brand-700);font-weight:680;background:var(--brand-50)}
.rstep.on::after{background:var(--brand-50)}
.rstep.on .dot{border-color:var(--brand);background:var(--brand);box-shadow:0 0 0 3.5px var(--brand-100)}
.rail .body{padding:18px 22px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.rail .body .t{flex:1;min-width:250px}
.rail .body h3{margin-bottom:3px}
.rail .acts{display:flex;gap:9px;flex-wrap:wrap}

/* ── números ────────────────────────────────────────────────────────────── */
/* quatro sempre — com seis a última linha sobrava um cartão órfão em largura média */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
@media(max-width:520px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;
  box-shadow:var(--sh-1);transition:var(--t) var(--e);text-align:left}
button.stat{cursor:pointer;font:inherit;display:block;width:100%}
button.stat:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:var(--sh-2)}
.stat.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.stat .n{font-size:24px;font-weight:680;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .l{font-size:11px;color:var(--ink-3);margin-top:3px;font-weight:520}
.stat.v .n{color:var(--ok)} .stat.o .n{color:var(--brand)} .stat.a .n{color:var(--warn)}

/* ── grade de itens ─────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px;margin-top:18px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;
  box-shadow:var(--sh-1);transition:var(--t) var(--e);cursor:pointer;text-align:left;padding:0;
  display:flex;flex-direction:column;font:inherit;color:inherit;position:relative}
.item:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.item .ph{position:relative;aspect-ratio:16/10;background:var(--surface-3);overflow:hidden}
.item .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s var(--e)}
.item:hover .ph img{transform:scale(1.035)}
.item .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 26%,transparent 62%,rgba(0,0,0,.3) 100%)}
.item .cap{position:absolute;top:9px;left:10px;right:10px;display:flex;gap:6px;align-items:center;z-index:2}
.item .cap .sp{flex:1}
.gl{font-size:10px;font-weight:750;letter-spacing:.07em;color:#fff;background:rgba(0,0,0,.42);
  padding:3px 7px;border-radius:5px;backdrop-filter:blur(6px);text-transform:uppercase}
.gl.v{background:rgba(46,115,81,.88)} .gl.o{background:rgba(196,98,60,.9)}
.gl.play{background:rgba(0,0,0,.5);display:flex;align-items:center;gap:4px}
.item .foot{position:absolute;bottom:9px;left:10px;right:10px;display:flex;align-items:center;gap:6px;z-index:2}
.badgeN{min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--brand);color:#fff;
  font-size:11.5px;font-weight:750;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.badgeN.z{background:rgba(255,255,255,.22);backdrop-filter:blur(6px);color:#fff;font-weight:600}
.badgeN.v{background:var(--ok);color:var(--sobre-ok)}
.item .tb{padding:11px 13px 13px;flex:1;display:flex;flex-direction:column;gap:5px}
.item .amb{font-size:9.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.item .tt{font-size:13.5px;font-weight:580;line-height:1.32;letter-spacing:-.006em}
.item .st{margin-top:auto;padding-top:7px;display:flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--ink-3);font-weight:540}
.item .st i{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--line-2)}
.item.aprovado .st{color:var(--ok)} .item.aprovado .st i{background:var(--ok)}
.item.ajustes .st{color:var(--brand-700)} .item.ajustes .st i{background:var(--brand)}
.item.aprovado{border-color:var(--ok-200)}
.item.ajustes{border-color:var(--brand-200)}
.item .edge{position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:transparent}
.item.aprovado .edge{background:var(--ok)} .item.ajustes .edge{background:var(--brand)}

/* Ângulo não escolhido. Recua sem sumir: a escolha é reversível enquanto a
   janela está aberta, e um cartão apagado que ainda abre e ainda responde é
   mais honesto que um cartão ausente. Opacidade e saturação, não `display:none`
   — quem quiser rever o que recusou continua achando no mesmo lugar. */
.item.recusada{opacity:.5}
.item.recusada .ph img{filter:saturate(.25)}
.item.recusada:hover{opacity:1}
.item.recusada:hover .ph img{filter:none}

/* ── cartão de projeto ──────────────────────────────────────────────────── */
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:20px}
/* text-decoration explícito: o protótipo desenhou o cartão como <button>, e a
   lista de projetos o usa como <a> — sem a linha, o cartão inteiro sublinha. */
.proj{padding:0;overflow:hidden;display:flex;flex-direction:column;text-align:left;font:inherit;
  color:inherit;text-decoration:none;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r3);box-shadow:var(--sh-1);cursor:pointer;transition:var(--t) var(--e)}
.proj:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-2)}
/* As colunas seguem QUANTAS imagens existem. Fixo em `2fr 1fr 1fr`, projeto
   com uma ou duas deixava caixas vazias mostrando o fundo — que no tema
   escuro lê como miniatura preta. */
.proj .strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2px;height:104px;background:var(--surface-3)}
.proj .strip.n1{grid-template-columns:1fr}
.proj .strip.n2{grid-template-columns:1fr 1fr}
.proj .strip img{width:100%;height:100%;object-fit:cover;display:block}
.proj .strip div{position:relative;overflow:hidden}
/* Preto puro, e não o preto quente que estava aqui: este véu cobre um render,
   e o cabeçalho deste arquivo diz que tinta no entorno desloca a cor percebida
   da imagem. Vale nos dois temas — a regra é da imagem, não do fundo. */
/* `[data-mais]` no seletor, e não só `content:attr(...)`: sem o atributo o
   `attr()` devolve string vazia, mas o pseudo-elemento NASCE do mesmo jeito —
   e o véu preto pintava por cima da última miniatura de todo cartão, mesmo
   quando não havia "+N" nenhum para mostrar. */
.proj .strip div[data-mais]:last-child::after{content:attr(data-mais);position:absolute;inset:0;
  background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:650;backdrop-filter:blur(2px)}
.proj .bd{padding:15px 17px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.proj .nm{font-size:16px;font-weight:640;letter-spacing:-.015em}
.proj .cl{font-size:12.5px;color:var(--ink-3)}
.proj .mt{margin-top:10px;display:flex;align-items:center;gap:9px}
.bar{flex:1;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;display:flex}
.bar i{display:block;height:100%;transition:.5s var(--e)}
.bar i.v{background:var(--ok)} .bar i.o{background:var(--brand)}
.proj .mt .k{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:560}

/* ── quadro de etapas (item × etapa) ────────────────────────────────────── */
.board{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:var(--sh-1);overflow-x:auto}
.brow{display:grid;grid-template-columns:var(--cols);align-items:center;
  border-bottom:1px solid var(--line);min-width:760px}
.brow:last-child{border-bottom:0}
.brow.head{background:var(--surface-2)}
.brow.foot{background:var(--surface-2)}
.brow:not(.head):not(.foot):hover{background:var(--surface-hover)}
.bh{padding:10px 8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);font-weight:750;text-align:center;display:flex;align-items:center;
  justify-content:center;gap:4px;min-width:0}
.bh.l{justify-content:flex-start;text-align:left;padding-left:14px}
.bh.num{font-variant-numeric:tabular-nums}
/* `background` e `border` explícitos: sem eles o cabeçalho de coluna herdava o
   botão nativo do sistema operacional. No claro isso passava por um cinza
   discreto e ninguém reparou; com `color-scheme:dark` o mesmo botão nativo
   vira uma caixa cinza-médio, e o rótulo em cima dela cai para 1,6 de
   contraste. O `:hover` logo abaixo sempre pintou o próprio fundo — o que
   faltava era o estado parado. */
button.bh{cursor:pointer;border-radius:6px;transition:var(--t) var(--e);
  background:none;border:0}
button.bh:hover{background:var(--surface-3);color:var(--ink-2)}
.bitem{display:flex;align-items:center;gap:10px;padding:9px 12px;min-width:0}
.bitem img{width:52px;height:33px;object-fit:cover;border-radius:6px;flex:0 0 52px;display:block}
/* O lugar da capa quando não há capa — vídeo cujo navegador não conseguiu
   desenhar o quadro. Ocupa o mesmo espaço da miniatura, para a fileira não
   dançar, e mostra o play em vez de um buraco preto. */
.bitem-vazio{width:52px;height:33px;flex:0 0 52px;border-radius:6px;background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;color:var(--ink-4);font-size:12px}
.titem .bitem-vazio{width:38px;height:24px;flex:0 0 38px;border-radius:4px;font-size:10px}
.bitem .t{font-size:13px;font-weight:570;line-height:1.25;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.bitem .s{font-size:11px;color:var(--ink-4);margin-top:1px}
.bcell{display:flex;align-items:center;justify-content:center;padding:6px}
.bstate{width:100%;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;transition:var(--t) var(--e);color:var(--ink-4)}
.bstate:not(:disabled):hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:var(--sh-1)}
.bstate:disabled{cursor:default;opacity:.75}
.bstate .vazio{width:9px;height:9px;border-radius:50%;border:1.5px dashed var(--line-2)}
/* Pulsa TRÊS vezes ao abrir e para — era `infinite`, e com a página parada
   numa tela o navegador redesenhava o quadro ~60 vezes por segundo, para
   sempre (sombra animada não roda na placa de vídeo sozinha: cada quadro é
   pintura nova). Medido em 30/09/2026: 13,9 ms de trabalho por segundo nesta
   tela, contra 0,1 ms em todas as outras — e o Alan ouvia as ventoinhas. A
   cor âmbar continua dizendo "em andamento" depois que o pulso para. */
.bstate .pulsa{width:9px;height:9px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 0 currentColor;animation:pulsa 1.9s var(--e) 3}
@keyframes pulsa{70%{box-shadow:0 0 0 7px rgba(148,104,44,0)}100%{box-shadow:0 0 0 0 rgba(148,104,44,0)}}
@media (prefers-reduced-motion:reduce){.bstate .pulsa{animation:none}}
.bstate.fazendo{background:var(--warn-50);border-color:var(--warn-200);color:var(--warn)}
.bstate.feita{background:var(--ok-50);border-color:var(--ok-200);color:var(--ok)}
.bstate.na{background:var(--surface-2);color:var(--ink-4)}
.bstate.fora{border-style:dashed;border-color:var(--line);background:transparent;
  color:var(--ink-4);opacity:.5;cursor:default;font-size:15px}
.leg{display:inline-block;width:11px;height:11px;border-radius:4px;border:1px solid var(--line-2);
  background:var(--surface);vertical-align:-1px;margin-right:3px}
.leg.feita{background:var(--ok);border-color:var(--ok)}
.leg.fazendo{background:var(--warn);border-color:var(--warn)}
.leg.na{background:var(--surface-3)}
.leg.fora{border-style:dashed;background:transparent}

/* ── editor de etapas ───────────────────────────────────────────────────── */
.etr{display:grid;grid-template-columns:52px 1fr 132px 78px 1fr 38px;gap:10px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line)}
.etr.cab{background:var(--surface-2);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);font-weight:750;padding:9px 14px}
.etr.cab span:nth-child(4),.etr.cab span:nth-child(3){text-align:center}
.etr .ord{display:flex;flex-direction:column;gap:1px;align-items:center}
.etr .ord .btn{line-height:1;min-height:0;color:var(--ink-3)}
@media(max-width:720px){
  .etr{grid-template-columns:44px 1fr 38px;grid-template-areas:"o n x" ". a a" ". p p" ". r r";
    gap:7px;padding:12px 14px}
  .etr.cab{display:none}
  .etr .ord{grid-area:o} .etr [data-act="etapaNome"]{grid-area:n}
  .etr [data-act="etapaAplica"]{grid-area:a} .etr .check{grid-area:p;justify-content:flex-start}
  .etr [data-act="etapaRot"]{grid-area:r} .etr [data-act="etapaRemover"]{grid-area:x}
  .etr .check::after{content:"o cliente vê esta etapa";font-size:13px;color:var(--ink-3)}
}

/* ── abas de rodada (Tarefas) ───────────────────────────────────────────── */
.rod-abas{display:flex;flex-wrap:wrap;gap:6px}
.rod-aba{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px;
  font-weight:600;text-decoration:none;transition:var(--t) var(--e)}
.rod-aba:hover{border-color:var(--line-2);color:var(--ink)}
.rod-aba.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.rod-aba:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rod-n{min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:inline-grid;
  place-items:center;font-size:11px;font-weight:750;background:var(--warn-50);color:var(--warn)}
.rod-tit{font-size:15px;font-weight:720;color:var(--ink);letter-spacing:-.01em}

/* ── tabela agrupada ────────────────────────────────────────────────────── */
.tab{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:var(--sh-1);overflow:hidden}
.tgrupo{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.tcount{font-size:12px;color:var(--ink-4);font-weight:650}
.trow{display:grid;grid-template-columns:30px minmax(250px,2.4fr) 74px minmax(140px,1fr) 148px 136px;
  gap:11px;align-items:center;padding:7px 14px;border-bottom:1px solid var(--line);min-width:940px}
.trow:last-child{border-bottom:0}
.trow.cab{padding:8px 14px;background:var(--surface-fraca);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);font-weight:750}
.trow:not(.cab):hover{background:var(--surface-hover)}
.trow.feito .ttarefa .tx{color:var(--ink-4);text-decoration:line-through;
  text-decoration-color:var(--line-2)}
.trow.nova{background:var(--brand-50)}

/* bolinha de situação: um clique avança pendente → execução → resolvido */
.tstatus{width:19px;height:19px;border-radius:50%;border:2.5px solid var(--line-2);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;transition:var(--t) var(--e);padding:0}
.tstatus:not(:disabled):hover{transform:scale(1.15)}
.tstatus.a{border-color:var(--warn)}
.tstatus.b{border-color:var(--info);background:var(--info);color:var(--sobre-info)}
.tstatus.v{border-color:var(--ok);background:var(--ok);color:var(--sobre-ok)}
.tstatus.g{border-color:var(--ink-4);color:var(--ink-4);font-size:10px}
.ttarefa{min-width:0}
.ttarefa .tx{font-size:13.5px;line-height:1.4;font-weight:520}
.tmeta{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:11px;color:var(--ink-4);
  flex-wrap:wrap}
.tmeta svg{width:12px;height:12px}
.tlink{background:none;border:0;padding:0;font-size:11px;color:var(--brand-700);
  text-decoration:underline;text-underline-offset:2px}
.tlink:hover{color:var(--brand)}
.tedit{padding:2px 0}
.titem{display:flex;align-items:center;gap:6px;background:none;border:0;padding:3px;border-radius:7px;
  font:inherit;color:var(--ink-3);transition:var(--t) var(--e)}
.titem:hover{background:var(--surface-2);color:var(--ink)}
.titem img{width:38px;height:24px;object-fit:cover;border-radius:4px;display:block;flex:0 0 38px}
.titem span{font-size:11px;font-weight:700}
.tadd{display:flex;align-items:center;gap:7px;width:100%;padding:10px 14px;background:none;border:0;
  border-top:1px solid var(--line);font-size:13px;color:var(--ink-4);font-weight:550;
  transition:var(--t) var(--e);text-align:left}
.tadd:hover{background:var(--surface-2);color:var(--brand-700)}
.barrafer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.divisor{width:1px;height:22px;background:var(--line);flex:0 0 1px}
.tab{overflow-x:auto}
.ce{text-align:center}
.tnome{display:flex;align-items:center;gap:9px;min-width:0;background:none;border:0;padding:6px 0;
  font:inherit;color:inherit;text-align:left;border-radius:6px}
.tnome:hover .tt{text-decoration:underline;text-underline-offset:2px}
.tdot{width:11px;height:11px;border-radius:50%;flex:0 0 11px;border:2.5px solid var(--line-2)}
.tdot.v{border-color:var(--ok)} .tdot.o{border-color:var(--brand)} .tdot.g{border-color:var(--ink-4)}
.tnome .tt{font-size:13.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnome .tnum{font-size:10px;font-weight:750;letter-spacing:.05em;color:var(--ink-4);
  background:var(--surface-2);padding:2px 6px;border-radius:4px;flex:0 0 auto}
.tarq{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tsel{width:100%;border:1px solid transparent;background:var(--surface-2);border-radius:7px;
  padding:5px 8px;font-size:12px;font-weight:600;color:var(--ink-2);transition:var(--t) var(--e);
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-4) 50%),
    linear-gradient(135deg,var(--ink-4) 50%,transparent 50%);
  background-position:calc(100% - 13px) 11px,calc(100% - 9px) 11px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;padding-right:24px}
.tsel:hover:not(:disabled){border-color:var(--line-2);background-color:var(--surface)}
.tsel:disabled{opacity:.7}
.tsel.a{background-color:var(--warn-50);color:var(--warn)}
.tsel.v{background-color:var(--ok-50);color:var(--ok)}
.tvazio{color:var(--ink-4);font-size:13px;text-align:center}
.tprog{display:flex;align-items:center;gap:7px}
.tprog .bar{flex:1}
@media(max-width:600px){.tab{border-radius:var(--r2)}}

/* ── cronograma (Gantt só de datas de entrega) ──────────────────────────── */
.gant{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:var(--sh-1);overflow-x:auto}
.gcab,.grow{display:grid;grid-template-columns:326px 1fr;min-width:860px;
  border-bottom:1px solid var(--line)}
@media(max-width:700px){.gcab,.grow{grid-template-columns:220px 1fr;min-width:700px}}
.grow:last-child{border-bottom:0}
.gcab{background:var(--surface-2);position:sticky;top:0;z-index:3}
.grow:hover{background:var(--surface-hover)}
.grow.aberta{background:var(--surface-2)}
.glabel{display:flex;align-items:center;gap:9px;padding:9px 13px;
  border-right:1px solid var(--line);min-width:0}
.gexp{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);flex:0 0 22px;padding:0}
.gexp:hover{border-color:var(--line-2);color:var(--ink)}
.gnome{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsub{font-size:11px;color:var(--ink-4);margin-top:1px}
.gdata{margin-left:auto;flex:0 0 auto;border:1px solid var(--line);background:var(--surface-2);
  border-radius:7px;padding:4px 7px;font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--ink-2);font-family:inherit}
.gdata:hover:not(:disabled){border-color:var(--line-2);background:var(--surface)}
.gdata:disabled{opacity:.65}
.gdata.atras{border-color:var(--danger-200);background:var(--danger-50);color:var(--danger)}

.gtrack{position:relative;height:46px;overflow:hidden}
.gescala{height:42px}
.gcol{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.55}
.gcol.fds{width:0;box-shadow:0 0 0 0 transparent}
.gtrack .gcol.fds::after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px}
.gtique{position:absolute;bottom:5px;transform:translateX(-50%);font-size:10px;color:var(--ink-4);
  font-variant-numeric:tabular-nums}
.gtique.fds b{color:var(--ink-4);opacity:.55}
.gtique b{font-weight:600;color:var(--ink-3)}
.gmes{position:absolute;top:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:750;color:var(--ink-4);transform:translateX(-2px)}
.ghoje{position:absolute;top:0;bottom:0;width:2px;background:var(--brand);opacity:.55;z-index:2}
.ghoje.forte{opacity:1}
.ghoje .rot{position:absolute;top:2px;left:4px;font-size:9.5px;font-weight:750;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brand);white-space:nowrap}

.gbar{position:absolute;top:13px;height:20px;border-radius:6px;display:flex;align-items:center;
  justify-content:flex-end;padding-right:8px;font-size:10.5px;font-weight:700;color:#fff;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);overflow:hidden}
.gbar.cli{background:var(--info)}
.gbar.prod{background:var(--brand)}
.gbar.ok{background:var(--ok)}
.gbar.atras{background:var(--danger)}
.gbar.fut{background:repeating-linear-gradient(135deg,var(--info) 0 6px,#4C7C99 6px 12px);
  opacity:.62;box-shadow:none}
.gbar .grot{position:relative;z-index:2;font-variant-numeric:tabular-nums;opacity:.9}
.gbar .gpct{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.28);z-index:1}
/* arraste: o meio move, a borda estica */
.gbar.arr{cursor:grab;touch-action:none}
.gbar.arr:hover{filter:brightness(1.07)}
.gbar.arr.mexendo{cursor:grabbing;filter:brightness(1.12);
  box-shadow:0 3px 14px rgba(40,28,18,.4)}
/* as bordas só se anunciam quando a barra é larga o bastante para tê-las */
.gbar.arr::before,.gbar.arr::after{content:"";position:absolute;top:5px;bottom:5px;width:2px;
  background:rgba(255,255,255,.7);border-radius:1px;opacity:0;transition:opacity var(--t)}
.gbar.arr::before{left:3.5px} .gbar.arr::after{right:3.5px}
.gbar.arr:hover::before,.gbar.arr:hover::after{opacity:1}
.gbar.arr[style*="width: 1"]::before,.gbar.arr[style*="width: 1"]::after{opacity:0}
.grow.futuro{opacity:.82}
.grow.marco .gbar{display:none}
.gmarco{position:absolute;top:13px;z-index:2}
.gmarco .lo{position:absolute;left:-6px;width:12px;height:12px;top:4px;background:var(--ink);
  transform:rotate(45deg);border-radius:2px;box-shadow:0 0 0 2px var(--surface)}
.gmarco.cli .lo{background:var(--info)} .gmarco.prod .lo{background:var(--brand)}
.gmarco.ok .lo{background:var(--ok)}    .gmarco.atras .lo{background:var(--danger)}
.gmarco .rot{position:absolute;left:10px;top:2px;font-size:11px;font-weight:700;
  color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}

.gdatas{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;margin-left:auto}
.gquando{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:0 0 auto}
.grow.janela .gnome,.grow.futuro .gnome{color:var(--info)}
.grow.marco .gnome{font-weight:700}
.grow.janela,.grow.futuro{background:var(--info-50)}
.grow.janela:hover,.grow.futuro:hover{background:#E2ECF2}

/* ── andamento na página do cliente ─────────────────────────────────────── */
.andar{display:flex;align-items:center;gap:13px;padding:12px 14px;border-bottom:1px solid var(--line)}
.andar:last-child{border-bottom:0}
.andar img{width:66px;height:42px;object-fit:cover;border-radius:7px;flex:0 0 66px;display:block}
.andar .t{font-size:14px;font-weight:570;line-height:1.3}
.andar .s{font-size:12px;color:var(--ink-3);margin-top:2px}
.andar .p{width:120px;flex:0 0 120px}
@media(max-width:620px){.andar .p{display:none}}

/* ── lista de pessoas ───────────────────────────────────────────────────── */
.people{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.person{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r2);padding:10px 14px;box-shadow:var(--sh-1)}
.person .ini{width:30px;height:30px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:680;flex:0 0 30px}
.person.ok .ini{background:var(--ok-50);color:var(--ok)}
.person .nm{font-size:14px;font-weight:570}
.person .em{font-size:12px;color:var(--ink-4)}
.person .sp{flex:1}

/* ── avisos ─────────────────────────────────────────────────────────────── */
.notice{display:flex;gap:11px;border-radius:var(--r2);padding:13px 16px;font-size:13.5px;
  line-height:1.5;border:1px solid;align-items:flex-start}
.notice .ic{flex:0 0 18px;height:18px;margin-top:1px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;border-radius:50%}
.notice b{font-weight:650}
.notice.b{background:var(--info-50);border-color:var(--info-200);color:var(--info-forte)}
.notice.b .ic{background:var(--info);color:var(--sobre-info)}
.notice.a{background:var(--warn-50);border-color:var(--warn-200);color:var(--warn-forte)}
.notice.a .ic{background:var(--warn);color:var(--sobre-warn)}
.notice.v{background:var(--ok-50);border-color:var(--ok-200);color:var(--ok-forte)}
.notice.v .ic{background:var(--ok);color:var(--sobre-ok)}
.notice.g{background:var(--surface-2);border-color:var(--line);color:var(--ink-3)}
.notice.g .ic{background:var(--ink-4);color:var(--sobre-ink)}

/* ── área de soltar ─────────────────────────────────────────────────────── */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r4);background:
  linear-gradient(var(--surface),var(--surface));padding:52px 26px;text-align:center;
  transition:var(--t) var(--e);cursor:pointer;margin-top:20px}
.drop:hover,.drop.hot{border-color:var(--brand);background:var(--brand-50)}
.drop .ic{width:56px;height:56px;border-radius:18px;background:var(--surface-2);margin:0 auto 15px;
  display:flex;align-items:center;justify-content:center;transition:var(--t) var(--e)}
.drop:hover .ic{background:var(--surface);transform:translateY(-2px)}
.drop .ic svg{width:24px;height:24px;stroke:var(--ink-3);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.drop:hover .ic svg{stroke:var(--brand)}
.drop h3{font-size:17px;margin-bottom:5px}

/* ── barra de ação fixa ─────────────────────────────────────────────────── */
.dock{position:sticky;bottom:18px;margin-top:26px;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(14px);border:1px solid var(--line-2);border-radius:var(--r3);
  padding:13px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;box-shadow:var(--sh-3);z-index:30}
.dock .sp{flex:1;min-width:8px}
.dock .t{font-size:14px;font-weight:600}
.dock .s{font-size:12.5px;color:var(--ink-3)}

/* ── link do cliente ────────────────────────────────────────────────────── */
.linkbox{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px}
.linkrow{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.linkrow .inp{flex:1;min-width:220px;font-family:var(--fm);font-size:13px;background:#fff}

/* ── tabela ─────────────────────────────────────────────────────────────── */
/* conteúdo largo rola dentro do próprio bloco; a página nunca rola de lado */
.rolar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rolar table.t{min-width:480px}
@media print{.rolar{overflow:visible}.rolar table.t{min-width:0}}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{text-align:left;padding:9px 12px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);font-weight:750;border-bottom:1px solid var(--line);background:var(--surface-2)}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t td.n{text-align:right;font-variant-numeric:tabular-nums}

/* ═══════════════════════════ VISUALIZADOR ═════════════════════════════════ */
#viewer{position:fixed;inset:0;z-index:100;background:var(--v-0);color:var(--v-ink);
  display:none;flex-direction:column;font-size:14px}
#viewer.open{display:flex}
#viewer .vtop{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--v-1);
  border-bottom:1px solid var(--v-line);flex:0 0 auto;min-height:52px}
#viewer .vtop .sp{flex:1;min-width:6px}
.vtitle{min-width:0}
.vtitle .a{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.vtitle .b{font-size:11.5px;color:var(--v-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
.vb{background:var(--v-3);border:1px solid transparent;color:var(--v-ink);border-radius:8px;
  padding:7px 12px;font-size:13px;font-weight:520;transition:var(--t) var(--e);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vb:hover{background:var(--v-4)}
.vb.on{background:var(--v-ink);color:var(--v-0);font-weight:640}
.vb.ic{padding:7px 9px}
.vb:disabled{opacity:.32;pointer-events:none}
/* o modo original do visualizador: carregando, o botão só informa (não apaga
   como os desligados); ligado, o tique diz o que se está vendo */
.vb[hidden]{display:none}
.vb.vb-original:disabled{opacity:.85}
.vb.vb-original{font-variant-numeric:tabular-nums}
.vb.ok{background:var(--ok);color:#fff;font-weight:620}
.vb.ok:hover{background:#35855E}
.vb.br{background:var(--brand);color:#fff;font-weight:620}
.vb.br:hover{background:var(--brand-600)}
.vgroup{display:flex;background:var(--v-2);border-radius:9px;padding:3px;gap:2px;flex:0 0 auto}
.vgroup .vb{background:none;padding:6px 10px;font-size:12.5px}
.vgroup .vb:hover{background:var(--v-3)}
.vgroup .vb.on{background:var(--v-ink);color:var(--v-0)}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
svg.i.sm{width:14px;height:14px}

.vbody{flex:1;display:grid;grid-template-columns:1fr 348px;min-height:0}
.vbody.solo{grid-template-columns:1fr}
@media(max-width:900px){.vbody{grid-template-columns:1fr;grid-template-rows:1fr auto}}

.stage{position:relative;overflow:hidden;min-height:0;min-width:0;flex:1 1 0;background:var(--v-0);
  touch-action:none;display:flex;align-items:center;justify-content:center}
.stage.fundo-preto{background:#000} .stage.fundo-grafite{background:#181818}
.stage.fundo-medio{background:#6E6E6E} .stage.fundo-claro{background:#C8C8C8}
.stage.mover{cursor:grab} .stage.mover.arrastando{cursor:grabbing}
.stage.marcar{cursor:crosshair}
#canvas{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#canvas img,#canvasTop img{position:absolute;display:block;image-rendering:auto;
  top:0;left:0;backface-visibility:hidden}
/* camada de fundo em baixa: fica sob os tiles e some o buraco preto enquanto o
   nível novo carrega. Nunca é removida. */
#canvas img.base,#canvasTop img.base{z-index:0;filter:blur(.5px)}
#canvas img:not(.base),#canvasTop img:not(.base){z-index:1}
.marks{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none}
.marks > *{pointer-events:auto}

/* marcações */
.pin{position:absolute;width:26px;height:26px;margin:-26px 0 0 -13px;border-radius:50% 50% 50% 2px;
  background:var(--brand);border:2px solid #fff;transform:rotate(-45deg);
  box-shadow:0 3px 10px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--t) var(--e);animation:drop .26s var(--e)}
@keyframes drop{from{transform:rotate(-45deg) translate(0,-14px);opacity:0}}
.pin b{transform:rotate(45deg);color:#fff;font-size:11.5px;font-weight:750;line-height:1}
.pin:hover{transform:rotate(-45deg) scale(1.12)}
.pin.res{background:var(--ok)} .pin.herd{background:var(--info)}
.pin.sel{box-shadow:0 0 0 3px rgba(255,255,255,.95),0 3px 12px rgba(0,0,0,.6);z-index:5}
.pin.novo{background:var(--info)}
/* Marcação precisa sobreviver a qualquer imagem. Render de archviz é cheio de
   terracota e madeira — laranja sobre laranja some. Toda marca leva uma casca
   branca por fora e um contorno escuro depois dela, que é o que garante
   contraste independentemente do que estiver embaixo. */
.area{position:absolute;border:2px solid var(--brand);border-radius:3px;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 2.5px rgba(0,0,0,.45),
             inset 0 0 0 1px rgba(255,255,255,.55)}
.area.res{border-color:var(--ok)}
.area.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,0,0,.5),0 0 24px rgba(0,0,0,.55)}
.area .n{position:absolute;top:-11px;left:-2px;background:var(--brand);color:#fff;font-size:11px;
  font-weight:750;padding:1px 6px;border-radius:4px;box-shadow:0 0 0 1.5px rgba(0,0,0,.4)}
.area.res .n{background:var(--ok)}
.seta{position:absolute;overflow:visible;pointer-events:none}
.seta path{fill:none;stroke-linecap:round;pointer-events:stroke;cursor:pointer}
.seta path.cs{stroke:#fff;stroke-width:6.5;opacity:.92}      /* casca */
.seta path.ln{stroke:var(--brand);stroke-width:3}
.seta.res path.ln{stroke:var(--ok)}
.seta.sel path.cs{stroke-width:8} .seta.sel path.ln{stroke-width:4}
.seta .hd{fill:var(--brand);stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.seta.res .hd{fill:var(--ok)}

/* composer ancorado */
.composer{position:absolute;width:296px;background:var(--v-2);border:1px solid var(--v-line);
  border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.65);z-index:20;overflow:hidden;
  animation:pop .16s var(--e)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}}
.composer .hd{padding:9px 12px;border-bottom:1px solid var(--v-line);font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--v-ink-3);font-weight:700;
  display:flex;align-items:center;gap:6px}
.composer textarea{width:100%;background:none;border:0;padding:11px 12px;font-size:13.5px;
  resize:none;min-height:74px;line-height:1.45;color:var(--v-ink)}
.composer textarea:focus{outline:0}
.composer textarea::placeholder{color:var(--v-ink-3)}
.composer .ft{display:flex;align-items:center;gap:7px;padding:8px 10px;border-top:1px solid var(--v-line);
  background:var(--v-1)}
.composer .ft .sp{flex:1}

/* trilho lateral */
.rail-r{background:var(--v-1);border-left:1px solid var(--v-line);display:flex;flex-direction:column;
  min-height:0}
@media(max-width:900px){.rail-r{border-left:0;border-top:1px solid var(--v-line);max-height:46vh}}
.rail-r .hd{padding:11px 14px;border-bottom:1px solid var(--v-line);display:flex;align-items:center;gap:8px}
.rail-r .hd .ti{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--v-ink-3)}
.rail-r .hd .sp{flex:1}
.rail-r .list{flex:1;overflow-y:auto;padding:10px 12px 16px;scrollbar-width:thin}
.rail-r .list::-webkit-scrollbar{width:9px}
.rail-r .list::-webkit-scrollbar-thumb{background:var(--v-4);border-radius:5px;
  border:2px solid var(--v-1)}
.cmt{background:var(--v-2);border:1px solid transparent;border-radius:11px;padding:11px 12px;
  margin-bottom:8px;cursor:pointer;transition:var(--t) var(--e)}
.cmt:hover{background:var(--v-3)}
.cmt.sel{border-color:var(--brand);background:var(--v-3);box-shadow:0 0 0 1px var(--brand)}
.cmt.res{opacity:.62}
.cmt .h{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.cmt .nb{width:19px;height:19px;border-radius:50%;background:var(--brand);color:#fff;font-size:10.5px;
  font-weight:750;display:flex;align-items:center;justify-content:center;flex:0 0 19px}
.cmt .nb.res{background:var(--ok)} .cmt .nb.sem{background:var(--v-4);color:var(--v-ink-2)}
.cmt .nb.herd{background:var(--info)}
.cmt .au{font-size:12.5px;font-weight:620}
.cmt .tx{font-size:13.5px;line-height:1.45;color:var(--v-ink)}
.cmt .tc{font-family:var(--fm);font-size:11px;color:var(--brand-200);background:rgba(196,98,60,.16);
  padding:1px 5px;border-radius:4px;font-weight:600}
.vchip{font-size:9.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;
  border-radius:4px;background:var(--v-4);color:var(--v-ink-2)}
.vchip.o{background:rgba(196,98,60,.2);color:#E5A382}
.vchip.v{background:rgba(46,115,81,.24);color:#7EC5A0}
.vchip.a{background:rgba(148,104,44,.24);color:#DCB579}
.vchip.b{background:rgba(58,106,136,.26);color:#8FBBD6}
.cmt .anexo{margin-top:8px;border-radius:7px;overflow:hidden;border:1px solid var(--v-line);
  display:block;width:100%;padding:0;background:var(--v-1);transition:var(--t) var(--e);
  text-align:left;font:inherit;color:inherit}
.cmt .anexo:hover{border-color:var(--v-ink-3)}
.cmt .anexo img{width:100%;display:block;max-height:120px;object-fit:cover}
.cmt .anexo .cap{padding:5px 8px;font-size:10.5px;color:var(--v-ink-3);display:flex;
  align-items:center;gap:5px}

/* anexo em preparo, dentro do composer */
.composer.solta{outline:2px dashed var(--brand);outline-offset:-4px}
#anexoPrev .prev{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-top:1px solid var(--v-line);background:var(--v-1)}
#anexoPrev .prev img{width:44px;height:32px;object-fit:cover;border-radius:5px;flex:0 0 44px;
  display:block}
#anexoPrev .prev .nm{flex:1;min-width:0;font-size:11.5px;color:var(--v-ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread{margin-top:9px;border-top:1px solid var(--v-line);padding-top:8px;display:flex;
  flex-direction:column;gap:7px}
.reply{font-size:12.5px;line-height:1.45;color:var(--v-ink-2)}
.reply b{color:var(--v-ink);font-weight:620}
.reply.eq{border-left:2px solid var(--info);padding-left:8px}
.reply.cl{border-left:2px solid var(--brand);padding-left:8px}
.cmt .edtx{width:100%;background:var(--v-1);border:1px solid var(--brand);border-radius:8px;
  padding:8px 10px;font-size:13.5px;line-height:1.45;color:var(--v-ink);resize:vertical}
.cmt .edtx:focus{outline:0;box-shadow:0 0 0 2px rgba(196,98,60,.3)}
.vlink{background:none;border:0;padding:2px 0;margin-top:5px;font-size:11.5px;
  color:var(--v-ink-3);text-decoration:underline;text-underline-offset:2px}
.vlink:hover{color:var(--v-ink)}
.cmt .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.cmt select,.cmt input.ri{background:var(--v-1);border:1px solid var(--v-line);color:var(--v-ink);
  border-radius:7px;padding:5px 8px;font-size:12px}
.cmt input.ri{flex:1;min-width:120px}
.rail-r .ft{border-top:1px solid var(--v-line);padding:12px 14px;background:var(--v-2);flex:0 0 auto}
.vempty{text-align:center;padding:38px 16px;color:var(--v-ink-3);font-size:13px}
.vempty .ic{width:44px;height:44px;border-radius:14px;background:var(--v-2);margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center}

/* HUD */
.hud{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;z-index:8;flex-wrap:wrap;max-width:calc(100% - 24px)}
.hud .h{background:rgba(0,0,0,.62);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.09);
  color:var(--v-ink-2);font-size:11px;padding:4.5px 9px;border-radius:7px;font-variant-numeric:tabular-nums}
.hud .h b{color:var(--v-ink);font-weight:640}
.hud .h.hi b{color:#7EC5A0}
.zoomctl{position:absolute;right:12px;bottom:12px;display:flex;gap:5px;z-index:8;align-items:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.09);
  border-radius:9px;padding:4px}
.zoomctl button{background:none;border:0;color:var(--v-ink-2);width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:15px;transition:var(--t) var(--e)}
.zoomctl button:hover{background:rgba(255,255,255,.1);color:#fff}
.zoomctl .z{font-size:11.5px;min-width:44px;text-align:center;font-variant-numeric:tabular-nums;
  color:var(--v-ink)}

/* cortina de comparação */
.curtain{position:relative;user-select:none;max-width:100%;max-height:100%}
.curtain img{display:block;max-width:100%;max-height:78vh;object-fit:contain}
.curtain .over{position:absolute;inset:0;overflow:hidden}
.curtain .over img{width:100%;height:100%;object-fit:contain}
.chandle{position:absolute;top:0;bottom:0;width:2px;background:#fff;cursor:ew-resize;
  box-shadow:0 0 12px rgba(0,0,0,.7)}
.chandle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.chandle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:13px;height:9px;background:var(--v-0);
  clip-path:polygon(0 50%,32% 0,32% 32%,68% 32%,68% 0,100% 50%,68% 100%,68% 68%,32% 68%,32% 100%)}
.vlabel{position:absolute;top:10px;font-size:10px;font-weight:750;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:6px;color:#fff;backdrop-filter:blur(6px)}
.vlabel.l{left:10px;background:rgba(0,0,0,.6)}
.vlabel.r{right:10px;background:rgba(46,115,81,.9)}

/* lado a lado com referência */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;height:100%;padding:14px;
  align-items:center}
@media(max-width:700px){.duo{grid-template-columns:1fr}}
.duo figure{margin:0;position:relative;display:flex;align-items:center;justify-content:center;height:100%}
.duo img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:3px}

/* filmstrip */
.strip{flex:0 0 auto;background:var(--v-1);border-top:1px solid var(--v-line);padding:9px 10px;
  display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;align-items:center}
.strip::-webkit-scrollbar{height:7px}
.strip::-webkit-scrollbar-thumb{background:var(--v-4);border-radius:4px}
.sth{flex:0 0 auto;width:80px;height:50px;border-radius:6px;overflow:hidden;border:2px solid transparent;
  position:relative;transition:var(--t) var(--e);padding:0;background:var(--v-2)}
.sth img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55;transition:var(--t) var(--e)}
.sth:hover img{opacity:.85}
.sth.on{border-color:var(--v-ink)}
.sth.on img{opacity:1}
.sth .k{position:absolute;left:3px;top:3px;font-size:9px;font-weight:750;color:#fff;
  background:rgba(0,0,0,.55);padding:1px 4px;border-radius:3px}
.sth .d{position:absolute;right:3px;bottom:3px;width:7px;height:7px;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.5)}
.sth .d.v{background:#4FBB86} .sth .d.o{background:#E07B4F} .sth .d.n{background:#6B6B6B}

/* player de vídeo */
.player{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.player .frame{position:relative;max-width:100%;max-height:100%;overflow:hidden;background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.player .frame img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:center;
  will-change:transform}
.vcontrols{flex:0 0 auto;background:var(--v-1);border-top:1px solid var(--v-line);padding:10px 14px 12px}
.timeline{position:relative;height:26px;display:flex;align-items:center;cursor:pointer;margin-bottom:6px}
.timeline .track{position:absolute;left:0;right:0;height:5px;background:var(--v-3);border-radius:3px}
.timeline .fill{position:absolute;left:0;height:5px;background:var(--brand);border-radius:3px}
.timeline .knob{position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.6);transform:translateX(-50%);pointer-events:none}
.tmark{position:absolute;width:3px;height:15px;border-radius:2px;background:var(--v-ink);
  transform:translateX(-50%);cursor:pointer;transition:var(--t) var(--e);top:5.5px}
.tmark:hover,.tmark.sel{background:#fff;height:21px;top:2.5px}
.tmark.res{background:#4FBB86}
.vcrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vcrow .tc{font-family:var(--fm);font-size:12px;color:var(--v-ink-2);font-variant-numeric:tabular-nums}
.vcrow .sp{flex:1}
.playbtn{width:34px;height:34px;border-radius:50%;background:var(--v-ink);color:var(--v-0);border:0;
  display:flex;align-items:center;justify-content:center;transition:var(--t) var(--e)}
.playbtn:hover{transform:scale(1.06)}
.playbtn svg{width:15px;height:15px;fill:currentColor;stroke:none}

/* ── página do cliente ──────────────────────────────────────────────────── */
.cli-top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:44px;z-index:60}
.cli-top .in{max-width:1280px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap}
.cli-logo{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:750;font-size:14px;letter-spacing:-.02em;flex:0 0 38px}
.cli-top .sp{flex:1}
.prog{display:flex;align-items:center;gap:10px}
.prog .bar{width:130px}
.hero{background:linear-gradient(180deg,var(--surface) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line)}
.hero .in{max-width:1280px;margin:0 auto;padding:26px 22px 24px}
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px;margin-top:16px}
.whocard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r2);padding:15px 17px;
  text-align:left;transition:var(--t) var(--e);box-shadow:var(--sh-1);font:inherit;color:inherit}
.whocard:hover{border-color:var(--brand);background:var(--brand-50);transform:translateY(-2px);
  box-shadow:var(--sh-2)}
.whocard .n{font-size:15px;font-weight:620}
.whocard .p{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ── a página do processo: a "LP" do cliente ────────────────────────────────
   O desenho veio da landing page que o estúdio manda por WhatsApp, e portá-lo
   para cá não custou paleta nova: aquela página nasceu destes mesmos tokens.
   Papel, tinta e terracota são os mesmos — o que muda aqui é o RITMO, mais
   largo e mais aberto que o do resto do sistema, porque esta é a única tela
   que a pessoa lê de ponta a ponta antes de assinar qualquer coisa.

   O canvas de origem usava 371 atributos `style` embutidos. A política de
   conteúdo bloqueia todos eles, em silêncio — então tudo virou classe, com
   prefixo `lp-` para não esbarrar em nada que já existe.

   A serifa é de sistema, sem fonte remota: `style-src` próprio recusaria a
   folha do Google Fonts e o título cairia para a sans sem avisar ninguém.
   Georgia está em Windows, Mac e Android; iOS cai em Times, que serve. */
.lp{max-width:1080px;margin:0 auto;padding:0 28px 96px}
.lp-serif{font-family:Georgia,"Times New Roman",Times,serif;font-weight:400;
  letter-spacing:-.018em;line-height:1.08;color:var(--ink)}
.lp h1.lp-serif{font-size:clamp(34px,5.4vw,60px);margin:18px 0 0;text-wrap:pretty}
.lp h2.lp-serif{font-size:clamp(26px,3.6vw,40px);margin:12px 0 0;text-wrap:pretty}
/* `:where()` zera a especificidade destas duas: sem isso `.lp h3` (0,1,1) vence
   `.mt32` (0,1,0), e o título encosta no bloco de cima sem nada avisar. Foi o
   que aconteceu — só apareceu quando a página foi vista renderizada. */
:where(.lp) :where(h3){font-size:17px;margin:0 0 6px;color:var(--ink)}
.lp-olho{font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4)}
.lp-lead{margin:24px 0 0;font-size:17.5px;line-height:1.6;color:var(--ink-2);
  max-width:52ch;text-wrap:pretty}
:where(.lp) :where(p){margin:14px 0 0;font-size:15.5px;line-height:1.65;
  color:var(--ink-2);max-width:64ch;text-wrap:pretty}
.lp-secao{padding:56px 0 0}
.fio{border:0;border-top:1px solid var(--line);margin:56px 0 0}

/* a marca, no topo — o estúdio de um lado, a plataforma do outro */
.lp-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:26px 0 0;font-size:13px;color:var(--ink-3)}
.lp-topo .sp{flex:1}
.lp-marca{display:inline-flex;align-items:center;gap:9px;font-weight:640;
  color:var(--ink);letter-spacing:-.01em}
.lp-marca svg{display:block}

/* herói: texto à esquerda, exemplo à direita. Empilha cedo, porque a foto só
   ensina alguma coisa quando é grande o bastante para se ler o balão. */
.lp-heroi{display:grid;grid-template-columns:5fr 7fr;gap:44px;
  align-items:center;padding:64px 0 8px}
.lp-selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.lp-selo{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  font-weight:560;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.lp-selo svg{flex:0 0 13px}

/* a foto de exemplo, com os dois apontamentos desenhados por cima */
.lp-foto{position:relative;border-radius:var(--r3);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--surface-2)}
.lp-foto img{display:block;width:100%;height:auto}
.lp-pin{position:absolute;width:26px;height:26px;border-radius:50%;
  background:var(--brand);color:var(--sobre-brand);border:2px solid var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;box-shadow:var(--sh-2)}
.lp-pin-a{left:78.5%;top:30%;margin:-13px 0 0 -13px}
.lp-pin-b{left:31%;top:71%;margin:-13px 0 0 -13px}
/* o certinho é verde em toda a página: dentro do selo claro e dentro do bloco
   escuro, onde `currentColor` do texto seria cinza */
.lp-selo svg,.lp-check{color:var(--ok)}
.lp-check{display:inline-flex}
.lp-cartao .selo .chip{box-shadow:var(--sh-1)}

/* ── quem escolheu qual, na aba Itens ─────────────────────────────────────────
   O selo no cartão sai do caixa-alta das pastilhas: é um nome de pessoa, e
   "ESCOLHIDA POR MARINA COSTA" grita numa grade de dezesseis cartões.
   A linha de "nenhuma escolha" é --ink-2 e não --ink-3: medido na aba Lista,
   --ink-3 sobre o papel dá 4,33:1, abaixo do 4,5 que texto deste tamanho pede. */
.fig-ph .escolhida-por{position:absolute;left:9px;bottom:9px;max-width:calc(100% - 18px);
  text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:650;box-shadow:var(--sh-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.escolha-nada{color:var(--ink-2)}
.lp-notas{display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:12px;background:var(--surface-2);border-top:1px solid var(--line)}
.lp-nota{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r2);padding:9px 11px}
.lp-nota .q{display:flex;align-items:center;gap:7px;font-size:12px;
  font-weight:640;color:var(--ink)}
.lp-nota .q i{width:16px;height:16px;border-radius:50%;background:var(--brand);
  color:var(--sobre-brand);font-style:normal;font-size:9.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:0 0 16px}
.lp-nota .q .h{margin-left:auto;font-weight:400;color:var(--ink-4);font-size:11px}
.lp-nota p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* a faixa das sete etapas: quem faz o quê, na ordem, de uma olhada */
/* `minmax(104px,1fr)` e nao `minmax(0,1fr)`: com zero de minimo as colunas
   encolhem abaixo do proprio conteudo e as palavras se atropelam — "VOCÊ
   ENVIANÓS" — em vez de a faixa rolar. Com o minimo declarado, a grade fica
   maior que a caixa e o `overflow-x` finalmente tem o que rolar. */
.lp-tempo{display:grid;grid-template-columns:repeat(7,minmax(104px,1fr));
  gap:0;margin-top:26px;overflow-x:auto;padding-bottom:4px}
.lp-etapa{padding:0 14px 0 0}
.lp-etapa .barra{height:3px;border-radius:2px;background:var(--line-2);
  margin-bottom:10px}
.lp-etapa.sua .barra{background:var(--brand)}
.lp-etapa.fim .barra{background:var(--ok)}
.lp-etapa .quem{font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4)}
.lp-etapa.sua .quem{color:var(--brand-700)}
.lp-etapa.fim .quem{color:var(--ok-forte)}
.lp-etapa .nome{font-size:14.5px;font-weight:620;color:var(--ink);margin-top:5px}
.lp-etapa .oque{font-size:12.5px;line-height:1.5;color:var(--ink-3);margin-top:5px}

/* o bloco escuro do "o que está incluso".
   Cores fixas, do jeito do visualizador: este bloco é escuro nos DOIS temas,
   porque o contraste com o papel é o que o faz ser lido. Usa a família `--v-*`,
   que já é neutra e já não segue o tema. */
.lp-escuro{background:var(--v-1);border-radius:var(--r4);padding:36px 34px;
  margin-top:26px;color:var(--v-ink)}
.lp-escuro .lp-olho{color:var(--v-ink-3)}
.lp-escuro h2.lp-serif{color:var(--v-ink)}
.lp-escuro p{color:var(--v-ink-2);max-width:70ch}
.lp-nota p,.lp-recurso p,.lp-faq-linha p{margin-top:0}
.lp-item{display:flex;gap:12px;margin-top:20px;align-items:flex-start}
.lp-item svg{flex:0 0 19px;margin-top:2px}
.lp-item .t{font-size:14.5px;font-weight:640;color:var(--v-ink)}
.lp-item .d{font-size:13px;line-height:1.55;color:var(--v-ink-2);
  margin-top:3px;max-width:70ch}

/* o número grande da janela */
.lp-numero{display:flex;align-items:baseline;gap:14px;margin-top:22px}
.lp-numero .n{font-family:Georgia,"Times New Roman",Times,serif;
  font-size:52px;line-height:1;color:var(--brand)}
.lp-numero .l{font-size:14px;color:var(--ink-2);max-width:38ch}

/* os cartões de exemplo, com a pastilha de estado que o cliente vê de verdade */
.lp-cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-top:22px}
.lp-cartao{border:1px solid var(--line);border-radius:var(--r3);
  overflow:hidden;background:var(--surface)}
.lp-cartao img{display:block;width:100%;height:132px;object-fit:cover}
.lp-cartao .cp{padding:11px 13px}
.lp-cartao .cod{font-family:var(--fm);font-size:11.5px;color:var(--ink-3)}
.lp-cartao .tit{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:2px}
.lp-cartao .selo{position:relative;top:-30px;left:11px;height:0}
.lp-cartao .selo span{display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--surface);
  box-shadow:var(--sh-1)}

/* as capacidades, em grade */
.lp-recursos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin-top:22px}
.lp-recurso{border:1px solid var(--line);border-radius:var(--r3);
  padding:18px 18px 20px;background:var(--surface)}
.lp-recurso .ic{width:30px;height:30px;border-radius:9px;
  background:var(--brand-50);color:var(--brand-700);
  display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.lp-recurso .t{font-size:14.5px;font-weight:640;color:var(--ink)}
.lp-recurso p{margin:5px 0 0;font-size:13px;line-height:1.55}

/* as dúvidas: pergunta à esquerda, resposta à direita */
.lp-faq{margin-top:20px;border-top:1px solid var(--line)}
.lp-faq-linha{display:grid;grid-template-columns:1fr 1.6fr;gap:28px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.lp-faq-linha .p{font-size:14.5px;font-weight:620;color:var(--ink)}
.lp-faq-linha p{margin:0;font-size:14px}

/* o fim da página: a passagem para o acordo.
   Grande de propósito. É o único ponto de saída da leitura, e não pode competir
   com nada — quem chegou até aqui já leu o que ia ler. */
.lp-fim{margin-top:56px;border:1px solid var(--brand-200);
  border-radius:var(--r4);background:var(--brand-50);padding:38px 34px}
.lp-fim h2.lp-serif{color:var(--brand-700)}
.lp-fim p{color:var(--ink-2);max-width:58ch}
.lp-fim .btn{margin-top:24px}
.btn.xl{font-size:16px;padding:15px 30px;border-radius:var(--r2);min-height:52px}

/* já concordou: a mesma página, com o recibo no lugar do convite */
.lp-fim.feito{border-color:var(--ok-200);background:var(--ok-50)}
.lp-fim.feito h2.lp-serif{color:var(--ok-forte)}

@media(max-width:900px){
  .lp{padding:0 18px 72px}
  .lp-heroi{grid-template-columns:1fr;gap:28px;padding:40px 0 0}
  .lp-cartoes,.lp-recursos{grid-template-columns:1fr 1fr}
  .lp-faq-linha{grid-template-columns:1fr;gap:6px}
  .lp-escuro,.lp-fim{padding:28px 22px}
  .lp-secao{padding:44px 0 0}
  .fio{margin-top:44px}
}
@media(max-width:620px){
  .lp-cartoes,.lp-recursos{grid-template-columns:1fr}
  .lp-notas{grid-template-columns:1fr}
  .lp-numero .n{font-size:42px}
  /* a faixa vira lista: rolagem lateral no celular é rolagem que a pessoa não
     descobre que existe, e sete etapas empilhadas leem melhor no polegar */
  .lp-tempo{grid-template-columns:1fr;overflow-x:visible;gap:14px}
  .lp-etapa{padding:0 0 0 13px;border-left:3px solid var(--line-2)}
  .lp-etapa.sua{border-left-color:var(--brand)}
  .lp-etapa.fim{border-left-color:var(--ok)}
  .lp-etapa .barra{display:none}
  .lp-etapa .nome{display:inline;margin-right:7px}
  .lp-etapa .oque{display:inline}
}

/* ── relatório ──────────────────────────────────────────────────────────── */
.rep{background:#fff;border:1px solid var(--line);border-radius:var(--r3);padding:36px 40px;
  box-shadow:var(--sh-2);margin-top:20px}
@media(max-width:640px){.rep{padding:24px 20px}}
.rep .rh{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
  border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:22px;flex-wrap:wrap}
.rep h2{margin:26px 0 10px}
.rep .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.rep .kv div .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  font-weight:750}
.rep .kv div .v{font-size:15px;font-weight:600;margin-top:2px}
.tl{border-left:2px solid var(--line);padding-left:18px;margin-top:12px;display:flex;
  flex-direction:column;gap:14px}
.tl .ev{position:relative;font-size:13.5px}
.tl .ev::before{content:"";position:absolute;left:-24px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-2)}
.tl .ev.k::before{background:var(--brand);border-color:var(--brand)}
.tl .ev .w{font-family:var(--fm);font-size:11.5px;color:var(--ink-4)}
@media print{
  .sim,.top,.dock,.noprint{display:none!important}
  body{background:#fff}.page{padding:0}.rep{border:0;box-shadow:none;padding:0}
}

/* ── telas de conta ─────────────────────────────────────────────────────── */
.autpg{min-height:calc(100vh - 44px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:38px 18px 60px;
  background:radial-gradient(1100px 460px at 50% -8%,#fff 0%,var(--paper) 62%)}
.autcard{width:100%;max-width:414px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r4);padding:30px 30px 32px;box-shadow:var(--sh-3)}
.autfoot{margin-top:18px;text-align:center;max-width:44ch}
.forca{height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.forca i{display:block;height:100%;width:0;background:var(--line-2);transition:.25s var(--e)}
.forca i.r{background:var(--danger)} .forca i.a{background:var(--warn)} .forca i.v{background:var(--ok)}
button.avatar{border:0;padding:0;font:inherit;letter-spacing:.02em}
button.avatar:hover{transform:scale(1.05)}
.menuconta{position:absolute;right:0;top:38px;width:238px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r2);box-shadow:var(--sh-3);z-index:70;
  padding:6px;animation:pop .14s var(--e)}
.menuconta .cab{padding:11px 11px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menuconta .cab .nm{font-size:14px;font-weight:640}
.menuconta .cab .em{font-size:12px;color:var(--ink-4);word-break:break-all}
.menuconta button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  padding:8px 11px;border-radius:8px;font-size:13.5px;color:var(--ink-2);text-align:left;
  transition:var(--t) var(--e)}
.menuconta button:hover{background:var(--surface-2);color:var(--ink)}
.menuconta .sep{height:1px;background:var(--line);margin:6px 0}

/* ── modelos de e-mail ──────────────────────────────────────────────────── */
.mailgrid{display:grid;grid-template-columns:288px 1fr;gap:18px;align-items:start}
@media(max-width:860px){.mailgrid{grid-template-columns:1fr}}
.maillist{display:flex;flex-direction:column;gap:6px}
.mailitem{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  padding:11px 13px;text-align:left;font:inherit;color:inherit;transition:var(--t) var(--e);
  box-shadow:var(--sh-1)}
.mailitem:hover{border-color:var(--line-2);transform:translateY(-1px)}
.mailitem.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand)}
.mailitem .nm{font-size:13.5px;font-weight:620}
.mailitem .pa{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.mailitem .qd{font-size:11px;color:var(--ink-4);margin-top:3px;font-style:italic}
.mailprev{background:var(--surface-2);padding:2px;max-height:70vh;overflow-y:auto}
.mailprev table{max-width:100%}

/* ── utilidades ─────────────────────────────────────────────────────────── */
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mt32{margin-top:32px}
.mt24{margin-top:24px}
.mt28{margin-top:28px}.mb4{margin-bottom:4px}.mb10{margin-bottom:10px}
.hide{display:none!important}
.grow{flex:1}
@media(max-width:1080px){.so-lg{display:none}}
@media(max-width:860px){.hide-sm{display:none}}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:11px;font-size:13.5px;font-weight:540;z-index:200;
  box-shadow:0 12px 40px rgba(0,0,0,.35);animation:up .22s var(--e);display:flex;align-items:center;gap:9px}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}
.toast.ok{background:var(--ok)}
/* a navegação rola dentro dela mesma em vez de empurrar a página de lado */
@media(max-width:760px){
  .top .in{gap:9px;padding:0 14px}
  .top nav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .navlink{padding:7px 9px;font-size:13.5px;white-space:nowrap}
}
@media(max-width:600px){
  h1{font-size:23px} .page{padding:22px 16px 110px} .top .in{padding:0 12px}
  .rail .body{padding:15px 16px} .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
  .dock{padding:11px 14px;bottom:10px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   O QUE O PRODUTO TEM E O PROTÓTIPO NÃO
   Telas que nasceram depois, e o visualizador de verdade — que no protótipo era
   uma sobreposição de tela cheia e aqui é página própria, porque tem endereço,
   histórico e link que se manda. Tudo daqui para baixo usa os tokens de cima.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── utilitários de arranjo ─────────────────────────────────────────────── */
.linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.enfileirado{display:inline-flex;align-items:center;gap:6px}
.fileira{display:flex;gap:10px;flex-wrap:wrap}
.centro{text-align:center}
.meio{margin-left:auto;margin-right:auto}
.larga{max-width:1440px}
.pad-g{padding:34px 30px}
.mt4{margin-top:4px} .mb20{margin-bottom:20px}
.f1{flex:1;min-width:110px} .f2{flex:2;min-width:150px}
.bl{display:block}
.pre{white-space:pre-wrap}

/* A caixa do "li e concordo", e o texto do termo citado palavra por palavra.

   `.check` normal tem alvo de 15px — bom para uma coluna de opções numa tela do
   estúdio, e pequeno demais para a ÚNICA saída de uma tela obrigatória, tocada
   com uma mão no canteiro. A variante `.g` cresce o alvo sem mexer na `.check`
   que já está em seis telas.

   `.termo-corpo` é o texto guardado saindo verbatim — no relatório impresso e no
   recibo quando a redação já não está no código. A barra à esquerda diz "isto é
   citação, não é o sistema falando". Nenhuma cor literal aqui: só o token, que
   já tem gêmeo no bloco escuro. */
.check.g{min-height:44px;align-items:flex-start;gap:11px;line-height:1.45}
.check.g input{width:20px;height:20px;flex:0 0 20px;margin-top:1px}
.termo-corpo{white-space:pre-wrap;border-left:3px solid var(--line-2);padding-left:14px}
.mono{font-family:var(--fm);font-size:12.5px}
.sub{color:var(--ink-3)}
.vis-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── formulário ─────────────────────────────────────────────────────────── */
.inp{width:100%;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r1);padding:9px 12px;font:inherit;font-size:14px;color:var(--ink);
  transition:var(--t) var(--e)}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50);outline:none}
.inp.curta{width:auto;min-width:160px}
.inp.ta{resize:vertical;min-height:74px;line-height:1.5}
.inp.sm{padding:5px 9px;font-size:12.5px;width:auto}
.inp.mono{font-family:var(--fm);font-size:12.5px}
.inp-tit{border-color:transparent;background:transparent;padding:3px 5px;font-weight:620;
  font-size:14px;margin-left:-5px}
.inp-tit:hover{background:var(--surface-2)}
.rot{display:block;font-size:12px;font-weight:640;color:var(--ink-3);margin-bottom:5px}
.check{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.check input{accent-color:var(--brand);width:15px;height:15px}
.lnk{background:none;border:0;padding:0;color:var(--brand-700);font:inherit;font-size:13px;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--brand-200)}
.lnk:hover{text-decoration-color:var(--brand)}
.lnk.dgr{color:var(--danger);text-decoration-color:var(--danger-200)}
.lnk[disabled]{opacity:.28;cursor:default;text-decoration:none}

/* ── avisos, listas e tabelas simples ───────────────────────────────────── */
.aviso{background:var(--warn-50);border:1px solid var(--warn-200);border-radius:var(--r2);
  padding:14px 16px;font-size:13.5px;color:var(--ink-2)}
.aviso strong{color:var(--ink)}
.recado{background:var(--info-50);border:1px solid var(--info-200);border-radius:var(--r2);
  padding:12px 15px;font-size:13.5px}
.lista{margin:0;padding-left:18px;color:var(--ink-2);font-size:13.5px}
.lista li{margin-top:4px}
/* `.tab` NÃO é redefinida aqui: a do protótipo (superfície, raio 16, sombra e
   rolagem horizontal) é melhor que a minha, e sobrescrevê-la foi o que deixou
   as listas com cara de tabela crua. `.tr` é minha e não conflita com `.trow`. */
.tr{display:flex;gap:14px;align-items:flex-start;padding:11px 14px;
  border-bottom:1px solid var(--line)}
.tr:last-child{border-bottom:0}
.tr > span{flex:1;min-width:0}
.tr.th{background:var(--surface-2);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:var(--ink-4)}
.tr .acs{flex:0 0 auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.link-novo{background:var(--ok-50);border:1px solid var(--ok-200);border-radius:var(--r2);padding:13px 15px}

/* ── faixa de fases ─────────────────────────────────────────────────────── */
.faixa{display:flex;gap:3px;flex-wrap:wrap;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r2);padding:4px}
.fx{flex:1;text-align:center;padding:8px 10px;border-radius:7px;font-size:12.5px;
  font-weight:600;color:var(--ink-4);white-space:nowrap;text-decoration:none;
  transition:var(--t) var(--e)}
a.fx:hover{background:var(--surface-3);color:var(--ink-2)}
.fx.ja{color:var(--ok)}
.fx.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

/* ── grade de itens ─────────────────────────────────────────────────────── */
.grade{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.fig{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;transition:var(--t) var(--e)}
.fig:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.fig.erro{border-color:var(--danger-200)}
.fig-ph{display:block;position:relative;aspect-ratio:16/10;background:var(--surface-3);
  overflow:hidden}
.fig-ph img{width:100%;height:100%;object-fit:cover;display:block}
.fig-ph.vazia{display:grid;place-items:center}
.fig-estado{font-size:12px;color:var(--ink-4)}
.fig-v{position:absolute;left:9px;top:9px;background:rgba(0,0,0,.62);color:#fff;
  font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px}
.fig-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  font-size:34px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.fig-bd{padding:11px 13px}
.fig-ref{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--line);flex-wrap:wrap}
.fig-ref img{width:38px;height:26px;object-fit:cover;border-radius:4px;flex:0 0 38px}

/* ── zona de envio ──────────────────────────────────────────────────────── */
.drop{border:2px dashed var(--line-2);border-radius:var(--r3);padding:38px 22px;
  text-align:center;background:var(--surface);cursor:pointer;transition:var(--t) var(--e)}
.drop:hover,.drop.quente{border-color:var(--brand);background:var(--brand-50)}
.drop-ic{font-size:26px;color:var(--ink-4);margin-bottom:6px}
.env{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.env-nm{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.env-st{font-size:12px;color:var(--ink-4);flex:0 0 auto}
/* Sem o `appearance:none`, a barra é desenhada pelo navegador — e o navegador
   do modo escuro pinta um azul que não é de ninguém. Pintada aqui, ela usa o
   mesmo trilho e a mesma marca da `.bar` dos cartões, nos dois temas. */
.env progress{flex:0 0 130px;height:5px;appearance:none;-webkit-appearance:none;
  border:0;border-radius:3px;background:var(--surface-3);overflow:hidden}
.env progress::-webkit-progress-bar{background:var(--surface-3)}
.env progress::-webkit-progress-value{background:var(--brand);border-radius:3px}
.env progress::-moz-progress-bar{background:var(--brand);border-radius:3px}
.env.feito .env-st{color:var(--ok)}
.env.ruim .env-st{color:var(--danger)}

/* ── página de erro e conferência ───────────────────────────────────────── */
.codigo{font-size:52px;font-weight:700;color:var(--line-2);letter-spacing:-.03em}
.chk{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.chk:last-child{border-bottom:0}
.chk-s{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700}
.chk.bom .chk-s{background:var(--ok-50);color:var(--ok)}
.chk.mau .chk-s{background:var(--danger-50);color:var(--danger)}
.chk.meio .chk-s{background:var(--warn-50);color:var(--warn)}
.chk-n{font-size:13.5px;font-weight:560}

/* ── janela do cliente ──────────────────────────────────────────────────── */
.janela{background:linear-gradient(180deg,var(--brand-50),var(--surface));
  border:1px solid var(--brand-200);border-radius:var(--r3);padding:18px 20px}
.jt{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--brand-700)}
.jp{font-size:16px;font-weight:640;margin-top:3px}

/* ── lista de tarefas ───────────────────────────────────────────────────── */
.tarefa{align-items:flex-start}
.tarefa.resolvido,.tarefa.nao_aplica{opacity:.55}
.bolinha{width:22px;height:22px;border-radius:50%;cursor:pointer;padding:0;
  border:2px solid var(--line-2);background:transparent;transition:var(--t) var(--e)}
.bolinha:hover{transform:scale(1.15)}
.bolinha.pendente{border-color:var(--line-2)}
.bolinha.execucao{border-color:var(--brand);background:
  radial-gradient(circle at center,var(--brand) 0 45%,transparent 46%)}
.bolinha.resolvido{border-color:var(--ok);background:var(--ok)}
.bolinha.nao_aplica{border-color:var(--line-2);background:
  repeating-linear-gradient(45deg,var(--line-2) 0 2px,transparent 2px 4px)}

/* ── quadro de etapas ───────────────────────────────────────────────────── */
.quadro-rolo{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r3);
  background:var(--surface)}
.quadro{border-collapse:collapse;width:100%;font-size:13px}
.quadro th,.quadro td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:center}
.quadro thead th{border-bottom:2px solid var(--line-2);vertical-align:bottom;
  background:var(--surface-2);position:sticky;top:0;z-index:2}
.quadro .q-item{text-align:left;min-width:210px;position:sticky;left:0;z-index:1;
  background:var(--surface);border-right:1px solid var(--line)}
.quadro thead .q-item{background:var(--surface-2);z-index:3}
.q-et{font-weight:640;font-size:12.5px}
.q-fora{background:repeating-linear-gradient(45deg,var(--surface-2) 0 4px,transparent 4px 8px)}
.q-sel select{border:0;background:transparent;font:inherit;font-size:11px;
  color:var(--ink-4);cursor:pointer;margin-top:3px;max-width:84px}
.cel{width:26px;height:26px;border-radius:7px;cursor:pointer;padding:0;
  border:2px solid var(--line-2);background:transparent;transition:var(--t) var(--e)}
.cel:hover{transform:scale(1.12)}
.cel.pendente{border-color:var(--line-2)}
.cel.fazendo{border-color:var(--brand);background:
  repeating-linear-gradient(45deg,var(--brand) 0 3px,transparent 3px 6px)}
.cel.feita{border-color:var(--ok);background:var(--ok)}
.cel.nao_aplica{border-color:var(--line);background:var(--line);opacity:.55}

.barra-pct{display:block;width:100%;height:7px}
.barra-pct .trilho{fill:var(--line)}
.barra-pct .feito{fill:var(--ok)}

/* ── editar etapas ──────────────────────────────────────────────────────── */
.et-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.et-ord{display:flex;flex-direction:column;gap:1px;min-width:20px}
.et-ord .lnk{line-height:1;padding:2px 4px;text-decoration:none}
.et-remover{display:flex;gap:6px;align-items:baseline;margin-top:6px;margin-bottom:14px}

/* ── cronograma: o gráfico de prazos ────────────────────────────────────────
   Uma cor de destaque só — a etapa que está acontecendo. O que já passou é
   cheio em tom de papel, o que ainda não começou é vazado. Cronograma colorido
   por etapa vira arco-íris e some justamente a informação que interessa.
   A vertical do SVG é em pixel e a horizontal em porcentagem: nada é esticado,
   então o raio da barra continua redondo e a régua sai no tamanho escrito. */
.gt{--gt-lab:172px}
.gt-r{display:grid;grid-template-columns:var(--gt-lab) minmax(0,1fr);
  column-gap:16px;align-items:center}
.gt-l{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px}
.gt-nm{font-size:13.5px;color:var(--ink-2);max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-r.k .gt-nm{color:var(--ink);font-weight:620}
.gt-tag{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:750;color:var(--ink-4)}
.gt-dt{flex-basis:100%;font-family:var(--fm);font-size:11px;color:var(--ink-4);
  font-variant-numeric:tabular-nums}
.gt-t{display:block;width:100%}
.gt-g{stroke:var(--line);stroke-width:1}
.gt-now{stroke:var(--brand);stroke-width:1;opacity:.45}
.gt-b{fill:var(--line-2)}
.gt-b.fu{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1}
.gt-b.k{fill:var(--brand)}
.gt-b.ok{fill:var(--ok)}
.gt-mo{font-size:10.5px;font-weight:700;letter-spacing:.05em;fill:var(--ink-4)}
.gt-hj{font-size:10.5px;font-weight:750;letter-spacing:.05em;fill:var(--brand)}
.gt-sd{font-size:11px;fill:var(--ink-4)}
.gt-leg{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:16px;padding-top:13px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-4)}
.gt-leg span{display:inline-flex;align-items:center;gap:7px}
.gt-leg .sp{flex:1;min-width:8px}
.gt-leg i{width:17px;height:9px;border-radius:5px;background:var(--line-2);flex:0 0 17px}
.gt-leg .k i{background:var(--brand)}
.gt-leg .fu i{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.gt-leg .ok i{background:var(--ok)}
.gtw{padding:30px 28px}
@media(max-width:640px){
  /* Empilhar nome e barra parece a saída óbvia e é a pior: a régua vertical
     quebra em pedaços soltos e a página triplica de altura. Melhor apertar a
     coluna do nome e tirar da régua uma marca sim, outra não. */
  .gtw{padding:18px 12px}
  .gt{--gt-lab:126px}
  .gt-r{column-gap:9px}
  .gt-nm{font-size:12.5px}
  .gt-dt{font-size:10px}
  .gt-g.alt,.gt-mo.alt{display:none}
}

/* ── o degrau da entrega, dentro do visualizador ────────────────────────────
   Fica acima do fio, no escuro do visualizador: é onde a pessoa decide o que
   escrever, e é o único lugar onde ler "a decoração ainda vai mudar" evita a
   rodada desperdiçada. */
.degrau{padding:14px 16px;border-bottom:1px solid var(--v-line);background:var(--v-2)}
.degrau .dtit{font-size:14px;font-weight:640;color:var(--v-ink)}
.degrau .dtit span{font-weight:400;color:var(--v-ink-2)}
.degrau p{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--v-ink-2)}
.degrau p b{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;margin-bottom:2px}
.degrau p.s b{color:var(--brand-200)}
.degrau p.n b{color:var(--v-ink-3)}

/* o selo do degrau no cartão do cliente, no lugar do "v2" */
.item .cap .gl.et{background:rgba(196,98,60,.92);color:#fff;letter-spacing:.01em}

/* ── ambiente: o título do grupo de candidatas ──────────────────────────── */
.amb{display:flex;align-items:baseline;gap:10px;font-size:15.5px;font-weight:640;
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:2px}
.amb .xs{font-weight:400}

/* ── o "como funciona" do cliente ───────────────────────────────────────────
   O número fica fora do fluxo, em `position:absolute`. Em grade, cada nó de
   texto do <li> viraria um item de grade e a frase desceria uma palavra por
   linha — erro que já aconteceu aqui. */
.passos{margin:0;padding:0;list-style:none;counter-reset:p;
  display:flex;flex-direction:column;gap:16px;max-width:64ch}
.passos li{counter-increment:p;position:relative;padding-left:44px;
  color:var(--ink-2);font-size:15px;line-height:1.55}
.passos li::before{
  content:counter(p);position:absolute;left:0;top:1px;width:27px;height:27px;
  border-radius:50%;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink-3);font-family:var(--fm);font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.passos li strong{color:var(--ink)}

/* ── relatório ──────────────────────────────────────────────────────────── */
/* O relatório usa `.rep` do protótipo — folha branca com sombra, cabeçalho com
   régua preta e `.kv` para os números. O que sobra aqui é a linha do pedido,
   que o protótipo não tem porque lá o relatório é resumo e aqui é registro. */
.rel-bloco{margin-top:26px}
.rel-bloco h2{break-after:avoid}
.rel-pedido{display:flex;gap:12px;align-items:flex-start;padding:8px 0;
  border-bottom:1px solid var(--line);break-inside:avoid}
.rel-sit{flex:0 0 92px;font-size:11px;padding:2px 7px;border-radius:99px;
  border:1px solid var(--line-2);text-align:center;white-space:nowrap;color:var(--ink-3)}
.rel-sit.resolvido{border-color:var(--ok-200);color:var(--ok);background:var(--ok-50)}
.rel-sit.execucao{border-color:var(--brand-200);color:var(--brand-700);background:var(--brand-50)}
.rel-sit.nao_aplica{opacity:.55}
@media print{
  .nao-imprime,.top{display:none !important}
  .page{max-width:none;padding:0}
  a{text-decoration:none;color:inherit}
}

/* ═══════════════════════════════════════════ o visualizador, em página própria
   No protótipo ele era uma sobreposição de tela cheia. Aqui tem endereço,
   histórico e link que se manda — mas o traje é o mesmo: cinzas NEUTROS, sem
   tinta nenhuma. Qualquer cor no entorno desloca a cor percebida do render, e
   cor é justamente o que se está aprovando. */
.visu{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  background:var(--v-0);color:var(--v-ink);
  /* O VISUALIZADOR NÃO SEGUE O TEMA. Ele já é escuro e neutro nos dois, e aqui
     as cores semânticas voltam ao valor canônico: sem esta trava, o alfinete
     verde da marcação e a bolinha do comentário mudariam de tom conforme quem
     está olhando escolheu claro ou escuro — e a tela onde se julga cor é a
     última que pode mudar de cor. É a mesma regra do cabeçalho deste arquivo,
     escrita como código em vez de como aviso. */
  --ok:#2E7351;   --ok-50:#EAF3EE;  --ok-200:#C0DDCE;
  --warn:#94682C; --warn-50:#F8F1E1; --warn-200:#E6D3AE;
  --info:#3A6A88; --info-50:#E9F0F5; --info-200:#C2D6E2;
  --danger:#A33D2A; --danger-50:#F9ECE8; --danger-200:#EBC5B9;
  --brand:#C4623C; --brand-600:#AC5230; --brand-700:#8C4023;
  --sobre-ok:#fff; --sobre-info:#fff; --sobre-warn:#fff; --sobre-brand:#fff}
.visu-topo{display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--v-1);border-bottom:1px solid var(--v-line);flex-wrap:wrap}
.visu-tit{font-size:13.5px;font-weight:620;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.visu-tit .sub{font-size:11.5px;color:var(--v-ink-3);display:block}
/* Flex e não grid: o painel do projeto é um filho OPCIONAL, e com colunas
   fixas ele ocupa a primeira mesmo escondido — o palco encolhe para a coluna
   errada e a imagem fica num canto. Com flex, quem não existe não ocupa. */
.visu-corpo{flex:1;display:flex;min-height:0}
.visu-palco{flex:1;position:relative;overflow:hidden;min-height:0;min-width:0;
  background:var(--v-0);cursor:grab;touch-action:none}
.visu-palco.arrastando{cursor:grabbing}
.visu-palco.marcando{cursor:crosshair}
.visu-palco.na-alca{cursor:ew-resize}
.visu-lona{position:absolute;inset:0;width:100%;height:100%;display:block}
.visu-filme{width:100%;height:100%;object-fit:contain;background:#000}
/* A camada de marcação do VÍDEO. Transparente a cliques até o modo "marcar"
   ligar — fora dele, os controles nativos do player continuam mandando. No
   modo, ela cobre tudo (controles inclusive): é de um clique só, com o filme
   já pausado, e sai sozinha depois do clique. */
/* width/height explícitos, como na .visu-lona: canvas é elemento "replaced",
   e absoluto com inset:0 ele fica no tamanho INTRÍNSECO (os pixels do
   atributo) em vez de esticar — o overlay saía maior que o palco e todo
   clique caía deslocado. */
.visu-sobre{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.visu-palco.marcando .visu-sobre{pointer-events:auto;cursor:crosshair}
/* Vendo o "antes" no A/B, a escrita trava: o texto iria para a versão ATUAL
   enquanto o olho está na ANTERIOR — comentário mal-atribuído. */
/* só a caixa dos COMENTÁRIOS: o comentário é da versão que está na tela. A conversa
   da equipe é da imagem, em todas as versões, e segue escrevível (02/10/2026). */
.visu.vendo-antes #escrever{opacity:.4;pointer-events:none}
/* A faixa "você está numa versão antiga". Âmbar apagado sobre o neutro do
   visualizador — informa sem competir com o render. */
.visu-aviso-versao{background:#26200F;border-bottom:1px solid #4A3E1E;color:#D8C289;
  font-size:12.5px;padding:7px 14px;text-align:center}
.visu-aviso-versao a{color:#EFE3BD;text-underline-offset:2px}
.visu-hud{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;z-index:8;flex-wrap:wrap}
.visu-hud .h{background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.09);
  color:var(--v-ink-2);font-size:11px;padding:4.5px 9px;border-radius:7px}
.visu-hud .h.hi{color:#7EC5A0}
.visu-zoom{position:absolute;right:12px;bottom:12px;display:flex;gap:5px;align-items:center;
  background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.09);
  border-radius:9px;padding:4px;z-index:8}
.visu-zoom .z{font-size:11.5px;min-width:44px;text-align:center;color:var(--v-ink)}
.visu-lado{flex:0 0 348px;background:var(--v-1);border-left:1px solid var(--v-line);
  display:flex;flex-direction:column;min-height:0}
.lado-topo{padding:11px 14px;border-bottom:1px solid var(--v-line)}
.lado-lista{flex:1;overflow-y:auto;padding:10px 12px 16px;scrollbar-width:thin}
.lado-escrever{border-top:1px solid var(--v-line);padding:11px 12px;background:var(--v-2)}
.lado-escrever .inp{background:var(--v-3);border-color:var(--v-4);color:var(--v-ink)}
.lado-escrever .inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(196,98,60,.22)}
.visu-tira{flex:0 0 auto;background:var(--v-1);border-top:1px solid var(--v-line);
  padding:9px 10px;display:flex;gap:8px;overflow-x:auto}
.tira{flex:0 0 auto;width:82px;border-radius:7px;overflow:hidden;border:2px solid transparent;
  opacity:.62;transition:var(--t) var(--e);text-decoration:none;display:block}
.tira:hover{opacity:1}
.tira.on{border-color:var(--v-ink);opacity:1}
.tira img{width:100%;height:52px;object-fit:cover;display:block}
.tira .nm{font-size:9.5px;color:var(--v-ink-3);padding:3px 4px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* a imagem do projeto de arquitetura, ao lado do render */
/* Só aparece quando o botão "projeto" abre. Escondido, não ocupa lugar. */
.visu-ref{display:none;flex:0 0 32%;min-width:0;background:var(--v-1);
  border-right:1px solid var(--v-line);flex-direction:column;min-height:0}
.visu-corpo.mostra-projeto .visu-ref{display:flex}
.ref-cab{padding:11px 14px;border-bottom:1px solid var(--v-line);display:flex;
  align-items:center;gap:8px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;color:var(--v-ink-2)}
.ref-cab .vb{margin-left:auto}
.ref-img{flex:1;min-height:0;display:grid;place-items:center;padding:12px;overflow:auto}
.ref-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.ref-legenda{padding:8px 14px;border-top:1px solid var(--v-line);font-size:11.5px;
  color:var(--v-ink-3)}

/* comentários, no escuro */
.com{background:var(--v-2);border:1px solid var(--v-line);border-radius:var(--r2);
  padding:10px 12px;margin-bottom:9px;transition:var(--t) var(--e)}
.com.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(196,98,60,.16)}
.com.est{background:var(--v-1)}
.com.int{border-style:dashed}
.com-cab{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.com-quem{font-size:12.5px;font-weight:640}
.com-tag{font-size:10px;background:var(--v-3);color:var(--v-ink-2);
  padding:1.5px 6px;border-radius:99px}
.com-txt{font-size:13px;color:var(--v-ink);white-space:pre-wrap;line-height:1.45}
.com-pe{display:flex;gap:9px;margin-top:7px;font-size:11.5px;color:var(--v-ink-3);flex-wrap:wrap}
.com-pe .lnk{color:var(--v-ink-2);font-size:11.5px;text-decoration-color:var(--v-ink-3)}
.com-status{font-size:10.5px;padding:1.5px 7px;border-radius:99px;border:1px solid var(--v-line)}
.com-ref{display:block;margin-top:7px;border-radius:6px;overflow:hidden;max-width:150px}
.com-ref img{width:100%;display:block}
.com-recado{font-size:12px;color:var(--v-ink-3);padding:10px 2px;line-height:1.5}
/* "Rodada N" ou "Todas as rodadas", em cima do fio */
.fio-escolha{padding:10px 12px 0}
.fio-escolha .seg{display:inline-flex}
.fio-sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--v-ink-3);padding:12px 2px 7px;border-top:1px solid var(--v-line);margin-top:4px}
.fio-sec:first-child{border-top:0;margin-top:0;padding-top:2px}
.fio-sec a{color:var(--v-ink-2);text-transform:none;letter-spacing:0;font-weight:600;
  font-size:11.5px;text-underline-offset:2px;white-space:nowrap}
.com.velho{opacity:.82}
.cmp-legenda{position:absolute;top:12px;left:0;right:0;display:flex;
  justify-content:space-between;padding:0 16px;pointer-events:none;z-index:8}
.cmp-legenda span{background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.09);
  color:var(--v-ink);font-size:11px;padding:4.5px 9px;border-radius:7px}

@media(max-width:900px){
  .visu-corpo,.visu-corpo.mostra-projeto{flex-direction:column}
  .visu-lado{flex:0 0 44%;border-left:0;border-top:1px solid var(--v-line)}
  .visu-ref{flex:0 0 34%;border-right:0;border-bottom:1px solid var(--v-line)}
  .rel-grade{grid-template-columns:repeat(2,1fr)}
}

/* ── dedo, não ponteiro ─────────────────────────────────────────────────────
   `pointer:coarse` e não largura de tela: o que decide o tamanho do alvo é o
   dedo, não o monitor. Quem usa isto no celular está andando pela obra, com uma
   mão — errar o botão de marcar ponto custa um pino no lugar errado numa imagem
   que a equipe vai ler depois. */
@media(pointer:coarse){
  .vb{min-height:44px;min-width:44px;padding:9px 14px;justify-content:center}
  .visu-zoom{gap:6px;padding:5px}
  .visu-zoom .z{min-width:52px;font-size:12.5px}
  .vgrupo{gap:6px}
  .btn,.btn.sm{min-height:44px}
  .inp,.inp.ta{min-height:44px;font-size:16px}   /* 16px trava o zoom do iOS ao focar */
  .lnk{display:inline-flex;align-items:center;min-height:40px}
  .bolinha{width:30px;height:30px}
  .check.g input{width:24px;height:24px;flex:0 0 24px}
  .cel{width:34px;height:34px}
}

/* ── as poucas peças que ficaram sem regra ao trocar a base ─────────────── */
.aviso.r{background:var(--danger-50);border-color:var(--danger-200);color:var(--danger)}
.visu-tit .a{font-size:13.5px;font-weight:620;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.visu-tit .b{font-size:11.5px;color:var(--v-ink-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.btn.cheio{width:100%;justify-content:center}
/* Aqui morava `.pg{min-height:100dvh;…}`, trazida do protótipo, onde `.pg` era
   a moldura de página. NENHUMA vista usa essa moldura — mas a barrinha de
   progresso do upload se chama `class="pg"`, e herdou altura de TELA INTEIRA:
   era a coluna azul gigante ao lado de "preparando…". Regra morta de um lado,
   veneno do outro. Se um dia a moldura de página voltar, que volte com outro
   nome — `pg` já tem dono. */


/* ── colunas do quadro, sem `style` inline ───────────────────────────────────
   O protótipo põe `--cols` num atributo `style`, e a política de conteúdo
   bloqueia atributo style. Seletor de atributo resolve: o número de etapas vem
   no `data-cols`, e a regra correspondente define a grade. Doze cobre qualquer
   pipeline que caiba numa tela. */
.board[data-cols="1"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(1,minmax(76px,1fr))}
.board[data-cols="2"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(2,minmax(76px,1fr))}
.board[data-cols="3"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(3,minmax(76px,1fr))}
.board[data-cols="4"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(4,minmax(76px,1fr))}
.board[data-cols="5"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(5,minmax(76px,1fr))}
.board[data-cols="6"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(6,minmax(76px,1fr))}
.board[data-cols="7"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(7,minmax(76px,1fr))}
.board[data-cols="8"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(8,minmax(76px,1fr))}
.board[data-cols="9"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(9,minmax(76px,1fr))}
.board[data-cols="10"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(10,minmax(76px,1fr))}
.board[data-cols="11"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(11,minmax(76px,1fr))}
.board[data-cols="12"] .brow{grid-template-columns:minmax(210px,1.5fr) repeat(12,minmax(76px,1fr))}

/* `.head` é o cabeçalho de PÁGINA (flex, gap 20). `.brow.head` é a primeira
   linha do quadro, e herdava gap e margem de lá — desalinhando as colunas do
   cabeçalho em relação às de baixo. Mesmo nome, duas peças. */
.brow.head{gap:0;margin-bottom:0;align-items:stretch}

/* ── mosaico: o projeto inteiro numa tela ────────────────────────────────── */
/* Cartão pequeno de propósito. O que se lê aqui é o CONJUNTO — se ele parece
   uma coisa só — e para isso as peças têm de caber juntas no olho. `auto-fill`
   com mínimo de 150 px põe de seis a dez por linha num monitor comum, e dois no
   celular, sem nenhuma regra de media query. */
.mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mos{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r2);
  overflow:hidden;background:var(--surface-3);border:1px solid var(--line);
  transition:.18s var(--e)}
.mos img{width:100%;height:100%;object-fit:cover;display:block}
.mos:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2);z-index:2}
.mos-vazio{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--ink-4);font-size:18px}
/* O degrau é a única legenda. Some no hover: quem está mirando um cartão quer
   ver a imagem, não o rótulo dela. */
.mos-et{position:absolute;left:6px;bottom:6px;font-size:9.5px;font-weight:650;
  letter-spacing:.02em;padding:2px 6px;border-radius:99px;
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(3px);
  max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:opacity .18s var(--e)}
.mos:hover .mos-et{opacity:0}

/* ── sino ────────────────────────────────────────────────────────────────── */
/* Discreto quando não há nada, e é assim que ele continua sendo lido: sino que
   chama atenção o tempo todo vira parte do cenário e ninguém abre. Só ganha cor
   quando há algo que a pessoa ainda não viu. */
.sino{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r2);color:var(--ink-3);
  font-size:15px;line-height:1;text-decoration:none;transition:.15s var(--e)}
.sino:hover{background:var(--surface-2);color:var(--ink)}
.sino.tem{color:var(--brand)}
.sino-n{position:absolute;top:2px;right:0;min-width:15px;height:15px;padding:0 3px;
  border-radius:99px;background:var(--brand);color:#fff;font-size:9.5px;
  font-weight:750;display:flex;align-items:center;justify-content:center;
  line-height:1;box-shadow:0 0 0 2px var(--top-solido)}

/* ── tema: claro, escuro, ou o que o aparelho pedir ──────────────────────── */
/* Do mesmo tamanho e do mesmo silêncio do sino ao lado. É controle de conforto,
   não de trabalho: não pode disputar atenção com o que a pessoa veio fazer.
   O `form` em volta existe só para carregar o POST — `inline-flex` e sem
   margem para ele não abrir buraco na linha do cabeçalho nem esticar a `.row`
   das telas de cliente, onde ele fica ombro a ombro com botões de verdade. */
.tema-f{display:inline-flex;margin:0;flex:0 0 auto}
.tema{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:0;background:none;border-radius:var(--r2);
  color:var(--ink-3);font-size:15px;line-height:1;transition:.15s var(--e)}
.tema:hover{background:var(--surface-2);color:var(--ink)}

/* ── a lista do estúdio: a tabela que substitui o quadro de fora ─────────────
   Três naturezas de coluna na mesma tabela, e a diferença tem de ser visível
   sem explicação: as duas derivadas não têm controle nenhum, só pastilha, e o
   cabeçalho delas leva o ponto que a legenda explica.
   A primeira coluna gruda: com doze colunas a tabela sai da tela, e rolar para
   o lado sem saber de que item é a linha é o que faz ninguém usar a tela. */
/* A ROLAGEM VERTICAL É DA CAIXA, e o `max-height` é o que faz o cabeçalho da
   tabela grudar de verdade.

   Estava `overflow-x:auto` sozinho, e o cabeçalho NÃO grudava — medido: rolando
   a página 700px, o `thead` ia parar em -315px, fora da tela. O motivo é uma
   regra do CSS que não se vê olhando: declarar `overflow-x:auto` faz o
   `overflow-y` computar `auto` junto, então a caixa vira contêiner de rolagem
   nos DOIS eixos. E `position:sticky` cola no contêiner mais próximo, não na
   janela — a caixa não tinha altura limitada, nunca rolava por dentro, e o
   cabeçalho ficava colado a nada enquanto a PÁGINA rolava por baixo dele.
   Parecia só uma tabela sem cabeçalho fixo, que é o pior tipo de defeito: não
   tem sintoma, tem ausência.

   Com o teto, quem rola são as linhas dentro da caixa, e aí o `top:0` do
   `thead` tem contra o que colar. A coluna grudada da esquerda sempre
   funcionou, e é a prova do diagnóstico: a rolagem horizontal dentro da caixa
   existia desde o começo.

   OS 280px SÃO MEDIDOS, e cheguei neles errando duas vezes. Primeiro escrevi
   92 (a barra do topo mais folga): o cabeçalho passou a grudar na caixa, certo,
   mas a PÁGINA continuava rolando por baixo e levava a caixa inteira para cima
   — o cabeçalho ia junto e o defeito voltava por outra porta. Depois calculei
   180 somando o que fica abaixo da caixa, e ainda faltavam 87px que a conta não
   via. Medir venceu a conta.

   A regra: com a página rolada até o fim, `rolo.getBoundingClientRect().top`
   tem de ser MAIOR que a altura da barra fixa (59). Com 280 dá 72 numa janela
   de 900, e sobram 16 linhas à vista. Se um dia entrar mais coisa embaixo da
   tabela, este número sobe — e o jeito de saber é medir de novo, não recalcular.

   Tentei também `position:sticky` na própria caixa, e é pior: a caixa quase não
   tem alcance de grude (ela é quase tão alta quanto o pai) e ainda passa por
   cima da legenda que vem embaixo. */
.lst-rolo{overflow:auto;max-height:calc(100vh - 280px);
  border:1px solid var(--line);border-radius:var(--r3);
  background:var(--surface);box-shadow:var(--sh-1)}
.lst{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.lst th,.lst td{padding:9px 11px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line);white-space:nowrap}
.lst thead th{background:var(--surface-fraca);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  position:sticky;top:0;z-index:2}
.lst tbody tr:last-child th,.lst tbody tr:last-child td{border-bottom:0}
.lst tbody tr:hover td,.lst tbody tr:hover th{background:var(--surface-hover)}
/* Fundo OPACO e não herdado: a célula grudada fica por cima do que rola por
   baixo dela, e com fundo transparente as duas se sobrepõem ilegíveis. */
.lst .gruda{position:sticky;left:0;z-index:1;background:var(--surface);
  font-weight:600;min-width:230px;max-width:340px;white-space:normal;
  border-right:1px solid var(--line)}
.lst thead .gruda{background:var(--surface-fraca);z-index:3}
.lst tbody tr:hover .gruda{background:var(--surface-hover)}
/* o ponto que marca coluna que se preenche sozinha */
.auto{color:var(--ink-4);font-size:8px;vertical-align:middle}
.chip.r{background:var(--danger-50);color:var(--danger)}

/* O seletor VESTE a cor do rótulo escolhido — é o que faz a coluna ser lida de
   relance, que é a razão de ela existir em vez de um campo de texto. */
.lst-sel{font:inherit;font-size:12px;font-weight:650;border:1px solid var(--line-2);
  border-radius:var(--r1);padding:4px 6px;background:var(--surface);color:var(--ink);
  max-width:190px}
.lst-sel.mini{max-width:60px;padding:3px 5px;font-weight:600;color:var(--ink-3)}
.lst-sel.cor-vazio{color:var(--ink-4)}
/* `--ink-2` e não `--ink-3`: medido, `--ink-3` sobre `--surface-3` dá 3,76:1 no
   tema claro, abaixo do 4,5 de texto pequeno. Esse par de 3,76 é dívida antiga
   da casa (toda pastilha cinza do sistema o usa, item 10 de docs/14-revisoes),
   mas ESTE seletor é novo — não há por que nascer devendo. Com `--ink-2` vai a
   8,9:1 e o cinza continua sendo cinza. */
.lst-sel.cor-g{background:var(--surface-3);color:var(--ink-2);border-color:transparent}
.lst-sel.cor-b{background:var(--info-50);color:var(--info-forte);border-color:var(--info-200)}
.lst-sel.cor-v{background:var(--ok-50);color:var(--ok-forte);border-color:var(--ok-200)}
.lst-sel.cor-a{background:var(--warn-50);color:var(--warn-forte);border-color:var(--warn-200)}
.lst-sel.cor-r{background:var(--danger-50);color:var(--danger);border-color:var(--danger-200)}
/* 210px: largo o bastante para a anotação típica caber sem cortar — nota que
   aparece pela metade é lida como dado perdido, mesmo inteira no banco. */
.lst-txt{font:inherit;font-size:12.5px;border:1px solid transparent;border-radius:var(--r1);
  padding:4px 6px;background:transparent;color:var(--ink);width:210px}
.lst-txt:hover{border-color:var(--line-2)}
.lst-txt:focus{border-color:var(--brand);background:var(--surface);outline:none}

.lst-gente{display:flex;flex-wrap:wrap;gap:4px;align-items:center;max-width:260px;
  white-space:normal}
/* A pastilha de pessoa é BOTÃO: tirar alguém é escrita, e escrita não anda por
   link — bastaria algo pré-carregar o endereço. */
.chip.pess{border:0;cursor:pointer;font-weight:650;text-transform:none;
  letter-spacing:0;font-size:11px;padding:3px 7px}
/* A RODA DE CORES DAS PESSOAS.
   A cor sai do id (`id % 5`), então é estável: o mesmo nome tem a mesma cor em
   todo o projeto, todo dia. É o que transforma "onde o Matheus está" numa
   varredura de olho em vez da leitura de quarenta nomes iguais — que era
   exatamente o pedido de quem usa a tela.
   Cinco e não seis: o vermelho fica de fora da roda, porque nesta tela ele é de
   um rótulo só, o do que quebrou. Pessoa não é erro.
   Cada par é fundo-claro + a tinta FORTE da mesma família, que é o par que o
   tema escuro sabe inverter — usar `--ink-3` em cima de fundo colorido daria
   tinta neutra sobre cor, que é o que some primeiro no escuro. */
.chip.pess-0{background:var(--info-50);color:var(--info-forte)}
.chip.pess-1{background:var(--ok-50);color:var(--ok-forte)}
.chip.pess-2{background:var(--warn-50);color:var(--warn-forte)}
.chip.pess-3{background:var(--brand-50);color:var(--brand-700)}
.chip.pess-4{background:var(--surface-3);color:var(--ink-2)}
/* O × herda a cor do nome que ele apaga. Antes era `--ink-3` fixo, escolhido
   quando toda pastilha era cinza; sobre fundo colorido ele viraria tinta neutra
   em cima de cor. Herdando, o contraste dele é o mesmo do nome — e o nome já é
   o par forte da família. */
.chip.pess .x{color:currentColor;opacity:.72;font-size:13px;line-height:1}
.chip.pess:hover{background:var(--danger-50);color:var(--danger)}
.chip.pess:hover .x{color:var(--danger)}

/* O seletor do degrau e o "salvar" andam juntos, nas duas larguras: separados
   por uma quebra, o botão parece de outra coisa — e ele é o que decide se o
   rótulo que o cliente leu vai ser reescrito. */
.lst-etapa{display:flex;flex-wrap:nowrap;align-items:center;gap:7px}
.lst-etapa .lst-sel{min-width:0}

.lst-col{padding-bottom:14px;border-bottom:1px solid var(--line)}
.lst-col:last-of-type{border-bottom:0}
.lst-rot{gap:6px;flex-wrap:nowrap}

/* A rolagem lateral no dedo, e a folha impressa. É o que `.rolar` já faz desde
   sempre para a outra tabela da casa; esta nascera sem os dois. */
.lst-rolo{-webkit-overflow-scrolling:touch}
@media print{.lst-rolo{overflow:visible;max-height:none;border:0;box-shadow:none}}

/* A âncora da gravação, nas DUAS larguras. Escrevi isto só dentro do bloco de
   celular e ficou pela metade: a barra do topo é fixa no monitor também, e sem
   a margem a linha salva ia parar EMBAIXO dela — a pessoa cai no lugar certo e
   não vê nada ali. */
.lst tbody tr{scroll-margin-top:76px}

/* A ressalva embaixo da pastilha de retorno, em `--ink-2`.
   MEDIDO no navegador, tema claro, sobre o #FAF8F5 do corpo: `--ink-4` (que é
   o que a classe `.xs` da casa usa) dá 2,49:1 e `--ink-3` dá 4,33:1 — os dois
   abaixo do 4,5:1 que a AA pede para texto deste tamanho. `--ink-2` dá 8,9:1.
   Cheguei a deixar `--ink-3` aqui achando que bastava ser melhor que o `.xs`;
   não basta, e a conta é de medir, não de comparar com o vizinho. Esta linha
   não é enfeite: ela muda o que a pastilha ao lado significa. */
.lst-nota{display:block;margin-top:4px;font-size:11.5px;line-height:1.35;
  color:var(--ink-2)}

/* Quarenta nomes de item em laranja é uma parede de cor onde a informação são
   as PASTILHAS. O nome vira tinta comum e só se acende no hover — a mesma
   lógica do quadro de fora que esta tela substitui. */
/* O NOME DO ITEM EM COR.
   Estava em tinta comum, acendendo só no hover, e a ideia era não fazer parede
   de laranja onde a informação são as pastilhas. Quem usa a tela pediu o
   contrário: com quarenta linhas quase iguais, o nome é o que ele procura
   primeiro, e em tinta comum ele se perdia no meio dos seletores. A cor da
   marca é o que separa "o que eu procuro" de "o que eu preencho".

   `--brand-700` e NÃO `--brand`: medido, o `--brand` cru dá 4,23:1 sobre o
   fundo do tema escuro, abaixo do 4,5 que a AA pede para 13px. É que `--brand`
   vale a MESMA tinta nos dois temas — ele é a cor da marca, não uma cor de
   texto. `--brand-700` é o par que o tema inverte (escuro no claro, claro no
   escuro), a mesma mecânica dos `--*-forte`. */
.lst .gruda .lnk{color:var(--brand-700);text-decoration:none}
.lst .gruda .lnk:hover{color:var(--brand);text-decoration:underline}

/* ── a lista no telefone: a mesma tabela, uma ficha por item ──────────────────
   O gesto muda com a largura. No monitor se PREENCHE várias colunas de uma
   varrida; no telefone se CONFERE em que pé está o 09 e, de vez em quando, se
   muda um status. A tabela pede rolagem lateral, que ninguém faz e que faz
   perder de que item é a linha; a ficha pede rolagem vertical, que o telefone
   faz de graça e que nunca perde o item — o nome dele É o cabeçalho do que se
   está lendo, e sai de graça o que a coluna grudada comprava com `sticky`.

   Medido antes de escrever: num aparelho de 375px a tabela dava 993px numa
   caixa de 342px — 651px de rolagem lateral com SEIS colunas, e só a coluna do
   nome ocupava 74% do que se via. Com as colunas do estúdio passaria de 2.500px.

   NADA SOME. Foi tentador esconder a célula vazia para encurtar a ficha, e é o
   contrário do que serve: marcar um status que ainda está em branco é o único
   gesto que o telefone existe para fazer. Ficha comprida se rola; larga, não.

   O MESMO HTML das duas larguras — as células viram blocos por CSS, e o rótulo
   que sumiu junto com o `thead` volta dentro da célula por `content:attr()`.
   Nenhuma segunda vista para manter em sincronia. */
@media(max-width:760px){
  /* no telefone cada linha é ficha e quem rola é a página: teto aqui prenderia
     as fichas numa janelinha dentro da tela */
  .lst-rolo{overflow:visible;max-height:none;border:0;background:none;box-shadow:none}
  .lst{display:block;font-size:14px}
  .lst thead{display:none}
  .lst tbody{display:block}
  .lst tr{display:flex;flex-wrap:wrap;gap:12px 10px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh-1);
    padding:13px 14px;margin-bottom:10px;
    /* a barra de cima é fixa: sem isto a âncora da gravação encosta a ficha
       embaixo dela e a pessoa acha que caiu no lugar errado */
    scroll-margin-top:72px}
  .lst th,.lst td{display:block;padding:0;border-bottom:0;white-space:normal}
  /* fundo de ponteiro fica GRUDADO depois do toque, no dedo */
  .lst tbody tr:hover td,.lst tbody tr:hover th,.lst tbody tr:hover .gruda{background:none}

  /* o nome do item é o título da ficha, não uma coluna */
  .lst .gruda{position:static;flex:0 0 100%;min-width:0;max-width:none;
    border-right:0;font-size:15.5px;font-weight:640;line-height:1.3}
  /* Toda célula com o rótulo À ESQUERDA e o conteúdo à direita, numa linha só.
     Empilhado, cada coluna custava dezesseis pixels só de rótulo, e a ficha
     passava de 440px — dezoito delas viravam vinte e sete telas de rolagem
     para varrer um projeto. Deitado, a mesma célula cabe em quarenta e quatro,
     que é a altura do controle e não sobra nada.
     `min-width:0` porque sem ele o seletor não encolhe abaixo da opção mais
     longa que ele contém, e a célula toma a linha inteira ignorando o rótulo. */
  .lst td{flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:center;
    gap:4px 10px;min-width:0}
  /* `flex:0 0 92px` fixo pintava por cima do controle quando o nome da coluna
     era longo e sem espaço para quebrar. `max-width` mais quebra de palavra: a
     caixa cede antes de invadir o vizinho. */
  .lst td::before{content:attr(data-rot);flex:0 1 92px;max-width:92px;
    font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3);line-height:1.3;overflow-wrap:anywhere}
  /* a ressalva desce para a própria linha dentro da célula, em vez de disputar
     espaço com a pastilha */
  .lst td .lst-nota{flex:1 0 100%;margin-top:0}
  /* o que vai à direita ocupa o resto, seja formulário ou fileira de pastilhas */
  .lst td > form,.lst td > .lst-gente{flex:1 1 auto;min-width:0}
  .lst .chip{font-size:11.5px;padding:4px 9px}

  /* controle de dedo: a linha inteira, e o texto não corta pela metade */
  .lst-sel,.lst-txt{width:100%;max-width:none;box-sizing:border-box}
  .lst-sel.mini{max-width:none}
  .lst-txt{border-color:var(--line-2);background:var(--surface)}
  .lst-gente{max-width:none;gap:6px}
  /* O seletor a 100% empurrava o "salvar" para a linha de baixo, e ali ele
     parecia solto, de ninguém. Dentro desta forma o seletor cede o espaço do
     botão em vez de tomar a largura toda. */
  .lst-etapa{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
  .lst-etapa .lst-sel{flex:1 1 auto;width:auto;min-width:0}
  .lst-col .linha,.lst-rot{flex-wrap:wrap}
}

/* O alvo de dedo. Mora AQUI, depois de `.lst-sel{font-size:12px}`, porque entre
   especificidades iguais quem decide é a ordem. Os 16px não são estética: campo
   com fonte menor faz o Safari do iPhone ampliar a página inteira ao receber
   foco, e não desfazer — numa tabela isso deixa a pessoa ampliada e perdida.
   É o mínimo de 40px que docs/10-design.md já exige do que roda no celular. */
@media(pointer:coarse){
  .lst-sel,.lst-txt{min-height:44px;font-size:16px}
  .chip.pess{min-height:40px;padding:8px 11px;font-size:12px}
}

/* Contraste, MEDIDO nos tokens do tema claro, que é o padrão — e o número de
   cada um está aqui porque "melhorou" não é o mesmo que "passa".

   O × que TIRA um responsável estava em `--ink-4` sobre `--surface-3`: 2,16:1,
   e docs/10-design.md diz com todas as letras que texto pequeno nunca usa
   `--ink-4` sobre nada que não seja branco. Sobe para `--ink-3` e vai a 3,76:1
   — ainda abaixo dos 4,5 de texto pequeno, e ainda assim o certo aqui: 3,76 é
   EXATAMENTE o contraste do nome ao lado dele, porque `.chip.g` já usa
   `--ink-3` sobre o mesmo fundo. Deixá-lo mais escuro que o nome que ele
   apaga seria hierarquia invertida. O resto dos 3,76 é `--ink-3` sobre
   `--surface-3` em toda pastilha cinza do sistema — dívida antiga, e é o item
   10 de docs/14-revisoes.md, não coisa desta tela.

   O seletor vazio estava em 2,64:1 e é o estado de TODA célula nova. Sobe para
   `--ink-3` sobre `--surface`, que é 4,59:1 — esse passa. */
.lst-sel.cor-vazio{color:var(--ink-3)}

/* ── Assistente IA: o selo, a fila de revisão, os tokens e o registro ───────
   O selo "IA" é tinta sobre o contrário da tinta — o único chip escuro da
   casa. Precisa ser reconhecível de relance, antes de alguém ler o nome, e as
   cores semânticas (verde, âmbar, azul) já querem dizer outra coisa aqui. */
.chip.ia{background:var(--ink);color:var(--sobre-ink);letter-spacing:.06em}
/* no fio do visualizador, que é escuro nos dois temas */
.com-tag.ia{background:var(--v-ink);color:var(--v-0);font-weight:750;letter-spacing:.06em}
/* a resposta pendurada no comentário, no fio do visualizador */
.com-respostas{display:grid;gap:6px;margin-top:8px}
.com-resp{border-left:2px solid var(--v-line);padding:3px 0 3px 10px}
.com-resp .com-quem{font-size:12px}
.com-resp .com-txt{font-size:12.5px}
.topo-link{color:var(--ink-2);text-decoration:none;font-weight:560}
.topo-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.rasc{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:16px}
.rasc-img{display:block;width:132px;height:88px;border-radius:8px;overflow:hidden;
  background:var(--surface-3)}
.rasc-img img{width:100%;height:100%;object-fit:cover;display:block}
.rasc-img .bitem-vazio{width:100%;height:100%;border-radius:0}
.rasc-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rasc-pai{border-left:3px solid var(--line-2);padding:4px 0 4px 10px;display:grid;gap:2px}
.rasc-original{color:var(--ink-3);white-space:normal}
.rasc .linha .sp{flex:1}
@media (max-width:640px){
  .rasc{grid-template-columns:1fr}
  .rasc-img{width:100%;height:160px}
}
.decidido{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:8px 0;
  border-bottom:1px solid var(--line)}
.decidido:last-child{border-bottom:0}

/* ── Publicações da IA: o painel do check ──────────────────────────────────
   Uma imagem por bloco, e o que a IA quer fazer nela em linhas separadas por
   fio, não em cartões soltos: quem confere pensa "o que vai acontecer NESTA
   imagem", e é o bloco que responde. A miniatura é grande de propósito — o
   check é olhar. A marcação vem desenhada por cima, em SVG com as medidas da
   imagem (ver `_publicacoes.php`). */
.topo-ia{white-space:nowrap}
.topo-ia.tem{color:var(--ink);font-weight:650}
.topo-ia-curto{display:none}
@media(max-width:600px){
  .topo-ia-longo,.topo-nome,.topo-integ{display:none}
  .topo-ia-curto{display:inline}
}
.topo-n{display:inline-block;min-width:18px;padding:0 5px;margin-left:3px;border-radius:99px;
  background:var(--brand);color:var(--sobre-brand);font-size:11px;font-weight:700;line-height:18px;
  text-align:center;font-variant-numeric:tabular-nums}

.pub-filtros{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pub-filtros .sp{flex:1}
.pub-filtro{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:13px;
  text-decoration:none;transition:var(--t) var(--e)}
.pub-filtro:hover{border-color:var(--line-3);color:var(--ink)}
.pub-filtro.on{background:var(--ink);border-color:var(--ink);color:var(--sobre-ink);font-weight:600}
.pub-filtro.zero{color:var(--ink-4)}
.pub-filtro .cont{font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums;opacity:.75}
.pub-filtro-proj{display:flex;gap:6px;align-items:center}

.pub-proj-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pub-proj-cab h2 a{color:inherit;text-decoration:none}
.pub-proj-cab h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.pub-proj-cab .sp{flex:1}

.pub-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  padding:6px 20px 4px;margin-top:12px}
.pub-item-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0 12px}
.pub-item-cab .sp{flex:1}
.pub-cod{font-size:15px;letter-spacing:.01em}

.pub{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:start;
  padding:18px 0 20px;border-top:1px solid var(--line)}
.pub-midia{display:grid;gap:8px}
.pub-foto{position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--surface-3);
  line-height:0}
.pub-foto img{display:block;width:100%;height:auto}
.pub-foto .bitem-vazio{display:flex;width:100%;aspect-ratio:16/9;border-radius:0}
/* imagem que ainda não tem render: o quadro diz isso, na mesma proporção */
.pub-sem-render{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  color:var(--ink-4);font-size:12.5px;line-height:1.3;border:1px dashed var(--line-2);border-radius:10px}
.pub-foto-leg{position:absolute;left:8px;bottom:8px;line-height:1.3;padding:3px 8px;border-radius:6px;
  font-size:11.5px;font-weight:650;background:var(--v-1);color:var(--v-ink)}
.pub-antes-depois{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.pub-comparar{color:var(--ink-3)}
.pub-comparar:hover{color:var(--ink)}

/* a marcação: tinta da marca com contorno claro, porque ela fica em cima do
   render — que pode ser claro ou escuro em qualquer um dos temas */
.pub-marca{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pub-m-pino{fill:var(--brand);stroke:var(--v-ink)}
.pub-m-num{fill:var(--v-ink);font-family:var(--fs);font-weight:700}
.pub-m-area{fill:var(--brand);fill-opacity:.16;stroke:var(--brand)}
.pub-m-seta{stroke:var(--brand);stroke-linecap:round}
.pub-m-ponta{fill:var(--brand)}

.pub-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pub-titulo{font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.pub-texto{font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:68ch}
.pub-de-para{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pub-num{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 5px;border-radius:99px;background:var(--brand);color:var(--sobre-brand);font-size:12px;
  font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto}
.pub-resolve{border-left:3px solid var(--ok-200);padding:2px 0 2px 12px}
.pub-resolve ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.pub-resolve li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}

.pub-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pub-acoes .sp{flex:1}
/* à direita mesmo quando a linha quebra: descartar fica longe de aprovar */
.pub-descartar{margin-left:auto}
.pub-descartar summary{list-style:none;cursor:pointer}
.pub-descartar summary::-webkit-details-marker{display:none}
.pub-descartar[open]{flex-basis:100%}
.pub-descartar[open] summary{display:none}
.pub-descartar-caixa{display:grid;gap:6px;padding:12px;border-radius:var(--r2);
  background:var(--danger-50);border:1px solid var(--danger-200)}
.pub-descartar-caixa .btn{justify-self:start}
.pub-varios{display:inline-flex}
.pub-vazio h2{font-size:17px}

@media (max-width:760px){
  .pub-item{padding:4px 14px 2px}
  .pub{grid-template-columns:1fr;gap:12px}
}

/* ── A etapa de produção em Itens: o filtro do topo e a etiqueta do cartão ──
   As MESMAS famílias de cor da Lista (g/b/a/v/r), porque é a mesma célula: a
   imagem em "Render final" tem de ter a mesma cor nas duas telas, ou o olho
   para de confiar na cor — que é o motivo de ela existir. */
.etapa-filtros{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.etapa-filtros .eyebrow{margin-right:4px}
.etapa-f{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:12.5px;
  font-weight:600;text-decoration:none;transition:var(--t) var(--e)}
.etapa-f:hover{border-color:var(--line-3);color:var(--ink)}
.etapa-f .cont{font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums;opacity:.75}
.etapa-f.cor-g{background:var(--surface-3);border-color:transparent}
.etapa-f.cor-b{background:var(--info-50);color:var(--info-forte);border-color:var(--info-200)}
.etapa-f.cor-v{background:var(--ok-50);color:var(--ok-forte);border-color:var(--ok-200)}
.etapa-f.cor-a{background:var(--warn-50);color:var(--warn-forte);border-color:var(--warn-200)}
.etapa-f.cor-r{background:var(--danger-50);color:var(--danger);border-color:var(--danger-200)}
.etapa-f.on{box-shadow:0 0 0 2px var(--ink);border-color:var(--ink)}
.fig-etapa{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.fig-etapa .lst-sel{max-width:100%}

/* ── As cinco cores novas da Lista (A-004, 02/10/2026), nos seletores e nas
   pastilhas — as mesmas três camadas das cores de sempre ── */
.lst-sel.cor-c,.etapa-f.cor-c{background:var(--ciano-50);color:var(--ciano-forte);border-color:var(--ciano-200)}
.lst-sel.cor-p,.etapa-f.cor-p{background:var(--roxo-50);color:var(--roxo-forte);border-color:var(--roxo-200)}
.lst-sel.cor-y,.etapa-f.cor-y{background:var(--amarelo-50);color:var(--amarelo-forte);border-color:var(--amarelo-200)}
.lst-sel.cor-l,.etapa-f.cor-l{background:var(--lima-50);color:var(--lima-forte);border-color:var(--lima-200)}
.lst-sel.cor-k,.etapa-f.cor-k{background:var(--ardosia-50);color:var(--ardosia-forte);border-color:var(--ardosia-200)}
.lst-sel.cor-m,.etapa-f.cor-m{background:var(--rosa-50);color:var(--rosa-forte);border-color:var(--rosa-200)}

/* ── A moldura do cartão de Itens na cor da etapa (A-004): grossa por fora, para
   ler de longe; por dentro uma folga neutra, porque cor encostada no render
   muda a cor que o olho percebe. Vem depois de `.fig:hover`, então passar o
   mouse não apaga a cor. ── */
.fig.moldura{border-width:3px;padding:4px}
.fig.moldura .fig-ph{border-radius:calc(var(--r2) - 7px);overflow:hidden}
.fig.m-g{border-color:var(--moldura-g)} .fig.m-b{border-color:var(--moldura-b)}
.fig.m-c{border-color:var(--moldura-c)} .fig.m-p{border-color:var(--moldura-p)}
.fig.m-y{border-color:var(--moldura-y)} .fig.m-a{border-color:var(--moldura-a)}
.fig.m-l{border-color:var(--moldura-l)} .fig.m-v{border-color:var(--moldura-v)}
.fig.m-r{border-color:var(--moldura-r)} .fig.m-k{border-color:var(--moldura-k)}
.fig.m-m{border-color:var(--moldura-m)}
/* a imagem em "Pausado" (A-009): o que ela espera, debaixo da etapa */
.fig-aguardando{margin:5px 0 0;font-size:12px;line-height:1.35;color:var(--rosa-forte)}
.fig-aguardando b{font-weight:650}

/* ── A conversa da equipe (A-005, 02/10/2026) ──────────────────────────────
   No visualizador: uma aba ao lado dos comentários. As duas metades do painel
   são irmãs, e a classe do painel decide qual aparece — sem embrulhar a lista
   de comentários, que depende de ser filha direta do painel para rolar. As
   cores são as canônicas que `.visu` trava: o visualizador não segue o tema. */
.lado-abas{padding:10px 12px 0}
.lado-abas .seg{display:inline-flex}
.visu-lado:not(.na-equipe) .so-equipe{display:none}
.visu-lado.na-equipe .fio-escolha,.visu-lado.na-equipe #fio,.visu-lado.na-equipe #escrever{display:none}
.com.duvida{border-left:3px solid var(--warn)}
.com.duvida.resolvida{border-left-color:var(--ok)}
.com-tag.aberta{background:var(--warn);color:var(--sobre-warn)}
.com-tag.ok{background:var(--ok);color:var(--sobre-ok)}
.com-quando{margin-left:auto;font-size:10.5px;color:var(--v-ink-3)}
.com-resposta{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--v-1);
  border:1px solid var(--v-line)}
.com-resposta .xs{color:var(--v-ink-3)}
.com-resolver{margin-top:8px}
.com-resolver .inp{background:var(--v-3);border-color:var(--v-4);color:var(--v-ink)}

/* Na tela de Dúvidas: um bloco por imagem, com a miniatura para reconhecer de
   relance, e cada dúvida com o que se decidiu ao resolver. */
.duv-nova summary{cursor:pointer}
.duv-form{display:grid;gap:4px}
.duv-cab{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.duv-mini{width:96px;height:60px;object-fit:cover;border-radius:8px;flex:0 0 96px;background:var(--surface-3)}
.duv-mini.vazia{display:grid;place-items:center;font-size:11px;color:var(--ink-3)}
.duv-cod{font-weight:650}
.duv{padding:12px 14px;border-top:1px solid var(--line)}
.duv-cab + .duv{border-top:0}
.duv-quem{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.duv-txt{margin-top:6px;white-space:normal;line-height:1.5}
.duv.resolvida .duv-txt{color:var(--ink-2)}
.duv-resp{margin-top:8px;padding:9px 12px;border-radius:var(--r1);background:var(--surface-2)}
.duv-cab .btn{margin-left:auto}
.duv-acoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.duv-acoes .btn{margin-left:auto}
/* No cartão de Itens: quantas dúvidas a imagem tem em aberto */
.fig-duvidas{display:inline-flex;margin-top:6px;text-decoration:none}

/* ── A situação do pedido (A-006, 02/10/2026): pílula com bolinha, em cor de
   sinal — a fazer laranja, em execução azul, resolvido verde, não se aplica
   cinza. Redonda de propósito: a etapa de produção é etiqueta quadrada, com as
   cores da Lista, e as duas não se confundem nem quando a cor coincide.
   As cores vão em duas variáveis por situação, e a pílula de ler (`.sit`) e o
   seletor de mudar (`.sitsel`) pegam das mesmas — não há como divergirem. ── */
.sit.pendente,.sit-pendente{--sit-fundo:var(--warn-50);--sit-tinta:var(--warn-forte)}
.sit.execucao,.sit-execucao{--sit-fundo:var(--info-50);--sit-tinta:var(--info-forte)}
.sit.resolvido,.sit-resolvido{--sit-fundo:var(--ok-50);--sit-tinta:var(--ok-forte)}
.sit.nao_aplica,.sit-nao_aplica{--sit-fundo:var(--surface-3);--sit-tinta:var(--ink-2)}
/* No visualizador, que é escuro nos dois temas e trava as cores canônicas:
   pílula cheia, texto claro. */
.visu .sit.pendente,.visu .sit-pendente{--sit-fundo:var(--warn);--sit-tinta:var(--sobre-warn)}
.visu .sit.execucao,.visu .sit-execucao{--sit-fundo:var(--info);--sit-tinta:var(--sobre-info)}
.visu .sit.resolvido,.visu .sit-resolvido{--sit-fundo:var(--ok);--sit-tinta:var(--sobre-ok)}
.visu .sit.nao_aplica,.visu .sit-nao_aplica{--sit-fundo:var(--v-3);--sit-tinta:var(--v-ink-2)}
/* as medidas da `.pill` (a mesma família), com a bolinha em ::before — assim
   o JS e o PHP escrevem só a classe, sem o <i> */
.sit{display:inline-flex;align-items:center;gap:5px;padding:3.5px 10px 3.5px 8px;border-radius:99px;
  font-size:11.5px;font-weight:650;letter-spacing:.005em;white-space:nowrap;
  background:var(--sit-fundo);color:var(--sit-tinta)}
.sit::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.sit.mini{font-size:10px;padding:1.5px 7px 1.5px 6px}
/* O seletor que muda a situação é a mesma pílula: a bolinha e a setinha vão
   desenhadas no fundo, porque <select> não aceita ::before. */
.sitsel{appearance:none;border:1px solid transparent;border-radius:99px;font-weight:620;
  background-color:var(--sit-fundo);color:var(--sit-tinta);
  background-image:radial-gradient(circle,currentColor 3px,transparent 3.5px),
    linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-repeat:no-repeat;background-size:8px 8px,4px 4px,4px 4px;
  background-position:8px 50%,calc(100% - 13px) 50%,calc(100% - 9px) 50%;
  padding-left:22px;padding-right:24px}
.tsel.sitsel:hover:not(:disabled){background-color:var(--sit-fundo);border-color:var(--sit-tinta)}
/* a lista que abre fica neutra: cada opção na cor da situação atual confundia */
.sitsel option{background:var(--surface);color:var(--ink)}
.visu .sitsel option{background:var(--v-1);color:var(--v-ink)}
.com-status.sitsel{padding:2px 19px 2px 17px;background-size:7px 7px,4px 4px,4px 4px;
  background-position:6px 50%,calc(100% - 11px) 50%,calc(100% - 7px) 50%}
@media(max-width:600px){.duv-cab{flex-wrap:wrap}}

.token-form fieldset{border:0;padding:0;margin-inline:0;min-width:0}
.token-form .check{display:flex;align-items:flex-start;line-height:1.45}
.token-projetos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 16px;
  padding-left:24px}
.tr.apagado{opacity:.62}

.reg-api .tr > span:first-child{flex:0 0 150px}
.reg-api .tr > span:nth-child(2){flex:0 0 170px}
.reg-corpo{white-space:pre-wrap;word-break:break-word;font-family:var(--fm);font-size:12px;
  background:var(--surface-2);border-radius:6px;padding:8px 10px;margin-top:4px;max-height:220px;overflow:auto}

/* ── A Agenda (A-007 e A-008, 02/10/2026) ─────────────────────────────────────
   Calendário (semana e mês) e Gantt das MESMAS entradas. A etapa do plano vem na
   cor da etapa — as cores da Lista, as mesmas da moldura do cartão de Itens; a
   tarefa vem em papel, com a borda dizendo de quem é (azul: do cliente; cinza:
   interna). Atrasado em vermelho em qualquer uma; feito, apagado; em andamento,
   com a bolinha. Tudo por CLASSE e por atributo de SVG: a política de conteúdo
   não aceita estilo embutido, e por isso a coluna onde a entrada começa e quantos
   dias ela ocupa são classes finitas (c1–c7, s1–s7). ── */
.ag-barra{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.ag-barra .sp{flex:1}
.ag-nav{display:flex;align-items:center;gap:4px}
.ag-periodo{font-size:14px;font-weight:650;margin-left:6px;font-variant-numeric:tabular-nums}
.ag-filtros{display:flex;gap:6px;flex-wrap:wrap}
.ag-filtros .inp.sm{min-width:150px}
.ag-vazio .lead{max-width:none}

/* calendário: cada semana é uma grade de sete colunas, e a entrada se encaixa
   na primeira linha em que cabe (`dense`) — o empilhamento de um calendário */
.ag-cal{border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:var(--surface)}
.ag-sem + .ag-sem{border-top:1px solid var(--line)}
/* o calendário que se arrasta (04/10/2026): a semana — ou o mês — com os
   vizinhos lado a lado, num trilho que rola de lado e encaixa no período
   inteiro. A altura acompanha o painel à vista (`agenda-cal.js`); sem o
   script, é a do mais alto. Enquanto o mouse arrasta (`panorama`) e enquanto o
   script leva ao período (`indo`), o encaixe se solta — senão ele brigaria com
   o arrasto a cada pixel. */
.ag-carrossel{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:thin}
.ag-carrossel.panorama,.ag-carrossel.indo{scroll-snap-type:none}
.ag-trilho{display:flex;gap:16px;align-items:flex-start}
.ag-painel{flex:0 0 100%;min-width:0;scroll-snap-align:start}
@media (pointer:fine){
  .ag-carrossel{cursor:grab}
  .ag-carrossel .ag-ev{cursor:pointer}
  .ag-carrossel.panorama{cursor:grabbing;user-select:none}
}
.ag-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line);
  background:var(--surface-fraca)}
.ag-dia{padding:6px 8px;display:flex;gap:6px;align-items:baseline;font-size:11.5px;color:var(--ink-3)}
.ag-dia + .ag-dia{border-left:1px solid var(--line)}
.ag-dia.fds{background:var(--surface-2)}
.ag-dia.fora{color:var(--ink-4)}
.ag-dsem{text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:700}
.ag-dnum{font-weight:650;font-variant-numeric:tabular-nums}
.ag-dia.hoje .ag-dnum{background:var(--brand);color:var(--sobre-brand);border-radius:99px;padding:0 7px}
.ag-faixa{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-flow:row dense;
  row-gap:4px;padding:6px 0 10px;min-height:64px;
  background-image:repeating-linear-gradient(to right,transparent 0 calc(100% / 7 - 1px),
    var(--line) calc(100% / 7 - 1px) calc(100% / 7)),
    linear-gradient(to right,transparent calc(500% / 7),var(--surface-2) calc(500% / 7))}
.ag-cal.mes .ag-faixa{min-height:58px}
.ag-col-hoje{position:absolute;top:0;bottom:0;width:calc(100% / 7);background:var(--brand-50);pointer-events:none}
.ag-col-hoje.c1{left:0}
.ag-col-hoje.c2{left:calc(100% / 7)}
.ag-col-hoje.c3{left:calc(200% / 7)}
.ag-col-hoje.c4{left:calc(300% / 7)}
.ag-col-hoje.c5{left:calc(400% / 7)}
.ag-col-hoje.c6{left:calc(500% / 7)}
.ag-col-hoje.c7{left:calc(600% / 7)}
.ag-ev{position:relative;z-index:1;margin:0 4px;min-width:0;
  /* grade de uma coluna, e não flex: a coluna flexível deixava o texto do
     tamanho dele, vazando para fora da caixa em vez de virar reticências */
  display:grid;grid-template-columns:minmax(0,1fr);row-gap:1px;
  padding:4px 7px;border-radius:6px;font-size:11.5px;line-height:1.3;text-decoration:none;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);border-left-width:3px;
  transition:box-shadow var(--t) var(--e)}
.ag-ev:hover{box-shadow:var(--sh-2)}
.ag-ev:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ag-ev-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-ev-t b{font-family:var(--fm);font-size:10.5px;font-weight:700;margin-right:2px}
.ag-ev-q{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-cal.mes .ag-ev{padding:2px 6px;font-size:11px}
.ag-cal.mes .ag-ev-q{display:none}
.ag-ev.antes{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.ag-ev.depois{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.ag-ev.c1{grid-column-start:1}.ag-ev.c2{grid-column-start:2}.ag-ev.c3{grid-column-start:3}
.ag-ev.c4{grid-column-start:4}.ag-ev.c5{grid-column-start:5}.ag-ev.c6{grid-column-start:6}
.ag-ev.c7{grid-column-start:7}
.ag-ev.s1{grid-column-end:span 1}.ag-ev.s2{grid-column-end:span 2}.ag-ev.s3{grid-column-end:span 3}
.ag-ev.s4{grid-column-end:span 4}.ag-ev.s5{grid-column-end:span 5}.ag-ev.s6{grid-column-end:span 6}
.ag-ev.s7{grid-column-end:span 7}
/* de quem é a tarefa; a etapa, na cor dela */
.ag-ev.tarefa.cliente{border-left-color:var(--info)}
.ag-ev.tarefa.interna{border-left-color:var(--ink-4)}
.ag-ev.etapa.cor-g{background:var(--surface-3);border-color:var(--line-2);border-left-color:var(--moldura-g)}
.ag-ev.etapa.cor-b{background:var(--info-50);border-color:var(--info-200);border-left-color:var(--moldura-b)}
.ag-ev.etapa.cor-v{background:var(--ok-50);border-color:var(--ok-200);border-left-color:var(--moldura-v)}
.ag-ev.etapa.cor-a{background:var(--warn-50);border-color:var(--warn-200);border-left-color:var(--moldura-a)}
.ag-ev.etapa.cor-r{background:var(--danger-50);border-color:var(--danger-200);border-left-color:var(--moldura-r)}
.ag-ev.etapa.cor-c{background:var(--ciano-50);border-color:var(--ciano-200);border-left-color:var(--moldura-c)}
.ag-ev.etapa.cor-p{background:var(--roxo-50);border-color:var(--roxo-200);border-left-color:var(--moldura-p)}
.ag-ev.etapa.cor-y{background:var(--amarelo-50);border-color:var(--amarelo-200);border-left-color:var(--moldura-y)}
.ag-ev.etapa.cor-l{background:var(--lima-50);border-color:var(--lima-200);border-left-color:var(--moldura-l)}
.ag-ev.etapa.cor-k{background:var(--ardosia-50);border-color:var(--ardosia-200);border-left-color:var(--moldura-k)}
.ag-ev.etapa.cor-m{background:var(--rosa-50);border-color:var(--rosa-200);border-left-color:var(--moldura-m)}
/* em que pé está: a bolinha antes do nome (azul em andamento, vermelha
   atrasada), o contorno vermelho do atrasado, e o feito apagado e riscado */
.ag-ev.andamento .ag-ev-t::before,.ag-ev.atrasado .ag-ev-t::before{content:"";display:inline-block;
  width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:1px;background:var(--info)}
.ag-ev.atrasado .ag-ev-t::before{background:var(--danger)}
.ag-ev.atrasado{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.ag-ev.feito,.ag-ev.cancelado{opacity:.55}
/* pausada (A-009): a imagem parou esperando o arquiteto — nem atrasada, nem
   andando. Tracejado no rosa da etapa Pausado, com um quadradinho no lugar da
   bolinha. */
.ag-ev.pausado{border-style:dashed;border-color:var(--moldura-m)}
.ag-ev.pausado .ag-ev-t::before{content:"";display:inline-block;width:6px;height:6px;border-radius:1px;
  margin-right:5px;vertical-align:1px;background:var(--moldura-m)}
.ag-ev.feito .ag-ev-t,.ag-ev.cancelado .ag-ev-t{text-decoration:line-through;text-decoration-color:var(--ink-4)}

/* Gantt: uma linha por entrada, o nome à esquerda e a barra à direita, em
   porcentagem da largura — a mesma conta de `Agenda::noGantt` */
.ag-gantt-op{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.agg-op-escala{margin-left:14px}
/* A janela é bem maior que a tela (A-010, 03/10/2026): cada dia tem largura
   fixa e a linha do tempo rola de lado — arrastando o fundo, com o trackpad ou
   com Shift + roda. As larguras são as de `Agenda::ESCALAS_GANTT` (112 dias em
   dias, 252 em semanas); `testes/agenda.php` confere que batem. A borda da
   rolagem não vira "voltar página" no trackpad (`overscroll-behavior`). */
.agg-moldura{position:relative}
.agg-rola{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r3);background:var(--surface);
  overscroll-behavior-x:contain;scroll-padding:44px 0 0 230px}
.agg{position:relative}
.agg.dias{width:calc(230px + 112 * 32px)}
.agg.semanas{width:calc(230px + 252 * 8px)}
.agg-r{position:relative;z-index:1;display:grid;grid-template-columns:230px minmax(0,1fr);align-items:center;
  border-top:1px solid var(--line)}
.agg-cab{border-top:0;background:var(--surface-fraca)}
.agg-g{background:var(--surface-2)}
/* o Gantt sem nada na janela: o recado fica à vista enquanto a linha do tempo rola */
.agg-vazio-t{position:sticky;left:242px;padding:10px 0;width:max-content;max-width:calc(100vw - 300px);color:var(--ink-3)}
/* o atalho "‹ hoje" fica por cima do começo do recado: o recado abre espaço */
.agg.hoje-esq .agg-vazio-t{padding-left:74px}
/* em semanas o dia tem 8px: listrar cada fim de semana vira zebra */
.agg.semanas .agg-fds{fill:none}
.agg-g .agg-l{flex-direction:row;align-items:baseline;gap:7px;justify-content:flex-start;font-size:13px}
/* o nome fica preso à esquerda quando o Gantt rola de lado (o celular): sem
   isso, rolando até hoje, as barras ficavam sem dizer de quem eram */
.agg-l{padding:5px 12px;min-width:0;font-size:12px;border-right:1px solid var(--line);align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;color:var(--ink-3);
  position:sticky;left:0;z-index:2;background:var(--surface)}
.agg-cab .agg-l{background:var(--surface-fraca)}
.agg-g .agg-l{background:var(--surface-2)}
.agg-cab .agg-l{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:750;color:var(--ink-4)}
.agg-nm{font-family:var(--fm);font-size:11.5px;font-weight:650;color:var(--ink);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agg-nm:hover{text-decoration:underline}
.agg-sub{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agg-tp{font-weight:620;color:var(--ink-2)}
.agg-tp.atrasado{color:var(--danger)}
.agg-fundo{position:absolute;top:0;bottom:0;left:230px;right:0;z-index:0;pointer-events:none}
.agg-fundo svg{display:block}
.agg-fds{fill:var(--surface-2)}
.agg-hoje{fill:var(--brand-50)}
.agg-t{display:block;overflow:visible}
.agg-seg{stroke:var(--line-2);stroke-width:1}
.agg-mo{font-size:10.5px;font-weight:650;fill:var(--ink-3)}
.agg-dn{font-size:9.5px;fill:var(--ink-4);font-variant-numeric:tabular-nums}
.agg-dn.hoje{fill:var(--brand);font-weight:750}
.agg-agora{stroke:var(--brand);stroke-width:1.5}
.agg-b{fill:var(--surface-3);stroke:var(--line-3);stroke-width:1}
.agg-b.tarefa.cliente{fill:var(--info-50);stroke:var(--info)}
.agg-b.tarefa.interna{fill:var(--surface-3);stroke:var(--ink-4)}
.agg-b.etapa{stroke:none}
.agg-b.etapa.cor-g{fill:var(--moldura-g)}.agg-b.etapa.cor-b{fill:var(--moldura-b)}
.agg-b.etapa.cor-v{fill:var(--moldura-v)}.agg-b.etapa.cor-a{fill:var(--moldura-a)}
.agg-b.etapa.cor-r{fill:var(--moldura-r)}.agg-b.etapa.cor-c{fill:var(--moldura-c)}
.agg-b.etapa.cor-p{fill:var(--moldura-p)}.agg-b.etapa.cor-y{fill:var(--moldura-y)}
.agg-b.etapa.cor-l{fill:var(--moldura-l)}.agg-b.etapa.cor-k{fill:var(--moldura-k)}
.agg-b.etapa.cor-m{fill:var(--moldura-m)}
/* o estado vence o tipo: `.agg-t` na frente dá a mesma força da regra de tipo
   (`.agg-b.tarefa.interna`), e vir depois desempata — sem isso a tarefa interna
   atrasada ficava com o contorno cinza do tipo, e não com o vermelho */
.agg-t .agg-b.andamento{stroke:var(--info);stroke-width:2}
.agg-t .agg-b.atrasado{stroke:var(--danger);stroke-width:2.5}
.agg-t .agg-b.feito,.agg-t .agg-b.cancelado{opacity:.4}
.agg-t .agg-b.pausado{stroke:var(--moldura-m);stroke-width:2;stroke-dasharray:4 3;fill-opacity:.5}
.agg-tp.pausado{color:var(--rosa-forte)}
.agg-a{outline:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.agg-a:focus-visible .agg-b{stroke:var(--brand);stroke-width:3}
/* o fundo se arrasta (a mãozinha); a barra que muda de data, a cruz */
@media (pointer:fine){
  .agg-rola{cursor:grab}
  .agg-rola .agg-l{cursor:auto}
  .agg-rola.panorama{cursor:grabbing;user-select:none}
}
.agg-a.pode{cursor:move}
.agg-a.pode.borda{cursor:ew-resize}
.agg-a.arrastando{cursor:grabbing}
.agg-a.arrastando .agg-b{opacity:.85;stroke:var(--brand);stroke-width:2}
/* no toque: segurou a barra, ela "levanta" — dali em diante o dedo a arrasta */
.agg-a.erguida .agg-b{stroke:var(--brand);stroke-width:2.5}
/* onde a barra vai encaixar quando soltar — o dia inteiro */
.agg-sombra{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-dasharray:3 2;pointer-events:none}
/* a data durante o arraste, em cima da barra (posição pelo script, via CSSOM) */
.agg-bolha{position:fixed;left:0;top:0;z-index:70;pointer-events:none;background:var(--ink);color:var(--sobre-ink);
  font-size:12px;font-weight:650;padding:5px 9px;border-radius:7px;white-space:nowrap;box-shadow:var(--sh-2);
  font-variant-numeric:tabular-nums}
.agg-bolha[hidden]{display:none}
/* hoje saiu da tela: o atalho de volta, na borda de onde ele ficou */
.agg-ir-hoje{position:absolute;top:44px;z-index:5;border:1px solid var(--brand);background:var(--surface);
  color:var(--brand);font:inherit;font-size:12px;font-weight:750;padding:3px 11px;border-radius:999px;
  cursor:pointer;box-shadow:var(--sh-1)}
.agg-ir-hoje[hidden]{display:none}
.agg-ir-hoje.esq{left:238px}
.agg-ir-hoje.dir{right:10px}
.agg-ir-hoje:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* na tela larga, o Gantt rola dentro dele mesmo: as datas ficam presas em
   cima e a barra de rolagem de lado fica sempre à vista */
@media (min-width:641px){
  .agg-rola{max-height:calc(100vh - 120px);overflow:auto}
  .agg-cab{position:sticky;top:0;z-index:3}
}
.ag-dica{max-width:90ch}

/* o aviso de "salvo — desfazer", embaixo, no meio */
.ag-aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex;gap:12px;
  align-items:center;background:var(--ink);color:var(--sobre-ink);padding:9px 10px 9px 16px;border-radius:12px;
  box-shadow:var(--sh-2);font-size:13.5px;max-width:calc(100vw - 32px)}
.ag-aviso[hidden]{display:none}
.ag-aviso .btn{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.ag-aviso .btn[hidden]{display:none}

.ag-legenda{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:11.5px;color:var(--ink-3)}
.ag-lg{display:inline-flex;align-items:center;gap:6px}
.ag-lg::before{content:"";width:22px;height:11px;border-radius:3px;background:var(--surface-2);
  border:1px solid var(--line-2);border-left-width:3px}
.ag-lg.etapa.cor-c::before{background:var(--ciano-50);border-color:var(--ciano-200);border-left-color:var(--moldura-c)}
.ag-lg.tarefa.cliente::before{border-left-color:var(--info)}
.ag-lg.tarefa.interna::before{border-left-color:var(--ink-4)}
.ag-lg.andamento::before{border-color:var(--info);border-width:2px}
.ag-lg.atrasado::before{border-color:var(--danger);border-width:2px}
.ag-lg.feito::before{opacity:.45}
.ag-lg.pausado::before{border-style:dashed;border-color:var(--moldura-m);border-width:2px}

/* pôr etapa no plano */
.ag-plano h2{font-size:16px}
.ag-plano-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end}
.ag-plano-f .rot{margin:0}
.ag-plano-f .inp{margin-top:5px}
.ag-plano-f .btn{justify-self:start}
.ag-voce{display:block;margin-top:5px;padding:10px 0;font-size:14px;font-weight:600;color:var(--ink)}

/* a página da entrada */
.ag-ficha{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 18px;font-size:14px;margin:0}
.ag-ficha dt{color:var(--ink-3);font-size:12.5px;font-weight:640;padding-top:2px}
.ag-ficha dd{margin:0;min-width:0}
.ag-texto{white-space:pre-wrap}
.ag-estado{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:99px;
  font-size:11.5px;font-weight:650;background:var(--surface-3);color:var(--ink-2)}
.ag-estado.atrasado{background:var(--danger-50);color:var(--danger)}
.ag-estado.andamento{background:var(--info-50);color:var(--info-forte)}
.ag-estado.feito{background:var(--ok-50);color:var(--ok-forte)}
.ag-estado.a_fazer{background:var(--warn-50);color:var(--warn-forte)}
.ag-estado.pausado{background:var(--rosa-50);color:var(--rosa-forte)}
.ag-datas-f{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.ag-datas-f .rot{margin:0}
.ag-datas-f .inp{margin-top:5px;width:auto}

/* na aba Tarefas: as datas da tarefa, e o formulário dela */
.ag-quando{display:inline-flex;padding:1px 7px;border-radius:99px;background:var(--surface-3);color:var(--ink-2);
  font-weight:650;text-decoration:none;font-variant-numeric:tabular-nums}
.ag-quando:hover{text-decoration:underline}
.ag-quando.atrasado{background:var(--danger-50);color:var(--danger)}
.tdatas summary{cursor:pointer;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;
  list-style:none}
.tdatas summary::-webkit-details-marker{display:none}
.tdatas[open]{flex:1 0 100%}
.tdatas-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.tdatas-f label{display:inline-flex;gap:5px;align-items:center;color:var(--ink-3)}
.tdatas-novo{display:flex;gap:14px;flex-wrap:wrap}
.tdatas-novo .rot{margin:0}
.tdatas-novo .inp{display:block;margin-top:5px}

/* A janela da entrada, por cima da Agenda (04/10/2026): a imagem com a moldura
   na cor da etapa — o cartão de Itens em ponto pequeno — e, ao lado, o que se
   muda nela. O véu é preto sem tinta: atrás dele pode haver render. */
.ag-jan{width:min(900px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;
  border:1px solid var(--line);border-radius:var(--r3);background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-3);overflow:auto;overscroll-behavior:contain}
.ag-jan::backdrop{background:rgba(0,0,0,.5)}
.ag-jan-aberta{overflow:hidden}
.ag-jan-c{padding:18px 20px 16px}
.ag-jan-cab{display:flex;align-items:flex-start;gap:12px}
.ag-jan-tt{flex:1;min-width:0}
.ag-jan-titulo{margin:4px 0 0;font-size:19px;font-family:var(--fm);letter-spacing:-.01em;overflow-wrap:anywhere}
.ag-jan-sub{margin:6px 0 0;font-size:14px;color:var(--ink-2)}
.ag-jan-sub .ag-estado{vertical-align:1px}
.ag-jan-x{flex:0 0 auto;width:40px;height:40px;padding:0;justify-content:center;font-size:24px;line-height:1;
  color:var(--ink-3)}
.ag-jan-corpo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:22px;margin-top:16px;
  align-items:start}
.ag-jan-fig:hover{transform:none;box-shadow:none}
.ag-jan-fig .fig-ph{aspect-ratio:auto;min-height:120px}
.ag-jan-fig .fig-ph img{height:auto;max-height:64vh;object-fit:contain}
.ag-jan-fig .fig-ph.vazia{aspect-ratio:16/10}
.ag-jan-fig .fig-bd{display:grid;gap:4px}
.ag-jan-fig .fig-etapa{margin:0}
.ag-jan-lado{display:grid;gap:14px;min-width:0}
.ag-jan-lado .ag-ficha{grid-template-columns:max-content minmax(0,1fr)}
.ag-jan-lado .ag-ficha dd + dt{margin-top:0}
.ag-jan-texto{margin:0;white-space:pre-wrap;font-size:14px;max-height:9.5em;overflow:auto;padding:10px 12px;
  border-radius:var(--r1);background:var(--surface-2)}
.ag-jan-bloco{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.ag-jan-bloco .rot{margin:0}
.ag-jan-bloco > .btn{justify-self:start}
/* minmax(0, …) e min-width:0: o campo de data tem largura própria, e sem isso
   as duas colunas não encolhem — no celular a caixa passava da tela */
.ag-jan-datas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ag-jan-datas .inp{margin-top:5px;min-width:0}
.ag-jan-linha{display:flex;gap:8px;align-items:center}
.ag-jan-linha .inp{flex:1;min-width:0}
.ag-jan-tirar{margin:0}
.ag-jan-pe{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.ag-jan-msg{display:grid;gap:12px;justify-items:start;padding:26px 22px;color:var(--ink-3)}
.ag-jan-msg p{margin:0}
.ag-jan-c:focus{outline:none}
/* Salvou pela janela: a Agenda reabre onde a pessoa estava, e o recado do topo
   ficaria fora da vista — ele flutua embaixo, como o "salvo — desfazer". */
.recado.flutua{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;margin:0;
  max-width:calc(100vw - 32px);box-shadow:var(--sh-2)}
.recado[hidden]{display:none}
@media (max-width:760px){
  .ag-jan-corpo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ag-jan{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
  .ag-jan-c{padding:14px 14px 12px}
  .ag-jan-fig .fig-ph img{max-height:46vh}
}

@media (max-width:640px){
  .ag-cal{overflow-x:auto}
  .ag-sem{min-width:620px}
  /* no celular, a semana continua com a largura de ler (620px) e o dedo anda
     de dia em dia; o mês cabe na tela e anda de mês em mês */
  .ag-carrossel .ag-cal{overflow:hidden}
  .ag-carrossel .ag-sem{min-width:0}
  .ag-carrossel[data-ver="semana"] .ag-trilho{gap:8px}
  .ag-carrossel[data-ver="semana"] .ag-painel{flex-basis:620px;scroll-snap-align:none}
  .ag-carrossel[data-ver="semana"] .ag-dia{scroll-snap-align:start}
  /* o mês na largura do celular: o nome do dia em cima do número, senão o
     domingo não cabe e sai cortado na borda */
  .ag-carrossel[data-ver="mes"] .ag-dia{flex-direction:column;align-items:flex-start;gap:0;padding:4px 5px}
  .agg-r{grid-template-columns:150px minmax(0,1fr)}
  .agg-fundo{left:150px}
  .agg.dias{width:calc(150px + 112 * 28px)}
  .agg.semanas{width:calc(150px + 252 * 7px)}
  .agg-ir-hoje.esq{left:158px}
  .agg-vazio-t{left:160px;max-width:calc(100vw - 190px);white-space:normal}
  .agg-rola{scroll-padding-left:150px}
  .ag-ficha{grid-template-columns:1fr;gap:4px}
  .ag-ficha dd + dt{margin-top:10px}
}