/* =========================================================
   VISITA TERUEL - EDITOR ENRIQUECIDO V2
   ========================================================= */


/* ---------------------------------------------------------
   Panel de imagen seleccionada
   --------------------------------------------------------- */

.rich-editor-v2-image-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;

    border-bottom: 1px solid #dfe6e2;

    background: #eef5f1;
}

.rich-editor-v2-image-tools[hidden] {
    display: none;
}

.rich-editor-v2-image-tools-title {
    display: flex;
    flex-direction: column;

    margin-right: auto;
}

.rich-editor-v2-image-tools-title span {
    margin-top: 2px;

    color: #68736d;
    font-size: 0.75rem;
}

.rich-editor-v2-tool-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rich-editor-v2-tool-group > strong {
    margin-right: 4px;

    font-size: 0.76rem;
}

.rich-editor-v2-tool-group button,
.rich-editor-v2-delete {
    padding: 6px 9px;

    border: 1px solid #ccd8d1;
    border-radius: 7px;

    background: #ffffff;

    font: inherit;
    font-size: 0.75rem;

    cursor: pointer;
}

.rich-editor-v2-tool-group button:hover {
    background: #e6efe9;
}

.rich-editor-v2-delete {
    border-color: #dfcaca;
    color: #8b3636;
}


/* ---------------------------------------------------------
   Contenido
   --------------------------------------------------------- */

.rich-editor-v2-content {
    min-height: 380px;

    overflow: visible;
}

.rich-editor-v2-content p {
    min-height: 1em;
}


/* ---------------------------------------------------------
   Figura
   --------------------------------------------------------- */

.rich-editor-v2-content .rich-image,
.route-detail-description .rich-image {
    box-sizing: border-box;

    position: relative;

    height: auto;

    padding: 0;

    background: transparent;
}

.rich-editor-v2-content .rich-image img,
.route-detail-description .rich-image img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;

    border-radius: 10px;

    background: transparent;
}


/* ---------------------------------------------------------
   Tamaños
   --------------------------------------------------------- */

.rich-editor-v2-content .rich-image-small,
.route-detail-description .rich-image-small {
    width: 220px;
    max-width: 100%;
}

.rich-editor-v2-content .rich-image-medium,
.route-detail-description .rich-image-medium {
    width: 420px;
    max-width: 100%;
}

.rich-editor-v2-content .rich-image-large,
.route-detail-description .rich-image-large {
    width: 100%;
    max-width: 100%;
}


/* ---------------------------------------------------------
   Centro
   --------------------------------------------------------- */

.rich-editor-v2-content .rich-image-center,
.route-detail-description .rich-image-center {
    float: none;
    clear: both;

    margin:
        26px
        auto;
}


/* ---------------------------------------------------------
   Izquierda
   --------------------------------------------------------- */

.rich-editor-v2-content .rich-image-left,
.route-detail-description .rich-image-left {
    float: left;
    clear: none;

    margin:
        5px
        24px
        16px
        0;
}


/* ---------------------------------------------------------
   Derecha
   --------------------------------------------------------- */

.rich-editor-v2-content .rich-image-right,
.route-detail-description .rich-image-right {
    float: right;
    clear: none;

    margin:
        5px
        0
        16px
        24px;
}


/* ---------------------------------------------------------
   Cuando MEDIANA está flotando, evitamos que ocupe
   demasiado ancho y estrangule el texto.
   --------------------------------------------------------- */

.rich-editor-v2-content
.rich-image-medium.rich-image-left,
.rich-editor-v2-content
.rich-image-medium.rich-image-right,
.route-detail-description
.rich-image-medium.rich-image-left,
.route-detail-description
.rich-image-medium.rich-image-right {
    width: 320px;
}


/* ---------------------------------------------------------
   Imagen seleccionada dentro del administrador
   --------------------------------------------------------- */

.rich-editor-v2-content
.rich-image.is-selected {
    outline: 3px solid #608b75;
    outline-offset: 4px;

    cursor: move;
}


/* ---------------------------------------------------------
   Arrastre
   --------------------------------------------------------- */

.rich-editor-v2-content
.v2-drop-before {
    border-top:
        3px solid #3f7258;
}

.rich-editor-v2-content
.v2-drop-after {
    border-bottom:
        3px solid #3f7258;
}


/* ---------------------------------------------------------
   Limpiar floats solamente al FINAL del contenido.
   Así los párrafos sí pueden rodear las fotografías.
   --------------------------------------------------------- */

.rich-editor-v2-content::after,
.route-detail-description::after {
    content: "";

    display: table;
    clear: both;
}


/* ---------------------------------------------------------
   Biblioteca
   --------------------------------------------------------- */

.rich-editor-v2-library
.rich-editor-media-header > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rich-editor-v2-library
.rich-editor-media-header small {
    color: #69746f;
}


/* ---------------------------------------------------------
   Móvil
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .rich-editor-v2-content
    .rich-image,

    .route-detail-description
    .rich-image {

        float: none;
        clear: both;

        width: auto;
        max-width: 100%;

        margin:
            22px
            auto;
    }


    .rich-editor-v2-content
    .rich-image-small img,

    .route-detail-description
    .rich-image-small img {
        max-width: 240px;

        margin: 0 auto;
    }


    .rich-editor-v2-content
    .rich-image-medium img,

    .route-detail-description
    .rich-image-medium img {
        max-width: 420px;

        margin: 0 auto;
    }


    .rich-editor-v2-image-tools {
        align-items: flex-start;
        flex-direction: column;
    }


    .rich-editor-v2-tool-group {
        flex-wrap: wrap;
    }

}