/* ============================================================
   1. UTILIDADES
   ============================================================ */
.w-100                 { width: 100%; }
.opacity-0             { opacity: 0; }
.opacity-85            { opacity: 0.85; }
.color-black           { color: black; }
.text-align-center     { text-align: center; }
.align-text-center     { text-align: center; }
.align-text-left       { text-align: left; }
.z-index-10            { z-index: 10 !important; }

.min-height-580px      { min-height: 580px; }
.margin-block-start    { margin-top: 10px !important; }
.margin-right          { margin-right: 10px; }
.margin-menos-20       { margin-left: -20px !important; }
.padding-10px          { padding: 10px; }
.padding-10px-35px     { padding: 10px 35px !important; }
h1, h2, h3, p, ul, li, btn, span {
	letter-spacing: 1.35px!important;
}
.wp-block-search__input .has-normal-font-size {
	color:#676767!important
}

.ur-frontend-form .ur-form-row .ur-form-grid label.ur-label, .ur-frontend-form .ur-form-row .ur-form-grid legend.ur-label {
	font-weight:600 !important;
}

/* ============================================================
   2. HEADER / NAVBAR  (usa la clase .scrolled propia)
   ============================================================ */
.header-wrapper,
.header-wrapper .wp-block-navigation-item__content,
.header-wrapper .wp-block-navigation-item__label,
.header-wrapper .wp-block-navigation__submenu-icon {
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

/* ----- ARRIBA (sin .scrolled): blanco + negro ----- */
.header-wrapper:not(.scrolled),
.header-wrapper.is-transparent:not(.scrolled) {
  background: #fff !important;
  background-color: #fff !important;
  opacity:.8!important;
}
.header-wrapper:not(.scrolled) .custom-logo,
.header-wrapper:not(.scrolled) .site-logo-alt img {
  filter: brightness(0);
}
/* FIX: se agregan el ícono de submenú y su botón toggle */
.header-wrapper:not(.scrolled) .wp-block-navigation-item__content,
.header-wrapper:not(.scrolled) .wp-block-navigation-item__label,
.header-wrapper:not(.scrolled) .wp-block-navigation__submenu-icon,
.header-wrapper:not(.scrolled) .wp-block-navigation-submenu__toggle {
  color: #000 !important;
}

/* ----- CON .scrolled: naranja 80% + blanco ----- */
.header-wrapper.scrolled {
  background: rgba(255, 78, 0, 0.8) !important;
  opacity: 1 !important;
}
/* FIX: se agregan el ícono de submenú y su botón toggle */
.header-wrapper.scrolled .wp-block-navigation-item__content,
.header-wrapper.scrolled .wp-block-navigation-item__label,
.header-wrapper.scrolled .wp-block-navigation__submenu-icon,
.header-wrapper.scrolled .wp-block-navigation-submenu__toggle {
  color: #fff !important;
  text-decoration-color: #fff !important;
}
.header-wrapper.scrolled .wp-block-navigation-item__content::before,
.header-wrapper.scrolled .wp-block-navigation-item__content::after,
.header-wrapper.scrolled .wp-block-navigation-item__label::before,
.header-wrapper.scrolled .wp-block-navigation-item__label::after {
  background-color: #fff !important;
  border-color: #fff !important;
}


/* ============================================================
   2b. FLECHA DEL SUBMENU (My profile)
   ============================================================ */
/* el contenedor del ícono toma el color según el estado del header */
.header-wrapper:not(.scrolled) .wp-block-navigation .wp-block-navigation__submenu-icon,
.header-wrapper:not(.scrolled) .wp-block-navigation .wp-block-navigation-submenu__toggle {
  color: #000 !important;
}
.header-wrapper.scrolled .wp-block-navigation .wp-block-navigation__submenu-icon,
.header-wrapper.scrolled .wp-block-navigation .wp-block-navigation-submenu__toggle {
  color: #fff !important;
}

/* íconos de TRAZO (fill="none") -> se pintan con stroke */
.header-wrapper .wp-block-navigation svg[fill="none"],
.header-wrapper .wp-block-navigation svg[fill="none"] * {
  stroke: currentColor !important;
  fill: none !important;
}
/* íconos de RELLENO -> se pintan con fill */
.header-wrapper .wp-block-navigation svg:not([fill="none"]),
.header-wrapper .wp-block-navigation svg:not([fill="none"]) * {
  fill: currentColor !important;
}

.header-wrapper .wp-block-navigation svg,
.header-wrapper .wp-block-navigation svg * {
  transition: fill .3s ease, stroke .3s ease;
}

.header-wrapper .wp-block-navigation__submenu-icon,
.header-wrapper .wp-block-navigation-submenu__toggle {
  background: transparent !important;
  border: 0 !important;
}

.header-wrapper .wp-block-navigation__submenu-icon,
.header-wrapper .wp-block-navigation-submenu__toggle {
  background: transparent !important;
  border: 0 !important;
}


/* ============================================================
   2c. PANEL DESPLEGABLE: siempre fondo blanco + texto negro  /* FIX */
   ============================================================ */
.header-wrapper .wp-block-navigation__submenu-container {
  background-color: #fff !important;
  border-radius: 6px;
}
.header-wrapper .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.header-wrapper .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
.header-wrapper .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon,
.header-wrapper:not(.scrolled) .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.header-wrapper:not(.scrolled) .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
.header-wrapper.scrolled .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.header-wrapper.scrolled .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
.header-wrapper.scrolled .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
  color: #000 !important;
  text-decoration-color: #000 !important;
}
.header-wrapper.scrolled .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before,
.header-wrapper.scrolled .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after,
.header-wrapper.scrolled .wp-block-navigation__submenu-container .wp-block-navigation-item__label::before,
.header-wrapper.scrolled .wp-block-navigation__submenu-container .wp-block-navigation-item__label::after {
  background-color: #000 !important;
  border-color: #000 !important;
}
.header-wrapper .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}


