/* estilo.css — identidade visual do Cadernos.
   Paleta: papel quente, tinta grafite, acento bronze. Sem framework. */

:root {
  --tinta: #1c1e26;
  --tinta-suave: #5c6070;
  --fundo: #f2efe8;
  --papel: #fffdf8;
  --linha: #e3dfd4;
  --linha-forte: #cfcaba;
  --acento: #9a7b4f;
  --acento-escuro: #7a5f39;
  --acento-claro: #f1e9da;
  --erro: #b03030;
  --erro-fundo: #fbeeee;
  --sombra-leve: 0 1px 2px rgba(28, 30, 38, 0.05);
  --sombra-cartao: 0 1px 2px rgba(28, 30, 38, 0.05), 0 10px 28px rgba(28, 30, 38, 0.07);
  --raio: 14px;
  --raio-controle: 10px;
  --vidro: rgba(255, 253, 248, 0.6);
  --vidro-denso: rgba(255, 253, 248, 0.92);
  --vidro-borda: rgba(255, 255, 255, 0.55);
  --relevo: #fffdf8;
  --trilho: rgba(154, 123, 79, 0.12);
  /* Brilhos do fundo (dois halos nos cantos de cima). Precisam ser variáveis:
     fixos, sobrevivem à troca de tema e viram um degradê de uma paleta para
     a outra — bege escorrendo para dentro do rosa. */
  --brilho-a: #efe6d6;
  --brilho-b: #efe9da;
  /* O sólido escuro do sistema: botão principal, item de menu ligado, o "+"
     da estante. Era preto fixo em toda aparência — agora ele também veste o
     tema, senão o rosado e o lilás ganhavam um bloco de grafite no meio. */
  --forte-a: #32343d;
  --forte-b: #1e2026;
  /* Os ícones não são texto: podem vestir o tema sem virar enfeite. Ficam
     mais escuros que o acento de propósito — se fossem ele, o anel da
     ferramenta ligada deixaria de se distinguir das desligadas. */
  --icone: #57493a;
}

/* A pasta da estante veste o tema: os três tons saem do acento, misturados
   com um claro e um escuro neutros — o mesmo desenho que o dourado original
   (claro em cima, escuro embaixo, aba mais funda). Sem color-mix, ou sem
   tema escolhido, vale o dourado cravado no SVG. Os temas do servidor só
   definem o acento, e é por isso que a mistura acontece aqui e não lá. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root[data-tema] {
    --pasta-clara: color-mix(in srgb, var(--acento) 52%, #f0e8d8);
    --pasta-escura: color-mix(in srgb, var(--acento) 88%, #262018);
    --pasta-aba: color-mix(in srgb, var(--acento) 66%, #1e1811);
  }
}

/* ---- Temas do sistema (escolhidos no perfil, salvos na conta) ---------------
   O tema precisa tingir também o --papel: no iPhone a janela cobre a tela
   inteira, e se o papel for branco puro em todos eles a troca não aparece. */

:root[data-tema="porcelana"] {
  --fundo: #f3f5f8;
  --papel: #fbfcfe;
  --linha: #e2e6ec;
  --linha-forte: #c8cfda;
  --acento: #54719f;
  --acento-escuro: #405a83;
  --acento-claro: #e7edf6;
  --vidro: rgba(251, 252, 254, 0.62);
  --vidro-denso: rgba(251, 252, 254, 0.93);
  --relevo: #fbfcfe;
  --trilho: rgba(84, 113, 159, 0.11);
  --brilho-a: #e7ecf4;
  --brilho-b: #eaeff6;
  --forte-a: #2f3a4a;
  --forte-b: #1b2534;
  --tinta: #1b2430;
  --icone: #33465f;
}

:root[data-tema="floresta"] {
  --fundo: #eef2ea;
  --papel: #f9fcf7;
  --linha: #dfe6d8;
  --linha-forte: #c2cfba;
  --acento: #4f7d54;
  --acento-escuro: #3c6342;
  --acento-claro: #e4eddf;
  --vidro: rgba(249, 252, 247, 0.62);
  --vidro-denso: rgba(249, 252, 247, 0.93);
  --relevo: #f9fcf7;
  --trilho: rgba(79, 125, 84, 0.11);
  --brilho-a: #e2ebdd;
  --brilho-b: #e7efe2;
  --forte-a: #2a3a2e;
  --forte-b: #16261b;
  --tinta: #18261d;
  --icone: #2f4d38;
}

:root[data-tema="rosado"] {
  --fundo: #fbf1f3;
  --papel: #fff9fb;
  --linha: #f1dee3;
  --linha-forte: #ddbfc8;
  --acento: #b2607c;
  --acento-escuro: #8f4a63;
  --acento-claro: #f8e6ec;
  --vidro: rgba(255, 249, 251, 0.62);
  --vidro-denso: rgba(255, 249, 251, 0.93);
  --relevo: #fff9fb;
  --trilho: rgba(178, 96, 124, 0.11);
  --brilho-a: #f6e2e8;
  --brilho-b: #f8e7ec;
  --forte-a: #4d2a39;
  --forte-b: #331825;
  --tinta: #2e1b24;
  --icone: #7c4058;
}

:root[data-tema="lilas"] {
  --fundo: #f5f2fb;
  --papel: #fcfaff;
  --linha: #e6e0f2;
  --linha-forte: #cabfe0;
  --acento: #7c65b0;
  --acento-escuro: #64508f;
  --acento-claro: #ece6f8;
  --vidro: rgba(252, 250, 255, 0.62);
  --vidro-denso: rgba(252, 250, 255, 0.93);
  --relevo: #fcfaff;
  --trilho: rgba(124, 101, 176, 0.11);
  --brilho-a: #eae2f6;
  --brilho-b: #efe8f9;
  --forte-a: #3b2f5a;
  --forte-b: #241b3c;
  --tinta: #241d33;
  --icone: #4e3f7c;
}

/* Esmeralda: escuro como o noturno, mas verde. Por ser papel escuro, precisa
   do conjunto inteiro (sombras, vidro, erro, relevo) — herdar os do claro
   deixaria sombra branca sobre fundo preto. A chave continua "celeste"
   porque ela está salva na conta; só o nome visível mudou. */
:root[data-tema="celeste"] {
  --tinta: #e7efe6;
  --tinta-suave: #94a996;
  --fundo: #0e1a12;
  --papel: #17281c;
  --linha: #263b2b;
  --linha-forte: #3a5641;
  --acento: #4ec877;
  --acento-escuro: #74dd97;
  --acento-claro: #1d3826;
  --erro: #e58585;
  --erro-fundo: #3a2323;
  --sombra-leve: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.5);
  --vidro: rgba(21, 38, 26, 0.72);
  --vidro-denso: rgba(21, 38, 26, 0.94);
  --vidro-borda: rgba(255, 255, 255, 0.12);
  --relevo: #2b4433;
  --trilho: rgba(78, 200, 119, 0.14);
  --brilho-a: #14251a;
  --brilho-b: #111f16;
  --forte-a: #2f5a3c;
  --forte-b: #1f3f2a;
  --icone: #a6d0b3;
}

:root[data-tema="noturno"] {
  --tinta: #e9e7e0;
  --tinta-suave: #a7a69e;
  --fundo: #15161b;
  --papel: #232530;
  --linha: #343748;
  --linha-forte: #4a4f63;
  --acento: #c8a76c;
  --acento-escuro: #dcbd85;
  --acento-claro: #37311f;
  --erro: #e07a7a;
  --erro-fundo: #3b2222;
  --sombra-leve: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.5);
  --vidro: rgba(30, 32, 42, 0.72);
  --vidro-denso: rgba(30, 32, 42, 0.94);
  --vidro-borda: rgba(255, 255, 255, 0.12);
  --relevo: #3c4152;
  --trilho: rgba(200, 167, 108, 0.13);
  --brilho-a: #1f2130;
  --brilho-b: #1c1e29;
  --forte-a: #4a4f63;
  --forte-b: #343748;
  --icone: #cdc6b2;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--brilho-a) 0%, transparent 60%),
    radial-gradient(900px 420px at -10% 0%, var(--brilho-b) 0%, transparent 55%),
    var(--fundo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

h2 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  margin: 2rem 0 0.9rem;
}

/* ================= Marca ================= */

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.marca svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.marca small {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--tinta-suave);
  border-left: 1px solid var(--linha-forte);
  padding-left: 0.6rem;
  margin-left: 0.1rem;
}

/* ================= Barra superior ================= */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem max(1.25rem, env(safe-area-inset-left));
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}

.topo-direita {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.identidade {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b2d35 0%, #9a7b4f 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-clicavel { cursor: pointer; transition: box-shadow 0.15s ease; }
.avatar-clicavel:hover { box-shadow: 0 0 0 3px rgba(154, 123, 79, 0.35); }

.foto-mini {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.identidade-texto { line-height: 1.2; }

.identidade-nome {
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
}

.identidade-papel {
  font-size: 0.72rem;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ================= Abas ================= */

.abas {
  display: flex;
  gap: 0.25rem;
  margin: 1.4rem 0 0.4rem;
  padding: 0.25rem;
  background: rgba(28, 30, 38, 0.055);
  border-radius: 12px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;          /* aba que não cabe rola, em vez de sumir */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.abas::-webkit-scrollbar { display: none; }
.aba { flex: none; white-space: nowrap; }

.aba {
  border: none;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta-suave);
  padding: 0.5rem 1.15rem;
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.aba.ativa {
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-leve);
}

.painel[hidden] { display: none; }

/* ================= Formulários ================= */

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 0.35rem;
}

input, select {
  width: 100%;
  padding: 0.62rem 0.8rem;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-controle);
  background: var(--papel);
  margin-bottom: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(154, 123, 79, 0.22);
}

input[type="file"] { padding: 0.5rem; background: var(--acento-claro); }

button { font: inherit; cursor: pointer; }

.botao {
  padding: 0.52rem 1.1rem;
  font-size: 0.86rem;
  font-weight: 600;
  border: none;
  border-radius: var(--raio-controle);
  background: linear-gradient(180deg, var(--forte-a) 0%, var(--forte-b) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.45);
  transition: transform 0.1s ease, filter 0.15s ease;
}

.botao:active { transform: scale(0.98); }
.botao:hover { filter: brightness(1.06); }
.botao:disabled { opacity: 0.55; cursor: default; }

/* Dois caminhos lado a lado para o mesmo arquivo: compartilhar e baixar. */
.linha-botoes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.linha-botoes .botao { flex: 1 1 auto; }

.botao-secundario {
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-leve);
}

.botao-secundario:hover {
  filter: none;
  background: var(--acento-claro);
  border-color: var(--acento);
}

.botao-discreto {
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-controle);
  padding: 0.38rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tinta);
  box-shadow: var(--sombra-leve);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.botao-discreto:hover { background: var(--acento-claro); border-color: var(--acento); }
.botao-discreto:disabled { opacity: 0.4; cursor: default; box-shadow: none; }

.mensagem-erro {
  color: var(--erro);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
  min-height: 0;
}

.mensagem-erro:not(:empty) {
  background: var(--erro-fundo);
  border: 1px solid rgba(176, 48, 48, 0.25);
  border-radius: var(--raio-controle);
  padding: 0.6rem 0.9rem;
}

.formulario-linha {
  display: grid;
  gap: 0 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  align-items: end;
}

/* ================= Login ================= */

.tela-login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 1.5rem;
}

/* Assinatura da entrada: existe, não disputa atenção com o formulário. */
.creditos {
  margin: 0;
  font-size: 0.74rem;
  color: var(--tinta-suave);
  opacity: 0.8;
}

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 23rem;
}

.cartao .marca {
  justify-content: center;
  margin-bottom: 0.4rem;
  font-size: 1.25rem;
}

.cartao .lema {
  text-align: center;
  color: var(--tinta-suave);
  font-size: 0.88rem;
  margin: 0 0 1.6rem;
}

/* ================= Conteúdo ================= */

.conteudo {
  padding: 0 max(1.25rem, env(safe-area-inset-left)) 3rem;
  max-width: 64rem;
  margin: 0 auto;
}

/* Arquivo arrastado do computador: o véu cobre a estante inteira enquanto o
   dedo (ou o mouse) segura o arquivo, e some no instante em que ele é solto. */
.veu-soltar {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--fundo) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;   /* o drop é da vista, não deste véu */
}

.veu-soltar[hidden] { display: none; }

.veu-soltar-cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 2.5rem;
  border-radius: 20px;
  border: 2px dashed var(--acento);
  background: var(--vidro-denso);
  box-shadow: var(--sombra-cartao);
  color: var(--tinta);
  text-align: center;
}

.veu-soltar-cartao svg { width: 34px; height: 34px; color: var(--acento); }
.veu-soltar-cartao strong { font-size: 1.05rem; }
.veu-soltar-cartao span { font-size: 0.82rem; color: var(--tinta-suave); }

/* ================= Tabelas ================= */

.tabela-envolucro {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-leve);
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-suave);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--linha);
  background: rgba(28, 30, 38, 0.02);
}

td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--linha);
  font-size: 0.92rem;
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--acento-claro); }

.inativo { opacity: 0.45; }

.selo {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(28, 30, 38, 0.07);
  color: var(--tinta-suave);
}

.selo-admin {
  background: var(--acento-claro);
  color: var(--acento-escuro);
}

/* ================= Pastas e modelos ================= */

.trilha {
  font-size: 0.95rem;
  margin: 0.9rem 0 1rem;
  color: var(--tinta-suave);
}

.trilha-elo {
  background: none;
  border: none;
  padding: 0.25rem 0.1rem;
  color: var(--acento);
  font: inherit;
  font-weight: 600;
}

.trilha-elo:hover { text-decoration: underline; }
.trilha strong { color: var(--tinta); font-weight: 650; }

.pasta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-leve);
  padding: 0.45rem 0.9rem;
  margin-bottom: 0.55rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pasta-item:hover { border-color: var(--acento); }

.pasta-abrir {
  background: none;
  border: none;
  padding: 0.45rem 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  flex: 1;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.pasta-abrir svg { width: 20px; height: 20px; flex: none; color: var(--acento); }

.modelo {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}

.modelo-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.modelo-cabecalho h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.modelo-descricao {
  margin: 0.3rem 0 0.6rem;
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

/* Campo de data: o Safari do iOS centraliza o valor e desalinha do resto */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

/* A dica curta só existe no celular — declarada antes do @media que a mostra */
.dica-nav-curta { display: none; }

/* Administração no celular: colunas do tamanho da tela, dica curta */
@media (max-width: 640px) {
  .coluna { width: min(78vw, 250px); }
  .coluna-detalhe { width: min(88vw, 320px); }
  .navegador { min-height: 18rem; max-height: 72vh; }
  .dica-nav-longa { display: none; }        /* a versão completa some */
  .dica-nav-curta { display: block; }
  .grade-folhas-admin { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .cabecalho-secao { flex-wrap: wrap; }
}


/* ---- Modelos do admin: folhas como cartões, comandos escondidos --------- */

.detalhe-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
}

.detalhe-topo h3 {
  margin: 0;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.botao-mais-modelo { width: 32px; height: 32px; flex: none; }
.botao-mais-modelo svg { width: 18px; height: 18px; }

.detalhe-meta {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-folhas-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 0.7rem;
}

.cartao-folha {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none; /* o arraste é nosso */
}

.cartao-folha-img {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
  background: var(--papel);
  box-shadow: var(--sombra-leve);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cartao-folha:hover .cartao-folha-img {
  transform: translateY(-2px);
  box-shadow: var(--sombra-cartao);
}

.cartao-folha-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.cartao-folha-num {
  position: absolute;
  left: 6px;
  top: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(28, 30, 38, 0.62);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 20px;
  text-align: center;
}

.cartao-folha-mais {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--vidro-denso);   /* tema escuro: branco fixo sumia o ícone */
  color: var(--tinta);
  box-shadow: 0 1px 3px rgba(28, 30, 38, 0.25);
  padding: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.cartao-folha-mais svg { width: 16px; height: 16px; }
.cartao-folha:hover .cartao-folha-mais, .cartao-folha-mais:focus { opacity: 1; }
@media (hover: none) { .cartao-folha-mais { opacity: 1; } }

.cartao-folha-nome {
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--tinta-suave);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Arrastando: o original esmaece, o fantasma segue o dedo */
.cartao-folha.arrastando { opacity: 0.35; }

.cartao-folha.fantasma {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  opacity: 0.92;
  transform: scale(1.04) rotate(-1.5deg);
  filter: drop-shadow(0 12px 24px rgba(28, 30, 38, 0.35));
}

.alvo-solta {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 10px;
  background: var(--acento-claro);
}

/* Envio como cartão no fim da grade */
.zona-envio-cartao {
  aspect-ratio: 3 / 4;
  margin-top: 0;
  padding: 0.6rem;
  justify-content: center;
  border-radius: 10px;
}

.zona-envio-cartao b { font-size: 0.82rem; }
.zona-envio-cartao span { font-size: 0.68rem; line-height: 1.2; }


.folha-item img {
  width: 46px;
  height: 62px;
  object-fit: cover;
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--sombra-leve);
}

.folha-nome { flex: 1; font-size: 0.92rem; }

.formulario-folha {
  border-top: 1px solid var(--linha);
  padding-top: 0.85rem;
  margin-top: 0.35rem;
}

.seletor-mover {
  width: auto;
  margin-bottom: 0;
  padding: 0.42rem 0.55rem;
  font-size: 0.86rem;
  color: var(--tinta-suave);
}

.vazio {
  color: var(--tinta-suave);
  font-size: 0.92rem;
  background: rgba(28, 30, 38, 0.03);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  padding: 1.4rem;
  text-align: center;
}

/* ================= Navegador de colunas (admin) ================= */

.dica-nav {
  font-size: 0.72rem;
  color: var(--tinta-suave);
  margin: 0.2rem 0 0.8rem;
}

.navegador {
  display: flex;
  align-items: stretch;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-leve);
  overflow-x: auto;
  min-height: 24rem;
  max-height: 65vh;
}

.coluna {
  width: 250px;
  flex: none;
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
}

.coluna-itens {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem;
}

.coluna-rodape {
  border-top: 1px solid var(--linha);
  padding: 0.4rem;
  display: flex;
  gap: 0.35rem;
}

.coluna-rodape .botao-discreto {
  flex: 1;
  font-size: 0.78rem;
  padding: 0.35rem 0.3rem;
  box-shadow: none;
}

.item-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--tinta);  /* sem isto o Safari do iOS pinta de azul */
  cursor: pointer;
}

.item-nav:hover { background: rgba(28, 30, 38, 0.05); }

.item-nav.selecionado {
  background: var(--acento-claro);
  color: var(--acento-escuro);
  font-weight: 600;
}

.item-nav > svg { width: 18px; height: 18px; flex: none; color: var(--acento); }
.item-nav .chevron { margin-left: auto; width: 14px; height: 14px; color: var(--tinta-suave); }

.item-nav img {
  width: 26px;
  height: 34px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--linha);
  flex: none;
  background: #fff;
}

.item-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
  letter-spacing: 0.01em;
  color: var(--tinta);
}

.item-contagem { color: var(--tinta-suave); font-size: 0.74rem; }

.mini-acoes { margin-left: auto; display: flex; gap: 0.1rem; align-items: center; }

.mini-acao {
  border: none;
  background: none;
  padding: 0.2rem;
  border-radius: 6px;
  color: var(--tinta-suave);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}

.mini-acao:hover { background: rgba(28, 30, 38, 0.08); color: var(--tinta); }
.mini-acao:disabled { opacity: 0.35; cursor: default; }
.mini-acao svg { width: 15px; height: 15px; display: block; }

.alvo-arrasto {
  outline: 2px dashed var(--acento);
  outline-offset: -2px;
  background: var(--acento-claro);
}

.coluna-detalhe {
  width: 330px;
  padding: 0.8rem 0.95rem;
  overflow-y: auto;
  display: block;
}

.coluna-detalhe h3 { margin: 0.1rem 0 0.15rem; font-size: 1rem; font-weight: 650; }

.detalhe-acoes {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.7rem;
}

.coluna-detalhe .formulario-folha {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.coluna-detalhe .formulario-folha input,
.coluna-detalhe .formulario-folha select { margin-bottom: 0; }

.vazio-coluna {
  font-size: 0.82rem;
  color: var(--tinta-suave);
  text-align: center;
  padding: 1.4rem 0.5rem;
}

/* ================= Cadernos e páginas ================= */

.cabecalho-vista {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.cabecalho-vista h2 { margin: 0; flex: 1; }

.botao-icone[hidden] { display: none; }

.botao-icone {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--papel);
  color: var(--icone);
  box-shadow: var(--sombra-leve);
  /* O botão encolheu, o ALVO não: a borda invisível devolve os 40px que o
     dedo precisa no iPad, sem devolver o peso visual. */
  outline: 4px solid transparent;
  outline-offset: 0;
}

.botao-icone svg { width: 17px; height: 17px; }

.grade-cadernos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.cartao-caderno {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, border-color 0.15s ease;
}

.cartao-caderno:hover { border-color: var(--acento); transform: translateY(-2px); }

.cartao-caderno-corpo {
  border: none;
  background: none;
  text-align: left;
  padding: 1.1rem 1.15rem 0.8rem;
  flex: 1;
}

.cartao-caderno-corpo h3 { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 650; }
.cartao-caderno-corpo p { margin: 0; font-size: 0.84rem; color: var(--tinta-suave); }

.cartao-caderno-acoes {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem 0.9rem;
  border-top: 1px solid var(--linha);
}

/* ---- Janelas modais (seletor de folha e nome) ---- */

.veu {
  position: fixed;
  inset: 0;
  /* dvh = altura realmente visível: no Safari do iPhone as barras nativas
     comem parte da tela, e com vh a janela estourava para fora. */
  height: 100dvh;
  background: rgba(28, 30, 38, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  overflow-y: auto;              /* janela alta: o véu inteiro rola */
  -webkit-overflow-scrolling: touch;
  z-index: 50;
}

.veu[hidden] { display: none; }

.janela {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 1.1rem 1.25rem;
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  width: 100%;
  max-width: 42rem;
  max-height: min(80dvh, 40rem);
  display: flex;
  flex-direction: column;
}

/* O topo é sticky (o ✕ nunca sai de vista), então precisa se distinguir do
   que passa por baixo. Da cor do corpo e sem borda, o conteúdo sumia atrás
   dele sem aviso — a rolagem parecia defeito. Agora é vidro: fosca o que
   passa, e ganha fio e sombra só depois que a rolagem começa. */
.janela-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 -1.25rem 0.4rem;         /* alcança as bordas da janela */
  padding: 0.9rem 1.25rem 0.6rem;
  background: var(--vidro-denso);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  border-radius: var(--raio) var(--raio) 0 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Sem isto o sticky gruda ABAIXO do padding da janela e sobra um vão por onde
   o conteúdo desfila por cima do cabeçalho. O topo passa a dar o próprio
   respiro. (Safari sem :has cai no comportamento antigo, que já era este.) */
.janela:has(> .janela-topo) { padding-top: 0; }

.janela-topo.rolou {
  border-bottom-color: var(--linha);
  box-shadow: 0 10px 16px -14px rgba(28, 30, 38, 0.65);
}

.janela-topo h3 { margin: 0; font-size: 0.94rem; font-weight: 650; }

.janela-corpo { overflow-y: auto; padding: 0.3rem 0.1rem; }

.janela-nome { max-width: 24rem; display: block; }

.janela-nome label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 0.6rem;
}

.grade-folhas-escolha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
}

/* ---- Grade estilo Google Drive ---- */

.grade-drive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

/* Sem cartão em volta: o ícone É o item, como no Drive. */
.cartao-drive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  padding: 0.5rem 0.35rem;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.cartao-drive:hover { transform: translateY(-3px); }
.cartao-drive:active { transform: scale(0.97); }
.cartao-drive.alvo-arrasto { background: var(--acento-claro); }

