/* =============================================================================
   MOVER ALUMNOS  (fusionar grupos desde Cursos)
   -----------------------------------------------------------------------------
   · ma-  MoverAlumnosModal.razor, abierto desde la fila del curso en /courses.
   Verde lo que se pasa al grupo nuevo, gris lo que se queda como historial y
   rojo lo que se anula; el ámbar marca diferencias entre grupos que revisar.
   ========================================================================== */

/* La modal no recorta (overflow visible) para que la lista desplegable de los
   selectores de grupo pueda salir por debajo; el scroll lo lleva sólo .ma-previa. */
.ModalDemo-content.ma-modal { width: min(720px, calc(100vw - var(--sb-space-8))); overflow: visible; }
.ma-modal .ModalDemo-header { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.ma-modal .ma-footer { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.ma-body { display: grid; gap: var(--sb-space-4); }
.ma-previa { display: grid; gap: var(--sb-space-4); max-height: 55vh; overflow-y: auto; padding-right: var(--sb-space-1); }

.ma-selectores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sb-space-3); }

.ma-vacio { margin: 0; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }

/* -------------------------------------------------------------- Avisos */
.ma-avisos {
    display: flex; gap: var(--sb-space-3); align-items: flex-start;
    padding: var(--sb-space-3) var(--sb-space-4);
    background: var(--sb-warning-surface); color: var(--sb-warning-text);
    border: 1px solid var(--sb-warning-border); border-radius: var(--sb-radius-lg);
    font-size: var(--sb-text-sm);
}
.ma-avisos i { margin-top: 2px; }
.ma-avisos ul { margin: 0; padding-left: var(--sb-space-4); display: grid; gap: var(--sb-space-1); }

/* -------------------------------------------------------------- Bloques */
.ma-bloque {
    display: grid; gap: var(--sb-space-3);
    padding: var(--sb-space-4);
    background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg);
    border-left: 4px solid var(--sb-border-strong);
}
.ma-bloque h3 {
    margin: 0; display: flex; align-items: center; gap: var(--sb-space-2);
    font-size: var(--sb-text-md); font-weight: var(--sb-weight-bold); color: var(--sb-text-strong);
}
.ma-bloque.is-pasa { border-left-color: var(--sb-success); }
.ma-bloque.is-pasa h3 i { color: var(--sb-success-text); }
.ma-bloque.is-queda { border-left-color: var(--sb-neutral-400); background: var(--sb-surface-subtle); }
.ma-bloque.is-queda h3 i { color: var(--sb-text-muted); }
.ma-bloque.is-anula { border-left-color: var(--sb-danger); }
.ma-bloque.is-anula h3 i { color: var(--sb-danger-text); }

.ma-alumnos {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sb-space-2);
}
.ma-alumnos li {
    display: grid; gap: 2px;
    padding: var(--sb-space-2) var(--sb-space-3);
    background: var(--sb-success-surface); border: 1px solid var(--sb-success-border); border-radius: var(--sb-radius-md);
}
.ma-alumnos li span { font-weight: var(--sb-weight-semibold); color: var(--sb-text-strong); font-size: var(--sb-text-sm); }
.ma-alumnos li small { color: var(--sb-text-muted); font-size: var(--sb-text-xs); }
.ma-alumnos li.is-duplicado { background: var(--sb-warning-surface); border-color: var(--sb-warning-border); }

.ma-lista { margin: 0; padding-left: var(--sb-space-5); display: grid; gap: var(--sb-space-1); font-size: var(--sb-text-sm); color: var(--sb-text); }
.ma-lista small { color: var(--sb-text-subtle); }

.ma-nota { margin: 0; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }

/* -------------------------------------------------------------- Opción */
.ma-check { display: flex; gap: var(--sb-space-3); align-items: flex-start; cursor: pointer; font-size: var(--sb-text-sm); color: var(--sb-text-strong); }
.ma-check span { display: grid; gap: 2px; font-weight: var(--sb-weight-semibold); }
.ma-check small { font-weight: var(--sb-weight-normal); color: var(--sb-text-muted); }

.ma-footer { display: flex; justify-content: flex-end; gap: var(--sb-space-2); }