/* =========================================================================
 * editor.pge.dark.css
 * Dark mode overrides para el chrome del ContentBuilder v4.1.2 en PageGear.
 * Solo afecta la UI del editor (#_cbhtml, toolbars, modals, popups, sidebar),
 * NO el lienzo (.is-builder > div), que representa la página publica (light).
 *
 * Paleta tomada de design-definition.md §2/§11 (azul profundo CRM):
 *   --pge-ed-bg:      #131729  (fondo body / inputs)
 *   --pge-ed-surface: #1f2640  (superficies elevadas)
 *   --pge-ed-border:  #2f364d
 *   --pge-ed-text:    #e5e7eb
 *   --pge-ed-muted:   #8892a8
 *   --pge-ed-hover:   #242b45
 *   --pge-ed-accent:  #34d058
 *
 * Selector triple obligatorio: html.dark, body.dark, [data-theme="dark"].
 * ======================================================================== */

html.dark,
body.dark,
[data-theme="dark"] {
    --pge-ed-bg:      #131729;
    --pge-ed-surface: #1f2640;
    --pge-ed-border:  #2f364d;
    --pge-ed-border-soft: rgba(255, 255, 255, .08);
    --pge-ed-text:    #e5e7eb;
    --pge-ed-text-body: #b9c1d7;
    --pge-ed-muted:   #8892a8;
    --pge-ed-hover:   #242b45;
    --pge-ed-hover-strong: #2a324d;
    --pge-ed-accent:  #34d058;
    --pge-ed-accent-soft: rgba(52, 208, 88, .18);
    --pge-ed-scroll:  #434965;
}

/* =========================================================================
 * 1. Root chrome — #_cbhtml es el contenedor global del ContentBuilder.
 * ======================================================================== */

html.dark #_cbhtml,
body.dark #_cbhtml,
[data-theme="dark"] #_cbhtml {
    color: var(--pge-ed-text);
}

html.dark #_cbhtml *,
body.dark #_cbhtml *,
[data-theme="dark"] #_cbhtml * {
    color: inherit;
}

/* Headings dentro del chrome */
html.dark #_cbhtml h1, html.dark #_cbhtml h2, html.dark #_cbhtml h3,
html.dark #_cbhtml h4, html.dark #_cbhtml h5, html.dark #_cbhtml h6,
body.dark #_cbhtml h1, body.dark #_cbhtml h2, body.dark #_cbhtml h3,
body.dark #_cbhtml h4, body.dark #_cbhtml h5, body.dark #_cbhtml h6,
[data-theme="dark"] #_cbhtml h1, [data-theme="dark"] #_cbhtml h2,
[data-theme="dark"] #_cbhtml h3, [data-theme="dark"] #_cbhtml h4,
[data-theme="dark"] #_cbhtml h5, [data-theme="dark"] #_cbhtml h6 {
    color: var(--pge-ed-text);
}

/* =========================================================================
 * 2. RTE Toolbars (barras flotantes de formato)
 *    .is-rte-tool        = texto inline (B, i, U, A, color, lista, link...)
 *    .is-elementrte-tool = elementos (imagen, botón, icono, etc.)
 * ======================================================================== */

html.dark #_cbhtml .is-rte-tool,
html.dark #_cbhtml .is-elementrte-tool,
body.dark #_cbhtml .is-rte-tool,
body.dark #_cbhtml .is-elementrte-tool,
[data-theme="dark"] #_cbhtml .is-rte-tool,
[data-theme="dark"] #_cbhtml .is-elementrte-tool {
    background: var(--pge-ed-surface);
    border: 1px solid var(--pge-ed-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

html.dark #_cbhtml .is-rte-tool > div:not(.is-draggable),
html.dark #_cbhtml .is-elementrte-tool > div:not(.is-draggable),
body.dark #_cbhtml .is-rte-tool > div:not(.is-draggable),
body.dark #_cbhtml .is-elementrte-tool > div:not(.is-draggable),
[data-theme="dark"] #_cbhtml .is-rte-tool > div:not(.is-draggable),
[data-theme="dark"] #_cbhtml .is-elementrte-tool > div:not(.is-draggable) {
    background: var(--pge-ed-surface);
}

