/* ==========================================================================
   Tema "Laet Tech" — painel escuro em azul-marinho da marca.

   Por que escuro: é ferramenta de uso o dia todo, e o azul da Laet é a cor
   dominante da marca (60% nas peças) — aqui ele vira o fundo. O amarelo fica
   só pro que é ação principal ou destaque (mesma regra do design-guide: CTA
   amarelo com texto escuro). Verde/vermelho só pra status.

   Só vale pras telas com <body class="tema-escuro"> (o editor visual tem
   estilo próprio e continua claro, de propósito — é ferramenta de desenho).
   Este arquivo só sobrescreve o style.css; não remove nenhuma regra dele.
   ========================================================================== */

body.tema-escuro {
  --fundo: #04112B;
  --fundo-2: #071A3F;
  --superficie: rgba(17, 45, 100, 0.42);
  --superficie-solida: #0B1E47;
  --superficie-2: rgba(30, 70, 150, 0.22);
  --superficie-input: rgba(2, 10, 28, 0.55);
  --linha: rgba(140, 175, 255, 0.13);
  --linha-forte: rgba(140, 175, 255, 0.26);
  --texto: #EAF1FF;
  --texto-2: #A9B9D6;
  --texto-3: #7387AB;
  --azul-marca: #0D47A1;
  --azul-vivo: #3C7DF0;
  --azul-claro: #A9C8FF;
  --azul-suave: rgba(60, 125, 240, 0.14);
  --amarelo: #FFC107;
  --amarelo-claro: #FFD966;
  --amarelo-suave: rgba(255, 193, 7, 0.12);
  --verde: #3DD68C;
  --verde-suave: rgba(61, 214, 140, 0.13);
  --vermelho: #FF7A7A;
  --vermelho-suave: rgba(255, 122, 122, 0.12);
  --raio: 16px;
  --raio-sm: 10px;
  --sombra: 0 12px 32px rgba(0, 4, 16, 0.35);
  --foco: 0 0 0 3px rgba(60, 125, 240, 0.35);

  color-scheme: dark;
  color: var(--texto);
  background-color: var(--fundo);
  background-image:
    radial-gradient(1100px 600px at -10% -10%, rgba(13, 71, 161, 0.55), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(60, 125, 240, 0.16), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(255, 193, 7, 0.05), transparent 60%),
    linear-gradient(rgba(140, 175, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 175, 255, 0.035) 1px, transparent 1px);
  background-size: auto, auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed;
  font-family: 'Poppins', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.tema-escuro h1, .tema-escuro h2, .tema-escuro h3 { color: var(--texto); font-family: 'Montserrat', sans-serif; }
.tema-escuro a { color: var(--azul-claro); }
.tema-escuro ::selection { background: rgba(255, 193, 7, 0.35); }
.tema-escuro :focus-visible { outline: none; box-shadow: var(--foco); }
.tema-escuro ::-webkit-scrollbar { width: 10px; height: 10px; }
.tema-escuro ::-webkit-scrollbar-thumb { background: rgba(140, 175, 255, 0.2); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.tema-escuro ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Estrutura: menu lateral + cabeçalho ---------- */
.tema-escuro .sidebar {
  background: linear-gradient(180deg, rgba(6, 43, 99, 0.92) 0%, rgba(3, 14, 38, 0.95) 100%);
  border-right: 1px solid var(--linha);
  padding: 22px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  backdrop-filter: blur(10px);
}

.tema-escuro .sidebar-logo {
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 4px 10px 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--linha);
}

.tema-escuro .sidebar-logo img { height: 34px; width: 34px; }

.tema-escuro .sidebar-nav { gap: 6px; }

.tema-escuro .sidebar-nav a {
  position: relative;
  color: var(--texto-2);
  font-weight: 500;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.tema-escuro .sidebar-nav a:hover {
  background: rgba(140, 175, 255, 0.07);
  color: var(--texto);
}

.tema-escuro .sidebar-nav a.ativo {
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.16), rgba(255, 193, 7, 0.04));
  border-color: rgba(255, 193, 7, 0.28);
  color: var(--amarelo-claro);
  font-weight: 600;
}

.tema-escuro .sidebar-nav a.ativo::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--amarelo);
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.8);
}

