mejoras de diseño parte 2

- color picker añadido por linea
- bote de basura para borrar linea alineado abajo a la derecha
- se quitó degradado y linea de color superior de las tarjetas de asignaturas

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

@@ -59,7 +59,7 @@ const mapLineasToLineaCurricular = (
     id: linea.id,
     nombre: linea.nombre,
     orden: linea.orden ?? 0,
-    color: palette[index % palette.length],
+    color: linea.color ?? palette[index % palette.length],
   }))
 }
 
@@ -185,7 +185,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 +194,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 +232,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 +245,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 +256,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 +266,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>
@@ -382,7 +366,7 @@ function MapaCurricularPage() {
             id: nueva.id,
             nombre: nueva.nombre,
             orden: nueva.orden,
-            color: '#1976d2',
+            color: (nueva as any).color ?? '#1976d2',
           }
           setLineas((prev) => [...prev, mapeada])
           setNombreNuevaLinea('')
@@ -390,6 +374,24 @@ function MapaCurricularPage() {
       },
     )
   }
+
+  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)
+        },
+      },
+    )
+  }
   const guardarEdicionLinea = (id: string, nuevoNombre: string) => {
     const nombreAFijar = nuevoNombre.trim()
 
@@ -721,7 +723,7 @@ function MapaCurricularPage() {
 
       <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 +751,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 +798,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"

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