/*
 * OigaProfe Theme — tutor-lms.css
 * Overrides visuales para Tutor LMS Free
 * Adapta la UI de Tutor al sistema de diseño oscuro de OigaProfe
 */

/* ── Variables base ────────────────────────────────────────────────────────── */
.op-tutor-page,
.tutor-wrap,
.tutor-course-details-page {
  background: var(--op-bg) !important;
  color: var(--op-text) !important;
}

/* ── Cabecera del curso ────────────────────────────────────────────────────── */
.tutor-course-details-page .tutor-course-title,
.tutor-fs-course .tutor-course-name {
  font-family: var(--op-font-display) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--op-text) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.tutor-course-details-page .tutor-course-summary,
.tutor-course-lead-info-description {
  color: var(--op-muted) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

/* ── Card del curso en el listado ─────────────────────────────────────────── */
.tutor-course-loop,
.tutor-card,
.tutor-loop-course {
  background: var(--op-bg-card) !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, border-color 0.25s ease !important;
  box-shadow: none !important;
}

.tutor-course-loop:hover,
.tutor-card:hover,
.tutor-loop-course:hover {
  border-color: rgba(255,107,53,0.35) !important;
  transform: translateY(-3px) !important;
}

.tutor-course-loop .tutor-course-name,
.tutor-card .tutor-card-name,
.tutor-loop-course .tutor-course-name a {
  font-family: var(--op-font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--op-text) !important;
}

.tutor-course-loop .tutor-course-summary {
  color: var(--op-muted) !important;
  font-size: 0.875rem !important;
}

/* ── Precio ────────────────────────────────────────────────────────────────── */
.tutor-price,
.tutor-course-price,
.tutor-loop-course .price,
.tutor-card .tutor-price {
  font-family: var(--op-font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--op-cyan) !important;
}

.tutor-price del,
.tutor-course-price del {
  color: var(--op-muted) !important;
  font-size: 0.875rem !important;
}

.tutor-price ins,
.tutor-course-price ins {
  text-decoration: none !important;
  color: var(--op-orange) !important;
}

/* ── Botones de Tutor LMS ─────────────────────────────────────────────────── */
.tutor-btn,
.tutor-btn-primary,
.tutor-course-enroll-btn,
.tutor-enroll-btn,
button.tutor-btn {
  background: var(--op-cyan) !important;
  color: #04060F !important;
  font-family: var(--op-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.tutor-btn:hover,
.tutor-btn-primary:hover,
.tutor-course-enroll-btn:hover,
.tutor-enroll-btn:hover {
  background: var(--op-cyan-dark) !important;
  color: #04060F !important;
}

.tutor-btn-outline-primary,
.tutor-btn-secondary {
  background: transparent !important;
  color: var(--op-cyan) !important;
  border: 1.5px solid var(--op-cyan) !important;
  font-family: var(--op-font-display) !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
}

.tutor-btn-outline-primary:hover,
.tutor-btn-secondary:hover {
  background: rgba(0,212,255,0.1) !important;
}

/* ── Barra de progreso ─────────────────────────────────────────────────────── */
.tutor-progress-bar,
.tutor-course-completion-progress {
  background: var(--op-border) !important;
  border-radius: 4px !important;
  height: 6px !important;
}

.tutor-progress-bar .tutor-progress-active,
.tutor-course-completion-progress .tutor-progress-active {
  background: linear-gradient(90deg, var(--op-cyan), var(--op-purple)) !important;
  border-radius: 4px !important;
}

/* ── Sidebar del curso (info + instructor) ────────────────────────────────── */
.tutor-sidebar-card,
.tutor-single-course-sidebar,
.tutor-course-widget {
  background: var(--op-bg-card) !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
}

/* ── Currículum / Lecciones ────────────────────────────────────────────────── */
.tutor-course-topic,
.tutor-accordion,
.tutor-curriculum-accordion {
  background: var(--op-bg-card) !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

.tutor-accordion-item-header,
.tutor-course-topic-header {
  background: var(--op-bg-3) !important;
  color: var(--op-text) !important;
  font-family: var(--op-font-display) !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--op-border) !important;
}

.tutor-accordion-item-body li,
.tutor-course-topic li {
  border-bottom: 1px solid var(--op-border) !important;
  padding: 10px 18px !important;
  color: var(--op-muted) !important;
  font-size: 0.875rem !important;
  transition: background 0.15s !important;
}

.tutor-accordion-item-body li:hover,
.tutor-course-topic li:hover {
  background: rgba(0,212,255,0.04) !important;
  color: var(--op-text) !important;
}

.tutor-accordion-item-body li:last-child,
.tutor-course-topic li:last-child {
  border-bottom: none !important;
}

/* ── Lección completada ────────────────────────────────────────────────────── */
.tutor-icon-check-square-solid,
.tutor-lesson-completed-icon {
  color: var(--op-green) !important;
}

/* ── Icono candado (lección bloqueada) ────────────────────────────────────── */
.tutor-icon-lock-line,
.tutor-lesson-locked-icon {
  color: var(--op-muted) !important;
}

/* ── Rating estrellas ──────────────────────────────────────────────────────── */
.tutor-ratings .tutor-star,
.tutor-course-ratings .tutor-star {
  color: var(--op-amber) !important;
}

/* ── Instructor info ───────────────────────────────────────────────────────── */
.tutor-instructor-info,
.tutor-single-instructor-wrap {
  background: var(--op-bg-card) !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
}

.tutor-instructor-name,
.tutor-instructor-info h3 {
  font-family: var(--op-font-display) !important;
  font-weight: 700 !important;
  color: var(--op-text) !important;
}

/* ── Quiz / Evaluaciones ───────────────────────────────────────────────────── */
.tutor-quiz-wrap,
.tutor-quiz-list {
  background: var(--op-bg-card) !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 10px !important;
}

.tutor-quiz-answer-option {
  background: var(--op-bg-3) !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 8px !important;
  color: var(--op-text) !important;
  margin-bottom: 8px !important;
  padding: 12px !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
}

.tutor-quiz-answer-option:hover,
.tutor-quiz-answer-option.tutor-answer-selected {
  border-color: var(--op-cyan) !important;
  background: rgba(0,212,255,0.06) !important;
}

/* ── Dashboard del estudiante ─────────────────────────────────────────────── */
.tutor-dashboard,
.tutor-student-dashboard {
  background: var(--op-bg) !important;
  color: var(--op-text) !important;
}

.tutor-dashboard-menu li a,
.tutor-dashboard-nav a {
  color: var(--op-muted) !important;
  font-size: 0.875rem !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  transition: all 0.2s !important;
}

.tutor-dashboard-menu li a:hover,
.tutor-dashboard-menu li.tutor-is-active a,
.tutor-dashboard-nav a:hover {
  background: rgba(0,212,255,0.08) !important;
  color: var(--op-cyan) !important;
}

/* ── Certificado ───────────────────────────────────────────────────────────── */
.tutor-certificate-wrap {
  border: 2px solid var(--op-cyan) !important;
  border-radius: 14px !important;
}

/* ── Notificaciones / Alerts ───────────────────────────────────────────────── */
.tutor-alert-success {
  background: rgba(16,217,138,0.1) !important;
  border-color: var(--op-green) !important;
  color: var(--op-green) !important;
  border-radius: 8px !important;
}

.tutor-alert-warning {
  background: rgba(245,158,11,0.1) !important;
  border-color: var(--op-amber) !important;
  color: var(--op-amber) !important;
  border-radius: 8px !important;
}

.tutor-alert-danger {
  background: rgba(239,68,68,0.1) !important;
  border-color: var(--op-red) !important;
  color: var(--op-red) !important;
  border-radius: 8px !important;
}

/* ── Formularios dentro de Tutor LMS ──────────────────────────────────────── */
.tutor-wrap input[type="text"],
.tutor-wrap input[type="email"],
.tutor-wrap input[type="password"],
.tutor-wrap textarea,
.tutor-wrap select {
  background: var(--op-bg-3) !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 8px !important;
  color: var(--op-text) !important;
  padding: 10px 14px !important;
}

.tutor-wrap input:focus,
.tutor-wrap textarea:focus,
.tutor-wrap select:focus {
  border-color: var(--op-cyan) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,212,255,0.15) !important;
}

/* ── Paginación de cursos ──────────────────────────────────────────────────── */
.tutor-pagination .page-numbers {
  background: var(--op-bg-card) !important;
  border: 1px solid var(--op-border) !important;
  color: var(--op-muted) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  text-decoration: none !important;
}

.tutor-pagination .page-numbers.current,
.tutor-pagination .page-numbers:hover {
  background: var(--op-cyan) !important;
  color: #04060F !important;
  border-color: var(--op-cyan) !important;
}

/* ── Widget de cursos del tema ─────────────────────────────────────────────── */
.op-widget-courses {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.op-widget-course {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--op-border);
  font-size: 0.8rem;
}

.op-widget-course:last-child { border-bottom: none; }

.op-widget-course a {
  color: var(--op-text);
  text-decoration: none;
  transition: color 0.2s;
}

.op-widget-course a:hover { color: var(--op-cyan); }

.op-widget-course__price {
  font-family: var(--op-font-code);
  font-size: 0.7rem;
  color: var(--op-cyan);
  flex-shrink: 0;
  margin-left: 8px;
}