/* ═══════════════════════════════════════════════════════════════
   Pulse Theme — design system unificado
   Inclua DEPOIS dos estilos inline de cada página pra cascatear
   as variáveis e a tipografia da identidade nova.
   ═══════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ═══ FONTE DE VERDADE dos tokens das telas logadas ═══
     Este :root é carregado DEPOIS dos <style> inline de cada página
     (ver header do arquivo) e portanto SOBRESCREVE o :root local delas
     nos tokens que colidem (--g, --bg, --tx, ...). Pra mudar a identidade,
     mude AQUI.

     Nomes canônicos = os da marca (--accent, --bg, --tx, ...). Os nomes
     legados (--g, --gd, --br2) viram ALIAS por retrocompat — --g sozinho
     tem ~238 usos espalhados pelos HTMLs. Código NOVO deve usar os
     canônicos. Migrar os usos legados + os :root inline das páginas é a
     Fase 2 (ver BRAND.md). */

  /* ── Cor / marca ── */
  --accent:     #00e676;     /* verde da marca — A cor */
  --accent-hi:  #33ff8e;     /* hover de CTA */
  --accent-dim: #00b358;     /* pressed / borda sutil */
  --r:          #ff6b4a;     /* danger / ações destrutivas */
  --g:  var(--accent);       /* legado (~238 usos) ≙ --accent */
  --gd: var(--accent-dim);   /* legado ≙ --accent-dim */

  /* ── Superfície / fundo ── */
  --bg:         #08090c;
  --bg2:        #0d0f14;
  --bg3:        #13161d40;
  --surface:    rgba(255,255,255,.035);
  --surface-hi: #13161d;

  /* ── Bordas ── */
  --br:         #1a1d26;
  --border-hi:  #252934;
  --br2: var(--border-hi);   /* legado ≙ --border-hi */

  /* ── Texto ── */
  --tx:  #e8eaf0;
  --tx2: #a8b0bd;
  --mu:  #5a6271;
  --mu2: #3d4451;

  /* ── Tipografia ── */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font:         "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:         "JetBrains Mono", ui-monospace, monospace;

  /* ── Raios ── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 9999px;

  /* ── Sombras ── */
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.55), 0 18px 36px -18px rgba(0,0,0,.4);
  --shadow-glow: 0 0 40px rgba(0,230,118,.15);
}

/* ═══════════════════════════════════════════════════════════════
   Base — fontes e cor de texto
   ═══════════════════════════════════════════════════════════════ */
html, body {
  background: var(--bg);
  color: var(--tx);
}
body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

/* Grain sutil (textura igual à landing) */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: .025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Selection na cor de destaque */
::selection { background: var(--accent); color: #08090c; }

/* Inputs e form fields — softer */
input, textarea, select {
  font-family: "Geist", -apple-system, sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,230,118,.15) !important;
  outline: none !important;
}

/* Botões: levemente mais arredondados (sem quebrar layouts existentes) */
button, .btn {
  font-family: "Geist", -apple-system, sans-serif;
  letter-spacing: -.005em;
}

/* Marca / logo SVGs que usam o verde antigo — mapeia pro novo lime */
svg [stroke="#00D26A" i],
svg [stroke="#00d26a" i],
svg [stroke="#00E676" i],
svg [stroke="#00e676" i],
svg [stroke="#00FF41" i],
svg [stroke="#00ff41" i] {
  stroke: var(--accent) !important;
}
svg [fill="#00D26A" i],
svg [fill="#00d26a" i],
svg [fill="#00E676" i],
svg [fill="#00e676" i],
svg [fill="#00FF41" i],
svg [fill="#00ff41" i] {
  fill: var(--accent) !important;
}

/* Scrollbar com identidade (Chrome/Edge/Safari) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb {
  background: var(--br2);
  border-radius: var(--r-sm);
  border: 2px solid var(--bg2);
}
::-webkit-scrollbar-thumb:hover { background: var(--mu2); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR GLOBAL (injetada via pulse-sidebar.js)
   ═══════════════════════════════════════════════════════════════ */
.pulse-sb{
  position:fixed;top:0;left:0;bottom:0;width:240px;
  background:var(--bg2);border-right:1px solid var(--br);
  padding:24px 16px;display:flex;flex-direction:column;gap:18px;
  z-index:9000;font-family:var(--font);
  transform:translateX(-100%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  box-shadow:8px 0 30px rgba(0,0,0,.45);
}
.pulse-sb.open{transform:translateX(0)}
.pulse-sb a{text-decoration:none;color:inherit}
.pulse-sb-brand{
  display:flex;align-items:center;gap:10px;
  padding:6px 12px 18px;margin-bottom:8px;
  border-bottom:1px solid var(--br);
}
.pulse-sb-brand-mark{
  width:30px;height:30px;flex-shrink:0;
}
.pulse-sb-brand-text{
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;font-weight:700;
  letter-spacing:-.02em;color:var(--tx);
  white-space:nowrap;line-height:1;
}
.pulse-sb-brand-accent{color:var(--g)}
.pulse-sb-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.pulse-sb-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;
  color:var(--tx2);font-size:14px;font-weight:500;letter-spacing:-.005em;
  transition:background .18s, color .18s;
}
.pulse-sb-link svg{width:18px;height:18px;flex-shrink:0;opacity:.85;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pulse-sb-link:hover{background:var(--surface);color:var(--tx)}
.pulse-sb-link.active{
  background:linear-gradient(135deg, rgba(0,230,118,.16), rgba(0,230,118,.04));
  color:var(--g);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(0,230,118,.22);
}
.pulse-sb-link.active svg{opacity:1}
.pulse-sb-plan{
  background:var(--bg);border:1px solid var(--br);border-radius:14px;
  padding:16px;margin-top:auto;
}
.pulse-sb-plan-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--mu);text-transform:uppercase;margin-bottom:8px;font-weight:600}
.pulse-sb-plan-nm{font-family:"Plus Jakarta Sans",-apple-system,sans-serif;font-size:20px;font-weight:700;color:var(--tx);letter-spacing:-.02em;line-height:1;margin-bottom:14px}
.pulse-sb-plan-bar{height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;margin-bottom:10px}
.pulse-sb-plan-fill{height:100%;background:linear-gradient(90deg,var(--gd),var(--g));border-radius:3px;width:75%;box-shadow:0 0 12px rgba(0,230,118,.4);transition:width .4s}
.pulse-sb-plan-sub{font-size:11px;color:var(--mu);font-family:var(--mono);letter-spacing:.02em}
.pulse-sb-plan-sub strong{color:var(--tx2)}

