/* Look moderno para el chrome de CKEditor 4 (toolbar + bordes).
   Aplica a CUALQUIER instancia .cke_* en el sitio. Ver el contenido del iframe
   se controla con ckeditor-modern.css (configurado via contentsCss). */

.cke_chrome {
    border: 1.5px solid var(--ui-border, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
    background: #fff !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cke_chrome:focus-within {
    border-color: var(--ui-primary-lighter, #93c5fd) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}

.cke_inner {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.cke_top {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--ui-border-light, #f1f5f9) !important;
    padding: 6px 8px !important;
    box-shadow: none !important;
    border-radius: 12px 12px 0 0 !important;
}

.cke_toolbox {
    gap: 2px;
    display: flex !important;
    flex-wrap: wrap;
}

.cke_toolgroup {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 4px 0 0 !important;
    padding: 0 4px 0 0 !important;
    border-right: 1px solid var(--ui-border-light, #e2e8f0) !important;
}
.cke_toolgroup:last-child { border-right: none !important; }

.cke_button {
    border-radius: 6px !important;
    margin: 1px !important;
    padding: 5px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: background 0.12s, border-color 0.12s;
}
.cke_button:hover,
.cke_button:focus {
    background: var(--ui-primary-bg, #eff6ff) !important;
    border-color: var(--ui-primary-bg2, #dbeafe) !important;
    box-shadow: none !important;
}
.cke_button_on {
    background: var(--ui-primary-bg, #eff6ff) !important;
    border-color: var(--ui-primary, #3b82f6) !important;
    box-shadow: none !important;
}
.cke_button_arrow { display: none !important; }

.cke_combo, .cke_combo_button {
    border-radius: 6px !important;
    border: 1px solid var(--ui-border-light, #e2e8f0) !important;
    background: #fff !important;
    box-shadow: none !important;
}
.cke_combo_button:hover {
    background: var(--ui-bg, #f8fafc) !important;
}
.cke_combo_text { font-size: 0.78rem; color: var(--ui-text, #334155); }

.cke_contents {
    background: #fff !important;
    border: none !important;
    border-radius: 0 0 12px 12px !important;
}

/* La barra de path de abajo ("body p span") se ve antigua: ocultarla.
   Si algun template la requiere, no se removePlugin desde config.js
   y por defecto queda escondida visualmente. */
.cke_bottom { display: none !important; }

/* Resize handle mas discreto */
.cke_resizer {
    color: var(--ui-text-disabled, #cbd5e1) !important;
    background: transparent !important;
}

/* Dialogos modernos (link, etc.) */
.cke_dialog {
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
    border: 1px solid var(--ui-border-light, #e2e8f0) !important;
}
.cke_dialog_title {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--ui-border-light, #e2e8f0) !important;
    border-radius: 12px 12px 0 0 !important;
    color: var(--ui-text, #0f172a) !important;
    font-weight: 700;
}
.cke_dialog_footer {
    background: #f8fafc !important;
    border-top: 1px solid var(--ui-border-light, #e2e8f0) !important;
    border-radius: 0 0 12px 12px !important;
}
.cke_dialog_ui_input_text,
.cke_dialog_ui_input_password,
.cke_dialog_ui_input_textarea,
.cke_dialog_ui_input_select {
    border-radius: 6px !important;
    border: 1.5px solid var(--ui-border, #e2e8f0) !important;
    padding: 6px 10px !important;
}