/* ============================================================
   3. LAYOUT DEL MENU (desktop >= 782px)
   ============================================================ */
@media (min-width: 782px) {
  /* menú principal + Logout en una sola fila */
  .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    column-gap: 1rem;
  }
  /* usar todo el ancho disponible */
  .header-wrapper .alignwide {
    max-width: 100% !important;
  }
  /* que las listas y los textos no envuelvan */
  .wp-block-navigation__container {
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
  }
  .wp-block-navigation-item__content,
  .wp-block-navigation-item__label {
    white-space: nowrap !important;
  }

  /* quita los 12px de más a la izquierda del botón Logout */
  .wp-block-navigation-item.button {
    padding-left: 0 !important;
  }
  /* logo a la izquierda; menú + Logout + idioma agrupados a la derecha */
  .header-wrapper .alignwide.is-content-justification-space-between {
    justify-content: flex-start !important;
    gap: 1.25rem;
  }
  .header-wrapper .site-logo-wrapper {
    margin-right: auto !important;
  }
}


/* ============================================================
   4. HOME - textos con gradiente y fondos
   ============================================================ */
.got-more-text-entradas {
  background: linear-gradient(to right, #8F2DDE, #FF585D, #FF585D);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.background-image-information {
  background: url(https://learninghubinstitute.com/wp-content/uploads/2026/07/question-banner.png);
  background-size: cover;
  background-position-y: center;
	background-position-x: center;
  background-repeat: no-repeat;
  min-height: 280px;
}
.background-image-information-entradas {
  background: url(https://learninghubinstitute.com/wp-content/uploads/2026/07/card-banner-CTA-brand-article.png);
  background-size: cover;
  background-position-y: center;
	background-position-x: center;
  background-repeat: no-repeat;
	min-height: 280px;
}


/* ============================================================
   5. HOME - cards (columnas de igual alto, botón al fondo)
   ============================================================ */
@media (min-width: 782px) {
  .home-cards .wp-block-column {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column;
  }
  .home-cards .wp-block-column > .wp-block-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .home-cards .wp-block-column > .wp-block-group > .wp-block-buttons {
    margin-top: auto;      /* botón siempre al fondo */
  }
  .home-cards .wp-block-column > p:empty { display: none; }
  .home-cards .wp-block-column > .wp-block-group > h3.wp-block-heading {
    min-height: 2.4em;     /* el título reserva 2 líneas */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .home-cards .wp-block-column > .wp-block-group > p {
    min-height: 4.5em;     /* ~3 líneas */
  }
}   /* FIX: este @media estaba SIN cerrar y se tragaba las secciones 6 a 10 */

/* ============================================================
   5b. HOME - Buttons extras
   ============================================================ */


/* ============================================================
   6. SELF LEARNING
   ============================================================ */
.card-kisqali-self-learning {
  transition: 0.5s;
  min-height: 133px;
}
.card-kisqali-self-learning:hover {
  transform: scale(1.02);
}
.height-self-learning-card div > div > article > div > div > a.wp-block-button__link {
  padding: 10px 35px;
  border: 0px;
}
.height-self-learning-card div > div > article > div > div > p {
  margin-bottom: 40px;
}
.height-self-learning-card div > div > article > div > .obb-excerpt > p {
  text-align: left;
}


/* ============================================================
   7. FORMULARIOS - Contacto / Registro / My Account
   ============================================================ */
/* My account */
#user-registration
.user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a {
  border-radius: 0px;
  background-color: #000000;
  color: white;
  font-weight: bold;
}
#user-registration
.user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a{
	font-weight: bold;
	color:#161616;
}

.user-registration-MyAccount-content__header-content h1{
	color:#676767
}
.user-registration-Button.button {
  border-radius: 10px;
  background-color: #161616;
  color: white;
  font-weight: normal;
  padding: 15px 25px !important;
}

.user-registration-MyAccount-content__header-buttons a{
	border-radius: 0px;
  background-color: #161616!important;
  color: white!important;
  font-weight: bold;
	margin-top:20px;
  padding: 15px 25px !important;
}

#user-registration.user-registration {
  border-radius: 0px;
}

/* Form registro */
#user-registration p        { text-align: center; }
#user-registration p label  { text-align: left; }
#user-registration-form-6954 {
  border: none;
  box-shadow: 0 2px 20px rgba(45, 53, 89, 0.1);
  border-radius: 15px;
}
.boton-form-registro {
  background-color: #161616 !important;
  color: white;
  padding: 10px 25px !important;
	border:0 !important;
}

/* Page contact us */
.contactus-form {
  border: none;
  box-shadow: 0 2px 20px rgba(45, 53, 89, 0.1);
  border-radius: 15px;
}
.contact-us-form-div {
  padding: 20px 30px;
}
.user-registration-form-row.user-registration-form-row--wide.form-row.form-row-wide.hide_show_password {
  color: #787878 !important;
  font-weight: bolder;
}


/* ============================================================
   8. SENSEI LMS - lecciones, quiz y cursos
   ============================================================ */
/* Item quiz */
.sensei-course-theme.quiz form #sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox + label:before {
  min-width: 22px;
}
.sensei-course-theme.quiz form #sensei-quiz-list .sensei-multiple-choice-answer-option-radio,
.sensei-course-theme.quiz form #sensei-quiz-list .sensei-lms-question-block__option-toggle__control {
  min-width: 20px;
}

