/* ═══════════════════════════════════════════════
   PRODE MUNDIAL 2026 — Estilos globales
   ═══════════════════════════════════════════════ */

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

:root {
  --bg:      #49005d;
  --surface: #18171c;
  --border:  #2e2c35;
  --accent:  #fbde5a;
  --accent2: #e8d48a;
  --text:    #e8e6f0;
  --muted:   #9690b9;
  --error:   #e06060;
  --success: #60c088;
  --radius:  10px;
}

a.link {color: #fff;}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(200,181,96,.2) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 90% 85%, rgba(200,181,96,.1) 0%, transparent 60%);
}

/* ── Auth pages (login / registro) ── */
body.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--accent);
}

hr {
  border: none;
  border-top: 1px solid #FBDE5A8C;
  margin: 18px 20px 16px 10px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.5rem 2.8rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  animation: fadeUp .45s ease both;
}

@keyframes fadeUp {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0);    }
}

.logo {
  font-family: 'DM Serif Display', serif;
  font-size: 1.9rem;
  color: var(--accent);
  letter-spacing: -.5px;
  margin-bottom: .2rem;
  text-align: center;
}
.img-top-l {
  position: absolute;
  /*font-size: 4.5rem;*/
  top: -22px;
  left: -22px;
  z-index: 999;
}
.img-top-r {
  position: absolute;
  top: -22px;
  right: -22px;
  z-index: 999;
}
.img-top-round-l {
  width: 102px;
  border-radius: 24px 6px 14px 6px;
}
.img-top-round-r {
  width: 102px;
  border-radius: 6px 24px 6px 14px;
}

.subtitle {
  font-size: 1.4rem;
  text-align: center;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 300;
}

.pixel {
    width: 6px;
    height: 3px;
    background-color: var(--success);
    position: absolute;
    opacity: .8;
    top: 50%;
    left: 50%;
    animation: moverPixel 18s ease infinite;
}

@keyframes moverPixel {
    0%  { transform: translate(0, 0) rotate(0deg) scale(1.0);}
    16% { transform: translate(310px, 180px)  rotate(360deg) scale(2.0); }
    33% { transform: translate(-290px, -15px) rotate(720deg) scale(1.5); }
    50% { transform: translate(-110px, 120px) rotate(180deg) scale(3.0); }
    67% { transform: translate(-360px, -90px) rotate(360deg) scale(1.4); }
    84% { transform: translate(-80px, -300px) rotate(100deg) scale(0.7); }
    100% { transform: translate(0 , 0)  rotate(0) scale(1.05); }
}

.alert-error {
  background: rgba(224,96,96,.12);
  border: 1px solid rgba(224,96,96,.3);
  color: #f09090;
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-size: .85rem;
  margin-bottom: 1.4rem;
}

.bold {
  font-weight: 600;
}

label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: 1.2rem;
}
input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(251,222,90,.15);
}

button[type="submit"] {
  width: 100%;
  background: var(--accent);
  color: #0f0e11;
  border: none;
  border-radius: var(--radius);
  padding: .85rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .03em;
  transition: background .2s, transform .1s;
  margin-top: .4rem;
}
button[type="submit"]:hover  { background: var(--accent2); }
button[type="submit"]:active { transform: scale(.98); }

.footer-link {
  text-align: center;
  margin-top: 1.6rem;
  font-size: .85rem;
  color: var(--muted);
}
.footer-link a { color: var(--accent2); text-decoration: none; font-weight: 500; }
.footer-link a:hover { text-decoration: underline; }

/* ══════════════════════════════════════
   DASHBOARD LAYOUT
   ══════════════════════════════════════ */

.dash-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ── Sidebar ── */
.sidebar {
  display: flex;
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 0 2rem;
  border-right: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  letter-spacing: .12em;
  color: var(--accent);
  padding: 0 2rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-logo div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--muted);
  font-weight: 400;
  margin-top: .3rem;
}

nav { flex: 1; padding: 2rem 0; }

nav a {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.55rem;
  letter-spacing: .06em;
  color: rgba(232,230,240,.28);
  text-decoration: none;
  padding: .5rem 2rem;
  position: relative;
  transition: color .2s, padding-left .2s;
  line-height: 1.25;
}
nav a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  transition: height .25s;
}
nav a:hover { color: rgba(232,230,240,.65); padding-left: 2.4rem; }
nav a.active { color: var(--accent); padding-left: 2.4rem; }
nav a.active::before { height: 65%; }

