/* ==========================================================================
   1. CORE ARCHITECTURE & LAYOUT RESET
   ========================================================================== */
html {
  /* Fallback color to prevent "white gutter" flash on Windows scrollbars */
  background-color: var(--bg-body); 
  
  /* Desktop Strategy: HTML handles the scrollbar. 
     Sets constrained context for the document. */
  width: 100%;
  height: 100%; 
  overflow-x: hidden; 
}

body {
  /* Transparency required for z-index: -1 background visibility */
  background-color: transparent;
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
  transition: color 0.3s ease;
  position: relative;

  /* DESKTOP CRITICAL: 
     'overflow: visible' prevents the body from generating a second scrollbar instance. 
     Scroll is delegated entirely to the root element. */
  overflow: visible; 
  
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ==========================================================================
   2. SCROLLBAR CUSTOMIZATION (Windows Integration)
   ========================================================================== */
/* Unifies scrollbar appearance with the dark theme to mask the track area */
html::-webkit-scrollbar, 
body::-webkit-scrollbar,
::-webkit-scrollbar { 
  width: 12px;
  background-color: var(--bg-body);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  border: 3px solid var(--bg-body); /* Creates padding effect inside the track */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary);
}

/* ==========================================================================
   3. DESIGN TOKENS (CSS VARIABLES)
   ========================================================================== */
:root {
  /* Theme: Dark (Default) */
  --bg-body: #050507;
  --bg-card: rgba(20, 20, 25, 0.75);
  --bg-input: rgba(255, 255, 255, 0.08);
  
  --primary: #8b5cf6;       
  --primary-hover: #7c3aed;
  --primary-glow: rgba(139, 92, 246, 0.3);
  
  --text-main: #ffffff;      
  --text-secondary: #cbd5e1; 
  --text-placeholder: rgba(255, 255, 255, 0.6);
  --border-color: rgba(255, 255, 255, 0.1);
  
  --radius: 20px;
}

/* Theme: Light */
body.light-mode {
  --bg-body: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-input: #ffffff;
  
  --primary: #6d28d9;
  --primary-hover: #5b21b6;
  --primary-glow: rgba(109, 40, 217, 0.15);
  
  --text-main: #0f172a;      
  --text-secondary: #475569; 
  --text-placeholder: #94a3b8;
  --border-color: rgba(0,0,0,0.1);
}

/* ==========================================================================
   4. TYPOGRAPHY & SECTIONS
   ========================================================================== */
h1, h2, h3, h4, h5 { 
  font-family: 'Outfit', sans-serif; 
  letter-spacing: -0.02em; 
  color: var(--text-main); 
}

section { 
  padding: 6rem 0; 
  border-bottom: 1px solid var(--border-color); 
  position: relative; 
  z-index: 2; /* Content layer above background */
}

header { 
  position: relative; 
  z-index: 2; 
}

/* ==========================================================================
   5. BACKGROUND LAYER (Canvas)
   ========================================================================== */
