/* ===============
   Bakasta Mu — CSS Optimizado
   =============== */

:root {
  --bakasta-dark-gray: #4B524D;
  --bakasta-green-light: #69AE7E;
  --bakasta-black-green: #282b28;
  --bakasta-green: #36864B;
  --bakasta-gray-light: #CCD5CF;
  --bakasta-green-dark: #28382C;
  --bakasta-black-font-green: #212421;
  
  /* Bootstrap overrides */
  --bs-primary: var(--bakasta-green);
  --bs-secondary: var(--bakasta-green-light);
  --bs-dark: var(--bakasta-black-green);
  --bs-dark-font: var(--bakasta-black-font-green);
  --bs-light: var(--bakasta-gray-light);
}

/* Base & Header */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background-color: var(--bs-dark-font);
  color: var(--bakasta-gray-light);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-top: 60px; /* Account for fixed navbar height */
}

/* Prevent horizontal overflow */
* {
  box-sizing: border-box;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 15px;
  overflow-x: hidden;
}

.container-fluid {
  max-width: 100%;
  overflow-x: hidden;
}

/* Eliminar subrayado de todos los enlaces */
a {
  text-decoration: none !important;
  color: var(--bakasta-green);
}

a:hover {
  text-decoration: none !important;
}

/* Info page table styles - Solo se usan en info.html */
.info-page .table {
  background-color: #282B28 !important;
  color: #ffffff !important;
}

.info-page .table td,
.info-page .table th {
  background-color: #282B28 !important;
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
}

.info-page .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.info-page .table-secondary {
  background-color: var(--bakasta-green-dark) !important;
  color: #ffffff !important;
}

.info-page .table strong {
  color: #ffffff !important;
}

.info-page .table code {
  color: var(--bakasta-green-light) !important;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Rankings page styles - Solo se usan en rankings.html */
.rankings-page .rankings-main-card {
  background: var(--bakasta-black-green);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--bakasta-green-dark);
}

.rankings-page .rankings-tabs {
  background: transparent;
  border-radius: 0;
  padding: 2rem 0;
  box-shadow: none;
  margin-bottom: 2rem;
}

.rankings-page .nav-tabs {
  border: none;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.rankings-page .nav-tabs .nav-link {
  border: 2px solid var(--bakasta-green-dark);
  border-radius: 12px;
  color: var(--bakasta-gray-light);
  font-weight: 700;
  padding: 1rem 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(145deg, var(--bakasta-black-green), var(--bakasta-dark-gray));
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rankings-page .nav-tabs .nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(105, 174, 126, 0.2), transparent);
  transition: left 0.5s ease;
}

.rankings-page .nav-tabs .nav-link:hover {
  border-color: var(--bakasta-green);
  color: var(--bakasta-green-light);
  background: linear-gradient(145deg, var(--bakasta-green-dark), var(--bakasta-black-green));
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(105, 174, 126, 0.2);
}

.rankings-page .nav-tabs .nav-link:hover::before {
  left: 100%;
}

.rankings-page .nav-tabs .nav-link.active {
  border-color: var(--bakasta-green-light);
  color: #ffffff;
  background: linear-gradient(145deg, var(--bakasta-green), var(--bakasta-green-light));
  transform: scale(1.05);
  box-shadow: 
    0 8px 25px rgba(105, 174, 126, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3);
}

.rankings-page .class-filters {
  background: transparent;
  border-radius: 0;
  padding: 2rem 0;
  box-shadow: none;
  margin-bottom: 2rem;
}

.rankings-page .class-filters .d-flex {
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.rankings-page .class-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 12px;
  width: 100px;
  height: 100px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(145deg, var(--bakasta-dark-gray), var(--bakasta-black-green));
  border: 3px solid var(--bakasta-green-dark);
  color: var(--bakasta-gray-light);
  position: relative;
  overflow: visible;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rankings-page .class-filter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent, rgba(105, 174, 126, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rankings-page .class-filter:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(105, 174, 126, 0.2);
  border-color: var(--bakasta-green);
  background: linear-gradient(145deg, var(--bakasta-green-dark), var(--bakasta-dark-gray));
}

.rankings-page .class-filter:hover::before {
  opacity: 1;
}

.rankings-page .class-filter.active {
  background: linear-gradient(145deg, var(--bakasta-green), var(--bakasta-green-light));
  border-color: var(--bakasta-green-light);
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 
    0 8px 25px rgba(105, 174, 126, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3);
}

.rankings-page .class-filter.active::before {
  opacity: 1;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.rankings-page .class-filter .class-icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  z-index: 2;
  position: relative;
}

.rankings-page .class-filter .class-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.rankings-page .class-filter span {
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  z-index: 2;
  position: relative;
  line-height: 1.1;
  white-space: nowrap;
  overflow: visible;
  max-width: 90px;
  word-break: break-word;
}

.rankings-page .rankings-table-container {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.rankings-page .rankings-table {
  background-color: var(--bakasta-black-green) !important;
  color: var(--bakasta-gray-light) !important;
}

.rankings-page .rankings-table th {
  background-color: var(--bakasta-green-dark) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-bottom: none;
  padding: 1rem 0.75rem;
}

.rankings-page .rankings-table td {
  background-color: var(--bakasta-black-green) !important;
  color: var(--bakasta-gray-light) !important;
  border-color: var(--bakasta-green-dark);
  padding: 1rem 0.75rem;
  vertical-align: middle;
}

.rankings-page .rank-number {
  font-weight: 700;
  color: #dc3545 !important;
  text-align: center;
  font-size: 1.1rem;
}

.rankings-page .country-flag {
  display: inline-block;
  width: 24px;
  height: 16px;
  background-color: #dc3545;
  color: #ffffff;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 16px;
  border-radius: 2px;
}

.rankings-page .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 0.5rem;
}

.rankings-page .status-dot.online {
  background-color: #28a745;
}

.rankings-page .status-dot.offline {
  background-color: #dc3545;
}

/* Rankings responsive */
@media (max-width: 768px) {
  .rankings-menu{
    padding: 1.5rem;
  }

  .rankings-page .rankings-main-card {
    padding: 1.5rem;
  }
  
  .rankings-page .class-filters {
    padding: 1.5rem 0;
  }
  
  .rankings-page .class-filters .d-flex {
    gap: 1rem;
    justify-content: center;
  }
  
  .rankings-page .class-filter {
    width: 80px;
    height: 80px;
    padding: 0.5rem;
  }
  
  .rankings-page .class-filter .class-icon {
    font-size: 1.4rem;
  }
  
  .rankings-page .class-filter .class-icon img {
    width: 32px;
    height: 32px;
  }
  
  .rankings-page .class-filter span {
    font-size: 0.6rem;
    max-width: 70px;
  }
  
  .rankings-page .rankings-tabs {
    padding: 1.5rem 0;
  }
  
  .rankings-page .rankings-tabs .nav-link {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    flex: 1;
    min-width: 120px;
    text-align: center;
  }
}

@media (max-width: 576px) {

  .rankings-menu{
    padding: 1.5rem;
  }

  .rankings-page .rankings-main-card {
    padding: 1rem;
  }
  
  .rankings-page .rankings-tabs {
    padding: 1rem 0;
  }
  
  .rankings-page .rankings-tabs .nav-link {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    flex: 1;
    min-width: 100px;
    text-align: center;
  }
  
  .rankings-page .class-filters {
    padding: 1rem 0;
  }
  
  .rankings-page .class-filters .d-flex {
    gap: 0.75rem;
    justify-content: center;
  }
  
  .rankings-page .class-filter {
    width: 70px;
    height: 70px;
    padding: 0.4rem;
  }
  
  .rankings-page .class-filter .class-icon {
    font-size: 1.2rem;
  }
  
  .rankings-page .class-filter .class-icon img {
    width: 28px;
    height: 28px;
  }
  
  .rankings-page .class-filter span {
    font-size: 0.55rem;
    max-width: 60px;
  }
}

.topbar {
  background: #000000; /* Fondo negro sólido cuando está arriba */
  border-bottom: 1px solid var(--bakasta-green-dark);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  transition: all 0.3s ease; /* Transición suave */
}

/* Estado cuando se hace scroll - con más transparencia */
.topbar.scrolled {
  background: rgba(0,0,0,0.75); /* Más transparencia */
  backdrop-filter: blur(6px); /* Blur un poco más */
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); /* Sombra sutil */
}

.navbar {
  min-height: 60px;
  overflow: visible;
  z-index: 1000;
}

.brand {
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--bakasta-gray-light);
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0.75rem 0;
}

.brand__badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-right: 0.5rem;
}

.brand__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.navbar-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;
  position: relative;
  z-index: 1001;
}