.icone-pasta-grande {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icone-pasta-grande svg {
  width: 88%;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(28, 30, 38, 0.28))
          drop-shadow(0 2px 4px rgba(28, 30, 38, 0.15));
}

.capa-livro {
  position: relative;
  display: block;
  width: 88%;
  aspect-ratio: 3 / 4;
  margin: auto 0;
  border-radius: 5px 12px 12px 5px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 24px rgba(28, 30, 38, 0.22), 0 3px 6px rgba(28, 30, 38, 0.14);
}

.capa-livro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vinco da encadernação e fio de luz na borda das páginas. */
.capa-livro::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(28, 30, 38, 0.12), rgba(28, 30, 38, 0.03) 4%, transparent 8%),
    linear-gradient(to left, rgba(255, 255, 255, 0.55), transparent 3%);
}

.capa-generica {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(154, 123, 79, 0.16) 0 18%, transparent 18%),
    repeating-linear-gradient(#fff 0 21px, var(--linha) 21px 22px);
}

.cartao-drive-nome {
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--tinta);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* ---- Menu de contexto (toque longo) ---- */

.menu-contexto {
  position: fixed;
  z-index: 60;
  min-width: 12rem;
  /* Vidro do TEMA, não branco cravado: no Esmeralda e no Noturno (escuros) a
     tinta é clara, e sobre branco fixo o menu abria "sem texto". */
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: var(--sombra-cartao);
  padding: 0.35rem;
}

.menu-contexto-titulo {
  margin: 0;
  padding: 0.4rem 0.7rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--linha);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-contexto button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.86rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  color: var(--tinta);
}

.menu-contexto button:hover { background: var(--acento-claro); }

/* Balão de opções de um campo de formulário: nasce dentro do palco, junto ao
   campo — por isso absoluto, não fixo como o menu da estante. */
.menu-opcoes {
  position: absolute;
  z-index: 35;
  min-width: 8rem;
  max-width: 75%;
  max-height: 45%;
  overflow-y: auto;
}
.menu-opcoes button.ativa {
  background: var(--acento-claro);
  font-weight: 600;
}

/* Cartão do campo (segurar): a mesma voz dos demais cartões. */
.menu-campo {
  min-width: 12.5rem;
  padding: 0.45rem;
}
.menu-campo .menu-contexto-titulo {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 0.35rem 0.7rem 0.45rem;
}
.menu-campo button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.menu-campo button svg { flex: none; opacity: 0.75; }

/* ── Painel do campo: o cartão persistente do modelo ─────────────────── */
/* Não herda .menu-contexto de propósito: a regra `.menu-contexto button`
   (bloco de largura cheia) atropelaria todos os controles pc-*. */
.painel-campo {
  position: fixed;
  z-index: 70;
  width: 330px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem 0;
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--linha);
  border-radius: 20px;
  box-shadow: var(--sombra-cartao);
}
.painel-campo button { font: inherit; cursor: pointer; }

.pc-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
  padding-bottom: 0.15rem;
}
.pc-punho { color: var(--linha-forte); font-size: 0.9rem; line-height: 1; }
.pc-nomes { flex: 1; min-width: 0; }
.pc-titulo {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-tipo {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 2px;
}
.pc-fechar {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--trilho);
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1;
  flex: none;
}

.pc-pilulas { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.55rem 0 0.8rem; }
.pc-pilula {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 0.32rem 0.68rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--trilho);
  color: var(--tinta-suave);
  transition: background 0.15s ease;
}
.pc-pilula svg { flex: none; }
.pc-pilula.ligada { background: var(--acento-claro); color: var(--acento-escuro); }
.pc-pilula.vinho { background: var(--erro-fundo); color: var(--erro); }

.pc-corpo { overflow-y: auto; margin: 0 -1rem; padding: 0 1rem; }
.pc-secao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--linha);
  background: none;
  padding: 0.6rem 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tinta);
  text-align: left;
}
.pc-seta {
  width: 16px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 0.95rem;
  font-weight: 700;
  transition: transform 0.18s ease;
}
.pc-secao.aberta .pc-seta { transform: rotate(90deg); }
.pc-secao-titulo { flex: 1; }
.pc-resumo {
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tinta-suave);
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-mini-chips { display: flex; gap: 4px; }
.pc-chip-cor {
  width: 17px;
  height: 17px;
  border-radius: 6px;
  background: var(--cor, transparent);
  box-shadow: inset 0 0 0 1.2px rgba(0, 0, 0, 0.14);
  flex: none;
}
.pc-secao-corpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 1rem;
}
.pc-secao-corpo[hidden] { display: none; }

.pc-linha { display: flex; align-items: center; gap: 12px; }
.pc-rotulo {
  width: 96px;
  flex: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tinta-suave);
}
.pc-linha:has(.pc-chave) .pc-rotulo { flex: 1; width: auto; }
.pc-entrada {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 9px;
  background: var(--trilho);
  color: var(--tinta);
  padding: 0.44rem 0.62rem;
  font-size: 0.8rem;
  font-weight: 600;
  outline: none;
}
.pc-entrada:focus { box-shadow: inset 0 0 0 1.5px var(--acento); }
.pc-entrada.curta { flex: none; width: 72px; text-align: center; font-variant-numeric: tabular-nums; }

.pc-passo {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--trilho);
  border-radius: 10px;
  padding: 3px;
  flex: none;
}
.pc-passo button {
  width: 26px;
  height: 23px;
  border: 0;
  border-radius: 7px;
  background: var(--relevo);
  color: var(--tinta-suave);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--sombra-leve);
}
.pc-passo span {
  min-width: 38px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.pc-chave {
  width: 37px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: var(--linha-forte);
  padding: 2.5px;
  display: flex;
  justify-content: flex-start;
  transition: background 0.2s ease;
  flex: none;
}
.pc-chave span {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--relevo);
  box-shadow: 0 1px 3px rgba(28, 30, 38, 0.3);
}
.pc-chave.ligada { background: var(--acento); justify-content: flex-end; }

.pc-segmentos {
  display: flex;
  flex: 1;
  gap: 4px;
  background: var(--trilho);
  border-radius: 11px;
  padding: 3px;
}
.pc-segmentos button {
  flex: 1;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 0.38rem 0;
  transition: background 0.15s ease;
}
.pc-segmentos button.ativa {
  background: var(--relevo);
  color: var(--tinta);
  box-shadow: var(--sombra-leve);
}

.pc-itens { display: flex; flex-direction: column; gap: 8px; }
.pc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--trilho);
  border-radius: 12px;
  padding: 0.42rem 0.62rem;
}
.pc-item .pc-punho { font-size: 0.78rem; cursor: grab; }
.pc-item-nome {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-padrao {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--linha-forte);
  flex: none;
  padding: 0;
}
.pc-padrao.ligada {
  background: var(--acento);
  box-shadow: inset 0 0 0 3px var(--relevo), 0 0 0 1.5px var(--acento);
}
.pc-tira {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--tinta-suave);
  font-size: 0.88rem;
  line-height: 1;
  flex: none;
}
.pc-tira:hover { background: var(--erro-fundo); color: var(--erro); }
.pc-adicionar {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--forte-a), var(--forte-b));
  color: var(--papel);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  flex: none;
}
.pc-nota { font-size: 0.72rem; color: var(--tinta-suave); line-height: 1.5; }
.pc-previa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: var(--acento-claro);
}
.pc-previa span { font-size: 0.72rem; font-weight: 600; color: var(--tinta-suave); }
.pc-previa strong {
  font: 700 0.82rem ui-monospace, Menlo, monospace;
  color: var(--tinta);
}

.pc-slots { display: flex; gap: 8px; }
.pc-slot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.42rem 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--linha);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tinta-suave);
}
.pc-slot.ativa { background: var(--acento-claro); box-shadow: inset 0 0 0 1.5px var(--acento); }
.pc-swatches {
  padding: 0.6rem;
  border-radius: 12px;
  background: var(--acento-claro);
}
.pc-grade {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
}
.pc-cor {
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  background: var(--cor, transparent);
  box-shadow: inset 0 0 0 1.2px rgba(0, 0, 0, 0.12);
  padding: 0;
}
.pc-cor.ligada { box-shadow: inset 0 0 0 2px var(--acento-claro), 0 0 0 2px var(--acento); }
.pc-slot-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.65rem;
}
.pc-slot-info span {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tinta-suave);
}
.pc-slot-info code {
  padding: 0.3rem 0.6rem;
  border-radius: 9px;
  background: var(--trilho);
  font: 700 0.72rem ui-monospace, Menlo, monospace;
  color: var(--tinta);
}
.pc-limpo {
  border: 0;
  border-radius: 9px;
  background: var(--trilho);
  color: var(--tinta-suave);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
}

.pc-trilho {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--linha), var(--acento));
  touch-action: none;
  cursor: pointer;
}
.pc-trilho-bola {
  position: absolute;
  top: -7px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--relevo);
  box-shadow: 0 2px 5px rgba(28, 30, 38, 0.22), inset 0 0 0 1.5px var(--acento);
  pointer-events: none;
}
.pc-pt {
  width: 48px;
  text-align: center;
  padding: 0.32rem 0;
  border-radius: 9px;
  background: var(--trilho);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.pc-estado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0.62rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--linha);
  text-align: left;
}
.pc-estado.ativa { background: var(--acento-claro); box-shadow: inset 0 0 0 1.5px var(--acento); }
.pc-ponto {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--linha-forte);
  flex: none;
}
.pc-estado.ativa .pc-ponto {
  background: var(--acento);
  box-shadow: inset 0 0 0 3px var(--acento-claro), 0 0 0 1.5px var(--acento);
}
.pc-estado-texto { display: flex; flex-direction: column; }
.pc-estado-texto strong { font-size: 0.78rem; font-weight: 700; color: var(--tinta); }
.pc-estado-texto small { font-size: 0.7rem; color: var(--tinta-suave); margin-top: 1px; }

.pc-pe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -1rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--linha);
}
.pc-duplicar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 11px;
  background: var(--trilho);
  color: var(--tinta);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.6rem 0;
}
.pc-duplicar:hover { background: var(--acento-claro); }
.pc-apagar {
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 11px;
  background: var(--erro-fundo);
  color: var(--erro);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Drop de fontes do cartão de texto: o botão mostra a fonte em uso escrita
   nela mesma, e a lista abre com cada família desenhada do próprio punho. */
.drop-fonte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--vidro);
  color: var(--tinta);
  font-size: 0.88rem;
  cursor: pointer;
}
.drop-fonte-seta {
  margin-left: 0.5rem;
  opacity: 0.55;
  transition: transform 0.18s ease;
}
.drop-fonte[aria-expanded="true"] .drop-fonte-seta { transform: rotate(180deg); }
.drop-fonte[hidden] { display: none; }

/* Alça de redimensionar do editor de texto aberto. */
.pega-editor {
  position: absolute;
  z-index: 31;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  background: var(--vidro-denso);
  box-shadow: var(--sombra-cartao);
  cursor: nwse-resize;
  touch-action: none;
}
.pega-editor::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-right: 2px solid var(--acento);
  border-bottom: 2px solid var(--acento);
  border-radius: 2px;
}
.pega-editor[hidden] { display: none; }
.lista-fontes {
  margin-top: 0.35rem;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sombra-cartao);
  padding: 0.3rem;
  max-height: 15rem;
  overflow-y: auto;
}
.lista-fontes button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.38rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tinta);
  font-size: 0.92rem;
  cursor: pointer;
}
.lista-fontes button:hover { background: var(--acento-claro); }
.lista-fontes button.ativa {
  background: var(--acento-claro);
  box-shadow: inset 0 0 0 1px var(--acento);
}

/* A lista de unidades fala números, não amostras de fonte: corpo menor. */
#lista-unidades button {
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
}

