/* ===========================================================================
   TVWARS · SISTEMA DE DISEÑO
   ---------------------------------------------------------------------------
   Esta es la receta. Todo lo demás la consume.

   La regla: ningún componente inventa un valor. Si al construir algo hace falta
   un color, un tamaño o un hueco que no está aquí, lo que falta es una variable
   en este fichero — no una excepción en ese componente.

   Nace de un estudio (25-ago-2026) sobre Faceit, ESEA, Challengermode y
   GamersClub, buscando qué hace que un jugador confíe su cuenta de Steam a una
   plataforma. La conclusión que gobierna las decisiones de abajo: la solidez no
   viene del adorno, viene del orden. Retícula constante, jerarquía clara, datos
   legibles y cero decisiones tomadas a ojo.

   Cada color de texto está comprobado contra WCAG AA (4.5:1) sobre los dos
   fondos del sistema. Los valores medidos van anotados al lado.
   =========================================================================== */

:root {

  /* --- COLOR: fondos ------------------------------------------------------
     Carbón azulado, no negro puro. El azul frío hace que el naranja de la marca
     destaque más (mayor contraste percibido) y cansa menos en sesiones largas,
     que es como se usa una plataforma de partidas. Es la familia de Steam y
     Faceit, y eso también comunica: el jugador reconoce el territorio. */
  --fondo:        #0B0D11;   /* el lienzo */
  --panel:        #13161C;   /* tarjetas, tablas, cajas sobre el lienzo */
  --panel-alto:   #1A1E26;   /* un nivel más: cabeceras de tabla, campos */
  --panel-hover:  #1F242D;   /* estado al pasar por encima */

  /* --- COLOR: líneas ------------------------------------------------------
     Dos pesos, y solo dos. Una línea marca un límite real (borde de tarjeta);
     la suave separa sin cortar (filas de una tabla). */
  --linea:        #262B35;
  --linea-suave:  #1E222A;

  /* --- COLOR: texto -------------------------------------------------------
     Tres niveles. Más de tres y la jerarquía deja de leerse. */
  --texto:        #E8EAED;   /* 16.13:1 sobre fondo — cuerpo y titulares */
  --texto-2:      #9AA1AC;   /*  7.47:1 — descripciones, texto de apoyo */
  --texto-3:      #808690;   /*  5.31:1 — etiquetas, metadatos, pies */
  /* Nota: el gris que se venía usando (#6B717B) da 3.96:1 y NO cumple el
     mínimo para texto. Por eso el terciario es más claro de lo que parecería. */

  /* --- COLOR: marca -------------------------------------------------------
     admin.css: copia congelada del sistema.css original (26-ago-2026), para
     que el panel de administración mantenga su aspecto propio mientras
     sistema.css se rediseña para las 8 páginas públicas. Única corrección
     aplicada aquí: el dorado real medido a píxel del logo (#FCC001), porque
     #DD8421 nunca fue el color real, era un dato erróneo — no una decisión
     de diseño que haya que preservar. */
  --marca:        #FCC001;
  --marca-claro:  #FED03C;
  --marca-sordo:  #7D5F00;
  --marca-tenue:  rgba(252,192,1,.12);
  --marca-borde:  rgba(252,192,1,.35);

  /* Dorado — SOLO para lo que de verdad es un rango superior: nivel VIP más
     alto, insignia PRO. No es un segundo naranja de marca: es la jerarquía
     "esto está por encima del resto", igual que el oro de rango en Faceit o
     GamersClub. Si se usa en más de un contexto (VIP/nivel top), es que ha
     dejado de significar eso y toca volver al naranja de marca. */
  --oro:          #C9A227;
  --oro-claro:    #F3D052;
  --oro-oscuro:   #9B7D1D;
  --oro-tenue:    rgba(201,162,39,.12);
  --oro-borde:    rgba(201,162,39,.35);

  /* --- COLOR: semántico ---------------------------------------------------
     Estado, no decoración. Nunca se usan como acento: el acento es el naranja.
     Sirven para decir victoria/derrota, en línea/caído, sube/baja. */
  --bien:         #4FB584;   /* 7.66:1 */
  --mal:          #D9564C;   /* 4.99:1 */
  --aviso:        #E0A030;   /* 8.56:1 */
  --bien-tenue:   rgba(79,181,132,.12);
  --mal-tenue:    rgba(217,86,76,.12);

  /* --- TIPOGRAFÍA ---------------------------------------------------------
     Tres papeles, cada uno con su trabajo:

     · Titulares: condensada en mayúsculas. Es el registro de las plataformas
       competitivas — ocupa poco, se lee rápido y ordena. Se usa SOLO en
       titulares y etiquetas; en texto corrido sería ilegible.
     · Cuerpo: una grotesca neutra que aguanta párrafos largos sin cansar.
     · Cifras: monoespaciada. No es un gusto: en una tabla de ELO, K/D o
       precisión, los dígitos tienen que alinearse en columna. */
  --f-titulo: 'Barlow Condensed', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --f-texto:  'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-cifra:  'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Escala de tamaños. Proporción ~1.25 entre pasos, con clamp() en los
     grandes para que bajen solos en pantallas estrechas sin media queries
     repartidas por todo el fichero. */
  --t-micro:  .72rem;   /* etiquetas en mayúsculas */
  --t-mini:   .82rem;   /* pies, metadatos */
  --t-corto:  .92rem;   /* texto dentro de tarjetas y tablas */
  --t-base:    1rem;    /* cuerpo */
  --t-lede:   1.06rem;  /* entradilla de sección */
  --t-h3:     1.22rem;
  --t-h2:     clamp(1.55rem, 3.2vw, 2.15rem);
  --t-h1:     clamp(2.1rem, 5vw, 3.4rem);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-fuerte: 600;
  --peso-alto:   700;

  --alto-apretado: 1.1;   /* titulares */
  --alto-normal:   1.65;  /* texto corrido */
  --alto-corto:    1.45;  /* texto dentro de componentes */

  --track-mayus: .08em;   /* mayúsculas necesitan aire entre letras */
  --track-etiqueta: .16em;

  /* --- ESPACIADO ----------------------------------------------------------
     Una sola escala para todo. Antes cada sección elegía su hueco a ojo
     (4rem, 5rem, 72px, 3rem…) y la página parecía desmontada: unas secciones
     pegadas y otras con un vacío enorme. El ritmo vertical es el fallo que
     menos salta a la vista y el que más se nota. */
  --e1:  .25rem;
  --e2:  .5rem;
  --e3:  .75rem;
  --e4:  1rem;
  --e5:  1.5rem;
  --e6:  2rem;
  --e7:  3rem;
  --e8:  4rem;

  --seccion:      clamp(3rem, 7vw, 5rem);   /* entre secciones de página */
  --seccion-corta: clamp(2rem, 4vw, 3rem);  /* entre bloques relacionados */

  /* --- FORMA --------------------------------------------------------------
     Radios contenidos. El redondeo excesivo resta seriedad: una plataforma
     competitiva se parece más a un panel de control que a una app de móvil. */
  --radio-min:  3px;
  --radio:      6px;
  --radio-max:  10px;
  --radio-pill: 999px;

  /* --- PROFUNDIDAD --------------------------------------------------------
     Sobre fondo oscuro una sombra apenas se ve: la profundidad se consigue
     subiendo el fondo del panel, no oscureciendo debajo. Estas sombras son
     solo para lo que flota de verdad (menús, diálogos). */
  --sombra-flota: 0 4px 16px rgba(0,0,0,.4);
  --sombra-alta:  0 12px 32px rgba(0,0,0,.55);
  --brillo-marca: 0 0 0 3px rgba(221,132,33,.25);   /* foco de teclado */

  /* --- MOVIMIENTO ---------------------------------------------------------
     Rápido y discreto. Una transición larga en un elemento que se usa mucho
     acaba estorbando. */
  --trans-rapida: .15s ease;
  --trans:        .22s ease;

  /* --- RETÍCULA ----------------------------------------------------------- */
  --ancho-max:    1180px;   /* contenedor general */
  --ancho-lectura: 68ch;    /* texto corrido: más ancho cansa la vista */
  --margen-lateral: clamp(1rem, 4vw, 2rem);
}


