/* =============================================================================
   INSCRIPCIÓN · /enrollments/new
   -----------------------------------------------------------------------------
   Estilos exclusivos de la pantalla de inscripción rehecha. Todo sale de
   tokens.css: aquí no hay ni un color, ni un radio, ni una sombra en crudo.

   Lo que la pantalla necesitaba y no era un componente vive aquí; lo que sí lo
   era (botones, campos, tarjetas, tablas, estados vacíos, avatares, badges)
   se usa del sistema y no se repite.

   La hoja antigua, `enrollment-flow.css`, se queda porque todavía la usan la
   pantalla de recibo mensual manual y la de pre-inscripción.
   ========================================================================== */

.enroll {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-4);
    max-width: var(--sb-container-max);
    margin: 0 auto;
    padding: var(--sb-space-5);
}

/* ------------------------------------------------------------------ Cabecera */

.enroll__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-4);
    padding: var(--sb-space-4) var(--sb-space-5);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-sm);
}

.enroll__brand {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
}

.enroll__brand-badge {
    display: grid;
    place-items: center;
    width: var(--sb-tap-target);
    height: var(--sb-tap-target);
    border-radius: var(--sb-radius-lg);
    background: linear-gradient(135deg, var(--sb-brand), var(--sb-brand-gradient-end));
    color: var(--sb-text-on-brand);
    font-size: var(--sb-text-xl);
}

.enroll__title {
    margin: 0;
    font-size: var(--sb-text-xl);
    font-weight: var(--sb-weight-black);
    color: var(--sb-text);
    line-height: var(--sb-leading-tight);
}

.enroll__subtitle {
    margin: 0;
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-semibold);
    color: var(--sb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------- Pasos
   Botones de verdad: el foco se ve, el tabulador los recorre y el paso al que
   todavía no se puede ir sale deshabilitado en vez de simplemente no responder. */

.enroll-steps {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.enroll-steps__item {
    display: flex;
    align-items: center;
}

.enroll-steps__item + .enroll-steps__item::before {
    content: "";
    width: var(--sb-space-8);
    height: 2px;
    margin-right: var(--sb-space-2);
    border-radius: var(--sb-radius-full);
    background: var(--sb-border);
}

.enroll-step {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-1) var(--sb-space-3) var(--sb-space-1) var(--sb-space-1);
    border: 1px solid transparent;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-text-muted);
    font: inherit;
    font-size: var(--sb-text-sm);
    font-weight: var(--sb-weight-semibold);
    cursor: pointer;
    transition: background var(--sb-duration-fast) var(--sb-ease),
                color var(--sb-duration-fast) var(--sb-ease);
}

.enroll-step:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.enroll-step:not(:disabled):hover {
    background: var(--sb-surface-muted);
    color: var(--sb-text-strong);
}

.enroll-step__dot {
    display: grid;
    place-items: center;
    width: var(--sb-space-6);
    height: var(--sb-space-6);
    border-radius: var(--sb-radius-full);
    background: var(--sb-surface-muted);
    color: var(--sb-text-muted);
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-black);
}

.enroll-step.is-current {
    background: var(--sb-brand-surface);
    border-color: var(--sb-brand-border);
    color: var(--sb-brand);
}

.enroll-step.is-current .enroll-step__dot {
    background: var(--sb-brand);
    color: var(--sb-text-on-brand);
}

.enroll-step.is-done {
    color: var(--sb-success-text);
}

.enroll-step.is-done .enroll-step__dot {
    background: var(--sb-success-surface);
    color: var(--sb-success);
}

/* ------------------------------------------------------- Banda del alumno
   Manda mientras no hay nadie elegido y se encoge a una línea en cuanto lo hay:
   el sitio se lo tiene que llevar el trabajo, no el contexto. */

.enroll-student {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-4);
    padding: var(--sb-space-4) var(--sb-space-5);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-xs);
}

.enroll-student--empty {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-3) var(--sb-space-5);
    padding: var(--sb-space-4) var(--sb-space-5);
}

.enroll-student__id {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    min-width: 0;
}

.enroll-student__name {
    min-width: 0;
}

.enroll-student__name h2 {
    margin: 0;
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text);
    line-height: var(--sb-leading-tight);
}

