/* ==========================================================
   FX Cinematic Courses · Estilos
   ----------------------------------------------------------
   1. Variables de marca (lo ÚNICO que cambia por cliente)
   2. Paleta oscura para Tutor 4 (área de aprendizaje y panel)
   3. Componentes base (botones, etiquetas, progreso)
   4. Portada del curso
   5. Panel del alumno
   6. Área de aprendizaje (ajustes finos)
   7. Responsive
   ========================================================== */

/* ---------- 1. Variables de marca ---------- */
:root {
  --fxcc-accent: #E3A857;
  --fxcc-accent-hover: #D19545;
  --fxcc-on-accent: #141413;
  --fxcc-accent-text: #E3A857;   /* acento usado como TEXTO (en claro se oscurece para contraste) */

  --fxcc-bg: #0E0E10;
  --fxcc-bg-deep: #0A0A0B;
  --fxcc-surface: #17171A;
  --fxcc-surface-2: #1E1D21;
  --fxcc-surface-3: #26262B;
  --fxcc-line: #26262B;
  --fxcc-line-2: #4A4951;

  --fxcc-text: #F7F5F0;
  --fxcc-text-2: #DAD6CE;
  --fxcc-muted: #BEB9B0;
  --fxcc-subtle: #A39E95;

  --fxcc-done: #7FB3A6;
  --fxcc-hero-bg: #151517;

  --fxcc-display: 'Fraunces', Georgia, serif;
  --fxcc-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  --fxcc-tint-1: #3A2A15;  /* fondos suaves con tono de acento */
  --fxcc-tint-2: #4A3519;

  /* Escala Apple HIG (Dynamic Type iOS, tamaño por defecto).
     Todo el plugin y FX Community leen de aquí: un ajuste, un solo lugar. */
  --fxcc-fs-hero: 48px;      /* portada del curso (apple.com) */
  --fxcc-fs-large: 34px;     /* Large Title · lh 41 */
  --fxcc-fs-title1: 28px;    /* Title 1 · lh 34 */
  --fxcc-fs-title2: 22px;    /* Title 2 · lh 28 */
  --fxcc-fs-title3: 20px;    /* Title 3 · lh 25 */
  --fxcc-fs-headline: 17px;  /* Headline · semibold · lh 22 */
  --fxcc-fs-body: 17px;      /* Body */
  --fxcc-fs-callout: 16px;   /* Callout · lh 21 */
  --fxcc-fs-sub: 15px;       /* Subheadline · lh 20 */
  --fxcc-fs-foot: 13px;      /* Footnote · lh 18 */
  --fxcc-fs-caption: 12px;   /* Caption · lh 16 */
  --fxcc-lh-tight: 1.2;      /* títulos */
  --fxcc-lh-body: 1.5;       /* párrafos de lectura */

  /* Controles: 44px = área táctil mínima de Apple */
  --fxcc-btn-h: 50px;
  --fxcc-btn-h-sm: 44px;
  --fxcc-ctl-h: 44px;
  --fxcc-chip-h: 32px;
  --fxcc-radius: 12px;       /* tarjetas */
  --fxcc-radius-btn: 12px;
  --fxcc-radius-sm: 10px;    /* botón pequeño, inputs */

  /* Rejilla de 8 */
  --fxcc-s1: 4px; --fxcc-s2: 8px; --fxcc-s3: 12px; --fxcc-s4: 16px; --fxcc-s5: 20px;
  --fxcc-s6: 24px; --fxcc-s8: 32px; --fxcc-s10: 40px; --fxcc-s12: 48px; --fxcc-s16: 64px;
  --fxcc-section: 64px;      /* separación entre secciones */
  --fxcc-read: 680px;        /* ancho máximo de lectura */
  --fxcc-gutter: 40px;
}

/* ---------- 2. Paleta de Tutor 4 ----------
   Tutor 4 usa variables CSS en todo su diseño. Aquí las reemplazamos
   por las nuestras (sirve para modo claro y oscuro, porque se basan en --fxcc-*).
   Se aplica:
   - en <html data-tutor-theme="..."> (panel y área de aprendizaje)
   - dentro de .fxcc-course (portada del curso, incl. caja de inscripción) */
html[data-tutor-theme],
body.fxcc,           /* páginas sin sesión (acceso, registro): Tutor no pone data-tutor-theme */
.fxcc-course {
  --tutor-brand-50: var(--fxcc-tint-1);
  --tutor-brand-100: var(--fxcc-tint-1);
  --tutor-brand-200: var(--fxcc-tint-2);
  --tutor-brand-300: var(--fxcc-tint-2);
  --tutor-brand-400: #EBC48A;
  --tutor-brand-450: #E7B670;
  --tutor-brand-500: var(--fxcc-accent);
  --tutor-brand-600: var(--fxcc-accent);
  --tutor-brand-700: var(--fxcc-accent-hover);
  --tutor-brand-800: #A8712C;
  --tutor-brand-900: #3A2A15;
  --tutor-brand-950: #241A0E;
  --tutor-color-primary: var(--fxcc-accent);
  --tutor-color-primary-hover: var(--fxcc-accent-hover);

  --tutor-surface-base: var(--fxcc-bg);
  --tutor-surface-l1: var(--fxcc-surface);
  --tutor-surface-l1-hover: var(--fxcc-surface-2);
  --tutor-surface-l2: var(--fxcc-surface-2);
  --tutor-surface-l2-hover: var(--fxcc-surface-3);
  --tutor-surface-l3: var(--fxcc-surface-2);
  --tutor-surface-sidebar-l1: var(--fxcc-bg-deep);
  --tutor-surface-brand-secondary: var(--fxcc-tint-2);
  --tutor-surface-brand-quaternary: var(--fxcc-tint-2);

  /* Menú lateral del panel: fondo cálido y activo en ámbar suave */
  --tutor-tab-sidebar-l2: var(--fxcc-bg-deep);
  --tutor-tab-sidebar-l2-hover: var(--fxcc-surface-2);
  --tutor-tab-sidebar-l2-active: var(--fxcc-tint-2);
  --tutor-tab-sidebar-l4-hover: var(--fxcc-surface-2);
  --tutor-tab-sidebar-l4-active: var(--fxcc-tint-2);

  /* Grises fríos de Tutor → grises cálidos de la marca */
  --tutor-button-secondary-hover: var(--fxcc-line-2);
  --tutor-button-secondary-focused: var(--fxcc-surface-3);
  --tutor-button-outline-hover: var(--fxcc-surface-2);
  --tutor-button-ghost-hover: var(--fxcc-surface-2);
  --tutor-border-hover: var(--fxcc-line-2);
  --tutor-actions-gray-empty: var(--fxcc-surface-2);
  --tutor-actions-gray-secondary: var(--fxcc-surface-2);
  --tutor-actions-gray-tertiary: var(--fxcc-surface-3);
  --tutor-surface-brand-primary: var(--fxcc-accent);
  --tutor-surface-brand-tertiary: var(--fxcc-surface-2);

  --tutor-text-primary: var(--fxcc-text);
  --tutor-text-secondary: var(--fxcc-text-2);
  --tutor-text-subdued: var(--fxcc-subtle);
  --tutor-text-brand: var(--fxcc-accent-text);
  --tutor-text-brand-hover: var(--fxcc-accent-hover);

  --tutor-icon-idle: var(--fxcc-text-2);
  --tutor-icon-secondary: var(--fxcc-subtle);
  --tutor-icon-brand: var(--fxcc-accent);

  --tutor-button-primary: var(--fxcc-accent);
  --tutor-button-primary-hover: var(--fxcc-accent-hover);
  --tutor-button-primary-focused: var(--fxcc-accent);
  --tutor-button-secondary: var(--fxcc-surface-3);

  --tutor-border-idle: var(--fxcc-line);
  --tutor-border-idle2: var(--fxcc-line-2);
  --tutor-border-brand: var(--fxcc-accent);
  --tutor-border-brand-secondary: var(--fxcc-line-2);

  --tutor-font-family-body: var(--fxcc-body);
  --tutor-font-family-heading: var(--fxcc-display);
}

/* Texto oscuro sobre el botón ámbar (contraste AA) */
html[data-tutor-theme] .tutor-btn-primary,
.fxcc-course .tutor-btn-primary {
  color: var(--fxcc-on-accent) !important;
}

/* ---------- 3. Componentes base ---------- */
body.fxcc {
  background: var(--fxcc-bg);
}

.fxcc-course,
.fxcc-dash {
  color: var(--fxcc-text);
  font-family: var(--fxcc-body);
}

.fxcc-course h1,
.fxcc-course h2,
.fxcc-dash h1,
.fxcc-dash h2 {
  font-family: var(--fxcc-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--fxcc-text);
  margin: 0;
}

.fxcc-eyebrow {
  font-family: var(--fxcc-body);
  font-size: var(--fxcc-fs-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fxcc-accent-text);
}

.fxcc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fxcc-s2);
  min-height: var(--fxcc-btn-h);
  padding: 0 var(--fxcc-s6);
  border-radius: var(--fxcc-radius-btn);
  border: 1px solid transparent;
  background: var(--fxcc-accent);
  color: var(--fxcc-on-accent) !important;
  font-family: var(--fxcc-body);
  font-size: var(--fxcc-fs-headline);
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
.fxcc-btn:hover { background: var(--fxcc-accent-hover); }

.fxcc-btn--ghost {
  background: transparent;
  color: var(--fxcc-text) !important;
  border-color: var(--fxcc-line-2);
}
.fxcc-btn--ghost:hover { background: var(--fxcc-surface-2); }

.fxcc-progress { display: flex; align-items: center; gap: 14px; }
.fxcc-progress__bar {
  width: 220px; height: 4px; border-radius: 2px;
  background: var(--fxcc-surface-3); overflow: hidden;
}
.fxcc-progress__bar span { display: block; height: 100%; background: var(--fxcc-accent); }
.fxcc-progress__text { font-size: var(--fxcc-fs-sub); color: var(--fxcc-text-2); }

/* ---------- 4. Portada del curso ---------- */
.fxcc-course {
  background: var(--fxcc-bg);
  padding-bottom: var(--fxcc-section);
}

.fxcc-section {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--fxcc-section) var(--fxcc-gutter) 0;
}

/* Hero */
.fxcc-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  background: var(--fxcc-hero-bg);
  overflow: hidden;
}
.fxcc-hero__media {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 60%;
  background: var(--fxcc-surface-2) center / cover no-repeat;
}
.fxcc-hero__fade {
  position: absolute; top: 0; bottom: 0; left: 38%;
  width: 32%;
  background: linear-gradient(90deg, var(--fxcc-hero-bg) 0%, transparent 100%);
}
.fxcc-hero__content {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px var(--fxcc-gutter);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fxcc-hero__content > * { max-width: 620px; }
.fxcc-hero__title {
  font-size: clamp(48px, 6vw, 84px) !important;
  line-height: .98 !important;
  letter-spacing: -0.02em !important;
}
.fxcc-hero__by { font-size: var(--fxcc-fs-title3); color: var(--fxcc-text-2); }
.fxcc-hero__by strong { color: var(--fxcc-text); font-weight: 500; }
.fxcc-hero__by em { color: var(--fxcc-text); }
.fxcc-hero__lead { margin: 0; font-size: var(--fxcc-fs-body); line-height: var(--fxcc-lh-body); color: var(--fxcc-muted); }
.fxcc-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.fxcc-hero__meta { font-size: var(--fxcc-fs-sub); color: var(--fxcc-muted); white-space: pre-wrap; }

/* Caja de inscripción de Tutor, adaptada al hero */
.fxcc-enroll { max-width: 420px !important; }
.fxcc-enroll .tutor-card,
.fxcc-enroll .tutor-course-sidebar-card {
  background: var(--fxcc-surface) !important;   /* antes: negro fijo de la época del modo oscuro */
  border: 1px solid var(--fxcc-line) !important;
  border-radius: var(--fxcc-radius) !important;
  box-shadow: 0 1px 2px rgba(17, 17, 16, .04), 0 8px 24px rgba(17, 17, 16, .06) !important;
  color: var(--fxcc-text);
  overflow: hidden;
}
.fxcc-enroll .tutor-card-body { padding: var(--fxcc-s6) !important; }

/* Título "Progreso del curso": Headline */
.fxcc-enroll .tutor-course-progress-wrapper { margin-bottom: var(--fxcc-s6) !important; }
.fxcc-enroll .tutor-course-progress-wrapper h3 {
  font-family: var(--fxcc-body) !important;
  font-size: var(--fxcc-fs-headline) !important;
  font-weight: 600 !important;
  color: var(--fxcc-text) !important;
  margin-bottom: var(--fxcc-s3) !important;
}
.fxcc-enroll .list-item-progress > div:first-child {
  font-size: var(--fxcc-fs-sub) !important;
  color: var(--fxcc-text-2) !important;
}
/* Barra de progreso: pista visible y relleno ámbar */
.fxcc-enroll .tutor-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--fxcc-surface-3) !important;
  overflow: hidden;
}
.fxcc-enroll .tutor-progress-bar .tutor-progress-value {
  background: var(--fxcc-accent) !important;
  border-radius: 999px;
}

/* Botones de la caja: misma escala que los nuestros */
.fxcc-enroll .tutor-btn {
  min-height: var(--fxcc-btn-h);
  border-radius: var(--fxcc-radius-btn) !important;
  font-size: var(--fxcc-fs-headline) !important;
  font-weight: 600 !important;
}
.fxcc-enroll .tutor-btn-outline-primary {
  background: transparent !important;
  color: var(--fxcc-text) !important;
  border: 1px solid var(--fxcc-line-2) !important;
}

/* Aviso "Finaliza todas las lecciones…" */
.fxcc-enroll .tutor-alert {
  background: var(--fxcc-tint-1) !important;
  border: 1px solid var(--fxcc-tint-2) !important;
  border-radius: var(--fxcc-radius-sm) !important;
  color: var(--fxcc-text-2) !important;
  font-size: var(--fxcc-fs-sub);
  margin-top: var(--fxcc-s5) !important;
}
.fxcc-enroll .tutor-alert-icon { color: var(--fxcc-accent-text) !important; }

/* Pie: nivel, inscritas, última actualización */
.fxcc-enroll .tutor-card-footer {
  background: var(--fxcc-bg) !important;
  border-top: 1px solid var(--fxcc-line) !important;
  padding: var(--fxcc-s5) var(--fxcc-s6) !important;
}
.fxcc-enroll .tutor-card-footer .tutor-fs-6 {
  font-size: var(--fxcc-fs-sub) !important;
  color: var(--fxcc-text-2) !important;
}
.fxcc-enroll .tutor-card-footer [class*="tutor-icon-"] { color: var(--fxcc-muted) !important; }
.fxcc-enroll .tutor-color-black { color: var(--fxcc-text) !important; }
.fxcc-enroll .tutor-color-secondary,
.fxcc-enroll .tutor-color-muted { color: var(--fxcc-text-2) !important; }