/* Unidade e casas decimais lado a lado; as casas andam por passo. */
.linha-unidade {
  display: flex;
  align-items: center;
  gap: 6px;
}
.linha-unidade[hidden] { display: none; }
.linha-unidade .drop-fonte { flex: 1; min-width: 0; }
.passo-casas {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--trilho);
  border-radius: 10px;
  padding: 2px;
  flex: none;
}
.passo-casas button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tinta);
  font-size: 1rem;
  cursor: pointer;
}
.passo-casas button:active { background: var(--acento-claro); }
.passo-casas span {
  min-width: 2.6em;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
}
/* Prateleiras do drop: o título da categoria, discreto, entre os blocos. */
.lista-fontes-grupo {
  padding: 0.5rem 0.75rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.lista-fontes-grupo:not(:first-child) {
  margin-top: 0.3rem;
  border-top: 1px solid var(--linha);
}
.menu-contexto .menu-perigo { color: var(--erro); }

.botao-icone-acento {
  background: linear-gradient(180deg, var(--forte-a) 0%, var(--forte-b) 100%);
  border: none;
  color: #fff;
}

.painel-criacao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 1.25rem;
  margin: 1rem 0;
}

.rotulo-secao {
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0.5rem 0 0.35rem;
}

.acoes-criacao { display: flex; gap: 0.6rem; margin-top: 1rem; }

.grade-modelos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.opcao-modelo {
  border: 2px solid var(--linha);
  border-radius: 12px;
  background: var(--papel);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.opcao-modelo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: #fff;
}

.opcao-modelo span { font-size: 0.86rem; font-weight: 600; }
.opcao-modelo small { font-size: 0.72rem; color: var(--tinta-suave); }

.opcao-modelo.escolhido {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(154, 123, 79, 0.25);
}

.grade-paginas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.cartao-pagina {
  position: relative;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--papel);
  box-shadow: var(--sombra-leve);
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.15s ease, transform 0.12s ease;
}

.cartao-pagina:hover { border-color: var(--acento); transform: translateY(-2px); }

.cartao-pagina img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: #fff;
}

.cartao-pagina-rotulo { font-size: 0.82rem; font-weight: 550; text-align: left; }

.marca-escrita {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 2.5px #fff;
}

/* ================= Escrita ================= */

body.escrevendo { overflow: hidden; }
body.escrevendo .topo { display: none; }

/* Sem seleção de texto na escrita: toque longo não pode pintar a tela de azul. */
#vista-escrita, #vista-escrita * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#vista-escrita { position: fixed; inset: 0; background: var(--fundo); }

.palco {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overflow: hidden;
}

.prancheta {
  position: relative;
  transform-origin: center center;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(28, 30, 38, 0.12), 0 14px 42px rgba(28, 30, 38, 0.14);
}

.prancheta canvas { position: absolute; inset: 0; touch-action: none; }
.prancheta { touch-action: none; }

.indicador-pagina {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tinta-suave);
  padding: 0 2px;
  font-size: 0.78rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ferramentas {
  position: fixed;
  top: max(0.7rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  /* Em PIXELS INTEIROS, não em rem. Com gap de 0,15rem (2,4 px) e padding de
     0,55rem (8,8 px), cada botão caía numa posição fracionária — medido:
     71,19 · 111,59 · 151,98 — e o Safari reamostra tudo o que fica a meio
     pixel. Era daí a falta de nitidez das bolinhas de cor. */
  gap: 2px;
  padding: 6px 9px;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  box-shadow: var(--sombra-cartao);
  max-width: calc(100vw - 1rem);
  overflow-x: auto;
}

.ferramentas.escondida { display: none; }

/* Filete de miniaturas no rodapé (a numeração da barra abre) */
.filete-paginas {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(0.7rem, env(safe-area-inset-bottom));
  max-width: calc(100vw - 1.5rem);
  padding: 0.5rem 0.6rem;
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--vidro-borda);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(28, 30, 38, 0.22);
  z-index: 25;
}

.filete-paginas[hidden] { display: none; }

.filete-trilho {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.filete-trilho::-webkit-scrollbar { display: none; }

.filete-item {
  position: relative;
  flex: none;
  width: 54px;
  height: 74px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--papel);
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
}

.filete-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.filete-item span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px 0 2px;
  font-size: 0.62rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: rgba(28, 30, 38, 0.55);
}

.filete-item.atual {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento);
}

.filete-mais {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: var(--acento);
  background: transparent;
}

.filete-mais svg { width: 22px; height: 22px; }

/* Arrastar página no filete: mesma linguagem do gerenciador de modelos */
/* Sem isto o iOS trata o segurar como toque longo do sistema: vibra, mostra o
   menu nativo e CANCELA o nosso ponteiro — o arraste morria ali, e era por
   isso que mover a miniatura depois do menu aberto não reordenava. */
.filete-item {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.filete-item.arrastando { opacity: 0.3; }

.filete-item.fantasma {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  opacity: 0.95;
  transform: scale(1.12) rotate(-2deg);
  filter: drop-shadow(0 10px 22px rgba(28, 30, 38, 0.4));
}

.filete-item.alvo-solta {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  background: var(--acento-claro);
}

/* Menu ⋯ da barra */
.menu-barra {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.4rem;
  width: 16.5rem;
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--vidro-borda);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(28, 30, 38, 0.22);
  z-index: 30;
}

.menu-barra[hidden] { display: none; }

.menu-barra button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--tinta);
  font-size: 0.86rem;
  text-align: left;
}

/* No menu, só o ícone veste o tema — o rótulo continua sendo texto, e texto
   colorido em lista vira enfeite. Na linha ligada o ícone volta a herdar o
   branco, senão ficaria escuro sobre o sólido escuro. */
.menu-barra button svg { width: 20px; height: 20px; flex: none; color: var(--icone); }
.menu-barra button.ativa svg { color: inherit; }

.menu-barra button:disabled { opacity: 0.4; }

/* Menu de uma miniatura: mais estreito, sem ícones */
#menu-pagina { width: 13rem; z-index: 32; }
#menu-pagina button { font-size: 0.85rem; }

.menu-barra button.ativa {
  background: var(--forte-a);
  color: #fff;
}

/* Controle de página compacto: setas estreitas, numeração enxuta */
#pagina-anterior, #pagina-proxima { width: 24px; }
#pagina-anterior svg, #pagina-proxima svg { width: 16px; height: 16px; }

/* Guia de uso: cartões ilustrados */
.janela-guia {
  max-width: 27rem;
  width: min(27rem, 94vw);
  /* dvh, não vh: no iPhone o vh conta a área sob as barras do Safari, a
     janela passava da tela, o véu rolava junto e levava o cabeçalho — o ✕
     ficava cortado no alto. Cabendo na tela, o topo grudado funciona. */
  max-height: min(86vh, calc(100dvh - 2.5rem));
  overflow-y: auto;
}

.guia-corpo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0.6rem 0 1.1rem;
}

.guia-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.guia-icone {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--acento-claro, rgba(154, 123, 79, 0.14));
  color: var(--acento);
}

.guia-icone svg { width: 22px; height: 22px; }

.guia-icone-arco {
  background: conic-gradient(#e05252, #e6a23c, #f2cf5b, #4fae6d, #2b9bd7,
    #6b4fc8, #d9346b, #e05252);
}

.guia-item h4 { margin: 0 0 0.2rem; font-size: 0.95rem; }

.guia-item p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.janela-guia .botao { width: 100%; }

/* Lista de usuários do admin: cartões, não tabela */
.cabecalho-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.cabecalho-secao h2 { margin: 0; }

.lista-usuarios {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sombra-leve);
}

.usuario-linha {
  display: grid;
  grid-template-columns: 44px minmax(10rem, 1fr) auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--linha);
}

.usuario-linha:last-child { border-bottom: none; }
.usuario-linha.inativo { opacity: 0.55; }

.usuario-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acento-claro);
  color: var(--acento-escuro);
  font-weight: 650;
  font-size: 0.9rem;
}

.usuario-avatar img { width: 100%; height: 100%; object-fit: cover; }

.usuario-ident { min-width: 0; }
.usuario-ident b { display: block; font-size: 0.95rem; }
.usuario-ident span {
  display: block;
  font-size: 0.82rem;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuario-acesso {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.usuario-acesso small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.usuario-acesso span { font-size: 0.85rem; }

.usuario-acoes { display: flex; gap: 0.4rem; white-space: nowrap; }

@media (max-width: 680px) {
  .usuario-linha { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .usuario-acesso, .usuario-linha .selo { display: none; }
}

/* Aba Termos do admin: consulta de aceites e versão vigente */
.campo-busca-aceites {
  width: min(24rem, 100%);
  margin-bottom: 0.6rem;
}

.termo-vigente-corpo {
  max-height: 45vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  max-width: 44rem;
}

.selo-aceito {
  background: rgba(44, 122, 75, 0.14);
  color: #1f5d3a;
}

.selo-pendente {
  background: rgba(217, 123, 41, 0.16);
  color: #8a5314;
}

/* Zona de envio de folhas do admin: um alvo só, sem formulário */
.zona-envio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.8rem;
  padding: 1.1rem 1rem;
  border: 1.6px dashed var(--linha-forte);
  border-radius: 14px;
  background: transparent;
  color: var(--tinta);
  box-shadow: none;
  cursor: pointer;
  font: inherit;
}

.zona-envio:hover, .zona-envio.alvo-arrasto {
  border-color: var(--acento);
  background: var(--acento-claro);
}

.zona-envio b { font-size: 0.95rem; }
.zona-envio span { font-size: 0.8rem; color: var(--tinta-suave); }
.zona-envio[disabled] { opacity: 0.75; cursor: progress; }

/* Lista de pastas do diálogo Mover do admin */
.destino-pasta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--tinta);
  font: inherit;
  text-align: left;
}

.destino-pasta:hover { background: var(--acento-claro); }
.destino-pasta:disabled { opacity: 0.45; }

.destino-titulo {
  margin: 0.5rem 0 0.15rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.destino-pasta svg { width: 18px; height: 18px; flex: none; color: var(--acento); }

/* Cartões da aba Diagnóstico do administrador */
.cartao-diagnostico {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  max-width: 34rem;
  margin-top: 0.8rem;
}

.cartao-diagnostico h3 { margin: 0 0 0.4rem; }
.cartao-diagnostico p { margin: 0 0 0.8rem; color: var(--tinta-suave); font-size: 0.92rem; }
.cartao-diagnostico .botao { display: inline-block; text-decoration: none; }

/* ---- Meus dados, edição de usuário e termos de uso ------------------------- */

.janela-perfil {
  max-width: 26rem;
  width: min(26rem, 92vw);
  max-height: min(86vh, calc(100dvh - 2.5rem));
  overflow-y: auto;
  padding-bottom: 1.1rem;        /* o último item não encosta na borda */
  scroll-padding-bottom: 1.1rem;
}

.formulario-coluna { display: flex; flex-direction: column; gap: 0.5rem; }

.linha-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Dentro das janelas de perfil/usuário os campos são enxutos: sem a margem
   global de formulário e com respiro menor. */
.janela-perfil input:not([type="checkbox"]),
.janela-perfil select {
  margin-bottom: 0;
  padding: 0.45rem 0.65rem;
  font-size: 0.95rem;
}

/* Botão de subir nível nas trilhas de navegação */
.trilha-subir {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 0.45rem;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: none;
  padding: 0;
}

.trilha-subir svg { width: 16px; height: 16px; }

/* Seletor de temas do sistema */
.temas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.temas button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--tinta);
  font-size: 0.86rem;
}

.temas button.ativa {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-claro);
}

.tema-visto {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(28, 30, 38, 0.18);
}

/* Avisos e erros vazios não ocupam linha */
.janela-perfil p:empty { display: none; }

.formulario-coluna label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

.formulario-coluna input:not([type="checkbox"]),
.formulario-coluna select {
  width: 100%;
}

