/* ══════════════════════════════════════════════════════════════════════════════
   CARNETS ESTUDIANTILES (NFC) — modal de escanear/vincular + fila de configuración
   ══════════════════════════════════════════════════════════════════════════════
   Solo estiliza lo que vive DENTRO del modal canónico (.modal-overlay/.modal-box);
   el marco, el cierre y la animación los pone panels.css. Todo el color sale de los
   tokens de base.css (nada de hex nuevos). */

.card-reader {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 18px 0 16px;
  padding: 26px 18px;
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-1));
  text-align: center;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}

.card-reader-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: card-pulse 2s var(--ease-out) infinite;
}
.card-reader-ico svg { width: 30px; height: 30px; }

@keyframes card-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.card-reader-status {
  margin: 0; padding: 0;
  font-size: .86rem; line-height: 1.45; color: var(--text-2);
  max-width: 34ch;
}

/* Estado de error/aviso: el latido se detiene y el marco pasa a rojo suave. */
.card-reader-error {
  border-color: color-mix(in srgb, var(--red) 45%, var(--border));
  background: var(--red-subtle);
}
.card-reader-error .card-reader-ico {
  color: var(--red-soft);
  background: var(--danger-dim);
  animation: none;
}
.card-reader-error .card-reader-status { color: var(--red-soft); }

/* ── Lector USB / teclado ────────────────────────────────────────────────────
   No hay campo de texto: las pulsaciones se capturan a nivel de documento
   (keyboardWedgeStart). Este es el eco de lo que se lleva tecleado, para que se
   vea que el lector "está escribiendo" — y para poder corregir a mano. */
.card-reader-typed {
  margin: 0; min-height: 1.2em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem; font-weight: 700; letter-spacing: .14em;
  color: var(--accent-bright);
}
.card-reader-typed:empty { min-height: 0; }
.card-reader-hint { margin: 0; font-size: .74rem; color: var(--text-3); }

.card-result { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.card-result-msg { margin: 0; font-size: .84rem; color: var(--text-3); text-align: center; }

/* ── Perfil → Configuración ──────────────────────────────────────────────────── */
.card-config-btn { flex: none; margin-top: 2px; padding: 9px 16px; }

@media (max-width: 600px) {
  .card-reader { padding: 30px 14px; }
  #cardConfigItem { flex-direction: column; align-items: stretch; gap: 12px; }
  .card-config-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .card-reader-ico { animation: none; }
}