@charset "UTF-8";
/* ===== COPA LIBERTADORES: CSS unificado (INDEX + JUEGO + FINAL) ===== */

/* Paleta */
:root{
  --lib-borgoña:  #7b1e1e;  /* fondo general / header / bloque instrucciones */
  --lib-negro:    #1b1b1b;  /* título */
  --lib-dorado:   #c5a236;  /* subtítulo */
  --lib-hueso:    #f2f2f2;  /* botón INICIAR */
  --lib-blanco:   #ffffff;
}

html, body{
  margin:0; padding:0; width:100%; height:100%;
}

/* ===== Pantalla inicio (INDEX) ===== */
.pantalla-inicio-nueva{
  background-color: var(--lib-borgoña);
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  font-family:'Inter', sans-serif;
}

.header-libertadores{
  background-color: var(--lib-borgoña);
  display:flex; flex-direction:column; align-items:center;
  padding:1.5rem 0 .5rem; width:100%;
}

.logo-libertadores{ width:220px; max-width:100%; margin:0 auto 12px; display:block; }
.logo-jueguitos{ max-width:100%; height:auto; }

.lema-libertadores{
  font-family:'League Spartan', sans-serif;
  font-size:14px; color:var(--lib-blanco);
  margin:0; text-align:center;
}

.bloque{ width:100%; text-align:center; padding:2rem 1rem; box-sizing:border-box; }

/* Título / Subtítulo index */
.titulo-libertadores{
  background-color: var(--lib-negro);
  color: var(--lib-blanco);
  font-family:'League Spartan', sans-serif;
  font-weight:900; /* Black */
  font-size:2.8rem;
}

.subtitulo-libertadores{
  background-color: var(--lib-dorado);
  color: #000000;
  font-family:'League Spartan', sans-serif;
  font-weight:700; /* Bold */
  font-size:2rem;
}

/* Instrucciones index */
.instrucciones-libertadores{
  background-color: var(--lib-borgoña);
  color: var(--lib-blanco);
  text-align:center; font-size:1.1rem; line-height:1.6;
  font-family:'Inter', sans-serif;
}
.instrucciones-libertadores h2{
  margin-top:0; font-weight:bold; font-size:1.6rem; color:var(--lib-blanco);
}
.instrucciones-libertadores p{ margin:.5rem 0; font-weight:400; }

