/* ============================================================================
   KRYPTA BRAND LAYER — v4.44 (Brand Guidelines v2.1)
   ----------------------------------------------------------------------------
   Carregada DEPOIS de app.css e dos componentes: re-tokeniza o sistema para
   o padrão visual da KRYPTA (dark = padrão, light = espelho fiel) e aplica
   os componentes de marca (tipografia Space Grotesk/Inter/JetBrains Mono,
   grade de fundo, topbar de vidro, gradiente cyan→violet, footer animado).

   EXCEÇÃO OFICIAL (regra do Fábio): a SIMULAÇÃO DO WHATSAPP não muda —
   nenhuma variável de chat (--bubble-*, --wa-*) é tocada aqui, e os verdes
   do WhatsApp (#00a884/#25d366) permanecem nos componentes de conversa.
   ============================================================================ */

/* ── TOKENS — DARK (padrão) ─────────────────────────────────────────────── */
:root {
  /* superfícies (rampa ancorada em #0D1418 · H202/S30 — guia v2.1) */
  --bg:        #0D1418;
  --bg-soft:   #151E23;
  --bg-elev:   #1A252B;
  --bg-elev-2: #1F2A30;
  --border:       #2D3A41;
  --border-soft:  #243038;
  --line-soft:    #243038;

  --text:      #FFFFFF;
  --text-soft: #CBD5E1;
  --text-mute: #94A3B8;

  /* marca */
  --k-cyan:    #00D1FF;
  --k-violet:  #A855F7;
  --k-blue:    #2563EB;
  --k-magenta: #EC4899;
  --k-gradient: linear-gradient(135deg, var(--k-cyan) 0%, var(--k-violet) 100%);
  --k-grid-line: rgba(0, 209, 255, 0.035);
  --k-shadow-soft: 0 8px 32px rgba(3, 8, 11, 0.55);
  --k-glow-cyan: 0 0 24px rgba(0, 209, 255, 0.15);
  --k-glass: rgba(13, 20, 24, 0.80);

  /* semânticos (usados nos templates via var — tema claro re-mapeia) */
  --ok:        #0e9f6e;
  --ok-bg:     #0e6b4f;
  --warn:      #d4a017;
  --warn-soft: #ffb547;
  --warn-bg:   #8a6d1a;
  --bad:       #e05252;
  --bad-bg:    #7c2d2d;
  --bad-soft:  #e0567b;
  --info:      #4ea8de;
  --on-info:   #08222e;
  --on-violet: #1c1233;
  --k-violet-ui: #a07eff;
  --chip:      #26333B;
  --chip-2:    #2E3B44;
  --chip-3:    #3B4A54;
}

/* ── TOKENS — LIGHT ─────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:        #FFFFFF;
  --bg-soft:   #F8FAFC;
  --bg-elev:   #F1F5F9;
  --bg-elev-2: #E9EEF4;
  --border:       #CBD5E1;
  --border-soft:  #E2E8F0;
  --line-soft:    #E2E8F0;

  --text:      #0F172A;
  --text-soft: #334155;
  --text-mute: #64748B;

  --k-cyan:    #00B8E6;
  --k-violet:  #9333EA;
  --k-blue:    #1D4ED8;
  --k-magenta: #DB2777;
  --k-gradient: linear-gradient(135deg, var(--k-cyan) 0%, var(--k-violet) 100%);
  --k-grid-line: rgba(0, 184, 230, 0.06);
  --k-shadow-soft: 0 6px 20px rgba(15, 23, 42, 0.06);
  --k-glow-cyan: 0 4px 24px rgba(0, 184, 230, 0.12);
  --k-glass: rgba(255, 255, 255, 0.85);

  --ok:        #059669;
  --ok-bg:     #D1FAE5;
  /* v4.45 — o marrom #B45309 morreu (pedido do Fábio); âmbar da paleta */
  --warn:      #D97706;
  --warn-soft: #F59E0B;
  --warn-bg:   #FEF3C7;
  --bad:       #DC2626;
  --bad-bg:    #FEE2E2;
  --bad-soft:  #E11D48;
  --info:      #0284C7;
  --on-info:   #063A52;
  --on-violet: #FFFFFF;
  --k-violet-ui: #7C3AED;
  --chip:      #E2E8F0;
  --chip-2:    #D8E0E8;
  --chip-3:    #CBD5E1;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
}

/* ── TIPOGRAFIA DE MARCA ────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.page-title, .card-title, h1, h2, h3, h4, h5,
.modal-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}
.nav-section-label, .hero-eyebrow, .mono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── GRADE DE FUNDO (assinatura da marca) ───────────────────────────────── */
.main > .content {
  position: relative;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--k-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--k-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}
.app-shell { position: relative; z-index: 1; }

/* ── SIDEBAR + MARCA ────────────────────────────────────────────────────── */
.sidebar {
  border-right: 1px solid var(--border-soft);
}
.sidebar .brand {
  /* v4.45 — logo oficial: o DIAMANTE KRYPTA (SVG inline no base.html);
     o quadrado gradiente com a letra "C" morreu. */
  background: transparent;
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 10px;
  box-shadow: var(--k-glow-cyan);
}
.sidebar .nav-item.active {
  background: linear-gradient(135deg, rgba(0, 209, 255, 0.14), rgba(168, 85, 247, 0.14));
  color: var(--text);
  border-left: 2px solid var(--k-cyan);
}
html[data-theme="light"] .sidebar .nav-item.active {
  background: linear-gradient(135deg, rgba(0, 184, 230, 0.12), rgba(147, 51, 234, 0.10));
}

/* ── TOPBAR DE VIDRO ────────────────────────────────────────────────────── */
.topbar {
  background: var(--k-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-soft);
}
.page-title {
  font-weight: 700;
}

