/* POQOMAM · NOCHE DE LUCIÉRNAGAS · capa visual global */
:root{
  --night:#02040a;
  --night2:#050814;
  --ink:#fffbe8;
  --muted:#d7d9e8;
  --cyan:#55e7ff;
  --lime:#b8ff5a;
  --gold:#ffd45a;
  --pink:#ff6ec7;
  --violet:#a98cff;
  --orange:#ff9d5c;
}
html{background:var(--night)!important;scroll-behavior:smooth}
body{
  min-height:100vh!important;
  color:var(--ink)!important;
  background:
    radial-gradient(circle at 12% 12%,rgba(85,231,255,.10),transparent 24%),
    radial-gradient(circle at 88% 18%,rgba(255,110,199,.09),transparent 25%),
    radial-gradient(circle at 50% 92%,rgba(184,255,90,.07),transparent 28%),
    linear-gradient(180deg,#010207 0%,#02040a 48%,#05030a 100%)!important;
  background-attachment:fixed!important;
}
/* cielo nocturno */
body::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-20!important;
  pointer-events:none!important;
  opacity:.45!important;
  background-image:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.10) 0 1px,transparent 2px),
    radial-gradient(circle at 75% 30%,rgba(255,255,255,.08) 0 1px,transparent 2px),
    radial-gradient(circle at 35% 75%,rgba(255,255,255,.07) 0 1px,transparent 2px),
    radial-gradient(circle at 90% 82%,rgba(255,255,255,.08) 0 1px,transparent 2px);
  background-size:190px 170px,230px 210px,270px 230px,310px 260px;
}
.night-fireflies{position:fixed;inset:0;z-index:-5;pointer-events:none;overflow:hidden}
.night-fireflies span{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 7px 2px var(--lime),0 0 22px 5px rgba(184,255,90,.55);opacity:.72;animation:fireflyFloat 5s ease-in-out infinite alternate}
.night-fireflies span:nth-child(3n){background:var(--gold);box-shadow:0 0 8px 2px var(--gold),0 0 24px 6px rgba(255,212,90,.55)}
.night-fireflies span:nth-child(4n){background:var(--cyan);box-shadow:0 0 8px 2px var(--cyan),0 0 24px 6px rgba(85,231,255,.5)}
.night-fireflies span:nth-child(5n){background:var(--pink);box-shadow:0 0 8px 2px var(--pink),0 0 24px 6px rgba(255,110,199,.5)}
@keyframes fireflyFloat{from{transform:translate3d(0,10px,0) scale(.75);opacity:.28}to{transform:translate3d(12px,-18px,0) scale(1.25);opacity:1}}

