From c4cc4d20d450b6216339c37017933486c917efa2 Mon Sep 17 00:00:00 2001
From: Carlos Narro <carlos@relabtive.com>
Date: Sun, 31 May 2026 00:53:40 +0200
Subject: [PATCH] =?UTF-8?q?Rehace=20la=20maquetaci=C3=B3n=20m=C3=B3vil=20d?=
 =?UTF-8?q?e=20la=20p=C3=A1gina=20de=20precios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Las filas del catálogo, la configuración general y el formulario de alta
no estaban pensados para móvil (input de precio descolgado, etiquetas que
desalineaban la cuadrícula, campos sueltos). Ahora las filas apilan
nombre + metadatos + controles de forma limpia en móvil y mantienen la
fila única en escritorio; la cuadrícula usa etiquetas legibles y alinea
los inputs; el alta es una cuadrícula de 2 columnas en móvil.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 mvp/b2c/src/app/panel/precios/page.tsx | 126 +++++++++++++++++--------
 1 file changed, 87 insertions(+), 39 deletions(-)

diff --git a/mvp/b2c/src/app/panel/precios/page.tsx b/mvp/b2c/src/app/panel/precios/page.tsx
index e77b81e..d701943 100644
--- a/mvp/b2c/src/app/panel/precios/page.tsx
+++ b/mvp/b2c/src/app/panel/precios/page.tsx
@@ -82,26 +82,33 @@ export default async function PreciosPage() {
       {/* Config general */}
       <section className="bg-white rounded-xl border border-gray-200 p-6">
         <h2 className="font-bold text-black mb-4">Configuración general</h2>
-        <form action={actualizarConfig} className="grid grid-cols-2 md:grid-cols-5 gap-4">
+        <form action={actualizarConfig} className="grid grid-cols-2 md:grid-cols-5 gap-3 items-end">
           <label className="text-sm">
-            <span className="block text-gray-500 mb-1">Altura techo (m)</span>
+            <span className="block text-xs text-gray-500 mb-1">Altura techo (m)</span>
             <input
               name="alturaTechoDefault"
               type="number"
               step="0.1"
               defaultValue={config.alturaTechoDefault}
-              className="w-full border border-gray-300 rounded-lg px-2 py-1"
+              className="w-full border border-gray-300 rounded-lg px-2 py-1.5"
             />
           </label>
-          {(['demolicion', 'fontaneria', 'electricidad', 'mano_de_obra'] as const).map((k) => (
+          {(
+            [
+              ['demolicion', 'Demolición'],
+              ['fontaneria', 'Fontanería'],
+              ['electricidad', 'Electricidad'],
+              ['mano_de_obra', 'Mano de obra'],
+            ] as const
+          ).map(([k, etiqueta]) => (
             <label key={k} className="text-sm">
-              <span className="block text-gray-500 mb-1">M.O. {k} (€/m²)</span>
+              <span className="block text-xs text-gray-500 mb-1">{etiqueta} (€/m²)</span>
               <input
                 name={`mo_${k}`}
                 type="number"
                 step="0.01"
                 defaultValue={(config.manoObra[k] ?? 0) / 100}
-                className="w-full border border-gray-300 rounded-lg px-2 py-1"
+                className="w-full border border-gray-300 rounded-lg px-2 py-1.5"
               />
             </label>
           ))}
@@ -120,53 +127,94 @@ export default async function PreciosPage() {
             <div className="space-y-2">
               {items.length === 0 && <p className="text-sm text-gray-400">Sin materiales.</p>}
               {items.map((item) => (
-                <div key={item.id} className="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm border-b border-gray-100 pb-2">
-                  <span className="w-full sm:w-48 font-medium text-black">{item.nombre}</span>
-                  <span className="w-20 text-gray-500 capitalize">{item.calidad}</span>
-                  <span className="w-12 text-gray-400">{item.unidad}</span>
-                  {item.esDefault && (
-                    <span className="text-xs bg-green-100 text-green-700 rounded px-1.5 py-0.5">default</span>
-                  )}
-                  <form action={actualizarPrecio} className="flex items-center gap-2 ml-auto">
-                    <input type="hidden" name="id" value={item.id} />
-                    <input
-                      name="precioEuros"
-                      type="number"
-                      step="0.01"
-                      defaultValue={item.precioUnit / 100}
-                      className="w-20 border border-gray-300 rounded-lg px-2 py-1 text-right"
-                    />
-                    <span className="text-gray-400">€</span>
-                    <button className="text-xs text-blue-600 hover:underline">Guardar</button>
-                  </form>
-                  <form action={borrarMaterial}>
-                    <input type="hidden" name="id" value={item.id} />
-                    <button className="text-xs text-red-500 hover:underline">Borrar</button>
-                  </form>
+                <div
+                  key={item.id}
+                  className="flex flex-col gap-2 border-b border-gray-100 pb-3 text-sm sm:flex-row sm:items-center sm:gap-3 sm:pb-2"
+                >
+                  <div className="min-w-0 sm:flex-1">
+                    <div className="font-medium text-black">{item.nombre}</div>
+                    <div className="mt-0.5 flex items-center gap-2 text-xs text-gray-500">
+                      <span className="capitalize">{item.calidad}</span>
+                      <span className="text-gray-300">·</span>
+                      <span>{item.unidad}</span>
+                      {item.esDefault && (
+                        <span className="bg-green-100 text-green-700 rounded px-1.5 py-0.5">default</span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <form action={actualizarPrecio} className="flex items-center gap-2">
+                      <input type="hidden" name="id" value={item.id} />
+                      <div className="relative">
+                        <input
+                          name="precioEuros"
+                          type="number"
+                          step="0.01"
+                          defaultValue={item.precioUnit / 100}
+                          className="w-28 border border-gray-300 rounded-lg pl-3 pr-7 py-1.5 text-right"
+                          aria-label={`Precio de ${item.nombre}`}
+                        />
+                        <span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400">
+                          €
+                        </span>
+                      </div>
+                      <button className="text-xs font-medium text-blue-600 hover:underline">Guardar</button>
+                    </form>
+                    <form action={borrarMaterial}>
+                      <input type="hidden" name="id" value={item.id} />
+                      <button className="text-xs text-red-500 hover:underline">Borrar</button>
+                    </form>
+                  </div>
                 </div>
               ))}
             </div>
 
-            <form action={crearMaterial} className="mt-4 flex flex-wrap items-end gap-2 text-sm">
+            <form
+              action={crearMaterial}
+              className="mt-5 grid grid-cols-2 gap-2 border-t border-gray-100 pt-4 text-sm sm:flex sm:flex-wrap sm:items-end sm:border-t-0 sm:pt-0"
+            >
               <input type="hidden" name="categoria" value={categoria} />
-              <input name="nombre" placeholder="Nombre" required className="border border-gray-300 rounded-lg px-2 py-1" />
-              <select name="calidad" className="border border-gray-300 rounded-lg px-2 py-1">
+              <input
+                name="nombre"
+                placeholder="Nombre"
+                required
+                className="col-span-2 border border-gray-300 rounded-lg px-2 py-1.5 sm:col-auto"
+              />
+              <select name="calidad" className="border border-gray-300 rounded-lg px-2 py-1.5">
                 <option value="basica">Básica</option>
                 <option value="media">Media</option>
                 <option value="premium">Premium</option>
               </select>
-              <input name="precioEuros" type="number" step="0.01" placeholder="€" required className="w-24 border border-gray-300 rounded-lg px-2 py-1" />
-              <select name="unidad" className="border border-gray-300 rounded-lg px-2 py-1">
+              <input
+                name="precioEuros"
+                type="number"
+                step="0.01"
+                placeholder="Precio €"
+                required
+                className="border border-gray-300 rounded-lg px-2 py-1.5 sm:w-24"
+              />
+              <select name="unidad" className="border border-gray-300 rounded-lg px-2 py-1.5">
                 <option value="m2">m²</option>
                 <option value="ml">ml</option>
                 <option value="ud">ud</option>
               </select>
-              <input name="descriptorRender" placeholder="Descriptor render" className="flex-1 min-w-40 border border-gray-300 rounded-lg px-2 py-1" />
-              <input name="sku" placeholder="SKU" required className="w-28 border border-gray-300 rounded-lg px-2 py-1" />
-              <label className="flex items-center gap-1 text-gray-500">
-                <input type="checkbox" name="esDefault" /> default
+              <input
+                name="sku"
+                placeholder="SKU"
+                required
+                className="border border-gray-300 rounded-lg px-2 py-1.5 sm:w-28"
+              />
+              <input
+                name="descriptorRender"
+                placeholder="Descriptor render (opcional)"
+                className="col-span-2 border border-gray-300 rounded-lg px-2 py-1.5 sm:col-auto sm:flex-1 sm:min-w-40"
+              />
+              <label className="col-span-2 flex items-center gap-2 text-gray-500 sm:col-auto">
+                <input type="checkbox" name="esDefault" /> Marcar como default
               </label>
-              <button className="bg-black text-white rounded-lg px-3 py-1 font-medium">Añadir</button>
+              <button className="col-span-2 bg-black text-white rounded-lg px-3 py-2 font-medium sm:col-auto sm:py-1.5">
+                Añadir
+              </button>
             </form>
           </section>
         );