:root {
  --bg: #0f1115;
  --card: #171a21;
  --card-alt: #1d212a;
  --border: #2a2f3a;
  --text: #e8eaed;
  --text-dim: #9aa1ac;
  --accent: #d62828;
  --accent-2: #1e63c9;
  --green: #2e9e5b;
  --gold: #d4a72c;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 24px 16px 60px;
}
.wrap {
  max-width: 980px;
  margin: 0 auto;
}
.brand-bar {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.brand-bar img.site-logo {
  height: 40px;
  width: auto;
  display: block;
}
.sport-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.sport-nav a {
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
}
.sport-nav a.current {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.sport-nav a:hover:not(.current) {
  background: var(--card-alt);
  color: var(--text);
}
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
h1 {
  font-size: 1.6rem;
  margin: 0;
  letter-spacing: -0.02em;
}
h1 span {
  color: var(--accent);
}
.subtitle {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 4px;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
button {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
button:hover {
  background: var(--card-alt);
  border-color: #3a4150;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
button.primary:hover {
  background: #b81f1f;
}
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.tab {
  padding: 8px 16px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  user-select: none;
}
.tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.league-section {
  display: none;
}
.league-section.active {
  display: block;
}
.division {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.division-title {
  padding: 10px 16px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: var(--card-alt);
  border-bottom: 1px solid var(--border);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
th,
td {
  padding: 9px 12px;
  text-align: center;
}
th {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
}
td.team {
  text-align: left;
}
tr:not(:last-child) td {
  border-bottom: 1px solid var(--border);
}
.rank {
  color: var(--text-dim);
  width: 22px;
  display: inline-block;
}
.badge {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.playoff {
  background: rgba(46, 158, 91, 0.18);
  color: var(--green);
}
.badge.wildcard {
  background: rgba(212, 167, 44, 0.18);
  color: var(--gold);
}
.badge.favorite {
  background: rgba(30, 99, 201, 0.18);
  color: #6ba3ff;
}
.badge.elim {
  background: rgba(214, 40, 40, 0.15);
  color: #e06565;
}
tr.favorite-row td {
  background: rgba(212, 167, 44, 0.08);
}
tr.favorite-row td.team {
  font-weight: 700;
  border-left: 3px solid var(--gold);
  padding-left: 9px;
}
td.editable {
  cursor: text;
  border-radius: 4px;
}
td.editable:hover {
  background: var(--card-alt);
}
td.editable[contenteditable="true"] {
  background: #232a38;
  outline: 1px solid var(--accent-2);
}
footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.75rem;
  margin-top: 24px;
}
.status {
  font-size: 0.75rem;
  color: var(--green);
  min-height: 16px;
  text-align: right;
  margin-top: 4px;
}
.help {
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.legend span.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.dot.playoff {
  background: var(--green);
}
.dot.wildcard {
  background: var(--gold);
}
.dot.elim {
  background: #e06565;
}

/* Tabla estilo "una sola tabla" para ligas sin conferencias/divisiones (fútbol) */
.soccer-table {
  table-layout: fixed;
}
.soccer-table th:nth-child(1),
.soccer-table td:nth-child(1) {
  width: 28px;
}
.soccer-table th:nth-child(2),
.soccer-table td:nth-child(2) {
  width: auto;
}
.soccer-table th:nth-child(n + 3),
.soccer-table td:nth-child(n + 3) {
  width: 8%;
}
.soccer-table td.team {
  text-align: left;
  white-space: normal;
  line-height: 1.5;
}
.soccer-table td.team .fan-badge {
  display: inline-block;
  margin-left: 6px;
}
tr.highlight-row td {
  background: rgba(212, 167, 44, 0.1);
}
tr.highlight-row td.team {
  font-weight: 700;
  color: var(--gold);
}
.fan-badge {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1400;
  font-weight: 700;
  white-space: nowrap;
}
.liguilla-line td {
  border-bottom: 2px dashed var(--accent-2) !important;
}
tr.relegation-row td {
  background: rgba(214, 40, 40, 0.08);
}

/* Calendario de un equipo específico */
.cal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.cal-row:last-child {
  border-bottom: none;
}
.cal-date {
  color: var(--text-dim);
  min-width: 90px;
}
.cal-match {
  flex: 1;
  min-width: 180px;
}
.cal-result {
  font-weight: 700;
  min-width: 60px;
  text-align: right;
}
.cal-result.win {
  color: var(--green);
}
.cal-result.loss {
  color: #e06565;
}
.cal-result.draw {
  color: var(--gold);
}
.cal-result.upcoming {
  color: var(--text-dim);
  font-weight: 400;
}

/* Ficha de jugador */
.player-card {
  padding: 16px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.player-photo {
  width: 88px;
  height: 112px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.player-meta {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-bottom: 10px;
}
.player-meta a {
  color: var(--accent-2);
  text-decoration: none;
}
.player-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
  flex: 1;
  min-width: 260px;
}
.stat-box {
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.stat-box .stat-label {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-box .stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 2px;
}
.stat-box .stat-value.editable[contenteditable="true"] {
  outline: 1px solid var(--accent-2);
  border-radius: 4px;
}

/* Punto de "¿jugó André?" en el calendario */
.andre-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.andre-dot.jugo {
  background: var(--green);
}
.andre-dot.no {
  background: #e06565;
}
.andre-dot.editing {
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--accent-2);
}
.andre-dot {
  position: relative;
}
.andre-dot:hover::after {
  content: attr(data-nota);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-alt);
  border: 1px solid var(--border);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.7rem;
  color: var(--text);
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.cal-jornada {
  color: var(--text-dim);
  min-width: 26px;
  font-weight: 600;
}
.cal-nota {
  font-size: 0.7rem;
  color: var(--gold);
  margin-left: 6px;
}
.cal-match[contenteditable="true"],
.cal-nota[contenteditable="true"] {
  outline: 1px solid var(--accent-2);
  border-radius: 4px;
  padding: 0 4px;
}

/* ============================================
   RESPONSIVE — mobile fix
   Las tablas (4-6 columnas americanas, 10 en la
   de fútbol) no caben en pantallas angostas.
   Estrategia: en vez de depender de scroll
   horizontal (invisible/poco descubrible en iOS,
   se sentía como "se corta"), se oculta el nombre
   completo del equipo en móvil — ya se muestra el
   código de 3 letras (NYJ, BUF...) aparte, así que
   la tabla completa cabe sin necesitar scroll.
   La tabla de fútbol no tiene código corto, así
   que en su caso se trunca con "…" en vez de
   ocultar, y se deja un scroll de respaldo solo
   para ella si aun así no cupiera en pantallas muy
   angostas (320px).
   .division tenía overflow:hidden (que RECORTA en
   vez de dejar ver/scrollear) — se sobreescribe
   aquí solo en el eje X, como red de seguridad.
   ============================================ */
.division {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* La última columna no debe quedar pegada al borde redondeado/scrolleable
   del contenedor — sin esto, el último caracter (ej. la "S" de "PTS")
   se ve cortado visualmente contra la esquina. */
th:last-child,
td:last-child {
  padding-right: 20px;
}
.division-title {
  padding-right: 20px;
}

@media (max-width: 640px) {
  body {
    padding: 16px 10px 40px;
  }
  .brand-bar img.site-logo {
    height: 32px;
  }
  h1 {
    font-size: 1.25rem;
  }
  .subtitle {
    font-size: 0.78rem;
  }
  header {
    align-items: stretch;
  }
  .actions {
    justify-content: flex-start;
  }
  .actions button {
    flex: 1 1 auto;
  }
  /* Nav de ligas: scroll horizontal en vez de encimarse/envolverse mal */
  .sport-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-bottom: 14px;
  }
  .sport-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
  }
  th,
  td {
    padding: 8px 6px;
    font-size: 0.78rem;
  }
  th:last-child,
  td:last-child {
    padding-right: 14px;
  }
  .division-title {
    padding: 8px 12px;
    font-size: 0.72rem;
  }
  .badge {
    font-size: 0.58rem;
    padding: 1px 4px;
    margin-left: 3px;
  }
  /* Nombre completo del equipo: oculto en las tablas con código de 3
     letras (ya visible aparte) — así la tabla cabe sin scroll. */
  table:not(.soccer-table) .team-full {
    display: none;
  }
  td.team {
    white-space: nowrap;
  }
  /* La tabla de fútbol no tiene código corto: se trunca con "…" en vez
     de ocultar, para no perder el nombre del equipo. */
  .soccer-table td.team {
    max-width: 64px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .soccer-table th:nth-child(2) {
    text-align: left;
  }
  /* 10 columnas en total (rank+equipo+8 stats): necesita ser más
     compacta que las demás tablas para caber sin scroll. */
  .soccer-table th,
  .soccer-table td {
    padding: 6px 3px;
    font-size: 0.68rem;
  }
  .soccer-table th:last-child,
  .soccer-table td:last-child {
    padding-right: 8px;
  }
  .soccer-table .rank {
    width: 14px;
  }
  /* Red de seguridad: si aun así no cupieran en pantallas muy angostas
     (320px), que scrollee en vez de aplastarse ilegible. */
  .soccer-table {
    min-width: 340px;
  }
  /* Fila de calendario: apilar en vez de que se corte */
  .cal-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 12px;
  }
  .cal-date,
  .cal-match,
  .cal-result {
    min-width: 0;
    width: 100%;
    text-align: left;
  }
  .cal-result {
    font-size: 0.8rem;
  }
  /* Ficha de jugador: apilar foto + stats */
  .player-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px;
    gap: 14px;
  }
  .player-photo {
    width: 96px;
    height: 122px;
  }
  .player-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
    min-width: 0;
    width: 100%;
  }
  .stat-box {
    padding: 8px;
  }
  .stat-box .stat-value {
    font-size: 1.1rem;
  }
  .legend {
    gap: 10px;
    font-size: 0.7rem;
  }
  .help {
    font-size: 0.72rem;
    padding: 8px 10px;
  }
}

@media (max-width: 380px) {
  h1 {
    font-size: 1.1rem;
  }
  .brand-bar img.site-logo {
    height: 28px;
  }
  th,
  td {
    padding: 6px 6px;
    font-size: 0.76rem;
  }
  th:last-child,
  td:last-child {
    padding-right: 16px;
  }
}