/* =========================================================================
   SISTEMA DE DISEÑO PES6.LAT  (guía frontend-design)

   Tema: la comunidad latinoamericana de PES 6 online. Público: jugadores
   que entran a ver resultados, su posición y quién está jugando.
   Trabajo principal: que cada jugador se encuentre rápido a sí mismo y a
   sus rivales.

   Color (roles fijos)
     Noche        #0B1530  fondo de página
     Hielo        #F8FAFC  superficies
     Tinta        #0F172A  texto
     Azul cancha  #2563EB  acciones y marcadores
     Marino       #1E3A8A  números fuertes
     Dorado       #F5B800  solo D1
     Coral        #F43F5E  solo "Crear cuenta"

   Tipografía: una familia en dos anchos. Barlow para leer; Barlow
   Condensed (la de camisetas y marcadores) para títulos, nombres y
   números. Títulos en minúscula normal, sin mayúsculas sostenidas.

   Estructura: título grande a la izquierda con acciones a la derecha;
   debajo, listas de filas sobre superficie clara. Lo único llamativo es
   el dorado D1 y los marcadores azules.
   ========================================================================= */
:root {
  --font-sans: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --bs-body-font-family: var(--font-sans);

  --noche: #0b1530;
  --hielo: #f8fafc;
  --tinta: #0f172a;
  --gris: #5b6b82;
  --linea: #e2e8f0;
  --azul: #2563eb;
  --marino: #1e3a8a;
  --dorado: #f5b800;
  --coral: #f43f5e;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
}

/* Escala tipográfica: 0.875 · 1 · 1.25 · 1.5 · 2 · 2.5 (rem) */
h1, h2, h3, h4, h5, h6,
.panel-title {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Fuera las mayúsculas sostenidas en etiquetas, botones y cabeceras de tabla */
.btn,
.btn-crew-login,
.crew-filter__btn,
.ranking-tag,
.panel-title,
.thead-crew th,
.table-crew th,
.lobby-toggle,
.lobby-badge,
.copa-status,
.dropdown-header,
.grp-chip,
.mcard__lobby,
.res__lobby,
.mrow__lobby,
.matches-chip,
.matches-more {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.thead-crew th,
.table-crew thead th {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
}

.btn,
.btn-crew-login,
.crew-filter__btn {
  font-family: var(--font-sans);
  font-weight: 600;
}

.panel-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--marino);
}

/* foco visible con teclado en todo el sitio */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* =========================================================================
   TEMA PES6.LAT: una sola paleta con roles fijos
   - Fondo: azul noche (el de la página).
   - Superficie: blanco hielo, con texto pizarra.
   - Principal: azul. Botones, paginador, marcadores, cabeceras de tabla.
   - Acento único: coral. Solo "Crear cuenta" en la barra.
   - Niveles: los colores de las insignias de división (D1 dorado,
     D2 violeta, 3A celeste, 3B verde, 3C gris), en tonos suaves.
   - Resultado: verde gana, rojo pierde, en marcas chicas.
   Se carga al final y solo cambia colores, no la estructura.
   ========================================================================= */
:root {
  --pes-primary: #2563eb;
  --pes-primary-hover: #1d4ed8;
  --pes-primary-dark: #1e3a8a;
  --pes-primary-soft: #eff6ff;
  --pes-surface: #f8fafc;
  --pes-surface-2: #f1f5f9;
  --pes-ink: #0f172a;
  --pes-muted: #64748b;
  --pes-line: #e2e8f0;
}

