/* =====================================================================
   Onzze Studio — visual do painel
   Direção: preto profundo, botões em terracota, menu em fonte
   arredondada (estilo Apple) e bronze só para as versões finais.
   ===================================================================== */
:root {
  color-scheme: dark;
  /* Cores */
  --fundo: #0B0B0C;
  --lateral: #000000;
  --superficie: #161618;
  --superficie-2: #1E1E21;
  --chip: #2A2A2E;
  --tinta: #F3F1EE;
  --tinta-2: #C8C4BE;
  --suave: #8E8A85;
  --linha: #2A2A2E;
  --linha-forte: #3B3B40;
  --acento: #C8643B;         /* terracota */
  --acento-forte: #B0532D;   /* terracota ao passar o mouse */
  --acento-texto: #E8906A;   /* terracota para texto sobre fundo escuro */
  --acento-claro: #2E1D16;   /* fundo levemente terracota */
  --bronze: #CFA472;         /* versões finais */
  --bronze-claro: #2C2419;
  --ok: #4FB27F;
  --ok-fundo: #142A1E;
  --erro: #E4705B;
  --erro-fundo: #321815;
  --info: #86ADDB;
  --info-fundo: #17222F;
  --alerta: #DDAA4A;
  --alerta-fundo: #2C2412;
  /* nomes antigos usados pelo painel */
  --ouro: var(--acento);
  --ouro-claro: var(--acento-claro);

  /* Tipos */
  --serifa: "Fraunces", "Iowan Old Style", Georgia, serif;   /* títulos */
  --sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --redonda: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif; /* menu */

  /* Forma */
  --raio: 16px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .7);
  --sombra-alta: 0 24px 60px -20px rgba(0, 0, 0, .85);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font: 400 14.5px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Estrutura ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  background: var(--lateral); border-right: 1px solid var(--linha); font-family: var(--redonda);
  display: flex; flex-direction: column; padding: 26px 16px 18px;
  position: sticky; top: 0; height: 100vh;
}
.marca { display: flex; align-items: center; gap: 12px; padding: 0 8px 30px; }
.marca strong { display: block; font-family: var(--redonda); font-size: 19px; font-weight: 800; color: var(--tinta); letter-spacing: -.01em; line-height: 1.1; }
.marca small { display: block; font-family: var(--redonda); font-size: 11px; color: var(--suave); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; font-weight: 700; }
.marca-o {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--acento); color: #fff;
  font-family: var(--redonda); font-size: 20px; font-weight: 900;
}
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 999px;
  text-decoration: none; color: var(--tinta-2); font-weight: 600; font-size: 15px; letter-spacing: .005em;
  transition: background .15s, color .15s;
}
.menu a svg { color: var(--suave); transition: color .15s; }
.menu a:hover { background: var(--superficie); color: var(--tinta); }
.menu a.ativo { background: var(--acento); color: #fff; font-weight: 700; }
.menu a.ativo svg { color: #fff; }
.lateral-rodape { margin-top: auto; border-top: 1px solid var(--linha); padding: 14px 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.usuario strong { display: block; color: var(--tinta); font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario small { color: var(--suave); font-size: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--acento-claro); color: var(--acento-texto); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.sair { font-size: 13px; color: var(--suave); text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.sair:hover { color: var(--tinta); background: var(--superficie); }

.conteudo { padding: 40px 48px 120px; min-width: 0; width: 100%; max-width: 1360px; }

/* ---------- Títulos ---------- */
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.cabecalho h1 {
  font-family: var(--serifa); font-weight: 400; font-size: 42px; line-height: 1.05;
  margin: 0 0 10px; letter-spacing: -.025em; font-variation-settings: "opsz" 144; text-wrap: balance;
}
.cabecalho p { margin: 0; color: var(--suave); font-size: 15px; max-width: 62ch; }
.titulo-secao { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--suave); font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.texto-suave { color: var(--suave); }
.passo { margin-bottom: 34px; }
.passo-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--linha-forte); color: var(--tinta-2); background: var(--superficie);
  font-size: 11px; font-weight: 600; letter-spacing: 0; margin-right: 0;
}

/* ---------- Cartões ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra); }
.cartao + .cartao { margin-top: 18px; }
.cartao h2 { font-family: var(--serifa); font-size: 23px; font-weight: 500; margin: 0 0 16px; letter-spacing: -.015em; font-variation-settings: "opsz" 72; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--raio-p);
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta);
  cursor: pointer; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .05s, opacity .15s;
}
.botao:hover { border-color: var(--tinta-2); background: var(--superficie-2); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .4; cursor: not-allowed; }
.botao-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.botao-primario:hover { background: var(--acento-forte); border-color: var(--acento-forte); }
.botao-ouro { background: var(--acento); border-color: var(--acento); color: #fff; }
.botao-ouro:hover { background: var(--acento-forte); border-color: var(--acento-forte); }
.botao-fantasma { background: transparent; border-color: transparent; }
.botao-fantasma:hover { background: var(--superficie-2); border-color: transparent; }
.botao-perigo { color: var(--erro); }
.botao-perigo:hover { border-color: var(--erro); background: var(--erro-fundo); }
.botao-p { height: 32px; padding: 0 11px; font-size: 13px; gap: 6px; border-radius: 9px; }
.botao-p svg { width: 15px; height: 15px; }
.botao-g { height: 50px; padding: 0 26px; font-size: 15px; }
.botao-largo { width: 100%; }
.grupo-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Opções clicáveis ---------- */
.opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.opcao {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 18px;
  border: 1px solid var(--linha-forte); border-radius: 999px;
  background: var(--superficie); cursor: pointer; font-weight: 500; font-size: 14.5px;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.opcao:hover { border-color: var(--tinta-2); }
.opcao.sel { background: var(--acento); border-color: var(--acento); color: #fff; }
.opcao .contador { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.opcao.sel .contador { background: rgba(255,255,255,.16); color: #fff; }
.opcao-p { min-height: 36px; padding: 4px 14px; font-size: 13.5px; }
.amostras { display: inline-flex; }
.amostras i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--superficie); margin-left: -5px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.amostras i:first-child { margin-left: 0; }
.opcao.sel .amostras i { border-color: var(--acento); }
.icone-formato { border: 1.6px solid currentColor; border-radius: 3px; display: inline-block; }
.opcoes input.campo-outra { width: 100px; height: 46px; border-radius: 999px; padding: 0 12px; text-align: center; }
.opcoes input.campo-outra.sel { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); font-weight: 600; }

/* Temas como cartões grandes */
.grade-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.tema-botao {
  text-align: left; padding: 18px 18px 16px; min-height: 108px; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie);
  cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  box-shadow: var(--sombra);
  transition: border-color .15s, transform .15s, background .15s, box-shadow .15s;
}
.tema-botao:hover { border-color: var(--linha-forte); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.8); }
.tema-botao strong { font-family: var(--serifa); font-size: 22px; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; font-variation-settings: "opsz" 72; }
.tema-botao small { color: var(--suave); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tema-botao.sel { background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 12px 26px -14px rgba(200, 100, 59, .7); }
.tema-botao.sel small { color: rgba(255,255,255,.72); }

/* ---------- Formulários ---------- */
.formulario { display: flex; flex-direction: column; gap: 16px; }
.formulario label, label.campo { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 13px; color: var(--tinta-2); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input:not([type]), select, textarea {
  width: 100%; height: 42px; padding: 0 13px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  background: var(--superficie); color: var(--tinta); font-weight: 400; font-size: 14.5px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 96px; padding: 11px 13px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: #6E6B67; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(200, 100, 59, .25); }
.dica { font-size: 12.5px; color: var(--suave); font-weight: 400; line-height: 1.45; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.linha-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.interruptor { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; cursor: pointer; font-weight: 500 !important; }
.interruptor input { width: 40px; height: 23px; appearance: none; border-radius: 999px; background: var(--linha-forte); position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.interruptor input::after { content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked { background: var(--acento); }
.interruptor input:checked::after { left: 20px; }

/* ---------- Barra de resumo (Nova leva) ---------- */
.barra-resumo {
  position: sticky; bottom: 20px; z-index: 5; margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: 18px; padding: 14px 14px 14px 24px;
  box-shadow: var(--sombra-alta);
}
.barra-resumo .resumo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.barra-resumo strong { font-weight: 600; font-size: 15px; }
.barra-resumo small { color: var(--suave); font-size: 12.5px; }
.barra-resumo .botao-ouro { height: 48px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
body.com-fila .barra-resumo { bottom: 106px; }

/* ---------- Progresso ---------- */
.progresso { height: 6px; background: var(--linha); border-radius: 999px; overflow: hidden; }
.progresso > i { display: block; height: 100%; background: var(--acento); border-radius: 999px; transition: width .4s ease; }
.progresso-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.progresso-topo strong { font-family: var(--serifa); font-size: 24px; font-weight: 500; letter-spacing: -.015em; }

/* ---------- Galeria ---------- */
.grade-artes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.grade-artes.compacta { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.arte {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra);
  transition: border-color .15s, opacity .2s, box-shadow .15s;
}
.arte:hover { box-shadow: 0 14px 30px -18px rgba(0,0,0,.9); }
.arte.aprovada { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok), var(--sombra); }
.arte.final { border-color: var(--bronze); box-shadow: 0 0 0 1px var(--bronze), var(--sombra); }
.arte.descartada { opacity: .5; }
.arte-imagem { position: relative; background: var(--superficie-2); cursor: zoom-in; overflow: hidden; }
.arte-imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.arte:hover .arte-imagem img { transform: scale(1.02); }
.arte-imagem.vazia {
  cursor: default; display: grid; place-items: center; color: var(--suave); font-size: 12.5px; text-align: center; padding: 12px;
  background: repeating-linear-gradient(135deg, var(--superficie-2) 0 10px, var(--fundo) 10px 20px);
}
.proporcao-vertical { aspect-ratio: 2 / 3; }
.proporcao-horizontal { aspect-ratio: 3 / 2; }
.proporcao-quadrado { aspect-ratio: 1 / 1; }
.selo {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px;
  background: rgba(14,14,16,.82); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.4); backdrop-filter: blur(4px);
}
.selo.aprovada { background: var(--ok); color: #fff; }
.selo.final { background: var(--bronze); color: #17120B; }
.selo.erro { background: var(--erro); color: #fff; }
.selo.descartada { background: #4A4A50; color: #fff; }
.selo-tipo { left: auto; right: 10px; background: rgba(23,25,29,.78); color: #fff; }
.arte-info { padding: 12px 14px 4px; font-size: 12.5px; color: var(--suave); display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.arte-info strong { color: var(--tinta); font-weight: 600; }
.arte-acoes { padding: 8px 12px 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.arte-acoes .botao { flex: 1 1 auto; }
.arte-erro { padding: 0 14px; font-size: 12px; color: var(--erro); line-height: 1.4; }
.girando { width: 26px; height: 26px; border: 2.5px solid var(--linha-forte); border-top-color: var(--acento); border-radius: 50%; animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.arte-imagem .carregando { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--suave); font-size: 12.5px; }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros select { width: auto; min-width: 220px; }
.barra-acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 22px; padding: 12px 12px 12px 18px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }

/* ---------- Listas, tabelas e indicadores ---------- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 12px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela input, .tabela select { height: 36px; }
.tabela a { text-decoration: none; font-weight: 600; }
.tabela a:hover { color: var(--acento-texto); }
.rolagem-x { overflow-x: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra); }
.kpi small { display: block; color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.kpi strong { display: block; font-family: var(--sans); font-size: 32px; font-weight: 600; line-height: 1.15; margin: 8px 0 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--suave); font-size: 13px; }
.barras { display: flex; align-items: flex-end; gap: 5px; height: 160px; padding-top: 10px; border-bottom: 1px solid var(--linha); }
.barras .b { flex: 1; background: var(--acento); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .9; transition: opacity .15s; }
.barras .b:hover { opacity: 1; background: var(--acento-forte); }
.barras .b.zero { background: var(--linha); }
.barras-legenda { display: flex; justify-content: space-between; color: var(--suave); font-size: 12px; margin-top: 8px; }
.lista-levas { display: flex; flex-direction: column; }
.leva-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.leva-linha:last-child { border-bottom: 0; }
.leva-linha strong { font-weight: 600; }
.leva-linha small { color: var(--suave); }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--chip); color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.ouro { background: var(--bronze-claro); color: var(--bronze); }
.etiqueta.erro { background: var(--erro-fundo); color: var(--erro); }
.etiqueta.info { background: var(--info-fundo); color: var(--info); }

.temas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tema-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); }
.tema-cartao.inativo { opacity: .55; }
.tema-cartao h3 { font-family: var(--serifa); font-size: 25px; font-weight: 500; margin: 0; letter-spacing: -.015em; font-variation-settings: "opsz" 72; }
.tema-cartao p { margin: 0; color: var(--tinta-2); font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tema-cartao .rodape { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; gap: 8px; }

/* Abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 24px; flex-wrap: wrap; }
.abas button { background: none; border: 0; padding: 11px 14px; cursor: pointer; color: var(--suave); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas button:hover { color: var(--tinta); }
.abas button.ativa { color: var(--tinta); border-bottom-color: var(--acento); }

/* ---------- Avisos ---------- */
.aviso { padding: 12px 14px; border-radius: var(--raio-p); font-size: 13.5px; margin-bottom: 14px; border: 1px solid transparent; }
.aviso-ok { background: var(--ok-fundo); color: var(--ok); border-color: #1F3D2C; }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); border-color: #4A231E; }
.aviso-info { background: var(--info-fundo); color: var(--info); border-color: #24344A; }
.aviso-alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: #43361B; }
.aviso a { font-weight: 600; }
.vazio { text-align: center; padding: 56px 20px; color: var(--suave); }
.vazio strong { display: block; font-family: var(--serifa); font-size: 26px; color: var(--tinta); font-weight: 500; margin-bottom: 6px; letter-spacing: -.015em; }
code, .codigo { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; background: var(--chip); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.bloco-codigo { display: block; padding: 12px 14px; border: 1px solid var(--linha); background: var(--superficie-2); border-radius: var(--raio-p); white-space: pre-wrap; line-height: 1.55; }

/* ---------- Modal e lightbox ---------- */
.fundo-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); z-index: 50; display: grid; place-items: center; padding: 20px; animation: aparecer .15s ease; }
.modal { background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 20px; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; box-shadow: var(--sombra-alta); }
.modal-topo { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px 0; }
.modal-topo h3 { font-family: var(--serifa); font-size: 27px; font-weight: 500; margin: 0; letter-spacing: -.02em; }
.modal-corpo { padding: 18px 24px; }
.modal-rodape { padding: 4px 24px 22px; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.fechar { background: none; border: 0; cursor: pointer; font-size: 26px; line-height: 1; color: var(--suave); padding: 4px 8px; border-radius: 8px; }
.fechar:hover { background: var(--superficie-2); color: var(--tinta); }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.lightbox { position: fixed; inset: 0; background: rgba(14, 15, 18, .94); z-index: 60; display: grid; grid-template-columns: 1fr 380px; animation: aparecer .15s ease; }
.lightbox-imagem { display: grid; place-items: center; padding: 34px 74px; min-height: 0; position: relative; }
.lightbox-imagem img { max-width: 100%; max-height: calc(100vh - 68px); object-fit: contain; box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.lightbox-lado { background: var(--superficie); padding: 26px 24px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.lightbox-lado h3 { font-family: var(--serifa); font-size: 30px; font-weight: 400; margin: 0; letter-spacing: -.02em; font-variation-settings: "opsz" 144; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-size: 24px; }
.lightbox-nav:hover { background: rgba(255,255,255,.22); }
.lightbox-nav.ant { left: 16px; }
.lightbox-nav.prox { right: 16px; }
.lightbox-fechar { position: absolute; top: 14px; left: 16px; background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 13px; font-weight: 500; }
.lightbox-fechar:hover { background: rgba(255,255,255,.2); }
.dados { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13.5px; margin: 0; padding: 14px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; color: var(--tinta); font-variant-numeric: tabular-nums; }
details.prompt summary { cursor: pointer; color: var(--tinta-2); font-size: 13px; font-weight: 600; }
details.prompt p { white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; color: var(--tinta-2); background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 12px; }
.atalhos { font-size: 12px; color: var(--suave); line-height: 1.9; }
.atalhos kbd { font-family: inherit; font-size: 11px; font-weight: 600; border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; background: var(--superficie-2); color: var(--tinta-2); }

/* ---------- Fila flutuante e avisos rápidos ---------- */
.fila-flutuante {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: 16px; padding: 14px 14px 14px 16px;
  box-shadow: var(--sombra-alta); display: flex; align-items: center; gap: 12px; width: 310px;
}
.fila-flutuante .girando { border-color: var(--linha-forte); border-top-color: var(--acento); width: 20px; height: 20px; flex: none; }
.fila-flutuante div { flex: 1; min-width: 0; }
.fila-flutuante strong { display: block; font-size: 13.5px; font-weight: 600; }
.fila-flutuante small { color: var(--suave); font-size: 12px; }
.fila-flutuante .progresso { background: var(--linha-forte); height: 4px; margin-top: 8px; }
.fila-flutuante .progresso > i { background: var(--acento); }
.fila-flutuante button { background: none; border: 0; color: var(--suave); cursor: pointer; font-size: 12.5px; font-weight: 500; }
.fila-flutuante button:hover { color: var(--tinta); }
.toasts { position: fixed; top: 20px; right: 20px; z-index: 70; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--linha-forte); padding: 12px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 500; box-shadow: var(--sombra-alta); max-width: 380px; animation: entrar .2s ease; }
.toast.erro { background: var(--erro-fundo); color: var(--erro); border-color: #4A231E; }
.toast.ok { background: var(--ok-fundo); color: var(--ok); border-color: #1F3D2C; }
@keyframes entrar { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Telas de acesso (login / instalação) ---------- */
.tela-acesso { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--fundo); }
.acesso-cartao { width: min(410px, 100%); background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 22px; padding: 34px; box-shadow: var(--sombra-alta); }
.acesso-largo { width: min(580px, 100%); }
.marca-grande { padding: 0 0 26px; }
.marca-grande strong { font-size: 27px; }
.marca-grande .marca-o { width: 46px; height: 46px; font-size: 25px; }
.lista-verificacao { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; }
.lista-verificacao li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.lista-verificacao small { display: block; color: var(--suave); }
.lista-verificacao .indicador { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.lista-verificacao .ok .indicador { background: var(--ok-fundo); color: var(--ok); }
.lista-verificacao .falha .indicador { background: var(--erro-fundo); color: var(--erro); }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox-lado { max-height: 45vh; }
  .lightbox-imagem { padding: 20px 58px; }
  .lightbox-imagem img { max-height: 50vh; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; padding: 12px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .marca { padding: 0 8px 0 0; }
  .marca small { display: none; }
  .menu { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .menu a { white-space: nowrap; padding: 8px 12px; }
  .lateral-rodape { margin: 0 0 0 auto; border: 0; padding: 0; }
  .usuario div { display: none; }
  .conteudo { padding: 24px 16px 120px; }
  .cabecalho h1 { font-size: 34px; }
  .linha-2, .linha-3 { grid-template-columns: 1fr; }
  .fila-flutuante { left: 16px; right: 16px; width: auto; bottom: 16px; }
  .filtros select { min-width: 0; flex: 1 1 100%; }
  .grade-artes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .arte-acoes .botao { padding: 0 6px; }
  .barra-acoes .grupo-botoes, .barra-acoes .grupo-botoes .botao { flex: 1 1 auto; }
  .kpi strong { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   Menu agrupado
   ===================================================================== */
.menu-grupo { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); padding: 16px 12px 6px; }
.menu-grupo:first-child { padding-top: 0; }
.lateral { overflow-y: auto; }

/* =====================================================================
   Marketing
   ===================================================================== */
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.link-acao { background: none; border: 0; padding: 0; color: var(--acento-texto); font-weight: 600; cursor: pointer; text-decoration: none; font-size: 13px; }
.link-acao:hover { text-decoration: underline; }
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--suave); text-decoration: none; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.voltar svg { width: 15px; height: 15px; }
.voltar:hover { color: var(--tinta); }
.kpi-texto { font-family: var(--serifa) !important; font-weight: 500 !important; font-size: 24px !important; letter-spacing: -.01em !important; line-height: 1.2 !important; }
.linha-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mkt-duas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mkt-coluna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Introdução do agente */
.agente-passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.agente-passo { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); }
.agente-passo h3 { font-family: var(--serifa); font-weight: 500; font-size: 22px; margin: 4px 0 0; letter-spacing: -.015em; }
.agente-passo p { margin: 0; color: var(--tinta-2); font-size: 13.5px; flex: 1; }
.agente-passo .botao { align-self: flex-start; }

/* Agenda (lista por dia) */
.agenda-dia { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.agenda-dia:last-child { border-bottom: 0; }
.agenda-dia.hoje .agenda-data strong { background: var(--acento); color: #fff; }
.agenda-data { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }
.agenda-data strong { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; font-weight: 600; background: var(--chip); font-variant-numeric: tabular-nums; }
.agenda-data span { font-size: 11.5px; color: var(--suave); text-transform: lowercase; }
.agenda-posts { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.post-linha {
  display: grid; grid-template-columns: 112px 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
  text-align: left; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: var(--tinta);
  transition: border-color .15s, box-shadow .15s;
}
.post-linha:hover { border-color: var(--linha-forte); box-shadow: var(--sombra); }
.post-linha-canal { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); }
.post-linha-hora { font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.post-linha-titulo { min-width: 0; display: flex; flex-direction: column; }
.post-linha-titulo strong { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-linha-titulo small { color: var(--suave); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-comemorativa { font-size: 12px; font-weight: 600; color: var(--bronze); background: var(--bronze-claro); border-radius: 8px; padding: 4px 10px; align-self: flex-start; }

/* Datas comemorativas */
.datas-lista { display: flex; flex-direction: column; }
.data-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--linha); }
.data-item:last-child { border-bottom: 0; }
.data-item small { display: block; color: var(--suave); font-size: 12.5px; }
.data-dia { display: flex; flex-direction: column; align-items: center; line-height: 1.1; border: 1px solid var(--linha); border-radius: 10px; padding: 5px 0; }
.data-dia strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.data-dia span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 600; }

/* Mini listas */
.camp-lista-mini, .plano-mini + .plano-mini { display: flex; flex-direction: column; }
.camp-mini, .plano-mini { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; }
.camp-mini:last-child { border-bottom: 0; }
.camp-mini span, .plano-mini span { color: var(--suave); font-size: 12.5px; }
.camp-mini:hover strong, .plano-mini:hover strong { color: var(--acento-texto); }
.plano-mini .progresso { margin-top: 6px; height: 4px; }
.plano-mini:last-of-type { border-bottom: 0; margin-bottom: 8px; }

/* Marca */
.marca-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 8px; }

/* Planejamentos */
.planos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.plano-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; }
.plano-cartao:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9); border-color: var(--linha-forte); }
.plano-cartao h3 { font-family: var(--serifa); font-weight: 500; font-size: 24px; margin: 0; letter-spacing: -.015em; }
.plano-cartao p { margin: 0; color: var(--suave); font-size: 13.5px; }
.plano-numeros { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.plano-numeros strong { color: var(--tinta); }
.canais-pontos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.canais-pontos > span { display: inline-flex; align-items: center; gap: 5px; }
.canais-pontos small { color: var(--suave); font-size: 12px; }

/* Novo planejamento: canais */
.canais-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.canal-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.canal-cartao.sel { border-color: var(--cor); box-shadow: 0 0 0 1px var(--cor); }
.canal-toggle { background: none; border: 0; text-align: left; padding: 14px 16px 10px; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; color: var(--tinta); }
.canal-toggle strong { font-weight: 600; font-size: 14px; }
.canal-toggle small { grid-column: 2; color: var(--suave); font-size: 12px; }
.canal-cartao:not(.sel) .canal-toggle { opacity: .7; }
.contador-freq { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--linha); padding: 6px 8px; font-size: 13px; color: var(--tinta-2); }
.contador-freq.vazio { color: var(--suave); justify-content: center; padding: 11px 8px; font-size: 12.5px; }
.contador-freq strong { font-size: 15px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.contador-freq button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--linha-forte); background: var(--superficie); cursor: pointer; font-size: 17px; line-height: 1; color: var(--tinta); }
.contador-freq button:hover { border-color: var(--tinta-2); }

/* Planejamento: etapas e estratégia */
.etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.etapa { display: flex; gap: 12px; align-items: flex-start; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; min-width: 0; }
.etapa > div { min-width: 0; flex: 1; }
.etapa strong { display: block; font-weight: 600; }
.etapa small { display: block; color: var(--suave); font-size: 12.5px; margin-bottom: 8px; }
.etapa .progresso { height: 4px; }
.etapa-icone { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--linha-forte); display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 700; }
.etapa.ok .etapa-icone { background: var(--ok); border-color: var(--ok); color: #fff; }
.estrategia blockquote { font-family: var(--serifa); font-size: 27px; font-weight: 400; line-height: 1.25; letter-spacing: -.015em; margin: 6px 0 14px; max-width: 34ch; font-variation-settings: "opsz" 144; text-wrap: balance; }
.estrategia > p { color: var(--tinta-2); max-width: 75ch; margin: 0 0 18px; }
.linha-editorial { border-top: 1px solid var(--linha); padding-top: 16px; margin-bottom: 18px; }
.linha-editorial p { margin: 0; color: var(--tinta-2); max-width: 75ch; }
.pilares { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pilar { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; }
.pilar strong { font-family: var(--serifa); font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.pilar p { margin: 6px 0; font-size: 13px; color: var(--tinta-2); }
.pilar ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--suave); }

.meses-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mes-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); }
.mes-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.mes-cartao h3 { font-family: var(--serifa); font-weight: 500; font-size: 22px; margin: 0; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.mes-cartao > p { margin: 0; color: var(--tinta-2); font-size: 13.5px; }
.mes-campanhas { display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--bronze); padding-left: 10px; }
.mes-campanhas strong { display: block; font-size: 13px; font-weight: 600; }
.mes-campanhas span { font-size: 12px; color: var(--suave); }
.mes-cartao .grupo-botoes { margin-top: auto; padding-top: 4px; }

/* Campanhas */
.camp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.camp-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); }
.camp-cartao h3 { font-family: var(--serifa); font-weight: 500; font-size: 23px; margin: 0; letter-spacing: -.015em; line-height: 1.15; }
.camp-periodo { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.camp-periodo small { color: var(--suave); font-weight: 500; margin-left: 6px; font-size: 12.5px; }
.camp-oferta { margin: 0; color: var(--tinta-2); font-size: 13.5px; }
.camp-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--linha); }
.cupom { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 700; letter-spacing: .06em; border: 1.5px dashed var(--bronze); color: var(--bronze); border-radius: 6px; padding: 1px 8px; }

/* Calendário */
.cal-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-barra select { width: auto; min-width: 220px; height: 36px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav strong { font-family: var(--serifa); font-weight: 500; font-size: 26px; letter-spacing: -.015em; min-width: 190px; text-align: center; }
.segmentado { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 10px; padding: 3px; background: var(--superficie); }
.segmentado button { border: 0; background: none; padding: 5px 14px; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--suave); }
.segmentado button.sel { background: var(--acento); color: #fff; }
.cal-campanhas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-campanhas:empty { display: none; }
.cal-campanha { display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 1px solid var(--linha); border-left: 3px solid var(--bronze); border-radius: 10px; background: var(--superficie); padding: 8px 12px; cursor: pointer; color: var(--tinta); }
.cal-campanha strong { font-size: 13px; }
.cal-campanha span { font-size: 12px; color: var(--suave); }
.cal-campanha:hover { border-color: var(--linha-forte); border-left-color: var(--bronze); }
.cal-grade-rolagem { overflow-x: auto; border-radius: var(--raio); }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); background: var(--linha); gap: 1px; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; min-width: 860px; }
.cal-semana { background: var(--superficie-2); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); padding: 10px 10px; }
.cal-dia { background: var(--superficie); min-height: 132px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-dia.fora { background: var(--superficie-2); }
.cal-dia.passado { background: #121214; }
.cal-dia.passado .cal-dia-topo span { color: var(--suave); }
.cal-dia-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; min-width: 0; }
.cal-dia-topo span { font-size: 13px; font-weight: 600; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; flex: none; }
.cal-dia.hoje .cal-dia-topo span { background: var(--acento); color: #fff; }
.cal-dia-topo em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--bronze); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-chip {
  display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  border: 0; border-radius: 6px; padding: 4px 6px 4px 8px; font-size: 11.5px; line-height: 1.3; color: var(--tinta);
  background: color-mix(in srgb, var(--cor) 11%, var(--superficie)); box-shadow: inset 2.5px 0 0 var(--cor);
}
.post-chip:hover { background: color-mix(in srgb, var(--cor) 20%, var(--superficie)); }
.post-chip.com-erro { box-shadow: inset 2.5px 0 0 var(--erro), 0 0 0 1px var(--erro-fundo); }
.post-chip-hora { color: var(--suave); font-variant-numeric: tabular-nums; flex: none; }
.post-chip-titulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.post-chip-marca { flex: none; font-size: 10px; color: var(--tinta-2); }
.cal-mais { border: 0; background: none; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--acento-texto); cursor: pointer; padding: 2px 6px; }
.cal-legenda { display: flex; gap: 16px; flex-wrap: wrap; color: var(--suave); font-size: 12px; margin-top: 10px; }
.lista-cal { padding: 6px 22px; }

/* Modal do post */
.post-topo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.canal-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cor) 12%, var(--superficie)); color: var(--tinta); }
details.secao { border: 1px solid var(--linha); border-radius: 12px; padding: 0 14px; background: var(--superficie-2); }
details.secao > summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 13.5px; color: var(--tinta-2); }
details.secao[open] { padding-bottom: 14px; }
.secao-conteudo { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--linha); padding-top: 16px; }
.secao-titulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.secao-titulo h4 { font-family: var(--serifa); font-weight: 500; font-size: 22px; margin: 0; letter-spacing: -.015em; }
.vazio-conteudo { text-align: center; padding: 22px 16px; border: 1px dashed var(--linha-forte); border-radius: 14px; background: var(--superficie-2); }
.vazio-conteudo p { margin: 0 auto 14px; color: var(--tinta-2); max-width: 52ch; }
.gerando-conteudo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--acento-claro); color: var(--acento-texto); font-weight: 600; }
.gerando-conteudo .girando { width: 20px; height: 20px; }
.ajuste-ia { display: flex; gap: 8px; align-items: center; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 8px; }
.ajuste-ia input { border: 0; background: transparent; height: 34px; }
.ajuste-ia input:focus { box-shadow: none; }
.arte-vinculo { display: flex; gap: 12px; align-items: center; }
.arte-vinculo img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--linha); }
.arte-vinculo strong { display: block; font-size: 13.5px; margin-bottom: 6px; }
.roteiro { border: 1px solid var(--linha); border-radius: 12px; padding: 14px; background: var(--superficie-2); display: flex; flex-direction: column; gap: 10px; }
.roteiro-topo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--suave); }
.roteiro-topo strong { color: var(--tinta); font-size: 14px; }
.roteiro-gancho { margin: 0; font-size: 14px; font-weight: 600; }
.roteiro-gancho span { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--acento); border-radius: 999px; padding: 2px 8px; margin-right: 8px; vertical-align: 2px; }
.roteiro .tabela td { font-size: 13px; vertical-align: top; }
.arte-escolha { border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; background: var(--superficie); padding: 0; cursor: pointer; text-align: left; }
.arte-escolha img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.arte-escolha span { display: block; padding: 6px 8px; font-size: 11.5px; color: var(--tinta-2); }
.arte-escolha:hover { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.camp-detalhe .dados { margin-top: 14px; }

@media (max-width: 1100px) {
  .agente-passos, .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-duas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .menu-grupo { display: none; }
  .lateral { overflow: visible; }
  .agente-passos, .etapas, .marca-grade, .linha-4 { grid-template-columns: minmax(0, 1fr); }
  .post-linha { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .post-linha-titulo { grid-column: 1 / -1; grid-row: 2; }
  .post-linha .etiquetas { grid-column: 1 / -1; }
  .post-linha-hora { text-align: right; }
  .cal-nav strong { min-width: 0; font-size: 21px; }
  .cal-barra select { min-width: 0; }
  .lista-cal { padding: 4px 14px; }
  .estrategia blockquote { font-size: 22px; }
  .data-item { grid-template-columns: 46px minmax(0, 1fr); }
  .data-item .botao { grid-column: 2; justify-self: start; }
}

.acesso-rodape { text-align: center; margin: 18px 0 0; color: var(--suave); font-size: 13.5px; }
.acesso-rodape a { color: var(--acento-texto); font-weight: 600; text-decoration: none; }
.acesso-rodape a:hover { text-decoration: underline; }

/* =====================================================================
   1.3 — Pesquisa, estilos, mockups, ambientes, arquivos, produtos,
   vídeos e e-mails
   ===================================================================== */
.arte-estilo { font-style: normal; color: var(--suave); }
.arte-estilo::before { content: " · "; }
.opcao-link { border-style: dashed; color: var(--suave); text-decoration: none; }
.opcao-link:hover { color: var(--tinta); }
.segmentado-titulo { margin-bottom: 14px; }
.segmentado-titulo a { padding: 5px 16px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--suave); text-decoration: none; font-family: var(--redonda); }
.segmentado-titulo a:hover { color: var(--tinta); }
.segmentado-titulo a.sel { background: var(--acento); color: #fff; }
.ponto-g { width: 12px; height: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.selo.ok { background: var(--ok); color: #fff; }
.selo.info { background: var(--info); color: #0E1620; }
.selo.ouro { background: var(--acento); color: #fff; }
.titulo-grande { font-family: var(--serifa); font-weight: 500; font-size: 28px; margin: 0 0 4px; letter-spacing: -.02em; }
.cabecalho-secao { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 34px 0 18px; }
.cabecalho-secao .titulo-secao { margin-bottom: 6px; }
.cabecalho-secao p { margin: 0; }
.cabecalho-secao select { width: auto; min-width: 0; max-width: 100%; }
.cabecalho-secao > div { min-width: 0; max-width: 100%; }

/* Pesquisa */
.chip-remover { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--chip); color: var(--tinta); font-size: 13.5px; font-weight: 500; }
.chip-remover button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--suave); cursor: pointer; font-size: 17px; line-height: 1; }
.chip-remover button:hover { background: var(--linha-forte); color: var(--tinta); }
input.campo-chip { width: 210px; height: 36px; border-radius: 999px; padding: 0 14px; font-size: 13.5px; border-style: dashed; }
.pesq-resumo { font-size: 16px; line-height: 1.6; color: var(--tinta-2); max-width: 80ch; margin: 0 0 22px; }
.demandas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 18px; }
.demanda { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sombra); }
.demanda-topo { display: flex; gap: 14px; align-items: flex-start; }
.demanda-topo h3 { font-family: var(--serifa); font-weight: 500; font-size: 20px; margin: 0 0 4px; letter-spacing: -.01em; }
.demanda-topo p { margin: 0; color: var(--suave); font-size: 13.5px; line-height: 1.5; }
.demanda-pos { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--acento-claro); color: var(--acento-texto); display: grid; place-items: center; font: 700 14px var(--redonda); }
.forca { position: relative; height: 8px; border-radius: 999px; background: var(--chip); }
.forca i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--acento-forte), var(--acento-texto)); }
.forca span { position: absolute; right: 0; top: -20px; font-size: 11.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.termos-reais { display: flex; flex-wrap: wrap; gap: 6px; }
.termo { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); color: var(--tinta-2); }
.termo.mais { color: var(--suave); }
.dados-compacto { padding: 12px 0; font-size: 13px; }
.demanda .grupo-botoes { margin-top: auto; }
.termos-todos { margin-top: 26px; }

