/* ============================================================
   Disparador WhatsApp — Estilo Claymorphism
   Superfícies macias com sombra dupla (clara + escura),
   cantos arredondados, paleta pastel.
   ============================================================ */
:root{
  --bg:        #e9ecf5;
  --bg2:       #eef1f9;
  --surface:   #eef1f9;
  --texto:     #3a3f55;
  --muted:     #8a90a6;
  --primary:   #6c63ff;
  --primary-d: #574fd6;
  --ok:        #28c76f;
  --erro2:     #ea5455;
  --warn:      #ff9f43;
  --radius:    22px;
  --radius-sm: 14px;
  /* Sombras de argila */
  --sh-out: 8px 8px 18px #c7ccda, -8px -8px 18px #ffffff;
  --sh-in:  inset 6px 6px 12px #c7ccda, inset -6px -6px 12px #ffffff;
  --sh-sm-out: 5px 5px 11px #c9cedd, -5px -5px 11px #ffffff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:var(--bg);
  color:var(--texto);
  font-size:15px;
}
h1,h2,h3{font-weight:700;color:var(--texto)}
h2{margin:0 0 18px}
h3{margin:0 0 12px;font-size:1.05rem}
a{color:var(--primary);text-decoration:none}
small.muted,.muted{color:var(--muted)}
.small{font-size:.82rem}
code{background:#dfe3f0;padding:1px 6px;border-radius:6px;font-size:.85em}
hr{border:none;border-top:1px solid #d7dbe8;margin:18px 0}

/* ---- Superfície de argila ---- */
.clay{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--sh-out);
}
.clay-inset{
  background:var(--surface);
  border:none;
  border-radius:var(--radius-sm);
  box-shadow:var(--sh-in);
  padding:11px 14px;
  color:var(--texto);
  font-size:.95rem;
  width:100%;
  outline:none;
}
.clay-inset:focus{box-shadow:var(--sh-in), 0 0 0 2px rgba(108,99,255,.25)}
textarea.clay-inset{resize:vertical;font-family:inherit}
select.clay-inset{appearance:none;cursor:pointer}
select.inline{width:auto;display:inline-block;margin-left:8px;padding:5px 10px}
label{display:block;margin:14px 0 6px;font-weight:600;font-size:.85rem;color:#5a607a}

/* ---- Botões ---- */
.btn-clay{
  display:inline-block;border:none;cursor:pointer;
  background:var(--surface);color:var(--texto);
  border-radius:var(--radius-sm);
  box-shadow:var(--sh-sm-out);
  padding:11px 18px;font-weight:600;font-size:.92rem;
  margin-top:12px;transition:.12s;
}
.btn-clay:hover{transform:translateY(-1px)}
.btn-clay:active{box-shadow:var(--sh-in);transform:translateY(0)}
.btn-clay.primary{background:linear-gradient(135deg,#7a72ff,#6c63ff);color:#fff;
  box-shadow:6px 6px 14px #c2c6da,-6px -6px 14px #ffffff}
.btn-clay.small{padding:7px 12px;font-size:.8rem}
.btn-clay.danger{color:#fff;background:linear-gradient(135deg,#ff6b6b,#ea5455)}

/* ============== LOGIN ============== */
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{padding:40px 34px;width:100%;max-width:380px;text-align:center}
.login-card h1{margin:14px 0 0;font-size:1.4rem}
.login-logo{font-size:3rem}
/* Placa escura: faz o texto branco da logo aparecer sobre o fundo claro */
.logo-plate{
  background:radial-gradient(circle at 50% 35%, #3a4060, #1b1f30);
  border-radius:20px;padding:18px 20px;display:inline-block;
  box-shadow:6px 6px 14px #c2c6da,-6px -6px 14px #ffffff;
}
.login-logo-img{max-width:210px;width:100%;height:auto;display:block;margin:0 auto}
.login-card form{text-align:left;margin-top:18px}
.login-card .btn-clay{width:100%;margin-top:22px}

.alerta{padding:11px 14px;border-radius:var(--radius-sm);margin:14px 0;font-size:.9rem}
.alerta.erro{background:#ffe3e3;color:#c0392b;box-shadow:var(--sh-in)}
.alerta.info{background:#e3ecff;color:#3b5bdb;box-shadow:var(--sh-in)}
.alerta.ok{background:#dcfce7;color:#1a7f4b;box-shadow:var(--sh-in)}

/* ============== LAYOUT ============== */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:248px;margin:16px;padding:22px 16px;
  display:flex;flex-direction:column;gap:8px;position:sticky;top:16px;height:calc(100vh - 32px);
}
.brand{font-size:1.25rem;font-weight:800;margin-bottom:18px;padding:6px 4px;text-align:center}
.brand span{color:var(--primary)}
.sidebar-plate{display:block;padding:14px 12px;border-radius:16px}
.brand-logo{max-width:100%;width:100%;height:auto;display:block;margin:0 auto}
nav{display:flex;flex-direction:column;gap:6px;flex:1}
.nav-item{
  padding:11px 14px;border-radius:var(--radius-sm);cursor:pointer;
  color:#5a607a;font-weight:600;font-size:.92rem;transition:.12s;
}
.nav-item:hover{background:var(--bg2);box-shadow:var(--sh-sm-out)}
.nav-item.ativo{box-shadow:var(--sh-in);color:var(--primary)}
.sidebar-foot{display:flex;flex-direction:column;gap:8px;padding:0 6px}
.worker-status{font-size:.78rem;padding:6px 10px;border-radius:10px;box-shadow:var(--sh-in);text-align:center}
.worker-status.on{color:#1a7f4b}.worker-status.off{color:#c0392b}

.conteudo{flex:1;padding:24px 28px;max-width:1200px}
.menu-toggle{display:none}

/* ---- Seções ---- */
.secao{display:none;animation:fade .2s}
.secao.ativa{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}

.card-bloco{padding:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ---- Cards de métrica ---- */
.cards-metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:18px}
.metrica{padding:18px;border-radius:var(--radius);box-shadow:var(--sh-out);background:var(--surface)}
.metrica .num{font-size:1.8rem;font-weight:800}
.metrica .lbl{font-size:.8rem;color:var(--muted);margin-top:4px}
.metrica.ok .num{color:var(--ok)}
.metrica.erro .num{color:var(--erro2)}
.metrica.prim .num{color:var(--primary)}

/* ---- Barra de progresso ---- */
.progress{height:14px;border-radius:20px;box-shadow:var(--sh-in);overflow:hidden;margin:8px 0}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#7a72ff,#28c76f);border-radius:20px;transition:width .4s}

/* ---- Tabelas ---- */
.tabela-wrap{overflow-x:auto;margin-top:8px}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid #dde1ee}
th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
tbody tr:hover{background:var(--bg2)}

/* ---- Badges de status ---- */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:700}
.badge.rascunho{background:#e3e6f3;color:#5a607a}
.badge.enviando{background:#dcfce7;color:#1a7f4b}
.badge.pausada{background:#fff3dc;color:#b8730a}
.badge.concluida{background:#e3ecff;color:#3b5bdb}
.badge.online{background:#dcfce7;color:#1a7f4b}
.badge.offline{background:#ffe3e3;color:#c0392b}
.badge.sucesso{background:#dcfce7;color:#1a7f4b}
.badge.falha{background:#ffe3e3;color:#c0392b}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.dot.on{background:var(--ok)}.dot.off{background:var(--erro2)}.dot.warn{background:var(--warn)}

/* ---- CSV stats ---- */
.csv-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.csv-stats .chip{padding:8px 12px;border-radius:12px;box-shadow:var(--sh-in);font-size:.82rem}

/* ---- Preview WhatsApp ---- */
.preview-whats{
  background:#dcf8c6;color:#222;padding:12px 14px;border-radius:12px 12px 12px 2px;
  box-shadow:var(--sh-sm-out);white-space:pre-wrap;word-break:break-word;min-height:48px;margin-top:6px;
  font-size:.9rem;line-height:1.4;
}
.preview-whats img{max-width:100%;border-radius:8px;margin-bottom:8px}
.preview-whats .btn-fake{display:block;text-align:center;margin-top:8px;padding:8px;
  background:#fff;border-radius:8px;color:#0a7cff;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ---- QR ---- */
.qr-box{margin-top:16px;text-align:center}
.qr-box img{width:240px;height:240px;border-radius:16px;box-shadow:var(--sh-out);padding:10px;background:#fff}

/* ---- Lista instâncias ---- */
.inst-card{padding:14px;border-radius:var(--radius-sm);box-shadow:var(--sh-sm-out);margin-bottom:12px}
.inst-card .top{display:flex;justify-content:space-between;align-items:center}
.inst-card .meta{font-size:.8rem;color:var(--muted);margin-top:6px}

/* ---- Toast ---- */
.toast{position:fixed;bottom:24px;right:24px;background:#3a3f55;color:#fff;padding:14px 18px;border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(20px);transition:.25s;z-index:999;max-width:340px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:#1a7f4b}.toast.erro{background:#c0392b}

/* ---- Responsivo ---- */
@media(max-width:860px){
  .grid-2{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:50;transform:translateX(-110%);transition:.25s;margin:0;height:100vh;border-radius:0 var(--radius) var(--radius) 0}
  .sidebar.aberta{transform:translateX(0)}
  .menu-toggle{display:inline-block;margin-bottom:14px}
  .conteudo{padding:16px}
}