.formulario-coluna .rotulo-caixa {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

/* O width:100% global de input não vale para o quadradinho: ele é do
   tamanho que é, e o texto senta ao lado. */
.rotulo-caixa input[type="checkbox"] {
  width: auto;
  flex: none;
  margin: 0;
}

.perfil-foto-linha {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.1rem 0 0.7rem;
}

.avatar-grande {
  width: 56px;
  height: 56px;
  font-size: 1.2rem;
}

.perfil-secao { margin: 1rem 0 0.4rem; font-size: 0.92rem; }

.janela-termos {
  max-width: 36rem;
  width: min(36rem, 94vw);
  max-height: min(88vh, calc(100dvh - 2.5rem));
  overflow-y: auto;
}

.termos-texto {
  max-height: 52vh;
  overflow-y: auto;
  white-space: pre-wrap;
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin: 0.7rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

#termo-texto {
  width: 100%;
  resize: vertical;
  margin-bottom: 0.5rem;
}

.termo-versao { margin: 0.6rem 0; }
.termo-versao summary { cursor: pointer; }

.termo-corpo {
  font-size: 0.88rem;
  border-left: 3px solid var(--linha-forte);
  padding-left: 0.8rem;
  margin: 0.5rem 0;
}

/* Tipografia dos termos formatados (janela de aceite e histórico) */
.termos-texto h3, .termo-corpo h3 {
  margin: 0.4rem 0 0.6rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.termos-texto h4, .termo-corpo h4 {
  margin: 1.1rem 0 0.35rem;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--tinta);
}

.termos-texto p, .termo-corpo p {
  margin: 0 0 0.6rem;
}

.termos-texto hr, .termo-corpo hr {
  border: none;
  border-top: 1px solid var(--linha);
  margin: 0.9rem 0;
}

.termos-texto strong, .termo-corpo strong { color: var(--tinta); }

.termos-texto blockquote, .termo-corpo blockquote {
  margin: 0.7rem 0;
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 3px solid var(--acento);
  color: var(--tinta);
  font-size: 1.02em;
}

.termos-texto em, .termo-corpo em { font-style: italic; }

/* Alça de arraste: alvo generoso e sem outra função — arraste imediato */
.alca-barra {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  align-self: stretch;
  flex: none;
  color: var(--tinta-suave);
  touch-action: none;
  cursor: grab;
}

.alca-barra svg { width: 10px; height: 24px; }

/* Barra desprendida (segurar 1 s fora dos ícones): levanta e acompanha o dedo */
.ferramentas.movendo {
  box-shadow: 0 14px 40px rgba(15, 17, 22, 0.28);
  opacity: 0.92;
  cursor: grabbing;
}

.botao-flutuante {
  position: fixed;
  top: max(0.7rem, env(safe-area-inset-top));
  right: max(0.8rem, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vidro-borda);
  border-radius: 50%;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--sombra-cartao);
  color: var(--tinta);
  z-index: 20;
}

.botao-flutuante svg { width: 22px; height: 22px; }

/* display:flex acima venceria o [hidden] do navegador: reforço explícito. */
.botao-flutuante[hidden] { display: none; }

.espaco { flex: 1; }

.ferramenta {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--icone);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.ferramenta svg { width: 20px; height: 20px; }
.ferramenta:hover { background: rgba(28, 30, 38, 0.06); }
.ferramenta.ativa { background: var(--acento-claro); box-shadow: inset 0 0 0 1.5px var(--acento); }
.ferramenta:disabled { opacity: 0.35; }

/* O anel escuro por fora é o que faz a bolinha branca existir: só com o
   brilho interno ela sumia dentro do vidro claro da barra. */
.ferramenta.cor::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cor-tinta);
  /* Desenho vindo da paleta do painel: aro claro colado na cor e, por fora,
     um fio cheio. O aro separa a cor do fundo — é ele que faz a bolinha
     parecer esmalte — e o fio de fora garante que a clara não suma. Os dois
     em cor SÓLIDA e em pixel inteiro: era a mistura de translúcidos, e não o
     número de anéis, que amolecia a borda. */
  border: 2px solid var(--relevo);
  box-shadow: 0 0 0 1px var(--linha-forte);
}

.ferramenta.cor.ativa { box-shadow: inset 0 0 0 2px var(--acento); background: none; }

.ferramenta.cor { position: relative; }

/* Segurando para trocar a cor: anel pulsante avisa que o seletor vai abrir. */
.ferramenta.cor.segurando::before {
  box-shadow: 0 0 0 3px var(--acento);
  animation: pulsar 0.6s ease-in-out infinite;
}

/* Paleta aberta: a bolinha que está sendo editada. É OUTRO estado — "a
   paleta está mexendo nesta" — e não a tinta em uso. Com o mesmo anel cheio
   dos dois lados, parecia haver duas cores selecionadas.
   A diferença sai no vocabulário que a barra já tem: FUNDO é realce, ANEL é
   "em uso" (a ferramenta ligada usa os dois). Aqui, só o fundo — e quando as
   duas coisas caem na mesma bolinha, o anel entra por cima dele. */
.ferramenta.cor.editando {
  background: var(--acento-claro);
}

/* Campo de cor dentro do label: minúsculo e inerte — o toque cai sempre no
   label (nunca no campo), e o seletor só abre por showPicker()/ativação. */
.seletor-cor-oculto {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  pointer-events: none;
}

.ferramenta .ponto {
  border-radius: 50%;
  background: var(--tinta);
  display: block;
}

.separador {
  width: 1px;
  height: 22px;
  background: var(--linha-forte);
  margin: 0 5px;      /* inteiro, pelo mesmo motivo do gap acima */
  flex: none;
}

/* Ponto de largura fixa: o estado muda de cor, nunca de tamanho.
   O padding amplia a área de toque; background-clip mantém só o ponto visível. */
/* Só existe quando há algo a dizer (erro/offline). Sem depender de atributo
   nem de JS: assim vale mesmo com HTML ou script antigos em cache. */
.estado-salvo:not(.erro):not(.offline) { display: none; }