html.dark #_cbhtml .is-rte-tool button,
html.dark #_cbhtml .is-elementrte-tool button,
body.dark #_cbhtml .is-rte-tool button,
body.dark #_cbhtml .is-elementrte-tool button,
[data-theme="dark"] #_cbhtml .is-rte-tool button,
[data-theme="dark"] #_cbhtml .is-elementrte-tool button {
    background: transparent;
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .is-rte-tool button:hover,
html.dark #_cbhtml .is-elementrte-tool button:hover,
body.dark #_cbhtml .is-rte-tool button:hover,
body.dark #_cbhtml .is-elementrte-tool button:hover,
[data-theme="dark"] #_cbhtml .is-rte-tool button:hover,
[data-theme="dark"] #_cbhtml .is-elementrte-tool button:hover {
    background: var(--pge-ed-hover);
}

html.dark #_cbhtml .is-rte-tool button.on,
html.dark #_cbhtml .is-elementrte-tool button.on,
body.dark #_cbhtml .is-rte-tool button.on,
body.dark #_cbhtml .is-elementrte-tool button.on,
[data-theme="dark"] #_cbhtml .is-rte-tool button.on,
[data-theme="dark"] #_cbhtml .is-elementrte-tool button.on {
    background: var(--pge-ed-hover-strong);
}

html.dark #_cbhtml .is-rte-tool button svg,
html.dark #_cbhtml .is-elementrte-tool button svg,
body.dark #_cbhtml .is-rte-tool button svg,
body.dark #_cbhtml .is-elementrte-tool button svg,
[data-theme="dark"] #_cbhtml .is-rte-tool button svg,
[data-theme="dark"] #_cbhtml .is-elementrte-tool button svg {
    fill: var(--pge-ed-text);
}

/* Separadores verticales/horizontales (.rte-separator) */
html.dark #_cbhtml .is-rte-tool .rte-separator,
html.dark #_cbhtml .is-elementrte-tool .rte-separator,
body.dark #_cbhtml .is-rte-tool .rte-separator,
body.dark #_cbhtml .is-elementrte-tool .rte-separator,
[data-theme="dark"] #_cbhtml .is-rte-tool .rte-separator,
[data-theme="dark"] #_cbhtml .is-elementrte-tool .rte-separator {
    background: var(--pge-ed-border);
}

/* Divisores internos (inline styles) */
html.dark #_cbhtml .is-rte-tool > div > div[style*="background"],
html.dark #_cbhtml .is-elementrte-tool > div > div[style*="background"],
body.dark #_cbhtml .is-rte-tool > div > div[style*="background"],
body.dark #_cbhtml .is-elementrte-tool > div > div[style*="background"],
[data-theme="dark"] #_cbhtml .is-rte-tool > div > div[style*="background"],
[data-theme="dark"] #_cbhtml .is-elementrte-tool > div > div[style*="background"] {
    background: var(--pge-ed-border) !important;
}

/* =========================================================================
 * 3. More-options flyouts (paragraph, color, icon, fontfamily, customtag,
 *    textsetting, etc.) — todos son popups tipo dropdown del toolbar RTE.
 * ======================================================================== */

