/* styles.css */
:root {
  --celeste-vatca: #1b99c5;
  --celeste-vatca-oscuro: #14648c; 
  --celeste-vatca-claro: #90e0ef; 
}

.text-celeste-vatca { color: var(--celeste-vatca); }
.bg-celeste-vatca { background-color: var(--celeste-vatca); }
.border-celeste-vatca { border-color: var(--celeste-vatca); }
.hover-text-celeste-vatca:hover { color: var(--celeste-vatca); }
.hover-bg-celeste-vatca:hover { background-color: var(--celeste-vatca); }
.hover-border-celeste-vatca:hover { border-color: var(--celeste-vatca); }

.section-title {
  border-bottom: 2px solid var(--celeste-vatca);
}

.subsection-link {
  color: var(--celeste-vatca);
}
.subsection-link:hover {
  text-decoration: underline;
  color: var(--celeste-vatca-oscuro); 
}

.top-controller-rank {
  color: var(--celeste-vatca);
}

.bg-navbar {
  background-color: #2779d1; 
}

.bg-navbar-submenu {
  background-color: var(--celeste-vatca);
}

.hover-bg-navbar-submenu:hover {
  background-color: var(--celeste-vatca-oscuro);
}

.bg-join-us {
  background-color: var(--celeste-vatca);
}
.hover-bg-join-us:hover {
  background-color: var(--celeste-vatca-oscuro);
}

.bg-logout {
  background-color: #dc3545; 
}
.hover-bg-logout:hover {
  background-color: #c82333; 
}

.border-active-stations {
  border-color: var(--celeste-vatca);
}

.text-live-radar {
  color: var(--celeste-vatca-claro); 
}

.subsection-title {
  color: var(--celeste-vatca);
}

.submenu {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-section {
  background: linear-gradient(rgba(13, 27, 42, 0.8), rgba(13, 27, 42, 0.9)), url('https://via.placeholder.com/1200x400/0d1b2a/1b99c5?text=VATCA+Skyline') no-repeat center center/cover; 
}

.event-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.event-date {
  background-color: var(--celeste-vatca);
  color: white;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  display: inline-block;
  margin-bottom: 10px;
}

.event-badge {
  background-color: #e0f7fa;
  color: var(--celeste-vatca);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
}