.estado-salvo {
  width: 10px;
  height: 10px;
  box-sizing: content-box;
  padding: 9px;
  background-clip: content-box;
  border-radius: 50%;
  margin: 0 0.1rem;
  flex: none;
  background-color: transparent;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.estado-salvo.ok { background-color: #2c9a5b; }
.estado-salvo.pendente { background-color: #b9b3a4; }
.estado-salvo.offline { background-color: #d99a2b; }
.estado-salvo.erro { background-color: var(--erro); }

.estado-salvo.pendente,
.estado-salvo.offline,
.estado-salvo.erro { animation: pulsar 1.3s ease-in-out infinite; }

@keyframes pulsar {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.55; }
}

.aviso-estado {
  position: fixed;
  top: calc(max(0.7rem, env(safe-area-inset-top)) + 60px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: var(--sombra-cartao);
  z-index: 25;
  white-space: nowrap;
}

.cursor-borracha {
  position: absolute;
  border: 1.5px solid rgba(28, 30, 38, 0.6);
  background: rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

/* Conta-gotas: a peça nasce ACIMA do dedo e aponta para baixo, senão a mão
   esconderia justamente o pixel que se quer ver. A haste termina no ponto
   colhido; o anel mostra a vizinhança ampliada e a borda, a cor da vez. */
.lupa-cor {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 10px 20px rgba(28, 30, 38, 0.28));
}

/* O display: flex acima vence o atributo hidden, e sem isto a peça ficava
   na tela para sempre depois da primeira coleta. */
.lupa-cor[hidden] { display: none; }

.lupa-anel {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--cor-colhida, #16181d);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  background: var(--relevo);
}

.lupa-anel canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

/* Cruz no centro: é o pixel que está sendo lido, não o entorno dele. */
.lupa-mira {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  outline: 1.5px solid rgba(28, 30, 38, 0.55);
  border-radius: 3px;
}

.lupa-hex {
  margin-top: -2px;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  background: var(--cor-colhida, #16181d);
  color: var(--tinta-colhida, #fff);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
}

.lupa-haste {
  width: 0;
  height: 0;
  margin-top: -1px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid var(--cor-colhida, #16181d);
}

/* Abaixo do dedo, quando não há espaço em cima: a peça inteira vira. */
.lupa-cor.abaixo {
  transform: translate(-50%, 0);
  flex-direction: column-reverse;
}

.lupa-cor.abaixo .lupa-haste {
  margin-top: 0;
  margin-bottom: -1px;
  border-top: 0;
  border-bottom: 14px solid var(--cor-colhida, #16181d);
}

.lupa-cor.abaixo .lupa-hex { margin-top: 0; margin-bottom: -2px; }

/* O ponto exato, na folha: um anel fino que a haste alcança. */
.lupa-alvo {
  position: absolute;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  outline: 1.5px solid rgba(28, 30, 38, 0.6);
  pointer-events: none;
  z-index: 6;
}

/* 54 px em vez de 3,4rem (54,4): a fração empurrava a alça e as setas
   de página para meio pixel, e elas saíam borradas junto. */
.indicador-pagina { min-width: 54px; text-align: center; }

/* ================= Ajustes estreitos ================= */

@media (max-width: 640px) {
  .identidade-texto { display: none; }
  .marca small { display: none; }
  .topo { padding-top: max(0.65rem, env(safe-area-inset-top)); }
}

/* iPhone: a estante do iPad, encolhida — três itens por linha, não dois
   gigantes. O iPhone é tela de consulta; densidade importa mais que pompa. */
@media (max-width: 480px) {
  .grade-drive {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
  }

  .cartao-drive { padding: 0.35rem 0.2rem; gap: 0.4rem; }
  .cartao-drive-nome { font-size: 0.74rem; }

  .grade-paginas {
    grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr));
    gap: 0.6rem;
  }

  .grade-cadernos { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .grade-folhas-escolha { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
  .grade-modelos { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }

  .conteudo { padding: 0.8rem 0.8rem 2.5rem; }

  /* Convite de instalação: texto em linha cheia, botões embaixo */
  .aviso-instalar {
    flex-wrap: wrap;
    max-width: 94vw;
    justify-content: flex-end;
  }
  .aviso-instalar span { flex: 1 1 100%; }
}

/* ================= Painel de cores da caneta ================= */

.paleta-cores {
  position: fixed;
  top: calc(max(0.7rem, env(safe-area-inset-top)) + 60px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  /* Medidas inteiras: 264 = 242 de conteúdo + 20 de respiro + 2 de fio. E 242
     = cinco colunas de 42 com quatro vãos de 8, o que deixa a bolinha de 34
     centrada com folga de 4 — tudo em pixel cheio. Com 268 e respiro de
     0,6rem as colunas davam 42,8 e cada bolinha caía a meio pixel. */
  width: 264px;
  padding: 10px;
  /* Numa tela curta (iPhone deitado) o painel passaria do rodapé. */
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--linha);
  border-radius: 16px;
  box-shadow: var(--sombra-cartao);
  /* Acima do cartão da ferramenta: os dois ocupam o mesmo ponto da tela, e
     empatados no z-index a paleta abria ATRÁS — o toque na bolinha de cor
     parecia não fazer nada. */
  z-index: 34;
}

.paleta-cores[hidden] { display: none; }

/* Faixa de cima: a cor que está valendo, do tamanho de uma fita, e o
   capturar cor ao lado — colher da folha é a outra forma de escolher. */
.cor-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cor-agora {
  flex: 1;
  height: 34px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(28, 30, 38, 0.14);
}

.cor-capturar {
  width: 44px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 11px;
  background: var(--trilho);
  box-shadow: none;
  color: var(--tinta-suave);
}

.cor-capturar svg { width: 19px; height: 19px; }
.cor-capturar:active { color: var(--acento); }

.cor-aba[hidden] { display: none; }

/* ---- Aba Paleta: tons prontos ---- */

.cor-grade {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

/* 34 px, e não a largura toda da célula: em cinco colunas o círculo chegava a
   43 px e a grade virava um mostruário. A folga entre eles é o que deixa
   distinguir uma cor da vizinha. */
.cor-do-painel {
  width: 34px;
  justify-self: center;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--relevo);
  /* 1 px, não 1,5: meio pixel num fio de contorno é exatamente o que o
     Safari reamostra. O desenho é o mesmo. */
  box-shadow: 0 0 0 1px var(--linha-forte);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.cor-do-painel:active { transform: scale(0.9); }

/* A cor que está valendo no alvo em edição, enquanto a paleta segue aberta. */
/* Escolhida: anel do acento por fora, com o vão claro no meio — é o mesmo
   vocabulário da barra, onde o anel fica em volta e não encostado. */
.cor-do-painel.escolhida {
  box-shadow: 0 0 0 1px var(--linha-forte), 0 0 0 3px var(--acento);
}

/* ---- Aba Disco: anel de matiz por fora, saturação e brilho por dentro ---- */

.cor-anel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  touch-action: none;
  background: conic-gradient(#e34a3a, #e38a2e, #e3c227, #9cc02f, #38a85f,
    #2fa9a0, #2e7fc2, #5b58c7, #9b4fc0, #d0417f, #e34a3a);
}

/* O vão entre o anel e o disco é sólido, não vidro: translúcido, a conic
   passava por baixo e as duas escolhas se confundiam. */
.cor-disco {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  touch-action: none;
  box-shadow: 0 0 0 9px var(--relevo);
}

/* O disco é pintado ponto a ponto, não é gradiente do CSS: a claridade dele
   depende da direção, e nenhuma combinação de radial-gradient faz isso. */
.cor-disco canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.cor-boto {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.96),
    0 2px 6px rgba(28, 30, 38, 0.35);
  pointer-events: none;
}

#cor-disco-boto { width: 18px; height: 18px; margin: -9px 0 0 -9px; }

/* ---- Aba Valores: seis réguas com o número ao lado ---- */

.cor-reguas {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.cor-regua {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.cor-regua-nome {
  width: 12px;
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--tinta-suave);
}

/* A régua é nossa, não é input: o trilho precisa mostrar aonde cada canal
   leva, e o botão precisa vestir a cor em uso. */
.cor-trilho {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  touch-action: none;
}

/* O botão não veste a cor: quem mostra a cor é o trilho, e a régua fica mais
   fácil de ler com o cursor neutro por cima dela. */
.cor-trilho .cor-boto {
  top: 3px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: var(--relevo);
  box-shadow: 0 1px 4px rgba(28, 30, 38, 0.3),
    inset 0 0 0 1.5px var(--linha-forte);
}

.cor-regua-valor {
  width: 46px;
  flex: none;
  text-align: center;
  padding: 0.28rem 0;
  border-radius: 9px;
  background: var(--trilho);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.cor-linha-fina { height: 1px; background: var(--linha); margin: 0.1rem 0; }

/* ---- Hexadecimal: o que se copia de um lugar para o outro ---- */

.cor-hex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--linha);
}

.cor-hex-rotulo {
  flex: 1;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

#cor-hex {
  width: 100px;
  flex: none;
  margin: 0;
  padding: 0.4rem 0.5rem;
  text-align: center;
  border: none;
  border-radius: 10px;
  background: var(--trilho);
  font: 700 0.78rem ui-monospace, Menlo, monospace;
  color: var(--tinta);
}

#cor-hex:focus { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Volta do miolo do adesivo à cor do contorno: linha inteira, abaixo das
   bolinhas, e só aparece quando há vínculo a desfazer. */
.cor-desvincular {
  width: 100%;
  margin: 0;
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem;
}

.cor-desvincular[hidden] { display: none; }

/* ---- Seletor livre do painel do papel (dois cursores) ---- */

.cor-livre {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.cor-livre[hidden] { display: none; }

.cor-livre input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 13px;
  margin: 0;
  border: 1px solid rgba(28, 30, 38, 0.14);
  border-radius: 999px;
  box-shadow: none;
  padding: 0;
}

#papel-matiz {
  background: linear-gradient(90deg, #f00, #ff0, #0c0, #0cc, #00f, #f0f, #f00);
}

.cor-livre input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--linha-forte);
  box-shadow: 0 1px 4px rgba(28, 30, 38, 0.3);
  margin-top: -3px;
}

.cor-livre-acao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cor-livre-previa {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--relevo);
  box-shadow: 0 0 0 1px var(--linha-forte);
}

.cor-livre-usar {
  flex: 1;
  padding: 0.45rem 0.6rem;
  font-size: 0.84rem;
}

.trilha-elo svg { width: 18px; height: 18px; vertical-align: -3px; }

/* Editor de texto sobre a folha: transparente, só a moldura tracejada diz
   onde a caixa está. A fonte é posta pelo JS, na escala da folha. */
.editor-texto {
  position: absolute;
  z-index: 30;
  background: transparent;
  /* O tracejado é um OUTLINE afastado, não uma borda: borda mora dentro da
     caixa e roubava ~3px do texto — a quebra de linha do editor divergia da
     do texto assentado, comprimindo o parágrafo. Outline não ocupa layout. */
  border: none;
  outline: 1.5px dashed var(--acento);
  outline-offset: 5px;
  border-radius: 2px;
  resize: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
  color: var(--tinta);
  line-height: 1.3;
}

.editor-texto[hidden] { display: none; }

/* Editor de CAMPO (valor e opções): um balcão mais acabado que o tracejado
   do texto corrido — vidro do tema, borda firme e um respiro interno. */
.editor-texto.editor-campo {
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1.5px solid var(--acento);
  outline: none;
  border-radius: 10px;
  box-shadow: var(--sombra-cartao);
  padding: 4px 8px;
}

/* Título das fileiras condicionais: o MESMO desenho do rótulo oficial do
   cartão — um cartão, uma voz. */
.mini-rotulo {
  display: block;
  margin-top: 0.55rem;
  margin-bottom: 0.25rem;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.mini-rotulo[hidden] { display: none; }

/* Cores do campo: duas amostras que abrem o painel de cores. */
.cores-campo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
}
.cores-campo[hidden] { display: none; }
.mini-inline {
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.6;
  padding: 0 0.25rem;
}
.unidade-propria {
  display: block;
  width: calc(100% - 1rem);
  margin: 0.25rem 0.5rem 0.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--vidro);
  color: var(--tinta);
  font-size: 0.9rem;
}

/* ---- Caixa de largura do traço ---- */

.caixa-largura {
  position: fixed;
  top: calc(max(0.7rem, env(safe-area-inset-top)) + 60px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(17.5rem, calc(100vw - 1.5rem));
  /* Com as explicações o cartão ficou mais alto. Numa tela curta ele passaria
     do rodapé e a última opção ficaria fora de alcance. */
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem 0.8rem;
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--vidro-borda);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(28, 30, 38, 0.22), 0 2px 8px rgba(28, 30, 38, 0.1);
  z-index: 30;
}

.ajuste-grupo[hidden] { display: none; }

.ajuste-rotulo {
  display: block;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.25rem;
}

.ajuste-linha {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* Explicação da opção escolhida, logo abaixo dela: o cartão é onde a dúvida
   aparece, e ninguém vai procurar a guia no meio da escrita. Só a ponta
   escolhida mantém o texto à vista — o resto virou o ponto de interrogação,
   senão o cartão vira uma parede de parágrafos. */
.ajuste-dica {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}

.ajuste-dica:empty { display: none; }

/* Cor do papel: painel próprio, no mesmo lugar dos outros da escrita. */
.paleta-papel {
  position: fixed;
  top: calc(max(0.7rem, env(safe-area-inset-top)) + 60px);
  left: 50%;
  transform: translateX(-50%);
  width: min(17.5rem, calc(100vw - 1.5rem));
  padding: 0.75rem 0.85rem 0.8rem;
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--vidro-borda);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(28, 30, 38, 0.22), 0 2px 8px rgba(28, 30, 38, 0.1);
  z-index: 34;
}

.paleta-papel[hidden] { display: none; }

.paleta-papel-titulo {
  margin: 0 0 0.5rem;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.paleta-papel-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--trilho);
  border-radius: 10px;
}

.papel-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 2px 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--tinta-suave);
  font-size: 0.6rem;
}

.papel-opcao.ativa {
  background: var(--relevo);
  box-shadow: 0 1px 5px rgba(28, 30, 38, 0.18);
  color: var(--tinta);
}

/* A amostra é a própria folha em miniatura, com uma pauta insinuada. */
.papel-amostra {
  width: 26px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--linha-forte);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 5px, rgba(28, 30, 38, 0.16) 5px 6px);
}

.papel-opcao[data-cor=""] .papel-amostra {
  background-color: var(--papel);
}

.paleta-papel-titulo-2 { margin-top: 0.7rem; }

/* As cores que a folha tem hoje: uma fileira de alvos. Cada um mostra a cor
   em uso, e a original numa tarja embaixo quando foi trocada. */
.paleta-alvos {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--trilho);
  border-radius: 10px;
}

.paleta-alvos button {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.paleta-alvos button.ativa {
  background: var(--relevo);
  box-shadow: 0 1px 5px rgba(28, 30, 38, 0.18);
}

.alvo-amostra {
  display: block;
  width: 100%;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--linha-forte);
}

.alvo-origem {
  display: block;
  height: 4px;
  margin-top: 3px;
  border-radius: 2px;
  opacity: 0.65;
}

.paleta-papel-acoes {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.paleta-papel-acoes .botao { flex: 1 1 0; margin-top: 0; }

/* Dentro do painel do papel, o seletor livre não é um grid: fica em coluna. */
.paleta-papel .cor-livre { margin-top: 0.6rem; }

.paleta-papel-nota {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}

.paleta-papel-tudo {
  width: 100%;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  padding: 0.45rem 0.6rem;
}

/* Cabeçalho do grupo: rótulo à esquerda, ajuda à direita. */
.ajuste-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.ajuste-cabecalho .ajuste-rotulo { margin-bottom: 0; }

.ajuda-ponto {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  box-shadow: none;
  color: var(--tinta-suave);
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1;
  opacity: 0.75;
  -webkit-touch-callout: none;
}

.ajuda-ponto:hover,
.ajuda-ponto.aberta {
  opacity: 1;
  color: var(--acento);
  background: var(--acento-claro);
}

/* Balão de ajuda: flutua sobre o cartão, sem empurrar nada. Alinhado à direita
   da coluna e com a largura útil do painel; a seta aponta o botão que o abriu. */
/* Fixo na TELA, não dentro do cartão: como filho dele, um texto mais alto que
   a vista do cartão era cortado pela rolagem — e crescer o cartão não
   resolvia, porque o balão flutua e não conta como conteúdo. */
.ajuda-balao {
  position: fixed;
  z-index: 36;
  margin: 0;
  padding: 0.6rem 0.7rem;
  background: var(--relevo);
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(28, 30, 38, 0.16);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}

.ajuda-balao[hidden] { display: none; }

.ajuda-balao::before,
.ajuda-balao::after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

/* Duas setas sobrepostas: a de baixo faz a borda, a de cima tapa o miolo. */
.ajuda-balao::before {
  right: var(--seta, 12px);
  border-bottom-color: var(--linha);
}

.ajuda-balao::after {
  right: var(--seta, 12px);
  margin-bottom: -1px;
  border-bottom-color: var(--relevo);
}

/* Aberto para cima: a seta desce para a base e aponta o botão de lá. */
.ajuda-balao.acima::before,
.ajuda-balao.acima::after {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
}

.ajuda-balao.acima::before { border-top-color: var(--linha); }

.ajuda-balao.acima::after {
  margin-bottom: 0;
  margin-top: -1px;
  border-top-color: var(--relevo);
}

/* Bolinha de cor dentro do cartão: mesma linguagem das cores da barra, no
   tamanho de um controle secundário. Mostra a cor em uso e abre a paleta. */
.cor-do-ajuste {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: var(--cor-tinta, #16181d);
  /* Mesmo desenho das outras. A sombra desfocada que havia aqui era o que
     mais amolecia a beirada — ela é borrão por definição. */
  border: 2px solid var(--relevo);
  box-shadow: 0 0 0 1px var(--linha-forte);
  -webkit-touch-callout: none;
}

.cor-do-ajuste[hidden] { display: none; }

/* Em edição: a paleta aberta está mirando ESTA bolinha. Sem a marca, trocar
   de alvo com a paleta aberta não dava nenhum sinal na tela. */
.cor-do-ajuste.editando {
  box-shadow: 0 0 0 2px var(--acento), 0 1px 3px rgba(28, 30, 38, 0.2);
}

/* Vinculada ao contorno: um risco diagonal claro conta que a cor não é
   própria — vem de cima, e acompanha quando a outra muda. */
.cor-do-ajuste.vinculada {
  background:
    linear-gradient(135deg, transparent 44%, rgba(255, 255, 255, 0.92) 44%,
      rgba(255, 255, 255, 0.92) 56%, transparent 56%),
    var(--cor-tinta, #16181d);
}

/* No adesivo, a figura vem antes dos ajustes dela: primeiro o que se escolhe,
   depois como fica. A ordem do HTML serve às outras ferramentas. */
.caixa-largura.modo-adesivo #grupo-adesivos { order: 1; }
.caixa-largura.modo-adesivo #grupo-largura { order: 2; }
.caixa-largura.modo-adesivo #grupo-preenchimento { order: 3; }

/* Na caneta a ordem é a do HTML: ponta, o que é dela, o corpo do risco e por
   fim como a tinta se comporta. Havia um bloco de `order` aqui que vinha de
   um arranjo antigo — e ele mandava mais que o HTML. Pior: grupo sem `order`
   fica com zero e vai para a FRENTE de todos, então cada ajuste novo (a
   opacidade, a atenuação, as bordas, a mistura) nascia no topo do cartão,
   empurrando a ponta para o meio. */

/* Um fio entre os blocos: separa sem pesar, e dá ao cartão o ar de painel em
   vez de lista de controles soltos. Com as ajudas fora do fluxo, todos os
   grupos têm a mesma altura de respiro — antes o espaçamento variava conforme
   o grupo tivesse ou não um parágrafo embaixo. */
.caixa-largura .ajuste-grupo {
  padding-bottom: 0.1rem;
}

/* O risco separa grupos VISÍVEIS. Com o irmão adjacente, um grupo escondido
   ainda contava e o cartão abria com uma linha solta no topo — é o que
   acontecia no balde, onde a espessura não aparece. */
.caixa-largura .ajuste-grupo:not([hidden]) ~ .ajuste-grupo:not([hidden]) {
  border-top: 1px solid var(--trilho);
  padding-top: 0.55rem;
}

/* Pontas da caneta: cada botão mostra o traço que ela faz, desenhado pelo
   mesmo renderizador da folha. */
.grade-pontas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--trilho);
  border-radius: 10px;
}

.grade-pontas button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 2px 3px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--tinta-suave);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  -webkit-touch-callout: none;
}