html.dark #_cbhtml .rte-more-options,
html.dark #_cbhtml .elementrte-more-options,
html.dark #_cbhtml .rte-color-picker,
html.dark #_cbhtml .rte-icon-options,
html.dark #_cbhtml .rte-fontfamily-options,
html.dark #_cbhtml .rte-customtag-options,
html.dark #_cbhtml .rte-paragraph-options,
html.dark #_cbhtml .rte-textsetting-options,
body.dark #_cbhtml .rte-more-options,
body.dark #_cbhtml .elementrte-more-options,
body.dark #_cbhtml .rte-color-picker,
body.dark #_cbhtml .rte-icon-options,
body.dark #_cbhtml .rte-fontfamily-options,
body.dark #_cbhtml .rte-customtag-options,
body.dark #_cbhtml .rte-paragraph-options,
body.dark #_cbhtml .rte-textsetting-options,
[data-theme="dark"] #_cbhtml .rte-more-options,
[data-theme="dark"] #_cbhtml .elementrte-more-options,
[data-theme="dark"] #_cbhtml .rte-color-picker,
[data-theme="dark"] #_cbhtml .rte-icon-options,
[data-theme="dark"] #_cbhtml .rte-fontfamily-options,
[data-theme="dark"] #_cbhtml .rte-customtag-options,
[data-theme="dark"] #_cbhtml .rte-paragraph-options,
[data-theme="dark"] #_cbhtml .rte-textsetting-options {
    background: var(--pge-ed-surface);
    border: 1px solid var(--pge-ed-border);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .5);
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .rte-more-options button,
html.dark #_cbhtml .elementrte-more-options button,
html.dark #_cbhtml .rte-customtag-options > div button,
html.dark #_cbhtml .rte-textsetting-options button,
body.dark #_cbhtml .rte-more-options button,
body.dark #_cbhtml .elementrte-more-options button,
body.dark #_cbhtml .rte-customtag-options > div button,
body.dark #_cbhtml .rte-textsetting-options button,
[data-theme="dark"] #_cbhtml .rte-more-options button,
[data-theme="dark"] #_cbhtml .elementrte-more-options button,
[data-theme="dark"] #_cbhtml .rte-customtag-options > div button,
[data-theme="dark"] #_cbhtml .rte-textsetting-options button {
    background: transparent;
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .rte-more-options button:hover,
html.dark #_cbhtml .rte-more-options button.on,
html.dark #_cbhtml .elementrte-more-options button:hover,
html.dark #_cbhtml .elementrte-more-options button.on,
html.dark #_cbhtml .rte-customtag-options > div button:hover,
html.dark #_cbhtml .rte-textsetting-options button:hover,
html.dark #_cbhtml .rte-paragraph-options > div > div:hover,
html.dark #_cbhtml .rte-paragraph-options div.on,
body.dark #_cbhtml .rte-more-options button:hover,
body.dark #_cbhtml .rte-more-options button.on,
body.dark #_cbhtml .elementrte-more-options button:hover,
body.dark #_cbhtml .elementrte-more-options button.on,
body.dark #_cbhtml .rte-customtag-options > div button:hover,
body.dark #_cbhtml .rte-textsetting-options button:hover,
body.dark #_cbhtml .rte-paragraph-options > div > div:hover,
body.dark #_cbhtml .rte-paragraph-options div.on,
[data-theme="dark"] #_cbhtml .rte-more-options button:hover,
[data-theme="dark"] #_cbhtml .rte-more-options button.on,
[data-theme="dark"] #_cbhtml .elementrte-more-options button:hover,
[data-theme="dark"] #_cbhtml .elementrte-more-options button.on,
[data-theme="dark"] #_cbhtml .rte-customtag-options > div button:hover,
[data-theme="dark"] #_cbhtml .rte-textsetting-options button:hover,
[data-theme="dark"] #_cbhtml .rte-paragraph-options > div > div:hover,
[data-theme="dark"] #_cbhtml .rte-paragraph-options div.on {
    background: var(--pge-ed-hover);
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .rte-more-options svg,
html.dark #_cbhtml .elementrte-more-options svg,
html.dark #_cbhtml .rte-icon-options svg,
body.dark #_cbhtml .rte-more-options svg,
body.dark #_cbhtml .elementrte-more-options svg,
body.dark #_cbhtml .rte-icon-options svg,
[data-theme="dark"] #_cbhtml .rte-more-options svg,
[data-theme="dark"] #_cbhtml .elementrte-more-options svg,
[data-theme="dark"] #_cbhtml .rte-icon-options svg {
    fill: var(--pge-ed-text);
}

/* =========================================================================
 * 4. Modales (imageselect, fileselect, editstyles, searchreplace, edittable,
 *    pickgradientcolor, viewhtmlformatted, etc.)
 * ======================================================================== */

html.dark #_cbhtml .is-modal > div:not(.is-modal-overlay),
body.dark #_cbhtml .is-modal > div:not(.is-modal-overlay),
[data-theme="dark"] #_cbhtml .is-modal > div:not(.is-modal-overlay) {
    background: var(--pge-ed-surface);
    border: 1px solid var(--pge-ed-border);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .5);
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .is-modal-bar,
body.dark #_cbhtml .is-modal-bar,
[data-theme="dark"] #_cbhtml .is-modal-bar {
    background: var(--pge-ed-hover);
    color: var(--pge-ed-muted);
    border-bottom: 1px solid var(--pge-ed-border);
}

html.dark #_cbhtml .is-modal-bar .is-modal-close,
body.dark #_cbhtml .is-modal-bar .is-modal-close,
[data-theme="dark"] #_cbhtml .is-modal-bar .is-modal-close {
    color: var(--pge-ed-muted);
}

html.dark #_cbhtml .is-modal-bar .is-modal-close:hover,
body.dark #_cbhtml .is-modal-bar .is-modal-close:hover,
[data-theme="dark"] #_cbhtml .is-modal-bar .is-modal-close:hover {
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .is-modal.searchreplace,
body.dark #_cbhtml .is-modal.searchreplace,
[data-theme="dark"] #_cbhtml .is-modal.searchreplace {
    background: var(--pge-ed-surface);
}

html.dark #_cbhtml .is-modal.quickadd,
body.dark #_cbhtml .is-modal.quickadd,
[data-theme="dark"] #_cbhtml .is-modal.quickadd {
    background: var(--pge-ed-surface);
}

