/* Academy - estilos del backoffice (currículo drag & drop) */

/* ===== Handle de arrastre ===== */
.academy-drag-handle {
    color: #c2c9d1;
    cursor: grab;
    padding: 4px 10px 4px 2px;
    user-select: none;
    transition: color .15s ease;
}
.academy-drag-handle:hover {
    color: #7a8590;
}
.academy-drag-handle:active {
    cursor: grabbing;
}

/* ===== Secciones ===== */
/* Tarjeta de sección: estilo propio para no anidar panel_s dentro del panel
   del expediente (cabecera, pestañas y contenido van en UN solo panel) */
.academy-section {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    transition: box-shadow .15s ease, opacity .15s ease;
}
.academy-section.academy-dragging {
    opacity: .45;
}
.academy-section.academy-drop-target {
    box-shadow: 0 0 0 2px #4f8ef7;
}
.academy-section-header {
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f2f5;
    margin-bottom: 4px;
}

/* ===== Filas de leccion ===== */
.academy-lessons {
    min-height: 14px;
}
.academy-lesson-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid #f4f6f8;
    background: #fff;
    border-radius: 4px;
    transition: background .15s ease, opacity .15s ease;
}
.academy-lesson-row:last-child {
    border-bottom: none;
}
.academy-lesson-row:hover {
    background: #f8fafc;
}
.academy-lesson-row.academy-dragging {
    opacity: .4;
    background: #eef4fd;
}
.academy-lesson-type-icon {
    color: #8a94a0;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.academy-lesson-title {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: #3d4650;
}
.academy-lesson-meta {
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Columnas fijas para que duracion y tipo queden alineados en todas las filas */
.academy-lesson-duration {
    width: 64px;
    text-align: right;
}
.academy-lesson-type {
    width: 150px;
    text-align: left;
    padding-left: 14px;
}
/* Columna de acciones de ancho fijo (2 o 3 iconos alinean igual),
   separada de las etiquetas */
.academy-lesson-row .academy-actions {
    width: 108px;
    margin-left: 8px;
    justify-content: flex-end !important;
}

/* Indicador de insercion durante el drag */
.academy-drop-indicator {
    height: 3px;
    background: #4f8ef7;
    border-radius: 2px;
    margin: 2px 0;
    pointer-events: none;
}

/* Zona vacia resaltada mientras se arrastra */
.academy-lessons.academy-drop-empty {
    border: 1.5px dashed #b9c6d6;
    border-radius: 6px;
    background: #f7fafd;
    min-height: 42px;
}

/* ===== Acciones (iconos minimalistas) ===== */
.academy-actions a {
    text-decoration: none;
    line-height: 1;
}
.academy-lesson-row .academy-actions {
    flex-shrink: 0;
}

/* ===== Preguntas del quiz builder ===== */
.academy-question-row {
    border: 1px solid #eef1f4;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fff;
    transition: background .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.academy-question-row:hover {
    background: #f8fafc;
    box-shadow: 0 1px 4px rgba(20, 30, 45, .06);
}
.academy-question-row.academy-dragging {
    opacity: .4;
    background: #eef4fd;
}
.academy-question-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.academy-question-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #3d4650;
}
.academy-question-number {
    color: #8a94a0;
    font-weight: 500;
}
.academy-question-type {
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.academy-question-row .academy-actions {
    flex-shrink: 0;
}
.academy-question-options {
    list-style: none;
    padding: 6px 0 0 28px;
    margin: 0;
}
.academy-question-options li {
    padding: 3px 0;
    color: #57606a;
    font-size: 13px;
}
.academy-question-options li i {
    width: 18px;
    text-align: center;
    margin-right: 4px;
    color: #c2c9d1;
}
.academy-question-options li.academy-option-correct {
    color: #2f3d4c;
    font-weight: 500;
}
.academy-question-options li.academy-option-correct i {
    color: #22a55b;
}

/* ===== Acciones en DataTables (siempre visibles) ===== */
table.dataTable td .academy-actions {
    white-space: nowrap;
}
table.dataTable td .academy-actions a {
    text-decoration: none;
    line-height: 1;
}
/* Variante siempre visible (tablas simples sin DataTable) */
.academy-actions-visible {
    opacity: 1 !important;
}
.academy-actions-visible a {
    text-decoration: none;
    line-height: 1;
}

/* =========================================================================
   SISTEMA VISUAL DEL MODULO
   El acento de cada componente entra por --academy-accent; los colores salen
   de academy_color() en el helper (unica fuente de verdad, espejo de los
   estados del modelo). No usar utilidades tw- aqui: el build del core hace
   purge y las que no usa no existen.
   ========================================================================= */

/* --- Fila de metricas: iguala alturas aunque unas lleven subtitulo y otras no
       (BS3 no trae rows flex, y sin esto las tarjetas quedan escalonadas) --- */
.academy-stats-row {
    display: flex;
    flex-wrap: wrap;
}
.academy-stats-row > [class*="col-"] {
    display: flex;
}
.academy-stats-row > [class*="col-"] > .academy-stat {
    width: 100%;
}

/* --- Tarjeta de metrica --- */
.academy-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #ececec;
    border-left: 3px solid var(--academy-accent, #94a3b8);
    border-radius: 4px;
    height: 100%;
}
.academy-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f4f4f5; /* fallback si el navegador no soporta color-mix */
    background: color-mix(in srgb, var(--academy-accent, #94a3b8) 12%, #fff);
    color: var(--academy-accent, #94a3b8);
    font-size: 18px;
}
.academy-stat-body { min-width: 0; }
.academy-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #313131;
    font-variant-numeric: tabular-nums;
}
.academy-stat-label {
    margin-top: 2px;
    font-size: 13px;
    color: #737373;
    line-height: 1.3;
}
.academy-stat-sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--academy-accent, #94a3b8);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Estado vacio --- */
.academy-empty {
    padding: 34px 16px;
    text-align: center;
    color: #a3a3a3;
}
.academy-empty i {
    font-size: 34px;
    opacity: .45;
}
.academy-empty-title {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #737373;
}
.academy-empty-text {
    margin-top: 4px;
    font-size: 13px;
}

/* --- Barra de progreso propia (el theme no la toca) --- */
.academy-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}
.academy-bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: #ededed;
    overflow: hidden;
}
.academy-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--academy-accent, #94a3b8);
}
.academy-bar-label {
    flex: 0 0 auto;
    font-size: 12px;
    color: #737373;
    font-variant-numeric: tabular-nums;
}

/* --- Cabecera de pantalla con pestañas: unico CSS propio necesario, el core
       no trae el panel-heading flex (mismo minimo que el expediente de alessa) --- */
.academy-page-heading {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 8px;
}
.academy-page-heading h4 {
    margin: 0 !important;
    flex-shrink: 0;
}
.academy-page-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-left: auto;
}
/* Aire entre el contador (lecciones · horas) y el botón de la pestaña, solo
   cuando hay botón (el meta no es el último) y de laptop en adelante. */
@media (min-width: 768px) {
    .academy-page-actions > span.text-muted:not(:last-child) { margin-right: 12px; }
}

/* --- Bloques de la pantalla de ajustes --- */
.academy-settings-group {
    padding: 16px 0 4px;
    border-bottom: 1px solid #f0f0f0;
}
.academy-settings-group:last-of-type { border-bottom: 0; }
.academy-settings-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #a3a3a3;
}

/* --- Tarjeta de "Mis cursos" (aula del alumno dentro del admin) --- */
.academy-mycourse {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 16px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
}
/* Miniatura a sangre: la tarjeta tiene padding, así que la imagen lo cancela
   con margen negativo en vez de reestructurar el contenedor.
   16:9 SIEMPRE, sea cual sea el ancho de la columna: con una altura fija el
   recorte cambiaba de proporción entre pantallas. */
.academy-mycourse-thumb {
    position: relative;
    display: block;
    margin: -16px -16px 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: #e9edf2;
}
.academy-mycourse-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* El placeholder es un SVG cuyo icono escala con el ancho: se deja contenido */
.academy-mycourse-thumb.is-placeholder img { object-fit: contain; }

.academy-mycourse-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.academy-mycourse-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #313131;
}
.academy-mycourse-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #a3a3a3;
}
.academy-catalog-desc {
    font-size: 12px;
    line-height: 1.45;
    color: #737373;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.academy-mycourse-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

/* --- Grilla de tarjetas de curso (catálogo, "mis cursos", instructor, público) ---
   CSS Grid en vez del float de las columnas Bootstrap: columnas parejas, gutter
   uniforme y —lo clave— MISMA ALTURA por fila. Con el float, una tarjeta más
   alta (descripción de 2 líneas, meta, dos botones) hacía que las siguientes se
   "engancharan" en ella y dejaran huecos en blanco. El grid iguala la altura de
   toda la fila y .academy-mycourse (height:100%) rellena la celda. */
.academy-courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
}
/* El .row de Bootstrap trae un clearfix (::before/::after con display:table).
   En un contenedor grid esos pseudo-elementos se vuelven ITEMS y ocupan celdas
   (el ::before robaba la 1ª columna y corría todo). Se anulan. */
.academy-courses-grid::before,
.academy-courses-grid::after {
    content: none;
    display: none;
}
.academy-courses-grid > [class*="col-"] {
    width: auto;
    max-width: none;
    float: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 991px) {
    .academy-courses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .academy-courses-grid { grid-template-columns: 1fr; }
}

/* --- Tarjeta interior del aula: sustituye a los .panel panel-default de
       Bootstrap para no anidar paneles dentro del panel_s de la pantalla --- */
.academy-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    padding: 15px;
}
.academy-sidebar.academy-card {
    padding: 0;
    overflow: hidden;
}
.academy-sidebar-head {
    padding: 12px 15px;
    background: #fafafa;
    border-bottom: 1px solid #ececec;
}
.academy-sidebar-head strong {
    font-size: 13px;
    color: #313131;
}

/* =========================================================================
   DASHBOARD ANALÍTICO
   Marcas finas y cromo discreto: el dato manda, el contenedor no compite.
   ========================================================================= */
.academy-filtros {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}
.academy-filtro {
    padding: 4px 12px;
    font-size: 12px;
    color: #52514e;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 999px;
    text-decoration: none;
}
.academy-filtro:hover { border-color: #c3c2b7; color: #0b0b0b; text-decoration: none; }
.academy-filtro.is-activo {
    background: #2a78d6;
    border-color: #2a78d6;
    color: #fff;
    font-weight: 600;
}

.academy-card-titulo {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #313131;
}
.academy-card-sub {
    margin: -6px 0 10px;
    font-size: 12px;
    color: #898781;
}

/* Contenedor con altura suficiente para el plot Y la banda del eje x */
.academy-grafico {
    position: relative;
    height: 260px;
}

/* Variación respecto al periodo anterior: color + flecha, nunca color solo */
.academy-delta {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.academy-delta.is-sube  { color: #006300; }
.academy-delta.is-baja  { color: #d03b3b; }
.academy-delta.is-plano { color: #898781; }

/* Avisos accionables */
.academy-aviso { border-left: 3px solid #c3c2b7; }
.academy-aviso.is-riesgo      { border-left-color: #d03b3b; }
.academy-aviso.is-riesgo .academy-card-titulo { color: #d03b3b; }
.academy-aviso.is-oportunidad { border-left-color: #0ca30c; }
.academy-aviso.is-oportunidad .academy-card-titulo { color: #0a7a0a; }

/* Contador junto al título: evita el "1 alumnos" de meter el número en la frase */
.academy-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: #52514e;
    background: #f1f0ea;
    border-radius: 999px;
}

.academy-lista { list-style: none; margin: 0; padding: 0; }
.academy-lista li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px solid #f4f4f4;
}
.academy-lista li:last-child { border-bottom: 0; }
.academy-lista-dato { margin-left: auto; font-size: 12px; color: #898781; white-space: nowrap; }

/* Reparto por estado: cuatro números, no un gráfico */
.academy-estado-lista { list-style: none; margin: 0; padding: 0; }
.academy-estado-lista li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid #f4f4f4;
}
.academy-estado-lista li:last-child { border-bottom: 0; }
.academy-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.academy-estado-nombre { color: #52514e; }
.academy-estado-valor  { margin-left: auto; font-weight: 600; color: #313131; }

/* Vista de tabla de cada gráfico: ningún dato solo en el tooltip */
.academy-datos { display: none; margin-top: 10px; }
.academy-datos.is-abierta { display: block; }
.academy-ver-datos { color: #898781; }
.academy-ver-datos:hover { color: #2a78d6; }

/* --- Cifras: siempre tabulares para que las columnas alineen --- */
.academy-count { font-variant-numeric: tabular-nums; }
/* Resumen de precio en el título del acordeón */
.academy-badge-free { background: #dcfce7; color: #166534; }
.academy-price-old { text-decoration: line-through; color: #9aa3ad; font-size: 11px; margin-left: 3px; }
/* Indicadores minimalistas de Presentación: icono gris (ausente) / verde (presente) */
.academy-present-ico { margin-left: 7px; font-size: 13px; color: #c0c6cd; }
.academy-present-ico.on { color: #16a34a; }

/* =========================================================================
   FICHA DEL CURSO (aula virtual)
   El escaparate previo a la matrícula: jerarquía clara y una sola llamada
   a la acción, sin cromo que compita con el contenido.
   ========================================================================= */
/* --- Franja oscura de cabecera de la FICHA del curso (patrón Udemy) ---
   Hace de panel-heading: el panel no lleva cabecera clara, por eso el título
   vive aquí. Es exclusiva de la ficha: en el reproductor se probó y se descartó,
   la cabecera de ahí sigue siendo la clara del resto del módulo.
   El min-height es lo que permite que la caja de decisión suba dentro sin
   salirse por arriba. */
.academy-ficha-hero {
    padding: 26px 24px 30px;
    min-height: 210px;
    background: #011432; /* el azul del sidebar: la franja es de la marca */
    color: #fff;
    border-radius: 4px 4px 0 0;
}
.academy-hero-titulo {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}
.academy-hero-volver {
    color: rgba(255, 255, 255, .55);
    margin-right: 8px;
}
.academy-hero-volver:hover,
.academy-hero-volver:focus { color: #fff; }
.academy-hero-instructor {
    margin: 12px 0 0;
    font-size: 13px;
    color: #94a3b8;
}
.academy-hero-instructor strong { color: #e2e8f0; }

.academy-ficha-lead {
    font-size: 15px;
    line-height: 1.55;
    color: #cbd5e1;
    margin: 0 0 14px;
}

.academy-ficha-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: #94a3b8;
}
.academy-ficha-meta > span { display: inline-flex; align-items: center; gap: 6px; }

.academy-estrellas { color: #f0a029; letter-spacing: 1px; }

/* La media encabeza la caja de decisión (patrón Udemy): a sangre arriba,
   cancelando el padding de .academy-card con margen negativo. Mismo 16:9 que
   la miniatura de las tarjetas. */
.academy-ficha-media {
    position: relative;
    display: block;
    margin: -15px -15px 15px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: #e9edf2;
}
.academy-ficha-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* El placeholder es un SVG cuyo icono escala con el ancho: se deja contenido */
.academy-ficha-media.is-placeholder img { object-fit: contain; }

/* Disparador de la vista previa: capa sobre la portada, como en Udemy */
.academy-ficha-media.is-preview { cursor: pointer; }
.academy-preview-capa {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    transition: background .15s ease;
}
.academy-ficha-media.is-preview:hover .academy-preview-capa { background: rgba(0, 0, 0, .48); }
.academy-preview-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #313131;
    font-size: 18px;
    padding-left: 3px; /* el triángulo pesa a la izquierda */
}
.academy-preview-texto {
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Modal oscuro: el vídeo manda, y sobre fondo claro el marco negro del reproductor
   choca. Mismo azul de la franja para que ficha y vista previa se lean como una.
   OJO: .academy-video-wrapper se define en academy.css, que esta pantalla NO
   carga (allí .academy-card significa otra cosa y rompería las tarjetas), así
   que el 16:9 se repite aquí acotado al modal. */
.academy-preview-modal .modal-content {
    background: #011432;
    border: 0;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}
.academy-preview-modal .modal-header {
    /* tailwind.css del core pinta .modal-header en blanco: sin declararlo aquí
       el título blanco quedaba invisible sobre fondo blanco */
    background: transparent;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.academy-preview-modal .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.academy-preview-modal .close {
    color: #fff;
    opacity: .6;
    text-shadow: none;
    font-size: 24px;
}
.academy-preview-modal .close:hover { opacity: 1; color: #fff; }
/* El velo del core es gris claro: aquí tiene que ser negro de sala de cine */
.academy-preview-modal + .modal-backdrop.in,
.modal-backdrop.academy-preview-backdrop.in { opacity: .8; background: #000; }
.academy-preview-modal .modal-body { padding: 0; }

/* Lista de muestras bajo el reproductor: se cambia de vídeo sin salir del modal */
.academy-preview-lista {
    padding: 12px 18px 16px;
    max-height: 190px;
    overflow-y: auto;
}
.academy-preview-lista-titulo {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
}
.academy-preview-lista-titulo .academy-badge {
    background: rgba(255, 255, 255, .12);
    color: #e2e8f0;
}
.academy-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: #cbd5e1;
    border-radius: 4px;
}
.academy-preview-item:hover,
.academy-preview-item:focus {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}
.academy-preview-item > i { font-size: 10px; color: #64748b; }
.academy-preview-item.is-activa {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-weight: 600;
}
.academy-preview-item.is-activa > i { color: #fff; }

/* La etiqueta "Vista previa" del temario, cuando además se puede reproducir */
a.academy-ver-muestra { cursor: pointer; }
a.academy-ver-muestra:hover,
a.academy-ver-muestra:focus { color: #fff; text-decoration: none; opacity: .85; }
.academy-preview-modal .academy-video-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}
/* El Nextiusplayer ya trae su 16:9; dentro del modal solo se le quitan las
   esquinas de arriba, que van pegadas a la cabecera negra del propio modal */
.academy-preview-modal .nx-player { border-radius: 0 0 6px 6px; }
.academy-preview-modal .academy-video-wrapper iframe,
.academy-preview-modal .academy-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.academy-ficha-media iframe,
.academy-ficha-media .embed-responsive { border-radius: 6px; }

.academy-ficha-descripcion { font-size: 14px; line-height: 1.6; color: #52514e; }
.academy-ficha-descripcion :last-child { margin-bottom: 0; }

.academy-check-list { list-style: none; margin: 0; padding: 0; }
.academy-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    color: #52514e;
}
.academy-check-list li > i { margin-top: 4px; font-size: 11px; color: #0ca30c; }
.academy-check-list.is-neutra li > i { color: #a3a3a3; }

/* --- Temario plegable --- */
.academy-temario-seccion { border-bottom: 1px solid #ececec; }
.academy-temario-seccion:last-child { border-bottom: 0; }

.academy-temario-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 2px;
    font-size: 14px;
    font-weight: 600;
    color: #313131;
    text-align: left;
    background: none;
    border: 0;
}
.academy-temario-cab:hover { color: #2a78d6; }
.academy-temario-flecha {
    font-size: 11px;
    color: #a3a3a3;
    transition: transform .15s ease;
}
.is-abierta > .academy-temario-cab .academy-temario-flecha { transform: rotate(90deg); }
.academy-temario-titulo { flex: 1; }
.academy-temario-dato { font-size: 12px; font-weight: 400; color: #898781; white-space: nowrap; }

.academy-temario-lecciones { display: none; list-style: none; margin: 0; padding: 0 0 10px 22px; }
.is-abierta > .academy-temario-lecciones { display: block; }
.academy-temario-lecciones li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    color: #52514e;
}
.academy-temario-lecciones li > i { width: 16px; text-align: center; color: #a3a3a3; }
.academy-temario-leccion { flex: 1; }

/* =========================================================================
   FICHA DEL CURSO EN MÓVIL (aula y escaparate público)
   Va en esta hoja porque la cargan LAS DOS zonas: si estuviera solo en la
   pública, la ficha del alumno se quedaría atrás. Patrón de Udemy: portada lo
   primero, título sobre fondo claro y la acción siempre a mano abajo.
   ========================================================================= */
.academy-media-movil { display: none; }
.academy-pub-barra   { display: none; }

@media (max-width: 991px) {
    /* 1. La portada, a sangre y antes del título */
    .academy-media-movil { display: block; }
    .academy-media-escritorio { display: none; }
    .academy-media-movil .academy-ficha-media { margin: 0; border-radius: 0; }
    /* En el AULA hay que cancelar el padding del contenedor del panel para que
       llegue a sangre; medido: 15px netos (.content +15, .row -15, .col +15).
       El `#wrapper` solo existe en el admin, así que no afecta al escaparate. */
    #wrapper .academy-media-movil { margin-left: -15px; margin-right: -15px; }

    /* 2. El título, sobre fondo claro: la franja oscura es del escritorio,
          donde acompaña a la caja flotante */
    .academy-ficha-hero {
        min-height: 0;
        padding: 20px 15px 4px;
        background: transparent;
        color: #111827;
    }
    .academy-hero-titulo { color: #111827; font-size: 19px; }
    .academy-hero-volver { color: #898781; }
    .academy-ficha-lead { color: #52514e; }
    .academy-ficha-meta { color: #898781; }
    .academy-hero-instructor { color: #898781; }
    .academy-hero-instructor strong { color: #313131; }

    /* 3. Columnas apiladas, sin superponer nada */
    .academy-ficha-fila {
        display: flex;
        flex-direction: column;
        /* La regla base lleva `wrap` para la fila horizontal; en `column` eso
           reparte los items en varias columnas y los recorta */
        flex-wrap: nowrap;
    }
    .academy-ficha-fila > [class*="col-"] { flex: 0 0 auto; width: 100%; }
    .academy-ficha-fila > .col-md-4 { order: -1; }
    .academy-ficha-cta {
        position: static;
        margin-top: 0;
        margin-bottom: 20px;
        box-shadow: none;
    }

    /* 4. Precio y acción viven en la barra fija; en la caja sobran, y con ellos
          fuera la línea superior de la lista de datos queda huérfana */
    .academy-ficha-accion { display: none; }
    .academy-ficha-cta .academy-ficha-datos {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    /* 5. Una sola fila de pestañas, nunca partidas en varias líneas. En el admin
          las mueve el scroller del core (flechas); esto solo evita el salto de
          línea y sirve además en la zona pública, donde no hay ese JS. */
    .academy-ficha-tabs .nav-tabs-segmented,
    .academy-lat-tabs .nav-tabs-segmented {
        display: flex;
        flex-wrap: nowrap;
    }
    .academy-ficha-tabs .nav-tabs-segmented > li,
    .academy-lat-tabs .nav-tabs-segmented > li { flex: 0 0 auto; float: none; }
    .academy-ficha-tabs .nav-tabs-segmented > li > a,
    .academy-lat-tabs .nav-tabs-segmented > li > a { white-space: nowrap; }
    /* Sin el JS del core (escaparate público) hace falta el desplazamiento propio */
    .academy-publico .academy-ficha-tabs .nav-tabs-segmented {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* =====================================================================
       EL REPRODUCTOR (aulavirtual/course/{id}/{leccion})
       Mismo criterio que la ficha: lo que se viene a hacer —ver la lección—
       va primero y ocupa el ancho; el resto, debajo.
       ===================================================================== */
    /* El vídeo, pegado a la cabecera: el panel-body mete 24px de padding
       superior y dejaba una franja blanca vacía encima. */
    .academy-player { margin-top: -24px; }

    /* Márgenes laterales: se acumulaban panel-body(24) + columna(15) y el texto
       arrancaba a 40px de cada borde —de 390px de pantalla quedaban 310—. Aquí
       se aplanan y el respiro lo pone una sola regla, la de las columnas. */
    .academy-player-body { padding-left: 0; padding-right: 0; }
    .academy-player > .row { margin-left: 0; margin-right: 0; }
    .academy-player > .row > [class*="col-"] {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* Dentro del temario se acumulaban otros 18px anidados (sidebar-body 7 +
       toc-body 5 + lista 2 + li 4): en móvil se recortan a la mitad. Las
       pestañas llevan el MISMO lateral para que no haya escalón entre la fila
       y las secciones de debajo. */
    .academy-sidebar-body { padding-left: 0; padding-right: 0; }
    .academy-toc-body { padding-left: 0; padding-right: 0; }
    /* La fila de pestañas los pierde también, pero su regla va MÁS ABAJO en esta
       hoja y con la misma especificidad ganaría: se anula allí, no aquí. */
    /* Todo pegado al borde interior de la tarjeta: el escalón entre la fila de
       pestañas y las secciones se veía como un margen sobrante */
    .academy-sidebar-head { padding-left: 8px; padding-right: 8px; }
    .academy-toc-section { margin-left: 0; margin-right: 0; }

    .academy-player .col-md-8 { display: flex; flex-direction: column; }
    /* El contenido (vídeo, PDF, texto…) por delante del título de la lección */
    .academy-player-contenido { order: -1; }
    /* Y a todo el ancho del PANEL (no de la ventana: el panel tiene su borde).
       Tras aplanar los paddings de arriba, lo único que queda por cancelar son
       los 12px de la columna. */
    .academy-player-contenido .nx-player,
    .academy-player-contenido .academy-video-wrapper,
    .academy-player-contenido .academy-iframe-wrapper {
        margin-left: -12px;
        margin-right: -12px;
        border-radius: 0;
    }
    /* ⚠️ El reproductor lleva width:100% en su hoja: con un ancho fijo los
       márgenes negativos NO ensanchan, solo desplazan, y el vídeo se salía por
       la izquierda dejando la franja a la derecha. Con auto sí se estira. */
    .academy-player-contenido .nx-player { width: auto; }
    .academy-player-header { margin-top: 14px; }
    /* Un punto por debajo del escritorio (18px): en una pantalla estrecha el
       título compite con el vídeo, que es lo que se ha venido a ver. */
    .academy-lesson-title { font-size: 16px; line-height: 1.35; }

    /* La cabecera del panel es flex: sin min-width:0 su título no puede
       encogerse y un nombre de curso largo desborda la pantalla */
    .academy-page-heading { flex-wrap: wrap; }
    .academy-page-heading h4 {
        /* Llegaba con flex: 0 0 auto —no encogía— y un título largo se salía
           de la pantalla. min-width:0 solo no basta si el shrink es 0. */
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
        /* Flecha y título en la misma línea, y que el título pueda encogerse */
        display: flex;
        align-items: baseline;
    }
    /* El nombre del curso, a UNA sola fila con puntos suspensivos: en móvil un
       título largo se comía dos y tres líneas de pantalla antes del vídeo.
       Tocarlo lo despliega entero (academy_player.js). */
    .academy-page-heading h4 .academy-curso-titulo {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }
    .academy-page-heading h4 .academy-curso-titulo.is-desplegado {
        white-space: normal;
        overflow: visible;
    }
    /* El avance ya se ve entero en el temario: repetirlo aquí solo roba altura
       a la pantalla. El botón del certificado SÍ se queda. */
    .academy-page-actions > span.text-muted { display: none; }
    /* Y si con eso queda vacío, fuera del todo: seguía ocupando una línea
       entera del flex y dejaba una franja muerta bajo el título */
    .academy-page-actions.academy-acciones-vacias { display: none; }

    /* El título del panel arrancaba a 40px mientras el contenido de debajo ya
       estaba a 28: alineados, el mismo criterio para toda la pantalla */
    .academy-page-heading {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Las acciones pasan a barra fija: son lo que se pulsa en cada lección */
    .academy-player-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 10px 12px;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(1, 20, 50, .12);
    }
    /* Los pull-* de Bootstrap no pintan nada dentro de un flex */
    .academy-player-actions .pull-left,
    .academy-player-actions .pull-right { float: none; display: flex; gap: 8px; }
    .academy-player-actions .pull-right { flex: 1; min-width: 0; justify-content: flex-end; }
    /* Completar es la acción principal: se lleva el espacio sobrante */
    .academy-player-actions #academy-complete-btn { flex: 1; min-width: 0; }
    .academy-player-actions .btn {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* "Anterior" se queda en la flecha: es lo menos usado y con su texto los
       tres botones no caben en 390px */
    .academy-player-actions .pull-left .academy-btn-texto { display: none; }
    .academy-player-actions .clearfix { display: none; }
    /* Hueco para que la barra no tape el final del temario */
    .academy-player { padding-bottom: 70px; }

    /* 6. La acción, siempre a mano */
    .academy-pub-barra {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 15px;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(1, 20, 50, .12);
    }
    .academy-pub-barra-precio {
        font-size: 17px;
        font-weight: 700;
        color: #313131;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .academy-pub-barra .btn { flex: 1; padding: 10px 14px; font-weight: 600; }
    /* La barra tapa el final de la página: se compensa con hueco al pie */
    .academy-ficha-fila { padding-bottom: 70px; }
    /* Y el modal se abre por encima de ella */
    .academy-preview-modal { z-index: 1050; }
}

/* =========================================================================
   PESTAÑAS DE LA TARJETA LATERAL DEL AULA (Currículum · En vivo · Certificado)
   ========================================================================= */
/* Mismo tratamiento que las pestañas del detalle del curso (.academy-ficha-tabs):
   sin tamaños propios, para que las dos pantallas se vean iguales.
   Y el MISMO lateral que las secciones del temario, que lo heredan del padding de
   .academy-sidebar-body (7px): la fila y las secciones arrancan en la misma
   vertical, si no se ve un escalón dentro de la tarjeta.
   flow-root: por si alguna flecha vuelve a quedar en flujo; son float y se
   escapaban de la fila, y el temario de abajo —que crea BFC por su overflow-y—
   se estrechaba 81px para esquivarlas. */
.academy-lat-tabs { padding: 10px 7px 0; display: flow-root; }
.academy-lat-tabs .nav-tabs-segmented { margin-bottom: 0; }
/* En una columna estrecha las dos flechas se comían ~80px de fila y las pestañas
   quedaban descolgadas del resto de la tarjeta. Aquí van SOBRE los extremos de la
   tira, como en cualquier carrusel, y la fila ocupa todo el ancho.
   Van centradas con top+transform, no con top/bottom: el plugin del core las
   muestra y oculta con show()/hide(), que escribe el display en el atributo
   style y se llevaría por delante cualquier display propio. */
/* ⚠️ El core estiliza estas flechas con `.horizontal-scrollable-tabs:has(.nav-tabs-segmented)
   .scroller` (position: relative, paddings propios). Ese `:has()` cuenta como
   clase, así que hay que igualar los TRES niveles o el navegador se queda con lo
   suyo y solo se aplica lo que el core no declara (pasó: quedaba `relative` con
   el `top: 50%`, y la flecha se salía de la tarjeta). */
.academy-lat-tabs .horizontal-scrollable-tabs { position: relative; }
.academy-lat-tabs .horizontal-scrollable-tabs .scroller {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    /* alto de una pestaña, para tapar el texto que pasa por debajo */
    padding: 12px 8px;
    margin: 0;
    /* el gris de .nav-tabs-segmented (rgba(209,213,219,.3)) ya resuelto sobre el
       blanco de la tarjeta: la flecha no se ve como un parche de otro color */
    background: #eceef1;
}
/* Pegadas al borde de la tira (si no, asoma texto por fuera de la flecha) y con
   un degradado hacia dentro, para que la pestaña que queda debajo se desvanezca
   en vez de aparecer cortada a media letra. */
.academy-lat-tabs .horizontal-scrollable-tabs .scroller::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
}
/* left/right a 0, no a los 4px del padding de la tira: en esos 4px asomaba el
   final de la pestaña que la flecha debía tapar */
.academy-lat-tabs .horizontal-scrollable-tabs .arrow-left { left: 0; border-radius: 8px 0 0 8px; }
.academy-lat-tabs .horizontal-scrollable-tabs .arrow-right { right: 0; border-radius: 0 8px 8px 0; }
.academy-lat-tabs .horizontal-scrollable-tabs .arrow-left::before {
    left: 100%;
    background: linear-gradient(to left, rgba(236, 238, 241, 0), #eceef1);
}
.academy-lat-tabs .horizontal-scrollable-tabs .arrow-right::before {
    right: 100%;
    background: linear-gradient(to right, rgba(236, 238, 241, 0), #eceef1);
}
/* Al principio del recorrido no hay nada a la izquierda: la flecha sobra y, al
   estar superpuesta, taparía la primera pestaña. Con visibility (no display) el
   plugin del core la sigue midiendo. */
.academy-lat-tabs .horizontal-scrollable-tabs .scroller.disabled { visibility: hidden; }
@media (max-width: 991px) {
    /* En móvil el temario pierde sus laterales (bloque de arriba): la fila los
       pierde también o vuelve el escalón. Va aquí por el orden de la hoja. */
    .academy-lat-tabs { padding-left: 0; padding-right: 0; }
}

/* --- Clases en vivo --- */
.academy-live-lista { padding: 12px; display: grid; gap: 10px; }
.academy-live-item {
    padding: 12px;
    background: #fff;
    border: 1px solid #ececec;
    border-left: 3px solid #94a3b8;
    border-radius: 4px;
}
/* La que está ocurriendo se distingue sola: es la única accionable ahora */
.academy-live-item.is-ahora { border-left-color: #0ca30c; background: #f6fdf6; }
.academy-live-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    color: #313131;
}
.academy-live-punto {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0a7a0a;
    white-space: nowrap;
}
.academy-live-punto::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0ca30c;
}
.academy-live-fecha { margin-top: 4px; font-size: 12px; color: #898781; }
.academy-live-desc { margin: 6px 0 0; font-size: 12px; color: #52514e; }
.academy-live-cuenta {
    margin-top: 10px;
    padding: 8px;
    text-align: center;
    background: #f8f8f6;
    border-radius: 4px;
}
.academy-live-cuenta-valor {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: #313131;
    font-variant-numeric: tabular-nums;
}
.academy-live-cuenta-texto { font-size: 11px; color: #898781; }

.academy-live-vacio { padding: 16px; text-align: center; }
.academy-live-vacio img { max-width: 100%; height: auto; }
.academy-live-vacio-texto { margin: 10px 0 0; font-size: 13px; color: #898781; }

/* --- Certificado --- */
.academy-cert-listo,
.academy-cert-pendiente { padding: 20px 16px; text-align: center; }
.academy-cert-listo > i { font-size: 34px; color: #f0a029; }
.academy-cert-listo p,
.academy-cert-pendiente p { margin: 10px 0; font-size: 13px; color: #52514e; }
.academy-cert-porcentaje {
    font-size: 30px;
    font-weight: 700;
    color: #313131;
    line-height: 1.1;
    margin-bottom: 10px;
}

/* Avance del temario: el porcentaje a la izquierda y el recuento pegado a la
   derecha, donde acaba la barra */
.academy-sidebar-avance {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.academy-sidebar-recuento {
    color: #898781;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Preguntas frecuentes (acordeón de la ficha) --- */
.academy-faq { border-bottom: 1px solid #ececec; }
.academy-faq:last-child { border-bottom: 0; }
.academy-faq-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 2px;
    font-size: 14px;
    font-weight: 500;
    color: #313131;
    text-align: left;
    background: none;
    border: 0;
}
.academy-faq-cab:hover { color: #2a78d6; }
.academy-faq-pregunta { flex: 1; }
.academy-faq-flecha {
    font-size: 11px;
    color: #a3a3a3;
    transition: transform .15s ease;
}
.academy-faq.is-abierta .academy-faq-flecha { transform: rotate(180deg); }
.academy-faq-respuesta {
    display: none;
    padding: 0 2px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #52514e;
}
.academy-faq.is-abierta .academy-faq-respuesta { display: block; }

/* --- Preguntas frecuentes (editor del formulario de curso) --- */
.academy-faq-fila {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #f4f4f4;
}
.academy-faq-fila:first-child { padding-top: 0; }
.academy-faq-campos { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.academy-faq-fila > a { padding-top: 8px; }

/* Listas de una fila por elemento (resultados de aprendizaje): input + quitar */
.academy-lista-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f4f4f4;
}
.academy-lista-fila:first-child { padding-top: 0; }
.academy-lista-fila .academy-lista-campos { flex: 1; }
/* Variante sin línea divisoria entre filas (requisitos) */
.academy-lista-plana .academy-lista-fila { border-bottom: none; padding: 5px 0; }

/* FAQ como crm-accordion anidados: separación entre bloques y título recortado */
.academy-faq-block + .academy-faq-block { margin-top: 8px; }
.academy-faq-block .academy-faq-title {
    display: inline-block;
    max-width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.academy-resena { padding: 10px 0; border-bottom: 1px solid #f4f4f4; }
.academy-resena:last-child { border-bottom: 0; }

/* --- El detalle, en pestañas --- */
/* La tarjeta no lleva padding propio: la tira de pestañas va a sangre arriba y
   el relleno lo pone el contenido de cada una */
.academy-ficha-tabs { padding: 0; }
.academy-ficha-tabs .horizontal-scrollable-tabs { padding: 10px 14px 0; }
.academy-ficha-tabs .tab-content { padding: 18px; }
.academy-ficha-tabs .tab-pane > :last-child { margin-bottom: 0; }
/* Varios bloques encadenados en la misma pestaña: sin esto los rótulos quedan
   pegados al bloque anterior y no se distingue dónde acaba cada uno.
   Va en CSS propio y no con utilidades tw-*: el build del core hace purge. */
.academy-ficha-tabs .tab-pane > h5:not(:first-child) { margin-top: 24px; }
.academy-ficha-tabs .tab-pane > ul,
.academy-ficha-tabs .tab-pane > .academy-ficha-descripcion { margin-bottom: 0; }
/* El contador del rótulo no debe competir con el nombre de la pestaña */
.academy-ficha-tabs .nav-tabs-segmented .academy-badge {
    background: rgba(0, 0, 0, .07);
    font-size: 10px;
    min-width: 18px;
    padding: 0 6px;
    line-height: 15px;
}

/* --- Columna de decisión --- */
/* La fila en flex es lo que hace que el sticky de abajo FUNCIONE: un elemento
   sticky solo se desplaza dentro de su padre, y con las columnas float de
   Bootstrap 3 la derecha medía menos que la propia caja (el margen negativo
   encoge al padre), así que no tenía recorrido y se iba con el scroll. */
.academy-ficha-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
/* En móvil NO se pasa a `display: block`: el bloque de más abajo la mantiene en
   flex column para poder subir la portada con `order`. */

/* Arranca DENTRO de la franja oscura y sobresale, como la caja de compra de
   Udemy; y acompaña al scroll mientras se lee el temario (70px deja libre la
   barra superior fija del admin). El desplazamiento va emparejado con el
   min-height del hero: si se toca uno, hay que tocar el otro. */
.academy-ficha-cta {
    position: sticky;
    top: 70px;
    z-index: 2;
    margin-top: -172px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(1, 20, 50, .18);
}
/* Por debajo de col-md las columnas se apilan: la caja cae bajo la franja y
   una superposición ahí solo taparía el texto */
@media (max-width: 991px) {
    .academy-ficha-cta { margin-top: 0; position: static; }
    .academy-ficha-hero { min-height: 0; }
}
.academy-ficha-precio {
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums;
}

/* ===== Bloque de precio de la ficha (academy_price_block) =====
   Jerarquía en un vistazo: precio vigente grande y oscuro, original tachado y
   apagado, chip de porcentaje en el color de oferta, y debajo la línea de
   ahorro. En la barra móvil se usa la misma fila, más pequeña, sin la línea. */
.academy-precio { line-height: 1.15; }
.academy-precio-fila {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.academy-precio-actual {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #1a1d21;
}
.academy-precio--gratis .academy-precio-actual { color: #1e8e4b; }
.academy-precio-antes {
    font-size: 16px;
    font-weight: 500;
    color: #8b949e;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: #c0392b;
}
.academy-precio-chip {
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    box-shadow: 0 2px 6px rgba(192, 57, 43, .28);
}
.academy-precio-ahorro {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e6f3f;
    background: #e9f8ef;
    border: 1px solid #c8ecd6;
}
.academy-precio-ahorro .fa-tag { font-size: 11px; }
.academy-precio-sep { color: #9fc9b0; font-weight: 400; }
/* Barra fija móvil: misma jerarquía, compacta y en una sola línea */
.academy-precio--barra .academy-precio-fila { gap: 6px; flex-wrap: nowrap; }
.academy-precio--barra .academy-precio-actual { font-size: 19px; }
.academy-precio--barra .academy-precio-antes { font-size: 12px; }
.academy-precio--barra .academy-precio-chip { padding: 2px 7px; font-size: 11px; }
/* Chip compacto del formato de tarjetas/tablas (academy_format_price) */
.academy-price-off {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #c0392b;
    vertical-align: middle;
}
.academy-price-original {
    text-decoration: line-through;
    color: #8b949e;
    font-size: .85em;
    font-weight: 400;
    margin-left: 5px;
}
.academy-price-off { margin-left: 5px; }
/* Nota bajo la llamada a la acción. NO reutiliza .academy-card-sub: esa lleva
   margen superior negativo (va pegada a un título) y aquí se montaba encima
   del botón. */
.academy-ficha-nota {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #898781;
}

/* Botón de contacto por WhatsApp: color de marca, que es lo que hace que se
   reconozca de un vistazo. No sale de academy_color() a propósito: no es un
   estado del modelo, es un logotipo. */
.academy-btn-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
    font-weight: 600;
}
.academy-btn-whatsapp:hover,
.academy-btn-whatsapp:focus {
    background: #1da851;
    border-color: #1da851;
    color: #fff;
}

.academy-ficha-datos { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #ececec; }
.academy-ficha-datos li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
    color: #898781;
}
.academy-ficha-datos li > span:last-child { color: #313131; font-weight: 600; }

.academy-ficha-instructor { display: flex; align-items: center; gap: 10px; }
.academy-ficha-instructor img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* --- Icono de ayuda (tooltip) --- */
.academy-help {
    margin-left: 4px;
    font-size: 13px;
    color: #a3a3a3;
}
.academy-help:hover { color: #52514e; }

/* Fallback de colores por si las utilidades tw- no cubren estos tonos */
.academy-actions .tw-text-neutral-500 { color: #737373; }
.academy-actions .hover\:tw-text-neutral-700:hover { color: #404040; }
.academy-actions .tw-text-amber-500 { color: #f59e0b; }
.academy-actions .hover\:tw-text-amber-700:hover { color: #b45309; }
.academy-actions .hover\:tw-text-red-600:hover { color: #dc2626; }

/* =============================================
   CERTIFICADOS: grid de plantillas (pestaña Plantillas)
   ============================================= */
.academy-tpl-buscador {
    max-width: 320px;
    margin-bottom: 18px;
}
.academy-tpl-card {
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 20px;
}
/* La miniatura impone la proporción del lienzo del designer (1085x768) */
.academy-tpl-media {
    position: relative;
    display: block;
    aspect-ratio: 1085 / 768;
    background: #e9edf2;
}
.academy-tpl-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.academy-tpl-body { padding: 12px 14px; }
/* Nombre a DOS líneas exactas: recorta con "…" si pasa de dos y reserva la
   altura de dos aunque quepa en una, para que las tarjetas del grid queden
   alineadas entre sí (nombres de curso de longitud muy dispar). */
.academy-tpl-name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.4em;
    height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.academy-tpl-name .academy-tpl-default { margin-left: 6px; vertical-align: middle; }
/* Paginador del grid: misma fila info + páginas que las DataTables del core
   (hereda su CSS por ir dentro de div.dataTables_wrapper); el select de salto
   de página flota a la derecha como el dt-page-jump original. */
.academy-tpl-paginador { margin-top: 4px; }
.academy-tpl-paginador .dt-page-jump .academy-tpl-page-jump { float: right; margin-left: 10px; margin-top: 2px; width: auto; }
.academy-tpl-paginador .dataTables_paginate { float: right; }
.academy-tpl-default { font-weight: 400; }
.academy-tpl-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 10px;
}
.academy-tpl-id { display: flex; align-items: center; gap: 5px; }
.academy-tpl-actions {
    border-top: 1px solid #eef1f4;
    padding-top: 10px;
}
/* Candado de plantilla no eliminable (por defecto / con certificados) */
.academy-tpl-bloqueada { cursor: not-allowed; }
/* Preview de la imagen actual en el formulario */
.academy-tpl-preview {
    max-width: 340px;
    border: 1px solid #e4e7ea;
    border-radius: 6px;
    overflow: hidden;
}
.academy-tpl-preview img { display: block; width: 100%; }

/* =============================================
   CERTIFICADOS: designer de plantillas (canvas 1085x768)
   ============================================= */
.academy-designer-hint { margin-bottom: 10px; }
.academy-designer-wrap {
    background: #1f2430;
    border-radius: 8px;
    padding: 14px;
}
#academy-designer-canvas {
    width: 100%;
    display: block;
    border-radius: 4px;
    background: #fff;
    cursor: grab;
}
#academy-designer-canvas:active { cursor: grabbing; }
.academy-designer-panel {
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    background: #fff;
    padding: 16px;
}
.academy-designer-rango input[type="range"] { width: 100%; }
.academy-designer-rango .control-label { width: 100%; }
.academy-designer-valor { float: right; color: #6b7280; }
.academy-designer-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* =============================================
   CERTIFICADOS: importador (reporte post-import)
   ============================================= */
.academy-import-reporte { margin-bottom: 18px; }
.academy-import-anomalias {
    background: #f9f9f9;
    border: 0;
    max-height: 260px;
    overflow-y: auto;
}
.academy-import-anomalias ul { padding-left: 18px; }
.academy-import-anomalias li { margin-bottom: 4px; color: #6b7280; }

/* =============================================================
   LECCIÓN DE VÍDEO EN ESCRITORIO: el título, DEBAJO del reproductor
   Patrón de Vimeo/YouTube. Lo primero que se busca al entrar es el vídeo;
   el nombre de la lección se lee después, ya con la imagen delante.
   En móvil ya pasaba (regla de más abajo, para todos los tipos), y en las
   lecciones que NO son vídeo el título sigue arriba: en un texto o un PDF
   es donde se empieza a leer.
   ============================================================= */
@media (min-width: 992px) {
    .academy-player.is-video .col-md-8 {
        display: flex;
        flex-direction: column;
    }
    /* El resto de bloques se quedan en su orden del DOM (0): basta con
       adelantar el contenido. */
    .academy-player.is-video .academy-player-contenido { order: -1; }
    /* Aire entre el vídeo y el título, que ahora se tocan */
    .academy-player.is-video .academy-player-header {
        margin-top: 16px;
        margin-bottom: 12px;
    }
    /* Y más pequeño: a 24px pesaba más que el nombre del CURSO en la cabecera
       del panel (18px), que jerárquicamente está por encima. Se iguala al 18px
       que ya usaba la versión móvil, así las dos se leen igual. */
    .academy-player.is-video .academy-lesson-title {
        font-size: 18px;
        line-height: 1.35;
        font-weight: 600;
    }
}

/* =============================================================
   AJUSTES DEL REPRODUCTOR (Configuración › Reproductor)
   ============================================================= */

/* Opción que no se puede marcar ahora mismo (logo y favicon son excluyentes):
   el checkbox ya sale deshabilitado, pero con su etiqueta en negro no lo parece */
.academy-check-off label { opacity: .45; cursor: not-allowed; }

/* Selector de color + hex: el mismo dato en dos controles */
.academy-color-field { display: flex; align-items: center; gap: 8px; }
.academy-color-picker {
    width: 46px;
    height: 34px;
    padding: 2px;
    border: 1px solid #d5d8dd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    flex: none;
}

/* Vista previa de los ajustes: es el REPRODUCTOR REAL con un vídeo de ejemplo,
   no una maqueta. Se le pone un ancho de lectura para que no ocupe toda la
   pantalla, y una etiqueta que deja claro que refleja los cambios al vuelo. */
/* El título de este grupo acompaña al reproductor, así que se centra con él.
   El resto de grupos siguen alineados a la izquierda, como el formulario. */
.academy-preview-group .academy-settings-title { text-align: center; }

.academy-preview-wrap {
    max-width: 640px;
    /* Centrado: es la pieza principal del bloque, no un campo más del formulario */
    margin: 0 auto;
}
/* El aviso de que esto todavía no está guardado, bajo el reproductor */
.academy-preview-nota {
    margin: 8px 0 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
}
/* El reproductor dentro de un formulario: sin sombra de tarjeta y con esquinas
   algo menos redondeadas que en el aula, para que no compita con los campos */
.academy-preview-wrap .nx-player { border-radius: 8px; }