Merge pull request 'Merge branch 'main' into issue/225-mejoras-en-el-diseo' (#232) from issue/225-mejoras-en-el-diseo into main

Reviewed-on: #232

src/components/asignaturas/detalle/AsignaturaDetailPage.tsx

@@ -128,8 +128,6 @@ export default function AsignaturaDetailPage() {
   }
   /* ---------- sincronizar API ---------- */
   useEffect(() => {
-    console.log(requisitosFormateados)
-
     if (asignaturaApi) setAsignatura(asignaturaApi)
   }, [asignaturaApi, requisitosFormateados])
 
@@ -182,7 +180,6 @@ function DatosGenerales({
 
   const criteriosEvaluacion: Array<CriterioEvaluacionRow> = useMemo(() => {
     const raw = (data as any)?.criterios_de_evaluacion
-    console.log(raw)
 
     if (!Array.isArray(raw)) return []
 
@@ -232,7 +229,7 @@ function DatosGenerales({
   if (isLoading) return <p>Cargando información...</p>
 
   return (
-    <div className="animate-in fade-in space-y-8 pb-8 duration-500">
+    <div className="animate-in fade-in mx-auto max-w-7xl space-y-8 px-4 py-8 duration-500">
       {/* Encabezado de la Sección */}
       <div className="flex flex-col justify-between gap-4 border-b pb-6 md:flex-row md:items-center">
         <div>
@@ -414,8 +411,7 @@ function InfoCard({
   useEffect(() => {
     setData(initialContent)
     setTempText(initialContent)
-    console.log(data)
-    console.log(initialContent)
+
     if (type === 'evaluation') {
       const raw = Array.isArray(initialContent) ? initialContent : []
       const rows: Array<CriterioEvaluacionRowDraft> = raw
@@ -457,10 +453,6 @@ function InfoCard({
   }, [highlightToken])
 
   const handleSave = () => {
-    console.log('clave, valor:', clave, String(tempText ?? ''))
-    console.log(clave)
-    console.log(tempText)
-
     if (type === 'evaluation') {
       const cleaned: Array<CriterioEvaluacionRow> = []
       for (const r of evalRows) {
@@ -491,8 +483,6 @@ function InfoCard({
       return
     }
     if (type === 'requirements') {
-      console.log('entre aqui ')
-
       // Si tempText es un array y tiene elementos, tomamos el ID del primero
       // Si es "none" o está vacío, mandamos null (para limpiar la seriación)
       const prerequisiteId =
@@ -519,8 +509,6 @@ function InfoCard({
   }
 
   const handleIARequest = (campoClave: string) => {
-    console.log(campoClave)
-
     let targetClave = campoClave
     if (type === 'evaluation' && !targetClave) {
       targetClave = 'criterios_de_evaluacion'
@@ -529,8 +517,6 @@ function InfoCard({
     if (targetClave === 'contenido') {
       targetClave = 'contenido_tematico'
     }
-    console.log(targetClave)
-    console.log(asignaturaId)
 
     navigate({
       to: '/planes/$planId/asignaturas/$asignaturaId/iaasignatura',
@@ -652,18 +638,12 @@ function InfoCard({
                         : 'none'
                     }
                     onValueChange={(val) => {
-                      console.log(availableSubjects)
-
                       const selected = availableSubjects?.find(
                         (s) => s.id === val,
                       )
                       if (val === 'none' || !selected) {
-                        console.log('guardando')
-
                         setTempText([])
                       } else {
-                        console.log('hola')
-
                         setTempText([
                           {
                             id: selected.id,
@@ -677,20 +657,29 @@ function InfoCard({
                   >
                     <SelectTrigger className="w-full">
                       <div className="flex-1 truncate text-left">
-                        <SelectValue placeholder="Selecciona una materia" />
+                        <SelectValue placeholder="Selecciona una materia">
+                          {Array.isArray(tempText) && tempText.length > 0
+                            ? `${tempText[0].code} - ${tempText[0].name}`
+                            : undefined}
+                        </SelectValue>
                       </div>
                     </SelectTrigger>
+
                     <SelectContent>
                       <SelectItem value="none">
                         Ninguna (Sin seriación)
                       </SelectItem>
+
                       {availableSubjects?.map((asig) => (
                         <SelectItem
                           key={asig.id}
                           value={asig.id}
                           className="max-w-[300px] sm:max-w-[500px]"
                         >
-                          <span className="block truncate">
+                          <span className="text-primary font-bold">
+                            [C{asig.numero_ciclo}]
+                          </span>{' '}
+                          <span className="inline-block truncate">
                             {asig.codigo} - {asig.nombre}
                           </span>
                         </SelectItem>

src/components/asignaturas/detalle/HistorialTab.tsx

@@ -11,7 +11,6 @@ import {
   Filter,
   Calendar,
   Loader2,
-  Eye,
 } from 'lucide-react'
 import { useState, useMemo } from 'react'
 
@@ -249,7 +248,16 @@ export function HistorialTab() {
                           `bg-current ${config.color}`,
                         )}
                       />
-                      <Card className="card-interactive">
+                      <Card
+                        className="border-border card-interactive hover:border-primary/50 flex-1 cursor-pointer shadow-none transition-colors"
+                        onClick={() => openCompareModal(cambio)}
+                        role="button"
+                        tabIndex={0}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ')
+                            openCompareModal(cambio)
+                        }}
+                      >
                         <CardContent className="py-4">
                           <div className="flex items-start gap-4">
                             <div
@@ -265,16 +273,7 @@ export function HistorialTab() {
                                 <p className="font-medium">
                                   {cambio.descripcion}
                                 </p>
-                                {/* BOTÓN PARA VER CAMBIOS */}
-                                <Button
-                                  variant="ghost"
-                                  size="sm"
-                                  className="gap-2 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
-                                  onClick={() => openCompareModal(cambio)}
-                                >
-                                  <Eye className="h-4 w-4" />
-                                  Ver cambios
-                                </Button>
+
                                 <span className="text-muted-foreground text-xs">
                                   {format(cambio.fecha, 'HH:mm')}
                                 </span>

src/components/asignaturas/detalle/mapa/AlertaConflicto.tsx

@@ -36,7 +36,8 @@ export const AlertaConflicto = ({
           ))}
         </div>
         <p className="mt-2 text-xs font-semibold text-slate-500">
-          ¿Deseas ignorar la regla y moverla de todos modos?
+          ¿Deseas ignorar la regla y moverla de todos modos (Esto eliminará la
+          seriación)?
         </p>
       </div>
     )
@@ -62,13 +63,8 @@ export const AlertaConflicto = ({
 
           <div className="mt-8 flex flex-col-reverse justify-end gap-3 sm:flex-row">
             <AlertDialog.Cancel asChild>
-              <Button
-                variant="ghost"
-                onClick={() => onConfirm()} // Si tu componente espera resolve
-                className="font-semibold text-slate-500 hover:text-slate-700"
-              >
-                Cancelar
-              </Button>
+              <Button variant="ghost">Cancelar</Button>
+              {/* Radix automáticamente llamará a onOpenChange(false) al hacer clic aquí */}
             </AlertDialog.Cancel>
 
             <AlertDialog.Action asChild>

src/components/auth/LoginCard.tsx

@@ -9,11 +9,13 @@ export function LoginCard() {
 
   return (
     <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-xl">
-      <img
-        src="/4_IMAGOTIPO_LASALLE_MEXICO_COLOR_RGB_2020.png"
-        alt="La Salle México"
-        className="mb-6 h-20 w-auto"
-      />
+      <div className="flex justify-center">
+        <img
+          src="/4_IMAGOTIPO_LASALLE_MEXICO_COLOR_RGB_2020.png"
+          alt="La Salle México"
+          className="mb-6 h-20 w-auto"
+        />
+      </div>
       <h1 className="mb-1 text-center text-2xl font-semibold">
         Iniciar sesión
       </h1>

src/components/ui/button.tsx

@@ -7,7 +7,7 @@ import type { VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

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

@@ -9,7 +9,6 @@ import {
   User,
   Loader2,
   Clock,
-  Eye,
   History,
   Calendar,
   ChevronLeft,
@@ -156,7 +155,16 @@ function RouteComponent() {
                 </div>
               </div>
 
-              <Card className="border-border hover:border-primary/50 flex-1 shadow-none transition-colors">
+              <Card
+                className="border-border hover:border-primary/50 flex-1 cursor-pointer shadow-none transition-colors"
+                onClick={() => openCompareModal(event)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ')
+                    openCompareModal(event)
+                }}
+              >
                 <CardContent className="p-4">
                   <div className="flex flex-col gap-2">
                     {/* LÍNEA SUPERIOR: Título a la izquierda --- Usuario, Botón y Fecha a la derecha */}
@@ -186,15 +194,6 @@ function RouteComponent() {
                           </span>
                         </div>
 
-                        {/* Botón Ver Cambios */}
-                        <button
-                          onClick={() => openCompareModal(event)}
-                          className="text-primary md:text-muted-foreground md:hover:text-primary group/btn flex items-center gap-1.5 text-xs font-medium"
-                        >
-                          <Eye className="text-muted-foreground/70 group-hover/btn:text-primary h-4 w-4" />
-                          <span>Ver cambios</span>
-                        </button>
-
                         {/* Fecha exacta (Solo visible en desktop para no amontonar) */}
                         <span className="text-muted-foreground/70 hidden text-[11px] lg:block">
                           {format(event.date, 'yyyy-MM-dd HH:mm')}

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

@@ -6,7 +6,6 @@ import { useMemo, useState, useEffect, Fragment, useRef } from 'react'
 
 import type { TipoAsignatura } from '@/data'
 import type { Asignatura } from '@/types/plan'
-import type { TablesUpdate } from '@/types/supabase'
 
 import { AlertaConflicto } from '@/components/asignaturas/detalle/mapa/AlertaConflicto'
 import { Badge } from '@/components/ui/badge'
@@ -402,15 +401,19 @@ function MapaCurricularPage() {
     asignatura: Asignatura,
     nuevoCiclo: number,
   ) => {
+    // 1. Esperamos la interacción del usuario
     const acepto = await validarConInterrupcion(asignatura.id, nuevoCiclo)
 
-    if (!acepto) {
-      setConfirmState(null)
-      return
+    // 2. Limpiamos el estado del modal ANTES de seguir
+    setConfirmState(null)
+
+    // 3. Verificamos la respuesta
+    if (acepto === false) {
+      return // Detenemos la ejecución aquí
     }
 
+    // 4. Solo si acepto es true, ejecutamos la API
     const patch = { numero_ciclo: nuevoCiclo }
-
     updateAsignatura(
       { asignaturaId: asignatura.id, patch: patch as any },
       {
@@ -420,12 +423,9 @@ function MapaCurricularPage() {
               m.id === asignatura.id ? { ...m, ciclo: nuevoCiclo } : m,
             ),
           )
-          setConfirmState(null) // Cerramos el modal de Radix al tener éxito
         },
         onError: (err) => {
-          // En lugar de alert nativo, podrías usar un toast aquí
           console.error('Error al actualizar:', err)
-          setConfirmState(null)
         },
       },
     )
@@ -587,48 +587,61 @@ function MapaCurricularPage() {
 
     return val
   }
-  const handleSaveChanges = () => {
-    if (!editingData) return
-    setAsignaturas((prev) =>
-      prev.map((m) => (m.id === editingData.id ? { ...editingData } : m)),
-    )
-    type AsignaturaPatch = {
-      codigo?: TablesUpdate<'asignaturas'>['codigo']
-      nombre?: TablesUpdate<'asignaturas'>['nombre']
-      tipo?: TablesUpdate<'asignaturas'>['tipo']
-      creditos?: TablesUpdate<'asignaturas'>['creditos']
-      horas_academicas?: TablesUpdate<'asignaturas'>['horas_academicas']
-      horas_independientes?: TablesUpdate<'asignaturas'>['horas_independientes']
-      numero_ciclo?: TablesUpdate<'asignaturas'>['numero_ciclo']
-      linea_plan_id?: TablesUpdate<'asignaturas'>['linea_plan_id']
-      prerrequisito_asignatura_id?: string | null
+
+  const procesarCambioAsignatura = async (
+    asignaturaId: string,
+    nuevosDatos: Partial<Asignatura>,
+  ) => {
+    const asignaturaOriginal = asignaturas.find((a) => a.id === asignaturaId)
+    if (!asignaturaOriginal) return
+
+    // ¿Cambió el ciclo? Si es así, validamos seriación
+    if (
+      nuevosDatos.ciclo !== undefined &&
+      nuevosDatos.ciclo !== asignaturaOriginal.ciclo
+    ) {
+      const acepto = await validarConInterrupcion(
+        asignaturaId,
+        nuevosDatos.ciclo,
+      )
+      setConfirmState(null)
+      if (!acepto) return // El usuario canceló, no guardamos nada
     }
-    const patch: Partial<AsignaturaPatch> = {
-      nombre: editingData.nombre,
-      codigo: editingData.clave,
-      creditos: editingData.creditos,
-      horas_academicas: editingData.hd,
-      horas_independientes: editingData.hi,
-      numero_ciclo: editingData.ciclo,
-      linea_plan_id: editingData.lineaCurricularId,
-      prerrequisito_asignatura_id: editingData.prerrequisito_asignatura_id,
-      tipo: editingData.tipo.toUpperCase() as TipoAsignatura, // Asegurar que coincida con el ENUM (OBLIGATORIA/OPTATIVA)
+
+    // Si llegamos aquí, o no cambió el ciclo o el usuario aceptó el conflicto
+    const patch = {
+      nombre: nuevosDatos.nombre ?? asignaturaOriginal.nombre,
+      codigo: nuevosDatos.clave ?? asignaturaOriginal.clave,
+      numero_ciclo: nuevosDatos.ciclo,
+      linea_plan_id: nuevosDatos.lineaCurricularId,
+      creditos: nuevosDatos.creditos,
+      horas_academicas: nuevosDatos.hd,
+      horas_independientes: nuevosDatos.hi,
+      prerrequisito_asignatura_id: nuevosDatos.prerrequisito_asignatura_id,
+      tipo: nuevosDatos.tipo?.toUpperCase() as TipoAsignatura,
     }
 
     updateAsignatura(
-      { asignaturaId: editingData.id, patch: patch as any },
+      { asignaturaId, patch: patch as any },
       {
         onSuccess: () => {
-          setIsEditModalOpen(false)
-          // Opcional: Mostrar un toast de éxito
-        },
-        onError: (error) => {
-          console.error('Error al guardar:', error)
-          alert('Hubo un error al guardar los cambios.')
+          setAsignaturas((prev) =>
+            prev.map((m) =>
+              m.id === asignaturaId ? { ...m, ...nuevosDatos } : m,
+            ),
+          )
+          setIsEditModalOpen(false) // Cerramos el modal si estaba abierto
         },
+        onError: (err) => console.error('Error al guardar:', err),
       },
     )
   }
+  const handleSaveChanges = () => {
+    if (!editingData) return
+
+    // Llamamos a la lógica centralizada que incluye la alerta
+    procesarCambioAsignatura(editingData.id, editingData)
+  }
   const unassignedAsignaturas = asignaturas.filter(
     (m) => m.ciclo === null || m.lineaCurricularId === null,
   )
@@ -700,41 +713,13 @@ function MapaCurricularPage() {
     lineaId: string | null,
   ) => {
     e.preventDefault()
-
     if (!draggedAsignatura) return
 
-    // Buscamos la asignatura completa para tener sus datos
-    const asignatura = asignaturas.find((a) => a.id === draggedAsignatura)
-    if (!asignatura) return
-
-    // SI EL CAMBIO ES DE CICLO (y no solo de línea o a la bandeja)
-    // Ejecutamos la validación segura
-    if (cicloDestino !== null && cicloDestino !== asignatura.ciclo) {
-      // Llamamos a la función que agregaste
-      // IMPORTANTE: Asegúrate que handleCambioCicloSeguro esté definida ANTES o sea accesible
-      await handleCambioCicloSeguro(asignatura, cicloDestino)
-
-      // Si la validación interna de handleCambioCicloSeguro falla o el usuario cancela,
-      // la ejecución se detiene dentro de esa función.
-    } else {
-      // CASO B: Es un movimiento a la bandeja (null) o cambio de línea en el mismo ciclo
-      // Mantenemos la lógica simple de actualización
-      setAsignaturas((prev) =>
-        prev.map((m) =>
-          m.id === draggedAsignatura
-            ? { ...m, ciclo: cicloDestino, lineaCurricularId: lineaId }
-            : m,
-        ),
-      )
-
-      updateAsignatura(
-        {
-          asignaturaId: draggedAsignatura,
-          patch: { numero_ciclo: cicloDestino, linea_plan_id: lineaId },
-        },
-        { onError: (err) => console.error('Error al mover:', err) },
-      )
-    }
+    // Solo disparamos la lógica si realmente hay un cambio de posición
+    procesarCambioAsignatura(draggedAsignatura, {
+      ciclo: cicloDestino,
+      lineaCurricularId: lineaId,
+    })
 
     setDraggedAsignatura(null)
   }

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

@@ -17,9 +17,10 @@ import {
 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
+import { AlertaConflicto } from '@/components/asignaturas/detalle/mapa/AlertaConflicto'
 import { Badge } from '@/components/ui/badge'
 import { lateralConfetti } from '@/components/ui/lateral-confetti'
-import { useSubject, useUpdateAsignatura } from '@/data'
+import { useSubject, useUpdateAsignatura, usePlanAsignaturas } from '@/data'
 import { cn } from '@/lib/utils'
 
 export const Route = createFileRoute(
@@ -167,6 +168,45 @@ function AsignaturaLayout() {
 
   const { data: asignaturaApi, isLoading: loadingAsig } =
     useSubject(asignaturaId)
+  const { data: todasLasAsignaturas } = usePlanAsignaturas(planId)
+  const [confirmState, setConfirmState] = useState<{
+    isOpen: boolean
+    resolve: (value: boolean) => void
+    mensaje: string
+  } | null>(null)
+  const validarConInterrupcion = async (
+    nuevoCiclo: number,
+  ): Promise<boolean> => {
+    if (!todasLasAsignaturas || !asignaturaApi) return true
+
+    const materiasConflicto = todasLasAsignaturas.filter((a) => {
+      const esPrerrequisitoConflictivo =
+        asignaturaApi.prerrequisito_asignatura_id === a.id &&
+        (a.numero_ciclo ?? 0) >= nuevoCiclo
+
+      const esDependienteConflictiva =
+        a.prerrequisito_asignatura_id === asignaturaApi.id &&
+        (a.numero_ciclo ?? 0) <= nuevoCiclo
+
+      return esPrerrequisitoConflictivo || esDependienteConflictiva
+    })
+
+    if (materiasConflicto.length === 0) return true
+
+    const listaNombres = materiasConflicto.map((m) => m.nombre)
+
+    return new Promise((resolve) => {
+      setConfirmState({
+        isOpen: true,
+        resolve,
+        mensaje: JSON.stringify({
+          main: `Mover "${asignaturaApi.nombre}" al ciclo ${nuevoCiclo} genera conflictos con:`,
+          materias: listaNombres,
+        }),
+      })
+    })
+  }
+
   const updateAsignatura = useUpdateAsignatura()
 
   const [headerData, setHeaderData] = useState({
@@ -187,7 +227,25 @@ function AsignaturaLayout() {
     }
   }, [asignaturaApi])
 
-  const handleUpdateHeader = (key: string, value: string | number) => {
+  const handleUpdateHeader = async (key: string, value: string | number) => {
+    // 1. Si es ciclo, validamos antes de hacer nada
+    if (key === 'ciclo') {
+      const nuevoCiclo = Number(value)
+      const acepto = await validarConInterrupcion(nuevoCiclo)
+
+      setConfirmState(null) // Cerramos el modal tras la respuesta
+
+      if (!acepto) {
+        // Revertimos el estado local al valor de la API si cancela
+        setHeaderData((prev) => ({
+          ...prev,
+          ciclo: asignaturaApi?.numero_ciclo ?? 0,
+        }))
+        return
+      }
+    }
+
+    // 2. Si no es ciclo o si aceptó el conflicto, procedemos
     const newData = { ...headerData, [key]: value }
     setHeaderData(newData)
 
@@ -246,7 +304,7 @@ function AsignaturaLayout() {
               {/* Badge Estático del Tipo (Estilo oscuro sutil) */}
               <Badge
                 variant="outline"
-                className="flex h-8 items-center gap-1.5 border-white/10 bg-white/5 px-3 text-white hover:border-white/20 hover:bg-white/10"
+                className="flex h-8 cursor-default items-center gap-1.5 border-white/10 bg-white/5 px-3 text-white"
               >
                 <Tag size={12} className="text-white/70" />
                 {asignaturaApi.tipo}
@@ -294,10 +352,36 @@ function AsignaturaLayout() {
         </div>
       </section>
 
-      {/* TABS NAVEGACIÓN (Se mantiene semántico para el cuerpo de la página) */}
+      {/* TABS NAVEGACIÓN (Se mantiene semántico para el cuerpo de la página) 
       <nav className="border-border bg-background/80 sticky top-0 z-20 border-b backdrop-blur-md">
         <div className="mx-auto px-4 py-1 md:px-6 lg:px-8">
           <div className="scrollbar-hide flex items-center justify-start gap-8 overflow-x-auto whitespace-nowrap md:justify-start">
+          */}
+      {confirmState && (
+        <AlertaConflicto
+          isOpen={confirmState.isOpen}
+          onOpenChange={(open) => {
+            if (!open) {
+              confirmState.resolve(false)
+              setConfirmState(null)
+            }
+          }}
+          onConfirm={() => confirmState.resolve(true)}
+          titulo="Conflicto de Seriación"
+          descripcion={confirmState.mensaje}
+        />
+      )}
+
+      {/* TABS */}
+
+      <nav className="sticky top-0 z-20 border-b bg-white">
+        <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.
+        3. justify-start md:justify-center: Alineado a la izquierda en móvil para que el scroll funcione, centrado en desktop.
+    */}
+          <div className="no-scrollbar flex items-center justify-start gap-8 overflow-x-auto whitespace-nowrap md:justify-start">
             {[
               { label: 'Datos', to: '' },
               { label: 'Contenido', to: 'contenido' },

src/routes/planes/_lista.tsx

@@ -194,9 +194,7 @@ function RouteComponent() {
                 variant="secondary"
                 onClick={resetFilters}
                 disabled={isClearDisabled}
-                className={`shadow-md ${
-                  isClearDisabled ? 'cursor-not-allowed opacity-50' : ''
-                }`}
+                className={`shadow-md`}
               >
                 <Icons.X className="h-4 w-4" /> Limpiar
               </Button>

src/styles.css

@@ -346,3 +346,15 @@ body {
 .login-bg {
   background-image: url('/fondo_login.png');
 }
+
+@layer base {
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+
+  button:disabled,
+  [role='button']:disabled {
+    cursor: not-allowed !important;
+  }
+}