diff --git a/app/Http/Livewire/ShowPlanes.php b/app/Http/Livewire/ShowPlanes.php
index 8f3a451..e1b5536 100644
--- a/app/Http/Livewire/ShowPlanes.php
+++ b/app/Http/Livewire/ShowPlanes.php
@@ -472,6 +472,10 @@ class ShowPlanes extends Component
 
 
         $tarifa = json_decode($this->tarifa, true);
+
+
+        // dd($tarifa)
+
         //dd($this->tarifa['dias']);
         $usuario_existe = User::firstWhere('email', $this->searchTerm)->id ?? null;
         $usuario_id = $usuario_existe;
@@ -484,11 +488,12 @@ class ShowPlanes extends Component
             $usuario->password = '123456';
             $usuario->celular = '+57';
             $usuario->rol_id = $rol_id;
-            $usuario->save();
+            // $usuario->save();
 
             $usuario_id = $usuario->id;
         }
 
+        dd($this->tarifa);
 
         $historial = new Historiale;
         $historial->fecha_inicio = Carbon::now();
@@ -500,28 +505,59 @@ class ShowPlanes extends Component
         $historial->tarifa_id = $tarifa['id'];
         $historial->cliente_id = $usuario_id;
         $historial->cantidad = $tarifa['pantallas'];
-        $historial->save();
+        // $historial->save();
 
-        $consultaHC = Historial_cuenta::where('cuenta_id', $this->consulta_verUsuarios->id)->where('perfil', $this->perfil)->exists();
 
-        if (!$consultaHC) {
+        if ($this->consulta_verUsuarios->estado == 'pendiente') { // completa
+            $perfiles = $this->consulta_verUsuarios->servicio->completa;
+        }
+
+        if ($this->consulta_verUsuarios->estado == 'activo') {  // pantallas
+            $perfiles = $this->consulta_verUsuarios->servicio->pantallas;
+        }
+
+
+        dd($this->consulta_verUsuarios);
+
+
+
+        $consultaHC = Historial_cuenta::where('cuenta_id', $this->consulta_verUsuarios->id)->orderBy('created_at', 'desc')->first()->perfil ?? 0;
+        
+        if ($consultaHC) {
+            if ($consultaHC < 5) {
+                $historial_cuenta = new Historial_cuenta;
+                $historial_cuenta->cuenta_id  = $this->consulta_verUsuarios->id;
+                $historial_cuenta->historial_id = $historial->id;
+                $historial_cuenta->perfil = $consultaHC + 1;
+                // $historial_cuenta->save();
+                
+                $this->alert('success', 'Usuario añadido correctamente!', [
+                    'position' => 'top'
+                ]);
+
+                
+                $this->addUser = false;
+                $this->consulta_verUsuarios  = Cuentas::with('historiales', 'servicio')->where('id', $this->id_cuentaVer)->first();
+            }else{
+                $historial->delete();
+                $this->alert('warning', 'Ya haz alcanzado el maximo de perfiles!', [
+                    'position' => 'top'
+                ]);
+            }
+        } else {
             $historial_cuenta = new Historial_cuenta;
             $historial_cuenta->cuenta_id  = $this->consulta_verUsuarios->id;
             $historial_cuenta->historial_id = $historial->id;
-            $historial_cuenta->perfil = $this->perfil;
-            $historial_cuenta->save();
-
+            $historial_cuenta->perfil = $consultaHC + 1;
+            // $historial_cuenta->save();
+            
             $this->alert('success', 'Usuario añadido correctamente!', [
                 'position' => 'top'
             ]);
 
+            
             $this->addUser = false;
             $this->consulta_verUsuarios  = Cuentas::with('historiales', 'servicio')->where('id', $this->id_cuentaVer)->first();
-        } else {
-            $historial->delete();
-            $this->alert('warning', 'El perfil ya se encuentra en uso!', [
-                'position' => 'top'
-            ]);
         }
     }
 
diff --git a/resources/views/components/listado-planes.blade.php b/resources/views/components/listado-planes.blade.php
index d556a10..fbe6374 100644
--- a/resources/views/components/listado-planes.blade.php
+++ b/resources/views/components/listado-planes.blade.php
@@ -55,8 +55,7 @@
                     <p class="text-orange-600 font-semibold"> Ocupado </p>
                 @endif
             @else
-                <p
-                    class="@if (($cuenta->historiales_count ?? '') == ($cuenta->servicio->pantallas ?? '')) text-orange-600 font-semibold @else  text-green-600 font-semibold @endif">
+                <p class="@if (($cuenta->historiales_count ?? '') == ($cuenta->servicio->pantallas ?? '')) text-orange-600 font-semibold @else  text-green-600 font-semibold @endif">
                     {{ $cuenta->historiales_count ?? '0' }}/{{ $cuenta->servicio->pantallas ?? '0' }} @endif
                     @if ($historiales >= '1')
                         <span class="text-green-500  px-2 py-1 rounded-full  bg-green-300">{{ $historiales }}</span>
diff --git a/resources/views/livewire/show-planes.blade.php b/resources/views/livewire/show-planes.blade.php
index 1fc87be..a596eb1 100644
--- a/resources/views/livewire/show-planes.blade.php
+++ b/resources/views/livewire/show-planes.blade.php
@@ -6,8 +6,8 @@
     serviciosModal: @entangle('serviciosModal'),
     ver: false,
     renovar: @entangle('renovar'),
