﻿.editor {
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

.element {
    position: absolute;
    padding: 1px;
    cursor: move;
    background-color: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.rectangulo {
    position: absolute;
    border: 2px solid #000;
    background-color: transparent;
    cursor: move;
    width: 200px;
    height: 150px;
    box-sizing: border-box;
    overflow: hidden;
}

.sidebar {
    top: 10px;
    right: 10px;
    width: 250px;
    height: 580px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f8f8f8;
}

input[type="number"], select, input[type="color"], input[type="text"] {
    width: 100%;
    margin-bottom: 5px;
}

.bold, .italic, .underline {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #ccc;
    margin-right: 5px;
}

    .bold.active, .italic.active, .underline.active {
        background-color: #ddd;
    }

.line {
    position: absolute;
    background-color: blue;
    height: 2px; /* Grosor de la línea */
    transform-origin: left center;
    cursor: pointer;
}

.selectable-rectangle {
    width: 200px;
    height: 100px;
    margin: 10px;
    background-color: #f0f0f0;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    line-height: 100px;
}

.selected {
    /*stroke: orange; /* Cambiar color de línea seleccionada */
}

.bluebutton 
{border: 1px solid #ccc; background: #003180; color: #fff; padding: 3px 6px; border-radius: 5px;}
.grybutton 
{border: 1px solid #ccc; background: #dfdfdf; color: #fff; padding: 3px 6px; border-radius: 5px;}
.celestebutton 
{border: 1px solid #ccc; background: #2a7afb; color: #fff; padding: 3px 6px; border-radius: 5px;margin: 2px 0px;}

.imageurl {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;    
             border: 1px solid #dfdfdf;
               background-color: rgba(255, 255, 255, 0.8);
            cursor: move;
            resize: both;
            object-fit: contain;
        }


        

        .imageurl img {
            max-width:100%;
            max-height:100%;
            width: auto;
            height: auto;
            object-fit: contain;
        }