/**
 * Forma de los componentes de Tutor LMS
 * ═════════════════════════════════════════════════════════════════
 *
 * Los COLORES ya los pone tutor-brand.css a través de los tokens del plugin.
 * Aquí va solo lo que los tokens no pueden expresar: proporciones, radios,
 * tipografía de los titulares y las dos o tres piezas que en el diseño de la
 * plataforma se ven distintas de lo que trae Tutor de serie.
 *
 * Regla que conviene respetar al ampliar este archivo: si algo se puede
 * arreglar con una variable --tutor-*, va en tutor-brand.css, no aquí. Cuanto
 * menos selector de clase del plugin toquemos, menos se rompe al actualizar.
 */

/* ── Tipografía de los titulares de Tutor ────────────────────────── */
.tutor-course-name,
.tutor-course-card-title,
.tutor-course-details-title,
.tutor-dashboard-title,
.tutor-segment-title,
.tutor-color-black.tutor-fs-4,
.tutor-fs-1, .tutor-fs-2, .tutor-fs-3, .tutor-fs-4 {
  font-family: var(--fg-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}

.tutor-course-card .tutor-course-name {
  font-size: clamp(24px, 2.2vw, 32px);
  margin: 0;
}

.tutor-course-name a,
.tutor-course-card-title a { color: var(--fg-ink); }
.tutor-course-name a:hover,
.tutor-course-card-title a:hover { color: var(--fg-orange); }

/* ── Tarjeta de curso ──────────────────────────────────────────────
   Misma ficha que las tarjetas de la web pública: crema, filete de un
   píxel, esquina de 18 y la foto a sangre pegada al borde de arriba.
   Ojo: .tutor-card y .tutor-course-card son el MISMO div, no uno dentro
   de otro, así que aquí no se puede repartir el borde entre los dos. */
.tutor-card {
  border-radius: 18px;
  border: 1px solid var(--fg-line);
  box-shadow: none;
  overflow: hidden;
}

.tutor-course-card {
  display: flex;
  flex-direction: column;
  background: var(--fg-cream);
  border: 1px solid var(--fg-line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.tutor-course-card:hover { transform: translateY(-4px); }

/* La miniatura manda en esta pantalla: 16:9 y la foto recortada, nunca
   deformada. No lleva esquina propia: la recorta la tarjeta. */
.tutor-course-card .tutor-course-thumbnail,
.tutor-course-card-thumbnail {
  /* Tutor le pone 20 px de esquina a la miniatura y 5 a la propia <img>; se
     quitan los dos para que el recorte lo haga la tarjeta y la foto quede
     pegada al filete de arriba, como en las tarjetas de la web. */
  border-radius: 0;
  overflow: hidden;
  background: var(--fg-beige);
}
.tutor-course-card .tutor-course-thumbnail img { border-radius: 0; }
.tutor-course-card .tutor-course-thumbnail img,
.tutor-course-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tutor-course-card .tutor-card-body { padding: 26px 28px 0; }
.tutor-course-card .tutor-card-footer { padding: 22px 28px 28px; border-top: 0; background: transparent; }

/* Marcar como favorito: discreto, encima de la foto y solo al pasar por encima. */
.tutor-course-bookmark .tutor-iconic-btn {
  background: rgba(11, 11, 11, 0.55);
  color: #fff;
  border: 0;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.tutor-course-card:hover .tutor-course-bookmark .tutor-iconic-btn,
.tutor-course-bookmark .tutor-iconic-btn:focus-visible { opacity: 1; }
.tutor-course-bookmark .tutor-iconic-btn:hover { background: var(--fg-orange); }

/* ── Botones ─────────────────────────────────────────────────────── */
.tutor-btn {
  font-family: var(--fg-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.tutor-btn:hover { transform: translateY(-2px); }
.tutor-btn-lg { padding: 18px 32px; }

/* ── Metadatos (duración, lecciones, autor) ──────────────────────── */
.tutor-meta,
.tutor-meta-value,
.tutor-course-card-meta {
  font-family: var(--fg-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-ink-70);
}

/* ── Etiquetas de categoría ──────────────────────────────────────── */
/* La misma etiqueta que la web: Fraunces en negrita sobre naranja. */
.tutor-course-card .tutor-badge-label,
.fg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--fg-orange);
  color: #fff;
  font-family: var(--fg-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fg-tag-ink { background: var(--fg-ink); color: var(--fg-cream); }
.fg-tag-olive { background: var(--fg-olive); color: #fff; }

/* ── Progreso ────────────────────────────────────────────────────── */
.tutor-progress-bar,
.tutor-progress-value {
  border-radius: 999px;
}
.tutor-progress-bar { height: 10px; background: var(--fg-beige); }

/* ── Filtros del archivo de cursos ───────────────────────────────── */
.tutor-course-filter .tutor-form-check-label,
.tutor-course-archive-filter-bar {
  font-family: var(--fg-body);
  font-weight: 600;
}

/* ── Panel del alumno (el "Mi perfil" de la plataforma) ──────────── */
.tutor-dashboard { background: transparent; }
.tutor-dashboard-header { border-bottom: 1px solid var(--fg-line); }
.tutor-dashboard-permalinks a {
  font-family: var(--fg-body);
  font-weight: 600;
  border-radius: 10px;
}
.tutor-dashboard-content .tutor-card { border-radius: 14px; }

/* ── Adjuntos: son los PDF de la biblioteca de documentos ────────── */
.tutor-course-attachment.tutor-card {
  border-radius: 14px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.tutor-course-attachment.tutor-card:hover {
  transform: translateY(-2px);
  border-color: var(--fg-ink);
}
.tutor-course-attachment .tutor-iconic-btn {
  background: var(--fg-ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
}
.tutor-course-attachment .tutor-iconic-btn:hover { background: var(--fg-orange); }

/* ── Reproductor de la lección ───────────────────────────────────── */
.tutor-video-player,
.tutor-lesson-video { border-radius: 14px; overflow: hidden; background: var(--fg-ink); }

/* ── Meta propia de la tarjeta de curso ──────────────────────────────
   La plantilla tutor/loop/meta.php sustituye al avatar + "By X In Y" de
   Tutor por "TEMA · N vídeos · duración", que es lo que aquí interesa. */
.fg-course-meta {
  font-family: var(--fg-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-ink-70);
  margin: 14px 0 0;
}

/* ── Progreso en la tarjeta (solo si hay matrícula) ──────────────── */
.fg-course-progress { margin-top: 18px; }
.fg-course-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--fg-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-ink-70);
  margin-bottom: 8px;
}
.fg-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--fg-beige);
  overflow: hidden;
}
.fg-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--fg-orange);
  /* La misma curva larga que en la web: la barra se llena, no aparece. */
  transition: width 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Pantalla de acceso, popup y contraseña: ver acceso.css ──────── */

/* ── El temario de una asignatura ────────────────────────────────────
   Es la pantalla central del modelo: se entra en una ASIGNATURA y se ve
   su temario, un acordeón con un bloque por TEMA y los vídeos dentro.
   El acordeón, el plegado y los candados los pone Tutor; aquí solo se le
   da la forma de la plataforma. */
.tutor-course-content-title {
  font-family: var(--fg-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--fg-ink);
}

.tutor-accordion {
  border: 1px solid var(--fg-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.tutor-accordion-item { border-bottom: 1px solid var(--fg-line); }
.tutor-accordion-item:last-child { border-bottom: 0; }

/* Cabecera del TEMA */
.tutor-accordion-item-header {
  font-family: var(--fg-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--fg-ink);
  padding: 20px 24px;
  background: transparent;
  transition: background 0.15s ease;
}
.tutor-accordion-item-header:hover { background: rgba(11, 11, 11, 0.03); }
.tutor-accordion-item-header.is-active { background: rgba(255, 91, 0, 0.05); }

.tutor-accordion-item-body-content { padding: 4px 24px 20px; }

/* Lista de VÍDEOS dentro del tema */
.tutor-course-content-list-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(11, 11, 11, 0.06);
}
.tutor-course-content-list-item:last-child { border-bottom: 0; }
.tutor-course-content-list-item-title {
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--fg-ink);
}
.tutor-course-content-list-item-title a { color: inherit; }
.tutor-course-content-list-item-title a:hover { color: var(--fg-orange); }
.tutor-course-content-list-item-icon { color: var(--fg-orange); }
.tutor-course-content-list-item-duration {
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--fg-ink-50);
}
/* El candado de lo que aún no se puede ver, en gris; el ojo, en naranja. */
.tutor-course-content-list-item-status.tutor-icon-lock-line { color: var(--fg-ink-50); }
.tutor-course-content-list-item-status.tutor-icon-eye-line { color: var(--fg-orange); }

@media (max-width: 720px) {
  .tutor-course-content-title { font-size: 22px; }
  .tutor-accordion-item-header { padding: 16px 18px; font-size: 16px; }
  .tutor-accordion-item-body-content { padding: 4px 18px 16px; }
}

/* ── Restos de tienda ───────────────────────────────────────────────────
   Tutor está pensado para academias que venden cursos, así que salpica la
   ficha con muebles de comercio. Casi todos se quitan desde sus ajustes
   (ver README, "Ajustes de Tutor"); este es el único que no tiene ajuste
   propio: el icono de carrito que acompaña a la fecha de acceso. */
.tutor-icon-purchase-mark { display: none; }
.tutor-enrolled-info-text { margin-left: 0; }

/* La foto de cabecera de la asignatura se sube a la ficha tal cual y, si es
   vertical o muy alta, ocupa una pantalla entera antes del temario. Se recorta
   a un 16:9 para que el temario quede siempre a la vista sin bajar. */
.tutor-course-thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
}
.tutor-course-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Al apagar "Nivel", "Duración" y "Última actualización" en los ajustes de
   Tutor, el pie de la tarjeta lateral se queda con una <ul> vacía que sigue
   ocupando su franja blanca. Se oculta cuando no tiene ni un <li> dentro, así
   que vuelve a aparecer sola el día que se encienda alguno de esos datos.

   OJO: .tutor-card-footer es TAMBIÉN el pie de las tarjetas de la portada, que
   es donde vive el botón. Por eso la regla va acotada a .tutor-sidebar-card;
   sin acotar, desaparecen los botones de toda la rejilla. */
.tutor-sidebar-card .tutor-card-footer:not(:has(li)) { display: none; }
.tutor-single-course-sidebar-more:not(:has(*)) { display: none; }

/* ── Lo que acompaña al vídeo ────────────────────────────────────────
   Dos pestañas del reproductor: «Material del vídeo» (los PDF adjuntos,
   plantilla tutor/learning-area/lesson/exercise-files.php) y «Para las
   familias» (los consejos, fg-consejos.php). Comparten caja y aire para
   que se lean como dos partes de lo mismo y no como dos plugins. */
.fg-material,
.fg-consejos {
  padding: 28px 24px 32px;
}
.fg-material__intro,
.fg-consejos__intro {
  font-family: var(--fg-body);
  font-size: 14px;
  color: var(--fg-ink-50);
  margin: 0 0 18px;
}

/* Filas, no tarjetas: con dos PDF una rejilla de tarjetas deja medio
   panel vacío. */
.fg-material__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fg-material__fila {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fg-line);
}
.fg-material__fila:first-child { border-top: 1px solid var(--fg-line); }

.fg-material__ext {
  flex: 0 0 auto;
  width: 40px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fg-line);
  border-radius: 6px;
  background: #fff;
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-ink-50);
}
.fg-material__texto { min-width: 0; }
.fg-material__nombre {
  font-family: var(--fg-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--fg-ink);
  text-decoration: none;
}
.fg-material__nombre:hover { color: var(--fg-orange); }
.fg-material__meta {
  display: block;
  margin-top: 2px;
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-ink-50);
}
.fg-material__accion {
  margin-left: auto;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--fg-ink);
  color: #fff;
  transition: background 0.18s ease;
}
.fg-material__accion:hover { background: var(--fg-orange); color: #fff; }

/* Los consejos van en bloque crema: es material para llevarse, no para
   consultar en pantalla, y así se distingue del resumen del vídeo. */
.fg-consejos__lista {
  list-style: none;
  margin: 0;
  padding: 24px 26px;
  background: var(--fg-cream);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fg-consejos__lista li {
  position: relative;
  padding-left: 26px;
  font-family: var(--fg-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-ink);
}
.fg-consejos__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--fg-orange);
  border-radius: 2px;
  rotate: 45deg;
}
.fg-consejos__pie {
  margin: 14px 0 0;
  font-family: var(--fg-body);
  font-size: 13px;
  color: var(--fg-ink-50);
}

