/* ============================================
   PICCI PRODE — Rediseño 2026
   ============================================ */
:root {
  --verde-900: #0b3d2e;
  --verde-800: #0f4d3a;
  --verde-700: #14664c;
  --verde-600: #16a34a;
  --verde-500: #22c55e;
  --verde-100: #dcfce7;
  --verde-50:  #f0fdf4;
  --dorado:    #fbbf24;
  --dorado-osc:#b45309;
  --tinta:     #10231b;
  --gris-700:  #3f4f48;
  --gris-500:  #6b7a73;
  --gris-300:  #cdd8d2;
  --gris-100:  #eef2f0;
  --fondo:     #f7faf8;
  --blanco:    #ffffff;
  --rojo:      #dc2626;
  --radio:     14px;
  --sombra:    0 1px 3px rgba(16, 35, 27, .08), 0 4px 16px rgba(16, 35, 27, .06);
  --sombra-alta: 0 8px 30px rgba(16, 35, 27, .14);
}

/* ---------- Modo oscuro ---------- */
html[data-tema="oscuro"] {
  --fondo:     #0c1310;
  --blanco:    #17221d;
  --tinta:     #e9f1ec;
  --gris-700:  #b9c7c0;
  --gris-500:  #8aa097;
  --gris-300:  #374a41;
  --gris-100:  #243329;
  --verde-100: #1b3a28;
  --verde-50:  #152a1f;
  --rojo:      #f87171;
  --sombra:    0 1px 3px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.35);
  --sombra-alta: 0 8px 30px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* acentos que en claro usan verde oscuro sobre fondo claro */
