*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base:#0d0f14;--bg-surface:#13161e;--bg-elevated:#1a1e2a;--bg-overlay:#21263a;--accent:#f59e0b;--accent-dim:#d97706;--accent-glow:#f59e0b26;--accent-light:#fbbf24;--green:#10b981;--green-dim:#10b98126;--red:#ef4444;--red-dim:#ef444426;--blue:#3b82f6;--blue-dim:#3b82f626;--purple:#8b5cf6;--purple-dim:#8b5cf626;--orange:#f97316;--orange-dim:#f9731626;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#475569;--border:#ffffff12;--border-accent:#f59e0b4d;--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 20px #0006;--shadow-lg:0 8px 40px #00000080;--shadow-accent:0 4px 24px #f59e0b33;--transition:all .2s cubic-bezier(.4,0,.2,1)}body.light-theme{--bg-base:#f8fafc;--bg-surface:#fff;--bg-elevated:#f1f5f9;--bg-overlay:#e2e8f0;--accent:#d97706;--accent-dim:#b45309;--accent-glow:#d9770626;--accent-light:#f59e0b;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--border:#0000001a;--border-accent:#d977064d;--shadow-sm:0 2px 8px #0000000d;--shadow-md:0 4px 20px #00000014;--shadow-lg:0 8px 40px #0000001f;--shadow-accent:0 4px 24px #d9770633}html,body,#root{background:var(--bg-base);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,sans-serif}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-overlay);border-radius:99px}.app-layout{flex-direction:column;height:100vh;display:flex;overflow:hidden}.main-content{flex:1;display:flex;overflow:hidden}.topbar{background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:100;flex-shrink:0;justify-content:space-between;align-items:center;height:60px;padding:0 24px;display:flex}.topbar-brand{align-items:center;gap:10px;display:flex}.topbar-logo{background:linear-gradient(135deg, var(--accent), var(--orange));border-radius:var(--radius-sm);width:32px;height:32px;box-shadow:var(--shadow-accent);justify-content:center;align-items:center;font-size:16px;display:flex}.topbar-title{letter-spacing:-.5px;background:linear-gradient(135deg, var(--accent-light), var(--orange));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:18px;font-weight:800}.topbar-nav{gap:4px;display:flex}.nav-btn{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border:none;align-items:center;gap:6px;padding:7px 14px;font-family:inherit;font-size:13px;font-weight:500;display:flex}.nav-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.nav-btn.active{background:var(--accent-glow);color:var(--accent);border:1px solid var(--border-accent)}.topbar-right{align-items:center;gap:12px;display:flex}.topbar-clock{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}.user-badge{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);align-items:center;gap:8px;padding:6px 12px;display:flex}.user-badge:hover{border-color:var(--border-accent)}.user-avatar{background:linear-gradient(135deg, var(--purple), var(--blue));color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:700;display:flex}.user-name{font-size:13px;font-weight:600}.user-role{color:var(--text-muted);font-size:11px}.login-screen{background:var(--bg-base);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-bg{background:radial-gradient(60% 50% at 30% 40%,#f59e0b14 0%,#0000 60%),radial-gradient(50% 60% at 70% 60%,#f973160f 0%,#0000 60%);position:absolute;inset:0}.login-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);width:400px;box-shadow:var(--shadow-lg);padding:48px 40px;animation:.4s cubic-bezier(.4,0,.2,1) slideUp;position:relative}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.login-logo{background:linear-gradient(135deg, var(--accent), var(--orange));border-radius:var(--radius-lg);justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 24px;font-size:28px;display:flex;box-shadow:0 8px 32px #f59e0b4d}.login-title{text-align:center;letter-spacing:-.5px;background:linear-gradient(135deg, var(--accent-light), var(--orange));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:4px;font-size:28px;font-weight:800}.login-subtitle{text-align:center;color:var(--text-muted);margin-bottom:36px;font-size:14px}.form-group{margin-bottom:16px}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:12px;font-weight:600;display:block}.form-input{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);transition:var(--transition);outline:none;padding:12px 14px;font-family:inherit;font-size:14px}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.form-input::placeholder{color:var(--text-muted)}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-dim));border-radius:var(--radius-sm);color:#000;cursor:pointer;width:100%;transition:var(--transition);box-shadow:var(--shadow-accent);border:none;margin-top:8px;padding:13px;font-family:inherit;font-size:14px;font-weight:700}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 32px #f59e0b59}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.login-error{background:var(--red-dim);border-radius:var(--radius-sm);color:var(--red);text-align:center;border:1px solid #ef44444d;margin-top:12px;padding:10px 14px;font-size:13px}.floorplan-container{flex:1;display:flex;overflow:hidden}.floorplan-sidebar{background:var(--bg-surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:220px;display:flex;overflow-y:auto}.sidebar-section{border-bottom:1px solid var(--border);padding:16px}.sidebar-section-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-size:10px;font-weight:700}.area-btn{border-radius:var(--radius-sm);width:100%;color:var(--text-secondary);text-align:left;cursor:pointer;transition:var(--transition);background:0 0;border:1px solid #0000;justify-content:space-between;align-items:center;margin-bottom:2px;padding:9px 12px;font-family:inherit;font-size:13px;font-weight:500;display:flex}.area-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.area-btn.active{background:var(--accent-glow);color:var(--accent);border-color:var(--border-accent)}.area-count{background:var(--bg-overlay);color:var(--text-muted);border-radius:99px;padding:2px 7px;font-size:11px}.status-legend{flex-direction:column;gap:8px;display:flex}.legend-item{color:var(--text-secondary);align-items:center;gap:8px;font-size:12px;display:flex}.legend-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.stats-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.stat-mini{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;padding:10px}.stat-mini-value{font-size:22px;font-weight:800;line-height:1}.stat-mini-label{color:var(--text-muted);margin-top:3px;font-size:10px}.floorplan-main{flex:1;padding:24px;overflow-y:auto}.floorplan-area-title{align-items:center;gap:10px;margin-bottom:20px;font-size:20px;font-weight:700;display:flex}.floorplan-area-title:after{content:"";background:var(--border);flex:1;height:1px}.tables-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;display:grid}.table-card{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;-webkit-user-select:none;user-select:none;padding:20px 16px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.table-card:before{content:"";border-radius:var(--radius-lg) var(--radius-lg) 0 0;height:3px;transition:var(--transition);position:absolute;top:0;left:0;right:0}.table-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.table-card.libre{border-color:#10b9814d}.table-card.libre:before{background:var(--green)}.table-card.libre:hover{border-color:var(--green);box-shadow:0 8px 32px #10b98126}.table-card.ocupada{border-color:#ef44444d}.table-card.ocupada:before{background:var(--red)}.table-card.ocupada:hover{border-color:var(--red);box-shadow:0 8px 32px #ef444426}.table-card.reservada{border-color:#8b5cf64d}.table-card.reservada:before{background:var(--purple)}.table-card.reservada:hover{border-color:var(--purple);box-shadow:0 8px 32px #8b5cf626}.table-card.cuenta_pedida{border-color:#3b82f64d}.table-card.cuenta_pedida:before{background:var(--blue)}.table-card.cuenta_pedida:hover{border-color:var(--blue);box-shadow:0 8px 32px #3b82f626}.table-card.nueva{animation:1.5s ease-in-out infinite pulse-new}@keyframes pulse-new{0%,to{box-shadow:0 0 #f59e0b00}50%{box-shadow:0 0 0 6px #f59e0b26}}.table-icon{filter:drop-shadow(0 2px 4px #0000004d);margin-bottom:10px;font-size:32px;display:block}.table-number{letter-spacing:-.5px;margin-bottom:2px;font-size:22px;font-weight:800}.table-area{color:var(--text-muted);margin-bottom:10px;font-size:11px}.table-status-badge{text-transform:uppercase;letter-spacing:.3px;border-radius:99px;align-items:center;gap:5px;padding:4px 8px;font-size:11px;font-weight:600;display:inline-flex}.table-status-badge.libre{background:var(--green-dim);color:var(--green)}.table-status-badge.ocupada{background:var(--red-dim);color:var(--red)}.table-status-badge.reservada{background:var(--purple-dim);color:var(--purple)}.table-status-badge.cuenta_pedida{background:var(--blue-dim);color:var(--blue)}.table-status-dot{background:currentColor;border-radius:50%;width:6px;height:6px}.table-order-info{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}.table-mesero{color:var(--text-secondary);margin-bottom:4px;font-size:11px}.table-total{color:var(--accent);font-size:15px;font-weight:700}.table-time{color:var(--text-muted);margin-top:2px;font-size:11px}.table-capacity{color:var(--text-muted);align-items:center;gap:3px;font-size:10px;display:flex;position:absolute;top:14px;right:14px}.order-panel{background:var(--bg-surface);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;width:420px;animation:.3s cubic-bezier(.4,0,.2,1) slideInRight;display:flex;overflow:hidden}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.panel-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.panel-title{font-size:16px;font-weight:700}.panel-subtitle{color:var(--text-muted);margin-top:2px;font-size:12px}.panel-close{border-radius:var(--radius-sm);border:1px solid var(--border);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;justify-content:center;align-items:center;font-family:inherit;display:flex}.panel-close:hover{background:var(--red-dim);color:var(--red);border-color:#ef44444d}.menu-tabs{border-bottom:1px solid var(--border);flex-shrink:0;gap:4px;padding:10px 12px;display:flex;overflow-x:auto}.menu-tab{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition);white-space:nowrap;background:0 0;border:1px solid #0000;align-items:center;gap:5px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:500;display:flex}.menu-tab:hover{background:var(--bg-elevated);color:var(--text-primary)}.menu-tab.active{background:var(--accent-glow);color:var(--accent);border-color:var(--border-accent)}.products-grid{flex-shrink:0;grid-template-columns:1fr 1fr;gap:8px;max-height:320px;padding:12px;display:grid;overflow-y:auto}.product-btn{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);text-align:left;padding:12px 10px;font-family:inherit;position:relative;overflow:hidden}.product-btn:hover{border-color:var(--border-accent);background:var(--bg-overlay);transform:scale(1.02)}.product-btn:active{transform:scale(.98)}.product-btn-name{color:var(--text-primary);margin-bottom:6px;font-size:12px;font-weight:600;line-height:1.3}.product-btn-price{color:var(--accent);font-size:13px;font-weight:700}.product-btn-time{color:var(--text-muted);margin-top:2px;font-size:10px}.order-items{flex-direction:column;flex:1;gap:6px;padding:12px;display:flex;overflow-y:auto}.order-empty{color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;font-size:13px;display:flex}.order-item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);align-items:center;gap:10px;padding:10px 12px;animation:.2s fadeInItem;display:flex}@keyframes fadeInItem{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.order-item-qty{align-items:center;gap:6px;display:flex}.qty-btn{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-overlay);width:24px;height:24px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);justify-content:center;align-items:center;font-family:inherit;font-size:14px;font-weight:700;display:flex}.qty-btn:hover{background:var(--accent-glow);color:var(--accent);border-color:var(--border-accent)}.qty-value{text-align:center;min-width:20px;font-size:14px;font-weight:700}.order-item-name{flex:1;font-size:13px;font-weight:500}.order-item-price{color:var(--accent);white-space:nowrap;font-size:13px;font-weight:700}.order-item-remove{border-radius:var(--radius-sm);width:24px;height:24px;color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;justify-content:center;align-items:center;font-family:inherit;display:flex}.order-item-remove:hover{color:var(--red);background:var(--red-dim)}.order-footer{border-top:1px solid var(--border);flex-shrink:0;padding:16px 20px}.order-totals{margin-bottom:14px}.order-total-row{color:var(--text-secondary);justify-content:space-between;margin-bottom:6px;font-size:13px;display:flex}.order-total-row.grand-total{color:var(--text-primary);border-top:1px solid var(--border);margin-top:6px;padding-top:10px;font-size:18px;font-weight:800}.order-total-row.grand-total span:last-child{color:var(--accent)}.order-actions{gap:8px;display:flex}.btn-send{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--green), #059669);color:#fff;cursor:pointer;transition:var(--transition);border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:12px;font-family:inherit;font-size:13px;font-weight:700;display:flex}.btn-send:hover{transform:translateY(-1px);box-shadow:0 4px 16px #10b9814d}.btn-send:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-bill{border-radius:var(--radius-sm);border:1.5px solid var(--border-accent);background:var(--accent-glow);color:var(--accent);cursor:pointer;transition:var(--transition);flex:1;justify-content:center;align-items:center;gap:6px;padding:12px;font-family:inherit;font-size:13px;font-weight:700;display:flex}.btn-bill:hover{background:var(--accent);color:#000}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);width:380px;box-shadow:var(--shadow-lg);padding:32px;animation:.3s cubic-bezier(.4,0,.2,1) slideUp}.modal-title{margin-bottom:4px;font-size:20px;font-weight:800}.modal-subtitle{color:var(--text-muted);margin-bottom:24px;font-size:13px}.modal-total{background:var(--accent-glow);border:1px solid var(--border-accent);border-radius:var(--radius-md);text-align:center;margin-bottom:20px;padding:16px}.modal-total-label{color:var(--text-muted);margin-bottom:4px;font-size:12px}.modal-total-value{color:var(--accent);font-size:32px;font-weight:800}.payment-methods{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;display:grid}.payment-method-btn{border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;transition:var(--transition);justify-content:center;align-items:center;gap:6px;padding:12px;font-family:inherit;font-size:13px;font-weight:500;display:flex}.payment-method-btn:hover{border-color:var(--border-accent);color:var(--accent)}.payment-method-btn.selected{background:var(--accent-glow);border-color:var(--border-accent);color:var(--accent)}.modal-actions{gap:8px;margin-top:8px;display:flex}.btn-cancel{border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;flex:1;padding:12px;font-family:inherit;font-size:14px;font-weight:600}.btn-cancel:hover{background:var(--bg-elevated);color:var(--text-primary)}.btn-confirm{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--accent), var(--accent-dim));color:#000;cursor:pointer;transition:var(--transition);border:none;flex:2;padding:12px;font-family:inherit;font-size:14px;font-weight:700}.btn-confirm:hover{box-shadow:var(--shadow-accent);transform:translateY(-1px)}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loader-screen{height:100vh;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:14px;display:flex}.toast-custom{background:var(--bg-elevated)!important;border:1px solid var(--border)!important;color:var(--text-primary)!important;border-radius:var(--radius-md)!important;font-family:Inter,sans-serif!important;font-size:13px!important}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-blue{color:var(--blue)}.text-muted{color:var(--text-muted)}.font-bold{font-weight:700}.text-sm{font-size:13px}.text-xs{font-size:11px}