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

:root {
  --noite: #17130D;
  --tinta: #241D12;
  --dourado: #C79A3F;
  --luz: #FFEDBC;
  --alva: #FFF4D8;
  --creme: #FAF4E9;
  --dourado-sereno: #A08B5E;
  --dourado-tinta: #8A6F3A;
  --areia: #F1E7D2;
  --card: #F1E7D2;
  --borda: rgba(36, 29, 18, 0.12);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(36, 29, 18, 0.05), 0 6px 16px rgba(36, 29, 18, 0.05);
  --shadow-card-hover: 0 2px 4px rgba(36, 29, 18, 0.06), 0 20px 32px rgba(36, 29, 18, 0.12);
  --shadow-gold: 0 8px 20px rgba(199, 154, 63, 0.32);
  --shadow-gold-soft: 0 2px 8px rgba(199, 154, 63, 0.2);
  --ring-gold: 0 0 0 4px rgba(199, 154, 63, 0.16);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Hanken Grotesk', sans-serif;
  background: var(--creme);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.5;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

h1, h2, h3 {
  font-family: 'Spectral', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@keyframes entrada {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes crescer {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.4); }
}
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Sidebar (navegação lateral esquerda) */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content > main.container { flex: 1; min-width: 0; width: 100%; }

.sidebar {
  width: 236px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  background: rgba(250, 244, 233, 0.94);
  backdrop-filter: blur(6px);
  border-right: 1px solid var(--borda);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: width 0.25s var(--ease), padding 0.25s var(--ease);
}
.sidebar.colapsada { width: 76px; padding: 22px 12px; }

.sidebar-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}
.sidebar-logo {
  font-family: 'Spectral', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease, color 0.25s ease;
}
.sidebar.colapsada .sidebar-logo { opacity: 0; width: 0; }
.sidebar-colapsar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borda);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--tinta);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.25s var(--ease), background 0.2s ease;
}
.sidebar-colapsar:hover { opacity: 1; background: rgba(199, 154, 63, 0.12); }
.sidebar.colapsada .sidebar-colapsar { transform: rotate(180deg); }

.sidebar-links { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sidebar-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tinta);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.65;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.25s ease, background 0.25s var(--ease), color 0.25s ease;
}
.sidebar-links a svg { flex-shrink: 0; width: 19px; height: 19px; }
.sidebar-links a span { overflow: hidden; text-overflow: ellipsis; transition: opacity 0.2s ease; }
.sidebar.colapsada .sidebar-links a span { opacity: 0; width: 0; }
.sidebar-links a:hover {
  opacity: 1;
  color: var(--dourado-tinta);
  background: rgba(199, 154, 63, 0.12);
}
.sidebar-links a.active {
  opacity: 1;
  color: var(--dourado-tinta);
  background: rgba(199, 154, 63, 0.18);
  font-weight: 600;
}

@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 20; box-shadow: var(--shadow-card-hover); }
  .sidebar:not(.colapsada) { width: 220px; }
  .app-shell { display: block; }
}

/* Page header */
.page-header {
  padding: 48px 0 32px;
  animation: entrada 0.5s var(--ease) backwards;
}
.page-header .kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--dourado-tinta);
}
.page-header h1 {
  font-size: 36px;
  margin-top: 10px;
}
.page-header p.sub {
  margin-top: 10px;
  opacity: 0.75;
  font-size: 15px;
  max-width: 560px;
}

main { padding-bottom: 80px; }

/* KPI tiles */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.kpi-tile {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}
.kpi-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(199, 154, 63, 0.4);
}
.kpi-tile .valor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 28px;
  color: var(--dourado-tinta);
  white-space: normal;
  word-break: break-word;
  line-height: 1.15;
  transition: color 0.3s ease;
}
.kpi-tile:hover .valor { color: var(--dourado); }
.kpi-tile .rotulo {
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.75;
}
.kpi-tile .explicacao {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.55;
  line-height: 1.4;
}

/* Gráfico de receita (esboço) */
.grafico-receita {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  height: 260px;
  padding: 24px 16px 0;
  margin-top: 12px;
  position: relative;
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
}
.grafico-guia {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dashed var(--borda);
}
.barra-cliente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 68px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.barra-valor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
}
.barra {
  width: 100%;
  background: linear-gradient(180deg, var(--dourado) 0%, var(--dourado-tinta) 100%);
  border-radius: 8px 8px 0 0;
  transform-origin: bottom;
  animation: crescer 0.6s var(--ease) backwards;
  animation-delay: 0.1s;
  transition: opacity 0.2s ease, transform 0.25s var(--ease), filter 0.2s ease;
}
.barra:hover { opacity: 0.92; transform: scaleY(1.015); filter: brightness(1.05); }
.barra-nome {
  font-size: 12px;
  text-align: center;
  opacity: 0.75;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Section */
.secao { margin-bottom: 56px; }
.secao-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}
.secao-titulo h2 { font-size: 22px; }
.secao-titulo .conta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  opacity: 0.6;
}

/* Client cards */
.clientes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cliente-card {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}
.cliente-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(199, 154, 63, 0.4);
}
.cliente-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.cliente-card h3 { font-size: 20px; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: transform 0.25s var(--ease);
}
.status-badge:hover { transform: translateY(-1px); }
.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-ativo { background: rgba(199, 154, 63, 0.18); color: var(--dourado-tinta); }
.status-ativo::before { animation: pulsar 2s ease-in-out infinite; }
.status-negociacao { background: rgba(138, 111, 58, 0.14); color: var(--dourado-tinta); }
.status-lead { background: rgba(160, 139, 94, 0.18); color: var(--dourado-tinta); }
.status-pausado { background: rgba(36, 29, 18, 0.08); color: var(--tinta); opacity: 0.6; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  opacity: 0.85;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.tag:hover { opacity: 1; border-color: rgba(199, 154, 63, 0.5); }

.cliente-card p.resumo { font-size: 14px; opacity: 0.85; }

.cliente-card .proximo-passo {
  font-size: 13px;
  border-top: 1px solid var(--borda);
  padding-top: 12px;
  opacity: 0.8;
}
.cliente-card .proximo-passo strong {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dourado-tinta);
  margin-bottom: 4px;
}

.cliente-card .contato {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  opacity: 0.65;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cliente-card .pasta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  opacity: 0.4;
  word-break: break-all;
}
.lista-arquivos { display: flex; flex-direction: column; gap: 4px; }
.lista-arquivos a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--dourado-tinta);
  text-decoration: none;
  word-break: break-all;
}
.lista-arquivos a:hover { text-decoration: underline; }

/* Estado vazio / em construção */
.vazio, .em-construcao {
  border: 1px dashed var(--borda);
  border-radius: var(--radius-md);
  padding: 48px;
  text-align: center;
  transition: border-color 0.3s ease;
}
.vazio:hover, .em-construcao:hover { border-color: rgba(199, 154, 63, 0.4); }
.vazio p, .em-construcao p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.03em;
  opacity: 0.6;
}

