.elementor-kit-5{--e-global-color-primary:#7651E0;--e-global-color-secondary:#006F35;--e-global-color-text:#1C2420;--e-global-color-accent:#5B3BBE;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════════
   NJ — Personalización Tutor LMS 4.0.3 + Elementor 4.2
   Natural Juice × Betta · VERSIÓN 3 (con !important) — 24/07/2026
   ---------------------------------------------------------------
   POR QUÉ ESTA VERSIÓN LLEVA !important
   El CSS adicional del Personalizador carga temprano y pierde contra
   dos cosas: los estilos inline que Tutor 4.0 inyecta desde Settings →
   Design, y los .elementor-kit-5es de alta especificidad que genera Elementor
   (.elementor-element-XXXX .elementor-widget-container ...). El
   !important es lo que da vuelta esa pelea.

   TRES ADVERTENCIAS HONESTAS
   1. !important NO arregla un .elementor-kit-5 que no matchea. Si una regla
      no hace nada, el problema es el nombre de la clase, no la fuerza.
      Eso se resuelve con el inspector (sección 6), no agregando más.
   2. Las reglas responsive de la sección 7 también llevan !important.
      Es obligatorio: sin eso, una regla base con !important le gana a
      la de la media query y el mobile queda roto.
   3. La sección 5 son SELECTORES CANDIDATOS, no verificados contra tu
      instalación. Tutor 4.0 reescribió el frontend; algunos van a
      matchear y otros no. Un .elementor-kit-5 que no matchea no rompe nada
      (el navegador lo ignora), así que van igual — pero están
      marcados para que en el QA sepas cuáles confirmar.
   ---------------------------------------------------------------
   CARGA: Apariencia → Personalizar → CSS adicional. Nunca el plugin.
   Después de pegar: LiteSpeed → Purge All.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS (del mockup aprobado) ─────────────────────────────── */
:root{
  --nj:#006F35; --nj-deep:#00532A; --nj-tint:#E9F3ED;
  --violet:#7651E0; --violet-deep:#5B3BBE; --violet-tint:#F0ECFB;
  --ink:#1C2420; --ink-soft:#5A665F; --line:#E3E8E3;
  --paper:#F6F8F5; --card:#FFFFFF;
  --amber:#B7791F; --amber-tint:#FBF3E4;
  --nj-r:12px; --nj-rs:8px;
  --nj-shadow:0 1px 2px rgba(28,36,32,.04),0 5px 16px -6px rgba(28,36,32,.08);
  --nj-shadow-lift:0 4px 10px rgba(28,36,32,.06),0 14px 30px -10px rgba(28,36,32,.13);
  --nj-font:'Manrope',system-ui,sans-serif;
}

/* ── 2. VARIABLES DE TUTOR — el override que más rinde ────────────
   Acá el !important es clave: Tutor 4.0 escribe estas variables
   inline en :root desde Settings → Design, y sin !important gana él.
   Como Design solo tiene UN campo de color (ahí va el violeta),
   este bloque es el que mete el verde NJ en los estados de éxito.  */
:root,
body,
.tutor-wrap,
[class*="tutor-"]{
  --tutor-color-primary:var(--violet) !important;
  --tutor-color-primary-hover:var(--violet-deep) !important;
  --tutor-color-primary-rgb:118,81,224 !important;
  --tutor-color-secondary:var(--nj) !important;
  --tutor-color-success:var(--nj) !important;
  --tutor-color-success-rgb:0,111,53 !important;
  --tutor-color-warning:var(--amber) !important;
  --tutor-body-color:var(--ink) !important;
  --tutor-color-muted:var(--ink-soft) !important;
  --tutor-border-color:var(--line) !important;
  --tutor-font-family:var(--nj-font) !important;
  --tutor-border-radius:var(--nj-rs) !important;
}

/* ── 3. HEADER / FOOTER / LOGIN (clases nj-*, estables) ──────────── */

.nj-topbar{background:#fff !important;border-bottom:1px solid var(--line) !important;position:sticky !important;top:0 !important;z-index:50 !important;}
.nj-topbar-in{max-width:1200px !important;margin:0 auto !important;width:100% !important;display:flex !important;align-items:center !important;gap:28px !important;padding:12px 24px !important;}
.nj-logo img{height:40px !important;width:auto !important;}
.nj-topnav{margin-right:auto !important;}
.nj-topnav a{font-size:13.5px !important;font-weight:700 !important;color:var(--ink-soft) !important;padding:8px 14px !important;border-radius:var(--nj-rs) !important;text-decoration:none !important;}
.nj-topnav a:hover{color:var(--ink) !important;background:var(--paper) !important;}
.nj-topnav .current-menu-item a{color:var(--violet-deep) !important;background:var(--violet-tint) !important;}
.nj-userchip,.nj-userchip .elementor-heading-title{font-size:13px !important;font-weight:700 !important;color:var(--ink) !important;}
.nj-userchip .nj-user-area{font-weight:600 !important;font-size:12px !important;color:var(--ink-soft) !important;}
.nj-btn-logout .elementor-button{background:#fff !important;color:var(--ink) !important;border:1.5px solid var(--line) !important;border-radius:var(--nj-rs) !important;font-weight:700 !important;font-size:12.5px !important;padding:8px 14px !important;}
.nj-btn-logout .elementor-button:hover{border-color:var(--violet) !important;color:var(--violet-deep) !important;}

.nj-footer{background:#fff !important;border-top:1px solid var(--line) !important;margin-top:48px !important;}
.nj-footer-in{max-width:1200px !important;margin:0 auto !important;width:100% !important;display:flex !important;align-items:center !important;gap:10px !important;padding:18px 24px !important;font-size:12px !important;color:var(--ink-soft) !important;}
.nj-footer-logo img{height:22px !important;width:auto !important;opacity:.9 !important;}
.nj-footer-logo-betta img{height:16px !important;}

.nj-login-hero{min-height:calc(100vh - 120px) !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:40px 20px !important;background:var(--paper) !important;}
.nj-login-card{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:var(--nj-r) !important;box-shadow:var(--nj-shadow) !important;max-width:420px !important;width:100% !important;padding:32px 30px !important;}
.nj-login-logos{display:flex !important;align-items:center !important;justify-content:center !important;gap:12px !important;margin-bottom:18px !important;}
.nj-login-logo img{height:44px !important;width:auto !important;}
.nj-login-logo-betta img{height:26px !important;}
.nj-login-x .elementor-heading-title{font-size:18px !important;color:var(--ink-soft) !important;font-weight:400 !important;}
.nj-login-title .elementor-heading-title{font-size:21px !important;font-weight:800 !important;letter-spacing:-.02em !important;text-align:center !important;margin-bottom:4px !important;}
.nj-login-sub{text-align:center !important;font-size:13px !important;color:var(--ink-soft) !important;margin-bottom:18px !important;}
.nj-login-foot{font-size:11.5px !important;color:var(--ink-soft) !important;text-align:center !important;margin-top:14px !important;line-height:1.5 !important;}

/* Form nativo [tutor_login]: seleccionado por tipo de elemento, no por
   clase de Tutor → bajo riesgo de no matchear */
.nj-login-form label{font-size:12px !important;font-weight:700 !important;color:var(--ink-soft) !important;letter-spacing:.02em !important;}
.nj-login-form input[type="text"],
.nj-login-form input[type="email"],
.nj-login-form input[type="password"]{
  width:100% !important;border:1.5px solid var(--line) !important;border-radius:var(--nj-rs) !important;
  padding:11px 13px !important;font-family:inherit !important;font-size:14.5px !important;
}
.nj-login-form input:focus{border-color:var(--violet) !important;outline:none !important;box-shadow:0 0 0 3px rgba(118,81,224,.15) !important;}
.nj-login-form button[type="submit"],
.nj-login-form input[type="submit"]{
  width:100% !important;background:var(--violet) !important;border:none !important;color:#fff !important;
  border-radius:var(--nj-rs) !important;font-weight:700 !important;padding:11px 20px !important;cursor:pointer !important;
}
.nj-login-form button[type="submit"]:hover{background:var(--violet-deep) !important;}

/* ── 4. WRAPPERS Y SINGLE DE CURSO (clases nj-*, estables) ───────── */
.nj-dash-wrap,.nj-catalog{max-width:1200px !important;margin:0 auto !important;width:100% !important;padding:28px 24px !important;}
.nj-catalog-title .elementor-heading-title{font-size:26px !important;font-weight:800 !important;letter-spacing:-.02em !important;}
.nj-catalog-sub{font-size:13.5px !important;color:var(--ink-soft) !important;margin:6px 0 22px !important;}

.nj-course-head{max-width:1200px !important;margin:0 auto !important;width:100% !important;padding:28px 24px 0 !important;}
.nj-course-chips{display:flex !important;gap:8px !important;margin-bottom:8px !important;}
.nj-chip-level a,.nj-chip-level span,.nj-chip-cats a{
  display:inline-flex !important;font-size:11.5px !important;font-weight:700 !important;
  padding:3px 10px !important;border-radius:999px !important;
  background:var(--violet-tint) !important;color:var(--violet-deep) !important;text-decoration:none !important;
}
.nj-course-title h1,.nj-course-title h2,.nj-course-title .elementor-heading-title{
  font-size:clamp(22px,2.6vw,30px) !important;font-weight:800 !important;letter-spacing:-.02em !important;margin:6px 0 8px !important;
}
.nj-course-meta{display:flex !important;gap:16px !important;flex-wrap:wrap !important;font-size:12.5px !important;font-weight:600 !important;color:var(--ink-soft) !important;padding:0 0 20px !important;}
.nj-course-meta b,.nj-course-meta strong{color:var(--ink) !important;}
.nj-course-grid{max-width:1200px !important;margin:0 auto !important;width:100% !important;display:flex !important;gap:28px !important;align-items:flex-start !important;padding:0 24px 40px !important;}
.nj-course-main{flex:1 !important;min-width:0 !important;}
.nj-course-side{width:320px !important;flex-shrink:0 !important;display:flex !important;flex-direction:column !important;gap:16px !important;}
.nj-sec-title .elementor-heading-title{font-size:17px !important;font-weight:800 !important;margin:20px 0 12px !important;}
.nj-sidebox{
  background:var(--card) !important;border:1px solid var(--line) !important;border-radius:var(--nj-r) !important;
  box-shadow:var(--nj-shadow) !important;padding:18px !important;
}
.nj-sidebox h3,.nj-sidebox h4{font-size:14px !important;font-weight:800 !important;margin-bottom:10px !important;}
.nj-sidebox ul{list-style:none !important;padding:0 !important;margin:0 !important;}
.nj-sidebox li{font-size:12.5px !important;color:var(--ink-soft) !important;padding:5px 0 !important;}
.nj-sidebox button,.nj-sidebox .tutor-btn,.nj-sidebox a.tutor-btn{border-radius:var(--nj-rs) !important;font-weight:700 !important;}

/* ═══════════════════════════════════════════════════════════════════
   5. FRONTEND NATIVO DE TUTOR — SELECTORES CANDIDATOS ⚠ SIN VERIFICAR
   Tutor 4.0 reescribió el frontend del alumno. Estos nombres vienen
   de la convención .tutor-* histórica; parte sigue vigente y parte no.
   Lo que no matchee, el navegador lo ignora sin romper nada.
   En el QA (paso 7 de la guía): abrí el inspector, mirá cuál de estos
   bloques quedó sin efecto, y corregí el .elementor-kit-5 con el real.
   Marcá con ✓ los confirmados a medida que los valides.
   ═══════════════════════════════════════════════════════════════════ */

/* [ ] Botones generales */
.tutor-btn{border-radius:var(--nj-rs) !important;font-weight:700 !important;}
.tutor-btn-primary{background:var(--violet) !important;border-color:var(--violet) !important;color:#fff !important;}
.tutor-btn-primary:hover{background:var(--violet-deep) !important;border-color:var(--violet-deep) !important;}
.tutor-btn-outline-primary{color:var(--ink) !important;border:1.5px solid var(--line) !important;background:#fff !important;}
.tutor-btn-outline-primary:hover{border-color:var(--violet) !important;color:var(--violet-deep) !important;}

/* [ ] Estados verdes — lo que Design NO puede pintar (campo único) */
.tutor-btn-success,
button[name="complete_lesson_btn"],
.tutor-course-complete-btn{
  background:var(--nj) !important;border-color:var(--nj) !important;color:#fff !important;
}
.tutor-btn-success:hover,
button[name="complete_lesson_btn"]:hover{background:var(--nj-deep) !important;border-color:var(--nj-deep) !important;}
.tutor-badge-success,.tutor-text-success{background:var(--nj-tint) !important;color:var(--nj-deep) !important;}
.tutor-badge-danger{background:var(--amber-tint) !important;color:var(--amber) !important;}

/* [ ] Barras de progreso */
.tutor-progress-bar{height:6px !important;border-radius:99px !important;background:#ECF0EC !important;overflow:hidden !important;}
.tutor-progress-bar .tutor-progress-value,
.tutor-progress-bar > span{background:var(--violet) !important;border-radius:99px !important;}

/* [ ] Tarjetas de curso (dashboard, catálogo, widget lista) */
.tutor-course-card{
  background:var(--card) !important;border:1px solid var(--line) !important;
  border-radius:var(--nj-r) !important;box-shadow:var(--nj-shadow) !important;overflow:hidden !important;
}
.tutor-course-card:hover{box-shadow:var(--nj-shadow-lift) !important;}
.tutor-course-card .tutor-course-name,
.tutor-course-card .tutor-course-name a{font-size:15.5px !important;font-weight:800 !important;line-height:1.3 !important;color:var(--ink) !important;text-decoration:none !important;}
.tutor-course-card .tutor-course-name a:hover{color:var(--violet-deep) !important;}
.tutor-course-card .tutor-meta{font-size:12px !important;font-weight:600 !important;color:var(--ink-soft) !important;}
.tutor-course-card .tutor-course-category a{
  display:inline-flex !important;font-size:11.5px !important;font-weight:700 !important;
  padding:3px 10px !important;border-radius:999px !important;
  background:var(--nj-tint) !important;color:var(--nj-deep) !important;text-decoration:none !important;
}

/* [ ] Dashboard del alumno */
.tutor-dashboard .tutor-dashboard-left-menu{
  background:var(--card) !important;border:1px solid var(--line) !important;
  border-radius:var(--nj-r) !important;box-shadow:var(--nj-shadow) !important;padding:8px !important;
}
.tutor-dashboard .tutor-dashboard-menu-item a{
  font-size:13.5px !important;font-weight:600 !important;color:var(--ink-soft) !important;
  padding:10px 14px !important;border-radius:var(--nj-rs) !important;text-decoration:none !important;
}
.tutor-dashboard .tutor-dashboard-menu-item a:hover{background:var(--paper) !important;color:var(--ink) !important;}
.tutor-dashboard .tutor-dashboard-menu-item.active a,
.tutor-dashboard .tutor-dashboard-menu-item a.active{background:var(--violet-tint) !important;color:var(--violet-deep) !important;font-weight:700 !important;}
.tutor-dashboard .tutor-nav .tutor-nav-link{
  font-size:12.5px !important;font-weight:700 !important;color:var(--ink-soft) !important;
  border:1.5px solid var(--line) !important;border-radius:999px !important;padding:6px 14px !important;background:#fff !important;
}
.tutor-dashboard .tutor-nav .tutor-nav-link.active{background:var(--ink) !important;border-color:var(--ink) !important;color:#fff !important;}

/* [ ] Temario / acordeón */
.tutor-accordion-item{
  background:var(--card) !important;border:1px solid var(--line) !important;
  border-radius:var(--nj-r) !important;box-shadow:var(--nj-shadow) !important;margin-bottom:12px !important;overflow:hidden !important;
}
.tutor-accordion-item-header{font-weight:700 !important;font-size:14px !important;padding:14px 18px !important;}
.tutor-accordion-item-header:hover{background:var(--paper) !important;}
.tutor-course-topic-item a{
  font-size:13px !important;font-weight:600 !important;color:var(--ink) !important;
  padding:11px 18px !important;text-decoration:none !important;
}
.tutor-course-topic-item a:hover{background:var(--paper) !important;}

/* [ ] Entorno de aprendizaje / lección */
.tutor-course-single-sidebar-wrapper{background:#fff !important;border-right:1px solid var(--line) !important;}
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active a,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item a.active{
  background:var(--violet-tint) !important;color:var(--violet-deep) !important;font-weight:700 !important;
}
.tutor-video-player{border-radius:var(--nj-r) !important;overflow:hidden !important;}
.tutor-attachment-file,.tutor-lesson-attachment .tutor-card{
  background:var(--nj-tint) !important;border:1px solid #D6E6DC !important;border-radius:var(--nj-r) !important;padding:14px 16px !important;
}
.tutor-attachment-file .tutor-btn{background:var(--nj) !important;border-color:var(--nj) !important;color:#fff !important;}

/* [ ] Quiz */
.tutor-quiz-question .tutor-quiz-answer-single,
.quiz-question-ans-choice{
  border:1.5px solid var(--line) !important;border-radius:var(--nj-rs) !important;
  padding:12px 14px !important;margin-bottom:8px !important;background:#fff !important;cursor:pointer !important;
}
.tutor-quiz-question .tutor-quiz-answer-single:hover,
.quiz-question-ans-choice:hover{border-color:var(--violet) !important;}
.tutor-quiz-question .tutor-quiz-answer-single.is-checked,
.quiz-question-ans-choice.is-checked{border-color:var(--violet) !important;background:var(--violet-tint) !important;}

/* [ ] Ejercicios (assignments) */
.tutor-assignment-body,
.tutor-assignment-details .tutor-assignment-content{
  background:var(--violet-tint) !important;border-left:3px solid var(--violet) !important;
  border-radius:var(--nj-rs) !important;padding:16px 18px !important;font-size:14px !important;
}
.tutor-assignment-attachment-upload{border:2px dashed var(--line) !important;border-radius:var(--nj-r) !important;background:#fff !important;}

/* ── 6. HUECOS PARA EL QA ─────────────────────────────────────────
   Si algo de la sección 5 no matchea, el .elementor-kit-5 real va acá abajo.
   Un componente por línea, con !important.

   [QA] Dashboard:
   [QA] Entorno de aprendizaje:
   [QA] Quiz:
   [QA] Assignment:
   [QA] Otro:
   ─────────────────────────────────────────────────────────────── */

/* ── 7. RESPONSIVE — también con !important (obligatorio) ─────────
   Sin !important acá, las reglas base de arriba le ganarían y el
   mobile quedaría roto. No sacar.                                   */
@media (max-width:960px){
  .nj-course-grid{flex-direction:column !important;}
  .nj-course-side{width:100% !important;}
  .nj-topbar-in{gap:14px !important;padding:10px 16px !important;}
  .nj-userchip .nj-user-area{display:none !important;}
  .nj-dash-wrap,.nj-catalog,.nj-course-head{padding-left:16px !important;padding-right:16px !important;}
  .nj-login-hero{padding:24px 16px !important;}
  .nj-login-card{padding:24px 20px !important;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

.nj-topbar,.nj-topbar *,
.nj-footer,.nj-footer *,
.nj-login-card,.nj-login-card *,
.nj-catalog,.nj-catalog *,
.nj-course-head,.nj-course-head *,
.nj-course-grid,.nj-course-grid *{
  font-family:var(--nj-font) !important;
}/* End custom CSS */