/* =============================================================================
   TUTOR LMS — Piel de marca para Saber Investigar
   cc-blocks/integrations/tutor.css

   QUE ES. Tutor LMS renderiza el listado de cursos, la ficha de curso, el
   plan de estudios, el reproductor de lecciones y el escritorio del
   estudiante con sus propias plantillas. Este archivo las viste con los
   tokens de marca. No sustituye ninguna plantilla.

   ESTO REEMPLAZA a "Tutor LMS Elementor Addons": aquel plugin mejoraba el
   aspecto a costa de depender de Elementor. Esto hace lo mismo con CSS y sin
   dependencias.

   ORDEN DE CARGA. Despues del CSS de Tutor. Ver el fragmento de functions.php.

   AVISO DE VERSION. Tutor cambia nombres de clase entre versiones mayores.
   Estos selectores estan escritos contra Tutor 2.x y 3.x. Si alguna parte no
   toma el estilo, es que esa version usa otro nombre: se ajusta mirando el
   inspector, no se rehace el archivo.
   ============================================================================= */

/* ─────────────────────────── BASE ─────────────────────────── */

.tutor-wrap,
.tutor-course-list,
.tutor-single-course,
.tutor-dashboard,
.tutor-course-single-content-wrapper {
  font-family: var(--cc-font-body);
  color: var(--cc-ink);
}

.tutor-wrap h1,
.tutor-wrap h2,
.tutor-wrap h3,
.tutor-wrap h4 {
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-display);
  line-height: var(--cc-leading-display);
  letter-spacing: var(--cc-tracking-display);
  color: var(--cc-ink);
}

.tutor-wrap p,
.tutor-wrap li {
  font-size: var(--cc-text-base);
  line-height: var(--cc-leading-body);
  color: var(--cc-ink-soft);
}

/* ─────────────────────────── BOTONES ─────────────────────────── */

.tutor-btn,
.tutor-wrap .tutor-btn,
.tutor-btn.tutor-btn-primary,
.tutor-wrap .tutor-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  min-height: 48px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-action);
  color: var(--cc-on-action);
  font-family: inherit;
  font-size: var(--cc-text-base);
  font-weight: var(--cc-weight-ui);
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--cc-shadow-action);
  transition: background var(--cc-dur-fast) var(--cc-ease),
              transform var(--cc-dur-fast) var(--cc-ease),
              box-shadow var(--cc-dur-fast) var(--cc-ease);
}

.tutor-btn:hover,
.tutor-wrap .tutor-btn:hover,
.tutor-wrap .tutor-btn-primary:hover {
  background: color-mix(in srgb, var(--cc-action) 88%, var(--cc-ink));
  color: var(--cc-on-action);
  transform: translateY(-3px);
  box-shadow: var(--cc-shadow-action-hover);
}

.tutor-btn:active { transform: scale(0.98); }

/* Secundario: contorno teal */
.tutor-wrap .tutor-btn-outline-primary,
.tutor-wrap .tutor-btn-secondary {
  background: transparent;
  border: 2px solid var(--cc-brand-2);
  color: var(--cc-brand-2);
  box-shadow: none;
}

.tutor-wrap .tutor-btn-outline-primary:hover,
.tutor-wrap .tutor-btn-secondary:hover {
  background: var(--cc-brand-2);
  color: var(--cc-ink-inverse);
  box-shadow: none;
}

/* ─────────────────────────── LISTADO DE CURSOS ─────────────────────────── */

/* NO imponemos rejilla propia. Tutor 3 ya coloca las tarjetas en columnas y
   monta la barra de filtros al lado; si le forzamos un grid encima, el filtro
   entra como una celda mas y todo se estrecha. Aqui solo se viste la tarjeta,
   la colocacion es de Tutor y se ajusta en sus ajustes. */

.tutor-course-loop,
.tutor-card,
.tutor-course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  box-shadow: var(--cc-shadow-sm);
  transition: transform var(--cc-dur) var(--cc-ease-out),
              box-shadow var(--cc-dur) var(--cc-ease),
              border-color var(--cc-dur) var(--cc-ease);
}

.tutor-course-loop::before,
.tutor-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  height: 4px;
  width: 0;
  background: var(--cc-gradient-brand);
  transition: width var(--cc-dur) var(--cc-ease-out);
}

.tutor-course-loop:hover,
.tutor-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--cc-shadow-lg);
}

.tutor-course-loop:hover::before,
.tutor-card:hover::before { width: 100%; }