/* ===========================================================================
   BASE
   Lo que el navegador estiliza por su cuenta si no se lo dices. Aquí es donde
   aparecían los enlaces morados subrayados: no había ninguna regla para <a>.
   =========================================================================== */

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

html {
  /* OJO — el tamaño base NO se toca aquí durante la migración.
     styles.css lo tiene en 15px y hay 764 usos de rem escritos contando con eso.
     Cambiarlo a 16px agrandaría toda la web un 6,7 % de golpe.

     El sistema está pensado para 16px, así que mientras dure la convivencia sus
     tamaños salen un 6,7 % más pequeños de lo diseñado. Es asumible y, sobre
     todo, es reversible: el día que se retire el último bloque del CSS viejo,
     se descomenta esta línea y todo cae en su sitio.

     font-size: 16px;  <- activar al terminar la migración
  */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: var(--alto-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Titulares ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  line-height: var(--alto-apretado);
  text-transform: uppercase;
  letter-spacing: var(--track-mayus);
  text-wrap: balance;
  margin: 0 0 var(--e4);
  color: var(--texto);
}
h1 { font-size: var(--t-h1); font-weight: var(--peso-alto); }
h2 { font-size: var(--t-h2); font-weight: var(--peso-fuerte); }
h3 { font-size: var(--t-h3); font-weight: var(--peso-fuerte); }
h4 { font-size: var(--t-base); font-weight: var(--peso-fuerte); }

p { margin: 0 0 var(--e5); max-width: var(--ancho-lectura); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--peso-fuerte); color: var(--texto); }
small { font-size: var(--t-mini); color: var(--texto-3); }

