Index: prototipo/index.html
===================================================================
--- prototipo/index.html	(revision 307a8cce135506afa1b53a16683414f4924f27e5)
+++ prototipo/index.html	(revision 0500480bf9d3ee826bcc58cebd95f0cf8a2ba024)
@@ -106,32 +106,36 @@
             <li><a href="#" id="btn-1" class="list-group-item list-group-item-success" data-toggle="collapse" data-target="#firma_visible" >Firmar <span class="glyphicon glyphicon-chevron-down"></span></a>      
                 <ul class="nav collapse" id="firma_visible" role="menu" aria-labelledby="btn-1">
-                  <div class="col-sm-12" id="firma_visible">
-                    <li><a href="#" id="btn-1" class="list-group-item list-group-item-info" data-toggle="collapse" data-target="#pdf" >Formato PDF <span class="glyphicon glyphicon-chevron-down"></span></a>
-
+                  <div class="col-md-12 col-width " id="firma_visible">
+                    <li><a href="#" id="btn-2" class="list-group-item list-group-item-info" data-toggle="collapse" data-target="#pdf" >Formato PDF <span class="glyphicon glyphicon-chevron-down"></span></a>
                     </li> 
                         <ul class="nav collapse" id="pdf" role="menu" aria-labelledby="btn-1">
-                          <div class="col-sm-12" id="pdf">
-                            <li><a href="#" id="btn-1" class="list-group-item list-group-item-link" data-toggle="collapse" data-target="#Formato_Visible" >Firma Visible <span class="glyphicon glyphicon-chevron-down"></span></a>
+                          <div class="col-sm-12 col-width" id="pdf">
+                            <li><a href="#" id="firm_v" class="list-group-item list-group-item-link" data-toggle="collapse" data-target="#Formato_Visible" >Firma Visible <span class="glyphicon glyphicon-chevron-down"></span></a>
                             </li> 
-                              <ul class="nav collapse" id="Formato_Visible" role="menu" aria-labelledby="btn-1">
-                                  <div class="col-sm-4" id="Formato_Visible">
+                             <ul class="nav collapse" id="Formato_Visible" role="menu" aria-labelledby="btn-1">
+                                  <div class="btn-group" id="Formato_Visible">
                                      <button type="button" id="upload-button2" class="btn btn-success btn-sm">
-                                        <span class="glyphicon glyphicon-open"></span>Cargar
+                                        <span class="glyphicon glyphicon-folder-open"></span> Cargar
                                      </button>
-                                      <input type="file" id="file-to-upload2" accept="application/pdf" />
-                                      <div class="text imagen" id="texto"></div>
+                                     <button type="button" id="firmar-documento"  class="btn btn-info btn-sm buttons-plantilla">
+                                        <span class="glyphicon glyphicon-ok"></span> Firmar
+                                     </button>
+                                     <input type="file" id="file-to-upload2" accept="application/pdf" />
                                   </div>
+                                  <div class="text imagen" id="texto"></div>
                               </ul>                            
-                            <li><a href="#" id="btn-1" class="list-group-item list-group-item-link" data-toggle="collapse" data-target="#Formato_Normal">Firma No visible <span class="glyphicon glyphicon-chevron-down"></span></a>
-                              <ul class="nav collapse" id="Formato_Normal" role="menu" aria-labelledby="btn-1">
-                                  <div class="col-sm-4" id="Formato_Normal">
-                                     <button type="button" id="upload-Normal" class="btn btn-success btn-sm">
-                                        <span class="glyphicon glyphicon-open"></span>Cargar
-                                     </button>
-                                      <input type="file" id="file-to-normal" accept="application/pdf" />
-
-                                  </div>
-                              </ul>                            
-                            </li>                    
+                              <li><a href="#" id="firm_no_v" class="list-group-item list-group-item-link" data-toggle="collapse" data-target="#Formato_Normal">Firma No visible <span class="glyphicon glyphicon-chevron-down"></span></a>
+                                <ul class="nav collapse" id="Formato_Normal" role="menu" aria-labelledby="btn-1">
+                                    <div class="btn-group" id="Formato_Normal">
+                                       <button type="button" id="upload-Normal" class="btn btn-success btn-sm">
+                                          <span class="glyphicon glyphicon-folder-open"></span> Cargar
+                                       </button>
+                                       <button type="button" id="firmar-doc-noVisible"  class="btn btn-info btn-sm buttons-plantilla">
+                                          <span class="glyphicon glyphicon-ok"></span> Firmar
+                                       </button>
+                                        <input type="file" id="file-to-normal" accept="application/pdf" />
+                                    </div>
+                                </ul>                            
+                              </li>                    
                           </div>
                         </ul>
