diff --git a/components/admin/especial/tablaCasosEspeciales.vue b/components/admin/especial/tablaCasosEspeciales.vue
index f377857..6bf6c10 100644
--- a/components/admin/especial/tablaCasosEspeciales.vue
+++ b/components/admin/especial/tablaCasosEspeciales.vue
@@ -1,124 +1,99 @@
 <template>
-  <div
-    v-if="this.idTipoUsuario == 1 && this.tipoUsuario == 'admin'"
-    class="container"
-  >
-    <div class="columns">
-      <div class="column is-3 mb-0">
-        <b-field>
-          <b-input
-            placeholder="No.Cuenta"
-            icon="school"
-            rounded
-            v-model="numeroCuenta"
-            maxlength="9"
-          ></b-input>
-        </b-field>
-      </div>
-
-      <div class="column is-3 mb-4 pb-4">
-        <b-field>
-          <b-input
-            type="name"
-            placeholder="Nombre"
-            icon="account"
-            rounded
-            v-model="nombre"
-          ></b-input>
-        </b-field>
-      </div>
-
-      <div class="column is-3 mb-4 pb-4">
-        <b-field>
-          <b-select
-            placeholder="Status"
-            icon="information"
-            expanded
-            rounded
-            v-model="idStatus"
-          >
-            <optgroup>
-              <option value="">Status</option>
-              <option value="11">Artículo 52</option>
-              <option value="12">Artículo 91</option>
-              <option value="13">Liberación Articulo 52</option>
-              <option value="14">Liberación Articulo 91</option>
-            </optgroup>
-          </b-select>
-        </b-field>
-      </div>
-
-      <div class="buttons section pt-3 pl-5">
-        <b-button type="is-info" @click="obtenerDatos(idStatus)">
-          Buscar
-        </b-button>
-      </div>
-    </div>
+  <section class="section">
+    <h3 class="title">Casos Especiales</h3>
 
     <div class="columns">
-      <section class="column is-12">
-        <b-table
-          :data="data"
-          :loading="isLoading"
-          paginated
-          backend-pagination
-          :total="total"
-          :per-page="perPage"
-          @page-change="onPageChange"
-          hoverable
-          striped
-        >
-          <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
-            <span @click="servicios(props.row.idCasoEspecial)">{{
-              props.row.nombre
-            }}</span>
-          </b-table-column>
+      <b-field class="column" label="Número de Cuenta">
+        <b-input
+          type="text"
+          placeholder="No.Cuenta"
+          icon="school"
+          rounded
+          v-model="numeroCuenta"
+          maxlength="9"
+        ></b-input>
+      </b-field>
 
-          <b-table-column
-            field="numeroCuenta"
-            label="Número de Cuenta"
-            v-slot="props"
-            centered
-            width="100"
-          >
-            <span @click="servicios(props.row.idCasoEspecial)">{{
-              props.row.numeroCuenta
-            }}</span>
-          </b-table-column>
+      <b-field class="column" label="Nombre">
+        <b-input
+          type="name"
+          placeholder="Nombre"
+          icon="account"
+          rounded
+          v-model="nombre"
+        ></b-input>
+      </b-field>
 
-          <b-table-column
-            field="carrera"
-            label="Carrera"
-            v-slot="props"
-            centered
+      <b-field class="column" label="Status">
+        <b-select icon="information" expanded rounded v-model="idStatus">
+          <option value="">Status</option>
+          <option
+            v-for="(s, i) in status"
+            :key="i"
+            :value="s.idStatus"
+            v-show="i > 8 && i < 14"
           >
-            <span @click="servicios(props.row.idCasoEspecial)">{{
-              props.row.carrera
-            }}</span>
-          </b-table-column>
-          <b-table-column field="status" label="Status" v-slot="props" centered>
-            <span
-              @click="servicios(props.row.idCasoEspecial)"
-              class="tag"
-              :class="types(props.row.idStatus)"
-              >{{ props.row.status }}</span
-            >
-          </b-table-column>
+            {{ s.status }}
+          </option>
+        </b-select>
+      </b-field>
 
