/* ===========================================
   NoveRest - Módulo Mesero CSS
   Mobile-first, Smartphone optimizado
   Production-ready with Light/Dark theme support
   =========================================== */

:root {
    /* === Layout Dimensions === */
    --mesero-nav-height: 60px;
    --mesero-top-bar-height: 56px;
    --mesero-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --mesero-safe-area-top: env(safe-area-inset-top, 0px);
    --mesero-card-radius: 12px;
    --mesero-touch-target: 44px;

    /* === Spacing Scale === */
    --mesero-spacing-xs: 4px;
    --mesero-spacing-sm: 8px;
    --mesero-spacing-md: 16px;
    --mesero-spacing-lg: 24px;
    --mesero-spacing-xl: 32px;

    /* === Primary Brand Colors (Light Theme) === */
    --mesero-primary: #2563eb;
    --mesero-primary-hover: #1d4ed8;
    --mesero-primary-dark: #1e40af;
    --mesero-primary-light: #dbeafe;
    --mesero-primary-rgb: 37, 99, 235;

    /* === Secondary Colors === */
    --mesero-success: #16a34a;
    --mesero-success-light: #dcfce7;
    --mesero-warning: #f59e0b;
    --mesero-warning-light: #fef3c7;
    --mesero-danger: #dc2626;
    --mesero-danger-light: #fee2e2;
    --mesero-info: #0891b2;
    --mesero-info-light: #cffafe;

    /* === Surface Colors (Light Theme) === */
    --mesero-bg-body: #f8fafc;
    --mesero-bg-surface: #ffffff;
    --mesero-bg-surface-secondary: #f1f5f9;
    --mesero-bg-elevated: #ffffff;

    /* === Text Colors (Light Theme) === */
    --mesero-text-primary: #0f172a;
    --mesero-text-secondary: #475569;
    --mesero-text-muted: #94a3b8;
    --mesero-text-inverse: #ffffff;

    /* === Border Colors (Light Theme) === */
    --mesero-border-color: #e2e8f0;
    --mesero-border-color-light: #f1f5f9;

    /* === Shadow (Light Theme) === */
    --mesero-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --mesero-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --mesero-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --mesero-shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.35);

    /* === Status Colors === */
    --mesero-status-libre: var(--mesero-success);
    --mesero-status-ocupada: var(--mesero-primary);
    --mesero-status-atencion: var(--mesero-warning);
    --mesero-status-urgente: var(--mesero-danger);
    --mesero-status-preparando: var(--mesero-info);
    --mesero-status-listo: var(--mesero-success);
}

/* === Dark Theme Overrides === */
[data-bs-theme="dark"],
[data-theme="dark"] {
    /* Primary Colors (slightly brighter for dark backgrounds) */
    --mesero-primary: #3b82f6;
    --mesero-primary-hover: #60a5fa;
    --mesero-primary-dark: #2563eb;
    --mesero-primary-light: rgba(59, 130, 246, 0.15);

    /* Secondary Colors adjusted for dark */
    --mesero-success: #22c55e;
    --mesero-success-light: rgba(34, 197, 94, 0.15);
    --mesero-warning: #fbbf24;
    --mesero-warning-light: rgba(251, 191, 36, 0.15);
    --mesero-danger: #ef4444;
    --mesero-danger-light: rgba(239, 68, 68, 0.15);
    --mesero-info: #22d3ee;
    --mesero-info-light: rgba(34, 211, 238, 0.15);

    /* Surface Colors */
    --mesero-bg-body: #0f172a;
    --mesero-bg-surface: #1e293b;
    --mesero-bg-surface-secondary: #334155;
    --mesero-bg-elevated: #1e293b;

    /* Text Colors */
    --mesero-text-primary: #f1f5f9;
    --mesero-text-secondary: #cbd5e1;
    --mesero-text-muted: #64748b;
    --mesero-text-inverse: #0f172a;

    /* Border Colors */
    --mesero-border-color: #334155;
    --mesero-border-color-light: #475569;

    /* Shadows (more subtle in dark mode) */
    --mesero-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --mesero-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --mesero-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --mesero-shadow-primary: 0 4px 14px rgba(59, 130, 246, 0.25);
}

/* ===========================================
   Layout Principal
   =========================================== */

.mesero-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--mesero-bg-body);
    color: var(--mesero-text-primary);
}

.mesero-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mesero-top-bar-height);
    padding-top: var(--mesero-safe-area-top);
    background: var(--mesero-bg-surface);
    border-bottom: 1px solid var(--mesero-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--mesero-spacing-md);
    z-index: 1030;
}

.mesero-top-bar__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: center;
}

.mesero-top-bar__left,
.mesero-top-bar__right {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    min-width: 60px;
}

.mesero-top-bar__right {
    justify-content: flex-end;
}

/* Push Notification Toggle */
.mesero-push-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mesero-touch-target);
    height: var(--mesero-touch-target);
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
    position: relative;
}

.mesero-push-toggle:active {
    transform: scale(0.92);
}

.mesero-push-toggle--active {
    color: var(--mesero-primary);
}

.mesero-push-toggle--active:hover {
    background: rgba(37, 99, 235, 0.1);
}

.mesero-push-toggle--inactive {
    color: var(--mesero-text-secondary);
}

.mesero-push-toggle--inactive:hover {
    background: var(--mesero-bg-hover);
    color: var(--mesero-text-primary);
}

.mesero-push-toggle--denied {
    color: var(--mesero-text-disabled, #adb5bd);
    cursor: not-allowed;
    opacity: 0.5;
}

.mesero-push-toggle__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--mesero-border-color);
    border-top-color: var(--mesero-primary);
    border-radius: 50%;
    animation: mesero-push-spin 0.6s linear infinite;
}

@keyframes mesero-push-spin {
    to { transform: rotate(360deg); }
}

.mesero-content {
    flex: 1;
    padding-top: calc(var(--mesero-top-bar-height) + var(--mesero-safe-area-top));
    padding-bottom: calc(var(--mesero-nav-height) + var(--mesero-safe-area-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mesero-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mesero-nav-height) + var(--mesero-safe-area-bottom));
    padding-bottom: var(--mesero-safe-area-bottom);
    background: var(--mesero-bg-surface);
    border-top: 1px solid var(--mesero-border-color);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1030;
}

/* ===========================================
   Bottom Navigation Items
   =========================================== */

.mesero-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: var(--mesero-touch-target);
    min-height: var(--mesero-touch-target);
    padding: var(--mesero-spacing-xs);
    color: var(--mesero-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
    position: relative;
}

.mesero-nav-item:hover,
.mesero-nav-item:focus {
    color: var(--mesero-primary);
    text-decoration: none;
}

.mesero-nav-item.active {
    color: var(--mesero-primary);
}

.mesero-nav-item__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.mesero-nav-item__label {
    font-size: 0.625rem;
    font-weight: 500;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mesero-nav-item__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: white;
    background: var(--bs-danger);
    border-radius: 9px;
}

/* ===========================================
   Indicadores de Estado
   =========================================== */

.mesero-connection-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-secondary);
    transition: background-color 0.3s ease;
}

.mesero-connection-indicator.connected {
    background: var(--bs-success);
    animation: pulse-connection 2s ease-in-out infinite;
}

.mesero-connection-indicator.disconnected {
    background: var(--bs-danger);
}

@keyframes pulse-connection {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===========================================
   Cards (Mesas, Órdenes, etc.)
   =========================================== */

.mesero-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
    padding: var(--mesero-spacing-md);
    margin-bottom: var(--mesero-spacing-md);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mesero-card:active {
    transform: scale(0.98);
}

.mesero-card--mesa {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
}

.mesero-card--mesa.libre {
    border-left: 4px solid var(--mesero-status-libre);
}

.mesero-card--mesa.ocupada {
    border-left: 4px solid var(--mesero-status-ocupada);
}

.mesero-card--mesa.atencion {
    border-left: 4px solid var(--mesero-status-atencion);
    animation: attention-pulse 1.5s ease-in-out infinite;
}

@keyframes attention-pulse {
    0%, 100% { background-color: var(--bs-body-bg); }
    50% { background-color: rgba(var(--bs-warning-rgb), 0.1); }
}

.mesero-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mesero-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.mesero-card__subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    margin: 0;
}

.mesero-card__badge {
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.mesero-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-xs);
}

.mesero-card__footer {
    display: flex;
    gap: var(--mesero-spacing-sm);
    margin-top: var(--mesero-spacing-sm);
}

