/* ═══════════════════════════════════════════════════════════════
   APP-REDESIGN.CSS — Camada de repaginação visual (10/06/2026)
   Carregada DEPOIS de app.css. Eleva o visual usando as mesmas
   classes, sem mexer na estrutura. Tema claro e escuro cobertos.
   Assinatura: gradiente laranja → rosa → roxo (coeso com Storm IA).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Aliases p/ páginas que usam nomes próprios (ex: pages/ajuda.html usava
     --border/--card/--hover/--text/--text-muted que NÃO existiam → contêineres
     com cor quebrada no modo claro). Apontam pras vars theme-aware do sistema. */
  --border: var(--b1);
  --card: var(--s1);
  --hover: var(--s3);
  --text: var(--txt);
  --text-muted: var(--mut);

  --brand-grad: linear-gradient(135deg, #f97316 0%, #ec4899 52%, #8b5cf6 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(249,115,22,.14), rgba(236,72,153,.12), rgba(139,92,246,.14));
  --brand-glow: 0 8px 30px rgba(236,72,153,.30), 0 2px 10px rgba(139,92,246,.20);
  --brand-glow-sm: 0 4px 16px rgba(236,72,153,.26);
  --ring: 0 0 0 3px rgba(249,115,22,.22);
  --lift: cubic-bezier(.34,1.56,.64,1);
}

