/* MODALES V3 - LIMPIEZA REAL 2026-10-05
   Unifica los dos sistemas de modal del proyecto (#modal y .lesson-modal).
   No se crean marcos/tablas artificiales: se conserva el contenido original.
*/
html body .modal-bg,
html body .lesson-modal,
html body .school-modal{
  position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important;
  min-height:100vh!important; padding:16px!important; box-sizing:border-box!important;
  display:none!important; place-items:center!important; align-items:center!important; justify-content:center!important;
  background:rgba(3,7,18,.88)!important; backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important; z-index:100001!important;
}
html body .modal-bg.show,
html body .lesson-modal.show,
html body .school-modal.show{display:flex!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important}

html body .modal-bg .modal,
html body .lesson-modal .lesson-dialog,
html body .school-modal .school-dialog,
html body .lesson-dialog{
  width:min(1120px,96vw)!important; max-width:1120px!important;
  max-height:min(90dvh,900px)!important; min-height:0!important; height:auto!important;
  margin:auto!important; padding:0!important; overflow:hidden!important; position:relative!important;
  box-sizing:border-box!important; display:flex!important; flex-direction:column!important;
  background:linear-gradient(145deg,#0b1628 0%,#121d33 52%,#211332 100%)!important;
  color:#edf5ff!important; border:3px solid #57e5ff!important;
  border-radius:24px!important; box-shadow:0 0 0 2px rgba(255,105,200,.16),0 30px 100px rgba(0,0,0,.8)!important;
}

/* Legacy modal */
html body .modal-bg #modalTitle{
  position:relative!important; z-index:2!important; flex:0 0 auto!important;
  margin:0!important; padding:20px 68px 16px 24px!important;
  background:linear-gradient(90deg,#132d4d,#321a4c)!important;
  color:#ffe58c!important; border-bottom:3px solid #ffd45a!important;
  font-weight:900!important; text-shadow:none!important;
}
html body .modal-bg #modalBody{
  position:relative!important; z-index:2!important; flex:1 1 auto!important; min-height:0!important;
  width:100%!important; max-height:none!important; padding:20px!important;
  overflow-y:auto!important; overflow-x:hidden!important; box-sizing:border-box!important;
  background:#0b1628!important; color:#eaf2ff!important;
}
/* If an old wrapper was produced, make it neutral; V3 also removes its creator in JS. */
html body .modal-bg #modalBody .modal-table-frame{display:block!important; background:#0b1628!important; border:0!important; box-shadow:none!important; border-radius:0!important}
html body .modal-bg #modalBody .modal-table-caption{display:none!important}
html body .modal-bg #modalBody .modal-table-content{padding:0!important; background:transparent!important}

/* Lesson modal */
html body .lesson-dialog-inner{
  position:relative!important; z-index:2!important; flex:1 1 auto!important; min-height:0!important;
  overflow-y:auto!important; overflow-x:hidden!important; padding:30px!important;
  background:transparent!important; color:#eaf2ff!important;
}
html body .dialog-kicker{color:#9cecff!important}
html body .dialog-kicker span{background:#10253d!important; border:1px solid #2f7891!important; color:#9cecff!important}
html body .dialog-title{color:#ffe38b!important; background:linear-gradient(90deg,#132d4d,#321a4c)!important; border-bottom:3px solid #ffd45a!important; border-radius:14px!important; padding:14px 18px!important; margin:0 48px 16px 0!important}

/* Universal content readability */
html body .modal-bg #modalBody,
html body .modal-bg #modalBody p,
html body .modal-bg #modalBody li,
html body .modal-bg #modalBody span,
html body .modal-bg #modalBody strong,
html body .modal-bg #modalBody small,
html body .modal-bg #modalBody label,
html body .modal-bg #modalBody div,
html body .lesson-dialog-inner,
html body .lesson-dialog-inner p,
html body .lesson-dialog-inner li,
html body .lesson-dialog-inner span,
html body .lesson-dialog-inner strong,
html body .lesson-dialog-inner small,
html body .lesson-dialog-inner label,
html body .lesson-dialog-inner div{color:#eaf2ff!important;text-shadow:none!important}

html body .modal-bg #modalBody h1,
html body .modal-bg #modalBody h2,
html body .modal-bg #modalBody h3,
html body .modal-bg #modalBody h4,
html body .lesson-dialog-inner h1,
html body .lesson-dialog-inner h2,
html body .lesson-dialog-inner h3,
html body .lesson-dialog-inner h4{color:#ffe58c!important}

html body .modal-bg #modalBody .modal-card,
html body .modal-bg #modalBody .rule-card,
html body .modal-bg #modalBody .vocab-card,
html body .modal-bg #modalBody .modal-phrase,
html body .modal-bg #modalBody .memory-single,
html body .modal-bg #modalBody .practice-box,
html body .modal-bg #modalBody .feedback-panel,
html body .modal-bg #modalBody .game-q,
html body .lesson-dialog-inner .modal-card,
html body .lesson-dialog-inner .rule-card,
html body .lesson-dialog-inner .vocab-card,
html body .lesson-dialog-inner .modal-phrase,
html body .lesson-dialog-inner .practice-box,
html body .lesson-dialog-inner .feedback-panel,
html body .lesson-dialog-inner .game-q{
  background:linear-gradient(145deg,#12233a,#211733)!important;
  color:#eaf2ff!important; border:2px solid #2c6b83!important; border-radius:16px!important;
}

html body .modal-bg #modalBody button,
html body .lesson-dialog-inner button,
html body .modal-bg #modalBody a.btn,
html body .lesson-dialog-inner a.course-btn{
  background:linear-gradient(145deg,#1a3150,#3a214d)!important;
  color:#ffffff!important; border:2px solid #55dff8!important;
  border-radius:12px!important; box-shadow:3px 4px 0 rgba(0,0,0,.35)!important;
  text-shadow:none!important;
}
html body .modal-bg #modalBody button:hover,
html body .lesson-dialog-inner button:hover{background:linear-gradient(145deg,#245b7e,#63305f)!important;color:#fff2ad!important}

html body .modal-bg #modalBody input,
html body .modal-bg #modalBody select,
html body .modal-bg #modalBody textarea,
html body .lesson-dialog-inner input,
html body .lesson-dialog-inner select,
html body .lesson-dialog-inner textarea{
  background:#071322!important; color:#ffffff!important; border:2px solid #3e7694!important;
}

html body .close,
html body .lesson-close,
html body .school-close{
  position:absolute!important; z-index:20!important; right:12px!important; top:12px!important;
  width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important;
  padding:0!important; border:2px solid #ffd45a!important; border-radius:12px!important;
  background:#101c32!important; color:#ffffff!important; font-size:20px!important;
}

@media(max-width:700px){
  html body .modal-bg,html body .lesson-modal,html body .school-modal{padding:8px!important}
  html body .modal-bg .modal,html body .lesson-modal .lesson-dialog,html body .school-modal .school-dialog{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:94dvh!important;border-radius:18px!important}
  html body .lesson-dialog-inner{padding:20px 14px!important}
  html body .modal-bg #modalBody{padding:14px!important}
}