/* =====================================================================
   Pantallas
   ===================================================================== */

/* ------------------------------------------------------------------ acceso */

.login {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--safe-top) + var(--s6)) var(--s5) calc(var(--safe-bottom) + var(--s5));
  max-width: 420px;
  margin-inline: auto;
}
.login__main { display: grid; align-content: center; gap: var(--s6); }

.brand { display: grid; justify-items: center; gap: var(--s4); }
.brand__mark {
  width: 78px; height: 78px;
  border-radius: 24px;
  display: grid; place-items: center;
  font-size: 2rem;
  color: #fff;
  background: var(--ig-gradient);
  box-shadow: 0 12px 30px rgba(238,42,123,.28);
  animation: pop var(--slow) var(--spring) both;
}
.brand h1 {
  font-family: var(--font-num);
  font-size: var(--t-title);
  font-weight: 780;
  letter-spacing: -.03em;
  text-align: center;
}
.brand p { font-size: var(--t-sub); color: var(--text-2); text-align: center; }

.login__form { display: grid; gap: var(--s3); }
.login__foot { text-align: center; font-size: var(--t-caption); color: var(--text-3); line-height: 1.6; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--tint-red);
  color: var(--red);
  font-size: var(--t-foot);
  font-weight: 560;
  animation: rise var(--fast) var(--ease) both;
}
.alert i { margin-top: 2px; }
.alert--info { background: var(--tint-blue); color: var(--blue); }
.alert--warn { background: var(--tint-orange); color: var(--orange); }

/* ------------------------------------------------------------------ jornada */

.deadline {
  margin: 0 var(--s4);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--hairline);
  display: grid;
  gap: var(--s3);
}
.deadline--urgent { border-color: color-mix(in srgb, var(--orange) 50%, transparent); }
.deadline__top { display: flex; align-items: baseline; gap: var(--s2); }
.deadline__n {
  font-family: var(--font-num);
  font-size: var(--t-title);
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1;
}
.deadline__txt { font-size: var(--t-foot); color: var(--text-2); flex: 1; }
.deadline__clock {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sub);
  font-weight: 700;
  letter-spacing: -.01em;
}

.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.summary__cell {
  background: var(--card);
  padding: var(--s3) var(--s2);
  display: grid;
  gap: 2px;
  justify-items: center;
}
.summary__cell b {
  font-family: var(--font-num);
  font-size: var(--t-title2);
  font-weight: 760;
  letter-spacing: -.03em;
}
.summary__cell span { font-size: var(--t-micro); color: var(--text-2); }

/* ------------------------------------------------------------------ tabla */

.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: var(--s2);
  padding: var(--s4) var(--s4) var(--s5);
}
.podium__slot {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: var(--s3) var(--s2);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--hairline);
  transition: transform var(--fast) var(--ease);
}
.podium__slot:active { transform: scale(.96); }
.podium__slot--1 {
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  background: linear-gradient(180deg, var(--ig-gradient-soft), transparent), var(--card);
  border-color: color-mix(in srgb, #EE2A7B 32%, transparent);
}
.podium__pos {
  font-family: var(--font-num);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-3);
}
.podium__name {
  font-size: var(--t-caption);
  font-weight: 640;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium__pts {
  font-family: var(--font-num);
  font-size: var(--t-title3);
  font-weight: 780;
  letter-spacing: -.03em;
}
.podium__sub { font-size: var(--t-micro); color: var(--text-2); }

.standing {
  display: grid;
  grid-template-columns: 26px auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s4);
  text-align: left;
  position: relative;
  transition: background var(--fast) linear;
}
.standing:active { background: var(--card-2); }
.standing + .standing::before {
  content: "";
  position: absolute;
  top: 0; left: 62px; right: 0; height: 1px;
  background: var(--hairline);
}
.standing__pos {
  font-family: var(--font-num);
  font-size: var(--t-sub);
  font-weight: 720;
  color: var(--text-2);
  text-align: center;
}
.standing__name { font-size: var(--t-callout); font-weight: 620; letter-spacing: -.01em; }
.standing__meta { font-size: var(--t-micro); color: var(--text-2); margin-top: 2px; }
.standing__pts {
  display: grid;
  justify-items: end;
  gap: 1px;
}
.standing__pts b {
  font-family: var(--font-num);
  font-size: var(--t-title3);
  font-weight: 780;
  letter-spacing: -.03em;
}
.standing__pts span { font-size: var(--t-micro); color: var(--text-2); }
.standing--me { background: var(--tint-blue); }
.standing--me:active { background: var(--tint-blue); filter: brightness(.96); }

