/* =========================================================
   PRECOCIDAD — CSS FINAL (limpio + robusto)
   - Grid 12 columnas estable (head + row)
   - Scroll interno solo en body
   - comp_i en grid responsive (auto-fit)
   - Mejor truncado/ellipsis y alineaciones
   ========================================================= */

:root{
  --pcd-bg: rgba(10, 12, 16, 0.62);
  --pcd-b: rgba(255,255,255,0.10);
  --pcd-b2: rgba(255,255,255,0.08);

  --pcd-t: rgba(255,255,255,0.86);
  --pcd-t2: rgba(255,255,255,0.92);
  --pcd-m: rgba(255,255,255,0.65);

  --pcd-neon: rgba(0,231,255,0.45);
  --pcd-neon2: rgba(0,231,255,0.12);
  --pcd-green: rgba(34,197,94,0.10);

  --pcd-shadow: 0 14px 34px rgba(0,0,0,0.35);
  --pcd-shadow2: 0 10px 24px rgba(0,0,0,0.20);
}

/* =========================================================
   PAGE
   ========================================================= */
.pcd-page{
  padding: 14px 16px;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(0,231,255,0.10), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(34,197,94,0.10), transparent 60%),
    #0b0f12;
  min-height: 100vh;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.pcd-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
}

.pcd-h1{
  font-weight: 900;
  color: var(--pcd-t2);
  letter-spacing: 0.2px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pcd-controls{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.pcd-dd{
  min-width: 220px;
}

/* input nativo */
.pcd-search{
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--pcd-t2);
  padding: 0 12px;
  outline: none;
}

.pcd-search::placeholder{
  color: rgba(255,255,255,0.55);
}

/* botones */
.pcd-viewbtn{
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px;
  padding: 6px 12px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.80) !important;
  line-height: 1;
}

.pcd-viewbtn--active{
  border-color: var(--pcd-neon) !important;
  box-shadow:
    0 0 0 2px var(--pcd-neon2) inset,
    0 10px 24px rgba(0,0,0,0.35);
  color: var(--pcd-t2) !important;
}

/* =========================================================
   KPI RESUMEN
   ========================================================= */
.pcd-resumen-wrap{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pcd-kpi{
  background: var(--pcd-bg);
  border: 1px solid var(--pcd-b);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: var(--pcd-shadow);
  backdrop-filter: blur(10px);
  min-width: 0;
}

.pcd-kpi-title{
  color: var(--pcd-m);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.pcd-kpi-value{
  color: var(--pcd-t2);
  font-weight: 900;
  font-size: 20px;
  margin-top: 2px;
}

.pcd-kpi-sub{
  color: rgba(255,255,255,0.60);
  font-weight: 700;
  font-size: 11px;
  margin-top: 2px;
}

/* responsive KPIs */
@media (max-width: 1100px){
  .pcd-resumen-wrap{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 560px){
  .pcd-resumen-wrap{ grid-template-columns: 1fr; }
  .pcd-dd{ min-width: 180px; }
}

/* =========================================================
   MAIN / TABLE CONTAINER
   ========================================================= */
.pcd-main{ min-height: 0; }

.pcd-table{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--pcd-bg);
  border: 1px solid var(--pcd-b);
  box-shadow:
    var(--pcd-shadow),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction: column;
  min-width: 0;
}

.pcd-sheet-title{
  padding: 10px 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.88);
  border-bottom: 1px solid var(--pcd-b2);
  background: rgba(255,255,255,0.03);
}

/* =========================================================
   ✅ HEAD + ROW: 12 columnas reales (misma plantilla)
   Orden:
   Jugador | CatMax | Edad | Saltos | Año | Total | Above | %Above | Equipo | Inscripción | CatIns | Club
   ========================================================= */
.pcd-head,
.pcd-row{
  display:grid;
  grid-template-columns:
    minmax(260px, 2.2fr)   /* Jugador */
    minmax(130px, 0.9fr)   /* Cat. máx */
    70px                   /* Edad */
    90px                   /* Saltos */
    70px                   /* Año */
    70px                   /* Total */
    70px                   /* Above */
    90px                   /* % Above */
    minmax(260px, 1.6fr)   /* Equipo inscrito */
    minmax(220px, 1.5fr)   /* Inscripción */
    minmax(150px, 1.0fr)   /* Cat. inscrita */
    minmax(220px, 1.6fr);  /* Club */
  align-items:center;
  column-gap: 12px;
  padding: 10px 12px;
  min-width: 0;
}

.pcd-head{
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--pcd-b2);
}

.pcd-hcell{
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.35px;
  color: rgba(255,255,255,0.70);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* scroll interno del cuerpo */
.pcd-body{
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 65vh;
}

/* fila */
.pcd-row{
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 120ms ease;
}

.pcd-row:hover{
  background: rgba(34,197,94,0.06);
}

/* celdas */
.pcd-cell{
  min-width: 0;
  color: var(--pcd-t);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcd-center{
  text-align:center;
}

/* %Above pill */
.pcd-pill{
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 0;
}

/* =========================================================
   Jugador: iconos + nombre (sin solapes)
   ========================================================= */
.pcd-player-icons{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-shrink: 0;
}

.pcd-player-name{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 900;
}

/* =========================================================
   Inscripción: icono + texto
   ========================================================= */
.pcd-ellipsis{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcd-insc{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

/* =========================================================
   Bloques comp_i (debajo de cada fila)
   ========================================================= */
.pcd-compgrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  padding: 10px 12px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.06);
}

.pcd-compcell{
  border-radius: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--pcd-shadow2);
  min-height: 78px;
  min-width: 0;
}

.pcd-comphead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  min-width: 0;
}

.pcd-compnamewrap{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.pcd-compname{
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pcd-compsub{
  font-weight: 700;
  font-size: 11px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  min-width: 0;
}

/* =========================================================
   Empty state
   ========================================================= */
.pcd-empty{
  color: rgba(255,255,255,0.65);
  font-weight: 900;
  padding: 14px;
}

/* =========================================================
   Responsive table: si la pantalla es estrecha,
   permite scroll horizontal en el wrapper del body
   (sin romper el grid fijo)
   ========================================================= */
@media (max-width: 1100px){
  .pcd-table{ overflow: hidden; }
  .pcd-body{ overflow-x: auto; }
  .pcd-head, .pcd-row{ min-width: 1180px; }
}

@media (max-width: 560px){
  .pcd-topbar{ flex-direction: column; align-items: stretch; }
  .pcd-controls{ justify-content: flex-start; }
  .pcd-h1{ white-space: normal; }
}