/* ==========================================================================
   Wiki Empresa - folha de estilo unica (login + aplicacao)
   --------------------------------------------------------------------------
   Organizacao do arquivo:
     1. Tokens (cores, sombras, raios) e tema claro/escuro
     2. Base (reset leve, tipografia, scrollbar)
     3. Componentes reutilizaveis (botoes, campos, cartoes, tabelas, chips)
     4. Layout da aplicacao (shell, barra lateral, barra do topo, conteudo)
     5. Telas (documento, formulario, administracao, modal, login)
     6. Editor Quill (inclusive ajustes para o tema escuro)
     7. Responsivo
     8. Geracao do PDF (o proprio navegador; imprimir sai do arquivo salvo)

   Os nomes de classe usados pelo JavaScript (app.js) sao mantidos - o visual
   mudou, os seletores continuam os mesmos.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  /* Identidade ZZ Solutions.
     O azul e o verde da marca sao claros demais para receber texto branco
     em cima (ficam abaixo de 4.5:1 de contraste). Por isso ha dois tons de
     cada: o da marca, usado em detalhes, realces e fundos suaves, e uma
     versao mais fechada (--*-botao / --*-forte) usada quando ha texto
     branco por cima ou texto colorido sobre fundo claro. */
  --azul: #00aae1;
  --azul-forte: #0079a3;
  --azul-botao: #0079a3;
  --azul-botao-hover: #00658a;
  --azul-tenue: rgba(0, 170, 225, .12);
  --verde: #00ac62;
  --verde-forte: #00814a;
  --verde-hover: #006c3d;
  --verde-escuro: #077a48;
  --verde-tenue: rgba(0, 172, 98, .12);
  /* Verde de TEXTO. O da marca e claro demais para escrever sobre branco
     (fica abaixo de 4.5:1), entao aqui vale o tom fechado; no tema escuro
     este token e redefinido para o tom claro, que e o que contrasta la. */
  --entrou-texto: #00814a;
  --perigo: #c93c3c;
  --perigo-tenue: rgba(214, 69, 69, .1);
  --ambar: #9a6414;
  --ambar-tenue: rgba(183, 121, 31, .12);

  /* Superficies e texto (tema claro) */
  --fundo: #f5f7fa;
  --fundo-card: #ffffff;
  --fundo-suave: #f1f4f8;
  --fundo-realce: #e9eef4;
  --texto: #111827;
  --texto-suave: #5c6a7e;
  --texto-tenue: #8c98a9;
  --borda: #e3e8ef;
  --borda-forte: #cfd6e0;

  /* Barra lateral - acompanha o tema. Ate 26/10/2026 era escura nos dois
     (identidade do produto); no claro passou a ser branca como a barra do
     topo, a pedido do usuario. Os valores escuros estao no bloco dark. */
  --sidebar-fundo: var(--fundo-card);
  --sidebar-fundo-topo: var(--fundo-card);
  --sidebar-texto: #334155;
  --sidebar-texto-forte: var(--texto);
  --sidebar-texto-suave: var(--texto-tenue);
  --sidebar-hover: rgba(16, 24, 40, .05);
  --sidebar-ativo: rgba(0, 170, 225, .12);
  --sidebar-borda: var(--borda);
  --sidebar-campo: var(--fundo-suave);
  --sidebar-campo-texto: var(--texto);
  --sidebar-campo-foco: var(--fundo-card);
  --sidebar-chip: rgba(16, 24, 40, .06);
  --sidebar-check-fundo: var(--fundo-card);
  --sidebar-check-borda: var(--borda-forte);
  --sidebar-rodape: var(--fundo-suave);
  /* Etiquetas PUB/PRIV na barra: no claro, as mesmas do conteudo. */
  --sidebar-badge: var(--fundo-realce);
  --sidebar-pub-texto: var(--verde-escuro);
  --sidebar-pub-fundo: var(--verde-tenue);
  --sidebar-priv-texto: var(--ambar);
  --sidebar-priv-fundo: var(--ambar-tenue);

  /* Elevacao */
  --sombra-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --sombra-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --sombra-lg: 0 12px 32px rgba(16, 24, 40, .14), 0 4px 8px rgba(16, 24, 40, .06);

  /* Raios */
  --raio-xs: 5px;
  --raio-sm: 7px;
  --raio: 10px;
  --raio-lg: 14px;
  --raio-pill: 999px;

  /* Medidas de leitura */
  /* Documento (leitura e edicao): acompanha a coluna central - cresce quando
     a barra lateral recolhe - ate este limite. Tabela, print e bloco de
     codigo ganham espaco; o limite segura a linha em monitor grande. */
  --largura-doc: 1400px;
  --largura-admin: 1180px;

  --anel-foco: 0 0 0 3px var(--azul-tenue);
}

html[data-theme="dark"] {
  /* No escuro o tom claro da marca e que contrasta bem: volta a ser ele. */
  --azul-forte: #2cc0ee;
  --perigo: #ef6b6b;
  --azul-tenue: rgba(0, 170, 225, .18);
  --verde-tenue: rgba(0, 172, 98, .16);
  --entrou-texto: #3ec48a;
  --perigo-tenue: rgba(214, 69, 69, .16);
  --ambar: #d9a441;
  --ambar-tenue: rgba(217, 164, 65, .16);

  --fundo: #0e131a;
  --fundo-card: #161c25;
  --fundo-suave: #1d242f;
  --fundo-realce: #232b37;
  --texto: #e7ecf3;
  --texto-suave: #9aa6b6;
  --texto-tenue: #6c788a;
  --borda: #262e3a;
  --borda-forte: #35404f;

  --sidebar-fundo: #080c13;
  --sidebar-fundo-topo: #0c1320;
  --sidebar-texto: #c4cddb;
  --sidebar-texto-forte: #ffffff;
  --sidebar-texto-suave: #7a8798;
  --sidebar-hover: rgba(255, 255, 255, .05);
  --sidebar-ativo: rgba(0, 170, 225, .16);
  --sidebar-borda: rgba(255, 255, 255, .06);
  --sidebar-campo: rgba(255, 255, 255, .05);
  --sidebar-campo-texto: #fff;
  --sidebar-campo-foco: rgba(255, 255, 255, .08);
  --sidebar-chip: rgba(255, 255, 255, .07);
  --sidebar-check-fundo: rgba(255, 255, 255, .06);
  --sidebar-check-borda: rgba(255, 255, 255, .22);
  --sidebar-rodape: rgba(0, 0, 0, .18);
  --sidebar-badge: rgba(255, 255, 255, .08);
  --sidebar-pub-texto: #46cf95;
  --sidebar-pub-fundo: rgba(0, 172, 98, .16);
  --sidebar-priv-texto: #d5a557;
  --sidebar-priv-fundo: rgba(217, 164, 65, .14);

  --sombra-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --sombra-md: 0 4px 14px rgba(0, 0, 0, .45);
  --sombra-lg: 0 14px 38px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------------ 2. Base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05", "ss01";
}

body.pagina-app { height: 100vh; overflow: hidden; }

h1, h2, h3, h4 { font-weight: 650; letter-spacing: -.011em; }

a { color: var(--azul-forte); }
html[data-theme="dark"] a { color: var(--azul); }

::selection { background: var(--azul-tenue); }

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

button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* Scrollbar discreta, no tom do tema */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--raio-pill);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--texto-tenue); background-clip: content-box; }

/* Icones: todos os SVG inline usam currentColor e tamanho controlado aqui */
.icone {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone-sm { width: 14px; height: 14px; }
.icone-lg { width: 20px; height: 20px; }

/* Estrela dos favoritos: o mesmo desenho serve para "fixado" (pintado) e
   "nao fixado" (so o contorno). */
.estrela-cheia { fill: currentColor; }
/* Mesma ideia no coracao da curtida. A cor de "curtido" e o azul da marca,
   e nao o vermelho: vermelho aqui e a cor de remover. */
.coracao-cheio { fill: currentColor; }

/* ----------------------------------------------------------- 3. Componentes */

/* Botoes ------------------------------------------------------------------ */

.btn,
.acoes-doc button,
.btn-mostrar-senha,
.btn-editar-usuario,
.btn-redefinir-senha,
.btn-salvar-categoria,
.btn-remover-categoria,
.btn-remover-usuario,
/* Qualquer botao na coluna de acoes de uma tabela ja entra com este visual,
   sem precisar somar mais uma classe a esta lista a cada tela nova. */
.tabela .col-acoes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--fundo-card);
  color: var(--texto);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  box-shadow: var(--sombra-xs);
  transition: background-color .14s ease, border-color .14s ease, color .14s ease,
    box-shadow .14s ease, transform .14s ease;
}

.btn:hover,
.acoes-doc button:hover,
.btn-mostrar-senha:hover,
.btn-editar-usuario:hover,
.btn-redefinir-senha:hover,
.btn-salvar-categoria:hover,
.btn-remover-categoria:hover,
.btn-remover-usuario:hover,
.tabela .col-acoes button:hover {
  background: var(--fundo-suave);
  border-color: var(--texto-tenue);
}

.btn:active, .acoes-doc button:active { transform: translateY(1px); }

.btn:disabled, .acoes-doc button:disabled { opacity: .55; cursor: not-allowed; }

/* Primario (acao principal da tela) */
.btn-primario {
  background: var(--verde-forte);
  border-color: var(--verde-forte);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 129, 74, .3);
}
.btn-primario:hover { background: var(--verde-hover); border-color: var(--verde-hover); color: #fff; }

/* Destrutivo: discreto em repouso, vermelho no hover */
.acoes-doc button.remover,
.btn-remover-categoria,
.btn-remover-usuario,
.tabela .col-acoes button.remover {
  color: var(--perigo);
  border-color: var(--borda-forte);
}
.acoes-doc button.remover:hover,
.btn-remover-categoria:hover,
.btn-remover-usuario:hover,
.tabela .col-acoes button.remover:hover {
  background: var(--perigo-tenue);
  border-color: var(--perigo);
  color: var(--perigo);
}

/* Botao so-icone, sem moldura (barra do topo) */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-suave);
  box-shadow: none;
  transition: background-color .14s ease, color .14s ease;
}
.btn-icone:hover { background: var(--fundo-suave); color: var(--texto); }

/* Campos ------------------------------------------------------------------ */

.form-linha { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-linha > label,
.detalhe-usuario .campo > label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--texto-suave);
}

/* Vale para qualquer input que nao seja caixa de marcar (essas tem estilo
   proprio mais abaixo). Antes a regra listava os tipos um por um, e input
   escrito sem o atributo `type` ficava de fora, caindo no estilo padrao do
   navegador - borda reta no meio de campos arredondados.

   O :where() em volta do :not() e de proposito: ele nao soma especificidade.
   Sem ele a regra vale mais que `.busca input` e `.campo-senha-login input`,
   e o padding que esses dois ajustam para abrir espaco (a lupa da busca, o
   botao de ver senha no login) era descartado - o texto ficava por baixo do
   icone. Aqui o estilo base tem que ser o piso, nao o teto. */
input:not(:where([type="checkbox"], [type="radio"])), select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--fundo-card);
  color: var(--texto);
  font-size: 14px;
  box-shadow: var(--sombra-xs);
  transition: border-color .14s ease, box-shadow .14s ease;
}
input::placeholder { color: var(--texto-tenue); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: var(--anel-foco);
}

select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c98a9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}
select:disabled { opacity: .6; cursor: not-allowed; }

input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio-xs);
  background: var(--fundo-card);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
