/* ============================================================
   Fábrica de Funis — sistema visual
   Neutro frio de alto contraste, um único acento quente.
   ============================================================ */
:root{
  --ground:#F6F6F7; --surface:#FFFFFF; --sunk:#EFEFF1; --fundo-campo:#FFFFFF;
  --ink:#18181B; --muted:#71717A; --fraco:#A1A1AA;
  --line:#E4E4E7; --line-forte:#D4D4D8;
  --accent:#EA580C; --accent-fraca:#FFF1E7; --accent-forte:#C2410C;
  --ok:#15803D; --ok-fraca:#ECFDF3;
  --bad:#B91C1C; --bad-fraca:#FEF2F2;
  --warn:#A16207; --warn-fraca:#FEFCE8;
  --r:6px;
  --sombra:0 1px 2px rgba(24,24,27,.06);
  --sombra-md:0 4px 16px -6px rgba(24,24,27,.16),0 1px 3px rgba(24,24,27,.06);
  --topo-h:56px;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){
  --ground:#0E0E10; --surface:#18181B; --sunk:#131316; --fundo-campo:#1F1F23;
  --ink:#FAFAFA; --muted:#A1A1AA; --fraco:#71717A;
  --line:#27272A; --line-forte:#3F3F46;
  --accent:#FB923C; --accent-fraca:#2A1A0E; --accent-forte:#FDBA74;
  --ok:#4ADE80; --ok-fraca:#0F2417;
  --bad:#F87171; --bad-fraca:#2A1414;
  --warn:#FACC15; --warn-fraca:#26200A;
  --sombra:0 1px 2px rgba(0,0,0,.5);
  --sombra-md:0 6px 22px -8px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);
}}
:root[data-tema="escuro"]{
  --ground:#0E0E10; --surface:#18181B; --sunk:#131316; --fundo-campo:#1F1F23;
  --ink:#FAFAFA; --muted:#A1A1AA; --fraco:#71717A;
  --line:#27272A; --line-forte:#3F3F46;
  --accent:#FB923C; --accent-fraca:#2A1A0E; --accent-forte:#FDBA74;
  --ok:#4ADE80; --ok-fraca:#0F2417; --bad:#F87171; --bad-fraca:#2A1414;
  --warn:#FACC15; --warn-fraca:#26200A;
  --sombra:0 1px 2px rgba(0,0,0,.5);
  --sombra-md:0 6px 22px -8px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:14.5px/1.55 "Source Sans 3",-apple-system,system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:Archivo,"Source Sans 3",sans-serif;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent);text-decoration:none}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ---------------- barra de topo ---------------- */
.barra{height:var(--topo-h);display:flex;align-items:center;gap:14px;padding:0 16px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40}
.logo{display:flex;align-items:center;gap:8px;color:inherit;flex:none}
.logo i{width:24px;height:24px;border-radius:6px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font:700 13px/1 Archivo,sans-serif;font-style:normal}
.logo b{font:700 14.5px/1 Archivo,sans-serif;letter-spacing:-.015em}
@media(max-width:720px){.logo b{display:none}}

.sel-produto{position:relative;flex:none}
.sel-produto select{appearance:none;background:var(--sunk);border:1px solid var(--line);
  color:var(--ink);font:600 13.5px/1 inherit;padding:7px 30px 7px 11px;border-radius:var(--r);
  cursor:pointer;max-width:190px;text-overflow:ellipsis}
.sel-produto::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sel-produto select:hover{border-color:var(--line-forte)}

.segmento{display:flex;background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--r);padding:2px;gap:2px}
.segmento a{padding:6px 13px;border-radius:4px;font:600 13.5px/1.2 inherit;color:var(--muted);
  white-space:nowrap}
.segmento a:hover{color:var(--ink)}
.segmento a.on{background:var(--surface);color:var(--ink);box-shadow:var(--sombra)}
@media(max-width:860px){.segmento a{padding:6px 9px;font-size:12.5px}}

.acoes-topo{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ---------------- botões ---------------- */
button,.bt{font:600 13.5px/1.2 inherit;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);padding:8px 13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button:hover,.bt:hover{background:var(--sunk);border-color:var(--line-forte)}
.bt-principal{background:var(--accent);border-color:var(--accent);color:#fff}
.bt-principal:hover{background:var(--accent-forte);border-color:var(--accent-forte);color:#fff}
button:disabled{opacity:.55;cursor:progress}
.bt-mini{padding:5px 9px;font-size:12.5px;font-weight:500}
.bt-icone{padding:6px;width:30px;justify-content:center}

/* ---------------- estrutura de trabalho ---------------- */
.oficina{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,46%);
  height:calc(100vh - var(--topo-h))}
@media(max-width:1080px){.oficina{grid-template-columns:minmax(0,1fr);height:auto}}
.ajustes{overflow-y:auto;padding:20px 22px 60px;min-width:0}
.vitrine{border-left:1px solid var(--line);background:var(--sunk);
  display:flex;flex-direction:column;min-width:0;overflow:hidden}
@media(max-width:1080px){.vitrine{border-left:0;border-top:1px solid var(--line);height:80vh}}

/* ---------------- faixa de estado ---------------- */
.estado{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 14px;margin-bottom:20px;box-shadow:var(--sombra)}
.estado .sinal{width:8px;height:8px;border-radius:50%;flex:none}
.estado.pronta .sinal{background:var(--ok)}
.estado.pendente .sinal{background:var(--warn)}
.estado.ruim .sinal{background:var(--bad)}
.estado b{font-size:13.5px;font-weight:600}
.estado span{font-size:13px;color:var(--muted)}
.estado .direita{margin-left:auto;display:flex;gap:6px;align-items:center}

/* ---------------- seções ---------------- */
.secao{margin-bottom:26px}
.secao > h2{font:600 11.5px/1 Archivo,sans-serif;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fraco);margin-bottom:11px;display:flex;align-items:center;gap:9px}
.secao > h2::after{content:"";flex:1;height:1px;background:var(--line)}
.quadro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--sombra)}
.quadro + .quadro{margin-top:10px}

