/* ==========================================================================
   Estilos Base y de Escritorio
   ========================================================================== */
body {
  background-color: #e6f0f3;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   MODO NOCHE - ESTILOS OSCUROS
   ========================================================================== */
[data-theme="dark"] body {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

[data-theme="dark"] .page-container {
  background-color: #1a1a1a;
}

/* Header en modo oscuro */
[data-theme="dark"] header.main-header {
  background-color: #0d1117;
  border-bottom: 1px solid #30363d;
}

[data-theme="dark"] .brand a {
  color: #f0f6fc;
}

[data-theme="dark"] .main-nav a {
  color: #8b949e;
}

[data-theme="dark"] .main-nav a:hover {
  background-color: #21262d;
  color: #f0f6fc;
}

[data-theme="dark"] .main-nav a.active {
  background-color: #da3633;
  color: #ffffff;
}

[data-theme="dark"] .user-actions a {
  color: #8b949e;
}

[data-theme="dark"] .header-avatar {
  border-color: #30363d;
}

/* Dropdowns en modo oscuro */
[data-theme="dark"] .dropdown-content {
  background-color: #21262d;
  border: 1px solid #30363d;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
}

[data-theme="dark"] .dropdown-content a {
  color: #e6edf3;
}

[data-theme="dark"] .dropdown-content a:hover {
  background-color: #30363d;
}

[data-theme="dark"] .dropdown-content a.admin-link {
  background-color: #2d2a00;
  color: #f1c40f;
}

[data-theme="dark"] .dropdown-content a.admin-link:hover {
  background-color: #3d3500;
}

[data-theme="dark"] .dropdown-content a.logout-link {
  color: #f85149;
  border-top-color: #30363d;
}

/* Contenido principal en modo oscuro */
[data-theme="dark"] .track_box {
  background-color: #21262d;
  border: 1px solid #30363d;
  color: #e6edf3;
}

[data-theme="dark"] .track_box h3 {
  color: #f0f6fc;
}

[data-theme="dark"] .top10 thead {
  background-color: #30363d;
  color: #f0f6fc;
}

[data-theme="dark"] .top10 th,
[data-theme="dark"] .top10 td {
  color: #e6edf3;
  border-color: #30363d;
}

[data-theme="dark"] .top10 tr:nth-child(even) {
  background-color: #161b22;
}

[data-theme="dark"] .top10 tr:hover {
  background-color: #21262d;
}

/* Menú móvil en modo oscuro */
[data-theme="dark"] .mobile-nav {
  background-color: #0d1117;
  border-right: 1px solid #30363d;
}

[data-theme="dark"] .mobile-user-profile {
  background-color: rgba(33, 38, 45, 0.5);
}

[data-theme="dark"] .mobile-user-info .mobile-user-nick {
  color: #f0f6fc;
}

[data-theme="dark"] .mobile-user-info .mobile-profile-link {
  color: #8b949e;
}

[data-theme="dark"] .mobile-nav-divider {
  border-top-color: #30363d;
}

[data-theme="dark"] .mobile-nav-link {
  color: #e6edf3;
}

[data-theme="dark"] .mobile-nav-link:hover {
  background-color: #21262d;
}

[data-theme="dark"] .mobile-nav-link.active {
  background-color: #30363d;
  border-left-color: #1f6feb;
  color: #f0f6fc;
}

[data-theme="dark"] .mobile-nav-link.admin-link.active {
  border-left-color: #f1c40f;
}

[data-theme="dark"] .mobile-nav-link.logout-link {
  background-color: #da3633;
}

[data-theme="dark"] .mobile-dropdown-content {
  background-color: rgba(13, 17, 23, 0.8);
}

[data-theme="dark"] .mobile-dropdown-content .mobile-nav-link {
  color: #8b949e;
}

[data-theme="dark"] .mobile-dropdown-content .mobile-nav-link:hover {
  background-color: #21262d;
  color: #f0f6fc;
}

/* Formularios y inputs en modo oscuro */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #21262d;
  border: 1px solid #30363d;
  color: #e6edf3;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #1f6feb;
  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.3);
}

/* Botones en modo oscuro */
[data-theme="dark"] button {
  background-color: #21262d;
  border: 1px solid #30363d;
  color: #e6edf3;
}

