From 2566e5e9a7afaf17e61766c7fcdc533c54da7345 Mon Sep 17 00:00:00 2001
From: Sergio Ramirez <ingramirezsergio@gmail.com>
Date: Thu, 29 Jan 2026 09:31:00 -0400
Subject: [PATCH] correciones visuales al formulario

---
 .../app/dashboard/formulario/nuevo/page.tsx   |   4 +-
 .../feactures/training/components/form.tsx    | 200 ++++++++++++------
 .../training-tables/training-table-action.tsx |   2 +-
 3 files changed, 133 insertions(+), 73 deletions(-)

diff --git a/apps/web/app/dashboard/formulario/nuevo/page.tsx b/apps/web/app/dashboard/formulario/nuevo/page.tsx
index eb6383c..9ece929 100644
--- a/apps/web/app/dashboard/formulario/nuevo/page.tsx
+++ b/apps/web/app/dashboard/formulario/nuevo/page.tsx
@@ -1,6 +1,4 @@
 'use client';
-
-import PageContainer from '@/components/layout/page-container';
 import { CreateTrainingForm } from '@/feactures/training/components/form';
 import { useRouter } from 'next/navigation';
 
@@ -9,7 +7,7 @@ export default function NewTrainingPage() {
 
   return (
     // <PageContainer scrollable>
-    <div className="px-6 pt-2 pb-6  flex-1 space-y-4">
+    <div className="p-6 space-y-6">
       <CreateTrainingForm
         onSuccess={() => router.push('/dashboard/formulario')}
         onCancel={() => router.back()}
diff --git a/apps/web/feactures/training/components/form.tsx b/apps/web/feactures/training/components/form.tsx
index a3b34be..3a0e461 100644
--- a/apps/web/feactures/training/components/form.tsx
+++ b/apps/web/feactures/training/components/form.tsx
@@ -409,13 +409,17 @@ export function CreateTrainingForm({
                 2. Datos de la Organización Socioproductiva (OSP)
               </CardTitle>
             </CardHeader>
-            <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* CAMBIO 1: lg:grid-cols-2 para evitar columnas estrechas en tablets */}
+            <CardContent className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
               <FormField
                 control={form.control}
                 name="ospType"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Tipo de Organización</FormLabel>
+                  /* CAMBIO 2: flex flex-col y space-y-3 para forzar separación vertical interna */
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Tipo de Organización
+                    </FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
@@ -442,12 +446,13 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="ecoSector"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Sector Económico</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Sector Económico
+                    </FormLabel>
                     <Select
                       onValueChange={(val) => {
                         field.onChange(val);
-                        // Reset downstream
                         form.setValue('productiveSector', '');
                         form.setValue('centralProductiveActivity', '');
                         form.setValue('mainProductiveActivity', '');
@@ -477,8 +482,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="productiveSector"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>SECTOR PRODUCTIVO</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Sector Productivo
+                    </FormLabel>
                     <Select
                       onValueChange={(val) => {
                         field.onChange(val);
@@ -511,8 +518,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="centralProductiveActivity"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>ACTIVIDAD CENTRAL PRODUCTIVO</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Actividad Central Productiva
+                    </FormLabel>
                     <Select
                       onValueChange={(val) => {
                         field.onChange(val);
@@ -544,8 +553,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="mainProductiveActivity"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>ACTIVIDAD PRODUCTIVA PRINCIPAL</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Actividad Productiva Principal
+                    </FormLabel>
                     <Select
                       onValueChange={(val) => {
                         field.onChange(val);
@@ -576,8 +587,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="productiveActivity"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>ACTIVIDAD PRODUCTIVA</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Actividad Productiva
+                    </FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
@@ -605,8 +618,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="ospRif"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>RIF de la organización (opcional)</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      RIF de la organización (opcional)
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} placeholder="J-12345678-9" />
                     </FormControl>
@@ -619,8 +634,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="ospName"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Nombre de la organización</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Nombre de la organización
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -633,8 +650,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="companyConstitutionYear"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Año de constitución</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Año de constitución
+                    </FormLabel>
                     <FormControl>
                       <Input type="number" {...field} />
                     </FormControl>
@@ -647,8 +666,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="currentStatus"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Estatus</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Estatus
+                    </FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
@@ -675,8 +696,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="infrastructureMt2"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>INFRAESTRUCTURA (MT2)</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      infraestrutura (MT2)
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} placeholder="e.g. 500" />
                     </FormControl>
@@ -689,8 +712,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="hasTransport"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>POSEE TRANSPORTE</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      ¿Posee Transporte?
+                    </FormLabel>
                     <Select
                       onValueChange={(val) => field.onChange(val === 'true')}
                       defaultValue={field.value ? 'true' : 'false'}
@@ -714,8 +739,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="structureType"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>TIPO DE ESTRUCTURA</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Tipo Estructura
+                    </FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
@@ -739,8 +766,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="isOpenSpace"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Es un ESPACIO ABIERTO</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      ¿Es un Espacio Abierto?
+                    </FormLabel>
                     <Select
                       onValueChange={(val) => field.onChange(val === 'true')}
                       defaultValue={field.value ? 'true' : 'false'}
@@ -764,8 +793,11 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="paralysisReason"
                 render={({ field }) => (
-                  <FormItem className="col-span-2">
-                    <FormLabel>Razones de paralización (opcional)</FormLabel>
+                  /* CAMBIO: Se mantiene col-span-2 para que ocupe todo el ancho si hay espacio */
+                  <FormItem className="col-span-1 lg:col-span-2 flex flex-col space-y-3">
+                    <FormLabel className="whitespace-normal leading-tight font-semibold">
+                      Razones de paralización (opcional)
+                    </FormLabel>
                     <FormControl>
                       <Textarea {...field} />
                     </FormControl>
@@ -800,12 +832,12 @@ export function CreateTrainingForm({
             <CardHeader>
               <CardTitle>3. Detalles de la ubicación</CardTitle>
             </CardHeader>
-            <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CardContent className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
               <FormField
                 control={form.control}
                 name="ospAddress"
                 render={({ field }) => (
-                  <FormItem className="col-span-2">
+                  <FormItem className="col-span-1 lg:col-span-2 flex flex-col space-y-2">
                     <FormLabel>
                       Dirección de la Organización Socio Productivo
                     </FormLabel>
@@ -821,7 +853,7 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="ospGoogleMapsLink"
                 render={({ field }) => (
-                  <FormItem className="col-span-2">
+                  <FormItem className="col-span-1 lg:col-span-2 flex flex-col space-y-2">
                     <FormLabel>Dirección Link Google Maps</FormLabel>
                     <FormControl>
                       <Input
@@ -834,7 +866,7 @@ export function CreateTrainingForm({
                 )}
               />
 
-              <div className="col-span-2">
+              <div className="col-span-1 lg:col-span-2 border-b pb-2 mt-4 hidden md:inline">
                 <h4 className="font-semibold mb-2">Datos de la Comuna</h4>
               </div>
 
@@ -842,8 +874,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communeName"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Nombre de la Comuna</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Nombre de la Comuna
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -856,8 +890,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="siturCodeCommune"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Código SITUR de la Comuna</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Código SITUR de la Comuna
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -870,8 +906,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communeRif"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Rif de la Comuna</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Rif de la Comuna
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -884,8 +922,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communeSpokespersonName"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Nombre del Vocero o Vocera</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Nombre del Vocero o Vocera
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -898,8 +938,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communeSpokespersonCedula"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Cédula de Identidad del Vocero</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Cédula de Identidad del Vocero
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -912,8 +954,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communeSpokespersonRif"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>RIF del Vocero</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      RIF del Vocero
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -926,8 +970,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communeSpokespersonPhone"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Número de Teléfono del Vocero</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Número de Teléfono del Vocero
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -940,8 +986,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communeEmail"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Correo Electrónico de la Comuna</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Correo Electrónico de la Comuna
+                    </FormLabel>
                     <FormControl>
                       <Input type="email" {...field} />
                     </FormControl>
@@ -950,7 +998,7 @@ export function CreateTrainingForm({
                 )}
               />
 
-              <div className="col-span-2">
+              <div className="col-span-2  hidden md:inline">
                 <h4 className="font-semibold mb-2">
                   Datos del Consejo Comunal
                 </h4>
@@ -960,8 +1008,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communalCouncil"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Nombre del Consejo Comunal</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Nombre del Consejo Comunal
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -974,8 +1024,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="siturCodeCommunalCouncil"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Código SITUR del Consejo Comunal</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Código SITUR del Consejo Comunal
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -988,8 +1040,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communalCouncilRif"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Rif del Consejo Comunal</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Rif del Consejo Comunal
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -1002,8 +1056,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communalCouncilSpokespersonName"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Nombre del Vocero o Vocera</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Nombre del Vocero o Vocera
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -1016,8 +1072,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communalCouncilSpokespersonCedula"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Cédula de Identidad del Vocero</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Cédula de Identidad del Vocero
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -1030,8 +1088,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communalCouncilSpokespersonRif"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>RIF del Vocero</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      RIF del Vocero
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -1044,8 +1104,10 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communalCouncilSpokespersonPhone"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Número de Teléfono del Vocero</FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
+                      Número de Teléfono del Vocero
+                    </FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
@@ -1058,8 +1120,8 @@ export function CreateTrainingForm({
                 control={form.control}
                 name="communalCouncilEmail"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
+                  <FormItem className="w-full flex flex-col space-y-2">
+                    <FormLabel className="font-semibold">
                       Correo Electrónico del Consejo Comunal
                     </FormLabel>
                     <FormControl>
diff --git a/apps/web/feactures/training/components/training-tables/training-table-action.tsx b/apps/web/feactures/training/components/training-tables/training-table-action.tsx
index a680615..5a170e9 100644
--- a/apps/web/feactures/training/components/training-tables/training-table-action.tsx
+++ b/apps/web/feactures/training/components/training-tables/training-table-action.tsx
@@ -24,7 +24,7 @@ export default function TrainingTableAction() {
         size="sm"
       >
         <Plus className="h-4 w-4" />
-        Nuevo Registro
+        <span className="hidden md:inline">Nuevo Registro</span>
       </Button>
     </div>
   );