/* =========================================================================
 * 5. Inputs, textareas y selects dentro del chrome
 * ======================================================================== */

html.dark #_cbhtml input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html.dark #_cbhtml textarea,
html.dark #_cbhtml select,
body.dark #_cbhtml input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
body.dark #_cbhtml textarea,
body.dark #_cbhtml select,
[data-theme="dark"] #_cbhtml input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
[data-theme="dark"] #_cbhtml textarea,
[data-theme="dark"] #_cbhtml select {
    background-color: var(--pge-ed-bg);
    color: var(--pge-ed-text);
    border-color: var(--pge-ed-border);
}

html.dark #_cbhtml input::placeholder,
html.dark #_cbhtml textarea::placeholder,
body.dark #_cbhtml input::placeholder,
body.dark #_cbhtml textarea::placeholder,
[data-theme="dark"] #_cbhtml input::placeholder,
[data-theme="dark"] #_cbhtml textarea::placeholder {
    color: var(--pge-ed-muted);
}

html.dark #_cbhtml input:focus,
html.dark #_cbhtml textarea:focus,
html.dark #_cbhtml select:focus,
body.dark #_cbhtml input:focus,
body.dark #_cbhtml textarea:focus,
body.dark #_cbhtml select:focus,
[data-theme="dark"] #_cbhtml input:focus,
[data-theme="dark"] #_cbhtml textarea:focus,
[data-theme="dark"] #_cbhtml select:focus {
    border-color: var(--pge-ed-accent);
    outline: none;
}

/* Labels dentro del chrome */
html.dark #_cbhtml label,
body.dark #_cbhtml label,
[data-theme="dark"] #_cbhtml label {
    color: var(--pge-ed-text-body);
}

/* =========================================================================
 * 6. Botones "classic" (dentro de modals y settings del editor)
 * ======================================================================== */

html.dark #_cbhtml button.classic,
html.dark #_cbhtml button.classic-primary,
html.dark #_cbhtml button.classic-secondary,
body.dark #_cbhtml button.classic,
body.dark #_cbhtml button.classic-primary,
body.dark #_cbhtml button.classic-secondary,
[data-theme="dark"] #_cbhtml button.classic,
[data-theme="dark"] #_cbhtml button.classic-primary,
[data-theme="dark"] #_cbhtml button.classic-secondary {
    background: var(--pge-ed-hover);
    color: var(--pge-ed-text);
    border-color: var(--pge-ed-border);
}

html.dark #_cbhtml button.classic:hover,
html.dark #_cbhtml button.classic-primary:hover,
body.dark #_cbhtml button.classic:hover,
body.dark #_cbhtml button.classic-primary:hover,
[data-theme="dark"] #_cbhtml button.classic:hover,
[data-theme="dark"] #_cbhtml button.classic-primary:hover {
    background: var(--pge-ed-hover-strong);
}

html.dark #_cbhtml button.classic-secondary,
body.dark #_cbhtml button.classic-secondary,
[data-theme="dark"] #_cbhtml button.classic-secondary {
    background: transparent;
}

/* =========================================================================
 * 7. Sidebar de snippets (.is-side)
 * ======================================================================== */

html.dark #_cbhtml .is-side,
body.dark #_cbhtml .is-side,
[data-theme="dark"] #_cbhtml .is-side {
    background: var(--pge-ed-bg);
    border-left: 1px solid var(--pge-ed-border);
}

html.dark #_cbhtml .is-side > div,
body.dark #_cbhtml .is-side > div,
[data-theme="dark"] #_cbhtml .is-side > div {
    background: transparent;
}

html.dark #_cbhtml #divSnippetHandle,
body.dark #_cbhtml #divSnippetHandle,
[data-theme="dark"] #_cbhtml #divSnippetHandle {
    background: var(--pge-ed-surface);
    border: 1px solid var(--pge-ed-border);
    border-right: none;
    color: var(--pge-ed-text);
}

html.dark #_cbhtml #divSnippetHandle svg,
body.dark #_cbhtml #divSnippetHandle svg,
[data-theme="dark"] #_cbhtml #divSnippetHandle svg {
    fill: var(--pge-ed-text);
}

/* Selector de categoria de snippets */
html.dark #_cbhtml #selSnippetCat,
body.dark #_cbhtml #selSnippetCat,
[data-theme="dark"] #_cbhtml #selSnippetCat {
    background-color: var(--pge-ed-surface);
    color: var(--pge-ed-text);
    border-bottom: 1px solid var(--pge-ed-border);
    box-shadow: 0 5px 7px rgba(0, 0, 0, .25);
}

