/* Risus Nova - CKEditor/JDownloader
 * Integración visual con los temas de CoreUI (claro/oscuro).
 */

/* ---------- Bloque JDownloader dentro del contenido ---------- */
.rn-jdownloader,
.ck-content .rn-jdownloader {
    border: 1px solid var(--cui-border-color, #d6dbe1);
    border-left: 4px solid var(--cui-primary, #4a90e2);
    border-radius: 6px;
    background: var(--cui-tertiary-bg, #f8fafc);
    color: var(--cui-body-color, #212529);
    margin: 14px 0;
    padding: 12px 14px;
}
.rn-jdownloader__title,
.ck-content .rn-jdownloader__title {
    margin: 0 0 8px;
    color: inherit;
}
.rn-jdownloader ul,
.ck-content .rn-jdownloader ul {
    margin: 0;
    padding-left: 22px;
}
.rn-jdownloader a,
.ck-content .rn-jdownloader a {
    color: var(--cui-link-color, #0d6efd);
    overflow-wrap: anywhere;
}
.ck .rn-jdownloader-button .ck-button__label {
    display: inline !important;
    font-weight: 700;
}

/* ---------- CKEditor: puente con el tema de la web ---------- */
/*
 * CKEditor 5 usa sus propias variables Lark. Las redefinimos en cada
 * instancia para que menús, toolbar, globos y superficie editable no
 * queden blancos cuando CoreUI está en modo oscuro.
 */
.ck,
.ck.ck-reset_all,
.ck.ck-reset_all * {
    --ck-color-base-background: var(--cui-body-bg, #fff);
    --ck-color-base-foreground: var(--cui-tertiary-bg, #f9fafb);
    --ck-color-base-border: var(--cui-border-color, #ccced1);
    --ck-color-base-text: var(--cui-body-color, #212529);
    --ck-color-text: var(--cui-body-color, #212529);
    --ck-color-shadow-drop: rgba(0, 0, 0, .18);
    --ck-color-shadow-inner: rgba(0, 0, 0, .08);
    --ck-color-focus-border: var(--cui-primary, #0d6efd);
    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: var(--cui-tertiary-bg, #f0f1f3);
    --ck-color-button-default-active-background: var(--cui-secondary-bg, #e9ecef);
    --ck-color-button-default-disabled-background: transparent;
    --ck-color-button-on-background: var(--cui-secondary-bg, #e9ecef);
    --ck-color-button-on-hover-background: var(--cui-tertiary-bg, #dee2e6);
    --ck-color-button-on-active-background: var(--cui-tertiary-bg, #dee2e6);
    --ck-color-button-on-disabled-background: var(--cui-secondary-bg, #e9ecef);
    --ck-color-list-background: var(--cui-body-bg, #fff);
    --ck-color-list-button-hover-background: var(--cui-tertiary-bg, #f0f1f3);
    --ck-color-list-button-on-background: var(--cui-primary-bg-subtle, #cfe2ff);
    --ck-color-list-button-on-background-focus: var(--cui-primary-bg-subtle, #cfe2ff);
    --ck-color-list-button-on-text: var(--cui-body-color, #212529);
    --ck-color-panel-background: var(--cui-body-bg, #fff);
    --ck-color-panel-border: var(--cui-border-color, #ccced1);
    --ck-color-toolbar-background: var(--cui-tertiary-bg, #f8f9fa);
    --ck-color-toolbar-border: var(--cui-border-color, #ccced1);
    --ck-color-input-background: var(--cui-body-bg, #fff);
    --ck-color-input-border: var(--cui-border-color, #ccced1);
    --ck-color-input-text: var(--cui-body-color, #212529);
}

/* Refuerzo para elementos de Lark que en algunas versiones llevan color
 * directo o viven en paneles flotantes anexados fuera del editor. */
.ck.ck-toolbar,
.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-dropdown__panel,
.ck.ck-balloon-panel,
.ck.ck-list,
.ck.ck-input,
.ck.ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck.ck-input {
    background-color: var(--cui-body-bg, #fff) !important;
    border-color: var(--cui-border-color, #ccced1) !important;
    color: var(--cui-body-color, #212529) !important;
}
.ck.ck-toolbar {
    background-color: var(--cui-tertiary-bg, #f8f9fa) !important;
}
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
    border-color: var(--cui-primary, #0d6efd) !important;
}
.ck .ck-button,
.ck .ck-button .ck-button__label,
.ck .ck-list__item .ck-button,
.ck .ck-list__item .ck-button .ck-button__label,
.ck .ck-dropdown__button,
.ck .ck-icon {
    color: var(--cui-body-color, #212529) !important;
}
.ck .ck-icon,
.ck .ck-button .ck-icon {
    fill: currentColor !important;
}
.ck .ck-button:not(.ck-disabled):hover,
.ck .ck-button:not(.ck-disabled):focus,
.ck .ck-list__item .ck-button:not(.ck-disabled):hover,
.ck .ck-list__item .ck-button:not(.ck-disabled):focus {
    background: var(--cui-tertiary-bg, #f0f1f3) !important;
}
.ck .ck-button.ck-on,
.ck .ck-list__item .ck-button.ck-on {
    background: var(--cui-primary-bg-subtle, rgba(13, 110, 253, .15)) !important;
    color: var(--cui-body-color, #212529) !important;
}
.ck .ck-dropdown__panel,
.ck.ck-balloon-panel {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18) !important;
}
.ck .ck-list__item {
    color: var(--cui-body-color, #212529) !important;
}
.ck-content,
.ck-editor__editable_inline {
    color: var(--cui-body-color, #212529) !important;
    caret-color: var(--cui-body-color, #212529);
}
.ck-content a {
    color: var(--cui-link-color, #0d6efd);
}

/* Paleta específicamente oscura. Se basa en data-coreui-theme porque es
 * exactamente el atributo que Risus Nova cambia al seleccionar un tema. */
[data-coreui-theme="dark"] .ck,
[data-coreui-theme="dark"] .ck.ck-reset_all,
[data-coreui-theme="dark"] .ck.ck-reset_all * {
    --ck-color-base-background: var(--cui-body-bg, #181924);
    --ck-color-base-foreground: var(--cui-tertiary-bg, #22232f);
    --ck-color-base-border: var(--cui-border-color, #3b3d49);
    --ck-color-base-text: var(--cui-body-color, #e7e9ee);
    --ck-color-text: var(--cui-body-color, #e7e9ee);
    --ck-color-button-default-hover-background: rgba(255, 255, 255, .07);
    --ck-color-button-default-active-background: rgba(255, 255, 255, .11);
    --ck-color-button-on-background: rgba(var(--cui-primary-rgb, 13, 110, 253), .25);
    --ck-color-button-on-hover-background: rgba(var(--cui-primary-rgb, 13, 110, 253), .34);
    --ck-color-list-background: var(--cui-body-bg, #181924);
    --ck-color-list-button-hover-background: rgba(255, 255, 255, .07);
    --ck-color-list-button-on-background: rgba(var(--cui-primary-rgb, 13, 110, 253), .25);
    --ck-color-panel-background: var(--cui-body-bg, #181924);
    --ck-color-toolbar-background: var(--cui-tertiary-bg, #22232f);
    --ck-color-input-background: var(--cui-body-bg, #181924);
    --ck-color-input-text: var(--cui-body-color, #e7e9ee);
}
[data-coreui-theme="dark"] .ck .ck-button:not(.ck-disabled):hover,
[data-coreui-theme="dark"] .ck .ck-button:not(.ck-disabled):focus,
[data-coreui-theme="dark"] .ck .ck-list__item .ck-button:not(.ck-disabled):hover,
[data-coreui-theme="dark"] .ck .ck-list__item .ck-button:not(.ck-disabled):focus {
    background: rgba(255, 255, 255, .07) !important;
}
[data-coreui-theme="dark"] .ck .ck-button.ck-on,
[data-coreui-theme="dark"] .ck .ck-list__item .ck-button.ck-on {
    background: rgba(var(--cui-primary-rgb, 13, 110, 253), .28) !important;
}

/* ---------- Diálogo JDownloader ---------- */
.rn-jd-dialog {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, .58);
}
.rn-jd-dialog__panel {
    width: min(620px, 100%);
    box-sizing: border-box;
    border: 1px solid var(--cui-border-color, #d8dbe0);
    border-radius: 10px;
    background: var(--cui-body-bg, #fff);
    color: var(--cui-body-color, #212529);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .32);
    padding: 18px;
}
.rn-jd-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 18px;
    color: var(--cui-body-color, #212529);
}
.rn-jd-dialog__panel p {
    color: var(--cui-secondary-color, #6c757d);
    margin: 10px 0 0;
}
.rn-jd-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cui-body-color, #212529);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}
.rn-jd-dialog__close:hover,
.rn-jd-dialog__close:focus {
    background: var(--cui-tertiary-bg, #f0f1f3);
    outline: none;
}
.rn-jd-dialog__textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 170px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid var(--cui-border-color, #c8cdd3);
    border-radius: 6px;
    background: var(--cui-body-bg, #fff);
    color: var(--cui-body-color, #212529);
    caret-color: var(--cui-body-color, #212529);
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.rn-jd-dialog__textarea::placeholder {
    color: var(--cui-secondary-color, #6c757d);
    opacity: .9;
}
.rn-jd-dialog__textarea:focus {
    border-color: var(--cui-primary, #0d6efd);
    outline: 0;
    box-shadow: 0 0 0 .22rem rgba(var(--cui-primary-rgb, 13, 110, 253), .18);
}
.rn-jd-dialog__error {
    min-height: 20px;
    margin-top: 6px;
    color: var(--cui-danger, #dc3545);
    font-size: 13px;
}
.rn-jd-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.rn-jd-dialog__actions button {
    border: 1px solid var(--cui-border-color, #c8cdd3);
    border-radius: 6px;
    background: var(--cui-secondary-bg, #f0f1f3);
    color: var(--cui-body-color, #212529);
    cursor: pointer;
    padding: 8px 14px;
}
.rn-jd-dialog__actions button:hover,
.rn-jd-dialog__actions button:focus {
    filter: brightness(.97);
    outline: none;
}
.rn-jd-dialog__insert {
    border-color: var(--cui-primary, #0d6efd) !important;
    background: var(--cui-primary, #0d6efd) !important;
    color: #fff !important;
}

[data-coreui-theme="dark"] .rn-jd-dialog__panel {
    background: var(--cui-body-bg, #181924);
    color: var(--cui-body-color, #e7e9ee);
}
[data-coreui-theme="dark"] .rn-jd-dialog__textarea {
    background: rgba(0, 0, 0, .18);
    color: var(--cui-body-color, #e7e9ee);
}
[data-coreui-theme="dark"] .rn-jd-dialog__actions button:not(.rn-jd-dialog__insert),
[data-coreui-theme="dark"] .rn-jd-dialog__close:hover,
[data-coreui-theme="dark"] .rn-jd-dialog__close:focus {
    background: rgba(255, 255, 255, .07);
}

@media (max-width: 576px) {
    .rn-jd-dialog {
        padding: 10px;
    }
    .rn-jd-dialog__panel {
        padding: 14px;
    }
    .rn-jd-dialog__actions {
        flex-wrap: wrap;
    }
    .rn-jd-dialog__actions button {
        flex: 1 1 auto;
    }
}