/* Web pública de los torneos. Oscura y de la liga: el acento (--liga) lo inyecta cada página
   con los colores que el organizador cargó. Pensada para el teléfono primero: casi todo el
   tráfico llega de un link pegado en un grupo de WhatsApp. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --card: #161616;
  --card-2: #1c1c1c;
  --linea: rgba(255,255,255,0.09);
  --txt: #f4f4f4;
  --txt-2: #a0a0a0;
  --txt-3: #6e6e6e;
  --ok: #3ddc84;
  --no: #ff6b6b;
  --emp: #ffcc4d;
  --r: 14px;
  --r-lg: 20px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

/* ---------------------------------------------------------------- Encabezado */

.tw-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.tw-head-in {
  max-width: 940px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.tw-liga { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.tw-liga-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tw-liga-txt strong {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-liga-txt small {
  font-size: 12.5px; color: var(--txt-2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-entrar {
  flex-shrink: 0; font-size: 13.5px; font-weight: 600; padding: 7px 15px;
  border: 1px solid var(--linea); border-radius: 999px; color: var(--txt-2);
  transition: border-color .15s, color .15s;
}
.tw-entrar:hover { border-color: var(--liga-txt); color: var(--liga-txt); }

/* ---------------------------------------------------------------- Escudos */

.escudo {
  width: 34px; height: 34px; border-radius: 10px; object-fit: cover;
  background: var(--card-2); flex-shrink: 0; display: block;
}
.escudo-letra {
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: var(--liga-txt);
  background: linear-gradient(135deg, var(--liga) 0%, var(--liga-2) 100%);
  color: #fff;
}
.escudo-liga { width: 38px; height: 38px; border-radius: 11px; }
.escudo-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.escudo-lg { width: 76px; height: 76px; border-radius: 20px; font-size: 32px; }

/* ---------------------------------------------------------------- Estructura */

.tw-main { max-width: 940px; margin: 0 auto; padding: 18px 16px 60px; }
.tw-vacio { text-align: center; padding: 70px 20px; color: var(--txt-2); }
.tw-vacio h1 { font-size: 30px; margin: 0 0 8px; color: var(--txt); }

.tw-btn {
  display: inline-block; margin-top: 14px; padding: 11px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--liga), var(--liga-2));
}

/* ---------------------------------------------------------------- Portada del torneo */

.tw-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 22px 20px;
  background: var(--card); border: 1px solid var(--linea);
  margin-bottom: 18px;
}
.tw-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 0% 0%, var(--liga) 0%, transparent 62%);
  opacity: .17; pointer-events: none;
}
.tw-hero-in { position: relative; display: flex; gap: 16px; align-items: center; }
.tw-hero h1 {
  margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
.tw-hero-meta {
  margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 6px;
}
.tw-chip {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.07); color: var(--txt-2);
}
.tw-chip-vivo { background: color-mix(in srgb, var(--liga) 22%, transparent); color: var(--liga-txt); }
.tw-hero-desc { position: relative; margin: 14px 0 0; color: var(--txt-2); font-size: 14.5px; }

/* ---------------------------------------------------------------- Solapas */

.tw-tabs {
  display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tw-tabs::-webkit-scrollbar { display: none; }
.tw-tab {
  flex-shrink: 0; padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  color: var(--txt-2); background: var(--card); border: 1px solid var(--linea);
  transition: all .15s;
}
.tw-tab:hover { color: var(--txt); }
.tw-tab.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--liga), var(--liga-2));
}

/* ---------------------------------------------------------------- Selector de zona */

.tw-zonas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tw-zona {
  padding: 6px 13px; border-radius: 9px; font-size: 13px; font-weight: 600;
  background: var(--card); border: 1px solid var(--linea); color: var(--txt-2);
}
.tw-zona.on { color: var(--liga-txt); border-color: var(--liga-txt); }

/* ---------------------------------------------------------------- Bloques */

.tw-bloque {
  background: var(--card); border: 1px solid var(--linea);
  border-radius: var(--r); overflow: hidden; margin-bottom: 16px;
}
.tw-bloque-tit {
  padding: 13px 16px 11px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--txt-3);
  border-bottom: 1px solid var(--linea);
}