-    addUser:@entangle('addUser'),
-    editarTarifaRol:@entangle('editarTarifaRol'),
+    addUser: @entangle('addUser'),
+    editarTarifaRol: @entangle('editarTarifaRol'),
 
 }" class="h-full w-full md:my-2">
     <div class=" fixed backdrop-blur-sm bg-white/70 left-0 bottom-0 top-0 right-0 h-full z-40" wire:loading
@@ -22,14 +22,13 @@
 
 
     {{-- Buscador --}}
-    <div
-        class="bg-[#f5f5f5]   md:w-[100%] m-auto p-2 md:p-5 rounded-[1.2rem]  relative  mb-4">
+    <div class="bg-[#f5f5f5]   md:w-[100%] m-auto p-2 md:p-5 rounded-[1.2rem]  relative  mb-4">
         <div class="grid grid-cols-1 text-center sm:flex justify-between my-2 items-center text-sm ">
             <div class="grid grid-cols-1  sm:flex items-center gap-4">
                 <div class="flex text-sm">
                     <svg class="w-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                        xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" x="0" y="0"
-                        viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
+                        xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" x="0" y="0" viewBox="0 0 24 24"
+                        style="enable-background:new 0 0 512 512" xml:space="preserve">
                         <g>
                             <path
                                 d="M15.4,9.88,10.81,5.29a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42L14,11.29a1,1,0,0,1,0,1.42L9.4,17.29a1,1,0,0,0,1.41,1.42l4.59-4.59A3,3,0,0,0,15.4,9.88Z"
@@ -38,33 +37,32 @@
                     </svg>
                     Planes
                 </div>
-                
+
                 <a x-on:click="newCuenta = true"
                     class="justify-center flex px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">
                     Nueva cuenta
                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
-                        id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512"
-                        style="enable-background:new 0 0 512 512;" xml:space="preserve" class="w-[0.87rem] ml-2">
+                        id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
+                        xml:space="preserve" class="w-[0.87rem] ml-2">
                         <path
                             d="M480,224H288V32c0-17.673-14.327-32-32-32s-32,14.327-32,32v192H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h192v192   c0,17.673,14.327,32,32,32s32-14.327,32-32V288h192c17.673,0,32-14.327,32-32S497.673,224,480,224z"
                             fill="#ffffff" />
                     </svg>
                 </a>
-                @if ( auth()->user()->rol->nombre != "editor")
-                <a x-on:click="modTarifas = true"
-                    class="justify-center flex px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">
-                    Modificar tarifas
-                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                        xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" class="w-4 ml-2" x="0"
-                        y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512"
-                        xml:space="preserve">
-                        <polygon points="14.604 5.687 0 20.29 0 24 3.71 24 18.313 9.396 14.604 5.687" fill="#ffffff"
-                            data-original="#000000" />
-                        <path
-                            d="M23.232.768a2.624,2.624,0,0,0-3.71,0l-3.5,3.505,3.709,3.709,3.5-3.5A2.624,2.624,0,0,0,23.232.768Z"
-                            fill="#ffffff" data-original="#000000" />
-                    </svg>
-                </a>
+                @if (auth()->user()->rol->nombre != 'editor')
+                    <a x-on:click="modTarifas = true"
+                        class="justify-center flex px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">
+                        Modificar tarifas
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                            xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" class="w-4 ml-2" x="0" y="0"
+                            viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
+                            <polygon points="14.604 5.687 0 20.29 0 24 3.71 24 18.313 9.396 14.604 5.687" fill="#ffffff"
+                                data-original="#000000" />
+                            <path
+                                d="M23.232.768a2.624,2.624,0,0,0-3.71,0l-3.5,3.505,3.709,3.709,3.5-3.5A2.624,2.624,0,0,0,23.232.768Z"
+                                fill="#ffffff" data-original="#000000" />
+                        </svg>
+                    </a>
                 @endif
             </div>
             <div class="flex relative my-2">
@@ -72,8 +70,8 @@
                     class="w-full md:w-auto shadow-md border-2 active:border-neutral-200 focus:ring-0 border-neutral-200 rounded-[0.8rem] pr-7 py-1 m-auto focus:border-neutral-300  focus:outline-none focus:shadow-outline">
                 <svg class="w-5 absolute top-2 right-3" xmlns="http://www.w3.org/2000/svg" version="1.1"
                     xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="w-4 absolute"
-                    x="0" y="0" viewBox="0 0 24 24"
-                    style="enable-background:new 0 0 512 512;rotate: 90deg;" xml:space="preserve" class="">
+                    x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512;rotate: 90deg;"
+                    xml:space="preserve" class="">
                     <g>
                         <g id="Layer_31" data-name="Layer 31">
                             <path
@@ -83,43 +81,44 @@
                     </g>
                 </svg>
             </div>
-            
-                <div class="my-1 md:my-0">
-                    <label for="completa">Completas</label>
+
+            <div class="my-1 md:my-0">
+                <label for="completa">Completas</label>
                 <input type="checkbox" name="" id="completa" wire:model="completa">
-                </div>
-                <div class="my-1 md:my-0">
-                    <label for="Pantallas">Pantallas</label>
+            </div>
+            <div class="my-1 md:my-0">
+                <label for="Pantallas">Pantallas</label>
                 <input type="checkbox" name="" id="Pantallas" wire:model="pantallas">