/* ===========================================
   Catálogo de Productos
   =========================================== */

.mesero-categories {
    display: flex;
    overflow-x: auto;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    padding-bottom: var(--mesero-spacing-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mesero-categories::-webkit-scrollbar {
    display: none;
}

.mesero-category-tab {
    flex-shrink: 0;
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border: 1px solid var(--bs-border-color);
    border-radius: 20px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s ease;
    cursor: pointer;
}

.mesero-category-tab:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.mesero-category-tab.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.mesero-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
}

@media (min-width: 576px) {
    .mesero-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .mesero-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mesero-product-card {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mesero-product-card:active {
    transform: scale(0.98);
}

.mesero-product-card.unavailable {
    opacity: 0.5;
    pointer-events: none;
}

.mesero-product-card__image {
    aspect-ratio: 4/3;
    background: var(--bs-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mesero-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mesero-product-card__image i {
    font-size: 2rem;
    color: var(--bs-secondary);
}

.mesero-product-card__content {
    padding: var(--mesero-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mesero-product-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mesero-product-card__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin: 0;
}

/* ===========================================
   Alertas y Aclaraciones
   =========================================== */

.mesero-alert-card {
    display: flex;
    align-items: flex-start;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
    margin-bottom: var(--mesero-spacing-md);
}

.mesero-alert-card.urgent {
    border-color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.05);
    animation: urgent-pulse 1s ease-in-out infinite;
}

@keyframes urgent-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(var(--bs-danger-rgb), 0); }
}

.mesero-alert-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.mesero-alert-card__icon.cuenta {
    background: rgba(var(--bs-success-rgb), 0.1);
    color: var(--bs-success);
}

.mesero-alert-card__icon.llamada {
    background: rgba(var(--bs-warning-rgb), 0.1);
    color: var(--bs-warning);
}

.mesero-alert-card__icon.listo {
    background: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
}

.mesero-alert-card__icon.urgente {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

.mesero-alert-card__content {
    flex: 1;
    min-width: 0;
}

.mesero-alert-card__title {
    font-weight: 600;
    margin: 0 0 4px 0;
}

.mesero-alert-card__subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    margin: 0 0 8px 0;
}

.mesero-alert-card__time {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

.mesero-alert-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
}

/* ===========================================
   Orden Detail Items
   =========================================== */

.mesero-order-item {
    display: flex;
    align-items: flex-start;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
    border-bottom: 1px solid var(--bs-border-color);
}

.mesero-order-item:last-child {
    border-bottom: none;
}

.mesero-order-item__qty {
    width: 32px;
    height: 32px;
    background: var(--bs-secondary-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.mesero-order-item__info {
    flex: 1;
    min-width: 0;
}

.mesero-order-item__name {
    font-weight: 600;
    margin: 0;
}

.mesero-order-item__details {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    margin: 4px 0 0 0;
}

.mesero-order-item__price {
    font-weight: 600;
    white-space: nowrap;
}

.mesero-order-item__status {
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.mesero-order-item__status.pendiente {
    background: rgba(var(--bs-secondary-rgb), 0.1);
    color: var(--bs-secondary);
}

.mesero-order-item__status.preparando {
    background: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
}

.mesero-order-item__status.listo {
    background: rgba(var(--bs-success-rgb), 0.1);
    color: var(--bs-success);
}

.mesero-order-item__status.servido {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* ===========================================
   Botones y Acciones
   =========================================== */

.mesero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    min-height: var(--mesero-touch-target);
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mesero-btn--primary {
    background: var(--bs-primary);
    color: white;
}

.mesero-btn--primary:hover {
    background: var(--bs-primary);
    filter: brightness(0.9);
}

.mesero-btn--outline {
    background: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

.mesero-btn--outline:hover {
    background: var(--bs-secondary-bg);
}

.mesero-btn--success {
    background: var(--bs-success);
    color: white;
}

.mesero-btn--danger {
    background: var(--bs-danger);
    color: white;
}

.mesero-btn--full {
    width: 100%;
}

.mesero-btn--icon {
    width: var(--mesero-touch-target);
    padding: 0;
}

/* ===========================================
   FAB (Floating Action Button)
   =========================================== */

.mesero-fab {
    position: fixed;
    right: var(--mesero-spacing-md);
    bottom: calc(var(--mesero-nav-height) + var(--mesero-safe-area-bottom) + var(--mesero-spacing-md));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 1020;
}

.mesero-fab:active {
    transform: scale(0.95);
}

.mesero-fab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: white;
    background: var(--bs-danger);
    border-radius: 11px;
}

/* ===========================================
   Empty States
   =========================================== */

.mesero-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mesero-spacing-lg);
    text-align: center;
    min-height: 200px;
}

.mesero-empty-state__icon {
    font-size: 3rem;
    color: var(--bs-secondary);
    margin-bottom: var(--mesero-spacing-md);
}

.mesero-empty-state__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 var(--mesero-spacing-sm) 0;
}

.mesero-empty-state__description {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    margin: 0;
}

/* ===========================================
   Search Bar
   =========================================== */

.mesero-search {
    position: relative;
    padding: var(--mesero-spacing-md);
}

.mesero-search__input {
    width: 100%;
    height: var(--mesero-touch-target);
    padding: 0 var(--mesero-spacing-md) 0 44px;
    font-size: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 22px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.mesero-search__input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.mesero-search__icon {
    position: absolute;
    left: calc(var(--mesero-spacing-md) + 14px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary);
}

/* ===========================================
   Utilities
   =========================================== */

.mesero-page {
    padding: var(--mesero-spacing-md);
}

.mesero-page--full {
    padding: 0;
}

.mesero-divider {
    height: 1px;
    background: var(--bs-border-color);
    margin: var(--mesero-spacing-md) 0;
}

.mesero-text-muted {
    color: var(--bs-secondary);
}

.mesero-text-success {
    color: var(--bs-success);
}

.mesero-text-danger {
    color: var(--bs-danger);
}

.mesero-text-warning {
    color: var(--bs-warning);
}

.mesero-mt-auto {
    margin-top: auto;
}

/* Pull to refresh indicator (visual only) */
.mesero-ptr-indicator {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.2s ease;
}

.mesero-ptr-indicator.active {
    height: 50px;
}

/* ===========================================
   Authentication Loading
   =========================================== */

.auth-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: var(--mesero-spacing-md);
    color: var(--bs-secondary);
}

.auth-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* ===========================================
   PRODUCTION-GRADE UI ADDITIONS
   Dashboard, Components, Pages
   =========================================== */

/* ===========================================
   Dashboard Page
   =========================================== */

.dashboard-page {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-lg);
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mesero-spacing-md);
}

@media (min-width: 576px) {
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

.stat-card:active {
    transform: scale(0.98);
}

.stat-card.highlight {
    border-color: var(--bs-danger);
    animation: stat-highlight 2s ease-in-out infinite;
}

.stat-card.highlight-warn {
    border-color: var(--bs-warning);
    animation: stat-highlight-warn 2s ease-in-out infinite;
}

@keyframes stat-highlight {
    0%, 100% { background-color: var(--bs-body-bg); }
    50% { background-color: rgba(var(--bs-danger-rgb), 0.08); }
}

@keyframes stat-highlight-warn {
    0%, 100% { background-color: var(--bs-body-bg); }
    50% { background-color: rgba(var(--bs-warning-rgb), 0.08); }
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-icon.mesas {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.15), rgba(var(--bs-primary-rgb), 0.05));
    color: var(--bs-primary);
}

.stat-icon.ordenes {
    background: linear-gradient(135deg, rgba(var(--bs-info-rgb), 0.15), rgba(var(--bs-info-rgb), 0.05));
    color: var(--bs-info);
}

.stat-icon.alertas {
    background: linear-gradient(135deg, rgba(var(--bs-danger-rgb), 0.15), rgba(var(--bs-danger-rgb), 0.05));
    color: var(--bs-danger);
}

.stat-icon.alertas.pulse {
    animation: icon-pulse 1.5s ease-in-out infinite;
}

.stat-icon.aclaraciones {
    background: linear-gradient(135deg, rgba(var(--bs-warning-rgb), 0.15), rgba(var(--bs-warning-rgb), 0.05));
    color: var(--bs-warning);
}

.stat-icon.aclaraciones.pulse {
    animation: icon-pulse-warn 1.5s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes icon-pulse-warn {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.stat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Items Listos Alert Banner */
.items-listos-alert {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
    background: linear-gradient(135deg, var(--bs-success), #157347);
    color: white;
    border-radius: var(--mesero-card-radius);
    cursor: pointer;
    transition: transform 0.2s ease;
    animation: items-listos-pulse 2s ease-in-out infinite;
}

.items-listos-alert:hover {
    transform: scale(1.02);
}

.items-listos-alert i:first-child {
    font-size: 1.5rem;
}

.items-listos-alert span {
    flex: 1;
    font-weight: 600;
}

.items-listos-alert i:last-child {
    opacity: 0.8;
}

@keyframes items-listos-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(var(--bs-success-rgb), 0); }
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-md);
}

.quick-actions h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.action-btn:active {
    transform: scale(0.98);
}

.action-btn i {
    font-size: 1.25rem;
}

.action-btn.action-primary {
    background: linear-gradient(135deg, var(--bs-primary), #c73518);
    border: none;
    color: white;
}

.action-btn.action-primary:hover {
    filter: brightness(1.1);
    color: white;
}

/* Recent Section */
.recent-section {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-md);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.section-header a {
    font-size: 0.875rem;
    color: var(--bs-primary);
    text-decoration: none;
}

.section-header a:hover {
    text-decoration: underline;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
}

.recent-item {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
}

.recent-item i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
    flex-shrink: 0;
}

.recent-item.alerta-item i {
    background: rgba(var(--bs-warning-rgb), 0.1);
    color: var(--bs-warning);
}

.recent-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.recent-title {
    font-weight: 600;
    font-size: 0.9375rem;
}

.recent-subtitle {
    font-size: 0.8125rem;
    color: var(--bs-secondary);
}

.recent-time {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    white-space: nowrap;
}

/* Error Toast */
.error-toast {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    background: rgba(var(--bs-danger-rgb), 0.1);
    border: 1px solid var(--bs-danger);
    border-radius: var(--mesero-card-radius);
    color: var(--bs-danger);
    font-size: 0.875rem;
}

/* ===========================================
   Producto Card Component
   =========================================== */

.producto-card {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.producto-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.producto-card:active {
    transform: scale(0.98);
}

.producto-card.agotado {
    opacity: 0.6;
}

.producto-imagen {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--bs-secondary-bg);
    overflow: hidden;
}

.producto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.producto-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bs-secondary-bg), rgba(var(--bs-secondary-rgb), 0.2));
}

