caja menor y libro diario

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+# Instalar dependencias
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copiar el código
+COPY backend/ /app/backend/
+COPY fronted/ /app/fronted/
+
+EXPOSE 5000
+
+CMD ["python", "backend/app.py"]

backend/app.py

@@ -0,0 +1,363 @@
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+import requests
+import sqlite3
+import threading
+import time
+import os
+from datetime import datetime
+
+# Servir archivos estáticos desde la carpeta fronted
+app = Flask(__name__, static_folder="../fronted", static_url_path="")
+CORS(app)
+
+# URL por defecto (se puede sobreescribir vía /config o por el body en /test_gs)
+API_URL = "https://script.google.com/macros/s/AKfycbwSLQWgSxHy51_vVopRyKss0UlrqCuKpO8LhxaEBztzsk-Idc-_LnvjsT5dUEwTlb9r/exec"
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+DB_DIR = os.path.join(BASE_DIR, "..", "db")
+INTERVALO_SYNC = 600  # 10 minutos en segundos
+
+# ============ CONFIGURACIÓN DE MÓDULOS ============
+# Cada módulo tiene su PROPIA base de datos SQLite y su hoja de Google Sheets
+MODULOS = {
+    "cajaMenor": {
+        "db": os.path.join(DB_DIR, "cajaMenor.db"),
+        "tabla": "movimientos",
+        "hoja_sheets": "CajaMenor"
+    },
+    "libroDiario": {
+        "db": os.path.join(DB_DIR, "libroDiario.db"),
+        "tabla": "movimientos",
+        "hoja_sheets": "libroDiario"
+    }
+}
+
+# ============ BASE DE DATOS ============
+def get_db(modulo):
+    """Abre la base de datos del módulo indicado"""
+    os.makedirs(DB_DIR, exist_ok=True)
+    conn = sqlite3.connect(modulo["db"])
+    conn.row_factory = sqlite3.Row
+    return conn
+
+def inicializar_db():
+    for modulo in MODULOS.values():
+        conn = get_db(modulo)
+        conn.execute(f"""
+            CREATE TABLE IF NOT EXISTS {modulo["tabla"]} (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                fecha TEXT NOT NULL,
+                tipo TEXT NOT NULL,
+                descripcion TEXT NOT NULL,
+                monto INTEGER NOT NULL,
+                sincronizado INTEGER DEFAULT 0,
+                borrado INTEGER DEFAULT 0,
+                creado_en TEXT DEFAULT CURRENT_TIMESTAMP
+            )
+        """)
+        conn.commit()
+        conn.close()
+
+    # Migración para DBs existentes: agregar columna borrado si no existe
+    for modulo in MODULOS.values():
+        conn = get_db(modulo)
+        columnas = [c[1] for c in conn.execute(f"PRAGMA table_info({modulo['tabla']})").fetchall()]
+        if "borrado" not in columnas:
+            conn.execute(f"ALTER TABLE {modulo['tabla']} ADD COLUMN borrado INTEGER DEFAULT 0")
+            conn.commit()
+        conn.close()
+
+# ============ SERVIR EL FRONTEND ============
+@app.route("/")
+def index():
+    return send_from_directory(app.static_folder, "index.html")
+
+@app.route("/<path:archivo>")
+def archivos_estaticos(archivo):
+    return send_from_directory(app.static_folder, archivo)
+
+# ============ LEER MOVIMIENTOS (desde SQLite - instantáneo) ============
+@app.route("/leer", methods=["GET"])
+def leer():
+    nombre = request.args.get("hoja", "cajaMenor")
+    modulo = MODULOS.get(nombre)
+    if not modulo:
+        return jsonify({"error": f"Módulo '{nombre}' no existe"}), 400
+
+    conn = get_db(modulo)
+    filas = conn.execute(
+        f"SELECT * FROM {modulo['tabla']} WHERE borrado = 0 ORDER BY fecha DESC, id DESC"
+    ).fetchall()
+    conn.close()
+
+    datos = [
+        {
+            "id": fila["id"],
+            "Fecha": fila["fecha"],
+            "Tipo": fila["tipo"],
+            "Descripción": fila["descripcion"],
+            "Monto": fila["monto"],
+            "sincronizado": fila["sincronizado"]
+        }
+        for fila in filas
+    ]
+    return jsonify({"datos": datos})
+
+# ============ GUARDAR MOVIMIENTO (SQLite - instantáneo) ============
+@app.route("/guardar", methods=["POST"])
+def guardar():
+    body = request.json
+    nombre = body.get("hoja", "cajaMenor")
+    modulo = MODULOS.get(nombre)
+    if not modulo:
+        return jsonify({"error": f"Módulo '{nombre}' no existe"}), 400
+
+    datos = body.get("datos", {})
+
+    conn = get_db(modulo)
+    cursor = conn.execute(
+        f"INSERT INTO {modulo['tabla']} (fecha, tipo, descripcion, monto) VALUES (?, ?, ?, ?)",
+        (
+            datos.get("Fecha", ""),
+            datos.get("Tipo", ""),
+            datos.get("Descripción", ""),
+            int(float(datos.get("Monto", 0)))
+        )
+    )
+    conn.commit()
+    nuevo_id = cursor.lastrowid
+    conn.close()
+
+    return jsonify({"ok": True, "id": nuevo_id, "mensaje": "Guardado localmente, se sincronizará con Google Sheets"})
+
+# ============ ACTUALIZAR MOVIMIENTO ============
+@app.route("/actualizar", methods=["PUT"])
+def actualizar():
+    body = request.json
+    nombre = body.get("hoja")
+    modulo = MODULOS.get(nombre)
+    if not modulo:
+        return jsonify({"error": f"Módulo '{nombre}' no existe"}), 400
+
+    datos = body.get("datos", {})
+    id_reg = body.get("id")
+
+    conn = get_db(modulo)
+    fila = conn.execute(f"SELECT sincronizado FROM {modulo['tabla']} WHERE id = ?", (id_reg,)).fetchone()
+    if not fila:
+        conn.close()
+        return jsonify({"error": "Registro no encontrado"}), 404
+
+    conn.execute(
+        f"UPDATE {modulo['tabla']} SET fecha=?, tipo=?, descripcion=?, monto=? WHERE id=?",
+        (
+            datos.get("Fecha", ""),
+            datos.get("Tipo", ""),
+            datos.get("Descripción", ""),
+            int(float(datos.get("Monto", 0))),
+            id_reg
+        )
+    )
+    # Si ya había subido a Sheets, marcar pendiente para que el sync lo actualice allá
+    if fila["sincronizado"] == 1:
+        conn.execute(f"UPDATE {modulo['tabla']} SET sincronizado = 0 WHERE id = ?", (id_reg,))
+
+    conn.commit()
+    conn.close()
+    return jsonify({"ok": True})
+
+# ============ BORRAR MOVIMIENTO ============
+@app.route("/borrar", methods=["DELETE"])
+def borrar():
+    body = request.json
+    nombre = body.get("hoja")
+    modulo = MODULOS.get(nombre)
+    if not modulo:
+        return jsonify({"error": f"Módulo '{nombre}' no existe"}), 400
+
+    id_reg = body.get("id")
+
+    conn = get_db(modulo)
+    fila = conn.execute(f"SELECT sincronizado FROM {modulo['tabla']} WHERE id = ?", (id_reg,)).fetchone()
+    if not fila:
+        conn.close()
+        return jsonify({"error": "Registro no encontrado"}), 404
+
+    if fila["sincronizado"] == 1:
+        # Ya está en Sheets: soft delete, el sync lo borrará allá
+        conn.execute(f"UPDATE {modulo['tabla']} SET borrado = 1, sincronizado = 0 WHERE id = ?", (id_reg,))
+    else:
+        # Nunca subió a Sheets: borrado definitivo
+        conn.execute(f"DELETE FROM {modulo['tabla']} WHERE id = ?", (id_reg,))
+
+    conn.commit()
+    conn.close()
+    return jsonify({"ok": True})
+
+# ============ SINCRONIZACIÓN CON GOOGLE SHEETS (background) ============
+def sincronizar_tabla(nombre_modulo, modulo):
+    """Sube los pendientes de un módulo a su hoja de Google Sheets"""
+    conn = get_db(modulo)
+    pendientes = conn.execute(
+        f"SELECT * FROM {modulo['tabla']} WHERE sincronizado = 0"
+    ).fetchall()
+
+    if not pendientes:
+        conn.close()
+        return 0
+
+    ids_ok = []
+    for fila in pendientes:
+        # Determinar la acción: borrar / actualizar / nuevo
+        if fila["borrado"] == 1:
+            accion = "borrar"
+            datos = None
+        else:
+            # Si la última columna Sheets ya la tiene, es actualizar; si no, nuevo
+            # (el Apps Script busca por id; si no existe, agrega fila nueva)
+            accion = "actualizar"
+            datos = {
+                "Fecha": fila["fecha"],
+                "Tipo": fila["tipo"],
+                "Descripción": fila["descripcion"],
+                "Monto": str(fila["monto"])
+            }
+
+        payload = {
+            "hoja": modulo["hoja_sheets"],
+            "accion": accion,
+            "id": fila["id"],
+            "datos": datos
+        }
+
+        try:
+            respuesta = requests.post(API_URL, json=payload, allow_redirects=True, timeout=30)
+            print(f"[SYNC] POST {nombre_modulo} id={fila['id']} status={respuesta.status_code} content-type={respuesta.headers.get('content-type','?')}")
+            if respuesta.status_code != 200 or "html" in respuesta.headers.get("content-type", "").lower():
+                print(f"[SYNC] Respuesta inesperada (HTML?): {respuesta.text[:300]}")
+                continue
+            resultado = respuesta.json()
+            if resultado.get("ok"):
+                if fila["borrado"] == 1:
+                    # Borrado exitoso en Sheets → eliminar definitivamente de SQLite
+                    conn.execute(f"DELETE FROM {modulo['tabla']} WHERE id = ?", (fila["id"],))
+                    conn.commit()
+                    print(f"[SYNC] {nombre_modulo}: id {fila['id']} borrado de Google Sheets ({resultado.get('mensaje', '')})")
+                else:
+                    ids_ok.append(fila["id"])
+            else:
+                print(f"[SYNC] Apps Script respondió error: {resultado}")
+        except Exception as e:
+            print(f"[SYNC] Error subiendo {nombre_modulo} id {fila['id']}: {e}")
+
+    if ids_ok:
+        placeholders = ",".join("?" * len(ids_ok))
+        conn.execute(f"UPDATE {modulo['tabla']} SET sincronizado = 1 WHERE id IN ({placeholders})", ids_ok)
+        conn.commit()
+        print(f"[SYNC {datetime.now().strftime('%H:%M:%S')}] {nombre_modulo}: {len(ids_ok)} registros subidos a Google Sheets")
+
+    conn.close()
+    return len(pendientes) - len(ids_ok)  # cuántos quedaron pendientes
+
+def sincronizar_pendientes():
+    """Sincroniza todos los módulos con Google Sheets"""
+    total_pendientes = 0
+    for nombre, modulo in MODULOS.items():
+        total_pendientes += sincronizar_tabla(nombre, modulo)
+
+    if total_pendientes == 0:
+        print(f"[SYNC {datetime.now().strftime('%H:%M:%S')}] Todo sincronizado")
+    return total_pendientes
+
+def ciclo_sincronizacion():
+    """Hilo que corre la sincronización cada INTERVALO_SYNC segundos"""
+    while True:
+        time.sleep(INTERVALO_SYNC)
+        sincronizar_pendientes()
+
+# ============ FORZAR SINCRONIZACIÓN MANUAL ============
+@app.route("/sincronizar", methods=["POST"])
+def sincronizar_ahora():
+    pendientes = sincronizar_pendientes()
+    return jsonify({"ok": True, "pendientes": pendientes})
+
+# ============ MARCAR TODO COMO PENDIENTE (re-subir a Sheets) ============
+@app.route("/reset_sync", methods=["POST"])
+def reset_sync():
+    """Marca todos los registros activos como no sincronizados.
+    Útil después de limpiar la hoja de Google para re-subir todo desde cero."""
+    body = request.json or {}
+    nombre = body.get("hoja")
+    if nombre:
+        modulo = MODULOS.get(nombre)
+        if not modulo:
+            return jsonify({"error": f"Módulo '{nombre}' no existe"}), 400
+        modulos = {nombre: modulo}
+    else:
+        modulos = MODULOS
+
+    total = 0
+    for modulo in modulos.values():
+        conn = get_db(modulo)
+        cursor = conn.execute(f"UPDATE {modulo['tabla']} SET sincronizado = 0 WHERE borrado = 0")
+        total += cursor.rowcount
+        conn.commit()
+        conn.close()
+
+    return jsonify({"ok": True, "marcados": total, "mensaje": "Ahora llama a /sincronizar para re-subir todo"})
+
+# ============ CONFIGURAR URL DE GOOGLE SHEETS ============
+@app.route("/config", methods=["POST"])
+def configurar_url():
+    """Permite cambiar la URL de Apps Script en runtime."""
+    global API_URL
+    body = request.json or {}
+    url = body.get("api_url")
+    if not url:
+        return jsonify({"error": "Falta api_url en el body"}), 400
+    API_URL = url
+    return jsonify({"ok": True, "api_url": API_URL})
+
+# ============ PROBAR CONEXIÓN DIRECTA A GOOGLE SHEETS ============
+@app.route("/test_gs", methods=["POST"])
+def test_gs():
+    """Endpoint para probar manualmente una URL de Apps Script.
+    Si envías api_url en el body, se usa esa URL; si no, la global.
+    """
+    body = request.json or {}
+    url = body.get("api_url", API_URL)
+    payload = {
+        "hoja": body.get("hoja", "CajaMenor"),
+        "accion": body.get("accion", "nuevo"),
+        "id": body.get("id", "777"),
+        "datos": body.get("datos", {
+            "Fecha": "2026-09-03",
+            "Tipo": "Ingreso",
+            "Descripción": "Prueba backend",
+            "Monto": "1"
+        })
+    }
+    try:
+        respuesta = requests.post(url, json=payload, allow_redirects=True, timeout=30)
+        return jsonify({
+            "url_usada": url,
+            "status": respuesta.status_code,
+            "content_type": respuesta.headers.get("content-type"),
+            "primeros_300_chars": respuesta.text[:300],
+            "json_parseable": respuesta.headers.get("content-type", "").lower().startswith("application/json")
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+# ============ INICIO ============
+if __name__ == "__main__":
+    inicializar_db()
+    # Lanzar el hilo de sincronización
+    hilo = threading.Thread(target=ciclo_sincronizacion, daemon=True)
+    hilo.start()
+    print(f"🚀 Servidor iniciado. Sincronización con Google Sheets cada {INTERVALO_SYNC // 60} minutos")
+    print(f"📦 Módulos activos: {', '.join(MODULOS.keys())}")
+    # Primera sincronización al arrancar (por si quedó algo pendiente de antes)
+    sincronizar_pendientes()
+    app.run(host="0.0.0.0", port=5000, debug=True, use_reloader=False)
+

backend/requirements.txt

@@ -0,0 +1,3 @@
+flask
+flask-cors
+requests

docker-compose.yml

@@ -0,0 +1,14 @@
+services:
+  app-luisa:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: app-luisa
+    ports:
+      - "9007:5000"
+    volumes:
+      # Montamos el código para que los cambios se reflejen sin reconstruir
+      - ./backend:/app/backend
+      - ./fronted:/app/fronted
+      - ./db:/app/db
+    restart: unless-stopped

fronted/acciones.js

@@ -0,0 +1,195 @@
+// ============ ACCIONES: MENÚ ⋮ Y MODALES (compartido) ============
+// Requiere que la página tenga:
+//   - variable global NOMBRE_HOJA
+//   - función global cargarMovimientos()
+//   - elemento #opcionesTipo con <option>s para el select de tipo
+
+let registroEditando = null;
+let registroBorrando = null;
+
+// ============ MENÚ ⋮ ============
+function crearMenuOpciones(mov) {
+    const contenedor = document.createElement("div");
+    contenedor.className = "menu-opciones";
+    contenedor.innerHTML = `
+        <button class="btn-opciones" title="Opciones">⋮</button>
+        <div class="dropdown-opciones">
+            <button class="opcion-editar">✏️ Editar</button>
+            <button class="opcion-borrar">🗑️ Borrar</button>
+        </div>
+    `;
+
+    const btnOpciones = contenedor.querySelector(".btn-opciones");
+    const dropdown = contenedor.querySelector(".dropdown-opciones");
+
+    btnOpciones.addEventListener("click", (e) => {
+        e.stopPropagation();
+        // Cerrar otros dropdowns abiertos
+        document.querySelectorAll(".dropdown-opciones.abierto").forEach(d => {
+            if (d !== dropdown) d.classList.remove("abierto");
+        });
+        dropdown.classList.toggle("abierto");
+    });
+
+    contenedor.querySelector(".opcion-editar").addEventListener("click", () => {
+        dropdown.classList.remove("abierto");
+        abrirModalEditar(mov);
+    });
+
+    contenedor.querySelector(".opcion-borrar").addEventListener("click", () => {
+        dropdown.classList.remove("abierto");
+        abrirModalBorrar(mov);
+    });
+
+    return contenedor;
+}
+
+// Cerrar dropdowns al hacer clic fuera
+document.addEventListener("click", () => {
+    document.querySelectorAll(".dropdown-opciones.abierto").forEach(d => d.classList.remove("abierto"));
+});
+
+// ============ MODAL EDITAR ============
+function abrirModalEditar(mov) {
+    registroEditando = mov;
+    document.getElementById("editFecha").value = formatearFechaInput(mov.Fecha);
+
+    // Seleccionar la opción correcta en el select
+    const selectTipo = document.getElementById("editTipo");
+    selectTipo.value = mov.Tipo;
+
+    document.getElementById("editDescripcion").value = mov["Descripción"];
+    document.getElementById("editMonto").value = parseInt(mov.Monto) || 0;
+    document.getElementById("modalEditarFondo").classList.add("abierto");
+}
+
+function cerrarModalEditar() {
+    registroEditando = null;
+    document.getElementById("modalEditarFondo").classList.remove("abierto");
+}
+
+async function guardarEdicion() {
+    if (!registroEditando) return;
+
+    const datos = {
+        hoja: NOMBRE_HOJA,
+        id: registroEditando.id,
+        datos: {
+            "Fecha": document.getElementById("editFecha").value,
+            "Tipo": document.getElementById("editTipo").value,
+            "Descripción": document.getElementById("editDescripcion").value,
+            "Monto": document.getElementById("editMonto").value
+        }
+    };
+
+    try {
+        const respuesta = await fetch("/actualizar", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(datos)
+        });
+        const resultado = await respuesta.json();
+        if (resultado.error) {
+            alert("Error: " + resultado.error);
+            return;
+        }
+        cerrarModalEditar();
+        cargarMovimientos();
+    } catch (error) {
+        console.error("Error al actualizar:", error);
+        alert("Error al actualizar el registro");
+    }
+}
+
+// ============ MODAL BORRAR ============
+function abrirModalBorrar(mov) {
+    registroBorrando = mov;
+    document.getElementById("borrarDescripcion").textContent =
+        `"${mov["Descripción"]}" — $${formatearMonto(mov.Monto)}`;
+    document.getElementById("modalBorrarFondo").classList.add("abierto");
+}
+
+function cerrarModalBorrar() {
+    registroBorrando = null;
+    document.getElementById("modalBorrarFondo").classList.remove("abierto");
+}
+
+async function confirmarBorrar() {
+    if (!registroBorrando) return;
+
+    try {
+        const respuesta = await fetch("/borrar", {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ hoja: NOMBRE_HOJA, id: registroBorrando.id })
+        });
+        const resultado = await respuesta.json();
+        if (resultado.error) {
+            alert("Error: " + resultado.error);
+            return;
+        }
+        cerrarModalBorrar();
+        cargarMovimientos();
+    } catch (error) {
+        console.error("Error al borrar:", error);
+        alert("Error al borrar el registro");
+    }
+}
+
+// ============ AUXILIAR ============
+// Convierte fecha al formato YYYY-MM-DD que acepta <input type="date">
+function formatearFechaInput(fecha) {
+    if (!fecha) return "";
+    const f = new Date(fecha);
+    const yyyy = f.getFullYear();
+    const mm = String(f.getMonth() + 1).padStart(2, "0");
+    const dd = String(f.getDate()).padStart(2, "0");
+    return `${yyyy}-${mm}-${dd}`;
+}
+
+// Cerrar modales al hacer clic en el fondo oscuro
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("modalEditarFondo").addEventListener("click", (e) => {
+        if (e.target.id === "modalEditarFondo") cerrarModalEditar();
+    });
+    document.getElementById("modalBorrarFondo").addEventListener("click", (e) => {
+        if (e.target.id === "modalBorrarFondo") cerrarModalBorrar();
+    });
+    document.getElementById("btnGuardarEdicion").addEventListener("click", guardarEdicion);
+    document.getElementById("btnCancelarEdicion").addEventListener("click", cerrarModalEditar);
+    document.getElementById("btnConfirmarBorrar").addEventListener("click", confirmarBorrar);
+    document.getElementById("btnCancelarBorrar").addEventListener("click", cerrarModalBorrar);
+
+    // Botón de sincronización manual en el nav
+    const btnSync = document.getElementById("btnSync");
+    if (btnSync) btnSync.addEventListener("click", forzarSync);
+});
+
+// ============ SINCRONIZACIÓN MANUAL ============
+async function forzarSync() {
+    const btnSync = document.getElementById("btnSync");
+    btnSync.disabled = true;
+    btnSync.textContent = "⏳";
+
+    try {
+        const respuesta = await fetch("/sincronizar", { method: "POST" });
+        const resultado = await respuesta.json();
+
+        if (resultado.pendientes === 0) {
+            btnSync.textContent = "✅";
+        } else {
+            btnSync.textContent = `⚠️ ${resultado.pendientes}`;
+        }
+        // Recargar la tabla por si hubo cambios de estado
+        cargarMovimientos();
+    } catch (error) {
+        console.error("Error al sincronizar:", error);
+        btnSync.textContent = "❌";
+    }
+
+    // Volver al estado normal después de 2 segundos
+    setTimeout(() => {
+        btnSync.disabled = false;
+        btnSync.textContent = "🔄 Sync";
+    }, 2000);
+}

