@import url('globals.css');
@import url('layout.css');
@import url('components.css');

/* =========================================================
   CARGA INDEX
   ========================================================= */

#splash {
      position: fixed; inset: 0; z-index: 9998;
      display: grid; place-items: center;
      background: radial-gradient(1200px 800px at 50% -10%, #1b2040 0%, #0f1325 55%, #0e0f1a 100%);
      color: #fff;
    }
    .splash-card {
      display: grid; gap: 16px; place-items: center;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px; padding: 22px 26px;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      text-align: center;
    }
    .splash-logo { width: 120px; height: 90px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
    .splash-title { font-weight: 800; letter-spacing: .3px; font-size: 20px; }
    .splash-spinner {
      width: 36px; height: 36px; border-radius: 50%;
      border: 3px solid rgba(255,255,255,.25);
      border-top-color: #ff6b6b; animation: spin 0.8s linear infinite;
    }
    .splash-hint { opacity: .7; font-size: 13px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .hide { opacity: 0; pointer-events: none; transition: opacity .18s ease; }

/* =========================================================
   FOOTER (override definitivo) - SIN fondo
   ========================================================= */
#footer,
#footer * {
  background: transparent !important;
}

#footer {
  color: #ff0000;
  padding: 32px 16px;
  font-size: 14px;
}

@media (min-width: 992px){
  #footer {
    grid-area: footer;
    background: transparent !important;
    padding: 32px 16px;
  }
}

#footer .footer.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 12px;
  text-align: center;
  font-weight: bold;
}

#footer .footer-col { min-width: 220px; }
#footer .footer-col p { margin: 6px 0; }

#footer .footer-col a {
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease;
  white-space: nowrap;
  font-size: 15px;
  text-transform: uppercase;
}
#footer .footer-col a:hover { color: #ff0000; }

#footer .footer-col a i {
  width: 18px;
  text-align: center;
  color: #444;
  transition: color .2s ease;
}
#footer .footer-col a:hover i { color: #000; }

#footer .footer-bottom {
  border-top: 1px solid #ddd;
  margin-top: 16px;
  padding-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #ffffff !important;
}

/* ===== Móvil: carrusel horizontal del footer ===== */
@media (max-width: 768px){
  #footer .footer.grid{
    display: block;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 8px;
    text-align: -webkit-center;

  }
  #footer .footer-col{
    vertical-align: top;
    white-space: normal;
    width: 75%;
    max-width: 320px;
    min-width: 260px;
    margin-right: 12px;
    padding: 0;
    
  }
  #footer .footer.grid::-webkit-scrollbar{ height: 8px; }
  #footer .footer.grid::-webkit-scrollbar-thumb{ background: #ccc; border-radius: 8px; }
  #footer .footer.grid::-webkit-scrollbar-track{ background: transparent; }
}

/* =========================================================
   DATOS PARTIDO
   ========================================================= */
.llf-datos-partido{
  background: #ffffff;
  border: 1px solid #ff9aa0;
  border-radius: 12px;
  padding: 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 20px;
}

.llf-encabezado{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  min-width: 0;
}

