/* ============================================================
   Paleta Dracula compartida (dark por defecto) — oscarcode9.github.io
   Carga despues del <style> inline de cada pagina, asi que
   unifica la paleta en todas las paginas del sitio.
   ============================================================ */
:root {
  --primary: #bd93f9;
  --primary-dark: #8b6ce0;
  --primary-glow: rgba(189, 147, 249, 0.18);
  --accent: #ff79c6;
  --accent-blue: #8be9fd;
  --accent-purple: #bd93f9;
  --accent-green: #50fa7b;
  --accent-yellow: #f1fa8c;
  --accent-gold: #f1fa8c;
  --accent-orange: #ffb86c;
  --accent-pink: #ff79c6;
  --accent-red: #ff5555;
  --success: #50fa7b;
  --bg-dark: #282a36;
  --bg-card: #2f3041;
  --bg-code: #21222c;
  --bg-soft: #2f3041;
  --text-primary: #f8f8f2;
  --text-secondary: #c5c9dd;
  --text-muted: #8a8fa8;
  --border: rgba(248, 248, 242, 0.1);
  --gradient-1: linear-gradient(135deg, #bd93f9 0%, #ff79c6 100%);
}

/* Gradientes de texto fuera — igual que el index: color solido */
.post-title,
.stat-highlight .stat-number,
.summary-box .price,
.hero h1,
.brand-logo,
.kern-logo {
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ============================================================
   Tema light compartido — oscarcode9.github.io (todas las paginas)
   Light es el tema por defecto (dark si el dispositivo prefiere
   modo oscuro); [data-theme="light"] sobreescribe el dark.
   ============================================================ */

[data-theme="light"] {
  --primary: #7a3bdb;
  --primary-dark: #6423c4;
  --accent: #c13584;
  --accent-green: #0e8a5f;
  --accent-yellow: #b8860b;
  --accent-gold: #b8860b;
  --accent-orange: #c2410c;
  --accent-blue: #1d5fd6;
  --accent-purple: #7a3bdb;
  --success: #0e8a5f;
  --bg-dark: #f7f6fb;
  --bg-card: #ffffff;
  --bg-soft: #efecf7;
  --bg-code: #eceaf5;
  --text-primary: #282a36;
  --text-secondary: rgba(40, 42, 54, 0.82);
  --text-muted: rgba(40, 42, 54, 0.58);
  --border: rgba(40, 42, 54, 0.12);
  --primary-glow: rgba(122, 59, 219, 0.15);
  --accent-glow: rgba(193, 53, 132, 0.12);
  --nav-bg: rgba(255, 255, 255, 0.92);
  --sidebar-bg: rgba(255, 255, 255, 0.95);
  --hover-bg: rgba(40, 42, 54, 0.05);
  --soft-bg: rgba(40, 42, 54, 0.03);
  --badge-bg: rgba(40, 42, 54, 0.06);
  --clear-hover-bg: rgba(40, 42, 54, 0.06);
  --skeleton-shimmer: linear-gradient(90deg, rgba(40, 42, 54, 0.04) 25%, rgba(40, 42, 54, 0.08) 50%, rgba(40, 42, 54, 0.04) 75%);
}

/* Base Body & Layout */
[data-theme="light"] body {
  background-color: var(--bg-dark) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

/* Navbar / Materialize Sidenav */
[data-theme="light"] nav {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(40, 42, 54, 0.05) !important;
}

[data-theme="light"] nav .brand-logo,
[data-theme="light"] nav ul a,
[data-theme="light"] nav ul a i,
[data-theme="light"] nav .sidenav-trigger i {
  color: var(--text-primary) !important;
}

[data-theme="light"] .sidenav {
  background: #ffffff !important;
}

[data-theme="light"] .sidenav li > a,
[data-theme="light"] .sidenav li > a > i {
  color: var(--text-primary) !important;
}

/* Post Headers & Article Hero Banners */
[data-theme="light"] .post-header {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .post-header::before {
  opacity: 0.25 !important;
}

/* Headings & Text Elements */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .section-title,
[data-theme="light"] .post-subtitle {
  color: var(--text-primary) !important;
}

/* Gradient Titles in Light Mode */
[data-theme="light"] .post-title,
[data-theme="light"] h1.gradient-text,
[data-theme="light"] .section-title.gradient-text {
  color: var(--text-primary) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] label,
[data-theme="light"] .post-content {
  color: var(--text-primary);
}

[data-theme="light"] .post-meta,
[data-theme="light"] .post-meta span,
[data-theme="light"] .author-role,
[data-theme="light"] .text-secondary {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .back-link,
[data-theme="light"] .lang-toggle {
  color: #7a3bdb !important;
  background: rgba(40, 42, 54, 0.05);
}

[data-theme="light"] .back-link:hover,
[data-theme="light"] .lang-toggle:hover {
  background: rgba(40, 42, 54, 0.1);
  color: #6423c4 !important;
}

/* Cards & Containers */
[data-theme="light"] .card,
[data-theme="light"] .post-card,
[data-theme="light"] .skill-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .project-card,
[data-theme="light"] .experience-card,
[data-theme="light"] .education-card,
[data-theme="light"] .cert-card,
[data-theme="light"] .author-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .hero-post,
[data-theme="light"] .info-card,
[data-theme="light"] .demo-box,
[data-theme="light"] .video-caption {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(40, 42, 54, 0.06) !important;
}

[data-theme="light"] .card-title,
[data-theme="light"] .card-content,
[data-theme="light"] .skill-title,
[data-theme="light"] .skill-desc {
  color: var(--text-primary) !important;
}

/* Code Blocks, Terminals & Command Boxes */
[data-theme="light"] pre,
[data-theme="light"] .post-content pre {
  background-color: #f1f5f9 !important;
  color: #282a36 !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 1px 3px rgba(40, 42, 54, 0.05) !important;
}

[data-theme="light"] code,
[data-theme="light"] pre code,
[data-theme="light"] .post-content code {
  color: #282a36 !important;
  background-color: transparent;
}

[data-theme="light"] :not(pre) > code {
  background-color: rgba(40, 42, 54, 0.06) !important;
  color: #7a3bdb !important;
  border: 1px solid rgba(40, 42, 54, 0.1) !important;
}

[data-theme="light"] .terminal,
[data-theme="light"] .command-box,
[data-theme="light"] .cmd-box,
[data-theme="light"] .prompt-box,
[data-theme="light"] .code-block {
  background-color: #f8fafc !important;
  color: #282a36 !important;
  border: 1px solid var(--border) !important;
}

[data-theme="light"] .terminal-bar,
[data-theme="light"] .code-header,
[data-theme="light"] .screenshot-bar {
  background-color: #e2e8f0 !important;
  border-bottom: 1px solid var(--border) !important;
  color: #282a36 !important;
}

[data-theme="light"] .terminal-title,
[data-theme="light"] .code-label,
[data-theme="light"] .url-bar {
  color: #41455e !important;
  background-color: rgba(40, 42, 54, 0.06) !important;
}

[data-theme="light"] .t-cmd,
[data-theme="light"] .t-out {
  color: #282a36 !important;
}

/* Syntax Highlighting overrides for Light Mode */
[data-theme="light"] .token.comment,
[data-theme="light"] .token.prolog,
[data-theme="light"] .token.doctype,
[data-theme="light"] .token.cdata {
  color: #6d7187 !important;
}

[data-theme="light"] .token.punctuation {
  color: #41455e !important;
}

[data-theme="light"] .token.property,
[data-theme="light"] .token.tag,
[data-theme="light"] .token.boolean,
[data-theme="light"] .token.number,
[data-theme="light"] .token.constant,
[data-theme="light"] .token.symbol,
[data-theme="light"] .token.deleted {
  color: #d97706 !important;
}

[data-theme="light"] .token.selector,
[data-theme="light"] .token.attr-name,
[data-theme="light"] .token.string,
[data-theme="light"] .token.char,
[data-theme="light"] .token.builtin,
[data-theme="light"] .token.inserted {
  color: #0e8a5f !important;
}

[data-theme="light"] .token.operator,
[data-theme="light"] .token.entity,
[data-theme="light"] .token.url {
  color: #1d5fd6 !important;
}

[data-theme="light"] .token.atrule,
[data-theme="light"] .token.attr-value,
[data-theme="light"] .token.keyword {
  color: #7a3bdb !important;
}

[data-theme="light"] .token.function,
[data-theme="light"] .token.class-name {
  color: #1d5fd6 !important;
}

[data-theme="light"] .token.regex,
[data-theme="light"] .token.important,
[data-theme="light"] .token.variable {
  color: #dc2626 !important;
}

/* Callouts & Info Boxes */
[data-theme="light"] .callout,
[data-theme="light"] .tip-box,
[data-theme="light"] .summary-box,
[data-theme="light"] .highlight-box,
[data-theme="light"] .takeaways,
[data-theme="light"] .info-box,
[data-theme="light"] .warning-box,
[data-theme="light"] .danger-box,
[data-theme="light"] blockquote {
  background-color: #f8fafc !important;
  color: #282a36 !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .callout p,
[data-theme="light"] .tip-box p,
[data-theme="light"] .summary-box p,
[data-theme="light"] .highlight-box p,
[data-theme="light"] .takeaways p,
[data-theme="light"] .info-box p,
[data-theme="light"] blockquote p {
  color: #282a36 !important;
}

[data-theme="light"] .tip-box,
[data-theme="light"] .highlight-box.success {
  background-color: #f0fdf4 !important;
  border-left-color: #0e8a5f !important;
}

[data-theme="light"] .summary-box,
[data-theme="light"] .highlight-box.warning,
[data-theme="light"] .warning-box {
  background-color: #fffbeb !important;
  border-left-color: #f59e0b !important;
}

[data-theme="light"] .highlight-box.info,
[data-theme="light"] .info-box {
  background-color: #eff6ff !important;
  border-left-color: #3b82f6 !important;
}

/* Tables */
[data-theme="light"] table,
[data-theme="light"] .comparison-table,
[data-theme="light"] .diff-table {
  color: #282a36 !important;
  border-color: var(--border) !important;
}

[data-theme="light"] th,
[data-theme="light"] table th,
[data-theme="light"] .diff-table th {
  background-color: #e2e8f0 !important;
  color: #282a36 !important;
  border-bottom: 2px solid var(--border) !important;
}

[data-theme="light"] td,
[data-theme="light"] table td,
[data-theme="light"] .diff-table td {
  border-bottom: 1px solid var(--border) !important;
  color: #282a36 !important;
}

[data-theme="light"] tr:nth-child(even) td,
[data-theme="light"] table tr:nth-child(even) {
  background-color: rgba(40, 42, 54, 0.02) !important;
}

[data-theme="light"] tr:hover td {
  background-color: rgba(40, 42, 54, 0.05) !important;
}

/* Badges, Tags & Devicons */
[data-theme="light"] .post-tag,
[data-theme="light"] .tech-tag,
[data-theme="light"] .tech-chip,
[data-theme="light"] .tech-pill,
[data-theme="light"] .area-tag,
[data-theme="light"] .kern-badge,
[data-theme="light"] .ov-views-badge,
[data-theme="light"] .chip {
  background-color: rgba(40, 42, 54, 0.06) !important;
  color: #282a36 !important;
  border: 1px solid var(--border) !important;
}

[data-theme="light"] .devicon-express-original,
[data-theme="light"] .devicon-socketio-original {
  color: #282a36 !important;
}

[data-theme="light"] .featured-badge {
  background-color: #7a3bdb !important;
  color: #ffffff !important;
}

[data-theme="light"] .ov-views-badge {
  background-color: #e2e8f0 !important;
  color: #282a36 !important;
}

/* Skills Page & Sidebar */
[data-theme="light"] .skills-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border) !important;
}

[data-theme="light"] .search-box input,
[data-theme="light"] .skills-sidebar input {
  background-color: #ffffff !important;
  color: #282a36 !important;
  border: 1px solid var(--border) !important;
}

[data-theme="light"] .sidebar-item {
  color: var(--text-primary) !important;
}

[data-theme="light"] .sidebar-item:hover,
[data-theme="light"] .sidebar-item.active {
  background-color: rgba(189, 147, 249, 0.12) !important;
  color: #7a3bdb !important;
}

[data-theme="light"] .sidebar-item .count {
  background-color: rgba(40, 42, 54, 0.08) !important;
  color: #282a36 !important;
}

[data-theme="light"] .modal,
[data-theme="light"] .modal-content {
  background-color: #ffffff !important;
  color: #282a36 !important;
  border: 1px solid var(--border) !important;
}

[data-theme="light"] .modal-footer {
  background-color: #f8fafc !important;
}

/* Forms & Inputs */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  color: #282a36 !important;
  background-color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus {
  border-color: #7a3bdb !important;
  box-shadow: 0 0 0 2px rgba(122, 59, 219, 0.2) !important;
}

[data-theme="light"] .input-field label {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .dropdown-content {
  background-color: #ffffff !important;
}

[data-theme="light"] .dropdown-content li > a,
[data-theme="light"] .dropdown-content li > span {
  color: #282a36 !important;
}

/* Footer */
[data-theme="light"] footer,
[data-theme="light"] .page-footer {
  background-color: #f1f5f9 !important;
  color: #282a36 !important;
  border-top: 1px solid var(--border) !important;
}

[data-theme="light"] footer a,
[data-theme="light"] .page-footer a,
[data-theme="light"] .footer-copyright {
  color: var(--text-secondary) !important;
}

/* Hero Mascot / Visual Polish */
.hero-video {
  mix-blend-mode: normal;
}

[data-theme="light"] .status-pill {
  color: #0e8a5f !important;
  background: rgba(14, 138, 95, 0.08) !important;
  border-color: rgba(14, 138, 95, 0.3) !important;
}

[data-theme="light"] .status-dot {
  background: #0e8a5f !important;
  box-shadow: 0 0 8px rgba(14, 138, 95, 0.5) !important;
}

[data-theme="light"] .hero-image-wrapper {
  background: none !important;
  border-radius: 0 !important;
}

[data-theme="light"] .hero-video {
  mix-blend-mode: normal !important;
  filter: none !important;
}

[data-theme="light"] .hero-image-glow {
  background: transparent !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  filter: none !important;
}

[data-theme="light"] .hero-image-wrapper::after {
  background: radial-gradient(ellipse at center, rgba(40, 42, 54, 0.12) 0%, rgba(40, 42, 54, 0) 70%);
}

/* Specific Index.html Sections & Components Override for Light Mode */
[data-theme="light"] .about-section,
[data-theme="light"] .experience-section,
[data-theme="light"] .blog-section,
[data-theme="light"] .projects-section,
[data-theme="light"] .contact-section {
  background: var(--bg-dark) !important;
  background-image: none !important;
}

[data-theme="light"] .about-text p,
[data-theme="light"] .about-intro h3,
[data-theme="light"] .about-intro p,
[data-theme="light"] .timeline-role,
[data-theme="light"] .timeline-description,
[data-theme="light"] .timeline-highlights,
[data-theme="light"] .timeline-highlights li,
[data-theme="light"] .blog-item-title,
[data-theme="light"] .blog-item-excerpt {
  color: #282a36 !important;
}

[data-theme="light"] .about-love-section {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(40, 42, 54, 0.05) !important;
}

[data-theme="light"] .about-love-section h4 {
  color: #282a36 !important;
}

[data-theme="light"] .about-love-section p {
  color: #41455e !important;
}

[data-theme="light"] .about-love-section.ai-section {
  background: linear-gradient(135deg, rgba(122, 59, 219, 0.08) 0%, rgba(189, 147, 249, 0.08) 100%) !important;
  border-color: rgba(122, 59, 219, 0.25) !important;
}

[data-theme="light"] .fun-fact {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: #282a36 !important;
  box-shadow: 0 2px 8px rgba(40, 42, 54, 0.04) !important;
}

[data-theme="light"] .fun-fact span,
[data-theme="light"] .fun-fact p,
[data-theme="light"] .fun-fact i {
  color: #282a36 !important;
}

[data-theme="light"] .about-quote blockquote {
  background: #eff6ff !important;
  border-left: 3px solid #7a3bdb !important;
  color: #6423c4 !important;
}

[data-theme="light"] .timeline-content {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(40, 42, 54, 0.05) !important;
}

[data-theme="light"] .timeline-date {
  background: #e2e8f0 !important;
  color: #41455e !important;
}

[data-theme="light"] .skill-tag {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: #282a36 !important;
  box-shadow: 0 2px 6px rgba(40, 42, 54, 0.03) !important;
}

[data-theme="light"] .blog-item {
  border-bottom-color: var(--border) !important;
}

[data-theme="light"] .blog-item:hover {
  background: rgba(122, 59, 219, 0.06) !important;
}

[data-theme="light"] .company-highlight,
[data-theme="light"] .code-tag {
  color: #7a3bdb !important;
}

/* Article Hero & Special Card Overrides */
[data-theme="light"] .hero-post,
[data-theme="light"] .summary-card,
[data-theme="light"] .hero-shot {
  background: #ffffff !important;
  color: #282a36 !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(40, 42, 54, 0.05) !important;
}

[data-theme="light"] .hero-shot figcaption {
  background: #e2e8f0 !important;
  color: #41455e !important;
}

[data-theme="light"] .ascii-diagram {
  background-color: #f1f5f9 !important;
  color: #282a36 !important;
  border: 1px solid var(--border) !important;
}

[data-theme="light"] .tech-chip,
[data-theme="light"] .tech-badge,
[data-theme="light"] .blog-item-tag,
[data-theme="light"] .portfolio-tag,
[data-theme="light"] .note {
  background-color: rgba(122, 59, 219, 0.08) !important;
  color: #7a3bdb !important;
  border: 1px solid rgba(122, 59, 219, 0.2) !important;
}

[data-theme="light"] .tech-chip.ai-chip {
  background: var(--primary) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(122, 59, 219, 0.25) !important;
}

[data-theme="light"] .info-table th,
[data-theme="light"] .comparison-table th {
  background-color: #e2e8f0 !important;
  color: #282a36 !important;
  border-bottom: 2px solid var(--border) !important;
}

[data-theme="light"] .summary-card h3 {
  color: #d97706 !important;
}

[data-theme="light"] .callout strong {
  color: #0e8a5f !important;
}

[data-theme="light"] .video-shell {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(40, 42, 54, 0.06) !important;
}

[data-theme="light"] .video-caption {
  background: #f8fafc !important;
  color: #41455e !important;
}

/* All Blog Articles Specific Light Mode Fixes */
[data-theme="light"] .step-num,
[data-theme="light"] .step-number {
  background: #7a3bdb !important;
  color: #ffffff !important;
}

[data-theme="light"] .post-tag.ai,
[data-theme="light"] .post-tag.hot {
  background: #7a3bdb !important;
  color: #ffffff !important;
  border-color: #7a3bdb !important;
}

[data-theme="light"] .post-tag.linkedin {
  background: #0077b5 !important;
  color: #ffffff !important;
  border-color: #0077b5 !important;
}

[data-theme="light"] .post-tag.logistics,
[data-theme="light"] .post-tag.idea {
  background: rgba(122, 59, 219, 0.08) !important;
  color: #7a3bdb !important;
  border: 1px solid rgba(122, 59, 219, 0.25) !important;
}

[data-theme="light"] .lang-btn.active {
  background: rgba(122, 59, 219, 0.12) !important;
  color: #7a3bdb !important;
  border-color: rgba(122, 59, 219, 0.3) !important;
}

[data-theme="light"] .tag.purple {
  background: rgba(122, 59, 219, 0.1) !important;
  color: #7a3bdb !important;
  border: 1px solid rgba(122, 59, 219, 0.25) !important;
}

[data-theme="light"] .tag.blue {
  background: rgba(122, 59, 219, 0.1) !important;
  color: #7a3bdb !important;
  border: 1px solid rgba(122, 59, 219, 0.25) !important;
}

[data-theme="light"] .tag.orange {
  background: rgba(234, 88, 12, 0.1) !important;
  color: #ea580c !important;
  border: 1px solid rgba(234, 88, 12, 0.25) !important;
}

[data-theme="light"] .callout.blue {
  background: #eff6ff !important;
  border-left: 4px solid #1d5fd6 !important;
  color: #3730a3 !important;
}

[data-theme="light"] .callout.purple {
  background: #f5f3ff !important;
  border-left: 4px solid #7a3bdb !important;
  color: #4c1d95 !important;
}

[data-theme="light"] .callout.orange {
  background: #fff7ed !important;
  border-left: 4px solid #ea580c !important;
  color: #7c2d12 !important;
}

[data-theme="light"] .t-info {
  color: #7a3bdb !important;
}

[data-theme="light"] .dev-timeline::before {
  background: rgba(40, 42, 54, 0.15) !important;
}

[data-theme="light"] .ov-dot,
[data-theme="light"] .dot.green {
  background: #0e8a5f !important;
}

[data-theme="light"] .post-content pre code,
[data-theme="light"] pre code {
  color: #282a36 !important;
}

[data-theme="light"] .post-content h2,
[data-theme="light"] .post-content h3 {
  color: #282a36 !important;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}