/* Mockups */
.mockup-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.mockup-previa { background: var(--superficie-2); border-radius: 12px; padding: 14px; display: grid; place-items: center; }
.mockup-previa canvas { max-width: 100%; max-height: 560px; height: auto; border-radius: 6px; }
.ambientes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.ambiente-cartao { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--superficie); color: var(--tinta); cursor: pointer; box-shadow: var(--sombra); font: inherit; transition: border-color .15s, box-shadow .15s; }
.ambiente-cartao.fixo { cursor: default; }
.ambiente-cartao.sel { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--sombra); }
.ambiente-cartao.inativo { opacity: .5; }
.ambiente-cartao canvas { width: 100%; height: auto; aspect-ratio: 3/2; background: var(--superficie-2); display: block; }
.ambiente-cartao > span { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 13.5px; }
.ambiente-cartao > span em { font-style: normal; color: var(--acento-texto); font-weight: 700; }
.ambiente-img { position: relative; aspect-ratio: 3/2; background: var(--superficie-2); }
.ambiente-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ambiente-img svg, .marcador svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ambiente-img polygon, .marcador polygon { fill: rgba(200,100,59,.28); stroke: var(--acento-texto); stroke-width: .5; vector-effect: non-scaling-stroke; }
.marcador { position: relative; user-select: none; touch-action: none; border-radius: 10px; overflow: hidden; }
.marcador img { width: 100%; display: block; }
.marcador polygon { stroke-width: 2; }
.marcador-ponto { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 3px solid var(--acento); box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: grab; touch-action: none; }
.marcador-ponto:active { cursor: grabbing; transform: scale(1.15); }
.arte-link { text-decoration: none; color: inherit; }