.enroll-student__name p {
    margin: 0;
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enroll-student__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-5);
    margin: 0;
    padding: 0 var(--sb-space-4);
    border-left: 1px solid var(--sb-border-subtle);
}

.enroll-student__facts dt {
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.enroll-student__facts dd {
    margin: 0;
    font-size: var(--sb-text-md);
    font-weight: var(--sb-weight-semibold);
    color: var(--sb-text-strong);
}

.enroll-student__actions {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    margin-left: auto;
}

.enroll-student__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-2);
    min-height: var(--sb-control-height);
    padding: 0 var(--sb-space-3);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    background: var(--sb-surface);
    color: var(--sb-text-strong);
    font: inherit;
    font-size: var(--sb-text-sm);
    font-weight: var(--sb-weight-semibold);
    cursor: pointer;
}

.enroll-student__toggle:hover,
.enroll-student__toggle.is-open {
    background: var(--sb-surface-muted);
}

.enroll-student__hint {
    color: var(--sb-text-muted);
    font-weight: var(--sb-weight-normal);
}

.enroll-student__prompt {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
}

.enroll-student__prompt-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--sb-space-10);
    height: var(--sb-space-10);
    border-radius: var(--sb-radius-full);
    background: var(--sb-brand-surface);
    color: var(--sb-brand);
    font-size: var(--sb-text-lg);
}

.enroll-student__prompt h2 {
    margin: 0;
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text);
    line-height: var(--sb-leading-tight);
}

.enroll-student__prompt p {
    margin: 0;
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
}

.enroll-student__find {
    flex: 1 1 24rem;
    display: flex;
    gap: var(--sb-space-2);
    align-items: center;
}

.enroll-student__status {
    flex: 1 1 100%;
    margin: 0;
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
}

/* Se queda en el DOM aunque esté vacía: si se ocultara con display:none, el
   lector de pantalla no anunciaría los resultados al aparecer. */
.enroll-student__status:not(.is-shown) {
    height: 0;
    overflow: hidden;
}

.enroll-student__status .is-error {
    color: var(--sb-danger-text);
    font-weight: var(--sb-weight-semibold);
}

/* -------------------------------------------------- Buscador de alumnos */

.enroll-search {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    min-height: var(--sb-tap-target);
    padding: 0 var(--sb-space-4);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border-strong);
    border-radius: var(--sb-radius-lg);
    color: var(--sb-text-subtle);
}

.enroll-search:focus-within {
    border-color: var(--sb-brand);
    box-shadow: var(--sb-shadow-sm);
}

.enroll-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--sb-text);
    font: inherit;
    font-size: var(--sb-text-base);
    outline: none;
}

.enroll-search__results {
    position: absolute;
    inset-inline: calc(var(--sb-space-2) * -1);
    top: calc(100% + var(--sb-space-2));
    z-index: var(--sb-z-dropdown);
    max-height: 22rem;
    margin: 0;
    padding: var(--sb-space-2);
    overflow-y: auto;
    list-style: none;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
}

.enroll-search__option {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    padding: var(--sb-space-2) var(--sb-space-3);
    border-radius: var(--sb-radius-md);
    cursor: pointer;
}

.enroll-search__option:hover,
.enroll-search__option.is-active {
    background: var(--sb-brand-surface);
}

.enroll-search__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.enroll-search__name {
    font-size: var(--sb-text-md);
    font-weight: var(--sb-weight-semibold);
    color: var(--sb-text);
}

.enroll-search__meta {
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------ Ficha del alumno */

.enroll-ficha {
    padding: var(--sb-space-4) var(--sb-space-5);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-xs);
}

.enroll-ficha__loading {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-5);
    color: var(--sb-text-muted);
    font-size: var(--sb-text-md);
}

.enroll-ficha__danger {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--sb-space-3);
    margin-top: var(--sb-space-3);
    border-top: 1px solid var(--sb-border-subtle);
}

.enroll-ficha tr.is-muted {
    color: var(--sb-text-muted);
}

.enroll-amount {
    font-variant-numeric: tabular-nums;
    font-weight: var(--sb-weight-bold);
}

.enroll-debt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-4);
    margin: var(--sb-space-3) 0;
    padding: var(--sb-space-3) var(--sb-space-4);
    background: var(--sb-warning-surface);
    border: 1px solid var(--sb-warning-border);
    border-radius: var(--sb-radius-lg);
}

