/* ============================================================
   LA JUGADA SONSONEÑA  -  Estilos
   Tema: deportivo / fútbol  ·  rojo · verde · oro
   ============================================================ */

@import url('fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');

:root{
  --rojo:        #d62828;
  --rojo-osc:    #b71c1c;
  --rojo-vs:     #c0102e;
  --verde:       #1b7a4d;
  --verde-osc:   #14613c;
  --oro:         #e8b73a;
  --oro-claro:   #f6d56b;
  --oro-osc:     #c9981f;
  --crema:       #faf6ef;
  --gris-card:   #f4f5f5;
  --gris-borde:  #e7e7e7;
  --texto:       #2b2b2b;
  --texto-suave: #8a8a8a;
  --sombra:      0 6px 18px rgba(0,0,0,.08);

  --ff-display:  'Avenir LT Pro', 'Bebas Neue', sans-serif;
  --ff-cond:     'Avenir LT Pro', 'Barlow Condensed', sans-serif;
  --ff-body:     'Avenir LT Pro', 'Barlow', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:var(--ff-body);
  color:var(--texto);
  background:
    radial-gradient(circle at 12% 8%, rgba(214,40,40,.06), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(27,122,77,.06), transparent 40%),
    #fcfbf8;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:560px; margin:0 auto; padding:0 0 60px; }

/* ---------------- Cabecera roja ---------------- */
.cab{
  background: url('../fondo.png') center/cover no-repeat, var(--rojo);
  padding:26px 20px 18px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cab::after{ /* balón decorativo difuso */
  content:""; position:absolute; right:-40px; top:-40px;
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), transparent 60%);
}
.logo{
  font-family:var(--ff-display);
  color:#fff; line-height:.82; letter-spacing:1px;
  text-shadow:2px 3px 0 rgba(0,0,0,.18);
}
.logo img{
  display:block; margin:0 auto; width:100%; max-width:300px; height:auto;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.18));
}
.logo .l1{ display:block; font-size:18px; color:var(--oro-claro); transform:rotate(-4deg); }
.logo .l2{ display:block; font-size:58px; }
.logo .l3{ display:block; font-size:30px; color:#fff; transform:rotate(-2deg); margin-top:-6px; }
.cab .nota{
  color:rgba(255,255,255,.85); font-size:11px; line-height:1.45;
  max-width:380px; margin:12px auto 0;
}

/* ---------------- Franja verde/oro ---------------- */
.franja{
  height:14px;
  background:
    repeating-linear-gradient(90deg,
      var(--verde) 0 26px, var(--oro) 26px 52px);
}

/* ---------------- Barra de estado ---------------- */
.estado{
  display:flex; align-items:center; justify-content:space-between;
  background:#eceff0; color:var(--texto-suave);
  font-family:var(--ff-cond); font-weight:600; font-size:14px;
  padding:9px 18px; letter-spacing:.3px;
}
.estado .vivo{ display:flex; align-items:center; gap:7px; color:var(--verde); }
.estado .dot{ width:9px; height:9px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 0 0 rgba(27,122,77,.5); animation:pulso 1.6s infinite; }
@keyframes pulso{
  0%{ box-shadow:0 0 0 0 rgba(27,122,77,.45); }
  70%{ box-shadow:0 0 0 8px rgba(27,122,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(27,122,77,0); }
}

/* ---------------- Marcador / VS ---------------- */
.marcador{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:6px; padding:22px 18px 8px;
}
.equipo{ text-align:center; }
.equipo .pill{
  display:inline-block; font-family:var(--ff-cond); font-weight:700;
  font-size:14px; letter-spacing:1px; color:#fff;
  padding:5px 18px; border-radius:20px; margin-bottom:12px;
}
.equipo.oro   .pill{ background:var(--oro);   color:#5b4407; }
.equipo.verde .pill{ background:var(--verde); }

.tarjeta-lider{
  background:#fff; border:3px solid; border-radius:18px;
  padding:16px 10px 12px; box-shadow:var(--sombra);
}
.equipo.oro   .tarjeta-lider{ border-color:var(--oro); }
.equipo.verde .tarjeta-lider{ border-color:var(--verde); }

.avatar{
  width:86px; height:86px; border-radius:50%; margin:0 auto 8px;
  background:#f1f1f1 center/cover no-repeat;
  border:3px solid; display:flex; align-items:center; justify-content:center;
  color:var(--texto-suave); font-size:11px; font-family:var(--ff-cond);
  position:relative;
}
.equipo.oro   .avatar{ border-color:var(--oro-claro); background-color:#fdf3d6; }
.equipo.verde .avatar{ border-color:#9fd3b9; background-color:#e6f4ec; }
.avatar .mini-balon{ position:absolute; right:-2px; bottom:-2px; font-size:16px; }

.lider-rol{ font-family:var(--ff-cond); font-weight:700; font-size:13px;
  color:var(--texto-suave); text-transform:uppercase; letter-spacing:.5px; }
.lider-nombre{ font-weight:600; font-size:15px; margin-top:1px; }

.goles{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--rojo); color:#fff; font-family:var(--ff-cond); font-weight:700;
  padding:6px 16px; border-radius:20px; margin-top:12px; font-size:15px;
  box-shadow:0 4px 10px rgba(214,40,40,.3);
}
.goles .num{ font-size:18px; }

.vs-wrap{
  display:flex; flex-direction:column; align-items:center;
  align-self:center;
}
.vs{
  width:46px; height:46px; border-radius:50%;
  background:var(--rojo-vs); color:#fff;
  font-family:var(--ff-display); font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(192,16,46,.45);
}
.vs-flecha{
  position:relative; width:4px; height:62px; margin-top:7px;
  background:var(--rojo); border-radius:2px;
}
.vs-flecha::after{
  content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  border-left:9px solid transparent; border-right:9px solid transparent;
  border-top:13px solid var(--rojo);
}

/* ---------------- Encabezados de sección ---------------- */
.sec-head{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-cond); font-weight:700; color:#fff;
  font-size:18px; letter-spacing:.5px;
  padding:8px 22px 8px 16px;
  margin:26px 0 14px 18px;
  border-radius:0 22px 22px 0;
  position:relative;
}
.sec-head.verde{ background:var(--verde); }
.sec-head.rojo { background:var(--rojo);  }
.sec-head .ico{ font-size:20px; }
.sec-head .ico-bota{ display:inline-flex; align-items:center; color:var(--oro-claro); }
.sec-head .ico-bota svg{ display:block; }

/* ---------------- Columnas zona ---------------- */
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 14px; }

/* fila genérica (asistente / jugador) */
.fila{
  display:flex; align-items:center; gap:9px;
  background:var(--gris-card); border:1px solid var(--gris-borde);
  border-radius:14px; padding:8px 10px; margin-bottom:9px;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.fila:hover{ box-shadow:var(--sombra); }

/* circulito de color por zona */
.bolita{ width:30px; height:30px; border-radius:50%; flex:0 0 30px;
  background:center/cover no-repeat #ddd; border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.05); }
.zona-oro   .bolita{ background-color:var(--oro-claro); box-shadow:0 0 0 2px var(--oro); }
.zona-verde .bolita{ background-color:#9fd3b9; box-shadow:0 0 0 2px var(--verde); }

.fila .nom{ flex:1; font-size:13px; font-weight:500; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; }
.fila .balon{ font-size:15px; opacity:.85; }

/* posición (#) en jugadores */
.pos{ font-family:var(--ff-cond); font-weight:700; font-size:14px; width:22px;
  text-align:center; flex:0 0 22px; }
.zona-oro   .pos{ color:var(--oro-osc); }
.zona-verde .pos{ color:var(--verde); }

/* puntos al lado del balón */
.pts{ font-family:var(--ff-cond); font-weight:700; font-size:15px; min-width:20px;
  text-align:right; }
.zona-oro   .pts{ color:var(--oro-osc); }
.zona-verde .pts{ color:var(--verde); }

/* medallas top 3 */
.fila.top1 .pos::before{ content:"🥇 "; }
.fila.top2 .pos::before{ content:"🥈 "; }
.fila.top3 .pos::before{ content:"🥉 "; }
.fila.top1{ background:linear-gradient(90deg,#fff8e1,#fff); border-color:#f3e2a8; }

.vacio{ text-align:center; color:var(--texto-suave); font-size:13px;
  padding:18px 8px; grid-column:1/-1; }

/* destello al cambiar puntos */
@keyframes flash{ 0%{ background:#fff6cf; } 100%{ background:var(--gris-card); } }
.fila.cambio{ animation:flash 1.1s ease; }

/* ---------------- Pie / acceso admin ---------------- */
.pie{ text-align:center; margin-top:30px; font-size:12px; color:var(--texto-suave); }
.pie a{ color:var(--rojo); text-decoration:none; font-weight:600; }

/* responsive muy chico */
@media (max-width:380px){
  .logo .l2{ font-size:48px; }
  .avatar{ width:70px; height:70px; }
}