feat: añadir páginas legales y mejorar botón compartir

- Crear página de Política de Privacidad (/privacidad)
- Crear página de Descargo de Responsabilidad (/descargo-responsabilidad)
- Crear página de Aviso Legal (/aviso-legal)
- Actualizar página Acerca de con enlaces a páginas legales
- Mejorar botón compartir en MenuSheet (usar toast en lugar de alert)
- Añadir rutas en App.tsx para las nuevas páginas
- Lazy loading para todas las nuevas páginas
This commit is contained in:
planetazuzu 2025-12-21 12:05:24 +01:00
parent 5b88ac6850
commit 8576d1656a
7 changed files with 734 additions and 3 deletions

View file

@ -41,6 +41,9 @@ const Historial = lazy(() => import("./pages/Historial"));
const Ajustes = lazy(() => import("./pages/Ajustes"));
const Acerca = lazy(() => import("./pages/Acerca"));
const GaleriaImagenes = lazy(() => import("./pages/GaleriaImagenes"));
const Privacidad = lazy(() => import("./pages/Privacidad"));
const DescargoResponsabilidad = lazy(() => import("./pages/DescargoResponsabilidad"));
const AvisoLegal = lazy(() => import("./pages/AvisoLegal"));
const queryClient = new QueryClient();
@ -89,6 +92,9 @@ const App = () => {
<Route path="/ajustes" element={<Ajustes />} />
<Route path="/acerca" element={<Acerca />} />
<Route path="/galeria" element={<GaleriaImagenes />} />
<Route path="/privacidad" element={<Privacidad />} />
<Route path="/descargo-responsabilidad" element={<DescargoResponsabilidad />} />
<Route path="/aviso-legal" element={<AvisoLegal />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Suspense>

View file

@ -80,6 +80,13 @@ const DrugCard = ({ drug, defaultExpanded = false }: DrugCardProps) => {
</div>
<div className="flex items-center gap-2 flex-shrink-0">
<button
onClick={handleShare}
className="w-10 h-10 flex items-center justify-center rounded-lg transition-colors text-muted-foreground hover:text-foreground"
aria-label="Compartir fármaco"
>
<Share2 className="w-5 h-5" />
</button>
<button
onClick={toggleFavorite}
className={cn(

View file

@ -24,7 +24,7 @@ const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
} else {
// Fallback: copiar URL al portapapeles
await navigator.clipboard.writeText(shareData.url);
alert('URL copiada al portapapeles');
toast.success('URL copiada al portapapeles');
onClose();
}
} catch (error) {
@ -34,9 +34,10 @@ const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
// Fallback: copiar URL
try {
await navigator.clipboard.writeText(shareData.url);
alert('URL copiada al portapapeles');
toast.success('URL copiada al portapapeles');
} catch (clipboardError) {
console.error('Error al copiar:', clipboardError);
toast.error('No se pudo copiar al portapapeles');
}
}
}

View file

@ -1,4 +1,4 @@
import { Info, Heart, Code, ExternalLink, Shield } from 'lucide-react';
import { Info, Heart, Code, ExternalLink, Shield, FileText } from 'lucide-react';
import { Link } from 'react-router-dom';
const Acerca = () => {
@ -117,6 +117,43 @@ const Acerca = () => {
</div>
</section>
{/* Información Legal */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Información Legal</h2>
<div className="space-y-2">
<Link
to="/privacidad"
className="flex items-center gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
>
<Shield className="w-5 h-5 text-primary" />
<div className="flex-1">
<p className="font-medium text-foreground">Política de Privacidad</p>
<p className="text-sm text-muted-foreground">Cómo protegemos tus datos</p>
</div>
</Link>
<Link
to="/descargo-responsabilidad"
className="flex items-center gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
>
<Shield className="w-5 h-5 text-warning" />
<div className="flex-1">
<p className="font-medium text-foreground">Descargo de Responsabilidad</p>
<p className="text-sm text-muted-foreground">Aviso importante sobre el uso médico</p>
</div>
</Link>
<Link
to="/aviso-legal"
className="flex items-center gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
>
<FileText className="w-5 h-5 text-primary" />
<div className="flex-1">
<p className="font-medium text-foreground">Aviso Legal</p>
<p className="text-sm text-muted-foreground">Términos y condiciones de uso</p>
</div>
</Link>
</div>
</section>
{/* Créditos */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Créditos</h2>

253
src/pages/AvisoLegal.tsx Normal file
View file

@ -0,0 +1,253 @@
import { FileText, Scale, Copyright, ExternalLink, AlertCircle } from 'lucide-react';
import { Link } from 'react-router-dom';
const AvisoLegal = () => {
return (
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold text-foreground mb-1">Aviso Legal</h1>
<p className="text-muted-foreground text-sm">
Términos y condiciones de uso de EMERGES TES
</p>
</div>
{/* Introducción */}
<section className="space-y-3">
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-foreground">
El presente aviso legal regula el uso de la aplicación web <strong>EMERGES TES</strong>.
</p>
<p className="text-sm text-muted-foreground">
Al acceder y utilizar esta aplicación, aceptas los términos y condiciones establecidos en este documento.
</p>
</div>
</section>
{/* Propiedad intelectual */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<Copyright className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Propiedad Intelectual</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground">
Todos los contenidos de esta aplicación, incluyendo pero no limitado a:
</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Textos, protocolos y procedimientos</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Diseño gráfico e interfaces</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Código fuente y software</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Imágenes e infografías</span>
</li>
</ul>
<p className="text-sm text-foreground mt-2">
Están protegidos por derechos de autor y pertenecen a sus respectivos propietarios o están bajo licencias que permiten su uso en este contexto.
</p>
</div>
</section>
{/* Uso permitido */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<FileText className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Uso Permitido</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground mb-2">Se permite:</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-success"></span>
<span>Uso personal y profesional para fines educativos y de referencia</span>
</li>
<li className="flex items-start gap-2">
<span className="text-success"></span>
<span>Consultar protocolos y procedimientos en situaciones de emergencia</span>
</li>
<li className="flex items-start gap-2">
<span className="text-success"></span>
<span>Compartir enlaces a la aplicación</span>
</li>
<li className="flex items-start gap-2">
<span className="text-success"></span>
<span>Instalar como PWA en dispositivos personales</span>
</li>
</ul>
</div>
</section>
{/* Uso prohibido */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<AlertCircle className="w-5 h-5 text-warning" />
<h2 className="font-semibold text-foreground">Uso Prohibido</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground mb-2">Está prohibido:</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Reproducir, copiar o distribuir el contenido sin autorización</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Modificar, adaptar o crear obras derivadas sin permiso</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Usar el contenido con fines comerciales sin autorización</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Realizar ingeniería inversa del código fuente</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Eliminar o modificar avisos de copyright o propiedad</span>
</li>
</ul>
</div>
</section>
{/* Contenido de terceros */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<ExternalLink className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Contenido de Terceros</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground">
Esta aplicación puede contener referencias a guías y protocolos de organizaciones como:
</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>ERC (European Resuscitation Council)</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>AHA (American Heart Association)</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>SEMES (Sociedad Española de Medicina de Urgencias y Emergencias)</span>
</li>
</ul>
<p className="text-sm text-foreground mt-2">
Estos contenidos son propiedad de sus respectivos autores y se utilizan como referencia. No se reclama propiedad sobre estos contenidos.
</p>
</div>
</section>
{/* Limitación de responsabilidad */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<Scale className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Limitación de Responsabilidad</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground">
<strong>EMERGES TES</strong> se proporciona "tal cual" sin garantías de ningún tipo, expresas o implícitas.
</p>
<p className="text-sm text-muted-foreground">
No garantizamos:
</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>La exactitud, completitud o actualidad del contenido</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Que la aplicación funcione sin interrupciones o errores</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Que el contenido sea adecuado para todos los propósitos</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>La corrección de errores o defectos</span>
</li>
</ul>
</div>
</section>
{/* Modificaciones */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Modificaciones</h2>
<div className="p-4 bg-card border border-border rounded-lg">
<p className="text-sm text-muted-foreground">
Nos reservamos el derecho de modificar, actualizar o discontinuar cualquier parte de la aplicación en cualquier momento sin previo aviso. No nos hacemos responsables de las consecuencias derivadas de estas modificaciones.
</p>
</div>
</section>
{/* Enlaces externos */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Enlaces Externos</h2>
<div className="p-4 bg-card border border-border rounded-lg">
<p className="text-sm text-muted-foreground">
Esta aplicación puede contener enlaces a sitios web de terceros. No tenemos control sobre el contenido de estos sitios y no nos hacemos responsables de su contenido, políticas de privacidad o prácticas.
</p>
</div>
</section>
{/* Jurisdicción */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Jurisdicción y Ley Aplicable</h2>
<div className="p-4 bg-card border border-border rounded-lg">
<p className="text-sm text-muted-foreground">
Este aviso legal se rige por la legislación española. Cualquier disputa relacionada con el uso de esta aplicación será sometida a los tribunales competentes de España.
</p>
</div>
</section>
{/* Enlaces relacionados */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Enlaces Relacionados</h2>
<div className="space-y-2">
<Link
to="/descargo-responsabilidad"
className="flex items-center gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
>
<AlertCircle className="w-5 h-5 text-primary" />
<div className="flex-1">
<p className="font-medium text-foreground">Descargo de Responsabilidad</p>
<p className="text-sm text-muted-foreground">Aviso sobre el uso médico</p>
</div>
</Link>
<Link
to="/privacidad"
className="flex items-center gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
>
<FileText className="w-5 h-5 text-primary" />
<div className="flex-1">
<p className="font-medium text-foreground">Política de Privacidad</p>
<p className="text-sm text-muted-foreground">Protección de datos</p>
</div>
</Link>
</div>
</section>
{/* Fecha de actualización */}
<div className="p-3 bg-muted rounded-lg">
<p className="text-xs text-muted-foreground text-center">
Última actualización: 19 de diciembre de 2024
</p>
</div>
</div>
);
};
export default AvisoLegal;

View file

@ -0,0 +1,243 @@
import { AlertTriangle, Shield, FileWarning, XCircle } from 'lucide-react';
import { Link } from 'react-router-dom';
const DescargoResponsabilidad = () => {
return (
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold text-foreground mb-1">Descargo de Responsabilidad</h1>
<p className="text-muted-foreground text-sm">
Aviso importante sobre el uso de esta aplicación
</p>
</div>
{/* Aviso crítico */}
<section className="space-y-3">
<div className="p-4 bg-red-50 dark:bg-red-950/20 border-2 border-red-300 dark:border-red-800 rounded-lg">
<div className="flex items-start gap-3">
<AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
<div className="flex-1">
<p className="text-sm font-bold text-red-900 dark:text-red-100 mb-2">
AVISO CRÍTICO - LEA ANTES DE USAR
</p>
<p className="text-sm text-red-800 dark:text-red-200">
Esta aplicación es una <strong>herramienta de referencia</strong> y <strong>NO sustituye</strong> la formación reglada, el criterio clínico profesional ni los protocolos oficiales de tu institución.
</p>
</div>
</div>
</div>
</section>
{/* No es un sistema de diagnóstico */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<XCircle className="w-5 h-5 text-warning" />
<h2 className="font-semibold text-foreground">No es un Sistema de Diagnóstico</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground">
<strong>EMERGES TES</strong> NO es:
</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Un sistema de diagnóstico automático</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Un sustituto de la formación profesional</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Una herramienta de toma de decisiones clínicas</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Una fuente única de información en situaciones críticas</span>
</li>
</ul>
</div>
</section>
{/* Responsabilidad del profesional */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<Shield className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Responsabilidad del Profesional</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-3">
<p className="text-sm text-foreground">
El profesional que utiliza esta aplicación mantiene la <strong>responsabilidad completa</strong> de sus actuaciones:
</p>
<ul className="space-y-2 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span><strong>Decisión clínica:</strong> Todas las decisiones deben basarse en el criterio profesional, formación y protocolos oficiales.</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span><strong>Validación:</strong> La información debe ser validada con protocolos oficiales de tu institución antes de su aplicación.</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span><strong>Formación continua:</strong> Esta herramienta no sustituye la formación continua y actualización profesional.</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span><strong>Contexto:</strong> Cada situación es única y requiere evaluación individualizada.</span>
</li>
</ul>
</div>
</section>
{/* Limitaciones */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<FileWarning className="w-5 h-5 text-warning" />
<h2 className="font-semibold text-foreground">Limitaciones</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground mb-2">Esta aplicación tiene las siguientes limitaciones:</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>El contenido puede no estar actualizado con las últimas guías clínicas</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>No incluye todas las situaciones posibles ni excepciones</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>No considera el contexto específico de cada paciente</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>Puede contener errores u omisiones</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>No sustituye la consulta con supervisores o médicos</span>
</li>
</ul>
</div>
</section>
{/* Uso adecuado */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Uso Adecuado</h2>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground mb-2">Esta aplicación está diseñada para:</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-success"></span>
<span>Consulta rápida de protocolos y procedimientos</span>
</li>
<li className="flex items-start gap-2">
<span className="text-success"></span>
<span>Referencia de dosis y fármacos</span>
</li>
<li className="flex items-start gap-2">
<span className="text-success"></span>
<span>Apoyo a la memoria en situaciones de estrés</span>
</li>
<li className="flex items-start gap-2">
<span className="text-success"></span>
<span>Herramienta de formación y repaso</span>
</li>
</ul>
</div>
</section>
{/* Exención de responsabilidad */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Exención de Responsabilidad</h2>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground">
Los desarrolladores, colaboradores y cualquier entidad relacionada con <strong>EMERGES TES</strong>:
</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>No se hacen responsables de las decisiones clínicas tomadas basándose en esta aplicación</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>No garantizan la exactitud, completitud o actualidad del contenido</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>No asumen responsabilidad por daños derivados del uso o mal uso de esta aplicación</span>
</li>
<li className="flex items-start gap-2">
<span className="text-warning"></span>
<span>No se responsabilizan de actualizaciones o cambios en protocolos oficiales</span>
</li>
</ul>
</div>
</section>
{/* Recomendaciones */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Recomendaciones</h2>
<div className="p-4 bg-muted border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground mb-2">Antes de usar esta aplicación en situaciones reales:</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-info"></span>
<span>Valida el contenido con protocolos oficiales de tu institución</span>
</li>
<li className="flex items-start gap-2">
<span className="text-info"></span>
<span>Consulta con supervisores o médicos cuando sea necesario</span>
</li>
<li className="flex items-start gap-2">
<span className="text-info"></span>
<span>Mantén tu formación actualizada</span>
</li>
<li className="flex items-start gap-2">
<span className="text-info"></span>
<span>Usa esta herramienta como apoyo, no como única fuente</span>
</li>
</ul>
</div>
</section>
{/* Enlaces relacionados */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Enlaces Relacionados</h2>
<div className="space-y-2">
<Link
to="/aviso-legal"
className="flex items-center gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
>
<FileWarning className="w-5 h-5 text-primary" />
<div className="flex-1">
<p className="font-medium text-foreground">Aviso Legal</p>
<p className="text-sm text-muted-foreground">Términos y condiciones de uso</p>
</div>
</Link>
<Link
to="/acerca"
className="flex items-center gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
>
<Shield className="w-5 h-5 text-primary" />
<div className="flex-1">
<p className="font-medium text-foreground">Acerca de</p>
<p className="text-sm text-muted-foreground">Información sobre la aplicación</p>
</div>
</Link>
</div>
</section>
{/* Fecha de actualización */}
<div className="p-3 bg-muted rounded-lg">
<p className="text-xs text-muted-foreground text-center">
Última actualización: 19 de diciembre de 2024
</p>
</div>
</div>
);
};
export default DescargoResponsabilidad;

184
src/pages/Privacidad.tsx Normal file
View file

@ -0,0 +1,184 @@
import { Shield, Lock, Eye, Database, FileText } from 'lucide-react';
import { Link } from 'react-router-dom';
const Privacidad = () => {
return (
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold text-foreground mb-1">Política de Privacidad</h1>
<p className="text-muted-foreground text-sm">
Información sobre cómo protegemos tus datos
</p>
</div>
{/* Introducción */}
<section className="space-y-3">
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-foreground">
<strong>EMERGES TES</strong> respeta tu privacidad y se compromete a proteger tus datos personales.
</p>
<p className="text-sm text-muted-foreground">
Esta política explica cómo recopilamos, usamos y protegemos tu información cuando utilizas nuestra aplicación.
</p>
</div>
</section>
{/* Datos que recopilamos */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<Database className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Datos que Recopilamos</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-3">
<div>
<p className="text-sm font-medium text-foreground mb-2">Datos almacenados localmente:</p>
<ul className="space-y-2 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span><strong>Favoritos:</strong> Almacenados en localStorage de tu dispositivo. Solo tienes acceso.</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span><strong>Historial de búsquedas:</strong> Almacenado en sessionStorage. Se elimina al cerrar el navegador.</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span><strong>Preferencias de tema:</strong> Almacenadas localmente para recordar tu elección.</span>
</li>
</ul>
</div>
<div className="p-3 bg-muted rounded-lg">
<p className="text-sm text-foreground">
<strong>No recopilamos:</strong> Datos personales identificables, información de ubicación, datos de uso analíticos, ni información de terceros.
</p>
</div>
</div>
</section>
{/* Uso de datos */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<Eye className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Uso de los Datos</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground">
Los datos almacenados localmente se utilizan únicamente para:
</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Mejorar tu experiencia de usuario (favoritos, historial)</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Recordar tus preferencias (tema claro/oscuro)</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Funcionamiento offline de la aplicación</span>
</li>
</ul>
</div>
</section>
{/* Almacenamiento */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<Lock className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Almacenamiento y Seguridad</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground">
<strong>Todos los datos se almacenan localmente en tu dispositivo.</strong>
</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>No se envían datos a servidores externos</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>No hay base de datos en la nube</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Los datos solo existen en tu navegador</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Puedes eliminar todos los datos desde Ajustes Limpiar datos locales</span>
</li>
</ul>
</div>
</section>
{/* Cookies y tecnologías similares */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<FileText className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Cookies y Tecnologías Similares</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg">
<p className="text-sm text-foreground">
Esta aplicación utiliza <strong>localStorage</strong> y <strong>sessionStorage</strong> del navegador para almacenar datos localmente. No utilizamos cookies de seguimiento ni tecnologías de terceros para recopilar información.
</p>
</div>
</section>
{/* Tus derechos */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<Shield className="w-5 h-5 text-primary" />
<h2 className="font-semibold text-foreground">Tus Derechos</h2>
</div>
<div className="p-4 bg-card border border-border rounded-lg space-y-2">
<p className="text-sm text-foreground mb-2">Tienes derecho a:</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Acceder a tus datos almacenados localmente</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Eliminar tus datos en cualquier momento desde Ajustes</span>
</li>
<li className="flex items-start gap-2">
<span className="text-primary"></span>
<span>Desinstalar la aplicación, lo que eliminará todos los datos locales</span>
</li>
</ul>
</div>
</section>
{/* Cambios en la política */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Cambios en esta Política</h2>
<div className="p-4 bg-card border border-border rounded-lg">
<p className="text-sm text-muted-foreground">
Podemos actualizar esta política de privacidad ocasionalmente. La fecha de la última actualización se indicará al final de este documento. Te recomendamos revisar esta política periódicamente.
</p>
</div>
</section>
{/* Contacto */}
<section className="space-y-3">
<h2 className="font-semibold text-foreground">Contacto</h2>
<div className="p-4 bg-card border border-border rounded-lg">
<p className="text-sm text-muted-foreground">
Si tienes preguntas sobre esta política de privacidad, puedes contactarnos a través de la página <Link to="/acerca" className="text-primary hover:underline">Acerca de</Link>.
</p>
</div>
</section>
{/* Fecha de actualización */}
<div className="p-3 bg-muted rounded-lg">
<p className="text-xs text-muted-foreground text-center">
Última actualización: 19 de diciembre de 2024
</p>
</div>
</div>
);
};
export default Privacidad;