/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Tema hijo de Hello Elementor. Agrega aquí tus personalizaciones de CSS.
 Author:       Gerardo Garcia
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v3 or later
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  hello-elementor-child
*/

/* ==========================================================
   TIPOGRAFÍA GLOBAL — Roboto en todo el sitio
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

body,
body *,
.learndash-wrapper,
.learndash-wrapper * {
    font-family: 'Roboto', sans-serif !important;
}

/* ==========================================================
   VARIABLES GLOBALES
   ========================================================== */
:root {
  /* Colores principales */
  --um-primary:       #467FF7;
  --um-primary-dark:  #2f63d4;
  --um-primary-light: #eef3ff;

  /* Acento LearnDash */
  --ld-accent:        #50768A;
  --ld-accent-dark:   #3d5a6b;

  /* UI General */
  --um-bg:            #f9f9f9;
  --um-card-bg:       #ffffff;
  --um-border:        #e2e8f0;
  --um-text:          #1e2a3b;
  --um-muted:         #8795a8;
  --um-error:         #f0506e;
  --um-success:       #1bc47d;
  --um-radius:        14px;
  --um-shadow:        0 8px 32px rgba(70, 127, 247, 0.10);
  --um-transition:    all 0.22s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================
   BASE — Fondo de página
   ========================================================== */
body {
  background-color: var(--um-bg) !important;
}

/* ==========================================================
   INPUTS, SELECTS Y TEXTAREAS
   ========================================================== */
.um .um-field input[type="text"],
.um .um-field input[type="email"],
.um .um-field input[type="password"],
.um .um-field input[type="tel"],
.um .um-field input[type="number"],
.um .um-field input[type="url"],
.um .um-field textarea,
.um .um-field select {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid var(--um-border) !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  color: var(--um-text) !important;
  background: #fafbff !important;
  transition: var(--um-transition) !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
}

.um .um-field input:focus,
.um .um-field textarea:focus,
.um .um-field select:focus {
  border-color: var(--um-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(70, 127, 247, 0.12) !important;
}

.um .um-field input::placeholder,
.um .um-field textarea::placeholder {
  color: #bcc6d4 !important;
}

.um .um-field input[type="text"][disabled],
.um .um-field input[type="email"][disabled] {
  background: #f1f5f9 !important;
  color: var(--um-muted) !important;
  cursor: not-allowed !important;
}

/* Labels */
.um .um-field-label label,
.um .um-field-label span {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--um-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Checkbox / Radio */
.um .um-field input[type="checkbox"],
.um .um-field input[type="radio"] {
  accent-color: var(--um-primary) !important;
  width: 16px !important;
  height: 16px !important;
}

.um-field-checkbox {
  display: flex !important;
}

/* ==========================================================
   BOTONES — Ultimate Member
   ========================================================== */
.um .um-button,
.um input[type="submit"],
.um button[type="submit"] {
  background: var(--um-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 13px 28px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  transition: var(--um-transition) !important;
  box-shadow: 0 4px 16px rgba(70, 127, 247, 0.25) !important;
}

.um .um-button:hover,
.um input[type="submit"]:hover,
.um button[type="submit"]:hover {
  background: var(--um-primary-dark) !important;
  box-shadow: 0 6px 22px rgba(70, 127, 247, 0.35) !important;
  transform: translateY(-1px) !important;
}

.um .um-button:active,
.um input[type="submit"]:active {
  transform: translateY(0) !important;
}

.um-request-button {
  background-color: #f0f0f0 !important;
  border: 1px solid var(--um-primary) !important;
}

/* ==========================================================
   LINKS — Ultimate Member
   ========================================================== */
.um a,
.um .um-form a {
  color: var(--um-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: var(--um-transition) !important;
}

.um a:hover {
  color: var(--um-primary-dark) !important;
  text-decoration: underline !important;
}

/* ==========================================================
   MENSAJES DE ERROR Y ÉXITO
   ========================================================== */
.um .um-field-error,
.um .um-notice.um-notice-error {
  background: rgba(240, 80, 110, 0.07) !important;
  border: 1.5px solid rgba(240, 80, 110, 0.25) !important;
  border-radius: 8px !important;
  color: var(--um-error) !important;
  font-size: 0.85rem !important;
  padding: 10px 14px !important;
  margin-top: 4px !important;
}

.um .um-notice.um-notice-success {
  background: rgba(27, 196, 125, 0.08) !important;
  border: 1.5px solid rgba(27, 196, 125, 0.30) !important;
  border-radius: 8px !important;
  color: var(--um-success) !important;
  font-size: 0.85rem !important;
  padding: 10px 14px !important;
}

/* ==========================================================
   LOGIN Y REGISTRO
   ========================================================== */
.um-login .um-form,
.um-register .um-form {
  background: var(--um-card-bg) !important;
  border-radius: var(--um-radius) !important;
  box-shadow: var(--um-shadow) !important;
  border: 1px solid var(--um-border) !important;
  padding: 40px 36px !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

.um-login .um-form h2,
.um-register .um-form h2 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--um-text) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.3px !important;
}

/* ==========================================================
   PERFIL DE USUARIO — Vista pública
   ========================================================== */
.um-profile .um-form {
  background: var(--um-card-bg) !important;
  border-radius: var(--um-radius) !important;
  box-shadow: var(--um-shadow) !important;
  border: 1px solid var(--um-border) !important;
  padding: 32px !important;
  max-width: 100% !important;
}

/* Avatar en perfil */
.um .um-profile-photo .um-profile-photo-img {
  border: 3px solid var(--um-primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(70, 127, 247, 0.18) !important;
}

.um .um-cover-overlay,
.um .um-profile-photo-overlay {
  background: rgba(70, 127, 247, 0.55) !important;
  border-radius: 50% !important;
}

/* Nombre del usuario en perfil */
.um .um-name a,
.um .um-profile-meta .um-name {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--um-text) !important;
}

/* ==========================================================
   CUENTA (ACCOUNT) — Página con sidebar de tabs
   ========================================================== */
.um-account .um-form {
  background: var(--um-card-bg) !important;
  border-radius: var(--um-radius) !important;
  box-shadow: var(--um-shadow) !important;
  border: 1px solid var(--um-border) !important;
  padding: 32px !important;
  max-width: 100% !important;
}

/* Sidebar de tabs */
.um-account-tabs-ul {
  border-right: 2px solid var(--um-border) !important;
  padding-right: 0 !important;
}

.um-account-tabs-ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--um-muted) !important;
  text-decoration: none !important;
  transition: var(--um-transition) !important;
  border-right: 3px solid transparent !important;
  margin-bottom: 4px !important;
}

.um-account-tabs-ul li a:hover {
  background: var(--um-primary-light) !important;
  color: var(--um-primary) !important;
  text-decoration: none !important;
}

.um-account-tabs-ul li.um-tab-active a {
  background: var(--um-primary-light) !important;
  color: var(--um-primary) !important;
  border-right-color: var(--um-primary) !important;
  font-weight: 700 !important;
}

.um-account-tabs-ul li a i {
  font-size: 1rem !important;
  color: inherit !important;
}

.um-account .um-tab-head {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--um-text) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1.5px solid var(--um-border) !important;
}

/* Ocultar "Ver el perfil" y quitar enlace del nombre/avatar */
.um-account-profile-link {
  display: none !important;
}

.um-account-meta-img a,
.um-account-meta-img-b a,
.um-account-name a:first-child {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* ==========================================================
   DASHBOARD DE USUARIO
   ========================================================== */
.um-dashboard .um-form {
  background: var(--um-card-bg) !important;
  border-radius: var(--um-radius) !important;
  box-shadow: var(--um-shadow) !important;
  border: 1px solid var(--um-border) !important;
  padding: 32px !important;
  max-width: 100% !important;
}

/* ==========================================================
   NAVBAR — Avatar de usuario
   ========================================================== */
.elementor-nav-menu a .um-avatar {
  border-radius: 50% !important;
  border: 1px solid var(--ld-accent) !important;
  object-fit: cover !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
  max-width: 30px !important;
}

/* ==========================================================
   LEARNDASH — Cursos, lecciones y tópicos
   ========================================================== */

/* Lista de cursos */
.ld-course-list-items .ld-item-list-item {
  background: var(--um-card-bg) !important;
  border: 1px solid var(--um-border) !important;
  border-radius: var(--um-radius) !important;
  box-shadow: var(--um-shadow) !important;
  transition: var(--um-transition) !important;
  overflow: hidden !important;
}

.ld-course-list-items .ld-item-list-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(70, 127, 247, 0.15) !important;
}

/* Barra de progreso */
.learndash-wrapper .ld-progress .ld-progress-bar {
  background: var(--um-border) !important;
  border-radius: 100px !important;
  height: 8px !important;
}

.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
  background: var(--um-primary) !important;
  border-radius: 100px !important;
}

.learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage {
  color: var(--um-primary) !important;
  font-weight: 700 !important;
}

/* Botones generales de LearnDash (azul) */
.learndash-wrapper .ld-button,
.learndash-wrapper input[type="submit"] {
  background: var(--um-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 26px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--um-transition) !important;
  box-shadow: 0 4px 14px rgba(70, 127, 247, 0.25) !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.learndash-wrapper .ld-button:hover,
.learndash-wrapper input[type="submit"]:hover {
  background: var(--um-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(70, 127, 247, 0.35) !important;
}

/* Botón "Marcar como completado" — acento teal */
#learndash_mark_complete_button,
.learndash_mark_complete_button {
  background: var(--ld-accent) !important;
  color: #fff !important;
  border: 2px solid var(--ld-accent) !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: var(--um-transition) !important;
  box-shadow: none !important;
}

#learndash_mark_complete_button:hover,
.learndash_mark_complete_button:hover {
  background: var(--ld-accent-dark) !important;
  border-color: var(--ld-accent-dark) !important;
}

/* Botón de inscripción gratuita */
.learndash-wrapper input.learndash-button-free,
.learndash-wrapper .ld-enrollment__join-button.learndash-button-free {
  background: var(--ld-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.learndash-wrapper input.learndash-button-free:hover,
.learndash-wrapper .ld-enrollment__join-button.learndash-button-free:hover {
  background: var(--ld-accent-dark) !important;
  color: #ffffff !important;
}

/* Botones de navegación prev/next (Anterior / Siguiente lección) */
.ld-content-actions .ld-button-transparent {
  background-color: #ffffff !important;
  color: var(--ld-accent) !important;
  border: 2px solid var(--ld-accent) !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: var(--um-transition) !important;
}

.ld-content-actions .ld-button-transparent:hover {
  background-color: var(--ld-accent) !important;
  color: #ffffff !important;
}

/* Texto con color acento de LearnDash (Expandir / Contraer) */
.ld-text.ld-primary-color,
.ld-primary-color {
  color: var(--ld-accent) !important;
}

/* Alerta de certificado — ancho */
.ld-alert-content {
  width: 65% !important;
}

/* Ocultar icono descarga y link de edición de perfil */
.ld-icon-download,
.ld-profile-edit-link {
  display: none !important;
}

/* Navegación de lección sidebar */
.learndash-wrapper .ld-lesson-navigation .ld-nav-item a {
  background: var(--um-card-bg) !important;
  border: 1.5px solid var(--um-border) !important;
  border-radius: 10px !important;
  color: var(--um-text) !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  transition: var(--um-transition) !important;
  text-decoration: none !important;
}

.learndash-wrapper .ld-lesson-navigation .ld-nav-item a:hover {
  border-color: var(--um-primary) !important;
  color: var(--um-primary) !important;
  background: var(--um-primary-light) !important;
}

/* Sidebar de lecciones */
.learndash-wrapper .ld-course-navigation {
  background: var(--um-card-bg) !important;
  border: 1px solid var(--um-border) !important;
  border-radius: var(--um-radius) !important;
  box-shadow: var(--um-shadow) !important;
}

.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-item > .ld-lesson-item-preview {
  background: var(--um-primary-light) !important;
  border-left: 3px solid var(--um-primary) !important;
}

.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-item a {
  color: var(--um-primary) !important;
  font-weight: 700 !important;
}

/* Íconos de estado */
.learndash-wrapper .ld-status-icon.ld-status-complete {
  background: var(--um-success) !important;
  border-color: var(--um-success) !important;
}

.learndash-wrapper .ld-status-icon.ld-status-in-progress {
  border-color: var(--um-primary) !important;
}

/* Título del curso */
.learndash-wrapper .ld-course-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--um-text) !important;
}

/* Lista de lecciones */
.learndash-wrapper .ld-item-list .ld-item-list-item {
  border-bottom: 1px solid var(--um-border) !important;
  transition: var(--um-transition) !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item:hover {
  background: var(--um-primary-light) !important;
}

/* Quiz */
.learndash-wrapper .wpProQuiz_button,
.learndash-wrapper .wpProQuiz_button2 {
  background: var(--um-primary) !important;
  border-radius: 10px !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 11px 24px !important;
  cursor: pointer !important;
  transition: var(--um-transition) !important;
}

.learndash-wrapper .wpProQuiz_button:hover {
  background: var(--um-primary-dark) !important;
}

.learndash-wrapper .wpProQuiz_questionListItem label:has(input:checked) {
  border-color: var(--um-primary) !important;
  background: var(--um-primary-light) !important;
}

/* ==========================================================
   GAMIPRESS — Cards de logros
   ========================================================== */

/* Ocultar filtros y extras */
.gamipress-achievement-attached,
.gamipress-open-close-switch,
.gamipress-extras-window,
.gamipress-achievements-filter,
#gamipress-achievements-filters-wrap,
.gamipress-achievements-filters-container,
.gamipress-achievements-search-container {
  display: none !important;
}

/* Grid de 4 columnas */
#gamipress-achievements-container.gamipress-columns-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

/* Card base */
.gamipress-achievement {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 20px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  box-sizing: border-box !important;
  min-height: 300px !important;
}

.gamipress-achievement:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
  border-color: #d1d5db !important;
}

/* Imagen */
.gamipress-achievement .gamipress-achievement-image {
  float: none !important;
  display: block !important;
  margin: 0 auto 16px auto !important;
  text-align: center !important;
  width: auto !important;
}

.gamipress-achievement .gamipress-achievement-image a {
  display: inline-block !important;
}

.gamipress-achievement .gamipress-achievement-image img,
.gamipress-achievement-thumbnail {
  max-width: 80px !important;
  max-height: 80px !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto !important;
  display: block !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
  transition: all 0.4s ease;
}

/* Imagen no ganada — gris */
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image img {
  filter: grayscale(100%) !important;
  opacity: 0.5 !important;
}

.gamipress-achievement.user-has-not-earned:hover .gamipress-achievement-image img {
  filter: grayscale(60%) !important;
  opacity: 0.75 !important;
}

/* Descripción contenedor */
.gamipress-achievement .gamipress-achievement-description {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

/* Título */
.gamipress-achievement .gamipress-achievement-title {
  color: #1f2937 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

.gamipress-achievement .gamipress-achievement-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.gamipress-achievement.user-has-not-earned .gamipress-achievement-title,
.gamipress-achievement.user-has-not-earned .gamipress-achievement-title a {
  color: #6b7280 !important;
}

/* Check verde en logros ganados */
.gamipress-achievement.user-has-earned .gamipress-achievement-title a::after {
  content: " ✓";
  color: #10b981;
  font-weight: bold;
  font-size: 15px;
  margin-left: 6px;
}

/* Puntos */
.gamipress-achievement .gamipress-achievement-points {
  color: #9ca3af !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
  padding: 4px 10px !important;
  display: inline-block !important;
  background: #f3f4f6 !important;
  border-radius: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.gamipress-achievement.user-has-earned .gamipress-achievement-points {
  color: #2563eb !important;
  background: #dbeafe !important;
}

/* Excerpt */
.gamipress-achievement .gamipress-achievement-excerpt {
  color: #6b7280 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-align: center !important;
}

.gamipress-achievement .gamipress-achievement-excerpt p,
.gamipress-achievement .gamipress-achievement-excerpt pre,
.gamipress-achievement .gamipress-achievement-excerpt code {
  margin: 0 !important;
  font-family: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  color: inherit !important;
  font-size: inherit !important;
  white-space: normal !important;
}

.gamipress-achievement.user-has-not-earned .gamipress-achievement-excerpt {
  color: #9ca3af !important;
}

/* Ganados — borde y fondo azul sutil */
.gamipress-achievement.user-has-earned {
  border-color: #dbeafe !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%) !important;
}

.gamipress-achievement.user-has-earned:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12) !important;
}

/* Clearfix */
.gamipress-achievement::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
  #gamipress-achievements-container.gamipress-columns-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  #gamipress-achievements-container.gamipress-columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .um-login .um-form,
  .um-register .um-form {
    padding: 28px 18px !important;
    border-radius: 10px !important;
  }

  .um-account .um-form,
  .um-profile .um-form {
    padding: 20px 16px !important;
  }

  .um-account-tabs-ul {
    border-right: none !important;
    border-bottom: 2px solid var(--um-border) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
  }

  .um-account-tabs-ul li a {
    border-right: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
  }

  .um-account-tabs-ul li.um-tab-active a {
    border-bottom-color: var(--um-primary) !important;
    border-right-color: transparent !important;
  }
}

@media (max-width: 480px) {
  #gamipress-achievements-container.gamipress-columns-4 {
    grid-template-columns: 1fr !important;
  }
}