.enroll-debt__label {
    margin: 0;
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-warning-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.enroll-debt__amount {
    margin: 0;
    font-size: var(--sb-text-xl);
    font-weight: var(--sb-weight-black);
    color: var(--sb-warning-text);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Adelantos */

.enroll-advances {
    display: grid;
    gap: var(--sb-space-3);
    margin: var(--sb-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.enroll-advance {
    padding: var(--sb-space-4);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    background: var(--sb-surface-subtle);
}

.enroll-advance__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sb-space-3);
}

.enroll-advance__kind {
    margin: 0;
    font-size: var(--sb-text-md);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text-strong);
}

.enroll-advance__kind i {
    color: var(--sb-brand);
    margin-right: var(--sb-space-1);
}

.enroll-advance__amount {
    margin: 0;
    white-space: nowrap;
    font-weight: var(--sb-weight-black);
    color: var(--sb-success-text);
}

.enroll-advance__note {
    margin: var(--sb-space-3) 0 0;
    padding: var(--sb-space-3);
    background: var(--sb-warning-surface);
    border: 1px solid var(--sb-warning-border);
    border-radius: var(--sb-radius-md);
    color: var(--sb-warning-text);
    font-size: var(--sb-text-sm);
}

.enroll-advance__note span {
    display: block;
    margin-bottom: var(--sb-space-1);
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-black);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.enroll-advance__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sb-space-3);
}

.enroll-advance__done {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-2);
    margin: 0;
    font-size: var(--sb-text-sm);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-success-text);
}

/* ------------------------------------------------------------- Escenario */

.enroll-stage {
    display: grid;
    gap: var(--sb-space-4);
    align-items: start;
}

/* Catálogo ancho + lista pegada a la derecha. La lista no baja del ancho en el
   que caben el título de una clase y su horario sin partirse. */
.enroll-stage--split {
    grid-template-columns: minmax(0, 1fr) 22rem;
}

.enroll-stage--pay {
    grid-template-columns: minmax(0, 1fr) 24rem;
}

.enroll-stage--done {
    justify-items: center;
}

.enroll-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3);
    padding: var(--sb-space-5);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-xs);
}

.enroll-panel__head {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
}

.enroll-panel__head h2,
.enroll-panel h2 {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    margin: 0;
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text);
}

.enroll-panel h2 i {
    color: var(--sb-brand);
}

.enroll-panel__count {
    margin-left: auto;
    padding: var(--sb-space-1) var(--sb-space-3);
    border-radius: var(--sb-radius-full);
    background: var(--sb-surface-muted);
    color: var(--sb-text-muted);
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-bold);
}

.enroll-panel__body {
    display: grid;
    gap: var(--sb-space-3);
}

.enroll-panel__foot {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--sb-space-3);
    border-top: 1px solid var(--sb-border-subtle);
}

/* Dos acciones distintas, cada una en un extremo: añadir clase a la izquierda, ajustar el recibo a la derecha. */
.enroll-panel__foot--split {
    justify-content: space-between;
    gap: var(--sb-space-3);
    flex-wrap: wrap;
}

.enroll-panel__hint {
    margin: 0;
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
}

.enroll-panel--note {
    border-left: var(--sb-space-1) solid var(--sb-warning);
}

.enroll-panel--center {
    align-items: center;
    text-align: center;
    padding: var(--sb-space-12) var(--sb-space-6);
    color: var(--sb-text-muted);
}

.enroll-note {
    margin: 0;
    padding: var(--sb-space-3);
    background: var(--sb-warning-surface);
    border: 1px solid var(--sb-warning-border);
    border-radius: var(--sb-radius-md);
    color: var(--sb-warning-text);
    font-size: var(--sb-text-md);
}

/* ------------------------------------------------------------- La lista */

.enroll-cart {
    position: sticky;
    top: var(--sb-space-4);
    display: flex;
    flex-direction: column;
    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-xl);
    box-shadow: var(--sb-shadow-sm);
}

.enroll-cart__head {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
}

.enroll-cart__head h2 {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    margin: 0;
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text);
}

.enroll-cart__head i {
    color: var(--sb-brand);
}

