/* =========================================================
   TAB TARJETAS (split 70/30) — sin tocar el mapa/panel
   FIX: scroll real + no “aplastado” en layouts flex
   ========================================================= */

.cards-split{
  display:flex;
  gap:12px;
  align-items:stretch;
  width:100%;
  min-height:0; /* ✅ clave si el tab está dentro de un contenedor flex */
}

/* responsive: en móvil apila */
@media (max-width: 980px){
  .cards-split{ flex-direction:column; }
  .cards-left, .cards-right{ width:100%!important; min-width:0!important; }
}

.cards-left{
  width:70%;
  min-width:0;
  display:flex;
  min-height:0; /* ✅ */
}
.cards-right{
  width:30%;
  min-width:280px;
  display:flex;
  min-height:0; /* ✅ */
}

.cards-board{
  background:#1f2328;
  color:#e9eef1;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  width:100%;

  /* ✅ si quieres igual que mapa, deja fijo; si quieres más aire usa vh */
  height:80vh;

  display:flex;
  flex-direction:column;

  overflow:hidden;
  min-height:0; /* ✅ */
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

.cards-board-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.cards-board-title{
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
}
.cards-board-subtitle{
  font-size:12px;
  opacity:.72;
  margin-top:2px;
}
.cards-board-counter{
  font-weight:900;
  font-size:12px;
  opacity:.9;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

/* ✅ el scroll REAL vive aquí */
.cards-board-scroll{
  flex:1 1 auto;
  min-height:0;      /* ✅ CLAVE para que overflow funcione en flex column */
  overflow:auto;
  padding:14px;      /* un poco más de aire */
}

/* IZQ: grid de tarjetas */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:10px;
  align-content:start; /* evita “estiramientos raros” */
}

/* DCHA: lista vertical */
.cards-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* empty */
.cards-empty{
  opacity:.72;
  font-size:13px;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}

/* =========================================================
   TARJETA (tile) “premium”
   Estados: tabla-only / opcion-a / opcion-b (como tu panel)
   ========================================================= */

.tcard{
  position:relative;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  overflow:hidden;
  padding:10px 12px;
  min-height:104px; /* ✅ evita sensación de “aplastado” */
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.tcard:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.28);
  border-color:rgba(255,255,255,.16);
}

/* “barra” suave superior */
.tcard:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:42px;
  background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  pointer-events:none;
}

/* Top */
.tcard-top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.tcard-chips{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.tcard-tag{
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.6px;
  opacity:.85;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  white-space:nowrap;
}

/* Mid */
.tcard-mid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin:2px 0 8px 0;
}

.tcard-team{
  font-weight:900;
  font-size:13px;
  line-height:1.12;
  color:#e9eef1;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tcard-team.left{ text-align:right; }
.tcard-team.right{ text-align:left; }

.tcard-vs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.tcard-badges{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transform:translateY(.2px);
}
.tcard-badge-age{
  width:22px; height:22px;
  border-radius:999px;
  object-fit:cover;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.tcard-badge-cat{
  width:18px; height:18px;
  border-radius:999px;
  object-fit:cover;
  opacity:.95;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}

/* Bottom */
.tcard-bottom{
  display:flex;
  align-items:center;
  justify-content:center;   /* ✅ centra */
  gap:12px;
}

.tcard-league{
  font-size:11.5px;
  font-weight:800;
  color:#cfd7de;
  opacity:.95;

  text-align:center;        /* ✅ centra texto */
  max-width:100%;           /* ✅ ocupa todo */
  width:100%;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;       /* si quieres que pueda partir línea, te lo cambio */
}

.tcard-mini{
  display:flex;
  gap:6px;
  align-items:baseline;
  opacity:.75;
  font-size:11px;
  white-space:nowrap;
}
.tcard-mini-k{ font-weight:800; }
.tcard-mini-v{ font-weight:900; }

/* ====== Estados visuales (calcados a tu panel, pero para .tcard) ====== */
.tcard--tabla-only{
  background: linear-gradient(0deg, rgba(0,231,255,0.08), rgba(0,231,255,0.08)), #0b1f29 !important;
  border-color:#00E7FF !important;
  box-shadow:
    0 0 0 1px rgba(0,231,255,.22),
    0 12px 26px rgba(0,0,0,.30),
    0 0 18px rgba(0,231,255,.14) inset !important;
}
.tcard--opcion-a{
  background: linear-gradient(0deg, rgba(57,255,20,0.10), rgba(57,255,20,0.10)), #0b2917 !important;
  border-color:#39FF14 !important;
  box-shadow:
    0 0 0 1px rgba(57,255,20,.18),
    0 12px 26px rgba(0,0,0,.30),
    0 0 18px rgba(57,255,20,.10) inset !important;
}
.tcard--opcion-b{
  background: linear-gradient(0deg, rgba(255,213,74,0.10), rgba(255,213,74,0.10)), #2c2405 !important;
  border-color:#FFD54A !important;
  box-shadow:
    0 0 0 1px rgba(255,213,74,.20),
    0 12px 26px rgba(0,0,0,.30),
    0 0 18px rgba(255,213,74,.12) inset !important;
}

/* =========================================================
   (Opcional) Scrollbar más “premium”
   ========================================================= */
.cards-board-scroll::-webkit-scrollbar{ width:10px; }
.cards-board-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.15);
}

/* =========================================================
   efecto clicable para las tarjetas de los partidos
   ========================================================= */

/* ✅ EXTRA CSS para que se note “clicable” (no rompe nada) */
.tcard[role="button"]{
  cursor:pointer;
}

.tcard[role="button"]:active{
  transform: translateY(0px) scale(.995);
}