[data-theme="dark"] button:hover {
  background-color: #30363d;
}

/* Tablas en modo oscuro */
[data-theme="dark"] table {
  background-color: #21262d;
  border: 1px solid #30363d;
}

[data-theme="dark"] th {
  background-color: #30363d;
  color: #f0f6fc;
}

[data-theme="dark"] td {
  color: #e6edf3;
  border-color: #30363d;
}

/* Cards y contenedores en modo oscuro */
[data-theme="dark"] .card,
[data-theme="dark"] .container,
[data-theme="dark"] .box {
  background-color: #21262d;
  border: 1px solid #30363d;
  color: #e6edf3;
}

/* Enlaces en modo oscuro */
[data-theme="dark"] a {
  color: #58a6ff;
}

[data-theme="dark"] a:hover {
  color: #79c0ff;
}

/* Footer en modo oscuro */
[data-theme="dark"] footer {
  color: #8b949e;
}

/* Elementos específicos que pueden quedar blancos */
[data-theme="dark"] .alert,
[data-theme="dark"] .notification,
[data-theme="dark"] .message {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] .success {
  background-color: #0d4429 !important;
  color: #3fb950 !important;
  border-color: #1a7f37 !important;
}

[data-theme="dark"] .alert-info,
[data-theme="dark"] .info {
  background-color: #0c2d6b !important;
  color: #58a6ff !important;
  border-color: #1f6feb !important;
}

[data-theme="dark"] .alert-warning,
[data-theme="dark"] .warning {
  background-color: #7d4e00 !important;
  color: #f1c40f !important;
  border-color: #9a6700 !important;
}

[data-theme="dark"] .alert-danger,
[data-theme="dark"] .error {
  background-color: #86181d !important;
  color: #f85149 !important;
  border-color: #da3633 !important;
}

/* Paneles y secciones */
[data-theme="dark"] .panel,
[data-theme="dark"] .section,
[data-theme="dark"] .widget {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

/* Títulos y headers de secciones */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #f0f6fc !important;
}

/* Elementos con fondo blanco específicos */
[data-theme="dark"] .white-bg,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .background-white {
  background-color: #21262d !important;
  color: #e6edf3 !important;
}

/* Badges y etiquetas */
[data-theme="dark"] .badge,
[data-theme="dark"] .tag,
[data-theme="dark"] .label {
  background-color: #30363d !important;
  color: #e6edf3 !important;
  border-color: #484f58 !important;
}

