/* ==========================================================================
   ASISTE · PANTALLA DE ACCESO E INICIO DE SESIÓN
   Diseño editorial cálido, responsivo y con movimiento de bienvenida
   ========================================================================== */

.login-page {
  min-height: 100dvh;
  margin: 0;
  background: radial-gradient(circle at 20% 20%, #f6eee6 0%, #ece2da 55%, #e1d3c6 100%);
  color: var(--text-main, #181716);
  font-family: var(--font-main, 'DM Sans', -apple-system, sans-serif);
  display: grid;
  place-items: center;
  padding: 32px 18px;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}

/* El gradiente ya difumina los bordes; evita filtrar superficies grandes. */
.login-bg-glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
  contain: paint;
}

.glow-1 {
  top: -100px;
  right: -50px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(241, 93, 42, 0.11) 0%, rgba(241, 93, 42, 0.05) 38%, rgba(241, 93, 42, 0.015) 60%, transparent 72%);
  animation: ambientFloat1 18s ease-in-out infinite alternate;
}

.glow-2 {
  bottom: -100px;
  left: -80px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(29, 136, 65, 0.065) 0%, rgba(29, 136, 65, 0.03) 38%, rgba(29, 136, 65, 0.009) 60%, transparent 72%);
  animation: ambientFloat2 22s ease-in-out infinite alternate;
}

@keyframes ambientFloat1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-40px, 60px, 0) scale(1.15); }
}

@keyframes ambientFloat2 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(50px, -50px, 0) scale(1.2); }
}

.login-boot .login-bg-glow,
.motion-paused .login-bg-glow {
  animation-play-state: paused;
}

.login-shell {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
}

/* The head script applies this before the first paint, including slow loads. */
.login-boot .login-shell {
  visibility: hidden;
}

/* These containers receive focus for announcements; controls keep their rings. */
.login-shell:focus-visible,
.login-intro:focus-visible,
#welcome:focus-visible {
  outline: none;
}

.login-card {
  width: 100%;
  background: #fbf7f2;
  border: 1px solid rgba(195, 178, 164, 0.55);
  border-radius: var(--radius-xl, 26px);
  padding: 38px 36px 34px;
  box-shadow: 0 25px 70px -10px rgba(45, 28, 16, 0.12), 0 8px 24px -4px rgba(45, 28, 16, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: box-shadow 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .login-card:not(.busy):hover {
    box-shadow: 0 32px 85px -12px rgba(45, 28, 16, 0.16), 0 12px 32px -4px rgba(45, 28, 16, 0.08);
  }
}

.login-card .login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin-bottom: 20px;
  color: #17181c;
}