input[type="checkbox"]:hover { border-color: var(--azul); }
input[type="checkbox"]:checked {
  background: var(--azul) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--azul);
}
input[type="checkbox"]:focus-visible { box-shadow: var(--anel-foco); outline: none; }

.campo-senha { display: flex; gap: 8px; align-items: center; }
.campo-senha input { flex: 1; }

/* Cartoes ----------------------------------------------------------------- */

.cartao {
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: 24px;
  box-shadow: var(--sombra-sm);
}

/* Cartao que envolve uma tabela: sem respiro interno, a tabela encosta nas
   bordas e o cabecalho da tabela ganha fundo proprio. */
.cartao-tabela { padding: 0; overflow: hidden; }

/* Tabelas ----------------------------------------------------------------- */

.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  text-align: left;
  padding: 10px 16px;
  background: var(--fundo-suave);
  border-bottom: 1px solid var(--borda);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  white-space: nowrap;
}
.tabela td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
.tabela tbody tr:last-child > td { border-bottom: none; }
.tabela .col-acoes { text-align: right; width: 1%; white-space: nowrap; }
.tabela .col-acoes button + button { margin-left: 8px; }

.linha-usuario { transition: background-color .12s ease; }
.linha-usuario:hover { background: var(--fundo-suave); }

/* Chips / etiquetas ------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--raio-pill);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .03em;
  flex-shrink: 0;
  line-height: 1.6;
}
.badge-public { background: var(--verde-tenue); color: var(--verde-escuro); }
.badge-private { background: var(--ambar-tenue); color: var(--ambar); }
html[data-theme="dark"] .badge-public { color: #3fd693; }
.badge .icone { width: 12px; height: 12px; stroke-width: 2; }

/* Datas em tabela: largura fixa por digito, para as colunas alinharem */
.data-tabela { color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--fundo-suave);
  font-size: 12px;
  font-weight: 550;
  color: var(--texto-suave);
  white-space: nowrap;
}
.pill-admin { background: var(--azul-tenue); border-color: transparent; color: var(--azul-forte); }
html[data-theme="dark"] .pill-admin { color: var(--azul); }
.pill-leitor { background: var(--ambar-tenue); border-color: transparent; color: var(--ambar); }
.pill-ativo { background: var(--verde-tenue); border-color: transparent; color: var(--verde-escuro); }
html[data-theme="dark"] .pill-ativo { color: #3fd693; }
.pill-inativo { color: var(--texto-tenue); }
.pill-ativo .ponto, .pill-inativo .ponto {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}

/* Avatar com iniciais ----------------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, #0b8db8, #045d80);
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.avatar-lg { width: 46px; height: 46px; font-size: 16px; }

/* Mensagens --------------------------------------------------------------- */

.aviso { color: var(--texto-suave); font-size: 13px; }
.erro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 12px;
  border: 1px solid var(--perigo);
  border-radius: var(--raio-sm);
  background: var(--perigo-tenue);
  color: var(--perigo);
  font-size: 13px;
}

.mensagem-vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 55vh;
  color: var(--texto-suave);
  text-align: center;
}

/* ------------------------------------------------------------- 4. Layout */

.app-shell { display: flex; height: 100%; }

/* Barra lateral ----------------------------------------------------------- */

.sidebar {
  position: relative;
  z-index: 30;
  width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--sidebar-fundo-topo), var(--sidebar-fundo) 240px);
  color: var(--sidebar-texto);
  border-right: 1px solid var(--sidebar-borda);
}

.sidebar .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  flex-shrink: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--sidebar-borda);
  cursor: pointer; /* leva pra tela de inicio */
}
.sidebar .marca img.logo { height: 26px; width: auto; object-fit: contain; }
/* Logo escuro na barra clara, claro na escura - como na tela de login. */
.sidebar .marca img.logo-clara { display: none; }
html[data-theme="dark"] .sidebar .marca img.logo-escura { display: none; }
html[data-theme="dark"] .sidebar .marca img.logo-clara { display: block; }

.sidebar-secao { padding: 14px 12px 0; }

.btn-novo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--raio-sm);
  background: var(--verde-forte);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: background-color .14s ease, transform .14s ease;
}
.btn-novo:hover { background: var(--verde-hover); }
.btn-novo:active { transform: translateY(1px); }

.busca { position: relative; margin-top: 12px; }
.busca .icone-busca {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--sidebar-texto-suave);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  pointer-events: none;
}
.busca input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--sidebar-borda);
  background: var(--sidebar-campo);
  color: var(--sidebar-campo-texto);
  font-size: 13.5px;
  box-shadow: none;
}
.busca input::placeholder { color: var(--sidebar-texto-suave); }
.busca input:focus {
  border-color: var(--azul);
  background: var(--sidebar-campo-foco);
  box-shadow: 0 0 0 3px rgba(0, 170, 225, .18);
}
.busca input::-webkit-search-cancel-button { filter: invert(.6); cursor: pointer; }

.filtro-minhas {
  display: flex;
  align-items: center;
  gap: 9px;
  /* O respiro maior depois da busca agora e do "Inicio", que vem antes;
     aqui fica so o passinho que separa um item do outro. */
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  font-size: 13px;
  color: var(--sidebar-texto);
  cursor: pointer;
  transition: background-color .12s ease;
}
.filtro-minhas:hover { background: var(--sidebar-hover); }

/* Arrastar pasta para ordenar (ordem pessoal de cada um). A linha azul
   mostra onde a pasta vai cair - em cima ou embaixo da irma. */
.arrastando { opacity: .45; }
.alvo-acima { box-shadow: inset 0 2px 0 var(--azul); }
.alvo-abaixo { box-shadow: inset 0 -2px 0 var(--azul); }
.filtro-minhas input[type="checkbox"] {
  background: var(--sidebar-check-fundo);
  border-color: var(--sidebar-check-borda);
}
.filtro-minhas input[type="checkbox"]:checked { background-color: var(--azul); border-color: var(--azul); }

/* Rotulo de secao da navegacao ("Documentos", "Administracao") */
.nav-secao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  margin: 18px 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sidebar-texto-suave);
}
.nav-secao::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sidebar-borda);
}

#lista-documentos { padding: 0 12px 12px; }

/* Dica de que as pastas se arrastam. Fica no alto da lista, aparece so
   enquanto a pessoa nunca arrastou nada, e sai no X. Tracejada e sem fundo
   proprio para nao competir com as pastas: e um recado, nao um item da
   navegacao. */
.dica-arrastar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 10px;
  padding: 9px 10px;
  border: 1px dashed var(--sidebar-borda);
  border-radius: 8px;
  color: var(--sidebar-texto-suave);
  font-size: 12px;
  line-height: 1.35;
}
.dica-arrastar > .icone { flex-shrink: 0; margin-top: 1px; }
.dica-arrastar span { flex: 1; }
.dica-arrastar .fechar-dica {
  flex-shrink: 0;
  display: flex;
  padding: 2px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--sidebar-texto-suave);
  cursor: pointer;
}
.dica-arrastar .fechar-dica:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-texto-forte);
}

/* Cabecalho de categoria / pasta */
.categoria-titulo {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--sidebar-texto-suave);
  margin: 12px 0 4px;
  padding: 4px 8px;
}
/* Titulo do bloco de favoritos: mesma faixa das categorias, mas sem seta de
   minimizar - o bloco so existe quando ha favorito. */
.titulo-favoritos {
  display: flex;
  align-items: center;
  gap: 7px;
}
.titulo-favoritos .estrela-cheia { color: #e0b040; }

/* Pasta de dentro de uma categoria: linha dentro do bloco dela, com icone de
   pasta, nome e a contagem do que esta direto ali. Abre e fecha como a
   categoria (a seta gira igual), e pasta sem documento aparece do mesmo
   jeito, so sem nada embaixo. */
.pasta-item {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 1px 0;
  padding: 5px 8px;
  border-radius: var(--raio-xs);
  color: var(--sidebar-texto);
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, color .12s ease;
}
.pasta-item:hover { background: var(--sidebar-hover); color: var(--sidebar-texto-forte); }
.pasta-item .seta-categoria {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--sidebar-texto-suave);
  transition: transform .12s ease;
}
.pasta-item.colapsada .seta-categoria { transform: rotate(-90deg); }
.pasta-item .icone-sm { flex-shrink: 0; color: var(--sidebar-texto-suave); }
.pasta-item .nome-pasta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pasta-item .contagem-categoria {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: var(--raio-pill);
  background: var(--sidebar-chip);
  font-size: 10.5px;
  font-weight: 650;
  color: var(--sidebar-texto-suave);
}

.categoria-titulo-clicavel {
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--raio-xs);
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, color .12s ease;
}
.categoria-titulo-clicavel:hover { background: var(--sidebar-hover); color: var(--sidebar-texto); }
.categoria-titulo-clicavel .seta-categoria {
  display: inline-flex;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}
.categoria-titulo-clicavel.colapsada .seta-categoria { transform: rotate(-90deg); }
.categoria-titulo-clicavel .nome-grupo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.categoria-titulo-clicavel .contagem-categoria {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--raio-pill);
  background: var(--sidebar-chip);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--sidebar-texto-suave);
}

/* Item de documento */
.doc-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--raio-sm);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--sidebar-texto);
  transition: background-color .12s ease, color .12s ease;
}
.doc-item .titulo-doc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-item:hover { background: var(--sidebar-hover); color: var(--sidebar-texto-forte); }
.doc-item.ativo {
  background: var(--sidebar-ativo);
  color: var(--sidebar-texto-forte);
  font-weight: 550;
}
.doc-item.ativo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--azul);
}
.doc-item .badge { background: var(--sidebar-badge); color: var(--sidebar-texto-suave); }
.doc-item .badge-public { color: var(--sidebar-pub-texto); background: var(--sidebar-pub-fundo); }
.doc-item .badge-private { color: var(--sidebar-priv-texto); background: var(--sidebar-priv-fundo); }
/* Rascunho na barra lateral: toma o lugar de PUB/PRIV e usa um tom neutro -
   nao e visibilidade, e um documento que ainda nao esta pronto. */
.doc-item .badge-rascunho,
.badge-rascunho { color: #9aa7b6; background: rgba(154, 167, 182, .16); }

/* Area de administracao, encostada no rodape da barra lateral */
#link-admin {
  margin-top: auto;
  flex-shrink: 0;
  padding: 6px 12px 14px;
  border-top: 1px solid var(--sidebar-borda);
  background: var(--sidebar-rodape);
}
#link-admin .doc-item { font-size: 13px; }
#link-admin .categoria-titulo { margin-top: 10px; }

/* Barra lateral recolhida ------------------------------------------------- */
/* So em tela larga: no celular a barra ja e gaveta (sidebar-aberta) e nada
   disto vale. Tres estados: fixa aberta (padrao, igual a antes), recolhida
   (faixa de icones de 64px) e espiando (recolhida com o mouse em cima: a
   barra inteira por cima do conteudo, sem empurrar a tela). */

.sidebar .marca .logo-icone { display: none; width: 28px; height: 28px; }

.btn-fixar-menu {
  display: flex;
  margin-left: auto;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--sidebar-texto-suave);
  cursor: pointer;
}
.btn-fixar-menu:hover { background: var(--sidebar-hover); color: var(--sidebar-texto-forte); }

@media (max-width: 900px) {
  .btn-fixar-menu { display: none; }
}

