/* =============================================================================
   Bar de Jugadores — estilos compartidos (TV y tablet)
   Verde oscuro del club, acentos dorados, Copperplate Gothic para títulos,
   nombres y canchas, e Inter para números y texto. Las fuentes vienen embebidas en fuentes.css.
   ============================================================================= */
:root {
  --fondo: #07261c;
  --fondo-2: #0b3d2e;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-borde: rgba(201, 162, 39, 0.28);
  --dorado: #c9a227;
  --dorado-claro: #e6c654;
  --crema: #f4ecd8;
  --texto: #f4ecd8;
  --texto-suave: rgba(244, 236, 216, 0.68);
  --verde: #39b06a;
  --amarillo: #f2c200;
  --rojo: #e04a3a;
  --azul: #4a97e8;
  --serif: 'Copperplate Gothic', 'Copperplate', 'Trajan Pro', Georgia, serif;
  --sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(ellipse at top, var(--fondo-2) 0%, var(--fondo) 60%, #041a13 100%);
  background-attachment: fixed;
  color: var(--texto);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button { font-family: inherit; }
.oculto { display: none !important; }

/* ---- Marca ---------------------------------------------------------------- */
.marca { display: flex; align-items: center; gap: 1.2vw; min-width: 0; }
.marca img { height: 9vh; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.marca h1 { font-family: var(--serif); font-weight: 700; margin: 0; line-height: 1; color: var(--dorado-claro); letter-spacing: .06em; white-space: nowrap; }
.marca small { display: block; font-family: var(--sans); font-weight: 400; color: var(--texto-suave); letter-spacing: .12em; text-transform: uppercase; margin-top: .4em; }

/* ---- Chips de estado de cancha ------------------------------------------- */
.canchas { display: flex; gap: .8vw; flex-wrap: wrap; justify-content: flex-end; }
.cancha {
  border: 1px solid var(--panel-borde); border-radius: 999px; padding: .35em .9em;
  background: var(--panel); white-space: nowrap; display: inline-flex; align-items: center; gap: .5em;
}
.cancha b { font-family: var(--serif); font-weight: 700; color: var(--dorado-claro); font-size: .95em; letter-spacing: .05em; }
.cancha .punto { width: .55em; height: .55em; border-radius: 50%; background: var(--texto-suave); flex: none; }
.cancha.ok .punto { background: var(--verde); }
.cancha.atraso .punto { background: var(--amarillo); }
.cancha.muy-atrasada .punto { background: var(--rojo); }
.cancha.sin-dato { opacity: .6; }

/* ---- Estados ---------------------------------------------------------------- */
.verde    { --color-estado: var(--verde); }
.amarillo { --color-estado: var(--amarillo); }
.rojo     { --color-estado: var(--rojo); }
.azul     { --color-estado: var(--azul); }

@keyframes parpadeo-suave {
  0%, 100% { background-color: rgba(224, 74, 58, 0.24); }
  50%      { background-color: rgba(224, 74, 58, 0.06); }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Avisos pequeños ------------------------------------------------------ */
.aviso {
  display: inline-flex; align-items: center; gap: .5em; border-radius: 6px; padding: .3em .7em;
  color: var(--texto-suave); border: 1px solid transparent;
}
.aviso.alerta { color: #ffd9d4; border-color: rgba(224,74,58,.5); background: rgba(224,74,58,.15); }
.aviso.suave { border-color: var(--panel-borde); background: var(--panel); }

/* ---- Pantalla de acceso (falta la llave) --------------------------------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.acceso .caja { max-width: 560px; border: 1px solid var(--panel-borde); background: var(--panel); border-radius: 16px; padding: 32px; }
.acceso h2 { font-family: var(--serif); color: var(--dorado-claro); font-size: 2rem; margin: 0 0 .5em; }
.acceso p { color: var(--texto-suave); line-height: 1.5; }
.acceso code { background: rgba(0,0,0,.3); padding: .2em .4em; border-radius: 4px; }