/* ========================================================
   DAYZELCORP ESPORTS — DESIGN SYSTEM GLOBAL OFICIAL
   PALETA DE COLORES + SISTEMA GLOBAL DE BOTONES + SECTION HEADERS
   ======================================================== */

:root {
  /* ========================================================
     1. PALETA GLOBAL OFICIAL
     ======================================================== */

  /* BACKGROUNDS (Jerarquía Nivel 0 y Nivel 1) */
  --color-bg: #080B10;           /* NIVEL 0: Fondo General */
  --color-bg-secondary: #0D1117; /* NIVEL 1: Navbar, Footer, Secciones Principales */

  /* SURFACES (Jerarquía Nivel 2, Nivel 3, Nivel 4) */
  --color-surface: #111827;      /* NIVEL 2: Paneles, Formularios, Contenedores */
  --color-card: #151B24;         /* NIVEL 3: Cards, Torneos, Equipos, Noticias, Rankings */
  --color-card-hover: #1C2533;   /* NIVEL 4: Hover de Cards y Elementos Interactivos */

  /* BORDERS */
  --color-border: #263241;
  --color-border-hover: #3A4758;

  /* TEXT */
  --color-text: #FFFFFF;           /* Títulos principales / Texto destacado */
  --color-text-secondary: #CBD5E1; /* Texto importante / Links normales navbar / Subtítulos */
  --color-text-muted: #94A3B8;     /* Descripciones / Fechas / Auxiliares */
  --color-text-disabled: #64748B;  /* Elementos deshabilitados / Inactivos */

  /* PRIMARY BRAND (AMARILLO DAYZELCORP) */
  --color-primary: #FFD600;
  --color-primary-hover: #E6C200;
  --color-primary-soft: rgba(255, 214, 0, 0.10);

  /* SECONDARY (CYAN DAYZELCORP - TECNOLÓGICO/INFORMATIVO) */
  --color-secondary: #00D9FF;
  --color-secondary-hover: #00B8D9;
  --color-secondary-soft: rgba(0, 217, 255, 0.10);

  /* BRAND SECONDARY (MORADO) */
  --color-brand: #8B5CF6;

  /* STATUS */
  --color-success: #22C55E;
  --color-success-soft: rgba(34, 197, 94, 0.10);

  --color-danger: #EF4444;
  --color-danger-soft: rgba(239, 68, 68, 0.10);

  --color-warning: #F59E0B;
  --color-warning-soft: rgba(245, 158, 11, 0.10);

  --color-neutral: #64748B;

  /* RANKING */
  --rank-gold: #FFD600;
  --rank-silver: #CBD5E1;
  --rank-bronze: #CD7F32;

  /* ========================================================
     15. DESIGN TOKENS PARA BOTONES
     ======================================================== */
  --btn-primary-bg: #FFD600;
  --btn-primary-hover: #E6C200;
  --btn-primary-text: #080B10;

  --btn-secondary-bg: transparent;
  --btn-secondary-border: #263241;
  --btn-secondary-hover: #151B24;
  --btn-secondary-border-hover: #3A4758;
  --btn-secondary-text: #CBD5E1;
  --btn-secondary-text-hover: #FFFFFF;

  --btn-outline-border: #FFD600;
  --btn-outline-text: #FFD600;
  --btn-outline-hover: rgba(255, 214, 0, 0.10);

  --btn-ghost-text: #94A3B8;
  --btn-ghost-hover-bg: #111827;
  --btn-ghost-hover-text: #FFFFFF;

  --btn-cyan-border: #00D9FF;
  --btn-cyan-text: #00D9FF;
  --btn-cyan-hover: rgba(0, 217, 255, 0.10);

  --btn-success: #22C55E;
  --btn-danger: #EF4444;

  --btn-disabled-bg: #111827;
  --btn-disabled-border: #263241;
  --btn-disabled-text: #64748B;

  --btn-community-bg: #111827;
  --btn-community-border: #263241;
  --btn-community-hover: #151B24;
  --btn-community-border-hover: #00D9FF;
  --btn-community-text-hover: #00D9FF;
  --btn-community-icon: #25D366;

  --btn-radius: 10px;

  /* ========================================================
     16. DESIGN TOKENS PARA TÍTULOS DE SECCIÓN
     ======================================================== */
  --section-eyebrow-color: #00D9FF;
  --section-eyebrow-primary: #FFD600;
  --section-title-color: #FFFFFF;
  --section-description-color: #94A3B8;

  --section-eyebrow-size: 11px;
  --section-title-size: 30px;
  --section-description-size: 14px;

  --section-eyebrow-gap: 8px;
  --section-title-gap: 10px;
  --section-content-gap: 24px;

  /* ========================================================
     ALIASES DE COMPATIBILIDAD CON SISTEMAS PREVIOS
     ======================================================== */
  --dz-bg: var(--color-bg);
  --dz-navbar: var(--color-bg-secondary);
  --dz-surface: var(--color-surface);
  --dz-card: var(--color-card);
  --dz-card-hover: var(--color-card-hover);
  --dz-border: var(--color-border);

  --dz-text-primary: var(--color-text);
  --dz-text-secondary: var(--color-text-secondary);
  --dz-text-disabled: var(--color-text-disabled);

  --dz-brand-yellow: var(--color-primary);
  --dz-brand-cyan: var(--color-secondary);
  --dz-brand-purple: var(--color-brand);

  --dz-status-open: var(--color-success);
  --dz-status-live: var(--color-danger);
  --dz-status-finished: var(--color-neutral);
  --dz-status-prize: var(--rank-gold);

  --dz-primary: var(--color-primary);
  --dz-secondary: var(--color-secondary);
  --dz-tertiary: var(--color-brand);

  --dz-surface-1: var(--color-surface);
  --dz-surface-2: var(--color-card);
  --dz-surface-3: var(--color-card-hover);

  --dz-text-1: var(--color-text);
  --dz-text-2: var(--color-text-secondary);
  --dz-text-3: var(--color-secondary);
  --dz-text-muted: var(--color-text-muted);

  --shell-bg: var(--color-bg);
  --shell-navbar: var(--color-bg-secondary);
  --shell-surface: var(--color-surface);
  --shell-surface-2: var(--color-card);
  --shell-border: var(--color-border);
  --shell-brand: var(--color-primary);
  --shell-accent: var(--color-secondary);
  --shell-muted: var(--color-text-secondary);
  --shell-muted-2: var(--color-text-disabled);

  --ds-surface: var(--color-surface);
  --ds-surface-2: var(--color-card);
  --ds-border: var(--color-border);
  --ds-border-strong: var(--color-border-hover);
  --ds-text: var(--color-text);
  --ds-text-muted: var(--color-text-secondary);
  --ds-text-soft: var(--color-text-muted);
  --ds-focus: var(--color-secondary);

  --bonox-button: #FFD600;
  --bonox-button-dark: #E6C200;
  --bonox-button-text: #080B10;
}