/* Options del dropdown nativo (SO renderiza, pero acepta background+color). */
html.dark #_cbhtml #selSnippetCat option,
html.dark #_cbhtml select option,
body.dark #_cbhtml #selSnippetCat option,
body.dark #_cbhtml select option,
[data-theme="dark"] #_cbhtml #selSnippetCat option,
[data-theme="dark"] #_cbhtml select option {
    background-color: var(--pge-ed-surface);
    color: var(--pge-ed-text);
}

html.dark #_cbhtml #selSnippetCat option:checked,
html.dark #_cbhtml select option:checked,
body.dark #_cbhtml #selSnippetCat option:checked,
body.dark #_cbhtml select option:checked,
[data-theme="dark"] #_cbhtml #selSnippetCat option:checked,
[data-theme="dark"] #_cbhtml select option:checked {
    background-color: var(--pge-ed-hover-strong);
    color: var(--pge-ed-text);
}

/* Custom selectbox de categorias de snippets (.is-selectbox + .is-selectbox-options).
   ContentBuilder lo renderiza como lista custom, no <select> nativo. */
html.dark #_cbhtml .is-selectbox,
body.dark #_cbhtml .is-selectbox,
[data-theme="dark"] #_cbhtml .is-selectbox {
    background: var(--pge-ed-surface);
    color: var(--pge-ed-text);
    border-bottom: 1px solid var(--pge-ed-border);
}

html.dark #_cbhtml .is-selectbox:hover,
body.dark #_cbhtml .is-selectbox:hover,
[data-theme="dark"] #_cbhtml .is-selectbox:hover {
    background: var(--pge-ed-hover);
}

html.dark #_cbhtml .is-selectbox-options,
body.dark #_cbhtml .is-selectbox-options,
[data-theme="dark"] #_cbhtml .is-selectbox-options {
    background-color: var(--pge-ed-bg);
    border: 1px solid var(--pge-ed-border);
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .is-selectbox-options > div,
body.dark #_cbhtml .is-selectbox-options > div,
[data-theme="dark"] #_cbhtml .is-selectbox-options > div {
    color: var(--pge-ed-text);
    background: transparent;
}

html.dark #_cbhtml .is-selectbox-options > div:hover,
body.dark #_cbhtml .is-selectbox-options > div:hover,
[data-theme="dark"] #_cbhtml .is-selectbox-options > div:hover {
    background: var(--pge-ed-hover);
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .is-selectbox-options > div.selected,
body.dark #_cbhtml .is-selectbox-options > div.selected,
[data-theme="dark"] #_cbhtml .is-selectbox-options > div.selected {
    background: var(--pge-ed-hover-strong);
    color: var(--pge-ed-text);
}

/* Lista de elementos/snippets */
html.dark #_cbhtml .elm-list a,
body.dark #_cbhtml .elm-list a,
[data-theme="dark"] #_cbhtml .elm-list a {
    color: var(--pge-ed-text-body);
}

html.dark #_cbhtml .elm-list a.active,
body.dark #_cbhtml .elm-list a.active,
[data-theme="dark"] #_cbhtml .elm-list a.active {
    background: var(--pge-ed-hover);
    color: var(--pge-ed-text);
}

/* Tiles de diseno en sidebar (sin invertir imagenes, solo el fondo contenedor) */
html.dark #_cbhtml .is-design-list > div,
body.dark #_cbhtml .is-design-list > div,
[data-theme="dark"] #_cbhtml .is-design-list > div {
    background: var(--pge-ed-surface);
    outline-color: var(--pge-ed-border) !important;
}

/* Items de snippet (draggable) */
html.dark #_cbhtml .snippet-item.sortable-chosen,
html.dark #_cbhtml .snippet-item.sortable-drag,
body.dark #_cbhtml .snippet-item.sortable-chosen,
body.dark #_cbhtml .snippet-item.sortable-drag,
[data-theme="dark"] #_cbhtml .snippet-item.sortable-chosen,
[data-theme="dark"] #_cbhtml .snippet-item.sortable-drag {
    background: rgba(255, 255, 255, .06);
}

/* =========================================================================
 * 8. Pops (is-pop generic)  y tabs-more
 * ======================================================================== */

