/* A-LAB · acabado premium de los gráficos del Resumen (Jugadores y Equipos).
   Va después de jugador.css / equipo.css y solo afina: sombras suaves, degradados, barras con animación. */

/* ---------- Tarjetas del Resumen ---------- */
.overview-predictive-card, .overview-recent-form-card, .overview-leaders-card, .trajectory-card, .overview-radar-card,
.card-summary, .card-recent-form, .card-transfer, .card-video-theater {
  box-shadow: 0 1px 0 rgba(17, 28, 22, 0.03), 0 10px 28px rgba(17, 28, 22, 0.05);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.overview-predictive-card:hover, .overview-recent-form-card:hover, .overview-leaders-card:hover, .trajectory-card:hover,
.card-summary:hover, .card-recent-form:hover {
  box-shadow: 0 1px 0 rgba(17, 28, 22, 0.03), 0 16px 36px rgba(17, 28, 22, 0.08);
}
@keyframes alabGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes alabRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- EQUIPO · Eficiencia predictiva ---------- */
.predictive-grid { gap: 26px; }
.predictive-block { gap: 12px; padding: 14px 16px 16px; background: linear-gradient(180deg, #F7FAF7, #FFFFFF); border: 1px solid var(--line); border-radius: 12px; }
.predictive-title { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--ink); line-height: 1.25; }
.predictive-track { gap: 8px; }
.predictive-bar { height: 14px; border-radius: 99px; transform-origin: left; animation: alabGrow .8s var(--ease) both; position: relative; }
.predictive-bar.bar-real, .predictive-bar.bar-for { background: linear-gradient(90deg, #7DB596, #1B6746); box-shadow: 0 3px 10px rgba(27, 103, 70, 0.28); }
.predictive-bar.bar-expected { background: linear-gradient(90deg, #E3EAE5, #BFCCC3); }
.predictive-bar.bar-against { background: linear-gradient(90deg, #E2A59B, #B24A3D); box-shadow: 0 3px 10px rgba(178, 74, 61, 0.25); }
.predictive-legend { flex-direction: row; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.predictive-legend .lg { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.predictive-legend .lg b { font-size: 1.35rem; margin-left: 0; letter-spacing: -0.01em; }
.predictive-verdict { font-size: var(--fs-sm); line-height: 1.4; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.predictive-verdict:empty { display: none; }
.predictive-verdict--ok { background: var(--ok-bg); color: var(--ok); }
.predictive-verdict--warn { background: var(--warn-bg); color: var(--warn); }
.predictive-verdict--info { background: var(--info-bg); color: var(--info); }
.predictive-verdict--bad { background: var(--bad-bg); color: var(--bad); }

/* ---------- Forma reciente (equipo y jugador) ---------- */
.recent-form-row, .rf-row { gap: 10px; }
.recent-form-card, .rf-tile {
  position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); border-top-width: 1px; padding: 12px 6px 12px;
  background: linear-gradient(180deg, var(--tint, #F3F6F4) 0%, #FFFFFF 62%);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  animation: alabRise .5s var(--ease) both;
}
.recent-form-card::before, .rf-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--edge, var(--res-draw)); }
.recent-form-card:hover, .rf-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(17, 28, 22, 0.10); }
.recent-form-win, .rf-tile--v { --tint: #E6F1EA; --edge: var(--res-win); }
.recent-form-loss, .rf-tile--d { --tint: #F8E7E4; --edge: var(--res-loss); }
.recent-form-draw, .rf-tile--e { --tint: #F0F3F1; --edge: var(--res-draw); }
.recent-form-card:nth-child(2), .rf-tile:nth-child(2) { animation-delay: .06s; }
.recent-form-card:nth-child(3), .rf-tile:nth-child(3) { animation-delay: .12s; }
.recent-form-card:nth-child(4), .rf-tile:nth-child(4) { animation-delay: .18s; }
.recent-form-card:nth-child(5), .rf-tile:nth-child(5) { animation-delay: .24s; }
.recent-form-shield img, .rf-opponent-logo { width: 36px; height: 36px; filter: drop-shadow(0 3px 5px rgba(17, 28, 22, 0.18)); }
.recent-form-score, .rf-score-mini { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.recent-form-result-badge, .rf-badge { width: 24px; height: 24px; border-radius: 50%; font-size: 12px; }
.overview-left-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.overview-left-col .overview-radar-card { flex: 1; }
.overview-radar-card .chart-box--radar { min-height: 600px; }
.recent-form-main { align-self: stretch; width: 100%; }
.recent-form-rival, .rf-rival-name { display: block; width: 100%; max-width: 100%; padding: 0 4px; font-size: 10.5px; line-height: 1.2; color: var(--ink-3); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-tile { padding-top: 14px; }

.rf-meter { margin: 4px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.rf-meter__top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 8px; }
.rf-meter__top b { font: 600 1.15rem/1 var(--font-data); color: var(--ink); }
.rf-meter__bar { height: 10px; border-radius: 99px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.rf-meter__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7DB596, #1B6746); transform-origin: left; animation: alabGrow .9s var(--ease) both; }
.rf-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-3); }
.rf-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rf-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.recent-form-summary { padding-top: 6px; }
.card-recent-form { display: flex; flex-direction: column; }
.card-recent-form .recent-form-body { flex: 0 0 auto; }

/* ---------- Líderes del plantel ---------- */
.squad-leaders-list { gap: 10px; }
.leader-row { padding: 8px 10px; border-radius: 12px; transition: background-color .15s; animation: alabRise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.leader-row:hover { background: var(--surface-2); }
.leader-rank { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-weight: 600; text-align: center; }
.leader-row--1 { background: linear-gradient(90deg, #EAF3EE, #FFFFFF); border: 1px solid var(--brand-tint-2); }
.leader-row--1 .leader-rank { background: var(--brand); color: #fff; box-shadow: 0 3px 8px rgba(27, 103, 70, 0.35); }
.leader-row--2 .leader-rank { background: #C9D6CE; color: var(--ink); }
.leader-row--3 .leader-rank { background: #E9DDC8; color: #6A4E15; }
.leader-avatar { border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 4px 10px rgba(17, 28, 22, 0.12); }
.leader-row--1 .leader-avatar { box-shadow: 0 0 0 2px var(--brand), 0 4px 12px rgba(27, 103, 70, 0.3); }
.leader-value { font-size: 1.1rem; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); }
.leader-row--1 .leader-value { background: var(--brand-tint); color: var(--brand-ink); }
.leader-bar-track { height: 8px; background: var(--surface-2); }
.leader-bar-fill { background: linear-gradient(90deg, #CFE3D6, #8FBFA5); transform-origin: left; animation: alabGrow .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
.leader-bar-fill-main { background: linear-gradient(90deg, #7DB596, #1B6746); box-shadow: 0 2px 8px rgba(27, 103, 70, 0.3); }
.leaders-metric-btn { transition: transform .12s, background-color .12s, border-color .12s, color .12s; }
.leaders-metric-btn.active { box-shadow: 0 3px 10px rgba(27, 103, 70, 0.18); }

/* ---------- JUGADOR · Fortalezas ---------- */
.top-strengths-body { padding: 6px 20px 10px; }
.top-strength-row { grid-template-columns: 26px minmax(0, 1fr) 64px; gap: 14px; padding: 13px 0; animation: alabRise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.ts-rank { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font: 600 12px/1 var(--font-data); }
.top-strength-row:first-child .ts-rank { background: var(--brand); color: #fff; box-shadow: 0 3px 8px rgba(27, 103, 70, 0.35); }
.top-strength-name { font-weight: 500; }
.top-strength-value { font-size: var(--fs-sm); padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }
.top-strength-bar { height: 9px; background: var(--surface-2); position: relative; }
.top-strength-bar-inner { transform-origin: left; animation: alabGrow .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.ts-bar-elite { background: linear-gradient(90deg, #7FA6C9, #2B5C8A); box-shadow: 0 2px 8px rgba(43, 92, 138, 0.3); }
.ts-bar-pro { background: linear-gradient(90deg, #7DB596, #1B6746); box-shadow: 0 2px 8px rgba(27, 103, 70, 0.3); }
.ts-bar-avg { background: linear-gradient(90deg, #E8C77D, #C9921A); }
.ts-bar-low { background: linear-gradient(90deg, #E2A59B, #B24A3D); }
.ts-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; padding: 6px 4px; border-radius: 10px; background: var(--surface-2); }
.ts-pill b { font: 600 1.15rem/1 var(--font-data); letter-spacing: -0.02em; }
.ts-pill small { margin-top: 3px; font-size: 9.5px; letter-spacing: .02em; color: var(--ink-3); }
.ts-pill--elite { background: var(--info-bg); color: var(--info); }
.ts-pill--pro { background: var(--ok-bg); color: var(--ok); }
.ts-pill--avg { background: var(--warn-bg); color: var(--warn); }
.ts-pill--low { background: var(--bad-bg); color: var(--bad); }
.ts-note { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- JUGADOR · anillos de la cabecera ---------- */
.stat-ring-container .doughnut-wrapper { filter: drop-shadow(0 6px 10px rgba(27, 103, 70, 0.18)); }
.donut-inner-text { font-family: var(--font-data); font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Tablas del Resumen (detalle por competición y trayectoria) ---------- */
#breakdown-container table, .pro-table-mini { border-collapse: separate; border-spacing: 0; }
#breakdown-container thead th { background: var(--surface-2); letter-spacing: .06em; }
#breakdown-container tbody tr, .pro-table-mini tbody tr { transition: background-color .12s; }
#breakdown-container tbody tr:hover, .pro-table-mini tbody tr:hover { background: var(--brand-tint); }
#breakdown-container td strong { font-weight: 600; }
.pro-table-mini td { padding-block: 10px; }
.pro-table-mini .td-year { font: 500 var(--fs-sm)/1 var(--font-data); color: var(--ink-3); }
.club-mini-img { filter: drop-shadow(0 2px 4px rgba(17, 28, 22, 0.15)); }

@media (prefers-reduced-motion: reduce) {
  .predictive-bar, .leader-row, .leader-bar-fill, .top-strength-row, .top-strength-bar-inner, .recent-form-card, .rf-tile { animation: none !important; }
}
.overview-right-col .overview-leaders-card { flex: 1; }