Remove non-functional headers; lighten text on background image

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/admin/layout.tsx

@@ -22,15 +22,6 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
 
   return (
     <div className="min-h-screen flex flex-col">
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
-        <div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
-          <span className="font-bold text-blue-600 text-lg">🔧 Taller — Admin</span>
-          <button onClick={cerrarSesion} className="text-sm text-gray-500 hover:text-red-600 transition">
-            Cerrar sesión
-          </button>
-        </div>
-      </header>
-
       <div className="max-w-5xl mx-auto w-full px-4 flex-1 flex flex-col md:flex-row gap-6 py-6">
         <nav className="md:w-48 shrink-0">
           <ul className="flex md:flex-col gap-2 flex-wrap">
@@ -41,7 +32,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
                   className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition ${
                     pathname.startsWith(item.href)
                       ? "bg-blue-600 text-white"
-                      : "text-gray-700 hover:bg-gray-100"
+                      : "text-gray-100 hover:bg-white/20"
                   }`}
                 >
                   <span>{item.icon}</span>
@@ -49,6 +40,14 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
                 </Link>
               </li>
             ))}
+            <li className="md:mt-auto">
+              <button
+                onClick={cerrarSesion}
+                className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-300 hover:text-red-300 hover:bg-white/10 transition w-full"
+              >
+                Cerrar sesión
+              </button>
+            </li>
           </ul>
         </nav>
 

src/app/cliente/auth/page.tsx

@@ -31,7 +31,7 @@ function AuthContent() {
           <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
           <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
         </svg>
-        <p className="text-gray-500">Verificando tu acceso...</p>
+        <p className="text-gray-200">Verificando tu acceso...</p>
       </div>
     );
   }
@@ -39,9 +39,9 @@ function AuthContent() {
   return (
     <div className="flex flex-col items-center justify-center min-h-[60vh] text-center gap-4">
       <div className="text-5xl">❌</div>
-      <h1 className="text-xl font-bold text-gray-800">Link inválido o expirado</h1>
+      <h1 className="text-xl font-bold text-white">Link inválido o expirado</h1>
-      <p className="text-gray-500">El link de acceso ya fue usado o expiró. Pedí uno nuevo.</p>
+      <p className="text-gray-200">El link de acceso ya fue usado o expiró. Pedí uno nuevo.</p>
-      <a href="/cliente" className="text-blue-600 hover:underline font-medium">
+      <a href="/cliente" className="text-blue-300 hover:underline font-medium">
         Volver al inicio
       </a>
     </div>

src/app/cliente/dashboard/page.tsx

@@ -67,14 +67,14 @@ export default function DashboardPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-800">Mis autos</h1>
+        <h1 className="text-2xl font-bold text-white">Mis autos</h1>
-        <button onClick={cerrarSesion} className="text-sm text-gray-400 hover:text-red-500 transition">
+        <button onClick={cerrarSesion} className="text-sm text-gray-200 hover:text-red-300 transition">
           Salir
         </button>
       </div>
 
       {loading ? (
-        <div className="text-center py-10 text-gray-400">Cargando...</div>
+        <div className="text-center py-10 text-gray-200">Cargando...</div>
       ) : (
         <div className="flex flex-col gap-4">
           {autos.map((auto) => (
@@ -103,7 +103,7 @@ export default function DashboardPage() {
           ))}
 
           {autos.length === 0 && !mostrarForm && (
-            <p className="text-center text-gray-400 py-4">No tenés autos registrados todavía.</p>
+            <p className="text-center text-gray-200 py-4">No tenés autos registrados todavía.</p>
           )}
         </div>
       )}

src/app/cliente/historial/page.tsx

@@ -50,11 +50,11 @@ function HistorialContent() {
         <Link href="/cliente/dashboard">
           <Button variant="ghost" className="px-2">← Volver</Button>
         </Link>
-        <h1 className="text-xl sm:text-2xl font-bold text-gray-800">Historial del auto</h1>
+        <h1 className="text-xl sm:text-2xl font-bold text-white">Historial del auto</h1>
       </div>
 
       {loading ? (
-        <div className="text-center py-10 text-gray-400">Cargando...</div>
+        <div className="text-center py-10 text-gray-200">Cargando...</div>
       ) : turnos.length === 0 ? (
         <div className="bg-white border border-gray-200 rounded-2xl p-8 text-center">
           <p className="text-4xl mb-3">🔧</p>
@@ -94,7 +94,7 @@ function HistorialContent() {
 
 export default function HistorialPage() {
   return (
-    <Suspense fallback={<div className="text-center py-10 text-gray-400">Cargando...</div>}>
+    <Suspense fallback={<div className="text-center py-10 text-gray-200">Cargando...</div>}>
       <HistorialContent />
     </Suspense>
   );

src/app/cliente/layout.tsx

@@ -7,12 +7,7 @@ export const metadata: Metadata = {
 export default function ClienteLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-screen">
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+      <main className="max-w-2xl mx-auto px-4 py-8">{children}</main>
-        <div className="max-w-2xl mx-auto px-4 h-14 flex items-center justify-between">
-          <span className="font-bold text-blue-600 text-lg">🔧 Taller</span>
-        </div>
-      </header>
-      <main className="max-w-2xl mx-auto px-4 py-6">{children}</main>
     </div>
   );
 }

src/app/cliente/page.tsx

@@ -33,12 +33,12 @@ export default function ClienteLoginPage() {
     return (
       <div className="flex flex-col items-center justify-center min-h-[60vh] text-center gap-4">
         <div className="text-5xl">📧</div>
-        <h1 className="text-2xl font-bold text-gray-800">Revisá tu email</h1>
+        <h1 className="text-2xl font-bold text-white">Revisá tu email</h1>
-        <p className="text-gray-500 max-w-sm">
+        <p className="text-gray-200 max-w-sm">
           Te enviamos un link de acceso a <strong>{email}</strong>. El link expira en 15 minutos.
         </p>
         <button
-          className="text-sm text-blue-600 hover:underline mt-2"
+          className="text-sm text-blue-300 hover:underline mt-2"
           onClick={() => { setEnviado(false); setEmail(""); }}
         >
           Usar otro email

src/app/cliente/turnos/page.tsx

@@ -184,7 +184,7 @@ function TurnosContent() {
     return (
       <div className="flex flex-col items-center justify-center min-h-[50vh] text-center gap-4">
         <div className="text-5xl">✅</div>
-        <h1 className="text-2xl font-bold text-gray-800">¡Turno reservado!</h1>
+        <h1 className="text-2xl font-bold text-white">¡Turno reservado!</h1>
         <Card className="text-left w-full max-w-sm">
           <p className="text-sm text-gray-500 mb-1">Servicio</p>
           <p className="font-semibold mb-3">{turnoCreado.tipoServicio.nombre}</p>
@@ -207,7 +207,7 @@ function TurnosContent() {
         ) : (
           <Link href="/cliente/dashboard"><Button variant="ghost" className="px-2">←</Button></Link>
         )}
-        <h1 className="text-xl sm:text-2xl font-bold text-gray-800">
+        <h1 className="text-xl sm:text-2xl font-bold text-white">
           {step === "servicio" ? "Elegí el servicio" : `${servicioSel?.nombre}`}
         </h1>
       </div>
@@ -255,19 +255,19 @@ function TurnosContent() {
       {step === "calendario" && (
         <div className="flex flex-col gap-4">
           {loadingSlots && (
-            <p className="text-center text-sm text-gray-400">Cargando disponibilidad...</p>
+            <p className="text-center text-sm text-gray-200">Cargando disponibilidad...</p>
           )}
 
           {/* Cabecera del mes */}
           <div className="flex items-center justify-between">
             <button onClick={prevMes} disabled={!puedeRetroceder}
-              className={`p-2 rounded-lg transition ${puedeRetroceder ? "hover:bg-gray-100 text-gray-700" : "text-gray-300 cursor-default"}`}>
+              className={`p-2 rounded-lg transition ${puedeRetroceder ? "hover:bg-white/20 text-gray-100" : "text-gray-400 cursor-default"}`}>
               ‹
             </button>
-            <span className="font-semibold text-gray-800">
+            <span className="font-semibold text-white">
               {MESES[mesVista.month]} {mesVista.year}
             </span>
-            <button onClick={nextMes} className="p-2 rounded-lg hover:bg-gray-100 text-gray-700 transition">
+            <button onClick={nextMes} className="p-2 rounded-lg hover:bg-white/20 text-gray-100 transition">
               ›
             </button>
           </div>
@@ -321,7 +321,7 @@ function TurnosContent() {
           </div>
 
           {!loadingSlots && slots.length === 0 && (
-            <p className="text-center text-sm text-gray-400">No hay turnos disponibles en los próximos 60 días.</p>
+            <p className="text-center text-sm text-gray-200">No hay turnos disponibles en los próximos 60 días.</p>
           )}
         </div>
       )}
@@ -388,7 +388,7 @@ function TurnosContent() {
 
 export default function TurnosPage() {
   return (
-    <Suspense fallback={<div className="text-center py-10 text-gray-400">Cargando...</div>}>
+    <Suspense fallback={<div className="text-center py-10 text-gray-200">Cargando...</div>}>
       <TurnosContent />
     </Suspense>
   );