.producto-placeholder i {
    font-size: 2.5rem;
    color: var(--bs-secondary);
}

.producto-agotado {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.producto-agotado span {
    background: var(--bs-danger);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.producto-tiempo {
    position: absolute;
    top: var(--mesero-spacing-sm);
    right: var(--mesero-spacing-sm);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.producto-info {
    padding: var(--mesero-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.producto-nombre {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.producto-categoria {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    margin: 0;
}

.producto-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mesero-spacing-sm);
    padding-top: 0;
}

.producto-precio {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin: 0;
}

.btn-agregar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mesero-primary);
    color: var(--mesero-text-inverse);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn-agregar:hover {
    background: var(--mesero-primary-hover);
}

.btn-agregar:active {
    transform: scale(0.9);
    background: var(--mesero-primary-dark);
}

/* ===========================================
   Mesa Card Component
   =========================================== */

.mesa-card {
    display: flex;
    flex-direction: column;
    background: var(--mesero-bg-surface);
    border: 1px solid var(--mesero-border-color);
    border-radius: var(--mesero-card-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
    width: 100%;
}

.mesa-card:hover {
    box-shadow: var(--mesero-shadow-md);
}

.mesa-card:active {
    transform: scale(0.98);
}

.mesa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mesero-spacing-md);
    border-bottom: 1px solid var(--mesero-border-color);
}

.mesa-numero {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--mesero-text-primary);
}

.mesa-estado {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mesa-estado-disponible {
    background: var(--mesero-success-light);
    color: var(--mesero-success);
}

.mesa-estado-ocupada {
    background: var(--mesero-primary-light);
    color: var(--mesero-primary);
}

.mesa-estado-reservada {
    background: var(--mesero-info-light);
    color: var(--mesero-info);
}

.mesa-estado-limpieza {
    background: var(--mesero-warning-light);
    color: var(--mesero-warning);
}

.mesa-estado-bloqueada {
    background: var(--mesero-bg-surface-secondary);
    color: var(--mesero-text-muted);
}

.mesa-body {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
}

.mesa-capacidad {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    font-size: 0.875rem;
    color: var(--bs-secondary);
}

.mesa-capacidad i {
    font-size: 1rem;
}

.mesa-orden-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--mesero-spacing-sm);
    background: var(--bs-secondary-bg);
    border-radius: 8px;
}

