:root{
  --bg: #000000;
  --panel: #121212;
  --panel-alt: #1C1C1C;
  --border: #2A2A2A;
  --text: #FFFFFF;
  --text-muted: #C2C2C2; /* más claro: se lee mejor sobre negro */
  --aqua: #00FFCC;
  --purple: #67297D;
  --lib-gold: #E8B923;
  --lib-subcampeon: #00C8FC;
  --lib-green: #8CE600;
  --lib-cuartos: #DA954F;
  --lib-octavos: #C29F7E;
  --lib-gray: #707070;
  --danger: #E0574F;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

.app{
  display:flex;
  min-height: 100vh;
}

/* --- Sidebar (esquina izquierda) ---
   Misma estructura de siempre; lo que cambió es cómo se ve: íconos en cada
   sección, submenús con una guía vertical y el ítem activo marcado con una
   barrita verde agua → morado (los colores del logo). */
.sidebar{
  --sb-pad: 0.9rem;
  width: 260px;
  flex-shrink: 0;
  background:
    radial-gradient(120% 220px at 0% 0%, rgba(0,255,204,0.07), transparent 70%),
    radial-gradient(90% 200px at 100% 100%, rgba(103,41,125,0.16), transparent 70%),
    var(--panel);
  border-right: 1px solid var(--border);
  padding: 1.25rem var(--sb-pad) 1.25rem;
  display:flex;
  flex-direction:column;
  gap: 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.sidebar::-webkit-scrollbar{ width: 6px; }
.sidebar::-webkit-scrollbar-thumb{ background: #333; border-radius: 999px; }
.sidebar::-webkit-scrollbar-track{ background: transparent; }

.sidebar-brand{
  display:flex;
  align-items:center;
  gap: 0.7rem;
  padding: 0.2rem 0.35rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo{
  width: 42px; height: 42px;
  border-radius: 50%;
  display:block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,255,204,0.35), 0 0 18px rgba(0,255,204,0.18), 0 0 30px rgba(103,41,125,0.35);
}
.sidebar-brand__texto{ display:flex; flex-direction:column; line-height: 1.15; min-width: 0; }
.sidebar-brand__texto strong{
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.sidebar-brand__texto small{
  font-weight: 100;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.sidebar-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: 0.12rem;
  flex: 1;
}
.sidebar-nav--comunidad{
  flex: 0 0 auto;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border);
}
.sidebar-label{
  margin: 1rem 0 0.3rem;
  padding: 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8C8C8C;
}
.sidebar-nav--comunidad .sidebar-label{ margin-top: 0.75rem; }

.nav-item{
  position: relative;
  display:flex;
  align-items:center;
  gap: 0.7rem;
  width: 100%;
  text-align:left;
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 0.55rem 0.7rem;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.89rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item > span{ flex: 1; min-width: 0; }
.nav-icon{
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: #7A7A7A;
  transition: color 0.15s ease;
}
.nav-item:hover{ background: rgba(255,255,255,0.05); color: var(--text); }
.nav-item:hover .nav-icon{ color: var(--text); }
.nav-item:focus-visible, .nav-subitem:focus-visible, .nav-subgroup:focus-visible{
  outline: 2px solid var(--aqua);
  outline-offset: -2px;
}
.nav-item.active{
  background: linear-gradient(90deg, rgba(0,255,204,0.14), rgba(0,255,204,0.03) 85%);
  color: var(--text);
  font-weight: 700;
}
.nav-item.active .nav-icon{ color: var(--aqua); }
.nav-item.active::before{
  content: "";
  position: absolute;
  left: calc(var(--sb-pad) * -1);
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--aqua), var(--purple));
}
.nav-item--parent .chevron{ margin-left: auto; color: #6A6A6A; }
.chevron{
  flex-shrink:0;
  transition: transform 0.18s ease;
}
.nav-group.open > .nav-item--parent .chevron{
  transform: rotate(180deg);
  color: var(--text-muted);
}

/* Submenús: cuelgan de una guía vertical alineada con el ícono del padre */
.sidebar-submenu{
  list-style:none;
  margin: 0.15rem 0 0.4rem 1.28rem;
  padding: 0 0 0 0.35rem;
  border-left: 1px solid var(--border);
  display:none;
  flex-direction:column;
  gap: 0.06rem;
}
.sidebar-submenu .sidebar-submenu{ margin-left: 0.7rem; }
.nav-group.open > .sidebar-submenu{ display:flex; }
.nav-subgroup,
.nav-subitem{
  display:flex;
  align-items:center;
  text-align:left;
  background: transparent;
  border: none;
  border-radius: 7px;
  margin-left: -0.35rem;
  width: calc(100% + 0.35rem);
  padding: 0.4rem 0.6rem 0.4rem 0.85rem;
  border-left: 2px solid transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.81rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-subgroup{ justify-content:space-between; gap: 0.4rem; font-weight: 700; color: #D6D6D6; }
.nav-subitem{ font-weight: 400; }
.nav-subgroup:hover,
.nav-subitem:hover{ background: rgba(255,255,255,0.05); color: var(--text); border-left-color: #555; }
.nav-subgroup .chevron{ flex-shrink:0; color: #6A6A6A; transition: transform 0.18s ease; }
.nav-group.open > .nav-subgroup .chevron{ transform: rotate(180deg); }
.nav-subitem.active{
  color: var(--aqua);
  font-weight: 700;
  border-left-color: var(--aqua);
  background: rgba(0,255,204,0.06);
}

@media (prefers-reduced-motion: reduce){
  .chevron, .nav-item, .nav-subitem, .nav-subgroup{ transition: none; }
}

.auth-modal{
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items:center;
  justify-content:center;
  padding: 1.5rem;
}
.auth-modal:not([hidden]){ display:flex; }
.auth-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}
.auth-modal__box{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem 1.5rem;
  font-family: 'DM Sans', sans-serif;
}
.perfil-form{
  display:flex;
  flex-direction:column;
  gap: 0.9rem;
  max-width: 420px;
}
.perfil-form .auth-field{ margin-bottom: 0; }

.foro-caja{
  display:flex;
  flex-direction:column;
  gap: 0.7rem;
}
.foro-textarea{
  resize: vertical;
  min-height: 90px;
  font-family: 'DM Sans', sans-serif;
}
.foro-caja__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.foro-contador{
  font-size: 0.78rem;
  color: var(--text-muted);
}

.foro-lista{
  display:flex;
  flex-direction:column;
  gap: 1rem;
}
.foro-comentario{
  display:flex;
  gap: 0.8rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.foro-comentario:last-child{ border-bottom:none; padding-bottom:0; }
.foro-comentario__escudo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--panel-alt);
  padding: 4px;
}
.foro-comentario__escudo--vacio{
  background: var(--panel-alt);
  border: 1px dashed var(--border);
}
.foro-comentario__cuerpo{ flex:1; min-width:0; }
.foro-comentario__cabecera{
  display:flex;
  align-items:baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.foro-comentario__cabecera strong{
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
}
.foro-comentario__cabecera span{
  color: var(--text-muted);
  font-size: 0.75rem;
}
.foro-comentario__texto{
  color: var(--text);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Foro: controles de orden/filtro --- */
.foro-controles{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.foro-controles__orden{ display:flex; gap: 0.5rem; }
.foro-orden-btn{
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.foro-orden-btn.active{ background: var(--aqua); border-color: var(--aqua); color: #06201C; }
.foro-controles__filtro{ max-width: 220px; }

/* --- Foro: comentario individual --- */
.foro-comentario{ border-left: 3px solid var(--border); padding-left: 0.9rem; }
.foro-comentario--fijado{ background: rgba(0,255,204,0.05); border-radius: 8px; padding: 0.75rem; }
.foro-comentario__pin{
  display:inline-block;
  font-size: 0.7rem;
  color: var(--aqua);
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.foro-comentario__club{
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--panel-alt);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.foro-mencion{ color: var(--aqua); font-weight: 700; }

.foro-comentario__acciones{
  display:flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}
.foro-accion{
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display:flex;
  align-items:center;
  gap: 0.3rem;
}
.foro-accion:hover{ color: var(--aqua); }
.foro-accion--danger{ color: var(--danger); }
.foro-accion--danger:hover{ color: var(--danger); text-decoration: underline; }
.foro-accion--like.active{ color: var(--danger); }

/* --- Foro: edición inline --- */
.foro-edicion{ display:flex; flex-direction:column; gap:0.5rem; margin-top:0.3rem; }

/* --- Foro: respuestas --- */
.foro-respuestas{
  margin-top: 0.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border);
  display:flex;
  flex-direction:column;
  gap: 0.75rem;
}
.foro-respuesta{ display:flex; gap:0.6rem; }
.foro-respuesta__escudo{ width:28px; height:28px; object-fit:contain; border-radius:50%; background:var(--panel-alt); padding:3px; flex-shrink:0; }
.foro-caja--respuesta{ margin-top: 0.5rem; }

/* --- Foro: reportes (admin) --- */
.foro-reportes__titulo{ margin:0 0 0.75rem; color: var(--danger); font-size:0.95rem; }
.foro-reporte{ padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.foro-reporte:last-child{ border-bottom:none; }
.foro-reporte p{ margin: 0 0 0.4rem; color: var(--text); }

/* --- Foro: encuestas --- */
.foro-encuesta__titulo{ margin: 0 0 0.8rem; font-size: 0.95rem; color: var(--text); }
.foro-encuesta__opciones{ display:flex; flex-direction:column; gap: 0.5rem; }
.foro-encuesta__opcion{
  text-align:left;
  padding: 0.55rem 0.8rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.foro-encuesta__opcion:hover{ border-color: var(--aqua); color: var(--aqua); }
.foro-encuesta__resultado{
  position: relative;
  padding: 0.55rem 0.8rem;
  border-radius: 7px;
  background: var(--panel-alt);
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 700;
}
.foro-encuesta__resultado span{ position: relative; z-index: 1; }
.foro-encuesta__barra{
  position: absolute;
  inset: 0;
  background: rgba(0,255,204,0.18);
  z-index: 0;
}
.foro-encuesta-crear{
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}
.foro-encuesta-crear summary{ cursor:pointer; color: var(--text-muted); font-size:0.8rem; font-weight:700; margin-bottom:0.6rem; }
.foro-encuesta-crear .auth-input{ margin-bottom: 0.5rem; }

.auth-google-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #fff;
  color: #1F1F1F;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  margin-bottom: 1rem;
}
.auth-google-btn:hover{ background: #f2f2f2; }
.auth-divider{
  display:flex;
  align-items:center;
  gap: 0.7rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-bottom: 1rem;
}
.auth-divider::before, .auth-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.club-picker{ position: relative; }
.club-picker__list{
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.club-picker__group{
  padding: 0.4rem 0.6rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.club-picker__option{
  display:flex;
  align-items:center;
  gap: 0.55rem;
  width: 100%;
  text-align:left;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  cursor: pointer;
}
.club-picker__option:hover{ background: var(--panel); color: var(--aqua); }
.club-picker__shield{ width: 20px; height: 20px; object-fit: contain; flex-shrink:0; }
.club-picker__empty{
  padding: 0.5rem 0.7rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.auth-modal__box h2{
  margin: 0 0 1.1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-align:center;
}
.auth-modal__close{
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
}
.auth-modal__close:hover{ color: var(--text); }
.auth-field{
  display:flex;
  flex-direction:column;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 700;
}
.auth-input{
  padding: 0.6rem 0.8rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
}
.auth-input:focus{ outline: 2px solid var(--aqua); outline-offset: 1px; }
.auth-modal__submit{ width: 100%; text-align:center; margin-top: 0.3rem; }
.auth-modal__forgot{
  display:block;
  width: 100%;
  text-align:center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  margin-top: 0.9rem;
}
.auth-modal__forgot:hover{ color: var(--aqua); }
.auth-modal__switch{
  text-align:center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.6rem 0 0;
}
.auth-modal__switch button{
  background: transparent;
  border: none;
  color: var(--aqua);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0 0.2rem;
}
.auth-modal__error{
  font-size: 0.8rem;
  color: var(--danger);
  text-align:center;
  margin: -0.3rem 0 0.8rem;
}

.main{
  flex: 1;
  min-width: 0;
  padding-bottom: 3rem;
}

/* El cofre del Baúl (se usa en la portada del Baúl, baul-inicio.js) */
.baul-chest{
  width: 190px;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
.baul-chest__lid{
  transform-box: view-box;
  transform-origin: 32px 76px;
  transition: transform 0.5s cubic-bezier(.3,1.6,.5,1);
}
.baul-chest__luz{ opacity: 0.25; transition: opacity 0.4s ease; }

.home-hero{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  max-width: 960px;
  margin: 1.5rem auto 0.5rem;
  padding: 0.5rem 1.5rem;
  overflow: hidden;
}
.home-hero__logo{
  width: 92px;
  height: 92px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.home-hero__glow{
  position: absolute;
  top: 50%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  filter: blur(55px);
  opacity: 0.55;
  transform: translateY(-50%);
  pointer-events: none;
}
.home-hero__glow--aqua{ left: calc(50% - 230px); background: var(--aqua); }
.home-hero__glow--purple{ right: calc(50% - 230px); background: var(--purple); }

.home-hero__title{
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.35;
  background: linear-gradient(100deg,
    var(--text) 0%, var(--text) 35%,
    var(--aqua) 47%, var(--purple) 53%,
    var(--text) 65%, var(--text) 100%);
  background-size: 250% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 4s linear infinite;
}
@keyframes shine{
  0%{ background-position: 200% center; }
  100%{ background-position: -50% center; }
}

.home-intro{
  max-width: 960px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
}
.home-intro h2{
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0 0 0.3rem;
  color: var(--text);
}
.home-intro p{
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.95rem;
  margin: 0;
}

.home-grid{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
}
.home-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  text-align:left;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
button.home-card:hover{ border-color: var(--aqua); }
.home-card h3{
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 700;
}
.home-card p{
  margin:0;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}
.home-card--group{ cursor: default; }
.home-card__title{
  cursor: pointer;
  display:inline-block;
}
.home-card__title:hover{ color: var(--aqua); }
.home-card__list{
  list-style:none;
  margin: 0.6rem 0 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 0.2rem;
}
.home-card__tree .home-card__tree{
  margin-left: 0.9rem;
  margin-top: 0.2rem;
}
.home-link{
  display:block;
  background:transparent;
  border:none;
  padding: 0.3rem 0;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  text-align:left;
  cursor: pointer;
  width:100%;
}
.home-link:hover{ color: var(--aqua); }
.home-link--group{
  color: var(--text);
  font-weight: 700;
  cursor: default;
}

.search-wrap{
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}
.search-icon{
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.search-input{
  width: 100%;
  padding: 0.6rem 0.9rem 0.6rem 2.3rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
}
.search-input:focus{ outline: 2px solid var(--aqua); outline-offset: 1px; }
.search-input::placeholder{ color: var(--text-muted); }
.search-results{
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.search-result{
  display:flex;
  align-items:center;
  gap: 0.7rem;
  width: 100%;
  text-align:left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
}
.search-result:hover, .search-result:focus-visible{ background: var(--panel); outline: none; }
.search-result:hover strong, .search-result:focus-visible strong{ color: var(--aqua); }
/* Escudo del club / selección, o trofeo de la lista */
.search-result__icono{
  flex-shrink: 0; width: 34px; height: 34px; overflow: hidden;
  display:grid; place-items:center;
  border-radius: 8px;
  color: var(--lib-gold);
}
/* Medida fija en píxeles: con porcentajes, dentro de la grilla, cada escudo
   quedaba del tamaño real de su imagen (unos más grandes que otros) */
.search-result__icono img{ display:block; width: 30px; height: 30px; object-fit: contain; transform-origin: center; }
.search-result__icono--trofeo{ background: rgba(232,185,35,0.08); }
.search-result__icono--trofeo img{ width: 26px; height: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.search-result__respaldo{ display:none; }
.search-result__icono.sin-imagen .search-result__respaldo{ display:grid; place-items:center; }
.search-result__icono.sin-imagen:not(.search-result__icono--trofeo){ background: var(--panel); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.9rem; }
.search-result__texto{ display:flex; flex-direction:column; min-width: 0; line-height: 1.25; }
.search-result__texto strong{ font-size: 0.88rem; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result__texto small{ font-size: 0.72rem; color: var(--text-muted); overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty{
  padding: 0.5rem 0.7rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* --- Navbar (arriba): menú en celular, buscador, redes y cuenta --- */
:root{ --navbar-h: 64px; }
html{ scroll-padding-top: calc(var(--navbar-h) + 0.75rem); }

.navbar{
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--navbar-h);
  display:flex;
  align-items:center;
  gap: 1rem;
  padding: 0 1.5rem;
  background: rgba(0,0,0,0.82);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar .search-wrap{
  flex: 1;
  max-width: 460px;
  margin: 0 auto;
}
.navbar__acciones{
  display:flex;
  align-items:center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.navbar__redes{
  display:flex;
  align-items:center;
  gap: 0.4rem;
  padding-right: 0.75rem;
  border-right: 1px solid var(--border);
}
.navbar__cuenta{ display:flex; align-items:center; }

.tagline{
  color: var(--text-muted);
  font-weight: 400;
  margin: 0;
  padding: 1.25rem 1.5rem 0.25rem;
  text-align: center;
  font-size: 1rem;
}

/* Redes: botones redondos solo con el ícono (el @ aparece al pasar el mouse) */
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.social-link:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 2px; }
.social-link--aqua:hover{ color: var(--aqua); border-color: var(--aqua); background: rgba(0,255,204,0.08); }
.social-link--purple:hover{ color: #C48FDA; border-color: #8E4BA6; background: rgba(103,41,125,0.2); }

/* Cuenta: sin sesión, botón "Iniciar sesión"; con sesión, avatar + menú */
.navbar__login{ padding: 0.5rem 0.95rem; font-size: 0.85rem; }
.cuenta-menu{ position: relative; }
.navbar .cuenta-chip{
  width: auto;
  max-width: 220px;
  margin: 0;
  padding: 0.25rem 0.6rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: var(--panel);
}
.navbar .cuenta-chip .chevron{ color: var(--text-muted); margin-left: 0.1rem; }
.cuenta-chip[aria-expanded="true"] .chevron{ transform: rotate(180deg); }
.cuenta-chip:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 2px; }
/* Estás en "Mi perfil": el chip queda marcado, como un ítem activo */
body.en-perfil .navbar .cuenta-chip{
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(0,255,204,0.12);
}
.cuenta-menu__panel{
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 70;
  width: 230px;
  padding: 0.4rem;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.6);
}
.cuenta-menu__panel[hidden]{ display:none; }
.cuenta-menu__cabecera{
  display:flex;
  flex-direction:column;
  padding: 0.5rem 0.65rem 0.6rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
  line-height: 1.25;
  min-width: 0;
}
.cuenta-menu__cabecera strong, .cuenta-menu__cabecera small{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-menu__cabecera strong{ font-size: 0.9rem; color: var(--text); }
.cuenta-menu__cabecera small{ font-size: 0.75rem; color: var(--text-muted); }
.cuenta-menu__item{
  display:flex;
  align-items:center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.86rem;
  text-align:left;
  cursor: pointer;
}
.cuenta-menu__item svg{ flex-shrink: 0; color: var(--text-muted); }
.cuenta-menu__item:hover, .cuenta-menu__item:focus-visible{ background: rgba(255,255,255,0.06); outline: none; }
.cuenta-menu__item:hover svg{ color: var(--aqua); }
.cuenta-menu__item--salir:hover, .cuenta-menu__item--salir:hover svg{ color: var(--danger); }
.cuenta-menu__notif{
  margin-left: auto;
  min-width: 20px;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--aqua);
  color: #06201C;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}
.cuenta-menu__notif[hidden]{ display:none; }

/* --- Botón de menú y cajón lateral (solo en celular) --- */
.menu-toggle{
  display:none;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 9px;
  padding: 0.45rem;
  cursor: pointer;
  line-height: 0;
}
.menu-toggle:hover{ border-color: var(--aqua); }
.sidebar-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 90;
}
.sidebar-backdrop[hidden]{ display:none; }

@media (max-width: 780px){
  .menu-toggle{ display:inline-flex; }
  .navbar{ padding: 0 0.9rem; gap: 0.6rem; }
  .navbar__acciones{ gap: 0.5rem; }
  .navbar__redes{ padding-right: 0.5rem; }
  .sidebar{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: min(290px, 85vw);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
  }
  .sidebar.is-open{ transform: none; }
  .home-hero__glow--aqua{ left: calc(50% - 130px); }
  .home-hero__glow--purple{ right: calc(50% - 130px); }
}
/* Pantallas angostas: el chip queda solo con el avatar y el login solo con el ícono */
@media (max-width: 640px){
  .navbar .cuenta-chip__texto, .navbar .cuenta-chip .chevron{ display:none; }
  .navbar .cuenta-chip{ padding: 0.2rem; }
  .navbar__login span{ display:none; }
  .navbar__login{ padding: 0.5rem; border-radius: 50%; }
}
@media (max-width: 420px){
  .social-link{ width: 32px; height: 32px; }
  .navbar__redes{ gap: 0.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .sidebar{ transition: none; }
}

.panel--wide{ grid-column: 1 / -1; }

.tab{
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab:hover{ border-color: var(--aqua); color: var(--text); }
.tab.active{
  background: var(--aqua);
  border-color: var(--aqua);
  color: #06201C;
}

.board{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.25rem;
}
.board--single{ grid-template-columns: 1fr; }
@media (max-width: 720px){
  .board{ grid-template-columns: 1fr; }
}

.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  overflow-x: auto;
}
.panel h2{
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--purple);
}

.subtabs{
  display:flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.subtabs--nested{ margin-top: -0.25rem; }

.club-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.club-chip{
  display:flex;
  align-items:center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem 0.35rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.club-chip img{ width: 20px; height: 20px; object-fit: contain; }
.club-chip:hover{ color: var(--text); }
.club-chip.active{ border-color: var(--aqua); color: var(--aqua); }

.club-cell{
  display:flex;
  align-items:center;
  gap: 0.55rem;
  white-space: nowrap;
}
.col-anio{
  width: 7.5rem;
  white-space: normal;
}
.table-shield{
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.club-cell__campeon{
  font-weight: 700;
  color: var(--text);
}
.club-cell__subcampeon{
  font-weight: 400;
  color: var(--text-muted);
}
.club-cell__pendiente{
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
}

.club-performance__header{
  display:flex;
  align-items:center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.club-shield{ width: 64px; height: 64px; object-fit: contain; flex-shrink:0; }
.club-titles{
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 2.75rem;
  color: var(--lib-gold);
  line-height: 1;
}
.club-performance__title{
  display:flex;
  flex-direction:column;
  gap: 0.15rem;
}
.club-performance__title strong{
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.club-performance__title span{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.club-performance__grid{
  display:flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.year-col{
  display:flex;
  flex-direction:column;
  gap: 0.35rem;
  min-width: 170px;
}
.year-row{
  display:flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: 'DM Sans', sans-serif;
}
.year-num{ font-size: 0.82rem; font-weight: 700; width: 2.6rem; flex-shrink:0; }
.year-num--dim{ color: var(--lib-gray); font-weight: 400; }
.year-num--active{ color: var(--text); }
.year-result{ font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; }
.res-campeon{ color: var(--lib-gold); }
.res-subcampeon{ color: var(--lib-subcampeon); }
.res-semi{ color: var(--lib-green); }
.res-cuartos{ color: var(--lib-cuartos); }
.res-octavos{ color: var(--lib-octavos); }
.res-otro{ color: var(--text); }

.live-dot{
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--lib-gray);
  border-top-color: var(--aqua);
  animation: live-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes live-spin{
  to{ transform: rotate(360deg); }
}

.criteria-block h3{
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--aqua);
  margin: 0 0 0.6rem;
}
.criteria-list{
  margin: 0;
  padding-left: 1.2rem;
  display:flex;
  flex-direction:column;
  gap: 0.5rem;
}
.criteria-list li{
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
}

.banner-shine-text{
  display: inline-block;
  background: linear-gradient(100deg,
    #14110A 0%, #14110A 35%,
    #8A6410 47%, #8A6410 53%,
    #14110A 65%, #14110A 100%);
  background-size: 250% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 4s linear infinite;
}

.champions-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  background: #F2D98A;
  color: #14110A;
  border-radius: 10px;
  padding: 0.85rem 1.25rem;
  margin-bottom: 1rem;
}
.champions-banner__title{
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  display:inline-flex;
  align-items:center;
  gap: 0.5rem;
}
.flag-icon{
  width: 22px;
  height: 15px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.champions-banner__editions{
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
}

.stats-group{ margin-bottom: 1.75rem; }
.stats-group:last-child{ margin-bottom: 0; }
.stats-group h3{
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-weight: 400;
  white-space: nowrap;
}
th, td{
  padding: 0.5rem 0.55rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th{
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: none;
}
tr:last-child td{ border-bottom: none; }
td.num, th.num{ text-align: center; }
.pos{ color: var(--text-muted); width: 1.6rem; }
.pts{ color: var(--aqua); font-weight: 700; }

.empty-state, .error-state{
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.9rem;
  padding: 1rem 0;
}
.error-state{ color: var(--danger); font-weight: 400; }

.image-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.image-card{
  margin:0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow:hidden;
}
.image-card img{
  width:100%;
  display:block;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.image-card figcaption{
  padding: 0.7rem 0.8rem;
  display:flex;
  flex-direction:column;
  gap: 0.2rem;
}
.image-card figcaption strong{ font-size: 0.9rem; font-weight: 700; color: var(--text); }
.image-card figcaption span{ font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
.image-card--missing{ border-style: dashed; }
.image-card--missing::before{
  content: "Imagen no encontrada — revisá la ruta en data.js";
  display:block;
  padding: 1.5rem 0.8rem 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--danger);
}

.site-footer{
  text-align:center;
  margin-top: 2.5rem;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.8rem;
}
.site-footer a{ color: var(--text-muted); }

/* Respeta a quienes desactivaron las animaciones en su sistema (accesibilidad) */
@media (prefers-reduced-motion: reduce){
  .baul-chest__lid{ transition: none; }
  .home-hero__title{
    animation: none;
    background: none;
    color: var(--text);
    -webkit-text-fill-color: var(--text);
  }
  .banner-shine-text{
    animation: none;
    background: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }
  .live-dot{ animation: none; }
}

/* =========================================================
   Ajustes responsive (celulares y tablets)
   ========================================================= */

/* Botón "volver arriba" (listas largas como la Champions) */
.btn-arriba{
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--aqua);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-arriba.visible{ opacity: 1; transform: none; pointer-events: auto; }
.btn-arriba:hover{ border-color: var(--aqua); }

/* Con el menú abierto en el celular, la página de atrás no se desplaza */
body.menu-abierto{ overflow: hidden; }

/* El modal de login/registro se puede desplazar si no entra en la pantalla */
.auth-modal__box{
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
}

/* Tablas: scroll horizontal suave con el dedo */
.panel{ -webkit-overflow-scrolling: touch; }

@media (max-width: 780px){
  /* Botones de la sidebar más fáciles de tocar */
  .nav-item, .nav-subitem, .nav-subgroup{ min-height: 40px; }
  .navbar .search-wrap{ max-width: none; }
  .tagline{ font-size: 0.9rem; }
  .foro-controles__filtro{ max-width: none; width: 100%; }
}

@media (max-width: 560px){
  .board{ padding: 0 0.75rem; }
  .panel{ padding: 0.9rem; }
  .tagline{ padding-left: 0.9rem; padding-right: 0.9rem; }
  .home-grid, .home-intro{ padding-left: 0.9rem; padding-right: 0.9rem; }
  .home-hero__title{ font-size: 1.2rem; padding: 0 0.9rem; }
  .home-hero__logo{ width: 76px; height: 76px; }

  /* Tablas más compactas: los nombres largos pasan a dos líneas en vez de
     obligar a desplazarse de costado */
  table{ font-size: 0.8rem; }
  th, td{ padding: 0.45rem 0.35rem; }
  .col-anio{ width: 4.6rem; }
  .club-cell{ white-space: normal; gap: 0.4rem; }
  .club-cell span, .club-cell strong{ overflow-wrap: anywhere; }
  .table-shield{ width: 20px; height: 20px; flex-shrink: 0; }

  .champions-banner{ padding: 0.75rem 0.9rem; }
  .champions-banner__title{ font-size: 0.95rem; }
  .champions-banner__editions{ font-size: 0.78rem; }

  .auth-modal{ padding: 0.75rem; }
  .auth-modal__box{ padding: 1.4rem 1.1rem 1.2rem; max-height: calc(100dvh - 1.5rem); }
  .foro-comentario__acciones{ flex-wrap: wrap; }
}

/* iPhone: con letra menor a 16px, Safari hace zoom al tocar un campo */
@media (max-width: 780px) and (hover: none){
  .search-input, .auth-input, textarea, select{ font-size: 16px; }
}

@media (prefers-reduced-motion: reduce){
  .btn-arriba{ transition: none; }
}

/* =========================================================
   Palmarés visual, décadas, resaltado y compartir
   ========================================================= */
:root{
  --oro: #E8B923;
  --celeste: #00C8FC;
  --plata: #C9D1D9;
  --bronce: #CD7F32;
}

/* Animación de entrada (la usan varias secciones) */
@keyframes podio-sube{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* --- Barras del palmarés --- */
.col-barra{ width: 30%; min-width: 80px; }
.leyendas{ display:flex; justify-content:flex-end; gap: 0.9rem; margin: 0 0 0.3rem; color: var(--text-muted); }
.palmares-barra{
  display:flex;
  height: 8px;
  border-radius: 999px;
  background: var(--panel-alt);
  overflow:hidden;
}
.palmares-barra span{ height: 100%; transform-origin: left; animation: barra-crece 0.7s ease-out both; }
.palmares-barra__t{ background: var(--oro); }
.palmares-barra__s{ background: var(--celeste); opacity: 0.85; }
@keyframes barra-crece{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.leyenda{ font-size: 0.68rem; font-weight: 700; display:inline-flex; align-items:center; gap: 0.25rem; }
.leyenda::before{ content:""; width: 8px; height: 8px; border-radius: 2px; }
.leyenda--t::before{ background: var(--oro); }
.leyenda--s::before{ background: var(--celeste); }

/* --- Separadores por década --- */
.fila-decada td{
  padding: 0.9rem 0.55rem 0.35rem;
  border-bottom: none;
}
.fila-decada span{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-seccion, var(--aqua));
  display:flex;
  align-items:center;
  gap: 0.6rem;
}
.fila-decada span::after{
  content:"";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-seccion, var(--aqua)) 45%, transparent), transparent);
}

/* --- Resaltar un club en la lista --- */
.club-hl{
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px dashed transparent;
}
.club-hl.club-cell__campeon{ font-weight: 700; }
.club-hl:hover, .club-hl:focus-visible{ border-bottom-color: currentColor; outline: none; }
tbody tr{ transition: opacity 0.2s ease, background-color 0.2s ease; }
.fila-atenuada{ opacity: 0.38; }
.fila-hl{ background: rgba(0,200,252,0.08); }
.fila-hl--gano{ background: rgba(232,185,35,0.12); }
.fila-hl td:first-child{ box-shadow: inset 3px 0 0 var(--celeste); }
.fila-hl--gano td:first-child{ box-shadow: inset 3px 0 0 var(--oro); }
.hl-resumen{
  position: sticky;
  top: calc(var(--navbar-h) + 0.5rem);
  z-index: 5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 0.75rem;
  margin: -0.25rem 0 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.hl-resumen[hidden]{ display:none; }
.hl-resumen__t{ color: var(--oro); font-weight: 700; }
.hl-resumen__s{ color: var(--celeste); font-weight: 700; }
.hl-resumen__cerrar{
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 1rem; padding: 0.2rem 0.4rem;
}
.hl-resumen__cerrar:hover{ color: var(--text); }

/* --- Botón compartir y aviso --- */
.champions-banner__acciones{ display:inline-flex; align-items:center; gap: 0.6rem; }
.btn-compartir{
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.btn-compartir:hover{ opacity: 1; transform: scale(1.08); }
.aviso-flotante{
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  background: var(--aqua);
  color: #06201C;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.aviso-flotante.visible{ opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px){
  .col-barra, .leyendas{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .palmares-barra span{ animation: none; }
  tbody tr, .aviso-flotante{ transition: none; }
}


/* =========================================================
   Desempeños: buscador, resumen, trayectoria, fases y comparador
   ========================================================= */
.lib-buscador{ position: relative; max-width: 360px; margin-bottom: 1rem; }
.lib-buscador svg{ position:absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events:none; }
.lib-buscador input{ width: 100%; box-sizing: border-box; padding-left: 2.2rem; border-radius: 999px; }

.resumen-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0.6rem;
  margin: 1.1rem 0 0.6rem;
}
.resumen-card{
  display:flex;
  flex-direction:column;
  gap: 0.15rem;
  padding: 0.75rem 0.85rem;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  animation: podio-sube 0.45s ease both;
}
.resumen-card:nth-child(2){ animation-delay: 0.04s; }
.resumen-card:nth-child(3){ animation-delay: 0.08s; }
.resumen-card:nth-child(4){ animation-delay: 0.12s; }
.resumen-card:nth-child(5){ animation-delay: 0.16s; }
.resumen-card:nth-child(6){ animation-delay: 0.2s; }
.resumen-card__valor{ font-size: 1.45rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.resumen-card__titulo{ font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.resumen-card__sub{ font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.mejor-resultado{ font-size: 0.85rem; color: var(--text-muted); margin: 0 0 1rem; }

.franja__titulo{ font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0.4rem 0 0.4rem; }
.franja{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  height: 30px;
}
.franja__celda{
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.15s ease, opacity 0.2s ease;
  cursor: help;
}
.franja__celda.res-otro{ opacity: 0.45; }
.franja__celda--vacia{ background: #262626; }
.franja__celda:hover{ transform: scaleY(1.25); opacity: 1; }
.franja:has(.franja__celda--hl) .franja__celda:not(.franja__celda--hl){ opacity: 0.22; }
.franja__celda--hl{ opacity: 1 !important; transform: scaleY(1.2); }
.franja__ejes{ display:flex; justify-content:space-between; font-size: 0.68rem; color: var(--text-muted); margin: 0.25rem 0 1rem; }

.leyenda-fases{ display:flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.fase-chip{
  display:inline-flex; align-items:center; gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fase-chip strong{ color: var(--text); }
.fase-chip:hover{ color: var(--text); border-color: var(--text-muted); }
.fase-chip.active{ border-color: var(--aqua); color: var(--text); background: rgba(0,255,204,0.08); }
.fase-chip__punto{ width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

.grid--filtrado .year-row{ opacity: 0.32; transition: opacity 0.2s ease; }
.grid--filtrado .year-row--hl{ opacity: 1; }

.comparador{
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.comparador__label{ display:flex; align-items:center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); font-weight: 700; margin-bottom: 1rem; }
.comparador__select{ max-width: 260px; width: auto; }
.comparador__tabla{ max-width: 520px; margin: 0 auto 1rem; }
.comparador__tabla td{ font-size: 1rem; font-weight: 700; }
.comparador__tabla td.comp-etiqueta{ font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.comparador__tabla td.comp-gana{ color: var(--aqua); }
.comp-club{ display:inline-flex; align-items:center; gap: 0.4rem; color: var(--text); font-size: 0.8rem; }
.comp-club img{ width: 22px; height: 22px; object-fit: contain; }

@media (max-width: 560px){
  .resumen-cards{ grid-template-columns: repeat(2, 1fr); }
  .franja{ height: 24px; gap: 1px; }
  .comparador__select{ max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .resumen-card{ animation: none; }
  .franja__celda{ transition: none; }
}

/* --- Desempeños: pestañas de vista, ranking, décadas, países --- */
.vista-tabs{
  display:inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 999px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.vista-tab{
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.vista-tab.active{ background: var(--aqua); color: #06201C; }
.vista-tab:not(.active):hover{ color: var(--text); }

.subtab__cant{ font-size: 0.68rem; font-weight: 400; opacity: 0.7; margin-left: 0.15rem; }
.subtab--vacio{ opacity: 0.55; }

.club-performance__header{ position: relative; }
.btn-compartir--header{ margin-left: auto; color: var(--text-muted); }
.btn-compartir--header:hover{ color: var(--aqua); }

.decadas{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.decada-card{
  display:flex;
  flex-direction:column;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}
.decada-card--vacia{ opacity: 0.6; }
.decada-card__nombre{ font-weight: 700; font-size: 0.9rem; color: var(--text); }
.decada-card__barra{ height: 4px; border-radius: 999px; background: #262626; overflow:hidden; }
.decada-card__barra span{ display:block; height: 100%; background: var(--aqua); }
.decada-card__jugadas{ font-size: 0.7rem; color: var(--text-muted); }
.decada-card__mejor{ font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }

.ranking-ayuda{ font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.75rem; }
.orden-btn{
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.orden-btn:hover, .orden-btn.active{ color: var(--aqua); }
.ranking-fila{ cursor: pointer; transition: background-color 0.15s ease; }
.ranking-fila:hover, .ranking-fila:focus-visible{ background: var(--panel-alt); outline: none; }
.ranking-pais{ font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.ranking-nombre{ display:flex; flex-direction:column; line-height: 1.2; }
.ranking-tabla .club-cell{ white-space: normal; }
.ranking-tabla th, .ranking-tabla td{ padding-left: 0.4rem; padding-right: 0.4rem; }

@media (max-width: 560px){
  .decadas{ grid-template-columns: repeat(2, 1fr); }
  .ranking-tabla .col-racha{ display:none; }
}


/* =========================================================
   Portada de Desempeños
   ========================================================= */
.des-inicio{ display:flex; flex-direction:column; gap: 1rem; }
.des-inicio__hero{
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 2.25rem 1.25rem 1.75rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0,255,204,0.14), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(103,41,125,0.35), transparent 60%),
    var(--panel);
}
.des-inicio__franja{
  position:absolute;
  inset: auto 0 0 0;
  height: 70px;
  display:flex;
  align-items:flex-end;
  gap: 3px;
  padding: 0 0.75rem;
  opacity: 0.22;
  pointer-events:none;
}
.des-inicio__franja span{
  flex: 1;
  border-radius: 2px 2px 0 0;
  height: 30%;
  animation: franja-ola 2.8s ease-in-out infinite;
}
.des-inicio__franja span:nth-child(5n+1){ background: var(--lib-gold); }
.des-inicio__franja span:nth-child(5n+2){ background: var(--lib-subcampeon); }
.des-inicio__franja span:nth-child(5n+3){ background: var(--lib-green); }
.des-inicio__franja span:nth-child(5n+4){ background: var(--lib-cuartos); }
.des-inicio__franja span:nth-child(5n+5){ background: var(--text); }
@keyframes franja-ola{
  0%, 100%{ height: 20%; }
  50%{ height: 95%; }
}
.des-inicio__titulo{
  position: relative;
  margin: 0 0 0.4rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--text) 30%, var(--aqua) 50%, var(--purple) 60%, var(--text) 75%);
  background-size: 250% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 5s linear infinite;
}
.des-inicio__texto{ position: relative; max-width: 520px; margin: 0 auto 1.25rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.des-inicio__buscador{ position: relative; max-width: 440px; margin: 0 auto; }
.des-inicio__buscador svg{ position:absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--aqua); pointer-events:none; }
.des-inicio__buscador input{
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem 0.8rem 2.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  background: rgba(0,0,0,0.55);
  border-color: rgba(0,255,204,0.35);
}
.des-inicio__resultados{ position: relative; justify-content:center; margin: 0.9rem 0 0; }
.des-inicio__resultados:empty{ display:none; }
.des-inicio__resultados small{ color: var(--text-muted); font-weight: 400; }
.des-inicio__subtitulo{ font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0.75rem 0 0; }

.tu-club{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.55rem 1rem 0.55rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--aqua);
  background: rgba(0,255,204,0.08);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-align:left;
}
.tu-club img{ width: 32px; height: 32px; object-fit: contain; }
.tu-club span{ display:flex; flex-direction:column; line-height: 1.15; }
.tu-club small{ font-size: 0.68rem; color: var(--aqua); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.tu-club .tu-club__cta{ font-size: 0.8rem; color: var(--text-muted); }
.tu-club:hover{ background: rgba(0,255,204,0.15); }

.comp-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0.9rem; }
.comp-card{
  display:flex;
  flex-direction:column;
  gap: 0.5rem;
  text-align:left;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--acento);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 12%, var(--panel)), var(--panel) 55%);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.comp-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.45); border-color: var(--acento); }
.comp-card__nombre{ font-size: 1.15rem; font-weight: 700; }
.comp-card__meta{ font-size: 0.8rem; color: var(--text-muted); }
.comp-card__top{ display:flex; flex-direction:column; gap: 0.35rem; margin: 0.3rem 0; }
.comp-card__top-item{ display:flex; align-items:center; gap: 0.5rem; font-size: 0.85rem; }
.comp-card__top-item img{ width: 22px; height: 22px; object-fit: contain; }
.comp-card__top-item span:not(.comp-card__pos){ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-card__top-item strong{ color: var(--lib-gold); }
.comp-card__pos{
  width: 20px; height: 20px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 0.7rem; font-weight: 700;
  background: var(--panel-alt); color: var(--text-muted);
}
.comp-card__top-item:first-child .comp-card__pos{ background: var(--lib-gold); color: #111; }
.comp-card__cta{ margin-top: auto; font-size: 0.82rem; font-weight: 700; color: var(--acento); }

.destacados{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0.75rem; }
.destacado{
  display:flex;
  flex-direction:column;
  gap: 0.25rem;
  text-align:left;
  padding: 0.95rem 1rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.destacado::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--acento);
}
.destacado:hover{ border-color: var(--acento); transform: translateY(-2px); }
.destacado__titulo{ font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.destacado__valor{ font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--acento); }
.destacado__club{ display:flex; align-items:center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; }
.destacado__club img{ width: 22px; height: 22px; object-fit: contain; }
.destacado__detalle{ font-size: 0.72rem; color: var(--text-muted); }

/* --- Finales jugadas del club --- */
.finales{ display:flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.25rem; }
.final-chip{
  display:flex; align-items:center; gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lib-subcampeon);
  font-size: 0.8rem;
}
.final-chip--gano{ border-left-color: var(--lib-gold); }
.final-chip__anio{ font-weight: 700; color: var(--text); }
.final-chip__res{ font-weight: 700; font-size: 0.72rem; color: var(--lib-subcampeon); }
.final-chip--gano .final-chip__res{ color: var(--lib-gold); }
.final-chip__rival{ display:inline-flex; align-items:center; gap: 0.3rem; color: var(--text-muted); }
.final-chip__rival img{ width: 18px; height: 18px; object-fit: contain; }

@media (max-width: 560px){
  .des-inicio__hero{ padding: 1.75rem 0.9rem 1.5rem; }
  .destacado__valor{ font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .des-inicio__franja span, .des-inicio__titulo{ animation: none; }
  .comp-card, .destacado{ transition: none; }
}

/* =========================================================
   Inicio de sesión: contraseña, recordarme, cuenta y perfil
   ========================================================= */
.pass-wrap{ position: relative; display:block; }
.pass-wrap .auth-input{ width: 100%; box-sizing: border-box; padding-right: 2.6rem; }
.pass-toggle{
  position:absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted);
  padding: 0.3rem; cursor: pointer; line-height: 0; border-radius: 6px;
}
.pass-toggle:hover, .pass-toggle.activo{ color: var(--aqua); }

.pass-fuerza{ display:flex; align-items:center; gap: 0.6rem; margin-top: 0.4rem; }
.pass-fuerza[hidden]{ display:none; }
.pass-fuerza__barra{ flex: 1; height: 5px; border-radius: 999px; background: var(--panel-alt); overflow:hidden; }
.pass-fuerza__barra span{ display:block; height: 100%; width: 0; border-radius: inherit; transition: width 0.25s ease, background-color 0.25s ease; }
.pass-fuerza__texto{ font-size: 0.72rem; font-weight: 700; min-width: 5.5rem; text-align: right; color: var(--text-muted); }
.pass-fuerza[data-nivel="0"] .pass-fuerza__barra span{ width: 12%; background: var(--danger); }
.pass-fuerza[data-nivel="1"] .pass-fuerza__barra span{ width: 30%; background: var(--danger); }
.pass-fuerza[data-nivel="2"] .pass-fuerza__barra span{ width: 55%; background: var(--lib-cuartos); }
.pass-fuerza[data-nivel="3"] .pass-fuerza__barra span{ width: 80%; background: var(--lib-green); }
.pass-fuerza[data-nivel="4"] .pass-fuerza__barra span{ width: 100%; background: var(--aqua); }

.auth-recordar{
  display:flex; align-items:center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--text-muted);
  margin: -0.2rem 0 0.9rem; cursor: pointer;
}
.auth-recordar[hidden]{ display:none; }
.auth-recordar input{ accent-color: var(--aqua); width: 16px; height: 16px; }
.auth-modal__error--ok{ color: var(--aqua); }

.cuenta-chip{
  display:flex; align-items:center; gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  text-align:left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cuenta-chip:hover{ border-color: var(--aqua); }
.cuenta-chip__avatar{
  position: relative;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aqua), var(--purple));
  color: #06201C; font-weight: 700;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cuenta-chip__avatar img{ position:absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; background: var(--panel); border-radius: 50%; }
.cuenta-chip__texto{ display:flex; flex-direction:column; min-width: 0; line-height: 1.2; }
.cuenta-chip__texto strong, .cuenta-chip__texto small{ white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.cuenta-chip__texto strong{ font-size: 0.85rem; }
.cuenta-chip__texto small{ font-size: 0.72rem; color: var(--text-muted); }

.aviso-verificacion{
  display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 0.6rem;
  padding: 0.75rem 0.9rem; margin-bottom: 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(218,149,79,0.5);
  background: rgba(218,149,79,0.1);
  font-size: 0.85rem; color: var(--text);
}
.perfil-seguridad{
  display:flex; align-items:center; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 0.6rem; padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem; color: var(--text-muted); font-weight: 700;
}
.perfil-seguridad__msg{ width: 100%; margin: 0; font-weight: 400; color: var(--aqua); font-size: 0.8rem; }

/* =========================================================
   Listas de campeones: récords, orden y dominio por país
   ========================================================= */
.records{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0.55rem;
  margin: 0 0 1rem;
}
.record{
  display:flex; flex-direction:column; gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-top: 3px solid var(--color-seccion, var(--aqua));
  min-width: 0;
}
.record__titulo{ font-size: 0.7rem; font-weight: 700; color: var(--text-muted); }
.record__valor{ font-size: 0.95rem; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.record__detalle{ font-size: 0.72rem; color: var(--color-seccion, var(--aqua)); font-weight: 700; }

.orden-lista{
  display:inline-flex; gap: 3px; padding: 3px;
  border-radius: 999px; background: var(--panel-alt); border: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.orden-lista__btn{
  padding: 0.32rem 0.8rem; border-radius: 999px; border: none;
  background: transparent; color: var(--text-muted);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.75rem; cursor: pointer;
}
.orden-lista__btn.active{ background: var(--color-seccion, var(--aqua)); color: #111; }
.orden-lista__btn:not(.active):hover{ color: var(--text); }

.dominio{ margin-top: 1.5rem; }
.franja--dominio{ height: 26px; }
.franja--dominio .franja__celda.res-otro{ opacity: 1; }
.dominio__leyenda{ display:flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.78rem; color: var(--text-muted); }
.dominio__item{ display:inline-flex; align-items:center; gap: 0.35rem; }
.dominio__item strong{ color: var(--text); }
.dominio__punto{ width: 10px; height: 10px; border-radius: 3px; }
.dominio__item .flag-icon{ width: 16px; height: 11px; }

@media (max-width: 560px){
  .orden-lista__btn{ padding: 0.3rem 0.6rem; font-size: 0.7rem; }
}

/* Botón principal/secundario del sitio. Estaba usado en el HTML (login,
   cerrar sesión, guardar perfil) pero nunca se había definido su estilo, así
   que se veía como un botón gris por defecto del navegador. */
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--aqua);
  background: transparent;
  color: var(--aqua);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn-ghost:hover{ background: var(--aqua); color: #06201C; }
.btn-ghost:active{ transform: scale(0.98); }
.btn-ghost:disabled{ opacity: 0.55; cursor: wait; }
.btn-ghost:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 2px; }
.auth-modal__submit{ background: var(--aqua); color: #06201C; padding: 0.7rem 1rem; }
.auth-modal__submit:hover{ filter: brightness(1.08); }

.club-picker .auth-input{ width: 100%; box-sizing: border-box; }

/* Cualquier elemento con el atributo "hidden" se oculta siempre, aunque su
   clase le ponga display:flex (antes algunos campos del login se veían igual). */
[hidden]{ display: none !important; }

/* =========================================================
   Mi perfil
   ========================================================= */
#statsBoard > .perfil-hero, #statsBoard > .perfil-grid, #statsBoard > .perfil-peligro{ margin-bottom: 1.25rem; }
.perfil-hero{
  display:flex;
  align-items:center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(0,255,204,0.16), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(103,41,125,0.4), transparent 60%),
    var(--panel);
}
.perfil-hero__avatar{
  position: relative;
  width: 88px; height: 88px; flex-shrink: 0;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--aqua), var(--purple));
  color: #06201C; font-size: 2rem; font-weight: 700;
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px rgba(0,255,204,0.5);
  overflow:hidden;
}
.perfil-hero__avatar img{ position:absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; background: var(--panel); border-radius: 50%; padding: 6px; box-sizing: border-box; }
.perfil-hero__info{ min-width: 0; }
.perfil-hero__nombre{ display:flex; align-items:center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.3rem; font-size: 1.5rem; color: var(--text); overflow-wrap: anywhere; }
.perfil-badge{ font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
.perfil-badge--admin{ background: var(--purple); color: #fff; }
.perfil-hero__linea{ display:flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0 0 0.4rem; font-weight: 700; color: var(--text); }
.perfil-hero__pais{ display:inline-flex; align-items:center; gap: 0.35rem; color: var(--text-muted); }
.perfil-hero__falta{ color: var(--text-muted); font-weight: 400; }
.perfil-hero__bio{ margin: 0 0 0.4rem; font-style: italic; color: var(--text); font-size: 0.9rem; }
.perfil-hero__meta{ margin: 0; font-size: 0.78rem; color: var(--text-muted); }

.perfil-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 1.25rem; align-items:start; }
.perfil-columna{ display:flex; flex-direction:column; gap: 1.25rem; }
.perfil-card__titulo{ margin: 0 0 1rem; font-size: 1rem; color: var(--text); padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.perfil-grid .perfil-form{ max-width: none; }
.perfil-form .auth-input{ width: 100%; box-sizing: border-box; }
.perfil-bio{ resize: vertical; min-height: 3.2rem; font-family: 'DM Sans', sans-serif; }
.perfil-contador{ float: right; font-weight: 400; color: var(--text-muted); font-size: 0.72rem; }
#perfilGuardar:disabled{ background: var(--panel-alt); color: var(--text-muted); border-color: var(--border); cursor: default; filter: none; }

.perfil-dato{ display:flex; align-items:baseline; gap: 0.5rem; margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--text-muted); }
.perfil-dato strong{ font-size: 1.8rem; color: var(--aqua); }
.perfil-titulos{ list-style: none; margin: 0 0 0.9rem; padding: 0; display:flex; flex-direction:column; gap: 0.35rem; }
.perfil-titulos__item{
  display:flex; justify-content:space-between; gap: 0.75rem; width: 100%;
  padding: 0.55rem 0.7rem; border-radius: 8px;
  background: var(--panel-alt); border: 1px solid var(--border);
  color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 0.82rem; text-align:left; cursor: pointer;
}
.perfil-titulos__item:hover{ border-color: var(--aqua); }
.perfil-titulos__item span:last-child{ color: var(--text-muted); white-space: nowrap; }
.perfil-cta{ width: 100%; }

.perfil-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.9rem; }
.perfil-stats div{ display:flex; flex-direction:column; padding: 0.7rem; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border); }
.perfil-stats strong{ font-size: 1.5rem; color: var(--text); }
.perfil-stats span{ font-size: 0.75rem; color: var(--text-muted); }
.perfil-recientes{ list-style: none; margin: 0 0 0.9rem; padding: 0; display:flex; flex-direction:column; gap: 0.5rem; }
.perfil-recientes li{ padding: 0.55rem 0.7rem; border-left: 3px solid var(--aqua); background: var(--panel-alt); border-radius: 0 8px 8px 0; }
.perfil-recientes p{ margin: 0 0 0.2rem; font-size: 0.85rem; color: var(--text); overflow-wrap: anywhere; }
.perfil-recientes span{ font-size: 0.72rem; color: var(--text-muted); }

.perfil-seguridad{ margin: 0; padding: 0; border: none; }
.perfil-seguridad__nota{ font-weight: 400; font-size: 0.82rem; }

.perfil-peligro{ border-color: rgba(224,87,79,0.35); }
.perfil-peligro summary{ cursor: pointer; color: var(--danger); font-weight: 700; font-size: 0.9rem; }
.perfil-peligro p{ font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.perfil-peligro .auth-field{ max-width: 360px; }
.perfil-peligro .auth-input{ width: 100%; box-sizing: border-box; }
.btn-peligro{
  margin-top: 0.4rem;
  padding: 0.6rem 1rem; border-radius: 999px;
  border: 1px solid var(--danger); background: transparent; color: var(--danger);
  font-family: 'DM Sans', sans-serif; font-weight: 700; cursor: pointer;
}
.btn-peligro:not(:disabled):hover{ background: var(--danger); color: #fff; }
.btn-peligro:disabled{ opacity: 0.45; cursor: not-allowed; }

@media (max-width: 780px){
  .perfil-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .perfil-hero{ flex-direction: column; text-align: center; padding: 1.25rem 1rem; }
  .perfil-hero__nombre, .perfil-hero__linea{ justify-content:center; }
  .perfil-hero__avatar{ width: 76px; height: 76px; }
  .perfil-titulos__item{ flex-direction: column; gap: 0.15rem; }
}

/* Celulares: las tablas dejan que el texto pase a dos líneas (encabezados
   largos como "Subcampeonatos", nombres de competencias) en vez de obligar a
   desplazarse de costado. Los números y años siguen en una sola línea. */
@media (max-width: 560px){
  table, th{ white-space: normal; }
  td.num, th.num, .col-anio{ white-space: nowrap; }
  th{ font-size: 0.68rem; line-height: 1.2; vertical-align: bottom; }
  th.num{ white-space: normal; }
}
.txt-corto{ display:none; }
@media (max-width: 560px){
  .txt-largo{ display:none; }
  .txt-corto{ display:inline; }
  .club-cell .club-hl{ white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 400px){
  .board{ padding: 0 0.5rem; }
  .panel{ padding: 0.75rem; }
  table{ font-size: 0.76rem; }
  th, td{ padding: 0.4rem 0.25rem; }
  .col-anio{ width: 3.9rem; }
}

/* --- Mi perfil: progreso, insignias y país --- */
#statsBoard > .perfil-progreso{ margin-bottom: 1.25rem; }
.perfil-progreso__cabecera{ display:grid; grid-template-columns: minmax(200px, 1fr) 1.4fr; gap: 1rem 1.5rem; align-items:center; margin-bottom: 1.1rem; }
.perfil-card__titulo--sin-linea{ border: none; padding: 0; margin-bottom: 0.5rem; }
.perfil-progreso__barra{ height: 10px; border-radius: 999px; background: var(--panel-alt); overflow:hidden; }
.perfil-progreso__barra span{ display:block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), var(--purple)); transition: width 0.6s ease; }
.perfil-progreso__pasos{ list-style: none; margin: 0; padding: 0; display:flex; flex-wrap: wrap; gap: 0.4rem; }
.perfil-paso{
  padding: 0.35rem 0.75rem; border-radius: 999px;
  border: 1px dashed rgba(0,255,204,0.5); background: transparent; color: var(--aqua);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.75rem; cursor: pointer;
}
.perfil-paso:hover:not(:disabled){ background: rgba(0,255,204,0.1); }
.perfil-paso:disabled{ color: var(--text-muted); border-color: var(--border); cursor: default; }
.perfil-progreso__listo{ margin: 0; color: var(--aqua); font-weight: 700; font-size: 0.9rem; }

.insignias{ display:grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.55rem; }
.insignia{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap: 0.15rem;
  padding: 0.75rem 0.5rem; border-radius: 12px;
  background: var(--panel-alt); border: 1px solid var(--border);
  opacity: 0.55; filter: grayscale(1);
}
.insignia--ok{
  opacity: 1; filter: none;
  border-color: rgba(0,255,204,0.45);
  background: linear-gradient(180deg, rgba(0,255,204,0.1), var(--panel-alt));
}
.insignia__icono{ font-size: 1.6rem; line-height: 1.2; }
.insignia__nombre{ font-size: 0.78rem; font-weight: 700; color: var(--text); }
.insignia__desc{ font-size: 0.68rem; color: var(--text-muted); line-height: 1.25; }

.perfil-dato--pais{ align-items:center; }
.perfil-dato--pais .flag-icon{ width: 26px; height: 18px; }
.perfil-dato--pais strong{ font-size: 1.4rem; color: var(--text); }

@media (max-width: 780px){
  .perfil-progreso__cabecera{ grid-template-columns: 1fr; }
}
@media (max-width: 400px){
  .insignias{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Portada: números, campeones vigentes, dato del día, trivia, recientes
   ========================================================= */
.inicio-extras{ max-width: 960px; margin: 0 auto 2rem; padding: 0 1.5rem; display:flex; flex-direction:column; gap: 1.5rem; }
.inicio-titulo{ display:flex; align-items:center; gap: 0.55rem; font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0 0 0.75rem; }
.inicio-titulo__punto{ width: 9px; height: 9px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); animation: latido 2s ease-in-out infinite; }
.inicio-titulo__punto--morado{ background: #A45BC0; box-shadow: 0 0 10px #A45BC0; }
.inicio-titulo__punto--dorado{ background: var(--lib-gold); box-shadow: 0 0 10px var(--lib-gold); }
@keyframes latido{ 0%,100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.4); opacity: 0.6; } }
.inicio-titulo__accion{ margin-left: auto; background: none; border: none; color: var(--text-muted); font: inherit; font-size: 0.75rem; font-weight: 400; cursor: pointer; }
.inicio-titulo__accion:hover{ color: var(--text); }

/* 1) Números */
.inicio-numeros{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.inicio-numero{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap: 0.2rem;
  padding: 1rem 0.5rem; border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,255,204,0.07), var(--panel));
  border: 1px solid var(--border);
}
.inicio-numero strong{
  font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1; font-weight: 700;
  background: linear-gradient(135deg, var(--aqua), #A45BC0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.inicio-numero span{ font-size: 0.75rem; color: var(--text-muted); line-height: 1.25; }

/* 2) Campeones vigentes: cinta en movimiento (se frena al pasar el mouse) */
.vigentes{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.vigentes__pista{ display:flex; gap: 0.6rem; width: max-content; animation: cinta 40s linear infinite; }
.vigentes:hover .vigentes__pista, .vigentes:focus-within .vigentes__pista{ animation-play-state: paused; }
.vigentes__copia{ display:flex; gap: 0.6rem; }
@keyframes cinta{ from{ transform: translateX(0); } to{ transform: translateX(calc(-50% - 0.3rem)); } }
.vigente{
  display:flex; flex-direction:column; gap: 0.35rem; min-width: 200px;
  padding: 0.7rem 0.9rem; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border); border-top: 4px solid var(--c);
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.vigente:hover{ transform: translateY(-3px); border-color: var(--c); }
.vigente__lista{ font-size: 0.72rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.vigente__club{ display:flex; align-items:center; gap: 0.5rem; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.vigente__escudo{ width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }

/* 3) y 4) Dato del día + trivia, lado a lado */
.inicio-dos{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; }
.inicio-dos .inicio-bloque{ display:flex; flex-direction:column; }
.dato, .trivia{
  flex: 1; display:flex; flex-direction:column; gap: 0.9rem;
  padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid var(--border);
}
.dato{ background: radial-gradient(ellipse at 100% 0%, rgba(103,41,125,0.35), transparent 65%), var(--panel); }
.dato__cuerpo{ display:flex; align-items:flex-start; gap: 0.9rem; flex: 1; }
.dato__cuerpo--entra{ animation: podio-sube 0.4s ease both; }
.dato__escudo{ width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.dato__comillas{ font-size: 3rem; line-height: 0.8; color: #A45BC0; font-weight: 700; }
.dato__texto{ margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--text); font-weight: 700; }
.dato__acciones{ display:flex; align-items:center; justify-content:space-between; gap: 0.6rem; flex-wrap: wrap; }
.dato__btn{ padding: 0.45rem 0.9rem; font-size: 0.8rem; }
.dato__otro{ background: none; border: none; color: var(--aqua); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.8rem; cursor: pointer; padding: 0.3rem 0; }
.dato__otro:hover{ text-decoration: underline; }

.trivia{ background: radial-gradient(ellipse at 0% 0%, rgba(232,185,35,0.14), transparent 60%), var(--panel); }
.trivia__cabecera{ display:flex; justify-content:space-between; font-size: 0.78rem; color: var(--text-muted); }
.trivia__cabecera strong{ color: var(--text); }
.trivia__pregunta{ margin: 0; font-size: 1rem; color: var(--text); }
.trivia__pregunta strong{ color: var(--lib-gold); }
.trivia__opciones{ display:grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.trivia__opcion{
  display:flex; align-items:center; gap: 0.5rem; min-width: 0;
  padding: 0.6rem 0.7rem; border-radius: 10px;
  background: var(--panel-alt); border: 1px solid var(--border);
  color: var(--text); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.82rem; text-align:left; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.trivia__opcion span{ overflow-wrap: anywhere; }
.trivia__opcion:hover:not(:disabled){ border-color: var(--lib-gold); }
.trivia__opcion:disabled{ cursor: default; opacity: 0.6; }
.trivia__opcion--ok{ border-color: var(--lib-green) !important; background: rgba(140,230,0,0.14) !important; opacity: 1 !important; }
.trivia__opcion--mal{ border-color: var(--danger) !important; background: rgba(224,87,79,0.14) !important; opacity: 1 !important; }
.trivia__escudo{ width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.trivia__resultado{ margin: 0; font-size: 0.85rem; display:flex; flex-wrap: wrap; align-items:center; justify-content:space-between; gap: 0.4rem; min-height: 1.2rem; }
.trivia__resultado--ok{ color: var(--lib-green); }
.trivia__resultado--mal{ color: var(--text-muted); }

/* 5) Seguí donde quedaste */
.recientes{ display:flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: thin; }
.reciente{
  flex: 0 0 auto; display:flex; flex-direction:column; gap: 0.15rem; max-width: 240px;
  padding: 0.65rem 0.9rem; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--aqua);
  color: var(--text); text-decoration: none;
}
.reciente:hover{ border-color: var(--aqua); }
.reciente strong{ font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reciente span{ font-size: 0.7rem; color: var(--text-muted); }

@media (max-width: 780px){
  .inicio-numeros{ grid-template-columns: repeat(2, 1fr); }
  .inicio-dos{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .inicio-extras{ padding: 0 0.9rem; }
  .trivia__opciones{ grid-template-columns: 1fr; }
  .dato__texto{ font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce){
  .vigentes__pista{ animation: none; }
  .vigentes{ overflow-x: auto; }
  .vigentes__copia{ display:none; }
  .inicio-titulo__punto, .dato__cuerpo--entra{ animation: none; }
}

/* =========================================================
   Hinchas de SAG
   ========================================================= */
#statsBoard > .hinchas-hero{ margin-bottom: 1.25rem; }
.hinchas-hero{
  display:grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; align-items: stretch;
  padding: 1.25rem; border-radius: 14px; border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 0% 100%, rgba(0,255,204,0.15), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(103,41,125,0.4), transparent 60%),
    var(--panel);
}
.hinchas-hero__numeros{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.hinchas-hero__numeros div{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 0.8rem 0.4rem; border-radius: 10px; background: rgba(0,0,0,0.35); }
.hinchas-hero__numeros strong{ font-size: 2rem; line-height: 1; background: linear-gradient(135deg, var(--aqua), #A45BC0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hinchas-hero__numeros span{ font-size: 0.72rem; color: var(--text-muted); margin-top: 0.3rem; }
.hinchas-tuya{
  display:flex; align-items:center; gap: 0.9rem;
  padding: 0.9rem 1rem; border-radius: 12px;
  border: 1px solid var(--aqua); background: rgba(0,255,204,0.07);
}
.hinchas-tuya img{ width: 52px; height: 52px; object-fit: contain; }
.hinchas-tuya div{ display:flex; flex-direction:column; gap: 0.15rem; min-width: 0; flex: 1; }
.hinchas-tuya small{ font-size: 0.68rem; color: var(--aqua); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.hinchas-tuya strong{ font-size: 1.05rem; color: var(--text); }
.hinchas-tuya span{ font-size: 0.8rem; color: var(--text-muted); }
.hinchas-tuya--invitar{ border-style: dashed; }

/* Mosaico proporcional */
.mosaico{ display:flex; flex-wrap: wrap; gap: 5px; }
.mosaico__celda{
  flex-basis: 0; min-width: 104px; min-height: 92px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 0.25rem;
  padding: 0.6rem; border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, color-mix(in srgb, var(--aqua) calc(22% - var(--i) * 1.2%), var(--panel-alt)), var(--panel-alt));
  color: var(--text); font-family: 'DM Sans', sans-serif; cursor: pointer; min-width: 0;
  animation: podio-sube 0.45s ease both; animation-delay: calc(var(--i) * 0.04s);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.mosaico__celda:hover{ transform: scale(1.03); border-color: var(--aqua); z-index: 1; }
.mosaico__celda--mia{ border-color: var(--aqua); box-shadow: inset 0 0 0 1px var(--aqua); }
.mosaico__celda img{ width: 34px; height: 34px; object-fit: contain; }
.mosaico__nombre{ font-size: 0.75rem; font-weight: 700; text-align:center; overflow-wrap: anywhere; line-height: 1.15; }
.mosaico__celda strong{ font-size: 1rem; color: var(--aqua); }
.hinchas-ayuda{ font-size: 0.78rem; color: var(--text-muted); margin: 0.6rem 0 0; }

/* Duelo */
.duelo__selects{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 0.6rem; align-items:center; }
.duelo__selects .auth-input{ width: 100%; }
.duelo__clasicos{ display:flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.duelo__cara{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 0.75rem; margin-top: 0.5rem; }
.duelo__lado{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap: 0.2rem;
  padding: 1rem 0.6rem; border-radius: 12px; background: var(--panel-alt); border: 1px solid var(--border);
}
.duelo__lado--gana{ border-color: var(--lib-gold); box-shadow: 0 0 18px rgba(232,185,35,0.18); }
.duelo__lado img{ width: 56px; height: 56px; object-fit: contain; }
.duelo__lado strong{ font-size: 0.95rem; color: var(--text); overflow-wrap: anywhere; }
.duelo__num{ font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--text); }
.duelo__lado--gana .duelo__num{ color: var(--lib-gold); }
.duelo__etiqueta{ font-size: 0.72rem; color: var(--text-muted); }
.duelo__titulos{ font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; }
.duelo__vs{ font-weight: 700; font-size: 1.3rem; color: var(--aqua); letter-spacing: 0.05em; }
.duelo__vs--chico{ font-size: 0.85rem; }
.duelo__cuerda{ position: relative; height: 12px; margin: 1rem 0 0.5rem; border-radius: 999px; background: #A45BC0; overflow: visible; }
.duelo__cuerda-a{ display:block; height: 100%; border-radius: 999px 0 0 999px; background: var(--aqua); transition: width 0.6s cubic-bezier(.2,.8,.2,1); }
.duelo__marca{ position:absolute; top: -5px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.7); transition: left 0.6s cubic-bezier(.2,.8,.2,1); }
.duelo__veredicto{ text-align:center; font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 0.4rem 0 0; }

/* Tablas con barras, puestos y "ver todos" */
.hinchas-tablas{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items:start; }
.hinchas-tablas .panel{ margin: 0; }
.hinchas-tabla .pos{ width: 2.2rem; text-align:center; }
.hinchas-tabla .col-barra{ width: 28%; }
.hinchas-barra{ height: 6px; border-radius: 999px; background: var(--panel-alt); overflow: hidden; }
.hinchas-barra span{ display:block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), #A45BC0); }
.hinchas-pct{ display:block; font-size: 0.66rem; color: var(--text-muted); font-weight: 400; }
.hinchas-tabla:not(.hinchas-tabla--todo) .fila-extra{ display:none; }
.hinchas-ver-mas{ margin-top: 0.6rem; }
.hinchas-filtro{ margin-bottom: 0.6rem; }
.hinchas-filtro .auth-input{ width: 100%; box-sizing: border-box; }
.fila-propia td{ background: rgba(0,255,204,0.08); }
.fila-propia td:first-child{ box-shadow: inset 3px 0 0 var(--aqua); }
.fila-propia__tag{ font-size: 0.62rem; font-weight: 700; color: var(--aqua); text-transform: uppercase; margin-left: 0.3rem; }

@media (max-width: 900px){
  .hinchas-tablas{ grid-template-columns: 1fr; }
}
@media (max-width: 780px){
  .hinchas-hero{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .hinchas-hero__numeros strong{ font-size: 1.5rem; }
  .duelo__selects{ grid-template-columns: 1fr; }
  .duelo__vs--chico{ text-align:center; }
  .duelo__cara{ gap: 0.4rem; }
  .duelo__num{ font-size: 1.7rem; }
  .duelo__lado img{ width: 40px; height: 40px; }
  .mosaico__celda{ min-width: 86px; min-height: 80px; }
}
@media (prefers-reduced-motion: reduce){
  .mosaico__celda{ animation: none; }
  .duelo__cuerda-a, .duelo__marca{ transition: none; }
}

/* --- Duelo: buscador de clubes con escudo --- */
.duelo-picker{ display:flex; align-items:center; gap: 0.5rem; }
.duelo-picker .auth-input{ flex: 1; min-width: 0; width: 100%; box-sizing: border-box; }
.duelo-picker__escudo{
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--panel-alt); border: 1px solid var(--border);
  color: var(--text-muted); font-weight: 700; font-size: 0.85rem; overflow:hidden;
}
.duelo-picker__escudo img{ width: 30px; height: 30px; object-fit: contain; }
.duelo-picker .club-picker__list{ left: 0; right: 0; z-index: 20; }
.club-picker__group{ position: sticky; top: 0; background: var(--panel); z-index: 1; }

/* --- ¿Qué fútbol tiene más hinchas? --- */
.hinchas-ayuda--arriba{ margin: -0.3rem 0 0.8rem; }
.futbol-nac{ display:flex; flex-direction:column; gap: 0.4rem; }
.futbol-nac__fila{ border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border); }
.futbol-nac__fila[open]{ border-color: rgba(0,255,204,0.4); }
.futbol-nac__fila summary{
  display:grid; grid-template-columns: minmax(110px, 180px) 1fr auto; align-items:center; gap: 0.75rem;
  padding: 0.6rem 0.8rem; cursor: pointer; list-style: none;
}
.futbol-nac__fila summary::-webkit-details-marker{ display:none; }
.futbol-nac__pais{ display:flex; align-items:center; gap: 0.45rem; font-weight: 700; font-size: 0.88rem; color: var(--text); }
.futbol-nac__pais .flag-icon{ width: 22px; height: 15px; }
.futbol-nac__barra{ height: 8px; border-radius: 999px; background: #262626; overflow:hidden; }
.futbol-nac__barra span{ display:block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), #A45BC0); }
.futbol-nac__fila summary strong{ color: var(--aqua); min-width: 2ch; text-align: right; }
.futbol-nac__clubes{ display:flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.8rem 0.8rem; }

.hinchas-compartir{ flex-shrink: 0; padding: 0.45rem 0.9rem; font-size: 0.8rem; }

@media (max-width: 560px){
  .futbol-nac__fila summary{ grid-template-columns: 1fr auto; }
  .futbol-nac__barra{ grid-column: 1 / -1; grid-row: 2; }
  .hinchas-tuya{ flex-wrap: wrap; }
  .hinchas-compartir{ width: 100%; }
}

/* Foro: los recuadros de encuesta y reportes se ocultan cuando no tienen
   nada que mostrar (antes quedaba un panel vacío para los usuarios). */
.panel:has(> .panel-body > #reportesContenedor:empty),
.panel:has(> .panel-body > #encuestaContenedor:empty){ display: none; }
/* =========================================================
   Portada de Listas de campeones (campeones-inicio.js)
   ========================================================= */
.camp-volver{
  align-self: flex-start;
  justify-self: start;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.camp-volver:hover{ color: var(--aqua); border-color: var(--aqua); }

.camp-inicio__hero{ padding-top: 5.25rem; }
.camp-inicio__cinta{
  position:absolute; inset: 1rem 0 auto 0;
  overflow:hidden; opacity: 0.35; pointer-events:none;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.camp-inicio__cinta-track{ display:flex; gap: 1.1rem; width: max-content; animation: camp-cinta 60s linear infinite; }
.camp-inicio__cinta img{ width: 34px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)); }
@keyframes camp-cinta{ to{ transform: translateX(-50%); } }

.camp-inicio__cifras{ position: relative; display:flex; flex-wrap: wrap; justify-content:center; gap: 0.6rem; }
.camp-inicio__cifras span{
  display:flex; flex-direction:column; align-items:center;
  min-width: 96px; padding: 0.55rem 0.8rem;
  border-radius: 10px; border: 1px solid var(--border);
  background: rgba(0,0,0,0.45);
  font-size: 0.72rem; color: var(--text-muted);
}
.camp-inicio__cifras strong{ font-size: 1.35rem; color: var(--aqua); line-height: 1.1; }
.camp-inicio__nota{ margin: -0.5rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.camp-ayuda{ text-align:center; padding: 1rem 0 0.25rem; }
.camp-buscador{ max-width: none; }

/* 1) Campeones vigentes (el resto de los estilos, al final: "Portada de Listas de campeones") */
.camp-vig__pulso{ display:inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--lib-green); animation: camp-pulso 1.6s ease-in-out infinite; }
@keyframes camp-pulso{ 50%{ opacity: 0.25; transform: scale(0.7); } }

/* 2) Máquina del tiempo */
.camp-tiempo__control{ display:flex; align-items:center; justify-content:center; gap: 0.75rem; flex-wrap: wrap; }
.camp-tiempo__anio{
  font-size: clamp(2.4rem, 8vw, 3.4rem); font-weight: 700; line-height: 1; min-width: 4ch; text-align:center;
  background: linear-gradient(120deg, var(--aqua), #fff 60%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.camp-tiempo__paso{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel-alt); color: var(--text);
  cursor: pointer; font-size: 0.8rem;
}
.camp-tiempo__paso:hover{ border-color: var(--aqua); color: var(--aqua); }
.camp-tiempo__azar{ font-size: 0.8rem; }
.camp-tiempo__slider{ width: 100%; margin: 1rem 0 0.25rem; accent-color: var(--aqua); cursor: pointer; }
/* 3) Vitrina de un club */
.camp-vitrina{ margin-top: 1rem; display:flex; flex-direction:column; gap: 0.9rem; }
.camp-vitrina__cabecera{ display:flex; align-items:center; gap: 0.9rem; flex-wrap: wrap; }
.camp-vitrina__escudo{ width: 64px; height: 64px; object-fit: contain; }
.camp-vitrina__nombre{ margin: 0; font-size: 1.4rem; }
.camp-vitrina__pais{ display:inline-flex; align-items:center; gap: 0.35rem; font-size: 0.82rem; color: var(--text-muted); }
.camp-vitrina__acciones{ margin-left: auto; display:flex; flex-wrap: wrap; gap: 0.5rem; }
.camp-vitrina__acciones .btn-ghost{ font-size: 0.8rem; }
.camp-vitrina__numeros{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; }
.camp-vitrina__numeros span{
  display:flex; flex-direction:column; padding: 0.65rem 0.8rem;
  border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border);
  font-size: 0.75rem; color: var(--text-muted);
}
.camp-vitrina__numeros strong{ font-size: 1.5rem; color: var(--text); line-height: 1.15; }
.camp-num--oro{ color: var(--lib-gold) !important; }
.camp-num--plata{ color: var(--lib-subcampeon) !important; }
.camp-vitrina__lista{ padding: 0.8rem 0.9rem 0.1rem; border-radius: 10px; border: 1px solid var(--border); border-left: 3px solid var(--acento); }
.camp-vitrina__lista-cab{ display:flex; align-items:center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.camp-vitrina__lista-cab strong{ color: var(--acento); }
.camp-link{
  margin-left: auto; padding: 0; border: 0; background: none;
  color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.78rem; cursor: pointer;
}
.camp-link:hover{ color: var(--aqua); }

/* 4) Duelo de vitrinas */
.camp-duelo__pickers{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items:start; }
.camp-duelo__vs{ font-weight: 700; font-size: 1.1rem; color: var(--purple); background: var(--aqua); border-radius: 8px; padding: 0.2rem 0.55rem; align-self:center; }
.camp-duelo__vs--mini{ margin-top: 0.55rem; font-size: 0.8rem; }
.camp-duelo__marcador{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 0.75rem; margin-top: 1.25rem; }
.camp-duelo__lado{ display:flex; flex-direction:column; align-items:center; gap: 0.3rem; text-align:center; }
.camp-duelo__lado img{ width: 58px; height: 58px; object-fit: contain; }
.camp-duelo__total{ font-size: 2.2rem; font-weight: 700; color: var(--lib-gold); line-height: 1; }
.camp-duelo__veredicto{ text-align:center; color: var(--text-muted); margin: 0.9rem 0; }
.camp-duelo__veredicto strong{ color: var(--aqua); }
.camp-duelo__barras{ display:flex; flex-direction:column; gap: 0.45rem; margin-bottom: 1.25rem; }
.camp-duelo__fila{ display:grid; grid-template-columns: 2ch 1fr minmax(110px, 180px) 1fr 2ch; align-items:center; gap: 0.5rem; }
.camp-duelo__comp{ text-align:center; font-size: 0.75rem; font-weight: 700; color: var(--acento); }
.camp-duelo__barra{ height: 10px; border-radius: 999px; background: var(--panel-alt); overflow:hidden; display:flex; }
.camp-duelo__barra span{ background: var(--acento); border-radius: 999px; transition: width 0.4s ease; }
.camp-duelo__barra--a{ justify-content:flex-end; }
.camp-duelo__barra--b span{ background: var(--acento-b, var(--acento)); }
.camp-duelo__detalle{ display:block; font-weight: 400; font-size: 0.68rem; color: var(--text-muted); line-height: 1.3; }
.camp-duelo__n{ text-align:center; font-weight: 700; color: var(--text-muted); }
.camp-duelo__n--gana{ color: var(--text); }

/* 5) Aniversarios */
.camp-efemerides{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 0.7rem; }
.camp-efem{
  display:flex; align-items:center; gap: 0.85rem;
  padding: 0.8rem 0.9rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.camp-efem:hover{ border-color: var(--acento); transform: translateY(-2px); }
.camp-efem__n{
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border: 2px solid var(--acento); color: var(--acento);
  font-size: 1.25rem; font-weight: 700; line-height: 1;
}
.camp-efem__n small{ font-size: 0.6rem; font-weight: 400; color: var(--text-muted); }
.camp-efem__texto{ display:flex; flex-direction:column; gap: 0.15rem; font-size: 0.8rem; color: var(--text-muted); }
.camp-efem__club{ display:flex; align-items:center; gap: 0.4rem; font-weight: 700; font-size: 0.95rem; color: var(--text); }
.camp-efem__club img{ width: 22px; height: 22px; object-fit: contain; }
.camp-efem__mas{ align-self:center; font-size: 0.82rem; }

@media (max-width: 640px){
  .camp-inicio__cifras span{ flex: 1 1 40%; min-width: 0; }
  .camp-duelo__pickers{ grid-template-columns: 1fr; }
  .camp-duelo__vs--mini{ justify-self:center; margin: 0; }
  .camp-duelo__fila{ grid-template-columns: 2ch 1fr 1fr 2ch; }
  .camp-duelo__comp{ grid-column: 1 / -1; grid-row: 1; }
  .camp-vitrina__acciones{ margin-left: 0; }
}
@media (prefers-reduced-motion: reduce){
  .camp-inicio__cinta-track, .camp-vig__pulso{ animation: none; }
  .camp-card, .camp-efem{ transition: none; }
}

/* =========================================================
   Portada del Baúl de Estadísticas (baul-inicio.js)
   ========================================================= */
.baul-inicio__hero{ padding-top: 1.25rem; }
.baul-cofre{
  position: relative;
  display:flex; flex-direction:column; align-items:center; gap: 0.2rem;
  margin: 0 auto 0.5rem;
  padding: 0; border: 0; background: none;
  color: var(--text-muted); font-family: 'DM Sans', sans-serif; cursor: pointer;
}
.baul-cofre__cta{ font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aqua); }
.baul-cofre:hover .baul-chest__lid{ transform: rotate(-10deg); }
.baul-cofre.is-abierto .baul-chest__lid{ transform: rotate(-38deg); }
.baul-cofre.is-abierto .baul-chest__luz,
.baul-cofre:hover .baul-chest__luz{ opacity: 1; }
.baul-cofre:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 6px; border-radius: 12px; }

.baul-dato-wrap{ position: relative; max-width: 520px; margin: 0 auto 1.1rem; }
.baul-dato-wrap:empty{ display:none; }
.baul-dato{
  display:flex; flex-direction:column; align-items:center; gap: 0.3rem;
  padding: 1.1rem 1.2rem 0.9rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--dato-color) 60%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--dato-color) 16%, #000), rgba(0,0,0,0.6));
  animation: baul-dato-sale 0.45s cubic-bezier(.2,1.4,.5,1);
}
@keyframes baul-dato-sale{ from{ opacity: 0; transform: translateY(24px) scale(0.92); } }
.baul-dato__valor{ font-size: 2.6rem; line-height: 1; color: var(--dato-color); }
.baul-dato__sujeto{ display:flex; align-items:center; gap: 0.45rem; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.baul-dato__sujeto img{ width: 28px; height: 28px; object-fit: contain; }
.baul-dato__texto{ margin: 0; font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; }
.baul-dato__acciones{ display:flex; flex-wrap: wrap; justify-content:center; align-items:center; gap: 0.5rem; margin-top: 0.5rem; }
.baul-dato__acciones .btn-ghost{ font-size: 0.78rem; padding: 0.35rem 0.8rem; }
.baul-dato__acciones .camp-link{ margin-left: 0.25rem; }

/* Índice */
.baul-indice__grupo{ margin: 0.25rem 0 -0.4rem; }
.baul-card__top{ display:flex; flex-direction:column; gap: 0.4rem; margin: 0.35rem 0; }
.baul-card__fila{ display:flex; align-items:center; gap: 0.5rem; font-size: 0.85rem; }
.baul-card__fila img{ width: 22px; height: 22px; object-fit: contain; }
.baul-card__fila small{ color: var(--text-muted); }
.baul-card__club{ flex: 1; min-width: 0; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.baul-card__barra{ width: 60px; height: 6px; border-radius: 999px; background: var(--panel-alt); overflow:hidden; }
.baul-card__barra span{ display:block; height: 100%; background: var(--acento); border-radius: 999px; }
.baul-card__fila strong{ min-width: 2ch; text-align:right; color: var(--acento); }

/* Juego */
.baul-juego__pregunta{ margin: 0 0 1rem; text-align:center; color: var(--text-muted); }
.baul-juego__pregunta strong{ color: var(--text); }
.baul-juego__tablero{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items:stretch; }
.baul-juego__club{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 0.35rem;
  padding: 1rem 0.75rem; border-radius: 12px;
  background: var(--panel-alt); border: 1px solid var(--border); text-align:center;
}
.baul-juego__club img{ width: 60px; height: 60px; object-fit: contain; }
.baul-juego__cant{ font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--aqua); }
.baul-juego__club--rival .baul-juego__cant{ color: var(--text-muted); }
.is-ok .baul-juego__club--rival{ border-color: var(--lib-green); }
.is-ok .baul-juego__club--rival .baul-juego__cant{ color: var(--lib-green); }
.is-mal .baul-juego__club--rival{ border-color: var(--danger); }
.is-mal .baul-juego__club--rival .baul-juego__cant{ color: var(--danger); }
.baul-juego__centro{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-muted); text-align:center; max-width: 140px; }
.baul-juego__btn{
  width: 100%; padding: 0.55rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--aqua); background: rgba(0,255,204,0.08); color: var(--aqua);
  font-family: 'DM Sans', sans-serif; font-weight: 700; cursor: pointer;
}
.baul-juego__btn:hover{ background: rgba(0,255,204,0.18); }
.baul-juego__veredicto{ font-size: 1rem; font-weight: 700; color: var(--text); }
.baul-juego__marcador{ margin: 0.9rem 0 0; text-align:center; font-size: 0.85rem; color: var(--text-muted); }
.baul-juego__marcador strong{ color: var(--text); }

/* Línea del tiempo */
.baul-linea__cabecera{ display:flex; align-items:center; justify-content:space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; font-size: 0.9rem; }
.baul-linea__cabecera .orden-lista{ margin: 0; }
.baul-linea__franja{ display:grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 42px; }
.baul-linea__celda{
  border: 0; padding: 0; border-radius: 3px; cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.baul-linea__celda:hover{ transform: scaleY(1.25); filter: brightness(1.25); }
.baul-linea__celda.is-vivo{ animation: camp-pulso 1.6s ease-in-out infinite; }
.baul-linea__leyenda{ display:flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.6rem; font-size: 0.8rem; color: var(--text-muted); }
.baul-linea__datos{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.6rem; margin-top: 1rem; }
.baul-linea__datos div{ display:flex; flex-direction:column; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border); }
.baul-linea__datos small{ font-size: 0.7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.baul-linea__datos strong{ font-size: 1.05rem; }
.baul-linea__datos span{ font-size: 0.78rem; color: var(--text-muted); }

/* El club en el baúl */
.baul-club{ margin-top: 1rem; display:flex; flex-direction:column; gap: 0.8rem; }
.baul-club__items{ display:flex; flex-direction:column; gap: 0.45rem; }
.baul-club__item{
  display:flex; align-items:center; gap: 0.8rem;
  padding: 0.6rem 0.9rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-alt);
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
}
.baul-club__item:hover{ border-color: var(--aqua); }
.baul-club__puesto{ min-width: 2.6rem; font-size: 1.15rem; font-weight: 700; color: var(--aqua); text-align:center; }
.baul-club__desc{ flex: 1; display:flex; flex-direction:column; min-width: 0; }
.baul-club__desc small{ color: var(--text-muted); font-size: 0.75rem; }
.baul-club__cant{ font-size: 1.3rem; font-weight: 700; color: var(--lib-gold); }

/* Países en el baúl */
.baul-nota{ margin: 0 0 0.75rem; }
.baul-paises{ display:flex; flex-direction:column; gap: 0.35rem; }
.baul-pais{
  display:grid; grid-template-columns: minmax(120px, 170px) 1fr auto; align-items:center; gap: 0.75rem;
  padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
}
.baul-pais:hover, .baul-pais.is-abierto{ background: var(--panel-alt); border-color: var(--border); }
.baul-pais__nombre{ display:flex; align-items:center; gap: 0.4rem; font-weight: 700; font-size: 0.88rem; }
.baul-pais__barra{ height: 12px; border-radius: 999px; background: var(--panel-alt); overflow:hidden; }
.baul-pais__barra span{ display:block; height: 100%; border-radius: 999px; background: var(--pais-color); }
.baul-pais__total{ font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.baul-pais__total strong{ font-size: 0.95rem; color: var(--text); }
.baul-pais__clubes{ margin: 0.2rem 0 0.6rem; padding-left: 0.6rem; }
.baul-pais__clubes .club-chip{ cursor: default; }

/* Páginas internas del Baúl */
.baul-banner{ background: linear-gradient(100deg, var(--purple), #1d0f24); color: var(--text); }
.baul-nota-curso{ padding: 0.5rem 0 0; font-size: 0.78rem; }

@media (max-width: 640px){
  .baul-juego__tablero{ grid-template-columns: 1fr 1fr; }
  .baul-juego__centro{ grid-column: 1 / -1; grid-row: 2; flex-direction: row; max-width: none; }
  .baul-juego__centro span{ display:none; }
  .baul-juego__club img{ width: 44px; height: 44px; }
  .baul-pais{ grid-template-columns: 1fr auto; }
  .baul-pais__barra{ grid-column: 1 / -1; grid-row: 2; }
  .baul-linea__franja{ height: 34px; }
}
@media (prefers-reduced-motion: reduce){
  .baul-dato, .baul-linea__celda.is-vivo{ animation: none; }
  .baul-linea__celda{ transition: none; }
}

/* =========================================================
   Sección Clubes: lista y ficha (clubes.js)
   ========================================================= */
.clubes-hero{ padding-top: 2.5rem; }
.clubes-hero__mosaico{
  position:absolute; inset: 0;
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem; padding: 1rem;
  opacity: 0.07; pointer-events:none; transform: rotate(-8deg) scale(1.25);
}
.clubes-hero__mosaico img{ width: 100%; max-width: 48px; aspect-ratio: 1; object-fit: contain; }
.clubes-azar{ position: relative; margin-top: 0.9rem; font-size: 0.82rem; }
.clubes-inicio, .clubes-filtros{ min-width: 0; max-width: 100%; }
.clubes-filtros{ display:flex; flex-direction:column; gap: 0.6rem; }
.clubes-paises{ max-width: 100%; min-width: 0; }
.clubes-paises{ margin: 0; }
.clubes-paises .subtab small{ opacity: 0.7; margin-left: 0.15rem; }
.clubes-filtros .orden-lista{ align-self: flex-start; margin: 0; }
.clubes-grupo{ margin-top: 1.1rem; }
.clubes-grupo__titulo{ display:flex; align-items:center; gap: 0.45rem; margin-bottom: 0.6rem; }
.clubes-grupo__titulo span{ color: var(--text-muted); font-weight: 400; }
.club-cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 0.6rem; }
.club-card{
  display:flex; flex-direction:column; align-items:center; gap: 0.35rem;
  padding: 0.9rem 0.5rem 0.8rem;
  border-radius: 12px; border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:center; cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.club-card:hover{ transform: translateY(-3px); border-color: var(--aqua); background: var(--panel-alt); }
.club-card__escudo{ height: 52px; display:flex; align-items:center; justify-content:center; }
.club-card__escudo img{ max-width: 52px; max-height: 52px; object-fit: contain; }
.club-card__nombre{ font-size: 0.85rem; font-weight: 700; line-height: 1.2; }
.club-card__titulos{ font-size: 0.7rem; font-weight: 700; color: var(--lib-gold); }

/* Ficha */
.ficha{ --club: var(--aqua); display:flex; flex-direction:column; gap: 1rem; }
.ficha-hero__tuyo{ display:inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--aqua); color: var(--aqua); font-size: 0.72rem; font-weight: 700; }

.ficha-bloque .panel-body{ display:flex; flex-direction:column; gap: 0.75rem; }
.ficha-bloque__titulo{ margin: 0; font-size: 1rem; display:flex; align-items:center; gap: 0.5rem; }
.ficha-bloque__titulo::before{ content:""; width: 4px; height: 1.05em; border-radius: 2px; background: var(--club); }

.ficha-vitrina{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 0.6rem; }
.ficha-trofeo{
  display:flex; flex-direction:column; gap: 0.2rem; text-align:left;
  padding: 0.8rem 0.9rem; border-radius: 10px;
  border: 1px solid var(--border); border-left: 4px solid var(--acento);
  background: var(--panel-alt); color: var(--text); font-family: 'DM Sans', sans-serif; cursor: pointer;
}
.ficha-trofeo:hover{ border-color: var(--acento); }
.ficha-trofeo__n{ font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--acento); }
.ficha-trofeo__nombre{ font-weight: 700; font-size: 0.9rem; }
.ficha-trofeo__anios{ font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.ficha-trofeo__perdidas{ font-size: 0.72rem; color: var(--lib-subcampeon); font-weight: 700; }

.ficha-comp{ padding: 0.8rem 0.9rem; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border); }
.ficha-comp + .ficha-comp{ margin-top: 0.2rem; }
.ficha-comp__cab{ display:flex; align-items:center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ficha-comp__cab .camp-link{ margin-left: auto; }
.ficha-comp__nums{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.5rem; margin-bottom: 0.7rem; }
.ficha-comp__nums span{ display:flex; flex-direction:column; font-size: 0.72rem; color: var(--text-muted); }
.ficha-comp__nums strong{ font-size: 1.1rem; color: var(--text); }
.ficha-franja{ height: 22px; }

.ficha-momentos{ list-style: none; margin: 0; padding: 0 0 0 0.3rem; display:flex; flex-direction:column; }
.ficha-momento{ position: relative; display:flex; gap: 0.9rem; padding: 0 0 0.9rem 1.2rem; border-left: 2px solid var(--border); }
.ficha-momento:last-child{ padding-bottom: 0; border-left-color: transparent; }
.ficha-momento::before{
  content:""; position:absolute; left: -7px; top: 0.2rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 3px var(--panel);
}
.ficha-momento--oro::before{ background: var(--lib-gold); }
.ficha-momento--violeta::before{ background: #B77BD0; }
.ficha-momento__anio{ min-width: 5.2rem; font-weight: 700; color: var(--text); font-size: 0.88rem; }
.ficha-momento__texto{ font-size: 0.88rem; color: var(--text-muted); }

.ficha-rivales{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 0.5rem; }
.ficha-rival{
  display:flex; align-items:center; gap: 0.55rem;
  padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-alt);
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
}
.ficha-rival:hover{ border-color: var(--club); }
.ficha-rival img{ width: 28px; height: 28px; object-fit: contain; }
.ficha-rival__nombre{ flex: 1; min-width: 0; font-weight: 700; font-size: 0.85rem; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-rival__record{ font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.ficha-g{ color: var(--lib-green); }
.ficha-p{ color: var(--danger); }
.ficha-paisanos{ margin: 0; }

@media (max-width: 640px){
  .clubes-hero__mosaico{ grid-template-columns: repeat(6, 1fr); }
  .clubes-paises{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: thin; }
  .clubes-paises .subtab{ flex-shrink: 0; }
  .club-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
  .club-card{ padding: 0.7rem 0.35rem 0.6rem; }
  .club-card__escudo{ height: 40px; }
  .club-card__escudo img{ max-width: 40px; max-height: 40px; }
  .club-card__nombre{ font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce){
  .club-card, .ficha-portada{ transition: none; }
}

/* --- Clubes: favoritos, controles, tabla (lista) --- */
.clubes-tuyos{ display:flex; flex-direction:column; gap: 0.8rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.clubes-tuyos:empty{ display:none; }
#clubesTuyos:empty{ display:none; }
.clubes-tuyos__fila .club-chips{ margin: 0; }
.clubes-tuyos__titulo{ display:flex; align-items:center; gap: 0.45rem; margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 700; }
.clubes-tuyos__estrella{ color: var(--lib-gold); }
.clubes-tuyos__borrar{
  margin-left: auto; background: none; border: none; padding: 0;
  font: inherit; font-size: 0.75rem; font-weight: 400; color: var(--text-muted); cursor: pointer;
}
.clubes-tuyos__borrar:hover, .clubes-tuyos__borrar:focus-visible{ color: var(--aqua); text-decoration: underline; }

.clubes-controles{ display:flex; flex-wrap: wrap; align-items:center; gap: 0.5rem; }
.clubes-controles .orden-lista{ margin: 0; }
.clubes-toggle{
  padding: 0.36rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-alt); color: var(--text-muted);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.75rem; cursor: pointer;
}
.clubes-toggle::before{ content: "○ "; }
.clubes-toggle.active{ border-color: var(--lib-gold); color: var(--lib-gold); }
.clubes-toggle.active::before{ content: "● "; }
.clubes-vista{ margin-left: auto !important; }
.clubes-cuenta{ margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--text-muted); }
.clubes-cuenta:empty{ display:none; }

.club-card{ position: relative; }
.club-card__fav{ color: var(--lib-gold); font-size: 0.8rem; line-height: 1; }
.club-card > .club-card__fav{ position:absolute; top: 0.45rem; right: 0.55rem; }
.club-card__titulos--dato{ color: var(--aqua); }

.clubes-tabla-wrap{ padding: 0.4rem 0.6rem; }
.clubes-tabla{ width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.clubes-tabla th{ text-align:left; padding: 0.55rem 0.5rem; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap; }
.clubes-tabla th button{ background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.clubes-tabla th button:hover, .clubes-tabla th.is-orden button{ color: var(--aqua); }
.clubes-tabla td{ padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border); }
.clubes-tabla tbody tr{ cursor: pointer; }
.clubes-tabla tbody tr:hover{ background: var(--panel-alt); }
.clubes-tabla .num{ text-align: right; font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.clubes-tabla__puesto{ color: var(--text-muted); }
.clubes-tabla__club{
  display:flex; align-items:center; gap: 0.55rem; background: none; border: none; padding: 0;
  font: inherit; font-weight: 700; color: var(--text); cursor: pointer; text-align: left;
}
.clubes-tabla__club img{ width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.clubes-tabla__club:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }
.clubes-tabla__pais{ color: var(--text-muted); white-space: nowrap; }
.clubes-tabla__pais .flag-icon{ vertical-align: -1px; }
.clubes-tabla__oro{ color: var(--lib-gold); font-weight: 700; }
.clubes-tabla__cero{ color: var(--lib-gray); }

/* --- Confederaciones --- */
.clubes-confs{ align-self: flex-start; max-width: 100%; overflow-x: auto; }
.clubes-confs small{ opacity: 0.7; font-weight: 400; margin-left: 0.15rem; }
.ficha-hero__conf{
  margin-left: 0.35rem; padding: 0.05rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted); font-size: 0.7rem; letter-spacing: 0.04em;
}

/* --- Ficha: navegación, acciones --- */
.ficha-nav{ display:flex; align-items:center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ficha-nav .camp-volver{ margin: 0; }
.ficha-nav__vecinos{ display:flex; align-items:center; gap: 0.4rem; min-width: 0; }
.ficha-nav__btn{
  display:inline-flex; align-items:center; gap: 0.3rem; max-width: 12rem;
  padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel);
  color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.78rem; cursor: pointer;
}
.ficha-nav__btn span{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-nav__btn:hover{ color: var(--club); border-color: var(--club); }
.ficha-nav__pos{ font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }

.ficha-fav svg{ fill: none; }
.ficha-fav.is-activo{ color: var(--lib-gold); opacity: 1; }
.ficha-fav.is-activo svg{ fill: currentColor; }

/* --- Ficha: rankings --- */
.ficha-rankings{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 0.5rem; }
.ficha-ranking{
  display:flex; flex-direction:column; gap: 0.15rem; text-align:left;
  padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-alt);
  color: var(--text); font-family: 'DM Sans', sans-serif;
}
.ficha-ranking--link{ cursor: pointer; }
.ficha-ranking--link:hover{ border-color: var(--club); }
.ficha-ranking__n{ font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--club); }
.ficha-ranking__n small{ font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
.ficha-ranking__n--uno{ color: var(--lib-gold); }
.ficha-ranking__texto{ font-size: 0.78rem; color: var(--text-muted); line-height: 1.35; }

/* --- Ficha: títulos por década --- */
.ficha-decadas__resumen, .ficha-finales__resumen{ margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.ficha-finales__resumen strong{ color: var(--text); }
.ficha-decadas{ display:flex; align-items:flex-end; gap: 0.35rem; height: 170px; padding-top: 0.5rem; }
.ficha-decada{ flex: 1; min-width: 0; height: 100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap: 0.25rem; }
.ficha-decada__n{ font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.ficha-decada--mejor .ficha-decada__n{ color: var(--text); }
.ficha-decada__barra{
  width: 100%; max-width: 38px; min-height: 2px; border-radius: 6px 6px 2px 2px; overflow:hidden;
  display:flex; flex-direction: column-reverse; background: var(--border);
  transform-origin: bottom; animation: ficha-decada 0.5s ease-out both;
}
.ficha-decada__barra span{ display:block; min-height: 3px; }
.ficha-decada__barra span + span{ border-bottom: 1px solid rgba(0,0,0,0.45); }
@keyframes ficha-decada{ from{ transform: scaleY(0); } }
.ficha-decada__anio{ font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ficha-decada__anio::before{ content: "’"; }

/* --- Ficha: todas sus finales --- */
#fichaFinales{ display:flex; flex-direction:column; gap: 0.75rem; }
#fichaFinales .orden-lista{ align-self: flex-start; margin: 0; }
.orden-lista__btn small{ opacity: 0.7; }
.ficha-finales{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 0.35rem; }
.ficha-final{
  display:grid; grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap: 0.6rem;
  padding: 0.45rem 0.7rem; border-radius: 10px; background: var(--panel-alt);
  border: 1px solid var(--border); border-left: 4px solid var(--acento);
}
.ficha-final__res{ font-size: 0.72rem; font-weight: 700; text-align:center; padding: 0.15rem 0; border-radius: 999px; }
.ficha-final--g .ficha-final__res{ color: #0b0b0b; background: var(--lib-gold); }
.ficha-final--p .ficha-final__res{ color: var(--text-muted); border: 1px solid var(--lib-gray); }
.ficha-final__comp, .ficha-final__rival{
  display:flex; align-items:center; gap: 0.45rem; min-width: 0;
  background: none; border: none; padding: 0; font: inherit; font-size: 0.84rem; color: var(--text); text-align:left;
}
button.ficha-final__comp, button.ficha-final__rival{ cursor: pointer; }
button.ficha-final__comp:hover span, button.ficha-final__rival:hover span{ color: var(--club); text-decoration: underline; }
.ficha-final__comp span, .ficha-final__rival span{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-final__comp strong{ font-variant-numeric: tabular-nums; }
.ficha-final__rival small{ color: var(--text-muted); }
.ficha-final__rival img{ width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.ficha-finales__mas{ align-self: flex-start; }

/* --- Ficha: comparador --- */
.ficha-comparar{ display:flex; flex-direction:column; gap: 0.75rem; }
.ficha-comparar__buscador{ max-width: 420px; margin: 0; }
.ficha-comparar .club-chips{ margin: 0; }
.ficha-comparar__resultados:empty{ display:none; }
.ficha-comparar__sugeridos small{ color: var(--text-muted); font-weight: 400; }
.ficha-comparar .camp-duelo__marcador{ margin-top: 0.5rem; }
.ficha-vs{ display:flex; flex-direction:column; border: 1px solid var(--border); border-radius: 10px; overflow:hidden; }
.ficha-vs__fila{ display:grid; grid-template-columns: 1fr minmax(120px, 1.4fr) 1fr; align-items:center; gap: 0.5rem; padding: 0.5rem 0.75rem; }
.ficha-vs__fila:nth-child(even){ background: var(--panel-alt); }
.ficha-vs__fila--cab{ background: var(--panel-alt); border-bottom: 1px solid var(--border); }
.ficha-vs__club{
  display:flex; flex-direction:column; align-items:center; gap: 0.25rem;
  background: none; border: none; padding: 0; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--text); cursor: pointer; text-align:center;
}
.ficha-vs__club img{ width: 34px; height: 34px; object-fit: contain; }
.ficha-vs__club:hover span{ color: var(--aqua); }
.ficha-vs__valor{ text-align:center; font-weight: 700; font-size: 1rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ficha-vs__valor.is-gana{ color: var(--aqua); }
.ficha-vs__label{ text-align:center; font-size: 0.75rem; color: var(--text-muted); }
.ficha-comparar__acciones{ display:flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }

@media (max-width: 640px){
  .ficha-nav__btn{ max-width: 7.5rem; padding: 0.35rem 0.6rem; }
  .ficha-nav__pos{ display:none; }
  .clubes-vista{ margin-left: 0 !important; }
  .clubes-tabla__pais{ display:none; }
  .ficha-decadas{ gap: 0.2rem; height: 140px; }
  .ficha-final{ grid-template-columns: 3.6rem minmax(0, 1fr); }
  .ficha-final__rival{ grid-column: 2; }
  .ficha-vs__fila{ grid-template-columns: 1fr 1.3fr 1fr; padding: 0.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .ficha-decada__barra{ animation: none; }
}

/* =========================================================================
   COMUNIDAD: perfiles públicos, menciones, notificaciones y foro paginado
   ========================================================================= */

/* Ayuda debajo de un campo (nombre de usuario) */
.auth-field__ayuda{ display:block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; }

/* Nombre del autor: se toca y abre su tarjeta */
.foro-autor{
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-weight: 700; color: var(--text); cursor: pointer;
  text-align: left;
}
.foro-autor:hover, .foro-autor:focus-visible{ color: var(--aqua); text-decoration: underline; }

/* @menciones: ahora son botones */
button.foro-mencion{
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: var(--aqua); font-weight: 700; cursor: pointer;
}
button.foro-mencion:hover, button.foro-mencion:focus-visible{ text-decoration: underline; }

/* Respuestas: cuerpo flexible y botón de borrar */
.foro-respuesta__cuerpo{ flex: 1; min-width: 0; }
.foro-respuesta__borrar{ margin-left: auto; font-size: 0.75rem; }
.foro-respuesta__error{ margin: 0; flex: 1; font-size: 0.78rem; }

/* "Ver más comentarios" y avisos al pie de la lista */
.foro-mas{ display:flex; flex-direction:column; align-items:center; gap: 0.5rem; margin-top: 1rem; }
.foro-mas:empty{ display:none; }
.foro-mas__btn{ min-width: 220px; }
.foro-aviso{ text-align:center; font-size: 0.8rem; }
.foro-encuesta__total{ margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--text-muted); }

/* Globo de notificaciones sobre el avatar de la cuenta */
.cuenta-chip__avatar{ overflow: visible; }
.cuenta-chip__badge{
  position:absolute; top: -5px; right: -7px; z-index: 2;
  min-width: 18px; height: 18px; padding: 0 5px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 999px; background: var(--aqua); color: #06201C;
  font-size: 0.66rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--panel);
}
.cuenta-chip__badge[hidden]{ display:none; }

/* Aviso de nombre ocupado (morado, para distinguirlo del de verificación) */
.aviso-verificacion--nombre{ border-color: rgba(183,123,208,0.55); background: rgba(103,41,125,0.18); }

/* Tarjeta de hincha (modal) */
.hincha-modal{ z-index: 120; }
.hincha-tarjeta{ max-width: 380px; text-align:center; }
.hincha-tarjeta__cabecera{
  display:flex; flex-direction:column; align-items:center; gap: 0.35rem;
  padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.hincha-tarjeta__avatar{ width: 84px; height: 84px; box-shadow: 0 0 0 3px var(--club-color, var(--border)); }
.hincha-tarjeta__nombre{ margin: 0.3rem 0 0; font-size: 1.25rem; font-weight: 700; overflow-wrap:anywhere; }
.hincha-tarjeta .perfil-hero__linea{ justify-content:center; flex-wrap: wrap; }
.hincha-tarjeta .perfil-hero__bio{ margin: 0.2rem 0 0; }
.hincha-tarjeta .perfil-stats{ text-align:left; }
.hincha-tarjeta__acciones{ display:flex; flex-wrap:wrap; justify-content:center; gap: 0.5rem; }
.hincha-tarjeta__acciones:empty{ display:none; }

/* Notificaciones en "Mi perfil" */
.notif-todas{ margin-bottom: 0.6rem; }
.notif-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 0.45rem; }
.notif{
  width:100%; display:flex; align-items:flex-start; gap: 0.6rem;
  padding: 0.6rem 0.7rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-alt);
  color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-size: 0.83rem;
  text-align:left; cursor:pointer;
}
.notif:hover{ border-color: var(--aqua); }
.notif--nueva{ color: var(--text); border-color: rgba(0,255,204,0.45); background: rgba(0,255,204,0.06); }
.notif__icono{
  flex-shrink:0; width: 26px; height: 26px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--aqua); font-weight: 700; font-size: 0.8rem;
}
.notif__texto{ display:flex; flex-direction:column; gap: 0.15rem; min-width:0; overflow-wrap:anywhere; }
.notif__texto small{ font-size: 0.7rem; color: var(--text-muted); }

/* Últimos comentarios del perfil: ahora llevan al comentario */
.perfil-recientes li:has(.perfil-reciente){ padding: 0; }
.perfil-reciente{
  width:100%; display:block; padding: 0.55rem 0.7rem;
  background: none; border: none; color: inherit; font: inherit; text-align:left; cursor:pointer;
}
.perfil-reciente:hover p{ color: var(--aqua); }


/* =========================================================================
   JUEGOS
   ========================================================================= */


/* Pantalla de un juego */
.juego{ border-top: 4px solid var(--acento); overflow: visible; }   /* sin esto, la cabecera fija del Contrarreloj no se queda arriba */
.juego__cabecera{ margin-bottom: 1.3rem; padding-left: 0.9rem; border-left: 4px solid var(--acento); }
.juego__titulo{ margin: 0; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.juego__desc{ margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.juego__area{ display:flex; flex-direction:column; gap: 1rem; }
.juego-intro{ margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.juego-intro strong{ color: var(--text); }
.juego-centro{ margin: 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 0.75rem; }
.juego-botones{ display:flex; flex-wrap: wrap; gap: 0.6rem; }
.trivia--juego{ background: none; border: none; padding: 0; }

.juego-marcador{ display:flex; align-items:center; gap: 0.75rem; font-size: 0.82rem; color: var(--text-muted); }
.juego-marcador strong{ color: var(--text); }
.juego-marcador__barra{ flex: 1; height: 6px; border-radius: 999px; background: var(--panel-alt); overflow:hidden; }
.juego-marcador__barra span{ display:block; height: 100%; background: var(--acento); border-radius: inherit; transition: width 0.3s ease; }

/* Final de partida */
.juego-fin{ display:flex; flex-direction:column; align-items:center; gap: 0.5rem; text-align:center; padding: 1rem 0; animation: podio-sube 0.4s ease both; }
.juego-fin__puntos{ font-size: 3.2rem; font-weight: 700; line-height: 1; color: var(--acento); }
.juego-fin__puntos small{ font-size: 1.3rem; color: var(--text-muted); }
.juego-fin__frase{ margin: 0; font-size: 1.05rem; font-weight: 700; }
.juego-fin__detalle, .juego-fin__record{ margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.juego-fin__record strong{ color: var(--text); }
.juego-fin__acciones{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 0.6rem; margin-top: 0.5rem; }

/* Escudo misterioso */
.escudo-misterio{ display:flex; flex-direction:column; align-items:center; gap: 0.6rem; }
.escudo-misterio__marco{
  width: 170px; height: 170px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%), var(--panel-alt);
  border: 2px solid var(--border);
}
.escudo-misterio__marco.is-revelado{ border-color: var(--lib-green); }
.escudo-misterio__img{ width: 120px; height: 120px; object-fit: contain; transition: filter 0.45s ease; }
.escudo-misterio__pista{ margin: 0; font-size: 0.88rem; color: var(--text-muted); text-align:center; display:flex; align-items:center; gap: 0.35rem; flex-wrap: wrap; justify-content:center; }
.escudo-misterio__pista strong{ color: var(--text); }

/* Contrarreloj */
.contra-listas{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; }
.contra-lista{
  display:flex; flex-direction:column; gap: 0.2rem; text-align:left; cursor:pointer;
  padding: 0.8rem 0.9rem; border-radius: 10px;
  border: 1px solid var(--border); border-left: 4px solid var(--acento);
  background: var(--panel-alt); color: var(--text); font-family: 'DM Sans', sans-serif;
}
.contra-lista:hover{ border-color: var(--acento); }
.contra-lista strong{ display:flex; align-items:center; gap: 0.4rem; font-size: 0.92rem; }
.contra-lista span, .contra-lista small{ font-size: 0.75rem; color: var(--text-muted); }
.contra-cabecera{
  display:flex; align-items:center; flex-wrap: wrap; gap: 0.6rem 0.9rem; padding: 0.7rem 0.9rem; border-radius: 10px;
  background: var(--panel-alt); border: 1px solid var(--border); border-left: 4px solid var(--acento);
  position: sticky; top: calc(var(--navbar-h) + 0.5rem); z-index: 3;   /* reloj y caja siempre a la vista (debajo de la navbar) */
  box-shadow: 0 6px 14px rgba(0,0,0,0.55);
}
.contra-cabecera .contra-entrada{ flex-basis: 100%; }
.contra-cabecera strong{ flex: 1; display:flex; align-items:center; gap: 0.4rem; }
.contra-reloj{ font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--aqua); }
.contra-reloj.is-poco{ color: var(--danger); animation: contra-late 1s ease infinite; }
@keyframes contra-late{ 50%{ opacity: 0.45; } }
.contra-cuenta{ font-weight: 700; font-variant-numeric: tabular-nums; }
.contra-entrada{ display:flex; align-items:center; gap: 0.75rem; }
.contra-entrada .auth-input{ flex: 1; font-size: 1rem; }
.contra-slots{ display:grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.5rem; }
.contra-slot{
  position:relative; display:flex; flex-direction:column; align-items:center; gap: 0.3rem;
  padding: 0.6rem 0.4rem; border-radius: 10px; text-align:center;
  background: var(--panel-alt); border: 1px solid var(--border);
}
.contra-slot__escudo{ width: 34px; height: 34px; object-fit: contain; filter: brightness(0) invert(0.35); transition: filter 0.3s ease; }
.contra-slot__nombre{ font-size: 0.74rem; font-weight: 700; color: var(--text-muted); overflow-wrap: break-word; hyphens: auto; line-height: 1.2; max-width: 100%; }
.contra-slot__titulos{
  position:absolute; top: 4px; right: 6px; font-size: 0.68rem; font-weight: 700; color: var(--lib-gold);
}
.contra-slot.is-hallado{ border-color: var(--lib-green); background: rgba(140,230,0,0.08); }
.contra-slot.is-hallado .contra-slot__escudo{ filter: none; }
.contra-slot.is-hallado .contra-slot__nombre{ color: var(--text); }
.contra-slot.is-nuevo{ animation: podio-sube 0.35s ease both; }
.contra-slot.is-faltante{ border-color: rgba(224,87,79,0.6); }
.contra-slot.is-faltante .contra-slot__escudo{ filter: grayscale(0.6); opacity: 0.8; }
.contra-slot.is-faltante .contra-slot__nombre{ color: var(--danger); }

/* Trayectoria misteriosa */
.trayectoria__franja .franja__celda{ height: 34px; }
.trayectoria__leyenda{ display:flex; flex-wrap:wrap; gap: 0.35rem 0.9rem; font-size: 0.72rem; color: var(--text-muted); }
.trayectoria__leyenda > span{ display:inline-flex; align-items:center; gap: 0.3rem; }
.trayectoria__pistas{ margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.trayectoria__pistas strong{ color: var(--text); }

/* Grilla SAG */
.grilla-modos{ display:flex; gap: 0.4rem; padding: 0.3rem; border-radius: 12px; background: var(--panel-alt); border: 1px solid var(--border); align-self: flex-start; }
.grilla-modo{
  display:flex; align-items:baseline; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 9px; cursor:pointer;
  border: none; background: transparent; color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 700;
}
.grilla-modo small{ font-weight: 400; font-size: 0.72rem; }
.grilla-modo:hover{ color: var(--text); }
.grilla-modo.is-activo{ background: var(--acento); color: #000; }
.grilla{
  display:grid; grid-template-columns: minmax(78px, 0.85fr) repeat(3, minmax(0, 1fr));
  gap: 0.45rem; width: 100%; max-width: 560px; margin: 0 auto;
}
.grilla__esquina{
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height: 1.1;
  border-radius: 12px; border: 1px dashed var(--border);
}
.grilla__esquina strong{ font-size: 1.6rem; color: var(--acento); font-variant-numeric: tabular-nums; }
.grilla__esquina small{ font-size: 0.68rem; color: var(--text-muted); }
.grilla__cab{ display:flex; align-items:center; justify-content:center; text-align:center; padding: 0.35rem 0.25rem; min-height: 64px; }
.grilla__cab--fila{ justify-content:flex-start; text-align:left; }
.grilla__crit{ display:flex; flex-direction:column; gap: 0.15rem; min-width: 0; }
.grilla__cab--col .grilla__crit{ align-items:center; }
.grilla__tag{
  align-self: inherit; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--lib-gold);
}
.grilla__crit--perdio .grilla__tag{ color: var(--lib-subcampeon); }
.grilla__crit--pais .grilla__tag{ color: var(--text-muted); }
.grilla__crit-nombre{ display:flex; align-items:center; gap: 0.3rem; flex-wrap: wrap; justify-content: inherit; }
.grilla__cab--col .grilla__crit-nombre{ justify-content:center; }
.grilla__crit-nombre strong{ font-size: 0.8rem; line-height: 1.15; overflow-wrap: anywhere; }
.grilla__crit-nombre .flag-icon{ width: 18px; height: 12px; flex-shrink: 0; }
.grilla__celda{
  position:relative; aspect-ratio: 1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 0.25rem;
  padding: 0.35rem; border-radius: 12px; min-width: 0;
  border: 1px solid var(--border); background: var(--panel-alt); color: var(--text);
  font-family: 'DM Sans', sans-serif; cursor:pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
button.grilla__celda:not(:disabled):hover{ border-color: var(--acento); }
.grilla__celda.is-sel{ border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--panel-alt)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 35%, transparent); }
.grilla__celda.is-ok{ cursor: default; border-color: var(--lib-green); background: rgba(140,230,0,0.08); animation: podio-sube 0.35s ease both; }
.grilla__celda.is-vacia-fin{ border-style: dashed; border-color: rgba(224,87,79,0.6); opacity: 0.75; }
.grilla__celda.is-vacia-fin .grilla__escudo{ filter: grayscale(0.7); }
.grilla__mas{ font-size: 1.8rem; font-weight: 100; color: var(--text-muted); line-height: 1; }
.grilla__celda.is-sel .grilla__mas{ color: var(--acento); }
.grilla__escudo{ width: 44%; max-width: 54px; aspect-ratio: 1; object-fit: contain; }
.grilla__club{ font-size: 0.72rem; font-weight: 700; line-height: 1.15; text-align:center; overflow-wrap: anywhere; }
.grilla__posibles{ font-size: 0.6rem; color: var(--text-muted); }
.grilla-entrada{ width: 100%; max-width: 560px; margin: 0 auto; display:flex; flex-direction:column; gap: 0.5rem; }
.grilla-entrada__pregunta{ margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.grilla-entrada__pregunta strong{ color: var(--text); }
.grilla-entrada .auth-input{ width: 100%; font-size: 1rem; }
.grilla-entrada .club-picker__option:disabled{ opacity: 0.45; cursor: default; }
.grilla__usado{ margin-left: auto; font-size: 0.7rem; color: var(--text-muted); }
.grilla__aviso{ margin: 0; min-height: 1.3em; text-align:center; font-size: 0.88rem; color: var(--text-muted); }
.grilla__aviso--ok{ color: var(--lib-green); }
.grilla__aviso--mal{ color: var(--danger); }
.grilla-fin{ padding: 0.25rem 0 0; }
.grilla-fin .juego-fin__detalle strong{ color: var(--text); }

@media (max-width: 560px){
  .grilla{ grid-template-columns: minmax(64px, 0.8fr) repeat(3, minmax(0, 1fr)); gap: 0.3rem; }
  .grilla__crit-nombre strong{ font-size: 0.7rem; }
  .grilla__tag{ font-size: 0.56rem; }
  .grilla__club{ font-size: 0.62rem; }
  .grilla__posibles{ display:none; }
  .grilla-modos{ align-self: stretch; }
  .grilla-modo{ flex: 1; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .grilla__celda.is-ok{ animation: none; }
  .grilla__celda{ transition: none; }
}

/* Accesos a los juegos desde Inicio y el Baúl */
.inicio-juegos{ flex: 1; display:flex; flex-direction:column; gap: 0.5rem; }
.inicio-juego, .juego-cta{
  display:flex; align-items:center; gap: 0.75rem; width: 100%;
  padding: 0.7rem 0.9rem; border-radius: 12px; cursor:pointer; text-align:left;
  border: 1px solid var(--border); border-left: 4px solid var(--acento, var(--aqua));
  background: var(--panel); color: var(--text); font-family: 'DM Sans', sans-serif;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.inicio-juego:hover, .juego-cta:hover{ border-color: var(--acento, var(--aqua)); transform: translateX(3px); }
.inicio-juego__texto, .juego-cta > span:nth-child(2){ flex: 1; display:flex; flex-direction:column; min-width: 0; }
.inicio-juego__texto small, .juego-cta small{ font-size: 0.75rem; color: var(--text-muted); }
.inicio-juego__flecha{ color: var(--acento); font-weight: 700; }
.juego-cta{ margin: 1.5rem 0 0; }

@media (max-width: 560px){
  .escudo-misterio__marco{ width: 140px; height: 140px; }
  .escudo-misterio__img{ width: 100px; height: 100px; }
  .contra-slots{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contra-slot__nombre{ font-size: 0.66rem; }
  .contra-cabecera{ flex-wrap: wrap; gap: 0.4rem 0.9rem; }
  .contra-cabecera strong{ flex-basis: 100%; }
  .juego-marcador{ font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce){
  .contra-reloj.is-poco, .contra-slot.is-nuevo, .juego-fin{ animation: none; }
  .inicio-juego, .juego-cta, .escudo-misterio__img{ transition: none; }
}
/* En el celular, el botón del menú (☰) flota arriba a la izquierda: la
   cabecera fija del Contrarreloj le deja lugar */
@media (max-width: 780px){
  .contra-cabecera strong{ padding-left: 3rem; min-height: 2.2rem; }
}


/* Redes sociales en Inicio (los números se editan en data.js → redes) */
.inicio-redes{ display:flex; justify-content:center; flex-wrap:wrap; gap: 0.75rem; margin: -0.5rem 0 1.75rem; }
.inicio-redes:empty{ display:none; }
.red-btn{
  display:flex; align-items:center; gap: 0.7rem;
  min-width: 200px; padding: 0.65rem 1.1rem 0.65rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); text-decoration: none; font-family: 'DM Sans', sans-serif;
  transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.red-btn:hover{ transform: translateY(-2px); }
.red-btn__icono{ width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display:flex; align-items:center; justify-content:center; }
.red-btn__texto{ display:flex; flex-direction:column; line-height: 1.15; }
.red-btn__texto strong{ font-size: 1.15rem; }
.red-btn__texto small{ font-size: 0.75rem; color: var(--text-muted); }
.red-btn--instagram .red-btn__icono{ background: rgba(103,41,125,0.35); color: #C98BE0; }
.red-btn--instagram:hover{ border-color: #A45BC0; background: rgba(103,41,125,0.14); }
.red-btn--x .red-btn__icono{ background: rgba(0,255,204,0.14); color: var(--aqua); }
.red-btn--x:hover{ border-color: var(--aqua); background: rgba(0,255,204,0.06); }
@media (max-width: 560px){
  .red-btn{ min-width: 0; flex: 1 1 150px; }
}
@media (prefers-reduced-motion: reduce){ .red-btn{ transition: none; } }


/* Ranking de hinchas de cada juego */
.juego-ranking{ border-top: 4px solid var(--acento); }
.panel .juego-ranking__titulo{ margin: 0 0 0.9rem; font-size: 1.15rem; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: normal; }
.juego-ranking__lista{ list-style:none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 0.4rem; }
.juego-ranking__fila{
  display:grid; grid-template-columns: 2rem 28px minmax(0, 1fr) auto; align-items:center; gap: 0.7rem;
  padding: 0.5rem 0.8rem; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border);
}
.juego-ranking__pos{
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 0.8rem; font-weight: 700; color: var(--text-muted); background: var(--panel);
}
.is-podio-1 .juego-ranking__pos{ background: #E8B923; color: #1a1400; }
.is-podio-2 .juego-ranking__pos{ background: #C7CDD3; color: #15181b; }
.is-podio-3 .juego-ranking__pos{ background: #C98A4B; color: #1c1005; }
.juego-ranking__escudo{ width: 28px; height: 28px; object-fit: contain; }
.juego-ranking__nombre{
  background:none; border:none; padding:0; margin:0; text-align:left; cursor:pointer;
  font: inherit; font-weight: 700; color: var(--text);
  overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
}
.juego-ranking__nombre:hover{ color: var(--aqua); text-decoration: underline; }
.juego-ranking__nombre small{ font-weight: 400; color: var(--text-muted); }
.juego-ranking__puntaje{ font-weight: 700; font-variant-numeric: tabular-nums; color: var(--acento); }
.juego-ranking__fila.is-yo{ border-color: var(--aqua); background: rgba(0,255,204,0.07); }
.juego-ranking__pie{ margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.juego-ranking__pie strong{ color: var(--text); }
/* Nota de una edición puntual (ej. título extraoficial) */
.fila-nota{
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
}
.fila-competencia{
  display: block; margin-top: 0.2rem;
  font-size: 0.7rem; font-weight: 700; color: var(--color-seccion, var(--aqua));
}
.fila-desempate{
  display: block; width: fit-content;
  margin-top: 0.3rem; padding: 0.05rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
  color: var(--color-seccion, var(--aqua));
  border: 1px solid color-mix(in srgb, var(--color-seccion, var(--aqua)) 50%, transparent);
}
.fila-nota__marca{
  margin-left: 0.1rem;
  color: var(--text-muted);
}

/* 7) Lo nuevo en SAG */
.novedades{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 0.45rem; }
.novedad{
  width: 100%; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: 0.9rem;
  padding: 0.7rem 0.95rem; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid #A45BC0;
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.novedad:hover:not(:disabled){ border-color: #A45BC0; transform: translateX(3px); }
.novedad:disabled{ cursor: default; }
.novedad__fecha{ display:flex; flex-direction:column; align-items:flex-start; gap: 0.2rem; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; min-width: 5.5rem; }
.novedad__nuevo{ font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--aqua); color: #00140F; }
.novedad__texto{ font-size: 0.9rem; font-weight: 700; line-height: 1.35; }
.novedad__flecha{ color: var(--aqua); font-weight: 700; }

/* Ranking de títulos (sección Palmarés) */
.ranking-int{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 0.4rem; }
.ranking-int__fila{
  position: relative; overflow: hidden; width: 100%;
  display:grid; grid-template-columns: 2rem 34px 1fr auto; align-items:center; gap: 0.75rem;
  padding: 0.55rem 0.9rem; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
  transition: border-color 0.15s ease;
}
.ranking-int__fila::before{
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p);
  background: linear-gradient(90deg, rgba(232,185,35,0.16), rgba(232,185,35,0.03));
  pointer-events: none;
}
.ranking-int__fila > *{ position: relative; }
.ranking-int__fila:hover:not(:disabled){ border-color: var(--lib-gold); }
.ranking-int__fila:disabled{ cursor: default; }
.ranking-int__pos{ width: 1.8rem; height: 1.8rem; border-radius: 50%; display:grid; place-items:center; font-weight: 700; font-size: 0.85rem; background: var(--panel-alt); color: var(--text); }
.is-top-1 .ranking-int__pos{ background: #E8B923; color: #1a1400; }
.is-top-2 .ranking-int__pos{ background: #C7CDD3; color: #15181b; }
.is-top-3 .ranking-int__pos{ background: #C98A4B; color: #1c1005; }
.ranking-int__escudo{ width: 34px; height: 34px; object-fit: contain; }
.ranking-int__bandera{ display:grid; place-items:center; }
.ranking-int__bandera .flag-icon{ width: 32px; height: 20px; }
.ranking-int__nombre{ display:flex; flex-direction:column; gap: 0.15rem; min-width: 0; }
.ranking-int__nombre strong{ font-size: 0.95rem; overflow-wrap: anywhere; }
.ranking-int__nombre small{ font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; }
.ranking-int__total{ display:flex; flex-direction:column; align-items:flex-end; line-height: 1.1; }
.ranking-int__total strong{ font-size: 1.35rem; color: var(--lib-gold); font-variant-numeric: tabular-nums; }
.ranking-int__total small{ font-size: 0.68rem; color: var(--text-muted); }
.ranking-int__mas{ margin-top: 0.6rem; }
@media (max-width: 560px){
  .novedad{ grid-template-columns: 1fr auto; gap: 0.35rem 0.7rem; }
  .novedad__fecha{ grid-column: 1 / -1; flex-direction: row; align-items:center; min-width: 0; }
  .ranking-int__fila{ grid-template-columns: 1.8rem 28px 1fr auto; gap: 0.55rem; padding: 0.5rem 0.7rem; }
  .ranking-int__escudo{ width: 28px; height: 28px; }
  .inicio-titulo{ flex-wrap: wrap; }
}

/* =========================================================
   Sección Palmarés
   ========================================================= */
.ranking-int__sub{ margin: 0.2rem 0 0.8rem; font-size: 0.78rem; color: var(--text-muted); }
.palm-filtros{ display:flex; flex-wrap: wrap; justify-content:center; gap: 0.6rem; }
.palm-seg{ display:inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.palm-seg::-webkit-scrollbar{ display:none; }
.palm-seg__btn{ flex-shrink: 0; }
.palm-seg__btn{
  background: none; border: none; border-radius: 999px; padding: 0.45rem 1rem;
  color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.palm-seg__btn:hover{ color: var(--text); }
.palm-seg__btn.is-activo{ background: var(--aqua); color: #00140F; }
.palm-tiempo__cabecera{ display:flex; align-items:center; justify-content:center; gap: 0.75rem; flex-wrap: wrap; color: var(--text-muted); font-size: 0.85rem; }
.palm-records{ margin: 0; }
.palm-buscador{ margin-bottom: 0.4rem; }

.palm-detalle{
  margin: 0.4rem 0 0.8rem; padding: 0.85rem 1rem; border-radius: 12px;
  background: radial-gradient(ellipse at 100% 0%, rgba(232,185,35,0.12), transparent 60%), var(--panel-alt);
  border: 1px solid rgba(232,185,35,0.45);
  animation: podio-sube 0.3s ease both;
}
.palm-detalle__cabecera{ display:flex; align-items:center; flex-wrap: wrap; gap: 0.35rem 0.8rem; margin-bottom: 0.6rem; }
.palm-detalle__cabecera strong{ font-size: 1.05rem; color: var(--text); }
.palm-detalle__cabecera span{ font-size: 0.8rem; color: var(--text-muted); }
.palm-detalle__cerrar{ margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; }
.palm-detalle__cerrar:hover{ color: var(--text); }
.palm-detalle__copa{ display:grid; grid-template-columns: 210px 1fr; gap: 0.6rem; align-items: start; padding: 0.4rem 0; border-top: 1px solid var(--border); }
.palm-detalle__nombre{ font-size: 0.82rem; font-weight: 700; color: var(--lib-gold); }
.palm-detalle__nombre small{ color: var(--text-muted); font-weight: 400; }
.palm-detalle__anios{ display:flex; flex-wrap: wrap; gap: 0.3rem; }

.palm-lideres{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; }
.palm-lider{
  position: relative; display:grid; grid-template-columns: 7.5rem 1fr auto; align-items:center; gap: 0.8rem;
  padding: 0.55rem 0 0.55rem 1.1rem; border-left: 2px solid rgba(232,185,35,0.35);
}
.palm-lider::before{ content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--lib-gold); box-shadow: 0 0 8px rgba(232,185,35,0.6); }
.palm-lider__anios{ font-size: 0.82rem; font-weight: 700; color: var(--lib-gold); font-variant-numeric: tabular-nums; }
.palm-lider__quien{ display:flex; align-items:center; gap: 0.45rem; min-width: 0; }
.palm-lider__quien strong{ font-size: 0.9rem; overflow-wrap: anywhere; }
.palm-lider__escudo{ width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.palm-lider__titulos{ font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.palm-nota{ text-align: center; }

/* Que el Palmarés nunca sea más ancho que la pantalla (es un ítem de grid) */
.palm{ min-width: 0; }

/* Palmarés: selector principal Clubes / Selecciones / Ambos */
.palm-tipo{
  position: relative;
  display:inline-flex; align-self:center;
  gap: 0.3rem; padding: 0.3rem;
  margin: 0.4rem 0 0.9rem;
  border-radius: 999px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}
.palm-tipo__btn{
  padding: 0.55rem 1.3rem;
  border: none; border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.palm-tipo__btn:hover{ color: var(--text); }
.palm-tipo__btn:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 2px; }
.palm-tipo__btn.is-activo{
  background: linear-gradient(135deg, var(--aqua), #7BE6D2);
  color: #00140F;
}

/* "Ambos": los dos rankings lado a lado, cada uno con lo suyo */
.palm-ambos{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}
.palm-col{ display:flex; flex-direction:column; gap: 0.75rem; min-width: 0; }
.palm-col__titulo{
  display:flex; align-items:baseline; justify-content:space-between; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.25rem 0 0;
  padding-bottom: 0.5rem;
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  border-bottom: 2px solid var(--aqua);
}
.palm-col--selecciones .palm-col__titulo{ border-bottom-color: #A45BC0; }
.palm-col__titulo small{ font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
.palm-col .camp-inicio__cifras{ justify-content:flex-start; }
.palm-col .camp-inicio__cifras span{ flex: 1 1 0; min-width: 0; padding: 0.5rem 0.4rem; text-align:center; }
.palm-col .camp-inicio__cifras strong{ font-size: 1.15rem; }
.palm-col--selecciones .camp-inicio__cifras strong{ color: #C48FDA; }
.palm-col .palm-detalle__copa{ grid-template-columns: 1fr; gap: 0.3rem; }
@media (max-width: 1100px){
  .palm-ambos{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .palm-tipo__btn{ padding: 0.5rem 0.9rem; font-size: 0.85rem; }
  .palm-col .camp-inicio__cifras span{ flex: 1 1 40%; }
}

@media (max-width: 560px){
  .palm-seg__btn{ padding: 0.4rem 0.75rem; font-size: 0.8rem; }
  .palm-detalle__copa{ grid-template-columns: 1fr; gap: 0.3rem; }
  .palm-lider{ grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; }
  .palm-lider__anios{ grid-column: 1 / -1; }
}

/* Etiquetas de la ficha del club */
/* =========================================================================
   Baúl: páginas de ranking, línea del tiempo y Random › Clubes hermanados
   ========================================================================= */
.baul-resumen{ margin: 0.9rem 0 1rem; }
.panel .baul-subtitulo{ margin: 0 0 0.75rem; font-size: 1rem; color: var(--text); }
#baulLinea .baul-linea__celda{ cursor: default; }

.hermanos__aclaracion{
  margin: 1rem 0; padding: 0.75rem 0.95rem; border-radius: 10px;
  border-left: 3px solid #F6B40E; background: var(--panel-alt);
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.5;
}
.hermanos__aclaracion strong{ color: var(--text); }
.hermanos__controles{ display:flex; flex-wrap: wrap; align-items:center; gap: 0.6rem; margin-bottom: 1rem; }
.hermanos__controles .orden-lista{ margin: 0; }
.hermanos__buscador{ flex: 1 1 240px; max-width: 360px; margin: 0; }

.hermanos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0.7rem; }
.hermanos__par{
  position: relative;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 0.35rem;
  padding: 1rem 0.6rem 0.9rem; border-radius: 14px;
  border: 1px solid var(--border); background: var(--panel-alt);
}
.hermanos__lado{
  display:flex; flex-direction:column; align-items:center; gap: 0.3rem; min-width: 0;
  background: none; border: none; padding: 0.2rem; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; color: var(--text); text-align:center;
}
button.hermanos__lado{ cursor: pointer; }
button.hermanos__lado:hover .hermanos__club{ color: var(--aqua); }
button.hermanos__lado:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 2px; }
.hermanos__escudo{ width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; }
.hermanos__escudo img{ max-width: 64px; max-height: 64px; object-fit: contain; }
.hermanos__inicial{
  width: 52px; height: 52px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: var(--panel); border: 1px solid var(--border); font-weight: 700; font-size: 1.3rem; color: var(--text-muted);
}
.hermanos__club{ font-weight: 700; font-size: 0.86rem; line-height: 1.2; overflow-wrap: anywhere; }
.hermanos__pais{ display:flex; align-items:center; gap: 0.3rem; font-size: 0.7rem; color: var(--text-muted); }
.hermanos__lazo{
  width: 38px; height: 38px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  color: #F6B40E; background: color-mix(in srgb, #F6B40E 12%, transparent); border: 1px solid color-mix(in srgb, #F6B40E 40%, transparent);
}
.hermanos__tipo{
  position:absolute; top: 0.5rem; left: 50%; transform: translateX(-50%);
  padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.65rem; font-weight: 700;
}
.hermanos__tipo--barras{ color: var(--aqua); border: 1px solid var(--aqua); }
.hermanos__tipo--institucional{ color: #B77BD0; border: 1px solid #B77BD0; }
.hermanos__par:has(.hermanos__tipo){ padding-top: 1.7rem; }

.ficha-hermanos{ margin: 0; }
.ficha-hermanos__nota{ margin: 0; display:flex; flex-wrap: wrap; align-items:center; gap: 0.4rem 0.8rem; font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 560px){
  .hermanos__escudo{ width: 52px; height: 52px; }
  .hermanos__escudo img{ max-width: 52px; max-height: 52px; }
  .hermanos__buscador{ max-width: none; }
}

/* =========================================================================
   BANNER DE LAS LISTAS DE CAMPEONES
   Trofeo opcional (banner.trofeo en data.js), título grande con un brillo
   que lo recorre de a ratos y una línea de datos abajo. Solo afecta a las
   listas de campeones (el Baúl sigue con su banner simple).
   ========================================================================= */
.lista-detallada .champions-banner{
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; flex-wrap: nowrap; gap: 1.1rem;
  padding: 1.25rem 1.4rem; border-radius: 14px; margin-bottom: 1.1rem;
  color: var(--banner-texto);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(135deg, var(--banner) 0%, color-mix(in srgb, var(--banner) 78%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 10px 26px rgba(0,0,0,0.35);
}
/* Halo suave detrás del trofeo */
.lista-detallada .champions-banner--trofeo::before{
  content: ""; position: absolute; z-index: -1; left: -30px; top: 50%;
  width: 190px; height: 190px; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 65%);
}
.champions-banner__trofeo{
  flex-shrink: 0; height: 92px; width: auto; max-width: 92px; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45));
}
.champions-banner__cuerpo{ display:flex; flex-direction:column; gap: 0.2rem; min-width: 0; flex: 1; }
.champions-banner__kicker{
  display:inline-flex; align-items:center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75;
}
.champions-banner__kicker .flag-icon{ width: 18px; height: 12px; }
.lista-detallada .champions-banner__title{
  display: block;
  font-size: clamp(1.45rem, 3.4vw, 2.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  /* Brillo: una franja clara que cruza el título cada tanto (no todo el tiempo) */
  background: linear-gradient(100deg,
    var(--banner-texto) 0%, var(--banner-texto) 44%,
    var(--banner-brillo) 50%,
    var(--banner-texto) 56%, var(--banner-texto) 100%);
  background-size: 250% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: banner-brillo 7s ease-in-out infinite;
}
@keyframes banner-brillo{
  0%, 55%{ background-position: 200% center; }
  100%{ background-position: -50% center; }
}
.champions-banner__meta{ display:flex; flex-wrap: wrap; gap: 0.2rem 0; font-size: 0.82rem; opacity: 0.85; }
.champions-banner__meta span + span::before{ content: "·"; margin: 0 0.45rem; opacity: 0.6; }
.lista-detallada .champions-banner__compartir{ flex-shrink: 0; align-self: flex-start; }

@media (max-width: 560px){
  .lista-detallada .champions-banner{ padding: 1rem; gap: 0.8rem; }
  .champions-banner__trofeo{ height: 64px; max-width: 64px; }
  .lista-detallada .champions-banner__title{ font-size: 1.35rem; }
  .champions-banner__meta{ font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce){
  .lista-detallada .champions-banner__title{ animation: none; background: none; color: var(--banner-texto); }
}

/* Trofeo en las vitrinas (fichas de clubes y selecciones) */
.ficha-trofeo{ position: relative; overflow: hidden; }
.ficha-trofeo.tiene-trofeo{ padding-right: 4.8rem; min-height: 96px; }
.ficha-trofeo__img{
  position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
  height: 70px; width: 58px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
  transition: transform 0.2s ease;
}
.ficha-trofeo:hover .ficha-trofeo__img{ transform: translateY(-50%) scale(1.06) rotate(-3deg); }
/* Nunca lo ganó (solo finales perdidas o subcampeonatos): trofeo apagado */
.ficha-trofeo__img.is-apagado, .camp-vitrina__trofeo.is-apagado{ filter: grayscale(1) brightness(0.55); opacity: 0.55; }
.camp-vitrina__lista-nombre{ display:inline-flex; align-items:center; gap: 0.5rem; }
.camp-vitrina__trofeo{ height: 30px; width: 26px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5)); }
@media (prefers-reduced-motion: reduce){ .ficha-trofeo__img{ transition: none; } }
/* =========================================================================
   Fichas de clubes y selecciones (fichas.js)
   Portada teñida con el color del escudo, índice fijo, dos columnas en
   pantallas grandes, el reloj y la historia año por año.
   ========================================================================= */
.board--single:has(> .ficha){ max-width: 1180px; }
.ficha{ gap: 1.1rem; min-width: 0; }   /* ítem de grid: nunca más ancho que la pantalla */

/* --- Portada --- */
.ficha-portada{
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--club) 42%, var(--border));
  background:
    radial-gradient(110% 95% at 0% 0%, color-mix(in srgb, var(--club) 40%, transparent), transparent 62%),
    radial-gradient(70% 90% at 100% 100%, rgba(103,41,125,0.32), transparent 70%),
    #060606;
  transition: background 0.6s ease, border-color 0.6s ease;
}
/* Franjas de camiseta en el color del club, que se apagan hacia la derecha */
.ficha-portada__franjas{
  position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--club) 13%, transparent) 0 46px, transparent 46px 92px);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,0.5) 35%, transparent 62%);
  mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,0.5) 35%, transparent 62%);
}
.ficha-portada__marca{
  position: absolute; z-index: -1; right: -3%; top: 50%;
  width: min(380px, 45%); aspect-ratio: 1; transform: translateY(-58%) rotate(-10deg);
  opacity: 0.09; pointer-events: none;
}
.ficha-portada__marca img{ width: 100%; height: 100%; object-fit: contain; filter: grayscale(0.3); }
.ficha-portada__acciones{ position: absolute; top: 1rem; right: 1rem; display:flex; gap: 0.45rem; z-index: 2; }

.ficha-portada__cuerpo{
  display:grid; grid-template-columns: auto minmax(0, 1fr); align-items:center; gap: 1.75rem;
  padding: 2.25rem 2rem 1.6rem;
}
.ficha-portada__escudo{
  position: relative; width: 150px;
  display:flex; flex-direction:column; align-items:center; gap: 0.45rem;
}
.ficha-portada__escudo img{
  width: 150px; height: 150px; object-fit: contain;
  filter: drop-shadow(0 14px 30px color-mix(in srgb, var(--club) 55%, transparent));
  animation: ficha-escudo 0.6s cubic-bezier(.2,1.5,.5,1);
}
@keyframes ficha-escudo{ from{ opacity: 0; transform: scale(0.6) rotate(-10deg); } }
.ficha-estrellas{
  display:flex; align-items:center; justify-content:center; gap: 0.15rem;
  color: var(--lib-gold); filter: drop-shadow(0 0 6px rgba(232,185,35,0.55));
}
.ficha-estrellas b{ font-size: 0.9rem; margin-left: 0.15rem; }

.ficha-portada__info{ display:flex; flex-direction:column; gap: 0.45rem; min-width: 0; padding-right: 7.5rem; }
.ficha-portada__meta{ display:flex; align-items:center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.ficha-portada__nombre{
  margin: 0; font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 700;
  line-height: 0.95; letter-spacing: -0.035em; overflow-wrap: anywhere;
  text-shadow: 0 6px 30px rgba(0,0,0,0.5);
}

/* Marcador: los números principales, como un tablero */
.ficha-marcador{
  margin: 0; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.5);
}
.ficha-marcador__item{ padding: 0.9rem 1rem 1rem; display:flex; flex-direction:column-reverse; gap: 0.1rem; min-width: 0; }
.ficha-marcador__item + .ficha-marcador__item{ border-left: 1px solid rgba(255,255,255,0.08); }
.ficha-marcador dd{ margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.ficha-marcador dt{ font-size: 0.74rem; color: var(--text-muted); overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-marcador__item.is-oro dd{ color: var(--lib-gold); }

/* --- Índice fijo --- */
.ficha-indice{
  position: sticky; top: var(--navbar-h); z-index: 40;
  margin: 0 -0.25rem; padding: 0.45rem 0.25rem;
  background: rgba(0,0,0,0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.ficha-indice__pista{ display:flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; }
.ficha-indice__pista::-webkit-scrollbar{ display:none; }
.ficha-indice__btn{
  flex-shrink: 0; padding: 0.42rem 0.85rem; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--text-muted);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.8rem; cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.ficha-indice__btn:hover{ color: var(--text); background: rgba(255,255,255,0.05); }
.ficha-indice__btn.is-activo{
  color: var(--text); border-color: color-mix(in srgb, var(--club) 60%, transparent);
  background: color-mix(in srgb, var(--club) 20%, transparent);
}
.ficha-indice__btn:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 1px; }
.ficha .ficha-bloque{ scroll-margin-top: calc(var(--navbar-h) + 64px); }

/* --- Cuerpo: dos columnas en pantallas grandes --- */
.ficha-cuerpo{ display:grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.ficha-principal, .ficha-lateral{ display:flex; flex-direction:column; gap: 1rem; min-width: 0; }
@media (min-width: 1200px){
  .ficha-cuerpo{ grid-template-columns: minmax(0, 1fr) 330px; }
}
.ficha-bloque__titulo{ font-size: 1.05rem; }

/* Rankings en la columna lateral: filas compactas */
.ficha-lateral .ficha-rankings{ grid-template-columns: 1fr; gap: 0.35rem; }
.ficha-lateral .ficha-ranking{ flex-direction: row; align-items:center; gap: 0.75rem; padding: 0.55rem 0.75rem; }
.ficha-lateral .ficha-ranking__n{ min-width: 4.4rem; font-size: 1.35rem; }
.ficha-lateral .ficha-ranking__n small{ display:block; font-size: 0.68rem; }
.ficha-lateral .ficha-momento__anio{ min-width: 3.4rem; }

/* --- Vitrina --- */
.ficha-vitrina{ grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 0.7rem; }
.ficha-trofeo{
  position: relative; overflow: hidden; gap: 0.25rem; min-height: 132px;
  padding: 1rem 1rem 0.9rem; border-radius: 14px;
  border: 1px solid var(--border); border-left-width: 1px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 24%, var(--panel-alt)), var(--panel-alt) 62%);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ficha-trofeo::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--acento); }
.ficha-trofeo:hover{ border-color: color-mix(in srgb, var(--acento) 70%, white); transform: translateY(-2px); }
.ficha-trofeo__n{ font-size: 2.6rem; color: color-mix(in srgb, var(--acento) 65%, white); letter-spacing: -0.03em; }
.ficha-trofeo__anios em{ font-style: normal; font-weight: 700; color: var(--text); white-space: nowrap; }
.ficha-trofeo.is-sin{ background: var(--panel-alt); }
.ficha-trofeo.is-sin .ficha-trofeo__n{ color: var(--text-muted); }

/* --- El reloj --- */
.ficha-reloj{ list-style: none; margin: 0; padding: 0; display:grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 0.5rem; }
.ficha-lateral .ficha-reloj{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ficha-reloj__item{
  display:flex; flex-direction:column; gap: 0.1rem; min-width: 0;
  padding: 0.7rem 0.75rem; border-radius: 12px; background: var(--panel-alt); border: 1px solid var(--border);
}
.ficha-reloj__item strong{ font-size: 1.7rem; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--text); }
.ficha-reloj__titulo{ font-size: 0.74rem; font-weight: 700; color: var(--text); }
.ficha-reloj__texto{ font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.ficha-reloj__item.is-vivo{ border-color: rgba(0,255,204,0.45); }
.ficha-reloj__item.is-vivo strong{ color: var(--aqua); }
.ficha-reloj__item.is-alerta{ border-color: rgba(224,87,79,0.45); }
.ficha-reloj__item.is-alerta strong{ color: #F08A83; }

/* --- Su historia: año por año --- */
.ficha-historia{ display:flex; flex-direction:column; gap: 0.8rem; }
.ficha-historia__vistas{ align-self: flex-start; margin: 0; }
.ficha-historia__anios{ display:flex; flex-direction:column; gap: 0.35rem; }
.ficha-historia__anios[hidden], .ficha-historia__decadas[hidden]{ display:none; }
.ficha-anios{
  display:flex; align-items:flex-end; gap: 1px; height: 120px;
  padding: 0 0.1rem; border-bottom: 1px solid var(--border);
}
.ficha-anios__celda{
  position: relative; flex: 1 1 0; min-width: 0; height: 100%;
  padding: 0; border: none; border-radius: 3px 3px 0 0; background: transparent; cursor: pointer;
}
.ficha-anios__celda::before{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: max(var(--alto), 3px); border-radius: 2px 2px 0 0;
  background: rgba(255,255,255,0.08);
  transform-origin: bottom; animation: ficha-decada 0.5s ease-out both;
}
.ficha-anios__celda.is-titulo::before{ background: linear-gradient(180deg, #F7DC7A, var(--lib-gold)); }
.ficha-anios__celda.is-final::before{ background: var(--lib-subcampeon); }
.ficha-anios__celda.is-sub::before{ background: color-mix(in srgb, var(--lib-subcampeon) 50%, transparent); }
.ficha-anios__celda.is-jugo::before{ background: color-mix(in srgb, var(--club) 60%, transparent); }
.ficha-anios__celda:hover{ background: rgba(255,255,255,0.05); }
.ficha-anios__celda.is-sel{ background: rgba(255,255,255,0.1); }
.ficha-anios__celda.is-sel::after{
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom: 0; border-top-color: var(--text);
}
.ficha-anios__celda:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 1px; z-index: 1; }
.ficha-anios__marcas{ position: relative; height: 1.1rem; margin-top: 0.2rem; }
.ficha-anios__marcas span{ position: absolute; transform: translateX(-50%); font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ficha-anios__leyenda{ display:flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.72rem; color: var(--text-muted); }
.ficha-anios__leyenda span{ display:inline-flex; align-items:center; gap: 0.35rem; }
.ficha-anios__leyenda i{ width: 10px; height: 10px; border-radius: 2px; background: rgba(255,255,255,0.08); }
.ficha-anios__leyenda i.is-titulo{ background: var(--lib-gold); }
.ficha-anios__leyenda i.is-final{ background: var(--lib-subcampeon); }
.ficha-anios__leyenda i.is-sub{ background: color-mix(in srgb, var(--lib-subcampeon) 50%, transparent); }
.ficha-anios__leyenda i.is-jugo{ background: color-mix(in srgb, var(--club) 60%, transparent); }

.ficha-anio-detalle{
  display:grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.3rem 1rem;
  margin-top: 0.35rem; padding: 0.9rem 1rem; border-radius: 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-left: 3px solid var(--club);
}
.ficha-anio-detalle__anio{ grid-row: span 2; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ficha-anio-detalle__chip{ justify-self: start; padding: 0.1rem 0.55rem; border-radius: 999px; background: rgba(232,185,35,0.15); color: var(--lib-gold); font-size: 0.72rem; font-weight: 700; }
.ficha-anio-detalle__vacio{ margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.ficha-anio-detalle__lista{ grid-column: 2; list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 0.3rem; }
.ficha-anio-detalle__fila{ display:flex; align-items:baseline; gap: 0.6rem; font-size: 0.86rem; min-width: 0; }
.ficha-anio-detalle__fila small{ color: var(--text-muted); }
.ficha-anio-detalle__rotulo{
  flex-shrink: 0; min-width: 6.8rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
}
.ficha-anio-detalle__fila.is-titulo .ficha-anio-detalle__rotulo{ color: var(--lib-gold); }
.ficha-anio-detalle__fila.is-final .ficha-anio-detalle__rotulo,
.ficha-anio-detalle__fila.is-sub .ficha-anio-detalle__rotulo{ color: var(--lib-subcampeon); }
.ficha-anio-detalle__fila.is-jugo > span:last-child{ color: inherit; }
.ficha-anio-detalle__link{ padding: 0; border: none; background: none; font: inherit; color: var(--text); text-align:left; cursor: pointer; }
.ficha-anio-detalle__link:hover{ color: var(--club); text-decoration: underline; }

/* --- Celular y tablet --- */
@media (max-width: 760px){
  .ficha-portada__cuerpo{ grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1rem; padding: 3.6rem 1.1rem 1.25rem; }
  .ficha-portada__escudo, .ficha-portada__escudo img{ width: 116px; }
  .ficha-portada__escudo img{ height: 116px; }
  .ficha-portada__info{ align-items: center; padding-right: 0; }
  .ficha-portada__franjas{ -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
  .ficha-portada__marca{ display: none; }
  .ficha-marcador{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-marcador__item{ align-items:center; text-align:center; }
  .ficha-marcador__item:nth-child(3){ border-left: none; }
  .ficha-marcador__item:nth-child(n+3){ border-top: 1px solid rgba(255,255,255,0.08); }
  /* Vitrina en dos columnas: el trofeo pasa a la esquina de arriba */
  .ficha-vitrina{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .ficha-trofeo, .ficha-trofeo.tiene-trofeo{ min-height: 0; padding: 0.8rem 0.75rem 0.75rem; }
  .ficha-trofeo__img{ top: 0.7rem; right: 0.55rem; transform: none; height: 44px; width: 38px; }
  .ficha-trofeo:hover .ficha-trofeo__img{ transform: scale(1.06) rotate(-3deg); }
  .ficha-trofeo__n{ font-size: 2.1rem; }
  .ficha-trofeo__nombre{ font-size: 0.84rem; }
  .ficha-anios{ height: 96px; }
  .ficha-anio-detalle{ grid-template-columns: 1fr; }
  .ficha-anio-detalle__anio{ grid-row: auto; font-size: 1.6rem; }
  .ficha-anio-detalle__lista{ grid-column: 1; }
  .ficha-anio-detalle__rotulo{ min-width: 5.8rem; }
}
@media (prefers-reduced-motion: reduce){
  .ficha-portada__escudo img, .ficha-anios__celda::before{ animation: none; }
  .ficha-trofeo{ transition: none; }
}

/* =========================================================================
   Portada de Listas de campeones (campeones-inicio.js)
   Grupos por confederación y país, tarjetas con el trofeo de cada lista,
   cronología de las competencias y máquina del tiempo compacta.
   ========================================================================= */
/* --- Grupos --- */
.camp-grupos{ display:flex; flex-direction:column; gap: 1.4rem; }
.camp-grupo{ display:flex; flex-direction:column; gap: 0.65rem; }
.camp-grupo__cab{
  display:flex; align-items:baseline; justify-content:space-between; gap: 0.4rem 1rem; flex-wrap: wrap;
  padding-bottom: 0.45rem; border-bottom: 1px solid var(--border);
}
.camp-grupo__cab h3{ margin: 0; display:flex; align-items:center; gap: 0.45rem; font-size: 1.05rem; }
.camp-grupo__cab h3 .flag-icon{ width: 22px; height: 15px; }
.camp-grupo__cab span{ font-size: 0.78rem; color: var(--text-muted); }
.camp-grupo__grilla{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 0.6rem; }

/* --- Tarjeta: trofeo a la izquierda, campeón a la derecha --- */
.camp-card{
  --acento: var(--aqua);
  position: relative; overflow: hidden;
  display:grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 0.8rem;
  padding: 0.8rem 0.9rem 0.8rem 0.75rem; border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 60%),
    var(--panel);
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.camp-card::before{ content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
.camp-card:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--acento) 70%, var(--border)); }
.camp-card:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 2px; }
.camp-card__trofeo{
  width: 52px; height: 60px; display:grid; place-items:center;
  color: color-mix(in srgb, var(--acento) 60%, white);
}
.camp-card__trofeo img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)); transition: transform 0.2s ease; }
.camp-card:hover .camp-card__trofeo img{ transform: scale(1.07) rotate(-3deg); }
.camp-card__respaldo{ display:none; }
.sin-imagen > .camp-card__respaldo{ display:grid; place-items:center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--acento) 14%, transparent); }
.camp-card__cuerpo{ display:flex; flex-direction:column; gap: 0.25rem; min-width: 0; }
.camp-card__comp{ font-size: 0.74rem; font-weight: 700; color: color-mix(in srgb, var(--acento) 55%, white); overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-card__comp small{ font-weight: 400; color: var(--text-muted); }
.camp-card__campeon{ display:flex; align-items:center; gap: 0.5rem; min-width: 0; }
.camp-card__campeon strong{ font-size: 1rem; line-height: 1.2; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
img.camp-card__escudo{ width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; }
.camp-card__meta{ display:flex; align-items:center; flex-wrap: wrap; gap: 0.3rem 0.5rem; font-size: 0.73rem; color: var(--text-muted); }
.camp-card__badge{ padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; }
.camp-card__badge--racha{ background: var(--lib-gold); color: #111; }
.camp-card__badge--nuevo{ background: var(--aqua); color: #111; }
.camp-card__disputa{ display:flex; align-items:center; gap: 0.35rem; font-size: 0.72rem; color: var(--lib-green); font-weight: 700; }
/* Competencias que ya no se juegan: más apagadas */
.camp-card.is-extinta{ background: var(--panel); }
.camp-card.is-extinta .camp-card__trofeo img{ filter: grayscale(0.7) brightness(0.8) drop-shadow(0 4px 10px rgba(0,0,0,0.6)); }
.camp-card.is-extinta::before{ opacity: 0.5; }

/* --- Cronología --- */
.camp-crono__resumen{ margin: 0 0 0.9rem; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }
.camp-crono__resumen strong{ color: var(--text); }
.camp-crono{ --col-nombre: 190px; --col-rango: 84px; display:flex; flex-direction:column; }
.camp-crono__eje, .camp-crono__fila{
  display:grid; grid-template-columns: var(--col-nombre) minmax(0, 1fr) var(--col-rango); align-items:center; gap: 0.75rem;
}
.camp-crono__eje{ position: sticky; top: var(--navbar-h); z-index: 2; padding: 0.3rem 0; background: var(--panel); border-bottom: 1px solid var(--border); }
.camp-crono__eje .camp-crono__pista{ height: 1rem; }
.camp-crono__eje b{ position: absolute; transform: translateX(-50%); font-size: 0.68rem; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.camp-crono__grupo{ margin: 0.8rem 0 0.2rem; display:flex; align-items:center; gap: 0.4rem; font-size: 0.76rem; font-weight: 700; color: var(--text-muted); }
.camp-crono__grupo .flag-icon{ width: 18px; height: 12px; }
.camp-crono__fila{
  width: 100%; padding: 0.22rem 0; border: none; border-radius: 6px; background: transparent;
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
}
.camp-crono__fila:hover{ background: rgba(255,255,255,0.05); }
.camp-crono__fila:hover .camp-crono__nombre{ color: color-mix(in srgb, var(--acento) 55%, white); }
.camp-crono__fila:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 0; }
.camp-crono__nombre{ font-size: 0.8rem; font-weight: 700; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-crono__pista{
  position: relative; height: 14px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 10%);
}
.camp-crono__barra{
  position: absolute; top: 3px; bottom: 3px; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 55%, transparent), color-mix(in srgb, var(--acento) 85%, white));
  transform-origin: left; animation: camp-crono 0.7s ease-out both;
}
.camp-crono__fila:not(.is-extinta) .camp-crono__barra{
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 55%, transparent), color-mix(in srgb, var(--acento) 90%, white) 97%, var(--aqua));
}
.camp-crono__fila.is-extinta .camp-crono__barra{ background: color-mix(in srgb, var(--acento) 40%, #333); }
@keyframes camp-crono{ from{ transform: scaleX(0); } }
.camp-crono__pista i{ position: absolute; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(255,255,255,0.75); }
.camp-crono__fila.is-extinta .camp-crono__pista i{ background: rgba(255,255,255,0.45); }
.camp-crono__rango{ font-size: 0.72rem; color: var(--text-muted); text-align:right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.camp-crono__leyenda{ display:flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.9rem; font-size: 0.72rem; color: var(--text-muted); }
.camp-crono__leyenda span{ display:inline-flex; align-items:center; gap: 0.4rem; }
.camp-crono__leyenda i{ display:inline-block; width: 18px; height: 8px; border-radius: 999px; }
.camp-crono__leyenda i.is-viva{ background: linear-gradient(90deg, rgba(0,255,204,0.4), var(--aqua)); }
.camp-crono__leyenda i.is-extinta{ background: #4a4a4a; }
.camp-crono__leyenda i.is-edicion{ width: 2px; height: 12px; border-radius: 1px; background: rgba(255,255,255,0.75); }

/* --- Máquina del tiempo: solo las que tuvieron campeón ese año --- */
.camp-tiempo__hace{ margin: 0.9rem 0 0.7rem; text-align:center; font-size: 0.82rem; color: var(--text-muted); }
.camp-tiempo__grilla{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 0.55rem; }
.camp-card--tiempo{ animation: camp-aparece 0.35s ease-out both; }
@keyframes camp-aparece{ from{ opacity: 0; transform: translateY(6px); } }
.camp-tiempo__resto{ display:flex; align-items:center; gap: 0.45rem; margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.camp-tiempo__sin{ margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted); }
.camp-tiempo__sin summary{ cursor: pointer; width: fit-content; font-weight: 700; }
.camp-tiempo__sin summary:hover{ color: var(--text); }
.camp-tiempo__sin p{ margin: 0.5rem 0 0; line-height: 1.6; }
.camp-tiempo__sin small{ color: var(--lib-gray); }

@media (max-width: 640px){
  .camp-grupo__grilla, .camp-tiempo__grilla{ grid-template-columns: 1fr; gap: 0.45rem; }
  .camp-card{ grid-template-columns: 40px minmax(0, 1fr); gap: 0.65rem; padding: 0.6rem 0.75rem 0.6rem 0.65rem; border-radius: 12px; }
  .camp-card__trofeo{ width: 40px; height: 46px; }
  .camp-card__cuerpo{ gap: 0.15rem; }
  .camp-card__campeon strong{ font-size: 0.95rem; }
  img.camp-card__escudo{ width: 22px; height: 22px; }
  .camp-crono{ --col-nombre: 104px; --col-rango: 0px; }
  .camp-crono__eje, .camp-crono__fila{ gap: 0.5rem; }
  .camp-crono__rango{ display:none; }
  .camp-crono__nombre{ font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce){
  .camp-crono__barra, .camp-card--tiempo{ animation: none; }
  .camp-card__trofeo img{ transition: none; }
}

/* =========================================================================
   Mi perfil: portada con nivel de hincha, insignias por categoría,
   récords en Juegos y favoritos (comunidad.js)
   ========================================================================= */
#statsBoard > .perfil-portada{ margin-bottom: 1.25rem; }
.perfil-portada{
  --club: var(--aqua);
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--club) 40%, var(--border));
  background:
    radial-gradient(110% 100% at 0% 0%, color-mix(in srgb, var(--club) 34%, transparent), transparent 60%),
    radial-gradient(70% 90% at 100% 100%, rgba(103,41,125,0.35), transparent 70%),
    #060606;
  transition: background 0.6s ease, border-color 0.6s ease;
}
.perfil-portada__franjas{
  position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--club) 12%, transparent) 0 40px, transparent 40px 80px);
  -webkit-mask-image: linear-gradient(100deg, #000, transparent 55%);
  mask-image: linear-gradient(100deg, #000, transparent 55%);
}
.perfil-portada__principal{
  display:grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 280px); align-items:center; gap: 1.4rem;
  padding: 1.75rem 1.75rem 1.4rem;
}
.perfil-portada__avatar{
  width: 104px; height: 104px; font-size: 2.4rem;
  background: linear-gradient(135deg, var(--club), var(--purple));
  box-shadow: 0 0 0 3px #060606, 0 0 0 5px color-mix(in srgb, var(--club) 70%, transparent), 0 12px 30px rgba(0,0,0,0.5);
}
.perfil-portada .perfil-hero__nombre{ font-size: clamp(1.6rem, 3.6vw, 2.2rem); letter-spacing: -0.02em; }
.perfil-portada__club{
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--text);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--club) 60%, transparent); text-underline-offset: 3px;
}
.perfil-portada__club:hover{ color: color-mix(in srgb, var(--club) 60%, white); }

/* Nivel de hincha */
.perfil-nivel{
  display:flex; flex-direction:column; gap: 0.3rem;
  padding: 0.9rem 1rem; border-radius: 14px;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08);
}
.perfil-nivel:empty{ display:none; }
.perfil-nivel__rotulo{ font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.perfil-nivel__nombre{
  font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--aqua), #fff 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.perfil-nivel__barra{ height: 8px; margin-top: 0.3rem; border-radius: 999px; background: rgba(255,255,255,0.08); overflow:hidden; }
.perfil-nivel__barra span{ display:block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), var(--purple)); transition: width 0.6s ease; }
.perfil-nivel__texto{ font-size: 0.74rem; color: var(--text-muted); }

.perfil-portada__resumen{
  margin: 0; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.45);
}
.perfil-portada__resumen:empty{ display:none; }
.perfil-portada__resumen div{ display:flex; flex-direction:column; gap: 0.1rem; padding: 0.8rem 1rem 0.9rem; }
.perfil-portada__resumen div + div{ border-left: 1px solid rgba(255,255,255,0.08); }
.perfil-portada__resumen dd{ margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.perfil-portada__resumen div:first-child dd{ color: var(--lib-gold); }
.perfil-portada__resumen dt{ font-size: 0.74rem; color: var(--text-muted); }

/* Insignias */
.insignias-cab{ display:flex; align-items:center; justify-content:space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.insignias-cab .perfil-card__titulo{ margin: 0; }
.insignias-cab .perfil-card__titulo small{ font-weight: 400; font-size: 0.8rem; color: var(--text-muted); margin-left: 0.3rem; }
.insignias-cab .orden-lista{ margin: 0; }
.insignia-proxima{
  display:grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items:center; gap: 0.9rem;
  margin-bottom: 1.1rem; padding: 0.85rem 1rem; border-radius: 14px;
  border: 1px dashed rgba(0,255,204,0.45);
  background: linear-gradient(90deg, rgba(0,255,204,0.08), transparent 70%);
}
.insignia-proxima__icono{ font-size: 2rem; line-height: 1; }
.insignia-proxima__texto{ display:flex; flex-direction:column; gap: 0.15rem; min-width: 0; }
.insignia-proxima__texto small{ font-size: 0.7rem; font-weight: 700; color: var(--aqua); }
.insignia-proxima__texto strong{ font-size: 0.95rem; }
.insignia-proxima__texto em{ font-style: normal; font-weight: 400; font-size: 0.75rem; color: var(--lib-gold); margin-left: 0.3rem; }
.insignia-proxima__texto > span{ font-size: 0.78rem; color: var(--text-muted); }
.insignia-proxima .insignia__barra{ max-width: 320px; margin-top: 0.35rem; }
.insignia-proxima__n{ font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.insignias-grupo + .insignias-grupo{ margin-top: 1rem; }
.insignias-grupo__titulo{ display:flex; align-items:center; gap: 0.5rem; margin: 0 0 0.55rem; font-size: 0.8rem; font-weight: 700; color: var(--text); }
.insignias-grupo__titulo span{ font-weight: 400; color: var(--text-muted); }
.insignias{ grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.insignia{ position: relative; gap: 0.2rem; padding: 0.85rem 0.55rem 0.7rem; filter: none; opacity: 1; }
.insignia:not(.insignia--ok) .insignia__icono{ filter: grayscale(1); opacity: 0.4; }
.insignia:not(.insignia--ok) .insignia__nombre{ color: var(--text-muted); }
.insignia--ok{
  border-color: color-mix(in srgb, var(--lib-gold) 45%, transparent);
  background: linear-gradient(180deg, rgba(232,185,35,0.13), var(--panel-alt) 70%);
}
.insignia--ok .insignia__icono{ filter: drop-shadow(0 3px 8px rgba(232,185,35,0.35)); }
.insignia__pts{ margin-top: 0.15rem; font-size: 0.66rem; font-weight: 700; color: var(--lib-gold); }
.insignia__avance{ font-size: 0.66rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.insignia__barra{ width: 100%; height: 4px; margin-top: 0.3rem; border-radius: 999px; background: rgba(255,255,255,0.08); overflow:hidden; }
.insignia__barra span{ display:block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), var(--purple)); }
.insignias-nota{ margin: 1rem 0 0; font-size: 0.72rem; color: var(--text-muted); }

/* Récords en Juegos */
.perfil-juegos__resumen{ margin: 0 0 0.7rem; font-size: 0.82rem; color: var(--text-muted); }
.perfil-juegos{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 0.35rem; }
.perfil-juego{
  display:flex; align-items:center; justify-content:space-between; gap: 0.75rem; width: 100%;
  padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-alt);
  color: var(--text); font-family: 'DM Sans', sans-serif; text-align:left; cursor: pointer;
}
.perfil-juego:hover{ border-color: var(--aqua); }
.perfil-juego__nombre{ font-size: 0.85rem; font-weight: 700; }
.perfil-juego__record{ font-size: 0.75rem; color: var(--text-muted); text-align:right; }
.perfil-juego.is-jugado .perfil-juego__record{ color: var(--lib-gold); font-weight: 700; }

/* Favoritos */
.perfil-sub{ margin: 0 0 0.45rem; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.perfil-chips{ margin: 0 0 0.9rem; }
.perfil-chips:last-child{ margin-bottom: 0; }

@media (max-width: 900px){
  .perfil-portada__principal{ grid-template-columns: auto minmax(0, 1fr); }
  .perfil-nivel{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .perfil-portada__principal{ grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1.4rem 1rem 1.1rem; }
  .perfil-portada .perfil-hero__nombre, .perfil-portada .perfil-hero__linea{ justify-content:center; }
  .perfil-nivel{ width: 100%; box-sizing: border-box; text-align: left; }
  .perfil-portada__avatar{ width: 88px; height: 88px; }
  .perfil-portada__resumen{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfil-portada__resumen div{ align-items:center; text-align:center; }
  .perfil-portada__resumen div:nth-child(3){ border-left: none; }
  .perfil-portada__resumen div:nth-child(n+3){ border-top: 1px solid rgba(255,255,255,0.08); }
  .insignias{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insignia-proxima{ grid-template-columns: auto minmax(0, 1fr); }
  .insignia-proxima__n{ grid-column: 2; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce){
  .perfil-portada, .perfil-nivel__barra span{ transition: none; }
}

/* Siglas al lado del club (ej. Trofeo de Campeones: PD, CLP) y sus referencias */
.fila-siglas{ display: inline-flex; flex-wrap: wrap; gap: 0.2rem; margin-left: 0.15rem; }
.fila-sigla{
  display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.4;
  color: var(--color-seccion, var(--aqua));
  border: 1px solid color-mix(in srgb, var(--color-seccion, var(--aqua)) 50%, transparent);
  white-space: nowrap;
}
.siglas-leyenda{
  display: grid; gap: 0.4rem; margin: 1rem 0 0; padding: 0.9rem 1rem;
  border-radius: 12px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.siglas-leyenda > div{ display: flex; align-items: center; gap: 0.6rem; }
.siglas-leyenda dt{ flex: 0 0 3.2rem; }
.siglas-leyenda dd{ margin: 0; font-size: 0.85rem; color: var(--text-muted); }

/* Listas de medallas (Juegos Olímpicos): banderas en vez de escudos y medallero */
.table-flag{ display: inline-flex; flex-shrink: 0; }
.table-flag .flag-icon{ width: 26px; height: 17px; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.leyenda--oro::before{ background: #E8B923; }
.leyenda--plata::before{ background: #C9CED6; }
.leyenda--bronce::before{ background: #CD7F32; }
.palmares-barra--medallas .palmares-barra__t{ background: #E8B923; }
.palmares-barra--medallas .palmares-barra__s{ background: #C9CED6; opacity: 1; }
.palmares-barra--medallas .palmares-barra__b{ background: #CD7F32; }
@media (max-width: 560px){
  .table-flag .flag-icon{ width: 20px; height: 13px; }
}

/* Edición que no se definió ({ anio, desierto: "No se definió" }) */
.fila-desierta{ font-size: 0.85rem; font-style: italic; color: var(--text-muted); }

/* ===== Baúl › ¿Quién eliminó a? (cuadrícula año por año) ===== */
.elim-desc{ margin: 0.8rem 0 0.4rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.elim-clubes{ display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.elim-clubes .club-chip img{ width: 20px; height: 20px; object-fit: contain; }
.elim-clubes .club-chip.is-activo{ border-color: var(--aqua); box-shadow: 0 0 0 1px var(--aqua) inset; color: var(--aqua); }

.elim-cabecera{ display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.elim-cabecera__escudo{ width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
.elim-cabecera__comp{ display: block; color: var(--oro); font-size: 0.85rem; letter-spacing: 0.02em; }
.elim-cabecera__titulo{ margin: 0.1rem 0 0.25rem; color: var(--text); background: none; -webkit-text-fill-color: currentColor; font-size: clamp(1.25rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.15; }
.elim-cabecera__meta{ font-size: 0.8rem; color: var(--text-muted); }

.elim-grilla{
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem 0.35rem; align-items: end;
}
.elim-celda{ display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 0; }
.elim-celda__icono{ height: 58px; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.elim-celda__icono img{ max-width: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
.elim-n1 img{ width: 52px; height: 52px; }
.elim-n2 img{ width: 38px; height: 38px; }
.elim-n2 img + img{ margin-left: -12px; }
.elim-n3{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; place-items: center; }
.elim-n3 img{ width: 30px; height: 30px; }
.elim-n3 img:first-child{ grid-column: 1 / span 2; }
.elim-trofeo{ width: auto; height: 54px; }
.elim-trofeo-emoji{ font-size: 2rem; }
.elim-sin-escudo{
  font-size: 0.6rem; font-weight: 700; line-height: 1.15; text-align: center; color: var(--text);
  /* hasta 3 renglones (sin -webkit-line-clamp, que VS Code marca como error) */
  max-height: 3.45em; overflow: hidden; overflow-wrap: anywhere;
}
.elim-celda__anio{ font-weight: 700; font-size: clamp(0.72rem, 1.5vw, 1.05rem); font-variant-numeric: tabular-nums; color: var(--text); }
.elim-celda--campeon .elim-celda__anio{ color: var(--oro); }
.elim-celda--no .elim-celda__anio{ color: rgba(255,255,255,0.22); font-weight: 400; }
.elim-celda--jugo, .elim-celda--campeon{ cursor: default; }
.elim-celda--jugo:hover .elim-celda__icono img{ transform: scale(1.08); transition: transform 0.15s ease; }

.elim-leyenda{ display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 1.4rem 0 0; font-size: 0.75rem; color: var(--text-muted); }
.elim-leyenda__oro{ color: var(--oro); font-weight: 700; }
.elim-leyenda__apagado{ opacity: 0.6; }

@media (max-width: 760px){
  .elim-grilla{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.8rem 0.3rem; }
  .elim-cabecera__escudo{ width: 56px; height: 56px; }
}

/* Banner dorado de "¿Quién eliminó a?" */
.elim-banner{
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.4rem 1.6rem; border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(135deg, #F7DC7A 0%, #E8B923 45%, #B8860B 100%);
  color: #1A1405;
  box-shadow: 0 10px 30px rgba(232,185,35,0.18), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.elim-banner::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 60%);
  transform: translateX(-100%); animation: elim-brillo 5s ease-in-out infinite;
}
@keyframes elim-brillo{ 0%, 60%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); } }
.elim-banner__trofeo{ height: 92px; width: auto; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)); }
.elim-banner__cuerpo{ position: relative; z-index: 1; min-width: 0; }
.elim-banner__kicker{ display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(26,20,5,0.7); }
.elim-banner__titulo{ margin: 0.2rem 0 0.45rem; font-size: clamp(1.35rem, 3.2vw, 2.1rem); font-weight: 700; line-height: 1.12; color: #1A1405; -webkit-text-fill-color: #1A1405; background: none; }
.elim-banner__desc{ margin: 0; font-size: 0.92rem; line-height: 1.5; color: rgba(26,20,5,0.85); max-width: 62ch; }
.elim-banner + .subtabs{ margin-top: 1.1rem; }
@media (max-width: 560px){
  .elim-banner{ padding: 1.1rem 1.1rem; gap: 0.8rem; }
  .elim-banner__trofeo{ height: 64px; }
}
@media (prefers-reduced-motion: reduce){ .elim-banner::after{ animation: none; } }
/* (más específico que ".panel h2", que achica y tiñe los títulos) */
.panel .elim-banner__titulo{ font-size: clamp(1.35rem, 3.2vw, 2.1rem); color: #1A1405; -webkit-text-fill-color: #1A1405; text-transform: none; letter-spacing: normal; margin: 0.2rem 0 0.45rem; }
.panel .elim-cabecera__titulo{ font-size: clamp(1.25rem, 3vw, 1.9rem); color: var(--text); -webkit-text-fill-color: currentColor; text-transform: none; letter-spacing: normal; margin: 0.1rem 0 0.25rem; }

/* Portada del Baúl: tarjeta de "¿Quién eliminó a?" (más ancha, dorada) */
.baul-card--elim{ grid-column: 1 / -1; background: linear-gradient(135deg, rgba(232,185,35,0.16), var(--panel) 55%); }
.baul-elim__clubes{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 0.5rem; margin: 0.4rem 0; }
.baul-elim__club{
  display: flex; align-items: center; gap: 0.6rem; min-width: 0;
  padding: 0.55rem 0.7rem; border-radius: 10px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.baul-elim__club:hover{ border-color: var(--lib-gold); transform: translateY(-2px); }
.baul-elim__escudo{ width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.baul-elim__texto{ display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.baul-elim__texto strong{ font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baul-elim__texto small{ font-size: 0.72rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baul-club__mini{ width: 30px; height: 30px; object-fit: contain; }
@media (prefers-reduced-motion: reduce){ .baul-elim__club{ transition: none; } }

/* =========================================================================
   JUEGOS · portada nueva, tiempo por pregunta, atajos y rankings por semana
   ========================================================================= */

/* --- Portada --- */
.jp{ display:flex; flex-direction:column; gap: 1.5rem; }
.jp-cabecera{
  display:grid; grid-template-columns: minmax(0, 1fr) auto; align-items:end; gap: 0.35rem 1.5rem;
  padding: 0.5rem 0 0.25rem;
}
.jp-titulo{
  grid-column: 1; margin: 0;
  font-size: clamp(2.6rem, 7vw, 3.8rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.035em;
}
.jp-bajada{ grid-column: 1; margin: 0; max-width: 60ch; color: var(--text-muted); font-size: 0.95rem; }
.jp-resumen{
  grid-column: 2; grid-row: 1 / span 2; margin: 0; white-space: nowrap;
  font-size: 0.82rem; color: var(--text-muted);
  padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--border);
}
.jp-resumen strong{ color: var(--text); }
.jp-subtitulo{ margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }

/* Grilla del día: lo más grande de la portada */
.jp-diaria{
  display:grid; grid-template-columns: minmax(0, 1fr) auto; align-items:center; gap: 1.5rem 2.5rem;
  padding: 1.75rem; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--aqua) 38%, var(--border));
  background:
    radial-gradient(ellipse at 100% 50%, rgba(103,41,125,0.42), transparent 62%),
    var(--panel);
}
.jp-diaria__titulo{ margin: 0 0 0.45rem; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.jp-diaria__titulo span{ font-weight: 100; color: var(--text-muted); margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.jp-diaria__estado{ margin: 0 0 1.15rem; max-width: 46ch; color: var(--text-muted); font-size: 0.95rem; }
.jp-diaria__estado strong{ color: var(--text); }
.jp-diaria__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap: 0.75rem 1.25rem; }
.jp-btn{
  padding: 0.75rem 1.35rem; border: none; border-radius: 999px; cursor:pointer;
  background: var(--aqua); color: #000; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 700;
  transition: background-color 0.15s ease;
}
.jp-btn:hover{ background: #7FFFE6; }
.jp-btn:focus-visible, .jp-card:focus-visible, .jp-lider__juego:focus-visible, .juego-ranking__periodo:focus-visible{
  outline: 2px solid var(--aqua); outline-offset: 3px;
}
.jp-diaria.is-jugada .jp-btn{ background: transparent; color: var(--aqua); box-shadow: inset 0 0 0 1.5px var(--aqua); }
.jp-diaria.is-jugada .jp-btn:hover{ background: rgba(0,255,204,0.1); }
.jp-diaria__reloj{ font-size: 0.82rem; color: var(--text-muted); }
.jp-diaria__reloj strong{ color: var(--text); font-variant-numeric: tabular-nums; }
.jp-diaria__racha{ margin: 1rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.jp-diaria__racha strong{ color: var(--lib-gold); font-size: 1.05rem; }

.jp-mini{ display:grid; grid-template-columns: repeat(3, 62px); gap: 7px; }
.jp-mini__celda{
  aspect-ratio: 1; border-radius: 11px; display:flex; align-items:center; justify-content:center;
  border: 1px solid #333; background: rgba(0,0,0,0.55);
}
.jp-mini__celda img{ width: 68%; height: 68%; object-fit: contain; }
.jp-mini__celda.is-ok{ border-color: var(--aqua); background: rgba(0,255,204,0.09); animation: jp-celda 0.35s ease both; }
.jp-mini__celda.is-ok:nth-child(3n+2){ animation-delay: 0.05s; }
.jp-mini__celda.is-ok:nth-child(3n){ animation-delay: 0.1s; }
.jp-mini__celda.is-vacia{ border-style: dashed; border-color: rgba(224,87,79,0.55); }
@keyframes jp-celda{ from{ transform: scale(0.8); opacity: 0; } }

/* Tarjetas del resto de los juegos */
.jp-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; margin-top: -0.6rem; }
.jp-card{
  display:flex; flex-direction:column; gap: 0.8rem; text-align:left; cursor:pointer;
  padding: 1.1rem; border-radius: 14px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font-family: 'DM Sans', sans-serif;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.jp-card:hover{ border-color: var(--acento); background: color-mix(in srgb, var(--acento) 5%, var(--panel)); }
.jp-card__emblema{
  width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0; overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--acento) 15%, var(--panel-alt)); color: var(--acento);
}
.jp-card__emblema svg{ width: 30px; height: 30px; }
.juego-card__escudo-borroso{ width: 36px; height: 36px; object-fit: contain; filter: blur(3.5px) grayscale(0.3); }
.juego-card__franja{ display:flex; align-items:stretch; gap: 2px; width: 40px; height: 24px; }
.jcf{ flex: 1; border-radius: 2px; }
.jcf--campeon{ background: var(--lib-gold); }
.jcf--sub{ background: var(--lib-subcampeon); }
.jcf--semi{ background: var(--lib-green); }
.jcf--cuartos{ background: var(--lib-cuartos); }
.jcf--octavos{ background: var(--lib-octavos); }
.jcf--vacia{ background: #333; }
.jp-card__cuerpo{ display:flex; flex-direction:column; gap: 0.2rem; flex: 1; }
.jp-card__nombre{ font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.jp-card__formato{ font-size: 0.76rem; font-weight: 700; color: var(--acento); }
.jp-card__desc{ margin-top: 0.25rem; font-size: 0.83rem; color: var(--text-muted); }
.jp-card__pie{
  display:flex; justify-content:space-between; align-items:center; gap: 0.5rem;
  padding-top: 0.7rem; border-top: 1px solid var(--border); font-size: 0.78rem;
}
.jp-card__record{ color: var(--text); font-weight: 700; }
.jp-card__record.is-vacio{ color: var(--text-muted); font-weight: 400; }
.jp-card__cta{ color: var(--acento); font-weight: 700; }

/* Líderes de la semana */
.jp-lideres{ display:flex; flex-direction:column; gap: 0.8rem; }
.jp-lideres__cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap: 0.25rem 1rem; }
.jp-lideres__cab small{ font-size: 0.78rem; color: var(--text-muted); }
.jp-lideres__lista{ list-style:none; margin: 0; padding: 0; display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.7rem; }
.jp-lider{
  display:flex; flex-direction:column; gap: 0.55rem; padding: 0.85rem 0.9rem; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--acento);
}
.jp-lider__juego{
  align-self:flex-start; padding: 0; border: none; background: none; cursor:pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--text);
}
.jp-lider__juego:hover{ color: var(--acento); }
.jp-lider__vacio{ margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.jp-lider__top{ list-style:none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 0.3rem; }
.jp-lider__top li{ display:grid; grid-template-columns: 1.4rem 20px minmax(0, 1fr) auto; align-items:center; gap: 0.5rem; font-size: 0.82rem; }
.jp-lider__top li.is-yo .jp-lider__nombre{ color: var(--aqua); }
.jp-lider__top img, .jp-lider__sin-escudo{ width: 20px; height: 20px; object-fit: contain; }
.jp-lider__pos{
  width: 1.35rem; height: 1.35rem; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  font-size: 0.7rem; font-weight: 700; background: var(--panel-alt); color: var(--text-muted);
}
.jp-lider__pos.is-podio-1{ background: #E8B923; color: #1a1400; }
.jp-lider__pos.is-podio-2{ background: #C7CDD3; color: #15181b; }
.jp-lider__pos.is-podio-3{ background: #C98A4B; color: #1c1005; }
.jp-lider__nombre{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align:left;
  padding: 0; border: none; background: none; cursor:pointer; font: inherit; font-weight: 700; color: var(--text);
}
.jp-lider__nombre:hover{ text-decoration: underline; }
.jp-lider__puntaje{ font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }

/* Cómo se arman los rankings */
.jp-reglas{ border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.jp-reglas summary{ padding: 0.9rem 1.1rem; cursor:pointer; font-weight: 700; font-size: 0.95rem; }
.jp-reglas summary:focus-visible{ outline: 2px solid var(--aqua); outline-offset: -2px; border-radius: 12px; }
.jp-reglas__lista{ margin: 0; padding: 0 1.1rem 1.1rem; display:grid; grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr); gap: 0.6rem 1.25rem; }
.jp-reglas__lista dt{ font-size: 0.85rem; font-weight: 700; }
.jp-reglas__lista dd{ margin: 0; font-size: 0.85rem; color: var(--text-muted); max-width: 70ch; }

/* --- Dentro de un juego --- */
/* Barra de tiempo por pregunta: se achica sola con CSS */
.juego-tiempo{ height: 5px; border-radius: 999px; background: var(--panel-alt); overflow: hidden; }
.juego-tiempo span{
  display:block; height: 100%; width: 100%; border-radius: inherit; background: var(--acento);
  transform-origin: left center; animation: juego-tiempo var(--seg) linear forwards;
}
.juego-tiempo.is-parada span{ animation-play-state: paused; opacity: 0.45; }
@keyframes juego-tiempo{
  70%{ background: var(--acento); }
  85%{ background: var(--danger); }
  to{ transform: scaleX(0); background: var(--danger); }
}
/* Número de atajo en cada opción (solo con teclado físico / mouse) */
.juego-tecla{
  flex-shrink: 0; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: 'DM Sans', sans-serif; font-size: 0.68rem; font-weight: 700; color: var(--text-muted);
  border: 1px solid var(--border); background: var(--panel);
}
@media (hover: none){ .juego-tecla{ display:none; } }

/* Contrarreloj: buscador de competencias */
.contra-filtro{ width: 100%; max-width: 360px; }
.contra-lista.is-jugada small{ color: var(--text); }

/* Ranking: semana / histórico */
.juego-ranking__cabecera{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 0.6rem 1rem; margin-bottom: 0.6rem; }
.panel .juego-ranking__cabecera .juego-ranking__titulo{ margin: 0; }
.juego-ranking__periodos{ display:flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--panel-alt); border: 1px solid var(--border); }
.juego-ranking__periodo{
  padding: 0.35rem 0.85rem; border: none; border-radius: 999px; cursor:pointer;
  background: transparent; color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 700;
}
.juego-ranking__periodo:hover{ color: var(--text); }
.juego-ranking__periodo.is-activo{ background: var(--acento); color: #000; }
.juego-ranking__nota{ margin: 0 0 0.8rem; font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 700px){
  .jp-cabecera{ grid-template-columns: 1fr; }
  .jp-resumen{ grid-column: 1; grid-row: auto; justify-self: start; }
  .jp-diaria{ grid-template-columns: 1fr; padding: 1.25rem; gap: 1.25rem; }
  .jp-mini{ grid-row: 1; grid-template-columns: repeat(3, 48px); gap: 5px; }
  .jp-reglas__lista{ grid-template-columns: 1fr; gap: 0.2rem; }
  .jp-reglas__lista dd{ margin-bottom: 0.6rem; }
}
@media (max-width: 560px){
  .jp-grid, .jp-lideres__lista{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .jp-mini__celda.is-ok{ animation: none; }
  .jp-card, .jp-btn{ transition: none; }
  /* La barra de tiempo es información: se mantiene, pero sin cambio de color */
  .juego-tiempo span{ animation-name: juego-tiempo-simple; }
  @keyframes juego-tiempo-simple{ to{ transform: scaleX(0); } }
}


/* =========================================================================
   FICHAS (clubes y selecciones): portada sin etiquetas, finales y momentos
   ========================================================================= */
/* Sin la fila de etiquetas, el nombre queda como protagonista de la portada */
.ficha-portada__info{ justify-content: center; }
.ficha-portada__tuyo:empty{ display:none; }
.ficha-portada__meta .flag-icon{ width: 22px; height: 15px; flex-shrink: 0; }

/* Finales: balance arriba de la lista */
.ficha-finales-resumen{ display:flex; flex-direction:column; gap: 0.45rem; }
.ficha-finales-resumen p{ margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.ficha-finales-resumen strong{ color: var(--text); font-variant-numeric: tabular-nums; }
.ficha-finales-resumen strong.ficha-g{ color: var(--lib-green); }
.ficha-finales-resumen strong.ficha-p{ color: var(--danger); }
.ficha-finales-resumen__barra{ display:flex; gap: 3px; height: 8px; border-radius: 999px; overflow: hidden; }
.ficha-finales-resumen__barra .is-g{ background: var(--lib-green); }
.ficha-finales-resumen__barra .is-p{ background: var(--danger); opacity: 0.85; }
.orden-lista__btn small{ margin-left: 0.2rem; font-weight: 400; opacity: 0.75; font-variant-numeric: tabular-nums; }

/* Momentos clave: el botón del medio abre los que están ocultos */
.ficha-momento.is-oculto{ display:none; }
.ficha-momento--mas{ padding-bottom: 0.9rem; }
.ficha-momento--mas::before{ background: var(--panel) !important; border: 2px solid var(--border); box-sizing: border-box; }
.ficha-momento--mas .camp-link{ margin: 0; padding: 0; align-self: flex-start; font-size: 0.82rem; line-height: 1.4; }


/* =========================================================================
   EDICIONES DE LOS TORNEOS (torneos.js) y TABLA HISTÓRICA
   ========================================================================= */
/* Menú de la lista: Campeones | Tabla histórica */
.camp-vistas{
  display:flex; gap: 0.25rem; width: fit-content; margin: 0 0 1rem;
  padding: 0.25rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--border);
}
.camp-vistas__btn{
  padding: 0.45rem 1.05rem; border: none; border-radius: 999px; cursor:pointer; background: transparent;
  color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 700;
}
.camp-vistas__btn:hover{ color: var(--text); }
.camp-vistas__btn.is-activa{ background: var(--text); color: #000; }
.camp-vistas__btn:focus-visible, .col-anio__link:focus-visible, .ed-indice__btn:focus-visible, .ed-equipo:focus-visible{ outline: 2px solid var(--aqua); outline-offset: 2px; }

/* Año con edición cargada, en la lista de campeones */
.col-anio__link{
  padding: 0; border: none; background: none; cursor:pointer;
  font: inherit; font-weight: 700; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--color-seccion, var(--aqua)); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.col-anio__link:hover{ color: var(--color-seccion, var(--aqua)); }

/* Navegación de la edición */
.ed-nav{ display:flex; align-items:center; justify-content:space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ed-nav .camp-volver{ margin-bottom: 0; }
.ed-nav__vecinas{ display:flex; gap: 0.4rem; }

/* Cabecera: el año como protagonista, con el color de la lista */
.ed-cabecera{
  display:grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 2rem; align-items:end;
  padding: 1.6rem 1.75rem 0; margin-bottom: 1rem; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ed) 88%, #000) 0%, color-mix(in srgb, var(--ed) 55%, #000) 100%);
  color: var(--ed-texto);
  border: 1px solid color-mix(in srgb, var(--ed) 60%, #fff 10%);
}
.ed-cabecera__torneo{ font-size: 0.95rem; font-weight: 700; opacity: 0.85; }
.ed-cabecera__anio{ margin: 0.1rem 0 0.35rem; font-size: clamp(3.4rem, 11vw, 6rem); line-height: 0.9; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ed-cabecera__meta{ display:flex; flex-wrap: wrap; align-items:center; gap: 0.3rem 0.9rem; margin: 0; font-size: 0.9rem; font-weight: 700; }
.ed-cabecera__meta span:not(.ed-bandera){ font-weight: 400; opacity: 0.85; }
.ed-cabecera__campeon{
  display:flex; flex-direction:column; align-items:flex-start; gap: 0.3rem;
  padding: 0.9rem 1.1rem; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.18);
}
.ed-cabecera__rotulo{ font-size: 0.75rem; font-weight: 700; color: var(--lib-gold); }
.ed-cabecera__final{ font-size: 0.8rem; opacity: 0.85; }
.ed-cabecera .ed-equipo{ color: inherit; }
.ed-equipo--grande{ font-size: 1.35rem; font-weight: 700; }
.ed-equipo--grande .flag-icon{ width: 30px; height: 19px; }
.ed-cabecera__numeros{
  grid-column: 1 / -1; display:grid; grid-template-columns: repeat(4, 1fr); margin: 0 -1.75rem;
  border-top: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.25);
}
.ed-cabecera__numeros div{ padding: 0.8rem 1.75rem; }
.ed-cabecera__numeros div + div{ border-left: 1px solid rgba(255,255,255,0.14); }
.ed-cabecera__numeros dt{ font-size: 0.75rem; opacity: 0.8; }
.ed-cabecera__numeros dd{ margin: 0; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Índice de la edición */
.ed-indice{ display:flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.ed-indice__btn{
  padding: 0.4rem 0.9rem; border-radius: 999px; cursor:pointer; border: 1px solid var(--border);
  background: var(--panel); color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 700;
}
.ed-indice__btn:hover{ color: var(--text); border-color: var(--text-muted); }

.ed-seccion{ scroll-margin-top: calc(var(--navbar-h, 64px) + 0.75rem); }
.ed-seccion + .ed-seccion{ margin-top: 1rem; }
.ed-seccion__titulo{ margin: 0 0 0.35rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.ed-seccion__nota{ margin: 0 0 1rem; font-size: 0.83rem; color: var(--text-muted); max-width: 75ch; }

/* Selección (bandera + nombre); abre la ficha si existe */
.ed-equipo{
  display:inline-flex; align-items:center; gap: 0.45rem; min-width: 0; padding: 0; border: none; background: none;
  font: inherit; color: var(--text); text-align:left;
}
button.ed-equipo{ cursor:pointer; }
button.ed-equipo:hover .ed-equipo__nombre{ text-decoration: underline; }
.ed-equipo__nombre{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-equipo--der{ flex-direction: row-reverse; text-align: right; }
.ed-bandera{ display:inline-flex; flex-shrink: 0; }
.ed-bandera .flag-icon{ width: 22px; height: 14px; border-radius: 2px; }
.ed-bandera--vacia{ width: 22px; height: 14px; border-radius: 2px; background: var(--panel-alt); }

/* Grupos */
.ed-grupos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 1rem; }
.ed-grupo{ padding: 1rem; border-radius: 12px; background: var(--panel-alt); border: 1px solid var(--border); min-width: 0; }
.ed-grupo__titulo{ margin: 0 0 0.6rem; font-size: 1rem; font-weight: 700; }

/* Tablas de posiciones */
.ed-tabla-wrap{ overflow-x: auto; }
.ed-tabla{ font-size: 0.82rem; }
.ed-tabla th, .ed-tabla td{ padding: 0.45rem 0.4rem; }
.ed-tabla td:nth-child(2){ max-width: 13rem; }
.ed-tabla__pos{ color: var(--text-muted); width: 1.8rem; }
.ed-tabla__pts{ font-weight: 700; color: var(--text); }
.ed-tabla td.is-pos{ color: var(--lib-green); }
.ed-tabla td.is-neg{ color: var(--danger); }
.ed-tabla tr.is-clasifica td{ background: rgba(0,255,204,0.07); }
.ed-tabla tr.is-clasifica td:first-child{ box-shadow: inset 3px 0 0 var(--aqua); }
.ed-tabla tr.is-campeon td{ background: rgba(232,185,35,0.09); }
.ed-tabla tr.is-corte td{ border-top: 2px solid var(--text-muted); }
.ed-grupo .ed-tabla{ margin-bottom: 0.75rem; }

.ed-fase{ display:inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; border: 1px solid var(--border); color: var(--text-muted); }
.ed-fase--campeon{ background: var(--lib-gold); border-color: var(--lib-gold); color: #1a1400; }
.ed-fase--sub{ border-color: var(--lib-subcampeon); color: var(--lib-subcampeon); }
.ed-fase--semi{ border-color: var(--lib-green); color: var(--lib-green); }
.ed-fase--cuartos{ border-color: var(--lib-cuartos); color: var(--lib-cuartos); }
.ed-fase--octavos{ border-color: var(--lib-octavos); color: var(--lib-octavos); }

/* Partidos del grupo */
.ed-partidos{ list-style:none; margin: 0; padding: 0; display:flex; flex-direction:column; }
.ed-partido{
  display:grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap: 0.2rem 0.6rem;
  padding: 0.5rem 0; border-top: 1px solid var(--border); font-size: 0.84rem;
}
.ed-partido__fecha{ grid-row: span 2; font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ed-partido__local{ display:flex; justify-content:flex-end; min-width: 0; }
.ed-partido__visita{ display:flex; min-width: 0; }
.ed-partido__local, .ed-partido__visita{ color: var(--text-muted); }
.ed-partido .is-gana .ed-equipo{ font-weight: 700; }
.ed-partido__marcador{ display:flex; flex-direction:column; align-items:center; line-height: 1.1; min-width: 3.2rem; }
.ed-partido__marcador strong{ font-size: 1rem; font-variant-numeric: tabular-nums; padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--panel); }
.ed-partido__marcador strong i{ font-style: normal; margin: 0 0.15rem; color: var(--text-muted); }
.ed-partido__marcador small{ font-size: 0.68rem; color: var(--text-muted); }
.ed-partido__lugar{ grid-column: 2 / -1; font-size: 0.72rem; color: var(--text-muted); text-align:center; }

/* Llave de la fase final */
.ed-llave{ display:grid; grid-template-columns: repeat(var(--columnas), minmax(220px, 1fr)); gap: 2.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.ed-llave__col{ display:flex; flex-direction:column; min-width: 0; }
.ed-llave__titulo{ margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.ed-llave__cruces{ flex: 1; display:flex; flex-direction:column; justify-content:space-around; gap: 1rem; }
.ed-cruce{ position: relative; display:flex; flex-direction:column; gap: 0.15rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border); }
.ed-llave__col:not(.is-final) .ed-cruce::after{
  content:""; position:absolute; left: 100%; top: 50%; width: 1.25rem; border-top: 2px solid var(--border);
}
.ed-llave__col.is-final .ed-cruce{ border-color: var(--lib-gold); background: color-mix(in srgb, var(--lib-gold) 8%, var(--panel-alt)); }
.ed-llave__col.is-final .ed-cruce::before{
  content:""; position:absolute; right: 100%; top: 50%; width: 1.25rem; border-top: 2px solid var(--border);
}
.ed-cruce__meta{ font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.ed-cruce__lado{ display:flex; align-items:center; justify-content:space-between; gap: 0.6rem; font-size: 0.9rem; }
.ed-cruce__lado.is-gana .ed-equipo{ font-weight: 700; }
.ed-cruce__lado.is-pierde{ opacity: 0.6; }
.ed-cruce__goles{ font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ed-cruce__lado.is-gana .ed-cruce__goles{ color: var(--lib-gold); }
.ed-cruce__nota{ margin-top: 0.2rem; font-size: 0.7rem; color: var(--text-muted); }

@media (max-width: 700px){
  .ed-cabecera{ grid-template-columns: 1fr; padding: 1.25rem 1.1rem 0; }
  .ed-cabecera__numeros{ grid-template-columns: repeat(2, 1fr); margin: 0 -1.1rem; }
  .ed-cabecera__numeros div{ padding: 0.7rem 1.1rem; }
  .ed-cabecera__numeros div:nth-child(3){ border-left: none; }
  .ed-cabecera__numeros div:nth-child(n+3){ border-top: 1px solid rgba(255,255,255,0.14); }
  .ed-llave{ grid-template-columns: 1fr; gap: 1rem; }
  .ed-llave__col .ed-cruce::after, .ed-llave__col.is-final .ed-cruce::before{ display:none; }
  .ed-partido{ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .ed-partido__fecha{ grid-row: auto; grid-column: 1 / -1; text-align:center; }
  .ed-partido__lugar{ grid-column: 1 / -1; }
  .ed-grupo{ padding: 0.8rem; }
}

.panel .ed-seccion__titulo{ color: var(--text); text-transform: none; letter-spacing: -0.01em; }
.ed-grupo .ed-tabla th, .ed-grupo .ed-tabla td{ padding: 0.4rem 0.28rem; }

/* Tabla histórica: escudos y selector de puntos */
.ed-escudo{ display:inline-flex; align-items:center; justify-content:center; width: 26px; height: 26px; flex-shrink: 0; }
.ed-escudo img{ max-width: 26px; max-height: 26px; object-fit: contain; }
.ed-historica__modos{ margin: 0 0 0.75rem; }
/* =========================================================================
   EN VIVO (envivo.js): partidos del día y tablas de posiciones
   ========================================================================= */
.ev{ display:flex; flex-direction:column; gap: 1.1rem; min-width: 0; }
.ev > *, #evCuerpo{ min-width: 0; max-width: 100%; }
.ev .palm-tipo{ margin-bottom: 0; }
.ev-nota{ margin: 0; }
.ev-nota a{ color: var(--aqua); }

/* Puntito rojo en la sidebar cuando hay partidos en juego */
.nav-item > .nav-item__vivo{ display:none; flex: 0 0 8px; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #FF3B3B; box-shadow: 0 0 8px #FF3B3B; animation: latido 1.6s ease-in-out infinite; }
body.hay-en-vivo .nav-item > .nav-item__vivo{ display:block; }

/* Pulso rojo de "en vivo" */
.ev-pulso{ display:inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF3B3B; box-shadow: 0 0 0 0 rgba(255,59,59,0.6); animation: ev-pulso 1.6s ease-out infinite; flex-shrink: 0; }
@keyframes ev-pulso{ 70%{ box-shadow: 0 0 0 7px rgba(255,59,59,0); } 100%{ box-shadow: 0 0 0 0 rgba(255,59,59,0); } }
.inicio-titulo__punto--vivo{ background: #FF3B3B; box-shadow: 0 0 10px #FF3B3B; }

/* Tira de días */
.ev-dias{
  display:flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none;
  padding: 0.3rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--border);
}
.ev-dias::-webkit-scrollbar{ display:none; }
.ev-dia{
  flex-shrink: 0; padding: 0.45rem 0.95rem; border-radius: 999px; border: none; background: none;
  color: var(--text-muted); font-family: "DM Sans", sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ev-dia:hover{ color: var(--text); }
.ev-dia.is-hoy:not(.is-activo){ color: var(--aqua); }
.ev-dia.is-activo{ background: linear-gradient(135deg, var(--aqua), #7BE6D2); color: #00140F; }
.ev-fecha{ margin: 0.9rem 0 0.2rem; font-weight: 700; font-size: 1.05rem; }
.ev-fecha span{ font-weight: 400; font-size: 0.78rem; color: var(--text-muted); }
.ev-cargando{ display:flex; align-items:center; gap: 0.6rem; color: var(--text-muted); font-size: 0.9rem; }

/* Bloques de partidos (uno por competencia) */
#evPartidos{ display:flex; flex-direction:column; gap: 0.9rem; }
.ev-bloque{ padding: 0.9rem 1rem; }
.ev-bloque .panel-body{ padding: 0; }
.ev-bloque--vivo{ border-color: rgba(255,59,59,0.45); background: linear-gradient(180deg, rgba(255,59,59,0.07), transparent 60%), var(--panel); }
.panel .ev-bloque__titulo{
  display:flex; align-items:center; gap: 0.55rem; margin: 0 0 0.5rem;
  font-size: 0.95rem; color: var(--text);
}
.ev-bloque__titulo small{ font-weight: 400; font-size: 0.78rem; color: var(--text-muted); }
.ev-bloque__emblema{ width: 22px; height: 22px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px; }
.ev-bloque__tabla{ margin-left: auto; font-size: 0.8rem; }

.ev-partidos{ list-style: none; margin: 0; padding: 0; }
.ev-partido{
  display:grid; grid-template-columns: 5.2rem minmax(0,1fr) 4.4rem minmax(0,1fr);
  align-items:center; gap: 0.5rem; padding: 0.55rem 0.3rem; border-top: 1px solid var(--border);
}
.ev-partido:first-child{ border-top: none; }
.ev-partido.is-vivo{ background: rgba(255,59,59,0.05); border-radius: 8px; }
.ev-partido__estado{ display:flex; flex-direction:column; gap: 0.1rem; font-size: 0.78rem; min-width: 0; }
.ev-partido__estado small{ color: var(--text-muted); font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-estado{ color: var(--text-muted); font-weight: 700; display:inline-flex; align-items:center; gap: 0.35rem; }
.ev-estado--hora{ color: var(--text); font-variant-numeric: tabular-nums; }
.ev-estado--vivo{ color: #FF6B6B; }
.ev-estado--alerta{ color: var(--lib-gold); }
.ev-partido__local{ display:flex; justify-content:flex-end; min-width: 0; }
.ev-partido__visita{ display:flex; min-width: 0; }
.ev-partido__marcador{
  display:flex; flex-wrap: wrap; align-items:center; justify-content:center; gap: 0.3rem;
  font-size: 1.1rem; font-variant-numeric: tabular-nums;
}
.ev-partido__marcador i{ font-style: normal; color: var(--text-muted); font-size: 0.85rem; }
.ev-partido__marcador small{ flex-basis: 100%; text-align:center; font-size: 0.65rem; color: var(--text-muted); }
.ev-partido.is-vivo .ev-partido__marcador strong{ color: #FF8A8A; }

.ev-equipo{
  display:inline-flex; align-items:center; gap: 0.45rem; min-width: 0; max-width: 100%;
  background: none; border: none; padding: 0; color: var(--text); font-family: "DM Sans", sans-serif; font-size: 0.9rem; text-align:left;
}
button.ev-equipo{ cursor: pointer; }
button.ev-equipo:hover .ev-equipo__nombre{ color: var(--aqua); text-decoration: underline; text-underline-offset: 3px; }
.ev-equipo--der{ flex-direction: row-reverse; text-align:right; }
.ev-equipo.is-gana{ font-weight: 700; }
.ev-equipo__nombre{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-escudo{ width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }

/* Tablas */
.ev-comps{ display:flex; justify-content:center; }
.ev-tabla-cab{ display:flex; align-items:center; gap: 0.8rem; margin-bottom: 0.9rem; }
.ev-tabla-cab__emblema{ width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 9px; padding: 4px; }
.panel .ev-tabla-cab__nombre{ margin: 0; color: var(--text); }
.ev-tabla-cab__temp{ font-size: 0.8rem; color: var(--text-muted); }
.ev-grupo{ margin: 1rem 0 0.4rem; font-size: 0.9rem; color: var(--aqua); }
.ev-tabla td:nth-child(2){ max-width: 15rem; }
.ev-tabla .ev-equipo{ font-size: 0.85rem; }
.ev-tabla .ev-escudo{ width: 20px; height: 20px; }
.ev-forma{ display:inline-flex; gap: 3px; }
.ev-forma i{
  width: 18px; height: 18px; border-radius: 4px; display:inline-grid; place-items:center;
  font-style: normal; font-size: 0.62rem; font-weight: 700; color: #111;
}
.ev-forma i.ev-forma__G{ background: var(--lib-green); }
.ev-forma i.ev-forma__E{ background: var(--lib-gray); color: #fff; }
.ev-forma i.ev-forma__P{ background: var(--danger); color: #fff; }

/* Zonas: barrita de color a la izquierda de la posición */
.ev-zona td:first-child{ box-shadow: inset 3px 0 0 var(--zona); }
.ev-zona--cl, .ev-zona--octavos, .ev-zona--asc{ --zona: var(--aqua); }
.ev-zona--cl-previa{ --zona: #7BE6D2; }
.ev-zona--lib{ --zona: var(--lib-gold); }
.ev-zona--lib-previa{ --zona: #C9A43A; }
.ev-zona--el{ --zona: var(--lib-cuartos); }
.ev-zona--uecl, .ev-zona--playoff, .ev-zona--promo-asc{ --zona: var(--lib-green); }
.ev-zona--sud{ --zona: var(--lib-subcampeon); }
.ev-zona--promo{ --zona: var(--lib-octavos); }
.ev-zona--desc, .ev-zona--afuera{ --zona: var(--danger); }
.ev-zonas{ display:flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.9rem; font-size: 0.78rem; color: var(--text-muted); }
.ev-zonas__item{ display:inline-flex; align-items:center; gap: 0.4rem; }
.ev-zonas__item i{ width: 12px; height: 12px; border-radius: 3px; background: var(--zona); }
.ev-zonas__nota{ margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--text-muted); }

/* Cinta en Inicio */
/* Mismo ancho y márgenes que los bloques de abajo (.inicio-extras) */
.ev-inicio{ max-width: 960px; margin: 0 auto 1.5rem; padding: 0 1.5rem; }
.ev-inicio__n{ font-size: 0.75rem; font-weight: 700; color: #FF6B6B; }
.ev-inicio__fila{ display:flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.2rem; }
.ev-mini{
  display:flex; flex-direction:column; gap: 0.35rem; min-width: 210px; flex-shrink: 0;
  padding: 0.65rem 0.85rem; border-radius: 12px; cursor: pointer; text-align:left;
  background: var(--panel); border: 1px solid var(--border); border-top: 4px solid var(--aqua);
  color: var(--text); font-family: "DM Sans", sans-serif;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.ev-mini:hover{ transform: translateY(-3px); border-color: var(--aqua); }
.ev-mini.is-vivo{ border-top-color: #FF3B3B; }
.ev-mini__cab{ display:flex; align-items:center; justify-content:space-between; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.ev-mini__cab .ev-estado{ font-size: 0.72rem; }
.ev-mini__fila{ display:flex; align-items:center; gap: 0.45rem; font-size: 0.88rem; }
.ev-mini__escudo{ width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.ev-mini__nombre{ flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.ev-mini__fila strong{ font-variant-numeric: tabular-nums; }

/* "Revisar equipos nuevos" (administradores) */
.panel .ev-rev__titulo{ margin: 0 0 0.4rem; color: var(--text); font-size: 1.05rem; }
.ev-rev__texto, .ev-rev__resumen{ color: var(--text-muted); font-size: 0.88rem; margin: 0 0 0.9rem; }
.ev-rev__resumen strong{ color: var(--text); }
.ev-rev__ok{ color: var(--lib-green); font-weight: 700; }
.ev-rev__alerta{ color: var(--lib-gold); font-size: 0.85rem; }
.ev-rev__tabla td{ vertical-align: middle; }
.ev-rev__tabla small{ color: var(--text-muted); }
.ev-rev__input{ min-width: 11rem; padding: 0.4rem 0.6rem; font-size: 0.85rem; }
.ev-rev__pasos{ margin: 1.2rem 0; padding-left: 1.2rem; display:flex; flex-direction:column; gap: 1rem; font-size: 0.9rem; }
.ev-rev__pasos code{ background: var(--panel-alt); border: 1px solid var(--border); border-radius: 5px; padding: 0.05rem 0.35rem; font-size: 0.82rem; }
.ev-rev__bloque{ position: relative; margin-top: 0.5rem; }
.ev-rev__codigo{
  width: 100%; box-sizing: border-box; resize: vertical; padding: 0.7rem 0.8rem; padding-right: 5.5rem;
  background: #0A0A0A; color: #CFFFF3; border: 1px solid var(--border); border-radius: 8px;
  font-family: Consolas, "Courier New", monospace; font-size: 0.78rem; line-height: 1.45; white-space: pre; overflow-x: auto;
}
.ev-rev__copiar{ position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.3rem 0.8rem; font-size: 0.78rem; }

@media (max-width: 560px){
  .ev-inicio{ padding: 0 0.9rem; }
  .ev-bloque{ padding: 0.8rem 0.7rem; }
  .ev-partido{ grid-template-columns: 2.9rem minmax(0,1fr) 3.1rem minmax(0,1fr); gap: 0.3rem; padding: 0.5rem 0; }
  .ev-partido__estado{ font-size: 0.7rem; }
  .ev-equipo{ font-size: 0.78rem; gap: 0.3rem; }
  /* En el celular el nombre puede ocupar dos renglones en vez de cortarse */
  .ev-partido .ev-equipo__nombre{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  .ev-escudo{ width: 20px; height: 20px; }
  .ev-partido__marcador{ font-size: 1rem; }
  .ev-col-extra, .ev-col-forma{ display:none; }
  .ev-dia{ padding: 0.4rem 0.75rem; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce){
  .ev-pulso, .nav-item__vivo{ animation: none; }
}

/* Aviso de sección en construcción (Historiales, Pirámides y gráficas) */
.aviso-obra{
  display:flex; align-items:center; gap: 1rem;
  margin-bottom: 1.25rem; padding: 1.1rem 1.25rem; border-radius: 12px;
  border: 1px solid rgba(232,185,35,0.45);
  background:
    repeating-linear-gradient(-45deg, rgba(232,185,35,0.07) 0 12px, transparent 12px 24px),
    radial-gradient(ellipse at 0% 0%, rgba(0,255,204,0.10), transparent 60%),
    var(--panel);
}
.aviso-obra__icono{
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  display:grid; place-items:center; color: #111; background: var(--lib-gold);
  box-shadow: 0 0 18px rgba(232,185,35,0.35);
}
.aviso-obra__texto{ margin: 0; display:flex; flex-direction:column; gap: 0.2rem; }
.aviso-obra__texto strong{ font-size: 1rem; color: var(--text); }
.aviso-obra__texto span{ font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 560px){
  .aviso-obra{ padding: 0.9rem 1rem; gap: 0.8rem; }
  .aviso-obra__icono{ width: 40px; height: 40px; }
}

/* =========================================================================
   Páginas de información (privacidad.html, acerca.html, contacto.html)
   ========================================================================= */
.pie-links{ display:flex; justify-content:center; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-bottom: 0.6rem; }
.site-footer .pie-links a{ color: var(--text-muted); text-decoration: none; font-weight: 700; }
.site-footer .pie-links a:hover{ color: var(--aqua); }

.pagina-legal{ min-height: 100vh; display:flex; flex-direction:column; }
.legal-cab{
  display:flex; align-items:center; justify-content:space-between; gap: 1rem;
  padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--border);
  background: radial-gradient(120% 200px at 0% 0%, rgba(0,255,204,0.08), transparent 70%), var(--panel);
}
.legal-cab__marca{ display:flex; align-items:center; gap: 0.6rem; color: var(--text); text-decoration: none; font-size: 1.05rem; }
.legal-cab__marca img{ border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,255,204,0.35), 0 0 14px rgba(0,255,204,0.18); }
.legal-cab__volver{ text-decoration: none; font-size: 0.85rem; }
.legal{ flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 2.2rem 1.5rem 1rem; box-sizing: border-box; line-height: 1.65; }
.legal h1{
  margin: 0 0 0.3rem; font-size: clamp(1.8rem, 5vw, 2.4rem); letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--text) 40%, var(--aqua) 70%, #A45BC0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.legal h2{ margin: 2rem 0 0.5rem; font-size: 1.15rem; color: var(--aqua); }
.legal p, .legal li{ color: #E4E4E4; font-size: 0.97rem; }
.legal ul{ padding-left: 1.2rem; display:flex; flex-direction:column; gap: 0.35rem; }
.legal a{ color: var(--aqua); }
.legal__fecha{ color: var(--text-muted) !important; font-size: 0.85rem !important; margin: 0 0 1.5rem; }
.legal__nota{ padding: 0.8rem 1rem; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); font-size: 0.88rem !important; color: var(--text-muted) !important; }
.legal-pie{ padding: 1.5rem 1rem 2rem; margin-top: 1rem; border-top: 1px solid var(--border); }

.contacto-tarjetas{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; margin: 1.5rem 0 0.5rem; }
.legal .contacto-tarjeta{
  display:flex; align-items:center; gap: 0.8rem; padding: 1rem; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.legal .contacto-tarjeta:hover{ transform: translateY(-3px); border-color: var(--aqua); }
.contacto-tarjeta__icono{ width: 44px; height: 44px; border-radius: 50%; display:grid; place-items:center; flex-shrink: 0; color: #00140F; background: linear-gradient(135deg, var(--aqua), #7BE6D2); }
.contacto-tarjeta strong{ display:block; }
.contacto-tarjeta small{ color: var(--text-muted); font-size: 0.82rem; word-break: break-all; }
@media (max-width: 560px){
  .legal-cab{ padding: 0.8rem 1rem; }
  .legal{ padding: 1.6rem 1rem 1rem; }
}

/* Tarjeta de una competencia de Desempeños todavía sin datos */
.comp-card--obra{ opacity: 0.7; border-style: dashed; }
.comp-card--obra:hover{ opacity: 1; }

/* =========================================================================
   PORTADA: Explorá SAG, Tu club / Club del día, punteros, ranking y aniversarios
   ========================================================================= */
.inicio-nota{ margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--text-muted); }

/* Explorá SAG */
.explora{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 0.7rem; }
.explora__item{
  display:flex; align-items:center; gap: 0.75rem; padding: 0.85rem 0.95rem; min-width: 0;
  border-radius: 12px; border: 1px solid var(--border); cursor: pointer; text-align:left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%), var(--panel);
  color: var(--text); font-family: "DM Sans", sans-serif;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.explora__item:hover{ transform: translateY(-3px); border-color: var(--c); }
.explora__icono{
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display:grid; place-items:center;
  color: var(--c); background: color-mix(in srgb, var(--c) 16%, #000); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
}
.explora__icono .nav-icon{ width: 21px; height: 21px; margin: 0; }
.explora__texto{ display:flex; flex-direction:column; min-width: 0; }
.explora__texto strong{ font-size: 0.92rem; line-height: 1.2; }
.explora__texto small{ font-size: 0.74rem; color: var(--text-muted); line-height: 1.3; }

/* Tu club / Club del día */
.club-portada{
  flex: 1; display:flex; flex-direction:column; gap: 0.75rem; padding: 1.1rem 1.2rem; border-radius: 14px;
  border: 1px solid var(--border);
  background: radial-gradient(ellipse at 100% 0%, rgba(103,41,125,0.28), transparent 60%), radial-gradient(ellipse at 0% 100%, rgba(0,255,204,0.08), transparent 55%), var(--panel);
}
.club-portada__rotulo{ font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aqua); }
.club-portada__cab{ display:flex; align-items:center; gap: 0.9rem; }
.club-portada__escudo{ width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
.club-portada__nombre{ display:block; font-size: 1.3rem; line-height: 1.15; }
.club-portada__pais{ display:inline-flex; align-items:center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); }
.club-portada__numeros{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.club-portada__numeros span{
  display:flex; flex-direction:column; align-items:center; padding: 0.5rem 0.3rem; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); font-size: 0.7rem; color: var(--text-muted); text-align:center;
}
.club-portada__numeros strong{ font-size: 1.25rem; color: var(--text); font-variant-numeric: tabular-nums; }
.club-portada__numeros span:first-child strong{ color: var(--lib-gold); }
.club-portada__texto{ margin: 0; font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; }
.club-portada__btn{ align-self: flex-start; margin-top: auto; }
.club-portada--invita{ justify-content: center; }

/* Punteros de las ligas */
.punteros{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 0.7rem; }
.puntero{
  display:flex; flex-direction:column; gap: 0.4rem; padding: 0.8rem 0.9rem; min-width: 0; cursor: pointer; text-align:left;
  border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-family: "DM Sans", sans-serif;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.puntero:hover{ transform: translateY(-3px); border-color: var(--aqua); }
.puntero__cab{ display:flex; align-items:center; gap: 0.45rem; margin-bottom: 0.2rem; font-size: 0.9rem; }
.puntero__cab small{ margin-left: auto; font-size: 0.7rem; color: var(--text-muted); }
.puntero__emblema{ width: 20px; height: 20px; object-fit: contain; background: #fff; border-radius: 4px; padding: 1px; }
.puntero__fila{ display:flex; align-items:center; gap: 0.45rem; font-size: 0.84rem; color: var(--text-muted); }
.puntero__fila.is-lider{ color: var(--text); font-weight: 700; }
.puntero__fila strong{ margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text); }
.puntero__pos{ width: 1rem; text-align:center; font-size: 0.75rem; color: var(--text-muted); }
.puntero__fila.is-lider .puntero__pos{ color: var(--lib-gold); }
.puntero__escudo{ width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.puntero__nombre{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Ranking de títulos (mini) */
.palm-mini{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 0.4rem; }
.palm-mini__fila{
  position: relative; overflow: hidden; width: 100%; display:flex; align-items:center; gap: 0.6rem;
  padding: 0.55rem 0.8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font-family: "DM Sans", sans-serif; font-size: 0.92rem; cursor: pointer; text-align:left;
}
.palm-mini__fila::before{
  content: ""; position:absolute; inset: 0 auto 0 0; width: var(--p);
  background: linear-gradient(90deg, rgba(232,185,35,0.16), rgba(232,185,35,0.03)); pointer-events:none;
}
.palm-mini__fila:hover{ border-color: var(--lib-gold); }
.palm-mini__fila > *{ position: relative; }
.palm-mini__pos{ width: 1.2rem; text-align:center; font-weight: 700; color: var(--lib-gold); }
.palm-mini__escudo{ width: 26px; height: 26px; object-fit: contain; }
.palm-mini__nombre{ flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palm-mini__fila strong{ font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Aniversarios en la portada: en columna */
.inicio-efemerides{ grid-template-columns: 1fr; }

@media (max-width: 420px){
  .explora{ grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .explora__item{ flex-direction: column; align-items:flex-start; gap: 0.5rem; padding: 0.75rem; }
  .punteros{ grid-template-columns: 1fr; }
  .club-portada__escudo{ width: 52px; height: 52px; }
}