/* ── THEME TOGGLE (guia v2.1) ───────────────────────────────────────────── */
.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(0, 209, 255, 0.06);
  border: 1px solid rgba(0, 209, 255, 0.22);
  color: var(--k-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 10px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}
.theme-toggle:hover {
  background: rgba(0, 209, 255, 0.12);
  border-color: var(--k-cyan);
  transform: rotate(15deg);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: inline-block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle {
  background: rgba(0, 184, 230, 0.08);
  border-color: rgba(0, 184, 230, 0.3);
}

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card-x {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-x:hover {
  border-color: var(--border);
  box-shadow: var(--k-shadow-soft);
}
html[data-theme="light"] .card-x {
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

/* ── BOTÕES ─────────────────────────────────────────────────────────────── */
.btn-brand {
  background: var(--k-gradient) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 9px;
  box-shadow: var(--k-glow-cyan);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-brand:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
/* btn-outline-light do Bootstrap é branco-fixo → invisível no tema claro */
.btn-outline-light {
  --bs-btn-color: var(--text-soft);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--bg-elev);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-bg: var(--bg-elev-2);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-border-color: var(--border);
}

/* ── TABELAS / ABAS / FORMULÁRIOS ───────────────────────────────────────── */
.table-dark-x {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-soft);
  --bs-table-border-color: var(--border-soft);
  color: var(--text-soft);
}
.table-dark-x thead tr { border-bottom: 1px solid var(--border); }
.table-dark-x td, .table-dark-x th { border-color: var(--border-soft); }

.nav-tabs {
  --bs-nav-tabs-border-color: var(--border-soft);
  --bs-nav-tabs-link-active-bg: var(--bg-soft);
  --bs-nav-tabs-link-active-color: var(--text);
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--bg-soft);
  --bs-nav-link-color: var(--text-mute);
  --bs-nav-link-hover-color: var(--k-cyan);
}
.nav-tabs .nav-link.active {
  border-top: 2px solid var(--k-cyan);
  font-weight: 600;
}

.form-control, .form-select {
  background-color: var(--bg-elev-2);
  border-color: var(--border-soft);
  color: var(--text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-elev-2);
  border-color: var(--k-cyan);
  box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.12);
  color: var(--text);
}
.form-control::placeholder { color: var(--text-mute); }
.form-label { color: var(--text-mute); }

/* ── BADGES/CHIPS: cantos de pílula + leitura nos DOIS temas ────────────── */
.badge {
  border-radius: 999px;
  font-weight: 600;
  color: var(--text);
}

/* ── MODAIS / DROPDOWNS / ALERTAS ───────────────────────────────────────── */
.modal-content {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  color: var(--text-soft);
}
.dropdown-menu {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
}
.dropdown-item { color: var(--text-soft); }
.dropdown-item:hover { background: var(--bg-elev); color: var(--text); }

/* ── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-track { background: transparent; }

/* ── FOOTER KRYPTA (fonte única — _partials/footer_krypta.html) ─────────── */
.krypta-footer {
  background: transparent;
  color: var(--text-mute);
  font-size: 0.75rem;
  line-height: 1.6;
  border-top: 1px solid var(--border-soft);
  padding: 16px 12px;
  margin-top: 32px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
.krypta-footer--flush { border-top: 0; margin-top: 0; padding: 18px 12px 24px; }
.krypta-footer__credit {
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; justify-content: center;
}
.krypta-footer__link, .krypta-footer__link:visited {
  text-decoration: none; border-bottom: 0; line-height: 1;
  display: inline-flex; border-radius: 4px; transition: filter 0.15s ease;
}
.krypta-footer__link:hover { filter: brightness(1.12); }
.krypta-footer__link:focus-visible { outline: 2px solid var(--k-cyan); outline-offset: 3px; }
.krypta-footer .kbrand-word { font-size: 0.8125rem; letter-spacing: 0.1em; }

.kbrand-word {
  display: inline-flex;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1;
  -webkit-text-fill-color: currentColor;
  background: none;
}
.kbrand-word > span {
  display: inline-block;
  color: #22D3EE;
  -webkit-text-fill-color: currentColor;
  animation: kbrand-letter 5.5s linear infinite;
  animation-fill-mode: backwards;
  will-change: color, text-shadow;
}
.kbrand-word > span:nth-child(1) { animation-delay: 0.00s; }
.kbrand-word > span:nth-child(2) { animation-delay: 0.16s; }
.kbrand-word > span:nth-child(3) { animation-delay: 0.32s; }
.kbrand-word > span:nth-child(4) { animation-delay: 0.48s; }
.kbrand-word > span:nth-child(5) { animation-delay: 0.64s; }
.kbrand-word > span:nth-child(6) { animation-delay: 0.80s; }
@keyframes kbrand-letter {
  0%   { color: #22D3EE; text-shadow: 0 0 10px rgba(34,211,238,0.45); }
  25%  { color: #3B82F6; text-shadow: 0 0 10px rgba(59,130,246,0.45); }
  50%  { color: #A855F7; text-shadow: 0 0 12px rgba(168,85,247,0.50); }
  75%  { color: #EC4899; text-shadow: 0 0 12px rgba(236,72,153,0.45); }
  100% { color: #22D3EE; text-shadow: 0 0 10px rgba(34,211,238,0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .kbrand-word > span { animation: none !important; color: #3B82F6; }
}

/* ── LIGHT: acabamentos que o app.css antigo não cobria ─────────────────── */
html[data-theme="light"] body::after { opacity: 0.9; }
html[data-theme="light"] .alert { --bs-alert-border-color: var(--border-soft); }