html.dark #_cbhtml .is-pop,
body.dark #_cbhtml .is-pop,
[data-theme="dark"] #_cbhtml .is-pop {
    background: var(--pge-ed-surface);
    border: 1px solid var(--pge-ed-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .is-pop.columnmore button,
html.dark #_cbhtml .is-pop.rowmore button,
html.dark #_cbhtml .is-pop.elmmore button,
html.dark #_cbhtml .quickadd button,
body.dark #_cbhtml .is-pop.columnmore button,
body.dark #_cbhtml .is-pop.rowmore button,
body.dark #_cbhtml .is-pop.elmmore button,
body.dark #_cbhtml .quickadd button,
[data-theme="dark"] #_cbhtml .is-pop.columnmore button,
[data-theme="dark"] #_cbhtml .is-pop.rowmore button,
[data-theme="dark"] #_cbhtml .is-pop.elmmore button,
[data-theme="dark"] #_cbhtml .quickadd button {
    color: var(--pge-ed-text);
    background: transparent;
}

html.dark #_cbhtml .is-pop.columnmore button:hover,
html.dark #_cbhtml .is-pop.rowmore button:hover,
html.dark #_cbhtml .is-pop.elmmore button:hover,
html.dark #_cbhtml .quickadd button:hover,
body.dark #_cbhtml .is-pop.columnmore button:hover,
body.dark #_cbhtml .is-pop.rowmore button:hover,
body.dark #_cbhtml .is-pop.elmmore button:hover,
body.dark #_cbhtml .quickadd button:hover,
[data-theme="dark"] #_cbhtml .is-pop.columnmore button:hover,
[data-theme="dark"] #_cbhtml .is-pop.rowmore button:hover,
[data-theme="dark"] #_cbhtml .is-pop.elmmore button:hover,
[data-theme="dark"] #_cbhtml .quickadd button:hover {
    background: var(--pge-ed-hover);
}

html.dark #_cbhtml .is-pop.columnmore button svg,
html.dark #_cbhtml .is-pop.rowmore button svg,
html.dark #_cbhtml .is-pop.elmmore button svg,
body.dark #_cbhtml .is-pop.columnmore button svg,
body.dark #_cbhtml .is-pop.rowmore button svg,
body.dark #_cbhtml .is-pop.elmmore button svg,
[data-theme="dark"] #_cbhtml .is-pop.columnmore button svg,
[data-theme="dark"] #_cbhtml .is-pop.rowmore button svg,
[data-theme="dark"] #_cbhtml .is-pop.elmmore button svg {
    fill: var(--pge-ed-text);
}

/* Flechas CSS de los pops (light variant) — repintar la punta oscura */
html.dark #_cbhtml .is-pop.light.arrow-top:after,
body.dark #_cbhtml .is-pop.light.arrow-top:after,
[data-theme="dark"] #_cbhtml .is-pop.light.arrow-top:after {
    border-bottom-color: var(--pge-ed-surface);
}
html.dark #_cbhtml .is-pop.light.arrow-top:before,
body.dark #_cbhtml .is-pop.light.arrow-top:before,
[data-theme="dark"] #_cbhtml .is-pop.light.arrow-top:before {
    border-bottom-color: var(--pge-ed-border);
}

/* Tabs-more popover */
html.dark #_cbhtml .is-tabs-more,
body.dark #_cbhtml .is-tabs-more,
[data-theme="dark"] #_cbhtml .is-tabs-more {
    background: var(--pge-ed-surface);
    border: 1px solid var(--pge-ed-border);
}

html.dark #_cbhtml .is-tabs-more > a,
body.dark #_cbhtml .is-tabs-more > a,
[data-theme="dark"] #_cbhtml .is-tabs-more > a {
    color: var(--pge-ed-text-body);
}

html.dark #_cbhtml .is-tabs-more > a:hover,
html.dark #_cbhtml .is-tabs-more > a.active,
body.dark #_cbhtml .is-tabs-more > a:hover,
body.dark #_cbhtml .is-tabs-more > a.active,
[data-theme="dark"] #_cbhtml .is-tabs-more > a:hover,
[data-theme="dark"] #_cbhtml .is-tabs-more > a.active {
    background: var(--pge-ed-hover);
    color: var(--pge-ed-text);
}

/* =========================================================================
 * 9. Herramientas de lienzo (is-tool column/row/element)
 *    Mantener colores semanticos (verde/amarillo/rojo) pero ajustar el marco.
 * ======================================================================== */

html.dark #_cbhtml .is-tool,
body.dark #_cbhtml .is-tool,
[data-theme="dark"] #_cbhtml .is-tool {
    background: rgba(31, 38, 64, .92);
}