/* navegación */
.top,.portal-header,.course-nav,.download-dock{
  background:rgba(2,4,10,.88)!important;
  color:var(--ink)!important;
  border-color:rgba(85,231,255,.25)!important;
  backdrop-filter:blur(14px)!important;
}
.top{box-shadow:0 12px 35px rgba(0,0,0,.45)!important}
.brand,.nav a,.nav button,.portal-logo,.portal-user{color:var(--ink)!important}
a{color:#7eeeff!important}
a:hover{color:#fff!important;text-shadow:0 0 12px rgba(85,231,255,.5)}

/* héroes */
.course-hero,.portal-hero,.welcome-card,.account-card,.hero-copy{
  color:var(--ink)!important;
  background:linear-gradient(145deg,rgba(12,20,36,.96),rgba(23,10,35,.94))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 25px 70px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.08)!important;
}
.course-hero{position:relative;overflow:hidden}
.course-hero::before,.portal-hero::before{opacity:.55!important}
.course-hero h1,.course-hero h2,.course-hero h3,.portal-hero h1,.portal-hero h2,.welcome-card h1,.account-card h1{color:#fff!important;text-shadow:0 3px 18px rgba(0,0,0,.75)!important}
.course-hero p,.portal-hero p,.welcome-card p,.account-card p{color:#f0f1f7!important}

/* tarjetas y contenido */
.ve-summary,.ve-summary-grid,.ve-example,.ve-meaning,.ve-lesson-practice,.launch-panel,.progress-board,.world-heading,.world-grid,.lesson-card,.card,.panel,.box,.content-card,.info-card,.exercise-card,.quiz-card,.practice-card,.activity-card,.article-card,.vocab-card,.conversation-card{
  color:var(--ink)!important;
}
.ve-summary,.ve-example,.ve-meaning,.ve-lesson-practice,.launch-panel,.progress-board,.lesson-card,.card,.panel,.box,.content-card,.info-card,.exercise-card,.quiz-card,.practice-card,.activity-card,.article-card,.vocab-card,.conversation-card{
  background:linear-gradient(145deg,rgba(11,17,29,.96),rgba(27,12,37,.93))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.05)!important;
}
.ve-summary-grid{gap:16px!important}
.ve-example:nth-child(4n+1){border-color:rgba(85,231,255,.38)!important}
.ve-example:nth-child(4n+2){border-color:rgba(255,110,199,.38)!important}
.ve-example:nth-child(4n+3){border-color:rgba(255,212,90,.38)!important}
.ve-example:nth-child(4n){border-color:rgba(184,255,90,.38)!important}

/* texto general: máxima legibilidad */
body,main,section,article,div,p,li,td,th,small,label,span,strong,b{color:var(--ink)}
p,li,td,th,.ve-meaning,.small,.footer{color:#f0f1f7!important}
h1,h2,h3,h4,h5,h6{color:#ffffff!important}
.muted,.sub,.subtitle,.hint,.note,.help,.description,.course-hero p{color:#d9dce9!important}
input,textarea,select{background:#080d18!important;color:#fff!important;border:1px solid rgba(126,238,255,.35)!important;caret-color:#fff!important}
input::placeholder,textarea::placeholder{color:#aeb5c7!important}

/* elementos coloridos */
.course-badge,.route,.portal-badge,.progress-stats>div,.ve-choice,.launch-head,.download-dock a,.big-kid-button,.account-tab{
  background:linear-gradient(135deg,rgba(28,47,70,.95),rgba(46,18,57,.95))!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 9px 24px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.08)!important;
}
.course-badge:nth-child(3n),.route:nth-child(3n){border-color:rgba(184,255,90,.4)!important}
.course-badge:nth-child(3n+1),.route:nth-child(3n+1){border-color:rgba(85,231,255,.4)!important}
.course-badge:nth-child(3n+2),.route:nth-child(3n+2){border-color:rgba(255,110,199,.4)!important}
.course-badge:hover,.route:hover,.ve-choice:hover,.download-dock a:hover,.big-kid-button:hover,.account-tab:hover{transform:translateY(-2px);filter:brightness(1.15)}
.ve-choice{cursor:pointer!important}

/* botones y retroalimentación */
button{color:#fff!important}
button:hover{filter:brightness(1.12)}
.ve-feedback,.feedback,.result,.success,.correct,.message{background:rgba(18,50,38,.9)!important;color:#dfffe8!important;border-color:rgba(184,255,90,.4)!important}
.error,.incorrect{background:rgba(67,18,35,.92)!important;color:#ffe5ee!important;border-color:rgba(255,110,199,.4)!important}

/* footer */
.footer{background:rgba(1,3,8,.92)!important;color:#dce2ef!important;border-top:1px solid rgba(85,231,255,.18)!important}

/* el menú también vive de noche */
.world-grid{color:#fff!important}
.world-grid>*{filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}

@media(max-width:700px){
  .night-fireflies span{width:4px;height:4px}
  .course-hero,.portal-hero,.welcome-card,.account-card{border-radius:22px!important}
}


/* ================================================================
   FIX 2026-10-05 · MODALES LEGIBLES EN MODO NOCHE
   Todas las variantes de modal usan fondo oscuro + texto claro.
   Se coloca al final para ganar a los estilos antiguos que usaban blanco.
   ================================================================ */
.modal-bg,.lesson-modal{
  background:rgba(1,3,10,.82)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.modal,.lesson-dialog{
  background:linear-gradient(145deg,#0b1222 0%,#17102a 52%,#0a1720 100%)!important;
  color:#f7fbff!important;
  border:3px solid rgba(126,238,255,.55)!important;
  box-shadow:0 0 0 1px rgba(255,110,199,.16),0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(85,231,255,.10)!important;
}
.modal:before,.lesson-dialog:before{
  opacity:.055!important;
  background-image:linear-gradient(rgba(85,231,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,110,199,.65) 1px,transparent 1px)!important;
  background-size:28px 28px!important;
}
.lesson-dialog-inner,#modalBody,.modal-body,.modal-content{
  color:#f7fbff!important;
}
#modalTitle,.dialog-title{
  background:linear-gradient(90deg,#19345a,#3a1f58)!important;
  color:#fff!important;
  border-bottom:3px solid #ffd45a!important;
  text-shadow:0 2px 12px rgba(0,0,0,.65)!important;
}
.close,.lesson-close{
  background:#101b31!important;
  color:#fff!important;
  border:2px solid #ffd45a!important;
  box-shadow:3px 4px 0 rgba(255,110,199,.55)!important;
}
.dialog-kicker span{
  background:rgba(85,231,255,.10)!important;
  color:#dffaff!important;
  border-color:rgba(85,231,255,.38)!important;
}
.dialog-lead,.modal-note,.modal-list,.modal-card,.rule-card,.vocab-card,.modal-phrase,
.conversation-turn,.practice-box,.feedback-panel,.game-q,.game-option,.practice-option,
.sequence-bank,.sequence-answer,.match-card,.dialog-turn-card,.modal-table-frame,
.modal-table-content .lantern-map,.modal-table-content .dropzones,.modal-table-content .word-pieces,
.modal-table-content .choices,.modal-table-content .progress-summary,.modal-table-content .progress-list{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  color:#f4f8ff!important;
  border-color:rgba(126,238,255,.26)!important;
}
.modal-card p,.rule-card p,.vocab-card .es,.modal-phrase .es,.turn-translation,
.dialog-lead,.modal-note,.modal-list li,.game-feedback,.game-count{
  color:#dce5f2!important;
}
.modal-card h4,.rule-card h4,.vocab-card .poq,.modal-phrase .poq,
.modal-list b{color:#ffe8a6!important}
.game-q{background:linear-gradient(145deg,#171c3b,#25183b)!important;color:#fff!important}
.game-option,.practice-option,.course-btn,.role-panel-btn,
.modal-table-content .lantern,.modal-table-content .chip,.modal-table-content .piece,
.modal-table-content .choice,.modal-table-content .btn{
  background:linear-gradient(145deg,#17253e,#25163b)!important;
  color:#f7fbff!important;
  border:2px solid rgba(85,231,255,.42)!important;
  box-shadow:4px 5px 0 rgba(0,0,0,.35)!important;
}
.game-option:hover,.practice-option:hover,.course-btn:hover,
.modal-table-content .lantern:hover,.modal-table-content .chip:hover,
.modal-table-content .piece:hover,.modal-table-content .choice:hover,.modal-table-content .btn:hover{
  background:linear-gradient(145deg,#24466a,#512557)!important;
  color:#fff5bd!important;
}
.modal-table-content table,.ve-section table,.course-shell table{color:#eef5ff!important}
.modal-table-content th,.ve-section th,.course-shell th{background:#243c63!important;color:#fff!important}
.modal-table-content td,.ve-section td,.course-shell td{
  background:#101a2d!important;color:#eef5ff!important;border-color:rgba(126,238,255,.18)!important;
}
.modal-table-content input,.modal-table-content select,.modal-table-content textarea,
.modal input,.modal select,.modal textarea,
.lesson-dialog input,.lesson-dialog select,.lesson-dialog textarea{
  background:#08111f!important;color:#fff!important;border-color:rgba(126,238,255,.45)!important;
}
.modal input::placeholder,.modal textarea::placeholder,.lesson-dialog input::placeholder,.lesson-dialog textarea::placeholder{color:#9ba9bd!important}
.modal-table-content .dropzone,.modal-table-content .evidence-card,.modal-table-content .sentence-slots,.modal-table-content .quiz-option{
  background:#0e192b!important;color:#eef5ff!important;border-color:rgba(255,212,90,.45)!important;
}
.modal-table-content .victory-screen{background:linear-gradient(145deg,#102b2a,#18213d)!important;color:#fff!important}
.victory-screen *,.result *,.feedback-panel *,.game-feedback *{color:inherit!important}

/* FIX 2026-10-05 · modal especial de Vida Estudiantil */
.school-modal{
  background:rgba(1,3,10,.82)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.school-dialog{
  background:linear-gradient(145deg,#0b1222 0%,#17102a 55%,#0a1720 100%)!important;
  color:#f7fbff!important;
  border:3px solid rgba(126,238,255,.55)!important;
  box-shadow:0 0 0 1px rgba(255,110,199,.16),0 30px 90px rgba(0,0,0,.72),0 0 55px rgba(85,231,255,.10)!important;
}
.school-dialog:before{opacity:.055!important}
.school-dialog h2,.school-modal-lead{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.school-modal-kicker{color:#7eeeff!important}
.school-content-card,.school-question,.school-options button,.school-feedback,.school-modal-tip{
  background:linear-gradient(145deg,#111d32,#21163a)!important;
  color:#eef5ff!important;
  border-color:rgba(126,238,255,.28)!important;
}
.school-content-card *,.school-question *,.school-feedback *{color:inherit!important}
.school-options button{color:#f7fbff!important;border-color:rgba(85,231,255,.42)!important;box-shadow:4px 5px 0 rgba(0,0,0,.35)!important}
.school-options button:hover{background:linear-gradient(145deg,#24466a,#512557)!important;color:#fff5bd!important}
.school-options button.good{background:#123b31!important;color:#dfffe8!important}
.school-options button.bad{background:#421b30!important;color:#ffe5ee!important}
.school-close{background:#101b31!important;color:#fff!important;border-color:#ffd45a!important}