+            </div>
+            <div class="my-1 md:my-0">
+                <label for="cbox2">Vencidos</label>
+                <input type="checkbox" name="" id="cbox2" wire:model="venceHoy">
+
+            </div>
+            <div class="my-1 md:my-0">
+                <div class="my-1 md:my-0">
+                    <label for="activos">Activos</label>
+                    <input type="checkbox" name="" id="activos" wire:model="activoHoy">
                 </div>
                 <div class="my-1 md:my-0">
-                    <label for="cbox2">Vencidos</label>
-                    <input type="checkbox" name="" id="cbox2" wire:model="venceHoy">
-                    
+                    <label for="Libres 100%">Libres 100%</label>
+                    <input type="checkbox" name="" id="Libres 100%" wire:model="libres">
                 </div>
                 <div class="my-1 md:my-0">
-                    <div class="my-1 md:my-0">
-                        <label for="activos">Activos</label>
-                        <input type="checkbox" name="" id="activos" wire:model="activoHoy">
-                    </div>
-                    <div class="my-1 md:my-0">
-                        <label for="Libres 100%">Libres 100%</label>
-                        <input type="checkbox" name="" id="Libres 100%" wire:model="libres">
-                    </div>
-                    <div class="my-1 md:my-0">
-                        <label for="Repetidas">Repetidas</label>
-                        <input type="checkbox" name="" id="Repetidas" wire:model="repetidas">
-                    </div>
-                    
-                    
+                    <label for="Repetidas">Repetidas</label>
+                    <input type="checkbox" name="" id="Repetidas" wire:model="repetidas">
                 </div>
-                @if (auth()->user()->rol->nombre != "editor")
+
+
+            </div>
+            @if (auth()->user()->rol->nombre != 'editor')
                 <div class="my-1 md:my-0">
-                    <button wire:click="eliminarCuentas" class="bg-red-400 text-white px-4 py-2 rounded">Eliminar</button>
+                    <button wire:click="eliminarCuentas"
+                        class="bg-red-400 text-white px-4 py-2 rounded">Eliminar</button>
                 </div>
-                @endif
-            
-           
+            @endif
+
+
 
             <div class="grid mt-4 sm:mt-0 sm:flex w-[8rem]">
                 <select name="servicios" id="servicios" wire:model.debounce.500ms="servicios_id"
@@ -137,18 +136,18 @@
         <x-primary-table>
             <x-slot name="thead">
                 <tr class="text-left">
-                <th class="rounded-l-lg font-normal pl-[2rem]"></th>
-                <th class="font-normal pl-[2rem]">id</th>
-                <th class="font-normal pl-[2rem]">Servicio</th>
-                <th class="font-normal pl-[2rem]">Correo</th>
-                <th class="font-normal pl-[2rem]">Contraseña</th>
-                <th class="font-normal pl-[2rem] hidden md:table-cell">Inicio - Final</th>
-                <th class="font-normal pl-[2rem]">Restante</th>
-                <th class="font-normal pl-[2rem]">Ocupado</th>
-                <th class="font-normal pl-[2rem]"></th>
-                <th class="font-normal pl-[2rem] hidden md:table-cell"></th>
-                <th class="font-normal rounded-r-lg md:rounded-r-none"></th>
-                <th class="rounded-r-lg font-normal hidden md:table-cell"></th>
+                    <th class="rounded-l-lg font-normal pl-[2rem]"></th>
+                    <th class="font-normal pl-[2rem]">id</th>
+                    <th class="font-normal pl-[2rem]">Servicio</th>
+                    <th class="font-normal pl-[2rem]">Correo</th>
+                    <th class="font-normal pl-[2rem]">Contraseña</th>
+                    <th class="font-normal pl-[2rem] hidden md:table-cell">Inicio - Final</th>
+                    <th class="font-normal pl-[2rem]">Restante</th>
+                    <th class="font-normal pl-[2rem]">Ocupado</th>
+                    <th class="font-normal pl-[2rem]"></th>
+                    <th class="font-normal pl-[2rem] hidden md:table-cell"></th>
+                    <th class="font-normal rounded-r-lg md:rounded-r-none"></th>
+                    <th class="rounded-r-lg font-normal hidden md:table-cell"></th>
                 </tr>
             </x-slot>
             <x-slot name="tbody">
@@ -160,7 +159,7 @@
                     @php
                         $n++;
                         $historiales = false;
-                        
+
                         if (
                             now()
                                 ->addDay()
@@ -177,7 +176,7 @@
                                 )
                                 ->count();
                         }
-                        
+
                     @endphp
 
                     @include('components/listado-planes')
@@ -199,7 +198,7 @@
         <div class="grid h-full place-items-center">
             <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
                 <div class="bg-[#000029] text-white text-center text-lg py-3 rounded-xl">
-                    {{ $nombre_servicios }} 
+                    {{ $nombre_servicios }}
                 </div>
 
                 {{-- tabla usuarios --}}
@@ -222,29 +221,27 @@
                                 @foreach ($consulta_verUsuarios->historiales->unique() as $verUsuarios)
                                     <tr class="border-gray-200 text-left w-full pl-4" x-data="{ openOption: false }">
                                         <td class="pl-[2rem]">{{ $verUsuarios->vendedor->name ?? '' }}</td>
-                                        @if($consulta_verUsuarios->estado == 'activo')
-                                        <td class="pl-[2rem]">
+                                        @if ($consulta_verUsuarios->estado == 'activo')
+                                            <td class="pl-[2rem]">
                                                 @foreach ($consulta_verUsuarios->perfil as $perfil)