.tutor-course-thumbnail img,
.tutor-card-image img,
.tutor-course-loop .tutor-course-thumbnail img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--cc-bg-alt);
  transition: transform var(--cc-dur-slow) var(--cc-ease-out);
}

.tutor-course-loop:hover .tutor-course-thumbnail img,
.tutor-card:hover .tutor-card-image img { transform: scale(1.04); }

.tutor-course-name,
.tutor-course-loop-title,
.tutor-card-title {
  font-size: var(--cc-text-lg);
  overflow-wrap: break-word;
  hyphens: none;
  font-weight: 800;
  line-height: 1.38;
  color: var(--cc-ink);
  margin-block-end: var(--cc-space-2);
}

.tutor-course-name a,
.tutor-course-loop-title a,
.tutor-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--cc-dur-fast) var(--cc-ease);
}

.tutor-course-loop:hover .tutor-course-name a,
.tutor-card:hover .tutor-card-title a { color: var(--cc-brand-2); }

/* Categoria del curso */
.tutor-course-loop-level,
.tutor-course-categories a,
.tutor-meta-value {
  font-size: var(--cc-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-brand-2);
  text-decoration: none;
}

/* Precio */
.tutor-course-price,
.tutor-course-loop-price .price,
.tutor-card-footer .price {
  font-size: var(--cc-text-xl);
  font-weight: 800;
  color: var(--cc-ink);
}

.tutor-course-price del { color: var(--cc-ink-soft); font-weight: var(--cc-weight-body); }
.tutor-course-price ins { text-decoration: none; color: var(--cc-accent-2); }

/* Valoracion */
.tutor-ratings-stars i,
.tutor-star-rating-group i { color: var(--cc-accent); }

.tutor-ratings-average,
.tutor-ratings-count {
  font-size: var(--cc-text-sm);
  color: var(--cc-ink-soft);
}

/* ─────────────────────────── FICHA DE CURSO ─────────────────────────── */

.tutor-course-header,
.tutor-single-course-header {
  background: var(--cc-ink);
  color: var(--cc-ink-inverse);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-10);
  margin-block-end: var(--cc-space-8);
}

.tutor-course-header h1,
.tutor-single-course-header h1,
.tutor-course-details-title {
  font-size: var(--cc-text-4xl);
  color: var(--cc-ink-inverse);
  margin-block-end: var(--cc-space-4);
}

.tutor-course-header p,
.tutor-single-course-header p {
  color: color-mix(in srgb, var(--cc-ink-inverse) 80%, transparent);
}

.tutor-course-header a,
.tutor-single-course-header a { color: var(--cc-brand); }

/* Barra lateral de inscripcion */

.tutor-course-sidebar,
.tutor-single-course-sidebar,
.tutor-course-details-widget {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow);
  padding: var(--cc-space-6);
  position: sticky;
  top: var(--cc-space-6);
}

.tutor-course-sidebar .tutor-btn,
.tutor-single-course-sidebar .tutor-btn { width: 100%; }

/* Meta del curso: duracion, nivel, lecciones */

.tutor-course-details-widget-list li,
.tutor-course-sidebar-card-body li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  padding-block: 11px;
  border-block-end: 1px solid var(--cc-line);
  font-size: var(--cc-text-sm);
  color: var(--cc-ink-soft);
}

.tutor-course-details-widget-list li:last-child { border-block-end: 0; }

.tutor-course-details-widget-list li span:last-child { color: var(--cc-ink); font-weight: 700; }

/* ── Plan de estudios ── */

.tutor-accordion-item,
.tutor-course-topic {
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  margin-block-end: var(--cc-space-3);
  overflow: hidden;
}

.tutor-accordion-item-header,
.tutor-course-topic-title {
  padding: 16px 20px;
  background: var(--cc-bg-alt);
  font-size: var(--cc-text-base);
  font-weight: 800;
  color: var(--cc-ink);
  cursor: pointer;
  transition: background var(--cc-dur-fast) var(--cc-ease),
              color var(--cc-dur-fast) var(--cc-ease);
}

.tutor-accordion-item-header:hover { background: color-mix(in srgb, var(--cc-brand) 10%, var(--cc-bg-alt)); }

.tutor-accordion-item-header.is-active,
.tutor-accordion-item-header[aria-expanded="true"] {
  background: var(--cc-brand-2);
  color: var(--cc-ink-inverse);
}

.tutor-course-topic-item,
.tutor-accordion-item-body li {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: 13px 20px;
  border-block-start: 1px solid var(--cc-line);
  font-size: var(--cc-text-sm);
  color: var(--cc-ink-soft);
}