.grade-pontas button.ativa {
  background: var(--relevo);
  box-shadow: 0 1px 5px rgba(28, 30, 38, 0.18);
  color: var(--tinta);
}

.amostra-ponta {
  width: 100%;
  height: 24px;
  display: block;
  pointer-events: none;
}

/* Controle segmentado, estilo iOS: trilho rebaixado, opção eleita em relevo */
.segmentos {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--trilho);
  border-radius: 10px;
}

/* O display:flex acima atropelava o atributo hidden: as fileiras condicionais
   do cartão (máscaras do 123, opções da caixa) apareciam sempre. */
.segmentos[hidden] { display: none; }

.segmentos button {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--tinta);
  font-size: 0.84rem;
  font-weight: 550;
  padding: 0;
}

.segmentos button.ativa {
  background: var(--relevo);
  box-shadow: 0 1px 5px rgba(28, 30, 38, 0.2);
}

.segmentos button { font-size: 0.78rem; border-radius: 8px; }
.segmentos button svg { width: 26px; height: 9px; display: block; }

/* Galeria de adesivos: seis por linha, no mesmo trilho dos segmentos. */
.grade-adesivos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--trilho);
  border-radius: 10px;
}

.grade-adesivos button {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--tinta-suave);
  padding: 0;
}

.grade-adesivos button svg { width: 20px; height: 20px; display: block; }

.grade-adesivos button.ativa {
  background: var(--relevo);
  box-shadow: 0 1px 5px rgba(28, 30, 38, 0.2);
  color: var(--acento);
}

/* Alcance do PDF: seletor compacto. Os radios continuam ali (o código os lê
   por nome); só a aparência muda, para não parecer opção do link ao vivo. */
.segmentos-pdf {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--trilho);
  border-radius: 10px;
  margin-bottom: 0.7rem;
}

/* base 0 e min-width 0: os três repartem a linha por igual, e o texto longo
   encolhe em vez de empurrar os vizinhos para fora do trilho. */
/* margin: 0 é essencial — label herda margem inferior das regras de
   formulário, e ela esticava o trilho por baixo dos segmentos, deixando uma
   faixa cinza sob o branco. */
.segmentos-pdf label { flex: 1 1 0; min-width: 0; display: block; margin: 0; }
.segmentos-pdf label[hidden] { display: none; }

.segmentos-pdf input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmentos-pdf span {
  display: block;
  text-align: center;
  padding: 0.36rem 0.3rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.segmentos-pdf input:checked + span {
  background: var(--relevo);
  box-shadow: 0 1px 5px rgba(28, 30, 38, 0.2);
  font-weight: 600;
}

/* Botão de exportar na mesma largura do seletor logo acima: encostados e com
   larguras diferentes, os dois pareciam desalinhados. */
#botao-exportar-pdf { width: 100%; }

/* Risco entre grupos do menu ⋯ */
.menu-risco {
  display: block;
  height: 1px;
  margin: 0.3rem 0.6rem;
  background: var(--linha);
}

.caixa-largura[hidden] { display: none; }

.largura-previa {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

#largura-ponto {
  display: block;
  flex: none; /* nunca espremido pelo flex: bola redonda, jamais oval */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Tamanho por ESCALA, e sem transição. A régua já entrega o valor contínuo:
     uma transição de 80 ms reiniciada a cada evento do arrasto deixava a
     bolinha sempre atrasada em relação ao dedo — era esse o atraso. E animar
     largura e altura dentro de um cartão com backdrop-filter obriga o Safari a
     refazer o desfoque de trás a cada quadro. */
  transform: scale(0.192);
  will-change: transform;
}

.caixa-largura input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.caixa-largura input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--linha-forte), var(--acento));
}

/* 20px cobre o mínimo de alvo de toque com folga do dedo e não tapa o trilho,
   como o botão de 28 fazia. A borda sai no acento: é o tema encostando no
   controle, não só no degradê atrás dele. */
.caixa-largura input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--relevo);
  border: 1.5px solid var(--acento);
  box-shadow: 0 1px 4px rgba(28, 30, 38, 0.28);
}

/* Nome de item é o atalho do menu. O sublinhado antigo dava cara de link;
   o convite agora é a pílula que acende sob o cursor — e no toque o menu
   continua a um dedo de distância, sem enfeite pendurado no texto. */
.cartao-drive-nome.clicavel,
.item-nome.clicavel {
  cursor: pointer;
  border-radius: 7px;
  padding: 0.12rem 0.4rem;
  margin: -0.12rem -0.4rem;
  transition: background 0.15s ease;
}
.cartao-drive-nome.clicavel:hover,
.item-nome.clicavel:hover { background: var(--trilho); }

button.indicador-pagina {
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--acento-escuro);
  cursor: pointer;
  border-radius: 8px;
  padding: 0.3rem 0.2rem;
}

button.indicador-pagina:hover { background: var(--acento-claro); }

/* Trilha discreta na linha dos ícones da estante. */
.trilha-cabecalho {
  flex: 1;
  margin: 0;
  font-size: 0.85rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trilha-cabecalho .trilha-elo { padding: 0.2rem 0.1rem; }
.trilha-cabecalho svg { width: 17px; height: 17px; }

.campo-nome-linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.campo-nome-linha input { flex: 1; margin-bottom: 0; }
.campo-nome-linha { margin-bottom: 1rem; }

/* ---- Busca nas anotações ---- */

.resultado-busca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  padding: 0.55rem 0.4rem;
  border-radius: 10px;
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
}

.resultado-busca:hover { background: var(--acento-claro); }

.resultado-busca img {
  width: 40px;
  height: 54px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--linha);
  background: #fff;
  flex: none;
}

.resultado-textos { min-width: 0; }

.resultado-titulo {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resultado-trecho {
  display: block;
  font-size: 0.82rem;
  color: var(--tinta-suave);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.resultado-trecho mark {
  background: rgba(242, 207, 91, 0.55);
  border-radius: 3px;
  padding: 0 1px;
}

/* ---- Compartilhar ---- */

label.linha-interruptor,
.linha-interruptor {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--tinta);
  margin: 0.4rem 0 0.8rem;
}

.linha-interruptor input[type="checkbox"] {
  width: 38px;
  height: 22px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: var(--linha-forte);
  position: relative;
  transition: background 0.2s ease;
  flex: none;
}

.linha-interruptor input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 30, 38, 0.35);
  transition: left 0.2s ease;
}

.linha-interruptor input[type="checkbox"]:checked { background: #2c9a5b; }
.linha-interruptor input[type="checkbox"]:checked::after { left: 18px; }

.divisor {
  height: 1px;
  background: var(--linha);
  margin: 1rem 0;
}

#campo-link { font-size: 0.82rem; color: var(--tinta-suave); }
#bloco-link .botao-discreto { margin-top: 0.2rem; }

.opcoes-exportar { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.6rem; }

.opcao-radio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--tinta);
  margin: 0;
  padding: 0.3rem 0.1rem;
}

.opcao-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--acento);
  flex: none;
}

#pdf-faixa { margin-bottom: 0.8rem; }

/* ---- Convite de instalação ---- */

.aviso-instalar {
  position: fixed;
  left: 50%;
  bottom: max(3.2rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: min(92vw, 34rem);
  padding: 0.7rem 1rem;
  background: var(--vidro-denso);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--linha);
  border-radius: 16px;
  box-shadow: var(--sombra-cartao);
  /* Acima da faixa de diagnóstico (9999): nada pode cobrir o "Entendi". */
  z-index: 10000;
  font-size: 0.88rem;
}

.aviso-instalar button { touch-action: manipulation; }

/* Com qualquer janela aberta, o convite se recolhe: diálogo tem prioridade. */
body:has(.veu:not([hidden])) .aviso-instalar { display: none; }

/* O display:flex acima venceria o [hidden] do navegador: reforço explícito. */
.aviso-instalar[hidden] { display: none; }

.aviso-instalar svg { width: 26px; height: 26px; flex: none; color: var(--acento); }
.aviso-instalar .botao { padding: 0.45rem 0.9rem; font-size: 0.86rem; flex: none; }
.aviso-instalar .botao-discreto { flex: none; }

/* ---- Editor de aparências (admin) ------------------------------------------
   A prévia recebe as variáveis EM LINHA (js/admin_temas.js): :root[data-tema]
   não alcança uma div, então cada cartão é o seu próprio pequeno documento. */

.lista-temas {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.cartao-tema {
  padding: 0.9rem 1rem 1rem;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-leve);
}

.tema-cabeca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tema-nome {
  width: 12rem;
  font-weight: 650;
  font-size: 0.95rem;
}

.tema-chave {
  font-size: 0.76rem;
  color: var(--tinta-suave);
  background: var(--acento-claro);
  padding: 0.14rem 0.4rem;
  border-radius: 6px;
}

.tema-acoes {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
}

.tema-acoes .botao-icone { font-size: 0.9rem; line-height: 1; }

.tema-previa {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.7rem 0 0.4rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
}

.tema-previa .item {
  padding: 0.35rem 0.7rem;
  border-radius: 9px;
  background: var(--forte-a);
  color: #fff;
  font-size: 0.84rem;
}

.tema-previa .barrinha {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--vidro-denso);
  border: 1px solid var(--vidro-borda);
}

