/* ==========================================================================
   Escuela Jing Fang — Piel visual para LearnPress + WooCommerce
   Re-skin del LMS con el sistema de diseño de ryukai.org / pagina 2026 v2.
   Basado en la lectura real de wp-content/plugins/learnpress/assets/css/
   learnpress.css (LearnPress 4.2.3.3) — variables --lp-primary-color,
   --lp-secondary-color, --lp-button-background-color, --lp-button-color
   confirmadas ahí, además de selectores reales (.lp-button, .course-tab-panel,
   .lp-content-area, #checkout-payment, .lp-user-profile).
   ========================================================================== */

/* --- 1. Paleta: redefine las variables que LearnPress ya usa internamente
   (docenas de reglas en su propio CSS leen estas 4 variables, así que esto
   re-tiñe la mayoría de la interfaz sin tocar selector por selector) --- */
:root {
  --lp-primary-color: #718c69 !important;            /* sage */
  --lp-secondary-color: #3a4733 !important;          /* sage-deep */
  --lp-button-background-color: #141414 !important;  /* teal / t-dark */
  --lp-button-color: #faf5ed !important;             /* cream */

  /* tokens propios, por si los templates override los necesitan más adelante */
  --rjf-cream: #faf5ed;
  --rjf-paper: #f4ecdf;
  --rjf-sand: #ece1cf;
  --rjf-sage: #718c69;
  --rjf-sage-dk: #566b50;
  --rjf-sage-lt: #94ab8d;
  --rjf-sage-deep: #3a4733;
  --rjf-dark: #141414;
  --rjf-body: #384a44;
  --rjf-muted: #6f7d6a;
  --rjf-faint: #a99d87;
  --rjf-rule: #e4d9c6;
  --rjf-serif: 'Cormorant Garamond', Georgia, serif;
  --rjf-sans: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
}

/* --- 2. Tipografía y fondo base en cualquier página con contenido de
   LearnPress o WooCommerce (checkout, cuenta, cursos) --- */
body.learnpress-page,
body.learnpress,
body.woocommerce-page,
body.woocommerce-account {
  background: var(--rjf-cream);
  font-family: var(--rjf-sans);
  color: var(--rjf-dark);
}

body.learnpress-page h1,
body.learnpress-page h2,
body.learnpress-page h3,
body.learnpress-page h4,
body.learnpress .lp-content-area h1,
body.learnpress .lp-content-area h2,
body.learnpress .lp-content-area h3,
body.woocommerce-page h1,
body.woocommerce-page h2 {
  font-family: var(--rjf-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--rjf-dark);
}

/* --- 3. Aplanado global: LearnPress usa esquinas redondeadas y sombras
   (139 y 33 apariciones respectivamente en su CSS) — el sistema de diseño
   de la escuela es plano, de bordes rectos. Esta es una pasada amplia;
   se refina componente por componente más abajo. --- */
body.learnpress-page .lp-content-area *,
body.learnpress-page .lp-content-area *::before,
body.learnpress-page .lp-content-area *::after,
body.woocommerce-page *,
#checkout-payment * {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- 4. Botones (.lp-button es la clase real confirmada en el HTML vivo:
   class="lp-button button button-purchase-course") --- */
body.learnpress-page .lp-button,
body.learnpress-page button.lp-button,
body.woocommerce-page .button,
#checkout-payment #checkout-order-action button {
  font-family: var(--rjf-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  border: none;
  background: var(--rjf-dark);
  color: var(--rjf-cream);
  transition: background 0.18s;
}
body.learnpress-page .lp-button:hover,
body.woocommerce-page .button:hover,
#checkout-payment #checkout-order-action button:hover {
  background: var(--rjf-sage-dk);
  opacity: 1;
  color: var(--rjf-cream);
}
body.learnpress-page .lp-button.btn-no {
  background: transparent;
  border: 1px solid var(--rjf-dark);
  color: var(--rjf-dark);
}

/* --- 5. Tarjetas de curso (archivo / listado) --- */
body.learnpress-page .course,
body.learnpress-page .lp-archive-courses .course {
  border: 1px solid var(--rjf-rule);
  background: var(--rjf-cream);
}

/* --- 6. Tabs de la página de curso (Contenido / Descripción / Instructor) --- */
body.learnpress-page .course-tab-panel {
  background: var(--rjf-cream);
  border: 1px solid var(--rjf-rule);
}
body.learnpress-page .course-tab-panel .course-description h4 {
  font-family: var(--rjf-serif);
  font-weight: 500;
  color: var(--rjf-dark);
}
body.learnpress-page .lp-course-author {
  border-top: 1px solid var(--rjf-rule);
}

/* --- 7. Currículum (secciones/módulos y lecciones) --- */
body.learnpress-page .course-curriculum .section {
  border: 1px solid var(--rjf-rule);
  background: var(--rjf-cream);
}
body.learnpress-page .course-curriculum .section-header {
  background: var(--rjf-paper);
  font-family: var(--rjf-serif);
  font-size: 1.05rem;
}
body.learnpress-page .course-item.course-item-preview .item-name,
body.learnpress-page .course-item a {
  color: var(--rjf-body);
}

/* --- 8. Checkout de WooCommerce/LearnPress --- */
#checkout-payment .lp-payment-method {
  border: 1px solid var(--rjf-rule);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout #payment {
  border: 1px solid var(--rjf-rule) !important;
  background: var(--rjf-cream);
}

/* --- 9. Perfil / dashboard del estudiante --- */
body.learnpress-page .lp-user-profile {
  background: var(--rjf-cream);
}
body.learnpress-page .lp-user-profile ul.learn-press-courses .course {
  border-bottom: 1px solid var(--rjf-rule);
}

/* --- 10. Barra de progreso --- */
body.learnpress-page .course-progress .lp-progress-bar,
body.learnpress-page .learn-press-progress-bar {
  background: var(--rjf-sand);
}
body.learnpress-page .course-progress .lp-progress-bar span,
body.learnpress-page .learn-press-progress-bar span {
  background: var(--rjf-sage);
}