/* dobra (avançado) */
details.dobra{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden}
details.dobra + details.dobra{margin-top:8px}
details.dobra > summary{list-style:none;cursor:pointer;padding:13px 16px;
  font:600 13.5px/1.2 inherit;display:flex;align-items:center;gap:9px}
details.dobra > summary::-webkit-details-marker{display:none}
details.dobra > summary::before{content:"";width:6px;height:6px;flex:none;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(-45deg);transition:transform .15s}
details.dobra[open] > summary::before{transform:rotate(45deg)}
details.dobra > summary:hover{background:var(--sunk)}
details.dobra > summary .conta{margin-left:auto;font:500 12px/1 "JetBrains Mono",monospace;
  color:var(--fraco)}
details.dobra .interior{padding:0 16px 16px;border-top:1px solid var(--line);padding-top:14px}

/* ---------------- formulário ---------------- */
label{display:block}
.rot{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.dica{display:block;font-size:12px;color:var(--fraco);margin-top:5px;line-height:1.45}
input[type=text],input[type=number],input[type=url],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line-forte);border-radius:var(--r);
  background:var(--fundo-campo);color:var(--ink);font:inherit;font-size:14px}
input:hover,select:hover,textarea:hover{border-color:var(--fraco)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-fraca)}
textarea{resize:vertical;min-height:74px;line-height:1.55}
textarea.codigo,input.mono{font-family:"JetBrains Mono",monospace;font-size:12.5px}
input[type=color]{width:42px;height:34px;padding:2px;cursor:pointer}
.linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.linha + .linha,.quadro > label + label,.quadro > .linha + label{margin-top:12px}
.check{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;cursor:pointer}
.check input{margin-top:2px;accent-color:var(--accent);width:15px;height:15px;flex:none}
.check b{font-weight:600}