@media (min-width: 901px) {
  /* Recolhida, a barra sai do fluxo e a coluna guarda o lugar dela: assim o
     conteudo nao pula quando ela abre por cima. */
  .app-shell.sidebar-recolhida .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 64px;
    overflow-x: hidden;
    transition: width .16s ease, box-shadow .16s ease;
  }
  .app-shell.sidebar-recolhida .coluna-conteudo { margin-left: 64px; }

  .app-shell.sidebar-recolhida.sidebar-espiando .sidebar {
    width: 290px;
    box-shadow: var(--sombra-lg);
  }

  /* So a faixa (recolhida e sem o mouse em cima) esconde os textos. */
  .sidebar-recolhida:not(.sidebar-espiando) .sidebar .marca { justify-content: center; padding: 0; }
  .sidebar-recolhida:not(.sidebar-espiando) .sidebar .marca .logo,
  .sidebar-recolhida:not(.sidebar-espiando) .btn-fixar-menu,
  .sidebar-recolhida:not(.sidebar-espiando) .rotulo-novo,
  .sidebar-recolhida:not(.sidebar-espiando) .sidebar .titulo-doc,
  .sidebar-recolhida:not(.sidebar-espiando) .sidebar .nav-secao,
  .sidebar-recolhida:not(.sidebar-espiando) .filtro-minhas,
  .sidebar-recolhida:not(.sidebar-espiando) .sidebar .contagem-categoria { display: none; }
  .sidebar-recolhida:not(.sidebar-espiando) .sidebar .marca .logo-icone { display: block; }

  .sidebar-recolhida:not(.sidebar-espiando) .sidebar .doc-item { justify-content: center; padding: 9px 0; }
  .sidebar-recolhida:not(.sidebar-espiando) .btn-novo { padding: 10px 0; }

  /* A lupa vira um item clicavel: o clique abre a barra e poe o foco no
     campo (app.js). */
  .sidebar-recolhida:not(.sidebar-espiando) .busca { height: 36px; border-radius: var(--raio-sm); cursor: pointer; }
  .sidebar-recolhida:not(.sidebar-espiando) .busca:hover { background: var(--sidebar-hover); }
  .sidebar-recolhida:not(.sidebar-espiando) .busca .icone-busca { left: 50%; transform: translate(-50%, -50%); }
  .sidebar-recolhida:not(.sidebar-espiando) .busca input { display: none; }

  /* A arvore de pastas some, mas continua ocupando o espaco: e ela que
     empurra a Administracao para o rodape, como na barra aberta. */
  .sidebar-recolhida:not(.sidebar-espiando) #lista-documentos { visibility: hidden; }
}

/* Coluna de conteudo ------------------------------------------------------ */

.coluna-conteudo {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--fundo);
}

.barra-topo {
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  background: var(--fundo-card);
  border-bottom: 1px solid var(--borda);
}
.barra-topo-espaco { flex: 1; min-width: 0; }
.barra-topo-acoes { display: flex; align-items: center; gap: 8px; }

.btn-menu-lateral { display: none; }

/* Trilha (breadcrumb) - contexto da tela aberta */
.trilha {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13px;
  color: var(--texto-suave);
}
.trilha .trilha-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trilha .trilha-item:last-child { color: var(--texto); font-weight: 550; }
.trilha .trilha-sep { color: var(--texto-tenue); flex-shrink: 0; }
/* Pasta da trilha: leva a tela dela. Discreta ate passar o mouse. */
.trilha .trilha-link { color: inherit; text-decoration: none; border-radius: 4px; }
.trilha .trilha-link:hover { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.trilha .trilha-link:hover .icone { color: var(--azul); }
.trilha .trilha-link:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.trilha .icone { color: var(--texto-tenue); }

.separador-vertical {
  width: 1px;
  height: 22px;
  background: var(--borda);
  flex-shrink: 0;
}

/* Menu do usuario */
.menu-usuario { position: relative; }
.menu-usuario-botao {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  color: var(--texto);
  font-size: 13px;
  font-weight: 550;
  transition: background-color .14s ease, border-color .14s ease;
}
.menu-usuario-botao:hover { background: var(--fundo-suave); border-color: var(--borda); }
.menu-usuario-botao .seta-menu {
  width: 14px;
  height: 14px;
  color: var(--texto-tenue);
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#nome-usuario-logado { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu-usuario-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 214px;
  padding: 6px;
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
  z-index: 40;
}
.menu-usuario-dropdown.aberto { display: block; animation: surgir .12s ease-out; }

/* Sino das notificacoes, ao lado do nome de quem esta logado ------------- */
.sino-notificacoes { position: relative; display: flex; }
.contador-sino {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--perigo);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.painel-sino {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: min(62vh, 520px);
  overflow-y: auto;
  padding: 6px;
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
  z-index: 40;
}
.painel-sino.aberto { display: block; animation: surgir .12s ease-out; }
.titulo-sino {
  padding: 8px 10px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-tenue);
}
/* Cada aviso e uma linha clicavel: leva ao documento (ou ao painel de uso,
   nos avisos gerais do administrador). */
.item-sino {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--raio-xs);
  background: none;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.item-sino:hover { background: var(--fundo-suave); }
.item-sino .assunto { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.item-sino .detalhe { font-size: 12.5px; color: var(--texto-suave); line-height: 1.4; }
.item-sino .quando { font-size: 11.5px; color: var(--texto-tenue); }
/* Novo desde a ultima vez que o sino foi aberto. */
.item-sino.nova { background: var(--azul-tenue); }
.item-sino.nova .assunto::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--azul);
  vertical-align: middle;
}
.sino-vazio { padding: 16px 10px; font-size: 13px; color: var(--texto-suave); }

@keyframes surgir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.menu-usuario-dropdown a,
.menu-usuario-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--raio-xs);
  background: none;
  color: var(--texto);
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  transition: background-color .12s ease;
}
.menu-usuario-dropdown a:hover,
.menu-usuario-dropdown button:hover { background: var(--fundo-suave); }
.menu-usuario-dropdown .icone { color: var(--texto-suave); }
.menu-usuario-dropdown .divisor-menu { height: 1px; margin: 5px 6px; background: var(--borda); }
.menu-usuario-dropdown .cabecalho-menu {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 5px;
}
.menu-usuario-dropdown .cabecalho-menu .nome { font-size: 13.5px; font-weight: 600; }
.menu-usuario-dropdown .cabecalho-menu .papel { font-size: 12px; color: var(--texto-suave); }
.menu-usuario-dropdown a.sair, .menu-usuario-dropdown a.sair .icone { color: var(--perigo); }
.menu-usuario-dropdown a.sair:hover { background: var(--perigo-tenue); }

/* Area de conteudo */
.conteudo {
  flex: 1;
  padding: 30px 36px 64px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}
.topo h1 { margin: 0; font-size: 24px; line-height: 1.25; }
.topo > .btn { flex-shrink: 0; }
.topo .subtitulo-tela { margin: 5px 0 0; font-size: 13.5px; color: var(--texto-suave); }

/* Larguras de leitura por tipo de tela */
/* O documento comeca abaixo da barra de acoes, e nao ao lado dela: a barra
   e flutuante (canto superior direito, sempre a mao) e com seis botoes passa
   de 640px, entao antes ela cobria a primeira linha dos titulos longos - que
   aqui sao a regra. A reserva antiga era horizontal (`padding-right: 200px`
   no titulo) e nao dava conta da largura real da barra.
   Os 40px abaixo sao so o valor de partida, para o titulo nao nascer embaixo
   dos botoes: quem define a altura final e `reservarFaixaDaBarra()`, no
   app.js, que MEDE a barra - ela quebra em duas linhas em tela estreita. */
.pagina-doc { max-width: var(--largura-doc); margin: 0 auto; padding-top: 40px; }
.pagina-form { max-width: var(--largura-doc); margin: 0 auto; }
.pagina-admin { max-width: var(--largura-admin); margin: 0 auto; }

/* Acoes flutuantes (Editar / Remover) no canto superior direito */
.acoes-doc { display: flex; gap: 8px; flex-wrap: wrap; }
.acoes-doc button.favorito-ativo { color: var(--ambar); border-color: var(--ambar); }
.acoes-doc button.favorito-ativo .icone { color: var(--ambar); }
.acoes-doc button.curtida-ativa { color: var(--azul-forte); border-color: var(--azul-forte); }
.acoes-doc button.curtida-ativa .icone { color: var(--azul-forte); }
/* Numero de curtidas dentro do botao */
.contagem-curtidas {
  margin-left: 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fundo-suave);
  font-size: 11.5px;
  font-weight: 600;
}
.acoes-doc button.curtida-ativa .contagem-curtidas { background: var(--azul-tenue); }
.acoes-doc-flutuante {
  position: absolute;
  top: 74px;
  right: 36px;
  z-index: 15;
}
.acoes-doc-flutuante:empty { display: none; }
.acoes-doc-flutuante button { box-shadow: var(--sombra-md); }

/* --------------------------------------------------------------- 5. Telas */

/* Documento --------------------------------------------------------------- */

/* "Voltar aos N resultados": so aparece quando o documento foi aberto pela
   tela de busca. Discreto de proposito - e um caminho de volta, nao uma acao
   do documento (essas ficam na barra flutuante do canto). */
.voltar-busca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--fundo-card);
  color: var(--texto-suave);
  font-size: 12.5px;
  cursor: pointer;
}
.voltar-busca:hover { border-color: var(--azul); color: var(--azul); }
.voltar-busca .icone { color: inherit; }

.doc-cabecalho { margin-bottom: 10px; }
.doc-cabecalho h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.22;
  letter-spacing: -.02em;
}

.meta-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 12.5px;
}
.meta-doc-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--fundo-card);
  white-space: nowrap;
  max-width: 100%;
}
.meta-doc-item .icone { width: 13.5px; height: 13.5px; color: var(--texto-tenue); }
.meta-doc-item strong { color: var(--texto); font-weight: 600; }
.meta-doc-item .valor-truncado { overflow: hidden; text-overflow: ellipsis; }
.meta-doc .badge { padding: 4px 10px; font-size: 11px; }

/* Corpo do documento - e o MESMO conjunto de regras vale para a area de
   escrita do editor (`.editor-envelope .ql-editor`), para o que se escreve
   sair igual ao que se le depois de salvar.
   Motivo: o Quill zera as margens de paragrafo, titulo e lista dentro do
   editor, e a tela do documento aplica as suas - quem escrevia via o texto
   colado e, ao salvar, encontrava um espaco a mais em cada paragrafo, alem
   de fonte e titulos de outro tamanho. Os seletores duplicados aqui sao de
   proposito: um valor so, nos dois lugares, sem risco de um mudar e o outro
   nao. As excecoes estao comentadas uma a uma. */

.doc-corpo {
  margin-top: 22px;
  padding: 34px 40px 40px;
}
/* Fonte e entrelinha compartilhadas. A largura util do texto tambem bate: o
   documento tem 40px de respiro dentro do cartao e o editor 15px dentro da
   moldura, o que compensa a diferenca de recuo das duas telas - assim uma
   imagem em 50% ocupa o mesmo tanto nas duas. */
.doc-corpo,
.editor-envelope .ql-editor {
  font-size: 15.5px;
  line-height: 1.72;
}
.editor-envelope .ql-editor { padding: 18px 15px; }

.doc-corpo > *:first-child,
.editor-envelope .ql-editor > *:first-child { margin-top: 0; }
.doc-corpo > *:last-child,
.editor-envelope .ql-editor > *:last-child { margin-bottom: 0; }

