/* ============================================================
   themes.css — Codeversia · Confirmaciones
   Dark (default) + Light
   ============================================================ */

/* ── Shared: brand + radii + density + motion ── */
:root {
  --brand-500: #00D989;
  --brand-400: #2BE8A1;
  --brand-600: #00B874;
  --brand-700: #008C58;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  --row-py: 14px;
  --card-p: 24px;
  --gap: 16px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ── Dark theme (data-theme="dark") ── */
[data-theme="dark"] {
  --brand-glow: rgba(0,217,137,0.35);

  --bg:          #0A0F14;
  --bg-elevated: #0F161D;
  --surface:     #131B24;
  --surface-2:   #1A232E;
  --surface-3:   #212D3A;
  --border:       rgba(255,255,255,0.06);
  --border-strong:rgba(255,255,255,0.10);

  --fg:      #E7EDF3;
  --fg-muted:#9AA7B4;
  --fg-dim:  #5F6C7B;
  --fg-faint:#3D4754;

  --ok:        #00D989;
  --ok-soft:   rgba(0,217,137,0.12);
  --warn:      #F5B544;
  --warn-soft: rgba(245,181,68,0.12);
  --err:       #FF5C6A;
  --err-soft:  rgba(255,92,106,0.12);
  --info:      #5BAFFF;
  --info-soft: rgba(91,175,255,0.12);
  --violet:    #B383FF;
  --violet-soft:rgba(179,131,255,0.12);

  /* atmosphere gradient */
  --atm-a: rgba(0,217,137,0.08);
  --atm-b: rgba(91,175,255,0.05);
  color-scheme: dark;
}

/* ── Light theme (data-theme="light") ── */
[data-theme="light"] {
  --brand-glow: rgba(0,184,116,0.20);

  --bg:          #F5F7FA;
  --bg-elevated: #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #EDF0F4;
  --surface-3:   #E2E6EC;
  --border:       rgba(0,0,0,0.08);
  --border-strong:rgba(0,0,0,0.13);

  --fg:      #0D1117;
  --fg-muted:#5A6473;
  --fg-dim:  #8C95A0;
  --fg-faint:#C4CBD4;

  --ok:        #009E62;
  --ok-soft:   rgba(0,158,98,0.10);
  --warn:      #C47D00;
  --warn-soft: rgba(196,125,0,0.10);
  --err:       #D93545;
  --err-soft:  rgba(217,53,69,0.10);
  --info:      #2878CC;
  --info-soft: rgba(40,120,204,0.10);
  --violet:    #7A4FD6;
  --violet-soft:rgba(122,79,214,0.10);

  --atm-a: rgba(0,184,116,0.05);
  --atm-b: rgba(40,120,204,0.03);
  color-scheme: light;
}

/* ── Theme toggle button ── */
.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: var(--fg-muted);
  background: none; border: none; cursor: pointer;
  transition: all .2s var(--ease);
  position: relative;
}
.theme-toggle:hover {
  background: var(--surface-2);
  color: var(--fg);
}
.theme-toggle svg { width: 17px; height: 17px; }

/* Show/hide sun & moon icons based on active theme */
[data-theme="dark"]  .icon-sun  { display: block; }
[data-theme="dark"]  .icon-moon { display: none;  }
[data-theme="light"] .icon-sun  { display: none;  }
[data-theme="light"] .icon-moon { display: block; }

@keyframes slideIn {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
.live-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--ok);
      animation: livePulse 3s ease-in-out infinite;
    }
    .live-badge::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--ok); 
      box-shadow: 0 0 8px var(--brand-glow);
      animation: pulse 2s var(--ease) infinite;
    }
    @keyframes livePulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }