/* ─── Aprende Zymbol — Theme ─── */
/* Dark by default; light via html.light (applied before first paint by theme.js) */

/* ─── Color palette (mirrors web/style.css) ─── */
:root {
  --bg:        #0c0c0c;
  --bg2:       #111111;
  --bg3:       #161616;
  --bg4:       #1a1a1a;
  --line:      #1e1e1e;
  --muted:     #2a2a2a;
  --dim:       #444;
  --mid:       #666;
  --text:      #aaa;
  --hi:        #ddd;
  --white:     #f0f0f0;
  --green:     #00e87a;
  --green2:    #00c468;
  --green-dim: #00e87a14;
  --green-mid: #00e87a33;
  --str:       #c89a6e;
  --num:       #6aadce;
  --cmt:       #4a5568;
  --op:        #9ecbff;
  --fn:        #c792ea;
  --id:        #aaaaaa;
  --punct:     #6b7a99;
  --kw:        #00e87a;
  --br:        #e8b04a;
  --hot:       #ff9940;
  --mono:      'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  --radius:    6px;

  /* Cover-specific — adapted per theme */
  --cover-bg:        #060610;
  --cover-text:      #94a3b8;
  --cover-text-body: #8896a8;
}

html.light {
  --bg:        #f8f8f8;
  --bg2:       #f0f0f0;
  --bg3:       #e8e8e8;
  --bg4:       #e0e0e0;
  --line:      #d0d0d0;
  --muted:     #c0c0c0;
  --dim:       #888;
  --mid:       #555;
  --text:      #222;
  --hi:        #111;
  --white:     #111;
  --green:     #008a48;
  --green2:    #006a38;
  --green-dim: #008a4810;
  --green-mid: #008a4828;
  --str:       #a0522d;
  --num:       #1a6a99;
  --cmt:       #aaaaaa;
  --op:        #3a6fa8;
  --fn:        #7c3aed;
  --id:        #333333;
  --punct:     #7a8598;
  --kw:        #008a48;
  --br:        #b45309;
  --hot:       #c05800;

  /* Cover light mode — azul muy suave, textos oscuros */
  --cover-bg:        #f0f4ff;
  --cover-text:      #475569;
  --cover-text-body: #64748b;
}

/* ─── Docsify-themeable variable overrides ─── */
:root {
  --theme-color:                    var(--green);
  --base-background-color:          var(--bg);
  --base-color:                     var(--text);
  --base-font-size:                 16px;
  --base-line-height:               1.7;
  --base-font-family:               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono-font-family:               var(--mono);
  --sidebar-width:                  280px;
  --sidebar-background:             var(--bg2);
  --sidebar-border-color:           var(--line);
  --sidebar-nav-link-color:         var(--mid);
  --sidebar-nav-link-color--hover:  var(--hi);
  --sidebar-nav-link-color--active: var(--green);
  --sidebar-nav-pagelink-color:     var(--text);
  --sidebar-nav-pagelink-font-weight: 600;
  --content-max-width:              820px;
  --code-block-background:          var(--bg2);
  --code-inline-background:         var(--bg3);
  --code-inline-color:              var(--str);
  --link-color:                     var(--green);
  --link-color--hover:              var(--green2);
  --heading-color:                  var(--white);
  --blockquote-border-color:        var(--green);
  --blockquote-background:          var(--green-dim);
  --cover-color:                    var(--cover-text);
  --cover-background-color:         var(--cover-bg);
  --cover-background-image:         none;
}

/* ─── Global ─── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ─── Sidebar ─── */
.sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--line) !important;
}

/* Logo in sidebar header */
.sidebar .app-name {
  padding: 1rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.sidebar .app-name img {
  height: 2.4rem;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(0, 232, 122, 0.3));
  transition: filter 0.2s;
}

.sidebar .app-name img:hover {
  filter: drop-shadow(0 0 14px rgba(0, 232, 122, 0.55));
}

.sidebar .app-name a {
  color: var(--green) !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-nav > ul > li > p,
.sidebar-nav > ul > li > strong {
  color: var(--green) !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 1.4rem 0 0.35rem;
  padding-left: 0.5rem;
  display: block;
}

.sidebar-nav li a {
  color: var(--mid);
  font-size: 0.875rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.sidebar-nav li a:hover {
  color: var(--hi);
  background: var(--bg3);
  text-decoration: none;
}

.sidebar-nav li.active > a {
  color: var(--green) !important;
  background: var(--bg3);
  font-weight: 600;
}

/* ─── Cover page ─── */
/* Override ALL docsify-themeable cover backgrounds */
body.ready section.cover,
section.cover,
.cover,
[data-coverpage] {
  background: var(--cover-bg) !important;
  background-image: none !important;
}

section.cover .cover-main {
  background: transparent !important;
}

/* Docsify-themeable sometimes adds pseudo-elements with gradients */
section.cover::before,
section.cover::after {
  display: none !important;
}

/* Logo image on cover page */
section.cover img[alt="logo"] {
  width: clamp(80px, 14vw, 140px);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(0, 232, 122, 0.28));
  animation: zy-float 6s ease-in-out infinite;
  margin-bottom: 0.5rem;
}

html.light section.cover img[alt="logo"] {
  filter: drop-shadow(0 0 20px rgba(0, 138, 72, 0.3));
}

@keyframes zy-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

section.cover h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--green) 0%, var(--green2) 50%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

