/* Mi ELO: tema oscuro "tablero de noche" con acentos dorados */
:root {
  --fondo: #071426;
  --fondo-2: #0b1d36;
  --cristal: rgba(255, 255, 255, 0.045);
  --cristal-2: rgba(255, 255, 255, 0.08);
  --borde: rgba(255, 255, 255, 0.09);
  --texto: #EAF1F8;
  --suave: #9DB2C8;
  --tenue: #667E99;
  --oro: #FF8A4C;
  --oro-2: #FFC29A;
  --verde: #3fd394;
  --rojo: #ff6f6f;
  --azul: #6CB4EC;
  --violeta: #b48cff;
  --radio: 20px;
  --sombra: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --titulos: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font: 15px/1.5 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fondo); color: var(--texto);
  overflow-x: hidden;
}
.fondo-brillo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(255, 138, 76, 0.13), transparent 60%),
    radial-gradient(700px 500px at -10% 20%, rgba(108, 180, 236, 0.10), transparent 60%),
    radial-gradient(600px 400px at 50% 110%, rgba(114, 174, 252, 0.08), transparent 60%);
}
a { color: var(--oro); text-decoration: none; }
button { font: inherit; }

/* Barra superior */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(7, 20, 38, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.logo { font-family: var(--titulos); font-weight: 800; font-size: 1.2rem; color: var(--texto); display: flex; align-items: center; gap: 8px; }
.logo-icono {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--oro-2), var(--oro)); color: #1A0B02; font-size: 1.1rem;
  box-shadow: 0 6px 20px -6px rgba(255, 138, 76, 0.7);
}
nav { display: flex; gap: 4px; }
nav a { color: var(--suave); padding: 6px 10px; border-radius: 999px; font-weight: 500; font-size: .92rem; }
nav a.activo { color: var(--texto); background: var(--cristal-2); }

main { max-width: 1080px; margin: 0 auto; padding: 18px 16px 60px; }
.cargando { display: grid; place-items: center; min-height: 50vh; }
.giro { font-size: 2.4rem; color: var(--oro); animation: giro 1.2s ease-in-out infinite; }
@keyframes giro { 50% { transform: translateY(-10px) rotate(-12deg); } }

h1, h2, h3 { font-family: var(--titulos); letter-spacing: -0.01em; margin: 0; }
h2.seccion { font-size: 1.05rem; color: var(--suave); font-weight: 600; margin: 28px 2px 12px; text-transform: uppercase; letter-spacing: .08em; }

