/* Intellego · Ejercicio de vídeo compacto v5
   Mantiene reproductor, respuesta y controles en el mismo viewport. */

.video-page {
  --video-gap: clamp(7px, 1.4vw, 14px);
  --video-surface: #101722;
  --video-surface-2: #090e16;
  --video-line: rgba(255,255,255,.10);
  --video-muted: #8f9caf;
  display: flex;
  flex-direction: column;
  height: var(--app-height);
  min-height: 0;
  overflow: hidden;
  background: #070b12;
}

.video-page .video-header {
  flex: 0 0 auto;
  min-height: calc(var(--app-safe-top) + 52px);
  padding:
    var(--app-safe-top)
    max(8px, var(--app-safe-right))
    0
    max(8px, var(--app-safe-left));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(10,14,22,.96);
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
  z-index: 20;
}

.video-page .video-header-btn {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  color: #eef4fc;
  display: grid;
  place-items: center;
}
.video-page .video-header-btn:active { background: rgba(43,140,255,.22); }
.video-page .video-header-btn .material-icons { font-size: 22px; }

.video-page .video-header-copy {
  min-width: 0;
  text-align: center;
}
.video-page .video-header-copy h1 {
  margin: 0;
  overflow: hidden;
  color: #f5f8fc;
  font-size: clamp(.94rem, 3.5vw, 1.08rem);
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-page .video-header-copy span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #8190a5;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-page .video-page-content {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  min-height: 0;
  overflow: hidden !important;
  padding:
    var(--video-gap)
    max(var(--video-gap), var(--app-safe-right))
    calc(var(--video-gap) + var(--app-safe-bottom))
    max(var(--video-gap), var(--app-safe-left));
}

.video-page .video-workspace {
  width: min(100%, 1260px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr);
  gap: var(--video-gap);
  overflow: hidden;
}

.video-page .video-stage,
.video-page .exercise-dock {
  min-width: 0;
  min-height: 0;
}

.video-page .video-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 48px;
  gap: 7px;
}

.video-page .embed-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 17px;
  background: #000;
  box-shadow: 0 18px 46px rgba(0,0,0,.36);
}
.video-page #video-frame,
.video-page .embed-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.video-page .video-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
}

