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

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

        <div style="margin-top:12px; color:var(--muted);">{{ $servicio->descripcion }}</div>

        <div style="margin-top:18px; display:flex; align-items:center; gap:18px;">
            <div style="font-family:'Space Mono',monospace; font-size:18px; color:var(--cyan);">S/ {{ number_format($servicio->precio, 2) }}</div>

            <a href="{{ route('admin.servicios.edit', $servicio) }}" class="table-btn">Editar</a>
            <a href="{{ route('admin.servicios.index') }}" class="table-btn">Volver</a>
        </div>
    </div>

</x-app-layout>