html.dark #_cbhtml .is-tool.is-element-tool,
body.dark #_cbhtml .is-tool.is-element-tool,
[data-theme="dark"] #_cbhtml .is-tool.is-element-tool {
    background: rgba(31, 38, 64, .92);
}

/* Variante gray (outline clean) — los iconos deben ser claros */
html.dark #_cbhtml[gray] .is-tool.is-column-tool svg,
body.dark #_cbhtml[gray] .is-tool.is-column-tool svg,
[data-theme="dark"] #_cbhtml[gray] .is-tool.is-column-tool svg,
html.dark .is-builder[gray] .is-tool.is-row-tool .row-handle svg,
html.dark .is-builder[gray] .is-tool.is-row-tool .row-grideditor svg,
html.dark .is-builder[gray] .is-tool.is-row-tool .row-more svg,
html.dark .is-builder[gray] .is-tool.is-row-tool .row-remove svg,
body.dark .is-builder[gray] .is-tool.is-row-tool .row-handle svg,
body.dark .is-builder[gray] .is-tool.is-row-tool .row-grideditor svg,
body.dark .is-builder[gray] .is-tool.is-row-tool .row-more svg,
body.dark .is-builder[gray] .is-tool.is-row-tool .row-remove svg,
[data-theme="dark"] .is-builder[gray] .is-tool.is-row-tool .row-handle svg,
[data-theme="dark"] .is-builder[gray] .is-tool.is-row-tool .row-grideditor svg,
[data-theme="dark"] .is-builder[gray] .is-tool.is-row-tool .row-more svg,
[data-theme="dark"] .is-builder[gray] .is-tool.is-row-tool .row-remove svg {
    fill: var(--pge-ed-text);
}

html.dark #_cbhtml[gray] .is-tool.is-column-tool .cell-more svg,
body.dark #_cbhtml[gray] .is-tool.is-column-tool .cell-more svg,
[data-theme="dark"] #_cbhtml[gray] .is-tool.is-column-tool .cell-more svg {
    fill: var(--pge-ed-muted);
}

/* =========================================================================
 * 10. Add-initial y row-add markers en dark
 * ======================================================================== */

html.dark .row-add-initial,
body.dark .row-add-initial,
[data-theme="dark"] .row-add-initial {
    color: var(--pge-ed-muted);
    border: 1px dashed var(--pge-ed-border);
    background: rgba(255, 255, 255, .02);
}

html.dark .row-add-initial:hover,
body.dark .row-add-initial:hover,
[data-theme="dark"] .row-add-initial:hover {
    background: rgba(255, 255, 255, .04);
}

html.dark .row-add-initial span,
body.dark .row-add-initial span,
[data-theme="dark"] .row-add-initial span {
    color: var(--pge-ed-muted);
}

/* =========================================================================
 * 11. Link/Image tool popovers
 * ======================================================================== */

html.dark #_cbhtml #divImageTool,
html.dark #_cbhtml #divLinkTool,
body.dark #_cbhtml #divImageTool,
body.dark #_cbhtml #divLinkTool,
[data-theme="dark"] #_cbhtml #divImageTool,
[data-theme="dark"] #_cbhtml #divLinkTool {
    background: var(--pge-ed-surface);
    border: 1px solid var(--pge-ed-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

html.dark #_cbhtml #divLinkTool button svg,
body.dark #_cbhtml #divLinkTool button svg,
[data-theme="dark"] #_cbhtml #divLinkTool button svg {
    fill: var(--pge-ed-text);
}

/* Color picker tile */
html.dark #_cbhtml .is-color-picker,
body.dark #_cbhtml .is-color-picker,
[data-theme="dark"] #_cbhtml .is-color-picker {
    background: var(--pge-ed-surface);
    border: 1px solid var(--pge-ed-border);
}

/* =========================================================================
 * 12. Tooltips internos del editor
 * ======================================================================== */

html.dark .is-tooltip,
body.dark .is-tooltip,
[data-theme="dark"] .is-tooltip {
    background: #0b0e1c;
    color: var(--pge-ed-text);
    border: 1px solid var(--pge-ed-border);
}

/* =========================================================================
 * 13. Image editor (is-browse-area, is-preview-area, imageedit)
 * ======================================================================== */

html.dark #_cbhtml .is-browse-area,
body.dark #_cbhtml .is-browse-area,
[data-theme="dark"] #_cbhtml .is-browse-area {
    background: var(--pge-ed-bg);
    border-bottom: 1px solid var(--pge-ed-border);
}