.doc-corpo h1, .doc-corpo h2, .doc-corpo h3, .doc-corpo h4,
.editor-envelope .ql-editor h1, .editor-envelope .ql-editor h2,
.editor-envelope .ql-editor h3, .editor-envelope .ql-editor h4 {
  margin: 1.7em 0 .55em;
  line-height: 1.3;
}
.doc-corpo h1, .editor-envelope .ql-editor h1 { font-size: 25px; }
.doc-corpo h2, .editor-envelope .ql-editor h2 {
  font-size: 20px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--borda);
}
.doc-corpo h3, .editor-envelope .ql-editor h3 { font-size: 17px; }
.doc-corpo h4, .editor-envelope .ql-editor h4 { font-size: 15px; }
.doc-corpo p, .editor-envelope .ql-editor p { margin: 0 0 1.05em; }
.doc-corpo ul, .doc-corpo ol,
.editor-envelope .ql-editor ul, .editor-envelope .ql-editor ol { margin: 0 0 1.05em; }
/* Recuo da lista: os dois chegam no mesmo lugar por caminhos diferentes. No
   documento o marcador e o do proprio navegador, e o recuo inteiro (1.6em)
   vem da lista. No editor quem desenha o marcador e o Quill, que ja poe
   1.5em de recuo em cada item - entao aqui a lista so completa a diferenca,
   pra o texto do item comecar na mesma coluna nas duas telas. */
.doc-corpo ul, .doc-corpo ol { padding-left: 1.6em; }
.editor-envelope .ql-editor ul, .editor-envelope .ql-editor ol { padding-left: .1em; }
.doc-corpo li, .editor-envelope .ql-editor li { margin-bottom: .35em; }
.doc-corpo li::marker { color: var(--texto-tenue); }
/* Lista de MARCAR na leitura do documento (o Quill so desenha a caixinha
   dentro do editor). O marcador proprio sai e entra uma caixa desenhada no
   ::before, para o passo poder virar clicavel na execucao. */
.doc-corpo ul[data-checked] { padding-left: 0; list-style: none; }
.doc-corpo ul[data-checked] > li {
  position: relative;
  padding-left: 1.9em;
}
.doc-corpo ul[data-checked] > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 1.05em;
  height: 1.05em;
  border: 1.5px solid var(--borda-forte);
  border-radius: 4px;
  background: var(--fundo);
}
.doc-corpo ul[data-checked="true"] > li::after,
.doc-corpo .passo-feito::after {
  content: "";
  position: absolute;
  left: .28em;
  top: .45em;
  width: .5em;
  height: .28em;
  border-left: 2px solid var(--verde-forte);
  border-bottom: 2px solid var(--verde-forte);
  transform: rotate(-45deg);
}

/* Execucao em andamento: o passo e clicavel, e quem manda no visual e a
   marcacao DESTA execucao (as classes), nao o data-checked do documento. */
.doc-corpo.executando ul[data-checked] > li { cursor: pointer; border-radius: 6px; }
.doc-corpo.executando ul[data-checked] > li:hover { background: var(--fundo-suave); }
.doc-corpo.executando ul[data-checked="true"] > li::after { content: none; }
.doc-corpo.executando .passo-aberto::before { border-color: var(--azul); }
.doc-corpo.executando .passo-feito::before { border-color: var(--verde-forte); }
.doc-corpo.executando .passo-feito { color: var(--texto-suave); }
.doc-corpo.executando .passo-feito::after { content: ""; }

.doc-corpo a, .editor-envelope .ql-editor a { text-decoration: underline; text-underline-offset: 2px; }
.doc-corpo img, .editor-envelope .ql-editor img {
  max-width: 100%;
  height: auto;
  margin: 6px 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}
.doc-corpo blockquote, .editor-envelope .ql-editor blockquote {
  margin: 1.2em 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--azul);
  color: var(--texto-suave);
  font-style: normal;
}
/* Bloco de codigo e `code` em linha: os seletores do editor levam um `html`
   na frente de proposito, e nao e enfeite. O `quill.snow.css` traz cor fixa
   para dentro da area de escrita - `.ql-snow .ql-editor pre` e
   `.ql-snow .ql-editor code` com fundo #f0f0f0, e `pre.ql-syntax` com fundo
   #23241f e texto claro - e ele carrega DEPOIS do estilo.css no app.html.
   Sem o `html`, a especificidade empata (duas classes e um elemento nos dois
   lados) e quem carrega por ultimo ganha: no tema escuro o bloco ficava com
   fundo claro do Quill e texto claro nosso, ilegivel, e o bloco criado pelo
   botao do editor ficava preto so enquanto se escrevia. Com o `html` as
   regras daqui ganham, e o `pre.ql-syntax` explicito e o que passa a frente
   da regra de tres classes mais um elemento do Quill.
   Trocar a ordem das duas folhas no app.html tambem resolveria o empate, mas
   entregaria ao Quill todos os outros empates - inclusive as margens que a
   rodada de 28/08 acertou. */
.doc-corpo pre, .doc-corpo .ql-syntax,
html .editor-envelope .ql-editor pre,
html .editor-envelope .ql-editor .ql-syntax,
html .editor-envelope .ql-editor pre.ql-syntax {
  margin: 1.2em 0;
  padding: 16px 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-suave);
  color: var(--texto);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.doc-corpo code,
html .editor-envelope .ql-editor code {
  padding: 2px 5px;
  border-radius: var(--raio-xs);
  background: var(--fundo-realce);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: .89em;
}
.doc-corpo pre code, .doc-corpo .ql-syntax code,
html .editor-envelope .ql-editor pre code,
html .editor-envelope .ql-editor .ql-syntax code { padding: 0; background: none; }
.doc-corpo hr, .editor-envelope .ql-editor hr { margin: 1.8em 0; border: none; border-top: 1px solid var(--borda); }

/* Tela de busca ----------------------------------------------------------- */
/* O resultado saiu da barra lateral (285px, trecho em tres palavras por
   linha, sem lugar para filtro) e passou a ter a area principal. */

.pagina-busca { max-width: var(--largura-admin); margin: 0 auto; }

.filtros-busca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-card);
}
.filtros-busca label {
  display: grid;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
}
.filtros-busca select { min-width: 170px; max-width: 320px; }
.filtros-busca button { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }

.grupo-busca { margin-bottom: 26px; }
.cabecalho-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.cabecalho-busca h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}
.contagem-busca {
  padding: 1px 8px;
  border-radius: var(--raio-pill);
  background: var(--fundo-realce);
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-suave);
}
/* Explicacao curta do grupo: por que aqueles documentos estao ali (so citam
   o termo) ou por que nenhum trata do assunto. */
.nota-busca {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-suave);
}

.resultado-busca {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  padding: 16px 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-card);
  cursor: pointer;
}
.resultado-busca:hover { border-color: var(--azul); }
.resultado-busca .linha-resultado { display: flex; align-items: center; gap: 9px; }
.resultado-busca h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.trecho-resultado {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-suave);
}
.trecho-resultado mark, .resultado-busca h3 mark {
  /* Sem folga lateral: com ela, "SIP-I" saia como "SIP -I" na tela. */
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(0, 170, 225, .22);
  color: inherit;
}
.meta-resultado {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12.5px;
  color: var(--texto-suave);
}
.meta-resultado span { display: inline-flex; align-items: center; gap: 5px; }
.meta-resultado .icone { color: var(--texto-suave); }

/* Lista vazia da barra lateral (nao da busca, que agora tem tela propria) */
.sem-resultado {
  padding: 10px;
  font-size: 13px;
  color: var(--sidebar-texto-suave);
}

/* Procedimento executavel ------------------------------------------------- */

.convite-execucao,
.painel-execucao { margin-bottom: 14px; }
.convite-execucao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-left: 3px solid var(--azul);
}
.convite-execucao > div { display: grid; gap: 3px; }
.convite-execucao span,
.topo-execucao span { font-size: 13px; color: var(--texto-suave); }
.convite-execucao button { flex-shrink: 0; }

.painel-execucao {
  display: grid;
  gap: 14px;
  border-left: 3px solid var(--verde-forte);
}
.topo-execucao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.topo-execucao > div { display: grid; gap: 3px; }
.barra-progresso {
  flex: 1;
  min-width: 140px;
  max-width: 320px;
  height: 8px;
  border-radius: var(--raio-pill);
  background: var(--fundo-realce);
  overflow: hidden;
}
.barra-progresso span {
  display: block;
  height: 100%;
  border-radius: var(--raio-pill);
  background: var(--verde-forte);
  transition: width .2s;
}
.acoes-execucao { display: flex; gap: 10px; flex-wrap: wrap; }

/* Quadro do que documentar ------------------------------------------------ */

.pagina-quadro { max-width: 1320px; margin: 0 auto; }

.quadro {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 14px;
  align-items: start;
}
.coluna-quadro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-suave);
}
.cabecalho-coluna { display: flex; align-items: center; gap: 8px; }
.cabecalho-coluna h2 { margin: 0; font-size: 14px; }
.ajuda-coluna { margin: -4px 0 2px; font-size: 12px; line-height: 1.4; color: var(--texto-suave); }
.cartoes-coluna { display: grid; gap: 10px; }
.coluna-vazia {
  padding: 14px 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--texto-tenue);
  text-align: center;
}

.cartao-tarefa {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio-sm);
  background: var(--fundo-card);
  cursor: pointer;
}
.cartao-tarefa:hover { border-color: var(--azul); }
.cartao-tarefa:focus-visible { outline: none; box-shadow: var(--anel-foco); }
/* Prazo vencido: a borda da esquerda avisa sem pintar o cartao inteiro. */
.cartao-tarefa.tarefa-atrasada { border-left-color: var(--perigo); }
.titulo-tarefa { font-size: 14px; font-weight: 600; line-height: 1.35; }
.observacao-tarefa {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--texto-suave);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.etiquetas-tarefa { display: flex; flex-wrap: wrap; gap: 5px; }
.etiqueta-origem {
  padding: 1px 7px;
  border-radius: var(--raio-pill);
  background: var(--fundo-realce);
  font-size: 11px;
  color: var(--texto-suave);
}
.etiqueta-origem.origem-busca { background: var(--azul-tenue); color: var(--azul-forte); }
.etiqueta-origem.origem-revisao { background: var(--ambar-tenue); color: var(--ambar); }
.meta-tarefa {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  font-size: 12px;
  color: var(--texto-suave);
}
.meta-tarefa span { display: inline-flex; align-items: center; gap: 4px; }
.meta-tarefa .prazo-vencido { color: var(--perigo); font-weight: 600; }
.doc-da-tarefa,
.avancar-tarefa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: none;
  color: var(--texto-suave);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.doc-da-tarefa:hover,
.avancar-tarefa:hover { border-color: var(--azul); color: var(--azul); }
.doc-da-tarefa { overflow: hidden; }

/* "no quadro" no lugar do botao, nas linhas do painel de uso que ja viraram
   tarefa. */
.ja-no-quadro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--verde-forte);
  white-space: nowrap;
}

/* Em tela estreita as quatro colunas não cabem lado a lado: viram uma lista
   de seções, cada uma com os seus cartões. Rolagem horizontal foi descartada
   de propósito — quadro que se lê rolando para o lado no celular não se lê. */
