/* ═══════════════════════════════════════
   TEMA: ANIME / GAMING
   Predeterminado
═══════════════════════════════════════ */
:root {
  --bg:         #0d0f1a;
  --bg2:        #111320;
  --bg3:        #161929;
  --border:     #1e2540;
  --border-lit: #2d3a6e;
  --text:       #e8eaf6;
  --text-sec:   #8b92c4;
  --text-muted: #4a527a;
  --blue:       #6c63ff;
  --cyan:       #00d4ff;
  --pink:       #ff4da6;
  --green:      #00ff9f;
  --amber:      #ffd600;
  --red:        #ff3d71;
  --purple:     #b44dff;
  --grad-1:     linear-gradient(135deg, #6c63ff, #00d4ff);
  --grad-2:     linear-gradient(135deg, #ff4da6, #6c63ff);
  --grad-3:     linear-gradient(135deg, #00ff9f, #00d4ff);
  --shadow:     0 4px 24px rgba(108,99,255,.15);
  --shadow2:    0 8px 40px rgba(108,99,255,.25);
  --glow-blue:  0 0 20px rgba(108,99,255,.4);
  --glow-cyan:  0 0 20px rgba(0,212,255,.4);
  --glow-pink:  0 0 20px rgba(255,77,166,.4);
  --r:          12px;
  --ui:         'Inter', system-ui, sans-serif;
  --prose:      'Lora', Georgia, serif;
}

/* ── Body ── */
body {
  background: var(--bg);
  color: var(--text);
  background-image:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(108,99,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 0% 100%, rgba(0,212,255,.06) 0%, transparent 50%);
}

/* ── Topbar ── */
.topbar {
  background: rgba(13,15,26,.9);
  border-bottom: 1px solid var(--border-lit);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(108,99,255,.2), var(--shadow);
}
.brand { background: var(--grad-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-btn { color: var(--text-sec); border-radius: 8px; }
.nav-btn:hover { background: rgba(108,99,255,.12); color: var(--cyan); }

/* ── Tema selector ── */
.theme-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-lit);
  cursor: pointer; transition: all .2s;
}
.theme-btn:hover { transform: scale(1.15); border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.theme-btn.active { border-color: var(--cyan); box-shadow: var(--glow-cyan); }

/* ── Layout ── */
.layout { background: transparent; }

/* ── Cover ── */
.page-cover {
  border: 1px solid var(--border-lit);
  box-shadow: var(--shadow2);
  border-radius: var(--r);
}

/* ── Header ── */
.page-title {
  font-family: var(--ui);
  font-weight: 700;
  background: var(--grad-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-meta { color: var(--text-muted); }

/* ── Notion blocks ── */
.nc-h1 {
  font-family: var(--ui); font-weight: 700;
  background: var(--grad-2);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-lit);
}
.nc-h2 {
  font-family: var(--ui); font-weight: 600;
  color: var(--cyan);
  border-left: 3px solid var(--blue);
  padding-left: 12px;
  border-top: none;
}
.nc-h3 { color: var(--pink); font-family: var(--ui); font-weight: 600; }
.nc-p  { color: var(--text-sec); font-family: var(--ui); font-size: 16px; line-height: 1.8; }
.nc-li { color: var(--text-sec); font-family: var(--ui); font-size: 16px; }
.nc-ul { list-style: none; padding-left: 0; }
.nc-ul .nc-li::before { content: '▹'; color: var(--cyan); margin-right: 8px; }
.nc-ol { padding-left: 20px; }
.nc-ol .nc-li::marker { color: var(--blue); }
.nc-quote {
  border-left: 3px solid var(--purple);
  background: rgba(180,77,255,.08);
  border-radius: 0 8px 8px 0;
  color: var(--text-sec);
  font-style: italic;
}
.nc-callout {
  background: rgba(108,99,255,.08);
  border: 1px solid rgba(108,99,255,.3);
  border-radius: 10px;
  color: var(--text-sec);
}
.nc-callout-yellow { background: rgba(255,214,0,.06); border-color: rgba(255,214,0,.3); color: var(--amber); }
.nc-callout-red    { background: rgba(255,61,113,.06); border-color: rgba(255,61,113,.3); color: var(--red); }
.nc-callout-green  { background: rgba(0,255,159,.06); border-color: rgba(0,255,159,.3); color: var(--green); }
.nc-callout-gray   { background: rgba(255,255,255,.04); border-color: var(--border); color: var(--text-muted); }

.nc-code { background: #0a0c16; border: 1px solid var(--border-lit); border-radius: 10px; }
.nc-code-lang { background: #0a0c16; color: var(--blue); border-bottom: 1px solid var(--border-lit); }
.nc-code code  { color: var(--cyan); font-size: 14px; }
.nc-p code { background: rgba(108,99,255,.15); color: var(--cyan); border-radius: 4px; padding: 2px 6px; }

.nc-divider { border-top: 1px solid var(--border-lit); }

.nc-toggle {
  background: var(--bg2);
  border: 1px solid var(--border-lit);
  border-radius: 10px;
}
.nc-toggle-sum { color: var(--text); font-weight: 500; }
.nc-toggle-sum::before { color: var(--blue); }
.nc-toggle-body { border-top: 1px solid var(--border); }

.nc-todo input { accent-color: var(--blue); }
.nc-todo span  { color: var(--text-sec); }

.nc-img { border: 1px solid var(--border-lit); box-shadow: var(--shadow); border-radius: 10px; }
.nc-caption { color: var(--text-muted); }

.nc-bookmark {
  background: var(--bg2); border: 1px solid var(--border-lit);
  border-radius: 8px;
  transition: border-color .2s, box-shadow .2s;
}
.nc-bookmark:hover { border-color: var(--blue); box-shadow: var(--glow-blue); }
.nc-bookmark a { color: var(--cyan); }

.nc-child-page {
  background: var(--bg2); border: 1px solid var(--border-lit);
  border-radius: 8px; transition: all .2s;
}
.nc-child-page:hover { border-color: var(--blue); box-shadow: var(--glow-blue); transform: translateX(4px); }
.nc-child-page a { color: var(--text); font-weight: 500; }

.nc-table { border-collapse: collapse; width: 100%; }
.nc-td { border: 1px solid var(--border-lit); padding: 10px 14px; color: var(--text-sec); font-size: 14px; }
.nc-table tr:first-child .nc-td { background: rgba(108,99,255,.08); color: var(--text); font-weight: 600; }

.nc-toc { background: var(--bg2); border: 1px solid var(--border-lit); border-radius: 10px; }
.toc-title { color: var(--blue); }
.toc-list a { color: var(--text-sec); }
.toc-list a:hover { color: var(--cyan); }

/* Colores de texto Notion */
.nc-c-gray{color:#6b7280} .nc-c-red{color:var(--red)} .nc-c-orange{color:#ff7849}
.nc-c-yellow{color:var(--amber)} .nc-c-green{color:var(--green)} .nc-c-blue{color:var(--blue)}
.nc-c-purple{color:var(--purple)} .nc-c-pink{color:var(--pink)}
.nc-bg-gray{background:rgba(255,255,255,.05);padding:1px 4px;border-radius:3px}
.nc-bg-red{background:rgba(255,61,113,.12);padding:1px 4px;border-radius:3px}
.nc-bg-yellow{background:rgba(255,214,0,.1);padding:1px 4px;border-radius:3px}
.nc-bg-green{background:rgba(0,255,159,.08);padding:1px 4px;border-radius:3px}
.nc-bg-blue{background:rgba(108,99,255,.12);padding:1px 4px;border-radius:3px}
.nc-bg-purple{background:rgba(180,77,255,.12);padding:1px 4px;border-radius:3px}

/* Loader */
.loader { background: var(--bg); }
.spinner { border-color: var(--border-lit); border-top-color: var(--blue); }
.loader-txt { color: var(--text-muted); }

/* Error */
.err-btn { background: var(--blue); }
.err-btn:hover { background: var(--purple); }
.err-title { color: var(--text); }
.err-desc  { color: var(--text-sec); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-lit); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }