/* =========================================================
   HISTORIAL DEPORTIVO — TABS / GRIDS / EVENTOS
   Versión ordenada + grid enriquecido de jugadores
   ========================================================= */

/* =========================================================
   TOKENS
   ========================================================= */

:root{
  --hdg-bg-1: #0d1318;
  --hdg-bg-2: #101820;
  --hdg-bg-3: #151f28;

  --hdg-line: rgba(130,155,178,0.18);
  --hdg-line-soft: rgba(130,155,178,0.10);

  --hdg-text: rgba(255,255,255,0.92);
  --hdg-text-soft: rgba(255,255,255,0.74);
  --hdg-text-dim: rgba(255,255,255,0.58);

  --hdg-green: #37f2a6;
  --hdg-green-soft: rgba(55,242,166,0.08);
  --hdg-green-soft-2: rgba(55,242,166,0.04);
  --hdg-green-line: rgba(55,242,166,0.22);
  --hdg-hover: rgba(55,242,166,0.05);

  --hdg-radius-xl: 18px;
  --hdg-radius-lg: 14px;
  --hdg-radius-md: 12px;

  --hdg-shadow: 0 12px 28px rgba(0,0,0,0.22);
  --hdg-scrollbar-w: 10px;
  --hdg-grid-height: clamp(420px, 56vh, 620px);
}

/* =========================================================
   WRAP GENERAL
   ========================================================= */

.hdg-wrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* =========================================================
   BOARD EXTERIOR DE LA TAB
   ========================================================= */

.cards-board-hd{
  display: flex;
  flex-direction: column;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  margin-top: 12px;
  padding: 12px;

  border-radius: var(--hdg-radius-xl);
  border: 1px solid var(--hdg-line);
  background:
    linear-gradient(180deg, rgba(55,242,166,0.035) 0%, rgba(255,255,255,0.008) 100%),
    var(--hdg-bg-1);
  box-shadow: var(--hdg-shadow);
  backdrop-filter: blur(10px);
}

/* =========================================================
   HEADER / FOOTER DEL BOARD
   ========================================================= */

.cards-board-header,
.cards-board-footer{
  flex: 0 0 auto !important;
}

.cards-board-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;

  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hdg-line);
}

.cards-board-title-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
}

.cards-board-title{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: var(--hdg-text);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1px;
}

.cards-board-search{
  margin-left: auto;
  width: auto;
  flex: 1 1 320px;
  max-width: 52vw;
  min-width: 190px;
}

.cards-board-header-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: visible;
}

.cards-board-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--hdg-line);
}

.cards-footer-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.cards-board-pageinfo{
  font-weight: 800;
  font-size: 12px;
  color: var(--hdg-text-dim);
  white-space: nowrap;
}

/* =========================================================
   PILLS / CONTADORES
   ========================================================= */

.cards-board-counter-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);

  color: rgba(255,255,255,0.86);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;

  white-space: nowrap;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;

  overflow: visible;
  text-overflow: clip;

  cursor: pointer;
  user-select: none;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.cards-board-counter-pill:hover{
  transform: translateY(-1px);
}

.cards-board-counter-pill.pill-partidos{
  border-color: rgba(55,242,166,0.26);
  box-shadow:
    0 0 0 1px rgba(55,242,166,0.08) inset,
    0 0 14px rgba(55,242,166,0.10);
}

.cards-board-counter-pill.pill-eventos{
  border-color: rgba(130,155,178,0.18);
}

.cards-board-counter-pill.is-active{
  border-color: rgba(55,242,166,0.42) !important;
  background: linear-gradient(180deg, rgba(55,242,166,0.16) 0%, rgba(55,242,166,0.06) 100%);
  box-shadow:
    0 0 0 1px rgba(55,242,166,0.16) inset,
    0 0 18px rgba(55,242,166,0.16);
}

.cards-board-counter{
  white-space: nowrap;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;

  overflow: visible;
  text-overflow: clip;

  color: rgba(255,255,255,0.86);
  font-weight: 900;
  font-size: 12px;
}

/* =========================================================
   CONTENEDOR CENTRAL DEL GRID
   ========================================================= */

.cards-board-scroll{
  flex: 0 0 auto !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;

  margin-top: 2px;
  margin-bottom: 2px;
}

#hdg-partidos-scroll.cards-board-scroll,
#hdg-jugadores-scroll.cards-board-scroll,
#hdg-equipos-scroll.cards-board-scroll{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}

/* =========================================================
   GRID BASE HISTORIAL (hdg-*)
   ========================================================= */

.hdg-table{
  width: 100%;
  height: var(--hdg-grid-height);
  min-height: 0;

  border-radius: var(--hdg-radius-lg);
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(55,242,166,0.025) 0%, rgba(255,255,255,0.008) 100%),
    var(--hdg-bg-2);
  border: 1px solid var(--hdg-line);
  box-shadow: none;

  display: flex;
  flex-direction: column;
}

.hdg-head{
  display: grid;
  align-items: center;
  padding: 10px 12px;
  column-gap: 10px;

  background:
    linear-gradient(180deg, rgba(55,242,166,0.04) 0%, rgba(255,255,255,0.00) 100%),
    #15202a;
  border-bottom: 1px solid var(--hdg-line);
  flex: 0 0 auto;

  grid-template-columns: var(--hdg-cols);
}

.hdg-hcell{
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.35px;
  color: var(--hdg-text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdg-hcell--center{
  text-align: center;
}

.hdg-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

.hdg-body::-webkit-scrollbar{
  width: var(--hdg-scrollbar-w);
  height: var(--hdg-scrollbar-w);
}

.hdg-body::-webkit-scrollbar-track{
  background: transparent;
}

.hdg-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
}

.hdg-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.24);
}

.hdg-row{
  display: grid;
  align-items: center;
  padding: 9px 12px;
  column-gap: 10px;

  border-bottom: 1px solid var(--hdg-line-soft);
  transition: background 120ms ease, box-shadow 120ms ease;

  grid-template-columns: var(--hdg-cols);
}

.hdg-row:nth-child(odd){
  background: rgba(255,255,255,0.012);
}

.hdg-row:hover{
  background: var(--hdg-hover);
}