.nav-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 1rem 2rem;
}
nav a.nav-small {
  font-size: .95rem;
  letter-spacing: .08em;
  color: rgba(232,230,240,.38);
  padding: .35rem 2rem;
}
nav a.nav-small:hover  { color: rgba(232,230,240,.7); padding-left: 2.4rem; }
nav a.nav-small.active { color: var(--accent); padding-left: 2.4rem; }
nav a.nav-small::before { background: var(--accent); }

.sidebar-footer {
  padding: 1.5rem 2rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

.hidden {
  display: none;
}

.side-sub {
  display:flex;
}
.col-link {
  font-size: 0rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
  display:flex;
}
.col-link:hover { color: var(--accent); }

.user-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px 14px 0 0;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.user-avatar {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  color: #0f0e11;
  flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name  { font-size: .88rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-badge { font-size: .7rem; color: var(--muted); font-weight: 300; }


.perfil-edit {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1);
  border-left:   1px solid rgba(255,255,255,.1);
  border-right:  1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  border-radius: 0 0 8px 8px;
  padding: .5rem 1rem;
  color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: .8rem;
  cursor: pointer; width: 100%; text-align: left;
  transition: border-color .2s, color .2s, background .2s;
  text-decoration: none;
}
.perfil-edit:hover {
  border-color: rgba(251,222,90,.2);
  color: var(--accent2);
  background: rgba(255,255,255,.2);
}

/* ── Main content ── */
.main-content {
  flex: 1;
  padding: 3rem;
  overflow-y: auto;
  min-width: 0;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.2rem;
  letter-spacing: .1em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .4rem;
}
.section-sub {
  font-size: .83rem;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 2.5rem;
  letter-spacing: .04em;
}

/* ── Grupo navigation pills ── */
.grupos-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.2rem;
}
.grupo-pill {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .95rem;
  letter-spacing: .18em;
  padding: .35rem .9rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.grupo-pill:hover { border-color: rgba(251,222,90,.4); color: var(--accent2); }
.grupo-pill.active {
  background: var(--accent);
  color: #0f0e11;
  border-color: var(--accent);
}

.grupo-pill.todos {
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(250,200,155,.18);
}

/* ── Standings table ── */
.standings {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  min-width: 430px;
  overflow-y: hidden;
  /*overflow: hidden;*/
  margin-bottom: 2.5rem;
}
.standings-row {
  display: grid;
  grid-template-columns: 26px 1fr repeat(7, 32px);
  align-items: center;
  padding: .75rem 1.5rem;
  gap: .5rem;
  font-size: .83rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
}
.standings-row:last-child { border-bottom: none; }
.standings-row.header {
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(0,0,0,.25);
}
.standings-row:not(.header):hover { background: rgba(255,255,255,.03); }
.pos { color: var(--muted); font-size: .8rem; }
.team-name-row { font-weight: 500; color: var(--text); display: flex; align-items: center; gap: .5rem; }
.col-center { text-align: center; color: var(--muted); }
.pts { text-align: center; font-weight: 700; color: var(--accent); }
.qualify-dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ── Jornada ── */
.jornada-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .2em;
  color: var(--muted);
  margin-bottom: 1rem;
}
.partidos-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }

/* ── Partido card ── */
.partido-card {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: .6rem 1rem;
  transition: border-color .2s, background .2s;
}
.partido-card:hover {
  /*border-color: rgba(255,255,255,.45);*/
  border: 1px solid rgba(255,255,255,.6);
  opacity: .9;
  /*background: rgba(251,222,90,.03);*/
}
.res-no {
  border-color: rgba(251,222,190,.4);
  background: rgba(251,222,190,.1);
}
.res-ok {
  border-color: rgba(0,255,52,.4);
  background: rgba(0,255,52,.22);
}
.res-inv {
  border-color: rgba(250,120,0,.4);
  background: rgba(250,120,0,.15);
}

.equipo { display: flex; align-items: center; gap: .7rem; }
.equipo.right { flex-direction: row-reverse; text-align: right; }
.equipo-flag { font-size: 1.2rem; line-height: 1; }
.equipo-nombre { font-size: .92rem; font-weight: 500; color: var(--text); }
.equipo-conf   { font-size: .7rem; color: var(--muted); font-weight: 300; }

.score-area {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
}
.score-input {
  width: 50px; height: 50px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  color: var(--accent);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -moz-appearance: textfield;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.score-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(251,222,90,.15);
  background: rgba(251,222,90,.06);
}
.score-sep { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--muted); }

.partido-meta {
  grid-column: 1 / -1;
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .03em;
  padding-top: .3rem;
  border-top: 1px solid rgba(255,255,255,.05);
  text-align: center;
}