.tema-escuro .sidebar-sair {
  border: 1px solid var(--linha-forte);
  color: var(--texto-2);
  border-radius: 12px;
  font-weight: 500;
}

.tema-escuro .sidebar-sair:hover { background: rgba(140, 175, 255, 0.08); color: var(--texto); }

.tema-escuro .app-header {
  background: rgba(4, 17, 43, 0.6);
  border-bottom: 1px solid var(--linha);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 20px 32px;
}

.tema-escuro .app-header h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tema-escuro .conteudo { max-width: 1180px; padding: 28px 24px 40px; }

@media (max-width: 860px) {
  .tema-escuro .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--linha);
    padding: 12px 14px;
  }
  .tema-escuro .sidebar-logo { border-bottom: none; padding: 0; margin: 0; }
  .tema-escuro .sidebar-nav { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .tema-escuro .sidebar-nav::-webkit-scrollbar { display: none; }
  .tema-escuro .sidebar-nav a { white-space: nowrap; padding: 8px 12px; }
  .tema-escuro .sidebar-nav a.ativo::before { display: none; }
  .tema-escuro .app-header { position: static; padding: 16px 16px 12px; background: transparent; border-bottom: none; backdrop-filter: none; }
  .tema-escuro .conteudo { padding: 8px 14px 32px; }
}

/* ---------- Superfícies (cards) ---------- */
.tema-escuro .painel-secao,
.tema-escuro .card,
.tema-escuro .resumo-card,
.tema-escuro .card-acao,
.tema-escuro .login-card {
  background: linear-gradient(180deg, rgba(22, 56, 122, 0.5) 0%, rgba(10, 30, 72, 0.5) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  backdrop-filter: blur(10px);
  color: var(--texto);
}

.tema-escuro .painel-secao { padding: 22px; margin-bottom: 22px; }

/* Título de seção vira rótulo técnico: maiúsculas, espaçado, com a barra
   amarela da marca na frente. */
.tema-escuro .painel-secao h2,
.tema-escuro .resumo-30d h2,
.tema-escuro #proximos-passos-secao h2,
.tema-escuro h2#secao-instagram,
.tema-escuro h2#secao-facebook {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.tema-escuro .painel-secao h2::before,
.tema-escuro .resumo-30d h2::before,
.tema-escuro #proximos-passos-secao h2::before,
.tema-escuro h2#secao-instagram::before,
.tema-escuro h2#secao-facebook::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--amarelo);
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
  flex-shrink: 0;
}

.tema-escuro .dica,
.tema-escuro .carregando,
.tema-escuro .vazio { color: var(--texto-3); }

.tema-escuro .assinatura {
  text-align: center;
  margin: 26px 0 8px;
  font: 600 10.5px/1 'Montserrat', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
  opacity: 0.7;
}

/* ---------- Números (KPIs) ---------- */
.tema-escuro .card .valor,
.tema-escuro .resumo-card .metrica-principal {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--azul-claro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tema-escuro .card .valor { font-size: 40px; }
.tema-escuro .resumo-card .metrica-principal { font-size: 46px; }
.tema-escuro .card .rotulo,
.tema-escuro .resumo-card .metrica-rotulo,
.tema-escuro .resumo-card .rede-nome { color: var(--texto-2); }
.tema-escuro .resumo-card .metrica-secundaria { color: var(--texto-2); border-top-color: var(--linha); }
.tema-escuro .resumo-card .delta.up { color: var(--verde); }
.tema-escuro .resumo-card .delta.down { color: var(--vermelho); }

.tema-escuro .resumo-card {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--linha);
}

.tema-escuro .resumo-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--azul-vivo), transparent);
}

.tema-escuro .resumo-card.instagram::before { background: linear-gradient(90deg, var(--amarelo), transparent); }
.tema-escuro .resumo-card.facebook::before { background: linear-gradient(90deg, #8FB3FF, transparent); }

.tema-escuro .resumo-card:hover {
  transform: translateY(-2px);
  border-color: var(--linha-forte);
  box-shadow: var(--sombra), 0 0 0 1px rgba(60, 125, 240, 0.25);
}

/* ---------- Próximos 10 minutos ---------- */
.tema-escuro .card-acao {
  border-left: 1px solid var(--linha);
  position: relative;
  overflow: hidden;
  padding: 18px 18px 18px 22px;
}

.tema-escuro .card-acao::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--amarelo);
  box-shadow: 0 0 14px rgba(255, 193, 7, 0.7);
}

