/* ===========================
   GLASS THEME — dark + light
   Rollback: quitar <link rel="stylesheet" href="css/glass.css"> de index.html
   =========================== */

/* ── STATS — Dark ── */
[data-theme="dark"] .stat-card {
  background: rgba(10, 31, 61, 0.40) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-color: rgba(0, 170, 255, 0.15) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .stat-card:hover {
  border-color: rgba(0, 200, 255, 0.45) !important;
  box-shadow:
    0 8px 40px rgba(0, 100, 200, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ── STATS — Light ── */
[data-theme="light"] .stat-card {
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-color: rgba(180, 215, 255, 0.75) !important;
  box-shadow:
    0 4px 28px rgba(80, 140, 220, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(100, 160, 240, 0.12) !important;
}
[data-theme="light"] .stat-card:hover {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(0, 130, 230, 0.45) !important;
  box-shadow:
    0 8px 40px rgba(0, 100, 200, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
[data-theme="light"] .stat-number { color: #0066cc !important; }
[data-theme="light"] .stat-label  { color: #5a7898 !important; }

/* ── CV button — light ── */
[data-theme="light"] .btn-ghost {
  color: #4a6080 !important;
  border-color: rgba(0, 100, 200, 0.22) !important;
}
[data-theme="light"] .btn-ghost:hover {
  border-color: #0088ee !important;
  color: #0066cc !important;
}
[data-theme="dark"] .timeline-content,
[data-theme="dark"] .skill-category {
  background: rgba(10, 31, 61, 0.35) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-color: rgba(0, 170, 255, 0.18) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .timeline-content:hover,
[data-theme="dark"] .skill-category:hover {
  background: rgba(10, 31, 61, 0.50) !important;
  border-color: rgba(0, 170, 255, 0.45) !important;
  box-shadow:
    0 8px 40px rgba(0, 100, 200, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .timeline-content--current {
  background: rgba(10, 31, 61, 0.42) !important;
  border-color: rgba(0, 200, 255, 0.28) !important;
}

[data-theme="dark"] .chip {
  background: rgba(10, 31, 61, 0.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(0, 170, 255, 0.20) !important;
}

[data-theme="dark"] .tag {
  background: rgba(0, 100, 200, 0.20) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(0, 170, 255, 0.35) !important;
}

/* ── LIGHT MODE ────────────────────────────────────────────────────────── */

/* Page background */
[data-theme="light"] body {
  background: #dce8f5 !important;
  background-image:
    radial-gradient(ellipse 60% 45% at 75% 14%,
      rgba(100, 180, 255, 0.30) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 10% 80%,
      rgba(160, 210, 255, 0.20) 0%, transparent 70%) !important;
  color: #1a2a42 !important;
}

/* Navbar */
[data-theme="light"] #navbar {
  background: rgba(220, 235, 255, 0.65) !important;
  border-color: rgba(100, 160, 230, 0.30) !important;
  box-shadow: 0 4px 32px rgba(80, 140, 220, 0.18) !important;
}

[data-theme="light"] .nav-links a   { color: #4a6080 !important; }
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active { color: #0066cc !important; }

[data-theme="light"] .nav-logo { color: #1a2a42 !important; }
[data-theme="light"] .nav-logo::before { background: #0088ee !important; box-shadow: 0 0 8px #0088ee !important; }

[data-theme="light"] .lang-btn {
  border-color: rgba(80, 140, 220, 0.35) !important;
  color: #4a6080 !important;
}
[data-theme="light"] .lang-btn:hover {
  background: rgba(0, 120, 220, 0.10) !important;
  border-color: #0088ee !important;
  color: #0066cc !important;
}
[data-theme="light"] .nav-burger {
  border-color: rgba(80, 140, 220, 0.35) !important;
}
[data-theme="light"] .nav-burger span {
  background: #4a6080 !important;
}
[data-theme="light"] .nav-burger:hover {
  background: rgba(0, 120, 220, 0.10) !important;
  border-color: #0088ee !important;
}
[data-theme="light"] .nav-burger:hover span {
  background: #0066cc !important;
}

/* Sections */
[data-theme="light"] .section-label-num { color: #0077dd !important; }
[data-theme="light"] .section-label-text { color: #6a82a0 !important; }
[data-theme="light"] .section-label-line { background: rgba(80, 130, 200, 0.25) !important; }

[data-theme="light"] .text-muted,
[data-theme="light"] [style*="color:#8892b0"],
[data-theme="light"] p { color: #4a5e78 !important; }

[data-theme="light"] .timeline-period { color: #0077dd !important; }
[data-theme="light"] .timeline-role   { color: #111d30 !important; }
[data-theme="light"] .timeline-company { color: #0077dd !important; }
[data-theme="light"] .timeline-desc   { color: #4a5e78 !important; }

/* Cards */
[data-theme="light"] .timeline-content,
[data-theme="light"] .skill-category {
  background: rgba(210, 228, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(140, 190, 245, 0.60) !important;
  box-shadow:
    0 4px 28px rgba(80, 140, 220, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
  color: #1a2a42 !important;
}

[data-theme="light"] .timeline-content:hover,
[data-theme="light"] .skill-category:hover {
  background: rgba(210, 228, 255, 0.72) !important;
  border-color: rgba(0, 120, 220, 0.45) !important;
  box-shadow:
    0 8px 40px rgba(0, 100, 200, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
}

[data-theme="light"] .timeline-content--current {
  background: rgba(200, 222, 255, 0.62) !important;
  border-color: rgba(0, 150, 230, 0.40) !important;
}

[data-theme="light"] .about-card {
  background: rgba(210, 228, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(140, 190, 245, 0.60) !important;
}
[data-theme="light"] .timeline-expand-section { color: #0077dd !important; }
[data-theme="light"] .timeline-expand-list li { color: #4a5e78 !important; }
[data-theme="light"] .timeline-expand-list li::before { color: #0088ee !important; }

/* Tags */
[data-theme="light"] .tag {
  background: rgba(0, 110, 210, 0.10) !important;
  border-color: rgba(0, 140, 240, 0.35) !important;
  color: #005bb5 !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Chips */
[data-theme="light"] .chip {
  background: rgba(255, 255, 255, 0.60) !important;
  border-color: rgba(100, 170, 240, 0.45) !important;
  color: #1a2a42 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Btn expand */
[data-theme="light"] .btn-expand {
  color: #7040cc !important;
  border-color: rgba(130, 80, 220, 0.45) !important;
  background: rgba(130, 80, 220, 0.08) !important;
}
[data-theme="light"] .btn-expand:hover {
  background: rgba(130, 80, 220, 0.18) !important;
}

/* Skill titles */
[data-theme="light"] .skill-cat-title {
  color: #0077dd !important;
  border-bottom-color: rgba(100, 160, 220, 0.25) !important;
}
[data-theme="light"] .skill-item { color: #1a2a42 !important; }

/* Timeline dots & line */
[data-theme="light"] .timeline::before { background: rgba(0, 100, 200, 0.15) !important; }
[data-theme="light"] .timeline-line {
  background: linear-gradient(to bottom,
    transparent 0%,
    #0088ee 10%,
    #0088ee 90%,
    transparent 100%) !important;
  box-shadow:
    0 0 6px 1px rgba(0, 150, 255, 0.5),
    0 0 18px 3px rgba(0, 120, 240, 0.25) !important;
}
[data-theme="light"] .timeline-dot {
  background: #dce8f5 !important;
  border-color: rgba(0, 100, 200, 0.25) !important;
}
[data-theme="light"] .timeline-item.dot-active .timeline-dot {
  background: #0088ee !important;
  border-color: #0088ee !important;
  box-shadow:
    0 0 0 4px rgba(0, 140, 240, 0.18),
    0 0 12px 4px rgba(0, 140, 240, 0.45),
    0 0 28px 8px rgba(0, 120, 220, 0.18) !important;
}

/* Contact rows */
[data-theme="light"] .contact-row {
  border-bottom-color: rgba(0, 100, 200, 0.15) !important;
  color: #4a5e78 !important;
}
[data-theme="light"] .contact-rows .contact-row:first-child {
  border-top-color: rgba(0, 100, 200, 0.15) !important;
}
[data-theme="light"] .contact-row:hover { color: #111d30 !important; }
[data-theme="light"] .contact-row-label { color: rgba(0, 80, 160, 0.55) !important; }
[data-theme="light"] .contact-row-icon  { color: #6a8fb0 !important; }
[data-theme="light"] .contact-row:hover .contact-row-icon { color: #0077dd !important; }
[data-theme="light"] .contact-row-arrow { color: rgba(0, 80, 160, 0.35) !important; }
[data-theme="light"] .contact-row:hover .contact-row-arrow { color: #0077dd !important; }

/* Footer */
[data-theme="light"] .footer-bar {
  border-top-color: rgba(0, 100, 200, 0.15) !important;
}
[data-theme="light"] .footer-name,
[data-theme="light"] .footer-role { color: #6a82a0 !important; }

/* Hero name: reset gradient clip y usar color sólido en light */
[data-theme="light"] .hero-name {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #0a1f3d !important;
  color: #0a1f3d !important;
}
[data-theme="light"] .hero-greeting { color: #0077dd !important; }
[data-theme="light"] .typed-cursor   { color: #0077dd !important; }

[data-theme="light"] .btn-outline {
  color: #1a2a42 !important;
  border-color: rgba(0, 100, 200, 0.30) !important;
}
[data-theme="light"] .btn-outline:hover {
  border-color: #0088ee !important;
  color: #0066cc !important;
}

[data-theme="light"] .hero-socials a {
  border-color: rgba(0, 100, 200, 0.25) !important;
  color: #4a6080 !important;
}
[data-theme="light"] .hero-socials a:hover {
  border-color: #0088ee !important;
  color: #0066cc !important;
}

/* About section heading */
[data-theme="light"] .about-big-title { color: #111d30 !important; }
[data-theme="light"] .about-hobbies h4 { color: #0077dd !important; }

/* Scroll progress */
[data-theme="light"] #scroll-progress {
  background: linear-gradient(90deg, #0055aa, #0099ee) !important;
  box-shadow:
    0 0 6px rgba(0, 160, 255, 0.7),
    0 0 18px rgba(0, 140, 255, 0.4) !important;
}

/* Section number & about card bg */
[data-theme="light"] .about-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(180, 210, 245, 0.70) !important;
}

/* Skill bars */
[data-theme="light"] .skill-bar { background: rgba(0, 100, 200, 0.12) !important; }
[data-theme="light"] .skill-bar-fill {
  background: linear-gradient(90deg, #0055aa, #0099ee) !important;
}

/* Burger menu — light mode */
[data-theme="light"] .nav-burger span {
  background: #1a2a42 !important;
}

[data-theme="light"] .nav-links.open {
  background: rgba(220, 235, 255, 0.82) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

[data-theme="light"] .nav-links.open li + li {
  border-top-color: rgba(0, 100, 200, 0.15) !important;
}

[data-theme="light"] .nav-links.open a {
  color: #1a2a42 !important;
}

[data-theme="light"] .nav-links.open a:hover {
  color: #0066cc !important;
}
[data-theme="light"] #theme-icon-moon { display: none !important; }
[data-theme="light"] #theme-icon-sun  { display: inline !important; }

/* Skill logos: dark blue tint in light mode */
[data-theme="light"] .skill-logo {
  filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(800%) hue-rotate(195deg) brightness(80%) !important;
  opacity: 0.85 !important;
}
[data-theme="light"] .skill-logo--color {
  filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(800%) hue-rotate(195deg) brightness(80%) !important;
  opacity: 0.85 !important;
}
[data-theme="light"] .company-logo--bg {
  filter: brightness(0) !important;
  opacity: 0.06 !important;
}
[data-theme="light"] .timeline-content:hover .company-logo--bg { opacity: 0.12 !important; }

/* Gears */
[data-theme="light"] .gear { fill: rgba(0, 120, 200, 0.06) !important; }

/* Server logos: azul petróleo en light mode */
[data-theme="light"] .server-logo {
  filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(800%) hue-rotate(195deg) brightness(70%) !important;
  opacity: 0.9 !important;
}

/* Tooltip — light mode */
[data-theme="light"] .skill-tooltip-wrap::after {
  background: rgba(220, 235, 255, 0.95) !important;
  border-color: rgba(0, 120, 220, 0.30) !important;
  color: #1a2a42 !important;
}