Implement custom camera with real-time overlay and resolution settings

src/screens/PhotoSettingsScreen.tsx

@@ -23,9 +23,10 @@ import {
   FooterField,
   loadFooterConfig,
   pickAndSaveLogo,
+  PhotoResolution,
   saveFooterConfig,
 } from '../photo/footerConfig';
-import { COLORS, PrimaryButton, SectionTitle } from '../ui/components';
+import { ChipSelect, COLORS, PrimaryButton, SectionTitle } from '../ui/components';
 
 const BUILT_IN_LABELS: Record<string, string> = {
   project_name: 'Nombre del proyecto',
@@ -33,6 +34,9 @@ const BUILT_IN_LABELS: Record<string, string> = {
   coordinates:  'Coordenadas GPS',
 };
 
+const RESOLUTION_OPTIONS: PhotoResolution[] = ['low', 'medium', 'high'];
+const QUALITY_OPTIONS = ['0.5', '0.7', '0.85', '1.0'];
+
 export function PhotoSettingsScreen() {
   const [config, setConfig] = useState<FooterConfig | null>(null);
   const [newLabel, setNewLabel] = useState('');
@@ -154,6 +158,32 @@ export function PhotoSettingsScreen() {
         Recorte cuadrado. Se recomienda logo con fondo blanco.
       </Text>
 
+      {/* ── Resolución y Calidad ── */}
+      <SectionTitle>Calidad de imagen</SectionTitle>
+      <View style={styles.card}>
+        <ChipSelect
+          label="Resolución máxima"
+          value={config.resolution}
+          options={RESOLUTION_OPTIONS}
+          onChange={(v) => void save({ ...config, resolution: v })}
+        />
+        <Text style={styles.hint}>
+          Low (~720p), Medium (~1080p), High (~4K).
+        </Text>
+
+        <View style={{ height: 12 }} />
+
+        <ChipSelect
+          label="Calidad de compresión"
+          value={String(config.quality)}
+          options={QUALITY_OPTIONS}
+          onChange={(v) => void save({ ...config, quality: parseFloat(v) })}
+        />
+        <Text style={styles.hint}>
+          Valores bajos reducen el tamaño del archivo pero pueden verse peor.
+        </Text>
+      </View>
+
       {/* ── Campos ── */}
       <SectionTitle>Campos</SectionTitle>
 
@@ -277,6 +307,13 @@ const styles = StyleSheet.create({
   logoActions: { gap: 8 },
   hint: { fontSize: 11, color: COLORS.muted, marginBottom: 8 },
 
+  card: {
+    backgroundColor: COLORS.bg,
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 8,
+  },
+
   /* Campos */
   fieldRow: {
     flexDirection: 'row',