wip

src/components/planes/PlanEstudiosCard.tsx

@@ -14,6 +14,7 @@ interface PlanEstudiosCardProps {
   facultad: string
   estado: string
   claseColorEstado?: string
+  colorEstadoHex?: string
   colorFacultad: string
   onClick?: () => void
 }
@@ -26,9 +27,17 @@ export default function PlanEstudiosCard({
   facultad,
   estado,
   claseColorEstado = '',
+  colorEstadoHex,
   colorFacultad,
   onClick,
 }: PlanEstudiosCardProps) {
+  const badgeStyle = colorEstadoHex
+    ? ({
+        backgroundColor: colorEstadoHex,
+        borderColor: colorEstadoHex,
+      } as const)
+    : undefined
+
   return (
     <Card
       onClick={onClick}
@@ -36,7 +45,7 @@ export default function PlanEstudiosCard({
         'group relative flex h-full cursor-pointer flex-col justify-between overflow-hidden transition-all hover:shadow-lg',
       )}
     >
-      <div className="flex flex-grow flex-col">
+      <div className="flex grow flex-col">
         <CardHeader className="pb-2">
           {/* Círculo del ícono con el color de la facultad */}
           <div
@@ -63,8 +72,16 @@ export default function PlanEstudiosCard({
       </div>
 
       <CardFooter className="flex items-center justify-between pt-0 pb-6">
-        <Badge className={cn('text-sm font-semibold', claseColorEstado)}>
-          {estado}
+        <Badge
+          style={badgeStyle}
+          className={cn(
+            'text-sm font-semibold',
+            !colorEstadoHex && claseColorEstado,
+          )}
+        >
+          <span className="text-white [text-shadow:1px_1px_0_#000,-1px_-1px_0_#000,1px_-1px_0_#000,-1px_1px_0_#000,0_1px_0_#000,0_-1px_0_#000,1px_0_0_#000,-1px_0_0_#000]">
+            {estado}
+          </span>
         </Badge>
 
         {/* Flecha animada */}

src/components/plans/PlanCard.tsx

@@ -1,26 +0,0 @@
-import { StatusBadge } from "./StatusBadge";
-
-export function PlanCard({ plan }: any) {
-  return (
-    <div className="bg-[#eaf6fa] rounded-2xl p-6 border hover:shadow-md transition">
-      <div className="flex justify-between items-start mb-4">
-        <span className="text-sm text-gray-500">⚙ Ingeniería</span>
-        <StatusBadge status={plan.status} />
-      </div>
-
-      <h3 className="text-lg font-semibold text-gray-900">
-        {plan.title}
-      </h3>
-
-      <p className="text-sm text-gray-600 mb-6">
-        {plan.subtitle}
-      </p>
-
-      <div className="flex justify-between text-sm text-gray-500">
-        <span>{plan.cycles} ciclos</span>
-        <span>{plan.credits} créditos</span>
-        <span>➜</span>
-      </div>
-    </div>
-  )
-}

src/components/plans/PlanGrid.tsx

@@ -1,38 +0,0 @@
-import { PlanCard } from './PlanCard'
-
-const mockPlans = [
-  {
-    id: 1,
-    name: 'Ingeniería en Sistemas',
-    level: 'Licenciatura',
-    status: 'Activo',
-  },
-  {
-    id: 2,
-    name: 'Arquitectura',
-    level: 'Licenciatura',
-    status: 'Activo',
-  },
-  {
-    id: 3,
-    name: 'Maestría en Educación',
-    level: 'Maestría',
-    status: 'Inactivo',
-  },
-]
-
-export function PlanGrid() {
-  return (
-    <div>
-      <h2 className="text-lg font-semibold mb-4">
-        Planes disponibles
-      </h2>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        {mockPlans.map(plan => (
-          <PlanCard key={plan.id} plan={plan} />
-        ))}
-      </div>
-    </div>
-  )
-}

src/components/plans/StatCard.tsx

@@ -1,11 +0,0 @@
-export function StatCard({ icon, value, label }: any) {
-  return (
-    <div className="bg-white rounded-xl border p-6">
-      <div className="flex items-center gap-3 mb-2">
-        <span className="text-xl">{icon}</span>
-        <span className="text-2xl font-semibold">{value}</span>
-      </div>
-      <p className="text-sm text-gray-500">{label}</p>
-    </div>
-  )
-}

src/components/plans/StatsGrid.tsx

@@ -1,12 +0,0 @@
-import { StatCard } from "./StatCard";
-
-export function StatsGrid() {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-      <StatCard icon="📘" value="12" label="Planes Activos" />
-      <StatCard icon="🕒" value="4" label="En Revisión" />
-      <StatCard icon="✅" value="8" label="Aprobados" />
-      <StatCard icon="👥" value="6" label="Carreras" />
-    </div>
-  )
-}

src/components/plans/StatusBadge.tsx

@@ -1,19 +0,0 @@
-export function StatusBadge({ status }: { status: string }) {
-  const styles: any = {
-    revision: 'bg-blue-100 text-blue-700',
-    aprobado: 'bg-green-100 text-green-700',
-    borrador: 'bg-gray-200 text-gray-600',
-  }
-
-  return (
-    <span
-      className={`text-xs px-3 py-1 rounded-full font-medium ${styles[status]}`}
-    >
-      {status === 'revision'
-        ? 'En Revisión'
-        : status === 'aprobado'
-        ? 'Aprobado'
-        : 'Borrador'}
-    </span>
-  )
-}