.team-box{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.team-left{ justify-self: start; }
.team-right{
  justify-self: end;
  flex-direction: row-reverse;
  text-align: right;
}

.imgEquiposDatosPartido{
  width: 84px;
  height: 84px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
}

.team-name{
  font-weight: 700;
  font-size: 22px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score-box .resultado{
  font-size: 26px;
  font-weight: 800;
}

.llf-meta{
  display: grid;
  gap: 8px;
  justify-items: center;
  margin: 12px 0 6px;
  font-size: 18px;
  color: black;
  text-align: center;
}
.llf-meta .arbitro .arb-off{ color: #1dd31d; font-weight: 800; }
.llf-meta .arbitro .arb-on{  color: #0a4;    font-weight: 800; }

.llf-alert{ padding: 12px 14px; border-radius: 10px; font-weight: 600; text-align:center; }
.llf-alert-danger{ background:#ff7f7f; color:#1b1b1b; border:1px solid #c64d4d; }

.llf-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  min-width: 0;
}
@media (max-width: 640px){
  .llf-meta {
      display: grid;
      gap: 8px;
      justify-items: center;
      margin: 12px 0 6px;
      font-size: 12px;
      color: black;
      text-align: center;
  }
}

/* =========================================================
   CUOTAS (ancho fijo -> responsive)
   ========================================================= */
.cuotasTabla {
  background: #ffffff;
  border-radius: 10px;
  padding: 8px;
  width: min(720px, 100%);
  margin: 0 auto;
}

.cuotasTabla .tituloCuotas {
  text-align: center;
  font-weight: 700;
  font-size: 1.2em;
  margin: 10px 0;
  color: black;
}

.tablaCuotas {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  color: black;
}

.tablaCuotas thead {
  background: #ff7a7a;
  color: #000;
}

.tablaCuotas th,
.tablaCuotas td {
  padding: 8px 5px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  color: black;
}

.tablaCuotas td.colCasa {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.logoApuesta {
  height: 30px;
  width: 30px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 3px;
}

/* =========================================================
   H2H (width fijo -> responsive)
   ========================================================= */
.h2h-wrap{
  padding: 6px 0;
  background: white;
  width: min(900px, 100%);
  margin: 0 auto;
}

.h2h-title {
    margin: 6px 0 10px;
    text-align: center;
    color: #000000;
    font-weight: bolder;
    background: #ffafaf;
    padding: 6px 10px;
    border-radius: 10px;
}

.h2h-bar { margin: 14px; }
.h2h-bar-title { font-weight: bold; margin-bottom: 6px; color: black;}
.h2h-bar-track {
  display: flex;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.08);
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}
body:not(.theme-red) .h2h-bar-track { background:#1f253b; color: black;}

.h2h-bar-home {
  display:flex; align-items:center; justify-content:flex-start;
  background:#3ab54a; color:#fff; font-size:12px; padding-left:6px;
}
.h2h-bar-away {
  display:flex; align-items:center; justify-content:flex-end;
  background:#dc3545; color:#fff; font-size:12px; padding-right:6px;
}
.h2h-bar-scale {
  display:flex; justify-content:space-between;
  font-size:11px;
  opacity:.65;
  margin-top:4px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   H2H (v2) - 3 filas: fecha / partido+resultado / estadio
   (REEMPLAZA el bloque H2H-item antiguo del main)
   ========================================================= */

.h2h-list{ margin-top:8px; padding: 0 10px; }

/* cada item ya NO es grid 4 columnas */
.h2h-item{
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: block;
}
.h2h-item:first-child{ border-top:none; }

.h2h-row{ width:100%; }

/* fila 1: fecha */
.h2h-date{
  font-weight: 800;
  text-align: center;
  font-size: 13px;
  margin: 6px 0;
}

/* fila 2: partido */
.h2h-match{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap: 10px;
  margin: 8px 0;
  min-width:0;
}

.h2h-team{
  display:flex;
  align-items:center;
  justify-content:center;   /* centra escudo+nombre */
  gap: 8px;
  min-width:0;
}

.h2h-team img{
  width: 24px;
  height: 24px;
  object-fit: contain;
  display:block;
  flex: 0 0 24px;
}

.h2h-teamname{
  font-weight: 900;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* score pill centrado */
.h2h-score{
  font-weight: 900;
  min-width: 80px;
  text-align:center;
  white-space:nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,0,0,.10);
  border: 1px solid rgba(255,0,0,.12);
}

/* fila 3: estadio */
.h2h-venue{
  font-size: 12px;
  opacity: .85;
  text-align:center;
  margin-top: 6px;
}

/* móvil: más compacto + evita cortes */
@media (max-width: 640px){
  .h2h-teamname{ font-size: 13px; max-width: 140px; }
  .h2h-team img{ width: 22px; height: 22px; flex:0 0 22px; }
  .h2h-score{ min-width: 0px; padding: 5px 8px; }
}


.h2h-color-negro-bar-trank { color: black !important; font-size: smaller;}

/* =========================================================
   PRONOSTICO
   ========================================================= */
.pronostico-card { padding:16px; border-radius:12px; }
.pronostico-card h2 {
  color:rgb(255, 255, 255); font-weight:800; margin:0 0 12px;
  border-bottom:2px solid #f44; padding-bottom:8px;
}
.fondoTitulo { background: #ff6e6e; color:#fff; font-weight:800; padding:10px 12px; border-radius:8px; margin-top:14px; }
.pPronostico { padding: 8px 12px; text-align: center; font-size: 14px;}
.pronostico-row { display:grid; grid-template-columns: repeat(3, 1fr) !important; gap:12px; text-align:center; margin-top:8px; }
.pronostico-row2 { display:grid; grid-template-columns: repeat(2, 1fr); text-align:center; }
.pronostico-col-6 { grid-column: span 1; padding:8px 4px; }
.cabePronostico { font-weight: 800; color: rgb(255, 255, 255); font-size: 12px;}

/* =========================================================
   PATCH CenterMatches
   ========================================================= */
.block[data-block="center-matches"] .match.card{
    grid-template-columns: 28px 1fr 90px;
    grid-template-rows: auto auto;
    column-gap: .75rem;
    row-gap: .45rem;
    align-items: center;
    padding: .7rem .9rem;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .02);
    margin: .45rem 0;
}

.block[data-block="center-matches"] .match .cols{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
  min-width:0;
}

.block[data-block="center-matches"] .match .team{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.block[data-block="center-matches"] .match .team img{
  width:26px;
  height:26px;
  object-fit:contain;
  border-radius:6px;
  flex: 0 0 auto;
}

.block[data-block="center-matches"] .match .team--away{ justify-content:flex-end; }
.block[data-block="center-matches"] .match .team--away .team-name{ order:-1; }

.block[data-block="center-matches"] .match .scorebox{
  min-width:88px;
  text-align:center;
  font-weight:800;
}

.block[data-block="center-matches"] .match .score-num{ font-size:1.05rem; }
.block[data-block="center-matches"] .match .score-vs{ color:#ffffff; }

.block[data-block="center-matches"] .match .meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  color:#6b7280;
  flex-wrap: wrap;
}

.block[data-block="center-matches"] .match .badge{
  font-size:.75rem;
  padding:.2rem .5rem;
  border-radius:999px;
  font-weight:700;
  color:#fff;
}

.block[data-block="center-matches"] .match .badge.live{ background:#16a34a; }
.block[data-block="center-matches"] .match .badge.ns{ background:#ff7777; }
.block[data-block="center-matches"] .match .badge.ft{ background:#de1a1a; }

/* Acordeón */
.block[data-block="center-matches"] details.bloqueEstadisticaJugador{
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  margin:6px 0;
  overflow:hidden;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .02);
}
.block[data-block="center-matches"] details.bloqueEstadisticaJugador[open]{ border-color: rgba(0,0,0,.18); }
.block[data-block="center-matches"] .resumenEstadisticas{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  font-weight:700;
  background: rgba(255, 255, 255, .02);
  color: #ff7777;;
}
.block[data-block="center-matches"] .resumenEstadisticas::-webkit-details-marker{ display:none; }
.block[data-block="center-matches"] details.bloqueEstadisticaJugador > div[id]{
  border-top:1px solid rgba(0,0,0,.06);
  padding:10px 12px 12px;
}

/* Resumen */
.block[data-block="center-matches"] .summary-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  overflow:hidden;
}
.block[data-block="center-matches"] .summary-card .sum-header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, #cce4ff, #f8fafc);
}
.block[data-block="center-matches"] .summary-card .sum-team{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}
.block[data-block="center-matches"] .summary-card .sum-team img{
  width:28px; height:28px;
  object-fit:contain;
  border-radius:6px;
  flex: 0 0 auto;
}
.block[data-block="center-matches"] .summary-card .sum-team--right{ justify-content:flex-end; }
.block[data-block="center-matches"] .summary-card .sum-score{
  font-weight:900;
  font-size:1.25rem;
  letter-spacing:.5px;
}
.block[data-block="center-matches"] .summary-card .sum-body{ padding:8px 10px 12px; }
.block[data-block="center-matches"] .summary-card .sum-row{
  display:grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items:center;
  gap:6px;
  padding:8px 0;
  border-bottom:2px solid #ffdbdb;
}
.block[data-block="center-matches"] .summary-card .sum-row:last-child{ border-bottom:none; }
.block[data-block="center-matches"] .summary-card .sum-side{ min-height:24px; min-width:0; }
.block[data-block="center-matches"] .summary-card .sum-side--home{ text-align:right; }
.block[data-block="center-matches"] .summary-card .sum-side--away{ text-align:left; }
.block[data-block="center-matches"] .summary-card .ev{ display:inline-flex; align-items:center; gap:6px; }
.block[data-block="center-matches"] .summary-card .ev-ic{ font-size:1rem; }
.block[data-block="center-matches"] .summary-card .sum-minute{
  text-align:center;
  font-weight:800;
  color: #000000;
  background: #ff9e9e;
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  padding:2px 8px;
}
.block[data-block="center-matches"] .summary-card .sum-sub{ display:flex; flex-direction:column; gap:2px; }
.block[data-block="center-matches"] .summary-card .sub-out{ color:#16a34a; font-weight:700; }
.block[data-block="center-matches"] .summary-card .sub-in{ color:#ef4444; font-weight:700; }

/* =========================================================
   ESTADÍSTICAS (barras)
   ========================================================= */
.block[data-block="center-matches"] .stats-wrap{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:10px 12px;
  overflow-x: auto;
}

.block[data-block="center-matches"] table.stats-bars{
  width:100%;
  border-collapse:collapse;
  min-width: 560px; /* permite scroll si no cabe */
}

.block[data-block="center-matches"] table.stats-bars thead th{
  font-weight:800;
  font-size:13px;
  color:#000000;
  background:#fee2e2;
  padding:8px 10px;
  text-align: center;
}
.block[data-block="center-matches"] table.stats-bars thead .th-num{ width:90px; }

.block[data-block="center-matches"] table.stats-bars tbody tr{ height:32px; position:relative; }
.block[data-block="center-matches"] table.stats-bars tbody td{
  padding:0 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.block[data-block="center-matches"] table.stats-bars tbody tr:last-child td{ border-bottom:none; }

.block[data-block="center-matches"] table.stats-bars tbody td.metric{ position:relative; }
.block[data-block="center-matches"] .stat-bar{
  position:relative;
  height:30px;
  margin:0 4px;
}
.block[data-block="center-matches"] .stat-bar .bar-left,
.block[data-block="center-matches"] .stat-bar .bar-right{
  position:absolute;
  top:53%;
  transform:translateY(-50%);
  height:18px;
  opacity:.95;
}
.block[data-block="center-matches"] .stat-bar .bar-left{
  left:0;
  width:var(--home, 50%);
  background:#3b82f6;
  height: 100%;
}
.block[data-block="center-matches"] .stat-bar .bar-right{
  right:0;
  width:var(--away, 50%);
  background:#ef4444;
  height: 100%;
}

.block[data-block="center-matches"] .metric-name{
  position:absolute;
  left:50%;
  top:47%;
  transform:translate(-50%, -50%);
  color:#000000;
  white-space:nowrap;
  pointer-events:none;
}

.block[data-block="center-matches"] td.num{ width:90px; font-weight:700; }
.block[data-block="center-matches"] td.num-home{ text-align:left; }
.block[data-block="center-matches"] td.num-away{ text-align:right; }

.block[data-block="center-matches"] table.stats-bars tbody tr:hover .bar-left,
.block[data-block="center-matches"] table.stats-bars tbody tr:hover .bar-right{
  opacity:1;
}

.block[data-block="center-matches"] table.stats-bars tbody tr:has(.metric-name:where(:is(:not(:empty)))) .stat-bar{
  filter:saturate(1.05);
}

/* =========================================================
   ALINEACIONES
   ========================================================= */
.lineup-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  min-width: 0;
}
@media (max-width: 900px){
  .lineup-wrap{ grid-template-columns: 1fr; }
}

.lineup-col{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  min-width:0;
}

.lu-head{
  background:#ff5a5a;
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:12px;
}
.lu-team{ display:flex; align-items:center; gap:10px; min-width:0; }
.lu-team img{ width:28px; height:28px; border-radius:50%; background:#fff; flex:0 0 auto; }
.lu-team h4{ margin:0; font-weight:800; letter-spacing:.2px; min-width:0; }
.lu-team h4 small{ font-weight:700; opacity:.9; }

.pitch{ background:#198754; border-radius:12px; padding:10px; height: 500px;}
.grass{
  background-image:
    linear-gradient(#30a35b 0 0),
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 40px, rgba(0,0,0,0) 40px 80px);
  background-size:100% 2px, 100% 100%;
  background-repeat:no-repeat;
  border-radius:8px;
  padding:14px 10px;
  position:relative;
  min-height:320px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.lane{
  display:grid;
  grid-template-columns: repeat(var(--cols,1), 1fr);
  gap:14px;
  align-items:center;
  min-width:0;
}

.plr{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  position:relative;
  min-width:0;
}
.plr img{
  width:44px;
  height:44px;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.15);
  object-fit:cover;
  background:#fff;
}
.plr-name{
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plr-num{
  background: rgb(45 0 255 / 67%);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:1px 4px;
  border-radius:6px;
  line-height:1;
}

/* Entrenador */
.coach-card{
  background:#1c284a;
  border-radius:10px;
  padding:10px;
  margin-top:12px;
}
.coach-title{ font-weight:800; margin-bottom:6px; }
.coach-body{ display:flex; align-items:center; gap:10px; }
.coach-body img{ width:36px; height:36px; border-radius:50%; background:#fff; }

/* Suplentes */
.bench-card{
  background:#1c284a;
  border-radius:10px;
  padding:10px;
  margin-top:12px;
}
.bench-title{ font-weight:800; margin-bottom:8px; }
.bench-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  align-items:center;
  min-width:0;
  background-color: #1c284a;
}

.bench-item{
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px;
  margin-bottom: 1%;
  text-decoration: none;
  color: white;
  min-width:0;
}
.bench-item img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.bench-item span{
  font-size:14px;
  font-weight:600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: black;
}

/* =========================================================
   PLAYER MODAL
   ========================================================= */
.no-scroll { overflow: hidden; }

.player-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.player-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
}

.player-card {
  position: relative;
  max-width: 760px;
  width: calc(100% - 32px);
  margin: 40px auto;
  background: #0f1325;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  border: 1px solid rgba(255,255,255,.08);
  animation: pc-pop .18s ease-out;

  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
}
.player-card::-webkit-scrollbar { width: 8px; }
.player-card::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.25); border-radius: 4px; }
.player-card::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.4); }

@keyframes pc-pop {
  from { transform: translateY(10px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

.pc-close{
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff; font-size: 22px; line-height: 36px;
  cursor: pointer;
  transition: background .2s ease, transform .08s ease;
}
.pc-close:hover{ background: rgba(255,255,255,.2); }
.pc-close:active{ transform: scale(.96); }

.pc-head{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 18px 18px 12px;
  background: linear-gradient(135deg, #1b2040 0%, #25103b 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.pc-portrait{
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(120px 80px at 50% 40%, rgba(255, 73, 73, .35), transparent 60%);
  border-radius: 12px;
  padding: 8px;
}

.pc-photo{
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.12);
  background: #111;
}

.pc-rating{
  position: absolute;
  bottom: -10px; left: 50%;
  transform: translateX(-50%);
  background: #18c964;
  color: #0c2718;
  font-weight: 800;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(24,201,100,.35);
  border: 1px solid rgba(12,39,24,.2);
}

.pc-id{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.pc-title{
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  margin-bottom: 6px;
  color: white;
}
.pc-team{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: .9;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 6px 8px;
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.pc-team-logo{
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

.pc-body{
  padding: 14px 18px 18px;
  background: linear-gradient(180deg, #0f1325 0%, #111632 100%);
}

.pc-section{
  margin-top: 14px;
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #ff9999;
}

.pc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 14px;
}

.pc-row{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  color: red;
  min-width: 0;
}

.pc-label{ opacity: .9; font-weight: 600; color: white; min-width:0; }
.pc-val{
  text-align: right;
  font-weight: 800;
  background: rgba(255,255,255,.06);
  padding: 6px 10px;
  border-radius: 8px;
  color: white;
  min-width: 0;
}

/* ===== Player modal: competencia header en una línea + acordeón ===== */

.pc-comp{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0;
  background: rgba(255,255,255,.03);
}

.pc-comp > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.pc-comp > summary::-webkit-details-marker{ display:none; }

.pc-comp > summary:hover{
  background: rgba(255,255,255,.04);
}

.pc-comp[open] > summary{
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.pc-comp-logo{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

.pc-comp-name{
  color: #fff;              /* blanco como pediste */
  font-weight: 900;
  letter-spacing: .2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;      /* una línea */
}

.pc-comp-season{
  margin-left: auto;
  opacity: .75;
  font-weight: 800;
  white-space: nowrap;
  color: #ffd1d1;
}

.pc-comp-body{
  padding: 12px 14px 14px;
}

/* flechita */
.pc-comp-arrow{
  margin-right: 2px;
  opacity: .7;
  font-weight: 900;
}
.pc-comp[open] .pc-comp-arrow{ transform: rotate(180deg); }
.pc-comp-arrow{ transition: transform .15s ease; }

/* badge rating arriba (si no lo ves bien) */
.pc-rating{
  background: #18c964;
  color: #0c2718;
}


/* Responsive del modal */
@media (max-width: 640px){
  .player-card{ margin: 24px auto; width: calc(100% - 20px); }
  .pc-head{ grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 14px 10px; }
  .pc-photo{ height: 96px; }
  .pc-title{ font-size: 20px; }
  .pc-grid{ grid-template-columns: 1fr; }
  .pc-row{ grid-template-columns: 1fr; gap: 8px; }
  .pc-val{ text-align: left; }
}

/* =========================================================
   BENCH responsive
   ========================================================= */
@media (max-width: 1200px){ .bench-list{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 700px){ .bench-list{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px){ .bench-list{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* =========================================================
   Ajustes móviles extra para center-matches
   ========================================================= */
@media (max-width: 640px){
  .block[data-block="center-matches"] .match .team .team-name{ display:none; }
  .block[data-block="center-matches"] .summary-card .sum-row{ grid-template-columns: 1fr 52px 1fr; }
  .pronostico-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .llf-row{ grid-template-columns: 1fr; }
}

.llf-col{ display:flex; }
.llf-card{
  width:100%;
  border:1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  overflow:hidden;
  background:#fff3f3;
  min-width:0;
}
.llf-card .llf-card-head{ padding:10px 12px; color:#fff; font-weight:700; }
.llf-card .bg-danger{ background:#dc3545; }
.llf-card .bg-primary{ background:#0d6efd; }
.llf-list{ list-style:none; margin:0; padding:0; }
.llf-item, .llf-lesion{ padding:10px 12px; border-top:1px solid rgba(0,0,0,.08); }
.jugadorLesionado{ margin:0 0 4px 0; color: black;}

/* Botón de jugador dentro del texto de eventos/alineaciones */
.js-player-link{
  border: none;
  background: transparent;
  padding: 0 2px;
  cursor: pointer;
  color: #000000;
  text-decoration: none;
}
.js-player-link:hover { text-decoration: underline; }

/* =========================================================
   PARTIDOS POR DÍA
   ========================================================= */
.tm-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:12px;
  flex-wrap: wrap;
}
.tm-left h2{ margin:0; }
.tm-sub{ font-size:12px; opacity:.7; margin-top:4px; }

.tm-controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.tm-btn{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.12);
  cursor:pointer;
}
.tm-date, .tm-search{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255, 157, 157, 0.12);
}

.tm-group{ margin-bottom:18px; }
.tm-group-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(0,0,0,.04);
  flex-wrap: wrap;
}


.tm-league-head{
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  padding: 3px;
}

.tm-league-logo{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

.tm-league-title{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* si el nombre es largo no rompe layout */
}

.tm-league-title .name{
  font-weight: 700;
  font-size: 14px;
}

.tm-league-title .country{
  font-size: 12px;
  opacity: .6;
}


.tm-group-head h3{ margin:0; font-size:16px; }
.tm-round{ margin-left:auto; opacity:.7; }

.tm-list{ display:grid; gap:10px; margin-top:10px; }

.tm-item .tm-cols{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
  min-width:0;
}
.tm-team{ display:flex; align-items:center; gap:8px; min-width:0; }
.tm-team img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.tm-team.tm-away{ justify-content:flex-end; flex-direction:row-reverse; text-align:right; }

.tm-scorebox{ display:grid; align-items:center; justify-items:center; gap:6px; }
.tm-scorebox .score-num{ font-weight:800; font-size:18px; }
.tm-scorebox .score-vs{ opacity:.7; font-weight:700; }
.tm-meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:12px;
  opacity:.9;
  text-align:center;
}
.tm-item{ cursor:pointer; transition: transform .06s ease; }
.tm-item:hover{ transform: translateY(-1px); }

.tm-acc-head {
  border: 1px solid #1f2a44;
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--shadow);
  margin-bottom: 5px;
  background: #000000;
}

/* Responsive */
@media (max-width: 720px){
  .tm-item .tm-cols{ grid-template-columns: 1fr; gap:8px; }
  .tm-team.tm-away{ justify-content:flex-start; flex-direction:row; text-align:left; }
  .tm-scorebox{ justify-items: start; }
}

/* =========================================================
   RESUMEN DE PARTIDO (match-details)
   ========================================================= */
.match-details .summary-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  overflow: hidden;
}

.match-details .sum-header{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.match-details .sum-team{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.match-details .sum-team img{
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f3f3;
  border: 1px solid rgba(0,0,0,.06);
  flex:0 0 auto;
}
.match-details .sum-team span{
  font-weight: 800;
  font-size: 16px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-details .sum-team--right{ justify-content: flex-end; flex-direction: row-reverse; }

.match-details .sum-score{
  font-size: 22px;
  font-weight: 900;
  color: #111;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffe3e3;
  border: 1px solid #ffc2c2;
}

.match-details .sum-body{ padding: 8px 10px; }

.match-details .sum-row{
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(0,0,0,.08);
  min-width:0;
}
.match-details .sum-row:last-child{ border-bottom: none; }

.match-details .sum-side{
  display: flex;
  align-items: center;
  min-height: 28px;
  font-weight: 600;
  color: #111;
  min-width:0;
}
.match-details .sum-side--home{ justify-content: flex-start; }
.match-details .sum-side--away{ justify-content: flex-end; text-align: right; }

.match-details .sum-minute{
  text-align: center;
  font-weight: 800;
  color: #c00;
  background: #fff4f4;
  border:1px solid #ffd4d4;
  padding: 4px 0;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.match-details .ev{ display: inline-flex; align-items: center; gap: 6px; }
.match-details .ev-ic{ opacity: .9; }

.match-details .sum-sub{ display: grid; gap: 3px; }
.match-details .sum-sub .sub-in,
.match-details .sum-sub .sub-out{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}
.match-details .sum-sub .sub-in{  background: #e9f9ef; border:1px solid #cdeed8; color:#0a7a3a; }
.match-details .sum-sub .sub-out{ background: #fff4f4; border:1px solid #ffd4d4; color:#a11111; }

.match-details .js-player-link{
  border: none;
  background: transparent;
  color: #0a4;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}
.match-details .js-player-link:hover{ text-decoration: underline; }

@media (max-width: 640px){
  .match-details .sum-header{
    grid-template-columns: 1fr;
    text-align: center;
    row-gap: 8px;
  }
  .match-details .sum-team,
  .match-details .sum-team--right{
    justify-content: center;
    flex-direction: row;
    gap: 8px;
  }
  .match-details .sum-row{
    grid-template-columns: 1fr 56px 1fr;
    gap: 6px;
    padding: 7px 4px;
  }
  .match-details .sum-minute{ padding: 3px 0; }
}

/* =========================================================
   Estadísticas (mini) - ok + responsive seguro
   ========================================================= */
.table-wrap.stats-wrap{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  overflow:hidden;
}

table.mini.stats-bars{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
  min-width: 560px; /* permite scroll si no cabe */
}

.table-wrap.stats-wrap{
  overflow-x: auto;
}

table.mini.stats-bars thead th{
  font-weight:800;
  font-size:12px;
  letter-spacing:.4px;
  color:#444;
  background:#fafafa;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:10px 12px;
}
table.mini.stats-bars th.th-num{ width:92px; text-align:center; }

table.mini.stats-bars tbody td{
  padding:10px 12px;
  border-bottom:1px dashed rgba(0,0,0,.06);
  vertical-align:middle;
}
table.mini.stats-bars tbody tr:last-child td{ border-bottom:none; }

table.mini.stats-bars td.num{
  font-weight:800;
  font-variant-numeric: tabular-nums;
  color:#111;
}
table.mini.stats-bars td.num-home{ text-align:left; }
table.mini.stats-bars td.num-away{ text-align:right; }

table.mini.stats-bars td.metric{ width:auto; }

.stat-bar{
  position:relative;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  background:#f6f6f6;
  overflow:hidden;
}

.stat-bar .bar-left,
.stat-bar .bar-right{
  position:absolute;
  top:0; bottom:0;
  display:block;
}
.stat-bar .bar-left{
  left:0;
  width: calc(var(--home, 0%) * 1%);
  background:#18c964;
  opacity:.85;
}
.stat-bar .bar-right{
  right:0;
  width: calc(var(--away, 0%) * 1%);
  background:#ff5b5b;
  opacity:.85;
}

.stat-bar .metric-name{
  position:relative;
  z-index:1;
  font-weight:700;
  color:#0f1325;
  mix-blend-mode: normal;
}

body{
  --pc-dark-1:#0f1325;
  --pc-dark-2:#111632;
}
body.dark .table-wrap.stats-wrap{
  background:linear-gradient(180deg, var(--pc-dark-1) 0%, var(--pc-dark-2) 100%);
  border-color:rgba(255,255,255,.08);
}
body.dark table.mini.stats-bars thead th{
  background:rgba(255,255,255,.04);
  color:#ddd;
  border-bottom-color:rgba(255,255,255,.08);
}
body.dark table.mini.stats-bars td{ border-bottom-color:rgba(255,255,255,.06); }
body.dark .stat-bar{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}
body.dark .stat-bar .metric-name{ color:#fff; }

/* =========================================================
   CalendarView
   ========================================================= */
.cv-body{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  min-width:0;
}
.cv-rounds{
  background: var(--panel, rgba(255,255,255,.85));
  border-radius: var(--radius, 12px);
  padding: 12px;
  box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.08));
  min-width:0;
}
.cv-chips-wrap{
  display: grid;
  grid-auto-rows: min-content;
  gap: 8px;
  max-height: 70vh;
  overflow: auto;
}
.cv-chip{
  width: 100%;
  border: 1px solid rgba(0,0,0,.1);
  background: #ffffff;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  transition: transform .05s ease, background .2s ease;
}
.cv-chip:hover{ background: #f6f6f6; }
.cv-chip.active{
  background: #ffefef;
  border-color: #ff8c8c;
  font-weight: 800;
}
.cv-matches{ display: grid; gap: 12px; }

@media (max-width: 900px){
  .cv-body{ grid-template-columns: 1fr; }
}

/* =========================================================
   Standings (ya ok) + responsive extra seguro
   ========================================================= */
.st-accordion > details{
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  margin: 12px 0;
  overflow: hidden;
}
.st-accordion > details > summary{
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
  background: linear-gradient(135deg,#1b2040 0%, #25103b 100%);
  color: #fff;
  list-style: none;
  user-select: none;
}
.st-accordion > details[open] > summary{
  background: linear-gradient(135deg,#2a2f5e 0%, #3a1a62 100%);
}

.st-table-wrap{
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 0;
  max-height: 60vh;
  overflow: auto;
}

.st-table{
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  color: #fff;
}

.st-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(17,22,50,.95);
  backdrop-filter: blur(4px);
  color: #e6e6e6;
  font-weight: 800;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  text-align: start;
}

.st-table-form {
  text-align: center !important;
}

.st-table tbody td{
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
  color: #eaeaf6;
}

.st-col-rank{ width: 44px; text-align: center; }
.st-col-team{ min-width: 240px; }
.st-col-forma{ width: 200px; text-align: center; }
.st-rank{ text-align: center; font-weight: 800; }
.st-pts{ font-weight: 800; }

.st-team{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Nombre + badge alineados en una línea */
.st-team-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

/* Iconos de UCL/UEL/UECL… */
.st-badge{
  width:26px;
  height:26px;
  object-fit:contain;
  border-radius:4px;
  flex:0 0 auto;
}


.st-logo{
  width: 25px; 
  height: 25px;
  object-fit: contain;
}
.st-name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.st-table td.pos{ color:#19da7a; font-weight: 800; }
.st-table td.neg{ color:#ff6b6b; font-weight: 800; }

.st-form{ display: flex; gap: 6px; justify-content: center; }
.form-pill{
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.form-pill.f-win{  background:#2ecc71; }
.form-pill.f-draw{ background:#f1c40f; color:#222; }
.form-pill.f-lose{ background:#e74c3c; }

.st-tag{
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #cfd3ff;
  white-space: nowrap;
}

.st-table-wrap::-webkit-scrollbar{ width: 10px; height: 10px; }
.st-table-wrap::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 8px; }
.st-table-wrap::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }

/* Leyendas y tags (tal cual) */
.st-legend{
  display:flex; flex-wrap:wrap; gap:12px; margin:12px 4px 16px;
  font-size:13px; align-items:center; color:#e6e6e6; font-weight:600;
}
.st-legend .leg{
  display:inline-block; padding:4px 8px; border-radius:6px;
  font-size:11px; font-weight:800; color:#fff; margin-right:4px;
}
.leg.ucl  { background:#0f63ff; }
.leg.uel  { background:#ff8f00; color:#111; }
.leg.uecl { background:#00b37e; color:#111; }
.leg.pl   { background:#8b5cf6; }
.leg.desc { background:#e53935; }

.st-tag{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:8px;font-size:11px;font-weight:800}
.st-tag.ucl{background:#1e90ff;color:#fff}
.st-tag.uel{background:#ff7a00;color:#111}
.st-tag.uecl{background:#00c16a;color:#111}
.st-tag.pl{background:#8b5cf6;color:#fff}
.st-tag.desc{background:#e11d48;color:#fff}

.st-rank.ucl{background:#1e90ff;color:#fff;}
.st-rank.uel{background:#ff7a00;color:#111;}
.st-rank.uecl{background:#00c16a;color:#111;}
.st-rank.pl{background:#8b5cf6;color:#fff;}
.st-rank.desc{background:#e11d48;color:#fff;}

tr.z-ucl   { background: rgba(30,144,255,.06); }
tr.z-uel   { background: rgba(255,122,0,.06); }
tr.z-uecl  { background: rgba(0,193,106,.06); }
tr.z-pl    { background: rgba(139,92,246,.06); }
tr.z-desc  { background: rgba(225,29,72,.06); }

.st-table td.st-rank > b{
  display: inline-block;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 6px;
  text-align: center;
  font-weight: 800;
  line-height: 1.2;
}
.st-table td.st-rank.ucl  > b { background:#1e90ff; color:#fff; }
.st-table td.st-rank.uel  > b { background:#ff7a00; color:#111; }
.st-table td.st-rank.uecl > b { background:#00c16a; color:#111; }
.st-table td.st-rank.pl   > b { background:#8b5cf6; color:#fff; }
.st-table td.st-rank.desc > b { background:#e11d48; color:#fff; }

.leg.asc{ background:#2d8d2d; color:#fff; }
.st-tag.asc{ background:#2d8d2d; color:#fff; }
.st-rank.asc{ background:#2d8d2d; color:#fff; border-radius:6px; }
tr.z-asc{ background: rgba(45,141,45,.06); }

/* Ocultamos FORMA y columnas pesadas en pantallas estrechas */
@media (max-width: 680px){
  .st-col-forma{ display:none; }
  .st-table thead th:nth-child(8),
  .st-table thead th:nth-child(9),
  .st-table thead th:nth-child(10){ display:none; }
  .st-table tbody td:nth-child(8),
  .st-table tbody td:nth-child(9),
  .st-table tbody td:nth-child(10){ display:none; }
}


/* =========================================================
   RANKINGS (responsive)
   ========================================================= */
.rk-acc{
  background: #ffe6e6;
  border: 1px solid #ffb3b3;
  border-radius: 10px;
  margin: 14px 0;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.05) inset;
}
.rk-acc > summary{
  cursor: pointer;
  padding: 14px 16px;
  background: #fde3e3;
  color: #a32222;
  font-weight: 800;
  list-style: none;
  user-select: none;
  border-bottom: 1px solid #ffd3d3;
}
.rk-acc[open] > summary{ background:#f7caca; }

.rk-card{ background: #fff; padding: 16px; }

.rk-top{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  background: #f0e0c6;
  border-radius: 6px;
  border: 1px solid #e3d0ae;
  padding: 16px;
  margin-bottom: 18px;
  min-width:0;
}
.rk-top-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.rk-top-photo{
  width:84px; height:84px; border-radius:999px;
  object-fit:cover; background:#fff;
  border:3px solid #e34b4b;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
  flex:0 0 auto;
}
.rk-top-name{ font-weight: 800; font-size: 20px; color:#9b1c1c; min-width:0; }
.rk-top-right{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:8px 18px;
  align-items:center;
  min-width:0;
}
.rk-metric{ font-size:14px; color:#6b6b6b; }
.rk-metric span{ opacity:.85; margin-right:6px; }
.rk-metric .green{ color:#1f9d47; }
.rk-top-team{ width:40px; height:40px; object-fit:contain; justify-self:end; flex:0 0 auto; }

.rk-table-wrap{ width: 100%; overflow-x:auto; border-radius:8px; }
.rk-table{ width:100%; border-collapse: collapse; background:#fff; min-width: 620px; }
.rk-table thead th{
  position: sticky; top:0; z-index: 1;
  background:#e94141;
  color:#fff; font-weight:800; letter-spacing:.2px;
  padding:10px 8px; font-size:13px;
  border-bottom:2px solid #cf2f2f;
}
.rk-table tbody td, .rk-table tbody th{
  padding:10px 8px; font-size:14px; color:#2d2d2d;
  border-bottom:1px solid #f0f0f0;
  vertical-align: middle;
}
.rk-table tbody tr.alt{ background:#f7f7f7; }
.rk-table tbody tr:hover{ background:#fff4f4; }

.rk-row-photo{
  width:28px; height:28px; border-radius:999px; object-fit:cover;
  vertical-align:middle; margin-right:8px; border:1px solid #eee;
}
.rk-row-team{
  width:22px; height:22px; object-fit:contain; vertical-align:middle;
  margin-right:6px;
}

.rk-table td.c, .rk-table th.c{ text-align:center; }
.rk-table tbody td b{ font-weight:800; }

.rk-head h2{ margin: 8px 0 10px; color:#7a1f1f; font-weight:900; }
.rk-head .muted{ color:#b77b7b; font-size:13px; }

@media (max-width: 860px){
  .rk-top{ grid-template-columns: 1fr; }
  .rk-top-left{ justify-content:flex-start; }
  .rk-top-right{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .rk-top-right{ grid-template-columns: 1fr; }
  .rk-table thead th:nth-child(6),
  .rk-table tbody td:nth-child(6){ display:none; }
}

/* =========================================================
   LIVE BLOCKS
   ========================================================= */
.live-block .lb-head h2{ margin:0 0 6px; }
.live-block .lb-sub{ margin-bottom:12px; }

.lb-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px){ .lb-grid{ grid-template-columns: 1fr; } }

.live-card{ padding:0; overflow:hidden; }
.lc-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  background:#ffe3e3;
  border-bottom:1px solid #ffd1d1;
  flex-wrap: wrap;
  gap: 8px;
}
.lc-title{ font-weight:800; color:#8a1f1f; }
.badge{ padding:4px 8px; border-radius:6px; font-weight:800; font-size:12px; }
.badge.live{ background:#e53935; color:#fff; animation: pulse 1.4s infinite; }
.badge.off{ background:#e5e5e5; color:#666; }
@keyframes pulse{ 0%{opacity:1}50%{opacity:.4}100%{opacity:1} }

.lc-body{ padding:12px; background:#fff; }
.lc-foot{ padding:10px 12px; background:#fff7f7; border-top:1px solid #ffe1e1; }
.btn{ display:inline-block; padding:8px 12px; border-radius:8px; background:#ff6b6b; color:#fff; font-weight:800; text-decoration:none; }

.live-embed{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; }
.live-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.lb-alert{
  display:block;
  margin:8px 0 12px;
  padding:10px 12px;
  border-radius:8px;
  background:#132f15;
  color:#bdf8c3;
  font-weight:800;
  border:1px solid #3aa84d;
  opacity:0;
  transform: translateY(-6px);
  transition: .25s;
}
.lb-alert.show{ opacity:1; transform:none; }

/* Banner ON AIR */
.live-banner.ltv{
  position: fixed;
  top: -80px; left: 0; right: 0;
  z-index: 2000;
  transition: transform .35s ease, top .35s ease, opacity .2s ease;
  transform: translateY(-100%);
  opacity: 0;
}
.live-banner.ltv.visible{
  top: 0;
  transform: translateY(0);
  opacity: 1;
}
.live-banner.ltv.hidden{
  top: -80px;
  transform: translateY(-100%);
  opacity: 0;
}
.ltv-wrap{
  margin: 0 auto;
  max-width: 1180px;
  background: linear-gradient(90deg,#0b1a30,#0f2b57);
  border: 1px solid rgba(255,255,255,.08);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  flex-wrap: wrap;
}
.ltv-dot{
  width: 12px; height: 12px; border-radius: 999px;
  background: #ff3b3b; box-shadow: 0 0 12px #ff3b3b;
  animation: pulseDot 1.2s infinite;
}
@keyframes pulseDot{
  0%,100%{ box-shadow: 0 0 6px #ff3b3b; }
  50%{ box-shadow: 0 0 16px #ff3b3b; }
}
.ltv-text{ color: #cfe7ff; font-weight: 800; letter-spacing: .3px; flex: 1; min-width: 220px; }
.ltv-text strong{
  color: #ffffff;
  background: #ff3b3b;
  padding: 3px 8px;
  border-radius: 8px;
  margin-right: 8px;
}
.ltv-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.ltv-btn{
  background: #18b6ff;
  color: #0a0f1a;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
}
.ltv-btn:hover{ filter: brightness(1.05); }
.ltv-btn.ltv-ghost{
  background: transparent;
  color: #cfe7ff;
  border: 1px solid rgba(255,255,255,.15);
}

/* Live cards */
.live-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px){ .live-grid{ grid-template-columns: 1fr; } }

.live-card{ background: #ffe3e3; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; }
.live-card .lc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background:#ffd0d0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex-wrap: wrap;
  gap: 8px;
}
.live-card .lc-title{ font-weight: 800; }
.live-card .lc-badge{
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color:#222;
  background:#e7e7e7;
}
.live-card.live-on .lc-badge{
  background:#ff3b3b;
  color:#fff;
  box-shadow: 0 0 10px rgba(255,59,59,.4);
}
.live-card .lc-body{ padding: 14px; background:#fff; }
.live-card .btn{
  display:inline-block;
  background:#ff7a7a;
  color:#000;
  font-weight:800;
  border:0;
  padding:8px 12px;
  border-radius: 8px;
  cursor:pointer;
  text-decoration:none;
}

.live-player-block{ margin-top: 16px; }
.yt-embed iframe{ border-radius: 10px; }

/* =========================================================
   APUESTAS / ODDS (responsive) — Flashscore-like en móvil
   ========================================================= */

.odds-block .sb-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.odds-toolbar{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}
.odds-toolbar .btn{
  padding:.35rem .6rem;
  border-radius:.5rem;
  background:var(--llf-dark-2, #1c1f24);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
}
.odds-toolbar .btn:hover{ filter:brightness(1.1); }
.odds-toolbar .switch{
  display:inline-flex;
  gap:.4rem;
  align-items:center;
  font-size:.9rem;
  opacity:.9;
}

/* ========= ICONOS / ESCUDOS ========= */
.shield{
  width:24px;
  height:24px;
  object-fit:contain;
  flex:0 0 auto;
}

/* ========= DETAILS ========= */
.odds-fixture > summary{ list-style:none; cursor:pointer; }
.odds-fixture > summary::-webkit-details-marker{ display:none; }

.odds-fixture[open] > summary .match-row{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border-bottom-color:transparent;
  border-radius:.5rem .5rem 0 0;
}
.odds-details{
  background:rgba(255,255,255,.03);
  border-radius:0 0 .5rem .5rem;
}
/* ========= GRUPOS / SUBGRUPOS ========= */
.odds-group{
  margin:.5rem 0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:.6rem;
  overflow:hidden;
}
.odds-group > summary{
  padding:.65rem .8rem;
  background:rgba(255,255,255,.03);
  font-weight:700;
  cursor:pointer;
  color:wheat;
}
.odds-group > summary::-webkit-details-marker{ display:none; }

.odds-subgroup{
  margin:.4rem .6rem;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:.5rem;
}
.odds-subgroup > summary{
  padding:.5rem .6rem;
  cursor:pointer;
  font-weight:600;
}
.odds-subgroup > summary::-webkit-details-marker{ display:none; }

.odds-subgroup .table{
  width: min(980px, 100%);
  margin: 0 auto;
  overflow-x: auto;
  /* display: block; */
  text-align: center;
  background: #ffffff;
}

.table-dark.table-sm th{ background-color:#000; }
.table-dark.table-sm td{ padding:0.3rem 1rem; border-bottom:1px solid red; }

.imgCasaApuestas{
  width:50px !important;
  height:35px !important;
  border-radius:.25rem;
  margin-left:40%;
}

@media (max-width: 720px){
  .imgCasaApuestas{
    width:50px !important;
    height:35px !important;
    border-radius:.25rem;
    margin-left:15%;
  }
}

.loader{ padding:.8rem 0; opacity:.85; }
.loader.small{ font-size:.9rem; }
.text-muted, .muted{ color:#aeb6c1; }

/* =========================================================
   SUMMARY FLASHSCORE-LIKE (HTML: .match-row.fx)
   ========================================================= */

.match-row.fx{
  display:grid;
  grid-template-columns: 28px 1fr 90px;   /* ⭐ | equipos | cuotas */
  grid-template-rows: auto auto;         /* fila top + fila bottom */
  column-gap:.75rem;
  row-gap:.45rem;
  align-items:center;

  padding:.7rem .9rem;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  border-radius:.65rem;
  margin:.45rem 0;
}

/* ================= FILA SUPERIOR ================= */
/* FT / hora */
.match-row.fx .fx-dt{
  grid-column: 1 / 3;
  grid-row: 1;
  color:#ffffff;
  font-weight:600;
  font-size:.95rem;
  white-space:nowrap;
}

/* Logo Bet365 */
.match-row.fx .fx-right{
  grid-column: 3;
  grid-row: 1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.match-row.fx .fx-bm{
  width:58px;
  height:18px;
  object-fit:contain;
  opacity:.95;
}

/* ================= FILA INFERIOR ================= */
/* Estrella */
.match-row.fx .fx-fav{
  grid-column: 1;
  grid-row: 2;
  text-align:center;
  font-size:1.2rem;
  opacity:.75;
  line-height:1;
}

/* Equipos */
.match-row.fx .fx-teams{
  grid-column: 2;
  grid-row: 2;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
}

.match-row.fx .fx-teamline{
  display:flex;
  align-items:center;
  gap:.5rem;
  line-height:1.15;
  min-width:0;
}

.match-row.fx .fx-teamline .team-name{
  color:#ffffff;                /* 🔥 AQUÍ estaba el fallo */
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Escudos */
.match-row.fx .shield{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
}

/* Cuotas */
.match-row.fx .fx-odds{
  grid-column: 3;
  grid-row: 2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.22rem;
  width:100%;
}

.match-row.fx .fx-odds .odd{
  font-weight:800;
  font-size:.95rem;
  line-height:1.05;
  color:#ff6b6b;
  text-align:right;
}

.match-row.fx .fx-odds.no-odds .odd{
  opacity:.45;
}

/* ================= ESTADO OPEN ================= */
.odds-fixture[open] > summary .match-row.fx{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  border-bottom-color:transparent;
  border-radius:.65rem .65rem 0 0;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px){
  .match-row.fx{
    grid-template-columns: 26px 1fr 80px;
    padding:.6rem .75rem;
  }
  .match-row.fx .shield{
    width:20px;
    height:20px;
  }
  .match-row.fx .fx-odds .odd{
    font-size:.92rem;
  }
  .match-row.fx .fx-bm{
    width:52px;
    height:16px;
  }
}

@media (max-width: 720px){
  /* NO tocar a 1 columna */
  .match-row.fx{
    grid-template-columns: 26px 1fr 75px;
  }
}




/* =========================================================
   CLUB VIEW (responsive) — CLEAN (sin duplicados ni pisar globals)
   ========================================================= */

.club-view .sb-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.75rem;
  gap:10px;
  flex-wrap:wrap;
}
.club-view .muted{ opacity:.8; }

/* ---------- strip equipos ---------- */
.club-view .teams-strip{
  background:#1e2430;
  border-radius:.6rem;
  padding:.5rem .75rem;
  overflow:hidden;
  margin-bottom:1rem;
}
.club-view .teams-strip.is-loading{ opacity:.7; }
.club-view .teams-strip .strip-scroll{
  display:flex;
  gap:.5rem;
  overflow:auto;
  padding:.25rem;
}

.club-view .team-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border:none;
  color:#f7b9b9;
  padding:.4rem .6rem;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .12s, background .15s, color .15s;
}
.club-view .team-pill .pill-logo{
  width:20px;
  height:20px;
  object-fit:contain;
  flex:0 0 auto;
}
.club-view .team-pill .pill-code{
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
}
.club-view .team-pill.active{
  background:#ff4757;
  color:#fff;
}
.club-view .team-pill:hover{ transform:translateY(-1px); }

/* ---------- details wrapper ---------- */
.club-view .menuDetalleClub{
  margin:.6rem 0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:.6rem;
  overflow:hidden;
}
.club-view .menuDetalleClub > summary{
  cursor:pointer;
  padding:.65rem .8rem;
  background:rgba(255,255,255,.04);
  font-weight:700;
  list-style:none;
  user-select:none;
}
.club-view .menuDetalleClub > summary::-webkit-details-marker{ display:none; }

.club-view .menuDetalleClub.inner > summary{ font-weight:600; }

.club-view .card{
  background:rgba(255,255,255,.03);
  border-radius:.5rem;
}

/* =========================================================
   DATOS DEL CLUB (3 columnas)
   ========================================================= */

.club-view .club-datos{
  grid-template-columns:260px minmax(0,1fr) 320px;
  gap:16px;
  align-items:center;
  min-width:0;
}

/* Col 1: escudo */
.club-view .datos-escudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    min-width: 0;
    margin-left: 45%;
}
.club-view .escudoDatosEquipo{
  width:140px;
  height:140px;
  object-fit:contain;
  display:block;
  max-width:100%;
}
.club-view .datos-escudo .textEscudo{
  margin:0;
  line-height:1.15;
  font-weight:800;
  font-size:18px;
  color:#ff9aa0;
}

/* Col 2: lista */
.club-view .datos-lista {
    display: flex;
    flex-direction: row;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
    align-content: center;
    align-items: baseline;
    justify-content: center;
    margin-top: 5%;
    margin-bottom: 5%;
}

/* Col 3: estadio */
.club-view .datos-estadio{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.club-view .campoDatosEquipo{
  width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:.4rem;
  display:block;
}
.club-view .datos-estadio p{
  margin:0;
  text-align:right;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#f5f7ff;
}
.club-view .datos-estadio b{
  color:#ff9aa0;
}

/* =========================================================
   PARTIDOS DEL CLUB
   ========================================================= */

.club-view .match-card{
  padding:.5rem .75rem;
  margin:.4rem 0;
}

/* Top row (equipos + marcador) */
.club-view .match-row-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin-bottom:.4rem;
}

/* columnas equipos */
.club-view .team.left{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.4rem;
  min-width:0;
}
.club-view .team.right{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.4rem;
  min-width:0;
}

/* ojo: NO usar .team-name global */
.club-view .match-card .team-name{
  font-weight:700;
  font-size:14px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.club-view .escudoEquipoPartidosClub{
  width:26px;
  height:26px;
  object-fit:contain;
  flex:0 0 auto;
}

/* marcador */
.club-view .marcador{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:900;
  color:#fff;
  min-width:88px;
}
.club-view .marcador.live{ color:#ff5c5c; }

.club-view .badge{
  background:#ff5c5c;
  color:#fff;
  border-radius:.35rem;
  padding:.1rem .35rem;
  margin-left:.25rem;
  font-weight:800;
  font-size:12px;
}

/* meta date */
.club-view .match-row-date{
  margin-left:0;
  opacity:.85;
  text-align: center;
}

/* botones */
.club-view .match-row-actions{
  margin-left:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
  justify-content: center;
}

.club-view .btn-partido{
  background:#ffffff;
  border:1px solid rgba(255,255,255,.15);
  padding:.25rem .45rem;
  border-radius:.4rem;
  cursor:pointer;
  font-size:.75rem;
  white-space:nowrap;
}
.club-view .btn-partido:hover{ background:#ff5c5c; color:#111; }

/* contenedor de details internos */
.club-view .color-details{
  background:transparent !important;
  border-color:white !important;
  color:white;
  font-size:17px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px){
  /* Datos del club en 1 columna */
  .club-view .club-datos{
    grid-template-columns:1fr;
    align-items:start;
  }
  .club-view .datos-estadio{ align-items:flex-start; }
  .club-view .datos-estadio p{ text-align:left; }
  .club-view .datos-lista p,
  .club-view .datos-estadio p{ white-space:normal; }

  /* partidos */
  .club-view .team.left,
  .club-view .team.right{ justify-content:flex-start; }
}

@media (max-width: 720px){
  .club-view .match-row-top{
    gap:10px;
  }
  .club-view .team.left,
  .club-view .team.right{ justify-content:center; }
  .club-view .marcador{ justify-content:center; }
  .club-view .match-card .team-name{ text-align:center; }
  .club-view .match-row-actions{ justify-content:center; }

  /* Col 1: escudo */
.club-view .datos-escudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    min-width: 0;
    margin-left: 33%;
}
}

/* =========================
   PLANTILLA (players grid)
   ========================= */

.players-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
}

@media (max-width: 1100px){
  .players-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 820px){
  .players-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .players-grid{ grid-template-columns: 1fr; }
}

.player-tile{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius:14px;
  padding:14px 12px;
  text-align:center;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.player-tile:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  background: rgba(0, 0, 0, 0.08);
}

.player-tile-photo{
  width:120px;
  height:120px;
  display:flex;              /* ✅ centra SIEMPRE */
  align-items:center;
  justify-content:center;
}

.player-tile-photo img{
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:50%;
  display:block;             /* ✅ evita inline offset */
  margin:0 auto;             /* ✅ centra horizontal */
  border:2px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

.player-tile-info{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.player-tile-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.1;
}

.player-tile-name{
  font-weight:900;
  color:#fff;                /* ✅ nombre blanco */
  font-size:15px;
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-tile-number{
  font-weight:900;
  color: rgba(255,255,255,.75);
  font-size:13px;
  margin-top:2px;
}

.player-tile-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.player-tile-pos{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background: rgba(255,119,119,.18);
  color:#fff;
  border:1px solid rgba(255,119,119,.25);
}

/* Botón +info */
.player-tile-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:#fff;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
}
.player-tile-more:hover{ filter:brightness(1.08); }

/* si no hay stats, desactivamos */
.player-tile.no-stats{
  opacity:.65;
}
.player-tile.no-stats .player-tile-more{
  display:none;              /* ✅ no mostrar +info si no hay datos */
}

/* MODAL */

/* Línea competición modal */
.pc-competition-line{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  list-style:none;
}

.pc-competition-line img{
  height:20px;
  width:auto;
  object-fit:contain;
}

/* Nombre competición */
.pc-comp-name{
  color:#fff;
  font-weight:800;
  font-size:14px;
}

/* Tipo (League / Cup) */
.pc-comp-type{
  font-size:11px;
  opacity:.6;
  text-transform:uppercase;
}

.pc-competition-line img{
  filter: brightness(0) invert(1);
  opacity:.85;
  color: white;
}


/* =========================================================
   ESTADÍSTICAS POR COMPETICIÓN (PARTIDOS) – LOOK PRO
   - summary en una sola línea (logo + nombre + mini)
   - grid KPI tipo tarjetas
   - responsive (móvil: 2 columnas, luego 1)
   ========================================================= */


.menuDetalleClub.blanco.inner{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin: 10px 0;
}

/* Summary: una línea, bonito, clicable */
.menuDetalleClub.blanco.inner > summary{
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-weight: 900;
    color: #fff;
    user-select: none;
}

.menuDetalleClub.blanco.inner > summary::-webkit-details-marker{ display:none; }

/* Logo blanco (si es PNG color, se verá blanco) */
.menuDetalleClub.blanco.inner > summary img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 22px;
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* Nombre comp */
.menuDetalleClub.blanco.inner > summary span:nth-child(2){
  min-width: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Mini: empujar a la derecha */
.menuDetalleClub.blanco.inner > summary span:last-child{
  color: white ;
}

/* Hover */
.menuDetalleClub.blanco.inner > summary:hover{
  background: rgba(255,255,255,.04);
}

/* Abierto: un poco más marcado */
.menuDetalleClub.blanco.inner[open] > summary{
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Contenido */
.menuDetalleClub.blanco.inner .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  margin: 0 !important;
}

/* Título */
.titleStatsClub{
  margin: 0 0 12px;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  letter-spacing: .3px;
}

/* Grid 4 columnas desktop */
.statsRow4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

/* Cada bloque (Jugados / Total / Local / Visitante) */
.colStats{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
}

/* Subtítulo bloque */
.subtitleStatsClub{
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}

/* KPIs */
.kpi{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 8px;
}

.kpi:last-child{ margin-bottom: 0; }

.kpi .lbl{
  color: rgba(255,255,255,.75);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.kpi .val{
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

/* Responsive */
@media (max-width: 992px){
  .statsRow4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px){
  .statsRow4{ grid-template-columns: 1fr; }
  .menuDetalleClub.blanco.inner > summary span:last-child{
    display:none; /* en móvil oculto el mini para que quede limpio */
  }
}

/* ===================================================
   GOLES POR COMPETICIÓN - FUTGOL360 STYLE
   =================================================== */

.golesGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}

.golesBox,
.golesBoxWide{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:16px;
}

.golesBoxWide{
  grid-column: 1 / -1;
}

/* ---------- HEADER ---------- */

.goles-header{
  font-weight:900;
  letter-spacing:.5px;
  font-size:14px;
  margin-bottom:12px;
  color:#ffffff;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:8px;
}

/* ---------- TABLAS ---------- */

.goles-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  border-radius:12px;
  overflow:hidden;
}

.goles-table thead{
  background: rgba(255,255,255,.06);
}

.goles-table th{
  padding:10px;
  font-weight:700;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.5px;
  opacity:.8;
  text-align:center;
}

.goles-table td{
  padding:12px 10px;
  text-align:center;
  font-weight:800;
  font-variant-numeric: tabular-nums;
  border-top:1px solid rgba(255,255,255,.05);
}

/* Alternancia suave */
.goles-table tbody tr:nth-child(even){
  background: rgba(255,255,255,.02);
}

/* ---------- TABLA MINUTOS ---------- */

.goles-table-min thead th:first-child,
.goles-table-min tbody td:first-child{
  text-align:left;
  padding-left:14px;
  width:35%;
  font-size: 14px;
}

.goles-table-min thead th:nth-child(2),
.goles-table-min thead th:nth-child(3),
.goles-table-min tbody td:nth-child(2),
.goles-table-min tbody td:nth-child(3){
  text-align:center;
}

/* ---------- CHIP PORCENTAJE ---------- */

.goles-table-min tbody td:last-child span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-size:13px;
}

/* ---------- RESUMEN 3 COLUMNAS ---------- */

.goles-table thead th{
  text-align:center;
}

.goles-table tbody td{
  font-size:18px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:900px){
  .golesGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width:600px){
  .goles-table th{
    font-size:11px;
  }
  .goles-table td{
    font-size:14px;
  }
}

/* ===================================================
   COMPETITION LINE (reutilizable en todas las modales)
   Evita que el summary empuje elementos a la derecha
   =================================================== */

.menuDetalleClub > summary.pc-competition-line{
  display:flex !important;
  align-items:center;
  justify-content:flex-start !important;
  gap:10px;
  width:100%;
}

.menuDetalleClub > summary.pc-competition-line img{
  height:18px;
  width:18px;
  object-fit:contain;
  flex:0 0 auto;

  /* ✅ logos en blanco (si quieres que TODOS los logos salgan en blanco) */
  filter: brightness(0) invert(1);
  opacity:.95;
}

.menuDetalleClub > summary.pc-competition-line .pc-comp-name{
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===================================================
   FICHAJES - FUTGOL360 STYLE
   =================================================== */

.transfers-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

@media (max-width: 1100px){
  .transfers-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .transfers-grid{ grid-template-columns: 1fr; }
}

/* Card */
.transfer-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}

.transfer-card.t-in{
  border-color: rgba(34,197,94,.25);
}
.transfer-card.t-out{
  border-color: rgba(239,68,68,.25);
}

/* Top */
.transfer-top{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.transfer-avatar{
  width:56px;
  height:56px;
  border-radius:999px;
  object-fit:cover;
  flex:0 0 auto;
  border:2px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
}

.transfer-player{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.transfer-player-name{
  font-weight:900;
  color:#fff;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.transfer-player-sub{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Pills */
.transfer-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color:#fff;
}
.pill-in{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
}
.pill-out{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
}

.transfer-date{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
  color: rgba(255,255,255,.80);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:4px 10px;
  border-radius:999px;
}

/* icons mini */
.transfer-mini-ico{
  width:14px;
  height:14px;
  object-fit:contain;
  filter: brightness(0) invert(1);
  opacity:.9;
}

/* Mid (from/to) */
.transfer-mid{
  display:grid;
  gap:10px;
  padding:10px;
  border-radius:14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.06);
}

.transfer-route{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

.transfer-team-line{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.transfer-team-logo{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
}

.transfer-team-name{
  font-weight:900;
  color:#fff;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Arrows */
.transfer-arrow{
  font-weight:900;
  font-size:14px;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#fff;
  flex:0 0 auto;
}

.arrow-in{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.14);
  color:#bff7ce;
}

.arrow-out{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.14);
  color:#ffd0d0;
}

/* Bottom */
.transfer-bottom{
  display:flex;
  justify-content:center;
}

.transfer-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:13px;
  color:#fff;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:8px 12px;
}

/* responsive micro */
@media (max-width: 380px){
  .transfer-avatar{ width:50px; height:50px; }
  .transfer-player-name{ font-size:14px; }
}






/* =========================================================
   RESUMEN MÓVIL – 1 FILA (texto + minuto)
   Visitante AZUL derecha | Local ROJO izquierda
   REQUIERE: .sum-row.event-home / .sum-row.event-away
   ========================================================= */
@media (max-width: 640px){

  .match-details .sum-team span{
    font-weight: 800;
    font-size: 10px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* una fila real */
  .match-details .sum-row{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 10px !important;
    min-width:0 !important;
  }

  /* el texto nunca se rompe letra a letra */
  .match-details .sum-side{
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .match-details .ev{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    min-width:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }

  .match-details .sum-minute{
    flex:0 0 auto !important;
    font-size: 10px;
    text-align:center !important;
    padding:6px 0 !important;
    border-radius:12px !important;
    font-weight:900 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* ===== VISITANTE: texto a la izquierda, minuto a la derecha AZUL ===== */
  .match-details .sum-row.event-away{
    justify-content:space-between !important;
  }
  .match-details .sum-row.event-away .sum-side--home{ display:none !important; }
  .match-details .sum-row.event-away .sum-side--away{
    display:block !important;
    text-align:left !important;
  }
  .match-details .sum-row.event-away .sum-minute{
    margin-left:auto !important;
    background: rgba(24,182,255,.22) !important;
    border:1px solid rgba(24,182,255,.50) !important;
    color:#0b2a3a !important;
    width: 40px;
  }

  /* ===== LOCAL: minuto a la izquierda ROJO, texto a la derecha ===== */
  .match-details .sum-row.event-home{
    justify-content:flex-start !important;
  }
  .match-details .sum-row.event-home .sum-side--away{ display:none !important; }
  .match-details .sum-row.event-home .sum-side--home{
    display:block !important;
    text-align:left !important;
  }
  .match-details .sum-row.event-home .sum-minute{
    order:-1 !important;              /* minuto primero */
    margin-right:10px !important;
    background: rgba(255,90,90,.22) !important;
    border:1px solid rgba(255,90,90,.50) !important;
    color:#3a0b0b !important;
    width: 40px;
  }

  /* Texto evento en 2 líneas */
  .summary-card .ev-text{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .summary-card .ev-main{
    font-weight:600;
  }

  .summary-card .ev-detail{
    font-size:12px;
    opacity:.7;
  } 

}




/* =========================================================
   FIX ESTADÍSTICAS MÓVIL (sin cortes, todo dentro)
   Pegar AL FINAL del CSS
   ========================================================= */
@media (max-width: 640px){

  /* el contenedor debe permitir scroll si hiciera falta */
  .table-wrap.stats-wrap,
  .block[data-block="center-matches"] .stats-wrap{
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 8px;
  }

  .block[data-block="center-matches"] .stat-bar .bar-right{
    position:absolute;
    top:40%;
    transform:translateY(-50%);
    height:30px;
    opacity:.95;
  }

  /* ✅ quitar el min-width que rompe el móvil */
  table.mini.stats-bars,
  .block[data-block="center-matches"] table.stats-bars{
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed; /* clave: reparte ancho y evita desbordes */
  }

  /* encabezados y celdas más compactos */
  table.mini.stats-bars thead th,
  .block[data-block="center-matches"] table.stats-bars thead th{
    padding: 8px 6px !important;
    font-size: 11px !important;
  }

  table.mini.stats-bars tbody td,
  .block[data-block="center-matches"] table.stats-bars tbody td{
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  /* números más estrechos para que quepa todo */
  table.mini.stats-bars th.th-num,
  table.mini.stats-bars td.num,
  .block[data-block="center-matches"] table.stats-bars thead .th-num,
  .block[data-block="center-matches"] td.num{
    width: 64px !important;
    white-space: nowrap;
    text-align: center;
  }

  /* barra más bajita en móvil */
  .stat-bar{
    height: 20px !important;
  }

  /* nombre métrica siempre visible y centrado */
  .stat-bar .metric-name{
    font-size: 11px !important;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}





/* =========================================================
   FIX ALINEACIONES MÓVIL (no se salen por los lados)
   Pegar AL FINAL del CSS
   ========================================================= */
@media (max-width: 640px){

  /* que nada pueda empujar el ancho */
  .lineup-wrap,
  .lineup-col,
  .pitch,
  .grass{
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  /* campo más compacto en móvil */
  .pitch{ height: auto !important; }
  .grass{
    padding: 10px 8px !important;
    min-height: 300px !important;
  }

  /* ✅ el grid de cada línea: columnas que se encogen bien */
  .lane{
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)) !important;
    gap: 8px !important; /* antes 14px */
  }

  /* jugadores más pequeños para que quepan */
  .plr img{
    width: 34px !important;
    height: 34px !important;
    border-width: 2px !important;
  }

  .plr-num{
    font-size: 10px !important;
    padding: 1px 5px !important;
  }

  .plr-name{
    font-size: 9px !important;
    max-width: 78px;               /* evita que empuje el layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bench-item span{
    font-size:8px;
    font-weight:600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
  }
}