/* --- Enlaces de texto ----------------------------------------------------
   Con su propio estilo, no el del navegador. Subrayado fino y separado: se ve
   que es pulsable sin parecer tachado. No se distingue SOLO por el color,
   porque quien no distingue esos dos tonos no vería que es un enlace. */
a {
  color: var(--marca);
  text-decoration: none;
  border-bottom: 1px solid var(--marca-borde);
  transition: color var(--trans-rapida), border-color var(--trans-rapida);
}
a:hover { color: var(--marca-claro); border-bottom-color: currentColor; }
a:visited { color: var(--marca); }   /* nada de morado */

/* Foco visible para quien navega con teclado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--radio-min);
}

code, kbd, samp {
  font-family: var(--f-cifra);
  font-size: .88em;
  background: var(--panel-alto);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-min);
  padding: .1em .4em;
}

hr { border: none; border-top: 1px solid var(--linea); margin: var(--e6) 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }

::selection { background: var(--marca); color: var(--fondo); }


/* ===========================================================================
   RETÍCULA
   =========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion { padding-block: var(--seccion); }
.seccion + .seccion { padding-top: 0; }
.seccion-borde { border-top: 1px solid var(--linea); }
.seccion-panel { background: var(--panel); border-block: 1px solid var(--linea); }

/* Rejillas que se adaptan solas, sin media queries por cada caso. */
.rejilla   { display: grid; gap: var(--e4); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.fila { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.pila { display: flex; flex-direction: column; gap: var(--e4); }


/* ===========================================================================
   TIPOGRAFÍA DE APOYO
   =========================================================================== */

/* Etiqueta que encabeza una sección. Dice de qué va antes del titular. */
.rotulo {
  font-family: var(--f-cifra);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 var(--e2);
}

.entradilla {
  font-size: var(--t-lede);
  color: var(--texto-2);
  max-width: var(--ancho-lectura);
}

.apoyo { color: var(--texto-2); }
.tenue { color: var(--texto-3); font-size: var(--t-mini); }

/* Cifras. tabular-nums alinea los dígitos en columna: sin esto, una tabla de
   ELO baila de fila en fila y se lee peor. */
.cifra {
  font-family: var(--f-cifra);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
}

/* El dato grande de un panel de estadísticas. */
.dato {
  font-family: var(--f-cifra);
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  font-weight: var(--peso-fuerte);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--texto);
}
.dato-marca { color: var(--marca); }
.dato-bien  { color: var(--bien); }
.dato-mal   { color: var(--mal); }


/* ===========================================================================
   BOTONES
   Tres, y solo tres. Cuando hacen falta más de tres tipos de botón en una
   pantalla, el problema es la pantalla.
   =========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: var(--f-texto);
  font-size: var(--t-corto);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--trans-rapida), border-color var(--trans-rapida),
              color var(--trans-rapida), transform var(--trans-rapida);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none;
}

/* Principal: uno por pantalla. Color plano, sin degradado — el degradado era
   uno de los cuatro naranjas que convivían sin motivo. */
.btn-1 { background: var(--marca); color: #14100A; border-color: var(--marca); }
.btn-1:hover { background: var(--marca-claro); border-color: var(--marca-claro); }

/* Secundario: la acción alternativa. */
.btn-2 { background: transparent; color: var(--texto); border-color: var(--linea); }
.btn-2:hover { border-color: var(--marca); color: var(--marca); }

/* Terciario: acciones menores, sin peso visual. */
.btn-3 { background: transparent; color: var(--texto-2); border-color: transparent; padding-inline: var(--e3); }
.btn-3:hover { color: var(--texto); background: var(--panel-hover); }

.btn-peligro { background: var(--mal); color: #fff; border-color: var(--mal); }
.btn-grande  { font-size: var(--t-base); padding: 1rem 1.9rem; }
.btn-mini    { font-size: var(--t-mini); padding: .5rem 1rem; }
.btn-ancho   { width: 100%; }


/* ===========================================================================
   TARJETAS
   =========================================================================== */

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e5);
}
.tarjeta-enlace { transition: border-color var(--trans), background var(--trans); }
.tarjeta-enlace:hover { border-color: var(--marca-borde); background: var(--panel-hover); }

/* Barra de estado a la izquierda: para cuando la tarjeta comunica un estado
   (victoria/derrota, activo/caído) además de su contenido. */
.tarjeta-marca { border-left: 3px solid var(--marca); }
.tarjeta-bien  { border-left: 3px solid var(--bien); }
.tarjeta-mal   { border-left: 3px solid var(--mal); }

.tarjeta-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  margin: calc(var(--e5) * -1) calc(var(--e5) * -1) var(--e5);
  padding: var(--e4) var(--e5);
  background: var(--panel-alto);
  border-bottom: 1px solid var(--linea);
  border-radius: var(--radio) var(--radio) 0 0;
}
.tarjeta-cabecera h3 { margin: 0; font-size: var(--t-base); }