/* ---------------- tira de modelos ---------------- */
.tira{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity}
.tira::-webkit-scrollbar{height:6px}
.tira::-webkit-scrollbar-thumb{background:var(--line-forte);border-radius:99px}
.modelo{flex:0 0 116px;scroll-snap-align:start}
.modelo input{position:absolute;opacity:0;pointer-events:none}
.modelo span{display:block;border:1.5px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;background:var(--sunk)}
.modelo img{display:block;width:100%;height:92px;object-fit:cover;object-position:top;
  background:#fff}
.modelo b{display:block;padding:6px 8px;font-size:12px;font-weight:600;text-transform:capitalize;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modelo input:checked + span{border-color:var(--accent);box-shadow:0 0 0 2.5px var(--accent-fraca)}
.modelo input:checked + span b{color:var(--accent-forte)}

/* ---------------- prévia ---------------- */
.pv-topo{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--surface);
  border-bottom:1px solid var(--line);flex:none}
.pv-larguras{display:flex;gap:2px;background:var(--sunk);border-radius:var(--r);padding:2px}
.pv-larguras button{border:0;background:none;padding:5px 9px;border-radius:4px;font-size:13px}
.pv-larguras button.on{background:var(--surface);box-shadow:var(--sombra)}
.pv-estado{margin-left:auto;font:500 11px/1 "JetBrains Mono",monospace;padding:4px 8px;
  border-radius:3px;white-space:nowrap}
.pv-estado.vivo{background:var(--accent-fraca);color:var(--accent-forte)}
.pv-estado.indo{background:var(--sunk);color:var(--muted)}
.pv-estado.salvo{background:var(--ok-fraca);color:var(--ok)}
.pv-estado.ruim{background:var(--bad-fraca);color:var(--bad)}
.moldura{flex:1;display:flex;justify-content:center;padding:16px;overflow:auto;min-height:0}
.moldura iframe{width:100%;max-width:var(--larg,390px);height:100%;min-height:520px;border:0;
  border-radius:8px;background:#fff;box-shadow:var(--sombra-md);transition:max-width .18s}

/* ---------------- avisos ---------------- */
.aviso{border-radius:var(--r);padding:11px 13px;font-size:13.5px;margin-bottom:12px;
  border:1px solid;display:flex;gap:9px;align-items:flex-start}
.aviso.ok{background:var(--ok-fraca);border-color:var(--ok);color:var(--ok)}
.aviso.ruim{background:var(--bad-fraca);border-color:var(--bad);color:var(--bad)}
.aviso.info{background:var(--accent-fraca);border-color:var(--accent);color:var(--accent-forte)}
.aviso pre{margin:6px 0 0;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  white-space:pre-wrap;line-height:1.6}
.aviso .x{margin-left:auto;cursor:pointer;border:0;background:none;color:inherit;
  font-size:15px;padding:0;line-height:1}

/* ---------------- imagens ---------------- */
.exigidas{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.exig{font:500 11.5px/1 "JetBrains Mono",monospace;padding:4px 8px;border-radius:3px}
.exig.ok{background:var(--ok-fraca);color:var(--ok)}
.exig.falta{background:var(--bad-fraca);color:var(--bad)}
.solta{border:1.5px dashed var(--line-forte);border-radius:var(--r);padding:16px;
  text-align:center;color:var(--muted);font-size:13px;cursor:pointer;background:var(--sunk)}
.solta:hover,.solta.sobre{border-color:var(--accent);background:var(--accent-fraca);
  color:var(--accent-forte)}
.barra-envio{display:none;height:5px;background:var(--line);border-radius:99px;
  overflow:hidden;margin-top:10px}
.barra-envio div{height:100%;width:0;background:var(--accent);transition:width .18s}
.grade-img{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;
  margin-top:12px}
.miniatura{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--sunk)}
.miniatura img{display:block;width:100%;height:60px;object-fit:contain;background:var(--surface)}
.miniatura .leg{padding:4px 6px;font-size:10px;display:flex;justify-content:space-between;
  align-items:center;gap:3px}
.miniatura .leg b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miniatura .leg button{border:0;background:none;padding:0 2px;color:var(--bad);font-size:13px;
  line-height:1;cursor:pointer}

/* ---------------- sugestões de título ---------------- */
.sugestoes{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.sugestao{border:1px solid var(--line);border-left:2.5px solid var(--accent);
  border-radius:var(--r);padding:10px 12px;cursor:pointer;background:var(--sunk)}
.sugestao:hover{background:var(--accent-fraca);border-color:var(--accent)}
.sugestao .txt{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:3px}
.sugestao .meta{font-size:11.5px;color:var(--muted)}
.sugestao .meta b{color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}

/* ---------------- níveis ---------------- */
.niveis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.nivel input{position:absolute;opacity:0;pointer-events:none}
.nivel span{display:block;border:1px solid var(--line-forte);border-radius:var(--r);
  padding:9px 10px;cursor:pointer;font-size:12.5px;font-weight:600;text-align:center;
  background:var(--fundo-campo)}
.nivel span small{display:block;font-weight:400;font-size:11px;color:var(--fraco);margin-top:2px}
.nivel input:checked + span{border-color:var(--accent);background:var(--accent-fraca);
  color:var(--accent-forte)}

/* ---------------- textos livres ---------------- */
.textos-livres{display:flex;flex-direction:column;gap:9px}
.txt-linha{display:flex;gap:10px;align-items:flex-end}
.txt-linha .check{white-space:nowrap;padding-bottom:8px;font-size:12px;color:var(--muted)}
.txt-linha.fora input[type=text]{opacity:.4;text-decoration:line-through}

/* ---------------- telas simples ---------------- */
.pagina-simples{max-width:1000px;margin:0 auto;padding:28px 22px 60px}
.pagina-simples h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.pagina-simples .sub{color:var(--muted);margin-bottom:24px}
.grade-of{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.of-cartao{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden}
.of-cartao:hover{border-color:var(--line-forte);box-shadow:var(--sombra-md)}
.of{display:block;padding:15px;color:inherit}
.of h2{font-size:16px;font-weight:600;margin-bottom:2px}
.of .dom{font:12px/1 "JetBrains Mono",monospace;color:var(--muted)}
.of .tags{display:flex;gap:4px;margin-top:10px;flex-wrap:wrap}
.tag{font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:3px;background:var(--sunk);
  color:var(--muted)}
.tag.viva{background:var(--ok-fraca);color:var(--ok)}
.of-acoes{display:flex;gap:5px;padding:9px 15px 12px;border-top:1px solid var(--line);
  background:var(--sunk)}
.of-acoes .apagar-of{margin-left:auto;color:var(--bad)}
.vazio{text-align:center;padding:48px 20px;color:var(--muted)}
.detalhe{background:var(--sunk);border-radius:var(--r);padding:11px 13px;
  font:12px/1.7 "JetBrains Mono",monospace;white-space:pre;overflow-x:auto;color:var(--ink)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.opcao-linha{display:flex;gap:7px;align-items:center;margin-bottom:7px}
.opcao-linha input{flex:1}
.opcao-linha .tirar-opcao{color:var(--bad);padding:6px 9px}