/*
 * MasterStudy LMS (free plugin, wordpress.org slug
 * masterstudy-lms-learning-management-system; the handoff doc specs
 * MasterStudy LMS Pro for production, same markup/classes for styling
 * purposes) compatibility overrides.
 *
 * CSS-only for everything below, on purpose: MasterStudy's own support team
 * has publicly confirmed their front-end architecture uses hardcoded
 * dimensions in places and isn't guaranteed stable across versions. A CSS
 * selector that stops matching after an update degrades silently (section
 * looks slightly off-brand); a stale PHP template override can outright
 * break a page. Prefer adding a selector here.
 *
 * Because this is now a real active theme (not a plugin), MasterStudy's
 * `locate_template()`-based override mechanism works natively: dropping a
 * file at stm-lms-templates/<same-subpath>.php in this theme's root
 * overrides that MasterStudy template automatically — see
 * stm-lms-templates/README.md before reaching for that, though; CSS should
 * still be the default tool.
 *
 * Class names RE-VERIFIED 2026-07-15/16 two ways: (1) fetching live rendered
 * HTML from entropica.mx (course archive, single course, auth) with this
 * theme active, and (2) reading the shipped MasterStudy LMS v3.7.37 PHP
 * templates directly on the server for markup this session's logged-out
 * fetches couldn't reach (quiz answers, curriculum-in-player, video
 * progress bar) — not from documentation or guessing. Several selectors in
 * the original v1.0.0 draft turned out wrong once checked against real
 * markup (e.g. `.masterstudy-course-card__info-title` never existed; the
 * real class is `.ms_lms_courses_card_item_info_title` — single underscores
 * throughout, not BEM double-underscore. `.masterstudy-curriculum-accordion*`
 * never existed either — MasterStudy actually ships TWO different curriculum
 * listings under different names: `.masterstudy-curriculum-list__*` on the
 * single-course page (pre-purchase preview) and
 * `.masterstudy-course-player-curriculum__*` inside the player itself.
 * Modifier convention confirmed from source: BEM element modifiers append
 * directly with a single underscore — `__radio_checked`, not a separate
 * `._checked` class — apply that pattern to any selector added here later.
 * If MasterStudy renames a class in a future version, these rules just stop
 * matching — they degrade silently, not destructively.
 *
 * Confidence note: `.ms_lms_courses_card_item*` (verified, real, actively
 * used by the default course archive/grid). `.masterstudy-account-sidebar` /
 * `.masterstudy-account-menu__*` below are UNVERIFIED — reaching the actual
 * logged-in student dashboard requires an authenticated session, which
 * wasn't set up this session. Re-check those once a real student account
 * exists.
 */

/* Scope MasterStudy's own wrapper into our typography/utility layer.
   Entropica_Theme_Masterstudy_Compat hooks `stm_lms_wrapper_classes` to add
   "ent-scope" to `.stm-lms-wrapper` — harmless now that base.css applies
   site-wide, but kept as an extension point for scoped-only rules. */
.stm-lms-wrapper.ent-scope {
  font-family: var( --ent-font-body );
  color: var( --ent-ink );
}

