/* Ocultar controles de edición por defecto */
.subir, #add-image-form, .admin-feature, .navbar-color-picker, .btn-edit, .admin-controls-wrapper {
    display: none !important;
}

/* Mostrar controles cuando el modo de edición está activo */
body.admin-edit-mode .subir {
    display: flex !important;
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
    z-index: 10;
    pointer-events: auto !important;
    opacity: 1 !important;
}

body.admin-edit-mode .btn-edit-trigger {
    display: none !important;
}

body.admin-edit-mode .edit-options {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

body.admin-edit-mode .interactuar {
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

body.admin-edit-mode #add-image-form,
body.admin-edit-mode .admin-controls-wrapper {
    display: flex !important;
}

body.admin-edit-mode .admin-feature {
    display: flex !important;
}

body.admin-edit-mode .navbar-color-picker {
    display: flex !important;
}

body.admin-edit-mode .btn-edit {
    display: flex !important;
}

/* Ocultar el botón de reordenar cuando el modo admin está activo */
body.admin-edit-mode #toggle-reorder {
    display: none !important;
}

/* Estilos para el modo reordenar */
body.reorder-mode .imagenes {
    cursor: move;
    outline: 2px dashed var(--primary-color);
}

/* Ocultar botones de edición y añadir mientras se reordena para evitar estorbos */
body.reorder-mode .subir, body.reorder-mode #add-image-form {
    display: none !important;
}

/* Deshabilitar el arrastre nativo de imágenes y enlaces para mejorar el swipe */
img, a {
    -webkit-user-drag: none;
    user-select: none;
}

.modal {
    padding: 0 !important;
}

#modal-body iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

#modal-body img, #modal-body video, #modal-body iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Ocultar controles del modal por defecto y mostrarlos al pasar el cursor */
.prev, .next, .close {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.close:hover {
    opacity: 1;
}

.prev:hover, .next:hover {
    animation: fadeOutNav 1s forwards;
}