.mesa-orden-label {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

.mesa-total {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.mesa-tiempo {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mesa-footer {
    display: flex;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    padding-top: 0;
}

.btn-mesa-accion {
    flex: 1;
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: var(--mesero-bg-surface-secondary);
    color: var(--mesero-text-primary);
}

.btn-mesa-accion:hover {
    background: var(--mesero-border-color);
}

.btn-mesa-accion.primary,
.btn-mesa-accion.btn-agregar,
.btn-mesa-accion.btn-nueva-orden {
    background: var(--mesero-primary);
    color: var(--mesero-text-inverse);
}

.btn-mesa-accion.primary:hover,
.btn-mesa-accion.btn-agregar:hover,
.btn-mesa-accion.btn-nueva-orden:hover {
    background: var(--mesero-primary-hover);
}

.btn-mesa-accion.btn-disponible {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    flex: 1;
}

.btn-mesa-accion.btn-disponible:hover {
    background: rgba(40, 167, 69, 0.2);
}

.btn-mesa-accion.secondary {
    background: var(--mesero-bg-surface-secondary);
    color: var(--mesero-text-primary);
    border: 1px solid var(--mesero-border-color);
}

.btn-mesa-accion.secondary:hover {
    background: var(--mesero-border-color);
}

.mesa-badges {
    position: absolute;
    top: var(--mesero-spacing-sm);
    right: var(--mesero-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mesa-badge-listo,
.mesa-badge-llamada {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.mesa-badge-listo {
    background: var(--mesero-success);
    color: var(--mesero-text-inverse);
    animation: badge-pulse-success 1.5s ease-in-out infinite;
}

.mesa-badge-llamada {
    background: var(--mesero-danger);
    color: var(--mesero-text-inverse);
    animation: badge-pulse-danger 1s ease-in-out infinite;
}

@keyframes badge-pulse-success {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes badge-pulse-danger {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===========================================
   Categorias Tabs Component
   =========================================== */

.categorias-tabs-container {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    padding-bottom: 0;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.categorias-tabs {
    display: flex;
    overflow-x: auto;
    gap: var(--mesero-spacing-sm);
    padding-bottom: var(--mesero-spacing-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.categorias-tabs::-webkit-scrollbar {
    display: none;
}

.categoria-tab {
    flex-shrink: 0;
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border: 1px solid var(--bs-border-color);
    border-radius: 20px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    scroll-snap-align: start;
}

.categoria-tab:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.categoria-tab.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.subcategorias-tabs {
    display: flex;
    overflow-x: auto;
    gap: var(--mesero-spacing-xs);
    padding-bottom: var(--mesero-spacing-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.subcategorias-tabs::-webkit-scrollbar {
    display: none;
}

.subcategoria-tab {
    flex-shrink: 0;
    padding: 4px 12px;
    border: none;
    border-radius: 12px;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.subcategoria-tab:hover {
    background: var(--bs-border-color);
    color: var(--bs-body-color);
}

.subcategoria-tab.active {
    background: var(--bs-primary);
    color: white;
}

/* ===========================================
   Orden Card Component
   =========================================== */

.orden-card {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.orden-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.orden-card:active {
    transform: scale(0.99);
}

.orden-card.tiene-listos {
    border-color: var(--bs-success);
    border-width: 2px;
}

.orden-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--mesero-spacing-md);
    background: var(--bs-secondary-bg);
}

.orden-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orden-folio {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.orden-mesa {
    font-size: 0.8125rem;
    color: var(--bs-secondary);
    margin: 0;
}

.orden-estado-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.orden-estado-badge.pendiente {
    background: rgba(var(--bs-secondary-rgb), 0.15);
    color: var(--bs-secondary);
}

.orden-estado-badge.enviada {
    background: rgba(var(--bs-info-rgb), 0.15);
    color: var(--bs-info);
}

.orden-estado-badge.preparando {
    background: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--bs-warning);
}

.orden-estado-badge.lista {
    background: rgba(var(--bs-success-rgb), 0.15);
    color: var(--bs-success);
}

.orden-body {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
}

.orden-items-preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--bs-secondary);
}

.orden-items-preview span {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
}

.orden-items-count {
    padding: 2px 6px;
    background: var(--bs-secondary-bg);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.orden-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mesero-spacing-md);
    border-top: 1px solid var(--bs-border-color);
}

.orden-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.orden-tiempo {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.orden-acciones {
    display: flex;
    gap: var(--mesero-spacing-sm);
}

/* ===========================================
   Alerta Card Component
   =========================================== */

.alerta-card {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
    overflow: hidden;
    transition: all 0.2s ease;
}

.alerta-card.pendiente {
    border-left: 4px solid var(--bs-warning);
}

.alerta-card.en-camino {
    border-left: 4px solid var(--bs-info);
    background: rgba(var(--bs-info-rgb), 0.03);
}

.alerta-card.atendida {
    opacity: 0.6;
    border-left: 4px solid var(--bs-secondary);
}

.alerta-card.urgente {
    border-left: 4px solid var(--bs-danger);
    animation: alerta-urgente 1s ease-in-out infinite;
}

@keyframes alerta-urgente {
    0%, 100% { background-color: var(--bs-body-bg); }
    50% { background-color: rgba(var(--bs-danger-rgb), 0.08); }
}

.alerta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mesero-spacing-md);
    padding-bottom: var(--mesero-spacing-sm);
}

.alerta-tipo {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
}

.alerta-tipo-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.alerta-tipo-icon.general {
    background: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--bs-warning);
}

.alerta-tipo-icon.cuenta {
    background: rgba(var(--bs-success-rgb), 0.15);
    color: var(--bs-success);
}

.alerta-tipo-icon.ayuda {
    background: rgba(var(--bs-info-rgb), 0.15);
    color: var(--bs-info);
}

.alerta-tipo-icon.agua {
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
}

.alerta-tipo-icon.queja {
    background: rgba(var(--bs-danger-rgb), 0.15);
    color: var(--bs-danger);
}

.alerta-tipo-icon.platillos-listos {
    background: rgba(var(--bs-success-rgb), 0.15);
    color: var(--bs-success);
}

.alerta-card.tipo-platillos-listos {
    border-left: 4px solid var(--bs-success);
    animation: alerta-platillos-listos 2s ease-in-out infinite;
}

@keyframes alerta-platillos-listos {
    0%, 100% { background-color: var(--bs-body-bg); }
    50% { background-color: rgba(var(--bs-success-rgb), 0.08); }
}

.alerta-tipo-text {
    display: flex;
    flex-direction: column;
}

.alerta-tipo-text span:first-child {
    font-weight: 600;
    font-size: 0.9375rem;
}

.alerta-tipo-text span:last-child {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

.alerta-tiempo {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    padding: 4px 8px;
    background: var(--bs-secondary-bg);
    border-radius: 4px;
}

.alerta-body {
    padding: var(--mesero-spacing-md);
    padding-top: 0;
}

.alerta-mesa-info {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-sm);
    background: var(--bs-secondary-bg);
    border-radius: 8px;
}

.alerta-mesa-info i {
    font-size: 1.25rem;
    color: var(--bs-secondary);
}

.alerta-mesa-info span {
    font-weight: 600;
}

.alerta-acciones {
    display: flex;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    padding-top: 0;
}

.btn-alerta {
    flex: 1;
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.btn-alerta.en-camino {
    background: var(--bs-info);
    color: white;
}

.btn-alerta.atender {
    background: var(--bs-success);
    color: white;
}

.btn-alerta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===========================================
   Aclaracion Card Component
   =========================================== */

.aclaracion-card {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mesero-card-radius);
    overflow: hidden;
    margin-bottom: var(--mesero-spacing-md);
}

.aclaracion-card.pendiente {
    border-left: 4px solid var(--bs-warning);
}

.aclaracion-card.respondida {
    opacity: 0.7;
    border-left: 4px solid var(--bs-success);
}

.aclaracion-card.urgente {
    border-left: 4px solid var(--bs-danger);
    animation: alerta-urgente 1.5s ease-in-out infinite;
}

.aclaracion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mesero-spacing-md);
    background: var(--bs-secondary-bg);
}

.aclaracion-origen {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    font-weight: 600;
    font-size: 0.875rem;
}

.aclaracion-origen i {
    color: var(--bs-primary);
}

.aclaracion-tiempo {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

.aclaracion-body {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-md);
}

.aclaracion-orden-info {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-md);
}

.orden-folio {
    font-weight: 700;
    color: var(--bs-primary);
}

.mesa-info {
    font-size: 0.875rem;
    color: var(--bs-secondary);
}

.aclaracion-item {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-sm);
    background: var(--bs-secondary-bg);
    border-radius: 8px;
}

.item-nombre {
    font-weight: 600;
}

.item-cantidad {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    padding: 2px 6px;
    background: var(--bs-body-bg);
    border-radius: 4px;
}

.aclaracion-pregunta {
    display: flex;
    align-items: flex-start;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    background: rgba(var(--bs-warning-rgb), 0.1);
    border-radius: 8px;
}

.aclaracion-pregunta i {
    color: var(--bs-warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.aclaracion-pregunta p {
    margin: 0;
    font-size: 0.9375rem;
}

.aclaracion-opciones {
    font-size: 0.8125rem;
    color: var(--bs-secondary);
}

.opciones-label {
    font-weight: 600;
    margin-right: var(--mesero-spacing-sm);
}

.aclaracion-respuesta {
    display: flex;
    align-items: flex-start;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    background: rgba(var(--bs-success-rgb), 0.1);
    border-radius: 8px;
}

.aclaracion-respuesta i {
    color: var(--bs-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.aclaracion-respuesta p {
    margin: 0;
    font-size: 0.9375rem;
}

.aclaracion-acciones {
    padding: var(--mesero-spacing-md);
    padding-top: 0;
}

.btn-aclaracion {
    width: 100%;
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.btn-aclaracion.btn-responder {
    background: var(--bs-primary);
    color: white;
}

.btn-aclaracion.btn-responder:hover {
    filter: brightness(1.1);
}

.aclaracion-respondida-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-sm);
    color: var(--bs-success);
    font-weight: 600;
}

/* ===========================================
   Page Container Styles
   =========================================== */

/* Mesas Page */
.mesas-page {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-lg);
}

.mesas-resumen {
    display: flex;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
    background: var(--bs-secondary-bg);
    border-radius: var(--mesero-card-radius);
    overflow-x: auto;
}

.resumen-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.resumen-item .numero {
    font-size: 1.5rem;
    font-weight: 700;
}

.resumen-item .label {
    font-size: 0.6875rem;
    color: var(--bs-secondary);
    text-transform: uppercase;
}

.area-grupo {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-md);
}

.area-header {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
}

.area-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.area-header .badge {
    font-size: 0.6875rem;
}

.mesas-page .mesas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--mesero-spacing-md);
}

@media (min-width: 576px) {
    .mesas-page .mesas-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Ordenes Page */
.ordenes-page {
    display: flex;
    flex-direction: column;
}

.ordenes-filtros {
    display: flex;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ordenes-filtros::-webkit-scrollbar {
    display: none;
}

.filtro-btn {
    flex-shrink: 0;
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border: 1px solid var(--bs-border-color);
    border-radius: 20px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filtro-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.filtro-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.ordenes-lista {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-md);
}

/* Catalogo Page */
.catalogo-page {
    display: flex;
    flex-direction: column;
}

.catalogo-search {
    padding: var(--mesero-spacing-md);
    border-bottom: 1px solid var(--bs-border-color);
}

.search-input-wrapper {
    position: relative;
}

.search-input-wrapper input {
    width: 100%;
    height: var(--mesero-touch-target);
    padding: 0 var(--mesero-spacing-md) 0 44px;
    border: 1px solid var(--bs-border-color);
    border-radius: 22px;
    background: var(--bs-body-bg);
    font-size: 1rem;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.search-input-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary);
}

.catalogo-content {
    flex: 1;
    overflow-y: auto;
}

.productos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
}

@media (min-width: 576px) {
    .productos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .productos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Alertas Page */
.alertas-page {
    display: flex;
    flex-direction: column;
}

.alertas-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mesero-spacing-md);
    background: var(--bs-secondary-bg);
}

.resumen-total {
    display: flex;
    align-items: baseline;
    gap: var(--mesero-spacing-sm);
}

.resumen-total .numero {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-danger);
}

.resumen-total .label {
    font-size: 0.875rem;
    color: var(--bs-secondary);
}

.resumen-urgentes {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.resumen-antigua {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    font-size: 0.8125rem;
    color: var(--bs-secondary);
}

.alertas-filtros {
    display: flex;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    border-bottom: 1px solid var(--bs-border-color);
}

.alertas-lista {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-md);
}

/* Aclaraciones Page */
.aclaraciones-page {
    display: flex;
    flex-direction: column;
}

.aclaraciones-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mesero-spacing-md);
    background: var(--bs-secondary-bg);
}