.background-animation {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; 
  height: 100vh;
  
  /* Gradient logic */
  background: linear-gradient(-45deg, #050507, #1a0b2e, #0f172a, #000000);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  
  /* Layering: Sits behind content, visible through transparent body */
  z-index: -1; 
}

body.light-mode .background-animation {
  background: linear-gradient(-45deg, #f1f5f9, #e0e7ff, #f3e8ff, #ffffff);
  background-size: 400% 400%;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==========================================================================
   6. UI COMPONENTS
   ========================================================================== */
/* -- Navbar (Glassmorphism) -- */
.navbar {
  background: rgba(5, 5, 7, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  padding: 1.2rem 0;
  z-index: 1000;
  width: 100%;
}
body.light-mode .navbar { background: rgba(255, 255, 255, 0.85); }

.navbar-brand { color: var(--text-main) !important; transition: color 0.3s ease; }
.nav-link { color: var(--text-secondary) !important; font-weight: 500; margin: 0 0.5rem; transition: color 0.3s; }
.nav-link:hover { color: var(--primary) !important; }
.navbar-toggler-icon-custom { color: var(--text-main); font-size: 1.5rem; }

/* -- Cards -- */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 2.5rem;
  height: 100%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.glass-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px -10px var(--primary-glow);
}

/* -- Buttons -- */
.btn-primary-glow {
  background: var(--primary);
  color: white !important;
  border: none;
  padding: 0.8rem 1.8rem;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 10px 20px -5px var(--primary-glow);
  transition: 0.3s;
}
.btn-primary-glow:hover { background: var(--primary-hover); transform: translateY(-2px); }

.btn-outline-glow {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.8rem 1.8rem;
  border-radius: 12px;
  font-weight: 600;
  transition: 0.3s;
}
.btn-outline-glow:hover { border-color: var(--primary); color: var(--primary); }

/* -- Forms -- */
.form-control {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 1rem;
  border-radius: 12px;
}
.form-control:focus {
  background: var(--bg-input);
  border-color: var(--primary);
  color: var(--text-main);
  box-shadow: 0 0 0 4px var(--primary-glow);
}
.form-control::placeholder { color: var(--text-placeholder) !important; opacity: 1; }

/* -- Profile Image (Interactive) -- */
.profile-img-container { 
  position: relative; padding: 1rem; display: inline-block; width: 100%; max-width: 410px; cursor: pointer; 
}
.profile-img {
  border-radius: 24px; border: 1px solid var(--border-color); box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  object-fit: cover; width: 100%; max-width: 380px;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease-in-out;
  transform: rotate(2deg);
}
body.light-mode .profile-img { transform: rotate(-2deg); }
.profile-img-container:hover .profile-img { transform: rotate(0deg) !important; }

/* Image Swap Logic */
.profile-img-dark { position: relative; z-index: 1; opacity: 1; }
.profile-img-light { position: absolute; top: 1rem; left: 0; right: 0; margin: 0 auto; z-index: 2; opacity: 0; pointer-events: none; }
body.light-mode .profile-img-dark { opacity: 0; pointer-events: none; }
body.light-mode .profile-img-light { opacity: 1; pointer-events: auto; }

/* -- Footer & Utils -- */
footer { border-top: 1px solid var(--border-color); position: relative; z-index: 2; }
.text-dynamic-main { color: var(--text-main) !important; }
.text-dynamic-sec { color: var(--text-secondary) !important; }
.grecaptcha-badge { visibility: hidden; opacity: 0; }

/* ==========================================================================
   7. MOBILE OVERRIDES (@media max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
  
  /* MOBILE CRITICAL: 
     Override Desktop's 'visible' overflow. 
     Forces a hard horizontal cut to prevent Viewport Zoom-out on small screens. */
  html, body {
    overflow-x: hidden !important; 
    width: 100%;
    height: auto;
    position: relative;
  }

  /* Layout Adjustments */
  header#inicio {
    display: block !important;
    padding-top: 1rem !important; /* Visual offset to clear Navbar */
    padding-bottom: 3rem;
    height: auto !important;
    min-height: auto !important;
    text-align: center; /* Center-aligns intro for mobile UX */
  }
  
  header#inicio .d-flex { justify-content: center; }
  
  /* Reset grid gutters to prevent horizontal spill */
  .row.g-5 { --bs-gutter-x: 0; --bs-gutter-y: 1.5rem; }
  
  /* Typography Scaling */
  h1.display-3 { font-size: 2.2rem; word-wrap: break-word; margin-bottom: 1rem !important; }
  .lead { font-size: 1rem; margin-bottom: 2rem !important; }
  
  /* Image sizing */
  .profile-img-container { max-width: 260px; margin: 0 auto 1.5rem auto; overflow: visible; }

  /* COMPONENT: Theme Toggle Position Fix 
     Isolates the button from the flow to prevent overlapping */
  #theme-toggle {
    margin-top: 1.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;      
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
  }
}