footer {
  padding: 32px 0;
  border-top: 1px solid var(--borda);
  text-align: center;
}
footer p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  opacity: 0.4;
}
footer p.aviso-servidor {
  color: #a33;
  opacity: 0.85;
  margin-bottom: 6px;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s ease, opacity 0.2s ease, border-color 0.25s ease;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--dourado); color: var(--tinta); box-shadow: var(--shadow-gold-soft); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn-primary:active { transform: translateY(0) scale(0.97); }
.btn-secondary { background: transparent; color: var(--tinta); border: 1px solid var(--borda); }
.btn-secondary:hover { transform: translateY(-2px); border-color: var(--dourado-tinta); background: rgba(199, 154, 63, 0.06); }
.btn-ghost { background: transparent; color: var(--dourado-tinta); padding: 6px 12px; font-size: 13px; }
.btn-ghost:hover { background: rgba(199, 154, 63, 0.14); }
.btn-perigo { background: transparent; color: #a33; padding: 6px 12px; font-size: 13px; }
.btn-perigo:hover { background: rgba(170, 51, 51, 0.1); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; transform: none !important; box-shadow: none !important; }

.acoes-topo { display: flex; justify-content: flex-end; margin-bottom: -24px; gap: 12px; }

/* Formulário */
.form-panel {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 40px;
  box-shadow: var(--shadow-card);
  animation: entrada 0.35s var(--ease);
}
.form-panel h3 { font-size: 18px; margin-bottom: 18px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  background: var(--creme);
  color: var(--tinta);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: rgba(199, 154, 63, 0.4); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--dourado-tinta);
  box-shadow: var(--ring-gold);
  background: #fff;
}
.form-field textarea { resize: vertical; min-height: 60px; }
.form-acoes { display: flex; gap: 12px; margin-top: 20px; }
.form-erro {
  color: #a33;
  font-size: 13px;
  margin-top: 12px;
  display: none;
}
.form-erro.visivel { display: block; animation: entrada 0.3s var(--ease); }

/* Busca global — cliente + agenda + carrossel, no Painel */
.busca-global-wrap { position: relative; max-width: 480px; margin-bottom: 28px; }
.busca-global-resultados {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  max-height: 420px;
  overflow-y: auto;
  z-index: 20;
  padding: 8px;
}
.busca-global-grupo-titulo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
  padding: 10px 10px 4px;
}
.busca-global-item {
  display: block;
  padding: 9px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--tinta);
  transition: background 0.15s ease;
}
.busca-global-item:hover { background: var(--creme); }
.busca-global-item strong { display: block; font-size: 14px; font-weight: 600; }
.busca-global-item span { font-size: 12px; opacity: 0.6; }
.busca-global-vazio { padding: 18px; font-size: 13px; opacity: 0.6; text-align: center; }

/* Carrossel — linha editorial da semana */
.semana-editorial { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.semana-dia {
  min-height: 130px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.semana-dia.hoje { border-color: var(--dourado); border-width: 2px; padding: 9px; }
.semana-dia-cabecalho { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; }
.semana-dia-numero { font-family: 'Spectral', serif; font-size: 18px; font-weight: 500; margin-top: 2px; }
.semana-item {
  font-size: 11px;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--areia);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.semana-item:hover { background: var(--dourado); color: var(--tinta); }
.semana-item.sem-carrossel { cursor: default; opacity: 0.8; }
.semana-item.sem-carrossel:hover { background: var(--areia); color: inherit; }
.semana-vazio { font-size: 11px; opacity: 0.4; margin-top: auto; }

/* Agenda — alternância lista/calendário */
.vista-toggle { display: flex; gap: 8px; margin-bottom: 20px; }
.calendario-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.calendario-nav h2 { font-size: 20px; margin: 0; min-width: 190px; text-align: center; font-family: 'Spectral', serif; font-weight: 500; }
.calendario-semana-rotulos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  text-align: center;
}
.calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendario-dia {
  min-height: 100px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  padding: 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.calendario-dia:hover { border-color: var(--dourado-tinta); }
.calendario-dia.fora-do-mes { opacity: 0.4; background: var(--creme); }
.calendario-dia.hoje { border-color: var(--dourado); border-width: 2px; padding: 5px; }
.calendario-dia-numero { font-family: 'IBM Plex Mono', monospace; font-size: 12px; opacity: 0.6; }
.calendario-item {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--areia);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.calendario-item:hover { background: var(--dourado); color: var(--tinta); }
.calendario-item.item-atrasado { background: rgba(211, 71, 71, 0.15); color: #a33; }
.calendario-item.item-publicado { opacity: 0.55; text-decoration: line-through; }
.calendario-mais { font-size: 10px; opacity: 0.6; padding-left: 6px; cursor: pointer; }

/* Listas simples (agenda, contratos) */
.lista-simples { display: flex; flex-direction: column; gap: 12px; }
.linha-item {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.linha-item:hover {
  transform: translateY(-3px) translateX(2px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(199, 154, 63, 0.35);
}
.linha-item .info { display: flex; flex-direction: column; gap: 4px; }
.linha-item .info strong { font-size: 15px; }
.linha-item .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  opacity: 0.6;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.linha-item .acoes { display: flex; gap: 8px; align-items: center; }
.linha-item select {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-pill);
  background: var(--creme);
  color: var(--tinta);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.linha-item select:hover { border-color: rgba(199, 154, 63, 0.4); }
.linha-item select:focus { outline: none; border-color: var(--dourado-tinta); box-shadow: var(--ring-gold); }

/* Relatórios de perfil */
.relatorios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.relatorio-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}
.relatorio-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(199, 154, 63, 0.4);
}
.relatorio-card.selecionado-comparar { border-color: var(--dourado); border-width: 2px; }
.comparar-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-pill);
  padding: 5px 10px 5px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(23, 19, 13, 0.15);
}
.comparacao-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.comparacao-coluna {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comparacao-coluna h3 { font-size: 18px; margin-top: 4px; }
.comparacao-thumb { width: 100%; aspect-ratio: 1100 / 700; object-fit: cover; object-position: top; border-radius: var(--radius-sm); background: var(--areia); }
.comparacao-metricas { display: flex; gap: 18px; margin-top: 6px; }
.comparacao-metricas div { display: flex; flex-direction: column; }
.comparacao-metricas strong { font-size: 20px; font-family: 'Spectral', serif; font-weight: 500; }
.comparacao-metricas span { font-size: 11px; opacity: 0.6; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.05em; }
.relatorio-thumb-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--borda);
  cursor: pointer;
}
.relatorio-thumb {
  width: 100%;
  aspect-ratio: 1100 / 700;
  object-fit: cover;
  object-position: top;
  background: var(--areia);
  display: block;
  transition: transform 0.5s var(--ease), filter 0.35s ease;
}
.relatorio-card:hover .relatorio-thumb { transform: scale(1.05); filter: brightness(0.7); }
.relatorio-thumb-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alva);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
  text-shadow: 0 2px 8px rgba(23, 19, 13, 0.5);
}
.relatorio-card:hover .relatorio-thumb-hint { opacity: 1; transform: translateY(0); }
.relatorio-corpo { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.relatorio-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.relatorio-topo h3 { font-size: 18px; }
.relatorio-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  opacity: 0.65;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.relatorio-bio { font-size: 13px; opacity: 0.8; font-style: italic; }
.paleta-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  transition: transform 0.2s var(--ease), box-shadow 0.2s ease;
}
.swatch:hover { transform: scale(1.2) translateY(-2px); box-shadow: 0 4px 10px rgba(36, 29, 18, 0.18); }
.relatorio-analise {
  font-size: 14px;
  line-height: 1.6;
  border-top: 1px solid var(--borda);
  padding-top: 12px;
  margin-top: 4px;
}
.status-aguardando { background: rgba(160, 139, 94, 0.18); color: var(--dourado-tinta); }
.status-aguardando::before { animation: pulsar 2s ease-in-out infinite; }
.status-completo { background: rgba(199, 154, 63, 0.18); color: var(--dourado-tinta); }
.status-completo::before { animation: none; }