-                                                
-                                                    @if ($verUsuarios->id == $perfil->historial_id  )
-                                                    -Perfil: {{ $perfil->perfil ?? '' }}
-                                                
-                                                    @endif 
+                                                    @if ($verUsuarios->id == $perfil->historial_id)
+                                                        -Perfil: {{ $perfil->perfil ?? '' }}
+                                                    @endif
                                                 @endforeach
-                                            
-                                        
-                                        </td>
+
+
+                                            </td>
                                         @else
-                                        <td class="pl-[2rem]"></td>
+                                            <td class="pl-[2rem]"></td>
                                         @endif
-                                        
+
                                         <td class="pl-[2rem]">{{ $verUsuarios->cliente->name ?? '' }}</td>
 
                                         @php
-                                            
+
                                             $date1 = new DateTime(strtr(strval($fechaActual), '/', '-'));
                                             $date2 = new DateTime(strtr(strval($verUsuarios->fecha_final), '/', '-'));
-                                            
+
                                         @endphp
 
                                         @if ($date1 < $date2)
@@ -272,8 +269,12 @@
                                             </td>
                                         @endif
 
-                                        <td class="pl-[2rem]">{{ \Carbon\Carbon::parse($verUsuarios->fecha_inicio)->format('y/m/d' ) }}</td>
-                                        <td class="pl-[2rem]">{{\Carbon\Carbon::parse( $verUsuarios->fecha_final)->format('y/m/d' ) }}</td>
+                                        <td class="pl-[2rem]">
+                                            {{ \Carbon\Carbon::parse($verUsuarios->fecha_inicio)->format('y/m/d') }}
+                                        </td>
+                                        <td class="pl-[2rem]">
+                                            {{ \Carbon\Carbon::parse($verUsuarios->fecha_final)->format('y/m/d') }}
+                                        </td>
 
                                         @php
                                             $promocion = $verUsuarios->promocion_id;
@@ -300,12 +301,16 @@
 
                                         @if (!is_null($observaciones))
                                             <td class="pl-2">
-                                                <div  class="cursor-pointer" wire:click="verObservacion({{ $verUsuarios->id }})"
-                                                    x-on:click="observacionesm=true" title="{{$observaciones}}"   >
-                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-700">
-                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
-                                                      </svg>
-                                                </div>  
+                                                <div class="cursor-pointer"
+                                                    wire:click="verObservacion({{ $verUsuarios->id }})"
+                                                    x-on:click="observacionesm=true" title="{{ $observaciones }}">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
+                                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+                                                        class="w-6 h-6 text-green-700">
+                                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                                            d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+                                                    </svg>
+                                                </div>
                                             </td>
                                         @else
                                             <td class="pl-2">
@@ -313,10 +318,9 @@
                                                     x-on:click="observacionesm=true" class="w-7 cursor-pointer"
                                                     xmlns="http://www.w3.org/2000/svg" version="1.1"
                                                     xmlns:xlink="http://www.w3.org/1999/xlink"
-                                                    xmlns:svgjs="http://svgjs.com/svgjs" x="0"
-                                                    y="0" viewBox="0 0 32 32"
-                                                    style="enable-background:new 0 0 512 512" xml:space="preserve"
-                                                    class="">
+                                                    xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0"
+                                                    viewBox="0 0 32 32" style="enable-background:new 0 0 512 512"
+                                                    xml:space="preserve" class="">
                                                     <g>
                                                         <g id="Layer_57" data-name="Layer 57">
                                                             <path
@@ -338,20 +342,22 @@
                             @endif
                         </tbody>
                     </table>
-                    <div><span class="font-semibold text-gray-700">Email:</span>
-                        {{ $consulta_verUsuarios->correo ?? '' }} </div>
-                    <div><span class="font-semibold text-gray-700">Password:</span>
-                        {{ $consulta_verUsuarios->password ?? '' }} </div>
-                        
-
+                    <div><span
+                            class="font-semibold text-gray-700">Email:</span>{{ $consulta_verUsuarios->correo ?? '' }}
+                    </div>
+                    <div><span
+                            class="font-semibold text-gray-700">Password:</span>{{ $consulta_verUsuarios->password ?? '' }}
+                    </div>
                     <div class="flex justify-end">
                         <span class="mr-4">
                             <button wire:click="openAdd" 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 ">Añadir usuario</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 ">Añadir
+                                usuario</button>
                         </span>
                         <span>
                             <button wire:click="openRenovar" 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 ">Editar cuenta</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 ">Editar
+                                cuenta</button>
                         </span>
                     </div>
                 </div>
@@ -390,15 +396,15 @@
                 </div>
 
                 <div class="mb-4">
-                    <label for="disponible"
-                        class="block text-gray-700 text-sm font-bold mb-2">Disponibilidad:</label>
-                        <select name="" id="" wire:model="estado" 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">
-                            <option value="activo">Pantallas</option>
-                            <option value="pendiente">Cuenta completa</option>
-                            <option value="inactivo">Inactivo</option>
-                        </select>
-                    
-                        
+                    <label for="disponible" class="block text-gray-700 text-sm font-bold mb-2">Disponibilidad:</label>
+                    <select name="" id="" wire:model="estado"
+                        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">
+                        <option value="activo">Pantallas</option>
+                        <option value="pendiente">Cuenta completa</option>
+                        <option value="inactivo">Inactivo</option>
+                    </select>
+
+
                 </div>
                 <div date-rangepicker class="flex items-center gap-2 mb-4">
                     <div class="relative">
