/* ========== DESIGN SYSTEM — Modo oscuro premium ========== */
@font-face {
  font-family: 'llScribe Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('llScribe Sans Regular'),
       local('llScribeSans-Regular');
}

@font-face {
  font-family: 'llScribe Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local('llScribe Sans Bold'),
       local('llScribeSans-Bold');
}

:root {
  color-scheme: dark;
  --font-family: 'llScribe Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg-app: #1A1A1A;
  --bg-elevated: #222222;
  --bg-surface: #242424;
  --bg-chat: #172328;
  --bg-chat-bubble: rgba(22, 34, 40, 0.94);
  --bg-input: #2A2A2A;
  --text-primary: #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-muted: #999999;
  --border: #3A3A3A;
  --accent-cyan: #1AD4C1;
  --accent-gold: #F2E8CF;
  --accent-lime: #C2CF82;
  --accent-blue: #2B4F6E;
  --gradient-data: linear-gradient(90deg, #1AD4C1 0%, #F2E8CF 35%, #C2CF82 65%, #2B4F6E 100%);
  --progress-done: #397A66;
  --progress-active: #1AD4C1;
  --progress-started: #F2E8CF;
  --progress-pending: #2A2A2A;
  --progress-locked: #3A3A3A;
  --focus-ring: rgba(26, 212, 193, 0.35);
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.35);
  --positive: #5a9e6e;
  --negative: #c75c5c;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --space-page: clamp(12px, 3vw, 24px);
  --radius-card: clamp(12px, 2vw, 16px);
  --layout-max-width: min(1440px, 100%);
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Scroll funcional sin barras visibles (toda la app) */
html,
body,
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

body {
  font-family: var(--font-family);
  font-weight: 400;
  background: var(--bg-app);
  color: var(--text-secondary);
  line-height: 1.6;
  padding: var(--space-page);
  min-height: 100vh;
  min-height: 100dvh;
  font-size: clamp(13px, 1.5vw, 14px);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.app-top-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
}

.app-top-bar__title {
    margin: 0;
    font-size: clamp(0.72rem, 2.4vw, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
    user-select: none;
}

.app-top-bar__title--in-header {
    display: none;
}

.app-header-shell {
  margin-bottom: clamp(10px, 2vw, 14px);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  position: relative;
}

#appScreen .app-header-shell {
  padding-top: 44px;
}

.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  min-width: 0;
  flex: 1 0 auto;
}

.app-footer {
  flex-shrink: 0;
  width: calc(100% + 2 * var(--space-page));
  margin: clamp(32px, 6vw, 56px) calc(-1 * var(--space-page)) calc(-1 * var(--space-page));
  padding: clamp(28px, 5vw, 44px) var(--space-page) calc(clamp(24px, 4vw, 32px) + env(safe-area-inset-bottom, 0px));
  background: #000;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.app-footer__logo {
  display: block;
  width: min(220px, 58vw);
  height: auto;
  margin: 0 auto 1.25rem;
  object-fit: contain;
}

.app-footer__company {
  margin: 0;
  font-size: clamp(0.68rem, 1.8vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.15;
}

.app-footer__tutorial-link {
  display: inline-block;
  margin: 0.85rem 0 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: clamp(0.68rem, 1.7vw, 0.78rem);
  letter-spacing: 0.04em;
  color: var(--text-secondary, #b8b8b8);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.app-footer__tutorial-link:hover {
  color: var(--text-primary);
}

.app-footer__rights {
  margin: 0.75rem 0 0;
  font-size: clamp(0.62rem, 1.6vw, 0.72rem);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  line-height: 1.15;
}

/* Pantalla de autenticación */
body.is-auth {
  padding: 0;
  min-height: 100dvh;
}

body.is-auth #appTopBar,
body.is-auth #appFooter {
  display: none !important;
}

body.is-auth .container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.auth-screen {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.auth-layout {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.auth-card {
  --auth-card-brand-pad-top: clamp(28px, 6vw, 40px);
  --auth-card-panel-pad: clamp(20px, 4vw, 28px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.auth-card__brand {
  text-align: center;
  padding: var(--auth-card-brand-pad-top) clamp(20px, 5vw, 32px) clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--border);
}

.auth-card__logo {
  display: block;
  width: min(200px, 70vw);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.auth-card__subtitle {
  margin: 0.75rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.auth-card__panel {
  padding: var(--auth-card-panel-pad);
}

.auth-card__panel .tabs {
  margin-bottom: clamp(16px, 3vw, 20px);
  justify-content: center;
}

.auth-card__heading {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.auth-card__lead {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.auth-card__helper {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 0.88rem;
}

#loginForm .form-group:has(+ .auth-card__helper) {
  margin-bottom: 0.25rem;
}

#loginForm .form-group + .auth-card__helper {
  margin: 0 0 0.85rem;
  text-align: right;
  font-size: 0.8rem;
  line-height: 1.2;
}

#loginForm .auth-card__helper .btn-link {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.2;
  text-decoration: none;
}

#loginForm .auth-card__helper .btn-link:hover {
  color: var(--text-secondary);
  text-decoration: underline;
  opacity: 1;
}

#loginForm > button[type="submit"].btn-block {
  margin-bottom: max(0px, calc(var(--auth-card-brand-pad-top) - var(--auth-card-panel-pad)));
}

#forgotPasswordForm .auth-card__heading {
  text-align: center;
}

#forgotPasswordForm .auth-card__lead {
  text-align: left;
}

#forgotPasswordForm .auth-card__helper {
  margin: 0.65rem 0 0;
}

#forgotPasswordForm .auth-card__helper .btn-link {
  color: var(--text-muted);
  text-decoration: underline;
}

#forgotPasswordForm .auth-card__helper .btn-link:hover {
  color: var(--text-secondary);
  text-decoration: underline;
  opacity: 1;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent, #3b82f6);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

.btn-link:hover {
  opacity: 0.85;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Tarjetas */
.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  padding: clamp(16px, 3vw, 24px);
  margin-bottom: clamp(14px, 2.5vw, 20px);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  min-width: 0;
}
@media (hover: hover) {
  .card:hover:not(.curso-player-sidebar) {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }

  /* Contenedores de pestaña: sin elevación al hover (evita salto al usar menús flotantes) */
  #tab-cursos > .card:hover,
  #tab-usuarios > .card:hover,
  #tab-estudiantes > .card:hover,
  #tab-bitacora > .card:hover,
  #tab-trading > .card:hover,
  #tab-notificaciones > .card:hover,
  #tab-mensajes > .card:hover,
  #tab-psico-gym > .card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }
}
.card h2 {
  font-family: var(--font-family);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: none;
}
.card h2::after {
  content: '';
  display: block;
  height: 2px;
  width: 56px;
  margin-top: 10px;
  background: var(--gradient-data);
  border-radius: 1px;
}

#tab-cursos > .card > h2,
#tab-cursos > .card .courses-card__header > h2,
#tab-usuarios > .card > h2,
#tab-usuarios > .card .usuarios-list-card__header > h2,
#tab-estudiantes > .card > h2,
#tab-bitacora > .card > h2,
#tab-trading > .card > h2,
#tab-mensajes > .card > h2,
#tab-mensajes > .card .messages-card__header > h2,
#tab-clases > .card > h2,
#tab-clases > .card .live-classes-card__header > h2,
#tab-psico-gym > .card > h2,
#tab-notificaciones > .card > h2 {
  text-align: center;
}

#tab-cursos > .card > h2::after,
#tab-cursos > .card .courses-card__header > h2::after,
#tab-usuarios > .card > h2::after,
#tab-usuarios > .card .usuarios-list-card__header > h2::after,
#tab-estudiantes > .card > h2::after,
#tab-bitacora > .card > h2::after,
#tab-trading > .card > h2::after,
#tab-mensajes > .card > h2::after,
#tab-mensajes > .card .messages-card__header > h2::after,
#tab-clases > .card > h2::after,
#tab-clases > .card .live-classes-card__header > h2::after,
#tab-psico-gym > .card > h2::after,
#tab-notificaciones > .card > h2::after {
  margin-left: auto;
  margin-right: auto;
}

.courses-card__header > h2,
.usuarios-list-card__header > h2,
.messages-card__header > h2,
.live-classes-card__header > h2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  z-index: 0;
}

.courses-card__header .courses-new-btn--icon,
.messages-card__header .messages-new-btn--icon,
.usuarios-list-card__header .usuarios-list-card__actions,
.live-classes-card__header .live-classes-card__actions {
  z-index: 1;
}

.card h3 {
  color: var(--text-primary);
  margin: 0 0 16px 0;
  font-size: 1.2rem;
  font-weight: 400;
}

/* Pestañas */
.app-tabs-wrap {
  position: relative;
  margin-top: 0 !important;
  margin-bottom: clamp(8px, 1.8vw, 12px);
}

.app-tabs-wrap .tabs.app-tabs {
  margin-bottom: 0 !important;
}

.app-tabs-wrap.has-tabs-fade-left::before,
.app-tabs-wrap.has-tabs-fade-right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 28px;
  pointer-events: none;
  z-index: 1;
}

.app-tabs-wrap.has-tabs-fade-left::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-app) 20%, transparent);
}

.app-tabs-wrap.has-tabs-fade-right::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-app) 20%, transparent);
}

.app-tabs-scroll-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--accent-cyan);
  pointer-events: none;
  animation: trading-scroll-hint-fade 1.6s ease-in-out infinite;
}

.app-tabs-scroll-hint--left {
  left: 0;
}

.app-tabs-scroll-hint--right {
  right: 0;
}

.app-tabs-scroll-hint[hidden] {
  display: none;
}

.app-tabs-scroll-hint__icon {
  display: block;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .app-tabs-scroll-hint {
    animation: none;
    opacity: 0.85;
  }
}

.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 0 !important;
  margin-bottom: clamp(8px, 1.8vw, 12px);
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.tab {
  flex: 0 0 auto;
  padding: 10px clamp(12px, 3vw, 24px);
  background: none;
  border: none;
  font-size: clamp(13px, 2vw, 16px);
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s, background 0.2s;
  position: relative;
  font-family: var(--font-family);
  white-space: nowrap;
  min-height: 44px;
}
.tab.active {
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: none;
}
.tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--gradient-data);
  border-radius: 2px 2px 0 0;
}

/* Formularios */
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
  color: var(--text-secondary);
}
.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font-family);
  transition: border 0.3s;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Autocompletado del navegador: evita fondo blanco/amarillo en modo oscuro */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  border-color: var(--border);
  transition: background-color 99999s ease-in-out 0s;
}

.form-input:-moz-autofill,
.form-input:-moz-autofill-preview {
  box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  -moz-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  border-color: var(--border);
}

/* —— Campos de contraseña con toggle de visibilidad —— */
.password-field {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.password-field > .form-input {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 42px;
}
.password-field__toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.password-field__toggle:hover {
  background: rgba(26, 212, 193, 0.12);
  color: var(--accent-cyan);
}
.password-field__toggle:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 1px;
}
.password-field__icon {
  display: block;
  pointer-events: none;
}

/* —— Campos de fecha unificados (DD/MM/AAAA + calendario) —— */
.app-date-field {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.app-date-field > .form-input.input-app-date,
.app-date-field > .form-input.input-birth-date {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 42px;
}
.app-date-trigger {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--accent-cyan);
  cursor: pointer;
}
.app-date-trigger:hover {
  background: rgba(26, 212, 193, 0.12);
}
.app-date-trigger:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 1px;
}
.form-input.input-app-date--invalid {
  border-color: #f87171;
}
.app-date-calendar {
  position: fixed;
  z-index: 12050;
  width: min(100vw - 16px, 320px);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.app-date-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.app-date-cal-selects {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.app-date-cal-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.app-date-cal-select:hover {
  border-color: var(--accent-cyan);
}
.app-date-cal-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.app-date-cal-year-select {
  flex: 0 1 72px;
}
.app-date-cal-title {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
}
.app-date-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--accent-cyan);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.app-date-cal-nav:hover {
  border-color: var(--accent-cyan);
  background: rgba(26, 212, 193, 0.1);
}
.app-date-cal-weekdays,
.app-date-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.app-date-cal-weekdays {
  margin-bottom: 6px;
}
.app-date-cal-weekdays span {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
}
.app-date-cal-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}
.app-date-cal-day--empty {
  pointer-events: none;
}
.app-date-cal-day:not(.app-date-cal-day--empty):not(:disabled):hover {
  background: rgba(26, 212, 193, 0.14);
  color: var(--accent-cyan);
}
.app-date-cal-day--selected {
  background: var(--accent-cyan) !important;
  color: #0b1220 !important;
  font-weight: 600;
}
.app-date-cal-day--disabled,
.app-date-cal-day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

select.form-input {
  cursor: pointer;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(12px, 2vw, 16px);
  align-items: end;
}
.form-group-btn {
  display: flex;
  align-items: flex-end;
}
.btn-block {
  width: 100%;
}

/* Botones */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
  text-align: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary {
  background: var(--text-primary);
  color: var(--bg-app);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-primary:hover {
  background: var(--accent-gold);
  color: var(--bg-app);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.btn.is-busy,
.btn.is-busy:hover {
  cursor: wait;
  pointer-events: none;
  transform: translateY(1px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  opacity: 0.92;
}

.btn-primary.is-busy,
.btn-primary.is-busy:hover {
  background: color-mix(in srgb, var(--accent-gold) 88%, black);
  color: var(--bg-app);
}

.btn-busy-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 1.25em;
}

.btn-busy-spinner {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(26, 212, 193, 0.35));
  animation: app-loading-girar-presionar 1280ms infinite;
  animation-timing-function: ease-out, cubic-bezier(0.12, 0.85, 0.22, 1), cubic-bezier(0.4, 0.05, 0.2, 1), cubic-bezier(0.33, 1.15, 0.55, 1), cubic-bezier(0.22, 1, 0.36, 1), ease-out;
}

.btn-busy-spinner--static {
  animation: none;
}

.btn.is-busy--icon-only .btn-busy-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-sm.is-busy .btn-busy-spinner {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-busy,
  .btn.is-busy:hover {
    transform: none;
  }
  .btn-busy-spinner {
    animation: none;
  }
}

.btn-secondary {
  background: var(--accent-cyan);
  color: var(--text-primary);
}
.btn-secondary:hover {
  background: var(--accent-blue);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
}
.btn-outline:hover {
  background: var(--text-primary);
  color: var(--bg-app);
}
.btn-danger {
  background: #e53e3e;
  color: white;
}
.btn-danger:hover {
  background: #c53030;
}

/* Alertas */
.alert-placeholder {
  min-height: 50px;
}

.alert-placeholder:empty {
  display: none;
  min-height: 0;
}

#inviteAlert.alert {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow: auto;
}

.alert {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.alert-success {
  background: #1e4620;
  color: #a3d9a5;
  border: 1px solid #2d5a2f;
}
.alert-error {
  background: #4a1c24;
  color: #f5a3ab;
  border: 1px solid #5a2a32;
}
.alert-info {
  background: #1a3b42;
  color: #a3d9e8;
  border: 1px solid #2a4b52;
}

/* Tablas — scroll horizontal en pantallas estrechas (solo la tabla, no la paginación) */
.user-table,
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
#trading-logs-table,
#estudiante-trades-table {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}
.trading-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.trading-table-scroll-hint-slot {
  height: 22px;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.trading-table-scroll-hint-slot[hidden] {
  display: none;
}

.trading-table-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  animation: trading-scroll-hint-fade 2s ease-in-out infinite;
}

.trading-table-scroll-hint__icon {
  flex-shrink: 0;
  display: block;
}

.trading-table-scroll-hint-slot.is-dismissed .trading-table-scroll-hint {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

@keyframes trading-scroll-hint-fade {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trading-table-scroll-hint {
    animation: none;
    opacity: 0.85;
  }
}

.user-table table,
.table-scroll table,
#trading-logs-table .trading-table-scroll .trading-table,
#estudiante-trades-table .trading-table-scroll .trading-table {
  width: 100%;
  min-width: min(100%, 520px);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: clamp(8px, 2vw, 12px);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  background: var(--bg-input);
  font-weight: 600;
  color: var(--text-primary);
}
tr:hover {
  background: var(--bg-input);
}

/* Badges */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin: 2px;
}
.badge-active { background: #1e4620; color: #a3d9a5; }
.badge-inactive { background: #4a1c24; color: #f5a3ab; }

.estado-cuenta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.estado-cuenta--activo {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.estado-cuenta--inactivo {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
}

/* Etiquetas de usuario (staff) */
.student-profile-field--tags {
  margin-top: 4px;
}

.perfil-usuarios-tags-row {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 8px;
}

.user-tags-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.user-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.user-tags-empty {
  font-size: 0.875rem;
}

.user-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid var(--user-tag-border, rgba(26, 212, 193, 0.35));
  background: var(--user-tag-bg, rgba(26, 212, 193, 0.12));
  color: var(--user-tag-fg, var(--accent-cyan));
}

.user-tag-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: -2px -4px -2px 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.user-tag-chip-remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.35);
}

.user-tags-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

button.student-profile-label.user-tags-label-trigger {
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}

button.student-profile-label.user-tags-label-trigger:hover,
button.student-profile-label.user-tags-label-trigger:focus-visible {
  color: var(--accent-cyan, #1ad4c1);
  outline: none;
}

button.student-profile-label.user-tags-label-trigger[aria-expanded='true'] {
  color: var(--accent-cyan, #1ad4c1);
}

.user-tags-limit-hint {
  font-size: 0.8125rem;
}

.user-tags-add-form {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 10px);
  background: var(--bg-input, rgba(255, 255, 255, 0.03));
}

.user-tags-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.user-tags-add-row .user-tags-name-input {
  flex: 1 1 160px;
  min-width: 0;
}

.user-tags-hint {
  margin: 0 0 8px;
  font-size: 0.75rem;
}

.user-tags-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.user-tags-color-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  background-color: var(--swatch-bg, #2dd4bf);
}

.user-tags-color-swatch.is-selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent-cyan);
}

.user-tags-catalog-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-tags-catalog-pick {
  cursor: pointer;
  border-width: 1px;
  font: inherit;
}

.user-tags-catalog-pick:hover {
  filter: brightness(1.08);
}

.user-tags-catalog-empty {
  font-size: 0.8125rem;
}

.user-tag-chip--teal { --user-tag-fg: #2dd4bf; --user-tag-bg: rgba(45, 212, 191, 0.14); --user-tag-border: rgba(45, 212, 191, 0.4); }
.user-tag-chip--emerald { --user-tag-fg: #34d399; --user-tag-bg: rgba(52, 211, 153, 0.14); --user-tag-border: rgba(52, 211, 153, 0.4); }
.user-tag-chip--sky { --user-tag-fg: #38bdf8; --user-tag-bg: rgba(56, 189, 248, 0.14); --user-tag-border: rgba(56, 189, 248, 0.4); }
.user-tag-chip--violet { --user-tag-fg: #a78bfa; --user-tag-bg: rgba(167, 139, 250, 0.14); --user-tag-border: rgba(167, 139, 250, 0.4); }
.user-tag-chip--rose { --user-tag-fg: #fb7185; --user-tag-bg: rgba(251, 113, 133, 0.14); --user-tag-border: rgba(251, 113, 133, 0.4); }
.user-tag-chip--amber { --user-tag-fg: #fbbf24; --user-tag-bg: rgba(251, 191, 36, 0.14); --user-tag-border: rgba(251, 191, 36, 0.4); }
.user-tag-chip--orange { --user-tag-fg: #fb923c; --user-tag-bg: rgba(251, 146, 60, 0.14); --user-tag-border: rgba(251, 146, 60, 0.4); }
.user-tag-chip--fuchsia { --user-tag-fg: #e879f9; --user-tag-bg: rgba(232, 121, 249, 0.14); --user-tag-border: rgba(232, 121, 249, 0.4); }
.user-tag-chip--lime { --user-tag-fg: #a3e635; --user-tag-bg: rgba(163, 230, 53, 0.14); --user-tag-border: rgba(163, 230, 53, 0.4); }
.user-tag-chip--cyan { --user-tag-fg: #22d3ee; --user-tag-bg: rgba(34, 211, 238, 0.14); --user-tag-border: rgba(34, 211, 238, 0.4); }
.user-tag-chip--indigo { --user-tag-fg: #818cf8; --user-tag-bg: rgba(129, 140, 248, 0.14); --user-tag-border: rgba(129, 140, 248, 0.4); }
.user-tag-chip--slate { --user-tag-fg: #94a3b8; --user-tag-bg: rgba(148, 163, 184, 0.14); --user-tag-border: rgba(148, 163, 184, 0.4); }

.user-tags-color-swatch--teal { --swatch-bg: #2dd4bf; }
.user-tags-color-swatch--emerald { --swatch-bg: #34d399; }
.user-tags-color-swatch--sky { --swatch-bg: #38bdf8; }
.user-tags-color-swatch--violet { --swatch-bg: #a78bfa; }
.user-tags-color-swatch--rose { --swatch-bg: #fb7185; }
.user-tags-color-swatch--amber { --swatch-bg: #fbbf24; }
.user-tags-color-swatch--orange { --swatch-bg: #fb923c; }
.user-tags-color-swatch--fuchsia { --swatch-bg: #e879f9; }
.user-tags-color-swatch--lime { --swatch-bg: #a3e635; }
.user-tags-color-swatch--cyan { --swatch-bg: #22d3ee; }
.user-tags-color-swatch--indigo { --swatch-bg: #818cf8; }
.user-tags-color-swatch--slate { --swatch-bg: #94a3b8; }

.user-tags-filter-field {
  min-width: min(100%, 200px);
}

.user-tags-filter-field--modal {
  min-width: 0;
  width: 100%;
}

.user-tags-filter-modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.user-tags-filter-modal-title {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.user-tags-filter-admin-link {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-cyan, #1ad4c1);
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  line-height: 1.3;
}

.user-tags-filter-admin-link:hover,
.user-tags-filter-admin-link:focus-visible {
  color: var(--text-primary);
  outline: none;
}

.user-tags-filter-admin-link[hidden] {
  display: none;
}

.user-tags-filter--modal {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-tags-filter--modal .user-tags-filter-options {
  max-height: min(200px, 36vh);
  padding: 8px 10px;
}

.user-tags-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(320px, 50vh);
  overflow: hidden;
}

.user-tags-filter-search {
  flex-shrink: 0;
  width: 100%;
  min-height: 36px;
  font-size: 0.875rem;
}

.user-tags-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  overflow-y: auto;
  max-height: 220px;
  padding: 8px 10px;
  box-sizing: border-box;
}

.user-tags-filter-pick {
  border: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  margin: 2px;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.user-tags-filter-pick:hover {
  transform: none;
}

.user-tags-filter-pick.is-selected {
  border-color: var(--accent-cyan, #1ad4c1);
  box-shadow:
    0 0 0 1px var(--bg-elevated, var(--bg-surface)),
    0 0 0 3px rgba(26, 212, 193, 0.45);
  font-weight: 700;
}

.user-tags-filter-pick:focus-visible {
  outline: 2px solid var(--accent-cyan, #1ad4c1);
  outline-offset: 2px;
}

.user-tags-filter-pick.is-filter-hidden,
.user-tags-filter-pick[hidden] {
  display: none !important;
}

.user-tags-filter-chip-preview {
  font-size: 0.75rem;
  padding: 4px 10px;
}

.user-tags-filter-empty,
.user-tags-filter-no-match {
  margin: 0;
  padding: 4px;
  font-size: 0.8125rem;
  width: 100%;
}

.modal-etiquetas-admin {
  max-width: min(520px, 96vw);
  max-height: min(85vh, 640px);
  display: flex;
  flex-direction: column;
}

.modal-etiquetas-admin .etiquetas-admin-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.etiquetas-admin-intro {
  margin: 0 0 12px;
  font-size: 0.8125rem;
}

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

.etiquetas-admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input, rgba(255, 255, 255, 0.02));
}

.etiquetas-admin-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.etiquetas-admin-row-meta {
  font-size: 0.8125rem;
}

.etiquetas-admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-lead { background: #5a5a5a; color: white; }
.badge-estudiante { background: #1e6f9f; color: white; }
.badge-tutor { background: #2c6e4e; color: white; }
.badge-comercial { background: #b87c1f; color: white; }
.badge-contador { background: #5e3a9e; color: white; }
.badge-admin { background: #b33b3b; color: white; }
.badge-superadmin { background: #6d1e1e; color: white; }

/* Header de usuario */
.user-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(10px, 2vw, 16px);
  margin: 0;
  position: absolute;
  top: 4px;
  right: 0;
  flex-wrap: wrap;
  z-index: 2;
}

.user-header-start {
  display: none;
}

.user-header-end {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-profile-trigger {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  min-height: 34px;
}

.user-profile-trigger:hover {
  border-color: rgba(26, 212, 193, 0.45);
  background: rgba(26, 212, 193, 0.08);
}

.user-profile-trigger[aria-expanded="true"] {
  border-color: rgba(26, 212, 193, 0.55);
  background: rgba(26, 212, 193, 0.1);
  box-shadow: 0 0 0 1px rgba(26, 212, 193, 0.12);
}

.user-profile-trigger__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(26, 212, 193, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
}

.user-profile-trigger__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-profile-trigger__name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  line-height: 1.2;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-roles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.user-roles--header {
  justify-content: flex-end;
}

.user-roles[hidden] {
  display: none !important;
}

.btn-perfil-toggle {
  flex-shrink: 0;
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  line-height: 1.3;
  min-height: 28px;
  white-space: nowrap;
}

.btn-notificaciones-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.user-notificaciones-trigger {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
  gap: 0;
}

.btn-notificaciones-toggle-icon {
  display: inline-block !important;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}

.btn-notificaciones-toggle--pendiente {
  color: var(--bg-app);
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: none;
}

.btn-notificaciones-toggle--pendiente:hover {
  color: var(--bg-app);
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  filter: brightness(1.08);
}

.btn-notificaciones-toggle--pendiente .btn-notificaciones-toggle-icon {
  color: var(--bg-app);
  transform-origin: top center;
  animation: notificaciones-campana-swing 2s ease-in-out infinite;
}

@keyframes notificaciones-campana-swing {
  0%,
  72%,
  100% {
    transform: rotate(0deg);
  }
  78% {
    transform: rotate(-17deg);
  }
  84% {
    transform: rotate(15deg);
  }
  90% {
    transform: rotate(-10deg);
  }
  96% {
    transform: rotate(6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-notificaciones-toggle--pendiente .btn-notificaciones-toggle-icon {
    animation: none;
  }
}

.btn-text-logout {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--text-muted);
  font-size: clamp(0.75rem, 2vw, 0.8125rem);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  margin-left: auto;
}

.btn-text-logout:hover {
  color: var(--accent-cyan);
}

.user-perfil-header-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.user-perfil-header-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.btn-text-accion-perfil {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--text-muted);
  font-size: clamp(0.75rem, 2vw, 0.8125rem);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.btn-text-accion-perfil:hover {
  color: var(--accent-cyan);
}

/* Acordeón perfil */
.user-perfil-accordion {
  margin: 0 0 clamp(14px, 2.5vw, 20px);
  padding: clamp(14px, 3vw, 20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transform-origin: top right;
  transition:
    max-height 0.32s ease-out,
    opacity 0.28s ease-out,
    transform 0.28s ease-out,
    padding 0.32s ease-out,
    margin 0.32s ease-out,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#appScreen .user-perfil-accordion {
  margin-top: 8px;
}

.user-perfil-accordion[hidden] {
  display: none !important;
}

.user-perfil-accordion.is-open {
  border-color: rgba(26, 212, 193, 0.35);
  opacity: 1;
  transform: translateY(0);
}

.user-perfil-accordion.is-open.is-loaded,
.user-perfil-accordion.is-open:not(.is-loading):not(.is-opening):not(.is-closing) {
  max-height: none;
  overflow: visible;
}

.user-perfil-accordion.is-open.is-loading:not(.is-closing),
.user-perfil-accordion.is-open.is-opening,
.user-perfil-accordion.is-open.is-closing {
  overflow: hidden;
}

.user-perfil-accordion.is-open.is-loading:not(.is-closing) {
  min-height: clamp(220px, 32vw, 280px);
}

.user-perfil-accordion.is-open.is-opening.is-loading {
  max-height: clamp(220px, 32vw, 280px);
  min-height: clamp(220px, 32vw, 280px);
}

.user-perfil-accordion.is-open.is-opening:not(.is-loading) {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  padding-block: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.user-perfil-accordion.is-open.is-closing {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  padding-block: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.user-perfil-accordion.is-loading {
  animation: perfil-accordion-glow 1.8s ease-in-out infinite;
}

@keyframes perfil-accordion-glow {
  0%,
  100% {
    border-color: rgba(26, 212, 193, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 0 0 0 rgba(26, 212, 193, 0);
  }
  50% {
    border-color: rgba(26, 212, 193, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 0 18px 0 rgba(26, 212, 193, 0.22);
  }
}

.user-perfil-accordion__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(180px, 28vw, 240px);
}

.user-perfil-accordion__loader .app-loading {
  min-height: 0;
}

.user-perfil-accordion__error {
  flex-direction: column;
  gap: 12px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.user-perfil-accordion__error p {
  margin: 0;
}

.user-perfil-accordion__error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.user-perfil-content {
  min-width: 0;
}

.user-perfil-content.is-revealing {
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.28s ease-out, filter 0.28s ease-out;
}

.user-perfil-content.is-revealing.is-revealed {
  opacity: 1;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .user-perfil-accordion {
    transition: opacity 0.15s ease, max-height 0.15s ease;
  }

  .user-perfil-accordion.is-open.is-opening,
  .user-perfil-accordion.is-open.is-closing {
    transform: none;
  }

  .user-perfil-accordion.is-loading {
    animation: none;
    border-color: rgba(26, 212, 193, 0.45);
  }

  .user-perfil-content.is-revealing {
    filter: none;
    transition: opacity 0.15s ease;
  }
}

/* Transiciones de panel reutilizables (pestañas, tarjetas) */
.panel-transition.card {
  --panel-transition-min-height-loading: clamp(220px, 32vw, 280px);
  position: relative;
  overflow: visible;
  transform-origin: top center;
  transition:
    max-height 0.32s ease-out,
    opacity 0.28s ease-out,
    transform 0.32s ease-out,
    min-height 0.28s ease-out,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.panel-transition.is-open.is-loading,
.panel-transition.is-open.is-opening,
.panel-transition.is-open.is-closing {
  overflow: hidden;
}

#tab-cursos > .card.panel-transition,
#tab-notificaciones > .card.panel-transition,
#tab-mensajes > .card.panel-transition,
#tab-bitacora > .card.panel-transition,
#tab-trading > .card.panel-transition,
#tab-registrar-trade > .card.panel-transition,
#tab-psico-gym > .card.panel-transition {
  transform: none;
}

#tab-cursos > .card.panel-transition.is-open,
#tab-notificaciones > .card.panel-transition.is-open,
#tab-mensajes > .card.panel-transition.is-open,
#tab-bitacora > .card.panel-transition.is-open,
#tab-trading > .card.panel-transition.is-open,
#tab-registrar-trade > .card.panel-transition.is-open,
#tab-psico-gym > .card.panel-transition.is-open {
  transform: translateY(0);
}

#tab-cursos > .card.panel-transition.is-open.is-opening:not(.is-loading),
#tab-notificaciones > .card.panel-transition.is-open.is-opening:not(.is-loading),
#tab-mensajes > .card.panel-transition.is-open.is-opening:not(.is-loading),
#tab-bitacora > .card.panel-transition.is-open.is-opening:not(.is-loading),
#tab-trading > .card.panel-transition.is-open.is-opening:not(.is-loading),
#tab-registrar-trade > .card.panel-transition.is-open.is-opening:not(.is-loading),
#tab-cursos > .card.panel-transition.is-open.is-closing,
#tab-notificaciones > .card.panel-transition.is-open.is-closing,
#tab-mensajes > .card.panel-transition.is-open.is-closing,
#tab-bitacora > .card.panel-transition.is-open.is-closing,
#tab-trading > .card.panel-transition.is-open.is-closing,
#tab-registrar-trade > .card.panel-transition.is-open.is-closing {
  transform: translateY(-10px);
  margin-bottom: 0;
  padding-block: 0;
  min-height: 0;
}

#tab-cursos > .card.panel-transition.is-open.is-opening.is-loading,
#tab-notificaciones > .card.panel-transition.is-open.is-opening.is-loading,
#tab-mensajes > .card.panel-transition.is-open.is-opening.is-loading,
#tab-bitacora > .card.panel-transition.is-open.is-opening.is-loading,
#tab-trading > .card.panel-transition.is-open.is-opening.is-loading,
#tab-registrar-trade > .card.panel-transition.is-open.is-opening.is-loading {
  transform: translateY(-10px);
  margin-bottom: clamp(14px, 2.5vw, 20px);
  padding-block: clamp(16px, 3vw, 24px);
  min-height: var(--panel-transition-min-height-loading);
  max-height: var(--panel-transition-min-height-loading);
  opacity: 0;
}

.panel-transition.is-open.is-loading:not(.is-closing) {
  min-height: var(--panel-transition-min-height-loading);
  max-height: none;
}

.panel-transition.is-open.is-opening:not(.is-loading) {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
}

.panel-transition.is-open.is-opening.is-loading {
  max-height: var(--panel-transition-min-height-loading);
  min-height: var(--panel-transition-min-height-loading);
  opacity: 0;
  transform: translateY(-8px);
}

/* Pestañas con poco contenido inicial: reservar más alto para el q-loader */
#tab-registrar-trade > .card.panel-transition {
  --panel-transition-min-height-loading: clamp(260px, 38vw, 320px);
}

#tab-trading > .card.panel-transition.is-loading {
  --panel-transition-min-height-loading: clamp(240px, 34vw, 300px);
}

.panel-transition.is-open {
  border-color: rgba(26, 212, 193, 0.35);
  opacity: 1;
  transform: translateY(0);
}

.panel-transition.is-open.is-loaded,
.panel-transition.is-open:not(.is-loading):not(.is-opening):not(.is-closing) {
  max-height: none;
  min-height: 0;
  overflow: visible;
}

.panel-transition.is-open.is-closing {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.panel-transition.is-loading {
  animation: panel-transition-glow 1.8s ease-in-out infinite;
}

@keyframes panel-transition-glow {
  0%,
  100% {
    border-color: rgba(26, 212, 193, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 0 0 0 rgba(26, 212, 193, 0);
  }
  50% {
    border-color: rgba(26, 212, 193, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 0 18px 0 rgba(26, 212, 193, 0.22);
  }
}

.panel-transition__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(180px, 28vw, 240px);
}

.panel-transition__loader .app-loading {
  min-height: 0;
}

.panel-transition__overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  background: rgba(10, 12, 18, 0.35);
  backdrop-filter: blur(1px);
  border-radius: inherit;
}

.panel-transition__overlay[hidden] {
  display: none !important;
}

.panel-transition .is-revealing,
.is-revealing.panel-transition__content {
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.28s ease-out, filter 0.28s ease-out;
}

.panel-transition .is-revealing.is-revealed,
.is-revealing.panel-transition__content.is-revealed {
  opacity: 1;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .panel-transition.card {
    transition: opacity 0.15s ease, max-height 0.15s ease;
  }

  .panel-transition.is-open.is-opening,
  .panel-transition.is-open.is-closing {
    transform: none;
  }

  .panel-transition.is-loading {
    animation: none;
    border-color: rgba(26, 212, 193, 0.45);
  }

  .panel-transition .is-revealing,
  .is-revealing.panel-transition__content {
    filter: none;
    transition: opacity 0.15s ease;
  }
}

.user-perfil-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 28px);
  align-items: start;
}

.user-perfil-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 2vw, 16px);
  min-width: 0;
}

.user-perfil-fields .form-group {
  margin-bottom: 0;
}

.user-perfil-readonly hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: clamp(16px, 3vw, 24px) 0;
}

.user-perfil-hint {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  grid-column: 1 / -1;
}

.user-perfil-hint--top {
  margin: 0 0 clamp(12px, 2vw, 16px);
  padding: 10px 12px;
  background: rgba(26, 212, 193, 0.08);
  border: 1px solid rgba(26, 212, 193, 0.2);
  border-radius: 8px;
}

.user-perfil-fields--edit {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-perfil-fields--edit > button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 4px;
}

.user-perfil-photo-upload {
  cursor: pointer;
  display: block;
  justify-self: center;
}

.user-perfil-photo-wrap {
  justify-self: center;
}

.user-perfil-photo-circle {
  position: relative;
  width: clamp(96px, 22vw, 128px);
  height: clamp(96px, 22vw, 128px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg-input);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.user-perfil-photo-upload:hover .user-perfil-photo-circle,
.user-perfil-photo-upload:focus-within .user-perfil-photo-circle {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.user-perfil-photo-circle .student-profile-photo {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  object-fit: cover;
}

.user-perfil-photo-circle--empty .student-profile-photo--placeholder {
  display: none !important;
}

.user-perfil-photo-readonly-empty {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 22vw, 128px);
  height: clamp(96px, 22vw, 128px);
  border-radius: 50%;
  font-weight: 700;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 2px solid var(--border);
}

.user-perfil-photo-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-size: clamp(0.7rem, 2.2vw, 0.8rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-secondary);
  background: var(--bg-input);
  z-index: 1;
  transition: color 0.2s, background 0.2s;
}

.user-perfil-photo-upload:hover .user-perfil-photo-hint,
.user-perfil-photo-upload:focus-within .user-perfil-photo-hint {
  color: var(--accent-cyan);
}

.user-perfil-photo-circle--has-preview .user-perfil-photo-hint {
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-primary);
  opacity: 0;
}

.user-perfil-photo-upload:hover .user-perfil-photo-circle--has-preview .user-perfil-photo-hint,
.user-perfil-photo-upload:focus-within .user-perfil-photo-circle--has-preview .user-perfil-photo-hint {
  opacity: 1;
}

.student-profile-field--solicitud {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
}

.student-profile-field--solicitud-action .btn-solicitar-cambio-perfil {
  align-self: flex-start;
  margin-top: 2px;
  white-space: normal;
  text-align: left;
}

.user-perfil-solicitud-hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

.user-perfil-fields .student-profile-field {
  min-height: 100%;
}

.student-profile-field-estado-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.btn-solicitar-cambio-perfil,
.btn-perfil-accion {
  flex-shrink: 0;
  white-space: nowrap;
}

.user-perfil-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.user-perfil-card-layout .user-perfil-photo-upload--card {
  display: inline-block;
  cursor: pointer;
}

.user-perfil-photo-circle--card {
  width: clamp(88px, 18vw, 128px);
  height: clamp(88px, 18vw, 128px);
  border-radius: 50%;
  border: 2px solid var(--border);
  overflow: hidden;
  position: relative;
}

.user-perfil-photo-circle--card .student-profile-photo,
.user-perfil-photo-circle--card .student-profile-photo--placeholder {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50%;
}

.student-profile-field--meta-action {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-perfil-pending-badge {
  font-size: 0.75rem;
  color: var(--accent-gold);
  font-weight: 600;
}

.modal-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}

.log-link-foto {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.log-link-foto:hover {
  color: var(--text-primary);
}

.usuarios-log-body a.log-link-foto,
.activity-detail-body a.log-link-foto {
  color: var(--accent-cyan);
}

.log-link-trade {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  line-height: inherit;
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.log-link-trade:hover {
  color: var(--text-primary);
}

.activity-detail-body .log-link-trade {
  color: var(--accent-cyan);
}

.user-perfil-readonly .student-profile-field {
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.estudiante-perfil-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.estudiante-perfil-header-block {
  margin-bottom: 12px;
  min-width: 0;
}

.estudiante-perfil-header-email-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  min-width: 0;
}

.estudiante-perfil-header-bitacora-wrap {
  flex-shrink: 0;
  align-self: center;
  margin: 0;
  padding-top: 0;
}

.estudiante-perfil-header-email {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.estudiante-perfil-header-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.estudiante-perfil-header-name h2 {
  min-width: 0;
  margin: 0;
  line-height: 1.15;
}

.estudiante-perfil-header-name .estudiante-perfil-bitacora-link.estudiante-perfil-mensaje-btn {
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: var(--text-primary);
}

@media (hover: hover) {
  .estudiante-perfil-header-name .estudiante-perfil-bitacora-link.estudiante-perfil-mensaje-btn:hover {
    color: var(--accent-cyan);
    background: none;
  }
}

.estudiante-perfil-header-name .estudiante-perfil-mensaje-icon {
  width: 1em;
  height: 1em;
  display: block;
  transform: translateY(-0.2em);
}

.estudiante-perfil-solicitudes {
  margin-top: 16px;
}

.profile-request-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--bg-input);
}

.estudiante-perfil-solicitudes .profile-request-card--estudiante {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.estudiante-perfil-solicitudes .profile-request-card-content {
  flex: 1 1 auto;
  min-width: 0;
}

.estudiante-perfil-solicitudes .profile-request-meta {
  margin: 0 0 4px;
  font-size: 12px;
}

.estudiante-perfil-solicitudes .profile-request-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.estudiante-perfil-solicitudes .profile-request-card-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
}

.estudiante-perfil-solicitudes .profile-request-approve-btn {
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 0;
  height: auto;
  line-height: 1.25;
}

.notificaciones-section {
  margin-bottom: 24px;
}

.notificaciones-section:last-of-type {
  margin-bottom: 0;
}

.notificaciones-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.notificaciones-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.notificaciones-section-hint {
  margin: 0 0 12px;
  font-size: 0.85rem;
}

.notificaciones-solicitudes-bandeja {
  padding: 14px 16px;
  border: 1px solid rgba(26, 212, 193, 0.25);
  border-radius: var(--radius-card);
  background: rgba(26, 212, 193, 0.06);
}

.notificaciones-solicitudes-list,
.notificaciones-personal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notificacion-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}

.notificacion-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notificacion-card-content {
  flex: 1;
  min-width: 0;
}

.notificacion-card--info {
  border-color: rgba(26, 212, 193, 0.35);
}

.notificacion-card--success {
  border-color: rgba(26, 212, 193, 0.55);
  background: rgba(26, 212, 193, 0.1);
}

.notificacion-card--rejected {
  border-color: rgba(179, 59, 59, 0.45);
  background: rgba(179, 59, 59, 0.08);
}

.notificacion-card--birthday {
  border-color: rgba(212, 175, 55, 0.55);
  background: linear-gradient(145deg, rgba(32, 28, 22, 0.98), rgba(18, 16, 14, 0.99));
  box-shadow: 0 6px 28px rgba(212, 175, 55, 0.12);
}

.notificacion-card--birthday .notificacion-card-title {
  color: #e8c547;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.notificacion-inline-link--birthday {
  color: var(--accent-cyan);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notificacion-inline-link--birthday:hover {
  color: #5ee8d8;
}

.notificacion-card-meta {
  margin: 0 0 4px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.notificacion-card-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.notificacion-card-title .notificacion-solicitud-roles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.notificacion-card-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.notificacion-card-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.notificacion-card-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  margin: 0;
  padding: 2px 0;
}

.notificacion-card-actions .btn-sm {
  padding: 4px 10px;
  font-size: 0.75rem;
  line-height: 1.3;
  min-height: 28px;
}

@media (max-width: 720px) {
  .notificacion-card-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .notificacion-card-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 4px;
  }
}

.notificaciones-empty {
  margin: 0;
  font-size: 0.875rem;
}

.notificaciones-nuevas-banner {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(26, 212, 193, 0.35);
  border-radius: 8px;
  background: rgba(26, 212, 193, 0.12);
  color: var(--accent-cyan);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.notificaciones-nuevas-banner[hidden] {
  display: none !important;
}

.notificaciones-nuevas-banner:hover {
  background: rgba(26, 212, 193, 0.18);
}

.notificaciones-solicitudes-empty {
  margin: 0;
  font-size: 0.875rem;
}

.badge-solicitud-count {
  background: var(--accent-gold);
  color: #1a1a1a;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
}

.badge-inactividad-count {
  background: #c45c26;
  color: #fff;
}

.notificacion-card--inactividad .notificacion-card-title {
  color: #c45c26;
}

.usuarios-solicitud-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.usuarios-solicitud-user-name {
  display: block;
  font-size: 0.95rem;
}

.notificacion-solicitud-roles,
.usuarios-solicitud-roles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.notificacion-solicitud-email,
.usuarios-solicitud-email {
  margin: 4px 0 0;
  font-size: 0.8rem;
}

.notificacion-solicitud-message,
.usuarios-solicitud-message {
  margin: 0 0 6px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.notificacion-solicitud-actions,
.usuarios-solicitud-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.profile-request-changes {
  font-size: 0.8rem;
  white-space: pre-wrap;
  margin: 8px 0;
  color: var(--text-secondary);
}

.photo-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(88px, 100%), 1fr));
  gap: 12px;
}

.photo-history-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.photo-history-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

@media (max-width: 768px) {
  body:not(.is-auth) #appTopBar {
    display: none;
  }

  #appScreen .app-header-shell {
    padding-top: 0;
  }

  #appScreen .user-header {
    position: static;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    margin-bottom: clamp(10px, 2vw, 14px);
  }

  #appScreen .user-header-start {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding-right: clamp(8px, 2vw, 12px);
  }

  .app-top-bar__title--in-header {
    display: block;
  }

  #appScreen .user-header-end {
    width: auto;
    flex-shrink: 0;
    justify-content: flex-end;
  }

  .user-perfil-form-grid {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .user-perfil-photo-upload,
  .user-perfil-photo-wrap {
    justify-self: center;
  }

  .user-perfil-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  #appScreen .user-header-start {
    flex-direction: row;
    align-items: center;
    width: auto;
    flex: 1;
  }

  .user-header-start {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .btn-perfil-toggle {
    width: 100%;
    text-align: center;
  }
}

/* Secciones del panel admin */
.admin-section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.admin-section:last-child {
  border-bottom: none;
}

.tab-content {
  min-width: 0;
  width: 100%;
}

/* Toolbars con campos flex inline (estudiantes, trading) */
.students-toolbar,
.trading-course-toolbar,
.student-trading-filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 12px);
  align-items: flex-end;
}
.students-toolbar .form-group,
.student-trading-filters .form-group {
  flex: 1 1 160px;
  min-width: min(100%, 140px);
  margin-bottom: 0;
}
.students-toolbar .form-group[style*="flex: 2"],
.student-trading-filters .form-group[style*="flex: 2"] {
  flex: 2 1 220px;
  min-width: min(100%, 200px);
}
.students-toolbar .form-group-btn,
.student-trading-filters .form-group-btn {
  flex: 1 1 auto;
  min-width: min(100%, 120px);
}
.students-toolbar .btn,
.student-trading-filters .btn {
  width: 100%;
}

/* ========== PESTAÑA ESTUDIANTES — altura uniforme y sugerencias ========== */
#tab-estudiantes,
#tab-usuarios {
    --estudiantes-control-height: 42px;
}

#tab-estudiantes input.form-input,
#tab-estudiantes select.form-input,
#tab-usuarios input.form-input,
#tab-usuarios select.form-input {
    height: var(--estudiantes-control-height);
    min-height: var(--estudiantes-control-height);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(var(--estudiantes-control-height) - 2px);
}

#tab-estudiantes .students-toolbar .form-group-btn:not(.estudiantes-toolbar-filtros),
#tab-usuarios .students-toolbar .form-group-btn:not(.estudiantes-toolbar-filtros) {
    flex: 1 1 auto;
    min-width: min(100%, 120px);
}

#tab-estudiantes .students-toolbar .form-group-btn.estudiantes-toolbar-filtros,
#tab-usuarios .students-toolbar .form-group-btn.estudiantes-toolbar-filtros {
    flex: 0 0 auto;
    width: auto;
    min-width: var(--estudiantes-control-height, 42px);
    max-width: var(--estudiantes-control-height, 42px);
}

#tab-estudiantes .students-toolbar .form-group-btn:not(.estudiantes-toolbar-filtros) .btn,
#tab-usuarios .students-toolbar .form-group-btn:not(.estudiantes-toolbar-filtros) .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--estudiantes-control-height);
    min-height: var(--estudiantes-control-height);
    max-height: var(--estudiantes-control-height);
    padding: 0 20px;
    box-sizing: border-box;
    line-height: 1.2;
}

.estudiantes-search-wrap {
    position: relative;
    width: 100%;
}

.estudiantes-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    max-height: min(320px, 50vh);
    overflow-y: auto;
}

.estudiantes-search-suggestion-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--bg-input);
    background: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.estudiantes-search-suggestion-item:last-child {
    border-bottom: none;
}

.estudiantes-search-suggestion-item:hover,
.estudiantes-search-suggestion-item:focus-visible {
    background: var(--bg-input);
    outline: none;
}

.estudiantes-search-suggestion-name {
    font-weight: 600;
    font-size: 14px;
}

.estudiantes-search-suggestion-email {
    font-size: 12px;
}

.estudiantes-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(10px, 2vw, 12px);
}

.estudiantes-toolbar-search {
    flex: 2 1 220px;
    min-width: min(100%, 200px);
}

.estudiantes-toolbar-course {
    flex: 2 1 200px;
    min-width: min(100%, 180px);
}

.estudiantes-toolbar-buscar {
    flex: 0 1 auto;
    min-width: min(100%, 120px);
}

.estudiantes-toolbar-filtros {
    flex: 0 0 auto;
    min-width: 0;
}

/* Buscar + filtro pegados (sin hueco por flex/min-width del toolbar) */
.estudiantes-toolbar-buscar-filtros {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    width: max-content;
    max-width: 100%;
    margin-bottom: 0;
}

#tab-estudiantes .students-toolbar .estudiantes-toolbar-buscar-filtros .form-group-btn,
#tab-usuarios .students-toolbar .estudiantes-toolbar-buscar-filtros .form-group-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    margin-bottom: 0;
}

#tab-estudiantes .students-toolbar .estudiantes-toolbar-buscar-filtros .form-group-btn .btn,
#tab-usuarios .students-toolbar .estudiantes-toolbar-buscar-filtros .form-group-btn .btn {
    width: auto;
    box-sizing: border-box;
    height: var(--estudiantes-control-height);
    min-height: var(--estudiantes-control-height);
    max-height: var(--estudiantes-control-height);
}

#tab-estudiantes .estudiantes-toolbar-buscar-filtros .estudiantes-toolbar-buscar .btn,
#tab-usuarios .estudiantes-toolbar-buscar-filtros .estudiantes-toolbar-buscar .btn {
    min-width: 4.75rem;
    padding-left: 14px;
    padding-right: 14px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#tab-estudiantes .estudiantes-toolbar-buscar-filtros .estudiantes-toolbar-filtros,
#tab-usuarios .estudiantes-toolbar-buscar-filtros .estudiantes-toolbar-filtros {
    min-width: 0;
    max-width: none;
}

#tab-estudiantes .estudiantes-toolbar-buscar-filtros .estudiantes-filtros-btn,
#tab-usuarios .estudiantes-toolbar-buscar-filtros .estudiantes-filtros-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.estudiantes-filtros-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--estudiantes-control-height, 42px);
    min-width: var(--estudiantes-control-height, 42px);
    max-width: var(--estudiantes-control-height, 42px);
    height: var(--estudiantes-control-height, 42px);
    min-height: var(--estudiantes-control-height, 42px);
    max-height: var(--estudiantes-control-height, 42px);
    padding: 0;
    overflow: visible;
    color: var(--text-primary);
    flex-shrink: 0;
    line-height: 1;
}

.estudiantes-filtros-icon {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: currentColor;
    pointer-events: none;
}

#tab-usuarios .estudiantes-toolbar-buscar-icon {
    display: none;
}

#tab-estudiantes .students-toolbar .form-group-btn.estudiantes-toolbar-filtros > .estudiantes-filtros-btn,
#tab-usuarios .students-toolbar .form-group-btn.estudiantes-toolbar-filtros > .estudiantes-filtros-btn {
    box-sizing: border-box;
    width: var(--estudiantes-control-height, 42px);
    min-width: var(--estudiantes-control-height, 42px);
    max-width: var(--estudiantes-control-height, 42px);
    height: var(--estudiantes-control-height, 42px);
    min-height: var(--estudiantes-control-height, 42px);
    max-height: var(--estudiantes-control-height, 42px);
    padding: 0;
}

.estudiantes-filtros-btn--active {
    border-color: var(--accent-cyan, #1ad4c1);
    color: var(--accent-cyan, #1ad4c1);
}

.estudiantes-filtros-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan, #1ad4c1);
    box-shadow: 0 0 0 2px var(--bg-surface, #0f1419);
}

.modal-estudiantes-filtros {
    max-width: min(480px, calc(100vw - 32px));
}

.modal-estudiantes-filtros-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 8px 10px 12px;
    box-sizing: border-box;
}

.modal-estudiantes-filtros-body .user-tags-filter-field--modal {
  margin-bottom: 0;
}

.estudiantes-filtros-date-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.estudiantes-filtros-date-range .form-input {
    flex: 1 1 140px;
    min-width: 0;
}

.estudiantes-filtros-date-sep {
    flex: 0 0 auto;
    font-size: 0.875rem;
}

.estudiantes-search-suggestions-empty {
    margin: 0;
    padding: 12px;
    font-size: 13px;
}

/* ==============================================
   ESTILOS PARA LA SECCIÓN DE CURSOS (RESPONSIVE)
   ============================================== */

/* Contenedor de la lista de cursos */
#cursosList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Tarjeta de cada curso */
.curso-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    height: 100%;
    min-height: 220px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.curso-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.curso-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 8px;
    min-height: 0;
}

.curso-card .curso-descripcion {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.staff-uuid-line {
    margin: 8px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    width: 100%;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

.staff-uuid-line .staff-uuid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--accent-cyan);
    word-break: break-all;
    user-select: all;
}

.staff-uuid-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
}

.ejercicios-admin-item-main {
    flex: 1;
    min-width: 0;
}

.ejercicios-admin-item-main .staff-uuid-line {
    margin-top: 4px;
    text-align: left;
}

.staff-uuid-line--compact {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.staff-uuid-line--compact .staff-uuid {
    display: inline;
}

.staff-uuid-field {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88rem;
    color: var(--accent-cyan);
    cursor: pointer;
    user-select: all;
}

.staff-uuid-field:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.cursos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
    margin-top: 0;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.courses-card__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 16px;
    min-height: 34px;
}

.courses-card__header > h2 {
    margin-bottom: 0;
}

.courses-new-btn--icon {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.courses-new-btn--icon[hidden] {
    display: none !important;
}

.courses-new-btn--icon:hover {
    border-color: rgba(26, 212, 193, 0.45);
    background: rgba(26, 212, 193, 0.08);
}

.courses-new-btn--icon:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.courses-new-btn__icon {
    display: block;
    flex-shrink: 0;
    line-height: 1;
}

.courses-tutor-preview {
    margin-bottom: 8px;
    padding: 14px 16px;
}

.courses-tutor-preview-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.courses-tutor-preview-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.courses-tutor-preview-select {
    flex: 1;
    min-width: 0;
}

.courses-tutor-preview-hint {
    margin: 10px 0 0;
    font-size: 0.85rem;
}

.courses-view-as-banner {
    margin: 8px 0 0;
    padding: 8px 12px;
    background: rgba(26, 212, 193, 0.12);
    border-radius: 6px;
    border-left: 3px solid var(--accent-cyan);
    font-size: 0.9rem;
}

.courses-back-list {
    margin-bottom: 10px;
}

.courses-hint {
    margin: 0 0 12px;
    font-size: 0.9rem;
}

.curso-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    width: 100%;
    text-align: center;
    line-height: 1.2;
}

.curso-meta-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

/* Reproductor de curso (estudiante / tutor / lead) */
.curso-player {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.curso-player-header {
    position: relative;
}

/* Móvil/FAB: título → descripción → Ver mis tiempos → Ver avance y etapas */
@media (max-width: 899px) {
    .curso-player-header {
        display: flex;
        flex-direction: column;
    }

    .curso-player-header > h2 {
        order: -4;
        margin-top: 0;
    }

    .curso-player-header > .curso-player-desc {
        order: -3;
    }

    .curso-player-header > .curso-player-header-top {
        order: -2;
    }

    .curso-player-header > #cursoAvanceEtapasHost {
        order: -1;
    }
}

.curso-player-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    min-height: 0;
}

.curso-player-header-top-start {
    flex: 0 1 auto;
    min-width: 0;
}

.curso-mis-tiempos-btn {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--accent-cyan);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.curso-mis-tiempos-btn:hover,
.curso-mis-tiempos-btn:focus-visible {
    color: var(--accent-gold);
    outline: none;
}

/* Acordeón «Ver mis tiempos» (solo layout FAB ≤899px; en desktop se usa el botón+modal) */
.curso-mis-tiempos-accordion {
    display: none;
}

@media (max-width: 899px) {
    .curso-player-header-top:has(.curso-mis-tiempos-accordion) {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .curso-mis-tiempos-accordion {
        display: block;
        width: 100%;
        margin-left: 0;
        flex: 1 1 auto;
    }

    .curso-mis-tiempos-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text-primary);
        font-family: inherit;
        font-weight: 600;
        font-size: 0.85rem;
        line-height: 1.3;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
    }

    .curso-mis-tiempos-toggle:hover,
    .curso-mis-tiempos-toggle:focus-visible {
        border-color: var(--accent-cyan);
        background: var(--bg-input);
        outline: none;
    }

    .curso-mis-tiempos-toggle[aria-expanded='true'] {
        border-color: var(--accent-cyan);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .curso-mis-tiempos-toggle .accordion-chevron {
        font-size: 12px;
        color: var(--accent-cyan);
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    .curso-mis-tiempos-toggle[aria-expanded='true'] .accordion-chevron {
        transform: rotate(180deg);
    }

    .curso-mis-tiempos-panel {
        border: 1px solid var(--accent-cyan);
        border-top: none;
        border-radius: 0 0 10px 10px;
        background: var(--bg-surface);
        padding: 12px 14px 14px;
    }

    .curso-mis-tiempos-panel[hidden] {
        display: none !important;
    }

    .curso-mis-tiempos-panel .modal-mis-tiempos-hero {
        margin-bottom: 12px;
    }

    .curso-mis-tiempos-panel .modal-mis-tiempos-section {
        margin-top: 12px;
    }

    /* Acordeón «Ver avance y etapas» (progreso + timeline) */
    .curso-avance-etapas-accordion {
        width: 100%;
        margin-top: 8px;
    }

    .curso-avance-etapas-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text-primary);
        font-family: inherit;
        font-weight: 600;
        font-size: 0.85rem;
        line-height: 1.3;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
    }

    .curso-avance-etapas-toggle:hover,
    .curso-avance-etapas-toggle:focus-visible {
        border-color: var(--accent-cyan);
        background: var(--bg-input);
        outline: none;
    }

    .curso-avance-etapas-toggle[aria-expanded='true'] {
        border-color: var(--accent-cyan);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .curso-avance-etapas-toggle .accordion-chevron {
        font-size: 12px;
        color: var(--accent-cyan);
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    .curso-avance-etapas-toggle[aria-expanded='true'] .accordion-chevron {
        transform: rotate(180deg);
    }

    .curso-avance-etapas-panel {
        border: 1px solid var(--accent-cyan);
        border-top: none;
        border-radius: 0 0 10px 10px;
        background: var(--bg-surface);
        padding: 12px 14px 14px;
    }

    .curso-avance-etapas-panel[hidden] {
        display: none !important;
    }

    .curso-avance-etapas-panel .curso-player-progress-bar-wrap {
        margin-bottom: 12px;
    }
}

.curso-player-header h2 {
    margin: 0 0 8px;
    padding-right: 0;
}

@media (max-width: 520px) {
    .curso-player-header-top {
        flex-wrap: wrap;
    }

    .curso-mis-tiempos-btn {
        font-size: 0.7rem;
    }

    .curso-player-header h2 {
        font-size: 1.15rem;
        width: 100%;
    }

    .curso-player-sidebar-top h3 {
        font-size: 1.15rem;
    }
}

.curso-player-desc {
    color: var(--text-secondary);
    margin: 0 0 12px;
    font-size: 0.95rem;
}

/* Desktop: descripción + «Ver mis tiempos» en la misma fila */
@media (min-width: 900px) {
    .curso-player-desc-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin: 0 0 12px;
    }

    .curso-player-desc-row .curso-player-desc {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }

    .curso-player-desc-row .curso-player-desc-spacer {
        flex: 1 1 auto;
        min-width: 0;
    }

    .curso-player-desc-row #cursoMisTiemposHost {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .curso-player-desc-row .curso-mis-tiempos-btn {
        margin-left: 0;
    }
}

.curso-player-pause-banner {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(33, 150, 243, 0.12);
    border: 1px solid rgba(33, 150, 243, 0.35);
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Modal «Ver mis tiempos» (estudiante) */
.modal-mis-tiempos {
    width: min(100%, 480px);
    max-width: 100%;
    padding: clamp(14px, 3vw, 20px);
}

.modal-mis-tiempos-header {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.modal-mis-tiempos-header-text {
    flex: 1;
    min-width: 0;
}

.modal-mis-tiempos-eyebrow {
    margin: 0 0 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-cyan);
}

.modal-mis-tiempos-course-title {
    margin: 0;
    font-size: clamp(1rem, 4.2vw, 1.12rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    word-break: break-word;
}

.modal-mis-tiempos-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: -4px -4px 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.modal-mis-tiempos-close:hover,
.modal-mis-tiempos-close:focus-visible {
    color: var(--text-primary);
    border-color: var(--accent-cyan);
    background: rgba(26, 212, 193, 0.1);
    outline: none;
}

.modal-mis-tiempos-body {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.5vw, 18px);
    padding-top: clamp(12px, 2.5vw, 16px);
}

.modal-mis-tiempos-hero {
    padding: clamp(12px, 2.5vw, 16px);
    background: linear-gradient(145deg, rgba(26, 212, 193, 0.08) 0%, rgba(43, 79, 110, 0.14) 100%);
    border-radius: var(--radius-card);
    border: 1px solid rgba(26, 212, 193, 0.22);
}

.modal-mis-tiempos-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 1.5vw, 10px);
    margin-bottom: 12px;
}

.modal-mis-tiempos-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 8px 6px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    text-align: center;
}

.modal-mis-tiempos-stat-value {
    font-size: clamp(1rem, 4vw, 1.2rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.modal-mis-tiempos-stat--highlight .modal-mis-tiempos-stat-value {
    color: var(--accent-gold);
}

.modal-mis-tiempos-stat-unit {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-muted);
}

.modal-mis-tiempos-stat--highlight .modal-mis-tiempos-stat-unit {
    color: rgba(242, 232, 207, 0.75);
}

.modal-mis-tiempos-stat-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

.modal-mis-tiempos-hero-bar .curso-player-progress-track {
    height: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(26, 212, 193, 0.28);
}

.modal-mis-tiempos-hero-pct {
    display: none;
}

.modal-mis-tiempos-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.modal-mis-tiempos-section-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-cyan);
}

.modal-mis-tiempos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.modal-mis-tiempos-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.modal-mis-tiempos-field--full {
    grid-column: 1 / -1;
}

.modal-mis-tiempos-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    line-height: 1.2;
}

.modal-mis-tiempos-value {
    font-size: clamp(0.84rem, 2.8vw, 0.92rem);
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.modal-mis-tiempos-value--multiline {
    white-space: pre-line;
}

.modal-mis-tiempos-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    border: 1px solid transparent;
}

.modal-mis-tiempos-status--activo {
    color: var(--accent-cyan);
    background: rgba(26, 212, 193, 0.12);
    border-color: rgba(26, 212, 193, 0.35);
}

.modal-mis-tiempos-status--pausado {
    color: var(--accent-gold);
    background: rgba(242, 232, 207, 0.1);
    border-color: rgba(242, 232, 207, 0.3);
}

.modal-mis-tiempos-status--en-vacaciones {
    color: #8eb4d4;
    background: rgba(43, 79, 110, 0.25);
    border-color: rgba(43, 79, 110, 0.45);
}

.modal-mis-tiempos-status--finalizado {
    color: var(--progress-done);
    background: rgba(57, 122, 102, 0.15);
    border-color: rgba(57, 122, 102, 0.35);
}

.modal-mis-tiempos-status--cancelado,
.modal-mis-tiempos-status--unknown {
    color: var(--text-muted);
    background: var(--bg-input);
    border-color: var(--border);
}

@media (max-width: 520px) {
    .modal-mis-tiempos {
        width: 100%;
        max-height: min(calc(100dvh - 48px), 92dvh);
        border-radius: 16px 16px 0 0;
    }

    .modal-mis-tiempos-section {
        align-items: center;
    }

    .modal-mis-tiempos-section-title {
        width: 100%;
        text-align: center;
    }

    .modal-mis-tiempos-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        width: 100%;
        max-width: min(100%, 360px);
        margin-inline: auto;
    }

    .modal-mis-tiempos-field {
        width: 100%;
        max-width: 360px;
        align-items: center;
        text-align: center;
    }

    .modal-mis-tiempos-field--full {
        grid-column: auto;
    }

    .modal-mis-tiempos-value,
    .modal-mis-tiempos-value--multiline {
        text-align: center;
    }

    .modal-mis-tiempos-status {
        margin-inline: auto;
    }

    .modal-mis-tiempos-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .modal-mis-tiempos-stat {
        padding: 8px 4px;
    }
}

@media (max-width: 360px) {
    .modal-mis-tiempos-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: stretch;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        margin-bottom: 12px;
    }

    .modal-mis-tiempos-stat--avance-inline {
        display: none;
    }

    .modal-mis-tiempos-stat--days,
    .modal-mis-tiempos-stat--remaining {
        width: 100%;
        max-width: none;
        padding: 10px 8px;
    }

    .modal-mis-tiempos-hero-pct {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 100%;
        margin-top: 8px;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.22);
        border-radius: 10px;
        text-align: center;
    }
}

@media (min-width: 521px) {
    .modal-mis-tiempos-field--status {
        grid-column: 1;
    }

    .modal-mis-tiempos-field--full.modal-mis-tiempos-field--etapa {
        grid-column: 2;
    }

    .modal-mis-tiempos-field--full.modal-mis-tiempos-field--vacaciones {
        grid-column: 1;
    }

    .modal-mis-tiempos-grid:has(.modal-mis-tiempos-field--vacaciones) .modal-mis-tiempos-field--full.modal-mis-tiempos-field--pausas {
        grid-column: 2;
    }
}

.curso-player-progress-bar-wrap {
    margin-top: 8px;
}

.curso-player-progress-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.curso-player-progress-track {
    position: relative;
    height: 8px;
    background: var(--bg-input);
    border-radius: 999px;
    overflow: hidden;
}

.curso-player-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--gradient-data);
    border-radius: 999px;
    transform: scaleX(calc(var(--progress-pct, 0) / 100));
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.curso-player-progress-track.is-compact {
    height: 6px;
    margin-top: 6px;
    width: 100%;
    background: var(--bg-input);
    border-radius: 999px;
    overflow: hidden;
}

.curso-player-progress-track.is-compact.is-empty {
    background: var(--bg-input);
    opacity: 0.6;
}

.curso-player-module-header-main .curso-player-progress-track.is-compact {
    display: block;
}

.curso-player-progress-track--segmented {
    display: flex;
    gap: 3px;
    background: transparent;
    overflow: visible;
}

.curso-player-progress-track--segmented.is-compact {
    height: 3px;
    margin-top: 6px;
}

.curso-player-progress-segment {
    flex: 1;
    min-width: 4px;
    height: 100%;
    border-radius: 999px;
    background: var(--progress-pending);
    transition: background 0.2s ease;
}

.curso-player-progress-segment--completed {
    background: var(--progress-done);
}

.curso-player-progress-segment--active {
    background: var(--progress-active);
    box-shadow: 0 0 0 1px rgba(26, 212, 193, 0.35);
}

.curso-player-progress-segment--in-progress {
    background: var(--progress-started);
}

.curso-player-progress-segment--pending {
    background: var(--progress-pending);
}

.curso-player-progress-segment--locked,
.curso-player-progress-segment--locked-activation {
    background: var(--progress-locked);
    opacity: 0.85;
}

.curso-player-body {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: 16px;
    align-items: start;
    position: relative;
}

.curso-player-sidebar-backdrop {
    display: none;
}

.curso-player-sidebar {
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow: hidden;
}

.curso-player-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.curso-player-sidebar-top h3 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--font-family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    padding-bottom: 0;
    border-bottom: none;
}

.curso-player-sidebar-top h3::after {
    content: '';
    display: block;
    height: 2px;
    width: 56px;
    margin-top: 10px;
    background: var(--gradient-data);
    border-radius: 1px;
}

.curso-player-sidebar-close {
    display: none;
}

.curso-player-curriculum {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 900px) {
    .curso-player-body {
        align-items: stretch;
    }

    .curso-player-sidebar {
        max-height: none;
        overflow: visible;
        align-self: stretch;
    }

    .curso-player-curriculum {
        overflow: visible;
        flex: 1 1 auto;
    }
}

.curso-player-module {
    border-bottom: 1px solid var(--bg-input);
}

.curso-player-module-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 4px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.curso-player-module-header-main {
    flex: 1;
    min-width: 0;
}

.curso-player-module-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.curso-player-lessons {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 8px;
    display: none;
}

.curso-player-module.is-open .curso-player-lessons {
    display: block;
}

.curso-player-lesson {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
    font-size: 0.88rem;
}

.curso-player-lesson-bullet {
    flex-shrink: 0;
    width: 1em;
    text-align: center;
    line-height: 1.35;
    color: var(--text-muted);
    font-size: 1.1em;
}

.curso-player-lesson.is-active .curso-player-lesson-bullet {
    color: var(--accent-cyan);
}

.curso-player-lesson.is-completed .curso-player-lesson-bullet {
    color: var(--progress-done);
}

.curso-player-lesson-main {
    flex: 1;
    min-width: 0;
}

.curso-player-lesson:hover {
    background: rgba(255, 255, 255, 0.04);
}

.curso-player-lesson.is-active {
    background: var(--bg-input);
    color: var(--text-primary);
    font-weight: 600;
}

.curso-player-lesson.is-locked {
    opacity: 0.72;
    cursor: not-allowed;
}

.curso-player-lesson.is-locked-activation {
    border-left: 3px solid var(--progress-locked);
}

.lesson-prerequisites-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
}

.lesson-prerequisites-picker-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
}

button.btn.lesson-prerequisites-clear-btn {
    pointer-events: auto;
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    max-height: none;
    padding: 11px;
    font-size: 10px;
    line-height: 1.25;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    font-weight: 500;
    transform: translateY(-2px);
    white-space: nowrap;
}

button.btn.lesson-prerequisites-clear-btn.is-confirming {
    border-color: var(--danger, #f44336);
    color: var(--danger, #f44336);
}

.lesson-prerequisites-module {
    border: none;
    margin: 0;
    padding: 0;
}

.lesson-prerequisites-module legend {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    padding: 0;
}

.lesson-prerequisites-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lesson-prerequisites-option {
    font-size: 0.9rem;
}

.lesson-prerequisites-option.is-inactive {
    opacity: 0.72;
    color: var(--text-secondary);
}

.lesson-prerequisites-inactive-tag {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-muted);
}

.badge-prereq {
    letter-spacing: 0.02em;
}

.badge-prereq-inactive {
    outline: 1px dashed var(--text-muted);
}

.modal-leccion-config .form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.curso-player-lesson.is-locked .curso-player-lesson-title {
    color: var(--text-muted);
}

.curso-player-lesson-lock {
    display: block;
    width: 100%;
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 400;
    text-align: right;
    margin-top: 2px;
}

.curso-player-locked-msg {
    padding: 16px;
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    text-align: right;
}

.curso-player-lesson-check {
    color: var(--success, #22c55e);
    font-weight: 700;
    flex-shrink: 0;
}

.curso-player-curriculum-fab {
    display: none;
}

.curso-player-curriculum-fab[hidden],
.curso-player-curriculum-fab.is-context-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* FABs portaleados a body no deben sobrevivir la pantalla de login */
body.is-auth > .curso-player-curriculum-fab,
body.is-auth > .psico-gym-stats-fab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.curso-player-lesson-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bg-input);
}

.curso-player-lesson-nav .btn {
    min-height: unset;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.curso-player-lesson-nav[hidden] {
    display: none !important;
}

.curso-player-lesson-nav--bottom {
    margin-top: 20px;
    margin-bottom: 0;
    padding-top: 16px;
    padding-bottom: 0;
    border-bottom: none;
    border-top: 1px solid var(--bg-input);
}

.curso-player-nav-label {
    font-size: 0.88rem;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.curso-player-nav-btn-compact {
    display: none;
}

.curso-player-main {
    min-width: 0;
    padding: 16px 20px;
}

.curso-player-lesson-content {
    line-height: 1.65;
    color: var(--text-primary);
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.curso-player-lesson-content .lesson-content-title {
    margin-top: 0;
}

.curso-player-complete-wrap {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--bg-input);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.curso-player-complete-wrap[hidden] {
    display: none !important;
}

.curso-player-read-hint {
    margin: 0 0 10px;
    font-size: 0.9rem;
    max-width: 36rem;
}

.curso-player-complete-requirements-host {
    width: 100%;
    max-width: 36rem;
    margin-bottom: 12px;
}

.curso-player-complete-requirements {
    text-align: left;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.curso-player-complete-requirements-title {
    margin: 0 0 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.curso-player-complete-requirements-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.curso-player-complete-requirements-list li + li {
    margin-top: 4px;
}

.curso-player-pending-notices-host {
    width: 100%;
    margin-bottom: 16px;
}

.curso-player-pending-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.curso-player-pending-notices-host .curso-player-pending-notice + .curso-player-pending-notice {
    margin-top: 10px;
}

.curso-player-pending-notice-icon {
    font-size: 1.1rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.curso-player-pending-notice-body {
    flex: 1;
    min-width: 0;
}

.curso-player-pending-notice-text {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.45;
}

.curso-player-pending-notice-detail {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.curso-player-complete-pending-host {
    width: 100%;
    max-width: 36rem;
    margin-bottom: 12px;
}

.curso-player-complete-pending-host .curso-player-pending-notice {
    margin: 0;
}

/* Disponible: cyan de marca (todas las lecciones / cursos) */
.curso-player-complete-wrap .curso-player-complete-btn:not(:disabled):not(.is-waiting):not(.is-completed),
.curso-player-complete-wrap .curso-player-complete-btn.btn-primary:not(:disabled):not(.is-waiting):not(.is-completed) {
    background: var(--accent-cyan);
    color: var(--bg-app);
    border-color: transparent;
}

.curso-player-complete-wrap .curso-player-complete-btn:not(:disabled):not(.is-waiting):not(.is-completed):hover,
.curso-player-complete-wrap .curso-player-complete-btn.btn-primary:not(:disabled):not(.is-waiting):not(.is-completed):hover {
    background: color-mix(in srgb, var(--accent-cyan) 82%, white);
    color: var(--bg-app);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(26, 212, 193, 0.28);
}

.curso-player-complete-wrap .curso-player-complete-btn:disabled:not(.is-completed),
.curso-player-complete-wrap .curso-player-complete-btn.is-waiting:disabled:hover {
    background: var(--bg-input);
    color: var(--text-muted);
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Soft gate: feedback pendiente — clicable para mostrar aviso */
.curso-player-complete-wrap .curso-player-complete-btn.is-feedback-pending:not(:disabled):not(.is-completed),
.curso-player-complete-wrap .curso-player-complete-btn.btn-primary.is-feedback-pending:not(:disabled):not(.is-completed) {
    background: color-mix(in srgb, var(--accent-cyan) 28%, var(--bg-input));
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 45%, transparent);
    opacity: 1;
    cursor: pointer;
    box-shadow: none;
}

.curso-player-complete-wrap .curso-player-complete-btn.is-feedback-pending:not(:disabled):not(.is-completed):hover,
.curso-player-complete-wrap .curso-player-complete-btn.btn-primary.is-feedback-pending:not(:disabled):not(.is-completed):hover {
    background: color-mix(in srgb, var(--accent-cyan) 40%, var(--bg-input));
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26, 212, 193, 0.18);
}

.curso-player-feedback-gate-notice {
    width: 100%;
    max-width: 36rem;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-cyan) 12%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 35%, transparent);
    box-sizing: border-box;
}

.curso-player-feedback-gate-notice-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-primary);
    text-align: center;
}

@media (max-width: 640px) {
    .curso-player-feedback-gate-notice {
        max-width: 100%;
        padding: 10px 12px;
    }

    .curso-player-feedback-gate-notice-text {
        font-size: 0.88rem;
    }
}

.curso-player-complete-wrap .curso-player-complete-btn:disabled.is-completed,
.curso-player-complete-wrap .curso-player-complete-btn.is-completed {
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 1;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.curso-player-complete-wrap .curso-player-complete-btn.is-pressed:disabled:not(.is-completed) {
    background: color-mix(in srgb, var(--accent-cyan) 88%, black);
    color: var(--bg-app);
    opacity: 1;
    cursor: wait;
    transform: translateY(1px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.curso-player-stage {
    margin: 8px 0 0;
    font-size: 0.88rem;
}

.curso-stage-timeline-wrap {
    margin-top: 14px;
    overflow: visible;
}

.curso-stage-timeline-wrap:has(.curso-stage-timeline--vertical) {
    display: flex;
    justify-content: center;
    padding-inline: 8px;
    overflow: visible;
}

.curso-stage-timeline-wrap:empty {
    display: none;
}

.curso-stage-timeline {
    width: 100%;
    overflow: visible;
}

.curso-stage-timeline__rows {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: visible;
}

.curso-stage-timeline__row {
    position: relative;
    padding-top: 6px;
    overflow: visible;
}

.curso-stage-timeline__track {
    position: absolute;
    top: 15px;
    left: 7px;
    right: 7px;
    height: 3px;
    pointer-events: none;
    z-index: 0;
}

.curso-stage-timeline__line-bg,
.curso-stage-timeline__line-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    border-radius: 999px;
}

.curso-stage-timeline__line-bg {
    right: 0;
    background: var(--progress-pending);
}

.curso-stage-timeline__line-fill {
    width: 0;
    max-width: 100%;
    background: var(--gradient-data);
    transition: width 0.45s ease;
}

.curso-stage-timeline__line-fill.is-fill-complete {
    width: 100%;
}

.curso-stage-timeline__row--break-end .curso-stage-timeline__line-bg,
.curso-stage-timeline__row--break-end .curso-stage-timeline__line-fill {
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(100% - 20px),
        transparent calc(100% - 18px),
        #000 calc(100% - 16px),
        transparent calc(100% - 14px),
        #000 calc(100% - 12px)
    );
    mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(100% - 20px),
        transparent calc(100% - 18px),
        #000 calc(100% - 16px),
        transparent calc(100% - 14px),
        #000 calc(100% - 12px)
    );
}

.curso-stage-timeline__row--break-start .curso-stage-timeline__line-bg,
.curso-stage-timeline__row--break-start .curso-stage-timeline__line-fill {
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 0%,
        transparent 2px,
        #000 4px,
        transparent 6px,
        #000 8px,
        #000 100%
    );
    mask-image: linear-gradient(
        90deg,
        #000 0%,
        transparent 2px,
        #000 4px,
        transparent 6px,
        #000 8px,
        #000 100%
    );
}

.curso-stage-timeline__steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.curso-stage-timeline__row--single-step .curso-stage-timeline__steps {
    justify-content: flex-start;
}

.curso-stage-timeline__row--single-step .curso-stage-timeline__track {
    right: auto;
    width: 14px;
}

.curso-stage-timeline__row--single-step.curso-stage-timeline__row--break-start .curso-stage-timeline__track {
    left: 14px;
}

/* Horizontal (desktop): centrar dots sobre la línea — track center = 13px + 1.5px = 14.5px */
.curso-stage-timeline:not(.curso-stage-timeline--vertical) .curso-stage-timeline__row {
    padding-top: 2px;
}

.curso-stage-timeline:not(.curso-stage-timeline--vertical) .curso-stage-timeline__track {
    top: 13px;
}

.curso-stage-timeline:not(.curso-stage-timeline--vertical) .curso-stage-timeline__dot-wrap {
    width: 24px;
    height: 24px;
}

.curso-stage-timeline__step {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 4px;
}

.curso-stage-timeline__dot-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
    z-index: 1;
}

.curso-stage-timeline__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--progress-pending);
    border: 2px solid var(--border);
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.curso-stage-timeline__step.is-completed .curso-stage-timeline__dot {
    background: var(--progress-done);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 1px rgba(26, 212, 193, 0.2);
}

.curso-stage-timeline__step.is-current .curso-stage-timeline__dot {
    width: 14px;
    height: 14px;
    background: var(--accent-cyan);
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px rgba(26, 212, 193, 0.45);
}

.curso-stage-timeline__step.is-upcoming .curso-stage-timeline__dot {
    background: var(--bg-input);
    border-color: var(--border);
    opacity: 0.9;
}

.curso-stage-timeline__ripple {
    --curso-stage-ripple-size: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--curso-stage-ripple-size);
    height: var(--curso-stage-ripple-size);
    margin: 0;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(26, 212, 193, 0.55);
    transform: translate3d(-50%, -50%, 0) scale(0.75);
    transform-origin: center center;
    animation: curso-stage-ripple 2s ease-out infinite;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.curso-stage-timeline__ripple--delay {
    animation-delay: 1s;
}

@keyframes curso-stage-ripple {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(0.75);
        opacity: 0.45;
    }
    100% {
        transform: translate3d(-50%, -50%, 0) scale(2.75);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .curso-stage-timeline__ripple {
        animation: none;
        transform: translate3d(-50%, -50%, 0) scale(1.65);
        opacity: 0.22;
    }
}

.curso-stage-timeline__label {
    margin-top: 8px;
    font-size: clamp(0.65rem, 2.2vw, 0.78rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-muted);
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.curso-stage-timeline__label--multiline {
    white-space: normal;
    overflow: visible;
}

.curso-stage-timeline--vertical {
    width: fit-content;
    max-width: 100%;
}

.curso-stage-timeline--vertical .curso-stage-timeline__rows {
    align-items: center;
}

.curso-stage-timeline--vertical .curso-stage-timeline__row {
    padding-top: 0;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.curso-stage-timeline--vertical .curso-stage-timeline__track {
    top: 14px;
    bottom: 14px;
    left: 14px;
    right: auto;
    width: 3px;
    height: auto;
    transform: translateX(-50%);
}

.curso-stage-timeline--vertical .curso-stage-timeline__line-bg,
.curso-stage-timeline--vertical .curso-stage-timeline__line-fill {
    width: 100%;
    height: 100%;
}

.curso-stage-timeline--vertical .curso-stage-timeline__line-fill {
    height: 0;
    max-height: 100%;
    transition: height 0.45s ease;
}

.curso-stage-timeline--vertical .curso-stage-timeline__line-fill.is-fill-complete {
    height: 100%;
    width: 100%;
}

.curso-stage-timeline--vertical .curso-stage-timeline__row--break-end .curso-stage-timeline__line-bg,
.curso-stage-timeline--vertical .curso-stage-timeline__row--break-end .curso-stage-timeline__line-fill,
.curso-stage-timeline--vertical .curso-stage-timeline__row--break-start .curso-stage-timeline__line-bg,
.curso-stage-timeline--vertical .curso-stage-timeline__row--break-start .curso-stage-timeline__line-fill {
    -webkit-mask-image: none;
    mask-image: none;
}

.curso-stage-timeline--vertical .curso-stage-timeline__steps {
    display: inline-grid;
    grid-template-columns: auto max-content;
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin-inline: 0;
    list-style: none;
    overflow: visible;
    padding-block: 2px;
}

.curso-stage-timeline--vertical .curso-stage-timeline__step {
    display: contents;
}

.curso-stage-timeline--vertical .curso-stage-timeline__dot-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
    justify-self: center;
    overflow: visible;
}

.curso-stage-timeline--vertical .curso-stage-timeline__label,
.curso-stage-timeline--vertical .curso-stage-timeline__label--multiline {
    margin-top: 0;
    width: auto;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    text-align: left;
    flex: none;
    min-width: auto;
    max-width: none;
    font-size: 0.82rem;
    word-break: normal;
    overflow-wrap: normal;
    justify-self: start;
}

.curso-stage-timeline__step.is-completed .curso-stage-timeline__label {
    color: var(--text-secondary);
}

.curso-stage-timeline__step.is-current .curso-stage-timeline__label {
    color: var(--accent-gold);
}

.curso-stage-timeline__step.is-upcoming .curso-stage-timeline__label {
    color: var(--text-muted);
    opacity: 0.85;
}

.curso-stage-timeline--staff .curso-stage-timeline__step--staff.is-upcoming:hover .curso-stage-timeline__label {
    color: var(--text-primary);
    opacity: 1;
}

.curso-stage-timeline--empty .curso-stage-timeline__row--empty .curso-stage-timeline__steps {
    justify-content: center;
}

.curso-stage-timeline--empty .curso-stage-timeline__step--empty-state {
    flex: 0 1 auto;
    max-width: min(100%, 320px);
}

.curso-stage-timeline__dot--empty {
    background: transparent;
    border-style: dashed;
    opacity: 0.55;
}

.estudiante-filtro-label {
    display: block;
    text-align: left;
    margin: 10px 0 6px;
}

.student-trading-toolbar {
    --student-trading-control-height: 42px;
    margin-bottom: 4px;
}

.student-trading-toolbar .form-input {
    height: var(--student-trading-control-height);
    min-height: var(--student-trading-control-height);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(var(--student-trading-control-height) - 2px);
}

.student-trading-cuentas-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 28px 0 20px;
}

.student-trading-cuentas-titulo {
    margin: 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.student-trading-cuentas-add--icon,
.live-classes-new-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.student-trading-cuentas-add--icon:hover,
.live-classes-new-btn:hover {
    border-color: rgba(26, 212, 193, 0.45);
    background: rgba(26, 212, 193, 0.08);
}

.student-trading-cuentas-add--icon:focus-visible,
.live-classes-new-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.student-trading-cuentas-add__icon,
.live-classes-new-btn__icon {
    display: block;
    flex-shrink: 0;
    line-height: 1;
}

.student-trading-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.student-trading-filter-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.student-trading-filter-col--cuenta,
.student-trading-filter-col--fecha {
    width: max-content;
}

.student-trading-filter-col--cuenta .form-input,
.student-trading-filter-col--fecha .form-input {
    width: auto;
    box-sizing: border-box;
}

.student-trading-filter-col--fecha .form-input {
    padding-right: 18px;
}

.student-trading-hasta-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-trading-apply-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.student-trading-toolbar .btn.btn-sm,
.student-trading-apply-group .btn.btn-sm {
    min-height: var(--student-trading-control-height);
    height: var(--student-trading-control-height);
    max-height: var(--student-trading-control-height);
    padding: 0 12px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.student-trading-hasta-row .form-input {
    width: auto;
    box-sizing: border-box;
    padding-right: 18px;
}

.student-trading-filter-label {
    display: block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: var(--text-secondary, #a0a0a0);
}

.student-trading-filter-tz {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.student-trading-account-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 1.35rem;
    margin: 0 0 16px;
    white-space: nowrap;
}

.student-trading-account-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.student-trading-account-link:hover {
    color: var(--text-secondary);
}

.student-trading-account-link--danger {
    color: var(--text-muted);
}

.student-trading-account-link-sep {
    font-size: 12px;
    color: var(--text-muted);
    user-select: none;
}

.trading-period-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(26, 212, 193, 0.22);
    background: linear-gradient(
        135deg,
        rgba(26, 212, 193, 0.07) 0%,
        rgba(26, 212, 193, 0.02) 55%,
        transparent 100%
    );
}

.trading-period-bar--compact {
    margin-top: 4px;
    margin-bottom: 16px;
    padding: 8px 12px;
}

.trading-period-bar .estudiante-filtro-label,
.trading-period-bar .trading-period-label {
    margin: 0;
    display: block;
    text-align: left;
}

.trading-period-label {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.trading-history-toggle {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: 999px;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.trading-history-toggle:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
}

.trading-history-toggle:active {
    transform: scale(0.98);
}

.trading-history-toggle--all-time {
    border-color: rgba(26, 212, 193, 0.55);
    background: rgba(26, 212, 193, 0.12);
    color: #1ad4c1;
}

.trading-history-toggle--all-time:hover {
    border-color: #1ad4c1;
    color: #fff;
    background: rgba(26, 212, 193, 0.22);
}

.student-trading-filters-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 720px) {
    .trading-period-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .trading-history-toggle {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .trading-history-toggle {
        min-height: 40px;
        font-size: 0.875rem;
    }
}

.student-trading-range-presets {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.student-trading-range-presets .btn.btn-sm,
.student-trading-range-split {
    min-height: var(--student-trading-control-height);
    height: var(--student-trading-control-height);
    max-height: var(--student-trading-control-height);
    box-sizing: border-box;
}

.student-trading-range-preset--semana {
    width: 8.25rem;
    min-width: 8.25rem;
    max-width: 8.25rem;
    padding-left: 8px;
    padding-right: 8px;
}

.student-trading-range-split {
    display: inline-flex;
    flex: 0 0 auto;
    vertical-align: middle;
    box-sizing: border-box;
}

.student-trading-range-split--mes {
    width: 7.5rem;
    min-width: 7.5rem;
    max-width: 7.5rem;
}

.student-trading-range-split--semestre {
    width: 8.875rem;
    min-width: 8.875rem;
    max-width: 8.875rem;
}

.student-trading-range-split__single {
    height: 100%;
    width: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.student-trading-range-split.is-expanded .student-trading-range-split__single {
    display: none;
}

.student-trading-range-split__dual {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid var(--text-primary);
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}

.student-trading-range-split.is-expanded .student-trading-range-split__dual {
    display: flex;
}

.student-trading-range-split__half {
    flex: 1 1 50%;
    min-height: 0;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.05;
    padding: 0 6px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.student-trading-range-split__half--top {
    border-bottom: 1px solid var(--text-primary);
}

.student-trading-range-split__half:hover {
    background: var(--text-primary);
    color: var(--bg-app);
}

@media (max-width: 640px) {
    .student-trading-filter-col--cuenta {
        flex: 1 1 100%;
    }

    .student-trading-filters-actions {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    .student-trading-range-presets {
        flex-wrap: wrap;
    }
}

.student-trading-toolbar.student-trading-panel-toolbar {
    container-type: inline-size;
    container-name: estudiante-trading-panel-toolbar;
}

@container estudiante-trading-panel-toolbar (min-width: 1100px) {
    .student-trading-panel-card .student-trading-filters-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--stf-gap, 8px);
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .student-trading-panel-card .student-trading-filter-label {
        display: none;
    }

    .student-trading-panel-card .student-trading-filter-col--cuenta,
    .student-trading-panel-card .student-trading-filter-col--fecha,
    .student-trading-panel-card .student-trading-filter-col--hasta,
    .student-trading-panel-card .student-trading-hasta-row,
    .student-trading-panel-card .student-trading-apply-group,
    .student-trading-panel-card .student-trading-filters-actions {
        display: contents;
    }

    .student-trading-panel-card #estudianteCuentaFilter {
        flex: 0 1 auto;
        width: auto;
        max-width: var(--stf-cuenta-max-w, 11.5rem);
        min-width: 0;
        box-sizing: border-box;
    }

    .student-trading-panel-card #estudianteFilterFrom,
    .student-trading-panel-card #estudianteFilterTo,
    .student-trading-panel-card .student-trading-filters-row .app-date-field {
        flex: 0 0 auto;
        width: var(--stf-date-w, 10.25rem);
        min-width: var(--stf-date-w, 10.25rem);
        max-width: var(--stf-date-w, 10.25rem);
        box-sizing: border-box;
    }

    .student-trading-panel-card .student-trading-filters-row .app-date-field .form-input,
    .student-trading-panel-card .student-trading-filters-row .app-date-field .input-app-date {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .student-trading-panel-card .student-trading-filters-row > .btn.btn-sm,
    .student-trading-panel-card .student-trading-filters-row .student-trading-apply-group .btn.btn-sm {
        flex: 0 0 auto;
    }

    .student-trading-panel-card .student-trading-range-presets {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--stf-gap, 8px);
        margin-left: auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        height: var(--student-trading-control-height);
        min-height: var(--student-trading-control-height);
        box-sizing: border-box;
    }

    .student-trading-panel-card .student-trading-range-preset--semana {
        flex: 0 0 var(--stf-preset-semana-w, 8.25rem);
        width: var(--stf-preset-semana-w, 8.25rem);
        min-width: var(--stf-preset-semana-w, 8.25rem);
        max-width: var(--stf-preset-semana-w, 8.25rem);
        height: var(--student-trading-control-height);
        min-height: var(--student-trading-control-height);
        max-height: var(--student-trading-control-height);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }

    .student-trading-panel-card .student-trading-range-split--mes {
        flex: 0 0 var(--stf-preset-mes-w, 7.5rem);
        width: var(--stf-preset-mes-w, 7.5rem);
        min-width: var(--stf-preset-mes-w, 7.5rem);
        max-width: var(--stf-preset-mes-w, 7.5rem);
        height: var(--student-trading-control-height);
        min-height: var(--student-trading-control-height);
        max-height: var(--student-trading-control-height);
    }

    .student-trading-panel-card .student-trading-range-split--semestre {
        flex: 0 0 var(--stf-preset-semestre-w, 7.625rem);
        width: var(--stf-preset-semestre-w, 7.625rem);
        min-width: var(--stf-preset-semestre-w, 7.625rem);
        max-width: var(--stf-preset-semestre-w, 7.625rem);
        height: var(--student-trading-control-height);
        min-height: var(--student-trading-control-height);
        max-height: var(--student-trading-control-height);
    }

    .student-trading-panel-card .student-trading-range-split--semestre .student-trading-range-split__single {
        padding-left: 6px;
        padding-right: 6px;
    }

    .student-trading-panel-card .student-trading-range-split {
        position: relative;
        display: block;
        flex: 0 0 auto;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .student-trading-panel-card .student-trading-range-split__single,
    .student-trading-panel-card .student-trading-range-split__dual {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box;
        margin: 0;
    }

    .student-trading-panel-card .student-trading-range-split__single {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .student-trading-panel-card .student-trading-range-split__single[hidden] {
        display: none !important;
    }

    .student-trading-panel-card .student-trading-range-split__dual {
        display: none;
        flex-direction: column;
    }

    .student-trading-panel-card .student-trading-range-split__dual:not([hidden]) {
        display: flex !important;
    }

    .student-trading-panel-card .student-trading-range-split.is-expanded .student-trading-range-split__single {
        display: none !important;
    }

    .student-trading-panel-card .student-trading-range-split.is-expanded .student-trading-range-split__dual {
        display: flex !important;
    }
}

@container estudiante-trading-panel-toolbar (max-width: 1099px) {
    .student-trading-panel-toolbar .student-trading-filters-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 8px;
        row-gap: 10px;
        align-items: end;
    }

    .student-trading-panel-toolbar .student-trading-filter-col--cuenta,
    .student-trading-panel-toolbar .student-trading-filter-col--fecha,
    .student-trading-panel-toolbar .student-trading-filter-col--hasta,
    .student-trading-panel-toolbar .student-trading-hasta-row {
        display: contents;
    }

    .student-trading-panel-toolbar label[for="estudianteCuentaFilter"] {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .student-trading-panel-toolbar #estudianteCuentaFilter {
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .student-trading-panel-toolbar label[for="estudianteFilterFrom"] {
        grid-row: 3;
        grid-column: 1;
    }

    .student-trading-panel-toolbar .student-trading-filter-col--fecha .app-date-field,
    .student-trading-panel-toolbar .student-trading-filter-col--fecha > .form-input,
    .student-trading-panel-toolbar .student-trading-filter-col--fecha > input#estudianteFilterFrom {
        grid-row: 4;
        grid-column: 1;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .student-trading-panel-toolbar label[for="estudianteFilterTo"] {
        grid-row: 3;
        grid-column: 2;
    }

    .student-trading-panel-toolbar .student-trading-hasta-row > .app-date-field,
    .student-trading-panel-toolbar .student-trading-hasta-row > .form-input,
    .student-trading-panel-toolbar .student-trading-hasta-row > input#estudianteFilterTo {
        grid-row: 4;
        grid-column: 2;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .student-trading-panel-toolbar #estudianteFilterFrom,
    .student-trading-panel-toolbar #estudianteFilterTo {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .student-trading-panel-toolbar .student-trading-apply-group {
        display: flex;
        grid-row: 5;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .student-trading-panel-toolbar .student-trading-apply-group .btn {
        flex-shrink: 0;
    }

    .student-trading-panel-toolbar .student-trading-filters-actions {
        grid-row: 6;
        grid-column: 1 / -1;
        margin-left: 0;
        justify-content: stretch;
        align-items: stretch;
        width: 100%;
    }

    .student-trading-toolbar.student-trading-panel-toolbar {
        --student-trading-control-height: 32px;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-presets {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        height: 32px;
        min-height: 32px;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-preset--semana,
    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split--mes,
    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        max-width: none !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        box-sizing: border-box;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split--semestre {
        flex: 0 0 8.875rem;
        width: 8.875rem !important;
        min-width: 8.875rem !important;
        max-width: 8.875rem !important;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-preset--semana {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 4px !important;
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.15;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split {
        position: relative;
        display: block;
        padding: 0;
        overflow: hidden;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split__single,
    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split__dual {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box;
        margin: 0;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split__single {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 4px !important;
        font-size: 0.72rem;
        line-height: 1.15;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-presets .btn.btn-sm {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split__single[hidden] {
        display: none !important;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split__dual {
        display: none;
        flex-direction: column;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split__dual:not([hidden]) {
        display: flex !important;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split.is-expanded .student-trading-range-split__single {
        display: none !important;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split.is-expanded .student-trading-range-split__dual {
        display: flex !important;
    }

    .student-trading-toolbar.student-trading-panel-toolbar .student-trading-range-split__half {
        flex: 1 1 50%;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.62rem;
        line-height: 1.1;
        padding: 0 2px;
    }
}

@media (max-width: 720px) {
    .curso-stage-timeline__step {
        padding: 0 1px;
        overflow: visible;
    }

    .curso-stage-timeline--vertical .curso-stage-timeline__step {
        padding: 0;
        overflow: visible;
    }

    .curso-stage-timeline__steps {
        gap: 4px;
    }

    .curso-stage-timeline__label {
        container-type: inline-size;
        line-height: 1.15;
        font-size: clamp(0.4375rem, 20cqi, 0.78rem);
    }

    .curso-stage-timeline--vertical .curso-stage-timeline__label {
        container-type: normal;
        font-size: 0.82rem;
    }

    .estudiante-trading-etapa-wrap .estudiante-trading-etapa-timeline,
    .estudiante-trading-etapa-wrap .curso-stage-timeline-wrap,
    .estudiante-trading-etapa-wrap .curso-stage-timeline,
    .estudiante-trading-etapa-wrap .curso-stage-timeline__rows,
    .estudiante-trading-etapa-wrap .curso-stage-timeline__row {
        overflow: visible;
    }
}

@media (max-width: 520px) {
    .curso-stage-timeline--multi-row .curso-stage-timeline__rows {
        gap: 20px;
    }

    .curso-stage-timeline--multi-row .curso-stage-timeline__step {
        flex: 1 1 calc(50% - 8px);
        max-width: calc(50% - 4px);
        min-width: 0;
    }

    .curso-stage-timeline--multi-row .curso-stage-timeline__row--single-step .curso-stage-timeline__step {
        flex: 0 0 auto;
        max-width: min(100%, 140px);
    }

    .curso-stage-timeline__label {
        font-size: clamp(0.4375rem, 18cqi, 0.7rem);
        line-height: 1.15;
    }

    .curso-stage-timeline--vertical .curso-stage-timeline__label {
        font-size: 0.82rem;
    }
}

@media (max-width: 899px) {
    #tab-cursos > .card.panel-transition:has(.curso-player),
    #tab-cursos > .card.panel-transition.is-open:has(.curso-player),
    #tab-cursos > .card.panel-transition.is-open.is-loaded:has(.curso-player),
    #tab-psico-gym > .card.panel-transition,
    #tab-psico-gym > .card.panel-transition.is-open,
    #tab-psico-gym > .card.panel-transition.is-open.is-loaded {
        transform: none !important;
    }

    .curso-player-curriculum-fab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        position: fixed;
        left: max(0px, env(safe-area-inset-left, 0px));
        top: 50%;
        top: 50svh;
        transform: translateY(-50%);
        z-index: 1100;
        min-width: 44px;
        padding: 8px 10px 8px 8px;
        margin: 0;
        border: 1px solid rgba(26, 212, 193, 0.45);
        border-left: none;
        border-radius: 0 22px 22px 0;
        background: var(--bg-elevated);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
        color: var(--text-primary);
        font-family: inherit;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .curso-player-curriculum-fab:hover {
        border-color: var(--accent-cyan);
        color: var(--accent-cyan);
        background: rgba(26, 212, 193, 0.08);
    }

    .curso-player-curriculum-fab__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }

    .curso-player-curriculum-fab__meta {
        font-size: 0.62rem;
        font-weight: 600;
        color: var(--text-muted);
        line-height: 1.1;
        white-space: nowrap;
    }

    .curso-player-curriculum-fab[aria-expanded="true"] {
        color: var(--accent-cyan);
    }

    .curso-player-body {
        grid-template-columns: 1fr;
    }

    .curso-player-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 88vw);
        z-index: 1200;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        transform: translate3d(-110%, 0, 0);
        -webkit-transition: -webkit-transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
        transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
        touch-action: pan-y;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .curso-player-body.is-drawer-animating .curso-player-sidebar {
        will-change: transform;
    }

    .curso-player-body.is-drawer-animating:not(.is-drawer-open):not(.sidebar-open) .curso-player-sidebar {
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .curso-player-sidebar.card:hover {
        transform: translate3d(-110%, 0, 0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }

    .curso-player-body.is-drawer-open .curso-player-sidebar,
    .curso-player-body.sidebar-open .curso-player-sidebar {
        transform: translate3d(0, 0, 0);
    }

    .curso-player-body.is-drawer-open .curso-player-sidebar.card:hover,
    .curso-player-body.sidebar-open .curso-player-sidebar.card:hover {
        transform: translate3d(0, 0, 0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }

    .curso-player-body.is-drawer-dragging .curso-player-sidebar {
        transition: none;
    }

    .curso-player-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1199;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .curso-player-body.is-drawer-animating:not(.is-drawer-open):not(.sidebar-open) .curso-player-sidebar-backdrop {
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .curso-player-body.is-drawer-open .curso-player-sidebar-backdrop,
    .curso-player-body.sidebar-open .curso-player-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .curso-player-body.is-drawer-animating .curso-player-curriculum-fab,
    .curso-player-body.is-drawer-animating .curso-player-sidebar-close {
        pointer-events: none;
    }

    .curso-player-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        width: 44px;
        height: 44px;
        margin: -8px -10px -8px 0;
        padding: 0;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: var(--accent-cyan);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease;
    }

    .curso-player-sidebar-close:hover,
    .curso-player-sidebar-close:focus-visible {
        background: rgba(26, 212, 193, 0.12);
        outline: none;
    }

    .curso-player-sidebar-close-chevron {
        display: block;
        width: 10px;
        height: 10px;
        border-left: 2px solid var(--accent-cyan);
        border-top: 2px solid var(--accent-cyan);
        transform: rotate(-45deg);
        margin-left: 3px;
        transition: border-color 0.15s ease;
    }

    .curso-player-sidebar-close:hover .curso-player-sidebar-close-chevron,
    .curso-player-sidebar-close:focus-visible .curso-player-sidebar-close-chevron {
        border-color: var(--accent-cyan);
    }

    .curso-player-sidebar-curriculum-mount {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .curso-player-curriculum {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .curso-player-main.card:hover {
        transform: none;
    }

    .curso-player-lesson-nav {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .curso-player-lesson-nav .btn {
        flex-shrink: 0;
        min-width: 36px;
        padding: 2px 8px;
        justify-content: center;
    }

    .curso-player-nav-btn-full {
        display: none;
    }

    .curso-player-nav-btn-compact {
        display: inline;
    }

    .curso-player-nav-label {
        font-size: 0.82rem;
    }

    @media (prefers-reduced-motion: reduce) {
        .curso-player-curriculum-fab,
        .curso-player-sidebar,
        .curso-player-sidebar-backdrop {
            transition: none;
        }
    }
}

@media (min-width: 900px) {
    .curso-player-curriculum-fab {
        display: none !important;
    }
}

.curso-card .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 16px;
    box-sizing: border-box;
}

.course-admin-panel {
    margin-top: 24px;
    padding: 16px;
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--bg-input);
}

.course-admin-panel h3 {
    margin: 0 0 12px;
    font-size: 1.05rem;
}

.course-admin-panel-actions-center {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.course-stages-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.course-stage-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-stage-row-draggable.is-dragging-stage {
    opacity: 0.55;
}

.course-stages-list.drag-over {
    outline: 1px dashed rgba(26, 212, 193, 0.45);
    outline-offset: 4px;
    border-radius: 8px;
}

.course-stage-drag-handle {
    flex: 0 0 auto;
    cursor: grab;
    user-select: none;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 4px 2px;
}

.course-stage-drag-handle:active {
    cursor: grabbing;
}

.course-stage-row .course-stage-input {
    flex: 1;
    min-width: 0;
}

.course-stages-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.curso-admin-delete-wrap {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 20px;
}

.btn-eliminar-curso-admin {
    background: transparent;
    border: 1px solid var(--negative);
    color: var(--negative);
}

.btn-eliminar-curso-admin:hover {
    background: rgba(199, 92, 92, 0.12);
    border-color: var(--negative);
    color: var(--negative);
}

.course-admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.course-admin-panel-header h3 {
    margin: 0;
}

.course-admin-text-link {
    flex: 0 0 auto;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--accent-cyan);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.course-admin-text-link:hover,
.course-admin-text-link:focus-visible {
    color: var(--accent-gold);
    outline: none;
}

.course-timing-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.course-timing-metric {
    padding: 12px;
    background: var(--bg-input);
    border-radius: 8px;
}

.course-timing-metric span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.course-timing-metric strong {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.modulo-admin {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 8px;
}

.modulo-admin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.modulo-admin-header-start {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.modulo-admin-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.modulo-drag-handle {
    flex: 0 0 auto;
    cursor: grab;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 4px 6px;
    user-select: none;
    letter-spacing: -2px;
}

.modulo-drag-handle:active {
    cursor: grabbing;
}

.modulo-admin.is-dragging-module {
    opacity: 0.5;
}

.modulo-admin.modulo-drop-target {
    outline: 2px dashed rgba(26, 212, 193, 0.45);
    outline-offset: 2px;
}

.modulos-admin-list.modulos-admin-drag-over {
    outline: 2px dashed rgba(255, 255, 255, 0.2);
    outline-offset: 4px;
    border-radius: 8px;
}

.modulo-admin-actions,
.leccion-admin-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.course-admin-actions-menu {
    position: relative;
}

.course-admin-menu {
    display: none;
    flex-direction: column;
    min-width: 148px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.course-admin-menu--popup {
    position: fixed;
    z-index: 1200;
}

body.course-admin-options-open #tab-cursos > .card {
    transform: none;
    box-shadow: var(--shadow-card);
}

.course-admin-menu.is-open {
    display: flex;
}

.leccion-item-disabled {
    opacity: 1;
}

.leccion-item-disabled .leccion-item-title-btn {
    color: var(--text-muted);
}

.course-admin-menu-item {
    border: none;
    background: none;
    color: var(--text-primary);
    text-align: left;
    padding: 10px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: var(--font-family);
}

.course-admin-menu-item:hover {
    background: rgba(26, 212, 193, 0.12);
}

.course-admin-menu-item--danger {
    color: #fc8181;
}

.course-admin-menu-item--danger:hover {
    background: rgba(229, 62, 62, 0.15);
    color: #fff;
}

.course-admin-compact-btn.btn-course-options {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border);
    color: var(--text-secondary);
}

.course-admin-compact-btn.btn-course-options:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.lecciones-admin .leccion-item {
    flex-wrap: nowrap;
}

.lecciones-admin .leccion-admin-actions {
    flex-wrap: nowrap;
}

.course-admin-compact-btn {
    padding: 3px 8px;
    font-size: 0.7rem;
    line-height: 1.15;
    min-height: 0;
    border: 1px solid transparent;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.course-admin-compact-btn.btn-course-config {
    background: rgba(26, 212, 193, 0.12);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.course-admin-compact-btn.btn-course-config:hover {
    background: var(--accent-cyan);
    color: var(--bg-app);
}

.leccion-item-disabled .course-admin-compact-btn.btn-course-config {
    background: rgba(128, 128, 128, 0.1);
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.leccion-item-disabled .course-admin-compact-btn.btn-course-config:hover {
    background: rgba(128, 128, 128, 0.14);
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.course-admin-compact-btn.btn-course-edit {
    background: rgba(242, 232, 207, 0.12);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.course-admin-compact-btn.btn-course-edit:hover {
    background: var(--accent-gold);
    color: var(--bg-app);
}

.course-admin-compact-btn.btn-course-duplicate {
    background: rgba(194, 207, 130, 0.12);
    border-color: var(--accent-lime);
    color: var(--accent-lime);
}

.course-admin-compact-btn.btn-course-duplicate:hover {
    background: var(--accent-lime);
    color: var(--bg-app);
}

.course-admin-compact-btn.btn-course-delete {
    background: rgba(229, 62, 62, 0.12);
    border-color: #e53e3e;
    color: #fc8181;
}

.course-admin-compact-btn.btn-course-delete:hover {
    background: #e53e3e;
    color: #fff;
}

.course-admin-compact-btn.btn-course-add {
    background: rgba(43, 79, 110, 0.25);
    border-color: var(--accent-blue);
    color: #8eb4d4;
}

.course-admin-compact-btn.btn-course-add:hover {
    background: var(--accent-blue);
    color: var(--text-primary);
}

.course-admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.course-admin-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.course-admin-btn-label {
    display: inline;
}

.leccion-item-title .badge {
    margin-left: 6px;
    font-size: 0.65rem;
    vertical-align: middle;
}

.modal-leccion-config-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Editor de contenido de lección */
.modal-leccion-contenido-overlay .modal-leccion-contenido {
    width: min(96vw, 1180px);
    max-width: 1180px;
    max-height: min(calc(100dvh - 80px), 92dvh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.modal-leccion-contenido .leccion-contenido-editor-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-leccion-contenido-actions {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.modal-leccion-contenido-actions__buttons {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.modal-leccion-contenido-actions .btn.btn-sm {
    padding: 3px 8px;
    font-size: 0.7rem;
    line-height: 1.15;
    min-height: 0;
}

.modal-leccion-contenido-actions .leccion-contenido-duration__step.btn-sm {
    min-width: 28px;
    padding-inline: 8px;
    font-size: 0.95rem;
    line-height: 1;
}

.leccion-contenido-duration {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.leccion-contenido-duration__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.leccion-contenido-duration__estimate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.leccion-contenido-duration__define-btn {
    font-size: 0.7rem;
}

.leccion-contenido-duration__summary[hidden] {
    display: none !important;
}

.leccion-contenido-duration__manual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.leccion-contenido-duration__manual[hidden] {
    display: none !important;
}

.leccion-contenido-duration__label {
    margin-bottom: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.leccion-contenido-duration__value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.leccion-contenido-duration__stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leccion-contenido-duration__input {
    width: 3.5rem;
    text-align: center;
    padding-inline: 6px;
    padding-block: 4px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.leccion-contenido-duration__input::-webkit-outer-spin-button,
.leccion-contenido-duration__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.leccion-contenido-duration__unit {
    font-size: 12px;
    color: var(--text-secondary);
}

.leccion-contenido-duration__defined {
    font-size: 12px;
    color: var(--text-secondary);
}

.leccion-contenido-duration__reset {
    padding: 0;
    font-size: 12px;
    white-space: nowrap;
    border: none;
    background: none;
    color: var(--accent, #1ad4c1);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.leccion-contenido-duration__reset:hover {
    opacity: 0.85;
}

.leccion-contenido-duration--readonly .leccion-contenido-duration__define-btn {
    display: none;
}

@media (max-width: 900px) {
    .modal-leccion-contenido-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-leccion-contenido-actions__buttons {
        margin-left: 0;
        justify-content: flex-end;
    }
}

.leccion-contenido-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex: 1;
    min-height: 0;
    margin-bottom: 16px;
}

.leccion-contenido-editor-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.leccion-contenido-textarea {
    width: 100%;
    min-height: min(52vh, 520px);
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
}

.leccion-contenido-preview {
    min-height: min(52vh, 520px);
    max-height: min(52vh, 520px);
    overflow: auto;
    padding: 16px;
    background: var(--bg-input);
}

.leccion-item-title-btn,
.leccion-titulo-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--accent-cyan);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.leccion-item-title-btn:hover,
.leccion-titulo-btn:hover {
    color: var(--accent-gold);
}

.leccion-contenido-preview .lesson-content-title {
    margin: 0 0 16px;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lesson-content-title--center,
.curso-player-lesson-content .lesson-content-title--center {
    text-align: center;
}

.lesson-content-subtitle {
    margin: 20px 0 10px;
    font-size: 1.1rem;
    color: var(--accent-gold);
}

.lesson-content-text {
    margin: 0 0 16px;
    line-height: 1.6;
}

/* Tutorial colapsable (:target) — enlace revela el video embebido */
.lesson-tutorial {
    margin: 0 0 20px;
    text-align: center;
}

.lesson-tutorial-toggle-wrap,
.lesson-tutorial-close-wrap {
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.5;
}

.lesson-tutorial-toggle,
.lesson-tutorial-close {
    display: inline-block;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--accent-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(242, 232, 207, 0.4);
    padding-bottom: 2px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.lesson-tutorial-toggle:hover,
.lesson-tutorial-close:hover,
.lesson-tutorial-toggle:focus-visible,
.lesson-tutorial-close:focus-visible {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
    outline: none;
}

.lesson-tutorial-close {
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    border-bottom-color: rgba(153, 153, 153, 0.4);
}

/* Solo uno visible: Ver (cerrado) / Cerrar (abierto, dentro del panel) */
.lesson-tutorial:has(.lesson-tutorial-panel:target) .lesson-tutorial-toggle-wrap {
    display: none;
}

.lesson-tutorial-panel {
    display: none;
    margin: 0;
    scroll-margin-top: 12px;
    text-align: center;
}

.lesson-tutorial-panel:target {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 4px;
    animation: lesson-tutorial-in 0.2s ease;
}

.lesson-tutorial-panel:target .lesson-content-video-wrap {
    order: 1;
    margin-bottom: 0;
}

.lesson-tutorial-panel:target .lesson-tutorial-close-wrap {
    order: 2;
}

@keyframes lesson-tutorial-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#cerrar-tutorial {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lesson-content-video-wrap {
    margin: 0 0 20px;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    line-height: 0;
    text-align: center;
}

.lesson-content-video-shell {
    --ar-w: 16;
    --ar-h: 9;
    --lesson-video-radius: 12px;
    position: relative;
    display: block;
    margin-inline: auto;
    width: min(100%, calc(min(70vh, 720px) * (var(--ar-w) / var(--ar-h))));
    max-width: 100%;
    max-height: min(70vh, 720px);
    aspect-ratio: var(--ar-w) / var(--ar-h);
    background: #000;
    border-radius: var(--lesson-video-radius);
    overflow: hidden;
    isolation: isolate;
}

/* Sin proporción conocida: no reservar una caja 16:9 falsa */
.lesson-content-video-shell.is-awaiting-aspect {
    width: 100%;
    max-width: 100%;
    height: 0;
    min-height: 0;
    max-height: 0;
    aspect-ratio: unset;
    background: transparent;
}

.lesson-content-video-shell.is-awaiting-aspect .lesson-content-video-placeholder {
    display: none;
}

.lesson-content-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    background: #000;
    border-radius: inherit;
}

.lesson-content-video::-webkit-media-controls-download-button {
    display: none !important;
}

.lesson-content-video-shell.is-buffering::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    pointer-events: none;
    animation: lesson-video-buffer-spin 0.7s linear infinite;
}

.lesson-content-video-shell.is-awaiting-aspect.is-buffering::after,
.lesson-content-video-shell:not(.is-media-ready).is-buffering::after {
    display: none;
}

@keyframes lesson-video-buffer-spin {
    to { transform: rotate(360deg); }
}

.lesson-content-video-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    cursor: pointer;
    color: inherit;
    background-color: #000;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lesson-content-video-placeholder--poster {
    background-color: #000;
}

.lesson-content-video-placeholder__play {
    display: block;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    position: relative;
}

.lesson-content-video-placeholder__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.7rem 0 0.7rem 1.15rem;
    border-color: transparent transparent transparent #111;
}

.lesson-content-video-placeholder:hover .lesson-content-video-placeholder__play,
.lesson-content-video-placeholder:focus-visible .lesson-content-video-placeholder__play {
    transform: scale(1.05);
}

.lesson-content-video-shell.is-media-ready .lesson-content-video-placeholder {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lesson-content-video-shell.is-media-error .lesson-content-video-placeholder__play {
    opacity: 0.35;
}

.lesson-video-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.2rem 0.45rem 0.28rem;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 26, 26, 0.72) 40%, rgba(26, 26, 26, 0.94) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 0 0 var(--lesson-video-radius) var(--lesson-video-radius);
    font-family: var(--font-family);
    color: var(--text-primary);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    pointer-events: auto;
}

.lesson-content-video-shell.is-controls-hidden:not(:hover):not(:focus-within) .lesson-video-controls {
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
}

.lesson-content-video-shell.is-awaiting-aspect .lesson-video-controls,
.lesson-content-video-shell:not(.is-media-ready) .lesson-video-controls {
    display: none;
}

.lesson-video-controls__progress {
    position: relative;
    width: 100%;
    height: 0.7rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.lesson-video-controls__progress-track {
    position: relative;
    width: 100%;
    height: 0.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 85%, transparent);
    overflow: hidden;
}

.lesson-video-controls__progress-buffered {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: color-mix(in srgb, var(--accent-blue) 55%, transparent);
    border-radius: inherit;
    pointer-events: none;
}

.lesson-video-controls__progress-played {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: var(--gradient-data);
    border-radius: inherit;
    pointer-events: none;
}

.lesson-video-controls__progress-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
}

.lesson-video-controls__row {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-height: 1.35rem;
}

.lesson-video-controls__btn {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.lesson-video-controls__btn:hover,
.lesson-video-controls__btn:focus-visible {
    color: var(--accent-cyan);
    background: color-mix(in srgb, var(--accent-cyan) 14%, transparent);
    outline: none;
}

.lesson-video-controls__btn--cc.is-active {
    color: var(--bg-app);
    background: var(--accent-cyan);
}

.lesson-video-controls__btn--cc.is-active:hover,
.lesson-video-controls__btn--cc.is-active:focus-visible {
    color: var(--bg-app);
    background: color-mix(in srgb, var(--accent-cyan) 85%, white);
}

.lesson-content-video::cue {
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.35;
    color: #fff;
    background: rgba(26, 26, 26, 0.72);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    text-align: center;
}

@media (max-width: 767px) {
    .lesson-content-video::cue {
        font-size: 0.68rem;
        line-height: 1.25;
    }
}

@media (min-width: 768px) {
    .lesson-content-video::-webkit-media-text-track-display {
        text-align: center;
    }
}

/* Subir cues por encima de la barra de controles custom */
.lesson-content-video::-webkit-media-text-track-container {
    bottom: 3.25rem !important;
    transform: translateY(0) !important;
}

.lesson-content-video::cue(strong),
.lesson-content-video::cue(b) {
    color: var(--accent-gold);
}

.lesson-video-controls__btn svg {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
    fill: currentColor;
}

.lesson-video-controls__time {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    white-space: nowrap;
    user-select: none;
    min-width: 4.8rem;
    font-variant-numeric: tabular-nums;
}

.lesson-video-controls__spacer {
    flex: 1;
    min-width: 0.35rem;
}

.lesson-video-controls__volume {
    display: none;
    align-items: center;
    gap: 0.15rem;
}

@media (min-width: 768px) {
    .lesson-video-controls__volume {
        display: inline-flex;
    }
}

.lesson-video-controls__volume-slider {
    width: 3.25rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--accent-cyan);
    cursor: pointer;
}

.lesson-content-video-shell:fullscreen,
.lesson-content-video-shell:-webkit-full-screen {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    --lesson-video-radius: 0px;
}

.lesson-content-video-shell:fullscreen .lesson-content-video,
.lesson-content-video-shell:-webkit-full-screen .lesson-content-video {
    object-fit: contain;
    border-radius: 0;
}

.lesson-content-figure {
    margin: 0 0 20px;
}

.lesson-content-accordion {
    margin: 0 0 12px;
    border: 1px solid rgba(242, 232, 207, 0.18);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.lesson-content-accordion__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: clamp(0.82rem, 2.1vw, 0.9rem);
    line-height: 1.35;
    color: var(--accent-gold);
    letter-spacing: 0.02em;
    user-select: none;
    min-height: 44px;
    box-sizing: border-box;
}

.lesson-content-accordion__summary::-webkit-details-marker,
.lesson-content-accordion__summary::marker {
    display: none;
    content: '';
}

.lesson-content-accordion__summary::after {
    content: '';
    flex: 0 0 auto;
    width: 0.55em;
    height: 0.55em;
    margin-left: auto;
    border-right: 2px solid var(--text-muted, rgba(242, 232, 207, 0.65));
    border-bottom: 2px solid var(--text-muted, rgba(242, 232, 207, 0.65));
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.lesson-content-accordion[open] > .lesson-content-accordion__summary::after {
    transform: rotate(225deg);
}

.lesson-content-accordion__body {
    padding: 0 14px 14px;
}

.lesson-content-accordion__body .lesson-content-figure {
    margin: 0;
}

.lesson-content-accordion__body .lesson-content-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.lesson-content-accordion__body .lesson-content-video-wrap {
    margin: 0;
    width: 100%;
}

@media (max-width: 640px) {
    .lesson-content-accordion {
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .lesson-content-accordion__summary {
        padding: 11px 12px;
        gap: 10px;
    }

    .lesson-content-accordion__body {
        padding: 0 12px 12px;
    }
}

.lesson-content-caption {
    margin: 8px 0 0;
    font-size: 0.85rem;
    text-align: center;
}

.lesson-content-list {
    margin: 0 0 20px;
    padding-left: 1.35rem;
    line-height: 1.65;
}

.lesson-content-list li {
    margin-bottom: 8px;
}

.lesson-content-list li:last-child {
    margin-bottom: 0;
}

/* Franjas comparativas GAU (Earn2Trade / Gauntlet Mini) */
.lesson-content-gau-table {
    margin: 0 0 20px;
    border: 1px solid #3A3A3A;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 80% at 50% 0%, rgba(26, 212, 193, 0.06), transparent 60%),
        #242424;
}

.lesson-content-gau-table__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lesson-content-gau-table__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    text-align: center;
    border-right: 1px solid #3A3A3A;
    min-width: 0;
}

.lesson-content-gau-table__cell:last-child {
    border-right: none;
}

.lesson-content-gau-table__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-gold, #F2E8CF);
}

.lesson-content-gau-table__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-cyan, #1AD4C1);
    line-height: 1.35;
    word-break: break-word;
}

.lesson-content-gau-table__value--stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #EEEEEE;
    line-height: 1.4;
}

.lesson-content-gau-table__value--stack span {
    display: block;
}

.lesson-content-callout {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 207, 0.35);
    background: rgba(242, 232, 207, 0.06);
    color: var(--text-secondary, #CCCCCC);
    line-height: 1.55;
    font-size: 0.92rem;
    text-align: center;
}

.lesson-content-callout strong {
    color: var(--accent-gold, #F2E8CF);
}

@media (max-width: 640px) {
    .lesson-content-gau-table__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lesson-content-gau-table__cell {
        border-right: 1px solid #3A3A3A;
        border-bottom: 1px solid #3A3A3A;
    }

    .lesson-content-gau-table__cell:nth-child(2n) {
        border-right: none;
    }

    .lesson-content-gau-table__cell:nth-child(n + 3) {
        border-bottom: none;
    }

    .lesson-content-gau-table__value {
        font-size: 0.88rem;
    }

    .lesson-content-gau-table__value--stack {
        font-size: 0.72rem;
    }
}

.lesson-content-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Carrusel paso a paso (tutorial de lección) */
.lesson-content-carousel {
    margin: 16px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    outline: none;
}

.lesson-content-carousel:focus-visible {
    box-shadow: 0 0 0 2px rgba(242, 232, 207, 0.35);
    border-radius: 14px;
}

.lesson-content-carousel__viewport {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(242, 232, 207, 0.14);
}

.lesson-content-carousel__slides {
    position: relative;
    width: 100%;
}

.lesson-content-carousel__slide {
    margin: 0;
    display: none;
}

.lesson-content-carousel__slide.is-active {
    display: block;
}

.lesson-content-carousel__slide .lesson-content-image {
    margin: 0;
    border-radius: 0;
    width: 100%;
    height: auto;
    max-height: min(72vh, 820px);
    object-fit: contain;
    background: #0a1628;
}

.lesson-content-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.lesson-content-carousel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 207, 0.28);
    background: rgba(0, 0, 0, 0.28);
    color: var(--accent-gold, #f2e8cf);
    font-family: var(--font-family);
    font-size: clamp(0.82rem, 2.1vw, 0.92rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.lesson-content-carousel__btn:hover:not(:disabled) {
    background: rgba(242, 232, 207, 0.1);
    border-color: rgba(242, 232, 207, 0.45);
}

.lesson-content-carousel__btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.lesson-content-carousel__btn span[aria-hidden='true'] {
    font-size: 1.35rem;
    line-height: 1;
}

.lesson-content-carousel__counter {
    margin: 0;
    flex: 1 1 auto;
    text-align: center;
    font-family: var(--font-family);
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: rgba(242, 232, 207, 0.85);
    letter-spacing: 0.02em;
    min-width: 7.5rem;
}

.lesson-content-carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.lesson-content-carousel__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(242, 232, 207, 0.45);
    background: transparent;
    cursor: pointer;
    scroll-snap-align: center;
    min-width: 10px;
    min-height: 10px;
}

.lesson-content-carousel__dot.is-active {
    background: var(--accent-gold, #f2e8cf);
    border-color: var(--accent-gold, #f2e8cf);
}

.lesson-content-carousel__dot:focus-visible {
    outline: 2px solid rgba(242, 232, 207, 0.7);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .lesson-content-carousel__controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'counter counter'
            'prev next';
        gap: 8px;
    }

    .lesson-content-carousel__counter {
        grid-area: counter;
        order: 0;
    }

    .lesson-content-carousel__btn--prev {
        grid-area: prev;
        width: 100%;
    }

    .lesson-content-carousel__btn--next {
        grid-area: next;
        width: 100%;
    }

    .lesson-content-carousel__btn-label {
        display: inline;
    }

    .lesson-content-carousel__slide .lesson-content-image {
        max-height: min(62vh, 560px);
    }

    .lesson-content-carousel__dot {
        width: 12px;
        height: 12px;
        min-width: 12px;
        min-height: 12px;
    }
}

.lesson-content-actions {
    margin: 8px 0 0;
}

.lesson-content-actions--center {
    text-align: center;
}

.lesson-content-actions--center .btn {
    display: inline-flex;
}

.lesson-ninjatrader-machine-id-embed,
.nt-machine-id-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lesson-ninjatrader-machine-id-embed {
    align-items: center;
    margin: 16px 0 8px;
}

.nt-machine-id-panel--profile,
.nt-machine-id-panel--admin {
    align-items: stretch;
    width: 100%;
}

.nt-machine-id-profile-host {
    margin-top: 18px;
}

.nt-machine-id-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.nt-machine-id-title {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
}

.nt-machine-id-slots {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.nt-machine-id-empty,
.nt-machine-id-error {
    margin: 0;
}

.nt-machine-id-panel--profile .nt-machine-id-empty {
    margin-bottom: 2px;
}

.nt-machine-id-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 520px;
}

.nt-machine-id-panel--admin .nt-machine-id-form,
.nt-machine-id-panel--profile .nt-machine-id-form {
    justify-content: flex-start;
    max-width: none;
    flex-wrap: nowrap;
}

.nt-machine-id-input {
    flex: 1 1 220px;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    font: inherit;
    box-sizing: border-box;
    line-height: 1.2;
}

.nt-machine-id-input::placeholder {
    color: var(--text-muted, #9aa3ad);
}

.nt-machine-id-form .btn.nt-machine-id-submit {
    flex: 0 0 auto;
    align-self: center;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    line-height: 1;
}

.nt-machine-id-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nt-machine-id-panel--admin .nt-machine-id-list,
.nt-machine-id-panel--profile .nt-machine-id-list {
    max-width: none;
}

.nt-machine-id-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid transparent;
}

.lesson-ninjatrader-machine-id-embed .nt-machine-id-list {
    max-width: min(100%, 720px);
}

.lesson-ninjatrader-machine-id-embed .nt-machine-id-item {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.nt-machine-id-item--authorized {
    border-left-color: var(--accent-cyan);
}

.nt-machine-id-item--pending {
    border-left-color: var(--accent-gold);
}

.nt-machine-id-item--change_requested {
    border-left-color: #d4a24a;
}

.nt-machine-id-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 180px;
}

.lesson-ninjatrader-machine-id-embed .nt-machine-id-item-main {
    flex: 0 1 auto;
    justify-content: center;
    width: auto;
    max-width: 100%;
}

.nt-machine-id-value {
    font-weight: 600;
    letter-spacing: 0.02em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

.nt-machine-id-status {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--text-muted, #9aa3ad);
    background: rgba(255, 255, 255, 0.06);
}

.nt-machine-id-status--authorized {
    color: var(--accent-cyan);
    background: rgba(26, 212, 193, 0.12);
}

.nt-machine-id-status--pending {
    color: var(--accent-gold);
    background: rgba(242, 232, 207, 0.12);
}

.nt-machine-id-status--change_requested {
    color: #f2d08a;
    background: rgba(212, 162, 74, 0.16);
}

.nt-machine-id-check {
    flex: 0 0 auto;
    color: var(--accent-cyan);
}

.nt-machine-id-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.nt-machine-id-change.btn {
    min-height: 0;
    height: auto;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.lesson-ninjatrader-machine-id-embed .nt-machine-id-actions {
    flex: 0 0 auto;
    justify-content: center;
    width: auto;
}

.lesson-ninjatrader-machine-id-embed .nt-machine-id-change.btn {
    padding: 4px 8px;
}

.usuarios-nt-machine-ids-section {
    margin-top: 20px;
}

.modal-nt-machine-id {
    max-width: min(440px, calc(100vw - 24px));
    width: 100%;
    padding: clamp(14px, 3.5vw, 22px);
    gap: 0;
}

.modal-nt-machine-id-header {
    margin-bottom: clamp(10px, 2.5vw, 14px);
}

.modal-nt-machine-id-header h3 {
    font-size: clamp(0.9rem, 2.8vw, 1rem);
    line-height: 1.25;
}

.modal-nt-machine-id-body {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.5vw, 14px);
}

.modal-nt-machine-id-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(12px, 2.5vw, 16px);
}


@media (max-width: 900px) {
    .leccion-contenido-editor-grid {
        grid-template-columns: 1fr;
    }

    .leccion-contenido-textarea,
    .leccion-contenido-preview {
        min-height: 240px;
        max-height: 320px;
    }
}

.lecciones-admin .leccion-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.leccion-item-draggable {
    gap: 8px;
}

.leccion-drag-handle {
    flex: 0 0 auto;
    cursor: grab;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 4px 6px;
    user-select: none;
    letter-spacing: -2px;
}

.leccion-drag-handle:active {
    cursor: grabbing;
}

.leccion-item-title,
.leccion-item-title-btn {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.leccion-item.is-dragging {
    opacity: 0.45;
}

.lecciones-admin {
    min-height: 44px;
    padding: 4px 0;
    border-radius: 6px;
    transition: outline-color 0.15s ease;
}

.lecciones-admin--empty {
    min-height: 52px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.15);
}

.lecciones-admin--empty.drag-over {
    border-color: rgba(26, 212, 193, 0.45);
    background: rgba(26, 212, 193, 0.08);
}

.lecciones-admin.drag-over {
    outline: 2px dashed rgba(255, 255, 255, 0.25);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Cada módulo dentro del curso */
.modulo {
    margin-top: 20px;
    border-left: none;
    padding-left: 16px;
    position: relative;
}
.modulo::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-data);
    border-radius: 2px;
}

.modulo h4 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.modulo p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

/* Lista de lecciones */
.lecciones-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.leccion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-input);
}

.leccion-info {
    flex: 1;
    min-width: 150px;
}

.leccion-titulo {
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.leccion-estado {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.leccion-estado.completada {
    color: var(--positive);
}

.leccion-boton {
    background: var(--text-primary);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 700;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--bg-app);
}

.leccion-boton:hover {
    background: var(--accent-gold);
    transform: scale(1.02);
}

.leccion-boton.completada {
    background: #2e7d64;
    color: #fff;
    cursor: default;
    opacity: 0.7;
}

/* ========== RESPONSIVE EXTREMO ========== */

/* Tablets (768px y menos) */
@media (max-width: 768px) {
    .curso-card {
        padding: 16px;
    }
    .curso-card h3 {
        font-size: 1.05rem;
    }
    .modulo h4 {
        font-size: 1rem;
    }
    .leccion-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .leccion-info {
        width: 100%;
    }
    .leccion-boton {
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    .curso-admin .lecciones-admin .leccion-item {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 8px 0;
    }

    .curso-admin .modulo-admin-header {
        flex-wrap: nowrap;
    }

    .curso-admin .modulo-admin-header-start {
        min-width: 0;
    }

    .curso-admin .course-admin-compact-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px !important;
        max-width: 36px;
        padding: 0 !important;
        border-radius: 8px;
        font-size: 0;
        line-height: 0;
        gap: 0;
        flex-shrink: 0;
    }

    .curso-admin .course-admin-btn-label {
        display: none !important;
    }

    .curso-admin .course-admin-btn-icon,
    .curso-admin .course-admin-compact-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Iconos de respaldo si el HTML aún tiene solo texto (p. ej. caché del JS) */
    .curso-admin .course-admin-compact-btn.btn-course-add:not(:has(svg))::before {
        content: '+';
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1;
    }

    .curso-admin .course-admin-compact-btn.btn-course-options:not(:has(svg))::before {
        content: '⋮';
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1;
    }

    .curso-admin .course-admin-compact-btn.btn-course-config:not(:has(svg))::before {
        content: '⚙';
        font-size: 0.95rem;
        line-height: 1;
    }

    .curso-admin .leccion-item-title-btn {
        font-size: 0.82rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .curso-admin .lecciones-admin .leccion-item > .badge {
        display: none;
    }

    .curso-admin .modulo-admin-title {
        font-size: 0.92rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
}

/* Móviles pequeños (480px y menos) */
@media (max-width: 480px) {
    .curso-card {
        padding: 12px;
    }
    .modulo {
        padding-left: 8px;
    }
    .leccion-titulo {
        font-size: 0.9rem;
    }
    .leccion-estado {
        font-size: 0.7rem;
    }
    .leccion-boton {
        padding: 10px;
        font-size: 0.85rem;
    }
}

/* Estilos para el formulario de trading */
.trading-form-card {
    background: var(--bg-elevated);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid var(--border);
}

.trading-form-card h3 {
    margin-bottom: 20px;
    color: var(--accent-cyan);
}

.trading-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* ========== CARGA UNIFICADA ========== */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: clamp(16px, 3vw, 24px);
    min-height: 40px;
    color: var(--text-secondary);
    text-align: center;
}

.app-loading__label {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.is-app-loading {
    position: relative;
}

.app-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 18, 0.42);
    backdrop-filter: blur(1px);
    border-radius: inherit;
}

.app-loading-overlay[hidden] {
    display: none !important;
}

.is-app-loading > :not(.app-loading-overlay) {
    visibility: hidden;
    pointer-events: none;
}

#loginForm,
#registerForm,
#inviteRegisterForm,
.trading-form-card,
.modal-content.modal-sistema,
.modal-content.modal-student-edit,
.student-photo-edit-body,
.student-data-edit-body,
.estudiante-tutores-modal-body,
.modal-leccion-config,
.modal-leccion-contenido {
    position: relative;
}

.is-form-loading {
    pointer-events: none;
}

.is-form-loading > :not(.app-form-loading-overlay) {
    opacity: 0.4;
    filter: blur(0.4px);
}

.app-form-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 18, 0.38);
    backdrop-filter: blur(1px);
    border-radius: inherit;
}

.app-form-loading-overlay[hidden] {
    display: none !important;
}

/* Icono Q — girar 750ms + presión/rebote/soltar más suave + espera 100ms */
.app-loading-q {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    animation: app-loading-girar-presionar 1280ms infinite;
    animation-timing-function: ease-out, cubic-bezier(0.12, 0.85, 0.22, 1), cubic-bezier(0.4, 0.05, 0.2, 1), cubic-bezier(0.33, 1.15, 0.55, 1), cubic-bezier(0.22, 1, 0.36, 1), ease-out;
    filter: drop-shadow(0 0 10px rgba(26, 212, 193, 0.4));
    mix-blend-mode: screen;
    user-select: none;
}

@keyframes app-loading-girar-presionar {
    0% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(26, 212, 193, 0.4));
    }
    2% {
        transform: rotate(7deg) scale(1.015);
        filter: drop-shadow(0 0 10px rgba(26, 212, 193, 0.42));
    }
    58.59% {
        transform: rotate(-360deg) scale(1);
        filter: drop-shadow(0 0 14px rgba(26, 212, 193, 0.55));
    }
    65.63% {
        transform: rotate(-360deg) scale(0.78);
        filter: drop-shadow(0 0 6px rgba(26, 212, 193, 0.25));
    }
    75% {
        transform: rotate(-360deg) scale(0.9);
        filter: drop-shadow(0 0 9px rgba(26, 212, 193, 0.35));
    }
    84.38% {
        transform: rotate(-360deg) scale(1.02);
        filter: drop-shadow(0 0 12px rgba(26, 212, 193, 0.48));
    }
    92.19%,
    100% {
        transform: rotate(-360deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(26, 212, 193, 0.4));
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-q {
        animation: none;
    }
}

/* Hosts — centrar loader en contenedores de espera */
:is(
    #trading-logs-table,
    #estudiante-trades-table,
    #bitacoraPanel,
    #cursosList,
    #estudiante-stats,
    #estudiantePerfilHeader,
    #estudiantesList,
    #usuariosGestionList,
    #usuariosDetailInfo,
    #invitacionesList,
    #estudianteActivityMiniList,
    #usuariosDetailLog,
    #notificacionesInactividadList,
    #notificacionesSolicitudesPerfilList,
    #notificacionesPersonalList,
    #alertaProgramarDestinatarios,
    #modalEstudianteAutorizacionesBody,
    #modalEstudianteTutoresBody,
    #estudianteCursoPlayerHost,
    #cursoPlayerLessonContent,
    .activity-log-detail,
    .trading-accounts-picker,
    .notificaciones-solicitudes-list,
    .notificaciones-personal-list
):has(> .app-loading:only-child) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(80px, 18vw, 160px);
    width: 100%;
}

#estudiantePerfilView.is-app-loading {
    min-height: clamp(240px, 40vh, 420px);
}

#estudianteTradingCursoCard.is-app-loading {
    min-height: clamp(280px, 45vh, 480px);
}

#estudianteTradingCursoCard.is-app-loading > .app-loading-overlay {
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(56px, 14vh, 140px);
    border-radius: inherit;
}

#tab-cursos > .card.is-app-loading {
    min-height: clamp(200px, 35vh, 360px);
}

#tab-cursos > .card.is-app-loading > .app-loading-overlay {
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(72px, 16vh, 140px);
    border-radius: inherit;
}

#estudiantePerfilView.is-app-loading > .app-loading-overlay {
    border-radius: var(--radius-card);
}

.activity-log-body.is-app-loading {
    min-height: min(360px, 52vh);
    display: block;
}

.activity-log-body.is-app-loading > .app-loading-overlay {
    border-radius: 8px;
}

#tab-notificaciones > .card.is-app-loading {
    min-height: clamp(200px, 35vh, 360px);
}

#usuariosDetailView.is-app-loading {
    min-height: clamp(220px, 38vh, 400px);
}

.student-activity-mini-list:has(> .app-loading) {
    min-height: 180px;
}

.notificaciones-solicitudes-empty,
.student-activity-mini-empty {
    width: 100%;
    text-align: center;
}

/* Overlay global para cargas de inicio de sesión */
.global-loading-overlay {
    position: fixed;
    inset: 0;
    background: #080c12;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.global-loading-overlay.is-open {
    display: flex;
}

/* Misma tipografía que #bootSplash «Cargando app» */
.global-loading-overlay .app-loading {
    gap: 14px;
    padding: 0;
    color: #e8eef6;
    font-family: 'llScribe Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.global-loading-overlay .app-loading__label {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: #e8eef6;
}

/* Tabla de operaciones */
.trading-table {
    width: 100%;
    border-collapse: collapse;
}

.trading-table th, .trading-table td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.trading-table th {
    background: var(--bg-input);
    color: var(--accent-cyan);
}

.trading-table tr:hover {
    background: var(--bg-input);
}

.trade-positive {
    color: var(--positive);
    font-weight: 600;
}

.trade-negative {
    color: var(--negative);
    font-weight: 600;
}

.trade-row--feedback-pending {
    background: rgba(255, 193, 7, 0.08);
}

.trade-row--feedback-ready {
    background: rgba(76, 175, 80, 0.1);
    box-shadow: inset 3px 0 0 var(--positive, #4caf50);
}

/* ========== RETROALIMENTACIÓN (modales + detalle trade) ========== */

.btn-feedback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.btn-feedback:hover:not(:disabled) {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.btn-feedback:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-feedback--primary {
    border-color: var(--accent-cyan);
    background: rgba(0, 188, 212, 0.12);
    color: var(--accent-cyan);
}

.btn-feedback--primary:hover:not(:disabled) {
    background: rgba(0, 188, 212, 0.22);
}

.btn-feedback--ghost {
    background: transparent;
}

.btn-feedback--danger {
    border-color: rgba(244, 67, 54, 0.45);
    color: var(--negative);
    background: rgba(244, 67, 54, 0.08);
}

.btn-feedback--danger:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.16);
}

.btn-feedback--icon-only {
    padding: 0.3rem 0.4rem;
    min-width: 1.85rem;
    font-size: 0.85rem;
}

.btn-feedback-glyph {
    font-size: 0.9rem;
    line-height: 1;
}

.trade-feedback-toolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    align-items: center;
    justify-content: flex-end;
}

.trade-feedback-toolbar--staff {
    flex-wrap: nowrap;
}

.trade-feedback-toolbar[hidden] {
    display: none !important;
}

.trade-feedback-record-dock {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 188, 212, 0.45);
    background: var(--bg-card, rgba(18, 22, 32, 0.96));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}

.trade-feedback-record-dock[hidden] {
    display: none !important;
}

.trade-feedback-record-dock__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0.9;
    color: var(--text-primary);
}

.trade-feedback-record-dock__timer {
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-cyan);
    min-width: 2.75rem;
    text-align: center;
}

.trade-feedback-record-dock--paused .trade-feedback-record-dock__timer {
    color: var(--text-muted);
}

.trade-feedback-dock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.trade-feedback-dock-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.trade-feedback-dock-btn--stop {
    border-color: rgba(0, 188, 212, 0.5);
    color: var(--accent-cyan);
    background: rgba(0, 188, 212, 0.12);
}

.trade-feedback-dock-btn--cancel {
    border-color: rgba(244, 67, 54, 0.45);
    color: var(--negative);
    background: rgba(244, 67, 54, 0.08);
}

.trade-feedback-dock-btn--cancel:hover {
    border-color: var(--negative);
    color: var(--negative);
}

.trade-feedback-toolbar--center {
    justify-content: center;
    margin-top: 0.75rem;
}

.trade-feedback-note-textarea {
    width: 100%;
    resize: vertical;
    min-height: 7rem;
}

.trade-feedback-note-char-count {
    font-size: 0.8rem;
    margin-left: auto;
    text-align: right;
}

.trade-feedback-note-dictate-btn .recording-type-icon--note-dictate {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

.trade-feedback-note-dictate-btn.trade-feedback-note-dictate--recording {
    color: var(--negative, #f44336);
    border-color: rgba(244, 67, 54, 0.45);
    background: rgba(244, 67, 54, 0.08);
}

.trade-feedback-note-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
}

.trade-feedback-note-upload-footer--complete .trade-feedback-upload-progress-label {
    color: var(--positive, #4caf50);
}

.trade-feedback-note-dictate-status {
    font-size: 0.85rem;
}

.trade-feedback-note-toolbar {
    margin-top: 1rem;
}

.trade-feedback-note-modal .modal-sistema-header .visor-close {
    display: none;
}

.modal-trade-feedback--note.modal-content {
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 680px);
}

.modal-trade-feedback--note .trade-feedback-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.trade-feedback-note-upload-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: var(--surface-elevated, rgba(0, 0, 0, 0.15));
}

.trade-feedback-note-upload-footer[hidden] {
    display: none !important;
}

.trade-feedback-note-upload-progress {
    max-width: none;
    width: 100%;
    margin: 0;
}

.trade-feedback-note-upload-footer .trade-feedback-upload-msg {
    margin: 0 0 0.5rem;
    text-align: center;
}

.trade-feedback-note-upload-footer .trade-feedback-upload-progress-label {
    text-align: center;
}

.trade-feedback-toolbar--staff .btn-feedback--icon-only .btn-feedback-label,
.trade-feedback-toolbar--staff .btn-feedback-label {
    display: none;
}

.trade-feedback-toolbar--staff .btn-feedback--primary .btn-feedback-label {
    display: inline;
}

@media (max-width: 520px) {
    .trade-feedback-toolbar--staff .btn-feedback--primary .btn-feedback-label {
        display: none;
    }
}

.trade-feedback-toolbar--superadmin .btn-feedback-label {
    font-size: 0.75rem;
}

@media (max-width: 400px) {
    .trade-feedback-toolbar--superadmin .btn-feedback-label {
        display: none;
    }
}

.trade-feedback-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.trade-feedback-badge--pending {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.trade-feedback-badge--ready {
    background: rgba(76, 175, 80, 0.15);
    color: var(--positive);
}

.trade-feedback-badge--viewed {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-muted, #94a3b8);
}

.trade-feedback-badge--mail {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.modal-trade-feedback {
    max-width: 440px;
    width: min(95vw, 440px);
}

.modal-trade-feedback--playback,
.modal-trade-feedback:has(.media-playback-stage:not(:empty):not(.media-playback-stage--audio)) {
    max-width: min(95vw, 720px);
    width: min(95vw, 720px);
}

.modal-trade-feedback:has(.media-playback-stage--audio:not(:empty)) {
    max-width: min(95vw, 400px);
    width: min(95vw, 400px);
}

.modal-trade-feedback--history {
    max-width: 520px;
    width: min(95vw, 520px);
}

#modalTradeFeedbackPlayback.modal-overlay {
    z-index: 1010;
}

.trade-feedback-modal-body {
    padding: 0 1rem 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.trade-feedback-modal .modal-sistema-header {
    flex-shrink: 0;
}

.trade-feedback-modal-body--playback {
    padding-bottom: 1rem;
}

.trade-feedback-modal .modal-sistema-header h3 {
    font-size: 1rem;
}

.trade-feedback-history-subtitle {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
}

.trade-feedback-history-host {
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.trade-feedback-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.trade-feedback-history-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    background: var(--bg-input);
}

.trade-feedback-history-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 200px;
}

.trade-feedback-history-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.trade-feedback-history-detail {
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
}

.trade-feedback-history-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 0.35rem;
}

.trade-feedback-history-badge--active {
    background: rgba(76, 175, 80, 0.2);
    color: var(--positive, #4caf50);
}

.trade-feedback-history-badge--superseded {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-muted, #94a3b8);
}

.trade-feedback-history-badge--deleted {
    background: rgba(244, 67, 54, 0.15);
    color: var(--negative, #f44336);
}

.trade-feedback-step {
    padding: 0.25rem 0 0;
}

.trade-feedback-type-btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.trade-feedback-text-label {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.trade-feedback-text-input {
    min-height: 10rem;
    resize: vertical;
}

.trade-feedback-text-count {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.75rem;
    text-align: right;
}

.trade-feedback-text-body {
    width: 100%;
    max-height: min(50vh, 320px);
    overflow-y: auto;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

.trade-feedback-text-body--preview {
    max-height: min(36vh, 240px);
}

.media-playback-stage--text {
    display: block;
    min-height: unset;
    aspect-ratio: unset;
}

.media-playback-stage--text.is-app-loading {
    aspect-ratio: unset;
    margin-bottom: 0;
    min-height: 4.5rem;
}

.modal-trade-feedback--playback:has(.media-playback-stage--text:not(:empty)),
.modal-trade-feedback:has(.media-playback-stage--text:not(:empty)) {
    max-width: min(95vw, 560px);
    width: min(95vw, 560px);
}

.trade-feedback-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.65rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
}

.trade-feedback-type-card:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 188, 212, 0.06);
    box-shadow: 0 0 0 1px rgba(0, 188, 212, 0.15);
}

.trade-feedback-type-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--text-primary);
}

.recording-type-icon {
    display: block;
    flex-shrink: 0;
}

.recording-type-icon--card {
    width: 1.35rem;
    height: 1.35rem;
}

.recording-type-icon--dock {
    width: 1rem;
    height: 1rem;
}

.trade-feedback-type-card__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-cyan);
}

.trade-feedback-type-card__hint {
    font-size: 0.65rem;
    color: var(--text-muted, #94a3b8);
    line-height: 1.2;
}

.trade-feedback-timer {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    margin: 0.5rem 0;
    color: var(--accent-cyan);
    letter-spacing: 0.04em;
}

.trade-feedback-status {
    text-align: center;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.trade-feedback-preview-caption {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    text-align: center;
}

.trade-feedback-preview-host {
    margin: 0.25rem 0 0.5rem;
}

.trade-feedback-preview-host:empty {
    display: none;
}

.trade-feedback-preview-media {
    width: 100%;
    max-height: 240px;
    border-radius: 8px;
    display: block;
}

.trade-feedback-preview-host audio.trade-feedback-preview-media {
    max-height: none;
    height: 2.5rem;
}

.trade-feedback-playback-host {
    border-radius: 8px;
    overflow: hidden;
}

.media-playback-stage {
    position: relative;
    width: 100%;
    border-radius: 8px;
}

.media-playback-stage:not(:has(.known-duration-player)) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
}

.media-playback-stage:not(:has(.known-duration-player)):not(.media-playback-stage--audio) {
    min-height: 12rem;
}

.media-playback-stage.is-app-loading:not(:has(.known-duration-player)) {
    aspect-ratio: 16 / 9;
    margin-bottom: 3.375rem;
    background: var(--bg-card, rgba(18, 22, 32, 0.96));
    border: 1px solid var(--border);
}

.media-playback-stage--audio.is-app-loading:not(:has(.known-duration-player)) {
    aspect-ratio: unset;
    margin-bottom: 0;
    min-height: 7.5rem;
}

.media-playback-stage--audio {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0 0.75rem;
}

.media-playback-stage--audio .known-duration-player--audio-modal {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-input, rgba(24, 28, 38, 0.92));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    overflow: visible;
}

.media-playback-stage--audio .known-duration-player__play-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.15rem 1rem 0.35rem;
}

.media-playback-stage--audio .known-duration-player__controls--audio-modal {
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0 1.15rem 1.25rem;
    border-top: none;
}

.media-playback-stage--audio .known-duration-player__play {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 50%;
    font-size: 1.15rem;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}

.media-playback-stage--audio .known-duration-player__seek-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
}

.media-playback-stage--audio .known-duration-player__seek-wrap {
    flex: 1;
    min-width: 0;
}

.media-playback-stage--audio .known-duration-player__seek-track {
    height: 0.35rem;
}

.media-playback-stage--audio .known-duration-player__time {
    font-size: 0.75rem;
    min-width: 2.35rem;
}

.media-playback-stage .known-duration-player {
    width: 100%;
    border-radius: inherit;
}

.media-playback-stage .known-duration-player__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.media-playback-stage .known-duration-player__center-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    padding-left: 0.2rem;
    border: none;
    border-radius: 50%;
    background: rgba(10, 12, 18, 0.58);
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
    transition: transform 0.15s ease, background 0.15s ease;
    overflow: visible;
}

.media-playback-stage .known-duration-player__center-play:hover {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(10, 12, 18, 0.72);
}

.media-playback-stage .known-duration-player__viewport.is-playing .known-duration-player__center-play {
    display: none;
}

.media-playback-stage .known-duration-player__center-play.is-warming,
.media-playback-stage .known-duration-player__center-play.is-preparing {
    pointer-events: auto;
}

.media-playback-stage .known-duration-player__center-play.is-warming::after,
.media-playback-stage .known-duration-player__center-play.is-preparing::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: known-duration-player-spin 0.75s linear infinite;
}

.media-playback-stage .known-duration-player__center-play.is-preparing {
    color: transparent;
}

.media-playback-stage .known-duration-player__viewport.is-warming:not(.is-playing) .known-duration-player__center-play {
    opacity: 0.92;
}

.known-duration-player__play.is-preparing {
    opacity: 0.65;
    pointer-events: none;
}

@keyframes known-duration-player-spin {
    to {
        transform: rotate(360deg);
    }
}

.media-playback-stage .known-duration-player__viewport .known-duration-player__media:not(.known-duration-player__media--audio-only) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    display: block;
}

.media-playback-stage .known-duration-player__viewport .known-duration-player__media--audio-only {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.media-playback-stage .known-duration-player__viewport > video.trade-feedback-preview-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    display: block;
    background: #000;
}

.media-playback-host.is-app-loading:not(.media-playback-stage) {
    min-height: 6rem;
    position: relative;
}

.staff-media-share-player.media-playback-host.is-app-loading {
    min-height: 8rem;
}

.trade-feedback-playback-host:not(.media-playback-stage) .trade-feedback-preview-media {
    max-height: min(50vh, 320px);
}

.trade-feedback-hint {
    margin-top: 0.65rem;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
}

.trade-feedback-step--upload {
    text-align: center;
    padding: 1.25rem 0;
}

.trade-feedback-upload-msg {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
}

.trade-feedback-upload-progress {
    max-width: 280px;
    margin: 0 auto;
}

.trade-feedback-upload-progress .curso-player-progress-track {
    width: 100%;
}

.trade-feedback-upload-progress-label {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

video.trade-feedback-preview-media {
    object-fit: contain;
    background: transparent;
}

.trade-feedback-history-item .btn-feedback {
    flex-shrink: 0;
}

.trade-feedback-history-nofile {
    font-size: 0.75rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    max-width: 100%;
}

.pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: min(100%, 420px);
}

.pagination__nav {
    flex: 0 0 auto;
    min-width: 36px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.pagination__nav:hover:not(:disabled) {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.pagination__nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination__page {
    flex: 0 0 auto;
    min-width: 36px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-weight: 600;
}

.pagination__page:hover:not(.pagination__page--active) {
    border-color: var(--accent-cyan);
    color: var(--text-primary);
}

.pagination__page--active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-app);
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(26, 212, 193, 0.35);
    pointer-events: none;
    cursor: default;
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    color: var(--text-muted);
    font-weight: 700;
    user-select: none;
}

.pagination__status {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--text-primary);
}

.pagination--single {
    margin-top: 16px;
}

.pagination--single .pagination__status {
    width: 100%;
    text-align: center;
}

/* ========== TOAST NOTIFICATION ========== */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 90vw;
    text-align: center;
    white-space: pre-line;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-success {
    background: #1e4620;
    color: #a3d9a5;
    border: 1px solid #2d5a2f;
}

.toast-error {
    background: #4a1c24;
    color: #f5a3ab;
    border: 1px solid #5a2a32;
}

.toast-info {
    background: color-mix(in srgb, var(--accent-cyan) 18%, #0f1f24);
    color: #b8f3ea;
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 45%, #1a3a40);
}

/* ========== FORMULARIO DE TRADING MEJORADO ========== */
.form-section {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
}

.section-title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-btn {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-btn .form-input {
    flex: 1;
}

#entryPricesContainer,
#exitPricesContainer,
#staffEntryPricesContainer,
#staffExitPricesContainer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trade-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trade-price-composite {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input, var(--bg-surface));
    overflow: hidden;
}

.trade-price-composite:focus-within {
    border-color: var(--accent-cyan, #22d3ee);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-cyan, #22d3ee) 25%, transparent);
}

.trade-price-composite.is-invalid {
    border-color: var(--danger, #f44336);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #f44336) 22%, transparent);
}

.trade-price-composite.is-invalid:focus-within {
    border-color: var(--danger, #f44336);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #f44336) 28%, transparent);
}

.form-input.trade-price-input.is-invalid {
    border-color: var(--danger, #f44336);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #f44336) 22%, transparent);
}

.trade-price-composite .trade-price-input.form-input {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.trade-price-composite .trade-price-input.form-input:focus {
    outline: none;
    box-shadow: none;
}

.trade-price-qty {
    flex-shrink: 0;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    border-left: 1px solid var(--border);
    align-self: stretch;
    display: flex;
    align-items: center;
}

.trade-price-igual-btn {
    flex-shrink: 0;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    color: var(--accent-cyan, #22d3ee);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.trade-price-igual-btn:hover {
    border-color: var(--accent-cyan, #22d3ee);
    background: color-mix(in srgb, var(--accent-cyan, #22d3ee) 12%, transparent);
}

.trade-price-igual-btn[hidden] {
    display: none !important;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
}

.checkbox-inline {
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-left: 8px;
    font-weight: normal;
}

.checkbox-inline input[type="checkbox"] {
    margin-right: 4px;
    accent-color: var(--accent-cyan);
}

.roles-multiselect {
    position: relative;
}

.roles-multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.roles-multiselect-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roles-multiselect-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.roles-multiselect-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.roles-multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}

.roles-multiselect-option:hover {
    background: var(--bg-surface);
}

.roles-multiselect-option input {
    accent-color: var(--accent-cyan);
    flex-shrink: 0;
}

.roles-multiselect-option input:disabled + span {
    opacity: 0.65;
}

/* ========== IMAGEN UPLOAD ========== */
.trading-form-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    gap: clamp(12px, 2.5vw, 16px);
    margin-bottom: 16px;
    align-items: stretch;
}

.trading-form-top-grid .form-section {
    margin-bottom: 0;
    min-width: 0;
}

.trading-form-section--data,
.trading-form-section--image {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.trading-operation-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px clamp(16px, 2.5vw, 24px);
    align-items: end;
}

.trading-operation-field {
    min-width: 0;
}

.trading-operation-field--full {
    grid-column: 1 / -1;
}

.trading-operation-field--datetime {
    grid-column: span 2;
}

.trading-datetime-row {
    flex-wrap: wrap;
    align-items: stretch;
    gap: clamp(8px, 1.5vw, 12px);
}

.trading-datetime-row .form-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.trading-datetime-row .form-input[type="datetime-local"] {
    min-height: 44px;
    height: auto;
    line-height: 1.25;
}

.trading-datetime-row .btn.btn-sm {
    min-height: 44px;
    height: auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.trade-image-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.trade-image-slot {
    position: relative;
    width: 100%;
    height: clamp(220px, 34vw, 320px);
    min-height: 220px;
    background: var(--bg-input);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background 0.2s ease;
    margin: 0;
}

.trade-image-file-input {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    border: 0;
    font-size: 0;
    pointer-events: auto;
}

.trade-image-slot.has-image .trade-image-file-input,
.trade-image-slot.loading .trade-image-file-input {
    pointer-events: none;
    visibility: hidden;
}

.trade-image-slot:not(.has-image):not(.loading) {
    cursor: pointer;
}

.trade-image-slot:not(.has-image):not(.loading):hover,
.trade-image-slot.is-dragover {
    border-color: var(--accent-cyan);
    background: rgba(26, 212, 193, 0.06);
}

.trade-image-slot.is-dragover .trade-image-slot__empty {
    color: var(--accent-cyan);
}

.trade-image-slot.has-image {
    cursor: default;
}

.trade-image-slot:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

.trade-image-slot__empty {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
    pointer-events: none;
    user-select: none;
}

.trade-image-slot__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    background: #111;
}

.trade-image-slot.has-image .trade-image-slot__empty {
    display: none;
}

.trade-image-slot.has-image .trade-image-slot__img {
    display: block;
}

.trade-image-slot:not(.has-image) .image-remove {
    display: none;
}

.trade-image-slot .image-remove {
    z-index: 4;
}

.image-upload-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.image-status {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 0;
}

.image-preview {
    position: relative;
}

.trade-image-slot__loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 18, 0.4);
    border-radius: inherit;
}

.trade-image-slot__loading[hidden] {
    display: none !important;
}

.trade-image-slot.loading .trade-image-slot__empty {
    opacity: 0.35;
}

@media (max-width: 900px) {
    .trading-form-top-grid {
        grid-template-columns: 1fr;
    }

    .trade-image-slot {
        height: clamp(200px, 52vw, 280px);
        min-height: 200px;
    }
}

@media (max-width: 720px) {
    .trading-operation-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trading-operation-field--datetime {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) and (min-width: 481px) {
    .trading-operation-field:has(#tradingTickframe) {
        order: 5;
    }

    .trading-operation-field--datetime {
        order: 6;
    }
}

@media (max-width: 768px) {
    .trading-datetime-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .trading-datetime-row .form-input {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        max-height: none;
    }

    .trading-datetime-row .form-input[type="datetime-local"] {
        font-size: 16px;
    }

    .trading-datetime-row .btn {
        width: 100%;
    }
}

@media (min-width: 721px) {
    .trading-operation-field--datetime {
        padding-right: clamp(6px, 1.25vw, 12px);
    }

    .trading-operation-field:has(#tradingTickframe) {
        padding-left: clamp(6px, 1.25vw, 12px);
    }
}

@media (min-width: 769px) {
    .trading-datetime-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .trading-datetime-row .form-input {
        flex: 1 1 auto;
        width: auto;
        min-width: min(100%, 180px);
    }
}

@media (max-width: 480px) {
    .trading-operation-fields {
        grid-template-columns: 1fr;
    }

    .trading-operation-field--datetime {
        grid-column: span 1;
    }
}


.image-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.2);
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.image-remove:hover {
    background: #e53e3e;
    transform: scale(1.1);
}

/* ========== PREVIEW P&L ========== */
.trade-preview {
    background: #1a2a1a;
    border: 1px solid #2d5a2f;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px;
}

.preview-header {
    background: #1e4620;
    color: #a3d9a5;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
}

.preview-body {
    padding: 12px 16px;
}

.preview-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.preview-label {
    color: var(--text-secondary);
}

.preview-value {
    color: var(--text-primary);
    font-weight: 500;
}

.preview-result {
    border-top: 1px solid #2d5a2f;
    margin-top: 8px;
    padding-top: 8px;
}

.preview-result .preview-label {
    font-weight: 600;
    color: var(--text-primary);
}

.preview-result .preview-value {
    font-size: 16px;
    font-weight: 700;
}

/* ========== MODALES ========== */
#appModals {
    display: contents;
}

.modal-overlay[hidden] {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: clamp(12px, 3vw, 20px);
    padding-top: max(clamp(12px, 3vw, 20px), calc(env(safe-area-inset-top) + 48px));
    overflow: hidden;
    overscroll-behavior: contain;
}

.modal-overlay-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 1001;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modal-overlay-close:hover {
    background: rgba(0, 0, 0, 0.78);
    border-color: rgba(26, 212, 193, 0.45);
    color: #fff;
}

.modal-overlay-close:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.modal-content .visor-close,
.modal-sistema-header .visor-close,
.trade-detail-header .visor-close,
.modal-header .visor-close {
    display: none !important;
}

.modal-content,
.modal-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-card);
    padding: clamp(16px, 3vw, 24px);
    max-width: min(500px, 100%);
    width: 100%;
    max-height: min(calc(100dvh - 80px), 92dvh);
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.modal-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 16px);
}

.modal-panel-body .form-row {
    grid-template-columns: 1fr;
}

@media (min-width: 540px) {
    .modal-panel-body .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.modal-panel > .modal-sistema-header,
.modal-panel > .modal-mis-tiempos-header,
.modal-panel > .trade-detail-header,
.modal-panel > .trade-detail-counter,
.modal-panel > .modal-sistema-actions,
.modal-panel > .trade-detail-nav,
.modal-panel > .trade-detail-staff-actions,
.modal-panel > .modal-alert-schedule-actions,
.modal-panel > .modal-leccion-config-actions,
.modal-panel > .modal-leccion-contenido-actions {
    flex-shrink: 0;
}

.modal-content h3 {
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

.modal-sistema {
    max-width: min(480px, 100%);
}

.modal-sistema-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.modal-sistema-header h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.modal-sistema-mensaje {
    margin: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

#modalSistemaConfirmMensaje {
    text-align: center;
}

#modalSistemaConfirm .modal-sistema-header {
    justify-content: center;
}

#modalSistemaConfirm #modalSistemaConfirmTitulo {
    text-align: center;
}

#modalSistemaAlertMensaje {
    text-align: center;
}

#modalSistemaAlert .modal-sistema-header {
    justify-content: center;
}

#modalSistemaAlert #modalSistemaAlertTitulo {
    text-align: center;
}

#modalSistemaAlert .modal-sistema-actions {
    justify-content: center;
}

#modalSistemaConfirm .modal-sistema-actions {
    justify-content: center;
}

.modal-sistema-body {
    margin-bottom: 12px;
}

.modal-sistema-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.modal-app-tutorial {
    max-width: min(720px, 94vw);
}

.app-tutorial-video-wrap {
    position: relative;
    width: 100%;
    margin: 0 0 14px;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    aspect-ratio: 2040 / 1080;
}

@media (max-width: 640px) {
    .app-tutorial-video-wrap {
        max-height: min(56vh, 420px);
    }
}

.app-tutorial-video-wrap.is-portrait {
    aspect-ratio: 9 / 16;
    max-height: min(62vh, 520px);
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.app-tutorial-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.app-tutorial-video-placeholder[hidden] {
    display: none !important;
}

.app-tutorial-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.app-tutorial-video[hidden] {
    display: none !important;
}

.app-tutorial-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 8px auto 4px;
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: left;
    color: var(--text-secondary);
}

.app-tutorial-dismiss input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent-cyan);
}

.app-tutorial-actions {
    justify-content: center;
}

body.modal-open {
    overflow: hidden;
}

html.modal-open {
    overflow: hidden;
}

.modal-confirm {
    max-width: 450px;
}

.confirm-body {
    background: var(--bg-surface);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 0;
}

.confirm-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--bg-input);
}

.confirm-row:last-child {
    border-bottom: none;
}

.confirm-label {
    color: var(--text-secondary);
}

.confirm-value {
    color: var(--text-primary);
    font-weight: 500;
}

.confirm-row.confirm-pnl .confirm-value {
    font-size: 18px;
    font-weight: 700;
}

/* ========== DETALLE TRADE ========== */
.modal-trade-detail-overlay.modal-overlay {
    background: rgba(0, 0, 0, 0.82);
}

.modal-trade-detail {
    max-width: min(720px, 96vw);
    width: 100%;
    max-height: min(calc(100dvh - 80px), 92dvh);
    padding: clamp(14px, 3vw, 20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.modal-trade-detail-header {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-trade-detail-header-text {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.modal-trade-detail-eyebrow {
    margin: 0 0 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-cyan);
}

.modal-trade-detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.modal-trade-detail-title-block {
    flex: 1;
    min-width: 0;
}

.modal-trade-detail-title {
    margin: 0;
    font-size: clamp(0.95rem, 3.5vw, 1.12rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    word-break: break-word;
}

.modal-trade-detail-counter {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.trade-detail-nav-center .trade-detail-nav-counter {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.25;
}

.trade-detail-nav-center:has(.trade-detail-nav-staff-action:not([hidden])) {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    max-width: min(100%, 240px);
}

.trade-detail-nav-center:has(.trade-detail-nav-staff-action:not([hidden])) .trade-detail-nav-counter {
    flex: 1 1 100%;
}

.modal-trade-detail-image-btn {
    flex-shrink: 0;
    margin-left: auto;
    min-height: 0;
    min-width: 0;
    padding: 0.15rem;
    border: none;
    background: transparent;
    box-shadow: none;
}

.modal-trade-detail-image-btn:hover:not(:disabled) {
    border: none;
    background: transparent;
    color: var(--accent-cyan);
}

.modal-trade-detail-image-btn:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

.modal-trade-detail-image-btn .btn-feedback__icon {
    width: 18px;
    height: 18px;
}

.trade-detail-feedback-card {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    margin: clamp(10px, 2vw, 12px) 0 0;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    flex-shrink: 0;
    text-align: left;
    overflow: hidden;
    container-type: inline-size;
    container-name: trade-detail-feedback-card;
}

.trade-detail-feedback-card:not([hidden]) {
    display: flex;
}

.trade-detail-feedback-card-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: auto;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    text-align: left;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trade-detail-feedback-card-title__short {
    display: none;
}

.trade-detail-feedback-card > .trade-feedback-toolbar:not([hidden]) {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    width: auto;
    justify-content: flex-end;
    gap: 0.25rem;
}

@container trade-detail-feedback-card (max-width: 440px) {
    .trade-detail-feedback-card-title__full {
        display: none;
    }

    .trade-detail-feedback-card-title__short {
        display: inline;
    }

    .trade-detail-feedback-card .btn.btn-feedback:not(.btn-feedback--icon-only) {
        min-width: 0;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

@container trade-detail-feedback-card (max-width: 360px) {
    .trade-detail-feedback-card {
        gap: 0.3rem;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .trade-detail-feedback-card > .trade-feedback-toolbar:not([hidden]) {
        gap: 0.18rem;
    }

    .trade-detail-feedback-card .btn.btn-feedback:not(.btn-feedback--icon-only) {
        min-width: 0;
        padding-left: 0.32rem;
        padding-right: 0.32rem;
    }

    .trade-detail-feedback-card .btn.btn-feedback--icon-only {
        min-width: 1.35rem;
        padding-left: 0.28rem;
        padding-right: 0.28rem;
    }
}

.trade-detail-feedback-card .btn.btn-feedback {
    min-height: 0;
    padding: 0.24rem 0.55rem;
    font-size: 0.6875rem;
    line-height: 1.15;
    border-radius: 5px;
}

.trade-detail-feedback-card .btn.btn-feedback:not(.btn-feedback--icon-only) {
    min-width: 4.5rem;
    padding: 0.24rem 0.85rem;
}

.trade-detail-feedback-card .btn.btn-feedback--icon-only {
    padding: 0.24rem 0.36rem;
    min-width: 1.45rem;
    font-size: 0.75rem;
}

.trade-detail-feedback-card .btn-feedback-glyph {
    font-size: 0.8rem;
}

.trade-detail-feedback-card[hidden] {
    display: none !important;
}

.modal-trade-detail.trade-detail--feedback-student .trade-feedback-toolbar--staff,
.modal-trade-detail.trade-detail--feedback-student .trade-feedback-toolbar--superadmin {
    display: none !important;
}

.modal-trade-detail.trade-detail--feedback-staff .trade-feedback-toolbar--student {
    display: none !important;
}

.modal-trade-detail-hero-stats {
    flex-shrink: 0;
    margin-top: clamp(10px, 2vw, 14px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 1.5vw, 10px);
}

.modal-trade-detail-hero-stats[hidden] {
    display: none !important;
}

.modal-trade-detail-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 8px 6px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    text-align: center;
}

.modal-trade-detail-stat-value {
    font-size: clamp(0.9rem, 3.5vw, 1.05rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.modal-trade-detail-stat-value.pnl-positive {
    color: var(--positive);
}

.modal-trade-detail-stat-value.pnl-negative {
    color: var(--negative);
}

.modal-trade-detail-stat-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.modal-trade-detail-body.trade-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: clamp(10px, 2vw, 14px) 0;
    position: relative;
    transition: min-height 0.15s ease;
    gap: clamp(14px, 2.5vw, 18px);
    padding-top: 0;
}

.trade-detail-body.is-loading {
    min-height: 280px;
    pointer-events: none;
}

.trade-detail-body.is-loading > :not(.trade-detail-loading-overlay) {
    opacity: 0.35;
    filter: blur(0.5px);
}

.trade-detail-body.is-loading-nav {
    min-height: 0;
}

.trade-detail-body.is-loading-nav > :not(.trade-detail-loading-overlay) {
    opacity: 1;
    filter: none;
}

.trade-detail-loading-overlay .app-loading {
    padding: 24px;
    min-height: auto;
}

.trade-detail-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 18, 0.35);
    backdrop-filter: blur(1px);
}

.trade-detail-body.is-loading-nav .trade-detail-loading-overlay {
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
}

.modal-trade-detail-section {
    margin-bottom: 0;
}

.modal-trade-detail-section-title {
    margin: 0 0 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-cyan);
}

.modal-trade-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.modal-trade-detail-section-head .modal-trade-detail-section-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.modal-trade-detail-section-actions {
    flex: 0 0 auto;
}

.modal-trade-detail-section-actions .modal-trade-detail-image-btn {
    margin-left: 0;
}

.modal-trade-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 12px;
}

@media (max-width: 539px) {
    .modal-trade-detail-body > .modal-trade-detail-section:first-child .modal-trade-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal-trade-detail-body > .modal-trade-detail-section:first-child .modal-trade-detail-grid > .modal-trade-detail-field:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 540px) {
    .modal-trade-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.modal-trade-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.modal-trade-detail-field--full {
    grid-column: 1 / -1;
}

.modal-trade-detail-field--center {
    align-items: center;
    text-align: center;
}

.modal-trade-detail-field--pnl .modal-trade-detail-value {
    font-size: 15px;
}

.modal-trade-detail-label {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.modal-trade-detail-value {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
}

.modal-trade-detail-value.pnl-positive {
    color: var(--positive);
    font-weight: 700;
}

.modal-trade-detail-value.pnl-negative {
    color: var(--negative);
    font-weight: 700;
}

/* Legacy aliases (stats modal, etc.) */
.trade-detail-section {
    margin-bottom: 18px;
}

.trade-detail-section h4 {
    color: var(--accent-cyan);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}

.trade-detail-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 16px;
}

@media (min-width: 540px) {
    .trade-detail-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.trade-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.trade-detail-field--full {
    grid-column: 1 / -1;
}

.trade-detail-label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trade-detail-value {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
}

.trade-detail-value.pnl-positive {
    color: var(--positive);
    font-weight: 700;
}

.trade-detail-value.pnl-negative {
    color: var(--negative);
    font-weight: 700;
}

.trade-detail-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: auto;
}

#btnPrevTrade.trade-detail-nav-side {
    justify-self: start;
}

#btnNextTrade.trade-detail-nav-side {
    justify-self: end;
}

.trade-detail-nav-center {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 28px;
}

.trade-detail-nav-center .trade-detail-nav-staff-action[hidden] {
    display: none !important;
}

.trade-detail-nav--pager .trade-detail-nav-side {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.trade-detail-nav-chevron {
    line-height: 1;
}

@media (max-width: 560px) {
    .trade-detail-feedback-card {
        gap: 0.35rem;
        padding: 0.38rem 0.5rem;
    }

    .trade-detail-feedback-card .trade-feedback-toolbar {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
}

.trade-detail-nav .btn-trade-nav {
    min-height: 28px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.72;
    border-color: rgba(204, 204, 204, 0.22);
    color: var(--text-secondary);
}

.trade-detail-nav .btn-trade-nav:hover:not(:disabled) {
    opacity: 0.95;
    border-color: rgba(204, 204, 204, 0.4);
    color: var(--text-primary);
}

.trade-detail-nav .btn-trade-nav:disabled {
    opacity: 0.35;
}

@media (max-width: 768px) {
    .modal-trade-detail-overlay.modal-overlay {
        align-items: center;
        justify-content: center;
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    .modal-trade-detail-overlay .modal-trade-detail {
        border-radius: var(--radius-card);
        max-height: min(calc(100dvh - 24px), 96dvh);
        width: min(100%, 560px);
    }

    .trade-detail-nav--pager {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
    }

    .trade-detail-nav--pager .trade-detail-nav-side {
        flex: none;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .trade-detail-nav--pager #btnPrevTrade.trade-detail-nav-side,
    .trade-detail-nav--pager #btnPrevImg.trade-detail-nav-side {
        justify-self: start;
    }

    .trade-detail-nav--pager #btnNextTrade.trade-detail-nav-side,
    .trade-detail-nav--pager #btnNextImg.trade-detail-nav-side {
        justify-self: end;
    }

    .trade-detail-nav--pager .trade-detail-nav-center {
        order: unset;
        flex: none;
        justify-self: center;
        width: auto;
        min-width: 0;
    }

    .trade-detail-nav--pager .trade-detail-nav-text {
        display: none;
    }

    .trade-detail-nav--pager .trade-detail-nav-chevron {
        display: inline-flex;
        font-size: 13px;
    }

    .trade-detail-nav--pager .btn-trade-nav {
        min-width: 36px;
        min-height: 32px;
        padding: 4px 10px;
    }

    .modal-visor-imagen .visor-nav.trade-detail-nav--pager {
        grid-template-columns: 1fr 1fr;
    }
}

.image-zoom-viewport {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    touch-action: pan-y pinch-zoom;
}

.image-zoom-viewport.is-touch-zoom-bound {
    touch-action: none;
}

.trade-detail-img-viewport {
    margin-top: 8px;
    max-height: 280px;
    border-radius: 8px;
    background: rgba(10, 12, 18, 0.35);
}

.trade-detail-img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    cursor: zoom-in;
    transform-origin: center center;
    will-change: transform;
}

.trade-detail-img.is-zoomed {
    cursor: zoom-out;
}

.trading-table tbody tr.trade-row-clickable {
    cursor: pointer;
}

.trading-table tbody tr.trade-row-clickable:hover {
    background: rgba(26, 212, 193, 0.08);
}

.text-muted {
    color: var(--text-muted);
}

/* ========== VISOR DE IMAGEN ========== */
.modal-visor-imagen.modal-overlay {
    background: rgba(0, 0, 0, 0.88);
}

.modal-visor-imagen-content {
    max-width: min(1400px, 98vw);
    width: 100%;
    height: min(calc(100dvh - 24px), 98dvh);
    max-height: min(calc(100dvh - 24px), 98dvh);
    padding: clamp(14px, 3vw, 20px);
    text-align: center;
}

.modal-visor-imagen-header {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.modal-visor-imagen-header-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.modal-visor-imagen-eyebrow {
    margin: 0 0 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-cyan);
}

.modal-visor-imagen-title {
    margin: 0;
    font-size: clamp(0.95rem, 3.5vw, 1.05rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.modal-visor-imagen-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.modal-visor-imagen-detail-btn {
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 2px 10px;
    min-height: 22px;
    line-height: 1.15;
}

.modal-visor-imagen-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vw, 14px);
}

.modal-visor-imagen .visor-image-viewport {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 160px;
    margin: 0 auto;
    overflow: hidden;
}

.modal-visor-imagen .visor-img {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    border-radius: 8px;
    object-fit: contain;
    object-position: center center;
    background: rgba(10, 12, 18, 0.55);
    transform-origin: center center;
    image-rendering: auto;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

.visor-img.is-zoomed {
    cursor: grab;
}

.visor-img.is-zoomed:active {
    cursor: grabbing;
}

.visor-loading {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 120px;
    position: absolute;
    inset: 0;
    z-index: 2;
}

.visor-loading.show {
    display: flex;
}

.modal-visor-imagen .visor-nav {
    margin-top: clamp(10px, 2vw, 14px);
    flex-shrink: 0;
}

.visor-caption {
    margin: 0;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    flex-shrink: 0;
    text-align: center;
}

.visor-caption .visor-caption-pnl {
    font-weight: 700;
}

.visor-caption .visor-caption-pnl.pnl-positive {
    color: var(--positive);
}

.visor-caption .visor-caption-pnl.pnl-negative {
    color: var(--negative);
}

.visor-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s;
    z-index: 10;
}

.visor-close:hover {
    color: #fff;
}

/* ========== ESTADÍSTICAS DE TRADING ========== */
.stats-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.stats-summary > .stat-card {
    flex: 1 1 140px;
    max-width: calc((100% - 24px) / 3);
    min-width: 0;
}

.stat-card {
    container-type: inline-size;
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 16px 10px;
    text-align: center;
    border: 1px solid var(--border);
    transition: border-color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.stat-card:not(.stat-card--clickable):hover {
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}

.stat-card--clickable {
    cursor: pointer;
    border-color: rgba(242, 232, 207, 0.4);
    box-shadow: 0 2px 10px rgba(242, 232, 207, 0.12);
}

.stat-card--clickable:hover {
    border-color: rgba(242, 232, 207, 0.65);
    box-shadow: 0 4px 14px rgba(242, 232, 207, 0.22);
    transform: translateY(-2px);
}

.stat-card--clickable:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(242, 232, 207, 0.16);
}

.student-equity-summary {
    margin-top: 14px;
}

.modal-stats-detail {
    max-width: 720px;
    width: 95%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.modal-stats-detail .trade-detail-body {
    flex: 1 1 auto;
    min-height: 0;
}

.modal-stats-detail .trade-detail-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.modal-stats-detail .trade-detail-header h3 {
    grid-column: 2;
    flex: none;
    width: auto;
    max-width: 100%;
    text-align: center;
    justify-self: center;
}

.modal-stats-detail .trade-detail-header .visor-close {
    grid-column: 3;
    justify-self: end;
}

/* Tablas en modales: texto centrado en celdas */
.modal-content .trading-table th,
.modal-content .trading-table td {
    text-align: center;
    vertical-align: middle;
}

.stat-value {
    font-size: clamp(11px, 6.5cqi, 24px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 4px;
    width: 100%;
    max-width: 100%;
    min-height: 1.15em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    background: var(--gradient-data);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-value--split {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3em;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.stat-value--split .stat-value-main,
.stat-value--split .stat-value-sub {
    background: var(--gradient-data);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-value--split .stat-value-sub {
    font-size: 0.58em;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.25;
    width: 100%;
}

/* ========== TABLA DE OPERACIONES MEJORADA ========== */
.trade-img-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.2s;
    display: block;
    margin-inline: auto;
}

.trade-img-thumb:hover {
    border-color: var(--accent-cyan);
    transform: scale(1.1);
}

.trade-img-thumb[src]:not([src=""]) {
    background: #1a1a1a;
}

.trade-positive {
    color: var(--positive);
    font-weight: 600;
}

.trade-negative {
    color: var(--negative);
    font-weight: 600;
}

/* ========== ESTUDIANTES (STAFF) ========== */
.students-hint {
    margin-bottom: 16px;
    font-size: 14px;
}

.students-toolbar {
    margin-bottom: 20px;
}

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

.student-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.student-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
}

.student-card-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.student-card-email {
    font-size: 13px;
    color: var(--text-secondary);
    word-break: break-all;
}

.student-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.student-course-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.enrollment-card-edit-tiempos-footer {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 0;
    margin-top: 4px;
}

.student-course-card .enrollment-card-edit-tiempos-footer {
    padding: 8px 0 0;
    margin-top: 6px;
}

.enrollment-card-edit-tiempos-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-cyan, #1ad4c1);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.enrollment-card-edit-tiempos-link:hover {
    color: #fff;
}

.modal-editar-tiempos-enrollment-body {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 0 4px;
}

.modal-editar-tiempos-enrollment-body .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.enrollment-edit-tiempos-hint {
    font-size: 12px;
    margin: 0 0 12px;
}

.enrollment-tiempos-preview {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.usuario-enrollment-card .enrollment-card-edit-tiempos-footer {
    padding: 8px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--bg-input);
}

.student-course-card-wrap .student-course-card {
    border-radius: 10px;
}

.student-course-card-wrap--selected .student-course-card {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 1px var(--accent, #6366f1);
}

.student-enrollment-gestion {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 14px;
    background: var(--bg-surface);
}

.student-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.student-course-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}

button.student-course-card-body {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.student-course-card--clickable {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.student-course-card--clickable:hover {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.student-course-card--selected {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 1px var(--accent, #6366f1);
}

.estudiante-ver-curso-alumno-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 6px;
}

.btn-text-ver-curso-alumno {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    color: var(--text-muted);
    font-size: clamp(0.75rem, 2vw, 0.8125rem);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn-text-ver-curso-alumno__label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-text-ver-curso-alumno__chevron {
    font-size: 10px;
    line-height: 1;
    color: var(--accent-cyan);
    transition: transform 0.25s ease;
    text-decoration: none;
}

.btn-text-ver-curso-alumno[aria-expanded="true"] .btn-text-ver-curso-alumno__chevron,
.btn-text-ver-curso-alumno.is-open .btn-text-ver-curso-alumno__chevron {
    transform: rotate(180deg);
}

.btn-text-ver-curso-alumno:hover {
    color: var(--accent-cyan);
}

.estudiante-curso-player-section {
    margin: clamp(12px, 2vw, 16px) 0 0;
    min-width: 0;
}

.estudiante-curso-player-host {
    min-width: 0;
}

.estudiante-curso-player-host .curso-player {
    margin: 0;
}

.student-courses-hint {
    margin: 0 0 10px;
    font-size: 13px;
}

.estudiante-trading-hint {
    margin: 16px 0 0;
}

.student-trading-panel-card {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 20px);
    margin: 0 0 clamp(16px, 2.5vw, 24px);
    padding: clamp(16px, 3vw, 24px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.student-trading-panel-card .estudiante-trading-curso-titulo {
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}

.student-trading-panel-card .estudiante-trading-etapa-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.estudiante-trading-lecciones-progress {
    width: 100%;
    min-width: 0;
    margin-top: clamp(20px, 3vw, 32px);
}

.estudiante-trading-lecciones-progress__card {
    width: 100%;
    min-width: 0;
}

.estudiante-trading-lecciones-progress__inner {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.estudiante-trading-lecciones-progress__bar {
    margin: 0;
}

.estudiante-trading-lecciones-progress__bar .curso-player-progress-track {
    width: 100%;
    margin-top: 0;
}

.estudiante-trading-lecciones-progress__label {
    margin: 8px 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

@media (min-width: 721px) {
    .student-trading-panel-card .estudiante-trading-etapa-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 14px;
        row-gap: clamp(20px, 3vw, 32px);
        align-items: stretch;
    }

    .student-trading-panel-card .estudiante-trading-etapa-wrap .estudiante-trading-etapa-row {
        display: contents;
    }

    .student-trading-panel-card .estudiante-trading-etapa-wrap .estudiante-trading-lecciones-progress {
        grid-row: 1;
        grid-column: 1;
        margin: 0;
    }

    .student-trading-panel-card .estudiante-trading-etapa-wrap .estudiante-trading-lecciones-progress__inner {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .student-trading-panel-card
        .estudiante-trading-etapa-wrap--staff-sidebar
        .estudiante-trading-lecciones-progress__card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        box-sizing: border-box;
        padding: 18px 20px;
        background: linear-gradient(
            135deg,
            rgba(57, 122, 102, 0.18) 0%,
            rgba(242, 232, 207, 0.08) 50%,
            rgba(30, 30, 30, 0.4) 100%
        );
        border: 1px solid rgba(242, 232, 207, 0.2);
        border-radius: 14px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    }

    .student-trading-panel-card .estudiante-trading-etapa-wrap .estudiante-trading-grants-btn-wrap {
        grid-row: 1;
        grid-column: 2;
        align-self: stretch;
        justify-content: center;
    }

    .student-trading-panel-card .estudiante-trading-etapa-wrap .estudiante-trading-etapa-timeline {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .student-trading-panel-card .estudiante-trading-etapa-wrap .estudiante-ver-curso-alumno-wrap {
        grid-row: 3;
        grid-column: 1 / -1;
    }

    .student-trading-panel-card .estudiante-trading-etapa-wrap .estudiante-curso-player-section {
        grid-row: 4;
        grid-column: 1 / -1;
    }
}

.student-trading-panel-card .estudiante-trading-etapa-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.student-trading-panel-card .student-trading-panel-toolbar {
    --stf-gap: 8px;
    --stf-date-w: 10.125rem;
    --stf-cuenta-max-w: 11.5rem;
    --stf-preset-semana-w: 8.25rem;
    --stf-preset-mes-w: 7.5rem;
    --stf-preset-semestre-w: 7.625rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding-top: clamp(12px, 2vw, 18px);
    border-top: 1px solid var(--border);
    min-width: 0;
    box-sizing: border-box;
}

.student-trading-panel-card .student-trading-cuentas-header {
    margin: clamp(20px, 2.5vw, 28px) 0 clamp(18px, 2vw, 24px);
}

.student-trading-panel-card .estudiante-filtro-label {
    margin: 0;
}

.student-trading-panel-card .student-section-subtitle {
    margin: 0;
}

.student-trading-panel-card .student-chart-wrap {
    margin: 0;
}

.student-trading-panel-card #estudiante-trades-table .pagination {
    margin-top: 12px;
    margin-bottom: 0;
}

#trading-logs-table > .pagination,
#estudiante-trades-table > .pagination {
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
}

.estudiante-trading-curso-titulo {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.estudiante-trading-etapa-wrap {
    margin: 4px 0 8px;
}

.estudiante-trading-etapa-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 48px;
}

.estudiante-trading-etapa-wrap .estudiante-trading-etapa-timeline {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.estudiante-trading-grants-btn-wrap {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    justify-content: flex-end;
    margin: 0;
}

.estudiante-trading-grants-btn-wrap .btn {
    white-space: nowrap;
}

.estudiante-trading-staff-split {
    display: flex;
    flex-direction: column;
    width: 14.5rem;
    min-width: 14.5rem;
    max-width: 14.5rem;
    min-height: 96px;
    border: 1px solid var(--text-primary);
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
}

.estudiante-trading-staff-split__half {
    flex: 1 1 0;
    min-height: 32px;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.1;
    padding: 4px 8px;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.estudiante-trading-staff-split__half[hidden] {
    display: none;
}

.estudiante-trading-staff-split__half:not(:last-child) {
    border-bottom: 1px solid var(--text-primary);
}

.estudiante-trading-staff-split__half:hover {
    background: var(--text-primary);
    color: var(--bg-app);
}

.estudiante-trading-staff-split--solo-autorizaciones {
    min-height: 64px;
}

.estudiante-trading-staff-split--solo-autorizaciones .estudiante-trading-staff-split__half--top {
    border-bottom: 1px solid var(--text-primary);
    font-size: 9px;
    line-height: 1.1;
    padding: 4px 8px;
}

.estudiante-tutores-modal-curso {
    margin: 0 0 12px;
    font-size: 0.9rem;
}

.estudiante-tutores-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(50vh, 360px);
    overflow-y: auto;
    margin: 0 0 4px;
}

@media (max-width: 720px) {
    .estudiante-trading-etapa-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .estudiante-trading-etapa-wrap .estudiante-trading-etapa-timeline {
        max-width: 100%;
        order: 1;
    }

    .estudiante-trading-etapa-wrap .estudiante-trading-grants-btn-wrap {
        order: 4;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .estudiante-trading-staff-split {
        width: 100%;
        min-width: 0;
        max-width: 520px;
    }

    /* Timeline → barra de progreso → etiqueta → acciones staff */
    .estudiante-trading-etapa-wrap .estudiante-trading-etapa-row,
    .estudiante-trading-etapa-wrap .estudiante-trading-lecciones-progress,
    .estudiante-trading-etapa-wrap .estudiante-trading-lecciones-progress__inner {
        display: contents;
    }

    .estudiante-trading-etapa-wrap .estudiante-trading-lecciones-progress__bar {
        order: 2;
        width: 100%;
        max-width: 520px;
        margin: 8px auto 0;
    }

    .estudiante-trading-etapa-wrap .estudiante-trading-lecciones-progress__label {
        order: 3;
        margin: 8px 0 0;
    }

    .estudiante-trading-etapa-wrap .estudiante-ver-curso-alumno-wrap,
    .estudiante-trading-etapa-wrap .estudiante-curso-player-section {
        order: 5;
    }
}

.estudiante-autorizaciones-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    margin: 12px 0 4px;
}

.estudiante-autorizaciones-modal-body:has(.app-loading),
.estudiante-tutores-modal-body:has(.app-loading) {
    min-height: 100px;
    justify-content: center;
    align-items: center;
}

.curso-stage-timeline--staff .curso-stage-timeline__step--staff {
    cursor: pointer;
}

.curso-stage-timeline--staff .curso-stage-timeline__step--staff:hover .curso-stage-timeline__dot,
.curso-stage-timeline--staff .curso-stage-timeline__step--staff:focus-visible .curso-stage-timeline__dot {
    transform: scale(1.1);
}

.curso-stage-timeline--staff .curso-stage-timeline__step--staff:focus-visible {
    outline: none;
}

.trading-accounts-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin-bottom: 16px;
}

@media (max-width: 1100px) {
    .trading-accounts-picker {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .trading-accounts-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .trading-accounts-picker {
        grid-template-columns: 1fr;
    }
}

.trading-account-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.trading-account-card:hover {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.trading-account-card__name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: var(--trading-account-card-line-h, 1.5rem);
}

.trading-account-card__line {
    display: block;
    font-size: 14px;
    line-height: var(--trading-account-card-line-h, 1.5rem);
    min-height: var(--trading-account-card-line-h, 1.5rem);
    color: var(--text-muted, #888);
}

.trading-account-card__line strong {
    font-weight: 600;
}

.trading-account-card__balance--up strong {
    color: #4caf50;
}

.trading-account-card__balance--down strong {
    color: #f44336;
}

.trading-account-card__balance--flat strong {
    color: var(--text-primary, inherit);
}

.trading-account-card__ops strong {
    color: var(--text-primary, inherit);
}

.trading-account-card__course {
    text-align: center;
    font-size: 13px;
    margin-top: 14px;
    opacity: 0.55;
}

.trading-account-active-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.trading-cuenta-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.trading-cuenta-toolbar .trading-account-active-title {
    flex: 1;
    min-width: 0;
}

.trading-add-trade-btn {
    flex-shrink: 0;
    margin-left: auto;
}

.student-course-progress {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.student-course-progress .progress-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.student-course-progress .progress-fill {
    height: 100%;
    background: var(--gradient-data);
    border-radius: 3px;
}

/* ========== BITÁCORA ========== */
.student-journal-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.student-journal-wrap {
    min-width: 0;
}

.journal-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.journal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.journal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.journal-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.journal-sort-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.journal-sort-select {
    min-width: 180px;
    max-width: 100%;
}

.journal-hint {
    margin: 0;
    font-size: 0.9rem;
}

.journal-countdown-hint {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: var(--text-muted);
    text-align: right;
}

.journal-countdown {
    display: inline-block;
    min-width: 5.5em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent-cyan);
}

.journal-compose,
.journal-entry {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}

@keyframes journalEntryEnter {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.journal-entry--enter {
    animation: journalEntryEnter 0.35s ease-out;
}

.journal-entry--taggable {
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.journal-entry--taggable:hover {
    border-color: rgba(26, 212, 193, 0.35);
    background: rgba(26, 212, 193, 0.03);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.journal-entry--taggable:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.journal-compose-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.journal-textarea {
    resize: vertical;
    min-height: 96px;
    width: 100%;
}

.journal-compose-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.journal-char-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.journal-entries-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.journal-entry-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.journal-entry-date {
    font-weight: 700;
    color: var(--accent-cyan);
    font-size: 0.95rem;
}

.journal-entry-content {
    margin: 0 0 10px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
    line-height: 1.5;
}

.journal-entry--missing {
    display: flex;
    flex-direction: column;
    min-height: 5.5rem;
}

.journal-entry-missing-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.notificacion-inline-link {
    color: var(--accent-cyan);
    text-decoration: underline;
    cursor: pointer;
}

.notificacion-inline-link:hover {
    opacity: 0.85;
}

.notificacion-card-title .notificacion-inline-link {
    font-weight: inherit;
}

.journal-entry-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    min-height: 0;
}

.journal-tag-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(26, 212, 193, 0.12);
    border: 1px solid rgba(26, 212, 193, 0.35);
    color: var(--accent-cyan);
}

.journal-entry-tag-picker {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    border-radius: inherit;
    background: rgba(26, 26, 26, 0.92);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.journal-entry.is-tag-picker-open .journal-entry-tag-picker {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.journal-entry-tag-picker-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
}

.journal-entry-tag-picker-inner .journal-tag-add.btn.btn-sm {
    font-size: 0.75rem;
    line-height: 1.1;
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
}

.journal-empty,
.journal-compose-done {
    margin: 0;
}

@media (max-width: 480px) {
    .journal-sort {
        width: 100%;
    }
    .journal-sort-select {
        flex: 1;
        min-width: 0;
    }
}

.student-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    margin-top: 8px;
}

/* ========== DASHBOARD ESTADÍSTICAS (perfil estudiante) ========== */
.stats-dashboard-wrap {
    margin-top: 8px;
}

.stats-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stats-dashboard--empty {
    padding: 28px 16px;
    text-align: center;
    background: var(--bg-surface);
    border: 1px dashed var(--border);
    border-radius: 14px;
}

.stats-dashboard__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 4px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(57, 122, 102, 0.18) 0%, rgba(242, 232, 207, 0.08) 50%, rgba(30, 30, 30, 0.4) 100%);
    border: 1px solid rgba(242, 232, 207, 0.2);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.stats-dashboard__header-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 4px 12px;
}

.stats-dashboard__header-value {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: var(--gradient-data);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stats-dashboard__header-value--pnl {
    font-size: clamp(1rem, 3.5vw, 1.5rem);
}

.stats-dashboard__header-value.stat-positive {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--positive);
    color: var(--positive);
}

.stats-dashboard__header-value.stat-negative {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--negative);
    color: var(--negative);
}

.stats-dashboard__header-value--white {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
}

.stats-dashboard__header-label {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.stats-dashboard__header-label-narrow {
    display: none;
}

.stats-dashboard__header-sep {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.stats-dashboard__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 14px;
    align-items: stretch;
}

.stats-dashboard__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.stats-dash-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    transition: border-color 0.2s ease;
}

.stats-dash-panel:hover {
    border-color: rgba(242, 232, 207, 0.25);
}

.stats-dash-panel__head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.stats-dash-panel__title {
    margin: 0;
    width: 100%;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    text-align: center;
}

.stats-dash-panel__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
    text-align: center;
}

.stats-dash-panel__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.stats-dash-grid {
    display: grid;
    gap: 10px;
    width: 100%;
}

.stats-dash-grid--2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-dash-mini {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.stats-dash-mini--clickable {
    cursor: pointer;
    border-color: rgba(242, 232, 207, 0.12);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.stats-dash-mini--clickable:hover {
    background: rgba(242, 232, 207, 0.06);
    border-color: rgba(242, 232, 207, 0.28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.stats-dash-mini--clickable:active {
    transform: translateY(0);
}

.stats-dash-mini__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.stats-dash-mini__value {
    font-size: clamp(1rem, 3vw, 1.35rem);
    font-weight: 700;
    line-height: 1.2;
}

.stats-dash__value--positive {
    color: var(--positive);
}

.stats-dash__value--negative {
    color: var(--negative);
}

.stats-dash-row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.stats-dash-kv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    border: 1px solid transparent;
    text-align: center;
}

.stats-dash-kv--clickable {
    cursor: pointer;
    border-color: rgba(242, 232, 207, 0.12);
    transition: background 0.15s, border-color 0.15s;
}

.stats-dash-kv--clickable:hover {
    background: rgba(242, 232, 207, 0.06);
    border-color: rgba(242, 232, 207, 0.28);
}

.stats-dash-temporal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.stats-dash-temporal__row {
    display: grid;
    gap: 10px;
    width: 100%;
}

.stats-dash-temporal__row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-dash-temporal__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-dash-kv--hour .stats-dash-kv__value {
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    line-height: 1.35;
    word-break: break-word;
}

@media (max-width: 640px) {
    .stats-dash-temporal__row--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-dash-temporal__row--2 {
        grid-template-columns: 1fr;
    }
}

.stats-dash-kv__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.stats-dash-kv__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.stats-dash-kv__value small {
    font-size: 0.75em;
    font-weight: 600;
    opacity: 0.75;
}

.stats-dash-kv__value--positive {
    color: var(--positive);
}

.stats-dash-kv__value--negative {
    color: var(--negative);
}

/* Gráficos inline en tarjetas de estadísticas */
.stats-dash-chart {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-dash-chart--donut .stats-dash-chart__frame {
    max-width: 280px;
    margin: 0 auto;
}

.stats-dash-donut-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin: 4px auto 0;
    padding: 0 4px;
}

.stats-dash-donut-legend__col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.stats-dash-donut-legend__col--left {
    align-items: flex-start;
    text-align: left;
}

.stats-dash-donut-legend__col--right {
    align-items: flex-end;
    text-align: right;
}

.stats-dash-donut-legend__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.stats-dash-donut-legend__line {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.stats-dash-donut-legend__pnl {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.stats-dash-donut-legend__pnl.stat-positive {
    color: var(--positive);
}

.stats-dash-donut-legend__pnl.stat-negative {
    color: var(--negative);
}

.stats-dash-chart__frame {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(57, 122, 102, 0.08) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 28px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.stats-dash-chart__canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

.stats-dash-chart--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 20px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.15);
}

.stats-dash-chart__empty {
    margin: 0;
    font-size: 12px;
    text-align: center;
    color: var(--text-secondary);
}

.stats-dash-panel--chart .stats-dash-chart {
    margin-bottom: 4px;
}

.stats-dash-panel--chart-compact .stats-dash-chart__frame {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 20px rgba(0, 0, 0, 0.28);
}

.stats-dash-chart--distribution {
    width: 100%;
    max-width: 100%;
}

.stats-dash-chart--distribution .stats-dash-chart__frame {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 8px 8px;
}

.stats-dash-chart--distribution .stats-dash-chart__canvas {
    margin-left: auto;
    margin-right: auto;
}

.stats-dash-panel--chart-compact .stats-dash-panel__body {
    width: 100%;
}

.stats-dash-dir-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

.stats-dash-dir-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-dash-dir-chip__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.stats-dash-dir-chip__value {
    font-size: 1.35rem;
    font-weight: 800;
    background: var(--gradient-data);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stats-dash-dir-chip__value.stats-dash-dir-chip__value--white,
#estudiante-stats .stats-dash-dir-chip__value--white {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

.stats-dash-link-btn {
    flex: 0 1 auto;
    min-width: 120px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.stats-dash-link-btn:hover {
    color: var(--text-primary);
    border-color: rgba(242, 232, 207, 0.4);
    background: rgba(242, 232, 207, 0.05);
}

@media (min-width: 901px) {
    .stats-dashboard__grid {
        align-items: stretch;
    }

    .stats-dashboard__col {
        align-self: stretch;
    }

    .stats-dashboard__col > .stats-dash-panel {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .stats-dashboard__col > .stats-dash-panel > .stats-dash-panel__head {
        flex-shrink: 0;
    }

    .stats-dashboard__col > .stats-dash-panel > .stats-dash-panel__body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .stats-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .stats-dashboard__header-sep {
        display: none;
    }

    .stats-dashboard__header {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .stats-dashboard__header-metric {
        padding: 8px;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 10px;
    }

    .stats-dashboard__header-label-wide {
        display: none;
    }

    .stats-dashboard__header-label-narrow {
        display: inline;
    }
}

@media (max-width: 480px) {
    .stats-dash-grid--2x2,
    .stats-dash-row-pair,
    .stats-dash-dir-summary {
        grid-template-columns: 1fr;
    }
}

.student-section-subtitle {
    margin: 20px 0 12px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.student-trades-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 20px;
}

.student-trades-header .student-section-subtitle {
    margin: 0;
}

.student-trades-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.student-trades-toolbar[hidden] {
    display: none !important;
}

.student-trades-pending-hint {
    margin: 0 0 8px;
    font-size: 0.875rem;
}

.student-trades-toolbar .btn[hidden] {
    display: none !important;
}

.student-trades-toolbar .btn.btn-sm {
    min-height: 34px;
    height: 34px;
    max-height: 34px;
    padding: 0 10px;
    line-height: 1.2;
    box-sizing: border-box;
}

.trade-row--multi-selectable {
    cursor: pointer;
}

.trade-row--multi-selected {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: -2px;
    background: rgba(59, 130, 246, 0.08);
}

.trade-feedback-badge--group {
    font-weight: 600;
}

.trade-detail-session-block {
    margin: 0 0 16px;
    padding: 12px;
    border-radius: 8px;
    background: var(--surface-elevated, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.trade-detail-session-block ul {
    margin: 8px 0 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
}

.student-trading-filters {
    margin-bottom: 8px;
}

#tab-estudiantes h3,
#tab-estudiantes h4 {
    font-size: clamp(1rem, 3vw, 1.2rem);
}

.student-chart-wrap {
    position: relative;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
    min-height: 244px;
}

.student-chart-wrap.is-loading {
    min-height: 244px;
}

.student-chart-wrap.is-loading canvas,
.student-chart-wrap.is-loading .equity-chart-empty {
    display: none !important;
}

.equity-chart-empty {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    margin: 0;
    padding: 20px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.15);
}

.equity-chart-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 18, 0.35);
    border-radius: 10px;
}

.equity-chart-loading[hidden] {
    display: none !important;
}

.trading-equity-chart-wrap {
    margin-bottom: 16px;
    position: relative;
}

.trading-equity-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    min-height: 44px;
}

.trading-equity-chart-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted, #aaa);
    letter-spacing: 0.02em;
}

.btn-compartir-progreso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(26, 212, 193, 0.45);
    background: rgba(26, 212, 193, 0.08);
    color: var(--accent-cyan, #1ad4c1);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.btn-compartir-progreso:hover:not(:disabled) {
    border-color: rgba(26, 212, 193, 0.75);
    box-shadow: 0 0 16px rgba(26, 212, 193, 0.25);
    transform: translateY(-1px);
}

.btn-compartir-progreso:disabled {
    opacity: 0.55;
    cursor: wait;
}

.btn-compartir-progreso[hidden] {
    display: none !important;
}

.share-progress-modal {
    z-index: 12050;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.share-progress-modal__content {
    max-width: 420px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 20px;
}

.share-progress-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.share-progress-modal__header h3 {
    margin: 0;
    font-size: 1.15rem;
    text-align: center;
}

.share-progress-modal__hint {
    margin: 0 0 14px;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.45;
}

.share-progress-preview-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.share-progress-preview {
    width: min(100%, 280px);
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid rgba(26, 212, 193, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.share-progress-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.share-progress-actions .btn {
    flex: 1 1 auto;
    min-width: 120px;
}

@media (max-width: 480px) {
    .share-progress-actions {
        flex-direction: column;
    }

    .share-progress-actions .btn {
        width: 100%;
    }
}

.trading-cuenta-filters {
    margin-bottom: 16px;
    container-type: inline-size;
    container-name: trading-cuenta-filters;
}

.trading-cuenta-filters-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 10px;
    align-items: end;
}

.trading-cuenta-filters-row .student-trading-filter-col--fecha,
.trading-cuenta-filters-row .student-trading-filter-col--hasta,
.trading-cuenta-filters-row .student-trading-hasta-row {
    display: contents;
}

.trading-cuenta-filters-row label[for="tradingFilterFrom"] {
    grid-column: 1;
    grid-row: 1;
}

.trading-cuenta-filters-row .student-trading-filter-col--fecha .app-date-field,
.trading-cuenta-filters-row .student-trading-filter-col--fecha > .form-input,
.trading-cuenta-filters-row .student-trading-filter-col--fecha > input#tradingFilterFrom {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
}

.trading-cuenta-filters-row label[for="tradingFilterTo"] {
    grid-column: 2;
    grid-row: 1;
}

.trading-cuenta-filters-row .student-trading-hasta-row > .app-date-field,
.trading-cuenta-filters-row .student-trading-hasta-row > .form-input,
.trading-cuenta-filters-row .student-trading-hasta-row > input#tradingFilterTo {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
}

.trading-cuenta-filters-row #tradingFilterFrom,
.trading-cuenta-filters-row #tradingFilterTo {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.trading-cuenta-filters-row .student-trading-filters-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-left: 0;
    justify-content: center;
    width: 100%;
}

.trading-cuenta-filters-row .student-trading-apply-group {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.trading-cuenta-filters .student-trading-range-presets {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.trading-cuenta-filters .student-trading-range-preset--semana,
.trading-cuenta-filters .student-trading-range-split--mes,
.trading-cuenta-filters .student-trading-range-split--semestre,
.trading-cuenta-filters .student-trading-range-split {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}

.trading-cuenta-filters .student-trading-range-preset--semana,
.trading-cuenta-filters .student-trading-range-split__single {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 0.72rem;
    line-height: 1.15;
}

@container trading-cuenta-filters (min-width: 980px) {
    .trading-cuenta-filters-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 12px;
    }

    .trading-cuenta-filters-row .student-trading-filter-col--fecha,
    .trading-cuenta-filters-row .student-trading-filter-col--hasta {
        display: flex;
        flex: 0 0 auto;
    }

    .trading-cuenta-filters-row .student-trading-hasta-row {
        display: flex;
        flex-wrap: nowrap;
        flex: 0 0 auto;
    }

    .trading-cuenta-filters-row .student-trading-filters-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        margin-left: auto;
        justify-content: flex-end;
        width: auto;
        grid-column: unset;
        grid-row: unset;
    }

    .trading-cuenta-filters-row .student-trading-apply-group {
        grid-column: unset;
        grid-row: unset;
        display: flex;
        justify-content: flex-start;
        width: auto;
    }

    .trading-cuenta-filters-row #tradingFilterFrom,
    .trading-cuenta-filters-row #tradingFilterTo {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .trading-cuenta-filters .student-trading-range-presets {
        flex-wrap: nowrap;
        justify-content: flex-end;
        width: auto;
        gap: 8px;
    }

    .trading-cuenta-filters .student-trading-range-preset--semana,
    .trading-cuenta-filters .student-trading-range-split--mes,
    .trading-cuenta-filters .student-trading-range-split--semestre,
    .trading-cuenta-filters .student-trading-range-split {
        flex: 0 0 auto;
        width: auto;
        min-width: unset;
        max-width: unset;
    }

    .trading-cuenta-filters .student-trading-range-preset--semana,
    .trading-cuenta-filters .student-trading-range-split__single {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: inherit;
        line-height: 1.2;
    }

    .trading-cuenta-filters-row > *,
    .trading-cuenta-filters-row .student-trading-hasta-row > * {
        flex-shrink: 0;
    }
}

.student-equity-chart {
    display: block;
    width: 100%;
    max-width: 100%;
}

.stat-value.stat-positive {
    background: none;
    -webkit-text-fill-color: var(--positive);
    color: var(--positive);
}

.stat-value.stat-negative {
    background: none;
    -webkit-text-fill-color: var(--negative);
    color: var(--negative);
}

.student-stats-by-asset {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.5;
}

.student-accounts-section {
    margin-bottom: 16px;
}

.student-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.student-account-actions {
    display: flex;
    gap: 8px;
}

.trade-actions-cell {
    white-space: nowrap;
    text-align: center;
}

.trade-actions-cell .btn {
    margin-right: 4px;
}

.trade-detail-nav--center {
    justify-content: center;
}

.trade-detail-staff-actions:not(.trade-feedback-detail-footer) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.trade-detail-staff-actions-main:not(.trade-feedback-toolbar) {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.trade-detail-staff-delete {
    flex-shrink: 0;
}


.btn-danger-outline {
    border-color: var(--negative);
    color: var(--negative);
    background: rgba(244, 67, 54, 0.15);
}

.btn-danger-outline:hover {
    background: transparent;
}

.modal-trade-edit {
    max-width: 720px;
    width: 95%;
    max-height: min(92vh, 900px);
    overflow-y: auto;
}

.staff-edit-prices-section {
    margin: 4px 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-surface) 88%, var(--accent-cyan) 4%);
}

.staff-edit-prices-section .section-title {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: var(--accent-gold, var(--text-primary));
}

.trade-preview--staff {
    margin-top: 12px;
}

#appModals {
    position: relative;
    z-index: 1000;
}

/* ========== PERFIL ESTUDIANTE (STAFF) ========== */
.student-tutors-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.student-tutors-hint {
    font-size: 0.85rem;
    margin: 0 0 12px;
}

.student-tutors-by-course {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 12px;
}

.student-tutors-course-block {
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.student-tutors-course-block:first-child {
    border-top: none;
    padding-top: 0;
}

.student-tutors-course-title {
    margin: 0 0 10px;
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.student-tutors-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 220px;
    overflow-y: auto;
}

.student-tutors-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.student-tutors-check input {
    margin-top: 3px;
    accent-color: var(--accent-cyan);
}

.course-default-tutors-body {
    margin-bottom: 0.75rem;
}

/* Modal aplicar tutores por defecto (cursos admin) */
.modal-course-default-tutors {
    max-width: min(520px, calc(100vw - 24px));
    width: 100%;
    padding: clamp(14px, 3.5vw, 22px);
    gap: 0;
}

.modal-course-default-tutors-header {
    margin-bottom: clamp(10px, 2.5vw, 14px);
    flex-shrink: 0;
}

.modal-course-default-tutors-header h3 {
    font-size: clamp(0.9rem, 2.8vw, 1rem);
    line-height: 1.25;
}

.modal-course-default-tutors-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.5vw, 14px);
}

.modal-course-default-tutors-body .modal-sistema-mensaje {
    margin-bottom: 0;
}

.course-default-tutors-scope-options {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vw, 12px);
    margin: 0;
}

.course-default-tutors-scope-option {
    display: flex;
    gap: clamp(10px, 2.5vw, 14px);
    align-items: flex-start;
    padding: clamp(10px, 2.5vw, 14px);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    min-height: 44px;
}

.course-default-tutors-scope-option:hover {
    border-color: rgba(26, 212, 193, 0.35);
}

.course-default-tutors-scope-option:has(input:checked) {
    border-color: rgba(26, 212, 193, 0.65);
    background: rgba(26, 212, 193, 0.08);
    box-shadow: 0 0 0 1px rgba(26, 212, 193, 0.2);
}

.course-default-tutors-scope-option input {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent-cyan);
}

.course-default-tutors-scope-option__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: clamp(0.85rem, 2.4vw, 0.9rem);
    line-height: 1.4;
}

.course-default-tutors-scope-option__text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.course-default-tutors-scope-option--warn {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
}

.course-default-tutors-scope-option--warn:has(input:checked) {
    border-color: rgba(245, 158, 11, 0.75);
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
}

.modal-course-default-tutors-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: clamp(14px, 3vw, 18px);
    padding-top: clamp(12px, 2.5vw, 16px);
    border-top: 1px solid var(--border);
}

.modal-course-default-tutors-actions .btn {
    width: 100%;
    min-height: 44px;
    margin: 0;
    justify-content: center;
}

@media (max-width: 380px) {
    .modal-course-default-tutors-actions {
        grid-template-columns: 1fr;
    }

    .modal-course-default-tutors-actions .btn-primary {
        order: -1;
    }
}

@media (max-width: 600px) {
    .modal-course-default-tutors {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: min(calc(100dvh - 48px), 88dvh);
    }

    .modal-course-default-tutors-body {
        max-height: min(52vh, 420px);
    }
}

.student-tutors-readonly {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
}

.student-tutors-actions {
    display: flex;
    justify-content: flex-end;
}

.student-profile-section {
    margin-bottom: 24px;
}

/* ========== PERFIL + CURSOS (izq) | MINI LOG (der) ========== */
.student-profile-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(14px, 2.5vw, 24px);
    align-items: start;
    margin-bottom: 24px;
}

.student-profile-main-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.estudiante-perfil-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 66fr) minmax(260px, 33fr);
    gap: clamp(14px, 2vw, 20px);
    align-items: start;
    margin-bottom: 24px;
}

.estudiante-perfil-left-stack {
    grid-column: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vw, 16px);
}

.estudiante-perfil-body-grid > .estudiante-perfil-notas-slot--desktop {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    min-width: 0;
}

.estudiante-perfil-notas-slot--mobile {
    display: none;
}

.estudiante-perfil-vista--mobile {
    display: none;
}

.usuarios-perfil-vista--mobile {
    display: none;
}

.estudiante-perfil-notas-toggle {
    display: none;
}

.estudiante-perfil-notas-panel {
    display: block;
}

.estudiante-perfil-notas-wrap .student-activity-mini {
    min-height: 320px;
}

.estudiante-perfil-notas-wrap .student-activity-mini-list {
    max-height: min(42vh, 340px);
}

/* Desktop (≥901px): panel de notas fijo, sin acordeón */
@media (min-width: 901px) {
    .estudiante-perfil-notas-slot--desktop .estudiante-perfil-notas-toggle {
        display: none !important;
    }

    .estudiante-perfil-notas-slot--desktop .estudiante-perfil-notas-panel,
    .estudiante-perfil-notas-slot--desktop .estudiante-perfil-notas-panel[hidden] {
        display: block !important;
    }

    .estudiante-perfil-notas-slot--desktop .estudiante-perfil-notas-panel.accordion-panel {
        border: none;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    .estudiante-perfil-notas-slot--desktop .estudiante-perfil-notas-desktop-header {
        display: flex;
    }
}

.estudiante-perfil-body-grid .estudiante-perfil-top {
    margin-bottom: 0;
}

.estudiante-perfil-body-grid .student-profile-main-grid {
    margin-bottom: 0;
}

.student-profile-left-col {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.5vw, 24px);
    min-width: 0;
}

.student-profile-courses-block {
    flex: 1;
    min-width: 0;
}

.student-profile-left-col > .student-profile-courses-block {
    padding-top: clamp(14px, 2vw, 18px);
    border-top: 1px solid var(--border);
}

.student-profile-section-title {
    margin: 0 0 12px;
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 600;
    color: var(--text-primary);
}

.student-profile-trading-section {
    margin-top: 0;
}

.student-profile-col {
    min-width: 0;
}

.student-profile-col .student-profile-card {
    height: auto;
}

.student-profile-left-col .student-courses-grid {
    grid-template-columns: 1fr;
}

.estudiante-perfil-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(8px, 2vw, 16px);
    margin-bottom: clamp(12px, 2.5vw, 20px);
    min-width: 0;
}

.estudiante-perfil-top-main {
    flex: 1;
    min-width: 0;
}

#estudiantePerfilHeader .estudiante-perfil-header-name h2 {
    line-height: 1.15;
}

#estudiantePerfilHeader h2,
.estudiante-perfil-top-main h2 {
    margin: 0;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    line-height: 1.25;
    word-break: break-word;
}

.estudiante-perfil-name-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(26, 212, 193, 0.45);
    text-underline-offset: 3px;
}

.estudiante-perfil-name-link:hover {
    color: var(--accent-cyan);
}

.estudiante-perfil-name-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

.estudiante-perfil-bitacora-link-wrap {
    flex-shrink: 0;
    align-self: flex-start;
    margin: 0;
    padding-top: 0.15em;
}

.estudiante-perfil-header-bitacora-wrap.estudiante-perfil-bitacora-link-wrap {
    align-self: center;
    padding-top: 0;
}

.estudiante-perfil-header-email-row .estudiante-perfil-bitacora-link {
    margin: 0;
}

.perfil-card-horizontal--estudiante .student-profile-photo-bitacora-wrap,
.perfil-estudiante-staff-photo .student-profile-photo-bitacora-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding-top: 0;
    align-self: center;
}

.perfil-card-horizontal--estudiante .student-profile-photo-bitacora-wrap .estudiante-perfil-bitacora-link,
.perfil-estudiante-staff-photo .student-profile-photo-bitacora-wrap .estudiante-perfil-bitacora-link {
    margin: 0;
}

.estudiante-perfil-top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px 12px;
    flex-shrink: 0;
}

.estudiante-perfil-bitacora-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 10px;
    margin: -6px -10px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    font-weight: 600;
    color: var(--accent-cyan);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

@media (hover: hover) {
    .estudiante-perfil-bitacora-link:hover {
        color: var(--text-primary);
        background: rgba(26, 212, 193, 0.1);
    }
}

.estudiante-perfil-mensaje-btn {
    flex-shrink: 0;
    color: var(--text-primary);
}

@media (hover: hover) {
    .estudiante-perfil-bitacora-link.estudiante-perfil-mensaje-btn:hover {
        color: var(--accent-cyan);
        background: none;
    }
}

.estudiante-perfil-mensaje-icon {
    display: block;
    flex-shrink: 0;
}

.estudiante-perfil-vision-ia-btn {
    flex-shrink: 0;
    color: #0052CC;
}

.estudiante-perfil-vision-ia-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 2px rgba(0, 82, 204, 0.18));
}

@media (hover: hover) {
    .estudiante-perfil-bitacora-link.estudiante-perfil-vision-ia-btn:hover {
        color: #0052CC;
        background: rgba(0, 82, 204, 0.06);
    }

    .estudiante-perfil-vision-ia-btn:hover .estudiante-perfil-vision-ia-icon {
        filter: drop-shadow(0 0 3px rgba(0, 82, 204, 0.24));
    }
}

@media (max-width: 480px) {
    .estudiante-perfil-top {
        flex-wrap: wrap;
    }

    .estudiante-perfil-bitacora-link-wrap {
        width: auto;
    }

    .estudiante-perfil-top-actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0;
    }

    .estudiante-perfil-bitacora-link {
        margin: 0;
        min-height: 40px;
    }
}

.estudiante-stats-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 8px;
}

.estudiante-stats-actions[hidden] {
    display: none !important;
}

.modal-stats-chart {
    width: min(640px, 96vw);
    max-height: min(90vh, 520px);
    display: flex;
    flex-direction: column;
}

.stats-chart-canvas-wrap {
    padding: 8px 4px 4px;
    min-height: 200px;
    overflow-x: auto;
}

.stats-grafico-canvas {
    display: block;
    width: 100%;
    max-width: 100%;
}

.stat-value--split .stat-weekday-best,
.stat-value--split .stat-weekday-worst {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}

.stat-value--split .stat-weekday-best {
    color: var(--positive, #5a9e6e) !important;
    font-weight: 700;
}

.stat-value--split .stat-weekday-worst {
    color: var(--negative, #c75c5c) !important;
    font-weight: 700;
}

@media (max-width: 380px) {
    .stat-value--split:has(.stat-weekday-best) {
        flex-direction: column;
        align-items: center;
        gap: 0.15em;
    }
}

@media (max-width: 480px) {
    .estudiante-stats-actions {
        flex-direction: column;
    }

    .estudiante-stats-actions .btn {
        width: 100%;
    }
}

.modal-bitacora-staff {
    width: min(640px, 96vw);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
}

.modal-bitacora-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-top: 4px;
}

.journal-toolbar--modal {
    justify-content: flex-end;
}

.journal-toolbar--modal .journal-sort {
    margin-left: auto;
}

.student-activity-mini {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.student-activity-mini:hover {
    border-color: rgba(26, 212, 193, 0.45);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.student-activity-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.student-activity-mini-title {
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-cyan);
}

#tab-estudiantes .student-activity-mini-title {
    font-size: 13px;
}

.student-activity-mini-hint {
    font-size: 11px;
    color: var(--text-muted);
}

.student-activity-mini-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.student-activity-mini-empty {
    margin: auto 0;
    text-align: center;
    font-size: 13px;
}

.student-activity-mini-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--bg-input);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s;
}

.student-activity-mini-item:hover {
    border-color: rgba(26, 212, 193, 0.4);
}

.student-activity-mini-item-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.student-activity-mini-item-text {
    font-size: 12px;
    line-height: 1.35;
}

.activity-mini-badge {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.student-activity-mini-compose {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    cursor: default;
}

.student-activity-note-input {
    font-size: 13px;
    resize: vertical;
    min-height: 52px;
}

.student-activity-compose-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.student-activity-compose-actions .btn {
    width: 100%;
    margin: 0;
    justify-content: center;
}

.modal-alert-schedule {
    max-width: min(420px, 94vw);
    width: 100%;
}

.modal-alert-schedule-hint {
    margin: 0 0 14px;
    font-size: 13px;
}

.modal-alert-schedule-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.alert-schedule-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -4px 0 12px;
}

.btn-xs {
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.3;
    border-radius: 6px;
}

.alert-notify-recipients {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
}

.alert-notify-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
}

.alert-notify-item input {
    margin-top: 3px;
    flex-shrink: 0;
}

.alert-notify-role {
    font-size: 11px;
    color: var(--text-muted);
}

.modal-alert-schedule-actions {
    margin-top: 14px;
}

/* ========== MÓDULO USUARIOS (GESTIÓN) ========== */
.usuarios-list-card__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 16px;
    min-height: 34px;
}

.usuarios-list-card__header > h2 {
    margin-bottom: 0;
}

.usuarios-list-card__actions {
    position: absolute;
    top: 0;
    right: 0;
}

.usuarios-alta-btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.usuarios-alta-btn--icon:hover {
    border-color: rgba(26, 212, 193, 0.45);
    background: rgba(26, 212, 193, 0.08);
}

.usuarios-alta-btn--icon:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.usuarios-alta-btn--icon[aria-expanded='true'] {
    border-color: var(--accent-cyan, #1ad4c1);
    color: var(--accent-cyan, #1ad4c1);
}

.usuarios-alta-btn__icon {
    display: block;
    flex-shrink: 0;
    line-height: 1;
}

.usuarios-alta-split--header {
    position: relative;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
}

.usuarios-alta-split--header.is-expanded {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
}

.usuarios-alta-split--header .usuarios-alta-split__single {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.usuarios-alta-split--header.is-expanded .usuarios-alta-split__single,
.usuarios-alta-split--header .usuarios-alta-split__single[hidden] {
    display: inline-flex !important;
}

.usuarios-alta-split--header.is-expanded .usuarios-alta-split__dual {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 11.5rem;
    height: auto;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.usuarios-alta-split--header .usuarios-alta-split__half {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding: 10px 14px;
    font-size: 0.92rem;
    line-height: 1.3;
    text-align: left;
    border: none;
    border-radius: 0;
    background: transparent;
}

.usuarios-alta-split--header .usuarios-alta-split__half--top {
    border-bottom: 1px solid var(--border);
}

.usuarios-alta-split--header .usuarios-alta-split__half:hover,
.usuarios-alta-split--header .usuarios-alta-split__half:focus-visible {
    background: rgba(26, 212, 193, 0.08);
    color: var(--text-primary);
    outline: none;
}

/* Una sola fila: el buscador crece; rol, Buscar y acciones ancho fijo; gap uniforme */
.usuarios-toolbar-row.students-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 20px;
}

.usuarios-toolbar-row .usuarios-toolbar-actions {
    display: contents;
}

.usuarios-toolbar-row .estudiantes-toolbar-search {
    flex: 2 1 220px;
    min-width: min(100%, 200px);
    margin-bottom: 0;
}

.usuarios-toolbar-row .estudiantes-toolbar-course {
    margin-bottom: 0;
}

#tab-usuarios .usuarios-toolbar-row .estudiantes-toolbar-buscar-filtros {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    width: max-content;
    margin-bottom: 0;
}

#tab-usuarios .usuarios-toolbar-row .usuarios-alta-split:not(.is-expanded) .usuarios-alta-split__single {
    width: 100%;
    max-width: none;
    white-space: normal;
    line-height: 1.2;
    padding: 6px 10px;
    height: auto;
    min-height: var(--estudiantes-control-height, 42px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (min-width: 769px) {
    #tab-usuarios .usuarios-toolbar-row.students-toolbar {
        flex-wrap: nowrap;
    }

    #tab-usuarios .usuarios-toolbar-row .estudiantes-toolbar-search {
        flex: 2 1 220px;
        min-width: 200px;
    }
}

.usuarios-search-wrap {
    position: relative;
    width: 100%;
}

.usuarios-filtro-role-toolbar-mount:empty,
.usuarios-filtro-role-modal-mount:empty {
    display: none;
}

.usuarios-filtro-role-wrap--modal {
    width: 100%;
    max-width: none;
    margin-bottom: 0;
}

.usuarios-filtro-role-wrap--modal select {
    width: 100%;
}

.usuarios-toolbar-row .estudiantes-toolbar-search .form-input {
    width: 100%;
}

.usuarios-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    max-height: min(320px, 50vh);
    overflow-y: auto;
}

.usuarios-search-suggestion-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--bg-input);
    background: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.usuarios-search-suggestion-item:last-child {
    border-bottom: none;
}

.usuarios-search-suggestion-item:hover,
.usuarios-search-suggestion-item:focus-visible {
    background: var(--bg-input);
    outline: none;
}

.usuarios-search-suggestion-name {
    font-weight: 600;
    font-size: 14px;
}

.usuarios-search-suggestion-email {
    font-size: 12px;
}

.usuarios-search-suggestions-empty {
    margin: 0;
    padding: 12px;
    font-size: 13px;
}

.usuarios-gestion-hint {
    margin: 8px 0 0;
    font-size: 14px;
}

.usuarios-toolbar-row .form-group-btn {
    flex: 0 0 auto;
    margin-bottom: 0;
    min-width: 0;
}

.usuarios-toolbar-row .form-group-btn .btn {
    width: auto;
    min-width: 4.5rem;
}

.usuarios-toolbar-row .usuarios-toolbar-actions .btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

@media (min-width: 900px) {
    .usuarios-toolbar-row.students-toolbar {
        flex-wrap: nowrap;
    }
}

.usuarios-gestion-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Botón + Agregar usuario → Manualmente / Invitar (split vertical como Último semestre) */
.usuarios-alta-split {
    display: inline-flex;
    flex: 0 0 auto;
    vertical-align: middle;
    width: 12.75rem;
    min-width: 12.75rem;
    max-width: min(12.75rem, 100%);
    height: var(--estudiantes-control-height, 42px);
    min-height: var(--estudiantes-control-height, 42px);
    max-height: var(--estudiantes-control-height, 42px);
    box-sizing: border-box;
}

.usuarios-alta-split__single {
    height: 100%;
    width: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.usuarios-alta-split.is-expanded {
    width: 12.75rem;
    min-width: 12.75rem;
    max-width: min(12.75rem, 100%);
}

/* Toolbar: no comprimir el split; altura fija solo al expandir */
#tab-usuarios .usuarios-toolbar-row .usuarios-alta-split {
    display: flex;
    flex: 0 1 auto;
    width: auto;
    min-width: min(12.75rem, 100%);
    max-width: 100%;
}

#tab-usuarios .usuarios-toolbar-row .usuarios-alta-split:not(.is-expanded) {
    height: auto;
    min-height: var(--estudiantes-control-height, 42px);
    max-height: none;
}

#tab-usuarios .usuarios-toolbar-row .usuarios-alta-split.is-expanded {
    flex: 0 0 12.75rem;
    width: 12.75rem;
    min-width: min(12.75rem, 100%);
    max-width: 100%;
    height: var(--estudiantes-control-height, 42px);
    min-height: var(--estudiantes-control-height, 42px);
    max-height: var(--estudiantes-control-height, 42px);
}

.usuarios-alta-split.is-expanded .usuarios-alta-split__single,
.usuarios-alta-split__single[hidden] {
    display: none !important;
}

.usuarios-alta-split.is-expanded .usuarios-alta-split__dual {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.usuarios-alta-split__dual[hidden] {
    display: none !important;
}

.usuarios-alta-split__dual {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid var(--text-primary);
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}

.usuarios-alta-split__half {
    flex: 1 1 50%;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0 6px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.usuarios-alta-split__half--top {
    border-bottom: 1px solid var(--text-primary);
}

.usuarios-alta-split__half:hover,
.usuarios-alta-split__half:focus-visible {
    background: var(--text-primary);
    color: var(--bg-app, #0a0e14);
    outline: none;
}

/* Header: icono redondo pequeño (mismo patrón que Mensajes); anula reglas legacy del split en toolbar */
.usuarios-alta-split.usuarios-alta-split--header,
.usuarios-alta-split.usuarios-alta-split--header.is-expanded {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
}

.usuarios-alta-split.usuarios-alta-split--header.is-expanded .usuarios-alta-split__single,
.usuarios-alta-split.usuarios-alta-split--header .usuarios-alta-split__single {
    display: inline-flex !important;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
    overflow: visible;
    overflow-wrap: normal;
}

.usuarios-alta-split.usuarios-alta-split--header.is-expanded .usuarios-alta-split__dual {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: auto;
    min-width: 11.5rem;
    height: auto;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.usuarios-alta-split.usuarios-alta-split--header .usuarios-alta-split__half {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
}

.usuarios-alta-split.usuarios-alta-split--header .usuarios-alta-split__half--top {
    border-bottom: 1px solid var(--border);
}

.usuarios-alta-split.usuarios-alta-split--header .usuarios-alta-split__half:hover,
.usuarios-alta-split.usuarios-alta-split--header .usuarios-alta-split__half:focus-visible {
    background: rgba(26, 212, 193, 0.08);
    color: var(--text-primary);
    outline: none;
}

.modal-invitar-usuario {
    max-width: min(560px, calc(100vw - 32px));
}

@media (min-width: 721px) {
    .modal-invitar-usuario {
        max-width: min(780px, calc(100vw - 48px));
        width: min(780px, calc(100vw - 48px));
    }

    .modal-invitar-table-wrap.user-table {
        overflow-x: visible;
    }

    .modal-invitar-table-wrap table {
        width: 100%;
        table-layout: auto;
    }

    .modal-invitar-table-wrap th,
    .modal-invitar-table-wrap td {
        white-space: nowrap;
    }

    .modal-invitar-table-wrap td:first-child {
        white-space: normal;
        word-break: break-word;
        min-width: 12rem;
    }
}

.modal-invitar-usuario-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: min(75vh, 640px);
    overflow-y: auto;
}

.modal-invitar-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: end;
}

.modal-invitar-form-grid .form-group {
    margin-bottom: 0;
    min-width: 0;
}

.modal-invitar-field--submit {
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.modal-invitar-submit-btn {
    height: var(--estudiantes-control-height, 42px);
    min-height: var(--estudiantes-control-height, 42px);
    max-height: var(--estudiantes-control-height, 42px);
    margin: 0;
    padding: 0 14px;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1.2;
}

@media (max-width: 520px) {
    .modal-invitar-form-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .modal-invitar-field--submit {
        justify-content: stretch;
    }

    .modal-invitar-submit-btn {
        width: 100%;
        max-width: none;
    }
}

.modal-invitar-pendientes {
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

.modal-invitar-pendientes-title {
    margin: 0 0 10px;
    font-size: 0.9375rem;
}

.modal-invitar-table-wrap {
    overflow-x: auto;
}

.modal-invitar-acciones {
    white-space: nowrap;
    width: 1%;
    vertical-align: middle;
}

.modal-invitar-acciones-inner {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}

.modal-invitar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
}

.modal-invitar-icon-btn__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.usuarios-gestion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usuarios-gestion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
}

.usuarios-gestion-item:hover {
    border-color: rgba(26, 212, 193, 0.45);
}

.usuarios-gestion-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.usuarios-gestion-item-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.usuarios-detail-header-block {
    margin-bottom: 12px;
    min-width: 0;
}

.usuarios-detail-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
    margin: 0;
    text-align: left;
}

.usuarios-detail-name {
    margin: 0;
}

.usuarios-detail-email-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    min-width: 0;
}

.usuarios-detail-email {
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

#tab-usuarios .usuarios-detail-email-row .btn-sm {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 3px 12px;
    font-size: 12px;
    line-height: 1.25;
    flex-shrink: 0;
}

.usuarios-detail-roles {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

.usuarios-detail-roles .badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    line-height: 1.35;
}

.badge-estudiante--link {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.badge-estudiante--link:hover {
    filter: brightness(1.12);
}

.badge-estudiante--link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ========== PERFIL HORIZONTAL (foto + columnas de datos) ========== */
.perfil-card-horizontal {
    display: grid;
    grid-template-columns: minmax(88px, 128px) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(12px, 2.5vw, 20px) clamp(14px, 3vw, 24px);
    align-items: start;
}

.perfil-card-horizontal__photo {
    grid-row: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.perfil-card-horizontal__photo .student-profile-photo-block,
.perfil-card-horizontal__photo .user-perfil-photo-upload--card {
    margin: 0 auto;
}

.perfil-card-horizontal__body {
    grid-column: 2 / -1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Perfil estudiante (staff): etiquetas y Perfil IA a ancho completo de la tarjeta */
.perfil-card-horizontal--estudiante .perfil-card-horizontal__photo {
    grid-row: 1;
    align-self: start;
}

.perfil-card-horizontal--estudiante .student-profile-photo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.perfil-card-horizontal--estudiante .perfil-card-horizontal__body {
    grid-column: 2 / -1;
    grid-row: 1;
}

.perfil-card-horizontal--estudiante .perfil-card-horizontal__span {
    grid-column: 1 / -1;
    min-width: 0;
}

.perfil-card-horizontal--estudiante .perfil-card-horizontal__span--tags {
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.perfil-card-horizontal--estudiante .perfil-card-horizontal__span--tags .student-profile-field--tags {
    margin-top: 0;
}

.perfil-card-horizontal--estudiante .perfil-card-horizontal__span--ai {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8vw, 14px);
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* Perfil estudiante (staff / pestaña Estudiantes): layout compacto solo en móvil */
.student-profile-card.perfil-usuarios-compact {
    display: grid;
    grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
    gap: 10px clamp(12px, 2vw, 20px);
    align-items: start;
    height: auto;
}

.perfil-usuarios-photo {
    align-self: start;
    display: flex;
    justify-content: center;
    width: 100%;
}

.perfil-usuarios-photo .student-profile-photo-block {
    margin: 0;
    width: 112px;
    flex-shrink: 0;
}

.perfil-usuarios-photo .student-profile-photo-wrap {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.perfil-usuarios-photo .student-profile-photo-wrap .student-profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
}

.perfil-usuarios-photo .student-profile-photo-wrap .student-profile-photo--placeholder {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    font-size: 1.5rem;
}

.perfil-usuarios-photo .user-perfil-photo-upload--card {
    display: block;
    width: 112px;
}

.perfil-usuarios-photo .user-perfil-photo-circle--card {
    width: 112px;
    height: 112px;
}

.perfil-usuarios-photo .user-perfil-photo-circle--card .student-profile-photo,
.perfil-usuarios-photo .user-perfil-photo-circle--card .student-profile-photo--placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

.perfil-usuarios-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 14px;
    min-width: 0;
    align-content: start;
    grid-column: 2;
}

.perfil-usuarios-fields-grid > .student-profile-field {
    gap: 2px;
    min-width: 0;
}

.perfil-usuarios-fields-grid > .student-profile-field--meta-action,
.perfil-usuarios-fields-grid > .usuarios-perfil-actions-stack,
.perfil-usuarios-field--full,
.usuarios-detail-info > .usuarios-self-edit-hint {
    grid-column: 1 / -1;
}

.perfil-usuarios-compact .student-profile-label {
    font-size: 9px;
    letter-spacing: 0.04em;
}

.perfil-usuarios-compact .student-profile-value {
    font-size: 12px;
    line-height: 1.3;
}

.perfil-usuarios-fields-grid .usuarios-perfil-actions-stack {
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.perfil-usuarios-fields-grid .btn-perfil-accion--equal {
    width: auto;
    min-width: 140px;
}

/* Detalle desktop (≥901px): 2 columnas TÍTULO: valor — perfil usuarios/estudiante e inscripciones */
@media (min-width: 901px) {
    #usuariosDetailInfo .usuarios-perfil-vista--desktop .perfil-usuarios-fields-grid--inline,
    #estudiantePerfilDatos .estudiante-perfil-vista--desktop .student-profile-data-grid--estudiante-top,
    #usuariosDetailInfo .usuario-enrollment-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 28px;
        align-content: start;
    }

    #estudiantePerfilDatos .estudiante-perfil-vista--desktop .student-profile-data-grid--estudiante-top .student-profile-data-col {
        display: contents;
    }

    #usuariosDetailInfo .usuarios-perfil-vista--desktop .perfil-usuarios-fields-grid--inline > .student-profile-field,
    #estudiantePerfilDatos .estudiante-perfil-vista--desktop .student-profile-data-grid--estudiante-top .student-profile-field,
    #usuariosDetailInfo .usuario-enrollment-grid > .usuario-enrollment-field {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.35em;
        min-width: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        min-height: 0;
    }

    #usuariosDetailInfo .usuarios-perfil-vista--desktop .perfil-usuarios-fields-grid--inline .student-profile-label,
    #estudiantePerfilDatos .estudiante-perfil-vista--desktop .student-profile-data-grid--estudiante-top .student-profile-label,
    #usuariosDetailInfo .usuario-enrollment-grid .usuario-enrollment-label {
        flex-shrink: 0;
        margin: 0;
        color: var(--text-secondary);
        opacity: 1;
    }

    #usuariosDetailInfo .usuarios-perfil-vista--desktop .perfil-usuarios-fields-grid--inline .student-profile-label::after,
    #estudiantePerfilDatos .estudiante-perfil-vista--desktop .student-profile-data-grid--estudiante-top .student-profile-label::after,
    #usuariosDetailInfo .usuario-enrollment-grid .usuario-enrollment-label::after {
        content: ':';
    }

    #usuariosDetailInfo .usuarios-perfil-vista--desktop .perfil-usuarios-fields-grid--inline .student-profile-value,
    #estudiantePerfilDatos .estudiante-perfil-vista--desktop .student-profile-data-grid--estudiante-top .student-profile-value,
    #usuariosDetailInfo .usuario-enrollment-grid .usuario-enrollment-value {
        min-width: 0;
        flex: 1 1 auto;
        color: var(--text-primary);
        opacity: 0.5;
        font-weight: 400;
    }

    #usuariosDetailInfo .usuarios-perfil-vista--desktop .perfil-usuarios-fields-grid--inline .student-profile-value:has(.estado-cuenta),
    #estudiantePerfilDatos .estudiante-perfil-vista--desktop .student-profile-data-grid--estudiante-top .student-profile-value:has(.estado-cuenta) {
        opacity: 1;
    }
}

/* Usuarios detalle móvil (≤900px): 1 columna TÍTULO: valor — inscripciones */
@media (max-width: 900px) {
    #usuariosDetailInfo .usuario-enrollment-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-content: start;
    }

    #usuariosDetailInfo .usuario-enrollment-grid > .usuario-enrollment-field {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.35em;
        min-width: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        min-height: 0;
    }

    #usuariosDetailInfo .usuario-enrollment-grid .usuario-enrollment-label {
        flex-shrink: 0;
        margin: 0;
        color: var(--text-secondary);
        opacity: 1;
    }

    #usuariosDetailInfo .usuario-enrollment-grid .usuario-enrollment-label::after {
        content: ':';
    }

    #usuariosDetailInfo .usuario-enrollment-grid .usuario-enrollment-value {
        min-width: 0;
        flex: 1 1 auto;
        color: var(--text-primary);
        opacity: 0.5;
        font-weight: 400;
    }
}

@media (min-width: 1200px) {
    .perfil-usuarios-fields-grid:not(.perfil-usuarios-fields-grid--inline) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .perfil-usuarios-fields-grid:not(.perfil-usuarios-fields-grid--inline) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.user-perfil-card-layout.perfil-card-horizontal:not(.user-perfil-card-layout--usuarios) {
    grid-template-columns: minmax(88px, 128px) minmax(0, 1fr);
}

.user-perfil-card-layout.perfil-card-horizontal:not(.user-perfil-card-layout--usuarios) .perfil-card-horizontal__body {
    grid-column: 2;
}

/* Perfil propio (acordeón «Ver perfil»): foto + grid de tarjetas */
.perfil-propio-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
    min-width: 0;
    align-content: start;
}

.perfil-propio-fields-grid > .student-profile-field {
    min-width: 0;
}

.perfil-propio-fields-grid > .student-profile-field--meta-action,
.perfil-propio-fields-grid > .usuarios-perfil-actions-stack,
.perfil-propio-fields-grid > .usuarios-self-edit-hint {
    grid-column: 1 / -1;
}

.user-perfil-readonly .perfil-propio-fields-grid .student-profile-field,
.user-perfil-readonly .perfil-propio-fields-grid button.student-profile-field--solicitud-card {
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.perfil-propio-fields-grid .student-profile-field--solicitud-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
}

button.student-profile-field--solicitud-card {
    cursor: pointer;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

button.student-profile-field--solicitud-card:hover,
button.student-profile-field--solicitud-card:focus-visible {
    border-color: rgba(26, 212, 193, 0.45);
    box-shadow: 0 0 0 2px var(--focus-ring);
    outline: none;
}

.student-profile-field--solicitud-pending .user-perfil-pending-badge {
    margin: 0;
}

.student-profile-value--link {
    color: var(--accent-cyan);
    font-weight: 500;
}

@media (min-width: 1100px) {
    .perfil-propio-fields-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .perfil-propio-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.usuarios-perfil-meta-col {
    gap: clamp(10px, 1.8vw, 14px);
}

.usuarios-perfil-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
    max-width: 220px;
}

.btn-perfil-accion--equal {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.usuarios-detail-actions--end {
    justify-content: flex-end;
    align-self: stretch;
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 8px;
}

.usuarios-gestion-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
}

.usuarios-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 66fr) minmax(260px, 33fr);
    gap: clamp(14px, 2vw, 20px);
    align-items: start;
}

.usuarios-detail-log-col {
    min-width: 0;
}

.usuarios-detail-main-col {
    min-width: 0;
    min-height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.usuarios-activity-mini {
    min-height: 0;
}

.usuarios-log-filters-wrap {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.usuarios-log-filters-wrap .form-input--compact {
    font-size: 12px;
    padding: 6px 8px;
}

.usuarios-log-compose {
    margin-top: auto;
}

.usuarios-log-mini-item {
    cursor: default;
}

.usuarios-detail-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.usuarios-detail-info .student-profile-card {
    padding: 12px 14px;
}

.usuarios-detail-info .student-profile-data-col {
    gap: 8px;
}

.usuarios-detail-info .student-profile-label {
    font-size: 10px;
}

.usuarios-detail-info .student-profile-value {
    font-size: 13px;
}

.usuarios-detail-info .perfil-card-horizontal {
    gap: 10px 16px;
}

.usuarios-enrollments-section {
    margin-top: 4px;
}

.usuarios-enrollments-header {
    margin-bottom: 8px;
}

.usuarios-enrollments-title-row {
    display: block;
    max-width: 100%;
}

.usuarios-enrollments-title {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
}

button.usuarios-enrollments-title--clickable {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s ease;
}

button.usuarios-enrollments-title--clickable:hover {
    color: var(--accent-cyan);
}

button.usuarios-enrollments-title--clickable:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Modal inscribir curso (usuarios) */
.modal-inscribir-curso {
    max-width: min(440px, calc(100vw - 24px));
    width: 100%;
    padding: clamp(14px, 3.5vw, 22px);
    gap: 0;
}

.modal-inscribir-curso-header {
    margin-bottom: clamp(10px, 2.5vw, 14px);
    flex-shrink: 0;
}

.modal-inscribir-curso-header h3 {
    font-size: clamp(0.9rem, 2.8vw, 1rem);
    line-height: 1.25;
}

.modal-inscribir-curso-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.5vw, 14px);
}

.modal-inscribir-curso-field {
    margin-bottom: 0;
    min-width: 0;
}

.modal-inscribir-curso-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.modal-inscribir-curso-select {
    width: 100%;
    min-height: 44px;
    font-size: max(16px, 0.9375rem);
    box-sizing: border-box;
}

.modal-inscribir-curso-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: clamp(14px, 3vw, 18px);
    padding-top: clamp(12px, 2.5vw, 16px);
    border-top: 1px solid var(--border);
}

.modal-inscribir-curso-actions .btn {
    width: 100%;
    min-height: 44px;
    margin: 0;
    justify-content: center;
}

@media (max-width: 380px) {
    .modal-inscribir-curso-actions {
        grid-template-columns: 1fr;
    }

    .modal-inscribir-curso-actions .btn-primary {
        order: -1;
    }
}

@media (max-width: 600px) {
    .modal-inscribir-curso {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: min(calc(100dvh - 48px), 88dvh);
    }
}

.usuarios-enrollments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usuarios-enrollments-empty {
    margin: 0;
    font-size: 13px;
}

.usuario-enrollment-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}

.usuario-enrollment-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin-bottom: 8px;
}

.usuario-enrollment-title {
    font-size: 14px;
}

.usuario-enrollment-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(26, 212, 193, 0.12);
    color: var(--accent-cyan);
}

.usuario-enrollment-status--pausado,
.usuario-enrollment-status--en-vacaciones {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.usuario-enrollment-status--finalizado {
    background: rgba(108, 117, 125, 0.2);
    color: var(--text-muted);
}

.usuario-enrollment-status--cancelado {
    background: rgba(220, 53, 69, 0.15);
    color: #f87171;
}

.usuario-enrollment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
}

.usuario-enrollment-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.usuario-enrollment-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.usuario-enrollment-value {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-primary);
    word-break: break-word;
}

.usuario-enrollment-gestion {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bg-input);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.usuario-enrollment-stage-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.usuario-enrollment-stage-row .form-input {
    flex: 1;
    min-width: 160px;
}

.usuario-enrollment-grants-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usuario-enrollment-grant-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 0.88rem;
}

.usuarios-gestion-photo-block {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.usuarios-gestion-photo {
    width: clamp(88px, 18vw, 112px);
    height: clamp(88px, 18vw, 112px);
    border-radius: 50%;
    object-fit: cover;
}

.usuarios-gestion-photo-actions {
    margin-bottom: 16px;
}

.usuarios-gestion-photo-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.usuarios-self-edit-hint {
    font-size: 0.85rem;
    margin: 0 0 14px;
}

.usuarios-info-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    font-size: 13px;
}

.usuarios-info-card p {
    margin: 0 0 8px;
}

.usuarios-detail-log {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: var(--bg-surface);
}

.usuarios-log-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.usuarios-log-item:last-child {
    border-bottom: none;
}

.usuarios-log-meta {
    color: var(--text-muted);
}

.usuarios-detail-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

#usuariosDetailView .usuarios-detail-layout {
    min-height: 0;
}

#tab-usuarios #usuariosDetailActions .btn {
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.25;
}

@media (max-width: 900px) {
    .usuarios-detail-layout {
        grid-template-columns: 1fr;
    }

    .usuarios-detail-main-col {
        order: 1;
    }

    .usuarios-detail-log-col {
        order: 2;
    }

    .estudiante-perfil-vista--desktop {
        display: none !important;
    }

    .estudiante-perfil-vista--mobile {
        display: block;
    }

    .usuarios-perfil-vista--desktop {
        display: none !important;
    }

    .usuarios-perfil-vista--mobile {
        display: block;
    }

    #tab-usuarios #usuariosDetailHeader {
        display: none !important;
        margin: 0;
    }

    #usuariosDetailInfo .usuarios-perfil-vista--mobile .student-profile-label,
    #userPerfilAccordion .usuarios-perfil-vista--mobile .student-profile-label {
        font-size: 10px;
        letter-spacing: 0.04em;
        opacity: 0.85;
    }

    #usuariosDetailInfo .usuarios-perfil-vista--mobile .student-profile-value,
    #userPerfilAccordion .usuarios-perfil-vista--mobile .student-profile-value {
        font-size: 13px;
        line-height: 1.3;
        font-weight: 500;
    }

    .estudiante-perfil-body-grid {
        grid-template-columns: 1fr;
    }

    .estudiante-perfil-body-grid > .estudiante-perfil-notas-slot--desktop {
        display: none;
    }

    .estudiante-perfil-notas-slot--mobile {
        display: block;
        padding-top: clamp(14px, 2vw, 18px);
        border-top: 1px solid var(--border);
    }

    .estudiante-perfil-notas-toggle {
        display: flex;
        width: 100%;
    }

    .estudiante-perfil-notas-panel[hidden] {
        display: none !important;
    }

    .estudiante-perfil-notas-desktop-header {
        display: none;
    }

    .estudiante-perfil-notas-wrap .student-activity-mini {
        border: none;
        border-radius: 0;
        box-shadow: none;
        min-height: 0;
    }

    .estudiante-perfil-notas-wrap .student-activity-mini:hover {
        box-shadow: none;
    }

    .estudiante-perfil-notas-wrap .student-activity-mini-list {
        max-height: min(42vh, 340px);
    }

    #estudiantePerfilHeader .estudiante-perfil-vista--mobile {
        display: none !important;
    }

    .estudiante-perfil-top:has(#estudiantePerfilHeader .estudiante-perfil-vista--mobile:empty) {
        display: none;
        margin: 0;
    }

    #estudiantePerfilDatos .estudiante-perfil-vista--mobile .student-profile-label {
        font-size: 10px;
        letter-spacing: 0.04em;
        opacity: 0.85;
    }

    #estudiantePerfilDatos .estudiante-perfil-vista--mobile .student-profile-value {
        font-size: 13px;
        line-height: 1.3;
        font-weight: 500;
    }

    #estudiantePerfilDatos .perfil-estudiante-staff-card--mobile {
        display: grid;
        flex-direction: unset;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "fields"
            "tags"
            "ai";
        gap: 16px 0;
        align-items: stretch;
    }

    .estudiante-perfil-mobile-identity,
    .usuarios-perfil-mobile-identity {
        grid-area: identity;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 8px;
        padding: 10px 12px;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: 10px;
        min-width: 0;
    }

    .estudiante-perfil-mobile-name-row,
    .usuarios-perfil-mobile-name-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        max-width: 100%;
        margin-bottom: 4px;
    }

    .estudiante-perfil-mobile-name-row .estudiante-perfil-mobile-name,
    .usuarios-perfil-mobile-name-row .usuarios-perfil-mobile-name {
        margin: 0 0 2px;
        padding-bottom: 0;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.15;
        word-break: break-word;
        text-transform: none;
        letter-spacing: normal;
    }

    .usuarios-perfil-mobile-roles {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        font-weight: 400;
    }

    .usuarios-perfil-mobile-roles .badge {
        font-size: 0.65rem;
        padding: 2px 8px;
        line-height: 1.35;
    }

    .estudiante-perfil-mobile-name-row .estudiante-perfil-bitacora-link.estudiante-perfil-mensaje-btn {
        min-height: 0;
        min-width: 0;
        padding: 0;
        margin: 0;
        line-height: 1;
        align-self: center;
    }

    .usuarios-perfil-mobile-email-row,
    .estudiante-perfil-mobile-email-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-width: 0;
        text-align: center;
    }

    .estudiante-perfil-mobile-email,
    .usuarios-perfil-mobile-email {
        margin: 0;
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.25;
        word-break: break-word;
        max-width: 100%;
        text-align: center;
    }

    .estudiante-perfil-mobile-email,
    .usuarios-perfil-mobile-email {
        width: 100%;
    }

    .estudiante-perfil-mobile-bitacora,
    .usuarios-perfil-mobile-action {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .usuarios-perfil-mobile-action .btn-sm {
        min-height: 0;
        padding: 2px 8px;
        font-size: 12px;
        line-height: 1.25;
    }

    #tab-usuarios .usuarios-perfil-mobile-action .btn-sm {
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 2px 8px;
    }

    .estudiante-perfil-mobile-bitacora-wrap {
        margin: 0;
        padding: 0;
    }

    .estudiante-perfil-mobile-bitacora .estudiante-perfil-bitacora-link {
        margin: 0;
        min-height: 32px;
        padding: 4px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: transparent;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 600;
    }

    .estudiante-perfil-mobile-photo,
    .usuarios-perfil-mobile-photo {
        margin: 0;
        align-self: center;
        width: 100%;
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .estudiante-perfil-mobile-photo .student-profile-photo-block,
    .usuarios-perfil-mobile-photo .student-profile-photo-block {
        margin: 0;
        width: 76%;
        max-width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .usuarios-perfil-mobile-photo .user-perfil-photo-upload--card {
        width: 76%;
        max-width: 150px;
        display: block;
    }

    .usuarios-perfil-mobile-photo .user-perfil-photo-hint {
        display: none;
    }

    /* Estudiante: segundo 76% (equivale al label upload en usuarios) */
    .estudiante-perfil-mobile-photo .student-profile-photo-wrap,
    .estudiante-perfil-mobile-photo .user-perfil-photo-circle--card {
        width: 76%;
        max-width: 150px;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .usuarios-perfil-mobile-photo .student-profile-photo-wrap,
    .usuarios-perfil-mobile-photo .user-perfil-photo-circle--card {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .estudiante-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo,
    .estudiante-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo--placeholder,
    .estudiante-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo-btn .student-profile-photo,
    .estudiante-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo-btn .student-profile-photo--placeholder,
    .estudiante-perfil-mobile-photo .user-perfil-photo-circle--card .student-profile-photo,
    .estudiante-perfil-mobile-photo .user-perfil-photo-circle--card .student-profile-photo--placeholder,
    .usuarios-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo,
    .usuarios-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo--placeholder,
    .usuarios-perfil-mobile-photo .user-perfil-photo-circle--card .student-profile-photo,
    .usuarios-perfil-mobile-photo .user-perfil-photo-circle--card .student-profile-photo--placeholder {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        border: none;
        border-radius: 0;
        font-size: 1.5rem;
    }

    .estudiante-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo-btn,
    .usuarios-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo-btn {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .estudiante-perfil-mobile-fields {
        grid-area: fields;
        width: 100%;
        min-width: 0;
    }

    #estudiantePerfilDatos .estudiante-perfil-mobile-fields .perfil-estudiante-staff-fields-grid,
    #usuariosDetailInfo .usuarios-perfil-mobile-fields .perfil-usuarios-fields-grid,
    #userPerfilAccordion .usuarios-perfil-mobile-fields .perfil-usuarios-fields-grid,
    #userPerfilAccordion .usuarios-perfil-mobile-fields .perfil-propio-fields-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }

    #estudiantePerfilDatos .estudiante-perfil-mobile-fields .perfil-estudiante-staff-fields-grid > .student-profile-field,
    #usuariosDetailInfo .usuarios-perfil-mobile-fields .perfil-usuarios-fields-grid > .student-profile-field,
    #usuariosDetailInfo .usuarios-perfil-mobile-fields .perfil-usuarios-fields-grid > button.student-profile-field--mobile-action,
    #userPerfilAccordion .usuarios-perfil-mobile-fields .perfil-propio-fields-grid > .student-profile-field,
    #userPerfilAccordion .usuarios-perfil-mobile-fields .perfil-propio-fields-grid > button.student-profile-field--solicitud-card,
    #userPerfilAccordion .usuarios-perfil-mobile-fields .perfil-usuarios-fields-grid > .student-profile-field,
    #userPerfilAccordion .usuarios-perfil-mobile-fields .perfil-usuarios-fields-grid > button.student-profile-field--mobile-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
        padding: 8px 10px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        min-width: 0;
        min-height: 58px;
        box-sizing: border-box;
        flex: 0 1 calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    #estudiantePerfilDatos
        .estudiante-perfil-mobile-fields
        .perfil-estudiante-staff-fields-grid
        > .student-profile-field
        .student-field-reveal,
    #usuariosDetailInfo
        .usuarios-perfil-mobile-fields
        .perfil-usuarios-fields-grid
        > .student-profile-field
        .student-field-reveal,
    #userPerfilAccordion
        .usuarios-perfil-mobile-fields
        .perfil-propio-fields-grid
        > .student-profile-field
        .student-field-reveal {
        text-align: center;
    }

    #usuariosDetailInfo
        .usuarios-perfil-mobile-fields
        .perfil-usuarios-fields-grid
        > button.student-profile-field--mobile-action {
        margin: 0;
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
        color: var(--text-secondary);
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
    }

    #userPerfilAccordion
        .usuarios-perfil-mobile-fields
        .perfil-propio-fields-grid
        > button.student-profile-field--solicitud-card {
        margin: 0;
        font: inherit;
        color: inherit;
        text-align: center;
        cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    @media (hover: hover) {
        #usuariosDetailInfo
            .usuarios-perfil-mobile-fields
            .perfil-usuarios-fields-grid
            > button.student-profile-field--mobile-action:hover,
        #usuariosDetailInfo
            .usuarios-perfil-mobile-fields
            .perfil-usuarios-fields-grid
            > button.student-profile-field--mobile-action:focus-visible,
        #userPerfilAccordion
            .usuarios-perfil-mobile-fields
            .perfil-propio-fields-grid
            > button.student-profile-field--solicitud-card:hover,
        #userPerfilAccordion
            .usuarios-perfil-mobile-fields
            .perfil-propio-fields-grid
            > button.student-profile-field--solicitud-card:focus-visible {
            border-color: rgba(26, 212, 193, 0.45);
            background: rgba(26, 212, 193, 0.06);
            box-shadow: 0 0 0 2px var(--focus-ring);
            outline: none;
        }
    }

    #usuariosDetailInfo
        .usuarios-perfil-mobile-fields
        .perfil-usuarios-fields-grid
        > .student-profile-field--meta-action,
    #usuariosDetailInfo
        .usuarios-perfil-mobile-fields
        .perfil-usuarios-fields-grid
        > .usuarios-perfil-actions-stack,
    #usuariosDetailInfo
        .usuarios-perfil-mobile-fields
        .perfil-usuarios-fields-grid
        > .perfil-usuarios-field--full,
    #userPerfilAccordion
        .usuarios-perfil-mobile-fields
        .perfil-propio-fields-grid
        > .student-profile-field--solicitud-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    #estudiantePerfilDatos .perfil-estudiante-staff-tags {
        grid-area: tags;
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    #estudiantePerfilDatos .perfil-estudiante-staff-tags .student-profile-field--tags {
        margin-top: 0;
    }

    #estudiantePerfilDatos .perfil-estudiante-staff-ai {
        grid-area: ai;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: clamp(10px, 1.8vw, 14px);
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .usuarios-activity-mini {
        min-height: 320px;
        max-height: 420px;
    }

    .student-profile-card.perfil-usuarios-compact--mobile {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "fields"
            "tags";
        gap: 16px 0;
        align-items: stretch;
        height: auto;
    }

    .usuarios-perfil-mobile-fields {
        grid-area: fields;
        width: 100%;
        min-width: 0;
    }

    #usuariosDetailInfo .usuarios-perfil-vista--mobile .perfil-usuarios-compact--mobile,
    #userPerfilAccordion .usuarios-perfil-vista--mobile .perfil-usuarios-compact--mobile {
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .perfil-usuarios-compact--mobile .perfil-usuarios-tags-row {
        grid-area: tags;
        width: 100%;
        padding-top: 10px;
    }

    .usuario-enrollment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .usuario-enrollment-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .user-perfil-fields--edit {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .perfil-card-horizontal,
    .user-perfil-card-layout--usuarios.perfil-card-horizontal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perfil-card-horizontal__photo,
    .user-perfil-card-layout--usuarios .usuarios-perfil-photo-section {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: center;
    }

    .perfil-card-horizontal__body {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .perfil-propio-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-perfil-card-layout--usuarios.perfil-card-horizontal .perfil-card-horizontal__body {
        display: flex;
    }

    .user-perfil-card-layout--usuarios .usuarios-perfil-col-datos,
    .user-perfil-card-layout--usuarios .usuarios-perfil-col-meta {
        grid-column: auto;
    }

    .usuarios-perfil-actions-stack {
        max-width: none;
    }
}

/* ========== MODAL HISTORIAL ACTIVIDAD ========== */
.modal-activity-log {
    max-width: min(960px, 100%);
    width: 95%;
    max-height: min(92vh, 92dvh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.modal-activity-log > .trade-detail-header,
.modal-activity-log > .activity-log-filters-accordion,
.modal-activity-log > .activity-log-compose,
.modal-activity-log > .activity-log-detail-actions {
    flex-shrink: 0;
}

.activity-log-filters-accordion {
    margin-bottom: 14px;
    min-width: 0;
}

.activity-log-filters-toggle {
    display: none;
}

@media (min-width: 769px) {
    .activity-log-filters-panel {
        display: block !important;
        border: none;
        background: transparent;
        overflow: visible;
    }

    .activity-log-filters-panel .activity-log-filters {
        padding: 0;
    }
}

.activity-log-filters-panel .activity-log-filters {
    margin-bottom: 0;
    padding: 12px;
}

.activity-log-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}

.activity-log-filters > .form-group {
    margin-bottom: 0;
}

.activity-log-filter-tipo {
    flex: 0 0 auto;
    max-width: 100%;
}

.activity-log-filters > .form-group:not(.activity-log-filter-tipo) {
    flex: 1 1 140px;
    min-width: 0;
}

.activity-log-filter-tipo .form-input {
    box-sizing: border-box;
}

.activity-log-body {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.activity-log-list {
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-log-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}

.activity-log-item:hover {
    background: var(--bg-input);
}

.activity-log-item--active {
    background: rgba(26, 212, 193, 0.12);
    border: 1px solid rgba(26, 212, 193, 0.35);
}

.activity-log-item-icon {
    flex-shrink: 0;
    font-size: 14px;
}

.activity-log-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.activity-log-item-main strong {
    font-size: 12px;
}

.activity-log-item-date {
    font-size: 10px;
    color: var(--text-muted);
}

.activity-log-item-preview {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-log-detail {
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    background: var(--bg-surface);
}

.activity-detail-card h4 {
    margin: 0 0 8px;
    color: var(--accent-cyan);
    font-size: 14px;
}

.activity-detail-body {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.activity-alert-date {
    color: #ffc107;
}

.activity-log-compose {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-log-compose h4 {
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.activity-log-detail-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 10px;
}

.student-profile-card {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.5vw, 20px);
    height: 100%;
    min-width: 0;
}

/* No anular layout horizontal/grid de perfiles en tarjeta */
.student-profile-card.perfil-card-horizontal,
.student-profile-card.perfil-usuarios-compact {
    display: grid;
    flex-direction: unset;
    height: auto;
}

.student-profile-photo-block {
    flex-shrink: 0;
}

.student-profile-photo-wrap {
    display: flex;
    justify-content: flex-start;
}

.student-profile-photo {
    width: clamp(88px, 18vw, 128px);
    height: clamp(88px, 18vw, 128px);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.student-profile-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    color: var(--accent-cyan);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.04em;
}

.student-profile-photo-btn {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
    transition: box-shadow 0.2s, transform 0.2s;
}

.student-profile-photo-btn:hover {
    box-shadow: 0 0 0 3px rgba(26, 212, 193, 0.35);
    transform: scale(1.02);
}

.student-profile-photo-btn:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .estudiante-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo,
    .estudiante-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo--placeholder,
    .estudiante-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo-btn .student-profile-photo,
    .estudiante-perfil-mobile-photo .student-profile-photo-wrap .student-profile-photo-btn .student-profile-photo--placeholder {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border: none;
    }
}

.student-photo-menu {
    position: fixed;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    min-width: 160px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.student-photo-menu-item {
    border: none;
    background: none;
    color: var(--text-primary);
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
}

.student-photo-menu-item:hover {
    background: rgba(26, 212, 193, 0.12);
}

.modal-student-edit {
    max-width: 440px;
    width: 95%;
}

.student-photo-edit-body,
.student-data-edit-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

#editUsuarioActivoWrap {
    display: flex;
    justify-content: center;
    text-align: center;
}

#editUsuarioActivoWrap label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

#editUsuarioActivo {
    width: 17px;
    height: 17px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent-cyan);
    cursor: pointer;
}

.student-photo-edit-preview {
    display: flex;
    justify-content: center;
    min-height: 120px;
}

.student-photo-edit-preview .student-profile-photo,
.student-photo-edit-preview .student-profile-photo--placeholder {
    width: 120px;
    height: 120px;
}

.stats-drawdown-meta {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.stats-drawdown-meta strong {
    color: var(--text-primary);
}

.student-profile-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 2vw, 16px) clamp(14px, 3vw, 28px);
    flex: 1;
    align-content: start;
    min-width: 0;
}

.student-profile-data-col {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8vw, 14px);
    min-width: 0;
}

.student-profile-data-col--full {
    grid-column: 1 / -1;
}

.student-profile-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.student-profile-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.student-profile-label-meta {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-secondary);
    opacity: 0.72;
}

.student-profile-value {
    color: var(--text-primary);
    font-size: clamp(13px, 1.6vw, 14px);
    line-height: 1.4;
    word-break: break-word;
}

.student-field-reveal {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    text-decoration: underline dotted;
    text-decoration-color: var(--accent-cyan);
}

.student-field-reveal:hover {
    color: var(--accent-cyan);
}

.student-field-reveal[data-revealed="0"] {
    color: var(--text-secondary);
    letter-spacing: 0.08em;
}

/* ========== PESTAÑA USUARIOS — altura uniforme inputs y botones ========== */
#tab-usuarios {
    --usuarios-control-height: 42px;
}

#tab-usuarios input.form-input,
#tab-usuarios select.form-input {
    height: var(--usuarios-control-height);
    min-height: var(--usuarios-control-height);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(var(--usuarios-control-height) - 2px);
}

#tab-usuarios .btn {
    height: var(--usuarios-control-height);
    min-height: var(--usuarios-control-height);
    max-height: var(--usuarios-control-height);
    padding: 0 20px;
    box-sizing: border-box;
    line-height: 1.2;
}

#tab-usuarios .btn-sm {
    height: var(--usuarios-control-height);
    min-height: var(--usuarios-control-height);
    max-height: var(--usuarios-control-height);
    padding: 0 14px;
    font-size: 14px;
    box-sizing: border-box;
    line-height: 1.2;
}

/* ========== ACORDEÓN INVITACIONES (USUARIOS) ========== */
.usuarios-invite-accordion {
    margin-bottom: 24px;
}

.usuarios-invite-section .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.usuarios-invite-section .form-row > .form-group {
    flex: 1 1 180px;
    min-width: min(100%, 160px);
    margin-bottom: 0;
}

.usuarios-invite-section .usuarios-invite-submit {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    margin-bottom: 0;
    align-self: flex-end;
}

.usuarios-invite-section .usuarios-invite-submit-label {
    display: block;
    margin-bottom: 6px;
    line-height: 1.25;
    visibility: hidden;
    user-select: none;
}

.usuarios-invite-section .usuarios-invite-submit .btn {
    width: auto;
    white-space: nowrap;
}

.accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.accordion-toggle:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-input);
}

.accordion-toggle[aria-expanded="true"] {
    border-color: var(--accent-cyan);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion-chevron {
    font-size: 12px;
    color: var(--accent-cyan);
    transition: transform 0.25s ease;
}

.accordion-toggle[aria-expanded="true"] .accordion-chevron {
    transform: rotate(180deg);
}

.accordion-panel {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: var(--bg-elevated);
    overflow: hidden;
}

.accordion-panel[hidden] {
    display: none;
}

.accordion-panel .admin-section {
    margin-bottom: 0;
    padding: 16px;
    border-bottom: none;
}

.accordion-panel .admin-section + .admin-section {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}


/* ========== RESPONSIVE GLOBAL ========== */

/* Tablet y móvil grande (≤1024px) */
@media (max-width: 1024px) {
    .student-courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .student-profile-data-grid {
        gap: 12px 20px;
    }

    .stats-summary > .stat-card {
        flex: 1 1 120px;
        max-width: calc((100% - 24px) / 3);
    }

    .student-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* Tablet (≤768px) */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .students-toolbar .form-group,
    .students-toolbar .form-group[style*="flex: 2"],
    .student-trading-filters .form-group,
    .student-trading-filters .form-group[style*="flex: 2"] {
        flex: 1 1 100%;
        min-width: 100%;
    }

    #tab-usuarios .usuarios-toolbar-row.students-toolbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    #tab-usuarios .usuarios-toolbar-row .form-group,
    #tab-usuarios .usuarios-toolbar-row .estudiantes-toolbar-buscar-filtros {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        margin-bottom: 0;
    }

    #tab-usuarios .usuarios-toolbar-row .estudiantes-toolbar-search {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
    }

    #tab-usuarios .usuarios-toolbar-row .estudiantes-toolbar-search .usuarios-search-wrap {
        width: 100%;
        min-width: 0;
    }

    #tab-usuarios .usuarios-toolbar-row .form-group > label,
    #tab-usuarios .usuarios-toolbar-row .form-group-btn > label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    #tab-usuarios .usuarios-toolbar-row .estudiantes-toolbar-buscar-filtros {
        flex: 0 0 auto;
        width: max-content;
        max-width: none;
    }

    #tab-usuarios .usuarios-toolbar-row .estudiantes-toolbar-buscar__label {
        display: none;
    }

    #tab-usuarios .usuarios-toolbar-row .estudiantes-toolbar-buscar-icon {
        display: block;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        line-height: 1;
        pointer-events: none;
    }

    #tab-usuarios .usuarios-toolbar-row .estudiantes-toolbar-buscar-filtros .estudiantes-toolbar-buscar .estudiantes-toolbar-buscar-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: var(--estudiantes-control-height, 42px);
        min-width: var(--estudiantes-control-height, 42px);
        max-width: var(--estudiantes-control-height, 42px);
        height: var(--estudiantes-control-height, 42px);
        min-height: var(--estudiantes-control-height, 42px);
        max-height: var(--estudiantes-control-height, 42px);
        padding: 0;
        line-height: 1;
    }

    #tab-estudiantes .estudiantes-toolbar-row.students-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'search search'
            'curso buscar-filtros';
        align-items: end;
        gap: 10px;
    }

    #tab-estudiantes .estudiantes-toolbar-row .estudiantes-toolbar-search {
        grid-area: search;
        flex: none;
        width: 100%;
        min-width: 0;
    }

    #tab-estudiantes .estudiantes-toolbar-row .estudiantes-toolbar-course {
        grid-area: curso;
        flex: none;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

    #tab-estudiantes .estudiantes-toolbar-row .estudiantes-toolbar-course .form-input {
        width: 100%;
    }

    #tab-estudiantes .estudiantes-toolbar-row .estudiantes-toolbar-buscar-filtros {
        grid-area: buscar-filtros;
        flex: none;
        width: max-content;
        min-width: 0;
        max-width: 100%;
        justify-self: end;
    }

    #tab-estudiantes .estudiantes-toolbar-row .estudiantes-toolbar-buscar-filtros .estudiantes-toolbar-buscar .btn {
        width: auto;
        min-width: 4.75rem;
        max-width: none;
    }

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

    .student-account-row {
        flex-direction: column;
        align-items: stretch;
    }

    .student-account-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .student-account-actions .btn {
        flex: 1 1 auto;
        min-width: min(100%, 140px);
    }

    .student-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .student-courses-grid {
        grid-template-columns: 1fr;
    }

    .student-profile-photo-wrap {
        justify-content: center;
    }

    .student-profile-data-grid {
        grid-template-columns: 1fr 1fr;
    }

    .student-profile-main-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .estudiante-perfil-body-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .student-profile-left-col .student-courses-grid {
        grid-template-columns: 1fr;
    }

    .activity-log-body {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 12px;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    .modal-activity-log .activity-log-filters-toggle {
        display: flex;
    }

    .modal-activity-log .activity-log-filters-panel .activity-log-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .modal-activity-log .activity-log-filters-panel .activity-log-filters > .form-group,
    .modal-activity-log .activity-log-filters-panel .activity-log-filter-tipo {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .modal-activity-log .activity-log-filters-panel .activity-log-filter-tipo .form-input,
    .modal-activity-log .activity-log-filters-panel .activity-log-filters .form-input {
        width: 100%;
    }

    .modal-activity-log .activity-log-list {
        flex: 1 1 auto;
        min-height: 180px;
        max-height: none;
    }

    .modal-activity-log .activity-log-detail {
        flex: 0 0 auto;
        min-height: 120px;
        max-height: min(34vh, 220px);
    }

    .student-profile-data-grid {
        grid-template-columns: 1fr;
    }

    .student-profile-data-col--stats {
        padding-top: 4px;
        border-top: 1px solid var(--border);
    }

    .stat-value {
        font-size: clamp(18px, 4vw, 24px);
    }

    .input-with-btn {
        flex-direction: column;
        align-items: stretch;
    }

    .input-with-btn .btn {
        width: 100%;
    }

    .pagination {
        gap: 6px;
    }

    .pagination__pages {
        max-width: 100%;
    }

    .pagination__status {
        order: 3;
        flex: 1 1 100%;
        text-align: center;
    }

    .trade-detail-columns {
        grid-template-columns: 1fr;
    }

    .trade-detail-nav:not(.trade-detail-nav--pager) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .trade-detail-nav:not(.trade-detail-nav--pager) .trade-detail-nav-center {
        order: -1;
        flex: 1 1 100%;
        justify-content: center;
    }

    .trade-detail-nav:not(.trade-detail-nav--pager) .trade-detail-nav-side {
        flex: 1 1 calc(50% - 4px);
        justify-self: unset;
    }

    .modal-visor-imagen.modal-overlay {
        align-items: center;
        justify-content: center;
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    .modal-visor-imagen .modal-visor-imagen-content {
        border-radius: var(--radius-card);
        height: min(
            calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))),
            96dvh
        );
        max-height: min(
            calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))),
            96dvh
        );
        width: min(100%, 560px);
    }

    .modal-visor-imagen .visor-nav.trade-detail-nav--pager .trade-detail-nav-center {
        display: none;
    }

    .modal-content [style*="display: flex"],
    .modal-content [style*="display:flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .modal-content [style*="display: flex"] .btn,
    .modal-content [style*="display:flex"] .btn {
        width: 100%;
    }

    #trading-form-container .trading-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #trading-form-container .trading-form-actions .btn {
        width: 100%;
    }

    #trading-form-container .trading-form-actions #btnGuardarOperacion {
        order: 1;
    }

    #trading-form-container .trading-form-actions .btn-outline {
        order: 2;
    }

    .user-table table,
    #trading-logs-table .trading-table-scroll .trading-table,
    #estudiante-trades-table .trading-table-scroll .trading-table {
        min-width: 560px;
    }

    .trading-table th,
    .trading-table td {
        padding: 8px;
        font-size: 12px;
    }

    .trade-actions-cell .btn {
        display: inline-block;
        margin-bottom: 4px;
    }

    .toast-notification {
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 50%;
        right: auto;
        padding: 12px 16px;
        font-size: 13px;
        max-width: calc(100vw - 24px);
    }

    .modal-overlay {
        align-items: flex-end;
        padding: 0;
        padding-top: max(48px, env(safe-area-inset-top));
    }

    .modal-content,
    .modal-card {
        border-radius: 16px 16px 0 0;
        max-height: min(calc(100dvh - 48px), 92dvh);
    }

    .modal-trade-detail,
    .modal-trade-edit {
        max-width: 100%;
        width: 100%;
    }

    .form-input,
    .btn,
    select.form-input,
    .tab {
        min-height: 44px;
    }

    .nt-machine-id-input,
    .nt-machine-id-form .btn.nt-machine-id-submit {
        height: 40px;
        min-height: 40px;
        max-height: 40px;
    }

    .btn-sm {
        min-height: 40px;
    }

    .live-class-stage-icon-btn.btn {
        min-height: 26px;
        height: 26px;
        padding: 0;
    }

    .modal-visor-imagen-detail-btn.btn {
        padding: 2px 10px;
        min-height: 22px;
    }
}

/* Móvil (≤480px) */
@media (max-width: 480px) {
    .card h2 {
        font-size: clamp(1rem, 4.5vw, 1.25rem);
        letter-spacing: 0.04em;
    }

    .card h3 {
        font-size: 1.05rem;
    }

    .student-info-grid,
    .student-profile-data-grid {
        grid-template-columns: 1fr;
    }

    .student-profile-photo {
        width: clamp(80px, 22vw, 96px);
        height: clamp(80px, 22vw, 96px);
    }

    .student-profile-photo--placeholder {
        font-size: 1.5rem;
    }

    .stats-summary {
        gap: 8px;
    }

    .stats-summary > .stat-card {
        flex: 1 1 calc(50% - 4px);
        max-width: calc((100% - 8px) / 2);
    }

    .student-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 12px 8px;
    }

    .stat-label {
        font-size: 10px;
    }

    .trade-detail-row,
    .confirm-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .trade-detail-value {
        text-align: left;
        width: 100%;
    }

    .confirm-row .confirm-value {
        width: 100%;
    }

    .trade-img-thumb {
        width: 36px;
        height: 36px;
    }

    .accordion-toggle {
        font-size: 12px;
        padding: 12px 14px;
    }

    .admin-section {
        padding-bottom: 12px;
        margin-bottom: 16px;
    }
}

/* Pantallas muy estrechas (≤360px) */
@media (max-width: 360px) {
    .stats-summary > .stat-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .student-stats-grid {
        grid-template-columns: 1fr;
    }

    .badge {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* Preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .card:hover,
    .stat-card:hover,
    .student-card:hover {
        transform: none;
    }
}

/* ========== CELEBRACIÓN LECCIÓN COMPLETADA ========== */
body.lesson-completed-celebration-open {
  overflow: hidden;
}

.lesson-completed-celebration {
  position: fixed;
  inset: 0;
  z-index: 11900;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(2px);
}

.lesson-completed-celebration--visible {
  opacity: 1;
  pointer-events: auto;
}

.lesson-completed-celebration__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: center;
  animation: lesson-completed-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lesson-completed-celebration__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(7.5rem, 22vw, 11rem);
  height: clamp(7.5rem, 22vw, 11rem);
  border-radius: 50%;
  font-size: clamp(3.75rem, 12vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  color: #06201c;
  background: radial-gradient(circle at 35% 30%, #7ff5ea 0%, var(--accent-cyan) 55%, #12a897 100%);
  box-shadow:
    0 0 0 10px rgba(26, 212, 193, 0.18),
    0 18px 48px rgba(0, 0, 0, 0.35);
}

.lesson-completed-celebration__text {
  margin: 0;
  font-size: clamp(1.15rem, 3.2vw, 1.55rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #f5f7fa;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

@keyframes lesson-completed-pop {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  65% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-completed-celebration__card {
    animation: none;
  }
}

/* ========== CELEBRACIÓN CUMPLEAÑOS ========== */
body.birthday-celebration-open {
  overflow: hidden;
}

.birthday-celebration {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(ellipse at center, #1a1814 0%, #080706 100%);
}

.birthday-celebration--visible {
  opacity: 1;
  pointer-events: auto;
}

.birthday-celebration-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.birthday-celebration-balloons {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.birthday-celebration-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(212, 175, 55, 0.14), transparent 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}

.birthday-balloon {
  position: absolute;
  bottom: -20%;
  border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 32% 28%, var(--balloon-c2), var(--balloon-c1) 72%);
  box-shadow:
    inset -8px -12px 24px rgba(0, 0, 0, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.35);
  animation-name: birthday-balloon-rise;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0.92;
}

.birthday-balloon-tail {
  position: absolute;
  bottom: -28px;
  left: 50%;
  width: 2px;
  height: 36px;
  margin-left: -1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent);
  transform-origin: top center;
  animation: birthday-tail-sway 2.8s ease-in-out infinite;
}

@keyframes birthday-balloon-rise {
  0% {
    transform: translateY(0) translateX(0) rotate(-4deg);
    opacity: 0;
  }
  8% {
    opacity: 0.95;
  }
  50% {
    transform: translateY(-55vh) translateX(12px) rotate(5deg);
  }
  100% {
    transform: translateY(-115vh) translateX(-8px) rotate(-3deg);
    opacity: 0.35;
  }
}

@keyframes birthday-tail-sway {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

.birthday-celebration-message {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 28px 32px;
  max-width: min(92vw, 640px);
  animation: birthday-message-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes birthday-message-in {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(16px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.birthday-celebration-line {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  text-shadow:
    0 0 40px rgba(212, 175, 55, 0.45),
    0 2px 24px rgba(0, 0, 0, 0.8);
}

.birthday-celebration-line--main {
  font-size: clamp(1.75rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  background: linear-gradient(135deg, #fff8e7 0%, #e8c547 45%, #d4af37 70%, #f5e6b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.25;
}

.birthday-celebration-line--sub {
  margin-top: 14px;
  font-size: clamp(0.7rem, 2.4vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 248, 231, 0.88);
}

.birthday-celebration-esc {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 480px) {
  .birthday-celebration-message {
    padding: 20px 16px;
  }

  .birthday-celebration-line--main {
    letter-spacing: 0.12em;
  }

  .birthday-celebration-line--sub {
    letter-spacing: 0.16em;
  }
}

/* ========== Mensajería ========== */

#tab-mensajes > .card {
    min-width: 0;
}

.messages-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.messages-card__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 16px;
    min-height: 34px;
}

.messages-card__header > h2 {
    margin-bottom: 0;
}

.messages-new-btn--icon {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.messages-new-btn--icon:hover {
    border-color: rgba(26, 212, 193, 0.45);
    background: rgba(26, 212, 193, 0.08);
}

.messages-new-btn--icon:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.messages-new-btn__icon {
    display: block;
    flex-shrink: 0;
    line-height: 1;
}

.messages-toolbar {
    margin-top: 0;
}

.messages-toolbar--inbox {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.messages-toolbar--inbox .messages-toolbar__search {
    flex: 1 1 auto;
    min-width: 0;
}

.messages-toolbar--inbox .messages-toolbar__filters {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.messages-filtro-estado-select {
    min-width: 10.5rem;
    max-width: 12.75rem;
}

.messages-filtro-estado-compact {
    display: none;
    position: relative;
}

.messages-filtro-estado-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--estudiantes-control-height, 42px);
    min-width: var(--estudiantes-control-height, 42px);
    max-width: var(--estudiantes-control-height, 42px);
    height: var(--estudiantes-control-height, 42px);
    min-height: var(--estudiantes-control-height, 42px);
    max-height: var(--estudiantes-control-height, 42px);
    padding: 0;
    flex-shrink: 0;
    color: var(--text-primary);
}

.messages-filtro-estado-btn--active {
    border-color: var(--accent-cyan, #1ad4c1);
    color: var(--accent-cyan, #1ad4c1);
}

.messages-filtro-estado-btn__icon {
    display: block;
    flex-shrink: 0;
    line-height: 1;
}

.messages-filtro-estado-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 25;
    min-width: 10.5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    padding: 6px 0;
}

.messages-filtro-estado-menu__item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}

.messages-filtro-estado-menu__item:hover,
.messages-filtro-estado-menu__item:focus-visible {
    background: rgba(26, 212, 193, 0.08);
    outline: none;
}

.messages-filtro-estado-menu__item.is-selected {
    color: var(--accent-cyan, #1ad4c1);
    font-weight: 600;
}

.messages-toolbar__search {
    position: relative;
    flex: 1 1 auto;
    min-width: min(100%, 200px);
}

.messages-inbox-search__input {
    width: 100%;
}

.messages-inbox-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    padding: 8px 0;
}

.messages-inbox-search-results__status {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.9rem;
}

.messages-inbox-search-results__section + .messages-inbox-search-results__section {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 4px;
}

.messages-inbox-search-results__title {
    margin: 0;
    padding: 8px 14px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.messages-inbox-search-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.messages-inbox-search-results__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.messages-inbox-search-results__item:hover,
.messages-inbox-search-results__item:focus-visible {
    background: rgba(26, 212, 193, 0.08);
    outline: none;
}

.messages-inbox-search-results__item-title {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
}

.messages-inbox-search-results__item-snippet {
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.messages-inbox-search-results__item-meta {
    font-size: 0.78rem;
    line-height: 1.3;
}

.messages-inbox-search__mark {
    background: rgba(26, 212, 193, 0.28);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.messages-toolbar__filters {
    flex: 0 0 auto;
    min-width: 0;
}


.tab .tab-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--accent-cyan);
    color: #0f1414;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    letter-spacing: 0;
    text-transform: none;
}

.tab .tab-badge.tab-badge--visible {
    display: inline-flex;
}

.messages-threads-list {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-surface);
}

.messages-inbox-row {
    display: grid;
    grid-template-columns: 1.25rem minmax(4.5rem, 8.5rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    min-height: 2.75rem;
    padding: 0 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
    transition: background-color 0.15s ease;
}

.messages-inbox-row:last-child {
    border-bottom: none;
}

.messages-inbox-row:hover {
    background: rgba(26, 212, 193, 0.04);
}

.messages-inbox-row:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
    z-index: 1;
}

.messages-inbox-row--unread {
    background: rgba(26, 212, 193, 0.05);
}

.messages-inbox-row--unread:hover {
    background: rgba(26, 212, 193, 0.08);
}

.messages-inbox-row--closed {
    opacity: 0.78;
}

.messages-inbox-row__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    flex-shrink: 0;
}

.messages-inbox-row__sender-col {
    min-width: 0;
    overflow: hidden;
}

.messages-inbox-row__sender {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
}

.messages-inbox-row--unread .messages-inbox-row__sender {
    font-weight: 700;
    color: var(--text-primary);
}

.messages-inbox-row__sender--link {
    cursor: pointer;
    transition: color 0.15s ease;
}

.messages-inbox-row__sender--link:hover {
    color: var(--accent-cyan);
}

.messages-inbox-row__sender--link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.messages-inbox-row__content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.messages-inbox-row__badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.messages-inbox-row__snippet {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    line-height: 1.25;
    color: var(--text-muted);
}

.messages-inbox-row__subject {
    font-weight: 500;
    color: var(--text-primary);
}

.messages-inbox-row--unread .messages-inbox-row__subject {
    font-weight: 700;
}

.messages-inbox-row__preview,
.messages-inbox-row__dash {
    font-weight: 400;
    color: var(--text-muted);
}

.messages-inbox-row__date {
    flex-shrink: 0;
    min-width: 3.25rem;
    max-width: 9.5rem;
    font-size: 0.68rem;
    line-height: 1.25;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: normal;
}

.messages-inbox-row--unread .messages-inbox-row__date {
    color: var(--text-secondary);
    font-weight: 600;
}

.messages-category-badge--inbox {
    padding: 1px 6px;
    font-size: 0.58rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
}

.messages-inbox-row__tag {
    display: inline-flex;
    align-items: center;
    max-width: 5.5rem;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-inbox-row__tag--course {
    color: var(--text-muted);
    background: var(--bg-input);
}

.messages-inbox-row__tag--closed {
    color: var(--negative);
    border-color: rgba(199, 92, 92, 0.45);
    background: rgba(199, 92, 92, 0.1);
}

.messages-empty {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.messages-category-badge,
.messages-status-badge,
.messages-meta-chip {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.68rem;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-category-badge {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.messages-category-badge--mentoria {
    color: var(--accent-cyan);
    border-color: rgba(26, 212, 193, 0.35);
    background: rgba(26, 212, 193, 0.08);
}

.messages-category-badge--soporte {
    color: var(--accent-lime);
    border-color: rgba(194, 207, 130, 0.35);
    background: rgba(194, 207, 130, 0.08);
}

.messages-category-badge--comercial {
    color: var(--accent-gold);
    border-color: rgba(242, 232, 207, 0.35);
    background: rgba(242, 232, 207, 0.08);
}

.messages-status-badge {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.messages-status-badge--open {
    color: var(--accent-cyan);
    border-color: rgba(26, 212, 193, 0.35);
    background: rgba(26, 212, 193, 0.1);
}

.messages-status-badge--closed {
    color: var(--negative);
    border-color: rgba(199, 92, 92, 0.45);
    background: rgba(199, 92, 92, 0.12);
}

.messages-meta-chip {
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-color: var(--border);
}

.messages-meta-chip--muted {
    color: var(--text-muted);
}

.messages-meta-chip--closed {
    color: var(--negative);
    border-color: rgba(199, 92, 92, 0.45);
    background: rgba(199, 92, 92, 0.12);
}

button.messages-meta-chip {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.messages-meta-chip--link {
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.messages-meta-chip--link:hover {
    color: var(--accent-cyan);
    border-color: rgba(26, 212, 193, 0.35);
    background: rgba(26, 212, 193, 0.08);
}

.messages-meta-chip--link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.messages-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(26, 212, 193, 0.2);
}

.messages-thread-panel {
    gap: 14px;
}

.messages-thread-header-wrap {
    min-width: 0;
    padding-top: 0;
    margin-top: 0;
}

.messages-thread-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
    min-width: 0;
}

.messages-thread-title {
    margin: 0 0 10px;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    word-break: break-word;
}

.messages-thread-header__meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.messages-thread-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.messages-thread-header__icon-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-top: 1px;
}

.messages-thread-header__actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    line-height: 1;
}

.messages-text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    margin: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
    min-height: 0;
}

@media (hover: hover) {
    .messages-text-btn:hover {
        color: var(--accent-cyan);
        background: none;
    }
}

.messages-text-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.messages-search-toggle,
.messages-unread-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    min-height: 0;
    border-radius: 6px;
    transition: color 0.2s ease;
}

.messages-search-toggle:hover,
.messages-unread-toggle:hover {
    color: var(--accent-cyan);
}

.messages-search-toggle:focus-visible,
.messages-unread-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.messages-unread-icon {
    display: block;
}

.messages-thread-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.messages-chat-search {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    padding: 8px 10px;
    background: rgba(18, 18, 18, 0.94);
    border-bottom: 1px solid rgba(26, 212, 193, 0.14);
}

.messages-chat-search[hidden] {
    display: none !important;
}

.messages-chat-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: min(72vh, 680px);
    min-height: 280px;
    margin: 8px 0;
    border-radius: 10px;
    border: 1px solid rgba(26, 212, 193, 0.14);
    overflow: hidden;
    background-color: #121212;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.messages-chat-stage__viewport {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.messages-search-back {
    flex-shrink: 0;
    padding-top: 4px;
    padding-bottom: 4px;
}

.messages-thread-search__input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.messages-thread-search__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.messages-search-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.messages-search-nav-btn:hover:not(:disabled) {
    color: var(--accent-cyan);
    background: rgba(26, 212, 193, 0.08);
}

.messages-search-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.messages-thread-search__counter {
    min-width: 3.2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.messages-search-highlight {
    background: rgba(255, 214, 10, 0.28);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.messages-search-highlight--active {
    background: rgba(255, 214, 10, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 214, 10, 0.35);
}

.messages-bubble--search-active {
    box-shadow: 0 0 0 2px rgba(255, 214, 10, 0.55);
}

.messages-chat-wallpaper {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #121212;
}

.messages-chat-wallpaper__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.2;
    pointer-events: none;
    user-select: none;
}

.messages-thread-messages {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 10px 14px;
    min-width: 0;
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 150, 150, 0.42) transparent;
}

.messages-thread-messages::-webkit-scrollbar {
    display: block;
    width: 6px;
    background: transparent;
}

.messages-thread-messages::-webkit-scrollbar-track {
    background: transparent;
    margin: 6px 0;
}

.messages-thread-messages::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.42);
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

.messages-thread-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(170, 170, 170, 0.58);
    background-clip: padding-box;
}

.messages-bubble {
    max-width: min(88%, 640px);
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-chat-bubble);
}

.messages-bubble--own {
    align-self: flex-end;
    border: 2px solid var(--accent-cyan);
    background: rgba(26, 212, 193, 0.14);
    box-shadow: 0 0 0 1px rgba(26, 212, 193, 0.12);
}

.messages-bubble--other {
    align-self: flex-start;
}

.messages-bubble--staff {
    align-self: flex-start;
    border: 1px solid rgba(26, 212, 193, 0.35);
    background: rgba(26, 212, 193, 0.12);
}

.messages-bubble--staff .messages-bubble__author {
    color: var(--accent-cyan);
}

.messages-bubble--enter {
    animation: messages-bubble-in 0.28s ease-out;
}

@keyframes messages-bubble-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.messages-bubble__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.messages-bubble__author {
    font-size: 0.8rem;
    color: var(--text-primary);
}

.messages-bubble__time {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.messages-bubble__body {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    word-break: break-word;
}

.messages-inline-link {
    color: var(--accent-cyan);
    text-decoration: underline;
    word-break: break-all;
}

.messages-inline-link:hover {
    opacity: 0.85;
}

.messages-bubble__attachments {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.messages-attachment-link {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-cyan);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.messages-attachment-link:hover {
    color: var(--text-primary);
}

.messages-compose {
    margin-top: 4px;
}

.messages-compose-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.messages-compose-label {
    margin-bottom: 0;
}

.messages-compose-actions {
    position: relative;
    justify-content: center;
    margin-top: 6px;
}

.messages-compose-close-wrap {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 45%;
    text-align: right;
}

.messages-compose-close-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-muted);
    cursor: pointer;
    text-align: right;
    white-space: nowrap;
}

@media (hover: hover) {
    .messages-compose-close-link:hover {
        color: var(--text-primary);
        text-decoration: underline;
    }
}

.messages-compose-close-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

.messages-send-slot {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 5.5rem;
    min-height: 2rem;
    max-width: 100%;
    transition: flex-basis 0.2s ease, min-width 0.2s ease, width 0.2s ease;
}

.messages-send-slot.is-uploading {
    flex: 0 0 auto;
    width: calc(var(--messages-send-width, 5.5rem) * 2);
    min-width: calc(var(--messages-send-width, 5.5rem) * 2);
    max-width: calc(var(--messages-send-width, 5.5rem) * 2);
}

.messages-send-slot__btn {
    width: 100%;
    min-width: 5.5rem;
}

.messages-send-slot__upload {
    display: none;
    width: 100%;
    min-width: 0;
}

.messages-send-slot.is-uploading .messages-send-slot__btn {
    display: none;
}

.messages-send-slot.is-uploading .messages-send-slot__upload {
    display: flex;
}

.messages-send-slot__upload[hidden],
.messages-send-slot__btn[hidden] {
    display: none !important;
}

.messages-upload-bar {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2rem;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}

.messages-upload-bar__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--gradient-data);
    transition: width 0.12s ease-out;
}

.messages-upload-bar__label {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    padding: 4px 2rem 4px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
}

.messages-upload-bar__cancel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    padding: 0;
    border: none;
    background: rgba(15, 20, 20, 0.35);
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.messages-upload-bar__cancel:hover {
    background: rgba(199, 92, 92, 0.35);
    color: #fff;
}

.messages-send-slot--modal {
    min-width: 5.5rem;
}

.messages-compose-actions .btn-primary {
    margin-left: 0;
}

.messages-compose-actions .btn-sm {
    padding-top: 4px;
    padding-bottom: 4px;
}

.messages-attach-btn {
    cursor: pointer;
    margin: 0;
}

.messages-attach-btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    min-width: 40px;
}

.messages-attach-btn--plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 2px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.messages-attach-btn--plain:hover {
    color: var(--accent-cyan);
}

.messages-attach-btn--plain:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.messages-attach-icon {
    display: block;
    flex-shrink: 0;
}

.messages-attach-btn input[type='file'] {
    display: none;
}

.messages-attachment-link--image {
    text-decoration: none;
}

.messages-attachment-link--image:hover {
    text-decoration: underline;
}

.messages-attachment-viewer {
    max-width: min(92vw, 960px);
    max-height: 92vh;
    padding: 16px;
    text-align: center;
    position: relative;
}

.messages-attachment-viewer__stage {
    position: relative;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.messages-attachment-viewer__img {
    max-width: 100%;
    max-height: min(70vh, 720px);
    border-radius: 8px;
    object-fit: contain;
    background: #1a1a1a;
}

.messages-pending-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
}

.messages-pending-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 100%;
}

.messages-pending-attachment__remove {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-muted);
    padding: 0 2px;
}

.messages-pending-attachment__remove:hover {
    color: var(--negative);
}

.modal-nuevo-mensaje {
    width: min(520px, calc(100vw - 32px));
}

.modal-nuevo-mensaje-body .form-group:last-child {
    margin-bottom: 0;
}

.modal-nuevo-mensaje-actions {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.modal-nuevo-mensaje-actions__end {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-left: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.notificacion-card--mensaje {
    border-color: rgba(26, 212, 193, 0.35);
    background: rgba(26, 212, 193, 0.04);
}

.notificaciones-cronologia-bandeja .notificaciones-section-hint {
    margin: -6px 0 12px;
    font-size: 0.82rem;
}

.notificaciones-cronologia-toolbar {
    margin: 0 0 12px;
}

.notificaciones-cronologia-toolbar .journal-sort {
    flex: 1;
    min-width: min(100%, 220px);
}

.notificaciones-cronologia-list {
    gap: 14px;
}

.notificacion-cronologia-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notificacion-cronologia-item.notificacion-item-removing,
article.notificacion-card.notificacion-item-removing {
    overflow: hidden;
    box-sizing: border-box;
    transition:
        height 0.3s ease,
        opacity 0.25s ease,
        margin 0.3s ease;
}

.notificacion-cronologia-item.notificacion-item-removing.is-collapsed,
article.notificacion-card.notificacion-item-removing.is-collapsed {
    height: 0 !important;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
}

.notificacion-cronologia-kind {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    background: rgba(26, 212, 193, 0.1);
    border: 1px solid rgba(26, 212, 193, 0.25);
}

.notificacion-cronologia-item[data-cronologia-kind='inactivity'] .notificacion-cronologia-kind {
    color: #c45c26;
    background: rgba(196, 92, 38, 0.12);
    border-color: rgba(196, 92, 38, 0.3);
}

.notificacion-cronologia-item[data-cronologia-kind='trade_feedback'] .notificacion-cronologia-kind,
.notificacion-cronologia-item[data-cronologia-kind='trade_feedback_unseen'] .notificacion-cronologia-kind,
.notificacion-cronologia-item[data-cronologia-kind='lesson'] .notificacion-cronologia-kind {
    color: var(--accent-gold);
    background: rgba(242, 232, 207, 0.08);
    border-color: rgba(242, 232, 207, 0.25);
}

.notificacion-cronologia-item[data-cronologia-kind='profile_request'] .notificacion-cronologia-kind {
    color: var(--accent-lime);
    background: rgba(194, 207, 130, 0.08);
    border-color: rgba(194, 207, 130, 0.25);
}

.notificacion-cronologia-item[data-cronologia-kind='qtracker'] .notificacion-cronologia-kind,
.notificacion-cronologia-item[data-cronologia-kind='exercise_review'] .notificacion-cronologia-kind {
    color: var(--accent-cyan);
    background: rgba(26, 212, 193, 0.1);
    border-color: rgba(26, 212, 193, 0.25);
}

.notificacion-cronologia-item[data-cronologia-kind='scheduled_alert'] .notificacion-cronologia-kind {
    color: #c45c26;
    background: rgba(196, 92, 38, 0.12);
    border-color: rgba(196, 92, 38, 0.3);
}

.notificacion-cronologia-item[data-cronologia-kind='message_thread'] .notificacion-cronologia-kind {
    color: var(--accent-cyan);
    background: rgba(26, 212, 193, 0.1);
    border-color: rgba(26, 212, 193, 0.25);
}

.notificacion-cronologia-item[data-cronologia-kind='purchase'] .notificacion-cronologia-kind,
.notificacion-cronologia-item[data-cronologia-kind='ninjatrader_machine_id'] .notificacion-cronologia-kind {
    color: var(--accent-gold);
    background: rgba(242, 232, 207, 0.08);
    border-color: rgba(242, 232, 207, 0.25);
}

.notificaciones-mensajes-bandeja .notificaciones-section-title {
    color: var(--accent-cyan);
}

@media (max-width: 768px) {
    .messages-toolbar:not(.messages-toolbar--inbox) {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .messages-toolbar:not(.messages-toolbar--inbox) .messages-toolbar__filters {
        flex: 0 0 auto;
        width: 100%;
    }

    .messages-toolbar:not(.messages-toolbar--inbox) .messages-toolbar__search {
        flex: 0 0 auto;
        width: 100%;
    }

    .messages-filtro-estado-select {
        display: none;
    }

    .messages-filtro-estado-compact {
        display: block;
    }

    .messages-thread-header__actions {
        width: auto;
        justify-content: flex-end;
    }

    .messages-thread-header__actions .btn,
    .messages-thread-header__actions .messages-text-btn {
        flex: 0 0 auto;
    }

    .messages-thread-search {
        flex-wrap: wrap;
    }

    .messages-thread-search__nav {
        margin-left: auto;
    }

    .messages-chat-stage {
        max-height: min(62vh, 560px);
        min-height: 240px;
    }

    .messages-chat-wallpaper__img {
        object-fit: cover;
        transform: rotate(90deg) scale(1.35);
        transform-origin: center center;
    }

    .messages-bubble {
        max-width: 95%;
    }

    .messages-compose-actions {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .messages-compose-close-wrap {
        position: static;
        transform: none;
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .messages-compose-close-link {
        text-align: center;
        white-space: normal;
    }

    .messages-compose-actions .btn-primary {
        margin-left: 0;
        width: auto;
    }

    .modal-nuevo-mensaje-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-nuevo-mensaje-actions__end {
        margin-left: 0;
        width: 100%;
    }

    .modal-nuevo-mensaje-actions__end .btn {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .messages-inbox-row {
        grid-template-columns: 1rem minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 2px 8px;
        min-height: 3.25rem;
        padding: 8px 10px;
    }

    .messages-inbox-row__indicator {
        grid-row: 1 / span 2;
        align-self: center;
        width: 1rem;
    }

    .messages-inbox-row__sender-col {
        grid-column: 2;
        grid-row: 1;
    }

    .messages-inbox-row__date {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }

    .messages-inbox-row__content {
        grid-column: 2 / span 2;
        grid-row: 2;
    }

    .messages-inbox-row__badges {
        display: none;
    }

}

/* Staff media: FAB global + página pública /m/{token} */
.staff-media-fab {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: env(safe-area-inset-left, 0);
    z-index: 10040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 188, 212, 0.45);
    border-top: none;
    border-left: none;
    border-radius: 0 0 10px 0;
    background: var(--bg-card, rgba(18, 22, 32, 0.96));
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.staff-media-fab:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.staff-media-fab__icon {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.staff-media-fab[hidden] {
    display: none !important;
}

.staff-media-name-field {
    margin-bottom: 0.75rem;
}

.staff-media-browser-hint {
    margin-bottom: 0.75rem;
}

.staff-media-type-btns {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
}

.staff-media-type-btns .trade-feedback-type-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.35rem;
}

.staff-media-type-btns .trade-feedback-type-card[hidden] {
    display: none !important;
}

.staff-media-type-btns .trade-feedback-type-card__label {
    font-size: 0.75rem;
    line-height: 1.2;
}

.btn-feedback__icon {
    display: block;
    flex-shrink: 0;
    line-height: 1;
}

.staff-media-record-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    justify-content: stretch;
    margin-top: 0.75rem;
}

.staff-media-record-actions .btn-feedback--ghost {
    flex: 0 0 auto;
    min-width: 5.25rem;
}

.staff-media-record-actions .btn-feedback--primary {
    flex: 1 1 auto;
}

.staff-media-preview-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 0.75rem;
}

.staff-media-preview-actions__icons {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.staff-media-preview-actions__icons .btn-feedback--icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 999px;
    border-color: transparent;
    background: transparent;
}

.staff-media-preview-actions__icons .btn-feedback--icon-only:hover:not(:disabled) {
    background: rgba(0, 188, 212, 0.1);
    border-color: rgba(0, 188, 212, 0.35);
}

.staff-media-preview-actions__save {
    width: 100%;
}

.staff-media-share-once-hint {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.staff-media-share-url-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.staff-media-share-url-row .form-input {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .trade-feedback-modal .modal-trade-feedback {
        width: 100%;
        max-width: 100%;
        max-height: min(calc(100dvh - max(48px, env(safe-area-inset-top))), 94dvh);
        border-radius: 16px 16px 0 0;
    }

    .trade-feedback-modal .trade-feedback-modal-body {
        padding: 0 0.85rem 1rem;
    }

    .trade-feedback-modal .trade-feedback-toolbar:not(.staff-media-record-actions) {
        flex-wrap: wrap;
        justify-content: stretch;
        gap: 8px;
        width: 100%;
        margin-top: 0.85rem;
    }

    .trade-feedback-modal .trade-feedback-toolbar--center:not(.staff-media-record-actions) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: stretch;
    }

    .trade-feedback-modal .trade-feedback-toolbar:not(.staff-media-record-actions) .btn-feedback {
        flex: 1 1 auto;
        width: 100%;
        min-height: 44px;
        padding: 0.5rem 0.65rem;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .trade-feedback-modal .trade-feedback-toolbar:not(.staff-media-record-actions) .btn-feedback--primary:last-child {
        grid-column: 1 / -1;
    }

    .staff-media-record-actions .btn-feedback {
        min-height: 44px;
    }

    .staff-media-preview-actions__icons {
        gap: 10px;
        padding: 8px 12px;
    }

    .staff-media-preview-actions__icons .btn-feedback--icon-only {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .staff-media-preview-actions__save {
        min-height: 44px;
        font-size: 0.8rem;
    }

    .trade-feedback-modal .trade-feedback-type-btns:not(.staff-media-type-btns) {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .trade-feedback-modal .trade-feedback-type-btns:not(.staff-media-type-btns) .trade-feedback-type-card {
        padding: 0.55rem 0.3rem;
    }

    .trade-feedback-modal .trade-feedback-type-btns:not(.staff-media-type-btns) .trade-feedback-type-card__label {
        font-size: 0.72rem;
    }

    .trade-feedback-text-body {
        max-height: min(42vh, 280px);
    }

    .trade-feedback-text-body--preview {
        max-height: min(32vh, 200px);
    }

    #staffMediaStepChoose .staff-media-type-btns {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }

    #staffMediaStepChoose .staff-media-type-btns .trade-feedback-type-card {
        padding: 0.5rem 0.2rem;
    }

    #staffMediaStepChoose .staff-media-type-btns .trade-feedback-type-card__label {
        font-size: 0.62rem;
    }

    .trade-feedback-modal .trade-feedback-preview-host {
        max-height: min(36vh, 200px);
        overflow: hidden;
    }

    .trade-feedback-modal .trade-feedback-preview-host .trade-feedback-preview-media,
    .trade-feedback-modal .trade-feedback-preview-host video {
        max-height: min(36vh, 200px);
        object-fit: contain;
    }

    .trade-feedback-modal .trade-feedback-preview-host .media-playback-stage:not(.media-playback-stage--audio) {
        min-height: 0;
        max-height: min(36vh, 200px);
    }

    .trade-feedback-modal .trade-feedback-preview-host .media-playback-stage.is-app-loading:not(:has(.known-duration-player)) {
        aspect-ratio: 16 / 9;
        max-height: min(36vh, 200px);
        margin-bottom: 0;
    }

    .trade-feedback-modal .staff-media-name-field {
        margin-bottom: 0.65rem;
    }

    .trade-feedback-modal .staff-media-share-url-row {
        flex-direction: column;
        align-items: stretch;
    }

    .trade-feedback-modal .staff-media-share-url-row .btn {
        width: 100%;
    }
}

body.staff-media-share-page {
    min-height: 100vh;
    margin: 0;
    background: var(--bg-page, #0d1117);
    color: var(--text-primary, #e6edf3);
}

.staff-media-share-shell {
    width: min(720px, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) 1rem 2rem;
}

.staff-media-share-header h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.staff-media-share-state {
    padding: 1rem 0;
    color: var(--text-muted);
}

.staff-media-share-state--error {
    color: var(--negative, #f44336);
}

.staff-media-share-login-link {
    display: inline-block;
    margin-top: 0.65rem;
    color: var(--accent-cyan);
    font-weight: 600;
    text-decoration: none;
}

.staff-media-share-login-link:hover {
    text-decoration: underline;
}

.staff-media-share-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.staff-media-share-expiry {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
}

.staff-media-share-player {
    width: 100%;
}

.staff-media-share-media {
    width: 100%;
    max-height: min(70vh, 480px);
    border-radius: 10px 10px 0 0;
    background: #000;
}

.known-duration-player {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card, rgba(18, 22, 32, 0.96));
}

.known-duration-player__media {
    display: block;
    width: 100%;
}

.known-duration-player__media.staff-media-share-media {
    border-radius: 0;
    max-height: min(70vh, 480px);
}

audio.known-duration-player__media {
    width: 100%;
    min-height: 3rem;
}

.known-duration-player__media--audio-only {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.known-duration-player:has(.known-duration-player__media--audio-only) {
    padding-top: 0.35rem;
}

.known-duration-player__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border-top: 1px solid var(--border);
}

.known-duration-player__play {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--accent-cyan);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.known-duration-player__play:hover {
    border-color: var(--accent-cyan);
}

.known-duration-player__fullscreen {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--accent-cyan);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.known-duration-player__fullscreen:hover {
    border-color: var(--accent-cyan);
}

.known-duration-player__time {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--text-muted);
    min-width: 2.1rem;
}

.known-duration-player__time--total {
    text-align: right;
}

.known-duration-player__seek-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.known-duration-player__seek-track {
    flex: 1;
    width: 100%;
    cursor: pointer;
    touch-action: none;
}

.known-duration-player__seek-track .curso-player-progress-fill {
    transition: none;
}

@media (max-width: 640px) {
    .staff-media-fab {
        width: 2rem;
        height: 2rem;
        font-size: 0.85rem;
    }

    .staff-media-share-url-row {
        flex-direction: column;
    }
}

/* Visión IA — perfil estudiante */
.modal-vision-ia {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 720px);
}

.vision-ia-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vision-ia-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    margin-right: auto;
}

.vision-ia-modal-title h3 {
    flex: 0 1 auto;
}

.vision-ia-modal-title-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #0052CC;
    pointer-events: none;
    user-select: none;
}

.vision-ia-modal-title-icon__svg {
    display: block;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 2px rgba(0, 82, 204, 0.18));
}

.vision-ia-quota-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(99, 179, 237, 0.15);
    color: var(--accent-blue, #63b3ed);
    white-space: nowrap;
}

.vision-ia-quota-badge--empty {
    background: rgba(245, 101, 101, 0.15);
    color: var(--accent-red, #f56565);
}

.vision-ia-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    padding: 0 12px;
}

.vision-ia-tab {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    position: relative;
}

.vision-ia-tab--active {
    color: var(--text-primary, #fff);
    border-bottom-color: transparent;
}

.vision-ia-tab--active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--gradient-data);
    border-radius: 2px 2px 0 0;
}

.vision-ia-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.vision-ia-panel[hidden] {
    display: none !important;
}

.vision-ia-panel--chat {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    gap: 8px;
}

.vision-ia-chat-messages {
    flex: 1;
    min-height: 200px;
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.vision-ia-chat-empty {
    margin: auto;
    text-align: center;
    font-size: 0.9rem;
}

.vision-ia-chat-bubble {
    max-width: 92%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.vision-ia-chat-bubble--user {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.06);
    border-bottom-right-radius: 4px;
}

.vision-ia-chat-bubble--assistant {
    align-self: flex-start;
    background: #0052CC;
    color: #fff;
    border-bottom-left-radius: 4px;
}

.vision-ia-chat-bubble--assistant .vision-ia-chat-bubble__time {
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
}

.vision-ia-chat-bubble__text {
    margin: 0;
    white-space: pre-wrap;
}

.vision-ia-chat-bubble__time {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    opacity: 0.65;
}

.vision-ia-chat-thinking {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(
        135deg,
        #0052CC 0%,
        #1a66d9 50%,
        #0052CC 100%
    );
    background-size: 200% 200%;
    color: #fff;
    animation: vision-ia-thinking-shimmer 2.4s ease-in-out infinite;
}

.vision-ia-thinking {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0;
}

.vision-ia-thinking__dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.vision-ia-thinking__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.55;
    animation: vision-ia-dot-bounce 1.1s ease-in-out infinite;
}

.vision-ia-thinking__dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.vision-ia-thinking__dots span:nth-child(3) {
    animation-delay: 0.32s;
}

.vision-ia-thinking__label {
    font-size: 0.88rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.65));
    letter-spacing: 0.01em;
    transition: opacity 0.35s ease;
}

.modal-vision-ia .modal-panel-body:has(#visionIaGenerating),
.modal-vision-ia .vision-ia-modal-body:has(#visionIaGenerating) {
    justify-content: center;
}

#visionIaPanelResumen:has(#visionIaGenerating) {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(40vh, 280px);
}

#visionIaPanelResumen:has(#visionIaGenerating) > .form-group {
    display: none;
}

#visionIaResultado:has(#visionIaGenerating) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0;
}

#visionIaGenerating {
    align-self: center;
    max-width: min(92%, 400px);
    margin-inline: auto;
}

#visionIaGenerating .vision-ia-thinking {
    justify-content: center;
}

@keyframes vision-ia-dot-bounce {
    0%,
    55%,
    100% {
        transform: translateY(0);
        opacity: 0.35;
    }
    28% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

@keyframes vision-ia-thinking-shimmer {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.vision-ia-chat-compose {
    flex-shrink: 0;
}

.vision-ia-chat-input-wrap {
    position: relative;
}

.vision-ia-chat-input {
    width: 100%;
    resize: vertical;
    min-height: 68px;
    max-height: 120px;
    padding: 10px 48px 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vision-ia-chat-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.vision-ia-chat-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

@media (hover: hover) {
    .vision-ia-chat-input:not(:focus):hover {
        border-color: rgba(26, 212, 193, 0.45);
    }
}

.vision-ia-chat-send-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0052CC;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.vision-ia-chat-send-icon {
    display: block;
    width: 18px;
    height: 18px;
}

.vision-ia-chat-send-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
}

.vision-ia-chat-send-btn--busy {
    opacity: 0.65;
}

@media (hover: hover) {
    .vision-ia-chat-send-btn:not(:disabled):hover {
        background: #0047b3;
    }
}

.vision-ia-footer.trade-detail-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vision-ia-footer .vision-ia-footer-panel {
    display: flex;
    width: 100%;
    gap: 8px;
    justify-content: center;
}

.vision-ia-footer .vision-ia-footer-panel[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    .modal-vision-ia {
        max-width: none;
        width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    .vision-ia-chat-messages {
        max-height: none;
        flex: 1;
    }

    .vision-ia-panel--chat {
        min-height: 0;
        flex: 1;
    }
}

@media (max-width: 768px) {
    #visionIaPanelResumen > .form-group > label {
        display: block;
        text-align: center;
        margin-top: clamp(24px, 6vw, 36px);
        margin-bottom: clamp(16px, 4vw, 24px);
    }
}

.vision-ia-modal__range-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}

.vision-ia-range-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.vision-ia-range-btn--active {
    border-color: rgba(0, 82, 204, 0.55);
    background: rgba(0, 82, 204, 0.14);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(0, 82, 204, 0.2);
}

.vision-ia-range-btn--busy {
    opacity: 0.72;
    cursor: wait;
}

.vision-ia-range-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (hover: hover) {
    .vision-ia-range-btn:not(:disabled):not(.vision-ia-range-btn--active):hover {
        border-color: rgba(0, 82, 204, 0.35);
        background: rgba(0, 82, 204, 0.08);
        color: var(--text-primary);
    }
}

.vision-ia-resultado {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vision-ia-result__section h4 {
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.vision-ia-result__text {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.45;
}

.vision-ia-result__text--compact {
    font-size: 0.9rem;
}

.vision-ia-char-hint {
    font-size: 0.75rem;
    font-weight: 400;
}

.student-profile-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.student-profile-ai-header .student-profile-label {
    flex: 1;
    min-width: 0;
}

.student-profile-ai-header .estudiante-perfil-vision-ia-btn {
    flex-shrink: 0;
    min-height: 36px;
    margin: 0;
    padding: 4px 6px;
}

.student-profile-ai-summary {
    display: block;
    white-space: pre-wrap;
    line-height: 1.4;
}

.activity-detail-body--secondary {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

/* Integrattik */
.integrattik-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.integrattik-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.integrattik-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    min-height: 280px;
}
@media (max-width: 768px) {
    .integrattik-layout {
        grid-template-columns: 1fr;
    }
}
.integrattik-rules-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    padding-right: 12px;
}
.integrattik-rule-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #fff);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.35;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.integrattik-rule-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.integrattik-rule-item:focus-visible {
    outline: 2px solid var(--accent-cyan, #1ad4c1);
    outline-offset: 2px;
}
.integrattik-rule-item.is-active {
    border-color: var(--accent-cyan, #1ad4c1);
    background: rgba(26, 212, 193, 0.12);
    box-shadow: inset 3px 0 0 var(--accent-cyan, #1ad4c1);
}
.integrattik-rule-item.is-disabled {
    opacity: 1;
    background: rgba(255, 255, 255, 0.02);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.1);
}
.integrattik-rule-item.is-disabled .integrattik-rule-item-name {
    color: var(--text-secondary, #ccc);
}
.integrattik-rule-item.is-disabled .integrattik-rule-item-trigger {
    color: var(--text-muted, #999);
}
.integrattik-rule-item.is-active.is-disabled {
    background: rgba(26, 212, 193, 0.08);
    border-color: rgba(26, 212, 193, 0.45);
    box-shadow: inset 3px 0 0 rgba(26, 212, 193, 0.55);
}
.integrattik-rule-item.is-active.is-disabled .integrattik-rule-item-name {
    color: var(--text-primary, #fff);
}
.integrattik-rule-item-name {
    color: var(--text-primary, #fff);
    font-weight: 500;
    width: 100%;
}
.integrattik-rule-item-trigger {
    font-size: 0.72rem;
    font-family: ui-monospace, 'Cascadia Code', monospace;
    color: var(--accent-cyan, #1ad4c1);
    opacity: 1;
    letter-spacing: 0.01em;
}
.integrattik-rule-item.is-disabled .integrattik-rule-item-trigger::before {
    content: 'Inactiva · ';
    color: var(--text-muted, #999);
    font-family: inherit;
}
.integrattik-section {
    margin: 16px 0;
}
.integrattik-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.integrattik-condition-row {
    display: grid;
    grid-template-columns: 1fr 120px 1fr auto;
    gap: 8px;
    margin-bottom: 8px;
}
.integrattik-action-card {
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.integrattik-json-editor {
    width: 100%;
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    min-height: 200px;
}
.integrattik-dryrun-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.integrattik-dryrun-result {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 8px;
    overflow: auto;
    max-height: 200px;
    font-size: 0.8rem;
}
.integrattik-exec-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}
.integrattik-exec-table th,
.integrattik-exec-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    text-align: left;
}
.curso-player-exercises {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.curso-player-exercises-actions {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.curso-player-exercises-actions .btn {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 0;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}
.curso-player-placement {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.curso-player-placement-title {
    margin: 0 0 16px;
    font-size: 1.1rem;
    text-align: center;
}
.curso-player-placement-hint {
    margin: 0 0 16px;
}
.curso-player-placement-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.curso-player-placement-choice {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.35;
    padding: 12px 14px;
}
.curso-player-placement-quiz {
    margin-top: 16px;
}
.curso-player-placement-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.curso-player-placement-actions .btn {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 0;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}
.lesson-exercise-card--batch {
    border-color: var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.curso-player-placement-done {
    margin-top: 16px;
    text-align: center;
}
.modal-ejercicios-leccion {
    max-width: min(640px, 94vw);
    max-height: min(88vh, 900px);
    overflow-y: auto;
}
.quiz-nivel-panel {
    margin: 0 0 8px;
}
.quiz-nivel-toggle {
    font-weight: 600;
}
.quiz-nivel-wrap {
    margin-top: 12px;
}
.quiz-nivel-wrap[hidden] {
    display: none !important;
}
.quiz-nivel-save-actions {
    margin-top: 4px;
    margin-bottom: 4px;
}
.quiz-nivel-divider {
    border: none;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    margin: 16px 0 12px;
}
.quiz-nivel-questions-title {
    margin: 0 0 10px;
    font-size: 1rem;
}
.leccion-placement-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
}
.leccion-placement-choice-row {
    padding: 10px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
}
.leccion-placement-choice-fields {
    display: grid;
    grid-template-columns: 1fr minmax(140px, 180px) auto;
    gap: 8px;
    align-items: center;
}
.leccion-placement-choice-warning-wrap,
.leccion-placement-choice-quiz-wrap {
    margin-top: 8px;
}
.leccion-placement-choice-warning-wrap[hidden],
.leccion-placement-choice-quiz-wrap[hidden] {
    display: none !important;
}
.ejercicios-create-host {
    margin: 12px 0;
}
.ejercicios-create-form {
    padding: 12px;
}
.ejercicios-leccion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.modal-ejercicios-leccion .modal-actions,
.ejercicios-create-form .modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.modal-ejercicios-leccion .btn,
.ejercicios-create-form .btn,
.ejercicios-leccion-actions .btn {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 0;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modal-ejercicios-leccion .ejercicios-admin-list li .btn {
    padding-top: 3px;
    padding-bottom: 3px;
}
@media (max-width: 640px) {
    .leccion-placement-choice-fields {
        grid-template-columns: 1fr;
    }
    .leccion-placement-choice-fields .btn {
        justify-self: start;
    }
    .curso-player-placement-choices {
        max-width: none;
        width: 100%;
    }
}
.lesson-exercise-card {
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}
.lesson-exercise-card > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0;
}
.lesson-exercise-card.is-incorrect {
    border-color: rgba(220, 80, 80, 0.45);
}
.lesson-exercise-card.is-approved {
    border-color: rgba(80, 180, 120, 0.35);
}
.lesson-exercise-feedback {
    margin: 8px 0;
    font-size: 0.9rem;
}
.lesson-exercise-feedback.is-ok {
    color: var(--success, #3d9a6a);
}
.lesson-exercise-feedback.is-bad {
    color: var(--danger, #d45a5a);
}
.lesson-exercise-option {
    display: block;
    margin: 6px 0;
}
.ejercicios-admin-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}
.ejercicios-admin-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

/* Auth intent: enlace email → pantalla correcta al instante */
html[data-auth-intent='invite'] #loginForm,
html[data-auth-intent='invite'] #registerForm,
html[data-auth-intent='invite'] #forgotPasswordForm,
html[data-auth-intent='invite'] #resetPasswordForm {
    display: none !important;
}

html[data-auth-intent='invite'] #inviteRegisterForm {
    display: block !important;
}

html[data-auth-intent='invite'] #inviteRegisterForm:not(.auth-panel-ready) .btn-block {
    pointer-events: none;
    opacity: 0.65;
}

html[data-auth-intent='invite'] #inviteRegisterForm:not(.auth-panel-ready) .auth-panel-loading-hint {
    display: block;
}

.auth-panel-loading-hint {
    display: none;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--text-muted, #aaa);
    text-align: center;
}

#inviteRegisterForm.auth-panel-ready .auth-panel-loading-hint {
    display: none !important;
}

.form-input--readonly,
#inviteEmail[readonly] {
    opacity: 0.9;
    cursor: default;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted, #aaa);
}

/* —— Lección: iframe ejercicio interactivo —— */
.curso-player-lesson-content .lesson-content-embed-wrap,
.leccion-contenido-preview .lesson-content-embed-wrap {
    margin: clamp(10px, 2vw, 16px) 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.curso-player-lesson-content .lesson-content-embed,
.leccion-contenido-preview .lesson-content-embed,
.lesson-content-embed {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 400px;
    min-height: 0;
    border: none;
    background: transparent;
    overflow: hidden;
}

/* Embeds informativos altos (gráficos / contenido interactivo sin práctica) */
.curso-player-lesson-content .lesson-content-embed--tall,
.leccion-contenido-preview .lesson-content-embed--tall,
.lesson-content-embed--tall {
    height: 520px;
    background: transparent;
    color-scheme: dark;
    overflow: visible;
}

.curso-player-lesson-content .lesson-content-embed--panel,
.leccion-contenido-preview .lesson-content-embed--panel,
.lesson-content-embed--panel {
    height: 780px;
    background: transparent;
    color-scheme: dark;
    overflow: visible;
}

@media (max-width: 768px) {
    .curso-player-main {
        padding: 12px var(--space-page);
    }
}

/* ========== Clases en vivo ========== */
.tab-live-dot {
  display: none;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: #e74c3c;
  vertical-align: middle;
  flex-shrink: 0;
}

.tab-live-dot.tab-live-dot--on,
.tab-live-dot:not([hidden]) {
  display: inline-block;
}

.tab-live-dot.tab-live-dot--on,
.tab--live .tab-live-dot--on {
  animation: live-dot-blink 1.1s ease-in-out infinite;
}

@keyframes live-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.live-classes-card__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
  min-height: 52px;
}

.live-classes-card__header h2 {
  margin: 0;
}

.live-classes-card__actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-classes-subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 16px;
}

.live-classes-subtabs__sep {
  color: var(--text-muted, #888);
  font-size: 0.9rem;
  line-height: 1;
  user-select: none;
}

.live-classes-subtab {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 0 4px;
  margin: 0;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  background-image: none;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
}

.live-classes-subtab:hover {
  color: #ffffff;
  opacity: 0.9;
}

.live-classes-subtab:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-cyan));
  outline-offset: 3px;
  border-radius: 2px;
}

.live-classes-subtab.is-active {
  color: #ffffff;
  font-weight: 600;
  cursor: default;
  opacity: 1;
  background-image: linear-gradient(#ffffff, #ffffff);
}

.live-classes-section-title {
  margin: 24px 0 12px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.live-classes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  container-type: inline-size;
  container-name: live-classes-list;
}

.live-class-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  height: 100%;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: var(--bg-elevated);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  overflow: visible;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.live-class-row--live {
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.35);
  overflow: visible;
}

.live-class-row__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  order: 1;
}

.live-class-row__title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
  width: 100%;
}

.live-class-row__title,
.live-class-row h3.live-class-row__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.live-class-row__host {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.live-class-row__desc {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.live-class-row__meta {
  margin: 0;
  font-size: 0.85rem;
  text-align: center;
  width: 100%;
  order: 2;
}

.live-class-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.live-class-when__zones {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  box-sizing: border-box;
}

.live-class-when__zone {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.live-class-when__zone--ny,
.live-class-when__zone--local {
  border: none;
  background: transparent;
}

.live-class-when__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.live-class-when__zone--ny .live-class-when__badge,
.live-class-when__zone--local .live-class-when__badge {
  color: var(--accent-gold);
  background: rgba(242, 232, 207, 0.12);
  border: 1px solid rgba(242, 232, 207, 0.28);
  font-weight: 400;
}

.live-class-when__value {
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

.live-class-when__host {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.live-class-countdown-line {
  margin: 6px 0 0;
  padding: 0;
  width: 100%;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-class-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 4px 0 0;
  width: 100%;
  order: 3;
  margin-top: auto;
}

.live-class-upcoming-label {
  color: #ffffff;
  opacity: 1;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.live-class-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.live-class-action-btn:hover {
  border-color: rgba(26, 212, 193, 0.45);
  background: rgba(26, 212, 193, 0.08);
}

.live-class-action-btn:active:not(:disabled):not(.is-busy) {
  transform: translateY(1px) scale(0.94);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.live-class-action-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.live-class-action-btn--primary {
  border-color: rgba(26, 212, 193, 0.5);
  background: rgba(26, 212, 193, 0.12);
  color: var(--accent-cyan);
}

.live-class-action-btn--primary:hover {
  border-color: rgba(26, 212, 193, 0.7);
  background: rgba(26, 212, 193, 0.18);
}

.live-class-action-btn--primary:active:not(:disabled):not(.is-busy) {
  background: rgba(26, 212, 193, 0.24);
}

.live-class-action-btn--danger {
  color: #ff8a7a;
}

.live-class-action-btn--danger:hover {
  border-color: rgba(231, 76, 60, 0.45);
  background: rgba(231, 76, 60, 0.1);
  color: #ff8a7a;
}

.live-class-live-join-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  margin: 0;
  border: 1.5px solid #e74c3c;
  border-radius: 999px;
  background: rgba(231, 76, 60, 0.14);
  color: #ff8a7a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  isolation: isolate;
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.live-class-live-join-btn:hover {
  background: rgba(231, 76, 60, 0.22);
  border-color: #ff5a48;
  color: #ffb0a4;
}

.live-class-live-join-btn:focus-visible {
  outline: 2px solid rgba(231, 76, 60, 0.65);
  outline-offset: 2px;
}

.live-class-live-join-btn__label {
  position: relative;
  z-index: 1;
}

.live-class-live-join-btn__waves,
.live-class-live-join-btn__waves::before,
.live-class-live-join-btn__waves::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(231, 76, 60, 0.7);
  pointer-events: none;
  content: '';
}

.live-class-live-join-btn__waves {
  animation: live-class-join-wave 1.8s ease-out infinite;
}

.live-class-live-join-btn__waves::before {
  animation: live-class-join-wave 1.8s ease-out 0.45s infinite;
}

.live-class-live-join-btn__waves::after {
  animation: live-class-join-wave 1.8s ease-out 0.9s infinite;
}

@keyframes live-class-join-wave {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

.live-class-action-btn__icon {
  display: block;
  flex-shrink: 0;
  line-height: 1;
}

.live-class-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.live-class-status--live {
  border-color: rgba(231, 76, 60, 0.55);
  color: #ff8a7a;
  background: rgba(231, 76, 60, 0.12);
}

.live-class-status--scheduled {
  border-color: rgba(26, 212, 193, 0.4);
  color: var(--accent-cyan);
  background: rgba(26, 212, 193, 0.08);
}

.live-class-status--ended,
.live-class-status--cancelled {
  color: var(--text-muted);
}

.live-class-room__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.live-class-room__viewers {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.live-class-viewers-badge {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #8b919a) 10%, transparent);
  color: var(--text-muted, #8b919a);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.live-class-viewers-badge:hover {
  color: var(--text-secondary, #b0b6bf);
  border-color: var(--border, #555);
}

.live-class-viewers-badge:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}

.live-class-viewers-badge--readonly {
  cursor: default;
  pointer-events: none;
}

.live-class-viewers-badge--flash {
  color: var(--accent, #3b82f6);
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
}

.live-class-room__viewers-input {
  width: 4.5rem;
  min-height: 0;
  padding: 3px 6px;
  text-align: center;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  appearance: auto;
  -moz-appearance: number-input;
}

.live-class-room__viewers-input::-webkit-outer-spin-button,
.live-class-room__viewers-input::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
  height: 1.4em;
  margin-left: 2px;
  cursor: pointer;
}

.live-class-media-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.live-class-media-bar__spacer {
  flex: 1 1 8px;
  min-width: 8px;
}

.live-class-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.live-class-bumpers-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 0 0;
  padding: 6px 10px;
  border: 1px solid rgba(26, 212, 193, 0.28);
  border-radius: 999px;
  background: rgba(26, 212, 193, 0.06);
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  flex: 0 1 auto;
  max-width: 100%;
}

.live-class-bumpers-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.live-class-bumpers-toggle__ui {
  position: relative;
  width: 1.7rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.live-class-bumpers-toggle__ui::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 0.2s ease, background 0.2s ease;
}

.live-class-bumpers-toggle input:checked + .live-class-bumpers-toggle__ui {
  background: rgba(26, 212, 193, 0.28);
  border-color: rgba(26, 212, 193, 0.55);
}

.live-class-bumpers-toggle input:checked + .live-class-bumpers-toggle__ui::after {
  transform: translateX(0.65rem);
  background: var(--accent-cyan);
}

.live-class-bumpers-toggle__text {
  min-width: 0;
  white-space: nowrap;
}

.live-class-bumpers-toggle:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.live-class-bumper-video {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.28s ease;
}

.live-class-bumper-video.is-mask {
  z-index: 6;
}

.live-class-bumper-video.is-fading {
  opacity: 0;
}

.live-class-bumper-video[hidden] {
  display: none !important;
  opacity: 0;
  transition: none;
}

.live-class-room__exit-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.live-class-media-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  flex: 0 0 auto;
}

.live-class-media-btn--wide {
  width: auto;
  min-width: 40px;
  padding: 0 12px;
  gap: 6px;
}

.live-class-media-btn__icon {
  display: block;
  flex: 0 0 auto;
}

.live-class-media-btn__label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.live-class-media-bar .btn.is-off {
  opacity: 1;
  color: var(--text-muted, #8b919a);
  border-color: color-mix(in srgb, var(--danger, #c44) 45%, var(--border, #444));
  background: color-mix(in srgb, var(--danger, #c44) 12%, transparent);
}

.live-class-media-bar .btn.is-off:hover {
  color: var(--danger, #c44);
  border-color: var(--danger, #c44);
}

.live-class-media-bar .btn.is-active {
  border-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
}

.live-class-media-btn.is-on-air,
.live-class-media-btn.is-on-air:hover,
.live-class-media-btn.is-on-air:disabled,
.btn-primary.live-class-media-btn.is-on-air,
.btn-primary.live-class-media-btn.is-on-air:hover,
.btn-primary.live-class-media-btn.is-on-air:disabled {
  cursor: default;
  pointer-events: none;
  opacity: 1;
  color: #ff8a7a;
  border-color: rgba(231, 76, 60, 0.55);
  background: rgba(231, 76, 60, 0.12);
  box-shadow: none;
  transform: none;
}

.live-class-media-btn.is-joined,
.live-class-media-btn.is-joined:hover,
.live-class-media-btn.is-joined:disabled,
.btn-primary.live-class-media-btn.is-joined,
.btn-primary.live-class-media-btn.is-joined:hover,
.btn-primary.live-class-media-btn.is-joined:disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.9;
  color: var(--accent, #3b82f6);
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
  box-shadow: none;
  transform: none;
}

.live-class-media-btn.is-busy,
.live-class-action-btn.is-busy {
  cursor: wait;
  pointer-events: none;
  opacity: 0.92;
  transform: translateY(1px) scale(0.94);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 10px rgba(26, 212, 193, 0.2);
}

.live-class-action-btn--primary.is-busy {
  border-color: rgba(26, 212, 193, 0.7);
  background: rgba(26, 212, 193, 0.2);
  color: var(--accent-cyan);
}

.live-class-media-btn.is-busy .btn-busy-inner,
.live-class-action-btn.is-busy .btn-busy-inner {
  gap: 0;
}

.live-class-action-btn.is-busy .btn-busy-spinner,
.live-class-media-btn.is-busy .btn-busy-spinner {
  width: 18px;
  height: 18px;
}

.live-class-action-btn.is-busy--icon-only .btn-busy-label,
.live-class-media-btn.is-busy--icon-only .btn-busy-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.live-class-live-join-btn.is-busy {
  cursor: wait;
  pointer-events: none;
  opacity: 0.92;
  transform: translateY(1px) scale(0.97);
}

.live-class-live-join-btn.is-busy .live-class-live-join-btn__waves {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .live-class-action-btn:active:not(:disabled):not(.is-busy),
  .live-class-action-btn.is-busy,
  .live-class-live-join-btn.is-busy {
    transform: none;
  }
}

.live-class-row__processing {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text-muted, #8b919a);
}

.live-class-row--processing {
  opacity: 0.92;
}

.live-class-processing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 8px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted, #8b919a);
  border: 1px solid var(--border, #444);
  background: transparent;
}

.live-class-player__idle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.live-class-player__cam-off {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  pointer-events: none;
}

.live-class-player__cam-off[hidden] {
  display: none !important;
}

.live-class-player__cam-off-icon {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0.9;
}

.live-class-chat__disabled-hint {
  margin: 0;
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 0.875rem;
  border-top: 1px solid var(--border);
}

.live-class-room__title {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.live-class-room__body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 16px;
  align-items: stretch;
  min-height: 0;
}

.live-class-room__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 12px;
}

.live-class-room__action-btn {
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 0;
  line-height: 1.2;
}

.live-class-room__videos {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  /* La columna de video define la altura de la fila del grid */
  min-height: 0;
}

.live-class-video-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: min(100%, 960px);
  margin-inline: auto;
  min-width: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.live-class-video-stage:fullscreen,
.live-class-video-stage:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 0;
  padding: 0;
  background: #000;
  border-radius: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  max-width: none;
}

.live-class-video-stage:fullscreen .live-class-players-grid,
.live-class-video-stage:-webkit-full-screen .live-class-players-grid {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  align-content: stretch;
  grid-auto-rows: 1fr;
}

.live-class-video-stage:fullscreen .live-class-players-grid[data-tile-count='1'],
.live-class-video-stage:-webkit-full-screen .live-class-players-grid[data-tile-count='1'] {
  grid-template-rows: 1fr;
}

.live-class-video-stage:fullscreen .live-class-players-grid[data-tile-count='2'],
.live-class-video-stage:-webkit-full-screen .live-class-players-grid[data-tile-count='2'] {
  grid-template-rows: 1fr;
}

.live-class-video-stage:fullscreen .live-class-players-grid[data-tile-count='3'],
.live-class-video-stage:fullscreen .live-class-players-grid[data-tile-count='4'],
.live-class-video-stage:-webkit-full-screen .live-class-players-grid[data-tile-count='3'],
.live-class-video-stage:-webkit-full-screen .live-class-players-grid[data-tile-count='4'] {
  grid-template-rows: 1fr 1fr;
}

.live-class-video-stage:fullscreen .live-class-players-grid .live-class-player,
.live-class-video-stage:-webkit-full-screen .live-class-players-grid .live-class-player {
  max-width: none;
  margin-inline: 0;
  aspect-ratio: auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
}

.live-class-fullscreen-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.live-class-fullscreen-btn:hover {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(255, 255, 255, 0.4);
}

.live-class-fullscreen-btn:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}

.live-class-fullscreen-btn__icon {
  display: block;
}

.live-class-onair-timer {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
  line-height: 1;
}

.live-class-onair-timer__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e74c3c;
  flex-shrink: 0;
  animation: live-dot-blink 1.1s ease-in-out infinite;
}

.live-class-onair-timer__value {
  min-width: 2.6em;
}

.live-class-players-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  flex: 1;
  min-width: 0;
}

.live-class-players-grid[data-tile-count='2'] {
  grid-template-columns: 1fr 1fr;
}

.live-class-players-grid[data-tile-count='3'],
.live-class-players-grid[data-tile-count='4'] {
  grid-template-columns: 1fr 1fr;
}

.live-class-player {
  --live-player-radius: 10px;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: var(--live-player-radius);
  overflow: hidden;
  background: #000;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--border, #5a5f66) 70%, transparent);
  box-shadow: none;
}

.live-class-player--local,
.live-class-player--awaiting {
  max-width: 100%;
  margin-inline: 0;
}

.live-class-player video,
.live-class-player .agora_video_player {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000;
  border-radius: inherit;
}

.live-class-players-grid .live-class-player {
  border: 1px solid color-mix(in srgb, var(--border, #5a5f66) 70%, transparent);
}

.live-class-room__chat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-chat);
  /* Altura = columna de video (stage + controles); el contenido no expande la fila */
  height: 0;
  min-height: 100%;
  max-height: none;
  overflow: hidden;
  min-width: 0;
}

.live-class-chat__header {
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.live-class-chat__header h4 {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-weight: 700;
}

.live-class-chat__hint {
  margin: 0;
  font-size: 0.78rem;
}

.live-class-chat__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.live-class-chat__msg {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-chat-bubble);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.live-class-chat__msg--mine {
  border-color: rgba(26, 212, 193, 0.25);
}

.live-class-chat__msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 4px;
  font-size: 0.78rem;
}

.live-class-stage-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  line-height: 1;
  border-radius: 7px;
  margin-left: auto;
}

.live-class-stage-icon-btn.btn {
  min-height: 26px;
  padding: 0;
}

.live-class-stage-icon-btn__icon {
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.live-class-stage-icon-btn--danger {
  color: var(--danger, #c44);
  border-color: color-mix(in srgb, var(--danger, #c44) 45%, var(--border, #444));
  background: color-mix(in srgb, var(--danger, #c44) 10%, transparent);
}

.live-class-stage-icon-btn--danger:hover {
  color: var(--danger, #c44);
  border-color: var(--danger, #c44);
}

.live-class-chat__msg p {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.92rem;
  word-break: break-word;
}

.live-class-chat__to {
  margin-top: 4px !important;
  font-size: 0.75rem !important;
}

.live-class-chat__form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}

.live-class-chat__form .form-input {
  flex: 1;
}

.live-class-chat__msg--clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.live-class-chat__msg--clickable:hover {
  border-color: rgba(26, 212, 193, 0.35);
}

.live-class-chat__msg--selected {
  border-color: rgba(26, 212, 193, 0.55);
  background: rgba(26, 212, 193, 0.1);
}

.live-class-chat__reply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: rgba(26, 212, 193, 0.08);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
}

.live-class-chat__reply-bar[hidden] {
  display: none !important;
}

.live-class-chat__reply-bar-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-class-chat__reply-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.live-class-chat__reply-clear:hover {
  border-color: rgba(231, 76, 60, 0.45);
  color: #ff8a7a;
}

.live-class-stage-list {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
  max-height: 28%;
  overflow-y: auto;
}

.live-class-stage-title {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.live-class-stage-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.live-class-stage-ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.live-class-stage-ul__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-class-stage-ul .live-class-stage-icon-btn {
  margin-left: 0;
}

.modal-content.modal-sistema.live-class-recording-modal,
.live-class-recording-modal {
  width: min(960px, 96vw);
  max-width: min(960px, 96vw);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
}

.live-class-recording-modal__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 48px 8px;
  text-align: center;
}

.live-class-recording-modal__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
}

.live-class-recording-modal__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  width: 100%;
}

.live-class-recording-modal__date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-align: center;
  width: 100%;
}

.live-class-recording-modal__body {
  padding: 8px 16px 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.live-class-recording-modal__desc {
  margin: 0;
  padding: 0 8px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.live-class-recording-modal .live-class-recording-player {
  --live-recording-max-h: min(70vh, 720px);
  border-radius: 12px;
}

/* Keep full rounded corners at mobile sheet breakpoints (global modals use 16px 16px 0 0). */
@media (max-width: 768px) {
  .modal-overlay:has(.live-class-recording-modal) {
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .modal-content.modal-sistema.live-class-recording-modal,
  .modal-content.live-class-recording-modal,
  .live-class-recording-modal {
    border-radius: 12px;
    width: min(960px, calc(100vw - 24px));
    max-width: min(960px, calc(100vw - 24px));
    max-height: min(92vh, 900px);
  }
}

@media (max-width: 680px) {
  .live-class-recording-modal .live-class-recording-player {
    --live-recording-max-h: min(52vh, 720px);
  }
}

.live-class-recording-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.live-class-recording-toolbar {
  align-items: flex-start;
}

.live-class-recording-toolbar__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.live-class-recording-toolbar__meta .live-class-room__title {
  flex: 0 1 auto;
}

.live-class-recording-toolbar__date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.live-class-recording-player {
  --live-recording-max-h: min(78vh, 960px);
  position: relative;
  /* Si max-height limita, estrechar ancho para no romper 16:9 (evita barras laterales). */
  width: min(100%, calc(var(--live-recording-max-h) * 16 / 9));
  max-width: 100%;
  margin-inline: auto;
  min-width: 0;
  aspect-ratio: 16 / 9;
  max-height: var(--live-recording-max-h);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  /* Native <video controls> ignores parent overflow:hidden on corners; clip-path fixes it */
  clip-path: inset(0 round 12px);
  -webkit-clip-path: inset(0 round 12px);
}

.live-class-recording-player .lesson-content-video-wrap {
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}

.live-class-recording-player .lesson-content-video-shell {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  aspect-ratio: unset;
  border-radius: 0;
}

/* Bare video fallback (no enhance shell): fill stage, let parent clip corners */
.live-class-recording-player > .lesson-content-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  background: #000;
}

.live-class-recording-player .lesson-content-video {
  object-fit: contain;
  border-radius: 0;
}

.live-class-recording-player .lesson-video-controls__btn {
  width: 2rem;
  height: 2rem;
}

.live-class-recording-player .lesson-video-controls__btn--speed {
  width: auto;
  min-width: 2.4rem;
  padding: 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

@media (max-width: 680px) {
  .live-class-recording-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .live-class-recording-player {
    --live-recording-max-h: min(56vh, 960px);
  }

  .live-class-recording-player .lesson-video-controls__btn {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.live-class-modal {
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
}

.live-class-bumpers-modal {
  width: min(720px, 100%);
  max-height: min(92vh, 860px);
}

.live-class-bumpers-modal .modal-sistema-header {
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-inline: 2rem;
}

.live-class-bumpers-modal .modal-sistema-header h3 {
  flex: 1 1 auto;
  text-align: center;
  padding-inline: 0.5rem;
}

.live-class-bumpers-modal .modal-sistema-actions {
  justify-content: center;
}

.live-class-bumpers-modal__body {
  padding: 0 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.live-class-bumpers-modal__hint {
  margin: 0 auto;
  max-width: 36rem;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
}

.live-class-bumper-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.live-class-bumper-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(26, 212, 193, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

.live-class-bumper-slot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.live-class-bumper-slot__head h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.live-class-bumper-slot__badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  border: 1px solid rgba(26, 212, 193, 0.35);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(26, 212, 193, 0.08);
}

.live-class-bumper-slot__preview {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
}

.live-class-bumper-slot__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.live-class-bumper-slot__video[hidden] {
  display: none;
}

.live-class-bumper-slot__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #888);
  font-size: 0.85rem;
  pointer-events: none;
}

.live-class-bumper-slot__empty[hidden] {
  display: none;
}

.live-class-bumper-slot__status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

.live-class-bumper-slot__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.live-class-bumper-slot__file-btn {
  cursor: pointer;
  margin: 0;
}

.live-class-bumper-slot__file-btn input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.live-class-bumper-slot__actions .live-class-action-btn:disabled,
.live-class-bumper-slot__actions .live-class-action-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.live-class-bumper-slot__progress {
  margin: 0;
  font-size: 0.78rem;
  color: var(--accent-cyan);
  text-align: center;
}

@media (max-width: 680px) {
  .live-class-bumper-slots {
    grid-template-columns: 1fr;
  }

  .live-class-bumpers-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .live-class-bumpers-toggle__text {
    white-space: normal;
  }
}

.live-class-modal__form {
  padding: 0 4px 4px;
}

.live-class-form-submit {
  min-width: 8.25rem;
}

.live-class-start-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px;
}

#liveClassFormStartDate::placeholder {
  text-transform: lowercase;
}

@media (max-width: 480px) {
  .live-class-start-row {
    grid-template-columns: 1fr;
  }
}

.live-class-people {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-class-people__host,
.live-class-people__cohosts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-class-people__host > label {
  margin-bottom: 0;
}

.live-class-host-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(26, 212, 193, 0.4);
  border-radius: 10px;
  background: rgba(26, 212, 193, 0.08);
}

.live-class-host-card__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--text-primary);
}

.live-class-host-card__copy strong {
  font-weight: 600;
}

.live-class-host-other {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-class-people__sublabel {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.live-class-people-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.live-class-people-result {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.live-class-people-result:hover {
  border-color: rgba(26, 212, 193, 0.45);
  background: rgba(26, 212, 193, 0.08);
}

.live-class-people-chips,
.live-class-people-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.live-class-people-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px 4px 10px;
  border: 1px solid rgba(26, 212, 193, 0.35);
  border-radius: 999px;
  background: rgba(26, 212, 193, 0.08);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.live-class-people-chip--host {
  border-color: rgba(242, 232, 207, 0.4);
  background: rgba(242, 232, 207, 0.08);
}

.live-class-people-chip__role {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.live-class-people-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-class-people-chip__remove {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.live-class-people-chip__remove:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.live-class-cohost-row {
  display: flex;
  gap: 8px;
}

.live-class-cohost-results {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.live-class-cohost-selected {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.live-class-cohost-selected li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.9rem;
}

/* Asistentes de la transmisión (solo host) */
.live-class-attendees {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
}

.live-class-attendees__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 75%, transparent);
  background: color-mix(in srgb, var(--bg-chat, #172328) 88%, transparent);
}

.live-class-attendees__col--now {
  border-color: color-mix(in srgb, var(--accent-cyan, #1ad4c1) 28%, var(--border, #444));
}

.live-class-attendees__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.live-class-attendees__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.18);
  animation: live-dot-blink 1.1s ease-in-out infinite;
}

.live-class-attendees__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.live-class-attendees__count {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-cyan, #1ad4c1);
  background: color-mix(in srgb, var(--accent-cyan, #1ad4c1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-cyan, #1ad4c1) 28%, transparent);
}

.live-class-attendees__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}

.live-class-attendees__empty {
  margin: 0;
  padding: 10px 4px;
  color: var(--text-muted, #8b919a);
  font-size: 0.78rem;
  line-height: 1.35;
}

.live-class-attendees__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elevated, #1c252b) 55%, transparent);
}

.live-class-attendees__item.is-online {
  background: color-mix(in srgb, var(--accent-cyan, #1ad4c1) 8%, transparent);
}

.live-class-attendees__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-cyan, #1ad4c1);
  background: color-mix(in srgb, var(--accent-cyan, #1ad4c1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-cyan, #1ad4c1) 30%, transparent);
}

.live-class-attendees__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.live-class-attendees__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-class-attendees__online {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent-cyan, #1ad4c1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-cyan, #1ad4c1) 22%, transparent);
}

.live-class-attendees__email {
  color: var(--text-muted, #8b919a);
  font-size: 0.7rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .live-class-room__body {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
  }

  /* Saca stage / media / exit del wrapper para poder poner Salir/Terminar debajo del chat */
  .live-class-room__videos,
  .live-class-controls-row {
    display: contents;
  }

  .live-class-video-stage {
    order: 1;
  }

  .live-class-bumpers-toggle {
    order: 2;
    width: 100%;
    max-width: none;
    justify-content: center;
    margin: 4px 0 0;
    box-sizing: border-box;
  }

  .live-class-media-bar {
    order: 3;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    width: 100%;
  }

  .live-class-room__chat {
    order: 4;
    /* En móvil: altura fija ~ video 16:9 + controles + un poco más; scroll interno */
    height: min(420px, calc(56.25vw + 72px));
    min-height: 280px;
    max-height: min(420px, calc(56.25vw + 72px));
  }

  .live-class-room__exit-bar {
    order: 5;
    justify-content: center;
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
  }

  .live-class-room__toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'title title'
      'status viewers';
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
  }

  .live-class-room__toolbar .live-class-room__title {
    grid-area: title;
    flex: unset;
    width: 100%;
    text-align: center;
  }

  .live-class-room__toolbar .live-class-status {
    grid-area: status;
    justify-self: start;
  }

  .live-class-room__toolbar .live-class-room__viewers {
    grid-area: viewers;
    justify-self: end;
    margin-left: 0;
  }

  .live-class-media-bar__spacer {
    flex: 1 1 4px;
    min-width: 4px;
  }

  .live-class-media-btn--wide {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
  }

  .live-class-media-btn__label {
    display: none !important;
  }

  .live-class-attendees {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
  }

  .live-class-attendees__col {
    padding: 10px 12px;
  }

  .live-class-attendees__list {
    max-height: 160px;
  }
}

/* Cards already stack internally; keep actions centered on narrow containers. */
@container live-classes-list (max-width: 620px) {
  .live-classes-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .live-classes-list {
    grid-template-columns: 1fr;
  }
}

/* ===== Lesson chart examples (responsive) ===== */
.lesson-chart-exercises-embed,
.chart-ex-embed-host {
  margin: 1.5rem 0 0;
}

.chart-ex-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chart-ex-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.chart-ex-panel__title {
  margin: 0;
}

.chart-ex-intro,
.chart-ex-footer-text {
  margin: 0;
}

.chart-ex-footer-text {
  text-align: center;
}

.chart-ex-group-title {
  margin: 0.75rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.chart-ex-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .chart-ex-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.chart-ex-slot {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  position: relative;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.25);
  overflow: hidden;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.chart-ex-slot--pending {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.22);
}

.chart-ex-slot--loaded {
  border-color: rgba(76, 175, 80, 0.35);
  background: rgba(76, 175, 80, 0.06);
}

.chart-ex-slot--redo {
  border-color: color-mix(in srgb, var(--danger, #f44336) 45%, transparent);
  background: color-mix(in srgb, var(--danger, #f44336) 8%, transparent);
}

.chart-ex-slot__hint--redo {
  color: var(--danger, #f44336);
}

.chart-ex-slot.is-uploading {
  pointer-events: none;
}

.chart-ex-slot__media {
  flex: 0 0 88px;
  width: 88px;
}

.chart-ex-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}

.chart-ex-thumb {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.12);
}

.chart-ex-thumb--empty {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.08);
}

.chart-ex-slot__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chart-ex-slot__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem 0.5rem;
}

.chart-ex-slot__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.chart-ex-slot__hint {
  margin: 0;
  font-size: 0.8rem;
}

.chart-ex-slot__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
}

.chart-ex-slot__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 18, 0.62);
  backdrop-filter: blur(1px);
}

.chart-ex-slot__loading[hidden] {
  display: none !important;
}

.chart-ex-slot__loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.chart-ex-slot__loading-spinner {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  animation: app-loading-girar-presionar 1280ms infinite;
  animation-timing-function: ease-out, cubic-bezier(0.12, 0.85, 0.22, 1), cubic-bezier(0.4, 0.05, 0.2, 1), cubic-bezier(0.33, 1.15, 0.55, 1), cubic-bezier(0.22, 1, 0.36, 1), ease-out;
  filter: drop-shadow(0 0 8px rgba(26, 212, 193, 0.35));
}

.chart-ex-slot__loading-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #e8eef6);
}

.chart-ex-upload-btn,
.chart-ex-slot__actions .btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  height: 28px;
  padding: 0.15rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.2;
  box-sizing: border-box;
}

.chart-ex-panel__footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.chart-ex-submit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.45rem;
  width: 100%;
}

.chart-ex-missing-notice {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}

.chart-ex-submit-btn {
  align-self: center;
  width: auto;
  max-width: 100%;
}

.chart-ex-submit-btn--disabled,
.chart-ex-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.chart-ex-status {
  margin: 0;
  font-weight: 600;
}

.chart-ex-status--ok {
  color: var(--positive, #4caf50);
}

.chart-ex-feedback-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0.75rem;
  border-radius: 10px;
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.chart-ex-feedback-badge {
  align-self: center;
  cursor: pointer;
  border: 0;
}

.chart-ex-feedback-badge.is-attention-pulse,
.trade-feedback-badge.is-attention-pulse {
  animation: chart-ex-feedback-attention 1.2s ease-in-out 2;
  box-shadow: 0 0 0 0 rgba(26, 212, 193, 0.55);
}

@keyframes chart-ex-feedback-attention {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(26, 212, 193, 0.45);
  }
  40% {
    transform: scale(1.06);
    box-shadow: 0 0 0 10px rgba(26, 212, 193, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(26, 212, 193, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart-ex-feedback-badge.is-attention-pulse,
  .trade-feedback-badge.is-attention-pulse {
    animation: none;
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
  }
}

.chart-ex-feedback-note {
  margin: 0;
  font-size: 0.9rem;
}

.modal-chart-ex-review {
  max-width: min(95vw, 720px);
  width: min(95vw, 720px);
}

.chart-ex-review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .chart-ex-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.chart-ex-review-card {
  display: flex;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
}

.chart-ex-review-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.chart-ex-redo-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.chart-ex-extra-block h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.chart-ex-extra-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.chart-ex-extra-row .form-input {
  flex: 1 1 180px;
  min-width: 0;
}

.chart-ex-extra-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chart-ex-extra-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.1);
}

.chart-ex-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chart-ex-review-actions .btn {
  flex: 1 1 160px;
}

.chart-ex-queue-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.chart-ex-queue-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

.chart-ex-lightbox__content {
  max-width: min(96vw, 900px);
  width: min(96vw, 900px);
}

.chart-ex-lightbox__body {
  padding: 0 1rem 1rem;
}

.chart-ex-lightbox__body img {
  display: block;
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
}

@media (max-width: 480px) {
  .chart-ex-slot {
    flex-direction: column;
  }

  .chart-ex-slot__media,
  .chart-ex-thumb,
  .chart-ex-thumb--empty {
    width: 100%;
    height: 160px;
  }

  .chart-ex-slot__actions {
    padding-right: 0;
    padding-bottom: 0;
  }

  .chart-ex-submit-btn,
  .chart-ex-review-actions .btn {
    width: 100%;
  }
}

/* ===== Psico-Gym ===== */
.psico-gym-lead {
  text-align: center;
  color: var(--text-secondary);
  max-width: 560px;
  margin: -2px auto 28px;
  font-size: 0.92rem;
  line-height: 1.55;
}
#psicoGymPanel {
  min-width: 0;
}
.psico-gym-hub {
  min-width: 0;
}
.psico-gym-hub-body {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
}
.psico-gym-stats-backdrop {
  display: none;
}
.psico-gym-stats-fab {
  display: none;
}
.psico-gym-stats-aside {
  position: sticky;
  top: 12px;
  align-self: start;
  margin: 0;
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
.psico-gym-stats-aside.card:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}
.psico-gym-stats-aside__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.psico-gym-stats-aside__top h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.psico-gym-stats-aside__close {
  display: none;
}
.psico-gym-stats-aside__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.psico-gym-machines {
  min-width: 0;
}
.psico-gym-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
}
.psico-gym-machine-card {
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 16px 16px;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  font: inherit;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.22),
    0 14px 32px rgba(0, 0, 0, 0.18);
}
.psico-gym-machine-card:hover {
  border-color: rgba(26, 212, 193, 0.4);
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 10px 24px rgba(0, 0, 0, 0.32),
    0 22px 44px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(26, 212, 193, 0.12);
}
.psico-gym-machine-card:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}
.psico-gym-machine-card__top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  min-width: 0;
}
.psico-gym-machine-card__title {
  position: relative;
  display: inline-block;
  margin: 0;
  max-width: 100%;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.35;
  text-align: center;
}
.psico-gym-machine-card__title-text {
  display: inline-block;
}
.psico-gym-machine-card__info {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: help;
  font: inherit;
  z-index: 2;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.psico-gym-machine-card__info:hover,
.psico-gym-machine-card__info:focus-visible,
.psico-gym-machine-card__info.is-tip-open {
  color: var(--accent-cyan);
  border-color: rgba(26, 212, 193, 0.55);
  background: rgba(26, 212, 193, 0.1);
  outline: none;
}
.psico-gym-machine-card__info-glyph {
  font-size: 0.72rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
}
.psico-gym-machine-card__info-tip {
  position: absolute;
  right: 0;
  left: auto;
  bottom: calc(100% + 8px);
  transform: none;
  width: max(220px, 100%);
  min-width: 180px;
  max-width: min(280px, 70vw);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(26, 212, 193, 0.35);
  background: var(--bg-elevated);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 5;
}
.psico-gym-machine-card__info-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 6px;
  left: auto;
  transform: none;
  border: 6px solid transparent;
  border-top-color: rgba(26, 212, 193, 0.35);
}
.psico-gym-machine-card__info:hover .psico-gym-machine-card__info-tip,
.psico-gym-machine-card__info:focus-visible .psico-gym-machine-card__info-tip,
.psico-gym-machine-card__info.is-tip-open .psico-gym-machine-card__info-tip {
  opacity: 1;
  visibility: visible;
}
.psico-gym-card-badge {
  flex-shrink: 0;
  align-self: center;
  margin-top: 10px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.psico-gym-card-badge--ok {
  background: rgba(26, 212, 193, 0.12);
  border-color: rgba(26, 212, 193, 0.35);
  color: var(--accent-cyan);
}
.psico-gym-machine-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  text-align: center;
  margin-top: auto;
}
.psico-gym-machine-card__meta strong {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.85rem;
}
.psico-gym-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.psico-gym-stat {
  text-align: center;
  padding: 12px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.psico-gym-stat__value {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: -0.02em;
}
.psico-gym-stat__label {
  display: block;
  margin-top: 5px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  line-height: 1.3;
}
.psico-gym-stats__dates {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.psico-gym-stats__dates strong {
  color: var(--text-secondary);
  font-weight: 600;
}
.psico-gym-loading,
.psico-gym-error {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-secondary);
}
.psico-gym-error {
  color: var(--negative);
}

@media (min-width: 900px) {
  .psico-gym-stats-fab {
    display: none !important;
  }
  .psico-gym-stats-backdrop {
    display: none !important;
  }
  .psico-gym-stats-aside__close {
    display: none !important;
  }
  .psico-gym-stats-aside {
    max-height: none;
    overflow: visible;
  }
  .psico-gym-stats-aside__body {
    overflow: visible;
  }
  .psico-gym-stats__dates {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 899px) {
  .psico-gym-hub-body {
    display: block;
  }

  .psico-gym-stats-fab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: fixed;
    left: max(0px, env(safe-area-inset-left, 0px));
    top: 50%;
    top: 50svh;
    transform: translateY(-50%);
    z-index: 1100;
    min-width: 44px;
    padding: 8px 10px 8px 8px;
    margin: 0;
    border: 1px solid rgba(26, 212, 193, 0.45);
    border-left: none;
    border-radius: 0 22px 22px 0;
    background: var(--bg-elevated);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .psico-gym-stats-fab:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(26, 212, 193, 0.08);
  }

  .psico-gym-stats-fab.is-context-hidden,
  .psico-gym-stats-fab[hidden] {
    display: none !important;
  }

  .psico-gym-stats-fab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
  }

  .psico-gym-stats-fab__icon svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  .psico-gym-stats-fab__meta {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-cyan);
    line-height: 1.1;
  }

  .psico-gym-stats-aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 88vw);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    z-index: 1200;
    margin: 0;
    border-radius: 0;
    padding: 16px 14px 20px;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    transform: translate3d(-110%, 0, 0);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .psico-gym-stats-aside.card:hover {
    transform: translate3d(-110%, 0, 0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }

  .psico-gym-hub-body.is-drawer-open .psico-gym-stats-aside,
  .psico-gym-hub-body.is-drawer-open .psico-gym-stats-aside.card:hover {
    transform: translate3d(0, 0, 0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }

  .psico-gym-stats-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .psico-gym-hub-body.is-drawer-open .psico-gym-stats-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .psico-gym-stats-aside__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -8px -10px -8px 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--accent-cyan);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
  }

  .psico-gym-stats-aside__close:hover,
  .psico-gym-stats-aside__close:focus-visible {
    background: rgba(26, 212, 193, 0.12);
    outline: none;
  }

  .psico-gym-stats-aside__close-chevron {
    display: block;
    width: 10px;
    height: 10px;
    border-left: 2px solid var(--accent-cyan);
    border-top: 2px solid var(--accent-cyan);
    transform: rotate(-45deg);
    margin-left: 3px;
  }

  .psico-gym-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .psico-gym-grid {
    grid-template-columns: 1fr;
  }

  .psico-gym-machines {
    width: 100%;
  }
}

@media (max-width: 899px) and (min-width: 520px) {
  .psico-gym-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .psico-gym-stats-aside,
  .psico-gym-stats-backdrop {
    transition: none;
  }
}

/* Modal fullscreen — X vía .modal-overlay-close (mismo stacking que el resto de modales) */
.psico-gym-modal-overlay.modal-overlay {
  inset: 0;
  padding: 0;
  height: 100dvh;
  align-items: stretch;
  justify-content: stretch;
  background: var(--bg-app);
  z-index: 1000;
}
.psico-gym-modal-overlay > .modal-overlay-close {
  z-index: 5;
  pointer-events: auto;
}
.psico-gym-modal.modal-content,
.psico-gym-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-app);
}
.psico-gym-modal__chrome {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 68px 10px max(16px, env(safe-area-inset-left));
  padding-top: max(10px, calc(env(safe-area-inset-top) + 6px));
  background: linear-gradient(180deg, #262626 0%, var(--bg-elevated) 100%);
  border-bottom: 1px solid var(--border);
}
.psico-gym-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
}
.psico-gym-modal__header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.psico-gym-modal__subtabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border);
}
.psico-gym-modal__subtabs-sep {
  display: none;
}
.psico-gym-subtab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.psico-gym-subtab.is-active {
  color: #0F1211;
  background: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(26, 212, 193, 0.35);
}
.psico-gym-subtab:hover:not(.is-active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 720px) {
  .psico-gym-modal-overlay > .modal-overlay-close {
    width: 32px;
    height: 32px;
    font-size: 16px;
    top: max(8px, calc(env(safe-area-inset-top) + 6px));
    right: max(10px, env(safe-area-inset-right));
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .psico-gym-modal__chrome {
    gap: 10px;
    padding: 8px 52px 8px max(12px, env(safe-area-inset-left));
    padding-top: max(8px, calc(env(safe-area-inset-top) + 4px));
  }
  .psico-gym-modal__header h3 {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
  }
  .psico-gym-subtab {
    font-size: 0.72rem;
    padding: 6px 11px;
    letter-spacing: 0.03em;
  }
}
.psico-gym-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg-app);
}
.psico-gym-pane {
  flex: 1;
  min-height: 0;
  display: none;
  flex-direction: column;
  position: relative;
}
.psico-gym-pane.is-active {
  display: flex;
}
.psico-gym-machine-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--bg-app);
}
.psico-gym-tutorial-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
  border: none;
  border-radius: 0;
  color: var(--text-secondary);
  padding: 32px 24px;
  background: var(--bg-app);
}
.psico-gym-tutorial-placeholder p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.psico-gym-tutorial-placeholder__hint {
  margin-top: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--text-muted);
}
.psico-gym-tutorial-video {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px;
  min-height: 0;
  box-sizing: border-box;
}
.psico-gym-tutorial-video .lesson-content-video-wrap {
  width: min(960px, 100%);
  margin: 0 auto;
}
.psico-gym-tutorial-video .lesson-content-video-shell {
  width: 100%;
  max-height: calc(100dvh - 140px);
}
/* No forzar estilos nativos del <video>: el shell/controles de lección mandan */
.psico-gym-tutorial-video video.lesson-content-video {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  border: none;
  background: #000;
}

/* Qtracker upload + lesson audio + profile sections */
.qtracker-upload-panel,
.qtracker-upload-root,
.qtracker-staff-panel {
  margin: 1rem 0;
}
.qtracker-upload-title,
.qtracker-tutor-note {
  text-align: center;
}
.qtracker-dropzone {
  border: 1px dashed var(--border-color, #444);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
  background: rgba(255,255,255,0.03);
  text-align: center;
}
.qtracker-dropzone-main {
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
}
.qtracker-hint {
  margin: 0;
  text-align: center;
}
.qtracker-dropzone.is-dragover {
  border-color: var(--accent, #1AD4C1);
  background: rgba(26, 212, 193, 0.08);
}
.qtracker-upload-status {
  text-align: center;
}
.qtracker-followup-note {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.45;
}
.qtracker-mensajes-link {
  color: var(--accent-cyan, #1AD4C1);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.qtracker-mensajes-link:hover,
.qtracker-mensajes-link:focus-visible {
  color: var(--accent, #1AD4C1);
}
.qtracker-file-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.qtracker-file-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.qtracker-file-item.is-uploaded .qtracker-file-status { color: #1AD4C1; }
.qtracker-file-item.is-missing .qtracker-file-status { opacity: 0.45; }
.qtracker-file-name { flex: 1; font-family: ui-monospace, monospace; font-size: 0.9em; }
.qtracker-file-actions { margin-left: auto; }
.qtracker-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #e25555;
  border-radius: 6px;
  background: transparent;
  color: #e25555;
  cursor: pointer;
}
.qtracker-delete-btn:hover,
.qtracker-delete-btn:focus-visible {
  background: rgba(226, 85, 85, 0.12);
  outline: none;
}
.qtracker-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.qtracker-trash-icon {
  display: block;
}
.lesson-audio-player {
  margin: 0.85rem auto 1.35rem;
  max-width: 36rem;
  text-align: center;
}
.lesson-audio-title {
  margin: 0 0 0.55rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary, inherit);
}
.lesson-audio-list {
  margin: 0.5rem auto 0;
  max-width: 40rem;
}
.lesson-audio-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.lesson-content-audio {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: block;
  margin: 0;
}
.lesson-content-audio::-webkit-media-controls-download-button,
.lesson-content-audio::-internal-media-controls-download-button {
  display: none !important;
}
.lesson-audio-download-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid var(--border-color, rgba(255,255,255,0.22));
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-primary, #f2e8cf);
  cursor: pointer;
}
.lesson-audio-download-btn:hover,
.lesson-audio-download-btn:focus-visible {
  border-color: var(--accent, #1AD4C1);
  color: var(--accent, #1AD4C1);
  outline: none;
}
.lesson-audio-download-icon {
  display: block;
}
.lesson-content--perfil .lesson-content-intro {
  margin-bottom: 1.5rem;
}
.lesson-content-subtitle--center,
.lesson-content-text--center {
  text-align: center;
}
.lesson-content--perfil .lesson-content-subtitle {
  margin-top: 1.35rem;
}
.lesson-content--perfil .lesson-content-heading {
  margin: 1rem 0 0.45rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, inherit);
}
.lesson-content--perfil .lesson-content-list {
  margin: 0.35rem 0 1rem;
  padding-left: 1.25rem;
  text-align: left;
}
.lesson-content--perfil .lesson-content-list--center {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.lesson-content--perfil .lesson-profile-section {
  margin: 1.75rem 0 2rem;
}
.lesson-content--perfil .lesson-content-shared {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.lesson-profile-section[hidden] { display: none !important; }
.curso-player-qtracker-wait {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  text-align: center;
  border-left: none;
}
.estudiante-qtracker-host,
.usuarios-qtracker-section {
  margin: 1rem 0 1.5rem;
}