:root{
  --v:#1f8a4c; --v2:#166b3a; --vc:#e8f5ed; --am:#f0a020; --vm:#c0392b;
  --tinta:#16241d; --cinza:#5d6b64; --linha:#e3e9e5;
  --fundo:#f6f8f7; --branco:#fff; --escuro:#16241d;
  --raio:12px; --sombra:0 1px 3px rgba(20,40,30,.07),0 6px 20px rgba(20,40,30,.05);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--tinta);background:var(--fundo)}
a{color:var(--v2);text-decoration:none}
code{font:12.5px ui-monospace,"Cascadia Code",Consolas,monospace;
  background:var(--vc);color:var(--v2);padding:1px 5px;border-radius:4px}
.inline{display:inline}.bloco{display:block}.cen{text-align:center}.dir{text-align:right}
.fraco{color:var(--cinza)}.mini{font-size:12.5px}.mt{margin-top:22px}
.vazio{color:var(--cinza);padding:26px 0}
.alerta{color:var(--vm);font-weight:600}

/* ---------- estrutura ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.lateral{background:var(--escuro);color:#c9d5ce;display:flex;flex-direction:column;
  padding:20px 0;position:sticky;top:0;height:100vh}
.log{display:flex;align-items:center;gap:10px;padding:0 20px 20px}
.log-ico{width:34px;height:34px;border-radius:9px;background:var(--v);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:17px}
.log b{color:#fff;display:block;font-size:15px;line-height:1.2}
.log small{font-size:11px;color:#8fa79a}
.lateral nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.lateral nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:9px;color:#c9d5ce;font-size:14.5px;transition:.15s}
.lateral nav a span{width:20px;text-align:center;font-size:14px}
.lateral nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.lateral nav a.on{background:var(--v);color:#fff;font-weight:600}
.lateral-fim{margin-top:auto;padding:16px 20px 0;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ver-site{color:#fff;font-size:13.5px;font-weight:600}
.mini-link{background:none;border:0;color:#8fa79a;font:inherit;font-size:12.5px;
  cursor:pointer;padding:0}
.mini-link:hover{color:#fff}

.conteudo{padding:26px 30px 50px;max-width:1280px}
.cabeca{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:22px;flex-wrap:wrap}
.cabeca h1{font-size:25px;letter-spacing:-.6px}

/* ---------- avisos ---------- */
.avisos{display:grid;gap:8px;margin-bottom:18px}
.aviso{padding:11px 15px;border-radius:10px;font-size:14px;border:1px solid}
.a-ok{background:var(--vc);border-color:#bfe3cd;color:var(--v2)}
.a-erro{background:#fdecea;border-color:#f5c6c0;color:#a5281b}
.a-aviso{background:#fff6e5;border-color:#f5dcae;color:#8a5a00}

/* ---------- botões ---------- */
.btn{display:inline-block;border:0;border-radius:9px;padding:9px 17px;font:inherit;
  font-size:14px;font-weight:600;cursor:pointer;text-align:center;transition:.15s}
.btn-p{background:var(--v);color:#fff}
.btn-p:hover{background:var(--v2)}
.btn-c{background:transparent;color:var(--v2);box-shadow:inset 0 0 0 1.5px var(--v)}
.btn-c:hover{background:var(--vc)}
.btn-v{background:transparent;color:var(--cinza)}
.btn-v:hover{color:var(--tinta)}
.bloco{display:block;width:100%}
.btn-mini{display:inline-block;border:1px solid var(--linha);background:#fff;
  border-radius:7px;padding:4px 9px;font-size:12px;color:var(--cinza);cursor:pointer}
.btn-mini:hover{border-color:var(--v);color:var(--v2)}
.btn-mini.perigo:hover{border-color:var(--vm);color:var(--vm)}

/* ---------- cartões do início ---------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;margin-bottom:24px}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:20px;display:block;transition:.18s}
.cartao:hover{box-shadow:var(--sombra);transform:translateY(-2px);border-color:var(--v)}
.c-num{display:block;font-size:34px;font-weight:800;color:var(--v);letter-spacing:-1.2px}
.c-rot{display:block;font-size:14px;color:var(--tinta);margin-top:2px}
.c-pe{display:block;font-size:12.5px;color:var(--cinza);margin-top:6px}

/* ---------- painéis ---------- */
.painel{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:22px;margin-bottom:18px}
.painel-estreito{max-width:460px}
.painel h3{font-size:17px;letter-spacing:-.3px;margin-bottom:12px}
.duas,.duas-form{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.atalhos{display:flex;flex-direction:column;gap:2px}
.atalhos a{padding:9px 11px;border-radius:8px;font-size:14px;transition:.15s}
.atalhos a:hover{background:var(--vc)}
.caixa-nota{background:#fff;border:1px solid var(--linha);border-left:3px solid var(--v);
  border-radius:9px;padding:13px 16px;margin-bottom:18px;line-height:1.55}

/* ---------- tabelas ---------- */
.tab{width:100%;border-collapse:collapse;font-size:14px}
.tab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--cinza);padding:0 10px 9px;border-bottom:1px solid var(--linha)}
.tab td{padding:11px 10px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tab-larga{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden}
.tab-larga th{padding-top:13px;background:var(--fundo)}
.tab tr.inativo{opacity:.5}
.tab .cen{text-align:center}
.col-end{max-width:280px;font-size:13px;color:var(--cinza)}
.mini-foto{width:46px}
.mini-foto img{width:38px;height:38px;object-fit:cover;border-radius:7px;display:block}
.mini-foto span{font-size:24px}

.pil{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.3px;background:var(--fundo);color:var(--cinza);
  padding:3px 9px;border-radius:99px}
.pil-ok{background:var(--vc);color:var(--v2)}
.pil-alerta{background:#fff4e0;color:#95601a}
.pil-programada{background:#eef2ff;color:#4338ca}
.pil-fresh{background:var(--vc);color:var(--v2)}
.pil-unica{background:#fff4e0;color:#95601a}

/* ---------- formulários ---------- */
label{display:block;margin:14px 0 0;font-size:13.5px;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=tel],input[type=file],select,textarea{
  width:100%;margin-top:5px;padding:9px 12px;border:1px solid var(--linha);
  border-radius:9px;font:inherit;font-size:14px;font-weight:400;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--v);outline-offset:1px}
input[type=color]{width:52px;height:34px;padding:2px;cursor:pointer}
.ajuda{display:block;margin-top:4px;font-size:12px;color:var(--cinza);font-weight:400}
.check{display:flex;align-items:center;gap:9px;margin-top:14px}
.check input{width:auto;margin:0}
.lin{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lin > label{margin-top:14px}
.lin-cor{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
.lin-cor input[type=color]{margin-top:0}
.acoes-form{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.barra-busca{display:flex;gap:9px;margin-bottom:18px;align-items:center}
.barra-busca input{width:auto;flex:1 1 300px;margin-top:0}
.lin-envio{display:flex;gap:10px;align-items:center}
.lin-envio input{margin-top:0}

/* ---------- prévia de imagem ---------- */
.previa{height:190px;border:1px dashed var(--linha);border-radius:10px;
  display:grid;place-items:center;background:var(--fundo);overflow:hidden}
.previa img{width:100%;height:100%;object-fit:contain}
.previa-vazia{font-size:54px}

/* ---------- popup: lista de telas ---------- */
.lista-telas{display:flex;flex-direction:column;gap:9px}
.tela-item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;
  align-items:center;padding:11px;border:1px solid var(--linha);border-radius:10px}
.tela-item.desligada{opacity:.5}
.tela-mini{width:56px;height:44px;border-radius:7px;overflow:hidden;background:var(--fundo);
  display:grid;place-items:center;font-size:22px}
.tela-mini img{width:100%;height:100%;object-fit:cover}
.tela-txt b{font-size:14.5px}
.tela-acoes{display:flex;gap:6px;align-items:center}

/* ---------- galeria ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px}
.g-item{background:#fff;border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.g-item img{width:100%;height:125px;object-fit:cover;display:block;background:var(--fundo)}
.g-item figcaption{padding:9px;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.g-item code{font-size:10.5px;word-break:break-all;background:none;color:var(--cinza);padding:0}

/* ---------- editor de código ---------- */
.cod-layout{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start}
.cod-lista{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px;position:sticky;top:26px;max-height:78vh;overflow:auto}
.cod-lista h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--cinza);margin-bottom:9px}
.cod-arq{display:block;padding:7px 9px;border-radius:7px;font-size:12.5px;
  color:var(--tinta);word-break:break-all;transition:.15s}
.cod-arq:hover{background:var(--fundo)}
.cod-arq.on{background:var(--vc);color:var(--v2);font-weight:600}
.cod-arq small{display:block;color:var(--cinza);font-size:10.5px;font-weight:400}
.cod-tipo{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;
  padding:1px 5px;border-radius:4px;margin-right:5px;background:var(--fundo);color:var(--cinza)}
.t-css{background:#e0f2fe;color:#0369a1}
.t-js{background:#fef3c7;color:#92400e}
.t-html{background:#fce7f3;color:#9d174d}

.cod-cab{display:flex;justify-content:space-between;align-items:center;
  background:#fff;border:1px solid var(--linha);border-bottom:0;
  border-radius:var(--raio) var(--raio) 0 0;padding:12px 16px}
.editor{width:100%;min-height:520px;margin-top:0;padding:16px;border:1px solid var(--linha);
  border-radius:0 0 var(--raio) var(--raio);background:#0f1a15;color:#d6e5dc;
  font:13px/1.65 ui-monospace,"Cascadia Code",Consolas,monospace;
  resize:vertical;tab-size:2;white-space:pre}
.editor:focus{outline:2px solid var(--v);outline-offset:-1px}
.editor-baixo{min-height:190px;border-radius:9px;margin-top:5px}
.backups{margin-top:14px;background:#fff;border:1px solid var(--linha);
  border-radius:var(--raio);padding:14px}
.backups summary{cursor:pointer;font-size:13.5px;font-weight:600}
.lin-backup{display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--linha);font-size:13px;color:var(--cinza)}

/* ---------- tela de entrada ---------- */
.tela-entrar{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,var(--vc),var(--fundo))}
.caixa-entrar{width:min(390px,100%);background:#fff;border:1px solid var(--linha);
  border-radius:16px;padding:32px;box-shadow:var(--sombra)}
.log-centro{justify-content:center;padding:0 0 18px}
.dica{margin-top:18px;padding-top:14px;border-top:1px solid var(--linha);
  font-size:12.5px;color:var(--cinza);line-height:1.55}
.erro-cod{font-size:52px;color:var(--v);letter-spacing:-2px;margin-bottom:8px}

/* ---------- pedidos ---------- */
.filtros-pil{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.pil-link{padding:6px 13px;border-radius:99px;font-size:13px;background:#fff;
  border:1px solid var(--linha);color:var(--cinza);transition:.15s}
.pil-link:hover{border-color:var(--v);color:var(--v2)}
.pil-link.on{background:var(--v);border-color:var(--v);color:#fff;font-weight:600}
.pil-aguardando{background:#fff4e0;color:#95601a}
.pil-pago{background:var(--vc);color:var(--v2)}
.pil-enviado{background:#e0f2fe;color:#0369a1}
.pil-entregue{background:#d8f0e2;color:var(--v2)}
.pil-cancelado{background:#fdecea;color:#a5281b}
.btn-mini.destaque{border-color:var(--v);color:var(--v2);font-weight:700;
  background:var(--vc)}
.btn-mini.destaque:hover{background:var(--v);color:#fff}
.totais-adm{margin-top:16px;font-size:14.5px}
.totais-adm div{display:flex;justify-content:space-between;padding:6px 0}
.totais-adm .total-final{border-top:1px solid var(--linha);margin-top:6px;
  padding-top:11px}
.totais-adm .total-final b{font-size:20px;color:var(--v2)}

/* ---------- mensagens ---------- */
.painel.esperando{border-left:3px solid var(--am)}
.msg-cab{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--linha)}
.conversa-adm{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;
  max-height:320px;overflow-y:auto}
.balao-adm{max-width:80%;padding:11px 15px;border-radius:12px;font-size:14px;
  line-height:1.55}
.balao-adm small{display:block;margin-top:5px;font-size:11px;opacity:.7}
.balao-tag{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;opacity:.75;margin-bottom:3px}
.do-cliente{align-self:flex-start;background:var(--fundo);border:1px solid var(--linha);
  border-bottom-left-radius:4px}
.da-loja{align-self:flex-end;background:var(--v);color:#fff;border-bottom-right-radius:4px}
.lin-resposta{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}

/* ---------- comando joao ---------- */
.cj-link{color:#ff8a80;font-size:13px;font-weight:700;padding:7px 0}
.cj-link:hover{color:#ff5252}
.cj-caixa{text-align:center;border:2px solid #f3ccc6}
.cj-ico{font-size:46px;color:var(--vm);line-height:1;margin-bottom:6px}
.cj-titulo{font-size:24px;letter-spacing:-.6px;margin-bottom:4px}
.cj-sub{color:var(--cinza);margin-bottom:20px}
.cj-lista{text-align:left;background:#fdf3f2;border:1px solid #f3ccc6;
  border-radius:10px;padding:16px 18px;margin-bottom:20px;font-size:14px}
.cj-lista ul{margin:9px 0 12px 18px}
.cj-lista li{margin-bottom:7px;line-height:1.5}
.cj-lista .pil{margin-left:4px}
.btn-vermelho{background:var(--vm);color:#fff;font-size:15px;padding:14px}
.btn-vermelho:hover{background:#8e1f14}
.cj-resultado{list-style:none;text-align:left;margin:18px 0}
.cj-resultado li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--linha);
  font-size:14.5px}
.cj-resultado li:before{position:absolute;left:2px;font-weight:700}
.cj-resultado li.feito:before{content:"✓";color:var(--v)}
.cj-resultado li.nao:before{content:"—";color:var(--cinza)}
.cj-resultado li.nao{color:var(--cinza)}
.cj-nota{background:var(--fundo);border-radius:10px;padding:16px 18px;
  text-align:left;font-size:14px;line-height:1.6}
.cj-nota p{margin-bottom:8px}

/* ---------- responsivo ---------- */
@media(max-width:1050px){
  .duas,.duas-form,.cod-layout{grid-template-columns:1fr}
  .cod-lista{position:static;max-height:230px}
}
@media(max-width:780px){
  .app{grid-template-columns:1fr}
  .lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;padding:12px 16px;gap:10px}
  .lateral .log{padding:0}
  .lateral nav{flex-direction:row;flex-wrap:wrap;padding:0;flex:1 1 100%}
  .lateral nav a{padding:7px 10px;font-size:13px}
  .lateral-fim{margin:0;padding:0;border:0;flex-direction:row;gap:14px;align-items:center}
  .conteudo{padding:18px 16px 40px}
  .lin{grid-template-columns:1fr}
}
.destaque-cartao{border-color:var(--am);background:#fffdf7}
.destaque-cartao .c-num{color:var(--am)}

/* ---------- editor visual ---------- */
.btn-abrir{margin-top:16px;font-size:15px;padding:13px}
.cartoes-mini{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.cartoes-mini .c-num{font-size:28px}
.cod-curto{display:inline-block;max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-size:11px}

/* ---------- arquivos de dados ---------- */
.arq-linha{display:flex;align-items:center;gap:13px;padding:13px;
  background:var(--fundo);border:1px solid var(--linha);border-radius:10px;
  margin-bottom:12px}
.arq-ico{font-size:26px}
.arq-linha b{font-size:14px}