:root{
  --course-gap:clamp(8px,1.1vw,18px);
  --course-pad:clamp(8px,1.1vw,18px);
  --course-radius:clamp(12px,1.2vw,18px);
  --header-h:clamp(50px,6.2vh,64px);
  --footer-h:clamp(26px,3.5vh,34px);
}

/* BASE RESPONSIVA COMPARTIDA */
html,body{width:100%;height:100%;margin:0}
body{overflow:hidden}
.course-shell{
  width:100%;
  height:100vh;
  height:100dvh;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}

.topbar{
  min-height:var(--header-h) !important;
  padding:clamp(7px,.8vw,12px) clamp(10px,1.2vw,18px) !important;
  gap:clamp(8px,1vw,16px) !important;
}
.personalized-btn{
  font-size:clamp(9px,.82vw,13px) !important;
  padding:clamp(7px,.65vw,10px) clamp(9px,.85vw,13px) !important;
}
.lesson-name{font-size:clamp(9px,.8vw,13px) !important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-btn{width:clamp(35px,2.8vw,42px) !important;height:clamp(35px,2.8vw,42px) !important;font-size:clamp(17px,1.45vw,21px) !important}
.menu-panel{max-height:min(72dvh,650px) !important;overflow-y:auto !important}

.lesson-layout{
  min-width:0 !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:var(--course-gap) !important;
  padding:var(--course-pad) !important;
  overflow:hidden !important;
}

/* Ambos lados siempre ocupan exactamente su mitad */
.lesson-layout > *{min-width:0 !important;min-height:0 !important;width:100% !important;height:100% !important}
.sim-panel,.visual-panel,.video-panel{
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  border-radius:var(--course-radius) !important;
}

.video-panel{display:grid !important;grid-template-rows:minmax(0,1fr) auto !important;overflow:hidden !important}
.video-frame{min-width:0 !important;min-height:0 !important;overflow:hidden !important}
.video-frame video{display:block !important;width:100% !important;height:100% !important;object-fit:contain !important}
.navbar{padding:clamp(7px,.8vw,12px) !important;gap:clamp(6px,.65vw,10px) !important}
.nav-btn,.next-btn{font-size:clamp(9px,.82vw,13px) !important;padding:clamp(8px,.72vw,11px) clamp(10px,1vw,15px) !important}

.disclaimer{
  min-height:var(--footer-h) !important;
  padding:clamp(4px,.45vw,7px) clamp(10px,1.2vw,18px) !important;
  font-size:clamp(7px,.66vw,10.5px) !important;
}

/* INTRODUCCIÓN */
.visual-panel{overflow:hidden !important;padding:clamp(7px,.9vw,14px) !important}
.visual-panel > img{display:block !important;width:100% !important;height:100% !important;object-fit:contain !important}

/* CLASES CON DOS BLOQUES DENTRO DE LA MITAD IZQUIERDA */
.sim-panel{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
  gap:clamp(5px,.65vw,10px) !important;
  padding:clamp(5px,.65vw,10px) !important;
  overflow:hidden !important;
}
.sim-panel > *{min-width:0 !important;min-height:0 !important;width:100% !important;height:100% !important}

/*
  La imagen y las capas superpuestas comparten EXACTAMENTE el mismo rectángulo.
  Se usa fill deliberadamente: puede estirar un poco la captura, pero evita que
  BUY/SELL/canvas se desalineen con zoom o con distintas proporciones de viewport.
*/
.phone-mask,.info-mask{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.phone-mask > img,.info-mask > img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:fill !important;
  object-position:center !important;
}
#chartCanvas{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* Clase 1: escala tipográfica dentro de la máscara */
.operation-card{
  padding:clamp(6px,.75vw,12px) !important;
  border-radius:clamp(8px,.9vw,14px) !important;
}
.op-title{font-size:clamp(8px,.72vw,12px) !important;margin-bottom:clamp(4px,.55vw,9px) !important}
.op-type{font-size:clamp(9px,.88vw,13.5px) !important}
.op-pl{font-size:clamp(10px,.98vw,15px) !important}
.awaiting{font-size:clamp(8px,.78vw,12px) !important}
.trade-list{gap:clamp(4px,.5vw,8px) !important}
.trade-item{padding:clamp(5px,.6vw,9px) clamp(6px,.7vw,10px) !important}
.trade-index{font-size:clamp(6px,.58vw,9px) !important}

/* Clase 2: el panel de fuerza se comprime sin romper el 50/50 */
.control-panel{
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  padding:clamp(6px,.85vw,14px) !important;
  gap:clamp(5px,.72vw,12px) !important;
  overflow:hidden !important;
}
.control-title{font-size:clamp(8px,.82vw,13px) !important}
.counter-grid{gap:clamp(5px,.65vw,10px) !important}
.counter-row{
  grid-template-columns:minmax(0,1fr) clamp(24px,2.2vw,34px) clamp(24px,2.2vw,34px) clamp(25px,2.3vw,34px) !important;
  gap:clamp(3px,.45vw,7px) !important;
  padding:clamp(5px,.7vw,10px) !important;
}
.counter-label{font-size:clamp(7px,.78vw,13px) !important;overflow:hidden;text-overflow:ellipsis}
.counter-value{font-size:clamp(10px,1.05vw,18px) !important}
.arrow-btn{width:100% !important;height:clamp(24px,2.2vw,34px) !important;font-size:clamp(12px,1.15vw,18px) !important}
.bars-area{min-height:0 !important;height:100% !important;padding:clamp(5px,.75vw,12px) clamp(4px,.5vw,8px) !important;gap:clamp(5px,.75vw,12px) !important}
.bar-label{font-size:clamp(6px,.62vw,10px) !important}
.explanation{min-height:0 !important;padding:clamp(7px,.75vw,12px) !important;font-size:clamp(7px,.7vw,11px) !important}
.explanation .headline{font-size:clamp(8px,.82vw,13px) !important}

/* Zoom alto / viewport CSS estrecho: seguimos 50/50 y reducimos densidad */
@media (max-width:1050px) and (orientation:landscape){
  :root{--course-gap:8px;--course-pad:8px}
  .topbar{min-height:46px !important}
  .sim-panel{gap:5px !important;padding:5px !important}
  .control-panel{padding:6px !important;gap:5px !important}
  .explanation{line-height:1.25 !important}
}

@media (max-height:650px) and (orientation:landscape){
  .topbar{min-height:44px !important}
  .personalized-btn{padding:6px 8px !important}
  .navbar{padding:6px !important}
  .disclaimer{min-height:24px !important}
  .control-panel{padding:5px !important;gap:4px !important}
  .counter-row{padding:4px !important}
}

/* Vertical móvil: mantener la política actual de rotación */
@media (max-width:700px) and (orientation:portrait){
  .course-shell{filter:blur(7px);pointer-events:none}
}

/* INTRODUCCIÓN INTERACTIVA: no estirar logos internos */
.visual-panel .action-stage{width:min(100%,560px) !important;height:auto !important;max-height:100% !important}
.visual-panel .action-card{height:auto !important;max-height:100% !important}
.visual-panel .action-logo{width:92px !important;height:92px !important;max-width:92px !important;max-height:92px !important;object-fit:contain !important}
.visual-panel .telegram-logo{width:108px !important;height:108px !important;max-width:108px !important;max-height:108px !important;border-radius:50% !important;padding:0 !important}
.visual-panel .broker-logo{width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;object-fit:contain !important}
.visual-panel .broker-logo-box{width:40px !important;height:40px !important;flex:0 0 40px !important}
@media(max-width:950px) and (orientation:landscape){
  .visual-panel .action-logo{width:72px !important;height:72px !important;max-width:72px !important;max-height:72px !important}
  .visual-panel .telegram-logo{width:82px !important;height:82px !important;max-width:82px !important;max-height:82px !important}
  .visual-panel .broker-logo-box{width:31px !important;height:31px !important;flex-basis:31px !important}
}

/* INTRODUCCIÓN: durante reproducción el contenido pasa por ENCIMA del disclaimer.
   Se limita a .video-focus para no cambiar ninguna otra clase. */
.course-shell.video-focus .disclaimer{
  position:relative !important;
  z-index:0 !important;
}

.course-shell.video-focus .lesson-layout{
  position:relative !important;
  z-index:10 !important;
}

.course-shell.video-focus .lesson-layout > .visual-panel,
.course-shell.video-focus .lesson-layout > .video-panel{
  position:relative !important;
  z-index:11 !important;
}

/* ========================================================================== 
   INTRODUCCIÓN — MODO VIDEO EN REPRODUCCIÓN
   Solo se activa cuando 0_introduccion.html añade .video-focus al course-shell.
   Al pausar el video esa clase se elimina y vuelve automáticamente al 50/50 base.
   ========================================================================== */
.course-shell.video-focus .lesson-layout{
  grid-template-columns:minmax(0,2fr) minmax(0,3fr) !important;
  gap:6px !important;
  padding:12px 0 12px 12px !important;
  overflow:visible !important;
}

.course-shell.video-focus .lesson-layout > .visual-panel{
  padding:12px !important;
}

.course-shell.video-focus .visual-panel .action-stage{
  width:min(88%,500px) !important;
  transform:scale(.90) !important;
  transform-origin:center !important;
}

.course-shell.video-focus .lesson-layout > .video-panel{
  height:calc(100% + 34px) !important;
  align-self:start !important;
  position:relative !important;
  z-index:12 !important;
  border-radius:18px 0 0 0 !important;
  overflow:hidden !important;
  box-shadow:0 18px 52px rgba(0,0,0,.38) !important;
}

.course-shell.video-focus .video-panel .video-frame{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

.course-shell.video-focus .video-panel .video-frame video{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

.course-shell.video-focus .video-panel .navbar{
  position:absolute !important;
  right:16px !important;
  bottom:52px !important;
  z-index:30 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  pointer-events:none !important;
}

.course-shell.video-focus .video-panel .next-btn{
  pointer-events:auto !important;
  font-size:19.5px !important;
  line-height:1.1 !important;
  padding:11px 18px !important;
  box-shadow:0 10px 28px rgba(37,99,235,.34) !important;
}

/* También aumenta el texto de Avanzar en el formato normal de esta introducción. */
.lesson-layout > .visual-panel + .video-panel .next-btn{
  font-size:19.5px !important;
  line-height:1.1 !important;
}

@media(max-width:950px) and (orientation:landscape){
  .course-shell.video-focus .lesson-layout{
    grid-template-columns:minmax(0,2fr) minmax(0,3fr) !important;
    gap:5px !important;
    padding:6px 0 6px 6px !important;
  }
  .course-shell.video-focus .lesson-layout > .visual-panel{
    padding:6px !important;
  }
  .course-shell.video-focus .visual-panel .action-stage{
    width:92% !important;
    transform:scale(.86) !important;
  }
  .course-shell.video-focus .lesson-layout > .video-panel{
    height:calc(100% + 27px) !important;
    border-radius:14px 0 0 0 !important;
  }
  .course-shell.video-focus .video-panel .navbar{
    right:10px !important;
    bottom:46px !important;
  }
  .course-shell.video-focus .video-panel .next-btn,
  .lesson-layout > .visual-panel + .video-panel .next-btn{
    font-size:16.5px !important;
  }
}