/* Tarjetas de cristal */
.tarjeta {
  background: linear-gradient(180deg, var(--cristal-2), var(--cristal));
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 18px; box-shadow: var(--sombra);
}
.rejilla { display: grid; gap: 14px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
@media (max-width: 860px) { .r3, .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .r2, .r3 { grid-template-columns: minmax(0, 1fr); } .span2 { grid-column: auto; } }

/* Portada */
.portada { text-align: center; padding: 40px 0 10px; }
.portada h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 800; line-height: 1.05; }
.portada h1 em { font-style: normal; background: linear-gradient(90deg, var(--oro-2), var(--oro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portada p { color: var(--suave); margin: 12px auto 26px; max-width: 520px; }
.buscador { position: relative; max-width: 620px; margin: 0 auto; }
.buscador input {
  width: 100%; font-size: 1.05rem; padding: 17px 20px 17px 52px; border-radius: 18px;
  border: 1px solid var(--borde); background: rgba(255, 255, 255, 0.06); color: var(--texto);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.buscador input:focus { border-color: rgba(255, 138, 76, 0.6); box-shadow: 0 0 0 4px rgba(255, 138, 76, 0.12); }
.buscador::before { content: "⌕"; position: absolute; left: 20px; top: 50%; transform: translateY(-52%); font-size: 1.4rem; color: var(--suave); }
.resultados { list-style: none; margin: 14px auto 0; padding: 0; max-width: 620px; text-align: left; }
.resultados li a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
  border-radius: 14px; background: var(--cristal); border: 1px solid var(--borde); color: var(--texto);
  transition: transform .15s, background .15s;
}
.resultados li a:hover { transform: translateY(-2px); background: var(--cristal-2); }
.resultados .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.resultados .sub { color: var(--suave); font-size: .82rem; }
.vacio { color: var(--suave); text-align: center; padding: 24px 0; }

/* Avatar con iniciales */
.avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font-family: var(--titulos); font-weight: 700; font-size: .95rem; color: #071426;
}
.avatar.grande { width: 76px; height: 76px; border-radius: 22px; font-size: 1.7rem; box-shadow: 0 14px 30px -12px rgba(0,0,0,.7); }

/* Píldoras y chips */
.pildora { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--cristal-2); color: var(--suave); border: 1px solid var(--borde); }
.pildora.oro { background: rgba(255, 138, 76, .14); color: var(--oro-2); border-color: rgba(255, 138, 76, .3); }
.titulo-fide { background: linear-gradient(135deg, var(--oro-2), var(--oro)); color: #1A0B02; border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-filtro { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--borde); background: transparent; color: var(--suave); cursor: pointer; font-size: .85rem; }
.chip-filtro.activo { background: var(--oro); color: #1A0B02; border-color: var(--oro); font-weight: 600; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: .85rem; padding: 2px 8px; border-radius: 999px; }
.delta.mas { color: var(--verde); background: rgba(63, 211, 148, .12); }
.delta.menos { color: var(--rojo); background: rgba(255, 111, 111, .12); }
.delta.igual { color: var(--suave); background: var(--cristal-2); }

/* Cabecera del jugador / club */
.heroe {
  position: relative; overflow: hidden; padding: 26px; border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 138, 76, .16), rgba(63, 211, 148, .08) 55%, rgba(114, 174, 252, .10));
  border: 1px solid rgba(255, 138, 76, .22); box-shadow: var(--sombra);
}
.heroe::after { /* tablero de ajedrez difuminado */
  content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; opacity: .10;
  background: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0 / 40px 40px;
  transform: rotate(18deg); mask-image: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.heroe-fila { position: relative; z-index: 1; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.heroe h1 { font-size: clamp(1.6rem, 4.6vw, 2.5rem); font-weight: 800; line-height: 1.1; }
.heroe .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.heroe-elo { margin-left: auto; text-align: right; }
.heroe-elo .grande { font-family: var(--titulos); font-size: clamp(3rem, 10vw, 4.6rem); font-weight: 800; line-height: 1; background: linear-gradient(180deg, #fff, var(--oro-2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.heroe-elo .etiqueta { color: var(--suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 560px) { .heroe-elo { margin-left: 0; text-align: left; width: 100%; } }
.acciones { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.boton { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: 0; cursor: pointer; font-weight: 600; font-size: .92rem; background: linear-gradient(135deg, var(--oro-2), var(--oro)); color: #1A0B02; }
.boton.sec { background: var(--cristal-2); color: var(--texto); border: 1px solid var(--borde); }

/* Casillas de ELO */
.ritmo { position: relative; overflow: hidden; }
.ritmo .t { color: var(--suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.ritmo .n { font-family: var(--titulos); font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.ritmo svg { position: absolute; right: 0; bottom: 0; width: 60%; height: 46px; opacity: .9; }
.ritmo.sin .n { color: var(--tenue); }

/* Indicadores */
.kpi .valor { font-family: var(--titulos); font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .t { color: var(--suave); font-size: .82rem; }
.kpi .icono { font-size: 1.2rem; margin-bottom: 6px; display: block; }

/* Anillo de progreso hacia el próximo hito */
.anillo-caja { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.anillo { flex: none; position: relative; width: 132px; height: 132px; }
.anillo svg { transform: rotate(-90deg); }
.anillo .centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.anillo .centro b { font-family: var(--titulos); font-size: 1.7rem; display: block; line-height: 1; }
.anillo .centro span { font-size: .72rem; color: var(--suave); }
.anillo circle.barra-anillo { transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }

/* Insignias */
.insignias { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.insignia {
  display: grid; place-items: center; width: 54px; height: 60px; font-family: var(--titulos); font-weight: 700; font-size: .8rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--oro-2), #C2410C); color: #1A0B02;
}
.insignia.bloqueada { background: var(--cristal-2); color: var(--tenue); }

/* Posiciones */
.posicion .grupo { color: var(--suave); font-size: .82rem; }
.posicion .num { font-family: var(--titulos); font-size: 1.9rem; font-weight: 700; }
.posicion .num small { font-size: .9rem; color: var(--suave); font-weight: 500; }
.barra-fina { height: 6px; border-radius: 99px; background: var(--cristal-2); overflow: hidden; margin-top: 10px; }
.barra-fina i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--verde), var(--oro)); width: 0; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.posicion .pct { font-size: .75rem; color: var(--suave); margin-top: 6px; }

.grafica { position: relative; height: 300px; }
.grafica.baja { height: 240px; }
.cabecera-tarjeta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cabecera-tarjeta h3 { font-size: 1.05rem; }

/* Podio */
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; }
.escalon { text-align: center; color: var(--texto); }
.escalon .avatar { margin: 0 auto 8px; }
.escalon .nombre { font-weight: 600; font-size: .86rem; line-height: 1.2; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.escalon .base {
  margin-top: 8px; border-radius: 14px 14px 6px 6px; display: grid; place-items: center; font-family: var(--titulos); font-weight: 800; font-size: 1.6rem;
  background: linear-gradient(180deg, var(--cristal-2), var(--cristal)); border: 1px solid var(--borde);
}
.escalon.p1 .base { height: 120px; background: linear-gradient(180deg, rgba(255,138,76,.45), rgba(255,138,76,.08)); border-color: rgba(255,138,76,.5); color: var(--oro-2); }
.escalon.p2 .base { height: 88px; color: #d8dee4; }
.escalon.p3 .base { height: 64px; color: #e0a370; }

/* Jugador del mes */
.estrella { display: flex; gap: 16px; align-items: center; background: linear-gradient(135deg, rgba(255,138,76,.22), rgba(255,138,76,.04)); border-color: rgba(255,138,76,.35); }
.estrella .corona { font-size: 2.2rem; filter: drop-shadow(0 6px 14px rgba(255,138,76,.5)); }
.estrella .t { color: var(--oro-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.estrella .nombre { font-family: var(--titulos); font-size: 1.3rem; font-weight: 700; color: var(--texto); }

/* Avisos de hitos */
.avisos { list-style: none; margin: 0; padding: 0; }
.avisos li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--borde); }
.avisos li:last-child { border-bottom: 0; }
.avisos .insignia { width: 40px; height: 44px; font-size: .7rem; flex: none; }

/* Tabla de ranking */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; color: var(--tenue); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; padding: 8px 6px; }
.tabla td { padding: 10px 6px; border-top: 1px solid var(--borde); vertical-align: middle; }
.tabla tr { cursor: pointer; transition: background .15s; }
.tabla tbody tr:hover { background: var(--cristal); }
.tabla .pos { font-family: var(--titulos); font-weight: 700; color: var(--suave); width: 34px; }
.tabla .nom { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tabla .nom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla .num { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tabla .oculto-movil { }
@media (max-width: 560px) { .tabla { table-layout: fixed; } .tabla th:nth-child(1), .tabla td.pos { width: 30px; } .tabla th:nth-child(4) { width: 52px; } .tabla th:nth-child(5) { width: 54px; } .tabla td { padding: 9px 4px; } .tabla .oculto-movil { display: none; } .tabla .delta { padding: 2px 6px; font-size: .75rem; } .tabla .avatar { width: 30px; height: 30px; font-size: .75rem; border-radius: 10px; flex: none; } }

/* Lista de clubes */
.club-tarjeta { display: flex; align-items: center; gap: 14px; color: var(--texto); transition: transform .15s; }
.club-tarjeta:hover { transform: translateY(-3px); }
.club-tarjeta .nombre { font-family: var(--titulos); font-weight: 700; font-size: 1.05rem; }
.club-tarjeta .sub { color: var(--suave); font-size: .82rem; }

.companeros { display: flex; flex-wrap: wrap; gap: 8px; }
.companero { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--cristal); border: 1px solid var(--borde); color: var(--texto); font-size: .86rem; }
.companero .avatar { width: 28px; height: 28px; border-radius: 99px; font-size: .7rem; }

.aviso-datos { color: var(--suave); font-size: .85rem; text-align: center; padding: 40px 10px; }

/* Animación de entrada */
.entra { opacity: 0; transform: translateY(14px); animation: entra .6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes entra { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .entra { animation: none; opacity: 1; transform: none; }
  .giro { animation: none; }
  * { transition: none !important; }
}


/* ================= Inicio moderno (v2) ================= */
.portada2{position:relative;isolation:isolate;padding:clamp(48px,9vw,110px) 0 clamp(36px,6vw,70px);min-height:min(84vh,740px);display:grid;align-items:center}
.portada2-in{position:relative;z-index:2;max-width:820px}
.portada2 .eyebrow{font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);margin-bottom:18px}
.portada2 h1{font-size:clamp(2.5rem,7.2vw,5.2rem);font-weight:800;line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.portada2 h1 em{font-style:normal;color:var(--oro)}
.portada2 .lead{color:var(--suave);font-size:clamp(1.05rem,2vw,1.25rem);max-width:36em;margin:20px 0 30px}
.buscador.grande{max-width:640px;margin:0}
.buscador.grande input{font-size:1.15rem;padding:20px 22px 20px 58px;border-radius:20px;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.portada2 .resultados{margin:14px 0 0;max-width:640px}
.portada2 .acciones{margin-top:22px}
.capas{position:absolute;inset:-40px -10% 0;z-index:0;pointer-events:none}
.capa{position:absolute;will-change:transform}
.c1{right:-2%;top:8%;width:min(68vw,700px);opacity:.6}
.c2{right:4%;bottom:-8%;width:min(38vw,400px);opacity:.45}
.c3{left:46%;top:-3%;width:min(24vw,240px);opacity:.55}
@media (max-width:700px){.c3{display:none}.c1{width:120vw;right:-35%;top:46%;opacity:.35}.c2{opacity:.25;right:-10%}}
.vistazo{padding-top:8px}
.vistazo-cab{max-width:620px;margin:10px 2px 18px}
.vistazo-cab h2.seccion{margin:0 0 6px}
.vistazo-cab p{color:var(--suave);margin:0}
.par h3{font-size:1.05rem}
.par-marco{height:300px;overflow:hidden;border-radius:14px;position:relative;margin-top:10px}
.par-in{position:absolute;left:0;right:0;top:-24px;height:348px;will-change:transform}
.nota-datos{color:var(--tenue);font-size:.78rem;margin:10px 2px 0}
@media (prefers-reduced-motion:reduce){.capa,.par-in{transform:none!important}}
.portada2,main{overflow-x:clip}

.tabla.plana tbody tr{cursor:default}
.tabla.plana tbody tr:hover{background:transparent}
.nota-datos a{color:var(--oro)}

.aviso-modo{background:rgba(255,138,76,.14);color:var(--oro-2);text-align:center;padding:9px 14px;font-size:.85rem;font-weight:500;border-bottom:1px solid rgba(255,138,76,.3)}