/* =============================================================================
   Sayclon Gaming · Base
   -----------------------------------------------------------------------------
   Tipografia, grilla y componentes base. Ni un hexadecimal: todo sale de
   css/tokens.css.
   ========================================================================== */

/* --- Reparaciones ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-interfaz);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }
svg { fill: none; }

/* --- Tipografia ------------------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0; }

a {
  color: var(--celeste);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { border-bottom-color: var(--celeste); }

.titulo-grande { font-size: var(--t-3xl); }
.sub          { color: var(--texto-2); }
.menor        { color: var(--texto-3); font-size: var(--t-sm); }
.cifra        { font-variant-numeric: tabular-nums; }
.marca-chica  { color: var(--celeste); font-size: var(--t-sm); letter-spacing: 0.08em;
                text-transform: uppercase; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-chico);
}

.salto-al-contenido {
  position: absolute;
  left: -9999px;
}
.salto-al-contenido:focus {
  left: var(--e4);
  top: var(--e4);
  z-index: 20;
  background: var(--elevada);
  padding: var(--e2) var(--e4);
  border-radius: var(--r-chico);
}

/* --- Grilla ---------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--e4);
}
.contenedor.angosto { max-width: var(--ancho-angosto); }

main { flex: 1 0 auto; padding: var(--e6) 0 var(--e8); }

.pila      { display: flex; flex-direction: column; gap: var(--e4); }
.pila-ch   { display: flex; flex-direction: column; gap: var(--e2); }
.fila      { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.fila-entre{ display: flex; align-items: center; justify-content: space-between;
             gap: var(--e3); flex-wrap: wrap; }

/* --- Encabezado del sitio -------------------------------------------------- */
.encabezado {
  border-bottom: 1px solid var(--borde-suave);
  background: var(--superficie);
}
.encabezado .contenedor {
  height: var(--barra);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--texto);
  border-bottom: 0;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo svg { width: 22px; height: 22px; stroke: var(--cyan); }
.logo:hover { border-bottom: 0; }

.menu { display: flex; gap: var(--e5); align-items: center; }
.menu a {
  color: var(--texto-2);
  font-size: var(--t-sm);
  border-bottom: 0;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--texto); border-bottom: 0; }

/* --- Pie ------------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--borde-suave);
  padding: var(--e5) 0;
  color: var(--texto-3);
  font-size: var(--t-sm);
}

/* --- Tarjeta --------------------------------------------------------------- */
/* Sin franjas ni border-left de color: el borde es parejo en los cuatro lados. */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-grande);
  padding: var(--e5);
}
.tarjeta.elevada { background: var(--elevada); }

/* --- Boton ----------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  height: 42px;
  padding: 0 var(--e5);
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--cyan);
  color: var(--fondo);
  font-family: var(--fuente-interfaz);
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.boton:hover { background: var(--cyan-hover); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }

.boton.secundario {
  background: transparent;
  border-color: var(--borde);
  color: var(--texto);
}
.boton.secundario:hover { background: var(--elevada); }

.boton.plano {
  background: transparent;
  color: var(--texto-2);
  padding: 0 var(--e3);
}
.boton.plano:hover { color: var(--texto); background: var(--elevada); }

.boton-icono {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-chico);
  color: var(--texto-2);
  cursor: pointer;
}
.boton-icono:hover { color: var(--texto); background: var(--elevada); }
.boton-icono svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; }

/* --- Campo de texto -------------------------------------------------------- */
.campo {
  width: 100%;
  height: 46px;
  padding: 0 var(--e4);
  background: var(--elevada);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  color: var(--texto);
  font-family: var(--fuente-interfaz);
  font-size: var(--t-base);
}
.campo::placeholder { color: var(--texto-3); }
.campo:focus { border-color: var(--cyan); outline: 2px solid var(--foco); outline-offset: 0; }
.campo[aria-invalid="true"] { border-color: var(--rojo); }

.rotulo {
  display: block;
  color: var(--texto-2);
  font-size: var(--t-sm);
  margin-bottom: var(--e1);
}
.ayuda      { color: var(--texto-3); font-size: var(--t-sm); }
.error-campo{ color: var(--rojo);    font-size: var(--t-sm); }

/* --- Desplegable ----------------------------------------------------------- */
/* Sobrio: sin pastillas. El chevron es un SVG hermano, no una imagen de fondo. */
.desplegable { position: relative; display: inline-flex; align-items: center; }
.desplegable select {
  appearance: none;
  height: 38px;
  padding: 0 calc(var(--e6) + var(--e1)) 0 var(--e3);
  background: var(--elevada);
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  color: var(--texto);
  font-family: var(--fuente-interfaz);
  font-size: var(--t-sm);
  cursor: pointer;
}
.desplegable select:focus { border-color: var(--cyan); }
.desplegable svg {
  position: absolute;
  right: var(--e3);
  width: 14px;
  height: 14px;
  stroke: var(--texto-3);
  stroke-width: 2;
  pointer-events: none;
}

