-
Analyzing your requirements and generating your app…
-
-
Loading…
+
+
+
+
Primera iteración operativa
+
Controla mesas, comandas y cocina con un dashboard táctil y claro.
+
Un punto de partida usable para meseros y cocina: abre una mesa, agrega productos con notas, sigue el estado de la orden y cobra cuando esté lista.
+
+
+
+
+ Mesas ocupadas
+ {{ occupied_tables }}
+
+
+
+
+ Productos activos
+ {{ available_products }}
+
+
+
+
+ Ventas de hoy
+ ${{ daily_revenue|floatformat:2 }}
+
+
+
+
+
+
+
Orden activa
+
Mesa 4
+
2x Pasta trufa · 1x Limonada
+
Lista para cobrar
+
+
+
Cocina
+
{{ kitchen_orders|length }} órdenes
+
Vista rápida para preparación
+
+
+
+
AppWizzy AI is collecting your requirements and applying the first changes.
- This page will refresh automatically as the plan is implemented.
-
- Runtime: Django {{ django_version }} · Python {{ python_version }}
- — UTC {{ current_time|date:"Y-m-d H:i:s" }}
-
-
+
+
+
+
+
+
+ Flujo principal
+
Dashboard de mesas
+
+
Toca una mesa para registrar productos, notas para cocina y revisar la comanda activa.
+
+
+
+
+
+
+
+ Ventas rápidas
+
Top productos
+
+
+ {% if top_products %}
+
+ {% for product in top_products %}
+
+
+
{{ product.name }}
+
{{ product.category }}
+
+
{{ product.sold }} vendidos
+
+ {% endfor %}
+
+ {% else %}
+
Todavía no hay ventas pagadas para mostrar tendencias.
+ {% endif %}
+
+
+
+
+
+
+
+
+
+
+
+
+ Seguimiento
+
Órdenes recientes
+
+
+ {% if recent_orders %}
+
+ {% else %}
+
Aún no hay órdenes. Abre una mesa y agrega el primer producto.
+ {% endif %}
+
+
+
+
+
+ {% if kitchen_orders %}
+
+ {% for order in kitchen_orders %}
+
+
+
+
#{{ order.id }} · {{ order.table.name }}
+
{{ order.get_status_display }}
+
+
{{ order.get_status_display }}
+
+
+ {% for item in order.items.all %}
+ - {{ item.quantity }} × {{ item.product.name }}{% if item.note %} — {{ item.note }}{% endif %}
+ {% endfor %}
+
+
+ {% endfor %}
+
+ {% else %}
+
La cocina está al día. No hay comandas pendientes.
+ {% endif %}
+
+
+
+
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/core/templates/core/kitchen.html b/core/templates/core/kitchen.html
new file mode 100644
index 0000000..9021c6b
--- /dev/null
+++ b/core/templates/core/kitchen.html
@@ -0,0 +1,52 @@
+{% extends "base.html" %}
+
+{% block title %}{{ meta_title }}{% endblock %}
+{% block meta_description %}{{ meta_description }}{% endblock %}
+
+{% block content %}
+
+
+
+
+
KDS
+
Pantalla de cocina
+
Órdenes pendientes y en preparación, listas para seguir en prioridad visual.
+
+
+
+
+ {% if orders %}
+
+ {% for order in orders %}
+
+
+
+ {{ order.table.name }}
+
Orden #{{ order.id }}
+
+
{{ order.get_status_display }}
+
+ {% endfor %}
+
+ {% else %}
+
+
No hay órdenes pendientes
+
Cuando un mesero envíe una comanda, aparecerá aquí automáticamente.
+
Volver al dashboard
+
+ {% endif %}
+
+{% endblock %}
diff --git a/core/templates/core/order_detail.html b/core/templates/core/order_detail.html
new file mode 100644
index 0000000..b31c91d
--- /dev/null
+++ b/core/templates/core/order_detail.html
@@ -0,0 +1,91 @@
+{% extends "base.html" %}
+
+{% block title %}{{ meta_title }}{% endblock %}
+{% block meta_description %}{{ meta_description }}{% endblock %}
+
+{% block content %}
+
+
+
+
+
Orden / Facturación
+
Orden #{{ order.id }}
+
{{ order.table.name }} · {{ order.get_status_display }} · {{ order.created_at|date:"d M Y · H:i" }}
+
+
+
+
+
+
+
+
+
+ Detalle
+
Recibo en vivo
+
+
{{ order.get_status_display }}
+
+ {% for item in order.items.all %}
+
+
+
{{ item.quantity }} × {{ item.product.name }}
+
{% if item.note %}{{ item.note }}{% else %}Preparación estándar{% endif %}
+
+
${{ item.line_total|floatformat:2 }}
+
+ {% endfor %}
+
+
+
+
+
+
+ Siguiente acción
+
Flujo operativo
+
+
+
Abierta
+
En preparación
+
Lista
+
Pagada
+
+ {% for status, form in status_forms.items %}
+
+ {% endfor %}
+
+ {% else %}
+
+
Cuenta cerrada
+
La orden ya fue cobrada y la mesa quedó disponible para un nuevo servicio.
+
Volver al dashboard
+
+
+
+
+{% endblock %}
diff --git a/core/templates/core/table_detail.html b/core/templates/core/table_detail.html
new file mode 100644
index 0000000..5fe1049
--- /dev/null
+++ b/core/templates/core/table_detail.html
@@ -0,0 +1,88 @@
+{% extends "base.html" %}
+
+{% block title %}{{ meta_title }}{% endblock %}
+{% block meta_description %}{{ meta_description }}{% endblock %}
+
+{% block content %}
+
+
+
+
+
Mesero / Comanda
+
{{ table.name }}
+
{{ table.seats }} puestos · Estado actual: {{ table.get_status_display }}
+
+
+
Volver al dashboard
+ {% if current_order %}
+
Ver recibo actual
+ {% endif %}
+
+
+
+
+
+
+
+
+ Agregar ítems
+
Nueva línea de comanda
+
+
+
+
+
+
+
+ Orden activa
+
{% if current_order %}Comanda #{{ current_order.id }}{% else %}Sin comanda todavía{% endif %}
+
+ {% if current_order %}
+
{{ current_order.get_status_display }}
+ {% endif %}
+
+ {% for item in current_order.items.all %}
+
+
+
{{ item.quantity }} × {{ item.product.name }}
+
{% if item.note %}{{ item.note }}{% else %}Sin nota adicional{% endif %}
+
+
${{ item.line_total|floatformat:2 }}
+
+ {% endfor %}
+
+
Mesa lista para abrir
+
Agrega el primer producto para crear automáticamente la comanda activa.
+
+
+
+
+{% endblock %}
diff --git a/core/templates/registration/login.html b/core/templates/registration/login.html
new file mode 100644
index 0000000..90d37f0
--- /dev/null
+++ b/core/templates/registration/login.html
@@ -0,0 +1,42 @@
+{% extends "base.html" %}
+
+{% block title %}Acceso POS | Restaurante{% endblock %}
+{% block meta_description %}Acceso seguro para Admin, Mesero y Cocina dentro del POS del restaurante.{% endblock %}
+
+{% block content %}
+
+
+
+
+ Acceso seguro
+ Iniciar sesión
+ Usa tu cuenta para entrar como Admin, Mesero o Cocina.
+
+
+
+
+
JWT API: /api/auth/token/
+
Perfil actual: /api/auth/me/
+
+
+
+{% endblock %}
diff --git a/core/tests.py b/core/tests.py
index 7ce503c..d165c31 100644
--- a/core/tests.py
+++ b/core/tests.py
@@ -1,3 +1,82 @@
+from django.contrib.auth.models import User
from django.test import TestCase
+from django.urls import reverse
+from rest_framework.test import APIClient
-# Create your tests here.
+from .models import Order, Product, Table, UserRole
+
+
+class PosWorkflowTests(TestCase):
+ def setUp(self):
+ self.table = Table.objects.create(name="Mesa 1", seats=4)
+ self.product = Product.objects.create(name="Burger clásica", category="Cocina", price="12.50")
+ self.waiter = User.objects.create_user(username="mesero", password="clave12345")
+ UserRole.objects.filter(user=self.waiter).update(role=UserRole.Role.WAITER)
+ self.kitchen = User.objects.create_user(username="cocina", password="clave12345")
+ UserRole.objects.filter(user=self.kitchen).update(role=UserRole.Role.KITCHEN)
+
+ def test_home_requires_login(self):
+ response = self.client.get(reverse("home"))
+ self.assertEqual(response.status_code, 302)
+ self.assertIn(reverse("login"), response.url)
+
+ def test_add_item_creates_active_order_and_marks_table_occupied(self):
+ self.client.login(username="mesero", password="clave12345")
+ response = self.client.post(
+ reverse("table_detail", args=[self.table.pk]),
+ {"product": self.product.pk, "quantity": 2, "note": "sin cebolla"},
+ follow=True,
+ )
+
+ self.table.refresh_from_db()
+ order = Order.objects.get(table=self.table)
+
+ self.assertEqual(response.status_code, 200)
+ self.assertEqual(order.status, Order.Status.OPEN)
+ self.assertEqual(order.items.count(), 1)
+ self.assertEqual(self.table.status, Table.Status.OCCUPIED)
+
+ def test_mark_paid_frees_table(self):
+ self.client.login(username="mesero", password="clave12345")
+ order = Order.objects.create(table=self.table, status=Order.Status.READY)
+ self.table.status = Table.Status.OCCUPIED
+ self.table.save(update_fields=["status", "updated_at"])
+
+ response = self.client.post(
+ reverse("order_detail", args=[order.pk]),
+ {"status": Order.Status.PAID},
+ follow=True,
+ )
+
+ order.refresh_from_db()
+ self.table.refresh_from_db()
+
+ self.assertEqual(response.status_code, 200)
+ self.assertEqual(order.status, Order.Status.PAID)
+ self.assertEqual(self.table.status, Table.Status.FREE)
+
+ def test_kitchen_screen_blocks_waiter_role(self):
+ self.client.login(username="mesero", password="clave12345")
+ response = self.client.get(reverse("kitchen_board"), follow=True)
+ self.assertEqual(response.status_code, 200)
+ self.assertRedirects(response, reverse("home"))
+
+ def test_kitchen_role_can_open_kds(self):
+ self.client.login(username="cocina", password="clave12345")
+ response = self.client.get(reverse("kitchen_board"))
+ self.assertEqual(response.status_code, 200)
+
+ def test_jwt_login_and_me_endpoint(self):
+ api_client = APIClient()
+ token_response = api_client.post(
+ reverse("token_obtain_pair"),
+ {"username": "mesero", "password": "clave12345"},
+ format="json",
+ )
+ self.assertEqual(token_response.status_code, 200)
+ self.assertIn("access", token_response.data)
+
+ api_client.credentials(HTTP_AUTHORIZATION=f"Bearer {token_response.data['access']}")
+ me_response = api_client.get(reverse("current_user_api"))
+ self.assertEqual(me_response.status_code, 200)
+ self.assertEqual(me_response.data["role"], UserRole.Role.WAITER)
diff --git a/core/urls.py b/core/urls.py
index 6299e3d..2cdb4cc 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -1,7 +1,27 @@
+from django.contrib.auth.views import LoginView, LogoutView
from django.urls import path
+from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
-from .views import home
+from .api import current_user_api
+from .forms import LoginForm
+from .views import home, kitchen_board, order_detail, table_detail
urlpatterns = [
path("", home, name="home"),
+ path(
+ "login/",
+ LoginView.as_view(
+ template_name="registration/login.html",
+ authentication_form=LoginForm,
+ redirect_authenticated_user=True,
+ ),
+ name="login",
+ ),
+ path("logout/", LogoutView.as_view(), name="logout"),
+ path("kitchen/", kitchen_board, name="kitchen_board"),
+ path("tables/
/", table_detail, name="table_detail"),
+ path("orders//", order_detail, name="order_detail"),
+ path("api/auth/token/", TokenObtainPairView.as_view(), name="token_obtain_pair"),
+ path("api/auth/token/refresh/", TokenRefreshView.as_view(), name="token_refresh"),
+ path("api/auth/me/", current_user_api, name="current_user_api"),
]
diff --git a/core/views.py b/core/views.py
index c9aed12..d0be6b8 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,25 +1,162 @@
-import os
-import platform
+from functools import wraps
+from urllib.parse import quote
-from django import get_version as django_version
-from django.shortcuts import render
+from django.contrib import messages
+from django.db import transaction
+from django.db.models import DecimalField, ExpressionWrapper, F, Prefetch, Sum
+from django.shortcuts import get_object_or_404, redirect, render
from django.utils import timezone
+from .forms import AddOrderItemForm, OrderStatusForm
+from .models import Order, Product, Table, UserRole
+
+LINE_TOTAL = ExpressionWrapper(
+ F("items__quantity") * F("items__product__price"),
+ output_field=DecimalField(max_digits=10, decimal_places=2),
+)
+
+
+def role_required(*allowed_roles):
+ def decorator(view_func):
+ @wraps(view_func)
+ def wrapped(request, *args, **kwargs):
+ if not request.user.is_authenticated:
+ return redirect(f"/login/?next={quote(request.get_full_path())}")
+
+ resolved_role = UserRole.resolve_for(request.user)
+ if allowed_roles and resolved_role not in allowed_roles:
+ messages.error(request, "Tu rol no tiene acceso a esta sección.")
+ return redirect("home")
+ return view_func(request, *args, **kwargs)
+
+ return wrapped
+
+ return decorator
+
+
+def _dashboard_context():
+ active_orders = Order.objects.exclude(status=Order.Status.PAID).prefetch_related("items__product").order_by("-created_at")
+ tables = Table.objects.prefetch_related(
+ Prefetch("orders", queryset=active_orders, to_attr="open_orders_cache")
+ )
+ recent_orders = Order.objects.select_related("table").prefetch_related("items__product")[:6]
+ kitchen_orders = (
+ Order.objects.filter(status__in=[Order.Status.OPEN, Order.Status.PREPARING])
+ .select_related("table")
+ .prefetch_related("items__product")[:5]
+ )
+ daily_revenue = (
+ Order.objects.filter(status=Order.Status.PAID, paid_at__date=timezone.localdate())
+ .aggregate(total=Sum(LINE_TOTAL))["total"]
+ or 0
+ )
+ top_products = (
+ Product.objects.filter(order_items__order__status=Order.Status.PAID)
+ .annotate(sold=Sum("order_items__quantity"))
+ .order_by("-sold", "name")[:4]
+ )
+
+ return {
+ "tables": tables,
+ "recent_orders": recent_orders,
+ "kitchen_orders": kitchen_orders,
+ "available_products": Product.objects.filter(is_available=True).count(),
+ "occupied_tables": Table.objects.filter(status=Table.Status.OCCUPIED).count(),
+ "daily_revenue": daily_revenue,
+ "top_products": top_products,
+ "meta_title": "Restaurante POS | Operación de mesas, cocina y cobro",
+ "meta_description": "Dashboard táctil para controlar mesas, comandas, cocina y cobro desde una sola interfaz ligera.",
+ }
+
+
+@role_required(UserRole.Role.ADMIN, UserRole.Role.WAITER, UserRole.Role.KITCHEN)
def home(request):
- """Render the landing screen with loader and environment details."""
- host_name = request.get_host().lower()
- agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
- now = timezone.now()
+ context = _dashboard_context()
+ context["resolved_user_role"] = UserRole.label_for(request.user)
+ return render(request, "core/index.html", context)
+
+
+@role_required(UserRole.Role.ADMIN, UserRole.Role.WAITER)
+def table_detail(request, table_id):
+ table = get_object_or_404(
+ Table.objects.prefetch_related(
+ Prefetch(
+ "orders",
+ queryset=Order.objects.exclude(status=Order.Status.PAID).prefetch_related("items__product").order_by("-created_at"),
+ to_attr="open_orders_cache",
+ )
+ ),
+ pk=table_id,
+ )
+ current_order = table.current_order
+
+ if request.method == "POST":
+ form = AddOrderItemForm(request.POST)
+ if form.is_valid():
+ with transaction.atomic():
+ if current_order is None:
+ current_order = Order.objects.create(table=table)
+ item = form.save(commit=False)
+ item.order = current_order
+ item.save()
+ if table.status != Table.Status.OCCUPIED:
+ table.status = Table.Status.OCCUPIED
+ table.save(update_fields=["status", "updated_at"])
+ messages.success(request, f"Se agregó {item.product.name} a {table.name}.")
+ return redirect("table_detail", table_id=table.pk)
+ else:
+ form = AddOrderItemForm()
context = {
- "project_name": "New Style",
- "agent_brand": agent_brand,
- "django_version": django_version(),
- "python_version": platform.python_version(),
- "current_time": now,
- "host_name": host_name,
- "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
- "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+ "table": table,
+ "current_order": current_order,
+ "form": form,
+ "meta_title": f"{table.name} | Comanda activa",
+ "meta_description": f"Captura de comandas y notas para {table.name}.",
+ "resolved_user_role": UserRole.label_for(request.user),
}
- return render(request, "core/index.html", context)
+ return render(request, "core/table_detail.html", context)
+
+
+@role_required(UserRole.Role.ADMIN, UserRole.Role.WAITER, UserRole.Role.KITCHEN)
+def order_detail(request, order_id):
+ order = get_object_or_404(Order.objects.select_related("table").prefetch_related("items__product"), pk=order_id)
+
+ if request.method == "POST":
+ form = OrderStatusForm(request.POST, order=order)
+ if form.is_valid():
+ next_status = form.cleaned_data["status"]
+ with transaction.atomic():
+ order.advance_to(next_status)
+ messages.success(request, f"La orden #{order.pk} ahora está {order.get_status_display().lower()}.")
+ return redirect("order_detail", order_id=order.pk)
+ status_forms = {
+ status: OrderStatusForm(order=order, initial={"status": status})
+ for status in order.allowed_transitions()
+ }
+
+ context = {
+ "order": order,
+ "status_forms": status_forms,
+ "meta_title": f"Orden #{order.pk} | {order.table.name}",
+ "meta_description": f"Detalle de la orden #{order.pk} con total, ítems y estado operativo.",
+ "resolved_user_role": UserRole.label_for(request.user),
+ }
+ return render(request, "core/order_detail.html", context)
+
+
+@role_required(UserRole.Role.ADMIN, UserRole.Role.KITCHEN)
+def kitchen_board(request):
+ orders = (
+ Order.objects.filter(status__in=[Order.Status.OPEN, Order.Status.PREPARING])
+ .select_related("table")
+ .prefetch_related("items__product")
+ )
+ context = {
+ "orders": orders,
+ "meta_title": "KDS | Cocina pendiente",
+ "meta_description": "Pantalla de cocina con órdenes pendientes de preparación.",
+ "resolved_user_role": UserRole.label_for(request.user),
+ }
+ return render(request, "core/kitchen.html", context)
diff --git a/requirements.txt b/requirements.txt
index e22994c..a415ed8 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,3 +1,5 @@
Django==5.2.7
mysqlclient==2.2.7
python-dotenv==1.1.1
+djangorestframework==3.16.1
+djangorestframework-simplejwt==5.5.1
diff --git a/static/css/custom.css b/static/css/custom.css
index 925f6ed..7e5daed 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,4 +1,597 @@
-/* Custom styles for the application */
-body {
- font-family: system-ui, -apple-system, sans-serif;
+/* Restaurant POS custom theme */
+:root {
+ --pos-primary: #0f766e;
+ --pos-primary-dark: #0b5d57;
+ --pos-secondary: #16324f;
+ --pos-accent: #f97316;
+ --pos-accent-soft: #fff1e8;
+ --pos-surface: #ffffff;
+ --pos-surface-soft: #f5f8fb;
+ --pos-surface-muted: #eef4f7;
+ --pos-border: #d6e1e8;
+ --pos-text: #11243d;
+ --pos-muted: #61728a;
+ --pos-success: #15803d;
+ --pos-shadow: 0 26px 65px rgba(17, 36, 61, 0.12);
+ --pos-radius-xl: 32px;
+ --pos-radius-lg: 24px;
+ --pos-radius-md: 18px;
+ --pos-radius-sm: 12px;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body.pos-app {
+ margin: 0;
+ min-height: 100vh;
+ font-family: 'Inter', sans-serif;
+ color: var(--pos-text);
+ background:
+ radial-gradient(circle at top left, rgba(15, 118, 110, 0.18), transparent 32%),
+ radial-gradient(circle at 85% 10%, rgba(249, 115, 22, 0.14), transparent 25%),
+ linear-gradient(180deg, #fcfefd 0%, #f4f8fb 100%);
+}
+
+h1,
+h2,
+h3,
+h4,
+.navbar-brand strong {
+ font-family: 'Manrope', sans-serif;
+ letter-spacing: -0.03em;
+}
+
+p,
+span,
+a,
+button,
+label,
+input,
+select,
+textarea {
+ font-family: 'Inter', sans-serif;
+}
+
+.page-shell {
+ position: relative;
+ overflow: hidden;
+}
+
+.site-header {
+ background: rgba(255, 255, 255, 0.82);
+ backdrop-filter: blur(18px);
+ border-bottom: 1px solid rgba(214, 225, 232, 0.72);
+}
+
+.navbar {
+ padding: 1rem 0;
+}
+
+.navbar-brand {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.85rem;
+ color: var(--pos-text);
+ text-decoration: none;
+}
+
+.navbar-brand small {
+ display: block;
+ color: var(--pos-muted);
+ font-size: 0.8rem;
+ font-weight: 600;
+}
+
+.brand-mark {
+ width: 48px;
+ height: 48px;
+ border-radius: 16px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 800;
+ color: #fff;
+ background: linear-gradient(135deg, var(--pos-primary) 0%, #15b39d 100%);
+ box-shadow: 0 16px 30px rgba(15, 118, 110, 0.28);
+}
+
+.nav-link {
+ color: var(--pos-muted);
+ font-weight: 600;
+ border-radius: 999px;
+ padding: 0.7rem 1rem !important;
+}
+
+.nav-link:hover,
+.nav-link:focus {
+ color: var(--pos-secondary);
+ background: rgba(15, 118, 110, 0.08);
+}
+
+.navbar-toggler {
+ border: 1px solid var(--pos-border);
+}
+
+.pos-alert {
+ border-radius: var(--pos-radius-sm);
+ border: none;
+ box-shadow: var(--pos-shadow);
+}
+
+.hero-section,
+.dashboard-section,
+.content-section {
+ padding: 2.5rem 0 5rem;
+}
+
+.hero-grid {
+ display: grid;
+ grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
+ gap: 2rem;
+ align-items: center;
+}
+
+.hero-copy {
+ padding: 2rem 0 1rem;
+}
+
+.eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.55rem 0.9rem;
+ border-radius: 999px;
+ color: var(--pos-primary-dark);
+ background: rgba(15, 118, 110, 0.11);
+ font-size: 0.78rem;
+ font-weight: 800;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.hero-copy h1,
+.page-intro h1 {
+ font-size: clamp(2.8rem, 5vw, 4.7rem);
+ line-height: 0.97;
+ margin: 1.25rem 0 1rem;
+}
+
+.hero-text,
+.page-intro p,
+.section-heading p,
+.empty-state-card p,
+.stack-item p,
+.receipt-line p,
+.kds-card p,
+.table-order-preview p,
+.empty-mini,
+.metric-card span {
+ color: var(--pos-muted);
+}
+
+.hero-text {
+ max-width: 56ch;
+ font-size: 1.05rem;
+ line-height: 1.7;
+}
+
+.hero-actions,
+.page-actions,
+.action-stack {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+}
+
+.hero-actions {
+ margin: 2rem 0;
+}
+
+.btn {
+ border-radius: 16px;
+ font-weight: 700;
+ padding: 0.88rem 1.35rem;
+ border: none;
+}
+
+.btn:focus-visible,
+.form-control:focus,
+.form-select:focus,
+textarea:focus {
+ outline: 0;
+ box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.18);
+}
+
+.btn-pos-primary {
+ color: #fff;
+ background: linear-gradient(135deg, var(--pos-primary) 0%, #18a58f 100%);
+ box-shadow: 0 18px 32px rgba(15, 118, 110, 0.24);
+}
+
+.btn-pos-primary:hover,
+.btn-pos-primary:focus {
+ color: #fff;
+ background: linear-gradient(135deg, var(--pos-primary-dark) 0%, #108d79 100%);
+}
+
+.btn-pos-soft {
+ color: var(--pos-secondary);
+ background: rgba(255, 255, 255, 0.88);
+ border: 1px solid rgba(214, 225, 232, 0.95);
+ box-shadow: 0 14px 30px rgba(17, 36, 61, 0.08);
+}
+
+.btn-pos-soft:hover,
+.btn-pos-soft:focus {
+ color: var(--pos-secondary);
+ background: #fff;
+}
+
+.hero-kpis {
+ max-width: 760px;
+}
+
+.metric-card,
+.side-panel-card,
+.panel-card,
+.kds-card,
+.empty-state-card,
+.floating-card {
+ background: rgba(255, 255, 255, 0.92);
+ border: 1px solid rgba(214, 225, 232, 0.84);
+ box-shadow: var(--pos-shadow);
+}
+
+.metric-card {
+ height: 100%;
+ padding: 1.2rem 1.25rem;
+ border-radius: var(--pos-radius-md);
+}
+
+.metric-card strong {
+ display: block;
+ margin-top: 0.5rem;
+ font-size: 1.65rem;
+}
+
+.hero-visual {
+ position: relative;
+ min-height: 500px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.floating-card {
+ position: absolute;
+ width: min(100%, 320px);
+ padding: 1.5rem;
+ border-radius: 28px;
+}
+
+.primary-card {
+ top: 2rem;
+ right: 2rem;
+}
+
+.secondary-card {
+ left: 0;
+ bottom: 5rem;
+}
+
+.floating-card strong {
+ font-size: 1.6rem;
+}
+
+.floating-card p,
+.stack-item p,
+.kitchen-ticket p,
+.receipt-line p,
+.kds-items p {
+ margin: 0.4rem 0 0;
+}
+
+.floating-label,
+.table-label,
+.text-link {
+ color: var(--pos-accent);
+ font-weight: 700;
+ text-decoration: none;
+}
+
+.shape {
+ position: absolute;
+ border-radius: 28px;
+ filter: blur(0.2px);
+}
+
+.shape-sphere {
+ width: 180px;
+ height: 180px;
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 30%, #ffffff 0%, #a7f3d0 42%, rgba(15, 118, 110, 0.1) 72%, transparent 75%);
+ bottom: 0;
+ right: 18%;
+}
+
+.shape-cube {
+ width: 120px;
+ height: 120px;
+ background: linear-gradient(135deg, rgba(249, 115, 22, 0.16), rgba(22, 50, 79, 0.12));
+ transform: rotate(18deg);
+ top: 0;
+ left: 20%;
+}
+
+.section-muted {
+ background: linear-gradient(180deg, rgba(238, 244, 247, 0.55), rgba(255, 255, 255, 0));
+}
+
+.section-heading,
+.page-intro {
+ display: flex;
+ justify-content: space-between;
+ align-items: end;
+ gap: 1rem;
+ margin-bottom: 1.75rem;
+}
+
+.section-heading.compact h2,
+.panel-card h2,
+.kds-card h2,
+.table-card h3 {
+ margin: 0.45rem 0 0;
+ font-size: 1.45rem;
+}
+
+.table-grid,
+.kds-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ gap: 1.15rem;
+}
+
+.table-card,
+.stack-item-link {
+ text-decoration: none;
+ color: inherit;
+}
+
+.table-card {
+ padding: 1.3rem;
+ border-radius: 24px;
+ min-height: 190px;
+ border: 1px solid transparent;
+ transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+ background: rgba(255, 255, 255, 0.88);
+ box-shadow: 0 18px 42px rgba(17, 36, 61, 0.08);
+}
+
+.table-card:hover,
+.stack-item-link:hover,
+.stack-item-link:focus {
+ transform: translateY(-3px);
+ box-shadow: 0 22px 46px rgba(17, 36, 61, 0.12);
+}
+
+.table-card.is-free {
+ border-color: rgba(21, 128, 61, 0.16);
+ background: linear-gradient(180deg, #ffffff 0%, #f5fff8 100%);
+}
+
+.table-card.is-occupied {
+ border-color: rgba(249, 115, 22, 0.18);
+ background: linear-gradient(180deg, #ffffff 0%, #fff8f3 100%);
+}
+
+.table-card-top,
+.receipt-line,
+.receipt-footer,
+.stack-item,
+.kitchen-ticket,
+.workflow-steps {
+ display: flex;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.table-card-top {
+ align-items: start;
+}
+
+.table-order-preview,
+.empty-mini {
+ margin-top: 2.5rem;
+}
+
+.status-pill {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem 0.85rem;
+ border-radius: 999px;
+ font-size: 0.82rem;
+ font-weight: 800;
+}
+
+.status-free {
+ color: var(--pos-primary-dark);
+ background: rgba(15, 118, 110, 0.12);
+}
+
+.status-busy {
+ color: #b45309;
+ background: rgba(249, 115, 22, 0.14);
+}
+
+.status-ready {
+ color: var(--pos-success);
+ background: rgba(21, 128, 61, 0.13);
+}
+
+.side-panel-card,
+.panel-card {
+ padding: 1.5rem;
+ border-radius: var(--pos-radius-lg);
+ height: 100%;
+}
+
+.stack-list,
+.kitchen-preview-list,
+.receipt-lines,
+.kds-items {
+ display: grid;
+ gap: 0.95rem;
+}
+
+.stack-item,
+.kitchen-ticket,
+.receipt-line,
+.workflow-step,
+.kds-items li {
+ padding: 1rem 1.1rem;
+ border-radius: 18px;
+ background: var(--pos-surface-soft);
+ border: 1px solid rgba(214, 225, 232, 0.7);
+}
+
+.receipt-line,
+.stack-item,
+.kitchen-ticket {
+ align-items: center;
+}
+
+.receipt-line strong,
+.stack-item strong,
+.kds-items strong,
+.kitchen-ticket strong {
+ font-size: 1.02rem;
+}
+
+.receipt-footer {
+ align-items: center;
+ margin-top: 1.2rem;
+ padding-top: 1.2rem;
+ border-top: 1px solid rgba(214, 225, 232, 0.8);
+}
+
+.receipt-footer.large strong {
+ font-size: 1.7rem;
+}
+
+.page-intro {
+ align-items: center;
+ margin-bottom: 2rem;
+}
+
+.panel-card .form-control,
+.panel-card .form-select {
+ border-radius: 14px;
+ border-color: var(--pos-border);
+ padding: 0.95rem 1rem;
+}
+
+.form-label {
+ font-weight: 700;
+ color: var(--pos-secondary);
+}
+
+.workflow-steps {
+ flex-direction: column;
+ margin-bottom: 1.2rem;
+}
+
+.workflow-step {
+ font-weight: 700;
+ color: var(--pos-muted);
+}
+
+.workflow-step.active {
+ color: var(--pos-primary-dark);
+ background: rgba(15, 118, 110, 0.12);
+}
+
+.kds-items {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 1rem;
+}
+
+.kds-card {
+ padding: 1.4rem;
+ border-radius: 28px;
+}
+
+.empty-state-card {
+ padding: 2rem;
+ border-radius: 28px;
+}
+
+.empty-state-card.small {
+ padding: 1.5rem;
+}
+
+.empty-state-card.centered {
+ text-align: center;
+}
+
+.paid-state {
+ background: linear-gradient(180deg, #ffffff 0%, #f4fff7 100%);
+}
+
+@media (max-width: 991px) {
+ .hero-grid,
+ .section-heading,
+ .page-intro {
+ grid-template-columns: 1fr;
+ display: grid;
+ align-items: start;
+ }
+
+ .hero-visual {
+ min-height: 360px;
+ margin-top: 1rem;
+ }
+
+ .primary-card {
+ right: 1rem;
+ }
+}
+
+@media (max-width: 767px) {
+ .hero-copy h1,
+ .page-intro h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero-section,
+ .dashboard-section,
+ .content-section {
+ padding: 1.5rem 0 3rem;
+ }
+
+ .hero-actions,
+ .page-actions,
+ .action-stack {
+ flex-direction: column;
+ }
+
+ .primary-card,
+ .secondary-card {
+ position: relative;
+ inset: auto;
+ width: 100%;
+ }
+
+ .hero-visual {
+ display: grid;
+ gap: 1rem;
+ min-height: auto;
+ }
+
+ .shape {
+ display: none;
+ }
}