html[data-tema="oscuro"] .chip,
html[data-tema="oscuro"] .pts-fuerte,
html[data-tema="oscuro"] .punto-chip,
html[data-tema="oscuro"] .total-aciertos strong,
html[data-tema="oscuro"] .estado-fecha,
html[data-tema="oscuro"] .pts-fecha,
html[data-tema="oscuro"] .stat--mejor .stat__valor,
html[data-tema="oscuro"] .tabla-puntajes .destacado,
html[data-tema="oscuro"] .nav__menu a:hover { color: #4ade80; }

html[data-tema="oscuro"] .aviso-cierre { color: #fcd34d; }
html[data-tema="oscuro"] .tabla-trofeos .campeon { color: #fbbf24; }
html[data-tema="oscuro"] tr.fila--podio1 .pos { color: #fbbf24; }
html[data-tema="oscuro"] .estado-fecha small { color: var(--gris-700); }

/* chips del comparativo */
html[data-tema="oscuro"] .pron--exacto  { background: #113526; color: #6ee7a8; }
html[data-tema="oscuro"] .pron--goles   { background: #3a2c0f; color: #fcd34d; }
html[data-tema="oscuro"] .pron--partido { background: #16294a; color: #93c5fd; }
html[data-tema="oscuro"] .pron--mal     { background: #3d1d1d; color: #f89b9b; }
html[data-tema="oscuro"] .pron--random  { background: #292050; color: #c4b5fd; outline-color: #7c6cd4; }
html[data-tema="oscuro"] .tendencia--baja { background: #3d1d1d; color: #f87171; }

/* gráfico SVG (Mis Récords) */
html[data-tema="oscuro"] .grafico line[stroke="#cdd8d2"] { stroke: #374a41; }
html[data-tema="oscuro"] .grafico line[stroke="#eef2f0"] { stroke: #243329; }
html[data-tema="oscuro"] .grafico text[fill="#6b7a73"]   { fill: #8aa097; }
html[data-tema="oscuro"] .grafico text[fill="#10231b"]   { fill: #e9f1ec; }
html[data-tema="oscuro"] .grafico text[fill="#b91c1c"]   { fill: #f87171; }

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.contenedor {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, var(--verde-900) 0%, var(--verde-800) 60%, var(--verde-700) 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(11, 61, 46, .35);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.logo__pelota {
  display: block;
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.logo small {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde-500);
}

/* nav desktop */
.nav {
  display: flex;
  gap: .25rem;
  margin-left: auto;
  align-items: center;
}

.nav > a, .nav__grupo > button {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem .9rem;
  border-radius: 10px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  font-size: .95rem;
  transition: background .15s, color .15s;
}

.nav > a:hover, .nav__grupo > button:hover,
.nav > a.activo {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.nav > a.activo { box-shadow: inset 0 -3px 0 var(--verde-500); border-radius: 10px 10px 4px 4px; }

.nav__grupo { position: relative; }

.nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--blanco);
  border-radius: 12px;
  box-shadow: var(--sombra-alta);
  padding: .45rem;
  display: none;
  flex-direction: column;
}

.nav__grupo:hover .nav__menu,
.nav__grupo:focus-within .nav__menu { display: flex; }

/* Puente invisible sobre el hueco de 8px entre el boton y el menu,
   para que el hover no se corte al mover el mouse hacia el desplegable */
.nav__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}

.nav__menu a {
  padding: .6rem .8rem;
  border-radius: 8px;
  color: var(--tinta);
  font-weight: 500;
  font-size: .92rem;
}
.nav__menu a:hover { background: var(--verde-50); color: var(--verde-700); }

.caret { font-size: .6rem; opacity: .7; }

.btn-login {
  margin-left: .75rem;
  padding: .55rem 1.3rem;
  border-radius: 999px;
  background: var(--verde-500);
  color: var(--verde-900);
  font-weight: 700;
  font-size: .95rem;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(34, 197, 94, .4);
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(34,197,94,.5); }

/* botón de tema */
.btn-tema {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-left: .5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
  transition: background .15s, transform .15s;
}
.btn-tema:hover { background: rgba(255,255,255,.24); transform: rotate(15deg); }

/* hamburguesa */
.hamburguesa {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
  align-items: center;
  justify-content: center;
}
.hamburguesa:hover { background: rgba(255,255,255,.12); }

/* nav móvil */
.nav-movil {
  display: none;
  background: var(--verde-900);
  padding: .5rem 1.25rem 1.25rem;
  flex-direction: column;
  gap: .15rem;
  max-height: calc(100vh - 68px);
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav-movil.abierta { display: flex; }
.nav-movil a {
  padding: .8rem 1rem;
  border-radius: 10px;
  color: rgba(255,255,255,.9);
  font-weight: 600;
}
.nav-movil a:hover, .nav-movil a.activo { background: rgba(255,255,255,.12); }
.nav-movil .sub { padding-left: 2.2rem; font-weight: 400; font-size: .93rem; color: rgba(255,255,255,.7); }
.nav-movil__cuenta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .5rem;
  padding: .85rem 1rem .35rem;
  border-top: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.nav-movil__cuenta .avatar {
  width: 34px; height: 34px;
  font-size: .82rem;
  background: linear-gradient(135deg, var(--dorado), var(--dorado-osc));
}
.nav-movil .btn-login { margin: .75rem 1rem 0; text-align: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(34,197,94,.25), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(251,191,36,.12), transparent 60%),
    linear-gradient(160deg, var(--verde-900), var(--verde-800) 70%, var(--verde-700));
  color: #fff;
  padding: 4rem 0 4.5rem;
}

.hero::after { /* líneas de cancha */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 118px, rgba(255,255,255,.05) 119px, rgba(255,255,255,.05) 121px, transparent 122px),
    linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px) 0 50%/100% 100% no-repeat;
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.4);
  color: var(--dorado);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.hero h1 span { color: var(--verde-500); }

.hero p.bajada {
  margin-top: 1rem;
  font-size: 1.15rem;
  color: rgba(255,255,255,.75);
  max-width: 46ch;
}

.hero__acciones { display: flex; gap: .9rem; margin-top: 2rem; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  transition: transform .15s, box-shadow .15s, background .15s;
}

.btn--primario {
  background: var(--verde-500);
  color: var(--verde-900);
  box-shadow: 0 4px 18px rgba(34,197,94,.45);
}
.btn--primario:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,197,94,.55); }

.btn--fantasma {
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
}
.btn--fantasma:hover { background: rgba(255,255,255,.1); }

.hero__stats {
  display: flex;
  gap: 2.2rem;
  margin-top: 2.6rem;
}
.hero__stats div strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--dorado); }
.hero__stats div span { font-size: .85rem; color: rgba(255,255,255,.65); }

/* tarjeta líder en hero */
.tarjeta-lider {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 1.6rem;
  box-shadow: var(--sombra-alta);
}
.tarjeta-lider h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dorado);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.podio { display: flex; flex-direction: column; gap: .55rem; }
.podio__fila {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: rgba(255,255,255,.07);
  border-radius: 12px;
  padding: .7rem .9rem;
}
.podio__fila:first-child { background: linear-gradient(90deg, rgba(251,191,36,.22), rgba(251,191,36,.06)); border: 1px solid rgba(251,191,36,.35); }
.podio__pos {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: .95rem;
  background: rgba(255,255,255,.14);
  flex-shrink: 0;
}
.podio__fila:first-child .podio__pos { background: var(--dorado); color: var(--verde-900); }
.podio__nombre { font-weight: 600; font-size: .98rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio__pts { font-weight: 800; color: var(--verde-500); }
.podio__pts small { font-weight: 500; color: rgba(255,255,255,.55); margin-left: .2rem; }

/* ---------- Secciones ---------- */
.seccion { padding: 3.5rem 0; }
.seccion--alt { background: var(--blanco); }

.seccion__cabecera {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}

.seccion__cabecera h2 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.chip {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--verde-700);
  background: var(--verde-100);
  padding: .3rem .8rem;
  border-radius: 999px;
}

.ver-todo { font-weight: 700; color: var(--verde-600); font-size: .95rem; }
.ver-todo:hover { text-decoration: underline; }

/* ---------- Partidos ---------- */
.grilla-partidos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.1rem;
}

.partido {
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s;
}
.partido:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }

.partido__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .9rem;
}

.partido__estado--final { color: var(--rojo); }
.partido__estado--prox  { color: var(--verde-600); }

.partido__cuerpo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .8rem;
}

.equipo { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.equipo .nombre { font-weight: 700; font-size: .95rem; }

.escudo {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
/* Escudo completo (sin recortar) sobre fondo transparente, con una
   sombra suave que le da relieve. Se adapta al tema. */
.escudo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
html[data-tema="oscuro"] .escudo img { filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }

.marcador {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--tinta);
  background: var(--gris-100);
  border-radius: 12px;
  padding: .35rem .9rem;
  white-space: nowrap;
}
.marcador--pendiente { color: var(--gris-500); font-size: 1.1rem; font-weight: 700; padding: .6rem .9rem; }

.partido__pie {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--gris-300);
  display: flex;
  justify-content: space-between;
  font-size: .83rem;
  color: var(--gris-500);
}
.partido__pie a { color: var(--verde-600); font-weight: 700; }

/* ---------- Novedades: dashboard (2 columnas en desktop) ---------- */
.novedades-dash { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.novedades-dash__lado { display: flex; flex-direction: column; gap: 1rem; }
.filtro-nov { display: flex; align-items: center; gap: .55rem; }
.filtro-nov label { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.filtro-nov select {
  flex: 1; min-width: 0;
  padding: .55rem .9rem;
  border: 1.5px solid var(--gris-300);
  border-radius: 999px;
  font: inherit; font-size: .9rem;
  background: var(--blanco);
}

@media (min-width: 981px) {
  .novedades-dash { grid-template-columns: 300px minmax(0,1fr); align-items: start; }
  .novedades-dash__lado { position: sticky; top: 88px; }

  /* la lista de partidos ocupa toda la columna, sin doble margen */
  .novedades-dash__principal .seccion--alt { background: none; padding: 0; }
  .novedades-dash__principal .seccion--alt .contenedor { width: 100%; margin: 0; padding: 0; }
  .novedades-dash__principal .seccion__cabecera { margin-bottom: 1rem; }

  /* cada partido pasa a una fila compacta (Info al lado del pronostico,
     fecha/estado a la derecha) */
  .novedades-dash__principal .grilla-partidos { grid-template-columns: 1fr; gap: .55rem; }
  .novedades-dash__principal .partido {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto 132px;
    align-items: center;
    gap: 1.1rem;
    padding: .5rem 1.2rem;
  }
  .novedades-dash__principal .partido:hover { transform: none; box-shadow: var(--sombra); }
  .novedades-dash__principal .partido__cuerpo { order: 1; }
  .novedades-dash__principal .partido__pie   { order: 2; }
  .novedades-dash__principal .partido__meta  { order: 3; }
  .novedades-dash__principal .partido__meta {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: .1rem;
    margin: 0;
    font-size: .68rem;
    line-height: 1.35;
  }
  /* Info a la izquierda del pronostico */
  .novedades-dash__principal .partido__pie .info-pop { order: -1; }
  /* "Tu pronostico" con el valor debajo */
  .novedades-dash__principal .tu-pron { display: inline-flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; }
  .novedades-dash__principal .tu-pron__lbl { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-500); }
  .novedades-dash__principal .tu-pron__val { font-weight: 800; font-size: .88rem; color: var(--tinta); }
  .novedades-dash__principal .partido__cuerpo { gap: .7rem; }
  .novedades-dash__principal .equipo { flex-direction: row; gap: .5rem; text-align: left; min-width: 0; }
  .novedades-dash__principal .partido__cuerpo > .equipo:last-child { flex-direction: row-reverse; text-align: right; }
  .novedades-dash__principal .equipo .nombre {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem;
  }
  .novedades-dash__principal .escudo { width: 34px; height: 34px; }
  .novedades-dash__principal .marcador { font-size: 1.15rem; padding: .25rem .7rem; }
  .novedades-dash__principal .marcador--pendiente { font-size: .82rem; padding: .4rem .7rem; }
  .novedades-dash__principal .partido__pie {
    margin: 0; padding: 0; border-top: 0;
    align-items: center; gap: .8rem;
    font-size: .8rem; white-space: nowrap;
  }
}

/* ---------- Comentarios ---------- */
.comentarios { display: flex; flex-direction: column; gap: 1rem; max-width: 780px; }

.comentario {
  display: flex;
  gap: 1rem;
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--sombra);
}

.avatar {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--verde-600), var(--verde-800));
}
.avatar--a { background: linear-gradient(135deg, #f59e0b, #b45309); }
.avatar--b { background: linear-gradient(135deg, #3b82f6, #1e40af); }
.avatar--c { background: linear-gradient(135deg, #ec4899, #9d174d); }

.comentario__cabecera { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.comentario__autor { font-weight: 700; font-size: .98rem; }
.comentario__fecha { font-size: .78rem; color: var(--gris-500); }
.comentario p { margin-top: .25rem; font-size: .95rem; color: var(--gris-700); }

.caja-comentario {
  display: flex;
  gap: .8rem;
  margin-top: 1.4rem;
  max-width: 780px;
}
.caja-comentario input {
  flex: 1;
  padding: .9rem 1.2rem;
  border: 1.5px solid var(--gris-300);
  border-radius: 999px;
  font: inherit;
  background: var(--blanco);
}
.caja-comentario input:focus { outline: 2px solid var(--verde-500); border-color: transparent; }

/* ---------- Tablas ---------- */
.panel-tabla {
  background: var(--blanco);
  border-radius: var(--radio);
  border: 1px solid var(--gris-100);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.panel-tabla__barra {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--gris-100);
  flex-wrap: wrap;
}

.buscador {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}
.buscador input {
  width: 100%;
  padding: .65rem 1rem .65rem 2.6rem;
  border: 1.5px solid var(--gris-300);
  border-radius: 999px;
  font: inherit;
  font-size: .93rem;
}
.buscador input:focus { outline: 2px solid var(--verde-500); border-color: transparent; }
.buscador::before {
  content: '🔍';
  position: absolute;
  left: .95rem;
  top: 50%;
  translate: 0 -50%;
  font-size: .85rem;
  opacity: .55;
}

.pildoras { display: flex; gap: .4rem; flex-wrap: wrap; }
.pildora {
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gris-700);
  background: var(--gris-100);
  transition: background .15s, color .15s;
}
.pildora:hover { background: var(--verde-100); color: var(--verde-700); }
.pildora.activa { background: var(--verde-700); color: #fff; }

.envoltura-tabla { overflow-x: auto; }

table.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 640px;
}

.tabla thead th {
  position: sticky;
  top: 0;
  background: var(--verde-900);
  color: rgba(255,255,255,.9);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .85rem 1rem;
  text-align: left;
  white-space: nowrap;
}
.tabla thead th.num, .tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }

.tabla tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--gris-100); }
.tabla tbody tr:hover { background: var(--verde-50); }
.tabla tbody tr:last-child td { border-bottom: none; }

.tabla .pos {
  font-weight: 800;
  color: var(--gris-500);
  width: 72px;
  white-space: nowrap;
}

tr.fila--podio1 { background: linear-gradient(90deg, rgba(251,191,36,.16), transparent 55%); }
tr.fila--podio1 .pos { color: var(--dorado-osc); }
tr.fila--podio2 .pos { color: #64748b; }
tr.fila--podio3 .pos { color: #b45309; }

.medalla { margin-right: .3rem; }

.participante { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.participante .avatar { width: 34px; height: 34px; font-size: .78rem; }

.pts-fuerte { font-weight: 800; color: var(--verde-700); }
.dif-neg { color: var(--rojo); font-weight: 600; }

.paginacion {
  display: flex;
  gap: .35rem;
  justify-content: center;
  padding: 1.1rem;
}
.paginacion button {
  min-width: 38px; height: 38px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--gris-700);
  display: grid; place-items: center;
}
.paginacion button:hover { background: var(--gris-100); }
.paginacion button.activa { background: var(--verde-700); color: #fff; }
/* Posiciones del Mundial: grilla de grupos A-L */
.grilla-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.1rem;
}
.grilla-grupos .tabla { min-width: 0; font-size: .88rem; }
.grilla-grupos .tabla thead th { padding: .6rem .7rem; }
.grilla-grupos .tabla tbody td { padding: .55rem .7rem; }

/* la paginacion del sitio real navega con links, no botones */
.paginacion a {
  min-width: 38px; height: 38px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--gris-700);
  display: grid; place-items: center;
  padding: 0 .5rem;
}
.paginacion a:hover { background: var(--gris-100); }
.paginacion a.activa { background: var(--verde-700); color: #fff; }

/* ---------- Usuario logueado (header) ---------- */
.usuario-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: .75rem;
  padding: .35rem .9rem .35rem .4rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
}
.usuario-chip .avatar { width: 32px; height: 32px; font-size: .72rem; background: linear-gradient(135deg, var(--dorado), var(--dorado-osc)); }
.usuario-chip .caret { font-size: .55rem; }
.usuario-chip:hover { background: rgba(255,255,255,.18); }

/* ---------- Pronósticos ---------- */
.estado-fecha {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--verde-100);
  border: 1px solid rgba(22,163,74,.4);
  color: var(--verde-700);
  border-radius: var(--radio);
  padding: .9rem 1.3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.estado-fecha small { font-weight: 500; color: var(--gris-700); }

.estado-fecha--error { background: #fee2e2; border-color: rgba(220,38,38,.4); color: var(--rojo); }
html[data-tema="oscuro"] .estado-fecha--error { background: #3d1d1d; color: #f87171; }

.detalle-link { font-size: .78rem; font-weight: 700; color: var(--verde-600); margin-left: .5rem; }
.detalle-link:hover { text-decoration: underline; }

/* Popover "Como se pronosticó" */
.info-pop { position: relative; display: inline-block; }
.info-pop > button {
  padding: .5rem .9rem; border-radius: 999px; font-weight: 700; font-size: .82rem;
  background: var(--gris-100); color: var(--gris-700);
}
.info-pop > button:hover { background: var(--verde-100); color: var(--verde-700); }
.info-pop__panel {
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: 260px;
  background: var(--blanco); border: 1px solid var(--gris-100); border-radius: 14px;
  box-shadow: var(--sombra-alta); padding: 1rem 1.1rem;
}
.info-pop:hover .info-pop__panel, .info-pop:focus-within .info-pop__panel { display: block; }
.info-pop__panel h5 { font-size: .95rem; font-weight: 800; margin-bottom: .6rem; }
.info-pop__tabla { width: 100%; text-align: center; font-size: .85rem; margin-bottom: .5rem; }
.info-pop__tabla th { color: var(--gris-500); font-weight: 700; padding-bottom: .3rem; }
.info-pop__tabla td { font-weight: 700; padding: .2rem 0; }
.info-pop__tabla td.destacan { color: var(--verde-700); background: var(--verde-50); border-radius: 6px; }
.info-pop p { font-size: .82rem; color: var(--gris-700); }

/* fila con resultado y puntaje (fecha cerrada) */
.fila-pronostico.fila-pronostico--cerrada {
  grid-template-columns: 100px 1fr auto 1fr 120px 76px;
}

.pron-fijo {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  font-size: 1.25rem;
}
.pron-fijo span {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--gris-100);
  border-radius: 12px;
}
.pron-fijo .guion { background: none; width: auto; color: var(--gris-500); }

.resultado-real { text-align: center; }
.resultado-real .etiqueta {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-500);
  margin-bottom: .15rem;
}
.resultado-real .valor { font-weight: 800; font-size: 1.15rem; }

.punto-chip {
  justify-self: center;
  min-width: 54px;
  text-align: center;
  padding: .45rem .7rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .95rem;
  background: var(--verde-100);
  color: var(--verde-700);
}
.punto-chip--cero { background: var(--gris-100); color: var(--gris-500); }

.total-aciertos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .8rem;
  margin-top: 1.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.total-aciertos strong {
  font-size: 1.5rem;
  color: var(--verde-700);
  background: var(--verde-100);
  border-radius: 12px;
  padding: .3rem .9rem;
}

/* ---------- Comparativo ---------- */
.barra-comparativo {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.3rem;
}
.barra-comparativo select {
  padding: .6rem 1rem;
  border: 1.5px solid var(--gris-300);
  border-radius: 999px;
  font: inherit;
  font-size: .92rem;
  background: var(--blanco);
}

.leyenda {
  display: flex;
  gap: .5rem 1.1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  font-size: .85rem;
  color: var(--gris-700);
}
.leyenda span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.muestra {
  width: 18px; height: 18px;
  border-radius: 5px;
  display: inline-block;
}

/* celdas de pronóstico */
.celda-pron {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  padding: .35rem .4rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pron--exacto  { background: #d1fae5; color: #065f46; }          /* acertó resultado (4 pts) */
.pron--goles   { background: #fef3c7; color: #92400e; }          /* acertó c/muchos goles (5 pts) */
.pron--partido { background: #dbeafe; color: #1e40af; }          /* acertó L/E/V (2 pts) */
.pron--mal     { background: #fee2e2; color: #b91c1c; opacity: .75; }
.pron--random  { background: #ede9fe; color: #6d28d9; outline: 1.5px dashed #a78bfa; }
.pron--sinjugar{ background: var(--gris-100); color: var(--gris-500); }

.tabla-comp thead .col-partido { text-align: center; }
.col-partido .duelo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-size: .72rem;
}
.col-partido .final {
  display: block;
  margin-top: .2rem;
  font-size: .85rem;
  color: var(--dorado);
}
.tabla-comp td.centro { text-align: center; }
.tabla-comp .participante { white-space: nowrap; }
.tabla-comp .pts-fecha { font-weight: 800; color: var(--verde-700); text-align: right; }
.mini-escudo {
  width: 24px; height: 24px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.mini-escudo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
html[data-tema="oscuro"] .mini-escudo img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }

.aviso-cierre {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: linear-gradient(90deg, rgba(251,191,36,.18), rgba(251,191,36,.05));
  border: 1px solid rgba(251,191,36,.45);
  border-radius: var(--radio);
  padding: 1rem 1.3rem;
  margin-bottom: 1.6rem;
  font-weight: 600;
  color: var(--dorado-osc);
}
.aviso-cierre .reloj { font-size: 1.5rem; }
.aviso-cierre strong { font-variant-numeric: tabular-nums; }

.selector-fecha {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
  scrollbar-width: thin;
}
.selector-fecha button {
  flex-shrink: 0;
  padding: .6rem 1.2rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  background: var(--blanco);
  border: 1.5px solid var(--gris-300);
  color: var(--gris-700);
}
.selector-fecha button.activa {
  background: var(--verde-700);
  border-color: var(--verde-700);
  color: #fff;
  box-shadow: 0 3px 10px rgba(20,102,76,.35);
}
.selector-fecha button:disabled { opacity: .45; cursor: not-allowed; }
.selector-fecha button .estado { display: block; font-size: .68rem; font-weight: 500; opacity: .75; }

.fila-pronostico {
  display: grid;
  grid-template-columns: 110px 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  padding: 1rem 1.4rem;
  margin-bottom: .8rem;
  box-shadow: var(--sombra);
}

.fila-pronostico__fecha {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gris-500);
  text-transform: uppercase;
  line-height: 1.35;
}
.fila-pronostico__fecha strong { display: block; color: var(--tinta); font-size: .92rem; }

.lado {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 700;
  min-width: 0;
}
.lado--visitante { flex-direction: row-reverse; }
.lado .escudo { width: 40px; height: 40px; font-size: .72rem; }
.lado .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* prode.asp (modo usuario) en desktop: fecha/hora/detalle a la derecha */
@media (min-width: 769px) {
  .fila-pronostico { grid-template-columns: 1fr auto 1fr 130px; }
  .fila-pronostico > .lado--local     { order: 1; }
  .fila-pronostico > .cajas-goles     { order: 2; }
  .fila-pronostico > .pron-fijo       { order: 2; }
  .fila-pronostico > .lado--visitante { order: 3; }
  .fila-pronostico > .fila-pronostico__fecha { order: 9; text-align: right; }

  /* fecha arriba, hora debajo, detalle debajo; todo a la derecha */
  .fila-pronostico__fecha strong { display: block; }
  .fila-pronostico__fecha .detalle-link { display: block; margin-left: 0; }

  /* fecha ya jugada: Info a la izquierda del pronostico (como en prode_small) */
  .fila-pronostico.fila-pronostico--cerrada { grid-template-columns: 1fr auto 1fr auto auto auto 130px; }
  .fila-pronostico--cerrada > .info-pop       { order: 4; }
  .fila-pronostico--cerrada > .resultado-real { order: 5; }
  .fila-pronostico--cerrada > .punto-chip     { order: 6; }
}

.cajas-goles {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.cajas-goles input {
  width: 54px;
  height: 54px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  font-family: inherit;
  border: 2px solid var(--gris-300);
  border-radius: 12px;
  color: var(--tinta);
  background: var(--fondo);
  -moz-appearance: textfield;
}
.cajas-goles input::-webkit-outer-spin-button,
.cajas-goles input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cajas-goles input:focus { outline: none; border-color: var(--verde-500); background: var(--verde-50); }
.cajas-goles .guion { font-weight: 800; color: var(--gris-500); }

/* combos de goles (0-10): mismo look que las cajas */
.cajas-goles select {
  width: 64px;
  height: 54px;
  text-align: center;
  text-align-last: center;
  font-size: 1.25rem;
  font-weight: 800;
  font-family: inherit;
  border: 2px solid var(--gris-300);
  border-radius: 12px;
  color: var(--tinta);
  background: var(--fondo);
  cursor: pointer;
}
.cajas-goles select:focus { outline: none; border-color: var(--verde-500); background: var(--verde-50); }

.barra-guardar {
  position: sticky;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--verde-900);
  color: #fff;
  border-radius: 999px;
  padding: .8rem .9rem .8rem 1.6rem;
  box-shadow: var(--sombra-alta);
  margin-top: 1.5rem;
}
.barra-guardar span { font-weight: 600; font-size: .95rem; }
.barra-guardar span em { font-style: normal; color: var(--verde-500); font-weight: 800; }

/* ---------- Reglamento ---------- */
.grilla-reglas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
}

.regla {
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  padding: 1.4rem;
  box-shadow: var(--sombra);
}
.regla__icono {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  background: var(--verde-100);
  margin-bottom: .9rem;
}
.regla h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .4rem; }
.regla p { font-size: .93rem; color: var(--gris-700); }

.tabla-puntajes-envoltura { overflow-x: auto; margin-top: 2.5rem; }
.tabla-puntajes {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.tabla-puntajes th {
  background: var(--verde-900);
  color: #fff;
  padding: .9rem 1.1rem;
  text-align: left;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.tabla-puntajes td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--gris-100); font-size: .93rem; }
.tabla-puntajes td:first-child { font-weight: 700; }
.tabla-puntajes .destacado { color: var(--verde-700); font-weight: 800; }

/* ---------- Administrador: cargar resultados ---------- */
.chip-admin {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.5);
  color: var(--dorado);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 999px;
}

.fila-admin {
  display: grid;
  grid-template-columns: 1fr auto 1fr 58px 148px;
  align-items: center;
  gap: 1.1rem;
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  padding: 1rem 1.4rem;
  margin-bottom: .8rem;
  box-shadow: var(--sombra);
}

.campo-mini { display: flex; flex-direction: column; gap: .3rem; }
.campo-mini > span {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-500);
}
.campo-mini select, .campo-mini input {
  width: 100%;
  min-width: 0;
  padding: .55rem .4rem;
  border: 1.5px solid var(--gris-300);
  border-radius: 10px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  background: var(--fondo);
}
.campo-mini--horario input { font-size: .85rem; }
.campo-mini select:focus, .campo-mini input:focus {
  outline: none;
  border-color: var(--verde-500);
  background: var(--verde-50);
}

.barra-guardar .campo-cierre {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  font-weight: 600;
}
.barra-guardar .campo-cierre input {
  width: 20ch;
  padding: .5rem .7rem;
  border: none;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  background: rgba(255,255,255,.14);
  color: #fff;
  color-scheme: dark;
}

@media (max-width: 900px) {
  .fila-admin {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "local goles visitante"
      "orden horario horario";
    row-gap: .9rem;
  }
  .fila-admin .lado--local { grid-area: local; flex-direction: column; text-align: center; }
  .fila-admin .lado--visitante { grid-area: visitante; flex-direction: column; text-align: center; }
  .fila-admin .lado { justify-content: center; min-width: 0; }
  .fila-admin .lado .nombre {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
    font-size: .9rem;
  }
  .fila-admin .cajas-goles { grid-area: goles; }
  .fila-admin .campo-mini--orden { grid-area: orden; }
  .fila-admin .campo-mini--horario { grid-area: horario; }
  .barra-guardar .campo-cierre { flex-wrap: wrap; justify-content: center; }
}

/* ---------- Tendencia (Tabla x Fecha) ---------- */
.tendencia {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
}
.tendencia--sube  { background: var(--verde-100); color: var(--verde-700); }
.tendencia--baja  { background: #fee2e2; color: #b91c1c; }
.tendencia--igual { background: var(--gris-100); color: var(--gris-500); }

/* ---------- Mis Récords ---------- */
.perfil-cabecera {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.perfil-cabecera .avatar--xl {
  width: 74px; height: 74px;
  font-size: 1.6rem;
  border: 3px solid rgba(255,255,255,.35);
}
.perfil-cabecera .datos p { margin-top: .15rem; }

.grilla-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 860px) {
  .grilla-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .grilla-stats { grid-template-columns: 1fr; }
}
.stat {
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--sombra);
}
.stat__label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-500);
  margin-bottom: .35rem;
}
.stat__valor { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.stat__valor small { font-size: .95rem; font-weight: 600; color: var(--gris-500); margin-left: .25rem; }
.stat--mejor .stat__valor { color: var(--verde-700); }
.stat--peor .stat__valor { color: var(--rojo); }

.tabla-trofeos td:first-child { width: 54px; text-align: center; font-size: 1.3rem; }
.tabla-trofeos .torneo { font-weight: 700; }
.tabla-trofeos .campeon { color: var(--dorado-osc); font-weight: 800; }
.tabla-trofeos .subcampeon { color: var(--gris-500); font-weight: 700; }

/* Puntajes en Campeones del Prode */
.pts-torneo {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gris-500);
  background: var(--gris-100);
  border-radius: 999px;
  padding: .08rem .5rem;
  margin-left: .25rem;
}
.pts-torneo--oro { color: var(--dorado-osc); background: rgba(251,191,36,.16); }
html[data-tema="oscuro"] .pts-torneo--oro { color: #fbbf24; }

.grafico {
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.4rem;
}
.grafico__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.grafico__barra h3 { font-size: 1.05rem; font-weight: 800; }
.grafico__barra select {
  padding: .5rem .9rem;
  border: 1.5px solid var(--gris-300);
  border-radius: 999px;
  font: inherit;
  font-size: .88rem;
  background: var(--blanco);
}
.grafico svg { width: 100%; height: auto; display: block; }

/* ---------- Login / Registro ---------- */
.auth {
  min-height: calc(100vh - 380px);
  display: grid;
  place-items: center;
  padding: 3.5rem 1.25rem;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(34,197,94,.12), transparent 60%),
    var(--fondo);
}
.tarjeta-auth {
  width: min(460px, 100%);
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: 22px;
  box-shadow: var(--sombra-alta);
  padding: 2.4rem 2.2rem;
}
.tarjeta-auth--ancha { width: min(560px, 100%); }
.tarjeta-auth h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.tarjeta-auth .subtitulo { color: var(--gris-500); font-size: .95rem; margin: .35rem 0 1.6rem; }

.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.campo input, .campo select {
  width: 100%;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--gris-300);
  border-radius: 12px;
  font: inherit;
  font-size: .97rem;
  background: var(--fondo);
}
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--verde-500);
  background: var(--verde-50);
}
.campo .ayuda { display: block; font-size: .78rem; color: var(--gris-500); margin-top: .3rem; }

