/* ───────────────────────────────────────────────────────────
   Jungla Digital — chrome global: header/nav, menú móvil overlay,
   footer y switch Selva⟷Consola. Porteado de human-kit/term-kit.
   ─────────────────────────────────────────────────────────── */

/* ── Header / nav ──────────────────────────────────────────── */
.jd-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.jd-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.jd-brand{display:inline-flex;align-items:center;flex-shrink:0}

.jd-nav{display:flex;align-items:center;gap:30px}
.jd-nav__list{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none;font-size:16px}
.jd-nav__list a{color:var(--dim);font-weight:400;transition:color .15s}
.jd-nav__list .current-menu-item a,.jd-nav__list a:hover{color:var(--fg);opacity:1;font-weight:600}
/* Consola: lenguaje de terminal (~/inicio) */
:root[data-mode="consola"] .jd-nav__list{font-family:var(--font-mono);font-size:14px}
:root[data-mode="consola"] .jd-nav__list a{text-transform:lowercase}
:root[data-mode="consola"] .jd-nav__list a::before{content:"~/";color:var(--dim)}

.jd-search{display:inline-flex;align-items:center;gap:8px;color:var(--dim);border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 16px;font-size:14.5px}
:root[data-mode="consola"] .jd-search{border-radius:4px;font-family:var(--font-mono)}
:root[data-mode="consola"] .jd-search::before{content:"⌕ "}
.jd-search:hover{color:var(--fg);opacity:1}

/* botón hamburguesa — solo móvil */
.jd-navtoggle{display:none;background:none;border:0;cursor:pointer;color:var(--fg);padding:6px;line-height:0}
.jd-navtoggle svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}

/* ── Menú móvil overlay (WP7 mobile nav-friendly) ──────────── */
@media (max-width:781px){
  .jd-navtoggle{display:inline-block}
  .jd-nav{position:fixed;inset:0;z-index:60;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;
    padding:14vh clamp(28px,9vw,64px);background:var(--bg);
    transform:translateX(100%);opacity:0;visibility:hidden;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s ease,visibility .35s}
  .jd-nav__list{flex-direction:column;align-items:flex-start;gap:18px;font-size:30px}
  :root[data-mode="consola"] .jd-nav__list{font-size:24px}
  .jd-nav__list a{color:var(--fg)}
  .jd-search{margin-top:24px;font-size:16px}
  :root[data-jd-nav-open] .jd-nav{transform:none;opacity:1;visibility:visible}
  :root[data-jd-nav-open]{overflow:hidden}
  .jd-navclose{position:absolute;top:22px;right:24px;background:none;border:0;color:var(--fg);font-size:30px;line-height:1;cursor:pointer}
}
@media (min-width:782px){ .jd-navclose{display:none} }

/* ── Footer ────────────────────────────────────────────────── */
.jd-footer{border-top:1px solid var(--line);margin-top:72px}
.jd-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding-top:40px;padding-bottom:40px}
.jd-footer__brand{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:14.5px}
.jd-footer__social{display:flex;gap:18px}
.jd-footer__social a{display:inline-flex;color:var(--dim);transition:color .15s}
.jd-footer__social a:hover{color:var(--fg);opacity:1}
.jd-footer__social svg{width:20px;height:20px;fill:currentColor;display:block}
.jd-footer__meta{font-size:14.5px;color:var(--dim)}
:root[data-mode="consola"] .jd-footer__meta,:root[data-mode="consola"] .jd-footer__brand{font-family:var(--font-mono);font-size:13px}

/* ── Switch flotante Selva ⟷ Consola ───────────────────────── */
.jd-mode-switch{position:fixed;right:var(--switch-bottom);bottom:var(--switch-bottom);z-index:9000;display:flex;align-items:center;gap:13px;
  background:#15301E;border:1px solid rgba(243,239,228,.18);border-radius:99px;padding:9px 13px 9px 17px;cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transition:background .35s ease,border-color .35s ease}
:root[data-mode="consola"] .jd-mode-switch{background:#0A1B11;border-color:rgba(52,224,122,.3)}
.jd-mode-switch:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.jd-mode-switch__txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.jd-mode-switch__kicker{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,239,228,.55)}
.jd-mode-switch__name{font-family:var(--font-sans);font-size:15px;font-weight:700;letter-spacing:-.01em;color:#F3EFE4}
.jd-mode-switch__track{position:relative;width:50px;height:28px;border-radius:99px;background:rgba(243,239,228,.16);flex-shrink:0}
.jd-mode-switch__knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:99px;background:#C3FF01;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:#15301E;transition:left .32s cubic-bezier(.34,1.56,.64,1),background .35s ease;box-shadow:0 2px 6px rgba(0,0,0,.35)}
:root[data-mode="consola"] .jd-mode-switch__knob{left:25px;background:#34E07A;color:#06120A}
@media (max-width:781px){.jd-mode-switch{right:14px;bottom:14px;padding:8px 11px 8px 14px}}