.hdg-cell{
  min-width: 0;
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdg-cell--center{
  text-align: center;
  justify-self: center;
}

.hdg-cell--ico{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  white-space: normal !important;
}

.hdg-cell--pair{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.hdg-pair-text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdg-icoimg{
  height: 22px;
  width: 22px;
  object-fit: contain;
  display: block;
}

.hdg-icoimg--round{
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.hdg-cell--strong{
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.hdg-body--empty{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.hdg-empty{
  color: var(--hdg-text-dim);
  font-weight: 800;
  font-size: 12px;
}

/* =========================================================
   COLUMNAS POR GRID
   ========================================================= */

.hdg-grid-scope--partidos{
  --hdg-cols:
    clamp(92px, 11vw, 116px)
    72px
    44px
    minmax(130px, 1fr)
    44px
    minmax(130px, 1fr)
    minmax(210px, 1.55fr)
    56px
    minmax(170px, 1.15fr)
    minmax(170px, 1.05fr);
}

.hdg-grid-scope--jugadores{
  --hdg-cols:
    clamp(96px, 12vw, 120px)
    70px
    minmax(0, 1fr)
    44px
    minmax(0, 1fr)
    64px
    84px
    84px
    96px
    96px;
}

.hdg-grid-scope--jugadores-rich{
  --hdg-cols:
    clamp(92px, 11vw, 116px)
    70px
    56px
    minmax(180px, 1.18fr)
    48px
    minmax(160px, 1.02fr)
    minmax(96px, 0.70fr)
    82px
    58px
    minmax(155px, 0.95fr)
    60px
    58px
    58px
    58px;
}

.hdg-grid-scope--equipos{
  --hdg-cols:
    48px                          /* Escudo */
    minmax(220px, 1.55fr)         /* Equipo */
    minmax(140px, 1.1fr)          /* Vistos + barra */
    80px                          /* Edad */
    minmax(200px, 1.2fr)          /* Categoría */
    minmax(180px, 1.1fr)          /* Grupo */
    110px                         /* Última fecha */
    80px;                         /* Hora */
}

/* =========================================================
   JUGADORES ENRIQUECIDO
   ========================================================= */

.hdg-cell--avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
}

.hdg-avatar-img,
.hdg-avatar-fallback{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: block;
}

.hdg-avatar-img{
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 4px 10px rgba(0,0,0,.22);
  background: #0b1214;
}

.hdg-avatar-fallback{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
  color: #effff6;
  background: linear-gradient(135deg, #013d2f 0%, #04664b 100%);
  border: 1.5px solid rgba(255,255,255,.22);
  box-shadow: 0 4px 10px rgba(0,0,0,.20);
}

.hdg-mini-chip{
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: rgba(14,20,22,.96);
  border: 2px solid rgba(255,255,255,.22);
  box-shadow:
    0 2px 8px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
  justify-self: center;
}

.hdg-mini-chip--double{
  width: auto;
  min-width: 30px;
  padding: 0 7px;
  gap: 5px;
}

.hdg-mini-chip--flag{
  background: radial-gradient(circle at 30% 30%, rgba(120,255,190,.95), rgba(28,180,95,.96));
  border: 2px solid rgba(195,255,220,.95);
}

.hdg-mini-icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.22));
}

.hdg-flag-icon{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   ESTADO POR FILA JUGADORES
   ========================================================= */

.hdg-row-status-follow{
  background:
    linear-gradient(90deg, rgba(6,190,132,.12), rgba(6,190,132,.04)) !important;
  box-shadow: inset 3px 0 0 rgba(41,217,163,.72);
}

.hdg-row-status-follow:nth-child(odd){
  background:
    linear-gradient(90deg, rgba(6,190,132,.15), rgba(6,190,132,.05)) !important;
}

.hdg-row-status-maybe{
  background:
    linear-gradient(90deg, rgba(255,165,0,.12), rgba(255,165,0,.04)) !important;
  box-shadow: inset 3px 0 0 rgba(255,193,87,.78);
}

.hdg-row-status-maybe:nth-child(odd){
  background:
    linear-gradient(90deg, rgba(255,165,0,.15), rgba(255,165,0,.05)) !important;
}

.hdg-row-status-no{
  background:
    linear-gradient(90deg, rgba(255,92,92,.12), rgba(255,92,92,.04)) !important;
  box-shadow: inset 3px 0 0 rgba(255,92,92,.78);
}

.hdg-row-status-no:nth-child(odd){
  background:
    linear-gradient(90deg, rgba(255,92,92,.15), rgba(255,92,92,.05)) !important;
}

.hdg-row-status-follow:hover{
  background:
    linear-gradient(90deg, rgba(6,190,132,.18), rgba(6,190,132,.07)) !important;
}

.hdg-row-status-maybe:hover{
  background:
    linear-gradient(90deg, rgba(255,165,0,.18), rgba(255,165,0,.07)) !important;
}

.hdg-row-status-no:hover{
  background:
    linear-gradient(90deg, rgba(255,92,92,.18), rgba(255,92,92,.07)) !important;
}

/* =========================================================
   EQUIPOS — VISTOS CON BARRA
   ========================================================= */

.hdg-vistos-cell{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hdg-vistos-num{
  flex: 0 0 auto;
  min-width: 22px;
  text-align: right;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
}

.hdg-vistos-track{
  position: relative;
  flex: 1 1 auto;
  min-width: 70px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.28);
}

.hdg-vistos-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(55,242,166,0.95) 0%, rgba(55,242,166,0.45) 100%);
  box-shadow:
    0 0 10px rgba(55,242,166,0.18),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

/* =========================================================
   GRID DE EVENTOS (cdet-*)
   ========================================================= */

.cdet-table{
  width: 100%;
  height: var(--hdg-grid-height);
  min-height: 0;

  border-radius: var(--hdg-radius-lg);
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(55,242,166,0.025) 0%, rgba(255,255,255,0.008) 100%),
    var(--hdg-bg-2);
  border: 1px solid var(--hdg-line);
  box-shadow: none;

  display: flex;
  flex-direction: column;
}

.cdet-head,
.cdet-row{
  display: grid;
  grid-template-columns:
    clamp(92px, 11vw, 116px)
    72px
    44px
    minmax(190px, 1.2fr)
    minmax(280px, 1.85fr)
    44px
    minmax(170px, 1.05fr);
  column-gap: 10px;
  align-items: center;
}

.cdet-head{
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(55,242,166,0.04) 0%, rgba(255,255,255,0.00) 100%),
    #15202a;
  border-bottom: 1px solid var(--hdg-line);
  flex: 0 0 auto;
}