@@ -440,61 +446,71 @@
         class="fixed backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full z-20">
         <div class="grid h-full  place-items-center">
             <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
-
                 <div class="mb-2">
-                    <label for="correo "  class="block text-gray-700 text-sm font-bold mb-2">Correo:</label>
-                    <input wire:model="searchTerm" id="correo" type="text" placeholder="Escribir correo" 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" />
+                    <label for="correo" class="block text-gray-700 text-sm font-bold mb-2">Correo:</label>
+                    <input wire:model="searchTerm" id="correo" type="text" placeholder="Escribir correo"
+                        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" />
 
-                    <select wire:model="selectedOption" 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">
-                        
-                        @if($usuarios)
+                    <select wire:model="selectedOption"
+                        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">
+                        @if ($usuarios)
                             @foreach ($usuarios as $option)
                                 <option value="{{ $option->email }}" selected>{{ $option->email }}</option>
                             @endforeach
                         @endif
-                       
                     </select>
                 </div>
 
-                @if(!empty($consulta_verUsuarios->servicio->perfiles))
+                {{-- @if (!empty($consulta_verUsuarios->servicio->perfiles))
      
                 <div class="mb-4">
                     <label for="Perfil "  class="block text-gray-700 text-sm font-bold mb-2">Perfil:</label>
-                        <select name="" id="" wire:model="perfil" 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">
-                        @if($consulta_verUsuarios) 
+                        <select name="" id="" wire:model="perfil" disabled 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">
+                        @if ($consulta_verUsuarios) 
                             <option value="" select>Seleccionar</option>  
                             @php
                                 $pantallas = $consulta_verUsuarios->servicio->pantallas;
                             @endphp
 
-                            @for($i = 1; $i <= $pantallas; $i++)
+                            @for ($i = 1; $i <= $pantallas; $i++)
                                 <option value="{{$i}}">Perfil {{$i}}</option>
                             @endfor 
                         @endif 
                         </select>   
                 </div>
                 
-                @endif   
-                @if(!empty($consulta_verUsuarios->servicio->tarifas ))
-                        <label for="tarifa "  class="block text-gray-700 text-sm font-bold mb-2">Tarifa:</label>
-                        <select name="" id="" wire:model="tarifa" 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">
-                                <option value="" select>Seleccionar</option>
-                        @foreach($consulta_verUsuarios->servicio->tarifas  as $tarifaItem )   
-                                @if($tarifaItem->pantallas == '1' && $tarifaItem->rol_id =='5')
-                                    @if($tarifaItem->servicio->por_tiempo)
-                                        <option value="{{$tarifaItem}}">{{ $tarifaItem->servicio->nombre }} - {{ $tarifaItem->dias }} {{ __($tarifaItem->dias == 1 ? 'día' : 'días') }}
-                                        </option>    
+                @endif --}}
+
+                @if (!empty($consulta_verUsuarios->servicio->tarifas))
+                    <label for="tarifa " class="block text-gray-700 text-sm font-bold mb-2">Tarifa:</label>
+                    <select name="" id="" wire:model="tarifa" class="border-2 border-neutral-200 rounded-lg 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">
+                        <option value="" select>Seleccionar</option>
+                        @foreach ($consulta_verUsuarios->servicio->tarifas as $tarifaItem)
+                            @if ($consulta_verUsuarios->estado == 'pendiente' && $tarifaItem->rol_id == '5' )
+                                @if ($tarifaItem->pantallas == $tarifaItem->servicio->completa)
+                                    @if ($tarifaItem->servicio->por_tiempo)
+                                        <option value="{{ $tarifaItem }}">{{ $tarifaItem->servicio->nombre }} - {{ $tarifaItem->dias }} {{ __($tarifaItem->dias == 1 ? 'día' : 'días') }}</option>
                                     @else
-                                        <option value="{{$tarifaItem}}">{{ $tarifaItem->servicio->nombre }} - {{ $tarifaItem->pantallas }} {{ __($tarifaItem->pantallas == 1 ? 'pantalla' : 'pantallas') }} - {{ $tarifaItem->dias }} {{ __($tarifaItem->dias == 1 ? 'día' : 'días') }}
-                                        </option>                     
-                                    @endif   
+                                        <option value="{{ $tarifaItem }}">{{ $tarifaItem->servicio->nombre }} - {{ $tarifaItem->pantallas }} {{ __($tarifaItem->pantallas == 1 ? 'pantalla' : 'pantallas') }} - {{ $tarifaItem->dias }} {{ __($tarifaItem->dias == 1 ? 'día' : 'días') }}</option>
+                                    @endif
                                 @endif
-                       @endforeach   
-                        </select> 
-                        @error('tarifa') <p class="text-sm text-red-400">{{ 'Requerido*' }}</p> @enderror
-                @endif                    
+                            @else
+                                @if ($tarifaItem->pantallas == '1' && $tarifaItem->rol_id == '5')
+                                    @if ($tarifaItem->servicio->por_tiempo)
+                                        <option value="{{ $tarifaItem }}">{{ $tarifaItem->servicio->nombre }} - {{ $tarifaItem->dias }} {{ __($tarifaItem->dias == 1 ? 'día' : 'días') }}</option>
+                                    @else
+                                        <option value="{{ $tarifaItem }}">{{ $tarifaItem->servicio->nombre }} - {{ $tarifaItem->pantallas }} {{ __($tarifaItem->pantallas == 1 ? 'pantalla' : 'pantallas') }} - {{ $tarifaItem->dias }} {{ __($tarifaItem->dias == 1 ? 'día' : 'días') }}</option>
+                                    @endif
+                                @endif
+                            @endif
+                        @endforeach
+                    </select>
+                    @error('tarifa')
+                        <p class="text-sm text-red-400">{{ 'Requerido*' }}</p>
+                    @enderror
+                @endif
+
 
