/* =========================================================================
   SiteFlow — tema escuro
   ========================================================================= */

:root {
  /* ⚠️ O VERMELHO É SUAVE. O #db0001 puro (o vermelho da marca) ficava forte
     demais numa tela cheia de botões — palavras dele em 14/08: "muda o tom de
     vermelho dos botões do site, tá um vermelho muito muito muito forte, até
     feio". Este aqui é o mesmo vermelho com menos saturação e um pouco mais
     escuro: continua sendo V4, sem queimar a vista.
     A LOGO não é afetada — ela é uma imagem, e lá o vermelho puro fica. */
  --accent: #c9403c;
  --accent-ink: #ffffff;
  --accent-tint: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 34%, transparent);

  /* ⚠️ SELECIONADO NÃO É VERMELHO — EM LUGAR NENHUM.

     O Pedro pediu três vezes, e na terceira foi geral: "tira o vermelho de
     todos os lugares selecionado e deixa cinza ou cor mais clara". Item da
     barra, chip de cliente, projeto, linha de menu, aba — tudo usa estes três
     tokens. Se aparecer um "selecionado" vermelho novo, é engano: troque por
     --sel/--sel-line/--sel-ink.

     O vermelho fica onde é AÇÃO ou INDICAÇÃO: botão primário, a barrinha da
     página aberta, o alvo do arrasto e os avisos. */
  --sel: rgba(255, 255, 255, .13);
  --sel-line: rgba(255, 255, 255, .20);
  --sel-forte: rgba(255, 255, 255, .18);
  --sel-ink: #ffffff;

  --bg: #08090c;
  --surface: #0e1015;
  --surface-2: #14171e;
  --surface-3: #1b1f28;
  --line: #23262f;
  --line-soft: #191c23;

  --ink: #eceef4;
  --ink-2: #9aa2b3;
  --ink-3: #626a7a;

  --danger: #ff5a52;

  /* ═══════ AS TRÊS SUPERFÍCIES (19/08, prompt 2 — §AW) ═════════════════════

     Diagnóstico dele, e ele estava certo: "ta tudo da msm cor, tudo na msm aba
     ali colado no outro ta confuso dms... so pq tem um titulo pequeno ali
     'pessoas q podem entrar' vc espera q eu ja entenda o sistema? o maior guia
     nao é colocar texto em tudo mas sim deixar visualmente facil de ver e
     entender as coisas".

     ⚠️ TRÊS NÍVEIS, E OS TRÊS TÊM DE SER DISTINGUÍVEIS NA TELA. Não é decoração:
     é o que responde "onde uma coisa acaba e a outra começa" sem ler uma palavra.

         --sup-0   o FUNDO da tela
         --sup-1   o CARTÃO que agrupa uma seção
         --sup-2   a LINHA/item dentro do cartão

     ⚠️ E ELES NÃO SÃO OS `--surface*` ANTIGOS. Os antigos foram nascendo soltos ao
     longo de um mês e hoje há telas usando `--surface-2` como fundo e outras como
     cartão — o que é exatamente a queixa dele. Estes três são a escada nova, e
     toda tela nova usa SÓ eles. Os antigos ficam porque metade do arquivo os usa;
     não misture os dois numa tela.

     ⚠️ O TESTE MEDE ISTO (`teste-desenho.js`): ele lê o `background-color`
     computado do fundo, do cartão e do item, e exige TRÊS VALORES DIFERENTES. Se
     alguém "simplificar" dois deles para o mesmo tom, o teste reprova — porque a
     tela volta a ser o paredão de que ele reclamou. */
  --sup-0: #0b0c10;
  --sup-1: #14161c;
  --sup-2: #1b1e26;
  /* ⚠️ NUNCA BRANCO. É a regra mais repetida dele ("nunca borda branca, em lugar
     nenhum") — este fio é cinza-azulado e some no fundo escuro. */
  --linha: #262a33;
  --sombra: 0 8px 24px -12px rgba(0, 0, 0, .65);

  /* ⚠️ OS ESPAÇOS SÃO UMA ESCADA, e não valores soltos: 8 · 12 · 16 · 24 · 32.
     Valor solto é como duas seções ficam com 18px de um lado e 22px do outro, e a
     tela parece torta sem ninguém saber por quê. */
  --e-1: 8px;
  --e-2: 12px;
  --e-3: 16px;
  --e-4: 24px;
  --e-5: 32px;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .65);


  /* A BARRA LATERAL, ESTILO FINDER.
     ⚠️ Saíram --rail (80px), --barra-aberta (262) e --painel-w (300): eram as
     medidas do menu que abria com o mouse, e o Pedro tirou o hover em 17/08.
     Sobrou UMA medida — a largura da coluna, que o próprio Pedro arrasta. */
  --barra-w: 262px;

  /* As duas curvas: abrir com um leve exagero passa sensação de resposta;
     fechar com exagero parece defeito. Continuam valendo nos modais e nos
     abre-e-fecha da árvore de páginas. */
  --ease-abrir: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-fechar: cubic-bezier(0.4, 0, 0.2, 1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ⚠️ AS TRÊS @keyframes DO MENU ANIMADO (sbIconPop, sbPopIn, sbLogoPop) E A DO
   TERCEIRO PAINEL (spIn) FORAM EMBORA em 17/08.

   Elas vinham copiadas da referência (base-visual/src/index.css 137–176) e
   existiam para o momento em que a barra ABRIA com o mouse: o ícone dava um
   pulinho, o rótulo entrava escalonado a cada 25ms, a logo trocava com um
   cross-fade. Sem hover não existe esse momento — a coluna está sempre aberta,
   e animar o que não se move era o enfeite que sobrou. */

* { box-sizing: border-box; }

/* Classes abaixo definem `display`, o que sobrescreveria o atributo `hidden`.
   Esta linha garante que `hidden` sempre esconda. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent-glow); }

/* Barra de rolagem: fina, escura e com trilho OPACO.

   O trilho transparente era o problema antigo: por baixo dele aparecia o
   conteudo da pagina (que costuma ser vermelho), e virava uma faixa vermelha
   colada na barra. Agora o trilho tem cor propria e nada vaza por tras. */
* {
  scrollbar-width: thin;
  scrollbar-color: #3b404b var(--surface);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--surface); border-radius: 8px; }
*::-webkit-scrollbar-thumb {
  background: #3b404b;
  border: 3px solid var(--surface);
  background-clip: padding-box;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: #4d5361; background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: var(--surface); }

/* Acabou o conteudo, acabou a rolagem: sem efeito elastico e sem mostrar o
   fundo da pagina quando a pessoa insiste em rolar para baixo.

   ATENCAO: `overscroll-behavior: contain` SO pode entrar em painel que sempre
   tem conteudo demais. Num painel que as vezes cabe inteiro, o `contain`
   IMPEDE a rolagem de passar para o painel de fora — e o mouse simplesmente
   para de funcionar em cima dele. Foi exatamente esse o bug que quebrou a
   rolagem do gerenciador. Na duvida, nao coloque. */
html, body { overscroll-behavior: none; }
.modal-body { overscroll-behavior-y: contain; }

/* ============================================================== primitivos */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .06s;
}
.btn:hover { background: var(--surface-3); border-color: #2e333f; }
.btn:active { transform: translateY(1px); }

/* ⚠️ BOTÃO DESLIGADO TEM DE PARECER DESLIGADO (18/08, FASE 3).

   O `.btn` genérico não tinha estado `:disabled` — só os botões do Finder tinham.
   Resultado: o "Criar" da janela de nova pasta ficava vermelho cheio, com
   aparência de clicável, e não fazia nada. Quem viu foi o PRINT do teste, com
   todas as asserções verdes (o `isDisabled()` era true; o que estava errado era
   só o que o olho vê). É a lição da §Y2, terceira vez.

   E o cursor volta ao padrão: mãozinha em cima de botão que não clica é promessa
   falsa. O aviso do lado ("escolha um template acima") diz o porquê — botão
   cinza sem explicação parece defeito, e ele repara nisso. */
.btn:disabled,
.btn[disabled] {
  opacity: .42;
  cursor: default;
  box-shadow: none;
  filter: saturate(.65);
}
.btn:disabled:hover,
.btn[disabled]:hover {
  background: var(--surface-2);
  border-color: var(--line);
}
.btn-primary:disabled:hover,
.btn-primary[disabled]:hover { background: var(--accent); border-color: transparent; }
.btn:disabled:active,
.btn[disabled]:active { transform: none; }

.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 4px 18px var(--accent-glow);
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, white); border-color: transparent; }

.btn-danger { background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)); border-color: color-mix(in srgb, var(--danger) 34%, transparent); color: #ff8b84; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 22%, var(--surface-2)); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn.sm { width: 26px; height: 26px; font-size: 14px; border-radius: 7px; }

/* Só a bolinha das iniciais: sem texto, nada para estourar a barra. */

.grow { flex: 1; }

.input, .textarea, .select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }

/* Lista suspensa no tema escuro (o padrão do navegador vem branco). */
select.input {
  appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 47%, calc(100% - 11px) 47%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.input option { background: var(--surface-2); color: var(--ink); }
.input:focus, .textarea:focus, .select:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.textarea {
  min-height: 260px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
  tab-size: 2;
}

.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
}
.field > .hint, .hint { margin: 7px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.55; font-weight: 400; }

.row { display: flex; gap: 12px; align-items: flex-end; }
.row > * { flex: 1; min-width: 0; }
.row.tight { gap: 8px; }

.switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  position: relative;
  width: 40px; height: 23px;
  flex: none;
  border-radius: 999px;
  background: #2b3040;
  transition: background .18s;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch .label { font-size: 13.5px; font-weight: 550; }

.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; }
.seg button {
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.divider { height: 1px; margin: 22px 0; background: var(--line-soft); border: 0; }

.section-title {
  margin: 0 0 14px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ============================================================ gate de perfil */

.gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -5%, var(--accent-tint), transparent 70%),
    var(--bg);
}
.gate-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 32px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.gate-logo { min-height: 4px; margin-bottom: 22px; }
.gate-logo img { max-width: 190px; max-height: 52px; object-fit: contain; }
.gate-card h1 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.gate-sub { margin: 0 0 24px; color: var(--ink-2); font-size: 13.5px; }