/* ---------------------------------------------------------------- Tabla de posiciones */

.tw-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tw-tabla th {
  padding: 9px 4px; font-size: 11px; font-weight: 700; color: var(--txt-3);
  text-transform: uppercase; letter-spacing: .05em; text-align: center;
  border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tw-tabla th:nth-child(2) { text-align: left; padding-left: 0; }
.tw-tabla td { padding: 10px 4px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tw-tabla tr:last-child td { border-bottom: none; }
.tw-pos {
  width: 34px; font-weight: 700; font-size: 13px; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
.tw-eq { text-align: left !important; padding-left: 0 !important; }
.tw-eq a, .tw-eq span.tw-eq-in { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tw-eq-nom {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 42vw;
}
.tw-tabla .tw-pts { font-weight: 800; color: var(--liga-txt); font-variant-numeric: tabular-nums; }
.tw-tabla .num { color: var(--txt-2); font-variant-numeric: tabular-nums; }
.tw-fila-clasifica { background: color-mix(in srgb, var(--liga) 9%, transparent); }
.tw-fila-clasifica .tw-pos { color: var(--liga-txt); }
.tw-abandono { opacity: .45; }
.tw-abandono .tw-eq-nom { text-decoration: line-through; }
.tw-corte td { border-bottom: 1px solid var(--liga-txt) !important; }
.tw-tabla-pie {
  padding: 9px 16px; font-size: 11.5px; color: var(--txt-3);
  border-top: 1px solid var(--linea);
}

/* En pantallas chicas se esconden las columnas de relleno: quedan PJ, DG y PTS. */
@media (max-width: 560px) {
  .tw-tabla .op { display: none; }
  .tw-eq-nom { max-width: 38vw; }
}

/* ---------------------------------------------------------------- Partidos */

.tw-jornada {
  padding: 12px 16px 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--txt-3);
}
.tw-part {
  display: block; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .12s;
}
.tw-part:last-child { border-bottom: none; }
.tw-part:hover { background: var(--card-2); }
.tw-part-cuando {
  font-size: 11.5px; color: var(--txt-3); margin-bottom: 7px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.tw-part-lado { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.tw-part-lado .nom {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-part-lado .gol {
  font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; min-width: 22px;
  text-align: right;
}
.tw-gana .nom, .tw-gana .gol { color: #fff; }
.tw-pierde .nom, .tw-pierde .gol { color: var(--txt-3); }
.tw-pierde .escudo { opacity: .55; }
.tw-part-pend .gol { color: var(--txt-3); font-size: 14px; font-weight: 600; }
.tw-eti {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2.5px 8px; border-radius: 999px;
}
.tw-eti-fin { background: rgba(255,255,255,0.08); color: var(--txt-2); }
.tw-eti-wo  { background: rgba(255,107,107,0.16); color: var(--no); }
.tw-eti-sus { background: rgba(255,204,77,0.16); color: var(--emp); }
.tw-eti-prog{ background: color-mix(in srgb, var(--liga) 20%, transparent); color: var(--liga-txt); }

/* ---------------------------------------------------------------- Goleadores */

.tw-gol-fila {
  display: flex; align-items: center; gap: 11px; padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tw-gol-fila:last-child { border-bottom: none; }
.tw-gol-pos {
  width: 24px; font-weight: 800; font-size: 13px; color: var(--txt-3);
  font-variant-numeric: tabular-nums; text-align: center; flex-shrink: 0;
}
.tw-gol-fila:nth-child(1) .tw-gol-pos, .tw-gol-fila:nth-child(2) .tw-gol-pos,
.tw-gol-fila:nth-child(3) .tw-gol-pos { color: var(--liga-txt); }
.tw-gol-datos { flex: 1; min-width: 0; }
.tw-gol-nom {
  font-weight: 600; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-gol-eq { font-size: 12.5px; color: var(--txt-3); }
.tw-gol-n {
  font-weight: 800; font-size: 19px; color: var(--liga-txt);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.tw-gol-n small { font-size: 11px; font-weight: 600; color: var(--txt-3); margin-left: 2px; }

/* ---------------------------------------------------------------- Noticias */

.tw-noti { padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tw-noti:last-child { border-bottom: none; }
.tw-noti h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.tw-noti-cuando { font-size: 11.5px; color: var(--txt-3); margin-bottom: 8px; }
.tw-noti p { margin: 0; color: var(--txt-2); font-size: 14.5px; white-space: pre-line; }
.tw-noti img { border-radius: 11px; margin-top: 11px; display: block; }
.tw-fijada {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--liga-txt); margin-bottom: 3px;
}

/* ---------------------------------------------------------------- Plantel */

.tw-plantel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px;
  background: rgba(255,255,255,0.05); }
.tw-jug {
  display: flex; align-items: center; gap: 11px; padding: 11px 16px; background: var(--card);
}
.tw-jug-n {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--card-2); font-weight: 800; font-size: 13px; color: var(--txt-2);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.tw-jug-datos { min-width: 0; flex: 1; }
.tw-jug-nom { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-jug-pos { font-size: 12px; color: var(--txt-3); }
.tw-jug-goles { font-size: 12.5px; font-weight: 700; color: var(--liga-txt); flex-shrink: 0; }

/* ---------------------------------------------------------------- Listas de tarjetas */

.tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tw-tarj {
  display: flex; align-items: center; gap: 13px; padding: 15px;
  background: var(--card); border: 1px solid var(--linea); border-radius: var(--r);
  transition: border-color .15s, transform .15s;
}
.tw-tarj:hover { border-color: var(--liga-txt); transform: translateY(-1px); }
.tw-tarj-datos { min-width: 0; flex: 1; }
.tw-tarj-nom { font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; }
.tw-tarj-sub { font-size: 13px; color: var(--txt-3); margin-top: 1px; }

/* ---------------------------------------------------------------- Ficha del partido */

.tw-marcador {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 26px 16px 22px;
}
.tw-marcador-eq { text-align: center; min-width: 0; }
.tw-marcador-eq .escudo { margin: 0 auto 9px; }
.tw-marcador-eq .nom {
  font-weight: 700; font-size: 15px; line-height: 1.25;
  overflow-wrap: anywhere;
}
.tw-marcador-num {
  font-size: 40px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tw-marcador-vs { font-size: 15px; font-weight: 700; color: var(--txt-3); }
.tw-ev { display: flex; gap: 8px; padding: 9px 16px; font-size: 14px; align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,0.05); }
.tw-ev:last-child { border-bottom: none; }
.tw-ev-min { width: 40px; color: var(--txt-3); font-size: 12.5px; flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
.tw-ev-eq { color: var(--txt-3); font-size: 12.5px; }
.tw-amarilla, .tw-roja {
  display: inline-block; width: 9px; height: 13px; border-radius: 2px; vertical-align: -1px;
  margin-right: 5px;
}
.tw-amarilla { background: var(--emp); }
.tw-roja { background: var(--no); }

/* ---------------------------------------------------------------- Pie */

.tw-pie { border-top: 1px solid var(--linea); margin-top: 30px; padding: 22px 16px 34px; }
.tw-pie-in {
  max-width: 940px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--txt-3);
}
.tw-pie a { color: var(--txt-2); font-weight: 600; }
.tw-pie-app {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea);
}
.tw-pie-app:hover { border-color: var(--liga-txt); color: var(--liga-txt) !important; }

/* ---------------------------------------------------------------- Migas */

.tw-migas { font-size: 13px; color: var(--txt-3); margin-bottom: 12px; }
.tw-migas a { color: var(--txt-2); }
.tw-migas a:hover { color: var(--liga-txt); }

/* ---------------------------------------------------------------- Aviso */

.tw-aviso {
  padding: 15px 17px; border-radius: var(--r); font-size: 14.5px; color: var(--txt-2);
  background: var(--card); border: 1px solid var(--linea); margin-bottom: 16px;
}
.tw-aviso strong { color: var(--txt); }

@media (min-width: 640px) {
  .tw-hero { padding: 28px 26px; }
  .tw-hero h1 { font-size: 31px; }
  .tw-main { padding: 24px 20px 70px; }
  .tw-marcador-num { font-size: 52px; }
  .tw-marcador-eq .nom { font-size: 17px; }
}