/* Otimus Admin — estilos (extraído do index.html na v2.19) */
:root{--bg:#F7F9F8;--panel:#FFFFFF;--ink:#0E2A2F;--muted:#5E7672;
--green:#00A772;--green2:#00CF87;--orange:#E8912D;--red:#C43C31;
--deep:#09292C;--deep2:#0A3A41;
--line:rgba(14,42,47,.12);--line-soft:rgba(14,42,47,.07);
--font:'Inter',-apple-system,sans-serif;--disp:'Schibsted Grotesk','Inter',sans-serif;
--mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;font-size:14px}
.mono{font-family:var(--mono);font-size:.92em;font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--disp)}

/* ── shell: sidebar escura da marca + conteúdo claro ── */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.sb{background:var(--deep);color:#D8E6E3;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-logo{display:flex;align-items:center;gap:10px;padding:22px 20px 10px;
  font-family:var(--disp);font-weight:600;font-size:15.5px;color:#fff}
.sb-logo em{font-style:normal;color:var(--green2)}
.sb-group{margin-top:16px;padding:0 10px}
.sb-group>span{display:block;font-size:11px;font-weight:600;color:rgba(216,230,227,.42);
  padding:0 12px 6px}
.sb-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;margin:1px 0;
  border:none;border-radius:9px;background:none;cursor:pointer;text-align:left;
  font-family:var(--font);font-size:13.5px;color:rgba(216,230,227,.82)}
.sb-item svg{flex-shrink:0;opacity:.75}
.sb-item:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-item.on{background:rgba(0,207,135,.14);color:#6FE7B6;font-weight:600}
.sb-item.on svg{opacity:1}
.sb-foot{margin-top:auto;padding:14px 16px 18px;border-top:1px solid rgba(255,255,255,.08)}
.sb-foot .who{font-size:12px;color:rgba(216,230,227,.55);overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}
.sb-exit{width:100%;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:9px;
  background:none;color:rgba(216,230,227,.85);font-family:var(--font);font-size:13px;cursor:pointer}
.sb-exit:hover{background:rgba(255,255,255,.07);color:#fff}
.content{min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:20px 30px 0}
.topbar h1{font-size:20px;font-weight:600}
.sb-burger{display:none;border:1px solid var(--line);background:#fff;border-radius:9px;
  width:38px;height:38px;cursor:pointer;font-size:17px;color:var(--ink)}
.sb-back{display:none;position:fixed;inset:0;background:rgba(9,41,44,.45);z-index:40}
main{padding:18px 30px 44px;max-width:1180px}

/* ── login: card sobre o teal da marca ── */
body.login-mode{background:linear-gradient(160deg,var(--deep) 0%,var(--deep2) 100%)}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:#fff;border-radius:18px;padding:34px 32px 30px;width:100%;max-width:400px;
  box-shadow:0 24px 70px rgba(0,0,0,.35)}
.login-card .logo{display:flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--disp);font-weight:600;font-size:17px;margin-bottom:6px}
.login-card .logo em{font-style:normal;color:var(--green)}
.login-sub{text-align:center;font-size:13px;color:var(--muted);margin-bottom:14px}

/* ── superfícies ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px;
  margin-bottom:16px;box-shadow:0 1px 3px rgba(14,42,47,.05)}
h2{font-size:15.5px;font-weight:600;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-size:12px;font-weight:600;color:var(--muted);text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
.tag{font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px;display:inline-block}
.tag.ok{background:rgba(0,167,114,.11);color:#007A54}
.tag.warn{background:rgba(232,145,45,.13);color:#A3600F}
.tag.off{background:rgba(14,42,47,.07);color:var(--muted)}
label{display:block;font-size:12.5px;font-weight:600;margin:10px 0 5px}
input,select,textarea{width:100%;font-family:var(--font);font-size:14px;background:#fff;
border:1.5px solid var(--line);border-radius:9px;color:var(--ink);padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,167,114,.12)}
textarea{font-family:var(--mono);font-size:12.5px;min-height:90px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.btn{font-family:var(--font);font-weight:600;font-size:14px;border:none;border-radius:9px;
padding:10px 20px;cursor:pointer;background:var(--green);color:#fff;margin-top:14px}
.btn:hover{background:#009064}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--muted)}
.btn.ghost:hover{color:var(--ink);border-color:var(--muted)}
.btn.sm{padding:6px 13px;font-size:12.5px;margin:0}
.msg{font-size:12.5px;margin-top:10px;color:var(--green)}
.msg.err{color:var(--red)}
.hint{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
pre{font-family:var(--mono);font-size:11.5px;background:#F0F4F3;border:1px solid var(--line);
border-radius:9px;padding:12px;overflow:auto;color:var(--ink);margin-top:8px}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ── dashboard ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  box-shadow:0 1px 3px rgba(14,42,47,.05)}
.kpi .k-label{font-size:12px;font-weight:500;color:var(--muted)}
.kpi .k-value{font-family:var(--disp);font-size:23px;font-weight:700;margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .k-sub{font-size:11.5px;color:var(--muted);margin-top:3px}

/* ── seletor visual de template do checkout ── */
.tpl-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:4px}
.tpl-opt{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px 8px 10px;
  cursor:pointer;text-align:left;font-family:var(--font)}