@media (max-width: 1100px) {
  .quadro { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 700px) {
  .quadro { grid-template-columns: 1fr; }
}

/* Topo do quadro: "Renomear colunas" (so administrador) ao lado de "Nova
   tarefa"; em tela estreita os dois descem juntos. */
.acoes-topo-quadro { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }

/* Janela de renomear: uma linha por coluna, com o numero a esquerda - e o
   numero que diz, sem texto, que a ordem das quatro nao muda. */
.linha-coluna-config {
  display: grid;
  grid-template-columns: auto 1fr 1.3fr;
  align-items: start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
}
.linha-coluna-config:last-of-type { border-bottom: 0; }
.linha-coluna-config .form-linha { margin-bottom: 0; }
.numero-coluna {
  margin-top: 24px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-pill);
  background: var(--fundo-realce);
  font-size: 12px;
  color: var(--texto-suave);
}
.marca-conclusao {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--raio-pill);
  background: var(--verde-tenue);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--verde-forte);
}
@media (max-width: 700px) {
  .linha-coluna-config { grid-template-columns: auto 1fr; gap: 10px; }
  .linha-coluna-config > .form-linha:last-child { grid-column: 1 / -1; }
  .numero-coluna { margin-top: 22px; }
}

/* Tela de comparar versoes ------------------------------------------------ */

.pagina-comparar { max-width: var(--largura-admin); margin: 0 auto; }
.pagina-comparar .filtros-busca label.escolha-tudo {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  display: flex;
}
.resumo-comparacao { margin: 0 0 14px; font-size: 14px; color: var(--texto-suave); }

.comparacao {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-card);
  overflow: hidden;
}
.cabecalho-comparacao,
.linha-comparacao {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cabecalho-comparacao {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fundo-suave);
  border-bottom: 1px solid var(--borda);
}
.lado-comparacao {
  display: grid;
  gap: 1px;
  padding: 10px 16px;
  font-size: 13px;
}
.lado-comparacao + .lado-comparacao { border-left: 1px solid var(--borda); }
.lado-comparacao span { font-size: 12px; color: var(--texto-suave); }

.linha-comparacao { border-bottom: 1px solid var(--borda); }
.linha-comparacao:last-child { border-bottom: 0; }
.celula-comparacao {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}
.celula-comparacao + .celula-comparacao { border-left: 1px solid var(--borda); }
.celula-comparacao.vazia { color: var(--texto-tenue); font-size: 13px; font-style: italic; }
.linha-comparacao.igual .celula-comparacao { color: var(--texto-suave); }
.linha-comparacao.saiu { background: var(--perigo-tenue); }
.linha-comparacao.entrou { background: var(--verde-tenue); }

/* O que saiu e o que entrou dentro de um trecho reescrito. Cor E forma: o
   risco e o sublinhado sobrevivem a impressao em preto e branco e a quem
   nao distingue vermelho de verde. */
.celula-comparacao del {
  background: var(--perigo-tenue);
  color: var(--perigo);
  text-decoration: line-through;
  border-radius: 3px;
  padding: 0 2px;
}
.celula-comparacao ins {
  background: var(--verde-tenue);
  color: var(--entrou-texto);
  text-decoration: underline;
  border-radius: 3px;
  padding: 0 2px;
}

.linha-igual-resumida {
  padding: 7px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-suave);
  font-size: 12.5px;
  color: var(--texto-tenue);
  text-align: center;
}

/* Em tela estreita as duas colunas viram uma em cima da outra, com uma linha
   marcando onde o "antes" termina e o "depois" comeca. */
@media (max-width: 860px) {
  .cabecalho-comparacao,
  .linha-comparacao { grid-template-columns: 1fr; }
  .lado-comparacao + .lado-comparacao,
  .celula-comparacao + .celula-comparacao {
    border-left: 0;
    border-top: 1px dashed var(--borda-forte);
  }
}

/* Tela de inicio ---------------------------------------------------------- */

.pagina-inicio { max-width: 1040px; margin: 0 auto; }

.saudacao { margin-bottom: 30px; }
.saudacao h1 { margin: 0; font-size: 27px; letter-spacing: -.02em; }
.resumo-inicio { margin: 6px 0 0; font-size: 14px; color: var(--texto-suave); }

/* Anexos do documento (lista abaixo do conteudo) */
.bloco-anexos { margin-top: 26px; }
.bloco-anexos:empty { display: none; }
.lista-anexos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
}
.item-anexo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  background: var(--fundo-card);
  font-size: 13.5px;
}
.item-anexo + .item-anexo { border-top: 1px solid var(--borda); }
.nome-anexo {
  color: var(--azul-forte);
  font-weight: 550;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nome-anexo:hover { text-decoration: underline; }
.meta-anexo { margin-left: auto; font-size: 12px; color: var(--texto-tenue); white-space: nowrap; }

/* Versoes anteriores. Fica fechado por padrao (<details>): quem abre o
   documento pra ler nao precisa da lista, quem foi corrigir precisa. */
.bloco-versoes { margin-top: 26px; }
.bloco-versoes:empty { display: none; }
/* "Quem curtiu" usa a mesma caixa das versoes - e a mesma coisa na tela:
   um bloco que abre embaixo do documento, so para quem pode ver. */
.bloco-curtidas { margin-top: 26px; }
.bloco-curtidas:empty { display: none; }

/* Lista de documentos na janela de inserir link */
.lista-escolha-doc {
  max-height: 320px;
  overflow-y: auto;
  margin: 10px 0 4px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.item-escolha-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--borda);
  background: none;
  color: var(--texto);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.item-escolha-doc:last-child { border-bottom: none; }
.item-escolha-doc:hover { background: var(--fundo-suave); }
.item-escolha-doc .titulo-doc { font-weight: 600; }

/* "Citado em": quem aponta para este documento. Lista curta e clicavel, para
   navegar de um procedimento ao outro sem voltar na busca. */
.bloco-citacoes { margin-top: 26px; }
.bloco-citacoes:empty { display: none; }
.lista-citacoes { display: grid; gap: 6px; margin-top: 10px; }
.item-citacao {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo-card);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.item-citacao:hover { border-color: var(--azul); }
.item-citacao .icone { color: var(--texto-tenue); flex-shrink: 0; }
.titulo-citacao { font-size: 13.5px; font-weight: 600; }
.pasta-citacao { margin-left: auto; font-size: 12px; color: var(--texto-tenue); white-space: nowrap; }
@media (max-width: 620px) {
  .item-citacao { flex-wrap: wrap; }
  .pasta-citacao { margin-left: 0; width: 100%; }
}

/* Comentarios: a conversa do documento. Diferente das versoes e das
   curtidas, este bloco fica ABERTO - e para ser lido, nao guardado. */
.bloco-comentarios { margin-top: 26px; }
.caixa-comentarios {
  margin-top: 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo-card);
}
.item-comentario { padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.cabecalho-comentario {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.autor-comentario { font-size: 13.5px; font-weight: 600; }
.data-comentario { font-size: 12.5px; color: var(--texto-tenue); }
/* O botao de remover fica no fim da linha, discreto - so aparece para quem
   pode remover, e o servidor confere de novo. */
.btn-remover-comentario { margin-left: auto; }
.texto-comentario {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto);
  /* Quebra de linha escrita por quem comentou e respeitada, e palavra longa
     (um caminho de arquivo, uma URL) nao estoura a caixa. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.aviso-sem-comentario {
  padding: 16px;
  font-size: 13.5px;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
}
.form-comentario { padding: 14px 16px; display: grid; gap: 10px; }
.form-comentario textarea { resize: vertical; min-height: 68px; }
.acoes-comentario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.acoes-comentario .dica-campo { color: var(--perigo); }
.caixa-versoes {
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo-card);
}
.caixa-versoes > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.caixa-versoes > summary::-webkit-details-marker { display: none; }
.caixa-versoes > summary .titulo-secao { margin-bottom: 0; }
.caixa-versoes > summary::after {
  content: '';
  width: 7px; height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--texto-tenue);
  border-bottom: 2px solid var(--texto-tenue);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.caixa-versoes[open] > summary::after { transform: rotate(-135deg); }
.contagem-versoes {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fundo-suave);
  font-size: 12px;
  color: var(--texto-suave);
}
.lista-versoes { border-top: 1px solid var(--borda); }
.item-versao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
}
.item-versao + .item-versao { border-top: 1px solid var(--borda); }
.data-versao { font-weight: 550; white-space: nowrap; }
.autor-versao { color: var(--texto-suave); font-size: 12.5px; white-space: nowrap; }
.titulo-versao {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-tenue);
  font-size: 12.5px;
}
.acoes-versao { display: flex; gap: 6px; margin-left: auto; }
.caixa-versoes > .dica-campo { display: block; padding: 10px 14px; border-top: 1px solid var(--borda); }

/* Faixa de "voce esta vendo uma versao antiga" - vermelha, nao ambar: o
   risco aqui e a pessoa achar que esta lendo o procedimento atual.
   As duas classes juntas no seletor de proposito: .faixa-atencao define a
   borda pelo atalho (border-left) e aparece depois neste arquivo, entao um
   seletor de uma classe so perderia a cor para o ambar dela. */
.faixa-atencao.faixa-versao {
  border-left-color: var(--perigo);
  margin-bottom: 18px;
}
.faixa-versao .acoes-versao { margin-left: 0; margin-top: 8px; }

/* Em tela estreita a linha da versao empilha, senao os botoes somem. */
@media (max-width: 720px) {
  .item-versao { flex-wrap: wrap; }
  .titulo-versao { width: 100%; }
  .acoes-versao { margin-left: 0; }
}
.btn-remover-anexo {
  display: flex;
  align-items: center;
  padding: 4px;
  border: 0;
  border-radius: var(--raio-xs);
  background: transparent;
  color: var(--texto-tenue);
  cursor: pointer;
}
.btn-remover-anexo:hover { background: var(--perigo-tenue); color: var(--perigo); }
.acoes-anexo { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* Faixa do rascunho recuperavel, no topo do formulario do documento */
.faixa-rascunho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  padding: 11px 14px;
  border: 1px solid var(--ambar);
  border-radius: var(--raio-sm);
  background: var(--ambar-tenue);
  font-size: 13px;
  color: var(--texto);
}
.acoes-rascunho { display: flex; gap: 8px; }
.btn-pequeno { padding: 5px 12px; font-size: 12.5px; }

/* Faixa de atencao (ex: usuario sem nenhuma categoria liberada) */
.faixa-atencao {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 28px;
  padding: 16px 18px;
  border-left: 3px solid var(--ambar);
  font-size: 13.5px;
  color: var(--texto-suave);
}
.faixa-atencao strong { color: var(--texto); font-size: 14px; }
/* Rascunho e aviso calmo (quem escreve ja sabe); prazo vencido e aviso de
   atencao de verdade, porque quem le pode seguir um procedimento velho. */
.faixa-atencao.faixa-rascunho-doc { border-left-color: var(--borda-forte); }
.faixa-atencao.faixa-vencido { border-left-color: var(--perigo); }
/* Arquivado: aviso neutro, nao de erro - o documento esta guardado, e nao
   quebrado. */
.faixa-atencao.faixa-arquivado { border-left-color: var(--texto-tenue); }
.faixa-arquivado .acoes-versao { margin-top: 10px; }
.faixa-vencido .acoes-versao { margin-top: 10px; }
/* A mesma informacao na faixa de dados do documento, para quem so bate o
   olho na linha de cima. */
.meta-doc-item.meta-vencido { color: var(--perigo); }
.meta-doc-item.meta-vencido strong { color: var(--perigo); }

.secao-inicio { margin-bottom: 34px; }
.titulo-secao {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
}
.titulo-secao .estrela-cheia { color: var(--ambar); }

.aviso-vazio {
  padding: 22px;
  text-align: center;
  font-size: 13.5px;
  color: var(--texto-suave);
}

/* Lista "atualizados recentemente" */
.lista-recentes {
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
}
.item-recente {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--borda);
  cursor: pointer;
  transition: background-color .12s ease;
}
.item-recente:last-child { border-bottom: none; }
.item-recente:hover { background: var(--fundo-suave); }
.item-recente .titulo-recente {
  font-size: 14.5px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-recente .categoria-recente {
  max-width: 240px;
  font-size: 12.5px;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-recente .data-recente {
  min-width: 92px;
  text-align: right;
  font-size: 12.5px;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* Cartoes de categoria */
.grade-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 14px;
}
.cartao-categoria {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 96px;
  padding: 16px 18px;
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-xs);
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.cartao-categoria:hover {
  border-color: var(--azul);
  box-shadow: var(--sombra-md);
  transform: translateY(-1px);
}
.cartao-categoria.vazio { cursor: default; box-shadow: none; }
.cartao-categoria.vazio:hover { border-color: var(--borda); box-shadow: none; transform: none; }
.topo-cartao-categoria { display: flex; align-items: flex-start; gap: 10px; }
.topo-cartao-categoria .icone { margin-top: 2px; color: var(--azul-forte); }
.cartao-categoria.vazio .topo-cartao-categoria .icone { color: var(--texto-tenue); }
.nome-cartao-categoria { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.nome-cartao-categoria .pai-categoria {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--texto-tenue);
}
.contagem-cartao-categoria { font-size: 12.5px; color: var(--texto-suave); }

/* Atalhos */
.grade-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}
.atalho-inicio {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  color: var(--texto);
  box-shadow: var(--sombra-xs);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
button.atalho-inicio:hover {
  border-color: var(--azul);
  box-shadow: var(--sombra-md);
  transform: translateY(-1px);
}
.atalho-inicio > .icone { color: var(--azul-forte); }
.atalho-inicio.somente-leitura { cursor: default; box-shadow: none; }
.atalho-inicio.somente-leitura > .icone { color: var(--ambar); }
.titulo-atalho { font-size: 14.5px; font-weight: 600; }
.texto-atalho { margin-top: 2px; font-size: 12.5px; color: var(--texto-suave); }

/* Item "Início" da barra lateral - primeira opcao, logo abaixo da busca */
.item-inicio { margin-top: 12px; }

/* Tela de boas-vindas (perfil somente leitura) ----------------------------- */

/* Pagina fixa que o cliente com acesso de leitura ve no lugar do painel.
   Os tons da marca aqui sao literais (nao os tokens --azul-forte/--verde-forte)
   porque no tema escuro esses tokens viram a versao clara da cor e o texto
   branco por cima deixaria de contrastar - o degrade precisa ficar escuro
   nos dois temas. */

.pagina-boas-vindas { max-width: 1040px; margin: 0 auto; }

.hero-boas-vindas {
  margin-bottom: 34px;
  padding: 34px 36px 30px;
  border-radius: var(--raio-lg);
  background: linear-gradient(135deg, #0079a3 0%, #00814a 100%);
  color: #fff;
  box-shadow: var(--sombra-md);
}
.etiqueta-hero {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .78);
}
.hero-boas-vindas h1 {
  margin: 10px 0 0;
  font-size: 30px;
  letter-spacing: -.02em;
  color: #fff;
}
.chamada-hero {
  max-width: 68ch;
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
}
.slogan-hero {
  display: inline-block;
  margin-top: 20px;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* "Como usar esta central" */
.grade-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.cartao-info {
  padding: 20px;
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-xs);
}
.cartao-info > .icone { color: var(--azul-forte); }
.titulo-info { margin-top: 12px; font-size: 14.5px; font-weight: 600; }
.texto-info { margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--texto-suave); }

/* "Sobre a ZZ Solutions" */
.bloco-sobre p {
  max-width: 72ch;
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--texto-suave);
}
.bloco-sobre p:last-of-type { margin-bottom: 0; }
.missao {
  max-width: 72ch;
  margin: 20px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--verde);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--texto);
}
.rotulo-missao,
.rotulo-valores {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-tenue);
}
.valores { margin-top: 22px; }
.lista-valores { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-valor {
  padding: 4px 12px;
  background: var(--azul-tenue);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--azul-forte);
}

