:root{
  --accent:#E30613; --highlight:#FFED00; --bg:#f4f4f4; --card:#ffffff; --text:#222;
  --muted:#6b6b6b; --line:#e6e6e6; --pending:#f3f3f3; --live:#fff8c6; --finished:#dfffd6;
  --shadow:0 4px 12px rgba(0,0,0,.1);
}

/* Base */
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}

/* Header + Nav (compartido) */
header{background:var(--card);border-bottom:3px solid var(--accent)}
.header-inner{max-width:1200px;margin:0 auto;padding:16px}
.header-inner h1{margin:0;text-align:center;color:var(--accent);font-size:26px;letter-spacing:.3px}

nav{background:var(--card);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}
.nav-bar{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:30px;height:30px;object-fit:contain}
.brand span{font-weight:700}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.nav-links a{padding:8px 10px;text-decoration:none;color:var(--text);font-weight:700;border:1px solid var(--line)}
.nav-links a:hover{background:var(--highlight);border-color:var(--highlight)}

/* Layout base y paneles */
.container{max-width:1200px;margin:20px auto;padding:0 16px}
.panel{background:var(--card);border:1px solid var(--line);padding:0}
.panel-header{background:#2f2f2f;color:#fff;text-transform:uppercase;font-weight:800;letter-spacing:.5px;font-size:14px;padding:12px 16px;border-bottom:2px solid var(--accent)}
.panel-body{padding:16px}

/* Tarjetas / partidos */
.card{border:1px solid var(--line);padding:14px;margin-bottom:14px;background:var(--card)}
.card.live{background:var(--live)}
.card.finished{background:var(--finished)}
.card.pending{background:var(--pending)}

.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.linkless{text-decoration:none;color:inherit}
.linkless:hover{filter:brightness(0.98)}
.team{display:flex;align-items:center;gap:10px}
.team img{width:52px;height:52px;object-fit:contain}
.vs{color:var(--muted);font-weight:800}
.scoreline{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:900;font-size:22px}

/* Barras amarillas centradas */
.info-bar,.fixture .meta{
  grid-column:1 / -1; margin-top:10px; background:var(--highlight); padding:8px 10px;
  font-weight:700; border:1px solid #e2d100; display:flex; justify-content:center; align-items:center;
  text-align:center; gap:14px; flex-wrap:wrap; width:100%; box-sizing:border-box;
}
.status{text-align:center;margin-top:8px;color:#444;font-weight:800}

/* Grids principales */
.top-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){.top-grid{grid-template-columns:1fr 1fr}}
.mid-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px}
@media (min-width:1100px){.mid-grid{grid-template-columns:2fr 1fr}}

/* Calendario (fixture) */
.fixture{border:1px solid var(--line);background:var(--card);margin-bottom:12px;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:14px}
.fixture .team{gap:10px}

/* Tabla */
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--line)}
th{background:#2f2f2f;color:#fff;text-transform:uppercase;font-size:12px;letter-spacing:.4px;border-bottom:2px solid var(--accent)}
.team-cell{display:flex;align-items:center;gap:10px}
.team-cell img{width:24px;height:24px;object-fit:contain}

/* Próximos partidos (sidebar) */
.next-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);padding:10px;margin-bottom:10px;background:#fff}
.next-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.25}
.next-mid .date{font-weight:800}
.next-mid .time{margin-top:2px}
.next-mid .venue{margin-top:2px;font-size:12px;color:#444}
.next-item img{width:28px;height:28px;object-fit:contain}

/* Equipos (grid) */
.teams-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){.teams-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.teams-grid{grid-template-columns:1fr 1fr 1fr}}
.team-card{border:1px solid var(--line);background:var(--card);text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px;padding:12px}
.team-card:hover{filter:brightness(0.97)}
.team-card img{width:48px;height:48px;object-fit:contain}
.team-card h4{margin:0;font-size:16px}