/* Arquivos */
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; margin: -14px 0 22px; color: var(--suave); }
.migalhas a { color: var(--tinta-2); text-decoration: none; font-weight: 600; }
.migalhas a:last-child { color: var(--tinta); }
.migalhas a:hover { color: var(--acento-texto); }
.arquivos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.item-arq { position: relative; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); overflow: hidden; cursor: pointer; box-shadow: var(--sombra); transition: border-color .15s; }
.item-arq:hover { border-color: var(--linha-forte); }
.item-capa { aspect-ratio: 4/3; background: var(--superficie-2); display: grid; place-items: center; color: var(--suave); }
.item-capa img { width: 100%; height: 100%; object-fit: cover; }
.item-capa svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.item-arq.pasta .item-capa svg { color: var(--acento-texto); }
.item-nome { padding: 10px 40px 12px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-nome strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-nome small { font-size: 12px; color: var(--suave); }
.item-menu { position: absolute; right: 6px; bottom: 10px; width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--suave); cursor: pointer; display: grid; place-items: center; }
.item-menu:hover { background: var(--chip); color: var(--tinta); }
.item-menu svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.arvore { display: flex; flex-direction: column; max-height: 52vh; overflow: auto; border: 1px solid var(--linha); border-radius: 10px; }
.arvore-item { display: flex; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--linha); background: none; color: var(--tinta); text-align: left; padding: 10px 12px; cursor: pointer; font: inherit; font-size: 14px; }
.arvore-item:hover { background: var(--superficie-2); }
.arvore-item svg { width: 17px; height: 17px; fill: none; stroke: var(--acento-texto); stroke-width: 1.6; flex: none; }
.menu-acoes { display: flex; flex-direction: column; gap: 8px; }
.menu-acoes .botao { justify-content: flex-start; }

