/* ============================================
   ARENA TOUR · DARK MODE UPGRADE
   Para la app original existente
   Subir en: Shared Components → Static Application Files
   Usar en:  User Interface Attributes → CSS → File URLs
   Nombre:   arena-tour-upgrade.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500;600;700&display=swap');

/* ============================================
   VARIABLES
   ============================================ */
:root {
  --at-bg:      #080c14;
  --at-card:    #0f1623;
  --at-surf:    #161d2e;
  --at-border:  #1a2538;
  --at-gold:    #f5a623;
  --at-blue:    #1a73e8;
  --at-live:    #ff3d5a;
  --at-win:     #00e676;
  --at-t1:      #f0f4ff;
  --at-t2:      #8a9bc0;
  --at-t3:      #3d4d6a;
}

/* ============================================
   BASE
   ============================================ */
html, body,
.t-Body, .t-PageBody, #t_PageBody,
.t-Body-main, .t-Body-content,
.t-Body-info, .t-Body-side,
.t-Body-wrap {
  background-color: #080c14 !important;
  background:       #080c14 !important;
  color:            #f0f4ff !important;
}

/* ============================================
   HEADER
   ============================================ */
.t-Header,
.t-Header-branding,
.t-Header-utils,
.t-Header-nav,
#t_Header,
.nw-Header,
.nw-Topbar,
[class*="nw-Topbar"] {
  background: #1a73e8 !important;
  box-shadow: 0 2px 12px rgba(26,115,232,0.5) !important;
}

.t-Header a, .t-Header span,
.t-Header .t-Button, .t-Header .t-Icon,
.t-Header-appName {
  color: #ffffff !important;
}

/* ============================================
   REGIONES Y CARDS
   ============================================ */
.t-Region,
.t-Card,
.t-Card-wrap,
.t-Cards .t-Card {
  background:    #0f1623 !important;
  border:        1px solid #1a2538 !important;
  border-radius: 14px !important;
  box-shadow:    none !important;
}

.t-Region-header,
.t-Card-titleWrap {
  background:    #161d2e !important;
  border-bottom: 1px solid #1a2538 !important;
  border-radius: 14px 14px 0 0 !important;
}

.t-Region-title,
.t-Card-title {
  font-family:    'Barlow Condensed', sans-serif !important;
  font-size:      16px !important;
  font-weight:    800 !important;
  text-transform: uppercase !important;
  color:          #f0f4ff !important;
}

