mejoras de diseño de mapa curricular parte 3

- Se cambió el layout para ser más claro de usar
- El botón de agregar linea abre un dialog donde eliges como llamar tu nueva línea curricular
- Al agregar lineas curriculares se les asigna un color al azar que persiste en la base de datos
- al quitarle zoom a la pagina los margenes permanecen

src/components/asignaturas/wizard/PasoFuenteClonadoInterno.tsx

@@ -297,7 +297,7 @@ export function PasoFuenteClonadoInterno({
           Selecciona una asignatura fuente (solo una).
         </div>
 
-        <div className="grid max-h-80 gap-2 overflow-y-auto">
+        <div className="grid max-h-80 gap-2 overflow-y-auto px-1">
           {subjectsLoading ? (
             <div className="text-muted-foreground text-sm">
               Cargando asignaturas…

src/data/api/plans.api.ts

@@ -221,7 +221,9 @@ export async function plan_lineas_list(
   const supabase = supabaseBrowser()
   const { data, error } = await supabase
     .from('lineas_plan')
-    .select('id,plan_estudio_id,nombre,orden,area,creado_en,actualizado_en')
+    .select(
+      'id,plan_estudio_id,nombre,orden,area,creado_en,actualizado_en,color',
+    )
     .eq('plan_estudio_id', planId)
     .order('orden', { ascending: true })
 

src/data/api/subjects.api.ts

@@ -499,6 +499,7 @@ export async function lineas_insert(linea: {
   plan_estudio_id: string
   orden: number
   area?: string
+  color?: string | null
 }) {
   const supabase = supabaseBrowser()
   const { data, error } = await supabase
@@ -514,7 +515,12 @@ export async function lineas_insert(linea: {
 // Actualizar una línea existente
 export async function lineas_update(
   lineaId: string,
-  patch: { nombre?: string; orden?: number; area?: string },
+  patch: {
+    nombre?: string
+    orden?: number
+    area?: string
+    color?: string | null
+  },
 ) {
   const supabase = supabaseBrowser()
   const { data, error } = await supabase

src/routes/dashboard.tsx

@@ -30,7 +30,7 @@ function RouteComponent() {
       4. px-4 md:px-6: Padding RESPONSIVO interno (seguro para móviles y desktop).
       5. py-6: Padding vertical (opcional, para separarse del header).
       */}
-      <div className="mx-auto flex w-full max-w-400 flex-col gap-4 p-4 md:px-6 md:pb-6 lg:px-8 lg:pb-8">
+      <div className="mx-auto flex w-full flex-col gap-4 p-4 md:px-6 md:pb-6 lg:px-8 lg:pb-8">
         <DashboardHeader
           nombre="Dr. Carlos Mendoza"
           rol="Jefe de Carrera"

src/routes/planes/$planId/_detalle.tsx

@@ -127,7 +127,7 @@ function RouteComponent() {
         </div>
       </div>
 
-      <div className="mx-auto max-w-400 space-y-8 p-4 md:px-6 md:pb-6 lg:px-8 lg:pb-8">
+      <div className="mx-auto space-y-8 p-4 md:px-6 md:pb-6 lg:px-8 lg:pb-8">
         {/* 2. Header del Plan */}
         {isLoading ? (
           /* ===== SKELETON ===== */

src/routes/planes/$planId/_detalle/mapa.tsx

@@ -2,10 +2,10 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { Plus, AlertTriangle, Trash2, Download } from 'lucide-react'
 import * as Icons from 'lucide-react'
-import { useMemo, useState, useEffect, Fragment } from 'react'
+import { useMemo, useState, useEffect, Fragment, useRef } from 'react'
 
 import type { TipoAsignatura } from '@/data'
-import type { Asignatura, LineaCurricular } from '@/types/plan'
+import type { Asignatura } from '@/types/plan'
 import type { TablesUpdate } from '@/types/supabase'
 
 import { Badge } from '@/components/ui/badge'
@@ -17,6 +17,8 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import {
   Select,
   SelectContent,
@@ -24,6 +26,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
 import {
   Tooltip,
   TooltipContent,
@@ -39,6 +42,8 @@ import {
   useUpdateAsignatura,
   useUpdateLinea,
 } from '@/data'
+import { cn } from '@/lib/utils'
+import { generarColorContrastante } from '@/utils/colors'
 
 // --- Mapeadores (Fuera del componente para mayor limpieza) ---
 const palette = [
@@ -52,14 +57,21 @@ const palette = [
   '#C026D3', // fucsia
 ]
 
+type LineaCurricularUI = {
+  id: string
+  nombre: string
+  orden: number
+  color: string
+}
+
 const mapLineasToLineaCurricular = (
   lineasApi: Array<any> = [],
-): Array<LineaCurricular> => {
+): Array<LineaCurricularUI> => {
   return lineasApi.map((linea, index) => ({
     id: linea.id,
     nombre: linea.nombre,
     orden: linea.orden ?? 0,
-    color: palette[index % palette.length],
+    color: linea.color ?? palette[index % palette.length],
   }))
 }
 
@@ -185,7 +197,7 @@ function AsignaturaCardItem({
             onDragStart={(e) => onDragStart(e, asignatura.id)}
             onClick={onClick}
             className={[
-              'group relative h-50 w-40 shrink-0 overflow-hidden rounded-[22px] border text-left',
+              'group bg-background relative h-50 w-40 shrink-0 overflow-hidden rounded-[22px] border text-left',
               'transition-all duration-300 ease-out',
               'focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none',
               'cursor-grab active:cursor-grabbing',
@@ -194,26 +206,10 @@ function AsignaturaCardItem({
                 : 'hover:-translate-y-1 hover:shadow-lg',
             ].join(' ')}
             style={{
-              borderColor: hexToRgba(lineaColor, 0.18),
+              borderColor: lineaColor,
-              background: `
-                radial-gradient(circle at top right, ${hexToRgba(lineaColor, 0.22)} 0%, transparent 34%),
-                linear-gradient(180deg, ${hexToRgba(lineaColor, 0.12)} 0%, ${hexToRgba(lineaColor, 0.04)} 42%, var(--card) 100%)
-              `,
             }}
             title={asignatura.nombre}
           >
-            {/* franja */}
-            <div
-              className="absolute inset-x-0 top-0 h-2"
-              style={{ backgroundColor: lineaColor }}
-            />
-
-            {/* glow decorativo */}
-            <div
-              className="absolute -top-10 -right-10 h-28 w-28 rounded-full blur-2xl"
-              style={{ backgroundColor: hexToRgba(lineaColor, 0.22) }}
-            />
-
             <div className="relative flex h-full flex-col p-4">
               {/* top */}
               <div className="flex items-start justify-between gap-2">
@@ -248,7 +244,7 @@ function AsignaturaCardItem({
               {/* titulo */}
               <div className="mt-4 min-h-18">
                 <h3
-                  className="text-foreground overflow-hidden text-sm leading-[1.08]"
+                  className="text-foreground overflow-hidden pb-1 text-sm leading-[1.08]"
                   style={{
                     display: '-webkit-box',
                     WebkitLineClamp: 3,
@@ -261,7 +257,7 @@ function AsignaturaCardItem({
 
               {/* bottom */}
               <div className="mt-auto grid grid-cols-3 gap-2">
-                <div className="flex flex-col items-center rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
+                <div className="bg-muted/70 border-border/70 flex flex-col items-center rounded-2xl border px-2.5 py-2">
                   {/* <Icons.Award className="h-3.5 w-3.5" /> */}
                   <span className="text-muted-foreground mb-1 text-[10px] font-medium tracking-wide uppercase">
                     CR
@@ -272,7 +268,7 @@ function AsignaturaCardItem({
                   </div>
                 </div>
 
-                <div className="flex flex-col items-center rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
+                <div className="bg-muted/70 border-border/70 flex flex-col items-center rounded-2xl border px-2.5 py-2">
                   <span className="text-muted-foreground mb-1 text-[10px] font-medium tracking-wide uppercase">
                     HD
                   </span>
@@ -282,7 +278,7 @@ function AsignaturaCardItem({
                   </div>
                 </div>
 
-                <div className="flex flex-col items-center border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm not-last:rounded-2xl dark:border-white/10 dark:bg-white/5">
+                <div className="bg-muted/70 border-border/70 flex flex-col items-center rounded-2xl border px-2.5 py-2">
                   <span className="text-muted-foreground mb-1 text-[10px] font-medium tracking-wide uppercase">
                     HI
                   </span>
@@ -292,11 +288,6 @@ function AsignaturaCardItem({
                   </div>
                 </div>
               </div>
-
-              {/* drag affordance */}
-              <div className="bg-background/70 pointer-events-none absolute right-3 bottom-3 rounded-full p-1.5 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:opacity-100">
-                <Icons.GripVertical className="text-muted-foreground/55 h-4 w-4" />
-              </div>
             </div>
           </button>
         </TooltipTrigger>
@@ -327,20 +318,26 @@ function MapaCurricularPage() {
   const { data } = usePlan(planId)
   const [totalCiclos, setTotalCiclos] = useState(0)
   const [editingLineaId, setEditingLineaId] = useState<string | null>(null)
-  const { mutate: createLinea } = useCreateLinea()
+  const { mutate: createLinea, isPending: isCreatingLinea } = useCreateLinea()
   const { mutate: updateLineaApi } = useUpdateLinea()
   const { mutate: deleteLineaApi } = useDeleteLinea()
   const { data: asignaturaApi, isLoading: loadingAsig } =
     usePlanAsignaturas(planId)
   const { data: lineasApi, isLoading: loadingLineas } = usePlanLineas(planId)
   const [asignaturas, setAsignaturas] = useState<Array<Asignatura>>([])
-  const [lineas, setLineas] = useState<Array<LineaCurricular>>([])
+  const [lineas, setLineas] = useState<Array<LineaCurricularUI>>([])
   const [draggedAsignatura, setDraggedAsignatura] = useState<string | null>(
     null,
   )
   const [isEditModalOpen, setIsEditModalOpen] = useState(false)
-  const [nombreNuevaLinea, setNombreNuevaLinea] = useState('') // Para el input de nombre personalizado
+  const [isAddLineaDialogOpen, setIsAddLineaDialogOpen] = useState(false)
+  const [selectedLineaOption, setSelectedLineaOption] = useState<
+    'matematicas' | 'area_comun' | 'custom' | ''
+  >('')
+  const [customLineaNombre, setCustomLineaNombre] = useState('')
+  const [ultimoHue, setUltimoHue] = useState<number | null>(null)
   const { mutate: updateAsignatura } = useUpdateAsignatura()
+  const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (data?.numero_ciclos) {
@@ -348,7 +345,13 @@ function MapaCurricularPage() {
     }
   }, [data])
 
-  const manejarAgregarLinea = (nombre: string) => {
+  useEffect(() => {
+    if (selectedLineaOption === 'custom' && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [selectedLineaOption])
+
+  const manejarAgregarLinea = (nombre: string, color: string, hue: number) => {
     const nombreNormalizado = nombre.trim()
     if (!nombreNormalizado) return
     const nombreBusqueda = nombreNormalizado
@@ -369,12 +372,14 @@ function MapaCurricularPage() {
       return
     }
     const maxOrden = lineas.reduce((max, l) => Math.max(max, l.orden || 0), 0)
+
     createLinea(
       {
         nombre: nombreNormalizado,
         plan_estudio_id: planId,
         orden: maxOrden + 1,
         area: 'sin asignar',
+        color,
       },
       {
         onSuccess: (nueva) => {
@@ -382,10 +387,56 @@ function MapaCurricularPage() {
             id: nueva.id,
             nombre: nueva.nombre,
             orden: nueva.orden,
-            color: '#1976d2',
+            color: nueva.color ?? color,
           }
           setLineas((prev) => [...prev, mapeada])
-          setNombreNuevaLinea('')
+          setUltimoHue(hue)
+          setIsAddLineaDialogOpen(false)
+          setSelectedLineaOption('')
+          setCustomLineaNombre('')
+        },
+        onError: (err) => {
+          console.error('Error al crear linea:', err)
+        },
+      },
+    )
+  }
+
+  const canAddLinea =
+    selectedLineaOption === 'matematicas' ||
+    selectedLineaOption === 'area_comun' ||
+    (selectedLineaOption === 'custom' && customLineaNombre.trim().length > 0)
+
+  const handleAgregarLinea = () => {
+    if (!canAddLinea || isCreatingLinea) return
+
+    const nombreSeleccionado =
+      selectedLineaOption === 'matematicas'
+        ? 'Matemáticas'
+        : selectedLineaOption === 'area_comun'
+          ? 'Área Común'
+          : customLineaNombre.trim()
+
+    if (!nombreSeleccionado) return
+
+    const { hex, hue } = generarColorContrastante(ultimoHue)
+
+    manejarAgregarLinea(nombreSeleccionado, hex, hue)
+  }
+
+  const cambiarColorLinea = (lineaId: string, nuevoColor: string) => {
+    setLineas((prev) =>
+      prev.map((l) => (l.id === lineaId ? { ...l, color: nuevoColor } : l)),
+    )
+
+    updateLineaApi(
+      {
+        lineaId,
+        patch: { color: nuevoColor },
+      },
+      {
+        onError: (err) => {
+          console.error('Error al actualizar color de linea:', err)
         },
       },
     )
@@ -419,14 +470,6 @@ function MapaCurricularPage() {
       },
     )
   }
-  const tieneAreaComun = useMemo(() => {
-    return lineas.some(
-      (l) =>
-        l.nombre.toLowerCase() === 'área común' ||
-        l.nombre.toLowerCase() === 'area comun',
-    )
-  }, [lineas])
-
   useEffect(() => {
     if (asignaturaApi)
       setAsignaturas(mapAsignaturasToAsignaturas(asignaturaApi))
@@ -660,68 +703,40 @@ function MapaCurricularPage() {
             )}
           </div>
 
-          <div className="flex items-center justify-start gap-2 lg:justify-end">
+          <Button
-            <Button variant="outline" className="gap-2">
+            variant="outline"
-              <Download size={16} /> Exportar
+            className={cn(
-            </Button>
+              'inline-flex h-11 w-full items-center justify-start gap-2 rounded-md px-8 text-sm font-medium shadow-sm transition-colors',
-            {!tieneAreaComun && (
+              // Fondo verde claro y texto oscuro para contraste
-              <Button
+              'bg-green-100 text-green-900 hover:bg-green-200/80',
-                variant="outline"
+              // Borde verde más oscuro y definido
-                className="text-primary border-primary/30 hover:bg-primary/8"
+              'border border-green-600/30',
-                onClick={() => manejarAgregarLinea('Área Común')}
+              // Enfoque y estados (Accesibilidad)
-              >
+              'ring-offset-background focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 focus-visible:outline-none',
-                + Área Común
+              // Soporte para modo oscuro (opcional pero recomendado)
-              </Button>
+              'dark:border-green-500/40 dark:bg-green-900/30 dark:text-green-100 dark:hover:bg-green-900/50',
             )}
-          </div>
+          >
+            <Download
+              size={16}
+              className="text-green-700 dark:text-green-400"
+            />{' '}
+            Exportar a Excel
+          </Button>
 
-          <div className="border-border/70 bg-background/70 rounded-xl border p-3 lg:col-span-2">
+          {/* Barra Totales */}
-            <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+          <div className="border-border bg-card/60 col-span-2 grid grid-cols-2 gap-3 rounded-2xl border p-3 shadow-sm md:grid-cols-4">
-              <div className="space-y-1">
+            <StatItem label="Total Créditos" value={stats.cr} total={320} />
-                <label className="text-muted-foreground text-[11px] font-semibold tracking-wide uppercase">
+            <StatItem label="Total HD" value={stats.hd} />
-                  Nueva Línea Curricular
+            <StatItem label="Total HI" value={stats.hi} />
-                </label>
+            <StatItem label="Total Horas" value={stats.hd + stats.hi} />
-                <p className="text-muted-foreground text-xs">
-                  Crea una línea personalizada sin abrir menús adicionales.
-                </p>
-              </div>
-
-              <div className="flex w-full gap-2 sm:w-auto sm:min-w-90">
-                <Input
-                  value={nombreNuevaLinea}
-                  onChange={(e) => setNombreNuevaLinea(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && nombreNuevaLinea.trim()) {
-                      manejarAgregarLinea(nombreNuevaLinea)
-                    }
-                  }}
-                  placeholder="Ej: Optativas"
-                  className="h-9"
-                />
-                <Button
-                  className="h-9 gap-1.5"
-                  onClick={() => manejarAgregarLinea(nombreNuevaLinea)}
-                  disabled={!nombreNuevaLinea.trim()}
-                >
-                  <Plus size={14} /> Agregar
-                </Button>
-              </div>
-            </div>
           </div>
         </div>
       </div>
 
-      {/* Barra Totales */}
-      <div className="border-border bg-card/60 mb-8 grid grid-cols-2 gap-3 rounded-2xl border p-3 shadow-sm md:grid-cols-4">
-        <StatItem label="Total Créditos" value={stats.cr} total={320} />
-        <StatItem label="Total HD" value={stats.hd} />
-        <StatItem label="Total HI" value={stats.hi} />
-        <StatItem label="Total Horas" value={stats.hd + stats.hi} />
-      </div>
-
       <div className="overflow-x-auto pb-6">
         <div
-          className="grid gap-3"
+          className="grid gap-3 pl-1"
           style={{
             gridTemplateColumns: `140px repeat(${ciclosTotales}, 188px) 120px`,
           }}
@@ -749,7 +764,7 @@ function MapaCurricularPage() {
             return (
               <Fragment key={linea.id}>
                 <div
-                  className={`group relative flex items-start justify-between gap-2 rounded-xl border p-3 transition-all ${editingLineaId === linea.id ? 'ring-primary/30 ring-2' : 'cursor-text'}`}
+                  className={`group relative flex flex-col gap-2 rounded-xl border p-3 transition-all ${editingLineaId === linea.id ? 'ring-primary/30 ring-2' : 'cursor-text'}`}
                   style={{
                     borderColor: hexToRgba(linea.color || '#1976d2', 0.24),
                     backgroundColor:
@@ -796,7 +811,40 @@ function MapaCurricularPage() {
                       </TooltipContent>
                     </Tooltip>
                   </div>
-                  <div className="ml-1 flex shrink-0 items-center gap-1">
+
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="border-border/70 bg-background relative inline-flex h-8 w-8 items-center justify-center rounded-md border"
+                        style={{
+                          borderColor: hexToRgba(
+                            linea.color || '#1976d2',
+                            0.35,
+                          ),
+                        }}
+                      >
+                        <input
+                          type="color"
+                          aria-label="Cambiar color de línea"
+                          value={linea.color || '#1976d2'}
+                          onChange={(e) =>
+                            cambiarColorLinea(linea.id, e.target.value)
+                          }
+                          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                        />
+                        <Icons.Palette
+                          className="text-muted-foreground h-4 w-4"
+                          aria-hidden
+                        />
+                      </div>
+
+                      <div
+                        className="border-border/70 h-5 w-5 rounded-full border"
+                        style={{ backgroundColor: linea.color || '#1976d2' }}
+                        aria-hidden
+                      />
+                    </div>
+
                     <button
                       type="button"
                       aria-label="Eliminar línea"
@@ -868,6 +916,20 @@ function MapaCurricularPage() {
             )
           })}
 
+          {/* Agregar línea (sticky dentro del overflow-x)
+              Nota: Se envuelve en un row `col-span-full` para evitar bugs de sticky en mobile/iOS
+              cuando el sticky es un grid-item. */}
+          <div className="col-span-full">
+            <div className="sticky left-0 z-10 w-35">
+              <Button
+                className="ring-offset-background bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-11 w-full items-center justify-start gap-2 rounded-md px-8 text-sm font-medium shadow-md transition-colors"
+                onClick={() => setIsAddLineaDialogOpen(true)}
+              >
+                <Plus size={14} /> Agregar línea
+              </Button>
+            </div>
+          </div>
+
           <div className="border-border col-span-full my-2 border-t"></div>
 
           <div className="text-foreground self-center p-2 font-bold">
@@ -901,7 +963,7 @@ function MapaCurricularPage() {
             )
           })}
 
-          <div className="text-primary-foreground border-primary/40 bg-primary flex flex-col justify-center rounded-xl border p-2 text-center text-xs font-bold shadow-sm">
+          <div className="text-accent-foreground border-accent/40 bg-accent flex flex-col justify-center rounded-xl border p-2 text-center text-xs font-bold shadow-sm">
             <div>{stats.cr} Cr</div>
             <div>{stats.hd + stats.hi} Hrs</div>
           </div>
@@ -909,7 +971,7 @@ function MapaCurricularPage() {
       </div>
 
       {/* Asignaturas Sin Asignar */}
-      <div className="border-border bg-card/80 mt-12 rounded-[28px] border p-5 shadow-sm backdrop-blur-sm">
+      <div className="border-border bg-card/80 mt-6 rounded-[28px] border p-5 shadow-sm backdrop-blur-sm">
         <div className="mb-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div className="min-w-0">
             <div className="flex items-center gap-2">
@@ -990,6 +1052,150 @@ function MapaCurricularPage() {
       </div>
 
       {/* Modal de Edición */}
+      <Dialog
+        open={isAddLineaDialogOpen}
+        onOpenChange={(open) => {
+          setIsAddLineaDialogOpen(open)
+          if (!open) {
+            setSelectedLineaOption(undefined)
+            setCustomLineaNombre('')
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-4xl">
+          <DialogHeader>
+            <DialogTitle className="text-foreground text-xl font-bold">
+              Agregar línea curricular
+            </DialogTitle>
+          </DialogHeader>
+
+          <RadioGroup
+            value={selectedLineaOption}
+            onValueChange={(val) =>
+              setSelectedLineaOption(val as typeof selectedLineaOption)
+            }
+            className="grid grid-cols-[1fr_auto_1fr] gap-8 py-4"
+          >
+            {/* Columna Izquierda: Predefinidas */}
+            <div className="space-y-4">
+              <div className="text-foreground mb-3 text-sm font-semibold">
+                Catálogo Institucional
+              </div>
+
+              {/* Tarjeta: Matemáticas */}
+              <div className="border-input has-[[data-state=checked]]:border-primary/50 has-[[data-state=checked]]:bg-primary/5 hover:bg-muted/50 relative flex w-full items-start gap-3 rounded-md border p-4 shadow-sm transition-all outline-none">
+                <RadioGroupItem
+                  id="linea-matematicas"
+                  value="matematicas"
+                  className="mt-0.5 size-5 after:absolute after:inset-0 [&_svg]:size-3"
+                />
+                <div className="grid grow gap-1">
+                  <Label
+                    htmlFor="linea-matematicas"
+                    className="cursor-pointer font-semibold"
+                  >
+                    Matemáticas
+                  </Label>
+                  <p className="text-muted-foreground text-xs">
+                    Línea base para ciencias exactas.
+                  </p>
+                </div>
+              </div>
+
+              {/* Tarjeta: Área Común */}
+              <div className="border-input has-[[data-state=checked]]:border-primary/50 has-[[data-state=checked]]:bg-primary/5 hover:bg-muted/50 relative flex w-full items-start gap-3 rounded-md border p-4 shadow-sm transition-all outline-none">
+                <RadioGroupItem
+                  id="linea-area-comun"
+                  value="area_comun"
+                  className="mt-0.5 size-5 after:absolute after:inset-0 [&_svg]:size-3"
+                />
+                <div className="grid grow gap-1">
+                  <Label
+                    htmlFor="linea-area-comun"
+                    className="cursor-pointer font-semibold"
+                  >
+                    Área Común
+                  </Label>
+                  <p className="text-muted-foreground text-xs">
+                    Materias compartidas entre programas.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Separador */}
+            <div className="flex justify-center">
+              <Separator orientation="vertical" />
+            </div>
+
+            {/* Columna Derecha: Personalizada */}
+            <div className="space-y-4">
+              <div className="text-foreground mb-3 text-sm font-semibold">
+                Línea personalizada
+              </div>
+
+              {/* Tarjeta: Custom */}
+              <div
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault() // Evita que la página haga scroll con el espacio
+                    setSelectedLineaOption('custom')
+                    inputRef.current?.focus()
+                  }
+                }}
+                onClick={() => {
+                  setSelectedLineaOption('custom')
+                  inputRef.current?.focus()
+                }}
+                className={`focus-visible:ring-primary relative flex w-full cursor-pointer items-start gap-3 rounded-md border p-4 shadow-sm transition-all outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${
+                  selectedLineaOption === 'custom'
+                    ? 'border-primary/50 bg-primary/5'
+                    : 'border-input hover:bg-muted/50'
+                }`}
+              >
+                {/* Omitimos after:absolute para no tapar el input */}
+                <RadioGroupItem
+                  id="linea-custom"
+                  value="custom"
+                  className="mt-0.5 size-5 [&_svg]:size-3"
+                />
+                <div className="grid w-full grow gap-3">
+                  <Label
+                    htmlFor="linea-custom"
+                    className="cursor-pointer font-semibold"
+                  >
+                    Otra línea...
+                  </Label>
+                  <Input
+                    ref={inputRef}
+                    value={customLineaNombre}
+                    onChange={(e) =>
+                      setCustomLineaNombre(e.target.value.slice(0, 200))
+                    }
+                    placeholder="Escribe el nombre aquí"
+                    maxLength={200}
+                    disabled={selectedLineaOption !== 'custom'}
+                    className="bg-background h-9 w-full"
+                  />
+                </div>
+              </div>
+            </div>
+          </RadioGroup>
+
+          <div className="mt-2 flex items-center justify-end gap-3 border-t pt-4">
+            <Button
+              className="ring-offset-background bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-11 items-center justify-center gap-2 rounded-md px-8 text-sm font-medium shadow-md transition-colors"
+              onClick={handleAgregarLinea}
+              disabled={!canAddLinea || isCreatingLinea}
+            >
+              <Plus size={16} /> Agregar
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
         <DialogContent
           className="sm:max-w-137.5"

src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx

@@ -140,7 +140,7 @@ function AsignaturaLayout() {
   return (
     <div>
       <section className="bg-linear-to-b from-[#0b1d3a] to-[#0e2a5c] text-white">
-        <div className="mx-auto max-w-400 p-4 py-10 md:px-6 lg:px-8">
+        <div className="mx-auto p-4 py-10 md:px-6 lg:px-8">
           <Link
             to="/planes/$planId/asignaturas"
             params={{ planId }}
@@ -216,7 +216,7 @@ function AsignaturaLayout() {
       {/* TABS */}
 
       <nav className="sticky top-0 z-20 border-b bg-white">
-        <div className="mx-auto max-w-400 p-4 py-2 md:px-6 lg:px-8">
+        <div className="mx-auto p-4 py-2 md:px-6 lg:px-8">
           {/* CAMBIOS CLAVE:
         1. overflow-x-auto: Permite scroll horizontal.
         2. scrollbar-hide: (Opcional) para que no se vea la barra fea.
@@ -260,7 +260,7 @@ function AsignaturaLayout() {
         </div>
       </nav>
 
-      <div className="mx-auto max-w-400 p-4 py-8 md:px-6 lg:px-8">
+      <div className="mx-auto p-4 py-8 md:px-6 lg:px-8">
         <Outlet />
       </div>
     </div>

src/routes/planes/_lista.tsx

@@ -114,7 +114,7 @@ function RouteComponent() {
 
   return (
     <main className="bg-background min-h-screen w-full">
-      <div className="mx-auto flex w-full max-w-400 flex-col gap-4 px-4 py-6 md:px-6 lg:px-8">
+      <div className="mx-auto flex w-full flex-col gap-4 px-4 py-6 md:px-6 lg:px-8">
         <div className="flex flex-col gap-4 lg:col-span-3">
           {/* Header y Botón Nuevo */}
           <div className="flex flex-col items-stretch justify-between gap-4 sm:flex-row sm:items-center">
@@ -193,7 +193,7 @@ function RouteComponent() {
                 onClick={resetFilters}
                 disabled={isClearDisabled}
                 className={`ring-offset-background bg-secondary text-secondary-foreground hover:bg-secondary/90 inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 text-sm font-medium shadow-md transition-colors ${
-                  isClearDisabled ? 'opacity-50 cursor-not-allowed' : ''
+                  isClearDisabled ? 'cursor-not-allowed opacity-50' : ''
                 }`}
               >
                 <Icons.X className="h-4 w-4" /> Limpiar

src/types/plan.ts

@@ -31,12 +31,7 @@ export interface Carrera {
   facultadId: string
 }
 
-export interface LineaCurricular {
+export type LineaCurricular = Tables<'lineas_plan'>
-  id: string
-  nombre: string
-  orden: number
-  color?: string
-}
 
 export interface Asignatura {
   id: string

src/types/supabase.ts

@@ -833,6 +833,7 @@ export type Database = {
         Row: {
           actualizado_en: string
           area: string | null
+          color: string | null
           creado_en: string
           id: string
           nombre: string
@@ -842,6 +843,7 @@ export type Database = {
         Insert: {
           actualizado_en?: string
           area?: string | null
+          color?: string | null
           creado_en?: string
           id?: string
           nombre: string
@@ -851,6 +853,7 @@ export type Database = {
         Update: {
           actualizado_en?: string
           area?: string | null
+          color?: string | null
           creado_en?: string
           id?: string
           nombre?: string

src/utils/colors.ts

@@ -0,0 +1,36 @@
+// Convierte HSL a Hexadecimal
+function hslToHex(h: number, s: number, l: number): string {
+  l /= 100
+  const a = (s * Math.min(l, 1 - l)) / 100
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0')
+  }
+  return `#${f(0)}${f(8)}${f(4)}`
+}
+
+/**
+ * Genera un color contrastante.
+ * @param prevHue El tono (0-360) del color anterior. Null si es el primero.
+ * @returns Objeto con el hex y el nuevo hue para guardar como referencia.
+ */
+export function generarColorContrastante(prevHue: number | null = null) {
+  let newHue: number
+
+  if (prevHue === null) {
+    // Primer color: completamente al azar
+    newHue = Math.floor(Math.random() * 360)
+  } else {
+    // Siguientes: Salto aleatorio entre 130° y 230° para forzar contraste
+    const salto = 130 + Math.floor(Math.random() * 100)
+    newHue = (prevHue + salto) % 360
+  }
+
+  // Mantenemos saturación al 70% y luminosidad al 50% para colores vivos pero no fosforescentes
+  const hex = hslToHex(newHue, 70, 50)
+
+  return { hex, hue: newHue }
+}