@charset "UTF-8";
/**
 * Nlanub Cursos — Responsive frontend layer
 * Version 2.0.2
 * Mobile-first safeguards for Elementor widgets and LMS shortcodes.
 */

/* ---------- Safe sizing / embedded media ---------- */
.ncp-hero *,
.ncp-auth *,
.ncp-player *,
.ncp-my-learning *,
.ncp-quiz-form *,
.ncp-assignment-form *,
.ncp-forum *,
.ncp-reviews *,
.ncp-access-restricted * {
  box-sizing: border-box;
}

.ncp-hero img,
.ncp-auth img,
.ncp-player img,
.ncp-my-learning img,
.ncp-quiz-form img,
.ncp-assignment-form img,
.ncp-forum img,
.ncp-reviews img,
.ncp-player-content img,
.ncp-player-content video,
.ncp-player-content iframe,
.ncp-player-content embed,
.ncp-player-content object {
  max-width: 100%;
}

.ncp-player-content img,
.ncp-player-content video {
  height: auto;
}

.ncp-player-content iframe,
.ncp-player-content embed,
.ncp-player-content object {
  width: 100%;
}

.ncp-player-content table,
.ncp-forum table,
.ncp-reviews table {
  max-width: 100%;
}

/* ---------- Course hero ---------- */
.ncp-mobile-course-action {
  display: none;
}

