/* =========================================================================
   PORTADA
   Resultados agrupados por día, cada partido en una tarjeta con las fotos
   de los jugadores en grande (escudo como insignia, aro azul al ganador).
   La columna derecha usa las mismas tarjetas claras del resto del sitio.
   ========================================================================= */
.home {
  --ink: #0f172a;
  --ink-soft: #64748b;
  --line: #e8edf4;
  --navy: #1e3a8a;
  --blue: #2563eb;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

/* ---- marcador ---- */

/* ---- resultados ---- */
.results__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.results__filter .crew-suggest { flex: 1 1 170px; }
.results__filter .form-control { border-radius: 10px; }

.results__btn {
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}

.results__btn:hover { background: var(--blue); color: #fff; }
.results__clear { color: var(--ink-soft); }

.results__h2h,
.results__chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--ink);
  font-size: 0.88rem;
}

.results__h2h small { color: var(--ink-soft); }
.results__h2h-rec { display: inline-flex; gap: 0.35rem; font-weight: 800; }
.results__h2h-rec .is-win { color: #15803d; }
.results__h2h-rec .is-loss { color: #be123c; }

.results__day {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.results__day:first-child { margin-top: 0; }
.results__day::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.res {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 4.4rem minmax(0, 1fr) 8.5rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
}

.res:hover { background: #f8fafc; }
.res.is-wo { box-shadow: inset 3px 0 0 #e11d48; }

.res__time {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.res__side { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.res__side--home { justify-content: flex-end; text-align: right; }

.res__names { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.res__names a {
  overflow: hidden;
  color: var(--ink) !important;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res__names a:hover { color: var(--blue) !important; text-decoration: underline; }
.res__side.is-win .res__names a { font-weight: 800; }
.res__side.is-loss .res__names a { color: #94a3b8 !important; }

.res__crest { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; }
.res__crest img { max-width: 100%; max-height: 100%; object-fit: contain; }

.res__score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.15rem 0;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.res__score i { font-style: normal; opacity: 0.5; }

.res__extra { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; min-width: 0; }

.res__lobby {
  overflow: hidden;
  max-width: 100%;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569 !important;
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res__lobby:hover { background: #dbeafe; color: var(--navy) !important; }

.res__wo {
  flex: 0 0 auto;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.66rem;
  font-weight: 800;
  cursor: help;
}

/* ---- columna derecha ---- */
.side__rank { margin: 0; padding: 0.35rem 0.6rem 0.6rem; list-style: none; }

.side__rank li {
  display: grid;
  grid-template-columns: 1.6rem 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.4rem;
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
}

.side__rank li:last-child { border-bottom: 0; }
.side__rank li.is-d1 { background: linear-gradient(90deg, #fffbeb, #fef3c7); }
.side__rank li.is-first { box-shadow: inset 3px 0 0 #f59e0b; }

.side__pos {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-align: center;
}

.side__rank li.is-first .side__pos { color: #b45309; }
.side__div { width: 30px; height: 22px; object-fit: contain; }

.side__rank a {
  overflow: hidden;
  color: var(--ink) !important;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side__rank a:hover { color: var(--blue) !important; }

.side__rank b {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.side__body { display: flex; flex-direction: column; padding: 0.4rem 1rem 0.7rem; }

.side__news { padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.side__news:last-child { border-bottom: 0; }
.side__news b { display: block; font-size: 0.9rem; color: var(--ink); }
.side__news p { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--ink-soft); white-space: pre-line; }

.side__copa,
.side__new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.side__copa:last-child,
.side__new:last-child { border-bottom: 0; }
.side__copa span:first-child { display: flex; flex-direction: column; min-width: 0; }
.side__copa b { color: var(--ink); font-size: 0.88rem; }
.side__copa small,
.side__new small { color: var(--ink-soft); font-size: 0.75rem; }
.side__new a { color: var(--ink) !important; font-weight: 600; text-decoration: none; }
.side__new a:hover { color: var(--blue) !important; }

/* ---- responsive ---- */
@media (max-width: 767.98px) {

  .res { grid-template-columns: minmax(0, 1fr) 3.8rem minmax(0, 1fr); row-gap: 0.25rem; }
  .res__time { grid-column: 1 / -1; }
  .res__extra { grid-column: 1 / -1; justify-content: flex-start; }
  .res__time,
  .res__extra { order: -1; }
  .res__extra { order: 9; }
}

@media (prefers-reduced-motion: reduce) {
  .res,
  .side__rank li { transition: none; }
}

/* =========================================================================
   AVISOS: mensajes de la página (guardado, error…) y del login
   ========================================================================= */
.pes-flash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pes-flash__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 12px;
  font-size: 0.92rem;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.25);
}

.pes-flash__item .bi { font-size: 1.1rem; line-height: 1.3; }
.pes-flash__item .btn-close { padding: 0.95rem; }

.pes-flash__item--ok { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; color: #14532d; }
.pes-flash__item--ok .bi { color: #16a34a; }
.pes-flash__item--error { background: #fff1f2; border-color: #fecdd3; border-left-color: #e11d48; color: #881337; }
.pes-flash__item--error .bi { color: #e11d48; }
.pes-flash__item--info { background: #eff6ff; border-color: #bfdbfe; border-left-color: #2563eb; color: #1e3a8a; }
.pes-flash__item--info .bi { color: #2563eb; }
.pes-flash__item--warn { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; color: #78350f; }
.pes-flash__item--warn .bi { color: #d97706; }

/* mensaje dentro de la tarjeta de login */
.login-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 12px;
  font-size: 0.88rem;
}

.login-msg .bi { font-size: 1.15rem; line-height: 1.2; }
.login-msg div { display: flex; flex-direction: column; gap: 0.1rem; }
.login-msg span { font-size: 0.8rem; opacity: 0.85; }

.login-msg--error { background: #fff1f2; border-color: #fecdd3; border-left-color: #e11d48; color: #881337; }
.login-msg--error .bi { color: #e11d48; }
.login-msg--ok { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; color: #14532d; }
.login-msg--ok .bi { color: #16a34a; }

/* etiquetas que son enlace (Ver todos, Ver tabla) */
.card-header a.ranking-tag { text-decoration: none; transition: background-color 0.15s ease; }
.card-header a.ranking-tag:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* =========================================================================
   FOTOS DE JUGADORES en la portada
   ========================================================================= */

/* marcador: la foto del jugador es la protagonista, el escudo va de insignia */

/* resultados: foto chica junto al nombre */
.res__names a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}

.res__side--home .res__names { align-items: flex-end; }

.res__names a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res__names img {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.res__side.is-win .res__names img { border-color: #2563eb; }
.res__side.is-loss .res__names img { filter: grayscale(0.7); opacity: 0.75; }

/* columna derecha: ranking y nuevos jugadores con foto */
.side__rank li { grid-template-columns: 1.4rem 32px minmax(0, 1fr) auto; }

.side__avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.side__rank li.is-d1 .side__avatar { border-color: #f59e0b; }

.side__who { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.side__who .side__div { flex: 0 0 auto; width: 26px; height: 18px; }

.side__new a { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }

/* =========================================================================
   RESULTADOS CON FOTOS GRANDES
   Mismo lenguaje que el marcador de arriba, en claro: foto grande en
   círculo, escudo del equipo como insignia, aro azul para el ganador.
   ========================================================================= */
.results__list { display: flex; flex-direction: column; gap: 0.6rem; }
.results__day { margin: 0.6rem 0 0; }
.results__day:first-child { margin-top: 0; }

.mrow {
  padding: 0.55rem 0.9rem 0.85rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mrow:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

.mrow.is-wo { box-shadow: inset 4px 0 0 #e11d48, 0 4px 14px rgba(15, 23, 42, 0.06); }

.mrow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.mrow__time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.mrow__tags { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; max-width: 70%; }

.mrow__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.mrow__side { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.mrow__side--home { justify-content: flex-end; text-align: right; }

.mrow__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }

.mrow__text a {
  overflow: hidden;
  color: var(--ink) !important;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mrow__text a:hover { color: var(--blue) !important; }

.mrow__text small {
  overflow: hidden;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mrow__portrait { position: relative; flex: 0 0 auto; display: inline-flex; }
.mrow__photos { display: flex; }

.mrow__photos img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
}

.mrow__photos img + img { margin-left: -22px; }

.mrow__crest {
  position: absolute;
  right: -6px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.mrow__crest img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ganador y perdedor */
.mrow__side.is-win .mrow__photos img {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 6px 16px rgba(15, 23, 42, 0.22);
}

.mrow__side.is-loss .mrow__photos img { filter: grayscale(0.65); opacity: 0.8; }
.mrow__side.is-loss .mrow__text a { color: #94a3b8 !important; }

.mrow__score {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.85rem;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.mrow__score i { font-style: normal; opacity: 0.5; font-size: 0.8em; }

/* ---- ranking con fotos grandes ---- */
.side__rank li {
  grid-template-columns: 1.4rem 48px minmax(0, 1fr) auto;
  gap: 0.65rem;
  padding: 0.5rem 0.45rem;
}

.side__rank .side__avatar {
  width: 48px;
  height: 48px;
  border-width: 3px;
}

.side__rank li.is-first .side__avatar {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2), 0 4px 12px rgba(15, 23, 42, 0.2);
}

.side__rank .side__who { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.side__rank .side__who a { font-size: 0.95rem; font-weight: 700; }
.side__rank b { font-size: 1.35rem; }

.side__new .side__avatar { width: 40px; height: 40px; }

@media (max-width: 767.98px) {
  .mrow__body { gap: 0.5rem; }
  .mrow__side { flex-direction: column-reverse; gap: 0.35rem; text-align: center; }
  .mrow__side--away { flex-direction: column; }
  .mrow__side--home { text-align: center; }
  .mrow__text { align-items: center; }
  .mrow__text a { font-size: 1.1rem; max-width: 100%; }
  .mrow__photos img { width: 58px; height: 58px; }
  .mrow__score { font-size: 1.6rem; padding: 0.2rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mrow { transition: none; }
  .mrow:hover { transform: none; }
}

/* =========================================================================
   AJUSTES: hora sobre el marcador, ranking con sus colores de siempre y
   columna derecha a la misma altura que Resultados
   ========================================================================= */
.mrow__head { justify-content: flex-end; min-height: 1.2rem; }
.mrow__tags { max-width: 100%; }

.mrow__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.mrow__center .mrow__time {
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ranking y nuevos jugadores: filas de siempre, más aire y fotos más grandes */
.side__list { padding: 0.25rem 0; }
.side__list .ranking-row { padding: 0.3rem 0.85rem; }
.side__list .rank-avatar-sm { width: 42px; height: 42px; }
.side__newrow .side__since { margin-left: auto; color: #64748b; font-size: 0.75rem; white-space: nowrap; }

/* la última tarjeta de la derecha se estira hasta el final de Resultados */
.side--fill { flex: 1 1 auto; }

/* =========================================================================
   RESULTADOS COMO LISTA CONTINUA (sin tarjetas dentro de la tarjeta)
   Filas separadas por una línea fina; el centro reúne hora, marcador y
   vestíbulo. Las fotos grandes se mantienen.
   ========================================================================= */
.results__list { gap: 0; }

.results .mrow {
  padding: 1rem 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.results .mrow:last-child { border-bottom: 0; }

.results .mrow:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
  background: linear-gradient(90deg, transparent 0%, #eef4ff 18%, #eef4ff 82%, transparent 100%);
}

.results .mrow.is-wo { box-shadow: inset 3px 0 0 #e11d48; }

.mrow__center { gap: 0.3rem; min-width: 7.5rem; }
.mrow__center .mrow__time { background: transparent; padding: 0; color: var(--ink-soft); font-weight: 700; }

.mrow__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  max-width: 11rem;
  min-height: 1rem;
}

.mrow__lobby {
  overflow: hidden;
  color: var(--ink-soft) !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mrow__lobby:hover { color: var(--blue) !important; text-decoration: underline; }

.results__day {
  margin: 0.25rem 0 0.15rem;
  font-size: 0.78rem;
  color: var(--navy);
}

@media (max-width: 767.98px) {
  .mrow__center { min-width: 5.5rem; }
  .mrow__meta { max-width: 7rem; }
}

/* la lista reparte el alto disponible: Resultados termina parejo con la columna derecha */
.results .card-body { display: flex; flex-direction: column; }
.results .results__list { flex: 1 1 auto; justify-content: space-around; }

/* =========================================================================
   PORTADA SIN CABECERAS AZULES
   El título de cada sección va afuera, en blanco sobre el fondo oscuro, y el
   contenido en una superficie clara sin marco pesado. Así la portada se ve
   más liviana; el resto del sitio sigue con sus tarjetas.
   ========================================================================= */
.hsec {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.hsec--grow { flex: 1 1 auto; }
.col-lg-8 > .hsec--grow { height: 100%; }

.hsec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.2rem;
}

.hsec__head h2 {
  position: relative;
  margin: 0;
  padding-left: 0.75rem;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

.hsec__head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 4px;
  background: #38bdf8;
}

.hsec__head a {
  color: #93c5fd;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.hsec__head a .bi { transition: transform 0.15s ease; }
.hsec__head a:hover { color: #fff; }
.hsec__head a:hover .bi { transform: translateX(3px); }

.hsec__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0.9rem 1rem;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(148, 197, 255, 0.14);
  background: #f8fafc;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* las listas de ranking y nuevos jugadores van de borde a borde */
.hsec__panel > .list-group { margin: -0.9rem -1rem; }
.hsec__panel > .side__body { margin: -0.4rem -1rem -0.7rem; }

/* resultados: la lista ocupa el alto disponible */
.hsec__panel.results .results__list { flex: 1 1 auto; justify-content: space-around; }

@media (prefers-reduced-motion: reduce) {
  .hsec__head a .bi { transition: none; }
}

/* ---- títulos de sección de la portada: minúscula normal, sin barrita ---- */
.hsec__head h2 {
  padding-left: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: none;
}

.hsec__head h2::before { content: none; }
.hsec__head a { font-size: 0.9rem; font-weight: 600; }

/* =========================================================================
   PIEZAS COMPARTIDAS: encabezado de página y filas de ranking
   (portada, Partidos, Ranking de jugadores, Ranking de grupos)
   ========================================================================= */
.page-head { margin-bottom: 1rem; }

.page-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
}

.page-sub {
  max-width: 70ch;
  margin: 0.35rem 0 0;
  color: #9fb4d6;
  font-size: 0.95rem;
}

.results__select { flex: 0 1 220px; border-radius: 10px; }
.results__empty { margin: 1.5rem 0; color: var(--ink-soft); text-align: center; }

/* filas del ranking (jugadores y grupos) */
.rank-list { margin: -0.9rem -1rem; }

.rank-line {
  gap: 0.85rem !important;
  padding: 0.6rem 1rem !important;
  border-left: 4px solid transparent;
}

.rank-line .rank-avatar-sm { width: 46px; height: 46px; }

.rank-line .rank-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.rank-line__who {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.rank-line__div {
  flex: 0 0 auto;
  width: 38px;
  height: 26px;
  object-fit: contain;
}

/* cada división con el color de su insignia, en suave */
.rank-line--d2 { border-left-color: #8b5cf6; background: #faf5ff; }
.rank-line--3a { border-left-color: #0ea5e9; background: #f0f9ff; }
.rank-line--3b { border-left-color: #22c55e; background: #f0fdf4; }
.rank-line--3c { border-left-color: #cbd5e1; background: #fff; }

.rank-line--d2:hover { background: #f3e8ff; }
.rank-line--3a:hover { background: #e0f2fe; }
.rank-line--3b:hover { background: #dcfce7; }
.rank-line--3c:hover { background: #f8fafc; }

/* ranking de grupos */
a.grp-line { color: inherit; text-decoration: none; }
.grp-shield--md { width: 40px; height: 40px; }
.grp-shield--md span { font-size: 1.05rem; }

.grp-line__who { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.15rem; min-width: 0; }
.grp-line__name { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }

.grp-line__tag {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 700;
}

.grp-line__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.9rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.grp-line__meta .bi { color: #f59e0b; font-size: 0.7rem; }

.grp-line__rec {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .page-head h1 { font-size: 2rem; }
  .rank-line .rank-avatar-sm { width: 38px; height: 38px; }
  .rank-line__div { width: 30px; }
}

/* en las páginas de ranking el campeón no se agranda (se salía del borde)
   y el nombre no ocupa todo el ancho, así el escudo queda a su lado */
.rank-list .ranking-row.rank-champion { transform: none; }
.rank-line .rank-name { flex: 0 1 auto; }

/* =========================================================================
   FICHA DE GRUPO: encabezado como título de página y miembros como filas
   ========================================================================= */
.gpage-head {
  --h: 215;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin: 0.25rem 0 1rem;
}

.gpage-head__main { flex: 1 1 260px; min-width: 0; }

.gpage-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  overflow-wrap: anywhere;
}

.gpage-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin-top: 0.45rem;
  color: #9fb4d6;
  font-size: 0.95rem;
}

.gpage-head__meta .bi { color: #fbbf24; }
.gpage-head__meta a { color: #fff; font-weight: 600; }

.gpage-head__tags { display: flex; gap: 0.4rem; }

.gpage-tag {
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(148, 197, 255, 0.35);
  border-radius: 999px;
  color: #dbeafe;
  font-size: 0.85rem;
  font-weight: 600;
}

.gpage-tag--ok { border-color: rgba(134, 239, 172, 0.5); color: #86efac; }

.gpage-section {
  margin: 0.4rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
}

.group-page .group-back { color: #93c5fd; }

/* miembros */
.member-line .member-avatar { position: relative; flex: 0 0 auto; }

.member-line .member-avatar.is-leader .rank-avatar-sm {
  outline: 3px solid #f59e0b;
  outline-offset: 1px;
}

.member-line .member-avatar .bi {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 0.6rem;
}

.member-line__who { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.15; }
.member-line__who small { color: var(--ink-soft); font-size: 0.78rem; }

.member-line__contrib {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  line-height: 1.1;
}

.member-line__contrib b {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--blue);
}

.member-line__contrib small { color: var(--ink-soft); font-size: 0.74rem; }
.member-line__contrib--none { color: var(--ink-soft); font-size: 0.8rem; }

@media (max-width: 575.98px) {
  .gpage-head h1 { font-size: 2.1rem; }
  .member-line__contrib { display: none; }
}

/* campeones: las cabeceras cortas no se parten a mitad de palabra */
.campeones-table thead th { word-break: normal; overflow-wrap: normal; hyphens: auto; }
.campeones-table thead th:nth-child(-n+4) { white-space: nowrap; }

/* =========================================================================
   PARTIDOS: tabla detallada con el sistema de diseño
   ========================================================================= */
.matches-wrap { margin: 0 -0.25rem; }

.matches-table { min-width: 860px; }
.matches-table td { padding-top: 0.55rem; padding-bottom: 0.55rem; vertical-align: middle; }
.matches-table tbody tr.is-wo td:first-child { box-shadow: inset 3px 0 0 #e11d48; }

.mt-date { white-space: nowrap; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.2; }
.mt-date span, .mt-date b { display: block; }
.mt-date b { color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; }

.mt-team {
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
}

.mt-team img {
  width: 28px;
  height: 28px;
  margin-right: 0.45rem;
  object-fit: contain;
  vertical-align: middle;
}

.mt-players a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.1rem 0;
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mt-players a:hover span { color: var(--blue); text-decoration: underline; }

.mt-players img {
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.mt-players.is-win a { font-weight: 800; }
.mt-players.is-win img { border-color: var(--blue); }
.mt-players.is-loss a { color: #94a3b8 !important; }
.mt-players.is-loss img { filter: grayscale(0.7); opacity: 0.8; }

.mt-score { text-align: center; white-space: nowrap; }

.mt-score__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.7rem;
  border-radius: 10px;
  background: var(--marino);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.mt-score__pill i { font-style: normal; opacity: 0.5; font-size: 0.85em; }

.mt-wo {
  display: block;
  margin-top: 0.2rem;
  color: #be123c;
  font-size: 0.72rem;
  font-weight: 700;
}

.mt-lobby a {
  display: inline-block;
  max-width: 170px;
  padding: 0.15rem 0.6rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--pes-primary-soft, #eff6ff);
  color: var(--marino) !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-lobby a:hover { background: #dbeafe; }

/* =========================================================================
   AVISOS DEL SERVIDOR: franja arriba de la portada
   ========================================================================= */
.news-strip {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(148, 197, 255, 0.18);
  border-left: 4px solid var(--azul, #2563eb);
  border-radius: 14px;
  background: var(--hielo, #f8fafc);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.news-strip__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  align-self: flex-start;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dbeafe;
  color: var(--azul, #2563eb);
  font-size: 1.15rem;
}

.news-strip__items {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem 1.5rem;
  min-width: 0;
}

.news-strip__item { min-width: 0; }

.news-strip__item + .news-strip__item {
  padding-left: 1.5rem;
  border-left: 1px solid var(--linea, #e2e8f0);
}

.news-strip__item h2 {
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--marino, #1e3a8a);
}

.news-strip__item p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--tinta, #0f172a);
  font-size: 0.92rem;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 767.98px) {
  .news-strip { gap: 0.75rem; padding: 0.8rem 0.9rem; }
  .news-strip__icon { width: 34px; height: 34px; font-size: 1rem; }
  .news-strip__item + .news-strip__item {
    padding-top: 0.6rem;
    padding-left: 0;
    border-top: 1px solid var(--linea, #e2e8f0);
    border-left: 0;
  }
}

/* avisos: cada uno se toca para abrir el texto completo en un modal */
button.news-strip__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

button.news-strip__item + button.news-strip__item { padding-left: 1.5rem; }
button.news-strip__item p { -webkit-line-clamp: 2; }

.news-strip__more {
  margin-top: 0.2rem;
  color: var(--azul, #2563eb);
  font-size: 0.85rem;
  font-weight: 600;
}

button.news-strip__item:hover h2,
button.news-strip__item:hover .news-strip__more { text-decoration: underline; }

button.news-strip__item:focus-visible { outline: 2px solid #38bdf8; outline-offset: 4px; }

.news-modal .modal-content {
  border: 0;
  border-radius: 16px;
  background: var(--hielo, #f8fafc);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.5);
}

.news-modal .modal-header {
  gap: 0.75rem;
  border-bottom: 1px solid var(--linea, #e2e8f0);
}

.news-modal .modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--marino, #1e3a8a);
}

.news-modal .modal-header .btn-close { margin-left: auto; }

.news-modal .modal-body p {
  margin: 0;
  max-width: 65ch;
  color: var(--tinta, #0f172a);
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-line;
}

.news-modal__date { display: block; margin-top: 0.9rem; color: var(--gris, #5b6b82); }
.news-modal .modal-footer { border-top: 0; }

@media (max-width: 767.98px) {
  button.news-strip__item + button.news-strip__item { padding-left: 0; }
}

/* =========================================================================
   AUDITORÍA DE CONEXIONES
   ========================================================================= */
.audit-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
a.audit-stat--alert { text-decoration: none; border-left: 4px solid #e11d48; }
a.audit-stat--alert:hover { background: #fff1f2; }

.audit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.25rem 0 1rem;
}

.audit-tabs {
  display: inline-flex;
  padding: 0.25rem;
  border: 1px solid rgba(148, 197, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.audit-tabs a {
  padding: 0.45rem 0.95rem;
  border-radius: 9px;
  color: #cbd5e1;
  font-weight: 600;
  text-decoration: none;
}

.audit-tabs a:hover { color: #fff; }
.audit-tabs a.is-active { background: var(--hielo, #f8fafc); color: var(--marino, #1e3a8a); }

.audit-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.audit-search .form-control { width: 240px; border-radius: 10px; }

.audit-hint {
  max-width: 75ch;
  margin: 0 0 0.9rem;
  color: #9fb4d6;
  font-size: 0.92rem;
}

.audit-groups { display: flex; flex-direction: column; gap: 0.75rem; }

.audit-group {
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(148, 197, 255, 0.14);
  border-left: 4px solid #e11d48;
  border-radius: 14px;
  background: var(--hielo, #f8fafc);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.audit-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-bottom: 0.65rem;
}

.audit-ip {
  margin-right: 0.6rem;
  color: var(--tinta, #0f172a) !important;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.audit-ip:hover { color: var(--azul, #2563eb) !important; text-decoration: underline; }
.audit-loc { color: var(--gris, #5b6b82); font-size: 0.9rem; }

.audit-group__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  color: var(--gris, #5b6b82);
  font-size: 0.88rem;
}

.audit-group__facts b { color: #be123c; }

.audit-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}

.audit-member {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--linea, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  color: var(--tinta, #0f172a) !important;
  text-decoration: none;
  line-height: 1.3;
}

.audit-member:hover { border-color: #93c5fd; background: #f1f6ff; }
.audit-member b { font-family: var(--font-display); font-size: 1.1rem; }
.audit-member small { color: var(--gris, #5b6b82); font-size: 0.78rem; }

.audit-empty { margin: 1.25rem 0; color: #9fb4d6; text-align: center; }
.hsec__panel .audit-empty { color: var(--gris, #5b6b82); }

.audit-table td { vertical-align: middle; }
.audit-table.table-crew td:nth-child(4) { font-weight: inherit; text-align: left; }

.audit-name {
  color: var(--tinta, #0f172a) !important;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.audit-name:hover { color: var(--azul, #2563eb) !important; text-decoration: underline; }
.audit-sub { display: block; color: var(--gris, #5b6b82); font-size: 0.78rem; }
.audit-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
a.audit-mono { color: var(--marino, #1e3a8a) !important; text-decoration: none; }
a.audit-mono:hover { text-decoration: underline; }

.audit-flag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #ffe4e6;
  color: #be123c;
  font-size: 0.8rem;
  font-weight: 700;
}

.audit-ok { color: var(--gris, #5b6b82); font-size: 0.82rem; }
.audit-count { color: var(--gris, #5b6b82); }

.audit-table tr.is-shared td { background: #fff7f8 !important; }

.audit-chip {
  display: inline-block;
  margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0.1rem 0.55rem;
  border: 1px solid #fecdd3;
  border-radius: 999px;
  background: #fff;
  color: #be123c !important;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.audit-chip:hover { background: #ffe4e6; }

/* ficha de cuenta */
.audit-account { display: flex; flex-direction: column; gap: 0.75rem; }
.audit-account .group-back { color: #93c5fd; }

.audit-account__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
}

.audit-account__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  margin-top: 0.35rem;
  color: #cbd5e1;
  font-size: 0.92rem;
}

.audit-linked {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid #fecdd3;
  border-left: 4px solid #e11d48;
  border-radius: 12px;
  background: #fff1f2;
  color: #881337;
}

.audit-linked .bi { color: #e11d48; font-size: 1.2rem; }
.audit-linked__list { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; margin-top: 0.2rem; }
.audit-linked__list a { color: #9f1239 !important; font-weight: 700; }

.audit-h3 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.audit-recent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.35rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-recent li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--linea, #e2e8f0);
  font-size: 0.9rem;
}

@media (max-width: 575.98px) {
  .audit-tabs { width: 100%; }
  .audit-tabs a { flex: 1; padding: 0.45rem 0.5rem; text-align: center; font-size: 0.85rem; }
  .audit-search .form-control { width: 100%; }
}


/* =========================================================================
   JUGAR PES 6 ONLINE (portada) y GUÍA /como-jugar
   Motivo: la "línea de pase" de pizarra que une los pasos, y la escalera de
   escudos de división. Coral solo en "Crear cuenta".
   ========================================================================= */
.btn-coral,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-coral {
  background: var(--coral, #f43f5e);
  color: #fff;
  box-shadow: 0 8px 20px rgba(244, 63, 94, 0.32);
}
.btn-coral:hover, .btn-coral:focus-visible { background: #e11d48; color: #fff; transform: translateY(-1px); }
.btn-ghost {
  border: 1px solid rgba(147, 197, 253, 0.45);
  color: #e0ecff;
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: #93c5fd; background: rgba(147, 197, 253, 0.1); color: #fff; }
.btn-coral:focus-visible, .btn-ghost:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }

/* ---- franja de la portada: cancha a tiza ---- */
.play-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem;
  align-items: center;
  margin-top: 2.25rem;
  padding: 2.25rem 2.5rem;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(148, 197, 255, 0.16);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Cpath d='M600 0v400'/%3E%3Ccircle cx='600' cy='200' r='80'/%3E%3Cpath d='M1200 70h-170v260h170M1200 140h-60v120h60'/%3E%3Cpath d='M0 70h170v260H0M0 140h60v120H0'/%3E%3Cpath d='M1030 150a80 80 0 0 0 0 100M170 150a80 80 0 0 1 0 100'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(120% 140% at 85% 0%, #1b3a7a 0%, #10224a 45%, #0b1530 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  color: #c7d6ee;
}
.play-band__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.play-band__lead { margin: 0; max-width: 52ch; line-height: 1.6; }
.play-band__lead b { color: #fff; }
.play-band a:not([class]) { color: #93c5fd; font-weight: 600; text-underline-offset: 3px; }
.play-band a:not([class]):hover { color: #fff; }

.play-band__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 1.4rem;
  padding: 0;
  list-style: none;
}
.play-band__platforms li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(147, 197, 253, 0.1);
  border: 1px solid rgba(147, 197, 253, 0.18);
  font-size: 0.88rem;
  font-weight: 600;
  color: #dbe8ff;
}
.play-band__platforms .bi { color: #38bdf8; }
.play-band__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* línea de pase: tres puntos unidos por una línea de tiza discontinua */
.pass-line {
  --dot: 46px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pass-line::before {
  content: "";
  position: absolute;
  top: calc(var(--dot) / 2 - 1px);
  left: calc(var(--dot) / 2);
  right: calc((100% - 3rem) / 3 - var(--dot) / 2);
  border-top: 2px dashed rgba(147, 197, 253, 0.45);
}
.pass-line__step { position: relative; }
.pass-line__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: #0b1530;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.1);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
}
.pass-line__step:last-child .pass-line__dot { background: #2563eb; border-color: #93c5fd; }
.pass-line__name {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}
.pass-line__step p { margin: 0; font-size: 0.93rem; line-height: 1.5; }

@media (max-width: 991.98px) {
  .play-band { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem 1.5rem; }
}
@media (max-width: 575.98px) {
  .pass-line { grid-template-columns: 1fr; gap: 1.1rem; }
  .pass-line::before {
    top: calc(var(--dot) / 2);
    bottom: calc(var(--dot) / 2);
    left: calc(var(--dot) / 2 - 1px);
    right: auto;
    border-top: 0;
    border-left: 2px dashed rgba(147, 197, 253, 0.45);
  }
  .pass-line__step { display: grid; grid-template-columns: var(--dot) 1fr; column-gap: 1rem; }
  .pass-line__dot { grid-row: span 2; margin: 0; }
  .play-band__actions a { flex: 1 1 auto; justify-content: center; }
}

/* ---- guía ---- */
.guide__crumbs { font-size: 0.85rem; color: #94a3b8; margin-bottom: 0.75rem; }
.guide__crumbs a { color: inherit; text-decoration: none; }
.guide__crumbs a:hover { color: #fff; }

.guide-hero {
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 2px dashed rgba(147, 197, 253, 0.2);
}
.guide-hero__title {
  margin: 0 0 0.6rem;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 0.98;
  color: #fff;
}
.guide-hero__sub { max-width: 60ch; margin: 0 0 1.25rem; color: #b6c7e3; font-size: 1.05rem; line-height: 1.55; }
.guide-hero__sub b { color: #fff; }

.guide-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* índice: la misma línea de pase, en vertical */
.guide-toc { position: sticky; top: 84px; }
.guide-toc__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}
.guide-toc__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.guide-toc__list::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 13px;
  border-left: 2px dashed rgba(147, 197, 253, 0.3);
}
.guide-toc__list li { counter-increment: toc; }
.guide-toc__list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  color: #b6c7e3;
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
}
.guide-toc__list a::before {
  content: counter(toc);
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  height: 28px;
  border-radius: 50%;
  background: #0b1530;
  border: 2px solid rgba(147, 197, 253, 0.4);
  font-family: var(--font-display);
  font-weight: 800;
  color: #dbe8ff;
}
.guide-toc__list a:hover { color: #fff; }
.guide-toc__list a:hover::before { border-color: #38bdf8; }
.guide-toc__list a:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 6px; }

.guide-body { display: grid; gap: 2.25rem; min-width: 0; }
.guide-sec { display: flex; flex-direction: column; min-width: 0; }
.guide-sec__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.8rem;
  scroll-margin-top: 84px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}
.guide-sec__num {
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  height: 36px;
  border-radius: 50%;
  background: #2563eb;
  font-size: 1.2rem;
  font-weight: 800;
}

.guide-card {
  padding: 1.4rem 1.6rem;
  border-radius: 16px;
  border: 1px solid rgba(148, 197, 255, 0.14);
  background: #f8fafc;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  color: #334155;
  line-height: 1.6;
}
.guide-card--fill { flex: 1 1 auto; }
.guide-card p { max-width: 70ch; margin: 0 0 1rem; }
.guide-card a, .guide-faq a { color: #1e3a8a; font-weight: 600; text-underline-offset: 3px; }
.guide-card a:hover, .guide-faq a:hover { color: #2563eb; }
.guide-card b { color: #0f172a; }
.guide code {
  padding: 1px 6px;
  border-radius: 5px;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 0.85em;
  overflow-wrap: anywhere;
}
.guide-card .guide-note { margin: 1rem 0 0; font-size: 0.92rem; color: #5b6b82; }

/* datos de la cuenta */
.guide-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.guide-fields > div { padding: 0.8rem 1rem; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; }
.guide-fields dt { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #1e3a8a; }
.guide-fields dd { margin: 0.15rem 0 0; font-size: 0.92rem; line-height: 1.45; }

/* ejemplo del login, con las barras de menú del juego */
.game-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #eef4ff;
  border: 1px solid #c7d8f8;
}
.guide-card .game-login__caption { margin: 0; color: #1e3a8a; }
.game-login__screen {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: #0b1530;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.2);
}
.game-login__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #1e3a8a, #2563eb 70%, #1e40af);
  font-family: var(--font-display);
  color: #bfd3f5;
}
.guide-card .game-login__row b { color: #fff; font-size: 1.15rem; letter-spacing: 0.02em; }
.game-login__row em { font-style: normal; color: #7dd3fc; padding: 0 1px; }

/* PC y PS2 lado a lado */
.guide-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }

.steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 2.6rem; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #2563eb;
  background: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  color: #1e3a8a;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  bottom: -1rem;
  left: 13px;
  border-left: 2px dashed #bfd3f5;
}

.guide-card--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.guide-card--split p { margin: 0; }
.guide-card__sub {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}
.guide-card__sub .bi { color: #2563eb; }

/* escalera de divisiones: cada escalón más alto */
.div-stairs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 0.6rem;
  margin: 2.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
}
.div-stairs__step {
  --c: #94a3b8;
  --bg: #eef2f7;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 0.4rem 0.9rem;
  border-radius: 12px 12px 4px 4px;
  border-top: 4px solid var(--c);
  background: var(--bg);
  text-align: center;
}
.div-stairs__step img { width: 64px; height: 64px; margin-bottom: 0.35rem; }
.guide-card .div-stairs__step b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: #0f172a; }
.div-stairs__step span { font-size: 0.82rem; color: #5b6b82; }
.div-stairs__step--3c { min-height: 150px; }
.div-stairs__step--3b { min-height: 172px; --c: #22c55e; --bg: #ecfdf3; }
.div-stairs__step--3a { min-height: 194px; --c: #0ea5e9; --bg: #ecf8ff; }
.div-stairs__step--d2 { min-height: 216px; --c: #8b5cf6; --bg: #f6f0ff; }
.div-stairs__step--d1 { min-height: 238px; --c: #f5b800; --bg: #fff8e1; }
.div-stairs__start {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

/* preguntas: desplegables */
.guide-faq { display: grid; gap: 0.6rem; }
.guide-faq details {
  border-radius: 14px;
  border: 1px solid rgba(148, 197, 255, 0.14);
  background: #f8fafc;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  color: #334155;
}
.guide-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.3rem;
  cursor: pointer;
  list-style: none;
}
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after {
  content: "";
  flex: 0 0 10px;
  height: 10px;
  border-right: 2px solid #2563eb;
  border-bottom: 2px solid #2563eb;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}
.guide-faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.guide-faq summary:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 14px; }
.guide-faq h3 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: #0f172a; }
.guide-faq details p { max-width: 70ch; margin: 0; padding: 0 1.3rem 1.1rem; line-height: 1.6; }

.guide-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-radius: 16px;
  border: 2px dashed rgba(147, 197, 253, 0.3);
}
.guide-end p { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #fff; }

@media (max-width: 991.98px) {
  .guide-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .guide-toc {
    position: static;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    border: 1px solid rgba(147, 197, 253, 0.15);
    background: rgba(147, 197, 253, 0.06);
  }
  .guide-toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .guide-toc__list::before { content: none; }
  .guide-platforms { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .guide-fields, .guide-card--split, .game-login { grid-template-columns: 1fr; }
  .div-stairs { gap: 0.3rem; }
  .div-stairs__step { padding: 0.6rem 0.2rem 0.7rem; }
  .div-stairs__step img { width: 40px; height: 40px; }
  .guide-card .div-stairs__step b { font-size: 1.2rem; }
  .div-stairs__step span { font-size: 0.7rem; }
  .div-stairs__step--3c { min-height: 110px; }
  .div-stairs__step--3b { min-height: 125px; }
  .div-stairs__step--3a { min-height: 140px; }
  .div-stairs__step--d2 { min-height: 155px; }
  .div-stairs__step--d1 { min-height: 170px; }
  .div-stairs__start { font-size: 0.68rem; }
}
@media (max-width: 575.98px) {
  .guide-card { padding: 1.1rem; }
  .guide-toc__list { grid-template-columns: 1fr; }
  .guide-end { flex-direction: column; align-items: stretch; text-align: center; }
  .guide-end .play-band__actions a { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-coral, .btn-ghost, .guide-faq summary::after { transition: none; }
  .btn-coral:hover, .btn-coral:focus-visible { transform: none; }
}
.guide-card .game-login__row b.game-login__auto { color: #93c5fd; font-size: 1rem; font-weight: 600; }