/* TABS */
.section-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn { padding: 10px 20px; background: #E2E8F0; border: none; border-radius: 20px; font-weight: 600; cursor: pointer; transition: var(--transition); }
.tab-btn.active { background: var(--text-main); color: white; }

/* TABLE CARDS (Shared by Tables and Delivery) */
.tables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
.table-card {
    background: var(--surface); border-radius: var(--radius); padding: 15px; cursor: pointer;
    box-shadow: var(--shadow); transition: var(--transition); border-top: 6px solid var(--success);
    display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; position: relative;
}
.table-card:hover { transform: translateY(-3px); }

/* Status Colors - Border */
.table-card.available { border-color: var(--success); }
.table-card.occupied { border-color: var(--info); }
.table-card.preparing { border-color: var(--warning); }
.table-card.pending { border-color: var(--alert); }
.table-card.en-mesa { border-color: var(--turquoise); }
.table-card.end { border-color: var(--neutral); }
.table-card.locked { border-color: #CBD5E1; opacity: 0.6; background: #F8FAFC; border-top-style: dashed; }

/* Status Colors - Text */
.table-card.available .table-status { color: var(--success); }
.table-card.occupied .table-status { color: var(--info); }
.table-card.preparing .table-status { color: var(--warning); }
.table-card.pending .table-status { color: var(--alert); }
.table-card.en-mesa .table-status { color: var(--turquoise); }
.table-card.end .table-status { color: var(--neutral); }
.table-card.locked .table-status { color: var(--text-muted); }

/* Layout Elements (Absolutos para esquinas) */
.table-time { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; color: var(--text-muted); }

.table-pay { position: absolute; top: 10px; right: 12px; font-size: 16px; transition: var(--transition); }
.table-pay.unpaid { opacity: 0.2; filter: grayscale(100%); }
.table-pay.paid { opacity: 1; filter: drop-shadow(0 0 3px rgba(250,204,21,0.8)); transform: scale(1.1); }

.table-number { font-size: 32px; font-weight: 800; margin-bottom: 2px; color: var(--text-main); line-height: 1; }
.table-status { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }

.table-guests { position: absolute; bottom: 12px; left: 12px; font-size: 11px; font-weight: 700; color: var(--text-muted); background: none; padding: 0; }
.table-server { position: absolute; bottom: 12px; right: 12px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }

/* Dashboard Counters */
.status-counters-row {
    grid-column: 1 / -1; 
    display: flex; gap: 20px; margin-bottom: 5px; flex-wrap: wrap;
    font-size: 12px; font-weight: 700; background: var(--surface);
    padding: 12px 20px; border-radius: var(--radius); box-shadow: var(--shadow);
    align-items: center; justify-content: center;
}

/* BUTTONS */
.btn { padding: 15px; border: none; border-radius: var(--radius); font-size: 16px; font-weight: 700; cursor: pointer; transition: var(--transition); text-align: center; }
.btn-primary { background: var(--primary); color: var(--text-main); }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-neutral { background: #E2E8F0; color: var(--text-main); }
.btn:active { transform: scale(0.98); }

/* NOTIFICATIONS & TOASTS */
#notifications { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--text-main); color: white; padding: 15px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow); transform: translateX(120%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--primary); }
.toast.show { transform: translateX(0); }

/* FLY ANIMATION */
.fly-item { position: fixed; width: 60px; height: 60px; border-radius: 50%; background-size: cover; z-index: 1500; pointer-events: none; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); }