-                     
 
                 <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>
@@ -598,12 +614,13 @@
                             <option value="{{ $servicio->id }}">{{ $servicio->nombre ?? '' }}</option>
                         @endforeach
                     </select>
-                    @error('servicio_newCuenta') <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div> @enderror
+                    @error('servicio_newCuenta')
+                        <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div>
+                    @enderror
                     <button x-on:click.prevent="serviciosModal=!serviciosModal" x-transition.duration.300ms
                         class="p-0 w-10 h-10 float-right bg-[#B221FD] hover:bg-[#7a02b8] rounded-full active:shadow-lg mouse shadow  ease-in focus:outline-none">
                         <svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" class="w-6 h-6 inline-block">
-                            <path fill="#FFFFFF"
-                                d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
+                            <path fill="#FFFFFF" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
                                 C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
                                 C15.952,9,16,9.447,16,10z" />
                         </svg>
@@ -614,7 +631,9 @@
                     <label for="usuario_newCuenta" class="block text-gray-700 text-sm font-bold mb-2">Usuario:</label>
                     <input type="email" id="usuario_newCuenta" wire:model="usuario_newCuenta"
                         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('usuario_newCuenta') <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div> @enderror                
+                    @error('usuario_newCuenta')
+                        <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div>
+                    @enderror
                 </div>
 
                 <div class="mb-4">
@@ -622,19 +641,23 @@
                         class="block text-gray-700 text-sm font-bold mb-2">Contraseña:</label>
                     <input type="text" id="password_newCuenta" wire:model="password_newCuenta"
                         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_newCuenta') <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div> @enderror
+                    @error('password_newCuenta')
+                        <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div>
+                    @enderror
                 </div>
 
                 <div class="mb-4">
-                    <label for="disponible"
-                        class="block text-gray-700 text-sm font-bold mb-2">Disponibilidad:</label>
-                        <select name="" id="" wire:model="estado" 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">
-                            <option value="activo">Pantallas</option>
-                            <option value="pendiente">Cuenta completa</option>
-                            <option value="inactivo">Inactivo</option>
-                        </select>
-                        @error('estado') <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div> @enderror
-                        
+                    <label for="disponible" class="block text-gray-700 text-sm font-bold mb-2">Disponibilidad:</label>
+                    <select name="" id="" wire:model="estado"
+                        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">
+                        <option value="activo">Pantallas</option>
+                        <option value="pendiente">Cuenta completa</option>
+                        <option value="inactivo">Inactivo</option>
+                    </select>
+                    @error('estado')
+                        <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div>
+                    @enderror
+
                 </div>
 
                 <div date-rangepicker class="flex items-center gap-2 mb-4">
@@ -643,7 +666,9 @@
                             inicio:</label>
                         <input name="fecha_inicial" wire:model.defer="fecha_inicial" type="date"
                             class="border-2 border-neutral-200 rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm  focus:border-neutral-300  focus:outline-none focus:shadow-outline focus:ring-0 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 datepicker-input">
-                            @error('fecha_inicial') <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div> @enderror  
+                        @error('fecha_inicial')
+                            <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div>
+                        @enderror
                     </div>
 
                     <div class="relative">
@@ -651,7 +676,9 @@
                             Final:</label>
                         <input name="fecha_final" wire:model.defer="fecha_final" type="date"
                             class="border-2 border-neutral-200 rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm focus:border-neutral-300  focus:outline-none focus:shadow-outline  focus:ring-0 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 datepicker-input">
-                            @error('fecha_final') <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div> @enderror
+                        @error('fecha_final')
+                            <div class="text-red-500 text-sm">{{ 'Requerido*' }}</div>
+                        @enderror
                     </div>
                 </div>
 
@@ -693,8 +720,7 @@
                     <button x-on:click.prevent="serviciosModal=!serviciosModal" x-transition.duration.300ms
                         class="p-0 w-10 h-10 float-right bg-[#B221FD] hover:bg-[#7a02b8] rounded-full active:shadow-lg mouse shadow  ease-in focus:outline-none">
                         <svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" class="w-6 h-6 inline-block">
-                            <path fill="#FFFFFF"
-                                d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
+                            <path fill="#FFFFFF" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
                                 C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
                                 C15.952,9,16,9.447,16,10z" />
                         </svg>
@@ -707,7 +733,7 @@
                         <div class="w-[6rem]">
                             <label class="text-gray-500 text-sm">Rol</label>
                             <select name="roles" id="roles" wire:model.debounce.500ms="roles_modTarifas"
-                            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">
+                                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">
                                 <option value="" selected>Roles</option>
                                 @foreach ($roles as $rol)
                                     <option value="{{ $rol->id }}">{{ $rol->nombre ?? '' }}</option>
@@ -716,12 +742,14 @@
                         </div>
                         <div class="w-[6rem]">
                             <label class="text-gray-500 text-sm">Pantallas</label>