.aclaraciones-filtros {
    display: flex;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    border-bottom: 1px solid var(--bs-border-color);
}

.aclaraciones-lista {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
}

/* ===========================================
   Shared States
   =========================================== */

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mesero-spacing-lg);
    min-height: 200px;
    gap: var(--mesero-spacing-md);
    color: var(--bs-secondary);
}

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mesero-spacing-lg);
    min-height: 200px;
    gap: var(--mesero-spacing-md);
    text-align: center;
}

.error-container i {
    font-size: 3rem;
    color: var(--bs-danger);
}

.error-container span {
    color: var(--bs-secondary);
}

.empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mesero-spacing-lg);
    min-height: 200px;
    gap: var(--mesero-spacing-md);
    text-align: center;
}

.empty-container i {
    font-size: 3rem;
    color: var(--bs-secondary);
}

.empty-container span {
    color: var(--bs-secondary);
}

/* Skeleton Loaders */
.skeleton {
    background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, rgba(var(--bs-secondary-rgb), 0.15) 50%, var(--bs-secondary-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

.skeleton-card {
    height: 120px;
    border-radius: var(--mesero-card-radius);
}

.skeleton-text {
    height: 1em;
    width: 100%;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===========================================
   Modal Improvements
   =========================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1050;
    animation: modal-overlay-in 0.2s ease;
}

@keyframes modal-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--bs-body-bg);
    border-radius: var(--mesero-card-radius) var(--mesero-card-radius) 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modal-slide-up 0.3s ease;
}

@media (min-width: 576px) {
    .modal-content {
        border-radius: var(--mesero-card-radius);
        margin-bottom: 10vh;
    }
}

@keyframes modal-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mesero-spacing-md);
    border-bottom: 1px solid var(--bs-border-color);
}

.modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.btn-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-close:hover {
    background: var(--bs-border-color);
}

.modal-body {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-md);
}

.modal-footer {
    display: flex;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    border-top: 1px solid var(--bs-border-color);
}

.modal-footer button {
    flex: 1;
}

.btn-cancelar {
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cancelar:hover {
    background: var(--bs-secondary-bg);
}

.btn-responder {
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border: none;
    border-radius: 8px;
    background: var(--bs-primary);
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-responder:hover:not(:disabled) {
    filter: brightness(1.1);
}

.btn-responder:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responder Modal Specific */
.modal-responder .aclaracion-pregunta-resumen {
    padding: var(--mesero-spacing-md);
    background: var(--bs-secondary-bg);
    border-radius: 8px;
}

.modal-responder .aclaracion-pregunta-resumen strong {
    display: block;
    margin-bottom: var(--mesero-spacing-sm);
}

.modal-responder .aclaracion-pregunta-resumen p {
    margin: 0;
    color: var(--bs-secondary);
}

/* Form Styles */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
}

.form-group label {
    font-weight: 500;
    font-size: 0.875rem;
}

.form-group .form-control {
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group .form-control:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.form-group textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* ===========================================
   Additional Animations
   =========================================== */

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-in-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.animate-fade-in {
    animation: fade-in 0.3s ease;
}

.animate-slide-up {
    animation: slide-in-up 0.3s ease;
}

.animate-shake {
    animation: shake 0.5s ease;
}

/* ===========================================
   Nueva Orden Page
   =========================================== */

.nueva-orden-page {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-lg);
    max-width: 600px;
    margin: 0 auto;
    animation: fade-in 0.3s ease;
}

.form-section {
    background: var(--bs-body-bg);
    border-radius: 16px;
    padding: var(--mesero-spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--bs-border-color);
}

.form-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 var(--mesero-spacing-md) 0;
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
}

.loading-inline {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    color: var(--bs-secondary);
    font-size: 0.875rem;
}

.loading-inline .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Mesa Selector Grid */
.mesas-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--mesero-spacing-sm);
}

.mesa-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mesero-spacing-md);
    border: 2px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 90px;
    gap: 4px;
}

.mesa-option:hover {
    border-color: var(--mesero-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.mesa-option.selected {
    border-color: var(--mesero-primary);
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1), rgba(var(--bs-primary-rgb), 0.05));
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.mesa-option .mesa-numero {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1;
}

.mesa-option.selected .mesa-numero {
    color: var(--mesero-primary);
}

.mesa-option .mesa-area {
    font-size: 0.7rem;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mesa-option .mesa-capacidad {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
    gap: 2px;
}

.mesa-option .mesa-capacidad i {
    font-size: 0.7rem;
}

/* Tipo Servicio Selector */
.tipo-servicio-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mesero-spacing-sm);
}

.tipo-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mesero-spacing-md);
    border: 2px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: var(--mesero-spacing-sm);
    min-height: 80px;
}

.tipo-option i {
    font-size: 1.5rem;
    color: var(--bs-secondary);
    transition: color 0.2s ease;
}

.tipo-option span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.tipo-option:hover {
    border-color: var(--mesero-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.tipo-option:hover i {
    color: var(--mesero-primary);
}

.tipo-option.selected {
    border-color: var(--mesero-primary);
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1), rgba(var(--bs-primary-rgb), 0.05));
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.tipo-option.selected i {
    color: var(--mesero-primary);
}

.tipo-option.selected span {
    color: var(--mesero-primary);
    font-weight: 600;
}

/* Comensales Control */
.comensales-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-lg);
}

.btn-cantidad {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cantidad:hover:not(:disabled) {
    border-color: var(--mesero-primary);
    color: var(--mesero-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.btn-cantidad:active:not(:disabled) {
    transform: scale(0.95);
}

.btn-cantidad:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.comensales-valor {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
    min-width: 60px;
    text-align: center;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: var(--mesero-spacing-md);
    padding-top: var(--mesero-spacing-md);
}

.nueva-orden-page .btn-cancelar {
    flex: 1;
    padding: var(--mesero-spacing-md);
    border: 2px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nueva-orden-page .btn-cancelar:hover {
    border-color: var(--bs-secondary);
    background: var(--bs-secondary-bg);
}

.btn-crear {
    flex: 2;
    padding: var(--mesero-spacing-md);
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mesero-primary), var(--mesero-primary-dark));
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
}

.btn-crear:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), 0.4);
}

.btn-crear:active:not(:disabled) {
    transform: translateY(0);
}

.btn-crear:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===========================================
   Orden Detalle Page
   =========================================== */

.orden-detalle-page {
    padding: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-md);
    padding-bottom: calc(var(--mesero-spacing-xl) * 3);
    animation: fade-in 0.3s ease;
}

/* Order Header Card */
.orden-header-card {
    background: var(--bs-body-bg);
    border-radius: 16px;
    padding: var(--mesero-spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--bs-border-color);
}

.orden-info-principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mesero-spacing-md);
}

.orden-info-principal .orden-folio {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.orden-info-principal .orden-estado {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.orden-estado.estado-abierta {
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
}

.orden-estado.estado-preparacion {
    background: rgba(255, 152, 0, 0.15);
    color: #f57c00;
}

.orden-estado.estado-servida {
    background: rgba(76, 175, 80, 0.15);
    color: #388e3c;
}

.orden-estado.estado-pendiente-pago {
    background: rgba(156, 39, 176, 0.15);
    color: #7b1fa2;
}

.orden-estado.estado-pagada {
    background: rgba(76, 175, 80, 0.15);
    color: #388e3c;
}

.orden-estado.estado-cancelada {
    background: rgba(244, 67, 54, 0.15);
    color: #d32f2f;
}

.orden-info-secundaria {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mesero-spacing-md);
}

.orden-info-secundaria span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--bs-secondary);
}

