feat(UI): Implement holiday awareness across all data widgets

- All data widgets (tables and cards) now use the useIsHoliday hook.
- An informational alert is displayed on holidays, without hiding the last available data.
- Unifies loading state logic to wait for both data and holiday status, preventing race conditions.
- Ensures a consistent and robust user experience across all components."

frontend/src/components/BolsaUsaWidget.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import {
   Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer,
   TableHead, TableRow, Paper, Typography, Dialog, DialogTitle,
@@ -8,12 +8,19 @@ import CloseIcon from '@mui/icons-material/Close';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RemoveIcon from '@mui/icons-material/Remove';
-import { formatFullDateTime, formatCurrency } from '../utils/formatters';
-import type { CotizacionBolsa } from '../models/mercadoModels';
-import { useApiData } from '../hooks/useApiData';
-import { HistoricalChartWidget } from './HistoricalChartWidget';
 import { PiChartLineUpBold } from 'react-icons/pi';
 
+// Importaciones de modelos, hooks y utilidades
+import type { CotizacionBolsa } from '../models/mercadoModels';
+import { useApiData } from '../hooks/useApiData';
+import { useIsHoliday } from '../hooks/useIsHoliday';
+import { formatFullDateTime, formatCurrency } from '../utils/formatters';
+import { HistoricalChartWidget } from './HistoricalChartWidget';
+import { HolidayAlert } from './common/HolidayAlert';
+
+/**
+ * Sub-componente para mostrar la variación porcentual con un icono y color apropiado.
+ */
 const Variacion = ({ value }: { value: number }) => {
   const color = value > 0 ? 'success.main' : value < 0 ? 'error.main' : 'text.secondary';
   const Icon = value > 0 ? ArrowUpwardIcon : value < 0 ? ArrowDownwardIcon : RemoveIcon;
@@ -25,31 +32,64 @@ const Variacion = ({ value }: { value: number }) => {
   );
 };
 
+/**
+ * Widget autónomo para la tabla de acciones de EEUU y ADRs Argentinos.
+ */
 export const BolsaUsaWidget = () => {
-  const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
+  // Hooks para obtener los datos y el estado de feriado para el mercado de EEUU.
+  const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
+  const isHoliday = useIsHoliday('US'); // <-- Usamos el código de mercado 'US'
+  
+  // Estado y referencia para manejar el modal del gráfico.
   const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
+  const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
 
-  const handleRowClick = (ticker: string) => setSelectedTicker(ticker);
+  const handleOpenModal = (ticker: string, event: React.MouseEvent<HTMLButtonElement>) => {
-  const handleCloseDialog = () => setSelectedTicker(null);
+    triggerButtonRef.current = event.currentTarget;
+    setSelectedTicker(ticker);
+  };
   
+  const handleCloseDialog = () => {
+    setSelectedTicker(null);
+    // Devuelve el foco al botón que abrió el modal para mejorar la accesibilidad.
+    setTimeout(() => {
+      triggerButtonRef.current?.focus();
+    }, 0);
+  };
+  
+  // Filtramos para obtener solo las acciones, excluyendo el índice S&P 500.
   const otherStocks = data?.filter(d => d.ticker !== '^GSPC') || [];
 
-  if (loading) {
+  // Estado de carga unificado: el componente está "cargando" si los datos principales
+  // o la información del feriado todavía no han llegado.
+  const isLoading = dataLoading || isHoliday === null;
+
+  if (isLoading) {
     return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
   }
 
-  if (error) {
+  if (dataError) {
-    return <Alert severity="error">{error}</Alert>;
+    return <Alert severity="error">{dataError}</Alert>;
   }
   
-  if (!data || data.length === 0) {
+  // Si después de filtrar no queda ninguna acción, mostramos el mensaje apropiado.
-    return <Alert severity="info">No hay datos disponibles para el mercado de EEUU.</Alert>;
+  if (otherStocks.length === 0) {
+      // Si sabemos que es feriado, la alerta de feriado es el mensaje más relevante.
+      if (isHoliday) {
+          return <HolidayAlert />;
+      }
+      return <Alert severity="info">No hay acciones de EEUU disponibles para mostrar.</Alert>;
   }
 
   return (
-    <>
+    <Box>
-      {/* Renderizamos la tabla solo si hay otras acciones */}
+      {/* Si es feriado, mostramos la alerta informativa en la parte superior. */}
-      {otherStocks.length > 0 && (
+      {isHoliday && (
+        <Box sx={{ mb: 2 }}>
+          <HolidayAlert />
+        </Box>
+      )}
+
       <TableContainer component={Paper}>
         <Box sx={{ p: 1, m: 0 }}>
           <Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
@@ -61,10 +101,8 @@ export const BolsaUsaWidget = () => {
             <TableRow>
               <TableCell>Símbolo</TableCell>
               <TableCell align="right">Precio Actual</TableCell>
-                
               <TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>Apertura</TableCell>
               <TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>Cierre Anterior</TableCell>
-
               <TableCell align="center">% Cambio</TableCell>
               <TableCell align="center">Historial</TableCell>
             </TableRow>
@@ -74,34 +112,55 @@ export const BolsaUsaWidget = () => {
               <TableRow key={row.ticker} hover>
                 <TableCell component="th" scope="row"><Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.ticker}</Typography></TableCell>
                 <TableCell align="right">{formatCurrency(row.precioActual, 'USD')}</TableCell>
-                  
                 <TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>{formatCurrency(row.apertura, 'USD')}</TableCell>
                 <TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>{formatCurrency(row.cierreAnterior, 'USD')}</TableCell>
-                  
                 <TableCell align="center"><Variacion value={row.porcentajeCambio} /></TableCell>
                 <TableCell align="center">
                   <IconButton
-                      aria-label={`ver historial de ${row.ticker}`} size="small"
+                    aria-label={`ver historial de ${row.ticker}`}
-                      onClick={() => handleRowClick(row.ticker)}
+                    size="small"
-                      sx={{ boxShadow: '0 1px 3px rgba(0,0,0,0.1)', transition: 'all 0.2s ease-in-out', '&:hover': { transform: 'scale(1.1)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' } }}
+                    onClick={(event) => handleOpenModal(row.ticker, event)}
-                    ><PiChartLineUpBold size="18" /></IconButton>
+                    sx={{
+                      boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+                      transition: 'all 0.2s ease-in-out',
+                      '&:hover': { transform: 'scale(1.1)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }
+                    }}
+                  >
+                    <PiChartLineUpBold size="18" />
+                  </IconButton>
                 </TableCell>
               </TableRow>
             ))}
           </TableBody>
         </Table>
       </TableContainer>
-      )}
 
-      <Dialog open={Boolean(selectedTicker)} onClose={handleCloseDialog} maxWidth="md" fullWidth sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}>
+      <Dialog
-        <IconButton aria-label="close" onClick={handleCloseDialog} sx={{ position: 'absolute', top: -15, right: -15, color: (theme) => theme.palette.grey[500], backgroundColor: 'white', boxShadow: 3, '&:hover': { backgroundColor: 'grey.100' }, }}>
+        open={Boolean(selectedTicker)}
+        onClose={handleCloseDialog}
+        maxWidth="md"
+        fullWidth
+        sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}
+      >
+        <IconButton
+          aria-label="close"
+          onClick={handleCloseDialog}
+          sx={{
+            position: 'absolute', top: -15, right: -15,
+            color: (theme) => theme.palette.grey[500],
+            backgroundColor: 'white', boxShadow: 3,
+            '&:hover': { backgroundColor: 'grey.100' },
+          }}
+        >
           <CloseIcon />
         </IconButton>
-        <DialogTitle sx={{ m: 0, p: 2 }}>Historial de 30 días para: {selectedTicker}</DialogTitle>
+        <DialogTitle sx={{ m: 0, p: 2 }}>
+          Historial de 30 días para: {selectedTicker}
+        </DialogTitle>
         <DialogContent dividers>
           {selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="EEUU" dias={30} />}
         </DialogContent>
       </Dialog>
-    </>
+    </Box>
   );
 };

frontend/src/components/GranosWidget.tsx

@@ -2,19 +2,20 @@ import {
   Box, CircularProgress, Alert, Table, TableBody, TableCell,
   TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
 } from '@mui/material';
-import type { CotizacionGrano } from '../models/mercadoModels';
-import { useApiData } from '../hooks/useApiData';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RemoveIcon from '@mui/icons-material/Remove';
 
-const formatNumber = (num: number) => {
+// Importaciones de nuestro proyecto
-  return new Intl.NumberFormat('es-AR', {
+import type { CotizacionGrano } from '../models/mercadoModels';
-    minimumFractionDigits: 0,
+import { useApiData } from '../hooks/useApiData';
-    maximumFractionDigits: 2,
+import { useIsHoliday } from '../hooks/useIsHoliday';
-  }).format(num);
+import { formatInteger, formatDateOnly, formatFullDateTime } from '../utils/formatters';
-};
+import { HolidayAlert } from './common/HolidayAlert';
 
+/**
+ * Sub-componente para mostrar la variación con icono y color.
+ */
 const Variacion = ({ value }: { value: number }) => {
   const color = value > 0 ? 'success.main' : value < 0 ? 'error.main' : 'text.secondary';
   const Icon = value > 0 ? ArrowUpwardIcon : value < 0 ? ArrowDownwardIcon : RemoveIcon;
@@ -23,28 +24,48 @@ const Variacion = ({ value }: { value: number }) => {
     <Box component="span" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color }}>
       <Icon sx={{ fontSize: '1rem', mr: 0.5 }} />
       <Typography variant="body2" component="span" sx={{ fontWeight: 'bold' }}>
-        {formatNumber(value)}
+        {formatInteger(value)}
       </Typography>
     </Box>
   );
 };
 