-                            <input type="number" id="pantallas_modTarifas" wire:model="pantallas_modTarifas" min="1"
+                            <input type="number" id="pantallas_modTarifas" wire:model="pantallas_modTarifas"
+                                min="1"
                                 class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                         </div>
                         <div class="w-[6rem]">
                             <label class="text-gray-500 text-sm">Precio</label>
-                            <input type="number" id="precio_modTarifas" wire:model="precio_modTarifas" min="0"
+                            <input type="number" id="precio_modTarifas" wire:model="precio_modTarifas"
+                                min="0"
                                 class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                         </div>
                         <div class="w-[6rem]">
@@ -768,25 +796,27 @@
                         <tbody class="text-gray-500 select-none">
                             @if (!empty($tarifas))
                                 @foreach ($tarifas as $tarifa)
-                                <tr class="border-gray-200 text-left w-full pl-4">
-                                    <td class="pl-[1rem]">{{ $tarifa->rol->nombre ?? '' }}</td>
-                                    <td class="pl-[1rem]">{{ $tarifa->pantallas ?? '' }}</td>
-                                    <td class="pl-[1rem]">{{ $tarifa->valor ?? '' }}</td>
-                                    <td class="pl-[1rem]">{{ $tarifa->dias ?? '' }}</td>
-                                    <td class="pl-[1rem]">{{ $tarifa->utilidad ?? '' }}</td>
-                                    <td class="pl-[1rem]"><button wire:click="editar({{$tarifa}})" class="justify-center flex px-3 py-2 rounded-lg text-xs cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">Editar</button></td>
-                                    <!--td class="pl-[1rem]">
-                                        <svg wire:click="eliminarModTarifa({{ $tarifa->id ?? ''}})" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="w-6 cursor-pointer" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g id="Flat_Color" data-name="Flat Color"><circle cx="12" cy="12" fill="#e63946" r="10" data-original="#e63946" class=""></circle><path d="m13.41 12 2.3-2.29a1 1 0 0 0 -1.42-1.42l-2.29 2.3-2.29-2.3a1 1 0 0 0 -1.42 1.42l2.3 2.29-2.3 2.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l2.29-2.3 2.29 2.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z" fill="#edebea" data-original="#edebea" class=""></path></g></g>
+                                    <tr class="border-gray-200 text-left w-full pl-4">
+                                        <td class="pl-[1rem]">{{ $tarifa->rol->nombre ?? '' }}</td>
+                                        <td class="pl-[1rem]">{{ $tarifa->pantallas ?? '' }}</td>
+                                        <td class="pl-[1rem]">{{ $tarifa->valor ?? '' }}</td>
+                                        <td class="pl-[1rem]">{{ $tarifa->dias ?? '' }}</td>
+                                        <td class="pl-[1rem]">{{ $tarifa->utilidad ?? '' }}</td>
+                                        <td class="pl-[1rem]"><button wire:click="editar({{ $tarifa }})"
+                                                class="justify-center flex px-3 py-2 rounded-lg text-xs cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">Editar</button>
+                                        </td>
+                                        <!--td class="pl-[1rem]">
+                                        <svg wire:click="eliminarModTarifa({{ $tarifa->id ?? '' }})" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="w-6 cursor-pointer" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g id="Flat_Color" data-name="Flat Color"><circle cx="12" cy="12" fill="#e63946" r="10" data-original="#e63946" class=""></circle><path d="m13.41 12 2.3-2.29a1 1 0 0 0 -1.42-1.42l-2.29 2.3-2.29-2.3a1 1 0 0 0 -1.42 1.42l2.3 2.29-2.3 2.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l2.29-2.3 2.29 2.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z" fill="#edebea" data-original="#edebea" class=""></path></g></g>
                                         </svg>
                                     </td>  -->
-                                </tr>
-                            @endforeach
+                                    </tr>
+                                @endforeach
                             @endif
                         </tbody>
                     </table>
                 </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">
 
@@ -801,78 +831,81 @@
     </div>
 
     <div x-cloak x-show="editarTarifaRol" 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 backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full z-20">