/* ===========================================================================
   INSIGNIAS Y ESTADOS
   =========================================================================== */

.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--f-cifra);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-min);
  color: var(--texto-2);
  background: var(--panel-alto);
  white-space: nowrap;
}
.insignia-marca { color: var(--marca); border-color: var(--marca-borde); background: var(--marca-tenue); }
.insignia-bien  { color: var(--bien);  border-color: rgba(79,181,132,.35);  background: var(--bien-tenue); }
.insignia-mal   { color: var(--mal);   border-color: rgba(217,86,76,.35);   background: var(--mal-tenue); }

/* Punto de estado, para «en línea / caído». */
.punto { width: 7px; height: 7px; border-radius: var(--radio-pill); background: var(--texto-3); flex-shrink: 0; }
.punto-vivo { background: var(--bien); box-shadow: 0 0 0 3px var(--bien-tenue); }
.punto-caido { background: var(--mal); box-shadow: 0 0 0 3px var(--mal-tenue); }


/* ===========================================================================
   TABLAS
   El componente más importante de una plataforma competitiva: el ranking, el
   historial y las estadísticas son tablas. Que se lean bien no es un detalle.
   =========================================================================== */

.tabla-caja {
  overflow-x: auto;                 /* la tabla scrollea, no la página */
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--panel);
}

.tabla { width: 100%; border-collapse: collapse; min-width: 540px; }

.tabla th {
  font-family: var(--f-cifra);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--texto-3);
  background: var(--panel-alto);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
  position: sticky;                  /* la cabecera no se pierde al bajar */
  top: 0;
  z-index: 1;
}

.tabla td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea-suave);
  font-size: var(--t-corto);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background var(--trans-rapida); }
.tabla tbody tr:hover { background: var(--panel-hover); }

.tabla .num {
  font-family: var(--f-cifra);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.tabla .destacada { background: var(--marca-tenue); }   /* tu propia fila */


/* ===========================================================================
   FORMULARIOS
   Un formulario descuidado es de las cosas que más rápido delatan que no hay
   nadie serio detrás — y aquí se pide vincular una cuenta de Steam.
   =========================================================================== */

.campo { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }

.campo label {
  font-family: var(--f-cifra);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.entrada {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  color: var(--texto);
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  /* Padding igual a los cuatro lados: el desequilibrio izquierda/derecha es un
     descuido clásico y se nota aunque no se sepa por qué. */
  padding: .75rem 1rem;
  width: 100%;
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}
.entrada::placeholder { color: var(--texto-3); }
.entrada:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: var(--brillo-marca);
}
.entrada:disabled { opacity: .5; cursor: not-allowed; }
.entrada-error { border-color: var(--mal); }

.ayuda { font-size: var(--t-mini); color: var(--texto-3); }
.error { font-size: var(--t-mini); color: var(--mal); }

/* Casilla de verificación a tamaño de persona, no gigante. */
.check { display: flex; align-items: flex-start; gap: var(--e3); cursor: pointer; }
.check input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem;
  margin: .28rem 0 0;
  accent-color: var(--marca);
  flex-shrink: 0;
  cursor: pointer;
}
.check span { font-size: var(--t-corto); color: var(--texto-2); line-height: var(--alto-corto); }


/* ===========================================================================
   AVISOS
   =========================================================================== */

.aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--texto-3);
  border-radius: var(--radio);
  background: var(--panel);
  font-size: var(--t-corto);
  color: var(--texto-2);
}
.aviso-marca { border-left-color: var(--marca); }
.aviso-bien  { border-left-color: var(--bien); }
.aviso-mal   { border-left-color: var(--mal); }
.aviso-ojo   { border-left-color: var(--aviso); }
.aviso strong { display: block; color: var(--texto); margin-bottom: var(--e1); }


/* ===========================================================================
   UTILIDADES
   Pocas y con nombre claro. Una utilidad por cada caso particular es volver al
   problema que este fichero resuelve.
   =========================================================================== */

.oculto { display: none !important; }

/* Visible para lectores de pantalla, invisible en pantalla. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.centro { text-align: center; }
.centro p, .centro .entradilla { margin-inline: auto; }
.sin-margen { margin: 0 !important; }
.ancho-lectura { max-width: var(--ancho-lectura); }