Cambios verificados (working tree previamente probado)

- src/lib/text.ts: helper truncate() reutilizable.
- SolicitudCart, DesbanearButton, vistas admin y endpoint solicitudes:
  ajustes usando el helper.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/admin/usuarios/DesbanearButton.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { toastAfterReload } from '@/lib/toast';
 
 type Props = {
@@ -8,6 +8,9 @@ type Props = {
 
 export default function DesbanearButton({ baneoId, nombre }: Props) {
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const errorDialogRef = useRef<HTMLDialogElement | null>(null);
+  const titleId = `desbanear-err-${baneoId}`;
 
   const submit = async () => {
     if (loading) return;
@@ -24,12 +27,14 @@ export default function DesbanearButton({ baneoId, nombre }: Props) {
       });
       location.reload();
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Error inesperado');
+      setError(err instanceof Error ? err.message : 'Error inesperado');
+      errorDialogRef.current?.showModal();
       setLoading(false);
     }
   };
 
   return (
+    <>
       <button
         type="button"
         className="btn btn-primary"
@@ -39,5 +44,26 @@ export default function DesbanearButton({ baneoId, nombre }: Props) {
       >
         {loading ? 'Desbaneando…' : 'Desbanear'}
       </button>
+
+      <dialog
+        ref={errorDialogRef}
+        aria-labelledby={titleId}
+        className="rounded-lg p-0 bg-white text-[color:var(--color-ink)] border-2 border-[color:var(--color-ink)] shadow-[var(--shadow-hard)] backdrop:bg-black/40 w-[min(92vw,26rem)]"
+      >
+        <div className="p-5 sm:p-6 flex flex-col gap-4">
+          <h2 id={titleId} className="text-lg font-semibold">
+            No se pudo desbanear
+          </h2>
+          <p className="text-sm" style={{ color: 'var(--color-danger-text)' }}>
+            {error}
+          </p>
+          <div className="flex justify-end pt-2">
+            <button type="button" className="btn btn-primary" onClick={() => errorDialogRef.current?.close()}>
+              Entendido
+            </button>
+          </div>
+        </div>
+      </dialog>
+    </>
   );
 }

src/components/alumno/SolicitudCart.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { toast, toastAfterReload } from '@/lib/toast';
+import { imgUrl } from '@/lib/materialImg';
 import AgregarMaterial from './AgregarMaterial';
 
 type Material = {
@@ -9,9 +10,18 @@ type Material = {
   cantidad_disponible: number;
   cantidad_total: number;
   numero_inventario: string | null;
+  imagen_path: string | null;
   categoria: { id: number; nombre: string } | null;
 };
 
+// El catálogo sólo lista materiales con estado 'disponible' (ver catalogo.astro),
+// así que el chip siempre coincide con el mismo estilo que usa el inventario del admin.
+const DISPONIBLE_BADGE_STYLE = {
+  background: 'color-mix(in oklab, var(--color-positive) 18%, white)',
+  color: 'var(--color-ink)',
+  border: '1.5px solid var(--color-positive)',
+} as const;
+
 type CartItem = {
   material_id: number;
   nombre: string;
@@ -229,30 +239,41 @@ export default function CartProvider({
   return (
     <CartContext.Provider value={value}>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        {materiales.map((m) => (
+        {materiales.map((m) => {
+          const src = imgUrl(m.imagen_path);
+          return (
             <article
               key={m.id}
-            className="card flex flex-col gap-3"
+              className="card p-0 flex flex-col overflow-hidden"
               data-cat={m.categoria?.id ?? 'sin'}
               data-nombre={m.nombre}
               data-numero-inventario={m.numero_inventario ?? ''}
             >
-            <div className="flex items-start justify-between gap-2">
-              <h3 className="font-semibold leading-snug">{m.nombre}</h3>
-              {m.categoria && (
-                <span
-                  className="text-xs px-2 py-0.5 rounded-[2px] whitespace-nowrap uppercase tracking-wide"
-                  style={{
-                    background: 'color-mix(in oklab, var(--color-primary) 25%, white)',
-                    color: 'var(--color-ink)',
-                    border: '1.5px solid var(--color-primary)',
-                  }}
+              <div
+                className="relative aspect-square w-full bg-[color:var(--color-chalk)] grid place-items-center"
+                style={{ borderBottom: '2px solid var(--color-ink)' }}
               >
-                  {m.categoria.nombre}
-                </span>
+                {src ? (
+                  <img src={src} alt={m.nombre} className="w-full h-full object-cover" loading="lazy" />
+                ) : (
+                  <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--color-ink)" strokeWidth={1.5} aria-hidden="true">
+                    <rect x="3" y="4" width="18" height="16" rx="1" />
+                    <path d="M3 16l5-5 4 4 3-3 6 6" />
+                    <circle cx="8" cy="9" r="1.5" />
+                  </svg>
                 )}
+                <span
+                  className="absolute bottom-1.5 right-1.5 text-xs px-2 py-0.5 rounded-[2px] whitespace-nowrap shadow-[var(--shadow-hard-sm)]"
+                  style={DISPONIBLE_BADGE_STYLE}
+                >
+                  Disponible
+                </span>
               </div>
 
+              <div className="p-4 flex flex-col gap-3 flex-1">
+                <h3 className="font-semibold leading-snug">{m.nombre}</h3>
+                {m.categoria && <p className="text-xs opacity-70 -mt-1">{m.categoria.nombre}</p>}
+
                 {m.descripcion && <p className="text-sm opacity-75 line-clamp-2">{m.descripcion}</p>}
 
                 <dl className="text-xs opacity-70 grid grid-cols-2 gap-1">
@@ -267,8 +288,10 @@ export default function CartProvider({
                 <div className="mt-auto">
                   <AgregarMaterial material={{ id: m.id, nombre: m.nombre, cantidad_disponible: m.cantidad_disponible }} />
                 </div>
+              </div>
             </article>
-        ))}
+          );
+        })}
       </div>
 
       {items.length > 0 && (
@@ -394,7 +417,7 @@ export default function CartProvider({
               id="notas-cart"
               className="input"
               rows={3}
-              maxLength={250}
+              maxLength={100}
               value={notas}
               onChange={(e) => setNotas(e.target.value)}
               placeholder="¿Para qué clase o proyecto lo necesitas?"
@@ -402,7 +425,7 @@ export default function CartProvider({
               aria-describedby="notas-cart-hint"
             />
             <p id="notas-cart-hint" className="text-xs opacity-60 mt-1">
-              Ejemplo: Clase de Electrónica Analógica · Prof. Gómez · práctica 3. (Opcional, máx. 250 caracteres)
+              Ejemplo: Clase de Electrónica Analógica · Prof. Gómez. (Opcional, máx. 100 caracteres)
             </p>
           </div>
 

src/lib/text.ts

@@ -0,0 +1 @@
+export const truncate = (s: string, n: number) => (s.length > n ? s.slice(0, n - 1) + '…' : s);

src/pages/admin/inventario/index.astro

@@ -136,7 +136,7 @@ const estadoBadge = (e: Material['estado']) => {
           return (
             <article class="card p-0 flex flex-col overflow-hidden">
               <div
-                class="aspect-square w-full bg-[color:var(--color-chalk)] grid place-items-center"
+                class="relative aspect-square w-full bg-[color:var(--color-chalk)] grid place-items-center"
                 style="border-bottom: 2px solid var(--color-ink);"
               >
                 {src ? (
@@ -148,14 +148,12 @@ const estadoBadge = (e: Material['estado']) => {
                     <circle cx="8" cy="9" r="1.5" />
                   </svg>
                 )}
-              </div>
-              <div class="p-3 flex flex-col gap-2 flex-1">
-                <div class="flex items-start justify-between gap-2">
-                  <h3 class="uppercase font-semibold text-sm leading-snug line-clamp-2">{m.nombre}</h3>
-                  <span class="text-xs px-2 py-0.5 rounded-[2px] whitespace-nowrap shrink-0" style={badge.style}>
+                <span class="absolute bottom-1.5 right-1.5 text-xs px-2 py-0.5 rounded-[2px] whitespace-nowrap shadow-[var(--shadow-hard-sm)]" style={badge.style}>
                   {badge.label}
                 </span>
               </div>
+              <div class="p-3 flex flex-col gap-2 flex-1">
+                <h3 class="uppercase font-semibold text-sm leading-snug line-clamp-2">{m.nombre}</h3>
                 {m.categoria && (
                   <p class="text-xs opacity-70 -mt-1">{m.categoria.nombre}</p>
                 )}

src/pages/admin/solicitudes/activos.astro

@@ -2,6 +2,7 @@
 import AppLayout from '@/layouts/AppLayout.astro';
 import MarcarDevuelto from '@/components/admin/solicitudes/MarcarDevuelto.tsx';
 import VerDetalles from '@/components/admin/solicitudes/VerDetalles.tsx';
+import { truncate } from '@/lib/text';
 
 const supabase = Astro.locals.supabase;
 const { data, error } = await supabase
@@ -107,7 +108,7 @@ const tabs = [
                       </div>
                       {r.notas && (
                         <div class="text-xs mt-1.5 opacity-80 border-l-2 pl-2" style="border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);">
-                          <span class="opacity-60">Motivo:</span> <span class="break-words">{r.notas}</span>
+                          <span class="opacity-60">Motivo:</span> <span class="break-words">{truncate(r.notas, 50)}</span>
                         </div>
                       )}
                     </td>
@@ -162,7 +163,7 @@ const tabs = [
                 <div class="text-sm mt-1 opacity-80">Devolver antes de <span style="font-variant-numeric: tabular-nums;">{r.fecha_devolucion_estimada ? fmtFecha.format(new Date(r.fecha_devolucion_estimada + 'T00:00:00')) : '—'}</span></div>
                 {r.notas && (
                   <p class="text-sm mt-2 opacity-80 border-l-2 pl-2" style="border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);">
-                    <span class="opacity-60">Motivo:</span> <span class="break-words">{r.notas}</span>
+                    <span class="opacity-60">Motivo:</span> <span class="break-words">{truncate(r.notas, 50)}</span>
                   </p>
                 )}
                 <div class="mt-3 flex gap-2 flex-wrap">

src/pages/admin/solicitudes/index.astro

@@ -1,6 +1,7 @@
 ---
 import AppLayout from '@/layouts/AppLayout.astro';
 import AccionesSolicitud from '@/components/admin/solicitudes/AccionesSolicitud.tsx';
+import { truncate } from '@/lib/text';
 
 const supabase = Astro.locals.supabase;
 const { data, error } = await supabase
@@ -99,7 +100,7 @@ const tabs = [
                     </div>
                     {r.notas && (
                       <div class="text-xs mt-1.5 opacity-80 border-l-2 pl-2" style="border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);">
-                        <span class="opacity-60">Motivo:</span> <span class="break-words">{r.notas}</span>
+                        <span class="opacity-60">Motivo:</span> <span class="break-words">{truncate(r.notas, 50)}</span>
                       </div>
                     )}
                   </td>
@@ -135,7 +136,7 @@ const tabs = [
               </div>
               {r.notas && (
                 <p class="text-sm mt-2 opacity-80 border-l-2 pl-2" style="border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);">
-                  <span class="opacity-60">Motivo:</span> <span class="break-words">{r.notas}</span>
+                  <span class="opacity-60">Motivo:</span> <span class="break-words">{truncate(r.notas, 50)}</span>
                 </p>
               )}
               <div class="mt-3">

src/pages/api/solicitudes/index.ts

@@ -56,7 +56,7 @@ export const POST: APIRoute = async ({ request, locals }) => {
       ? rawMaestro
       : null;
 
-  const notas = typeof body.notas === 'string' && body.notas.trim() ? body.notas.trim().slice(0, 250) : null;
+  const notas = typeof body.notas === 'string' && body.notas.trim() ? body.notas.trim().slice(0, 100) : null;
 
   if (!Array.isArray(body.items) || body.items.length === 0) {
     return Response.json({ error: 'Agrega al menos un material' }, { status: 400 });