/* =========================================================
   POQOMAM · REDISEÑO VISUAL 30 PÁGINAS
   Alto contraste + fondos con identidad + tarjetas no blancas.
   Solo cambia presentación; no modifica contenido ni lógica.
   ========================================================= */
:root{
  --design-ink:#172033;
  --design-muted:#43506a;
  --design-paper:#edf3f7;
  --design-card:#f4f7f4;
  --design-border:rgba(23,32,51,.16);
  --design-shadow:0 18px 42px rgba(20,31,48,.15);
}
html{background:#dfe8ee!important}
body{
  color:var(--design-ink)!important;
  background:
    radial-gradient(circle at 5% 10%,color-mix(in srgb,var(--kid-b,#7aa7c7) 25%,transparent),transparent 24%),
    radial-gradient(circle at 94% 8%,color-mix(in srgb,var(--kid-c,#f0c75e) 22%,transparent),transparent 22%),
    linear-gradient(135deg,var(--design-paper),#e8edf2 48%,#f1eadf)!important;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif!important;
}
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.30;
  background-image:linear-gradient(30deg,rgba(23,32,51,.045) 12%,transparent 12.5%,transparent 87%,rgba(23,32,51,.045) 87.5%,rgba(23,32,51,.045)),linear-gradient(150deg,rgba(23,32,51,.045) 12%,transparent 12.5%,transparent 87%,rgba(23,32,51,.045) 87.5%,rgba(23,32,51,.045));
  background-size:34px 60px;
}
body.page-lesson .wrap{width:min(1280px,calc(100% - 30px))}
.top{
  background:rgba(238,244,247,.92)!important;
  border:3px solid var(--design-border)!important;
  box-shadow:7px 8px 0 color-mix(in srgb,var(--kid-c,#f0c75e) 62%,#fff),0 18px 38px rgba(23,32,51,.12)!important;
}
.brand,.nav a,.nav-login{color:var(--design-ink)!important}
.nav a,.nav-login{background:rgba(255,255,255,.22)!important}
.nav a:hover,.nav-login:hover{background:var(--kid-a,#344e73)!important;color:#fff!important}

/* Main header remains dark so the title always has maximum contrast. */
.course-hero{
  border:4px solid color-mix(in srgb,var(--kid-a,#405a78) 82%,#172033)!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--kid-a,#405a78) 82%,#172033),color-mix(in srgb,var(--kid-deep,#172033) 88%,#111827))!important;
  box-shadow:9px 10px 0 color-mix(in srgb,var(--kid-c,#f0c75e) 80%,#fff),0 24px 55px rgba(23,32,51,.22)!important;
}
.course-hero h1,.course-hero p,.course-hero .course-kicker{color:#fff!important}
.course-hero>p{color:#eaf0f4!important}
.course-badge{color:#fff!important;background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.28)!important}

/* Avoid large white surfaces. */
.course-route .route,
.ve-summary,
.ve-summary-grid>div,
.launch-panel,
.course-nav,
.module,.course-note,.resource-note,.download-card,.stat,
.ve-section,.ve-home-feature{
  color:var(--design-ink)!important;
  background:linear-gradient(145deg,var(--design-card),color-mix(in srgb,var(--kid-paper,#eef5ef) 78%,#dfe8ee))!important;
  border-color:var(--design-border)!important;
  box-shadow:5px 6px 0 color-mix(in srgb,var(--kid-b,#8fb5c5) 40%,#e7edf0),var(--design-shadow)!important;
}
.course-route .route{border:3px solid var(--design-border)!important}
.course-route .route b{background:var(--kid-a,#344e73)!important;color:#fff!important}
.ve-summary h2,.ve-summary h3,.launch-panel h2,.launch-panel h3,.ve-section h2,.ve-section h3,.module h2,.module h3{color:var(--design-ink)!important}
.ve-summary p,.ve-summary li,.launch-panel p,.launch-panel li,.module p,.module li,.ve-section p,.ve-section li,.resource-note p{color:var(--design-muted)!important}
.ve-example,.ve-choice,.course-btn,.practice-option,.game-option,.piece,.token,.choice,.btn{color:var(--design-ink)!important}

/* Tables and educational content */
.course-shell table,.ve-section table{color:var(--design-ink)!important}
.course-shell td,.ve-section td{background:color-mix(in srgb,var(--kid-paper,#eef5ef) 82%,#e4ebee)!important;color:var(--design-ink)!important;border-color:color-mix(in srgb,var(--kid-a,#405a78) 20%,#fff)!important}
.course-shell th,.ve-section th{background:var(--kid-a,#405a78)!important;color:#fff!important}

/* Interactive cards/buttons: dark ink on light colorful surfaces. */
.ve-choice,.course-btn,.practice-option,.game-option,.piece,.token,.memory button,.choice,.btn,.lantern,.clue,.flying-word{
  background:linear-gradient(145deg,#f0f5f3,color-mix(in srgb,var(--kid-c,#f0c75e) 22%,#eef3f5))!important;
  border:2px solid color-mix(in srgb,var(--kid-a,#405a78) 46%,#9aaab5)!important;
  color:var(--design-ink)!important;
  box-shadow:3px 4px 0 color-mix(in srgb,var(--kid-b,#8fb5c5) 48%,#d8e0e4)!important;
}
.ve-choice:hover,.course-btn:hover,.practice-option:hover,.game-option:hover,.piece:hover,.token:hover,.choice:hover,.btn:hover,.lantern:hover,.clue:hover,.flying-word:hover{color:#fff!important;background:var(--kid-a,#405a78)!important}

/* Modals: no white panels, but still very readable. */
.modal,.lesson-dialog{
  background:linear-gradient(145deg,#eaf1f2,var(--kid-paper,#f1f6ef))!important;
  color:var(--design-ink)!important;
  border-color:var(--kid-a,#405a78)!important;
}
#modalBody,.lesson-dialog-inner{color:var(--design-ink)!important}
.modal-table-frame{background:rgba(238,245,243,.94)!important;border-color:var(--kid-a,#405a78)!important}
.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:rgba(224,235,235,.92)!important}
.modal-table-content .dropzone,.modal-table-content .evidence-card,.modal-table-content .sentence-slots,.modal-table-content .quiz-option{background:#e9f0ee!important;color:var(--design-ink)!important}
.modal-table-content input,.modal-table-content select,.modal-table-content textarea{background:#f2f6f5!important;color:var(--design-ink)!important}

.footer{color:#263449!important;background:rgba(222,231,235,.72)!important;border-top:2px solid rgba(23,32,51,.10)!important}
.download-dock{background:rgba(27,37,52,.92)!important}

/* Page-specific identities: each page gets a different palette and geometry. */
.page-01{--kid-a:#4f46b8;--kid-b:#8d9be8;--kid-c:#e6bd55;--kid-paper:#e9edfb;--kid-deep:#28245f}
.page-02{--kid-a:#087f8c;--kid-b:#58c8c0;--kid-c:#e8c85b;--kid-paper:#e4f4f4;--kid-deep:#07505a}
.page-03{--kid-a:#b84261;--kid-b:#ef8fa4;--kid-c:#e9c95e;--kid-paper:#f7e8ed;--kid-deep:#681f36}
.page-04{--kid-a:#177245;--kid-b:#72bd8e;--kid-c:#e3c15a;--kid-paper:#e7f3ea;--kid-deep:#0c4d2d}
.page-05{--kid-a:#9a4d9d;--kid-b:#c58aca;--kid-c:#e5bd55;--kid-paper:#f2e9f3;--kid-deep:#562b5a}
.page-06{--kid-a:#a45a21;--kid-b:#d99b57;--kid-c:#4f9a92;--kid-paper:#f4eadf;--kid-deep:#623613}
.page-07{--kid-a:#147b82;--kid-b:#6fc1bc;--kid-c:#dfb954;--kid-paper:#e5f2f1;--kid-deep:#0d4e52}
.page-08{--kid-a:#7b4da4;--kid-b:#ae91d2;--kid-c:#dbb85b;--kid-paper:#eee8f4;--kid-deep:#452766}
.page-09{--kid-a:#b45309;--kid-b:#df9b4b;--kid-c:#5d8eae;--kid-paper:#f4eade;--kid-deep:#71320a}
.page-10{--kid-a:#a34773;--kid-b:#d58faf;--kid-c:#d9b64f;--kid-paper:#f5e8ef;--kid-deep:#642344}
.page-11{--kid-a:#355da5;--kid-b:#7d9bd1;--kid-c:#e1bc50;--kid-paper:#e7eef8;--kid-deep:#203c70}
.page-12{--kid-a:#386c86;--kid-b:#83b3c5;--kid-c:#d9b85b;--kid-paper:#e7f0f3;--kid-deep:#214557}
.page-13{--kid-a:#9b3d22;--kid-b:#d67852;--kid-c:#e4ba52;--kid-paper:#f5e7e0;--kid-deep:#632315}
.page-14{--kid-a:#7651a8;--kid-b:#a68ccc;--kid-c:#dcb95a;--kid-paper:#eee9f5;--kid-deep:#49316d}
.page-15{--kid-a:#34795f;--kid-b:#78b59c;--kid-c:#e0bc58;--kid-paper:#e6f1ec;--kid-deep:#20503e}
.page-16{--kid-a:#3d609b;--kid-b:#7fa1cf;--kid-c:#dfbd5a;--kid-paper:#e7eef8;--kid-deep:#28436e}
.page-17{--kid-a:#8d5c2f;--kid-b:#c6975d;--kid-c:#5c8d8b;--kid-paper:#f1e8dd;--kid-deep:#5e3b1e}
.page-18{--kid-a:#a15d35;--kid-b:#d69b70;--kid-c:#4c8b85;--kid-paper:#f4e9e0;--kid-deep:#64391f}
.page-19{--kid-a:#5c5b9e;--kid-b:#9294cf;--kid-c:#ddb95a;--kid-paper:#e9e9f4;--kid-deep:#383763}
.page-20{--kid-a:#39766d;--kid-b:#76b9ad;--kid-c:#dfbd57;--kid-paper:#e4f0ed;--kid-deep:#245149}
.page-21{--kid-a:#4b6d7c;--kid-b:#88a9b7;--kid-c:#d9b75a;--kid-paper:#e6eef1;--kid-deep:#304954}
.page-22{--kid-a:#7e4a9b;--kid-b:#ad82c8;--kid-c:#dda95c;--kid-paper:#eee5f2;--kid-deep:#512d68}
.page-23{--kid-a:#1d6f9c;--kid-b:#6ba8ca;--kid-c:#dfba57;--kid-paper:#e4f0f5;--kid-deep:#124c6d}
.page-24{--kid-a:#a35d1b;--kid-b:#d39b51;--kid-c:#72a59a;--kid-paper:#f3eade;--kid-deep:#673b12}
.page-25{--kid-a:#32734b;--kid-b:#7fb78f;--kid-c:#dcb457;--kid-paper:#e7f1e9;--kid-deep:#1f4e31}
.page-26{--kid-a:#4e50a1;--kid-b:#8589ca;--kid-c:#d9b552;--kid-paper:#e8e8f4;--kid-deep:#303166}
.page-27{--kid-a:#ad4e23;--kid-b:#dd8c58;--kid-c:#8394c4;--kid-paper:#f4e7df;--kid-deep:#6b2e16}
.page-28{--kid-a:#267d88;--kid-b:#70b9bf;--kid-c:#dba95c;--kid-paper:#e3f1f2;--kid-deep:#174f57}
.page-29{--kid-a:#5f4b93;--kid-b:#9b8bc1;--kid-c:#ddb85b;--kid-paper:#ece8f3;--kid-deep:#3c2f61}
.page-30{--kid-a:#6f4a8f;--kid-b:#a786bd;--kid-c:#d8b65b;--kid-paper:#eee7f1;--kid-deep:#432b59}

/* Decorative personality for each page: different corners, borders and background motif. */
.page-01 body,.page-02 body{background-size:auto}
.page-01 .course-hero{border-radius:26px 46px 30px 50px!important}
.page-02 .course-hero{border-radius:48px 26px 48px 30px!important}
.page-03 .course-hero{border-radius:30px 52px 24px 44px!important}
.page-04 .course-hero{border-radius:52px 28px 42px 24px!important}
.page-05 .course-hero{border-radius:28px 42px 58px 28px!important}
.page-06 .course-hero{border-radius:44px 28px 28px 52px!important}
.page-07 .course-hero{border-radius:32px 54px 32px 54px!important}
.page-08 .course-hero{border-radius:54px 34px 28px 46px!important}
.page-09 .course-hero{border-radius:24px 58px 42px 28px!important}
.page-10 .course-hero{border-radius:46px 24px 54px 36px!important}
.page-11 .course-hero{border-radius:30px 60px 30px 30px!important}
.page-12 .course-hero{border-radius:60px 30px 30px 40px!important}
.page-13 .course-hero{border-radius:28px 40px 60px 24px!important}
.page-14 .course-hero{border-radius:42px 30px 24px 58px!important}
.page-15 .course-hero{border-radius:24px 48px 32px 58px!important}
.page-16 .course-hero{border-radius:58px 26px 40px 30px!important}
.page-17 .course-hero{border-radius:36px 56px 26px 44px!important}
.page-18 .course-hero{border-radius:52px 28px 44px 34px!important}
.page-19 .course-hero{border-radius:30px 46px 58px 24px!important}
.page-20 .course-hero{border-radius:48px 34px 28px 54px!important}
.page-21 .course-hero{border-radius:24px 54px 40px 32px!important}
.page-22 .course-hero{border-radius:56px 30px 34px 44px!important}
.page-23 .course-hero{border-radius:30px 58px 30px 50px!important}
.page-24 .course-hero{border-radius:46px 24px 52px 30px!important}
.page-25 .course-hero{border-radius:28px 52px 28px 52px!important}
.page-26 .course-hero{border-radius:54px 28px 40px 26px!important}
.page-27 .course-hero{border-radius:34px 60px 24px 46px!important}
.page-28 .course-hero{border-radius:60px 24px 46px 30px!important}
.page-29 .course-hero{border-radius:26px 54px 34px 48px!important}
.page-30 .course-hero{border-radius:48px 30px 58px 26px!important}

/* Alternating card geometry gives the 30 pages a handcrafted look. */
.page-lesson .ve-summary-grid>div:nth-child(odd){border-radius:26px 16px 26px 16px!important}
.page-lesson .ve-summary-grid>div:nth-child(even){border-radius:16px 26px 16px 26px!important}
.page-lesson .course-route .route:nth-child(2){transform:translateY(3px)}
.page-lesson .course-route .route:nth-child(3){transform:translateY(-3px)}
.page-lesson .course-route .route:nth-child(4){transform:translateY(3px)}

/* 30: dedicated cultural palette and motif */
.page-30{background:#eee7f1!important}
.page-30 .course-hero:after{content:"✦  🌿  🪶  🌿  ✦"!important;color:#e7ca70!important;font-size:1.5rem!important;letter-spacing:8px!important}
.page-30 .ve-summary-grid>div:first-child{border-left:8px solid #6f4a8f!important}
.page-30 .ve-summary-grid>div:nth-child(2){border-right:8px solid #d8b65b!important}

@media(max-width:760px){
  body.page-lesson .wrap{width:calc(100% - 14px)}
  .course-route .route{transform:none!important}
  .top{box-shadow:4px 5px 0 color-mix(in srgb,var(--kid-c,#f0c75e) 62%,#fff)!important}
}
@media(prefers-reduced-motion:reduce){body:after{display:none!important}}