feat: fix backend SQL columns, add dark/light theme, fix legacy CSS

- Fix 7 backend controllers: rename columns to match actual DB schema
  (name_room→room_number, id_room→id, bed_type→room_type,
   id_employee→id, status_employee→status)
- Fix 10 frontend files with matching property renames
- Add ThemeContext with dark/light toggle (localStorage persisted)
- Redesign theme.css with [data-theme] attribute selectors
- Add Google Fonts (Syne, DM Sans, JetBrains Mono)
- Redesign sidebar, topbar, and login page CSS
- Migrate ~44 legacy CSS files from hardcoded colors to CSS variables
- Remove Dashboards/Tableros section from menu
- Clean up commented-out CSS blocks across codebase

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.claude/settings.local.json

@@ -7,7 +7,26 @@
       "Bash(git commit:*)",
       "Bash(git remote add:*)",
       "Bash(git push:*)",
-      "Bash(cat:*)"
+      "Bash(cat:*)",
+      "Bash(git -C /root/SistemaHotel status)",
+      "Bash(git -C /root/SistemaHotel add backend/hotel_hacienda/src/db/migrations/001_front_office_tables.sql)",
+      "Bash(git -C /root/SistemaHotel commit -m \"$\\(cat <<''EOF''\nfeat: add database migration for front-office tables\n\nCo-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>\nEOF\n\\)\")",
+      "Bash(git -C /root/SistemaHotel check-ignore -v backend/hotel_hacienda/src/db/migrations/001_front_office_tables.sql)",
+      "Bash(git -C /root/SistemaHotel add backend/hotel_hacienda/src/db/migrations/001_front_office_tables.sql .gitignore)",
+      "Bash(git -C /root/SistemaHotel log --oneline -3)",
+      "Bash(npm install:*)",
+      "Bash(git init:*)",
+      "Bash(git -C /root/SistemaHotel log --oneline -5)",
+      "Bash(git -C /root/SistemaHotel diff backend/hotel_hacienda/src/app.js frontend/Frontend-Hotel/src/App.jsx frontend/Frontend-Hotel/src/constants/menuconfig.js)",
+      "Bash(psql:*)",
+      "Bash(systemctl is-active:*)",
+      "Bash(service docker:*)",
+      "Bash(ip addr:*)",
+      "Bash(docker compose:*)",
+      "Bash(apt-get update:*)",
+      "Bash(apt-get:*)",
+      "Bash(docker:*)",
+      "Bash(python3:*)"
     ]
   }
 }

backend/hotel_hacienda/package-lock.json

@@ -10,11 +10,14 @@
       "license": "ISC",
       "dependencies": {
         "axios": "^1.13.2",
+        "bcryptjs": "^2.4.3",
+        "cookie-parser": "^1.4.7",
         "cors": "^2.8.5",
         "csv-parser": "^3.2.0",
         "dotenv": "^17.2.2",
         "express": "^5.1.0",
         "express-validator": "^7.2.1",
+        "jsonwebtoken": "^9.0.2",
         "nodemailer": "^7.0.10",
         "pg": "^8.16.3",
         "stripe": "^20.1.2",
@@ -84,6 +87,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
+      "license": "MIT"
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -141,6 +150,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -275,6 +290,25 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/cookie-parser": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz",
+      "integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "0.7.2",
+        "cookie-signature": "1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/cookie-parser/node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "license": "MIT"
+    },
     "node_modules/cookie-signature": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
@@ -382,6 +416,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -872,12 +915,97 @@
       "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
       "license": "MIT"
     },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^4.0.1",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -1070,7 +1198,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
       "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.9.1",
         "pg-pool": "^3.10.1",
@@ -1331,7 +1458,6 @@
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
       "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"

backend/hotel_hacienda/src/controllers/guests.controller.js