/* Gerador de carrossel — banco de imagens / upload */
.banco-imagens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 20px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  background: var(--creme);
}
.banco-imagens-grid.pequeno { max-height: 220px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.imagem-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s var(--ease);
}
.imagem-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imagem-tile:hover { transform: scale(1.03); }
.imagem-tile.selecionada { border-color: var(--dourado); }
.imagem-tile-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dourado);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s var(--ease);
}
.imagem-tile.selecionada .imagem-tile-check { opacity: 1; transform: scale(1); }

.dropzone {
  border: 1.5px dashed var(--borda);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.dropzone.sobre { border-color: var(--dourado); background: rgba(199, 154, 63, 0.06); }
.dropzone p { font-size: 14px; opacity: 0.85; }
.dropzone .dropzone-hint { font-size: 12px; opacity: 0.55; margin-top: 6px; }
.link-upload { color: var(--dourado-tinta); text-decoration: underline; cursor: pointer; font-weight: 600; }

.passo { display: flex; gap: 18px; margin-bottom: 32px; }
.passo:last-child { margin-bottom: 0; }
.passo-numero {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(199, 154, 63, 0.16);
  color: var(--dourado-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Spectral', serif;
  font-weight: 600;
  font-size: 15px;
}
.passo-corpo { flex: 1; min-width: 0; }
.passo-titulo { display: block; font-family: 'Spectral', serif; font-size: 17px; margin-bottom: 6px; }
.passo-dica { font-size: 13px; opacity: 0.65; margin-bottom: 14px; line-height: 1.5; }
.passo-resumo { font-size: 13px; opacity: 0.75; margin-top: 4px; margin-bottom: 16px; }
.passo #input-tema { max-width: 480px; }

.selecionadas-row { margin: 20px 0; }
.selecionadas-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; min-height: 4px; }
.selecionada-item { position: relative; width: 56px; height: 56px; cursor: grab; transition: opacity 0.2s ease, transform 0.2s var(--ease); }
.selecionada-item:active { cursor: grabbing; }
.selecionada-item.arrastando { opacity: 0.35; transform: scale(0.94); }
.selecionada-item-img { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-card); }
.selecionada-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.selecionada-remover {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #a33;
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s var(--ease);
}
.selecionada-remover:hover { transform: scale(1.15); }