.login-card .login-logo {
  color: var(--orange, #f15d2a);
  font-size: 38px;
  line-height: 1;
  display: inline-block;
  transform-origin: center;
  transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .login-card:not(.busy):hover .login-logo {
    transform: rotate(90deg) scale(1.08);
  }
}

.login-card.busy .login-logo {
  transform: none;
  transition: none;
}

.login-card .brand-dot {
  color: var(--orange, #f15d2a);
  margin-left: 1px;
}

.login-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--orange, #f15d2a);
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 6px;
  transition: color 0.25s ease;
}

.login-card h1 {
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 6px;
  color: var(--text-main, #181716);
  letter-spacing: -0.6px;
}

.login-description {
  text-align: center;
  color: var(--text-muted, #645b54);
  font-size: 13.5px;
  margin: 0 0 22px;
  line-height: 1.5;
}

/* ==========================================================================
   SELECTOR DE ROL (SEGMENTED TABS)
   ========================================================================== */
.role-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(195, 178, 164, 0.25);
  padding: 4px;
  border-radius: var(--radius-full, 9999px);
  margin-bottom: 22px;
  border: 1px solid rgba(195, 178, 164, 0.45);
  position: relative;
}

.role-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary, #57504a);
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.role-tab:hover {
  color: var(--text-main, #181716);
}

.role-tab.active {
  background: #ffffff;
  color: var(--orange, #f15d2a);
  box-shadow: 0 3px 10px rgba(45, 28, 16, 0.08), 0 1px 3px rgba(45, 28, 16, 0.04);
}

.role-tab svg {
  transition: transform 0.2s ease, stroke 0.2s ease;
}

.role-tab.active svg {
  transform: scale(1.08);
  stroke: var(--orange, #f15d2a);
}

/* ==========================================================================
   CAMPOS DE FORMULARIO
   ========================================================================== */
.login-card .field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  text-align: left;
}

.login-card .field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main, #181716);
}

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.field-hint {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #75695e);
  background: rgba(195, 178, 164, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrap > svg:first-child {
  position: absolute;
  left: 14px;
  color: #9c9287;
  pointer-events: none;
  transition: color 0.2s ease;
}

.input-icon-wrap input {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(195, 178, 164, 0.65);
  border-radius: var(--radius-md, 14px);
  padding: 12px 42px 12px 40px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-main, #181716);
  box-shadow: 0 1px 3px rgba(40, 25, 15, 0.03);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.input-icon-wrap input:focus {
  border-color: var(--orange, #f15d2a);
  outline: none;
  box-shadow: 0 0 0 3px rgba(241, 93, 42, 0.2), 0 2px 8px rgba(241, 93, 42, 0.08);
}

.input-icon-wrap:focus-within > svg:first-child {
  color: var(--orange, #f15d2a);
}

.password-toggle {
  position: absolute;
  right: 12px;
  background: transparent;
  border: 0;
  padding: 6px;
  color: #9c9287;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s ease, transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .password-toggle:hover {
    color: var(--text-main, #181716);
    transform: scale(1.1);
  }
}

/* Botón principal CTA */
.institutional-access { border-top: 1px solid rgba(195,178,164,.45); margin-top: 24px; padding-top: 20px; text-align: center; }
.first-access-label { margin: 0 0 12px; font-size: 13px; color: var(--text-muted, #645b54); }
.microsoft-button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 10px 14px; box-sizing: border-box; background: white; border: 1px solid #d8cabe; border-radius: 14px; color: #262321; text-decoration: none; font-size: 14px; font-weight: 600; }
.microsoft-button:hover { background: #f7f2ec; }
.microsoft-button:focus-visible { outline: 3px solid #f15d2a; outline-offset: 3px; }
.first-access-hint { color: var(--text-muted, #645b54); font-size: 12px; line-height: 1.6; margin: 12px 0 0; }
.verified-account { display: grid; gap: 4px; padding: 12px 14px; margin-bottom: 20px; border: 1px solid #d8cabe; border-radius: 14px; background: white; font-size: 13px; overflow-wrap: anywhere; }
.verified-account span { color: var(--text-muted, #645b54); }
.profile-onboarding .field > input, .profile-onboarding .field > select { width: 100%; box-sizing: border-box; background: white; border: 1px solid rgba(195,178,164,.65); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 13.5px; color: var(--text-main, #181716); }
.profile-onboarding .field > input:focus, .profile-onboarding .field > select:focus { outline: 3px solid rgba(241,93,42,.2); border-color: #f15d2a; }
.profile-signout { display: block; border: 0; background: transparent; color: #645b54; text-decoration: underline; font: inherit; font-size: 12px; margin: 20px auto 0; cursor: pointer; }
.onboarding-shell { max-width: 560px; }
.onboarding-steps { list-style: none; display: flex; justify-content: space-between; padding: 0 0 22px; margin: 24px 0 18px; border-bottom: 1px solid #e9ded4; gap: 8px; font-size: 12px; color: #82776e; }
.onboarding-steps li { display: flex; align-items: center; gap: 7px; }
.onboarding-steps li > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #eee6df; font-weight: 700; }
.onboarding-steps .done { color: #187b4a; }.onboarding-steps .done > span { background: #e4f3e9; }
.onboarding-steps .current { color: #ce491e; font-weight: 700; }.onboarding-steps .current > span { background: #ffeadf; }
.profile-onboarding .verified-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; }
.verified-account > div { display: grid; gap: 5px; min-width: 0; }
.verified-account .verified-badge { font-size: 11px; white-space: nowrap; color: #187b4a; background: #e4f3e9; border-radius: 99px; padding: 5px 8px; }
.onboarding-panel { border: 0; padding: 0; margin: 0; min-width: 0; }
.onboarding-panel legend { padding: 0; margin: 6px 0 20px; font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.form-help { display: block; font-size: 12px; line-height: 1.5; color: #73685e; margin-top: 7px; }
.profile-onboarding select:disabled { background: #f1ede8; color: #92877d; cursor: not-allowed; }
.profile-onboarding .btn:disabled { box-shadow: none; background: #ded6ce; color: #7a7066; cursor: not-allowed; transform: none; }
.catalogue-empty { background: #f5eee7; padding: 14px; border-radius: 14px; font-size: 13px; line-height: 1.6; }
.catalogue-empty p { margin: 0 0 10px; }.catalogue-empty a { color: #bc431c; font-weight: 600; }
.text-button { padding: 8px 0; border: 0; background: transparent; color: #675b51; font: inherit; font-size: 13px; cursor: pointer; }
.academic-summary { margin: 0 0 20px; padding: 12px 14px; background: #f3ece5; color: #65594f; border-radius: 12px; font-size: 12px; line-height: 1.6; }
.profile-password-wrap { display: flex; align-items: center; position: relative; }
.profile-password-wrap input { box-sizing: border-box; width: 100%; padding: 12px 80px 12px 14px; border: 1px solid #d8cabe; border-radius: 14px; font: inherit; font-size: 14px; background: white; }
.profile-password-wrap input:focus { outline: 3px solid #f15d2a33; border-color: #f15d2a; }
.profile-password-wrap button { position: absolute; right: 10px; border: 0; background: transparent; min-height: 44px; color: #73685e; font: inherit; font-size: 12px; cursor: pointer; }
.password-strength { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #73685e; margin: 18px 0 12px; }
.password-strength strong { color: #493f37; }.password-meter { flex: 0 0 100%; height: 5px; border-radius: 99px; background: #e8dfd7; overflow: hidden; }
.password-meter > span { height: 100%; display: block; width: 0; background: #be4a35; }.password-meter[data-score="2"] > span { background: #cb9225; }.password-meter[data-score="3"] > span,.password-meter[data-score="4"] > span { background: #21835b; }
.password-checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; font-size: 12px; color: #817367; }.password-checks li { display: flex; gap: 9px; align-items: start; }.password-checks span { width: 14px; }.password-checks .met { color: #187b4a; }
.profile-form-actions { display: flex; align-items: center; gap: 20px; }.profile-form-actions .btn.wide { margin: 0; flex: 1; }
.catalogue-shell { max-width: 900px; gap: 24px; }.catalogue-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.catalogue-levels { border: 0; margin: 8px 0 20px; padding: 0; }.catalogue-levels legend { font-weight: 600; font-size: 14px; }
.semester-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }.semester-picks label { display: flex; align-items: center; gap: 8px; border: 1px solid #ddd1c6; border-radius: 10px; padding: 10px; font-size: 12px; background: white; cursor: pointer; }.semester-picks label:has(input:checked) { border-color: #ec7041; background: #fff0e7; }.semester-picks input { accent-color: #e85c27; }
.catalogue-list-card h2 { font-size: 21px; margin: 0 0 20px; letter-spacing: -.5px; }.catalogue-career-group > h3 { font-size: 14px; color: #746456; }.course-detail-card { padding: 18px; border: 1px solid #e2d7cd; border-radius: 16px; margin-top: 12px; background: white; }.course-detail-card h4 { margin: 0 0 14px; font-size: 16px; }.course-detail-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; font-size: 13px; }.course-detail-card dt { color: #817063; font-size: 11px; margin-bottom: 4px; }.course-detail-card dd { margin: 0; color: #302822; overflow-wrap: anywhere; }
.academic-class-assignment { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }.academic-class-assignment span { border: 1px solid #e4d7cb; background: #f7f0e9; padding: 4px 8px; border-radius: 6px; font-size: 11px; color: #66584c; }
@media (max-width: 600px) { .profile-onboarding { padding: 16px 12px; }.profile-onboarding .login-card { padding: 26px 22px; }.onboarding-steps { font-size: 11px; }.onboarding-steps li { gap: 5px; }.profile-onboarding .field input,.profile-onboarding .field select,.profile-password-wrap input { font-size: 16px; min-height: 48px; }.verified-account { flex-wrap: wrap; }.catalogue-form-grid { grid-template-columns: 1fr; }.semester-picks { grid-template-columns: 1fr 1fr; }.course-detail-card dl { grid-template-columns: 1fr; } }

.login-card .btn.wide {
  width: 100%;
  min-height: 48px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-top: 14px;
  border-radius: var(--radius-full, 9999px);
  background: linear-gradient(135deg, #f15d2a 0%, #db4614 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(241, 93, 42, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 160ms var(--ease-out), box-shadow 160ms ease;
  border: 0;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .login-card .btn.wide:hover {
    background: linear-gradient(135deg, #f86734 0%, #e04a16 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(241, 93, 42, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  .login-card .btn.wide:hover .btn-arrow {
    transform: translateX(4px);
  }
}

.btn-arrow {
  font-size: 16px;
  display: inline-block;
  transition: transform 200ms var(--ease-out);
}

.login-card .btn.wide:active {
  transform: scale(0.98);
}

/* ==========================================================================
   CHIPS DE ACCESO RÁPIDO
   ========================================================================== */
.quick-demo-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(195, 178, 164, 0.4);
}

.quick-demo-header {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #75695e);
  margin: 0 0 12px;
  text-align: center;
}

.quick-demo-grid {
  display: grid;
  gap: 8px;
}

.demo-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid rgba(195, 178, 164, 0.5);
  border-radius: var(--radius-md, 14px);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 1px 3px rgba(40, 25, 15, 0.03);
}

@media (hover: hover) and (pointer: fine) {
  .demo-chip:hover {
    border-color: var(--orange, #f15d2a);
    background: #fdfaf6;
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px rgba(45, 28, 16, 0.08);
  }
}

.demo-chip-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.demo-chip-avatar.teacher {
  background: #17181c;
  color: #ffffff;
  border: 1px solid #333;
}

.demo-chip-avatar.student {
  background: linear-gradient(135deg, #fce2d4 0%, #f9cfbe 100%);
  color: var(--orange, #f15d2a);
  border: 1px solid #f8cdbf;
}

.demo-chip-info {
  flex: 1;
  min-width: 0;
}

.demo-chip-info strong {
  display: block;
  font-size: 12.5px;
  color: var(--text-main, #181716);
  font-weight: 600;
}

.demo-chip-info small {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #75695e);
}

.demo-chip-arrow {
  color: #9c9287;
  font-size: 14px;
  transition: transform 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .demo-chip:hover .demo-chip-arrow {
    transform: translateX(3px);
    color: var(--orange, #f15d2a);
  }
}

/* ==========================================================================
   ESTADO DE BIENVENIDA TRAS INICIAR (FEEDBACK DE CARGA)
   ========================================================================== */
#welcome {
  text-align: center;
  padding: 36px 12px;
}
#welcome[hidden] {
  display: none;
}

#welcome h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text-main, #181716);
}

#welcome p {
  color: var(--text-muted, #75695e);
  font-size: 14px;
  margin: 0;
}

.login-card.busy {
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.login-card.busy #welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   SPLASH INTRO ANIMADA
   ========================================================================== */
.login-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(circle at center, #f5ebe1 0%, #ece2da 70%, #dfd1c3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
}
.login-intro[hidden] {
  display: none;
}

.intro-content {
  max-width: 440px;
}

.intro-emblem {
  color: var(--orange, #f15d2a);
  font-size: 110px;
  line-height: 1;
  display: inline-block;
  margin-bottom: 24px;
  text-shadow: 0 4px 12px rgba(241, 93, 42, 0.25);
}

.intro-wordmark {
  font-size: clamp(44px, 8vw, 68px);
  font-weight: 700;
  letter-spacing: -2.5px;
  line-height: 1.1;
  color: #17181c;
}
.intro-wordmark span {
  color: var(--orange, #f15d2a);
}

.login-intro h2 {
  font-size: clamp(21px, 5vw, 28px);
  font-weight: 600;
  margin: 24px 0 10px;
  letter-spacing: -0.7px;
  color: #17181c;
}

.login-intro p {
  font-size: 15px;
  color: var(--text-muted, #75695e);
  margin: 0;
}

/* Pie de página */
.login-shell footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 0 10px;
  font-size: 11.5px;
  color: var(--text-muted, #75695e);
}

#replay-intro {
  background: transparent;
  border: 0;
  color: var(--orange, #914323);
  font-weight: 600;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: background-color 160ms ease;
}
#replay-intro:hover {
  background: rgba(241, 93, 42, 0.08);
}

/* ==========================================================================
   RESPONSIVE & ACCESIBILIDAD
   ========================================================================== */
@media (max-width: 480px) {
  .login-card {
    padding: 30px 22px 24px;
    border-radius: 20px;
  }
  .login-card h1 {
    font-size: 22px;
  }
  .login-brand {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-logo, .login-card, .btn.wide, .login-bg-glow {
    animation: none !important;
    transition: none !important;
  }
  .login-page .login-logo, .login-page .btn.wide,
  .login-page .demo-chip, .login-page .password-toggle,
  .login-page .btn-arrow, .login-page .demo-chip-arrow,
  .login-page .role-tab svg {
    transform: none !important;
    transition-property: color, background-color, border-color, box-shadow;
  }
}

/* Registro e ingreso a clases. */
.roster-verification{text-align:left}.roster-verification legend{font-size:20px;font-weight:750;margin-bottom:8px}.roster-verification .academic-summary{margin:18px 0;padding:12px 14px;border-radius:12px;background:#f3ede6;font-size:14px;line-height:1.5}.roster-semesters{display:grid;gap:9px;margin:9px 0 20px}.roster-semester-option{display:flex;align-items:center;gap:10px;padding:13px 15px;min-height:46px;border:1px solid #dfd1c6;border-radius:12px;background:#fff;cursor:pointer;font-size:14px}.roster-semester-option:has(input:checked){background:#fff1e8;border-color:#ed5a26}.roster-semester-option input{width:18px!important;height:18px!important;min-height:0!important;margin:0!important;accent-color:#ed5a26;flex-shrink:0}.roster-verify-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.roster-verify-row input{min-width:0}.roster-verify-row .btn{min-height:50px}.roster-panel{margin:26px 0 34px;padding:24px;border:1px solid #dfd1c6;border-radius:16px;background:#faf6f1;text-align:left}.roster-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.roster-heading h2{margin:0;font-size:21px}.roster-heading .enrollment-state{margin:0}.roster-panel .field{margin:18px 0}.roster-panel textarea{width:100%;resize:vertical;min-height:108px;border:1px solid #d9c9bb;border-radius:12px;padding:14px;background:#fff;color:#252321;font:inherit;font-size:15px;line-height:1.7;box-sizing:border-box}.roster-panel textarea:focus-visible{outline:3px solid #f9b39c;outline-offset:2px}.roster-entries{display:grid;gap:8px;margin:20px 0;max-height:380px;overflow:auto}.roster-entry{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid #e6dad0;padding:12px 14px;border-radius:12px}.roster-entry>div{display:grid;gap:5px;min-width:0}.roster-entry span{font-size:13px;color:#6f6258;overflow-wrap:anywhere}.roster-entry .btn{flex-shrink:0}.roster-panel .notice{margin-top:18px}
@media(max-width:640px){.roster-panel{padding:18px 14px}.roster-verify-row input,.roster-panel textarea{font-size:16px}.roster-verify-row .btn{padding:12px 16px}.roster-entry{padding:12px 10px}.roster-entry .btn{min-height:44px;padding:10px 12px}}
/* ==========================================================================
   ANIMACIONES Y ESTILOS DE REGISTRO, CLASES Y ONBOARDING
   ========================================================================== */

/* Entrada suave para tarjetas de registro, catálogo y solicitudes */
.profile-onboarding .login-card,
.catalogue-page .login-card {
  animation: cardPopIn 0.32s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
}

@keyframes cardPopIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Enlace a registro desde la pantalla de login */
.register-prompt {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(195, 178, 164, 0.45);
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #75695e);
}

.register-prompt a,
#register-link {
  color: var(--orange, #f15d2a);
  font-weight: 700;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: gap 0.18s var(--ease-out, ease), color 0.18s ease;
}

.register-prompt a:hover,
#register-link:hover {
  color: var(--orange-hover, #e04a16);
  gap: 8px;
}

/* Selector de opciones de registro (Estudiante vs Profesor) */
.registration-choices {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.registration-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 4px 16px;
  padding: 20px 22px;
  border: 1.5px solid rgba(195, 178, 164, 0.55);
  border-radius: var(--radius-lg, 20px);
  background: #ffffff;
  color: #252321;
  text-decoration: none;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(45, 28, 16, 0.04);
  transition: transform 0.22s var(--ease-out, ease), box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.registration-choice::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(241, 93, 42, 0.045) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.registration-choice:hover {
  transform: translateY(-3px);
  border-color: var(--orange, #f15d2a);
  background-color: #fffdfb;
  box-shadow: 0 14px 34px -6px rgba(241, 93, 42, 0.16), 0 4px 12px rgba(45, 28, 16, 0.05);
}

.registration-choice:hover::before {
  opacity: 1;
}

.registration-choice:active {
  transform: translateY(-1px) scale(0.99);
}

.registration-choice-badge {
  grid-row: 1 / span 3;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fef0eb 0%, #fde2d6 100%);
  display: grid;
  place-items: center;
  color: var(--orange, #f15d2a);
  border: 1px solid rgba(241, 93, 42, 0.2);
  transition: transform 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.registration-choice:hover .registration-choice-badge {
  transform: scale(1.08) rotate(3deg);
  background: linear-gradient(135deg, #f15d2a 0%, #db4614 100%);
  color: #ffffff;
}

.registration-choice-badge svg {
  width: 25px;
  height: 25px;
}

.registration-choice strong {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--text-main, #181716);
  letter-spacing: -0.3px;
}

.registration-choice span {
  line-height: 1.55;
  color: var(--text-muted, #6f6258);
  font-size: 13px;
}

.registration-choice b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange, #cf4c16);
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 6px;
  transition: gap 0.2s var(--ease-out, ease);
}

.registration-choice:hover b {
  gap: 10px;
}

.registration-choice b span.arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease-out, ease);
}

.registration-choice:hover b span.arrow {
  transform: translateX(4px);
}

/* Indicador animado de estado pendiente (solicitud.html) */
.pending-status-beacon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px auto 24px;
}

.pending-beacon-ring {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff3e6 0%, #fee4d2 100%);
  border: 2px solid rgba(241, 93, 42, 0.25);
  display: grid;
  place-items: center;
  position: relative;
  animation: beaconPulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pending-beacon-ring svg {
  width: 36px;
  height: 36px;
  color: var(--orange, #f15d2a);
}

@keyframes beaconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(241, 93, 42, 0.25), 0 4px 16px rgba(241, 93, 42, 0.15);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 14px rgba(241, 93, 42, 0), 0 8px 24px rgba(241, 93, 42, 0.25);
  }
}
/* Clases activas y solicitudes (inscripcion.html & solicitudes-clase.html) */
.enrollment-shell {
  max-width: 1040px !important;
  width: 100%;
}

.enrollment-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
  text-align: left;
}

.enrollment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr));
  gap: 18px;
  margin-top: 24px;
  text-align: left;
}

.enrollment-grid .course-detail-card {
  margin: 0;
  padding: 22px;
  border: 1.5px solid rgba(195, 178, 164, 0.6);
  border-radius: var(--radius-lg, 18px);
  background: #ffffff;
  min-width: 0;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 8px rgba(45, 28, 16, 0.04);
  transition: transform 0.2s var(--ease-out, ease), box-shadow 0.2s ease, border-color 0.2s ease;
  animation: cardPopIn 0.3s var(--ease-out, ease) backwards;
}

.enrollment-grid .course-detail-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange, #f15d2a);
  box-shadow: 0 12px 28px -4px rgba(241, 93, 42, 0.12), 0 4px 10px rgba(45, 28, 16, 0.04);
}

.enrollment-grid h2 {
  font-size: 19px;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.enrollment-grid p {
  font-size: 13.5px;
  color: var(--text-muted, #6f6258);
  line-height: 1.6;
  margin: 4px 0;
}

.enrollment-grid .btn {
  margin-top: 16px;
  white-space: normal;
}

.enrollment-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 24px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
  background: #f2ede8;
  color: #66584c;
  transition: transform 0.18s ease;
}

.enrollment-state.pending {
  background: #fff0dc;
  color: #7a4b00;
  border: 1px solid rgba(220, 140, 0, 0.25);
  animation: pendingRadar 3s ease-in-out infinite;
}

.enrollment-state.accepted {
  background: #e5f5e9;
  color: #14652e;
  border: 1px solid rgba(20, 101, 46, 0.25);
}

.enrollment-state.rejected {
  background: #fff0eb;
  color: #a33417;
  border: 1px solid rgba(163, 52, 23, 0.25);
}

.enrollment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.enrollment-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
}

#enrollment-history {
  margin-top: 32px;
}

#enrollment-account {
  margin-top: 16px;
}

@media(max-width:640px){
  .enrollment-filters{grid-template-columns:1fr}
  .enrollment-grid{grid-template-columns:1fr}
  .enrollment-grid .btn{width:100%;min-height:48px}
  .enrollment-shell .login-card{padding:26px 18px}
  .enrollment-filters select{font-size:16px;min-height:48px}
}

/* Asistente por pasos de Onboarding (completar-perfil.html) */
.onboarding-steps {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0 0 22px;
  margin: 24px 0 18px;
  border-bottom: 1px solid #e9ded4;
  gap: 8px;
  font-size: 12px;
  color: #82776e;
}

.onboarding-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.onboarding-steps li > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eee6df;
  font-weight: 700;
  transition: transform 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), background 0.25s ease, box-shadow 0.25s ease;
}

.onboarding-steps .current {
  color: #ce491e;
  font-weight: 700;
}

.onboarding-steps .current > span {
  background: #ffeadf;
  animation: stepPulse 2.4s ease-in-out infinite;
}

@keyframes stepPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(241, 93, 42, 0.16);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(241, 93, 42, 0.28);
  }
}

.onboarding-steps .done {
  color: #187b4a;
}

.onboarding-steps .done > span {
  background: #e4f3e9;
  animation: checkPop 0.35s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;
}

@keyframes checkPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Creación de contraseña: feedback táctil y animado */
.password-active .verified-account {
  display: none;
}

.password-panel legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.password-active .academic-summary {
  border: 1px solid #e7ddd3;
  border-radius: 12px;
  background: #f2ece5;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 24px;
  color: #76695e;
}

.password-panel .profile-password-wrap input {
  padding-right: 58px;
  min-height: 52px;
}

.password-panel .profile-password-wrap button {
  right: 6px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  padding: 0;
}

.password-visibility-icon {
  width: 21px;
  height: 21px;
}

.password-panel .profile-password-wrap button:hover {
  background: #f3ece5;
}

.password-panel .profile-password-wrap button:focus-visible {
  outline: 2px solid #ed5a26;
  outline-offset: 1px;
}

.password-panel .password-strength {
  margin: 22px 0 18px;
  font-size: 12px;
  gap: 12px;
}

.password-panel .password-strength strong {
  font-weight: 700;
  transition: color 0.25s ease;
}

.password-panel .password-strength[data-score="0"] strong,
.password-panel .password-strength[data-score="1"] strong {
  color: #a43524;
}

.password-panel .password-strength[data-score="2"] strong {
  color: #876009;
}

.password-panel .password-strength[data-score="3"] strong,
.password-panel .password-strength[data-score="4"] strong {
  color: #187b4a;
}

.password-panel .password-meter {
  height: 5px;
  border-radius: 99px;
  background: #e8dfd7;
  overflow: hidden;
}

.password-meter > span {
  height: 100%;
  display: block;
  width: 0;
  background: #be4a35;
  border-radius: 99px;
  transition: width 0.35s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), background-color 0.25s ease;
}

.password-checks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 12px;
  color: #817367;
}

.password-checks li {
  display: flex;
  gap: 10px;
  align-items: center;
  transition: color 0.2s ease;
}

.password-checks li span {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid #c9bcb0;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: transparent;
  transition: transform 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), background 0.2s ease, border-color 0.2s ease;
}

.password-checks .met {
  color: #35302c;
  font-weight: 500;
}

.password-checks .met span {
  background: #21835b;
  border-color: #21835b;
  transform: scale(1.08);
  animation: checkPop 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.password-panel #confirm-feedback {
  min-height: 20px;
  display: block;
}

.password-panel .profile-form-actions {
  align-items: center;
}

.password-panel .profile-form-actions .btn {
  min-height: 50px;
}

@media (prefers-reduced-motion: reduce) {
  .profile-onboarding .login-card,
  .catalogue-page .login-card,
  .registration-choice,
  .registration-choice:hover,
  .registration-choice-badge,
  .onboarding-steps .current > span,
  .onboarding-steps .done > span,
  .password-checks .met span,
  .enrollment-grid .course-detail-card,
  .enrollment-grid .course-detail-card:hover,
  .enrollment-state.pending,
  .pending-beacon-ring,
  .roster-entry,
  .roster-semester-option,
  .semester-picks label {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}