/* Resultados públicos de disfraces y postres. Lo de fuera (paleta, cabecera,
   paneles) viene de /comun/estilos.css. */

.intro {
  color: var(--tinta-suave);
  margin: 0 0 18px;
  font-size: 15px;
}

.grupo-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.grupo-cab h2 { font-size: 18px; }

.estado {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.estado.closed  { background: var(--oro-fondo); color: var(--oro-tinta); }
.estado.open    { background: #dcfce7; color: #14622f; }
.estado.pending { background: var(--fondo); color: var(--tinta-suave); }

/* ------------------------------------------------------------ clasificación */

.tabla { display: grid; gap: 8px; }

.fila {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
}

.puesto {
  font-family: Outfit, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--tinta-suave);
  text-align: center;
}

/* El podio, con el oro de la casa para el primero. */
.fila.p1 { border-color: var(--oro-borde); background: var(--oro-tenue); }
.fila.p1 .puesto { color: var(--oro); font-size: 24px; }
.fila.p2 { border-color: #cfd6e8; }
.fila.p2 .puesto { color: #8a93ad; }
.fila.p3 { border-color: #e6d3c0; }
.fila.p3 .puesto { color: #b0793f; }

.quien { font-weight: 700; color: var(--titulo); }
.detalle { font-size: 13px; color: var(--tinta-suave); }

.nota {
  font-family: Outfit, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* --oro-tinta y no --oro: el oro es superficie, como tinta sobre blanco se
   quedaba en 2,2 de contraste. */
.oros { font-size: 13px; color: var(--oro-tinta); }

/* Entrada escalonada de las filas, solo al pintar. */
.fila {
  animation: fila-entra 300ms var(--salida) backwards;
}
.fila:nth-child(1) { animation-delay: 0ms; }
.fila:nth-child(2) { animation-delay: 40ms; }
.fila:nth-child(3) { animation-delay: 80ms; }
.fila:nth-child(4) { animation-delay: 120ms; }
.fila:nth-child(5) { animation-delay: 160ms; }
.fila:nth-child(n+6) { animation-delay: 200ms; }

@keyframes fila-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fila { animation: none; }
}

@media (max-width: 520px) {
  .fila { grid-template-columns: 32px 1fr auto; padding: 10px; gap: 9px; }
  .nota { font-size: 17px; }
}