fronted/averias.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>App Luisa - Averías</title>
+    <link rel="stylesheet" href="estilos.css">
+</head>
+<body>
+    <header>
+        <h1>⚠️ Averías</h1>
+    </header>
+
+    <nav class="nav-menu">
+        <a href="index.html">🏠 Inicio</a>
+        <a href="cajaMenor.html">💰 Caja Menor</a>
+        <a href="libroDiario.html">📒 Libro Diario</a>
+        <a href="transportadoras.html">🚚 Transportadoras</a>
+        <a href="averias.html" class="active">⚠️ Averías</a>
+        <a href="pagosMensuales.html">💳 Pagos Mensuales</a>
+        <a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
+    </nav>
+
+    <main class="contenido">
+        <p>Aquí irá el contenido de averías.</p>
+    </main>
+</body>
+</html>

fronted/cajaMenor.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>App Luisa - Caja Menor</title>
+    <link rel="stylesheet" href="estilos.css">
+</head>
+<body>
+    <header>
+        <h1>💰 Caja Menor</h1>
+    </header>
+
+    <nav class="nav-menu">
+        <a href="index.html">🏠 Inicio</a>
+        <a href="cajaMenor.html" class="active">💰 Caja Menor</a>
+        <a href="libroDiario.html">📒 Libro Diario</a>
+        <a href="transportadoras.html">🚚 Transportadoras</a>
+        <a href="averias.html">⚠️ Averías</a>
+        <a href="pagosMensuales.html">💳 Pagos Mensuales</a>
+        <a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
+        <button class="btn-sync" id="btnSync" title="Sincronizar con Google Sheets">🔄 Sync</button>
+    </nav>
+
+    <main class="contenido">
+        <!-- FORMULARIO -->
+        <div class="formulario-card">
+            <h2>Nuevo Movimiento</h2>
+            <form id="formMovimiento">
+                <div class="form-grupo">
+                    <label for="fecha">Fecha</label>
+                    <input type="date" id="fecha" required>
+                </div>
+
+                <div class="form-grupo">
+                    <label for="tipo">Tipo</label>
+                    <select id="tipo" required>
+                        <option value="">Seleccionar...</option>
+                        <option value="Ingreso">💵 Ingreso</option>
+                        <option value="Salida">💸 Salida</option>
+                    </select>
+                </div>
+
+                <div class="form-grupo">
+                    <label for="descripcion">Descripción</label>
+                    <input type="text" id="descripcion" placeholder="Ej: Pago de papelería" required>
+                </div>
+
+                <div class="form-grupo">
+                    <label for="monto">Monto</label>
+                    <input type="number" id="monto" placeholder="0" min="0" step="1" required>
+                </div>
+
+                <button type="submit" class="btn-guardar">💾 Guardar</button>
+            </form>
+        </div>
+
+        <!-- TOTAL -->
+        <div class="total-card">
+            <h2>Total en Caja</h2>
+            <p id="totalCaja" class="total-monto">$0.00</p>
+            <p class="total-detalle">Ingresos − Salidas</p>
+        </div>
+
+        <!-- TABLA -->
+        <div class="tabla-card">
+            <h2>📋 Movimientos</h2>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Fecha</th>
+                        <th>Tipo</th>
+                        <th>Descripción</th>
+                        <th>Monto</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody id="tablaMovimientos">
+                    <tr><td colspan="5" class="sin-datos">Cargando...</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </main>
+
+    <!-- MODAL EDITAR -->
+    <div class="modal-fondo" id="modalEditarFondo">
+        <div class="modal">
+            <h3>✏️ Editar movimiento</h3>
+            <div class="form-grupo">
+                <label for="editFecha">Fecha</label>
+                <input type="date" id="editFecha">
+            </div>
+            <div class="form-grupo">
+                <label for="editTipo">Tipo</label>
+                <select id="editTipo">
+                    <option value="Ingreso">💵 Ingreso</option>
+                    <option value="Salida">💸 Salida</option>
+                </select>
+            </div>
+            <div class="form-grupo">
+                <label for="editDescripcion">Descripción</label>
+                <input type="text" id="editDescripcion">
+            </div>
+            <div class="form-grupo">
+                <label for="editMonto">Monto</label>
+                <input type="number" id="editMonto" min="0" step="1">
+            </div>
+            <div class="modal-botones">
+                <button class="btn-cancelar" id="btnCancelarEdicion">Cancelar</button>
+                <button class="btn-confirmar" id="btnGuardarEdicion">Guardar</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- MODAL BORRAR -->
+    <div class="modal-fondo" id="modalBorrarFondo">
+        <div class="modal">
+            <h3>🗑️ Borrar movimiento</h3>
+            <p class="modal-texto-borrar">¿Seguro que quieres borrar este registro?</p>
+            <p class="modal-texto-borrar" id="borrarDescripcion"></p>
+            <div class="modal-botones">
+                <button class="btn-cancelar" id="btnCancelarBorrar">Cancelar</button>
+                <button class="btn-borrar-confirmar" id="btnConfirmarBorrar">Borrar</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="acciones.js"></script>
+    <script src="cajaMenor.js"></script>
+</body>
+</html>

