/* match-preview/assets/mp.css — minimal & fast */

/* ========== Base ========== */
.mp{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:21px;
}
.mp, .mp *, .mp *::before, .mp *::after{box-sizing:border-box!important}
.mp .mp-card{background:#111;color:#eee;border:1px solid #222;border-radius:14px;padding:16px;margin:10px 0}
.mp h2{font-size:18px;line-height:1.3;margin:0 0 12px}
.mp .muted{opacity:.75}

/* ========== Breadcrumb (visible) ========== */
.mp .mp-breadcrumbs{font-size:.875rem;margin:0 0 .5rem 0;color:#9ca3af}
.mp .mp-breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0;padding:0}
.mp .mp-breadcrumbs a{text-decoration:none;color:#e5e7eb}
.mp .mp-breadcrumbs a:hover{text-decoration:underline}
.mp .mp-breadcrumbs a:focus{outline:2px dashed #555;outline-offset:2px;border-radius:4px}
.mp .mp-breadcrumbs .sep{margin:0 .25rem;color:#6b7280}

/* ========== Util grid ========== */
.mp .row{display:grid;gap:12px}
@media (min-width:720px){ .mp .row.cols-2{grid-template-columns:1fr 1fr} }

/* ========== Header principal ========== */
.mp .mp-header{text-align:center;padding:20px 16px 12px}
.mp .mp-headline{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:clamp(22px,3.5vw,32px);line-height:1.2;margin:0
}
.mp .mp-headline .vs{opacity:.85;font-weight:700}
.mp .mp-subtitle{margin-top:8px;opacity:.9}
.mp .mp-subsubtitle{margin-top:2px;opacity:.8}

/* ========== Título pill ========== */
.mp .mp-titlebar{
  background:#1a1a1a;border:1px solid #222;border-radius:10px;
  padding:8px 12px;text-align:center;margin-bottom:12px;font-weight:700
}

/* ========== Logos / nombres ========== */
.mp .logo{width:24px;height:24px;object-fit:contain;vertical-align:middle}
.mp .team-inline{display:inline-flex;align-items:center;gap:6px}
.mp .team-inline.right{flex-direction:row}

/* ========== Code badge / code-only ========== */
.mp .code-badge{
  display:inline-block;
  padding:2px 6px;
  margin-left:4px;
  font-size:.8em;
  line-height:1;
  border:1px solid #2a2a2a;
  background:#151515;
  color:#d1d5db;
  border-radius:6px;
  vertical-align:middle;
}
.mp .code-only{
  display:inline-block;
  font-weight:800;
  letter-spacing:.5px;
  font-variant-caps:all-small-caps;
  color:#e5e7eb;
}

/* ========== KPI genérico ========== */
.mp .kpi{
  display:grid;grid-template-columns:1fr auto;gap:6px;
  padding:10px 0;border-bottom:1px dashed #222;
}
.mp .kpi:last-child{border-bottom:0}

/* ========== Head-to-Head Summary ========== */
.mp .h2h-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.mp .h2h-team{text-align:center}
.mp .h2h-team .logo{display:block;margin:0 auto 8px}
.mp .h2h-team .team-title{font-weight:700;color:#eee;margin-top:2px}
.mp .metric{margin:10px 0;padding:8px 0;border-bottom:1px dashed #222}
.mp .h2h-team .metric:last-child{border-bottom:0}
.mp .metric-label{font-weight:700;color:#bbb}
.mp .metric-value{font-weight:800;color:#eee}

/* ========== Recent Head-to-Head ========== */
.mp .h2h-list{display:grid;gap:0;margin-top:4px}
.mp .h2h-row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr) minmax(160px,1.1fr) auto;
  align-items:center;justify-items:center;
  column-gap:12px;padding:8px 0;border-bottom:1px dashed #222;text-align:center
}
.mp .h2h-row:last-child{border-bottom:0}
.mp .h2h-row .team{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.mp .h2h-row .team .logo{flex:0 0 24px}
.mp .h2h-row .team span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mp .h2h-row .score{font-weight:800;color:#eee;font-variant-numeric:tabular-nums}
.mp .h2h-row .league,.mp .h2h-row .date{color:#bbb;white-space:nowrap}
@media (max-width:720px){
  .mp .h2h-row{
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:auto auto;
    row-gap:4px
  }
  .mp .h2h-row .league{grid-column:1/3;justify-self:center}
  .mp .h2h-row .date{grid-column:3/4;justify-self:end}
}

/* ========== Stats & Form (tabla 3 columnas) ========== */
.mp .sf-table{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border:1px solid #222;border-radius:10px;overflow:hidden
}
.mp .sf-cell{padding:12px 10px;border-bottom:1px solid #222;text-align:center}
.mp .sf-cell.label{color:#bbb;font-weight:700}
.mp .sf-cell.val{font-weight:700;color:#eee}
.mp .sf-head{background:#121212;font-weight:800}
.mp .sf-head.metric-title{color:#eee}
.mp .sf-head.team{display:flex;align-items:center;justify-content:center;gap:8px}
.mp .sf-table > :last-child{border-bottom:0}
@media (max-width:720px){ .mp .sf-cell{padding:10px 8px} }

/* ========== Upcoming Matches (dos columnas, responsive) ========== */
.mp .up-grid{ display:grid; gap:16px; }
@media (min-width:720px){ .mp .up-grid{ grid-template-columns:1fr 1fr; } }
.mp .up-col{ }
.mp .up-head{
  display:flex; align-items:center; gap:8px;
  font-weight:800; margin-bottom:8px;
}
.mp .up-head .logo{ width:24px; height:24px; object-fit:contain; }
.mp .up-list{ display:grid; gap:0; }
.mp .up-item{ padding:12px 0; }
.mp .up-item + .up-item{ border-top:1px solid #222; }
.mp .up-link{ display:block; text-decoration:none; color:inherit; }
.mp .up-line1{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.mp .up-line1 .teams{ font-weight:800; }
.mp .up-line1 .sep{ opacity:.6; }
.mp .up-line1 .comp, .mp .up-line1 .date{ white-space:nowrap; }
.mp .up-line2{ margin-top:4px; color:#bbb; font-variant-numeric:tabular-nums; }
/* Hover sin layout shift */
@media (hover:hover){ .mp .up-link:hover .teams{ text-decoration:underline; } }

/* ========== Lineups (dos columnas, compacta) ========== */
.mp .lu-grid{ display:grid; gap:16px; }
@media (min-width:720px){ .mp .lu-grid{ grid-template-columns:1fr 1fr; } }
.mp .lu-col{ }
.mp .lu-team{ display:flex; align-items:center; gap:8px; font-weight:800; margin-bottom:6px; }
.mp .lu-formation{ color:#bbb; margin:4px 0 8px; }
.mp .lu-list{ display:grid; gap:8px; }
.mp .lu-item{
  padding:6px 0;
  border-bottom:1px dashed #222;
}
.mp .lu-item:last-child{ border-bottom:0; }
.mp .lu-none{ color:#bbb; }

/* ========== Injuries & Suspensions (2 columnas) ========== */
.mp .inj-grid{ display:grid; gap:16px; }
@media (min-width:720px){ .mp .inj-grid{ grid-template-columns:1fr 1fr; } }
.mp .inj-col{ }
.mp .inj-head{ display:flex; align-items:center; gap:8px; font-weight:800; margin-bottom:4px; }
.mp .inj-sub{ color:#bbb; margin-bottom:8px; }
.mp .inj-group{ margin-bottom:10px; }
.mp .inj-group-title{ font-size:15px; line-height:21px; margin:8px 0 4px; font-weight:800; }
.mp .inj-list{ display:grid; gap:6px; }
.mp .inj-item{ padding:6px 0; border-bottom:1px dashed #222; }
.mp .inj-item:last-child{ border-bottom:0; }
.mp .inj-player{ font-weight:700; }
.mp .inj-meta{ color:#bbb; margin-top:2px; }
.mp .inj-none{ color:#777; }

/* ========== Odds (simple) ========== */
.mp .odds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mp .pill{display:inline-block;padding:4px 8px;border:1px solid #333;border-radius:999px}