From 5a73ef6662bb7b1cb4f786c3321e563582927181 Mon Sep 17 00:00:00 2001
From: lizandrogd <77708265+lizandrogd@users.noreply.github.com>
Date: Mon, 7 Jul 2025 16:21:45 -0500
Subject: [PATCH] Update show-usuarios.blade.php

---
 .../views/livewire/show-usuarios.blade.php    | 126 ++++++++++--------
 1 file changed, 67 insertions(+), 59 deletions(-)

diff --git a/resources/views/livewire/show-usuarios.blade.php b/resources/views/livewire/show-usuarios.blade.php
index 249f8ca..f0fae50 100755
--- a/resources/views/livewire/show-usuarios.blade.php
+++ b/resources/views/livewire/show-usuarios.blade.php
@@ -445,70 +445,78 @@
         </div>
 
         {{-- Añadir usuario --}}
-        <div x-cloak x-show="add" x-transition:enter="transition duration-350"
-            x-transition:enter-start="opacity-0 scale-100" x-transition:enter-end="opacity-100 scale-100"
-            x-transition:leave="transition duration-350" x-transition:leave-start="opacity-100 scale-100"
-            x-transition:leave-end="opacity-0 scale-100"
-            class="absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full">
-            <div class="grid h-full place-items-center ">
-                <form>
-                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
-                        <div class="mb-4">
-                            <label for="nombre" class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
-                            <input type="text" id="nombre" wire:model="nombre"
-                                class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                            @error('nombre')
-                                <span class="text-red-400 text-sm ">Requerido*</span>
-                            @enderror
-                        </div>
+<div x-cloak x-show="add"
+    x-transition:enter="transition duration-350"
+    x-transition:enter-start="opacity-0 scale-100"
+    x-transition:enter-end="opacity-100 scale-100"
+    x-transition:leave="transition duration-350"
+    x-transition:leave-start="opacity-100 scale-100"
+    x-transition:leave-end="opacity-0 scale-100"
+    class="fixed inset-0 z-50 backdrop-blur-sm bg-black/20">
+    <div class="grid h-full place-items-center">
+        <form>
+            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md w-[20rem] sm:w-[24rem]">
+                <!-- Nombre -->
+                <div class="mb-4">
+                    <label for="nombre" class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
+                    <input type="text" id="nombre" wire:model="nombre"
+                        class="border-2 border-neutral-200 rounded-[0.8rem] shadow appearance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    @error('nombre')
+                        <span class="text-red-400 text-sm">Requerido*</span>
+                    @enderror
+                </div>
 
-                        <div class="mb-4">
-                            <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email:</label>
-                            <input type="text" id="email" wire:model="email"
-                                class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                            @error('email')
-                                <span class="text-red-400 text-sm ">Requerido*</span>
-                            @enderror
-                        </div>
+                <!-- Email -->
+                <div class="mb-4">
+                    <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email:</label>
+                    <input type="text" id="email" wire:model="email"
+                        class="border-2 border-neutral-200 rounded-[0.8rem] shadow appearance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    @error('email')
+                        <span class="text-red-400 text-sm">Requerido*</span>
+                    @enderror
+                </div>
 
-                        <div class="mb-4">
-                            <label for="password"
-                                class="block text-gray-700 text-sm font-bold mb-2">Contraseña:</label>
-                            <input type="text" id="password" wire:model="password"
-                                class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                            @error('password')
-                                <span class="text-red-400 text-sm ">Requerido*</span>
-                            @enderror
-                        </div>
+                <!-- Contraseña -->
+                <div class="mb-4">
+                    <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Contraseña:</label>
+                    <input type="text" id="password" wire:model="password"
+                        class="border-2 border-neutral-200 rounded-[0.8rem] shadow appearance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    @error('password')
+                        <span class="text-red-400 text-sm">Requerido*</span>
+                    @enderror
+                </div>
 
-                        <div class="mb-4">
-                            <label class="select-none text-gray-700 text-sm font-bold mb-2">Selecciona rol:</label>
-                            <select name="estado_promocion" id="estado_promocion" wire:model="rol" class="w-full border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                                <option selected>Rol</option>
-                                @foreach ($roles as $rol)
-                                    <option value="{{ $rol->id }}">{{ $rol->nombre }}</option>
-                                @endforeach
-                            </select>
-                            @error('rol')
-                                <span class="text-red-400 text-sm ">Requerido*</span>
-                            @enderror
-                        </div>
+                <!-- Rol -->
+                <div class="mb-4">
+                    <label for="estado_promocion" class="block text-gray-700 text-sm font-bold mb-2">Selecciona rol:</label>
+                    <select id="estado_promocion" wire:model="rol"
+                        class="w-full border-2 border-neutral-200 rounded-[0.8rem] shadow appearance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                        <option selected>Rol</option>
+                        @foreach ($roles as $rol)
+                            <option value="{{ $rol->id }}">{{ $rol->nombre }}</option>
+                        @endforeach
+                    </select>
+                    @error('rol')
+                        <span class="text-red-400 text-sm">Requerido*</span>
+                    @enderror
+                </div>
 
-                        <div
-                            class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
-                            <span>
-                                <button wire:click="crear" type="button"
-                                    class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
-                            </span>
-                            <span>
-                                <button wire:click="limpiarInputAdd" type="button"
-                                    class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
-                            </span>
-                        </div>
-                    </div>
-                </form>
+                <!-- Botones -->
+                <div class="px-4 py-3 sm:px-6 flex flex-col sm:flex-row-reverse sm:justify-evenly gap-3 mt-4">
+                    <button wire:click="crear" type="button"
+                        class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out text-sm">
+                        Guardar
+                    </button>
+                    <button wire:click="limpiarInputAdd" type="button"
+                        class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] ease-in-out text-sm">
+                        Cerrar
+                    </button>
+                </div>
             </div>
-        </div>
+        </form>
+    </div>
+</div>
+
 
         {{-- editar usuario --}}
         <div x-cloak x-show="editar" x-transition:enter="transition duration-350"