@@ -164,4 +168,5 @@
       </div>
 
+       <!--
         <h3>Parámetros</h3>
 
@@ -195,5 +200,5 @@
             </div>
         </div>
-
+        -->
       </div><!-- End Right Column -->
 
@@ -202,9 +207,9 @@
       <div class="col-sm-8">
      
-        <div class="well">
+        <div class="well cuerpo" >
           <div id="pdf-main-container"><center>Firma Visible</center> 
             <div id="pdf-loader2">Cargando documento ...</div>
             <div id="pdf-contents2">
-              <div id="pdf-meta">
+              <div id="pdf-meta2">
                 <div id="pdf-buttons2">
                   <button type="button" id="pdf-prev2" class="btn btn-default btn-sm">
@@ -287,4 +292,9 @@
   <script src="static/js/docsDraggable.js"></script>
   <script src="static/js/docFirmaNormal.js"></script>
+  <script src="static/js/menu.js"></script>
+  <script src="static/js/functions/DraggableSortable.js"></script>
+
+
+  
 </body>
 </html>
Index: prototipo/static/css/style.css
===================================================================
--- prototipo/static/css/style.css	(revision e3349ca5d808e4692974ebc92855a42d7ce7bbbd)
+++ prototipo/static/css/style.css	(revision 0500480bf9d3ee826bcc58cebd95f0cf8a2ba024)
@@ -1,2 +1,42 @@
+/* Class */
+.buttons-plantilla {
+  width: 150px;
+  display: block;
+  margin: 20px auto;
+  margin-left: 5px;
+  border-radius: 20px;  
+}
+
+.text {
+  border-radius: 0px;
+  color: rgba(255, 255, 255, .5);
+  display: inline-block;
+  font: bold 40px/100px Arial;
+  height: 80px;
+  width: 130px;
+  border: 1px solid #eee;
+  z-index: 2;
+  margin-bottom: 4px;
+  display: none; 
+  
+}
+
+.cuerpo {
+  background-color: rgba(40, 144, 127, 0.13);
+}
+
+.imagen { 
+  background-size: cover;
+  background-image: url('../img/backgroung-header.png') ;
+  height: 40px;
+  width: 100px;
+ }
+
+.col-width {
+  width: 104%;
+}
+
+
+/* id */
 #upload-button, #upload-button2, #upload-Normal {
   width: 150px;
@@ -6,4 +46,11 @@
   border-radius: 20px;  
 }
+
+#firmar-documento, #firmar-doc-noVisible {
+  margin-left: 5px;
+  border-radius: 20px; 
+  display: none; 
+}
+
 
 #file-to-upload, #file-to-upload2, #file-to-normal{
@@ -26,9 +73,9 @@
 }
 
-#pdf-contents, #pdf-contents2 {
+#pdf-contents, #pdf-contents2, #pdf-contents3 {
   display: none;
 }
 
-#pdf-meta #pdf-meta3 {
+#pdf-meta, #pdf-meta3 {
   overflow: hidden;
   margin: 0 0 20px 0;
@@ -51,5 +98,5 @@
 }
 
-#pdf-canvas, #pdf-canvas2 #pdf-canvas3 {
+#pdf-canvas, #pdf-canvas2, #pdf-canvas3 {
   border: 1px solid rgba(0,0,0,0.2);
   box-sizing: border-box;
@@ -97,24 +144,4 @@
 }
 
