fix(home): add a button to the beach list on the no-featured-beaches notice

The "no featured beaches today" message already told the user to check the
full list, but gave them no way to get there — the sentence was the whole
UI. Adds a button next to it that navigates to /playas, reusing the same
button treatment as the adjacent error state's retry action.

Author: oscaruiz

frontend/src/pages/HomePage.css

@@ -682,7 +682,7 @@
 }
 
 .hp-empty-msg p {
-  margin: 0;
+  margin: 0 0 10px;
 }
 
 .hp-error-msg {

frontend/src/pages/HomePage.tsx

@@ -584,6 +584,9 @@ const HomePage: React.FC = () => {
               <h2 className="section-kicker">{t('home.mejorHoy')}</h2>
               <div className="hp-empty-msg">
                 <p>{t('home.sinDestacadas')}</p>
+                <button className="hp-retry-btn" onClick={() => history.push('/playas')}>
+                  {t('home.sinDestacadasBoton')}
+                </button>
               </div>
             </section>
           )}

frontend/src/shared/i18n/en.ts

@@ -71,6 +71,7 @@ export const en = {
   'home.verEnMapaDe': 'View {nombre} on the map',
   'home.puntuacionAria': 'Score {n} out of 100',
   'home.sinDestacadas': 'No featured beaches today — check the full list',
+  'home.sinDestacadasBoton': 'View beach list',
   'home.errorCondiciones': 'Could not load current conditions',
   'home.reintentar': 'Retry',
   'home.revisarAntes': 'Better check before you go',

frontend/src/shared/i18n/es.ts

@@ -79,6 +79,7 @@ export const es = {
   'home.verEnMapaDe': 'Ver {nombre} en el mapa',
   'home.puntuacionAria': 'Puntuación {n} de 100',
   'home.sinDestacadas': 'Hoy no hay playas destacadas — consulta el listado completo',
+  'home.sinDestacadasBoton': 'Ver listado de playas',
   'home.errorCondiciones': 'No se pudieron cargar las condiciones actuales',
   'home.reintentar': 'Reintentar',
   'home.revisarAntes': 'Mejor revisar antes de ir',

frontend/src/test/characterization/homePage.empty.test.tsx

@@ -11,7 +11,8 @@
  */
 
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
+import { Route } from 'react-router-dom';
 import type { FeaturedBeachesResponse } from '../../services/api';
 import HomePage from '../../pages/HomePage';
 import { renderWithProviders } from '../render';
@@ -48,3 +49,24 @@ it('muestra el aviso de "sin destacadas" cuando ninguna playa llega a 60', async
   // The "revisar" section is rendered: it does not depend on the threshold.
   expect(screen.getByText('Mejor revisar antes de ir')).toBeInTheDocument();
 });
+
+it('el aviso de "sin destacadas" lleva un botón al listado completo', async () => {
+  Object.defineProperty(navigator, 'geolocation', { configurable: true, value: undefined });
+  installFetchMock([
+    route(FEATURED, { json: sinDestacadas }),
+    route(BEACHES, { json: beachesResponse }),
+  ]);
+
+  renderWithProviders(
+    <>
+      <HomePage />
+      <Route path="/playas" render={() => <div>EN-LISTADO</div>} />
+    </>,
+    { route: '/' },
+  );
+
+  const boton = await screen.findByRole('button', { name: 'Ver listado de playas' });
+  fireEvent.click(boton);
+
+  expect(await screen.findByText('EN-LISTADO')).toBeInTheDocument();
+});