/* Carrosséis existentes */
.carrosseis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.carrossel-card {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}
.carrossel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: rgba(199, 154, 63, 0.4); }
.carrossel-card-thumb { width: 100%; aspect-ratio: 1080 / 1350; object-fit: cover; border-bottom: 1px solid var(--borda); background: var(--areia); }
.carrossel-card-corpo { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.carrossel-card-corpo h3 { font-size: 17px; }

/* Grade de slides do editor */
.slides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.slide-thumb {
  position: relative;
  aspect-ratio: 1080 / 1350;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--borda);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.slide-thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.slide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-thumb-layout {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(23, 19, 13, 0.72);
  color: var(--alva);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
}
.slide-thumb-baixar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(23, 19, 13, 0.72);
  color: var(--alva);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.15s var(--ease), background 0.2s ease;
}
.slide-thumb:hover .slide-thumb-baixar { opacity: 1; }
.slide-thumb-baixar:hover { background: var(--dourado); color: var(--tinta); transform: scale(1.1); }
.slide-thumb-excluir {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(23, 19, 13, 0.72);
  color: var(--alva);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.15s var(--ease), background 0.2s ease;
}
.slide-thumb:hover .slide-thumb-excluir { opacity: 1; }
.slide-thumb-excluir:hover { background: #a33; transform: scale(1.1); }
.slide-thumb { cursor: grab; }
.slide-thumb.arrastando { opacity: 0.35; }
.slide-thumb-duplicar {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(23, 19, 13, 0.72);
  color: var(--alva);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.15s var(--ease), background 0.2s ease;
}
.slide-thumb:hover .slide-thumb-duplicar { opacity: 1; }
.slide-thumb-duplicar:hover { background: var(--dourado); color: var(--tinta); transform: scale(1.1); }
.aviso-contraste { display: block; font-size: 12px; color: #a33; margin-top: 8px; }
.slide-thumb-add {
  aspect-ratio: 1080 / 1350;
  border-radius: 10px;
  border: 1.5px dashed var(--borda);
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--dourado-tinta);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease);
}
.slide-thumb-add span { font-size: 34px; line-height: 1; font-weight: 300; }
.slide-thumb-add small { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.slide-thumb-add:hover { border-color: var(--dourado); background: rgba(199, 154, 63, 0.08); transform: translateY(-4px); }

/* Editor de slide estilo Canva — modal grande com canvas em tamanho real */
.editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 19, 13, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 19;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editor-overlay.visivel { opacity: 1; pointer-events: auto; }
.editor-modal {
  position: relative;
  width: min(1180px, 96vw);
  height: min(860px, 94vh);
  background: var(--creme);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px rgba(23, 19, 13, 0.35);
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s ease;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-overlay.visivel .editor-modal { transform: scale(1) translateY(0); opacity: 1; }
.editor-modal-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--borda);
  flex-shrink: 0;
}
.editor-modal-titulo { font-family: 'Spectral', serif; font-size: 18px; }
.editor-modal-historico { display: flex; gap: 8px; margin-left: auto; margin-right: 16px; }
.editor-modal-historico .btn:disabled { opacity: 0.35; }
.editor-modal-sub { font-size: 12px; opacity: 0.6; margin-top: 2px; }
.btn-fechar-editor {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--tinta);
  opacity: 0.6;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  transition: opacity 0.2s ease, background 0.2s ease;
}
.btn-fechar-editor:hover { opacity: 1; background: rgba(199, 154, 63, 0.12); }
.editor-modal-corpo { flex: 1; display: flex; min-height: 0; }
.editor-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: repeating-conic-gradient(#efe6d4 0% 25%, #f7f1e5 0% 50%) 50% / 24px 24px;
  overflow: auto;
}
.editor-canvas-shadow { position: relative; box-shadow: 0 16px 40px rgba(23, 19, 13, 0.28); border-radius: 4px; }
.guia-centro { position: absolute; display: none; background: #E5484D; z-index: 5; pointer-events: none; box-shadow: 0 0 4px rgba(229, 72, 77, 0.6); }
.guia-vertical { top: 0; bottom: 0; left: 50%; width: 1px; }
.guia-horizontal { left: 0; right: 0; top: 50%; height: 1px; }
.editor-toolbar {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid var(--borda);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.editor-toolbar .form-field label { margin-bottom: 2px; }
.editor-imagem-atual { width: 100%; aspect-ratio: 1080 / 700; border-radius: 8px; overflow: hidden; background: var(--areia); margin-bottom: 10px; }
.editor-imagem-atual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vazio-mini { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; opacity: 0.5; font-family: 'IBM Plex Mono', monospace; }
.troca-imagem-painel { margin-top: 4px; padding: 12px; border: 1px dashed var(--borda); border-radius: var(--radius-md); }
.editor-modal-rodape {
  padding: 16px 24px;
  border-top: 1px solid var(--borda);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.drawer-status, .editor-status { font-size: 13px; opacity: 0.75; }
.editor-dica { font-size: 12px; opacity: 0.55; line-height: 1.5; }
.cor-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cor-preset {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--borda);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s var(--ease), box-shadow 0.15s ease;
}
.cor-preset:hover { transform: scale(1.15); box-shadow: 0 3px 8px rgba(23, 19, 13, 0.25); }
.checkbox-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
  cursor: pointer;
}
.checkbox-linha input { width: 15px; height: 15px; accent-color: var(--dourado-tinta); cursor: pointer; }

/* Canvas ao vivo — mesmas classes/medidas do slide exportado, em escala */
.editor-canvas.slide { width: 1080px; height: 1350px; position: relative; overflow: hidden; display: flex; flex-direction: column; cursor: default; }
.editor-canvas .kicker[contenteditable], .editor-canvas .titulo[contenteditable], .editor-canvas p.corpo[contenteditable],
.editor-canvas .citacao-texto[contenteditable], .editor-canvas .citacao-atribuicao[contenteditable],
.editor-canvas .subtitulo[contenteditable], .editor-canvas .cta[contenteditable], .editor-canvas .tagline[contenteditable],
.editor-canvas .coluna-texto[contenteditable], .editor-canvas .numero-grande[contenteditable] {
  outline: none;
  cursor: text;
  border-radius: 6px;
  transition: box-shadow 0.15s ease;
}
.editor-canvas [contenteditable]:hover { box-shadow: 0 0 0 2px rgba(199, 154, 63, 0.35); }
.editor-canvas [contenteditable]:focus { box-shadow: 0 0 0 2px var(--dourado); }
.editor-canvas [contenteditable]:empty:before { content: attr(data-placeholder); opacity: 0.45; }
.editor-canvas .texto-flutuante { cursor: grab; }
.editor-canvas .texto-flutuante.arrastando { cursor: grabbing; }
.editor-canvas .texto-flutuante:hover::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1.5px dashed rgba(199, 154, 63, 0.6);
  border-radius: 10px;
  pointer-events: none;
}
.editor-canvas .mover-alca {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dourado);
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.15s ease;
  z-index: 2;
  box-shadow: 0 3px 8px rgba(23, 19, 13, 0.3);
}
.editor-canvas .texto-flutuante:hover .mover-alca,
.editor-canvas .texto-flutuante.arrastando .mover-alca { opacity: 1; }
.editor-canvas .mover-alca:hover { transform: scale(1.1); }
.editor-canvas .mover-alca:active { cursor: grabbing; }

