/* ============ Top Ranking — Estilo perfil (títulos centrados + botones modernos + modal) ============ */
.tr-container{
  --verde:#15803d;
  --verde-dark:#14532d;
  --bg:#f0fdf4;
  --card:#ffffff;
  --line:#d1fae5;
  --text:#0f172a;
  --muted:#64748b;
  --tr-cols: 3;
  --tr-gap: 16px;

  font-size: inherit;
  line-height: 1.5;

  background: radial-gradient(circle at top left, #f0fdf4 0%, #e0f2fe 26%, #f0fdf4 55%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* Toolbar */
.tr-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.tr-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  flex:1;
}

/* Botón moderno (pill) */
.tr-tab{
  appearance:none;
  border:none;
  background:rgba(255,255,255,.9);
  color:var(--text);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 2px 8px rgba(15,23,42,.08), inset 0 0 0 1px var(--line);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.tr-tab:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(15,23,42,.12), inset 0 0 0 1px #cdeee0;
}
.tr-tab:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(22,163,74,.25), 0 2px 10px rgba(15,23,42,.18);
}
.tr-tab.is-active{
  color:#fff;
  background:linear-gradient(135deg, #16a34a, #15803d);
  box-shadow:0 6px 18px rgba(22,163,74,.45);
}

/* Leyenda + badges */
.tr-legend{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
  flex-wrap:wrap;
}
.tr-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  height:22px;
  font-size:12px;
  border-radius:999px;
  background:#eaf6f0;
  color:var(--verde-dark);
  border:1px solid var(--line);
}
.tr-badge-m{ background:#e0f2fe; color:#0a5fb8; }
.tr-badge-f{ background:#ffeaf5; color:#b80a6f; }

/* Nota de filtro (cuando no hay toggle) */
.tr-filter-note{
  font-size:13px;
  color:var(--muted);
}

/* Toggle (Activos ↔ Todos) */
.tr-toggle{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  cursor:pointer;
  user-select:none;
  font-size:13px;
  color:var(--muted);
}
.tr-toggle__input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}
.tr-toggle__track{
  inline-size:42px;
  block-size:24px;
  border-radius:999px;
  position:relative;
  background:#cfdad5;
  transition:background .18s ease;
  box-shadow:inset 0 0 0 1px var(--line);
}
.tr-toggle__thumb{
  inline-size:18px;
  block-size:18px;
  border-radius:999px;
  background:#fff;
  position:absolute;
  inset-block-start:3px;
  inset-inline-start:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:transform .18s ease;
}
.tr-toggle__input:checked + .tr-toggle__track{
  background:var(--verde);
}
.tr-toggle__input:checked + .tr-toggle__track .tr-toggle__thumb{
  transform:translateX(18px);
}
.tr-toggle__label b{
  color:var(--text);
}

/* Filtro de rama (Ambos/M/F) */
.tr-sexfilter{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.tr-sex{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text);
  background:transparent;
  transition:background .12s ease, box-shadow .12s ease, transform .12s ease, color .12s ease;
}
.tr-sex:hover{ background:#edf7f1; }
.tr-sex.is-active{
  color:#fff;
  background:linear-gradient(135deg, #16a34a, #15803d);
  box-shadow:0 6px 16px rgba(22,163,74,.35);
}
.tr-sex:focus-visible{
  outline:3px solid color-mix(in srgb, var(--verde) 35%, #fff);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--verde) 35%, #fff);
}

/* Scopes y panels */
.tr-scope[hidden]{ display:none !important; }
.tr-panel{ display:none; }
.tr-panel.is-active{ display:block; }

/* Encabezados vs texto normal */
.tr-subtitle{
  font-size:1.1rem;
  margin:20px 4px 14px;
  padding-bottom:8px;
  color:var(--verde-dark);
  font-weight:900;
  line-height:1.25;
  letter-spacing:.35px;
  text-transform:uppercase;
  text-align:center;
  border-bottom:2px solid #bbf7d0;
}

/* Grid configurable y tarjetas centradas */
.tr-grid{
  display:grid;
  grid-template-columns: repeat(var(--tr-cols, 3), minmax(0,1fr));
  gap: var(--tr-gap,16px);
  justify-items: center;
}
@media (max-width:980px){
  .tr-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .tr-grid{ grid-template-columns: 1fr; }
}

/* Card */
.tr-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px;
  gap:12px;
  text-align:center;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  cursor:pointer;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
  width:100%;
  max-width:360px;
}
.tr-card:hover{
  box-shadow:0 8px 24px rgba(15,23,42,.1);
  transform:translateY(-1px);
  border-color:#cdeee0;
}

/* Medalla/puesto */
.tr-rank{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  padding:2px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  line-height:1;
  letter-spacing:.2px;
  background:var(--verde);
  color:#fff;
  border:1px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.tr-card[data-rank="1"] .tr-rank{
  background:linear-gradient(135deg, #f7d14a, #e8b923);
  color:#3a2e0a;
  border-color:#e5c030;
  box-shadow:0 8px 20px rgba(232,185,35,.35);
}
.tr-card[data-rank="2"] .tr-rank{
  background:linear-gradient(135deg, #dfe3e8, #bfc6cf);
  color:#2f3137;
  border-color:#c9cfd7;
  box-shadow:0 8px 20px rgba(164,172,182,.35);
}
.tr-card[data-rank="3"] .tr-rank{
  background:linear-gradient(135deg, #e6b082, #c9854f);
  color:#3b240f;
  border-color:#d39a67;
  box-shadow:0 8px 20px rgba(201,133,79,.35);
}

/* Encabezado */
.tr-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:4px;
}
.tr-flag{ font-size:26px; line-height:1; }
.tr-name{
  margin:0;
  font-weight:900;
  color:var(--text);
  font-size:1.1rem;
  line-height:1.2;
  text-align:center;
}
.tr-link{
  color:inherit;
  text-decoration:none;
}
.tr-link:hover{ text-decoration:underline; }

/* Subencabezado y texto de apoyo */
.tr-card .tr-name,
.tr-modal__name{
  font-weight:900;
  color:var(--text);
}
.tr-info{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
.tr-meta{
  order:-1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:.92rem;
  font-weight:400;
  line-height:1.45;
  color:var(--muted);
  justify-content:center;
  margin-bottom:2px;
}
.tr-meta-item{
  background:#f1f6f3;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.28rem .62rem;
  line-height:1.2;
}
.tr-elo-line{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1rem;
  color:var(--text);
}
.tr-elo-label{
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--verde-dark);
}
.tr-elo-value{
  font-size:1.35rem;
  font-weight:900;
  color:#0b3b29;
}

/* Foto */
.tr-photo{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f2f6f4;
  aspect-ratio:1/1;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
@supports not (aspect-ratio: 1 / 1){
  .tr-photo{ padding-top:100%; }
  .tr-photo > *{ position:absolute; inset:0; }
}
.tr-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;
  will-change:transform;
  transition:transform .2s ease, filter .2s ease;
  filter:saturate(1.03) contrast(1.02);
}
.tr-card:hover .tr-photo img{ transform:scale(1.02); }
.tr-photo .tr-link{ display:block; width:100%; height:100%; }
.tr-avatar{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:40px;
  color:#6b8f7f;
}

/* Aro de color en foto según Top-3 */
.tr-card[data-rank="1"] .tr-photo{ outline:3px solid rgba(247, 209, 74, .55); outline-offset:-3px; }
.tr-card[data-rank="2"] .tr-photo{ outline:3px solid rgba(191, 198, 207, .55); outline-offset:-3px; }
.tr-card[data-rank="3"] .tr-photo{ outline:3px solid rgba(201, 133, 79, .55); outline-offset:-3px; }


/* Avisos */
.tr-empty{
  grid-column:1/-1;
  padding:18px;
  text-align:center;
  color:#6a8d7e;
  background:#fff;
  border:1px dashed var(--line);
  border-radius:12px;
}
.tr-notice{
  padding:12px;
  background:#fff5f5;
  border:1px solid #ffd2d2;
  color:#8a1f1f;
  border-radius:12px;
}

/* ===== Modal (ficha) ===== */
.tr-modal[hidden]{ display:none !important; }
.tr-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:auto;
}
.tr-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:saturate(1.2) blur(2px);
  pointer-events:auto;
}
.tr-modal__dialog{
  position:relative;
  width:min(880px, 92vw);
  max-height:85vh;
  margin:6vh auto 0;
  background:#fff;
  border-radius:18px;
  border:1px solid #e8efe9;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  padding:18px;
  overflow:auto;
  outline:none;
  pointer-events:auto;
  z-index:2;
}

/* Cerrar SIEMPRE visible */
.tr-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid #d1fae5;
  background:#fff !important;
  color:#14532d !important;
  font-size:22px !important;
  font-weight:900 !important;
  line-height:1 !important;
  cursor:pointer;
  z-index:20 !important;
  opacity:1 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 6px rgba(0,0,0,.15);
}
.tr-modal__close:hover{
  background:#dcfce7 !important;
  transform: translateY(-1px);
}

.tr-modal__title{
  margin:10px 0 8px;
  font-size:24px;
  font-weight:900;
  color:var(--text);
  text-align:center;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.tr-modal__flag{ font-size:28px; line-height:1; }
.tr-modal__meta{
  text-align:center;
  font-size:.98rem;
  line-height:1.5;
  font-weight:400;
  color:var(--muted);
  margin-bottom:12px;
}

/* Foto del modal (fix blanco) */
.tr-modal__photo{
  width:min(460px, 80vw);
  aspect-ratio:1/1;
  margin:0 auto 12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f2f6f4;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tr-modal__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:1;
}
.tr-modal__avatar{
  width:100%;
  height:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:56px;
  background:#eef3f1;
  color:#14532d;
}

.tr-modal__elos{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin:8px 0 14px;
}
.tr-modal__elos > div{
  background:#f7fbf9;
  border:1px solid #e6efe9;
  border-radius:12px;
  padding:8px 12px;
  min-width:120px;
  text-align:center;
  font-size:.96rem;
  line-height:1.45;
}
.tr-modal__elos b{
  display:block;
  margin-bottom:2px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--verde-dark);
}

/* Botones de acción */
.tr-modal__actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.tr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
}
.tr-btn-primary{
  color:#fff;
  background:linear-gradient(135deg, #16a34a, #15803d);
  box-shadow:0 8px 16px rgba(22,163,74,.3);
  border:1px solid transparent;
}
.tr-btn-primary:hover{ filter:brightness(1.03); }
.tr-btn-ghost{
  color:#0a5fb8;
  background:#eaf3ff;
  border:1px solid #d7e6ff;
}
.tr-btn-ghost:hover{ background:#e1eeff; }

/* Accesibilidad */
.tr-tab:focus-visible,
.tr-modal__close:focus-visible,
.tr-btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--verde) 35%, #fff);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--verde) 35%, #fff);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .tr-tab,
  .tr-toggle__track,
  .tr-toggle__thumb,
  .tr-card{
    transition:none !important;
  }
}

/* Dark mode (auto) */
@media (prefers-color-scheme: dark){
  .tr-container{
    --bg:#020617;
    --card:#020c11;
    --line:#1e293b;
    --text:#e5f5ee;
    --muted:#9ca3af;
  }
  .tr-tab{
    background:rgba(15,23,42,.7);
    color:var(--text);
    box-shadow:0 1px 6px rgba(0,0,0,.6), inset 0 0 0 1px var(--line);
  }
  .tr-tab.is-active{ box-shadow:0 10px 22px rgba(22,163,74,.35); }
  .tr-card{
    border-color:var(--line);
    box-shadow:0 6px 20px rgba(0,0,0,.6);
  }
  .tr-photo{
    background:#020617;
    border-color:var(--line);
  }
  .tr-modal__dialog{
    background:#020c11;
    border-color:var(--line);
    color:var(--text);
  }
  .tr-btn-ghost{
    background:#0f172a;
    color:#bfdbfe;
    border-color:#1d4ed8;
  }
}

/* Mostrar/ocultar por sexo según atributo en root */
.tr-container[data-sex="M"]  .tr-sex-block[data-sex="F"]{ display:none; }
.tr-container[data-sex="F"]  .tr-sex-block[data-sex="M"]{ display:none; }

/* Bloqueo scroll cuando el modal está abierto (clase en <html>) */
html.tr-modal-open,
html.tr-modal-open body{
  overflow: hidden !important;
}
.tr-photo img,
.tr-modal__img{
  transition: opacity .25s ease;
}