+/**
+ * Widget autónomo para la tabla detallada del mercado de granos.
+ */
 export const GranosWidget = () => {
-  const { data, loading, error } = useApiData<CotizacionGrano[]>('/mercados/granos');
+  // Hooks para obtener los datos y el estado de feriado para el mercado argentino.
+  const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGrano[]>('/mercados/granos');
+  const isHoliday = useIsHoliday('BA');
 
-  if (loading) {
+  // Estado de carga unificado.
+  const isLoading = dataLoading || isHoliday === null;
+
+  if (isLoading) {
     return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
   }
 
-  if (error) {
+  if (dataError) {
-    return <Alert severity="error">{error}</Alert>;
+    return <Alert severity="error">{dataError}</Alert>;
   }
 
+  // Si no hay ningún dato que mostrar.
   if (!data || data.length === 0) {
+    if (isHoliday) {
+      return <HolidayAlert />;
+    }
     return <Alert severity="info">No hay datos de granos disponibles en este momento.</Alert>;
   }
 
   return (
+    <Box>
+      {/* Si es feriado, mostramos la alerta como un aviso encima del contenido. */}
+      {isHoliday && (
+        <Box sx={{ mb: 2 }}>
+          <HolidayAlert />
+        </Box>
+      )}
+
       <TableContainer component={Paper}>
         <Table size="small" aria-label="tabla granos">
           <TableHead>
@@ -61,20 +82,21 @@ export const GranosWidget = () => {
                 <TableCell component="th" scope="row">
                   <Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.nombre}</Typography>
                 </TableCell>
-              <TableCell align="right">${formatNumber(row.precio)}</TableCell>
+                <TableCell align="right">${formatInteger(row.precio)}</TableCell>
                 <TableCell align="center">
                   <Variacion value={row.variacionPrecio} />
                 </TableCell>
-              <TableCell align="right">{new Date(row.fechaOperacion).toLocaleDateString('es-AR')}</TableCell>
+                <TableCell align="right">{formatDateOnly(row.fechaOperacion)}</TableCell>
               </TableRow>
             ))}
           </TableBody>
         </Table>
-      <Tooltip title={`Última actualización: ${new Date(data[0].fechaRegistro).toLocaleString('es-AR')}`}>
+        <Tooltip title={`Última actualización: ${formatFullDateTime(data[0].fechaRegistro)}`}>
           <Typography variant="caption" sx={{ p: 1, display: 'block', textAlign: 'right', color: 'text.secondary' }}>
             Fuente: Bolsa de Comercio de Rosario
           </Typography>
         </Tooltip>
       </TableContainer>
+    </Box>
   );
 };