/* Produtos */
.produto-cartao { position: relative; }
.produto-check { position: absolute; top: 10px; right: 10px; z-index: 3; }
.produto-check input { width: 20px; height: 20px; accent-color: var(--acento); }
.produto-titulo { padding: 2px 14px 6px; font-size: 13.5px; font-weight: 600; line-height: 1.35; min-height: 2.7em; }
.produto-cartao .arte-imagem { display: block; aspect-ratio: 4/5; }
.produto-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.produto-imagens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.produto-imagens a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--superficie-2); }
.produto-imagens a.principal { grid-column: 1 / -1; aspect-ratio: auto; }
.produto-imagens img { width: 100%; height: 100%; object-fit: cover; display: block; }
.descricao-previa { padding: 14px 16px; border-radius: 10px; background: #fff; color: #2b2724; font-size: 14.5px; line-height: 1.6; }
.descricao-previa h2, .descricao-previa h3 { color: #1d1b19; font-family: var(--serifa); font-weight: 500; }

/* Vídeos */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kanban-coluna { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.kanban-coluna h3 { margin: 2px 4px 4px; font: 700 13px var(--redonda); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); display: flex; justify-content: space-between; }
.kanban-coluna h3 .contador { color: var(--suave); }
.kanban-vazio { text-align: center; color: var(--suave); margin: 18px 0; }
.video-cartao { border: 1px solid var(--linha); border-left: 3px solid var(--cor); border-radius: 12px; background: var(--superficie-2); overflow: hidden; }
.video-abrir { display: flex; flex-direction: column; gap: 5px; width: 100%; border: 0; background: none; color: var(--tinta); text-align: left; padding: 12px; cursor: pointer; font: inherit; }
.video-abrir:hover { background: rgba(255,255,255,.03); }
.video-abrir strong { font-size: 14px; line-height: 1.35; }
.video-abrir small { color: var(--suave); font-size: 12px; }
.video-abrir em { font-size: 12.5px; color: var(--tinta-2); line-height: 1.4; }
.video-rodape { display: flex; gap: 6px; padding: 0 10px 10px; }
.video-rodape select { height: 32px; font-size: 12.5px; padding: 0 8px; flex: 1; min-width: 0; }
.roteiro-editavel input, .roteiro-editavel textarea { font-size: 13px; padding: 6px 8px; min-width: 120px; }
.roteiro-editavel td { vertical-align: top; }

/* E-mails */
.email-grupo .secao-titulo { margin-bottom: 14px; }
.lista-emails { display: flex; flex-direction: column; }
.email-linha { display: grid; grid-template-columns: 30px 70px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 0; border-top: 1px solid var(--linha); background: none; color: var(--tinta); text-align: left; padding: 12px 6px; cursor: pointer; font: inherit; }
.email-linha:hover { background: var(--superficie-2); }
.email-num { width: 26px; height: 26px; border-radius: 50%; background: var(--acento-claro); color: var(--acento-texto); display: grid; place-items: center; font: 700 12.5px var(--redonda); }
.email-data { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.email-data small, .email-texto small { color: var(--suave); font-weight: 400; font-size: 12px; }
.email-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.email-texto strong, .email-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; }
.email-previa { position: sticky; top: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--linha); background: #f3efe9; }
.email-caixa { background: #fff; color: #222; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; border-bottom: 1px solid #e5ded5; }
.email-caixa span { color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-previa iframe { width: 100%; height: 640px; border: 0; display: block; background: #f3efe9; }

@media (max-width: 860px) {
  .mockup-grade, .produto-layout, .email-editor { grid-template-columns: minmax(0, 1fr); }
  .email-linha { grid-template-columns: 26px 56px minmax(0, 1fr); }
  .email-linha .etiqueta { display: none; }
  input.campo-chip { width: 100%; }
}
.passos-oa { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--tinta-2); line-height: 1.55; }
.passos-oa a { color: var(--acento-texto); }
.passos-oa code { background: var(--chip); padding: 1px 6px; border-radius: 5px; }

/* =====================================================================
   1.4 — formulário com menus, esteira, modelos de moldura, vídeo
   ===================================================================== */
.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.leva-form { margin-bottom: 26px; }
.leva-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
.leva-grade > label, .campo-multi { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 13.5px; min-width: 0; }
.leva-tema { grid-column: span 2; }
.linha-campo { display: flex; gap: 8px; align-items: center; }
.linha-campo select { flex: 1; min-width: 0; }
.linha-campo input { width: 90px; flex: none; }
.rotulo-campo small { color: var(--suave); font-weight: 400; }
.multi { position: relative; }
.multi summary { list-style: none; height: 44px; display: flex; align-items: center; padding: 0 38px 0 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: var(--superficie); cursor: pointer; font-weight: 400; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.multi summary::-webkit-details-marker { display: none; }
.multi summary::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 1.6px solid var(--suave); border-bottom: 1.6px solid var(--suave); transform: translateY(-70%) rotate(45deg); }
.multi[open] summary { border-color: var(--acento); }
.multi-lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--superficie-2); border: 1px solid var(--linha-forte); border-radius: 12px; padding: 6px; box-shadow: var(--sombra-alta); max-height: 320px; overflow: auto; display: flex; flex-direction: column; }
.multi-item { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-weight: 500 !important; font-size: 14px !important; cursor: pointer; }
.multi-item:hover { background: var(--chip); }
.multi-item input { width: 17px; height: 17px; accent-color: var(--acento); margin: 0; }
.multi-link { padding: 8px 10px; font-size: 13px; color: var(--acento-texto); border-top: 1px solid var(--linha); margin-top: 4px; }
.leva-grade .amostras i { width: 20px; height: 20px; }

/* Esteira de produção */
.esteira { display: flex; flex-direction: column; gap: 12px; }
.esteira-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; box-shadow: var(--sombra); }
.esteira-capas { display: flex; gap: 4px; }
.esteira-capas img { width: 64px; height: 84px; object-fit: cover; border-radius: 6px; background: var(--superficie-2); }
.esteira-capas.pecas-2 img, .esteira-capas.pecas-3 img { width: 46px; height: 68px; }
.esteira-corpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.esteira-topo { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.esteira-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.etapas-linha { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.etapas-linha li { font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--superficie-2); color: var(--suave); border: 1px solid var(--linha); display: flex; flex-direction: column; line-height: 1.3; }
.etapas-linha li small { font-weight: 400; font-size: 11px; }
.etapas-linha li.ok { color: var(--ok); background: var(--ok-fundo); border-color: #1F3D2C; }
.etapas-linha li.atual { color: var(--acento-texto); border-color: var(--acento); }
.etapas-linha li.rodando { color: #fff; background: var(--acento); border-color: var(--acento); }
.etapas-camp { margin: 16px 0 6px; }
.etapas-camp li { border-radius: 12px; padding: 7px 13px; }
.esteira-corpo .girando { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; }
.camp-cartao.sugerida { border-color: var(--alerta); border-style: dashed; }
.interruptor.mini { font-size: 12px !important; color: var(--suave); gap: 6px !important; }
.interruptor.mini input { width: 30px; height: 18px; }
.interruptor.mini input::after { width: 12px; height: 12px; }
.interruptor.mini input:checked::after { left: 15px; }

/* Modelos de moldura */
.modelos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.modelo-cartao .arte-imagem { cursor: default; display: grid; place-items: center; }
.modelo-cartao canvas { width: 100%; height: 100%; object-fit: contain; }
.modelo-editor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; }
.marcador img.marcador-frente { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.marcador-ponto { display: grid; place-items: center; font: 800 11px var(--redonda); color: var(--acento); }

/* Vídeo */
.video-painel { border: 1px solid var(--linha-forte); border-radius: 12px; padding: 14px 16px; background: var(--superficie-2); display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.video-painel.aguardando { border-color: var(--alerta); border-style: dashed; }
.video-painel p { margin: 4px 0 0; }
.video-painel.com-cenas { flex-direction: column; align-items: stretch; }
.cenas-video { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cena-video { display: flex; flex-direction: column; gap: 8px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 8px; }
.cena-video.pronto { border-color: #1F3D2C; }
.cena-video.erro { border-color: #4A231E; }
.cena-midia { position: relative; height: 300px; background: #000; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.cena-midia img, .cena-midia video { width: 100%; height: 100%; object-fit: cover; }
.cena-sem { color: var(--suave); font-size: 12.5px; text-align: center; padding: 10px; }
.cena-video textarea { font-size: 12.5px; padding: 7px 9px; }
.cena-video .grupo-botoes { flex-wrap: wrap; gap: 6px; }
.cena-video .botao-p { height: 32px; padding: 0 10px; font-size: 12.5px; }
.cena-video.gerando .cena-midia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%); background-size: 200% 100%; animation: brilho 1.4s linear infinite; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (max-width: 980px) {
  .leva-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .modelo-editor { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .leva-grade { grid-template-columns: minmax(0, 1fr); }
  .leva-tema { grid-column: auto; }
  .esteira-item { grid-template-columns: minmax(0, 1fr); }
  .esteira-acoes { justify-content: flex-start; }
}

/* =====================================================================
   1.6 — Administrativo › Envios
   ===================================================================== */
.env-etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.env-etapas > div { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.env-etapas strong { font: 700 26px var(--redonda); }
.env-etapas span { color: var(--suave); font-size: 13px; margin-bottom: 4px; }
.env-lista { display: flex; flex-direction: column; gap: 12px; }
.env-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px; }
.env-cartao.caro { border-color: #4A231E; }
.env-cartao.aprovado { border-color: #1F3D2C; }
.env-cartao.carrinho { opacity: .8; }
.env-topo { display: grid; grid-template-columns: 26px minmax(0, 1.1fr) minmax(0, 1.4fr) auto auto; gap: 14px; align-items: center; }
.env-topo strong { display: block; font-size: 14.5px; }
.env-topo small { color: var(--suave); font-size: 12.5px; }
.env-check input { width: 18px; height: 18px; accent-color: var(--acento); }
.env-valor { text-align: right; display: flex; flex-direction: column; }
.env-corpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.env-bloco { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.env-bloco .titulo-secao { margin: 0; }
.env-itens { margin: 0; padding-left: 18px; color: var(--tinta-2); font-size: 13.5px; }
.env-volume { display: flex; gap: 8px; align-items: center; }
.env-volume select { flex: 1; min-width: 0; height: 38px; font-size: 13px; }
.env-vol-n { width: 22px; height: 22px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font: 700 11.5px var(--redonda); flex: none; }
.env-bloco > select { height: 40px; font-size: 13.5px; }
.env-preco { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.env-preco strong { font: 700 22px var(--redonda); }
.env-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid var(--linha); padding-top: 10px; }
.env-acoes .botao svg, .env-volume .botao svg { width: 15px; height: 15px; }
.env-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.env-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; }
.menu a.menu-sub { padding-left: 30px; font-size: 14px; }
@media (max-width: 860px) {
  .env-etapas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .env-topo { grid-template-columns: 26px minmax(0, 1fr); }
  .env-topo .env-cliente, .env-topo .env-valor, .env-topo .etiqueta { grid-column: 2; text-align: left; }
  .env-corpo, .env-form { grid-template-columns: minmax(0, 1fr); }
}

/* 1.7 · Fechamentos */
.fech-leitura { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; }
.fech-leitura svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; margin-top: 2px; }
.fech-gerar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.fech-gerar > label { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.fech-lista tbody tr { cursor: pointer; }
.fech-topo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.fech-topo .cartao { margin: 0 0 16px; }
.fech-ajustes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; align-items: flex-start; }
.fech-ajuste { display: grid; grid-template-columns: minmax(0, 1fr) 110px 34px; gap: 6px; width: 100%; align-items: center; }
.fech-ajuste span { color: var(--suave); }
.fech-ajuste strong { text-align: right; }
.fech-contas { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 16px; padding-top: 12px; border-top: 1px solid var(--linha); }
.fech-contas dt { color: var(--suave); } .fech-contas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.fech-contas .fech-grande { font: 700 22px var(--redonda); color: var(--tinta); }
.fech-contas dd.fech-grande { color: var(--acento-texto); }
.fech-linhas select, .fech-linhas input { min-width: 120px; padding: 6px 8px; font-size: 13px; }
.fech-linhas .fech-preco { width: 96px; min-width: 0; text-align: right; }
.fech-linhas select.fech-falta { border-color: var(--alerta); }
.fech-prod span { display: block; max-width: 320px; }
.fech-prod small, .fech-linhas td small { display: block; color: var(--suave); font-size: 11.5px; }
.fech-linhas small.fech-motivo { color: var(--alerta); font-weight: 600; }
.fech-pend td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.fech-excluida td { opacity: .45; text-decoration: line-through; }
.fech-excluida td:last-child { opacity: 1; text-decoration: none; }
.fech-mapa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.fech-mapa label { display: flex; flex-direction: column; gap: 6px; }
.fech-amostra td, .fech-amostra th { white-space: nowrap; font-size: 12.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.fech-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fech-cli { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; margin: 0; }
.fech-cli:hover { border-color: var(--acento); }
.fech-cli.inativo { opacity: .6; }
.fech-cli small { color: var(--suave); }
.texto-erro { color: var(--erro); }
.fech-itens { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fech-item { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) 34px; gap: 6px; width: 100%; }
.fech-matriz th, .fech-matriz td { white-space: nowrap; }
.fech-matriz input { width: 110px; text-align: right; }
@media (max-width: 900px) { .fech-topo { grid-template-columns: 1fr; } .fech-mapa { grid-template-columns: 1fr 1fr; } }
.fech-link input { flex: 1; width: auto; min-width: 0; }
.fech-topo > * { min-width: 0; }
.fech-tab input, .fech-tab select { padding: 8px 10px; font-size: 14px; }
.fech-tab td:nth-child(1) input { min-width: 120px; } .fech-tab td:nth-child(2) input { min-width: 160px; }
.fech-tab .fech-tab-preco { width: 120px; text-align: right; }
.fech-tab-acoes { white-space: nowrap; text-align: right; }
.fech-colar { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.fech-colar textarea { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.fech-apelidos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fech-apelido { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 34px; gap: 8px; align-items: center; max-width: 620px; }
.fech-apelido span { color: var(--suave); text-align: center; }
.fech-sel-linha { min-width: 260px !important; max-width: 340px; }
/* 1.7.1 · volumes por pedido */
.env-nvol { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 8px; padding: 8px 10px; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio-p); }
.env-nvol > span:first-child { color: var(--suave); font-size: 13.5px; }
.env-passo { display: inline-flex; align-items: center; gap: 10px; }
.env-passo strong { font: 700 18px var(--redonda); min-width: 22px; text-align: center; }
.env-passo .botao { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 18px; }
.env-volume.proprio { flex-wrap: wrap; }
.env-medidas { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.env-medidas label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--suave); }
.env-medidas input { width: 66px; padding: 6px 6px; }
.fech-link { flex-wrap: wrap; }
.fech-link select { flex: 1 1 220px; min-width: 0; }
.env-volume select { flex: 1 1 200px; min-width: 0; }
@media (max-width: 700px) { .env-volume { flex-wrap: wrap; } }
.env-etapas .botao { white-space: normal; max-width: 100%; text-align: left; height: auto; min-height: 30px; }
.env-etapas > div { min-width: 0; }
/* 1.7.2 · observações e reenvios */
.fech-obs { margin-top: 3px; padding: 2px 6px; border-radius: 6px; background: var(--chip); color: var(--tinta) !important; display: inline-block !important; }
.fech-obs.reenvio { background: var(--alerta-fundo); color: var(--alerta) !important; font-weight: 600; }
.fech-obs.conferir { background: var(--erro-fundo); color: var(--erro) !important; font-weight: 600; }
.fech-reenvio td { background: rgba(221, 170, 74, .05); }
.fech-reenvio td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.fech-cols summary { cursor: pointer; color: var(--suave); font-size: 11.5px; margin-top: 3px; }
.fech-cols dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 12px; }
.fech-cols dt { color: var(--suave); } .fech-cols dd { margin: 0; }
.fech-acoes-linha { white-space: nowrap; text-align: right; }
.fech-acoes-linha .botao { margin-left: 4px; }
.fech-sub { font-size: 15px; margin: 22px 0 10px; color: var(--alerta); }
/* 1.8 · menu recolhível */
button.menu-grupo { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; border-radius: 8px; }
button.menu-grupo:hover { color: var(--tinta); }
button.menu-grupo:first-child { padding-top: 6px; }
.menu-seta { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .18s; }
button.menu-grupo.fechado .menu-seta { transform: rotate(-90deg); }
.menu-itens { display: flex; flex-direction: column; gap: 2px; }
.menu-itens.fechado, .menu-subs.fechado { display: none; }
.menu-pai { display: flex; align-items: center; gap: 2px; }
.menu-pai > a { flex: 1; min-width: 0; }
.menu-abrir { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--suave); cursor: pointer; }
.menu-abrir:hover { background: var(--superficie); color: var(--tinta); }
.menu-abrir .menu-seta { transform: rotate(-90deg); }
.menu-abrir.aberto .menu-seta { transform: none; }
.menu-subs { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 860px) {
  .menu-itens, .menu-subs, .menu-pai, .menu-itens.fechado, .menu-subs.fechado { display: contents; }
  .menu-abrir, button.menu-grupo { display: none; }
}
/* 1.8 · venda × custo */
.etiqueta.fech-tipo-cli { background: var(--info-fundo); color: var(--info); }
.etiqueta.fech-tipo-fab { background: var(--bronze-claro); color: var(--bronze); }
.fech-resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fech-resultado { margin: 0; }
.fech-resultado dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.fech-resultado dt { color: var(--suave); } .fech-resultado dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.fech-resultado .fech-grande { font: 700 20px var(--redonda); color: var(--tinta); padding-top: 6px; border-top: 1px solid var(--linha); }
.fech-resultado dd.fech-grande { color: var(--ok); } .fech-resultado dd.fech-grande.texto-erro { color: var(--erro); }
.fech-resultado dd small { font-size: 12px; color: var(--suave); font-weight: 600; }
.fech-tab-topo { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 320px); gap: 14px; }
@media (max-width: 700px) { .fech-tab-topo { grid-template-columns: 1fr; } }
.fech-obs.amostra { background: var(--info-fundo); color: var(--info) !important; font-weight: 600; }
.fech-motivo-amostra td { background: rgba(134, 173, 219, .05); }
.fech-motivo-amostra td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.fech-sub-amostra { color: var(--info); }
/* 1.9 · fechamentos: fábrica base, paspatur, gerencial */
.texto-ok { color: var(--ok); } .texto-alerta { color: var(--alerta); }
.fech-sub2 { font-size: 15px; margin: 22px 0 10px; }
.fech-pas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-width: 560px; }
.fech-pas-linha { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 34px; gap: 8px; }
.fech-previa { margin-top: 14px; padding: 12px 14px; border-radius: var(--raio-p); background: var(--info-fundo); color: var(--tinta); }
.fech-previa small { display: block; color: var(--suave); margin-top: 4px; }
.fech-faixa { display: block; color: var(--suave); font-size: 11.5px; }
.fech-lateral { display: flex; flex-direction: column; gap: 0; }
.fech-gestor { border-color: #3A3020; }
.fech-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fech-kpi { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.fech-kpi span { color: var(--suave); font-size: 13px; }
.fech-kpi strong { font: 700 24px var(--redonda); }
.fech-kpi small { color: var(--suave); font-size: 12px; }
.fech-kpi.destaque { border-color: var(--acento); }
.fech-sel-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.fech-sel-item { display: flex !important; flex-direction: row !important; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); cursor: pointer; font-weight: 500 !important; }
.fech-sel-item input { width: 18px; height: 18px; accent-color: var(--acento); margin-top: 2px; flex: none; }
.fech-sel-item small { display: block; color: var(--suave); }
.fech-alertas { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.fech-copiar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.fech-copiar select { width: auto; min-width: 220px; }
.fech-salvar-barra { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--fundo) 30%); max-width: 1040px; }
.fech-pas-tg { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); margin-top: 4px; font-weight: 500 !important; }
.fech-pas-tg input { width: 15px; height: 15px; accent-color: var(--acento); }
.fech-custo { display: block; color: var(--bronze); font-size: 11.5px; }
.fech-linha-pas td { color: var(--bronze); font-style: italic; }
.fech-tiny-ok { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; }
.fech-tiny-ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.env-form .fech-nome { grid-column: span 2; }
@media (max-width: 700px) { .env-form .fech-nome { grid-column: auto; } .fech-pas-linha { grid-template-columns: 1fr 1fr 34px; } }
/* 1.9.1 · medidas editáveis por envio */
.env-volume { flex-wrap: wrap; row-gap: 6px; }
.env-vol-acoes { display: inline-flex; gap: 6px; }
.env-volume.proprio select { border-color: var(--bronze); }
/* 1.9.2 · tamanhos personalizados */
.fech-pers { border-color: #4A3A1E; }
.fech-pers-tab td { vertical-align: middle; }
.fech-sugs { display: flex; gap: 6px; flex-wrap: wrap; }
.fech-sug { flex-direction: column; align-items: flex-start; height: auto; padding: 6px 10px; line-height: 1.25; }
.fech-sug small { color: var(--suave); font-size: 11.5px; font-weight: 500; }
/* 1.9.3 · envios: etapa da nota fiscal e abas */
.env-etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.env-etapa-alerta { border-color: var(--alerta) !important; }
.env-abas { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; border-bottom: 1px solid var(--linha); }
.env-abas button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--suave); padding: 10px 14px; font: 600 14px var(--sans); cursor: pointer; margin-bottom: -1px; }
.env-abas button:hover { color: var(--tinta); }
.env-abas button.ativa { color: var(--tinta); border-bottom-color: var(--acento); }
.env-aba-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--chip); color: var(--tinta); font-size: 12px; text-align: center; margin-left: 4px; }
.env-cartao.aguardando_nf { border-color: #4A3A1E; }
@media (max-width: 1100px) { .env-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .env-etapas { grid-template-columns: 1fr 1fr; } .env-abas { flex-wrap: nowrap; overflow-x: auto; } .env-abas button { white-space: nowrap; } }
.env-busca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.env-busca input { width: 300px; max-width: 100%; }

/* =====================================================================
   2.0 — menu em seções, fechamento em blocos, subir artes, loja virtual
   ===================================================================== */
.menu-sec { display: none; }
.menu-sec-bt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; border-radius: 999px; border: 0; background: none; cursor: pointer;
  font-family: var(--redonda); color: var(--tinta-2); font-weight: 700; font-size: 15px; text-align: left;
}
.menu-sec-bt svg:first-child { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--suave); flex: none; }
.menu-sec-bt .menu-seta { margin-left: auto; transform: rotate(-90deg); color: var(--suave); }
.menu-sec-bt.aberto .menu-seta { transform: none; }
.menu-sec-bt:hover { background: var(--superficie); color: var(--tinta); }
.menu-sec-bt.aberto { color: var(--tinta); }
.menu-subs { border-left: 1px solid var(--linha); margin-left: 24px; padding-left: 4px; }
.menu-subs a.menu-sub { padding-left: 14px; font-size: 14px; }
@media (max-width: 860px) {
  .menu-sec-bt { display: none; }
  .menu-subs { border: 0; margin: 0; padding: 0; }
}

/* 2.0 · fechamento em blocos */
.fx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 12px; }
.fx-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; color: var(--tinta); font-family: var(--sans); transition: border-color .15s, background .15s; min-width: 0; }
.fx-kpi:hover { border-color: var(--linha-forte); background: var(--superficie-2); }
.fx-kpi small { color: var(--suave); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.fx-kpi strong { font: 800 22px/1.2 var(--redonda); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fx-kpi span { color: var(--suave); font-size: 12px; }
.fx-kpi-total strong { color: var(--acento-texto); }
.fx-kpi-erro { border-color: #5a2a22; background: var(--erro-fundo); } .fx-kpi-erro strong { color: var(--erro); }
.fx-kpi-alerta { border-color: #4a3c1c; background: var(--alerta-fundo); } .fx-kpi-alerta strong { color: var(--alerta); }
.fx-kpi-ok strong { color: var(--ok); }
.fx-ferramentas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; font-size: 13px; }
.fx-bloco { padding: 0; overflow: hidden; }
.cartao.fx-bloco + .cartao.fx-bloco, .fx-bloco { margin: 0 0 12px; }
.fx-bloco-topo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 20px; background: none; border: 0; cursor: pointer; color: var(--tinta); text-align: left; font-family: var(--sans); }
.fx-bloco-topo:hover { background: var(--superficie-2); }
.fx-bloco-titulo { display: flex; align-items: center; gap: 10px; font: 700 17px var(--redonda); flex: none; }
.fx-bloco-resumo { color: var(--suave); font-size: 13px; flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-seta { width: 20px; height: 20px; flex: none; color: var(--suave); transform: rotate(-90deg); transition: transform .18s; }
.fx-bloco.aberto .fx-seta { transform: none; }
.fx-bloco-corpo { display: none; padding: 4px 20px 20px; border-top: 1px solid var(--linha); padding-top: 16px; }
.fx-bloco.aberto .fx-bloco-corpo { display: block; }
.fx-bloco-erro { border-color: #5a2a22; }
.fx-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; background: var(--chip); }
.fx-num.erro { background: var(--erro-fundo); color: var(--erro); } .fx-num.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.fx-mini { font-size: 12px; font-weight: 500; font-family: var(--sans); }
.fx-resumo-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.fx-resumo-grid > * { min-width: 0; }
.fx-resumo-grid .fech-total { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 16px; }
.fx-h3 { margin: 0 0 8px; font: 700 15px var(--redonda); }
.fx-gestor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fx-gestor > div { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.fx-gestor small { color: var(--suave); font-size: 12px; } .fx-gestor strong { font: 800 20px var(--redonda); font-variant-numeric: tabular-nums; }
.fx-gestor span { font-size: 12px; }
@media (max-width: 760px) {
  .fx-resumo-grid, .fx-gestor { grid-template-columns: 1fr; }
  .fx-bloco-topo { flex-wrap: wrap; padding: 14px 16px; }
  .fx-bloco-resumo { order: 3; flex-basis: 100%; text-align: left; white-space: normal; }
  .fx-seta { margin-left: auto; }
  .fx-bloco-corpo { padding: 14px 16px 16px; }
}

/* 2.0 · abas no topo (aprovação, espelho, preços) */
.abas-topo { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); margin: 0 0 16px; }
.abas-topo button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--suave); font: 700 14px var(--redonda); cursor: pointer; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.abas-topo button:hover { color: var(--tinta); }
.abas-topo button.ativa { color: var(--tinta); border-bottom-color: var(--acento); }
.abas-topo.abas-p { border: 0; margin: 0; }
.contador.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.loja-seguro { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; }
.loja-seguro svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.texto-alerta { color: var(--alerta); }

/* 2.0 · subir artes */
.subir-passos { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; flex-wrap: wrap; counter-reset: p; }
.subir-passos li { counter-increment: p; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linha); color: var(--suave); font-size: 13px; font-weight: 600; }
.subir-passos li::before { content: counter(p); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--chip); font-size: 12px; }
.subir-passos li.atual { color: var(--tinta); border-color: var(--acento); } .subir-passos li.atual::before { background: var(--acento); color: #fff; }
.subir-passos li.ok { color: var(--ok); } .subir-passos li.ok::before { content: '✓'; background: var(--ok-fundo); }
.subir-zona { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 34px 20px; border: 2px dashed var(--linha-forte); border-radius: 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.subir-zona svg { width: 34px; height: 34px; color: var(--acento-texto); }
.subir-zona strong { font: 700 17px var(--redonda); } .subir-zona span { color: var(--suave); font-size: 13px; max-width: 520px; }
.subir-zona:hover, .subir-zona.arrastando { border-color: var(--acento); background: var(--acento-claro); }
.subir-zona.desligada { opacity: .5; pointer-events: none; }
.subir-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 10px; }
.subir-opcoes label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; }
.subir-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.subir-obra { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.subir-obra.pecas-2, .subir-obra.pecas-3 { grid-column: span 2; }
.subir-pecas { display: flex; gap: 8px; }
.subir-peca { position: relative; margin: 0; flex: 1; min-width: 0; background: var(--fundo); border-radius: 10px; overflow: hidden; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; }
.subir-peca img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.subir-peca figcaption { position: absolute; left: 6px; bottom: 6px; font-size: 11px; background: rgba(0,0,0,.65); padding: 2px 6px; border-radius: 6px; color: #ddd; }
.subir-peca.ok { outline: 2px solid var(--ok); } .subir-peca.erro { outline: 2px solid var(--erro); } .subir-peca.enviando { opacity: .7; }
.subir-peca-acoes { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.subir-peca-acoes button { width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 16px; }
.subir-peca-acoes button svg { width: 14px; height: 14px; }
.subir-obra-info { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.subir-fim h2 { margin-top: 0; }
@media (max-width: 620px) { .subir-obra.pecas-2, .subir-obra.pecas-3 { grid-column: auto; } }

/* 2.0 · aprovar produtos */
.aprov-barra { justify-content: space-between; }
.aprov-lista { display: flex; flex-direction: column; gap: 16px; }
.aprov-cartao { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.aprov-cartao.sel { border-color: var(--acento); }
.aprov-galeria { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aprov-check { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(0,0,0,.7); border-radius: 8px; padding: 6px 7px; line-height: 0; }
.aprov-check input { width: 18px; height: 18px; }
.aprov-principal { background: var(--fundo); border-radius: 12px; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.aprov-principal img { width: 100%; height: 100%; object-fit: contain; }
.aprov-miniaturas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.aprov-miniaturas button { flex: none; width: 56px; height: 56px; padding: 0; border-radius: 8px; border: 2px solid transparent; overflow: hidden; background: var(--fundo); cursor: pointer; }
.aprov-miniaturas button.ativa { border-color: var(--acento); }
.aprov-miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aprov-dados { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aprov-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aprov-titulo { margin: 2px 0 0; font: 600 21px/1.25 var(--serifa); }
.aprov-url { color: var(--suave); font-size: 13px; overflow-wrap: anywhere; } .aprov-url strong { color: var(--info); font-weight: 600; }
.aprov-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.aprov-preco { display: flex; flex-direction: column; gap: 2px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; }
.aprov-preco strong { font: 800 20px var(--redonda); color: var(--acento-texto); } .aprov-preco span { color: var(--suave); font-size: 12.5px; }
.aprov-curta { margin: 0; color: var(--tinta-2); }
.aprov-tags { font-size: 12.5px; }
.aprov-acoes { margin-top: auto; padding-top: 6px; }
@media (max-width: 860px) { .aprov-cartao { grid-template-columns: 1fr; } }

/* 2.0 · produtos do site */
.loja-filtros { flex-wrap: wrap; } .loja-filtros > * { flex: 1 1 180px; width: auto; }
.loja-lote { justify-content: space-between; }
.loja-lista { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.loja-linha { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) 96px 64px 74px 100px auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--linha); }
.loja-linha:last-child { border-bottom: 0; }
.loja-linha.sel { background: var(--acento-claro); }
.loja-img { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--fundo); }
.loja-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loja-nome { display: flex; flex-direction: column; min-width: 0; } .loja-nome strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .loja-nome small { color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loja-num { display: flex; flex-direction: column; text-align: right; font-variant-numeric: tabular-nums; } .loja-num small { color: var(--suave); font-size: 11px; }
.loja-acoes { display: flex; gap: 2px; justify-content: flex-end; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; color: var(--suave); }
@media (max-width: 860px) {
  .loja-linha { grid-template-columns: 22px 52px minmax(0, 1fr) auto; }
  .loja-linha .loja-num:nth-of-type(n+2), .loja-linha > .etiqueta { display: none; }
  .loja-linha .loja-acoes { grid-column: 3 / -1; justify-content: flex-start; }
}

/* 2.0 · produtos modelo e preços */
.lm-modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.lm-modelo { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lm-modelo-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .lm-modelo-topo strong { font: 700 16px var(--redonda); }
.lm-modelo-corpo { display: flex; gap: 10px; align-items: center; min-width: 0; }
.lm-modelo-corpo img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.lm-modelo-corpo div { display: flex; flex-direction: column; min-width: 0; } .lm-modelo-corpo small { color: var(--suave); font-size: 12px; }
.lm-busca { display: flex; flex-direction: column; gap: 6px; }
.lm-res { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.lm-res button { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 6px; color: var(--tinta); cursor: pointer; font-family: inherit; }
.lm-res button:hover { border-color: var(--acento); }
.lm-res img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; }
.lm-res span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; } .lm-res small { color: var(--suave); font-size: 11.5px; }
.lm-papeis { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.lm-papeis label { display: flex; flex-direction: column; gap: 6px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; }
.lm-papeis label span { display: flex; flex-direction: column; } .lm-papeis small { color: var(--suave); font-size: 12px; }
.lm-grade th:first-child { text-align: left; }
.lm-preco { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.lm-preco.mudou { border-color: var(--alerta); color: var(--alerta); }

/* 2.0 · modelos de mockup e cadastro */
.md-etq { padding: 0 12px 4px; }
.produto-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.produto-cats .multi-item.sel { border-color: var(--acento); color: var(--tinta); }
.produto-precos { display: flex; flex-direction: column; margin-top: 14px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; }
.produto-precos strong { font: 800 19px var(--redonda); color: var(--acento-texto); } .produto-precos span { color: var(--suave); font-size: 12.5px; }
.abas-topo .contador { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--chip); color: var(--tinta-2); font-size: 11.5px; }
.abas-topo .contador.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.produto-cats .multi-item { border: 1px solid var(--linha); padding: 6px 10px; font-size: 13px !important; }
@media (max-width: 620px) {
  .secao-titulo { flex-wrap: wrap; gap: 8px; }
  .lm-preco { width: 84px; }
  .lm-grade th, .lm-grade td { padding-left: 4px; padding-right: 4px; }
}
#lm-aplicar { white-space: normal; text-align: left; height: auto; min-height: 40px; }