/* ========================================================
   CÓDIGO AL TOQUE - ONE DARK PRO THEME & ESTILOS CORPORATIVOS
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* One Dark Pro Official Colors */
  --odp-bg: #282C34;
  --odp-darker: #21252B;
  --odp-card: #2C313C;
  --odp-card-border: #3E4451;
  --odp-fg: #ABB2BF;
  --odp-white: #ECEFF4;
  --odp-comment: #5C6370;

  --odp-blue: #61AFEF;
  --odp-purple: #C678DD;
  --odp-green: #98C379;
  --odp-yellow: #E5C07B;
  --odp-red: #E06C75;
  --odp-cyan: #56B6C2;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--odp-bg);
  color: var(--odp-fg);
}

body {
  overflow-x: hidden;
  background-color: var(--odp-bg);
  color: var(--odp-fg);
}

/* Custom Scrollbar - One Dark Pro */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #21252B;
}
::-webkit-scrollbar-thumb {
  background: #3E4451;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #61AFEF;
}

/* Background Grids */
.bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* One Dark Pro Card */
.glass-panel {
  background: rgba(33, 37, 43, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #3E4451;
}

.glass-card {
  background: #21252B;
  border: 1px solid #3E4451;
  transition: all 0.25s ease-in-out;
}

.glass-card:hover {
  border-color: #61AFEF;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
}

/* One Dark Pro Text Highlights */
.text-odp-blue { color: #61AFEF; }
.text-odp-purple { color: #C678DD; }
.text-odp-green { color: #98C379; }
.text-odp-yellow { color: #E5C07B; }
.text-odp-cyan { color: #56B6C2; }
.text-odp-red { color: #E06C75; }

.text-gradient-onedark {
  background: linear-gradient(135deg, #FFFFFF 0%, #61AFEF 50%, #C678DD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons One Dark Pro */
.btn-onedark-primary {
  background: #61AFEF;
  color: #21252B;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-onedark-primary:hover {
  background: #4FA0E0;
  box-shadow: 0 4px 16px rgba(97, 175, 239, 0.35);
  transform: translateY(-1px);
}

/* Terminal Window */
.terminal-window {
  background: #21252B;
  border: 1px solid #3E4451;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* Portfolio Card */
.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #3E4451;
  background: #21252B;
  transition: all 0.25s ease;
}

.portfolio-card:hover {
  border-color: #61AFEF;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.portfolio-card img {
  transition: transform 0.4s ease;
}

.portfolio-card:hover img {
  transform: scale(1.04);
}

/* Modal Overlay */
.modal-overlay {
  background-color: rgba(27, 30, 36, 0.88);
  backdrop-filter: blur(8px);
}

/* Tabs & Filter Pill */
.filter-btn.active {
  background: #61AFEF;
  color: #21252B;
  box-shadow: 0 2px 10px rgba(97, 175, 239, 0.3);
}