/* Qué incluye */
.fxcc-includes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fxcc-s10);
  padding-bottom: var(--fxcc-section);
  border-bottom: 1px solid var(--fxcc-line);
}
.fxcc-includes__item { display: flex; flex-direction: column; gap: 16px; }
.fxcc-includes__item .fxcc-icon { color: var(--fxcc-accent-text); }
.fxcc-includes__item h2 { font-size: var(--fxcc-fs-title1) !important; line-height: var(--fxcc-lh-tight) !important; }
.fxcc-includes__item p { margin: 0; font-size: var(--fxcc-fs-callout); line-height: var(--fxcc-lh-body); color: var(--fxcc-muted); }

/* Tráiler */
.fxcc-trailer { display: flex; flex-direction: column; gap: 20px; }
.fxcc-trailer__video { border-radius: var(--fxcc-radius); overflow: hidden; background: #000; }

/* Acerca del curso */
.fxcc-about { display: flex; flex-direction: column; gap: 20px; }
.fxcc-about__body { max-width: var(--fxcc-read); font-size: var(--fxcc-fs-body); line-height: var(--fxcc-lh-body); color: var(--fxcc-text-2); }
.fxcc-about__body a { color: var(--fxcc-accent-text); }

/* Programa */
.fxcc-program__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--fxcc-s10); }
.fxcc-program__title { font-size: var(--fxcc-fs-large) !important; line-height: var(--fxcc-lh-tight) !important; margin-top: 12px !important; }

.fxcc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.fxcc-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none !important; color: var(--fxcc-text) !important; }
.fxcc-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--fxcc-radius);
  background: var(--fxcc-surface-2) center / cover no-repeat;
  display: flex; align-items: flex-end;
  padding: 14px; box-sizing: border-box;
  margin-bottom: 4px;
  transition: transform .2s ease;
}
.fxcc-card:hover .fxcc-card__thumb { transform: translateY(-2px); }
.fxcc-card__num {
  font-family: var(--fxcc-display);
  font-size: var(--fxcc-fs-large); line-height: 1;
  color: var(--fxcc-text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.fxcc-card__time {
  position: absolute; top: 12px; right: 12px;
  font-size: var(--fxcc-fs-caption); color: #F7F5F0;
  background: rgba(14, 14, 16, .85);
  padding: 4px 8px; border-radius: 3px;
}
.fxcc-card__done { position: absolute; top: 10px; left: 10px; color: var(--fxcc-done); }
.fxcc-card__label { font-size: var(--fxcc-fs-caption); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fxcc-subtle); }
.fxcc-card__title { font-size: var(--fxcc-fs-headline); font-weight: 600; line-height: 1.3; }
.fxcc-card__status { font-size: var(--fxcc-fs-foot); color: var(--fxcc-done); margin-top: 6px; }

.fxcc-card--quiz {
  justify-content: space-between;
  gap: 24px;
  min-height: 100%;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--fxcc-line-2);
  border-radius: var(--fxcc-radius);
  background: var(--fxcc-surface);
}
.fxcc-card--quiz .fxcc-icon { color: var(--fxcc-accent-text); }
.fxcc-card--quiz .fxcc-card__label { color: var(--fxcc-accent-text); }
.fxcc-card--quiz .fxcc-card__title { font-family: var(--fxcc-display); font-size: var(--fxcc-fs-title2); font-weight: 400; margin-top: 6px; }
.fxcc-card--quiz.is-done .fxcc-icon { color: var(--fxcc-done); }
.fxcc-card--quiz:hover { border-color: var(--fxcc-accent); }


/* Programa por sesiones */
.fxcc-program__note {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fxcc-fs-sub); color: var(--fxcc-muted);
}
.fxcc-sessions { display: flex; flex-direction: column; gap: 32px; }
.fxcc-session {
  display: flex; gap: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--fxcc-line);
}
.fxcc-session__info { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.fxcc-session__num {
  font-size: var(--fxcc-fs-caption); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fxcc-accent-text);
}
.fxcc-session__title { font-family: var(--fxcc-display); font-size: var(--fxcc-fs-title2); line-height: var(--fxcc-lh-tight); color: var(--fxcc-text); }
.fxcc-session__meta { font-size: var(--fxcc-fs-sub); color: var(--fxcc-subtle); }
.fxcc-session__videos {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.fxcc-card__badge {
  position: absolute; top: 12px; left: 12px;
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fxcc-fs-caption); font-weight: 600;
  color: #141413; background: #FFFFFF;
  padding: 4px 8px; border-radius: 3px;
}

/* "Ver las N sesiones" */
.fxcc-more { margin-top: 32px; }
.fxcc-more > .fxcc-sessions { margin-top: 32px; }
.fxcc-more__btn {
  list-style: none;
  width: max-content;
  margin: 0 auto;
  display: flex; align-items: center;
  min-height: var(--fxcc-btn-h); padding: 0 var(--fxcc-s6);
  border-radius: var(--fxcc-radius-btn);
  border: 1px solid var(--fxcc-line-2);
  background: var(--fxcc-surface);
  color: var(--fxcc-text);
  font-size: var(--fxcc-fs-headline); font-weight: 600;
  cursor: pointer;
}
.fxcc-more__btn::-webkit-details-marker { display: none; }
.fxcc-more[open] > .fxcc-more__btn { display: none; }

/* Libro de trabajo */
.fxcc-book {
  display: flex; align-items: center; justify-content: space-between; gap: 64px;
  padding: var(--fxcc-s12); border-radius: var(--fxcc-radius);
  background: var(--fxcc-surface);
  border: 1px solid var(--fxcc-line);
}
.fxcc-book__text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 560px; }
.fxcc-book__text h2 { font-size: var(--fxcc-fs-title1) !important; line-height: var(--fxcc-lh-tight) !important; }
.fxcc-book__text p { margin: 0; font-size: var(--fxcc-fs-body); line-height: var(--fxcc-lh-body); color: var(--fxcc-muted); }
.fxcc-book__cover {
  width: 240px; height: 320px; flex-shrink: 0; box-sizing: border-box;
  border-radius: 3px 8px 8px 3px;
  background: var(--fxcc-surface-2);
  border-left: 10px solid var(--fxcc-surface-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; text-align: center;
  color: var(--fxcc-accent-text);
}
.fxcc-book__cover span { font-family: var(--fxcc-display); font-size: var(--fxcc-fs-title3); color: var(--fxcc-text); }

/* Certificado */
.fxcc-cert {
  display: flex; align-items: center; justify-content: space-between; gap: 64px;
  padding: var(--fxcc-s12); border-radius: var(--fxcc-radius); background: var(--fxcc-surface);
}
.fxcc-cert__text { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.fxcc-cert__text h2 { font-size: var(--fxcc-fs-title1) !important; line-height: var(--fxcc-lh-tight) !important; }
.fxcc-cert__text p { margin: 0; font-size: var(--fxcc-fs-body); line-height: var(--fxcc-lh-body); color: var(--fxcc-muted); }
.fxcc-cert__preview {
  flex-shrink: 0; width: 460px; aspect-ratio: 1.41;
  background: #FFFFFF; border: 1px solid var(--fxcc-line-2); border-radius: 4px; padding: 16px; box-sizing: border-box;
}
.fxcc-cert__frame {
  height: 100%; border: 1px solid #C9C4BA;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; color: #141413; padding: 20px; box-sizing: border-box;
}
.fxcc-cert__frame small { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #6B665E; }
.fxcc-cert__frame strong { font-family: var(--fxcc-display); font-size: 32px; font-weight: 400; }
.fxcc-cert__frame span { font-family: var(--fxcc-display); font-size: 18px; }

/* Login dentro de la portada (cuando el curso exige iniciar sesión) */
.fxcc-login { padding: var(--fxcc-section) var(--fxcc-s5); }
.fxcc-login input[type="text"],
.fxcc-login input[type="email"],
.fxcc-login input[type="password"] {
  background: var(--fxcc-surface-2) !important;
  border: 1px solid var(--fxcc-line-2) !important;
  color: var(--fxcc-text) !important;
}
.fxcc-login label,
.fxcc-login h1, .fxcc-login h2, .fxcc-login h3, .fxcc-login h4,
.fxcc-login p, .fxcc-login span { color: var(--fxcc-text-2); }
.fxcc-login a { color: var(--fxcc-accent-text); }
.fxcc-login button[type="submit"],
.fxcc-login .tutor-btn-primary {
  background: var(--fxcc-accent) !important;
  border-color: var(--fxcc-accent) !important;
  color: var(--fxcc-on-accent) !important;
}

.fxcc-course .tutor-color-black { color: var(--fxcc-text) !important; }
.fxcc-course .tutor-color-secondary,
.fxcc-course .tutor-color-muted { color: var(--fxcc-muted) !important; }
.fxcc-login .tutor-fs-4 { font-family: var(--fxcc-display); font-size: var(--fxcc-fs-title1) !important; font-weight: 400 !important; }

/* ---------- 5. Panel del alumno ---------- */
.fxcc-dash { display: flex; flex-direction: column; gap: 32px; margin-bottom: 40px; }
.fxcc-dash__hello { font-size: var(--fxcc-fs-large) !important; line-height: var(--fxcc-lh-tight) !important; }

.fxcc-continue {
  display: flex; align-items: center; gap: var(--fxcc-s10);
  padding: var(--fxcc-s5); border-radius: var(--fxcc-radius);
  background: var(--fxcc-surface);
}
.fxcc-continue__media {
  position: relative; flex-shrink: 0;
  width: 48%; max-width: 560px; aspect-ratio: 16 / 9;
  border-radius: var(--fxcc-radius); overflow: hidden;
  background: var(--fxcc-surface-2) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.fxcc-continue__play {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(14, 14, 16, .55); color: var(--fxcc-text);
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px); /* Safari */
  backdrop-filter: blur(4px);
}
.fxcc-continue__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(244, 241, 234, .2); }
.fxcc-continue__bar span { display: block; height: 100%; background: var(--fxcc-accent); }
.fxcc-continue__info { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.fxcc-continue__course { font-size: var(--fxcc-fs-sub); color: var(--fxcc-muted); }
.fxcc-continue__title { font-size: var(--fxcc-fs-title2) !important; line-height: var(--fxcc-lh-tight) !important; }
.fxcc-continue__meta { font-size: var(--fxcc-fs-sub); color: var(--fxcc-text-2); margin-bottom: 6px; }

/* ---------- 6. Área de aprendizaje (pantalla 02) ---------- */

/* Contenedor más ancho: video protagonista */
html[data-tutor-theme] .tutor-learning-area-container {
  max-width: 1040px;
}

/* Video: bordes suaves y fondo negro */
html[data-tutor-theme] .tutor-lesson-video-wrapper {
  border: 0 !important;
  padding-top: 0;
}
html[data-tutor-theme] .tutor-lesson-video-wrapper iframe,
html[data-tutor-theme] .tutor-lesson-video-wrapper video,
html[data-tutor-theme] .tutor-lesson-video-wrapper .plyr {
  border-radius: var(--fxcc-radius);
  overflow: hidden;
  background: #000;
}

/* Encabezado de la lección (Nivel + título + retomar) */
.fxcc-lesson-head {
  padding: 28px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fxcc-lesson-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.fxcc-lesson-head__title {
  margin: 0 !important;
  font-family: var(--fxcc-display) !important;
  font-weight: 400 !important;
  font-size: var(--fxcc-fs-large) !important;
  line-height: var(--fxcc-lh-tight) !important;
  letter-spacing: -0.01em;
  color: var(--fxcc-text);
}
.fxcc-lesson-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.fxcc-lesson-head__note {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fxcc-fs-sub); color: var(--fxcc-muted);
}
.fxcc-btn--sm { min-height: var(--fxcc-btn-h-sm); padding: 0 var(--fxcc-s4); font-size: var(--fxcc-fs-sub); border-radius: var(--fxcc-radius-sm); flex-shrink: 0; }
.fxcc-chip {
  font-size: var(--fxcc-fs-caption);
  color: var(--fxcc-text-2);
  background: var(--fxcc-surface-2);
  padding: 4px 10px;
  border-radius: 12px;
}

/* Barra superior */
html[data-tutor-theme] .tutor-learning-header {
  border-bottom: 1px solid var(--fxcc-line);
}
html[data-tutor-theme] .tutor-learning-header-title {
  font-family: var(--fxcc-body) !important;
  font-weight: 500 !important;
  font-size: var(--fxcc-fs-sub) !important;
}

/* Menú lateral de niveles */
html[data-tutor-theme] .tutor-learning-sidebar {
  background: var(--fxcc-bg-deep);
  border-right: 1px solid var(--fxcc-line);
}
html[data-tutor-theme] .tutor-learning-nav-item {
  min-height: 48px;
  border-radius: 0;
  transition: background-color .15s ease;
}
html[data-tutor-theme] .tutor-learning-nav-item:hover {
  background: var(--fxcc-surface-2);
}
html[data-tutor-theme] .tutor-learning-nav-item.active {
  background: var(--fxcc-surface-2);
  box-shadow: inset 3px 0 0 var(--fxcc-accent);
  font-weight: 600;
}
html[data-tutor-theme] .tutor-learning-nav-topic > .tutor-learning-nav-header {
  font-weight: 600;
}

/* Barra inferior: anterior · marcar completo · siguiente */
html[data-tutor-theme] .tutor-learning-area-footer {
  border-top: 1px solid var(--fxcc-line);
}
html[data-tutor-theme] .tutor-mark-as-complete-button {
  background: var(--fxcc-accent) !important;
  color: var(--fxcc-on-accent) !important;
  border: 0 !important;
  border-radius: var(--fxcc-radius-btn) !important;
  min-height: var(--fxcc-btn-h-sm);
  padding: 0 var(--fxcc-s5) !important;
  font-weight: 600;
}
html[data-tutor-theme] .tutor-mark-as-complete-button svg { color: var(--fxcc-on-accent) !important; }

/* Títulos del contenido de la lección */
html[data-tutor-theme] .tutor-learning-area-content h1,
html[data-tutor-theme] .tutor-learning-area-content h2,
html[data-tutor-theme] .tutor-learning-area-content h3 {
  font-family: var(--fxcc-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---------- 7. Responsive ---------- */
@media (max-width: 1100px) {
  :root { --fxcc-gutter: 40px; }
  .fxcc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fxcc-session { flex-direction: column; gap: 20px; }
  .fxcc-session__info { width: auto; }
  .fxcc-book { flex-direction: column; align-items: flex-start; }
  .fxcc-cert { flex-direction: column; align-items: flex-start; }
  .fxcc-cert__preview { width: 100%; max-width: 460px; }
}

@media (max-width: 782px) {
  :root { --fxcc-gutter: 20px; }
  .fxcc-hero { min-height: 0; flex-direction: column; }
  .fxcc-hero__media { position: relative; width: 100%; aspect-ratio: 16 / 9; }
  .fxcc-hero__fade { display: none; }
  .fxcc-hero__content { padding-top: 40px; padding-bottom: 56px; }
  :root { --fxcc-section: 40px; }
  .fxcc-includes { grid-template-columns: 1fr; gap: var(--fxcc-s8); }
  .fxcc-grid { grid-template-columns: 1fr; }
  .fxcc-session__videos { grid-template-columns: 1fr; }
  .fxcc-book { padding: var(--fxcc-s6) var(--fxcc-s5); }
  .fxcc-book__cover { display: none; }
  .fxcc-lesson-head__row { flex-direction: column; }
  .fxcc-cert { padding: var(--fxcc-s6) var(--fxcc-s5); }
  .fxcc-continue { flex-direction: column; align-items: stretch; gap: 20px; padding: 16px; }
  .fxcc-continue__media { width: 100%; max-width: none; }
  .fxcc-progress__bar { width: 140px; }
  .fxcc-lesson-head__title { font-size: var(--fxcc-fs-title1) !important; }
}

/* =========================================================
   v0.6.1 · Hero en dos columnas (texto | portada)
   - El título ya no se superpone a la imagen
   - Sin degradado: la portada ocupa su propia columna
   - Línea de datos alineada, con separador superior
   ========================================================= */
.fxcc-hero {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  align-items: stretch;
  min-height: 560px;
}
.fxcc-hero__media {
  position: relative;
  top: auto; right: auto; bottom: auto;
  width: auto;
  grid-column: 2; grid-row: 1;
  background-position: center;
  background-size: cover;
}
.fxcc-hero__fade { display: none; }
.fxcc-hero__content {
  grid-column: 1; grid-row: 1;
  max-width: none;
  margin: 0;
  justify-content: center;
  padding: var(--fxcc-section) var(--fxcc-gutter);
}
.fxcc-hero__content > * { max-width: 100%; }
.fxcc-hero__title {
  font-size: clamp(var(--fxcc-fs-large), 4vw, var(--fxcc-fs-hero)) !important;
  line-height: 1.08 !important;
}
.fxcc-hero__meta {
  white-space: normal;
  padding-top: var(--fxcc-s4);
  border-top: 1px solid var(--fxcc-line);
}

/* Móvil / tablet: portada arriba, texto abajo */
@media (max-width: 900px) {
  .fxcc-hero { grid-template-columns: 1fr; }
  .fxcc-hero__media { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; }
  .fxcc-hero__content { grid-column: 1; grid-row: 2; padding: var(--fxcc-s8) var(--fxcc-s5) var(--fxcc-s10); }
}

/* =========================================================
   v0.7.0 · Panel de la instructora (dashboard/instructor/home)
   ========================================================= */
/* Sin hueco: el contenido del panel se pega al menú y usa el ancho */
.tutor-dashboard-page:has(.fxcc-panel) { max-width: 1160px; margin: 0; padding-inline: 40px; }

.fxcc-panel { display: flex; flex-direction: column; gap: 24px; font-family: var(--fxcc-body); color: var(--fxcc-text); }
.fxcc-panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fxcc-panel__title { font-family: var(--fxcc-display) !important; font-weight: 400 !important; font-size: var(--fxcc-fs-large) !important; line-height: var(--fxcc-lh-tight) !important; margin: 6px 0 0 !important; }

/* Indicadores */
.fxcc-panel__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fxcc-kpi { display: block; background: var(--fxcc-surface); border: 1px solid var(--fxcc-line); border-radius: var(--fxcc-radius); padding: var(--fxcc-s5); color: inherit; text-decoration: none; }
.fxcc-kpi span { display: block; font-size: var(--fxcc-fs-foot); color: var(--fxcc-muted); }
.fxcc-kpi strong { display: block; font-family: var(--fxcc-display); font-weight: 400; font-size: var(--fxcc-fs-large); line-height: 1.2; margin-top: var(--fxcc-s2); font-variant-numeric: tabular-nums; }
.fxcc-kpi em { font-style: normal; font-size: var(--fxcc-fs-foot); color: var(--fxcc-muted); }
.fxcc-kpi--alerta { background: var(--fxcc-tint-1); border-color: var(--fxcc-tint-2); }
.fxcc-kpi--alerta strong { color: var(--fxcc-accent-text, var(--fxcc-accent)); }

/* Tarjetas */
.fxcc-panel__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fxcc-panel__col { display: grid; gap: 16px; }
.fxcc-panel__card { background: var(--fxcc-surface); border: 1px solid var(--fxcc-line); border-radius: var(--fxcc-radius); padding: var(--fxcc-s5); }
.fxcc-panel__card h3 { font-family: var(--fxcc-display) !important; font-weight: 600 !important; font-size: var(--fxcc-fs-headline) !important; margin: 0 0 var(--fxcc-s1) !important; }
.fxcc-panel__sub { margin: 0 0 var(--fxcc-s4); font-size: var(--fxcc-fs-foot); color: var(--fxcc-muted); }
.fxcc-panel__vacio { margin: 0; font-size: var(--fxcc-fs-sub); color: var(--fxcc-muted); }

/* Gráfico: una barra por sesión (una sola serie, escala común) */
.fxcc-embudo__fila { display: grid; grid-template-columns: 86px minmax(0, 1fr) 44px; align-items: center; gap: 10px; height: 24px; }
.fxcc-embudo__lbl { font-size: var(--fxcc-fs-caption); color: var(--fxcc-muted); }
.fxcc-embudo__pista { display: flex; align-items: center; height: 100%; }
.fxcc-embudo__barra { height: 12px; min-width: 2px; background: var(--fxcc-bar, #B07A2A); border-radius: 0 4px 4px 0; transition: opacity .15s; }
.fxcc-embudo__val { font-size: var(--fxcc-fs-caption); text-align: right; font-variant-numeric: tabular-nums; }
.fxcc-embudo:hover .fxcc-embudo__barra { opacity: .45; }
.fxcc-embudo .fxcc-embudo__fila:hover .fxcc-embudo__barra { opacity: 1; }

/* Comentarios */
.fxcc-com { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--fxcc-line); }
.fxcc-com:first-of-type { border-top: 0; padding-top: 0; }
.fxcc-com__av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 13px; flex: none; }
.fxcc-com__meta { font-size: var(--fxcc-fs-foot); color: var(--fxcc-muted); }
.fxcc-com p { margin: var(--fxcc-s1) 0 var(--fxcc-s2); font-size: var(--fxcc-fs-sub); line-height: 1.35; }
.fxcc-com a { font-size: var(--fxcc-fs-foot); font-weight: 600; color: var(--fxcc-accent-text, var(--fxcc-accent)); text-decoration: none; }
.fxcc-panel__card .fxcc-btn { margin-top: 8px; }

/* Mi taller */
.fxcc-panel__curso { display: flex; gap: 16px; align-items: center; color: inherit; text-decoration: none; margin-top: 12px; }
.fxcc-panel__portada { width: 132px; aspect-ratio: 16 / 9; max-width: 40%; border-radius: var(--fxcc-radius-sm); background: var(--fxcc-surface-2) center / cover no-repeat; flex: none; }
.fxcc-panel__curso strong { display: block; font-family: var(--fxcc-display); font-weight: 600; font-size: var(--fxcc-fs-headline); }
.fxcc-panel__curso small { font-size: var(--fxcc-fs-foot); color: var(--fxcc-muted); }

@media (max-width: 1100px) {
  .tutor-dashboard-page:has(.fxcc-panel) { padding-inline: 16px; }
  .fxcc-panel__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fxcc-panel__grid { grid-template-columns: 1fr; }
}

/* ---------- 0.7.2 · Panel de Tutor ---------- */

/* El tema (Nectar) pone viñetas a todo "ul li". Dentro de Tutor, cada li
   vuelve a heredar de su lista: menús sin viñeta, listas de contenido con ella. */
.tutor-dashboard-layout li,
.tutor-learning-area-container li {
  list-style: inherit;
}

/* Contenido pegado al menú en todas las páginas del panel
   (Tutor lo centraba a 944px y dejaba un hueco grande a la izquierda) */
@media (min-width: 1024px) {
  .tutor-dashboard-layout .tutor-dashboard-page {
    max-width: 1160px;
    margin: 0;
    padding-inline: 40px;
  }
}

/* ---------- 0.7.3 · Escala Apple HIG en el panel de Tutor ---------- */

/* Menú lateral: Subheadline 15, filas de 44px (área táctil) */
.tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a {
  font-size: var(--fxcc-fs-sub);
  min-height: var(--fxcc-ctl-h);
  border-radius: var(--fxcc-radius-sm);
}
.tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active {
  color: var(--fxcc-text);
  font-weight: 600;
}

/* Controles de formulario: 44px de alto, radio 10 */
.tutor-dashboard-layout input[type="text"],
.tutor-dashboard-layout input[type="search"],
.tutor-dashboard-layout input[type="email"],
.tutor-dashboard-layout input[type="password"],
.tutor-dashboard-layout input[type="number"],
.tutor-dashboard-layout select {
  min-height: var(--fxcc-ctl-h);
  border-radius: var(--fxcc-radius-sm);
  font-size: var(--fxcc-fs-callout);
}

/* Botones de Tutor con las mismas proporciones que los nuestros */
.tutor-dashboard-layout .tutor-btn {
  min-height: var(--fxcc-btn-h-sm);
  border-radius: var(--fxcc-radius-sm);
  font-size: var(--fxcc-fs-sub);
  font-weight: 600;
}
.tutor-dashboard-layout .tutor-btn-lg { min-height: var(--fxcc-btn-h); font-size: var(--fxcc-fs-headline); border-radius: var(--fxcc-radius-btn); }
.tutor-dashboard-layout .tutor-btn-sm,
.tutor-dashboard-layout .tutor-btn-icon { min-height: var(--fxcc-chip-h); }

/* Tarjetas de Tutor: radio 12 */
.tutor-dashboard-layout .tutor-card,
.tutor-dashboard-layout .tutor-dashboard-page-card-header { border-radius: var(--fxcc-radius); }

/* ---------- 0.7.4 · Encabezado del panel: saludo alineado a la izquierda y más grande ---------- */
@media (min-width: 1024px) {
  /* Sin el centrado de Tutor: el saludo arranca en el mismo borde que el contenido */
  .tutor-dashboard-layout .tutor-dashboard-header {
    height: auto;
    padding: var(--fxcc-s5) var(--fxcc-s6);
  }
  .tutor-dashboard-layout .tutor-dashboard-header-inner {
    max-width: none;
    margin: 0;
    padding-inline: var(--fxcc-s4);
  }
}
/* Saludo: Title 1 con la tipografía de títulos */
.tutor-dashboard-header-left { gap: var(--fxcc-s1); }
.tutor-dashboard-header-left > .tutor-h5 {
  font-family: var(--fxcc-display) !important;
  font-size: var(--fxcc-fs-title1) !important;
  line-height: var(--fxcc-lh-tight) !important;
  font-weight: 400 !important;
  color: var(--fxcc-text) !important;
}
/* Datos (cursos, estudiantes, rachas): Subheadline */
.tutor-dashboard-header-left .tutor-tiny,
.tutor-dashboard-header-user-streaks {
  font-size: var(--fxcc-fs-sub) !important;
  line-height: 1.35 !important;
  color: var(--fxcc-text-2);
}
/* Avatar un poco mayor para acompañar el saludo */
.tutor-dashboard-header-user-avatar .tutor-avatar { width: 48px; height: 48px; }

/* ---------- 0.7.6 · Acceso y registro ---------- */
/* Tarjeta centrada, mismo lenguaje que el resto de la plataforma */
body.fxcc .tutor-login-wrap,
body.fxcc #tutor-registration-wrap {
  max-width: 480px !important;
  margin: var(--fxcc-s12) auto !important;
  background: var(--fxcc-surface) !important;
  border: 1px solid var(--fxcc-line) !important;
  border-radius: var(--fxcc-radius) !important;
  box-shadow: 0 1px 2px rgba(17, 17, 16, .04), 0 8px 24px rgba(17, 17, 16, .06) !important;
  padding: var(--fxcc-s8) var(--fxcc-s6) !important;
  font-family: var(--fxcc-body);
  color: var(--fxcc-text);
}
body.fxcc .tutor-login-form-wrapper,
body.fxcc #tutor-registration-form { padding: 0 !important; }

/* Título de la tarjeta: Title 1 con la tipografía de títulos */
body.fxcc .tutor-login-wrap .tutor-fs-5,
body.fxcc .tutor-login-wrap h1,
body.fxcc .tutor-login-wrap h2,
body.fxcc .tutor-login-wrap h3 {
  font-family: var(--fxcc-display) !important;
  font-size: var(--fxcc-fs-title1) !important;
  line-height: var(--fxcc-lh-tight) !important;
  font-weight: 400 !important;
  color: var(--fxcc-text) !important;
  margin-bottom: var(--fxcc-s6) !important;
}

/* Etiquetas: Footnote semibold, sin mayúsculas forzadas del tema */
body.fxcc .tutor-login-wrap label,
body.fxcc #tutor-registration-form label {
  font-family: var(--fxcc-body) !important;
  font-size: var(--fxcc-fs-foot) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fxcc-text-2) !important;
  margin-bottom: var(--fxcc-s2) !important;
}
body.fxcc #tutor-registration-form .tutor-input-field { margin-bottom: var(--fxcc-s5) !important; }

/* Campos: 44px, radio 10, borde visible (≥3:1) */
body.fxcc .tutor-login-wrap .tutor-form-control,
body.fxcc #tutor-registration-form .tutor-form-control {
  min-height: var(--fxcc-ctl-h) !important;
  border-radius: var(--fxcc-radius-sm) !important;
  background: var(--fxcc-surface) !important;
  border: 1px solid var(--fxcc-line-2) !important;
  color: var(--fxcc-text) !important;
  font-family: var(--fxcc-body) !important;
  font-size: var(--fxcc-fs-body) !important;
  padding: 0 var(--fxcc-s4) !important;
  box-shadow: none !important;
}
body.fxcc .tutor-login-wrap .tutor-form-control::placeholder,
body.fxcc #tutor-registration-form .tutor-form-control::placeholder { color: var(--fxcc-subtle); }
body.fxcc .tutor-login-wrap .tutor-form-control:focus,
body.fxcc #tutor-registration-form .tutor-form-control:focus {
  border-color: var(--fxcc-accent-text) !important;
  box-shadow: 0 0 0 3px var(--fxcc-tint-2) !important;
  outline: none;
}