/* Fundo com um toque de profundidade extra (dark fica mais premium) */
[data-theme="dark"] {
  --bg-grad: radial-gradient(1200px 600px at 15% -5%, rgba(139,92,246,.10), transparent 55%),
             radial-gradient(900px 500px at 100% 0%, rgba(236,72,153,.08), transparent 50%),
             linear-gradient(155deg, #070a14 0%, #0a1020 55%, #070a14 100%);
  --s1: rgba(18,24,42,.72);
  --s2: rgba(24,32,56,.66);
}
[data-theme="dark"] body { background-attachment: fixed; }

/* ── Orbs de fundo mais vivos ─────────────────────────────── */
.bg-orbs .orb { filter: blur(70px); }
.orb.o1 { background: radial-gradient(circle, rgba(249,115,22,.55), transparent 70%); }
.orb.o2 { background: radial-gradient(circle, rgba(236,72,153,.50), transparent 70%); }
.orb.o3 { background: radial-gradient(circle, rgba(139,92,246,.50), transparent 70%); }
[data-theme="dark"] .orb { opacity: .22 !important; }

/* ════════════════ TÍTULOS ════════════════ */
.page-title {
  letter-spacing: -.02em;
  font-weight: 800;
}
.page-title .g,
.page-title span.g,
.hero h1 .g {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ════════════════ CARDS (glass + depth + lift) ════════════════ */
.card, .stat-card, .panel-card, .glass-card, .app-card {
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition: transform .35s var(--lift), box-shadow .35s var(--ease), border-color .25s var(--ease);
  position: relative;
}
.card:hover, .stat-card:hover, .panel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg), var(--brand-glow-sm);
  border-color: var(--b3);
}
/* borda superior gradiente sutil nos cards principais */
.card::after, .panel-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(249,115,22,.35), rgba(236,72,153,.0) 40%, rgba(139,92,246,.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.card:hover::after, .panel-card:hover::after { opacity: 1; }

/* ════════════════ STAT CARDS — ícones com gradiente ════════════════ */
.stat-card { border-radius: var(--r-lg); }
.stat-icon {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.stat-icon.orange { background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; }
.stat-icon.green  { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }
.stat-icon.blue   { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; }
.stat-icon.purple { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
.stat-icon.red    { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; }
.stat-value { letter-spacing: -.01em; }

/* ════════════════ BOTÕES ════════════════ */
.btn { border-radius: 11px; font-weight: 700; letter-spacing: .005em; transition: transform .18s var(--lift), box-shadow .25s var(--ease), background .2s var(--ease), filter .2s var(--ease); }
.btn-primary {
  background: var(--brand-grad); border: 0; color: #fff;
  background-size: 160% 160%; background-position: 0% 50%;
  box-shadow: var(--brand-glow-sm);
}
.btn-primary:hover {
  background: var(--brand-grad); background-size: 160% 160%; background-position: 100% 50%;
  transform: translateY(-2px); box-shadow: var(--brand-glow); filter: brightness(1.04);
}
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-success { background: linear-gradient(135deg, #16a34a, #22c55e); border: 0; box-shadow: 0 4px 16px rgba(34,197,94,.28); }
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(34,197,94,.4); filter: brightness(1.05); }
.btn-danger { background: linear-gradient(135deg, #dc2626, #ef4444); border: 0; }
.btn-ghost { backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--b3); transform: translateY(-1px); }

/* ════════════════ SIDEBAR ════════════════ */
.sidebar { backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); }
.sidebar-logo-icon {
  background: var(--brand-grad) !important;
  box-shadow: var(--brand-glow-sm);
}
.sidebar-brand em { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sidebar-avatar {
  background: var(--brand-grad) !important; color: #fff !important;
  box-shadow: var(--brand-glow-sm);
}
.nav-link { border-radius: 11px; transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.nav-link:hover { transform: translateX(2px); }
.nav-link.active {
  background: var(--brand-grad-soft);
  color: var(--txt); font-weight: 700;
}
.nav-link.active::before {
  background: var(--brand-grad) !important;
  box-shadow: var(--brand-glow-sm);
}
.nav-link.active i { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* badges no menu */
.nav-badge { border-radius: 999px; font-weight: 800; letter-spacing: .02em; }
.badge-purple { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
.badge-grn { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }
.badge-or  { background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; }
.badge-red { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; }

/* ════════════════ APP CARDS (grid de apps PLR) ════════════════ */
.app-card { border-radius: var(--r-lg); overflow: hidden; transition: transform .35s var(--lift), box-shadow .35s var(--ease); }
.app-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg), var(--brand-glow-sm); }
.app-cover { position: relative; overflow: hidden; }
.app-cover img { transition: transform .5s var(--ease); }
.app-card:hover .app-cover img { transform: scale(1.06); }
.app-cover-eye {
  background: var(--brand-grad); color: #fff;
  box-shadow: var(--brand-glow-sm);
}

/* ════════════════ INPUTS ════════════════ */
.form-input, .input, input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], textarea, select {
  border-radius: 11px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.form-input:focus, .input:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="number"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  border-color: var(--or);
  box-shadow: var(--ring);
  outline: none;
}

/* ════════════════ DASHBOARD WELCOME (hero) ════════════════ */
.dash-welcome {
  border-radius: var(--r-xl);
  background: var(--brand-grad-soft), var(--s1);
  position: relative; overflow: hidden;
}
.dash-welcome::before {
  content: ''; position: absolute; top: -40%; right: -10%;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,.18), transparent 70%);
  pointer-events: none;
}

/* ════════════════ QUICK LINKS ════════════════ */
.quick-link { border-radius: var(--r-lg); transition: transform .3s var(--lift), box-shadow .3s var(--ease), border-color .25s var(--ease); }
.quick-link:hover { transform: translateY(-3px); box-shadow: var(--sh), var(--brand-glow-sm); border-color: var(--b3); }
.quick-link-icon, .ql-icon { background: var(--brand-grad-soft); }

/* ════════════════ TABELAS ════════════════ */
table thead th { letter-spacing: .03em; text-transform: uppercase; font-size: 11px; }
tr { transition: background .15s var(--ease); }

/* ════════════════ PÍLULAS / BADGES de status ════════════════ */
.status-active { color: #22c55e; font-weight: 700; }
.domain-pill {
  background: var(--brand-grad-soft); border: 1px solid var(--b3);
  border-radius: 999px; padding: 3px 12px; font-weight: 600;
}

/* ════════════════ ANIMAÇÃO DE ENTRADA ════════════════ */
@keyframes afpFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in, .card, .stat-card, .panel-card, .app-card {
  animation: afpFadeUp .5s var(--ease) both;
}
/* stagger leve nos grids */
.stat-grid > *:nth-child(1) { animation-delay: .02s; }
.stat-grid > *:nth-child(2) { animation-delay: .07s; }
.stat-grid > *:nth-child(3) { animation-delay: .12s; }
.stat-grid > *:nth-child(4) { animation-delay: .17s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ════════════════ SCROLLBAR mais elegante ════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(249,115,22,.5), rgba(139,92,246,.5)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f97316, #8b5cf6); }

/* ════════════════ FAB Storm IA — alinha com a marca ════════════════ */
.storm-fab { box-shadow: var(--brand-glow), 0 2px 8px rgba(0,0,0,.25) !important; }

/* ════════════════ TELA DE LOGIN (primeira impressão) ════════════════ */
.login-box {
  border-radius: var(--r-xl);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--sh-lg), var(--brand-glow);
  border: 1px solid var(--b2);
  animation: afpFadeUp .6s var(--lift) both;
  position: relative; overflow: hidden;
}
.login-box::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand-grad);
}
.login-logo .logo-ic {
  background: var(--brand-grad) !important;
  box-shadow: var(--brand-glow-sm);
  border-radius: 18px;
}
.login-logo h2 span { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-wrap .btn-primary, .login-box .btn-primary { font-size: 15px; padding: 13px; }

/* Orbs maiores e mais vivos na tela de login (sem sidebar) */
body:not(.has-sidebar) .orb { opacity: .5; }

/* ════════════════ MODAIS — cantos e sombra premium ════════════════ */
.modal, .modal-content, [class*="modal"] > div {
  border-radius: var(--r-lg);
}

/* ════════════════ TOASTS ════════════════ */
.toast, #toast, [class*="toast"] {
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-lg);
}

/* ════════════════ SIDEBAR limpo: sem logo-icon, sem avatar ════════════════ */
/* (decisão Igor 10/06) — marca textual "Eva Funnels" + bloco de usuário só
   com nome/email. Mais clean e profissional. */
.sidebar-logo { padding-left: 22px; }
.sidebar-brand { font-size: 1.15rem; letter-spacing: -.01em; }
.sidebar-brand em {
  font-style: normal;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sidebar-user.no-avatar { padding-left: 22px; }
.sidebar-user.no-avatar .sidebar-user-info { padding-left: 0; }
.sidebar-user.no-avatar .sidebar-user-name { font-weight: 700; }
/* No modo colapsado, sem avatar/ícone, mostra a inicial textual da marca */
.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .sidebar-user-info { display: none; }

/* ════════════════ MATERIAIS EXTRAS — repaginado ════════════════ */
.accordion-item {
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  border: 1px solid var(--b1);
  transition: box-shadow .3s var(--ease), border-color .25s var(--ease), transform .25s var(--lift);
}
.accordion-item:hover { box-shadow: var(--sh), var(--brand-glow-sm); border-color: var(--b3); }
.accordion-item.active { border-color: var(--b3); box-shadow: var(--sh-lg); }
.accordion-header { padding: 16px 18px; gap: 14px; }
.mat-app-ic {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: var(--brand-grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  box-shadow: var(--brand-glow-sm);
}
.mat-app-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mat-app-name { font-weight: 800; font-size: .98rem; color: var(--txt); }
.mat-app-count { font-size: .76rem; color: var(--mut); }
.mat-dl-all { margin-left: auto; flex-shrink: 0; }
.mat-chev { color: var(--fnt); font-size: 13px; transition: transform .3s var(--ease); flex-shrink: 0; margin-left: 6px; }
.accordion-item.active .mat-chev { transform: rotate(180deg); }

.mat-category { margin-top: 18px; }
.mat-category-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt); margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--b1); display: flex; align-items: center; gap: 8px;
}
.mat-category-title i {
  width: 22px; height: 22px; border-radius: 6px; font-size: .7rem;
  background: var(--brand-grad-soft); color: var(--or);
  display: inline-flex; align-items: center; justify-content: center;
}
.mat-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.mat-item {
  border-radius: 12px;
  box-shadow: var(--sh-sm);
  transition: transform .25s var(--lift), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.mat-item:hover { transform: translateY(-3px); box-shadow: var(--sh), var(--brand-glow-sm); border-color: var(--b3); }
.mat-item img { aspect-ratio: 4/5; }
.mat-item-overlay { background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55)); }
.mat-item-overlay i {
  background: var(--brand-grad); width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--brand-glow-sm);
}