.orden-info-secundaria i {
    font-size: 1rem;
}

/* Items Resumen Bar */
.items-resumen-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mesero-spacing-sm);
    background: var(--bs-body-bg);
    border-radius: 12px;
    padding: var(--mesero-spacing-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--bs-border-color);
}

.resumen-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.resumen-count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.resumen-count.pendiente {
    color: var(--bs-secondary);
}

.resumen-count.preparacion {
    color: #f57c00;
}

.resumen-count.listo {
    color: #4caf50;
}

.resumen-count.servido {
    color: #9e9e9e;
}

.resumen-item > span:last-child {
    font-size: 0.65rem;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Order Items Section */
.orden-items-section {
    background: var(--bs-body-bg);
    border-radius: 16px;
    padding: var(--mesero-spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--bs-border-color);
}

.orden-items-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mesero-spacing-md);
}

.orden-items-section .section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.btn-agregar-items {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: var(--mesero-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-agregar-items:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

/* Items Groups */
.items-group {
    margin-bottom: var(--mesero-spacing-lg);
}

.items-group:last-child {
    margin-bottom: 0;
}

.group-title {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 var(--mesero-spacing-sm) 0;
    padding-bottom: var(--mesero-spacing-sm);
    border-bottom: 1px solid var(--bs-border-color);
}

.group-title.listo {
    color: #4caf50;
}

.group-title.listo i {
    color: #4caf50;
}

.group-title.preparacion {
    color: #f57c00;
}

.group-title.preparacion i {
    color: #f57c00;
}

.group-title.pendiente {
    color: var(--bs-secondary);
}

.group-title.servido {
    color: #9e9e9e;
}

.items-list {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
}

.items-list.collapsed {
    opacity: 0.6;
}

.btn-servir-todos {
    width: 100%;
    margin-top: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #4caf50, #388e3c);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    transition: all 0.2s ease;
}

.btn-servir-todos:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Empty Items State */
.empty-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mesero-spacing-xl) var(--mesero-spacing-md);
    text-align: center;
    gap: var(--mesero-spacing-md);
}

.empty-items i {
    font-size: 3rem;
    color: var(--bs-secondary);
    opacity: 0.5;
}

.empty-items span {
    color: var(--bs-secondary);
    font-size: 0.9rem;
}

/* Order Totales */
.orden-totales {
    background: var(--bs-body-bg);
    border-radius: 16px;
    padding: var(--mesero-spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--bs-border-color);
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mesero-spacing-sm) 0;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.total-row.descuento {
    color: #4caf50;
}

.total-row.total-final {
    padding-top: var(--mesero-spacing-md);
    margin-top: var(--mesero-spacing-sm);
    border-top: 2px solid var(--bs-border-color);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Order Actions */
.orden-acciones {
    position: fixed;
    bottom: calc(var(--mesero-nav-height) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    display: flex;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    background: var(--mesero-bg-surface);
    border-top: 1px solid var(--mesero-border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.btn-accion {
    padding: var(--mesero-spacing-md);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    transition: all 0.2s ease;
}

.btn-accion.btn-enviar {
    flex: 1;
    background: var(--mesero-primary);
    color: var(--mesero-text-inverse);
    box-shadow: var(--mesero-shadow-primary);
}

.btn-accion.btn-enviar:hover:not(:disabled) {
    background: var(--mesero-primary-hover);
    transform: translateY(-2px);
}

.btn-accion.btn-enviar:active:not(:disabled) {
    background: var(--mesero-primary-dark);
    transform: translateY(0);
}

.btn-accion.btn-enviar:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-accion.btn-agregar {
    flex: 1;
    background: var(--mesero-bg-surface-secondary);
    color: var(--mesero-text-primary);
    border: 1px solid var(--mesero-border-color);
}

.btn-accion.btn-agregar:hover {
    background: var(--mesero-border-color);
}

.btn-accion.btn-cobrar {
    flex: 1;
    background: var(--bs-success);
    color: white;
}

.btn-accion.btn-cobrar:hover {
    background: var(--bs-success);
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.btn-accion.btn-cobrar:active {
    transform: translateY(0);
}

.btn-accion.btn-mas-opciones {
    width: 48px;
    background: var(--mesero-bg-surface-secondary);
    color: var(--mesero-text-primary);
    border: 1px solid var(--mesero-border-color);
}

.btn-accion.btn-mas-opciones:hover {
    background: var(--mesero-border-color);
}

/* Opciones Menu */
.opciones-menu {
    position: fixed;
    bottom: calc(var(--mesero-nav-height) + 80px + env(safe-area-inset-bottom, 0px));
    right: var(--mesero-spacing-md);
    background: var(--mesero-bg-surface);
    border-radius: 12px;
    box-shadow: var(--mesero-shadow-lg);
    border: 1px solid var(--mesero-border-color);
    overflow: hidden;
    min-width: 200px;
    animation: slide-in-up 0.2s ease;
    z-index: 101;
}

.opcion-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md);
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
}

.opcion-item:hover {
    background: var(--bs-secondary-bg);
}

.opcion-item.peligro {
    color: var(--bs-danger);
}

.opcion-item.peligro:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
}

/* ===========================================
   ItemOrdenRow Component
   =========================================== */

.item-orden-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: var(--mesero-spacing-sm);
    align-items: center;
    padding: var(--mesero-spacing-md);
    background: var(--bs-body-bg);
    border-radius: 10px;
    border: 1px solid var(--bs-border-color);
    transition: all 0.2s ease;
}

.item-orden-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.item-orden-row.estado-listo {
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.05);
}

.item-orden-row.estado-preparacion {
    border-color: rgba(255, 152, 0, 0.4);
    background: rgba(255, 152, 0, 0.05);
}

.item-orden-row.estado-servido {
    opacity: 0.6;
}

.item-orden-row.estado-cancelado {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Item Info */
.item-info {
    display: flex;
    align-items: flex-start;
    gap: var(--mesero-spacing-sm);
}

.item-cantidad {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--mesero-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.item-detalle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.item-nombre {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    line-height: 1.2;
}

.item-termino {
    font-size: 0.75rem;
    color: #f57c00;
    font-weight: 500;
}

.item-modificadores {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

.item-notas {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mesero-primary);
    font-style: italic;
}

.item-notas i {
    font-size: 0.7rem;
}

/* Item Estado Badge */
.item-estado {
    display: flex;
    align-items: center;
}

.estado-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.estado-badge.pendiente {
    background: rgba(158, 158, 158, 0.15);
    color: #757575;
}

.estado-badge.preparacion {
    background: rgba(255, 152, 0, 0.15);
    color: #f57c00;
}

.estado-badge.listo {
    background: rgba(76, 175, 80, 0.15);
    color: #388e3c;
    animation: pulse-success 2s infinite;
}

.estado-badge.servido {
    background: rgba(158, 158, 158, 0.15);
    color: #9e9e9e;
}

.estado-badge.cancelado {
    background: rgba(244, 67, 54, 0.15);
    color: #d32f2f;
}

/* Item Precio */
.item-precio {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    white-space: nowrap;
}

/* Item Acciones */
.item-acciones {
    display: flex;
    gap: 4px;
}

.btn-item-accion {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.btn-item-accion.btn-servir {
    background: rgba(76, 175, 80, 0.15);
    color: #388e3c;
}

.btn-item-accion.btn-servir:hover {
    background: #4caf50;
    color: white;
}

.btn-item-accion.btn-eliminar {
    background: rgba(244, 67, 54, 0.15);
    color: #d32f2f;
}

.btn-item-accion.btn-eliminar:hover {
    background: #f44336;
    color: white;
}

.btn-item-accion.btn-cancelar {
    background: rgba(255, 152, 0, 0.15);
    color: #f57c00;
}

.btn-item-accion.btn-cancelar:hover {
    background: #ff9800;
    color: white;
}

/* Responsive for Item Row */
@media (max-width: 480px) {
    .item-orden-row {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: var(--mesero-spacing-xs);
    }

    .item-info {
        grid-column: span 2;
    }

    .item-estado {
        grid-column: 3;
    }

    .item-precio {
        grid-column: 1;
        grid-row: 2;
    }

    .item-acciones {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-content: flex-end;
    }
}

/* ===========================================
   FIX: Button element in bottom nav
   =========================================== */

button.mesero-nav-item {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.mesero-nav-item:focus {
    outline: none;
    box-shadow: none;
}

/* ===========================================
   FIX: Mesa Card State Classes
   =========================================== */

.mesa-card.estado-disponible {
    border-color: var(--bs-success);
}

.mesa-card.estado-disponible .mesa-estado {
    background: rgba(var(--bs-success-rgb), 0.15);
    color: var(--bs-success);
}

.mesa-card.estado-ocupada {
    border-color: var(--bs-primary);
}

.mesa-card.estado-ocupada .mesa-estado {
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
}

.mesa-card.estado-reservada {
    border-color: var(--bs-info);
}

.mesa-card.estado-reservada .mesa-estado {
    background: rgba(var(--bs-info-rgb), 0.15);
    color: var(--bs-info);
}

.mesa-card.estado-limpieza {
    border-color: var(--bs-warning);
}

.mesa-card.estado-limpieza .mesa-estado {
    background: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--bs-warning);
}

.mesa-card.estado-fuera-servicio {
    border-color: var(--bs-secondary);
    opacity: 0.7;
}

.mesa-card.estado-fuera-servicio .mesa-estado {
    background: rgba(var(--bs-secondary-rgb), 0.15);
    color: var(--bs-secondary);
}

/* ===========================================
   FIX: FAB Buttons (Ordenes and Catalogo)
   =========================================== */

.fab-nueva-orden {
    position: fixed;
    bottom: calc(var(--mesero-nav-height) + var(--mesero-safe-area-bottom) + 16px);
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--mesero-primary);
    color: var(--mesero-text-inverse);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--mesero-shadow-primary);
    transition: all 0.2s ease;
    z-index: 1020;
}

.fab-nueva-orden:hover {
    transform: scale(1.1);
    background: var(--mesero-primary-hover);
    box-shadow: 0 6px 20px rgba(var(--mesero-primary-rgb), 0.5);
}

.fab-nueva-orden:active {
    transform: scale(0.95);
    background: var(--mesero-primary-dark);
}

.fab-container {
    position: fixed;
    bottom: calc(var(--mesero-nav-height) + var(--mesero-safe-area-bottom) + 16px);
    left: 16px;
    right: 16px;
    z-index: 1020;
}

.fab-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md) var(--mesero-spacing-lg);
    border: none;
    border-radius: 50px;
    background: var(--mesero-primary);
    color: var(--mesero-text-inverse);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--mesero-shadow-primary);
    transition: all 0.2s ease;
}

