/* ══════════════════════════════════════════════════════════════════════
   Sistema de diseño compartido — claro / oscuro
   Importar en TODAS las páginas antes de su propio <style>.
   Las reglas de elementos específicos de cada página van en su <style>.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Variables: modo oscuro ─────────────────────────────────────────── */
/* Especificidad html[data-theme] = (0,1,1) > :root (0,1,0)
   Esto garantiza que estas variables ganan aunque :root esté definido
   después en el <style> de la página (non-home pages). */
html[data-theme="dark"]{
  --bg:#0E0E10;--bg2:#141416;--bg3:#1a1a1c;
  --line:#2A2A2A;--line2:#222224;
  --text:#EDEAE3;--muted:#8A8782;--muted2:#555;
  --accent:#A67C52;--green:#22c55e;--red:#e8162e;
  /* Aliases para distintos sistemas de naming */
  --border:#2A2A2A;--border2:#222224;--dimmer:#555;
  --surface:#141618;--surface2:#1A1C1F;--dim:#5A5755;--bronze:#A67C52;
}

/* ── Variables: modo claro ── compartido en TODAS las páginas ───────── */
html[data-theme="light"]{
  /* Páginas secundarias (buscar, vender, créditos, noticias, zona) */
  --bg:#fff;--bg2:#f5f5f5;--bg3:#eeeeee;
  --line:#e0e0e0;--line2:#cccccc;
  --text:#0D0D0D;--muted:#6B6B6B;--muted2:#888;
  --accent:#C41230;--green:#15803d;--red:#dc2626;
  /* Aliases index.html (border/dimmer/extras) */
  --border:#e0e0e0;--border2:#cccccc;--dimmer:#999;
  --accent2:#A30F28;--orange:#b45309;--blue:#1d4ed8;--purple:#6d28d9;
  /* Aliases mi-busqueda / mi-perfil */
  --surface:#fff;--surface2:#f5f5f5;--dim:#888;--bronze:#C41230;
}

/* ── Body reset ───────────────────────────────────────────────────────── */
[data-theme="light"] body{font-family:Arial,Helvetica,sans-serif;background:#fff;color:#0D0D0D}

/* ── Topbar — páginas secundarias con .topbar ────────────────────────── */
/* El fondo de .topbar está hardcodeado (#0A0A0A) en cada página, así que
   necesita override explícito. El !important solo aplica aquí, no a index. */
[data-theme="light"] .topbar{background:rgba(255,255,255,.97)!important;border-bottom-color:#e0e0e0}
[data-theme="light"] .topbar-mobile{background:#fff!important;border-bottom-color:#e0e0e0}
[data-theme="light"] .topbar-mobile a{color:rgba(0,0,0,.6);border-bottom-color:#e0e0e0}
[data-theme="light"] .topbar-mobile a:hover{color:#0D0D0D}

/* ── Theme toggle button ─────────────────────────────────────────────── */
.theme-toggle{background:none;border:1px solid var(--border2,#ddd);border-radius:20px;padding:5px 12px;font-size:13px;cursor:pointer;color:var(--muted,#888);transition:all .2s;display:flex;align-items:center;gap:5px;flex-shrink:0;line-height:1}
.theme-toggle:hover{border-color:var(--dimmer,#999);color:var(--text,#0D0D0D)}

/* ── Scroll-to-top button (global) ───────────────────────────────────── */
.scroll-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--accent,#A67C52);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity .25s}
.scroll-top.vis{opacity:1;pointer-events:auto}
.scroll-top:hover{opacity:.85}

/* ── Shared nav (inyectado por /js/nav.js en todas las páginas) ─── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);padding:0 32px}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px}
a.nav-logo{display:flex;flex-direction:column;gap:0;text-decoration:none}
.nav-logo-main{font-size:15px;font-weight:600;letter-spacing:.08em;color:#fff}
.nav-logo-sub{font-size:10px;font-weight:500;letter-spacing:.12em;color:rgba(255,255,255,.5);text-transform:uppercase}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-size:11px;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.7);text-transform:uppercase;transition:color .2s;text-decoration:none}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-social{display:flex;gap:16px;align-items:center;margin-left:8px;padding-left:20px;border-left:1px solid rgba(255,255,255,.1)}
.nav-social a{color:rgba(255,255,255,.6);font-size:16px;transition:color .2s;line-height:1}
.nav-social a:hover{color:#fff}
.nav-ham{display:none;background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;padding:0;flex-shrink:0}
.nav-ham:hover{color:#fff}
.nav-mobile{display:none;position:fixed;top:60px;left:0;right:0;z-index:99;background:rgba(10,10,10,.95);border-bottom:1px solid rgba(255,255,255,.08);flex-direction:column;padding:4px 0}
.nav-mobile.open{display:flex}
.nav-mobile a{display:block;padding:14px 32px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);border-bottom:1px solid rgba(255,255,255,.05);transition:color .2s;text-decoration:none}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile a:hover{color:#fff}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-social{display:none}
  .nav-ham{display:flex}
}
[data-theme="light"] nav{background:rgba(255,255,255,.97)!important;border-bottom-color:rgba(0,0,0,.1)!important}
[data-theme="light"] .nav-logo-main{color:#0D0D0D}
[data-theme="light"] .nav-logo-sub{color:rgba(0,0,0,.45)}
[data-theme="light"] .nav-links a{color:rgba(0,0,0,.7);font-weight:600}
[data-theme="light"] .nav-links a:hover,[data-theme="light"] .nav-links a.active{color:#0D0D0D}
[data-theme="light"] .nav-social{border-left-color:rgba(0,0,0,.12)}
[data-theme="light"] .nav-social a{color:rgba(0,0,0,.5)}
[data-theme="light"] .nav-social a:hover{color:#0D0D0D}
[data-theme="light"] .nav-ham{color:rgba(0,0,0,.6)}
[data-theme="light"] .nav-mobile{background:#fff!important;border-bottom-color:#e0e0e0!important}
[data-theme="light"] .nav-mobile a{color:rgba(0,0,0,.65);border-bottom-color:#e0e0e0}
[data-theme="light"] .nav-mobile a:hover{color:#0D0D0D}