.t-Region-body { background: #0f1623 !important; }

/* ============================================
   HOME — MENÚ PRINCIPAL
   Cards del menú (Reporte, Programación, etc.)
   ============================================ */
.t-Cards--featured .t-Card-wrap,
.t-Cards--basic .t-Card-wrap {
  background:    #0f1623 !important;
  border:        1px solid #1a2538 !important;
  border-radius: 14px !important;
  transition:    all 0.2s !important;
}

.t-Cards--featured .t-Card-wrap:hover,
.t-Cards--basic .t-Card-wrap:hover {
  border-color:  rgba(245,166,35,0.4) !important;
  transform:     translateY(-2px) !important;
  box-shadow:    0 8px 24px rgba(0,0,0,0.4) !important;
}

.t-Card-body, .t-Card-desc,
.t-Card-info, .t-Card-subTitle {
  color: #8a9bc0 !important;
}

/* ============================================
   FORMULARIOS
   ============================================ */
select, input[type="text"],
input[type="search"], textarea,
.apex-item-select,
.t-Form-fieldContainer select,
.t-Form-fieldContainer input {
  background:    #161d2e !important;
  border:        1px solid #1a2538 !important;
  color:         #f0f4ff !important;
  border-radius: 9px !important;
}

select:focus, input:focus {
  border-color: #1a73e8 !important;
  outline:      none !important;
  box-shadow:   0 0 0 2px rgba(26,115,232,0.25) !important;
}

option { background: #161d2e !important; color: #f0f4ff !important; }
label, .t-Form-label { color: #8a9bc0 !important; }

/* Radio buttons */
.apex-item-radio label,
input[type="radio"] + label {
  color: #f0f4ff !important;
}

/* ============================================
   REPORTE DE GRUPOS
   Fondo de las cards de duplas
   ============================================ */

/* Contenedor principal de cada dupla */
.t-Card-wrap,
[class*="card"] {
  background: #0f1623 !important;
}

/* Línea divisoria entre jugadores */
.t-Card-body .t-Card-info {
  border-top: 1px solid #1a2538 !important;
}

/* ============================================
   PROGRAMACIÓN / EN VIVO
   Las cards de partidos ya están dark
   Solo ajustar el fondo contenedor
   ============================================ */
.t-Timeline,
.t-Timeline-item,
.t-Timeline-content {
  background: transparent !important;
}

/* Fondo de las cards de partidos */
.at-match-card,
[class*="match"],
[class*="partido"] {
  background: #0f1623 !important;
  border:     1px solid #1a2538 !important;
}

/* ============================================
   ELIMINATORIAS / BRACKET
   El bracket ya está dark — solo fondo
   ============================================ */

/* Fondo blanco entre las cards del bracket */
.bracket-container,
[class*="bracket"],
[class*="llave"] {
  background: #080c14 !important;
}

/* Scroll horizontal para móvil */
.t-Region-body {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ============================================
   CLASIFICACIÓN / RANKING / COPA CLUBES
   Filas de la tabla/lista
   ============================================ */

/* Filas del ranking */
.t-Report-report tbody tr,
.t-ClassicReport tbody tr,
.a-IRR-table tbody tr {
  background:    #0f1623 !important;
  border-bottom: 1px solid #1a2538 !important;
}

.t-Report-report tbody tr:hover,
.t-ClassicReport tbody tr:hover {
  background: #161d2e !important;
}

.t-Report-report tbody td,
.t-ClassicReport tbody td,
.a-IRR-table tbody td {
  color:   #f0f4ff !important;
  border:  none !important;
}

/* Header de tablas */
.t-Report-report thead th,
.t-ClassicReport thead th,
.a-IRR-table thead th {
  background:     #161d2e !important;
  color:          #8a9bc0 !important;
  font-size:      10px !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-bottom:  1px solid #1a2538 !important;
}

/* Copa Clubes — cards con logos grandes */
.t-Cards .t-Card-wrap {
  background: #0f1623 !important;
  border:     1px solid #1a2538 !important;
}

/* Fondo blanco de las cards con logos grandes (Copa Clubes top 3) */
.t-Card-media,
.t-Card-media img {
  background: #0f1623 !important;
}

/* Número de posición (1, 2, 3...) */
.t-Card-badge {
  background: rgba(245,166,35,0.15) !important;
  color:      #f5a623 !important;
  border:     1px solid rgba(245,166,35,0.3) !important;
  border-radius: 8px !important;
}

/* Puntos en el ranking */
.t-Report-report td:last-child,
.ranking-pts {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size:   20px !important;
  font-weight: 800 !important;
  color:       #f5a623 !important;
}

/* ============================================
   BADGES ORO / PLATA / BRONCE
   ============================================ */
[class*="Oro"],   .badge-oro   { background: rgba(245,166,35,0.2)  !important; color: #f5a623 !important; border-radius: 8px !important; }
[class*="Plata"], .badge-plata { background: rgba(192,200,216,0.2) !important; color: #c0c8d8 !important; border-radius: 8px !important; }
[class*="Bronce"],.badge-bronce{ background: rgba(200,117,51,0.2)  !important; color: #c87533 !important; border-radius: 8px !important; }

/* ============================================
   BOTONES
   ============================================ */
.t-Button, .t-Button--hot {
  border-radius: 9px !important;
  font-weight:   700 !important;
  font-size:     11px !important;
}
.t-Button--hot  { background: #1a73e8 !important; border-color: #1a73e8 !important; color: #fff !important; }
.t-Button--success { background: rgba(0,230,118,0.15) !important; color: #00e676 !important; border: 1px solid rgba(0,230,118,0.3) !important; }
.t-Button--danger  { background: rgba(255,61,90,0.15)  !important; color: #ff3d5a !important; border: 1px solid rgba(255,61,90,0.3)  !important; }

/* ============================================
   FOOTER
   ============================================ */
.t-Footer, #t_Footer {
  background:  #0f1623 !important;
  border-top:  1px solid #1a2538 !important;
  color:       #3d4d6a !important;
}
.t-Footer a { color: #1a73e8 !important; }

/* ============================================
   NAVEGACIÓN LATERAL
   ============================================ */
.t-TreeNav, #t_TreeNav,
.t-SideNav  {
  background:   #0f1623 !important;
  border-right: 1px solid #1a2538 !important;
}
.t-TreeNav a, .t-TreeNav .t-TreeNav-label {
  color: #8a9bc0 !important;
}
.t-TreeNav .is-active > a,
.t-TreeNav .is-current > a {
  color:      #f5a623 !important;
  background: rgba(245,166,35,0.1) !important;
  border-left: 3px solid #f5a623 !important;
}

/* ============================================
   PAGINACIÓN
   ============================================ */
.t-Report-pagination,
.a-IRR-pagination {
  background: #161d2e !important;
  border-top: 1px solid #1a2538 !important;
  color:      #8a9bc0 !important;
}
.t-Report-pagination a { color: #1a73e8 !important; }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: #080c14; }
::-webkit-scrollbar-thumb  { background: #1a2538; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3d4d6a; }

/* ============================================
   PADDING BOTTOM PARA MÓVIL
   ============================================ */
.t-Body-content { padding-bottom: 20px !important; }

/* ============================================
   ANIMACIONES
   ============================================ */
@keyframes at-blink  { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes at-pulse  { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes at-fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ============================================
   RESPONSIVE MÓVIL
   ============================================ */
@media (max-width: 640px) {
  .t-Region-title { font-size: 14px !important; }
  .t-Body-content { padding: 8px !important; }

  /* Bracket scroll horizontal en móvil */
  .t-Region-body {
    overflow-x:                 auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width:            none !important;
  }
  .t-Region-body::-webkit-scrollbar { display: none; }
}

/* Bracket scroll horizontal móvil */
.t-Body-content,
.t-Region-body,
.t-Region--scrollBody {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Indicador de scroll */
.t-Region-body::after {
  content: '← desliza →';
  display: block;
  text-align: center;
  font-size: 10px;
  color: #3d4d6a;
  padding: 8px 0;
  letter-spacing: 1px;
}