/* Lesson - barra de progreso y header con gradiente */
.sensei-course-theme-course-progress-bar.wp-block-sensei-lms-course-theme-course-progress-bar,
.wp-block-group.sensei-course-theme-header-content.is-content-justification-space-between {
  background: #FF4E00;
}
.sensei-course-theme-course-progress {
  color: #161616 !important;
}

/* Test / quiz list */
#sensei-quiz-list {
  margin: 0;
}
#sensei-quiz-list li div h2.question.question-title {
  color: #161616;
  font-weight: bold;
}
#sensei-quiz-list li div span.grade {
  display: none;
}
.wp-block-sensei-lms-quiz .wp-block-sensei-lms-quiz-question {
  margin-top: 1rem;
}

/* Botones Sensei */
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button .wp-block-button__link:hover,
.sensei-course-theme .wp-block-button .wp-block-button__link:hover,
.sensei-course-theme__button .wp-block-button__link:hover {
  background-color: #161616 !important;
  color: white !important;
}
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.is-primary:not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover,
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.wp-block-button:not(.is-style-outline,.is-style-link):not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover,
.sensei-course-theme .wp-block-button.is-primary:not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover,
.sensei-course-theme .wp-block-button.wp-block-button:not(.is-style-outline,.is-style-link):not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover,
.sensei-course-theme__button.is-primary:not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover,
.sensei-course-theme__button.wp-block-button:not(.is-style-outline,.is-style-link):not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover {
  background-color: transparent;
}
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.is-primary,
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.is-secondary,
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.wp-block-button,
.sensei-course-theme .wp-block-button.is-primary,
.sensei-course-theme .wp-block-button.is-secondary,
.sensei-course-theme .wp-block-button.wp-block-button,
.sensei-course-theme__button.is-primary,
.sensei-course-theme__button.is-secondary,
.sensei-course-theme__button.wp-block-button {
  border: 0;
}
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.is-primary,
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.is-secondary,
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.is-link,
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.wp-block-button > .wp-block-button__link,
.sensei-course-theme .wp-block-button.is-primary,
.sensei-course-theme .wp-block-button.is-secondary,
.sensei-course-theme .wp-block-button.is-link,
.sensei-course-theme .wp-block-button.wp-block-button > .wp-block-button__link,
.sensei-course-theme__button.is-primary,
.sensei-course-theme__button.is-secondary,
.sensei-course-theme__button.is-link,
.sensei-course-theme__button.wp-block-button > .wp-block-button__link {
  border-radius: 0px;
}
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.is-primary,
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button.wp-block-button:not(.is-style-outline,.is-style-link),
.sensei-course-theme .wp-block-button.is-primary,
.sensei-course-theme .wp-block-button.wp-block-button:not(.is-style-outline,.is-style-link),
.sensei-course-theme__button.is-primary,
.sensei-course-theme__button.wp-block-button:not(.is-style-outline,.is-style-link) {
  background-color: transparent;
}