/* ════════════════ GERAR PÁGINA (estrutura) — cards mais bonitos ════════════════ */
.estrutura-card, .est-card, .model-card {
  border-radius: var(--r-lg);
  transition: transform .3s var(--lift), box-shadow .3s var(--ease), border-color .25s var(--ease);
}
.estrutura-card:hover, .est-card:hover, .model-card:hover {
  transform: translateY(-4px); box-shadow: var(--sh-lg), var(--brand-glow-sm); border-color: var(--b3);
}

/* Search bar mais elegante */
.search-bar { border-radius: 14px; }
.search-bar:focus-within { box-shadow: var(--ring); border-color: var(--or); }

/* ════════════════ MOBILE — ajustes globais ════════════════ */
@media (max-width: 600px) {
  .accordion-header { padding: 13px 14px; gap: 11px; flex-wrap: wrap; }
  .mat-app-ic { width: 40px; height: 40px; }
  .mat-dl-all { order: 3; margin-left: 0; width: 100%; margin-top: 8px; }
  .mat-chev { position: absolute; right: 14px; top: 18px; }
  .accordion-header { position: relative; }
  .mat-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .page-title { font-size: 1.4rem !important; }
  /* alvo de toque confortável — exceto botões densos (cards de app, btn-sm) */
  .btn:not(.btn-sm) { min-height: 42px; }
  .app-actions .btn, .est-gen-btn, .mat-dl-all { min-height: 0; }
  .modal, .modal-content { max-width: 96vw !important; }

  /* Guardas universais anti-overflow no celular */
  img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .search-bar input { min-width: 0; }
}
/* trava de overflow horizontal global (sem mascarar scroll vertical) */
html, body { max-width: 100%; overflow-x: hidden; }

