/* =========================================================
   EMAIL TEMPLATE EDITOR
   ========================================================= */

.email-template-editor-container {
    width: 100%;
    display: block;
    position: relative;
}


    /* =========================================================
   QUILL EDITOR
   ========================================================= */

    .email-template-editor-container .ql-toolbar {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #d0d5dd;
        border-radius: 6px 6px 0 0;
        padding: 8px;
        position: relative;
        z-index: 10;
    }


        /* =========================================================
   GRUPOS DEL TOOLBAR
   ========================================================= */

        .email-template-editor-container .ql-toolbar .ql-formats {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }


        /* =========================================================
   BOTONES
   ========================================================= */

        .email-template-editor-container .ql-toolbar button {
            display: inline-flex !important;
            width: 28px;
            height: 28px;
            align-items: center;
            justify-content: center;
            padding: 3px;
            background: transparent;
            border: none;
            cursor: pointer;
        }


            /* =========================================================
   ICONOS DE QUILL
   ========================================================= */

            .email-template-editor-container .ql-toolbar button svg {
                display: block !important;
                width: 18px;
                height: 18px;
            }


            /* =========================================================
   BOTONES ACTIVOS
   ========================================================= */

            .email-template-editor-container .ql-toolbar button:hover,
            .email-template-editor-container .ql-toolbar button.ql-active {
                color: #594ae2;
                background: #f1efff;
                border-radius: 4px;
            }


        /* =========================================================
   SELECTORES QUILL
   ========================================================= */

        .email-template-editor-container .ql-toolbar .ql-picker {
            display: inline-block !important;
            vertical-align: middle;
        }


        .email-template-editor-container .ql-toolbar .ql-picker-label {
            display: inline-flex !important;
            align-items: center;
            min-height: 28px;
            padding: 3px 6px;
            cursor: pointer;
        }


            .email-template-editor-container .ql-toolbar .ql-picker-label:hover {
                color: #594ae2;
            }


        /* =========================================================
   DROPDOWN DE QUILL
   ========================================================= */

        .email-template-editor-container .ql-toolbar .ql-picker-options {
            z-index: 9999 !important;
            background: #ffffff;
            border: 1px solid #d0d5dd;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border-radius: 4px;
        }


        /* =========================================================
   ITEMS DROPDOWN
   ========================================================= */

        .email-template-editor-container .ql-toolbar .ql-picker-item {
            cursor: pointer;
        }


            .email-template-editor-container .ql-toolbar .ql-picker-item:hover {
                color: #594ae2;
            }


    /* =========================================================
   CONTENEDOR DE EDICIÓN
   ========================================================= */

    .email-template-editor-container .ql-container {
        display: block !important;
        width: 100%;
        border: 1px solid #d0d5dd;
        border-top: 0;
        border-radius: 0 0 6px 6px;
        background: #ffffff;
        box-sizing: border-box;
    }


    /* =========================================================
   ÁREA DE EDICIÓN
   ========================================================= */

    .email-template-editor-container .ql-editor {
        display: block !important;
        min-height: 500px;
        padding: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        line-height: 1.6;
        color: #1f2937;
        background: #ffffff;
        box-sizing: border-box;
    }


        /* =========================================================
   PLACEHOLDER
   ========================================================= */

        .email-template-editor-container .ql-editor.ql-blank::before {
            color: #98a2b3;
            font-style: normal;
        }


        /* =========================================================
   BOLD
   ========================================================= */

        .email-template-editor-container .ql-editor strong,
        .email-template-editor-container .ql-editor b {
            font-weight: 700;
        }


        /* =========================================================
   LINKS
   ========================================================= */

        .email-template-editor-container .ql-editor a {
            color: #594ae2;
            text-decoration: underline;
        }


        /* =========================================================
   HEADERS
   ========================================================= */

        .email-template-editor-container .ql-editor h1 {
            font-size: 2em;
            font-weight: 700;
        }


        .email-template-editor-container .ql-editor h2 {
            font-size: 1.5em;
            font-weight: 700;
        }


        .email-template-editor-container .ql-editor h3 {
            font-size: 1.17em;
            font-weight: 700;
        }


        /* =========================================================
   LISTAS
   ========================================================= */

        .email-template-editor-container .ql-editor ol,
        .email-template-editor-container .ql-editor ul {
            padding-left: 1.5em;
        }


        /* =========================================================
   BLOCKQUOTE
   ========================================================= */

        .email-template-editor-container .ql-editor blockquote {
            border-left: 4px solid #594ae2;
            margin: 10px 0;
            padding-left: 15px;
            color: #667085;
        }


        /* =========================================================
   IMÁGENES
   ========================================================= */

        .email-template-editor-container .ql-editor img {
            max-width: 100%;
            height: auto;
        }


    /* =========================================================
   FOCUS
   ========================================================= */

    .email-template-editor-container .ql-toolbar:focus-within {
        border-color: #594ae2;
    }


    .email-template-editor-container .ql-container:focus-within {
        border-color: #594ae2;
    }


    /* =========================================================
   TOOLBAR SIEMPRE VISIBLE
   ========================================================= */

    .email-template-editor-container .ql-toolbar,
    .email-template-editor-container .ql-toolbar * {
        visibility: visible !important;
    }


/* =========================================================
   CORREGIR OVERFLOW DE MUD PAPER / CONTENEDORES
   ========================================================= */

.email-template-editor-container {
    overflow: visible !important;
}


    .email-template-editor-container .ql-toolbar {
        overflow: visible !important;
    }


    .email-template-editor-container .ql-picker-options {
        overflow: visible !important;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .email-template-editor-container .ql-toolbar {
        padding: 6px;
    }

        .email-template-editor-container .ql-toolbar .ql-formats {
            margin-right: 4px;
            margin-bottom: 4px;
        }

    .email-template-editor-container .ql-editor {
        min-height: 400px;
        padding: 15px;
    }
}