/* "Produtos e servicos" */
.grade-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px;
  /* sem align-items: start - os cartoes de uma mesma linha esticam ate a
     altura do mais alto, entao a grade fica alinhada em cima e embaixo */
}
.cartao-produto {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-xs);
}
.nome-produto { font-size: 14.5px; font-weight: 600; }
.texto-produto { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--texto-suave); }

/* "Precisa falar com a gente?" */
.texto-contato {
  max-width: 72ch;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--texto-suave);
}
.lista-contato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.item-contato { display: flex; align-items: flex-start; gap: 11px; }
.item-contato .icone { margin-top: 2px; color: var(--azul-forte); flex-shrink: 0; }
.rotulo-contato {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-tenue);
}
.valor-contato { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; }
/* Os tres valores sao links (conversa do WhatsApp, programa de e-mail e
   mapa). Ficam com a cor de link do tema, e o sublinhado so no hover pra
   nao poluir o endereco, que ocupa duas linhas. */
a.valor-contato { text-decoration: none; }
a.valor-contato:hover, a.valor-contato:focus-visible { text-decoration: underline; }

/* Formulario de documento ------------------------------------------------- */

.acoes-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
}
.dica-campo { font-size: 12.5px; color: var(--texto-suave); }

/* Segunda secao dentro de uma tela de administracao (ex: Modelos, embaixo
   das Categorias): mesmo cabecalho da tela, um degrau menor. */
.topo-secao-admin { margin-top: 38px; }
.topo-secao-admin h2 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
}
/* Uso da base: tres numeros grandes no topo e tabelas clicaveis. */
.grade-resumo-uso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.cartao-numero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 20px;
}
.numero-grande {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.rotulo-numero { font-size: 12.5px; color: var(--texto-suave); }
/* Numero que pede uma providencia (documento parado, documento sem prazo).
   A cor entra so na borda e no numero - o cartao continua igual aos outros,
   para a tela nao virar um semaforo. */
.cartao-numero.cartao-atencao { border-color: var(--ambar); }
.cartao-numero.cartao-atencao .numero-grande { color: var(--ambar); }
/* Alguns valores sao duas palavras ("5 meses", "1,5 anos"): equilibra a
   quebra em vez de deixar uma palavra sozinha na segunda linha. */
.cartao-numero .numero-grande { text-wrap: balance; }

.tabela .col-numero { text-align: right; white-space: nowrap; }
.tabela .celula-numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .celula-suave { color: var(--texto-suave); font-size: 13px; }
.tabela tr.linha-clicavel { cursor: pointer; }
.tabela tr.linha-clicavel:hover { background: var(--fundo-suave); }
.tabela tr.linha-clicavel:hover .link-tabela { color: var(--azul-forte); }

td.aviso-vazio {
  padding: 18px 16px;
  color: var(--texto-suave);
  font-size: 13.5px;
}

/* Administracao: usuarios ------------------------------------------------- */

.celula-usuario { display: flex; align-items: center; gap: 10px; }
.celula-usuario .nome-usuario { font-weight: 600; }
.celula-usuario .email-usuario { font-size: 12.5px; color: var(--texto-suave); }

.linha-detalhe-usuario > td {
  padding: 0 !important;
  background: var(--fundo-suave);
  border-bottom: 1px solid var(--borda);
}

.detalhe-usuario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px 26px;
  padding: 22px;
}
.detalhe-usuario .campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.detalhe-usuario .campo select { width: 100%; max-width: 220px; }
.detalhe-usuario .campo-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: end;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo-card);
  font-size: 13.5px;
  cursor: pointer;
  width: max-content;
}
.detalhe-usuario .campo-largo { grid-column: 1 / -1; }
.detalhe-usuario .acoes-usuario-detalhe {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--borda);
}
.acoes-usuario { display: flex; gap: 8px; align-items: center; }
.acoes-usuario .input-nova-senha { flex: 1; min-width: 0; }

.lista-categorias-permissao {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 210px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo-card);
}
.item-categoria-permissao {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: var(--raio-xs);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color .12s ease;
}
.item-categoria-permissao:hover { background: var(--fundo-suave); }
.item-categoria-permissao .nome-categoria-principal { font-weight: 600; }
.item-categoria-permissao .nome-subpasta { color: var(--texto-suave); }
.item-categoria-permissao .icone { color: var(--texto-tenue); }

/* Grupos de acesso: de onde vem o acesso de uma pessoa. O aviso é azul e não
   âmbar de propósito - não é problema, é explicação de por que a pessoa
   enxerga uma pasta que não está marcada logo abaixo. */
.vem-de-grupo {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  background: var(--azul-tenue);
  font-size: 13px;
  line-height: 1.5;
}
.vem-de-grupo .dica-campo { margin: 0; }
.marca-por-grupo {
  padding: 1px 7px;
  border-radius: var(--raio-pill);
  background: var(--azul-tenue);
  color: var(--azul-forte);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.lista-capacidades {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.lista-capacidades .campo-checkbox,
.lista-pessoas-grupo .campo-checkbox,
/* "Todas as pastas" mora solto dentro da form-linha, mas e a mesma coisa:
   caixa, texto e explicacao embaixo (e nao em negrito, como sao os rotulos
   de campo). */
.form-linha > .campo-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 9px;
  padding: 6px 7px;
  border-radius: var(--raio-xs);
  font-size: 13px;
}
/* A explicacao fica na segunda linha, alinhada com o texto e nao com a caixa */
.lista-capacidades .dica-campo,
.lista-pessoas-grupo .dica-campo,
.form-linha > .campo-checkbox .dica-campo { grid-column: 2; margin: 0; }
.form-linha > .campo-checkbox { font-weight: 400; padding-left: 0; }
.lista-capacidades .campo-checkbox:hover { background: var(--fundo-suave); }

.lista-pessoas-grupo {
  display: grid;
  gap: 4px;
  max-height: 210px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.lista-pessoas-grupo .campo-checkbox:hover { background: var(--fundo-suave); }

/* Cada linha tem dois controles: liberar a categoria (a esquerda, ocupando a
   linha) e "pode editar" (a direita). Por isso a linha deixou de ser um
   <label> unico - com dois checkboxes dentro do mesmo label, clicar em um
   acionaria o outro junto. */
.alvo-categoria-permissao {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.alvo-categoria-permissao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.marca-edicao-categoria {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--texto-suave);
  white-space: nowrap;
  cursor: pointer;
}
.marca-edicao-categoria input { margin: 0; }
.marca-edicao-categoria:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* Historico como linha do tempo */
.lista-historico {
  display: flex;
  flex-direction: column;
  max-height: 210px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo-card);
  font-size: 13px;
}
.item-historico {
  position: relative;
  padding: 7px 0 7px 18px;
  line-height: 1.5;
}
.item-historico::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--borda-forte);
}
.item-historico:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5.7px;
  top: 21px;
  bottom: -2px;
  width: 1px;
  background: var(--borda);
}
.item-historico:first-child::before { background: var(--azul); }
.item-historico .data-historico {
  display: block;
  font-size: 11.5px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Administracao: categorias ----------------------------------------------- */

.tabela .cat-nome { min-width: 160px; }
.tabela .cat-pasta { min-width: 150px; max-width: 220px; }
.tabela .cat-ordem { width: 78px; text-align: center; }
.tabela .modelo-nome { min-width: 200px; }
.tabela .modelo-ordem { width: 78px; text-align: center; }
.celula-arvore { display: flex; align-items: center; gap: 8px; }
.celula-arvore .icone { color: var(--texto-tenue); }
.celula-arvore .cat-nome { flex: 1; min-width: 120px; }
.guia-nivel {
  flex-shrink: 0;
  align-self: stretch;
  border-left: 1px dashed var(--borda-forte);
}

/* Modal ------------------------------------------------------------------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 12, 19, .5);
  backdrop-filter: blur(3px);
}
.modal-overlay.aberto { display: flex; animation: surgir .14s ease-out; }
.modal-cartao {
  width: 420px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 22px;
  box-shadow: var(--sombra-lg);
}
.modal-cartao-largo { width: 520px; }
/* Janela que tem o editor de texto dentro (modelo de documento): 520px
   deixa a area de escrita estreita demais para montar a estrutura de um
   procedimento. */
.modal-cartao-editor { width: 760px; }

.modal-cartao .topo { align-items: flex-start; margin-bottom: 20px; }
.modal-cartao .topo h1 { font-size: 17px; }
.modal-cartao .topo .subtitulo-tela { font-size: 12.5px; }
.btn-fechar-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: var(--raio-xs);
  background: none;
  color: var(--texto-suave);
  transition: background-color .12s ease;
}
.btn-fechar-modal:hover { background: var(--fundo-suave); color: var(--texto); }

