diff --git a/pages/responsable/nuevo/index.vue b/pages/responsable/nuevo/index.vue
index 2829993..0c40cf0 100644
--- a/pages/responsable/nuevo/index.vue
+++ b/pages/responsable/nuevo/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="columns is-mobile">
     <div class="column column is-10 is-offset-1">
-      <section class="mensaje is-size-5-desktop is-size-5-widescreen is-size-5-fullhd">
+      <section class="mensaje has-text-justified is-size-6-desktop is-size-6-widescreen is-size-5-fullhd">
         <p class="block">Estimado(a) responsable de programa de servicio social:</p>
         <p class="block">
           Te solicitamos llenar cuidadosamente los campos solicitados a continuación
@@ -25,17 +25,15 @@
       </section>
 
       <section>
-        <h1 class="title is-1 my-6">
+        <h1 class="title is-1 mt-6">
           Añadir Servicio Social
         </h1>
-
-        <form>
-          <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="columns">
+          <div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd pl-0">
+            <div class="column is-full-mobile is-three-quarters-tablet is-two-thirds-desktop is-two-thirds-widescreen is-half-fullhd pl-0">
+            <form>
+              <b-field class="column p-0 my-6 is-full">
                       <input
-                      class="input column is-two-thirds"
+                      class="input column "
                       v-model="noCuenta"
                       message="Solo numeros"
                       required="required"
@@ -44,76 +42,61 @@
                       min="0"></input>
 
                       <p class="control">
-                        <b-button class="button is-info" @click="buscar(alumno.cuenta)">Buscar</b-button>
+                        <b-button class="button is-info" @click=" simple()">Buscar</b-button>
                       </p>
               </b-field>
 
-              <b-field  label="Nombre" >
-                  <b-input :value="alumno.nombre" disabled></b-input>
+              <b-field label="Nombre">
+                <div class="input">{{ alumno.nombre }}</div>
               </b-field>
 
-              <b-field  label="Carrera" >
-                  <b-input :value="alumno.carrera"  disabled></b-input>
+              <b-field label="Carrera">
+                <div class="input">{{ alumno.carrera }}</div>
               </b-field>
 
-              <b-field label="Creditos" >
-                  <b-input :value="alumno.creditos" disabled></b-input>
+              <b-field label="Creditos">
+                <div class="input">{{ alumno.creditos }}</div>
               </b-field>
 
               <b-field label="Seleccione programa">
-                  <b-select placeholder="dependencias"  expanded v-model="programaSelected.id" @change="programaSe()">
-                     <option
+                  <b-select placeholder="programa"  expanded v-model="programaSelectedID">
+                    <option
                     v-for="programa in programas"
                     v-bind:key="programa.id"
                     :value="programa.id"
-                    @click="programaSe()"
                     >{{ programa.nombre }}</option>
 
                   </b-select>
               </b-field>
 
               <b-field label="Institucion">
-                  <b-input :value="programaSelected.institucion"  disabled></b-input>
+                <div class="input">{{ programaSelected.institucion }}</div>
               </b-field>
 
-              <b-field label="Dependencia" >
-                  <b-input :value="programaSelected.dependencia" disabled></b-input>
+                <b-field label="Dendencia">
+                <div class="input">{{ programaSelected.dependencia }}</div>
               </b-field>
 
-              <b-field label="Clave del programa" >
-                  <b-input :value="programaSelected.clave" disabled></b-input>
+                <b-field label="Clave del programa">
+                <div class="input">{{ programaSelected.clave }}</div>
               </b-field>
 
-              <b-field label="fecha de inicio">
-                  <b-datepicker
-                      ref="datepicker1"
-                      expanded
-                      placeholder="Select a date"
-                      :mobile-native="false"
-                       :min-date="minDate"
-                      v-model="dataSend.inicio">
-                  </b-datepicker>
-                  <b-button
-                      @click="$refs.datepicker1.toggle()"
-                      icon-left="calendar-today"
-                      type="is-info"
-                      />
+              <b-field label="Fecha de inicio">
+        <b-datepicker
+          placeholder="Inicio"
+          icon="calendar-today"
+          v-model="dataSend.inicio[0]"
+          :min-date="minDate1">
+        </b-datepicker>
               </b-field>
 