fronted/cajaMenor.js

@@ -0,0 +1,136 @@
+// ============ CONFIGURACIÓN ============
+// Mismo servidor: rutas relativas
+const API_URL = "";
+const NOMBRE_HOJA = "cajaMenor";
+
+// ============ CARGAR DATOS AL ABRIR LA PÁGINA ============
+document.addEventListener("DOMContentLoaded", () => {
+    cargarMovimientos();
+});
+
+// ============ LEER DATOS ============
+async function cargarMovimientos() {
+    const tbody = document.getElementById("tablaMovimientos");
+
+    try {
+        const respuesta = await fetch(`/leer?hoja=${NOMBRE_HOJA}`);
+        const data = await respuesta.json();
+
+        if (data.error) {
+            tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error: ${data.error}</td></tr>`;
+            return;
+        }
+
+        mostrarMovimientos(data.datos);
+        calcularTotal(data.datos);
+
+    } catch (error) {
+        tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error al cargar datos</td></tr>`;
+        console.error("Error:", error);
+    }
+}
+
+// ============ MOSTRAR EN LA TABLA ============
+function mostrarMovimientos(movimientos) {
+    const tbody = document.getElementById("tablaMovimientos");
+
+    if (movimientos.length === 0) {
+        tbody.innerHTML = `<tr><td colspan="5" class="sin-datos">No hay movimientos registrados</td></tr>`;
+        return;
+    }
+
+    tbody.innerHTML = "";
+
+    // Mostrar del más reciente al más antiguo (ya viene ordenado del backend)
+    movimientos.forEach(mov => {
+        const fila = document.createElement("tr");
+        const esIngreso = mov.Tipo === "Ingreso";
+
+        fila.innerHTML = `
+            <td>${formatearFecha(mov.Fecha)}</td>
+            <td><span class="${esIngreso ? 'badge-ingreso' : 'badge-salida'}">${esIngreso ? '💵' : '💸'} ${mov.Tipo}</span></td>
+            <td>${mov["Descripción"]}</td>
+            <td class="${esIngreso ? 'monto-ingreso' : 'monto-salida'}">${esIngreso ? '+' : '-'}$${formatearMonto(mov.Monto)}</td>
+        `;
+        // Menú de opciones (⋮) con modales
+        const celdaOpciones = document.createElement("td");
+        celdaOpciones.appendChild(crearMenuOpciones(mov));
+        fila.appendChild(celdaOpciones);
+
+        tbody.appendChild(fila);
+    });
+}
+
+// ============ CALCULAR TOTAL ============
+function calcularTotal(movimientos) {
+    let total = 0;
+
+    movimientos.forEach(mov => {
+        const monto = parseFloat(mov.Monto) || 0;
+        if (mov.Tipo === "Ingreso") {
+            total += monto;
+        } else {
+            total -= monto;
+        }
+    });
+
+    const totalElement = document.getElementById("totalCaja");
+    totalElement.textContent = `$${formatearMonto(total)}`;
+    totalElement.className = "total-monto " + (total >= 0 ? "positivo" : "negativo");
+}
+
+// ============ GUARDAR NUEVO MOVIMIENTO ============
+document.getElementById("formMovimiento").addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const btnGuardar = e.target.querySelector("button");
+    btnGuardar.disabled = true;
+    btnGuardar.textContent = "⏳ Guardando...";
+
+    const datos = {
+        hoja: NOMBRE_HOJA,
+        datos: {
+            "Fecha": document.getElementById("fecha").value,
+            "Tipo": document.getElementById("tipo").value,
+            "Descripción": document.getElementById("descripcion").value,
+            "Monto": document.getElementById("monto").value
+        }
+    };
+
+    try {
+        const respuesta = await fetch("/guardar", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(datos)
+        });
+
+        const resultado = await respuesta.json();
+
+        if (resultado.error) {
+            alert("Error: " + resultado.error);
+        }
+
+        // Limpiar formulario y recargar tabla
+        document.getElementById("formMovimiento").reset();
+        cargarMovimientos();
+
+    } catch (error) {
+        console.error("Error al guardar:", error);
+        alert("Error al guardar el registro");
+    }
+
+    btnGuardar.disabled = false;
+    btnGuardar.textContent = "💾 Guardar";
+});
+
+// ============ FUNCIONES AUXILIARES ============
+function formatearFecha(fecha) {
+    if (!fecha) return "";
+    const f = new Date(fecha);
+    return f.toLocaleDateString("es-CO", { day: "2-digit", month: "2-digit", year: "numeric" });
+}
+
+function formatearMonto(monto) {
+    const num = parseFloat(monto) || 0;
+    return num.toLocaleString("es-CO", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
+}

fronted/estilos.css

@@ -0,0 +1,492 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    background: #f0f2f5;
+    min-height: 100vh;
+}
+
+header {
+    background: #2c3e50;
+    color: white;
+    text-align: center;
+    padding: 18px 20px;
+}
+
+header h1 {
+    font-size: 1.4rem;
+    font-weight: 600;
+}
+
+header p {
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+.menu-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 25px;
+    max-width: 1200px;
+    margin: 40px auto;
+    padding: 0 20px;
+}
+
+.menu-card {
+    background: white;
+    border-radius: 12px;
+    padding: 40px 20px;
+    text-align: center;
+    text-decoration: none;
+    color: #2c3e50;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+.menu-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+}
+
+.menu-icon {
+    font-size: 3rem;
+}
+
+.menu-card span {
+    font-size: 1.3rem;
+    font-weight: 600;
+}
+
+/* ============ NAVEGACIÓN ============ */
+.nav-menu {
+    background: #34495e;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.nav-menu a {
+    color: white;
+    text-decoration: none;
+    padding: 16px 24px;
+    font-size: 1rem;
+    font-weight: 500;
+    transition: background 0.3s ease, color 0.3s ease;
+    border-bottom: 3px solid transparent;
+}
+
+.nav-menu a:hover {
+    background: rgba(255,255,255,0.1);
+}
+
+.nav-menu a.active {
+    background: #2c3e50;
+    border-bottom: 3px solid #3498db;
+}
+
+.contenido {
+    max-width: 1200px;
+    margin: 40px auto;
+    padding: 0 20px;
+}
+
+/* ============ FORMULARIO ============ */
+.formulario-card {
+    background: white;
+    border-radius: 12px;
+    padding: 30px;
+    margin-bottom: 30px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.formulario-card h2 {
+    margin-bottom: 20px;
+    color: #2c3e50;
+    font-size: 1.3rem;
+}
+
+.formulario-card form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    align-items: end;
+}
+
+.form-grupo {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.form-grupo label {
+    font-weight: 600;
+    color: #2c3e50;
+    font-size: 0.9rem;
+}
+
+.form-grupo input,
+.form-grupo select {
+    padding: 10px 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: border-color 0.3s ease;
+}
+
+.form-grupo input:focus,
+.form-grupo select:focus {
+    outline: none;
+    border-color: #3498db;
+}
+
+.btn-guardar {
+    background: #3498db;
+    color: white;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.btn-guardar:hover {
+    background: #2980b9;
+}
+
+.btn-guardar:disabled {
+    background: #95a5a6;
+    cursor: not-allowed;
+}
+
+/* ============ TOTAL ============ */
+.total-card {
+    background: white;
+    border-radius: 12px;
+    padding: 25px 30px;
+    margin-bottom: 30px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+.total-card h2 {
+    color: #2c3e50;
+    font-size: 1.1rem;
+    margin-bottom: 8px;
+}
+
+.total-monto {
+    font-size: 2.2rem;
+    font-weight: 700;
+}
+
+.total-monto.positivo {
+    color: #27ae60;
+}
+
+.total-monto.negativo {
+    color: #e74c3c;
+}
+
+.total-detalle {
+    color: #7f8c8d;
+    font-size: 0.85rem;
+    margin-top: 5px;
+}
+
+/* ============ TABLA ============ */
+.tabla-card {
+    background: white;
+    border-radius: 12px;
+    padding: 30px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    overflow-x: auto;
+}
+
+.tabla-card h2 {
+    margin-bottom: 20px;
+    color: #2c3e50;
+    font-size: 1.3rem;
+}
+
+.tabla-card table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.tabla-card th {
+    background: #2c3e50;
+    color: white;
+    padding: 12px 15px;
+    text-align: left;
+    font-size: 0.9rem;
+}
+
+.tabla-card td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #ecf0f1;
+    font-size: 0.95rem;
+}
+
+.tabla-card tr:hover td {
+    background: #f8f9fa;
+}
+
+.sin-datos {
+    text-align: center;
+    color: #95a5a6;
+    padding: 30px !important;
+}
+
+/* ============ BADGES ============ */
+.badge-ingreso {
+    background: #d5f5e3;
+    color: #27ae60;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.badge-salida {
+    background: #fadbd8;
+    color: #e74c3c;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.monto-ingreso {
+    color: #27ae60;
+    font-weight: 600;
+}
+
+.monto-salida {
+    color: #e74c3c;
+    font-weight: 600;
+}
+
+/* ============ IFRAME EMBEBIDO ============ */
+.contenido-iframe {
+    max-width: 1400px;
+    margin: 20px auto;
+    padding: 0 20px;
+    height: calc(100vh - 140px);
+}
+
+.iframe-embebido {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    background: white;
+}
+
+/* ============ MENÚ DE OPCIONES (⋮) ============ */
+.menu-opciones {
+    position: relative;
+    display: inline-block;
+}
+
+.btn-opciones {
+    background: none;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 4px 10px;
+    border-radius: 6px;
+    color: #7f8c8d;
+    transition: background 0.2s;
+}
+
+.btn-opciones:hover {
+    background: #ecf0f1;
+    color: #2c3e50;
+}
+
+.dropdown-opciones {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+    min-width: 140px;
+    z-index: 50;
+    overflow: hidden;
+}
+
+.dropdown-opciones.abierto {
+    display: block;
+}
+
+.dropdown-opciones button {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 10px 16px;
+    background: none;
+    border: none;
+    font-size: 0.95rem;
+    cursor: pointer;
+    color: #2c3e50;
+    transition: background 0.2s;
+}
+
+.dropdown-opciones button:hover {
+    background: #f0f2f5;
+}
+
+.dropdown-opciones button.opcion-borrar {
+    color: #e74c3c;
+}
+
+/* ============ MODAL ============ */
+.modal-fondo {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    z-index: 200;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-fondo.abierto {
+    display: flex;
+}
+
+.modal {
+    background: white;
+    border-radius: 12px;
+    padding: 25px;
+    width: 90%;
+    max-width: 400px;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
+    animation: modalEntra 0.2s ease;
+}
+
+@keyframes modalEntra {
+    from { transform: scale(0.9); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+.modal h3 {
+    margin-bottom: 15px;
+    color: #2c3e50;
+}
+
+.modal .form-grupo {
+    margin-bottom: 12px;
+}
+
+.modal-botones {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+    margin-top: 20px;
+}
+
+.btn-cancelar {
+    background: #ecf0f1;
+    color: #2c3e50;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.btn-cancelar:hover {
+    background: #d5dbdb;
+}
+
+.btn-confirmar {
+    background: #3498db;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.btn-confirmar:hover {
+    background: #2980b9;
+}
+
+.btn-borrar-confirmar {
+    background: #e74c3c;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.btn-borrar-confirmar:hover {
+    background: #c0392b;
+}
+
+.modal-texto-borrar {
+    color: #555;
+    margin-bottom: 5px;
+}
+
+/* ============ BOTÓN SYNC EN NAV ============ */
+.btn-sync {
+    background: none;
+    border: 2px solid rgba(255,255,255,0.4);
+    color: white;
+    padding: 8px 16px;
+    margin: 8px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-sync:hover {
+    background: rgba(255,255,255,0.15);
+    border-color: white;
+}
+
+.btn-sync:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-sync.sincronizando {
+    animation: girar 1s linear infinite;
+}
+
+@keyframes girar {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}

fronted/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>App Luisa - Inicio</title>
+    <link rel="stylesheet" href="estilos.css">
+</head>
+<body>
+    <header>
+        <h1>App Luisa</h1>
+        <p>Selecciona una opción del menú</p>
+    </header>
+
+    <nav class="menu-container">
+        <a href="cajaMenor.html" class="menu-card">
+            <div class="menu-icon">💰</div>
+            <span>Caja Menor</span>
+        </a>
+
+        <a href="libroDiario.html" class="menu-card">
+            <div class="menu-icon">📒</div>
+            <span>Libro Diario</span>
+        </a>
+
+        <a href="transportadoras.html" class="menu-card">
+            <div class="menu-icon">🚚</div>
+            <span>Transportadoras</span>
+        </a>
+
+        <a href="averias.html" class="menu-card">
+            <div class="menu-icon">⚠️</div>
+            <span>Averías</span>
+        </a>
+            <a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" class="menu-card" target="_blank">
+            <div class="menu-icon">✅</div>
+            <span>Confirmacion</span>
+        </a>
+            </a>
+            <a href="pagosMensuales.html" class="menu-card">
+            <div class="menu-icon">💳</div>
+            <span>Pagos mensuales</span>
+        </a>
+    </nav>
+</body>
+</html>

fronted/libroDiario.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>App Luisa - Libro Diario</title>
+    <link rel="stylesheet" href="estilos.css">
+</head>
+<body>
+    <header>
+        <h1>📒 Libro Diario</h1>
+    </header>
+
+    <nav class="nav-menu">
+        <a href="index.html">🏠 Inicio</a>
+        <a href="cajaMenor.html">💰 Caja Menor</a>
+        <a href="libroDiario.html" class="active">📒 Libro Diario</a>
+        <a href="transportadoras.html">🚚 Transportadoras</a>
+        <a href="averias.html">⚠️ Averías</a>
+        <a href="pagosMensuales.html">💳 Pagos Mensuales</a>
+        <a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
+        <button class="btn-sync" id="btnSync" title="Sincronizar con Google Sheets">🔄 Sync</button>
+    </nav>
+
+    <main class="contenido">
+        <!-- FORMULARIO -->
+        <div class="formulario-card">
+            <h2>Nuevo Registro</h2>
+            <form id="formMovimiento">
+                <div class="form-grupo">
+                    <label for="fecha">Fecha</label>
+                    <input type="date" id="fecha" required>
+                </div>
+
+                <div class="form-grupo">
+                    <label for="tipo">Destino</label>
+                    <select id="tipo" required>
+                        <option value="">Seleccionar...</option>
+                        <option value="Personal Flor">🌸 Personal Flor</option>
+                        <option value="Bodega">📦 Bodega</option>
+                    </select>
+                </div>
+
+                <div class="form-grupo">
+                    <label for="descripcion">Descripción</label>
+                    <input type="text" id="descripcion" placeholder="Ej: Compra de mercancía" required>
+                </div>
+
+                <div class="form-grupo">
+                    <label for="monto">Monto</label>
+                    <input type="number" id="monto" placeholder="0" min="0" step="1" required>
+                </div>
+
+                <button type="submit" class="btn-guardar">💾 Guardar</button>
+            </form>
+        </div>
+
+        <!-- TABLA -->
+        <div class="tabla-card">
+            <h2>📋 Registros</h2>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Fecha</th>
+                        <th>Destino</th>
+                        <th>Descripción</th>
+                        <th>Monto</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody id="tablaMovimientos">
+                    <tr><td colspan="5" class="sin-datos">Cargando...</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </main>
+
+    <!-- MODAL EDITAR -->
+    <div class="modal-fondo" id="modalEditarFondo">
+        <div class="modal">
+            <h3>✏️ Editar registro</h3>
+            <div class="form-grupo">
+                <label for="editFecha">Fecha</label>
+                <input type="date" id="editFecha">
+            </div>
+            <div class="form-grupo">
+                <label for="editTipo">Destino</label>
+                <select id="editTipo">
+                    <option value="Personal Flor">🌸 Personal Flor</option>
+                    <option value="Bodega">📦 Bodega</option>
+                </select>
+            </div>
+            <div class="form-grupo">
+                <label for="editDescripcion">Descripción</label>
+                <input type="text" id="editDescripcion">
+            </div>
+            <div class="form-grupo">
+                <label for="editMonto">Monto</label>
+                <input type="number" id="editMonto" min="0" step="1">
+            </div>
+            <div class="modal-botones">
+                <button class="btn-cancelar" id="btnCancelarEdicion">Cancelar</button>
+                <button class="btn-confirmar" id="btnGuardarEdicion">Guardar</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- MODAL BORRAR -->
+    <div class="modal-fondo" id="modalBorrarFondo">
+        <div class="modal">
+            <h3>🗑️ Borrar registro</h3>
+            <p class="modal-texto-borrar">¿Seguro que quieres borrar este registro?</p>
+            <p class="modal-texto-borrar" id="borrarDescripcion"></p>
+            <div class="modal-botones">
+                <button class="btn-cancelar" id="btnCancelarBorrar">Cancelar</button>
+                <button class="btn-borrar-confirmar" id="btnConfirmarBorrar">Borrar</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="acciones.js"></script>
+    <script src="libroDiario.js"></script>
+</body>
+</html>

fronted/libroDiario.js

@@ -0,0 +1,114 @@
+// ============ CONFIGURACIÓN ============
+const NOMBRE_HOJA = "libroDiario";
+
+// ============ CARGAR DATOS AL ABRIR LA PÁGINA ============
+document.addEventListener("DOMContentLoaded", () => {
+    cargarMovimientos();
+});
+
+// ============ LEER DATOS ============
+async function cargarMovimientos() {
+    const tbody = document.getElementById("tablaMovimientos");
+
+    try {
+        const respuesta = await fetch(`/leer?hoja=${NOMBRE_HOJA}`);
+        const data = await respuesta.json();
+
+        if (data.error) {
+            tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error: ${data.error}</td></tr>`;
+            return;
+        }
+
+        mostrarMovimientos(data.datos);
+
+    } catch (error) {
+        tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error al cargar datos</td></tr>`;
+        console.error("Error:", error);
+    }
+}
+
+// ============ MOSTRAR EN LA TABLA ============
+function mostrarMovimientos(movimientos) {
+    const tbody = document.getElementById("tablaMovimientos");
+
+    if (movimientos.length === 0) {
+        tbody.innerHTML = `<tr><td colspan="5" class="sin-datos">No hay registros</td></tr>`;
+        return;
+    }
+
+    tbody.innerHTML = "";
+
+    movimientos.forEach(mov => {
+        const fila = document.createElement("tr");
+        const esFlor = mov.Tipo === "Personal Flor";
+
+        fila.innerHTML = `
+            <td>${formatearFecha(mov.Fecha)}</td>
+            <td><span class="${esFlor ? 'badge-ingreso' : 'badge-salida'}">${esFlor ? '🌸' : '📦'} ${mov.Tipo}</span></td>
+            <td>${mov["Descripción"]}</td>
+            <td class="monto-salida">$${formatearMonto(mov.Monto)}</td>
+        `;
+        // Menú de opciones (⋮) con modales
+        const celdaOpciones = document.createElement("td");
+        celdaOpciones.appendChild(crearMenuOpciones(mov));
+        fila.appendChild(celdaOpciones);
+
+        tbody.appendChild(fila);
+    });
+}
+
+// ============ GUARDAR NUEVO MOVIMIENTO ============
+document.getElementById("formMovimiento").addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const btnGuardar = e.target.querySelector("button");
+    btnGuardar.disabled = true;
+    btnGuardar.textContent = "⏳ Guardando...";
+
+    const datos = {
+        hoja: NOMBRE_HOJA,
+        datos: {
+            "Fecha": document.getElementById("fecha").value,
+            "Tipo": document.getElementById("tipo").value,
+            "Descripción": document.getElementById("descripcion").value,
+            "Monto": document.getElementById("monto").value
+        }
+    };
+
+    try {
+        const respuesta = await fetch("/guardar", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(datos)
+        });
+
+        const resultado = await respuesta.json();
+
+        if (resultado.error) {
+            alert("Error: " + resultado.error);
+        }
+
+        // Limpiar formulario y recargar tabla
+        document.getElementById("formMovimiento").reset();
+        cargarMovimientos();
+
+    } catch (error) {
+        console.error("Error al guardar:", error);
+        alert("Error al guardar el registro");
+    }
+
+    btnGuardar.disabled = false;
+    btnGuardar.textContent = "💾 Guardar";
+});
+
+// ============ FUNCIONES AUXILIARES ============
+function formatearFecha(fecha) {
+    if (!fecha) return "";
+    const f = new Date(fecha);
+    return f.toLocaleDateString("es-CO", { day: "2-digit", month: "2-digit", year: "numeric" });
+}
+
+function formatearMonto(monto) {
+    const num = parseFloat(monto) || 0;
+    return num.toLocaleString("es-CO", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
+}

fronted/pagosMensuales.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>App Luisa - Pagos Mensuales</title>
+    <link rel="stylesheet" href="estilos.css">
+</head>
+<body>
+    <header>
+        <h1>💳 Pagos Mensuales</h1>
+    </header>
+
+    <nav class="nav-menu">
+        <a href="index.html">🏠 Inicio</a>
+        <a href="cajaMenor.html">💰 Caja Menor</a>
+        <a href="libroDiario.html">📒 Libro Diario</a>
+        <a href="transportadoras.html">🚚 Transportadoras</a>
+        <a href="averias.html">⚠️ Averías</a>
+        <a href="pagosMensuales.html" class="active">💳 Pagos Mensuales</a>
+        <a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
+    </nav>
+
+    <main class="contenido">
+        <p>Aquí irá el contenido de pagos mensuales.</p>
+    </main>
+</body>
+</html>

fronted/transportadoras.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>App Luisa - Transportadoras</title>
+    <link rel="stylesheet" href="estilos.css">
+</head>
+<body>
+    <header>
+        <h1>🚚 Transportadoras</h1>
+    </header>
+
+    <nav class="nav-menu">
+        <a href="index.html">🏠 Inicio</a>
+        <a href="cajaMenor.html">💰 Caja Menor</a>
+        <a href="libroDiario.html">📒 Libro Diario</a>
+        <a href="transportadoras.html" class="active">🚚 Transportadoras</a>
+        <a href="averias.html">⚠️ Averías</a>
+        <a href="pagosMensuales.html">💳 Pagos Mensuales</a>
+        <a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
+    </nav>
+
+    <main class="contenido">
+        <p>Aquí irá el contenido de transportadoras.</p>
+    </main>
+</body>
+</html>

google script/Code.gs

@@ -0,0 +1,193 @@
+/*************************************************
+ * APP LUISA - API con Google Apps Script
+ * 
+ * Esta API conecta el frontend con Google Sheets.
+ * 
+ * ESTRUCTURA DE CADA HOJA:
+ *   Columna A: Fecha
+ *   Columna B: Tipo (Ingreso / Gasto)
+ *   Columna C: Descripción
+ *   Columna D: Monto
+ *   Columna E: ID  ← identificador del registro en SQLite
+ * 
+ * La primera fila debe ser el encabezado.
+ * 
+ * ACCIONES (parámetro "accion" en el body del POST):
+ *   - "nuevo" o "actualizar": crea la fila si el ID no existe,
+ *      o actualiza la fila que tenga ese ID
+ *   - "borrar": elimina la fila que tenga ese ID
+ *************************************************/
+
+const SPREADSHEET_ID = "PEGA_AQUI_EL_ID_DE_TU_HOJA"; // ⚠️ Reemplazar con tu ID
+
+// ============ LEER DATOS (GET) ============
+// Uso:  URL?hoja=CajaMenor
+function doGet(e) {
+  const nombreHoja = e.parameter.hoja || "CajaMenor";
+  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
+  const hoja = ss.getSheetByName(nombreHoja);
+
+  if (!hoja) {
+    return responderJSON({ error: "La hoja '" + nombreHoja + "' no existe" });
+  }
+
+  const datos = hoja.getDataRange().getValues();
+  const encabezados = datos[0];
+  const filas = datos.slice(1);
+
+  // Convertir a array de objetos
+  const resultado = filas.map(fila => {
+    const objeto = {};
+    encabezados.forEach((encabezado, i) => {
+      objeto[encabezado] = fila[i];
+    });
+    return objeto;
+  });
+
+  return responderJSON({ datos: resultado });
+}
+
+// ============ GUARDAR / ACTUALIZAR / BORRAR (POST) ============
+// Body: { hoja, accion, id, datos: { Fecha, Tipo, Descripción, Monto } }
+function doPost(e) {
+  try {
+    // Log de depuración: grabar en una hoja llamada "Logs" para ver si doPost se ejecuta
+    logDebug("doPost iniciado. postData: " + JSON.stringify(e.postData));
+
+    let body;
+    if (e.postData && e.postData.contents) {
+      try {
+        body = JSON.parse(e.postData.contents);
+        logDebug("Parseado postData.contents como JSON");
+      } catch (parseErr) {
+        logDebug("FALLÓ parse JSON. Tipo: " + (e.postData.type || "N/A") + " | Contenido: " + e.postData.contents);
+        body = e.parameter || {};
+      }
+    } else if (e.postData && e.postData.type === "application/json") {
+      body = JSON.parse(e.parameter);
+    } else {
+      logDebug("No había postData. Params: " + JSON.stringify(e.parameter || {}));
+      body = e.parameter || {};
+    }
+
+    const nombreHoja = body.hoja || "CajaMenor";
+    const accion = body.accion || "nuevo";
+    const id = String(body.id || "");
+    const datos = body.datos || {};
+
+    logDebug("Parsed body: hoja=" + nombreHoja + " accion=" + accion + " id=" + id);
+
+    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
+    const hoja = ss.getSheetByName(nombreHoja);
+
+    if (!hoja) {
+      return responderJSON({ error: "La hoja '" + nombreHoja + "' no existe" });
+    }
+
+    const encabezados = hoja.getRange(1, 1, 1, hoja.getLastColumn()).getValues()[0];
+    let indiceId = indiceColumnaId(encabezados);
+
+    // Si no existe la columna "Id", la creamos al final para no dañar datos
+    if (indiceId === -1) {
+      hoja.getRange(1, encabezados.length + 1).setValue("Id");
+      encabezados.push("Id");
+      indiceId = encabezados.length - 1;
+      logDebug("La columna 'Id' no existía en " + nombreHoja + ". Se creó en la columna " + (indiceId + 1));
+    }
+
+    // Buscar si ya existe una fila con ese ID en la columna de ID
+    const filaExistente = buscarFilaPorId(hoja, id, indiceId);
+    logDebug("buscarFilaPorId(" + id + ") => fila " + filaExistente);
+
+    if (accion === "borrar") {
+      if (filaExistente > 0) {
+        hoja.deleteRow(filaExistente);
+        logDebug("Borrado fila " + filaExistente + " id=" + id);
+        return responderJSON({ ok: true, mensaje: "Registro borrado" });
+      }
+      logDebug("Nada que borrar id=" + id + ". IDs en hoja: " + listarIds(hoja, indiceId));
+      return responderJSON({ ok: true, mensaje: "Nada que borrar" });
+    }
+
+    if (filaExistente > 0) {
+      // ACTUALIZAR
+      encabezados.forEach((encabezado, i) => {
+        if (i === indiceId) {
+          hoja.getRange(filaExistente, i + 1).setValue(id);
+        } else if (datos[encabezado] !== undefined) {
+          hoja.getRange(filaExistente, i + 1).setValue(datos[encabezado]);
+        }
+      });
+      return responderJSON({ ok: true, mensaje: "Registro actualizado" });
+    }
+
+    // NUEVO
+    const nuevaFila = encabezados.map((encabezado, i) => {
+      if (i === indiceId) return id;
+      return datos[encabezado] || "";
+    });
+    hoja.appendRow(nuevaFila);
+
+    return responderJSON({ ok: true, mensaje: "Registro guardado correctamente" });
+
+  } catch (error) {
+    logDebug("ERROR doPost: " + error.message);
+    return responderJSON({ error: error.message });
+  }
+}
+
+// ============ LOG DE DEPURACIÓN ============
+function logDebug(mensaje) {
+  try {
+    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
+    let hojaLog = ss.getSheetByName("Logs");
+    if (!hojaLog) {
+      hojaLog = ss.insertSheet("Logs");
+      hojaLog.appendRow(["Fecha", "Mensaje"]);
+    }
+    hojaLog.appendRow([new Date(), mensaje]);
+  } catch (e) {
+    // Si no puede logear, ignora
+  }
+}
+
+// ============ BUSCAR COLUMNA ID ============
+// Encuentra el índice de la columna cuyo encabezado sea "id" sin importar mayúsculas.
+// Si no existe, devuelve -1 (el doPost se encarga de crearla al final).
+function indiceColumnaId(encabezados) {
+  for (let i = 0; i < encabezados.length; i++) {
+    if (String(encabezados[i]).trim().toLowerCase() === "id") return i;
+  }
+  return -1;
+}
+
+// ============ BUSCAR FILA POR ID ============
+// Busca el ID en la columna ID indicada. Devuelve el número de fila o 0 si no existe.
+function buscarFilaPorId(hoja, id, indiceColumnaId) {
+  if (!id || indiceColumnaId === null || indiceColumnaId < 0) return 0;
+  const ultimaFila = hoja.getLastRow();
+  if (ultimaFila < 2) return 0; // solo encabezados
+
+  const columnaId = hoja.getRange(2, indiceColumnaId + 1, ultimaFila - 1, 1).getValues();
+  for (let i = 0; i < columnaId.length; i++) {
+    if (String(columnaId[i][0]).trim() === id.trim()) {
+      return i + 2; // +2: fila 1 es encabezado, índice base 1
+    }
+  }
+  return 0;
+}
+
+// ============ LISTAR IDs (para depurar) ============
+function listarIds(hoja, indiceColumnaId) {
+  const ultimaFila = hoja.getLastRow();
+  if (ultimaFila < 2) return "(hoja sin datos)";
+  const valores = hoja.getRange(2, indiceColumnaId + 1, ultimaFila - 1, 1).getValues();
+  return "[" + valores.map(v => "'" + String(v[0]) + "'").join(", ") + "]";
+}
+
+// ============ FUNCIÓN AUXILIAR ============
+function responderJSON(objeto) {
+  return ContentService
+    .createTextOutput(JSON.stringify(objeto))
+    .setMimeType(ContentService.MimeType.JSON);
+}