* { margin: 0; padding: 0; box-sizing: border-box; }

/* o atributo hidden SEMPRE vence qualquer display definido em CSS */
[hidden] { display: none !important; }

/* Tipografia da interface: Inter (DNA "Sereno" — Direção A) */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("/static/inter/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap;
  src: url("/static/inter/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("/static/inter/Inter-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap;
  src: url("/static/inter/Inter-Bold.ttf") format("truetype"); }

/* ===================== DESIGN SYSTEM — DNA "Sereno" (Direção A) =====================
   Claro, quente, muito respiro. Cinzas mornos, acento azul suave, cantos macios.
   Estes tokens valem para TODAS as telas (editor, admin, inserir, login, drawers). */
:root {
  /* Marca / acento */
  --azul: #2f2b26;             /* "escuro de marca" agora é o tinta morno (não azul) */
  --azul-claro: #3b6cf6;       /* acento (ação primária) */
  --amarelo: #ffd400;          /* SÓ na arte, nunca na interface */

  /* Superfícies e neutros (mornos) */
  --fundo: #f7f6f3;            /* fundo geral / workspace */
  --cartao: #ffffff;
  --superficie-2: #fbfaf8;     /* painéis / blocos internos */
  --superficie-3: #f1efe9;     /* insets / abas / trilhos */
  --borda: #ece9e3;
  --borda-forte: #ddd8cf;
  --texto: #2f2b26;
  --texto-suave: #6b6459;
  --texto-fraco: #9a9287;

  /* Ação primária */
  --marca: var(--azul-claro);
  --marca-hover: #2f57cc;
  --marca-suave: #eef2ff;

  /* Semânticas */
  --sucesso: #16a34a;  --sucesso-escuro: #15803d;  --sucesso-suave: #dcfce7;
  --erro: #dc2626;     --erro-escuro: #b91c1c;     --erro-suave: #fee2e2;
  --aviso: #d97706;    --aviso-suave: #fef3c7;
  --info: #0ea5e9;

  /* Acento de seleção do canvas (fonte única — CSS + JS) */
  --acento-selecao: #e8912a;
  --acento-selecao-forte: #cf7a1c;

  /* Raio (A: 10 nos controles, 16 nos cartões grandes) */
  --raio-xs: 7px;
  --raio-sm: 10px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 20px;
  --raio-full: 999px;

  /* Espaçamento (escala de 4) */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px;

  /* Sombra / elevação (suaves, tom morno) */
  --sombra-sm: 0 1px 2px rgba(50, 45, 38, .05);
  --sombra-md: 0 1px 2px rgba(50, 45, 38, .05), 0 6px 20px rgba(50, 45, 38, .06);
  --sombra-lg: 0 1px 2px rgba(50, 45, 38, .05), 0 14px 40px rgba(50, 45, 38, .10);
  --sombra-xl: 0 1px 2px rgba(50, 45, 38, .05), 0 24px 60px rgba(50, 45, 38, .16);

  /* z-index nomeado */
  --z-sticky: 20;
  --z-flutuante: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 90;

  /* Tipografia */
  --fonte-ui: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --peso-normal: 400; --peso-medio: 500; --peso-semibold: 600; --peso-bold: 700;
  --texto-xs: .72rem; --texto-sm: .82rem; --texto-md: .9rem;
  --texto-lg: 1.05rem; --texto-xl: 1.3rem;

  /* Breakpoints de referência p/ media queries: 640 / 980 / 1250 (px) */
}

body {
  font-family: var(--fonte-ui);
  background: var(--fundo);
  color: var(--texto);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Cabeçalho claro (DNA A) — branco, tinta morno, acento na marca */
header {
  background: var(--cartao);
  color: var(--texto);
  padding: 15px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--borda);
}

.marca { display: flex; align-items: center; gap: 12px; }
.marca-icone { font-size: 1.2rem; width: 40px; height: 40px; border-radius: var(--raio-md);
  display: grid; place-items: center;
  background: var(--superficie-3); border: 1px solid var(--borda); }
.marca h1 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.2px; line-height: 1.15; color: var(--texto); }
.marca p { font-size: .8rem; color: var(--texto-fraco); letter-spacing: 0; }

.header-direita { display: flex; align-items: center; gap: 10px; }

.chip {
  font-size: .75rem; font-weight: 600;
  background: var(--superficie-3); color: var(--texto-suave);
  padding: 7px 13px;
  border-radius: var(--raio-full);
}
.chip.ok { background: var(--sucesso-suave); color: var(--sucesso-escuro); }
.chip.aviso { background: var(--aviso-suave); color: #92600d; }

#sel-template {
  padding: 8px 34px 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background-color: var(--cartao);
  color: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* seta própria (some a nativa some com o appearance:none) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#sel-template:hover { border-color: #94a3b8; }
#sel-template:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

main { max-width: 1280px; margin: 0 auto; padding: 24px 28px 60px; }

#dropzone {
  border: 2px dashed #94a3b8;
  border-radius: 16px;
  background: var(--cartao);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#dropzone.arrastando { border-color: var(--azul-claro); background: #eff6ff; }
.dz-conteudo { display: flex; flex-direction: column; gap: 6px; color: var(--texto-suave); }
.dz-conteudo strong { color: var(--texto); font-size: 1.1rem; }
.dz-icone { font-size: 2.4rem; }

#barra-acoes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0 4px;
}
#contagem { color: var(--texto-suave); font-size: .9rem; }

#lista-alunos { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }

.aluno {
  display: grid;
  grid-template-columns: 150px 1fr 320px;
  gap: 20px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 18px;
}

.foto-preview {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 4/5;
  background: #e2e8f0;
}

.aluno.do-historico { border-color: var(--azul-claro); }
.aluno.do-historico::before {
  content: "do histórico — gerar substitui o post";
  grid-column: 1 / -1;
  font-size: .72rem;
  color: var(--azul-claro);
  font-weight: 600;
}
.aluno.destacado {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .55);
  transition: box-shadow .3s;
}

.rotulo { font-size: .8rem; color: var(--texto-suave); display: block; margin-bottom: 6px; }

.texto-livre {
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: .9rem;
  resize: vertical;
}
.texto-livre:focus { outline: 2px solid var(--azul-claro); border-color: transparent; }

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.campos input {
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .85rem;
}
.campos select {
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .85rem;
  background: #fff;
}
.campos input:focus, .campos select:focus {
  outline: 2px solid var(--azul-claro); border-color: transparent;
}