.cdet-hcell{
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.35px;
  color: var(--hdg-text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cdet-hcell--center{
  text-align: center;
}

.cdet-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

.cdet-body::-webkit-scrollbar{
  width: var(--hdg-scrollbar-w);
  height: var(--hdg-scrollbar-w);
}

.cdet-body::-webkit-scrollbar-track{
  background: transparent;
}

.cdet-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
}

.cdet-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.24);
}

.cdet-row{
  padding: 9px 12px;
  border-bottom: 1px solid var(--hdg-line-soft);
  transition: background 120ms ease;
}

.cdet-row:nth-child(odd){
  background: rgba(255,255,255,0.012);
}

.cdet-row:hover{
  background: var(--hdg-hover);
}

.cdet-cell{
  min-width: 0;
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cdet-cell--center{
  text-align: center;
  justify-self: center;
}

.cdet-cell--ico{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  white-space: normal !important;
}

.cdet-body--empty{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.cdet-empty{
  color: var(--hdg-text-dim);
  font-weight: 800;
  font-size: 12px;
}

.cdet-cell--ico img,
.cdet-cell--ico svg{
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

/* =========================================================
   WRAPPERS GRID
   ========================================================= */

#hdg-partidos-grid,
#hdg-jugadores-grid,
#hdg-equipos-grid{
  overflow: visible !important;
}

/* =========================================================
   AUXILIARES
   ========================================================= */

.his-panel-subtitle{
  margin-top: -6px;
  margin-bottom: 10px;
  opacity: .65;
  font-size: .9rem;
}

.his-panel .his-panel-body{
  padding-top: 6px;
}

.his-titlebar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.his-title-right{
  opacity: .85;
  font-weight: 700;
  white-space: nowrap;
}

.his-title-kpi{ opacity: .9; }
.his-title-sep{ opacity: .45; }

/* =========================================================
   SELECT / PAGINATION
   ========================================================= */

.cards-page-size,
.hdg-pagesize{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  font-weight: 800;
  font-size: 12px;
}

.hdg-pagination .page-link,
.cards-pagination .page-link{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.82) !important;
  font-weight: 900;
  border-radius: 10px !important;
}

.hdg-pagination .page-item.active .page-link,
.cards-pagination .page-item.active .page-link{
  border-color: rgba(55,242,166,0.36) !important;
  box-shadow:
    0 0 0 2px rgba(55,242,166,0.10) inset,
    0 10px 24px rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.92) !important;
}

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

@media (max-width: 768px){
  .cards-board-header{
    flex-wrap: wrap;
  }

  .cards-board-title-row{
    flex: 1 1 100%;
    width: 100%;
  }

  .cards-board-search{
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .cards-board-header-right{
    width: 100%;
    justify-content: flex-end;
  }

  .cards-board-footer{
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .hdg-grid-scope--jugadores-rich{
    --hdg-cols:
      clamp(88px, 20vw, 104px)
      66px
      52px
      minmax(150px, 1.05fr)
      44px
      minmax(130px, 0.95fr)
      84px
      70px
      52px
      120px
      52px
      52px
      52px
      52px;
  }

  .hdg-grid-scope--equipos{
    --hdg-cols:
      42px
      minmax(170px, 1.35fr)
      minmax(120px, 1fr)
      70px
      minmax(150px, 1fr)
      minmax(140px, 1fr)
      96px
      72px;
  }

  .hdg-mini-chip{
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .hdg-mini-icon{
    width: 16px;
    height: 16px;
  }

  .hdg-flag-icon{
    width: 18px;
    height: 18px;
  }

  .hdg-vistos-track{
    min-width: 54px;
  }
}