/* ======================= Tipografía global ======================= */
html, body {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ================================================================ */
/* Base */
body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  background-color: #121212;
  color: white;
}

.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* =================== Sistema global de botones =================== */
.btn {
  appearance: none;
  border: 1px solid #2a2a2a;
  background: #171717;
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-family: inherit; /* Nunito garantizado */
  cursor: pointer;
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

.btn-primary {
  border: 0;
  background: linear-gradient(180deg, #f6a258, #f39c12);
  color: #141414;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}

.btn.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #2a2a2a;
}
.btn.ghost:hover { background: rgba(255,255,255,.06); }

/* ============================ Sidebar ============================ */
.sidebar {
  width: 240px;
  background-color: #1e1e1e;
  padding: 20px;
  box-shadow: 2px 0 10px rgba(0,0,0,0.6);
}

.sidebar h2 {
  color: #f39c12;
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 15px;
}

.sidebar button {
  width: 100%;
  padding: 10px;
  background-color: #2c2c2c;
  border: none;
  border-radius: 8px;
  color: #f5f0e6;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar button:hover {
  background-color: #f39c12;
  color: black;
}

/* Iconos de colores personalizados */
.icon-plantilla { color: #f39c12; }
.icon-estadisticas { color: #00c3ff; }
.icon-noticias { color: #ff6b6b; }
.icon-calendario { color: #a29bfe; }
.icon-finanzas { color: #2ecc71; }
.icon-configuracion { color: #ffcc80; }
.icon-jornada { color: #ffb84d; }
.icon-playoffs { color:#f39c12; }

/* ======================= Contenido principal ===================== */
.main-content {
  flex-grow: 1;
  padding: 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-content h1 {
  font-size: 28px;
  color: #f39c12;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
}

/* ============================= Tarjetas ========================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
}

.card {
  background-color: #222;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
  font-weight: bold;
  color: #f39c12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 220px;
}

/* ✅ Ocupa dos columnas (Clasificación) */
.card--wide { grid-column: span 2; }
@media (max-width: 1024px) { .card--wide { grid-column: span 1; } }

.card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(255, 165, 0, 0.4);
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #9ad4ff;
}

/* ====================== Escudo (sidebar y tarjeta) =============== */
.escudo-equipo {
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  filter: drop-shadow(0 0 5px rgba(243,156,18,0.25));
}

/* ========== Lista del equipo titular (sin scroll) ========== */
#equipo-titular-list {
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 95%;
  margin: 4px auto;
}

.starter-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 10px 12px;
}

.starter-list .name {
  font-weight: 800;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
  max-height: calc(1em * 1.2 * 2);
}

.starter-list .val {
  opacity: 0.95;
  font-weight: 700;
}

/* ===== Scroll para la tarjeta Resultados de la Jornada ===== */
#resultados-jornada {
  max-height: 200px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.3;
  margin: 6px auto 0;
  padding: 0;
  list-style: none;
  width: 95%;
}

/* Scroll custom Resultados */
#resultados-jornada::-webkit-scrollbar { width: 8px; }
#resultados-jornada::-webkit-scrollbar-track {
  background: #1e1e1e; border-radius: 8px;
}
#resultados-jornada::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f39c12, #ffb84d);
  border-radius: 8px; border: 2px solid #1e1e1e;
}
#resultados-jornada::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffb84d, #f39c12);
}

/* ============================ Clasificación ====================== */
.standings-scroll{
  width: 100%;
  max-width: 100%;
  padding: 6px;
  box-sizing: border-box;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #2d2d2d;
  border-radius: 10px;
  background: #1a1a1a;
  -webkit-overflow-scrolling: touch;
}

/* scrollbar a juego */
.standings-scroll::-webkit-scrollbar{ width: 8px; }
.standings-scroll::-webkit-scrollbar-track{ background:#1e1e1e; border-radius:8px; }
.standings-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #f39c12, #ffb84d);
  border-radius: 8px; border: 2px solid #1e1e1e;
}
.standings-scroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #ffb84d, #f39c12);
}

.table-standings{
  width: 100%;
  table-layout: auto;           /* ✅ nombres sin cortar */
  border-collapse: collapse;
  font-size: 13px;
}

.table-standings thead th{
  position: sticky; top: 0;
  background: #222;
  color: #f5f0e6;
  font-weight: 800;
  padding: 6px 8px;
  border-bottom: 1px solid #2d2d2d;
  text-align: center;
}

/* Cabecera NE */
.table-standings thead th:first-child {
  text-align: left;
  color: #f39c12;
  min-width: 110px;
}

/* Celdas (base) */
.table-standings tbody td{
  padding: 6px 8px;
  border-bottom: 1px solid #262626;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ✅ NE (nombre equipo) puede saltar de línea y no se corta */
.table-standings tbody td:first-child {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

/* Columnas numéricas (PJ, PG, PP) */
.table-standings thead th:nth-child(2),
.table-standings tbody td:nth-child(2),
.table-standings thead th:nth-child(3),
.table-standings tbody td:nth-child(3),
.table-standings thead th:nth-child(4),
.table-standings tbody td:nth-child(4) {
  width: 56px;
  text-align: center;
}

/* Oculta extras a partir de la 5ª */
.table-standings thead th:nth-child(n+5),
.table-standings tbody td:nth-child(n+5) {
  display: none;
}

.table-standings tbody tr:hover{ background: #202020; }

/* Resaltar mi equipo */
.table-standings .my-team{
  border-left: 4px solid #f39c12;
  box-shadow: inset 0 0 0 9999px rgba(243,156,18,.06);
  font-weight: 800;
}

/* Etiqueta sutil jornada */
.clasif-jornada-subtle {
  opacity: .8;
  font-size: 0.9em;
  margin-left: 6px;
}

/* Subtítulo sutil métricas */
.avg-subtle {
  margin-top: -2px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #ffd08a;
  opacity: 0.9;
  font-weight: 800;
}

/* ===================== Pop-up genérico ====================== */
.popup-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;                 /* ✅ oculta por defecto */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.popup-card{
  width: min(520px, 90vw);
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(243,156,18,.25);
  padding: 18px;
}
.popup-card h3{ margin: 0 0 8px; color: #f39c12; }
.popup-card p{ margin: 0 0 16px; color: #f5f0e6; }

/* NUEVO: contenedor de acciones compatible */
.popup-actions,
.popup-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Los botones dentro de popups usan el sistema .btn global */
.popup-actions .btn,
.popup-buttons .btn {
  font-family: inherit; /* Nunito */
}

/* =============== Últimas Noticias =============== */
.news-list{
  width: 95%;
  margin: 6px auto 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.35;
}
.news-list li{
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* ================== Próximo Partido ================== */
.next-match{
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2d2d2d;
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  color: #f5f0e6;
  box-sizing: border-box;
  font-size: 14px;
}
.next-match .nm-line{
  margin: 4px 0;
  line-height: 1.25;
  font-weight: 700;
  color: #f5f0e6;
}
.next-match .nm-line strong{ color: #9ad4ff; }
.next-match .nm-line em{
  color: #ffd08a;
  font-style: normal;
  font-weight: 800;
}

.pp-prob{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}
.pp-prob strong{ font-size:16px; }
.pp-chip{
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid #2c3b47;
  background:#1f2630;
  color:#dfe6ee;
  font-weight:700;
}
.pp-eq{ opacity:.7; }

.badge-tactics{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:10px;
  background:#152029;
  border:1px solid #33414c;
  color:#aeb8c1;
  font-size:12px;
}

/* ================== Lesionados / Sancionados ================== */
.injury-list{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
}
.injury-list li{
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  color: #f5f0e6;
  line-height: 1.3;
}
.injury-list li.empty{
  display: block;
  text-align: center;
  color: #ccc;
  border-style: dashed;
  font-weight: 700;
}

.inj-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px #1e1e1e;
}
.inj-green{ background: #2ecc71; }   /* Día a día */
.inj-orange{ background: #f39c12; }  /* Baja corta */
.inj-red{ background: #e74c3c; }     /* Baja larga */

.inj-name{
  font-weight: 800;
  color: #9ad4ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inj-meta{
  font-weight: 800;
  opacity: .95;
  text-align: right;
  white-space: nowrap;
}
.inj-sub{
  grid-column: 2 / -1;
  font-size: 12px;
  color: #ffd08a;
  opacity: .9;
  margin-top: 2px;
}

/* — Ajuste tipográfico en Lesionados/Sancionados — */
.injury-list li{ line-height: 1.25; }
.inj-name{ font-size: 13px; }
.inj-meta{ font-size: 13px; }

/* ================== Popup simulación ================== */
.popup-card.sim{
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 20px;
  width: min(92vw, 360px);
  text-align: center;
  color: #f5f0e6;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.popup-card.sim h3{
  margin: 8px 0 6px;
  color: #9ad4ff;
  font-size: 16px;
}
.popup-card.sim p{
  margin: 0;
  font-size: 13px;
  opacity: .9;
}

/* Spinner */
.spinner{
  width: 36px;
  height: 36px;
  border: 3px solid #333;
  border-top-color: #f39c12;
  border-radius: 50%;
  margin: 6px auto 10px auto;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

.hidden{ display:none !important; }

/* ================== Popup táctico (Idea 2) ================== */
:root {
  --ts-brand:        var(--accent, #f39c12);
  --ts-brand-700:    #d68910;
  --ts-surface:      var(--card-bg, #ffffff);
  --ts-surface-2:    var(--panel-bg, #f6f7fb);
  --ts-text-1:       var(--text-color, #111);
  --ts-text-2:       var(--muted-text, #555);
  --ts-border:       rgba(0,0,0,.10);
  --ts-shadow:       0 18px 55px rgba(0,0,0,.25);
  --ts-ring:         rgba(243,156,18,.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ts-surface:   var(--card-bg, #1e2230);
    --ts-surface-2: var(--panel-bg, #171a26);
    --ts-text-1:    var(--text-color, #f3f4f6);
    --ts-text-2:    var(--muted-text, #c7cbd6);
    --ts-border:    rgba(255,255,255,.10);
    --ts-shadow:    0 18px 55px rgba(0,0,0,.55);
  }
}

.ts-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: ts-fade-in .18s ease-out;
}

.ts-modal {
  width: min(760px, 92vw);
  background: linear-gradient(180deg, var(--ts-surface) 0%, var(--ts-surface-2) 100%);
  color: var(--ts-text-1);
  border-radius: 14px;
  border: 1px solid var(--ts-border);
  box-shadow: var(--ts-shadow);
  padding: 16px 16px 12px;
  position: relative;
  overflow: clip;
}

.ts-modal::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ts-brand), var(--ts-brand-700));
}

.ts-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ts-header h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: .2px; }
.ts-close {
  border: 0; background: transparent; font-size: 22px; line-height: 1;
  cursor: pointer; opacity: .7; color: var(--ts-text-2);
  border-radius: 10px; padding: 2px 6px; transition: background .15s ease, opacity .15s ease;
}
.ts-close:hover { opacity: 1; background: rgba(0,0,0,.06); }
.ts-close:focus-visible { outline: 2px solid var(--ts-ring); outline-offset: 2px; }

.ts-sub { font-size: 14px; color: var(--ts-text-2); margin-bottom: 10px; }

.ts-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ts-plan {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
  border: 1px solid var(--ts-border); border-radius: 12px; padding: 12px;
  background: var(--ts-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ts-plan:hover { border-color: rgba(243,156,18,.45); box-shadow: 0 6px 20px rgba(243,156,18,.15); }

.ts-plan .title { font-weight: 700; margin-bottom: 4px; display: inline-flex; align-items: center; gap: 6px; }
.ts-plan .desc  { font-size: 13px; color: var(--ts-text-2); }
.ts-plan .meta  { font-size: 12px; color: var(--ts-text-2); margin-top: 6px; }

.ts-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(243,156,18,.45);
  color: var(--ts-text-2); background: rgba(243,156,18,.08);
}

.ts-radio { margin-top: 4px; accent-color: var(--ts-brand); }

.ts-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ts-footer  { margin-top: 6px; display: flex; gap: 12px; }

.ts-modal .btn {
  appearance: none; border-radius: 10px; padding: 10px 14px;
  border: 1px solid var(--ts-border); background: var(--ts-surface);
  color: var(--ts-text-1); font-weight: 700; letter-spacing: .2px; cursor: pointer;
  transition: transform .02s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}
.ts-modal .btn:hover { border-color: rgba(0,0,0,.2); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.ts-modal .btn:active { transform: translateY(1px); }
.ts-modal .btn:focus-visible { outline: 2px solid var(--ts-ring); outline-offset: 2px; }

.ts-modal .btn.primary {
  background: linear-gradient(180deg, var(--ts-brand) 0%, var(--ts-brand-700) 100%);
  color: #fff; border: 0; box-shadow: 0 8px 18px rgba(243,156,18,.35);
}
.ts-modal .btn.primary:hover { filter: brightness(1.02); box-shadow: 0 10px 22px rgba(243,156,18,.4); }

.ts-modal .btn.ghost {
  background: transparent;
  border: 1px solid rgba(243,156,18,.45);
  color: var(--ts-text-1);
}
.ts-modal .btn.ghost:hover { background: rgba(243,156,18,.06); }

.ts-modal .link {
  border: 0; background: transparent; color: var(--ts-text-2);
  text-decoration: underline; cursor: pointer; padding: 6px 8px; border-radius: 8px;
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}
.ts-modal .link:hover { background: rgba(0,0,0,.05); }
.ts-modal .link:focus-visible { outline: 2px solid var(--ts-ring); outline-offset: 2px; }

@keyframes ts-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Bloqueo de scroll cuando el popup está abierto */
html.ts-noscroll, body.ts-noscroll { overflow: hidden; }

/* ====================== DEBUG PANEL ====================== */
.dbg-panel{
  position:fixed; right:16px; bottom:16px;
  max-width:420px; max-height:60vh; overflow:auto;
  background:rgba(22,27,34,.96); color:#fff;
  border:1px solid rgba(99,110,123,.4);
  border-radius:12px; padding:12px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:13px; line-height:1.35; z-index:10050;
}
.dbg-panel h4{ margin:0 0 8px 0; font-weight:800; font-size:14px; }
.dbg-panel .k{ opacity:.7; }
.dbg-panel table{ width:100%; border-collapse:collapse; margin-top:6px; }
.dbg-panel th,.dbg-panel td{ border-bottom:1px solid rgba(255,255,255,.08); padding:6px 4px; text-align:left; }
.dbg-panel tr:last-child td{ border-bottom:none; }
.dbg-close{
  position:absolute; top:8px; right:8px; border:0; background:transparent; color:#fff;
  cursor:pointer; font-size:16px; line-height:1; opacity:.7;
}
.dbg-close:hover{ opacity:1; }
.dbg-pill{ display:inline-block; padding:2px 8px; border-radius:999px; background:#2d333b; margin-left:6px; font-weight:700; }

/* ================== Post-match popup (Dashboard) ================== */
.pm-overlay {
  position: fixed;
  inset: 0;
  display: none;                   /* se muestra poniendo aria-hidden="false" */
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 15, .55);
  backdrop-filter: blur(2px);
  z-index: 10050;
}

.pm-overlay[aria-hidden="false"] {
  display: flex;
}

.pm-card {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  width: min(520px, 92vw);
  background: linear-gradient(180deg, #2b211a, #1e1712);
  color: #f6f4f3;
  border: 1px solid #7a4b2a;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 20px 20px 16px;
}

.pm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.pm-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #b2581c;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  font-size: 18px;
  line-height: 1;
}

.pm-title {
  margin: 0;
  font-size: 20px;
  letter-spacing: .2px;
  font-weight: 900;
}

.pm-desc {
  font-size: 14px;
  opacity: .85;
  margin: 0 0 14px 0;
}

.pm-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.pm-score {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .3px;
}

.pm-outcome {
  font-size: 14px;
  opacity: .9;
}

.pm-mvp {
  font-size: 15px;
}

.pm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Botón específico (puede convivir con .btn) */
.pm-close {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  appearance: none;
  border: 1px solid #cd8850;
  color: #1b120c;
  background: linear-gradient(180deg, #f6a258, #f08a32);
  font-weight: 900;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 9999px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
  cursor: pointer;
}

/* Bloquea el scroll de fondo cuando el modal está abierto */
html.pm-noscroll, body.pm-noscroll {
  overflow: hidden !important;
}

/* =========================== Playoffs UI ========================== */
.po-banner {
  margin: .25rem 0 1rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(0deg, rgba(255,215,0,0.08), rgba(255,215,0,0.08));
  border-radius: 10px;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.po-banner .po-dot {
  font-size: 1.1rem;
  line-height: 1;
}

/* pequeño chip para títulos de tarjetas */
.badge-po {
  display: inline-block;
  margin-left: .5rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff9db;
}

.po-chip{
  margin-left: .5rem;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid #2563eb;
  color: #1e3a8a;
  background: linear-gradient(180deg,#eff6ff,#dbeafe);
}

body.phase-playoffs .card-title{
  text-shadow: 0 1px 0 rgba(30,58,138,.08);
}
.pm-round-badge{
  display:inline-block;
  margin-bottom:6px;
  padding:2px 8px;
  border-radius:9999px;
  font-weight:700;
  font-size:12px;
  background:#eef2ff;   /* indigo-50 */
  color:#3730a3;        /* indigo-800 */
}

.po-badge{
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#33210a;
  color:#f39c12;
  border:1px solid #563a10;
  vertical-align:middle;
}

/* =============== Preseason Intro Popup (Nunito) =============== */
#popup-preseason-intro .popup-card--ps {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width: 560px;
}

#popup-preseason-intro .popup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #2a2a2a;
}

#popup-preseason-intro .popup-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

#popup-preseason-intro .popup-close {
  margin-left: auto;
  appearance: none;
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #c9c9c9;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
}

#popup-preseason-intro .popup-body {
  padding: 16px;
  color: #c9c9c9;
  display: grid;
  gap: 10px;
}

#popup-preseason-intro .psi-list {
  margin: 0 0 0 16px;
  padding: 0;
  display: grid;
  gap: 6px;
}

#popup-preseason-intro .psi-hint {
  margin: 8px 0 0 0;
  opacity: .9;
}

#popup-preseason-intro .popup-actions {
  padding: 12px 16px;
  border-top: 1px solid #2a2a2a;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Botones (heredan .btn) */
#popup-preseason-intro .btn.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #2a2a2a;
}

/* Ayuda a accesibilidad (foco) */
#popup-preseason-intro .popup-close:focus,
#popup-preseason-intro .btn:focus {
  outline: 2px solid #f39c12;
  outline-offset: 2px;
}

/* ================== Pretemporada: POPUP (alias) ================== */
.ppre-overlay {
  position: fixed;
  inset: 0;
  display: none;            /* se muestra vía JS: flex */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  padding: 16px;
}

.ppre-card {
  width: min(540px, 92vw);
  background: #111;
  color: #fff;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow: hidden;
  font-family: inherit;    /* Nunito dentro del popup */
}

.ppre-head {
  padding: 16px 18px;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ppre-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
}
.ppre-sub {
  margin-left: auto;
  opacity: .85;
  font-size: 12px;
}

.ppre-body {
  padding: 18px;
  display: grid;
  gap: 10px;
  color: #ddd;
}
.ppre-body p { margin: 0; }
.ppre-bullet {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #0f0f0f;
  border: 1px dashed #2a2a2a;
  border-radius: 12px;
}
.ppre-day {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #a5b4fc;
  background: linear-gradient(180deg, #eef2ff, #e0e7ff);
  color: #1e293b;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
}

.ppre-actions {
  padding: 12px 16px;
  border-top: 1px solid #2a2a2a;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Botones del popup – versión “bonita” (alias si no usas .btn aquí) */
.ppre-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit; /* Nunito */
  transition: transform .06s ease, box-shadow .12s ease, opacity .12s ease;
}
.ppre-btn:active { transform: translateY(1px); }
.ppre-btn:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* Primario (amarillo) */
.ppre-btn.primary {
  background: #f39c12;
  color: #141414;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.ppre-btn.primary:hover { filter: brightness(1.06); }

/* Secundario (fantasma) */
.ppre-btn.ghost {
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #fff;
}
.ppre-btn.ghost:hover {
  background: rgba(255,255,255,.06);
}

/* Responsive mejora tipografía */
@media (max-width: 420px) {
  .ppre-title { font-size: 18px; }
  .ppre-body  { font-size: 14px; }
}

/* Alias para reutilizar estilos en el popup con tus clases globales */
.ppre-actions .btn,
.ppre-actions .btn-primary {
  font-family: inherit;
  border-radius: 999px;
  font-weight: 800;
}

/* ===========================
   Sidebar: scroll personalizado
   =========================== */
.sidebar{
  /* Asegura scroll SOLO en la barra izquierda */
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;

  /* Suavidad en móviles */
  -webkit-overflow-scrolling: touch;

  /* Firefox */
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: var(--accent, #2b7bd8) transparent;
}

/* WebKit (Chrome, Edge, Opera, Safari) */
.sidebar::-webkit-scrollbar{
  width: 10px;              /* grosor del carril */
}

.sidebar::-webkit-scrollbar-track{
  background: transparent;  /* carril limpio */
}

.sidebar::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent, #2b7bd8) 85%, transparent),
    color-mix(in srgb, var(--accent, #2b7bd8) 65%, transparent)
  );
  border-radius: 999px;
  border: 2px solid transparent; /* separa del carril */
  background-clip: content-box;  /* mantiene el borde visible */
}

.sidebar::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent, #2b7bd8) 95%, white 0%),
    color-mix(in srgb, var(--accent, #2b7bd8) 75%, white 0%)
  );
}

.sidebar::-webkit-scrollbar-thumb:active{
  background: var(--accent, #2b7bd8);
}

/* Opcional: pequeña sombra para indicar que hay más contenido */
.sidebar{
  /* un sutil “fade” arriba/abajo cuando hay overflow */
  --fade: radial-gradient( farthest-side, rgba(0,0,0,.08), transparent );
  background:
    linear-gradient(var(--bg, #f5f7fb) 30%, rgba(255,255,255,0)) top,
    linear-gradient(rgba(255,255,255,0), var(--bg, #f5f7fb) 70%) bottom,
    var(--sidebar-bg, transparent);
  background-repeat: no-repeat;
  background-size: 100% 14px, 100% 14px, auto;
  background-attachment: local, local, scroll;
}

/* Evita que el contenido pegue al scroll */
.sidebar nav{ padding-right: 6px; }

/* Respeta usuarios con “reduced motion” */
@media (prefers-reduced-motion: reduce){
  .sidebar{ scroll-behavior: auto; }
}

/* --- Pill para equipo ofertante --- */
.team-pill{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 9999px;
  font-weight: 800;
  line-height: 1;
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  border: 1px solid rgba(0,0,0,0.06);
  background: #e8f1ff;          /* fallback suave */
  color: #1c2a3a;                /* fallback legible */
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 0 0 1px rgba(255,255,255,0.4);
  vertical-align: middle;
  transform: translateZ(0);      /* nitidez */
  white-space: nowrap;
}

/* Opcional: una micro-animación al aparecer el modal */
.popup-overlay[style*="display: block"] #ot-team.team-pill{
  animation: pill-pop 160ms ease-out;
}
@keyframes pill-pop{
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Botón "Jugar la jornada" en cooldown */
#btn-play.is-busy{
  opacity: .6;
  cursor: not-allowed;
  filter: saturate(.5);
  position: relative;
}
#btn-play.is-busy::after{
  content: "…";
  font-weight: 900;
  margin-left: 6px;
}