section.cover blockquote {
  border: none !important;
  background: none !important;
  color: var(--cover-text) !important;
  font-size: 1.05rem;
  font-style: italic;
}

section.cover p {
  color: var(--cover-text-body) !important;
  line-height: 1.8;
}

section.cover .cover-main > p:last-child a {
  border-radius: var(--radius);
  font-weight: 700;
  padding: 0.7em 1.7em;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

section.cover .cover-main > p:last-child a:first-child {
  background: var(--green) !important;
  border: 2px solid var(--green) !important;
  color: #fff !important;
}

html.light section.cover .cover-main > p:last-child a:first-child {
  color: #fff !important;
}

section.cover .cover-main > p:last-child a:last-child {
  background: transparent !important;
  border: 2px solid var(--green-mid) !important;
  color: var(--green) !important;
}

section.cover .cover-main > p:last-child a:last-child:hover {
  border-color: var(--green) !important;
  background: var(--green-dim) !important;
}

/* ─── Main content area ─── */
.content { background: var(--bg); }

.markdown-section {
  color: var(--text);
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5 {
  color: var(--white);
}

.markdown-section h2 {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.4rem;
}

.markdown-section a {
  color: var(--green);
  text-decoration: none;
}

.markdown-section a:hover {
  color: var(--green2);
  text-decoration: underline;
}

.markdown-section hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

.markdown-section strong { color: var(--hi); }

/* ─── Code blocks ─── */
pre,
pre[class*="language-"] {
  background: var(--bg2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  font-family: var(--mono) !important;
  font-size: 0.84rem !important;
  line-height: 1.65 !important;
  font-variant-ligatures: none;
}

code {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

:not(pre) > code {
  background: var(--bg3) !important;
  color: var(--str) !important;
  border-radius: 3px;
  padding: 0.12em 0.45em;
  font-size: 0.88em;
}

/* ─── Tables ─── */
.markdown-section table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
  background: var(--bg) !important;
}

.markdown-section th {
  background: var(--bg3) !important;
  color: var(--green) !important;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.55rem 0.8rem;
  border-bottom: 2px solid var(--line) !important;
  border-top: none !important;
  text-align: left;
}

.markdown-section td {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: none !important;
  padding: 0.45rem 0.8rem;
  color: var(--text) !important;
}

.markdown-section tr:nth-child(even) td { background: var(--bg2) !important; }
.markdown-section tr:hover td           { background: var(--bg3) !important; }

/* ─── Blockquotes ─── */
blockquote {
  border-left: 3px solid var(--green) !important;
  background: var(--green-dim) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  padding: 0.75rem 1rem !important;
  color: var(--mid);
}

blockquote p { margin: 0; color: inherit; }

/* ─── Zymbol syntax highlight tokens (playground classes) ─── */
.t-kw    { color: var(--kw);    font-weight: 600; }
.t-op    { color: var(--op); }
.t-str   { color: var(--str); }
.t-num   { color: var(--num); }
.t-cmt   { color: var(--cmt);   font-style: italic; }
.t-fn    { color: var(--fn); }
.t-id    { color: var(--id); }
.t-punct { color: var(--punct); }
.t-br    { color: var(--br); }
.t-hot   { color: var(--hot); font-weight: bold; }

/* ─── Search bar ─── */
.search input {
  background: var(--bg3) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--radius);
}

.search input::placeholder { color: var(--dim); }

.search .results-panel { background: var(--bg2); border-color: var(--line); }
.search .matching-post  { border-color: var(--line); color: var(--text); }
.search .matching-post h2 { color: var(--white); }

/* ─── Pagination (docsify-pagination) ─── */
.pagination-item a {
  color: var(--green) !important;
  border-color: var(--line) !important;
}

.pagination-item a:hover {
  background: var(--bg3) !important;
  border-color: var(--green-mid) !important;
}

/* ─── Theme toggle button ─── */
#zy-theme-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--mid);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

#zy-theme-btn:hover {
  border-color: var(--dim);
  background: var(--bg4);
}

/* ─── Scrollbar ─── */
.sidebar::-webkit-scrollbar       { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 2px; }

/* ─── Smooth theme transitions ─── */
body,
.sidebar,
.content,
.markdown-section,
pre,
code,
blockquote,
table,
th,
td,
.search input,
.sidebar-nav li a,
#zy-theme-btn {
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}