/*==============================================================================
  MSM ACADEMY — CAPA DARK
  ------------------------------------------------------------------------------
  Remapea las CSS custom properties que BuddyBoss y Tutor LMS ya publican.

  Por qué así y no a fuerza de !important:
  BuddyBoss imprime ~102 variables --bb-* y Tutor ~12 variables --tutor-* en un
  <style> inline dentro de wp_head. Son su API pública de theming: sobreviven a
  los updates. Reescribirlas desde `body.msm-ui` (mayor especificidad que :root,
  y cargado después) vuelve oscuro TODO lo que las consume, incluidos los
  componentes que aún no existen y que lleguen en próximas versiones.

  Solo se aterriza a selectores concretos donde el plugin hardcodea un color.
==============================================================================*/

/*------------------------------------------------------------------------------
  1. BUDDYBOSS — superficies y texto
------------------------------------------------------------------------------*/
body.msm-ui {
  --bb-body-background-color:            var(--msm-bg);
  --bb-body-background-color-rgb:        26, 29, 26;
  --bb-content-background-color:         var(--msm-surface-2);
  --bb-content-alternate-background-color: var(--msm-surface-1);
  --bb-content-border-color:             var(--msm-line);
  --bb-content-border-color-rgb:         246, 241, 230;

  --bb-body-text-color:       rgba(246, 241, 230, .72);
  --bb-body-text-color-rgb:   246, 241, 230;
  --bb-headings-color:        var(--msm-fg);
  --bb-headings-color-rgb:    246, 241, 230;
  --bb-alternate-text-color:  var(--msm-muted-2);
  --bb-alternate-text-color-rgb: 246, 241, 230;

  --bb-cover-image-background-color: var(--msm-surface-3);
}

/*------------------------------------------------------------------------------
  2. BUDDYBOSS — acento
  El accent que ya tenías (#EB761B / #D26E23) coincide con el gold del home,
  así que aquí solo se consolida y se gana el hover luminoso.
------------------------------------------------------------------------------*/
body.msm-ui {
  --bb-primary-color:      var(--msm-gold);
  --bb-primary-color-rgb:  var(--msm-gold-rgb);

  --bb-primary-button-background-regular: var(--msm-gold);
  --bb-primary-button-background-hover:   var(--msm-gold-hover);
  --bb-primary-button-border-regular:     var(--msm-gold);
  --bb-primary-button-border-hover:       var(--msm-gold-hover);
  --bb-primary-button-text-regular:       #fff;
  --bb-primary-button-text-hover:         #fff;
  --bb-primary-button-text-hover-rgb:     255, 255, 255;
  --bb-primary-button-focus-shadow:       0 0 0 3px rgba(var(--msm-gold-rgb), .30);

  /* El secundario deja de ser gris claro y pasa a "ghost" sobre oscuro */
  --bb-secondary-button-background-regular: rgba(246, 241, 230, .07);
  --bb-secondary-button-background-hover:   var(--msm-gold);
  --bb-secondary-button-border-regular:     var(--msm-line-2);
  --bb-secondary-button-border-hover:       var(--msm-gold);
  --bb-secondary-button-text-regular:       var(--msm-fg);
  --bb-secondary-button-text-hover:         #fff;
  --bb-secondary-button-focus-shadow:       0 0 0 3px rgba(var(--msm-gold-rgb), .22);

  --bb-outline-button-focus-shadow: 0 0 0 3px rgba(var(--msm-gold-rgb), .22);
}

/*------------------------------------------------------------------------------
  3. BUDDYBOSS — header, sidenav, footer, estados
------------------------------------------------------------------------------*/
body.msm-ui {
  /* Header: el mismo negro profundo del mega menú del home */
  --bb-header-background:           var(--msm-surface-3);
  --bb-header-alternate-background: var(--msm-surface-1);
  --bb-header-links:                var(--msm-fg);
  --bb-header-links-hover:          var(--msm-gold);

  /* BuddyPanel / navegación lateral */
  --bb-sidenav-background:                    var(--msm-surface-3);
  --bb-sidenav-menu-background-color-regular: transparent;
  --bb-sidenav-menu-background-color-hover:   rgba(246, 241, 230, .06);
  --bb-sidenav-menu-background-color-active:  var(--msm-gold);
  --bb-sidenav-text-regular: var(--msm-muted);
  --bb-sidenav-text-hover:   var(--msm-fg);
  --bb-sidenav-text-active:  #fff;
  --bb-sidenav-count-background-color-regular: rgba(246, 241, 230, .08);
  --bb-sidenav-count-background-color-hover:   var(--msm-gold);
  --bb-sidenav-count-background-color-active:  rgba(0, 0, 0, .28);
  --bb-sidenav-count-text-color-regular: var(--msm-muted);
  --bb-sidenav-count-text-color-hover:   #fff;
  --bb-sidenav-count-text-color-active:  #fff;

  /* Footer nativo: se oculta en msm-shell.css, pero queda coherente por si asoma */
  --bb-footer-background:        var(--msm-bg);
  --bb-footer-widget-background: var(--msm-bg);
  --bb-footer-text-color:        var(--msm-muted-2);
  --bb-footer-menu-link-color-regular: var(--msm-muted);
  --bb-footer-menu-link-color-hover:   var(--msm-gold);
  --bb-footer-menu-link-color-active:  var(--msm-fg);

  /* Estados y utilidades */
  --bb-danger-color:  var(--msm-danger);
  --bb-danger-color-rgb: 224, 82, 82;
  --bb-success-color: var(--msm-success);
  --bb-success-color-rgb: 63, 191, 106;
  --bb-warning-color: var(--msm-warning);
  --bb-warning-color-rgb: 237, 177, 0;
  --bb-default-notice-color: var(--msm-gold);
  --bb-default-notice-color-rgb: var(--msm-gold-rgb);

  --bb-tooltip-background:     var(--msm-surface-3);
  --bb-tooltip-background-rgb: 14, 12, 9;
  --bb-tooltip-color:          var(--msm-fg);

  --bb-label-background-color: rgba(var(--msm-gold-rgb), .16);
  --bb-label-text-color:       var(--msm-gold-hover);

  --bb-input-focus-border-color: var(--msm-gold);
  --bb-input-focus-shadow:       0 0 0 3px rgba(var(--msm-gold-rgb), .18);

  /* Geometría: pills y cards generosas, como el home */
  --bb-block-radius:       var(--msm-r-lg);
  --bb-block-radius-inner: var(--msm-r-md);
  --bb-button-radius:      var(--msm-r-pill);
  --bb-input-radius:       10px;
  --bb-option-radius:      8px;
  --bb-label-type-radius:  var(--msm-r-pill);
  --bb-checkbox-radius:    6px;
}

/*------------------------------------------------------------------------------
  4. BUDDYBOSS READYLAUNCH (--bb-rl-*)
  Set de tokens del layout nuevo. Se alinea al mismo gold para que no aparezcan
  islas claras si activas ReadyLaunch en alguna pantalla.
------------------------------------------------------------------------------*/
body.msm-ui {
  --bb-rl-primary-color:  var(--msm-gold);
  --bb-rl-primary-300:    var(--msm-gold-hover);
  --bb-rl-primary-700:    #a34407;

  --bb-rl-background-brand-primary-hover-color:   var(--msm-gold-hover);
  --bb-rl-background-brand-disabled-color:        rgba(var(--msm-gold-rgb), .40);
  --bb-rl-background-brand-secondary-color:       rgba(var(--msm-gold-rgb), .14);
  --bb-rl-background-brand-secondary-hover-color: rgba(var(--msm-gold-rgb), .24);

  --bb-rl-border-brand-primary-color: rgba(var(--msm-gold-rgb), .38);
  --bb-rl-icon-brand-primary-color:   var(--msm-gold-hover);
  --bb-rl-icon-brand-disabled-color:  rgba(var(--msm-gold-rgb), .40);
  --bb-rl-text-brand-secondary-color: var(--msm-gold-hover);
}

/*------------------------------------------------------------------------------
  5. TUTOR LMS
  Tutor venía con primario AZUL (#3E64DE), el choque más visible contra el home.
------------------------------------------------------------------------------*/
body.msm-ui {
  --tutor-color-primary:          var(--msm-gold);
  --tutor-color-primary-rgb:      var(--msm-gold-rgb);
  --tutor-color-primary-hover:    var(--msm-gold-hover);
  --tutor-color-primary-hover-rgb: 251, 139, 54;

  /* `--tutor-color-white` es un token de SUPERFICIE en Tutor: lo consumen
     cards, dropdowns, modales y form controls como background. Al oscurecerlo,
     todo el chrome de Tutor se vuelve dark sin tocar un solo selector.
     Los 3 casos donde sí es texto se corrigen en la sección 6. */
  --tutor-color-white: var(--msm-surface-2);

  --tutor-body-color:      rgba(246, 241, 230, .78);
  --tutor-body-color-rgb:  246, 241, 230;

  --tutor-border-color:     var(--msm-line);
  --tutor-border-color-rgb: 246, 241, 230;

  --tutor-color-gray:      var(--msm-surface-1);
  --tutor-color-gray-rgb:  22, 24, 15;
  --tutor-color-gray-10:   var(--msm-surface-1);

  --tutor-color-secondary: var(--msm-muted);
  --tutor-color-subdued:   var(--msm-muted-2);
  --tutor-color-muted:     var(--msm-muted-2);
  --tutor-color-hints:     var(--msm-muted-2);

  --tutor-color-success: var(--msm-success);
  --tutor-color-success-rgb: 63, 191, 106;
  --tutor-color-danger:  var(--msm-danger);
  --tutor-color-danger-rgb: 224, 82, 82;
  --tutor-color-warning: var(--msm-warning);
  --tutor-color-warning-rgb: 237, 177, 0;

  --tutor-table-border-radius: var(--msm-r-md);
}

/*------------------------------------------------------------------------------
  6. REPESCAS
  Donde el plugin hardcodea blanco/gris en vez de usar su variable.
------------------------------------------------------------------------------*/

/* Texto que SÍ debe ser blanco real sobre relleno gold */
body.msm-ui .tutor-btn-primary,
body.msm-ui .tutor-btn.tutor-btn-primary,
body.msm-ui .tutor-badge-primary,
body.msm-ui .tutor-course-certificate-tabs.tutor-nav > li > a.is-active,
body.msm-ui .tooltip-wrap .tooltip-txt {
  color: #fff;
}

/* Lienzos de página */
body.msm-ui #page,
body.msm-ui .site,
body.msm-ui .site-content,
body.msm-ui #primary,
body.msm-ui .bb-grid.site-content-grid,
body.msm-ui .entry-content,
body.msm-ui .tutor-wrap,
body.msm-ui .tutor-container {
  background: transparent;
  color: var(--msm-fg);
}

/* Titulares: la voz del home es Roboto 800 muy apretado */
body.msm-ui h1, body.msm-ui h2, body.msm-ui h3,
body.msm-ui h4, body.msm-ui h5, body.msm-ui h6 {
  color: var(--msm-fg);
  font-family: var(--msm-display);
  letter-spacing: -.015em;
}
body.msm-ui h1, body.msm-ui h2 { font-weight: 800; }
body.msm-ui h3, body.msm-ui h4 { font-weight: 700; }

body.msm-ui a { color: var(--msm-gold); }
body.msm-ui a:hover { color: var(--msm-gold-hover); }

/* Bloques blancos residuales de BuddyBoss */
body.msm-ui .bs-item-wrap,
body.msm-ui .bb-card,
body.msm-ui .widget,
body.msm-ui .bb-modal,
body.msm-ui .bp-messages-content,
body.msm-ui .bb-dropdown,
body.msm-ui .sub-menu,
body.msm-ui .notification-dropdown,
body.msm-ui .header-mini-cart {
  background-color: var(--msm-surface-2);
  border-color: var(--msm-line);
  color: var(--msm-fg);
}

/* Separadores */
body.msm-ui hr,
body.msm-ui .bb-separator,
body.msm-ui table th,
body.msm-ui table td {
  border-color: var(--msm-line);
}

/*------------------------------------------------------------------------------
  7. FORMULARIOS
  Un solo lenguaje para inputs de WordPress, BuddyBoss, Tutor y WooCommerce.
------------------------------------------------------------------------------*/
body.msm-ui input[type="text"],
body.msm-ui input[type="email"],
body.msm-ui input[type="password"],
body.msm-ui input[type="search"],
body.msm-ui input[type="url"],
body.msm-ui input[type="tel"],
body.msm-ui input[type="number"],
body.msm-ui input[type="date"],
body.msm-ui select,
body.msm-ui textarea,
body.msm-ui .tutor-form-control,
body.msm-ui .select2-container .select2-selection {
  background: rgba(246, 241, 230, .05);
  border: 1px solid var(--msm-line-2);
  border-radius: 10px;
  color: var(--msm-fg);
  font-family: var(--msm-display);
  transition: border-color .2s var(--msm-ease), box-shadow .2s var(--msm-ease),
              background .2s var(--msm-ease);
}

body.msm-ui input::placeholder,
body.msm-ui textarea::placeholder,
body.msm-ui .tutor-form-control::placeholder {
  color: var(--msm-muted-3);
}

body.msm-ui input:focus,
body.msm-ui select:focus,
body.msm-ui textarea:focus,
body.msm-ui .tutor-form-control:focus {
  outline: none;
  background: rgba(246, 241, 230, .08);
  border-color: var(--msm-gold);
  box-shadow: 0 0 0 3px rgba(var(--msm-gold-rgb), .18);
}

body.msm-ui label,
body.msm-ui .tutor-form-label {
  color: var(--msm-muted);
  font-family: var(--msm-display);
}

/* Autofill de Chrome: pinta el input de azul claro y rompe el dark */
body.msm-ui input:-webkit-autofill,
body.msm-ui input:-webkit-autofill:hover,
body.msm-ui input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--msm-fg);
  -webkit-box-shadow: 0 0 0 1000px var(--msm-surface-1) inset;
  caret-color: var(--msm-fg);
  transition: background-color 9999s ease-in-out 0s;
}

/*------------------------------------------------------------------------------
  8. NO TOCAR
  El admin bar es de WordPress y el usuario lo espera tal cual.
------------------------------------------------------------------------------*/
body.msm-ui #wpadminbar,
body.msm-ui #wpadminbar * {
  color: revert;
  font-family: revert;
}
body.msm-ui #wpadminbar { background: revert; }

.tutor-cart-page .tutor-cart-course-item .tutor-cart-course-info li{
  color: #fff;
}
.tutor-checkout-page .tutor-checkout-details .tutor-checkout-details-inner{
  background-color: transparent !important;
}
.tutor-alert.tutor-warning{
  background: transparent !important;
}

/*==============================================================================
  9. TUTOR LMS 4.x — SISTEMA DE DISEÑO NUEVO
  ------------------------------------------------------------------------------
  Tutor 4.0 introdujo un sistema aparte del de la sección 5, con 167 tokens y
  tema oscuro nativo en `[data-tutor-theme=dark]`. Es el que pinta el área de
  aprendizaje (lección, quiz) y el escritorio: por eso esas pantallas seguían
  azules aunque el resto ya fuera dark.

  El detalle que lo vuelve trivial: la escala de marca `--tutor-brand-100..950`
  NUNCA se define en el CSS del plugin — solo se referencia con fallback, como
  `var(--tutor-brand-600, #3e64de)`. Definirla aquí no pisa nada y reencamina
  de una vez todos los azules (botones, tabs, iconos, enlaces, focus) a gold.
==============================================================================*/
/* Escala de marca MSM, derivada de --gold #d26e23 */
:root {
  --tutor-brand-100: #fdf4ed;
  --tutor-brand-200: #f9e2d1;
  --tutor-brand-300: #f2c59f;
  --tutor-brand-400: #eba36c;
  --tutor-brand-500: #fb8b36;  /* gold-hover */
  --tutor-brand-600: #d26e23;  /* gold */
  --tutor-brand-700: #a3541a;
  --tutor-brand-800: #7a3f14;
  --tutor-brand-900: #52290d;
  --tutor-brand-950: #2e1707;
}

