/* MODALES - CORRECCION DEFINITIVA 2026-10-05
   Este archivo se carga DESPUES de todos los demas estilos.
   Objetivo: ningun modal puede terminar con fondo blanco y texto blanco.
*/
html body.modal-open{overflow:hidden!important}

/* Capa */
html body .lesson-modal,
html body .modal-bg,
html body .school-modal{
  background:rgba(2,5,14,.90)!important;
  color:#f7fbff!important;
  opacity:1!important;
  visibility:visible!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

/* Contenedores principales */
html body .lesson-modal .lesson-dialog,
html body .modal-bg .modal,
html body .school-modal .school-dialog,
html body .lesson-dialog{
  background:linear-gradient(145deg,#07111f 0%,#111a2f 48%,#1d1230 100%)!important;
  color:#f7fbff!important;
  border:3px solid #62e7ff!important;
  border-radius:24px!important;
  box-shadow:0 0 0 2px rgba(255,104,196,.16),0 28px 90px rgba(0,0,0,.78)!important;
  text-shadow:none!important;
}

/* Todo lo que este dentro hereda colores legibles. */
html body .lesson-dialog *:not(button),
html body .modal *:not(button),
html body .school-dialog *:not(button){
  color:#f1f6ff!important;
  text-shadow:none!important;
}

html body .lesson-dialog h1,
html body .lesson-dialog h2,
html body .lesson-dialog h3,
html body .lesson-dialog h4,
html body .lesson-dialog h5,
html body .modal h1,
html body .modal h2,
html body .modal h3,
html body .modal h4,
html body .modal h5,
html body .school-dialog h1,
html body .school-dialog h2,
html body .school-dialog h3,
html body .school-dialog h4{
  color:#ffe38b!important;
}

html body .lesson-dialog p,
html body .lesson-dialog li,
html body .lesson-dialog small,
html body .lesson-dialog span,
html body .lesson-dialog div,
html body .modal p,
html body .modal li,
html body .modal small,
html body .modal span,
html body .modal div,
html body .school-dialog p,
html body .school-dialog li,
html body .school-dialog small,
html body .school-dialog span,
html body .school-dialog div{
  color:#e5edf8!important;
}

/* Encabezados y textos destacados */
html body .dialog-title,
html body #modalTitle{
  color:#ffffff!important;
  background:linear-gradient(90deg,#142c4d,#351a50)!important;
  border-bottom:3px solid #ffd45a!important;
  padding-bottom:10px!important;
}
html body .dialog-kicker span,
html body .school-modal-kicker{
  color:#8df3ff!important;
}
html body .dialog-lead,
html body .modal-note{
  background:#0d1b30!important;
  color:#eaf3ff!important;
  border:2px solid #2d6f88!important;
}
html body .modal-card,
html body .rule-card,
html body .vocab-card,
html body .modal-phrase,
html body .conversation-turn,
html body .practice-box,
html body .feedback-panel,
html body .game-q,
html body .modal-table-frame,
html body .school-content-card,
html body .school-question,
html body .school-feedback,
html body .school-modal-tip{
  background:linear-gradient(145deg,#101d31,#1b1630)!important;
  color:#edf5ff!important;
  border:2px solid rgba(98,231,255,.30)!important;
}
html body .modal-card p,
html body .rule-card p,
html body .vocab-card .es,
html body .modal-phrase .es,
html body .turn-translation,
html body .game-feedback,
html body .game-count{
  color:#d9e5f3!important;
}
html body .modal-card h4,
html body .rule-card h4,
html body .vocab-card .poq,
html body .modal-phrase .poq,
html body .modal-list b{
  color:#ffe8a6!important;
}

/* Listas, tablas y zonas de ejercicios */
html body .modal-list li,
html body .modal-table-content td,
html body .ve-section td,
html body .course-shell td{
  background:#0c1728!important;
  color:#eaf2ff!important;
  border-color:#28506a!important;
}
html body .modal-table-content th,
html body .ve-section th,
html body .course-shell th{
  background:#214267!important;
  color:#ffffff!important;
}

/* Botones: nunca texto blanco sobre blanco. */
html body .lesson-dialog button,
html body .modal button,
html body .school-dialog button,
html body .lesson-dialog a.course-btn,
html body .modal a.btn{
  background:linear-gradient(145deg,#182a47,#34204d)!important;
  color:#ffffff!important;
  border:2px solid #55dff8!important;
  border-radius:12px!important;
  box-shadow:3px 4px 0 rgba(0,0,0,.38)!important;
}
html body .lesson-dialog button:hover,
html body .modal button:hover,
html body .school-dialog button:hover{
  background:linear-gradient(145deg,#24547a,#63305f)!important;
  color:#fff5b8!important;
}
html body .lesson-dialog button.correct,
html body .modal button.correct,
html body .school-dialog button.good{
  background:#14533e!important;color:#e5ffef!important;border-color:#63e2a0!important;
}
html body .lesson-dialog button.wrong,
html body .modal button.wrong,
html body .school-dialog button.bad{
  background:#5a1e35!important;color:#ffe8ee!important;border-color:#ff829d!important;
}

/* Cerrar */
html body .lesson-close,
html body .close,
html body .school-close{
  background:#101c32!important;
  color:#ffffff!important;
  border:2px solid #ffd45a!important;
  min-width:38px!important;
  min-height:38px!important;
}

/* Formularios */
html body .lesson-dialog input,
html body .lesson-dialog select,
html body .lesson-dialog textarea,
html body .modal input,
html body .modal select,
html body .modal textarea,
html body .school-dialog input,
html body .school-dialog select,
html body .school-dialog textarea{
  background:#071322!important;
  color:#ffffff!important;
  border:2px solid #3e7694!important;
}
html body .lesson-dialog input::placeholder,
html body .lesson-dialog textarea::placeholder,
html body .modal input::placeholder,
html body .modal textarea::placeholder{color:#aab9ca!important}

/* Bloque de recordatorio que aparece en la captura */
html body .reminder-box,
html body .reminder-main,
html body .reminder-list,
html body .reminder-list > *{
  background:linear-gradient(145deg,#0d192c,#1b1630)!important;
  color:#edf5ff!important;
  border-color:#2f6680!important;
}
html body .reminder-box p,
html body .reminder-box h4,
html body .reminder-box span,
html body .reminder-list *{
  color:#edf5ff!important;
}
html body .modal-footer-actions{
  background:transparent!important;
}

/* Evita que capas antiguas/pseudo-elementos vuelvan a pintar blanco. */
html body .lesson-dialog:before,
html body .modal:before,
html body .school-dialog:before{
  background:linear-gradient(135deg,rgba(98,231,255,.06),rgba(255,104,196,.04))!important;
  opacity:1!important;
}