Final fixes for photo overlay position and rotation

src/screens/CameraScreen.tsx

@@ -38,6 +38,8 @@ export function CameraScreen({ route, navigation }: Props) {
     };
 
     const handleOrientation = (o: ScreenOrientation.Orientation) => {
+      // Nota: LANDSCAPE_LEFT es rotar el móvil a la derecha (home button a la derecha)
+      // Queremos contrarrestar el giro para que el sello esté derecho.
       if (o === ScreenOrientation.Orientation.LANDSCAPE_LEFT) setRotation(90);
       else if (o === ScreenOrientation.Orientation.LANDSCAPE_RIGHT) setRotation(-90);
       else if (o === ScreenOrientation.Orientation.PORTRAIT_UPSIDE_DOWN) setRotation(180);
@@ -128,80 +130,71 @@ export function CameraScreen({ route, navigation }: Props) {
     <View style={styles.container}>
       <CameraView
         ref={cameraRef}
-        style={styles.camera}
+        style={StyleSheet.absoluteFill}
         facing="back"
         autofocus="on"
-      >
-        <View style={styles.overlay}>
-          {/* Header */}
-          <View style={styles.header}>
-            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.closeBtn}>
-              <Text style={styles.closeTxt}>✕</Text>
-            </TouchableOpacity>
-          </View>
+      />
 
-          {/* Footer Preview con rotación */}
-          {config && meta && (
-            <View style={[
-              styles.footerWrapper,
-              { transform: [{ rotate: `${rotation}deg` }] }
-            ]}>
-              <FooterOverlay
-                config={config}
-                meta={meta}
-                imageWidth={winW > winH ? winH : winW}
-              />
-            </View>
-          )}
-
-          {/* Controls */}
-          <View style={styles.controls}>
-            <TouchableOpacity
-              style={[styles.captureBtn, taking && styles.disabled]}
-              onPress={() => void capture()}
-              disabled={taking}
-            >
-              <View style={styles.captureInner} />
-            </TouchableOpacity>
-          </View>
+      {/* Capa de UI sobre la cámara */}
+      <View style={styles.overlay}>
+        {/* Header con botón cerrar */}
+        <View style={styles.header}>
+          <TouchableOpacity onPress={() => navigation.goBack()} style={styles.closeBtn}>
+            <Text style={styles.closeTxt}>✕</Text>
+          </TouchableOpacity>
         </View>
-      </CameraView>
+
+        {/* Preview del sello (posicionado en su esquina con rotación) */}
+        {config && meta && (
+          <View style={styles.fullOverlay} pointerEvents="none">
+            <FooterOverlay
+              config={config}
+              meta={meta}
+              imageWidth={Math.min(winW, winH)}
+              rotation={rotation}
+            />
+          </View>
+        )}
+
+        {/* Botón de disparo abajo al centro */}
+        <View style={styles.footerControls}>
+          <TouchableOpacity
+            style={[styles.captureBtn, taking && styles.disabled]}
+            onPress={() => void capture()}
+            disabled={taking}
+          >
+            <View style={styles.captureInner} />
+          </TouchableOpacity>
+        </View>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#000' },
-  camera: { flex: 1 },
-  overlay: { flex: 1, justifyContent: 'space-between' },
+  overlay: { flex: 1, justifyContent: 'space-between', zIndex: 10 },
+  fullOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    // No centramos aquí, dejamos que FooterOverlay use sus offsets top/bottom/left/right
+  },
   center: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' },
   message: { color: '#fff', textAlign: 'center', marginBottom: 20 },
   btn: { backgroundColor: COLORS.primary, padding: 12, borderRadius: 8 },
   btnText: { color: '#fff', fontWeight: 'bold' },
   header: { padding: 20, paddingTop: 50 },
-  closeBtn: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center' },
+  closeBtn: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: 20 },
   closeTxt: { color: '#fff', fontSize: 24 },
-  footerWrapper: {
-    position: 'absolute',
-    // Ocupamos toda la pantalla para que el transform rote sobre el centro
-    // pero el FooterOverlay se posicionará internamente en su esquina.
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    pointerEvents: 'none',
-  },
-  controls: {
+  footerControls: {
     paddingBottom: 40,
     alignItems: 'center',
+    width: '100%',
   },
   captureBtn: {
-    width: 70,
-    height: 70,
-    borderRadius: 35,
-    borderWidth: 4,
+    width: 76,
+    height: 70, // Un poco ovalado para que se note
+    borderRadius: 38,
+    borderWidth: 5,
     borderColor: '#fff',
     justifyContent: 'center',
     alignItems: 'center',