MelissaSeguranca: breakpoint mobile <768px (era <1024px)

Como a pagina e enxuta (so 1 form pequeno + sidebar com info), cabe
bem em tablet portrait. Reduzi o breakpoint mobile pra 768px e
adaptei a formula da largura:

- 768-1012px : full-width (right: 6px)
- 1012-2012px: width fixo 1000px
- >= 2012px  : ~50% do viewport (right: 50%)

Formula: right = max(6px, min(50%, calc(100% - 1006px)))

JS _mqMobile tambem atualizado pra (max-width: 767px).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/layout/melissa/MelissaSeguranca.vue

@@ -170,7 +170,7 @@ async function sendResetEmail() {
 // ── Lifecycle ──────────────────────────────────────────────
 onMounted(async () => {
     if (typeof window !== 'undefined' && window.matchMedia) {
-        _mqMobile = window.matchMedia('(max-width: 1023px)');
+        _mqMobile = window.matchMedia('(max-width: 767px)');
         isMobile.value = _mqMobile.matches;
         try { _mqMobile.addEventListener('change', _onMqMobileChange); }
         catch { _mqMobile.addListener(_onMqMobileChange); }
@@ -921,17 +921,18 @@ onMounted(async () => {
 .mse-drawer-fade-enter-from,
 .mse-drawer-fade-leave-to { opacity: 0; }
 
-/* ═══════ Desktop (>=1024px) ═══════ */
-@media (min-width: 1024px) {
-    /* Pagina alinhada a esquerda com largura ~50%, mas com minimo
-       de 1000px pra nao ficar cramped em viewports medios.
-       Formula: right = min(50%, calc(100% - 1006px))
-       - viewport >= 2012px : right = 50%       (page ocupa ~50%)
-       - viewport <  2012px : right = 100%-1006 (page fica em 1000px)
-       Em viewports < 1024px, o media query mobile la embaixo
-       restaura full-width, entao min funciona suave. */
+/* ═══════ Desktop (>=768px) — breakpoint menor que as outras Melissa
+   pages (1024px) porque essa pagina e enxuta (so 1 form pequeno) e
+   cabe bem em tablet portrait. ═══════ */
+@media (min-width: 768px) {
+    /* Largura adaptativa, alinhada a esquerda:
+       - 768px–1012px : full-width (right: 6px) — viewports tablet/laptop
+                        pequeno onde 1000px nao caberia
+       - 1012px–2012px: width = 1000px fixo (right cresce com viewport)
+       - >= 2012px    : width = ~50% do viewport (right: 50%)
+       Formula: max(6px, min(50%, calc(100% - 1006px))) */
     .mse-page {
-        right: min(50%, calc(100% - 1006px));
+        right: max(6px, min(50%, calc(100% - 1006px)));
     }
 
     /* Sidebar: cards min-h 300 + max-h 100% + body scroll */
@@ -967,8 +968,8 @@ onMounted(async () => {
     }
 }
 
-/* ═══════ Mobile (<1024px) ═══════ */
-@media (max-width: 1023px) {
+/* ═══════ Mobile (<768px) ═══════ */
+@media (max-width: 767px) {
     .mse-body { flex-direction: column; padding: 0; }
     .mse-side { display: none; }
     .mse-main { width: 100%; padding: 8px; }