.enroll-cart__count {
    margin-left: auto;
    min-width: var(--sb-space-6);
    padding: var(--sb-space-1) var(--sb-space-2);
    border-radius: var(--sb-radius-full);
    background: var(--sb-brand);
    color: var(--sb-text-on-brand);
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-black);
    text-align: center;
}

.enroll-cart__list {
    display: grid;
    gap: var(--sb-space-2);
    max-height: 26rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.enroll-cart-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sb-space-2);
    padding: var(--sb-space-3);
    background: var(--sb-surface-subtle);
    border: 1px solid var(--sb-border-subtle);
    border-radius: var(--sb-radius-md);
}

.enroll-cart-item__main {
    flex: 1 1 auto;
    min-width: 0;
}

.enroll-cart-item__title {
    margin: 0;
    font-size: var(--sb-text-md);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text);
}

.enroll-cart-item__meta {
    margin: 0;
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
}

.enroll-cart-item__slot {
    display: flex;
    align-items: center;
    gap: var(--sb-space-1);
    margin: var(--sb-space-1) 0 0;
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-semibold);
    color: var(--sb-text-strong);
}

.enroll-cart__foot {
    display: grid;
    gap: var(--sb-space-3);
    padding-top: var(--sb-space-3);
    border-top: 1px solid var(--sb-border-subtle);
}

.enroll-cart__cta {
    width: 100%;
    justify-content: center;
}

/* ----------------------------------------------------------------- Pago */

.enroll-paycol {
    display: grid;
    gap: var(--sb-space-4);
    align-content: start;
}

.enroll-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sb-space-3);
}

.enroll-setting {
    display: flex;
    /* Se permite el salto: con dos desplegables al lado, el texto se quedaba en una
       columna de una palabra por línea. Cuando no cabe, los controles bajan. */
    flex-wrap: wrap;
    align-items: center;
    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);
}

.enroll-setting__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--sb-space-10);
    height: var(--sb-space-10);
    border-radius: var(--sb-radius-md);
    background: var(--sb-surface-muted);
    color: var(--sb-text-muted);
}

.enroll-setting__text {
    flex: 1 1 9rem;
    min-width: 0;
}

.enroll-setting__text h3 {
    margin: 0;
    font-size: var(--sb-text-md);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text);
}

.enroll-setting__text p {
    margin: 0;
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
}

.enroll-setting__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-2);
    margin-left: auto;
}

.enroll-setting.is-on {
    border-color: var(--sb-brand-border);
}

.enroll-setting.is-on .enroll-setting__icon {
    background: var(--sb-brand-surface);
    color: var(--sb-brand);
}

.enroll-setting.is-ok {
    border-color: var(--sb-success-border);
}

.enroll-setting.is-ok .enroll-setting__icon {
    background: var(--sb-success-surface);
    color: var(--sb-success);
}

.enroll-setting.is-warn {
    border-color: var(--sb-warning-border);
    background: var(--sb-warning-surface);
}

.enroll-setting.is-warn .enroll-setting__icon {
    background: var(--sb-surface);
    color: var(--sb-warning);
}

/* --------------------------------------------------------------- Recibo */

.enroll-receipt-rail {
    position: sticky;
    top: var(--sb-space-4);
}

.enroll-receipt {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3);
    padding: var(--sb-space-5);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-md);
}

.enroll-receipt--final {
    width: min(30rem, 100%);
    box-shadow: var(--sb-shadow-lg);
}

.enroll-receipt__head {
    padding-bottom: var(--sb-space-3);
    border-bottom: 1px dashed var(--sb-border-strong);
    text-align: center;
}

.enroll-receipt__seal {
    display: grid;
    place-items: center;
    width: var(--sb-space-12);
    height: var(--sb-space-12);
    margin: 0 auto var(--sb-space-3);
    border-radius: var(--sb-radius-full);
    background: var(--sb-success-surface);
    color: var(--sb-success);
    font-size: var(--sb-text-xl);
}

.enroll-receipt__brand {
    margin: 0;
    font-size: var(--sb-text-xl);
    font-weight: var(--sb-weight-black);
    color: var(--sb-brand);
}