/* Na prévia os "botões" são span: mostram, não fazem. */
.tema-previa .ferramenta,
.tema-previa .botao-icone { width: 32px; height: 32px; }
.tema-previa .ferramenta svg { width: 18px; height: 18px; }
.tema-previa .botao-icone { margin-left: 6px; }
.tema-amostra-texto { font-size: 0.86rem; line-height: 1.35; }

.tema-contraste {
  margin: 0 0 0.7rem;
  font-size: 0.76rem;
  color: var(--tinta-suave);
}

.tema-contraste-fraco { color: var(--erro); font-weight: 600; }

.tema-cores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.4rem 0.7rem;
}

.campo-cor {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
}

.campo-cor input[type="color"] {
  width: 30px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 7px;
  background: none;
}

.tema-detalhes { margin-top: 0.7rem; }
.tema-detalhes summary {
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
}
.tema-detalhes .tema-cores,
.tema-detalhes .dica-nav { margin: 0.4rem 0; }
.tema-detalhes .botao-discreto { margin-top: 0.5rem; }

.tema-tintas { display: flex; gap: 0.4rem; margin: 0.4rem 0; }
.tema-tintas input[type="color"] {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  background: none;
}

@media (max-width: 640px) {
  .tema-nome { width: 100%; }
  .tema-acoes { margin-left: 0; }
}

/* ---- Pergunta de sim ou não (js/identidade.js) ------------------------------
   Substitui confirm()/alert(): no Safari a caixa nativa derruba a tela cheia,
   e quem está escrevendo perde a folha inteira ao confirmar qualquer coisa. */

.janela-pergunta {
  max-width: 25rem;
  gap: 0.15rem;
}

.janela-pergunta h3 { margin: 0 0 0.2rem; }

.pergunta-texto {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  white-space: pre-line;         /* a mensagem pode vir com parágrafos */
}

.botao-perigo {
  background: linear-gradient(180deg, var(--erro) 0%,
    color-mix(in srgb, var(--erro) 82%, #000) 100%);
}

/* ---- Barra de ferramentas em pé (menu ⋯ → "Barra em pé") --------------------
   No iPad em retrato sobra altura e falta largura. Em pé, a barra devolve à
   folha a faixa que ocupava no topo. Posição arrastada (estilo em linha)
   continua mandando — isto aqui é só o padrão de cada postura. */

.ferramentas.vertical {
  flex-direction: column;
  padding: 0.55rem 0.35rem;
  max-width: none;
  max-height: calc(100dvh - 1rem);
  overflow-x: hidden;
  overflow-y: auto;
  /* Encostada à esquerda e no meio da altura: no topo do meio ela desceria
     pela folha inteira, bem no caminho da mão. */
  top: 50%;
  left: max(0.7rem, env(safe-area-inset-left));
  transform: translateY(-50%);
}

/* O risco divisor gira junto: 1 px de altura, não de largura. */
.ferramentas.vertical .separador {
  width: 22px;
  height: 1px;
  margin: 0.3rem 0;
}

/* A alça deitada tem 24 px de altura; em pé, de largura. O desenho é o mesmo,
   virado — seis pontos são seis pontos em qualquer sentido. */
.ferramentas.vertical .alca-barra {
  width: auto;
  height: 24px;
  align-self: stretch;
}

.ferramentas.vertical .alca-barra svg { transform: rotate(90deg); }

/* Setas de página apontam para onde a barra anda: em pé, cima e baixo. */
.ferramentas.vertical #pagina-anterior svg,
.ferramentas.vertical #pagina-proxima svg { transform: rotate(90deg); }

/* "1 / 2" cabe na coluna sem alargar a barra inteira. */
.ferramentas.vertical .indicador-pagina {
  min-width: 0;
  font-size: 0.7rem;
  padding: 0;
}

/* ---- Testa dos painéis: arrastar e fixar ------------------------------------
   Faixa no alto de cada cartão flutuante. Arrastar por ela move o cartão;
   o alfinete à direita impede que ele se feche quando o toque cai fora.
   Injetada por js/escrita.js — os painéis não a têm no HTML. */

.testa-painel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin: -0.2rem 0 0.1rem;
  padding: 0.1rem 0 0.15rem;
  /* O cartão da ferramenta rola: sem grudar no alto, a alça e o alfinete
     saíam de vista justo quando o cartão fica alto — que é quando mais se
     quer movê-lo. Precisa de fundo próprio, senão o conteúdo passa por baixo. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--vidro-denso);
  touch-action: none;      /* o arraste é nosso, não do Safari */
  cursor: grab;
  /* Painel em grade (a paleta de cores): a testa ocupa a linha inteira. */
  grid-column: 1 / -1;
}

/* Título de cartão, não rótulo de seção: caixa normal e do tamanho do texto
   do cartão. Em versalete espaçado ele competia com os rótulos dos ajustes,
   que são justamente assim — dois níveis diferentes com a mesma aparência. */
.testa-titulo {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A alça encosta no título, à esquerda: junta o "o que é" com o "pegue aqui"
   num bloco só, em vez de três coisas soltas numa faixa larga. */
.testa-alca {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 18px;
  color: var(--linha-forte);
}

.testa-alca svg { width: 8px; height: 16px; }

.testa-fixar {
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--tinta-suave);
  padding: 0;
}

.testa-fixar svg { width: 15px; height: 15px; }

/* Fixado: o alfinete "espeta" — inclinado e na cor de acento, para a diferença
   ser visível de relance sem depender de cor sozinha. */
.fixado .testa-fixar {
  color: var(--acento);
  background: var(--acento-claro);
}

.fixado .testa-fixar svg { transform: rotate(-35deg); }

.painel-movendo {
  cursor: grabbing;
  opacity: 0.94;
  box-shadow: 0 22px 60px rgba(15, 17, 22, 0.32);
}

/* ---- Barra: as duas ferramentas de acabamento ficam atrás do "mais" --------
   Balde e adesivos entram em série, e não a toda hora. Recolhidos, a barra
   encurta — o que decide se ela cabe em pé num iPhone. A que estiver ATIVA
   nunca some: sumir a ferramenta em uso é perder o sinal de onde se está. */

.ferramentas:not(.expandida):not(.estilo-fixo) #modo-adesivo:not(.ativa),
.ferramentas:not(.expandida):not(.estilo-fixo) #modo-balde:not(.ativa) { display: none; }

/* Botão escondido por um estilo de barra: o display:flex da .ferramenta
   atropelaria o atributo hidden (o mesmo tropeço dos segmentos). */
.ferramenta[hidden] { display: none; }

/* O seletor de estilos dentro do menu ⋯ */
.rotulo-menu-barra { padding: 0.5rem 0.6rem 0.15rem; }
#estilos-barra { margin: 0 0.15rem 0.25rem; }
#estilos-barra button { font-size: 0.72rem; padding: 0 0.1rem; gap: 0; color: var(--tinta); }
/* Dentro do menu, a regra do item ligado (sólido escuro + texto branco)
   atropelava o segmento: ficava pastilha clara com texto branco, invisível. */
#estilos-barra button.ativa {
  background: var(--relevo);
  color: var(--tinta);
  box-shadow: 0 1px 5px rgba(28, 30, 38, 0.2);
}

#mais-ferramentas svg { transition: transform 0.18s ease; }
.ferramentas.expandida #mais-ferramentas svg { transform: rotate(180deg); }

/* ---- Barra em pé: alça e páginas sobem para o alto -------------------------
   Em pé, o alto da barra é o que a mão alcança primeiro. Mover a barra e
   trocar de página são os dois comandos que se usa sem olhar. */

.ferramentas.vertical .alca-barra { order: -3; }
.ferramentas.vertical #pagina-anterior,
.ferramentas.vertical #indicador-pagina,
.ferramentas.vertical #pagina-proxima { order: -2; }

/* O risco que separava as páginas do resto ficou órfão lá embaixo. */
.ferramentas.vertical .separador:has(+ #pagina-anterior) { display: none; }

/* ...e um novo nasce embaixo do bloco que subiu. */
.ferramentas.vertical::after {
  content: '';
  order: -1;
  width: 22px;
  height: 1px;
  margin: 0.3rem 0;
  flex: none;
  background: var(--linha-forte);
}

/* Valor da régua: número pequeno à direita do rótulo, na mesma linha. Fica
   colado no ? quando existe — os dois são serviço do rótulo, não do controle. */
.valor-ajuste {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Régua fora de um grupo com rótulo (as duas da cor livre do papel): o valor
   cai na linha de baixo, encostado à direita. */
.cor-livre .valor-ajuste {
  display: block;
  margin: -0.15rem 0 0.2rem;
  text-align: right;
}

/* O número da miniatura é botão: abre os comandos da página. Precisa de alvo
   maior que o texto — no filete ele é a única porta para o menu com mouse. */
.filete-numero {
  cursor: pointer;
  padding-top: 4px !important;
}

.filete-numero:hover { background: var(--forte-a) !important; }

/* O ΔE da régua do balde: é o único valor do sistema que significa algo fora
   dele, então aparece como número, e não como porcentagem do curso. */
.valor-delta-e {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Degradê do balde: amostras do resultado, não ícones ---------------------
   Cada botão mostra o degradê que ele mesmo produz, a partir da tinta em uso.
   Antes eram quatro riscos cinzas iguais e uma bolinha riscada ao lado: nada
   ali dizia com que cor a mancha ia terminar. */

.degrade-alvos button { padding: 3px; }

.amostra-grad {
  display: block;
  width: 100%;
  height: 18px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(28, 30, 38, 0.14);
}

/* A quarta é a personalizada: o cantinho dobrado avisa que ela abre a paleta. */
.degrade-alvos button[data-grad="propria"] .amostra-grad {
  position: relative;
  overflow: hidden;
}

.degrade-alvos button[data-grad="propria"] .amostra-grad::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border: 7px solid transparent;
  border-right-color: var(--papel);
  border-bottom-color: var(--papel);
}

#direcoes-degrade[hidden] { display: none; }

/* ---- Degradê do balde: prévia, disco, rampa e suavidade ---------------------
   O disco diz TIPO e direção de uma vez: no centro é radial centrado, saindo
   dele o foco escorrega, e encostado na borda vira linear naquele ângulo. As
   medidas seguem o modelo, reduzidas para a largura do cartão (280 px). */

.degrade-topo {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.degrade-previa {
  flex: 1;
  height: 88px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}

.degrade-disco-caixa {
  flex: none;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.degrade-disco {
  position: relative;
  display: block;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: var(--trilho);
  box-shadow: inset 0 0 0 1.5px var(--linha-forte);
  touch-action: none;
  cursor: grab;
}

/* A haste sai do centro e cresce com a distância: é ela que mostra que o
   ponto veio de algum lugar, e não que está solto no disco. */
.degrade-haste {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--linha-forte), var(--acento));
  transform-origin: 0 50%;
}

/* No centro ele engorda: é o sinal de "radial centrado", sem precisar de
   rótulo para dizer que ali é um estado especial. */
.degrade-alfinete {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--acento);
  box-shadow: 0 0 0 3px var(--papel);
  transform-origin: 0 0;
}

/* Uma linha só: quebrando em duas, a caixa do disco cresce e o cartão inteiro
   se mexe a cada grau girado. */
.degrade-tipo {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

/* A rampa É o degradê: o fundo dela é a prévia da passagem, e as paradas
   ficam por cima. */
.degrade-fita {
  position: relative;
  height: 26px;
  margin: 0 17px 1.1rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  touch-action: none;
}

.degrade-parada {
  position: absolute;
  top: -5px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--papel);
  box-shadow: 0 2px 6px rgba(28, 30, 38, 0.28);
  display: grid;
  place-items: center;
  cursor: grab;
}

.degrade-parada i {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid var(--relevo);
  box-shadow: 0 0 0 1px var(--linha-forte);
}

/* Sólido ou degradê: os mesmos segmentos do resto do cartão. O interruptor
   que estava aqui pedia que se adivinhasse o que "desligado" queria dizer. */
#tipo-preenchimento { margin-bottom: 0.7rem; }

#degrade-disco-caixa-el[hidden],
#degrade-suavidade[hidden] { display: none; }
.degrade-fita[hidden] { display: none; }