/* ========================================================
   BASE BODY & JERARQUÍA DE TIPOGRAFÍA
   ======================================================== */
html,
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  background-image: none !important;
}

body::before,
body::after {
  background: none !important;
}

::selection {
  background: var(--color-secondary-soft);
  color: var(--color-text);
}

/* H1 / Títulos Principales -> #FFFFFF */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title-primary,
.page-title {
  color: var(--color-text) !important;
}

/* Texto importante -> #CBD5E1 */
.subtitle,
.text-secondary,
.info-text,
.card-subtitle,
.card-text-secondary {
  color: var(--color-text-secondary) !important;
}

/* Descripciones / Fechas / Helper -> #94A3B8 */
p,
.description,
.text-muted,
.label-text,
.date-text,
.helper-text,
small, time {
  color: var(--color-text-muted) !important;
}

/* Disabled -> #64748B */
.text-disabled,
:disabled,
.disabled {
  color: var(--color-text-disabled) !important;
}

/* Enlaces ordinarios */
a:not(.btn):not(.th-btn):not(.hero-cta-btn):not(.gd-btn):not(.btn-cta):not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-cyan):not(.btn-outline-primary):not(.dz-hero__cta):not(.nav-link):not(.desktop-menu a):not(.card):not(.esports-card):not(.team-card):not(.explore-card) {
  color: var(--color-text-secondary) !important;
  transition: color 0.15s ease;
  text-decoration: none;
}

a:not(.btn):not(.th-btn):not(.hero-cta-btn):not(.gd-btn):not(.btn-cta):not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-cyan):not(.btn-outline-primary):not(.dz-hero__cta):not(.nav-link):not(.desktop-menu a):not(.card):not(.esports-card):not(.team-card):not(.explore-card):hover {
  color: var(--color-text) !important;
}

/* ========================================================
   NAVBAR SPECIFIC RULES
   ======================================================== */