.enroll-receipt__kind {
    margin: 0;
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.enroll-receipt__who {
    display: grid;
    gap: var(--sb-space-1);
}

.enroll-receipt__who span {
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.enroll-receipt__who strong {
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text);
}

.enroll-receipt__who time {
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
}

.enroll-receipt__lines {
    display: grid;
    gap: var(--sb-space-2);
    margin: 0;
    padding: var(--sb-space-3) 0;
    border-top: 1px dashed var(--sb-border);
    border-bottom: 1px dashed var(--sb-border);
    list-style: none;
}

.enroll-receipt__lines li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sb-space-2);
    font-size: var(--sb-text-md);
    color: var(--sb-text-strong);
}

.enroll-receipt__lines li.is-discount {
    color: var(--sb-success-text);
}

.enroll-receipt__concept {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.enroll-receipt__concept small {
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
}

.enroll-receipt__price {
    flex-shrink: 0;
    font-weight: var(--sb-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.enroll-receipt__drop {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: var(--sb-space-5);
    height: var(--sb-space-5);
    margin-right: var(--sb-space-1);
    border: 1px solid var(--sb-danger-border);
    border-radius: var(--sb-radius-xs);
    background: var(--sb-danger-surface);
    color: var(--sb-danger);
    font-size: var(--sb-text-2xs);
    cursor: pointer;
}

.enroll-receipt__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sb-space-3);
    margin: 0;
    padding: var(--sb-space-3) var(--sb-space-4);
    border-radius: var(--sb-radius-lg);
    background: var(--sb-surface-inverse);
    color: var(--sb-text-on-inverse);
}

.enroll-receipt__total span {
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.enroll-receipt__total strong {
    font-size: var(--sb-text-2xl);
    font-weight: var(--sb-weight-black);
    font-variant-numeric: tabular-nums;
}

.enroll-receipt__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-8) 0;
    color: var(--sb-text-muted);
}

.enroll-receipt__foot {
    display: grid;
    gap: var(--sb-space-2);
}

.enroll-receipt__cta {
    width: 100%;
    justify-content: center;
}

/* Aviso de lo ya cobrado en la pre-inscripción. */
.enroll-advance-box {
    display: grid;
    gap: var(--sb-space-2);
    padding: var(--sb-space-3) var(--sb-space-4);
    background: var(--sb-success-surface);
    border: 1px solid var(--sb-success-border);
    border-radius: var(--sb-radius-lg);
    font-size: var(--sb-text-sm);
    color: var(--sb-success-text);
}

.enroll-advance-box p,
.enroll-advance-box li {
    display: flex;
    justify-content: space-between;
    gap: var(--sb-space-3);
    margin: 0;
}

.enroll-advance-box ul {
    display: grid;
    gap: var(--sb-space-1);
    margin: 0;
    padding-left: var(--sb-space-5);
    list-style: none;
    font-size: var(--sb-text-xs);
    opacity: 0.85;
}

.enroll-advance-box__now {
    padding-top: var(--sb-space-2);
    border-top: 1px solid var(--sb-success-border);
    color: var(--sb-text);
    font-weight: var(--sb-weight-black);
}

.enroll-advance-box__now strong {
    font-size: var(--sb-text-lg);
    font-variant-numeric: tabular-nums;
}

.enroll-advance-box__hint {
    display: block;
    font-size: var(--sb-text-2xs);
    color: var(--sb-text-muted);
}

/* ------------------------------------------------------------- Diálogos */

.enroll-wipe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sb-space-2);
    margin: var(--sb-space-4) 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.enroll-wipe li {
    display: grid;
    gap: var(--sb-space-1);
    padding: var(--sb-space-3);
    background: var(--sb-surface-subtle);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
}

.enroll-wipe strong {
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-black);
    color: var(--sb-text);
}