/* Ficha de equipo (players) */
.team-hero{display:flex;align-items:center;gap:14px;margin:6px 0 12px}
.team-hero img{width:64px;height:64px;object-fit:contain}
.players-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.players-grid{grid-template-columns:1fr 1fr}}
.player-card{border:1px solid var(--line);background:#fff;padding:12px;border-radius:8px;display:grid;grid-template-columns:auto 1fr;gap:12px}
.player-card img{width:96px;height:96px;object-fit:cover;border-radius:8px;background:#f2f2f2}
.player-name{font-weight:800;font-size:18px;margin:2px 0}
.player-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.player-meta div{background:#fafafa;border:1px solid var(--line);border-radius:6px;padding:6px;font-size:13px}
.muted{color:#666}

/* Admin (panel) */
.row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.section{border:1px solid var(--line);border-radius:6px;padding:12px;margin:12px 0;background:#fff}
.token-bar{background:#fafafa;border:1px solid var(--line);padding:10px;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:950px){.grid-2{grid-template-columns:1fr 1fr}}
.hidden{display:none}
.pill{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:#f7f7f7;font-size:12px}
.caption{font-size:12px;color:#666}
button,input,select,textarea{padding:8px;border:1px solid var(--line);border-radius:4px}
button{cursor:pointer;background:var(--accent);color:#000;font-weight:700}
button.secondary{background:#0a7a0a}
button.warn{background:#b5050f}

/* --- Página partido.html --- */
.hero{max-width:1100px;margin:20px auto;padding:0 16px;text-align:center}
.hero h1{font-size:28px;margin:10px 0;color:var(--accent)}
.big-logos{display:flex;gap:20px;align-items:center;justify-content:center;margin:10px 0 20px}
.big-logos img{width:140px;height:140px;object-fit:contain}
.divider{font-size:40px;color:#666;font-weight:900}
.details{max-width:1100px;margin:0 auto 20px;padding:0 16px}
.map-wrap{max-width:1100px;margin:0 auto 30px;padding:0 16px}
.map{width:100%;height:420px;border:0}

/* Header flex para partido */
.header-flex{display:flex;align-items:center;justify-content:space-between;gap:12px}
.back-link{text-decoration:none;border:1px solid var(--line);padding:6px 10px;background:var(--card);color:var(--text)}
.spacer{width:84px}

/* Tabla clave-valor en partido */
.kv-table{width:100%;border-collapse:collapse}
.kv-table th{ text-align:left; border-bottom:1px solid var(--line); padding:12px; width:180px; }
.kv-table td{ border-bottom:1px solid var(--line); padding:12px; }

/* Responsive menor */
@media (max-width:600px){
  .header-inner h1{font-size:22px}
  .brand span{display:none}
}

/* Compacta el badge y evita apariencia de “franja” */
.topbar { align-items: stretch; }
.api-badge { max-width: 100%; width: auto; white-space: nowrap; }
@media (max-width: 720px){
  .api-badge { white-space: normal; }
}

/* Evita solapamiento del icono de time con el select adyacente */
input[type="time"]{
  padding-right: 2.25rem; /* espacio para el indicador */
}
input[type="time"]::-webkit-calendar-picker-indicator{
  margin-left: .25rem;
}
.row.cols-3 > div { min-width: 0; } /* previene desbordes en grid */

/* Fila destacada para el detalle de sets */
.sets-row{
  margin: 8px 0 0;
  padding: 8px 12px;
  text-align: center;
  font-weight: 800;
  border-radius: 8px;
  background: #fff9db;      /* amarillo claro para contraste */
}

/* Si quieres matiz por estado (opcional) */
/*.card.finished .sets-row { background: #eefbe7; } /* verde muy claro */
.card.live     .sets-row { background: #fff3cd; } /* ámbar claro */

/* ===== Alineaciones (front) ===== */
.lineups{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.lu-card{background:#fff;border:1px solid #e6e7ea;border-radius:10px;padding:10px}
.lu-title{font-weight:800;text-align:center;margin:2px 0 8px}
.lu-item{display:flex;justify-content:space-between;gap:10px;padding:8px;border-bottom:1px dashed #eee}
.lu-item:last-child{border-bottom:0}
.lu-number{font-weight:800}
.lu-empty{color:#777;text-align:center;padding:10px}

/* ===== Alineaciones ===== */
.lineups-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 820px){
  .lineups-grid{ grid-template-columns: 1fr; }
}
.lu-card{ display:flex; flex-direction:column; gap:10px; }
.lu-title{ text-align:center; font-weight:700; }

/* Cancha */
.lu-field{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 2;             /* rectangular y responsiva */
  border:1px solid #e6e7ea;
  border-radius:12px;
  background:
    linear-gradient(180deg,#f7fff8 0 50%, #f2f8ff 50% 100%); /* dos medios distintos */
  overflow:hidden;
}
/* “Red” central */
.lu-field::after{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:2px; background:#c7ccd1;
}

/* Marcador (número) + etiqueta (nombre) */
.lu-marker{
  position:absolute; transform:translate(-50%,-50%);
  text-align:center;
}
.lu-dot{
  width:36px; height:36px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.lu-label{
  margin-top:6px;
  font-size:12px; font-weight:600;
  background:#fff; padding:2px 8px; border-radius:8px;
  border:1px solid #eee;
  white-space:nowrap;
}

/* Colores de equipo (puedes cambiarlos) */
.lu-dot.home{ background:#1e3a8a; }   /* azul oscuro */
.lu-dot.away{ background:#047857; }   /* verde */

/* ==== Team page: tamaños de logos ==== */

  /* Logo grande en la cabecera del equipo */
  .team-hero #team-logo{
    width: clamp(96px, 12vw, 140px);
    height: clamp(96px, 12vw, 140px);
    object-fit: contain;
  }

  /* Logos de Próximos Partidos (más grandes que antes, pero menos que el logo de cabecera) */
  #team-upcoming .next-item img{
    width: clamp(42px, 6vw, 60px);
    height: clamp(42px, 6vw, 60px);
    object-fit: contain;
  }

  /* Un poco de respiración para el centro del ítem */
  #team-upcoming .next-item .next-mid{
    margin: 0 12px;
  }