.btn {
  border: 1px solid var(--borda-forte);
  background: var(--cartao);
  color: var(--texto);
  border-radius: var(--raio-sm);
  padding: 8px 14px;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1.2;
  transition: background .14s, border-color .14s, box-shadow .14s, color .14s;
}
.btn:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
.btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.btn-primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn-primario:hover { background: var(--marca-hover); border-color: var(--marca-hover); }
.btn-primario:disabled { background: var(--texto-fraco); border-color: var(--texto-fraco);
  color: #fff; cursor: wait; }
/* secundário = leve/quase-fantasma, pra dar a calma da Direção A */
.btn-suave { background: transparent; border-color: transparent; color: var(--texto-suave); }
.btn-suave:hover { background: var(--superficie-3); border-color: transparent; color: var(--texto); }

.aluno-col-resultado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.resultado-vazio {
  color: var(--texto-suave);
  font-size: .85rem;
  border: 1px dashed var(--borda);
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cards-gerados { display: flex; gap: 12px; width: 100%; align-items: flex-start; }
.cards-gerados[hidden] { display: none; }
.card-formato { flex: 1; min-width: 0; text-align: center; }
.rotulo-formato {
  display: block; font-size: .72rem; color: var(--texto-suave); margin-bottom: 5px;
}
.card-formato img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
}
.card-acoes { display: flex; gap: 6px; justify-content: center; margin-top: 7px; }
.card-acoes .btn { padding: 6px 12px; font-size: .82rem; }
.btn-desfazer[hidden] { display: none; }

#secao-historico { margin-top: 42px; }
.historico-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.historico-topo h2 { font-size: 1.1rem; }
#busca {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: .9rem;
  width: 300px;
  max-width: 50vw;
}

.grade-historico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.item-historico {
  position: relative;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  overflow: hidden;
  font-size: .78rem;
  display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s;
}
.item-historico:hover { box-shadow: 0 4px 14px rgba(15,23,42,.1); }
.item-historico.marcado { border-color: var(--azul-claro); box-shadow: 0 0 0 2px rgba(29,78,216,.25); }