.info-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.info-intro {
  color: var(--muted);
  line-height: 1.4;
  padding: 1rem;
  background: rgba(255,255,255,.03);
  border-left: 3px solid #58D592;
  border-radius: 0 12px 12px 0;
}

.info-item {
  font-size: .85rem;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .9rem;
  height: 170px;
  overflow-y: auto;
}

.part-items {
  display: grid;
  grid-template-columns: .3fr .2fr .3fr .2fr;
  gap: .06rem;
}
.part-item {
  font-size: .83rem;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: .15rem 0 .15rem .7rem;
}
.part-res {
  background: rgba(0,0,0,.45);
  margin-right:5px;
}
.jugado, .ganado, .exacto, .inverso {
  background: rgba(0,102,20,.22);
  border: none;
}
.jugado-res {
  background: rgba(0,102,20,.33);
}
.ganado-res {
  background: rgba(0,120,20,.52);
  border: 1px solid rgba(0,120,20,.45);
}
.exacto-res {
  background: rgba(0,120,20,.7);
  border: 1px solid rgba(165,255,0,.4);
}
.inverso-res {
  background: rgba(165,60,15,.45);
  border: 1px solid rgba(200,100,0,.45);
}

/* ── Save row ── */
.save-row { display: flex; justify-content: flex-end; margin-top: .5rem; margin-bottom: 3rem; }
.btn-guardar {
  background: var(--accent);
  color: #0f0e11;
  border: none;
  border-radius: 9px;
  padding: .7rem 2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .2s, transform .1s;
}
.btn-guardar:hover  { background: var(--accent2); }
.btn-guardar:active { transform: scale(.97); }

/* ── Note ── */
.note {
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 2rem; right: 2rem;
  background: #14131a;
  border: 1px solid rgba(251,222,90,.4);
  color: var(--accent);
  padding: .8rem 2rem;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  z-index: 999;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── Placeholder ── */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 16px;
  color: var(--muted);
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.grupo-pill.comodines-pill {
  border-color: rgba(251,222,90,.2);
  color: var(--accent2);
  margin-left: .4rem;
  position: relative;
}
/*.grupo-pill.comodines-pill::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.12);
  position: absolute;
  left: -.65rem;
  top: 50%;
  transform: translateY(-50%);
}*/
.grupo-pill.comodines-pill.active {
  background: linear-gradient(135deg, #f5a623, var(--accent));
  border-color: #f5a623;
  color: #0f0e11;
}
.grupo-pill.comodines-pill:hover:not(.active) {
  border-color: rgba(245,166,35,.5);
  color: #f5c84a;
}

/* ── Comodines grid ── */
.comodines-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.comodin-card {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1.8rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: border-color .2s, background .2s;
  animation: fadeUp .4s ease both;
}
.comodin-card:nth-child(2) { animation-delay: .07s; }
.comodin-card:nth-child(3) { animation-delay: .14s; }

.comodin-card:hover {
  border-color: rgba(251,222,90,.2);
  background: rgba(251,222,90,.03);
}

.campeon-card {
  border-color: rgba(245,166,35,.2);
  background: rgba(245,166,35,.04);
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  padding: 2rem 2.5rem;
}
.campeon-card:hover {
  border-color: rgba(245,166,35,.4);
  background: rgba(245,166,35,.07);
}
.campeon-card .comodin-icon { font-size: 2.8rem; flex-shrink: 0; }
.campeon-card .comodin-label { font-size: 1.3rem; }
.campeon-card .select-wrap { margin-top: 0; flex: 1; }

.comodin-icon {
  font-size: 2rem;
  line-height: 1;
}

.comodin-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: var(--text);
}

.comodin-desc {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.5;
  flex: 1;
}

.select-wrap {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .3rem;
}

.comodin-select {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  padding: .7rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239690b9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.2rem;
}
.comodin-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(251,222,90,.12);
}
.comodin-select option {
  background: #1e1c25;
  color: var(--text);
}

.select-flag {
  font-size: 1.6rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
  transition: transform .2s;
}
.select-flag.fi {
  transform: scale(1.1);
}

/* ══════════════════════════════════════
   TABLA DE POSICIONES
   ══════════════════════════════════════ */
