/* Complemento aos tokens AZZA: estrutura do painel. Mobile primeiro (360px). */

/* Estrutura: painel lateral fixo à esquerda, conteúdo à direita */
.app{ display:flex; gap:30px; align-items:flex-start; max-width:1280px }
.lateral{
  position:sticky; top:0; width:196px; flex-shrink:0; min-width:0;
  display:flex; flex-direction:column; gap:18px;
  padding:26px 0; min-height:100vh;
}
.conteudo{ flex:1; min-width:0 }
.marca{ font-family:'Sora',sans-serif; font-weight:800; font-size:17px; letter-spacing:-.02em; padding:0 13px }
.marca span{ color:var(--accent-text) }
.menu{ display:flex; flex-direction:column; gap:2px }
.menu a{
  display:flex; align-items:center; gap:10px;
  padding:9px 13px; border-radius:9px; font-size:13.5px; font-weight:500; color:var(--text-2);
  white-space:nowrap;
}
.icone{ width:16px; height:16px; flex-shrink:0 }

/* Abas horizontais dentro de uma página (mecânica do SendFlow) */
.abas{
  display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--line);
  margin-bottom:4px; padding-bottom:0;
}
.abas a{
  padding:11px 15px; font-size:13.5px; font-weight:600; color:var(--text-2);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.abas a:hover{ color:var(--text) }
.abas a.ativa{ color:var(--accent-text); border-bottom-color:var(--accent) }

/* Cartões de campanha (lista em grade, como no SendFlow) */
.cartoes{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) }
.cartao{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px;
  display:grid; gap:12px; min-width:0; transition:transform .15s var(--ease), border-color .2s;
}
.cartao:hover{ transform:translateY(-3px); border-color:var(--line-2) }
.cartao .metricas{
  display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.cartao .metricas strong{ color:var(--text); font-family:Sora }
.cartao .nome{ font-weight:700; font-size:15px; overflow-wrap:anywhere }
.menu a:hover{ color:var(--text); background:rgba(255,255,255,.06) }
.menu a.ativo{ color:var(--accent-text); background:var(--accent-soft) }
.sair{ margin-top:auto; padding:0 13px }

main{ padding:26px 0 60px; display:grid; gap:22px }

h1{ font-size:clamp(24px,3.5vw,34px); font-weight:800; letter-spacing:-.03em }
.eyebrow{
  font-family:'Sora',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent-text);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--accent); border-radius:5px }

.painel{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; min-width:0 }
.painel h2{ font-size:16px; font-weight:700; margin-bottom:14px }

.grade-kpi{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.kpi{
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:16px; padding:20px; min-width:0;
}
.kpi .k-lbl{
  font-size:12px; color:var(--text-3); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:12px;
}
.kpi .k-val{
  font-family:'Sora',sans-serif; font-weight:800; font-size:30px;
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.kpi .k-apoio{ font-size:12px; margin-top:10px; color:var(--text-2) }

.badge{
  font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:30px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.badge .d{ width:6px; height:6px; border-radius:50%; background:currentColor }
.badge.ok{ background:rgba(43,214,106,.13); color:var(--ok) }
.badge.warn{ background:rgba(242,200,17,.13); color:var(--aviso) }
.badge.ruim{ background:rgba(229,86,78,.13); color:var(--ruim) }
.badge.idle{ background:rgba(255,255,255,.06); color:var(--text-2) }

.pill{ padding:4px 11px; border:1px solid var(--line-2); border-radius:30px; font-size:12px; color:var(--text-2) }

.tabela-rolagem{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface) }
table{ width:100%; border-collapse:collapse; font-size:14px }
th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-3); font-weight:600; padding:12px 14px; white-space:nowrap;
}
td{ padding:11px 14px; border-top:1px solid var(--line); vertical-align:top; min-width:0 }
td.num{ font-variant-numeric:tabular-nums; text-align:right }
tr:hover td{ background:rgba(255,255,255,.02) }

form.linha{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
label{ font-size:13.5px; color:var(--text-2); display:grid; gap:6px }
input,select,textarea{
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px;
  color:var(--text); padding:11px 13px; font-size:14.5px; font-family:inherit; min-width:0;
}
input:focus,select:focus,textarea:focus{ outline:2px solid var(--accent); outline-offset:1px }

.mini{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; font-weight:600; padding:9px 14px; border-radius:9px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--text);
}
.mini:hover{ background:rgba(255,255,255,.1) }
.mini.solid{ background:var(--accent); color:var(--accent-ink); border-color:transparent }
.mini.perigo{ color:var(--ruim); border-color:rgba(229,86,78,.4) }

.aviso{ padding:13px 16px; border-radius:11px; font-size:14px; border:1px solid }
.aviso-ok{ background:rgba(43,214,106,.1); border-color:rgba(43,214,106,.35); color:var(--ok) }
.aviso-ruim{ background:rgba(229,86,78,.1); border-color:rgba(229,86,78,.35); color:var(--ruim) }

.paginacao{ display:flex; gap:10px; align-items:center; padding-top:6px }

.qr-caixa{ background:#ffffff; border-radius:16px; padding:14px; width:min(300px,100%); margin:0 auto }
.qr-caixa img{ display:block; width:100%; height:auto }

.barra-h{ display:grid; gap:8px }
.barra-h .item{ display:grid; grid-template-columns:minmax(90px,180px) 1fr auto; gap:10px; align-items:center; font-size:13px }
.barra-h .nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2) }
.barra-h .trilho{ background:var(--surface-2); border-radius:6px; height:14px; overflow:hidden }
.barra-h .valor-barra{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); height:100%; border-radius:6px }
.barra-h .num{ font-variant-numeric:tabular-nums; font-size:12.5px }

