/* ══════════════════════════════════════════════════════════════════════════════
   CÓDIGOS DE RECOMPENSA — listado del panel docente + página de canje (?code=…)
   ══════════════════════════════════════════════════════════════════════════════
   El listado NO trae layout propio: reutiliza .student-row / .student-row-* de
   board.css y .prefect-badge de shop.css. Aquí solo van los matices (badges con
   texto, estado inactivo) y la página standalone. Colores siempre por tokens. */

/* ── Listado ─────────────────────────────────────────────────────────────────── */
.code-row-open { cursor: pointer; }
.code-row-open:hover .student-row-name { color: var(--accent-bright); }

/* Badge con texto (usos restantes, tiempo restante, ×N canjes). Las badges de rol
   son solo icono; estas añaden un número, así que necesitan aire y alineación. */
.code-badge-text {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px 1px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .68rem; font-weight: 700;
  color: var(--text-2);
  vertical-align: middle;
}
.code-badge-text .ico { width: .9em; height: .9em; }

/* Expirado / agotado: el código sigue en la lista (su asistencia importa) pero
   se lee como apagado. */
.prefect-badge.is-expired { color: var(--red-soft); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.code-row.is-inactive .student-row-icon,
.code-row.is-inactive .student-row-name { opacity: .55; }

/* ── Página de canje (standalone) ────────────────────────────────────────────── */
/* Oculta TODO lo demás: header, navs, vistas, footer, modales. Solo quedan la
   página y el toast. Es la razón de que no haga falta bootear la app. */
body.redeem-mode > *:not(#redeemPage):not(.toast) { display: none !important; }
body.redeem-mode { overflow-y: auto; }

#redeemPage {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 28%, var(--accent-dim), transparent 60%),
    var(--bg);
}
.redeem-inner {
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}

/* La zona de lectura es la MISMA pieza del modal del carnet (cards.css): solo se
   agranda, porque aquí es el protagonista de la pantalla. */
#redeemPage .card-reader { width: 100%; margin: 0; padding: 40px 22px; }
#redeemPage .card-reader-ico { width: 96px; height: 96px; }
#redeemPage .card-reader-ico svg { width: 46px; height: 46px; }
#redeemPage .card-reader-status { font-size: 1rem; color: var(--text-1); font-weight: 600; }
#redeemPage .card-reader-typed { font-size: 1.1rem; }

.redeem-label {
  margin: 4px 0 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.1;
  letter-spacing: .02em; color: var(--text-1);
}
.redeem-rewards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.redeem-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .82rem; font-weight: 600; color: var(--text-1);
}
.redeem-chip .ico, .redeem-chip .coin-icon { width: 1.05em; height: 1.05em; }
.redeem-meta { margin: 0; font-size: .78rem; color: var(--text-3); }

/* Resultado del último canje: nombre + lo que recibió. */
.redeem-result:empty { display: none; }
.redeem-ok {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--green) 40%, var(--border));
  border-radius: var(--radius-md);
  background: var(--green-dim);
  animation: redeem-pop .35s var(--ease-spring);
}
.redeem-ok-name {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 1rem; font-weight: 700; color: var(--green-bright);
}
.redeem-ok-detail { margin-top: 4px; font-size: .82rem; color: var(--text-2); }

@keyframes redeem-pop {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@media (max-width: 600px) {
  #redeemPage .card-reader { padding: 34px 16px; }
  #redeemPage .card-reader-ico { width: 84px; height: 84px; }

  /* Las acciones del código sí se muestran en móvil (a diferencia de la fila de
     estudiante, que las manda al sheet "⋯"): son solo tres y no hay sheet propio.
     Ocupan el ancho completo de su línea, repartido a partes iguales, en vez de
     quedar apelotonadas a la derecha. */
  .code-row .student-row-controls { flex-basis: 100%; }
  .code-row .student-row-extra { display: flex; width: 100%; gap: 8px; }
  .code-row .student-row-extra .btn-ach { flex: 1 1 0; width: auto; }
}