.enroll-wipe span {
    font-size: var(--sb-text-2xs);
    color: var(--sb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------------------------------------------------------- Adaptativo
   La pantalla se usa de pie en el mostrador tanto como sentado: por debajo de
   1100 px la lista deja de ser una columna y pasa a ir debajo del catálogo. */

@media (max-width: 1100px) {
    .enroll-stage--split,
    .enroll-stage--pay {
        grid-template-columns: minmax(0, 1fr);
    }

    .enroll-cart,
    .enroll-receipt-rail {
        position: static;
    }
}

@media (max-width: 760px) {
    .enroll {
        padding: var(--sb-space-3);
    }

    .enroll__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .enroll-step__label {
        display: none;
    }

    .enroll-steps__item + .enroll-steps__item::before {
        width: var(--sb-space-4);
    }

    .enroll-student__facts {
        padding: 0;
        border-left: 0;
        gap: var(--sb-space-4);
    }

    .enroll-student__actions {
        margin-left: 0;
    }

    /* El resumen de la ficha parte el botón en tres líneas cuando no hay ancho.
       El dato sigue estando: se ve al abrirla. */
    .enroll-student__hint {
        display: none;
    }

    .enroll-student__find {
        flex-direction: column;
    }

    .enroll-wipe {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Quien pide menos movimiento no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
    .enroll-step {
        transition: none;
    }
}

/* ------------------------------------------------- Selector de clase
   Cómo se ve cada curso dentro del desplegable. Sin esto, título, nivel,
   horario y profesor salían pegados en una sola línea ("BachataIntermedio 1
   Lunes 20:00 Christian") y no había forma de distinguir dos clases que se
   llaman igual y sólo cambian de nivel o de profesor.

   Se pinta dentro de .sb-dd-option, que es display:block: por eso el envoltorio
   declara su propio flex en columna. */

.enroll-option {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    width: 100%;
    min-width: 0;
    padding: var(--sb-space-1) 0;
}

.enroll-option__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sb-space-2);
}

.enroll-option__title {
    font-size: var(--sb-text-md);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text);
}

.enroll-option__level {
    flex-shrink: 0;
    padding: 0 var(--sb-space-2);
    border-radius: var(--sb-radius-xs);
    background: var(--sb-surface-muted);
    color: var(--sb-text-muted);
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    text-transform: uppercase;
    white-space: nowrap;
}

.enroll-option__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-1);
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
}

.enroll-option__slot {
    padding: 0 var(--sb-space-2);
    border: 1px solid var(--sb-info-border);
    border-radius: var(--sb-radius-xs);
    background: var(--sb-info-surface);
    color: var(--sb-info-text);
    font-weight: var(--sb-weight-semibold);
    white-space: nowrap;
}

.enroll-option__teacher {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    margin-left: var(--sb-space-1);
}

/* Etiqueta de bloque para los <select> nativos: la flotante del sistema no sube
   con ellos y se quedaba encima de lo elegido. */
.enroll-field {
    display: block;
}

.enroll-hint {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    margin: 0;
    font-size: var(--sb-text-xs);
    color: var(--sb-text-muted);
}

.enroll-hint.is-error {
    color: var(--sb-danger-text);
    font-weight: var(--sb-weight-semibold);
}

/* La tabla del sistema va a sangre dentro del panel: sin esto asomaba un pico
   cuadrado de la cabecera roja sobre la esquina redondeada. */
.enroll-panel .sabora-grid-scroll,
.enroll-ficha .sabora-grid-scroll {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    overflow: hidden;
}

/* ------------------------------------------------- Diálogo de ajuste
   El host ya envuelve el contenido en .sb-dialog-body con su relleno y pinta la
   cabecera con el título, así que aquí sólo va la disposición interna. */

.ajuste {
    display: grid;
    gap: var(--sb-space-4);
}

.ajuste__intro {
    margin: 0;
    color: var(--sb-text-muted);
    font-size: var(--sb-text-md);
    line-height: var(--sb-leading-normal);
}

.ajuste__refs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sb-space-3);
    margin: 0;
    padding: var(--sb-space-3) var(--sb-space-4);
    background: var(--sb-surface-subtle);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
}

.ajuste__refs dt {
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ajuste__refs dd {
    margin: 0;
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text-strong);
    font-variant-numeric: tabular-nums;
}

/* El mes manda sobre el año: dos tercios y un tercio, no mitad y mitad. */
.ajuste__periodo {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sb-space-3);
    align-items: end;
}

.ajuste__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sb-space-3);
    padding-top: var(--sb-space-4);
    border-top: 1px solid var(--sb-border-subtle);
}

@media (max-width: 480px) {
    .ajuste__periodo,
    .ajuste__refs {
        grid-template-columns: minmax(0, 1fr);
    }

    .ajuste__actions {
        flex-direction: column-reverse;
    }
}