feat: add data explorer tab, enforce BYOK in production, detect env

backend/api/credentials.py

@@ -1,6 +1,6 @@
 """
 Archivo: credentials.py
-Fecha de modificación: 03/06/2026
+Fecha de modificación: 04/06/2026
 Autor: Equipo AgroVisión
 
 Descripción:
@@ -9,8 +9,12 @@ presentes en el `.env` del servidor** (variables `DEV_*` / `SUPABASE_*` / `DATAB
 para que la UI pueda ofrecer "usar las del servidor" sin que el usuario las reescriba.
 Devuelve **solo booleanos de presencia** — nunca los valores — para no exponer secretos.
 
+En **producción** (`APP_ENV=production`), las `DEV_*` keys NO están disponibles
+(cada usuario debe poner las suyas). El endpoint reporta `env: "production"` para
+que la UI muestre el aviso correspondiente.
+
 Estructura Interna:
-    - `GET /api/credentials/status`: presencia (bool) de Groq, Copernicus y Supabase.
+    - `GET /api/credentials/status`: presencia (bool) de Groq, Copernicus y Supabase + entorno.
 
 Entradas / Dependencias:
     - Variables de entorno (cargadas por `backend.config`).
@@ -25,16 +29,28 @@ import os
 
 from fastapi import APIRouter
 
+from backend.config import get_settings
+
 router = APIRouter(prefix="/api/credentials", tags=["credenciales"])
 
 
 @router.get("/status")
 def credentials_status() -> dict:
-    """Presencia (bool) de las credenciales en el `.env` del servidor (sin valores)."""
+    """Presencia (bool) de las credenciales en el `.env` del servidor (sin valores) + entorno."""
+    settings = get_settings()
+    is_dev = settings.app_env == "development"
+
+    # En producción, las DEV_* keys NO deben usarse (cada usuario pone las suyas)
+    dev_groq = bool(os.getenv("DEV_GROQ_API_KEY")) if is_dev else False
+    dev_cop = (
+        bool(os.getenv("DEV_COPERNICUS_CLIENT_ID") and os.getenv("DEV_COPERNICUS_CLIENT_SECRET"))
+        if is_dev
+        else False
+    )
+
     return {
-        "groq": bool(os.getenv("DEV_GROQ_API_KEY")),
-        "copernicus": bool(
-            os.getenv("DEV_COPERNICUS_CLIENT_ID") and os.getenv("DEV_COPERNICUS_CLIENT_SECRET")
-        ),
+        "env": settings.app_env,
+        "groq": dev_groq,
+        "copernicus": dev_cop,
         "supabase": bool(os.getenv("DATABASE_URL")),
     }

backend/api/data.py

@@ -0,0 +1,162 @@
+"""
+Archivo: data.py
+Fecha de modificación: 04/06/2026
+Autor: Equipo AgroVisión
+
+Descripción:
+Router del **Explorador de Datos** (Fase 11). Permite consultar las tablas de la BD
+Supabase directamente desde la UI. Expone dos endpoints:
+    - `GET /api/data/{table}`: lista los primeros 100 registros de una tabla permitida.
+    - `POST /api/data/query`: ejecuta una consulta SQL personalizada (solo SELECT).
+
+Seguridad:
+    - Solo tablas explícitamente permitidas (`ALLOWED_TABLES`).
+    - Solo consultas `SELECT` (bloquea INSERT/UPDATE/DELETE/ALTER/DROP).
+    - Límite de 1000 filas por consulta.
+    - Timeout de 10 segundos.
+
+Entradas / Dependencias:
+    - `backend.api.deps.get_db`, `backend.api.deps.get_user_keys`.
+
+Ejemplo de Integración:
+    from backend.api.data import router
+"""
+
+from __future__ import annotations
+
+import re
+
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy import text
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from backend.api.deps import get_db
+
+router = APIRouter(prefix="/api/data", tags=["explorador de datos"])
+
+# Tablas permitidas para consulta directa
+ALLOWED_TABLES: frozenset[str] = frozenset({
+    "fields",
+    "ndvi_timeseries",
+    "chat_messages",
+    "events",
+    "plant_counts",
+})
+
+# Límite máximo de filas por consulta
+MAX_ROWS = 1000
+
+
+def _validate_query(sql: str) -> str:
+    """
+    Valida que la consulta sea solo SELECT (lectura).
+
+    Args:
+        sql: Consulta SQL propuesta.
+
+    Returns:
+        La consulta limpia (stripped).
+
+    Raises:
+        HTTPException: Si la consulta no es SELECT o intenta modificar datos.
+    """
+    sql = sql.strip().rstrip(";")
+    upper = sql.upper()
+
+    # Bloquear cualquier cosa que no sea SELECT
+    if not upper.startswith("SELECT"):
+        raise HTTPException(status_code=400, detail="Solo se permiten consultas SELECT.")
+
+    # Bloquear palabras clave peligrosas
+    dangerous = [
+        "INSERT", "UPDATE", "DELETE", "ALTER", "DROP",
+        "CREATE", "TRUNCATE", "GRANT", "REVOKE",
+    ]
+    for word in dangerous:
+        if re.search(r"\b" + word + r"\b", upper):
+            raise HTTPException(status_code=400, detail=f"Consulta bloqueada: contiene '{word}'.")
+
+    return sql
+
+
+@router.get("/{table}")
+async def get_table(
+    table: str,
+    session: AsyncSession = Depends(get_db),
+) -> dict:
+    """
+    Lista los primeros 100 registros de una tabla permitida.
+
+    Args:
+        table: Nombre de la tabla (debe estar en ALLOWED_TABLES).
+        session: Sesión de BD.
+
+    Returns:
+        Dict con `rows` (lista de dicts) y `count`.
+
+    Raises:
+        HTTPException: Si la tabla no está permitida o no existe.
+    """
+    if table not in ALLOWED_TABLES:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Tabla no permitida. Permitidas: {sorted(ALLOWED_TABLES)}",
+        )
+
+    try:
+        query = text(f"SELECT * FROM {table} LIMIT 100")
+        result = await session.execute(query)
+        rows = [dict(row._mapping) for row in result.fetchall()]
+        # Convertir tipos no serializables
+        for row in rows:
+            for k, v in row.items():
+                if hasattr(v, "isoformat"):
+                    row[k] = v.isoformat()
+                elif hasattr(v, "__geo_interface__"):
+                    row[k] = dict(v.__geo_interface__)
+        return {"table": table, "rows": rows, "count": len(rows)}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e)) from e
+
+
+@router.post("/query")
+async def run_query(
+    body: dict,
+    session: AsyncSession = Depends(get_db),
+) -> dict:
+    """
+    Ejecuta una consulta SQL personalizada (solo SELECT).
+
+    Args:
+        body: {"sql": "SELECT ..."}
+        session: Sesión de BD.
+
+    Returns:
+        Dict con `rows` y `count`.
+
+    Raises:
+        HTTPException: Si la consulta es inválida o falla.
+    """
+    sql = body.get("sql", "").strip()
+    if not sql:
+        raise HTTPException(status_code=400, detail="Falta la consulta SQL.")
+
+    sql = _validate_query(sql)
+
+    # Añadir LIMIT si no existe
+    if "LIMIT" not in sql.upper():
+        sql = f"{sql} LIMIT {MAX_ROWS}"
+
+    try:
+        result = await session.execute(text(sql))
+        rows = [dict(row._mapping) for row in result.fetchall()]
+        # Convertir tipos no serializables
+        for row in rows:
+            for k, v in row.items():
+                if hasattr(v, "isoformat"):
+                    row[k] = v.isoformat()
+                elif hasattr(v, "__geo_interface__"):
+                    row[k] = dict(v.__geo_interface__)
+        return {"rows": rows, "count": len(rows)}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e)) from e

backend/api/deps.py

@@ -1,21 +1,21 @@
 """
 Archivo: deps.py