-.text {
-  border-radius: 0px;
-  color: rgba(255, 255, 255, .5);
-  display: inline-block;
-  font: bold 40px/100px Arial;
-  height: 80px;
-  width: 130px;
-  border: 1px solid #eee;
-  z-index: 2;
-  
-}
-
-
-.imagen { 
-  background-size: cover;
-  background-image: url('../img/backgroung-header.png') ;
-  height: 40px;
-  width: 100px;
- }
-
 
 #pdf-prev2, #pdf-prev3 { 
@@ -148,5 +175,4 @@
 
 
-
 /*.menu_lateral {
     position: fixed;
Index: prototipo/static/js/docFirmaNormal.js
===================================================================
--- prototipo/static/js/docFirmaNormal.js	(revision e3349ca5d808e4692974ebc92855a42d7ce7bbbd)
+++ prototipo/static/js/docFirmaNormal.js	(revision 0500480bf9d3ee826bcc58cebd95f0cf8a2ba024)
@@ -7,5 +7,6 @@
   __CANVAS_CTX = __CANVAS.getContext('2d'),
   __idd = "",
-  __NUMBER = 0;
+  __NUMBER = 0,
+  __CLICKK = 0;
 
  $("#pdf-canvas3").hide();
@@ -116,4 +117,5 @@
 
   $("#file-to-normal").trigger('click');
+
 });
 
@@ -127,7 +129,9 @@
     }
 
+    showPDF3(URL.createObjectURL($("#file-to-normal").get(0).files[0]));
 
-
-  showPDF3(URL.createObjectURL($("#file-to-normal").get(0).files[0]));
-
+    if (__CLICKK == 0){
+        $('#firmar-doc-noVisible').show();
+        __CLICKK += 1;
+    }
 });
Index: prototipo/static/js/docsDraggable.js
===================================================================
--- prototipo/static/js/docsDraggable.js	(revision e3349ca5d808e4692974ebc92855a42d7ce7bbbd)
+++ prototipo/static/js/docsDraggable.js	(revision 0500480bf9d3ee826bcc58cebd95f0cf8a2ba024)
@@ -8,5 +8,6 @@
   __CANVAS_CTX = __CANVAS.getContext('2d'),
   __id = "",
-  __NUMBER = 0;
+  __NUMBER = 0,
+  __CLICK = 0;
 
  $("#pdf-canvas2").hide();
@@ -87,6 +88,5 @@
 
       $("#container1").attr("style", "background-image: url('"+__id+"');background-size: cover; background-repeat: no-repeat;  height:"+viewdimen.height+"px; width:"+viewdimen.width+"px");      
-      $("#container1").attr("style", "background-image: url('"+__id+"');background-size: cover; background-repeat: no-repeat;  height:"+(viewdimen.height)+"px; width:"+(viewdimen.width)+"px");
-      
+
 
     });
@@ -118,7 +118,12 @@
     }
 
-
   // Send the object url of the pdf
   showPDF2(URL.createObjectURL($("#file-to-upload2").get(0).files[0]));
+
+  if (__CLICK == 0){
+      $('#firmar-documento').attr("disabled","disabled").show();
+      $('#texto').show();
+      __CLICK += 1;
+  }
 
 });
@@ -141,76 +146,2 @@
 
 
-var transferred = false;
-$('.text').draggable({
-    connectToSortable: $('#container1'),
-    helper: 'clone',
-    start: function(event, ui)
-    {
-        $(this).hide();
-    },
-    stop: function(event, ui)
-    {
-
-        if(!transferred) {
-            $(this).show();
-        }
-        else{ 
-        
-            $(this).remove();
-            transferred = false;
-        }
-    }
-});
-
-
-function InicializarObjectoPositicion(){
-  var container = document.getElementById('container1'),
-    element = document.getElementsByClassName('text')[0];
-  
-  // options
-  var options = {
-    limit: container,
-    setCursor: true
-  };
-
-  // initialize drag
-  new Draggable(element, options); 
-
-}
-
-
-function NuevoObjectoInicial(){
-
-  var num = 0;
-  $( ".text" ).draggable({ 
-    containment: '#container1',
-    scroll: false,
-    stop: function(event, ui)
-      {
-       
-        num+= 1;
-        if (num == 1){
-          $("#firma_visible #Formato_Visible .text").hide();
-          $('#dataX').val(0);
-          $('#dataY').val(0);
-        }else{
-          $('#dataX').val(ui.position['left']);
-          $('#dataY').val(ui.position['top']);
-        }
-        
-      },
-    
-  });
-}
-
-$('#container1').sortable({
-    receive: function(event, ui)
-    { 
-        
-        transferred = true;
-        InicializarObjectoPositicion()
-        NuevoObjectoInicial();
-
-       
-    }
-});
Index: prototipo/static/js/functions/DraggableSortable.js
===================================================================
--- prototipo/static/js/functions/DraggableSortable.js	(revision 0500480bf9d3ee826bcc58cebd95f0cf8a2ba024)
+++ prototipo/static/js/functions/DraggableSortable.js	(revision 0500480bf9d3ee826bcc58cebd95f0cf8a2ba024)
@@ -0,0 +1,75 @@
+
+function InicializarObjectoPositicion(){
+  var container = document.getElementById('container1'),
+    element = document.getElementsByClassName('text')[0];
+  
+  // options
+  var options = {
+    limit: container,
+    setCursor: true
+  };
+
+  // initialize drag
+  new Draggable(element, options); 
+
+}
+
+
+function NuevoObjectoInicial(){
+
+  var num = 0;
+  $( ".text" ).draggable({ 
+    containment: '#container1',
+    scroll: false,
+    stop: function(event, ui)
+      {
+       
+        num+= 1;
+        if (num == 1){
+          $("#firma_visible #Formato_Visible .text").hide();
+          $('#dataX').val(0);
+          $('#dataY').val(0);
+        }else{
+          $('#dataX').val(ui.position['left']);
+          $('#dataY').val(ui.position['top']);
+        }
+        
+      },
+    
+  });
+}
+
+
+var transferred = false;
+$('.text').draggable({
+    connectToSortable: "div#container1",
+    helper: 'clone',
+    start: function(event, ui)
+    {
+        $(this).hide();
+    },
+    stop: function(event, ui)
+    {
+
+        if(!transferred) {
+            $(this).show();
+        }
+        else{ 
+        
+            $(this).remove();
+            transferred = false;
+        }
+    }
+});
+
+
+$('div#container1').sortable({
+    connectWith: "div#container1",
+    receive: function(event, ui)
+    { 
+        transferred = true;
+        $("#firmar-documento").removeAttr('disabled');
+        InicializarObjectoPositicion()
+        NuevoObjectoInicial();      
+    }
+});
Index: prototipo/static/js/menu.js
===================================================================
--- prototipo/static/js/menu.js	(revision 0500480bf9d3ee826bcc58cebd95f0cf8a2ba024)
+++ prototipo/static/js/menu.js	(revision 0500480bf9d3ee826bcc58cebd95f0cf8a2ba024)
@@ -0,0 +1,16 @@
+
+$("li #firm_v").on('click', function() {
+	$("li #firm_no_v").attr("class","list-group-item list-group-item-link collapsed");
+	$("li #firm_no_v").attr("aria-expanded","false");
+	$("ul#Formato_Normal").attr("class","nav collapse").attr("aria-expanded","false").attr("style","height: 0px;");
+	$("#pdf-main-container2").hide(); 
+	$("#pdf-main-container").show(); 	
+});
+
+$("li #firm_no_v").on('click', function() {
+	$("li #firm_v").attr("class","list-group-item list-group-item-link collapsed");
+	$("li #firm_v").attr("aria-expanded","false");
+	$("ul#Formato_Visible").attr("class","nav collapse").attr("aria-expanded","false").attr("style","height: 0px;");
+	$("#pdf-main-container").hide(); 
+	$("#pdf-main-container2").show(); 	
+});
