/*
 * Estilos CSS para controlar la visibilidad y alineación de los iconos
 * en el editor Bytemd.
 */

/* Asegura que la barra de herramientas derecha alinee sus elementos horizontalmente */
.bytemd-toolbar-right {
    display: flex; /* CRÍTICO: Asegura que los elementos hijos se alinee en una fila */
    flex-direction: row; /* Asegura explícitamente la dirección horizontal */
    align-items: center; /* Alinea los iconos verticalmente al centro de la barra */
    justify-content: flex-end; /* Alinea los iconos a la derecha del contenedor */
    /* Puedes añadir un poco de espacio entre ellos si lo necesitas */
    /* gap: 8px; */
}

/* Reglas existentes para ocultar/mostrar los iconos en fullscreen (sin cambios aquí) */
.bytemd-toolbar-right .bytemd-toolbar-icon[bytemd-tippy-path="0"],
.bytemd-toolbar-right .bytemd-toolbar-icon[bytemd-tippy-path="1"] {
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.bytemd.bytemd-fullscreen .bytemd-toolbar-right .bytemd-toolbar-icon[bytemd-tippy-path="0"],
.bytemd.bytemd-fullscreen .bytemd-toolbar-right .bytemd-toolbar-icon[bytemd-tippy-path="1"] {
    display: flex !important; /* Muestra los iconos como elementos flexbox */
    opacity: 1;
}

/* Reglas existentes para los tooltips (sin cambios aquí) */
.tippy-box[data-tippy-reference-hidden="true"][bytemd-tippy-path="0"],
.tippy-box[data-tippy-reference-hidden="true"][bytemd-tippy-path="1"] {
    visibility: hidden !important;
    pointer-events: none !important;
}

.bytemd.bytemd-fullscreen .tippy-box[bytemd-tippy-path="0"],
.bytemd.bytemd-fullscreen .tippy-box[bytemd-tippy-path="1"] {
    visibility: visible !important;
    pointer-events: auto !important;
}


/* --- NUEVO CÓDIGO CSS MINIMALISTA PARA EL RAKITIK-CONTROLS-WRAPPER --- */

/* Esta regla se aplica cuando el botón de URL es clicado */
.rakitik-controls-wrapper.rakitik-inline-block-active {
    display: inline-block !important; /* ¡Preciso según tu instrucción! */
}

/* Esta regla se aplica cuando la clase NO está presente (es decir, cuando se desactiva)
   para asegurar que el display vuelva a su estado original (probablemente flex). */
.rakitik-controls-wrapper:not(.rakitik-inline-block-active) {
    display: inline-flex !important; /* Asumiendo que el valor por defecto que quieres es 'flex' */
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Ocultar el input de URL por defecto (si es lo que quieres) */
.video-url-input {
    display: none !important;
}

/* Mostrar el input de URL cuando rakitik-controls-wrapper tiene la clase 'rakitik-inline-block-active' */
.rakitik-controls-wrapper.rakitik-inline-block-active .video-url-input {
    display: inline-block !important; /* Muestra el input de URL */
    width: 200px; /* Ejemplo, ajusta si es necesario */
    margin-right: 10px;
    vertical-align: middle;
}

/* Y si el botón de acción está dentro de textarea-field o similar */
.rakitik-controls-wrapper.rakitik-inline-block-active .editor-action-buttons {
    display: inline-block;
    vertical-align: middle;
}


/* --------------------------------------------------
   CORRECCIONES MÍNIMAS PARA LOS BOTONES DE IMAGEN Y VIDEO
   -------------------------------------------------- */

/* Quitar float problemático en Firefox */
.fus-editor-js-field-wrap .image_loader .button-icon {
    float: none !important;
}

/* Separar los botones del textarea (sin cambiar tamaños originales) */
.fus-editor-js-field-wrap .image_loader,
.textarea-field .editor-action-buttons {
    margin-top: 5px !important;
}

.video-mode-icon {
 margin-top: 0px !important;}