/* =============================================================================
   PRE-INSCRIPCIONES · /preinscripciones
   -----------------------------------------------------------------------------
   Añadidos del indicador de "ya inscrito" y del resumen desplegable. Todo sale
   de tokens.css.
   ========================================================================== */

/* Indicador de si el alumno ya está dentro de lo que reservó. Lleva icono además
   de color: en una lista larga el color solo no basta, y quien no distingue rojo
   y verde no vería la diferencia. */
.pre-inscrito {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    white-space: nowrap;
}

.pre-inscrito--si {
    background: var(--sb-success-surface);
    border: 1px solid var(--sb-success-border);
    color: var(--sb-success-text);
}

.pre-inscrito--parcial {
    background: var(--sb-warning-surface);
    border: 1px solid var(--sb-warning-border);
    color: var(--sb-warning-text);
}

.pre-inscrito--no {
    background: var(--sb-surface-muted);
    border: 1px solid var(--sb-border);
    color: var(--sb-text-muted);
}

/* El resumen necesita ancho: son ocho columnas y una tabla semanal completa.
   -----------------------------------------------------------------------------
   Va con doble clase (.ModalDemo-content.pre-resumen) a propósito. La regla
   genérica vive en legacy/screens.css con "width: 40%; max-width: 600px;
   overflow: hidden", y esa hoja se carga DESPUÉS que las de pantalla: con una
   sola clase perdía el pulso y el modal seguía estrecho y sin scroll. Dos clases
   ganan por especificidad, sin necesidad de !important.

   El recorte lo hace el cuerpo, no el contenedor: el contenedor mantiene su
   "overflow: hidden" (lo necesita para las esquinas redondeadas) y es el cuerpo
   el que desplaza. Sin "min-height: 0" el hijo de un flex no encoge y el scroll
   nunca aparece, que es lo que pasaba. */
.ModalDemo-content.pre-resumen {
    width: min(1400px, 96vw);
    max-width: min(1400px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.pre-resumen .ModalDemo-header {
    flex: 0 0 auto;
}

.pre-resumen .ModalDemo-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Con la lista larga, la cabecera de la tabla se queda a la vista al desplazar. */
.pre-resumen thead th {
    position: sticky;
    top: 0;
    z-index: var(--sb-z-raised);
    background: var(--sb-surface);
    white-space: nowrap;
}

/* Las columnas de cifras no parten en dos líneas ("Sin rol", "Curso / horario").
   Sólo la tabla resumen: la fila desplegada lleva la lista de alumnos y ahí el
   nowrap la dejaba en una sola línea, con los nombres recortados. */
.pre-resumen .pre-fila td {
    white-space: nowrap;
}

.pre-stat {
    display: block;
    padding: var(--sb-space-3);
    border-radius: var(--sb-radius-lg);
    text-align: center;
}

.pre-stat--ok {
    background: var(--sb-success-surface);
    border: 1px solid var(--sb-success-border);
}

.pre-stat__value {
    display: block;
    font-size: var(--sb-text-2xl);
    font-weight: var(--sb-weight-black);
    color: var(--sb-success-text);
}

.pre-stat__label {
    display: block;
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-black);
    color: var(--sb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Fila de curso: se pulsa para ver quién se pre-inscribió en ese horario. */
.pre-fila {
    border-bottom: 1px solid var(--sb-border-subtle);
    cursor: pointer;
}

.pre-fila:hover {
    background: var(--sb-surface-subtle);
}

.pre-fila.is-open {
    background: var(--sb-brand-surface);
}

.pre-fila__caret {
    width: var(--sb-space-3);
    margin-right: var(--sb-space-1);
    color: var(--sb-text-subtle);
    font-size: var(--sb-text-2xs);
}

.pre-detalle td {
    padding: 0 var(--sb-space-3) var(--sb-space-3);
    background: var(--sb-surface-subtle);
}

.pre-detalle__vacio {
    margin: 0;
    padding: var(--sb-space-3);
    color: var(--sb-text-muted);
    font-size: var(--sb-text-sm);
}

.pre-alumnos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--sb-space-2);
    margin: 0;
    padding: var(--sb-space-3) 0 0;
    list-style: none;
}

.pre-alumno {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-2) var(--sb-space-3);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
}

.pre-alumno__nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--sb-text-sm);
    font-weight: var(--sb-weight-semibold);
    color: var(--sb-text-strong);
}

.pre-alumno__accion {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    border: 1px solid var(--sb-brand-border);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-brand-surface);
    color: var(--sb-brand);
    font: inherit;
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    cursor: pointer;
    white-space: nowrap;
}

.pre-alumno__accion:hover {
    background: var(--sb-brand);
    color: var(--sb-text-on-brand);
}