/* ═══════════════════════════════════════════════════════════
   APEX TOKENS v2.0 — Fuente única de verdad
   Cargado en TODAS las páginas (públicas + internas)
   NO modificar sin actualizar el Brand Kit.
   ═══════════════════════════════════════════════════════════ */

/* ── Reset base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Barlow',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.65}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit}
img{max-width:100%;height:auto;display:block}

:root{
  /* ── Modo oscuro declarado (2026-09-03) ──────────────────────────────────
     La paleta YA es oscura de día y de noche; esto se lo dice al navegador
     para que los controles NATIVOS (menús de <select>, barras de scroll,
     selectores de fecha, autocompletado) también salgan oscuros en vez del
     blanco por defecto del sistema. No hay ninguna regla prefers-color-scheme
     en el tema a propósito: APEX no cambia de colores según la hora. */
  color-scheme:dark;
  /* ── Fondos (ramp oscuro) ── */
  --bg:#0a1e26;
  --bg2:#0d2530;
  --bg3:#112c38;
  --bg4:#163545;
  --bg5:#1c3f52;
  --bg-deeper:#060f14;
  --deep:#060f14; /* alias semántico para overlays muy oscuros */

  /* ── Bordes ── */
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.13);
  --border-acc:rgba(200,255,0,0.10);
  --border-mid:rgba(200,255,0,0.18);

  /* ── Acento Lima — color primario APEX ── */
  --accent:#C8FF00;
  --accent-t:#0a1e26;       /* texto SOBRE el acento */
  --accent-bg:rgba(200,255,0,0.08);
  --accent-bd:rgba(200,255,0,0.25);
  --accent-glow:rgba(200,255,0,0.15);
  --accent-dm:rgba(200,255,0,0.07);

  /* ── Semánticos ── */
  --green:#22c55e;    --green-bg:rgba(34,197,94,0.10);
  --red:#ef4444;      --red-bg:rgba(239,68,68,0.10);
  --warning:#f39c12;
  --danger:#e74c3c;
  --info:#3498db;     --info-bg:rgba(52,152,219,0.10);
  --success:#2ecc71;  --success-bg:rgba(46,204,113,0.10);

  /* ── Colores categóricos (biblioteca, tipos de recurso) ── */
  --blue:#3b82f6;     --blue-bg:rgba(59,130,246,0.10);
  --purple:#a855f7;   --purple-bg:rgba(168,85,247,0.10);
  --amber:#f59e0b;    --amber-bg:rgba(245,158,11,0.10);

  /* ── Color de especializaciones ── */
  --spec:#f59e0b; /* ámbar — diferencia Especializaciones del Programa Trading */

  /* ── Texto y grises ──────────────────────────────────────────────────────
     ⚠️ CONTRASTE MEDIDO, NO ELEGIDO A OJO (2026-08-29). Los valores viejos
     (--gray:#6a8f9f = 4,9:1 · --gray2:#3d5f6e = 2,5:1) reprobaban el mínimo
     de accesibilidad sobre --bg (#0a1e26): WCAG AA pide 4,5:1 para texto
     normal y --gray2 estaba a poco más de la mitad.

     Se notaba en la laptop y no en el celular porque el teléfono compensa
     (pantalla más brillante, a 30 cm, más densidad). No era la vista de
     nadie: era el token.

     Valores nuevos, con la jerarquía intacta (gray sigue siendo más fuerte
     que gray2) y los dos por encima del mínimo:
       --gray  #8fb0bd → 7,4:1
       --gray2 #7695a3 → 5,4:1
     Si algún día se toca esta paleta, volver a medir contra --bg — el
     contraste es un requisito, no una preferencia estética. */
  --text:#e8f0f0;
  --gray:#8fb0bd;
  --gray2:#7695a3;

  /* ── Tipografía ── */
  --font-display:'Barlow Condensed',sans-serif;
  --font-body:'Barlow',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* ── Layout ── */
  --sw:240px;          /* sidebar width colapsado (toggle) */
  --sidebar-w:260px;   /* sidebar width expandido */
  --sc:60px;           /* sidebar collapsed width */
  --radius:3px;
  --radius-md:6px;
  --radius-lg:12px;

  /* ── Sombras ── */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:0 4px 20px rgba(0,0,0,0.4);
  --shadow-accent:0 0 20px rgba(200,255,0,0.08);

  /* ── Transiciones ── */
  --transition:all 0.18s ease;

  /* ══════════════════════════════════════════════════════════
     ALIASES de compatibilidad — mantienen funcionando
     los archivos style.css y cualquier CSS legado que use
     la nomenclatura --apex-*. No usar en código nuevo.
     ══════════════════════════════════════════════════════════ */
  --apex-bg:          var(--bg);
  --apex-bg2:         var(--bg2);
  --apex-bg3:         var(--bg3);
  --apex-bg-deeper:   var(--bg-deeper);
  --apex-border:      var(--border-acc);
  --apex-border-mid:  var(--border-mid);
  --apex-accent:      var(--accent);
  --apex-accent-bg:   var(--accent-bg);
  --apex-accent-bd:   var(--accent-bd);
  --apex-accent-glow: var(--accent-glow);
  --apex-text:        var(--text);
  --apex-gray:        var(--gray);
  --apex-gray2:       var(--gray2);
  --apex-success:     var(--success);
  --apex-warning:     var(--warning);
  --apex-danger:      var(--danger);
  --apex-info:        var(--info);
}

/* ── Keyframes globales ── */
@keyframes pulse      {0%,100%{opacity:1}50%{opacity:.2}}
@keyframes fadeUp     {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn     {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes tickerMove {from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin       {to{transform:rotate(360deg)}}
@keyframes barFill    {from{width:0}to{width:var(--w,100%)}}
@keyframes modalIn    {from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes overlayIn  {from{opacity:0}to{opacity:1}}
@keyframes dropIn     {from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer    {0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes dots       {0%,80%,100%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}
@keyframes checkIn    {from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes countPulse {0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes isoFloat   {0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--gray2)}

/* ── Selection ── */
::selection{background:var(--accent);color:var(--accent-t)}

/* ── Ocultar chrome de Kadence en templates propios ── */
.site-header,.site-footer,.entry-hero,.kadence-breadcrumbs{display:none !important}
.site-main,.content-wrap,.content-container{padding:0 !important;margin:0 !important;max-width:100% !important}