/*
  Superficies del área de aprendizaje en tono MSM.
  Los valores dark que trae Tutor son grises azulados (#161b26, #1f242f); se
  reemplazan por la escala cálida del home para que el player no se sienta de
  otro producto al salir del catálogo.
*/
html[data-tutor-theme="dark"],
body.msm-ui {
  --tutor-surface-base:        #1a1d1a;
  --tutor-surface-l1:          #16180f;
  --tutor-surface-l1-hover:    #1f2118;
  --tutor-surface-l2:          #131009;
  --tutor-surface-l2-hover:    #1f2118;
  --tutor-surface-l3:          #16180f;
  --tutor-surface-sidebar-l1:  #0E0C09;
  --tutor-surface-dark:        #0E0C09;

  --tutor-text-primary:   #F6F1E6;
  --tutor-text-secondary: rgba(246, 241, 230, .78);
  --tutor-text-subdued:   rgba(246, 241, 230, .45);
  --tutor-text-light:     #F6F1E6;

  --tutor-border-idle:    rgba(246, 241, 230, .12);
  --tutor-border-idle2:   rgba(246, 241, 230, .12);
  --tutor-border-hover:   rgba(246, 241, 230, .24);
  --tutor-border-inverse: rgba(246, 241, 230, .16);
}

/* El reproductor Plyr trae su azul propio, fuera de todo token de Tutor */
body.msm-ui {
  --plyr-color-main: var(--msm-gold);
}

/*==============================================================================
  10. BUDDYBOSS READYLAUNCH — TOKENS NEUTROS
  ------------------------------------------------------------------------------
  La sección 4 ya reencaminó los tokens de MARCA. Estos son los NEUTROS
  (superficies, texto, bordes) que pintan login, registro y comunidad.

  ReadyLaunch trae su propio modo oscuro con 70 tokens bajo `.bb-rl-dark-mode`;
  esa clase se fuerza desde PHP en login y registro, donde BuddyBoss no la pone.
  Aquí solo se corrige el matiz: sus grises neutros (#242425, #2f2f2f) pasan a
  la escala cálida del home.
==============================================================================*/
body.msm-ui {
  --bb-rl-background-color:            var(--msm-surface-1);
  --bb-rl-background-secondary-color:  var(--msm-surface-2);
  --bb-rl-background-tertiary-color:   var(--msm-surface-3);
  --bb-rl-background-hover-color:      var(--msm-surface-hover);
  --bb-rl-background-secondary-hover-color: var(--msm-surface-hover);
  --bb-rl-background-tertiary-hover-color:  var(--msm-surface-hover);
  --bb-rl-background-black-color:      #0a0806;

  --bb-rl-text-color:           var(--msm-fg);
  --bb-rl-text-secondary-color: var(--msm-muted);
  --bb-rl-text-tertiary-color:  var(--msm-muted-2);

  --bb-rl-border-color:            var(--msm-line);
  --bb-rl-border-secondary-color:  var(--msm-line-2);
  --bb-rl-border-tertiary-color:   var(--msm-line-2);

  /*
    En su modo oscuro, ReadyLaunch deja estos dos en claro (#f3f3f3 / #f6f6f6).
    Son los que dibujan el borde de los inputs del login: sin corregirlos
    aparece un marco casi blanco alrededor de cada campo.
  */
  --bb-rl-border-quaternary-color: var(--msm-line-2);
  --bb-rl-border-quinery-color:    var(--msm-line);
  --bb-rl-border-disabled-color:   var(--msm-line);
}