/* ---- botones principales: azul (el coral queda para "Crear cuenta") ---- */
.btn-crew-login,
.crew-filter__btn--primary,
.downloads-page .btn-primary {
  border: 0;
  background: linear-gradient(180deg, #3b82f6 0%, var(--pes-primary) 55%, var(--pes-primary-hover) 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-crew-login:hover,
.btn-crew-login:focus-visible,
.crew-filter__btn--primary:hover,
.downloads-page .btn-primary:hover {
  background: var(--pes-primary-dark) !important;
  color: #fff !important;
}

.crew-filter__btn--ghost {
  border-color: var(--pes-line) !important;
  color: var(--pes-primary-dark) !important;
}

/* ---- paginador: activo en azul, el resto sobrio ---- */
.pagination .page-link {
  border-color: var(--pes-line);
  color: var(--pes-primary-dark);
}

.pagination .page-link:hover {
  background: var(--pes-primary-soft);
  color: var(--pes-primary-dark);
}

.pagination .page-item.active .page-link,
.matches-pager .page-item.active .page-link {
  border-color: var(--pes-primary) !important;
  background: var(--pes-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
}

/* ---- tablas: filas alternas frías (antes beige) ---- */
.table-crew tbody tr:nth-child(even) td { background-color: var(--pes-surface-2); }
.table-crew tbody tr:hover td { background-color: #e8f0fe; }

/* ---- ranking por división: tonos de cada insignia (D1 dorado se mantiene) ---- */
.table-crew tbody tr.rank-row-d2 > td { background: #f3e8ff !important; color: #2e1065; }
.table-crew tbody tr.rank-row-3a > td { background: #e0f2fe !important; color: #0c4a6e; }
.table-crew tbody tr.rank-row-3b > td { background: #dcfce7 !important; color: #14532d; }
.table-crew tbody tr.rank-row-3c > td { background: var(--pes-surface-2) !important; color: #334155; }

.table-crew tbody tr.rank-row-d2:hover > td { background: #e9d5ff !important; }
.table-crew tbody tr.rank-row-3a:hover > td { background: #bae6fd !important; }
.table-crew tbody tr.rank-row-3b:hover > td { background: #bbf7d0 !important; }
.table-crew tbody tr.rank-row-3c:hover > td { background: var(--pes-line) !important; }

.table-crew tbody tr.rank-row-d2 .position-badge { background: #ede9fe; border-color: #c4b5fd; color: #4c1d95; }
.table-crew tbody tr.rank-row-3a .position-badge { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.table-crew tbody tr.rank-row-3b .position-badge { background: #dcfce7; border-color: #86efac; color: #166534; }
.table-crew tbody tr.rank-row-3c .position-badge { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }

/* ---- campeones: celdas suaves en vez de rojo y verde fuertes ---- */
.campeones-table td.zero-cell,
.campeones-table tbody tr:hover td.zero-cell {
  border-color: var(--pes-line);
  background: var(--pes-surface-2);
  color: #cbd5e1;
  text-shadow: none;
  box-shadow: none;
}

.campeones-table td.win-cell {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #166534;
  font-weight: 800;
  text-shadow: none;
  box-shadow: none;
}

.campeones-table tbody tr:hover td.win-cell { background: #bbf7d0; }

/* ---- vestíbulos: superficie clara en vez de bloques azules ---- */
.lobby-card {
  overflow: hidden;
  border: 1px solid rgba(148, 197, 255, 0.14);
  border-radius: 16px;
  background: var(--pes-surface);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.lobby-card > .lobby-header {
  border-bottom: 1px solid var(--pes-line);
  border-left: 4px solid var(--pes-primary);
  background: #fff;
  color: var(--pes-ink);
}

.lobby-card > .lobby-header .lobby-name { color: var(--pes-ink); }

.lobby-card > .lobby-header .lobby-server {
  border: 1px solid #bfdbfe;
  background: var(--pes-primary-soft);
  color: var(--pes-primary-dark);
}

.lobby-card > .lobby-header .lobby-toggle {
  border: 1px solid var(--pes-line);
  background: var(--pes-surface-2);
  color: var(--pes-primary-dark);
}

.lobby-card > .lobby-header .lobby-toggle:hover {
  background: var(--pes-primary-soft);
  color: var(--pes-primary-dark);
}

.lobby-card > .lobby-header .lobby-badge--off {
  border-color: var(--pes-line);
  background: var(--pes-surface-2);
  color: var(--pes-muted);
}

.lobby-card > .lobby-header .lobby-badge--on {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}

/* etiquetas que quedaban en mayúsculas sostenidas */
.group-section,
.group-stat__label,
.mrow__text small,
.results__day,
.copa-section,
.bracket__title,
.copa-card__format,
.grp-members__head,
.grp-board__head,
.side__since {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.group-section {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--marino);
}

.group-stat__label { font-size: 0.78rem; font-weight: 600; }
.mrow__text small { font-size: 0.78rem; font-weight: 500; }

/* =========================================================================
   TABLAS MÁS SOBRIAS: el azul fuerte queda solo para el marcador
   ========================================================================= */
.thead-crew,
.table-crew thead {
  background: var(--hielo) !important;
}

.thead-crew th,
.table-crew thead th {
  border-bottom: 2px solid var(--linea) !important;
  background: transparent !important;
  color: var(--gris) !important;
  text-shadow: none !important;
  font-weight: 600;
}

.table-crew {
  border: 1px solid var(--linea);
  background: #fff;
}

.table-crew tbody tr td { border-top: 1px solid #eef2f6; }
.table-crew tbody tr:nth-child(even) td { background-color: #fafbfc; }
.table-crew tbody tr:hover td { background-color: #f1f6ff; }

/* partidos: solo el marcador va en marino */
.mt-players.is-loss a { color: #64748b !important; }
.mt-players.is-loss img { filter: grayscale(0.5); opacity: 0.9; }
.mt-players.is-win img { border-color: var(--marino); }
.mt-date b { color: var(--tinta); }

.mt-lobby a {
  border: 1px solid var(--linea);
  background: #fff !important;
  color: var(--gris) !important;
}

.mt-lobby a:hover {
  border-color: #cbd5e1;
  background: var(--hielo) !important;
  color: var(--tinta) !important;
}

.mt-wo { color: #be123c; }

/* Títulos de página que son <h1> por SEO pero conservan el estilo de su contenedor */
.h-reset {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}