<x-app-layout>
    <x-slot name="header">Detalle del Usuario</x-slot>

    <div class="card" style="max-width:720px;">
        <div class="card-title">{{ $usuario->name }}</div>

        <div style="margin-top:12px; color:var(--muted);">{{ $usuario->email }}</div>
        <div style="margin-top:8px;">
            <span style="display:inline-block; padding:6px 14px; border-radius:999px; background:rgba(0,245,255,0.06); border:1px solid rgba(0,245,255,0.12); color:var(--cyan); font-family:'Space Mono',monospace;">{{ $usuario->rol }}</span>
        </div>

        <div style="margin-top:18px; display:flex; align-items:center; gap:18px;">
            <a href="{{ route('admin.usuarios.edit', $usuario) }}" class="table-btn">Editar</a>
            <a href="{{ route('admin.usuarios.index') }}" class="table-btn">Volver</a>
        </div>
    </div>

</x-app-layout>