.navbar-nav .nav-link {
  color: var(--bakasta-gray-light);
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar-nav .nav-link:hover {
  background: var(--bakasta-green-dark);
  border-color: var(--bakasta-green-dark);
  color: var(--bakasta-green-light);
}

/* Highlight for Mi Cuenta button */
.navbar-nav .nav-link.mi-cuenta-highlight {
  background: linear-gradient(145deg, var(--bakasta-green), var(--bakasta-green-light));
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(105, 174, 126, 0.3);
  border: 1px solid var(--bakasta-green-light);
}

.navbar-nav .nav-link.mi-cuenta-highlight:hover {
  background: linear-gradient(145deg, var(--bakasta-green-light), var(--bakasta-green));
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(105, 174, 126, 0.4);
}

/* Mi Cuenta Dropdown Styles */
.navbar-nav .dropdown-menu.mi-cuenta-dropdown {
  background: var(--bakasta-black-green);
  border: 1px solid var(--bakasta-green-dark);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 0.5rem 0;
  min-width: 200px;
  margin-top: 0.5rem;
  z-index: 9999 !important;
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  transform: translateY(0) !important;
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-item {
  color: var(--bakasta-gray-light);
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-item:hover {
  background: linear-gradient(145deg, var(--bakasta-green-dark), var(--bakasta-black-green));
  color: var(--bakasta-green-light);
  transform: translateX(5px);
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-item.logout-item {
  color: #ff6b6b;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0.25rem;
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-item.logout-item:hover {
  background: linear-gradient(145deg, #dc3545, #c82333);
  color: #ffffff;
  transform: translateX(5px);
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-item.admin-dropdown-item {
  color: #ff6b6b;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0.25rem;
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-item.admin-dropdown-item:hover {
  background: linear-gradient(145deg, #dc3545, #c82333);
  color: #ffffff;
  transform: translateX(5px);
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-item i {
  width: 16px;
  text-align: center;
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-item.account-switcher-item-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-item.account-switcher-item-nav:hover {
  background: rgba(54, 134, 75, 0.2);
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .dropdown-header {
  color: var(--bakasta-gray-light);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.navbar-nav .dropdown-menu.mi-cuenta-dropdown .account-active-user-header {
  text-transform: none;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, rgba(54, 134, 75, 0.1), rgba(70, 150, 90, 0.05));
  border-bottom: 1px solid rgba(54, 134, 75, 0.2);
  margin-bottom: 0.25rem;
}

.account-active-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bakasta-green-light);
}

.account-active-user-info i {
  font-size: 1.1rem;
  color: var(--bakasta-green);
}

.account-active-username {
  font-weight: 600;
  font-size: 0.95rem;
  color: #ffffff;
}

/* Ensure dropdown container has proper positioning */
.navbar-nav .nav-item.dropdown {
  position: relative;
}

.navbar-nav .nav-item.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  z-index: 9999;
}

.navbar-nav .nav-item.dropdown.show .dropdown-menu {
  display: block;
}

/* Force dropdown to show on hover as well */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

/* Ensure dropdown stays visible when hovering over it */
.navbar-nav .dropdown-menu:hover {
  display: block !important;
}

/* Add delay to prevent immediate closing */
.navbar-nav .nav-item.dropdown .dropdown-menu {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.navbar-nav .nav-item.dropdown:hover .dropdown-menu,
.navbar-nav .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  display: block !important;
}

/* Force dropdown to appear outside navbar */
.navbar-nav .nav-item.dropdown .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  z-index: 9999 !important;
  display: none;
  margin-top: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.navbar-nav .nav-item.dropdown.show .dropdown-menu,
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  display: block !important;
}

/* Override any overflow hidden on parent containers */
.topbar,
.navbar,
.navbar-collapse,
.container {
  overflow: visible !important;
}

/* Ensure dropdown is not clipped */
.navbar-nav .nav-item.dropdown {
  overflow: visible !important;
}


.dropdown-menu {
  background-color: var(--bakasta-dark-gray);
  border: 1px solid var(--bakasta-green-dark);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.dropdown-item {
  color: var(--bakasta-gray-light);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.dropdown-item:hover {
  background-color: var(--bakasta-green-dark);
  color: var(--bakasta-green-light);
}

.dropdown-item:last-child {
  border-bottom: none;
}

/* Tarjetas de Estadísticas */
.stat-card {
  background: linear-gradient(135deg, rgba(54, 134, 75, 0.1), rgba(105, 174, 126, 0.05));
  border: 1px solid rgba(54, 134, 75, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(54, 134, 75, 0.15);
  border-color: rgba(54, 134, 75, 0.4);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bakasta-green), var(--bakasta-green-light));
  opacity: 0.8;
}

.stat-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(54, 134, 75, 0.3);
}

.stat-icon {
  font-size: 1.2rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.stat-card__content {
  flex: 1;
  margin-bottom: 0.5rem;
}

.stat-card__label {
  color: var(--bakasta-gray-light);
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  opacity: 0.9;
}

.stat-card__value {
  color: var(--bakasta-green-light);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.stat-card__progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.stat-card__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--bakasta-green), var(--bakasta-green-light));
  border-radius: 2px;
  transition: width 0.8s ease;
  position: relative;
}

.stat-card__progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Variantes de estadísticas */
.stat-card-accounts::before { background: linear-gradient(90deg, #4CAF50, #66BB6A); }
.stat-card-characters::before { background: linear-gradient(90deg, #FFC107, #FFD54F); }
.stat-card-characters .stat-card__value { color: #FFC107; }
.stat-card-guilds::before { background: linear-gradient(90deg, #9C27B0, #BA68C8); }
.stat-card-guilds .stat-card__value { color: #BA68C8; }

/* Hero Section */
.hero {
  min-height: 75vh;
  position: relative;
  background: var(--bakasta-black-green);
  overflow: hidden;
}

.hero.compact {
  min-height: 25vh;
  padding: 2rem 0;
}

.hero.compact .display-4 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero.compact .container {
  padding: 1rem 0;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../img/fondo.png') center/cover no-repeat;
  filter: blur(3px);
  z-index: 1;
}

.hero-left,
.hero-right,
.hero-character {
  position: relative;
  z-index: 2;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  object-fit: contain;
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
  max-width: 400px;
  max-height: 400px;
  width: auto;
  height: auto;
}

.hero-logo:hover {
  transform: scale(1.05);
}

.hero-info-panel {
  border-radius: 15px;
  padding: 3rem;
  text-align: center;
  max-width: 400px;
}

.online-players {
  background: rgba(17, 19, 17, 0.4);
  border: 1px solid var(--bakasta-green-dark);
  border-radius: 15px;
  padding: 0.75rem;
  text-align: center;
  backdrop-filter: blur(5px);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.online-label {
  display: inline;
  color: var(--bakasta-gray-light);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.online-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.online-dot {
  width: 12px;
  height: 12px;
  background: var(--bakasta-green);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(105, 174, 126, 0.8);
  animation: pulse 2s infinite;
}

.online-count {
  color: var(--bakasta-green);
  font-size: 1.5rem;
  font-weight: 900;
  font-family: 'Courier New', monospace;
}

.hero-title {
  color: white;
  font-size: 3.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 1.5rem 0;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.hero-subtitle {
  color: var(--bakasta-gray-light);
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px rgba(204, 213, 207, 0.3);
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(45deg, #f97316, #f59e0b);
  color: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3);
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(249, 115, 22, 0.4);
  color: white;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

/* Componentes & Noticias */
.announce {
  background: var(--bakasta-green);
  color: var(--bakasta-gray-light);
  text-align: center;
  padding: 0.5rem 1rem;
  font-weight: 700;
}

.news {
  display: flex;
  flex-direction: column;
}

.news__item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(105, 174, 126, 0.1);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.news__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bakasta-green), var(--bakasta-green-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Para noticias expandidas: borde violeta en hover */
.news__item:has(.news__excerpt)::before {
  background: linear-gradient(90deg, #8b5cf6, #a855f7);
}

.news__item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(105, 174, 126, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.news__item:hover::before {
  opacity: 1;
}

.news__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0;
}

.news__icon {
  font-size: 1.5rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bakasta-green-dark), var(--bakasta-green));
  border-radius: 50%;
  color: white;
  box-shadow: 0 4px 15px rgba(105, 174, 126, 0.3);
  flex-shrink: 0;
}

.news__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: right;
  flex-shrink: 0;
}

/* Para noticias expandidas: autor/fecha abajo */
.news__item:has(.news__excerpt) .news__meta {
  align-self: flex-end;
  margin-top: auto;
}

.news__author {
  color: var(--bakasta-green-light);
  font-weight: 700;
  font-size: 0.9rem;
}

.news__date {
  color: var(--bakasta-gray-light);
  font-size: 0.8rem;
  opacity: 0.7;
}

.news__content {
  margin-left: 0.5rem;
  flex: 1;
  text-align: left;
}

/* Para noticias cortas: diseño horizontal completo */
.news__item:not(:has(.news__excerpt)) .news__header {
  justify-content: flex-start;
}

.news__item:not(:has(.news__excerpt)) .news__content {
  margin-left: 0.5rem;
  flex: none;
  text-align: left;
}

.news__item:not(:has(.news__excerpt)) .news__meta {
  margin-left: auto;
}

.news__title {
  color: white;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.news__excerpt {
  color: var(--bakasta-gray-light);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 1rem;
  margin-bottom: 0;
  opacity: 0.9;
}

/* Para noticias expandidas: crear una línea inferior con "Leer más" y autor/fecha */
.news__item:has(.news__excerpt) .news__excerpt {
  margin-bottom: 1rem;
}

.news__item:has(.news__excerpt) .news__excerpt .news-readmore {
  display: none; /* Ocultar el enlace del excerpt ya que ahora está en el footer */
}

/* Línea inferior para noticias expandidas */
.news__item:has(.news__excerpt) .news__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.5rem;
}

.news__item:has(.news__excerpt) .news__meta {
  margin-top: 0;
  align-self: flex-end;
}

.news__item:has(.news__excerpt) .news__footer .news-readmore {
  color: var(--bakasta-green-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.news__item:has(.news__excerpt) .news__footer .news-readmore:hover {
  color: var(--bakasta-green);
  text-decoration: underline;
}

.news__tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.news__tag {
  background: rgba(105, 174, 126, 0.2);
  color: var(--bakasta-green-light);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(105, 174, 126, 0.3);
  transition: all 0.2s ease;
}

.news__tag:hover {
  background: rgba(105, 174, 126, 0.3);
  border-color: var(--bakasta-green-light);
  transform: scale(1.05);
}

/* Forgot Password & Formularios */
.forgot-password {
  text-align: center;
  margin-top: 0.5rem;
}

.forgot-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bakasta-green-light);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  background: rgba(105, 174, 126, 0.1);
  border: 1px solid rgba(105, 174, 126, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.forgot-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(105, 174, 126, 0.2), transparent);
  transition: left 0.5s ease;
}

.forgot-link:hover::before {
  left: 100%;
}

.forgot-link:hover {
  background: rgba(105, 174, 126, 0.2);
  border-color: var(--bakasta-green-light);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(105, 174, 126, 0.3);
}

.forgot-icon {
  font-size: 1rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.forgot-text {
  position: relative;
  z-index: 1;
}

.card {
  background-color: var(--bakasta-dark-gray);
  border: 1px solid var(--bakasta-green-dark);
  border-radius: 12px;
}

.card-header {
  background-color: var(--bakasta-green-dark);
  border-bottom: 1px solid var(--bakasta-green-dark);
  color: #a6a6b3;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.card-body {
  color: var(--bakasta-gray-light);
}

/* Rankings & Eventos */
.table-dark {
  background-color: var(--bakasta-dark-gray);
  color: var(--bakasta-gray-light);
  margin: 0;
}

.table-dark th {
  background-color: #6c757d;
  color: #212529;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem;
  border: none;
}

.table-dark td {
  padding: 0.75rem;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 0.9rem;
}

.table-dark tbody tr:hover {
  background-color: rgba(105,174,126,.1);
}

.table-dark tbody tr:last-child td {
  border-bottom: none;
}

.btn-outline-secondary {
  border-color: var(--bakasta-gray-light);
  color: var(--bakasta-gray-light);
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.btn-outline-secondary:hover {
  background-color: var(--bakasta-gray-light);
  color: var(--bakasta-black-green);
  border-color: var(--bakasta-gray-light);
}

.guild-logo {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid rgba(255,255,255,.2);
}

.events-list {
  padding: 1rem;
}

.event-item {
  padding: 0.5rem 0;
}

.event-name {
  font-weight: 700;
  color: var(--bakasta-gray-light);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.event-time {
  color: var(--bakasta-gray-light);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.event-countdown {
  color: var(--bakasta-green-light);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

.event-status {
  font-size: 0.75rem;
  font-weight: 600;
}

/* Personajes & Formularios */
.char-card {
  background-color: var(--bakasta-green-dark);
  border: 1px solid var(--bakasta-green-dark);
  border-radius: 0.8rem;
  padding: 0.9rem;
  transition: all 0.2s ease;
}

.char-card:hover {
  border-color: var(--bakasta-green-light);
  background-color: rgba(105,174,126,.05);
}

.char-card img {
  width: 64px;
  height: 64px;
  border-radius: 0.5rem;
  object-fit: cover;
}

.char-info h4 {
  margin: 0;
  font-weight: 800;
  color: var(--bakasta-gray-light);
}

.char-meta {
  color: var(--bakasta-gray-light);
  font-size: 0.875rem;
  margin: 0.25rem 0 0.5rem;
}

.form-control {
  background-color: var(--bakasta-dark-gray);
  border: 1px solid var(--bakasta-green-dark);
  border-radius: 0.6rem;
  color: var(--bakasta-gray-light);
}

.form-control:focus {
  background-color: var(--bakasta-dark-gray);
  border-color: var(--bakasta-green-light);
  box-shadow: 0 0 0 0.2rem rgba(105,174,126,.25);
  color: var(--bakasta-gray-light);
}

.form-label {
  color: var(--bakasta-gray-light);
  font-weight: 600;
}

/* Footer */
.footer {
  background: linear-gradient(180deg, var(--bakasta-black-green), #1a1f1a);
  border-top: 2px solid var(--bakasta-green-dark);
  color: var(--bakasta-gray-light);
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bakasta-green), transparent);
}

.footer__content {
  padding: 3rem 0 1rem;
}

.footer__brand {
  text-align: left;
}

.footer__logo {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--bakasta-green-dark);
  background: var(--bakasta-dark-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer__title {
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.footer__description {
  color: var(--bakasta-gray-light);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.8;
}

.footer__section-title {
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
}

.footer__section-title::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--bakasta-green);
  border-radius: 1px;
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links li {
  margin-bottom: 0.5rem;
}

.footer__links a {
  color: var(--bakasta-gray-light);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}

.footer__links a::before {
  content: '→';
  position: absolute;
  left: -1rem;
  opacity: 0;
  transition: all 0.3s ease;
  color: var(--bakasta-green);
}

.footer__links a:hover {
  color: var(--bakasta-green-light);
  transform: translateX(0.5rem);
}

.footer__links a:hover::before {
  opacity: 1;
  left: -1.5rem;
}

.footer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.footer__stat {
  text-align: center;
  padding: 1rem;
  background: rgba(105, 174, 126, 0.1);
  border: 1px solid rgba(105, 174, 126, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.footer__stat:hover {
  background: rgba(105, 174, 126, 0.15);
  border-color: var(--bakasta-green);
  transform: translateY(-2px);
}

.footer__stat-number {
  display: block;
  color: var(--bakasta-green-light);
  font-size: 1.5rem;
  font-weight: 900;
  font-family: 'Courier New', monospace;
  margin-bottom: 0.25rem;
}

.footer__stat-label {
  color: var(--bakasta-gray-light);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bakasta-green-dark), transparent);
  margin: 2rem 0;
}

.footer__bottom {
  padding: 1.5rem 0;
}

.footer__copyright {
  color: var(--bakasta-gray-light);
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.7;
}

.footer__social {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(105, 174, 126, 0.1);
  border: 1px solid rgba(105, 174, 126, 0.2);
  border-radius: 50%;
  color: var(--bakasta-gray-light);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.footer__social-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(105, 174, 126, 0.3), transparent);
  transition: left 0.5s ease;
}

.footer__social-link:hover::before {
  left: 100%;
}

.footer__social-link:hover {
  background: rgba(105, 174, 126, 0.2);
  border-color: var(--bakasta-green);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(105, 174, 126, 0.3);
}

.footer__social-icon {
  font-size: 1.2rem;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Bootstrap Overrides & Botones */
.btn-primary {
  background-color: var(--bakasta-green) !important;
  border-color: var(--bakasta-green) !important;
}

.btn-primary:hover {
  background-color: var(--bakasta-green-dark) !important;
  border-color: var(--bakasta-green-dark) !important;
}

.btn-secondary {
  background-color: var(--bakasta-green-light) !important;
  border-color: var(--bakasta-green-light) !important;
  color: var(--bakasta-black-green) !important;
}

.btn-secondary:hover {
  background-color: var(--bakasta-green) !important;
  border-color: var(--bakasta-green) !important;
  color: var(--bakasta-gray-light) !important;
}

.btn-logout {
  background: linear-gradient(135deg, #a32935, #75141e);
  border: 1px solid #75141e;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-logout:hover {
  background: linear-gradient(135deg, #c82333, #a71e2a);
  border-color: #c82333;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

.btn-logout:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

/* Información de Cuenta */
.account-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-item {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.account-item:last-child {
  border-bottom: none;
}

.account-label {
  color: var(--bakasta-gray-light);
  font-weight: 500;
  min-width: 140px;
  margin-right: 1rem;
}

.account-value {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  text-transform: uppercase;
}

.status-active {
  background-color: #6c757d;
}

.status-offline {
  background-color: #dc3545;
}

.email-hidden-tag {
  background: rgba(105, 174, 126, 0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(105, 174, 126, 0.9);
  display: inline-block;
  margin: 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-change {
  background: linear-gradient(135deg, #007bff, #0056b3);
  border: 1px solid #007bff;
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 80px;
}

.btn-change:hover {
  background: linear-gradient(135deg, #0056b3, #004085);
  border-color: #0056b3;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.btn-change:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.password-dots {
  color: var(--bakasta-black-green);
  font-family: monospace;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

/* Clases de Utilidad */
.bg-primary { background-color: var(--bakasta-green) !important; }
.bg-secondary { background-color: var(--bakasta-green-light) !important; }
.bg-dark { background-color: var(--bakasta-black-green) !important; }
.text-primary { color: var(--bakasta-green) !important; }
.text-secondary { color: var(--bakasta-green-light) !important; }
.text-muted { color: var(--bakasta-gray-light) !important; }
.border-primary { border-color: var(--bakasta-green) !important; }
.border-secondary { border-color: var(--bakasta-green-light) !important; }

/* Responsivo */
@media (max-width: 991.98px) {
  .hero {
    min-height: 60vh;
    padding: 2rem 0;
  }
  
  .hero-left,
  .hero-right,
  .hero-character {
    min-height: 200px;
  }
  
  .hero-left { order: 1; }
  .hero-right { 
    order: 2; 
  }
  
  .hero-title {
    font-size: 1.8rem;
    margin: 1rem 0;
  }
  
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .hero-info-panel {
    padding: 2rem;
    margin: 0 1rem;
    max-width: 100%;
  }
  
  .hero-logo {
    width: 400px;
    height: 400px;
  }
  
  .online-count {
    font-size: 1.2rem;
  }
  
  .download-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  
  /* Navegación móvil */
  .navbar-collapse {
    background-color: var(--bakasta-black-green);
    border-radius: 0.5rem;
    margin-top: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    padding: 1rem;
    width: 100%;
    transition: all 0.3s ease;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  /* Estado cerrado del navbar móvil */
  .navbar-collapse:not(.show) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.15s ease;
  }
  
  .navbar-nav,
  .navbar-nav .nav-item,
  .navbar-nav .nav-link {
    width: 100%;
  }
  
  .navbar-nav .nav-link {
    border-radius: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 0.75rem 1rem;
    background-color: var(--bakasta-green-dark);
    text-align: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Animación de los elementos del navbar cuando se cierra */
  .navbar-collapse:not(.show) .navbar-nav .nav-link {
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.1s ease;
  }
  
  /* Delay escalonado reducido para los elementos del navbar */
  .navbar-collapse:not(.show) .navbar-nav .nav-link:nth-child(1) { transition-delay: 0ms; }
  .navbar-collapse:not(.show) .navbar-nav .nav-link:nth-child(2) { transition-delay: 10ms; }
  .navbar-collapse:not(.show) .navbar-nav .nav-link:nth-child(3) { transition-delay: 20ms; }
  .navbar-collapse:not(.show) .navbar-nav .nav-link:nth-child(4) { transition-delay: 30ms; }
  .navbar-collapse:not(.show) .navbar-nav .nav-link:nth-child(5) { transition-delay: 40ms; }
  
  .navbar-nav .nav-link:hover {
    background-color: var(--bakasta-green);
  }
  
  .dropdown-menu {
    position: static;
    background-color: var(--bakasta-green-dark);
    border: none;
    border-radius: 0.5rem;
    box-shadow: none;
    margin: 0.5rem 0;
    padding: 0.5rem;
    width: 100%;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Animación de los dropdowns cuando se cierra el navbar */
  .navbar-collapse:not(.show) .dropdown-menu {
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.1s ease;
  }
  
  .dropdown-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    background-color: rgba(0,0,0,.1);
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
    width: 100%;
    display: block;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Animación de los dropdown items cuando se cierra el navbar */
  .navbar-collapse:not(.show) .dropdown-item {
    opacity: 0;
    transform: translateY(-3px);
    transition: all 0.08s ease;
  }
  
  .dropdown-item:hover {
    background-color: rgba(105,174,126,.3);
    transform: translateX(5px);
  }
  
  .dropdown-item:last-child {
    margin-bottom: 0;
  }
  
  .navbar-toggler {
    border: 1px solid var(--bakasta-green-dark);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(105,174,126,.25);
  }
  
  .navbar-toggler-icon {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .col-md-4 {
    margin-bottom: 1rem;
  }
}

@media (max-width: 767.98px) {
  .hero {
    min-height: 50vh;
    padding: 1rem 0;
  }
  
  .hero-left,
  .hero-right,
  .hero-character {
    min-height: 120px;
  }
  
  .hero-title {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
  
  .hero-subtitle {
    font-size: 0.9rem;
  }
  
  .hero-info-panel {
    padding: 1.5rem;
    margin: 0 0.5rem;
  }
  
  .hero-logo {
    width: 300px;
    height: 300px;
  }
  
  .online-label {
    font-size: 0.8rem;
  }
  
  .online-count {
    font-size: 1rem;
  }
  
  .download-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
  
  /* Tarjetas Responsivas */
  .card {
    margin-bottom: 1rem;
  }
  
  .card-header {
    padding: 0.75rem 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .char-card {
    padding: 0.75rem;
  }
  
  .char-card img {
    width: 48px;
    height: 48px;
  }
  
  .char-info h4 {
    font-size: 1rem;
  }
  
  .char-meta {
    font-size: 0.8rem;
  }
  
  .form-control {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
  }
  
  .form-label {
    font-size: 0.9rem;
  }
  
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }
  
  .announce {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  /* Noticias Responsivas */
  .news__item {
    padding: 1rem;
  }
  
  .news__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.2rem;
  }
  
  .news__content {
    margin-left: 3.5rem;
  }
  
  .news__title {
    font-size: 1.1rem;
  }
  
  .news__excerpt {
    font-size: 0.9rem;
  }
}

@media (max-width: 575.98px) {
  .hero-left,
  .hero-right,
  .hero-character {
    min-height: 100px;
  }
  
  .navbar-collapse {
    margin-top: 0.5rem;
    padding: 0.75rem;
    width: 100%;
  }
  
  .navbar-nav .nav-link {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    width: 100%;
    display: block;
  }
  
  .dropdown-item {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    width: 100%;
    display: block;
  }
  
  .brand {
    font-size: 0.9rem;
  }
  
  .brand__badge {
    width: 30px;
  }
  
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .card-header {
    padding: 0.6rem 0.75rem;
  }
  
  .card-body {
    padding: 0.75rem;
  }
  
  .char-card {
    padding: 0.6rem;
  }
  
  .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }
  
  .btn-logout {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
 
  .announce {
    padding: 0.6rem;
    font-size: 0.85rem;
  }
  
  /* Noticias Responsivas Pequeñas */
  .news__item {
    padding: 0.75rem;
  }
  
  .news__header {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .news__icon {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
  
  .news__content {
    margin-left: 2.75rem;
  }
  
  .news__title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .news__excerpt {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
  }
  
  .news__tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
  
  /* Forgot password responsive */
  .forgot-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
  
  .forgot-icon {
    font-size: 0.9rem;
  }
 
  footer {
    padding: 1.5rem 0;
    font-size: 0.85rem;
  }
  
  /* Eventos responsive */
  .event-name {
    font-size: 0.85rem;
  }
  
  .event-time {
    font-size: 0.75rem;
  }
  
  .event-countdown {
    font-size: 0.7rem;
  }
  
  /* Footer responsive */
  .footer__content {
    padding: 2rem 0 1rem;
  }
  
  .footer__brand {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .footer__section {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  
  .footer__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  
  .footer__stat {
    padding: 0.75rem;
  }
  
  .footer__stat-number {
    font-size: 1.2rem;
  }
  
  .footer__social {
    justify-content: center;
    margin-top: 1rem;
  }
  
  .footer__bottom {
    text-align: center;
  }
  
  .footer__copyright {
    margin-bottom: 1rem;
  }
  
  /* Estadísticas responsive */
  .stat-card {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  
  .stat-card__icon {
    width: 2rem;
    height: 2rem;
  }
  
  .stat-card__value {
    font-size: 1.2rem;
  }
  
  .stat-card__label {
    font-size: 0.7rem;
  }
}

/* ---------- Modern Registration Form Styles ---------- */
.modern-input-group {
  position: relative;
  margin-bottom: 2rem;
}

.modern-input-group .form-control {
  border: 2px solid var(--bakasta-green-dark);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.25rem 3.5rem;
  font-size: 1.1rem;
  background: linear-gradient(145deg, var(--bakasta-black-green), var(--bakasta-dark-gray));
  color: var(--bakasta-gray-light);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  font-weight: 500;
}

.modern-input-group .form-control:focus {
  border-color: var(--bakasta-green);
  box-shadow: 
    0 0 0 3px rgba(105, 174, 126, 0.3),
    0 8px 25px rgba(105, 174, 126, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.1);
  background: linear-gradient(145deg, var(--bakasta-dark-gray), var(--bakasta-black-green));
  transform: translateY(-3px);
  outline: none;
}

.modern-input-group .form-control:hover:not(:focus) {
  border-color: var(--bakasta-green);
  box-shadow: 
    0 6px 20px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

.modern-input-group .form-control::placeholder {
  color: var(--bakasta-gray-light);
  opacity: 0.6;
  font-weight: 400;
  transition: opacity 0.3s ease;
}

.modern-input-group .form-control:focus::placeholder {
  opacity: 0.4;
}

.modern-input-group .input-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bakasta-green-light);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.1rem;
  background: rgba(105, 174, 126, 0.1);
  border-radius: 8px;
  padding: 0.25rem;
}

.modern-input-group .form-control:focus + .input-icon {
  color: var(--bakasta-green);
  background: rgba(105, 174, 126, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.modern-input-group .form-control:hover + .input-icon {
  color: var(--bakasta-green);
  background: rgba(105, 174, 126, 0.15);
}

.modern-input-group .form-label {
  color: var(--bakasta-green-light);
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  position: relative;
}

.modern-input-group .form-label::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 2rem;
  height: 2px;
  background: linear-gradient(90deg, var(--bakasta-green), transparent);
  border-radius: 1px;
}

.modern-input-group .form-text {
  color: var(--bakasta-gray-light);
  font-size: 0.9rem;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--bakasta-green);
  background: linear-gradient(90deg, rgba(54, 134, 75, 0.15), rgba(54, 134, 75, 0.05));
  border-radius: 0 12px 12px 0;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--bakasta-green-light);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  z-index: 10;
  opacity: 0.7;
}

.password-toggle:hover {
  color: var(--bakasta-green);
  background: rgba(105, 174, 126, 0.15);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.password-toggle:active {
  transform: translateY(-50%) scale(0.95);
  opacity: 1;
}

/* Botón de registro moderno - Definición consolidada */

.terms-section {
  background: rgba(54, 134, 75, 0.1);
  border: 1px solid rgba(54, 134, 75, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.terms-section .form-check {
  margin-bottom: 0.75rem;
}

.terms-section .form-check-input:checked {
  background-color: var(--bakasta-green);
  border-color: var(--bakasta-green);
}

.terms-section .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(54, 134, 75, 0.25);
}

.terms-section .form-check-label {
  color: var(--bakasta-gray-light);
  font-size: 0.9rem;
  line-height: 1.4;
}

.terms-section .form-check-label a {
  color: var(--bakasta-green-light);
  text-decoration: none;
  font-weight: 600;
}

.terms-section .form-check-label a:hover {
  text-decoration: underline;
  color: var(--bakasta-green);
}

.login-link-modern {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bakasta-green-dark);
}

.login-link-modern a {
  color: var(--bakasta-green-light);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.login-link-modern a:hover {
  color: var(--bakasta-green);
  text-decoration: underline;
}

.card-modern {
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  overflow: hidden;
  background: var(--bakasta-black-green);
}

.card-modern .card-header {
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light));
  color: var(--bakasta-black-green);
  border: none;
  padding: 1.5rem 2rem;
}

.card-modern .card-header h2 {
  margin: 0;
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
}

.card-modern .card-body {
  padding: 2rem;
  background: var(--bakasta-black-green);
}

@media (max-width: 768px) {
  .card-modern .card-body {
    padding: 1.5rem;
  }
  
  .card-modern .card-header {
    padding: 1.25rem 1.5rem;
  }
}

/* ---------- Modern Title Styles for All Modules ---------- */
.page-title-modern {
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light));
  color: var(--bakasta-black-green);
  padding: 2rem 0;
  margin-bottom: 2rem;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 20px rgba(54, 134, 75, 0.3);
  position: relative;
  overflow: hidden;
}

.page-title-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(0,0,0,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(0,0,0,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(0,0,0,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(0,0,0,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(0,0,0,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.page-title-modern .container {
  position: relative;
  z-index: 2;
}

.page-title-modern h1 {
  margin: 0;
  font-weight: 800;
  font-size: 2.5rem;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  letter-spacing: -0.02em;
}

.page-title-modern .subtitle {
  margin: 0.5rem 0 0 0;
  font-size: 1.1rem;
  text-align: center;
  opacity: 0.9;
  font-weight: 500;
}

.page-title-modern .title-icon {
  display: inline-block;
  margin-right: 1rem;
  font-size: 2rem;
  vertical-align: middle;
}

/* Card styles for module content */
.module-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  overflow: hidden;
  background: var(--bakasta-black-green);
  margin-bottom: 2rem;
}

/* Fix for information container stretching issue */
.module-card.flex-fill.glow {
  flex: 0 1 auto !important;
  max-height: fit-content;
  height: auto;
}

.module-card.flex-fill.glow .card-body {
  max-height: none;
  overflow: visible;
}

.module-card .card-header {
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light));
  color: var(--bakasta-black-green);
  border: none;
  padding: 1.5rem 2rem;
}

.module-card .card-header h2,
.module-card .card-header h3 {
  margin: 0;
  font-weight: 700;
  font-size: 1.4rem;
  text-align: center;
}

.module-card .card-header .col-lg-8 h2 {
  text-align: left;
}

.module-card .card-header .col-lg-4 h3 {
  text-align: right;
  font-size: 1.2rem;
}

.module-card .card-body {
  padding: 2rem;
  background: var(--bakasta-black-green);
  color: var(--bakasta-gray-light);
}

/* Reduce padding for news module */
.home-news-block .card-body {
  padding: 1rem;
}

.module-card .card-body h4,
.module-card .card-body h5 {
  color: var(--bakasta-green-light);
  margin-bottom: 1rem;
}

.module-card .card-body p {
  color: var(--bakasta-gray-light);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.module-card .card-body ul,
.module-card .card-body ol {
  color: var(--bakasta-gray-light);
  padding-left: 1.5rem;
}

.module-card .card-body li {
  margin-bottom: 0.5rem;
}

.module-card .card-body a {
  color: var(--bakasta-green-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.module-card .card-body a:hover {
  color: var(--bakasta-green);
  text-decoration: underline;
}

/* ===============
   News Pagination Styles
   =============== */

.news-pagination-wrapper {
  margin-top: 1.5rem;
  padding: 0 1rem;
}

.news-pagination-container {
  background: linear-gradient(135deg, var(--bakasta-black-green), #1a1d1a);
  border: 1px solid rgba(105, 174, 126, 0.2);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.news-pagination-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bakasta-green), var(--bakasta-green-light));
}

.news-pagination-info {
  margin-bottom: 1rem;
  text-align: center;
}

.pagination-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(105, 174, 126, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(105, 174, 126, 0.3);
}

.pagination-stats i {
  color: var(--bakasta-green-light);
  font-size: 1.2rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.stats-text {
  color: var(--bakasta-gray-light);
  font-size: 0.95rem;
  font-weight: 500;
}

.highlight-number {
  color: var(--bakasta-green-light);
  font-weight: 700;
  font-size: 1.1rem;
  background: rgba(105, 174, 126, 0.2);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  margin: 0 0.25rem;
}

.total-number {
  color: var(--bakasta-green);
  font-weight: 700;
  font-size: 1.1rem;
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.news-pagination-nav {
  display: flex;
  justify-content: center;
}

.news-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-page-item {
  margin: 0;
}

.news-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  min-width: 2rem;
  height: 2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

.news-page-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.news-page-link:hover::before {
  left: 100%;
}

/* Page number buttons */
.news-page-link.page-number {
  color: var(--bakasta-gray-light);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(105, 174, 126, 0.3);
}

.news-page-link.page-number:hover {
  color: var(--bakasta-green-light);
  background: rgba(105, 174, 126, 0.2);
  border-color: var(--bakasta-green-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(105, 174, 126, 0.3);
}

.news-page-item.active .news-page-link.page-number.current {
  color: white;
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light));
  border-color: var(--bakasta-green-light);
  box-shadow: 0 4px 20px rgba(105, 174, 126, 0.4);
  transform: scale(1.05);
}

/* Navigation buttons (Previous/Next) */
.news-page-link.prev-btn,
.news-page-link.next-btn {
  color: var(--bakasta-gray-light);
  background: linear-gradient(135deg, rgba(105, 174, 126, 0.1), rgba(105, 174, 126, 0.05));
  border-color: rgba(105, 174, 126, 0.4);
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  min-width: auto;
}

.news-page-link.prev-btn:hover,
.news-page-link.next-btn:hover {
  color: white !important;
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light));
  border-color: var(--bakasta-green-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(105, 174, 126, 0.4);
}

.news-page-link.prev-btn i,
.news-page-link.next-btn i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  color: inherit;
}

.news-page-link.prev-btn:hover i {
  transform: translateX(-2px);
}

.news-page-link.next-btn:hover i {
  transform: translateX(2px);
}

/* Ensure text is white on hover for prev/next buttons */
.news-page-link.prev-btn:hover .btn-text,
.news-page-link.next-btn:hover .btn-text {
  color: white !important;
}

.btn-text {
  font-size: 0.8rem;
  font-weight: 600;
}

/* Ellipsis */
.news-page-link.ellipsis {
  color: var(--bakasta-gray-light);
  background: transparent;
  border: none;
  cursor: default;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Disabled states */
.news-page-item.disabled .news-page-link {
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  opacity: 0.5;
}

.news-page-item.disabled .news-page-link:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.05);
}

/* Responsive Design */
@media (max-width: 768px) {
  .news-pagination-container {
    padding: 0.75rem 1rem;
  }
  
  .pagination-stats {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
  }
  
  .stats-text {
    font-size: 0.8rem;
    text-align: center;
  }
  
  .news-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem;
  }
  
  .news-page-link {
    padding: 0.4rem 0.6rem;
    min-width: 1.8rem;
    height: 1.8rem;
    font-size: 0.75rem;
  }
  
  .news-page-link.prev-btn,
  .news-page-link.next-btn {
    padding: 0.4rem 0.8rem;
  }
  
  .btn-text {
    display: none;
  }
}

@media (max-width: 480px) {
  .news-pagination-wrapper {
    padding: 0 0.5rem;
  }
  
  .news-pagination-container {
    padding: 0.75rem;
  }
  
  .news-pagination {
    gap: 0.15rem;
  }
  
  .news-page-link {
    padding: 0.35rem 0.5rem;
    min-width: 1.6rem;
    height: 1.6rem;
    font-size: 0.7rem;
  }
}

/* Ajustes Responsivos */
@media (max-width: 768px) {
  .page-title-modern {
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-radius: 0 0 15px 15px;
  }
  
  .page-title-modern h1 {
    font-size: 2rem;
  }
  
  .page-title-modern .subtitle {
    font-size: 1rem;
  }
  
  .page-title-modern .title-icon {
    font-size: 1.5rem;
    margin-right: 0.75rem;
  }
  
  .module-card .card-body {
    padding: 1.5rem;
  }
  
  .module-card .card-header {
    padding: 1.25rem 1.5rem;
  }
}

@media (max-width: 576px) {
  .page-title-modern h1 {
    font-size: 1.75rem;
  }
  
  .page-title-modern .subtitle {
    font-size: 0.9rem;
  }
  
  .page-title-modern .title-icon {
    font-size: 1.25rem;
    margin-right: 0.5rem;
  }
}

/* User Control Panel Styles */
.user-control-panel {
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
  height: fit-content;
}

.control-panel-title {
  color: var(--bakasta-green-light);
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--bakasta-green-dark);
}

.control-panel-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.control-panel-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bakasta-green-dark);
  border-radius: 6px;
  text-decoration: none;
  color: var(--bakasta-gray-light);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.control-panel-item:hover {
  background: var(--bakasta-green);
  color: white;
  border-color: var(--bakasta-green-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(105, 174, 126, 0.3);
  text-decoration: none;
}

.control-panel-item:hover .control-panel-icon {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.control-panel-item:hover .control-panel-label {
  color: #ffffff !important;
}

.control-panel-item:hover .control-panel-desc {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* UserCP Mobile Dropdown Styles */
.usercp-mobile-toggle {
  position: relative;
  z-index: 1000;
  background: var(--bakasta-black-green);
  padding: 1rem;
  margin: 0 0 1rem 0;
  border-bottom: 1px solid var(--bakasta-green-dark);
  border-radius: 8px 8px 0 0;
}

.usercp-mobile-toggle .btn {
  background: var(--bakasta-green-dark);
  border: 1px solid var(--bakasta-green);
  color: var(--bakasta-gray-light);
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.usercp-mobile-toggle .btn:hover {
  background: var(--bakasta-green);
  border-color: var(--bakasta-green-light);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(105, 174, 126, 0.3);
}

.usercp-mobile-toggle .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(105, 174, 126, 0.25);
}

.usercp-mobile-toggle .btn i.fa-chevron-down {
  transition: transform 0.3s ease;
}

.usercp-mobile-toggle .btn[aria-expanded="true"] i.fa-chevron-down {
  transform: rotate(180deg);
}

.usercp-mobile-menu {
  background: var(--bakasta-black-green);
  border: 1px solid var(--bakasta-green-dark);
  border-radius: 8px;
  padding: 0.5rem;
  margin-top: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.usercp-mobile-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bakasta-green-dark);
  border-radius: 6px;
  text-decoration: none;
  color: var(--bakasta-gray-light);
  transition: all 0.3s ease;
  border: 1px solid transparent;
  margin-bottom: 0.5rem;
}

.usercp-mobile-item:last-child {
  margin-bottom: 0;
}

.usercp-mobile-item:hover {
  background: var(--bakasta-green);
  color: white;
  border-color: var(--bakasta-green-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(105, 174, 126, 0.3);
  text-decoration: none;
}

.usercp-mobile-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.usercp-mobile-text {
  color: white;
  font-weight: 500;
  font-size: 0.9rem;
}

/* Special styling for Log Out button */
.usercp-mobile-logout {
  background: linear-gradient(135deg, #dc3545, #c82333) !important;
  border-color: #dc3545 !important;
}

.usercp-mobile-logout:hover {
  background: linear-gradient(135deg, #c82333, #dc3545) !important;
  border-color: #dc3545 !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

.usercp-mobile-logout .usercp-mobile-icon {
  color: white !important;
}

.usercp-mobile-logout .usercp-mobile-text {
  color: white !important;
}

/* Mobile layout adjustments for UserCP positioning */
@media (max-width: 991.98px) {
  /* General layout for all pages */
  .container .row {
    flex-direction: column-reverse;
  }
  
  .col-lg-4 {
    order: 1;
  }
  
  .col-lg-8 {
    order: 2;
  }
  
  /* Special layout for news page - control panel below news content */
  .default-layout:has(.news),
  .news-page-layout {
    flex-direction: column !important;
  }
  
  .default-layout:has(.news) .col-lg-4,
  .news-page-layout .col-lg-4 {
    order: 2 !important;
  }
  
  .default-layout:has(.news) .col-lg-8,
  .news-page-layout .col-lg-8 {
    order: 1 !important;
  }
  
  /* Additional spacing for news page mobile layout */
  .news-page-layout .col-lg-8 .module-card {
    margin-bottom: 1.5rem;
  }
  
  .news-page-layout .col-lg-4 .module-card {
    margin-top: 0;
  }
  
  /* Ensure UserCP appears above characters */
  .col-lg-4 .module-card {
    margin-bottom: 1rem;
  }
  
  .col-lg-8 .module-card {
    margin-top: 0;
  }
  
  /* Specific adjustments for Mi Cuenta page */
  .micuenta-layout {
    flex-direction: column !important;
  }
  
  .micuenta-layout .col-lg-4 {
    order: 1 !important;
  }
  
  .micuenta-layout .col-lg-8 {
    order: 2 !important;
  }
  
  /* Specific adjustments for Default template page */
  .default-layout {
    flex-direction: column !important;
  }
  
  .default-layout .col-lg-4 {
    order: 1 !important;
  }
  
  .default-layout .col-lg-8 {
    order: 2 !important;
  }
  
  /* Specific adjustments for Profile pages - Profile first, then Control Panel */
  .profile-layout {
    flex-direction: column !important;
  }
  
  .profile-layout .col-lg-8 {
    order: 1 !important; /* Profile first */
  }
  
  .profile-layout .col-lg-4 {
    order: 2 !important; /* Control Panel second */
  }
  
  /* Reorder sidebar elements in mobile */
  .default-layout .col-lg-4 .d-flex.flex-column.gap-3 {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Hide server info section in mobile sidebar (it will be shown at bottom) */
  .col-lg-4 .server-info-section {
    display: none !important;
  }
}

/* Show server info section at bottom in mobile */
@media (max-width: 991.98px) {
  .server-info-section {
    display: block !important;
  }
}

/* Hide server info section at bottom in desktop (but keep the one in sidebar) */
@media (min-width: 992px) {
  .row.mt-4 .server-info-section {
    display: none !important;
  }
}

/* Invert container order on mobile for info page only */
@media (max-width: 991.98px) {
  .info-page-containers {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  
  /* Specific ordering for info page containers */
  .info-page-containers .col-12:nth-child(1) {
    order: 4; /* Server Information - last */
  }
  
  .info-page-containers .col-12:nth-child(2) {
    order: 3; /* Chaos Machine - second to last */
  }
  
  .info-page-containers .col-12:nth-child(3) {
    order: 2; /* Party Bonus - second */
  }
  
  .info-page-containers .col-12:nth-child(4) {
    order: 1; /* Commands - first */
  }
}

.control-panel-icon {
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  flex-shrink: 0;
}

.control-panel-item:hover .control-panel-icon {
  background: rgba(255, 255, 255, 0.2);
}

.control-panel-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.control-panel-label {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
  color: #ffffff !important;
}

.control-panel-desc {
  font-size: 0.7rem;
  opacity: 0.8;
  line-height: 1.2;
  color: var(--bakasta-green-light) !important;
}

/* Estilos específicos para el botón de logout */
.control-panel-logout {
  margin-top: 0.5rem;
  border-top: 1px solid var(--bakasta-green-dark);
  padding-top: 1rem;
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(204, 24, 42, 0.2);
  text-decoration: none !important;
}

.control-panel-logout .control-panel-icon {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

.control-panel-logout:hover {
  background: rgba(220, 53, 69, 0.5);
  border-color: rgba(204, 24, 42, 0.2);
  text-decoration: none !important;
}

.control-panel-logout:hover .control-panel-icon {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

/* Responsive adjustments for control panel */
@media (max-width: 991px) {
  .user-control-panel {
    margin-top: 1rem;
  }
  
  .control-panel-item {
    padding: 0.625rem;
  }
  
  .control-panel-icon {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
  
  .control-panel-label {
    font-size: 0.8rem;
    color: #ffffff !important;
  }
  
  .control-panel-desc {
    font-size: 0.65rem;
    color: var(--bakasta-green-light) !important;
  }
}

@media (max-width: 576px) {
  .control-panel-item {
    padding: 0.5rem;
    gap: 0.625rem;
  }
  
  .control-panel-icon {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
  }
  
  .control-panel-label {
    font-size: 0.75rem;
    color: #ffffff !important;
  }
  
  .control-panel-desc {
    font-size: 0.6rem;
  }
}

/* Ensure position-relative works properly */
.modern-input-group .position-relative {
  margin-top: 15px;
  position: relative !important;
}

/* Enhanced button styles - Consolidado */
.btn-register-modern {
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light)) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 1.25rem 2.5rem !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 
    0 8px 25px rgba(54, 134, 75, 0.4),
    0 4px 8px rgba(0,0,0,0.2) !important;
  color: var(--bakasta-black-green) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 60px !important;
}

.btn-register-modern::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transition: left 0.6s ease !important;
}

.btn-register-modern:hover {
  transform: translateY(-4px) !important;
  box-shadow: 
    0 15px 35px rgba(54, 134, 75, 0.5),
    0 8px 15px rgba(0,0,0,0.3) !important;
  background: linear-gradient(135deg, var(--bakasta-green-light), var(--bakasta-green)) !important;
}

.btn-register-modern:hover::before {
  left: 100% !important;
}

.btn-register-modern:active {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 8px 20px rgba(54, 134, 75, 0.4),
    0 4px 8px rgba(0,0,0,0.2) !important;
}

.btn-register-modern:focus {
  outline: none !important;
  box-shadow: 
    0 0 0 3px rgba(105, 174, 126, 0.4),
    0 8px 25px rgba(54, 134, 75, 0.4),
    0 4px 8px rgba(0,0,0,0.2) !important;
}

.forgot-text {
  font-weight: 500 !important;
}

/* Estilos de botones del login del index - Consolidados */
#loginSection .btn-primary {
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light)) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(54, 134, 75, 0.3) !important;
  color: var(--bakasta-black-green) !important;
  min-height: 42px !important;
}

#loginSection .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(54, 134, 75, 0.4) !important;
  background: linear-gradient(135deg, var(--bakasta-green-light), var(--bakasta-green)) !important;
}

#loginSection .btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 15px rgba(54, 134, 75, 0.3) !important;
}

#loginSection .btn-secondary {
  background: linear-gradient(135deg, var(--bakasta-dark-gray), var(--bakasta-black-green)) !important;
  border: 1px solid var(--bakasta-green-dark) !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  color: var(--bakasta-gray-light) !important;
  min-height: 42px !important;
}

#loginSection .btn-secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
  background: linear-gradient(135deg, var(--bakasta-black-green), var(--bakasta-dark-gray)) !important;
  border-color: var(--bakasta-green) !important;
  color: var(--bakasta-green-light) !important;
}

#loginSection .btn-secondary:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* Inputs del login del index - Consolidados */
#loginSection .modern-input-group {
  margin-bottom: 1.25rem !important;
}

#loginSection .modern-input-group .form-control {
  padding: 0.875rem 0.875rem 0.875rem 2.75rem !important;
  font-size: 0.95rem !important;
  min-height: 48px !important;
  border-radius: 12px !important;
}

#loginSection .modern-input-group .input-icon {
  left: 1rem !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 1rem !important;
  padding: 0.2rem !important;
}

#loginSection .modern-input-group .form-label {
  font-size: 0.9rem !important;
  margin-bottom: 0.5rem !important;
}

#loginSection .modern-input-group .form-text {
  font-size: 0.8rem !important;
  margin-top: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
}

/* Rules Page Styles - Solo se usan en reglas.html */
.rules-content {
  line-height: 1.6;
  color: white;
}

.rules-intro {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--bakasta-green-dark);
}

.rules-main-text {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: var(--bakasta-green-light);
}

.rules-quote {
  margin: 1.5rem 0;
  text-align: center;
}

.rules-quote blockquote {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--bakasta-green);
  padding: 1rem 2rem;
  background: rgba(105, 174, 126, 0.1);
  border-left: 4px solid var(--bakasta-green);
  border-radius: 0 8px 8px 0;
  margin: 0;
}

.rules-section {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: rgba(54, 134, 75, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(54, 134, 75, 0.1);
}

.rules-section-title {
  color: var(--bakasta-green-light);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--bakasta-green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rules-subsection {
  margin-bottom: 1.25rem;
}

.rules-subsection h4 {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.rules-detail {
  margin-left: 1.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(105, 174, 126, 0.08);
  border-left: 3px solid var(--bakasta-green);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: white;
}

.rules-penalty {
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 8px;
  color: white;
  font-weight: 600;
  text-align: center;
}

.rules-important {
  margin: 3rem 0;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
  border: 2px solid rgba(255, 193, 7, 0.3);
  border-radius: 16px;
  text-align: center;
}

.rules-important h3 {
  color: #ffc107;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rules-important p {
  color: #ffc107;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
}

.rules-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--bakasta-green-dark);
  text-align: center;
  color: var(--bakasta-gray-light);
  font-size: 0.9rem;
}

.rules-footer strong {
  color: var(--bakasta-green-light);
}

/* Rules responsive */
@media (max-width: 768px) {
  .rules-section {
    padding: 1rem;
    margin-bottom: 2rem;
  }
  
  .rules-section-title {
    font-size: 1.2rem;
  }
  
  .rules-subsection h4 {
    font-size: 0.95rem;
  }
  
  .rules-important {
    padding: 1.5rem;
    margin: 2rem 0;
  }
  
  .rules-important h3 {
    font-size: 1.2rem;
  }
  
  .rules-important p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .rules-section {
    padding: 0.75rem;
  }
  
  .rules-detail {
    margin-left: 1rem;
    padding: 0.5rem 0.75rem;
  }
  
  .rules-quote blockquote {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
  }
}

/* Estilos del panel de usuario - Consolidados */
#userPanel .btn-secondary {
  background: linear-gradient(135deg, var(--bakasta-dark-gray), var(--bakasta-black-green)) !important;
  border: 1px solid var(--bakasta-green-dark) !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  color: var(--bakasta-gray-light) !important;
  min-height: 42px !important;
}

#userPanel .btn-secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
  background: linear-gradient(135deg, var(--bakasta-black-green), var(--bakasta-dark-gray)) !important;
  border-color: var(--bakasta-green) !important;
  color: var(--bakasta-green-light) !important;
}

#userPanel .btn-secondary:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

#userPanel .btn-logout {
  background: linear-gradient(135deg, #dc3545, #c82333) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3) !important;
  color: white !important;
  min-height: 42px !important;
}

#userPanel .btn-logout:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4) !important;
  background: linear-gradient(135deg, #c82333, #a71e2a) !important;
}

#userPanel .btn-logout:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3) !important;
}

/* ===============
   Downloads Page Styles
   =============== */

.download-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.download-item:last-child {
  border-bottom: none;
}

.download-info {
  flex: 1;
  margin-right: 2rem;
}

.download-name {
  color: var(--bakasta-gray-light);
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.download-description {
  color: var(--bakasta-dark-gray);
  font-size: 0.95rem;
  margin: 0;
  opacity: 0.8;
}

.download-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Mobile responsive for download items */
@media (max-width: 768px) {
  .download-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
  }
  
  .download-info {
    margin-right: 0;
    margin-bottom: 0;
    flex: 1;
  }
  
  .download-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    min-width: 120px;
    flex-shrink: 0;
  }
  
  .file-size {
    align-self: flex-end;
    min-width: auto;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .download-btn {
    width: 100%;
    justify-content: center;
  }
}

.file-size {
  color: var(--bakasta-gray-light);
  font-weight: 500;
  font-size: 1rem;
  min-width: 80px;
  text-align: right;
  background: rgba(54, 134, 75, 0.1);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(54, 134, 75, 0.3);
}

/* Hero Download Button (Index Page) */
.hero .download-btn {
  background: linear-gradient(135deg, #FFC107, #FF9800) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 1rem 2rem !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #212421 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  min-width: 160px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4), 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
}

.hero .download-btn:hover {
  background: linear-gradient(135deg, #FFD54F, #FFB300) !important;
  color: #212421 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 35px rgba(255, 193, 7, 0.5), 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.hero .download-btn:active {
  transform: translateY(-1px) !important;
}

.hero .download-btn .download-arrow {
  font-style: normal !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  color: #212421 !important;
}

/* Regular Download Button (Downloads Page) */
.download-btn {
  background: linear-gradient(135deg, #FFC107, #FF9800) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #212421 !important;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  min-width: 120px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4), 0 3px 8px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
  z-index: 1 !important;
}

.download-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.6s ease !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.download-btn:hover {
  background: linear-gradient(135deg, #FFD54F, #FFB300) !important;
  color: #212421 !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 30px rgba(255, 193, 7, 0.5), 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

.download-btn:hover::before {
  left: 100% !important;
}

.download-btn:active {
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4), 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.download-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3), 0 6px 20px rgba(255, 193, 7, 0.4) !important;
}

/* Estilos para los botones de pago */
.btn-payment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 140px;
  padding: 25px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  transition: all 0.3s ease;
  text-decoration: none;
  color: #495057;
}

.btn-payment:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-color: #007bff;
  color: #007bff;
}

.btn-mercadopago:hover {
  border-color: #009ee3;
  color: #009ee3;
}

.payment-icon {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.btn-payment:hover .payment-icon {
  transform: scale(1.1);
}

.payment-text {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  line-height: 1.2;
}

/* Responsive adjustments para botones de pago */
@media (max-width: 768px) {
  .btn-payment {
    min-height: 100px;
    padding: 25px;
  }
  
  .payment-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
  }
  
  .payment-text {
    font-size: 16px;
  }
}

/* Botón Ver PJ Mejorado */
.btn-view-char {
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-dark));
  border: 2px solid var(--bakasta-green-light);
  color: #ffffff !important;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(54, 134, 75, 0.3);
  display: inline-block;
  font-size: 0.875rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  width: auto;
  text-align: center;
}

.btn-view-char::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-view-char:hover {
  background: linear-gradient(135deg, var(--bakasta-green-light), var(--bakasta-green));
  border-color: var(--bakasta-green);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(54, 134, 75, 0.4);
}

.btn-view-char:hover::before {
  left: 100%;
}

.btn-view-char:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(54, 134, 75, 0.3);
  color: #ffffff !important;
}
.btn-view-char .btn-icon {
  font-size: 1rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.btn-view-char .btn-text {
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Responsive adjustments for character cards */
@media (max-width: 768px) {
  .char-card {
    padding: 1rem;
  }
  
  .char-card img {
    width: 56px;
    height: 56px;
  }
  
  .char-info h4 {
    font-size: 1rem;
  }
  
  .char-meta {
    font-size: 0.8rem;
    margin: 0.25rem 0 0.5rem;
  }
  
  .btn-view-char {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* Hover effects for better interactivity */
.char-card:hover .btn-view-char {
  transform: scale(1.05);
}

.char-card .btn-view-char {
  transition: all 0.3s ease;
  color: #ffffff !important;
}

/* MY ACCOUNT MODULE */
.myaccount-table {
	width: 100%;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
}
.myaccount-table tr td:first-child {
	color: #666;
	font-weight: bold;
}
.myaccount-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 15px !important;
}
.myaccount-table tr:last-child td {
	border: 0px;
}

/* GENERAL TABLE UI */
.general-table-ui {
	width: 100%;
	table-layout: fixed;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	padding: 10px;
	margin: 10px 0px;
}
.general-table-ui tr td {
	padding: 5px;
	vertical-align: middle !important;
}
.general-table-ui tr:first-child td {
	color: #3f6588;
}
.general-table-ui tr:nth-child(2n+2) td {
	background: #fafafa;
}
.general-table-ui tr td {
	text-align: center;
}
.general-table-ui img {
	width: 50px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

/* TERMS OF SERVICE PAGE */
.tos_list li {
	color: #aa0000;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 40px;
}
.tos_list li p {
	color: #444;
	text-align: justify;
	text-justify: inter-word;
	text-transform: none;
	padding-right: 35px;
	font-size: 14px;
	font-weight: normal;
}


.module-requirements {
	font-size: 12px;
	margin-top: 20px;
}

/* SIDEBAR */
.panel-sidebar {
	background: var(--bakasta-black-green);
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 0 10px #e3e3e3;
	-webkit-box-shadow: 0 0 10px #e3e3e3;
	box-shadow: 0 0 10px #e3e3e3;
}

.panel-sidebar > .panel-heading {
	background: #fff;
	color: #3f6588;
	font-family: 'PT Sans', sans-serif;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border-bottom: 3px solid #3f6588;
}

.panel-usercp {
	background: url('../img/usercp_bg.jpg') no-repeat top center;
	background-size: cover;
}

.panel-usercp ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.panel-usercp ul li {
	display: table;
	width: 100%;
	vertical-align: middle;
	line-height: 30px;
}

.panel-usercp ul li a {
	color: #444 !important;
	font-weight: bold;
}
.panel-usercp ul li a:active, .panel-usercp ul li a:hover {
	color: #3f6588 !important;
}

.panel-usercp ul li img {
	position: relative;
	top: -2px;
	width: 25px;
	height: 25px;
	margin-right: 5px;
}

.sidebar-banner {
	margin: 20px 0px;
	border: 0px;
}

.sidebar-banner img {
	-moz-box-shadow: 0 0 10px #e3e3e3;
	-webkit-box-shadow: 0 0 10px #e3e3e3;
	box-shadow: 0 0 10px #e3e3e3;
	border: 0px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
}

/* GENERAL PANEL STYLING */
.panel-general {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}

.panel-body .panel-title {
	color: #666;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 20px !important;
	font-weight: 500;
}

/* ADD STATS MODULE */
.panel-addstats {
	margin-bottom: 30px;
	background: var(--bakasta-black-font-green);
	border: 1px solid var(--bakasta-green-dark);
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: var(--bakasta-gray-light);
}
.panel-addstats .character-avatar img {
	width: 100px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.panel-addstats .character-name {
	color: var(--bakasta-gray-light);
	font-family: 'PT Sans', sans-serif;
	font-size: 18px;
	border-bottom: 1px solid #e3e3e3;
	padding: 20px 0px;
	margin-bottom: 20px !important;
	font-weight: bold;
}

/* DOWNLOADS */
.panel-downloads {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}
	.download-description {
		font-size: 11px;
		position: relative;
		top: -7px;
		color: #777;
	}

.online-status-indicator {
	margin-left: 5px;
}

/* WEBENGINE CMS */
.webengine-powered { color: #777 !important; }
.webengine-powered:active, .webengine-powered:hover { color: #ff3214 !important; }

/* GLOBAL TOP BAR */
.global-top-bar {
	width: 100%;
	background: #101010;
	color: #777777;
	padding: 7px 0px 2px 0px;
	text-transform: uppercase;
	font-size: 12px;
}
	.global-top-bar .global-top-bar-content {
		max-width: 1300px;
		width: 100%;
		margin: 0px auto;
		padding: 0 15px;
	}
		.global-top-bar .global-top-bar-content .row {
			margin: 0px;
			padding: 0px;
		}
	.global-top-bar a.logout {
		color: #ff0000 !important;
	}
	.global-top-bar a {
		color: #999999 !important;
	}
	.global-top-bar a:hover {
		color: #ffffff !important;
	}
.global-top-bar-nopadding {
	padding: 0px !important;
}
.global-top-bar-separator {
	padding: 0px 5px;
}

/* LANGUAGE PICKER - Styles moved to language-selector.css */

/* WEBSITE LOGO */
.webengine-mu-logo {
	transition: all .3s ease;
}
	.webengine-mu-logo:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

/* HEADER INFO */
.header-info-container {
	max-width: 1300px;
	width: 100%;
	margin: 0px auto;
	text-align: right;
	padding: 0 15px;
}
	.header-info-container .header-info {
		display: inline-block;
		max-width: 350px;
		width: 100%;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(5px);
		margin: 0px;
		padding: 20px;
		overflow: auto;
		-moz-box-shadow: 0 0 15px rgba(0,0,0,0.7);
		-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.7);
		box-shadow: 0 0 15px rgba(0,0,0,0.7);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-khtml-border-radius: 5px;
		text-shadow: 1px 1px 3px #000000;
		color: #ffffff;
		border: 1px solid rgba(255,255,255,0.1);
		font-size: 12px;
	}

/* Responsive adjustments for fixed width elements */
@media (max-width: 1200px) {
	.global-top-bar .global-top-bar-content,
	.header-info-container {
		padding: 0 10px;
	}
}

@media (max-width: 768px) {
	.header-info-container .header-info {
		max-width: 100%;
		display: block;
		margin-top: 10px;
	}
}

/* Asegurar que el contenido principal se mantenga centrado */
main.container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 15px;
}

/* Ajustes para el navbar */
.navbar .container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 15px;
}
		.header-info-container .header-info .header-info-block {
			padding: 0px;
			color: #aaaaaa;
		}
		.header-info-container .header-info .header-info-block #tServerTime, .header-info-container .header-info .header-info-block #tLocalTime {
			color: #ffffff;
		}
		.header-info-container .header-info .header-info-block #tServerDate, .header-info-container .header-info .header-info-block #tLocalDate {
			color: #cccccc;
		}
		.header-info-container .header-info .header-info-block .online-count {
			color: #00ff00;
		}
	
/* ONLINE BAR */
.webengine-online-bar {
	width: 100%;
	background: #000000;
	border: 1px solid #555555;
	height: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
	overflow: hidden;
	transition: all .3s ease;
}
	.webengine-online-bar .webengine-online-bar-progress {
		height: 8px;
		background: #00ff00 url('../img/online_progress_bar.jpg') no-repeat left center;
		-webkit-border-radius: 0px 1px 1px 0px;
		-moz-border-radius: 0px 1px 1px 0px;
		-khtml-border-radius: 0px 1px 1px 0px;
		border-radius: 0px 1px 1px 0px;
	}
	.webengine-online-bar:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

/* MY ACCOUNT CHARACTER LIST */
.myaccount-character-block {
	background: #333;
	border: 1px solid #666;
	padding: 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	margin: 0px auto;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
	.myaccount-character-block img {
		width: 100px;
		height: auto;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-moz-box-shadow: 0 0 5px #000;
		-webkit-box-shadow: 0 0 5px #000;
		box-shadow: 0 0 5px #000;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
		.myaccount-character-block img:hover {
			-webkit-filter: brightness(120%);
			filter: brightness(120%);
		}
.myaccount-character-block-location {
	font-size: 12px;
	color: var(--bakasta-gray-light);;
	margin-bottom: 20px;
	margin-top: 2px;
	line-height: 1.2;
}
.myaccount-character-block-level {
	position: relative;
	top: -77px;
	display: inline-block;
	background: rgba(0,0,0,0.5);
	padding: 0px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
}
.myaccount-character-name a {
	font-weight: bold;
	color: var(--bakasta-gray-light);;
	font-size: 16px;
}

/* RANKINGS FILTER BY CLASS - Updated for new structure */

/* These styles are now handled by the .class-filter styles in the rankings-page section above */

/* Home - News List */

.botton-home-right .btn-secondary {
    background: linear-gradient(135deg, var(--bakasta-dark-gray), var(--bakasta-black-green)) !important;
    border: 1px solid var(--bakasta-green-dark) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    color: var(--bakasta-gray-light) !important;
    min-height: 42px !important;
}

.botton-home-right .btn-secondary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    background: linear-gradient(135deg, var(--bakasta-black-green), var(--bakasta-dark-gray)) !important;
    border-color: var(--bakasta-green) !important;
    color: var(--bakasta-green-light) !important;
}

.home-news-block-header{
    background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light));
    color: var(--bakasta-black-green);
    border: none;
    padding: 1.5rem 2rem;
}

.home-news-block .home-news-block-header h2 {
	padding: 0px !important;
	font-weight: 700;
	font-size: 1.8rem;
	text-align: center !important;
}

.home-news-block .home-news-block-header a {
	display: inline-block;
	padding-top: 5px;
	font-style: italic;
	font-size: 16px;
}

.home-news-block-article {
	margin-top: 10px;
  background: var(--bakasta-black-font-green);
  color: var(--bakasta-gray-light);
}

.home-news-block-article .home-news-block-article-type {
	display: block;
	padding: 5px;
	text-align: center;

  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light)) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(54, 134, 75, 0.3) !important;
  color: var(--bakasta-black-green) !important;
  min-height: 42px !important;
}
.home-news-block-article .home-news-block-article-type:hover{
  transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(54, 134, 75, 0.4) !important;
    background: linear-gradient(135deg, var(--bakasta-green-light), var(--bakasta-green)) !important;
}

.home-news-block-article .home-news-block-article-title-container {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-news-block-article .home-news-block-article-title, .home-news-block-article .home-news-block-article-date {
	line-height: 30px;
}

/* Email Hidden Style */
.email-hidden {
  background: var(--bakasta-green);
  color: white;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  margin: 0 0.1rem;
}

/* Event Timer Block */

.event-schedule-open {
	color: green;
}

.event-schedule-inprogress {
	color: orange;
}

.panel-sidebar-events .smalltext {
	font-size: 11px;
	position: relative;
	top: -5px;
}

/* NEWS MODULE */
.panel-news {
	margin-bottom: 30px;
	color: #333;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 0 0px #e3e3e3;
	-webkit-box-shadow: 0 0 0px #e3e3e3;
	box-shadow: 0 0 0px #e3e3e3;
}
.panel-news .panel-heading {
	padding-top: 10px;
	padding-bottom: 10px;
}
.panel-news .panel-title {
	color: #000000;
	font-size: 24px;
	font-weight: bold;
}
.panel-news .panel-body {
	padding: 10px;
}
.panel-news .panel-footer {
	border-top: 1px solid #e7e7e7;
	background: #fff;
	font-style: italic;
	font-size: 11px;
	height: 40px;
	color: #777;
}

/* MODERN RANKINGS MODULE - Moved to modern-rankings.css */
/* Old rankings_menu styles removed - now using Bootstrap nav-tabs */
/* Old rankings_menu span styles removed */
/* All old rankings_menu styles removed - now using Bootstrap nav-tabs */

.rankings_guild_logo tr td {
	border: 0px !important;
	padding: 0px !important;
	margin: 0px !important;
}
.rankings-gens-img {
	width: auto !important;
	height: 30px !important;
	border: 0 !important;
	-moz-box-shadow: 0 0 0px #000 !important;
	-webkit-box-shadow: 0 0 0px #000 !important;
	box-shadow: 0 0 0px #000 !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
}

.rankings-class-image-sidebar {
	width: 25px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

.adminbk-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #ffffff !important;
	border: 2px solid #000000 !important;
	color: #000000 !important;
	font-weight: bold !important;
  z-index: 999999;
}

.page-title{
  background: linear-gradient(135deg, var(--bakasta-green), var(--bakasta-green-light));
    color: var(--bakasta-black-green);
    border: none;
    padding: 1.5rem 2rem;
    margin-bottom: 30px;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 600;
}

table, table tr td{
  background-color: var(--bakasta-black-font-green) !important;
  color: var(--bakasta-gray-light) !important;
  border-color: var(--bakasta-green-dark) !important;
}

p{
  color: var(--bakasta-gray-light) !important;
}
/* ===== EVENTO ESTILO HOCMU ===== */

.modern-events-card .event-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ICONO CUADRADO */
.modern-events-card .event-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

/* colores tipo imagen */
.event-icon.red { background: linear-gradient(135deg, #ff2d2d, #a30000); }
.event-icon.gray { background: #2b2b2b; }
.event-icon.yellow { background: linear-gradient(135deg, #ffd700, #b8860b); }
.event-icon.blue { background: linear-gradient(135deg, #3a7bd5, #2c3e50); }

/* TEXTO */
.modern-events-card .event-name {
  font-size: 15px;
  font-weight: bold;
  color: #6ee7a8;
  text-transform: uppercase;
}

.modern-events-card .event-time {
  font-size: 12px;
  color: #aaa;
}

/* ===== CONTADOR ===== */

.modern-events-card .event-countdown {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 13px;
  background: #1c1f1c;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* VERDE */
.modern-events-card .countdown-normal {
  color: #7dffb3;
}

/* AMARILLO */
.modern-events-card .countdown-warning {
  color: #ffcc00;
}

/* ROJO */
.modern-events-card .countdown-danger {
  color: #ff4444;
}

/* OPEN */
.modern-events-card .countdown-open {
  color: #00ff88;
  box-shadow: 0 0 8px #00ff88;
}
/* ================================
   EVENTOS - CONTADOR COLORES
================================ */

/* 🔴 ROJO (normal - mucho tiempo) */
.modern-events-card .countdown-danger {
  color: #ff4444;
}

/* 🟡 AMARILLO (menos de 10 min) */
.modern-events-card .countdown-warning {
  color: #ffcc00;
}

/* 🟢 VERDE (menos de 5 min) */
.modern-events-card .countdown-open {
  color: #00ff88;
  box-shadow: 0 0 6px #00ff88;
}

/* estilo base contador (como tu imagen) */
.modern-events-card .event-countdown {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 14px;
  background: #1a1d1a;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}

/* ================================
   PAGINACION
================================ */

.modern-events-card #paginacion-eventos {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 12px 0 !important;
}

/* BOTONES */
.modern-events-card #paginacion-eventos button {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid #333 !important;
  background: #141714 !important;
  color: #aaa !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  transition: 0.2s !important;
}

/* HOVER */
.modern-events-card #paginacion-eventos button:hover {
  border-color: #00ff88 !important;
  color: #00ff88 !important;
  transform: scale(1.05);
}

/* ACTIVO */
.modern-events-card #paginacion-eventos button.active {
  background: #00ff88 !important;
  color: #000 !important;
  border-color: #00ff88 !important;
  box-shadow: 0 0 8px #00ff88 !important;
}
/* invasiones */
.modern-events-card .invasion {
  color: #00ccff;
}
/* PAGINACION */
.modern-events-card #paginacion-eventos {
  display:flex;
  justify-content:center;
  gap:6px;
  margin:12px 0;
}

.modern-events-card #paginacion-eventos button {
  width:32px;
  height:32px;
  border:1px solid #333;
  background:#141714;
  color:#aaa;
  border-radius:6px;
  cursor:pointer;
  transition:0.2s;
}

.modern-events-card #paginacion-eventos button:hover {
  color:#00ff88;
  border-color:#00ff88;
}

.modern-events-card #paginacion-eventos button.active {
  background:#00ff88;
  color:#000;
  box-shadow:0 0 8px #00ff88;
}
/* =====================================
   EVENTOS - ESTILO FINAL PRO
===================================== */

/* ITEM */
.modern-events-card .event-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: 0.2s;
}

/* hover suave */
.modern-events-card .event-item:hover {
  background: rgba(105, 174, 126, 0.05);
}

/* ICONO */
.modern-events-card .event-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: #2b2f2b;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* NOMBRE */
.modern-events-card .event-name {
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #69AE7E; /* verde de tu web */
}

/* PROXIMO */
.modern-events-card .event-time {
  font-size: 12px;
  color: #aaa;
}

/* =====================================
   CONTADOR (barra estilo MU)
===================================== */

.modern-events-card .event-countdown {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 14px;
  background: #1a1d1a;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}

/* 🔴 NORMAL */
.modern-events-card .countdown-danger {
  color: #ff4444;
}

/* 🟡 <10 min */
.modern-events-card .countdown-warning {
  color: #ffcc00;
}

/* 🟢 <5 min */
.modern-events-card .countdown-open {
  color: #69AE7E;
  box-shadow: 0 0 6px rgba(105,174,126,0.5);
}

/* =====================================
   PAGINACION
===================================== */

.modern-events-card #paginacion-eventos {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 12px 0;
}

/* botones */
.modern-events-card #paginacion-eventos button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #141714;
  color: #aaa;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}

/* hover */
.modern-events-card #paginacion-eventos button:hover {
  border-color: #69AE7E;
  color: #69AE7E;
  transform: scale(1.05);
}

/* activo */
.modern-events-card #paginacion-eventos button.active {
  background: #69AE7E;
  color: #000;
  border-color: #69AE7E;
  box-shadow: 0 0 8px rgba(105,174,126,0.6);
}
/* ======================
   TABS
====================== */

.events-tabs {
  display: flex;
  border-bottom: 1px solid #222;
}

.events-tabs .tab-btn {
  flex: 1;
  padding: 10px;
  background: #141714;
  border: none;
  color: #aaa;
  cursor: pointer;
  transition: 0.2s;
  font-weight: bold;
}

.events-tabs .tab-btn:hover {
  color: #69AE7E;
}

.events-tabs .tab-btn.active {
  color: #69AE7E;
  border-bottom: 2px solid #69AE7E;
  background: rgba(105,174,126,0.05);
}
.modern-events-card {
  width: 100%;
}
.events-tabs {
  display: flex;
  border-bottom: 1px solid #222;
}

.events-tabs .tab-btn {
  flex: 1;
  padding: 8px;
  font-size: 12px;
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
}

.events-tabs .tab-btn.active {
  color: #69AE7E;
  border-bottom: 2px solid #69AE7E;
}
/* Old rankings-class-filter media queries removed - now handled by rankings-page styles */