/* ===== CSS VARIABLES (Light / Dark) ===== */
:root {
  --bg-body:       #F7F2E9;
  --bg-content:    #ffffff;
  --bg-gallery:    #F3E6A2;
  --bg-card:       #fceea7;
  --bg-semester:   #7EA8C8;
  --bg-curriculum: #7EA8C8;
  --color-text:    #161942;
  --color-h1-bg:   #7EA8C8;
  --color-h1-text: #ffffff;
  --color-footer:  #040518;
  --slider-bg:     #C3E1F5;
  --slider-dot:    #F0BB6D;
  --background-blue1 : #7EA8C8;
  --background-blue2 : #7EA8C8;
  --transition:    0.35s ease;
  --bg-body1:      #7EA8C8; 
  --color-text1: #040518;
  --bg-career: #ffffff;
  --bg-home: #6FA7C4;
  --bg-gallery2: #fceea7;
  --bg-contact-gradient: linear-gradient(to bottom, #E3B654, #fff);
  --text-color: #040518;
  --color-footer1: #6FA7C4;
  --bg-detail-box: #7EA8C8;
  --color-h1-text1: #ffffff;
  --color-h1-text2: #040518;
  --bg-resaca1: #F3E6A2;
  --outline-resaca1: 2px solid #040518;
  --outline-resaca2: 1px solid #040518;
  --outline-resaca3: 1px solid #040518;
  --bg-resaca2: #F7F2E9;
  --color-resaca1: #040518;
}

body.dark-mode {
  --bg-body:       #161942;
  --bg-content:    #161942;
  --bg-gallery:    #161942;
  --bg-card:       #1e2250;
  --bg-semester:   #161942;
  --bg-curriculum: #161942;
  --color-text:    #ffffff;
  --color-h1-bg:   #78C0E6;
  --color-h1-text: #161942;
  --color-footer:  #02030d;
  --slider-bg:     #184274;
  --slider-dot:    #f1c40f;
  --background-blue1 : #78C0E6;
  --background-blue2 : #78C0E6;
  --color-text1: #ffffff;
  --bg-career: #161942;
  --bg-home: #161942;
  --bg-gallery2: #6FA7C4;
  --bg-contact-gradient: linear-gradient(to bottom, #7EA8C8, #fff);
  --text-color: #ffffff;
  --color-footer1 : #02030D;
  --bg-detail-box : #6FA7C4;
  --color-h1-text1 : #040518;
  --color-h1-text2: #fff;
  --bg-resaca1: #3D5E85;
  --outline-resaca1: 2px solid #5fb6df;
  --outline-resaca2: 1px solid #5fb6df;
  --outline-resaca3: 1px solid #5fb6df;
  --bg-resaca2: #040518;
  --color-resaca1: #fff;
}


/* ===== DARK MODE TOGGLE STYLING ===== */
.mode-toggle-container { 
  position: absolute; 
  top: 12px; 
  right: 20px; 
  z-index: 10001; 
  margin: 0; 
}

.switch { 
  position: relative; 
  display: inline-block; 
  width: 50px; 
  height: 26px; 
}

.switch input { 
  opacity: 0; 
  width: 0; 
  height: 0; 
}

.slider { 
  position: absolute; 
  cursor: pointer; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-color: var(--slider-bg); 
  transition: .4s; 
  border-radius: 30px; 
  display: flex; 
  align-items: center; 
  padding: 0 5px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
}

.slider:before { 
  position: absolute; 
  content: ""; 
  height: 20px; 
  width: 20px; 
  left: 3px; 
  bottom: 3px; 
  background-color: var(--slider-dot); 
  transition: .4s; 
  border-radius: 50%; 
  z-index: 2; 
}

input:checked + .slider { 
  background-color: #184274; 
}

input:checked + .slider:before { 
  transform: translateX(24px); 
  background-color: #f1c40f; 
}

.moon-icon { 
  font-size: 14px; 
  margin-left: auto; 
}

.star { 
  font-size: 12px; 
  opacity: 1; 
  z-index: 1; 
}

/* ===== APPLY DARK MODE TO BODY ===== */
body {
  background-color: var(--bg-body);
  transition: background-color var(--transition);
}

/* Navbar controls - lang + darkmode */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
}