/* ===== Modo claro compartido — index + blog + casos (idéntico en todo) ===== */

/* Botón sol / luna */
.topbar-right{display:flex;align-items:center;gap:12px;}
#theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;flex:0 0 auto;margin-left:8px;}
#theme-toggle:hover{color:var(--text);border-color:var(--accent2);}
#theme-toggle svg{width:18px;height:18px;fill:currentColor;display:block;}
#theme-toggle .moon{display:none;}
html[data-theme="light"] #theme-toggle .sun{display:none;}
html[data-theme="light"] #theme-toggle .moon{display:block;}

/* Variables en claro */
html[data-theme="light"]{
  --bg:#ffffff; --bg2:#faf7ff; --bg3:#f3eefb; --card:#ffffff; --border:#ece7f7;
  --text:#17131f; --soft:#2c2a3a; --muted:#4f5266; --white:#17131f;
  --shadow:0 18px 44px rgba(124,99,255,.12);
}

/* Fondo blanco con aurora violeta/rosa en movimiento (notorio) */
html[data-theme="light"] body{background:#ffffff !important;}
html[data-theme="light"] body::before{
  inset:-35% !important; opacity:1 !important;
  background:
    radial-gradient(circle at 15% 18%, rgba(167,139,250,.34), transparent 42%),
    radial-gradient(circle at 82% 8%, rgba(236,72,153,.26), transparent 40%),
    radial-gradient(circle at 72% 88%, rgba(108,99,255,.24), transparent 44%),
    radial-gradient(circle at 32% 78%, rgba(236,72,153,.15), transparent 42%),
    linear-gradient(180deg,#ffffff,#faf6ff 55%,#ffffff) !important;
  filter:blur(30px) !important;
  animation:auroraLight 11s ease-in-out infinite alternate !important;
}
@keyframes auroraLight{
  0%{transform:translate3d(-7%,-3%,0) scale(1.05) rotate(-1deg);}
  50%{transform:translate3d(7%,3%,0) scale(1.14) rotate(1.5deg);}
  100%{transform:translate3d(-4%,6%,0) scale(1.07) rotate(-.5deg);}
}
html[data-theme="light"] body::after{
  background-image:
    linear-gradient(rgba(40,40,90,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,40,90,.05) 1px, transparent 1px);
}

/* Barras superiores */
html[data-theme="light"] nav{background:rgba(255,255,255,.85) !important;border-bottom-color:#ece7f7 !important;}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.82) !important;border-bottom-color:#ece7f7 !important;}

/* Secciones con fondo oscuro fijo -> transparentes (que se vea el blanco) */
html[data-theme="light"] section{background:transparent !important;}
html[data-theme="light"] #sobre-mi,
html[data-theme="light"] #servicios,
html[data-theme="light"] #tecnologias,
html[data-theme="light"] #experiencia,
html[data-theme="light"] #portfolio,
html[data-theme="light"] #blog,
html[data-theme="light"] #piroclastos,
html[data-theme="light"] #contacto{background:transparent !important;}

/* Texto que va SOBRE color -> blanco */
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .form-submit,
html[data-theme="light"] .soon-badge,
html[data-theme="light"] .portfolio-label{color:#fff !important;}

/* Superficies -> tarjetas blancas (index + blog + casos) */
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .card,
html[data-theme="light"] .timeline-item,
html[data-theme="light"] .portfolio-card,
html[data-theme="light"] .contacto-box,
html[data-theme="light"] .contacto-link,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .blog-note,
html[data-theme="light"] .spotify-info,
html[data-theme="light"] .track-card,
html[data-theme="light"] .testi-card,
html[data-theme="light"] .kpi,
html[data-theme="light"] .chart,
html[data-theme="light"] .cta,
html[data-theme="light"] table.data,
html[data-theme="light"] figure img{background:#ffffff !important;border-color:#ece7f7 !important;box-shadow:0 14px 36px rgba(124,99,255,.10) !important;}

/* chips / tags / pills / botones sutiles */
html[data-theme="light"] .mini-tags span,
html[data-theme="light"] .portfolio-tech,
html[data-theme="light"] .tag,
html[data-theme="light"] .blog-meta span,
html[data-theme="light"] .tech-item,
html[data-theme="light"] .service-icon,
html[data-theme="light"] .btn-ghost{background:#f4effc !important;border-color:#ece7f7 !important;}
html[data-theme="light"] .bar-track{background:#efe9fa !important;}
html[data-theme="light"] .callout{background:rgba(108,99,255,.07) !important;}

/* Divisores */
html[data-theme="light"] .info-row{border-bottom-color:#efe9fa !important;}
html[data-theme="light"] .hero-stats{border-top-color:#ece7f7 !important;}

/* Formulario */
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .form-group select{background:#ffffff !important;border-color:#e6def5 !important;color:#1a1526 !important;}

/* Footer */
html[data-theme="light"] footer{background:#faf7ff !important;border-top-color:#ece7f7 !important;}

/* Textos fijos en gris claro -> oscuro legible (blog/casos) */
html[data-theme="light"] article p,
html[data-theme="light"] article li,
html[data-theme="light"] table.data td{color:#2c2a3a !important;}
html[data-theme="light"] table.data td:first-child,
html[data-theme="light"] article strong{color:#1a1526 !important;}

/* Los bloques de código se quedan oscuros a propósito */