html.dark #_cbhtml .imageedit-crop button,
body.dark #_cbhtml .imageedit-crop button,
[data-theme="dark"] #_cbhtml .imageedit-crop button {
    background: var(--pge-ed-surface);
    border: 1px solid var(--pge-ed-border);
    color: var(--pge-ed-text);
}

/* =========================================================================
 * 14. Element styles / edit-table / pickgradientcolor botones is-btn-color
 * ======================================================================== */

html.dark #_cbhtml .elementstyles .is-settings button,
html.dark #_cbhtml .pickgradientcolor .is-settings button,
body.dark #_cbhtml .elementstyles .is-settings button,
body.dark #_cbhtml .pickgradientcolor .is-settings button,
[data-theme="dark"] #_cbhtml .elementstyles .is-settings button,
[data-theme="dark"] #_cbhtml .pickgradientcolor .is-settings button {
    background: var(--pge-ed-hover);
    color: var(--pge-ed-text);
}

html.dark #_cbhtml .elementstyles .is-settings button.is-btn-color,
html.dark #_cbhtml .pickgradientcolor .is-settings button.is-btn-color,
html.dark #_cbhtml .edittable button.is-btn-color,
body.dark #_cbhtml .elementstyles .is-settings button.is-btn-color,
body.dark #_cbhtml .pickgradientcolor .is-settings button.is-btn-color,
body.dark #_cbhtml .edittable button.is-btn-color,
[data-theme="dark"] #_cbhtml .elementstyles .is-settings button.is-btn-color,
[data-theme="dark"] #_cbhtml .pickgradientcolor .is-settings button.is-btn-color,
[data-theme="dark"] #_cbhtml .edittable button.is-btn-color {
    background: transparent;
    border-color: var(--pge-ed-border);
}

html.dark #_cbhtml .elementstyles .is-tabs-more a,
body.dark #_cbhtml .elementstyles .is-tabs-more a,
[data-theme="dark"] #_cbhtml .elementstyles .is-tabs-more a {
    color: var(--pge-ed-text);
}

/* =========================================================================
 * 15. Scrollbars dentro del chrome
 * ======================================================================== */

html.dark #_cbhtml ::-webkit-scrollbar,
html.dark #_cbhtml *::-webkit-scrollbar,
body.dark #_cbhtml ::-webkit-scrollbar,
body.dark #_cbhtml *::-webkit-scrollbar,
[data-theme="dark"] #_cbhtml ::-webkit-scrollbar,
[data-theme="dark"] #_cbhtml *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.dark #_cbhtml ::-webkit-scrollbar-thumb,
html.dark #_cbhtml *::-webkit-scrollbar-thumb,
body.dark #_cbhtml ::-webkit-scrollbar-thumb,
body.dark #_cbhtml *::-webkit-scrollbar-thumb,
[data-theme="dark"] #_cbhtml ::-webkit-scrollbar-thumb,
[data-theme="dark"] #_cbhtml *::-webkit-scrollbar-thumb {
    background: var(--pge-ed-scroll);
    border-radius: 5px;
}

html.dark #_cbhtml ::-webkit-scrollbar-track,
body.dark #_cbhtml ::-webkit-scrollbar-track,
[data-theme="dark"] #_cbhtml ::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================================
 * 16. Modal iframe wrappers (linkmanager/filemanager embebidos)
 *    El iframe hijo maneja su propio tema vía pgTheme; solo damos fondo oscuro
 *    al contenedor para evitar flash blanco en bordes.
 * ======================================================================== */

html.dark #_cbhtml .pg-lm-iframe-modal,
body.dark #_cbhtml .pg-lm-iframe-modal,
[data-theme="dark"] #_cbhtml .pg-lm-iframe-modal {
    background: var(--pge-ed-surface);
}

/* =========================================================================
 * 17. Outlines del lienzo (cell-active, row-active, elm-active)
 *    Ajustar para que contrasten con fondo oscuro del body admin sin romper
 *    el render del sitio publico embebido.
 * ======================================================================== */

html.dark .is-builder .elm-active,
body.dark .is-builder .elm-active,
[data-theme="dark"] .is-builder .elm-active {
    background: rgba(52, 208, 88, .08);
}

html.dark .is-builder .icon-active,
body.dark .is-builder .icon-active,
[data-theme="dark"] .is-builder .icon-active {
    background-color: rgba(52, 208, 88, .18);
}

/* =========================================================================
 * 18. Modal overlay (backdrop) — mas visible en dark
 * ======================================================================== */

html.dark #_cbhtml .is-modal,
body.dark #_cbhtml .is-modal,
[data-theme="dark"] #_cbhtml .is-modal {
    background: rgba(0, 0, 0, .55);
}