/* Resumen courses */
.wp-block-button .wp-block-button__link {
  padding: 15px;
}
.wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow form {
  overflow: visible;
}

/* My courses */
.wp-block-sensei-lms-course-list--is-list-view .sensei-cta .wp-block-button__link {
  margin-right: 20px;
  border-radius: 0px;
}

/* Course completed */
.wp-block-sensei-lms-course-results__lesson {
  list-style: none;
}

/* Tipografías Sensei */
.wp-block-sensei-lms-course-theme-lesson-module {
  font-family: var(--wp--preset--font-family--volta-modern-display) !important;
  font-size: 18px !important;
}
.sensei-lms-course-navigation-lesson__title,
.sensei-lms-course-navigation-module__title, .wp-block-sensei-lms-course-theme-lesson-module {
  font-family: var(--wp--preset--font-family--volta-modern-display) !important;
	
}


/* ============================================================
   9. CAROUSEL (ROP)
   ============================================================ */
div.carousel-rop.style-modern .obb-flexslider .obb-aligner {
  border: 1px solid #b4b4b4;
}


/* ============================================================
   10. POLYLANG - selector de idioma
   ============================================================ */
.polylang-language-switch select {
  font-family: inherit !important;
  font-size: 0.85em;
  font-weight: 400 !important;
  height: auto;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-color: transparent;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.8em auto;
}
/* Panel de idiomas: mismo look que el desplegable de My profile */
.polylang-language-switch select {
  color-scheme: light;   /* fuerza el popup nativo en claro */
}
.polylang-language-switch select option {
  background-color: #fff !important;
  color: #000 !important;
  font-weight: 400;
  padding: 8px 12px;
}
.polylang-language-switch select option:checked,
.polylang-language-switch select option:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #000 !important;
}
/* Transición suave */
.header-wrapper .pll-switcher-select,
.header-wrapper .polylang-language-switch select {
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}

/* ARRIBA (sin scroll): texto y flecha NEGROS */
/* FIX: se eliminaron los selectores .data-wp-* (son atributos, no clases: no matcheaban nada) */
.header-wrapper:not(.scrolled) .pll-switcher-select, 
.header-wrapper:not(.scrolled) .polylang-language-switch select {
  color: #000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8 12L2 6h12z'/%3E%3C/svg%3E") !important;
}
/* Truco Firefox para que el texto del select tome el color */
.header-wrapper:not(.scrolled) .polylang-language-switch select:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 #000 !important;
}

/* AL SCROLL: texto y flecha BLANCOS */
.header-wrapper.scrolled .pll-switcher-select,
.header-wrapper.scrolled .polylang-language-switch select {
  color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M8 12L2 6h12z'/%3E%3C/svg%3E") !important;
}
.header-wrapper.scrolled .polylang-language-switch select:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 #fff !important;
}


/* ============================================================
   11. BOTONES DEL HEADER (Logout / Register / Login) + POLYLANG
   Mismo alto, borde, radio, padding y tipografía para todos.
   ============================================================ */
.header-wrapper .wp-block-navigation-item.button > .wp-block-navigation-item__content,
.header-wrapper .polylang-language-switch select {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  background-color: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: 4px !important;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
	letter-spacing: 1.35px!important;
}

/* el select necesita lugar a la derecha para su flecha */
.header-wrapper .polylang-language-switch select {
  padding: 0 2.25rem 0 1rem !important;
  background-position: right 0.9rem center !important;
  background-size: 0.7em auto !important;
}

/* hover */
.header-wrapper .wp-block-navigation-item.button > .wp-block-navigation-item__content:hover,
.header-wrapper .polylang-language-switch select:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}
.header-wrapper.scrolled .wp-block-navigation-item.button > .wp-block-navigation-item__content:hover,
.header-wrapper.scrolled .polylang-language-switch select:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
}

/* los items dentro del panel desplegable NO llevan borde */
.header-wrapper .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  border: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

@media (min-width: 782px) {
  .header-wrapper .wp-block-navigation-item.button,
  .header-wrapper .polylang-language-switch {
    display: flex !important;
    align-items: center;
  }
}


/* ============================================================
   12. FOOTER
   ============================================================ */
.footer-links a,
.footer-links li a {
    display: flex !important;
    align-items: center;
  }
}


/* ============================================================
   12. FOOTER
   ============================================================ */
.footer-links a,
.footer-links li a {
  text-decoration: none !important;
}
.footer-links a:hover,
.footer-links li a:hover {
  text-decoration: underline !important;
}