.ranking-table {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  min-width: 420px;
  overflow-y: hidden;
  margin-bottom: 2rem;
}
.ranking-row {
  display: grid;
  grid-template-columns: 32px 1fr 66px 70px 70px 70px;
  align-items: center;
  padding: .9rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  gap: .33rem;
  transition: background .15s;
}
.ranking-row:last-child { border-bottom: none; }
.ranking-header {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0,0,0,.25);
}
.ranking-row:not(.ranking-header):not(.ranking-empty):hover { background: rgba(255,255,255,.03); }
.ranking-row:nth-child(2):not(.ranking-header) { background: rgba(255,215,0,.04); }
.ranking-row:nth-child(3):not(.ranking-header) { background: rgba(192,192,192,.03); }
.ranking-row:nth-child(4):not(.ranking-header) { background: rgba(205,127,50,.03); }
.rk-pos {
  font-size: 1rem;
  text-align: center;
  line-height: 1;
}
.rk-name {
  font-weight: 500;
  font-size: .9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.rk-cant {
   font-size: .8rem;
   color: var(--muted);
}
.rk-avatar {
  width: 33px; height: 33px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .85rem;
  color: #0f0e11;
  flex-shrink: 0;
}
.rk-pts {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  color: var(--accent);
  text-align: center;
}
.rk-pts-tit {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  color: var(--accent);
  text-align: center;
}
.rk-detail { text-align: center; font-size: .92rem; color: var(--muted); }
.rk-detail-tit { text-align: center; font-size: .7rem; color: var(--muted); }
.ranking-empty {
  padding: 3.5rem 2rem;
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  line-height: 1.6;
}

.ranking-row-yo {
  background: rgba(251,222,90,.12) !important;
  border-left: 1px solid var(--accent);
}
.ranking-row-arg {
  /*background: rgba(251,222,90,.08) !important;*/
  border-left: 4px solid #00e9ff;
}
.ranking-row-esp {
  /*background: rgba(251,222,90,.08) !important;*/
  border-left: 4px solid #f22800;
}

.rk-yo-badge {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(251,222,90,.15);
  border: 1px solid rgba(251,222,90,.3);
  color: var(--accent);
  border-radius: 4px;
  padding: .1rem .4rem;
  flex-shrink: 0;
}

.ranking-empty-icon { font-size: 2.5rem; margin-bottom: .5rem; opacity: .4; }
.puntos-ref {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 2rem;
}
.puntos-ref-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .9rem;
  letter-spacing: .15em;
  color: var(--muted);
  margin-bottom: 1rem;
}
.puntos-ref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.puntos-ref-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  color: var(--muted);
}
.puntos-badge {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .9rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  padding: .15rem .45rem;
  color: var(--text);
  flex-shrink: 0;
  min-width: 26px;
  text-align: center;
}
.puntos-badge-gold   { background: rgba(251,222,90,.15); border-color: rgba(251,222,90,.3); color: var(--accent); }
.puntos-badge-trophy { background: rgba(255,180,0,.15);  border-color: rgba(255,180,0,.4);  color: #FFD700; }

/* ══════════════════════════════════════
   CÓMO JUGAR
   ══════════════════════════════════════ */
.reglas-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /*max-width: 720px;*/
}
.reglas-intro {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.7;
  padding: 1.2rem 1.5rem;
  background: rgba(255,255,255,.03);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}
.reglas-section { display: flex; flex-direction: column; gap: 1rem; }
.reglas-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .1em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .7rem;
  padding-top: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.reglas-icon { font-size: 1.1rem; }
.reglas-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
.regla-item {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color .2s;
}
.regla-item:hover { border-color: rgba(255,255,255,.25); }
.regla-highlight {
  border-color: rgba(251,222,80,.15);
  background: rgba(251,222,80,.04);
}
.regla-highlight:hover { border-color: rgba(251,222,80,.4); }

.regla-trophy {
  border-color: rgba(255,200,0,.35) !important;
  background: rgba(255,200,0,.07) !important;
}
.regla-trophy:hover { border-color: rgba(255,220,0,.6) !important; }

.regla-inv {
  border-color: rgba(255,80,20,.25) !important;
  background: rgba(255,80,20,.1) !important;
}
.regla-inv:hover { border-color: rgba(255,80,10,.6) !important; }

.regla-pts {
  flex-shrink: 0;
  text-align: center;
  width: 52px;
}
.regla-pts span {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
}
/*.regla-pts::after {
  content: 'pts';
  display: block;
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}*/
.regla-pts-gold span  { color: var(--accent); }
.regla-pts-trophy span { color: #FFD700; font-size: 2.6rem; }
.regla-desc strong {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .3rem;
}
.regla-desc p {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.55;
  margin: 0;
}
.reglas-nota {
  background: rgba(224,96,96,.08);
  border: 1px solid rgba(224,96,96,.2);
  border-radius: 10px;
  padding: 1rem 1.3rem;
  font-size: .8rem;
  color: #c09090;
  line-height: 1.6;
}
.reglas-nota strong { color: #e09090; }

/* ══════════════════════════════════════
   KNOCKOUT / FASES ELIMINATORIAS
   ══════════════════════════════════════ */
.knockout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 2rem;
}

.knockout-card {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: .9rem 1.2rem;
  display: grid;
  grid-template-columns: 28px 1fr 36px 1fr 24px;
  align-items: center;
  gap: .6rem;
  transition: border-color .2s, background .2s;
  animation: fadeUp .35s ease both;
}
.knockout-card:nth-child(odd)  { animation-delay: .04s; }
.knockout-card:nth-child(even) { animation-delay: .08s; }
.knockout-card:hover {
  border-color: rgba(251,222,90,.2);
  background: rgba(251,222,90,.03);
}

.knockout-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
  opacity: .6;
}