@@ -5,11 +5,11 @@ const getGuests = async (req, res) => {
     const { search, limit = 50, offset = 0 } = req.query;
     let query = `
       SELECT g.*,
-        r.room_id, rm.name_room,
+        r.room_id, rm.room_number,
         r.check_in as current_check_in
       FROM guests g
       LEFT JOIN reservations r ON r.guest_id = g.id AND r.status = 'checked_in'
-      LEFT JOIN rooms rm ON rm.id_room = r.room_id
+      LEFT JOIN rooms rm ON rm.id = r.room_id
     `;
     const params = [];
     let paramIndex = 1;
@@ -38,10 +38,10 @@ const getGuestById = async (req, res) => {
   try {
     const { id } = req.params;
     const guest = await pool.query(`
-      SELECT g.*, r.room_id, rm.name_room, r.check_in as current_check_in, r.check_out as current_check_out
+      SELECT g.*, r.room_id, rm.room_number, r.check_in as current_check_in, r.check_out as current_check_out
       FROM guests g
       LEFT JOIN reservations r ON r.guest_id = g.id AND r.status = 'checked_in'
-      LEFT JOIN rooms rm ON rm.id_room = r.room_id
+      LEFT JOIN rooms rm ON rm.id = r.room_id
       WHERE g.id = $1
     `, [id]);
 
@@ -92,9 +92,9 @@ const getGuestStays = async (req, res) => {
   try {
     const { id } = req.params;
     const result = await pool.query(`
-      SELECT gs.*, rm.name_room, rm.bed_type
+      SELECT gs.*, rm.room_number, rm.room_type
       FROM guest_stays gs
-      LEFT JOIN rooms rm ON rm.id_room = gs.room_id
+      LEFT JOIN rooms rm ON rm.id = gs.room_id
       WHERE gs.guest_id = $1
       ORDER BY gs.check_in DESC
     `, [id]);

backend/hotel_hacienda/src/controllers/housekeeping.controller.js

@@ -4,12 +4,12 @@ const getTasks = async (req, res) => {
   try {
     const { status, priority, assigned_to } = req.query;
     let query = `
-      SELECT ht.*, rm.name_room, rm.floor,
+      SELECT ht.*, rm.room_number, rm.floor,
         CASE WHEN ht.assigned_to IS NOT NULL THEN
-          (SELECT e.first_name || ' ' || e.last_name FROM employees e WHERE e.id_employee = ht.assigned_to)
+          (SELECT e.first_name || ' ' || e.last_name FROM employees e WHERE e.id = ht.assigned_to)
         END as assigned_name
       FROM housekeeping_tasks ht
-      LEFT JOIN rooms rm ON rm.id_room = ht.room_id
+      LEFT JOIN rooms rm ON rm.id = ht.room_id
       WHERE 1=1
     `;
     const params = [];
@@ -62,7 +62,7 @@ const updateTask = async (req, res) => {
       updates.status = 'completed';
       updates.completed_at = new Date();
       // Set room to available
-      await pool.query("UPDATE rooms SET status = 'available' WHERE id_room = $1", [task.room_id]);
+      await pool.query("UPDATE rooms SET status = 'available' WHERE id = $1", [task.room_id]);
       await pool.query(
         'INSERT INTO room_status_log (room_id, previous_status, new_status, changed_by) VALUES ($1, $2, $3, $4)',
         [task.room_id, 'cleaning', 'available', req.user?.user_id]
@@ -91,10 +91,10 @@ const getStaff = async (req, res) => {
     // Get employees from housekeeping-related areas
     // Note: the employees table structure uses stored functions, so we query directly
     const result = await pool.query(`
-      SELECT e.id_employee, e.first_name, e.last_name,
-        (SELECT COUNT(*) FROM housekeeping_tasks ht WHERE ht.assigned_to = e.id_employee AND ht.status = 'in_progress') as active_tasks
+      SELECT e.id, e.first_name, e.last_name,
+        (SELECT COUNT(*) FROM housekeeping_tasks ht WHERE ht.assigned_to = e.id AND ht.status = 'in_progress') as active_tasks
       FROM employees e
-      WHERE e.status_employee = true
+      WHERE e.status = 'active'
       ORDER BY e.first_name
       LIMIT 50
     `);

backend/hotel_hacienda/src/controllers/incomehrx.controller.js

@@ -1,6 +1,6 @@
 const pool = require('../db/connection');
 const axios = require('axios');
-const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
+const stripe = process.env.STRIPE_SECRET_KEY ? require('stripe')(process.env.STRIPE_SECRET_KEY) : null;
 const getFacturas = async (initialDate, finalDate) => {
   try {
     const response = await axios.get(process.env.FACTURAS_API_URL, {

backend/hotel_hacienda/src/controllers/operational-reports.controller.js

@@ -53,11 +53,11 @@ const getRevenueReport = async (req, res) => {
     }
 
     const result = await pool.query(`
-      SELECT rm.bed_type as room_type, COALESCE(SUM(r.total_amount), 0) as revenue
+      SELECT rm.room_type, COALESCE(SUM(r.total_amount), 0) as revenue
       FROM reservations r
-      JOIN rooms rm ON rm.id_room = r.room_id
+      JOIN rooms rm ON rm.id = r.room_id
       WHERE r.status = 'checked_out' AND r.check_out >= CURRENT_DATE - INTERVAL '${interval}'
-      GROUP BY rm.bed_type
+      GROUP BY rm.room_type
       ORDER BY revenue DESC
     `);
 

backend/hotel_hacienda/src/controllers/reservations.controller.js

@@ -5,10 +5,10 @@ const getReservations = async (req, res) => {
     const { status, from_date, to_date, search } = req.query;
     let query = `
       SELECT r.*, g.first_name, g.last_name, g.phone, g.email,
-             rm.name_room, rm.bed_type
+             rm.room_number, rm.room_type
       FROM reservations r
       JOIN guests g ON g.id = r.guest_id
-      LEFT JOIN rooms rm ON rm.id_room = r.room_id
+      LEFT JOIN rooms rm ON rm.id = r.room_id
       WHERE 1=1
     `;
     const params = [];
@@ -128,7 +128,7 @@ const updateReservationStatus = async (req, res) => {
     // Cascading side effects
     if (status === 'checked_in') {
       // Set room to occupied
-      await pool.query("UPDATE rooms SET status = 'occupied' WHERE id_room = $1", [reservation.room_id]);
+      await pool.query("UPDATE rooms SET status = 'occupied' WHERE id = $1", [reservation.room_id]);
       await pool.query(
         'INSERT INTO room_status_log (room_id, previous_status, new_status, changed_by) VALUES ($1, $2, $3, $4)',
         [reservation.room_id, 'available', 'occupied', userId]
@@ -142,7 +142,7 @@ const updateReservationStatus = async (req, res) => {
 
     if (status === 'checked_out') {
       // Set room to cleaning
-      await pool.query("UPDATE rooms SET status = 'cleaning' WHERE id_room = $1", [reservation.room_id]);
+      await pool.query("UPDATE rooms SET status = 'cleaning' WHERE id = $1", [reservation.room_id]);
       await pool.query(
         'INSERT INTO room_status_log (room_id, previous_status, new_status, changed_by) VALUES ($1, $2, $3, $4)',
         [reservation.room_id, 'occupied', 'cleaning', userId]
@@ -162,7 +162,7 @@ const updateReservationStatus = async (req, res) => {
     if (status === 'cancelled') {
       // Free room if it was occupied
       if (reservation.status === 'checked_in') {
-        await pool.query("UPDATE rooms SET status = 'available' WHERE id_room = $1", [reservation.room_id]);
+        await pool.query("UPDATE rooms SET status = 'available' WHERE id = $1", [reservation.room_id]);
       }
     }
 

backend/hotel_hacienda/src/controllers/rooms.controller.js

@@ -10,9 +10,9 @@ const getRoomsWithStatus = async (req, res) => {
         res.check_in,
         res.check_out
       FROM rooms r
-      LEFT JOIN reservations res ON res.room_id = r.id_room AND res.status = 'checked_in'
+      LEFT JOIN reservations res ON res.room_id = r.id AND res.status = 'checked_in'
       LEFT JOIN guests g ON g.id = res.guest_id
-      ORDER BY r.floor, r.name_room
+      ORDER BY r.floor, r.room_number
     `);
     res.json({ rooms: result.rows });
   } catch (error) {
@@ -32,13 +32,13 @@ const updateRoomStatus = async (req, res) => {
       return res.status(400).json({ message: 'Estado invalido' });
     }
 
-    const current = await pool.query('SELECT status FROM rooms WHERE id_room = $1', [id]);
+    const current = await pool.query('SELECT status FROM rooms WHERE id = $1', [id]);
     if (current.rows.length === 0) {
       return res.status(404).json({ message: 'Habitacion no encontrada' });
     }
     const previousStatus = current.rows[0].status;
 
-    await pool.query('UPDATE rooms SET status = $1 WHERE id_room = $2', [status, id]);
+    await pool.query('UPDATE rooms SET status = $1 WHERE id = $2', [status, id]);
 
     await pool.query(
       'INSERT INTO room_status_log (room_id, previous_status, new_status, changed_by) VALUES ($1, $2, $3, $4)',

backend/hotel_hacienda/src/controllers/roomservice.controller.js

@@ -4,10 +4,10 @@ const getOrders = async (req, res) => {
   try {
     const { status } = req.query;
     let query = `
-      SELECT rso.*, rm.name_room, g.first_name || ' ' || g.last_name as guest_name,
+      SELECT rso.*, rm.room_number, g.first_name || ' ' || g.last_name as guest_name,
         json_agg(json_build_object('id', oi.id, 'name', mi.name, 'quantity', oi.quantity, 'price', oi.price, 'notes', oi.notes)) as items
       FROM room_service_orders rso
-      LEFT JOIN rooms rm ON rm.id_room = rso.room_id
+      LEFT JOIN rooms rm ON rm.id = rso.room_id
       LEFT JOIN guests g ON g.id = rso.guest_id
       LEFT JOIN order_items oi ON oi.order_id = rso.id
       LEFT JOIN menu_items mi ON mi.id = oi.menu_item_id
@@ -19,7 +19,7 @@ const getOrders = async (req, res) => {
     } else {
       query += " WHERE rso.status NOT IN ('delivered', 'cancelled')";
     }
-    query += ' GROUP BY rso.id, rm.name_room, g.first_name, g.last_name ORDER BY rso.created_at DESC';
+    query += ' GROUP BY rso.id, rm.room_number, g.first_name, g.last_name ORDER BY rso.created_at DESC';
 
     const result = await pool.query(query, params);
     res.json({ orders: result.rows });

backend/hotel_hacienda/src/controllers/schedules.controller.js

@@ -11,7 +11,7 @@ const getSchedules = async (req, res) => {
     let query = `
       SELECT es.*, e.first_name, e.last_name
       FROM employee_schedules es
-      JOIN employees e ON e.id_employee = es.employee_id
+      JOIN employees e ON e.id = es.employee_id
       WHERE es.schedule_date BETWEEN $1 AND $2
     `;
     const params = [week_start, weekEnd.toISOString().split('T')[0]];
@@ -67,7 +67,7 @@ const getEmployeeSchedule = async (req, res) => {
 const getEmployeesForScheduling = async (req, res) => {
   try {
     const result = await pool.query(
-      'SELECT id_employee, first_name, last_name FROM employees WHERE status_employee = true ORDER BY first_name LIMIT 100'
+      "SELECT id, first_name, last_name FROM employees WHERE status = 'active' ORDER BY first_name LIMIT 100"
     );
     res.json({ employees: result.rows });
   } catch (error) {

docker-compose.yml

@@ -36,7 +36,7 @@ services:
       EMAIL_PORT: 587
       EMAIL_USER: ${EMAIL_USER}
       EMAIL_PASS: ${EMAIL_PASS}
-      URL_CORS: https://hotel.consultoria-as.com
+      URL_CORS: http://192.168.10.229:5172
       BANXICO_TOKEN: ${BANXICO_TOKEN}
     depends_on:
       postgres:
@@ -49,7 +49,7 @@ services:
     ports:
       - "5172:5172"
     environment:
-      VITE_API_BASE_URL: http://backend:4000/api
+      VITE_API_BASE_URL: http://192.168.10.229:4000/api
     depends_on:
       - backend
 

frontend/Frontend-Hotel/package-lock.json

@@ -11,11 +11,14 @@
         "@hookform/resolvers": "^5.2.2",
         "axios": "^1.11.0",
         "bootstrap": "^5.3.8",
+        "i18next": "^23.16.8",
+        "i18next-browser-languagedetector": "^8.0.4",
         "multer": "^2.0.2",
         "prop-types": "^15.8.1",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-hook-form": "^7.66.1",
+        "react-i18next": "^15.4.1",
         "react-icons": "^5.5.0",
         "react-router-dom": "^7.8.2",
         "xlsx": "^0.18.5",
@@ -71,7 +74,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -233,6 +235,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -1518,7 +1529,6 @@
       "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@svgr/babel-preset": "8.1.0",
@@ -1821,7 +1831,6 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1859,7 +1868,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2218,7 +2226,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2953,7 +2960,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3622,6 +3628,47 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "23.16.8",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.8.tgz",
+      "integrity": "sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
+      "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4685,7 +4732,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4723,7 +4769,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -4804,7 +4849,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4814,7 +4858,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4827,7 +4870,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.68.0.tgz",
       "integrity": "sha512-oNN3fjrZ/Xo40SWlHf1yCjlMK417JxoSJVUXQjGdvdRCU07NTFei1i1f8ApUAts+IVh14e4EdakeLEA+BEAs/Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -4839,6 +4881,32 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.7.4.tgz",
+      "integrity": "sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.4.0",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -5710,7 +5778,6 @@
       "integrity": "sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -5795,6 +5862,15 @@
         "vite": ">=2.6.0"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

frontend/Frontend-Hotel/src/App.css

@@ -5,38 +5,6 @@
   text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
 .read-the-docs {
-  color: #888;
+  color: var(--text-muted);
 }

frontend/Frontend-Hotel/src/components/Buttons/Button.css

@@ -3,27 +3,26 @@
   padding: 10px 20px;
   font-size: 1rem;
   font-weight: bold;
-  border-radius: 999px; /* Súper redondo */
-  background-color: #521414;
-  font-family: 'Roboto', sans-serif;
+  border-radius: 999px;
+  background-color: var(--accent-gold);
+  font-family: var(--font-sans);
   cursor: pointer;
-  color: #ffffff;
+  color: var(--bg-primary);
   transition: all 0.3s ease;
-  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-md);
   width: 100%;
   max-width: 400px;
   text-align: center;
-  transition: all 0.3s ease;
 }
 
 .btn.primary {
-  background-color: #4a0d0d;
-  color: white;
+  background-color: var(--accent-gold);
+  color: var(--bg-primary);
 }
 
 .btn.primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-lg);
 }
 
 .btn.secundary {
@@ -32,10 +31,10 @@
   font-size: 1.8rem;
   font-weight: bold;
   border-radius: 999px;
-  background-color: #eeeeee;
+  background-color: var(--bg-elevated);
   cursor: pointer;
-  color: #555555;
-  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-md);
   width: 100%;
   max-width: 400px;
   text-align: center;
@@ -44,7 +43,7 @@
 
 .btn.secundary:hover {
   transform: translateY(-2px);
-  box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-lg);
 }
 
 .button-group {
@@ -54,36 +53,3 @@
   margin-top: 30px;
   align-items: center;
 }
-
-
-
-
-/* 
-.button-group {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  margin-top: 30px;
-  align-items: center;
-}
-
-.input-field {
-  background-color: #eeeeee;
-  color: #555;
-  font-size: 1.8rem;
-  font-weight: bold;
-  border-radius: 999px;
-  padding: 20px 40px;
-  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15);
-  border: none;
-  width: 100%;
-  max-width: 400px;
-  text-align: center;
-  outline: none;
-}
-
-.btn.gray {
-  background-color: #ccc;
-  color: #333;
-}
- */

frontend/Frontend-Hotel/src/components/Filters/DateRangeFilter.css

@@ -15,8 +15,8 @@
 .date-label {
   font-size: 14px;
   font-weight: 600;
-  color: #333;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
   white-space: nowrap;
 }
 
@@ -24,12 +24,12 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   min-width: 150px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: var(--font-sans);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -39,11 +39,11 @@
 
 .date-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .date-input:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--accent-gold-muted);
 }
 
 @media (max-width: 768px) {
@@ -61,4 +61,3 @@
     flex: 1;
   }
 }
-

frontend/Frontend-Hotel/src/components/Filters/Filters.css

@@ -1,5 +1,3 @@
-/* src/styles/Filters.css */
-
 .page-header {
   display: flex;
   justify-content: space-between;
@@ -8,37 +6,37 @@
 }
 
 .page-title {
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-size: 28px;
   font-weight: 700;
   margin: 0;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-family: var(--font-sans);
   letter-spacing: -0.5px;
 }
 
 .new-payment-btn {
-  background-color: #FFD700;
-  color: #800000;
+  background-color: var(--accent-gold);
+  color: var(--bg-primary);
   font-weight: bold;
   padding: 10px 20px;
   border-radius: 20px;
   border: none;
   cursor: pointer;
   font-size: 14px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-family: var(--font-sans);
   transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 .new-payment-btn:hover {
-  background-color: #fcd200;
+  background-color: var(--accent-gold-hover);
   transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-md);
 }
 
 .new-payment-btn:active {
   transform: translateY(0);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 .report-page {
@@ -55,36 +53,24 @@ input[type="date"] {
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   max-width: 250px;
   min-width: 150px;
   width: auto;
   flex: 0 1 auto;
-  /* appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none; */
-  /* background-image: url("data:image/svg+xml,%3Csvg fill='gold' viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 2px center;
-  background-size: 18px 18px; */
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: var(--font-sans);
   font-weight: bold;
   cursor: pointer;
   box-sizing: border-box;
-  /* display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-bottom: 15px; */
-
 }
 
 select:focus,
 input[type="date"]:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .filters {
@@ -100,15 +86,14 @@ input[type="date"]:focus {
 }
 
 .filter-select, .filter-date {
-  background-color: white;
+  background-color: var(--bg-elevated);
   border: none;
   border-radius: 2rem;
   padding: 0.5rem 1rem;
   font-size: 1rem;
-  color: #333;
-  box-shadow: 0 0 3px rgba(0,0,0,0.1);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-sm);
   appearance: none;
-  background-image: url('data:image/svg+xml;utf8,<svg fill="gold" ...>...</svg>'); /* usa ícono amarillo aquí */
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 1rem;
@@ -116,13 +101,13 @@ input[type="date"]:focus {
 
 .filter-select:focus, .filter-date:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #FFD700;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .status-button {
   border: 2px solid;
   padding: 4px 10px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   font-weight: bold;
   text-transform: uppercase;
   font-size: 12px;
@@ -130,48 +115,48 @@ input[type="date"]:focus {
 }
 
 .status-button.approve {
-  color: #28a745;
-  border-color: #28a745;
-  background-color: #e6fff0;
+  color: var(--success);
+  border-color: var(--success);
+  background-color: rgba(34, 197, 94, 0.12);
 }
 
 .status-button.approved {
-  color: #28a745;
-  border-color: #28a745;
-  background-color: #e6fff0;
+  color: var(--success);
+  border-color: var(--success);
+  background-color: rgba(34, 197, 94, 0.12);
 }
 
 .status-button.reject {
-  color: #dc3545;
-  border-color: #dc3545;
-  background-color: #ffe6e6;
+  color: var(--error);
+  border-color: var(--error);
+  background-color: rgba(239, 68, 68, 0.12);
 }
+
 .status-button.rejected {
-  color: #dc3545;
-  border-color: #dc3545;
-  background-color: #ffe6e6;
+  color: var(--error);
+  border-color: var(--error);
+  background-color: rgba(239, 68, 68, 0.12);
 }
 
 .status-button.pending {
-  color: #f0ad4e;
-  border-color: #f0ad4e;
-  background-color: #fff7e6;
+  color: var(--warning);
+  border-color: var(--warning);
+  background-color: rgba(234, 179, 8, 0.12);
 }
 
 .status-button.paid {
-  color: #28a745;
-  border-color: #28a745;
-  background-color: #e6fff0;
+  color: var(--success);
+  border-color: var(--success);
+  background-color: rgba(34, 197, 94, 0.12);
 }
 
-
 .income-card {
-  background-color: white;
-  border-radius: 15px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 15px 20px;
   min-width: 140px;
   text-align: center;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+  box-shadow: var(--shadow-sm);
   align-items: center;
 }
 
@@ -181,37 +166,26 @@ input[type="date"]:focus {
   margin-bottom: 20px;
 }
 
-/* .summary-card {
-  background: #ffffff;
-  border-radius: 10px;
-  padding: 10px 20px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.1);
-  font-size: 1rem;
-  min-width: 160px;
-} */
-
-
 .summary-card {
-  background-color: white;
-  border-radius: 12px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
   padding: 15px 25px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
   min-width: 140px;
   text-align: center;
-  color: #333;
+  color: var(--text-primary);
   align-items: center;
   display: block;
 }
 
-/*Date*/
 .date-filter {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   margin-bottom: 20px;
   font-size: 14px;
-  color: #333;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
   font-weight: bold;
 }
 
@@ -223,17 +197,6 @@ input[type="date"]:focus {
   display: flex;
   align-items: center;
 }
-/* 
-.status-button.approve {
-  background-color: #8bed92;
-  border: 1.5px solid #33a544;
-  color: #33a544;
-  border-radius: 20px;
-  padding: 5px 15px;
-  font-weight: bold;
-  pointer-events: none;
-} */
-
 
 .page-filters {
   display: flex;
@@ -245,21 +208,3 @@ input[type="date"]:focus {
 .approved-page h2 {
   margin-bottom: 10px;
 }
-
-
-/* 
-.status-button {
-  border: 2px solid #28a745;
-  color: #28a745;
-  padding: 4px 10px;
-  border-radius: 6px;
-  font-weight: bold;
-  background-color: #e6fff0;
-}
-
-.status-button.inactive {
-  border-color: #dc3545;
-  color: #dc3545;
-  background-color: #ffe6e6;
-}
- */

frontend/Frontend-Hotel/src/components/Inputs/Input.css

@@ -2,7 +2,10 @@
   width: 100%;
   padding: 12px;
   margin: 8px 0;
-  border-radius: 12px;
-  border: 1px solid #ccc;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
   font-size: 1rem;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
 }

frontend/Frontend-Hotel/src/components/Layout2.jsx

@@ -5,13 +5,14 @@ import { useNavigate } from 'react-router-dom';
 import "../styles/Dashboard.css";
 import { AuthContext } from "../context/AuthContext";
 import { langContext } from "../context/LenguageContext";
+import { useTheme } from "../context/ThemeContext";
 import { FaSignOutAlt } from "react-icons/fa";
 import { menuConfig } from "../constants/menuconfig";
 
 export default function Layout() {
   const { toggleLang, lang } = useContext(langContext);
   const { user, logout } = useContext(AuthContext);
-  console.log('user', user);
+  const { theme, toggleTheme } = useTheme();
   const handleLogout = () => {
     logout();
     navigate("/");
@@ -19,7 +20,6 @@ export default function Layout() {
   const menuConfigWithPermissions = Object.values(menuConfig).map(section => ({
     ...section,
     hidden:
-      section.label === "Dashboards" ? (user >= 1 && user <= 2 ? false : true) :
       section.label === "Expenses to be approved" ? (user === 1 || user === 2 ? false : true) :
       section.label === "Expenses" ? (user >= 1 && user <= 5 ? false : true) :
       section.label === "Inventory" ? (user >= 1 && user <= 5 ? false : true) :
@@ -137,10 +137,15 @@ export default function Layout() {
 
 
             {/* Iconos a la derecha */}
-            <div className="topbar-icons" style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+            <div className="topbar-icons" style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+              <button
+                className="theme-toggle"
+                onClick={toggleTheme}
+                title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+              >
+                {theme === "dark" ? "\u2600" : "\u263E"}
+              </button>
               <select
-
-
                 className="language-select"
                 onChange={toggleLang}
               >
@@ -154,7 +159,7 @@ export default function Layout() {
                   alignItems: "center",
                   gap: "6px",
                   background: "transparent",
-                  color: "#ffffffff",
+                  color: "var(--text-primary)",
                   border: "none",
                   fontWeight: "bold",
                   cursor: "pointer"
@@ -204,7 +209,7 @@ export default function Layout() {
               />
               <p style={{
                 fontSize: '1.25rem',
-                color: '#666',
+                color: 'var(--text-secondary)',
                 textAlign: 'center',
                 maxWidth: '600px',
                 padding: '0 1rem'
@@ -222,216 +227,3 @@ export default function Layout() {
     </div>
   );
 }
-
-// // Layout.jsx
-// import React, { use, useContext, useState } from "react";
-// import { Outlet, NavLink, useLocation } from "react-router-dom";
-// import { useNavigate } from 'react-router-dom';
-// import { FaBell, FaCog } from "react-icons/fa";
-// import "../styles/Dashboard.css";
-// import { AuthContext } from "../context/AuthContext";
-// import { langContext } from "../context/LenguageContext";
-// import { FaSignOutAlt } from "react-icons/fa";
-
-// export default function Layout() {
-//   const { toggleLang } = useContext(langContext);
-//   const { user, logout } = useContext(AuthContext);
-//   const handleLogout = () => {
-//     logout();
-//     navigate("/");
-//   };
-//   // const {lang, setLang} = useContext(AuthContext);
-//   // console.log(lang);
-//   const menuConfig = [
-//     {
-//       label: "Dashboards",
-//       basePath: "/app/income",
-//       submenu: [
-//         { label: "Income", route: "/app/income" },
-//         // { label: "Expenses", route: "/app/expenses" },
-//         // { label: "Cost per room", route: "/app/cost-per-room" },
-//         // { label: "Budget", route: "/app/budget" },
-//       ],
-//       hidden: user === 1 ? false : true //Solo admin puede ver dashboards,
-//     },
-//     {
-//       label: "Expenses to be approved",
-//       basePath: "/app/pending-approval",
-//       submenu: [
-//         { label: "Pending approval", route: "/app/pending-approval" },
-//         { label: "Approved", route: "/app/approved" },
-//         { label: "Rejected", route: "/app/rejected" },
-//       ],
-//       hidden: user === 1 ? false : true
-//     },
-//     {
-//       label: "Expenses",
-//       basePath: "/app/report-expense",
-//       submenu: [
-//         { label: "Report", route: "/app/report-expense" },
-//         { label: "New Expense", route: "/app/new-expense" },
-//         { label: "Payments", route: "/app/payments" },
-//         { label: "Monthly Payments", route: "/app/monthly-payments" },
-//         { label: "New Monthly Payments", route: "/app/new-monthly" },
-//         { label: "Purchase Entries", route: "/app/purchase-entries" },
-//       ],
-//       hidden: user >= 1 && user <= 3 ? false : true
-//     },
-//     {
-//       label: "Inventory",
-//       basePath: "/app/products",
-//       submenu: [
-//         { label: "Products", route: "/app/products", hidden: user === 5 ? true : false },
-//         { label: "New Product", route: "/app/new-product", hidden: user === 5 ? true : false },
-//         { label: "Report", route: "/app/inventory-report", hidden: user === 5 ? true : false },
-//         { label: "Discard Product", route: "/app/discard-product", hidden: user === 5 ? true : false },
-//         { label: "Adjustments", route: "/app/product-adjustments", hidden: user === 5 ? true : false }
-//       ],
-//       hidden: user >= 1 && user <= 4 ? false : true
-//     },
-//     {
-//       label: "Payroll",
-//       basePath: "/app/payroll",
-//       submenu: [
-//         { label: "Report", route: "/app/payroll" },
-//         { label: "New Contract", route: "/app/payroll/NewPayRoll"},
-//         { label: "Attendance", route: "/app/payroll/attendance" },
-//         { label: "Employees", route: "/app/payroll/employees" },
-//         { label: "New Employee", route: "/app/payroll/newemployee" },
-//       ],
-//       hidden: user >= 1 && user <= 3 ? false : true
-//     },
-//     {
-//       label: "Hotel",
-//       basePath: "/app/properties",
-//       submenu: [
-//         { label: "Properties", route: "/app/properties" },
-//       ],
-//       hidden: user === 1 ? false : true
-//     },
-//     //SECCIÓN "OCULTA" PARA SETTINGS
-//     {
-//       label: "Settings",
-//       basePath: "/app/settings",
-//       submenu: [
-//         { label: "General", route: "/app/settings" },
-//         { label: "Users", route: "/app/settings/users" },
-//         { label: "Units", route: "/app/settings/roles" },
-//         { label: "Room management", route: "/app/settings/room-management" },
-//       ],
-//       hidden: true, //etiqueta para ignorar en sidebar
-//     },
-//   ];
-
-//   const navigate = useNavigate();
-//   const location = useLocation();
-//   const [isSidebarOpen, setSidebarOpen] = useState(true);
-//   const toggleSidebar = () => setSidebarOpen(!isSidebarOpen);
-//   const isDetailPage = /^\/app\/properties\/\d+$/.test(location.pathname);
-
-//   //Identificar la sección activa, incluyendo settings
-//   const activeSection = menuConfig.find(section =>
-//     section.submenu.some(item => location.pathname.startsWith(item.route))
-//   );
-
-//   const activeSubmenu = activeSection?.submenu || [];
-
-
-//   return (
-//     <div className="dashboard-layout">
-//       {/* Sidebar */}
-//       {isSidebarOpen && (
-//         <aside className="sidebar">
-//           <nav>
-//             {/*sSolo se muestran secciones que no están ocultas */}
-//             {menuConfig
-//               .filter(section => !section.hidden)
-//               .map((section, index) => (
-//                 <NavLink key={index} to={section.basePath}>
-//                   {section.label}
-//                 </NavLink>
-//               ))}
-//           </nav>
-//         </aside>
-//       )}
-
-//       {/* Main content */}
-//       <div className="main-content">
-//         {/* Topbar */}
-//         <div className="topbar">
-//           <div className="topbar-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-
-//             {/* Botón + Título (alineados a la izquierda) */}
-//             <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
-//               <button onClick={toggleSidebar} className="sidebar-toggle-button">
-//                 ☰
-//               </button>
-
-//               <div className="topbar-title">{activeSection?.label}</div>
-//             </div>
-
-
-//             {/* Iconos a la derecha */}
-//             <div className="topbar-icons" style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
-//               <FaBell className="topbar-icon" />
-//               <FaCog
-//                 className="topbar-icon cursor-pointer"
-//                 onClick={() => navigate("/app/settings")}
-//               />
-//               <select
-
-
-//                 className="language-select"
-//                 onChange={toggleLang}
-//               >
-//                 <option value="en">EN</option>
-//                 <option value="es">ES</option>
-//               </select>
-//               <button
-//                 onClick={handleLogout}
-//                 style={{
-//                   display: "flex",
-//                   alignItems: "center",
-//                   gap: "6px",
-//                   background: "transparent",
-//                   color: "#ffffffff",
-//                   border: "none",
-//                   fontWeight: "bold",
-//                   cursor: "pointer"
-//                 }}
-//               >
-//                 <FaSignOutAlt className="topbar-icon" />
-//               </button>
-
-
-
-//             </div>
-//           </div>
-
-//           {/* Submenú (solo si no es página de detalle) */}
-//           {!isDetailPage && (
-//             <div className="topbar-submenu">
-//               {activeSubmenu.filter(section => !section.hidden).map((item, index) => (
-//                 <NavLink
-//                   key={index}
-//                   to={item.route}
-//                   className={({ isActive }) =>
-//                     isActive ? "submenu-link active" : "submenu-link"
-//                   }
-//                 >
-//                   {item.label}
-//                 </NavLink>
-//               ))}
-//             </div>
-//           )}
-//         </div>
-
-
-//         {/* Página actual */}
-//         <div className="content">
-//           <Outlet />
-//         </div>
-//       </div>
-//     </div>
-//   );
-// }

frontend/Frontend-Hotel/src/components/Modals/ConfirmationModal.css

@@ -1,12 +1,10 @@
-/* components/Modals/ConfirmationModal.css */
-
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(122, 0, 41, 0.6);
+  background-color: rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14,29 +12,30 @@
 }
 
 .modal {
-  background: white;
+  background: var(--bg-secondary);
   padding: 30px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   width: 450px;
   max-width: 95%;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
-  border: 5px solid #7a0029;
+  box-shadow: var(--shadow-lg);
+  border: 2px solid var(--accent-gold);
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: white;
-  background-color: #7a0029;
+  color: var(--bg-primary);
+  background-color: var(--accent-gold);
   padding: 15px 20px;
-  border-radius: 5px 5px 0 0;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 }
 
 .modal-body {
   padding: 20px;
   font-size: 16px;
   text-align: center;
+  color: var(--text-primary);
 }
 
 .modal-buttons {
@@ -50,24 +49,24 @@
   padding: 10px 25px;
   font-size: 18px;
   border-radius: 30px;
-  border: 2px solid #7a0029;
+  border: 2px solid var(--accent-gold);
   cursor: pointer;
   min-width: 100px;
 }
 
 .modal-button.yes {
-  color: green;
-  background-color: white;
+  color: var(--success);
+  background-color: var(--bg-secondary);
 }
 
 .modal-button.no {
-  color: #7a0029;
-  background-color: white;
+  color: var(--accent-gold);
+  background-color: var(--bg-secondary);
 }
 
 .close-button {
   font-size: 24px;
-  color: white;
+  color: var(--bg-primary);
   background: none;
   border: none;
   cursor: pointer;

frontend/Frontend-Hotel/src/components/Modals/DiscardConfirmModal.css

@@ -13,19 +13,19 @@
 }
 
 .discard-modal-box {
-  background: white;
+  background: var(--bg-secondary);
   padding: 0;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   width: 450px;
   max-width: 90%;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-lg);
   animation: slideUp 0.3s ease-out;
   overflow: hidden;
 }
 
 .discard-modal-header {
-  background-color: #7a0029;
-  color: white;
+  background-color: var(--accent-gold);
+  color: var(--bg-primary);
   padding: 20px;
   text-align: center;
 }
@@ -39,7 +39,7 @@
 .discard-modal-body {
   padding: 24px;
   text-align: center;
-  color: #213547;
+  color: var(--text-primary);
   font-size: 1rem;
   line-height: 1.5;
 }
@@ -52,13 +52,13 @@
   display: flex;
   gap: 12px;
   padding: 20px 24px;
-  border-top: 1px solid #e2e8f0;
+  border-top: 1px solid var(--border-color);
   justify-content: flex-end;
 }
 
 .discard-modal-button {
   padding: 10px 24px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
@@ -68,21 +68,21 @@
 }
 
 .discard-modal-button-cancel {
-  background-color: #e2e8f0;
-  color: #4a5568;
+  background-color: var(--bg-elevated);
+  color: var(--text-secondary);
 }
 
 .discard-modal-button-cancel:hover {
-  background-color: #cbd5e0;
+  background-color: var(--border-color);
 }
 
 .discard-modal-button-confirm {
-  background-color: #7a0029;
-  color: white;
+  background-color: var(--accent-gold);
+  color: var(--bg-primary);
 }
 
 .discard-modal-button-confirm:hover {
-  background-color: #5a001f;
+  background-color: var(--accent-gold-hover);
 }
 
 .discard-modal-button:active {
@@ -108,4 +108,3 @@
     transform: translateY(0);
   }
 }
-

frontend/Frontend-Hotel/src/components/Modals/Modal.css

@@ -12,18 +12,18 @@
 }
 
 .modal-box {
-  background: white;
+  background: var(--bg-secondary);
   padding: 30px;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   width: 350px;
   max-width: 90%;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-lg);
 }
 
 .modal-box h3 {
   margin-top: 0;
   margin-bottom: 15px;
-  color: #111;
+  color: var(--text-primary);
   text-align: center;
 }
 
@@ -32,26 +32,27 @@
   padding: 12px;
   margin-bottom: 15px;
   border: none;
-  border-radius: 12px;
-  background: #f1f1f1;
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
   font-size: 14px;
+  color: var(--text-primary);
 }
 
 .btn {
   width: 100%;
   padding: 12px;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   font-weight: 600;
   margin-bottom: 10px;
   cursor: pointer;
 }
 
 .btn--primary {
-  background-color: #8b0000;
-  color: white;
+  background-color: var(--accent-gold);
+  color: var(--bg-primary);
 }
 
 .btn--primary:hover {
-  background-color: #a00000;
+  background-color: var(--accent-gold-hover);
 }

frontend/Frontend-Hotel/src/components/Navbar/Navbar.css

@@ -1,12 +1,10 @@
-z/* src/styles/Navbar.css */
-
 .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: #4a0d0d; /* Marrón oscuro */
+  background-color: var(--bg-surface);
   padding: 12px 20px;
-  color: white;
+  color: var(--text-primary);
 }
 
 .navbar__brand {
@@ -20,13 +18,13 @@ z/* src/styles/Navbar.css */
 }
 
 .nav__link {
-  color: white;
+  color: var(--text-primary);
   text-decoration: none;
   font-size: 0.95rem;
 }
 
 .nav__link.active {
-  border-bottom: 2px solid #f8d47b; /* Amarillo suave */
+  border-bottom: 2px solid var(--accent-gold);
 }
 
 .navbar__actions {
@@ -37,17 +35,17 @@ z/* src/styles/Navbar.css */
 .btn {
   padding: 6px 12px;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.9rem;
 }
 
 .btn--primary {
-  background-color: #f8d47b; /* Amarillo */
-  color: #4a0d0d;
+  background-color: var(--accent-gold);
+  color: var(--bg-primary);
 }
 
 .btn--secondary {
-  background-color: #ddd;
-  color: #333;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
 }

frontend/Frontend-Hotel/src/components/SummaryCard.css

@@ -1,23 +1,23 @@
 .summary-card-enhanced {
-  background: linear-gradient(145deg, #ffffff, #f8f9fa);
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 20px 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
   min-width: 180px;
   flex: 1;
   transition: all 0.3s ease;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--border-color);
 }
 
 .summary-card-enhanced:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-md);
 }
 
 .summary-card-enhanced.primary {
-  background: linear-gradient(145deg, #ffffff, #f8f9fa);
-  color: #333;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
 }
 
 .card-header {
@@ -32,13 +32,13 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin: 0;
-  color: #666;
+  color: var(--text-secondary);
 }
 
 .card-amount {
   font-size: 28px;
   font-weight: 700;
-  color: #333;
+  color: var(--text-primary);
   margin: 8px 0;
   line-height: 1.2;
 }
@@ -46,10 +46,10 @@
 .card-percentage {
   font-size: 16px;
   font-weight: 600;
-  color: #28a745;
+  color: var(--success);
   margin-top: 8px;
   padding-top: 8px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid var(--border-color);
 }
 
 .card-loading {
@@ -62,8 +62,8 @@
 .loading-spinner {
   width: 40px;
   height: 40px;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-top-color: #fcd200;
+  border: 4px solid var(--border-color);
+  border-top-color: var(--accent-gold);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -97,4 +97,3 @@
     font-size: 12px;
   }
 }
-

frontend/Frontend-Hotel/src/components/Table/Table.css

@@ -1,167 +1,98 @@
-/* .custom-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-}
-
-.custom-table thead tr {
-  background-color: #7b001a;
-  color: white;
-}
-
-.custom-table th,
-.custom-table td {
-  padding: 10px 15px;
-  border: 2px solid #ffcc00;
-  text-align: left;
-}
-
-.custom-table tbody tr {
-  background-color: #ffffff;
-  color: black;
-}
-
-.status-badge {
-  padding: 5px 10px;
-  border-radius: 14px;
-  font-weight: bold;
-  display: inline-block;
-  text-align: center;
-}
-
-.status-badge.active {
-  color: green;
-  border: 1px solid green;
-  background-color: rgba(0, 128, 0, 0.192);
-}
-
-.status-badge.reject {
-  color: red;
-  border: 1px solid rgb(190, 4, 4);
-  background-color: rgba(255, 0, 0, 0.171);
-}
-
-.status-badge.pending {
-  color: rgb(128, 83, 0);
-  border: 1px solid rgb(235, 158, 15);
-  background-color: rgba(248, 176, 42, 0.76);
-}
-
-.status-button.approve {
-  background-color: #009e2db0;
-  color: white;
-  border: none;
-  padding: 4px 12px;
-  border-radius: 2px;
-  font-weight: bold;
-}
-
-.status-button.reject {
-  background-color: #d80404b0;
-  color: white;
-  border: none;
-  padding: 4px 12px;
-  border-radius: 2px;
-  font-weight: bold;
-} */
-
 .custom-table {
   width: 100%;
   border-collapse: collapse;
-  /* font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
-  font-family: 'Franklin Gothic', 'Arial Narrow', Monserrat, sans-serif
+  font-family: var(--font-sans);
 }
 
 .custom-table thead tr {
-  background-color: #7b001a;
-  color: white;
+  background-color: var(--accent-gold);
+  color: var(--bg-primary);
 }
 
-/*Bordes de línea*/
 .custom-table th,
 .custom-table td {
   padding: 10px 15px;
-  border: 2px solid #ffcc00;
+  border: 2px solid var(--accent-gold);
   text-align: left;
 }
 
 .custom-table tbody tr {
-  font-family: montserrat;
-  background-color: #ffffff;
-  color: #515151;
+  font-family: var(--font-sans);
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
 }
 
 .status-badge {
   padding: 5px 10px;
-  border-radius: 14px;
+  border-radius: var(--radius-lg);
   font-weight: bold;
   display: inline-block;
   text-align: center;
 }
 
 .status-badge.active {
-  color: green;
-  border: 1px solid green;
-  background-color: rgba(0, 128, 0, 0.192);
+  color: var(--success);
+  border: 1px solid var(--success);
+  background-color: rgba(34, 197, 94, 0.12);
 }
 
 .status-badge.reject {
-  color: red;
-  border: 1px solid rgb(190, 4, 4);
-  background-color: rgba(255, 0, 0, 0.171);
+  color: var(--error);
+  border: 1px solid var(--error);
+  background-color: rgba(239, 68, 68, 0.12);
 }
 
 .status-badge.pending {
-  color: rgb(128, 83, 0);
-  border: 1px solid rgb(235, 158, 15);
-  background-color: rgba(248, 176, 42, 0.76);
+  color: var(--warning);
+  border: 1px solid var(--warning);
+  background-color: rgba(234, 179, 8, 0.12);
 }
 
 .status-badge.paid {
-  color: green;
-  border: 1px solid green;
-  background-color: rgba(0, 128, 0, 0.192);
+  color: var(--success);
+  border: 1px solid var(--success);
+  background-color: rgba(34, 197, 94, 0.12);
 }
 
 .status-button.approve {
-  background-color: #009e2db0;
-  color: white;
+  background-color: var(--success);
+  color: var(--bg-primary);
   border: none;
   padding: 4px 12px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
   font-weight: bold;
 }
 
 .status-button.reject {
-  background-color: #d80404b0;
-  color: white;
+  background-color: var(--error);
+  color: var(--bg-primary);
   border: none;
   padding: 4px 12px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
   font-weight: bold;
 }
 
 .status-button.pending {
-  background-color: #e2c000;
-  color: white;
+  background-color: var(--warning);
+  color: var(--bg-primary);
   border: none;
   padding: 4px 12px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
   font-weight: bold;
 }
 
 .status-button.paid {
-  background-color: #009e2db0;
-  color: white;
+  background-color: var(--success);
+  color: var(--bg-primary);
   border: none;
   padding: 4px 12px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
   font-weight: bold;
 }
 
 .add-button {
   background-color: transparent;
-  color: #7b001a;
+  color: var(--accent-gold);
   font-weight: bold;
   border: none;
   cursor: pointer;
@@ -172,10 +103,8 @@
   text-decoration: underline;
 }
 
-/*Icono de flecha*/
-
 .custom-table a:hover {
-  color: #0055aa;
+  color: var(--info);
 }
 
 .custom-table a:hover svg {

frontend/Frontend-Hotel/src/constants/menuconfig.js

@@ -11,20 +11,6 @@ export const menuConfig = {
       { label: "Guests", spanish_label: "Huespedes", route: "/app/guests" },
     ],
   },
-  dashboards: {
-    label: "Dashboards",
-    spanish_label: "Tableros",
-    basePath: "/app/income",
-    submenu: [
-      { label: "Little Hotelier", spanish_label: "Little Hotelier", route: "/app/income" },
-      { label: "Hotel P&L", spanish_label: "P&L Hotel", route: "/app/hotelpl" },
-      { label: "Room Analysis", spanish_label: "Análisis de Habitaciones", route: "/app/room-analysis" },
-      { label: "P&L Restaurant", spanish_label: "P&L Restaurante", route: "/app/restaurantpl" },
-      { label: "Restaurant Analysis", spanish_label: "Análisis de Restaurante", route: "/app/restaurant-analysis" },
-      // { label: "Budget", spanish_label: "Presupuesto", route: "/app/budget" },
-      // { label: "Expenses", spanish_label: "Gastos", route: "/app/expenses" },
-    ],
-  },
   housekeeper: {
     label: "Housekeeper",
     spanish_label: "Cuidador de Habitaciones",

frontend/Frontend-Hotel/src/context/ThemeContext.jsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem("hotel-theme") || "dark";
+  });
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("hotel-theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}

frontend/Frontend-Hotel/src/index.css

@@ -1,19 +1,21 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
+body {
+  margin: 0;
+  padding: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  overflow-x: hidden;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -22,76 +24,16 @@
 
 a {
   font-weight: 500;
-  color: #cc0404de;
-  text-decoration: inherit;
+  color: var(--accent-gold);
+  text-decoration: none;
 }
 
 a:hover {
-  color: #ff8513;
-}
-
-/* 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  height: 100vh;      
-}
- */
-
-body {
-  margin: 0;
-  padding: 0;
-  min-width: 320px;
-  min-height: 100vh;
-  height: auto;
-  overflow-x: hidden;
-  background-color: #f5f5f5;
-  display: block;
+  color: var(--accent-gold-hover);
 }
 
 h1 {
-  font-size: 3.2em;
+  font-size: 2.4rem;
   line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:hover {
-  border-color: #791002;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-
-  a:hover {
-    color: #640f04;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
+  font-family: var(--font-display);
 }

frontend/Frontend-Hotel/src/main.jsx

@@ -3,14 +3,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App.jsx";
-//import { AuthProvider } from "./context/AuthContext.jsx";
 import "./styles/global.css";
-import './index.css'; // o './styles/tailwind.css'
+import './index.css';
 import { AuthProvider } from "./context/AuthContext.jsx";
 import { LangProvider } from "./context/LenguageContext.jsx";
-
+import { ThemeProvider } from "./context/ThemeContext.jsx";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
+    <ThemeProvider>
         <LangProvider>
             <AuthProvider>
                 <BrowserRouter>
@@ -18,5 +18,5 @@ ReactDOM.createRoot(document.getElementById("root")).render(
                 </BrowserRouter>
             </AuthProvider>
         </LangProvider>
-
+    </ThemeProvider>
 );

frontend/Frontend-Hotel/src/pages/Dashboard/HotelPL.css

@@ -8,7 +8,7 @@
 }
 
 .page-title {
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-size: 28px;
   font-weight: 700;
   margin: 0;
@@ -21,14 +21,14 @@
   justify-content: center;
   align-items: center;
   padding: 60px 20px;
-  color: #666;
+  color: var(--text-secondary);
 }
 
 .loading-spinner {
   width: 40px;
   height: 40px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #5D1A2A;
+  border: 4px solid var(--border-color);
+  border-top: 4px solid var(--accent-gold);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -46,19 +46,19 @@
 }
 
 .pl-section {
-  background-color: white;
-  border-radius: 8px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-sm);
   padding: 24px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  border: 1px solid #e5e7eb;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
 }
 
 .section-title {
   margin: 0 0 20px 0;
   font-size: 22px;
   font-weight: 600;
-  color: #374151;
-  border-bottom: 2px solid #5D1A2A;
+  color: var(--text-primary);
+  border-bottom: 2px solid var(--accent-gold);
   padding-bottom: 10px;
 }
 
@@ -68,7 +68,7 @@
   gap: 16px;
   align-items: center;
   margin: 0 0 20px 0;
-  border-bottom: 2px solid #5D1A2A;
+  border-bottom: 2px solid var(--accent-gold);
   padding-bottom: 10px;
 }
 
@@ -81,7 +81,7 @@
 .section-header-percentage {
   font-size: 16px;
   font-weight: 700;
-  color: #5D1A2A;
+  color: var(--accent-gold);
   text-align: left;
   padding-left: 212px;
 }
@@ -111,38 +111,37 @@
 .form-label {
   font-weight: 600;
   font-size: 16px;
-  color: #374151;
+  color: var(--text-primary);
   min-width: 200px;
   flex-shrink: 0;
 }
 
 .form-label.label-bold {
   font-weight: 900;
-  color: #000;
+  color: var(--text-primary);
   font-size: 18px;
 }
 
-
 .form-input {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 16px;
-  background-color: #f9fafb;
-  color: #111827;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   font-weight: 500;
   box-sizing: border-box;
 }
 
 .form-input:focus {
   outline: none;
-  border-color: #5D1A2A;
+  border-color: var(--accent-gold);
 }
 
 .form-input.highlight {
-  background-color: #fef3c7;
-  border-color: #fbbf24;
+  background-color: var(--accent-gold-muted);
+  border-color: var(--accent-gold);
   font-weight: 700;
   font-size: 15px;
 }
@@ -150,7 +149,7 @@
 .no-data-message {
   text-align: center;
   padding: 40px 20px;
-  color: #9ca3af;
+  color: var(--text-muted);
   font-size: 14px;
 }
 
@@ -209,7 +208,6 @@
   }
 }
 
-/* Metrics Grid Styles */
 .metrics-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -218,21 +216,21 @@
 }
 
 .metric-card {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   transition: all 0.2s ease;
 }
 
 .metric-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
   transform: translateY(-2px);
 }
 
 .metric-card h3 {
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-size: 16px;
   font-weight: 600;
   margin: 0 0 16px 0;
@@ -251,29 +249,29 @@
 .count-value {
   font-size: 32px;
   font-weight: 700;
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .currency-value {
   font-size: 28px;
   font-weight: 700;
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .total-value {
-  color: #5D1A2A;
+  color: var(--accent-gold);
   font-size: 32px;
 }
 
 .loading-skeleton {
   width: 120px;
   height: 40px;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border-color) 50%, var(--bg-elevated) 75%);
   background-size: 200% 100%;
   animation: loading 1.5s infinite;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 @keyframes loading {

frontend/Frontend-Hotel/src/pages/Dashboard/Income.css

@@ -8,7 +8,7 @@
 }
 
 .page-title {
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-size: 28px;
   font-weight: 700;
   margin: 0;
@@ -17,12 +17,12 @@
 }
 
 .summary-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 20px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-xl);
   padding: 24px;
   margin-bottom: 32px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
 }
 
 .summary-cards-wrapper {
@@ -32,10 +32,10 @@
 }
 
 .table-section {
-  background: white;
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
   min-height: 400px;
 }
 
@@ -51,14 +51,14 @@
 .loading-spinner-large {
   width: 60px;
   height: 60px;
-  border: 5px solid rgba(0, 0, 0, 0.1);
-  border-top-color: #fcd200;
+  border: 5px solid var(--border-color);
+  border-top-color: var(--accent-gold);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
 
 .table-loading p {
-  color: #666;
+  color: var(--text-secondary);
   font-size: 16px;
   font-weight: 500;
   margin: 0;
@@ -105,7 +105,7 @@
 
   .summary-section {
     padding: 16px;
-    border-radius: 16px;
+    border-radius: var(--radius-lg);
   }
 
   .summary-cards-wrapper {
@@ -115,7 +115,7 @@
 
   .table-section {
     padding: 16px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
   }
 
   .table-loading {
@@ -141,4 +141,3 @@
     padding: 12px;
   }
 }
-

frontend/Frontend-Hotel/src/pages/Expenses/EditExpense.css

@@ -1,12 +1,13 @@
 .new-expense-container {
-  color: #333;
+  color: var(--text-primary);
+  padding: 20px;
 }
 
 .form-card {
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  padding: 24px;
+  box-shadow: var(--shadow-sm);
 }
 
 .form-header {
@@ -19,33 +20,11 @@
 .form-id {
   font-weight: bold;
   font-size: 18px;
-}
-
-.back-button {
-  background-color: #6c757d;
-  color: #fff;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 14px;
-  transition: background-color 0.2s;
-}
-
-.back-button:hover {
-  background-color: #5a6268;
-}
-
-.back-button:active {
-  background-color: #545b62;
+  margin-bottom: 10px;
 }
 
 .form-grid {
   display: grid;
-  /* grid-template-columns: repeat(3, 1fr); */
   grid-template-columns: 1fr 1fr;
   gap: 15px;
   margin-bottom: 30px;
@@ -56,72 +35,42 @@
   font-size: 14px;
   margin-bottom: 5px;
   display: block;
-  color: #333;
+  color: var(--text-primary);
 }
 
 .form-grid input,
 .form-grid select {
   width: 100%;
   padding: 6px 4px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 14px;
-  background-color: #f9f9f9;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
 }
 
-.save-button-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
-.save-button {
-  background-color: #ffcb05;
-  color: #fff;
-  padding: 10px 30px;
-  font-weight: bold;
+.back-button {
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   border: none;
-  border-radius: 25px;
-  font-size: 16px;
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 14px;
+  transition: background-color 0.2s;
 }
 
-.save-button:hover {
-  background-color: #f4b400;
+.back-button:hover {
+  background-color: var(--bg-surface);
 }
 
-.product-table-section {
-  margin-top: 25px;
+.back-button:active {
+  background-color: var(--bg-surface);
 }
 
-
-/*Actualización de New Expense con tabla*/
-
-/* src/pages/Expenses/NewExpense.css */
-
-.new-expense-container {
-  padding: 20px;
-}
-
-.form-card {
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 24px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.1);
-}
-
-.form-id {
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-/* .form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
-} */
-
 .save-button-wrapper {
   margin-top: 20px;
   display: flex;
@@ -129,13 +78,18 @@
 }
 
 .save-button {
-  background-color: #ffc107; /* amarillo/dorado */
-  color: #000; /* ajustar según contraste */
+  background-color: var(--accent-gold);
+  color: #000;
   border: none;
   padding: 10px 24px;
   border-radius: 20px;
   font-weight: bold;
   cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.save-button:hover {
+  background-color: var(--accent-gold-hover);
 }
 
 .product-table-section {
@@ -149,34 +103,34 @@
 }
 
 .product-table th, .product-table td {
-  border: 1px solid #d4af37; /* dorado */
+  border: 1px solid var(--accent-gold);
   padding: 8px;
   text-align: center;
 }
 
 .product-table th {
-  background-color: #800020; /* bordo/morado oscuro, según tus imágenes */
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
   font-weight: bold;
 }
 
 .add-product-row {
   cursor: pointer;
-  color: #d4af37; /* dorado */
+  color: var(--accent-gold);
   text-align: center;
   padding: 10px;
   font-style: italic;
 }
 
 .tax-pill {
-  background-color: white;
-  border: 1px solid #d4af37;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--accent-gold);
   border-radius: 12px;
   padding: 2px 6px;
-  color: #800020;
+  color: var(--accent-gold);
 }
 
 .product-table tfoot td {
-  border-top: 2px solid #d4af37;
+  border-top: 2px solid var(--accent-gold);
   padding: 8px;
 }

frontend/Frontend-Hotel/src/pages/Expenses/ExpenseDetail.css

@@ -1,24 +1,23 @@
-
 .expense-detail {
-  background-color: #fff;
+  background-color: var(--bg-secondary);
   padding: 2rem;
   font-family: 'Montserrat';
   max-width: 1000px;
   margin: 2rem auto;
-  border-radius: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
-  border: 1px solid #e0e0e0;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
 }
 
 .expense-detail h2 {
-  color: #000;
+  color: var(--text-primary);
   margin-bottom: 1.5rem;
   font-weight: 700;
   font-size: 1.8rem;
 }
 
 .expense-detail h3 {
-  color: #000;
+  color: var(--text-primary);
 }
 
 .expense-detail-grid {
@@ -30,13 +29,13 @@
 
 .expense-detail label {
   font-weight: 600;
-  color: #000;
+  color: var(--text-primary);
   margin-bottom: 0.4rem;
   display: block;
 }
 
 .expense-detail p {
-  color: #000;
+  color: var(--text-primary);
 }
 
 .expense-detail input[type="text"],
@@ -45,36 +44,37 @@
   width: 90%;
   max-width: 280px;
   padding: 10px 14px;
-  border: 1px solid #ccc;
-  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
   font-size: 14px;
   font-family: 'Montserrat';
-  background-color: #f9f9f9;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   transition: border-color 0.3s ease;
 }
 
 .expense-detail input:focus {
   outline: none;
-  border-color: #f1c40f;
-  background-color: #fff;
-  box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.2);
+  border-color: var(--accent-gold);
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--accent-gold-muted);
 }
 
 .expense-detail button {
   margin-top: 2rem;
   padding: 12px 24px;
-  background-color: #f1c40f;
+  background-color: var(--accent-gold);
   border: none;
   color: #000;
   font-weight: 700;
   font-size: 16px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
 
 .expense-detail button:hover {
-  background-color: #d4ac0d;
+  background-color: var(--accent-gold-hover);
 }
 
 .products-section {
@@ -84,43 +84,45 @@
 .products-section h3 {
   margin-bottom: 1rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text-primary);
 }
 
 .product-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
-  border: 1px solid #f1c40f;
+  border: 1px solid var(--accent-gold);
 }
 
 .product-table th,
 .product-table td {
-  border: 1px solid #f1c40f;
+  border: 1px solid var(--accent-gold);
   padding: 12px;
   text-align: center;
 }
 
 .product-table th {
-  background-color: #800020;
-  color: #fff;
+  background-color: var(--accent-gold);
+  color: #000;
   font-weight: 700;
 }
 
 .product-table td {
-  background-color: #fff;
+  background-color: var(--bg-secondary);
 }
 
 .product-table input[type="number"] {
   width: 80px;
   padding: 6px;
   text-align: center;
-  border-radius: 8px;
-  border: 1px solid #ccc;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
 }
 
 .success-message {
-  color: green;
+  color: var(--success);
   margin-top: 1rem;
   font-weight: 600;
 }
@@ -133,69 +135,5 @@
 }
 
 .error {
-  color: red;
-}
-
-
-/* .expense-detail-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-} */
-
-/* .expense-detail-container {
->>>>>>> Stashed changes
-  padding: 2rem;
-  max-width: 900px;
-  margin: auto;
-  background: white;
-  border-radius: 12px;
-}
-
-.expense-form {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-}
-
-.form-group {
-  flex: 1 1 45%;
-  display: flex;
-  flex-direction: column;
-}
-
-label {
-  margin-bottom: 0.3rem;
-  font-weight: 600;
-}
-
-input, select {
-  padding: 0.5rem;
-  border-radius: 6px;
-  border: 1px solid #ccc;
-}
-
-.save-button {
-  margin-top: 1rem;
-  padding: 0.75rem 2rem;
-  background-color: #f4b400;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: not-allowed;
-}
-
-.amount-warning-banner {
-  background-color: #fff3cd;
-  color: #856404;
-  border: 1px solid #ffeeba;
-  padding: 1rem;
-  border-radius: 8px;
-  margin-bottom: 1rem;
-  font-weight: 500;
-}
-.amount-warning-banner::before {
-  content: "⚠️";
-  margin-right: 0.5rem;
+  color: var(--error);
 }

frontend/Frontend-Hotel/src/pages/Expenses/MonthlyPayments.css

@@ -1,10 +1,10 @@
 .monthly-payments-page .page-filters {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -43,7 +43,7 @@
 @media (max-width: 768px) {
   .monthly-payments-page .page-filters {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 

frontend/Frontend-Hotel/src/pages/Expenses/MonthlyReport.css

@@ -1,10 +1,10 @@
 .monthly-report-page .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -36,11 +36,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -50,11 +49,11 @@
 
 .monthly-report-page .filters-row.second-row .clear-filters-btn:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .monthly-report-page .filters-row.second-row .clear-filters-btn:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .monthly-report-page .filters-row .filter-search {
@@ -64,11 +63,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
   font-weight: 600;
   transition: all 0.2s ease;
   height: 42px;
@@ -78,11 +76,11 @@
 
 .monthly-report-page .filters-row .filter-search:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .monthly-report-page .filters-row .filter-search:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .monthly-report-page .date-input-group {
@@ -95,21 +93,19 @@
 .monthly-report-page .date-label {
   font-size: 11px;
   font-weight: 700;
-  color: #666;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .monthly-report-page .date-input {
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -119,17 +115,17 @@
 
 .monthly-report-page .date-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .monthly-report-page .date-input:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 @media (max-width: 768px) {
   .monthly-report-page .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 
@@ -152,11 +148,10 @@
     padding: 10px 16px;
     border: none;
     border-radius: 30px;
-    background-color: white;
-    box-shadow: 0 0 0 2px #f4f4f4;
+    background-color: var(--bg-secondary);
+    box-shadow: 0 0 0 2px var(--border-color);
     font-size: 14px;
-    color: #333;
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    color: var(--text-primary);
     font-weight: 600;
     transition: all 0.2s ease;
     height: 42px;
@@ -166,11 +161,11 @@
 
   .monthly-report-page .filter-search:focus {
     outline: none;
-    box-shadow: 0 0 0 2px #fcd200;
+    box-shadow: 0 0 0 2px var(--accent-gold);
   }
 
   .monthly-report-page .filter-search:hover {
-    box-shadow: 0 0 0 2px #e6e6e6;
+    box-shadow: 0 0 0 2px var(--border-color);
   }
 
 
@@ -198,11 +193,10 @@
     padding: 10px 16px;
     border: none;
     border-radius: 30px;
-    background-color: white;
-    box-shadow: 0 0 0 2px #f4f4f4;
+    background-color: var(--bg-secondary);
+    box-shadow: 0 0 0 2px var(--border-color);
     font-size: 14px;
-    color: #333;
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    color: var(--text-primary);
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -212,10 +206,10 @@
 
   .monthly-report-page .clear-filters-btn:focus {
     outline: none;
-    box-shadow: 0 0 0 2px #fcd200;
+    box-shadow: 0 0 0 2px var(--accent-gold);
   }
 
   .monthly-report-page .clear-filters-btn:hover {
-    box-shadow: 0 0 0 2px #e6e6e6;
+    box-shadow: 0 0 0 2px var(--border-color);
   }
 }

frontend/Frontend-Hotel/src/pages/Expenses/NewExpense.css

@@ -3,7 +3,7 @@
 }
 
 .new-expense-container {
-  color: #333;
+  color: var(--text-primary);
   padding: 20px;
 }
 
@@ -12,10 +12,10 @@
 }
 
 .form-card {
-  background-color: #fff;
-  border-radius: 10px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
   padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 .form-header {
@@ -31,11 +31,11 @@
 }
 
 .back-button {
-  background-color: #6c757d;
-  color: #fff;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   border: none;
   padding: 8px 16px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -45,11 +45,11 @@
 }
 
 .back-button:hover {
-  background-color: #5a6268;
+  background-color: var(--bg-surface);
 }
 
 .back-button:active {
-  background-color: #545b62;
+  background-color: var(--bg-surface);
 }
 
 .form-grid {
@@ -70,17 +70,18 @@
   font-size: 14px;
   margin-bottom: 5px;
   display: block;
-  color: #333;
+  color: var(--text-primary);
 }
 
 .form-grid input,
 .form-grid select {
   width: 100%;
   padding: 8px 10px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 14px;
-  background-color: #f9f9f9;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   transition: border-color 0.2s, background-color 0.2s;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -90,13 +91,13 @@
 .form-grid input:focus,
 .form-grid select:focus {
   outline: none;
-  border-color: #5D1A2A;
-  background-color: #fff;
+  border-color: var(--accent-gold);
+  background-color: var(--bg-secondary);
 }
 
 .form-grid input:disabled,
 .form-grid select:disabled {
-  background-color: #e9ecef;
+  background-color: var(--bg-surface);
   cursor: not-allowed;
   opacity: 0.7;
 }
@@ -132,7 +133,7 @@
   margin-bottom: 0 !important;
   font-weight: bold;
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   line-height: 1;
 }
 
@@ -142,7 +143,7 @@
   min-width: 14px;
   min-height: 14px;
   cursor: pointer;
-  accent-color: #5D1A2A;
+  accent-color: var(--accent-gold);
   flex-shrink: 0;
   margin: 0;
 }
@@ -154,7 +155,7 @@
 }
 
 .save-button {
-  background-color: #ffc107;
+  background-color: var(--accent-gold);
   color: #000;
   padding: 10px 30px;
   font-weight: bold;
@@ -166,7 +167,7 @@
 }
 
 .save-button:hover {
-  background-color: #f4b400;
+  background-color: var(--accent-gold-hover);
   transform: translateY(-1px);
 }
 
@@ -175,8 +176,8 @@
 }
 
 .save-button:disabled {
-  background-color: #e0e0e0;
-  color: #999;
+  background-color: var(--border-color);
+  color: var(--text-muted);
   cursor: not-allowed;
   transform: none;
 }
@@ -192,35 +193,35 @@
 }
 
 .product-table th, .product-table td {
-  border: 1px solid #d4af37;
+  border: 1px solid var(--accent-gold);
   padding: 8px;
   text-align: center;
 }
 
 .product-table th {
-  background-color: #800020;
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
   font-weight: bold;
 }
 
 .add-product-row {
   cursor: pointer;
-  color: #d4af37;
+  color: var(--accent-gold);
   text-align: center;
   padding: 10px;
   font-style: italic;
 }
 
 .tax-pill {
-  background-color: white;
-  border: 1px solid #d4af37;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--accent-gold);
   border-radius: 12px;
   padding: 2px 6px;
-  color: #800020;
+  color: var(--accent-gold);
 }
 
 .product-table tfoot td {
-  border-top: 2px solid #d4af37;
+  border-top: 2px solid var(--accent-gold);
   padding: 8px;
 }
 
@@ -228,11 +229,11 @@
   width: 100%;
   margin-top: 30px;
   padding-top: 20px;
-  border-top: 2px solid #e0e0e0;
+  border-top: 2px solid var(--border-color);
 }
 
 .add-products h3 {
-  color: #333;
+  color: var(--text-primary);
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 15px;

frontend/Frontend-Hotel/src/pages/Expenses/NewMonthlyPayment.css

@@ -1,86 +1,15 @@
 
 .new-expense-container {
-  color: #333;
-}
-
-.form-card {
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.form-id {
-  font-weight: bold;
-  margin-bottom: 20px;
-  font-size: 24px;
-}
-
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  margin-bottom: 30px;
-}
-
-.form-grid label {
-  font-weight: bold;
-  font-size: 14px;
-  margin-bottom: 5px;
-  display: block;
-  color: #333;
-}
-
-.form-grid input,
-.form-grid select {
-  width: 100%;
-  padding: 6px 4px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  font-size: 14px;
-  background-color: #f9f9f9;
-}
-
-.save-button-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
-.save-button {
-  background-color: #ffcb05;
-  color: #fff;
-  padding: 10px 30px;
-  font-weight: bold;
-  border: none;
-  border-radius: 25px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.save-button:hover {
-  background-color: #f4b400;
-}
-
-.product-table-section {
-  margin-top: 25px;
-}
-
-
-/*Actualización de New Expense con tabla*/
-
-/* src/pages/Expenses/NewExpense.css */
-
-.new-expense-container {
+  color: var(--text-primary);
   padding: 20px;
 }
 
 .form-card {
-  background-color: #fff;
-  border-radius: 8px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
   padding: 24px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-color);
 }
 
 .form-grid {
@@ -96,13 +25,43 @@
 }
 
 .save-button {
-  background-color: #ffc107; /* amarillo/dorado */
-  color: #000; /* ajustar según contraste */
+  background-color: var(--accent-gold);
+  color: #000;
   border: none;
   padding: 10px 24px;
-  border-radius: 20px;
+  border-radius: var(--radius-xl);
   font-weight: bold;
   cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.save-button:hover {
+  background-color: var(--accent-gold-hover);
+}
+
+.form-id {
+  font-weight: bold;
+  margin-bottom: 20px;
+  font-size: 24px;
+}
+
+.form-grid label {
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: 5px;
+  display: block;
+  color: var(--text-primary);
+}
+
+.form-grid input,
+.form-grid select {
+  width: 100%;
+  padding: 6px 4px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
 }
 
 .product-table-section {
@@ -116,34 +75,34 @@
 }
 
 .product-table th, .product-table td {
-  border: 1px solid #d4af37; /* dorado */
+  border: 1px solid var(--accent-gold);
   padding: 8px;
   text-align: center;
 }
 
 .product-table th {
-  background-color: #800020; /* bordo/morado oscuro, según tus imágenes */
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
   font-weight: bold;
 }
 
 .add-product-row {
   cursor: pointer;
-  color: #d4af37; /* dorado */
+  color: var(--accent-gold);
   text-align: center;
   padding: 10px;
   font-style: italic;
 }
 
 .tax-pill {
-  background-color: white;
-  border: 1px solid #d4af37;
+  background-color: var(--bg-elevated);
+  border: 1px solid var(--accent-gold);
   border-radius: 12px;
   padding: 2px 6px;
-  color: #800020;
+  color: var(--accent-gold);
 }
 
 .product-table tfoot td {
-  border-top: 2px solid #d4af37;
+  border-top: 2px solid var(--accent-gold);
   padding: 8px;
 }

frontend/Frontend-Hotel/src/pages/Expenses/NewSuppliers.css

@@ -1,13 +1,14 @@
 .new-supplier-container {
   padding: 20px;
-  color: #333;
+  color: var(--text-primary);
 }
 
 .form-card {
-  background-color: #fff;
-  border-radius: 10px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
   padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-color);
 }
 
 .form-id {
@@ -28,16 +29,17 @@
   font-size: 14px;
   margin-bottom: 5px;
   display: block;
-  color: #333;
+  color: var(--text-primary);
 }
 
 .form-grid input {
   width: 100%;
   padding: 6px 4px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 14px;
-  background-color: #f9f9f9;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
 }
 
 .save-button-wrapper {
@@ -47,17 +49,17 @@
 }
 
 .save-button {
-  background-color: #ffcb05;
-  color: #fff;
+  background-color: var(--accent-gold);
+  color: #000;
   padding: 10px 30px;
   font-weight: bold;
   border: none;
-  border-radius: 25px;
+  border-radius: var(--radius-xl);
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
 
 .save-button:hover {
-  background-color: #f4b400;
+  background-color: var(--accent-gold-hover);
 }

frontend/Frontend-Hotel/src/pages/Expenses/Payments.css

@@ -8,8 +8,9 @@
   gap: 12px;
   margin: 20px 0;
   padding: 15px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
+  background-color: var(--bg-elevated);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
   align-items: stretch;
 }
 
@@ -44,10 +45,11 @@
   height: 38px;
   box-sizing: border-box;
   padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 14px;
-  background-color: #fff;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
   margin: 0;
 }
 
@@ -56,10 +58,11 @@
   height: 38px;
   box-sizing: border-box;
   padding: 8px 12px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color);
   border-radius: 30px;
   font-size: 14px;
-  background-color: #fff;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
   margin: 0;
   line-height: normal;
 }
@@ -74,31 +77,32 @@
   font-weight: bold;
   font-size: 14px;
   margin-bottom: 5px;
-  color: #333;
+  color: var(--text-primary);
 }
 
 .filter-group select,
 .filter-group input {
   padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 14px;
-  background-color: #fff;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
 }
 
 .filter-group select:focus,
 .filter-group input:focus {
   outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+  border-color: var(--accent-gold);
+  box-shadow: 0 0 0 2px var(--accent-gold-muted);
 }
 
 .clear-filters-btn {
-  background-color: #6c757d;
-  color: white;
-  border: none;
+  background-color: var(--bg-elevated);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
   padding: 8px 16px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 14px;
   align-self: end;
@@ -106,13 +110,14 @@
 }
 
 .clear-filters-btn:hover {
-  background-color: #5a6268;
+  background-color: var(--bg-surface);
+  color: var(--text-primary);
 }
 
 @media (max-width: 768px) {
   .page-filters {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 
@@ -134,10 +139,11 @@
     height: 38px;
     box-sizing: border-box;
     padding: 8px 12px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
     font-size: 14px;
-    background-color: #fff;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
     margin: 0;
   }
 
@@ -146,10 +152,11 @@
     height: 38px;
     box-sizing: border-box;
     padding: 8px 12px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
     font-size: 14px;
-    background-color: #fff;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
     margin: 0;
     line-height: normal;
   }
@@ -182,30 +189,31 @@
 }
 
 .summary-card {
-  background-color: #fff;
+  background-color: var(--bg-secondary);
   padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   text-align: center;
 }
 
 .summary-card strong {
   display: block;
   font-size: 14px;
-  color: #666;
+  color: var(--text-secondary);
   margin-bottom: 10px;
 }
 
 .summary-card div {
   font-size: 24px;
   font-weight: bold;
-  color: #333;
+  color: var(--text-primary);
 }
 
 .status-badge {
   padding: 6px 12px;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 12px;
   font-weight: bold;
@@ -213,43 +221,43 @@
 }
 
 .status-badge.active {
-  background-color: #28a745;
-  color: white;
+  background-color: rgba(34, 197, 94, 0.15);
+  color: var(--success);
 }
 
 .status-badge.active:hover {
-  background-color: #218838;
+  background-color: rgba(34, 197, 94, 0.25);
 }
 
 .status-badge.reject {
-  background-color: #dc3545;
-  color: white;
+  background-color: rgba(239, 68, 68, 0.15);
+  color: var(--error);
 }
 
 .status-badge.reject:hover {
-  background-color: #c82333;
+  background-color: rgba(239, 68, 68, 0.25);
 }
 
 .status-button {
   padding: 4px 8px;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;
 }
 
 .status-button.approved {
-  background-color: #28a745;
-  color: white;
+  background-color: rgba(34, 197, 94, 0.15);
+  color: var(--success);
 }
 
 .status-button.pending {
-  background-color: #ffc107;
-  color: black;
+  background-color: rgba(234, 179, 8, 0.15);
+  color: var(--warning);
 }
 
 .status-button.rejected {
-  background-color: #dc3545;
-  color: white;
+  background-color: rgba(239, 68, 68, 0.15);
+  color: var(--error);
 }

frontend/Frontend-Hotel/src/pages/Expenses/ReportExpense.css

@@ -8,19 +8,18 @@
 }
 
 .page-title {
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-size: 28px;
   font-weight: 700;
   margin: 0;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   letter-spacing: -0.5px;
 }
 
 .report-page .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -53,11 +52,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
   font-weight: 600;
   transition: all 0.2s ease;
   height: 42px;
@@ -79,11 +77,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
   font-weight: 600;
   transition: all 0.2s ease;
   height: 42px;
@@ -92,28 +89,27 @@
 }
 
 .filter-search::placeholder {
-  color: #999;
+  color: var(--text-muted);
 }
 
 .filter-search:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .filter-search:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .filter-select {
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   min-width: 180px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -123,11 +119,11 @@
 
 .filter-select:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .filter-select:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .date-filter-group {
@@ -139,10 +135,9 @@
 .date-filter-label {
   font-size: 11px;
   font-weight: 700;
-  color: #666;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .date-inputs {
@@ -154,12 +149,11 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   min-width: 145px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -169,32 +163,31 @@
 
 .date-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .date-input:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .clear-filters-btn {
   padding: 10px 20px;
-  background-color: white;
-  border: 2px solid #e0e0e0;
+  background-color: var(--bg-secondary);
+  border: 2px solid var(--border-color);
   border-radius: 30px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
-  color: #666;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-secondary);
   transition: all 0.2s ease;
   height: 42px;
   box-sizing: border-box;
 }
 
 .clear-filters-btn:hover {
-  background-color: #f5f5f5;
-  border-color: #ccc;
-  color: #333;
+  background-color: var(--bg-elevated);
+  border-color: var(--border-color);
+  color: var(--text-primary);
 }
 
 .summary-actions-section {
@@ -213,19 +206,19 @@
 }
 
 .info-card {
-  background: linear-gradient(145deg, #ffffff, #f8f9fa);
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 20px 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
   min-width: 180px;
   flex: 1;
   transition: all 0.3s ease;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--border-color);
 }
 
 .info-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-md);
 }
 
 .info-card .card-title {
@@ -234,22 +227,23 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin: 0 0 12px 0;
-  color: #666;
+  color: var(--text-secondary);
 }
 
 .info-card .card-value {
   font-size: 28px;
   font-weight: 700;
-  color: #333;
+  color: var(--text-primary);
   line-height: 1.2;
 }
 
 
 .table-section {
-  background: white;
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   min-height: 400px;
 }
 
@@ -274,7 +268,7 @@
 
   .report-page .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 
@@ -297,11 +291,10 @@
     padding: 10px 16px;
     border: none;
     border-radius: 30px;
-    background-color: white;
-    box-shadow: 0 0 0 2px #f4f4f4;
+    background-color: var(--bg-secondary);
+    box-shadow: 0 0 0 2px var(--border-color);
     font-size: 14px;
-    color: #333;
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    color: var(--text-primary);
     font-weight: 600;
     transition: all 0.2s ease;
     height: 42px;
@@ -346,7 +339,7 @@
 
   .table-section {
     padding: 16px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
   }
 }
 
@@ -359,4 +352,3 @@
     padding: 12px;
   }
 }
-

frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Approved.css

@@ -8,7 +8,7 @@
 }
 
 .page-title {
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-size: 28px;
   font-weight: 700;
   margin: 0;
@@ -17,12 +17,12 @@
 }
 
 .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
@@ -38,10 +38,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   min-width: 200px;
   max-width: 300px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -54,26 +54,26 @@
 }
 
 .filter-search::placeholder {
-  color: #999;
+  color: var(--text-muted);
 }
 
 .filter-search:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .filter-search:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .filter-select {
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   min-width: 180px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 600;
@@ -85,22 +85,22 @@
 
 .filter-select:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .filter-select:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .clear-filters-btn {
   padding: 10px 20px;
-  background-color: white;
-  border: 2px solid #e0e0e0;
+  background-color: var(--bg-elevated);
+  border: 2px solid var(--border-color);
   border-radius: 30px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
-  color: #666;
+  color: var(--text-secondary);
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   transition: all 0.2s ease;
   height: 42px;
@@ -109,9 +109,9 @@
 }
 
 .clear-filters-btn:hover {
-  background-color: #f5f5f5;
-  border-color: #ccc;
-  color: #333;
+  background-color: var(--bg-secondary);
+  border-color: var(--border-color);
+  color: var(--text-primary);
 }
 
 .summary-cards-wrapper {
@@ -122,19 +122,19 @@
 }
 
 .info-card {
-  background: linear-gradient(145deg, #ffffff, #f8f9fa);
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 20px 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
   min-width: 180px;
   flex: 1;
   transition: all 0.3s ease;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--border-color);
 }
 
 .info-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-md);
 }
 
 .info-card .card-title {
@@ -143,21 +143,21 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin: 0 0 12px 0;
-  color: #666;
+  color: var(--text-secondary);
 }
 
 .info-card .card-value {
   font-size: 28px;
   font-weight: 700;
-  color: #333;
+  color: var(--text-primary);
   line-height: 1.2;
 }
 
 .table-section {
-  background: white;
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
   min-height: 400px;
 }
 
@@ -186,7 +186,7 @@
 
   .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     flex-direction: column;
     align-items: stretch;
     gap: 10px;
@@ -211,7 +211,7 @@
 
   .table-section {
     padding: 16px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
   }
 }
 
@@ -228,4 +228,3 @@
     padding: 12px;
   }
 }
-

frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Rejected.css

@@ -8,7 +8,7 @@
 }
 
 .page-title {
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-size: 28px;
   font-weight: 700;
   margin: 0;
@@ -17,12 +17,12 @@
 }
 
 .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
@@ -38,10 +38,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   min-width: 200px;
   max-width: 300px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -54,26 +54,26 @@
 }
 
 .filter-search::placeholder {
-  color: #999;
+  color: var(--text-muted);
 }
 
 .filter-search:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .filter-search:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .filter-select {
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   min-width: 180px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 600;
@@ -85,22 +85,22 @@
 
 .filter-select:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .filter-select:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .clear-filters-btn {
   padding: 10px 20px;
-  background-color: white;
-  border: 2px solid #e0e0e0;
+  background-color: var(--bg-elevated);
+  border: 2px solid var(--border-color);
   border-radius: 30px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
-  color: #666;
+  color: var(--text-secondary);
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   transition: all 0.2s ease;
   height: 42px;
@@ -109,9 +109,9 @@
 }
 
 .clear-filters-btn:hover {
-  background-color: #f5f5f5;
-  border-color: #ccc;
-  color: #333;
+  background-color: var(--bg-secondary);
+  border-color: var(--border-color);
+  color: var(--text-primary);
 }
 
 .summary-cards-wrapper {
@@ -122,19 +122,19 @@
 }
 
 .info-card {
-  background: linear-gradient(145deg, #ffffff, #f8f9fa);
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 20px 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
   min-width: 180px;
   flex: 1;
   transition: all 0.3s ease;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--border-color);
 }
 
 .info-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--shadow-md);
 }
 
 .info-card .card-title {
@@ -143,21 +143,21 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin: 0 0 12px 0;
-  color: #666;
+  color: var(--text-secondary);
 }
 
 .info-card .card-value {
   font-size: 28px;
   font-weight: 700;
-  color: #333;
+  color: var(--text-primary);
   line-height: 1.2;
 }
 
 .table-section {
-  background: white;
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
   min-height: 400px;
 }
 
@@ -186,7 +186,7 @@
 
   .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     flex-direction: column;
     align-items: stretch;
     gap: 10px;
@@ -211,7 +211,7 @@
 
   .table-section {
     padding: 16px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
   }
 }
 
@@ -228,4 +228,3 @@
     padding: 12px;
   }
 }
-

frontend/Frontend-Hotel/src/pages/Guests/GuestDetail.jsx

@@ -100,7 +100,7 @@ export default function GuestDetail() {
       </div>
 
       {/* Current Room Banner */}
-      {guest.name_room && (
+      {guest.room_number && (
         <div
           className="card"
           style={{
@@ -115,7 +115,7 @@ export default function GuestDetail() {
             <span style={{ color: "var(--text-muted)", fontSize: "0.75rem", textTransform: "uppercase", fontWeight: 600 }}>
               {t("guests.currentRoom")}
             </span>
-            <h3 style={{ margin: "4px 0 0", color: "var(--text-primary)" }}>{guest.name_room}</h3>
+            <h3 style={{ margin: "4px 0 0", color: "var(--text-primary)" }}>{guest.room_number}</h3>
           </div>
           <div style={{ textAlign: "right" }}>
             <span style={{ fontSize: "0.8rem", color: "var(--text-secondary)" }}>
@@ -337,10 +337,10 @@ export default function GuestDetail() {
                   {stays.map((stay, idx) => (
                     <tr key={stay.id || idx}>
                       <td>
-                        <span style={{ fontWeight: 600 }}>{stay.name_room || "-"}</span>
-                        {stay.bed_type && (
+                        <span style={{ fontWeight: 600 }}>{stay.room_number || "-"}</span>
+                        {stay.room_type && (
                           <span style={{ display: "block", fontSize: "0.75rem", color: "var(--text-muted)" }}>
-                            {stay.bed_type}
+                            {stay.room_type}
                           </span>
                         )}
                       </td>

frontend/Frontend-Hotel/src/pages/Guests/Guests.jsx

@@ -152,10 +152,10 @@ export default function Guests() {
                   )}
                 </div>
               </div>
-              {guest.name_room && (
+              {guest.room_number && (
                 <div style={{ marginTop: "var(--space-sm)" }}>
                   <span className="badge badge-info" style={{ fontSize: "0.7rem" }}>
-                    {guest.name_room}
+                    {guest.room_number}
                   </span>
                 </div>
               )}

frontend/Frontend-Hotel/src/pages/Hotel/PropertyDetailPage.css

@@ -6,9 +6,9 @@
 .property-info-box {
   display: flex;
   justify-content: space-between;
-  background-color: #f8f8f8;
+  background-color: var(--bg-elevated);
   padding: 20px;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   margin-bottom: 30px;
 }
 
@@ -24,17 +24,19 @@
 input, select {
   padding: 5px;
   margin-left: 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
 }
 
 .save-button {
-  background-color: #f2c300;
+  background-color: var(--accent-gold);
   border: none;
   padding: 10px 20px;
   border-radius: 20px;
   font-weight: bold;
-  color: white;
+  color: #000;
   cursor: pointer;
 }
 

frontend/Frontend-Hotel/src/pages/Housekeeping/Housekeeping.jsx

@@ -142,7 +142,7 @@ export default function Housekeeping() {
               color: "var(--text-primary)",
             }}
           >
-            {task.name_room || `Room ${task.room_id}`}
+            {task.room_number || `Room ${task.room_id}`}
           </h3>
           {task.floor && (
             <span
@@ -263,7 +263,7 @@ export default function Housekeeping() {
                           {t("housekeeping.assignTo")}...
                         </option>
                         {staff.map((s) => (
-                          <option key={s.id_employee} value={s.id_employee}>
+                          <option key={s.id} value={s.id}>
                             {s.first_name} {s.last_name}
                           </option>
                         ))}
@@ -332,7 +332,7 @@ export default function Housekeeping() {
         </h3>
         <div className="grid-3">
           {staff.map((s) => (
-            <div key={s.id_employee} className="card">
+            <div key={s.id} className="card">
               <div
                 style={{
                   display: "flex",

frontend/Frontend-Hotel/src/pages/Income/IncomeReport.css

@@ -8,32 +8,31 @@
 }
 
 .page-title {
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-size: 28px;
   font-weight: 700;
   margin: 0;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   letter-spacing: -0.5px;
 }
 
 .error-message {
   padding: 12px 16px;
-  background-color: #ffebee;
-  color: #c62828;
-  border-radius: 12px;
+  background-color: rgba(239, 68, 68, 0.1);
+  color: var(--error);
+  border-radius: var(--radius-md);
   margin-bottom: 20px;
-  border: 1px solid #ef9a9a;
+  border: 1px solid rgba(239, 68, 68, 0.2);
   font-size: 14px;
   font-weight: 500;
 }
 
 .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
@@ -49,12 +48,11 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   min-width: 180px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -64,23 +62,22 @@
 
 .filter-select:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .filter-select:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .clear-filters-btn {
   padding: 10px 20px;
-  background-color: white;
-  border: 2px solid #e0e0e0;
+  background-color: var(--bg-secondary);
+  border: 2px solid var(--border-color);
   border-radius: 30px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
-  color: #666;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-secondary);
   transition: all 0.2s ease;
   height: 42px;
   box-sizing: border-box;
@@ -88,9 +85,9 @@
 }
 
 .clear-filters-btn:hover {
-  background-color: #f5f5f5;
-  border-color: #ccc;
-  color: #333;
+  background-color: var(--bg-elevated);
+  border-color: var(--border-color);
+  color: var(--text-primary);
 }
 
 .summary-actions-section {
@@ -109,29 +106,29 @@
 
 .new-income-btn {
   padding: 12px 24px;
-  background-color: #5d1a2a;
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
   text-decoration: none;
   border-radius: 30px;
   font-weight: 600;
   font-size: 14px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(93, 26, 42, 0.3);
+  box-shadow: var(--shadow-sm);
   white-space: nowrap;
 }
 
 .new-income-btn:hover {
-  background-color: #7a2236;
+  background-color: var(--accent-gold-hover);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(93, 26, 42, 0.4);
+  box-shadow: var(--shadow-md);
 }
 
 .table-section {
-  background: white;
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   min-height: 400px;
 }
 
@@ -147,14 +144,14 @@
 .loading-spinner-large {
   width: 60px;
   height: 60px;
-  border: 5px solid rgba(0, 0, 0, 0.1);
-  border-top-color: #5d1a2a;
+  border: 5px solid var(--border-color);
+  border-top-color: var(--accent-gold);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
 
 .table-loading p {
-  color: #666;
+  color: var(--text-secondary);
   font-size: 16px;
   font-weight: 500;
   margin: 0;
@@ -195,7 +192,7 @@
 
   .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     flex-direction: column;
     align-items: stretch;
     gap: 10px;
@@ -225,7 +222,7 @@
 
   .table-section {
     padding: 16px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
   }
 
   .table-loading {

frontend/Frontend-Hotel/src/pages/Income/NewIncome.css

@@ -1,5 +1,5 @@
 .new-income-container {
-  color: #333;
+  color: var(--text-primary);
   width: 100%;
   max-width: 100vw;
   margin: 0 auto;
@@ -9,10 +9,11 @@
 }
 
 .form-card {
-  background-color: #fff;
-  border-radius: 10px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
   padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-color);
 }
 
 .form-header {
@@ -25,16 +26,16 @@
 .form-header h1 {
   font-size: 24px;
   font-weight: bold;
-  color: #333;
+  color: var(--text-primary);
   margin: 0;
 }
 
 .back-button {
-  background-color: #6c757d;
-  color: #fff;
-  border: none;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
   padding: 8px 16px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -44,29 +45,29 @@
 }
 
 .back-button:hover {
-  background-color: #5a6268;
+  background-color: var(--bg-surface);
 }
 
 .back-button:active {
-  background-color: #545b62;
+  background-color: var(--bg-elevated);
 }
 
 .success-message {
-  background-color: #d4edda;
-  color: #155724;
+  background-color: rgba(34, 197, 94, 0.1);
+  color: var(--success);
   padding: 12px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   margin-bottom: 20px;
-  border: 1px solid #c3e6cb;
+  border: 1px solid rgba(34, 197, 94, 0.2);
 }
 
 .error-message {
-  background-color: #f8d7da;
-  color: #721c24;
+  background-color: rgba(239, 68, 68, 0.1);
+  color: var(--error);
   padding: 12px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   margin-bottom: 20px;
-  border: 1px solid #f5c6cb;
+  border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
 .form-grid {
@@ -86,25 +87,26 @@
   font-size: 14px;
   margin-bottom: 5px;
   display: block;
-  color: #333;
+  color: var(--text-primary);
 }
 
 .form-grid input,
 .form-grid select {
   width: 100%;
   padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 14px;
-  background-color: #f9f9f9;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   transition: border-color 0.2s ease;
 }
 
 .form-grid input:focus,
 .form-grid select:focus {
   outline: none;
-  border-color: #ffcb05;
-  background-color: #fff;
+  border-color: var(--accent-gold);
+  background-color: var(--bg-secondary);
 }
 
 .form-grid input[type="number"] {
@@ -118,23 +120,24 @@
 }
 
 .save-button {
-  background-color: #ffcb05;
-  color: #fff !important;
+  background-color: var(--accent-gold);
+  color: #000 !important;
   padding: 12px 30px;
   font-weight: bold;
   border: none;
-  border-radius: 25px;
+  border-radius: var(--radius-xl);
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
 
 .save-button:hover:not(:disabled) {
-  background-color: #f4b400;
+  background-color: var(--accent-gold-hover);
 }
 
 .save-button:disabled {
-  background-color: #ccc;
+  background-color: var(--bg-elevated);
+  color: var(--text-muted) !important;
   cursor: not-allowed;
 }
 
@@ -149,7 +152,7 @@
 }
 
 .income-categories > div {
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color);
   padding: 10px;
   margin-top: 10px;
   width: 100%;
@@ -158,7 +161,7 @@
 
 .income-categories .category-item {
   margin-bottom: 10px;
-  border-bottom: 1px dotted #eee;
+  border-bottom: 1px dotted var(--border-color);
   padding-bottom: 5px;
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -177,31 +180,32 @@
   font-size: 14px;
   margin-bottom: 5px;
   display: block;
-  color: #333;
+  color: var(--text-primary);
 }
 
 .category-item select,
 .category-item input {
   width: 100%;
   padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 14px;
-  background-color: #f9f9f9;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   transition: border-color 0.2s ease;
   box-sizing: border-box;
 }
 
 .category-item input[readonly] {
-  background-color: #f5f5f5;
+  background-color: var(--bg-surface);
   cursor: not-allowed;
 }
 
 .category-item input:focus,
 .category-item select:focus {
   outline: none;
-  border-color: #ffcb05;
-  background-color: #fff;
+  border-color: var(--accent-gold);
+  background-color: var(--bg-secondary);
 }
 
 .taxes-container {
@@ -231,8 +235,8 @@
 .total-income-summary {
   margin-top: 20px;
   padding: 10px;
-  border: 1px solid #ccc;
-  background-color: #f9f9f9;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-elevated);
   width: 100%;
   box-sizing: border-box;
 }
@@ -269,13 +273,13 @@
 }
 
 .save-button.disabled-validation {
-  background-color: #808080 !important;
-  color: #fff !important;
+  background-color: var(--bg-elevated) !important;
+  color: var(--text-muted) !important;
   cursor: not-allowed !important;
   opacity: 0.6;
 }
 
 .save-button.disabled-validation:hover {
-  background-color: #dc3545 !important;
+  background-color: var(--error) !important;
   transform: none !important;
 }

frontend/Frontend-Hotel/src/pages/Inventory/Adjustments.css

@@ -1,10 +1,10 @@
 .adjustments-page-container {
   padding: 20px;
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .adjustments-page-container h2 {
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .filters-section {
@@ -17,24 +17,24 @@
 }
 
 .filters-section select {
-  color: #213547;
-  background-color: white;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
   max-width: 250px;
   min-width: 150px;
   flex: 0 1 auto;
 }
 
 .filters-section input[type="date"] {
-  color: #213547;
-  background-color: white;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
   max-width: 200px;
   min-width: 150px;
   flex: 0 1 auto;
 }
 
 .filters-section .filter-search {
-  color: #213547;
-  background-color: white;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
   max-width: 300px;
   min-width: 200px;
   flex: 0 0 auto;
@@ -43,11 +43,11 @@
 
 .filters-section .save-button {
   width: 120px;
-  background: #F2C300;
-  color: #fff;
+  background: var(--accent-gold);
+  color: #000;
   font-weight: bold;
   font-size: 14px;
-  border-radius: 25px;
+  border-radius: var(--radius-xl);
   padding: 10px 20px;
   border: none;
   cursor: pointer;
@@ -57,11 +57,12 @@
 }
 
 .save-button:hover:not(:disabled) {
-  background: #ddb000;
+  background: var(--accent-gold-hover);
 }
 
 .save-button:disabled {
-  background: #ccc;
+  background: var(--bg-elevated);
+  color: var(--text-muted);
   cursor: not-allowed;
   opacity: 0.6;
 }

frontend/Frontend-Hotel/src/pages/Inventory/AlterProduct.css

@@ -3,17 +3,17 @@
   justify-content: flex-start;
   align-items: flex-start;
   min-height: 100vh;
-  background-color: #f0f2f5;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background-color: var(--bg-primary);
   padding: 20px;
   box-sizing: border-box;
 }
 
 .form-card {
-  background: white;
+  background: var(--bg-secondary);
   padding: 2rem;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-color);
   width: 100%;
 }
 
@@ -23,14 +23,14 @@
   justify-content: space-between;
   margin-bottom: 1.5rem;
   padding-bottom: 1rem;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .form-id {
   font-size: 1.75rem;
   font-weight: bold;
   margin-bottom: 0;
-  color: #1a202c;
+  color: var(--text-primary);
   border-bottom: none;
   padding-bottom: 0;
 }
@@ -50,24 +50,26 @@
 
 label {
   font-weight: 600;
-  color: #4a5568;
+  color: var(--text-secondary);
   font-size: 0.9rem;
 }
 
 input, select {
   padding: 0.8rem;
-  border: 1px solid #cbd5e0;
-  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
   font-size: 1rem;
   width: 100%;
   box-sizing: border-box;
   transition: border-color 0.2s, box-shadow 0.2s;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
 }
 
 input:focus, select:focus {
   outline: none;
-  border-color: #3182ce;
-  box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5);
+  border-color: var(--accent-gold);
+  box-shadow: 0 0 0 2px var(--accent-gold-muted);
 }
 
 select[multiple] {
@@ -78,15 +80,15 @@ select[multiple] {
   text-align: right;
   margin-top: 2rem;
   padding-top: 1.5rem;
-  border-top: 1px solid #e2e8f0;
+  border-top: 1px solid var(--border-color);
 }
 
 .save-button {
-  background-color: #3182ce;
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
   border: none;
   padding: 0.8rem 1.6rem;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   font-size: 1rem;
   font-weight: bold;
   cursor: pointer;
@@ -94,7 +96,7 @@ select[multiple] {
 }
 
 .save-button:hover {
-  background-color: #2b6cb0;
+  background-color: var(--accent-gold-hover);
 }
 
 .save-button:active {
@@ -102,33 +104,34 @@ select[multiple] {
 }
 
 .save-button:disabled {
-  background-color: #a0aec0;
+  background-color: var(--bg-elevated);
+  color: var(--text-muted);
   cursor: not-allowed;
 }
 
 .feedback-message {
   margin-top: 1rem;
   padding: 0.75rem;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   text-align: center;
 }
 
 .feedback-message.success {
-  background-color: #c6f6d5;
-  color: #22543d;
+  background-color: rgba(34, 197, 94, 0.1);
+  color: var(--success);
 }
 
 .feedback-message.error {
-  background-color: #fed7d7;
-  color: #742a2a;
+  background-color: rgba(239, 68, 68, 0.1);
+  color: var(--error);
 }
 
 .back-button {
-  background-color: #718096;
-  color: white;
-  border: none;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
   padding: 0.6rem 1.2rem;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
@@ -140,10 +143,9 @@ select[multiple] {
 }
 
 .back-button:hover {
-  background-color: #4a5568;
+  background-color: var(--bg-surface);
 }
 
 .back-button:active {
   transform: translateY(1px);
 }
-

frontend/Frontend-Hotel/src/pages/Inventory/InventoryReport.css

@@ -1,10 +1,10 @@
 .report-page {
   padding: 20px;
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .report-page h2 {
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .page-filters {
@@ -16,16 +16,16 @@
 }
 
 .page-filters select {
-  color: #213547;
-  background-color: white;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
   max-width: 250px;
   min-width: 150px;
   flex: 0 1 auto;
 }
 
 .page-filters input[type="date"] {
-  color: #213547;
-  background-color: white;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
   max-width: 200px;
   min-width: 150px;
   flex: 0 1 auto;
@@ -38,36 +38,37 @@
 }
 
 .summary-card {
-  background-color: white;
-  border-radius: 12px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
   padding: 15px 25px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   min-width: 180px;
   text-align: center;
-  color: #213547;
+  color: var(--text-primary);
   align-items: center;
   display: block;
 }
 
 .summary-card strong {
-  color: #213547;
+  color: var(--text-secondary);
   display: block;
   margin-bottom: 8px;
 }
 
 .summary-card div {
-  color: #213547;
+  color: var(--text-primary);
   font-size: 1.2em;
   font-weight: bold;
 }
 
 .inventory-filters {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   gap: 12px;
   align-items: flex-end;
@@ -94,21 +95,19 @@
   font-weight: 600;
   white-space: nowrap;
   flex-shrink: 0;
-  color: #666;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .inventory-filters .date-input {
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -118,17 +117,17 @@
 
 .inventory-filters .date-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .inventory-filters .date-input:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 @media (max-width: 768px) {
   .inventory-filters {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 

frontend/Frontend-Hotel/src/pages/Inventory/NewProduct.css

@@ -1,53 +1,14 @@
-/* .new-product-container {
-  padding: 20px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.new-product-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.new-product-form label {
-  display: flex;
-  flex-direction: column;
-  font-weight: bold;
-}
-
-.new-product-form input,
-.new-product-form select {
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.new-product-form button {
-  background-color: #007bff;
-  color: white;
-  padding: 10px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.new-product-form button:hover {
-  background-color: #0056b3;
-} */
-
-
 .new-expense-container {
-  color: #213547;
+  color: var(--text-primary);
   padding: 20px;
 }
 
 .form-card {
-  background-color: #fff;
-  border-radius: 10px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
   padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  color: #213547;
+  box-shadow: var(--shadow-sm);
+  color: var(--text-primary);
 }
 
 .form-header {
@@ -56,14 +17,14 @@
   justify-content: space-between;
   margin-bottom: 20px;
   padding-bottom: 1rem;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .form-id {
   font-weight: bold;
   margin-bottom: 0;
   font-size: 24px;
-  color: #213547;
+  color: var(--text-primary);
   border-bottom: none;
   padding-bottom: 0;
 }
@@ -84,21 +45,21 @@
   font-size: 14px;
   margin-bottom: 5px;
   display: block;
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .form-grid input,
 .form-grid select {
   width: 100%;
   padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 14px;
-  background-color: #f9f9f9;
-  color: #213547;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   box-sizing: border-box;
   height: 38px;
-  min-width: 0; /* Prevent inputs from overflowing grid cells */
+  min-width: 0;
 }
 
 .form-grid input[type="file"] {
@@ -111,8 +72,8 @@
 .form-grid input:focus,
 .form-grid select:focus {
   outline: none;
-  border-color: #ffcb05;
-  background-color: #fff;
+  border-color: var(--accent-gold);
+  background-color: var(--bg-secondary);
 }
 
 form > div:not(.form-grid):not(.save-button-wrapper) {
@@ -122,11 +83,11 @@ form > div:not(.form-grid):not(.save-button-wrapper) {
 form > div:not(.form-grid):not(.save-button-wrapper) input {
   width: 100%;
   padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   font-size: 14px;
-  background-color: #f9f9f9;
-  color: #213547;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   box-sizing: border-box;
   height: 38px;
 }
@@ -144,7 +105,7 @@ form > div:not(.form-grid):not(.save-button-wrapper) label {
   font-size: 14px;
   margin-bottom: 5px;
   display: block;
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .save-button-wrapper {
@@ -154,8 +115,8 @@ form > div:not(.form-grid):not(.save-button-wrapper) label {
 }
 
 .save-button {
-  background-color: #ffcb05;
-  color: #fff;
+  background-color: var(--accent-gold);
+  color: #000;
   padding: 10px 30px;
   font-weight: bold;
   border: none;
@@ -166,21 +127,21 @@ form > div:not(.form-grid):not(.save-button-wrapper) label {
 }
 
 .save-button:hover {
-  background-color: #f4b400;
+  background-color: var(--accent-gold-hover);
 }
 
 .save-button:disabled {
-  background-color: #a0aec0;
+  background-color: var(--bg-elevated);
   cursor: not-allowed;
   opacity: 0.6;
 }
 
 .back-button {
-  background-color: #718096;
-  color: white;
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   border: none;
   padding: 0.6rem 1.2rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
@@ -191,7 +152,7 @@ form > div:not(.form-grid):not(.save-button-wrapper) label {
 }
 
 .back-button:hover {
-  background-color: #4a5568;
+  background-color: var(--bg-surface);
 }
 
 .back-button:active {
@@ -201,18 +162,18 @@ form > div:not(.form-grid):not(.save-button-wrapper) label {
 .feedback-message {
   margin-top: 1rem;
   padding: 0.75rem;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   text-align: center;
 }
 
 .feedback-message.success {
-  background-color: #c6f6d5;
-  color: #22543d;
+  background-color: rgba(34, 197, 94, 0.1);
+  color: var(--success);
 }
 
 .feedback-message.error {
-  background-color: #fed7d7;
-  color: #742a2a;
+  background-color: rgba(239, 68, 68, 0.1);
+  color: var(--error);
 }
 
 .product-table-section {
@@ -226,34 +187,34 @@ form > div:not(.form-grid):not(.save-button-wrapper) label {
 }
 
 .product-table th, .product-table td {
-  border: 1px solid #d4af37; /* dorado */
+  border: 1px solid var(--accent-gold);
   padding: 8px;
   text-align: center;
 }
 
 .product-table th {
-  background-color: #800020; /* bordo/morado oscuro, según tus imágenes */
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
   font-weight: bold;
 }
 
 .add-product-row {
   cursor: pointer;
-  color: #d4af37; /* dorado */
+  color: var(--accent-gold);
   text-align: center;
   padding: 10px;
   font-style: italic;
 }
 
 .tax-pill {
-  background-color: white;
-  border: 1px solid #d4af37;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--accent-gold);
   border-radius: 12px;
   padding: 2px 6px;
-  color: #800020;
+  color: var(--accent-gold);
 }
 
 .product-table tfoot td {
-  border-top: 2px solid #d4af37;
+  border-top: 2px solid var(--accent-gold);
   padding: 8px;
 }

frontend/Frontend-Hotel/src/pages/Inventory/Outcomes.css

@@ -1,10 +1,10 @@
 .outcomes-page .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   gap: 12px;
   align-items: center;
@@ -26,7 +26,7 @@
 @media (max-width: 768px) {
   .outcomes-page .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 

frontend/Frontend-Hotel/src/pages/Inventory/Products.css

@@ -1,12 +1,10 @@
-/* src/pages/Inventory/Products.css */
-
 .products-page-container {
   padding: 20px;
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .products-page-container h2 {
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .products-grid {
@@ -17,15 +15,15 @@
 }
 
 .product-card {
-  background-color: white;
-  border: 1px solid #e2e2e2;
-  border-radius: 8px;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   padding: 15px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  box-shadow: var(--shadow-sm);
   cursor: pointer;
   text-align: center;
   transition: transform 0.2s;
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .product-card:hover {
@@ -37,7 +35,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #666;
+  color: var(--text-secondary);
   font-size: 1.2em;
   font-weight: bold;
 }
@@ -60,13 +58,13 @@
 .product-name {
   font-weight: bold;
   margin-bottom: 5px;
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .product-price,
 .product-units {
   font-size: 0.9em;
-  color: #444;
+  color: var(--text-secondary);
 }
 
 .page-filters {
@@ -78,8 +76,8 @@
 }
 
 .page-filters select {
-  color: #213547;
-  background-color: white;
+  color: var(--text-primary);
+  background-color: var(--bg-elevated);
   max-width: 250px;
   min-width: 150px;
   flex: 0 1 auto;
@@ -87,15 +85,15 @@
 
 .page-filters input[type="text"],
 .page-filters .filter-search-input {
-  color: #213547;
-  background-color: white;
+  color: var(--text-primary);
+  background-color: var(--bg-elevated);
   max-width: 300px;
   min-width: 200px;
   flex: 0 1 auto;
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: bold;
@@ -103,20 +101,20 @@
 }
 
 .page-filters p {
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .products-page-container p {
-  color: #213547;
+  color: var(--text-primary);
 }
 
 .products-filters {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   gap: 12px;
   align-items: center;
@@ -133,7 +131,7 @@
 @media (max-width: 768px) {
   .products-filters {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 

frontend/Frontend-Hotel/src/pages/Login.jsx

@@ -111,11 +111,14 @@ export default function Login() {
                 {error && (
                   <div
                     style={{
-                      color: "red",
-                      fontSize: "14px",
-                      fontWeight: "700",
+                      color: "var(--error)",
+                      fontSize: "0.85rem",
+                      fontWeight: "600",
                       textAlign: "center",
-                      marginBottom: "5px",
+                      padding: "8px",
+                      background: "rgba(239, 68, 68, 0.1)",
+                      borderRadius: "var(--radius-md)",
+                      border: "1px solid rgba(239, 68, 68, 0.2)",
                     }}
                   >
                     {error}

frontend/Frontend-Hotel/src/pages/Payroll/ContractsDetail.css

@@ -1,9 +1,10 @@
 .contract-detail-container {
-  background: #f9f9f9;
+  background: var(--bg-elevated);
   padding: 30px;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   max-width: 1100px;
   margin: auto;
+  border: 1px solid var(--border-color);
 }
 
 .form-grid {
@@ -16,14 +17,17 @@
   font-weight: 600;
   margin-bottom: 5px;
   display: block;
+  color: var(--text-primary);
 }
 
 .form-grid input,
 .form-grid select {
   width: 100%;
   padding: 8px;
-  border-radius: 6px;
-  border: 1px solid #ccc;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
 }
 
 .uniforms-section {
@@ -42,124 +46,15 @@
 }
 
 .save-button-container button {
-  background-color: #f0ad4e;
+  background-color: var(--warning);
   border: none;
-  color: white;
-  padding: 10px 20px;
-  border-radius: 8px;
-  font-size: 16px;
-  cursor: pointer;
-}
-.save-button-container button:hover {
-  background-color: #ec971f;
-}
-
-/* .uniforms-container {
-  display: grid;
-  grid-template-columns: 1.2fr 0.8fr;
-  align-items: start;
-  gap: 24px;
-  margin-top: 10px;
-  width: 100%;
-  max-width: 900px; 
-}
-
-.uniform-checkbox-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-}
-
-.uniform-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  flex: 1;
-  justify-content: flex-start;
-  align-content: flex-start;
-  padding-top: 4px;
-}
-
-.uniforms-container label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.checkbox-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-}
-
-.checkbox-item input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-}
-
-.chip {
-  background-color: #e0e0e0;
-  border-radius: 16px;
-  padding: 4px 10px;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-}
-
-.remove-chip {
-  background: transparent;
-  border: none;
-  font-size: 16px;
-  margin-left: 6px;
-  cursor: pointer;
-  color: #444;
-}
-
-.remove-chip:hover {
-  color: #d00;
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  background-color: #f5f5f5;
-  border: 2px solid #ccc;
-  border-radius: 20px;
-  padding: 6px 12px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  color: #333;
-}
-
-.chip.selected {
-  background-color: #ffcb05;
-  border-color: #e0b400;
   color: #000;
-  font-weight: bold;
-}
-
-.chip button {
-  background: transparent;
-  border: none;
-  color: #555;
-  margin-left: 6px;
-  font-size: 14px;
+  padding: 10px 20px;
+  border-radius: var(--radius-md);
+  font-size: 16px;
   cursor: pointer;
 }
 
-.chip button:hover {
-  color: #b30000;
+.save-button-container button:hover {
+  background-color: var(--accent-gold-hover);
 }
-
-.chip:hover {
-  background-color: #f0f0f0;
-  transform: translateY(-2px);
-}
-.chip.selected:hover {
-  background-color: #e6b800;
-  transform: translateY(-2px);
-} */

frontend/Frontend-Hotel/src/pages/Payroll/Payroll.css

@@ -1,10 +1,10 @@
 .payroll-page .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   gap: 12px;
   align-items: flex-end;
@@ -29,7 +29,7 @@
 .payroll-page .filters-section .date-label {
   font-size: 12px;
   font-weight: 600;
-  color: #666;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -41,10 +41,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 600;
   cursor: pointer;
@@ -55,11 +55,11 @@
 
 .payroll-page .filters-section .date-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .payroll-page .filters-section .date-input:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .payroll-page .filters-section .filter-select {
@@ -74,7 +74,7 @@
 @media (max-width: 768px) {
   .payroll-page .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 

frontend/Frontend-Hotel/src/pages/Payroll/PayrollAttendance.css

@@ -1,10 +1,10 @@
 .payroll-attendance-page .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -46,10 +46,9 @@
 .payroll-attendance-page .filters-section .date-label {
   font-size: 12px;
   font-weight: 600;
-  color: #666;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -58,11 +57,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -72,11 +70,11 @@
 
 .payroll-attendance-page .filters-section .date-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .payroll-attendance-page .filters-section .date-input:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .payroll-attendance-page .filters-section .filter-select {
@@ -87,7 +85,7 @@
 @media (max-width: 768px) {
   .payroll-attendance-page .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 

frontend/Frontend-Hotel/src/pages/Payroll/PayrollContract.css

@@ -1,10 +1,10 @@
 .payroll-contract-page .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   gap: 12px;
   align-items: flex-end;
@@ -23,7 +23,7 @@
 .payroll-contract-page .filters-section .date-label {
   font-size: 12px;
   font-weight: 600;
-  color: #666;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -35,10 +35,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 600;
   cursor: pointer;
@@ -49,11 +49,11 @@
 
 .payroll-contract-page .filters-section .date-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .payroll-contract-page .filters-section .date-input:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .payroll-contract-page .filters-section .filter-select {
@@ -68,7 +68,7 @@
 @media (max-width: 768px) {
   .payroll-contract-page .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 

frontend/Frontend-Hotel/src/pages/Payroll/PayrollEmployees.css

@@ -1,10 +1,10 @@
 .payroll-employees-page .filters-section {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 16px;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
   padding: 20px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -46,10 +46,9 @@
 .payroll-employees-page .filters-section .date-label {
   font-size: 12px;
   font-weight: 600;
-  color: #666;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -58,11 +57,10 @@
   padding: 10px 16px;
   border: none;
   border-radius: 30px;
-  background-color: white;
-  box-shadow: 0 0 0 2px #f4f4f4;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 2px var(--border-color);
   font-size: 14px;
-  color: #333;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--text-primary);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -72,11 +70,11 @@
 
 .payroll-employees-page .filters-section .date-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #fcd200;
+  box-shadow: 0 0 0 2px var(--accent-gold);
 }
 
 .payroll-employees-page .filters-section .date-input:hover {
-  box-shadow: 0 0 0 2px #e6e6e6;
+  box-shadow: 0 0 0 2px var(--border-color);
 }
 
 .payroll-employees-page .filters-section .filter-select {
@@ -87,7 +85,7 @@
 @media (max-width: 768px) {
   .payroll-employees-page .filters-section {
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     gap: 10px;
   }
 

frontend/Frontend-Hotel/src/pages/Payroll/Plantillapayroll.css

@@ -12,22 +12,22 @@
   cursor: pointer;
   user-select: none;
   padding: 6px 12px;
-  border-radius: 6px;
-  border: 1px solid #e0e0e0;
-  background-color: #fafafa;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-elevated);
   transition: all 0.2s ease;
   font-size: 14px;
 }
 
 .checkbox-item:hover {
-  background-color: #f0f8ff;
-  border-color: #fcd200;
+  background-color: var(--bg-surface);
+  border-color: var(--accent-gold);
 }
 
 .checkbox-item input[type="checkbox"] {
   width: 16px;
   height: 16px;
-  accent-color: #fcd200;
+  accent-color: var(--accent-gold);
   cursor: pointer;
   margin: 0;
 }
@@ -40,20 +40,20 @@
 }
 
 .chip {
-  background-color: #fcd200;
-  color: #333;
-  border-radius: 20px;
+  background-color: var(--accent-gold);
+  color: #000;
+  border-radius: var(--radius-xl);
   padding: 6px 12px;
   display: flex;
   align-items: center;
   font-size: 13px;
   font-weight: 500;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
   transition: all 0.2s ease;
 }
 
 .chip:hover {
-  background-color: #f4b400;
+  background-color: var(--accent-gold-hover);
 }
 
 .remove-chip {
@@ -62,19 +62,19 @@
   font-size: 18px;
   margin-left: 8px;
   cursor: pointer;
-  color: #333;
+  color: #000;
   padding: 0;
   line-height: 1;
   transition: color 0.2s ease;
 }
 
 .remove-chip:hover {
-  color: #d00;
+  color: var(--error);
   transform: scale(1.1);
 }
 
 .new-expense-container h2 {
-  color: #333;
+  color: var(--text-primary);
   font-size: 24px;
   font-weight: bold;
   text-align: center;
@@ -89,9 +89,10 @@
 }
 
 .form-card {
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-color);
   box-sizing: border-box;
 }
 
@@ -105,7 +106,7 @@
 .form-grid label {
   font-weight: 600;
   font-size: 14px;
-  color: #333;
+  color: var(--text-primary);
   margin-bottom: 6px;
   display: block;
 }
@@ -114,10 +115,11 @@
 .form-grid select {
   width: 100%;
   padding: 10px 12px;
-  border: 2px solid #e0e0e0;
-  border-radius: 8px;
+  border: 2px solid var(--border-color);
+  border-radius: var(--radius-md);
   font-size: 14px;
-  background-color: #fff;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
   transition: all 0.2s ease;
   box-sizing: border-box;
 }
@@ -125,14 +127,14 @@
 .form-grid input:focus,
 .form-grid select:focus {
   outline: none;
-  border-color: #fcd200;
-  box-shadow: 0 0 0 3px rgba(252, 210, 0, 0.1);
+  border-color: var(--accent-gold);
+  box-shadow: 0 0 0 3px var(--accent-gold-muted);
 }
 
 .form-grid input.readonly-input {
-  background-color: #f8f9fa;
+  background-color: var(--bg-elevated);
   cursor: not-allowed;
-  color: #6c757d;
+  color: var(--text-muted);
 }
 
 .uniform-section {
@@ -144,26 +146,26 @@
   justify-content: flex-end;
   margin-top: 24px;
   padding-top: 20px;
-  border-top: 1px solid #e0e0e0;
+  border-top: 1px solid var(--border-color);
 }
 
 .save-button {
-  background-color: #fcd200;
-  color: #333;
+  background-color: var(--accent-gold);
+  color: #000;
   padding: 12px 24px;
   font-weight: 600;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   font-size: 16px;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 .save-button:hover {
-  background-color: #f4b400;
+  background-color: var(--accent-gold-hover);
   transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-md);
 }
 
 .save-button:active {

frontend/Frontend-Hotel/src/pages/PendingApproval.css

@@ -8,7 +8,7 @@
 }
 
 .page-title {
-  color: #1a1a1a;
+  color: var(--text-primary);
   font-size: 28px;
   font-weight: 700;
   margin: 0;
@@ -17,10 +17,10 @@
 }
 
 .table-section {
-  background: white;
-  border-radius: 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
   padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
   min-height: 400px;
 }
 
@@ -45,7 +45,7 @@
 
   .table-section {
     padding: 16px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
   }
 }
 
@@ -58,4 +58,3 @@
     padding: 12px;
   }
 }
-

frontend/Frontend-Hotel/src/pages/Reservations/NewReservation.jsx

@@ -114,8 +114,8 @@ export default function NewReservation() {
               {rooms
                 .filter((rm) => rm.status === "available")
                 .map((rm) => (
-                  <option key={rm.id_room} value={rm.id_room}>
-                    {rm.name_room} - {rm.bed_type}
+                  <option key={rm.id} value={rm.id}>
+                    {rm.room_number} - {rm.room_type}
                   </option>
                 ))}
             </select>

frontend/Frontend-Hotel/src/pages/Reservations/components/ReservationCard.jsx

@@ -60,14 +60,14 @@ export default function ReservationCard({ reservation, onStatusChange }) {
         </span>
       </div>
 
-      {r.name_room && (
+      {r.room_number && (
         <div>
           <span className="badge badge-info" style={{ fontSize: "0.7rem" }}>
-            {r.name_room}
+            {r.room_number}
           </span>
-          {r.bed_type && (
+          {r.room_type && (
             <span style={{ fontSize: "0.75rem", color: "var(--text-muted)", marginLeft: "var(--space-sm)" }}>
-              {r.bed_type}
+              {r.room_type}
             </span>
           )}
         </div>

frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomDetailModal.jsx

@@ -20,7 +20,7 @@ export default function RoomDetailModal({ room, onClose, onStatusChange }) {
           }}
         >
           <h2 style={{ margin: 0 }}>
-            {t("rooms.roomNumber")}: {room.name_room}
+            {t("rooms.roomNumber")}: {room.room_number}
           </h2>
           <button
             className="btn-outline btn-sm"
@@ -42,7 +42,7 @@ export default function RoomDetailModal({ room, onClose, onStatusChange }) {
             <div>
               <span className="label-dark">{t("rooms.roomType")}</span>
               <p style={{ margin: 0, color: "var(--text-primary)" }}>
-                {room.bed_type}
+                {room.room_type}
               </p>
             </div>
             <div>
@@ -151,7 +151,7 @@ export default function RoomDetailModal({ room, onClose, onStatusChange }) {
             {room.status === "available" && (
               <button
                 className="btn-danger"
-                onClick={() => onStatusChange(room.id_room, "maintenance")}
+                onClick={() => onStatusChange(room.id, "maintenance")}
               >
                 {t("rooms.maintenance")}
               </button>
@@ -159,7 +159,7 @@ export default function RoomDetailModal({ room, onClose, onStatusChange }) {
             {room.status === "cleaning" && (
               <button
                 className="btn-success"
-                onClick={() => onStatusChange(room.id_room, "available")}
+                onClick={() => onStatusChange(room.id, "available")}
               >
                 {t("rooms.available")}
               </button>
@@ -167,7 +167,7 @@ export default function RoomDetailModal({ room, onClose, onStatusChange }) {
             {room.status === "maintenance" && (
               <button
                 className="btn-success"
-                onClick={() => onStatusChange(room.id_room, "available")}
+                onClick={() => onStatusChange(room.id, "available")}
               >
                 {t("rooms.available")}
               </button>

frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomGrid.jsx

@@ -34,11 +34,11 @@ export default function RoomGrid({ rooms, onRoomClick }) {
           <div className="grid-5">
             {roomsByFloor[floor].map((room) => (
               <div
-                key={room.id_room}
+                key={room.id}
                 className={`room-card ${room.status || "available"}`}
                 onClick={() => onRoomClick(room)}
               >
-                <div className="room-number">{room.name_room}</div>
+                <div className="room-number">{room.room_number}</div>
                 {room.guest_name && (
                   <div className="room-info">{room.guest_name}</div>
                 )}

frontend/Frontend-Hotel/src/pages/RoomService/NewOrder.jsx

@@ -148,8 +148,8 @@ export default function NewOrder() {
               >
                 <option value="">{t("common.room")}...</option>
                 {rooms.map((room) => (
-                  <option key={room.id_room} value={room.id_room}>
-                    {room.name_room} - {t("rooms.floor")} {room.floor}
+                  <option key={room.id} value={room.id}>
+                    {room.room_number} - {t("rooms.floor")} {room.floor}
                   </option>
                 ))}
               </select>

frontend/Frontend-Hotel/src/pages/RoomService/RoomServiceOrders.jsx

@@ -130,7 +130,7 @@ export default function RoomServiceOrders() {
                         color: "var(--text-primary)",
                       }}
                     >
-                      {order.name_room || `Room ${order.room_id}`}
+                      {order.room_number || `Room ${order.room_id}`}
                     </h3>
                     {order.guest_name && (
                       <p

frontend/Frontend-Hotel/src/pages/Schedules/Schedules.jsx

@@ -57,9 +57,9 @@ export default function Schedules() {
       const schedules = schedRes.data.schedules || [];
       const newGrid = {};
       for (const emp of emps) {
-        newGrid[emp.id_employee] = {};
+        newGrid[emp.id] = {};
         for (const wd of weekDates) {
-          newGrid[emp.id_employee][formatDate(wd)] = "off";
+          newGrid[emp.id][formatDate(wd)] = "off";
         }
       }
       for (const s of schedules) {
@@ -237,14 +237,14 @@ export default function Schedules() {
               </tr>
             ) : (
               employees.map((emp) => (
-                <tr key={emp.id_employee}>
+                <tr key={emp.id}>
                   <td style={{ fontWeight: 600 }}>
                     {emp.first_name} {emp.last_name}
                   </td>
                   {weekDates.map((wd) => {
                     const dateStr = formatDate(wd);
-                    const shift = grid[emp.id_employee]?.[dateStr] || "off";
-                    const changeKey = `${emp.id_employee}_${dateStr}`;
+                    const shift = grid[emp.id]?.[dateStr] || "off";
+                    const changeKey = `${emp.id}_${dateStr}`;
                     const isChanged = changes[changeKey] !== undefined;
 
                     return (
@@ -256,7 +256,7 @@ export default function Schedules() {
                           userSelect: "none",
                           position: "relative",
                         }}
-                        onClick={() => handleCellClick(emp.id_employee, dateStr)}
+                        onClick={() => handleCellClick(emp.id, dateStr)}
                       >
                         <span
                           className={getShiftClass(shift)}

frontend/Frontend-Hotel/src/pages/Settings/RoomManagement.css

@@ -6,26 +6,26 @@
 .room-table {
   width: 100%;
   border-collapse: collapse;
-  background-color: white;
+  background-color: var(--bg-secondary);
   font-size: 0.95rem;
 }
 
 .room-table th {
-  background-color: #791313;
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
   padding: 0.75rem;
   text-align: left;
   font-weight: bold;
-  border: 1px solid #e3b600;
+  border: 1px solid var(--accent-gold);
 }
 
 .room-table td {
   padding: 0.75rem;
-  border: 1px solid #e3b600;
+  border: 1px solid var(--accent-gold);
   text-align: left;
 }
 
 .room-table td a {
-  color: #791313;
+  color: var(--accent-gold);
   text-decoration: underline;
 }

frontend/Frontend-Hotel/src/pages/Settings/SettingsId.css

@@ -9,10 +9,10 @@
 }
 
 .form-card {
-  background-color: #ffffff;
-  border-radius: 12px;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
   padding: 1.5rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
   font-family: Montserrat;
 }
 
@@ -32,8 +32,10 @@
 .form-grid select {
   width: 80%;
   padding: 8px;
-  border-radius: 6px;
-  border: 1px solid #ccc;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-elevated);
+  color: var(--text-primary);
   font-family: Montserrat;
 }
 
@@ -61,8 +63,8 @@
 }
 
 .save-button {
-  background-color: #e3b600;
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
   padding: 10px 20px;
   border: none;
   font-weight: bold;
@@ -71,5 +73,5 @@
 }
 
 .save-button:hover {
-  background-color: #c9a300;
+  background-color: var(--accent-gold-hover);
 }

frontend/Frontend-Hotel/src/styles/Dashboard.css

@@ -1,176 +1,178 @@
+/* ========================================
+   DASHBOARD LAYOUT
+   ======================================== */
 
-/* Contenedor principal */
 .dashboard-layout {
   display: flex;
-  font-family: sans-serif;
+  font-family: var(--font-sans);
   min-height: 100vh;
-  height: auto;
 }
 
+/* ========================================
+   SIDEBAR
+   ======================================== */
+
 .sidebar {
-  background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-primary));
-  color: white;
-  width: 200px;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--border-color);
+  color: var(--text-primary);
+  width: 220px;
   display: flex;
   flex-direction: column;
-  padding: 20px;
+  padding: var(--space-lg) var(--space-md);
   min-height: 100vh;
-  justify-content: flex-start;
+  flex-shrink: 0;
+}
+
+.sidebar nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
 .sidebar nav a {
-  display: flex;
-  flex-direction: column;
-  color: #ffffff;
+  display: block;
+  color: var(--text-secondary);
   text-decoration: none;
-  padding: 8px;
-  border-radius: 6px;
-  font-size: x-large; 
+  padding: 10px 14px;
+  border-radius: var(--radius-md);
+  font-size: 0.95rem;
   font-weight: 500;
-  transition: color 0.2s;
-  font-family: Georgia, 'Times New Roman', Times, serif;
+  transition: all 0.2s ease;
+  font-family: var(--font-sans);
+  border-left: 3px solid transparent;
 }
 
 .sidebar nav a:hover {
-  background: var(--accent-gold-muted);
+  background: var(--sidebar-hover);
   color: var(--accent-gold);
 }
 
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 1rem;
-}
-
-.sidebar-toggle-button {
-  font-size: 1rem;
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  border-radius: 38px;
-}
-
-.sidebar-toggle-button:focus {
-  outline: none;
-  background: var(--accent-gold-muted);
-  box-shadow: 0 0 0 3px var(--accent-gold);
-  background-color: var(--accent-gold-muted);
-}
-
-.menu-btn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  color: white;
-  cursor: pointer;
-}
-
-.sidebar-title {
-  font-size: 1.2rem;
-  font-weight: bold;
-}
-
-/* Menú */
-.menu-items {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.menu-items a {
-  color: white;
-  text-decoration: none;
-  font-size: 1rem;
-  padding: 5px 10px;
-  border-radius: 5px;
-}
-
-.menu-items a:hover {
-  background-color: var(--accent-gold-muted);
+.sidebar nav a.active {
+  background: var(--sidebar-active);
   color: var(--accent-gold);
+  border-left-color: var(--accent-gold);
+  font-weight: 600;
 }
 
-/* Área principal */
+/* ========================================
+   MAIN CONTENT
+   ======================================== */
+
 .main-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
   min-height: 100vh;
+  min-width: 0;
 }
 
 .content {
-  padding: 2rem;
+  padding: var(--space-xl);
   background-color: var(--bg-primary);
   flex: 1;
-  overflow-y: auto; /* Permite scroll vertical si es necesario */
+  overflow-y: auto;
 }
 
+/* ========================================
+   TOPBAR
+   ======================================== */
+
 .topbar {
-  background-color: var(--bg-secondary);
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   display: flex;
   flex-direction: column;
-  padding: 0.1rem 0.4rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  border-bottom: 2px solid var(--accent-gold);
+  padding: 0.4rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
 .topbar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 0rem;
 }
 
 .topbar-title {
-  font-size: 1.2rem;  
+  font-size: 1.1rem;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary);
+  font-family: var(--font-display);
 }
 
 .topbar-submenu {
   display: flex;
-  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-  gap: 15px;          
+  gap: 6px;
   flex-wrap: wrap;
   justify-content: center;
-  margin-top: 0;
-  padding: 0.2rem 0;
+  padding: 4px 0;
 }
 
 .submenu-link {
-  font-size: 1.2rem;
-  padding: 3px 6px;
-  border-radius: 4px;
+  font-size: 0.8rem;
+  padding: 4px 12px;
+  border-radius: 20px;
   background: var(--accent-gold-muted);
   color: var(--accent-gold);
   font-weight: 600;
   text-decoration: none;
-  transition: background-color 0.5s ease;
+  transition: all 0.2s ease;
+  font-family: var(--font-sans);
 }
 
 .submenu-link:hover {
-  background-color: rgba(212, 165, 116, 0.25);
+  background: rgba(212, 165, 116, 0.2);
 }
 
-.topbar-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
+.submenu-link.active {
+  background: var(--accent-gold);
+  color: #000;
 }
 
+/* ========================================
+   SIDEBAR TOGGLE
+   ======================================== */
+
+.sidebar-toggle-button {
+  font-size: 1.1rem;
+  background: none;
+  border: none;
+  color: var(--text-primary);
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  padding: 6px 8px;
+  transition: all 0.2s ease;
+}
+
+.sidebar-toggle-button:hover {
+  background: var(--accent-gold-muted);
+  color: var(--accent-gold);
+}
+
+.sidebar-toggle-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-gold);
+}
+
+/* ========================================
+   TOPBAR ICONS
+   ======================================== */
+
 .topbar-icons {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 12px;
 }
 
 .topbar-icon {
-  font-size: 1.6rem;
+  font-size: 1.2rem;
   cursor: pointer;
-  color: #ffffff;
+  color: var(--text-secondary);
   transition: color 0.2s ease;
 }
 
@@ -178,204 +180,78 @@
   color: var(--accent-gold);
 }
 
-.submenu-link:hover {
-  background-color: rgba(212, 165, 116, 0.25);
-}
+/* ========================================
+   LANGUAGE SELECT
+   ======================================== */
 
 .language-select {
-  padding: 6px 10px;
+  padding: 5px 10px;
   border-radius: 20px;
   background-color: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  font-size: 0.9rem;
-  font-weight: bold;
+  font-size: 0.8rem;
+  font-weight: 600;
   color: var(--text-primary);
   cursor: pointer;
-  transition: background-color 0.3s ease;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+  font-family: var(--font-sans);
 }
 
 .language-select:hover {
-  background-color: var(--accent-gold-muted);
+  border-color: var(--accent-gold);
   color: var(--accent-gold);
 }
 
 .language-select:focus {
   outline: none;
-  box-shadow: 0 0 0 2px var(--accent-gold);
+  box-shadow: 0 0 0 2px var(--accent-gold-muted);
 }
 
-/* 
-.submenu-link {
-  font-size: 1.2rem;  
-  padding: 3px 6px;        
-  border-radius: 4px;
-  background-color: #f5d400cc;
-} */
+/* ========================================
+   THEME TOGGLE
+   ======================================== */
 
-
-/* .submenu-link.active {
-  background-color: #791313;
-  color: white;
-  font-weight: 600;
-} */
-
-/* 
-.topbar {
-  background-color: #e3b600;
+.theme-toggle {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: 20px;
+  padding: 5px 10px;
+  font-size: 1rem;
+  transition: all 0.2s ease;
   display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.theme-toggle:hover {
+  border-color: var(--accent-gold);
+  color: var(--accent-gold);
+}
+
+/* ========================================
+   MOBILE RESPONSIVE
+   ======================================== */
+
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 200;
+    width: 240px;
+    box-shadow: var(--shadow-lg);
+    transform: translateX(0);
+    transition: transform 0.3s ease;
+  }
+
+  .dashboard-layout {
     flex-direction: column;
-  padding: 0.8rem 1.5rem;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   }
 
-.topbar-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  .content {
+    padding: var(--space-md);
   }
-
-.topbar-title {
-  font-size: 1.2rem;
-  font-weight: bold;
-  color: #ffffff;
 }
-
-.topbar-submenu {
-  display: flex;
-  gap: 15px;
-  margin-top: 0.5rem;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.submenu-link {
-  font-size: 1rem;
-  color: #ffffff;
-  text-decoration: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  background-color: #f5d400cc;
-  font-weight: 500;
-}
-
-.submenu-link.active {
-  background-color: #791313;
-  color: white;
-  font-weight: bold;
-}
- */
-
-/* .sidebar-toggle-button {
-  font-size: 1.5rem;
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  outline: none;
-}
-
-.sidebar-toggle-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px #ffcf30;
-  border-radius: 4px;
-}
- */
-
-/* .sidebar-toggle-button:focus {
-  outline: 3px solid #ffcf30;  
-  outline-offset: 2px;
-  border-radius: 4px;
-  background-color: rgba(255, 207, 48, 0.021); 
-} */
-
-
-/* .sidebar-toggle-button:focus {
-  outline: 20px solid #ffcf30; 
-  outline-offset: 8px;
-} */
-
-/* .sidebar-toggle-button:focus {
-  outline: none;
-} */
-
-/* Header */
-/* .topbar {
-  background-color: #e3b600; 
-  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 0.8rem;
-  padding-right:  1.5rem;
-  padding-bottom: 0.8rem;
-  padding-left: 1.5rem;
-  flex-wrap: wrap;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.topbar-title {
-  font-size: 1.2rem;
-  font-weight: bold;
-  color: #ffffff;
-  justify-content: flex-start;
-}
-
-.topbar-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.topbar-icons {
-  display: flex;
-  gap: 20px;
-  align-items:end;
-}
-
-.topbar-icon {
-  font-size: 1.4rem;
-  cursor: pointer;
-  color: #ffffff;
-  transition: color 0.2s ease;
-}
-
-.topbar-icon:hover {
-  color: #791313;
-}
-
-.topbar-submenu {
-  flex: 2;
-  justify-content: center;
-  display: flex;
-  gap: 1.2rem;
-  flex-wrap: wrap;
-} */
-
-/* .submenu-link {
-  font-size: 1rem;
-  color: #ffffff;
-  text-decoration: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  transition: background 0.3s;
-  background-color: #f5d400cc;
-  font-weight: 500;
-}
-
-.submenu-link:hover {
-  background-color: #f5d600;
-}
-
-.submenu-link.active {
-  background-color: #791313;
-  color: white;
-  font-weight: bold;
-} */
-
-/* .topbar-center {
-  flex: 2;
-  justify-content: center;
-  display: flex;
-  gap: 15px;
-  flex-wrap: wrap;
-} */

frontend/Frontend-Hotel/src/styles/Layout.css

@@ -6,19 +6,13 @@
 }
 
 .main {
-  margin-left: 220px; /* espacio del sidebar */
+  margin-left: 220px;
   padding: 20px;
-  margin-top: 50px; /* espacio del navbar */
+  margin-top: 50px;
 }
 
-/* .topbar {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 20px;
-} */
-
 .content {
-  background-color: white;
+  background-color: var(--bg-primary);
   padding: 20px;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
 }

frontend/Frontend-Hotel/src/styles/Login.css

@@ -1,29 +1,31 @@
-/* CONTENEDOR PRINCIPAL */
+/* ========================================
+   LOGIN PAGE
+   ======================================== */
+
 .login-page {
-  background-color: #e4bd00;
+  background-color: var(--login-bg);
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
+  padding: var(--space-lg);
 }
 
-/* TARJETA BLANCA */
 .login-container {
-  background-color: white;
-  padding: 100px;
-  border-radius: 1px;
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
+  background: var(--login-card-bg);
+  border: 1px solid var(--border-color);
+  padding: 48px;
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
   display: flex;
-  gap: 20px;
+  gap: 48px;
   align-items: center;
   justify-content: center;
-  max-width: 1000px;
+  max-width: 800px;
   width: 100%;
-  overflow: hidden;
 }
 
-/* LOGO */
+/* Logo */
 .logo-box {
   flex: 1;
   display: flex;
@@ -32,142 +34,129 @@
 }
 
 .logo {
-  width: 250px;
+  width: 200px;
   height: auto;
+  opacity: 0.9;
 }
 
-/* FORMULARIO */
+/* Form */
 .login-form {
   flex: 1;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 10px;
+  align-items: stretch;
+  gap: 14px;
   width: 100%;
 }
 
 .login-form input.custom-input {
-  width: 170%;
-  padding: 12px;
-  border: none;
-  border-radius: 20px;
-  background-color: #d1d5db;
-  /* color: #ed0404; */
-  font-size: 15px;
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--login-input-bg);
+  color: var(--text-primary);
+  font-size: 0.9rem;
   font-weight: 500;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  box-sizing: border-box;
+}
+
+.login-form input.custom-input:focus {
+  border-color: var(--accent-gold);
+  box-shadow: 0 0 0 3px var(--accent-gold-muted);
 }
 
 .login-form input::placeholder {
-  color: ed0404;
+  color: var(--text-muted);
 }
 
-/* BOTONES */
+/* Buttons */
 .login-buttons {
   display: flex;
-  justify-content: space-between;
   gap: 10px;
-  width: 180%;
+  width: 100%;
+  margin-top: var(--space-sm);
 }
 
 .login-buttons button {
   flex: 1;
   padding: 12px;
   font-weight: 600;
-  border-radius: 20px;
+  border-radius: var(--radius-md);
   border: none;
-  background-color: #6a0e0e;
-  color: white;
   cursor: pointer;
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  transition: all 0.2s ease;
 }
 
-/* Opcional: efecto hover */
-.login-buttons button:hover {
-  background-color: #8b0e0e;
+.login-buttons button[type="submit"],
+.login-buttons .btn-primary {
+  background-color: var(--accent-gold);
+  color: #000;
 }
 
-.custom-input {
-  width: 100%;
-  padding: 16px 24px;
-  /*border: none;*/
-  border-radius: 16px;
-  background-color: #ce0f0f;
-  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
-  font-family: 'Roboto', sans-serif;
-  /* font-size: 16px; */
-  font-weight: bold;
-  font-size: 1.2rem;
-  color: #505050 !important;
-  /* Gris oscuro */
-  text-align: center;
-  outline: none;
-  transition: box-shadow 0.3s ease;
+.login-buttons button[type="submit"]:hover,
+.login-buttons .btn-primary:hover {
+  background-color: var(--accent-gold-hover);
+  transform: translateY(-1px);
 }
 
-.custom-input::placeholder {
-  color: #888;
-  font-weight: bold;
+.login-buttons .btn-secondary,
+.login-buttons button[type="button"] {
+  background-color: var(--bg-elevated);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
 }
 
-.custom-input:focus {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+.login-buttons .btn-secondary:hover,
+.login-buttons button[type="button"]:hover {
+  border-color: var(--accent-gold);
+  color: var(--accent-gold);
 }
 
-.custom2-input:focus {
-  background-color: #d5d8de;
-}
-
-.login-button,
-.recover-button {
-  background-color: #5b1410;
-  color: white;
-  border: none;
-  border-radius: 30px;
-  padding: 14px;
-  font-weight: bold;
-  cursor: pointer;
-  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
-}
-
-.recover-button {
-  background-color: #5b1410;
-}
-
-.recover-input {
-  width: 200px;
-  padding: 10px;
-  margin: 0 auto 15px auto; /* Centrado + espacio debajo */
-  border: none;
-  border-radius: 30px;
-  background-color: #d1d5db;
-  color: #111;
-  font-size: 14px;
-  display: block;
-  text-align: center;
-}
-
-
+/* Modal (recover password) */
 .modal-title {
-  font-family: 'Roboto', sans-serif;
-  font-size: 20px;
+  font-family: var(--font-display);
+  font-size: 1.2rem;
   font-weight: 600;
-  color: #5D1A2A;
+  color: var(--text-primary);
   text-align: center;
   margin-bottom: 20px;
 }
 
-.modal-form input.recover-input {
-  width: 100% !important;
+.recover-input {
+  width: 100%;
   padding: 12px 16px;
-  margin: 0 0 20px 0;
-  border: none;
-  border-radius: 25px;
-  background-color: #d1d5db;
-  color: #111;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--login-input-bg);
+  color: var(--text-primary);
   font-size: 14px;
   display: block;
   text-align: center;
   box-sizing: border-box;
+  outline: none;
+}
+
+.recover-input:focus {
+  border-color: var(--accent-gold);
+  box-shadow: 0 0 0 3px var(--accent-gold-muted);
+}
+
+.modal-form input.recover-input {
+  width: 100%;
+  padding: 12px 16px;
+  margin: 0 0 20px 0;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--login-input-bg);
+  color: var(--text-primary);
+  font-size: 14px;
+  box-sizing: border-box;
 }
 
 .modal-actions {
@@ -181,126 +170,46 @@
   flex: 1;
   padding: 12px 20px;
   border: none;
-  border-radius: 25px;
+  border-radius: var(--radius-md);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
+  font-family: var(--font-sans);
 }
 
 .modal-actions .btn-primary {
-  background-color: #5D1A2A;
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
 }
 
 .modal-actions .btn-primary:hover {
-  background-color: #7a2336;
+  background-color: var(--accent-gold-hover);
 }
 
 .modal-actions .btn-secondary {
-  background-color: #6c757d;
-  color: white;
+  background-color: var(--bg-elevated);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
 }
 
 .modal-actions .btn-secondary:hover {
-  background-color: #5a6268;
-}
-
-/* 
-.modal-form input {
-  width: 100%;
-  padding: 12px;
-  margin-bottom: 15px;
-  border: none;
-  border-radius: 30px;
-  background-color: #d1d5db;
-  color: #111;
-  font-size: 14px;
-} */
-
-
-/* 
-.btn {
-  flex: 1;
-  padding: 12px;
-  border: none;
-  border-radius: 20px;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.btn--primary {
-  background-color: #8b0000;
-  color: white;
-} */
-
-
-/*--------------------------------------*/
-/* .login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  background-color: #fff;
-} */
-
-/* .login-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  width: 300px;
-} */
-/* 
-.btn--primary:hover {
-  background-color: #a00000;
-}
-.btn--secondary {
-  background-color: #b22222;
-  color: white;
-}
-.btn--secondary:hover {
-  background-color: #cc0000;
-} */
-
-
-/* 
-.login-page {
-  background-color: #e3b400;
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  border-color: var(--accent-gold);
+  color: var(--accent-gold);
 }
 
+/* Responsive */
+@media (max-width: 640px) {
   .login-container {
-  background-color: white;
-  padding: 40px;
-  border-radius: 10px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-  max-width: 900px;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  gap: 40px;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo-box {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    flex-direction: column;
+    padding: 32px 24px;
+    gap: 24px;
   }
 
   .logo {
-  max-width: 150px;
-  height: auto;
+    width: 150px;
   }
 
-.login-form {
-  flex: 1;
-  display: flex;
+  .login-buttons {
     flex-direction: column;
-  gap: 20px;
   }
- */
+}

frontend/Frontend-Hotel/src/styles/LoginPage.css

@@ -9,14 +9,16 @@
 }
 
 .login-box {
-  background: rgba(255, 255, 255, 0.85); /* Fondo blanco semi-transparente */
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
   padding: 40px;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid var(--border-color);
   width: 320px;
 }
 
 .btn--primary {
-  background-color: #8b0000;
-  color: white;
+  background-color: var(--accent-gold);
+  color: #000;
 }

frontend/Frontend-Hotel/src/styles/global.css

@@ -1,7 +1,6 @@
 @import './theme.css';
 
 .app {
-  background-color: rgba(255, 223, 0, 0.85);
   display: flex;
   min-height: 100vh;
 }
@@ -12,82 +11,51 @@
   flex-direction: column;
 }
 
-/* .topbar {
-  padding: 12px;
-  background: #fdd700; 
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  font-size: 1rem;
-  color: white;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-} */
-
-button:hover {
-  background-color: #ddbf16;
-}
-
-/* 
-button {
-  background-color: #4a0d0d;
-  color: white;
-  padding: 10px;
-  border-radius: 6px;
-  border: none;
-  cursor: pointer;
-}
- */
 .content {
   padding: var(--space-lg);
 }
 
-/* Fondo del modal */
+/* Modal overlay (legacy pages) */
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.55);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
 }
 
-/* Caja del modal */
 .modal-box {
-  background: white;
+  background: var(--bg-secondary);
   padding: 30px;
-  border-radius: 12px;
-  width: 350px;
+  border-radius: var(--radius-lg);
+  width: 380px;
   max-width: 90%;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid var(--border-color);
   animation: fadeIn 0.3s ease-in-out;
 }
 
-/* Agregar un fondo semi-transparente al modal */
-.modal-overlay {
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 100;
-}
-
 .modal-box h3 {
   margin-top: 0;
   margin-bottom: 15px;
-  color: #111;
+  color: var(--text-primary);
   text-align: center;
 }
 
-/* Formulario del modal */
 .modal-form input {
   width: 100%;
   padding: 10px;
   margin-bottom: 15px;
-  border: none;
-  border-radius: 6px;
-  background: #d1d5db;
-  color: #111;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
   font-size: 14px;
 }
 
@@ -97,63 +65,7 @@ button {
   gap: 10px;
 }
 
-/* Animación */
 @keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
 }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-/*Login.css*/
-/* Fondo amarillo opaco */
-/* 
-.login-page {
-  background-color: rgba(255, 223, 0, 0.85);
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-} */
-
-
-/* Cuadro central blanco */
-.login-box {
-  background: white;
-  padding: 40px;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  width: 320px;
-}
-
-/* Botones tintos */
-/* .btn {
-  width: 100%;
-  padding: 12px;
-  border: none;
-  border-radius: 6px;
-  font-weight: 600;
-  margin-bottom: 10px;
-  cursor: pointer;
-}
-
-.btn--primary {
-  background-color: #8b0000;
-  color: white;
-}
-
-.btn--primary:hover {
-  background-color: #a00000;
-}
-
-.btn--secondary {
-  background-color: #b22222;
-  color: white;
-}
-
-.btn--secondary:hover {
-  background-color: #cc0000;
-} */

frontend/Frontend-Hotel/src/styles/theme.css

@@ -1,19 +1,38 @@
-:root {
+/* ========================================
+   THEME SYSTEM — Dark (default) + Light
+   ======================================== */
+
+:root,
+[data-theme="dark"] {
   /* Background layers */
-  --bg-primary: #0a0a0a;
-  --bg-secondary: #1a1a1a;
-  --bg-elevated: #2a2a2a;
-  --bg-surface: #1e1e1e;
+  --bg-primary: #0a0a0f;
+  --bg-secondary: #12121a;
+  --bg-elevated: #1e1e2a;
+  --bg-surface: #16161f;
+
+  /* Glass / transparency */
+  --glass-bg: rgba(18, 18, 26, 0.8);
+  --glass-border: rgba(212, 165, 116, 0.08);
+
+  /* Sidebar */
+  --sidebar-bg: #0d0d14;
+  --sidebar-hover: rgba(212, 165, 116, 0.08);
+  --sidebar-active: rgba(212, 165, 116, 0.12);
+
+  /* Login */
+  --login-bg: #0a0a0f;
+  --login-card-bg: #12121a;
+  --login-input-bg: #1e1e2a;
 
   /* Accent */
   --accent-gold: #d4a574;
   --accent-gold-hover: #e0b88a;
-  --accent-gold-muted: rgba(212, 165, 116, 0.15);
+  --accent-gold-muted: rgba(212, 165, 116, 0.12);
 
   /* Text */
-  --text-primary: #ffffff;
-  --text-secondary: #a0a0a0;
-  --text-muted: #666666;
+  --text-primary: #f0ece4;
+  --text-secondary: #9a948a;
+  --text-muted: #5a564e;
 
   /* Status colors */
   --status-available: #22c55e;
@@ -28,19 +47,20 @@
   --info: #3b82f6;
 
   /* Borders */
-  --border-color: #333333;
-  --border-subtle: #2a2a2a;
+  --border-color: rgba(255, 255, 255, 0.06);
+  --border-subtle: rgba(255, 255, 255, 0.03);
 
   /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
+  --shadow-glow: 0 0 20px rgba(212, 165, 116, 0.08);
 
   /* Border radius */
   --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
 
   /* Spacing */
   --space-xs: 4px;
@@ -50,23 +70,74 @@
   --space-xl: 32px;
 
   /* Typography */
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-display: 'Syne', 'Inter', system-ui, sans-serif;
+  --font-sans: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
 }
 
+[data-theme="light"] {
+  --bg-primary: #f5f3ef;
+  --bg-secondary: #ffffff;
+  --bg-elevated: #f0ece6;
+  --bg-surface: #faf8f5;
+
+  --glass-bg: rgba(255, 255, 255, 0.85);
+  --glass-border: rgba(0, 0, 0, 0.06);
+
+  --sidebar-bg: #faf8f5;
+  --sidebar-hover: rgba(196, 148, 78, 0.08);
+  --sidebar-active: rgba(196, 148, 78, 0.12);
+
+  --login-bg: #f5f3ef;
+  --login-card-bg: #ffffff;
+  --login-input-bg: #f0ece6;
+
+  --accent-gold: #c4944e;
+  --accent-gold-hover: #b5853f;
+  --accent-gold-muted: rgba(196, 148, 78, 0.10);
+
+  --text-primary: #1a1815;
+  --text-secondary: #6b6560;
+  --text-muted: #a09a94;
+
+  --border-color: rgba(0, 0, 0, 0.08);
+  --border-subtle: rgba(0, 0, 0, 0.04);
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);
+  --shadow-glow: 0 0 20px rgba(196, 148, 78, 0.06);
+}
+
+/* ========================================
+   BASE
+   ======================================== */
+
 body {
   background-color: var(--bg-primary);
   color: var(--text-primary);
   font-family: var(--font-sans);
   margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* === Card Components === */
+/* ========================================
+   CARDS
+   ======================================== */
+
 .card {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   padding: var(--space-lg);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--glass-border);
 }
 
 .card-elevated {
@@ -76,48 +147,67 @@ body {
   padding: var(--space-lg);
 }
 
-/* === Status Badges === */
+/* ========================================
+   BADGES
+   ======================================== */
+
 .badge {
   display: inline-flex;
   align-items: center;
-  padding: 2px 10px;
+  padding: 3px 10px;
   border-radius: 20px;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  font-family: var(--font-sans);
 }
 
-.badge-available { background: rgba(34, 197, 94, 0.15); color: var(--status-available); }
-.badge-occupied { background: rgba(59, 130, 246, 0.15); color: var(--status-occupied); }
-.badge-cleaning { background: rgba(234, 179, 8, 0.15); color: var(--status-cleaning); }
-.badge-maintenance { background: rgba(239, 68, 68, 0.15); color: var(--status-maintenance); }
-.badge-pending { background: rgba(234, 179, 8, 0.15); color: var(--status-cleaning); }
-.badge-confirmed { background: rgba(59, 130, 246, 0.15); color: var(--status-occupied); }
-.badge-success { background: rgba(34, 197, 94, 0.15); color: var(--success); }
-.badge-error { background: rgba(239, 68, 68, 0.15); color: var(--error); }
-.badge-info { background: rgba(59, 130, 246, 0.15); color: var(--info); }
+.badge-available { background: rgba(34, 197, 94, 0.12); color: var(--status-available); }
+.badge-occupied { background: rgba(59, 130, 246, 0.12); color: var(--status-occupied); }
+.badge-cleaning { background: rgba(234, 179, 8, 0.12); color: var(--status-cleaning); }
+.badge-maintenance { background: rgba(239, 68, 68, 0.12); color: var(--status-maintenance); }
+.badge-pending { background: rgba(234, 179, 8, 0.12); color: var(--status-cleaning); }
+.badge-confirmed { background: rgba(59, 130, 246, 0.12); color: var(--status-occupied); }
+.badge-success { background: rgba(34, 197, 94, 0.12); color: var(--success); }
+.badge-error { background: rgba(239, 68, 68, 0.12); color: var(--error); }
+.badge-info { background: rgba(59, 130, 246, 0.12); color: var(--info); }
+.badge-warning { background: rgba(234, 179, 8, 0.12); color: var(--warning); }
+
+/* ========================================
+   KPI CARDS
+   ======================================== */
 
-/* === KPI Cards === */
 .kpi-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
+  border-top: 3px solid var(--accent-gold);
   border-radius: var(--radius-lg);
   padding: var(--space-lg);
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.kpi-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow);
 }
 
 .kpi-card .kpi-value {
   font-size: 2rem;
   font-weight: 700;
   color: var(--text-primary);
+  font-family: var(--font-display);
 }
 
 .kpi-card .kpi-label {
-  font-size: 0.875rem;
+  font-size: 0.8rem;
   color: var(--text-secondary);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
 .kpi-card .kpi-trend {
@@ -128,7 +218,10 @@ body {
 .kpi-trend.positive { color: var(--success); }
 .kpi-trend.negative { color: var(--error); }
 
-/* === Buttons === */
+/* ========================================
+   BUTTONS
+   ======================================== */
+
 .btn-gold {
   background: var(--accent-gold);
   color: #000;
@@ -137,12 +230,15 @@ body {
   border-radius: var(--radius-md);
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.2s;
-  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  font-size: 0.85rem;
+  font-family: var(--font-sans);
 }
 
 .btn-gold:hover {
   background: var(--accent-gold-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-outline {
@@ -152,13 +248,15 @@ body {
   padding: 10px 20px;
   border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  font-size: 0.85rem;
+  font-family: var(--font-sans);
 }
 
 .btn-outline:hover {
   border-color: var(--accent-gold);
   color: var(--accent-gold);
+  transform: translateY(-1px);
 }
 
 .btn-sm {
@@ -167,51 +265,60 @@ body {
 }
 
 .btn-danger {
-  background: rgba(239, 68, 68, 0.15);
+  background: rgba(239, 68, 68, 0.1);
   color: var(--error);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid rgba(239, 68, 68, 0.2);
   padding: 10px 20px;
   border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  font-size: 0.85rem;
+  font-family: var(--font-sans);
 }
 
 .btn-danger:hover {
-  background: rgba(239, 68, 68, 0.25);
+  background: rgba(239, 68, 68, 0.2);
+  transform: translateY(-1px);
 }
 
 .btn-success {
-  background: rgba(34, 197, 94, 0.15);
+  background: rgba(34, 197, 94, 0.1);
   color: var(--success);
-  border: 1px solid rgba(34, 197, 94, 0.3);
+  border: 1px solid rgba(34, 197, 94, 0.2);
   padding: 10px 20px;
   border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  font-size: 0.85rem;
+  font-family: var(--font-sans);
 }
 
 .btn-success:hover {
-  background: rgba(34, 197, 94, 0.25);
+  background: rgba(34, 197, 94, 0.2);
+  transform: translateY(-1px);
 }
 
-/* === Form Inputs === */
+/* ========================================
+   FORM INPUTS
+   ======================================== */
+
 .input-dark {
   background: var(--bg-elevated);
   border: 1px solid var(--border-color);
   color: var(--text-primary);
   padding: 10px 14px;
   border-radius: var(--radius-md);
-  font-size: 0.875rem;
+  font-size: 0.85rem;
   width: 100%;
   outline: none;
-  transition: border-color 0.2s;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
   box-sizing: border-box;
+  font-family: var(--font-sans);
 }
 
 .input-dark:focus {
   border-color: var(--accent-gold);
+  box-shadow: 0 0 0 3px var(--accent-gold-muted);
 }
 
 .input-dark::placeholder {
@@ -224,27 +331,33 @@ body {
   color: var(--text-primary);
   padding: 10px 14px;
   border-radius: var(--radius-md);
-  font-size: 0.875rem;
+  font-size: 0.85rem;
   width: 100%;
   outline: none;
   cursor: pointer;
+  font-family: var(--font-sans);
 }
 
 .select-dark:focus {
   border-color: var(--accent-gold);
+  box-shadow: 0 0 0 3px var(--accent-gold-muted);
 }
 
 .label-dark {
   color: var(--text-secondary);
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
   margin-bottom: var(--space-xs);
   display: block;
+  font-family: var(--font-sans);
 }
 
-/* === Tables === */
+/* ========================================
+   TABLES
+   ======================================== */
+
 .table-dark {
   width: 100%;
   border-collapse: collapse;
@@ -254,25 +367,29 @@ body {
   text-align: left;
   padding: 12px 16px;
   color: var(--text-secondary);
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
   border-bottom: 1px solid var(--border-color);
+  font-family: var(--font-sans);
 }
 
 .table-dark td {
   padding: 12px 16px;
   border-bottom: 1px solid var(--border-subtle);
   color: var(--text-primary);
-  font-size: 0.875rem;
+  font-size: 0.85rem;
 }
 
 .table-dark tr:hover {
   background: var(--bg-elevated);
 }
 
-/* === Grid Layouts === */
+/* ========================================
+   GRID LAYOUTS
+   ======================================== */
+
 .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
 .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
 .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
@@ -287,20 +404,24 @@ body {
   .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
 }
 
-/* === Room Grid Cards === */
+/* ========================================
+   ROOM GRID CARDS
+   ======================================== */
+
 .room-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   padding: var(--space-md);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.25s ease;
   border-left: 4px solid var(--border-color);
 }
 
 .room-card:hover {
   background: var(--bg-elevated);
-  transform: translateY(-1px);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
 .room-card.available { border-left-color: var(--status-available); }
@@ -312,6 +433,7 @@ body {
   font-size: 1.125rem;
   font-weight: 700;
   color: var(--text-primary);
+  font-family: var(--font-display);
 }
 
 .room-card .room-info {
@@ -320,14 +442,18 @@ body {
   margin-top: var(--space-xs);
 }
 
-/* === Modal === */
+/* ========================================
+   MODAL
+   ======================================== */
+
 .modal-overlay-dark {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -345,6 +471,7 @@ body {
   max-height: 85vh;
   overflow-y: auto;
   box-shadow: var(--shadow-lg);
+  animation: slideUp 0.3s ease-out;
 }
 
 .modal-content-dark h2 {
@@ -352,9 +479,23 @@ body {
   margin-top: 0;
   margin-bottom: var(--space-lg);
   font-size: 1.25rem;
+  font-family: var(--font-display);
 }
 
-/* === Search Input === */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ========================================
+   SEARCH BAR
+   ======================================== */
+
 .search-bar {
   display: flex;
   align-items: center;
@@ -362,11 +503,12 @@ body {
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   padding: 0 var(--space-md);
-  transition: border-color 0.2s;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .search-bar:focus-within {
   border-color: var(--accent-gold);
+  box-shadow: 0 0 0 3px var(--accent-gold-muted);
 }
 
 .search-bar input {
@@ -376,14 +518,18 @@ body {
   padding: 10px;
   flex: 1;
   outline: none;
-  font-size: 0.875rem;
+  font-size: 0.85rem;
+  font-family: var(--font-sans);
 }
 
 .search-bar input::placeholder {
   color: var(--text-muted);
 }
 
-/* === Tab/Filter Pills === */
+/* ========================================
+   FILTER PILLS
+   ======================================== */
+
 .filter-pills {
   display: flex;
   gap: var(--space-sm);
@@ -396,15 +542,17 @@ body {
   font-size: 0.8rem;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
   background: var(--bg-elevated);
   color: var(--text-secondary);
   border: 1px solid var(--border-color);
+  font-family: var(--font-sans);
 }
 
 .filter-pill:hover {
   color: var(--accent-gold);
   border-color: var(--accent-gold);
+  transform: translateY(-1px);
 }
 
 .filter-pill.active {
@@ -413,7 +561,10 @@ body {
   border-color: var(--accent-gold);
 }
 
-/* === Page Header === */
+/* ========================================
+   PAGE HEADER
+   ======================================== */
+
 .page-header {
   display: flex;
   justify-content: space-between;
@@ -426,22 +577,38 @@ body {
   font-size: 1.5rem;
   font-weight: 700;
   margin: 0;
+  font-family: var(--font-display);
 }
 
-/* === Empty State === */
+/* ========================================
+   EMPTY STATE
+   ======================================== */
+
 .empty-state {
   text-align: center;
-  padding: var(--space-xl) * 2;
+  padding: var(--space-xl);
   color: var(--text-muted);
 }
 
 .empty-state p {
-  font-size: 1rem;
+  font-size: 0.95rem;
   margin-top: var(--space-md);
 }
 
-/* === Shift Schedule Colors === */
-.shift-morning { background: rgba(234, 179, 8, 0.2); color: #eab308; }
-.shift-afternoon { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
-.shift-night { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
-.shift-off { background: rgba(107, 114, 128, 0.2); color: #6b7280; }
+/* ========================================
+   SHIFT SCHEDULE
+   ======================================== */
+
+.shift-morning { background: rgba(234, 179, 8, 0.15); color: #eab308; }
+.shift-afternoon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
+.shift-night { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
+.shift-off { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
+
+/* ========================================
+   FINANCIAL VALUES
+   ======================================== */
+
+.money-value {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}