@media (max-width: 720px) {
  .fg-material,
  .fg-consejos { padding: 22px 18px 26px; }
  .fg-consejos__lista { padding: 20px; }
}

/* ── Pestañas del reproductor ─────────────────────────────────────────────
   Tutor las pinta con text-transform: capitalize, que en inglés queda bien
   («Exercise Files») pero en castellano escribe «Material Del Vídeo». Aquí los
   rótulos ya vienen escritos como se leen, así que se apaga.                */
.tutor-lesson-content-tab .tutor-tabs-tab,
.tutor-tabs-nav .tutor-tabs-tab {
	text-transform: none;
	font-family: var(--fg-body);
	letter-spacing: 0;
}

/* ── Diálogo «Compartir» ─────────────────────────────────────────────
   Mismo lenguaje que el popup de acceso: tarjeta de radio grande, titular
   en Fraunces y el enlace en un campo con el botón de copiar dentro. Sin
   los botones de Facebook, X y LinkedIn: es una plataforma privada y lo útil
   es pasar el enlace a otra persona del centro. */
#tutor-course-share-opener .tutor-modal-window { max-width: 460px !important; width: calc(100% - 32px); }
#tutor-course-share-opener .tutor-modal-content { border-radius: 20px !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
#tutor-course-share-opener .tutor-modal-body { padding: 32px !important; }
#tutor-course-share-title {
  font-family: var(--fg-display) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--fg-ink) !important;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  margin-bottom: 18px !important;
}
#tutor-course-share-opener .tutor-fs-7.tutor-color-secondary {
  font-size: 13px !important;
  font-weight: 600;
  color: var(--fg-ink-70) !important;
}
#tutor-course-share-opener input.tutor-form-control {
  height: 52px;
  padding: 0 56px 0 16px;
  border: 1.5px solid rgba(11, 11, 11, 0.14) !important;
  border-radius: 12px !important;
  background: var(--fg-cream) !important;
  font-family: var(--fg-body);
  font-size: 14px;
  color: var(--fg-ink);
  box-shadow: none !important;
}
#tutor-course-share-opener .tutor-copy-text {
  top: 6px !important;
  right: 6px !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 999px !important;
  background: var(--fg-orange) !important;
  color: #fff !important;
  border: 0 !important;
}
#tutor-course-share-opener .tutor-copy-text:hover { background: var(--fg-ink) !important; }
#tutor-course-share-opener .tutor-mb-32 { margin-bottom: 0 !important; }
#tutor-course-share-opener .tutor-modal-body > div:last-child:has(.tutor-social-share-wrap) { display: none; }
#tutor-course-share-opener .tutor-modal-close-o { top: 18px !important; right: 18px !important; }

/* ── Cabecera de la ficha en móvil ───────────────────────────────────
   «Compartir» se salía por la derecha a 390 px: la fila del área y la del
   botón no podían bajar de línea. */
@media (max-width: 640px) {
  .tutor-course-details-header .tutor-row { flex-wrap: wrap; row-gap: 8px; }
  .tutor-course-details-header .tutor-col-auto { width: 100%; }
  .tutor-course-details-actions { margin-top: 4px !important; }
  .tutor-course-share-btn { padding-left: 0 !important; }
}

/* ── Pestañas del vídeo en móvil ─────────────────────────────────────
   «El vídeo · Material del vídeo · Para las familias» no cabía y la última
   quedaba cortada sin pista de que se podía desplazar. En pantallas
   estrechas se quitan los iconos y se aprieta el relleno; si aun así no
   cabe, se desplaza. */
@media (max-width: 480px) {
  .tutor-tabs-nav { gap: 2px !important; padding-left: 12px !important; padding-right: 12px !important; scrollbar-width: none; }
  .tutor-tabs-nav::-webkit-scrollbar { display: none; }
  .tutor-tabs-nav .tutor-tabs-tab { padding: 8px 10px !important; font-size: 13px !important; white-space: nowrap; }
  .tutor-tabs-nav .tutor-tabs-tab .tutor-icon { display: none !important; }
}

/* ── Ficha de una asignatura terminada ───────────────────────────── */
.fg-ficha-terminada {
  margin: 18px 0 0;
  font-family: var(--fg-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-olive);
}