.profile-list { display: grid; gap: 8px; margin-bottom: 20px; }
.profile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .06s;
}
.profile-item:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--surface-3); }
.profile-item:active { transform: translateY(1px); }
.profile-item .av {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.profile-item .nm { flex: 1; font-size: 14px; font-weight: 600; }
.profile-item .rm { opacity: 0; color: var(--ink-3); font-size: 13px; transition: opacity .15s; }
.profile-item:hover .rm { opacity: 1; }
.profile-item .rm:hover { color: var(--danger); }

.gate-form { display: flex; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.gate-form .input { flex: 1; min-width: 0; }
.gate-form .btn { flex: none; }

/* ==================================================================== shell */

.app { display: flex; flex-direction: column; height: 100dvh; }
.body { display: flex; flex: 1; min-height: 0; }

/* marca ------------------------------------------------------------------ */


/* seletor de cliente ----------------------------------------------------- */



/* ou em cima, ou na esquerda — nunca os dois */



/* =========================================================================
   A BARRA LATERAL, ESTILO FINDER
   =========================================================================

   ⚠️ ISTO SUBSTITUIU O BLOCO "layout VERTICAL — A BARRA LATERAL ANIMADA".

   O que havia aqui eram as medidas milimetradas do MENU-LATERAL-ANIMADO.md: o
   rail de 80px, a barra de 262 que abria POR CIMA com o mouse, a pílula que
   viajava de 46×40 para 238×58, o ícone com Y fixo em top:18 para não pular, as
   três @keyframes escalonadas e os dois painéis flutuantes em cascata.

   Tudo isso saiu em 17/08, junto com o hover que o justificava. Palavras do
   Pedro: "eu n quero mais funçao de passar o mouse em cima, a gente pode
   alterar e fazer d outro jeito totalmente diferente" — e as referências que
   ele mandou foram a barra do FINDER, a dos AJUSTES DO MAC e a do RAILWAY.

   O DESENHO AGORA:

     • Uma COLUNA de largura --barra-w (padrão 262, arrastável de 190 a 420).
     • Ela é coluna de GRADE, não `fixed`: o conteúdo mora ao lado, e ninguém
       precisa de espaçador invisível para reservar espaço.
     • GRUPOS com título em maiúsculas pequenas (Templates / Páginas / Geral /
       Tela) — o "Favorites / Locations / Tags" do Finder.
     • Item selecionado = uma pílula preenchida de canto arredondado. Cinza, não
       vermelha: regra antiga do Pedro ("tira o vermelho de todos os lugares
       selecionado"), e é também o que o Railway faz.
     • A foto do perfil no PÉ da coluna, com o nome ao lado e os três pontinhos
       — o rodapé do Railway.
     • Zero animação de entrada. A coluna está sempre lá; animar o que não se
       move é o tipo de enfeite que ele chama de "tremendo".
   ========================================================================= */

/* A grade: barra à esquerda, conteúdo à direita. É ela que substitui o
   espaçador invisível de antes. */
.body {
  display: grid;
  grid-template-columns: var(--barra-w, 262px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* ⚠️ A BARRA É MAIS CLARA QUE O CONTEÚDO, e isso é o truque todo.

   Reclamação do Pedro em 17/08: "ta mt ruim de ver pq ta tudo da msm cor, sem
   fundo, ta horrivel, olha como é no finder, tem profundade, vc consegue
   perceber onde termina um botao e começa outro".

   Ele está certo, e a causa era simples: a barra era #0a0b0e e o conteúdo
   #08090c — dois pretos a dois pontos de distância. Na prática, uma chapa só.

   O Finder resolve com DUAS coisas, e as duas entraram aqui:
     1. a barra é MAIS CLARA que o conteúdo (lá é translúcida sobre o desktop)
     2. cada grupo é um BLOCO com fundo próprio, separado por um fio

   Agora são três camadas de verdade: conteúdo #07080b, barra #12151b, blocos
   #191d25. Dá para ver onde uma coisa acaba e a outra começa. */
.sidebar {
  position: relative;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding-top: 10px;
  background: #12151b;
  border-right: 1px solid #262b34;
  /* a sombra para dentro do conteúdo: separa as duas colunas mesmo em tela
     ruim, e é o que dá a sensação de a barra estar "na frente" */
  box-shadow: 1px 0 0 rgba(0, 0, 0, .5), 6px 0 18px -8px rgba(0, 0, 0, .55);
}

/* ---- a logo, no topo ---- */

/* a linha do topo: a logo à esquerda, Publicar e Ajustes à direita */
.sb-topo { display: flex; align-items: center; gap: 4px; flex: none; margin: 0 8px 12px; }
.sb-topo .sb-logo { flex: 1; min-width: 0; margin: 0; }
.sb-topo-acoes { display: flex; align-items: center; gap: 2px; flex: none; }
.sb-topo-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sb-topo-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sb-topo-btn.on { background: #2b313d; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
/* ⚠️ ACESO É DISCRETO, e de propósito. Ele era um quadrado vermelho com uma
   bolinha vermelha em cima — "so ficou feio o botao ser vermelho assim" (17/08).
   Agora o botão fica cinza como os outros e só o CONTADOR é vermelho, pequeno,
   no canto. Chama atenção sem virar um bloco de cor na barra. */
.sb-topo-btn.aceso { color: #fff; }
.sb-topo-marca {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 13px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
  box-shadow: 0 0 0 2px #12151b;
}

.sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin: 0 10px 12px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .14s;
}
.sb-logo:hover { background: rgba(255, 255, 255, .05); }
/* ⚠️ A LOGO: A ALTURA MANDA, A LARGURA ACOMPANHA. E aqui houve um erro meu que
   só apareceu no site de verdade — vale ler.

   Ele reclamou "a logo ta pequena". Eram 34x34; eu troquei por 46x46 e achei
   resolvido. NÃO ESTAVA. A logo dele é um LOGOTIPO DEITADO, de 4331x1519 —
   proporção de quase 3:1. Numa caixa QUADRADA de 46x46 com `object-fit: contain`,
   ela é limitada pela LARGURA e renderiza 46x16. Ou seja: eu aumentei a caixa
   nas duas direções e a logo continuou com 16px de altura, praticamente do
   tamanho que ele reclamou.

   Medido no navegador dele, no site publicado: 46x16 antes, 120x42 depois.

   O conserto é fixar a ALTURA e deixar a largura livre. Assim funciona para os
   dois formatos: um logotipo deitado ocupa a linha, um símbolo quadrado fica
   42x42. `max-width: 100%` com `flex: 0 1 auto` deixa ela encolher numa coluna
   estreita em vez de empurrar o que está do lado — nada cortado, regra do Pedro.

   LIÇÃO: em logo que vem do banco (pode ser quadrada, deitada ou em pé), caixa
   quadrada com `contain` é armadilha. Uma das duas medidas tem de ser livre. */
.sb-logo-img {
  width: auto;
  height: 42px;
  max-width: 100%;
  flex: 0 1 auto;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
}
.sb-logo-txt {
  min-width: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.01em;
  /* nada cortado: nome comprido ganha "…" */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- a lista de grupos ---- */

.sb-nav {
  flex: 1;
  min-height: 0;
  padding: 0 8px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sb-nav::-webkit-scrollbar { display: none; }

/* névoa no pé quando a lista não cabe: sem ela o último item parece o último */
.sb-nav.rola {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}

/* ---- cada grupo é um BLOCO, não uma lista solta ----
   É o que faz "perceber onde termina um botão e começa outro" sem precisar de
   borda em cada item: o bloco tem fundo e canto, e os itens moram dentro dele. */
.sb-grupo { margin-bottom: 10px; }
.sb-grupo:last-child { margin-bottom: 4px; }
.sb-grupo[data-grupo="onde"] .sb-item,
.sb-grupo[data-grupo="acao"] .sb-item,
.sb-grupo[data-grupo="paginas"] .nav-list {
  background: #191d25;
  border: 1px solid #2a303b;
  border-radius: 12px;
}
/* o bloco das páginas respira por dentro */
.sb-grupo[data-grupo="paginas"] .nav-list { padding: 6px; }

/* o título do grupo: o "Favorites" do Finder — pequeno, espaçado, mais claro
   que antes (em #626a7a ele quase não existia sobre o fundo novo) */
.sb-grupo-tit {
  margin: 0 0 5px;
  padding: 0 4px;
  color: #7d8697;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ---- um item ---- */

.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #c6ccd8;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
/* hover bem mais forte que antes: em .05 sobre o fundo novo não se via nada */
.sb-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
/* o item de bloco (Onde estou, Publicar) ocupa o bloco inteiro */
.sb-item.destaque { padding: 11px; border-radius: 12px; }
/* ⚠️ SELECIONADO NÃO É VERMELHO. Regra do Pedro, pedida três vezes. O vermelho
   fica onde é ação (botão primário) ou indicação (a barrinha da página aberta). */
.sb-item.on {
  background: #2b313d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: #fff;
}
.sb-item:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 1px; }

.sb-ic { display: grid; place-items: center; flex: none; width: 18px; height: 18px; }
.sb-item.on .sb-ic { color: #fff; }

.sb-txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
.sb-lb {
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-item.on .sb-lb { font-weight: 650; }
/* a segunda linha, menor: é o nome da pasta embaixo do nome do template */
.sb-sub {
  color: var(--ink-3);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ---- o ENDEREÇO COMPLETO (18/08) ----
   "deve-se mostrar o endereço completo de onde eu to... se nao couber vc da um
   jeito mas faça ficar completo".

   ⚠️ NADA DE `ellipsis` AQUI. O `…` come o FIM do caminho, que é exatamente o
   degrau onde ele está — o pedaço que ele quis ver. Então o texto quebra em
   quantas linhas precisar. `overflow-wrap: anywhere` é o que impede um nome
   comprido sem espaço (um slug, um "ESTRUTURAÇÃO-ESTRATEGICA-3.0") de estourar
   a largura da barra e voltar a cortar. */
.sb-sub.completo {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.4;
  font-size: 11px;
  margin-top: 2px;
}
/* o item do endereço deixa de ser uma linha só: o texto manda na altura */
.sb-item.destaque { align-items: flex-start; }
.sb-item.destaque .sb-ic { margin-top: 1px; }
/* ⚠️ e a seta volta a ficar no meio do ícone, não no meio do parágrafo */
.sb-item.destaque .sb-seta { margin-top: 1px; }
/* o nome de onde estou pode ser comprido também: quebra, não corta */
.sb-item.destaque .sb-lb {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* a setinha de quem abre uma tela: discreta, firme no hover */
.sb-seta {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .14s;
}
.sb-item:hover .sb-seta, .sb-item.on .sb-seta { opacity: 1; }

/* ---- o pé: a foto do perfil, jeito Railway ---- */

.sb-foot {
  flex: none;
  padding: 8px;
  border-top: 1px solid #262b34;
  background: #0e1116; /* um degrau mais escuro: fecha a coluna embaixo */
}
/* a linha do pé: a foto à esquerda, as ferramentas à direita */
/* ═══ O SELETOR DE UNIDADE, no pé da barra (19/08, §AT) ═════════════════════

   "EU AINDA NAO VI NENHUM BOTAO PARA SELECIONAR A UNIDADE". Ele fica ACIMA da
   linha do perfil — é o lugar do "em que conta eu estou" no Railway e no Slack.

   ⚠️ O NOME DA UNIDADE PODE SER COMPRIDO E A COLUNA VAI A 190px. Quem encolhe é
   o nome (`min-width: 0` + ellipsis), nunca o número nem a setinha: o rótulo
   "UNIDADE" em cima já diz o que é, então um nome cortado com "…" continua
   legível — e a alternativa (quebrar em duas linhas) empurraria o perfil para
   fora numa janela baixa. */
.sb-unidade {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sb-unidade:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.sb-unidade-ic { display: inline-flex; flex: none; color: var(--ink-3); }
.sb-unidade-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sb-unidade-rot { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--ink-3); }
.sb-unidade-nome {
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-unidade-n {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
}
.sb-unidade-seta { display: inline-flex; flex: none; color: var(--ink-3); }

.sb-pe { display: flex; align-items: center; gap: 6px; }
.sb-pe .sb-perfil { flex: 1; min-width: 0; }
.sb-pe-fer { display: flex; align-items: center; gap: 2px; flex: none; }
.sb-fer {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sb-fer:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sb-fer.on { background: #2b313d; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.sb-perfil {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sb-perfil:hover { background: rgba(255, 255, 255, .06); color: #fff; }
/* ⚠️ A BOLINHA PRECISA DE MEDIDA AQUI. O bolinha() do app.js devolve um .av
   sem tamanho próprio (quem dava o tamanho era o CSS do rail de 80px), e sem
   isto ela nascia um quadradinho de 20px com as iniciais apertadas. 26px é o
   tamanho do rodapé do Railway, que foi a referência. */
.sb-av { display: grid; place-items: center; flex: none; width: 26px; height: 26px; }
.sb-av > .av,
.sb-av > .av.tem-foto {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  object-fit: cover;
  color: #fff;
}
.sb-perfil-nome {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-perfil-mais { display: grid; place-items: center; flex: none; color: var(--ink-3); }
.sb-perfil:hover .sb-perfil-mais { color: var(--ink-2); }

/* ---- a alça de largura, na borda direita ---- */

.side-resize {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 7px;
  z-index: 61;
  cursor: col-resize;
}
/* ⚠️ A ALÇA É INVISÍVEL, e continua sendo. O cursor vira ↔ e o arrasto
   funciona, mas ela não desenha risco nenhum: pedido do Pedro em 14/08 ("eu
   não quero essa linha destacada, eu quero ela invisível"). Nada de reacender
   este traço — nem no hover, nem enquanto arrasta. */
/* enquanto arrasta, nada de selecionar texto nem de animar largura */
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .sidebar { transition: none; }

/* ---- arrastar pasta de um template para outro ----

   A faixa de pastas do cartão de template é a zona de soltar. Ela precisa ter
   ALTURA MESMO VAZIA: zona sem altura não recebe drop, e template novo (que
   nasce sem pasta) ficaria impossível de preencher pelo arraste. */
.proj-pastas.zona {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 6px;
  border: 1px dashed transparent;
  border-radius: 12px;
  transition: background .14s, border-color .14s;
}
.proj-pastas.zona.alvo {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.zona-vazia { color: var(--ink-3); font-size: 12.5px; padding: 0 4px; }
.chip-arrasta { cursor: grab; }
.chip-arrasta:active { cursor: grabbing; }
.chip-arrasta.arrastando { opacity: .4; }

/* =========================================================================
   A JANELA (o Finder flutuando por cima da página)

   "esse finder poderia abrir somente ele, sem ser em tela cheia sabe, ai vc
   coloca os 3 botao do mac, 3 bolinha, fechar, minimizar na tela q eu to
   trabalhando ai ele fica ali no cantinho, e por ultimo tela cheia" — 17/08.

   Então na seção `navegador` a tela de conteúdo fica TRANSPARENTE e sem
   cabeçalho: a página continua à mostra atrás, e o Finder é uma janela solta.
   ========================================================================= */

.tela-hub.janela {
  background: transparent;
  /* o clique passa para a página atrás; a janela reativa nos filhos */
  pointer-events: none;
  padding: 26px;
  display: block;
  overflow: hidden;
}
/* ⚠️ `pointer-events: auto` NOS FILHOS é obrigatório. Sem isto a janela ficava
   decorativa: o `none` do pai valia para ela também e nenhum clique chegava.
   E CUIDADO — a §7 do CLAUDE.md proíbe `pointer-events:none` novo perto da
   página do cliente; aqui ele está no INVÓLUCRO da janela do administrador, que
   nem existe no link do cliente. */
.tela-hub.janela > * { pointer-events: auto; }
/* ⚠️ A JANELA NASCE CENTRALIZADA, e isso é o que dá espaço para as 8 alças.
   Encostada no canto de cima à esquerda (o padrão de um bloco), esticar para a
   esquerda ou para cima não tinha para onde ir — parecia que a alça não
   funcionava, quando ela só estava no limite. */
.tela-hub.janela .tela-hub-corpo {
  padding: 0;
  overflow: visible;
  height: 100%;
  display: grid;
  place-items: center;
}
.tela-hub.janela .tela-hub-corpo > * { max-width: none; }

/* a janela em si: sombra funda e um contorno claro, como no Mac */
.tela-hub.janela .fnd {
  width: min(1020px, 100%);
  height: min(620px, 100%);
  border-radius: 11px;
  border-color: #4a5160;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .6);
  animation: janelaIn .18s cubic-bezier(.2, .9, .3, 1) both;
}
.tela-hub.janela .fnd.cheia { width: 100%; height: 100%; }
@keyframes janelaIn {
  from { opacity: 0; transform: scale(.97) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- as três bolinhas ---- */
.mac-bolas { display: flex; align-items: center; gap: 8px; flex: none; margin-right: 4px; }
.mac-bola {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: filter .12s;
}
.mac-bola:hover { filter: brightness(1.2); }
.mac-bola.fechar { background: #ff5f57; }
.mac-bola.minimizar { background: #febc2e; }
.mac-bola.cheia { background: #28c840; }

/* ---- minimizada: a abinha no canto ---- */
.fnd-abinha {
  position: absolute;
  left: 26px;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #4a5160;
  border-radius: 11px;
  background: #2a2a2c;
  color: #e6e9ef;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 18px 40px -18px #000;
  animation: janelaIn .16s ease-out both;
}
.fnd-abinha:hover { background: #34353a; }
.fnd-abinha-x { display: grid; place-items: center; color: #9199a8; cursor: pointer; }
.fnd-abinha-x:hover { color: #fff; }

/* ---- a janela: corpo em duas partes, painel de info, arrastar e canto ---- */

.fnd-corpo { display: flex; flex: 1; min-height: 0; }
.fnd-lista-cx { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }

/* ⚠️ A BARRA DE TÍTULO É A ALÇA DE ARRASTAR. O cursor diz isso; os botões de
   dentro voltam ao cursor normal, senão parece que eles arrastam também. */
.fnd-bar { cursor: grab; user-select: none; }
.fnd-bar button { cursor: default; }
/* ⚠️ SEM MÃOZINHA NAS TRÊS BOLINHAS, nem nos botões da barra. "ele está pegando
   o mouse e colocando uma mãozinha no mouse, eu não quero, eu quero que seja a
   setinha do mouse mesmo" (17/08). É também o que o Mac faz: no Finder o cursor
   não muda em cima de fechar/minimizar/tela cheia. */
.mac-bola { cursor: default; }
.fnd.cheia .fnd-bar { cursor: default; }
body.arrastando-janela { user-select: none; }
body.arrastando-janela .fnd-bar { cursor: grabbing; }
/* enquanto arrasta, o iframe da página não pode roubar o mouse */
body.arrastando-janela iframe { pointer-events: none; }

/* ---- as 8 alças de redimensionar: 4 lados e 4 cantos ----

   ⚠️ ELAS FICAM POR DENTRO DA JANELA, e isto é uma correção de 17/08.

   Antes escapavam 4px para fora (`-4px`), o que obrigava a janela a ficar com
   `overflow: visible` — senão a metade de fora era cortada e não recebia o
   mouse. E `overflow: visible` era exatamente o que impedia as QUINAS de
   arredondarem: "as quinas nao estao arredondadas, precisa ser". A barra de
   cima e o pé têm fundo próprio e vazavam por cima do raio.

   Por dentro resolve as duas coisas de uma vez: o `overflow: hidden` volta, o
   raio recorta tudo, e a faixa de 7px encostada na borda continua sendo alvo
   confortável. O canto tem 15px e vem DEPOIS dos lados no CSS, para ganhar
   deles na sobreposição. */
.fnd-alca { position: absolute; z-index: 4; }
.fnd-alca.lado-n { top: 0; left: 14px; right: 14px; height: 7px; }
.fnd-alca.lado-s { bottom: 0; left: 14px; right: 14px; height: 7px; }
.fnd-alca.lado-o { left: 0; top: 14px; bottom: 14px; width: 7px; }
.fnd-alca.lado-l { right: 0; top: 14px; bottom: 14px; width: 7px; }
.fnd-alca.lado-no { top: 0; left: 0; width: 15px; height: 15px; }
.fnd-alca.lado-nl { top: 0; right: 0; width: 15px; height: 15px; }
.fnd-alca.lado-so { bottom: 0; left: 0; width: 15px; height: 15px; }
.fnd-alca.lado-sl { bottom: 0; right: 0; width: 15px; height: 15px; }
/* o risquinho no canto de baixo à direita, como no Mac: diz que dá para pegar */
.fnd-alca.lado-sl::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #6b7382;
  border-bottom: 2px solid #6b7382;
  border-radius: 0 0 2px 0;
}
/* ⚠️ AS ALÇAS CONTINUAM VALENDO EM TELA CHEIA. "qnd eu coloco tela cheia e dps
   eu tento diminuir a tela manualmente eu n consigo, eu deveria conseguir sim,
   msm eu tendo colocado tela cheia" (17/08). Elas eram apagadas com
   `display: none`; agora pegar uma alça em tela cheia SAI da tela cheia
   congelando o retângulo de agora, e o arrasto segue do mesmo ponto — a conta
   está em ligarArrastoDaJanela(). O risquinho do canto some em tela cheia, que
   é o que o Mac faz. */
.fnd.cheia .fnd-alca.lado-sl::after { display: none; }

/* ⚠️ AS QUINAS ARREDONDADAS. O `overflow: hidden` volta a valer, e é ele que faz
   o raio de 11px cortar a barra de cima, a lista e o pé. Ver o bloco das alças
   logo acima: era o `visible` que estragava as quinas. */
.tela-hub.janela .fnd { overflow: hidden; }

/* ---- o painel de informação, colado na direita da janela ---- */
.fnd-info {
  display: flex;
  flex-direction: column;
  width: 300px;
  flex: none;
  min-height: 0;
  border-left: 1px solid #2f3441;
  background: #202024;
}
.fnd-info-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid #2f3441;
  background: #262629;
}
.fnd-info-cab-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fnd-info-cab-txt strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnd-info-cab-txt span { color: #8b93a2; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnd-info-x {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  border: 0; border-radius: 7px; background: transparent;
  color: #9199a8; cursor: pointer;
}
.fnd-info-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.fnd-info-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 18px; }
.fnd-info-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fnd-info-topo > div { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.fnd-info-topo strong { font-size: 15px; }
.fnd-info-corpo .av.grande { width: 44px; height: 44px; border-radius: 13px; font-size: 15px; display: grid; place-items: center; color: #fff; font-weight: 700; }

.fnd-info-sec {
  margin: 16px 0 7px;
  color: #7d8697;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.fnd-info-sec:first-child { margin-top: 0; }
.fnd-info-dado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: 12.5px;
}
.fnd-info-dado span { color: #8b93a2; flex: none; }
.fnd-info-dado b { color: #e6e9ef; font-weight: 600; text-align: right; min-width: 0; }
.fnd-info-senha {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 8px; padding: 7px 9px;
  border: 1px solid #333a48; border-radius: 9px; background: #17171a;
}
.fnd-info-senha code { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.fnd-info-acao {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-top: 5px; padding: 8px 10px;
  border: 1px solid #333a48; border-radius: 9px; background: #26262a;
  color: #e0e4ec; font-size: 12.5px; font-weight: 550;
  text-align: left; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.fnd-info-acao:hover { background: #303038; border-color: #444b5c; }
.fnd-info-acao.perigo { color: #ff8b84; }
.fnd-info-acao.perigo:hover { background: color-mix(in srgb, var(--danger) 18%, #26262a); border-color: var(--danger); }

/* o ">" no fim da linha, que abre a informação */
.fnd-c-tipo { display: flex; align-items: center; gap: 4px; }
.fnd-c-tipo > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fnd-info-btn {
  display: grid; place-items: center;
  width: 20px; height: 20px; flex: none;
  border: 0; border-radius: 5px; background: transparent;
  color: #5c6474; cursor: pointer; opacity: 0;
  /* ⚠️ `visibility: hidden` junto com a opacidade 0. Só com opacidade o botão
     continua PEGANDO CLIQUE em cima do nome do arquivo — invisível, mas por
     cima. (`pointer-events: none` está proibido neste projeto: §7 do CLAUDE.md.) */
  visibility: hidden;
  transition: opacity .12s, visibility .12s, background .12s, color .12s;
}
.fnd-linha:hover .fnd-info-btn,
.fnd-linha.on .fnd-info-btn { opacity: 1; visibility: visible; }
.fnd-info-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* com o painel aberto a janela precisa de mais largura para a lista respirar */
.tela-hub.janela .fnd.com-info { width: min(1260px, 100%); }

@media (max-width: 980px) {
  /* o painel não cabe ao lado: vira a tela inteira da janela */
  .fnd.com-info .fnd-lista-cx { display: none; }
  .fnd-info { width: 100%; border-left: 0; }
}

/* =========================================================================
   O FINDER — a visão de lista do Mac

   ⚠️ SUBSTITUIU O NAVEGADOR DE TRÊS COLUNAS. Aquilo era a "visão de colunas";
   o Pedro mandou print da VISÃO DE LISTA e pediu igual: "pastinhas azuis, data
   de modificacao, cores cinza e preto d fundo, faça igualzinho", com a barra de
   endereço no pé.

   As medidas saíram do print dele: linha de 34px, cabeçalho de 30px, colunas
   Nome (elástica) / Modificado 190 / Tamanho 96 / Tipo 150, e o pé de 30px.
   ========================================================================= */

.fnd {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  height: calc(100dvh - 190px);
  border: 1px solid #33394a;
  border-radius: 12px;
  background: #1c1c1e;   /* o cinza da janela do Finder no escuro */
  overflow: hidden;
  box-shadow: 0 20px 50px -30px #000;
}

/* ---- a barra de cima ---- */
.fnd-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 9px 12px;
  border-bottom: 1px solid #2f3441;
  background: #2a2a2c;   /* a barra do Finder é mais clara que a lista */
}
.fnd-nav { display: flex; gap: 2px; flex: none; }
.fnd-seta {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  color: #d6dae3;
  cursor: pointer;
  transition: background .12s;
}
.fnd-seta:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.fnd-seta:disabled { opacity: .32; cursor: default; }
.fnd-titulo {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #f2f4f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 11px;
  border: 1px solid #3c414f;
  border-radius: 8px;
  background: #34353a;
  color: #e3e6ec;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
}
.fnd-btn:hover:not(:disabled) { background: #40424a; border-color: #4c5262; }
.fnd-btn:disabled { opacity: .34; cursor: default; }
.fnd-btn.forte { background: var(--accent); border-color: var(--accent); color: #fff; }
.fnd-btn.forte:hover:not(:disabled) { filter: brightness(1.08); }
.fnd-btn.perigo:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 22%, #34353a); border-color: var(--danger); color: #ffb3ae; }

/* ---- as colunas ---- */
.fnd-head,
.fnd-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 96px 150px;
  align-items: center;
  gap: 0;
}
.fnd-head {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border-bottom: 1px solid #2f3441;
  background: #232326;
  color: #9199a8;
  font-size: 11.5px;
  font-weight: 600;
}
.fnd-head > span + span,
.fnd-linha > span + span { border-left: 1px solid rgba(255, 255, 255, .05); padding-left: 12px; }

.fnd-lista { flex: 1; min-height: 0; overflow-y: auto; }

.fnd-linha {
  height: 34px;
  padding: 0 14px;
  color: #e6e9ef;
  font-size: 13px;
  cursor: default;
  border-bottom: 1px solid rgba(255, 255, 255, .035);
}
/* ⚠️ ZEBRA. É ela que faz "perceber onde termina uma linha e começa a outra" —
   o Finder alterna o fundo, e sem isso a lista era uma chapa só. */
.fnd-linha:nth-child(even) { background: rgba(255, 255, 255, .035); }
.fnd-linha:hover { background: rgba(255, 255, 255, .075); }
/* selecionado: o azul do Finder, e aí o texto todo fica branco */
.fnd-linha.on,
.fnd-linha.on:nth-child(even) { background: #2c5f9e; color: #fff; }
.fnd-linha.on .fnd-c-data,
.fnd-linha.on .fnd-c-tam,
.fnd-linha.on .fnd-c-tipo { color: rgba(255, 255, 255, .82); }
.fnd-linha:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: -2px; }
/* a pasta ABERTA no sistema: negrito, para se localizar de longe */
.fnd-linha.forte .fnd-nome { font-weight: 750; }

.fnd-c-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fnd-ic { display: grid; place-items: center; flex: none; color: #9199a8; }
/* ⚠️ A PASTINHA AZUL não usa currentColor: ela tem fill próprio no ICONES.
   O `color` aqui vale só para os ícones de traço (página, título, pessoa). */
.fnd-ic.colorido { color: inherit; }
.fnd-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnd-c-data, .fnd-c-tam, .fnd-c-tipo {
  color: #9199a8;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* a bolinha/contador de "esperando publicação", na linha */
.fnd-marca {
  flex: none;
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.fnd-sep {
  padding: 9px 14px 5px;
  background: #202023;
  border-top: 1px solid #2f3441;
  border-bottom: 1px solid #2f3441;
  color: #8b93a2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fnd-vazio { padding: 26px 16px; color: #8b93a2; font-size: 13px; text-align: center; }
/* FASE 4: o "crie o primeiro site de MIGUEL" dentro da janela do Finder — o vazio
   com um botão, em vez de só uma frase. */
.fnd-primeiro { display: grid; justify-items: center; gap: 12px; }
.fnd-primeiro p { margin: 0; }

/* ---- o pé: o endereço, como o "path bar" do Finder ---- */
.fnd-pe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 30px;
  padding: 0 12px;
  border-top: 1px solid #2f3441;
  background: #232326;
}
.fnd-migalhas { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; overflow: hidden; }
.fnd-mig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 2px 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b6bdc9;
  font-size: 11.5px;
  white-space: nowrap;
}
.fnd-mig:last-child { color: #fff; font-weight: 650; }
.fnd-mig.clicavel { cursor: pointer; }
.fnd-mig.clicavel:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.fnd-mig-sep { display: grid; place-items: center; flex: none; color: #5c6474; }
.fnd-conta { flex: none; color: #8b93a2; font-size: 11.5px; }

/* ---- tela estreita: as colunas de trás saem, como no Finder ---- */
@media (max-width: 1100px) {
  .fnd-head, .fnd-linha { grid-template-columns: minmax(0, 1fr) 150px 130px; }
  .fnd-c-tam { display: none; }
}
@media (max-width: 780px) {
  /* ⚠️ NO CELULAR A JANELA VIRA A TELA. Ela é uma janela flutuante com posição
     e tamanho em pixels; num aparelho de 375px isso não cabe de jeito nenhum, e
     a largura inline de um redimensionamento anterior estourava a tela. Aqui ela
     ignora tudo e ocupa o espaço todo — como qualquer app faz no dedo. */
  .tela-hub.janela { padding: 0; }
  .tela-hub.janela .tela-hub-corpo > .fnd {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    border: 0;
  }
  .fnd-alca { display: none; }
  .fnd-bar { cursor: default; }

  .fnd-head, .fnd-linha { grid-template-columns: minmax(0, 1fr) 120px; }
  .fnd-c-tipo { display: none; }
  .fnd { height: auto; min-height: 380px; }
  .fnd-bar { flex-wrap: wrap; }
  /* mesma reserva do #drawerBtn: com o título na PRIMEIRA linha da barra e a
     janela ocupando a tela toda, "Pastas" aparecia como "as" debaixo do botão. */
  .fnd-titulo { order: -1; width: 100%; padding-left: 50px; }
  /* ⚠️ O ENDEREÇO ROLA DE LADO em vez de estourar. Com 5 degraus
     (Torque&Co ▸ Pastas ▸ template ▸ pasta ▸ página) ele passa de 500px, e numa
     tela de 375 empurrava a janela inteira para fora — era o único
     "estourando" que sobrava nos testes. */
  .fnd-migalhas { overflow-x: auto; scrollbar-width: none; }
  .fnd-migalhas::-webkit-scrollbar { display: none; }
  .fnd-conta { display: none; }
  .tela-hub.janela { padding: 10px; }
  .fnd-abinha { left: 12px; bottom: 12px; }
  /* no dedo não há como pegar uma alça de 7px, e a janela é a tela inteira */
  .fnd-alca { display: none; }
}

/* ══════════ O FINDER PEQUENO — @container, não @media ══════════

   "qnd o finder ta pequeno fica todo errado e nao responsivo" — 17/08, e ele
   estava apontando um erro de raciocínio meu, não um detalhe.

   ⚠️ O TAMANHO QUE IMPORTA É O DA JANELA, NÃO O DA TELA. As regras acima são
   `@media`: elas olham a largura do NAVEGADOR. Só que esta janela se arrasta e
   se redimensiona — dá para ter um monitor de 1920px com o Finder em 480px. Aí
   nenhuma `@media` dispara, as quatro colunas continuam pedindo 436px fixos de
   Modificado+Tamanho+Tipo, e sobra nada para o nome: a lista sai por cima de si
   mesma. É exatamente o "fica todo errado".

   `@container` mede a JANELA. As colunas de trás vão saindo na ordem em que o
   Finder do Mac as descarta — Tamanho, depois Tipo, depois Modificado —, e o
   nome nunca fica sem espaço.                                                */
.fnd {
  /* ⚠️ `position: relative` é o que ancora as 8 alças NA JANELA. Sem ele, e com
     `.fnd` estática, elas se penduravam no primeiro ancestral posicionado (a
     tela de conteúdo) e ficavam nas bordas da PÁGINA, não da janela. */
  position: relative;
  container-type: inline-size;
  container-name: fnd;
}

@container fnd (max-width: 860px) {
  .fnd-head, .fnd-linha { grid-template-columns: minmax(0, 1fr) 150px 130px; }
  .fnd-c-tam { display: none; }
}
@container fnd (max-width: 640px) {
  .fnd-head, .fnd-linha { grid-template-columns: minmax(0, 1fr) 130px; }
  .fnd-c-tipo { display: none; }
  /* o ">" de informação mora na coluna Tipo; sem ela, ele vai para o nome */
  .fnd-c-nome { position: relative; }
}
@container fnd (max-width: 460px) {
  .fnd-head, .fnd-linha { grid-template-columns: minmax(0, 1fr); }
  .fnd-c-data { display: none; }
  .fnd-titulo { font-size: 13px; }
  .fnd-conta { display: none; }
}
/* ⚠️ O PAINEL DE INFORMAÇÃO NÃO CABE em janela estreita: 300px fixos ao lado de
   uma lista deixavam as duas coisas ilegíveis. Abaixo de 700px ele passa a
   COBRIR a lista, como a gaveta de um app no celular — a lista continua ali,
   fechando o painel no X. */
@container fnd (max-width: 700px) {
  .fnd-corpo { position: relative; }
  .fnd-info {
    position: absolute;
    inset: 0;
    width: auto;
    border-left: 0;
    z-index: 2;
  }
}

/* ---- os três pontinhos da barra do Finder ----
   "ou ent se nao tiver um mouse vc coloca 3 pontinho la em cima, ai eu clico e
   terá essas funcoes" — 17/08. Ele abre o MESMO menu do botão direito. */
.fnd-pontos {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 26px;
  border: 1px solid #3c414f;
  border-radius: 8px;
  background: #34353a;
  color: #d6dae3;
  transition: background .12s, border-color .12s;
}
.fnd-pontos:hover { background: #43454e; border-color: #4c5262; color: #fff; }

/* ---- o lápis de cada linha da lista ----
   "EU QUERO Q O LAPIZINHO ONDE EDITA TENHA EM CADA HTML NAO SO NO INICIO".
   Só no hover e na linha marcada: sempre visível, a lista virava um paredão. */
.fnd-lapis {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9199a8;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.fnd-linha:hover .fnd-lapis,
.fnd-linha.on .fnd-lapis,
.fnd-lapis:focus-visible { opacity: 1; }
.fnd-lapis:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---- o RECORD de cada linha (18/08; à ESQUERDA do lápis desde 19/08) ----
   Mesmo comportamento do lápis, mas o hover acende no vermelho da casa: gravar é
   ação, e ação é onde o vermelho vive.

   ⚠️ O `.aceso` É A EXCEÇÃO ao "só no hover": a página que já tem a subpágina da
   gravação mostra o ícone o tempo todo. Aí ele não é mais um botão escondido, é a
   resposta de "quais páginas já tiveram call" — que é o que ele pediu para ver de
   relance em 19/08. */
.fnd-rec:hover { background: rgba(255, 255, 255, .16); color: #fff; }
/* os mesmos três estados da árvore — ver o comentário grande em .nav-rec */
.fnd-rec.falta { opacity: 1; color: #e8b83c; background: rgba(232, 184, 60, .14); }
.fnd-rec.ok    { opacity: 1; color: #58cc8b; background: rgba(88, 204, 139, .14); }

/* ══════════ A FICHA DA PÁGINA, no terceiro nível do Finder (18/08) ══════════
   "quando eu estiver dentro de uma pagina no finder, deve aparecer para eu editar
   o nome dela no title html para o admin, e para o cliente e em baixo o lugar de
   subpastas". Então ela mora ACIMA do cabeçalho das colunas, e a lista de
   subpáginas continua sendo a lista de sempre, embaixo. */
.fnd-ficha {
  flex: none;
  padding: 14px 16px 13px;
  border-bottom: 1px solid #2f3441;
  background: #1b1c20;
}
.fnd-ficha-cab { display: flex; align-items: center; gap: 10px; }
.fnd-ficha-ic { display: grid; place-items: center; flex: none; color: #9199a8; }
.fnd-ficha-tit { display: grid; gap: 1px; min-width: 0; }
.fnd-ficha-tit strong {
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  /* nada cortado: nome comprido quebra */
  overflow-wrap: anywhere;
}
.fnd-ficha-tit span { color: #8e95a3; font-size: 11.5px; }
.fnd-ficha-nota { margin: 10px 0 0; color: #8e95a3; font-size: 12px; }

.fnd-ficha-secao {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 7px;
  color: #7d8697;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.fnd-ficha-secao-ic { display: grid; place-items: center; color: var(--accent); }

/* ⚠️ DUAS COLUNAS QUE VIRAM UMA, e com @container e não @media: o que manda é a
   largura da JANELA do Finder, que ele arrasta à vontade, não a da tela. É a
   mesma escolha do resto desta janela (§ o Finder é a porta de tudo). */
.fnd-ficha-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@container fnd (max-width: 620px) {
  .fnd-ficha-par { grid-template-columns: 1fr; }
}
.fnd-ficha-campo { display: grid; gap: 4px; min-width: 0; }
.fnd-ficha-rot { color: #c6ccd8; font-size: 11.5px; font-weight: 600; }
.fnd-ficha-campo .input { height: 34px; font-size: 13px; }
.fnd-ficha-dica { color: #7d8697; font-size: 10.5px; }

.fnd-ficha-pe { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.fnd-ficha-aviso { color: #8e95a3; font-size: 11.5px; }

/* ---- a conta do pé quando há vários marcados ---- */
.fnd-conta.forte { color: #fff; font-weight: 700; }

/* ---- o histórico de publicações, no painel de informação ---- */
.fnd-pub {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.fnd-pub:last-child { border-bottom: 0; }
.fnd-pub-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: #9fd3a6;
}
.fnd-pub-txt { display: grid; gap: 2px; min-width: 0; }
.fnd-pub-txt strong { font-size: 12.5px; color: #e6e9ef; }
.fnd-pub-txt span { font-size: 11px; color: #8b93a2; }

/* ---- a janela de "para onde?" (o Mover que pergunta o destino) ---- */
.dest-escolha { display: grid; gap: 8px; }
.dest-cartao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.dest-cartao:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); }
.dest-cartao:disabled { opacity: .4; cursor: default; }
.dest-ic { display: grid; place-items: center; flex: none; color: var(--ink-2); }
.dest-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dest-txt strong { font-size: 13.5px; }
.dest-txt span { font-size: 11.5px; color: var(--ink-2); }
.dest-seta { display: grid; place-items: center; flex: none; color: var(--ink-3, #6b7382); }

/* ---- o pisca do "MOSTRAR NO SITE" ----
   Chegar na página certa numa árvore comprida não se vê; o pisca diz "é esta". */
.nav-item.achei { animation: achei 1.3s ease-out 1; }
@keyframes achei {
  0%, 100% { background: transparent; }
  15%, 55% { background: color-mix(in srgb, var(--accent) 28%, transparent); }
}

/* ---- o aviso de senha errada, na janela de excluir ---- */
.hint.erro { color: #ff8b84; }

/* ═══════════════════ O EDITOR DE REUNIÃO ═══════════════════

   "ele coloca oq qsr, video, texto, link, qlqr coisa, numa aba reuniao" — 17/08.
   Os campos de cima e, embaixo, a PILHA de blocos que ele monta na ordem que
   quiser. Cada bloco é um cartão com cabeçalho próprio: é o cabeçalho que deixa
   claro onde um termina e o outro começa, que é a mesma reclamação que ele fez
   do menu ("ta tudo da msm cor, sem fundo, ta horrivel"). */
.rn-editor { display: block; }
.rn-pilha { display: grid; gap: 10px; }
.rn-item {
  display: grid;
  gap: 8px;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.rn-item-cab { display: flex; align-items: center; gap: 8px; }
.rn-item-ic { display: grid; place-items: center; flex: none; color: var(--ink-2); }
.rn-item-tipo {
  flex: none;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* o nome do bloco é elástico: é o único campo do cabeçalho que cresce */
.rn-item-cab .input { flex: 1; min-width: 90px; }
.rn-item-acoes { display: flex; gap: 2px; flex: none; }
.rn-item textarea.input { width: 100%; resize: vertical; }
/* ⚠️ OS BOTÕES DE ADICIONAR QUEBRAM A LINHA, não rolam de lado. São quatro; numa
   janela estreita eles viram duas fileiras. Nada de rolagem lateral, regra dele. */
.rn-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rn-add .btn { flex: 0 1 auto; }

@media (max-width: 780px) {
  /* no dedo, o cabeçalho do bloco empilha: tipo em cima, nome e ações embaixo */
  .rn-item-cab { flex-wrap: wrap; }
  .rn-item-cab .input { flex: 1 1 100%; order: 3; }
  .rn-item-acoes { margin-left: auto; }
  .rn-add .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ---- rascunho e publicado ----

   O contador do item "Publicar" e a bolinha de cada página não publicada.
   ⚠️ Estas duas SÃO vermelhas, e é a exceção que confirma a regra: o vermelho do
   projeto fica onde é AÇÃO ou INDICAÇÃO, e "o cliente ainda não viu isto" é
   indicação. "Selecionado" continua cinza em todo lugar. */
.sb-marca {
  flex: none;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-pendente {
  width: 7px;
  height: 7px;
  flex: none;
  margin-right: 1px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* linha de cartão que é só informação, sem clique (a lista do PUBLICAR) */
.hub-linha.estatica { cursor: default; }
.hub-linha.estatica:hover { background: transparent; }

/* =========================================================================
   A TELA DE CONTEÚDO (o #telaHub)

   Ajustes, Clientes, Templates, Histórico e Link dos arquivos abrem AQUI, no
   lugar da página. O cabeçalho é o do Railway: título grande à esquerda, a ação
   à direita. O corpo é o dos Ajustes do Mac: cartões com linhas e a setinha.
   ========================================================================= */

.tela-hub {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #0b0d12;
}
.tela-hub-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 20px 28px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.tela-hub-head h2 {
  margin: 0;
  min-width: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tela-hub-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.tela-hub-corpo {
  flex: 1;
  min-height: 0;
  padding: 20px 28px 40px;
  overflow-y: auto;
}
/* ⚠️ O CONTEÚDO TEM TETO DE LARGURA, e o cabeçalho acompanha.

   Sem isto, num monitor de 1920 o formulário esticava de ponta a ponta: o botão
   "Adicionar" ficava com meio metro de largura e a linha de cada pessoa virava
   uma faixa com os ícones perdidos na direita. É o que os Ajustes do Mac e o
   Railway fazem — a coluna de conteúdo tem um limite e o resto é respiro. */
.tela-hub-corpo > * { max-width: 1080px; }
.tela-hub-head { max-width: calc(1080px + 56px); }

/* o cartão de linhas dos Ajustes do Mac */
/* ---- o cartão de linhas (os Ajustes do Mac) ----
   Fundo próprio, borda de verdade e um fio entre cada linha: é onde "dá para
   ver onde termina um botão e começa o outro". */
.hub-cartao {
  margin: 0 0 22px;
  border: 1px solid #2a303b;
  border-radius: 14px;
  background: #131720;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px -18px #000;
}
.hub-linha {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid #232935;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.hub-linha:last-child { border-bottom: 0; }
.hub-linha:hover { background: rgba(255, 255, 255, .055); }
.hub-linha.compacta { padding: 9px 16px; }
.hub-linha.e-titulo strong { font-weight: 800; }
.hub-linha.perigo { color: var(--danger); }
.hub-linha-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #1e2430;
  color: var(--ink-2);
}
.hub-linha:hover .hub-linha-ic { color: #fff; }
.hub-linha.perigo .hub-linha-ic { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
/* duas linhas: o nome em cima, o que ela faz embaixo */
.hub-linha-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hub-linha-txt strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-linha-txt > span { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-linha-seta { display: grid; place-items: center; flex: none; color: #4d5563; }
.hub-linha:hover .hub-linha-seta { color: var(--ink-2); }

/* o título de cada bloco de cartões */
.tela-hub-corpo .hub-sub {
  margin: 4px 0 9px;
  color: #7d8697;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* a escolha da pasta, na tela de Clientes */
.hub-escolha .sp-grupo { padding: 12px 4px 6px; }
.hub-acoes-pe { display: flex; gap: 10px; margin-top: 6px; }

/* dentro do cartão, a linha de pasta perde o canto arredondado próprio */
.hub-cartao .sp-cliente-linha {
  border-radius: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.hub-cartao .sp-cliente-linha:last-child { border-bottom: 0; }


/* =========================================================================
   AS LISTAS E A ÁRVORE DE PÁGINAS

   ⚠️ Estas regras vinham do bloco do menu animado, e por um instante foram
   embora junto com ele — a árvore virou um retângulo cinza gigante na tela.
   Elas voltaram porque o que elas desenham NÃO era do menu animado: é a árvore
   de páginas (`.nav-*`) e as listas de pasta/ação (`.sp-*`), que continuam
   existindo, só que agora dentro da coluna do Finder e das telas de conteúdo.

   O que ficou de fora, e não volta: tudo o que era do cartão flutuante em si
   (`.sp-head`, `.sp-body`, `.sp-pin`, `.sp-fechar`, `.sp-back`, `.side-panel`).
   ========================================================================= */

/* ---- as listas dos painéis ---- */

/* mesma história do .nav-list: sem flex e sem rolagem própria — hoje estas
   listas moram na tela de conteúdo, que já rola. */
.sp-list { padding: 2px 0; }
.sp-carregando { padding: 12px; color: var(--ink-3); font-size: 12.5px; }
/* rótulo de grupo dentro de uma lista ("Sem projeto") */
.sp-grupo {
  padding: 14px 10px 6px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* a setinha das linhas que abrem a cascata: aparece no hover e fica quando o
   nível 2 daquela linha está aberto */
.sp-linha-seta {
  margin-left: auto;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .14s;
}
/* ---- pessoa (a cascata de Clientes) ---- */

.sp-pessoa {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #b9bec9;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sp-pessoa:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.sp-pessoa .sp-av { width: 28px; height: 28px; border-radius: 9px; font-size: 10.5px; font-weight: 700; color: #fff; }
.sp-pessoa-txt { display: grid; gap: 2px; min-width: 0; }
.sp-pessoa-txt strong {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-tag { font-size: 10.5px; font-weight: 600; }
.sp-tag.ambar { color: #f0b429; }
.sp-tag.verde { color: #4ade80; }
/* ---- aba dos Ajustes dentro do painel ---- */

.sp-aba.perigo { color: #ff8b84; }
.sp-aba.perigo:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: #ff8b84; }
.sp-cliente {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #b9bec9;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sp-cliente:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.sp-cliente.on {
  background: var(--sel);
  box-shadow: inset 0 0 0 1px var(--sel-line);
  color: var(--sel-ink);
  font-weight: 650;
}
.sp-cliente span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-bolinha { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sp-sep { height: 1px; margin: 8px 4px; background: var(--line); }
/* ---- a ESCOLHA DA PASTA do painel Clientes (17/08) ----

   O 1º degrau de "Clientes": nome da pasta em cima, quantas páginas embaixo.
   Duas linhas, então a linha é um pouco mais alta que a de pasta comum.     */
.sp-cliente-linha { padding: 8px 10px; }
.sp-cliente-txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
.sp-cliente-txt strong {
  font-size: 13.5px;
  font-weight: 650;
  /* nada cortado: nome comprido ganha "…" em vez de estourar a linha */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-cliente-txt span { color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.sp-cliente-linha:hover .sp-linha-seta { opacity: 1; }
/* o "‹ Trocar de pasta" do 2º degrau: diz onde a pessoa está e como voltar */
.sp-voltar-pasta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sp-voltar-pasta:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.sp-voltar-pasta .ic-slot { display: grid; place-items: center; flex: none; }
/* o nome da pasta atual, empurrado para a direita */
.sp-voltar-pasta strong {
  margin-left: auto;
  min-width: 0;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-acao {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sp-acao:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.sp-vazio { padding: 10px 12px; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
/* ⚠️ A ALÇA ANTIGA MORAVA AQUI, e ela era `position: fixed` com a posição vinda
   do JavaScript (o `posicionarAlca()` sabia em que painel da cascata ela devia
   encostar). Sem cascata, ela virou uma alça `absolute` na borda da coluna —
   está definida no bloco da barra, lá em cima. Este `fixed` sem `left` sobrou
   por um momento e jogava a alça na borda direita da janela em toda largura
   acima de 880px: era o único "estourando" que os testes ainda pegavam.

   Enquanto arrasta, o iframe da página não pode roubar o mouse. */
body.resizing iframe { pointer-events: none; }
/* Arquivos do cliente — mesmo formato, com destaque na cor da marca */
/* sem link definido ainda: fica discreto, só para você */
/* o rótulo encurta com "…" em vez de estourar a barra estreita */

/* ---- a árvore de páginas ----
   Hoje ela mora no grupo "Páginas" da coluna; antes era o corpo do terceiro
   painel flutuante. O HTML que a desenha não mudou. */

/* ⚠️ NÃO É MAIS "flex:1 + rola". A árvore era o CORPO do painel flutuante, e
   por isso esticava e rolava por conta própria. Dentro da coluna do Finder ela é
   só um pedaço do grupo "Páginas": quem rola é o .sb-nav, e deixar o overflow
   aqui criava uma segunda barra de rolagem dentro da primeira. */
.nav-list { padding: 2px 0 4px; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  color: #b9bec9;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav-item.on { color: #fff; background: rgba(255, 255, 255, .07); }

/* A BARRINHA DA ESQUERDA — uma em CADA página, não só na aberta.

   Pedido do Pedro em 14/08: "essa barra vermelha indicando onde eu estou, eu
   quero barras cinzas nas páginas que eu não estou". Antes só a página aberta
   tinha marca e as outras ficavam soltas no vazio; agora a coluna de barrinhas
   dá a linha de leitura, e o vermelho continua sendo só de quem está aberta.
   Tag não entra: ela é um TÍTULO de seção, não uma página. */
.nav-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 17px;
  border-radius: 3px;
  background: #3f4552;
  transition: background .14s, height .14s;
}
/* título não abre página, então não tem a barrinha de "aberta" */
.nav-item.titulo::before { display: none; }
.nav-item:hover::before { background: #5d6373; }
.nav-item.on::before { background: var(--accent); height: 21px; }
.nav-item.on .nav-label { font-weight: 650; }

/* ---- arrastar para reordenar ----
   A linha some pela metade enquanto viaja, e o destino aparece como um fio
   VERMELHO em cima ou embaixo (antes/depois) ou como um contorno inteiro
   (dentro). Sem essa marca ninguém sabe onde vai cair. */
.nav-item[draggable="true"] { -webkit-user-drag: element; }
.nav-item.arrastando { opacity: .4; }
.nav-item.cai-antes,
.nav-item.cai-depois { position: relative; }
.nav-item.cai-antes::after,
.nav-item.cai-depois::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.nav-item.cai-antes::after { top: -1px; }
.nav-item.cai-depois::after { bottom: -1px; }
.nav-item.cai-dentro {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* soltar no vazio do fim da lista = mandar para o fim de tudo */
.nav-list.cai-no-fim { box-shadow: inset 0 -3px 0 -1px var(--accent); }

.nav-twisty {
  width: 18px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 8px;
  cursor: pointer;
  transition: transform .16s;
}
/* ⚠️ NÃO gire o botão aqui. Quem gira é o SVG de dentro (lá embaixo, no
   `.nav-twisty.open > .ic`). Girando os dois, davam 180° somados e a seta da
   pasta aberta apontava para a ESQUERDA em vez de para baixo. Defeito antigo,
   consertado em 14/08 junto com a barra nova. */
.nav-twisty.empty { visibility: hidden; }

.nav-label {
  flex: 1;
  min-width: 0;
  padding: 9px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 450;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.nav-add {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-add:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }

/* Sempre um pouco visíveis, para as ações serem descobertas. */
.nav-actions { display: flex; gap: 1px; padding-right: 5px; flex: none; opacity: .42; transition: opacity .15s; }
.nav-item:hover .nav-actions, .nav-item.on .nav-actions { opacity: 1; }
.nav-actions .icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.nav-children { display: none; }
.nav-children.open { display: block; }

.nav-empty { padding: 10px 14px; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }


/* =================================================================== conteúdo */

/* mais escuro que a barra (#12151b): é o contraste entre os dois que dá a
   profundidade que faltava */
.content { position: relative; flex: 1; min-width: 0; background: #07080b; }
/* fundo preto: nada de faixa branca aparecendo na borda ou no fim do conteúdo */
.stage { display: block; width: 100%; height: 100%; border: 0; background: #000; }

.empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.empty-inner { max-width: 400px; text-align: center; }
.empty-mark {
  width: 58px; height: 58px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border: 1px dashed #2e333f;
  border-radius: 16px;
  color: var(--ink-3);
  font-size: 24px;
  font-weight: 300;
}
.empty h2 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.empty p { margin: 0 0 24px; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }

/* botão de menu no celular */
.drawer-btn {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 55; /* abaixo do véu (59): com a gaveta aberta, tocar aqui fecha */
  width: 38px; height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}

/* botão que traz o cabeçalho de volta */
.restore-btn {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 26;
  width: 36px; height: 36px;
  place-items: center;
  border: 1px solid #2b3040;
  border-radius: 10px;
  background: rgba(12, 14, 19, .82);
  backdrop-filter: blur(8px);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
  opacity: .45;
  transition: opacity .18s, color .18s;
}
.restore-btn:hover { opacity: 1; color: #fff; }

/* Ocultar o cabeçalho / apresentar esconde o menu INTEIRO. Com a barra virando
   COLUNA DE GRADE, esconder é `display:none` nela e a grade fecha o espaço
   sozinha — não existe mais painel nem espaçador para esconder junto. */
body.chrome-hidden .sidebar,
body.chrome-hidden .drawer-btn { display: none !important; }
body.chrome-hidden .body,
body.presenting .body { grid-template-columns: minmax(0, 1fr); }
body.chrome-hidden .restore-btn { display: grid; }
body.presenting .restore-btn { display: none !important; }

/* ============================================== visão pública (somente leitura) */

/* Rede de segurança: os itens do cliente já saem da barra pelo `soAdmin` dos
   GRUPOS_BARRA, mas se um dia algum botão destes voltar por outro caminho,
   aqui ele continua invisível no link do cliente. */
body.readonly [data-action="settings"],
body.readonly [data-action="add-page"],
body.readonly [data-action="share"] { display: none !important; }

/* A bolinha continua no link do cliente: e por ela que a pessoa troca a
   propria foto e a propria senha, em "Meu perfil". */

/* ====================================================== modo apresentação */

body.presenting .sidebar,
body.presenting .drawer-btn { display: none !important; }
body.presenting { background: #000; }

.present-bar {
  display: none;
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid #2b3040;
  border-radius: 999px;
  background: rgba(12, 14, 19, .92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  transition: opacity .3s, transform .3s;
}
body.presenting .present-bar { display: flex; }
.present-bar.idle { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }

.pb-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 18px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pb-btn:hover { background: var(--surface-3); color: #fff; }
.pb-btn:disabled { opacity: .3; cursor: default; }
.pb-btn:disabled:hover { background: transparent; }

.pb-title {
  max-width: 260px;
  padding: 0 8px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-sep { width: 1px; height: 20px; margin: 0 4px; background: #2b3040; }

.pb-exit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.pb-exit:hover { background: #262b36; }
.pb-exit kbd {
  padding: 1px 5px;
  border: 1px solid #333947;
  border-radius: 4px;
  background: #101319;
  color: var(--ink-3);
  font-family: var(--font);
  font-size: 10px;
}

/* ====================================================================== menus */

.menu {
  position: absolute;
  z-index: 40;
  min-width: 232px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #24262e;
  border-radius: 13px;
  /* ⚠️ TRANSLÚCIDO, como os painéis em cascata. Estava em .97, que na prática
     é preto chapado — o Pedro reparou ("esse menu não tá translúcido por
     quê"). O desfoque é o mesmo dos painéis, para os dois parecerem a mesma
     família de vidro. */
  background: rgba(12, 13, 17, .82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .75);
}
/* ⚠️ 72 e não 40: o menu do botão direito tem que aparecer POR CIMA do
   terceiro painel (61), que é justamente de onde ele é chamado.
   A ordem das camadas: barra 60 · painel 61 · menu 72 · modal 80 · toast 85. */
.menu.ctx { position: fixed; top: 0; left: 0; min-width: 214px; z-index: 72; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover { background: var(--surface-3); }
.menu-item.on { background: var(--sel); color: var(--sel-ink); font-weight: 700; }
.menu-item.danger { color: #ff8b84; }
.menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.menu-item .ic { width: 16px; flex: none; text-align: center; color: var(--ink-3); font-size: 12px; }
.menu-item.danger .ic { color: var(--danger); }
.menu-item .sub { margin-left: auto; color: var(--ink-3); font-size: 11px; font-weight: 500; }
.menu-item.indent { padding-left: 28px; }

.menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.menu-label {
  padding: 8px 10px 5px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ===================================================================== modais */

.modal-root { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); backdrop-filter: blur(3px); }

.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 540px;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.modal.wide { max-width: 1060px; }

.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 16px 22px;
  flex: none;
  border-bottom: 1px solid var(--line-soft);
}
.modal-head h2 { flex: 1; margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }

.modal-body { flex: 1; padding: 22px; overflow-y: auto; }
.modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  flex: none;
  border-top: 1px solid var(--line-soft);
  background: #0b0d12;
}

/* editor de HTML */
.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.editor-grid > div { display: flex; flex-direction: column; min-width: 0; }
.editor-grid .textarea { flex: 1; min-height: 380px; }
.preview-frame {
  flex: 1;
  min-height: 380px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.editor-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 34px; flex-wrap: wrap; }
.editor-tools .cap { color: var(--ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.file-drop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  flex: none;
  border: 1px dashed #333947;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.file-drop:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--ink); background: var(--accent-tint); }
.file-drop input { display: none; }

.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-box {
  display: grid; place-items: center;
  width: 132px; height: 62px;
  flex: none;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11px;
  overflow: hidden;
}
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

.color-input {
  width: 46px; height: 38px;
  padding: 3px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
}

.list-manage { display: grid; gap: 6px; }
.list-manage .lm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.list-manage .lm-item .nm { flex: 1; font-size: 13.5px; font-weight: 600; }
.list-manage .lm-item .tag { color: var(--ink-3); font-size: 11px; font-weight: 650; white-space: nowrap; }

/* ============================================== telas de entrada (formulários) */

.gate-form-v { display: grid; gap: 10px; text-align: left; }
.gate-form-v .btn { width: 100%; margin-top: 4px; }
.gate-error {
  margin: 0 0 4px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: #ff8b84;
  font-size: 12.5px;
  text-align: left;
}

/* ==================================================== gerenciador de pastas */

.mgr-list { display: grid; gap: 12px; }

.mgr-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  transition: border-color .15s;
}
.mgr-card.focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.mgr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mgr-name {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  text-align: left;
}
.mgr-name:hover { color: color-mix(in srgb, var(--accent) 70%, white); }
.mgr-tags { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.pill-tag {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}
.pill-tag.on {
  border-color: var(--sel-line);
  background: var(--sel);
  color: var(--sel-ink);
}
.pill-tag.off { color: var(--ink-3); background: transparent; }

.mgr-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.stat {
  flex: 1 1 88px;
  min-width: 84px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #0c0e13;
}
.stat.wide { flex: 1 1 170px; }
.stat strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.stat.wide strong { font-size: 13.5px; font-weight: 650; }
.stat span {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stat.hot strong { color: color-mix(in srgb, var(--accent) 75%, white); }

.mgr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mgr-actions .btn { height: 34px; padding: 0 12px; font-size: 12.5px; }

/* tabela de pessoas */
.mgr-users { display: grid; gap: 4px; }
.mgr-users-head,
.mgr-user {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 76px 132px 108px;
  align-items: center;
  gap: 10px;
}
.mgr-users-head {
  padding: 0 12px 6px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mgr-user {
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}
.mgr-user.off { opacity: .5; }
.mgr-user .u-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 600; }
.mgr-user .u-name > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-user .u-login { color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.mgr-user .u-count { color: var(--ink); font-size: 14px; font-weight: 700; }
.mgr-user .u-when { color: var(--ink-2); font-size: 11.5px; }
.mgr-user .u-acts { display: flex; gap: 2px; justify-content: flex-end; }

.av.sm {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
}

/* histórico */
.mgr-hist { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.hist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #0c0e13;
}
.hist-name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-when { color: var(--ink-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }

@media (max-width: 880px) {
  .mgr-users-head { display: none; }
  .mgr-user { grid-template-columns: 1fr auto; row-gap: 4px; }
  .mgr-user .u-login, .mgr-user .u-when { grid-column: 1 / -1; }
}

/* ====================================================================== toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 85; /* acima do modal (80) — o aviso nunca fica escondido */
  max-width: 92vw;
  padding: 11px 18px;
  border: 1px solid #2b3040;
  border-radius: 999px;
  background: rgba(16, 19, 25, .96);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease-out;
}
.toast.err { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: #ff8b84; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===================================================================== mobile */

@media (max-width: 880px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-grid .textarea, .preview-frame { min-height: 220px; }
  .modal-body { padding: 18px; }
  .logo-row { flex-direction: column; align-items: stretch; }

  .drawer-btn { display: grid; }
  .content { padding-top: 0; }

  /* ---- a barra vira GAVETA ----

     ⚠️ REESCRITO EM 17/08, com a barra virando coluna do Finder.

     Antes eram duas coisas: a gaveta abria o RAIL de 80px e a informação vinha
     num painel POR CIMA, ao lado dele. Era o pedido dele de 14/08 ("assim que a
     tela ficar menor... coloca para aparecer a informação POR CIMA mesmo, SEM
     SER EXPANDIDA") — e fazia sentido enquanto o desenho tinha rail e painel.

     Agora não tem nem um nem outro: a gaveta É A COLUNA INTEIRA, deslizando de
     fora da tela com o véu atrás. Um toque no botão de menu e está tudo à vista
     de uma vez (templates, páginas, geral) — um toque MENOS do que antes, que
     precisava de menu → Páginas → página.

     A coluna sai da GRADE (a `.body` vira uma coluna só) e passa a ser `fixed`:
     é isso que faz o conteúdo ocupar a tela inteira no celular, em vez de
     dividir espaço com uma barra que está escondida.                         */
  .body { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 62;
    /* 86% da tela, com teto: numa tela de 375px dá 322 e sobra a borda do
       conteúdo aparecendo atrás, que é o que diz "isto é uma gaveta, dá para
       fechar". O padrão de 262 numa tela dessas ficaria apertado para os nomes. */
    width: min(86vw, 330px);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform .25s var(--ease-fechar);
  }
  .sidebar.open { transform: none; }

  /* a tela de conteúdo ocupa tudo, com menos respiro nas beiradas */
  /* ⚠️ OS 62px DA ESQUERDA SÃO DO BOTÃO DA GAVETA — RESERVADOS, NÃO DISPUTADOS.

     O #drawerBtn é `fixed` em top:12/left:12 com 38px de lado. No celular todo
     conteúdo começa em x=0, então ele ficava POR CIMA do título de cada tela:
     "Ajustes" aparecia como "≡stes", e o mesmo em Templates e Unidades. Medido
     com `elementFromPoint` em 375, 430, 768 e 880px (18/08) — e a regra dele é
     "eu nunca quero que tenha algo por cima de algo no site". */
  .tela-hub-head { padding: 16px 16px 12px 62px; }
  .tela-hub-head h2 { font-size: 21px; }
  .tela-hub-corpo { padding: 14px 16px 32px; }
  /* o cabeçalho quebra em duas linhas quando o título e a ação não cabem */
  .tela-hub-head { flex-wrap: wrap; }
  .tela-hub-acoes { order: 3; }

  .side-resize { display: none; } /* no dedo não se arrasta largura */
}

/* ============================================ perfis na entrada (quadradinhos) */

/* A caixa da entrada cresce quando mostra a grade de perfis. */
.gate-card:has(.perfis) { max-width: 660px; }

.perfis {
  display: grid;
  grid-template-columns: repeat(auto-fit, 118px);
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .12s;
}
.perfil:hover { background: var(--surface-2); border-color: var(--line); transform: translateY(-2px); }
.perfil:active { transform: none; }
.perfil-av {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: .5px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  transition: box-shadow .16s, outline-color .16s;
  outline: 2px solid transparent;
  outline-offset: 3px;
}
.perfil:hover .perfil-av { outline-color: color-mix(in srgb, var(--accent) 75%, transparent); }
.perfil-nome {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.perfil-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: color-mix(in srgb, var(--accent) 55%, white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gate-lock { margin: 0; font-size: 34px; opacity: .5; }

/* =============================================== gerenciador em duas colunas */

.modal-body.flush { padding: 0; }

.mgr {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  /* A LINHA precisa ser minmax(0,1fr): com `auto` ela cresce junto com o
     conteudo, estoura a altura do painel e as duas colunas passam a rolar
     juntas em vez de cada uma por conta propria. */
  grid-template-rows: minmax(0, 1fr);
  min-height: 62vh;
  max-height: 74vh;
  overflow: hidden;
}
.mgr > * { min-height: 0; }

.mgr-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  overflow: hidden;
}
.mgr-busca {
  flex: none;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  outline: none;
}
.mgr-busca:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.mgr-itens { flex: 1; display: grid; align-content: start; gap: 4px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }

.mgr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .14s, border-color .14s;
}
.mgr-item:hover { background: var(--surface-3); }
.mgr-item.on {
  background: var(--sel);
  border-color: var(--sel-line);
}
.mgr-item-av {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.mgr-item-txt { min-width: 0; display: grid; gap: 1px; }
.mgr-item-txt .nm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.mgr-item-txt .mt { font-size: 11px; color: var(--ink-3); }
.mgr-item-alerta {
  margin-left: auto;
  display: grid; place-items: center;
  width: 17px; height: 17px;
  flex: none;
  border-radius: 50%;
  background: var(--warn, #b58900);
  color: #000;
  font-size: 11px;
  font-weight: 800;
}
.mgr-nova {
  flex: none;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s, color .14s;
}
.mgr-nova:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--ink); }

.mgr-main { padding: 22px 24px 26px; overflow-y: auto; }
.mgr-vazio { margin: 0; padding: 14px 2px; color: var(--ink-3); font-size: 13px; }

.mgr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mgr-top-av {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.mgr-top-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mgr-top-txt h3 {
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 18px; font-weight: 700; letter-spacing: -.01em;
}
.mgr-top-txt span { font-size: 12px; color: var(--ink-3); }

.btn.sm { height: 30px; padding: 0 11px; font-size: 12px; }
.icon-btn.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.btn-ghost.danger { color: color-mix(in srgb, var(--danger) 75%, var(--ink)); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}
.kpi strong { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.kpi strong.sm { font-size: 13px; font-weight: 600; padding: 4px 0; }
.kpi span { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.kpi.hot { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-tint); }

.blk { margin-top: 26px; }
.blk > h4 {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.link-row { display: flex; gap: 8px; align-items: center; }
.link-row .input { flex: 1; min-width: 0; }
.link-row .btn { flex: none; text-decoration: none; display: inline-flex; align-items: center; }
.link-box .link-acts { display: flex; gap: 8px; margin-top: 10px; }
.input.mono { font-family: var(--mono); font-size: 12px; }

.grid-2 { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.grid-2 .field { flex: 1; min-width: 180px; }

/* pessoas e perfis em lista */
.pp { display: grid; gap: 5px; }
.pp-row {
  display: grid;
  /* foto · usuário · senha · botões — e nada mais.
     Quantidade de acessos e horário de entrada saíram daqui: isso é assunto
     do histórico, não da lista de quem pode entrar. */
  grid-template-columns: 32px minmax(110px, 1fr) minmax(250px, auto) max-content;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
}
.pp-row.off { opacity: .5; }
.pp-row .av {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  color: #fff; font-size: 11px; font-weight: 700;
}
.pp-user { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-user .nm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink);
}
.pp-user .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.pp-user .tags:empty { display: none; }
.pp-num strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.1; }
.pp-num span { font-size: 10.5px; color: var(--ink-3); }
.pp-when { font-size: 11.5px; color: var(--ink-2); }
.pp-acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

.pp-novo {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 13px;
}
.pp-novo .field { flex: 1; min-width: 140px; }
.pp-novo .btn, .pp-novo .icon-btn { flex: none; }
/* ⚠️ O BOTÃO "ADICIONAR" TEM TETO. "manoooo olha o tamanho do botao adicionar,
   qual a parte vc n entendeu q esse botao deve ser responsivo e nao deve ter
   rolagem lateral" — 17/08. Ele era `flex: none` sem limite nenhum e, no celular,
   a regra de grade lá embaixo o punha numa coluna `1fr`: um botão de "Adicionar"
   com 300px de largura e 40 de altura, do tamanho de um banner. Agora ele tem
   mínimo (para o dedo acertar) e MÁXIMO (para não virar cartaz), nas duas
   larguras. */
.pp-novo-add { min-width: 120px; max-width: 200px; justify-self: start; }

.hist { display: grid; gap: 2px; max-height: 230px; overflow-y: auto; }

@media (max-width: 900px) {
  .mgr { grid-template-columns: 1fr; max-height: none; }
  .mgr-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .pp-row { grid-template-columns: 32px 1fr auto; }
  .pp-row .pp-num, .pp-row .pp-when { display: none; }
}

/* O quadradinho "+ Novo perfil" saiu na 3.1: ninguem cria conta sozinho. */

/* =========================================================================
   3.1 — ícones, senha à vista, fotos, histórico, convite e celular
   ========================================================================= */

/* ------------------------------------------------------------------ ícones */

/* Todo ícone é SVG de traço e herda a cor de quem o contém — por isso ele
   fica branco no botão vermelho, apagado no texto secundário e vermelho no
   botão de perigo, sem precisar de variante. */
.ic { flex: none; display: block; }

.icon-btn > .ic,
.btn > .ic,
.pb-btn > .ic,
.drawer-btn > .ic,
.restore-btn > .ic { pointer-events: none; }

/* Botão que tem ícone E texto lado a lado. */
.btn.com-ic { gap: 8px; }
.btn.com-ic > .ic { margin-right: -2px; }

.menu-ic {
  display: grid;
  place-items: center;
  width: 18px;
  flex: none;
  color: var(--ink-2);
}
.menu-item.danger .menu-ic { color: var(--danger); }
.menu-item:hover .menu-ic { color: var(--ink); }

.ic-slot { display: grid; place-items: center; flex: none; }

/* O ícone da seta da árvore gira ao abrir, em vez de trocar de desenho. */
.nav-twisty > .ic { transition: transform .15s ease; }
.nav-twisty.open > .ic { transform: rotate(90deg); }

/* ------------------------------------------------------------ senha à vista */

.senha-box {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.senha-txt {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all;
}
.senha-txt.oculta { color: var(--ink-3); letter-spacing: .18em; user-select: none; }
.senha-box.vazia .senha-txt {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  font-style: italic;
  letter-spacing: 0;
}

/* Âmbar enquanto é provisória, verde depois que a pessoa criou a dela. */
.pill-tag.prov {
  border-color: rgba(217, 160, 20, .45);
  background: rgba(217, 160, 20, .16);
  color: #e8b33c;
}
.pill-tag.def {
  border-color: rgba(52, 168, 110, .45);
  background: rgba(52, 168, 110, .15);
  color: #4cc38a;
}

/* ------------------------------------------------------------------- fotos */

.av.tem-foto,
.perfil-av.tem-foto,
.mgr-item-av.tem-foto,
.mgr-top-av.tem-foto {
  object-fit: cover;
  background: var(--surface-3);
}

.foto-acts { display: inline-flex; align-items: center; gap: 4px; }
.foto-acts .btn { cursor: pointer; }
.foto-acts input[type='file'] { display: none; }

.foto-modal { display: grid; justify-items: center; gap: 4px; }
.av-grande, img.av-grande,
.foto-previa .av,
.foto-previa img {
  width: 96px;
  height: 96px;
  border-radius: 26px;
  font-size: 30px;
  object-fit: cover;
}
.perfil-nome-grande {
  margin: 12px 0 14px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}

/* --------------------------------------------------------------- histórico */

.tl { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.tl-host { max-height: 460px; overflow-y: auto; }
.tl-host .tl { max-height: none; }

.tl-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}
.tl-row:hover { background: var(--surface-2); }

.tl-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink-2);
}
.tl-ic.cliente { color: #6aa9ff; background: rgba(37, 99, 235, .14); }
.tl-ic.admin { color: var(--ink-2); }
.tl-row.perigo .tl-ic { color: var(--danger); background: rgba(255, 90, 82, .12); }

.tl-txt { min-width: 0; display: grid; gap: 2px; }
.tl-linha { font-size: 12.8px; line-height: 1.45; color: var(--ink-2); }
.tl-linha strong { color: var(--ink); font-weight: 650; }
.tl-pasta {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.tl-detalhe { font-size: 11.5px; color: var(--ink-3); }
.tl-quando { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; padding-top: 2px; }

/* ----------------------------------------------------------------- convite */

.cod-caixa {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

/* O anel esvazia junto com o tempo que falta: --volta vai de 1 até 0. */
.cod-anel {
  --volta: 1;
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) calc(var(--volta) * 360deg),
    var(--surface-3) 0
  );
  transition: background .9s linear;
}
.cod-anel::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--surface);
}
.cod-num {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}
.cod-lado { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.cod-rot {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cod-restam { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.cod-input {
  font-size: 24px;
  text-align: center;
  letter-spacing: .32em;
  font-weight: 700;
}

/* Chavinha pequena, usada dentro da linha de um perfil. */
.switch.mini { gap: 7px; }
.switch.mini .track { width: 32px; height: 18px; }
.switch.mini .track::after { width: 14px; height: 14px; }
.switch.mini input:checked + .track::after { transform: translateX(14px); }
.switch.mini input:checked + .track { background: var(--accent); }
.switch.mini .label { font-size: 11px; color: var(--ink-3); }

/* A etiqueta e os pontinhos nunca encolhem: quem cede espaço é o resto. */
.senha-box .pill-tag { flex: none; }
.senha-box .icon-btn { flex: none; }
.senha-txt { min-width: 96px; flex: 1 1 auto; }

/* =========================================================================
   CELULAR — o painel inteiro precisa funcionar, não só o lado do cliente
   ========================================================================= */

@media (max-width: 780px) {
  /* ---- modal: ocupa a tela toda, sem moldura sobrando ----

     Antes o modal ficava com 20px de respiro em volta e o fundo era
     semitransparente: dava para ver a página vermelha por trás, bem ao lado
     da barra de rolagem. Agora ele encosta nas bordas e o fundo é opaco. */
  .modal-root { padding: 0; }
  .modal-backdrop { background: rgba(6, 7, 10, .92); backdrop-filter: blur(6px); }
  .modal,
  .modal.wide {
    max-width: none;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .modal-head { padding: 14px 10px 14px 16px; }
  .modal-head h2 { font-size: 15px; }
  .modal-body { padding: 16px; }
  .modal-foot { padding: 12px 16px; flex-wrap: wrap; }
  .modal-foot > div { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }

  /* ---- gerenciador de clientes: uma coluna só ----

     No celular tudo rola junto, numa página só: sobe a lista de clientes,
     desce o painel do cliente escolhido. Duas áreas de rolagem no mesmo
     dedo é o tipo de coisa que trava e irrita. */
  .mgr {
    /* minmax(0,1fr) e não 1fr: com 1fr a coluna nunca encolhe abaixo do
       conteúdo, e o painel estourava a largura da tela. */
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    max-height: none;
  }
  .mgr-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px;
    max-height: none;
    overflow: visible;
  }
  .mgr-itens { overflow: visible; }
  .mgr-main { padding: 16px 14px 22px; overflow: visible; }

  /* cabeçalho do cliente: nome em cima, botões numa faixa embaixo */
  .mgr-top { flex-wrap: wrap; gap: 10px 8px; }
  .mgr-top-av { width: 34px; height: 34px; border-radius: 11px; font-size: 12px; }
  .mgr-top-txt { flex: 1 1 0; min-width: 0; }
  .mgr-top h3 { font-size: 17px; }
  .mgr-top .btn { flex: 1 1 auto; }
  .mgr-top > .icon-btn { flex: none; }

  .kpis { grid-template-columns: repeat(2, 1fr); }

  /* ---- cada pessoa vira um cartão, em vez de uma linha apertada ---- */
  .pp-row {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: 12px;
    padding: 12px;
  }
  .pp-row .senha-box { grid-column: 1 / -1; flex-wrap: wrap; }
  .pp-row .pp-acts { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }

  .pp-novo { flex-direction: column; align-items: stretch; }
  .pp-novo .field { max-width: none !important; }
  .pp-novo .icon-btn { align-self: flex-start; }

  /* ---- link do cliente ---- */
  .link-row { flex-direction: column; align-items: stretch; }
  .link-row .btn, .link-row .input { width: 100%; }
  .link-acts { flex-wrap: wrap; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 .field { max-width: none !important; }

  /* ---- histórico ---- */
  .tl-row { grid-template-columns: 26px minmax(0, 1fr); row-gap: 2px; }
  .tl-quando { grid-column: 2; text-align: left; }
  .tl { max-height: none; }
  .tl-host { max-height: none; }

  /* ---- convite ---- */
  .cod-caixa { flex-direction: column; text-align: center; gap: 14px; }
  .cod-lado { justify-items: center; }

  /* ---- configurações ---- */
  .editor-grid { grid-template-columns: 1fr; }
  .seg { flex-wrap: wrap; }
  .foto-acts { flex-wrap: wrap; justify-content: center; }
}

/* Telas bem estreitas: nada pode encostar na borda nem sumir. */
@media (max-width: 430px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .mgr-side { max-height: 38vh; }
  .perfis { gap: 14px; }
  .perfil-av { width: 66px; height: 66px; font-size: 21px; }
  .perfil-nome { max-width: 78px; font-size: 11.5px; }
  .cod-anel { width: 104px; height: 104px; }
  .cod-num { font-size: 19px; }
  .modal-head { padding: 12px 8px 12px 14px; }
  .modal-body { padding: 14px; }
}

/* O modal fica opaco em qualquer largura: nunca deixar a página aparecer
   por trás, muito menos ao lado da barra de rolagem. */
.modal-backdrop { background: rgba(6, 7, 10, .88); }

/* Em telas menores o "último acesso" some antes da senha: saber a senha é
   mais importante do que saber o horário. */
/* Faltou largura? A senha desce para a linha de baixo, inteira — nunca
   espremida por cima de outra coisa. */
@media (max-width: 1240px) and (min-width: 781px) {
  .pp-row {
    grid-template-columns: 32px minmax(0, 1fr) max-content;
    row-gap: 10px;
  }
  .pp-row .senha-box { grid-column: 1 / -1; }
}

/* Véu do menu lateral no celular: tocar fora fecha. */
.drawer-veil {
  position: fixed;
  inset: 0;
  z-index: 59; /* logo abaixo da barra (60): tocar aqui fecha */
  background: rgba(4, 5, 8, .55);
  backdrop-filter: blur(2px);
  animation: veu-in .18s ease-out;
}
@keyframes veu-in { from { opacity: 0 } to { opacity: 1 } }
@media (min-width: 881px) { .drawer-veil { display: none !important; } }

/* Com o menu aberto, o botão vira "fechar" e fica por cima da barra. */
body.com-menu .drawer-btn { z-index: 63; left: auto; right: 14px; }
body.com-menu .drawer-btn > .ic { transform: rotate(90deg); transition: transform .2s ease; }

/* O "x" de tirar a foto anda colado no botão da foto, como um par só. */
.foto-acts { gap: 2px; }
.icon-btn.tirar-foto { color: var(--ink-3); }
.icon-btn.tirar-foto:hover { color: var(--danger); }

/* Nada pode ficar por cima de nada. A linha de uma pessoa é uma grade de
   verdade: cada pedaço tem a sua coluna, ninguém invade a do vizinho. */
.pp-row > * { min-width: 0; }
.pp-user .nm { min-width: 0; }
.senha-box { flex-wrap: nowrap; }
.pp-acts .btn.sm { white-space: nowrap; }

/* Filtro por cliente no histórico: clica no cliente para ver só o dele. */
.filtro-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.chip-filtro:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--ink); }
.chip-filtro.on {
  border-color: var(--sel-line);
  background: var(--sel);
  color: var(--sel-ink);
}
.chip-cor { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* =========================================================================
   CENTRAL DE AJUSTES — abas na esquerda, conteúdo na direita (estilo Railway)

   A janela tem SEMPRE o mesmo tamanho, em qualquer aba. Nada de uma tela
   comprida e outra curta: quem rola é o painel da direita.
   ========================================================================= */

.modal.hub-modal {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  height: min(680px, calc(100dvh - 48px));
  max-height: none;
}

.hub {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}

/* ---- coluna das abas ---- */
.hub-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.hub-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.hub-item:hover { background: var(--surface-3); color: var(--ink); }
.hub-item.on {
  background: var(--sel);
  border-color: var(--sel-line);
  color: var(--sel-ink);
}
.hub-item.perigo { color: var(--danger); margin-top: auto; }
.hub-item.perigo:hover { background: rgba(255, 90, 82, .12); color: #ff8b84; }

.hub-ic { display: grid; place-items: center; width: 18px; flex: none; }
.hub-rot { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- painel do conteúdo ---- */
.hub-pane {
  min-height: 0;
  padding: 24px 26px 28px;
  overflow-y: auto;
}

.hub-topo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.hub-topo-txt { flex: 1; min-width: 0; }
.hub-topo h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.hub-topo p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.hub-topo .btn { flex: none; }

.hub-sub {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hub-form { max-width: 420px; display: grid; gap: 4px; }
.hub-form .btn { margin-top: 8px; justify-self: start; }

.hub-cliente {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.hub-cliente-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hub-cliente-txt strong { font-size: 16px; font-weight: 700; }
.hub-cliente-txt span { font-size: 12px; color: var(--ink-3); }

/* ═══ OS SITES DE UM CLIENTE, dentro do gerenciador (19/08, §AT) ═══════════

   "ELE TEM Q ME MOSTRAR QUAIS SITES ESSE CLIENTE TEM... QUAIS SITES O MIGUEL TEM
   EM DIFERENTES TEMPLATES". Uma linha por site, com o template como etiqueta ao
   lado do nome.

   ⚠️ ELA ENVOLVE (`flex-wrap`) em vez de cortar. Este bloco vive num painel que
   vai de 375px (celular) a 1080px, e a regra da casa é "nada pode ficar cortado,
   nem no computador nem no celular". Numa largura pequena a etiqueta e os botões
   descem para a linha de baixo; o nome nunca encolhe abaixo do legível. */
.mgr-sites { display: grid; gap: 8px; margin-bottom: 14px; }
.mgr-site {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
}
.mgr-site-ic { display: inline-flex; flex: none; color: var(--ink-3); }
.mgr-site-txt { flex: 1 1 160px; min-width: 0; display: grid; gap: 1px; }
.mgr-site-txt strong { font-size: 14px; font-weight: 700; }
.mgr-site-txt span { font-size: 11.5px; color: var(--ink-3); }

/* ═══ FATIA C — COMPARTILHAR UM SITE (19/08, §AU) ═══════════════════════════

   "aparece em algum lugar que aquele site, aquele cliente, é compartilhado com
   alguem" — o selo, a janela de escolher a pessoa e o aviso de convite.        */

/* O SELO. Ele é uma `pill-tag` como as outras (mesma família visual), com um fio
   de contorno para se separar do template, que fica ao lado dele na mesma linha.
   ⚠️ `flex: none` e `white-space: nowrap`: ele divide a linha com o nome do site,
   e o nome é a única coisa que não pode encolher abaixo do legível. */
.selo-comp { flex: none; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.selo-comp.clicavel { cursor: pointer; border: 0; font: inherit; }
.selo-comp.clicavel:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* as duas marcas da linha do Finder (o número de pendentes e o selo) */
.fnd-marcas { display: inline-flex; align-items: center; gap: 6px; }

/* A LISTA DE PESSOAS, na janela de compartilhar e na de "quem edita".
   ⚠️ `flex-wrap`: esta janela abre em 375px também, e ali o botão desce para a
   linha de baixo em vez de espremer o nome. */
.comp-lista { display: grid; gap: 8px; margin: 6px 0 16px; }
.comp-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
}
.comp-ic { display: inline-flex; flex: none; color: var(--ink-3); }
.comp-txt { flex: 1 1 150px; min-width: 0; display: grid; gap: 1px; }
.comp-txt strong { font-size: 13.5px; font-weight: 650; }
.comp-txt span { font-size: 11.5px; color: var(--ink-3); }

/* O AVISO DE CONVITE, no topo do gerenciador de clientes.
   ⚠️ Ele usa o vermelho da casa só no FIO da esquerda, e não no fundo: é um aviso
   de que existe algo para ele, não um erro. Fundo vermelho aqui gritaria. */
.comp-convites { margin-bottom: 18px; }
.comp-convite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* a explicação do que o convidado NÃO recebe, na ficha de um cliente de outro */
.mgr-nota-comp {
  max-width: 620px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
}
.mgr-nota-comp p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; }
.mgr-nota-comp p:last-child { margin: 0; }

/* A BOLINHA DE CONVITE, na linha do perfil no pé da barra.
   ⚠️ `flex: none` e 17px: ela entra numa linha que já tem foto, nome e os três
   pontinhos, numa coluna que vai a 190px. Quem encolhe é o nome (ellipsis). */
.sb-convites {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}

/* ═══ PROMPT 2 DE 19/08 — PROFUNDIDADE, COM NÚMEROS (§AW) ═══════════════════

   "o maior guia nao é colocar texto em tudo mas sim deixar visualmente facil de
   ver e entender as coisas"

   ⚠️ TODA SEÇÃO TEM TRÊS PARTES, e as três importam: ícone + rótulo em MAIÚSCULAS
   + uma pílula com a CONTAGEM. O ícone dá a família (site = janelinha; acesso =
   bolinha de pessoa), o rótulo diz o quê, e a contagem responde "quantos" antes de
   ele contar com o dedo. Ver a tela de longe tem de responder "aqui é site, aqui é
   gente" sem ler uma palavra.                                                  */

.secao { margin-bottom: var(--e-5); }
/* ⚠️ 32px ENTRE SEÇÕES (--e-5), e é medido no teste. Era o "tudo colado" da queixa
   dele: com 12 ou 16px, dois cartões diferentes leem como um só bloco. */
.secao:last-child { margin-bottom: 0; }

.secao-cab {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  margin-bottom: var(--e-2);
}
.secao-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--sup-2);
  color: var(--ink-2);
}
/* o ícone da seção ganha a cor da família: site é vermelho (é o produto), gente é
   azulado (é quem usa). ⚠️ E os dois são ÍCONE SVG, nunca emoji — regra dele. */
.secao-ic.site { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.secao-ic.gente { color: #6aa9ff; background: rgba(106, 169, 255, .14); }
.secao-rot {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.secao-conta {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--sup-2);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.secao-acao { margin-left: auto; }

/* O CARTÃO. ⚠️ `--sup-1` + fio + raio 14 + a sombra: são os quatro juntos que dão
   a profundidade. Tirando a sombra, ele vira um retângulo desenhado; tirando o
   fio, ele se dissolve no fundo. */
.cartao {
  padding: var(--e-3);
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--sup-1);
  box-shadow: var(--sombra);
}
.cartao-vazio { display: grid; gap: var(--e-2); place-items: start; }

/* O ITEM dentro do cartão: `--sup-2`, um degrau acima do cartão.
   ⚠️ `flex-wrap`: estas telas vão de 375px a 1080px, e ali o botão desce para a
   linha de baixo em vez de espremer o nome. */
.item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-radius: 10px;
  background: var(--sup-2);
}
.item + .item { margin-top: var(--e-1); }
.item-ic { display: inline-flex; flex: none; color: var(--ink-3); }
.item-txt { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; }
.item-txt strong { font-size: 14px; font-weight: 650; }
.item-txt span { font-size: 11.5px; color: var(--ink-3); }
/* ⚠️ SELECIONADO É CINZA, e não vermelho: a regra que ele repetiu três vezes. */
.item.on { background: var(--sel); box-shadow: inset 0 0 0 1px var(--sel-line); }

/* ═══ "AINDA NÃO TEM NADA" — um ESTADO, e não uma frase cinza no vazio ════════

   "eu criei um cliente PEDRO, porem deveria aparecer a mensagem de q esse cliente
   nao tem nenhum site, e a opcão de criar um site para ele"

   ⚠️ ÍCONE + FRASE + BOTÃO, os três juntos. Cliente sem site é o caso MAIS comum
   logo depois de criar um cliente; se a tela ficar quieta ali, ele acha que o
   sistema não salvou. E o botão fica DENTRO do estado, não escondido no cabeçalho:
   o próximo passo tem de estar onde o olho já está. */
.nada-ainda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px dashed var(--linha);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.nada-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.nada-txt { flex: 1 1 220px; min-width: 0; display: grid; gap: 3px; }
.nada-txt strong { font-size: 14.5px; font-weight: 700; }
.nada-txt span { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* ═══ A TELA DE PUBLICAR, com CAIXA DE MARCAR (19/08, §AW) ══════════════════

   "nao tem como eu selecionar se eu quero subir todos os arquivos"

   ⚠️ A CAIXA É DESENHADA, e não o `<input type=checkbox>` do navegador: o nativo é
   azul do sistema no macOS, e ficaria sendo a única coisa azul-do-sistema num tema
   inteiro escuro. Marcado é VERDE (é estado, não ação — vermelho aqui pareceria
   alerta em cima de cada linha). */
.pub-linha {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 9px var(--e-2);
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s;
}
.pub-linha:hover { background: rgba(255, 255, 255, .05); }
.pub-linha input { position: absolute; opacity: 0; pointer-events: none; }
.pub-caixa {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--linha);
  border-radius: 5px;
  background: var(--sup-0);
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.pub-linha input:checked + .pub-caixa {
  background: #58cc8b;
  border-color: #58cc8b;
  color: #0b0c10;
}
.pub-linha input:focus-visible + .pub-caixa { box-shadow: 0 0 0 2px var(--sel-line); }
.pub-ic { display: inline-flex; flex: none; color: var(--ink-3); }
.pub-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}
/* "Marcar todas" é separado por um fio, e não por espaço: ele manda em todas as
   linhas de baixo, e o fio diz isso sem uma palavra. */
.pub-todas {
  margin-bottom: var(--e-1);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--linha);
  border-radius: 9px 9px 0 0;
  font-weight: 650;
}

/* ═══ PROMPT 1 DE 19/08 — ACESSO, PERMISSÕES, HISTÓRICO NOVO (§AV) ══════════ */

/* "Entrar com e-mail e senha", embaixo da grade de perfis.
   ⚠️ Discreto de propósito: quem usa todo dia clica na foto. Isto é a porta para
   quem quer digitar — e é o que faz o pedido "login com e-mail para todos" existir
   de verdade, sem tirar a grade que ele gosta. */
.gate-outro {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.gate-outro:hover { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .2); }

/* ONLINE AGORA. ⚠️ Verde, e não vermelho: nesta casa vermelho é AÇÃO, não estado
   (regra dele desde 14/08). Um ponto e a palavra, nada de animação piscando. */
.pill-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(60, 200, 120, .14);
  color: #58cc8b;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pill-online .ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #58cc8b;
}

/* o e-mail na linha de um perfil. ⚠️ `min-width: 0` + ellipsis: e-mail é comprido
   e ele divide a linha com o nome, o cargo, a unidade e a senha. */
.pp-email {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--ink-3);
}
.pp-email.vazio { font-style: italic; opacity: .7; }
/* ⚠️ O E-MAIL CLICÁVEL (19/08, §AX). Ele era só texto, e era o único lugar do
   sistema que mostrava o e-mail de um perfil sem deixar mexer.
   O fio pontilhado no estado vazio é de propósito: "+ pôr e-mail" com contorno lê
   como "aqui falta algo, e dá para preencher"; cheio, ele é só o e-mail. */
.pp-email.clicavel {
  border: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pp-email.clicavel:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pp-email.clicavel.vazio {
  font-style: normal;
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--linha);
  border-radius: 999px;
}

/* ═══ O PAINEL DE PERMISSÕES DE UM GESTOR ═══
   Ele mora ABAIXO da linha da pessoa, e não dentro: a `.pp-row` é um flex de uma
   linha, e oito chaves ali dentro virariam uma nona coluna. */
.perm-caixa {
  margin: -4px 0 14px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: rgba(255, 255, 255, .02);
}
.perm-tit {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* ⚠️ `auto-fit` com mínimo de 210px: em 375px vira uma coluna, em 1080 vira
   quatro — sem uma única @media, e sem nada cortado em nenhuma largura. */
.perm-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 16px;
}
.perm-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.perm-item input { position: absolute; opacity: 0; pointer-events: none; }
.perm-item .track {
  position: relative;
  flex: none;
  width: 32px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  background: #2b313d;
  transition: background .15s;
}
.perm-item .track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9aa2b3;
  transition: transform .15s, background .15s;
}
/* ⚠️ LIGADO É VERDE, e não o vermelho da casa: aqui "ligado" é um ESTADO (esta
   pessoa pode), e não uma ação. Vermelho num monte de chavinhas ligadas pareceria
   um painel cheio de alertas. */
.perm-item input:checked + .track { background: rgba(60, 200, 120, .35); }
.perm-item input:checked + .track::after { transform: translateX(14px); background: #58cc8b; }
.perm-item input:focus-visible + .track { box-shadow: 0 0 0 2px var(--sel-line); }
.perm-txt { display: grid; gap: 1px; min-width: 0; }
.perm-txt strong { font-size: 12.5px; font-weight: 650; }
.perm-txt span { font-size: 11px; color: var(--ink-3); line-height: 1.4; }

/* ═══ OS FILTROS DO HISTÓRICO NOVO ═══
   ⚠️ `auto-fit` de novo, e por quê: são quatro campos (site, ação, de, até) que em
   375px têm de virar uma coluna. Com quatro colunas fixas, o `<select>` do site
   ficaria com 70px e o nome do cliente não caberia. */
.hist-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

/* O SITE em cada linha do histórico. ⚠️ Ele é discreto de propósito: a linha já
   tem quem, o quê, o cliente (colorido) e quando — um quinto elemento gritando
   viraria ruído. E "sem site" é ainda mais discreto: é a linha antiga. */
.tl-site {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 10.5px;
  white-space: nowrap;
}
.tl-site.vazio { border-style: dashed; opacity: .6; }

/* ═══ A ESCOLHA DE SITE DO CLIENTE (o segundo passo da entrada dele) ═══ */
.escolha-sites { display: grid; gap: 10px; }
.escolha-site {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.escolha-site:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}
.escolha-site-ic { display: inline-flex; flex: none; color: var(--accent); }
.escolha-site-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.escolha-site-txt strong { font-size: 15px; font-weight: 700; }
.escolha-site-txt span { font-size: 12px; color: var(--ink-3); }
.escolha-site-seta { display: inline-flex; flex: none; color: var(--ink-3); }

/* ---- zona de perigo ---- */
.perigo-caixa {
  max-width: 520px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: var(--radius-lg);
  background: rgba(255, 90, 82, .06);
}
.perigo-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--danger); }
.perigo-topo strong { font-size: 13px; letter-spacing: .02em; }
.perigo-caixa p { margin: 0 0 8px; font-size: 12.8px; line-height: 1.6; color: var(--ink-2); }
.btn.danger-btn { background: var(--danger); border-color: transparent; box-shadow: none; }
.btn.danger-btn:hover { background: color-mix(in srgb, var(--danger) 86%, white); }

/* ---- celular: as abas viram uma faixa em cima ---- */
@media (max-width: 780px) {
  .modal.hub-modal { width: 100%; height: 100dvh; }
  .hub {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .hub-nav {
    flex-direction: row;
    gap: 6px;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .hub-nav::-webkit-scrollbar { height: 0; }
  .hub-item { width: auto; flex: none; padding: 8px 12px; }
  .hub-item.perigo { margin-top: 0; }
  .hub-pane { padding: 16px 14px 22px; }
  .hub-topo { flex-wrap: wrap; }
  .hub-cliente { flex-wrap: wrap; }
  .hub-cliente-txt { flex: 1 1 100%; }
}

/* No celular, os botõezinhos de copiar/gerar senha ficam lado a lado, e não
   um por linha. */
@media (max-width: 780px) {
  .pp-novo { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; }
  .pp-novo .field { grid-column: 1 / -1; }
  .pp-novo .icon-btn { align-self: center; }
  /* ⚠️ `justify-self: start` e não `grid-column: 1` sozinho: a coluna 1 é `1fr`,
     então o botão esticava para 300px. Ver o comentário do `.pp-novo-add`. */
  .pp-novo .btn-primary { grid-column: 1; justify-self: start; }
}

/* A foto da pessoa nas telas de entrada, no lugar do logo. */
.gate-av {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  object-fit: cover;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin: 0 auto;
}

/* Cabeçalho do menu com a foto de quem está logado. */
.menu-quem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.menu-quem .av-menu { width: 30px; height: 30px; border-radius: 10px; font-size: 11px; }
.menu-quem span { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* Cor de cada cliente: bolinha que abre a paleta. */
.cor-caixa { position: relative; display: inline-flex; }
.cor-btn {
  width: 26px;
  height: 26px;
  flex: none;
  border: 2px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: transform .12s, border-color .14s;
}
.cor-btn:hover { transform: scale(1.08); border-color: var(--ink-3); }
.cor-paleta {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, 26px);
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}
.cor-opcao {
  width: 26px;
  height: 26px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .12s;
}
.cor-opcao:hover { transform: scale(1.12); }
.cor-opcao.on { border-color: #fff; }

/* Rótulo em cima de cada faixa de filtros. */
.filtro-rot {
  display: block;
  margin: 4px 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.filtro-chips + .filtro-rot { margin-top: 16px; }

/* A etiqueta do cliente no histórico usa a cor dele. */
.tl-pasta { border-width: 1px; border-style: solid; font-weight: 600; }

/* A linha da pessoa abre a ficha dela ao ser clicada. */
.pp-row.clicavel { cursor: pointer; transition: border-color .14s, background .14s; }
.pp-row.clicavel:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--surface-3);
}

/* ---- ficha da pessoa ---- */
.ficha-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.ficha-topo .av,
.ficha-topo img.av {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  font-size: 24px;
  object-fit: cover;
  flex: none;
}
.ficha-topo-txt { flex: 1; min-width: 0; display: grid; gap: 7px; }
.ficha-topo-txt strong {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ficha-topo-txt .tags { display: flex; gap: 6px; flex-wrap: wrap; }

.ficha-nums { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ficha-num {
  flex: 1 1 130px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
}
.ficha-num strong { display: block; font-size: 19px; font-weight: 700; line-height: 1.15; }
.ficha-num strong.sm { font-size: 13px; font-weight: 650; }
.ficha-num span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.ficha-hist { max-height: 260px; overflow-y: auto; }

@media (max-width: 780px) {
  .ficha-topo { flex-wrap: wrap; }
  .ficha-topo-txt { flex: 1 1 100%; }
  .ficha-num { flex: 1 1 100%; }
}

/* Os botões de baixo da ficha não precisam esticar a tela toda. */
.ficha .row.tight { align-items: center; }
.ficha .row.tight .btn { flex: 0 0 auto; }

/* A bolinha de iniciais precisa centralizar o texto em QUALQUER tamanho —
   sem isso as letras ficam encostadas no canto de cima. */
.av, .av-grande, .av-menu, .perfil-av, .gate-av, .mgr-top-av, .mgr-item-av {
  display: grid;
  place-items: center;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}
img.av, img.av-grande, img.av-menu, img.perfil-av, img.gate-av, img.mgr-top-av {
  display: block;
  object-fit: cover;
}

/* Foto da ficha: quadrado com canto suave, letras centradas e no tamanho certo. */
.ficha-topo .av,
.ficha-topo img.av {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Botão de voltar da ficha, no alto do painel. */
.voltar-ficha { margin-bottom: 16px; }

/* ------------------------------------------------------------ baixar em PDF */

.btn-baixar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 40px;
  padding: 0 14px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-baixar:hover {
  background: var(--surface-3);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--ink);
}
.btn-baixar.wide { width: 100%; margin-top: 8px; }

/* O cliente também baixa: é o material dele. */
body.readonly .btn-baixar { display: inline-flex; }

/* ---- a escolha: página única ou documento completo ---- */
.baixar { display: grid; gap: 10px; }
.baixar-opcao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  transition: border-color .14s, background .14s, transform .06s;
}
.baixar-opcao:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-tint);
}
.baixar-opcao:active { transform: translateY(1px); }
.baixar-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  background: var(--surface-3);
  color: var(--ink-2);
}
.baixar-opcao:hover .baixar-ic { color: #fff; }
.baixar-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.baixar-txt strong { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.baixar-txt span {
  font-size: 12px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.baixar-seta { color: var(--ink-3); flex: none; }

/* ---- "gerando o PDF…" ----

   O PDF é montado no servidor e um documento inteiro leva alguns segundos. O
   toast normal desaparece em 2,6 s, então o aviso de progresso é este, que fica
   na tela até o arquivo chegar. Enquanto ele está de pé, o botão de baixar
   fica travado (dois PDFs ao mesmo tempo só fazem o servidor penar). */

.pdf-prog {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.pdf-prog-roda {
  width: 15px;
  height: 15px;
  flex: none;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pdf-gira .7s linear infinite;
}
@keyframes pdf-gira { to { transform: rotate(360deg); } }
.pdf-prog-txt { min-width: 0; }

.btn-baixar:disabled { opacity: .55; cursor: progress; }

/* No celular o aviso vira uma faixa de canto a canto e o texto quebra em duas
   linhas. Com "…" no fim ficava CORTADO, e cortado não passa. */
@media (max-width: 640px) {
  .pdf-prog {
    left: 12px;
    right: 12px;
    bottom: 14px;
    transform: none;
    max-width: none;
    border-radius: 16px;
    padding: 12px 14px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-prog-roda { animation-duration: 2s; }
}

/* =========================================================================
   PROJETOS — a aba dos modelos e a janela de escolher

   Um projeto guarda o INÍCIO e a cor; toda pasta criada dentro dele nasce
   assim. Ver o bloco dos projetos no db.js e a §7-B do CLAUDE.md.
   ========================================================================= */

.proj-lista { display: grid; gap: 14px; }

.proj-cartao-grande {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 16px 16px 14px;
  transition: border-color .18s, box-shadow .18s;
}
/* o projeto que veio por atalho ("Editar este projeto…") nasce destacado, para
   a pessoa achar de imediato numa lista comprida */
.proj-cartao-grande.foco {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.proj-cab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.proj-cab-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.proj-cab-txt { flex: 1; min-width: 0; }
.proj-cab-txt h4 { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.proj-cab-txt p { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.proj-cab-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }

.proj-pastas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

.proj-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* o cartão de "Novo projeto": tracejado, para ler como "aqui se acrescenta" */
.proj-novo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px dashed #333947;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.proj-novo:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.proj-novo-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--accent);
}
.proj-novo strong { display: block; font-size: 14px; font-weight: 650; margin-bottom: 2px; }
.proj-novo span span { color: var(--ink-3); font-size: 12.5px; }

.proj-vazio {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 30px 20px;
  border: 1px dashed #2b3040;
  border-radius: 16px;
  text-align: center;
}
.proj-vazio-ic { color: var(--ink-3); }
.proj-vazio h4 { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.proj-vazio p { margin: 0; max-width: 380px; color: var(--ink-2); font-size: 12.5px; line-height: 1.6; }

/* ---- a paleta de cor do projeto ---- */

.proj-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.proj-cor {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-3);
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.proj-cor:hover { transform: scale(1.12); }
.proj-cor.on { border-color: #fff; }

/* ---- a janela "de qual projeto é esta pasta?" ---- */

.proj-escolha { display: grid; gap: 8px; }

.proj-cartao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .06s;
}
.proj-cartao:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--surface-3);
}
.proj-cartao:active { transform: translateY(1px); }
.proj-cartao-ic { display: grid; place-items: center; flex: none; color: var(--accent); }
.proj-cartao-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.proj-cartao-txt strong { font-size: 14px; font-weight: 650; }
.proj-cartao-txt span { color: var(--ink-2); font-size: 12px; line-height: 1.45; }
.proj-cartao-seta { color: var(--ink-3); flex: none; }

/* ═══════ A ESCOLHA DE TEMPLATE NA JANELA DE NOVA PASTA (FASE 3) ════════════

   Uma escolha obrigatória, nada pré-marcado, e o marcado em CINZA — nunca
   vermelho. O Pedro reclamou disso três vezes (§7-F item 9, §7-G item 1): o
   vermelho fica onde é AÇÃO (o botão Criar) ou INDICAÇÃO, e "selecionado" é
   cinza claro, pelos tokens --sel / --sel-line / --sel-ink.                  */
.tpl-bloco { margin-top: 18px; }
.tpl-rot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.tpl-rot strong {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-2);
}
/* auto-fit com minmax: em janela estreita ele empilha sozinho, e nada fica
   cortado nem sai pela lateral (regra da casa: nada cortado, nem no celular) */
.tpl-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.tpl-op {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}
.tpl-op:hover { background: var(--surface-3); border-color: var(--line-2); }
.tpl-op.on {
  background: var(--sel);
  border-color: var(--sel-line);
  color: var(--sel-ink);
}
/* a marca de escolhido não é só a cor: um fio à esquerda, que se enxerga mesmo
   em tela ruim e para quem não distingue bem os cinzas */
.tpl-op.on { box-shadow: inset 3px 0 0 0 var(--accent); }
.tpl-op-ic { display: grid; place-items: center; flex: none; color: var(--ink-2); margin-top: 1px; }
.tpl-op.on .tpl-op-ic { color: var(--accent); }
.tpl-op-txt { display: grid; gap: 3px; min-width: 0; }
.tpl-op-txt strong { font-size: 13.5px; font-weight: 650; }
.tpl-op-txt span { color: var(--ink-2); font-size: 11.5px; line-height: 1.4; }
.tpl-op.on .tpl-op-txt span { color: var(--ink-2); }
.tpl-mais { border-style: dashed; align-items: center; }
.tpl-mais .tpl-op-txt strong { color: var(--ink-2); }

/* aviso de uma linha com ícone, usado no editor do INÍCIO de um projeto */
.dica-linha {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
}
.dica-linha > .ic { flex: none; margin-top: 1px; color: var(--accent); }

@media (max-width: 780px) {
  .proj-cab { flex-wrap: wrap; }
  .proj-cab-tags { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .proj-acoes .btn { flex: 1 1 auto; }
}

/* =========================================================================
   PAINEL LARGO + CONFIGURAÇÕES DENTRO DO PAINEL

   ⚠️ A tela cheia dos Ajustes MORREU em 14/08. O Pedro odiou: "permaneça os
   ajustes ali translúcido e pequeno, e à medida que eu for passando o mouse ele
   vai me mostrando uma aba minimizada à direita, igual um Mac mesmo. Sem tela
   cheia, aba com fundo transparente, bonito, minimalista, compacto."

   Então o conteúdo de configuração virou painel — só que LARGO, porque o
   gerenciador não caberia nos 300px de uma lista.
   ========================================================================= */

/* ⚠️ O PAINEL DE CONFIGURAÇÃO TEM TAMANHO FIXO (14/08, à noite).

   O Pedro pediu: "todas as abas com o mesmo tamanho, sem mais nem menos... um
   quadrado bonitinho", e "eu queria que elas não tivessem rolagem". Antes cada
   aba nascia da altura do próprio conteúdo, então trocar de categoria mudava o
   tamanho e a posição do painel — e as categorias de baixo abriam no pé da
   tela. Agora o tamanho é UM SÓ, escrito aqui, e o alinharUm() do app.js só
   centraliza o painel na tela. Quem tem lista longa (o histórico, ou muitos
   clientes) rola por dentro; o quadro em volta não muda.

   A largura subiu de 520 para 730 porque em 520 o conteúdo empilhava: as
   etiquetas do projeto viravam uma coluna e os quatro números do topo se
   espremiam. 262 (barra) + 300 (lista) + 730 = 1292 — cabe folgado no Mac do
   Pedro. Numa tela menor o `min()` aperta o painel, e aí os blocos `@container`
   lá embaixo devolvem sozinhos o empilhamento: nada fica cortado.           */

/* ⚠️ O PAINEL LARGO NÃO EXISTE MAIS (17/08).

   Aqui moravam --painel-largo (730px), --painel-alto e o X do cabeçalho: as
   medidas do cartão flutuante em que Ajustes e Clientes abriam. Eles agora
   abrem NA ÁREA DE CONTEÚDO (o .tela-hub), que tem a largura da janela — não há
   mais nada para apertar num `min()`.

   O que sobrou desse assunto está logo abaixo: as regras `@container` que fazem
   o formulário empilhar quando o espaço é curto. Elas continuam valendo, e
   agora respondem à largura do .tela-hub em vez da do painel.                */

/* ---- o conteúdo de configuração dentro do painel ----

   As mesmas regras que o CSS já usava em tela estreita: num painel apertado o
   conteúdo precisa empilhar, senão corta — e cortado não passa.

   ⚠️ Este é o padrão SEGURO (tudo empilhado). Quando o painel tem largura de
   verdade, o bloco `@container` mais abaixo desfaz o empilhamento e as coisas
   voltam a ficar UMA AO LADO DA OUTRA — foi a reclamação do Pedro em 14/08 à
   noite ("ícones embaixo de ícones em vez de estar ao lado"). A ordem é essa
   de propósito: num navegador sem `@container` fica o empilhado, que é feio
   mas inteiro; o contrário cortaria conteúdo.                               */

.sp-config {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 16px 22px;
  /* é a largura DESTE painel que manda no layout de dentro, não a da janela */
  container-type: inline-size;
  container-name: cfg;
}
.sp-config .hub-topo { padding: 0 0 14px; border: 0; }
.sp-config .hub-topo h3 { font-size: 15px; }
.sp-config .hub-topo p { font-size: 12px; line-height: 1.55; }

/* gerenciador: uma coluna só */
.sp-config .mgr { grid-template-columns: minmax(0, 1fr); min-height: 0; max-height: none; }
.sp-config .mgr-side {
  border-right: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px;
  max-height: none;
  overflow: visible;
}
.sp-config .mgr-itens { overflow: visible; }
.sp-config .mgr-main { padding: 14px 2px 18px; overflow: visible; }
.sp-config .mgr-top { flex-wrap: wrap; gap: 10px 8px; }
.sp-config .mgr-top-txt { flex: 1 1 0; min-width: 0; }
.sp-config .mgr-top h3 { font-size: 16px; }
.sp-config .kpis { grid-template-columns: repeat(2, 1fr); }

/* cada pessoa vira cartão, em vez de uma linha apertada */
.sp-config .pp-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: 10px; padding: 11px; }
.sp-config .pp-row .senha-box { grid-column: 1 / -1; flex-wrap: wrap; }
.sp-config .pp-row .pp-acts { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
.sp-config .pp-novo { flex-direction: column; align-items: stretch; }
.sp-config .pp-novo .field { max-width: none !important; }

.sp-config .link-row { flex-direction: column; align-items: stretch; }
.sp-config .link-row .btn, .sp-config .link-row .input { width: 100%; }
.sp-config .link-acts { flex-wrap: wrap; }
.sp-config .grid-2 { grid-template-columns: 1fr; }
.sp-config .grid-2 .field { max-width: none !important; }

.sp-config .tl-row { grid-template-columns: 26px minmax(0, 1fr); row-gap: 2px; }
.sp-config .tl-quando { grid-column: 2; text-align: left; }
.sp-config .tl, .sp-config .tl-host { max-height: none; }

.sp-config .editor-grid { grid-template-columns: 1fr; }
.sp-config .seg { flex-wrap: wrap; }
.sp-config .foto-acts { flex-wrap: wrap; }
.sp-config .proj-cab { flex-wrap: wrap; }
.sp-config .proj-cab-tags { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
.sp-config .proj-acoes .btn { flex: 1 1 auto; }
.sp-config .cod-caixa { flex-direction: column; text-align: center; gap: 14px; }
.sp-config .cod-lado { justify-items: center; }

/* ---- painel COM largura: desempilha ----

   Com 600px ou mais de painel, nada precisa ficar um embaixo do outro. Era a
   reclamação do Pedro em 14/08 à noite. O corte é a largura DO PAINEL (não a
   da janela), porque numa tela estreita o `min()` do `.largo` aperta o painel
   e aí o empilhado volta sozinho, sem cortar nada.

   Os números: a linha de pessoa é a mais exigente — 32 (foto) + 110 (usuário)
   + 250 (senha) + os botões + 3 vãos de 14. Passa dos 560, e por isso o corte
   é 600 e não 520.                                                          */
@container cfg (min-width: 560px) {
  /* os quatro números do topo voltam a ficar lado a lado */
  .sp-config .kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }

  /* foto · usuário · SENHA na mesma linha (32 + 110 + 250 + 2 vãos = 420) */
  .sp-config .pp-row {
    grid-template-columns: 32px minmax(110px, 1fr) minmax(250px, auto);
    row-gap: 10px;
  }
  .sp-config .pp-row .senha-box { grid-column: auto; flex-wrap: nowrap; }
  .sp-config .pp-row .pp-acts { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }

  /* campo e botão lado a lado, em vez de um embaixo do outro */
  .sp-config .link-row { flex-direction: row; align-items: center; }
  .sp-config .link-row .btn, .sp-config .link-row .input { width: auto; }
  .sp-config .link-row .input { flex: 1; min-width: 0; }
  .sp-config .link-acts { flex-wrap: nowrap; }
  .sp-config .grid-2 { display: flex; }

  /* o histórico volta às três colunas: ícone · o que foi feito · quando */
  .sp-config .tl-row { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 0; }
  .sp-config .tl-quando { grid-column: auto; text-align: right; }

  /* a caixa do código de convite: o código de um lado, o texto do outro */
  .sp-config .cod-caixa { flex-direction: row; text-align: left; }
  .sp-config .cod-lado { justify-items: start; }

  /* cadastrar pessoa: os campos voltam a caber lado a lado, e o "Adicionar"
     atravessa as duas colunas — meia linha de botão parecia defeito */
  .sp-config .pp-novo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .sp-config .pp-novo-acoes,
  .sp-config .pp-novo-add { grid-column: 1 / -1; }
}

/* ⚠️ SÓ com folga de verdade os BOTÕES da pessoa sobem para a mesma linha.

   A linha do gerenciador é a mais cheia do sistema: foto (32) + usuário (110)
   + senha (250) + os botões (uns 245, com "Copiar convite" e "Foto") + 3 vãos
   de 14 = ~680. Num painel apertado isso passava da borda e o fim da linha
   ficava CORTADO — o pecado mortal deste projeto. Por isso o corte aqui é 690
   e não 560: abaixo disso os botões descem para a linha de baixo, encostados à
   direita, e nada some.                                                      */
@container cfg (min-width: 690px) {
  .sp-config .pp-row {
    grid-template-columns: 32px minmax(110px, 1fr) minmax(250px, auto) max-content;
    row-gap: 0;
  }
  .sp-config .pp-row .pp-acts { grid-column: auto; flex-wrap: nowrap; }
}

/* O cabeçalho da TELA já diz em que categoria a pessoa está: repetir o mesmo
   título dentro do conteúdo só comia altura. */
.tela-hub .hub-topo h3 { display: none; }
.tela-hub .hub-topo { padding-top: 2px; }

/* ⚠️ O contêiner das regras @container acima passou a ser a TELA, não o painel.
   Sem isto elas nunca disparavam: `container-type` estava no .sp-config, que
   não existe mais na árvore. */
.tela-hub-corpo { container-type: inline-size; container-name: cfg; }

/* Com NOME próprio da pasta/projeto, a barra aberta mostra a MARCA (o
   quadradinho) mais o nome escrito ao lado — em vez do logotipo por extenso,
   que traria "COMPANY" e brigaria com o nome novo. */
.sb-logo-extenso .sb-logo-img.so-marca { max-width: 40px; max-height: 40px; object-fit: contain; }
.sb-logo-extenso .sb-logo-img.so-marca.do-banco { max-width: 52px; }

/* =========================================================================
   TÍTULOS — o nome em NEGRITO que agrupa páginas

   ⚠️ ISTO ERA "TAG", E TAG TINHA COR. Mudou em 17/08, pedido do Pedro: "eu n
   quero tags mais, e nem cor, eu quero titulo, ADICIONAR TITULO, e ai fica o
   nome em negrito, ai eu clico no nome e aparece todas as paginas em baixo q
   ta dentro daquele titulo".

   Um título NÃO é uma página: ele não abre nada — clicar no nome mostra e
   esconde as páginas de dentro. O que o separa das páginas agora é o PESO DA
   LETRA, não mais uma bolinha colorida. Por isso ele é MAIOR e mais forte que
   uma linha de página, e não menor como a tag era: título manda na hierarquia,
   e letrinha em maiúscula apagada dizia o contrário.
   ========================================================================= */

.nav-grupo { margin: 10px 0 2px; }
.nav-grupo:first-child { margin-top: 2px; }

.nav-item.titulo { color: var(--ink); }
.nav-item.titulo:hover { background: rgba(255, 255, 255, .05); }
/* a barrinha vermelha de "página aberta" não vale para título: ele não abre */
.nav-item.titulo::before { display: none; }
.nav-item.titulo .nav-label {
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 800; /* é ele que faz o título ser título */
  letter-spacing: -.005em;
  color: var(--ink);
  cursor: pointer;
}
/* a setinha de abrir e fechar fica mais firme no título: ela é a ação
   principal dele, e apagada demais ninguém percebia que dava para clicar */
.nav-item.titulo .nav-twisty { color: var(--ink-2); }
.nav-item.titulo:hover .nav-twisty { color: var(--ink); }

/* as páginas de dentro ganham um fio na lateral, ligando visualmente ao título */
.nav-grupo > .nav-children {
  margin-left: 9px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.nav-add.sm {
  margin-top: 2px;
  padding: 7px 10px;
  font-size: 12px;
  opacity: .8;
}

/* o "+ ADICIONAR TÍTULO" do fim da árvore */
.nav-add > .ic { vertical-align: -2px; margin-right: 2px; }

/* prévia da logo nas janelas de marca: mostra a herdada em cinza quando a
   pasta/projeto não tem uma própria */
.marca-preview {
  display: grid;
  place-items: center;
  width: 116px;
  height: 74px;
  flex: none;
  padding: 8px;
  border: 1px dashed #333947;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11.5px;
}
.marca-preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.marca-preview.herdado { opacity: .5; }
.marca-preview.herdado::after {
  content: "herdada";
  position: absolute;
}
.marca-preview.herdado { position: relative; }
.marca-preview.herdado::after {
  bottom: 2px; right: 6px;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Dentro do painel, a linha de "cadastrar pessoa" empilhava tudo — inclusive
   os dois botõezinhos de ícone, que viravam uma coluna. Aqui os campos ficam
   um sobre o outro, mas os botões continuam lado a lado, na mesma linha. */
.sp-config .pp-novo { display: grid; gap: 10px; }
.sp-config .pp-novo .field { margin: 0; }
.sp-config .pp-novo-acoes { display: flex; align-items: center; gap: 8px; }
.sp-config .pp-novo-acoes .btn { flex: 1; }
.sp-config .pp-novo .icon-btn { align-self: auto; }

/* o "+ ADICIONAR TÍTULO": ícone e texto na MESMA linha (solto, o ícone caía
   sozinho numa linha e o texto na de baixo) */
.nav-add.com-ic { display: flex; align-items: center; gap: 8px; }
.nav-add.com-ic > .ic { flex: none; margin: 0; }


/* =========================================================================
   A SEGUNDA LEVA DE 14/08 (à noite) — peças novas
   ========================================================================= */

/* ---- campo com botõezinhos colados (a senha provisória) ----
   Os ícones de copiar e de gerar senha ficam DENTRO da mesma caixa do campo a
   que pertencem. Soltos ao lado do "Adicionar", eles partiam o botão ao meio. */
.campo-com-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.campo-com-acoes .input { flex: 1; min-width: 0; }
.campo-com-acoes .icon-btn { flex: none; }

/* cadastrar pessoa: campos em cima, "Adicionar" com a linha inteira embaixo.
   ⚠️ `grid-column: 1 / -1` é obrigatório: sem ele o botão ocupava UMA coluna do
   grid e saía pela metade — foi o "botão adicionar partido ao meio". */
.pp-novo-add {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: center;
}

/* o chip de "+ Novo cliente", no fim da faixa de clientes */
.chip-novo {
  border-style: dashed;
  color: var(--ink-2);
  gap: 6px;
}
.chip-novo:hover {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--ink);
}
.chip-novo > .ic { flex: none; }

/* ---- a cascata de COMPARTILHAR ---- */
.sp-link {
  display: grid;
  gap: 8px;
  margin: 2px 4px 6px;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
}
.sp-link-txt {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
  word-break: break-all;
}
.sp-link .sp-tag { justify-self: start; }

/* nota de rodapé de painel (a explicação do PDF) */
.sp-nota {
  margin: 2px 6px 0;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.5;
}

/* =========================================================================
   O NOME DO SITE EM CADA PÁGINA (§7-J, 17/08)

   A janela "Nome do site em cada página" de um template: uma linha por
   página, agrupada por pasta. Nome da página à esquerda, o campo à direita.
   ========================================================================= */

.abas-lista { display: grid; gap: 6px; }
.abas-linha {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.abas-pagina {
  min-width: 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 550;
  /* nada cortado: nome comprido ganha "…" em vez de empurrar o campo */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.abas-linha .input { margin: 0; }

/* apertado (painel estreito ou celular), o nome sobe e o campo desce: em duas
   colunas dentro de 300px não caberia nem o nome nem o campo */
@media (max-width: 780px) {
  .abas-linha { grid-template-columns: 1fr; gap: 4px; }
  .abas-pagina { white-space: normal; }
}

/* ═══════════════ A TELA DE PROJETOS (o formato do Google) ═══════════════════

   Duas faixas: os cartões grandes em cima ("SELECIONE UM PROJETO PARA ABRIR") e
   a lista em baixo ("ÚLTIMOS 30 DIAS"). Ver §AP do CLAUDE.md.

   ⚠️ É TELA CHEIA. Ela desenha dentro do `.tela-hub` normal, SEM a classe
   `janela` — quem é janela flutuante é só o Finder (`HUB.navegador`). O Pedro
   reclamou disso em voz alta: "qnd eu cliquei ali nao apareceu a tela cheia".  */

.proj-tela { display: block; }

.proj-faixa-tit {
  margin: 4px 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.proj-grade + .proj-faixa-tit { margin-top: 30px; }
.proj-faixa-dica { margin: -6px 0 12px; }

/* ---------------------------------------------------- os cartões grandes --- */

/* ⚠️ `auto-fill` com um mínimo, e NÃO um número fixo de colunas: numa tela de
   375px isso vira UMA coluna sozinho, sem media query e sem rolagem lateral —
   que é a regra dele ("nunca quero que tenha algo por cima de algo", e nada
   cortado no celular). */
.proj-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 18px;
  margin-bottom: 6px;
}

.proj-card { min-width: 0; }

.proj-card-cx {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color .16s ease, transform .16s ease;
}
.proj-card-cx.tracejado {
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
}
.proj-card:hover .proj-card-cx { border-color: var(--sel-line); transform: translateY(-2px); }
.proj-card-cx:focus-within { border-color: var(--sel-line); }

/* A PRÉVIA DE VERDADE: o INÍCIO do template num iframe, encolhido.

   ⚠️ O TRUQUE É EM % E NÃO EM PIXEL. O iframe tem 500% do tamanho do cartão e
   volta com `scale(.2)` — então o "navegador de mentira" lá dentro tem ~5x a
   largura do cartão (uns 900–1100px, largura de desktop) e o encaixe é exato em
   QUALQUER largura de cartão, sem ninguém medir nada no JavaScript. Com uma
   largura fixa em pixel eu teria de remedir a cada resize e a cada arrasto da
   barra lateral. */
.proj-card-prev {
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 500%;
  border: 0;
  transform: scale(.2);
  transform-origin: 0 0;
  background: #fff;
}

/* ⚠️ O BOTÃO TRANSPARENTE POR CIMA — é ele que recebe o clique.

   Sem ele o clique cairia DENTRO do iframe e não aconteceria nada. A saída
   proibida seria `pointer-events: none` no iframe: é a armadilha da §7 do
   CLAUDE.md, que já matou clique de SVG, de canvas e de imagem neste projeto.
   Um botão de verdade por cima também dá foco de teclado e nome acessível de
   graça, coisa que pointer-events não daria. */
.proj-card-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
}
.proj-card-capa:focus-visible { outline: 2px solid var(--sel-line); outline-offset: -2px; }

/* o PROJETO EM BRANCO do Google: retângulo branco com o + no meio */
.proj-card-branco {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff;
  color: #3c4043;
}

.proj-card-vazio,
.proj-card-novo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
  padding: 10px;
}
.proj-card:hover .proj-card-novo { color: var(--ink-2); }

.proj-card-pe {
  display: block;
  padding: 9px 2px 0;
  min-width: 0;
}
.proj-card-pe strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  /* nome comprido quebra em duas linhas — nunca corta com "…", que é a regra
     dele desde o endereço da barra (§AA) */
  overflow-wrap: anywhere;
}
.proj-card-pe span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* -------------------------------------------- a lista, no formato do Sheets - */

.proj-lista {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.proj-lista-cab,
.proj-linha-abrir {
  display: grid;
  grid-template-columns: 1fr 132px 96px;
  align-items: center;
  gap: 12px;
}

.proj-lista-cab {
  padding: 9px 14px 9px 44px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* o cabeçalho tem uma 4ª coluna vazia, do tamanho do ⋮, para as colunas de
   baixo ficarem alinhadas com ele */
.proj-lista-cab { grid-template-columns: 1fr 132px 96px 34px; }

.proj-linha {
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}
.proj-linha:last-child { border-bottom: 0; }
.proj-linha:hover { background: rgba(255, 255, 255, .045); }

.proj-linha-abrir {
  grid-template-columns: 24px 1fr 132px 96px;
  width: 100%;
  min-width: 0;
  padding: 11px 4px 11px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.proj-linha-ic { display: grid; place-items: center; color: var(--accent); }
.proj-linha-nome {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  /* uma linha só, e o resto some com "…" — aqui o corte é aceitável porque o
     nome inteiro fica no `title`, e a lista precisa de linhas de altura igual
     para se parecer com a do Google */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-linha-dono,
.proj-linha-data {
  font-size: 12.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proj-linha-pontos {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.proj-linha-pontos:hover { background: var(--sel); color: var(--ink); }

.proj-nada {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
}
.proj-nada p { margin: 0; }

/* ═══════════════════════ FASE 4 — OS SITES ═════════════════════════════════ */

/* O campo do nome + o botão, na própria tela vazia: "crie seu primeiro site do
   miguel". ⚠️ `flex-wrap` e `min-width` no campo: sem os dois, numa tela de 375px
   o botão era empurrado para fora da caixa e ficava cortado — e "nada pode ficar
   cortado, nem no celular" é regra da casa. */
.proj-nada-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.proj-nada-form .input { flex: 1 1 180px; min-width: 0; max-width: 340px; }

/* o cabeçalho de faixa com uma ação à direita (o CRIAR SITE) */
.proj-faixa-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.proj-faixa-cab .proj-faixa-tit { margin: 0; }

/* a linha selecionada da lista de sites — CINZA, nunca vermelho (§7-G item 1) */
.proj-linha.on { background: var(--sel); }
.proj-linha.on .proj-linha-nome { color: var(--sel-ink, var(--ink)); }

/* a bolinha de "não publicada" na lista de páginas de um site */
.proj-linha-pend {
  display: grid;
  place-items: center;
  width: 30px;
  margin-right: 6px;
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}

/* ─────────────────── A BARRA GRANDE DO "ABRIR SITE" ─────────────────────────

   "vai aparecer um botao bem grande ali em baixo falando 'abrir site'".

   ⚠️ ELA É `sticky`, E NÃO `fixed`. Com `fixed` ela ficaria por cima da barra
   lateral e do menu do celular — e a regra dele é "eu nunca quero que tenha algo
   por cima de algo". Sticky mantém ela colada no pé da ÁREA DE CONTEÚDO, que é
   onde ela pertence, e ela sobe junto quando a lista acaba.                    */
.proj-abrir {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* ⚠️ FUNDO OPACO DE VERDADE. Translúcido aqui deixava o texto da última linha
     da lista aparecendo por trás das letras do nome do site. */
  background: var(--surface-2, var(--surface));
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .28);
}
.proj-abrir-txt { display: grid; gap: 2px; min-width: 0; }
.proj-abrir-txt strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-abrir-txt span { font-size: 12.5px; color: var(--ink-2); }
.proj-abrir-btn {
  flex: 0 0 auto;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

@media (max-width: 560px) {
  /* ⚠️ NO CELULAR O BOTÃO OCUPA A LARGURA TODA, e o texto vai para cima dele.
     Lado a lado em 375px, o "ABRIR SITE" ficava com ~90px e as letras cortadas. */
  .proj-abrir { flex-direction: column; align-items: stretch; }
  .proj-abrir-btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------- o celular e o aperto --- */

/* ⚠️ AS COLUNAS SOMEM DE TRÁS PARA A FRENTE, e o NOME nunca sai. É a mesma
   ideia do Finder (§S): quem manda é a largura DO CONTEÚDO, e a primeira coisa
   a cair é a menos útil. "Dono" e "Aberto" são contexto; o nome é a linha. */
@media (max-width: 880px) {
  .proj-lista-cab { grid-template-columns: 1fr 96px 34px; }
  .proj-linha-abrir { grid-template-columns: 24px 1fr 96px; }
  .proj-linha-dono { display: none; }
  .proj-lista-cab > span:nth-child(2) { display: none; }
}

@media (max-width: 560px) {
  .proj-grade { grid-template-columns: 1fr; gap: 14px; }
  /* num cartão do tamanho da tela, 4/3 vira um bloco alto demais e empurra os
     recentes para fora da vista */
  .proj-card-cx { aspect-ratio: 16 / 9; }
  .proj-lista-cab { grid-template-columns: 1fr 34px; }
  .proj-linha-abrir { grid-template-columns: 24px 1fr; padding-left: 12px; }
  .proj-linha-data { display: none; }
  .proj-lista-cab > span:nth-child(3) { display: none; }
  .proj-faixa-tit { font-size: 11.5px; }
}

/* ═════════════ OS AJUSTES NA BARRA LATERAL (18/08) ══════════════════════════

   Com os Ajustes abertos, a barra troca as Páginas pelas categorias deles. As
   linhas são os `.sb-item` de sempre — só a de PERIGO ganha cor própria, do
   mesmo jeito que a linha correspondente na tela cheia. */
.sb-item.perigo .sb-lb { color: var(--danger); }
.sb-item.perigo .sb-ic { color: var(--danger); }

/* ═════════ O RECORD DA LINHA, À ESQUERDA DO LÁPIS (19/08, §AT) ══════════════

   Pedido dele: "coloca ele ao lado esquerdo do lapis... eu quero ele ali de mais
   facil acesso". Ele NASCEU como um selo (§AQ), um enfeite antes do nome que só
   existia na página que já tinha gravação; agora é BOTÃO, em toda página, dentro
   do `.nav-actions` — e a ordem no DOM é a ordem na tela, o RECORD antes do
   lápis. Não ponha `order` nenhuma aqui: mexer no HTML é o que se lê.

   Dois estados, e a diferença é informação:

     apagado  ainda não existe subpágina — clicar cria e abre
     .aceso   já existe — clicar abre. Fica visível MESMO sem hover, porque aí
              o ícone deixou de ser botão escondido e virou aviso.               */
/* ⚠️ ELE É 3px MAIS ESTREITO QUE OS OUTROS DOIS, e isso é medido. A linha da
   árvore agora tem TRÊS botões (RECORD, lápis, três pontinhos) onde tinha dois, e
   cada um deles come largura do NOME — que é a única coisa da linha que não pode
   desaparecer (§7-A item 4). Medido numa barra de 262px: com o RECORD em 26px o
   nome fica com 124px; em 23px, com 127px. Não é muito, mas é de graça — e a
   barra continua arrastável de 190 a 420px para quem quer o nome inteiro. */
.nav-actions .nav-rec { width: 23px; }
/* ═══ OS TRÊS ESTADOS DA GRAVAÇÃO (19/08, prompt 2 — §AW) ═══

   "se nao tiver nenhuma reuniao, o icone fica normal, se tiver um link apenas, fica
   um triangulo amarelo, se tiver o link da transcricao e link da gravacao ai sim
   fica um icone verde pequeno indicando q ta tudo certo"

   ⚠️ VERMELHO SAIU. Ele era o estado "existe a subpágina", e acendia mesmo sem link
   nenhum dentro: "ta ruim essa parte que sempre fica vermelho a reuniao". Vermelho
   nesta casa é AÇÃO ou ERRO — não é "está tudo certo" nem "existe".

   ⚠️ AMARELO E VERDE FURAM A OPACIDADE do `.nav-actions` (que nasce em .42 e só
   acende no hover), porque os dois são INFORMAÇÃO: ele tem de ver de relance quais
   páginas estão pela metade. O cinza não fura — sem gravação, o ícone é só um botão
   à espera. */
.nav-rec.falta {
  color: #e8b83c;
  background: rgba(232, 184, 60, .14);
  border-radius: 50%;
  opacity: 1;
}
.nav-rec.ok {
  color: #58cc8b;
  background: rgba(88, 204, 139, .14);
  border-radius: 50%;
  opacity: 1;
}
.nav-item .nav-actions:has(.nav-rec.falta),
.nav-item .nav-actions:has(.nav-rec.ok) { opacity: 1; }
.nav-actions .nav-rec:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   O QUADRO — CLIENTES e SITES lado a lado (19/08, §AY)

   "nao faz sentido o lucas ter 2 sites dentro de estruturacao estrategica, ja q
    e o msm modelo"

   ⚠️ ELE USA A ESCADA DE SUPERFÍCIES DO §AW (`--sup-0/1/2`) e os espaços da
   escada (`--e-1..5`). Nada de valor solto: valor solto é como duas seções ficam
   com 18px de um lado e 22px do outro, e a tela parece torta sem ninguém saber
   por quê.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ DUAS COLUNAS NO COMPUTADOR, UMA NO CELULAR — e o corte é por LARGURA DO
   CONTÊINER (`@container`), não da janela. A tela vive dentro do `.tela-hub`, que
   encolhe quando ele arrasta a barra lateral: com `@media` as duas colunas
   continuariam pedindo 2×340px num contêiner de 500px, e a coluna da direita
   sairia cortada. É a lição do §S. */
.quadro {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: 1fr;
  align-items: start;
}
@container cfg (min-width: 820px) {
  .quadro { grid-template-columns: 1fr 1fr; }
}
/* ⚠️ E o fallback para quem não tem `@container`: o padrão é UMA coluna, que é
   feio mas inteiro. Ao contrário, cortaria conteúdo — é a regra do §7-E item 3. */

/* ⚠️⚠️ A BOLINHA PRECISA DE TAMANHO EXPLÍCITO AQUI, e não é detalhe: o `.av` base
   NÃO tem largura nem altura — cada tela dá as dela (`.av.sm`, `.pp-row .av`, a
   `.ficha-topo .av`…). Sem esta regra, a FOTO que vem do banco entra no tamanho
   natural dela, e uma foto de 800px vira um retrato do tamanho da linha inteira.

   Foi exatamente o que aconteceu na primeira versão desta tela, e quem viu foi o
   PRINT — nenhuma asserção pega isso, porque o elemento existe e o texto está
   certo. É a §Y3 generalizada: imagem que vem do banco não tem tamanho, e toda
   tela nova que mostrar avatar precisa dizer qual é o dele.                      */
.quadro .item > .av,
.quadro .item > img.av,
.quadro-ficha .item > .av,
.quadro-ficha .item > img.av,
.escolha-linha > .av,
.escolha-linha > img.av {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  object-fit: cover;
}

.quadro-busca { margin-bottom: var(--e-2); }
.quadro-busca .input { width: 100%; }

.quadro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--e-2);
}

/* ── a linha arrastável (um CLIENTE) ─────────────────────────────────────── */

/* ⚠️ `cursor: grab` E NÃO `move`: o `move` é o cursor de "estou arrastando", e
   mostrá-lo parado sugere que a linha já está presa ao ponteiro. */
.item-arrasta { cursor: grab; }
.item-arrasta:active { cursor: grabbing; }
.item-arrasta.arrastando { opacity: .45; }

/* ── a linha que RECEBE (um SITE) ────────────────────────────────────────── */

/* ⚠️ O ALVO DO ARRASTO É VERMELHO, e isso NÃO contradiz "selecionado é cinza":
   aqui não é seleção, é AÇÃO acontecendo agora — a mesma decisão do alvo de
   arrastar página (§7-G item 1). Ele desaparece no `drop`. */
.item-solta.alvo {
  background: color-mix(in srgb, var(--accent) 16%, var(--sup-2));
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* as bolinhas de quem VÊ o site */
.quadro-quem { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.quadro-quem-um { display: inline-flex; cursor: grab; }
.quadro-quem-um:active { cursor: grabbing; }
.quadro-quem-mais {
  font-size: 11px;
  color: var(--ink-3);
  padding: 0 4px;
}
/* ⚠️ A BOLINHA MINI TEM 22px, e as bolinhas se sobrepõem de propósito: com seis
   clientes lado a lado em 340px de coluna, sem sobreposição elas empurrariam o
   nome do site para fora — e o nome é a única coisa da linha que não pode
   desaparecer. */
/* ⚠️ A TERCEIRA PARTE DO `bolinha()` SUBSTITUI a classe, não acrescenta: por
   isso a chamada passa 'av mini', e não 'mini'. Passando só 'mini', o avatar
   perdia o tamanho, o raio e a cor de fundo de uma vez — e eu escrevi assim na
   primeira versão. */
/* ⚠️⚠️ `.av.mini` TEM TAMANHO EM QUALQUER LUGAR, e não só dentro de um container.

   Esta é a TERCEIRA vez que o mesmo defeito aparece neste projeto (§Y3, §AY-10
   item 6, e agora): o `.av` base NÃO tem largura nem altura — cada tela dá as
   dela. Quando a bolinha tem FOTO, ela é um `<img>`, e sem tamanho o navegador usa
   o tamanho NATURAL do arquivo: uma foto de 800px virou um retrato ocupando a
   linha inteira, empilhado sobre as linhas vizinhas.

   As duas primeiras vezes eu consertei no container ("dentro do quadro", "dentro
   do quem"), e o defeito voltou no container seguinte. A regra fica na CLASSE: quem
   pede `av mini` recebe 22px, esteja onde estiver. E quem viu, as três vezes, foi o
   PRINT — nenhuma asserção pega, porque o elemento existe e o nome está certo. */
.av.mini,
img.av.mini {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  object-fit: cover;
}

.quadro-quem-um .av.mini {
  width: 22px;
  height: 22px;
  font-size: 9px;
  box-shadow: 0 0 0 2px var(--sup-2);
}
.quadro-quem-um + .quadro-quem-um { margin-left: -6px; }

/* ⚠️ "SEM ACESSO" e "NINGUÉM VÊ" são ÂMBAR, não vermelho. Não é erro: é um estado
   que ele precisa notar. Vermelho aqui, numa lista de sessenta linhas, viraria uma
   parede de alarme e ele pararia de ver. */
.pill-tag.alerta {
  color: #f0b429;
  background: rgba(240, 180, 41, .14);
  box-shadow: inset 0 0 0 1px rgba(240, 180, 41, .28);
}

/* ── as fichas (de um cliente, de um site) ───────────────────────────────── */

/* ⚠️⚠️ AS CLASSES AQUI TÊM PREFIXO "q" (de quadro) POR UM MOTIVO CONCRETO: eu
   escrevi `.ficha-topo` na primeira versão e ela JÁ EXISTIA, em uso pela ficha da
   pessoa do gerenciador (linha ~4127). As minhas regras entraram por cima e as
   dela continuaram valendo junto: o nome do site passou a aparecer em fonte
   MONOESPAÇADA de 20px.

   Nenhuma asserção pega isso — o elemento existe e o texto está certo. Quem viu
   foi o PRINT, pela décima primeira vez neste projeto (§Y2, §AL-11, §AM-6,
   §AP-8, §AT-7, §AU-8, §AV-9).

   A regra que fica: ANTES de criar uma classe, procure o nome no styles.css.    */

.quadro-ficha { display: block; }

.qficha-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-3);
  padding: var(--e-3);
  margin-bottom: var(--e-4);
  border-radius: 14px;
  background: var(--sup-1);
  box-shadow: inset 0 0 0 1px var(--linha), var(--sombra);
}
.qficha-topo .av.grande,
.qficha-topo img.av.grande {
  width: 46px;
  height: 46px;
  font-size: 15px;
  font-weight: 700;
  flex: none;
  /* ⚠️ REDONDA, como as da lista. A regra antiga de `.ficha-topo` dava canto
     suave; sem raio aqui a foto saía num quadrado, e a mesma pessoa aparecia
     redonda na lista e quadrada na ficha. */
  border-radius: 50%;
  color: #fff;
  object-fit: cover;
}
.qficha-topo-txt { flex: 1 1 200px; min-width: 0; display: grid; gap: 3px; }
.qficha-topo-txt strong { font-size: 18px; font-weight: 750; }
.qficha-topo-txt span { font-size: 12.5px; color: var(--ink-3); }
.qficha-topo-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.qficha-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: 9px 0;
}
.qficha-linha + .qficha-linha { border-top: 1px solid var(--linha); }
.qficha-rot { flex: 0 0 132px; font-size: 12px; color: var(--ink-3); }
.qficha-val { flex: 1 1 200px; min-width: 0; font-size: 13.5px; }

/* ⚠️ O E-MAIL VAZIO CONVIDA, com fio pontilhado — foi a lição do §AX: um dado que
   a tela MOSTRA e não deixa mexer é o único lugar do sistema assim, e ele
   perguntou "onde eu posso criar meu email". Cheio, é só o e-mail. */
.qficha-email {
  border: 0;
  background: none;
  padding: 2px 0;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.qficha-email:hover { color: var(--accent); }
.qficha-email.vazio {
  color: var(--ink-3);
  border-bottom: 1px dashed var(--linha);
}

/* ── a janela de escolher um item ────────────────────────────────────────── */

.escolha-lista { display: grid; gap: 6px; max-height: min(52vh, 420px); overflow-y: auto; }
.escolha-linha {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: 9px var(--e-2);
  border: 0;
  border-radius: 10px;
  background: var(--sup-2);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.escolha-linha:hover { background: var(--sel); }
.escolha-linha.tracejada {
  background: none;
  border: 1px dashed var(--linha);
  color: var(--ink-3);
  justify-content: center;
}
.escolha-linha-ic { display: inline-flex; flex: none; color: var(--ink-3); }
.escolha-linha-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.escolha-linha-txt strong { font-size: 13.5px; font-weight: 650; }
.escolha-linha-txt span { font-size: 11.5px; color: var(--ink-3); }
.escolha-linha-seta { flex: none; color: var(--ink-3); }

.escolha-caixas {
  display: grid;
  gap: 4px;
  max-height: 190px;
  overflow-y: auto;
  padding: var(--e-1);
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--sup-0);
}
.escolha-caixa {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.escolha-caixa:hover { background: rgba(255, 255, 255, .05); }

/* ══════════════════════════════════════════════════════════════════════════
   A ARRUMAÇÃO DE 19/08 — §BA

   "eu n gostei de qnd eu clico em sites ou clientes fica uma tela cheia, parece
    que polui a tela" · "melhore o menu das pessoas, clientes, admin, sites, pq
    ta horrivel"

   As sete decisões, e são decisões, não sugestões:
     1. detalhe abre em PAINEL de 420px, não em tela cheia
     2. UMA coluna, máximo 1080px, com as seções empilhadas
     3. "Clientes" virou PESSOAS
     4. filtro de papel com três chaves independentes, sem "Todos"
     5. UM só botão vermelho por tela
     6. linhas de 44px, zebra leve, elevação no hover
     7. seção vazia sempre com frase + botão

   ⚠️ Tudo usa a escada do §AW (--sup-0/1/2 e --e-1..5). Valor solto é como duas
   seções ficam com 18px de um lado e 22px do outro.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 2. UMA COLUNA, máximo 1080px ───────────────────────────────────────── */

/* ⚠️ ERAM DUAS COLUNAS LADO A LADO. Com o detalhe saindo para o painel, elas
   deixaram de ter razão de ser: existiam para origem e destino do arrasto ficarem
   à vista, e empilhadas isso continua valendo — com o dobro de largura para cada
   linha respirar. O teto de 1080px é o do conteúdo desta casa desde 17/08; sem
   ele, num monitor de 1920 a linha de uma pessoa fica com meio metro de vazio. */
.quadro-uma {
  display: grid;
  /* ⚠️⚠️ `minmax(0, 1fr)` E NÃO O `auto` PADRÃO, e isto é o conserto de um defeito
     que só apareceu no print, em 375px: uma coluna de grade nasce com largura
     `auto`, que respeita o MAX-CONTENT do que está dentro. As linhas de pessoa têm
     nome + pílula de papel + contagem + setinha, e o max-content delas passa de
     375px — então o cartão inteiro ficava mais largo que a tela e o campo de busca
     saía cortado pela direita.

     ⚠️ E NENHUMA ASSERÇÃO PEGAVA: o `.cartao` recorta o que sobra, então
     `scrollWidth` não crescia e "sem rolagem lateral" passava; e conteúdo recortado
     não é "coberto", então o `elementFromPoint` também passava. Quem viu foi o
     PRINT. O `teste-novo-site.js` ganhou uma asserção que compara a largura do
     cartão com a da janela.

     ⚠️ SEM `gap`: o `.secao` já tem `margin-bottom: var(--e-5)`, e os dois somavam
     — o respiro entre PESSOAS e SITES saía com 64px em vez de 32. */
  grid-template-columns: minmax(0, 1fr);
  max-width: 1080px;
}

/* ─── 6. AS LINHAS: 44px, zebra leve, elevação no hover ──────────────────── */

.linhas { display: flex; flex-direction: column; }

.linha {
  display: flex;
  align-items: center;
  /* ⚠️ ELA QUEBRA quando não cabe, em vez de forçar a largura do cartão. O nome é a
     única coisa da linha que não pode desaparecer (§Y): as pílulas descem para a
     segunda linha e a altura cresce — nada é cortado. */
  flex-wrap: wrap;
  gap: var(--e-2);
  /* ⚠️ 44px É A MEDIDA, e ela não é estética: é o alvo mínimo confortável para o
     dedo, e ele usa o painel no celular desde a 3.1. `min-height` e não `height`
     — nome comprido que quebre em duas linhas cresce em vez de vazar. */
  min-height: 44px;
  padding: 0 var(--e-2);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, box-shadow .12s, transform .12s;
}
/* ⚠️ A ZEBRA É LEVÍSSIMA (3%): ela existe para o olho seguir a linha até o fim,
   não para virar listra. Com 8% ela competia com o realce do hover e a lista
   parecia uma planilha. */
.linha:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.linha:hover {
  background: var(--sup-2);
  /* a elevação no hover: um fio claro em cima e sombra embaixo. É o que diz
     "isto é clicável" sem precisar de cor nova. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 12px -8px #000;
}
.linha-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.linha-txt strong {
  font-size: 13.5px;
  font-weight: 650;
  /* nome comprido ganha "…", que NÃO é "cortado" pela regra da casa (§Y): o
     reticência avisa que tem mais, e a linha inteira abre no clique */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linha-txt span {
  font-size: 11.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linha-ic { display: inline-flex; flex: none; color: var(--ink-3); }
.linha-ic.site { color: var(--accent); }
.linha-conta { flex: none; font-size: 11.5px; color: var(--ink-3); }
/* ⚠️ A SETINHA APARECE SÓ NO HOVER. Sempre visível, ela viraria uma coluna de
   setas repetidas — e o que ela diz ("dá para abrir") já é dito pelo realce. */
.linha-seta { flex: none; color: var(--ink-3); opacity: 0; transition: opacity .12s; }
.linha:hover .linha-seta { opacity: 1; }

/* ⚠️ O SELO DE COMPARTILHADO TEM TETO DE LARGURA DENTRO DA LINHA. Ele diz
   "compartilhado com <nome>", e com um nome comprido ("ZZV2 MARIA GESTORA") ele
   comia metade da linha e empurrava as bolinhas de quem vê para fora — o print
   pegou isso. O "…" avisa que tem mais, e o texto inteiro está no `title`. */
.linha .selo-comp {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}

.linha-arrasta { cursor: grab; }
.linha-arrasta:active { cursor: grabbing; }
.linha-arrasta.arrastando { opacity: .45; }

/* ⚠️ O ALVO DO ARRASTO É VERMELHO, e isso NÃO contradiz "selecionado é cinza":
   aqui não é seleção, é AÇÃO acontecendo agora — a mesma decisão do alvo de
   arrastar página (§7-G item 1). Ele desaparece no `drop`. */
.linha-solta.alvo {
  background: color-mix(in srgb, var(--accent) 16%, var(--sup-2));
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* ─── O ANEL DE PAPEL: admin vermelho, gestor âmbar, cliente azul ─────────── */

/* ⚠️ É UM ANEL, e não um fundo colorido. O fundo brigaria com a foto de perfil
   (que já tem cor própria) e com a zebra; o anel encosta na foto sem cobrir nada,
   e três anéis diferentes numa lista se leem de longe — que é o que ele pediu:
   "o maior guia nao é colocar texto em tudo mas sim deixar visualmente facil". */
.anel {
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 2px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--cor-papel, var(--linha));
}
.anel.admin   { --cor-papel: var(--accent); }
.anel.gestor  { --cor-papel: #f0b429; }
.anel.cliente { --cor-papel: #6aa9ff; }

.pill-tag.papel { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.pill-tag.papel.admin {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}
.pill-tag.papel.gestor {
  color: #f0b429;
  background: rgba(240, 180, 41, .13);
  box-shadow: inset 0 0 0 1px rgba(240, 180, 41, .28);
}
.pill-tag.papel.cliente {
  color: #6aa9ff;
  background: rgba(106, 169, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(106, 169, 255, .28);
}

/* ─── 4. OS CHIPS DE PAPEL: três chaves independentes, sem "Todos" ────────── */

/* ⚠️ NÃO EXISTE CHIP "TODOS", de propósito: com ele, "todos" e "os três ligados"
   seriam dois estados diferentes com a mesma tela, e clicar em "todos" quando os
   três já estão ligados não faria nada visível. */
.chip-papel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--sup-2);
  color: var(--ink-3);
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  cursor: pointer;
  /* ⚠️ DESLIGADO É APAGADO, e não escondido: ele precisa ver que existe um papel
     desligado, senão a lista curta parece defeito. */
  opacity: .5;
  transition: opacity .12s, background .12s, box-shadow .12s;
}
.chip-papel:hover { opacity: .8; }
.chip-papel.on {
  opacity: 1;
  background: var(--sel);
  box-shadow: inset 0 0 0 1px var(--sel-line);
  color: var(--ink);
}
.chip-anel {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--cor-chip, var(--linha)) inset;
  background: var(--cor-chip, var(--linha));
}
.chip-papel.admin   { --cor-chip: var(--accent); }
.chip-papel.gestor  { --cor-chip: #f0b429; }
.chip-papel.cliente { --cor-chip: #6aa9ff; }
.chip-conta {
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: 9.5px;
  letter-spacing: 0;
}

/* a legenda das cores — cor sem legenda é adivinhação */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  margin: 0 0 var(--e-2);
  padding: 0 2px;
}
.legenda-um { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-3); }
.legenda-anel {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cor-papel, var(--linha));
}
.legenda-um.admin   { --cor-papel: var(--accent); }
.legenda-um.gestor  { --cor-papel: #f0b429; }
.legenda-um.cliente { --cor-papel: #6aa9ff; }
.legenda-dica { color: var(--ink-4, #5c6473); }

/* ─── 1. O PAINEL DESLIZANTE, 420px ──────────────────────────────────────── */

.painel-lat {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* ⚠️ 420px NO COMPUTADOR, e 100% menos um respiro no celular. Em 375px um
     painel de 420 sairia da tela pela direita, e o `Esc` é a única saída que
     sobra — no dedo não existe Esc. */
  width: min(420px, 100vw - 32px);
  z-index: 78; /* acima da tela (2) e do menu de contexto (72); abaixo do modal (80) */
  display: flex;
  flex-direction: column;
  background: var(--sup-1);
  box-shadow: -18px 0 48px -24px #000, inset 1px 0 0 var(--linha);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
}
.painel-lat.aberto { transform: translateX(0); }
.painel-lat-topo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex: none;
  padding: var(--e-3);
  border-bottom: 1px solid var(--linha);
  background: var(--sup-1);
}
.painel-lat-topo strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.painel-lat-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--e-3);
}
/* ⚠️ O VÉU É QUASE INVISÍVEL NO COMPUTADOR (a lista tem de continuar legível
   atrás — é o pedido), e ESCURO no celular, onde ele é o que separa as duas
   coisas. */
.painel-lat-veu {
  position: fixed;
  inset: 0;
  z-index: 77;
  background: rgba(0, 0, 0, .18);
}
@media (max-width: 880px) {
  .painel-lat-veu { background: rgba(0, 0, 0, .55); }
}

/* o cabeçalho de dentro do painel: a foto grande do criador e o nome */
.pcab {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-2);
}
.pcab-av { flex: none; }
.pcab-av .av.grande,
.pcab-av img.av.grande {
  width: 44px;
  height: 44px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 50%;
  color: #fff;
  object-fit: cover;
}
.pcab-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.pcab-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.pcab-txt strong { font-size: 16.5px; font-weight: 750; }
.pcab-txt span { font-size: 12px; color: var(--ink-3); }
.pcab-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e-4); }

.pacoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
}

/* as chaves de "o que ele pode fazer"

   ⚠️ ELA REAPROVEITA A CLASSE `.switch`, e não redesenha a chavinha: o `.track`
   (o trilho e a bolinha) só existe sob `.switch`, e copiar aquelas vinte linhas
   para cá criaria uma segunda chavinha que um dia divergiria da primeira. Aqui só
   entra o que é DIFERENTE: o alinhamento no topo (o texto tem duas linhas) e o fio
   entre uma chave e a seguinte. */
.chave-linha {
  align-items: flex-start;
  gap: var(--e-2);
  padding: 10px 0;
}
.chave-linha + .chave-linha { border-top: 1px solid var(--linha); }
.chave-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.chave-txt strong { font-size: 13.5px; font-weight: 650; }
.chave-txt span { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }