/*
 * ==========================================================
 * INSTITUTE — RICH CONTENT V1
 * ==========================================================
 *
 * Contrato visual compartido para HTML enriquecido generado
 * mediante Summernote.
 *
 * Principios:
 * - El contenido NO impone su propia superficie/fondo.
 * - El contexto de destino define --irc-*.
 * - Las decisiones inline explícitas del editor se respetan.
 * - No se fuerza width en imágenes.
 * - Editor y renderer pueden consumir el mismo contrato.
 * ==========================================================
 */

/* ----------------------------------------------------------
 * BASE
 * ---------------------------------------------------------- */

.institute-rich-content,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable {
    box-sizing: border-box;

    font-family:
        var(
            --irc-font-family,
            'main-font-family',
            Arial,
            Helvetica,
            sans-serif
        );

    font-size:
        var(
            --irc-font-size,
            var(--theme-text-base-size, 14px)
        );

    line-height: var(--irc-line-height, 1.65);

    color: var(--irc-text, inherit);

    background: transparent;

    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ----------------------------------------------------------
 * PÁRRAFOS
 * ---------------------------------------------------------- */

.institute-rich-content p,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable p {
    margin: 0 0 1em;
    color: inherit;
}

.institute-rich-content p:last-child,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------
 * TÍTULOS
 * ---------------------------------------------------------- */

.institute-rich-content h1,
.institute-rich-content h2,
.institute-rich-content h3,
.institute-rich-content h4,
.institute-rich-content h5,
.institute-rich-content h6,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h1,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h2,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h3,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h4,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h5,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h6 {
    margin: 1.35em 0 .55em;

    color:
        var(
            --irc-emphasis,
            currentColor
        );

    font-weight: 700;
    line-height: 1.3;
}

.institute-rich-content h1,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h1 {
    font-size: 2em;
}

.institute-rich-content h2,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h2 {
    font-size: 1.65em;
}

.institute-rich-content h3,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h3 {
    font-size: 1.4em;
}

.institute-rich-content h4,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h4 {
    font-size: 1.2em;
}

.institute-rich-content h5,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h5 {
    font-size: 1.08em;
}

.institute-rich-content h6,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable h6 {
    font-size: 1em;
}

/* ----------------------------------------------------------
 * LISTAS
 * ---------------------------------------------------------- */

.institute-rich-content ul,
.institute-rich-content ol,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable ul,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable ol {
    margin: 0 0 1em;
    padding-left: 2em;
}

.institute-rich-content ul,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable ul {
    list-style-type: disc;
}

.institute-rich-content ol,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable ol {
    list-style-type: decimal;
}

.institute-rich-content li,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable li {
    margin-bottom: .35em;
    color: inherit;
}

/* ----------------------------------------------------------
 * ÉNFASIS Y LINKS
 * ---------------------------------------------------------- */

.institute-rich-content strong,
.institute-rich-content b,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable strong,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable b {
    color: inherit;
    font-weight: 700;
}

.institute-rich-content em,
.institute-rich-content i,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable em,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable i {
    color: inherit;
    font-style: italic;
}

.institute-rich-content a,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable a {
    color:
        var(
            --irc-accent,
            var(--theme-accent, #b20000)
        );

    text-decoration: underline;
}

/* ----------------------------------------------------------
 * BLOCKQUOTE
 * ---------------------------------------------------------- */

.institute-rich-content blockquote,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable blockquote {
    margin: 0 0 1em;
    padding: .75em 1em;

    border-left:
        4px solid
        var(
            --irc-accent,
            var(--theme-accent, #b20000)
        );

    color:
        var(
            --irc-muted,
            currentColor
        );

    background:
        var(
            --irc-soft-surface,
            transparent
        );
}

/* ----------------------------------------------------------
 * TABLAS
 * ---------------------------------------------------------- */

.institute-rich-content table,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable table {
    width: 100%;
    max-width: 100%;

    margin: 0 0 1em;

    border-collapse: collapse;

    color: inherit;
}

.institute-rich-content th,
.institute-rich-content td,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable th,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable td {
    padding: .55em .7em;

    border:
        1px solid
        var(
            --irc-border,
            currentColor
        );

    color: inherit;
}

/* ----------------------------------------------------------
 * IMÁGENES
 *
 * Nunca se fuerza width:100%.
 * Si Summernote guarda width:50%, 70%, etc., se conserva.
 * max-width evita desbordamientos responsive.
 * ---------------------------------------------------------- */

.institute-rich-content img,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ----------------------------------------------------------
 * VIDEO / IFRAMES
 * ---------------------------------------------------------- */

.institute-rich-content iframe,
.institute-rich-content video,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable iframe,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable video {
    max-width: 100%;
}

.institute-rich-content iframe.note-video-clip,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable iframe.note-video-clip {
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ----------------------------------------------------------
 * SEPARADORES
 * ---------------------------------------------------------- */

.institute-rich-content hr,
textarea[data-rich-content-profile] +
.note-editor
.note-editing-area
.note-editable hr {
    margin: 1.5em 0;

    border: 0;
    border-top:
        1px solid
        var(
            --irc-border,
            currentColor
        );
}


/*
 * ==========================================================
 * INSTITUTE — WEB COURSE PROFILE V1
 * ==========================================================
 *
 * Course Description:
 * - frontend transparente sobre la superficie real;
 * - Summernote simula el fondo real de la página WEB;
 * - ambos consumen los mismos tokens WEB.
 * ==========================================================
 */

/* Resultado real en Course Page */
.course-description.institute-rich-content {
    --irc-font-family:
        'main-font-family',
        Arial,
        Helvetica,
        sans-serif;

    --irc-font-size:
        var(--theme-text-base-size, 14px);

    --irc-line-height: 1.65;

    --irc-text:
        var(
            --theme-page-contrast,
            var(--theme-text, #f4f5f7)
        );

    --irc-emphasis:
        var(
            --theme-page-contrast,
            var(--theme-text, #f4f5f7)
        );

    --irc-muted:
        var(--theme-text-muted, #aeb6c2);

    --irc-border:
        var(--theme-border, #303640);

    --irc-accent:
        var(--theme-accent, #b20000);

    --irc-soft-surface:
        var(--theme-surface-soft, #20242c);
}


/* Preview dentro de Admin/Panel */
textarea[data-rich-content-profile="web-course"]
+ .note-editor {
    --irc-font-family:
        'main-font-family',
        Arial,
        Helvetica,
        sans-serif;

    --irc-font-size:
        var(--theme-text-base-size, 14px);

    --irc-line-height: 1.65;

    --irc-editor-surface:
        var(--theme-page-bg, #111318);

    --irc-text:
        var(
            --theme-page-contrast,
            var(--theme-text, #f4f5f7)
        );

    --irc-emphasis:
        var(
            --theme-page-contrast,
            var(--theme-text, #f4f5f7)
        );

    --irc-muted:
        var(--theme-text-muted, #aeb6c2);

    --irc-border:
        var(--theme-border, #303640);

    --irc-accent:
        var(--theme-accent, #b20000);

    --irc-soft-surface:
        var(--theme-surface-soft, #20242c);
}


/*
 * El renderer público permanece transparente.
 * Solo el editor necesita pintar la superficie de destino
 * para funcionar como preview.
 */
textarea[data-rich-content-profile]
+ .note-editor
.note-editing-area
.note-editable {
    background:
        var(
            --irc-editor-surface,
            transparent
        );
}

/*
 * ==========================================================
 * INSTITUTE — WEB COURSE / EDITOR GEOMETRY V1
 * ==========================================================
 *
 * La Course Page desktop usa container 1140px + col-lg-8.
 * Ancho útil aproximado del contenido: 730px.
 *
 * El editor replica ese ancho para que porcentajes, wrapping,
 * imágenes y composición visual tengan una referencia real.
 * ==========================================================
 */

textarea[data-rich-content-profile="web-course"]
+ .note-editor
.note-editing-area
.note-editable {
    width: 100%;
    max-width: 730px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * ==========================================================
 * INSTITUTE — WEB TEXT LESSON PROFILE V1
 * ==========================================================
 *
 * Learning Page / contenido editorial:
 * - el renderer permanece transparente;
 * - hoy la superficie real de estudio es #000;
 * - el perfil reproduce esa superficie sin modificar el HTML;
 * - los colores editoriales explícitos siguen teniendo autoridad.
 *
 * IMPORTANTE:
 * esta superficie es transitoria. Cuando Learning Page migre
 * completamente a Central de Temas, estos valores pasarán a
 * consumir los tokens semánticos de la superficie de estudio.
 * ==========================================================
 */

.learning-page
.institute-rich-content--text-lesson {
    --irc-font-family:
        'main-font-family',
        Arial,
        Helvetica,
        sans-serif;

    --irc-font-size:
        var(--theme-text-base-size, 14px);

    --irc-line-height: 1.65;

    --irc-text: #f4f5f7;

    --irc-emphasis: #f4f5f7;

    --irc-muted: #aeb6c2;

    --irc-border: rgba(255, 255, 255, .18);

    --irc-accent:
        var(--theme-accent, #b20000);

    --irc-soft-surface: #111318;
}

/*
 * ==========================================================
 * INSTITUTE — WEB TEXT LESSON EDITOR PREVIEW V1
 * ==========================================================
 *
 * Summernote Admin/Panel debe representar la superficie real
 * de Learning Page mientras ésta continúe usando fondo #000.
 *
 * El contenido editorial conserva autoridad sobre decisiones
 * explícitas de color, tamaño, alineación, etc.
 * ==========================================================
 */

textarea[data-rich-content-profile="web-text-lesson"]
+ .note-editor {
    --irc-font-family:
        'main-font-family',
        Arial,
        Helvetica,
        sans-serif;

    --irc-font-size:
        var(--theme-text-base-size, 14px);

    --irc-line-height: 1.65;

    --irc-editor-surface: #000000;

    --irc-text: #f4f5f7;

    --irc-emphasis: #f4f5f7;

    --irc-muted: #aeb6c2;

    --irc-border: rgba(255, 255, 255, .18);

    --irc-accent:
        var(--theme-accent, #b20000);

    --irc-soft-surface: #111318;
}


/*
 * La Learning Page admite actualmente hasta 1280px.
 * El editor usa todo el ancho disponible, sin superar esa
 * geometría editorial.
 */
textarea[data-rich-content-profile="web-text-lesson"]
+ .note-editor
.note-editing-area
.note-editable {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}