.campos-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.fila-opciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .2rem 0 1.3rem;
  font-size: .88rem;
}
.fila-opciones label { display: flex; align-items: center; gap: .45rem; font-weight: 600; cursor: pointer; }
.fila-opciones input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--verde-600); }
.fila-opciones a { color: var(--verde-600); font-weight: 700; }
.fila-opciones a:hover { text-decoration: underline; }

.btn--bloque { width: 100%; justify-content: center; font-size: 1.05rem; }

.auth-pie {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px dashed var(--gris-300);
  font-size: .92rem;
  color: var(--gris-700);
}
.auth-pie a { color: var(--verde-600); font-weight: 800; }
.auth-pie a:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .campos-dobles { grid-template-columns: 1fr; gap: 0; }
  .tarjeta-auth { padding: 1.8rem 1.4rem; }
}

/* ---------- CTA final ---------- */
.cta-final {
  background: linear-gradient(135deg, var(--verde-800), var(--verde-600));
  border-radius: 22px;
  color: #fff;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--sombra-alta);
}
.cta-final h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.cta-final p { margin: .6rem auto 1.6rem; color: rgba(255,255,255,.8); max-width: 52ch; }

/* ---------- Footer ---------- */
.footer {
  background: var(--verde-900);
  color: rgba(255,255,255,.7);
  padding: 2.8rem 0 2rem;
  margin-top: 3.5rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .8rem; }
