Cambios a la card de plan de estudio

src/components/planes/PlanEstudiosCard.tsx

@@ -4,20 +4,17 @@ import type { LucideIcon } from 'lucide-react'
 
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
-import { cn } from '@/lib/utils' // Asegúrate de tener tu utilidad cn
+import { cn } from '@/lib/utils'
 
 interface PlanEstudiosCardProps {
-  /** El componente del ícono importado de lucide-react (ej. BookOpen) */
   Icono: LucideIcon
   nombrePrograma: string
   nivel: string
-  ciclos: string | number // Acepta "8" o "8 semestres"
+  ciclos: string | number
   facultad: string
   estado: string
-  /** Código hex o variable CSS (ej. "#ef4444" o "var(--primary)") */
   claseColorEstado?: string
   colorFacultad: string
-  /** Opcional: para manejar el click en la tarjeta */
   onClick?: () => void
 }
 
@@ -36,18 +33,14 @@ export default function PlanEstudiosCard({
     <Card
       onClick={onClick}
       className={cn(
-        'group relative flex h-full cursor-pointer flex-col justify-between gap-2 overflow-hidden border-l-4 transition-all hover:shadow-lg',
+        'group relative flex h-full cursor-pointer flex-col justify-between overflow-hidden transition-all hover:shadow-lg',
       )}
-      // Aplicamos el color de la facultad dinámicamente al borde y un fondo muy sutil
-      style={{
-        borderLeftColor: colorFacultad,
-        backgroundColor: `color-mix(in srgb, ${colorFacultad}, transparent 95%)`, // Truco CSS moderno para fondo tintado
-      }}
     >
+      <div className="flex flex-grow flex-col">
         <CardHeader className="pb-2">
-        {/* Ícono con el color de la facultad */}
+          {/* Círculo del ícono con el color de la facultad */}
           <div
-          className="mb-2 w-fit rounded-md p-2"
+            className="mb-2 w-fit rounded-full p-2.5"
             style={{
               backgroundColor: `color-mix(in srgb, ${colorFacultad}, transparent 85%)`,
             }}
@@ -67,14 +60,12 @@ export default function PlanEstudiosCard({
           </p>
           <p>{facultad}</p>
         </CardContent>
+      </div>
 
-      <CardFooter className="bg-background/50 flex items-center justify-between border-t px-6 pb-3 backdrop-blur-sm [.border-t]:pt-3">
-        <Badge className={`text-sm font-semibold ${claseColorEstado}`}>
+      <CardFooter className="flex items-center justify-between pt-0 pb-6">
+        <Badge className={cn('text-sm font-semibold', claseColorEstado)}>
           {estado}
         </Badge>
-        {/* <span className="text-foreground/80 text-sm font-semibold">
-          {estado}
-        </span> */}
 
         {/* Flecha animada */}
         <div