* { box-sizing: border-box; }

:root {
  --verde-escuro: #0f3320;
  --verde-mais-escuro: #0a2417;
  --dourado: #d9a544;
  --dourado-claro: #e8c179;
  --creme: #f7f2eb;
  --texto: #14271c;
}

body {
  margin: 0;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background: var(--creme);
  color: var(--texto);
}

.oculto { display: none !important; }

/* Hover/clique consistente em todos os botões do sistema — reforça que é clicável,
   por cima de qualquer cor/hover específico já definido em cada botão. */
button:not(:disabled) { cursor: pointer; transition: filter 0.15s ease, transform 0.05s ease; }
button:not(:disabled):hover { filter: brightness(1.12); }
button:not(:disabled):active { transform: scale(0.97); }

/* ---------- LOGIN ---------- */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 20%, #163d27 0%, var(--verde-escuro) 45%, var(--verde-mais-escuro) 100%);
}
.card-login {
  background: linear-gradient(160deg, var(--dourado-claro), var(--dourado));
  padding: 48px 40px 36px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  width: 300px;
  text-align: center;
}
.logo-badge {
  width: 92px;
  height: 92px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--verde-escuro);
  border: 4px solid var(--creme);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-badge img { width: 70%; height: auto; }
.logo-badge.pequeno { width: 48px; height: 48px; border-width: 2px; margin: 0; }

