refactor(ui): modulariza App.jsx y unifica branding y caché PWA

- Extrae App.jsx en módulos reutilizables: constants/ (categorias,
  provincias), utils/geo, styles/shared, hooks/usePwaInstall y
  components/ (StarRating, LocalCard, CampoUbicacion, BannerMovil,
  CategoriaBadge)
- AdminPanel reutiliza constantes y componentes compartidos y corrige
  la limpieza de suscripciones de Firebase al desmontar
- Añade logos de marca (logo-localesp.png + @2x) y regenera los iconos
  PWA con tamaños menores
- sw.js: sube la caché del shell a v2 e incluye los nuevos iconos y logos

src/AdminPanel.jsx

@@ -7,14 +7,8 @@ import {
   suscribirLocales, deleteLocal,
   obtenerPalabrasFiltradas, guardarPalabrasFiltradas,
 } from "./firebase.js";
-
-const CATEGORIAS = {
-  "Restauración":          { emoji:"🍽️", color:"#8B0000", bg:"#FFF0F0" },
-  "Pequeño comercio":      { emoji:"🛍️", color:"#1A5276", bg:"#EBF5FB" },
-  "Peluquería y estética": { emoji:"✂️",  color:"#76448A", bg:"#F5EEF8" },
-  "Servicios del hogar":   { emoji:"🔧", color:"#1E8449", bg:"#EAFAF1" },
-  "Otros":                 { emoji:"📌", color:"#784212", bg:"#FDF2E9" },
-};
+import { obtenerCategoria } from "./constants/categorias.js";
+import StarRating from "./components/StarRating.jsx";
 
 const S = {
   page:     { minHeight:"100vh", background:"#F2EDE8", fontFamily:"-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif" },
@@ -85,21 +79,21 @@ function PantallaAuth() {
 
 // ── Tarjeta propuesta pendiente ───────────────────────────────────────────────
 function TarjetaPropuesta({ p, onAprobar, onRechazar, busy }) {
-  const cat = CATEGORIAS[p.categoria] || {};
+  const cat = obtenerCategoria(p.categoria);
   const fecha = new Date(p.fechaPropuesta).toLocaleDateString("es-ES", { day:"numeric", month:"short", hour:"2-digit", minute:"2-digit" });
   return (
-    <div style={{ ...S.card, borderLeft:`4px solid ${cat.color||"#CCC"}`, marginBottom:10 }}>
+    <div style={{ ...S.card, borderLeft:`4px solid ${cat.color}`, marginBottom:10 }}>
       <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", flexWrap:"wrap", gap:12 }}>
         <div style={{ flex:1 }}>
           <div style={{ display:"flex", alignItems:"center", gap:8, flexWrap:"wrap", marginBottom:6 }}>
             <span style={{ fontWeight:700, fontSize:17 }}>{p.nombre}</span>
-            {cat.emoji && <span style={S.badge(cat.color, cat.bg)}>{cat.emoji} {p.categoria}</span>}
+            {p.categoria && <span style={S.badge(cat.textColor, cat.bgLight)}>{cat.emoji} {p.categoria}</span>}
             {p.subcategoria && <span style={{ fontSize:12, color:"#888", background:"#F5F5F5", padding:"2px 8px", borderRadius:20 }}>{p.subcategoria}</span>}
           </div>
-          <div style={{ display:"flex", flexWrap:"wrap", gap:16, fontSize:13, color:"#666" }}>
+          <div style={{ display:"flex", flexWrap:"wrap", alignItems:"center", gap:16, fontSize:13, color:"#666" }}>
             <span>📍 {p.provincia}</span>
             {p.direccion && <span>🗺 {p.direccion}</span>}
-            <span style={{ color:"#D4AF37" }}>{"★".repeat(p.puntuacion||0)}{"☆".repeat(5-(p.puntuacion||0))}</span>
+            <StarRating value={p.puntuacion} readOnly size={14} />
             <span style={{ color:"#AAA" }}>Enviado: {fecha}</span>
           </div>
           {p.descripcion && <p style={{ margin:"8px 0 0", fontSize:13, color:"#666", fontStyle:"italic", background:"#FAFAFA", padding:"8px 12px", borderRadius:8 }}>"{p.descripcion}"</p>}
@@ -128,10 +122,14 @@ function PanelAdmin({ email }) {
 
   useEffect(() => {
     setCargando(true);
-    const u1 = suscribirPendientes(l => { setPendientes(l); setCargando(false); }, () => setCargando(false));
-    const u2 = suscribirLocales(l => setPublicados(l), () => {});
-    obtenerPalabrasFiltradas().then(p => setPalabras(p));
-    return () => { u1(); u2(); };
+    let cancelado = false;
+    let limpiarPendientes, limpiarPublicados;
+    suscribirPendientes(l => { if (!cancelado) { setPendientes(l); setCargando(false); } }, () => !cancelado && setCargando(false))
+      .then(fn => { if (cancelado) fn?.(); else limpiarPendientes = fn; });
+    suscribirLocales(l => !cancelado && setPublicados(l), () => {})
+      .then(fn => { if (cancelado) fn?.(); else limpiarPublicados = fn; });
+    obtenerPalabrasFiltradas().then(p => !cancelado && setPalabras(p));
+    return () => { cancelado = true; limpiarPendientes?.(); limpiarPublicados?.(); };
   }, []);
 
   const aprobar  = async (p) => { setBusy(true); try { await aprobarPropuesta(p); } catch(e) { alert("Error: "+e.message); } setBusy(false); };
@@ -214,7 +212,7 @@ function PanelAdmin({ email }) {
                     <div style={{ flex:1 }}>
                       <div style={{ display:"flex", alignItems:"center", gap:8, flexWrap:"wrap" }}>
                         <span style={{ fontWeight:600, fontSize:15 }}>{l.nombre}</span>
-                        {CATEGORIAS[l.categoria] && <span style={S.badge(CATEGORIAS[l.categoria].color, CATEGORIAS[l.categoria].bg)}>{CATEGORIAS[l.categoria].emoji} {l.categoria}</span>}
+                        {l.categoria && <span style={S.badge(obtenerCategoria(l.categoria).textColor, obtenerCategoria(l.categoria).bgLight)}>{obtenerCategoria(l.categoria).emoji} {l.categoria}</span>}
                         <span style={{ fontSize:12, color:"#AAA" }}>📍 {l.provincia} · {new Date(l.fecha).toLocaleDateString("es-ES",{day:"numeric",month:"short",year:"numeric"})}</span>
                       </div>
                       {l.direccion && <p style={{ margin:"3px 0 0", fontSize:13, color:"#888" }}>{l.direccion}</p>}