diff --git a/layouts/default.vue b/layouts/default.vue
index 7fcb73d..c231b1b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,7 +3,7 @@
     <Header />
     <Logout />
     <nuxt />
-    <Footer />
+   <!--  <Footer /> -->
   </div>
 </template>
 
diff --git a/pages/responsable/nuevo/index.vue b/pages/responsable/nuevo/index.vue
index 6291bb9..2829993 100644
--- a/pages/responsable/nuevo/index.vue
+++ b/pages/responsable/nuevo/index.vue
@@ -25,7 +25,7 @@
       </section>
 
       <section>
-        <h1 class="title is-1">
+        <h1 class="title is-1 my-6">
           Añadir Servicio Social
         </h1>
 
@@ -33,26 +33,34 @@
           <div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
             <div class="column is-full-mobile is-three-quarters-tablet is-two-thirds-desktop is-two-thirds-widescreen is-half-fullhd">
 
-              <b-field class=""  >
-                      <b-input autocomplete="off" v-model="alumno.cuenta" name="usrtel" message="Solo numeros " required="required" pattern="^[0-9]{3,45}$" maxlength="9" type="tel" placeholder="Cuenta"></b-input>
-                  <p class="control">
-                      <b-button class="button is-info" @click="buscar(alumno.cuenta)">Buscar</b-button>
-                  </p>
+              <b-field class="columns">
+                      <input
+                      class="input column is-two-thirds"
+                      v-model="noCuenta"
+                      message="Solo numeros"
+                      required="required"
+                      maxlength="9" type="number"
+                      placeholder="Cuenta"
+                      min="0"></input>
+
+                      <p class="control">
+                        <b-button class="button is-info" @click="buscar(alumno.cuenta)">Buscar</b-button>
+                      </p>
               </b-field>
 
-              <b-field class=" " label="Nombre" >
+              <b-field  label="Nombre" >
                   <b-input :value="alumno.nombre" disabled></b-input>
               </b-field>
 
-              <b-field class=" " label="Carrera" >
+              <b-field  label="Carrera" >
                   <b-input :value="alumno.carrera"  disabled></b-input>
               </b-field>
 
-              <b-field class="" label="Creditos" >
+              <b-field label="Creditos" >
                   <b-input :value="alumno.creditos" disabled></b-input>
               </b-field>
 
-              <b-field class="" label="Seleccione programa">
+              <b-field label="Seleccione programa">
                   <b-select placeholder="dependencias"  expanded v-model="programaSelected.id" @change="programaSe()">
                      <option
                     v-for="programa in programas"
@@ -64,19 +72,19 @@
                   </b-select>
               </b-field>
 
-              <b-field class="" label="Institucion">
+              <b-field label="Institucion">
                   <b-input :value="programaSelected.institucion"  disabled></b-input>
               </b-field>
 
-              <b-field class="" label="Dependencia" >
-                  <b-input :value="Dependencia()" disabled></b-input>
+              <b-field label="Dependencia" >
+                  <b-input :value="programaSelected.dependencia" disabled></b-input>
               </b-field>
 
-              <b-field class="" label="Clave del programa" >
-                  <b-input :value="Institucion()" disabled></b-input>
+              <b-field label="Clave del programa" >
+                  <b-input :value="programaSelected.clave" disabled></b-input>
               </b-field>
 
-              <b-field class="" label="fecha de inicio">
+              <b-field label="fecha de inicio">
                   <b-datepicker
                       ref="datepicker1"
                       expanded
@@ -92,7 +100,7 @@
                       />
               </b-field>
 
-              <b-field class="" label="fecha de fin">
+              <b-field label="fecha de fin">
                  <b-datepicker
                       ref="datepicker2"
                       expanded
@@ -108,7 +116,7 @@
                        />
               </b-field>
 
-              <b-field class="" label="Correo">
+              <b-field label="Correo">
             <b-input placeholder="Email" type="email" v-model="dataSend.correo"></b-input>
               </b-field>
 
@@ -157,27 +165,27 @@
                       </b-upload>
                   </b-field>
 
-                  <div class="tags">
+                  <div class="tags is-fullwidth">
                       <span v-for="(file, index) in dropFiles"
                           :key="index"
-                          class="tag is-primary" >
+                          class="tag is-primary is-fullwidth" >
                           {{file.name}}
-                          <button class="delete is-small"
+                          <button class="delete is-small is-fullwidth"
                               type="button"
                               @click="deleteDropFile(index)">
                           </button>
                       </span>
                   </div>
               </section>
+
               <b-field class="derecha">
-                <button class="button is-success is-medium" @click="open">
+                <button class="button is-success is-medium" @click="open" style="float: right; margin:2rem 0;">
                     Enviar
                 </button>
               </b-field>
             </div>
           </div>
         </form>
-
        <!--  <div>
             <b-field>
                 <button class="button is-primary is-medium" @click="open">
@@ -185,12 +193,11 @@
                 </button>
             </b-field>
         </div> -->
-
       </section>
 
-      <pre>
+     <!--  <pre>
         {{$data}}
-      </pre>
+      </pre> -->
     </div>
   </div>
 </template>
@@ -198,20 +205,22 @@
 <script>
 
 import 'buefy/dist/buefy.css'
+import validator from 'validator'
 
 export default {
   data () {
     return {
+      noCuenta: '',
       file: null,
       dropFiles: [],
       minDate: new Date('January 01, 2020 03:24:00'), // "2020-01-01T06:00:00.000Z",
       seisMeses: 1000 * 60 * 60 * 24 * 7 * 4 * 6,
       programaSelected: {
         id: '',
-        nombre: '',
-        institucion: '',
-        dependencia: '',
-        clave: ''
+        nombre: 'acatlan',
+        institucion: 'acatlan',
+        dependencia: 'atlan',
+        clave: '215'
       },
       isLoading: false,
       isFullPage: true,
@@ -293,7 +302,7 @@ export default {
       }
     },
     ProgramaSe () {
-      console.log("cambiar variables")
+      console.log('cambiar variables')
       if (this.programaSelected.id) {
         for (let i = 0; i < this.programas.length; i++) {
           if (this.programas[i].id === this.programaSelected.id) {
@@ -305,6 +314,24 @@ export default {
         }
         return ''
       }
+    },
+    esNumero (numero) {
+      const ultimaLetra = numero.length - 1
+
+      if (numero && !validator.isNumeric(numero[ultimaLetra])) { return numero.substr(0, ultimaLetra) }
+      return numero
+    },
+    maxLength (str, max) {
+      if (str.length > max) return str.substr(0, max)
+      return str
+    }
+
+  },
+  watch: {
+    noCuenta () {
+      this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
+      this.noCuenta = this.esNumero(this.noCuenta)
+      this.noCuenta = this.maxLength(this.noCuenta, 9)
     }
   }
   /*  created () {