-Fecha de modificación: 03/06/2026
+Fecha de modificación: 04/06/2026
 Autor: Equipo AgroVisión
 
 Descripción:
 Dependencias compartidas de la API (gateway): el proxy **efímero** de credenciales
 BYOK y la sesión de base de datos. Las llaves del usuario llegan por cabeceras
-`X-User-*` (modelo de cero persistencia) y, para desarrollo local, hacen *fallback* a
-las variables `DEV_*`/`SUPABASE_*` del entorno. La `UserKeys` vive solo durante el
-request: nunca se escribe a disco, log ni BD.
+`X-User-*` (modelo de cero persistencia). En **desarrollo local** (`APP_ENV=development`),
+hacen *fallback* a las variables `DEV_*`/`SUPABASE_*` del `.env`. En **producción**,
+las credenciales son **obligatorias** vía cabeceras (cada usuario pone las suyas).
 
 Acciones Principales:
-    - `get_user_keys`: extrae las llaves del request (header o entorno DEV).
+    - `get_user_keys`: extrae las llaves del request (header o entorno DEV en local).
     - `get_db`: cede una sesión async de SQLAlchemy.
 
 Entradas / Dependencias:
-    - `fastapi.Header`, `backend.db.session`.
+    - `fastapi.Header`, `backend.db.session`, `backend.config`.
 
 Salidas / Efectos:
     - Abre una sesión por request; no persiste credenciales.
