/* ═══════════════════════════════════════════════════════════════
   Mis check-ins — modal compartido (alumno y staff)
   Reusa la base .lfb-modal/.lfb-box de feedback.css; solo añade los
   estilos propios de la lista cronológica.
   ═══════════════════════════════════════════════════════════════ */
.mci-loading{ padding:30px 0; text-align:center }
.mci-spin{
  width:32px; height:32px; margin:0 auto;
  border:3px solid var(--border);
  border-top-color: var(--primary);
  border-radius:50%;
  animation: mci-spin 0.7s linear infinite;
}
@keyframes mci-spin{ to{ transform: rotate(360deg) } }

.mci-empty{ padding:40px 14px; text-align:center }

.mci-meta{
  font-size:.82rem;
  color: var(--text-d);
  margin: 2px 0 14px;
}

.mci-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mci-row{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 12px 14px;
}
.mci-head{
  display: flex;
  align-items: center;
  gap: 10px;
}
.mci-ico{ font-size:1.1rem; line-height:1 }
.mci-title{
  flex: 1;
  font-weight: 700;
  color: var(--text);
  font-size: .96rem;
}
.mci-time{
  font-size: .76rem;
  color: var(--text-d);
  white-space: nowrap;
}
.mci-ctx{
  margin-top: 6px;
  font-size: .75rem;
  color: var(--text-d);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .02em;
}
.mci-resp{
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  font-size: .92rem;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce){
  .mci-spin{ animation-duration: 0s }
}