.trend { font-size: .625rem; margin-left: 5px; }

/* ------------------------------------------------------------------ estadisticas (bento) */

.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  padding: 0 var(--s4);
}
.bento__wide { grid-column: 1 / -1; }

.stat {
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--hairline);
  display: grid;
  gap: var(--s2);
  align-content: start;
  min-height: 120px;
}
.stat__top { display: flex; align-items: center; gap: 7px; }
.stat__ico {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: .75rem;
  color: #fff;
  background: var(--tone, var(--blue));
}
.stat__label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.stat__value {
  font-family: var(--font-num);
  font-size: var(--t-title2);
  font-weight: 780;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.stat__value--sm { font-size: var(--t-title3); }
.stat__who { display: flex; align-items: center; gap: var(--s2); }
.stat__who b { font-size: var(--t-sub); font-weight: 640; }
.stat__note { font-size: var(--t-caption); color: var(--text-2); line-height: 1.4; }

.stat--feature {
  background: linear-gradient(150deg, var(--ig-gradient-soft), transparent 70%), var(--card);
  border-color: color-mix(in srgb, #EE2A7B 26%, transparent);
}

.versus {
  display: grid;
  gap: var(--s2);
}
.versus__row { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: var(--s3); }
.versus__row span:first-child { font-size: var(--t-caption); color: var(--text-2); }
.versus__row b { font-family: var(--font-num); font-size: var(--t-sub); font-weight: 720; }

/* ------------------------------------------------------------------ revelacion */

.reveal-head {
  margin: 0 var(--s4) var(--s4);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--hairline);
  display: grid;
  gap: var(--s3);
}

.gamevote {
  padding: var(--s3);
  border-bottom: 1px solid var(--hairline);
}
.gamevote:last-child { border-bottom: 0; }
.gamevote__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.gamevote__score {
  font-family: var(--font-num);
  font-size: var(--t-callout);
  font-weight: 760;
  letter-spacing: -.02em;
}
.gamevote__side {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2);
  align-items: start;
  padding: var(--s2);
  border-radius: var(--r-sm);
  background: var(--card-2);
}
.gamevote__side + .gamevote__side { margin-top: 6px; }
.gamevote__side--win { background: var(--tint-green); }
.gamevote__who { display: flex; flex-wrap: wrap; gap: 5px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 3px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--hairline);
  font-size: var(--t-micro);
  font-weight: 600;
}
.tag--me { border-color: var(--blue); }

/* ------------------------------------------------------------------ perfil */

.profile-head {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s5) var(--s4) var(--s6);
}
.profile-head h2 {
  font-family: var(--font-num);
  font-size: var(--t-title2);
  font-weight: 760;
  letter-spacing: -.025em;
}
.profile-head p { font-size: var(--t-foot); color: var(--text-2); }

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0 var(--s4);
  background: var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kpis > div {
  background: var(--card);
  padding: var(--s3) 6px;
  display: grid;
  gap: 2px;
  justify-items: center;
}
.kpis b {
  font-family: var(--font-num);
  font-size: var(--t-title3);
  font-weight: 760;
  letter-spacing: -.03em;
}
.kpis span { font-size: var(--t-micro); color: var(--text-2); text-align: center; }

/* ------------------------------------------------------------------ admin */

.admin-tabs {
  display: flex;
  gap: 2px;
  margin: 0 var(--s4) var(--s4);
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--card-sunken);
}
.admin-tabs button {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  font-size: var(--t-foot);
  font-weight: 620;
  color: var(--text-2);
  transition: background var(--fast) linear, color var(--fast) linear;
}
.admin-tabs button[aria-selected="true"] {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-card);
}

.usercard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  position: relative;
}
.usercard + .usercard::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s4); right: 0; height: 1px;
  background: var(--hairline);
}
.usercard__name { font-size: var(--t-callout); font-weight: 620; }
.usercard__meta { font-size: var(--t-micro); color: var(--text-2); margin-top: 2px; display: flex; gap: var(--s2); flex-wrap: wrap; }
.usercard--off { opacity: .5; }

.gamerow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  position: relative;
}
.gamerow + .gamerow::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s4); right: 0; height: 1px;
  background: var(--hairline);
}
.score-inputs { display: flex; align-items: center; gap: 6px; }
.score-inputs .input {
  width: 52px;
  min-height: 40px;
  padding: 0 6px;
  text-align: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}