.tutor-course-topic-item a { color: var(--cc-ink); text-decoration: none; }
.tutor-course-topic-item a:hover { color: var(--cc-brand-2); }

.tutor-course-topic-item i,
.tutor-accordion-item-body i { color: var(--cc-brand-2); }

/* ── Que aprenderas ── */

.tutor-course-benefits li,
.tutor-course-requirements li,
.tutor-course-target-audience li {
  position: relative;
  padding-inline-start: 28px;
  margin-block-end: var(--cc-space-3);
  list-style: none;
}

.tutor-course-benefits li::before,
.tutor-course-requirements li::before,
.tutor-course-target-audience li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cc-brand) 16%, transparent);
}

/* ── Instructor ── */

.tutor-instructor-card,
.tutor-single-course-segment.tutor-instructor-info {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-6);
  box-shadow: var(--cc-shadow-sm);
}

.tutor-instructor-card img,
.tutor-instructor-list img,
.tutor-avatar img {
  border-radius: 50%;
  object-fit: cover;
  background: var(--cc-bg-alt);
}

.tutor-instructor-name,
.tutor-instructor-card h4 {
  font-size: var(--cc-text-lg);
  font-weight: 800;
  color: var(--cc-ink);
}

/* ── Listado de instructores (pagina /instructores/) ── */

.tutor-instructor-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cc-space-5);
}

.tutor-instructor-list .tutor-instructor-item,
.tutor-instructor-list > div {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-6) var(--cc-space-4);
  text-align: center;
  transition: transform var(--cc-dur) var(--cc-ease-out),
              box-shadow var(--cc-dur) var(--cc-ease);
}

.tutor-instructor-list .tutor-instructor-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--cc-shadow-lg);
}

/* ─────────────────────────── ESCRITORIO DEL ESTUDIANTE ─────────────────────────── */

.tutor-dashboard-menu,
.tutor-dashboard-left-menu {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
}

.tutor-dashboard-menu a,
.tutor-dashboard-menu-item a {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: 13px 18px;
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-ui);
  color: var(--cc-ink-soft);
  text-decoration: none;
  border-block-end: 1px solid var(--cc-line);
  transition: background var(--cc-dur-fast) var(--cc-ease),
              color var(--cc-dur-fast) var(--cc-ease);
}

.tutor-dashboard-menu a:hover { background: var(--cc-bg-alt); color: var(--cc-ink); }

.tutor-dashboard-menu .active a,
.tutor-dashboard-menu-item.active a {
  background: var(--cc-brand-2);
  color: var(--cc-ink-inverse);
}

.tutor-dashboard-content,
.tutor-dashboard-content-inner {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-6);
}

/* Barra de progreso */

.tutor-progress-bar,
.tutor-progress-bar-wrap {
  background: var(--cc-line);
  border-radius: var(--cc-radius-pill);
  overflow: hidden;
  height: 8px;
}

.tutor-progress-value,
.tutor-progress-filled {
  background: var(--cc-gradient-brand);
  height: 100%;
  border-radius: var(--cc-radius-pill);
}

/* ─────────────────────────── FORMULARIOS ─────────────────────────── */

.tutor-form-control,
.tutor-wrap input[type="text"],
.tutor-wrap input[type="email"],
.tutor-wrap input[type="password"],
.tutor-wrap select,
.tutor-wrap textarea {
  width: 100%;
  min-height: 48px;
  border: 1.5px solid var(--cc-line);
  border-radius: var(--cc-radius);
  padding: 13px 16px;
  font-family: inherit;
  font-size: var(--cc-text-base);
  background: var(--cc-bg-alt);
  color: var(--cc-ink);
  transition: border-color var(--cc-dur-fast) var(--cc-ease),
              box-shadow var(--cc-dur-fast) var(--cc-ease),
              background var(--cc-dur-fast) var(--cc-ease);
}

.tutor-form-control:focus,
.tutor-wrap input:focus,
.tutor-wrap select:focus,
.tutor-wrap textarea:focus {
  border-color: var(--cc-brand);
  background: var(--cc-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc-brand) 16%, transparent);
  outline: none;
}

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */

@media (max-width: 1024px) {
  .tutor-instructor-list { grid-template-columns: repeat(3, 1fr); }
  .tutor-course-sidebar,
  .tutor-single-course-sidebar { position: static; }
  .tutor-course-header,
  .tutor-single-course-header { padding: var(--cc-space-8); }
}

@media (max-width: 768px) {
  .tutor-instructor-list { grid-template-columns: repeat(2, 1fr); }
  .tutor-course-header h1,
  .tutor-single-course-header h1 { font-size: var(--cc-text-3xl); }
  .tutor-course-header,
  .tutor-single-course-header { padding: var(--cc-space-6); }
}

@media (max-width: 480px) {
  .tutor-instructor-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tutor-course-loop,
  .tutor-card,
  .tutor-btn,
  .tutor-course-thumbnail img { transition: none; }
  .tutor-course-loop:hover,
  .tutor-card:hover { transform: none; }
}

/* =============================================================================
   FILTROS DEL ARCHIVO DE CURSOS
   Anadido tras ver /cursos/ en vivo: Tutor 3.x pinta una barra lateral con
   Tipo, Categoria, Etiqueta, Nivel y Precio, mas un desplegable de orden.
   ============================================================================= */

.tutor-course-filter,
.tutor-course-filter-container,
.tutor-course-filter-wrapper {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-5);
  box-shadow: var(--cc-shadow-sm);
}

.tutor-course-filter h3,
.tutor-course-filter .tutor-fs-6,
.tutor-course-filter-title {
  font-size: var(--cc-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-ink-soft);
  margin-block: var(--cc-space-5) var(--cc-space-3);
}

.tutor-course-filter h3:first-child,
.tutor-course-filter-title:first-child { margin-block-start: 0; }

.tutor-course-filter label,
.tutor-form-check-label {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding-block: 7px;
  font-size: var(--cc-text-sm);
  color: var(--cc-ink-soft);
  cursor: pointer;
  transition: color var(--cc-dur-fast) var(--cc-ease);
}

.tutor-course-filter label:hover { color: var(--cc-brand-2); }

.tutor-course-filter input[type="checkbox"],
.tutor-course-filter input[type="radio"],
.tutor-form-check-input {
  width: 18px;
  height: 18px;
  accent-color: var(--cc-brand-2);
  flex: none;
  margin: 0;
}

/* Boton de vaciar filtros: discreto, no compite con inscribirse. */
.tutor-course-filter-reset,
.tutor-course-filter a[href="#"] {
  display: inline-block;
  margin-block-start: var(--cc-space-5);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-ui);
  color: var(--cc-accent-2);
  text-decoration: none;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

.tutor-course-filter-reset:hover { text-decoration: underline; }

/* Desplegable de ordenacion */
.tutor-course-archive-filter select,
.tutor-wrap select.tutor-form-select {
  min-height: 46px;
  border: 1.5px solid var(--cc-line);
  border-radius: var(--cc-radius);
  padding: 11px 16px;
  font-family: inherit;
  font-size: var(--cc-text-sm);
  background: var(--cc-surface);
  color: var(--cc-ink);
}

/* Etiqueta de descuento sobre la portada del curso */
.tutor-course-loop .tutor-course-price del,
.tutor-course-loop ins { display: inline; }

.tutor-discount-percent,
.tutor-course-loop .tutor-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-action);
  color: var(--cc-on-action);
  font-size: var(--cc-text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Ventana de acceso que abre Tutor desde el archivo */
.tutor-login-wrap,
.tutor-modal .tutor-modal-content {
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
}

.tutor-modal .tutor-modal-content h3 {
  font-size: var(--cc-text-2xl);
  margin-block-end: var(--cc-space-4);
}

@media (max-width: 1024px) {
  .tutor-course-filter,
  .tutor-course-filter-container { padding: var(--cc-space-4); }
}

/* =============================================================================
   AIRE DE PAGINA
   El archivo de cursos de Tutor no trae margen propio, asi que quedaba pegado
   a la cabecera y al pie. Se lo damos aqui.
   ============================================================================= */

.tutor-wrap,
.tutor-course-archive,
.tutor-course-archive-results,
.tutor-courses-wrap,
.tutor-dashboard,
.tutor-single-course {
  padding-block: var(--cc-space-10);
}

/* Si la pagina ya trae su propio contenedor con aire, no lo duplicamos. */
.tutor-wrap .tutor-wrap,
.tutor-wrap .tutor-courses-wrap,
.tutor-course-archive .tutor-courses-wrap { padding-block: 0; }

@media (max-width: 768px) {
  .tutor-wrap,
  .tutor-course-archive,
  .tutor-course-archive-results,
  .tutor-courses-wrap,
  .tutor-dashboard,
  .tutor-single-course { padding-block: var(--cc-space-8); }
}