/* Botón INICIAR (index) */
.btn-iniciar-nueva{
  background-color: var(--lib-hueso);
  color:#000;
  font-family:'Urbanist', sans-serif; font-weight:900; font-size:1.2rem;
  padding:1rem 3rem; border:none; margin:2rem auto; cursor:pointer;
  transition: background .3s ease; text-transform:uppercase;
}
.btn-iniciar-nueva:hover{ background-color:#ddd; }

/* ===== COPA LIBERTADORES — PANTALLA DE JUEGO ===== */

/* Paleta (ya definida antes, se repite aquí por claridad) */
:root{
  --lib-borgoña:  #7b1e1e; /* fondo general */
  --lib-negro:    #1b1b1b; /* barras/paneles */
  --lib-dorado:   #c5a236; /* subtítulo (ya en index) */
  --lib-hueso:    #f2f2f2; /* neutro (botones claros) */
  --lib-blanco:   #ffffff;

  /* acciones */
  --lib-verde:    #27ae60; /* SÍ */
  --lib-rojo:     #c62828; /* NO (coherente con otros juegos) */
}

/* Contenedor del juego */
.zona-juego-libertadores{
  background: var(--lib-borgoña);
  min-height: calc(100vh - 0px);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 30px;
  padding: 16px;
  box-sizing: border-box;
}

/* Pregunta: “¿Es campeón?” */
.zona-juego-libertadores .pregunta{
  margin: 10px auto 18px;
  text-align: center;
  font-family: 'Inter', sans-serif;   /* cambio a Inter */
  font-weight: 400;                   /* regular, igual a NFL */
  color: var(--lib-blanco);
  font-size: 1.4rem;
}

/* Bloque del equipo (tres franjas) */
.bloque-equipo{
  width: 96%;
  max-width: 980px;
  margin: 0 auto 22px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0;
}

/* País */
.bloque-equipo .pais{
  background: var(--lib-negro);
  color: var(--lib-blanco);
  text-align: center;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;  /* Inter */
  font-weight: 700;                  /* Bold */
  font-size: 0.95rem;
  letter-spacing: .03em;
  text-transform: uppercase;         /* siempre en altas */
}

/* Franja central: nombre del equipo (logo HTML) */
.bloque-equipo .equipo{
  /* colores (bg/text/stroke) los inyecta juego.js */
  text-align: center;
  padding: 18px 14px;
  font-family: 'Prata', serif;  /* << exclusiva para equipos */
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.1;
  user-select: none;
  /* fallback al stroke desde JS: webkitTextStroke; aquí añadimos sombra suave */
  text-shadow: 0 0 0 var(--lib-negro);
}

/* Participaciones */
.bloque-equipo .participaciones{
  background: var(--lib-negro);
  color: var(--lib-blanco);
  text-align: center;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;  /* Inter */
  font-weight: 700;                  /* Bold */
  font-size: 0.95rem;
  letter-spacing: .03em;
  text-transform: uppercase;         /* siempre en altas */
}

/* Botonera SÍ/NO */
.opciones{
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 6px auto 8px;
  width: 100%;
}

/* Estilo base de botones de juego (coherente con familia de juegos) */
.opciones .btn-si,
.opciones .btn-no{
  border: none;
  padding: 14px 28px;
  min-width: 160px;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}

/* SÍ (verde, texto negro) */
.opciones .btn-si{
  background: var(--lib-verde);
  color: #000000;
}
.opciones .btn-si:hover{ transform: scale(1.02); }

/* NO (rojo, texto blanco) */
.opciones .btn-no{
  background: var(--lib-rojo);
  color: #ffffff;
}
.opciones .btn-no:hover{ transform: scale(1.02); }

/* Estados de clic/disabled por si los aplicas desde JS */
.opciones .btn-si:active,
.opciones .btn-no:active{ filter: brightness(.95); }
.opciones .btn-si[disabled],
.opciones .btn-no[disabled]{ opacity:.6; cursor: default; transform:none; }

/* Pequeñas responsivas */
@media (max-width: 480px){
  .zona-juego-libertadores .pregunta{ font-size: 1.2rem; }
  .opciones .btn-si,
  .opciones .btn-no{
    min-width: 140px;
    padding: 12px 22px;
    font-size: 1rem;
  }
}

.pie-juego{
  display:flex;
  justify-content:center;
  margin:18px 0 28px;
}

.pie-juego .btn-rendirse{
  background:#000;
  color:#fff;
  font-family:'Urbanist', sans-serif;
  font-weight:900;
  font-size:1rem;       /* igual que NFL */
  padding:12px 28px;    /* igual que NFL */
  border:none;
  text-transform:uppercase;
  cursor:pointer;
  transition: opacity .2s ease;
}

.pie-juego .btn-rendirse:hover{ opacity:.9; }

/* ===== Final (botones) — Libertadores (idéntico a NFL en layout) ===== */
.botones-final{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin-top:20px;
}

/* Botón genérico final */
.boton-final{
  background: var(--lib-hueso);   /* antes: #f4f4f4 */
  color: #111;
  font-family:'Urbanist', sans-serif;
  font-weight:900;
  font-size:1.2rem;
  border:none;
  padding:15px 0;
  width:280px;
  text-align:center;
  cursor:pointer;
  transition: background .2s ease;
}
.boton-final:hover{
  background:#ddd;                /* hover equivalente a NFL */
}

/* (Opcional) variantes por si algún día quieres diferenciar */
#btn-compartir.boton-final { /* mismo estilo que NFL */ }
#btn-reintentar.boton-final { /* mismo estilo que NFL */ }