/* ════════════════ GERAR PÁGINA — grid de cards ════════════════ */
#estruturaContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  align-items: start;
}
#estruturaContainer .section-title,
#estruturaContainer [data-section-title] {
  grid-column: 1 / -1;
  margin: 18px 0 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--b1);
}
#estruturaContainer [data-section-title]:first-child { margin-top: 0; }

.est-card {
  display: flex; flex-direction: column;
  margin-bottom: 0 !important;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--s1); border: 1px solid var(--b1);
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--lift), box-shadow .3s var(--ease), border-color .25s var(--ease);
}
.est-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg), var(--brand-glow-sm); border-color: var(--b3); }

.est-thumb {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  background: var(--brand-grad-soft);
  display: flex; align-items: center; justify-content: center;
}
.est-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.est-card:hover .est-thumb img { transform: scale(1.07); }
.est-thumb.no-img, .est-thumb:has(.est-thumb-ic) { background: var(--brand-grad-soft); }
.est-thumb-ic { font-size: 2rem; color: var(--or); opacity: .7; }
.est-flag {
  position: absolute; top: 9px; left: 9px;
  font-size: .66rem; font-weight: 800; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px; color: #fff;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); backdrop-filter: blur(4px);
}
.est-flag.on  { background: linear-gradient(135deg, #16a34a, #22c55e); }
.est-flag.new { background: var(--brand-grad); }

.est-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.est-body .funnel-info { flex: 1; }
.est-body .funnel-info h2 { font-size: .92rem; font-weight: 800; line-height: 1.25; margin-bottom: 3px; color: var(--txt); }
.est-body .funnel-id { font-size: .68rem; color: var(--fnt); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.est-gen-btn {
  width: 100%; justify-content: center;
  background: var(--brand-grad) !important; color: #fff !important;
  box-shadow: var(--brand-glow-sm); padding: 9px 12px !important; border-radius: 10px !important;
}
.est-gen-btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--brand-glow) !important; }

@media (max-width: 600px) {
  #estruturaContainer { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .est-body { padding: 10px; }
  .est-body .funnel-info h2 { font-size: .82rem; }
  .est-gen-btn { font-size: 11px !important; padding: 8px 8px !important; }
}
@media (max-width: 360px) {
  #estruturaContainer { grid-template-columns: 1fr; }
}

/* ════════════════ MENU LIMPO ════════════════ */
/* Igor pediu (11/06): remover os badges do menu lateral (BETA/IA/NOVO/PRO/NEW/
   contagem/ADMIN). Poluíam o visual. Escondidos de uma vez por aqui. */
.nav-badge { display: none !important; }