-              <b-field label="fecha de fin">
-                 <b-datepicker
-                      ref="datepicker2"
-                      expanded
-                      placeholder="Select a date"
-                      :mobile-native="false"
-                       :min-date="new Date(dataSend.inicio.getTime() + seisMeses)"
-                      v-model="dataSend.fin">
-                  </b-datepicker>
-                  <b-button
-                      @click="$refs.datepicker2.toggle()"
-                      icon-left="calendar-today"
-                      type="is-info"
-                       />
+              <b-field label="Fecha de fin" v-if="dataSend.inicio">
+                <b-datepicker
+                  placeholder="Fin"
+                  v-model="dataSend.fin[0]"
+                  :min-date="minDate2"
+                  icon="calendar-today">
+                </b-datepicker>
               </b-field>
 
               <b-field label="Correo">
@@ -122,80 +105,32 @@
 
               <h3 class="title is-4 mt-6">Carta de aceptación (en formato .PDF. No se aceptan fotos).</h3>
 
-              <!-- <b-field class=" file is-link" :class="{'has-name': !!file}">
-                  <b-upload v-model="dataSend.file" class="file-label">
-                      <span class="file-cta ">
-                          <b-icon class="file-icon" icon="upload"></b-icon>
-                          <span class="file-label">Click to upload</span>
-                      </span>
-                      <span class="file-name" v-if="file">
-                          {{ file.name }}
-                      </span>
+              <b-field>
+                  <b-upload v-model="dataSend.file" drag-drop expanded>
+                    <section class="section">
+                      <div class="content has-text-centered">
+                        <p>
+                          <b-icon icon="upload" size="is-large"></b-icon>
+                        </p>
+                        <p>{{ dataSend.file.name || "Arrastra aquí tu archivo o da click para buscar"}}</p>
+                      </div>
+                    </section>
                   </b-upload>
-              </b-field> -->
-
-              <!-- <b-field class="file is-primary" :class="{'has-name': !!file}">
-        <b-upload v-model="file" class="file-label">
-            <span class="file-cta">
-                <b-icon class="file-icon" icon="upload"></b-icon>
-                <span class="file-label">Click to upload</span>
-            </span>
-            <span class="file-name" v-if="file">
-                {{ file.name }}
-            </span>
-        </b-upload>
-              </b-field >-->
-
-              <section class="container is-full">
-                  <b-field>
-                      <b-upload v-model="dropFiles"
-                          multiple
-                          drag-drop>
-                          <section class="section">
-                              <div class="content has-text-centered">
-                                  <p>
-                                      <b-icon
-                                          icon="upload"
-                                          size="is-large">
-                                      </b-icon>
-                                  </p>
-                                  <p>Drop your files here or click to upload</p>
-                              </div>
-                          </section>
-                      </b-upload>
-                  </b-field>
-
-                  <div class="tags is-fullwidth">
-                      <span v-for="(file, index) in dropFiles"
-                          :key="index"
-                          class="tag is-primary is-fullwidth" >
-                          {{file.name}}
-                          <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" style="float: right; margin:2rem 0;">
-                    Enviar
-                </button>
               </b-field>
+
+            </form>
+           <b-field class="derecha">
+              <button :disabled='dataSend.file == "" || noCuenta == "" || dataSend.correo == "" ||  dataSend.inicio == "" || dataSend.fin == ""  ' 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">
-                    Enviar
-                </button>
-            </b-field>
-        </div> -->
+
       </section>
 
-     <!--  <pre>
+      <!-- <pre>
         {{$data}}
       </pre> -->
     </div>
