/* ============================================================
   FONDO PERSONALIZADO - Overlay + Override de colores
   ============================================================ */

/* El body recibe la imagen de fondo */
body.has-custom-fund {
  background-image: var(--custom-fund-url) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Overlay con opacidad ajustable */
body.has-custom-fund::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--custom-fund-overlay-color, #0a0e14);
  opacity: var(--custom-fund-overlay-opacity, 0.4);
  pointer-events: none;
  z-index: 1;
  transition: opacity .25s ease;
}

/* #app y modales por encima del overlay */
body.has-custom-fund #app {
  position: relative;
  z-index: 2;
}
body.has-custom-fund .modal-overlay {
  z-index: 99999;
}

/* Colores del fondo aplicados al tema (solo si el toggle esta ON) */
body.has-custom-fund-colors {
  --bg-0: var(--custom-fund-bg-0) !important;
  --bg-1: var(--custom-fund-bg-1) !important;
  --bg-2: var(--custom-fund-bg-2) !important;
  --bg-3: var(--custom-fund-bg-3) !important;
  --text: var(--custom-fund-text) !important;
  --text-dim: var(--custom-fund-text-dim) !important;
  --accent: var(--custom-fund-accent) !important;
  --accent-2: var(--custom-fund-accent-2) !important;
  --border: var(--custom-fund-border) !important;
  --border-strong: var(--custom-fund-border-strong) !important;
}

/* Los paneles necesitan ser semitransparentes cuando hay fondo activo */
body.has-custom-fund-colors .topbar,
body.has-custom-fund-colors .menu-card,
body.has-custom-fund-colors .card,
body.has-custom-fund-colors .profile-card,
body.has-custom-fund-colors .hero-leaderboard,
body.has-custom-fund-colors .room-card,
body.has-custom-fund-colors .room-player,
body.has-custom-fund-colors .chat-sidebar,
body.has-custom-fund-colors .chat-panel,
body.has-custom-fund-colors .login-card,
body.has-custom-fund-colors .modal-card,
body.has-custom-fund-colors .admin-sidebar,
body.has-custom-fund-colors .admin-user-card,
body.has-custom-fund-colors .settings-cat,
body.has-custom-fund-colors .live-room-card,
body.has-custom-fund-colors .live-user-card,
body.has-custom-fund-colors .fr-card,
body.has-custom-fund-colors .shop-item,
body.has-custom-fund-colors .tournament-card,
body.has-custom-fund-colors .community-post,
body.has-custom-fund-colors .community-composer {
  background-color: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Temas claros: usar blanco con transparencia */
body.has-custom-fund-colors.theme-claro .topbar,
body.has-custom-fund-colors.theme-claro .menu-card,
body.has-custom-fund-colors.theme-claro .card {
  background-color: rgba(255, 255, 255, 0.35) !important;
}

/* Controles del fondo en settings */
.fondo-settings-card {
  padding: 16px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
}

.fondo-opacity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.fondo-opacity-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent-2);
}

.fondo-opacity-val {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
  color: var(--accent-2);
}

.fondo-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  cursor: pointer;
}

.fondo-toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-2);
  cursor: pointer;
}