.frase-grafico{ font-size:13px; color:var(--text-2); padding-top:8px }

/* Avatar redondo com bolinha de status (padrao SendFlow) */
.avatar{ position:relative; display:inline-flex; width:38px; height:38px; flex-shrink:0 }
.avatar img{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--surface-2) }
.avatar .ini{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); color:var(--text-2); font-weight:700; font-size:15px; font-family:'Sora',sans-serif;
}
.avatar .ponto{
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  border:2px solid var(--surface);
}
.linha-check{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13.5px; color:var(--text) }

/* Prévia fiel do WhatsApp (como o SendFlow) */
.previa{ display:grid; grid-template-columns:minmax(240px,1fr) minmax(200px,280px); gap:1px;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--line) }
.wa-fundo{
  padding:18px; background-color:#0b141a;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size:20px 20px; display:flex; align-items:flex-start;
}
.wa-balao{
  position:relative; background:#005c4b; color:#e9edef; border-radius:8px 8px 8px 8px;
  padding:8px 30px 8px 11px; font-size:14px; line-height:1.5; max-width:85%;
  box-shadow:0 1px .5px rgba(0,0,0,.2); word-break:break-word;
}
.wa-balao code{ background:rgba(0,0,0,.25); border-radius:4px; padding:1px 4px; font-size:13px }
.wa-balao s{ opacity:.7 }
.wa-hora{ position:absolute; right:8px; bottom:5px; font-size:10.5px; color:#8fb9ae }
.wa-acao{ background:var(--surface-2); color:var(--text); border-radius:8px; padding:12px 14px; font-size:13.5px; max-width:90% }
.wa-legenda{ margin-top:8px; color:var(--text-2); font-size:13px }
.previa-meta{ background:var(--surface); padding:16px; display:grid; gap:9px; align-content:start }
.previa-meta .linha-meta{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-2); min-width:0 }
.previa-meta .linha-meta > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.previa-meta .avatar{ width:26px; height:26px }
.previa-meta .avatar img, .previa-meta .avatar .ini{ width:26px; height:26px; font-size:12px }
.previa-meta [class^="ic-"]{ width:16px; height:16px; flex-shrink:0; opacity:.6;
  background:currentColor; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat }
@media (max-width:620px){ .previa{ grid-template-columns:1fr } }

/* Assistente de acoes (formato SendFlow): trilha de bolas + passos */
.trilha{ display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:6px 0 18px }
.trilha .etapa{ display:flex; flex-direction:column; align-items:center; gap:7px; min-width:92px; position:relative; cursor:pointer }
.trilha .etapa::after{ content:''; position:absolute; top:19px; left:calc(50% + 22px); right:calc(-50% + 22px); height:2px; background:var(--line) }
.trilha .etapa:last-child::after{ display:none }
.trilha .bola{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; z-index:1;
  background:var(--surface-2); color:var(--text-3); border:1px solid var(--line);
}
.trilha .bola.feito, .trilha .bola.atual{ background:var(--accent); color:var(--accent-ink); border-color:transparent }
.trilha .bola.feito ~ .rot, .trilha .bola.atual ~ .rot{ color:var(--text) }
.trilha .etapa.feito::after, .trilha .etapa.atual::after{ background:var(--accent) }
.trilha .rot{ font-size:11.5px; color:var(--text-3); font-weight:600; text-align:center; white-space:nowrap }
.trilha .icone{ width:19px; height:19px }

.escolha{ display:grid; gap:10px }
.escolha label{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); cursor:pointer; font-size:15px; color:var(--text); font-weight:600;
}
.escolha label:hover{ border-color:var(--line-2) }
.escolha input:checked + .marca-escolha{ /* rotulo destacado */ }
.escolha label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft) }
.escolha .icone-acao{ width:22px; height:22px; color:var(--accent-text) }
.escolha input{ margin-left:auto; width:18px; height:18px; accent-color:var(--accent) }

.compositor{ display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start }
.compositor .barra-fmt{ display:flex; gap:4px; margin-bottom:8px }
.compositor .barra-fmt button{ padding:6px 10px; border:1px solid var(--line-2); border-radius:7px; color:var(--text-2); font-size:13px }
.compositor .barra-fmt button:hover{ color:var(--text); background:rgba(255,255,255,.06) }
.compositor textarea{ width:100%; min-height:220px; resize:vertical }
.compositor .opcoes{ display:grid; gap:16px }
.compositor .opcoes .grupo-op{ display:grid; gap:6px }
.compositor .opcoes .k{ font-size:12.5px; color:var(--text-2); font-weight:600 }
.seg{ display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden }
.seg label{ padding:8px 12px; font-size:12.5px; color:var(--text-2); cursor:pointer; border-right:1px solid var(--line) }
.seg label:last-child{ border-right:none }
.seg label:has(input:checked){ background:var(--accent); color:var(--accent-ink); font-weight:700 }
.seg input{ display:none }
.insercoes{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }

.wizard-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:20px }

@media (max-width:760px){ .compositor{ grid-template-columns:1fr } }

.login-caixa{
  max-width:380px; margin:14vh auto 0; display:grid; gap:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px;
}

/* Celular: o painel lateral vira uma barra rolável no topo */
@media (max-width:760px){
  .app{ display:block }
  .lateral{
    position:sticky; top:0; z-index:5; width:100%; min-height:0;
    flex-direction:row; align-items:center; gap:10px; padding:12px 0;
    background:linear-gradient(180deg, rgba(6,7,14,.9), rgba(6,7,14,.65));
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  .marca{ padding:0; flex-shrink:0 }
  .menu{ flex-direction:row; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px }
  .sair{ display:none }
  main{ padding-top:14px }
}