/* Rodape das janelas de criacao: acoes alinhadas a direita */
.acoes-modal {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
}

/* Janela de introducao do primeiro acesso (um passo por vez).
   O bloco do passo tem altura minima pra janela nao pular de tamanho ao
   trocar de passo - os textos tem comprimentos diferentes. */
.modal-cartao-introducao { width: 520px; }
.topo-introducao { margin-bottom: 0; }
.etiqueta-introducao {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--azul-forte);
}
.modal-cartao-introducao .topo h1 { margin-top: 7px; font-size: 20px; letter-spacing: -.01em; }

.passo-introducao {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 128px;
  padding: 22px 0 2px;
}
.icone-passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--raio);
  background: var(--azul-tenue);
  color: var(--azul-forte);
}
.titulo-passo { font-size: 15.5px; font-weight: 600; }
.texto-passo {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--texto-suave);
}

.rodape-introducao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}
/* Os pontos sao botoes: clicar volta pro passo, no lugar de um botao
   "Voltar" a mais no rodape. */
.pontos-introducao { display: flex; gap: 7px; }
.ponto-introducao {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--raio-pill);
  background: var(--borda-forte);
  cursor: pointer;
  transition: background-color .12s ease, width .12s ease;
}
.ponto-introducao:hover { background: var(--texto-tenue); }
.ponto-introducao.ativo { width: 20px; background: var(--azul-forte); }
.acoes-introducao { display: flex; gap: 10px; }

.perfil-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--borda);
}
.perfil-topo .perfil-nome { font-size: 16px; font-weight: 650; }
.perfil-topo .perfil-email { font-size: 13px; color: var(--texto-suave); }

.info-perfil { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.info-perfil .linha-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--borda);
}
.info-perfil .linha-info:last-child { border-bottom: none; }
.info-perfil .linha-info label {
  font-size: 12.5px;
  color: var(--texto-suave);
  flex-shrink: 0;
}
.info-perfil .linha-info > span { text-align: right; font-weight: 550; }

/* Login ------------------------------------------------------------------- */

/* Tela dividida: campos a esquerda (coluna estreita, largura travada para
   nao esticar em monitor grande) e painel de apresentacao a direita. */

body.pagina-login { min-height: 100vh; background: var(--fundo); }

.tela-login { display: flex; min-height: 100vh; }

.painel-form {
  flex: 0 0 clamp(380px, 36%, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 40px;
  background: var(--fundo-card);
  border-right: 1px solid var(--borda);
}
.caixa-login { width: 100%; max-width: 340px; }

.login-logo { display: flex; margin-bottom: 30px; }
.login-logo img.logo { height: 34px; width: auto; object-fit: contain; }
.login-logo img.logo-escura { display: block; }
.login-logo img.logo-clara { display: none; }
html[data-theme="dark"] .login-logo img.logo-escura { display: none; }
html[data-theme="dark"] .login-logo img.logo-clara { display: block; }

.caixa-login h1 { margin: 0 0 5px; font-size: 23px; letter-spacing: -.02em; }
.caixa-login .login-sub {
  margin: 0 0 26px;
  font-size: 13.5px;
  color: var(--texto-suave);
}

/* Campo de senha com o "Mostrar" por dentro, para nao criar uma segunda
   coluna e afinar ainda mais o campo nesta coluna estreita. */
.campo-senha-login { position: relative; }
.campo-senha-login input { padding-right: 78px; }
.btn-ver-senha {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border: none;
  border-radius: var(--raio-xs);
  background: none;
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 550;
  transition: background-color .12s ease, color .12s ease;
}
.btn-ver-senha:hover { background: var(--fundo-suave); color: var(--texto); }

.caixa-login button.entrar {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: none;
  border-radius: var(--raio-sm);
  background: var(--azul-botao);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 121, 163, .35);
  transition: background-color .14s ease, transform .14s ease, opacity .14s ease;
}
.caixa-login button.entrar:hover { background: var(--azul-botao-hover); }
.caixa-login button.entrar:active { transform: translateY(1px); }
.caixa-login button.entrar:disabled { opacity: .7; cursor: progress; transform: none; }

.dica-senha { margin-top: 18px; font-size: 12.5px; color: var(--texto-suave); }
.rodape-login {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--texto-tenue);
}

/* Painel de apresentacao, nas cores da marca */
.painel-marca {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 52px 56px;
  color: #e8eef6;
  overflow: hidden;
  background:
    radial-gradient(700px 380px at 18% 12%, rgba(0, 170, 225, .3), transparent 62%),
    radial-gradient(620px 420px at 88% 92%, rgba(0, 172, 98, .22), transparent 60%),
    linear-gradient(155deg, #101a2c, #0b1220 60%);
}
.painel-marca .chamada { max-width: 460px; margin: auto 0; }
.painel-marca .chamada h2 {
  margin: 0 0 12px;
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
}
.painel-marca .chamada > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #a9b7c9;
}
.painel-marca .rodape-painel { font-size: 12px; color: #6f7f92; }

.lista-recursos { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.item-recurso { display: flex; align-items: flex-start; gap: 12px; }
.item-recurso .selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #6fd0f2;
}
.item-recurso .selo .icone { width: 17px; height: 17px; stroke-width: 1.8; }
.item-recurso .titulo-recurso { font-size: 14px; font-weight: 600; color: #eef3f9; }
.item-recurso .texto-recurso { font-size: 13px; line-height: 1.5; color: #93a3b6; }

/* Em tela estreita o painel vira uma faixa no topo e os campos ocupam o
   restante - sem o painel roubar altura do formulario. */
@media (max-width: 860px) {
  .tela-login { flex-direction: column-reverse; }
  .painel-marca {
    flex: none;
    gap: 20px;
    padding: 26px 24px;
  }
  .painel-marca .chamada { margin: 0; }
  .painel-marca .chamada h2 { font-size: 22px; }
  .painel-marca .lista-recursos,
  .painel-marca .rodape-painel { display: none; }
  .painel-form {
    flex: 1;
    padding: 34px 24px 64px;
    border-right: none;
    border-top: 1px solid var(--borda);
  }
  .caixa-login { max-width: 420px; }
  .login-logo { justify-content: center; }
  .caixa-login h1, .caixa-login .login-sub { text-align: center; }
}

.tema-toggle {
  position: fixed;
  bottom: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--fundo-card);
  color: var(--texto-suave);
  box-shadow: var(--sombra-sm);
  transition: color .14s ease, border-color .14s ease;
}
.tema-toggle:hover { color: var(--texto); border-color: var(--borda-forte); }

/* Perguntar ao wiki (IA) e a conferencia do que foi enviado */
.caixa-pergunta { padding: 16px; }
.caixa-pergunta textarea { resize: vertical; min-height: 76px; }
.acoes-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}
.acoes-pergunta .btn { flex-shrink: 0; }
.resposta-ia { margin-top: 16px; }
.resposta-ia .doc-corpo { margin: 0; padding: 0; font-size: 15px; }
.resposta-ia .lista-interna,
.resposta-ia .bloco-interno { margin-left: 1.6em; }
.resposta-ia .doc-corpo ol + .lista-interna,
.resposta-ia .doc-corpo .lista-interna + .bloco-interno { margin-top: -.6em; }
.cita-doc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 2px;
  padding: 0 6px;
  border-radius: var(--raio-pill);
  background: var(--azul-tenue);
  color: var(--azul-forte);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  vertical-align: 1px;
}
.fontes-ia { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borda); }
.fontes-ia h3 { margin: 0 0 8px; font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.fonte-ia {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 14px;
}
.fontes-ia .dica-campo { margin: 10px 0 0; }
.registro-ia { padding: 0; margin-bottom: 10px; }
.registro-ia summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
}
.registro-ia summary .celula-suave { flex-shrink: 0; color: var(--texto-suave); font-size: 13px; }
.registro-ia .pergunta-registro { flex: 1; min-width: 0; }
.registro-ia h4 { margin: 4px 18px 6px; font-size: 13px; color: var(--texto-suave); }
.registro-ia pre {
  margin: 0 18px 14px;
  max-height: 320px;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-suave);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.marcador-ia {
  padding: 0 3px;
  border-radius: var(--raio-xs);
  background: var(--verde-tenue);
  color: var(--entrou-texto);
  font-weight: 600;
}
.etiqueta-provedor-ia {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: var(--raio-pill);
  background: var(--fundo-realce);
  color: var(--texto-suave);
  font-size: 12px;
}
.etiqueta-erro-ia {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: var(--raio-pill);
  background: var(--perigo-tenue);
  color: var(--perigo);
  font-size: 12px;
}
@media (max-width: 640px) {
  .acoes-pergunta { flex-direction: column; align-items: stretch; }
  .registro-ia summary { flex-wrap: wrap; }
}

/* --------------------------------------------------------- 6. Editor Quill */

.editor-envelope {
  position: relative; /* referencia das alcas de redimensionar a imagem */
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  overflow: hidden;
  background: var(--fundo-card);
  box-shadow: var(--sombra-xs);
}
.editor-envelope .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-suave);
  padding: 8px 10px;
}
.editor-envelope .ql-container.ql-snow { border: none; }
#editor-quill {
  min-height: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--fundo-card);
  font-family: inherit;
}
/* Fonte, entrelinha, margens, recuo e o visual da imagem vem do bloco do
   corpo do documento (.doc-corpo), compartilhado la em cima - inclusive o
   padding lateral de 15px, que e o que faz a largura util do texto bater
   com a da tela do documento. Nada de tamanho ou espacamento aqui. */
#editor-quill .ql-editor.ql-blank::before {
  color: var(--texto-tenue);
  font-style: normal;
  left: 15px;
  right: 15px;
}
/* Clicar seleciona a imagem para redimensionar (nos dois editores). */
.editor-envelope .ql-editor img { cursor: pointer; }

/* Imagem selecionada no editor: moldura, quatro alcas de canto, a medida em
   % e a volta ao tamanho do arquivo. A caixa em si nao recebe clique
   (pointer-events: none) para nao roubar o cursor de quem esta escrevendo -
   so as alcas e o botao recebem. */
