diff --git a/nuxt4-app/app/pages/panorama.vue b/nuxt4-app/app/pages/panorama.vue
index 8004fb5..a6988b1 100644
--- a/nuxt4-app/app/pages/panorama.vue
+++ b/nuxt4-app/app/pages/panorama.vue
@@ -18,6 +18,84 @@
       </UButton>
     </div>
 
+    <!-- Initial State - No data loaded yet -->
+    <template v-else-if="!data && !loading">
+      <!-- Card de Filtros -->
+      <UCard class="brand-card border border-transparent">
+        <template #header>
+          <div class="flex flex-col gap-3">
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h2 class="text-xl font-bold brand-section-title">Filtros y Configuraciones</h2>
+                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
+                  Aplicados a <code>created_at</code> de ingresos y rechazos
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <UCheckbox v-model="includeAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
+              </div>
+            </div>
+
+            <!-- Alerta roja cuando incluye anulados -->
+            <UAlert
+              v-if="includeAnulados"
+              color="error"
+              variant="solid"
+              icon="i-lucide-alert-triangle"
+              title="Incluir anulados activado"
+              description="Los cálculos incluyen registros anulados. Esto puede afectar los resultados financieros."
+            />
+          </div>
+        </template>
+
+        <DateRangeSelector
+          :selected-preset="selectedPreset"
+          :fecha-desde="fechaDesde"
+          :fecha-hasta="fechaHasta"
+          @update:selected-preset="onUpdatePreset"
+          @update:fecha-desde="onUpdateFechaDesde"
+          @update:fecha-hasta="onUpdateFechaHasta"
+        />
+
+        <template #footer>
+          <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
+            <div class="text-xs text-[var(--brand-text-muted)]">
+              Rango activo: {{ rangoLegible }}
+            </div>
+            <UButton
+              :loading="loading"
+              :disabled="loading"
+              :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed' }"
+              size="sm"
+              @click="loadData"
+            >
+              <template #leading>
+                <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
+              </template>
+              Actualizar
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+
+      <!-- Mensaje de bienvenida -->
+      <UCard class="brand-card border border-transparent">
+        <div class="flex flex-col items-center justify-center gap-4 py-16 text-center">
+          <div class="rounded-full bg-[#c08040]/10 p-6">
+            <UIcon name="i-lucide-bar-chart-3" class="w-12 h-12 text-[#c08040]" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <h3 class="text-lg font-semibold text-[var(--brand-text)]">
+              Panorama Facturador
+            </h3>
+            <p class="text-sm text-[var(--brand-text-muted)] max-w-md">
+              Configura los filtros y haz clic en el botón "Actualizar" para cargar los datos financieros
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </template>
+
     <!-- Main Content -->
     <template v-else-if="data">
       <!-- Card de Filtros -->
@@ -240,10 +318,10 @@ function onUpdateFechaHasta(value: string | null) {
   fechaHasta.value = value
 }
 
-// Load data on mount
+// Inicializar preset por defecto sin cargar datos
 onMounted(() => {
   // Default preset: cosecha 25-26
   selectedPreset.value = 'cosecha-25-26'
-  loadData()
+  // NO cargar datos automáticamente - el usuario debe hacer clic en "Actualizar"
 })
 </script>