/* --- miniatura --- */
.item-historico .thumb { position: relative; }
.item-historico .abrir {
  display: block; width: 100%; padding: 0; border: none; cursor: pointer;
  background: none;
}
.item-historico img { width: 100%; display: block; }
.item-historico .lupa {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: rgba(11, 42, 91, .72); color: #fff;
  font-size: .82rem; font-weight: 700; opacity: 0; transition: opacity .15s;
}
.item-historico .thumb:hover .lupa { opacity: 1; }
.item-historico .marcar {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(255,255,255,.94); border-radius: 6px;
  padding: 3px 5px; line-height: 0; cursor: pointer;
}
.item-historico .marcar input { cursor: pointer; margin: 0; }
.item-historico .excluir {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  border: none; background: rgba(255,255,255,.94); cursor: pointer;
  border-radius: 6px; padding: 5px; line-height: 0; color: #b91c1c;
  display: flex; align-items: center; justify-content: center;
}
.item-historico .excluir:hover { background: #fecaca; color: #7f1d1d; }
.item-historico .selos-canto {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  display: flex; gap: 4px;
}
.item-historico .pino {
  background: rgba(255,255,255,.94); border-radius: 20px;
  padding: 2px 7px; font-size: .68rem; font-weight: 700; line-height: 1.3;
}
.item-historico .pino.ajustado { color: #92400e; }
.item-historico .pino.conferir { color: #b45309; }
.item-historico .pino.chamado  { color: #1e40af; }
.item-historico .pino.arquivado { color: #475569; }   /* matriz apagada: post só-leitura */
/* botões de editar desabilitados (post arquivado) ficam esmaecidos e sem cursor */
.item-historico .ato:disabled, .item-historico .abrir:disabled { opacity: .45; cursor: not-allowed; }

/* --- info --- */
.item-historico .info { padding: 10px 12px 6px; }
.item-historico .info strong { display: block; font-size: .86rem; line-height: 1.25; }
/* número do post ("001-ago"): é por ele que a escola chama o post no WhatsApp,
   então precisa ser fácil de bater o olho — mas sem competir com o nome */
.item-historico .info .num-post {
  font-variant-numeric: tabular-nums; font-size: .74rem; font-weight: 700;
  color: var(--texto-suave); letter-spacing: .02em;
}
.item-historico .info .sub { color: var(--texto-suave); display: block; margin-top: 1px; }
.item-historico .baixar { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.item-historico .baixar a {
  background: #e2e8f0; color: var(--texto); text-decoration: none;
  border-radius: 6px; padding: 3px 8px; font-size: .68rem; font-weight: 600;
}
.item-historico .baixar a:hover { background: #cbd5e1; }

/* --- barra de ações --- */
/* 5 ações em grade 2 colunas (Corrigir | Ajuste fino / Flipar | Flipar aluno) + ⓘ
   ocupando a linha toda — harmônico com 4 botões do mesmo tamanho (Karlos 21/08) */
.item-historico .acoes-post {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px;
  border-top: 1px solid var(--borda); margin-top: auto;
}
.item-historico .acoes-post .ato { width: 100%; text-align: center; }
.item-historico .acoes-post .ato.detalhes { grid-column: 1 / -1; width: 100%; }
.item-historico .ato {
  border: 1px solid var(--borda); background: #f8fafc; color: var(--texto);
  border-radius: 8px; padding: 6px 8px; font-size: .72rem; font-weight: 600;
  cursor: pointer; line-height: 1;
}
.item-historico .ato.corrigir { }
.item-historico .ato.flipar.ativo, .item-historico .ato.flipar-aluno.ativo { background: var(--azul-claro); color: #fff; border-color: var(--azul-claro); }
.item-historico .ato.ajustar  { }
.item-historico .ato:hover { background: #eef2f7; border-color: var(--azul-claro); }
.item-historico .ato.detalhes { text-align: center; }
.item-historico .ato.detalhes.aberto { background: var(--azul); color: #fff; border-color: var(--azul); }

/* --- painel de detalhes (abre no ⓘ) --- */
.item-historico .detalhes-post {
  padding: 8px 12px 12px; border-top: 1px dashed var(--borda);
  font-size: .72rem; color: var(--texto-suave); background: #fbfcfe;
}
.item-historico .det-linha { margin: 3px 0; }
.item-historico .det-linha.alerta { color: #b45309; font-weight: 600; }
.item-historico .det-linha b { color: var(--texto); }
.item-historico .det-datas { margin: 2px 0 4px; padding-left: 18px; }
.item-historico .det-datas li { margin: 1px 0; }

.filtros {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; font-size: .85rem;
}
.filtros .cresce { flex: 1; }
.filtros label { display: flex; align-items: center; gap: 6px; }
.filtros select {
  border: 1px solid var(--borda); border-radius: 8px; padding: 6px 9px;
  font-size: .85rem;
}
.grupo-filtro { display: flex; gap: 3px; }
.grupo-filtro button {
  border: 1px solid var(--borda); background: var(--cartao);
  padding: 6px 13px; border-radius: 8px; cursor: pointer;
  font-size: .82rem; color: var(--texto-suave);
}
.grupo-filtro button:hover { background: #eef2f7; }
.grupo-filtro button.ativo {
  background: var(--azul-claro); color: #fff; border-color: var(--azul-claro);
}
#contagem-historico { color: var(--texto-suave); font-weight: 400; font-size: .85rem; }

.paginacao {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 18px; font-size: .84rem; color: var(--texto-suave);
}
.paginacao button {
  border: 1px solid var(--borda); background: var(--cartao);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: .82rem;
}
.paginacao button:hover:not(:disabled) { background: #eef2f7; }
.paginacao button:disabled { opacity: .4; cursor: default; }

@media (max-width: 980px) {
  .aluno { grid-template-columns: 110px 1fr; }
  .aluno-col-resultado { grid-column: 1 / -1; }
}

/* ---------- navegação ---------- */

.menu-nav { display: flex; gap: 6px; align-items: center; }
.menu-nav a { color: inherit; text-decoration: none; }   /* base p/ links aninhados (sair) */
/* Matriz/Inserir/Admin = botões com a MESMA pegada dos cards de camada
   (borda 1.5px + superfície + hover), só nos filhos diretos da barra. */
.menu-nav > a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--texto-suave);
  font-weight: 600;
  font-size: .88rem;
  padding: 7px 14px;
  border-radius: var(--raio-sm);
  border: 1.5px solid var(--borda);
  background: var(--superficie-2);
  transition: border-color .12s, background .12s, color .12s;
}
.menu-nav > a:hover { border-color: var(--borda-forte); background: var(--cartao); color: var(--texto); }
.menu-nav > a.ativo { border-color: var(--marca); background: var(--marca-suave); color: var(--marca); }

/* ---------- editor da matriz (Konva) ---------- */

main.largo { max-width: 1600px; }

/* moldura "app shell" do editor (pegada Canva) — toolbar, subbar e painéis num cartão só */
.editor-shell {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-md);
  overflow: hidden;
}
.editor-shell .toolbar {
  margin: 0; padding: 10px 14px;
  background: var(--cartao); border-bottom: 1px solid var(--borda);
}
.editor-shell .subbar {
  margin: 0; border: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--borda); background: var(--superficie-2);
}
.editor-shell .editor-layout { padding: 16px; background: var(--superficie-2); }
.editor-shell .coluna-esq { position: static; }
/* o canvas ganha cara de workspace (xadrez suave, como no Canva) */
.editor-shell .coluna-canvas {
  background:
    linear-gradient(0deg, var(--superficie-3), var(--superficie-3)),
    repeating-linear-gradient(45deg, #e7ecf5 0 10px, #eef2f9 10px 20px);
  border: 1px solid var(--borda); border-radius: var(--raio-lg);
  padding: 22px; min-height: 420px;
  /* 'safe center' centraliza quando cabe, mas encosta no início quando o zoom
     estoura — senão a rolagem não alcança o canto de cima/esquerda */
  justify-content: safe center;
  max-height: calc(100vh - 210px);   /* vira área de rolagem própria p/ o zoom */
  overflow: auto;
}
/* mãozinha (pan): arrastar rola a área; os palcos ficam inertes p/ não mover camadas */
.editor-shell .coluna-canvas.modo-mao { cursor: grab; }
.editor-shell .coluna-canvas.modo-mao:active { cursor: grabbing; }
.editor-shell .coluna-canvas.modo-mao .palco { pointer-events: none; }
/* grupo do zoom na barra */
.zoom-ctrl { display: inline-flex; align-items: center; gap: 4px; }
.zoom-ctrl #btn-zoom-nivel { min-width: 54px; font-variant-numeric: tabular-nums; }

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 14px;
}
.toolbar label { display: flex; align-items: center; gap: 8px; }
.toolbar .cresce { flex: 1; }
.btn.ativo { background: var(--marca); color: #fff; border-color: var(--marca); }
.btn.arquivo { cursor: pointer; display: inline-block; }
.btn.bloco { display: block; width: 100%; margin-top: 10px; text-align: center; }

.subbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: 9px 14px;
  margin: 0 0 18px;
  font-size: .84rem;
  box-shadow: var(--sombra-sm);
}
.subbar label { display: flex; align-items: center; gap: 6px; }
.subbar select, .subbar input[type="number"] {
  padding: 6px 9px; border-radius: 8px; border: 1px solid var(--borda);
  font-size: .84rem;
}
.subbar .cresce { flex: 1; }
.subbar .sep { width: 1px; height: 22px; background: var(--borda); }
.btn.pequeno { padding: 6px 12px; font-size: .82rem; }

.abas { display: flex; gap: 4px; background: var(--superficie-3);
  padding: 4px; border-radius: var(--raio-md); }
.aba {
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  color: var(--texto-suave);
  transition: background .14s, color .14s;
}
.aba:hover { background: rgba(255, 255, 255, .6); color: var(--texto); }
.aba.ativa { background: var(--cartao); color: var(--marca); border-color: transparent;
  box-shadow: var(--sombra-sm); }

.linha-formato {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--borda); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 7px; font-size: .86rem;
}
.linha-formato .medida { color: var(--texto-suave); margin-left: auto; font-size: .78rem; }
.linha-formato .tag {
  background: var(--amarelo); color: var(--azul);
  font-size: .66rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}
.titulo-secao { margin: 20px 0 10px; font-size: .9rem; }
.form-add { display: flex; flex-direction: column; gap: 9px; }
.form-add select, .form-add input {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borda);
  font-size: .86rem;
}
#custom-medidas { display: flex; align-items: center; gap: 8px; }
#custom-medidas input { flex: 1; min-width: 0; }

.dica.atalho { margin-top: 9px; font-size: .74rem; }

.regra {
  display: flex; gap: 5px; align-items: center; margin-bottom: 6px;
}
.regra select, .regra input {
  border: 1px solid var(--borda); border-radius: 7px;
  padding: 5px 7px; font-size: .78rem; min-width: 0; flex: 1;
}
.regra .btn { padding: 4px 9px; font-size: .74rem; flex: 0 0 auto; }
#resumo-condicao { margin-top: 8px; font-size: .74rem; line-height: 1.45; }

.alinhar { margin-bottom: 12px; }
.titulo-alinhar {
  display: block; font-size: .74rem; color: var(--texto-suave); margin-bottom: 5px;
}
.alinhar-botoes button { font-size: 1rem; padding: 4px 0; }

.grupo-botoes { display: flex; gap: 3px; }
.grupo-botoes button {
  flex: 1; border: 1px solid var(--borda); background: #f8fafc;
  border-radius: 7px; padding: 5px 0; cursor: pointer; font-size: .9rem;
}
.grupo-botoes button:hover { background: #eef2f7; }
.grupo-botoes button svg { display: block; margin: 0 auto; color: #334155; }
.grupo-botoes button.ativo svg { color: #fff; }
.grupo-botoes button.ativo {
  background: var(--azul-claro); color: #fff; border-color: var(--azul-claro);
}

.drawer-conteudo.largo { width: 720px; }
.barra-comparar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 14px; border-bottom: 1px solid var(--borda); margin-bottom: 12px;
  font-size: .82rem;
}
.barra-comparar label { display: flex; align-items: center; gap: 6px; }
.barra-comparar select {
  border: 1px solid var(--borda); border-radius: 7px; padding: 5px 8px; font-size: .82rem;
}
.barra-comparar .cresce { flex: 1; }

.grupo-dif { margin-bottom: 16px; }
.grupo-dif h4 {
  font-size: .82rem; color: var(--azul-claro); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}
.linha-dif {
  display: grid; grid-template-columns: 20px 150px 1fr 110px;
  align-items: center; gap: 8px;
  padding: 6px 9px; border: 1px solid var(--borda); border-radius: 8px;
  margin-bottom: 4px; font-size: .78rem; cursor: pointer;
}
.linha-dif:hover { background: #f8fafc; }
.linha-dif.sem-ref { opacity: .5; cursor: not-allowed; }
.linha-dif .prop { font-weight: 600; }
.linha-dif .valores { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--texto-suave); }
.linha-dif .valores .ref { color: var(--azul-claro); }
.linha-dif .virar { color: #16a34a; font-weight: 600; text-align: right; }

.elemento {
  display: grid; grid-template-columns: 54px 1fr auto;
  align-items: center; gap: 11px;
  border: 1px solid var(--borda); border-radius: 11px;
  padding: 9px 12px; margin-bottom: 8px;
}
.elemento.ligado { border-color: #16a34a; background: #f0fdf4; }
.elemento img {
  width: 54px; height: 54px; object-fit: contain;
  background: repeating-conic-gradient(#eef2f7 0% 25%, #fff 0% 50%) 50%/12px 12px;
  border-radius: 7px;
}
.elemento-info { min-width: 0; font-size: .82rem; }
.elemento-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elemento-info span { color: var(--texto-suave); font-size: .73rem; display: block; }
.elemento-info .tag-var { color: #b45309; }
.interruptor {
  border: none; border-radius: 999px; padding: 6px 14px;
  font-size: .73rem; font-weight: 700; cursor: pointer;
  background: #e2e8f0; color: var(--texto-suave);
}
.interruptor.on { background: #16a34a; color: #fff; }

.editor-layout {
  display: grid;
  grid-template-columns: 288px 1fr 300px;
  gap: 18px;
  align-items: start;
}

.coluna-esq { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 14px; }
.coluna-dir { display: flex; flex-direction: column; gap: 16px; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: 13px 14px;
  box-shadow: var(--sombra-sm);
}
.cartao h3 { font-size: .92rem; font-weight: 700; margin-bottom: 10px; color: var(--texto); }

details.cartao > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary h3 { margin-bottom: 0; }
details.cartao > summary::before {
  content: "▸";
  color: var(--texto-suave);
  font-size: .78rem;
  transition: transform .15s;
}
details.cartao[open] > summary::before { content: "▾"; }
details.cartao[open] > summary { margin-bottom: 10px; }
#props-alvo {
  color: var(--azul-claro); font-size: .78rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartao h3 small { color: var(--texto-suave); font-weight: 400; font-size: .74rem; }
.cartao h4 { font-size: .68rem; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; margin: 14px 0 9px; color: var(--texto-fraco); }

.camadas { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.camada {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 7px;
  border-radius: var(--raio-sm);
  font-size: .82rem;
}
.camada:hover { background: var(--superficie-2); }
.camada.sel { background: #fff5e6; box-shadow: inset 3px 0 0 var(--acento-selecao); }
.camada .nome { flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camada button {
  background: none; border: none; cursor: pointer; font-size: .8rem;
  padding: 3px; border-radius: 5px; line-height: 1; flex: none;
}
/* declutter: só olho+cadeado ficam; duplicar/excluir/mover surgem no hover */
.camada .dup, .camada .del, .camada .mover {
  opacity: 0; width: 0; padding: 0; overflow: hidden; transition: opacity .12s;
}
.camada:hover .dup, .camada:hover .del, .camada:hover .mover,
.camada.sel .dup, .camada.sel .del, .camada.sel .mover,
.camada:focus-within .dup, .camada:focus-within .del, .camada:focus-within .mover {
  opacity: 1; width: auto; padding: 3px;
}
.camada button:hover:not(:disabled) { background: #e2e8f0; }
.camada button:disabled { opacity: .25; cursor: default; }
/* botões de adicionar camada: grid compacto de 4 cards (mesma pegada dos cards
   Trocar/Do cliente/Do sistema) — antes era um flex-row que cortava o 4º */
.acoes-camada { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.add-camada {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px; font-size: 11px; font-weight: 600; line-height: 1.1;
  border: 1.5px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie-2); color: var(--texto); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.add-camada:hover { border-color: var(--borda-forte); background: var(--cartao); }
.add-camada .ic { font-size: 17px; line-height: 1; }

/* lista do "Vincular camadas" */
.vinc-linha { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--borda); }
.vinc-nome { flex: 1; font-size: 13px; color: var(--texto); }
.vinc-linha select { max-width: 200px; }
.camada .del:hover { background: #fecaca; }
.camada[draggable="true"] { cursor: grab; }
.camada.arrastando { opacity: .4; }
.camada.alvo { box-shadow: inset 0 2px 0 var(--azul-claro); }
.elemento-acoes { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.elemento-acoes .btn { white-space: nowrap; }
.form-texto {
  margin-top: 10px; padding: 10px; border: 1px solid var(--borda);
  border-radius: 10px; background: #f8fafc; font-size: .8rem;
}
.form-texto[hidden] { display: none; }
.form-texto label { display: block; color: var(--texto-suave); margin-bottom: 5px; }
.form-texto select, .form-texto input {
  width: 100%; border: 1px solid var(--borda); border-radius: 7px;
  padding: 6px 8px; font-size: .82rem; margin-bottom: 7px;
}
.form-texto-acoes { display: flex; gap: 6px; }
.camada.sub {
  display: grid;
  grid-template-columns: 26px 1fr;
  font-size: .76rem;
  color: var(--texto-suave);
  padding-left: 12px;
}
.camada.sub .tronco { text-align: center; opacity: .5; }
.camada.sub.sel { background: #fef3c7; color: var(--texto); }
.camada.sub.vazio .nome { opacity: .55; }
.camada.sub .nome em { font-size: .68rem; font-style: normal; color: #b45309; }

.coluna-canvas {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.bloco-formato {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: 12px;
  box-shadow: var(--sombra-sm);
}
.formato-topo {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px; font-size: .82rem;
}
.formato-topo span { color: var(--texto-suave); font-size: .74rem; margin-left: auto; }
.fechar-formato {
  border: none; background: #e2e8f0; color: var(--texto-suave);
  border-radius: 6px; width: 20px; height: 20px; cursor: pointer;
  font-size: .7rem; line-height: 1; padding: 0;
}
.fechar-formato:hover { background: #fecaca; color: #b91c1c; }
.espalhar { margin-top: 8px; }
.formato-topo .sub { color: var(--texto-suave); font-size: .7rem; font-style: normal; }
.bloco-formato.atual { border-color: var(--azul-claro); box-shadow: 0 0 0 2px rgba(29,78,216,.14); }
.bloco-formato.focado { border-color: var(--acento-selecao); box-shadow: 0 0 0 2px rgba(245,158,11,.22); }
.bloco-formato.focado .formato-topo strong { color: #b45309; }
#camadas-formato { color: #b45309; font-style: normal; font-size: .8rem; font-weight: 600; }
.bloco-formato.atual .formato-topo strong { color: var(--azul-claro); }
.formato-topo strong { cursor: pointer; }
.palco { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(15,23,42,.16); }
.formato-rodape { margin-top: 8px; min-height: 18px; font-size: .74rem; }
.formato-rodape .travado { color: #b45309; }

.prop-linha {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.prop-linha > label { color: var(--texto-suave); font-size: .78rem; font-weight: 600; }
.prop-linha input, .prop-linha select {
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  padding: 7px 9px;
  font-size: .82rem;
  width: 100%;
  min-width: 0;
  background: var(--cartao);
  color: var(--texto);
}
.prop-linha input:focus, .prop-linha select:focus {
  outline: 2px solid var(--marca); outline-offset: 0; border-color: transparent;
}
.prop-linha input[type="color"] { padding: 2px; height: 32px; }

.num-wrap { display: flex; align-items: center; gap: 4px; }
.num-wrap button {
  width: 27px; height: 30px; border: 1px solid var(--borda-forte);
  background: var(--superficie-3); border-radius: var(--raio-sm); cursor: pointer;
  font-size: .95rem; color: var(--texto-suave); flex: none;
}
.num-wrap button:hover { background: #e2e8f0; color: var(--texto); }
.num-wrap input { flex: 1; min-width: 0; text-align: center; }

/* texto da camada: exemplo do preview ou texto fixo */
.texto-wrap { display: flex; align-items: center; gap: 4px; }
.texto-wrap input, .texto-wrap select { flex: 1; min-width: 0; }
.texto-wrap button {
  width: 26px; height: 26px; border: 1px solid var(--borda);
  background: #f8fafc; border-radius: 6px; cursor: pointer; font-size: .85rem;
}
.texto-wrap button:hover { background: #e2e8f0; }
.bloco-prop { margin-bottom: 8px; }
.marca-teste {
  background: #fef3c7; color: #92400e; border-radius: 4px;
  padding: 0 4px; font-size: .64rem; font-weight: 700; vertical-align: middle;
}

/* gaveta de fontes */
.drawer {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
  display: flex; justify-content: flex-end; z-index: var(--z-drawer);
}
.drawer[hidden] { display: none; }
.drawer-conteudo {
  background: var(--cartao); width: 440px; max-width: 92vw; height: 100%;
  padding: 22px 24px; overflow-y: auto;
  border-radius: var(--raio-xl) 0 0 var(--raio-xl);
  box-shadow: var(--sombra-xl);
}
.drawer-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.drawer-topo h3 { font-size: 1.02rem; }
.dropzone-fontes {
  display: block; border: 2px dashed var(--borda-forte); border-radius: var(--raio-md);
  padding: 26px; text-align: center; cursor: pointer; margin: 14px 0;
  color: var(--texto-suave); font-size: .88rem;
  transition: border-color .14s, background .14s;
}
.dropzone-fontes:hover { border-color: var(--marca); background: var(--marca-suave); }
.dropzone-fontes.ativo { border-color: var(--marca); background: var(--marca-suave); }
.familia {
  border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; font-size: .84rem;
}
.familia span { color: var(--texto-suave); font-size: .76rem; margin-left: 8px; }
.familia .pesos { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.familia code {
  background: #f1f5f9; border-radius: 5px; padding: 2px 6px; font-size: .72rem;
}

#aviso {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--azul); color: #fff; padding: 11px 22px;
  border-radius: var(--raio-md); font-size: .88rem; z-index: var(--z-toast);
  box-shadow: var(--sombra-lg);
}
#aviso.erro { background: var(--erro-escuro); }
#aviso[hidden] { display: none; }

/* ---- gaveta de Selos de colocação/série (Fase 3) ---- */
#grade-selos { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.selo-card { border: 1px solid var(--borda); border-radius: var(--raio-md);
  padding: 8px; background: var(--superficie-2); text-align: center; width: 94px; }
.selo-thumb { height: 74px; border-radius: var(--raio-sm); overflow: hidden;
  display: grid; place-items: center;
  background: repeating-conic-gradient(#efece6 0% 25%, #fff 0% 50%) 50% / 12px 12px; }
.selo-thumb img { max-width: 100%; max-height: 100%; display: block; }
.selo-n { margin-top: 6px; font-weight: 700; font-size: .92rem; color: var(--texto); }
.linha-selo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.linha-selo input[type="number"] { width: 84px; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm); padding: 8px 10px; font-size: .9rem; }
/* fila de artes do multi-upload: thumb + nº + nome, uma por linha */
.selo-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.selo-row .selo-mini { width: 44px; height: 44px; flex: none; border-radius: var(--raio-sm);
  overflow: hidden; display: grid; place-items: center; border: 1px solid var(--borda);
  background: repeating-conic-gradient(#efece6 0% 25%, #fff 0% 50%) 50% / 10px 10px; }
.selo-row .selo-mini img { max-width: 100%; max-height: 100%; display: block; }
.selo-row input.selo-multi-n { width: 64px; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm); padding: 6px 8px; font-size: .9rem; }
.selo-row .selo-row-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ações no card do selo (trocar nº / excluir) */
.selo-acoes { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.selo-acoes input { width: 56px; text-align: center; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm); padding: 4px 6px; font-size: .85rem; }

/* ---- estado vazio do editor (cliente sem matriz) ---- */
.estado-vazio { text-align: center; padding: 56px 24px; max-width: 520px; margin: 0 auto; }
.estado-vazio .ev-emoji { font-size: 3rem; }
.estado-vazio h2 { font-size: 1.15rem; margin: 12px 0 6px; color: var(--texto); }
.estado-vazio .ev-acoes { display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; margin-top: 18px; }

/* ---- biblioteca Google no drawer de fontes (Fase 2) ---- */
#grade-google { max-height: 46vh; overflow-y: auto; margin: 8px 0 4px; }
.gfont-card {
  border: 1px solid var(--borda); border-radius: var(--raio-md);
  padding: 10px 12px; margin-bottom: 8px; background: var(--superficie-2);
}
.gfont-amostra {
  font-size: 1.4rem; color: var(--texto); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gfont-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px;
}

/* ---- barra flutuante na seleção (Fase C) ---- */
.barra-flutuante {
  position: fixed; z-index: var(--z-flutuante);
  display: flex; align-items: center; gap: 5px;
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio-full); padding: 5px 8px; box-shadow: var(--sombra-lg);
  touch-action: none; max-width: 96vw;
}
.barra-flutuante.dragging { cursor: grabbing; box-shadow: var(--sombra-xl); }
.barra-flutuante .fgrip {
  cursor: grab; color: var(--texto-fraco); font-size: 14px;
  letter-spacing: -2px; padding: 0 2px; user-select: none;
}
.barra-flutuante .fgrip:hover { color: var(--texto-suave); }
.barra-flutuante .fbsep { width: 1px; height: 20px; background: var(--borda); flex: none; }
.barra-flutuante .prop-linha { display: flex; align-items: center; gap: 5px; margin: 0; }
.barra-flutuante .prop-linha > label {
  width: auto; font-size: .66rem; font-weight: 700; color: var(--texto-fraco);
}
.barra-flutuante .num-wrap input { width: 60px; }   /* cabe 4 dígitos (ex.: 1080) */
.barra-flutuante select { max-width: 150px; padding: 6px 8px; }
.barra-flutuante input[type="color"] { width: 30px; height: 28px; padding: 2px; }
.barra-flutuante .btn { padding: 6px 9px; }

/* ---- tela cheia (Fase C): o shell ocupa a tela inteira ---- */
.editor-shell:fullscreen {
  border-radius: 0; border: none; height: 100%;
  display: flex; flex-direction: column; background: var(--superficie-2);
}
.editor-shell:fullscreen .editor-layout { flex: 1; overflow: auto; }
.editor-shell:fullscreen .coluna-canvas { min-height: auto; max-height: none; overflow: visible; }

@media (max-width: 1100px) {
  /* precisa da MESMA especificidade do .editor-shell .editor-layout, senão as
     3 colunas do desktop vencem no celular e estouram a largura */
  .editor-layout, .editor-shell .editor-layout { grid-template-columns: 1fr; }
  .coluna-esq, .coluna-dir { position: static; }
}
@media (max-width: 640px) {
  main, main.largo { padding: 14px 14px 44px; }
  body { overflow-x: hidden; }
  .toolbar, .subbar { gap: 6px 8px; }
  .toolbar { position: sticky; top: 0; z-index: var(--z-sticky);
    background: var(--fundo); padding: 8px 0; margin-bottom: 10px; }
  .editor-shell .toolbar { position: static; }
  .btn { padding: 10px 14px; }                 /* alvo de toque ≥44px */
  .editor-shell .editor-layout { padding: 12px; }
  .editor-shell .coluna-canvas { min-height: auto; padding: 14px; }
  .coluna-canvas { gap: 14px; }
  .bloco-formato, .cartao { width: 100%; }
  /* gaveta vira bottom-sheet no celular */
  .drawer { justify-content: center; align-items: flex-end; }
  .drawer-conteudo { width: 100%; max-width: 100%; height: 90vh;
    border-radius: var(--raio-xl) var(--raio-xl) 0 0; }
}

/* ------------------------------------------------------------ ajuste rápido
   Mexer num post só, sem tocar na matriz. O painel é igual em qualquer
   aparelho: touchpad para arrastar grosso, setinhas para o fino, barra para o
   tamanho — assim não é preciso adivinhar se é celular ou computador. */


.modal {
  position: fixed; inset: 0; background: rgba(15,23,42,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 70; padding: 16px;
}
.modal-caixa {
  background: var(--cartao); border-radius: 14px; width: 100%;
  max-width: 760px; max-height: 94vh; overflow: auto; padding: 18px 20px 20px;
}
.modal-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.modal-topo h3 { font-size: 1rem; }
.modal-topo small { color: var(--texto-suave); font-weight: 500; }
.aviso-escopo {
  background: #fef3c7; border-left: 3px solid #f59e0b;
  padding: 7px 10px; border-radius: 6px; margin: 10px 0 14px;
}

.ajuste-corpo { display: flex; gap: 18px; flex-wrap: wrap; }
.ajuste-palco { flex: 1 1 260px; min-width: 220px; }
.ajuste-palco .abas { margin-bottom: 8px; flex-wrap: wrap; }
.ajuste-card {
  position: relative; width: 100%; border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(15,23,42,.16); background: #e2e8f0;
}
.ajuste-card img { width: 100%; display: block; }
#ajuste-alvos { position: absolute; inset: 0; }

.alvo-ajuste {
  position: absolute; cursor: pointer; border-radius: 3px;
  border: 1px dashed rgba(29,78,216,.75);
  background: rgba(29,78,216,.06);
  transition: background .12s, border-color .12s;
}
.alvo-ajuste:hover { background: rgba(29,78,216,.16); }
/* contorno forte e véu leve: destaca o elemento sem esconder a arte */
.alvo-ajuste.escolhido {
  border: 2px solid #f59e0b; background: rgba(245,158,11,.18);
  box-shadow: 0 0 0 2px rgba(245,158,11,.35);
}
.alvo-ajuste.mexido { border-color: #b45309; border-style: solid; }

.ajuste-painel { flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px; }
.ajuste-alvo-nome {
  font-weight: 700; font-size: .86rem; text-align: center;
  background: #fef3c7; border-radius: 7px; padding: 5px;
}

.touchpad {
  height: 120px; border: 2px dashed var(--borda); border-radius: 10px;
  background: #f8fafc; display: flex; align-items: center; justify-content: center;
  color: var(--texto-suave); font-size: .74rem; text-align: center;
  cursor: grab; touch-action: none; user-select: none;
}
.touchpad.ativo { cursor: grabbing; background: #e0e7ff; border-color: var(--azul-claro); }

.setas-ajuste {
  display: grid; grid-template-columns: repeat(3, 38px);
  grid-template-rows: repeat(3, 34px); gap: 5px; justify-content: center;
}
.setas-ajuste button {
  width: 100%; height: 100%; border: 1px solid var(--borda); background: #f8fafc;
  border-radius: 8px; cursor: pointer; font-size: 1.15rem; line-height: 1;
  touch-action: none; display: flex; align-items: center; justify-content: center;
}
.setas-ajuste button:hover { background: #e2e8f0; }
.setas-ajuste button:active { background: #dbe4f0; }
/* cruz: subir em cima-centro, esquerda/direita nas laterais, descer embaixo */
.setas-ajuste button:nth-child(1) { grid-area: 1 / 2; }  /* ↑ subir  */
.setas-ajuste button:nth-child(2) { grid-area: 2 / 1; }  /* ← esquerda */
.setas-ajuste button:nth-child(3) { grid-area: 2 / 3; }  /* → direita */
.setas-ajuste button:nth-child(4) { grid-area: 3 / 2; }  /* ↓ descer */

.barra-tamanho { display: flex; align-items: center; gap: 6px; }
.barra-tamanho button {
  flex: 1; height: 32px; border: 1px solid var(--borda); background: #f8fafc;
  border-radius: 7px; cursor: pointer; font-size: 1rem; touch-action: none;
}
.barra-tamanho button:hover { background: #e2e8f0; }
.barra-tamanho span {
  min-width: 54px; text-align: center; font-size: .8rem; font-weight: 600;
}

#wrap-ambos {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--texto-suave);
}
#wrap-ambos input { margin: 0; }

.ajuste-acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--borda);
}
.ajuste-acoes .cresce { flex: 1; }

@media (max-width: 640px) {
  .ajuste-painel { flex: 1 1 100%; }
  .modal-caixa { padding: 14px; }
}

/* a cabeça deste aluno não pôde ser medida: o card saiu pelo enquadramento
   antigo e vale uma conferida. Falhar em silêncio seria pior. */
/* margem de proteção: faixa de segurança em volta do card */
.margem-protecao {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda);
  display: grid; grid-template-columns: 1fr auto; gap: 6px 8px;
  align-items: center;
}
.margem-protecao > label { font-size: .78rem; color: var(--texto-suave); cursor: help; }
.margem-protecao .num-wrap { width: 92px; }
.margem-protecao .num-wrap input { text-align: right; }
.margem-protecao .num-wrap span { font-size: .74rem; color: var(--texto-suave); }
.margem-protecao .dica { grid-column: 1 / -1; margin: 0; font-size: .72rem; }
.margem-protecao .dica.ok { color: #15803d; }
.margem-protecao .dica.alerta { color: #b91c1c; font-weight: 600; }

/* ---------------------------------------------- Importar PSD (assistente) */
.psd-cola {
  background: #eef4ff; border: 1px solid #cfe0ff; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 4px; font-size: .86rem; line-height: 1.5;
}
.psd-cola p { margin: 0 0 6px; }
.psd-cola p:last-child { margin-bottom: 0; }
.psd-cola-dica { color: #2b4a7a; }
.psd-cola code {
  background: #fff; border: 1px solid #cfe0ff; border-radius: 5px;
  padding: 0 5px; font-size: .82em;
}
#psd-camadas { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.psd-camada {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px; border: 1px solid var(--borda, #e5e9f0);
  border-radius: 12px; background: var(--cartao, #fff);
}
.psd-thumb {
  position: relative;
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  /* fundo ESCURO (xadrez sutil) — texto branco/claro das camadas fica legível.
     O botão ◐ alterna para o xadrez claro (.claro) quando o conteúdo é escuro. */
  background: repeating-conic-gradient(#3a4150 0 25%, #4a5468 0 50%) 0 0 / 12px 12px;
  display: flex; align-items: center; justify-content: center;
}
.psd-thumb.claro {
  background: repeating-conic-gradient(#e9edf4 0 25%, #fff 0 50%) 0 0 / 12px 12px;
}
.psd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.psd-bg {
  position: absolute; bottom: 2px; right: 2px; width: 18px; height: 18px;
  border: none; border-radius: 50%; cursor: pointer; padding: 0; line-height: 1;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.psd-bg:hover { background: rgba(0,0,0,.8); }
.psd-thumb.claro .psd-bg { background: rgba(0,0,0,.4); }
.psd-sem { color: #9aa5b5; font-weight: 700; }
.psd-corpo { flex: 1; min-width: 0; }
.psd-nome-cam { font-weight: 600; margin-bottom: 6px; }
.psd-nome-cam small { color: var(--texto-suave, #8a93a6); font-weight: 400; }
.psd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.psd-chip {
  border: 1px solid #d7deea; background: #f7f9fc; color: #3a4457;
  border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; line-height: 1.4;
}
.psd-chip:hover { border-color: #9db4e0; }
.psd-chip.fixa { color: #6b7385; }
.psd-chip.ativo { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.psd-chip.fixa.ativo { background: #475569; border-color: #475569; }
/* OS DOIS GRUPOS de cada camada: [🔤 Texto ▾] [🖼️ Imagem ▾] [⨯ Ignorar].
   Ideia do Karlos (24/08) — antes eram 17 chips soltos em fileira por camada.
   A divisão é a mesma do motor: fixo (sai igual em todo card) × dinâmico. */
.psd-grupos { display: flex; flex-wrap: wrap; gap: 6px; }
.psd-grupo {
  border: 1px solid #d7deea; background: #fff; color: #3a4457;
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; line-height: 1.4;
}
.psd-grupo:hover { border-color: #9db4e0; background: #f7f9fc; }
.psd-grupo.aberto { border-color: #1d4ed8; box-shadow: 0 0 0 2px #dbe5fb; }
.psd-grupo.ativo { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.psd-grupo.ignorar { font-weight: 500; color: #6b7385; }
.psd-grupo.ignorar.ativo { background: #64748b; border-color: #64748b; color: #fff; }
/* o submenu que abre embaixo do grupo escolhido */
.psd-menu {
  margin-top: 8px; padding: 10px 12px; border: 1px solid #e2e8f2;
  border-radius: 8px; background: #fbfcfe;
  display: flex; flex-direction: column; gap: 6px;
}
.psd-sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8a93a6; margin-top: 4px;
}
.psd-sub:first-child { margin-top: 0; }
/* "＋ criar um campo novo": o campinho abre ali mesmo, sem sair do assistente */
.psd-novo { display: flex; gap: 6px; margin-top: 6px; }
/* valor de EXEMPLO do campo dinâmico, digitado ali mesmo no assistente (26/08) */
.psd-exemplo { display: flex; align-items: center; gap: 6px; margin-top: 6px;
               flex-basis: 100%; }
.psd-exemplo label { font-size: 11px; color: var(--texto-2, #667); white-space: nowrap; }
.psd-exemplo input { flex: 1; min-width: 120px; padding: 4px 8px;
                     border: 1px solid var(--linha, #cbd3df); border-radius: 6px;
                     font-size: 12.5px; }
.psd-novo input {
  flex: 1; min-width: 0; border: 1px solid #cbd5e6; border-radius: 6px;
  padding: 5px 9px; font-size: 12.5px;
}
/* "esse campo já existe": avisa e aponta o botão certo (pedido do Karlos 24/08) */
.psd-repetido {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; padding: 8px 10px; border-radius: 7px;
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  font-size: 12.5px; line-height: 1.45;
}
@keyframes psd-pisca {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,78,216,0); }
  35%      { box-shadow: 0 0 0 4px rgba(29,78,216,.35); }
}
.psd-chip.piscando {
  animation: psd-pisca 1s ease-in-out 2;
  border-color: #1d4ed8; color: #1d4ed8; font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .psd-chip.piscando { animation: none; box-shadow: 0 0 0 3px rgba(29,78,216,.3); }
}
#psd-aviso.ok { color: #15803d; }
#psd-aviso.alerta { color: #b91c1c; font-weight: 600; }
#psd-fontes-status.ok { color: #15803d; font-weight: 600; }
#psd-fontes-status.erro { color: #b91c1c; font-weight: 600; }
/* "Vincular camadas" reusa o #drawer-psd: esconde os passos de IMPORTAR,
   mantendo só a lista de camadas (thumbs + chips + ◐) e o botão aplicar */
#drawer-psd.modo-vincular #psd-passo-fontes,
#drawer-psd.modo-vincular #psd-ajuda-upload,
#drawer-psd.modo-vincular #dz-psd,
#drawer-psd.modo-vincular #psd-nome-linha { display: none; }
@media (max-width: 640px) {
  .psd-camada { flex-direction: column; }
  .psd-chip { padding: 8px 12px; font-size: 13px; }   /* alvo de toque maior no celular */
}

/* ---------------------------------------------------------- janela (modal)
   "Novo padrão": janela centralizada com botões de formato — no lugar dos dois
   prompts do navegador (queixa de preguiça do Karlos). Mesmo DNA Sereno. */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 27, 22, .42); padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); box-shadow: 0 24px 60px rgba(31, 27, 22, .22);
  width: 100%; max-width: 460px; padding: 22px;
}
.modal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-topo h3 { margin: 0; }
.modal .rotulo-campo { font-size: 13px; color: var(--texto-suave); margin: 16px 0 8px; font-weight: 600; }
.grade-formatos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.formato-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 8px; border: 1.5px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie-2); cursor: pointer; font-weight: 600; color: var(--texto);
  font-size: 14px; transition: border-color .12s, background .12s;
}
.formato-card small { color: var(--texto-fraco); font-weight: 400; font-size: 11px; }
.formato-card:hover { border-color: var(--borda-forte); }
.formato-card.sel { border-color: var(--marca); background: var(--marca-suave); }
.formato-mini { border: 2px solid var(--texto-suave); border-radius: 3px; display: block; }
.fm-feed { width: 20px; height: 25px; }
.fm-story { width: 16px; height: 28px; }
.fm-quad { width: 24px; height: 24px; }
.fm-custom {
  width: 24px; height: 24px; border-style: dashed; display: flex;
  align-items: center; justify-content: center; color: var(--texto-suave); font-weight: 700;
}
#novo-custom { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--texto-suave); }
#novo-custom input { width: 92px; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
@media (max-width: 640px) {
  .grade-formatos { grid-template-columns: repeat(2, 1fr); }
  .modal-card { padding: 18px; }
}
.grade-escopo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.escopo-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px; border: 1.5px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie-2); cursor: pointer; font-weight: 600; color: var(--texto);
  font-size: 13px; transition: border-color .12s, background .12s;
}
.escopo-card small { color: var(--texto-fraco); font-weight: 400; font-size: 11px; }
.escopo-card:hover { border-color: var(--borda-forte); }
.escopo-card.sel { border-color: var(--marca); background: var(--marca-suave); }
@media (max-width: 640px) { .grade-escopo { grid-template-columns: 1fr; } }

/* 3 opções da foto de referência (cards lado a lado, clean — pegada do formato) */
.grade-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.foto-op {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border: 1.5px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie-2); cursor: pointer; color: var(--texto);
  font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center;
  transition: border-color .12s, background .12s;
}
.foto-op:hover { border-color: var(--borda-forte); background: var(--cartao); }
.foto-op .foto-op-ic { font-size: 18px; line-height: 1; }

/* Escala com âncora (Propriedades de imagem/forma) */
.bloco-escala .rotulo-escala { display: block; font-size: .78rem; color: var(--texto-suave); margin-bottom: 6px; }
.grade-ancora { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.ancora-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border: 1.5px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie-2); cursor: pointer; color: var(--texto);
  font-size: 13px; line-height: 1; transition: border-color .12s, background .12s;
}
.ancora-btn small { font-size: 10px; color: var(--texto-fraco); }
.ancora-btn:hover { border-color: var(--borda-forte); }
.ancora-btn.sel { border-color: var(--marca); background: var(--marca-suave); }
.escala-linha { display: flex; align-items: center; gap: 8px; }
.escala-linha input[type="range"] { flex: 1; min-width: 0; accent-color: var(--marca); }
.escala-linha .escala-pct { width: 56px; text-align: center; }

/* slider dos parâmetros numéricos (Tamanho, entre letras, etc.) — arraste, além do +/- */
/* o slider fica na COLUNA 2 (embaixo do número e dos botões +/−), não na do label */
.prop-slider { grid-column: 2; width: 100%; margin-top: 6px; accent-color: var(--marca); cursor: pointer; }

/* dica em lâmpada (economiza espaço nas Propriedades) */
.dica-lampada { margin: 4px 0; }
.btn-lampada {
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px;
  cursor: pointer; padding: 3px 9px; font-size: 12px; color: var(--texto-suave);
}
.btn-lampada:hover { border-color: var(--borda-forte); }
.btn-lampada.aberto { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-hover); }
.dica-lampada .dica { margin-top: 6px; }
/* ícones dos botões de adicionar camada */
.add-camada .ic { font-size: 13px; }

/* gaveta de selos em 3 passos (Karlos 21/08: "selecionar → conferir → vincular") */
.passo { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; }
.passo-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--azul-claro);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.passo-corpo { flex: 1; min-width: 0; }
.passo-corpo > b { display: block; margin-bottom: 4px; }
.selo-titulo-grade { margin: 18px 0 6px; font-size: .95rem; color: var(--texto-suave, #475569); }
.aviso-camada { background: #fff7ed; border: 1px solid #fdba74; color: #7c2d12; border-radius: var(--raio-md);
  padding: 10px 12px; margin: 0 0 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aviso-camada .btn { margin-left: auto; }
#btn-add-selo:disabled { opacity: .55; cursor: not-allowed; }