-          <b-table-column
-            field="diaCreado"
-            label="Día de creación"
-            v-slot="props"
-            centered
-          >
-            <span @click="servicios(props.row.idCasoEspecial)">{{
-              fecha(props.row.diaCreado)
-            }}</span>
-          </b-table-column>
-        </b-table>
-      </section>
+      <b-button
+        type="is-info"
+        class="column is-align-self-center"
+        expanded
+        @click="obtenerCasosEspeciales()"
+      >
+        Buscar
+      </b-button>
     </div>
-  </div>
+
+    <b-table
+      :data="data"
+      :total="total"
+      :current-page="page"
+      :per-page="perPage"
+      :selected.sync="servicioSeleccionado"
+      :loading="isLoading"
+      @page-change="onPageChange"
+      hoverable
+      striped
+      paginated
+      backend-pagination
+    >
+      <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
+        <span>{{ props.row.Usuario.nombre }}</span>
+      </b-table-column>
+
+      <b-table-column
+        field="numeroCuenta"
+        label="Número de Cuenta"
+        v-slot="props"
+        centered
+      >
+        <span>{{ props.row.Usuario.usuario }}</span>
+      </b-table-column>
+
+      <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
+        <span>{{ props.row.Carrera.carrera }}</span>
+      </b-table-column>
+
+      <b-table-column
+        field="fechaCreado"
+        label="Día de Creación"
+        v-slot="props"
+        centered
+      >
+        <span>{{ fecha(props.row.createdAt) }}</span>
+      </b-table-column>
+
+      <b-table-column field="status" label="Status" v-slot="props" centered>
+        <span :class="types(props.row.Status.idStatus)">{{
+          props.row.Status.status
+        }}</span>
+      </b-table-column>
+    </b-table>
+  </section>
 </template>
 
 <script>
