File Management UI

La zona de carga debe comunicar su affordance con borde punteado, icono de nube y texto descriptivo. Al arrastrar archivos sobre ella, el color accent debe iluminar el borde y el fondo para confirmar que el drop es posible. El fallback input[type=file] debe permanecer siempre visible como alternativa para usuarios de teclado o dispositivos sin drag & drop.

Cada archivo en proceso de carga necesita su propia barra de progreso con nombre (truncado con ellipsis), peso formateado, porcentaje numérico, icono de tipo y botón de cancelar. Un spinner global único no comunica que archivos avanzan, cuales fallan ni permite cancelar selectivamente.

El explorador de archivos debe ofrecer vista grid (thumbnails con nombre debajo) y lista (columnas nombre, tamanio, fecha, tipo alineadas). La preferencia debe persistir en localStorage para respetar la elección del usuario entre sesiones. El toggle debe ser un control segmentado con iconos claros.

La navegación por carpetas requiere un breadcrumb donde cada nivel es clickeable. Si la profundidad supera 4 niveles, los intermedios se colapsan con ellipsis manteniendo siempre visibles root y carpeta actual. El breadcrumb reduce la carga cognitiva y previene la desorientación en jerarquías profundas.

Los checkboxes de selección deben ser visibles en hover (desktop) y siempre visibles en touch. Al seleccionar archivos, una toolbar contextual flotante aparece con el conteo de elementos y las acciones disponibles (mover, eliminar, descargar). La toolbar desaparece al deseleccionar todo.

Las imagenes deben abrirse en un modal lightbox con navegación entre archivos. Los PDFs se muestran embebidos, los videos con player nativo. Para tipos no soportados, mostrar un icono grande acompaniado de metadata (tamanio, fecha, tipo MIME). La preview evita descargas innecesarias y acelera la toma de decisiones.

Cuando un archivo se mueve o copia a un destino donde ya existe otro con el mismo nombre, un dialog debe presentar 3 opciones claras: "Reemplazar" (sobreescribe), "Mantener ambos" (agrega sufijo automático), y "Omitir" (cancela la operación para ese archivo). Mostrar preview lado a lado de ambos archivos con metadata para facilitar la decisión.

La barra de uso de almacenamiento debe usar colores semánticos progresivos: normal hasta 74%, warning (amarillo/naranja) de 75% a 89%, y danger (rojo) a partir de 90%. Un desglose por tipo de archivo (imagenes, documentos, videos, otros) debe estar disponible en tooltip o sección expandible para que el usuario identifique que consume más espacio.