/* --- Pestañas -------------------------------------------------------------- */
/* Subrayado, nunca pastillas. */
.pestanas {
  display: flex;
  gap: var(--e5);
  border-bottom: 1px solid var(--borde-suave);
}
.pestana {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--e3) var(--e1);
  color: var(--texto-2);
  font-family: var(--fuente-interfaz);
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
}
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--cyan); }

/* --- Tabla ----------------------------------------------------------------- */
/* Ancha: scrollea dentro de su contenedor, nunca la pagina entera. */
.marco-tabla {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-grande);
  background: var(--superficie);
  -webkit-overflow-scrolling: touch;
}
table.tabla {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tabla thead th {
  position: sticky;
  top: 0;
  background: var(--superficie);
  text-align: right;
  padding: var(--e3) var(--e4);
  color: var(--texto-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--borde-suave);
  white-space: nowrap;
}
.tabla td {
  padding: var(--e3) var(--e4);
  text-align: right;
  border-bottom: 1px solid var(--borde-suave);
  white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--fila-hover); }

.tabla .col-puesto   { width: 72px; text-align: right; }
.tabla .col-jugador  { text-align: left; width: 100%; }
.tabla th.col-jugador{ text-align: left; }

.puesto { color: var(--texto-2); font-weight: 600; }
.podio  { color: var(--oro); font-weight: 700; }

.jugador       { display: inline-flex; align-items: baseline; gap: 1px; }
.jugador-nombre{ color: var(--texto); font-weight: 600; }
.jugador-tag   { color: var(--texto-3); font-size: var(--t-sm); }

.destacado { color: var(--cyan); font-weight: 700; font-size: var(--t-md); }

/* --- Paginado -------------------------------------------------------------- */
.paginado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding-top: var(--e4);
  color: var(--texto-3);
  font-size: var(--t-sm);
}

/* --- Estados --------------------------------------------------------------- */
.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  text-align: center;
  padding: var(--e7) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-grande);
}
.estado svg { width: 28px; height: 28px; stroke: var(--texto-3); stroke-width: 1.5; }
.estado h3 { color: var(--texto); }
.estado p  { color: var(--texto-2); max-width: 46ch; }
.estado.falla svg { stroke: var(--rojo); }

.aviso {
  border: 1px solid var(--borde-suave);
  border-radius: var(--r);
  padding: var(--e3) var(--e4);
  color: var(--texto-2);
  font-size: var(--t-sm);
  background: var(--elevada);
}
.aviso.falla { border-color: var(--rojo); background: var(--rojo-tenue); color: var(--texto); }
.aviso.bien  { border-color: var(--verde); color: var(--texto); }

.cargando {
  color: var(--texto-3);
  padding: var(--e7) 0;
  text-align: center;
}

/* --- Modal ----------------------------------------------------------------- */
/* Cierre visible arriba a la derecha. El clic afuera esta bloqueado: lo maneja
   el JS que lo abre, no el CSS. */
dialog.modal {
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  background: var(--elevada);
  color: var(--texto);
  box-shadow: var(--sombra);
  width: min(560px, calc(100vw - 2 * var(--e4)));
}
dialog.modal::backdrop { background: var(--fondo-modal); }
.modal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borde-suave);
}
.modal-cuerpo { padding: var(--e5); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 720px) {
  h1 { font-size: var(--t-xl); }
  .titulo-grande { font-size: var(--t-2xl); }
  main { padding: var(--e5) 0 var(--e7); }
  .menu { gap: var(--e4); }
  .tabla thead th, .tabla td { padding: var(--e3); }
}

.solo-chico  { display: none; }

@media (max-width: 520px) {
  .solo-chico  { display: inline; }
  .solo-grande { display: none; }
  .menu { gap: var(--e3); }
  .menu a { font-size: var(--t-xs); }
  .encabezado .contenedor { gap: var(--e3); }
}

@media (max-width: 400px) {
  .contenedor { padding: 0 var(--e3); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- Portada --------------------------------------------------------------- */
.portada {
  align-items: center;
  text-align: center;
  padding-top: var(--e6);
}
.buscador {
  width: 100%;
  max-width: 460px;
  margin-top: var(--e4);
}
.buscador .rotulo, .buscador .ayuda, .buscador .error-campo { text-align: left; }
.buscador-fila { display: flex; flex-wrap: nowrap; gap: var(--e2); }
.resultado-busqueda { width: 100%; max-width: 460px; }
.seccion-siguiente { margin-top: var(--e8); }

/* --- Reglamento ------------------------------------------------------------ */
.lista-datos { display: grid; gap: var(--e3); margin: 0; padding: 0; }
.lista-datos div {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borde-suave);
}
.lista-datos div:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-datos dt { color: var(--texto-2); }
.lista-datos dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }

.formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  background: var(--elevada);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r);
  padding: var(--e3) var(--e4);
  color: var(--texto-2);
  overflow-x: auto;
  white-space: pre;
}