.fab-button:hover {
    transform: translateY(-2px);
    background: var(--mesero-primary-hover);
    box-shadow: 0 6px 20px rgba(var(--mesero-primary-rgb), 0.5);
}

.fab-button:active {
    transform: translateY(0);
    background: var(--mesero-primary-dark);
}

.fab-button i {
    font-size: 1.25rem;
}

/* ===========================================
   FIX: Load More Button (Catalogo)
   =========================================== */

.load-more {
    display: flex;
    justify-content: center;
    padding: var(--mesero-spacing-lg);
    padding-bottom: calc(var(--mesero-spacing-lg) + 80px);
}

.btn-load-more {
    padding: var(--mesero-spacing-md) var(--mesero-spacing-xl);
    border: 2px solid var(--mesero-border-color);
    border-radius: 50px;
    background: var(--mesero-bg-surface);
    color: var(--mesero-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
}

.btn-load-more:hover:not(:disabled) {
    border-color: var(--mesero-primary);
    color: var(--mesero-primary);
    background: var(--mesero-primary-light);
}

.btn-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===========================================
   FIX: Cantidad Control (Modal)
   =========================================== */

.cantidad-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-lg);
    padding: var(--mesero-spacing-md) 0;
}

.cantidad-valor {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mesero-text-primary);
    min-width: 60px;
    text-align: center;
    line-height: 1;
}

/* ===========================================
   FIX: Toast Success Notification
   =========================================== */

.toast-success {
    position: fixed;
    bottom: calc(var(--mesero-nav-height) + var(--mesero-safe-area-bottom) + 80px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-sm);
    padding: var(--mesero-spacing-md) var(--mesero-spacing-lg);
    background: var(--mesero-success);
    color: var(--mesero-text-inverse);
    border-radius: 50px;
    font-size: 0.9375rem;
    font-weight: 500;
    box-shadow: var(--mesero-shadow-lg);
    z-index: 2000;
    animation: toast-slide-up 0.3s ease;
}

.toast-success i {
    font-size: 1.25rem;
}

@keyframes toast-slide-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ===========================================
   FIX: Loading Overlay (Catalogo)
   =========================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-md);
    color: var(--mesero-text-inverse);
    font-size: 1rem;
    z-index: 2100;
}

/* ===========================================
   FIX: Producto Quick Add Modal Improvements
   =========================================== */

.producto-quick-add .modal-body {
    padding: var(--mesero-spacing-lg);
    max-height: 60vh;
    overflow-y: auto;
}

.producto-precio-grande {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mesero-primary);
    text-align: center;
    margin-bottom: var(--mesero-spacing-md);
}

.producto-quick-add .termino-section,
.producto-quick-add .notas-section {
    margin-top: var(--mesero-spacing-lg);
}

.producto-quick-add .termino-section h5,
.producto-quick-add .notas-section label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mesero-text-primary);
    margin-bottom: var(--mesero-spacing-sm);
}

.termino-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mesero-spacing-sm);
}

.termino-btn {
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border: 2px solid var(--mesero-border-color);
    border-radius: 8px;
    background: var(--mesero-bg-surface);
    color: var(--mesero-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.termino-btn:hover {
    border-color: var(--mesero-primary);
    color: var(--mesero-primary);
}

.termino-btn.selected {
    border-color: var(--mesero-primary);
    background: var(--mesero-primary);
    color: var(--mesero-text-inverse);
}

.notas-section textarea {
    width: 100%;
    padding: var(--mesero-spacing-md);
    border: 2px solid var(--mesero-border-color);
    border-radius: 12px;
    background: var(--mesero-bg-surface);
    color: var(--mesero-text-primary);
    font-size: 0.9375rem;
    resize: none;
    transition: border-color 0.2s ease;
}

.notas-section textarea:focus {
    outline: none;
    border-color: var(--mesero-primary);
}

.notas-section textarea::placeholder {
    color: var(--mesero-text-muted);
}

.producto-quick-add .modal-footer {
    display: flex;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-lg);
    border-top: 1px solid var(--mesero-border-color);
}

.producto-quick-add .btn-cancelar {
    flex: 1;
    padding: var(--mesero-spacing-md);
    border: 2px solid var(--mesero-border-color);
    border-radius: 12px;
    background: var(--mesero-bg-surface);
    color: var(--mesero-text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.producto-quick-add .btn-cancelar:hover {
    border-color: var(--mesero-text-secondary);
    background: var(--mesero-bg-surface-secondary);
}

.btn-agregar-orden {
    flex: 2;
    padding: var(--mesero-spacing-md);
    border: none;
    border-radius: 12px;
    background: var(--mesero-primary);
    color: var(--mesero-text-inverse);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    transition: all 0.2s ease;
    box-shadow: var(--mesero-shadow-primary);
}

.btn-agregar-orden:hover:not(:disabled) {
    background: var(--mesero-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--mesero-primary-rgb), 0.4);
}

.btn-agregar-orden:active:not(:disabled) {
    background: var(--mesero-primary-dark);
    transform: translateY(0);
}

.btn-agregar-orden:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Personalizaciones Section */
.personalizaciones-section {
    margin-top: var(--mesero-spacing-lg);
}

.personalizacion-grupo {
    margin-bottom: var(--mesero-spacing-lg);
}

.personalizacion-grupo h5 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mesero-text-primary);
    margin-bottom: var(--mesero-spacing-sm);
}

.personalizacion-grupo h5 .requerido {
    color: var(--mesero-danger);
}

.opciones-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mesero-spacing-sm);
}

.opcion-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border: 2px solid var(--mesero-border-color);
    border-radius: 8px;
    background: var(--mesero-bg-surface);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.opcion-btn:hover {
    border-color: var(--mesero-primary);
}

.opcion-btn.selected {
    border-color: var(--mesero-primary);
    background: var(--mesero-primary-light);
}

.opcion-nombre {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mesero-text-primary);
}

.opcion-precio {
    font-size: 0.75rem;
    color: var(--mesero-success);
    font-weight: 600;
}