.footer a { display: block; padding: .22rem 0; font-size: .92rem; }
.footer a:hover { color: var(--verde-500); }
.footer__marca { font-weight: 800; font-size: 1.2rem; color: #fff; display: flex; align-items: center; gap: .5rem; }
.footer__marca + p { font-size: .9rem; margin-top: .6rem; max-width: 34ch; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.4rem;
  font-size: .84rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
}
.footer__legal span:first-child { white-space: nowrap; }
.footer__legal a { display: inline; }
@media (max-width: 420px) { .footer__legal span:first-child { white-space: normal; } }

/* ---------- Título de página interna ---------- */
.cabecera-pagina {
  background: linear-gradient(150deg, var(--verde-900), var(--verde-700));
  color: #fff;
  padding: 2.6rem 0;
}
.cabecera-pagina .miga { font-size: .82rem; color: rgba(255,255,255,.6); font-weight: 600; margin-bottom: .4rem; }
.cabecera-pagina .miga a:hover { color: #fff; }
.cabecera-pagina h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; }
.cabecera-pagina p { margin-top: .4rem; color: rgba(255,255,255,.75); max-width: 60ch; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1240px) {
  .usuario-chip__nombre { display: none; }
  .nav > a, .nav__grupo > button { padding: .55rem .65rem; font-size: .9rem; }
}

@media (max-width: 1020px) {
  .nav, .header .btn-login { display: none; }
  .hamburguesa { display: flex; margin-left: 0; }
  .btn-tema { margin-left: auto; }
}

@media (max-width: 768px) {

  .hero { padding: 2.8rem 0 3.2rem; }
  .hero__stats { gap: 1.4rem; flex-wrap: wrap; }

  .fila-pronostico {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "fecha fecha fecha"
      "local goles visitante";
    row-gap: .8rem;
    padding: 1rem;
  }
  .fila-pronostico__fecha { grid-area: fecha; display: flex; gap: .6rem; align-items: baseline; }
  .lado--local { grid-area: local; flex-direction: column; text-align: center; }
  .lado--visitante { grid-area: visitante; flex-direction: column; text-align: center; }
  .fila-pronostico .lado { min-width: 0; justify-content: center; }
  .fila-pronostico .lado .nombre {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
    font-size: .88rem;
  }
  .cajas-goles { grid-area: goles; gap: .3rem; }
  .cajas-goles input { width: 48px; height: 48px; }
  .cajas-goles select { width: 52px; height: 48px; }

  .fila-pronostico.fila-pronostico--cerrada {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "fecha fecha fecha"
      "local goles visitante"
      "resultado resultado puntaje";
  }
  .fila-pronostico--cerrada .resultado-real { grid-area: resultado; text-align: left; display: flex; align-items: center; gap: .6rem; }
  .fila-pronostico--cerrada .resultado-real .etiqueta { margin-bottom: 0; }
  .fila-pronostico--cerrada .punto-chip { grid-area: puntaje; justify-self: end; }
  .fila-pronostico--cerrada .pron-fijo { grid-area: goles; justify-self: center; }
  .pron-fijo span { width: 42px; height: 42px; font-size: 1.1rem; }

  .barra-guardar { flex-direction: column; border-radius: 18px; padding: 1rem; text-align: center; }
  .barra-guardar .btn { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
  .grilla-partidos { grid-template-columns: 1fr; }
}