@@ -128,143 +103,100 @@ import moment from 'moment'
 export default {
   data() {
     return {
-      idUsuario: '',
-      idTipoUsuario: '',
-      tipoUsuario: '',
+      admin: {},
+      status: [],
       data: [],
-      total: '',
-      isLoading: false,
       page: 1,
       perPage: 25,
+      total: 0,
+      isLoading: false,
+      busqueda: {},
       numeroCuenta: '',
+      numeroCuentaAnterior: '',
       nombre: '',
+      nombreAnterior: '',
       idStatus: '',
-      token: {
-        headers: {
-          token: window.localStorage.getItem('token'),
-        },
-      },
+      idStatusAnterior: '',
+      token: {},
+      servicioSeleccionado: {},
     }
   },
-
   methods: {
-    onPageChange(page) {
-      this.page = page
-      this.obtenerDatos()
-    },
     types(idStatus) {
-      if (idStatus === 1) {
-        return 'is-dark'
-      } else if (idStatus === 2) {
-        return 'is-info'
-      } else if (idStatus === 3) {
-        return 'is-link'
-      } else if (idStatus === 4) {
-        return 'is-warning'
-      } else if (idStatus === 5) {
-        return 'is-success'
-      } else if (idStatus === 6) {
-        return 'is-link'
-      } else if (
-        idStatus === 7 ||
-        idStatus === 8 ||
-        idStatus === 9 ||
-        idStatus === 10
-      ) {
-        return 'is-danger'
-      } else if (idStatus === 11) {
-        return 'is-link is-light'
-      } else if (idStatus === 12) {
-        return 'is-danger is-light'
-      } else if (idStatus === 13 || idStatus === 14) {
-        return 'is-success is-light'
-      }
+      let style = 'tag'
+
+      if (idStatus === 10) style += ' is-danger'
+      if (idStatus === 11) style += ' is-link is-light'
+      if (idStatus === 12) style += ' is-danger is-light'
+      if (idStatus === 13 || idStatus === 14) style += ' is-success is-light'
+
+      return style
     },
     fecha(date) {
       const fecha = moment(date.substr(0, 10))
       return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
     },
-    obtenerDatos(idStatus) {
-      this.isLoading = true
-      this.data = []
+    onPageChange(page) {
+      this.page = page
+      this.obtenerCasosEspeciales()
+    },
+    getLocalhostInfo() {
+      this.admin.idUsuario = localStorage.getItem('idUsuario')
+      this.admin.idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'))
+      this.admin.tipoUsuario = localStorage.getItem('tipoUsuario')
+      this.token = {
+        headers: {
+          token: window.localStorage.getItem('token'),
+        },
+      }
+    },
+    obtenerCasosEspeciales() {
+      let data = ''
 
+      this.isLoading = true
+      if (
+        this.numeroCuenta != this.numeroCuentaAnterior ||
+        this.nombre != this.nombreAnterior ||
+        this.idStatus != this.idStatusAnterior
+      ) {
+        this.page = 1
+        this.numeroCuentaAnterior = this.numeroCuenta
+        this.nombreAnterior = this.nombre
+        this.idStatusAnterior = this.idStatus
+      }
+      if (this.idStatus) data += `&idStatus=${this.idStatus}`
+      if (this.nombre) data += `&nombre=${this.nombre}`
+      if (this.numeroCuenta) data = `&numeroCuenta=${this.numeroCuenta}`
       axios
         .get(
-          `${process.env.api}/caso_especial/servicios_especiales?pagina=${this.page}&idStatus=${this.idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`,
+          `${process.env.api}/caso_especial/servicios_especiales?&pagina=${this.page}${data}`,
           this.token
         )
         .then((res) => {
-          const servicios = res.data.servicios
-
-          if (servicios.length !== 0) {
-            for (let i = 0; i < servicios.length; i++) {
-              this.data.push({
-                nombre: servicios[i].Usuario.nombre,
-                numeroCuenta: servicios[i].Usuario.usuario,
-                carrera: servicios[i].Carrera.carrera,
-                status: servicios[i].Status.status,
-                diaCreado: servicios[i].createdAt,
-                idStatus: servicios[i].Status.idStatus,
-                idCasoEspecial: servicios[i].idCasoEspecial,
-              })
-            }
-          }
-          let currentTotal = servicios.length
-          let contador
-
-          for (let i = 0; i < res.data.registros / 25 + 1; i++) {
-            contador = i
-          }
-          currentTotal = this.perPage * contador
-          this.total = currentTotal
-        })
-
-        .catch((error) => {
-          this.error(error.response.data.message)
-        })
-
-        .finally(() => {
+          this.data = res.data.serviciosEspeciales
+          this.total = res.data.count
           this.isLoading = false
+          console.log(res.data)
+        })
+        .catch((err) => {
+          this.isLoading = false
+          this.imprimirError(err.response.data)
         })
     },
-    servicios(idCasoEspecial) {
-      window.localStorage.setItem('idCasoEspecial', idCasoEspecial)
-      this.$router.push('/admin/especial/casoEspecial')
+    obtenerCatalogoStatus() {
+      axios
+        .get(`${process.env.api}/status`, this.token)
+        .then((res) => {
+          this.status = res.data
+        })
+        .catch((err) => {
+          this.imprimirError(err.response.data)
+        })
     },
-    getIdLocal() {
-      this.idUsuario = 1 //localStorage.getItem("idUsuario");
-      this.idTipoUsuario = 1 //localStorage.getItem("idTipoUsuario");
-      this.tipoUsuario = 'admin' //localStorage.getItem("tipoUsuario");
-
-      if (this.idTipoUsuario != 1 && this.tipoUsuario != 'admin') {
-        localStorage.clear()
-        this.$router.push('/')
-      }
-    },
-    error(msj) {
-      let salir = false
-      switch (msj) {
-        case 'invalid signature':
-          msj = 'Tu token no es valido, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'jwt expired':
-          msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'jwt malformed':
-          msj = 'No se encontro tu token, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'No hay token':
-          msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
-          salir = true
-          break
-      }
-
+    imprimirError(err) {
       this.$buefy.dialog.alert({
         title: 'Error',
-        message: msj,
+        message: err.message,
         type: 'is-danger',
         hasIcon: true,
         icon: 'alert-circle',
@@ -272,15 +204,27 @@ export default {
         ariaRole: 'alertdialog',
         ariaModal: true,
       })
-      if (salir == true) {
+      if (err.err === 'token error') {
         localStorage.clear()
-        this.$router.push(`/`)
+        this.$router.push('/')
       }
     },
   },
+  watch: {
+    servicioSeleccionado() {
+      window.localStorage.setItem(
+        'idCasoEspecial',
+        this.servicioSeleccionado.idCasoEspecial
+      )
+      this.$router.push(`/admin/especial/casoEspecial`)
+    },
+  },
   created() {
-    this.getIdLocal()
-    this.obtenerDatos(0)
+    this.getLocalhostInfo()
+    if (this.admin.idTipoUsuario === 1) {
+      this.obtenerCatalogoStatus()
+      this.obtenerCasosEspeciales()
+    }
   },
 }
 </script>
@@ -290,18 +234,22 @@ export default {
   border: #1b3d70;
   box-shadow: 0 0 8px 0 #1b3d70;
 }
+
 .select select:focus {
   border-color: #1b3d70;
   box-shadow: 0 0 8px 0 #1b3d70;
 }
+
 .select:not(.is-multiple):not(.is-loading)::after {
   border-color: #1b3d70;
 }
+
 .pagination-link.is-current {
   background-color: #1b3d70;
   border-color: #1b3d70;
 }
-.b-table {
+
+.pinter {
   cursor: pointer;
 }
 </style>
diff --git a/components/admin/inputTableA.vue b/components/admin/inputTableA.vue
index b6c2dfd..729cd76 100644
--- a/components/admin/inputTableA.vue
+++ b/components/admin/inputTableA.vue
@@ -149,9 +149,7 @@ export default {
       if (idStatus === 4) style += ' is-link'
       if (idStatus === 5) style += ' is-success'
       if (idStatus === 6) style += ' is-success is-light'
-      if (idStatus === 7) style += ' is-danger'
-      if (idStatus === 8) style += ' is-danger'
-      if (idStatus === 9) style += ' is-danger'
+      if (idStatus >= 7 && idStatus <= 9) style += ' is-danger'
       return style
     },
     fecha(date) {
diff --git a/components/admin/responsables/tablaResponsables.vue b/components/admin/responsables/tablaResponsables.vue
index 0ea0237..e5d566e 100644
--- a/components/admin/responsables/tablaResponsables.vue
+++ b/components/admin/responsables/tablaResponsables.vue
@@ -128,7 +128,6 @@ export default {
           this.imprimirError(err.response.data)
         })
     },
-
     imprimirError(err) {
       this.$buefy.dialog.alert({
         title: 'Error',
@@ -145,10 +144,6 @@ export default {
         this.$router.push('/')
       }
     },
-    paginaCorrecta() {
-      if (this.admin.idTipoUsuario === 2) this.$router.push('/responsable')
-      if (this.admin.idTipoUsuario === 3) this.$router.push('/alumno')
-    },
   },
   watch: {
     responsableSeleccionado() {
@@ -162,7 +157,6 @@ export default {
   created() {
     this.getLocalhostInfo()
     if (this.admin.idTipoUsuario === 1) {
-      this.paginaCorrecta()
       this.obtenerResponsables()
     }
   },
diff --git a/components/admin/servicio/modificar/form.vue b/components/admin/servicio/modificar/form.vue
index 0132129..d49edd3 100644
--- a/components/admin/servicio/modificar/form.vue
+++ b/components/admin/servicio/modificar/form.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container" :class="{ pad: padding }">
-    <BotonRegresar :path="'/admin/servicio'" />
+    <BotonRegresar path="/admin/servicio" />
     <br /><br />
     <p class="is-size-2">Editar información del alumno</p>
     <br />
diff --git a/components/admin/servicio/vistaServicio.vue b/components/admin/servicio/vistaServicio.vue
index f09b64a..7c81981 100644
--- a/components/admin/servicio/vistaServicio.vue
+++ b/components/admin/servicio/vistaServicio.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="mb-5">
       <BotonRegresar
-        :path="'/admin'"
+        path="/admin"
         :deleteFromLocalStorage="['idServicio', 'idStatus']"
       />
     </div>
@@ -97,7 +97,7 @@
       <b-button v-else-if="enviarCancel" disabled> Cancelar servicio </b-button>
       <div>
         <BotonRegresar
-          :path="'/admin'"
+          path="/admin"
           :deleteFromLocalStorage="['idServicio', 'idStatus']"
         />
       </div>
diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
index 62f19ff..7bde805 100644
--- a/components/responsable/inputTable.vue
+++ b/components/responsable/inputTable.vue
@@ -195,9 +195,7 @@ export default {
       if (idStatus === 4) style += ' is-link'
       if (idStatus === 5) style += ' is-success'
       if (idStatus === 6) style += ' is-success is-light'
-      if (idStatus === 7) style += ' is-danger'
-      if (idStatus === 8) style += ' is-danger'
-      if (idStatus === 9) style += ' is-danger'
+      if (idStatus >= 7 && idStatus <= 9) style += ' is-danger'
       return style
     },
     fecha(date) {
diff --git a/pages/admin/cuestionario/index.vue b/pages/admin/cuestionario/index.vue
index d10aa44..1698697 100644
--- a/pages/admin/cuestionario/index.vue
+++ b/pages/admin/cuestionario/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <BotonRegresar :path="'/admin'" />
+    <BotonRegresar path="/admin" />
     <p class="is-size-2 mb-5">Descargar cuestionarios</p>
     <p class="is-size-3 mt-5">Seleccione un cuestionario:</p>
     <b-select
diff --git a/pages/admin/especial/casoEspecial/editar/index.vue b/pages/admin/especial/casoEspecial/editar/index.vue
index 1bb0907..7e55faf 100644
--- a/pages/admin/especial/casoEspecial/editar/index.vue
+++ b/pages/admin/especial/casoEspecial/editar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <BotonRegresar :path="'/admin/especial/casoEspecial'" />
+    <BotonRegresar path="/admin/especial/casoEspecial" />
     <FormEditar></FormEditar>
   </div>
 </template>
diff --git a/pages/admin/especial/casoEspecial/index.vue b/pages/admin/especial/casoEspecial/index.vue
index 9befef2..73f5622 100644
--- a/pages/admin/especial/casoEspecial/index.vue
+++ b/pages/admin/especial/casoEspecial/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <BotonRegresar :path="'/admin/especial'" />
+    <BotonRegresar path="/admin/especial" />
     <DatosPersonalesEspecial />
   </div>
 </template>
diff --git a/pages/admin/especial/index.vue b/pages/admin/especial/index.vue
index d68b679..c1cdd2f 100644
--- a/pages/admin/especial/index.vue
+++ b/pages/admin/especial/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="container" style="margin-top: 1.4%; margin-bottom: 4%">
-    <BotonRegresar :path="'/admin'" />
+    <BotonRegresar path="/admin" />
+
     <TablaCasosEspeciales />
   </div>
 </template>
diff --git a/pages/admin/responsables/index.vue b/pages/admin/responsables/index.vue
index 314dc4a..97e1f08 100644
--- a/pages/admin/responsables/index.vue
+++ b/pages/admin/responsables/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="container">
-    <BotonRegresar :path="'/admin'" />
+    <BotonRegresar path="/admin" />
+
     <CargaMasiva />
+
     <a :href="link">
       <b-button class="my-4 is-info">Descargar plantilla</b-button>
     </a>
diff --git a/pages/admin/responsables/infoResponsable/index.vue b/pages/admin/responsables/infoResponsable/index.vue
index b3b75b7..ab66d3d 100644
--- a/pages/admin/responsables/infoResponsable/index.vue
+++ b/pages/admin/responsables/infoResponsable/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <BotonRegresar
-      :path="'/admin/responsables'"
+      path="/admin/responsables"
       :deleteFromLocalStorage="['correo', 'idResponsable', 'nombre']"
     />
     <p class="is-size-2 mb-4">Información del responsable</p>
@@ -44,7 +44,7 @@
       </b-button>
     </div>
     <BotonRegresar
-      :path="'/admin/responsables'"
+      path="/admin/responsables"
       :deleteFromLocalStorage="['correo', 'idResponsable', 'nombre']"
     />
   </div>
diff --git a/pages/admin/responsables/infoResponsable/modificar/index.vue b/pages/admin/responsables/infoResponsable/modificar/index.vue
index 0d36d84..cb1829e 100644
--- a/pages/admin/responsables/infoResponsable/modificar/index.vue
+++ b/pages/admin/responsables/infoResponsable/modificar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container" style="margin-bottom: 10%; margin-top: 2%">
-    <BotonRegresar :path="'/admin/responsables/infoResponsable'" />
+    <BotonRegresar path="/admin/responsables/infoResponsable" />
     <p class="is-size-2">Editar información del responsable</p>
     <b-field label="Nombre">
       <b-input type="text" v-model="nuevo.nombre" :placeholder="viejo.nombre">
diff --git a/pages/alumno/cuestionario/index.vue b/pages/alumno/cuestionario/index.vue
index 31be9a9..d0dd96d 100644
--- a/pages/alumno/cuestionario/index.vue
+++ b/pages/alumno/cuestionario/index.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="container my-5 px-3">
     <div v-if="idCuestionario === 'null'">
-      <BotonRegresar :path="'/alumno'" />
+      <BotonRegresar path="/alumno" />
       <div class="my-5 mensaje">
         <p class="is-size-2">Evaluación de programas de servicio social</p>
         <p>
diff --git a/pages/casoEspecial/nuevo/index.vue b/pages/casoEspecial/nuevo/index.vue
index b3fea98..c8b0b9a 100644
--- a/pages/casoEspecial/nuevo/index.vue
+++ b/pages/casoEspecial/nuevo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <BotonRegresar :path="'/casoEspecial'" />
+    <BotonRegresar path="/casoEspecial" />
     <FormularioEspecial />
   </div>
 </template>
diff --git a/pages/responsable/nuevo/index.vue b/pages/responsable/nuevo/index.vue
index 2211309..879f8b3 100644
--- a/pages/responsable/nuevo/index.vue
+++ b/pages/responsable/nuevo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <BotonRegresar :path="'/responsable'" />
+    <BotonRegresar path="/responsable" />
     <Texto />
     <FormServicioSocial />
   </div>
diff --git a/tablaResponsables.vue b/tablaResponsables.vue
deleted file mode 100644
index d43a2b6..0000000
--- a/tablaResponsables.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-  <div class="container mt-5">
-    <p class="is-size-2 mb-5">Lista de responsables</p>
-    <div class="columns">
-      <div class="column is-3 mb-4 pb-4">
-        <b-field>
-          <b-input
-            type="name"
-            placeholder="Nombre"
-            icon="account"
-            rounded
-            v-model="nombre"
-          ></b-input>
-        </b-field>
-      </div>
-      <div class="column is-3 mb-0">
-        <b-field>
-          <b-input
-            placeholder="Correo electrónico"
-            icon="school"
-            rounded
-            v-model="correo"
-          >
-          </b-input>
-        </b-field>
-      </div>
-      <div class="buttons section pt-3 pl-5">
-        <b-button type="is-info" @click="obtenerDatos(idStatus)">
-          Buscar
-        </b-button>
-      </div>
-    </div>
-    <div class="columns mb-5">
-      <section class="column is-12">
-        <b-table
-          :data="data"
-          :loading="loading"
-          hoverable
-          striped
-          paginated
-          backend-pagination
-          :total="total"
-          :per-page="perPage"
-          @page-change="onPageChange"
-        >
-          <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
-            <span @click="verRegistro(props.row)">{{ props.row.nombre }}</span>
-          </b-table-column>
-          <b-table-column
-            field="correo"
-            label="Correo electrónico"
-            v-slot="props"
-            centered
-          >
-            <span @click="verRegistro(props.row)">{{ props.row.usuario }}</span>
-          </b-table-column>
-        </b-table>
-      </section>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-export default {
-  data() {
-    return {
-      idUsuario: '',
-      data: [],
-      total: '',
-      loading: false,
-      page: 1,
-      perPage: 25,
-      correo: '',
-      nombre: '',
-      idStatus: 1,
-      token: {
-        headers: {
-          token: window.localStorage.getItem('token'),
-        },
-      },
-    }
-  },
-  methods: {
-    onPageChange(page) {
-      this.page = page
-      this.obtenerDatos()
-    },
-    obtenerDatos(idStatus) {
-      this.loading = true
-      this.data = []
-      axios
-        .get(
-          `${process.env.api}/usuario/responsables?pagina=${this.page}&nombre=${this.nombre}&correo=${this.correo}`,
-          this.token
-        )
-        .then((res) => {
-          const servicios = res.data.servicios
-          if (servicios.length !== 0) {
-            for (let i = 0; i < servicios.length; i++) {
-              this.data.push({
-                nombre: servicios[i].nombre,
-                usuario: servicios[i].usuario,
-                idUsuario: servicios[i].idUsuario,
-              })
-            }
-          }
-          let currentTotal = servicios.length
-          let contador
-          for (let i = 0; i < res.data.registros / this.perPage + 1; i++) {
-            contador = i
-          }
-          currentTotal = this.perPage * contador
-          this.total = currentTotal
-          this.loading = false
-        })
-        .catch((err) => {
-          this.loading = false
-          this.error(err.response.data.message)
-        })
-    },
-    error(msj) {
-      let salir = false
-      switch (msj) {
-        case 'invalid signature':
-          msj = 'Tu token no es valido, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'jwt expired':
-          msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'jwt malformed':
-          msj = 'No se encontro tu token, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'No hay token':
-          msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
-          salir = true
-          break
-      }
-
-      this.$buefy.dialog.alert({
-        title: 'Error',
-        message: msj,
-        type: 'is-danger',
-        hasIcon: true,
-        icon: 'alert-circle',
-        iconPack: 'mdi',
-        ariaRole: 'alertdialog',
-        ariaModal: true,
-      })
-      if (salir == true) {
-        localStorage.clear()
-        this.$router.push(`/`)
-      }
-    },
-    insertIdLocal() {
-      this.idUsuario = localStorage.getItem('idUsuario')
-    },
-    verRegistro(responsable) {
-      localStorage.setItem('correo', responsable.usuario)
-      localStorage.setItem('idResponsable', responsable.idUsuario)
-      localStorage.setItem('nombre', responsable.nombre)
-      this.$router.push('/admin/responsables/infoResponsable')
-    },
-  },
-  computed: {
-    busquedaNombreResponsable() {
-      return this.responsables.filter((responsables) =>
-        responsables.nombreResp.includes(this.buscarNombreResponsable)
-      )
-    },
-  },
-  async created() {
-    await this.obtenerDatos()
-    this.insertIdLocal()
-  },
-}
-</script>
-
-<style scoped>
-.b-table {
-  cursor: pointer;
-}
-.input:focus {
-  border: #1b3d70;
-  box-shadow: 0 0 8px 0 #1b3d70;
-}
-.select select:focus {
-  border-color: #1b3d70;
-  box-shadow: 0 0 8px 0 #1b3d70;
-}
-.select:not(.is-multiple):not(.is-loading)::after {
-  border-color: #1b3d70;
-}
-.pagination-link.is-current {
-  background-color: #1b3d70;
-  border-color: #1b3d70;
-}
-</style>