@@ -33,6 +33,7 @@ from dataclasses import dataclass
 from fastapi import Header
 from sqlalchemy.ext.asyncio import AsyncSession
 
+from backend.config import get_settings
 from backend.db.session import get_sessionmaker
 
 
@@ -55,19 +56,30 @@ def get_user_keys(
     x_user_supabase_key: str | None = Header(default=None),
 ) -> UserKeys:
     """
-    Construye las `UserKeys` del request: cabecera primero, entorno DEV como fallback.
+    Construye las `UserKeys` del request.
 
-    El fallback permite el desarrollo local (las llaves en `.env` como `DEV_*`), pero en
-    producción siempre llegan por cabecera desde la UI y se descartan tras el request.
+    En **desarrollo local** (`APP_ENV=development`): cabecera primero, entorno DEV como
+    fallback (permite trabajar sin reescribir llaves en la UI).
+
+    En **producción** (`APP_ENV=production`): **solo cabeceras**. Cada usuario debe
+    proporcionar sus propias credenciales vía la pestaña Credenciales de la UI.
 
     Returns:
         UserKeys: Credenciales de la sesión (nunca se persisten).
     """
+    settings = get_settings()
+    is_dev = settings.app_env == "development"
+
+    # En producción, NO usar fallback del entorno (cada usuario pone sus llaves)
+    dev_groq = os.getenv("DEV_GROQ_API_KEY") if is_dev else None
+    dev_cop_id = os.getenv("DEV_COPERNICUS_CLIENT_ID") if is_dev else None
+    dev_cop_secret = os.getenv("DEV_COPERNICUS_CLIENT_SECRET") if is_dev else None
+
     return UserKeys(
-        groq=x_user_groq_key or os.getenv("DEV_GROQ_API_KEY") or None,
-        copernicus_id=x_user_copernicus_id or os.getenv("DEV_COPERNICUS_CLIENT_ID") or None,
+        groq=x_user_groq_key or dev_groq or None,
+        copernicus_id=x_user_copernicus_id or dev_cop_id or None,
         copernicus_secret=(
-            x_user_copernicus_secret or os.getenv("DEV_COPERNICUS_CLIENT_SECRET") or None
+            x_user_copernicus_secret or dev_cop_secret or None
         ),
         supabase_url=x_user_supabase_url or os.getenv("SUPABASE_URL") or None,
         supabase_key=x_user_supabase_key or os.getenv("SUPABASE_ANON_KEY") or None,

backend/main.py

@@ -45,6 +45,7 @@ from fastapi.staticfiles import StaticFiles
 from backend.api.chat import router as chat_router
 from backend.api.count import router as count_router
 from backend.api.credentials import router as credentials_router
+from backend.api.data import router as data_router
 from backend.api.events import router as events_router
 from backend.api.fields import router as fields_router
 from backend.api.ndvi import router as ndvi_router
@@ -148,6 +149,7 @@ def create_app() -> FastAPI:
     app.include_router(chat_router)  # Asistente Agéntico (RAG)
     app.include_router(credentials_router)  # Presencia de .env (dev)
     app.include_router(events_router)  # Telemetría de UI (Fase 9)
+    app.include_router(data_router)  # Explorador de Datos (Fase 11)
     app.include_router(count_router)  # Conteo (en desarrollo / standby)
 
     # UI Astro estática (Fase 8): se monta en "/" AL FINAL, tras los routers /api y

frontend/src/pages/index.astro

@@ -101,6 +101,9 @@ import "../styles/global.css";
         <button data-tab="tab-chat" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all">
           <i class="fa-solid fa-robot w-5"></i> Asistente Agéntico
         </button>
+        <button data-tab="tab-data" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all">
+          <i class="fa-solid fa-database w-5"></i> Explorador de Datos
+        </button>
         <button data-tab="tab-config" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all">
           <i class="fa-solid fa-sliders w-5"></i> Credenciales & APIs
         </button>
@@ -255,11 +258,57 @@ import "../styles/global.css";
           </div>
         </section>
 
+        <!-- EXPLORADOR DE DATOS (Fase 11) -->
+        <section id="tab-data" class="tab-content space-y-6">
+          <div class="bg-white p-6 rounded-xl border border-stone-200 shadow-sm">
+            <h3 class="text-base font-bold text-stone-800 mb-2">Explorador de Datos</h3>
+            <p class="text-sm text-stone-600 leading-relaxed">
+              Consulta las tablas de tu base de datos Supabase directamente. Selecciona una tabla para ver sus registros o ejecuta consultas SQL personalizadas.
+            </p>
+          </div>
+          <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
+            <!-- Selector de tabla -->
+            <div class="bg-white p-5 rounded-xl border border-stone-200 shadow-sm lg:col-span-4">
+              <h3 class="font-bold text-sm text-stone-800 mb-3">Tablas disponibles</h3>
+              <div class="space-y-2" id="tables-list">
+                <p class="text-xs text-stone-500">Cargando tablas...</p>
+              </div>
+            </div>
+            <!-- Vista de datos -->
+            <div class="bg-white p-5 rounded-xl border border-stone-200 shadow-sm lg:col-span-8">
+              <div class="flex items-center justify-between mb-3">
+                <h3 class="font-bold text-sm text-stone-800" id="data-view-title">Selecciona una tabla</h3>
+                <span class="text-[10px] text-stone-500" id="data-view-count"></span>
+              </div>
+              <div id="data-view-content" class="overflow-x-auto max-h-[400px] overflow-y-auto">
+                <p class="text-xs text-stone-500">Los datos aparecerán aquí.</p>
+              </div>
+            </div>
+          </div>
+          <!-- Consulta SQL personalizada -->
+          <div class="bg-white p-5 rounded-xl border border-stone-200 shadow-sm">
+            <h3 class="font-bold text-sm text-stone-800 mb-3">Consulta SQL personalizada</h3>
+            <textarea id="sql-query" rows="4" placeholder="SELECT * FROM fields LIMIT 10;" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50 font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500 mb-3"></textarea>
+            <div class="flex gap-2">
+              <button id="btn-run-query" class="bg-emerald-700 hover:bg-emerald-800 text-white font-bold text-xs px-4 py-2 rounded-lg">
+                <i class="fa-solid fa-play"></i> Ejecutar
+              </button>
+              <button id="btn-clear-query" class="bg-stone-100 hover:bg-stone-200 text-stone-800 font-bold text-xs px-4 py-2 rounded-lg">
+                <i class="fa-solid fa-eraser"></i> Limpiar
+              </button>
+            </div>
+            <div id="query-result" class="mt-4 overflow-x-auto max-h-[300px] overflow-y-auto"></div>
+          </div>
+        </section>
+
         <!-- CREDENCIALES -->
         <section id="tab-config" class="tab-content space-y-6">
-          <div class="bg-amber-50 border border-amber-300 text-amber-900 p-4 rounded-xl text-sm">
+          <div id="creds-warning" class="bg-amber-50 border border-amber-300 text-amber-900 p-4 rounded-xl text-sm">
             ⚠️ <strong>Tus credenciales se usan solo en esta sesión. No se guardan ni almacenan.</strong> Si actualizas o cierras la página, todo se borrará.
           </div>
+          <div id="creds-production-warning" class="hidden bg-red-50 border border-red-300 text-red-900 p-4 rounded-xl text-sm">
+            🌐 <strong>Entorno de producción:</strong> Debes ingresar tus propias credenciales para usar la plataforma. Las credenciales del servidor no están disponibles en este entorno.
+          </div>
           <div class="bg-white p-6 rounded-xl border border-stone-200 shadow-sm grid grid-cols-1 md:grid-cols-2 gap-5">
             <div><label class="block text-xs font-bold text-stone-600 mb-1">Groq API Key (asistente RAG)</label><input id="in-groq" type="password" placeholder="gsk_..." class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" /></div>
             <div><label class="block text-xs font-bold text-stone-600 mb-1">Copernicus Client ID</label><input id="in-copid" type="password" placeholder="sh-..." class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" /></div>
@@ -347,6 +396,7 @@ import "../styles/global.css";
         "tab-satelite": ["Teledetección (GIS)", "NDVI 5 años + clima + heatmap (solo lectura)."],
         "tab-vision": ["Detección por Dron", "Conteo de plantas — EN DESARROLLO."],
         "tab-chat": ["Asistente Agéntico", "Agente RAG sobre tus parcelas."],
+        "tab-data": ["Explorador de Datos", "Consulta tus datos directamente (Fase 11)."],
         "tab-config": ["Credenciales & APIs", "Llaves efímeras (solo en esta sesión)."],
       };
       function switchTab(id) {
@@ -362,6 +412,7 @@ import "../styles/global.css";
         if (id === "tab-parcelas") setTimeout(initMap, 50);
         if (id === "tab-satelite") setTimeout(() => { loadTeledeteccion(); }, 50);
         if (id === "tab-resumen") loadResumen();
+        if (id === "tab-data") loadDataExplorer();
         if (window.innerWidth < 768) closeSidebar();
       }
       document.querySelectorAll(".nav-btn").forEach((b) =>
@@ -563,7 +614,56 @@ import "../styles/global.css";
       $("btn-chat").addEventListener("click", sendChat);
       $("chat-input").addEventListener("keydown", (e) => { if (e.key === "Enter") sendChat(); });
 
+      // ===== Explorador de Datos (Fase 11) =====
+      const TABLES = ["fields", "ndvi_timeseries", "chat_messages", "events"];
+      async function loadDataExplorer() {
+        const list = $("tables-list");
+        list.innerHTML = TABLES.map((t) =>
+          `<button data-table="${t}" class="w-full text-left text-xs px-3 py-2 rounded-lg border border-stone-200 bg-stone-50 hover:bg-stone-100 font-semibold text-stone-700"><i class="fa-solid fa-table mr-1 text-emerald-600"></i>${t}</button>`
+        ).join("");
+        list.querySelectorAll("button").forEach((b) =>
+          b.addEventListener("click", () => loadTableData(b.dataset.table))
+        );
+      }
+      async function loadTableData(table) {
+        $("data-view-title").innerText = `Tabla: ${table}`;
+        $("data-view-content").innerHTML = '<p class="text-xs text-stone-500">Cargando...</p>';
+        try {
+          const r = await api(`/data/${table}`);
+          if (!r.ok) { $("data-view-content").innerHTML = '<p class="text-xs text-red-500">Error al cargar. Verifica credenciales.</p>'; return; }
+          const d = await r.json();
+          const rows = d.rows || [];
+          $("data-view-count").innerText = `${rows.length} registros`;
+          if (!rows.length) { $("data-view-content").innerHTML = '<p class="text-xs text-stone-500">Sin registros.</p>'; return; }
+          const cols = Object.keys(rows[0]);
+          const html = `<table class="w-full text-[10px] border-collapse"><thead><tr>${cols.map((c) => `<th class="border border-stone-200 px-2 py-1 bg-stone-100 font-bold text-stone-700">${c}</th>`).join("")}</tr></thead><tbody>${rows.map((row) => `<tr>${cols.map((c) => `<td class="border border-stone-200 px-2 py-1">${formatCell(row[c])}</td>`).join("")}</tr>`).join("")}</tbody></table>`;
+          $("data-view-content").innerHTML = html;
+        } catch (e) { $("data-view-content").innerHTML = `<p class="text-xs text-red-500">Error: ${e}</p>`; }
+      }
+      function formatCell(v) {
+        if (v === null || v === undefined) return '<span class="text-stone-400">NULL</span>';
+        if (typeof v === "object") return `<code class="text-[9px] bg-stone-100 px-1 rounded">${JSON.stringify(v).slice(0, 80)}</code>`;
+        return String(v).slice(0, 100);
+      }
+      $("btn-run-query").addEventListener("click", async () => {
+        const sql = $("sql-query").value.trim();
+        if (!sql) return notify("Falta la consulta", "Escribe una consulta SQL.");
+        $("query-result").innerHTML = '<p class="text-xs text-stone-500">Ejecutando...</p>';
+        try {
+          const r = await api("/data/query", { method: "POST", body: JSON.stringify({ sql }) });
+          if (!r.ok) { const e = await r.json().catch(() => ({})); $("query-result").innerHTML = `<p class="text-xs text-red-500">Error: ${e.detail || r.status}</p>`; return; }
+          const d = await r.json();
+          const rows = d.rows || [];
+          if (!rows.length) { $("query-result").innerHTML = '<p class="text-xs text-stone-500">Sin resultados.</p>'; return; }
+          const cols = Object.keys(rows[0]);
+          const html = `<table class="w-full text-[10px] border-collapse"><thead><tr>${cols.map((c) => `<th class="border border-stone-200 px-2 py-1 bg-stone-100 font-bold text-stone-700">${c}</th>`).join("")}</tr></thead><tbody>${rows.map((row) => `<tr>${cols.map((c) => `<td class="border border-stone-200 px-2 py-1">${formatCell(row[c])}</td>`).join("")}</tr>`).join("")}</tbody></table>`;
+          $("query-result").innerHTML = html;
+        } catch (e) { $("query-result").innerHTML = `<p class="text-xs text-red-500">Error: ${e}</p>`; }
+      });
+      $("btn-clear-query").addEventListener("click", () => { $("sql-query").value = ""; $("query-result").innerHTML = ""; });
+
       // ===== Credenciales (efímeras) =====
+      let appEnv = "development"; // se actualiza en init()
       $("btn-save-creds").addEventListener("click", () => {
         creds = { groq: $("in-groq").value, copId: $("in-copid").value, copSecret: $("in-copsecret").value, sbUrl: $("in-sburl").value, sbKey: $("in-sbkey").value };
         const n = Object.values(creds).filter(Boolean).length;
@@ -577,11 +677,16 @@ import "../styles/global.css";
           const r = await fetch("./api/credentials/status");
           if (!r.ok) return notify("No disponible", "No se pudo consultar el .env del servidor.");
           const s = await r.json();
+          appEnv = s.env || "development";
           const have = Object.entries({ Groq: s.groq, Copernicus: s.copernicus, Supabase: s.supabase }).filter(([, v]) => v).map(([k]) => k);
-          track("env_check", { have });
-          $("env-status").innerHTML = have.length
-            ? `✅ En el servidor (.env): <b>${have.join(", ")}</b>. Se usan automáticamente; no necesitas reescribirlas aquí.`
-            : "No se detectaron credenciales en el .env del servidor.";
+          track("env_check", { have, env: appEnv });
+          if (appEnv === "production") {
+            $("env-status").innerHTML = " <b>Producción:</b> cada usuario debe ingresar sus propias credenciales.";
+          } else {
+            $("env-status").innerHTML = have.length
+              ? `✅ En el servidor (.env): <b>${have.join(", ")}</b>. Se usan automáticamente; no necesitas reescribirlas aquí.`
+              : "No se detectaron credenciales en el .env del servidor.";
+          }
         } catch { notify("Error", "No se pudo consultar el .env del servidor."); }
       });
 
@@ -599,6 +704,18 @@ import "../styles/global.css";
           $("db-status-text").innerText = ok ? "Backend conectado" : "Backend no disponible";
           if (ok) { $("db-status-text").classList.replace("text-stone-400", "text-emerald-400"); }
         } catch { $("db-status-text").innerText = "Backend no disponible"; }
+        // Detectar entorno y mostrar aviso si es producción
+        try {
+          const r = await fetch("./api/credentials/status");
+          if (r.ok) {
+            const s = await r.json();
+            appEnv = s.env || "development";
+            if (appEnv === "production") {
+              $("creds-production-warning").classList.remove("hidden");
+              $("btn-check-env").style.display = "none";
+            }
+          }
+        } catch {}
         await refreshParcels();
         const initial = (location.hash || "#tab-resumen").slice(1);
         switchTab(document.getElementById(initial) ? initial : "tab-resumen");