UPDATE: Actualización de dependencias mayor (#6)

- TailwindCSS 3 => 4 - Diseño cuadrado - Otras dependencias.
2025-03-04 23:20:48 -06:00 · 2025-03-04 23:20:48 -06:00 · 28c5ba153b
commit 28c5ba153b
parent 8d752979a7
65 changed files with 1416 additions and 1661 deletions
--- a/.gitignore
+++ b/.gitignore
@ -12,7 +12,7 @@ dist
 dist-ssr
 *.local
 .env
-colors.json
+colors.css
 notes.md

 # Editor directories and files
--- a/colors.css.example
+++ b/colors.css.example
@ -0,0 +1,34 @@
+@theme {
+    --color-page: #fff;
+    --color-page-t: #000;
+    --color-page-d: #292524;
+    --color-page-dt: #fff;
+    --color-primary: #374151;
+    --color-primary-t: #fff;
+    --color-primary-d: #1c1917;
+    --color-primary-dt: #fff;
+    --color-secondary: #3b82f6;
+    --color-secondary-t: #fff;
+    --color-secondary-d: #312e81;
+    --color-secondary-dt: #fff;
+    --color-primary-info: #06b6d4;
+    --color-primary-info-t: #fff;
+    --color-primary-info-d: #06b6d4;
+    --color-primary-info-dt: #fff;
+    --color-secondary-info: #06b6d4;
+    --color-secondary-info-t: #fff;
+    --color-secondary-info-d: #06b6d4;
+    --color-secondary-info-dt: #fff;
+    --color-success: #22c55e;
+    --color-success-t: #fff;
+    --color-success-d: #22c55e;
+    --color-success-dt: #fff;
+    --color-danger: #ef4444;
+    --color-danger-t: #fff;
+    --color-danger-d: #ef4444;
+    --color-danger-dt: #fecaca;
+    --color-warning: #eab308;
+    --color-warning-t: #fff;
+    --color-warning-d: #eab308;
+    --color-warning-dt: #fff;
+}
--- a/colors.json.example
+++ b/colors.json.example
@ -1,34 +0,0 @@
-{
-    "page":"#fff",
-    "page-t":"#000",
-    "page-d":"#292524",
-    "page-dt":"#fff",
-    "primary":"#374151",
-    "primary-t":"#fff",
-    "primary-d":"#1c1917",
-    "primary-dt":"#fff",
-    "secondary":"#3b82f6",
-    "secondary-t":"#fff",
-    "secondary-d":"#312e81",
-    "secondary-dt":"#fff",
-    "primary-info":"#06b6d4",
-    "primary-info-t":"#fff",
-    "primary-info-d":"#06b6d4",
-    "primary-info-dt":"#fff",
-    "secondary-info":"#06b6d4",
-    "secondary-info-t":"#fff",
-    "secondary-info-d":"#06b6d4",
-    "secondary-info-dt":"#fff",
-    "success":"#22c55e",
-    "success-t":"#fff",
-    "success-d":"#22c55e",
-    "success-dt":"#fff",
-    "danger":"#ef4444",
-    "danger-t":"#fff",
-    "danger-d":"#ef4444",
-    "danger-dt":"#fecaca",
-    "warning":"#eab308",
-    "warning-t":"#fff",
-    "warning-d":"#eab308",
-    "warning-dt":"#fff"
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,7 +2,7 @@
  "name": "notsoweb.frontend",
  "copyright": "Notsoweb Software Inc.",
  "private": true,
-  "version": "0.9.7",
+  "version": "0.9.8",
  "type": "module",
  "scripts": {
    "dev": "vite",
@ -10,22 +10,23 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@tailwindcss/postcss": "^4.0.9",
+    "@tailwindcss/vite": "^4.0.9",
    "@vitejs/plugin-vue": "^5.2.1",
-    "axios": "^1.7.8",
-    "laravel-echo": "^1.17.1",
+    "axios": "^1.8.1",
+    "laravel-echo": "^2.0.2",
    "luxon": "^3.5.0",
-    "pinia": "^2.2.8",
-    "postcss": "^8.4.49",
-    "pusher-js": "^8.4.0-rc2",
-    "tailwindcss": "^3.4.15",
+    "pinia": "^3.0.1",
+    "pusher-js": "^8.4.0",
+    "tailwindcss": "^4.0",
    "toastr": "^2.1.4",
-    "uuid": "^11.0.3",
-    "vite": "^6.0.1",
+    "uuid": "^11.1.0",
+    "vite": "^6.2.0",
    "vue": "^3.5.13",
-    "vue-i18n": "^10.0.5",
-    "vue-multiselect": "^3.1.0",
+    "vue-i18n": "^11.1.1",
+    "vue-multiselect": "^3.2.0",
    "vue-router": "^4.5.0",
-    "ziggy-js": "^2.4.1"
+    "ziggy-js": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,6 +1,5 @@
 export default {
  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
  },
 }
--- a/src/components/Holos/ActionSection.vue
+++ b/src/components/Holos/ActionSection.vue
@ -14,7 +14,7 @@ import SectionTitle from './SectionTitle.vue';
        </SectionTitle>

        <div class="mt-5 md:mt-0 md:col-span-2">
-            <div class="px-4 py-5 sm:p-6 shadow dark:shadow-sm dark:shadow-white/50 sm:rounded-lg">
+            <div class="px-4 py-5 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-sm">
                <slot name="content" />
            </div>
        </div>
--- a/src/components/Holos/Button/Icon.vue
+++ b/src/components/Holos/Button/Icon.vue
@ -19,7 +19,7 @@ const props = defineProps({

 <template>
    <button
-        class="flex justify-center items-center h-7 w-7 rounded-md btn-icon"
+        class="flex justify-center items-center h-7 w-7 rounded-sm btn-icon"
        :title="title"
        :type="type"
    >
--- a/src/components/Holos/Card/Indicator.vue
+++ b/src/components/Holos/Card/Indicator.vue
@ -14,7 +14,7 @@ defineProps({

 <template>
    <RouterLink
-        class="relative flex-1 flex flex-col gap-2 p-4 rounded -md bg-gray-200 dark:bg-transparent dark:border"
+        class="relative flex-1 flex flex-col gap-2 p-4 rounded-sm -md bg-gray-200 dark:bg-transparent dark:border"
        :to="to"
    >
        <label class="text-base font-semibold tracking-wider">
--- a/src/components/Holos/Checkbox.vue
+++ b/src/components/Holos/Checkbox.vue
@ -31,6 +31,6 @@ const proxyChecked = computed({
        v-model="proxyChecked"
        type="checkbox"
        :value="value"
-        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
+        class="rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:ring-indigo-500"
    >
 </template>
--- a/src/components/Holos/DialogModal.vue
+++ b/src/components/Holos/DialogModal.vue
@ -30,16 +30,15 @@ const close = () => {
        :closeable="closeable"
        @close="close"
    >
-        <div class="p-4">
-            <div class="text-lg font-medium">
+        <div>
+            <div class="text-lg px-4 font-medium">
                <slot name="title" />
            </div>
-
-            <div class="mt-4 text-sm">
+            <div class="text-sm">
                <slot name="content" />
            </div>
        </div>
-        <div class="flex flex-row justify-center p-4 text-end">
+        <div class="flex flex-row justify-center p-2 text-end">
            <slot name="footer" />
        </div>
    </Modal>
--- a/src/components/Holos/Dropdown.vue
+++ b/src/components/Holos/Dropdown.vue
@ -95,7 +95,7 @@ const alignmentClasses = computed(() => {
                style="display: none;"
                @click="open = false"
            >
-                <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
+                <div class="rounded-sm ring-1 ring-black/5" :class="contentClasses">
                    <slot name="content" />
                </div>
            </div>
--- a/src/components/Holos/DropdownLink.vue
+++ b/src/components/Holos/DropdownLink.vue
@ -6,7 +6,7 @@ defineProps({
    to: String
 });

-const style = 'block px-4 py-2 text-sm leading-5 hover:bg-secondary/80 dark:hover:bg-secondary-d/80 focus:outline-none focus:bg-gray-100 transition';
+const style = 'block px-4 py-2 text-sm leading-5 hover:bg-secondary/80 dark:hover:bg-secondary-d/80 focus:outline-hidden focus:bg-gray-100 transition';
 </script>

 <template>
--- a/src/components/Holos/Form/Checkbox.vue
+++ b/src/components/Holos/Form/Checkbox.vue
@ -28,7 +28,7 @@ const vModel = computed({
 <template>
    <div class="relative w-full h-8">
        <input
-            class="appearance-none rounded-lg bg-primary cursor-pointer h-full w-full checked:bg-secondary dark:checked:bg-secondary-d transition-all duration-200 peer"
+            class="appearance-none rounded-sm bg-primary cursor-pointer h-full w-full checked:bg-secondary dark:checked:bg-secondary-d transition-all duration-200 peer"
            type="checkbox"
            :id="uuid"
            v-model="vModel"
--- a/src/components/Holos/Form/InputWithIcon.vue
+++ b/src/components/Holos/Form/InputWithIcon.vue
@ -65,7 +65,7 @@ onMounted(() => {

 <template>
    <div class="mb-4">
-        <div class="flex items-center border-2 py-2 px-3 rounded-2xl">
+        <div class="flex items-center border-2 py-2 px-3 rounded-sm">
            <GoogleIcon
                :name="icon"
            />
@ -73,7 +73,7 @@ onMounted(() => {
                ref="input"
                v-model="value"
                v-bind="$attrs"
-                class="pl-2 w-full outline-none border-none bg-transparent"
+                class="pl-2 w-full outline-hidden border-none bg-transparent"
                :class="{ 'cursor-not-allowed': disabled }"
                :disabled="disabled"
                :id="autoId"
--- a/src/components/Holos/Form/Todo/ItemWithForm.vue
+++ b/src/components/Holos/Form/Todo/ItemWithForm.vue
@ -111,7 +111,7 @@ onMounted(() => {
 </script>

 <template>
-    <div class="rounded border border-primary dark:border-primary-d p-2">
+    <div class="rounded-sm border border-primary dark:border-primary-d p-2">
        <p>{{ title }}</p>
        <div class="w-full grid gap-2 grid-cols-2 dark:bg-primary-d/50 rounded-md">
            <Selectable
@ -138,7 +138,7 @@ onMounted(() => {
            </div>
            <div class="col-span-2 space-y-2 ">
                <template v-for="item, index in values">
-                    <div class="relative rounded border border-primary/50">
+                    <div class="relative rounded-sm border border-primary/50">
                        <div class="grid gap-2 grid-cols-2 w-full items-center p-2 dark:bg-primary-d/50">
                            <Input
                                v-model="item.item.name"
--- a/src/components/Holos/FormSection.vue
+++ b/src/components/Holos/FormSection.vue
@ -21,7 +21,7 @@ const hasActions = computed(() => !! useSlots().actions);
        <div class="mt-5 md:mt-0 md:col-span-2">
            <form @submit.prevent="$emit('submitted')">
                <div
-                    class="p-4 sm:p-6 shadow dark:shadow-sm dark:shadow-white/50"
+                    class="p-4 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50"
                    :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
                >
                    <div class="grid grid-cols-6 gap-6">
@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
                    </div>
                </div>

-                <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 text-end sm:px-6 shadow dark:shadow-sm dark:shadow-white/50 sm:rounded-bl-md sm:rounded-br-md">
+                <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 text-end sm:px-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-bl-md sm:rounded-br-md">
                    <slot name="actions" />
                </div>
            </form>
--- a/src/components/Holos/Inbox.vue
+++ b/src/components/Holos/Inbox.vue
@ -68,7 +68,7 @@ const search = url => props.searcherCtl.searchWithInboxPagination(url);
                        </button>
                        <div
                            @click.away="filterMessages = false"
-                            class="bg-gray-200 shadow-2xl absolute left-0 top-6 w-32 py-2 text-gray-900 rounded z-10"
+                            class="bg-gray-200 shadow-2xl absolute left-0 top-6 w-32 py-2 text-gray-900 rounded-sm z-10"
                            :class="{'hidden':!filterMessages}"
                        >
                            <button
--- a/src/components/Holos/Inbox/Item.vue
+++ b/src/components/Holos/Inbox/Item.vue
@ -29,7 +29,7 @@ const selected = computed(() => {

 <template>
    <li
-        class="flex items-center rounded-lg border-y px-2 min-h-[35px] transition duration-300"
+        class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300"
        :class="{'bg-secondary text-secondary-t':selected, 'bg-primary/50 text-primary-t hover:bg-secondary/50 hover:text-secondary-t':!selected}"
    >
        <div class="pr-2">
--- a/src/components/Holos/Inbox/ItemTitle.vue
+++ b/src/components/Holos/Inbox/ItemTitle.vue
@ -1,6 +1,6 @@
 <template>
    <li
-        class="flex items-center rounded-lg border-y px-2 min-h-[35px] transition duration-300"
+        class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300"
    >
        <div class="pl-5 w-full flex items-center justify-between cursor-pointer">
            <div class="flex items-center font-semibold">
--- a/src/components/Holos/Inbox/Menu/Item.vue
+++ b/src/components/Holos/Inbox/Menu/Item.vue
@ -19,10 +19,10 @@ const props = defineProps({
 /** Propiedades computadas */
 const classes = computed(() => {
    let status = route().current(props.to, props.toParam)
-        ? 'bg-secondary bg-opacity-30'
-        : 'border-transparent hover:bg-secondary hover:bg-opacity-30';
+        ? 'bg-secondary/30'
+        : 'border-transparent hover:bg-secondary/30';

-    return ` text-primary flex items-center justify-between py-1.5 px-4 rounded cursor-pointer ${status} transition`
+    return ` text-primary flex items-center justify-between py-1.5 px-4 rounded-sm cursor-pointer ${status} transition`
 });
 </script>

@ -43,7 +43,7 @@ const classes = computed(() => {
                    {{ title }}
                </span>
            </span>
-            <span v-if="counter > 0" class="bg-primary text-gray-100 font-bold px-2 py-0.5 text-xs rounded-lg">
+            <span v-if="counter > 0" class="bg-primary text-gray-100 font-bold px-2 py-0.5 text-xs rounded-sm">
                {{ counter }}
            </span>
        </RouterLink>
--- a/src/components/Holos/Layout/App.vue
+++ b/src/components/Holos/Layout/App.vue
@ -49,7 +49,7 @@ onMounted(() => {
                />
            </div>
            <main class="flex h-full justify-center md:p-2">
-                <div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-sm md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 md:rounded-lg overflow-y-auto overflow-x-auto transition-colors duration-300">
+                <div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-xs md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 pb-4 md:rounded-sm overflow-y-auto overflow-x-auto transition-colors duration-300">
                    <slot />
                </div>
            </main>
--- a/src/components/Holos/Layout/Auth.vue
+++ b/src/components/Holos/Layout/Auth.vue
@ -47,7 +47,7 @@ onMounted(() => {
          />
        </div>

-        <main class="bg-white/10 w-full backdrop-blur-sm text-white px-4 py-4 rounded-md max-w-80">
+        <main class="bg-white/10 w-full backdrop-blur-xs text-white px-4 py-4 rounded-sm max-w-80">
          <RouterView />
        </main>

--- a/src/components/Holos/Layout/TermsLayout.vue
+++ b/src/components/Holos/Layout/TermsLayout.vue
@ -47,11 +47,11 @@ onMounted(() => {
            />
        </div>

-        <main class="bg-white/10 w-full mx-auto sm:max-w-2xl backdrop-blur-sm text-white px-4 py-8 rounded-md">
+        <main class="bg-white/10 w-full mx-auto sm:max-w-2xl backdrop-blur-xs text-white px-4 py-8 rounded-md">
          <slot />
        </main>

-        <footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-sm text-white transition-colors duration-global">
+        <footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-xs text-white transition-colors duration-global">
          <div>
              <span>
                  &copy;{{ APP_COPYRIGHT }}
--- a/src/components/Holos/Modal.vue
+++ b/src/components/Holos/Modal.vue
@ -90,7 +90,7 @@ onUnmounted(() => {
                >
                    <div 
                        v-show="show" 
-                        class="mb-6 bg-page text-page-t dark:bg-page-d dark:text-page-dt rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" 
+                        class="mb-6 bg-page text-page-t dark:bg-page-d dark:text-page-dt rounded-sm overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" 
                        :class="maxWidthClass"
                    >
                        <slot v-if="show" />
--- a/src/components/Holos/Modal/Destroy.vue
+++ b/src/components/Holos/Modal/Destroy.vue
@ -28,15 +28,17 @@ const props = defineProps({
            />
        </template>
        <template #content>
-            <div class="w-full right-0 mt-2">
-                <div class="rounded overflow-hidden shadow-lg">
+            <div class="w-full right-0">
+                <div class="overflow-hidden space-y-2 shadow-lg">
                    <slot />
+                    <div class="px-4 pb-2">
+                        <p 
+                        class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
+                        v-text="$t('delete.confirm')"
+                        />
+                    </div>
                </div>
            </div>
-            <p 
-                class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
-                v-text="$t('delete.confirm')"
-            />
        </template>
        <template #footer>
            <div class="space-x-2">
--- a/src/components/Holos/Modal/Edit.vue
+++ b/src/components/Holos/Modal/Edit.vue
@ -28,8 +28,8 @@ const props = defineProps({
            />
        </template>
        <template #content>
-            <div class="w-full right-0 mt-2">
-                <div class="rounded overflow-hidden">
+            <div class="w-full right-0">
+                <div class="overflow-hidden shadow-lg">
                    <slot />
                </div>
            </div>
--- a/src/components/Holos/Modal/Elements/Header.vue
+++ b/src/components/Holos/Modal/Elements/Header.vue
@ -7,13 +7,13 @@ defineProps({
 </script>

 <template>
-    <div class="text-center p-6 bg-primary dark:bg-primary-d border-b">
+    <div class="text-center p-6 bg-primary dark:bg-primary-d">
        <slot />
-        <p class="pt-2 text-lg font-bold text-gray-50">
+        <p class="pt-2 text-lg font-bold text-primary-t dark:text-primary-t-d">
            {{ title }}
        </p>
        <p v-if="subtitle"
-            class="text-sm text-gray-50"
+            class="text-sm text-primary-t dark:text-primary-t-d"
        >
            {{ subtitle }}
        </p>
--- a/src/components/Holos/Modal/Show.vue
+++ b/src/components/Holos/Modal/Show.vue
@ -26,8 +26,8 @@ const props = defineProps({
            />
        </template>
        <template #content>
-            <div class="w-full right-0 mt-2">
-                <div class="rounded overflow-hidden shadow-lg">
+            <div class="w-full right-0">
+                <div class="overflow-hidden shadow-lg">
                    <slot />
                </div>
            </div>
--- a/src/components/Holos/Paginable.vue
+++ b/src/components/Holos/Paginable.vue
@ -16,7 +16,7 @@ const props = defineProps({

 <template>
    <section class="pb-2">
-        <div class="w-full overflow-hidden rounded-md shadow-lg">
+        <div class="w-full overflow-hidden rounded-sm shadow-lg">
            <div v-if="!processing" class="w-full overflow-x-auto">
                <template v-if="items?.total > 0">
                    <slot
--- a/src/components/Holos/Searcher.vue
+++ b/src/components/Holos/Searcher.vue
@ -57,7 +57,7 @@ const clear = () => {
                </div>
                <input
                    id="search"
-                    class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-lg outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1"
+                    class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-sm outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1"
                    autocomplete="off"
                    :placeholder="placeholder"
                    required
--- a/src/components/Holos/Skeleton/Header.vue
+++ b/src/components/Holos/Skeleton/Header.vue
@ -31,8 +31,8 @@ const loader              = useLoader()
    <header
      class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50"
      :class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}"
-      >
-        <div class="my-2 flex px-6 items-center justify-between h-[2.75rem] rounded-lg bg-primary dark:bg-primary-d text-white z-20 ">
+    >
+      <div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-primary dark:bg-primary-d text-white z-20 ">
        <GoogleIcon
          class="text-2xl mt-1 z-50"
          name="list"
@ -45,16 +45,18 @@ const loader              = useLoader()
            <li v-if="loader.isProcessing" class="flex items-center">
              <Loader /> 
            </li>
-            <li v-if="hasPermission('users.online')">
-              <RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
-                <GoogleIcon
-                  class="text-xl mt-1"
-                  name="connect_without_contact"
-                  :title="$t('notifications.title')"
-                />
-                <span class="text-xs">{{ users.length - 1 }}</span>
-              </RouterLink>
-            </li>
+            <template v-if="notifier.isEnabled">
+              <li v-if="hasPermission('users.online')">
+                <RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
+                  <GoogleIcon
+                    class="text-xl mt-1"
+                    name="connect_without_contact"
+                    :title="$t('notifications.title')"
+                  />
+                  <span class="text-xs">{{ users.length - 1 }}</span>
+                </RouterLink>
+              </li>
+            </template>
            <li class="flex items-center">
              <GoogleIcon
                class="text-xl mt-1"
@ -86,11 +88,11 @@ const loader              = useLoader()
                  <template #trigger>
                    <div class="flex space-x-4">
                      <button
-                        class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-none transition"
+                        class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-hidden cursor-pointer transition"
                        :title="$t('users.menu')"
                      >
                        <img 
-                          class="h-8 w-8 rounded-full object-cover"
+                          class="h-8 w-8 rounded-sm object-cover"
                          :alt="$page.user.name"
                          :src="$page.user.profile_photo_url"
                        >
--- a/src/components/Holos/Skeleton/Sidebar/Left.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Left.vue
@ -29,7 +29,7 @@ const year = (new Date).getFullYear();
      :class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
    >
      <div class="flex flex-col h-full p-2 md:w-64">
-        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg  overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
+        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
          <div>
            <div class="flex w-full px-2 mt-2">
              <Logo
--- a/src/components/Holos/Skeleton/Sidebar/Link.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Link.vue
@ -21,7 +21,7 @@ const classes = computed(() => {
        ? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d'
        : 'border-transparent';

-    return `flex items-center h-11 focus:outline-none hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
+    return `flex items-center h-11 focus:outline-hidden hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
 });

 const closeSidebar = () => {
--- a/src/components/Holos/Skeleton/Sidebar/Notification.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Notification.vue
@ -42,7 +42,7 @@ const modelModal   = ref(Modal.modelModal);
      :class="{'w-64': notificationSidebar.isClosed}"
    >
      <div class="flex flex-col h-full p-2 md:w-64">
-        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg  overflow-y-auto overflow-x-hidden bg-primary/70 text-primary-t dark:bg-primary-d/70 dark:text-primary-dt">
+        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm  overflow-y-auto overflow-x-hidden bg-primary/70 text-primary-t dark:bg-primary-d/70 dark:text-primary-dt">
          <div class="flex justify-between px-2 items-center">
            <div class="py-1">
              <h4 class="text-md font-semibold">
--- a/src/components/Holos/Skeleton/Sidebar/Notification/Item.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Notification/Item.vue
@ -18,7 +18,7 @@ defineProps({
 </script>

 <template>
-    <li class="flex flex-col w-full items-center p-2 bg-primary dark:bg-primary-d text-white rounded-lg shadow-md">
+    <li class="flex flex-col w-full items-center p-2 bg-primary dark:bg-primary-d text-white rounded-sm shadow-md">
        <div class="flex w-full justify-between text-gray-400">
            <div>
                <h6 class="text-[10px]">{{ getDateTime(notification.created_at) }}</h6>
@ -43,7 +43,7 @@ defineProps({
                    </div>
                </template>
                <template v-else>
-                    <div class="w-10 h-10 bg-secondary dark:bg-secondary-d rounded-xl flex items-center justify-center">
+                    <div class="w-10 h-10 bg-secondary dark:bg-secondary-d rounded-sm flex items-center justify-center">
                        <img v-if="notification.user"
                           class="rounded-full object-cover"
                           :alt="notification.user.name"
--- a/src/components/Holos/Skeleton/Sidebar/Right.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Right.vue
@ -23,7 +23,7 @@ const props = defineProps({
      :class="{'w-64': rightSidebar.isClosed, 'w-screen': rightSidebar.isOpened}"
    >
      <div class="flex flex-col h-full p-2 md:w-64">
-        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg  overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
+        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm  overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
          <div>
            <ul class="flex h-full flex-col md:pb-4 space-y-1">
              <slot />
--- a/src/components/Holos/Table.vue
+++ b/src/components/Holos/Table.vue
@ -16,10 +16,10 @@ const props = defineProps({

 <template>
    <section class="pb-2">
-        <div class="w-full overflow-hidden rounded-md shadow-lg">
+        <div class="w-full overflow-hidden rounded-sm shadow-lg dark:shadow-xs dark:shadow-white">
            <div class="w-full overflow-x-auto">
                <table v-if="!processing" class="w-full">
-                    <thead>
+                    <thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
                        <tr>
                            <slot name="head" />
                        </tr>
@ -50,7 +50,7 @@ const props = defineProps({
                    </thead>
                    <tbody>
                        <tr>
-                            <td colspan="100%" class="table-item h-7 text-center">
+                            <td colspan="100%" class="table-cell h-7 text-center">
                                <div class="w-full h-4 bg-secondary/50 rounded-md"></div>
                            </td>
                        </tr>
--- a/src/components/Holos/TableSimple.vue
+++ b/src/components/Holos/TableSimple.vue
@ -15,7 +15,7 @@ const props = defineProps({
        <div class="w-full overflow-hidden rounded-md shadow-lg">
            <div class="w-full overflow-x-auto">
                <table class="w-full">
-                    <thead>
+                    <thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
                        <tr>
                            <slot name="head" />
                        </tr>
--- a/src/components/Holos/Timeline/Item.vue
+++ b/src/components/Holos/Timeline/Item.vue
@ -2,13 +2,14 @@
 import { computed } from 'vue';
 import { getDate, getTime } from '@Controllers/DateController';

-import PrimaryButton from '@Holos/Button/Primary.vue';
-import GoogleIcon    from '@Shared/GoogleIcon.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
 /** Eventos */
 const emit = defineEmits([
    'show',
 ]);

+/** Propiedades */
 const props = defineProps({
    event: Object,
 });
@ -27,6 +28,8 @@ const colors = {
    restored: 'primary',
 };

+/** Propiedades computadas */
+
 const eventType = computed(() => {
    return props.event.event.split('.')[1];
 });
@ -46,7 +49,7 @@ const borderColor = computed(() => {
        <div class="relative flex w-full">
            <div class="absolute -left-3.5 top-7 h-0.5 w-8" :class="bgColor"></div>
            <div 
-                class="absolute -mt-3 -left-3.5 top-7 w-6 h-6 flex items-center justify-center rounded-full" 
+                class="absolute -mt-3 -left-3.5 top-7 w-6 h-6 flex items-center justify-center rounded-sm" 
                :class="bgColor"
                @click="emit('show', event.data)"
            >
@ -54,8 +57,8 @@ const borderColor = computed(() => {
                    :name="icons[eventType]"
                />
            </div>
-            <div class="w-full rounded-lg shadow-xl dark:shadow-page-dt dark:shadow-sm my-2 mx-4">
-                <div class="flex justify-between p-2 rounded-t-lg" :class="bgColor">
+            <div class="w-full rounded-sm shadow-xl dark:shadow-page-dt dark:shadow-xs my-2 mx-4">
+                <div class="flex justify-between p-2 rounded-t-sm" :class="bgColor">
                    <span
                        class="font-medium text-sm cursor-pointer"
                        @click="emit('show', event.data)"
@ -70,7 +73,7 @@ const borderColor = computed(() => {
                    <div class="flex flex-col justify-center items-center md:flex-row md:justify-start md:space-x-4">
                        <div v-if="event.user" class="w-32">
                            <div class="flex flex-col w-full justify-center items-center space-y-2">
-                                <img :src="event.user?.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
+                                <img :src="event.user?.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-sm">
                            </div>
                        </div>
                        <div class="flex w-full flex-col justify-start space-y-2">
--- a/src/css/app.css
+++ b/src/css/app.css
@ -1,6 +1,15 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "../../colors.css";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-google-icon-outlined: "Material Symbols Outlined"; 
+  --font-google-icon-outlined-fill: "Material Symbols Outlined Fill";
+  --font-google-icon-rounded: "Material Symbols Rounded";
+  --font-google-icon-rounded-fill: "Material Symbols rounded-sm Fill";
+  --font-google-icon-sharp: "Material Symbols Sharp";
+  --font-google-icon-sharp-fill: "Material Symbols Sharp Fill";
+}

 .app-bg-light {
  @apply bg-primary
@ -11,7 +20,7 @@
 }

 .btn {
-  @apply inline-flex justify-center items-center w-fit px-1.5 py-1.5 rounded-md font-medium border border-transparent text-xs text-white uppercase tracking-widest hover:opacity-90 focus:outline-none active:saturate-150 disabled:opacity-25 transition;
+  @apply inline-flex justify-center items-center w-fit px-1.5 py-1.5 rounded-sm font-medium border border-transparent text-xs text-white uppercase tracking-widest hover:opacity-90 focus:outline-hidden active:saturate-150 disabled:opacity-25 cursor-pointer transition;
 }

 .btn-primary {
@ -35,53 +44,37 @@
 }

 .btn-icon {
-  @apply flex w-fit min-h-6 px-1.5 py-1.5 rounded-md font-medium bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt;
+  @apply flex w-fit min-h-6 px-1.5 py-1.5 rounded-sm font-medium bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt cursor-pointer;
 }

 .input-primary {
-    @apply w-full p-2 border rounded-md outline-0 bg-transparent
+  @apply w-full p-[6.5px] border-b border-page-t/50 dark:border-page-dt/50 bg-primary/5 rounded-sm outline-0 
 }

 .nav-item {
-    @apply p-1
+  @apply p-1
 }

-.table-item {
-  @apply px-2 border text-sm;
+.table-row {
+  @apply hover:bg-secondary/10 dark:hover:bg-secondary-d/10 transition-colors duration-100
+}
+
+.table-cell {
+  @apply px-2 py-0.5 text-sm border border-primary/30 dark:border-primary-dt/30;
 }

 .table-actions {
-  @apply flex justify-center items-center space-x-2;
+  @apply flex  justify-center items-center space-x-1;
 }

 nav a.router-link-active {
  @apply bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d
 }

-table {
-  @apply w-full;
-}
-
-table>thead {
-  @apply bg-primary text-white;
-}
-
-table>thead>tr {
-  @apply text-base font-semibold tracking-wide text-left text-white bg-primary dark:bg-primary-d uppercase border-b divide-indigo-50 divide-x;
-}
-
-table>thead>tr>th {
-  @apply px-2 border border-white text-sm;
-}
-
 .with-transition {
  @apply transition-all duration-300
 }

-.with-color-transition {
-    @apply transition-colors duration-500
-}
-
 /**
 * Switch
 */
--- a/src/css/base.css
+++ b/src/css/base.css
@ -1,5 +1,5 @@
+@import './app.css';
@import './icons.css';
@import './notifications.css';
@import "vue-multiselect/dist/vue-multiselect.css";
-@import './multiselect.css';
-@import './app.css';
+@import './multiselect.css';
--- a/src/css/icons.css
+++ b/src/css/icons.css
@ -38,13 +38,13 @@
 }

 /**
-* Rounded fill
+* rounded-sm fill
 *
 * https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0
 * https://fonts.gstatic.com/s/materialsymbolsrounded/v168/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
 */
@font-face {
-    font-family: 'Material Symbols Rounded Fill';
+    font-family: 'Material Symbols rounded-sm Fill';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
@ -75,18 +75,3 @@
    font-weight: 400;
    src: url(./icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
 }
-
-.material-symbols{
-    font-weight: normal;
-    font-style: normal;
-    font-size: 20spx;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-}
--- a/src/css/multiselect.css
+++ b/src/css/multiselect.css
@ -4,7 +4,7 @@

 .multiselect__input,
 .multiselect__single  {
-    @apply bg-white dark:bg-primary dark:text-white
+    @apply bg-white dark:bg-transparent dark:text-white
 }

 .multiselect__input::placeholder {
@ -12,7 +12,7 @@
 }

 .multiselect__tag {
-  @apply dark:bg-green-800;
+  @apply bg-success dark:bg-success-d;
 }

 .multiselect__tag-icon::after {
@ -25,7 +25,7 @@
 }

 .multiselect__tags {
-  @apply dark:bg-primary min-h-8 border-0 border-b border-b-slate-400 pt-1 with-color-transition;
+  @apply bg-primary/5  dark:bg-primary-d/5 min-h-8 border-0 border-b border-page-t/50 dark:border-page-dt/50 pt-1;
 }

 .multiselect__option--highlight {
@ -45,7 +45,7 @@
  }

 .multiselect__content-wrapper {
-    @apply bg-gray-100 dark:bg-primary;
+    @apply bg-page dark:bg-page-d;
  }

  
--- a/src/lang/i18n.js
+++ b/src/lang/i18n.js
@ -13,13 +13,14 @@ const messages = {
 }

 const i18n = createI18n({
+  legacy: false,
  locale,
  fallbackLocale: locale,
  messages
 });

-function lang(text) {
-  return i18n.global.t(text);
+function lang(text, params = {}) {
+  return i18n.global.t(text, params);
 }

 export {
--- a/src/pages/Admin/Activities/Index.vue
+++ b/src/pages/Admin/Activities/Index.vue
@ -81,7 +81,7 @@ onMounted(() => {
                />
            </RouterLink>
        </Header>
-        <p class="mt-2">{{ $t('admin.activity.description') }}</p>
+        <p class="mt-2 text-sm">{{ $t('admin.activity.description') }}</p>

        <div id="filters" class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4">
            <Input
--- a/src/pages/Admin/Activities/Modals/Event.vue
+++ b/src/pages/Admin/Activities/Modals/Event.vue
@ -25,37 +25,35 @@ defineProps({
            :title="model.name"
            :subtitle="model.last_name"
        />
-        <div class="py-2 border-b">
-            <div class="flex w-full px-4 py-2">
-                <GoogleIcon
-                    class="text-xl text-success"
-                    name="contact_mail"
-                />
-                <div class="pl-3 w-full">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
+        <div class="flex w-full p-4">
+            <GoogleIcon
+                class="text-xl text-success"
+                name="contact_mail"
+            />
+            <div class="pl-3 w-full">
+                <p class="font-bold text-lg leading-none pb-2">
+                    {{ $t('details') }}
+                </p>
+                <div class="text-sm">
+                    <h4 class="font-semibold">{{ $t('event') }}:</h4>
+                    <p>{{ model.event }}</p>
+                </div>
+                <div class="text-sm">
+                    <h4 class="font-semibold">{{ $t('description') }}:</h4>
+                    <p>{{ model.description }}</p>
+                </div>
+                <div class="flex w-full flex-col">
+                    <p class="font-semibold">
+                        {{ $t('changes') }}:
                    </p>
-                    <div class="text-sm">
-                        <h4 class="font-semibold">{{ $t('event') }}:</h4>
-                        <p>{{ model.event }}</p>
-                    </div>
-                    <div class="text-sm">
-                        <h4 class="font-semibold">{{ $t('description') }}:</h4>
-                        <p>{{ model.description }}</p>
-                    </div>
-                    <div class="flex w-full flex-col">
-                        <p class="font-semibold">
-                            {{ $t('changes') }}:
-                        </p>
-                        <div class="w-full text-xs p-2 border rounded-md">
-                            <pre>{{ model.data }}</pre>
-                        </div>
-                    </div>
-                    <div class="text-sm">
-                        <h4 class="font-semibold">{{ $t('created_at') }}:</h4>
-                        <p>{{ getDateTime(model.created_at) }}</p>
+                    <div class="w-full text-xs p-2 border rounded-md">
+                        <pre>{{ model.data }}</pre>
                    </div>
                </div>
+                <div class="text-sm">
+                    <h4 class="font-semibold">{{ $t('created_at') }}:</h4>
+                    <p>{{ getDateTime(model.created_at) }}</p>
+                </div>
            </div>
        </div>
    </ShowModal>
--- a/src/pages/Admin/Activities/Modals/Show.vue
+++ b/src/pages/Admin/Activities/Modals/Show.vue
@ -1,71 +0,0 @@
-<script setup>
-import { getDateTime } from '@Controllers/DateController';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-/** Eventos */
-defineEmits([
-    'close', 
-]);
-
-/** Propiedades */
-defineProps({
-    show: Boolean,
-    model: Object
-});
-</script>
-<template>
-    <ShowModal
-        :show="show"
-        @close="$emit('close')"
-    >
-        <Header
-            :title="model.name"
-            :subtitle="model.last_name"
-        >
-            <div class="flex w-full flex-col">
-                <div class="flex w-full justify-center items-center">
-                    <img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
-                </div>
-            </div>
-        </Header>
-        <div class="py-2 border-b">
-            <div class="flex w-full px-4 py-2">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="contact_mail"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <p>
-                        <b>{{ $t('name') }}: </b>
-                        {{ model.full_name }}
-                    </p>
-                    <p>
-                        <b>{{ $t('phone') }}: </b>
-                        <a :href="`tel:${model.phone}`" target="_blank" class="hover:text-danger">
-                            {{ model.phone ?? '-' }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('email.title') }}: </b>
-                        <a :href="`mailto:${model.email}`" target="_blank" class="hover:text-danger">
-                            {{ model.email }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p>
-                        <b>{{ $t('updated_at') }}: </b>
-                        {{ getDateTime(model.updated_at) }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
--- a/src/pages/Admin/Roles/Form.vue
+++ b/src/pages/Admin/Roles/Form.vue
@ -25,7 +25,7 @@ function submit() {
 </script>

 <template>
-    <div class="w-full py-4">
+    <div class="w-full pb-2">
        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
    </div>
    <div class="w-full">
--- a/src/pages/Admin/Roles/Index.vue
+++ b/src/pages/Admin/Roles/Index.vue
@ -70,11 +70,11 @@ onMounted(() => {
                    />
                </template>
                <template #body="{items}">
-                    <tr v-for="model in items">
-                        <td class="table-item border">
+                    <tr v-for="model in items" class="table-row">
+                        <td class="table-cell border">
                            {{ model.description }}
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <div class="table-actions">
                                <IconButton
                                    v-if="can('edit') && ![1,2].includes(model.id)"
--- a/src/pages/Admin/Roles/Modals/Permissions.vue
+++ b/src/pages/Admin/Roles/Modals/Permissions.vue
@ -59,21 +59,19 @@ onUpdated(() => {
        <Header
            :title="model.description"
        />
-        <div class="p-4 border-b">
+        <div class="p-4">
            <div class="grid gap-4 grid-cols-2">
                <div v-for="permissionType in permissionTypes">
-                    <div>
-                        <p class="font-bold">{{ permissionType.name}}</p>
-                        <ul class="space-y-0.5 list-none">
-                            <li v-for="permission in permissionType.permissions">
-                                <Checkbox
-                                    v-model="permissions"
-                                    :title="permission.description"
-                                    :value="permission.id"
-                                />
-                            </li>
-                        </ul>
-                    </div>
+                    <p class="font-bold">{{ permissionType.name}}</p>
+                    <ul class="space-y-0.5 list-none">
+                        <li v-for="permission in permissionType.permissions">
+                            <Checkbox
+                                v-model="permissions"
+                                :title="permission.description"
+                                :value="permission.id"
+                            />
+                        </li>
+                    </ul>
                </div>
            </div>
        </div>
--- a/src/pages/Admin/Users/Form.vue
+++ b/src/pages/Admin/Users/Form.vue
@ -25,7 +25,7 @@ function submit() {
 </script>

 <template>
-    <div class="w-full py-4">
+    <div class="w-full pb-2">
        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
    </div>
    <div class="w-full">
@ -41,28 +41,24 @@ function submit() {
                v-model="form.paternal"
                id="paternal"
                :onError="form.errors.paternal"
-                autofocus
                required
            />
            <Input
                v-model="form.maternal"
                id="maternal"
                :onError="form.errors.maternal"
-                autofocus
            />
            <Input
                v-model="form.phone"
                id="phone"
                :onError="form.errors.phone"
                type="number"
-                autofocus
            />
            <Input
                v-model="form.email"
                id="email.title"
                type="email"
                :onError="form.errors.email"
-                autofocus
                required
            />
            <slot />
--- a/src/pages/Admin/Users/Index.vue
+++ b/src/pages/Admin/Users/Index.vue
@ -22,6 +22,7 @@ const modelModal   = ref(Modal.modelModal);

 const models = ref([]);

+/** Métodos */
 const searcher = useSearcher({
    url: apiTo('index'),
    onSuccess: (r) => models.value = r.models,
@ -72,11 +73,14 @@ onMounted(() => {
                    />
                </template>
                <template #body="{items}">
-                    <tr v-for="model in items">
-                        <td class="table-item border">
+                    <tr
+                        v-for="model in items"
+                        class="table-row"
+                    >
+                        <td class="table-cell">
                            {{ `${model.name} ${model.paternal}` }}
                        </td>
-                        <td class="table-item border">
+                        <td class="table-cell">
                            <p>
                                <a 
                                    class="hover:underline"
@ -88,16 +92,16 @@ onMounted(() => {
                            </p>
                            <p v-if="model.phone" class="font-semibold text-xs">
                                <b>Teléfono: </b>
-                                <a 
+                                <span
                                    class="hover:underline"
                                    target="_blank"
                                    :href="`tel:${model.phone}`"
                                >
                                    {{ model.phone }}
-                                </a>
+                                </span>
                            </p>
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <div class="table-actions">
                                <IconButton
                                    icon="visibility"
@ -148,15 +152,15 @@ onMounted(() => {
                    </tr>
                </template>
                <template #empty>
-                    <td class="table-item border">
+                    <td class="table-cell">
                        <div class="flex items-center text-sm">
                            <p class="font-semibold">
                                {{ $t('registers.empty') }}
                            </p>
                        </div>
                    </td>
-                    <td class="table-item border">-</td>
-                    <td class="table-item border">-</td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
                </template>
            </Table>
        </div>
--- a/src/pages/Admin/Users/Modals/Show.vue
+++ b/src/pages/Admin/Users/Modals/Show.vue
@ -30,41 +30,39 @@ defineProps({
                </div>
            </div>
        </Header>
-        <div class="py-2 border-b">
-            <div class="flex w-full px-4 py-2">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="contact_mail"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <p>
-                        <b>{{ $t('name') }}: </b>
-                        {{ model.full_name }}
-                    </p>
-                    <p>
-                        <b>{{ $t('phone') }}: </b>
-                        <a :href="`tel:${model.phone}`" target="_blank" class="hover:text-danger">
-                            {{ model.phone ?? '-' }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('email.title') }}: </b>
-                        <a :href="`mailto:${model.email}`" target="_blank" class="hover:text-danger">
-                            {{ model.email }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p>
-                        <b>{{ $t('updated_at') }}: </b>
-                        {{ getDateTime(model.updated_at) }}
-                    </p>
-                </div>
+        <div class="flex w-full p-4">
+            <GoogleIcon 
+                class="text-xl text-success"
+                name="contact_mail"
+            />
+            <div class="pl-3">
+                <p class="font-bold text-lg leading-none pb-2">
+                    {{ $t('details') }}
+                </p>
+                <p>
+                    <b>{{ $t('name') }}: </b>
+                    {{ model.full_name }}
+                </p>
+                <p>
+                    <b>{{ $t('phone') }}: </b>
+                    <a :href="`tel:${model.phone}`" target="_blank" class="hover:text-danger">
+                        {{ model.phone ?? '-' }}
+                    </a>
+                </p>
+                <p>
+                    <b>{{ $t('email.title') }}: </b>
+                    <a :href="`mailto:${model.email}`" target="_blank" class="hover:text-danger">
+                        {{ model.email }}
+                    </a>
+                </p>
+                <p>
+                    <b>{{ $t('created_at') }}: </b>
+                    {{ getDateTime(model.created_at) }}
+                </p>
+                <p>
+                    <b>{{ $t('updated_at') }}: </b>
+                    {{ getDateTime(model.updated_at) }}
+                </p>
            </div>
        </div>
    </ShowModal>
--- a/src/pages/Admin/Users/Online.vue
+++ b/src/pages/Admin/Users/Online.vue
@ -55,13 +55,13 @@ const modelModal   = ref(Modal.modelModal);
                <template #body="{items}">
                    <template v-for="model in items">
                        <tr v-if="model.id != 1">
-                            <td class="table-item border">
+                            <td class="table-cell border">
                                <img :src="model.profile_photo_url" alt="Profile photo" class="w-10 h-10 rounded-full">
                            </td>
-                            <td class="table-item border">
+                            <td class="table-cell border">
                                {{ `${model.full_name}` }}
                            </td>
-                            <td class="table-item border">
+                            <td class="table-cell border">
                                <p>
                                    <a 
                                        class="hover:underline"
@ -82,7 +82,7 @@ const modelModal   = ref(Modal.modelModal);
                                    </a>
                                </p>
                            </td>
-                            <td class="table-item">
+                            <td class="table-cell">
                                <div class="table-actions">
                                    <IconButton
                                        icon="visibility"
--- a/src/pages/Admin/Users/Settings.vue
+++ b/src/pages/Admin/Users/Settings.vue
@ -35,13 +35,13 @@ onMounted(() => {
          />
      </RouterLink>
    </PageHeader>
-    <div class="flex w-full pt-2">
-        <div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-lg">
+    <div class="flex w-full">
+        <div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-sm">
            <p class="pt-2 text-lg font-bold text-gray-50">
                {{ user?.name }}
            </p>
            <p class="text-sm text-gray-100">
-                {{ user?.full_last_name }}
+                {{ user?.last_name }}
            </p>
        </div>
    </div>
--- a/src/pages/Auth/Register.vue
+++ b/src/pages/Auth/Register.vue
@ -96,11 +96,11 @@ const submit = () => {

                        <div class="ms-2 text-primary-t dark:text-primary-dt">
                            I agree to the
-                            <a target="_blank" :href="route('terms.show')" class="underline text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                            <a target="_blank" :href="route('terms.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                {{ $t('terms.service') }}
                            </a>
                            and
-                            <a target="_blank" :href="route('policy.show')" class="underline text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                            <a target="_blank" :href="route('policy.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                {{ $t('policy.privacy') }}
                            </a>
                        </div>
@ -110,7 +110,7 @@ const submit = () => {
            </div>

            <div class="flex items-center justify-end mt-4">
-                <Link :href="route('login')" class="underline text-sm bg-page-text hover:bg-page-background text-page-background hover:text-page-text rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <Link :href="route('login')" class="underline text-sm bg-page-text hover:bg-page-background text-page-background hover:text-page-text rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    {{ $t('auth.register.already') }}
                </Link>

--- a/src/pages/Changelogs/App.vue
+++ b/src/pages/Changelogs/App.vue
@ -95,13 +95,13 @@ const changelogs = [
            <template #body="{items}">
                <template v-for="item in items">
                    <tr>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <span v-text="item.version" />
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <span v-text="item.date" />
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <ul class="list-disc list-inside">
                                <li v-for="detail in item.details.reverse()" v-text="detail" />
                            </ul>
--- a/src/pages/Changelogs/Core.vue
+++ b/src/pages/Changelogs/Core.vue
@ -35,13 +35,13 @@ onMounted(() => {
            <template #body="{items}">
                <template v-for="item in items">
                    <tr>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <span v-text="item.version" />
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <span v-text="item.date" />
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <ul class="list-disc list-inside">
                                <li v-for="detail in item.changes" v-text="detail" />
                            </ul>
--- a/src/pages/Profile/Notifications/Index.vue
+++ b/src/pages/Profile/Notifications/Index.vue
@ -68,23 +68,23 @@ onMounted(() => {
                    />
                </template>
                <template #body="{items}">
-                    <tr v-for="model in items">
-                        <td class="table-item border">
+                    <tr v-for="model in items" class="table-row">
+                        <td class="table-cell border">
                            {{ model.data.title }}
                        </td>
-                        <td class="table-item border">
+                        <td class="table-cell border">
                            {{ model.data.description }}
                        </td>
-                        <td class="table-item border">
+                        <td class="table-cell border">
                            {{ getDateTime(model.created_at) }}
                        </td>
-                        <td class="table-item border">
+                        <td class="table-cell border">
                            <div class="flex items-center justify-center">
                                <div class="w-2 h-2 rounded-full" :class="model.read_at ? 'bg-success' : 'bg-danger'"></div>
                                <span class="ml-2">{{ model.read_at ? $t('readed') : (model.is_closed ? $t('omitted') : $t('unreaded')) }}</span>
                            </div>
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <div class="table-actions">
                                <IconButton
                                    icon="visibility"
@ -105,17 +105,17 @@ onMounted(() => {
                    </tr>
                </template>
                <template #empty>
-                    <td class="table-item border">
+                    <td class="table-cell border">
                        <div class="flex items-center text-sm">
                            <p class="font-semibold">
                                {{ $t('registers.empty') }}
                            </p>
                        </div>
                    </td>
-                    <td class="table-item border">-</td>
-                    <td class="table-item border">-</td>
-                    <td class="table-item border">-</td>
-                    <td class="table-item border">-</td>
+                    <td class="table-cell border">-</td>
+                    <td class="table-cell border">-</td>
+                    <td class="table-cell border">-</td>
+                    <td class="table-cell border">-</td>
                </template>
            </Table>
        </div>
--- a/src/pages/Profile/Partials/DeleteUserForm.vue
+++ b/src/pages/Profile/Partials/DeleteUserForm.vue
@ -69,16 +69,19 @@ const closeModal = () => {
                </template>

                <template #content>
-                    {{ $t('account.delete.confirm') }}
+                    <div class="px-4 pb-2">
+                        <p>{{ $t('account.delete.confirm') }}</p>
+    
+                        <div class="mt-4">
+                            <Input
+                                ref="passwordInput"
+                                v-model="form.password"
+                                id="password"
+                                type="password"
+                                :onError="form.errors.password"
+                            />
+                        </div>

-                    <div class="mt-4">
-                        <Input
-                            ref="passwordInput"
-                            v-model="form.password"
-                            id="password"
-                            type="password"
-                            :onError="form.errors.password"
-                        />
                    </div>
                </template>

--- a/src/router/Index.js
+++ b/src/router/Index.js
@ -16,33 +16,40 @@ const router = createRouter({
    routes: [
        {
            path: '/',
-            name: 'index',
-            redirect: '/dashboard'
-        },
-        {
-            path: '/dashboard',
-            name: 'dashboard.index',
-            component: () => import('@Pages/Dashboard/Index.vue')
-        }, {
-            path: '/profile',
            children: [
                {
                    path: '',
-                    name: 'profile.show',
-                    component: () => import('@Pages/Profile/Show.vue')
+                    name: 'index',
+                    redirect: '/dashboard'
                },
                {
-                    path: 'notifications',
+                    path: 'dashboard',
+                    name: 'dashboard.index',
+                    component: () => import('@Pages/Dashboard/Index.vue')
+                },
+                {
+                    path: 'profile',
                    children: [
                        {
                            path: '',
-                            name: 'profile.notifications.index',
-                            component: () => import('@Pages/Profile/Notifications/Index.vue')
-                        }
+                            name: 'profile.show',
+                            component: () => import('@Pages/Profile/Show.vue')
+                        },
+                        {
+                            path: 'notifications',
+                            children: [
+                                {
+                                    path: '',
+                                    name: 'profile.notifications.index',
+                                    component: () => import('@Pages/Profile/Notifications/Index.vue')
+                                }
+                            ]
+                        },
                    ]
                },
-            ]
-        }, {
+            ],
+        },
+        {
            path: '/admin',
            children: [
                {
--- a/src/stores/Notifier.js
+++ b/src/stores/Notifier.js
@ -4,9 +4,6 @@ import { page } from '@Services/Page'
 import { hasPermission, reloadPermissions, getAllRolesIds } from '@Plugins/RolePermission'
 import { boot as bootAuthUsers, addUser, removeUser } from '@Plugins/AuthUsers'

-/** Propiedades */
-const hasNotifications = import.meta.env.VITE_REVERB_ACTIVE === 'true';
-
 // Almacenar estado de la barra lateral derecha
 const useNotifier = defineStore('notifier', {
    state: () => ({
@ -14,12 +11,13 @@ const useNotifier = defineStore('notifier', {
        unreadClosedCounter: 0,
        notifications: [],
        isStarted: false,
+        isEnabled: import.meta.env.VITE_REVERB_ACTIVE === 'true',
        user_id: 0,
    }),
    actions: {
        // Iniciar instancia
        boot() {
-            if(!this.isStarted && hasNotifications) {
+            if(!this.isStarted && this.isEnabled) {
                this.user_id = page.user.id;

                this.subscribeGLobalNotifications();
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,26 +0,0 @@
-import defaultTheme from 'tailwindcss/defaultTheme';
-import colors from './colors.json'
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'class',
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}"
-  ],
-  theme: {
-    extend: {
-      colors: colors,
-      fontFamily: {
-        sans: ['Figtree', ...defaultTheme.fontFamily.sans],
-        'google-icon-outlined':['Material Symbols Outlined'],
-        'google-icon-outlined-fill':['Material Symbols Outlined Fill'],
-        'google-icon-rounded':['Material Symbols Rounded'],
-        'google-icon-rounded-fill':['Material Symbols Rounded Fill'],
-        'google-icon-sharp':['Material Symbols Sharp'],
-        'google-icon-sharp-fill':['Material Symbols Sharp Fill'],
-      },
-    },
-  },
-  plugins: [],
-}
--- a/vite.config.js
+++ b/vite.config.js
@ -1,11 +1,12 @@
 import { fileURLToPath, URL } from 'node:url'

 import { defineConfig } from 'vite'
+import tailwindcss from "@tailwindcss/vite";
 import vue from '@vitejs/plugin-vue'

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), tailwindcss()],
  build: {
    rollupOptions: {
      input: {
@ -14,6 +15,9 @@ export default defineConfig({
      },
    },
  },
+  server: {
+    allowedHosts: true,
+  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),