/* Elementos de lista */
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .list-item {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

/* Modales y overlays */
[data-theme="dark"] .modal,
[data-theme="dark"] .overlay,
[data-theme="dark"] .popup {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background-color: #30363d !important;
  border-color: #484f58 !important;
}

/* Elementos de navegación adicionales */
[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .nav-pills {
  background-color: #21262d !important;
  border-color: #30363d !important;
}

[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .nav-pills .nav-link {
  color: #8b949e !important;
  background-color: transparent !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-pills .nav-link.active {
  color: #f0f6fc !important;
  background-color: #30363d !important;
  border-color: #484f58 !important;
}

/* Elementos específicos del portal que pueden estar blancos */
[data-theme="dark"] .leaderboard,
[data-theme="dark"] .leaderboard-box,
[data-theme="dark"] .stats-box,
[data-theme="dark"] .info-box {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border: 1px solid #30363d !important;
}

/* Botones específicos */
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-white {
  background-color: #30363d !important;
  color: #e6edf3 !important;
  border-color: #484f58 !important;
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-white:hover {
  background-color: #484f58 !important;
  color: #f0f6fc !important;
}

/* Elementos específicos que veo en la imagen */
[data-theme="dark"] .strikes-section,
[data-theme="dark"] .strikes-box,
[data-theme="dark"] .no-strikes {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border: 1px solid #30363d !important;
}

/* Iconos y elementos de estado */
[data-theme="dark"] .strike-icon,
[data-theme="dark"] .status-icon {
  filter: brightness(0.8) !important;
}

/* Cualquier div o contenedor sin clase específica */
[data-theme="dark"] div:not([class*="theme"]):not([class*="icon"]) {
  background-color: inherit;
  color: inherit;
}

/* Forzar elementos stubborn que no cambian */
[data-theme="dark"] * {
  scrollbar-color: #30363d #0d1117;
}

/* Elementos con background inline o específico */
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
  background-color: #21262d !important;
  color: #e6edf3 !important;
}

[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color: #000000"] {
  color: #e6edf3 !important;
}

/* Elementos de texto específicos */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black {
  color: #e6edf3 !important;
}

[data-theme="dark"] .text-light,
[data-theme="dark"] .text-white {
  color: #f0f6fc !important;
}

/* Elementos de Bootstrap o frameworks que puedan estar presentes */
[data-theme="dark"] .bg-light {
  background-color: #21262d !important;
}

[data-theme="dark"] .border-light {
  border-color: #30363d !important;
}

/* REGLAS UNIVERSALES AGRESIVAS PARA MODO NOCHE */
[data-theme="dark"] *:not(img):not(svg):not(canvas):not(video):not(.theme-icon):not(.theme-icon-mobile) {
  /* Cambiar cualquier fondo blanco o muy claro */
  background-color: var(--bg-override, inherit) !important;
  color: var(--text-override, inherit) !important;
}

[data-theme="dark"] {
  --bg-override: #21262d;
  --text-override: #e6edf3;
}

/* Forzar elementos con fondos blancos específicos */
[data-theme="dark"] *[style*="background: white"],
[data-theme="dark"] *[style*="background: #fff"],
[data-theme="dark"] *[style*="background: #ffffff"],
[data-theme="dark"] *[style*="background-color: white"],
[data-theme="dark"] *[style*="background-color: #fff"],
[data-theme="dark"] *[style*="background-color: #ffffff"],
[data-theme="dark"] *[style*="background-color: rgb(255, 255, 255)"],
[data-theme="dark"] *[style*="background-color: rgba(255, 255, 255"] {
  background-color: #21262d !important;
  color: #e6edf3 !important;
}

/* Elementos que típicamente son blancos en portales */
[data-theme="dark"] .content,
[data-theme="dark"] .main-content,
[data-theme="dark"] .page-content,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .row > div,
[data-theme="dark"] .col,
[data-theme="dark"] [class*="col-"] {
  background-color: inherit !important;
  color: inherit !important;
}

/* Elementos específicos del home que pueden ser blancos */
[data-theme="dark"] .home-section,
[data-theme="dark"] .dashboard-widget,
[data-theme="dark"] .summary-box,
[data-theme="dark"] .activity-feed,
[data-theme="dark"] .recent-activity {
  background-color: #21262d !important;
  color: #e6edf3 !important;
  border: 1px solid #30363d !important;
}

/* Transiciones suaves para todos los elementos */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Scrollbar en modo oscuro */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0d1117;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

/* Overlay en modo oscuro */
[data-theme="dark"] .nav-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.page-container {
  transition: transform 0.3s ease-in-out;
  background-color: #e6f0f3;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* --- Header --- */
header.main-header {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 0 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
}

.brand a {
  font-size: 1.5em;
  font-weight: 700;
  color: #ecf0f1;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 1px white);
}

.main-nav a {
  color: #bdc3c7;
  text-decoration: none;
  padding: 10px 15px;
  margin: 0 5px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-weight: 500;
}

.main-nav a:hover {
  background-color: #34495e;
  color: #ffffff;
}

.main-nav a.active {
  color: #ffffff;
  background-color: #e74c3c;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-actions a {
  color: #bdc3c7;
  text-decoration: none;
  font-weight: 500;
}

.user-actions .profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #566573;
}

.logout-link {
  background-color: #c0392b;
  color: #ffffff !important;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}
.logout-link:hover {
    background-color: #e74c3c;
}

/* --- Menú Móvil (Oculto por defecto en escritorio) --- */
.mobile-nav-toggle, .mobile-nav, .nav-overlay {
  display: none;
}

/* --- Botón de Modo Noche --- */
.theme-toggle {
  background: transparent;
  border: 2px solid #bdc3c7;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 1.2em;
  color: #bdc3c7;
}

.theme-toggle:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Cambio de icono en modo oscuro */
[data-theme="dark"] .theme-toggle {
  border-color: #8b949e;
  color: #8b949e;
}

[data-theme="dark"] .theme-toggle:hover {
  border-color: #f0f6fc;
  background-color: rgba(240, 246, 252, 0.1);
  color: #f0f6fc;
}

[data-theme="dark"] .theme-toggle .theme-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle::after {
  content: '☀️';
  font-size: 1.2em;
}

/* --- Estilos de Contenido General --- */
.cups_container { display: flex; justify-content: center; margin: 20px auto; max-width: 800px; }
.cups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.cup img { width: 100px; height: 100px; object-fit: contain; border: 3px solid transparent; border-radius: 10px; background-color: #fff; transition: transform 0.2s, border-color 0.2s; }
.cup.selected img { border-color: #1e90ff; transform: scale(1.05); }
.track_container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
.track_box { background-color: #ffffff; border-radius: 10px; padding: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); text-align: center; }
.track_box h3 { font-size: 16px; margin: 10px 0; }
.track_box img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; }
.top10 { width: 100%; border-collapse: collapse; margin-top: 10px; }
.top10 th, .top10 td { padding: 4px 6px; text-align: center; font-size: 14px; }
.top10 thead { background-color: #d3ebf4; }
.rank { font-weight: bold; }

/* ==========================================================================
   Estilos para Móviles (Responsive)
   ========================================================================== */
@media (max-width: 900px) {
  main {
    padding: 10px;
  }

  .desktop-nav {
    display: none;
  }

  /* Botón Hamburguesa */
  .mobile-nav-toggle { display: block; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1051; width: 30px; height: 30px; position: relative; }
  .mobile-nav-toggle .sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); }
  .mobile-nav-toggle::before, .mobile-nav-toggle::after { content: ''; position: absolute; left: 0; width: 25px; height: 3px; background-color: white; transition: transform 0.3s ease-in-out, top 0.3s ease-in-out; }
  .mobile-nav-toggle::before { top: 6px; }
  .mobile-nav-toggle::after { top: 18px; }
  .mobile-nav-toggle[aria-expanded="true"]::before { transform: rotate(45deg); top: 12px; }
  .mobile-nav-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); top: 12px; }

  /* Menú Lateral (Off-canvas) */
  .mobile-nav { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 80%; max-width: 300px; height: 100%; background-color: #2c3e50; padding: 20px; box-sizing: border-box; transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 1050; }
  .mobile-nav.active { transform: translateX(0); }
  .mobile-nav a { color: #ecf0f1; padding: 15px 10px; text-align: left; font-size: 1.1em; text-decoration: none; border-bottom: 1px solid #34495e; }
  .mobile-nav a.active { color: #e74c3c; }
  .mobile-user-section { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; margin-bottom: 15px; }
  .mobile-user-section .profile-link { font-size: 1.1em; color: #ecf0f1; border-bottom: none; padding: 0; }
  .mobile-user-section .logout-link { font-size: 0.9em; }
  .mobile-nav-divider { border: 0; height: 1px; background-color: #34495e; margin: 10px 0; }
  
  /* Overlay y desplazamiento de página */
  .nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1049; }
  .nav-overlay.active { display: block; }
  .page-container.active { transform: translateX(80%); max-width: calc(100% - 300px); }

  .brand-text { display: none; }
  
  /* Contenido Móvil */
  .cups { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .cup img { width: 70px; height: 70px; }
  .track_container { grid-template-columns: 1fr; gap: 15px; }
  .track_box { margin: 0; }
  .top-section { flex-direction: column; align-items: center; }
  .leaderboard-box { width: 100%; max-width: 400px; box-sizing: border-box; }
  
  /* ======================================================= */
  /* == ESTILOS CORREGIDOS PARA LA TABLA DE WARS EN MÓVIL == */
  /* ======================================================= */
  .war-table {
      border: none;
      box-shadow: none;
  }
  .war-table thead {
      display: none; /* Ocultamos la cabecera de la tabla */
  }
  .war-table tr {
      display: block;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #fff;
      padding: 10px;
  }
  .war-table td {
      display: flex; /* Usamos flex para alinear etiqueta y valor */
      justify-content: space-between; /* Espacio entre ellos */
      text-align: right;
      padding: 8px 5px;
      border-bottom: 1px solid #f0f0f0;
  }
  .war-table td:last-child {
      border-bottom: 0;
  }
  .war-table td::before {
      content: attr(data-label); /* Usamos el data-label como etiqueta */
      font-weight: bold;
      text-align: left;
      margin-right: 10px;
      color: #555;
  }
}