/* ---------------------------------------------------------------------- */
/* Course card / grid — the default course archive/grid's real markup      */
/* (verified live): .ms_lms_courses_card_wrapper > .ms_lms_courses_card >   */
/* .ms_lms_courses_card_item. `.masterstudy-course-card*` never appears on  */
/* this site and is dropped.                                               */
/* ---------------------------------------------------------------------- */
.ms_lms_courses_card_item {
  background: var( --ent-surface );
  border: 1px solid var( --ent-line ) !important;
  border-radius: var( --ent-radius ) !important;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ms_lms_courses_card_item:hover {
  transform: translateY( -3px );
  box-shadow: var( --ent-shadow-card );
}
.ms_lms_courses_card_item_info_title {
  font-family: var( --ent-font-head ) !important;
  font-weight: 600 !important;
  color: var( --ent-ink ) !important;
}
.ms_lms_courses_card_item_info_title h3 {
  font-family: inherit;
  font-weight: inherit;
  font-size: 17px;
  margin: 0;
}
.ms_lms_courses_card_item_meta_block {
  color: var( --ent-ink-2 ) !important;
}
.ms_lms_courses_card_item_status {
  background: var( --ent-accent-soft ) !important;
  color: var( --ent-accent ) !important;
  border-radius: var( --ent-radius-pill ) !important;
  font-weight: 700 !important;
}
.ms_lms_courses_card_item_info_rating_stars_filled {
  background: var( --ent-warm ) !important;
}

/* ---------------------------------------------------------------------- */
/* Single course page                                                      */
/* ---------------------------------------------------------------------- */
.masterstudy-single-course__sidebar {
  background: var( --ent-surface );
  border: 1px solid var( --ent-line );
  border-radius: var( --ent-radius );
  /* The plugin's own CSS (course/main.css) gives .masterstudy-single-course__sidebar
     zero padding — it's `display:flex;flex-direction:column;width:X%` only,
     designed to sit flush inside a container that already has inset. We're
     the ones adding the card look (bg/border/radius) above, so we're also
     the ones responsible for the padding that makes it read as a card
     instead of content flush against rounded corners. */
  padding: 28px 26px !important;
}
.masterstudy-single-course-title {
  font-family: var( --ent-font-head ) !important;
  letter-spacing: -.01em;
  color: var( --ent-ink ) !important;
}
.masterstudy-single-course__topbar {
  border-bottom: 1px solid var( --ent-line );
}
/* The visible rounded surface is the OUTER .masterstudy-buy-button wrapper
   (background + border-radius live there in the plugin's own CSS) — the
   nested __link anchor just fills it with no radius of its own. Ditto's
   buttons are pill-shaped, always, regardless of size (see base.css), so
   both need the pill radius or the wrapper's un-rounded corner peeks out
   past the link's. */
.masterstudy-buy-button,
.masterstudy-add-to-cart-subscription {
  border-radius: var( --ent-radius-pill ) !important;
  overflow: hidden;
}
.masterstudy-buy-button__link,
.masterstudy-add-to-cart-subscription {
  background: var( --ent-accent ) !important;
  color: var( --ent-accent-ink ) !important;
  border: none !important;
  border-radius: var( --ent-radius-pill ) !important;
  font-family: var( --ent-font-body ) !important;
  font-weight: 600 !important;
}
.masterstudy-buy-button__link:hover {
  filter: brightness( 1.04 );
}

/* ---------------------------------------------------------------------- */
/* Single course sidebar — wishlist/share row, course-details list, and    */
/* the enrolled-student progress/score card. New in the Ditto theme: Arena */
/* only ever styled the outer sidebar card + the buy button (above); these */
/* three inner blocks were left at MasterStudy's own plain default markup. */
/* Classes verified 2026-08-18 two ways: (1) the plugin's own PHP templates */
/* (stm-lms-templates/components/course/{wishlist,share-button,details,    */
/* complete}.php) and (2) its real compiled CSS (course/main.css,          */
/* components/course/main.css, components/course/complete.css) — reading  */
/* the actual shipped rules, not guessing, is what caught that .masterstudy-*/
/* -single-course-wishlist has NO padding/background of its own (plain     */
/* icon+text) and that an enrolled user's wishlist toggle renders WITHOUT  */
/* a nested <a> (a logged-out fetch can't reach that state to confirm —    */
/* targeting the outer container instead of `a` covers both cases).       */
/* ---------------------------------------------------------------------- */
.masterstudy-single-course__buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.masterstudy-single-course-wishlist,
.masterstudy-single-course-share-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 16px !important;
  border-radius: var( --ent-radius-pill ) !important;
  background: var( --ent-surface-2 ) !important;
  color: var( --ent-ink-2 ) !important;
  font-family: var( --ent-font-body ) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.masterstudy-single-course-wishlist:hover,
.masterstudy-single-course-share-button:hover {
  background: var( --ent-accent-soft ) !important;
  color: var( --ent-accent ) !important;
}
.masterstudy-single-course-share-button-modal__container {
  background: var( --ent-surface );
  border-radius: var( --ent-radius );
}

/* "Detalles del curso" — restyled as Ditto's muted stat-card pattern (see
   ../../../ditto-style-guide/style-guide.html's feature-card layout: tan
   surface-2 background, generous radius/padding, no divider lines) instead
   of the plugin's flat divided list. Applied directly to __item regardless
   of which display-mode modifier class the course is set to
   (_default/_row/_grid/...) so it doesn't depend on a MasterStudy course
   setting matching what we expect. */
.masterstudy-single-course-details {
  gap: 10px !important;
}
.masterstudy-single-course-details__title {
  font-family: var( --ent-font-head ) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var( --ent-ink ) !important;
  border-bottom: none !important;
  padding-bottom: 4px !important;
}
.masterstudy-single-course-details__item {
  border: none !important;
  background: var( --ent-surface-2 ) !important;
  border-radius: var( --ent-radius-sm ) !important;
  padding: 14px 16px !important;
}
.masterstudy-single-course-details__icon-wrapper {
  width: 34px;
  height: 34px;
  border-radius: var( --ent-radius-pill ) !important;
  background: var( --ent-surface ) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The icon glyph is a ::before pseudo-element with its own hardcoded color
   (#4d5e6f) in the plugin's CSS — more specific than a plain-class rule on
   .masterstudy-single-course-details__icon itself, which is why that alone
   wouldn't repaint it. */
.masterstudy-single-course-details__icon,
.masterstudy-single-course-details__icon::before {
  color: var( --ent-accent ) !important;
}
.masterstudy-single-course-details__name {
  color: var( --ent-ink-2 ) !important;
  font-family: var( --ent-font-body ) !important;
}
.masterstudy-single-course-details__quantity {
  color: var( --ent-ink ) !important;
  font-weight: 700 !important;
  font-family: var( --ent-font-head ) !important;
}

/* Progress/score card (enrolled student, course in progress or completed) */
.masterstudy-single-course-complete-block {
  background: var( --ent-accent-soft ) !important;
  border-radius: var( --ent-radius ) !important;
  /* No margin-bottom here: .masterstudy-single-course__cta right after it
     already carries margin-top:20px from the plugin's own CSS — matching
     that instead of stacking our own keeps the vertical rhythm even with
     the 20px we added after .masterstudy-single-course__buttons above. */
}
.masterstudy-single-course-complete-block__score {
  font-family: var( --ent-font-body ) !important;
  color: var( --ent-ink ) !important;
}
.masterstudy-single-course-complete-block__score-value {
  color: var( --ent-ink-2 ) !important;
}
.masterstudy-single-course-complete-block__score strong {
  font-family: var( --ent-font-head ) !important;
  color: var( --ent-accent ) !important;
}
.masterstudy-single-course-complete__bar-empty {
  background: var( --ent-surface ) !important;
  border-radius: var( --ent-radius-pill ) !important;
}
.masterstudy-single-course-complete__bar-filled {
  background: var( --ent-accent ) !important;
  border-radius: var( --ent-radius-pill ) !important;
}
/* Completed (passed) state banner + its "Details" link */
.masterstudy-single-course-complete-block__title {
  font-family: var( --ent-font-head ) !important;
  color: var( --ent-ink ) !important;
}
.masterstudy-single-course-complete-block__details {
  color: var( --ent-accent ) !important;
  font-weight: 600 !important;
  cursor: pointer;
}
/* Post-quiz results modal (opens from "Details") */
.masterstudy-single-course-complete__container {
  background: var( --ent-surface );
  border-radius: var( --ent-radius );
}
.masterstudy-single-course-complete__title {
  font-family: var( --ent-font-head ) !important;
  color: var( --ent-ink ) !important;
}

/* ---------------------------------------------------------------------- */
/* Curriculum — TWO distinct listings confirmed in MasterStudy's own       */
/* source, not one: the single-course page's pre-purchase preview list,    */
/* and the in-player curriculum sidebar shown once enrolled.               */
/* ---------------------------------------------------------------------- */
.masterstudy-curriculum-list__section {
  background: var( --ent-surface );
  border: 1px solid var( --ent-line );
  border-radius: 14px;
}
.masterstudy-curriculum-list__item {
  border-top: 1px solid var( --ent-line );
}
.masterstudy-curriculum-list__link {
  color: var( --ent-ink ) !important;
}
.masterstudy-curriculum-list__link_disabled {
  color: var( --ent-ink-2 ) !important;
  opacity: .6;
}

.masterstudy-course-player-curriculum {
  background: var( --ent-surface );
  border: 1px solid var( --ent-line );
  border-radius: var( --ent-radius );
}
.masterstudy-course-player-curriculum__title {
  font-family: var( --ent-font-head ) !important;
  color: var( --ent-ink ) !important;
}

/* ---------------------------------------------------------------------- */
/* Video lesson player                                                     */
/* ---------------------------------------------------------------------- */
.masterstudy-course-player-lesson-video__container {
  border-radius: var( --ent-radius );
  overflow: hidden;
  border: 1px solid var( --ent-line );
}
/* Real markup is a div+span fill pattern (like this theme's own
   .ent-progress), not a <input type=range> — accent-color doesn't apply
   here, verified against MasterStudy's own video-media component source. */
.masterstudy-course-player-lesson-video__progress-bar {
  background: var( --ent-surface-2 ) !important;
  border-radius: var( --ent-radius-pill );
}
.masterstudy-course-player-lesson-video__progress-bar-value {
  background: var( --ent-accent ) !important;
  border-radius: var( --ent-radius-pill );
}
.masterstudy-plyr-video-player .plyr__progress input[type='range'] {
  accent-color: var( --ent-accent );
}

/* ---------------------------------------------------------------------- */
/* Quiz questions / answers — modifier classes append directly with a      */
/* single underscore (`_correct`, `_wrong`, `_checked`), confirmed from     */
/* MasterStudy's own choice.php template source — NOT a separate           */
/* leading-dot class as the original draft guessed.                        */
/* ---------------------------------------------------------------------- */
.masterstudy-course-player-quiz__content {
  background: var( --ent-surface );
  border: 1px solid var( --ent-line );
  border-radius: var( --ent-radius );
}
.masterstudy-course-player-answer {
  border: 1.5px solid var( --ent-line ) !important;
  border-radius: 11px !important;
  background: var( --ent-surface ) !important;
  transition: border-color .15s, background .15s, color .15s;
}
.masterstudy-course-player-answer__radio_checked,
.masterstudy-course-player-answer__checkbox_checked {
  border-color: var( --ent-accent ) !important;
}
.masterstudy-course-player-answer_correct {
  border-color: var( --ent-success ) !important;
  background: var( --ent-success-soft ) !important;
}
.masterstudy-course-player-answer_wrong {
  border-color: var( --ent-danger ) !important;
  background: var( --ent-danger-soft ) !important;
}
.masterstudy-course-player-quiz__pagination a {
  border-radius: var( --ent-radius-pill ) !important;
}

/* ---------------------------------------------------------------------- */
/* Wishlist page — verified live (logged-out empty state)                 */
/* ---------------------------------------------------------------------- */
.masterstudy-account-wishlist__title {
  font-family: var( --ent-font-head ) !important;
  color: var( --ent-ink ) !important;
}
.masterstudy-account-wishlist__available-link {
  color: var( --ent-accent ) !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Student / instructor dashboard                                         */
/* ---------------------------------------------------------------------- */
.masterstudy-account-sidebar {
  background: var( --ent-surface );
  border: 1px solid var( --ent-line );
  border-radius: var( --ent-radius );
}
.masterstudy-account-menu__list-item-label {
  color: var( --ent-ink-2 ) !important;
  font-weight: 600 !important;
}
.masterstudy-account-menu__list-item-label.active,
.masterstudy-account-menu__list-item-label:hover {
  background: var( --ent-accent-soft ) !important;
  color: var( --ent-accent ) !important;
}
.masterstudy-account-menu__list-item-badge {
  background: var( --ent-warm ) !important;
  color: var( --ent-ink ) !important; /* yellow fill needs navy text, not white */
  border-radius: var( --ent-radius-pill ) !important;
}

/* ---------------------------------------------------------------------- */
/* Pricing / membership (MasterStudy LMS Pro feature — the handoff doc's    */
/* production stack uses Pro, so this is expected to render for real)      */
/* ---------------------------------------------------------------------- */
.masterstudy_memberships__item {
  background: var( --ent-surface );
  border: 1px solid var( --ent-line );
  border-radius: var( --ent-radius );
}
.masterstudy_memberships__price {
  font-family: var( --ent-font-head ) !important;
  color: var( --ent-ink ) !important;
}

/* ---------------------------------------------------------------------- */
/* Generic MasterStudy button — the plugin's own button component, reused  */
/* across auth modal, course purchase, quiz actions, account forms, etc.   */
/* Verified against the live site's rendered auth modal (2026-07-15).      */
/* ---------------------------------------------------------------------- */
.masterstudy-button {
  border-radius: var( --ent-radius-pill ) !important;
  font-family: var( --ent-font-body ) !important;
  font-weight: 600 !important;
}
.masterstudy-button_style-primary {
  background: var( --ent-accent ) !important;
  color: var( --ent-accent-ink ) !important;
  border: none !important;
}
.masterstudy-button_style-primary:hover {
  filter: brightness( 1.04 );
}

/* ---------------------------------------------------------------------- */
/* Auth modal (login/register/restore-password) — MasterStudy's own        */
/* front-end modal, not wp-login.php. Verified markup against the live     */
/* site (2026-07-15): .masterstudy-authorization-modal wraps                */
/* .masterstudy-authorization, whose .masterstudy-authorization__form-input */
/* fields already pick up base.css's generic input[type] rules — only the  */
/* modal chrome/switch-links need overriding here.                         */
/* ---------------------------------------------------------------------- */
.masterstudy-authorization-modal__container {
  background: var( --ent-surface );
  border-radius: var( --ent-radius );
}
/* Same .masterstudy-authorization component, but embedded inline on the
   account page (cuenta-del-usuario) for a logged-out visitor instead of a
   floating modal — verified live. Center it like a card, matching the
   Auth screen in Entrópica.dc.html. */
.masterstudy__login-page {
  max-width: 420px;
  margin: 40px auto;
}
.masterstudy__login-page-form {
  background: var( --ent-surface );
  border: 1px solid var( --ent-line );
  border-radius: var( --ent-radius );
  padding: 26px;
}
.masterstudy-authorization__header-title {
  font-family: var( --ent-font-head ) !important;
  font-weight: 600 !important;
  color: var( --ent-ink ) !important;
}
.masterstudy-authorization__checkbox-title,
.masterstudy-authorization__instructor-text {
  color: var( --ent-ink-2 ) !important;
}
.masterstudy-authorization__switch-account-title {
  color: var( --ent-ink-2 ) !important;
}
.masterstudy-authorization__switch-account-link,
.masterstudy-authorization__switch-lost-pass,
.masterstudy-authorization__restore-header-title {
  color: var( --ent-accent ) !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------------------------- */
/* Subject/course-category accent colors (Matemáticas, Física, ...) — apply */
/* by adding the matching class to a course category term, or reference    */
/* --ent-subject-* directly from a template override if MasterStudy course  */
/* categories don't expose a class hook for this.                          */
/* ---------------------------------------------------------------------- */
.ent-subject-math       { --ent-subject-color: var(--ent-subject-math); }
.ent-subject-physics    { --ent-subject-color: var(--ent-subject-physics); }
.ent-subject-chemistry  { --ent-subject-color: var(--ent-subject-chemistry); }
.ent-subject-biology    { --ent-subject-color: var(--ent-subject-biology); }
.ent-subject-geography  { --ent-subject-color: var(--ent-subject-geography); }
.ent-subject-spanish    { --ent-subject-color: var(--ent-subject-spanish); }