/* Réplica exata do visual exportado (mesmas regras de painel/server.js CSS_CARROSSEL) */
.editor-canvas.bg-noite { background: #17130D; color: #FFF4D8; }
.editor-canvas.bg-creme { background: #FAF4E9; color: #241D12; }
.editor-canvas .kicker { font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: 0.15em; }
.editor-canvas.bg-noite .kicker { color: #C79A3F; }
.editor-canvas.bg-creme .kicker { color: #8A6F3A; }
.editor-canvas .regua { width: 64px; height: 3px; background: #C79A3F; margin: 24px 0; }
.editor-canvas .header-row { display: flex; justify-content: space-between; align-items: center; padding: 64px 80px 0 80px; }
.editor-canvas .logo-mark { font-family: 'Spectral', serif; font-weight: 500; font-size: 22px; }
.editor-canvas .page-counter { font-family: 'IBM Plex Mono', monospace; font-size: 15px; letter-spacing: 0.14em; }
.editor-canvas.bg-noite .page-counter { color: #A08B5E; }
.editor-canvas.bg-creme .page-counter { color: #8A6F3A; }
.editor-canvas .content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 80px; }
.editor-canvas .footer-row { padding: 0 80px 64px 80px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: 0.1em; margin-top: auto; }
.editor-canvas.bg-noite .footer-row { color: #A08B5E; }
.editor-canvas.bg-creme .footer-row { color: #8A6F3A; }
.titulo { font-family: 'Spectral', serif; font-weight: 500; letter-spacing: -0.02em; }
.editor-canvas h1.titulo { font-size: 104px; line-height: 0.98; }
.editor-canvas h2.titulo { font-size: 62px; line-height: 1.08; }
/* Classes de fonte globais — usadas no canvas do editor, no seletor de fonte e em qualquer
   preview (cards de template etc). Sem escopo de propósito: o nome já é específico o bastante. */
.fonte-hanken { font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.fonte-playfair { font-family: 'Playfair Display', serif; font-weight: 800; letter-spacing: -0.01em; }
.fonte-fraunces { font-family: 'Fraunces', serif; font-weight: 600; }
.fonte-instrument { font-family: 'Instrument Serif', serif; font-weight: 400; font-style: italic; }
.fonte-bricolage { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.fonte-archivo { font-family: 'Archivo Black', sans-serif; font-weight: 400; letter-spacing: -0.01em; text-transform: uppercase; }
.fonte-cormorant { font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.fonte-baskerville { font-family: 'Libre Baskerville', serif; font-weight: 700; }
.fonte-dmserif { font-family: 'DM Serif Display', serif; font-weight: 400; }
.fonte-spacegrotesk { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.fonte-bebas { font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; }
.fonte-caveat { font-family: 'Caveat', cursive; font-weight: 700; }
.fonte-abril { font-family: 'Abril Fatface', serif; font-weight: 400; letter-spacing: -0.01em; }
.fonte-lora { font-family: 'Lora', serif; font-weight: 600; letter-spacing: -0.01em; }
.fonte-newsreader { font-family: 'Newsreader', serif; font-weight: 500; font-style: italic; }
.fonte-poppins { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.fonte-nunito { font-family: 'Nunito', sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.fonte-manrope { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.fonte-sora { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.fonte-domine { font-family: 'Domine', serif; font-weight: 700; }
.fonte-prata { font-family: 'Prata', serif; font-weight: 400; }
.fonte-spectral { font-family: 'Spectral', serif; font-weight: 500; }
.editor-canvas .subtitulo { font-family: 'Spectral', serif; font-style: italic; font-weight: 300; font-size: 30px; margin-top: 22px; opacity: 0.85; }
.editor-canvas p.corpo { font-size: 27px; line-height: 1.58; font-weight: 400; max-width: 840px; margin-top: 26px; }
.editor-canvas.bg-noite p.corpo { color: #F1E7D2; }
.editor-canvas.bg-creme p.corpo { color: #241D12; }
.editor-canvas .foto-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: var(--filtro-base, none) brightness(var(--ajuste-brilho, 100%)) contrast(var(--ajuste-contraste, 100%)) saturate(var(--ajuste-saturacao, 100%)); cursor: grab; }
.editor-canvas .foto-full.arrastando { cursor: grabbing; }
.editor-canvas .filtro-preto-e-branco { --filtro-base: grayscale(1); }
.editor-canvas .filtro-sepia { --filtro-base: sepia(0.55) saturate(1.2) brightness(0.95); }
.editor-canvas .filtro-alto-contraste { --filtro-base: contrast(1.35) saturate(1.15); }
.editor-canvas .filtro-escurecido { --filtro-base: brightness(0.55) contrast(1.1); }
.editor-canvas .filtro-dourado { --filtro-base: grayscale(0.65) sepia(0.45) hue-rotate(-8deg) saturate(1.7) brightness(0.92); }
.editor-canvas .filtro-vintage { --filtro-base: sepia(0.35) saturate(0.75) contrast(1.05) brightness(1.02); }
.editor-canvas .filtro-frio { --filtro-base: saturate(0.85) hue-rotate(12deg) brightness(1.02) contrast(1.05); }
.editor-canvas .filtro-quente { --filtro-base: saturate(1.3) hue-rotate(-8deg) brightness(1.05); }
.editor-canvas .filtro-desaturado { --filtro-base: saturate(0.3) contrast(1.05); }
.editor-canvas .filtro-alto-brilho { --filtro-base: brightness(1.25) contrast(1.05) saturate(1.05); }
.editor-canvas .filtro-dramatico { --filtro-base: contrast(1.5) brightness(0.85) saturate(1.3); }
.editor-canvas .filtro-pastel { --filtro-base: brightness(1.1) saturate(0.6) contrast(0.9); }
.editor-canvas .filtro-noir { --filtro-base: grayscale(1) contrast(1.6) brightness(0.9); }
.editor-canvas .filtro-polaroid { --filtro-base: sepia(0.25) contrast(1.1) brightness(1.05) saturate(1.1); }
.editor-canvas .filtro-esmaecido { --filtro-base: brightness(1.15) contrast(0.85) saturate(0.7); }
.editor-canvas .filtro-suave { --filtro-base: brightness(1.05) contrast(0.9) saturate(0.8); }
.editor-canvas .filtro-matte { --filtro-base: brightness(1.12) contrast(0.78) saturate(0.95); }
.editor-canvas .filtro-cinematico { --filtro-base: contrast(1.2) saturate(1.25) hue-rotate(-5deg) brightness(0.95); }
.editor-canvas .filtro-claro-etereo { --filtro-base: brightness(1.3) contrast(0.85) saturate(0.75); }
.editor-canvas .filtro-terroso { --filtro-base: sepia(0.3) saturate(1.15) brightness(0.98) contrast(1.05) hue-rotate(-4deg); }
.editor-canvas .filtro-outono { --filtro-base: saturate(1.4) hue-rotate(-15deg) brightness(1) contrast(1.08); }
.editor-canvas .filtro-monocromatico-azul { --filtro-base: grayscale(0.6) sepia(0.4) hue-rotate(170deg) saturate(2.2) brightness(0.95); }
.editor-canvas .filtro-verde-suave { --filtro-base: grayscale(0.55) sepia(0.35) hue-rotate(60deg) saturate(1.6) brightness(1.02); }
.editor-canvas .foto-overlay-full { position: absolute; inset: 0; background: rgba(23, 19, 13, 0.22); pointer-events: none; }
.editor-canvas .foto-overlay-top { position: absolute; top: 0; left: 0; right: 0; height: 220px; background: linear-gradient(180deg, rgba(23,19,13,0.55) 0%, rgba(23,19,13,0) 100%); pointer-events: none; }
.editor-canvas .foto-overlay-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 220px; background: linear-gradient(0deg, rgba(23,19,13,0.55) 0%, rgba(23,19,13,0) 100%); pointer-events: none; }
.editor-canvas .header-row.sobre-foto, .editor-canvas .footer-row.sobre-foto { position: absolute; left: 0; right: 0; }
.editor-canvas .header-row.sobre-foto { top: 0; }
.editor-canvas .header-row.sobre-foto .logo-mark, .editor-canvas .header-row.sobre-foto .page-counter { color: #FFF4D8; }
.editor-canvas .footer-row.sobre-foto { bottom: 0; color: #A08B5E; }
.editor-canvas .texto-flutuante { position: absolute; max-width: 860px; }
.editor-canvas .texto-flutuante.estilo-chip { background: rgba(23,19,13,0.55); backdrop-filter: blur(2px); padding: 28px 32px; border-radius: 14px; }
.editor-canvas .texto-flutuante.estilo-chip-dourado { background: rgba(199,154,63,0.9); padding: 28px 32px; border-radius: 14px; }
.editor-canvas .texto-flutuante.estilo-chip-dourado .kicker { color: #241D12; opacity: 0.7; }
.editor-canvas .texto-flutuante.estilo-chip-dourado .titulo { color: #241D12; }
.editor-canvas .texto-flutuante.estilo-chip-dourado p.corpo { color: #241D12; }
.editor-canvas .texto-flutuante.estilo-sombra .kicker, .editor-canvas .texto-flutuante.estilo-sombra .titulo, .editor-canvas .texto-flutuante.estilo-sombra p.corpo { text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.editor-canvas .texto-flutuante.estilo-chip-claro { background: rgba(250,244,233,0.94); padding: 28px 32px; border-radius: 14px; }
.editor-canvas .texto-flutuante.estilo-chip-claro .kicker { color: #8A6F3A; }
.editor-canvas .texto-flutuante.estilo-chip-claro .titulo { color: #241D12; }
.editor-canvas .texto-flutuante.estilo-chip-claro p.corpo { color: #241D12; }
.editor-canvas .texto-flutuante.estilo-contorno .titulo { color: transparent; -webkit-text-stroke: 2px #FFF4D8; }
.editor-canvas .texto-flutuante.estilo-sublinhado .titulo { text-decoration: underline; text-decoration-color: #C79A3F; text-decoration-thickness: 4px; text-underline-offset: 8px; }
.editor-canvas .texto-flutuante.estilo-fita .kicker { display: inline-block; background: #C79A3F; color: #241D12; opacity: 1; padding: 6px 14px; border-radius: 3px; }
.editor-canvas .texto-flutuante.estilo-borda { border: 2px solid rgba(199,154,63,0.85); padding: 26px 30px; border-radius: 10px; }
.editor-canvas .texto-flutuante.estilo-lateral-dourada { border-left: 5px solid #C79A3F; padding-left: 24px; }
.editor-canvas .texto-flutuante.estilo-gradiente .titulo { background: linear-gradient(90deg, #C79A3F, #FFEDBC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.editor-canvas .texto-flutuante.estilo-vidro { background: rgba(255,255,255,0.12); backdrop-filter: blur(10px) saturate(1.4); border: 1px solid rgba(255,255,255,0.25); padding: 26px 30px; border-radius: 16px; }
.editor-canvas .texto-flutuante.estilo-sombra-forte .kicker, .editor-canvas .texto-flutuante.estilo-sombra-forte .titulo, .editor-canvas .texto-flutuante.estilo-sombra-forte p.corpo { text-shadow: 0 4px 20px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.9); }
.editor-canvas .texto-flutuante.estilo-caixa-alta .titulo { text-transform: uppercase; letter-spacing: 0.02em; }
.editor-canvas .texto-flutuante.estilo-caixa-arredondada { background: rgba(23,19,13,0.55); backdrop-filter: blur(2px); padding: 30px 40px; border-radius: 40px; }
.editor-canvas .texto-flutuante.estilo-marcador .titulo { background-image: linear-gradient(120deg, rgba(199,154,63,0.55) 0%, rgba(199,154,63,0.55) 100%); background-repeat: no-repeat; background-size: 100% 0.4em; background-position: 0 85%; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.editor-canvas .texto-flutuante.estilo-sombra-dourada .kicker, .editor-canvas .texto-flutuante.estilo-sombra-dourada .titulo, .editor-canvas .texto-flutuante.estilo-sombra-dourada p.corpo { text-shadow: 0 2px 22px rgba(199,154,63,0.85), 0 1px 3px rgba(0,0,0,0.6); }
.editor-canvas .texto-flutuante.estilo-moldura-dupla { border: 2px solid rgba(199,154,63,0.9); outline: 1px solid rgba(199,154,63,0.4); outline-offset: 7px; padding: 30px 34px; }
.editor-canvas .texto-flutuante.estilo-fundo-nevoa { background: linear-gradient(180deg, rgba(23,19,13,0.05) 0%, rgba(23,19,13,0.6) 100%); backdrop-filter: blur(6px); padding: 30px 34px; border-radius: 18px; }
.editor-canvas .texto-flutuante.estilo-contorno-fino .titulo { color: transparent; -webkit-text-stroke: 1px #FFF4D8; }
.editor-canvas .content-numerada { flex: 1; display: flex; align-items: center; gap: 40px; padding: 0 80px; }
.editor-canvas .numero-grande { font-family: 'Spectral', serif; font-weight: 600; font-size: 180px; line-height: 1; color: #C79A3F; opacity: 0.9; flex-shrink: 0; }
.editor-canvas .numerada-texto { flex: 1; min-width: 0; }
.editor-canvas .content-mito-verdade { flex: 1; display: flex; }
.editor-canvas .coluna { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 56px; }
.editor-canvas .coluna-mito { background: rgba(23, 19, 13, 0.35); border-right: 1px solid rgba(199, 154, 63, 0.25); }
.editor-canvas .coluna-verdade { background: rgba(199, 154, 63, 0.14); }
.editor-canvas .coluna-rotulo { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 16px; }
.editor-canvas .coluna-mito .coluna-rotulo { color: #A08B5E; }
.editor-canvas .coluna-verdade .coluna-rotulo { color: #C79A3F; }
.editor-canvas .coluna-texto { font-family: 'Spectral', serif; font-size: 30px; line-height: 1.4; color: #F1E7D2; }
.editor-canvas .citacao-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 110px; }
.editor-canvas .aspas { font-family: 'Spectral', serif; font-size: 240px; color: #C79A3F; opacity: 0.18; line-height: 1; height: 130px; }
.editor-canvas .citacao-texto { font-family: 'Spectral', serif; font-style: italic; font-weight: 400; font-size: 48px; line-height: 1.32; color: #241D12; }
.editor-canvas .citacao-atribuicao { font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 18px; color: #8A6F3A; margin-top: 32px; }
.editor-canvas .fechamento-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 100px; }
.editor-canvas .fechamento-content img.icone { width: 84px; height: auto; margin-bottom: 26px; }
.editor-canvas .fechamento-content .wordmark { font-family: 'Spectral', serif; font-weight: 500; font-size: 68px; color: #FFF4D8; }
.editor-canvas .fechamento-content .tagline { font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: 16px; color: #C79A3F; margin-top: 18px; }
.editor-canvas .fechamento-content .cta { font-family: 'Spectral', serif; font-style: italic; font-size: 34px; color: #F1E7D2; margin-top: 26px; max-width: 680px; }
.editor-canvas .fechamento-content .botao { display: inline-block; margin-top: 34px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 17px; color: #C79A3F; border: 1.5px solid #8A6F3A; padding: 14px 32px; border-radius: 4px; }

/* Elementos livres (forma, emoji/sticker, texto) — igual ao CSS_CARROSSEL do server.js */
.editor-canvas .elemento-decorativo { position: absolute; box-sizing: border-box; cursor: pointer; }
.editor-canvas .elemento-decorativo.forma-retangulo { border-radius: 6px; }
.editor-canvas .elemento-decorativo.forma-circulo { border-radius: 50%; }
.editor-canvas .elemento-decorativo.forma-triangulo { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.editor-canvas .elemento-decorativo.forma-estrela { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.editor-canvas .elemento-decorativo.forma-seta { clip-path: polygon(0% 35%, 55% 35%, 55% 15%, 100% 50%, 55% 85%, 55% 65%, 0% 65%); }
.editor-canvas .elemento-decorativo.forma-emoji { display: flex; align-items: center; justify-content: center; line-height: 1; text-align: center; }
.editor-canvas .elemento-decorativo.tipo-texto { line-height: 1.2; }
.editor-canvas .elemento-texto-conteudo { white-space: pre-wrap; outline: none; cursor: text; min-width: 20px; min-height: 1.2em; }
.editor-canvas .elemento-texto-conteudo:empty:before { content: attr(data-placeholder); opacity: 0.45; }
.editor-canvas .elemento-decorativo.tipo-imagem { overflow: hidden; border-radius: 6px; background: rgba(0,0,0,0.05); }
.editor-canvas .elemento-imagem-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; filter: var(--filtro-base, none) brightness(var(--ajuste-brilho, 100%)) contrast(var(--ajuste-contraste, 100%)) saturate(var(--ajuste-saturacao, 100%)); }
.editor-canvas .elemento-imagem-vazio { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0.5; text-align: center; padding: 4px; }
.editor-canvas .elemento-decorativo:hover::before,
.editor-canvas .elemento-decorativo.selecionado::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1.5px dashed rgba(199, 154, 63, 0.6);
  border-radius: inherit;
  pointer-events: none;
}
.editor-canvas .elemento-decorativo.selecionado::before { border-style: solid; border-color: var(--dourado); }
.editor-canvas .elemento-decorativo .mover-alca,
.editor-canvas .elemento-decorativo .resize-alca,
.editor-canvas .elemento-decorativo .rotate-alca,
.editor-canvas .elemento-decorativo .rotate-linha { opacity: 0; }
.editor-canvas .elemento-decorativo:hover .mover-alca,
.editor-canvas .elemento-decorativo.arrastando .mover-alca,
.editor-canvas .elemento-decorativo.selecionado .mover-alca,
.editor-canvas .elemento-decorativo:hover .resize-alca,
.editor-canvas .elemento-decorativo.selecionado .resize-alca,
.editor-canvas .elemento-decorativo:hover .rotate-alca,
.editor-canvas .elemento-decorativo.selecionado .rotate-alca,
.editor-canvas .elemento-decorativo:hover .rotate-linha,
.editor-canvas .elemento-decorativo.selecionado .rotate-linha { opacity: 1; }

.editor-canvas .resize-alca {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--dourado);
  border: 2px solid #fff;
  cursor: nwse-resize;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(23, 19, 13, 0.3);
}
.editor-canvas .resize-alca.resize-alca-h {
  right: -8px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.editor-canvas .rotate-linha {
  position: absolute;
  top: -22px;
  left: 50%;
  width: 1px;
  height: 18px;
  background: var(--dourado);
  transform: translateX(-50%);
}
.editor-canvas .rotate-alca {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dourado);
  cursor: grab;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(23, 19, 13, 0.3);
}
.editor-canvas .rotate-alca:active { cursor: grabbing; }

/* Editor: sliders, valor ao lado, controles de zoom do canvas */
.editor-toolbar input[type="range"] {
  width: 100%;
  accent-color: var(--dourado-tinta);
  cursor: pointer;
}
.range-valor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.6;
  text-transform: none;
  letter-spacing: 0;
}
.editor-canvas-wrap { position: relative; }
.zoom-controls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: 0 6px 18px rgba(23, 19, 13, 0.18);
  z-index: 3;
}
.zoom-btn {
  border: none;
  background: transparent;
  color: var(--tinta);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0.7;
}
.zoom-btn:hover { opacity: 1; background: rgba(199, 154, 63, 0.12); }
.zoom-btn.ativo { background: var(--dourado); color: var(--tinta); opacity: 1; font-weight: 600; }

/* Toolbar flutuante — aparece grudada no elemento selecionado, ações rápidas sem ir até a barra lateral */
.elemento-toolbar-flutuante {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--tinta);
  border-radius: var(--radius-pill);
  padding: 5px;
  box-shadow: 0 8px 20px rgba(23, 19, 13, 0.35);
  z-index: 6;
  animation: entrada 0.15s var(--ease);
}
.elemento-toolbar-flutuante button {
  border: none;
  background: transparent;
  color: var(--alva);
  font-size: 13px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.elemento-toolbar-flutuante button:hover { opacity: 1; background: rgba(255, 244, 216, 0.16); }
.elemento-toolbar-flutuante button.elemento-toolbar-perigo:hover { background: rgba(211, 71, 71, 0.85); }
.elemento-toolbar-sep { width: 1px; height: 18px; background: rgba(255, 244, 216, 0.2); margin: 0 2px; }

/* Seletor de fonte com busca e preview ao vivo — substitui o <select> gigante por um picker visual */
.fonte-picker { position: relative; }
.fonte-picker-select-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fonte-picker-botao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  background: var(--creme);
  color: var(--tinta);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fonte-picker-botao:hover { border-color: rgba(199, 154, 63, 0.4); }
.fonte-picker.aberto .fonte-picker-botao { border-color: var(--dourado-tinta); box-shadow: var(--ring-gold); background: #fff; }
.fonte-picker-botao-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fonte-picker-seta { opacity: 0.5; font-size: 11px; flex-shrink: 0; transition: transform 0.15s ease; }
.fonte-picker.aberto .fonte-picker-seta { transform: rotate(180deg); }
.fonte-picker-painel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  z-index: 15;
  padding: 8px;
}
.fonte-picker-busca {
  width: 100%;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  background: var(--creme);
  color: var(--tinta);
  margin-bottom: 6px;
}
.fonte-picker-busca:focus { outline: none; border-color: var(--dourado-tinta); }
.fonte-picker-lista { max-height: 260px; overflow-y: auto; }
.fonte-picker-item {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  color: var(--tinta);
  transition: background 0.12s ease;
}
.fonte-picker-item:hover { background: var(--creme); }
.fonte-picker-item.ativo { background: rgba(199, 154, 63, 0.14); font-weight: 600; }
.fonte-picker-vazio { padding: 14px; font-size: 13px; opacity: 0.55; text-align: center; }

/* Picker visual de formas — mostra as opções de cara em vez de criar retângulo e obrigar a trocar depois */
.forma-picker-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.forma-picker-opcao {
  width: 44px;
  height: 44px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--creme);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.forma-picker-opcao:hover { border-color: var(--dourado-tinta); background: #fff; transform: translateY(-1px); }
.forma-picker-icone { width: 20px; height: 20px; background: var(--dourado-tinta); display: block; }
.forma-picker-icone.forma-retangulo { border-radius: 3px; }
.forma-picker-icone.forma-circulo { border-radius: 50%; }
.forma-picker-icone.forma-triangulo { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.forma-picker-icone.forma-estrela { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.forma-picker-icone.forma-seta { clip-path: polygon(0% 35%, 55% 35%, 55% 15%, 100% 50%, 55% 85%, 55% 65%, 0% 65%); }

/* Copiar formatação (format painter) */
.btn-secondary.ativo { background: var(--dourado); border-color: var(--dourado); color: var(--tinta); }
.editor-canvas.modo-copiar-formato { cursor: crosshair; }
.editor-canvas.modo-copiar-formato .elemento-decorativo { cursor: crosshair; }

/* Elementos livres do slide — chips de seleção */
.elementos-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.elemento-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  border: 1px solid var(--borda);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 5px 6px 5px 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.elemento-chip:hover { border-color: rgba(199, 154, 63, 0.5); }
.elemento-chip.ativo { background: var(--dourado); border-color: var(--dourado); color: var(--tinta); font-weight: 600; }
.elemento-chip-remover {
  border: none;
  background: rgba(36, 29, 18, 0.08);
  color: inherit;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.elemento-chip.ativo .elemento-chip-remover { background: rgba(36, 29, 18, 0.18); }
.elementos-botoes-add { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
#painel-elemento { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; padding-top: 16px; border-top: 1px dashed var(--borda); }

/* Seções colapsáveis do toolbar do editor — organiza a parede de controles em grupos */
.editor-secao-toolbar {
  border-top: 1px solid var(--borda);
  padding-top: 14px;
}
.editor-secao-toolbar > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Spectral', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--tinta);
  user-select: none;
  padding: 2px 0;
}
.editor-secao-toolbar > summary::-webkit-details-marker { display: none; }
.editor-secao-toolbar > summary::after {
  content: '▾';
  font-size: 12px;
  color: var(--dourado-tinta);
  transition: transform 0.2s ease;
  margin-left: 8px;
}
.editor-secao-toolbar[open] > summary::after { transform: rotate(180deg); }
.editor-secao-toolbar > summary:hover { color: var(--dourado-tinta); }
.editor-secao-toolbar > summary .range-valor { font-weight: 400; }
.editor-secao-corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}

/* Templates de slide salvos */
.templates-filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.templates-categorias { display: flex; gap: 6px; flex-wrap: wrap; }
.templates-conta { font-size: 11px; opacity: 0.55; font-family: 'IBM Plex Mono', monospace; }
.templates-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin-top: 6px; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--borda); border-radius: var(--radius-sm); }
.templates-busca-input {
  width: 100%;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  background: var(--creme);
  color: var(--tinta);
}
.templates-busca-input:focus { outline: none; border-color: var(--dourado-tinta); }
.template-card {
  position: relative;
  width: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid var(--borda);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.template-card:hover { border-color: var(--dourado); transform: translateY(-2px); }
.template-card-preview {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.template-card-preview-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 19, 13, 0.1), rgba(23, 19, 13, 0.55));
}
.template-card-preview-letra { position: relative; }
.template-card-nome {
  font-size: 10px;
  padding: 4px 5px;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-card-remover {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 19, 13, 0.55);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.template-card:hover .template-card-remover { opacity: 1; }
.template-card-editar {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 19, 13, 0.55);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.template-card:hover .template-card-editar { opacity: 1; }
.template-card-elemento-marca { position: absolute; bottom: 3px; right: 4px; font-size: 7px; opacity: 0.7; }

/* Entrada escalonada dos itens renderizados dinamicamente */
.kpi-grid > *,
.clientes-grid > *,
.lista-simples > *,
.relatorios-grid > *,
.carrosseis-grid > *,
.slides-grid > * {
  animation: entrada 0.5s var(--ease) backwards;
}
.kpi-grid > *:nth-child(1), .clientes-grid > *:nth-child(1), .lista-simples > *:nth-child(1), .relatorios-grid > *:nth-child(1) { animation-delay: 0.02s; }
.kpi-grid > *:nth-child(2), .clientes-grid > *:nth-child(2), .lista-simples > *:nth-child(2), .relatorios-grid > *:nth-child(2) { animation-delay: 0.06s; }
.kpi-grid > *:nth-child(3), .clientes-grid > *:nth-child(3), .lista-simples > *:nth-child(3), .relatorios-grid > *:nth-child(3) { animation-delay: 0.10s; }
.kpi-grid > *:nth-child(4), .clientes-grid > *:nth-child(4), .lista-simples > *:nth-child(4), .relatorios-grid > *:nth-child(4) { animation-delay: 0.14s; }
.kpi-grid > *:nth-child(5), .clientes-grid > *:nth-child(5), .lista-simples > *:nth-child(5), .relatorios-grid > *:nth-child(5) { animation-delay: 0.18s; }
.kpi-grid > *:nth-child(6), .clientes-grid > *:nth-child(6), .lista-simples > *:nth-child(6), .relatorios-grid > *:nth-child(6) { animation-delay: 0.22s; }
.kpi-grid > *:nth-child(7), .clientes-grid > *:nth-child(7), .lista-simples > *:nth-child(7), .relatorios-grid > *:nth-child(7) { animation-delay: 0.26s; }
.kpi-grid > *:nth-child(8), .clientes-grid > *:nth-child(8), .lista-simples > *:nth-child(8), .relatorios-grid > *:nth-child(8) { animation-delay: 0.30s; }
.kpi-grid > *:nth-child(n+9), .clientes-grid > *:nth-child(n+9), .lista-simples > *:nth-child(n+9), .relatorios-grid > *:nth-child(n+9) { animation-delay: 0.34s; }

/* Alerta (contratos vencendo) */
.linha-alerta { border-color: rgba(199, 154, 63, 0.5); background: rgba(199, 154, 63, 0.06); }

/* Origem do lead (tag na etiqueta do cliente) */
.tag-origem { border-color: rgba(199, 154, 63, 0.5); color: var(--dourado-tinta); background: rgba(199, 154, 63, 0.08); }

/* Último contato */
.ultimo-contato {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  opacity: 0.6;
}
.ultimo-contato.atencao { color: #a33; opacity: 0.9; font-weight: 600; }

/* Gráficos financeiros */
.graficos-duplo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}
.grafico-donut-wrap, .grafico-tendencia-wrap {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.grafico-donut { display: flex; align-items: center; justify-content: center; position: relative; }
.grafico-donut svg circle { transition: opacity 0.2s ease; }
.grafico-donut svg circle:hover { opacity: 0.85; }
.donut-centro {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.donut-centro-valor { font-family: 'IBM Plex Mono', monospace; font-size: 22px; color: var(--dourado-tinta); }
.donut-centro-rotulo { font-size: 11px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.06em; }
.donut-legenda { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.donut-legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.donut-legenda-item strong { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.donut-legenda-cor { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.grafico-tendencia-legenda {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  opacity: 0.55;
  margin-top: 8px;
}

/* Filtro de categoria — banco de imagens do carrossel */
.banco-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip-filtro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: lowercase;
  border: 1px solid var(--borda);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.chip-filtro:hover { border-color: rgba(199, 154, 63, 0.5); }
.chip-filtro.ativo { background: var(--dourado); border-color: var(--dourado); color: var(--tinta); font-weight: 600; }

/* Badge de carrossel feito fora do painel (skill /carrossel no chat) */
.badge-externo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(36, 29, 18, 0.08);
  opacity: 0.75;
}

/* Sparkline de crescimento de seguidores (relatórios) */
.sparkline-wrap { display: flex; align-items: center; gap: 10px; }
.sparkline-legenda {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  opacity: 0.75;
}

/* Rótulo dentro do bloco de leitura de relatório */
.relatorio-analise-rotulo {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dourado-tinta);
  margin-bottom: 4px;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .clientes-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 2px; }
  .form-grid { grid-template-columns: 1fr; }
  .acoes-topo { margin-bottom: 0; }
  .graficos-duplo { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}