diff --git a/components/TablaServiciosSociales.vue b/components/TablaServiciosSociales.vue
index f5c8330..4c9ac83 100644
--- a/components/TablaServiciosSociales.vue
+++ b/components/TablaServiciosSociales.vue
@@ -193,4 +193,27 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+.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;
+}
+
+.pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/components/admin/casos_especiales/caso_especial/casoEspecial.vue b/components/admin/casos_especiales/caso_especial/casoEspecial.vue
index 7e49351..3dfeb2b 100644
--- a/components/admin/casos_especiales/caso_especial/casoEspecial.vue
+++ b/components/admin/casos_especiales/caso_especial/casoEspecial.vue
@@ -77,8 +77,6 @@
         Liberar
       </b-button>
     </b-field>
-
-    <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading" />
   </div>
 </template>
 
@@ -91,7 +89,6 @@ export default {
     return {
       alumno: { Usuario: {}, Carrera: {}, Status: {} },
       idCasoEspecial: null,
-      isLoading: false,
     }
   },
   props: {
@@ -99,6 +96,7 @@ export default {
     imprimirMensaje: { type: Function, required: true },
     imprimirWarning: { type: Function, required: true },
     imprimirError: { type: Function, required: true },
+    updateIsLoading: { type: Function, required: true },
   },
   methods: {
     fecha(date) {
@@ -111,25 +109,10 @@ export default {
       }
       return ''
     },
-    obtenerCasoEspecial() {
-      return axios
-        .get(
-          `${process.env.api}/caso_especial?idCasoEspecial=${this.idCasoEspecial}`,
-          this.admin.token
-        )
-        .then((res) => {
-          this.alumno = res.data
-          this.isLoading = false
-        })
-        .catch((err) => {
-          this.isLoading = false
-          this.imprimirError(err.response.data)
-        })
-    },
     confirmarLiberacion() {
       const data = { idCasoEspecial: this.idCasoEspecial }
 
-      this.isLoading = true
+      this.updateIsLoading(true)
       axios
         .put(
           `${process.env.api}/caso_especial/liberacion`,
@@ -139,18 +122,35 @@ export default {
         .then((res) => {
           localStorage.removeItem('idCasoEspecial')
           this.$buefy.dialog.alert('El servicio ha sido liberado.')
-          this.isLoading = false
+          this.updateIsLoading(false)
           this.$router.push('/admin/casos_especiales')
         })
         .catch((err) => {
-          this.isLoading = false
+          this.updateIsLoading(false)
           this.error(err.response.data)
         })
     },
+    obtenerCasoEspecial() {
+      this.updateIsLoading(true)
+      return axios
+        .get(
+          `${process.env.api}/caso_especial?idCasoEspecial=${this.idCasoEspecial}`,
+          this.admin.token
+        )
+        .then((res) => {
+          this.alumno = res.data
+          this.updateIsLoading(false)
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+    },
   },
   created() {
     this.idCasoEspecial = localStorage.getItem('idCasoEspecial')
-    if (this.admin.idTipoUsuario === 1) this.obtenerCasoEspecial()
+    if (this.admin.idTipoUsuario === 1 && this.idCasoEspecial)
+      this.obtenerCasoEspecial()
   },
 }
 </script>
diff --git a/components/admin/casos_especiales/editar/formEditar.vue b/components/admin/casos_especiales/caso_especial/editar/formEditar.vue
similarity index 100%
rename from components/admin/casos_especiales/editar/formEditar.vue
rename to components/admin/casos_especiales/caso_especial/editar/formEditar.vue
diff --git a/components/admin/inputTableA.vue b/components/admin/inputTableA.vue
index 0264a6d..73baaf6 100644
--- a/components/admin/inputTableA.vue
+++ b/components/admin/inputTableA.vue
@@ -150,27 +150,4 @@ export default {
 }
 </script>
 
-<style>
-.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;
-}
-
-.pointer {
-  cursor: pointer;
-}
-</style>
+<style></style>
diff --git a/pages/admin/casos_especiales/caso_especial/index.vue b/pages/admin/casos_especiales/caso_especial/index.vue
index a68b34c..67f04b5 100644
--- a/pages/admin/casos_especiales/caso_especial/index.vue
+++ b/pages/admin/casos_especiales/caso_especial/index.vue
@@ -10,7 +10,10 @@
       :imprimirMensaje="imprimirMensaje"
       :imprimirWarning="imprimirWarning"
       :imprimirError="imprimirError"
+      :updateIsLoading="updateIsLoading"
     />
+
+    <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading" />
   </section>
 </template>
 
@@ -26,9 +29,13 @@ export default {
   data() {
     return {
       admin: {},
+      isLoading: false,
     }
   },
   methods: {
+    updateIsLoading(booleanValue) {
+      this.isLoading = booleanValue
+    },
     imprimirError(err = {}, title = '¡Hubo un error!', onConfirm = () => {}) {
       this.$buefy.dialog.alert({
         ariaRole: 'alertdialog',
diff --git a/pages/admin/casos_especiales/index.vue b/pages/admin/casos_especiales/index.vue
index ff3809f..ae42af2 100644
--- a/pages/admin/casos_especiales/index.vue
+++ b/pages/admin/casos_especiales/index.vue
@@ -101,3 +101,5 @@ export default {
   },
 }
 </script>
+
+<style></style>