@@ -215,12 +150,14 @@ export default {
       dropFiles: [],
       minDate: new Date('January 01, 2020 03:24:00'), // "2020-01-01T06:00:00.000Z",
       seisMeses: 1000 * 60 * 60 * 24 * 7 * 4 * 6,
+      minDate1: new Date('2020-01-01'),
+      programaSelectedID: '',
       programaSelected: {
-        id: '',
-        nombre: 'acatlan',
-        institucion: 'acatlan',
-        dependencia: 'atlan',
-        clave: '215'
+
+        nombre: '',
+        institucion: '',
+        dependencia: '',
+        clave: ''
       },
       isLoading: false,
       isFullPage: true,
@@ -254,9 +191,9 @@ export default {
         }
       ],
       dataSend: {
-        file: '',
-        inicio: new Date(),
-        fin: new Date(),
+        file: [],
+        inicio: [],
+        fin: [],
         correo: ''
       }
 
@@ -264,11 +201,14 @@ export default {
   },
   methods:
   {
-    openLoading () {
+  /*   openLoading () {
       this.isLoading = true
       setTimeout(() => {
         this.isLoading = false
       }, 10 * 1000)
+    }, */
+    simple () {
+      this.$buefy.notification.open('Something happened')
     },
     open () {
       const loadingComponent = this.$buefy.loading.open({
@@ -279,42 +219,6 @@ export default {
     deleteDropFile (index) {
       this.dropFiles.splice(index, 1)
     },
-    ClavePrograma () {
-      if (this.programa) {
-        for (let i = 0; i < this.programas.length; i++) {
-          if (this.programas[i].id === this.programaSelected) { return this.programas[i].clave }
-        }
-      }
-    },
-    Dependencia () {
-      if (this.programa) {
-        for (let i = 0; i < this.programas.length; i++) {
-          console.log(this.programaSelected + '   ' + this.programas[i].id)
-          if (this.programas[i].id === this.programaSelected) { return alert(this.programas[i].dependencia) }
-        }
-      }
-    },
-    Institucion () {
-      if (this.programa) {
-        for (let i = 0; i < this.programas.length; i++) {
-          if (this.programas[i].id === this.programaSelected) { return this.programas[i].institucion }
-        }
-      }
-    },
-    ProgramaSe () {
-      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) {
-            this.programaSelected.nombre == this.programas[i].nombre
-            this.programaSelected.institucion == this.programas[i].institucion
-            this.programaSelected.dependencia == this.programas[i].dependencia
-            this.programaSelected.clave == this.programas[i].clave
-          }
-        }
-        return ''
-      }
-    },
     esNumero (numero) {
       const ultimaLetra = numero.length - 1
 
@@ -332,14 +236,27 @@ export default {
       this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
       this.noCuenta = this.esNumero(this.noCuenta)
       this.noCuenta = this.maxLength(this.noCuenta, 9)
+    },
+    programaSelectedID () {
+      if (this.programaSelectedID) {
+        for (let i = 0; i < this.programas.length; i++) {
+          if (this.programas[i].id === this.programaSelectedID) {
+            this.programaSelected.nombre = this.programas[i].nombre
+            this.programaSelected.institucion = this.programas[i].institucion
+            this.programaSelected.dependencia = this.programas[i].dependencia
+            this.programaSelected.clave = this.programas[i].clave
+          }
+        }
+      }
+    }
+
+  },
+  computed: {
+    minDate2 () {
+      const min = new Date(this.dataSend.inicio)
+      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate())
     }
   }
-  /*  created () {
-    this.dataSend.inicio = null
-    this.dataSend.fin = null
-
-} */
-
 }
 </script>
 
@@ -354,5 +271,12 @@ export default {
 .file-cta{
   background-color: #167df0 !important;
 }
+.disabled {
+  cursor: help !important;
+  pointer-events: all !important;
+}
+.columns{
+  margin: 0;
+}
 
 </style>