@media (max-width: 980px) {
  .ncp-hero .ncp-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 26px !important;
  }

  .ncp-hero .ncp-hero-left {
    min-width: 0;
    order: 2;
  }

  .ncp-hero .ncp-hero-right {
    width: 100%;
    order: 1;
  }

  .ncp-hero .ncp-card {
    width: 100%;
  }

  .ncp-hero .ncp-hero-title {
    font-size: clamp(32px, 6vw, 44px) !important;
    overflow-wrap: anywhere;
  }

  .ncp-hero .ncp-chips {
    gap: 8px;
  }

  .ncp-hero .ncp-chip {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .ncp-hero {
    border-radius: 16px !important;
  }

  .ncp-hero .ncp-hero-grid {
    padding: 16px !important;
    gap: 16px !important;
  }

  /* Compact action sits at the very top on phones. */
  .ncp-hero .ncp-mobile-course-action {
    display: block !important;
    order: 0;
    position: relative;
    z-index: 3;
    width: 100%;
  }

  .ncp-hero .ncp-mobile-course-action .ncp-cta {
    width: 100%;
    min-height: 52px;
    padding: 13px 18px;
    text-align: center;
  }

  .ncp-hero .ncp-mobile-course-action .ncp-status {
    margin: 7px 2px 0;
    color: var(--ncp-desc, rgba(255,255,255,.82)) !important;
  }

  /* Desktop/tablet card is replaced by the compact top action on phones. */
  .ncp-hero .ncp-hero-right {
    display: none !important;
  }

  .ncp-hero .ncp-hero-left {
    order: 1;
  }

  .ncp-hero .ncp-hero-title {
    font-size: clamp(28px, 8.5vw, 36px) !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
  }

  .ncp-hero .ncp-meta-top {
    margin: 10px 0 14px;
    gap: 10px;
  }

  .ncp-hero .ncp-rating {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 8px;
  }

  .ncp-hero .ncp-stars {
    font-size: 16px;
  }

  .ncp-hero .ncp-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .ncp-hero .ncp-chip {
    display: flex;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
    overflow-wrap: anywhere;
  }

  .ncp-hero .ncp-hero-desc {
    line-height: 1.55;
  }

  .ncp-hero .ncp-curr {
    margin-top: 20px;
  }

  .ncp-hero .ncp-module {
    margin: 15px 0 18px;
  }

  .ncp-hero .ncp-mod-title {
    font-size: 16px !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .ncp-hero .ncp-item {
    align-items: flex-start;
    padding: 10px 11px !important;
    gap: 10px !important;
  }

  .ncp-hero .ncp-item-ic {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  .ncp-hero .ncp-item-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
}

@media (max-width: 420px) {
  .ncp-hero .ncp-chips {
    grid-template-columns: 1fr;
  }
}

/* ---------- Lesson player ---------- */
@media (max-width: 980px) {
  .ncp-player {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .ncp-mobile-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-bottom: 14px !important;
    align-items: stretch;
  }

  .ncp-mobile-bar .ncp-mobile-btn {
    min-height: 56px;
  }

  .ncp-mobile-bar .ncp-mobile-exit {
    min-height: 56px;
  }

  .ncp-mobile-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--ncp-panel-bd, rgba(148,163,184,.24));
    background: var(--ncp-panel-bg, rgba(2,6,23,.48));
    color: var(--ncp-text, #fff);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 900;
    font-size: 16px;
  }

  .ncp-mobile-bar .ncp-drawer {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    margin: 0 !important;
  }

  .ncp-mobile-bar .ncp-drawer.is-open {
    display: block !important;
  }

  .ncp-drawer .ncp-player-panel {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: min(72dvh, 720px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ncp-drawer .ncp-panel-scroll {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px 10px 0;
  }

  .ncp-player > .ncp-player-panel,
  .ncp-player > .ncp-rightbar {
    display: none !important;
  }

  .ncp-main {
    width: 100%;
    min-width: 0;
    height: auto !important;
    max-height: none !important;
    gap: 12px !important;
  }

  .ncp-player-content {
    width: 100%;
    min-width: 0;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ncp-head {
    min-width: 0;
  }

  .ncp-head-course {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  .ncp-head-sub {
    overflow-wrap: anywhere;
  }

  .ncp-module-head {
    align-items: flex-start !important;
  }

  .ncp-module-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ncp-module-count {
    white-space: normal !important;
    text-align: right;
  }

  .ncp-lesson-link {
    min-width: 0;
  }

  .ncp-lesson-right {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 700px) {
  .ncp-head {
    flex-direction: column;
    align-items: stretch !important;
    padding: 12px !important;
  }

  .ncp-head-course {
    font-size: 18px !important;
    line-height: 1.2;
  }

  .ncp-head-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .ncp-head-actions.has-completion {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ncp-head-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px !important;
    text-align: center;
    white-space: normal !important;
  }

  .ncp-progress,
  .ncp-mark {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ncp-module-head {
    flex-direction: column;
    gap: 4px !important;
  }

  .ncp-module-count {
    text-align: left;
  }

  .ncp-lesson-link {
    flex-direction: column;
    align-items: stretch !important;
  }

  .ncp-lesson-right {
    justify-content: flex-start;
    padding-left: 20px;
  }
}

@media (max-width: 480px) {
  .ncp-mobile-bar {
    grid-template-columns: 1fr;
  }

  .ncp-mobile-bar .ncp-drawer {
    grid-column: 1;
  }

  .ncp-mobile-btn,
  .ncp-mobile-exit {
    width: 100%;
  }
}

/* ---------- Login / registration ---------- */
@media (max-width: 859px) {
  .ncp-auth {
    padding: 22px !important;
  }

  .ncp-auth-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ncp-auth-title {
    font-size: clamp(28px, 7vw, 34px) !important;
    overflow-wrap: anywhere;
  }

  .ncp-auth-card,
  .ncp-auth-card-inner,
  .ncp-form {
    min-width: 0;
  }

  .ncp-form input:not([type="checkbox"]),
  .ncp-form select,
  .ncp-form textarea,
  .ncp-form button {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .ncp-auth {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .ncp-auth-head {
    margin-bottom: 14px !important;
  }

  .ncp-auth-logo img {
    max-width: min(160px, 70vw) !important;
  }

  .ncp-auth-title {
    font-size: 26px !important;
  }

  .ncp-auth-sub {
    font-size: 14px;
  }

  .ncp-auth-card {
    border-radius: 16px !important;
  }

  .ncp-form input:not([type="checkbox"]),
  .ncp-form select,
  .ncp-form textarea {
    font-size: 16px; /* prevents iOS focus zoom */
  }
}

/* ---------- Student dashboard ---------- */
.ncp-my-learning,
.ncp-course-cards,
.ncp-course-card {
  min-width: 0;
}

.ncp-course-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 980px) {
  .ncp-course-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.ncp-course-card h3,
.ncp-course-card small,
.ncp-course-card p {
  overflow-wrap: anywhere;
}

.ncp-learning-table {
  width: 100%;
}

@media (max-width: 700px) {
  .ncp-my-learning {
    gap: 18px !important;
  }

  .ncp-my-learning > h2 {
    font-size: clamp(22px, 7vw, 28px);
    margin-bottom: 4px;
  }

  .ncp-course-cards {
    grid-template-columns: 1fr !important;
  }

  .ncp-course-card {
    padding: 14px !important;
  }

  /* Tables keep all academic data without crushing columns. */
  .ncp-learning-table {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .ncp-learning-table thead,
  .ncp-learning-table tbody {
    min-width: 650px;
  }

  .ncp-learning-table th,
  .ncp-learning-table td {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ---------- Quiz / assignments / interactions ---------- */
.ncp-quiz-form,
.ncp-assignment-form,
.ncp-forum,
.ncp-reviews,
.ncp-access-restricted {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.ncp-quiz-question,
.ncp-assignment-status,
.ncp-assignment-ok,
.ncp-forum article,
.ncp-reviews article {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ncp-quiz-option {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.ncp-quiz-option input[type="radio"] {
  flex: 0 0 auto;
  margin-top: .25em;
}

.ncp-assignment-form input[type="file"],
.ncp-forum textarea,
.ncp-reviews textarea,
.ncp-reviews select {
  width: 100%;
  max-width: 100%;
}

.ncp-forum form,
.ncp-reviews form {
  width: 100%;
  max-width: 100% !important;
}

@media (max-width: 600px) {
  .ncp-quiz-question,
  .ncp-assignment-form,
  .ncp-assignment-status,
  .ncp-assignment-ok {
    padding: 12px !important;
  }

  .ncp-quiz-form button,
  .ncp-assignment-form button,
  .ncp-forum button,
  .ncp-reviews button {
    width: 100%;
    min-height: 46px;
  }

  .ncp-forum article > div[style*="margin-left"] {
    margin-left: 10px !important;
    padding-left: 10px !important;
  }
}

/* ---------- Site-specific Elementor mobile container fix ----------
 * Page 4728 / container 980ab38.
 * Elementor sets 50px horizontal padding through CSS custom properties.
 * Force horizontal padding to zero only on phone layouts.
 */
@media (max-width: 767px) {
  .elementor-4728 .elementor-element.elementor-element-980ab38,
  .elementor-element.elementor-element-980ab38 {
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
  }
}


/* NCP 2.1.3 - Unified auth / course-exit buttons */
.ncp-auth .ncp-form button {
  background:#000 !important;
  color:#fff !important;
  border:1px solid #000 !important;
  border-radius:10px !important;
  font-weight:900 !important;
}
.ncp-auth .ncp-form button:hover,
.ncp-auth .ncp-form button:focus {
  background:#111 !important;
  color:#fff !important;
}
.ncp-mini-btn,
.ncp-mobile-exit {
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
  font-weight:900 !important;
}
.ncp-mini-btn:hover,
.ncp-mobile-exit:hover {
  background:#111 !important;
  color:#fff !important;
  border-color:#000 !important;
}