.caixa-imagem-selecionada {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  outline: 2px solid var(--azul);
  outline-offset: 1px;
  border-radius: var(--raio-xs);
}
.caixa-imagem-selecionada .alca {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--azul-forte);
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: var(--sombra-sm);
  pointer-events: auto;
  touch-action: none; /* no celular, arrastar a alca nao rola a pagina */
}
.alca-sup-esq { left: -7px; top: -7px; cursor: nwse-resize; }
.alca-sup-dir { right: -7px; top: -7px; cursor: nesw-resize; }
.alca-inf-esq { left: -7px; bottom: -7px; cursor: nesw-resize; }
.alca-inf-dir { right: -7px; bottom: -7px; cursor: nwse-resize; }
.controles-imagem {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.caixa-imagem-selecionada.controles-abaixo .controles-imagem {
  bottom: auto;
  top: calc(100% + 8px);
}
.medida-imagem {
  padding: 3px 8px;
  border-radius: var(--raio-pill);
  background: rgba(8, 12, 19, .72);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.btn-tamanho-original {
  padding: 3px 10px;
  border: none;
  border-radius: var(--raio-pill);
  background: rgba(8, 12, 19, .72);
  color: #fff;
  font-size: 11.5px;
  font-weight: 550;
  cursor: pointer;
  pointer-events: auto;
}
.btn-tamanho-original:hover { background: var(--azul-forte); }

/* Tema escuro: a folha padrao do Quill (snow) e clara - reajusta icones,
   menus e bordas para nao virar cinza-sobre-cinza. */
html[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--texto-suave); }
html[data-theme="dark"] .ql-snow .ql-fill { fill: var(--texto-suave); }
html[data-theme="dark"] .ql-snow .ql-picker { color: var(--texto-suave); }
html[data-theme="dark"] .ql-snow button:hover .ql-stroke,
html[data-theme="dark"] .ql-snow button.ql-active .ql-stroke,
html[data-theme="dark"] .ql-snow .ql-picker-label:hover .ql-stroke {
  stroke: var(--azul);
}
html[data-theme="dark"] .ql-snow button:hover .ql-fill,
html[data-theme="dark"] .ql-snow button.ql-active .ql-fill { fill: var(--azul); }
html[data-theme="dark"] .ql-snow button:hover,
html[data-theme="dark"] .ql-snow button.ql-active { background: var(--fundo-realce); border-radius: var(--raio-xs); }
html[data-theme="dark"] .ql-snow .ql-picker-options {
  background: var(--fundo-card);
  border-color: var(--borda);
  box-shadow: var(--sombra-md);
}
html[data-theme="dark"] .ql-snow .ql-tooltip {
  background: var(--fundo-card);
  border-color: var(--borda);
  box-shadow: var(--sombra-md);
  color: var(--texto);
}
html[data-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
  background: var(--fundo-suave);
  border-color: var(--borda-forte);
  color: var(--texto);
}
html[data-theme="dark"] .ql-snow .ql-editor.ql-blank::before { color: var(--texto-tenue); }

/* ----------------------------------------------------------- 7. Responsivo */

/* Overlay que escurece o conteudo quando a barra lateral abre no celular */
.overlay-sidebar {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(8, 12, 19, .5);
}

@media (max-width: 1100px) {
  .acoes-doc-flutuante { top: 70px; right: 24px; }
  .conteudo { padding: 26px 24px 56px; }
}

@media (max-width: 900px) {
  .app-shell { position: relative; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 285px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sombra-lg);
  }
  .app-shell.sidebar-aberta .sidebar { transform: none; }
  .app-shell.sidebar-aberta .overlay-sidebar { display: block; }

  .btn-menu-lateral { display: inline-flex; }

  .barra-topo { padding: 0 16px; gap: 8px; }
  .conteudo { padding: 22px 18px 56px; }
  .acoes-doc-flutuante { top: 66px; right: 18px; }
  .doc-cabecalho h1 { font-size: 25px; }
  .doc-corpo { padding: 24px 22px 30px; font-size: 15px; }
  /* O botao "Novo ..." desce para baixo do titulo em vez de comprimir tudo */
  .topo { flex-wrap: wrap; }
  .cartao { padding: 20px; }
  .detalhe-usuario { grid-template-columns: 1fr; padding: 18px; }
  #nome-usuario-logado { display: none; }
  .separador-vertical { display: none; }
  .modal-cartao { width: 100%; }

  /* Tabelas em tela estreita: rolagem horizontal dentro do cartao */
  .cartao-tabela { overflow-x: auto; }
  .tabela { min-width: 640px; }
}

@media (max-width: 700px) {
  /* Lista de recentes: em tela estreita a categoria sai e sobra titulo+data */
  .item-recente { grid-template-columns: auto 1fr auto; gap: 10px; }
  .item-recente .categoria-recente { display: none; }
  .item-recente .data-recente { min-width: 0; }
  .saudacao h1 { font-size: 22px; }
  .hero-boas-vindas { padding: 26px 22px 24px; }
  .hero-boas-vindas h1 { font-size: 23px; }
}

@media (max-width: 560px) {
  .trilha .trilha-item:not(:last-child), .trilha .trilha-sep { display: none; }
  .topo h1 { font-size: 21px; }
  .doc-cabecalho h1 { font-size: 22px; }
  .meta-doc { gap: 6px; }
  .acoes-doc-flutuante { position: static; margin: 0 0 14px; }
  .acoes-doc-flutuante button { box-shadow: var(--sombra-xs); }
  /* Com a barra no fluxo, a faixa reservada no topo perde a razao de ser */
  .pagina-doc { padding-top: 0; }
}

/* Respeita quem pediu menos animacao no sistema operacional */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------- 8. Impressao */
/* O PDF (gerado pelo proprio navegador, no botao "Salvar PDF") sai so com o
   documento: sem barra lateral, sem menu do topo e sem os botoes de acao.
   Vale igual para quem imprimir o arquivo depois.
   O que fica e o que a pessoa precisa no papel - titulo, caminho da
   categoria, autoria/data e o conteudo. */
@media print {
  .sidebar,
  .overlay-sidebar,
  .barra-topo,
  .acoes-doc,
  .acoes-doc-flutuante,
  .voltar-busca,
  .modal-overlay {
    display: none !important;
  }

  html, body, .app-shell, .coluna-conteudo, .conteudo {
    height: auto;
    overflow: visible;
    background: #fff;
    color: #000;
  }

  .conteudo { padding: 0; }
  /* O !important vence o padding-top que reservarFaixaDaBarra() escreve no
     proprio elemento: no papel nao existe barra flutuante para desviar. */
  .pagina-doc { max-width: none; padding-top: 0 !important; }

  /* A lista de anexos continua no papel (diz o que acompanha o
     procedimento), mas os botoes de anexar e remover saem. */
  .acoes-anexo,
  .btn-remover-anexo,
  .bloco-versoes { display: none !important; }
  .item-anexo { background: transparent; }

  /* O cartao do conteudo vira papel: sem moldura, sem sombra, sem fundo. */
  .doc-corpo {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }

  .doc-cabecalho h1 { font-size: 20pt; }
  .meta-doc { gap: 8px; font-size: 9pt; color: #333; }
  .meta-doc .badge { border: 1px solid #999; color: #333; background: transparent; }

  /* Nao quebra o titulo do papel dele, nem parte imagem/tabela ao meio. */
  .doc-corpo h1, .doc-corpo h2, .doc-corpo h3, .doc-corpo h4 { break-after: avoid; }
  .doc-corpo img, .doc-corpo blockquote { break-inside: avoid; }

  /* Bloco de codigo no papel: na tela ele rola para o lado (overflow-x), mas
     folha nao rola - o que passasse da largura sairia CORTADO do PDF, sem
     aviso nenhum. No papel a linha quebra em vez de perder o final, e a fonte
     cai um ponto para a linha larga (tabela em texto, comando de RouterOS)
     ainda caber inteira antes de precisar quebrar.
     O break-inside fica em auto de proposito: com "avoid", um bloco mais alto
     que a folha era empurrado inteiro para a pagina seguinte e deixava a
     anterior praticamente em branco. */
  .doc-corpo pre, .doc-corpo .ql-syntax {
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    break-inside: auto;
    font-size: 10px;
  }

  /* Link impresso mostra o endereco ao lado, senao vira texto sublinhado
     sem serventia nenhuma no papel. */
  .doc-corpo a { color: #000; text-decoration: underline; }
  .doc-corpo a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #444; }

  a[href], .doc-corpo { color: #000; }
}


/* Idade em cor calma -------------------------------------------------------
   "há 3 meses" ao lado da data. O vermelho continua reservado ao prazo
   vencido (.meta-vencido), que ja existe. */
.idade-calma { color: var(--texto-tenue); }
.meta-vencido .idade-calma { color: inherit; }

/* Estados vazios que ensinam ---------------------------------------------- */
.estado-vazio-convite {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  line-height: 1.55;
}
.estado-vazio-convite strong { font-size: 15px; }
.estado-vazio-convite span { color: var(--texto-suave); max-width: 52ch; }
.cartao-categoria .btn-primeiro-doc { margin-top: 8px; align-self: start; }
/* A pasta vazia deixa de ser so um aviso: e um lugar onde da pra comecar. */
.cartao-categoria.vazio { cursor: default; }
.cartao-categoria.vazio:hover { border-color: var(--borda); }

/* Paleta de comandos (Ctrl+K) ---------------------------------------------
   Entra por cima de tudo, inclusive de janela aberta: o atalho existe
   justamente para quem esta no meio de outra coisa. */
.paleta-fundo {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 20px 20px;
  background: rgba(8, 12, 19, .5);
  backdrop-filter: blur(3px);
  animation: surgir .12s ease-out;
}
.paleta {
  width: 620px;
  max-width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-card);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
}
.paleta input {
  border: 0;
  border-bottom: 1px solid var(--borda);
  border-radius: 0;
  padding: 15px 18px;
  font-size: 15px;
  background: transparent;
}
.paleta input:focus { outline: none; box-shadow: none; }
.paleta-lista { overflow-y: auto; padding: 6px; }
.paleta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--raio-xs);
  font-size: 13.5px;
  cursor: pointer;
}
.paleta-item .icone { color: var(--texto-tenue); flex-shrink: 0; }
.paleta-item.escolhido { background: var(--azul-tenue); }
.paleta-item.escolhido .icone { color: var(--azul-forte); }
.paleta-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta-detalhe {
  color: var(--texto-tenue);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.paleta-tipo {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--raio-pill);
  background: var(--fundo-realce);
  color: var(--texto-tenue);
  font-size: 10.5px;
  white-space: nowrap;
}
.paleta-vazio { padding: 16px 12px; font-size: 13px; color: var(--texto-suave); text-align: center; }
.paleta-rodape {
  display: flex;
  gap: 16px;
  padding: 9px 14px;
  border-top: 1px solid var(--borda);
  background: var(--fundo-suave);
  font-size: 11.5px;
  color: var(--texto-tenue);
}
.paleta-rodape kbd {
  display: inline-block;
  min-width: 18px;
  margin-right: 4px;
  padding: 1px 5px;
  border: 1px solid var(--borda);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--fundo-card);
  font-family: inherit;
  font-size: 11px;
  text-align: center;
}
@media (max-width: 560px) {
  .paleta-fundo { padding-top: 8vh; }
  .paleta-detalhe { display: none; }
}

/* Tela da pasta (aberta pelo cartao da categoria no inicio) */
.item-recente.item-pasta { grid-template-columns: auto 1fr auto; }
.contagem-secao-pasta {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-tenue);
}