/* Loading Spinner in Modal */
.producto-quick-add .loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mesero-spacing-xl);
    gap: var(--mesero-spacing-md);
    color: var(--mesero-text-secondary);
}

/* ===========================================
   FIX: Alerta Card for PlatillosListos
   =========================================== */

.alerta-card.tipo-platillos-listos {
    border-left-color: var(--mesero-success);
}

.alerta-card.tipo-platillos-listos .alerta-icon {
    background: var(--mesero-success-light);
    color: var(--mesero-success);
}

/* ===========================================
   Pago Page Styles
   =========================================== */

.pago-page {
    padding: var(--mesero-spacing-md);
    padding-bottom: calc(var(--mesero-nav-height) + var(--mesero-safe-area-bottom) + 100px);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-lg);
}

.pago-header {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
}

.pago-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.pago-header .pago-info {
    display: flex;
    gap: var(--mesero-spacing-md);
    font-size: 0.875rem;
    color: var(--mesero-text-secondary);
}

.cuenta-card,
.forma-pago-card,
.pagos-registrados-card {
    background: var(--mesero-bg-surface);
    border: 1px solid var(--mesero-border-color);
    border-radius: var(--mesero-card-radius);
    padding: var(--mesero-spacing-md);
}

.cuenta-card h3,
.forma-pago-card h3,
.pagos-registrados-card h3 {
    margin: 0 0 var(--mesero-spacing-md) 0;
    font-size: 1rem;
    font-weight: 600;
}

.cuenta-items {
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
    margin-bottom: var(--mesero-spacing-md);
}

.cuenta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mesero-spacing-sm) 0;
    border-bottom: 1px solid var(--mesero-border-color);
}

.cuenta-item:last-child {
    border-bottom: none;
}

.cuenta-item-nombre {
    flex: 1;
}

.cuenta-item-cantidad {
    color: var(--mesero-text-secondary);
    margin-right: var(--mesero-spacing-md);
}

.cuenta-totales {
    border-top: 2px solid var(--mesero-border-color);
    padding-top: var(--mesero-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
}

.cuenta-total-row {
    display: flex;
    justify-content: space-between;
}

.cuenta-total-row.total-final {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mesero-primary);
    padding-top: var(--mesero-spacing-sm);
    border-top: 1px solid var(--mesero-border-color);
}

.cuenta-total-row.pendiente {
    color: var(--bs-danger);
    font-weight: 600;
}

.propina-buttons {
    display: flex;
    gap: var(--mesero-spacing-sm);
    margin-bottom: var(--mesero-spacing-md);
}

.propina-btn {
    flex: 1;
    padding: var(--mesero-spacing-sm) var(--mesero-spacing-md);
    border: 1px solid var(--mesero-border-color);
    border-radius: 8px;
    background: var(--mesero-bg-surface);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease;
}

.propina-btn:hover {
    border-color: var(--mesero-primary);
}

.propina-btn.active {
    background: var(--mesero-primary);
    color: white;
    border-color: var(--mesero-primary);
}

.btn-registrar-pago {
    width: 100%;
    padding: var(--mesero-spacing-md);
    border: none;
    border-radius: var(--mesero-card-radius);
    background: var(--mesero-primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    transition: all 0.15s ease;
}

.btn-registrar-pago:hover:not(:disabled) {
    background: var(--mesero-primary-hover);
}

.btn-registrar-pago:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cerrar-cuenta {
    width: 100%;
    padding: var(--mesero-spacing-md);
    border: none;
    border-radius: var(--mesero-card-radius);
    background: var(--bs-success);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mesero-spacing-sm);
    transition: all 0.15s ease;
}

.btn-cerrar-cuenta:hover:not(:disabled) {
    filter: brightness(1.1);
}

.btn-cerrar-cuenta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pago-registrado-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mesero-spacing-sm);
    background: var(--mesero-bg-surface-secondary);
    border-radius: 8px;
    margin-bottom: var(--mesero-spacing-sm);
}

.pago-registrado-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pago-registrado-forma {
    font-weight: 600;
}

.pago-registrado-fecha {
    font-size: 0.75rem;
    color: var(--mesero-text-secondary);
}

.pago-registrado-monto {
    font-weight: 700;
    color: var(--bs-success);
}

/* ===========================================
   Toast Notifications Container
   =========================================== */

.mesero-toast-container {
    position: fixed;
    top: calc(var(--mesero-top-bar-height) + var(--mesero-safe-area-top) + var(--mesero-spacing-md));
    left: var(--mesero-spacing-md);
    right: var(--mesero-spacing-md);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--mesero-spacing-sm);
    pointer-events: none;
}

.mesero-toast {
    display: flex;
    align-items: center;
    gap: var(--mesero-spacing-md);
    padding: var(--mesero-spacing-md);
    background: var(--mesero-bg-surface);
    border-radius: var(--mesero-card-radius);
    box-shadow: var(--mesero-shadow-lg);
    border-left: 4px solid var(--mesero-info);
    animation: toast-enter 0.3s ease-out;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mesero-toast:active {
    transform: scale(0.98);
}

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toast Types */
.mesero-toast.toast--success {
    border-left-color: var(--mesero-success);
}

.mesero-toast.toast--warning {
    border-left-color: var(--mesero-warning);
}

.mesero-toast.toast--danger {
    border-left-color: var(--mesero-danger);
}

.mesero-toast.toast--items-listos {
    border-left-color: var(--mesero-success);
    background: linear-gradient(90deg, var(--mesero-success-light) 0%, var(--mesero-bg-surface) 30%);
}

.mesero-toast.toast--llamada {
    border-left-color: var(--mesero-warning);
    background: linear-gradient(90deg, var(--mesero-warning-light) 0%, var(--mesero-bg-surface) 30%);
}

.mesero-toast.toast--cuenta {
    border-left-color: var(--mesero-primary);
    background: linear-gradient(90deg, var(--mesero-primary-light) 0%, var(--mesero-bg-surface) 30%);
}

.mesero-toast.toast--aclaracion {
    border-left-color: var(--mesero-info);
    background: linear-gradient(90deg, var(--mesero-info-light) 0%, var(--mesero-bg-surface) 30%);
}

/* Urgent Toast */
.mesero-toast.urgente {
    border-left-color: var(--mesero-danger);
    border-left-width: 6px;
    animation: toast-enter 0.3s ease-out, toast-urgente-pulse 1s ease-in-out infinite;
}

@keyframes toast-urgente-pulse {
    0%, 100% {
        box-shadow: var(--mesero-shadow-lg);
    }
    50% {
        box-shadow: 0 0 0 4px var(--mesero-danger-light), var(--mesero-shadow-lg);
    }
}

/* Toast Icon */
.mesero-toast__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    background: var(--mesero-bg-surface-secondary);
    color: var(--mesero-text-secondary);
}

.mesero-toast.toast--success .mesero-toast__icon,
.mesero-toast.toast--items-listos .mesero-toast__icon {
    background: var(--mesero-success-light);
    color: var(--mesero-success);
}

.mesero-toast.toast--warning .mesero-toast__icon,
.mesero-toast.toast--llamada .mesero-toast__icon {
    background: var(--mesero-warning-light);
    color: var(--mesero-warning);
}

.mesero-toast.toast--danger .mesero-toast__icon,
.mesero-toast.urgente .mesero-toast__icon {
    background: var(--mesero-danger-light);
    color: var(--mesero-danger);
}

.mesero-toast.toast--cuenta .mesero-toast__icon {
    background: var(--mesero-primary-light);
    color: var(--mesero-primary);
}

.mesero-toast.toast--aclaracion .mesero-toast__icon {
    background: var(--mesero-info-light);
    color: var(--mesero-info);
}

/* Toast Content */
.mesero-toast__content {
    flex: 1;
    min-width: 0;
}

.mesero-toast__titulo {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--mesero-text-primary);
    margin-bottom: 2px;
}

.mesero-toast__mensaje {
    font-size: 0.8125rem;
    color: var(--mesero-text-secondary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Toast Close Button */
.mesero-toast__close {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: none;
    background: transparent;
    color: var(--mesero-text-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.mesero-toast__close:hover {
    background: var(--mesero-bg-surface-secondary);
    color: var(--mesero-text-primary);
}

/* Toast Navigation Indicator */
.mesero-toast__indicator {
    color: var(--mesero-text-muted);
    font-size: 0.875rem;
}