.video-page .player-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 14;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.46));
  color: white;
  display: grid;
  place-items: center;
}
.video-page .player-start-overlay .material-icons {
  width: clamp(52px, 9vw, 68px);
  height: clamp(52px, 9vw, 68px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #2ac7db);
  display: grid;
  place-items: center;
  font-size: clamp(31px, 5vw, 40px);
  box-shadow: 0 12px 34px rgba(43,140,255,.38);
}
.video-page .player-start-overlay:active .material-icons { transform: scale(.96); }
.video-page .player-start-overlay[hidden] { display: none !important; }

.video-page .phrase-toolbar {
  min-height: 48px;
  padding: 5px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--video-line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.video-page .phrase-nav-btn {
  width: 40px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: #151c27;
  color: #dce5f1;
  display: grid;
  place-items: center;
}
.video-page .phrase-nav-btn:active { background: rgba(43,140,255,.23); }
.video-page .phrase-progress { min-width: 0; text-align: center; }
.video-page .phrase-progress > span {
  display: block;
  overflow: hidden;
  color: #aeb9c9;
  font-size: .72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-page .phrase-progress-track {
  width: 100%;
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.video-page .phrase-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #32cbd8);
  transition: width .18s ease;
}

.video-page .exercise-dock {
  padding: clamp(10px, 1.8vw, 16px);
  display: grid;
  grid-template-rows: auto auto auto minmax(56px, 1fr);
  gap: 9px;
  overflow: hidden;
  border: 1px solid var(--video-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #111823, #0c111a);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
}

.video-page .exercise-dock-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.video-page .phrase-status {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.video-page .phrase-status > .material-icons {
  flex: 0 0 auto;
  color: #78b6ff;
  font-size: 20px;
}
.video-page #current-subtitle {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #b6c1d0;
  font-size: .78rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-page .assist-mode-badge {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255,193,82,.22);
  border-radius: 999px;
  background: rgba(255,193,82,.09);
  color: #ffd27b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 850;
}
.video-page .assist-mode-badge .material-icons { font-size: 18px; }

.video-page .answer-composer {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: stretch;
}
.video-page #user-input {
  width: 100%;
  min-width: 0;
  min-height: 78px;
  max-height: 126px;
  resize: none;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  outline: none;
  background: #080d15;
  color: #f2f6fb;
  font-size: 16px;
  line-height: 1.4;
}
.video-page #user-input::placeholder { color: #647185; }
.video-page #user-input:focus {
  border-color: rgba(43,140,255,.82);
  box-shadow: 0 0 0 3px rgba(43,140,255,.14);
}
.video-page #user-input:disabled { opacity: .60; }

.video-page .composer-check-btn {
  min-width: 108px;
  min-height: 100%;
  padding: 0 13px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(145deg, #1ca671, #16885d);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: .76rem;
  font-weight: 850;
}
.video-page .composer-check-btn .material-icons { font-size: 25px; }
.video-page .composer-check-btn:disabled { opacity: .38; }

.video-page .exercise-action-row {
  display: grid;
  grid-template-columns: minmax(105px, 1.3fr) minmax(84px, 1fr) 42px 42px;
  gap: 7px;
}
.video-page .exercise-action-row button {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .77rem;
  font-weight: 820;
}
.video-page .action-primary {
  border: 0;
  background: linear-gradient(105deg, var(--brand), #25bedb);
  color: white;
}
.video-page .action-secondary {
  border: 1px solid rgba(255,193,82,.22);
  background: rgba(255,193,82,.08);
  color: #ffd166;
}
.video-page .action-icon {
  width: 42px;
  padding: 0 !important;
  border: 1px solid var(--video-line);
  background: rgba(255,255,255,.035);
  color: #8794a7;
}
.video-page .exercise-action-row button:disabled { opacity: .38; }
.video-page .exercise-action-row button[hidden] { display: none !important; }

.video-page .feedback-output {
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  border: 1px solid var(--video-line);
  border-radius: 13px;
  background: #080d15;
  color: #aeb9c9;
  font-size: .86rem;
  line-height: 1.45;
}
.video-page .feedback-empty {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667388;
  text-align: center;
}
.video-page .word-chip {
  display: inline-block;
  min-width: 2em;
  margin: 2px 3px 2px 0;
  padding: .34em .64em;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #171d27;
  color: white;
  font-size: .90rem;
  font-weight: 750;
  text-align: center;
}
.video-page .word-chip.green { background: #168657; border-color: #33d99a; }
.video-page .word-chip.blue { background: #176fc0; border-color: #58adff; }
.video-page .word-chip.yellow { background: #a96d06; border-color: #ffd166; }
.video-page .word-chip.black { background: #171d27; }
.video-page .word-chip.reveal {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .10em;
}

/* Ajustes del ejercicio */
.exercise-settings-popup {
  --settings-safe-bottom: var(--app-safe-bottom, 0px);
  background: transparent !important;
  pointer-events: none;
}
.exercise-settings-popup .exercise-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
  pointer-events: auto;
}
.exercise-settings-popup .exercise-settings-shell {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 560px);
  max-height: calc(var(--app-height) - var(--app-safe-top) - 18px);
  padding: 9px 16px calc(var(--settings-safe-bottom) + 20px);
  overflow-y: auto;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.10);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #111722;
  box-shadow: 0 -22px 70px rgba(0,0,0,.58);
  pointer-events: auto;
}
.exercise-settings-popup .settings-handle { width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 999px; background: rgba(255,255,255,.18); }
.exercise-settings-popup .settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exercise-settings-popup .settings-head h2 { margin: 0; color: var(--text-1); font-size: 1.28rem; }
.exercise-settings-popup .settings-close { width: 42px; min-height: 42px; border: 0; border-radius: 12px; background: rgba(255,255,255,.06); color: white; display: grid; place-items: center; }
.exercise-settings-popup .settings-copy { margin: 9px 0 18px; color: #929eb0; line-height: 1.48; }
.exercise-settings-popup .settings-card { padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.035); }
.exercise-settings-popup .settings-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exercise-settings-popup .settings-label-row strong { color: #e8edf5; }
.exercise-settings-popup .settings-value { padding: 5px 9px; border-radius: 999px; background: rgba(43,140,255,.13); color: #86bdff; font-size: .76rem; font-weight: 900; }
.exercise-settings-popup input[type="range"] { width: 100%; margin: 20px 0 10px; accent-color: var(--brand); }
.exercise-settings-popup .settings-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; color: #6f7b8d; font-size: .67rem; text-align: center; }
.exercise-settings-popup .settings-description { min-height: 42px; margin: 14px 0 0; color: #bec7d4; font-size: .86rem; line-height: 1.45; }
.exercise-settings-popup .settings-note { display: flex; gap: 8px; margin: 14px 2px 0; color: #778396; font-size: .76rem; line-height: 1.4; }
.exercise-settings-popup .settings-note .material-icons { flex: 0 0 auto; font-size: 18px; color: #7fb8ff; }

.sabiasque-popup {
  max-height: min(58dvh, 520px);
  overflow-y: auto;
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.6;
}

/* Tablet y móvil: vídeo arriba y dock debajo, ambos siempre visibles. */
@media (max-width: 920px) {
  .video-page .video-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 42%) minmax(0, 58%);
  }
  .video-page .exercise-dock {
    padding: 9px;
    border-radius: 15px;
  }
  .video-page #user-input { min-height: 66px; max-height: 88px; }
}

@media (max-width: 520px) {
  .video-page { --video-gap: 6px; }
  .video-page .video-header {
    min-height: calc(var(--app-safe-top) + 48px);
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }
  .video-page .video-header-btn { width: 38px; height: 38px; min-height: 38px; }
  .video-page .video-workspace { grid-template-rows: minmax(138px, 39%) minmax(0, 61%); }
  .video-page .video-stage { grid-template-rows: minmax(0, 1fr) 43px; gap: 5px; }
  .video-page .embed-container { border-radius: 12px; }
  .video-page .phrase-toolbar { min-height: 43px; grid-template-columns: 38px minmax(0, 1fr) 38px; padding: 3px; }
  .video-page .phrase-nav-btn { width: 36px; height: 34px; min-height: 34px; }
  .video-page .exercise-dock { grid-template-rows: 36px auto 42px minmax(42px, 1fr); gap: 6px; }
  .video-page .assist-mode-badge { min-height: 34px; padding: 0 8px; }
  .video-page .assist-mode-badge span:last-child { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .video-page #user-input { min-height: 62px; max-height: 72px; padding: 10px 11px; }
  .video-page .composer-check-btn { min-width: 82px; padding: 0 8px; }
  .video-page .composer-check-btn span:last-child { display: none; }
  .video-page .exercise-action-row { grid-template-columns: minmax(94px, 1.3fr) minmax(72px, 1fr) 38px 38px; gap: 5px; }
  .video-page .exercise-action-row button { min-height: 38px; padding: 0 7px; }
  .video-page .action-icon { width: 38px; }
  .video-page .feedback-output { padding: 7px; font-size: .80rem; }
}

/* Con teclado: el vídeo se reduce, nunca desaparece; input y controles permanecen visibles. */
body.keyboard-open .video-page .video-header {
  min-height: calc(var(--app-safe-top) + 44px);
}
body.keyboard-open .video-page .video-header-copy span { display: none; }
body.keyboard-open .video-page .video-workspace {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(82px, 30%) minmax(0, 70%);
}
body.keyboard-open .video-page .video-stage {
  grid-template-rows: minmax(0, 1fr) 35px;
  gap: 4px;
}
body.keyboard-open .video-page .phrase-toolbar { min-height: 35px; padding: 1px 4px; }
body.keyboard-open .video-page .phrase-nav-btn { width: 32px; height: 31px; min-height: 31px; }
body.keyboard-open .video-page .exercise-dock {
  grid-template-rows: 30px auto 38px minmax(30px, 1fr);
  gap: 4px;
  padding: 6px;
}
body.keyboard-open .video-page .phrase-status > .material-icons { display: none; }
body.keyboard-open .video-page #current-subtitle { font-size: .70rem; }
body.keyboard-open .video-page .assist-mode-badge { min-height: 30px; }
body.keyboard-open .video-page #user-input {
  min-height: 52px;
  max-height: 58px;
  padding: 8px 10px;
}
body.keyboard-open .video-page .composer-check-btn { min-width: 70px; }
body.keyboard-open .video-page .exercise-action-row button { min-height: 34px; }
body.keyboard-open .video-page .feedback-output { min-height: 30px; max-height: 42px; }

@media (orientation: landscape) and (max-height: 580px) {
  .video-page .video-workspace {
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
    grid-template-rows: 1fr;
  }
  .video-page .video-stage { grid-template-rows: minmax(0, 1fr) 40px; }
  .video-page .exercise-dock { padding: 8px; gap: 6px; }
  .video-page #user-input { min-height: 56px; max-height: 68px; }
}

/* V6 · Popup promocional de apoyo */
.support-promo-popup {
  inset: 0 !important;
  width: 100% !important;
  height: var(--app-height, 100vh) !important;
  min-height: 0 !important;
  display: grid;
  place-items: center;
  padding: calc(var(--app-safe-top) + 18px) max(14px, var(--app-safe-right)) calc(var(--app-safe-bottom) + 18px) max(14px, var(--app-safe-left));
  background: transparent;
  overflow: hidden;
}
.support-promo-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 420px at 50% 20%, rgba(43,140,255,.2), transparent 65%),
    rgba(4,7,12,.86);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.support-promo-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(24px, 5vw, 38px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: linear-gradient(150deg, #17243a 0%, #0d141f 68%, #0a0e16 100%);
  color: #f7f9fd;
  text-align: center;
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
}
.support-promo-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border: 0 !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.07) !important;
  color: #dce5f1 !important;
  display: grid;
  place-items: center;
}
.support-promo-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 23px;
  background: linear-gradient(145deg, #ffe6aa, #ffb342);
  color: #211300;
  box-shadow: 0 16px 42px rgba(255,179,66,.22);
}
.support-promo-icon .material-icons { font-size: 39px !important; }
.support-promo-eyebrow {
  display: block;
  color: #83bfff !important;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.support-promo-card h2 {
  margin: 8px 0 12px;
  color: white !important;
  font-size: clamp(1.45rem, 5vw, 2rem);
  line-height: 1.12;
}
.support-promo-card p {
  max-width: 44ch;
  margin: 0 auto 24px;
  color: #c7d0de !important;
  font-size: .97rem;
  line-height: 1.58;
}
.support-promo-actions { display: grid; gap: 10px; }
.support-promo-primary,
.support-promo-secondary {
  min-height: 50px;
  border-radius: 14px !important;
  font-weight: 900;
}
.support-promo-primary {
  border: 0 !important;
  background: linear-gradient(100deg, #ffb642, #ff7d5f) !important;
  color: #211000 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.support-promo-secondary {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.045) !important;
  color: #e5ebf4 !important;
}
.video-finished-message {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 8px 4px 2px;
  text-align: center;
}
.video-finished-message > .material-icons {
  color: #ffd166 !important;
  font-size: 44px !important;
}
.video-finished-message strong { color: #fff; font-size: 1.12rem; }
.video-finished-message p { margin: 0; color: #bdc7d6; line-height: 1.45; }
.feedback-success {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #76e4b6;
  font-weight: 800;
}
.feedback-success .material-icons { color: #58dba6 !important; }