/* Editor de código adaptable a escritorio y móvil. */

#modalBackdrop:has(.cc-code-editor) {
    padding: 14px;
}


.cc-code-editor {
    width: min(97vw, 1540px);
    height: min(95dvh, 1020px);
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-rows:
        auto
        auto
        minmax(0, 1fr)
        auto
        auto;

    padding: 0;

    background: #ffffff;
    border-radius: 17px;

    overflow: hidden;

    box-shadow:
        0 28px 90px
        rgba(16, 45, 63, 0.34);
}


.cc-code-editor > * {
    min-width: 0;
}


.cc-code-editor .editor-modal-header {
    min-height: 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 14px 10px 17px;

    background: #ffffff;
    border-bottom: 1px solid var(--border);
}


.cc-code-editor .editor-title-block {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;
}


.editor-title-line {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 9px;
}


.cc-code-editor .editor-title-block h3 {
    min-width: 0;
    margin: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 15px;
}


.editor-language-badge {
    flex: 0 0 auto;

    padding: 4px 7px;

    color: #336887;
    background: #eaf5fb;
    border: 1px solid #cbe2ef;
    border-radius: 7px;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.editor-header-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--text-soft);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;

    font-size: 21px;
    cursor: pointer;
}


.editor-header-close:hover {
    color: var(--text);
    background: #eff7fc;
}


.cc-code-editor .editor-codemirror-toolbar {
    min-height: 57px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 8px 11px;

    overflow-x: auto;
    overflow-y: hidden;

    background: #f3f9fc;
    border-bottom: 1px solid var(--border);

    scrollbar-width: thin;
}


.editor-tool-group {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 5px;

    padding-right: 7px;
    margin-right: 1px;

    border-right: 1px solid var(--border);
}


.editor-tool-group:last-child {
    border-right: 0;
}


.editor-tool-button {
    min-height: 36px;
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 7px 10px;

    color: #315c76;
    background: #ffffff;
    border: 1px solid #cadee9;
    border-radius: 9px;

    font: inherit;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;

    cursor: pointer;
}


.editor-tool-button:hover {
    color: #174d70;
    background: #e8f5fc;
    border-color: #9ec7de;
}


.editor-tool-icon {
    font-size: 15px;
    line-height: 1;
}


.editor-tool-compact {
    padding-inline: 9px;
}


.cc-code-editor .editor-line-group {
    display: flex;
    align-items: center;
    gap: 4px;
}


.cc-code-editor .editor-line-group input {
    width: 76px;
    height: 36px;

    padding: 7px 8px;

    background: #ffffff;
    border: 1px solid #cadee9;
    border-radius: 9px;

    font: inherit;
    font-size: 12px;
}


.cc-code-editor .editor-codemirror-host {
    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #212121;
}


.cc-code-editor
.editor-codemirror-host
.CodeMirror {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    font-family:
        "Cascadia Code",
        "JetBrains Mono",
        "Fira Code",
        Consolas,
        monospace;

    font-size: 13px;
    line-height: 1.55;
}


.cc-code-editor
.editor-codemirror-host
.CodeMirror-scroll {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;

    overflow: auto !important;
}


.cc-code-editor .editor-statusbar {
    min-height: 34px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 6px 12px;

    overflow-x: auto;

    color: #66869a;
    background: #eff8fd;
    border-top: 1px solid #cfe3ee;

    font-size: 11px;
    white-space: nowrap;

    scrollbar-width: none;
}


.cc-code-editor
.editor-statusbar::-webkit-scrollbar {
    display: none;
}


.cc-code-editor .editor-actions {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    padding: 9px 13px;

    background: #ffffff;
    border-top: 1px solid var(--border);
}


.cc-code-editor .editor-actions .button {
    min-height: 38px;
}


@media screen and (max-width: 760px) {
    #modalBackdrop:has(.cc-code-editor) {
        align-items: stretch;
        justify-content: stretch;

        padding: 0;
    }


    .cc-code-editor {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;

        border: 0;
        border-radius: 0;

        grid-template-rows:
            auto
            auto
            minmax(0, 1fr)
            auto
            auto;
    }


    .cc-code-editor .editor-modal-header {
        min-height: 51px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px
            10px;
    }


    .cc-code-editor .editor-title-block h3 {
        font-size: 12px;
    }


    .editor-language-badge {
        display: none;
    }


    .editor-header-close {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }


    .cc-code-editor .editor-codemirror-toolbar {
        min-height: 50px;

        padding: 6px 7px;

        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }


    .editor-tool-group {
        scroll-snap-align: start;
    }


    .editor-tool-button {
        min-width: 38px;
        min-height: 37px;

        padding: 7px 9px;
    }


    .editor-tool-label {
        display: none;
    }


    .cc-code-editor .editor-line-group input {
        width: 62px;
    }


    .cc-code-editor
    .editor-codemirror-host
    .CodeMirror {
        font-size: 12px;
    }


    .cc-code-editor .editor-statusbar {
        min-height: 31px;

        gap: 9px;
        padding: 5px 8px;

        font-size: 10px;
    }


    .cc-code-editor .editor-status-secondary {
        display: none;
    }


    .cc-code-editor .editor-actions {
        min-height: 56px;

        display: grid;
        grid-template-columns:
            minmax(0, 0.75fr)
            minmax(0, 0.9fr)
            minmax(0, 1.35fr);

        gap: 6px;

        padding:
            7px
            7px
            max(7px, env(safe-area-inset-bottom));
    }


    .cc-code-editor .editor-actions .button {
        min-width: 0;
        padding-inline: 7px;

        font-size: 11px;
        white-space: nowrap;
    }
}