.tema-escuro .card-acao.urgente::before { background: var(--vermelho); box-shadow: 0 0 14px rgba(255, 122, 122, 0.7); }
.tema-escuro .card-acao p { color: var(--texto); font-size: 14.5px; line-height: 1.5; }

/* ---------- Botões ---------- */
.tema-escuro .btn-primario {
  background: linear-gradient(180deg, #FFCD38 0%, var(--amarelo) 100%);
  color: #062B63;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 22px rgba(255, 193, 7, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}

.tema-escuro .btn-primario:hover { background: linear-gradient(180deg, #FFD54F 0%, #FFC107 100%); filter: brightness(1.04); box-shadow: 0 10px 26px rgba(255, 193, 7, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.tema-escuro .btn-primario:active { transform: translateY(1px); }
.tema-escuro .btn-primario:disabled { opacity: 0.55; box-shadow: none; }

.tema-escuro .btn-secundario {
  background: rgba(140, 175, 255, 0.08);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  border-radius: 12px;
  font-weight: 600;
}

.tema-escuro .btn-secundario:hover { background: rgba(140, 175, 255, 0.14); }

.tema-escuro .btn-aprovar {
  background: var(--verde-suave);
  border: 1px solid rgba(61, 214, 140, 0.35);
  color: var(--verde);
  border-radius: 10px;
  font-weight: 600;
  padding: 8px 14px;
}

.tema-escuro .btn-aprovar:hover { background: rgba(61, 214, 140, 0.22); }

.tema-escuro .btn-perigo {
  background: transparent;
  border: 1px solid rgba(255, 122, 122, 0.35);
  color: var(--vermelho);
  border-radius: 10px;
  font-weight: 600;
}

.tema-escuro .btn-perigo:hover { background: var(--vermelho-suave); border-color: var(--vermelho); }

.tema-escuro .btn-baixar,
.tema-escuro .link-editor-visual,
.tema-escuro .btn-sugerir,
.tema-escuro .link-publicado {
  background: var(--azul-suave);
  border: 1px solid rgba(60, 125, 240, 0.42);
  color: var(--azul-claro);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}

.tema-escuro .btn-baixar:hover,
.tema-escuro .link-editor-visual:hover,
.tema-escuro .btn-sugerir:hover,
.tema-escuro .link-publicado:hover { background: rgba(60, 125, 240, 0.24); color: #fff; }

.tema-escuro .link-editor-visual { padding: 8px 12px; }

.tema-escuro .btn-icone,
.tema-escuro .btn-fechar-painel {
  background: rgba(140, 175, 255, 0.06);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  border-radius: 10px;
}

.tema-escuro .btn-icone:hover,
.tema-escuro .btn-fechar-painel:hover { background: rgba(140, 175, 255, 0.14); }

.tema-escuro .btn-excluir-item { color: var(--texto-3); border-radius: 8px; }
.tema-escuro .btn-excluir-item:hover { background: var(--vermelho-suave); color: var(--vermelho); }

/* ---------- Campos ---------- */
.tema-escuro .campo label,
.tema-escuro .bloco-rotulo,
.tema-escuro .filtro-rotulo { color: var(--texto-2); }

.tema-escuro .campo input,
.tema-escuro .campo select,
.tema-escuro .editor-campos textarea,
.tema-escuro .input-agendar,
.tema-escuro .chat-form textarea,
.tema-escuro .form-tarefa input,
.tema-escuro .agenda-form input,
.tema-escuro .agenda-form textarea,
.tema-escuro input[type="text"],
.tema-escuro input[type="number"],
.tema-escuro input[type="date"],
.tema-escuro input[type="datetime-local"],
.tema-escuro input[type="password"],
.tema-escuro textarea,
.tema-escuro select {
  background: var(--superficie-input);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  border-radius: var(--raio-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tema-escuro input::placeholder,
.tema-escuro textarea::placeholder { color: var(--texto-3); }

.tema-escuro .campo input:focus,
.tema-escuro .campo select:focus,
.tema-escuro input:focus,
.tema-escuro textarea:focus,
.tema-escuro select:focus {
  outline: none;
  border-color: var(--azul-vivo);
  box-shadow: var(--foco);
}

.tema-escuro select option { background: var(--superficie-solida); color: var(--texto); }

.tema-escuro .erro-msg {
  background: var(--vermelho-suave);
  border: 1px solid rgba(255, 122, 122, 0.35);
  color: #FFB3B3;
  border-radius: var(--raio-sm);
}

/* ---------- Chips, filtros e etiquetas ---------- */
.tema-escuro .chip-formato,
.tema-escuro .filtro-botoes button {
  background: rgba(140, 175, 255, 0.05);
  border: 1px solid var(--linha-forte);
  color: var(--texto-2);
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tema-escuro .chip-formato:hover,
.tema-escuro .filtro-botoes button:hover { border-color: var(--azul-vivo); color: var(--texto); }

.tema-escuro .chip-formato.ativo,
.tema-escuro .filtro-botoes button.ativo {
  background: var(--amarelo-suave);
  border-color: rgba(255, 193, 7, 0.6);
  color: var(--amarelo-claro);
  font-weight: 600;
}

.tema-escuro .chip-cor { box-shadow: 0 0 0 1px var(--linha-forte); }
.tema-escuro .chip-cor.ativo { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--amarelo); }
.tema-escuro .chip-cor-branco { border-color: var(--linha-forte); }

.tema-escuro .tag {
  border-radius: 6px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid transparent;
}

.tema-escuro .tag.post,
.tema-escuro .tag.chat { background: var(--azul-suave); border-color: rgba(60, 125, 240, 0.3); color: var(--azul-claro); }
.tema-escuro .tag.story,
.tema-escuro .tag.cupom-sorteio { background: var(--amarelo-suave); border-color: rgba(255, 193, 7, 0.3); color: var(--amarelo-claro); }
.tema-escuro .tag.trabalhe-conosco { background: rgba(170, 140, 255, 0.14); border-color: rgba(170, 140, 255, 0.3); color: #CBB8FF; }

.tema-escuro .aviso-sutil { background: var(--amarelo-suave); color: var(--amarelo-claro) !important; }

/* ---------- Listas (fila de posts, mensagens, top posts) ---------- */
.tema-escuro .lista-item { border-bottom-color: var(--linha); }
.tema-escuro .fila-tema { color: var(--texto); font-weight: 600; }
.tema-escuro .fila-resumo,
.tema-escuro .fila-data-agendada { color: var(--texto-2); }
.tema-escuro .fila-miniaturas img { border-radius: 8px; box-shadow: 0 0 0 1px var(--linha-forte), 0 6px 14px rgba(0, 0, 0, 0.35); }

@media (max-width: 640px) {
  .tema-escuro .fila-direita { border-top-color: var(--linha); }
}

.tema-escuro .lista-item.destacado { background: var(--amarelo-suave); border-radius: 10px; }

.tema-escuro .fila-grupo-story {
  background: linear-gradient(180deg, rgba(255, 193, 7, 0.07), rgba(255, 193, 7, 0.02));
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 14px;
}

.tema-escuro .fila-grupo-cabecalho { border-bottom-color: rgba(255, 193, 7, 0.2); }
.tema-escuro .fila-grupo-titulo { color: var(--amarelo-claro); }

/* ---------- Página Conteúdo ---------- */
.tema-escuro .acao-conteudo {
  border-radius: 14px;
  font-weight: 600;
  border: 1px solid var(--linha-forte);
  background: rgba(140, 175, 255, 0.06);
  color: var(--texto);
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
}

.tema-escuro .acao-conteudo:hover { background: rgba(140, 175, 255, 0.12); transform: translateY(-1px); }

.tema-escuro #btn-abrir-criar {
  background: linear-gradient(180deg, #FFCD38 0%, var(--amarelo) 100%);
  color: #062B63;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(255, 193, 7, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.tema-escuro #btn-abrir-chat {
  background: linear-gradient(135deg, var(--azul-marca) 0%, var(--azul-vivo) 100%);
  border-color: rgba(140, 175, 255, 0.35);
  box-shadow: 0 10px 26px rgba(13, 71, 161, 0.45);
}

.tema-escuro .acao-conteudo.ativo { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--amarelo); }
.tema-escuro .acao-conteudo.secundaria { color: var(--azul-claro); }

.tema-escuro .chip-pendencia {
  background: var(--amarelo-suave);
  border: 1px solid rgba(255, 193, 7, 0.4);
  color: var(--amarelo-claro);
  font-weight: 600;
}

.tema-escuro .chip-pendencia:hover { background: rgba(255, 193, 7, 0.2); }

.tema-escuro .agenda { gap: 10px; }

.tema-escuro .agenda-dia {
  background: rgba(2, 10, 28, 0.35);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 12px 16px;
}

.tema-escuro .agenda-dia.hoje {
  border-color: rgba(60, 125, 240, 0.7);
  box-shadow: 0 0 0 1px rgba(60, 125, 240, 0.4) inset, 0 0 24px rgba(60, 125, 240, 0.18);
  background: linear-gradient(180deg, rgba(60, 125, 240, 0.12), rgba(2, 10, 28, 0.35));
}

.tema-escuro .agenda-dia.atrasado { border-color: rgba(255, 122, 122, 0.4); background: rgba(255, 122, 122, 0.06); }
.tema-escuro .agenda-dia-titulo { color: var(--texto-2); font-weight: 600; letter-spacing: 0.02em; }
.tema-escuro .agenda-dia.hoje .agenda-dia-titulo { color: var(--azul-claro); }
.tema-escuro .agenda-dia.atrasado .agenda-dia-titulo { color: var(--vermelho); }
.tema-escuro .agenda-item { border-top-color: var(--linha); color: var(--texto); }
.tema-escuro .agenda-titulo { color: var(--texto); }
.tema-escuro .agenda-detalhe { color: var(--texto-3); }
.tema-escuro .agenda-item.postado .agenda-titulo { color: var(--verde); }
.tema-escuro button.agenda-item:hover .agenda-titulo { color: var(--azul-claro); }
.tema-escuro .agenda-miniatura { border-radius: 5px; box-shadow: 0 0 0 1px var(--linha-forte); }

.tema-escuro .agenda-vazio {
  border: 1px dashed var(--linha-forte);
  color: var(--texto-3);
  border-radius: 10px;
}

.tema-escuro .agenda-vazio:hover { border-color: var(--amarelo); color: var(--amarelo-claro); background: var(--amarelo-suave); }
.tema-escuro .agenda-form { border-top-color: var(--linha); }
.tema-escuro .agenda-form label { color: var(--texto-2); }

/* Criar post (briefing) */
.tema-escuro .bloco-conceitos {
  background: linear-gradient(135deg, rgba(60, 125, 240, 0.1) 0%, rgba(255, 193, 7, 0.04) 100%);
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
}

.tema-escuro .conceito-card,
.tema-escuro .sugestao-opcao {
  background: var(--superficie-solida);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  border-radius: 12px;
}

.tema-escuro .sugestao-opcao:hover { border-color: var(--azul-vivo); background: rgba(60, 125, 240, 0.14); }
.tema-escuro .sugestao-opcao b,
.tema-escuro .conceito-card .conceito-angulo { color: var(--amarelo-claro); }
.tema-escuro .conceito-card .conceito-legenda { color: var(--texto-2); }
.tema-escuro .conceito-card .conceito-preview,
.tema-escuro .editor-prevista { background: #020A1C; border-radius: 12px; }
.tema-escuro .divisor-ou { color: var(--texto-3); }
.tema-escuro .divisor-ou::before,
.tema-escuro .divisor-ou::after { background: var(--linha); }
.tema-escuro .spinner { border-color: var(--linha-forte); border-top-color: var(--amarelo); }

/* Editor em janela */
.tema-escuro .editor-modal:not([hidden]) {
  background: linear-gradient(180deg, #0D2556 0%, #081a3f 100%);
  border: 1px solid var(--linha-forte);
  box-shadow: 0 0 0 100vmax rgba(1, 6, 18, 0.72), 0 24px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
}

/* ---------- Chat da programação ---------- */
.tema-escuro .chat-balao.do-kevin {
  background: linear-gradient(135deg, var(--azul-marca), var(--azul-vivo));
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 71, 161, 0.4);
}

.tema-escuro .chat-balao.da-ia {
  background: rgba(140, 175, 255, 0.08);
  border: 1px solid var(--linha);
  color: var(--texto);
}

.tema-escuro .chat-confirmar {
  background: var(--vermelho-suave);
  border: 1px solid rgba(255, 122, 122, 0.4);
  color: var(--texto);
}

.tema-escuro .chat-form { border-top-color: var(--linha); }

/* ---------- Suas tarefas ---------- */
.tema-escuro .tarefa { border-bottom-color: var(--linha); }
.tema-escuro .tarefa-check { color: var(--texto); }
.tema-escuro .tarefa-check input { accent-color: var(--verde); }
.tema-escuro .tarefa.feita .tarefa-texto { color: var(--texto-3); }

/* ---------- Tráfego pago (tabela de campanhas) ---------- */
.tema-escuro table { color: var(--texto); border-collapse: collapse; }
.tema-escuro td { border-bottom-color: var(--linha) !important; }
.tema-escuro .resumo-selecao { color: var(--azul-claro); }
.tema-escuro .campanhas-ajuda { color: var(--texto-2); }

/* ---------- Login ---------- */
.tema-escuro .login-card { padding: 40px 32px 32px; max-width: 400px; }
.tema-escuro .login-card h1 { font-size: 24px; }
.tema-escuro .login-card .subtitulo { color: var(--texto-2); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11.5px; }

/* Botão não herda a fonte da página por padrão — sem isso saía em Arial. */
.tema-escuro button,
.tema-escuro input,
.tema-escuro select,
.tema-escuro textarea { font-family: inherit; }

/* Seletor de "qualquer cor" (roda de cores) — fica fora do estilo escuro
   dos campos, senão a roda some. */
.tema-escuro .campo input.chip-cor-espectro,
.tema-escuro input.chip-cor-espectro {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  box-shadow: 0 0 0 1px var(--linha-forte);
}

.tema-escuro .login-logo {
  display: block;
  height: 64px;
  margin: 0 auto 18px;
  filter: drop-shadow(0 6px 18px rgba(60, 125, 240, 0.45));
}

/* No celular o menu rola pro lado — o esmaecido na borda mostra que tem mais. */
@media (max-width: 860px) {
  .tema-escuro .sidebar-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 24px;
  }
}

/* ---------- Planejar a semana / revisão da semana ---------- */
.tema-escuro .planejar-semana {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 14px;
  margin: 4px 0 14px;
  border: 1px solid rgba(60, 125, 240, 0.35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(60, 125, 240, 0.14), rgba(60, 125, 240, 0.04));
}

.tema-escuro .planejar-semana.destaque {
  border-color: var(--amarelo);
  box-shadow: 0 0 0 1px var(--amarelo) inset, 0 0 22px rgba(255, 193, 7, 0.25);
}

.tema-escuro .planejar-rotulo { font-weight: 600; color: var(--texto); margin-right: 4px; }
.tema-escuro .planejar-semana .btn-baixar { min-height: 40px; }
.tema-escuro .planejar-status { flex-basis: 100%; margin: 2px 0 0; }
.tema-escuro .planejar-status:empty { display: none; }

.tema-escuro .chip-pendencia.buraco {
  background: var(--azul-suave);
  border-color: rgba(60, 125, 240, 0.5);
  color: var(--azul-claro);
}

.tema-escuro .fila-dia-titulo {
  margin: 18px 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linha);
  font: 600 13px/1.3 'Poppins', sans-serif;
  color: var(--azul-claro);
}

.tema-escuro .fila-dia-titulo:first-child { margin-top: 6px; }

/* Movimento só pra quem não pediu pra reduzir animação. */
@media (prefers-reduced-motion: reduce) {
  .tema-escuro * { transition: none !important; }
}

/* "Sair de todos os aparelhos": discreto, mas à mão. */
.tema-escuro .sidebar-sair-todos {
  margin-top: 8px;
  border-color: rgba(255, 122, 122, 0.3);
  color: var(--vermelho);
  font-size: 12px;
}
.tema-escuro .sidebar-sair-todos:hover { background: var(--vermelho-suave); color: #FFB3B3; }
@media (max-width: 860px) {
  /* No celular fica numa linha própria embaixo do menu, fácil de achar. */
  .tema-escuro .sidebar-sair-todos { order: 4; flex: 1 1 100%; margin: 0; padding: 8px 12px; }
}

/* ---------- Avaliação 👍/👎 dos stories ---------- */
.avaliacao { display: inline-flex; gap: 6px; }
.btn-avaliar { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05);
  font-size: 18px; cursor: pointer; filter: grayscale(.6); transition: transform .12s, background .12s, filter .12s; }
.btn-avaliar:hover { transform: translateY(-1px); filter: none; }
.btn-avaliar.ativo { filter: none; background: rgba(46, 204, 113, .18); border-color: rgba(46, 204, 113, .6); }
.btn-avaliar.ruim.ativo { background: rgba(255, 82, 82, .16); border-color: rgba(255, 82, 82, .6); }
.painel-motivos { margin: -4px 0 12px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 82, 82, .35); }
.painel-motivos-titulo { margin: 0 0 10px; font-weight: 600; color: #fff; }
.chips-motivos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip-motivo { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #DCE6F7; cursor: pointer; font-size: 14px; }
.chip-motivo.ativo { background: #FFC107; border-color: #FFC107; color: #062B63; font-weight: 700; }
.input-motivo { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .2); color: #fff; margin-bottom: 10px; }
.painel-motivos-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.painel-motivos-acoes .btn-primario, .painel-motivos-acoes .btn-secundario { width: auto; padding: 10px 16px; }
.painel-motivos-status { font-size: 14px; color: #FFD27A; }

/* ---------- Abas da página Conteúdo (Prontos / Programação / Criar) ---------- */
.fora-da-aba { display: none !important; }
.abas-conteudo { display: flex; gap: 6px; padding: 6px; margin-bottom: 18px;
  background: rgba(4, 17, 43, .92); backdrop-filter: blur(10px); border: 1px solid var(--linha); border-radius: 14px; }
.aba-conteudo { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: 10px;
  color: var(--texto-2); text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; transition: background .15s, color .15s; }
.aba-conteudo:hover { background: rgba(140, 175, 255, .08); color: var(--texto); }
.aba-conteudo.ativo { background: var(--amarelo); color: #062B63; }
.aba-contador { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #FF5252; color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.aba-conteudo.ativo .aba-contador { background: #062B63; color: #FFC107; }
@media (max-width: 860px) {

  .aba-conteudo { font-size: 14px; padding: 11px 6px; }
}

/* ---------- Aprovação de stories, aviso flutuante, tags ---------- */
.tema-escuro .btn-aprovar-par { background: var(--amarelo); color: #062B63; border: 0; border-radius: 12px; padding: 10px 16px; font-weight: 800; cursor: pointer; font-size: 15px; }
.tema-escuro .btn-aprovar-par:hover { filter: brightness(1.08); }
.tema-escuro .btn-aprovar-par:disabled { opacity: .6; cursor: default; }
.tema-escuro .tag.agendada { background: rgba(61, 214, 140, .15); color: #6FE8B0; border: 1px solid rgba(61, 214, 140, .45); }
.tema-escuro .tag.atencao { background: rgba(255, 193, 7, .14); color: #FFD966; border: 1px solid rgba(255, 193, 7, .5); }
.aviso-flutuante { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px); max-width: min(520px, calc(100% - 32px)); z-index: 200;
  background: #0B2A66; color: #fff; border: 1px solid rgba(255, 193, 7, .6); border-radius: 14px; padding: 14px 18px; font-weight: 600; font-size: 15px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center; }
.aviso-flutuante.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Filtros da fila recolhidos ---------- */
.tema-escuro .fila-filtros-caixa { margin: 4px 0 16px; }
.tema-escuro .fila-filtros-caixa > summary { cursor: pointer; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--texto-2); font-weight: 600; font-size: 14px; list-style: none; }
.tema-escuro .fila-filtros-caixa > summary::-webkit-details-marker { display: none; }
.tema-escuro .fila-filtros-caixa.filtrando > summary { border-color: var(--amarelo); color: var(--amarelo-claro); }
.tema-escuro .fila-filtros-caixa[open] > summary { margin-bottom: 12px; }