.elementor-14204 .elementor-element.elementor-element-2570f75{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--padding-top:50px;--padding-bottom:92px;--padding-left:50px;--padding-right:50px;}.elementor-14204 .elementor-element.elementor-element-2570f75:not(.elementor-motion-effects-element-type-background), .elementor-14204 .elementor-element.elementor-element-2570f75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://staging.haciendoescuela.com/wp-content/uploads/2022/10/AprendeAProgramar_nuevoF.svg");background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-14204 .elementor-element.elementor-element-b23eda6 > .elementor-widget-container{padding:188px 0px 27px 0px;}.elementor-14204 .elementor-element.elementor-element-b23eda6 .elementor-heading-title{font-family:"Fredoka", Sans-serif;font-size:46px;font-weight:600;color:var( --e-global-color-9128909 );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-14204 .elementor-element.elementor-element-455979f{width:var( --container-widget-width, 78% );max-width:78%;--container-widget-width:78%;--container-widget-flex-grow:0;text-align:center;font-family:"Fredoka", Sans-serif;font-size:20px;font-weight:400;color:var( --e-global-color-primary );}.elementor-14204 .elementor-element.elementor-element-455979f > .elementor-widget-container{padding:7px 0px 0px 0px;}.elementor-14204 .elementor-element.elementor-element-3013bdb > .elementor-widget-container{padding:0px 0px 70px 0px;}.elementor-14204 .elementor-element.elementor-element-3013bdb .elementor-heading-title{font-family:"Fredoka", Sans-serif;font-weight:600;}.elementor-14204 .elementor-element.elementor-element-072f313{width:100%;max-width:100%;}.elementor-14204 .elementor-element.elementor-element-072f313.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder__label{text-align:center;font-size:20px;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder__desc{text-align:center;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder__fields-group{gap:0.7em 0.7em;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder__field-wrap.checkradio-wrap span{gap:8px;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder__field:not(.checkradio-field):not(.range-field):not(.jet-form-builder-repeater):not(.wysiwyg-field):not([role="switch"]){max-width:477px;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder input{color-scheme:normal;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder-repeater__row-remove{align-self:flex-start;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder__action-button{transition:all 0.3s;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder__next-page-wrap{text-align:left;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder-message--success{text-align:center;}.elementor-14204 .elementor-element.elementor-element-072f313 .jet-form-builder-message--error{text-align:center;}.elementor-14204 .elementor-element.elementor-element-f072b68{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-14204 .elementor-element.elementor-element-2570f75{--content-width:938px;}}@media(max-width:1366px){.elementor-14204 .elementor-element.elementor-element-2570f75{--padding-top:030px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}}@media(max-width:1200px){.elementor-14204 .elementor-element.elementor-element-072f313{width:var( --container-widget-width, 502px );max-width:502px;--container-widget-width:502px;--container-widget-flex-grow:0;}}@media(max-width:1024px){.elementor-14204 .elementor-element.elementor-element-2570f75{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:99px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-14204 .elementor-element.elementor-element-2570f75:not(.elementor-motion-effects-element-type-background), .elementor-14204 .elementor-element.elementor-element-2570f75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:12% -370px;background-size:cover;}.elementor-14204 .elementor-element.elementor-element-2570f75{--padding-top:30px;--padding-bottom:47px;--padding-left:25px;--padding-right:25px;}.elementor-14204 .elementor-element.elementor-element-b23eda6 > .elementor-widget-container{padding:10px 0px 28px 0px;}.elementor-14204 .elementor-element.elementor-element-455979f{width:100%;max-width:100%;text-align:start;}}/* Start custom CSS for html, class: .elementor-element-6c15b41 */<style>
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f8ff;
        }

        canvas {
            background-color: #ffffff; /* Fondo blanco para el canvas */
            border: 2px solid #000;
            margin-top: 20px;
            transition: all 0.3s ease;
            touch-action: none; /* Evita el comportamiento de desplazamiento del canvas */
        }

        .controls {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .color-button, .eraser-button {
            width: 30px;
            height: 30px;
            margin: 5px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }

        .clear-button, .download-button, .undo-button, .redo-button {
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
            margin: 5px;
            background-color: #B9CD32;
            color: white;
            border: none;
            border-radius: 5px;
        }

        .clear-button:hover, .download-button:hover, .undo-button:hover, .redo-button:hover {
            background-color: #a8b632;
        }

        /* Estilos para dispositivos móviles */
        @media (max-width: 768px) {
            canvas {
                width: 100%;  /* Canvas se ajusta al 100% del ancho */
                height: 60vh; /* Canvas tiene un alto responsivo */
                margin-top: 20px;
            }
        }

        /* Estilos para escritorio */
        @media (min-width: 769px) {
            canvas {
                width: 800px; /* Canvas con un tamaño fijo en escritorio */
                height: 400px;
            }
        }

        /* Aseguramos que los botones de control estén en una línea separada de los colores */
        .button-container {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
    <\/style>/* End custom CSS */