.card-login h1 { margin: 4px 0 0; color: var(--verde-escuro); font-size: 28px; letter-spacing: 0.5px; }
.card-login .subtitulo { color: rgba(15,51,32,0.75); margin: 2px 0 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.card-login input {
  width: 100%;
  padding: 13px;
  margin-bottom: 12px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  background: rgba(255,255,255,0.9);
}
.card-login button {
  width: 100%;
  padding: 13px;
  background: var(--verde-escuro);
  color: var(--creme);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.card-login button:hover { background: var(--verde-mais-escuro); }

.erro { color: #7a1f1f; min-height: 18px; font-size: 13px; margin: 6px 0 0; }

/* ---------- APP SHELL ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 260px;
  background: linear-gradient(180deg, var(--verde-escuro), var(--verde-mais-escuro));
  color: var(--creme);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  flex-shrink: 0;
  transition: width 0.2s ease, padding 0.2s ease;
}
.sidebar-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.sidebar-marca { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar-marca strong { font-size: 16px; }
.sidebar-marca span { font-size: 11px; color: var(--dourado-claro); text-transform: uppercase; letter-spacing: 0.5px; }

/* Botão de recolher/expandir o menu (só desktop) */
.btn-recolher {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; padding: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(217,165,68,0.3);
  border-radius: 8px; color: var(--creme); cursor: pointer;
}
.btn-recolher:hover { background: rgba(255,255,255,0.18); }
.btn-recolher svg { display: block; transition: transform 0.2s ease; }

/* Estado recolhido — vira uma faixa só com ícones + logo (desktop) */
@media (min-width: 861px) {
  .sidebar.recolhida { width: 78px; padding-left: 12px; padding-right: 12px; }
  .sidebar.recolhida .sidebar-marca,
  .sidebar.recolhida .menu-texto,
  .sidebar.recolhida .menu-contador,
  .sidebar.recolhida .sidebar-dev-credito { display: none; }
  .sidebar.recolhida .sidebar-topo { flex-direction: column; gap: 14px; margin-bottom: 26px; }
  .sidebar.recolhida .btn-recolher { margin-left: 0; }
  .sidebar.recolhida .btn-recolher svg { transform: rotate(180deg); }
  .sidebar.recolhida .menu-item { justify-content: center; padding: 12px 0; gap: 0; }
  .sidebar.recolhida .menu-icone { font-size: 19px; }
  .sidebar.recolhida .sidebar-rodape-icones { flex-direction: column; gap: 12px; }
}

.menu { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(217,165,68,0.25);
  background: transparent;
  color: var(--creme);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  position: relative;
}
.menu-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(217,165,68,0.6); }
.menu-item.ativo { background: var(--dourado); border-color: var(--dourado); color: var(--verde-escuro); font-weight: 700; }
.menu-icone { font-size: 16px; }
.menu-texto { white-space: nowrap; }
.menu-contador {
  margin-left: auto;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
}
.menu-item.ativo .menu-contador { background: rgba(15,51,32,0.2); }
/* Aba sem permissão: visível, porém acinzentada e não-clicável (tooltip no hover informa) */
.menu-item.bloqueado { opacity: 0.4; cursor: not-allowed; }
.menu-item.bloqueado:hover { background: transparent; border-color: transparent; }

.sidebar-rodape { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sidebar-rodape-icones { display: flex; align-items: center; justify-content: center; gap: 16px; }
.sidebar-dev-credito { margin: 0; font-size: 11px; color: var(--dourado-claro); text-align: center; opacity: 0.85; }

.icone-rodape {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(217,165,68,0.4);
  color: var(--dourado-claro); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  overflow: hidden; background-size: cover; background-position: center;
}
.icone-rodape:hover { background-color: rgba(255,255,255,0.12); border-color: var(--dourado-claro); }

.usuario-avatar-overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  flex-direction: column; font-size: 7px; line-height: 1.3; color: #fff;
  background: rgba(0,0,0,0.6); text-align: center; border-radius: 50%;
}
#usuario-avatar-inicial:hover .usuario-avatar-overlay { display: flex; }

.botao-sair:hover {
  background: #c0392b; border-color: #c0392b; color: #fff;
  box-shadow: 0 0 10px 2px rgba(192,57,43,0.6);
}

/* ---------- RECORTE DE AVATAR ---------- */
.crop-area {
  width: 220px; height: 220px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden;
  position: relative; background: #222; cursor: grab; box-shadow: 0 0 0 3px var(--dourado);
  touch-action: none;
}
.crop-area:active { cursor: grabbing; }
.crop-area img { position: absolute; top: 0; left: 0; transform-origin: 0 0; user-select: none; pointer-events: none; max-width: none; }
#crop-zoom { width: 100%; margin-bottom: 14px; }
.modal-crop-card { text-align: center; }

.conteudo { flex: 1; padding: 28px 36px; max-width: 1500px; }

.topo-banner {
  background: linear-gradient(120deg, var(--verde-escuro), #1c5c39);
  color: var(--creme);
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topo-banner h1 { margin: 0 0 6px; font-size: 22px; }
.topo-banner p { margin: 0; color: rgba(247,242,235,0.85); font-size: 14px; }
.topo-banner-logo { height: 54px; width: auto; flex-shrink: 0; opacity: 0.95; }

@media (max-width: 860px) {
  .topo-banner-logo { display: none; }
}

.painel-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.painel-card h2 { margin: 0 0 16px; font-size: 16px; color: var(--verde-escuro); }

.lote-cabecalho { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.lote-cabecalho h2 { margin: 0; }
.lote-cabecalho-acoes { display: flex; align-items: center; gap: 14px; }
.selecionar-todos { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; cursor: pointer; }
.botao-whatsapp-lote {
  padding: 10px 16px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.botao-whatsapp-lote:hover { background: #1ebc59; }
.botao-whatsapp-lote:disabled { background: #c8e6d2; cursor: not-allowed; }

.form-gerar { display: flex; gap: 8px; flex-wrap: wrap; }
.checkbox-grade { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; width: 100%; }
.checkbox-grade label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; background: #fff; border: 1px solid #e3ddd0; border-radius: 8px;
  padding: 10px 12px; width: 100%; box-sizing: border-box;
}
.checkbox-grade label input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; cursor: pointer; }

.badge-papel {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
.badge-papel.admin { background: var(--dourado); color: var(--verde-escuro); }
.badge-papel.operador { background: #e3ddd0; color: #555; }
#bloco-abas-permitidas { width: 100%; }
#bloco-abas-permitidas.desabilitado { opacity: 0.45; pointer-events: none; }
.form-gerar-story input { flex: 1 1 200px; }
.form-gerar input, .form-gerar select {
  flex: 1;
  min-width: 220px;
  padding: 12px;
  border: 1px solid #e3ddd0;
  border-radius: 10px;
  background: var(--creme);
}
.form-gerar button {
  padding: 12px 22px;
  background: var(--dourado);
  color: var(--verde-escuro);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
.form-gerar button:hover { background: var(--dourado-claro); }

.preview { display: flex; gap: 20px; background: var(--creme); padding: 20px; border-radius: 12px; margin-top: 16px; }
.preview img { width: 220px; border-radius: 8px; object-fit: contain; background: #eee; }
.preview-texto { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.preview-texto .rotulo { margin: 0; font-size: 13px; color: #555; }
.preview-texto textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #e3ddd0; font-size: 14px; }
.preview-texto input { padding: 10px; border-radius: 8px; border: 1px solid #e3ddd0; }
.preview-texto button {
  align-self: flex-start;
  padding: 10px 18px;
  background: var(--verde-escuro);
  color: var(--creme);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

/* ---------- LISTA / LOTE ---------- */
.lote-tabela { display: flex; flex-direction: column; gap: 10px; }
.lote-tabela .lote-vazio { color: #999; font-size: 14px; padding: 12px 0; }

.lote-linha {
  display: grid;
  grid-template-columns: 20px 56px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid #ededed;
  border-radius: 10px;
}
.lote-linha input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.linha-simples {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 12px; border: 1px solid #ededed; border-radius: 10px; font-size: 13px;
  flex-wrap: wrap;
}
.linha-simples + .linha-simples { margin-top: 6px; }

/* Últimas atividades (Home): colunas alinhadas, nome à esquerda */
.linha-atividade {
  display: grid;
  grid-template-columns: 150px 1fr 160px 70px;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.linha-atividade .atv-tipo { color: #5a5a52; }
.linha-atividade .atv-nome { font-weight: 700; color: var(--verde-escuro); text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-atividade .atv-marketplace { display: flex; align-items: center; justify-content: flex-start; }
.linha-atividade .atv-hora { text-align: right; color: #8a8a82; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  .linha-atividade { grid-template-columns: 1fr auto; row-gap: 4px; }
  .linha-atividade .atv-tipo { order: 1; }
  .linha-atividade .atv-hora { order: 2; }
  .linha-atividade .atv-nome { order: 3; grid-column: 1 / -1; }
  .linha-atividade .atv-marketplace { order: 4; grid-column: 1 / -1; }
}
.lote-linha img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #eee; }
.lote-linha .campo-nome { font-size: 13px; font-weight: 600; }
.lote-linha .campo-marketplace {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--creme);
  color: var(--verde-escuro);
  margin-top: 4px;
}
.whatsapp-blocos { display: flex; gap: 18px; flex-wrap: wrap; }
.whatsapp-bloco {
  flex: 1;
  min-width: 260px;
  background: var(--creme);
  border: 1px solid #e9e2d3;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.whatsapp-bloco-titulo { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--verde-escuro); font-size: 15px; }
.whatsapp-bloco-linha { font-size: 13px; color: #555; display: flex; gap: 6px; }
.whatsapp-bloco select, .whatsapp-bloco input[type="text"] { padding: 10px; border-radius: 8px; border: 1px solid #e3ddd0; background: #fff; }

.dropdown-grupos { background: #fff; border: 1px solid #e3ddd0; border-radius: 8px; }
.dropdown-grupos summary {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--verde-escuro);
  list-style: none;
}
.dropdown-grupos summary::-webkit-details-marker { display: none; }
.dropdown-grupos summary::after { content: '▾'; float: right; }
.dropdown-grupos[open] summary::after { content: '▴'; }
.dropdown-grupos .lote-tabela { padding: 0 12px 12px; max-height: 260px; overflow-y: auto; }
.whatsapp-bloco input[type="text"]:disabled { background: #ececec; color: #999; cursor: not-allowed; }
.status-badge { padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.status-badge.conectado { background: #d7f3e3; color: #14532d; }
.status-badge.nao-conectado { background: #fde2e2; color: #7a1f1f; }
#btn-conectar-whatsapp, #btn-salvar-grupo {
  padding: 11px 18px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  align-self: flex-start;
}
#btn-conectar-whatsapp:hover, #btn-salvar-grupo:hover { background: #1ebc59; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-card { background: #fff; border-radius: 16px; padding: 28px; width: 360px; text-align: center; position: relative; }
.modal-card h2 { margin: 0 0 8px; color: var(--verde-escuro); }
.modal-card p { font-size: 13px; color: #666; }
.modal-card img { width: 300px; height: 300px; margin: 12px auto 0; display: block; image-rendering: pixelated; }
.modal-fechar { position: absolute; top: 12px; right: 12px; border: none; background: none; font-size: 16px; cursor: pointer; color: #999; }

.lote-linha .campo-preco { font-weight: 700; color: var(--verde-escuro); white-space: nowrap; }
.lote-linha .campo-acoes { display: flex; gap: 6px; }
.lote-linha .botao-whatsapp-zap {
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: #25D366;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.lote-linha .botao-whatsapp-zap:hover { background: #1ebc59; }
.botao-whatsapp-individual {
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: var(--dourado);
  color: var(--verde-escuro);
  cursor: pointer;
  font-size: 14px;
}
.botao-whatsapp-individual:hover { background: var(--dourado-claro); }
.lote-cabecalho-acoes .botao-whatsapp-individual { font-size: 16px; padding: 10px 14px; }
.lote-linha button {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: var(--creme);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--verde-escuro);
}
.lote-linha button:hover { background: var(--dourado-claro); }

.grupo-monitorado-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #ededed;
  border-radius: 10px;
}
.grupo-monitorado-linha input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.grupo-monitorado-linha span { font-size: 13px; font-weight: 600; }

.historico-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #ededed;
  border-radius: 10px;
  font-size: 13px;
}
.historico-status { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; flex-shrink: 0; }
.historico-status.enviado { background: #d7f3e3; color: #14532d; }
.historico-status.erro { background: #fde2e2; color: #7a1f1f; }
.historico-status.ignorado_duplicado { background: #f0e9d8; color: #6b5526; }
.historico-linha .historico-detalhe { color: #777; font-size: 12px; }
.historico-linha .historico-tempo { margin-left: auto; color: #999; font-size: 11px; white-space: nowrap; }

.lote-linha-enviada { opacity: 0.7; background: #fafafa; }
.lote-linha-enviada .historico-tempo { color: #888; font-size: 12px; }
.lote-linha-enviada .campo-acoes { flex-direction: column; align-items: flex-end; gap: 4px; }
.tag-enviada { display: block; width: fit-content; margin-top: 4px; font-size: 10px; font-weight: 700; color: var(--verde-escuro); background: rgba(15, 123, 90, 0.12); border-radius: 6px; padding: 1px 6px; }

/* Status do story no registro do dia: disparado no WhatsApp x somente salvo. */
.badge-status { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.badge-status.whatsapp { background: #d6f5e0; color: #128c3e; }
.badge-status.salvo { background: #e7e1f5; color: #5b3fa0; }

.usuario-botao { background: none; border: none; cursor: pointer; text-align: left; padding: 0; color: inherit; font-family: inherit; }
.usuario-botao:hover .usuario-avatar { background: var(--dourado-claro); }

.modal-config-card { width: 720px; max-width: 92vw; text-align: left; max-height: 86vh; overflow-y: auto; }
.config-menu { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 16px; }
.config-menu-item {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: var(--creme);
  color: var(--verde-escuro);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.config-menu-item.ativo { background: var(--dourado); }
.config-painel h3 { margin: 0 0 12px; color: var(--verde-escuro); }
.config-painel h4 { margin: 18px 0 8px; font-size: 13px; color: var(--verde-escuro); }
.lote-linha-botao-pequeno {
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: var(--creme);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--verde-escuro);
}
.lote-linha-botao-pequeno:hover { background: var(--dourado-claro); }

/* ---------- MOBILE ---------- */
.topbar-mobile {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--verde-escuro), var(--verde-mais-escuro));
  color: var(--creme);
}
.topbar-mobile strong { font-size: 15px; }
.botao-hamburguer {
  background: none;
  border: none;
  color: var(--creme);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
}
.overlay-sidebar {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 150;
}

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .topbar-mobile { display: flex; }
  .sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    height: 100vh;
    width: 250px;
    z-index: 200;
    transition: left 0.22s ease;
  }
  .sidebar.aberta { left: 0; }
  .sidebar-topo { display: none; }
  .btn-recolher { display: none; }

  .conteudo { padding: 18px; max-width: 100%; }
  .topo-banner { padding: 20px; }
  .topo-banner h1 { font-size: 19px; }

  .painel-card { padding: 16px; }

  .form-gerar input, .form-gerar select { min-width: 100%; }

  .whatsapp-blocos { flex-direction: column; }

  .lote-linha {
    grid-template-columns: 20px 48px 1fr;
    grid-template-areas:
      "check img nome"
      "acoes acoes acoes";
    row-gap: 10px;
  }
  .lote-linha input[type="checkbox"] { grid-area: check; }
  .lote-linha img { grid-area: img; }
  .lote-linha > div:nth-of-type(1) { grid-area: nome; }
  .lote-linha .campo-preco { display: none; }
  .lote-linha .campo-acoes { grid-area: acoes; justify-content: space-between; }

  .lote-cabecalho { flex-direction: column; align-items: flex-start; }
  .lote-cabecalho-acoes { flex-direction: column; align-items: flex-start; width: 100%; }
  .botao-whatsapp-lote { width: 100%; }

  .preview { flex-direction: column; }
  .preview img { width: 100%; max-width: 260px; }

  .modal-card { width: 88vw; padding: 20px; }
  .modal-card img { width: 100%; height: auto; max-width: 280px; }
}

/* ---------- HOME ---------- */
.home-status-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.home-card-status {
  flex: 1; min-width: 180px; background: #fff; border-radius: 12px; padding: 16px 18px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.home-card-icone { font-size: 26px; }
.home-card-status strong { display: block; font-size: 16px; color: var(--verde-escuro); }
.home-card-status span { font-size: 12px; color: #5a5a52; }

.home-alertas {
  background: #fdecec; border: 1px solid #f3b9b9; border-radius: 10px; padding: 12px 16px;
  margin-bottom: 18px; font-size: 13px; color: #8a1f1f;
}
.home-alertas p { margin: 4px 0; }

.home-atalhos { display: flex; gap: 12px; flex-wrap: wrap; }
.home-atalho {
  flex: 1; min-width: 160px; background: var(--verde-escuro); color: var(--creme); border: none;
  border-radius: 10px; padding: 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.home-atalho:hover { background: var(--verde-mais-escuro); }
.home-atalho-pequeno {
  background: none; border: none; color: var(--dourado); font-weight: 600; font-size: 13px;
  cursor: pointer; padding: 0;
}
.home-atalho-pequeno:hover { text-decoration: underline; }

/* ===== Home · dinâmica, brilho e micro-animações ===== */
@keyframes subir-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes brilho-borda { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* Entrada em cascata dos blocos da Home */
#painel-home > * { animation: subir-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
#painel-home > *:nth-child(1) { animation-delay: 0.03s; }
#painel-home > *:nth-child(2) { animation-delay: 0.08s; }
#painel-home > *:nth-child(3) { animation-delay: 0.13s; }
#painel-home > *:nth-child(4) { animation-delay: 0.18s; }
#painel-home > *:nth-child(5) { animation-delay: 0.23s; }
#painel-home > *:nth-child(6) { animation-delay: 0.28s; }
#painel-home > *:nth-child(7) { animation-delay: 0.33s; }
#painel-home > *:nth-child(8) { animation-delay: 0.38s; }

/* Cards de status com barra de brilho e elevação no hover */
.home-card-status {
  position: relative; overflow: hidden; border: 1px solid #eef0ec;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-card-status::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--dourado), var(--verde-escuro), var(--dourado));
  background-size: 200% 100%; animation: brilho-borda 4s linear infinite;
}
.home-card-status:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(15, 51, 32, 0.15); }
.home-card-icone { transition: transform 0.2s ease; filter: drop-shadow(0 0 5px rgba(217, 165, 68, 0.45)); }
.home-card-status:hover .home-card-icone { transform: scale(1.12); }

/* Atalhos com elevação e brilho */
.home-atalho { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.home-atalho:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(15, 51, 32, 0.28); }

/* Cards da Home reagem ao mouse */
#painel-home .painel-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
#painel-home .painel-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09); }

/* Visão geral do Instagram na Home */
.home-ig-card { position: relative; overflow: hidden; }
.home-ig-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #f09433);
  background-size: 200% 100%; animation: brilho-borda 6s linear infinite;
}
.home-ig-corpo { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.home-ig-perfil { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.home-ig-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: #eee center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dc2743;
}
.home-ig-perfil-txt strong { display: block; color: var(--verde-escuro); font-size: 15px; }
.home-ig-seguidores { font-size: 13px; color: #777; margin-top: 3px; }
.home-ig-seguidores b { color: var(--verde-escuro); font-size: 17px; }
.home-ig-badge {
  display: inline-block; background: #e7f6ec; color: #1e7e34; font-weight: 700;
  font-size: 11px; padding: 2px 9px; border-radius: 999px; margin-left: 6px;
}
.home-ig-badge.oculto { display: none; }
.home-ig-kpis { display: grid; grid-template-columns: repeat(2, minmax(92px, 1fr)); gap: 10px; }
.home-ig-kpi { background: var(--creme); border-radius: 10px; padding: 10px 13px; transition: transform 0.15s ease; }
.home-ig-kpi:hover { transform: translateY(-2px); }
.home-ig-kpi span { display: block; font-size: 11px; color: #8a8a82; text-transform: uppercase; letter-spacing: 0.03em; }
.home-ig-kpi b { font-size: 18px; color: var(--verde-escuro); }
.home-ig-spark { flex: 1; min-width: 170px; height: 76px; position: relative; }
.home-ig-rodape { font-size: 12px; color: #9a9a92; margin: 14px 2px 0; }
.home-ig-card.nao-conectado .home-ig-kpis,
.home-ig-card.nao-conectado .home-ig-spark { display: none; }

/* Visão geral da operação na Home — mesma linha do card do Instagram */
.home-dash-card { position: relative; overflow: hidden; }
.home-dash-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--dourado), var(--verde-escuro), var(--dourado));
  background-size: 200% 100%; animation: brilho-borda 6s linear infinite;
}
.home-dash-corpo { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.home-dash-destaque { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.home-dash-destaque-icone {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(135deg, var(--verde-escuro), #1e7e4f);
  box-shadow: 0 6px 16px rgba(15, 51, 32, 0.22);
}
.home-dash-destaque-txt b { display: block; color: var(--verde-escuro); font-size: 30px; line-height: 1; }
.home-dash-destaque-txt span { font-size: 12px; color: #777; }
.home-dash-kpis { display: grid; grid-template-columns: repeat(2, minmax(118px, 1fr)); gap: 10px; }
.home-dash-spark { flex: 1; min-width: 180px; height: 88px; position: relative; }

@media (prefers-reduced-motion: reduce) {
  #painel-home > *, .home-card-status::before, .home-ig-card::before, .home-dash-card::before { animation: none !important; }
  #painel-home .painel-card, .home-card-status, .home-atalho, .home-card-icone, .home-ig-kpi { transition: none !important; }
  .cupom-linha, #painel-comissoes > * { animation: none !important; }
}

.home-sugestoes-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-sugestoes-cabecalho h2 { margin: 0; }
.botao-refresh {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid #e2e4df; background: var(--creme); color: var(--verde-escuro);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.botao-refresh:hover { background: #fff; border-color: var(--dourado); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,51,32,0.12); }
.botao-refresh:active { transform: translateY(0); }
.botao-refresh svg { display: block; transition: transform 0.2s ease; }
.botao-refresh.girando svg { animation: girar-refresh 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes girar-refresh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .botao-refresh, .botao-refresh.girando svg { animation: none !important; transition: none !important; } }

.home-sugestoes-colunas { display: flex; gap: 16px; flex-wrap: wrap; }
.home-sugestoes-coluna {
  flex: 1; min-width: 240px; border: 1px solid rgba(0,0,0,0.1); border-radius: 14px;
  padding: 14px; background: rgba(0,0,0,0.015);
}
.home-sugestoes-titulo { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.home-sugestoes-titulo img { width: 22px; height: 22px; }

.logo-marketplace { display: inline-flex; align-items: center; gap: 5px; }
.logo-marketplace img { width: 18px; height: 18px; flex-shrink: 0; }
.home-sugestoes-lista { display: flex; flex-direction: column; gap: 10px; }
.sugestao-item {
  display: flex; gap: 10px; background: var(--creme); border-radius: 10px; padding: 8px;
  align-items: center; text-decoration: none; color: var(--texto);
}
.sugestao-item img { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sugestao-item-texto { font-size: 12px; line-height: 1.3; }
.sugestao-item-nome { display: block; max-height: 32px; overflow: hidden; }
.sugestao-item-preco { font-weight: 700; color: var(--verde-escuro); }
.sugestao-item-preco-original { text-decoration: line-through; color: #999; font-size: 11px; margin-left: 4px; }
.sugestao-item-metas { display: block; font-size: 10px; color: #8a8a8a; margin-top: 2px; }

/* Barra de filtros das "melhores ofertas" — dois dropdowns compactos, à direita */
.home-sugestoes-filtros { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.sug-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 1px solid #e2e4df; background-color: #fff; border-radius: 9px;
  padding: 7px 30px 7px 12px; font-size: 13px; font-weight: 600; color: var(--verde-escuro);
  cursor: pointer; width: auto; max-width: 200px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%230f3320' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.sug-select:hover { border-color: var(--dourado); }
.sug-select:focus { outline: none; border-color: var(--verde-escuro); box-shadow: 0 0 0 2px rgba(15, 123, 90, 0.12); }
.home-sugestoes-coluna.oculto { display: none; }
.home-sugestoes-colunas.uma-coluna .home-sugestoes-coluna { flex: 1 1 100%; }
.sugestao-item.copiado { outline: 2px solid var(--verde-escuro); outline-offset: 1px; background: rgba(15, 123, 90, 0.07); }

/* Toast flutuante (aviso de "link copiado" etc.) */
.toast-global {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--verde-escuro); color: #fff; font-size: 13px; font-weight: 600;
  padding: 12px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgba(15, 51, 32, 0.3);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 9999;
  max-width: 90vw; text-align: center;
}
.toast-global.visivel { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast-global { transition: opacity 0.25s ease; } }

/* ---------- RELATÓRIOS ---------- */
.relatorios-resumo { display: flex; gap: 16px; flex-wrap: wrap; }
.relatorios-card-numero {
  flex: 1; min-width: 160px; background: var(--creme); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px; padding: 18px; text-align: center;
}
.relatorios-card-numero strong { display: block; font-size: 30px; color: var(--verde-escuro); }
.relatorios-card-numero span { display: block; font-size: 13px; font-weight: 600; color: #5a5a52; }
.relatorios-card-numero small { display: block; font-size: 11px; color: #9a9a90; margin-top: 2px; }

/* KPIs de Relatórios em grade fixa 4×2 (todos do mesmo tamanho) */
.relatorios-resumo.rel-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rel-kpis .relatorios-card-numero {
  min-width: 0; min-height: 138px; padding: 16px 14px;
  display: flex; flex-direction: column; justify-content: center;
}
.rel-kpis .relatorios-card-numero strong { font-size: 28px; white-space: nowrap; line-height: 1.1; }
.rel-kpis .relatorios-card-numero span { margin-top: 6px; }
@media (max-width: 1100px) { .relatorios-resumo.rel-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .relatorios-resumo.rel-kpis { grid-template-columns: 1fr; } }

.relatorios-barras { display: flex; flex-direction: column; gap: 10px; }
.relatorios-barra-linha { display: flex; align-items: center; gap: 10px; }
.relatorios-barra-rotulo { width: 160px; flex-shrink: 0; font-size: 13px; font-weight: 600; }
.relatorios-barra-trilho { flex: 1; background: rgba(0,0,0,0.06); border-radius: 8px; height: 22px; overflow: hidden; }
.relatorios-barra-preenchida {
  height: 100%; background: linear-gradient(90deg, var(--dourado), var(--dourado-claro));
  border-radius: 8px 0 0 8px; transition: width 0.4s ease;
}
.relatorios-barra-valor { width: 36px; text-align: right; font-size: 13px; font-weight: 700; color: var(--verde-escuro); }

.rel-chart-wrap { position: relative; height: 240px; padding: 6px 2px 0; }
.rel-chart-alta { height: 320px; }
.rel-fonte { margin: 2px 0 10px; font-size: 12px; color: #9a9a90; }
.rel-barras-pie { justify-content: center; min-height: 200px; }
.relatorios-barra-reais { width: auto; min-width: 78px; white-space: nowrap; }

/* abas de origem (modelo de disparo) */
.rel-origem-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.rel-origem-bt {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #5a5a52; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.rel-origem-bt:hover { transform: translateY(-1px); border-color: var(--verde-escuro); }
.rel-origem-bt.ativa { background: var(--verde-escuro); color: #fff; border-color: var(--verde-escuro); }
.rel-origem-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--chip, #888); flex-shrink: 0; }
.rel-origem-bt.ativa .rel-origem-ponto { box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }

/* chip de origem na tabela */
.rel-origem-chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--chip, #888); background: color-mix(in srgb, var(--chip, #888) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--chip, #888) 35%, #fff); white-space: nowrap;
}

/* top produtos por comissão */
.rel-top-lista { display: flex; flex-direction: column; gap: 8px; }
.rel-top-item { display: flex; align-items: center; gap: 12px; }
.rel-top-rank {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--creme); border: 1px solid rgba(0,0,0,0.1); font-size: 12px; font-weight: 700; color: var(--verde-escuro);
}
.rel-top-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rel-top-nome { font-size: 13px; font-weight: 600; color: #3a3a32; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-top-barra { height: 7px; background: rgba(0,0,0,0.06); border-radius: 6px; overflow: hidden; }
.rel-top-barra span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--dourado), var(--dourado-claro)); transition: width 0.5s ease; }
.rel-top-mk { flex-shrink: 0; display: flex; align-items: center; }
.rel-top-mk img { height: 18px; width: auto; display: block; }
.rel-top-valor { flex-shrink: 0; min-width: 78px; text-align: right; font-size: 13px; font-weight: 700; color: var(--verde-escuro); white-space: nowrap; }
.relatorios-barras-dia { display: flex; align-items: flex-end; gap: 3px; height: 180px; overflow-x: auto; padding: 10px 4px 4px; border-bottom: 1px solid #e8e4d8; }
.relatorios-barra-dia { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 14px; max-width: 38px; height: 100%; }
.relatorios-barra-dia-coluna {
  width: 100%; max-width: 22px; min-height: 4px; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--dourado) 0%, #b9842f 100%);
  box-shadow: 0 2px 6px rgba(184,132,47,0.35);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  transform-origin: bottom; cursor: default;
}
.relatorios-barra-dia-coluna:hover { filter: brightness(1.15); transform: scaleX(1.2); box-shadow: 0 5px 14px rgba(184,132,47,0.5); }
.relatorios-barra-dia-numero { font-size: 10px; font-weight: 700; color: var(--verde-escuro); }
.relatorios-barra-dia-data { font-size: 8px; color: #8a8a80; white-space: nowrap; }

/* --- Cupons --- */
.cupom-passo-a-passo { margin: 4px 0 14px; }
.cupom-passo-a-passo summary { cursor: pointer; font-weight: 600; color: var(--verde-escuro); font-size: 13px; }
.cupom-passo-a-passo ol { margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: #5a5a52; line-height: 1.7; }

.campo-aviso-shopee {
  margin: 8px 2px 0; font-size: 12px; color: #8a5a00;
  background: #fff8e6; border: 1px solid #f3e2b0; border-radius: 8px; padding: 8px 12px;
}
.campo-aviso-shopee strong { color: #7a4d00; }
.cupom-resultado { margin-top: 14px; padding: 14px; background: #f3f8f4; border: 1px solid #d7eadd; border-radius: 12px; }
.cupom-resultado-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cupom-resultado-linha input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid #d7d2c4; border-radius: 8px; font-size: 13px; background: #fff; }

.form-cupom { display: flex; flex-direction: column; gap: 10px; }
.form-cupom-grade { display: flex; gap: 10px; flex-wrap: wrap; }
.form-cupom-grade input, .form-cupom-grade select { flex: 1; min-width: 140px; padding: 10px 12px; border: 1px solid #d7d2c4; border-radius: 8px; font-size: 14px; }
.form-cupom > input { padding: 10px 12px; border: 1px solid #d7d2c4; border-radius: 8px; font-size: 14px; }
.form-cupom button { align-self: flex-start; background: var(--dourado); color: var(--verde-escuro); border: none; padding: 10px 22px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.form-cupom button:hover { background: var(--dourado-claro); }

.cupom-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #ece8dc; border-radius: 12px; }
.cupom-linha + .cupom-linha { margin-top: 8px; }
.cupom-info { flex: 1; min-width: 0; }
.cupom-codigo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cupom-codigo {
  display: inline-block; font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: 0.5px;
  background: var(--verde-escuro); color: var(--dourado-claro); padding: 4px 10px; border-radius: 6px; font-size: 13px;
}
.cupom-codigo.pequeno { font-size: 11px; padding: 2px 8px; }
.cupom-validade { font-size: 11px; font-weight: 700; color: #14532d; background: #d7f3e3; padding: 3px 10px; border-radius: 999px; }
.cupom-validade.vencido { color: #7a1f1f; background: #fde2e2; }
.cupom-descricao { font-size: 13px; color: #5a5a52; margin-top: 6px; }
.cupom-link { display: block; font-size: 12px; color: #2a6f47; margin-top: 4px; word-break: break-all; }
.cupom-acoes { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Cupom ativo: entrada em cascata + hover com leve elevação */
.cupom-linha {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  animation: subir-fade 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cupom-linha:nth-child(1) { animation-delay: 0.02s; }
.cupom-linha:nth-child(2) { animation-delay: 0.06s; }
.cupom-linha:nth-child(3) { animation-delay: 0.10s; }
.cupom-linha:nth-child(4) { animation-delay: 0.14s; }
.cupom-linha:nth-child(5) { animation-delay: 0.18s; }
.cupom-linha:nth-child(n+6) { animation-delay: 0.22s; }
.cupom-linha:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 51, 32, 0.10);
  border-color: var(--dourado);
}

/* Histórico de ofertas com cupom: colunas alinhadas, nome à esquerda */
.linha-cupom-hist {
  display: grid;
  grid-template-columns: 150px 1fr 140px 90px;
  align-items: center;
  gap: 14px;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.linha-cupom-hist:hover { border-color: var(--dourado); background: #fcfbf6; }
.linha-cupom-hist .cuph-marketplace { display: flex; align-items: center; justify-content: flex-start; }
.linha-cupom-hist .cuph-nome { font-weight: 700; color: var(--verde-escuro); text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-cupom-hist .cuph-codigo { justify-self: start; }
.linha-cupom-hist .cuph-data { text-align: right; color: #8a8a82; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  .linha-cupom-hist { grid-template-columns: 1fr auto; row-gap: 4px; }
  .linha-cupom-hist .cuph-marketplace { order: 1; }
  .linha-cupom-hist .cuph-data { order: 2; }
  .linha-cupom-hist .cuph-nome { order: 3; grid-column: 1 / -1; }
  .linha-cupom-hist .cuph-codigo { order: 4; grid-column: 1 / -1; }
}

/* --- Cliques e Comissões --- */
.comissoes-marketplace-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.comissoes-marketplace-titulo .logo-marketplace { font-weight: 700; color: var(--verde-escuro); font-size: 15px; }
.comissoes-indisponivel { opacity: 0.75; }
.comissoes-indisponivel .rotulo { margin: 0; }

/* Cliques e Comissões: entrada em cascata + hover dos cards de número */
#painel-comissoes > * { animation: subir-fade 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
#painel-comissoes > *:nth-child(1) { animation-delay: 0.03s; }
#painel-comissoes > *:nth-child(2) { animation-delay: 0.09s; }
#painel-comissoes > *:nth-child(3) { animation-delay: 0.15s; }
#painel-comissoes > *:nth-child(4) { animation-delay: 0.21s; }
.relatorios-card-numero { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.relatorios-card-numero:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(15, 51, 32, 0.10);
  border-color: var(--dourado);
}

/* Filtro de período (select + range personalizado) */
.comissoes-filtro { display: flex; align-items: center; gap: 8px; }
.comissoes-custom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.comissoes-custom label { font-size: 13px; font-weight: 600; color: #5a5a52; display: flex; align-items: center; gap: 6px; }
.comissoes-custom input[type="date"] {
  border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; padding: 7px 10px; font-size: 13px;
  font-family: inherit; color: var(--texto); background: #fff;
}
.botao-aplicar-periodo {
  border: none; background: var(--verde-escuro); color: #fff; font-weight: 700; font-size: 13px;
  padding: 8px 18px; border-radius: 8px; cursor: pointer; transition: background 0.18s ease, transform 0.12s ease;
}
.botao-aplicar-periodo:hover { background: #16482e; transform: translateY(-1px); }
.comissoes-periodo-label { margin: 12px 2px 0; font-size: 12.5px; color: #8a8a80; }

/* Topo do card de número: valor + selo de % */
.com-card-topo { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.com-card-topo strong { display: inline-block; }

/* Títulos de seção dentro do card da Shopee */
.com-secao-titulo { margin: 26px 0 6px; color: var(--verde-escuro); font-size: 16px; }
.com-secao-titulo small { display: block; font-size: 11.5px; font-weight: 500; color: #9a9a90; margin-top: 2px; }
.com-chart-wrap { height: 240px; }

/* Nota explicativa abaixo do gráfico de cliques */
.com-chart-nota {
  margin: 8px 2px 0; font-size: 12px; line-height: 1.45; color: #8a8a80;
  background: #faf7f0; border: 1px solid #efe9db; border-radius: 10px; padding: 8px 12px;
}

/* Gráficos de pizza (categoria / subcategoria) lado a lado */
.com-pies-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
/* Na Relatórios cada linha de gráficos é um bloco solto: mesma separação (20px) dos demais cards */
#painel-relatorios .com-pies-wrap { margin: 0 0 20px; }
.com-pie {
  border: 1px solid #ece7da; border-radius: 14px; padding: 14px 12px 10px;
  background: linear-gradient(180deg, #fffdf8 0%, #fcf9f1 100%);
}
.com-pie-titulo { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #5a5a52; text-align: center; }
.com-pie-canvas { height: 260px; display: flex; align-items: center; justify-content: center; }
.com-pie-canvas .lote-vazio { margin: 0; }

/* Cabeçalho da tabela com o seletor de ordenação */
.com-tabela-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.com-ordenar { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #7a7a70; font-weight: 600; }
.com-ordenar select {
  padding: 7px 10px; border: 1px solid #ddd6c6; border-radius: 8px; background: #fff;
  font-size: 13px; color: #4a4a44; cursor: pointer;
}
.com-hora { white-space: nowrap; color: #9a9a90; font-size: 12px; }

/* Paginação da tabela de pedidos */
.com-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.com-pag-botoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.com-pag-bt {
  padding: 7px 12px; border: 1px solid #ddd6c6; border-radius: 8px; background: #fff;
  color: #5a5a52; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.com-pag-bt:hover:not(:disabled) { background: #faf7f0; border-color: var(--dourado, #d9a544); }
.com-pag-num { min-width: 38px; text-align: center; }
.com-pag-bt.ativa { background: var(--verde-escuro); color: #fff; border-color: var(--verde-escuro); }
.com-pag-bt:disabled { opacity: 0.45; cursor: default; }
.com-pag-elip { color: #b8b3a4; padding: 0 2px; }
.com-pag-info { font-size: 12.5px; color: #8a8a80; font-weight: 600; }

/* Tabelas detalhadas (pedidos / cliques) */
.com-tabela-wrap { overflow-x: auto; margin-top: 6px; border: 1px solid #ece7da; border-radius: 12px; }
.com-tabela { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.com-tabela thead th {
  text-align: left; background: var(--creme); color: #5a5a52; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 10px 12px; border-bottom: 1px solid #e8e4d8; white-space: nowrap; position: sticky; top: 0;
}
.com-tabela tbody td { padding: 10px 12px; border-bottom: 1px solid #f0ece2; vertical-align: middle; }
.com-tabela tbody tr { transition: background 0.14s ease; }
.com-tabela tbody tr:hover { background: #fbf8f1; }
.com-tabela tbody tr:last-child td { border-bottom: none; }
.com-data { white-space: nowrap; }
.com-data small { color: #9a9a90; font-size: 11px; }
.com-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #5a5a52; white-space: nowrap; }
.com-num { text-align: right; white-space: nowrap; }
.com-comissao { font-weight: 700; color: var(--verde-escuro); }

.com-prod { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.com-prod-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f2efe7; border: 1px solid #ece7da; }
.com-prod-semfoto { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f2efe7; flex-shrink: 0; font-size: 18px; }
.com-prod-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; max-width: 280px; }

.com-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.com-status-ok { background: #e3f5ea; color: #1e7e44; }
.com-status-pendente { background: #fdf3df; color: #9a6b00; }
.com-status-cancelado { background: #fbe6e6; color: #b3261e; }
.com-status-neutro { background: #eee; color: #666; }

.com-origem { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.com-origem-manual { background: #e7eefb; color: #2a4d9b; }
.com-origem-automacao { background: #efe7fb; color: #6b3fa0; }
.com-origem-direto { background: #eee; color: #666; }
.com-origem-outro { background: #e9f3ee; color: #2c6b48; }
.com-origem-cod { display: block; font-size: 10px; color: #aaa; margin-top: 2px; font-weight: 500; }

@media (max-width: 760px) {
  .lote-cabecalho .comissoes-filtro { width: 100%; }
  .comissoes-filtro select { flex: 1; }
  .com-pies-wrap { grid-template-columns: 1fr; }
  .com-tabela-cabecalho { align-items: flex-start; }
}

/* Botão "Tentar de novo" quando a listagem de grupos falha (ex: rate-limit da Evolution). */
.botao-recarregar {
  margin-top: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--verde-escuro);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}
.botao-recarregar:hover { background: var(--verde-mais-escuro); }

.botao-apagar-lote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: #c0392b;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.botao-apagar-lote svg { display: block; }
.botao-apagar-lote:hover { background: #a93226; }

.botao-baixar-lote {
  padding: 10px 16px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--verde-escuro); color: #fff; font-size: 0.95rem; font-weight: 600;
}
.botao-baixar-lote:hover { background: var(--verde-mais-escuro); }

/* Botão só com ícone (ex.: salvar/disquete) — ícone branco e nítido. */
.botao-icone { display: inline-flex; align-items: center; justify-content: center; padding: 9px 12px; }
.botao-icone svg { display: block; }

/* Todos os botões da barra de ações de qualquer lista ficam na MESMA altura e
   alinhados — vale pra todas as páginas (disparar, salvar/disquete, contato 👤,
   apagar/lixeira, gerar posts, etc). box-sizing:border-box trava 38px de altura
   total independente do padding de cada um. */
.lote-cabecalho-acoes button {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

/* Lixeira em cada linha — ícone branco em fundo vermelho. */
.botao-lixeira {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 9px; border: none; border-radius: 8px; cursor: pointer;
  background: #c0392b; color: #fff; flex-shrink: 0;
}
.botao-lixeira:hover { background: #a93226; }
.botao-lixeira svg { display: block; }

/* ---- Dashboard do Instagram ---- */
.ig-conexao { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ig-conexao h2 { margin-bottom: 6px; }
.ig-status-desconectado { color: #8a8a8a; font-weight: 600; margin: 0 0 6px; }
.ig-status-pendente { color: #b7791f; font-weight: 600; margin: 0 0 6px; }
.ig-status-conectado { color: #1e7e34; font-weight: 600; margin: 0 0 6px; }
.ig-ajuda { color: #555; font-size: 0.88rem; margin: 0; max-width: 540px; }
.botao-conectar-ig {
  padding: 12px 18px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af);
  color: #fff; font-weight: 700; font-size: 0.95rem; white-space: nowrap;
}
.botao-conectar-ig:hover { filter: brightness(1.05); }

.ig-perfil { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ig-perfil-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: var(--creme); border: 2px solid var(--dourado); overflow: hidden;
}
.ig-perfil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ig-perfil-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.ig-perfil-info strong { font-size: 1.05rem; color: var(--verde-escuro); }
.ig-perfil-info > span { color: #444; font-size: 0.9rem; }
.ig-bio { color: #666; font-size: 0.85rem; margin: 4px 0 0; }
.ig-perfil-numeros { display: flex; gap: 22px; }
.ig-perfil-numeros div { text-align: center; }
.ig-perfil-numeros b { display: block; font-size: 1.2rem; color: var(--verde-escuro); }
.ig-perfil-numeros span { font-size: 0.75rem; color: #888; }

.ig-periodo { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem; }
.ig-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.ig-kpi {
  background: var(--creme); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px; border: 1px solid #efe7da;
}
.ig-kpi-rotulo { font-size: 0.8rem; color: #777; text-transform: uppercase; letter-spacing: 0.04em; }
.ig-kpi-valor { font-size: 1.6rem; color: var(--verde-escuro); line-height: 1; }
.ig-kpi-nota { font-size: 0.75rem; color: #999; }
.ig-kpi-valor { transition: color 0.2s ease; }

/* Selo de comparação vs período anterior (▲ verde sobe / ▼ vermelho cai) */
.ig-kpi-delta {
  display: inline-flex; align-items: center; gap: 3px; align-self: flex-start;
  font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  margin-top: 2px; line-height: 1.3;
}
.ig-kpi-delta:empty { display: none; }
.ig-kpi-delta.sobe { background: #e7f6ec; color: #1e7e34; }
.ig-kpi-delta.cai { background: #fdecec; color: #c0392b; }
.ig-kpi-delta.estavel { background: #f0f0f0; color: #777; }
.ig-comparativo-legenda { font-size: 0.76rem; color: #aaa; margin: 12px 2px 0; }

/* Sub-abas do Instagram (Resumo | Gráficos) */
.ig-subnav { display: flex; gap: 8px; margin-bottom: 16px; }
.ig-subtab {
  border: 1px solid #e3dccb; background: #fff; color: #777;
  padding: 9px 18px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.ig-subtab:hover { border-color: var(--verde); color: var(--verde-escuro); }
.ig-subtab.ativa { background: var(--verde, #1e7e34); color: #fff; border-color: var(--verde, #1e7e34); }
.ig-subpainel.oculto { display: none; }

/* Cards coloridos da aba Gráficos */
.ig-kpi-cor1 { border-left: 4px solid #e1306c; }
.ig-kpi-cor2 { border-left: 4px solid #fd8d32; }
.ig-kpi-cor3 { border-left: 4px solid #00b4d8; }
.ig-kpi-cor4 { border-left: 4px solid #405de6; }
.ig-kpi-cor5 { border-left: 4px solid #8a3ab9; }
.ig-kpi-cor6 { border-left: 4px solid #1e7e34; }

/* Áreas de gráfico */
.ig-chart-wrap { position: relative; height: 320px; margin-top: 8px; }
.ig-chart-pizza { height: 260px; }
.ig-chart-nota { font-size: 0.76rem; color: #999; margin: 10px 2px 0; line-height: 1.4; }
.ig-pizzas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.ig-pizzas .painel-card { margin: 0; }

.ig-audiencia { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.ig-audiencia-bloco h3 { margin: 0 0 10px; font-size: 0.95rem; color: var(--verde-escuro); }
.ig-placeholder, .ig-top-posts .lote-vazio { color: #999; font-size: 0.88rem; padding: 14px; background: var(--creme); border-radius: 10px; }
.ig-top-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

/* Barras de audiência (faixa etária/gênero e cidades) */
.ig-barra-linha { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 8px; margin-bottom: 8px; }
.ig-barra-rotulo { font-size: 0.8rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-barra-trilho { background: var(--creme); border-radius: 999px; height: 10px; overflow: hidden; }
.ig-barra-preenchida { display: block; height: 100%; background: var(--verde, #1e7e34); border-radius: 999px; }
.ig-barra-valor { font-size: 0.8rem; color: var(--verde-escuro); font-weight: 700; text-align: right; }

/* Cards de posts em destaque */
.ig-post-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.ig-post-thumb { aspect-ratio: 1 / 1; background: var(--creme); background-size: cover; background-position: center; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.ig-post-metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 0.78rem; color: #555; }