frontend/src/components/MercadoAgroCardWidget.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import {
     Box, CircularProgress, Alert, Paper, Typography, Dialog,
     DialogTitle, DialogContent, IconButton
@@ -8,34 +8,35 @@ import ScaleIcon from '@mui/icons-material/Scale';
 import { PiChartLineUpBold } from "react-icons/pi";
 import CloseIcon from '@mui/icons-material/Close';
 
+// Importaciones de nuestro proyecto
 import type { CotizacionGanado } from '../models/mercadoModels';
 import { useApiData } from '../hooks/useApiData';
+import { useIsHoliday } from '../hooks/useIsHoliday';
 import { formatCurrency, formatInteger, formatDateOnly } from '../utils/formatters';
 import { AgroHistoricalChartWidget } from './AgroHistoricalChartWidget';
+import { HolidayAlert } from './common/HolidayAlert';
 
-// El subcomponente ahora tendrá un botón para el gráfico.
+/**
-const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onChartClick: () => void }) => {
+ * Sub-componente para una única tarjeta de categoría de ganado.
+ */
+const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onChartClick: (event: React.MouseEvent<HTMLButtonElement>) => void }) => {
     return (
-        // Añadimos posición relativa para poder posicionar el botón del gráfico.
+        <Paper elevation={2} sx={{ p: 2, flex: '1 1 250px', minWidth: '250px', maxWidth: '300px', position: 'relative', display: 'flex', flexDirection: 'column' }}>
-        <Paper elevation={2} sx={{ p: 2, flex: '1 1 250px', minWidth: '250px', maxWidth: '300px', position: 'relative' }}>
+            {/* Contenido principal de la tarjeta */}
+            <Box sx={{ flexGrow: 1 }}>
                 <IconButton
                     aria-label="ver historial"
-                onClick={(e) => {
+                    onClick={onChartClick}
-                    e.stopPropagation();
-                    onChartClick();
-                }}
                     sx={{
-                    position: 'absolute',
+                        position: 'absolute', top: 8, right: 8,
-                    top: 8,
+                        backgroundColor: 'rgba(255, 255, 255, 0.7)',
-                    right: 8,
+                        backdropFilter: 'blur(2px)',
-                    backgroundColor: 'rgba(255, 255, 255, 0.7)', // Fondo semitransparente
-                    backdropFilter: 'blur(2px)', // Efecto "frosty glass" para el fondo
                         border: '1px solid rgba(0, 0, 0, 0.1)',
                         boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
-                    transition: 'all 0.2s ease-in-out', // Transición suave para todos los cambios
+                        transition: 'all 0.2s ease-in-out',
                         '&:hover': {
-                        transform: 'translateY(-2px)', // Se eleva un poco
+                            transform: 'translateY(-2px)',
-                        boxShadow: '0 4px 10px rgba(0,0,0,0.2)', // La sombra se hace más grande
+                            boxShadow: '0 4px 10px rgba(0,0,0,0.2)',
                             backgroundColor: 'rgba(255, 255, 255, 0.9)',
                         }
                     }}
@@ -43,7 +44,7 @@ const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onCh
                     <PiChartLineUpBold size="20" />
                 </IconButton>
 
-            <Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', borderBottom: 1, borderColor: 'divider', pb: 1, mb: 2, pr: 5 /* Espacio para el botón */ }}>
+                <Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', borderBottom: 1, borderColor: 'divider', pb: 1, mb: 2, pr: 5 }}>
                     {registro.categoria}
                     <Typography variant="body2" color="text.secondary">{registro.especificaciones}</Typography>
                 </Typography>
@@ -60,9 +61,10 @@ const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onCh
                     <Typography variant="body2" color="text.secondary">Precio Mediano:</Typography>
                     <Typography variant="body2" sx={{ fontWeight: 'bold' }}>${formatCurrency(registro.mediano)}</Typography>
                 </Box>
+            </Box>
 
             {/* Pie de la tarjeta */}
-            <Box sx={{ mt: 2, pt: 1, borderTop: 1, borderColor: 'divider' }}>
+            <Box sx={{ mt: 'auto', pt: 1, borderTop: 1, borderColor: 'divider' }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
                     <Box sx={{ textAlign: 'center' }}>
                         <PiCow size="28" />
@@ -77,69 +79,88 @@ const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onCh
                 </Box>
 
                 <Typography variant="caption" sx={{ display: 'block', textAlign: 'left', color: 'text.secondary', mt: 1, pt: 1, borderTop: 1, borderColor: 'divider' }}>
-                    Dato Registrado el {formatDateOnly(registro.fechaRegistro)}
+                    {formatDateOnly(registro.fechaRegistro)}
                 </Typography>
             </Box>
         </Paper>
     );
 };
 
+/**
+ * Widget autónomo para las tarjetas de resumen del Mercado Agroganadero.
+ */
 export const MercadoAgroCardWidget = () => {
-    const { data, loading, error } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
+    const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
-    const [selectedCategory, setSelectedCategory] = useState<CotizacionGanado | null>(null);
+    const isHoliday = useIsHoliday('BA');
 
-    const handleChartClick = (registro: CotizacionGanado) => {
+    const [selectedCategory, setSelectedCategory] = useState<CotizacionGanado | null>(null);
+    const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
+
+    const handleChartClick = (registro: CotizacionGanado, event: React.MouseEvent<HTMLButtonElement>) => {
+        triggerButtonRef.current = event.currentTarget;
         setSelectedCategory(registro);
     };
 
     const handleCloseDialog = () => {
         setSelectedCategory(null);
+        setTimeout(() => {
+            triggerButtonRef.current?.focus();
+        }, 0);
     };
 
-    if (loading) {
+    const isLoading = dataLoading || isHoliday === null;
+
+    if (isLoading) {
         return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
     }
-    if (error) {
+
-        return <Alert severity="error">{error}</Alert>;
+    if (dataError) {
+        return <Alert severity="error">{dataError}</Alert>;
     }
+
     if (!data || data.length === 0) {
+        if (isHoliday) {
+            return <HolidayAlert />;
+        }
         return <Alert severity="info">No hay datos del mercado agroganadero disponibles.</Alert>;
     }
 
     return (
         <>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
+            {isHoliday && (
+                <Box sx={{ mb: 2 }}>
+                    <HolidayAlert />
+                </Box>
+            )}
+
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: { xs: 2, sm: 2, md: 3 }, justifyContent: 'center' }}>
                 {data.map(registro => (
-                    <AgroCard key={registro.id} registro={registro} onChartClick={() => handleChartClick(registro)} />
+                    <AgroCard key={registro.id} registro={registro} onChartClick={(event) => handleChartClick(registro, event)} />
                 ))}
             </Box>
+
             <Dialog
                 open={Boolean(selectedCategory)}
                 onClose={handleCloseDialog}
                 maxWidth="md"
                 fullWidth
-                sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }} // Permite que el botón se vea fuera
+                sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}
             >
                 <IconButton
                     aria-label="close"
                     onClick={handleCloseDialog}
                     sx={{
-                        position: 'absolute',
+                        position: 'absolute', top: -15, right: -15,
-                        top: -15, // Mueve el botón hacia arriba, fuera del Dialog
-                        right: -15, // Mueve el botón hacia la derecha, fuera del Dialog
                         color: (theme) => theme.palette.grey[500],
-                        backgroundColor: 'white',
+                        backgroundColor: 'white', boxShadow: 3,
-                        boxShadow: 3, // Añade una sombra para que destaque
+                        '&:hover': { backgroundColor: 'grey.100' },
-                        '&:hover': {
-                            backgroundColor: 'grey.100', // Un leve cambio de color al pasar el mouse
-                        },
                     }}
                 >
                     <CloseIcon />
                 </IconButton>
 
                 <DialogTitle sx={{ m: 0, p: 2 }}>
-                    Mensual de {selectedCategory?.categoria} ({selectedCategory?.especificaciones})
+                    Historial de 30 días para {selectedCategory?.categoria} ({selectedCategory?.especificaciones})
                 </DialogTitle>
                 <DialogContent dividers>
                     {selectedCategory && (

frontend/src/components/MercadoAgroWidget.tsx

@@ -2,12 +2,17 @@ import {
   Box, CircularProgress, Alert, Table, TableBody, TableCell,
   TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
 } from '@mui/material';
+
+// Importaciones de nuestro proyecto
 import type { CotizacionGanado } from '../models/mercadoModels';
 import { useApiData } from '../hooks/useApiData';
-import { formatCurrency, formatInteger, formatFullDateTime } from '../utils/formatters';
+import { useIsHoliday } from '../hooks/useIsHoliday';
+import { formatCurrency, formatInteger, formatDateOnly } from '../utils/formatters';
+import { HolidayAlert } from './common/HolidayAlert';
 
-// El sub-componente ahora solo necesita renderizar la tarjeta de móvil.
+/**
-// La fila de la tabla la haremos directamente en el componente principal.
+ * Sub-componente para renderizar cada registro como una tarjeta en la vista móvil.
+ */
 const AgroDataCard = ({ row }: { row: CotizacionGanado }) => {
     const commonStyles = {
         cell: {
@@ -56,16 +61,41 @@ const AgroDataCard = ({ row }: { row: CotizacionGanado }) => {
     );
 };
 
-
+/**
+ * Widget autónomo para la tabla/lista responsiva del Mercado Agroganadero.
+ */
 export const MercadoAgroWidget = () => {
-  const { data, loading, error } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
+  // Hooks para obtener los datos y el estado de feriado.
+  const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
+  const isHoliday = useIsHoliday('BA');
 
-  if (loading) { return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>; }
+  // Estado de carga unificado.
-  if (error) { return <Alert severity="error">{error}</Alert>; }
+  const isLoading = dataLoading || isHoliday === null;
-  if (!data || data.length === 0) { return <Alert severity="info">No hay datos del mercado agroganadero disponibles.</Alert>; }
+
+  if (isLoading) {
+    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
+  }
+
+  if (dataError) {
+    return <Alert severity="error">{dataError}</Alert>;
+  }
+
+  if (!data || data.length === 0) {
+    if (isHoliday) {
+      return <HolidayAlert />;
+    }
+    return <Alert severity="info">No hay datos del mercado agroganadero disponibles.</Alert>;
+  }
 
   return (
     <Box>
+      {/* Si es feriado, mostramos la alerta como un aviso encima del contenido. */}
+      {isHoliday && (
+        <Box sx={{ mb: 2 }}>
+          <HolidayAlert />
+        </Box>
+      )}
+
       {/* VISTA DE ESCRITORIO (se oculta en móvil) */}
       <TableContainer component={Paper} sx={{ display: { xs: 'none', md: 'block' } }}>
         <Table size="small" aria-label="tabla mercado agroganadero">
@@ -105,9 +135,10 @@ export const MercadoAgroWidget = () => {
           ))}
       </Box>
 
-      <Tooltip title={`Última actualización: ${formatFullDateTime(data[0].fechaRegistro)}`}>
+      {/* La información de la fuente se muestra siempre, usando la fecha del primer registro */}
+      <Tooltip title={`Última actualización: ${formatDateOnly(data[0].fechaRegistro)}`}>
         <Typography variant="caption" sx={{ p: 1, display: 'block', textAlign: 'right', color: 'text.secondary' }}>
-          Fuente: Mercado Agroganadero S.A.
+          {formatDateOnly(data[0].fechaRegistro)} - Fuente: Mercado Agroganadero S.A.
         </Typography>
       </Tooltip>
     </Box>

frontend/src/components/MervalHeroCard.tsx

@@ -90,7 +90,7 @@ export const MervalHeroCard = () => {
             )}
 
             {/* El contenido principal del widget siempre se muestra si hay datos. */}
-            <Paper elevation={3} sx={{ p: 2 }}>
+            <Paper elevation={3} sx={{ p: 2, mb: 3 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
                     <Box>
                         <Typography variant="h6" component="h2" sx={{ fontWeight: 'bold' }}>Índice S&P MERVAL</Typography>

frontend/src/components/UsaIndexHeroCard.tsx

@@ -1,13 +1,20 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Box, Paper, Typography, ToggleButton, ToggleButtonGroup, CircularProgress, Alert } from '@mui/material';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RemoveIcon from '@mui/icons-material/Remove';
+
+// Importaciones de nuestro proyecto
 import type { CotizacionBolsa } from '../models/mercadoModels';
 import { useApiData } from '../hooks/useApiData';
+import { useIsHoliday } from '../hooks/useIsHoliday';
 import { formatInteger } from '../utils/formatters';
 import { HistoricalChartWidget } from './HistoricalChartWidget';
+import { HolidayAlert } from './common/HolidayAlert';
 
+/**
+ * Sub-componente interno para mostrar la variación del índice.
+ */
 const VariacionIndex = ({ actual, anterior }: { actual: number, anterior: number }) => {
     if (anterior === 0) return null;
     const variacionPuntos = actual - anterior;
@@ -33,21 +40,53 @@ const VariacionIndex = ({ actual, anterior }: { actual: number, anterior: number
     );
 };
 
+/**
+ * Widget autónomo para la tarjeta de héroe del S&P 500.
+ */
 export const UsaIndexHeroCard = () => {
-    const { data: allUsaData, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
+    // Hooks para obtener los datos y el estado de feriado para el mercado de EEUU.
+    const { data: allUsaData, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
+    const isHoliday = useIsHoliday('US');
+
+    // Estado interno para el gráfico.
     const [dias, setDias] = useState<number>(30);
 
     const handleRangoChange = ( _event: React.MouseEvent<HTMLElement>, nuevoRango: number | null ) => {
         if (nuevoRango !== null) { setDias(nuevoRango); }
     };
     
+    // Filtramos el dato específico que este widget necesita.
     const indexData = allUsaData?.find(d => d.ticker === '^GSPC');
 
-    if (loading) { return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>; }
+    // Estado de carga unificado: esperamos a que AMBAS llamadas a la API terminen.
-    if (error) { return <Alert severity="error">{error}</Alert>; }
+    const isLoading = dataLoading || isHoliday === null;
-    if (!indexData) { return <Alert severity="info">No se encontraron datos para el índice S&P 500.</Alert>; }
 
+    if (isLoading) {
+        return <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', p: 4, height: { xs: 'auto', md: '445px' } }}><CircularProgress /></Box>;
+    }
+
+    if (dataError) {
+        return <Alert severity="error">{dataError}</Alert>;
+    }
+
+    // Si no hay datos del S&P 500, mostramos el mensaje apropiado.
+    if (!indexData) {
+        if (isHoliday) {
+            return <HolidayAlert />;
+        }
+        return <Alert severity="info">No se encontraron datos para el índice S&P 500.</Alert>;
+    }
+
+    // Si hay datos, renderizamos el contenido completo.
     return (
+        <Box>
+            {/* Si es feriado, mostramos la alerta como un aviso encima del contenido. */}
+            {isHoliday && (
+                <Box sx={{ mb: 2 }}>
+                    <HolidayAlert />
+                </Box>
+            )}
+
             <Paper elevation={3} sx={{ p: 2, mb: 3 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
                     <Box>
@@ -69,5 +108,6 @@ export const UsaIndexHeroCard = () => {
                     <HistoricalChartWidget ticker={indexData.ticker} mercado="EEUU" dias={dias} />
                 </Box>
             </Paper>
+        </Box>
     );
 };

frontend/src/components/common/HolidayAlert.tsx

@@ -1,10 +1,16 @@
 import { Alert } from '@mui/material';
 import CelebrationIcon from '@mui/icons-material/Celebration';
+import { formatDateOnly } from '../../utils/formatters';
 
 export const HolidayAlert = () => {
+    // Obtener la fecha actual en la zona horaria de Buenos Aires
+    const nowInBuenosAires = new Date(
+        new Date().toLocaleString('en-US', { timeZone: 'America/Argentina/Buenos_Aires' })
+    );
+
     return (
         <Alert severity="info" icon={<CelebrationIcon fontSize="inherit" />}>
-            Mercado cerrado por feriado.
+            {formatDateOnly(nowInBuenosAires.toISOString())} Mercado cerrado por feriado.
         </Alert>
     );
 };

frontend/src/components/raw-data/RawAgroTable.tsx

@@ -1,11 +1,17 @@
 import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+
+// Importaciones de nuestro proyecto
 import { useApiData } from '../../hooks/useApiData';
+import { useIsHoliday } from '../../hooks/useIsHoliday';
 import type { CotizacionGanado } from '../../models/mercadoModels';
 import { formatInteger, formatCurrency, formatFullDateTime } from '../../utils/formatters';
 import { copyToClipboard } from '../../utils/clipboardUtils';
+import { HolidayAlert } from '../common/HolidayAlert';
 
-// Función para convertir datos a formato CSV
+/**
+ * Función para convertir los datos de la tabla a un formato CSV para el portapapeles.
+ */
 const toCSV = (headers: string[], data: CotizacionGanado[]) => {
     const headerRow = headers.join(';');
     const dataRows = data.map(row => 
@@ -17,18 +23,25 @@ const toCSV = (headers: string[], data: CotizacionGanado[]) => {
             formatCurrency(row.mediano),
             formatInteger(row.cabezas),
             formatInteger(row.kilosTotales),
-            formatInteger(row.importeTotal)
+            formatInteger(row.importeTotal),
+            formatFullDateTime(row.fechaRegistro)
         ].join(';')
     );
     return [headerRow, ...dataRows].join('\n');
 };
 
+/**
+ * Componente de tabla de datos crudos para el Mercado Agroganadero,
+ * diseñado para la página de redacción.
+ */
 export const RawAgroTable = () => {
-    const { data, loading, error } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
+    // Hooks para obtener los datos y el estado de feriado.
+    const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
+    const isHoliday = useIsHoliday('BA');
 
     const handleCopy = () => {
         if (!data) return;
-        const headers = ["Categoría", "Especificaciones", "Máximo", "Mínimo", "Mediano", "Cabezas", "Kg Total", "Importe Total"];
+        const headers = ["Categoría", "Especificaciones", "Máximo", "Mínimo", "Mediano", "Cabezas", "Kg Total", "Importe Total", "Fecha de Registro"];
         const csvData = toCSV(headers, data);
         
         copyToClipboard(csvData)
@@ -39,12 +52,28 @@ export const RawAgroTable = () => {
             });
     };
 
-    if (loading) return <CircularProgress />;
+    // Estado de carga unificado.
-    if (error) return <Alert severity="error">{error}</Alert>;
+    const isLoading = dataLoading || isHoliday === null;
-    if (!data) return null;
+
+    if (isLoading) return <CircularProgress />;
+    if (dataError) return <Alert severity="error">{dataError}</Alert>;
+
+    if (!data || data.length === 0) {
+        if (isHoliday) {
+            return <HolidayAlert />;
+        }
+        return <Alert severity="info">No hay datos del mercado agroganadero disponibles.</Alert>;
+    }
 
     return (
         <Box>
+            {/* Si es feriado, mostramos una alerta informativa encima de la tabla. */}
+            {isHoliday && (
+                <Box sx={{ mb: 2 }}>
+                    <HolidayAlert />
+                </Box>
+            )}
+
             <Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
                 Copiar como CSV
             </Button>

frontend/src/components/raw-data/RawBolsaLocalTable.tsx

@@ -1,11 +1,17 @@
 import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+
+// Importaciones de nuestro proyecto
 import { useApiData } from '../../hooks/useApiData';
+import { useIsHoliday } from '../../hooks/useIsHoliday';
 import type { CotizacionBolsa } from '../../models/mercadoModels';
 import { formatCurrency, formatFullDateTime } from '../../utils/formatters';
 import { copyToClipboard } from '../../utils/clipboardUtils';
+import { HolidayAlert } from '../common/HolidayAlert';
 
-// Función para convertir datos a formato CSV
+/**
+ * Función para convertir los datos de la tabla a formato CSV.
+ */
 const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
     const headerRow = headers.join(';');
     const dataRows = data.map(row => 
@@ -14,36 +20,57 @@ const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
             row.nombreEmpresa,
             formatCurrency(row.precioActual),
             formatCurrency(row.cierreAnterior),
-            `${row.porcentajeCambio.toFixed(2)}%`
+            `${row.porcentajeCambio.toFixed(2)}%`,
+            formatFullDateTime(row.fechaRegistro)
         ].join(';')
     );
     return [headerRow, ...dataRows].join('\n');
 };
 
+/**
+ * Componente de tabla de datos crudos para la Bolsa Local (MERVAL y acciones),
+ * diseñado para la página de redacción.
+ */
 export const RawBolsaLocalTable = () => {
-    const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
+    // Hooks para obtener los datos y el estado de feriado.
+    const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
+    const isHoliday = useIsHoliday('BA');
 
     const handleCopy = () => {
         if (!data) return;
-        const headers = ["Ticker", "Nombre", "Último Precio", "Cierre Anterior", "Variación %"];
+        const headers = ["Ticker", "Nombre", "Último Precio", "Cierre Anterior", "Variación %", "Fecha de Registro"];
         const csvData = toCSV(headers, data);
         
         copyToClipboard(csvData)
-            .then(() => {
+            .then(() => alert('¡Tabla copiada al portapapeles!'))
-                alert('¡Tabla copiada al portapapeles!');
-            })
             .catch(err => {
                 console.error('Error al copiar:', err);
                 alert('Error: No se pudo copiar la tabla.');
             });
     };
 
-    if (loading) return <CircularProgress />;
+    // Estado de carga unificado.
-    if (error) return <Alert severity="error">{error}</Alert>;
+    const isLoading = dataLoading || isHoliday === null;
-    if (!data) return null;
+
+    if (isLoading) return <CircularProgress />;
+    if (dataError) return <Alert severity="error">{dataError}</Alert>;
+
+    if (!data || data.length === 0) {
+        if (isHoliday) {
+            return <HolidayAlert />;
+        }
+        return <Alert severity="info">No hay datos disponibles para el mercado local.</Alert>;
+    }
 
     return (
         <Box>
+            {/* Si es feriado, mostramos una alerta informativa encima de la tabla. */}
+            {isHoliday && (
+                <Box sx={{ mb: 2 }}>
+                    <HolidayAlert />
+                </Box>
+            )}
+
             <Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
                 Copiar como CSV
             </Button>

frontend/src/components/raw-data/RawBolsaUsaTable.tsx

@@ -1,11 +1,17 @@
 import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+
+// Importaciones de nuestro proyecto
 import { useApiData } from '../../hooks/useApiData';
+import { useIsHoliday } from '../../hooks/useIsHoliday';
 import type { CotizacionBolsa } from '../../models/mercadoModels';
 import { formatCurrency, formatFullDateTime } from '../../utils/formatters';
 import { copyToClipboard } from '../../utils/clipboardUtils';
+import { HolidayAlert } from '../common/HolidayAlert';
 
-// Función para convertir datos a formato CSV
+/**
+ * Función para convertir los datos de la tabla a formato CSV.
+ */
 const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
     const headerRow = headers.join(';');
     const dataRows = data.map(row => 
@@ -14,18 +20,25 @@ const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
             row.nombreEmpresa,
             formatCurrency(row.precioActual, 'USD'),
             formatCurrency(row.cierreAnterior, 'USD'),
-            `${row.porcentajeCambio.toFixed(2)}%`
+            `${row.porcentajeCambio.toFixed(2)}%`,
+            formatFullDateTime(row.fechaRegistro)
         ].join(';')
     );
     return [headerRow, ...dataRows].join('\n');
 };
 
+/**
+ * Componente de tabla de datos crudos para la Bolsa de EEUU y ADRs,
+ * diseñado para la página de redacción.
+ */
 export const RawBolsaUsaTable = () => {
-    const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
+    // Hooks para obtener los datos y el estado de feriado para el mercado de EEUU.
+    const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
+    const isHoliday = useIsHoliday('US');
 
     const handleCopy = () => {
         if (!data) return;
-        const headers = ["Ticker", "Nombre", "Último Precio (USD)", "Cierre Anterior (USD)", "Variación %"];
+        const headers = ["Ticker", "Nombre", "Último Precio (USD)", "Cierre Anterior (USD)", "Variación %", "Fecha de Registro"];
         const csvData = toCSV(headers, data);
         
         copyToClipboard(csvData)
@@ -36,12 +49,28 @@ export const RawBolsaUsaTable = () => {
             });
     };
 
-    if (loading) return <CircularProgress />;
+    // Estado de carga unificado.
-    if (error) return <Alert severity="error">{error}</Alert>;
+    const isLoading = dataLoading || isHoliday === null;
-    if (!data || data.length === 0) return <Alert severity="info">No hay datos disponibles (el fetcher puede estar desactivado).</Alert>;
+
+    if (isLoading) return <CircularProgress />;
+    if (dataError) return <Alert severity="error">{dataError}</Alert>;
+
+    if (!data || data.length === 0) {
+        if (isHoliday) {
+            return <HolidayAlert />;
+        }
+        return <Alert severity="info">No hay datos disponibles para el mercado de EEUU (el fetcher puede estar desactivado).</Alert>;
+    }
 
     return (
         <Box>
+            {/* Si es feriado, mostramos una alerta informativa encima de la tabla. */}
+            {isHoliday && (
+                <Box sx={{ mb: 2 }}>
+                    <HolidayAlert />
+                </Box>
+            )}
+
             <Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
                 Copiar como CSV
             </Button>

frontend/src/components/raw-data/RawGranosTable.tsx

@@ -1,11 +1,17 @@
 import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+
+// Importaciones de nuestro proyecto
 import { useApiData } from '../../hooks/useApiData';
+import { useIsHoliday } from '../../hooks/useIsHoliday';
 import type { CotizacionGrano } from '../../models/mercadoModels';
 import { formatInteger, formatDateOnly, formatFullDateTime } from '../../utils/formatters';
 import { copyToClipboard } from '../../utils/clipboardUtils';
+import { HolidayAlert } from '../common/HolidayAlert';
 
-// Función para convertir datos a formato CSV
+/**
+ * Función para convertir los datos de la tabla a formato CSV.
+ */
 const toCSV = (headers: string[], data: CotizacionGrano[]) => {
     const headerRow = headers.join(';');
     const dataRows = data.map(row => 
@@ -13,18 +19,25 @@ const toCSV = (headers: string[], data: CotizacionGrano[]) => {
             row.nombre,
             formatInteger(row.precio),
             formatInteger(row.variacionPrecio),
-            formatDateOnly(row.fechaOperacion)
+            formatDateOnly(row.fechaOperacion),
+            formatFullDateTime(row.fechaRegistro)
         ].join(';')
     );
     return [headerRow, ...dataRows].join('\n');
 };
 
+/**
+ * Componente de tabla de datos crudos para el mercado de Granos,
+ * diseñado para la página de redacción.
+ */
 export const RawGranosTable = () => {
-    const { data, loading, error } = useApiData<CotizacionGrano[]>('/mercados/granos');
+    // Hooks para obtener los datos y el estado de feriado para el mercado argentino.
+    const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGrano[]>('/mercados/granos');
+    const isHoliday = useIsHoliday('BA');
 
     const handleCopy = () => {
         if (!data) return;
-        const headers = ["Grano", "Precio ($/Tn)", "Variación", "Fecha Op."];
+        const headers = ["Grano", "Precio ($/Tn)", "Variación", "Fecha Op.", "Fecha de Registro"];
         const csvData = toCSV(headers, data);
         
         copyToClipboard(csvData)
@@ -35,12 +48,28 @@ export const RawGranosTable = () => {
             });
     };
 
-    if (loading) return <CircularProgress />;
+    // Estado de carga unificado.
-    if (error) return <Alert severity="error">{error}</Alert>;
+    const isLoading = dataLoading || isHoliday === null;
-    if (!data) return null;
+
+    if (isLoading) return <CircularProgress />;
+    if (dataError) return <Alert severity="error">{dataError}</Alert>;
+
+    if (!data || data.length === 0) {
+        if (isHoliday) {
+            return <HolidayAlert />;
+        }
+        return <Alert severity="info">No hay datos de granos disponibles.</Alert>;
+    }
 
     return (
         <Box>
+            {/* Si es feriado, mostramos una alerta informativa encima de la tabla. */}
+            {isHoliday && (
+                <Box sx={{ mb: 2 }}>
+                    <HolidayAlert />
+                </Box>
+            )}
+
             <Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
                 Copiar como CSV
             </Button>

frontend/src/utils/formatters.ts

@@ -12,11 +12,8 @@ export const formatCurrency = (num: number, currency = 'ARS') => {
 };
 
 export const formatCurrency2Decimal = (num: number, currency = 'ARS') => {  
-  const style = currency === 'USD' ? 'currency' : 'decimal';
+  return new Intl.NumberFormat('es-AR', {
-  const locale = currency === 'USD' ? 'en-US' : 'es-AR';
+    style: 'decimal',
-  
-  return new Intl.NumberFormat(locale, {
-    style: style,
     currency: currency,
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,