/* Gaveta: o conteúdo ocupa a largura toda; a sidebar abre por cima.
   Navs fixas ganham padding à esquerda pra não ficar sob o ícone-menu. */
body.has-pulse-sb{padding-left:0}
body.has-pulse-sb > nav,
body.has-pulse-sb > header.nav,
body.has-pulse-sb > .topbar,
body.has-pulse-sb > #app-nav,
body.has-pulse-sb > #topbar{
  left:0 !important;right:0 !important;width:auto !important;padding-left:62px !important;
}

/* Toggle hamburguer pra mobile */
.pulse-sb-toggle{
  display:inline-flex;position:fixed;top:14px;left:14px;z-index:9001;
  width:44px;height:44px;align-items:center;justify-content:center;
  border-radius:10px;background:var(--bg2);border:1px solid var(--br);
  cursor:pointer;color:var(--tx);box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition: opacity .2s, transform .25s cubic-bezier(.22,.61,.36,1);
}
.pulse-sb-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* Quando o sidebar abre, desliza o hamburguer pra direita (sai de cima do "pulse.")
   e some elegantemente. Volta no fechar. */
.pulse-sb-overlay.on ~ .pulse-sb-toggle,
.pulse-sb.open ~ .pulse-sb-toggle {
  opacity: 0;
  transform: translateX(240px) scale(.8);
  pointer-events: none;
}

/* Overlay escuro atrás do sidebar no mobile */
.pulse-sb-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,9,8,.6);
  backdrop-filter:blur(4px);z-index:8999;
}
.pulse-sb-overlay.on{display:block}

/* (A gaveta recolhida + ícone-menu agora valem em TODAS as larguras — regras
   movidas pro bloco base acima. Mantemos só os ajustes de safe-area abaixo.) */

/* Headings em Fraunces (com tom display) — só onde for grande */
h1.display, h2.display, .h-display,
h1[data-display], h2[data-display], h3[data-display] {
  font-family: var(--font-display);
  letter-spacing: -.025em;
  line-height: 1;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.display i, .h-display i, [data-display] i {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* ═══════════════════════════════════════════════════════════════
   OTIMIZAÇÕES MOBILE GLOBAIS
   ═══════════════════════════════════════════════════════════════ */

/* Remove o highlight cinza chato do tap em links/botões no iOS */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Permite zoom de pinça mas evita zoom acidental por duplo-toque
   em botões; navegadores tratam botões/links automaticamente */
button, a, [role="button"], input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}

/* Scrollbars finas no mobile (Chrome/Edge/Safari iOS) */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }
}

/* Momentum scrolling padrão em containers roláveis */
.scroll, [class*="overflow"], main, .panel, .card {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* iOS zoom-on-focus fix: inputs com fonte < 16px disparam zoom
   automático no Safari. Forçamos 16px em form fields no mobile. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Touch targets: garante 44px mínimo de altura clicável em botões/links
   importantes (Apple HIG + WCAG 2.5.5). Não interfere se já são maiores. */
@media (max-width: 768px) {
  button:not(.btn-sm):not(.fila-tab):not(.ft-btn):not(.mob-tab):not(.kb):not(.swatch):not(.pulse-sb-toggle),
  a.btn, .btn:not(.btn-sm) {
    min-height: 44px;
  }
}

/* Safe-area iOS (notch e barrinha do home indicator):
   barras fixas no rodapé ganham padding automático em iPhones com notch */
.mob-tabbar,
.pulse-sb-overlay,
nav.bottom-bar,
.bottom-fab,
.bottom-actions {
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left:  env(safe-area-inset-left,  0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Sidebar mobile também respeita safe-area */
@media (max-width: 768px) {
  .pulse-sb {
    padding-top:    max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .pulse-sb-toggle {
    top: max(14px, env(safe-area-inset-top, 14px));
    left: max(14px, env(safe-area-inset-left, 14px));
  }
}

/* Body com safe-area no topo (pra páginas com nav fixa) */
@media (max-width: 768px) {
  body {
    padding-top: env(safe-area-inset-top, 0);
  }
}

/* Modais ocupando quase tela cheia no mobile (mais ergonômico que
   um quadradinho pequeno no meio que exige zoom) */
@media (max-width: 560px) {
  .modal, .ov-modal, .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 24px) !important;
    margin: env(safe-area-inset-top, 12px) 12px env(safe-area-inset-bottom, 12px);
    border-radius: var(--r-md);
  }
}

/* Tabelas com scroll horizontal no mobile (em vez de overflow horizontal
   do body inteiro, que zoom-out a UI toda) */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.no-scroll-mobile { display: table; overflow: visible; white-space: normal; }
}

/* Remove a borda azul de focus padrão e usa o lime do tema
   (mais elegante e consistente com a identidade) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Texto longo quebra direito no mobile (URLs, emails) */
@media (max-width: 560px) {
  .break-long, .panel p, .card p, td, .modal p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}