.knockout-local,
.knockout-visita {
  min-width: 0;
}
.knockout-visita { text-align: right; }

.knockout-team {
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
  opacity: .7;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knockout-vs {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--muted);
  text-align: center;
  opacity: .5;
}

.knockout-lock {
  font-size: .8rem;
  text-align: right;
  opacity: .3;
}

/* Final más destacado */
.final-grid .partido-card {
  padding: 1.1rem 1.8rem;
  font-size: 1.3rem;
  /*border: 2px solid rgba(255,255,255,.15);*/
}
.final-grid .score-input {
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  font-size: 2.4rem;
}

/*.rotar-flecha {
  transform: rotate(180deg);
}*/

@keyframes sUp {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(180deg);
  }
}

.rotar-flecha {
  animation: sUp .7s ease-out forwards;
}

.progress-track {
  padding: 0.35rem;
  font-size: .86rem;
  color: #49005D;
  line-height: 1.6;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  padding: 0.2rem 0.5rem;
  height: 100%;
  width: 40%;
  background: var(--success);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.progress-nota {
  padding: 0 0 .2rem .4rem;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
}

.avatar-com-badge {
  position: relative; top: -12px; left: -16px;
  min-width: 13px; height: 13px;
  background: #00000099;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  color: #0f0e11;
  /*border: 1px solid var(--surface);*/
  /*transition: background .2s, transform .15s;*/
  line-height: 1;
}


/* ── Responsive ── */
@media (max-width: 780px) {
  .dash-layout { flex-direction: column; }
  .sidebar {
    width: 70%; height: auto;
    position: relative;
    border-right: none;
    /*border-bottom: 1px solid rgba(255,255,255,.06);*/
    padding: 1.2rem 0;
    border-radius: 0 15px 12px 0;
    box-shadow: 4px 4px 20px 5px rgba(255,255,255,.18);
  }
  .main-content { padding: 2.5rem 1rem 1.2rem 1rem; }
  nav { padding: 1rem 0; }
  nav a { font-size: 1.2rem; padding: .35rem 1.5rem; }
  nav a.nav-small { font-size: .88rem; padding: .3rem 1.5rem; }
  .nav-divider { margin: .7rem 1.5rem; }
  .sidebar-logo { font-size: 1.8rem; padding: 0 1.5rem 1rem; }
  .col-link { font-size: 1.2rem; }

  .partido-card { grid-template-columns: 1fr; }
  /*.equipo.right { flex-direction: row; text-align: left; }*/
  /*.score-area { justify-content: flex-start; }*/

  .toast {
    bottom: 4rem;
    right: 1.8rem;
    padding: 1rem 2.6rem;
  }

  .standings-row {
    grid-template-columns: 26px 1fr repeat(7, 30px);
    /*padding: .8rem 1.5rem;*/
    gap: .5rem;
    font-size: .8rem;
  }

  .partido-meta { text-align: left; }
  .puntos-ref-grid { grid-template-columns: 1fr 1fr; }
  .reglas-items { grid-template-columns: 1fr; }

  .comodines-grid { grid-template-columns: 1fr; }
  .campeon-card { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.8rem 1.6rem; }
  .campeon-card .select-wrap { width: 100%; }
  .ranking-header { font-size: .68rem; }
  .rk-detail { font-size: .85rem; }
  .rk-detail-tit { font-size: .6rem; }
  .ranking-row {
    grid-template-columns: 26px .88fr 60px 60px 60px 60px;
    padding: .85rem .15rem;
    gap: .4rem;
  }
}
@media (max-width: 480px) {
  .rk-avatar {
    width: 23px;
    height: 23px;
  }
  .rk-pos {
    font-size: .9rem;
  }
  .rk-name {
    font-size: 0.84rem;
  }
  .rk-cant {
    font-size: 0.75rem;
  }
  .part-item {
    font-size: .8rem;
    padding: .15rem 0 .15rem .5rem;
  }
}