/* MPI La Herradura — sitio nuevo
   Azules del logotipo (marino + azul medio) + tarjeta de score (blanco) + dorado del sol del logo para el campeón.
   Los colores de grupo son la seña del torneo: aparecen como banderín en cada tabla. */

:root {
  --pizarron: #073B63;
  --pizarron-2: #0B4C7E;
  --papel: #F9FBFD;
  --papel-2: #EAF0F6;
  --tinta: #13202C;
  --grafito: #526273;
  --linea: #D2DCE6;
  --banderin: #F2C230;
  --enlace: #0068A6;
  --pierde: #8593A2;
  --radio: 6px;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --txt: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.55 var(--txt);
}
a { color: var(--enlace); text-underline-offset: 2px; }
a:hover { color: var(--pizarron); }
:focus-visible { outline: 3px solid var(--banderin); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--cond); font-weight: 700; line-height: 1.05; letter-spacing: .005em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
h2 { font-size: 1.6rem; }
.num { font-family: var(--cond); font-variant-numeric: tabular-nums; font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--banderin); color: var(--tinta); padding: 8px 12px; z-index: 10; }
.saltar:focus { left: 8px; }

.envoltura { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.bloque { margin: 40px 0; }
.nota { color: var(--grafito); font-size: .95rem; max-width: 70ch; }
.vacio { padding: 24px; background: var(--papel-2); border-radius: var(--radio); }
.mas { font-weight: 600; }

/* ---------- Barra superior ---------- */
.barra { background: var(--pizarron); color: #fff; position: sticky; top: -56px; z-index: 5; }
.barra-in { min-height: 56px; }
.barra-in { max-width: 1140px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex-shrink: 0; margin-right: auto; }
.marca img { width: 34px; height: 40px; object-fit: contain; }
.marca-txt { font-family: var(--cond); font-size: 1.3rem; font-weight: 500; }
.marca-txt b { font-weight: 700; }
.marca:hover { color: var(--banderin); }
.acciones { display: flex; align-items: center; gap: 14px; }
.btn-reg { padding: 8px 14px; font-size: .95rem; }
.yo { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 500; }
.yo-link { color: #D3E3F2; font-size: .95rem; }
.yo-link:hover, .yo:hover { color: #fff; }
.barra-nav { background: var(--pizarron-2); }
.nav { max-width: 1140px; margin: 0 auto; padding: 0 8px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: #D3E3F2; text-decoration: none; padding: 11px 10px 9px; font-weight: 500; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav a:hover { color: #fff; }
.nav a[aria-current] { color: #fff; border-bottom-color: var(--banderin); }
@media (max-width: 560px) {
  .marca-txt { display: none; }
  .yo span { display: none; }
  .acciones { gap: 10px; }
}

/* ---------- Inicio ---------- */
.hero { background: var(--pizarron); color: #fff; }
.hero-in { max-width: 1140px; margin: 0 auto; padding: 48px 16px 56px; display: flex; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 600; margin-bottom: .3em; }
.hero-nombre { display: block; font-weight: 700; color: var(--banderin); font-size: 1.18em; line-height: .95; }
.hero-ctx { margin: 0 0 12px; color: #AFC8E0; font-weight: 500; }
.hero-sub { font-size: 1.15rem; max-width: 46ch; color: #E3EDF7; }
.hero-sub a { color: #fff; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-foto { flex-shrink: 0; position: relative; }
.hero-campeon .hero-foto::after { /* banderín del campeón */
  content: ""; position: absolute; right: -14px; top: -10px; width: 34px; height: 46px;
  background: linear-gradient(var(--banderin), var(--banderin)) left top / 34px 24px no-repeat,
              linear-gradient(#fff, #fff) left top / 3px 46px no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 24px, 0 24px, 0 0, 3px 0, 3px 100%, 0 100%);
}
.btn { display: inline-block; background: var(--banderin); color: var(--tinta); font-weight: 600; text-decoration: none; padding: 12px 20px; border-radius: var(--radio); border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { background: #FFD45A; color: var(--tinta); }
.btn-sec { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff6; }
.btn-sec:hover { background: #ffffff1a; color: #fff; }
@media (max-width: 640px) {
  .hero-in { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 16px 40px; }
  .hero .avatar-xl { width: 96px; height: 96px; font-size: 2rem; border-width: 3px; }
  .hero-campeon .hero-foto::after { transform: scale(.75); right: -10px; top: -12px; }
}

.buscar { margin-top: -28px; position: relative; }
.buscar-form { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; box-shadow: 0 10px 30px -18px #073B6380; }
.buscar-form label { display: block; font-family: var(--cond); font-weight: 700; font-size: 1.4rem; margin-bottom: 8px; }
.buscar-campo { display: flex; gap: 8px; flex-wrap: wrap; }
.buscar-campo input { flex: 1 1 220px; font: inherit; padding: 11px 14px; border: 2px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.buscar-campo input:focus { border-color: var(--pizarron); outline: none; }
.buscar-error { color: #A3271D; margin: 10px 0 0; }

.lideres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 20px; }
.lideres li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.lideres a { flex: 1; font-weight: 600; text-decoration: none; color: var(--tinta); }
.lideres a:hover { text-decoration: underline; }

.dos-col { display: grid; grid-template-columns: 1fr; gap: 0 48px; }
.tres-col { display: grid; grid-template-columns: 1fr; gap: 0 40px; }
@media (min-width: 900px) {
  .dos-col { grid-template-columns: 1.4fr 1fr; }
  .tres-col { grid-template-columns: repeat(3, 1fr); }
}

.palmares { list-style: none; margin: 0 0 12px; padding: 0; }
.palmares li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.palmares-anio { font-size: 1.3rem; min-width: 3.2ch; color: var(--grafito); }
.palmares a { font-weight: 600; color: var(--tinta); text-decoration: none; }
.palmares a:hover { text-decoration: underline; }

/* ---------- Avatares ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; background: var(--papel-2); color: var(--pizarron); font-family: var(--cond); font-weight: 700; flex-shrink: 0; vertical-align: middle; }
.avatar-xs { width: 28px; height: 28px; font-size: .8rem; }
.avatar-sm { width: 36px; height: 36px; font-size: .95rem; }
.avatar-md { width: 52px; height: 52px; font-size: 1.2rem; }
.avatar-xl { width: 168px; height: 168px; font-size: 3.4rem; border: 4px solid #fff; }
.avatar-ini { background: #DCE7F2; position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .avatar-ini { background: var(--pizarron-2); color: #fff; }

/* ---------- Banderín y chips de grupo ---------- */
.banderin {
  display: inline-flex; align-items: center; padding-left: 8px; width: 38px; height: 28px; flex-shrink: 0;
  background: var(--g, #7C8389); color: #fff; font-family: var(--cond); font-weight: 700; font-size: 1.05rem;
  clip-path: polygon(0 0, 100% 50%, 0 100%); text-shadow: 0 1px 1px #0005;
}
.chip-g { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--grafito); white-space: nowrap; }
.chip-g i { width: 12px; height: 12px; border-radius: 50%; background: var(--g); box-shadow: inset 0 0 0 1px #0002; }

/* ---------- Encabezado de página ---------- */
.titulo-pag { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-top: 32px; }
.titulo-pag h1 { margin: 0; }
.titulo-t { display: block; font-size: .5em; font-weight: 500; color: var(--grafito); margin-top: 4px; }
.selector { display: flex; align-items: center; gap: 8px; }
.selector label { color: var(--grafito); font-size: .95rem; }
.selector select { font: inherit; font-weight: 600; padding: 9px 12px; border: 2px solid var(--linea); border-radius: var(--radio); background: #fff; max-width: 70vw; }

/* ---------- Grupos ---------- */
.grupos { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 24px 0 48px; }
@media (min-width: 900px) { .grupos { grid-template-columns: 1fr 1fr; gap: 32px 40px; } }
.grupo { border-top: 4px solid var(--g); background: #fff; border-radius: 0 0 var(--radio) var(--radio); box-shadow: 0 0 0 1px var(--linea); }
.grupo-cab { display: flex; align-items: center; gap: 12px; padding: 12px 14px 6px 0; }
.grupo-cab .banderin { width: 44px; height: 32px; font-size: 1.2rem; }
.grupo-cab h2 { margin: 0; font-size: 1.5rem; flex: 1; }
.grupo-cab h2 span { font-weight: 500; color: var(--grafito); }
.grupo-avance { color: var(--grafito); font-size: .85rem; }

.tabla { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tabla th { font-weight: 600; color: var(--grafito); font-size: .85rem; text-align: center; padding: 6px 4px; border-bottom: 1px solid var(--linea); }
.tabla abbr { text-decoration: none; }
.tabla td { text-align: center; padding: 7px 4px; border-bottom: 1px solid var(--papel-2); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .c-jug { text-align: left; }
.tabla .c-pos { width: 2.4em; color: var(--grafito); }
.tabla td.c-pts { font-size: 1.15rem; font-weight: 700; }
.tabla .c-jug a { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.tabla .c-jug a:hover span { text-decoration: underline; }
.grupo .tabla tr.pasa .c-pos { box-shadow: inset 4px 0 0 var(--g); color: var(--tinta); font-weight: 700; }
.marca-pasa { display: inline-block; width: 4px; height: 1em; background: var(--pizarron); vertical-align: -2px; margin: 0 2px; }
.castigo { display: inline-block; margin-left: 6px; font-size: .78rem; font-weight: 600; color: #A3271D; background: #FBE7E4; border-radius: 4px; padding: 0 5px; vertical-align: 1px; }
.grupo-res { border-top: 1px solid var(--linea); padding: 0 14px; }
.grupo-res summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--enlace); }
@media (max-width: 420px) {
  .tabla th:nth-child(4), .tabla td:nth-child(4), .tabla th:nth-child(5), .tabla td:nth-child(5) { display: none; }
}

/* ---------- Lista de matches ---------- */
.matches { list-style: none; margin: 0 0 12px; padding: 0; }
.match { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.match-jug { flex: 1 1 280px; }
.match-jug a { text-decoration: none; }
.match-jug a:hover { text-decoration: underline; }
.match .gana { color: var(--tinta); font-weight: 600; }
.match .pierde { color: var(--grafito); }
.match .vs { color: var(--pierde); font-size: .92rem; margin: 0 4px; }
.match-meta { display: flex; align-items: center; gap: 12px; color: var(--grafito); font-size: .9rem; }
.match-meta .dif { color: var(--tinta); font-weight: 500; }
.match-meta time { min-width: 6.5em; text-align: right; }
.matches-compacto .match { padding: 7px 0; }
.mes { font-size: 1.3rem; color: var(--grafito); border-bottom: 2px solid var(--tinta); padding-bottom: 6px; margin-bottom: 0; }

.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 4px; }
.filtros a { text-decoration: none; color: var(--tinta); padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); background: #fff; font-weight: 500; font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; }
.filtros a:hover { box-shadow: inset 0 0 0 1px var(--pizarron); }
.filtros a[aria-current] { background: var(--pizarron); color: #fff; box-shadow: none; }
.filtro-g i { width: 10px; height: 10px; border-radius: 50%; background: var(--g); }

/* ---------- Llave ---------- */
.llave-scroll { overflow-x: auto; padding: 8px 0 24px; scroll-snap-type: x proximity; }
.llave { display: grid; grid-template-columns: repeat(var(--rondas), minmax(210px, 1fr)); gap: 0 28px; min-width: calc(var(--rondas) * 238px); max-width: 1440px; margin: 0 auto; padding: 0 16px; }
.ronda { display: flex; flex-direction: column; scroll-snap-align: start; }
.ronda h2 { font-size: 1.15rem; color: var(--grafito); font-weight: 600; border-bottom: 2px solid var(--tinta); padding-bottom: 6px; position: sticky; left: 0; }
.ronda-matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 10px; }
.caja { background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea); padding: 6px 10px 4px; position: relative; font-size: .93rem; }
.ronda:not(:last-child):not(.ronda-tercer) .caja::after { content: ""; position: absolute; right: -15px; top: 50%; width: 14px; border-top: 2px solid var(--linea); }
.caja-j { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.caja-j a { color: var(--grafito); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caja-j a:hover { text-decoration: underline; }
.caja-j.gana a { color: var(--tinta); font-weight: 600; }
.caja-j b { color: var(--pizarron); }
.caja time { display: block; color: var(--pierde); font-size: .78rem; }
.caja-vacia { color: var(--pierde); text-align: center; padding: 18px 10px; background: var(--papel-2); box-shadow: none; border: 1px dashed var(--linea); }
.caja-final { background: var(--pizarron); box-shadow: none; padding: 12px 14px 8px; }
.caja-final .caja-j a { color: #C3D5E8; }
.caja-final .caja-j.gana a { color: var(--banderin); font-size: 1.15rem; }
.caja-final .caja-j b { color: #fff; }
.caja-final time { color: #9DB8D3; }
.tercer .caja { max-width: 320px; }

/* ---------- Jugadores ---------- */
.filtro-txt { display: block; margin: 20px 0; max-width: 420px; }
.filtro-txt span { display: block; font-size: .9rem; color: var(--grafito); margin-bottom: 4px; }
.filtro-txt input { width: 100%; font: inherit; padding: 10px 14px; border: 2px solid var(--linea); border-radius: var(--radio); background: #fff; }
.jugadores { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }
.jugadores a { display: grid; grid-template-columns: 52px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--tinta); }
.jugadores .avatar { grid-row: 1 / 3; }
.jug-nombre { font-weight: 600; align-self: end; }
.jug-dato { grid-column: 2; color: var(--grafito); font-size: .88rem; align-self: start; }
.jug-titulos { grid-column: 3; grid-row: 1 / 3; display: flex; gap: 3px; }
.jug-titulos i { width: 10px; height: 14px; background: var(--banderin); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.jugadores a:hover .jug-nombre { text-decoration: underline; }

/* ---------- Perfil ---------- */
.perfil { display: flex; align-items: center; gap: 28px; padding: 36px 0 8px; flex-wrap: wrap; }
.perfil .avatar-xl { border-color: var(--papel-2); width: 140px; height: 140px; }
.perfil h1 { margin: 0 0 4px; }
.perfil-hdcp { margin: 0 0 10px; color: var(--grafito); }
.logros { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.logros li { padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.logro-oro { background: var(--banderin); color: var(--tinta); }
.logro-plata { background: #E3E7E4; }
.logro-bronce { background: #F0DCC6; }
.marcador { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0; background: var(--pizarron); color: #fff; border-radius: var(--radio); overflow: hidden; }
.marcador div { padding: 14px 16px; border-left: 1px solid #ffffff1f; }
.marcador div:first-child { border-left: 0; }
.marcador dt { color: #AFC8E0; font-size: .9rem; }
.marcador dd { margin: 0; font-size: 2.2rem; line-height: 1.1; }
@media (max-width: 520px) {
  .marcador { grid-template-columns: repeat(2, 1fr); }
  .marcador div:nth-child(3) { border-left: 0; }
  .marcador div:nth-child(n+3) { border-top: 1px solid #ffffff1f; }
}
.actual { border-left: 4px solid var(--g); padding: 4px 0 4px 16px; }
.actual h2 { margin-bottom: .3em; }
.tabla-hist td:first-child, .tabla-hist th:first-child, .tabla-hist td:last-child, .tabla-hist th:last-child { text-align: left; }
.tabla-hist td:first-child a { font-family: var(--cond); font-weight: 600; font-size: 1.1rem; }
.fila-campeon td { background: #FDF3D1; }
.h2h { list-style: none; margin: 0; padding: 0; }
.h2h li { display: grid; grid-template-columns: 1fr 90px 3.5em; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--papel-2); }
.h2h a { color: var(--tinta); text-decoration: none; }
.h2h a:hover { text-decoration: underline; }
.h2h-barra { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--papel-2); }
.h2h-barra i { background: var(--pizarron); }
.h2h-barra s { background: #C6D3E0; }
.h2h-rec { text-align: right; }
details summary { cursor: pointer; font-weight: 600; color: var(--enlace); padding: 8px 0; }

/* ---------- Historia ---------- */
.campeones { list-style: none; margin: 16px 0 24px; padding: 0; }
.temporada { padding: 18px 0 20px; border-top: 1px solid var(--linea); }
.temporada:first-child { border-top: 2px solid var(--tinta); }
.temp-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.camp-anio { font-size: 1.9rem; color: var(--pizarron); margin: 0; }
.camp-ver { font-size: .92rem; font-weight: 600; }
.temp-podio { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 10px; }
.temp-l { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; align-content: center;
  padding: 12px; border-radius: var(--radio); background: #fff; box-shadow: 0 0 0 1px var(--linea); text-decoration: none; color: var(--tinta); border-left: 4px solid var(--linea); }
.temp-l .avatar { grid-row: 1 / 4; }
.temp-lugar { font-size: .82rem; font-weight: 600; color: var(--grafito); align-self: end; }
.temp-nombre { font-family: var(--cond); font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.temp-nota { font-size: .85rem; color: #C3D5E8; align-self: start; }
a.temp-l:hover .temp-nombre { text-decoration: underline; }
.temp-campeon { background: var(--pizarron); color: #fff; box-shadow: none; border-left-color: var(--banderin); }
.temp-campeon .temp-lugar { color: var(--banderin); }
.temp-campeon .temp-nombre { font-size: 1.5rem; }
.temp-campeon .avatar-ini { background: var(--pizarron-2); color: #fff; }
.temp-2 { border-left-color: #AEB8C2; }
.temp-3 { border-left-color: #C58B4E; }
.temp-vacio { color: var(--pierde); }
.avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; }
@media (max-width: 900px) {
  .temp-podio { grid-template-columns: repeat(3, 1fr); }
  .temp-campeon { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .temp-podio { gap: 8px; }
  .temp-l { grid-template-columns: 1fr; justify-items: start; row-gap: 4px; padding: 10px; }
  .temp-l .avatar-md { width: 44px; height: 44px; }
  .temp-nombre { font-size: 1.05rem; }
  .temp-l .avatar { grid-row: auto; }
  .temp-campeon { grid-template-columns: auto 1fr; }
  .temp-campeon .avatar { grid-row: 1 / 4; }
}
.ranking { margin: 0; padding: 0 0 0 1.8em; }
.ranking li { padding: 6px 0; border-bottom: 1px solid var(--papel-2); }
.ranking li::marker { font-family: var(--cond); color: var(--grafito); }
.ranking li a { color: var(--tinta); text-decoration: none; }
.ranking li a:hover { text-decoration: underline; }
.ranking li .num { float: right; }

/* ---------- Pie ---------- */
.pie { background: var(--pizarron); color: #C3D5E8; margin-top: 64px; font-size: .93rem; }
.pie-in { max-width: 1140px; margin: 0 auto; padding: 28px 16px; }
.pie a { color: #fff; margin-right: 16px; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .barra, .pie, .selector, .filtros, .buscar { display: none; } body { background: #fff; } }

/* ---------- Formularios y avisos ---------- */
.angosta { max-width: 720px; }
.angosta h1 { padding-top: 32px; }
.aviso { border-radius: var(--radio); padding: 14px 16px; margin: 16px 0; }
.aviso h2 { margin-bottom: .3em; }
.aviso-ok { background: #E4F1E8; border-left: 4px solid #1F8A3B; }
.aviso-error { background: #FBE7E4; border-left: 4px solid #A3271D; color: #6E1A13; }
.forma { display: grid; gap: 18px; margin: 20px 0 8px; }
.forma label { display: grid; gap: 6px; font-weight: 600; }
.forma input[type=email], .forma input[type=password], .forma input[type=date], .forma input[type=datetime-local], .forma select {
  font: inherit; font-weight: 400; padding: 11px 12px; border: 2px solid var(--linea); border-radius: var(--radio); background: #fff; width: 100%; max-width: 420px;
}
.forma input:focus, .forma select:focus { border-color: var(--pizarron); outline: none; }
.forma .btn { justify-self: start; }
.forma-linea { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.forma-linea input { width: auto; }
.forma-ctx { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.opciones-num { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.opcion { position: relative; display: block !important; }
.opcion input { position: absolute; opacity: 0; }
.opcion span { display: block; padding: 12px 14px; border: 2px solid var(--linea); border-radius: var(--radio); background: #fff; font-weight: 500; cursor: pointer; }
.opciones-num .opcion span { text-align: center; font-size: 1.25rem; padding: 10px 0; }
.opcion input:checked + span { border-color: var(--pizarron); background: var(--pizarron); color: #fff; }
.opcion input:focus-visible + span { outline: 3px solid var(--banderin); outline-offset: 2px; }
.btn-wa { background: #25D366; color: #08290F; }
.btn-wa:hover { background: #3BE07A; color: #08290F; }
.btn-claro { background: #fff; color: var(--pizarron); box-shadow: inset 0 0 0 2px var(--pizarron); }
.btn-claro:hover { background: var(--papel-2); color: var(--pizarron); }
.soy-yo td { background: #FFF8DC; }
.nada { color: var(--pierde); }

/* ---------- Quiniela ---------- */
.q-grupo { padding: 0 14px 14px; }
.q-grupo legend.grupo-cab { display: flex; padding: 12px 0 8px; margin: 0; width: 100%; }
.q-tit { font-family: var(--cond); font-weight: 700; font-size: 1.4rem; }
.q-tit span { font-weight: 500; color: var(--grafito); }
.q-pos { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.q-pos .num { width: 2em; font-size: 1.2rem; color: var(--grafito); }
.q-pos select { flex: 1; font: inherit; padding: 9px 10px; border: 2px solid var(--linea); border-radius: var(--radio); background: #fff; min-width: 0; }
.q-pos select:focus { border-color: var(--g); outline: none; }
.sin-liga { display: inline-flex; align-items: center; gap: 8px; }
.q-detalle { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.q-detalle > li { display: flex; gap: 10px; align-items: flex-start; }
.q-detalle ol { list-style: none; margin: 0; padding: 0; flex: 1; }
.q-detalle ol li { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--papel-2); }
.q-detalle ol li b { margin-left: auto; }
.q-ok b { color: #1F8A3B; }
.q-medio b { color: #B07A00; }
.q-no { color: var(--grafito); }
.q-no b { color: var(--pierde); }

/* ---------- Ranking ---------- */
.tabla-rk { margin: 20px 0 48px; background: #fff; box-shadow: 0 0 0 1px var(--linea); border-radius: var(--radio); }
.tabla-rk .c-t { color: var(--grafito); }
.pts-pop { position: relative; display: inline-block; }
.pts-btn { font: inherit; font-family: var(--cond); font-weight: 700; font-size: 1.2rem; background: none; border: 0; border-bottom: 2px dotted var(--enlace); color: var(--tinta); padding: 0 4px; cursor: help; }
.pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 4; width: 300px; text-align: left; background: var(--pizarron); color: #fff;
  border-radius: var(--radio); padding: 12px 14px; box-shadow: 0 12px 30px -10px #073B6399; font-size: .9rem; line-height: 1.4; }
.pts-pop:hover .pop, .pts-pop:focus-within .pop { display: block; }
.pop-tit { display: block; font-family: var(--cond); font-size: 1.15rem; margin-bottom: 6px; }
.pop-fila { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid #ffffff22; }
.pop-t { color: #AFC8E0; }
.pop small { display: block; color: #AFC8E0; }
.pop b { color: var(--banderin); }
.pop-total { font-weight: 600; }
@media (max-width: 640px) {
  .tabla-rk .c-t { display: none; }
  .pop { width: 260px; }
}

/* ---------- Admin ---------- */
.tabla-admin td { text-align: left; font-size: .93rem; vertical-align: top; }
.tabla-admin small { color: var(--grafito); }
.btn-borrar { font: inherit; font-size: .88rem; background: #fff; color: #A3271D; border: 1px solid #E5B4AE; border-radius: var(--radio); padding: 4px 10px; cursor: pointer; }
.btn-borrar:hover { background: #FBE7E4; }

/* ---------- Podio (finales) ---------- */
.podio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 8px; }
.podio-l { display: grid; justify-items: start; align-content: start; gap: 6px; padding: 14px 16px; border-radius: var(--radio); background: #fff; box-shadow: 0 0 0 1px var(--linea); border-top: 5px solid var(--linea); }
.podio-oro { border-top-color: var(--banderin); background: var(--pizarron); color: #fff; box-shadow: none; }
.podio-plata { border-top-color: #AEB8C2; }
.podio-bronce { border-top-color: #C58B4E; }
.podio-lugar { font-size: .9rem; font-weight: 600; color: var(--grafito); }
.podio-oro .podio-lugar { color: var(--banderin); }
.podio-nombre { font-family: var(--cond); font-weight: 700; font-size: 1.35rem; line-height: 1.1; color: var(--tinta); text-decoration: none; }
.podio-oro .podio-nombre { color: #fff; font-size: 1.6rem; }
a.podio-nombre:hover { text-decoration: underline; }
.podio-vs { display: grid; gap: 2px; font-size: 1.15rem; }
.podio-vs a { color: var(--tinta); text-decoration: none; }
.podio-vs .vs { font-family: var(--txt); font-weight: 400; font-size: .85rem; color: var(--grafito); }
.podio-pend { color: var(--pierde); }
.podio-nota { font-size: .88rem; color: var(--grafito); }
.podio-oro .podio-nota { color: #C3D5E8; }
.podio-oro .avatar-ini { background: var(--pizarron-2); color: #fff; }
.ronda-tercer { opacity: .95; }
.ronda-tercer h2 { color: #8A5A2B; }
@media (max-width: 760px) { .podio { grid-template-columns: 1fr 1fr; } }

/* ---------- Aviso de instalar app ---------- */
.instalar:not([hidden]) { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 14px; padding-bottom: 14px; background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea); max-width: 1108px; }
.instalar img { border-radius: 10px; flex-shrink: 0; }
.instalar-txt { display: grid; gap: 2px; flex: 1; font-size: .95rem; }
.instalar-txt span { color: var(--grafito); }
.instalar-cerrar { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--grafito); cursor: pointer; padding: 4px 8px; }

/* ---------- Pestañas de Historia ---------- */
.subnav { margin: 16px 0 8px; }

/* ---------- Récords ---------- */
.records { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 20px 0 48px; }
@media (min-width: 760px) { .records { grid-template-columns: 1fr 1fr; } .record-ancho { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .records { grid-template-columns: repeat(3, 1fr); } .record-ancho { grid-column: span 2; } }
.record { background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea); padding: 16px 18px; }
.record h2 { font-size: 1.45rem; margin-bottom: .2em; }
.record .nota { margin-top: 0; font-size: .9rem; }
.rk-lista { list-style: none; margin: 0; padding: 0; }
.rk-lista li { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--papel-2); }
.rk-num { min-width: 2.6em; text-align: right; font-size: 1.35rem; color: var(--pizarron); }
.rk-lista li:first-child .rk-num { color: #B07A00; }
.rk-txt { flex: 1; }
.rk-txt a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.rk-txt a:hover { text-decoration: underline; }
.rk-txt .vs { color: var(--pierde); font-size: .9rem; }
.rk-txt small { display: block; color: var(--grafito); font-size: .85rem; }
.record-ancho .rk-lista { columns: 2 320px; column-gap: 32px; }
.record-ancho .rk-lista li { break-inside: avoid; }
.etiqueta { display: inline-block; font-size: .75rem; font-weight: 600; background: var(--banderin); color: var(--tinta); border-radius: 999px; padding: 0 8px; vertical-align: 2px; }

/* ---------- Galería ---------- */
.galeria { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.foto { display: block; width: 100%; padding: 0; border: 0; background: var(--papel-2); border-radius: var(--radio); overflow: hidden; cursor: zoom-in; position: relative; aspect-ratio: 3 / 4; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(transparent, #07253Fdd); color: #fff; font-size: .85rem; text-align: left; line-height: 1.3; }
.foto:hover img { filter: brightness(1.05); }
.visor { border: 0; padding: 0; background: transparent; max-width: min(92vw, 640px); max-height: 92vh; }
.visor::backdrop { background: #04182Ae6; }
.visor img { display: block; max-width: 100%; max-height: 74vh; margin: 0 auto; border-radius: var(--radio); }
.visor-txt { color: #fff; font-size: 1.1rem; margin: 12px 0 2px; text-align: center; }
.visor-quien { color: #AFC8E0; margin: 0; text-align: center; font-size: .9rem; }
.visor form { text-align: right; }
.visor-cerrar { background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 4px 6px; }

/* ---------- Patrocinadores ---------- */
.patro-franja { background: #fff; border-top: 1px solid var(--linea); margin-top: 64px; padding: 28px 0 20px; }
.patro-franja + .pie { margin-top: 0; }
.patro-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.patro-cab h2 { font-size: 1.35rem; margin: 0 0 14px; }
.patro-cab a { font-weight: 600; font-size: .95rem; }
.patro-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.patro-logos li > * { display: flex; align-items: center; justify-content: center; height: 64px; padding: 8px; border-radius: var(--radio); background: #fff; box-shadow: 0 0 0 1px var(--papel-2); }
.patro-logos img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .2s; }
.patro-logos li > * { transition: box-shadow .2s, transform .2s; }
.patro-logos li > *:hover, .patro-logos a:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--banderin), 0 10px 22px -8px #073B6366; }
.patro-logos li > *:hover img { transform: scale(1.08); }
.patro-grande { list-style: none; margin: 20px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.patro-grande li > * { display: grid; gap: 6px; height: 100%; padding: 14px; background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea); text-decoration: none; color: var(--tinta); }
.patro-grande a:hover { box-shadow: 0 0 0 2px var(--enlace); }
.patro-img { display: flex; align-items: center; justify-content: center; height: 110px; }
.patro-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.patro-nombre { font-weight: 600; }
.patro-sitio { color: var(--enlace); font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .patro-logos img { transition: none; } }
.rk-varios a { font-weight: 500; }

/* ---------- Portada con escena de golf ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(#0D5490 0%, #073B63 72%); }
.hero-escena { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.hero .hero-in { position: relative; z-index: 1; min-height: 560px; align-items: flex-start; padding-top: 56px; pointer-events: none; }
.hero .hero-in a, .hero .hero-in button { pointer-events: auto; }
.hero .hero-txt { max-width: 600px; text-shadow: 0 2px 18px #052b4a80; }
.hero-ctx { display: flex; align-items: center; gap: 10px; }
.hero-ctx .avatar { border: 2px solid var(--banderin); }
.hero-campeon .hero-foto::after { display: none; }
.ticker + .buscar { margin-top: 24px; }
@media (max-width: 760px) {
  .hero .hero-in { min-height: 0; padding-top: 28px; padding-bottom: 250px; }
  .hero-escena { top: auto; bottom: 0; height: 290px; }
  .esc-sol { display: none; }
}

/* Marcador corriendo con los últimos resultados */
.ticker { display: flex; align-items: stretch; background: #052E4E; color: #E3EDF7; font-size: .95rem; border-top: 2px solid var(--banderin); }
.ticker-tit { flex-shrink: 0; display: flex; align-items: center; padding: 0 16px; background: var(--banderin); color: var(--tinta); font-family: var(--cond); font-weight: 700; font-size: 1.15rem; position: relative; z-index: 1; }
.ticker-pista { display: flex; overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.ticker-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-shrink: 0; animation: mpi-ticker 70s linear infinite; }
.ticker:hover .ticker-lista, .ticker:focus-within .ticker-lista { animation-play-state: paused; }
.ticker-lista li { display: flex; align-items: center; gap: 8px; padding: 11px 22px; white-space: nowrap; border-right: 1px solid #ffffff1c; }
.ticker-lista b { color: #fff; font-weight: 600; }
.m-dif { color: var(--banderin); font-size: 1.1rem; }
.m-ctx { color: #8FB0CF; font-size: .82rem; }
@keyframes mpi-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-lista { animation: none; }
  .ticker-pista { overflow-x: auto; }
  .ticker-lista[aria-hidden] { display: none; }
}

/* ---------- Admin ---------- */
.caja-admin { background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea); padding: 16px 18px; }
.caja-admin > summary { font-size: 1.05rem; }
.caja-admin h2, .caja-admin h3 { margin-top: 0; }
.forma .check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.forma-linea label { display: grid; gap: 4px; font-weight: 600; }
.forma input[type=number], .forma input[type=text] { font: inherit; font-weight: 400; padding: 10px 12px; border: 2px solid var(--linea); border-radius: var(--radio); background: #fff; width: 100%; max-width: 420px; }
.acciones-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acciones-fila form { margin: 0; }
.btn-chico { padding: 4px 10px; font-size: .88rem; }
.img-editor { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.img-editor canvas { width: 200px; height: auto; border-radius: var(--radio); background: repeating-conic-gradient(#eef2f6 0 25%, #fff 0 50%) 0 0 / 16px 16px; box-shadow: 0 0 0 1px var(--linea); }
.img-controles { display: grid; gap: 10px; min-width: 220px; }
.img-controles label { font-weight: 500; font-size: .92rem; }
.adm-patro { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 10px; }
.adm-patro li { background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea); padding: 12px 14px; }
.adm-patro .forma { grid-template-columns: 120px 1fr 1fr 90px auto; align-items: end; gap: 10px; margin: 0; }
.adm-patro .forma .corto input { max-width: 120px; }
.adm-patro .img-editor, .adm-patro [data-img-editor] { display: none; }
.adm-logo { display: flex; align-items: center; justify-content: center; height: 56px; }
.adm-logo img { max-width: 110px; max-height: 56px; object-fit: contain; }
.patro-oculto { opacity: .55; }
@media (max-width: 900px) { .adm-patro .forma { grid-template-columns: 1fr 1fr; } .adm-logo { grid-column: 1 / -1; justify-content: flex-start; } }
.adm-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; max-height: 420px; overflow: auto; padding: 4px; }
.adm-checks b { grid-column: 1 / -1; margin-top: 8px; }

/* ---------- Apuestas ---------- */
.bolsa { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 10px; margin: 20px 0; }
.bolsa > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radio); background: #fff; box-shadow: 0 0 0 1px var(--linea); }
.bolsa span { font-weight: 600; color: var(--grafito); font-size: .92rem; }
.bolsa b { font-size: 1.9rem; line-height: 1.1; }
.bolsa small { color: var(--grafito); font-size: .85rem; }
.bolsa-total { background: var(--pizarron) !important; color: #fff; box-shadow: none !important; }
.bolsa-total span, .bolsa-total small { color: #AFC8E0; }
.bolsa-total b { color: var(--banderin); font-size: 2.3rem; }
.premio-1 { border-top: 4px solid var(--banderin); }
.premio-2 { border-top: 4px solid #AEB8C2; }
.premio-3 { border-top: 4px solid #C58B4E; }
@media (max-width: 760px) { .bolsa { grid-template-columns: 1fr 1fr; } .bolsa-total { grid-column: 1 / -1; } }
.finalistas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.fin { background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea); padding: 12px 14px; display: grid; gap: 8px; }
.fin-cab { display: flex; align-items: center; gap: 10px; }
.fin-txt { flex: 1; display: grid; }
.fin-txt a { font-weight: 600; color: var(--tinta); text-decoration: none; }
.fin-txt a:hover { text-decoration: underline; }
.fin-monto { text-align: right; display: grid; }
.fin-monto b { font-size: 1.3rem; }
.fin-monto small, .fin-txt small { color: var(--grafito); font-size: .82rem; }
.fin-barra { display: block; height: 6px; border-radius: 3px; background: var(--papel-2); overflow: hidden; }
.fin-barra i { display: block; height: 100%; background: var(--enlace); }
.fin details summary { font-size: .88rem; padding: 0; }
.fin-aps { list-style: none; margin: 6px 0 0; padding: 0; font-size: .9rem; }
.fin-aps li { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid var(--papel-2); }
.fin-elim { background: #FDF1EF; box-shadow: 0 0 0 1px #F0C4BE; }
.fin-elim .fin-txt a { color: #A3271D; text-decoration: line-through; text-decoration-thickness: 1px; }
.fin-elim .fin-barra i { background: #D98A80; }
.sit-eliminado { color: #A3271D !important; font-weight: 600; }
.sit-tercer { color: #8A5A2B !important; font-weight: 600; }
.sit-lugar { color: #1F6B3A !important; font-weight: 700; }
.fin-l1 { box-shadow: 0 0 0 2px var(--banderin); }
.fin-l2 { box-shadow: 0 0 0 2px #AEB8C2; }
.fin-l3 { box-shadow: 0 0 0 2px #C58B4E; }
.fila-elim td { color: #A3271D; }
.tabla-mias small { display: block; font-size: .8rem; }
.tabla-mias td, .tabla-mias th { text-align: left; }
.etq-ok { display: inline-block; font-size: .8rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #E4F1E8; color: #1F6B3A; }
.etq-pend { display: inline-block; font-size: .8rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #FFF4D6; color: #8A6400; }
.reparto { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.reparto-l { background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea); padding: 12px 14px; }
.reparto-l h3 { font-size: 1.2rem; margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px; }
.forma-apuesta { grid-template-columns: 1fr 1fr auto; align-items: end; max-width: 760px; }
@media (max-width: 640px) { .forma-apuesta { grid-template-columns: 1fr; } }

/* ---------- Portada: torneo + lo que viene ---------- */
.hero-titulo { font-size: clamp(2.6rem, 7.5vw, 5rem); line-height: .95; font-weight: 700; margin: 0 0 .25em; max-width: 11ch; }
.hero-portada .hero-sub { margin: 0 0 18px; color: #D3E3F2; }
.viene { margin: 8px 0 22px; }
.viene-tit { margin: 0 0 8px; font-weight: 600; color: var(--banderin); }
.viene-sub { margin: 8px 0 0; color: #D3E3F2; font-size: .98rem; }
.viene-grande { margin: 0; font-size: 1.25rem; }
.viene-grande b { font-size: 2.6rem; color: #fff; margin-right: 6px; }
.cuenta { display: flex; gap: 8px; }
.cuenta span { display: grid; justify-items: center; min-width: 74px; padding: 8px 10px 6px; background: #052E4ECC; border: 1px solid #ffffff26; border-radius: var(--radio); font-size: .8rem; color: #AFC8E0; }
.cuenta b { font-size: 2.5rem; line-height: 1; color: #fff; }
.avance { height: 10px; max-width: 420px; border-radius: 5px; background: #ffffff26; overflow: hidden; }
.avance i { display: block; height: 100%; background: var(--banderin); border-radius: 5px; }
.hero-campeon-linea { margin: 18px 0 0; font-size: .92rem; }
.hero-campeon-linea a { display: inline-flex; align-items: center; gap: 8px; color: #D3E3F2; text-decoration: none; }
.hero-campeon-linea a:hover span { text-decoration: underline; }
.hero-campeon-linea b { color: #fff; font-weight: 600; }

/* ---------- Tu tablero ---------- */
.tablero { margin-top: 24px; }
.tablero-in { background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea), 0 10px 30px -18px #073B6380; padding: 18px 20px; display: grid; gap: 16px; }
.tablero-cab { display: flex; align-items: center; gap: 12px; }
.tablero-cab h2 { margin: 0; font-size: 1.6rem; }
.tablero-cab a { font-size: .92rem; font-weight: 600; }
.tablero-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.dato { display: grid; gap: 2px; align-content: start; padding: 12px 14px; background: var(--papel); border-radius: var(--radio); box-shadow: 0 0 0 1px var(--papel-2); }
.dato > span { font-size: .85rem; font-weight: 600; color: var(--grafito); }
.dato b { font-size: 1.15rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dato b .num { font-size: 1.6rem; }
.dato small { color: var(--grafito); }
.dato a { font-size: .9rem; font-weight: 600; margin-top: 4px; }
.pendientes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 12px; border-top: 1px solid var(--papel-2); }
.pendientes > span { font-weight: 600; }
.pendientes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.pendientes li a { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--papel-2); color: var(--tinta); text-decoration: none; font-size: .92rem; }
.pendientes li a:hover { background: #DCE7F2; }
@media (max-width: 760px) {
  .cuenta span { min-width: 64px; }
  .cuenta b { font-size: 2rem; }
}
.envoltura.bloque { margin-left: auto; margin-right: auto; }

/* ---------- Bases ---------- */
.bases-intro { max-width: 72ch; font-size: 1.08rem; }
.bases-resumen { list-style: none; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bases-resumen li { display: grid; gap: 2px; padding: 12px 14px; background: var(--pizarron); color: #fff; border-radius: var(--radio); }
.bases-resumen b { font-size: 2rem; line-height: 1.05; color: var(--banderin); }
.bases-resumen span { color: #D3E3F2; font-size: .92rem; }
.bases-indice { position: sticky; top: 48px; z-index: 3; background: var(--papel); padding: 10px 0; margin: 0; }
.linea-tiempo { list-style: none; margin: 16px 0 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 138px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); }
.linea-tiempo li { display: grid; grid-template-columns: 128px 1fr; gap: 28px; padding: 9px 0; position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: 132px; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: var(--banderin); box-shadow: 0 0 0 3px var(--papel); }
.linea-tiempo time { text-align: right; font-weight: 600; color: var(--tinta); line-height: 1.15; white-space: nowrap; }
.linea-tiempo time .num { font-size: 1.6rem; color: var(--pizarron); }
.linea-tiempo time small { display: block; color: var(--grafito); font-weight: 400; font-size: .82rem; }
.linea-tiempo div { display: grid; gap: 2px; }
.linea-tiempo div span { color: var(--grafito); font-size: .93rem; }
.lt-pasada { opacity: .5; }
.lt-pasada::before { background: var(--linea) !important; }
.bases-texto { max-width: 78ch; }
.bases-texto ul { padding-left: 1.2em; margin: 0; }
.bases-texto li { margin: 0 0 .7em; line-height: 1.6; }
.bases-texto li::marker { color: var(--enlace); }
.bases-destacado { background: #FFF8E1; border-left: 4px solid var(--banderin); padding: 14px 18px; border-radius: 0 var(--radio) var(--radio) 0; }
.bases-destacado p { line-height: 1.6; }
.bases-firma { font-style: italic; color: var(--grafito); max-width: 70ch; }
.bases section[id] { scroll-margin-top: 110px; }
@media (max-width: 560px) {
  .linea-tiempo::before { left: 108px; }
  .linea-tiempo li { grid-template-columns: 98px 1fr; gap: 26px; }
  .linea-tiempo li::before { left: 102px; }
  .linea-tiempo time { font-size: .85rem; }
  .linea-tiempo time .num { font-size: 1.3rem; }
}

/* Lugar y grupo de origen en la primera ronda de la llave */
.siembra { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-family: var(--cond); font-weight: 600; font-size: .82rem; color: var(--grafito); margin-right: 6px; }
.siembra i { width: 9px; height: 9px; border-radius: 50%; background: var(--g); box-shadow: inset 0 0 0 1px #0002; }
.ronda-inicial .caja-j { justify-content: flex-start; }
.ronda-inicial .caja-j b { margin-left: auto; }
.llave { grid-template-columns: minmax(250px, 1.15fr) repeat(calc(var(--rondas) - 1), minmax(210px, 1fr)); min-width: calc(var(--rondas) * 238px + 40px); }

/* Fecha límite bajo el nombre de cada ronda */
.ronda h2 { display: flex; flex-direction: column; gap: 2px; }
.limite { font-family: var(--cond); font-size: .8rem; font-weight: 500; color: var(--grafito); letter-spacing: .02em; }
.limite span { text-transform: uppercase; font-size: .7rem; opacity: .75; margin-right: 2px; }
.limite time { font-weight: 700; color: var(--tinta); }
.limite-vencida time { color: #B3261E; }
/* Tercer lugar debajo de la final */
.final-y-tercer { display: flex; flex-direction: column; gap: 18px; margin: auto 0; }
.tercer-bajo h3 { font-size: .95rem; font-weight: 600; color: #8A5A2B; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid #D9B48A; }
.ronda-final .caja::after { display: none; }

/* Ranking: puntos + icono de ayuda a la derecha */
.tabla-rk td.c-pts { white-space: nowrap; }
.pts-val { font-family: var(--cond); font-weight: 700; font-size: 1.2rem; color: var(--tinta); vertical-align: middle; }
.pts-pop { vertical-align: middle; margin-left: 6px; }
.pts-ayuda { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--enlace); cursor: help; }
.pts-ayuda:hover, .pts-ayuda:focus-visible { background: var(--papel-2); color: var(--tinta); }
.tabla-rk .pop { white-space: normal; }

/* Jugador: marcador de 5 y récord por fase */
.marcador-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) {
  .marcador-5 { grid-template-columns: repeat(2, 1fr); }
  .marcador-5 div:first-child { grid-column: 1 / -1; }
  .marcador-5 div:nth-child(3) { border-left: 1px solid #ffffff1f; }
  .marcador-5 div:nth-child(2n) { border-left: 0; }
  .marcador-5 div:nth-child(n+2) { border-top: 1px solid #ffffff1f; }
}
.etapas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 28px; }
.etapa { background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--linea); padding: 16px 18px; border-top: 4px solid var(--azul, #0B4C7E); }
.etapa-finales { border-top-color: var(--banderin); }
.etapa h2 { font-size: 1.25rem; margin: 0 0 10px; }
.etapa-num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.etapa-num dt { font-size: .8rem; color: var(--grafito); }
.etapa-num dd { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 1.8rem; line-height: 1.1; color: var(--tinta); }
.etapa-num dd.gana { color: #1E7A46; }
.etapa-num dd.pierde { color: #B3261E; }
.etapa-barra { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 12px 0 8px; background: var(--papel-2); }
.etapa-barra i { background: #1E7A46; } .etapa-barra s { background: #D9534F; } .etapa-barra u { background: #9AA5AF; }
.etapa-nota { margin: 0; font-size: .88rem; color: var(--grafito); }
@media (max-width: 640px) { .etapas { grid-template-columns: 1fr; } .etapa-num dd { font-size: 1.5rem; } }

/* Jugador: matches agrupados por torneo */
.tm { border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; margin: 0 0 10px; }
.tm summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; list-style: none; background: var(--papel-2); border-radius: var(--radio); }
.tm[open] summary { border-radius: var(--radio) var(--radio) 0 0; border-bottom: 1px solid var(--linea); }
.tm summary::-webkit-details-marker { display: none; }
.tm summary::before { content: "▸"; color: var(--grafito); transition: transform .15s; }
.tm[open] summary::before { transform: rotate(90deg); }
.tm-nombre { font-family: var(--cond); font-weight: 700; font-size: 1.35rem; color: var(--pizarron); }
.tm-info { display: flex; align-items: center; gap: 10px; flex: 1; font-size: .92rem; color: var(--grafito); }
.tm-alc b { color: var(--tinta); }
.tm-rec { font-family: var(--cond); font-weight: 700; font-size: 1.15rem; color: var(--tinta); }
.tm .matches { margin: 0; padding: 0 16px; }
.tm .match:last-child { border-bottom: 0; }
.match .res { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--cond); font-weight: 700; font-size: .85rem; color: #fff; margin-right: 10px; }
.res-G { background: #1E7A46; } .res-P { background: #D9534F; } .res-E { background: #9AA5AF; }
.tm .match { flex-wrap: nowrap; align-items: center; }
.tm .match-jug { flex: 1 1 auto; }
@media (max-width: 640px) {
  .tm .matches { padding: 0 12px; }
  .tm .match { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; row-gap: 2px; align-items: start; }
  .tm .match .res { grid-row: 1 / 3; margin: 2px 0 0; }
  .tm .match-meta { gap: 10px; font-size: .85rem; flex-wrap: wrap; }
  .tm .match-meta > * { white-space: nowrap; }
  .tm .match-meta time { min-width: 0; text-align: left; }
  .tm-info { flex-basis: 100%; order: 3; }
}

/* Jugadores: copas por lugar en el podio */
.jugadores a { grid-template-rows: auto auto auto; }
.jugadores .avatar { grid-row: 1 / 4; }
.jug-copas { grid-column: 2 / 4; grid-row: 3; display: flex; flex-wrap: wrap; gap: 1px; margin-top: 4px; }
.copa { flex: 0 0 auto; }
.copa-1 { fill: #D4A017; } .copa-2 { fill: #A7B1BA; } .copa-3 { fill: #B8733A; } .copa-4 { fill: #5A7FA3; }
.leyenda-copas { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.leyenda-copas > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.leyenda-copas .ley-tip { white-space: normal; }

/* Quiniela: comparativo eligió vs real */
.qd-dlg { width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 0; border-radius: var(--radio); padding: 20px 22px; box-shadow: 0 20px 60px -10px #073B6380; }
.qd-dlg::backdrop { background: #073B63aa; }
.qd-cerrar { position: sticky; top: 0; float: right; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--papel-2); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--tinta); }
.qd-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qd-cab h2 { margin: 0; font-size: 1.5rem; }
.qd-cab p { margin: 2px 0 0; color: var(--grafito); font-size: .92rem; }
.qd-cab p b { color: var(--tinta); font-size: 1.05rem; }
.qd-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.qd-g { border: 1px solid var(--linea); border-top: 4px solid var(--g); border-radius: 6px; background: #fff; overflow: hidden; }
.qd-gcab { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; font-weight: 600; }
.qd-gcab i { width: 10px; height: 10px; border-radius: 50%; background: var(--g); }
.qd-gcab small { color: var(--grafito); font-weight: 400; }
.qd-gcab b { margin-left: auto; font-family: var(--cond); font-size: 1.05rem; }
.qd-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9rem; }
.qd-tabla col.c1 { width: 2.4em; } .qd-tabla col.c4 { width: 3em; }
.qd-tabla th { font-size: .75rem; font-weight: 600; color: var(--grafito); text-align: left; padding: 2px 8px; }
.qd-tabla td { padding: 5px 8px; border-top: 1px solid var(--papel-2); vertical-align: top; }
.qd-tabla td:first-child { width: 2em; color: var(--grafito); }
.qd-real { color: var(--grafito); }
.qd-pts { text-align: right; font-weight: 700; font-family: var(--cond); }
.qd-tabla tr.q-ok { background: #E7F4EA; } .qd-tabla tr.q-ok .qd-pts { color: #1F8A3B; }
.qd-tabla tr.q-medio { background: #FFF6DC; } .qd-tabla tr.q-medio .qd-pts { color: #B07A00; }
.qd-tabla tr.q-no td:nth-child(2) { text-decoration: line-through; text-decoration-color: #D9534F88; color: var(--grafito); }
.qd-ley { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; margin: 14px 0 0; }
.qd-ley span { padding: 2px 8px; border-radius: 999px; }
.qd-ley .q-ok { background: #E7F4EA; color: #1F6B3A; } .qd-ley .q-medio { background: #FFF6DC; color: #8A6000; } .qd-ley .q-no { background: var(--papel-2); color: var(--grafito); }
.qd-inline { margin-top: 12px; }
@media (max-width: 640px) { .qd-dlg { padding: 14px; } .qd-cab h2 { font-size: 1.25rem; } }

/* Cinta de patrocinadores bajo el menú */
.cinta { background: #fff; border-bottom: 1px solid var(--linea); overflow: hidden; position: relative; }
.cinta::before, .cinta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 1; pointer-events: none; }
.cinta::before { left: 0; background: linear-gradient(90deg, #fff, #fff0); }
.cinta::after { right: 0; background: linear-gradient(-90deg, #fff, #fff0); }
.cinta-pista { display: flex; width: max-content; animation: cinta var(--dur, 90s) linear infinite; }
.cinta:hover .cinta-pista, .cinta:focus-within .cinta-pista { animation-play-state: paused; }
.cinta-logos { list-style: none; margin: 0; padding: 8px 0; display: flex; align-items: center; }
.cinta-logos li > * { display: flex; align-items: center; justify-content: center; height: 58px; width: 128px; padding: 8px 14px; border-radius: var(--radio); transition: transform .2s, box-shadow .2s; }
.cinta-logos img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cinta-logos li > *:hover, .cinta-logos a:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 2px var(--banderin), 0 8px 18px -8px #073B6366; background: #fff; }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .cinta-logos li > * { height: 46px; width: 100px; padding: 6px 10px; } }
@media (prefers-reduced-motion: reduce) {
  .cinta { overflow-x: auto; }
  .cinta-pista { animation: none; }
  .cinta-logos[aria-hidden] { display: none; }
}

/* Historia: el nombre no debe cambiar de color al pasar el mouse (el campeón tiene fondo azul) */
a.temp-l { transition: transform .15s, box-shadow .15s; }
a.temp-l:hover { color: var(--tinta); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--linea), 0 10px 22px -10px #073B6366; }
a.temp-campeon:hover { color: #fff; background: var(--pizarron); box-shadow: 0 0 0 2px var(--banderin), 0 10px 22px -10px #073B6399; }
a.temp-campeon:hover .temp-lugar { color: var(--banderin); }

/* Finales: matches por jugar con jugadores ya definidos */
.caja-pend { border: 1px dashed #A9BBCD; box-shadow: none; background: #FBFCFE; }
.caja-pend .caja-j a { color: var(--tinta); font-weight: 500; }
.caja-pend time { color: var(--grafito); font-style: italic; }
.caja-tbd { color: var(--pierde); font-style: italic; }
.aviso-prov { background: #FFF6DC; border-left: 4px solid var(--banderin); color: #5C4400; }

/* Estadísticas: margen de cada final */
.margenes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--papel-2); }
.margenes h3 { font-size: 1.1rem; margin: 0 0 2px; }
.margen-barras { list-style: none; margin: 12px 0 0; padding: 0; display: flex; align-items: stretch; gap: 6px; height: 170px; }
.margen-barras li { flex: 1; min-width: 0; }
.margen-barras a { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; text-decoration: none; color: var(--tinta); gap: 3px; }
.mb-barra { width: 100%; max-width: 30px; min-height: 6px; background: var(--pizarron-2, #0B4C7E); border-radius: 4px 4px 0 0; transition: background .15s; }
.mb-barra.mb-uno { background: #8FB3D6; }
.mb-val { font-family: var(--cond); font-weight: 700; font-size: .85rem; }
.mb-anio { font-size: .72rem; color: var(--grafito); white-space: nowrap; transform: rotate(-45deg); transform-origin: center; height: 1.6em; margin-top: 4px; }
.margen-barras a:hover .mb-barra, .margen-barras a:focus-visible .mb-barra { background: var(--banderin); }
.margen-barras { overflow: hidden; }
.mb-val, .mb-anio { max-width: 100%; }
@media (max-width: 640px) {
  .margen-barras { gap: 3px; height: 150px; }
  .mb-val { font-size: .66rem; }
  .mb-anio { font-size: .62rem; transform: rotate(180deg); writing-mode: vertical-rl; height: auto; margin-top: 3px; }
}

/* Estadísticas: las tres listas de líderes en recuadro blanco como las demás */
.est-lideres { gap: 20px; margin-top: 20px; }
.est-lideres .record h2 { margin-top: 0; }
.rk-pct { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--pizarron-2, #0B4C7E); background: #E6EEF6; border-radius: 999px; padding: 0 8px; margin-left: 2px; white-space: nowrap; }

/* Instalar como app: pasos cuando el navegador no instala directo */
.instalar-pasos { margin: 6px 0 0; padding-left: 1.3em; font-size: .92rem; line-height: 1.45; }
.instalar-pasos li { margin: 2px 0; }
[hidden] { display: none !important; }
.instalar.con-pasos { flex-wrap: wrap; align-items: flex-start; }
.instalar.con-pasos .instalar-txt { flex-basis: calc(100% - 110px); }