-    <div class="grid h-full  place-items-center">
-        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
-            @if($informacionTarifaRol)
-            <div>
-                <label class="block text-gray-700 text-sm font-bold mb-2">Pantallas:</label>
-                <div class="grid grid-cols-4 gap-2 text-left mb-4">
-                    <div class="w-[6rem]">
-                        <label class="text-gray-500 text-sm">Rol</label>
-                        <select name="roles" id="roles" wire:model.debounce.500ms="roles_modTarifas"
-                        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">
-                            <option value="" selected>Roles</option>
-                            @foreach ($roles as $rol)
-                                <option value="{{ $rol->id }}">{{ $rol->nombre ?? '' }}</option>
-                            @endforeach
-                        </select>
-                    </div>
-                    <div class="w-[6rem]">
-                        <label class="text-gray-500 text-sm">Pantallas</label>
-                        <input type="number" id="pantallas_modTarifas" wire:model="pantallas_modTarifas" min="1"
-                            class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                    </div>
-                    <div class="w-[6rem]">
-                        <label class="text-gray-500 text-sm">Precio</label>
-                        <input type="number" id="precio_modTarifas" wire:model="precio_modTarifas" min="0"
-                            class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                    </div>
-                                 <div class="w-[6rem]">
-                            <label class="text-gray-500 text-sm">Utilidad</label>
-                            <input type="number" id="utilidad" wire:model="utilidad" min="0"
-                                class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+        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 backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full z-20">
+        <div class="grid h-full  place-items-center">
+            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
+                @if ($informacionTarifaRol)
+                    <div>
+                        <label class="block text-gray-700 text-sm font-bold mb-2">Pantallas:</label>
+                        <div class="grid grid-cols-4 gap-2 text-left mb-4">
+                            <div class="w-[6rem]">
+                                <label class="text-gray-500 text-sm">Rol</label>
+                                <select name="roles" id="roles" wire:model.debounce.500ms="roles_modTarifas"
+                                    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">
+                                    <option value="" selected>Roles</option>
+                                    @foreach ($roles as $rol)
+                                        <option value="{{ $rol->id }}">{{ $rol->nombre ?? '' }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
+                            <div class="w-[6rem]">
+                                <label class="text-gray-500 text-sm">Pantallas</label>
+                                <input type="number" id="pantallas_modTarifas" wire:model="pantallas_modTarifas"
+                                    min="1"
+                                    class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                            </div>
+                            <div class="w-[6rem]">
+                                <label class="text-gray-500 text-sm">Precio</label>
+                                <input type="number" id="precio_modTarifas" wire:model="precio_modTarifas"
+                                    min="0"
+                                    class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                            </div>
+                            <div class="w-[6rem]">
+                                <label class="text-gray-500 text-sm">Utilidad</label>
+                                <input type="number" id="utilidad" wire:model="utilidad" min="0"
+                                    class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                            </div>
                         </div>
+
+                        <div class="mb-4 grid grid-cols-3">
+                            <div class="w-[7rem] flex items-center">
+                                <label class="text-gray-500 text-sm mr-2">Dias</label>
+                                <input type="number" min="30" id="diasTarifa" wire:model="diasTarifa"
+                                    class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                            </div>
+
+                            <div class="flex m-auto items-center">
+                                <label class="text-gray-500 text-sm mr-2">Activa</label>
+                                <input type="checkbox" id="estadoTarifa" wire:model="estadoTarifa" checked
+                                    class="border-2 border-neutral-200 focus:ring-0 shadow apperance-none focus:border-neutral-300 text-[#B221FD] leading-tight focus:outline-none focus:shadow-outline">
+                            </div>
+                            <div class="mb-3 mt-3 flex justify-end">
+                                <span>
+                                    <button wire:click="actualizarTarifaRol('{{ $informacionTarifaRol['id'] }}')"
+                                        type="button"
+                                        class="inline-flex justify-center w-full md:w-auto rounded-md border border-transparent px-4 py-1 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">Actualizar</button>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                @endif
+
+
+
+                <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 x-on:click="editarTarifaRol=false" wire:click="" 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] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
+                    </span>
                 </div>
 
-                <div class="mb-4 grid grid-cols-3">
-                    <div class="w-[7rem] flex items-center">
-                        <label class="text-gray-500 text-sm mr-2">Dias</label>
-                        <input type="number" min="30" id="diasTarifa" wire:model="diasTarifa"
-                            class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                    </div>
-
-                    <div class="flex m-auto items-center">
-                        <label class="text-gray-500 text-sm mr-2">Activa</label>
-                        <input type="checkbox" id="estadoTarifa" wire:model="estadoTarifa" checked
-                            class="border-2 border-neutral-200 focus:ring-0 shadow apperance-none focus:border-neutral-300 text-[#B221FD] leading-tight focus:outline-none focus:shadow-outline">
-                    </div>
-                    <div class="mb-3 mt-3 flex justify-end">
-                        <span>
-                            <button wire:click="actualizarTarifaRol('{{$informacionTarifaRol['id']}}')" type="button"
-                                class="inline-flex justify-center w-full md:w-auto rounded-md border border-transparent px-4 py-1 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">Actualizar</button>
-                        </span>
-                    </div>
             </div>
-            </div>
-            @endif
-           
-
-
-            <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 x-on:click="editarTarifaRol=false" wire:click="" 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] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
-                </span>
-            </div>
-
         </div>
     </div>
-</div>
 
     {{-- Modal agregar servicios --}}
     <div x-cloak x-show="serviciosModal" x-transition:enter="transition duration-350"
@@ -897,8 +930,7 @@
                                 <img src="{{ $photo->temporaryUrl() }}" alt=""
                                     class="object-cover rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
                             @else
-                                <div
-                                    class="rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20"></div>
+                                <div class="rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20"></div>
                             @endif
                         </div>
                     </div>
@@ -906,10 +938,11 @@
                     <div class="mb-4 grid grid-cols-2 items-center justify-items-center">
                         <div>
                             <label for="imagen_inicio_servicios"
-                                class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Img inicio
-                                </label>
-                            <input type="file" name="imagen_inicio_servicios" id="imagen_inicio_servicios" wire:model="photo_inicio"
-                                class="hidden">
+                                class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Img
+                                inicio
+                            </label>
+                            <input type="file" name="imagen_inicio_servicios" id="imagen_inicio_servicios"
+                                wire:model="photo_inicio" class="hidden">
                         </div>
 
                         <div>
@@ -917,8 +950,7 @@
                                 <img src="{{ $photo_inicio->temporaryUrl() }}" alt=""
                                     class="object-cover rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
                             @else
-                                <div
-                                    class="rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20"></div>
+                                <div class="rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20"></div>
                             @endif
                         </div>
                     </div>
@@ -968,7 +1000,7 @@
             </form>
         </div>
     </div>
-    @include('layouts.footer')  
+    @include('layouts.footer')
     <script>
         function copiarAlPortapapeles(id_elemento) {
             var aux = document.createElement("input");