header,
nav,
.navbar,
.site-header,
.mlbb-header,
.dashboard-header,
.topbar,
.dashboard-nav {
  background-color: var(--color-bg-secondary) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Links normales del navbar: Gris claro (#CBD5E1) */
.navbar-nav .nav-link,
.mlbb-header__nav a,
.site-header a,
.dashboard-nav__link,
.desktop-menu a {
  color: var(--color-text-secondary) !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

/* Hover de links del navbar: Blanco (#FFFFFF) */
.navbar-nav .nav-link:hover,
.mlbb-header__nav a:hover,
.site-header a:hover,
.dashboard-nav__link:hover,
.desktop-menu a:hover {
  color: var(--color-text) !important;
}

/* Link activo del navbar: Amarillo Dayzel (#FFD600) */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.is-active,
.mlbb-header__nav a.is-active,
.dashboard-nav__link.is-active,
.desktop-menu a.active,
.nav-link.active,
.nav-link.is-active {
  color: var(--color-primary) !important;
}

/* Línea activa del navbar (Amarillo Dayzel #FFD600) */
.desktop-menu a::after,
.nav-link::after,
.nav-item.active::after {
  background-color: var(--color-primary) !important;
}

/* ========================================================
   SISTEMA GLOBAL DE BOTONES — ESTRUCTURA & TIPOGRAFÍA
   ======================================================== */
.btn,
.th-btn,
button,
a.btn {
  font-weight: 700;
  letter-spacing: 0.8px;
  border-radius: var(--btn-radius) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

/* TAMAÑOS ESTÁNDAR */
.btn-sm,
.btn.btn-sm,
.th-btn.btn-sm {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
}

.btn-md,
.btn,
.btn.btn-md,
.th-btn {
  height: 44px;
  padding: 0 20px;
  font-size: 13px;
}

.btn-lg,
.btn.btn-lg,
.th-btn.btn-lg,
.btn-cta,
.hero-cta-btn {
  height: 50px !important;
  padding: 0 26px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* 1. BOTÓN PRIMARY — ACCIÓN PRINCIPAL (#FFD600 con Texto Negro #080B10) */
body .btn-primary,
body .btn-cta,
body .btn-yellow,
body .dz-hero__cta,
body .hero-cta-btn,
body .gd-btn--primary,
body .hero-panel .btn-primary,
body .hero-slider .btn-primary,
body button[type="submit"]:not(.btn-secondary):not(.btn-ghost):not(.btn-outline):not(.btn-cyan):not(.btn-danger),
.btn-primary,
.btn-cta,
.btn-yellow,
.dz-hero__cta,
.hero-cta-btn {
  background-color: var(--btn-primary-bg) !important;
  background-image: none !important;
  color: #080B10 !important;
  font-weight: 800 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

body .btn-primary:hover,
body .btn-cta:hover,
body .btn-yellow:hover,
body .dz-hero__cta:hover,
body .hero-cta-btn:hover,
body .gd-btn--primary:hover,
body button[type="submit"]:not(.btn-secondary):not(.btn-ghost):not(.btn-outline):not(.btn-cyan):not(.btn-danger):hover,
.btn-primary:hover,
.btn-cta:hover,
.btn-yellow:hover,
.dz-hero__cta:hover,
.hero-cta-btn:hover {
  background-color: var(--btn-primary-hover) !important;
  color: #080B10 !important;
  transform: translateY(-1px) !important;
}

/* TODO TEXTO, SPAN, ICONO E HIJOS DENTRO DE BOTONES AMARILLOS SON SIEMPRE NEGROS #080B10 */
body .btn-primary *,
body .btn-cta *,
body .btn-yellow *,
body .dz-hero__cta *,
body .hero-cta-btn *,
body .hero-panel .btn-primary *,
body .hero-slider .btn-primary *,
body button[type="submit"]:not(.btn-secondary):not(.btn-ghost):not(.btn-outline):not(.btn-cyan):not(.btn-danger) *,
body .btn-primary::before,
body .btn-primary::after,
body .btn-cta::before,
body .btn-cta::after,
body .btn-yellow::before,
body .btn-yellow::after,
.btn-primary *,
.btn-cta *,
.btn-yellow *,
.dz-hero__cta * {
  color: #080B10 !important;
  fill: #080B10 !important;
  stroke: #080B10 !important;
}

/* 2. BOTÓN SECONDARY — ACCIÓN SECUNDARIA (Borde #263241, Texto #CBD5E1 -> Hover #151B24, Borde #3A4758, Texto #FFFFFF) */
body .btn-secondary,
body .btn-default,
body .th-btn.style2,
body .th-btn.style-border,
body .hero-panel .btn:not(.btn-primary):not(.btn-yellow):not(.btn-cta):not(.dz-hero__cta),
body .hero-slider .btn:not(.btn-primary):not(.btn-yellow):not(.btn-cta):not(.dz-hero__cta),
.btn-secondary,
.btn-default {
  background-color: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text) !important;
  font-weight: 700 !important;
}

body .btn-secondary:hover,
body .btn-default:hover,
body .th-btn.style2:hover,
body .th-btn.style-border:hover,
body .hero-panel .btn:not(.btn-primary):not(.btn-yellow):not(.btn-cta):not(.dz-hero__cta):hover,
body .hero-slider .btn:not(.btn-primary):not(.btn-yellow):not(.btn-cta):not(.dz-hero__cta):hover,
.btn-secondary:hover,
.btn-default:hover {
  background-color: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-border-hover) !important;
  color: var(--btn-secondary-text-hover) !important;
  transform: translateY(-1px) !important;
}

body .btn-secondary *,
body .btn-default *,
.btn-secondary * {
  color: inherit !important;
}

/* 3. BOTÓN OUTLINE PRIMARY (Borde #FFD600, Texto #FFD600 -> Hover rgba(255,214,0,0.10)) */
body .btn-outline-primary,
body .btn-outline-yellow,
body .btn-outline,
.btn-outline-primary,
.btn-outline-yellow,
.btn-outline {
  background-color: transparent !important;
  border: 1px solid var(--btn-outline-border) !important;
  color: var(--btn-outline-text) !important;
  font-weight: 700 !important;
}

body .btn-outline-primary:hover,
body .btn-outline-yellow:hover,
body .btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-yellow:hover,
.btn-outline:hover {
  background-color: var(--btn-outline-hover) !important;
  border-color: var(--btn-outline-border) !important;
  color: var(--btn-outline-text) !important;
  transform: translateY(-1px) !important;
}

body .btn-outline-primary * {
  color: inherit !important;
}

/* 4. BOTÓN GHOST (Texto #94A3B8 -> Hover bg #111827, Texto #FFFFFF) */
body .btn-ghost,
.btn-ghost {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: var(--btn-ghost-text) !important;
  font-weight: 600 !important;
}

body .btn-ghost:hover,
.btn-ghost:hover {
  background-color: var(--btn-ghost-hover-bg) !important;
  color: var(--btn-ghost-hover-text) !important;
  transform: translateY(-1px) !important;
}

/* 5. BOTÓN CYAN (Borde #00D9FF, Texto #00D9FF -> Hover bg rgba(0,217,255,0.10)) */
body .btn-cyan,
.btn-cyan {
  background-color: transparent !important;
  border: 1px solid var(--btn-cyan-border) !important;
  color: var(--btn-cyan-text) !important;
  font-weight: 700 !important;
}

body .btn-cyan:hover,
.btn-cyan:hover {
  background-color: var(--btn-cyan-hover) !important;
  border-color: var(--btn-cyan-border) !important;
  color: var(--btn-cyan-text) !important;
  transform: translateY(-1px) !important;
}

/* 6. BOTONES DE ESTADO (SUCCESS / DANGER) */
body .btn-success,
.btn-success {
  background-color: rgba(34, 197, 94, 0.10) !important;
  border: 1px solid var(--btn-success) !important;
  color: var(--btn-success) !important;
  font-weight: 700 !important;
}

body .btn-danger,
.btn-danger {
  background-color: rgba(239, 68, 68, 0.10) !important;
  border: 1px solid var(--btn-danger) !important;
  color: var(--btn-danger) !important;
  font-weight: 700 !important;
}

body .btn-danger:hover,
.btn-danger:hover {
  background-color: rgba(239, 68, 68, 0.20) !important;
  color: var(--btn-danger) !important;
  transform: translateY(-1px) !important;
}

/* 7. BOTÓN WHATSAPP / COMUNIDAD (Background #111827, Border #263241 -> Hover bg #151B24, Border #00D9FF, Texto #00D9FF) */
.floating-whatsapp,
a.floating-whatsapp,
.btn-community,
a.btn-community {
  background-color: var(--btn-community-bg) !important;
  background-image: none !important;
  border: 1px solid var(--btn-community-border) !important;
  color: var(--color-text) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.floating-whatsapp span,
.btn-community span {
  color: var(--color-text) !important;
  font-weight: 700 !important;
  transition: color 0.2s ease !important;
}

.floating-whatsapp i,
.btn-community i,
.fa-whatsapp {
  color: var(--btn-community-icon) !important; /* Verde #25D366 oficial */
}

.floating-whatsapp:hover,
a.floating-whatsapp:hover,
.btn-community:hover,
a.btn-community:hover {
  background-color: var(--btn-community-hover) !important;
  border-color: var(--btn-community-border-hover) !important;
  color: var(--btn-community-text-hover) !important;
  transform: translateY(-1px) !important;
}

.floating-whatsapp:hover span,
.btn-community:hover span {
  color: var(--btn-community-text-hover) !important;
}

/* 8. CONTENEDORES Y BOTONES SOCIALES (Discord, TikTok, WhatsApp) */
.btn-social,
.social-icon-btn {
  background-color: #111827 !important;
  border: 1px solid #263241 !important;
  color: #FFFFFF !important;
}

.btn-social .fa-discord { color: #5865F2 !important; }
.btn-social .fa-whatsapp { color: #25D366 !important; }

/* 9. BOTÓN DESHABILITADO */
body .btn:disabled,
body .btn.disabled,
body button:disabled,
.btn:disabled,
.btn.disabled {
  background-color: var(--btn-disabled-bg) !important;
  border: 1px solid var(--btn-disabled-border) !important;
  color: var(--btn-disabled-text) !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ========================================================
   COMPONENTE GLOBAL: SECTION HEADER
   ======================================================== */
.section-header {
  margin-bottom: var(--section-content-gap) !important;
  text-align: left;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 0 16px !important; /* Separación elegante del borde izquierdo */
}

.section-header.section-header--centered,
.section-header.centered {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

.section-header .section-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: var(--section-eyebrow-size) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2.5px !important;
  color: var(--section-eyebrow-color) !important;
  margin-bottom: var(--section-eyebrow-gap) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.section-header.section-header--primary .section-eyebrow {
  color: var(--section-eyebrow-primary) !important;
}

.section-header .section-eyebrow i,
.section-header .section-eyebrow svg {
  color: inherit !important;
  fill: currentColor !important;
  font-size: 13px !important;
  width: 14px;
  height: 14px;
}

.section-header .section-title,
.section-header h2 {
  font-size: var(--section-title-size) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--section-title-color) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  letter-spacing: -0.01em !important;
}

.section-header .section-title + .section-description,
.section-header h2 + p {
  margin-top: var(--section-title-gap) !important;
}

.section-header .section-description,
.section-header p {
  font-size: var(--section-description-size) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: var(--section-description-color) !important;
  margin-top: var(--section-title-gap) !important;
  margin-bottom: 0 !important;
  max-width: 640px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-header.section-header--centered .section-description,
.section-header.centered p {
  margin-left: auto;
  margin-right: auto;
}

/* RESPONSIVE BREAKPOINTS PARA SECTION HEADER */
@media (max-width: 1024px) {
  :root {
    --section-title-size: 28px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-eyebrow-size: 10px;
    --section-title-size: 24px;
    --section-description-size: 13px;
  }
  .section-header {
    padding-left: 8px !important;
  }
  .section-header .section-title,
  .section-header h2 {
    line-height: 1.2 !important;
  }
}

/* ========================================================
   CARDS EXPLORE (#151B24, Border #263241 -> Hover #3A4758)
   ======================================================== */
.explore-card,
a.explore-card {
  background-color: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.explore-card:hover,
a.explore-card:hover {
  background-color: var(--color-card-hover) !important;
  border-color: var(--color-border-hover) !important;
  transform: translateY(-2px) !important;
}

/* ========================================================
   CARDS (#151B24, Border #263241, Hover #1C2533)
   ======================================================== */
.card,
.panel,
.esports-card,
.team-card,
.game-card,
.games-page-card,
.gd-card,
.glass-card,
.overview-card,
.dashboard-card,
.home-section-card,
.home-panel,
.registration-compact,
.champion-hero__shell {
  background-color: var(--color-card) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.card:hover,
.panel:hover,
.esports-card:hover,
.team-card:hover,
.game-card:hover,
.games-page-card:hover,
.gd-card:hover,
.dashboard-card:hover,
.home-section-card:hover,
.home-panel article:hover {
  background-color: var(--color-card-hover) !important;
  border-color: var(--color-border-hover) !important;
  box-shadow: none !important;
}

/* ========================================================
   INPUTS / BUSCADOR
   ======================================================== */
input,
select,
textarea,
.form-control,
.form-select,
.input,
.search-container {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: 8px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:hover,
select:hover,
textarea:hover,
.form-control:hover,
.form-select:hover,
.input:hover,
.search-container:hover {
  border-color: var(--color-border-hover) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.input:focus,
.search-container:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted) !important;
}

.search-icon,
.search-container svg {
  stroke: var(--color-primary) !important;
  fill: none !important;
}

/* ========================================================
   ESTADOS DE TORNEOS & BADGES
   ======================================================== */
.status-open,
.badge-open,
.badge-success,
.bg-success {
  background-color: var(--color-success-soft) !important;
  color: var(--color-success) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.status-live,
.badge-live,
.badge-danger,
.bg-danger,
.live-dot {
  background-color: var(--color-danger-soft) !important;
  color: var(--color-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.status-finished,
.badge-finished,
.badge-secondary,
.bg-neutral {
  background-color: rgba(100, 116, 139, 0.10) !important;
  color: var(--color-neutral) !important;
  border: 1px solid rgba(100, 116, 139, 0.3) !important;
}

.status-upcoming,
.badge-upcoming {
  background-color: var(--color-secondary-soft) !important;
  color: var(--color-secondary) !important;
  border: 1px solid rgba(0, 217, 255, 0.3) !important;
}

/* ========================================================
   RANKING
   ======================================================== */
table,
.table,
table.dataTable {
  background-color: var(--color-card) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

table th,
.table th,
table.dataTable thead th {
  background-color: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  border-bottom: 2px solid var(--color-border) !important;
}

table td,
.table td,
table.dataTable tbody td {
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

table tr:hover,
.table tr:hover,
table.dataTable tbody tr:hover {
  background-color: var(--color-card-hover) !important;
}

/* 1ER LUGAR (ORO - #FFD600) */
.rank-1,
.ranking-row-1,
.gold-badge {
  background-color: var(--color-primary-soft) !important;
  border-left: 4px solid var(--rank-gold) !important;
}

.rank-1 .rank-number,
.ranking-row-1 .rank-number,
.text-gold {
  color: var(--rank-gold) !important;
  font-weight: 800 !important;
}

/* 2DO LUGAR (PLATA - #CBD5E1) */
.rank-2,
.ranking-row-2,
.silver-badge {
  border-left: 4px solid var(--rank-silver) !important;
}

.rank-2 .rank-number,
.ranking-row-2 .rank-number,
.text-silver {
  color: var(--rank-silver) !important;
  font-weight: 700 !important;
}

/* 3ER LUGAR (BRONCE - #CD7F32) */
.rank-3,
.ranking-row-3,
.bronze-badge {
  border-left: 4px solid var(--rank-bronze) !important;
}

.rank-3 .rank-number,
.ranking-row-3 .rank-number,
.text-bronze {
  color: var(--rank-bronze) !important;
  font-weight: 700 !important;
}

.rank-points {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

.rank-kills {
  color: var(--color-secondary) !important;
}

/* ========================================================
   FOOTER (#0D1117)
   ======================================================== */
footer,
.site-footer {
  background-color: var(--color-bg-secondary) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

footer a,
.site-footer a {
  color: var(--color-text-secondary) !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--color-text) !important;
}

/* ========================================================
   SECCIÓN REDISEÑADA: JUEGOS DEL CIRCUITO (GAMING CATALOG)
   DAYZELCORP ESPORTS - DESIGN SYSTEM GLOBAL
   ======================================================== */
.circuit-games-section {
  background: transparent !important;
  margin-top: 1.5rem !important;
}

.circuit-games-container {
  background: #080B10 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.circuit-games-ribbon {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.circuit-games-ribbon::-webkit-scrollbar {
  display: none !important;
}

.circuit-games-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.circuit-game-card,
body .circuit-game-card {
  width: 178px !important;
  height: 360px !important;
  flex: 0 0 178px !important;
  min-width: 178px !important;
  background: #111827 !important;
  border: 1px solid #263241 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  position: relative !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.circuit-game-card:hover,
body .circuit-game-card:hover {
  background: #151B24 !important;
  border-color: #3A4758 !important;
  transform: translateY(-2px) !important;
}

.circuit-game-card__link {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  background: transparent !important;
  outline: none !important;
}

.circuit-game-card__media {
  width: 100% !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #0D1117 !important;
  border-radius: 13px 13px 0 0 !important;
}

.circuit-game-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.2s ease !important;
}

.circuit-game-card:hover .circuit-game-card__media img {
  transform: scale(1.02) !important;
}

.circuit-game-card__placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748B !important;
  font-size: 32px !important;
  background: #0D1117 !important;
}

.circuit-game-card__info {
  height: 110px !important;
  min-height: 110px !important;
  max-height: 110px !important;
  padding: 14px 16px !important;
  background: #111827 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 8px !important;
  transition: background-color 0.2s ease !important;
}

.circuit-game-card:hover .circuit-game-card__info {
  background: #151B24 !important;
}

.circuit-game-card__accent {
  width: 28px !important;
  height: 2px !important;
  background-color: #00D9FF !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
}

.circuit-game-card__title {
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: left !important;
}

.circuit-game-card--other {
  background: #111827 !important;
  border: 1px solid #263241 !important;
}

.circuit-game-card__link--other {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  text-align: center !important;
}

.circuit-game-card__other-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #0D1117 !important;
  border: 1px solid #263241 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748B !important;
  font-size: 26px !important;
  margin-bottom: 14px !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

.circuit-game-card:hover .circuit-game-card__other-icon {
  color: #00D9FF !important;
  border-color: #00D9FF !important;
}

.circuit-game-card__title--other {
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

.circuit-carousel-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 15 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #111827 !important;
  border: 1px solid #263241 !important;
  color: #00D9FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  outline: none !important;
}

.circuit-carousel-btn--prev {
  left: -16px !important;
}

.circuit-carousel-btn--next {
  right: -16px !important;
}

.circuit-carousel-btn:hover {
  background: #151B24 !important;
  border-color: #00D9FF !important;
  color: #00D9FF !important;
  transform: translateY(-50%) scale(1.05) !important;
}

@media (max-width: 768px) {
  .circuit-game-card,
  body .circuit-game-card {
    width: 156px !important;
    height: 300px !important;
    flex: 0 0 156px !important;
    min-width: 156px !important;
  }

  .circuit-game-card__media {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

  .circuit-game-card__info {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    padding: 10px 12px !important;
  }

  .circuit-game-card__title {
    font-size: 13px !important;
  }

  .circuit-carousel-btn {
    display: none !important;
  }
}

/* ========================================================
   ESTANDARIZACIÓN VISUAL — PÁGINA DETALLE DE TORNEO
   DAYZELCORP ESPORTS DESIGN SYSTEM
   ======================================================== */
.cine-tournament-shell,
.tournament-detail-shell {
  position: relative !important;
  background-color: var(--color-bg, #080B10) !important;
  background-image: none !important;
  color: var(--color-text, #FFFFFF) !important;
}

.cine-tournament-shell::before,
.cine-tournament-hero::before {
  display: none !important;
}

.cine-tournament-hero {
  position: relative !important;
  background-color: var(--color-bg-secondary, #0D1117) !important;
  border-bottom: 1px solid var(--color-border, #263241) !important;
}

.cine-tournament-shell .hero-cover-card,
.cine-tournament-shell .glass-card,
.cine-tournament-shell .phase-track,
.cine-tournament-shell .phase-stage-card,
.cine-tournament-shell .team-card,
.cine-tournament-shell .stat-chip,
.cine-tournament-shell .standing-card,
.cine-tournament-shell .standing-summary,
.cine-tournament-shell .standing-summary-card,
.cine-tournament-shell .overview-card,
.cine-tournament-shell .home-panel,
.cine-tournament-shell .tournament-info-card,
.cine-tournament-shell .registration-compact,
.cine-tournament-shell #league-table,
.cine-tournament-shell .howto-guide {
  background: var(--color-card, #151B24) !important;
  border: 1px solid var(--color-border, #263241) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: var(--color-text, #FFFFFF) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.cine-tournament-shell .hero-cover-card:hover,
.cine-tournament-shell .glass-card:hover,
.cine-tournament-shell .team-card:hover,
.cine-tournament-shell .standing-card:hover,
.cine-tournament-shell .overview-card:hover {
  background: var(--color-card-hover, #1C2533) !important;
  border-color: var(--color-border-hover, #3A4758) !important;
}

.hero-cover-card {
  border: 1px solid var(--color-border, #263241) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.stage-status-chip,
.cine-tournament-shell .stage-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #22C55E !important;
}

.stage-status-chip.is-live,
.cine-tournament-shell .stage-status-chip.is-live {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #EF4444 !important;
}

.stage-status-chip.is-finished,
.cine-tournament-shell .stage-status-chip.is-finished {
  background: rgba(100, 116, 139, 0.1) !important;
  border: 1px solid rgba(100, 116, 139, 0.3) !important;
  color: #64748B !important;
}

.stage-status-chip.is-upcoming,
.cine-tournament-shell .stage-status-chip.is-upcoming {
  background: rgba(0, 217, 255, 0.1) !important;
  border: 1px solid rgba(0, 217, 255, 0.3) !important;
  color: #00D9FF !important;
}

.hero-cta-btn,
body .hero-cta-btn,
.cine-tournament-shell .hero-cta-btn,
.cine-tournament-shell .hero-primary-actions .hero-cta-btn {
  background: var(--color-primary, #FFD600) !important;
  background-image: none !important;
  color: #080B10 !important;
  font-weight: 800 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  height: 48px !important;
  padding: 0 24px !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.hero-cta-btn:hover,
body .hero-cta-btn:hover,
.cine-tournament-shell .hero-cta-btn:hover,
.cine-tournament-shell .hero-primary-actions .hero-cta-btn:hover {
  background: var(--color-primary-hover, #E6C200) !important;
  color: #080B10 !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

.hero-cta-btn *,
.hero-cta-btn i,
.cine-tournament-shell .hero-cta-btn i {
  color: #080B10 !important;
  fill: #080B10 !important;
}

.hero-cta-btn.style2,
.cine-tournament-shell .hero-cta-btn.style2,
.hero-icon-btn,
.cine-tournament-shell .hero-icon-btn {
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: 1px solid var(--color-border, #263241) !important;
  background: transparent !important;
  color: var(--color-text-secondary, #CBD5E1) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.hero-cta-btn.style2:hover,
.cine-tournament-shell .hero-cta-btn.style2:hover,
.hero-icon-btn:hover,
.cine-tournament-shell .hero-icon-btn:hover {
  border-color: var(--color-border-hover, #3A4758) !important;
  color: var(--color-text, #FFFFFF) !important;
  background: var(--color-card, #151B24) !important;
}

.hero-cta-btn.style2:hover i,
.hero-icon-btn:hover i {
  color: var(--color-text, #FFFFFF) !important;
}

.hero-icon-btn.is-active,
.hero-icon-btn.active,
.cine-tournament-shell .hero-icon-btn.is-active {
  border-color: var(--color-primary, #FFD600) !important;
  color: var(--color-primary, #FFD600) !important;
  background: rgba(255, 214, 0, 0.08) !important;
}

.hero-icon-btn.is-active i {
  color: var(--color-primary, #FFD600) !important;
}

.stat-chip,
.cine-tournament-shell .stat-chip {
  padding: 16px 20px !important;
  background: var(--color-card, #151B24) !important;
  border: 1px solid var(--color-border, #263241) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.stat-chip .stat-icon,
.cine-tournament-shell .stat-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: var(--color-surface, #111827) !important;
  border: 1px solid var(--color-border, #263241) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-secondary, #00D9FF) !important;
  font-size: 18px !important;
}

.stat-chip .stat-label,
.cine-tournament-shell .stat-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--color-text-muted, #94A3B8) !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

.stat-chip .stat-value,
.cine-tournament-shell .stat-value {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--color-text, #FFFFFF) !important;
}

.stat-chip--accent .stat-value,
.cine-tournament-shell .stat-chip--accent .stat-value {
  color: var(--color-primary, #FFD600) !important;
}

.event-cycle-step__icon,
.cine-tournament-shell .event-cycle-step__icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid var(--color-border, #263241) !important;
  background: var(--color-surface, #111827) !important;
  color: var(--color-text-disabled, #64748B) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important;
}

.event-cycle-step.is-active .event-cycle-step__icon,
.cine-tournament-shell .event-cycle-step.is-active .event-cycle-step__icon {
  border-color: var(--color-primary, #FFD600) !important;
  background: rgba(255, 214, 0, 0.12) !important;
  color: var(--color-primary, #FFD600) !important;
}

.event-cycle-step.is-complete .event-cycle-step__icon,
.cine-tournament-shell .event-cycle-step.is-complete .event-cycle-step__icon {
  border-color: var(--color-success, #22C55E) !important;
  background: rgba(34, 197, 94, 0.12) !important;
  color: var(--color-success, #22C55E) !important;
}

.event-cycle-step.is-active .event-cycle-step__icon i {
  color: var(--color-primary, #FFD600) !important;
}

.event-cycle-step.is-complete .event-cycle-step__icon i {
  color: var(--color-success, #22C55E) !important;
}

.team-card,
.cine-tournament-shell .team-card {
  background: var(--color-card, #151B24) !important;
  border: 1px solid var(--color-border, #263241) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.team-card:hover,
.cine-tournament-shell .team-card:hover {
  background: var(--color-card-hover, #1C2533) !important;
  border-color: var(--color-border-hover, #3A4758) !important;
}

.team-card .team-name {
  color: var(--color-text, #FFFFFF) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.howto-guide,
.cine-tournament-shell .howto-guide {
  background: var(--color-card, #151B24) !important;
  border: 1px solid var(--color-border, #263241) !important;
  border-radius: 14px !important;
  padding: 24px !important;
}

.howto-step__num,
.cine-tournament-shell .howto-step__num {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--color-primary, #FFD600) !important;
  color: #080B10 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.howto-step__title,
.cine-tournament-shell .howto-step__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text, #FFFFFF) !important;
  margin-bottom: 6px !important;
}

.howto-step__desc,
.cine-tournament-shell .howto-step__desc {
  font-size: 13px !important;
  color: var(--color-text-muted, #94A3B8) !important;
  line-height: 1.5 !important;
}

.seo-tag,
.cine-tournament-shell .seo-tag {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  padding: 0 12px !important;
  background: var(--color-surface, #111827) !important;
  border: 1px solid var(--color-border, #263241) !important;
  border-radius: 999px !important;
  color: var(--color-text-muted, #94A3B8) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  transition: all 0.2s ease !important;
}

.seo-tag:hover,
.cine-tournament-shell .seo-tag:hover {
  background: var(--color-card-hover, #1C2533) !important;
  border-color: var(--color-border-hover, #3A4758) !important;
  color: var(--color-text, #FFFFFF) !important;
}

.standing-table thead,
.table thead,
.cine-tournament-shell .standing-table thead {
  background: var(--color-surface, #111827) !important;
  border-bottom: 2px solid var(--color-border, #263241) !important;
}

.standing-table th,
.table th,
.cine-tournament-shell .standing-table th {
  color: var(--color-text-secondary, #CBD5E1) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.standing-table td,
.table td,
.cine-tournament-shell .standing-table td {
  border-color: var(--color-border, #263241) !important;
  color: var(--color-text, #FFFFFF) !important;
}

.standing-table tr:hover,
.table tr:hover,
.cine-tournament-shell .standing-table tr:hover {
  background: var(--color-card-hover, #1C2533) !important;
}

/* ========================================================
   DISCRETE HERO COUNTDOWN INDICATOR
   ======================================================== */
.hero-countdown-discrete {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1 !important;
}

.hero-countdown-discrete .hero-countdown-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #FFD600 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

.hero-countdown-discrete .hero-countdown-label {
  color: #94A3B8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.hero-countdown-discrete .hero-clock-time {
  color: #FFD600 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  margin-left: 6px !important;
}

@media (max-width: 768px) {
  .hero-countdown-discrete .hero-countdown-label {
    font-size: 10px !important;
  }
  .hero-countdown-discrete .hero-clock-time {
    font-size: 12px !important;
  }
}

/* ========================================================
   NAVBAR & SECTION PADDING NORMALIZATION
   ======================================================== */
body .site-shell,
body .site-main {
  padding-top: 0 !important;
}

body .space-top,
body .container.space-top,
.cine-tournament-hero {
  padding-top: 24px !important;
}