.tpl-opt img{width:100%;border-radius:8px;border:1px solid var(--line-soft);display:block;
  aspect-ratio:280/392;object-fit:cover;background:var(--bg)}
.tpl-opt b{display:block;font-size:12.5px;margin-top:7px}
.tpl-opt span{display:block;font-size:11px;color:var(--muted);margin-top:1px;line-height:1.35}
.tpl-opt:hover{border-color:var(--muted)}
.tpl-opt.on{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,167,114,.13)}
.tpl-opt.on b{color:var(--green)}

@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .sb{position:fixed;left:-250px;width:232px;z-index:50;transition:left .2s ease;box-shadow:12px 0 40px rgba(0,0,0,.25)}
  .sb.open{left:0}
  .sb-back.show{display:block}
  .sb-burger{display:block}
  .topbar{padding:14px 16px 0}
  main{padding:14px 16px 40px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.chart-wrap{position:relative}
.chart-tip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:8px;
padding:7px 10px;font-size:12px;color:var(--ink);pointer-events:none;display:none;white-space:nowrap;z-index:5;
box-shadow:0 6px 20px rgba(20,52,58,.12)}
.chart-tip b{font-variant-numeric:tabular-nums}
/* fluxo visual do funil */
.flow{display:flex;flex-direction:column;align-items:center;margin-top:10px}
.flow-node{background:#fff;border:1.5px solid var(--line);border-radius:14px;
  width:100%;max-width:460px;box-shadow:0 2px 10px rgba(20,52,58,.05)}
.flow-node.start,.flow-node.finish{max-width:300px;text-align:center;padding:12px 18px;
  font-weight:700;font-size:14px}
.flow-node.start{border-color:var(--green);background:rgba(0,167,114,.07);color:var(--green)}
.flow-node.finish{color:var(--muted)}
.fn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:14px 16px 4px}
.fn-head b{font-size:14.5px;line-height:1.3}
.fn-actions{display:flex;gap:4px;flex-shrink:0}
.fn-actions button{background:none;border:none;cursor:pointer;font-size:13px;
  color:var(--muted);padding:2px 6px;border-radius:6px}
.fn-actions button:hover{background:rgba(20,52,58,.07);color:var(--ink)}
.fn-sub{padding:0 16px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.fn-edges{display:flex;gap:8px;padding:10px 16px 14px;flex-wrap:wrap}
.flow-edge{font-family:var(--mono);font-size:11px;border-radius:999px;padding:4px 12px}
.flow-edge.yes{background:rgba(0,167,114,.12);color:var(--green)}
.flow-edge.no{background:rgba(196,60,49,.1);color:var(--red)}
.flow-line{width:2px;height:18px;background:var(--line)}
.flow-sec{width:100%;max-width:460px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:16px 0 8px;text-align:center}
@media(max-width:760px){.row,.row3{grid-template-columns:1fr}}

/* ══ v2.19: modal, sub-abas, filtros ══ */
.md-back{position:fixed;inset:0;background:rgba(9,41,44,.5);z-index:80;
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto}
.md-box{background:#fff;border-radius:16px;width:100%;max-width:560px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);padding:22px 24px 24px;margin-bottom:6vh}
.md-box.wide{max-width:760px}
.md-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.md-head h2{margin:0}
.md-x{background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;
  width:32px;height:32px;border-radius:8px}
.md-x:hover{background:rgba(14,42,47,.07);color:var(--ink)}

/* cabeçalho de tela própria (ex.: editor de produto) */
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);
  border-radius:9px;padding:7px 13px;font-family:var(--font);font-size:13px;color:var(--muted);cursor:pointer}
.back-btn:hover{color:var(--ink);border-color:var(--muted)}
.page-head h2{margin:0;font-size:17px}
.page-head .spacer{flex:1}

/* sub-abas (etapas de configuração do produto) */
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.subnav button{background:none;border:none;border-radius:8px;padding:8px 13px;cursor:pointer;
  font-family:var(--font);font-size:13.5px;color:var(--muted)}
.subnav button:hover{background:rgba(14,42,47,.06);color:var(--ink)}
.subnav button.on{background:rgba(0,167,114,.1);color:var(--green);font-weight:600}

/* barra de filtros */
.fbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.fbar input,.fbar select{width:auto}
.fbar input[type=search]{min-width:230px}
.seg{display:inline-flex;background:#fff;border:1.5px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{background:none;border:none;padding:9px 15px;font-family:var(--font);font-size:13px;
  color:var(--muted);cursor:pointer;border-right:1px solid var(--line-soft)}
.seg button:last-child{border-right:none}
.seg button.on{background:rgba(0,167,114,.1);color:var(--green);font-weight:600}
.tag.bad{background:rgba(196,60,49,.11);color:var(--red)}
.count-note{font-size:12px;color:var(--muted);margin-left:auto}