/* =========================================================================
   MODO CLARO — misma marca que el oscuro (vidrio, orbes, tipografía).
   Se activa con <html data-theme="light">. El oscuro sigue siendo el predeterminado.
   Las zonas sobre fotografía (portada, encabezado de cada proyecto), el menú, el chat y la esfera
   conservan los tokens oscuros: así el texto mantiene contraste sobre la imagen.
   ========================================================================= */
:root[data-theme="light"]{
  --bg:#F4F5F9;
  --bg-2:#FFFFFF;
  --bg-3:#E9EBF2;
  --ink:#15161C;
  --ink-2:#3F4452;          /* 9.4:1 sobre --bg */
  --ink-3:#4D5260;          /* 7.3:1 sobre --bg; 4.9:1 en el peor caso (sobre un orbe) */
  --ink-4:rgba(21,22,28,.14);
  --glow:26,79,214;         /* azul de marca en versión de texto (#1A4FD6, 5.9:1 sobre --bg) */
  --glow-warm:255,10,78;    /* rojo de marca, solo acentos */
  --glass-1:rgba(255,255,255,.55);
  --glass-2:rgba(255,255,255,.7);
  --glass-3:rgba(255,255,255,.88);
  --stroke:rgba(5,5,7,.10);
  --stroke-hi:rgba(5,5,7,.22);
  --spec:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(5,5,7,.03);
  --drop:0 8px 32px rgba(5,5,7,.08);
  color-scheme:light;
}
/* zonas que conservan los tokens oscuros */
:root[data-theme="light"] :is(.hero, .st-hero, .st-dark, .photo, .menu, .chat, .leni-bubble, .loader, .cv-dialog){
  --bg:#050506; --bg-2:#0b0b0d; --bg-3:#141417; --ink:#f4f4f2; --ink-2:rgba(244,244,242,.78); --ink-3:rgba(244,244,242,.6); --ink-4:rgba(244,244,242,.16);
  --glow:150,185,255; --glow-warm:255,176,104;
  --glass-1:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.065); --glass-3:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.10); --stroke-hi:rgba(255,255,255,.28);
  --spec:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04); --drop:0 30px 80px -30px rgba(0,0,0,.9);
  color:var(--ink);
}
:root[data-theme="light"] .loader{background:#F4F5F9;--ink:#15161C;--ink-2:#3F4452;--ink-3:#4D5260}

/* vidrio claro: superficie blanca translúcida con sombra suave */
:root[data-theme="light"] .glass{background:linear-gradient(140deg,var(--glass-3),var(--glass-1) 60%,rgba(255,255,255,.4));box-shadow:var(--spec),var(--drop)}
:root[data-theme="light"] .glass::before{background:linear-gradient(140deg,rgba(255,255,255,1),rgba(255,255,255,.2) 35%,rgba(255,255,255,0) 60%,rgba(var(--glow),.28))}
:root[data-theme="light"] .btn{background:radial-gradient(120px circle at var(--mx) var(--my),rgba(var(--glow),.16),transparent 60%),linear-gradient(140deg,#fff,rgba(255,255,255,.7));border-color:rgba(5,5,7,.14);color:var(--ink);box-shadow:var(--spec),0 6px 20px -10px rgba(5,5,7,.25)}
:root[data-theme="light"] .btn--solid{background:radial-gradient(120px circle at var(--mx) var(--my),#2a2c36,#15161C 70%);color:#fff;border-color:transparent;box-shadow:0 10px 30px -10px rgba(47,107,255,.6)}
:root[data-theme="light"] :is(.pc, .sm-card, .sm-item, .dc, .lt-block, .st-opt, .sy-stats article, .nx-card, .all-tools, .glass-card){background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.7));border-color:var(--stroke);box-shadow:var(--drop)}
:root[data-theme="light"] .sm-item.is-key{background:linear-gradient(150deg,color-mix(in srgb,var(--pc) 18%,#fff),#fff 75%)}
:root[data-theme="light"] .sm-item.is-key .sm-ico{color:#fff}
:root[data-theme="light"] .all-chips .chip[aria-pressed="true"]{background:#15161C;color:#fff;box-shadow:none}
:root[data-theme="light"] .lang-seg{background:linear-gradient(140deg,#fff,rgba(255,255,255,.7));border-color:rgba(5,5,7,.12)}
/* los orbes de vidrio oscuro siguen, más suaves, para que el vidrio claro tenga profundidad */
:root[data-theme="light"] .orbs .orb-wrap,:root[data-theme="light"] .lab-orbs .orb-wrap{opacity:.32}
/* logo blanco: en claro va sobre una placa oscura para mantener la marca */
:root[data-theme="light"] .site-header .logo{background:#15161C;border-radius:14px;padding:6px 8px;box-shadow:0 8px 24px -10px rgba(5,5,7,.5)}
/* embebidos e imágenes oscuras: marco de vidrio que funciona en ambos temas */
:root[data-theme="light"] :is(.fg, .lv, .mk, .sy-wide){border-color:rgba(5,5,7,.14);box-shadow:var(--drop)}
/* fotografía: fondo neutro en ambos temas */
:root[data-theme="light"] .photo{background:#0b0b0d;color:#f4f4f2}

/* interruptor */
.theme-toggle{width:38px;padding:0;justify-content:center}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:block}
:root[data-theme="light"] .theme-toggle .moon{display:none}
@media (max-width:600px){ .theme-toggle{width:44px;height:44px} }
/* revelado circular (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* la burbuja de LENI y el chat siguen siendo de vidrio oscuro también en claro */
:root[data-theme="light"] :is(.leni-bubble, .chat, .cv-dialog).glass{background:rgba(16,16,20,.94)}
:root[data-theme="light"] .orbs .orb-wrap,:root[data-theme="light"] .lab-orbs .orb-wrap{opacity:.16}
/* los botones dentro de las zonas oscuras (portada, encabezados, chat, menú) conservan el estilo oscuro */
:root[data-theme="light"] :is(.hero, .st-hero, .chat, .menu, .leni-bubble, .cv-dialog) .btn{background:radial-gradient(120px circle at var(--mx) var(--my),rgba(var(--glow),.28),transparent 60%),linear-gradient(140deg,rgba(255,255,255,.13),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14);color:var(--ink);box-shadow:var(--spec),0 10px 30px -10px rgba(0,0,0,.8)}
:root[data-theme="light"] :is(.hero, .st-hero, .chat, .menu, .leni-bubble, .cv-dialog) .btn--solid{background:radial-gradient(120px circle at var(--mx) var(--my),#fff,#dfe6ff 70%);color:#050506;border-color:transparent}
/* todos los orbes decorativos, más suaves en claro */
:root[data-theme="light"] .orb{opacity:.2}
:root[data-theme="light"] .hero .orb{opacity:1}
/* dentro de las franjas oscuras, las tarjetas siguen siendo de vidrio oscuro */
:root[data-theme="light"] .st-dark :is(.glass, .tn){background:linear-gradient(140deg,rgba(255,255,255,.10),rgba(255,255,255,.035) 55%,rgba(255,255,255,.02));border-color:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 80px -30px rgba(0,0,0,.9)}