/* Botón principal: ámbar, ancho completo, 50px */
body.fxcc .tutor-login-wrap button[type="submit"],
body.fxcc #tutor-registration-form button[type="submit"] {
  width: 100% !important;
  min-height: var(--fxcc-btn-h) !important;
  border-radius: var(--fxcc-radius-btn) !important;
  background: var(--fxcc-accent) !important;
  border: 0 !important;
  color: var(--fxcc-on-accent) !important;
  font-family: var(--fxcc-body) !important;
  font-size: var(--fxcc-fs-headline) !important;
  font-weight: 600 !important;
  justify-content: center;
  margin-top: var(--fxcc-s6) !important;
}
body.fxcc .tutor-login-wrap button[type="submit"]:hover,
body.fxcc #tutor-registration-form button[type="submit"]:hover { background: var(--fxcc-accent-hover) !important; }

/* Enlaces (¿Olvidaste…?, Regístrate, Acceder): ámbar oscuro legible */
body.fxcc .tutor-login-wrap a,
body.fxcc #tutor-registration-wrap a {
  color: var(--fxcc-accent-text) !important;
  font-size: var(--fxcc-fs-sub) !important;
  font-weight: 600 !important;
  text-decoration: none;
}
body.fxcc .tutor-login-wrap .tutor-small,
body.fxcc #tutor-registration-wrap .tutor-small,
body.fxcc #tutor-registration-wrap .tutor-text-center { font-size: var(--fxcc-fs-sub) !important; color: var(--fxcc-text-2) !important; }

/* Casilla "Mantener la sesión iniciada" */
body.fxcc .tutor-login-wrap .tutor-checkbox { width: 20px; height: 20px; border-radius: 6px; accent-color: var(--fxcc-accent-text); }

/* ---------- 0.8.0 · Orden secuencial y certificados ---------- */
/* Lección bloqueada en el menú lateral */
html[data-tutor-theme] .tutor-learning-nav-item.fxcc-bloqueada { color: var(--fxcc-subtle) !important; }
html[data-tutor-theme] .tutor-learning-nav-item.fxcc-bloqueada svg { color: var(--fxcc-subtle); flex: none; }
.tutor-learning-area-footer a.fxcc-bloqueada { opacity: .55; }

/* Aviso flotante: "X se abre cuando termines Y" */
.fxcc-aviso {
  position: fixed; left: 50%; bottom: var(--fxcc-s6); z-index: 100000;
  display: flex; align-items: center; gap: var(--fxcc-s3);
  max-width: min(560px, calc(100% - 32px));
  padding: var(--fxcc-s3) var(--fxcc-s5);
  border-radius: var(--fxcc-radius);
  background: var(--fxcc-text); color: #F7F5F0;
  font: 500 var(--fxcc-fs-sub)/1.35 var(--fxcc-body);
  box-shadow: 0 8px 24px rgba(17, 17, 16, .2);
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s;
}
.fxcc-aviso.is-on { opacity: 1; transform: translate(-50%, 0); }
.fxcc-aviso svg { color: var(--fxcc-accent); flex: none; }

/* Panel: Mis certificados */
.fxcc-certs { display: grid; gap: var(--fxcc-s3); }
.fxcc-certs__item {
  display: flex; align-items: center; gap: var(--fxcc-s4);
  background: var(--fxcc-surface); border: 1px solid var(--fxcc-line);
  border-radius: var(--fxcc-radius); padding: var(--fxcc-s4) var(--fxcc-s5);
}
.fxcc-certs__icono { color: var(--fxcc-done); display: flex; }
.fxcc-certs__info { flex: 1; min-width: 0; }
.fxcc-certs__info strong { display: block; font: 600 var(--fxcc-fs-headline)/1.3 var(--fxcc-display); }
.fxcc-certs__info small { font-size: var(--fxcc-fs-foot); color: var(--fxcc-subtle); }
@media (max-width: 600px) { .fxcc-certs__item { flex-wrap: wrap; } .fxcc-certs__item .fxcc-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .fxcc-aviso { transition: none; } }

/* ---------- 0.8.3 · Lección (pantalla 02) ---------- */
html[data-tutor-theme],
.fxcc-course {                                     /* también el tráiler de la portada */
  --plyr-color-main: var(--fxcc-accent);          /* play, progreso y volumen en ámbar */
  --plyr-video-control-color-hover: var(--fxcc-on-accent);
}

/* Sin tarjeta alrededor del video: el reproductor es el protagonista */
html[data-tutor-theme] .tutor-lesson-content .tutor-lesson-content-tab {
  background: transparent !important;
  border: 0 !important;
  overflow: visible;
}
html[data-tutor-theme] .tutor-learning-area-container { max-width: 1120px; }
html[data-tutor-theme] .tutor-lesson-video-wrapper .plyr,
html[data-tutor-theme] .tutor-lesson-video-wrapper iframe,
html[data-tutor-theme] .tutor-lesson-video-wrapper video {
  border-radius: var(--fxcc-radius);
  box-shadow: 0 1px 2px rgba(17, 17, 16, .06), 0 12px 32px rgba(17, 17, 16, .10);
}
:is(html[data-tutor-theme], .fxcc-course) .plyr__control--overlaid {
  /* Sin grid, flex ni transform en el ícono: Safari los aplica distinto dentro de <button>.
     Caja fija de 72px y el ícono centrado con relleno + margin auto (igual en todos los navegadores). */
  -webkit-box-sizing: border-box; box-sizing: border-box;
  width: 72px !important; height: 72px !important;
  padding: 23px 0 23px 4px !important; /* (72 − 26) / 2 = 23 · +4px a la izquierda = centro óptico del triángulo */
  display: block !important; line-height: 0 !important; text-align: center;
  background: var(--fxcc-accent) !important;
  color: var(--fxcc-on-accent) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
:is(html[data-tutor-theme], .fxcc-course) .plyr__control--overlaid svg {
  position: static !important; left: auto !important; top: auto !important;
  -webkit-transform: none !important; transform: none !important;
  display: block !important; margin: 0 auto !important;
  width: 26px !important; height: 26px !important;
}

/* Encabezado bajo el video */
.fxcc-lesson-head { padding: var(--fxcc-s6) 0 var(--fxcc-s2); gap: var(--fxcc-s2); }
.fxcc-lesson-head__dur { font-size: var(--fxcc-fs-sub); color: var(--fxcc-subtle); }

/* Barra inferior: Anterior · Marcar como completada · Siguiente */
html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] {
  background: var(--fxcc-bg) !important;
  border-top: 1px solid var(--fxcc-line) !important;
  margin-top: var(--fxcc-s8);
  padding: var(--fxcc-s4) 0 !important;
  gap: var(--fxcc-s3);
}
html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] > a {
  width: auto !important;
  min-height: var(--fxcc-btn-h-sm) !important;
  padding: 0 var(--fxcc-s4) !important;
  border: 1px solid var(--fxcc-line-2) !important;
  border-radius: var(--fxcc-radius-sm) !important;
  background: transparent !important;
  color: var(--fxcc-text) !important;
  font: 600 var(--fxcc-fs-sub) var(--fxcc-body) !important;
  box-shadow: none !important;
}
html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] > a:hover { background: var(--fxcc-surface-2) !important; }
html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] > a[disabled],
html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] > a[aria-disabled="true"],
html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] > a.fxcc-bloqueada { opacity: .5; pointer-events: none; }
html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] form { width: auto !important; }
html[data-tutor-theme] .tutor-learning-area-footer .tutor-mark-as-complete-button {
  min-height: var(--fxcc-btn-h-sm) !important;
  border-radius: var(--fxcc-radius-sm) !important;
  padding: 0 var(--fxcc-s5) !important;
  gap: var(--fxcc-s2);
  font: 600 var(--fxcc-fs-sub) var(--fxcc-body) !important;
}
html[data-tutor-theme] .tutor-learning-area-footer .tutor-mark-as-complete-button.completed {
  background: var(--fxcc-surface-2) !important;
  color: var(--fxcc-done) !important;
}
html[data-tutor-theme] .tutor-learning-area-footer .tutor-mark-as-complete-button.completed svg { width: 20px; height: 20px; }

/* Menú lateral */
html[data-tutor-theme] .tutor-learning-sidebar-curriculum { background: var(--fxcc-bg-deep) !important; }
html[data-tutor-theme] .tutor-learning-nav-header { padding: var(--fxcc-s2) var(--fxcc-s3) !important; border-radius: var(--fxcc-radius-sm); align-items: flex-start; }
html[data-tutor-theme] .tutor-learning-nav-header-title {
  white-space: normal !important;            /* títulos completos, hasta 3 líneas */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  font-size: var(--fxcc-fs-sub) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--fxcc-text) !important;
}
html[data-tutor-theme] .tutor-learning-nav-header-progress { margin-top: 1px; }
html[data-tutor-theme] .tutor-learning-nav-item {
  min-height: var(--fxcc-ctl-h) !important;
  padding: var(--fxcc-s2) var(--fxcc-s3) !important;
  border-radius: var(--fxcc-radius-sm) !important;
  box-shadow: none !important;
  font-size: var(--fxcc-fs-sub) !important;
  line-height: 1.3 !important;
  color: var(--fxcc-text);
}
html[data-tutor-theme] .tutor-learning-nav-item .tutor-text-subdued { font-size: var(--fxcc-fs-foot); color: var(--fxcc-subtle) !important; margin-top: 2px; }
html[data-tutor-theme] .tutor-learning-nav-item.active {
  background: var(--fxcc-tint-2) !important;
  color: var(--fxcc-text) !important;
  font-weight: 600;
}
html[data-tutor-theme] .tutor-learning-nav-item.active::before { display: none; }   /* sin la línea suelta de Tutor */
html[data-tutor-theme] .tutor-learning-nav-item:hover:not(.active) { background: var(--fxcc-surface-2) !important; color: var(--fxcc-text) !important; }
html[data-tutor-theme] .tutor-learning-nav-item:hover svg { color: inherit; }

@media (max-width: 782px) {
  html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] { padding: var(--fxcc-s3) var(--fxcc-s4) !important; }
  html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] > a { padding: 0 var(--fxcc-s3) !important; }
}

/* ---------- 0.9.0 · Descripción de cada sesión en el programa ---------- */
.fxcc-session__desc {
  margin: var(--fxcc-s2) 0 0;
  font-size: var(--fxcc-fs-sub);
  line-height: 1.45;
  color: var(--fxcc-text-2);
}
.fxcc-session__refl { margin-top: var(--fxcc-s3); }
.fxcc-session__refl summary {
  display: inline-flex; align-items: center; gap: var(--fxcc-s2);
  min-height: var(--fxcc-chip-h);
  cursor: pointer; list-style: none;
  font-size: var(--fxcc-fs-foot); font-weight: 600;
  letter-spacing: .04em;
  color: var(--fxcc-accent-text);
}
.fxcc-session__refl summary::-webkit-details-marker { display: none; }
.fxcc-session__refl summary::after { content: "+"; font-size: 16px; line-height: 1; }
.fxcc-session__refl[open] summary::after { content: "–"; }
.fxcc-session__refl ul {
  margin: var(--fxcc-s1) 0 0; padding-left: 18px;
  font-size: var(--fxcc-fs-sub); line-height: 1.45; color: var(--fxcc-text-2);
}
.fxcc-session__refl li { list-style: disc; margin-bottom: var(--fxcc-s1); }

/* ===== 0.9.1 · Portadas de sesión en formato 2:1 (la imagen completa, sin recortar los títulos) ===== */
.fxcc-card--lesson .fxcc-card__thumb { aspect-ratio: 2 / 1; }

/* ===== 0.9.2 · Programa por sesiones · 0.9.19: 3 columnas (el cuaderno ya no va en el temario) ===== */
.fxcc-session__videos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fxcc-s5, 20px); }
/* Número como etiqueta pequeña: el grande tapaba el título de la portada */
.fxcc-card--lesson .fxcc-card__thumb { align-items: flex-end; padding: 10px; }
.fxcc-card--lesson .fxcc-card__num {
  font-family: inherit; font-size: var(--fxcc-fs-foot); font-weight: 600; line-height: 1;
  color: #F7F5F0; background: rgba(17, 17, 16, .85); text-shadow: none;
  padding: 5px 8px; border-radius: 6px;
}
.fxcc-card--lesson .fxcc-card__time { top: 10px; right: 10px; }
/* "Comentarios" abajo a la derecha: arriba tapaba la píldora "Sesión N" */
.fxcc-card--lesson .fxcc-card__badge { top: auto; left: auto; bottom: 10px; right: 10px; border-radius: 6px; }
/* Tablet: 2 columnas; móvil: 1 (regla de 782px) */
@media (max-width: 960px) and (min-width: 783px) { .fxcc-session__videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 782px) { .fxcc-session__videos { grid-template-columns: 1fr; } }

/* ===== 0.9.3 · "Acerca de" a todo el ancho en 3 columnas (líneas de lectura cómodas) ===== */
.fxcc-about__body { max-width: none; columns: 3; column-gap: var(--fxcc-s12, 48px); }
.fxcc-about__body > * { break-inside: avoid; margin-top: 0; }
@media (max-width: 1100px) { .fxcc-about__body { columns: 2; } }
@media (max-width: 782px)  { .fxcc-about__body { columns: 1; } }

/* ===== 0.9.5 · Botón "Volver al programa" a la derecha del encabezado de las lecciones ===== */
/* El texto usa la clase del título de Tutor: misma tipografía que el lado izquierdo */
.fxcc-volver {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px 0 12px;
  margin-left: auto !important; margin-right: var(--fxcc-s3, 12px);
  white-space: nowrap; color: var(--fxcc-text, #111110) !important;
  background: transparent; border: 1px solid var(--fxcc-line, #D8D3C8); border-radius: 10px;
  text-decoration: none !important; transition: background .15s, border-color .15s;
}
.fxcc-volver .tutor-learning-header-title { margin: 0 !important; }
/* Si Tutor muestra "Completar curso" (también va a la derecha), el nuestro se pone a su lado */
.tutor-ml-auto + .fxcc-volver { margin-left: var(--fxcc-s3, 12px) !important; }
.fxcc-volver:hover { background: rgba(17, 17, 16, .05); border-color: var(--fxcc-line-2, #8F887B); }
.fxcc-volver:focus-visible { outline: 2px solid var(--fxcc-accent-text, #6E4508); outline-offset: 2px; }
/* Móvil: solo la flecha */
@media (max-width: 782px) {
  .fxcc-volver { padding: 0 10px; margin-right: var(--fxcc-s2, 8px); }
  .fxcc-volver .tutor-learning-header-title { display: none; }
}

/* =====================================================================
   0.9.7 · Panel de la instructora v2 (sistema de diseño, ancho completo)
   ===================================================================== */
.tutor-dashboard-page:has(.fxcc-panel) { max-width: none; margin: 0; padding-inline: var(--fxcc-s10); }
/* El encabezado de Tutor decía "0 cursos activos · 0 estudiantes" (no cuenta a la administradora): se oculta */
body:has(.fxcc-panel) .tutor-dashboard-header-left > .tutor-tiny { display: none !important; }

.fxcc-panel { gap: var(--fxcc-s4); font-family: var(--fxcc-body) !important; padding-bottom: var(--fxcc-s16); }
.fxcc-panel *, .fxcc-panel em, .fxcc-panel q, .fxcc-panel small { font-family: inherit; }
.fxcc-panel__head { align-items: flex-end; margin-bottom: var(--fxcc-s2); }
.fxcc-panel__title { margin: var(--fxcc-s2) 0 0 !important; }
.fxcc-panel__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--fxcc-s2); flex-wrap: wrap; }
.fxcc-panel__acciones .fxcc-btn { min-height: var(--fxcc-btn-h-sm); }

/* Selector de período */
.fxcc-periodo { display: inline-flex; height: var(--fxcc-chip-h); border: 1px solid var(--fxcc-line-2); border-radius: 999px; overflow: hidden; margin-right: var(--fxcc-s2); }
.fxcc-periodo a { display: flex; align-items: center; padding: 0 var(--fxcc-s4); font-size: var(--fxcc-fs-foot); font-weight: 500; color: var(--fxcc-text-2) !important; text-decoration: none !important; }
.fxcc-periodo a:hover { background: var(--fxcc-surface-2); }
.fxcc-periodo a.on { background: var(--fxcc-text); color: #fff !important; }

/* Indicadores */
.fxcc-panel__kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fxcc-s4); }
.fxcc-kpi { padding: var(--fxcc-s5); }
.fxcc-kpi span { font-size: var(--fxcc-fs-foot); font-weight: 500; color: var(--fxcc-muted); }
.fxcc-kpi strong { font-family: var(--fxcc-body) !important; font-weight: 600; font-size: var(--fxcc-fs-large); line-height: 1.1; letter-spacing: -.01em; margin: var(--fxcc-s2) 0 var(--fxcc-s1); color: var(--fxcc-text); }
.fxcc-kpi strong small { font-size: var(--fxcc-fs-headline); font-weight: 500; color: var(--fxcc-subtle); }
.fxcc-kpi em { display: block; font-style: normal; font-size: var(--fxcc-fs-foot); color: var(--fxcc-subtle); }
.fxcc-kpi em b { color: var(--fxcc-done); }
.fxcc-kpi--alerta { background: linear-gradient(0deg, var(--fxcc-surface) 40%, var(--fxcc-tint-1)); border-color: var(--fxcc-accent); }
.fxcc-kpi--alerta strong { color: var(--fxcc-text); }
.fxcc-kpi--alerta em { color: var(--fxcc-accent-text); font-weight: 600; }

/* Tarjetas y filas */
.fxcc-panel__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--fxcc-s4); align-items: stretch; }
.fxcc-panel__tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fxcc-s4); }
.fxcc-panel__card { padding: var(--fxcc-s5); min-width: 0; }
.fxcc-panel__card h3 { font-family: var(--fxcc-body) !important; font-weight: 600 !important; font-size: var(--fxcc-fs-headline) !important; line-height: 1.3 !important; margin: 0 !important; color: var(--fxcc-text) !important; }
.fxcc-panel__sub { margin: var(--fxcc-s1) 0 var(--fxcc-s4); font-size: var(--fxcc-fs-foot); color: var(--fxcc-muted); }
.fxcc-panel__vacio { font-size: var(--fxcc-fs-sub); color: var(--fxcc-muted); }
.fxcc-panel__mas { display: inline-block; margin-top: var(--fxcc-s3); font-size: var(--fxcc-fs-foot); font-weight: 600; color: var(--fxcc-accent-text) !important; text-decoration: none !important; }

/* Actividad diaria (una serie: sin leyenda, el título la nombra) */
.fxcc-act { height: 160px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--fxcc-line-2); }
.fxcc-act__b { flex: 1; background: var(--fxcc-accent); border-radius: 4px 4px 0 0; min-height: 2px; cursor: default; transition: opacity .15s; }
.fxcc-act:hover .fxcc-act__b { opacity: .55; }
.fxcc-act .fxcc-act__b:hover { opacity: 1; }
.fxcc-act__ax { display: flex; justify-content: space-between; font-size: var(--fxcc-fs-caption); color: var(--fxcc-subtle); margin-top: var(--fxcc-s2); }
.fxcc-act__sum { display: flex; gap: var(--fxcc-s6); flex-wrap: wrap; margin-top: var(--fxcc-s4); padding-top: var(--fxcc-s4); border-top: 1px solid var(--fxcc-line); }
.fxcc-act__sum div { font-size: var(--fxcc-fs-foot); color: var(--fxcc-muted); }
.fxcc-act__sum b { display: block; font-size: var(--fxcc-fs-title3); font-weight: 600; color: var(--fxcc-text); font-variant-numeric: tabular-nums; }

/* Hasta dónde llegan (columnas por sesión) */
.fxcc-fun { height: 180px; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--fxcc-line-2); padding-top: 24px; margin-bottom: 28px; }
.fxcc-fun__c { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.fxcc-fun__b { width: 100%; background: var(--fxcc-olive, #5A6046); border-radius: 4px 4px 0 0; position: relative; transition: opacity .15s; }
.fxcc-fun__b.hi { background: var(--fxcc-accent-text); }
.fxcc-fun__b span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 4px; font-size: var(--fxcc-fs-caption); font-weight: 600; color: var(--fxcc-text-2); white-space: nowrap; }
.fxcc-fun:hover .fxcc-fun__b { opacity: .55; }
.fxcc-fun .fxcc-fun__c:hover .fxcc-fun__b { opacity: 1; }
.fxcc-fun__c em { position: absolute; top: 100%; margin-top: 6px; font-style: normal; font-size: var(--fxcc-fs-caption); color: var(--fxcc-subtle); }
.fxcc-nota { margin: 0; padding: var(--fxcc-s3) var(--fxcc-s4); border-radius: var(--fxcc-radius-sm); background: var(--fxcc-tint-1); font-size: var(--fxcc-fs-foot); line-height: 1.45; color: var(--fxcc-text-2); }
.fxcc-nota b { color: var(--fxcc-accent-text); }

/* Listas con avatar (por responder, empujón) */
.fxcc-lista { list-style: none; margin: 0; padding: 0; }
.fxcc-lista li { display: flex; align-items: center; gap: var(--fxcc-s3); padding: var(--fxcc-s3) 0; border-top: 1px solid var(--fxcc-line); list-style: none; margin: 0; }
.fxcc-lista li:first-child { border-top: 0; padding-top: 0; }
.fxcc-lista__tx { flex: 1; min-width: 0; font-size: var(--fxcc-fs-sub); line-height: 1.35; }
.fxcc-lista__tx b { font-weight: 600; color: var(--fxcc-text); }
.fxcc-lista__tx small { display: block; font-size: var(--fxcc-fs-foot); color: var(--fxcc-subtle); }
.fxcc-lista__tx q { display: block; margin-top: 2px; color: var(--fxcc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; quotes: "“" "”"; }
.fxcc-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; font-weight: 600; font-size: var(--fxcc-fs-foot); flex: none; }
.fxcc-av img { width: 100%; height: 100%; object-fit: cover; }
.fxcc-mini { display: inline-flex; align-items: center; height: var(--fxcc-chip-h); padding: 0 var(--fxcc-s3); border: 1px solid var(--fxcc-line-2); border-radius: var(--fxcc-radius-sm); font-size: var(--fxcc-fs-foot); font-weight: 600; color: var(--fxcc-text) !important; text-decoration: none !important; white-space: nowrap; flex: none; }
.fxcc-mini:hover { border-color: var(--fxcc-text); }
.fxcc-pb { width: 72px; height: 6px; background: var(--fxcc-surface-2); border-radius: 3px; overflow: hidden; flex: none; }
.fxcc-pb i { display: block; height: 100%; background: var(--fxcc-accent); }
.fxcc-pb--osc i { background: var(--fxcc-accent-text); }

/* Videos donde se detienen */
.fxcc-vb { display: flex; align-items: center; gap: var(--fxcc-s3); padding: var(--fxcc-s2) 0; font-size: var(--fxcc-fs-sub); color: var(--fxcc-text) !important; text-decoration: none !important; }
.fxcc-vb:hover .fxcc-vb__n { text-decoration: underline; }
.fxcc-vb__n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxcc-vb .fxcc-pb { width: 88px; }
.fxcc-vb b { width: 40px; text-align: right; font-size: var(--fxcc-fs-foot); font-variant-numeric: tabular-nums; }

/* Comunidad */
.fxcc-stat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fxcc-s3); }
.fxcc-stat div { background: var(--fxcc-bg); border-radius: var(--fxcc-radius-sm); padding: var(--fxcc-s3); }
.fxcc-stat b { display: block; font-size: var(--fxcc-fs-title2); font-weight: 600; color: var(--fxcc-text); font-variant-numeric: tabular-nums; }
.fxcc-stat span { font-size: var(--fxcc-fs-foot); color: var(--fxcc-muted); }
.fxcc-stat .alerta { background: var(--fxcc-tint-1); }
.fxcc-stat .alerta b { color: var(--fxcc-accent-text); }

/* Inscripciones recientes */
.fxcc-fila { display: flex; justify-content: space-between; align-items: center; gap: var(--fxcc-s3); padding: var(--fxcc-s3) 0; border-top: 1px solid var(--fxcc-line); font-size: var(--fxcc-fs-sub); }
.fxcc-fila:first-of-type { border-top: 0; padding-top: 0; }
.fxcc-fila b { font-weight: 600; color: var(--fxcc-text); }
.fxcc-fila span { font-size: var(--fxcc-fs-foot); color: var(--fxcc-subtle); white-space: nowrap; }

/* Etiqueta flotante de los gráficos */
.fxcc-tip { position: absolute; z-index: 9999; background: var(--fxcc-text); color: #fff; font: 500 var(--fxcc-fs-foot)/1.3 var(--fxcc-body); padding: 6px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap; }

@media (max-width: 1280px) {
  .fxcc-panel__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .tutor-dashboard-page:has(.fxcc-panel) { padding-inline: var(--fxcc-s4); }
  .fxcc-panel__grid, .fxcc-panel__tres { grid-template-columns: 1fr; }
  .fxcc-panel__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fxcc-panel__acciones { margin-left: 0; }
}
@media (max-width: 600px) {
  .fxcc-panel__kpis { grid-template-columns: 1fr 1fr; gap: var(--fxcc-s3); }
  .fxcc-kpi { padding: var(--fxcc-s4); }
  .fxcc-kpi strong { font-size: var(--fxcc-fs-title1); }
  .fxcc-fun { gap: 3px; }
  .fxcc-fun__b span { display: none; }
  .fxcc-act__sum { gap: var(--fxcc-s4); }
}
.fxcc-lista__tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxcc-lista .fxcc-pb { width: 56px; }
@media (max-width: 600px) { .fxcc-lista .fxcc-pb { display: none; } }

/* 0.9.8 · Aviso al llegar desde una lección sin acceso */
.fxcc-aviso-acceso {
  max-width: 420px; margin: 0 0 var(--fxcc-s4); padding: 12px 16px;
  border-radius: var(--fxcc-radius); border: 1px solid var(--fxcc-accent);
  background: var(--fxcc-tint-1); color: var(--fxcc-text);
  font: 400 var(--fxcc-fs-sub)/1.4 var(--fxcc-body);
}

/* 0.9.8 · Caja de inscripción y ventana "Entrar" sobre el tema (Nectar)
   Nectar pinta los botones con su color de acento y radio 4px usando selectores con #id.
   :is(#fxcc-x, html) suma la especificidad de un #id (sin que ese id exista) para ganarle. */
:is(#fxcc-x, html) .fxcc-enroll .tutor-btn-primary,
:is(#fxcc-x, html) .tutor-modal .tutor-btn-primary,
:is(#fxcc-x, html) .tutor-login-wrap .tutor-btn-primary {
  background: var(--fxcc-accent) !important;
  border: 1px solid var(--fxcc-accent) !important;
  color: var(--fxcc-on-accent) !important;
  border-radius: var(--fxcc-radius-btn) !important;
  min-height: var(--fxcc-btn-h);
  font: 600 var(--fxcc-fs-headline)/1 var(--fxcc-body) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  width: 100%; justify-content: center;
}
:is(#fxcc-x, html) .fxcc-enroll .tutor-btn-primary:hover,
:is(#fxcc-x, html) .tutor-modal .tutor-btn-primary:hover,
:is(#fxcc-x, html) .tutor-login-wrap .tutor-btn-primary:hover { background: var(--fxcc-accent-hover) !important; border-color: var(--fxcc-accent-hover) !important; }
:is(#fxcc-x, html) .tutor-modal label,
:is(#fxcc-x, html) .tutor-modal .tutor-form-check-label,
:is(#fxcc-x, html) .tutor-login-wrap label {
  text-transform: none !important; letter-spacing: 0 !important;
  font: 400 var(--fxcc-fs-sub)/1.4 var(--fxcc-body) !important;
}
:is(#fxcc-x, html) .tutor-modal input[type="text"],
:is(#fxcc-x, html) .tutor-modal input[type="password"],
:is(#fxcc-x, html) .tutor-login-wrap input[type="text"],
:is(#fxcc-x, html) .tutor-login-wrap input[type="password"] {
  min-height: var(--fxcc-ctl-h); border-radius: 10px !important; font: 400 var(--fxcc-fs-callout) var(--fxcc-body) !important;
}
:is(#fxcc-x, html) .tutor-modal h4,
:is(#fxcc-x, html) .tutor-modal .tutor-fs-5 { font-family: var(--fxcc-display) !important; }

/* El aviso de acceso no queda escondido bajo el encabezado fijo */
.fxcc-aviso-acceso, #fxcc-inscripcion { scroll-margin-top: 120px; }

/* Ventana "Entrar": "¿Olvidaste la contraseña?" con el color de enlace del sistema */
:is(#fxcc-x, html) .tutor-modal .tutor-btn-ghost,
:is(#fxcc-x, html) .tutor-login-wrap .tutor-btn-ghost { color: var(--fxcc-accent-text) !important; font: 600 var(--fxcc-fs-sub)/1.3 var(--fxcc-body) !important; text-transform: none !important; letter-spacing: 0 !important; }

/* 0.9.12 · Caja de inscripción para quien aún no está inscrita: solo precio + botón.
   (Nivel, total de inscritos y última actualización no le aportan nada a alguien nuevo.) */
.fxcc-enroll .tutor-card-footer { display: none !important; }
.fxcc-enroll .tutor-card { padding-bottom: 0; }

/* Plyr fuera de la lección (tráiler): círculo dorado y controles en ámbar */
.fxcc-course .plyr__control--overlaid { border-radius: 50% !important; }
.fxcc-course .plyr--video .plyr__control:hover,
.fxcc-course .plyr--video .plyr__control[aria-expanded="true"] { background: var(--fxcc-accent) !important; color: var(--fxcc-on-accent) !important; }

/* ---------- 0.9.13 · Login y Registro: tarjeta centrada, pie abajo ---------- */
/* La página ocupa al menos la pantalla: la tarjeta queda centrada y el pie siempre abajo */
body.fxcc-pantalla-acceso .page-header-no-bg,
body.fxcc-pantalla-acceso .row.page-header-no-bg { display: none !important; }
body.fxcc-pantalla-acceso .container-wrap,
body.fxcc-pantalla-acceso .main-content { padding-top: 0 !important; padding-bottom: 0 !important; }
.fxcc-acceso {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--header-nav-height, 75px) - 80px); /* 80px ≈ pie mínimo */
  padding: var(--fxcc-s10) var(--fxcc-s5);
  background: radial-gradient(ellipse at 50% 0%, rgba(227, 168, 87, .10) 0%, transparent 60%);
}
:is(#fxcc-x, body) .fxcc-acceso__card {
  width: 100%; max-width: 440px !important; margin: 0 auto !important;
  background: var(--fxcc-surface) !important;
  border: 1px solid var(--fxcc-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(17, 17, 16, .05), 0 16px 40px rgba(17, 17, 16, .08) !important;
  padding: var(--fxcc-s8) !important;
  font-family: var(--fxcc-body); color: var(--fxcc-text);
}
.fxcc-acceso__ey { font: 600 var(--fxcc-fs-caption)/1.3 var(--fxcc-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fxcc-accent-text); }
:is(#fxcc-x, body) .fxcc-acceso__title {
  font: 400 var(--fxcc-fs-title1)/1.2 var(--fxcc-display) !important;
  color: var(--fxcc-text) !important; margin: var(--fxcc-s2) 0 !important; letter-spacing: -.01em; text-transform: none !important;
}
.fxcc-acceso__lead { margin: 0 0 var(--fxcc-s6) !important; font: 400 var(--fxcc-fs-sub)/1.5 var(--fxcc-body); color: var(--fxcc-text-2); }
.fxcc-acceso__lead em { font-style: italic; color: var(--fxcc-text); }

.fxcc-form .fxcc-campo { margin-bottom: var(--fxcc-s4); }
:is(#fxcc-x, body) .fxcc-form label:not(.fxcc-check) {
  display: block; margin: 0 0 6px !important;
  font: 600 var(--fxcc-fs-foot)/1.3 var(--fxcc-body) !important; color: var(--fxcc-text) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
:is(#fxcc-x, body) .fxcc-form .tutor-form-control {
  width: 100%; height: var(--fxcc-ctl-h) !important; min-height: var(--fxcc-ctl-h) !important;
  border-radius: 10px !important; padding: 0 14px !important; font-size: var(--fxcc-fs-callout) !important;
}
.fxcc-form__2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fxcc-s3); }
.fxcc-form__2col .fxcc-campo { margin-bottom: var(--fxcc-s3); }
.fxcc-campo__pass { position: relative; }
:is(#fxcc-x, body) .fxcc-campo__pass .tutor-form-control { padding-right: 48px !important; }
:is(#fxcc-x, body) .fxcc-ojo {
  position: absolute; right: 4px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important;
  background: transparent !important; color: var(--fxcc-text-2) !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.fxcc-ojo:hover { background: var(--fxcc-tint-1) !important; }

/* Nota del certificado */
:is(#fxcc-x, body) .fxcc-nota-cert {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 var(--fxcc-s4) !important;
  padding: 10px 12px; border-radius: 10px; background: var(--fxcc-tint-1); border: 1px solid var(--fxcc-tint-2);
  font: 400 var(--fxcc-fs-foot)/1.4 var(--fxcc-body); color: var(--fxcc-text);
}
.fxcc-nota-cert svg { flex: none; margin-top: 1px; color: var(--fxcc-accent-text); }

/* Fila "Mantener la sesión" · "¿La olvidaste?" */
.fxcc-form__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 0; }
:is(#fxcc-x, body) .fxcc-check {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; cursor: pointer;
  font: 400 var(--fxcc-fs-sub)/1.3 var(--fxcc-body) !important; color: var(--fxcc-text) !important; text-transform: none !important; letter-spacing: 0 !important;
}
.fxcc-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--fxcc-accent); flex: none; }
.fxcc-check--toc { margin: var(--fxcc-s2) 0 0 !important; }
.fxcc-check--toc a { text-decoration: underline !important; }
:is(#fxcc-x, body) .fxcc-form__link { font: 600 var(--fxcc-fs-sub)/1.3 var(--fxcc-body); color: var(--fxcc-accent-text) !important; text-decoration: none !important; white-space: nowrap; }
.fxcc-form__link:hover { text-decoration: underline !important; }
:is(#fxcc-x, body) .fxcc-form .fxcc-form__enviar { margin-top: var(--fxcc-s6) !important; }
:is(#fxcc-x, body) .fxcc-form__alt { margin: var(--fxcc-s4) 0 0 !important; text-align: center; font: 400 var(--fxcc-fs-sub)/1.4 var(--fxcc-body); color: var(--fxcc-text-2); }
:is(#fxcc-x, body) .fxcc-form__alt a { font-weight: 600; color: var(--fxcc-accent-text) !important; text-decoration: none !important; }

@media (max-width: 480px) {
  .fxcc-acceso { padding: var(--fxcc-s6) var(--fxcc-s4); align-items: flex-start; }
  :is(#fxcc-x, body) .fxcc-acceso__card { padding: var(--fxcc-s6) var(--fxcc-s5) !important; }
  .fxcc-form__2col { grid-template-columns: 1fr; gap: 0; }
}
body.fxcc-pantalla-acceso .container-wrap { background: var(--fxcc-bg) !important; }
.fxcc-acceso__lead em { font-family: inherit !important; }

/* ---------- 0.9.14 · Continuar con Google ---------- */
.fxcc-google { margin: 0 0 var(--fxcc-s5); }
:is(#fxcc-x, body) .fxcc-google__btn,
:is(#fxcc-x, body) #tutor-registration-wrap .fxcc-google__btn,
:is(#fxcc-x, body) .tutor-login-wrap .fxcc-google__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: var(--fxcc-btn-h); padding: 0 16px;
  border: 1px solid var(--fxcc-line-2) !important; border-radius: var(--fxcc-radius-btn) !important;
  background: #fff !important; color: #1F1F1F !important;   /* Google pide fondo blanco y texto oscuro */
  font: 600 var(--fxcc-fs-callout)/1 var(--fxcc-body) !important; text-decoration: none !important;
  transition: background .15s, border-color .15s;
}
.fxcc-google__btn:hover { background: #F7F5F0 !important; border-color: var(--fxcc-text-2) !important; }
.fxcc-google__btn:focus-visible { outline: 2px solid var(--fxcc-accent); outline-offset: 2px; }
.fxcc-google__btn svg { flex: none; }
.fxcc-google__o { display: flex; align-items: center; gap: 12px; margin: var(--fxcc-s5) 0 0; font: 400 var(--fxcc-fs-foot)/1 var(--fxcc-body); color: var(--fxcc-subtle); }
.fxcc-google__o::before, .fxcc-google__o::after { content: ""; flex: 1; height: 1px; background: var(--fxcc-line); }

/* ---------- 0.9.15 · Menús del panel ---------- */
/* Lateral: "Comunidad" abre otra sección → flecha ↗; sin "Explorar cursos" (hay un solo taller) */
.tutor-dashboard-page a[href*="/dashboard/comunidad"]::after,
[class*="tutor-dashboard"] a[href*="/dashboard/comunidad"]::after { content: "↗"; margin-left: 6px; font-size: .85em; color: var(--fxcc-subtle); }
.tutor-see-all-courses { display: none !important; }

/* Menú de la cuenta: tipografía del sistema y una sola jerarquía (todo son ítems) */
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover { font-family: var(--fxcc-body) !important; border-radius: 12px !important; }
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover-profile { background: transparent !important; padding: 16px 16px 8px !important; border-bottom: 1px solid var(--fxcc-line); }
:is(#fxcc-x, html) .tutor-user-profile-info { flex-direction: row !important; align-items: center !important; gap: 12px !important; text-align: left !important; }
:is(#fxcc-x, html) .tutor-user-profile-meta { align-items: flex-start !important; min-width: 0; }
:is(#fxcc-x, html) .tutor-user-profile-meta > div:first-child { font: 600 var(--fxcc-fs-callout)/1.3 var(--fxcc-body) !important; color: var(--fxcc-text) !important; }
:is(#fxcc-x, html) .tutor-user-profile-meta > div:last-child { font: 400 var(--fxcc-fs-foot)/1.3 var(--fxcc-body) !important; color: var(--fxcc-text-2) !important; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
/* "Ver como alumna": ítem normal, no botón de acción principal */
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover .tutor-profile-switch-button {
  justify-content: flex-start !important; gap: 12px !important; width: 100% !important;
  min-height: 40px !important; margin: 8px 0 0 !important; padding: 0 12px !important;
  background: transparent !important; border: 0 !important; border-radius: 10px !important;
  color: var(--fxcc-text) !important; font: 500 var(--fxcc-fs-sub)/1 var(--fxcc-body) !important;
}
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover .tutor-profile-switch-button:hover { background: var(--fxcc-tint-1) !important; }
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover .tutor-profile-switch-button svg { color: var(--fxcc-accent-text) !important; }
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover-menu a { font: 500 var(--fxcc-fs-sub)/1.3 var(--fxcc-body) !important; color: var(--fxcc-text) !important; border-radius: 10px; }
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover .tutor-profile-switch-button { display: flex !important; text-align: left !important; white-space: nowrap !important; }
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover .tutor-profile-switch-button > * { flex: none; }
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover-profile > .tutor-w-full { padding: 0 !important; }
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover .tutor-profile-switch-button { margin: 8px -16px 0 !important; width: calc(100% + 32px) !important; }
:is(#fxcc-x, html) .tutor-dashboard-header-user-popover .tutor-profile-switch-button svg { width: 20px !important; height: 20px !important; }

/* =====================================================================
   0.9.16 · Taller en el móvil (iPhone 13 ≈ 390 px)
   - Una sola flecha "atrás" (al programa del taller)
   - Video de borde a borde, textos con margen lateral
   - Título HIG Title 2, duración en la tipografía del sistema
   - Barra inferior fija: ‹  Marcar como completo ✓  ›  (nada se sale)
   - Temario: barra de progreso con el acento, filas compactas
   ===================================================================== */

/* Barra de progreso del temario con el color de la marca (todas las pantallas) */
html[data-tutor-theme] .tutor-learning-progress .tutor-progress-bar { height: 6px !important; background: var(--fxcc-line) !important; border-radius: 999px; }
html[data-tutor-theme] .tutor-learning-progress .tutor-progress-bar-fill { background: var(--fxcc-accent) !important; border-radius: 999px; }
html[data-tutor-theme] .tutor-learning-progress .tutor-progress-bar-fill::before,
html[data-tutor-theme] .tutor-learning-progress .tutor-progress-bar-fill::after { display: none !important; }
/* La duración bajo el título nunca en serif */
.fxcc-lesson-head__dur { font-family: var(--fxcc-body) !important; }
/* Botón "Completar el curso": tipografía del sistema */
html[data-tutor-theme] .tutor-learning-sidebar .tutor-btn { font-family: var(--fxcc-body) !important; }

@media (max-width: 782px) {
  /* --- Encabezado: 56 px, una sola flecha --- */
  html[data-tutor-theme] .tutor-learning-header { padding: 0 !important; }
  html[data-tutor-theme] .tutor-learning-header-inner { min-height: 56px; padding: 0 4px !important; gap: 0 !important; align-items: center; }
  html[data-tutor-theme] .tutor-learning-header-content { min-width: 0; flex: 1 1 auto; gap: 0 !important; align-items: center; }
  /* La flecha de Tutor (va al panel) se oculta: la nuestra lleva al programa */
  html[data-tutor-theme] .tutor-learning-header-content:has(.fxcc-volver) > .tutor-learning-header-back { display: none !important; }
  .fxcc-volver {
    order: -1; flex: none;
    width: 44px; height: 44px; padding: 0 !important; margin: 0 !important;
    justify-content: center; border: 0 !important; border-radius: 10px;
  }
  html[data-tutor-theme] .tutor-learning-header-content .tutor-learning-header-title {
    flex: 1 1 auto; min-width: 0; margin: 0 4px !important;
    font-size: var(--fxcc-fs-sub) !important; font-weight: 600 !important; line-height: 1.3 !important;
  }
  html[data-tutor-theme] .tutor-learning-header-content .tutor-learning-header-title > span.tutor-md-inline {
    display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-tutor-theme] .tutor-learning-header-toggle-mobile .tutor-btn,
  html[data-tutor-theme] .tutor-learning-header-back .tutor-btn { width: 44px !important; height: 44px !important; }

  /* Sin recuadros dorados al tocar (solo con teclado) */
  html[data-tutor-theme] .tutor-learning-area .tutor-btn:focus:not(:focus-visible),
  .fxcc-volver:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
  html[data-tutor-theme] .tutor-learning-header-toggle-mobile .tutor-btn { border: 0 !important; box-shadow: none !important; }

  /* --- Contenido: video de borde a borde, textos con 20 px de margen --- */
  html[data-tutor-theme] .tutor-learning-area-container { padding: 0 !important; width: 100% !important; max-width: none !important; }
  html[data-tutor-theme] .tutor-learning-area-content { padding: 0 !important; }
  html[data-tutor-theme] .tutor-lesson-video-wrapper { padding: 0 !important; margin: 0 !important; border: 0 !important; }
  html[data-tutor-theme] .tutor-lesson-video-wrapper video,
  html[data-tutor-theme] .tutor-lesson-video-wrapper .plyr { border-radius: 0 !important; box-shadow: none !important; }
  html[data-tutor-theme] .tutor-video-player { box-shadow: none !important; }
  .fxcc-lesson-head { padding: var(--fxcc-s5) var(--fxcc-s5) var(--fxcc-s2) !important; gap: 6px !important; }
  .fxcc-lesson-head__title {
    font-size: var(--fxcc-fs-title2) !important; line-height: 28px !important;
    overflow-wrap: anywhere;
  }
  .fxcc-lesson-head__dur { font-size: var(--fxcc-fs-foot) !important; }
  .fxcc-lesson-head .fxcc-btn--sm { width: 100%; }
  html[data-tutor-theme] .tutor-tabs-nav { padding: var(--fxcc-s3) var(--fxcc-s5) !important; overflow-x: auto; }
  html[data-tutor-theme] .tutor-tab-panel { padding: var(--fxcc-s5) !important; }
  html[data-tutor-theme] .tutor-lesson-wrapper { font-size: var(--fxcc-fs-body); line-height: var(--fxcc-lh-body); }

  /* Botón de play: 56 px (se queda centrado también en Safari) */
  :is(html[data-tutor-theme], .fxcc-course) .plyr__control--overlaid {
    width: 56px !important; height: 56px !important;
    padding: 17px 0 17px 3px !important;
  }
  :is(html[data-tutor-theme], .fxcc-course) .plyr__control--overlaid svg { width: 22px !important; height: 22px !important; }

  /* --- Barra inferior fija: ‹  Marcar como completo  › --- */
  html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 20; /* bajo el temario (22) */
    display: flex !important; align-items: center; justify-content: space-between;
    gap: var(--fxcc-s2) !important; margin: 0 !important;
    padding: var(--fxcc-s2) var(--fxcc-s4) max(var(--fxcc-s2), env(safe-area-inset-bottom)) !important;
    box-sizing: border-box; width: 100% !important;
  }
  /* Anterior / Siguiente: solo la flecha, 44 × 44 (el texto queda para lectores de pantalla) */
  html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] > a {
    flex: none; width: 44px !important; min-width: 44px; height: 44px; min-height: 44px !important;
    padding: 0 !important; justify-content: center; gap: 0 !important;
    font-size: 0 !important; line-height: 0 !important; overflow: hidden;
  }
  html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] > a svg { width: 20px !important; height: 20px !important; flex: none; margin: 0 !important; }
  html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] > a[style*="hidden"] { visibility: hidden; }
  /* Marcar como completo: ocupa el centro, una sola línea */
  html[data-tutor-theme] .tutor-learning-area-footer[data-lesson] form { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
  html[data-tutor-theme] .tutor-learning-area-footer .tutor-mark-as-complete-button {
    width: 100% !important; height: 44px; min-height: 44px !important;
    padding: 0 var(--fxcc-s4) !important; justify-content: center;
    white-space: nowrap; font-size: var(--fxcc-fs-sub) !important;
  }
  html[data-tutor-theme] .tutor-learning-area-footer .tutor-mark-as-complete-button > span {
    width: auto !important; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-tutor-theme] .tutor-learning-area-footer .tutor-mark-as-complete-button svg { flex: none; width: 18px; height: 18px; }
  /* Espacio para que la barra fija no tape el final del contenido */
  html[data-tutor-theme] .tutor-lesson-content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* --- Temario (panel lateral a pantalla completa) --- */
  html[data-tutor-theme] .tutor-learning-sidebar > .tutor-lg-flex { min-height: 56px; padding: 0 4px 0 var(--fxcc-s5) !important; }
  html[data-tutor-theme] .tutor-learning-sidebar > .tutor-lg-flex .tutor-learning-header-title {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--fxcc-fs-sub) !important; font-weight: 600 !important;
  }
  html[data-tutor-theme] .tutor-learning-progress { padding: var(--fxcc-s2) var(--fxcc-s5) var(--fxcc-s4) !important; }
  html[data-tutor-theme] .tutor-learning-progress-content { padding: 0 !important; gap: var(--fxcc-s2) !important; }
  html[data-tutor-theme] .tutor-learning-progress-text { font: 500 var(--fxcc-fs-foot)/1.3 var(--fxcc-body) !important; color: var(--fxcc-text-2) !important; padding: 0 !important; }
  html[data-tutor-theme] .tutor-learning-progress-text span { font-weight: 600; color: var(--fxcc-text); }
  html[data-tutor-theme] .tutor-learning-nav { padding: 0 var(--fxcc-s2) var(--fxcc-s4) !important; }
  html[data-tutor-theme] .tutor-learning-nav-header { padding: 10px var(--fxcc-s3) !important; gap: var(--fxcc-s3) !important; }
  html[data-tutor-theme] .tutor-learning-nav-header-title { font-size: var(--fxcc-fs-sub) !important; line-height: 20px !important; -webkit-line-clamp: 2 !important; }
  html[data-tutor-theme] .tutor-learning-nav-body { margin-left: var(--fxcc-s3) !important; }
  html[data-tutor-theme] .tutor-learning-nav-item { padding: var(--fxcc-s2) var(--fxcc-s3) !important; gap: var(--fxcc-s3) !important; }
  html[data-tutor-theme] .tutor-learning-nav-item > div { font-size: var(--fxcc-fs-sub) !important; }
  html[data-tutor-theme] .tutor-learning-nav-item .tutor-text-subdued { font-size: var(--fxcc-fs-foot) !important; }
  /* Pie del temario: "Más" como fila simple; sin el botón deshabilitado ni tooltips encima */
  html[data-tutor-theme] .tutor-learning-sidebar-pages { padding: var(--fxcc-s2) !important; border-top: 1px solid var(--fxcc-line); background: transparent !important; }
  html[data-tutor-theme] .tutor-learning-pages { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
  html[data-tutor-theme] .tutor-learning-pages-item { min-height: 44px !important; padding: 0 var(--fxcc-s3) !important; font: 500 var(--fxcc-fs-sub) var(--fxcc-body) !important; border-radius: 10px !important; }
  html[data-tutor-theme] .tutor-learning-sidebar .tutor-tooltip-wrap:has(.disabled) { display: none !important; }
  html[data-tutor-theme] .tutor-learning-sidebar > .tutor-md-flex:not(:has(.tutor-btn:not(.disabled))) { display: none !important; }
  html[data-tutor-theme] .tutor-learning-sidebar > .tutor-md-flex { padding: 0 var(--fxcc-s2) var(--fxcc-s2) !important; }
  html[data-tutor-theme] .tutor-learning-sidebar > .tutor-md-flex .tutor-btn { min-height: 44px !important; border-radius: 10px !important; font: 600 var(--fxcc-fs-sub) var(--fxcc-body) !important; }
  html[data-tutor-theme] .tutor-learning-sidebar .tutor-tooltip { display: none !important; }
  html[data-tutor-theme] .tutor-learning-sidebar .tutor-expand-btn { display: none !important; }
}

/* ---------- 0.9.17 · Tipografía del sitio en todo el área de aprendizaje ---------- */
/* Tutor no carga su fuente aquí y el navegador caía en Times New Roman */
html[data-tutor-theme] .tutor-learning-area,
html[data-tutor-theme] .tutor-learning-area :is(button, input, textarea, select, .tutor-btn) { font-family: var(--fxcc-body); }

/* ---------- 0.9.18 · Material del taller (cuaderno): no es una sesión ---------- */
/* Página del taller: franja bajo "N sesiones, paso a paso" */
.fxcc-material {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--fxcc-s5);
  margin: var(--fxcc-s6) 0 var(--fxcc-s2); padding: var(--fxcc-s5) var(--fxcc-s6);
  background: var(--fxcc-tint-1); border: 1px dashed var(--fxcc-line-2); border-radius: var(--fxcc-radius);
}
.fxcc-material__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--fxcc-surface); color: var(--fxcc-accent-text); }
.fxcc-material__tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fxcc-material__eyebrow { font: 600 var(--fxcc-fs-caption)/1.3 var(--fxcc-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fxcc-accent-text); }
.fxcc-material__titulo { font: 400 var(--fxcc-fs-title3)/1.25 var(--fxcc-display); color: var(--fxcc-text); }
.fxcc-material__desc { font: 400 var(--fxcc-fs-sub)/1.45 var(--fxcc-body); color: var(--fxcc-muted); }
.fxcc-material__accion { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fxcc-material__meta { font: 500 var(--fxcc-fs-foot)/1.3 var(--fxcc-body); color: var(--fxcc-subtle); }
@media (max-width: 782px) {
  .fxcc-material { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: var(--fxcc-s4); gap: var(--fxcc-s3) var(--fxcc-s4); }
  .fxcc-material__eyebrow { letter-spacing: .06em; }
  .fxcc-material__ico { width: 44px; height: 44px; }
  .fxcc-material__accion { grid-column: 1 / -1; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
}

/* Temario lateral: fila fija entre el progreso y las sesiones */
html[data-tutor-theme] .fxcc-material-fila {
  display: flex; align-items: center; gap: var(--fxcc-s3);
  margin: 0 var(--fxcc-s4) var(--fxcc-s3); padding: 10px var(--fxcc-s3);
  border: 1px dashed var(--fxcc-line-2); border-radius: 10px; background: var(--fxcc-surface);
  color: var(--fxcc-text) !important; text-decoration: none !important; font-family: var(--fxcc-body);
}
html[data-tutor-theme] .fxcc-material-fila:hover { background: var(--fxcc-tint-1); }
.fxcc-material-fila__ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--fxcc-tint-1); color: var(--fxcc-accent-text); }
.fxcc-material-fila__tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fxcc-material-fila__tx strong { font: 600 var(--fxcc-fs-sub)/1.3 var(--fxcc-body); }
.fxcc-material-fila__tx small { font: 400 var(--fxcc-fs-foot)/1.3 var(--fxcc-body); color: var(--fxcc-subtle); }
.fxcc-material-fila__dl { flex: none; color: var(--fxcc-accent-text); }

/* ---------- 0.9.21 · Ajustes → Cuenta ---------- */
/* Botones sobre la portada (cambiar fondo · info): siempre claros con icono oscuro.
   En Safari / modo oscuro Tutor los pintaba con fondo oscuro y el icono no se veía. */
:is(#fxcc-x, html) .tutor-account-cover-photo-action .tutor-btn,
:is(#fxcc-x, html) .tutor-account-cover-photo-action .tutor-btn:is(:hover, :focus, :active) {
  -webkit-appearance: none; appearance: none;
  width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92) !important; color: #141413 !important;
  border: 1px solid rgba(20, 20, 19, .12) !important; border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:is(#fxcc-x, html) .tutor-account-cover-photo-action .tutor-btn:hover { background: #fff !important; }
:is(#fxcc-x, html) .tutor-account-cover-photo-action .tutor-btn svg { color: #141413 !important; fill: none; width: 18px !important; height: 18px !important; }
:is(#fxcc-x, html) .tutor-account-cover-photo-action .tutor-btn svg [fill]:not([fill="none"]) { fill: currentColor !important; }
:is(#fxcc-x, html) .tutor-account-cover-photo-action .tutor-btn svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
/* Los botones del menú que se abre (Subir / Quitar) mantienen su estilo normal */
:is(#fxcc-x, html) .tutor-account-cover-photo-action .tutor-popover .tutor-btn { width: auto !important; height: auto !important; min-height: 36px !important; padding: 0 14px !important; box-shadow: none !important; }

/* "Para conocerte mejor" */
.fxcc-aud__nota { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 400 var(--fxcc-fs-foot)/1.4 var(--fxcc-body); color: var(--fxcc-subtle); }
.fxcc-aud__nota svg { flex: none; color: var(--fxcc-accent-text); }
.fxcc-aud__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fxcc-s5); }
.fxcc-aud__chips { border: 0; margin: 0; padding: 0; min-width: 0; }
:is(#fxcc-x, html) .fxcc-aud__chips legend { padding: 0; margin: 0 0 4px; font: 500 var(--fxcc-fs-foot)/1.3 var(--fxcc-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fxcc-text); }
.fxcc-aud__ayuda { margin: 0 0 10px; font: 400 var(--fxcc-fs-foot)/1.3 var(--fxcc-body); color: var(--fxcc-subtle); }
.fxcc-aud__chips-lista { display: flex; flex-wrap: wrap; gap: 8px; }
:is(#fxcc-x, html) .fxcc-aud__chip { position: relative; margin: 0 !important; cursor: pointer; text-transform: none !important; letter-spacing: normal !important; }
.fxcc-aud__chip input { position: absolute; opacity: 0; pointer-events: none; }
.fxcc-aud__chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--fxcc-line-2); background: var(--fxcc-surface);
  font: 500 var(--fxcc-fs-sub)/1 var(--fxcc-body); color: var(--fxcc-text); transition: background .15s, border-color .15s;
}
.fxcc-aud__chip:hover span { border-color: var(--fxcc-text-2); }
.fxcc-aud__chip input:checked + span { background: var(--fxcc-tint-1); border-color: var(--fxcc-accent-text); box-shadow: inset 0 0 0 1px var(--fxcc-accent-text); }
.fxcc-aud__chip input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 700; color: var(--fxcc-accent-text); }
.fxcc-aud__chip input:focus-visible + span { outline: 2px solid var(--fxcc-accent-text); outline-offset: 2px; }
@media (max-width: 600px) { .fxcc-aud__fila { grid-template-columns: 1fr; } }

/* ---------- 0.9.22 · Miniatura del cuaderno (colores del folleto) ---------- */
.fxcc-material__ico { background: #FF62B1 !important; color: #141413 !important; overflow: hidden; position: relative; box-shadow: 0 2px 8px rgba(255, 98, 177, .25); }
.fxcc-material__mini { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.fxcc-material__mini > svg:not(.fxcc-material__rama) { position: relative; z-index: 1; color: #141413; stroke-width: 1.8; }
.fxcc-material__rama { position: absolute; right: -4px; top: -4px; width: 30px; height: 30px; opacity: .55; transform: scaleX(-1); }
.fxcc-material-fila__ico.fxcc-material__ico { width: 36px; height: 36px; border-radius: 8px; box-shadow: none; }
.fxcc-material-fila__ico .fxcc-material__rama { width: 20px; height: 20px; right: -3px; top: -3px; }

/* ---------- 0.9.23 · "Acerca de" justificado, con guiones para que no queden huecos ---------- */
.fxcc-about__body, .fxcc-about__body p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; }

/* ---------- 0.9.25 · Muestra del certificado en la portada (diseño real) ---------- */
@font-face{font-family:'FX Mali';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/mali-latin-700-italic.woff2') format('woff2')}
@font-face{font-family:'FX Mali';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/mali-latin-ext-700-italic.woff2') format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:'FX Questrial';font-weight:400;font-display:swap;src:url('../fonts/questrial-latin-400-normal.woff2') format('woff2')}
.fxcc-cert__preview.fxcc-cert__muestra {
  position: relative; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #fff;
  aspect-ratio: 297 / 210; container-type: inline-size; box-shadow: 0 10px 30px rgba(17,17,16,.14);
}
.fxcc-cm__fondo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fxcc-cm__nombre { position: absolute; left: 17.45%; right: 17.45%; top: 45.6%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: italic 700 3.74cqw/1.1 'FX Mali', var(--fxcc-body); color: var(--fxcc-cert-color, #1C4E2F); }
.fxcc-cm__fecha { position: absolute; left: 15.58%; top: 81.1%; width: 23.15%; text-align: center; font: 400 1.425cqw/1.3 'FX Questrial', var(--fxcc-body); color: #141413; }
.fxcc-cm__fecha small { display: block; margin-top: .3cqw; font-size: 1.07cqw; letter-spacing: .08em; text-transform: uppercase; color: #6B6B66; }
.fxcc-cm__firma { position: absolute; left: 64.9%; top: 74.06%; width: 16.9%; height: auto; }
.fxcc-cm__tag { position: absolute; top: 3%; left: 3%; padding: .6cqw 1.6cqw; border-radius: 999px; background: rgba(28,78,47,.9); color: #fff;
  font: 600 1.6cqw/1 var(--fxcc-body); letter-spacing: .12em; text-transform: uppercase; }

/* ==========================================================================
   0.9.28 · Aviso "Completa tu perfil" más visible (componente de Tutor, solo CSS)
   Fondo crema + franja ámbar, insignia "!" que late, etiqueta "Pendiente".
   Desaparece solo cuando el perfil llega al 100% (Tutor deja de mostrarlo).
   ========================================================================== */
.tutor-profile-completion{--pc-ambar:#E3A857;--pc-fondo:#FFF6E6;--pc-borde:#EBC88E;--pc-alerta:#C2410C;--pc-texto:#6E4508}
.tutor-profile-completion-header,.tutor-profile-completion-body{background:var(--pc-fondo)!important;border-color:var(--pc-borde)!important}
.tutor-profile-completion-header{position:relative;box-shadow:inset 4px 0 0 var(--pc-ambar);animation:fxpc-borde 2.8s ease-in-out infinite}
/* Insignia "!" pegada al anillo de progreso */
.tutor-profile-completion-header > .tutor-flex > :first-child{position:relative;flex:none}
.tutor-profile-completion-header > .tutor-flex > :first-child::after{
	content:"!";position:absolute;top:-4px;right:-6px;width:22px;height:22px;border-radius:50%;
	background:var(--pc-alerta);color:#fff;font:700 14px/22px system-ui,sans-serif;text-align:center;
	box-shadow:0 0 0 3px var(--pc-fondo);animation:fxpc-latido 2.8s ease-in-out infinite}
/* Título como aviso: más fuerte y con etiqueta "Pendiente" */
.tutor-profile-completion-header .tutor-text-secondary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--pc-texto)!important;font-size:15px!important;font-weight:600!important;white-space:nowrap}
.tutor-profile-completion-header .tutor-text-secondary::after{content:"Pendiente";padding:2px 8px;border-radius:999px;background:var(--pc-alerta);color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
/* Animaciones suaves: el borde "respira" y la insignia late con un halo */
@keyframes fxpc-borde{0%,100%{box-shadow:inset 4px 0 0 var(--pc-ambar),0 0 0 0 rgba(227,168,87,0)}50%{box-shadow:inset 4px 0 0 var(--pc-ambar),0 0 0 4px rgba(227,168,87,.3)}}
@keyframes fxpc-latido{0%,60%,100%{transform:scale(1);box-shadow:0 0 0 3px var(--pc-fondo),0 0 0 3px rgba(194,65,12,.45)}30%{transform:scale(1.12);box-shadow:0 0 0 3px var(--pc-fondo),0 0 0 10px rgba(194,65,12,0)}}
@media (prefers-reduced-motion:reduce){.tutor-profile-completion-header,.tutor-profile-completion-header > .tutor-flex > :first-child::after{animation:none}}

/* ==========================================================================
   0.9.29 · Tipografía y ajustes del perfil
   ========================================================================== */

/* Botones, campos y avisos de Tutor heredaban la letra del tema (se veían en Times).
   Todo lo de Tutor usa la letra del cuerpo; los títulos siguen con su propia regla. */
:is(.tutor-dashboard-layout, .tutor-account-page-wrapper, .tutor-learning-area, .tutor-modal, .tutor-popover, .tutor-toast-container,
    .tutor-page-wrap, .tutor-wrap, .fxcc-course, .fxcc-dash) {
	font-family: var(--fxcc-body);
}
:is(.tutor-dashboard-layout, .tutor-account-page-wrapper, .tutor-learning-area, .tutor-modal, .tutor-popover, .tutor-toast-container,
    .tutor-page-wrap, .tutor-wrap, .fxcc-course, .fxcc-dash) :is(button, input, select, textarea, optgroup, .tutor-btn) {
	font-family: var(--fxcc-body);
}

/* El tema pinta todo button[type=submit] de gris oscuro (#333) y tapa el color de Tutor
   (ej.: "Guardar" en Ajustes se veía gris con letra oscura). Se devuelve el color de Tutor;
   el :hover sigue siendo el de Tutor. */
:is(#fxcc-x, html) button[type="submit"].tutor-btn-primary:not(:hover) { background-color: var(--tutor-button-primary); }
:is(#fxcc-x, html) button[type="submit"]:is(.tutor-btn-outline-primary, .tutor-btn-secondary, .tutor-btn-ghost):not(:hover) { background-color: transparent; }
:is(#fxcc-x, html) button[type="submit"].tutor-btn-secondary:not(:hover) { background-color: var(--tutor-button-secondary); }

/* Cursivas: el tema las pone en Playfair Display; aquí van en la misma letra del párrafo */
:is(.tutor-dashboard-layout, .tutor-learning-area, .tutor-modal, .tutor-page-wrap, .tutor-wrap, .fxcc-course, .fxcc-dash) :is(em, cite, dfn) {
	font-family: inherit;
}

/* "Empezar" / "Continuar" sin el ícono de play */
.tutor-progress-card-actions .tutor-btn svg { display: none; }

/* Instagram en Cuentas sociales: Tutor no trae el ícono, se dibuja aquí */
.tutor-social-field:has(#_tutor_profile_instagram) .tutor-social-icon::before {
	content: ""; display: block; width: 20px; height: 20px;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 4.7a5.1 5.1 0 1 0 0 10.2 5.1 5.1 0 0 0 0-10.2zm0 8.4a3.3 3.3 0 1 1 0-6.6 3.3 3.3 0 0 1 0 6.6zm5.3-9.8a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 4.7a5.1 5.1 0 1 0 0 10.2 5.1 5.1 0 0 0 0-10.2zm0 8.4a3.3 3.3 0 1 1 0-6.6 3.3 3.3 0 0 1 0 6.6zm5.3-9.8a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Respaldo: si Tutor cambia su HTML y el campo no se pudo quitar, igual queda oculto */
.tutor-input-field:has(> label[for="timezone"]) { display: none !important; }

/* 0.9.31 · Etiqueta "Opcional" junto al nombre del campo */
.fxcc-opcional { margin-left: 6px; font-weight: 400; font-size: 12px; letter-spacing: normal; text-transform: none; color: var(--fxcc-subtle, #6B6B66); }

/* ==========================================================================
   0.9.35 · Control de video visto
   ========================================================================== */
.fxcc-con-nota { position: relative; }
.fxcc-con-nota:not(.tutor-learning-area-footer--fixed) { overflow: visible !important; }
.fxcc-visto-nota { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 2; margin: 0; padding: 8px 16px; text-align: center; font: 500 14px/1.4 var(--fxcc-body); color: var(--fxcc-accent-text, #6E4508); background: #FFF6E6; border-top: 1px solid #EBC88E; }
.fxcc-visto-nota[hidden] { display: none; }
button[name="complete_lesson_btn"].fxcc-bloqueado { opacity: .5; cursor: not-allowed; }
.fxcc-visto-aviso { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); z-index: 99999; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 10px; background: #141413; color: #fff; font: 15px/1.4 var(--fxcc-body); opacity: 0; pointer-events: none; transition: .25s; }
.fxcc-visto-aviso.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 783px) {
	/* Computadora: el aviso va a la izquierda de la barra, en el espacio libre */
	.fxcc-visto-nota { position: static; order: -1; flex: 0 1 30%; max-width: 30%; padding: 0; background: none; border: 0; text-align: left; font-size: 13px; }
}

/* ==========================================================================
   0.9.37 · Sin botón "Marcar como completo": la lección se completa sola
   cuando termina el video (lo hace Tutor). Se mantienen ‹ Anterior / Siguiente ›.
   ========================================================================== */
.tutor-learning-area-footer form:has(button[name="complete_lesson_btn"]),
button[name="complete_lesson_btn"] { display: none !important; }

/* 0.9.40 · Sin botón "Completar el curso": el taller se completa solo al terminar
   la última lección (Tutor → Ajustes → Curso: "Estricto" + "Completar automáticamente") */
button[\@click*="handleCourseComplete"],
button[\@click*="tutor-course-complete-modal"],
button[name="complete_course_btn"],
form:has(> button[name="complete_course_btn"]),
.tutor-tooltip-wrap:has(button[\@click*="handleCourseComplete"]),
.tutor-tooltip-wrap:has(button[\@click*="tutor-course-complete-modal"]) { display: none !important; }

/* ==========================================================================
   0.9.41 · Ayuda y soporte
   ========================================================================== */
.fxcc-ayuda { font-family: var(--fxcc-body); color: var(--fxcc-text); }
.fxcc-ayuda__lbl { margin: 4px 0 6px; font: 600 12px/1.3 var(--fxcc-body); letter-spacing: .08em; text-transform: uppercase; color: #3F4431; }
.fxcc-ayuda__item { border-bottom: 1px solid var(--fxcc-line, #E6E1D6); padding: 12px 0; }
.fxcc-ayuda__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; font-weight: 500; font-size: 15px; }
.fxcc-ayuda__item summary::-webkit-details-marker { display: none; }
.fxcc-ayuda__item summary::after { content: "+"; color: var(--fxcc-accent-text, #6E4508); font-size: 18px; line-height: 1; }
.fxcc-ayuda__item[open] summary::after { content: "–"; }
.fxcc-ayuda__item p { margin: 8px 0 2px; font-size: 14px; line-height: 1.5; color: #3b3b38; }
.fxcc-ayuda__contacto { margin-top: 16px; padding: 18px; background: #FBF6EC; border: 1px solid #EBC88E; border-radius: 12px; }
.fxcc-ayuda__contacto h3 { margin: 0 0 4px !important; font: 600 16px/1.3 var(--fxcc-body) !important; color: var(--fxcc-text); }
.fxcc-ayuda__contacto p { margin: 0 0 14px; font-size: 14px; color: var(--fxcc-subtle, #6B6B66); }
.fxcc-ayuda__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--fxcc-accent, #E3A857); color: #141413 !important; font: 600 15px var(--fxcc-body); text-decoration: none !important; }
.fxcc-ayuda__btn:hover { filter: brightness(.96); }
.fxcc-ayuda__correo { display: block; margin-top: 10px; font-size: 13px; color: var(--fxcc-subtle, #6B6B66); word-break: break-word; }
.fxcc-ayuda__correo b { color: var(--fxcc-text); font-weight: 500; }
/* Página del panel */
.fxcc-ayuda-pagina__sub { margin: 4px 0 0; color: var(--fxcc-subtle, #6B6B66); }
.fxcc-ayuda-pagina__caja { max-width: 640px; padding: 8px 24px 24px; background: #fff; border: 1px solid var(--fxcc-line, #E6E1D6); border-radius: 12px; }
/* Botón en la lección */
.fxcc-ayuda-abrir { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; margin-right: 12px; border: 1px solid #CFC9BC; border-radius: 999px; background: #fff; color: var(--fxcc-text); font: 500 14px var(--fxcc-body); cursor: pointer; white-space: nowrap; }
.fxcc-ayuda-abrir i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fxcc-text, #141413); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
.fxcc-ayuda-abrir:hover { background: #F7F5F0; }
@media (max-width: 782px) { .fxcc-ayuda-abrir { padding: 0; width: 36px; justify-content: center; border: 0; margin-right: 4px; } .fxcc-ayuda-abrir span { display: none; } }
/* Ventana */
.fxcc-ayuda-dlg { border: 0; padding: 0; background: transparent; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.fxcc-ayuda-dlg::backdrop { background: rgba(20,20,19,.45); }
.fxcc-ayuda-dlg__caja { background: #fff; border-radius: 16px; padding: 22px 24px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: calc(100dvh - 32px); overflow: auto; }
.fxcc-ayuda-dlg__hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.fxcc-ayuda-dlg__hd h2 { margin: 0 !important; font: 400 24px/1.2 var(--fxcc-display) !important; color: var(--fxcc-text); }
.fxcc-ayuda-dlg__hd p { margin: 4px 0 0; font-size: 14px; color: var(--fxcc-subtle, #6B6B66); }
.fxcc-ayuda-dlg__x { width: 44px; height: 44px; margin: -8px -10px 0 0; border: 0; background: none; font-size: 24px; color: var(--fxcc-subtle, #6B6B66); cursor: pointer; }
@media (max-width: 600px) {
	.fxcc-ayuda-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; }
	.fxcc-ayuda-dlg__caja { border-radius: 16px 16px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
}
.fxcc-ayuda-dlg, .fxcc-ayuda-dlg button { font-family: var(--fxcc-body); color: var(--fxcc-text); }
.fxcc-ayuda-dlg__hd p { font: 400 14px/1.4 var(--fxcc-body) !important; }

/* 0.9.42 · Botón flotante de Ayuda (panel y página del taller; no en lecciones) */
.fxcc-ayuda-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border: 0 !important; border-radius: 999px !important; background: var(--fxcc-text, #141413) !important; color: #fff !important; font: 600 15px var(--fxcc-body); box-shadow: 0 8px 24px rgba(0,0,0,.22); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.fxcc-ayuda-flotante:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.26); }
.fxcc-ayuda-flotante:focus-visible { outline: 2px solid var(--fxcc-accent, #E3A857); outline-offset: 3px; }
@media (max-width: 782px) {
	.fxcc-ayuda-flotante { width: 52px; height: 52px; padding: 0; justify-content: center; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
	.fxcc-ayuda-flotante span { display: none; }
	/* En el panel, encima de la barra de navegación inferior de Tutor */
	.fxcc-ayuda-flotante--panel { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media print { .fxcc-ayuda-flotante { display: none; } }
:is(#fxcc-x, html) body button.fxcc-ayuda-flotante { border-radius: 999px !important; }

/* 0.9.43 · Insignias del equipo en las reflexiones (vienen de FX Community) */
.fxcom-insignia { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 9px; border-radius: 999px; font: 600 12px/1.5 var(--fxcc-body); vertical-align: 1px; }
.fxcom-insignia--autora { background: #1C4E2F; color: #F6E7DF; }
.fxcom-insignia--facilitadora { background: #F2D9AE; color: #6E4508; }
.fxcom-insignia--equipo { background: #E6E1D6; color: #3F4431; }
.fxcom-equipo-autora > .tutor-avatar, .fxcom-equipo-autora .tutor-comment > .tutor-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1C4E2F; border-radius: 50%; }
.fxcom-equipo-facilitadora > .tutor-avatar, .fxcom-equipo-facilitadora .tutor-comment > .tutor-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E3A857; border-radius: 50%; }