/* =========================================================
   Team Stats – CSS completo (prefijo .ts-)
   Paleta oscura, bordes suaves, sombras sutiles.
   ========================================================= */

/* ============== Base / Wrapper ============== */
.ts-widget{
    max-width:960px;
    margin:40px auto;
    padding:10px;
    background:#1f1f1f;
    border-radius:12px;
    color:#eee;
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
    line-height:1.45;
  }
  .ts-widget a{ color:#e4e4e4; text-decoration:none; }
  .ts-widget a:hover{ text-decoration:underline; }
  
  /* Utilidades */
  .ts-hidden{ display:none !important; }
  .ts-visually-hidden{
    position:absolute !important; height:1px; width:1px; overflow:hidden;
    clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
  }
  
  /* ============== Header sticky ============== */
  .ts-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#1f1f1f;
    border-radius:0 0 10px 10px;
    border-bottom:2px solid #333;
    box-shadow:0 2px 4px rgba(0,0,0,.4);
    padding:20px 16px;
    text-align:center;
  }
  .ts-header-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:6px;
  }
  .ts-header-row .ts-team-logo{
    max-height:36px;
    object-fit:contain;
  }
  .ts-header-row .ts-team-name{
    font-size:1rem;
    font-weight:600;
    color:#fff;
  }
  .ts-subtitle-row{ font-size:.9rem; color:#bbb; }
  .ts-subtitle{ letter-spacing:.2px; }
  
  /* Responsive header */
  @media (max-width:768px){
    .ts-header-row{
      flex-wrap:nowrap;
      overflow-x:auto;
      justify-content:center;
    }
    .ts-header-row .ts-team-logo{ max-height:32px; }
  }
  
  /* ======= Section title ======= */
  .ts-section-title{
    background:#262626;
    color:#d1d1d1;
    padding:10px 16px;
    border-radius:6px;
    margin:32px 0 16px;
    font-size:1.05rem;
    text-align:center;
    font-weight:400;
    box-shadow:0 1px 2px rgba(0,0,0,0.4);
  }
  
  /* ====== Tarjetas contenedoras reutilizables ====== */
  .ts-card{
    background:#1f1f1f;
    border:1px solid #2b2b2b;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
    padding:8px;
  }
  .ts-card--tight{ padding:6px; }
  
  /* ======= KPIs ======= */
  .ts-kpis{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
  }
  .ts-kpi{
    background:#222;
    border:1px solid #333;
    border-radius:10px;
    padding:12px 10px;
    text-align:center;
  }
  .ts-kpi-accent{ border-color:#444; box-shadow:0 2px 10px rgba(0,0,0,0.25); }
  .ts-kpi .kpi-label{ color:#bbb; font-size:.85rem; margin-bottom:6px; }
  .ts-kpi .kpi-value{ color:#fff; font-size:1.1rem; font-weight:600; }
  
  /* Forma */
  .ts-form{
    display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0 24px;
  }
  .ts-form .ts-form-label{ color:#bbb; }
  .ts-form .ts-form-value{ color:#fff; font-weight:600; }
  
  /* Responsive grid for KPIs */
  @media (max-width:768px){
    .ts-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  
  /* ======= Tabla básica (fallback) ======= */
  .ts-table{
    width:100%;
    border-collapse:collapse;
  }
  .ts-table td, .ts-table th{
    padding:10px 8px;
    border-bottom:1px solid #333;
    color:#e9e9e9;
    background:#222;
  }
  
  /* ======= Recent Matches (consistente y “bonito”) ======= */
  .ts-last5-table{
    width:100%;
    border-collapse:separate;      /* filas separadas */
    border-spacing:0 8px;          /* espacio vertical entre filas */
    font-size:.95rem;
    text-align:center;
  }
  .ts-last5-row{
    background:#222;
    border:1px solid #333;
    border-radius:10px;
    overflow:hidden;               /* respeta el radius */
    transition:all .18s ease;
  }
  .ts-last5-row:hover{
    border-color:#3d3d3d;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
    transform:translateY(-1px);
  }
  .ts-last5-row > td{
    padding:12px 10px;
    vertical-align:middle;
    color:#eee;
  }
  
  /* columna equipos (dos líneas apiladas) */
  .ts-match-cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    min-width:200px;
  }
  .ts-team-cell{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    justify-content:center;
  }
  .ts-team-cell .ts-team-badge{
    max-height:24px;
    width:auto;
    object-fit:contain;
    display:inline-block;
    vertical-align:middle;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  }
  .ts-team-name{ line-height:1.2; }
  .ts-loser{ opacity:.55; }
  
  /* marcador con chip */
  .ts-score-cell{ white-space:nowrap; }
  .ts-score-chip{
    display:inline-block;
    min-width:60px;
    padding:6px 10px;
    border-radius:8px;
    background:#2a2a2a;
    border:1px solid #3a3a3a;
    color:#fff;
    font-weight:700;
    letter-spacing:.5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }
  
  /* fecha + badge liga */
  .ts-date-cell{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#bbb;
    font-size:.9rem;
  }
  .ts-league-badge{
    max-height:18px;
    width:auto;
    object-fit:contain;
    margin-right:0;
    vertical-align:middle;
    opacity:.9;
  }
  
  /* Responsive recent matches */
  @media (max-width:768px){
    .ts-match-cell{ gap:6px; }
    .ts-team-cell .ts-team-badge{ max-height:20px; }
    .ts-score-chip{ min-width:54px; padding:5px 8px; }
    .ts-league-badge{ max-height:16px; }
  }
  
  /* ======= Por competencia (agrupado por torneo) ======= */
  .ts-competition-section{ margin-top:24px; }
  .ts-competition-header{
    display:flex; align-items:center; gap:10px; justify-content:flex-start;
    margin:16px 0 8px;
  }
  .ts-competition-badge{
    width:22px; height:22px; object-fit:contain; opacity:.95;
  }
  .ts-competition-title{
    font-size:1rem; font-weight:600; color:#fff;
  }
  .ts-competition-card{ /* contenedor de la tabla del torneo */
    background:#1f1f1f; border:1px solid #2b2b2b; border-radius:12px; padding:8px;
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
  }
  .ts-competition-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;
    font-size:.95rem;
    text-align:center;
  }
  .ts-competition-row{
    background:#222; border:1px solid #333; border-radius:10px; overflow:hidden; transition:all .18s ease;
  }
  .ts-competition-row:hover{
    border-color:#3d3d3d; box-shadow:0 4px 16px rgba(0,0,0,0.25); transform:translateY(-1px);
  }
  .ts-competition-row > td{
    padding:12px 10px; vertical-align:middle; color:#eee;
  }
  
  /* ====== Tabs (Season / Last 5) ====== */
  .ts-tab-list{
    display:flex; justify-content:center; gap:12px;
    list-style:none; padding:0; margin:20px 0 10px;
  }
  .ts-tab-list li{
    background:#333; color:#fff; padding:8px 14px; border-radius:6px; cursor:pointer;
    user-select:none; transition:background .2s ease, transform .2s ease;
  }
  .ts-tab-list li:hover{ background:#444; transform:translateY(-1px); }
  .ts-tab-list li.active{ background:#555; }
  
  /* ====== Subtabs (Total / For / Against) ====== */
  .ts-subtab-list{
    display:flex; justify-content:center; gap:12px;
    list-style:none; padding:0; margin:10px 0 16px;
  }
  .ts-subtab-list li{
    background:#2b2b2b; color:#fff; padding:6px 12px; border-radius:6px; cursor:pointer;
    user-select:none; transition:background .2s ease, transform .2s ease;
  }
  .ts-subtab-list li:hover{ background:#3a3a3a; transform:translateY(-1px); }
  .ts-subtab-list li.active{ background:#4a4a4a; }
  
  /* Contenidos tabs */
  .ts-tab-content{ display:none; }
  .ts-tab-content.active{ display:block; }
  .ts-tab-content-inner{ display:none; }
  .ts-tab-content-inner.active{ display:block; }
  
  /* ====== Goals by Time (ts-gbt-) ====== */
  .ts-gbt-table{ width:100%; max-width:720px; margin:0 auto; font-size:14px; }
  .ts-gbt-header{
    display:flex; justify-content:space-between; align-items:center;
    text-align:center; margin-bottom:12px; font-weight:bold;
  }
  .ts-gbt-team{ flex:1; }
  .ts-gbt-team img{ width:36px; height:36px; object-fit:contain; margin-bottom:4px; }
  .ts-gbt-teamname{ font-weight:600; color:#fff; }
  .ts-gbt-title{ flex:1; text-align:center; font-weight:600; color:#d1d1d1; }
  
  .ts-gbt-body .ts-gbt-row{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:6px; border-bottom:1px solid #444; padding:6px 0;
    background:#222; border-radius:6px;
  }
  .ts-gbt-value{ width:30%; text-align:center; font-weight:600; color:#eee; }
  .ts-gbt-label{ width:40%; text-align:center; font-weight:500; color:#bbb; }
  
  @media (max-width:768px){
    .ts-gbt-team img{ width:32px; height:32px; }
  }
  
  /* ====== Corners by Time (ts-cbt-) ====== */
  .ts-cbt-table{ width:100%; max-width:720px; margin:0 auto; font-size:14px; }
  .ts-cbt-header{
    display:flex; justify-content:space-between; align-items:center;
    text-align:center; margin-bottom:12px; font-weight:bold;
  }
  .ts-cbt-team{ flex:1; }
  .ts-cbt-team img{ width:36px; height:36px; object-fit:contain; margin-bottom:4px; }
  .ts-cbt-teamname{ font-weight:600; color:#fff; }
  .ts-cbt-title{ flex:1; text-align:center; font-weight:600; color:#d1d1d1; }
  
  .ts-cbt-body .ts-cbt-row{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:6px; border-bottom:1px solid #444; padding:6px 0;
    background:#222; border-radius:6px;
  }
  .ts-cbt-value{ width:30%; text-align:center; font-weight:600; color:#eee; }
  .ts-cbt-label{ width:40%; text-align:center; font-weight:500; color:#bbb; }
  
  @media (max-width:768px){
    .ts-cbt-team img{ width:32px; height:32px; }
  }
  
  /* ====== Botones / chips pequeños reutilizables ====== */
  .ts-chip{
    display:inline-block; padding:4px 8px; border-radius:999px;
    background:#2a2a2a; border:1px solid #3a3a3a; color:#ddd; font-size:.8rem;
  }
  .ts-badge{
    display:inline-flex; align-items:center; gap:6px;
    background:#2a2a2a; border:1px solid #3a3a3a; color:#ddd;
    padding:4px 8px; border-radius:8px; font-size:.8rem;
  }
  
  /* ====== Focus accesible ====== */
  .ts-widget :where(a,button,[role="button"],li){
    outline:none;
  }
  .ts-widget :where(a,button,[role="button"],li):focus-visible{
    box-shadow:0 0 0 3px rgba(0,123,255,0.35);
    border-radius:6px;
  }
  
  /* ====== Pequeños ajustes responsivos globales ====== */
  @media (max-width:480px){
    .ts-section-title{ font-size:1rem; }
    .ts-kpi .kpi-value{ font-size:1rem; }
  }
  
  /* =================================================================
     FIX: Forzar tamaño de logos en Recent Matches ante CSS de theme
     ================================================================= */
  .ts-widget .ts-last5-table img.ts-team-badge{
    height:24px !important;
    max-height:24px !important;
    width:auto !important;
    max-width:none !important;
    object-fit:contain;
    display:inline-block;
    vertical-align:middle;
  }
  @media (max-width:768px){
    .ts-widget .ts-last5-table img.ts-team-badge{
      height:20px !important;
      max-height:20px !important;
    }
  }
  
  .ts-widget .ts-last5-table img.ts-league-badge{
    height:18px !important;
    max-height:18px !important;
    width:auto !important;
    max-width:none !important;
    object-fit:contain;
    vertical-align:middle;
  }
  @media (max-width:768px){
    .ts-widget .ts-last5-table img.ts-league-badge{
      height:16px !important;
      max-height:16px !important;
    }
  }
  /* ======= Recent Matches (Last 5) ======= */
.ts-last5-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: .95rem;
    text-align: center;
}

.ts-last5-row {
    background: #222;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    transition: all .18s ease;
}
.ts-last5-row:hover {
    border-color: #3d3d3d;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}
.ts-last5-row > td {
    padding: 12px 10px;
    vertical-align: middle;
    color: #eee;
}

/* Celda de equipos (home/away apilados) */
.ts-match-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 200px;
}
.ts-team-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    justify-content: center;
}
.ts-team-badge {
    max-height: 24px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.ts-team-name {
    line-height: 1.2;
}
.ts-loser {
    opacity: .55;
}

/* Marcador */
.ts-score-cell {
    white-space: nowrap;
}
.ts-score-chip {
    display: inline-block;
    min-width: 60px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Fecha + liga */
.ts-date-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #bbb;
    font-size: .9rem;
}
.ts-league-badge {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: .9;
}

/* Responsive ajustes */
@media (max-width: 768px) {
    .ts-match-cell {
        gap: 6px;
    }
    .ts-team-badge {
        max-height: 20px;
    }
    .ts-score-chip {
        min-width: 54px;
        padding: 5px 8px;
    }
    .ts-league-badge {
        width: 16px;
        height: 16px;
    }
}